@overmap-ai/forms 1.0.4-form-editor-revamp.0 → 1.0.4

package/dist/forms.js

@@ -1,31 +1,37 @@
-var jt = Object.defineProperty;
-var Ht = (o, i, e) => i in o ? jt(o, i, { enumerable: !0, configurable: !0, writable: !0, value: e }) : o[i] = e;
-var m = (o, i, e) => (Ht(o, typeof i != "symbol" ? i + "" : i, e), e);
-import { jsx as r, jsxs as b, Fragment as Ze } from "react/jsx-runtime";
-import { Flex as y, Text as V, useSeverityColor as ue, Checkbox as Ut, CheckCircledIcon as Gt, TextField as ae, FontFamilyIcon as Kt, CalendarIcon as Yt, InputIcon as Qt, TextArea as Xt, RowsIcon as Zt, Select as vt, Box as ge, IconButton as K, PlusIcon as _e, Badge as He, Cross1Icon as wt, ListBulletIcon as Jt, DropdownMenuIcon as ei, MultiSelect as ti, CheckboxIcon as ii, Card as fe, Heading as Me, Button as H, UploadIcon as xt, ButtonList as Oe, divButtonProps as ni, StarFilledIcon as ri, StarIcon as oi, QuestionMarkCircledIcon as si, PersonIcon as li, Tooltip as ai, Avatar as ci, Separator as di, Pencil1Icon as ui, TrashIcon as fi, CopyIcon as mi, DragHandleDots2Icon as pi, DropdownMenu as hi, DotsVerticalIcon as gi, useAlertDialog as bi, Em as yi, Strong as ut, useToast as vi, Tabs as Z } from "@overmap-ai/blocks";
-import { useField as Je, useFormikContext as me, useFormik as et, FormikProvider as tt } from "formik";
-import wi, { useMemo as x, memo as S, useCallback as T, useState as Y, useEffect as ve, useRef as xi, forwardRef as pe, createElement as ft, useReducer as Ii } from "react";
-import { DragDropContext as It, Droppable as it, Draggable as nt } from "@hello-pangea/dnd";
-import { slugify as Ci, useAppSelector as M, selectFormRevision as Ct, useSDK as Ft, selectSubmissionAttachments as Fi, selectFilteredUserForms as Ti, selectUserFormMapping as Si, selectOrganization as Tt, selectUser as rt, selectNumberOfUserForms as zi, selectCurrentUser as St, classNames as zt, isToday as Ei, getLocalDateString as Li, selectLatestFormRevision as Ai, useFileSrc as Pi, selectSubmissionsForForm as ki } from "@overmap-ai/core";
-import ce from "lodash.get";
-import ot from "lodash.set";
-class Et {
-  constructor(i) {
-    m(this, "type");
-    m(this, "identifier");
-    m(this, "description");
-    const { description: e = null, identifier: t, type: n } = i;
-    this.identifier = t, this.description = e, this.type = n;
+var __defProp = Object.defineProperty;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __publicField = (obj, key, value) => {
+  __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
+  return value;
+};
+import { jsx, jsxs, Fragment } from "react/jsx-runtime";
+import { Flex, Text, useSeverityColor, Checkbox, CheckCircledIcon, TextField as TextField$1, FontFamilyIcon, CalendarIcon, InputIcon, TextArea, RowsIcon, Select, Box, IconButton, PlusIcon, Badge, Cross1Icon, ListBulletIcon, DropdownMenuIcon, MultiSelect, CheckboxIcon, Card, Heading, Button, UploadIcon, ButtonList, divButtonProps, StarFilledIcon, StarIcon, QuestionMarkCircledIcon, PersonIcon, Tooltip, Avatar, Separator, Dialog, Pencil1Icon, TrashIcon, CopyIcon, DragHandleDots2Icon, DropdownMenu, DotsVerticalIcon, useAlertDialog, Em, Strong, useToast, Tabs } from "@overmap-ai/blocks";
+import { useField, useFormikContext, useFormik, FormikProvider } from "formik";
+import React, { useMemo, memo, useCallback, useState, useEffect, useRef, forwardRef, useReducer } from "react";
+import { DragDropContext, Droppable, Draggable } from "@hello-pangea/dnd";
+import { slugify, useAppSelector, selectFormRevision, useSDK, selectSubmissionAttachments, selectFilteredUserForms, selectUserFormMapping, selectOrganization, selectUser, selectNumberOfUserForms, selectCurrentUser, classNames, isToday, getLocalDateString, selectLatestFormRevision, useFileSrc, selectSubmissionsForForm } from "@overmap-ai/core";
+import get from "lodash.get";
+import set from "lodash.set";
+class BaseFormElement {
+  constructor(options) {
+    __publicField(this, "type");
+    __publicField(this, "identifier");
+    __publicField(this, "description");
+    const { description: description2 = null, identifier, type } = options;
+    this.identifier = identifier;
+    this.description = description2;
+    this.type = type;
   }
   getId() {
     return this.identifier;
   }
-  static deserialize(i) {
+  static deserialize(_data) {
     throw new Error(`${this.name} must implement deserialize.`);
   }
   _serialize() {
-    if (!this.identifier)
+    if (!this.identifier) {
       throw new Error("Field identifier must be set before serializing.");
+    }
     return {
       type: this.type,
       identifier: this.identifier,
@@ -33,46 +39,51 @@ class Et {
     };
   }
 }
-class O extends Et {
-  constructor(e) {
-    const { label: t, required: n, fieldValidators: s = [], formValidators: a = [], ...c } = e;
-    super(c);
-    m(this, "required");
-    m(this, "formValidators");
-    m(this, "fieldValidators");
-    m(this, "label");
+class BaseField extends BaseFormElement {
+  constructor(options) {
+    const { label, required, fieldValidators = [], formValidators = [], ...base } = options;
+    super(base);
+    __publicField(this, "required");
+    __publicField(this, "formValidators");
+    __publicField(this, "fieldValidators");
+    __publicField(this, "label");
     /**
      * By default, validation doesn't execute on `onChange` events when editing fields
      * until the field has been `touched`. This can be overridden by setting this to `false`
      * if you want to validate on every `onChange` event. This is important for fields like booleans
      * which don't have a `onBlur` event (which is used to set the `touched` state).
      */
-    m(this, "onlyValidateAfterTouched", !0);
-    this.label = t, this.required = n, this.fieldValidators = s, this.formValidators = a;
+    __publicField(this, "onlyValidateAfterTouched", true);
+    this.label = label;
+    this.required = required;
+    this.fieldValidators = fieldValidators;
+    this.formValidators = formValidators;
   }
   static getFieldCreationSchema() {
     return [];
   }
-  isBlank(e) {
-    return e == null || e === "";
+  isBlank(value) {
+    return value === null || value === void 0 || value === "";
   }
-  getValueFromChangeEvent(e) {
-    return e.target.value;
+  getValueFromChangeEvent(event) {
+    return event.target.value;
   }
-  getError(e, t) {
-    if (this.required && this.isBlank(e))
+  getError(value, allValues) {
+    if (this.required && this.isBlank(value)) {
       return "This field is required.";
-    for (const n of this.getFieldValidators()) {
-      const s = n(e);
-      if (s)
-        return s;
     }
-    if (t)
-      for (const n of this.getFormValidators()) {
-        const s = n(e, t);
-        if (s)
-          return s;
+    for (const validator of this.getFieldValidators()) {
+      const error = validator(value);
+      if (error)
+        return error;
+    }
+    if (allValues) {
+      for (const validator of this.getFormValidators()) {
+        const error = validator(value, allValues);
+        if (error)
+          return error;
       }
+    }
   }
   // TODO: We can probably combine _serialize and serialize.
   _serialize() {
@@ -89,168 +100,218 @@ class O extends Et {
     return [...this.formValidators];
   }
 }
-m(O, "fieldTypeName"), m(O, "fieldTypeDescription");
-const Vi = "_description_17zed_1", Re = {
-  description: Vi
-}, q = (o) => {
-  const { label: i, children: e, severity: t, inputId: n, labelId: s, flexProps: a } = o;
-  return /* @__PURE__ */ r(y, { direction: "column", gap: "1", asChild: !0, ...a, children: /* @__PURE__ */ b("label", { htmlFor: n, children: [
-    /* @__PURE__ */ r(V, { severity: t, id: s, children: i }),
-    e
+__publicField(BaseField, "fieldTypeName");
+__publicField(BaseField, "fieldTypeDescription");
+const description$1 = "_description_17zed_1";
+const styles$3 = {
+  description: description$1
+};
+const InputWithLabel = (props) => {
+  const { label, children, severity, inputId, labelId, flexProps } = props;
+  return /* @__PURE__ */ jsx(Flex, { direction: "column", gap: "1", asChild: true, ...flexProps, children: /* @__PURE__ */ jsxs("label", { htmlFor: inputId, children: [
+    /* @__PURE__ */ jsx(Text, { severity, id: labelId, children: label }),
+    children
   ] }) });
-}, W = (o) => {
-  const { helpText: i, children: e, severity: t } = o;
-  return /* @__PURE__ */ b(y, { direction: "column", gap: "1", children: [
-    e,
-    /* @__PURE__ */ r(y, { direction: "column", children: /* @__PURE__ */ r(V, { size: "1", severity: t, className: Re.description, children: i }) })
+};
+const InputWithLabelAndHelpText = (props) => {
+  const { helpText, children, severity } = props;
+  return /* @__PURE__ */ jsxs(Flex, { direction: "column", gap: "1", children: [
+    children,
+    /* @__PURE__ */ jsx(Flex, { direction: "column", children: /* @__PURE__ */ jsx(Text, { size: "1", severity, className: styles$3.description, children: helpText }) })
   ] });
-}, j = (o) => {
-  const { id: i, field: e, formId: t, ...n } = o, [s, a, c] = Je(e.getId()), { touched: l } = a, d = a.error ?? e.description, u = a.error ? "danger" : void 0, f = i ?? `${t}-${e.getId()}-input`, p = `${f}-label`, h = e.required ? `${e.label} *` : e.label, g = x(() => ({
-    ...s,
-    onChange: (I) => {
-      const w = e.getValueFromChangeEvent(I);
-      c.setValue(w, !1).then(), (l || !e.onlyValidateAfterTouched) && c.setError(e.getError(w));
-    },
-    onBlur: (I) => {
-      c.setTouched(!0, !1).then(), c.setError(e.getError(e.getValueFromChangeEvent(I)));
-    }
-  }), [e, s, c, l]);
+};
+const useFormikInput = (props) => {
+  const { id, field, formId: formId2, ...rest } = props;
+  const [fieldProps, meta, helpers] = useField(field.getId());
+  const { touched } = meta;
+  const helpText = meta.error ?? field.description;
+  const severity = meta.error ? "danger" : void 0;
+  const inputId = id ?? `${formId2}-${field.getId()}-input`;
+  const labelId = `${inputId}-label`;
+  const label = field.required ? `${field.label} *` : field.label;
+  const fieldPropsWithValidation = useMemo(() => {
+    const handleChange = (e) => {
+      const value = field.getValueFromChangeEvent(e);
+      helpers.setValue(value, false).then();
+      if (touched || !field.onlyValidateAfterTouched) {
+        helpers.setError(field.getError(value));
+      }
+    };
+    const handleBlur = (e) => {
+      helpers.setTouched(true, false).then();
+      helpers.setError(field.getError(field.getValueFromChangeEvent(e)));
+    };
+    return {
+      ...fieldProps,
+      onChange: handleChange,
+      onBlur: handleBlur
+    };
+  }, [field, fieldProps, helpers, touched]);
   return [
     {
-      helpText: d,
-      severity: u,
-      inputId: f,
-      labelId: p,
-      label: h,
-      fieldProps: g,
-      helpers: c,
-      field: e
+      helpText,
+      severity,
+      inputId,
+      labelId,
+      label,
+      fieldProps: fieldPropsWithValidation,
+      helpers,
+      field
     },
-    { ...n, "aria-labelledby": p }
+    { ...rest, "aria-labelledby": labelId }
   ];
-}, $i = [!0, "true"], Di = S(function(i) {
-  const [{ inputId: e, labelId: t, severity: n, helpText: s, label: a, fieldProps: c }, l] = j(i), d = ue(n), u = $i.includes(c.value);
-  return /* @__PURE__ */ r(W, { helpText: s, severity: n, children: /* @__PURE__ */ r(
-    q,
+};
+const truthyValues = [true, "true"];
+const BooleanInput = memo(function BooleanInput2(props) {
+  const [{ inputId, labelId, severity, helpText, label, fieldProps }, rest] = useFormikInput(props);
+  const color = useSeverityColor(severity);
+  const value = truthyValues.includes(fieldProps.value);
+  return /* @__PURE__ */ jsx(InputWithLabelAndHelpText, { helpText, severity, children: /* @__PURE__ */ jsx(
+    InputWithLabel,
     {
-      severity: n,
-      inputId: e,
-      labelId: t,
-      label: a,
+      severity,
+      inputId,
+      labelId,
+      label,
       flexProps: { direction: "row-reverse", justify: "end", align: "center", gap: "2" },
-      children: /* @__PURE__ */ r(
-        Ut,
+      children: /* @__PURE__ */ jsx(
+        Checkbox,
         {
-          ...l,
-          ...c,
-          id: e,
-          color: d,
-          value: u.toString(),
-          checked: u,
-          onCheckedChange: c.onChange,
+          ...rest,
+          ...fieldProps,
+          id: inputId,
+          color,
+          value: value.toString(),
+          checked: value,
+          onCheckedChange: fieldProps.onChange,
           onChange: void 0,
           onBlur: void 0
         }
       )
     }
   ) });
-}), J = class J extends O {
-  constructor(e) {
-    super({ ...e, type: "boolean" });
-    m(this, "onlyValidateAfterTouched", !1);
+});
+const _BooleanField = class _BooleanField extends BaseField {
+  constructor(options) {
+    super({ ...options, type: "boolean" });
+    __publicField(this, "onlyValidateAfterTouched", false);
   }
   // if a BooleanField is required, `false` is considered blank
-  isBlank(e) {
-    return this.required && !e;
+  isBlank(value) {
+    return this.required && !value;
   }
-  getValueFromChangeEvent(e) {
-    return typeof e == "boolean" ? e : e.target.checked;
+  getValueFromChangeEvent(event) {
+    if (typeof event === "boolean")
+      return event;
+    return event.target.checked;
   }
   serialize() {
     return super._serialize();
   }
-  static deserialize(e) {
-    if (e.type !== "boolean")
+  static deserialize(data) {
+    if (data.type !== "boolean")
       throw new Error("Type mismatch.");
-    return new J(e);
+    return new _BooleanField(data);
   }
-  getInput(e) {
-    return /* @__PURE__ */ r(Di, { ...e, field: this });
+  getInput(props) {
+    return /* @__PURE__ */ jsx(BooleanInput, { ...props, field: this });
   }
 };
-m(J, "fieldTypeName", "Checkbox"), m(J, "fieldTypeDescription", "Perfect for both optional and required yes/no questions."), m(J, "Icon", Gt);
-let de = J;
-const _i = S(function(i) {
-  const [{ inputId: e, labelId: t, severity: n, helpText: s, label: a, fieldProps: c, field: l }, d] = j(i), u = ue(n);
-  return /* @__PURE__ */ r(W, { helpText: s, severity: n, children: /* @__PURE__ */ r(q, { severity: n, inputId: e, labelId: t, label: a, children: /* @__PURE__ */ r(
-    ae.Input,
+__publicField(_BooleanField, "fieldTypeName", "Checkbox");
+__publicField(_BooleanField, "fieldTypeDescription", "Perfect for both optional and required yes/no questions.");
+__publicField(_BooleanField, "Icon", CheckCircledIcon);
+let BooleanField = _BooleanField;
+const NumberInput$1 = memo(function NumberInput2(props) {
+  const [{ inputId, labelId, severity, helpText, label, fieldProps, field }, rest] = useFormikInput(props);
+  const color = useSeverityColor(severity);
+  return /* @__PURE__ */ jsx(InputWithLabelAndHelpText, { helpText, severity, children: /* @__PURE__ */ jsx(InputWithLabel, { severity, inputId, labelId, label, children: /* @__PURE__ */ jsx(
+    TextField$1.Input,
     {
-      ...d,
-      ...c,
+      ...rest,
+      ...fieldProps,
       type: "number",
-      id: e,
-      min: l.minimum,
-      max: l.maximum,
-      step: l.integers ? 1 : 0.1,
-      color: u
+      id: inputId,
+      min: field.minimum,
+      max: field.maximum,
+      step: field.integers ? 1 : 0.1,
+      color
     }
   ) }) });
-}), B = class B extends O {
-  constructor(e) {
+});
+const _NumberField = class _NumberField extends BaseField {
+  constructor(options) {
     const {
-      minimum: t = Number.MIN_SAFE_INTEGER,
-      maximum: n = Number.MAX_SAFE_INTEGER,
-      integers: s = !1,
-      ...a
-    } = e;
-    super({ ...a, type: "number" });
-    m(this, "minimum");
-    m(this, "maximum");
-    m(this, "integers");
-    this.minimum = t, this.maximum = n, this.integers = s;
-  }
-  getValueFromChangeEvent(e) {
-    const t = Number.parseFloat(e.target.value);
-    return Number.isNaN(t) ? "" : t;
+      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 B({
+      new _NumberField({
         label: "Minimum",
         description: "Minimum value",
-        integers: !0,
-        required: !1,
+        integers: true,
+        required: false,
         identifier: "minimum",
         formValidators: [this._validateMin]
       }),
-      new B({
+      new _NumberField({
         label: "Maximum",
         description: "Maximum value",
-        integers: !0,
-        required: !1,
+        integers: true,
+        required: false,
         identifier: "maximum",
         formValidators: [this._validateMax]
       }),
-      new de({
+      new BooleanField({
         label: "Integers",
         description: "Whole numbers only",
-        required: !1,
+        required: false,
         identifier: "integers"
       })
     ];
   }
   getFieldValidators() {
-    const e = super.getFieldValidators(), t = this.minimum, n = this.maximum;
-    return typeof t == "number" && e.push((s) => {
-      if (typeof s == "number" && s < t)
-        return `Must be at least ${this.minimum}.`;
-    }), typeof n == "number" && e.push((s) => {
-      if (typeof s == "number" && s > n)
-        return `Must be at most ${this.maximum}.`;
-    }), this.integers && e.push((s) => {
-      if (typeof s == "number" && !Number.isInteger(s))
-        return "Must be a whole number.";
-    }), e;
+    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 {
@@ -260,90 +321,121 @@ const _i = S(function(i) {
       integers: this.integers
     };
   }
-  static deserialize(e) {
-    if (e.type !== "number")
+  static deserialize(data) {
+    if (data.type !== "number")
       throw new Error("Type mismatch.");
-    return new B(e);
+    return new _NumberField(data);
   }
-  getInput(e) {
-    return /* @__PURE__ */ r(_i, { field: this, ...e });
+  getInput(props) {
+    return /* @__PURE__ */ jsx(NumberInput$1, { field: this, ...props });
   }
 };
-m(B, "fieldTypeName", "Number"), m(B, "fieldTypeDescription", "Allows specifying a number within a given range."), m(B, "Icon", Kt), m(B, "_validateMin", (e, t) => typeof t.maximum == "number" && typeof e == "number" && t.maximum < e ? "Minimum cannot be greater than minimum." : null), m(B, "_validateMax", (e, t) => typeof t.minimum == "number" && typeof e == "number" && t.minimum > e ? "Maximum cannot be less than minimum." : null);
-let Q = B;
-const Mi = S(function(i) {
-  const [{ inputId: e, labelId: t, severity: n, helpText: s, label: a, fieldProps: c }, l] = j(i), d = ue(n), u = c.value ? c.value.split("T")[0] : "";
-  return /* @__PURE__ */ r(W, { helpText: s, severity: n, children: /* @__PURE__ */ r(q, { severity: n, inputId: e, labelId: t, label: a, children: /* @__PURE__ */ r(ae.Input, { ...l, ...c, type: "date", id: e, color: d, value: u }) }) });
-}), ee = class ee extends O {
-  constructor(e) {
-    super({ ...e, type: "date" });
-    m(this, "onlyValidateAfterTouched", !1);
+__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 = memo(function DateInput2(props) {
+  const [{ inputId, labelId, severity, helpText, label, fieldProps }, rest] = useFormikInput(props);
+  const color = useSeverityColor(severity);
+  const value = fieldProps.value ? fieldProps.value.split("T")[0] : "";
+  return /* @__PURE__ */ jsx(InputWithLabelAndHelpText, { helpText, severity, children: /* @__PURE__ */ jsx(InputWithLabel, { severity, inputId, labelId, label, children: /* @__PURE__ */ 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(e) {
-    return new Date(e.target.value).toISOString();
+  getValueFromChangeEvent(event) {
+    return new Date(event.target.value).toISOString();
   }
-  static deserialize(e) {
-    if (e.type !== "date")
+  static deserialize(data) {
+    if (data.type !== "date")
       throw new Error("Type mismatch.");
-    return new ee(e);
+    return new _DateField(data);
   }
-  getInput(e) {
-    return /* @__PURE__ */ r(Mi, { field: this, ...e });
+  getInput(props) {
+    return /* @__PURE__ */ jsx(DateInput, { field: this, ...props });
   }
 };
-m(ee, "fieldTypeName", "Date"), m(ee, "fieldTypeDescription", "Allows specifying a date."), m(ee, "Icon", Yt);
-let Ue = ee;
-class ze extends O {
-  constructor(e) {
-    const { minLength: t, maxLength: n = 5e3, ...s } = e;
-    super(s);
-    m(this, "minLength");
-    m(this, "maxLength");
-    this.minLength = t ? Math.max(t, 0) : void 0, this.maxLength = n ? Math.max(n, 0) : 5e3;
+__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;
+    super(base);
+    __publicField(this, "minLength");
+    __publicField(this, "maxLength");
+    this.minLength = minLength ? Math.max(minLength, 0) : void 0;
+    this.maxLength = maxLength ? Math.max(maxLength, 0) : 5e3;
   }
   static getFieldCreationSchema() {
     return [
       // min, max
-      new Q({
+      new NumberField({
         label: "Minimum length",
         description: "Minimum number of characters",
-        required: !1,
+        required: false,
         identifier: "minimum_length",
         minimum: 0,
         maximum: 100,
         formValidators: [this._validateMin],
-        integers: !0
+        integers: true
       }),
-      new Q({
+      new NumberField({
         label: "Maximum length",
         description: "Maximum number of characters",
-        required: !1,
+        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: !0
+        integers: true
       })
     ];
   }
   getFieldValidators() {
-    const e = super.getFieldValidators();
-    return this.minLength && e.push((t) => {
-      if (this.minLength && (!t || t.length < this.minLength))
-        return !this.required && !t ? null : `Minimum ${this.minLength} character(s).`;
-    }), this.maxLength && e.push((t) => {
-      if (typeof t == "string" && this.maxLength && t.length > this.maxLength)
-        return `Maximum ${this.maxLength} character(s).`;
-    }), e;
+    const validators = super.getFieldValidators();
+    if (this.minLength) {
+      validators.push((value) => {
+        if (this.minLength && (!value || value.length < this.minLength)) {
+          if (!this.required && !value)
+            return null;
+          return `Minimum ${this.minLength} character(s).`;
+        }
+      });
+    }
+    if (this.maxLength) {
+      validators.push((value) => {
+        if (typeof value === "string" && this.maxLength && value.length > this.maxLength) {
+          return `Maximum ${this.maxLength} character(s).`;
+        }
+      });
+    }
+    return validators;
   }
   _serialize() {
-    if (!this.identifier)
+    if (!this.identifier) {
       throw new Error("Field identifier must be set before serializing.");
+    }
     return {
       ...super._serialize(),
       minimum_length: this.minLength,
@@ -355,301 +447,405 @@ class ze extends O {
  * This function 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".
  */
-m(ze, "_validateMin", (e, t) => typeof t.maximum_length == "number" && typeof e == "number" && t.maximum_length < e ? "Minimum cannot be greater than maximum." : null), /**
+__publicField(StringOrTextField, "_validateMin", (value, allValues) => {
+  if (typeof allValues.maximum_length === "number" && typeof value === "number" && allValues.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
  * equal to the value given for "minimum length".
  */
-m(ze, "_validateMax", (e, t) => {
-  if (typeof e != "number")
+__publicField(StringOrTextField, "_validateMax", (value, allValues) => {
+  if (typeof value !== "number")
+    return null;
+  const { minimum_length: minimumLength } = allValues;
+  if (typeof minimumLength !== "number") {
     return null;
-  const { minimum_length: n } = t;
-  return typeof n != "number" ? null : n > e ? "Maximum cannot be less than minimum." : null;
+  }
+  if (minimumLength > value) {
+    return "Maximum cannot be less than minimum.";
+  }
+  return null;
+});
+const StringInput = memo(function StringInput2(props) {
+  const [{ inputId, labelId, severity, helpText, label, fieldProps, field }, rest] = useFormikInput(props);
+  const color = useSeverityColor(severity);
+  return /* @__PURE__ */ jsx(InputWithLabelAndHelpText, { helpText, severity, children: /* @__PURE__ */ jsx(InputWithLabel, { severity, inputId, labelId, label, children: /* @__PURE__ */ jsx(TextField$1.Input, { ...rest, ...fieldProps, type: field.inputType, id: inputId, color }) }) });
 });
-const Oi = S(function(i) {
-  const [{ inputId: e, labelId: t, severity: n, helpText: s, label: a, fieldProps: c, field: l }, d] = j(i), u = ue(n);
-  return /* @__PURE__ */ r(W, { helpText: s, severity: n, children: /* @__PURE__ */ r(q, { severity: n, inputId: e, labelId: t, label: a, children: /* @__PURE__ */ r(ae.Input, { ...d, ...c, type: l.inputType, id: e, color: u }) }) });
-}), te = class te extends ze {
-  constructor(e) {
-    const { inputType: t = "text", ...n } = e, s = e.maxLength ? Math.min(500, e.maxLength) : 500, a = e.minLength ? Math.min(e.minLength, s) : void 0;
-    super({ ...n, maxLength: s, minLength: a, type: "string" });
-    m(this, "inputType");
-    this.inputType = t;
+const _StringField = class _StringField extends StringOrTextField {
+  constructor(options) {
+    const { inputType = "text", ...rest } = options;
+    const maxLength = options.maxLength ? Math.min(500, options.maxLength) : 500;
+    const minLength = options.minLength ? Math.min(options.minLength, maxLength) : void 0;
+    super({ ...rest, maxLength, minLength, type: "string" });
+    __publicField(this, "inputType");
+    this.inputType = inputType;
   }
   serialize() {
     return { ...super._serialize(), input_type: this.inputType };
   }
-  static deserialize(e) {
-    if (e.type !== "string")
+  static deserialize(data) {
+    if (data.type !== "string")
       throw new Error("Type mismatch.");
-    const { maximum_length: t, minimum_length: n, input_type: s, ...a } = e;
-    return new te({ ...a, maxLength: t, minLength: n, inputType: s });
+    const { maximum_length, minimum_length, input_type, ...rest } = data;
+    return new _StringField({ ...rest, maxLength: maximum_length, minLength: minimum_length, inputType: input_type });
   }
-  getInput(e) {
-    return /* @__PURE__ */ r(Oi, { field: this, ...e });
+  getInput(props) {
+    return /* @__PURE__ */ jsx(StringInput, { field: this, ...props });
   }
 };
-m(te, "fieldTypeName", "Short Text"), m(te, "fieldTypeDescription", "Short text fields can hold up to 500 characters on a single line."), m(te, "Icon", Qt);
-let be = te;
-const Ri = S(function(i) {
-  const [{ inputId: e, labelId: t, severity: n, helpText: s, label: a, fieldProps: c }, l] = j(i);
-  return /* @__PURE__ */ r(W, { helpText: s, severity: n, children: /* @__PURE__ */ r(q, { severity: n, inputId: e, labelId: t, label: a, children: /* @__PURE__ */ r(Xt, { ...l, ...c, resize: "vertical", id: e, severity: n }) }) });
-}), ie = class ie extends ze {
-  constructor(i) {
-    const e = i.maxLength ? Math.min(5e3, i.maxLength) : 5e3, t = i.minLength ? Math.min(i.minLength, e) : void 0;
-    super({ ...i, maxLength: e, minLength: t, type: "text" });
+__publicField(_StringField, "fieldTypeName", "Short Text");
+__publicField(_StringField, "fieldTypeDescription", "Short text fields can hold up to 500 characters on a single line.");
+__publicField(_StringField, "Icon", InputIcon);
+let StringField = _StringField;
+const TextInput = memo(function TextInput2(props) {
+  const [{ inputId, labelId, severity, helpText, label, fieldProps }, rest] = useFormikInput(props);
+  return /* @__PURE__ */ jsx(InputWithLabelAndHelpText, { helpText, severity, children: /* @__PURE__ */ jsx(InputWithLabel, { severity, inputId, labelId, label, children: /* @__PURE__ */ jsx(TextArea, { ...rest, ...fieldProps, resize: "vertical", id: inputId, severity }) }) });
+});
+const _TextField = class _TextField extends StringOrTextField {
+  constructor(options) {
+    const maxLength = options.maxLength ? Math.min(5e3, options.maxLength) : 5e3;
+    const minLength = options.minLength ? Math.min(options.minLength, maxLength) : void 0;
+    super({ ...options, maxLength, minLength, type: "text" });
   }
   serialize() {
     return super._serialize();
   }
-  static deserialize(i) {
-    if (i.type !== "text")
+  static deserialize(data) {
+    if (data.type !== "text")
       throw new Error("Type mismatch.");
-    const { maximum_length: e, minimum_length: t, ...n } = i;
-    return new ie({ ...n, maxLength: e, minLength: t });
+    const { maximum_length, minimum_length, ...rest } = data;
+    return new _TextField({ ...rest, maxLength: maximum_length, minLength: minimum_length });
   }
-  getInput(i) {
-    return /* @__PURE__ */ r(Ri, { field: this, ...i });
+  getInput(props) {
+    return /* @__PURE__ */ jsx(TextInput, { field: this, ...props });
   }
 };
-m(ie, "fieldTypeName", "Paragraph"), m(ie, "fieldTypeDescription", "Paragraph fields can hold up to 5000 characters and can have multiple lines."), m(ie, "Icon", Zt);
-let ye = ie;
-const Ni = S(function(i) {
-  const [{ inputId: e, labelId: t, severity: n, helpText: s, label: a, fieldProps: c, field: l }, d] = j(i), { onChange: u, onBlur: f } = c, p = x(
-    () => l.options.map((g) => ({ value: g.value, itemContent: g.label })),
-    [l.options]
-  ), h = T(
-    (g) => {
-      u(g), f(g);
+__publicField(_TextField, "fieldTypeName", "Paragraph");
+__publicField(_TextField, "fieldTypeDescription", "Paragraph fields can hold up to 5000 characters and can have multiple lines.");
+__publicField(_TextField, "Icon", RowsIcon);
+let TextField = _TextField;
+const SelectInput = memo(function SelectInput2(props) {
+  const [{ inputId, labelId, severity, helpText, label, fieldProps, field }, rest] = useFormikInput(props);
+  const { onChange, onBlur } = fieldProps;
+  const options = useMemo(
+    () => field.options.map((option) => ({ value: option.value, itemContent: option.label })),
+    [field.options]
+  );
+  const handleChange = useCallback(
+    (value) => {
+      onChange(value);
+      onBlur(value);
     },
-    [u, f]
+    [onChange, onBlur]
   );
-  return /* @__PURE__ */ r(W, { helpText: s, severity: n, children: /* @__PURE__ */ r(q, { severity: n, inputId: e, labelId: t, label: a, children: /* @__PURE__ */ r(
-    vt,
+  return /* @__PURE__ */ jsx(InputWithLabelAndHelpText, { helpText, severity, children: /* @__PURE__ */ jsx(InputWithLabel, { severity, inputId, labelId, label, children: /* @__PURE__ */ jsx(
+    Select,
     {
-      items: p,
-      ...c,
-      onValueChange: h,
+      items: options,
+      ...fieldProps,
+      onValueChange: handleChange,
       placeholder: "Select one...",
-      id: e,
-      severity: n,
-      ...d
+      id: inputId,
+      severity,
+      ...rest
     }
   ) }) });
-}), Ee = (o = "", i = []) => ({
+});
+const emptySection = (id = "", fields = []) => ({
   type: "section",
-  fields: i,
-  identifier: o,
+  fields,
+  identifier: id,
   label: null,
   condition: null,
-  conditional: !1
-}), Bi = (o) => {
-  if (!o)
-    return;
-  const i = o.fields;
-  let e = [];
-  const t = [];
-  for (const n of i)
-    n.type === "section" ? (e.length > 0 && (t.push(Ee(`AUTO_section-${i.indexOf(n)}`, e)), e = []), t.push(n)) : e.push(n);
-  return e.length > 0 && t.push(Ee("AUTO_section-last", e)), { ...o, fields: t, description: o.description ?? "" };
+  conditional: false
+});
+const wrapRootFieldsWithFieldSection = (revision) => {
+  if (!revision)
+    return void 0;
+  const fields = revision.fields;
+  let pending = [];
+  const sections = [];
+  for (const field of fields) {
+    if (field.type === "section") {
+      if (pending.length > 0) {
+        sections.push(emptySection(`AUTO_section-${fields.indexOf(field)}`, pending));
+        pending = [];
+      }
+      sections.push(field);
+    } else {
+      pending.push(field);
+    }
+  }
+  if (pending.length > 0) {
+    sections.push(emptySection("AUTO_section-last", pending));
+  }
+  return { ...revision, fields: sections, description: revision.description ?? "" };
 };
-function Ge(o, i, e) {
-  const t = Array.from(o), [n] = t.splice(i, 1);
-  if (!n)
+function reorder(list, source, destination) {
+  const result = Array.from(list);
+  const [removed] = result.splice(source, 1);
+  if (!removed)
     throw new Error("Could not find field to reorder.");
-  return t.splice(e, 0, n), t;
+  result.splice(destination, 0, removed);
+  return result;
 }
-function qi(o, i, e) {
-  const t = Array.from(o);
-  return t[i] = e, t;
+function replace(list, index, value) {
+  const result = Array.from(list);
+  result[index] = value;
+  return result;
 }
-function Lt(o, i, e) {
-  const t = Array.from(o ?? []);
-  return t.splice(i, 0, e), t;
+function insert(list, index, value) {
+  const result = Array.from(list ?? []);
+  result.splice(index, 0, value);
+  return result;
 }
-function Le(o, i) {
-  const e = Array.from(o);
-  return e.splice(i, 1), e;
+function remove(list, index) {
+  const result = Array.from(list);
+  result.splice(index, 1);
+  return result;
 }
-const At = (o, i) => {
-  if (typeof o == "string" && o.length > 0)
-    return o;
-  const e = /* @__PURE__ */ new Date();
-  return `${Ci(i)}-${e.getTime()}`;
-}, Pt = (o, i) => {
-  if (!i)
+const makeIdentifier = (existing, label) => {
+  if (typeof existing === "string" && existing.length > 0)
+    return existing;
+  const now = /* @__PURE__ */ new Date();
+  return `${slugify(label)}-${now.getTime()}`;
+};
+const findFieldByIdentifier = (fields, identifier) => {
+  if (!identifier)
     return null;
-  for (const e of o)
-    if (e.type === "section") {
-      const t = Pt(e.fields, i);
-      if (t)
-        return t;
-    } else if (e.identifier === i)
-      return e;
+  for (const field of fields) {
+    if (field.type === "section") {
+      const result = findFieldByIdentifier(field.fields, identifier);
+      if (result)
+        return result;
+    } else if (field.identifier === identifier) {
+      return field;
+    }
+  }
   return null;
-}, Se = (o, i) => o.filter((e, t) => t < i).flatMap((e) => e.fields), kt = (o) => o.flatMap(
-  (i) => i.type === "section" ? [...i.fields.map((e) => e.label), i.label] : i.label
-).filter((i) => i !== null), Ke = (o, i) => {
-  let e = 1, t = `${o} (${e})`;
-  for (; i.includes(t); )
-    t = `${o} (${++e})`;
-  return t;
-}, Wi = S(function(i) {
-  const [{ inputId: e, labelId: t, severity: n, helpText: s, label: a, fieldProps: c }, l] = j(i), d = ue(n), u = x(() => Array.isArray(c.value) ? c.value : [], [c.value]), { onChange: f, onBlur: p } = c, h = `${e}-droppable`, { disabled: g } = l, [v, z] = Y(""), [I, w] = Y(""), k = I || s, A = I ? "red" : d, C = T(
-    (L) => {
-      f(L), p(L);
+};
+const makeConditionalSourceFields = (sections, index) => {
+  return sections.filter((_, i) => i < index).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);
+};
+const incrementFieldLabel = (label, takenLabels) => {
+  let count = 1;
+  let newLabel = `${label} (${count})`;
+  while (takenLabels.includes(newLabel)) {
+    newLabel = `${label} (${++count})`;
+  }
+  return newLabel;
+};
+const MultiStringInput = memo(function MultiStringInput2(props) {
+  const [{ inputId, labelId, severity, helpText, label, fieldProps }, rest] = useFormikInput(props);
+  const color = useSeverityColor(severity);
+  const value = useMemo(() => Array.isArray(fieldProps.value) ? fieldProps.value : [], [fieldProps.value]);
+  const { onChange, onBlur } = fieldProps;
+  const droppableId = `${inputId}-droppable`;
+  const { disabled } = rest;
+  const [intermediateValue, setIntermediateValue] = useState("");
+  const [internalError, setInternalError] = useState("");
+  const updatedHelpText = internalError || helpText;
+  const updatedColor = internalError ? "red" : color;
+  const setValueAndTouched = useCallback(
+    (newValue) => {
+      onChange(newValue);
+      onBlur(newValue);
     },
-    [f, p]
-  ), $ = T(
-    (L) => {
-      u.findIndex((N) => N.value === L.target.value.trim()) >= 0 ? w("All options must be unique") : L.target.value ? w("") : w("Option cannot be empty"), z(L.target.value);
+    [onChange, onBlur]
+  );
+  const handleChange = useCallback(
+    (e) => {
+      if (value.findIndex((option) => option.value === e.target.value.trim()) >= 0) {
+        setInternalError("All options must be unique");
+      } else if (!e.target.value) {
+        setInternalError("Option cannot be empty");
+      } else {
+        setInternalError("");
+      }
+      setIntermediateValue(e.target.value);
     },
-    [z, u]
-  ), R = T(() => {
-    if (I)
+    [setIntermediateValue, value]
+  );
+  const addOption = useCallback(() => {
+    if (internalError)
       return;
-    if (!v.trim())
-      return w("Option cannot be empty");
-    const L = v.trim();
-    C([...u, { value: L, label: L }]), z("");
-  }, [v, I, C, u]), U = T(
-    (L) => {
-      L.key === "Enter" && (L.preventDefault(), R());
+    if (!intermediateValue.trim()) {
+      return setInternalError("Option cannot be empty");
+    }
+    const trimmedValue = intermediateValue.trim();
+    setValueAndTouched([...value, { value: trimmedValue, label: trimmedValue }]);
+    setIntermediateValue("");
+  }, [intermediateValue, internalError, setValueAndTouched, value]);
+  const handleKeyDown = useCallback(
+    (e) => {
+      if (e.key === "Enter") {
+        e.preventDefault();
+        addOption();
+      }
     },
-    [R]
-  ), we = T(
-    (L) => {
-      C(Le(u, L));
+    [addOption]
+  );
+  const handleDeleteOption = useCallback(
+    (index) => {
+      setValueAndTouched(remove(value, index));
     },
-    [u, C]
-  ), xe = T(
-    (L) => {
-      if (!L.destination)
+    [value, setValueAndTouched]
+  );
+  const handleDragEnd = useCallback(
+    (result) => {
+      if (!result.destination)
         return;
-      const N = L.source.index, G = L.destination.index;
-      C(Ge(u, N, G));
+      const sourceIndex = result.source.index;
+      const destinationIndex = result.destination.index;
+      setValueAndTouched(reorder(value, sourceIndex, destinationIndex));
     },
-    [C, u]
+    [setValueAndTouched, value]
   );
-  return /* @__PURE__ */ r(It, { onDragEnd: xe, children: /* @__PURE__ */ b(y, { direction: "column", gap: "2", children: [
-    /* @__PURE__ */ r(W, { helpText: k, severity: n, children: /* @__PURE__ */ r(q, { severity: n, inputId: e, labelId: t, label: a, children: (!g || u.length === 0) && /* @__PURE__ */ b(y, { gap: "2", children: [
-      /* @__PURE__ */ r(ge, { grow: "1", children: /* @__PURE__ */ r(
-        ae.Input,
+  return /* @__PURE__ */ jsx(DragDropContext, { onDragEnd: handleDragEnd, children: /* @__PURE__ */ jsxs(Flex, { direction: "column", gap: "2", children: [
+    /* @__PURE__ */ jsx(InputWithLabelAndHelpText, { helpText: updatedHelpText, severity, children: /* @__PURE__ */ jsx(InputWithLabel, { severity, inputId, labelId, label, children: (!disabled || value.length === 0) && /* @__PURE__ */ jsxs(Flex, { gap: "2", children: [
+      /* @__PURE__ */ jsx(Box, { grow: "1", children: /* @__PURE__ */ jsx(
+        TextField$1.Input,
         {
           placeholder: "Press enter to add a new option",
-          ...l,
-          ...c,
-          value: v,
-          onChange: $,
-          onKeyDown: U,
-          id: e,
-          color: A,
+          ...rest,
+          ...fieldProps,
+          value: intermediateValue,
+          onChange: handleChange,
+          onKeyDown: handleKeyDown,
+          id: inputId,
+          color: updatedColor,
           onBlur: void 0
         }
       ) }),
-      /* @__PURE__ */ r(
-        K,
+      /* @__PURE__ */ jsx(
+        IconButton,
         {
           type: "button",
           "aria-label": "Add option",
-          disabled: !!I || g,
-          onClick: R,
-          children: /* @__PURE__ */ r(_e, {})
+          disabled: !!internalError || disabled,
+          onClick: addOption,
+          children: /* @__PURE__ */ jsx(PlusIcon, {})
         }
       )
     ] }) }) }),
-    /* @__PURE__ */ r(it, { droppableId: h, children: (L) => /* @__PURE__ */ b(y, { ...L.droppableProps, ref: L.innerRef, direction: "column", children: [
-      u.map((N, G) => /* @__PURE__ */ r(
-        nt,
+    /* @__PURE__ */ jsx(Droppable, { droppableId, children: (droppableProvided) => /* @__PURE__ */ jsxs(Flex, { ...droppableProvided.droppableProps, ref: droppableProvided.innerRef, direction: "column", children: [
+      value.map((option, index) => /* @__PURE__ */ jsx(
+        Draggable,
         {
-          draggableId: `${N.value}-draggable`,
-          index: G,
-          isDragDisabled: g,
-          children: ({ draggableProps: Ie, dragHandleProps: Ce, innerRef: F }) => /* @__PURE__ */ r(
-            y,
+          draggableId: `${option.value}-draggable`,
+          index,
+          isDragDisabled: disabled,
+          children: ({ draggableProps, dragHandleProps, innerRef }) => /* @__PURE__ */ jsx(
+            Flex,
             {
-              ...Ce,
-              ...Ie,
-              ref: F,
+              ...dragHandleProps,
+              ...draggableProps,
+              ref: innerRef,
               gap: "2",
               align: "center",
               justify: "between",
               mb: "1",
-              asChild: !0,
-              children: /* @__PURE__ */ b(He, { color: "gray", size: "2", children: [
-                /* @__PURE__ */ r("span", { children: N.label }),
-                /* @__PURE__ */ r(
-                  K,
+              asChild: true,
+              children: /* @__PURE__ */ jsxs(Badge, { color: "gray", size: "2", children: [
+                /* @__PURE__ */ jsx("span", { children: option.label }),
+                /* @__PURE__ */ jsx(
+                  IconButton,
                   {
                     size: "small",
                     variant: "ghost",
                     type: "button",
                     "aria-label": "Delete option",
                     severity: "info",
-                    disabled: g,
-                    onClick: () => we(G),
-                    children: /* @__PURE__ */ r(wt, {})
+                    disabled,
+                    onClick: () => handleDeleteOption(index),
+                    children: /* @__PURE__ */ jsx(Cross1Icon, {})
                   }
                 )
               ] })
             }
           )
         },
-        N.value
+        option.value
       )),
-      L.placeholder
+      droppableProvided.placeholder
     ] }) })
   ] }) });
-}), ne = class ne extends O {
-  constructor(e) {
-    const { minimum_length: t, maximum_length: n, ...s } = e;
-    super({ ...s, type: "multi-string" });
-    m(this, "minLength");
-    m(this, "maxLength");
-    m(this, "onlyValidateAfterTouched", !1);
-    this.minLength = t ?? 0, this.maxLength = n ?? 1 / 0;
-  }
-  getValueFromChangeEvent(e) {
-    if (Array.isArray(e))
-      return e;
+});
+const _MultiStringField = class _MultiStringField extends BaseField {
+  constructor(options) {
+    const { minimum_length, maximum_length, ...rest } = options;
+    super({ ...rest, type: "multi-string" });
+    __publicField(this, "minLength");
+    __publicField(this, "maxLength");
+    __publicField(this, "onlyValidateAfterTouched", false);
+    this.minLength = minimum_length ?? 0;
+    this.maxLength = maximum_length ?? Infinity;
+  }
+  getValueFromChangeEvent(event) {
+    if (Array.isArray(event))
+      return event;
     throw new Error("Expected an array.");
   }
-  getInput(e) {
-    return /* @__PURE__ */ r(Wi, { field: this, ...e });
+  getInput(props) {
+    return /* @__PURE__ */ jsx(MultiStringInput, { field: this, ...props });
   }
   serialize() {
     return { ...super._serialize(), minimum_length: this.minLength, maximum_length: this.maxLength };
   }
-  isBlank(e) {
-    return super.isBlank(e) || e.length === 0;
+  isBlank(value) {
+    return super.isBlank(value) || value.length === 0;
   }
   getFieldValidators() {
-    const e = super.getFieldValidators();
-    return e.push((t) => {
-      if (Array.isArray(t) && t.length < this.minLength)
+    const validators = super.getFieldValidators();
+    validators.push((value) => {
+      if (Array.isArray(value) && value.length < this.minLength) {
         return `Must have at least ${this.minLength} options.`;
-    }), e.push((t) => {
-      if (Array.isArray(t) && t.length > this.maxLength)
+      }
+    });
+    validators.push((value) => {
+      if (Array.isArray(value) && value.length > this.maxLength) {
         return `Must have at most ${this.maxLength} options.`;
-    }), e;
+      }
+    });
+    return validators;
   }
-  static deserialize(e) {
-    if (e.type !== "multi-string")
+  static deserialize(data) {
+    if (data.type !== "multi-string")
       throw new Error("Type mismatch.");
-    return new ne(e);
+    return new _MultiStringField(data);
   }
 };
-m(ne, "fieldTypeName", "Multi-string"), m(ne, "fieldTypeDescription", "Allows the user to provide multiple unique strings."), m(ne, "Icon", Jt);
-let Ae = ne;
-class Vt extends O {
-  constructor(e) {
-    super(e);
-    m(this, "options");
-    m(this, "onlyValidateAfterTouched", !1);
-    const t = /* @__PURE__ */ new Set();
-    this.options = e.options.map((n) => (typeof n == "string" && (n = { label: n, value: n }), t.add(n.label), n)), t.size !== e.options.length && console.error(
-      `${e.options.length - t.size} duplicate identifiers found in options. This may cause unexpected behavior. Options:`,
-      e.options
-    );
+__publicField(_MultiStringField, "fieldTypeName", "Multi-string");
+__publicField(_MultiStringField, "fieldTypeDescription", "Allows the user to provide multiple unique strings.");
+__publicField(_MultiStringField, "Icon", ListBulletIcon);
+let MultiStringField = _MultiStringField;
+class BaseSelectField extends BaseField {
+  constructor(options) {
+    super(options);
+    __publicField(this, "options");
+    __publicField(this, "onlyValidateAfterTouched", false);
+    const encounteredIds = /* @__PURE__ */ new Set();
+    this.options = options.options.map((option) => {
+      if (typeof option === "string") {
+        option = { label: option, value: option };
+      }
+      encounteredIds.add(option.label);
+      return option;
+    });
+    if (encounteredIds.size !== options.options.length) {
+      console.error(
+        `${options.options.length - encounteredIds.size} duplicate identifiers found in options. This may cause unexpected behavior. Options:`,
+        options.options
+      );
+    }
   }
   _serialize() {
     return {
@@ -659,10 +855,10 @@ class Vt extends O {
   }
   static getFieldCreationSchema() {
     return [
-      new Ae({
+      new MultiStringField({
         label: "Options",
         description: "List possible options for the user to select from.",
-        required: !0,
+        required: true,
         identifier: "options",
         minimum_length: 2,
         maximum_length: 20
@@ -670,193 +866,247 @@ class Vt extends O {
     ];
   }
 }
-const re = class re extends Vt {
-  constructor(i) {
-    super({ ...i, type: "select" });
+const _SelectField = class _SelectField extends BaseSelectField {
+  constructor(options) {
+    super({ ...options, type: "select" });
   }
-  getValueFromChangeEvent(i) {
-    return typeof i == "string" ? i : i.target.value;
+  getValueFromChangeEvent(event) {
+    if (typeof event === "string")
+      return event;
+    return event.target.value;
   }
   serialize() {
     return super._serialize();
   }
-  static deserialize(i) {
-    if (i.type !== "select")
+  static deserialize(data) {
+    if (data.type !== "select")
       throw new Error("Type mismatch.");
-    return new re(i);
+    return new _SelectField(data);
   }
-  getInput(i) {
-    return /* @__PURE__ */ r(Ni, { field: this, ...i });
+  getInput(props) {
+    return /* @__PURE__ */ jsx(SelectInput, { field: this, ...props });
   }
 };
-m(re, "fieldTypeName", "Dropdown"), m(re, "fieldTypeDescription", "Allows the user to select a single option from a list of options."), m(re, "Icon", ei);
-let Pe = re;
-const ji = (o) => o ? Array.isArray(o) ? o : [o] : [], Hi = S(function(i) {
-  const [{ inputId: e, labelId: t, severity: n, helpText: s, label: a, fieldProps: c, field: l }, d] = j(i), { onChange: u, onBlur: f } = c, p = x(() => ji(c.value), [c.value]), h = T(
-    (g) => {
-      u(g), f(g);
+__publicField(_SelectField, "fieldTypeName", "Dropdown");
+__publicField(_SelectField, "fieldTypeDescription", "Allows the user to select a single option from a list of options.");
+__publicField(_SelectField, "Icon", DropdownMenuIcon);
+let SelectField = _SelectField;
+const parseValueToArray = (value) => {
+  if (!value)
+    return [];
+  if (Array.isArray(value))
+    return value;
+  return [value];
+};
+const MultiSelectInput = memo(function MultiSelectInput2(props) {
+  const [{ inputId, labelId, severity, helpText, label, fieldProps, field }, rest] = useFormikInput(props);
+  const { onChange, onBlur } = fieldProps;
+  const value = useMemo(() => parseValueToArray(fieldProps.value), [fieldProps.value]);
+  const handleChange = useCallback(
+    (value2) => {
+      onChange(value2);
+      onBlur(value2);
     },
-    [u, f]
+    [onChange, onBlur]
   );
-  return /* @__PURE__ */ r(W, { helpText: s, severity: n, children: /* @__PURE__ */ r(q, { severity: n, inputId: e, labelId: t, label: a, children: /* @__PURE__ */ r(
-    ti,
+  return /* @__PURE__ */ jsx(InputWithLabelAndHelpText, { helpText, severity, children: /* @__PURE__ */ jsx(InputWithLabel, { severity, inputId, labelId, label, children: /* @__PURE__ */ jsx(
+    MultiSelect,
     {
-      value: p,
-      onValueChange: h,
-      options: l.options,
-      name: c.name,
+      value,
+      onValueChange: handleChange,
+      options: field.options,
+      name: fieldProps.name,
       placeholder: "Select one or more...",
-      id: e,
-      severity: n,
-      ...d
+      id: inputId,
+      severity,
+      ...rest
     }
   ) }) });
-}), oe = class oe extends Vt {
-  constructor(i) {
-    super({ ...i, type: "multi-select" });
+});
+const _MultiSelectField = class _MultiSelectField extends BaseSelectField {
+  constructor(options) {
+    super({ ...options, type: "multi-select" });
   }
-  getValueFromChangeEvent(i) {
-    if (Array.isArray(i))
-      return i;
+  getValueFromChangeEvent(event) {
+    if (Array.isArray(event))
+      return event;
     throw new Error("Expected an array.");
   }
-  isBlank(i) {
-    return super.isBlank(i) || i.length === 0;
+  isBlank(value) {
+    return super.isBlank(value) || value.length === 0;
   }
   serialize() {
     return super._serialize();
   }
-  static deserialize(i) {
-    if (i.type !== "multi-select")
+  static deserialize(data) {
+    if (data.type !== "multi-select")
       throw new Error("Type mismatch.");
-    return new oe(i);
+    return new _MultiSelectField(data);
   }
-  getInput(i) {
-    return /* @__PURE__ */ r(Hi, { field: this, ...i });
+  getInput(props) {
+    return /* @__PURE__ */ jsx(MultiSelectInput, { field: this, ...props });
   }
 };
-m(oe, "fieldTypeName", "Multi-select"), m(oe, "fieldTypeDescription", "Allows the user to select a multiple options from a list of options."), m(oe, "Icon", ii);
-let ke = oe;
-const Ui = S(function({ field: i, ...e }) {
-  const [{ value: t }] = Je(i.options.clonedFieldIdentifier), n = x(() => {
-    const s = i.options.getFieldToClone(t);
-    return s ? Ne(s) : null;
-  }, [i.options, t]);
-  return $e(n, e);
+__publicField(_MultiSelectField, "fieldTypeName", "Multi-select");
+__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 = memo(function FieldInputCloner2({ field, ...props }) {
+  const [{ value: identifier }] = useField(field.options.clonedFieldIdentifier);
+  const deserializedField = useMemo(() => {
+    const options = field.options.getFieldToClone(identifier);
+    if (!options)
+      return null;
+    return deserialize(options);
+  }, [field.options, identifier]);
+  return useFieldInput(deserializedField, props);
 });
-class Ve extends O {
-  constructor(e, t) {
-    super({ ...e, type: "custom" });
-    m(this, "Component");
+class CustomField extends BaseField {
+  constructor(options, Component) {
+    super({ ...options, type: "custom" });
+    __publicField(this, "Component");
     // identifier of the field whose value is the label of the field to re-render
-    m(this, "options");
-    this.options = e, this.Component = t;
+    __publicField(this, "options");
+    this.options = options;
+    this.Component = Component;
   }
   serialize() {
     throw new Error("Serializing only supported for public input types.");
   }
-  getInput(e) {
-    const t = this.Component;
-    return /* @__PURE__ */ r(t, { field: this, ...e });
+  getInput(props) {
+    const CustomInput = this.Component;
+    return /* @__PURE__ */ jsx(CustomInput, { field: this, ...props });
   }
 }
-m(Ve, "fieldTypeName", "Custom"), m(Ve, "fieldTypeDescription", "Allows re-rendering of field already in the form");
-class Gi extends Ve {
-  constructor(i) {
-    super(i, Ui);
+__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 Ki = S(function(i) {
-  const { field: e, ...t } = i, { label: n, description: s, fields: a, condition: c } = e, { values: l, setFieldValue: d } = me(), u = c != null && c.identifier ? ce(l, c.identifier) : void 0, f = x(() => _t(c, u), [c, u]);
-  ve(() => {
-    if (!f)
-      for (const h of a)
-        d(h.getId(), "").then();
-  }, [f, a, d]);
-  const p = Mt(a, t);
-  return f ? n ? /* @__PURE__ */ r(fe, { children: /* @__PURE__ */ b(y, { direction: "column", gap: "3", children: [
-    /* @__PURE__ */ b(y, { direction: "column", children: [
-      /* @__PURE__ */ r(Me, { as: "h3", size: "3", children: n }),
-      /* @__PURE__ */ r(V, { className: Re.description, children: s })
+const FieldSectionLayout = memo(function FieldSectionLayout2(props) {
+  const { field: section, ...rest } = props;
+  const { label, description: description2, fields, condition } = section;
+  const { values, setFieldValue } = useFormikContext();
+  const conditionValue = (condition == null ? void 0 : condition.identifier) ? get(values, condition.identifier) : void 0;
+  const conditionMet = useMemo(() => isConditionMet(condition, conditionValue), [condition, conditionValue]);
+  useEffect(() => {
+    if (!conditionMet) {
+      for (const childField of fields) {
+        setFieldValue(childField.getId(), "").then();
+      }
+    }
+  }, [conditionMet, fields, setFieldValue]);
+  const inputs = useFieldInputs(fields, rest);
+  if (!conditionMet) {
+    return null;
+  }
+  if (!label) {
+    return inputs;
+  }
+  return /* @__PURE__ */ jsx(Card, { children: /* @__PURE__ */ jsxs(Flex, { direction: "column", gap: "3", children: [
+    /* @__PURE__ */ jsxs(Flex, { direction: "column", children: [
+      /* @__PURE__ */ jsx(Heading, { as: "h3", size: "3", children: label }),
+      /* @__PURE__ */ jsx(Text, { className: styles$3.description, children: description2 })
     ] }),
-    p
-  ] }) }) : p : null;
-}), se = class se extends Et {
-  constructor(e) {
-    const { label: t = null, fields: n, condition: s = null, conditional: a, ...c } = e;
-    super({ ...c, type: "section" });
-    m(this, "label");
-    m(this, "fields");
-    m(this, "condition");
-    this.fields = n, this.condition = s, this.label = t, a === !1 && (this.condition = null);
-  }
-  static getFieldCreationSchema(e) {
-    return e.length === 0 ? [] : [
-      new de({
+    inputs
+  ] }) });
+});
+const _FieldSection = class _FieldSection extends BaseFormElement {
+  constructor(options) {
+    const { label = null, fields, condition = null, conditional, ...base } = options;
+    super({ ...base, type: "section" });
+    __publicField(this, "label");
+    __publicField(this, "fields");
+    __publicField(this, "condition");
+    this.fields = fields;
+    this.condition = condition;
+    this.label = label;
+    if (conditional === false) {
+      this.condition = null;
+    }
+  }
+  static getFieldCreationSchema(options) {
+    if (options.length === 0)
+      return [];
+    return [
+      new BooleanField({
         label: "Conditional",
         description: "Conditionally show or hide this section.",
         identifier: "conditional",
-        required: !1
+        required: false
       }),
       // Declare a section that will hold options for the condition (if any).
-      new se({
+      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: !0
+          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 Pe({
+          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: e.map((t) => !t.label || t.type === "upload" ? null : {
-              label: t.label,
-              value: t.identifier
-            }).filter((t) => !!t),
+            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: !0
+            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 Gi({
+          new FieldInputClonerField({
             label: "Value",
             identifier: "condition.value",
-            required: !0,
+            required: true,
             clonedFieldIdentifier: "condition.identifier",
-            getFieldToClone(t) {
-              if (!t)
+            getFieldToClone(identifier) {
+              if (!identifier) {
                 return null;
-              const n = e.find((s) => s.identifier === t);
-              return n ? {
-                ...n,
+              }
+              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: "condition.value",
                 description: "The value to compare against.",
-                required: n.type !== "boolean"
-              } : (console.error("Could not find field with identifier", t), null);
+                required: option.type !== "boolean"
+              };
             }
           })
         ]
       })
     ];
   }
-  static deserialize(e) {
-    var n;
-    if (e.type !== "section")
+  static deserialize(data) {
+    var _a;
+    if (data.type !== "section")
       throw new Error("Invalid type");
-    const t = ((n = e.fields) == null ? void 0 : n.map($t)) ?? [];
-    return new se({ ...e, fields: t });
+    const fields = ((_a = data.fields) == null ? void 0 : _a.map(deserializeField)) ?? [];
+    return new _FieldSection({ ...data, fields });
   }
   conditional() {
     return this.condition !== null;
@@ -867,144 +1117,199 @@ const Ki = S(function(i) {
       label: this.label,
       condition: this.condition,
       conditional: this.conditional(),
-      fields: this.fields.map((e) => e.serialize())
+      fields: this.fields.map((field) => field.serialize())
     };
   }
-  getErrors(e) {
-    const t = {};
-    for (const n of this.fields) {
-      const s = n.getId(), a = n.getError(ce(e, s), e);
-      a && ot(t, n.getId(), a);
+  getErrors(allValues) {
+    const errors = {};
+    for (const field of this.fields) {
+      const id = field.getId();
+      const error = field.getError(get(allValues, id), allValues);
+      if (error) {
+        set(errors, field.getId(), error);
+      }
     }
-    return t;
+    return errors;
   }
-  getInput(e) {
-    return /* @__PURE__ */ r(Ki, { field: this, ...e });
+  getInput(props) {
+    return /* @__PURE__ */ jsx(FieldSectionLayout, { field: this, ...props });
   }
 };
-m(se, "fieldTypeName", "Section"), m(se, "fieldTypeDescription", "Sections can be useful for grouping fields together. They can also be conditionally shown or hidden.");
-let X = se;
-const Yi = "_previewImage_1ig84_1", Qi = {
-  previewImage: Yi
-}, st = (o) => {
-  const i = ["byte", "kilobyte", "megabyte"];
-  let e = o, t = 0;
-  for (; e > 1024 && t < i.length - 1; )
-    e /= 1024, t++;
-  return new Intl.NumberFormat([], { maximumFractionDigits: 2, style: "unit", unit: i[t] }).format(e);
-}, Xi = S(function(i) {
-  var A;
-  const [{ inputId: e, labelId: t, severity: n, helpText: s, label: a, fieldProps: c, field: l }, d] = j(i), { onChange: u } = c, f = ue(n), p = xi(null), { value: h } = c, g = x(() => s || (l.maxFileSize ? `Maximum file size: ${st(l.maxFileSize)}` : null), [l.maxFileSize, s]), v = T(() => {
-    var C;
-    (C = p.current) == null || C.click();
-  }, []), z = T(
-    (C) => {
-      const $ = [...h];
-      $.splice(C, 1), u({ target: { files: $ } });
+__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 previewImage = "_previewImage_1ig84_1";
+const styles$2 = {
+  previewImage
+};
+const convertBytesToLargestUnit = (bytes) => {
+  const units = ["byte", "kilobyte", "megabyte"];
+  let sizeInUnit = bytes;
+  let unitIndex = 0;
+  while (sizeInUnit > 1024 && unitIndex < units.length - 1) {
+    sizeInUnit /= 1024;
+    unitIndex++;
+  }
+  const formatter = new Intl.NumberFormat([], { maximumFractionDigits: 2, style: "unit", unit: units[unitIndex] });
+  return formatter.format(sizeInUnit);
+};
+const NumberInput = memo(function NumberInput22(props) {
+  var _a;
+  const [{ inputId, labelId, severity, helpText, label, fieldProps, field }, rest] = useFormikInput(props);
+  const { onChange } = fieldProps;
+  const color = useSeverityColor(severity);
+  const input = useRef(null);
+  const { value } = fieldProps;
+  const updatedHelpText = useMemo(() => {
+    if (helpText)
+      return helpText;
+    if (field.maxFileSize) {
+      const size = convertBytesToLargestUnit(field.maxFileSize);
+      return `Maximum file size: ${size}`;
+    }
+    return null;
+  }, [field.maxFileSize, helpText]);
+  const handleClick = useCallback(() => {
+    var _a2;
+    (_a2 = input.current) == null ? void 0 : _a2.click();
+  }, []);
+  const handleRemove = useCallback(
+    (index) => {
+      const files = [...value];
+      files.splice(index, 1);
+      const event = { target: { files } };
+      onChange(event);
     },
-    [h, u]
-  ), I = h ? "Select new files" : "Select files", w = h ? "Select new file" : "Select a file", k = l.maxFiles > 1 ? I : w;
-  return /* @__PURE__ */ b(y, { direction: "column", gap: "2", children: [
-    /* @__PURE__ */ r(W, { helpText: g, severity: n, children: /* @__PURE__ */ b(q, { severity: n, inputId: e, labelId: t, label: a, children: [
-      /* @__PURE__ */ r(y, { direction: "row", gap: "2", children: /* @__PURE__ */ r(ge, { width: "max-content", asChild: !0, children: /* @__PURE__ */ b(H, { ...d, onClick: v, children: [
-        /* @__PURE__ */ r(xt, {}),
+    [value, onChange]
+  );
+  const multipleButtonText = value ? "Select new files" : "Select files";
+  const singleButtonText = value ? "Select new file" : "Select a file";
+  const buttonText = field.maxFiles > 1 ? multipleButtonText : singleButtonText;
+  return /* @__PURE__ */ jsxs(Flex, { direction: "column", gap: "2", children: [
+    /* @__PURE__ */ jsx(InputWithLabelAndHelpText, { helpText: updatedHelpText, severity, children: /* @__PURE__ */ jsxs(InputWithLabel, { severity, inputId, labelId, label, children: [
+      /* @__PURE__ */ jsx(Flex, { direction: "row", gap: "2", children: /* @__PURE__ */ jsx(Box, { width: "max-content", asChild: true, children: /* @__PURE__ */ jsxs(Button, { ...rest, onClick: handleClick, children: [
+        /* @__PURE__ */ jsx(UploadIcon, {}),
         " ",
-        k
+        buttonText
       ] }) }) }),
-      /* @__PURE__ */ r(
+      /* @__PURE__ */ jsx(
         "input",
         {
-          ...d,
+          ...rest,
           type: "file",
-          ref: p,
-          id: e,
-          accept: (A = l.extensions) == null ? void 0 : A.join(","),
-          multiple: l.maxFiles > 1,
-          color: f,
+          ref: input,
+          id: inputId,
+          accept: (_a = field.extensions) == null ? void 0 : _a.join(","),
+          multiple: field.maxFiles > 1,
+          color,
           style: { display: "none" },
-          ...c,
+          ...fieldProps,
           value: ""
         }
       )
     ] }) }),
-    Array.isArray(h) && h.length > 0 && /* @__PURE__ */ r(y, { direction: "column", gap: "2", children: h.map((C, $) => /* @__PURE__ */ r(
-      Zi,
+    Array.isArray(value) && value.length > 0 && /* @__PURE__ */ jsx(Flex, { direction: "column", gap: "2", children: value.map((file, index) => /* @__PURE__ */ jsx(
+      DisplayFile,
       {
-        field: l,
-        file: C,
-        onRemove: () => z($),
-        disabled: d.disabled
+        field,
+        file,
+        onRemove: () => handleRemove(index),
+        disabled: rest.disabled
       },
-      $
+      index
     )) })
   ] });
-}), Zi = S(function({ file: i, field: e, onRemove: t, disabled: n }) {
-  const [s, a] = Y(null), c = x(() => s && e.getError([s]), [e, s]), { url: l, name: d, size: u } = x(() => {
-    let f = null, p, h;
-    return s != null && s.type.startsWith("image/") && (f = URL.createObjectURL(s)), s ? (p = s.name, h = st(s.size)) : (p = "Downloading...", h = "..."), { url: f, name: p, size: h };
-  }, [s]);
-  return ve(() => {
-    i instanceof Promise ? i.then(a) : a(i);
-  }, [i]), /* @__PURE__ */ r(fe, { children: /* @__PURE__ */ b(y, { direction: { initial: "column", sm: "row" }, gap: "3", justify: "between", children: [
-    /* @__PURE__ */ b(y, { direction: "row", gap: "3", align: "center", grow: "1", shrink: "0", children: [
-      /* @__PURE__ */ r(
-        K,
+});
+const DisplayFile = memo(function DisplayFile2({ file, field, onRemove, disabled }) {
+  const [resolvedFile, setResolvedFile] = useState(null);
+  const error = useMemo(() => resolvedFile && field.getError([resolvedFile]), [field, resolvedFile]);
+  const { url, name, size } = useMemo(() => {
+    let url2 = null;
+    let name2;
+    let size2;
+    if (resolvedFile == null ? void 0 : resolvedFile.type.startsWith("image/")) {
+      url2 = URL.createObjectURL(resolvedFile);
+    }
+    if (resolvedFile) {
+      name2 = resolvedFile.name;
+      size2 = convertBytesToLargestUnit(resolvedFile.size);
+    } else {
+      name2 = "Downloading...";
+      size2 = "...";
+    }
+    return { url: url2, name: name2, size: size2 };
+  }, [resolvedFile]);
+  useEffect(() => {
+    if (file instanceof Promise) {
+      file.then(setResolvedFile);
+    } else {
+      setResolvedFile(file);
+    }
+  }, [file]);
+  return /* @__PURE__ */ jsx(Card, { children: /* @__PURE__ */ jsxs(Flex, { direction: { initial: "column", sm: "row" }, gap: "3", justify: "between", children: [
+    /* @__PURE__ */ jsxs(Flex, { direction: "row", gap: "3", align: "center", grow: "1", shrink: "0", children: [
+      /* @__PURE__ */ jsx(
+        IconButton,
         {
           severity: "info",
           variant: "outline",
-          "aria-label": `Remove ${d}`,
-          disabled: n,
-          onClick: t,
-          children: /* @__PURE__ */ r(wt, {})
+          "aria-label": `Remove ${name}`,
+          disabled,
+          onClick: onRemove,
+          children: /* @__PURE__ */ jsx(Cross1Icon, {})
         }
       ),
-      /* @__PURE__ */ b(y, { direction: "column", gap: "1", children: [
-        /* @__PURE__ */ r(V, { children: d }),
-        /* @__PURE__ */ r(V, { size: "1", children: u }),
-        c && /* @__PURE__ */ r(V, { size: "1", severity: "danger", children: c })
+      /* @__PURE__ */ jsxs(Flex, { direction: "column", gap: "1", children: [
+        /* @__PURE__ */ jsx(Text, { children: name }),
+        /* @__PURE__ */ jsx(Text, { size: "1", children: size }),
+        error && /* @__PURE__ */ jsx(Text, { size: "1", severity: "danger", children: error })
       ] })
     ] }),
-    l && /* @__PURE__ */ r("img", { className: Qi.previewImage, src: l, alt: d })
+    url && /* @__PURE__ */ jsx("img", { className: styles$2.previewImage, src: url, alt: name })
   ] }) });
-}), mt = 50 * 1024 * 1024, le = class le extends O {
-  constructor(e) {
-    const { extensions: t, maximum_files: n, maximum_size: s, ...a } = e;
-    super({ ...a, type: "upload" });
-    m(this, "extensions");
-    m(this, "maxFileSize");
-    m(this, "maxFiles");
-    m(this, "onlyValidateAfterTouched", !1);
-    this.maxFileSize = typeof s == "number" ? s : void 0, this.maxFiles = Math.max(typeof n == "number" ? n : 1, 1), this.extensions = t;
-  }
-  getValueFromChangeEvent(e) {
-    return Array.from(e.target.files || []);
-  }
-  isBlank(e) {
-    return super.isBlank(e) || e.length === 0;
+});
+const largestSupportedSize = 50 * 1024 * 1024;
+const _UploadField = class _UploadField extends BaseField {
+  constructor(options) {
+    const { extensions, maximum_files, maximum_size, ...base } = options;
+    super({ ...base, type: "upload" });
+    __publicField(this, "extensions");
+    __publicField(this, "maxFileSize");
+    __publicField(this, "maxFiles");
+    __publicField(this, "onlyValidateAfterTouched", false);
+    this.maxFileSize = typeof maximum_size === "number" ? maximum_size : void 0;
+    this.maxFiles = Math.max(typeof maximum_files === "number" ? maximum_files : 1, 1);
+    this.extensions = extensions;
+  }
+  getValueFromChangeEvent(event) {
+    return Array.from(event.target.files || []);
+  }
+  isBlank(value) {
+    return super.isBlank(value) || value.length === 0;
   }
   static getFieldCreationSchema() {
     return [
-      new Q({
+      new NumberField({
         label: "How many files can be uploaded?",
         description: "By default, only one file can be uploaded.",
-        required: !1,
+        required: false,
         minimum: 1,
         maximum: 10,
         identifier: "maximum_files"
       }),
-      new Q({
+      new NumberField({
         label: "What is the maximum size of each file?",
         description: "Maximum file size in bytes.",
-        required: !1,
+        required: false,
         identifier: "maximum_size",
         minimum: 1,
-        maximum: mt,
-        integers: !0
+        maximum: largestSupportedSize,
+        integers: true
       }),
-      new ke({
+      new MultiSelectField({
         label: "Accepted file types",
         description: "Types of allowed files to upload. If left blank, all files will be accepted.",
-        required: !1,
+        required: false,
         identifier: "extensions",
         options: [
           {
@@ -1032,14 +1337,20 @@ const Yi = "_previewImage_1ig84_1", Qi = {
     ];
   }
   getFieldValidators() {
-    const e = super.getFieldValidators(), t = this.maxFileSize ?? mt, n = this.maxFiles ?? 1;
-    return e.push((s) => {
-      if (s && s.some((a) => a.size > t))
-        return `Files must be at most ${st(t)}.`;
-    }), e.push((s) => {
-      if (s && s.length > n)
-        return `You can only upload ${n} files.`;
-    }), e;
+    const validators = super.getFieldValidators();
+    const maxFileSize = this.maxFileSize ?? largestSupportedSize;
+    const maxFiles = this.maxFiles ?? 1;
+    validators.push((value) => {
+      if (value && value.some((file) => file.size > maxFileSize)) {
+        return `Files must be at most ${convertBytesToLargestUnit(maxFileSize)}.`;
+      }
+    });
+    validators.push((value) => {
+      if (value && value.length > maxFiles) {
+        return `You can only upload ${maxFiles} files.`;
+      }
+    });
+    return validators;
   }
   serialize() {
     return {
@@ -1049,1044 +1360,1312 @@ const Yi = "_previewImage_1ig84_1", Qi = {
       maximum_files: this.maxFiles
     };
   }
-  static deserialize(e) {
-    if (e.type !== "upload")
+  static deserialize(data) {
+    if (data.type !== "upload")
       throw new Error("Type mismatch.");
-    return new le(e);
+    return new _UploadField(data);
   }
-  getInput(e) {
-    return /* @__PURE__ */ r(Xi, { field: this, ...e });
+  getInput(props) {
+    return /* @__PURE__ */ jsx(NumberInput, { field: this, ...props });
   }
 };
-m(le, "fieldTypeName", "Upload"), m(le, "fieldTypeDescription", "Allows a file to be uploaded."), m(le, "Icon", xt);
-let Ye = le;
-const lt = {
-  date: Ue,
-  number: Q,
-  boolean: de,
-  select: Pe,
-  string: be,
-  text: ye,
-  custom: Ve,
-  upload: Ye,
+__publicField(_UploadField, "fieldTypeName", "Upload");
+__publicField(_UploadField, "fieldTypeDescription", "Allows a file to be uploaded.");
+__publicField(_UploadField, "Icon", UploadIcon);
+let UploadField = _UploadField;
+const FieldTypeToClsMapping = {
+  date: DateField,
+  number: NumberField,
+  boolean: BooleanField,
+  select: SelectField,
+  string: StringField,
+  text: TextField,
+  custom: CustomField,
+  upload: UploadField,
   // TODO: Underscore
-  "multi-string": Ae,
-  "multi-select": ke
-}, $t = (o) => {
-  const i = o.type;
-  return lt[i].deserialize(o);
-}, Ne = (o) => o.type === "section" ? X.deserialize(o) : $t(o);
-function Dt(o, i = {}) {
-  const { readonly: e = !1 } = i;
+  "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);
+};
+function formRevisionToSchema(formRevision, meta = {}) {
+  const { readonly = false } = meta;
   return {
-    title: o.title,
-    description: o.description,
-    fields: o.fields.map((t) => Ne(t)),
-    meta: { readonly: e }
+    title: formRevision.title,
+    description: formRevision.description,
+    fields: formRevision.fields.map((serializedField) => deserialize(serializedField)),
+    meta: { readonly }
   };
 }
-function Qe(o) {
-  return !!(Array.isArray(o) && o.some((i) => i instanceof File || i instanceof Promise));
+function valueIsFile(v) {
+  if (Array.isArray(v) && v.some((v2) => v2 instanceof File || v2 instanceof Promise))
+    return true;
+  return false;
 }
-function _t(o, i) {
-  if (!o)
-    return !0;
-  if (Qe(i) || Qe(o.value))
+function isConditionMet(condition, value) {
+  if (!condition)
+    return true;
+  if (valueIsFile(value) || valueIsFile(condition.value))
     throw new Error("Conditions do not support file uploads");
-  const e = Array.isArray(i) ? i.map((n) => typeof n == "string" ? n : n.value) : i, t = Array.isArray(o.value) ? o.value.map((n) => typeof n == "string" ? n : n.value) : o.value;
-  if (Array.isArray(t) && Array.isArray(e)) {
-    for (const n of t)
-      if (!e.includes(n))
-        return !1;
-    return !0;
-  }
-  return t === i;
+  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 $e = (o, i) => x(() => !i || !o ? null : o.getInput(i), [o, i]), Mt = (o, i) => {
-  const e = x(() => o.map((t) => /* @__PURE__ */ r("div", { children: t.getInput(i) }, t.getId())), [o, i]);
-  return /* @__PURE__ */ r(y, { direction: "column", gap: "2", children: e });
-}, De = (o) => Object.keys(o).length > 0, Ot = async (o, i) => {
-  const e = {};
-  for (const t of o.fields)
-    if (t instanceof X) {
-      if (t.condition) {
-        const { identifier: n } = t.condition;
-        if (!_t(t.condition, ce(i, n)))
+const useFieldInput = (field, props) => {
+  return useMemo(() => {
+    if (!props || !field)
+      return null;
+    return field.getInput(props);
+  }, [field, props]);
+};
+const useFieldInputs = (fields, props) => {
+  const inputs = useMemo(() => {
+    return fields.map((field) => {
+      return /* @__PURE__ */ jsx("div", { children: field.getInput(props) }, field.getId());
+    });
+  }, [fields, props]);
+  return /* @__PURE__ */ jsx(Flex, { direction: "column", gap: "2", children: inputs });
+};
+const hasKeys = (errors) => {
+  return Object.keys(errors).length > 0;
+};
+const validateForm = async (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(e, t.getErrors(i));
+      Object.assign(errors, field.getErrors(form));
     } else {
-      if (!(t instanceof O))
+      if (!(field instanceof BaseField)) {
         throw new Error("Invalid field type");
-      const n = t.getId(), s = t.getError(ce(i, n), i);
-      s && ot(e, n, s);
+      }
+      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 (De(e))
-    return e;
-}, Ji = [null, void 0], at = (o, i) => o.reduce((e, t) => t instanceof X ? { ...e, ...at(t.fields, i) } : (Ji.includes(ce(e, t.getId())) && ot(e, t.getId(), ""), e), i), en = () => {
+    if (uncontrolledValues.includes(get(acc, field.getId()))) {
+      set(acc, field.getId(), "");
+    }
+    return acc;
+  }, values);
+};
+const defaultHandleSubmit = () => {
   throw new Error("onSubmit must be provided if form is not readonly.");
-}, ct = S(
-  pe((o, i) => {
+};
+const FormRenderer = memo(
+  forwardRef((props, ref) => {
     const {
-      schema: e,
-      values: t = {},
-      onSubmit: n = en,
-      submitText: s = "Submit",
-      cancelText: a,
-      onCancel: c,
-      onDirty: l,
+      schema,
+      values = {},
+      onSubmit = defaultHandleSubmit,
+      submitText = "Submit",
+      cancelText,
+      onCancel,
+      onDirty,
       // if the title isn't provided, hide it by default
-      hideTitle: d = !e.title,
-      hideDescription: u,
-      className: f
-    } = o, { readonly: p } = e.meta, h = x(() => crypto.randomUUID(), []), g = et({
-      initialValues: at(e.fields, t),
-      onSubmit: n,
-      validate: (k) => Ot(e, k),
+      hideTitle = !schema.title,
+      hideDescription,
+      className
+    } = props;
+    const { readonly } = schema.meta;
+    const formId2 = useMemo(() => crypto.randomUUID(), []);
+    const formik = useFormik({
+      initialValues: initialFormValues(schema.fields, values),
+      onSubmit,
+      validate: (form) => validateForm(schema, form),
       // only validate the entire form on submit
-      validateOnBlur: !1,
-      validateOnChange: !1
-    }), { dirty: v } = g, z = x(
-      () => typeof e.title == "string" ? /* @__PURE__ */ r(Me, { children: e.title }) : e.title,
-      [e.title]
-    ), I = x(
-      () => typeof e.description == "string" ? /* @__PURE__ */ r(V, { className: Re.description, children: e.description }) : e.description,
-      [e.description]
-    ), w = Mt(e.fields, { formId: h, disabled: p });
-    return ve(() => {
-      v && l && l();
-    }, [v, l]), /* @__PURE__ */ r(tt, { value: g, children: /* @__PURE__ */ r(y, { ref: i, direction: "column", gap: "2", className: f, asChild: !0, children: /* @__PURE__ */ b("form", { id: h, onSubmit: g.handleSubmit, children: [
-      !d && /* @__PURE__ */ r(fe, { children: /* @__PURE__ */ b(y, { direction: "column", gap: "1", children: [
-        z,
-        !u && I
+      validateOnBlur: false,
+      validateOnChange: false
+    });
+    const { dirty } = formik;
+    const Title = useMemo(
+      () => typeof schema.title === "string" ? /* @__PURE__ */ jsx(Heading, { children: schema.title }) : schema.title,
+      [schema.title]
+    );
+    const Description = useMemo(
+      () => typeof schema.description === "string" ? /* @__PURE__ */ jsx(Text, { className: styles$3.description, children: schema.description }) : schema.description,
+      [schema.description]
+    );
+    const inputs = useFieldInputs(schema.fields, { formId: formId2, disabled: readonly });
+    useEffect(() => {
+      if (dirty && onDirty)
+        onDirty();
+    }, [dirty, onDirty]);
+    return /* @__PURE__ */ jsx(FormikProvider, { value: formik, children: /* @__PURE__ */ jsx(Flex, { ref, direction: "column", gap: "2", className, asChild: true, children: /* @__PURE__ */ jsxs("form", { id: formId2, onSubmit: formik.handleSubmit, children: [
+      !hideTitle && /* @__PURE__ */ jsx(Card, { children: /* @__PURE__ */ jsxs(Flex, { direction: "column", gap: "1", children: [
+        Title,
+        !hideDescription && Description
       ] }) }),
-      w,
-      !p && /* @__PURE__ */ b(y, { justify: "end", gap: "2", children: [
-        a && /* @__PURE__ */ r(H, { type: "button", variant: "soft", onClick: c, children: a }),
-        /* @__PURE__ */ r(H, { type: "submit", disabled: !g.isValid, children: s })
+      inputs,
+      !readonly && /* @__PURE__ */ jsxs(Flex, { justify: "end", gap: "2", children: [
+        cancelText && /* @__PURE__ */ jsx(Button, { type: "button", variant: "soft", onClick: onCancel, children: cancelText }),
+        /* @__PURE__ */ jsx(Button, { type: "submit", disabled: !formik.isValid, children: submitText })
       ] })
     ] }) }) });
   })
-), Mn = S(
-  pe((o, i) => {
-    const { submission: e, showFormDescription: t = !1, showFormTitle: n = !0 } = o, s = M(Ct(e.form_revision)), { sdk: a } = Ft();
-    if (!s)
+);
+const FormSubmissionViewer = memo(
+  forwardRef((props, ref) => {
+    const { submission, showFormDescription = false, showFormTitle = true } = props;
+    const revision = useAppSelector(selectFormRevision(submission.form_revision));
+    const { sdk } = useSDK();
+    if (!revision) {
       throw new Error(
-        `Could not find revision ${e.form_revision} for submission ${e.offline_id}.`
+        `Could not find revision ${submission.form_revision} for submission ${submission.offline_id}.`
       );
-    const c = x(() => Dt(s, { readonly: !0 }), [s]), l = x(() => {
-      const d = Fi(e.offline_id)(a.store.getState()) ?? [], u = {};
-      for (const f of d) {
-        const p = a.files.fetchFileFromUrl(f.file, f.file_sha1, f.file_name).then((g) => {
-          if (!g.success)
-            throw new Error(`Failed to download attachment ${f.file_name}.`);
-          return g.body;
-        }), h = u[f.field_identifier];
-        h ? h.push(p) : u[f.field_identifier] = [p];
+    }
+    const schema = useMemo(() => {
+      return formRevisionToSchema(revision, { readonly: true });
+    }, [revision]);
+    const submissionValuesWithAttachments = useMemo(() => {
+      const attachments = selectSubmissionAttachments(submission.offline_id)(sdk.store.getState()) ?? [];
+      const downloadedAttachments = {};
+      for (const attachment of attachments) {
+        const promise = sdk.files.fetchFileFromUrl(attachment.file, attachment.file_sha1, attachment.file_name).then((response) => {
+          if (!response.success)
+            throw new Error(`Failed to download attachment ${attachment.file_name}.`);
+          return response.body;
+        });
+        const fieldAttachments = downloadedAttachments[attachment.field_identifier];
+        if (fieldAttachments) {
+          fieldAttachments.push(promise);
+        } else {
+          downloadedAttachments[attachment.field_identifier] = [promise];
+        }
       }
-      return { ...e.values, ...u };
-    }, [a.files, a.store, e.offline_id, e.values]);
-    return /* @__PURE__ */ r(
-      ct,
+      return { ...submission.values, ...downloadedAttachments };
+    }, [sdk.files, sdk.store, submission.offline_id, submission.values]);
+    return /* @__PURE__ */ jsx(
+      FormRenderer,
       {
-        ref: i,
-        schema: c,
-        values: l,
-        hideDescription: !t,
-        hideTitle: !n
+        ref,
+        schema,
+        values: submissionValuesWithAttachments,
+        hideDescription: !showFormDescription,
+        hideTitle: !showFormTitle
       }
     );
   })
-), tn = "_favoriteIcon_1bixi_1", nn = "_regularIcon_1bixi_9", pt = {
-  favoriteIcon: tn,
-  regularIcon: nn
-}, We = "organization:", je = "user:", On = S(
-  pe((o, i) => {
-    const { maxResults: e = 20, ...t } = o, [n, s] = Y(""), [a, c] = Y(""), { sdk: l } = Ft(), d = x(() => {
-      const w = { maxResults: e, searchTerm: n };
-      return a && (a.startsWith(We) ? w.owner_organization = parseInt(a.slice(We.length)) : a.startsWith(je) && (w.owner_user = parseInt(a.slice(je.length)))), w;
-    }, [n, e, a]), u = M(Ti(d)) ?? [], f = M(Si), p = T(
-      (w) => {
-        w.favorite ? l.userForms.unfavorite(w.offline_id).then() : l.userForms.favorite(w.offline_id).then();
+);
+const favoriteIcon = "_favoriteIcon_1bixi_1";
+const regularIcon = "_regularIcon_1bixi_9";
+const styles$1 = {
+  favoriteIcon,
+  regularIcon
+};
+const orgOptionPrefix = "organization:";
+const userOptionPrefix = "user:";
+const FormBrowser = memo(
+  forwardRef((props, ref) => {
+    const { maxResults = 20, ...entryProps } = props;
+    const [filter, setFilter] = useState("");
+    const [ownerFilter, setOwnerFilter] = useState("");
+    const { sdk } = useSDK();
+    const ownerFilterOptions = useMemo(() => {
+      const ret = { maxResults, searchTerm: filter };
+      if (ownerFilter) {
+        if (ownerFilter.startsWith(orgOptionPrefix)) {
+          ret.owner_organization = parseInt(ownerFilter.slice(orgOptionPrefix.length));
+        } else if (ownerFilter.startsWith(userOptionPrefix)) {
+          ret.owner_user = parseInt(ownerFilter.slice(userOptionPrefix.length));
+        }
+      }
+      return ret;
+    }, [filter, maxResults, ownerFilter]);
+    const userForms = useAppSelector(selectFilteredUserForms(ownerFilterOptions)) ?? [];
+    const userFormMapping = useAppSelector(selectUserFormMapping);
+    const handleToggleFavorite = useCallback(
+      (form) => {
+        if (form.favorite) {
+          sdk.userForms.unfavorite(form.offline_id).then();
+        } else {
+          sdk.userForms.favorite(form.offline_id).then();
+        }
       },
-      [l]
-    ), h = x(() => {
-      const w = l.store.getState(), k = {};
-      for (const A of Object.values(f)) {
-        const C = Tt(A.owner_organization || -1)(w);
-        C && (k[`${We}${C.id}`] = C.name);
-        const $ = rt(A.owner_user || -1)(w);
-        $ && (k[`${je}${$.id}`] = $.username);
+      [sdk]
+    );
+    const options = useMemo(() => {
+      const state = sdk.store.getState();
+      const accumulator = {};
+      for (const form of Object.values(userFormMapping)) {
+        const organization = selectOrganization(form.owner_organization || -1)(state);
+        if (organization) {
+          accumulator[`${orgOptionPrefix}${organization.id}`] = organization.name;
+        }
+        const user = selectUser(form.owner_user || -1)(state);
+        if (user) {
+          accumulator[`${userOptionPrefix}${user.id}`] = user.username;
+        }
       }
-      return Object.entries(k).map(([A, C]) => ({ itemContent: C, value: A }));
-    }, [f, l.store]), g = T((w) => {
-      s(w.currentTarget.value);
-    }, []), z = (M(zi) || 0) - u.length, I = u.length == e && z > 0 ? `Only the first ${e} results are shown (${z} hidden)` : z > 0 && `${z} hidden forms`;
-    return /* @__PURE__ */ b(y, { ref: i, direction: "column", gap: "2", children: [
-      /* @__PURE__ */ b(y, { gap: "2", grow: "1", children: [
-        /* @__PURE__ */ r(ge, { grow: "1", asChild: !0, children: /* @__PURE__ */ r(ae.Root, { size: "3", children: /* @__PURE__ */ r(ae.Input, { placeholder: "Filter", value: n, onChange: g }) }) }),
-        /* @__PURE__ */ r(
-          vt,
+      return Object.entries(accumulator).map(([value, label]) => ({ itemContent: label, value }));
+    }, [userFormMapping, sdk.store]);
+    const handleChange = useCallback((e) => {
+      setFilter(e.currentTarget.value);
+    }, []);
+    const numberOfForms = useAppSelector(selectNumberOfUserForms) || 0;
+    const numberOfHiddenForms = numberOfForms - userForms.length;
+    const overflowMessage = userForms.length == maxResults && numberOfHiddenForms > 0 ? `Only the first ${maxResults} results are shown (${numberOfHiddenForms} hidden)` : numberOfHiddenForms > 0 && `${numberOfHiddenForms} hidden forms`;
+    return /* @__PURE__ */ jsxs(Flex, { ref, direction: "column", gap: "2", children: [
+      /* @__PURE__ */ jsxs(Flex, { gap: "2", grow: "1", children: [
+        /* @__PURE__ */ jsx(Box, { grow: "1", asChild: true, children: /* @__PURE__ */ jsx(TextField$1.Root, { size: "3", children: /* @__PURE__ */ jsx(TextField$1.Input, { placeholder: "Filter", value: filter, onChange: handleChange }) }) }),
+        /* @__PURE__ */ jsx(
+          Select,
           {
-            items: h,
-            value: a,
-            onValueChange: c,
+            items: options,
+            value: ownerFilter,
+            onValueChange: setOwnerFilter,
             placeholder: "Owner",
             size: "large"
           }
         )
       ] }),
-      u.length > 0 && /* @__PURE__ */ r(Oe.Root, { children: u.map((w) => /* @__PURE__ */ r(
-        rn,
+      userForms.length > 0 && /* @__PURE__ */ jsx(ButtonList.Root, { children: userForms.map((form) => /* @__PURE__ */ jsx(
+        FormBrowserEntry,
         {
-          ...t,
-          form: w,
-          handleToggleFavorite: () => p(w)
+          ...entryProps,
+          form,
+          handleToggleFavorite: () => handleToggleFavorite(form)
         },
-        w.offline_id
+        form.offline_id
       )) }),
-      /* @__PURE__ */ r(ge, { px: "3", children: /* @__PURE__ */ r(V, { size: "2", severity: "info", children: I }) })
+      /* @__PURE__ */ jsx(Box, { px: "3", children: /* @__PURE__ */ jsx(Text, { size: "2", severity: "info", children: overflowMessage }) })
     ] });
   })
-), rn = (o) => {
-  var p;
-  const { form: i, onSelectForm: e, isFavoriteEditable: t, handleToggleFavorite: n } = o, s = (p = M(Tt(i.owner_organization || -1))) == null ? void 0 : p.name, a = M(rt(i.owner_user || -1)), c = M(St).id, l = !!a && a.id === c, d = s ?? (l ? "You" : a == null ? void 0 : a.username) ?? "Unknown", u = T(
-    (h) => {
-      h.stopPropagation(), n();
+);
+const FormBrowserEntry = (props) => {
+  var _a;
+  const { form, onSelectForm, isFavoriteEditable, handleToggleFavorite } = props;
+  const ownerOrganization = (_a = useAppSelector(selectOrganization(form.owner_organization || -1))) == null ? void 0 : _a.name;
+  const ownerUser = useAppSelector(selectUser(form.owner_user || -1));
+  const currentUserId = useAppSelector(selectCurrentUser).id;
+  const ownedByCurrentUser = !!ownerUser && ownerUser.id === currentUserId;
+  const owner = ownerOrganization ?? (ownedByCurrentUser ? "You" : ownerUser == null ? void 0 : ownerUser.username) ?? "Unknown";
+  const handleFavoriteClick = useCallback(
+    (e) => {
+      e.stopPropagation();
+      handleToggleFavorite();
     },
-    [n]
-  ), f = /* @__PURE__ */ r(Oe.Item, { onClick: () => e(i), asChild: !0, children: /* @__PURE__ */ b(y, { justify: "between", gap: "2", py: "2", px: "3", ...ni, children: [
-    /* @__PURE__ */ b(y, { grow: "1", align: "center", gap: "2", children: [
-      /* @__PURE__ */ r(
-        K,
+    [handleToggleFavorite]
+  );
+  const ret = /* @__PURE__ */ jsx(ButtonList.Item, { onClick: () => onSelectForm(form), asChild: true, children: /* @__PURE__ */ jsxs(Flex, { justify: "between", gap: "2", py: "2", px: "3", ...divButtonProps, children: [
+    /* @__PURE__ */ jsxs(Flex, { grow: "1", align: "center", gap: "2", children: [
+      /* @__PURE__ */ jsx(
+        IconButton,
         {
-          className: zt(i.favorite ? pt.favoriteIcon : pt.regularIcon),
+          className: classNames(form.favorite ? styles$1.favoriteIcon : styles$1.regularIcon),
           variant: "ghost",
-          onClick: u,
-          "aria-label": i.favorite ? "Favorite form" : "Standard form",
-          disabled: !t,
-          children: i.favorite ? /* @__PURE__ */ r(ri, {}) : /* @__PURE__ */ r(oi, {})
+          onClick: handleFavoriteClick,
+          "aria-label": form.favorite ? "Favorite form" : "Standard form",
+          disabled: !isFavoriteEditable,
+          children: form.favorite ? /* @__PURE__ */ jsx(StarFilledIcon, {}) : /* @__PURE__ */ jsx(StarIcon, {})
         }
       ),
-      /* @__PURE__ */ r(V, { noWrap: !0, children: i.latestRevision.title }),
-      i.latestRevision.description && /* @__PURE__ */ r(si, {})
+      /* @__PURE__ */ jsx(Text, { noWrap: true, children: form.latestRevision.title }),
+      form.latestRevision.description && /* @__PURE__ */ jsx(QuestionMarkCircledIcon, {})
     ] }),
-    d && /* @__PURE__ */ b(y, { align: "center", gap: "2", children: [
-      /* @__PURE__ */ r(li, {}),
+    owner && /* @__PURE__ */ jsxs(Flex, { align: "center", gap: "2", children: [
+      /* @__PURE__ */ jsx(PersonIcon, {}),
       " ",
-      d
+      owner
     ] })
   ] }) });
-  return i.latestRevision.description ? /* @__PURE__ */ r(ai, { content: i.latestRevision.description, children: f }, i.offline_id) : f;
-}, on = "_submissionsContainer_9iirt_1", sn = "_stopHorizontalOverflow_9iirt_6", Rt = {
-  submissionsContainer: on,
-  stopHorizontalOverflow: sn
-}, ln = S(function(i) {
-  var w;
-  const { submission: e, onSubmissionClick: t, compact: n, labelType: s, rowDecorator: a } = i, c = M(St), l = M(rt("created_by" in e ? e.created_by : c.id)), d = Xe(e), u = Ei(d) ? d.toLocaleTimeString([], {
+  if (form.latestRevision.description) {
+    return /* @__PURE__ */ jsx(Tooltip, { content: form.latestRevision.description, children: ret }, form.offline_id);
+  }
+  return ret;
+};
+const submissionsContainer = "_submissionsContainer_9iirt_1";
+const stopHorizontalOverflow = "_stopHorizontalOverflow_9iirt_6";
+const styles = {
+  submissionsContainer,
+  stopHorizontalOverflow
+};
+const FormSubmissionBrowserEntry = memo(function FormSubmissionBrowserEntry2(props) {
+  var _a;
+  const { submission, onSubmissionClick, compact, labelType, rowDecorator } = props;
+  const currentUser = useAppSelector(selectCurrentUser);
+  const createdBy = useAppSelector(selectUser("created_by" in submission ? submission.created_by : currentUser.id));
+  const dateToUse = getCreatedAtOrSubmittedAtDate(submission);
+  const formattedDateTime = isToday(dateToUse) ? dateToUse.toLocaleTimeString([], {
     hour: "2-digit",
     minute: "2-digit"
-  }) : Li(d), f = M(Ct(e.form_revision));
-  if (!f)
-    throw new Error(`Could not find revision ${e.form_revision} for submission ${e.offline_id}.`);
-  const p = (w = M(Ai(f.form))) == null ? void 0 : w.revision, h = Pi({
-    file: (l == null ? void 0 : l.profile.file) ?? null,
-    fileSha1: (l == null ? void 0 : l.profile.file_sha1) ?? null
-  }), g = (l == null ? void 0 : l.username.charAt(0).toUpperCase()) ?? "?", v = f.revision === p, z = wi.useCallback(() => {
-    t && t({ submission: e });
-  }, [e, t]), I = /* @__PURE__ */ r(Oe.Item, { onClick: z, asChild: !0, children: /* @__PURE__ */ b(y, { grow: "1", width: "100%", p: "2", gap: "2", justify: "between", children: [
-    /* @__PURE__ */ b(y, { gap: "2", align: "center", className: Rt.stopHorizontalOverflow, children: [
-      /* @__PURE__ */ r(ci, { src: h, size: "1", fallback: g }),
-      /* @__PURE__ */ r(V, { size: "2", noWrap: !0, children: s === "creator" ? (l || c).username : f.title })
+  }) : getLocalDateString(dateToUse);
+  const revision = useAppSelector(selectFormRevision(submission.form_revision));
+  if (!revision) {
+    throw new Error(`Could not find revision ${submission.form_revision} for submission ${submission.offline_id}.`);
+  }
+  const latestRevisionNumber = (_a = useAppSelector(selectLatestFormRevision(revision.form))) == null ? void 0 : _a.revision;
+  const creatorProfileSrc = useFileSrc({
+    file: (createdBy == null ? void 0 : createdBy.profile.file) ?? null,
+    fileSha1: (createdBy == null ? void 0 : createdBy.profile.file_sha1) ?? null
+  });
+  const creatorProfileFallback = (createdBy == null ? void 0 : createdBy.username.charAt(0).toUpperCase()) ?? "?";
+  const isLatestRevision = revision.revision === latestRevisionNumber;
+  const handleClick = React.useCallback(() => {
+    if (onSubmissionClick) {
+      onSubmissionClick({ submission });
+    }
+  }, [submission, onSubmissionClick]);
+  const row = /* @__PURE__ */ jsx(ButtonList.Item, { onClick: handleClick, asChild: true, children: /* @__PURE__ */ jsxs(Flex, { grow: "1", width: "100%", p: "2", gap: "2", justify: "between", children: [
+    /* @__PURE__ */ jsxs(Flex, { gap: "2", align: "center", className: styles.stopHorizontalOverflow, children: [
+      /* @__PURE__ */ jsx(Avatar, { src: creatorProfileSrc, size: "1", fallback: creatorProfileFallback }),
+      /* @__PURE__ */ jsx(Text, { size: "2", noWrap: true, children: labelType === "creator" ? (createdBy || currentUser).username : revision.title })
     ] }),
-    /* @__PURE__ */ b(y, { gap: "2", align: "center", children: [
-      !n && (f.revision ? /* @__PURE__ */ r(He, { variant: "soft", severity: v ? "primary" : "info", children: n ? f.revision.toString() : `Revision #${f.revision}` }) : !!p && /* @__PURE__ */ r(He, { children: "Original" })),
-      /* @__PURE__ */ r(V, { size: "2", noWrap: !0, children: u })
+    /* @__PURE__ */ jsxs(Flex, { gap: "2", align: "center", children: [
+      !compact && (revision.revision ? /* @__PURE__ */ jsx(Badge, { variant: "soft", severity: isLatestRevision ? "primary" : "info", children: compact ? revision.revision.toString() : `Revision #${revision.revision}` }) : !!latestRevisionNumber && /* @__PURE__ */ jsx(Badge, { children: "Original" })),
+      /* @__PURE__ */ jsx(Text, { size: "2", noWrap: true, children: formattedDateTime })
     ] })
   ] }) });
-  return a ? a(e, I) : I;
-}), Xe = (o) => {
-  const i = "created_at" in o ? o.created_at : o.submitted_at;
-  return new Date(i);
-}, Rn = S(function(i) {
+  if (rowDecorator) {
+    return rowDecorator(submission, row);
+  }
+  return row;
+});
+const getCreatedAtOrSubmittedAtDate = (submission) => {
+  const date = "created_at" in submission ? submission.created_at : submission.submitted_at;
+  return new Date(date);
+};
+const FormSubmissionBrowser = memo(function FormSubmissionBrowser2(props) {
   const {
-    formId: e,
-    submissions: t,
-    compact: n = !1,
-    className: s,
-    after: a,
-    variant: c = "outline",
-    ...l
-  } = i;
-  if (!!e == !!t)
+    formId: formId2,
+    submissions: propSubmissions,
+    compact = false,
+    className,
+    after,
+    variant = "outline",
+    ...submissionEntryProps
+  } = props;
+  if (!!formId2 === !!propSubmissions) {
     throw new Error("Either formId or submissions must be provided, but not both.");
-  const d = M(
-    t ? () => t : ki(e)
-  ), u = x(
-    () => d == null ? void 0 : d.sort((f, p) => Xe(p).getTime() - Xe(f).getTime()),
-    [d]
+  }
+  const submissions = useAppSelector(
+    propSubmissions ? () => propSubmissions : selectSubmissionsForForm(formId2)
+  );
+  const sortedSubmissions = useMemo(
+    () => submissions == null ? void 0 : submissions.sort((a, b) => {
+      return getCreatedAtOrSubmittedAtDate(b).getTime() - getCreatedAtOrSubmittedAtDate(a).getTime();
+    }),
+    [submissions]
   );
-  return /* @__PURE__ */ r(
-    Oe.Root,
+  return /* @__PURE__ */ jsx(
+    ButtonList.Root,
     {
-      className: zt(Rt.submissionsContainer, s),
+      className: classNames(styles.submissionsContainer, className),
       size: "small",
-      variant: c,
-      before: !n && /* @__PURE__ */ b(V, { severity: "info", children: [
+      variant,
+      before: !compact && /* @__PURE__ */ jsxs(Text, { severity: "info", children: [
         "There are ",
-        ((d == null ? void 0 : d.length) || 0).toString(),
+        ((submissions == null ? void 0 : submissions.length) || 0).toString(),
         " submissions of this form."
       ] }),
-      after: a,
-      children: u == null ? void 0 : u.map((f, p) => /* @__PURE__ */ r(
-        ln,
-        {
-          submission: f,
-          compact: n,
-          ...l
-        },
-        p
-      ))
+      after,
+      children: sortedSubmissions == null ? void 0 : sortedSubmissions.map((submission, index) => {
+        return /* @__PURE__ */ jsx(
+          FormSubmissionBrowserEntry,
+          {
+            submission,
+            compact,
+            ...submissionEntryProps
+          },
+          index
+        );
+      })
     }
   );
-}), Nn = S(function(i) {
-  const { name: e, render: t } = i, { submitForm: n } = me(), [s, a, c] = Je(e);
-  return x(() => {
-    const l = (d) => c.setValue(d, !1);
-    return t({
-      value: s.value,
-      setValue: l,
-      patchValue: n
+});
+const PatchField = memo(function PatchField2(props) {
+  const { name, render } = props;
+  const { submitForm } = useFormikContext();
+  const [fieldProps, _meta, helpers] = useField(name);
+  return useMemo(() => {
+    const setValue = (value) => helpers.setValue(value, false);
+    return render({
+      value: fieldProps.value,
+      setValue,
+      patchValue: submitForm
     });
-  }, [n, c, s.value, t]);
-}), Bn = S(
-  pe((o, i) => {
-    const { children: e, schema: t, values: n, onPatch: s, onError: a, ...c } = o, l = x(() => at(t.fields, n), [t.fields, n]), d = T(
-      (g) => {
-        const v = {};
-        for (const z in g) {
-          const I = g[z];
-          I !== l[z] && I !== void 0 && (v[z] = I);
+  }, [submitForm, helpers, fieldProps.value, render]);
+});
+const PatchFormProvider = memo(
+  forwardRef((props, ref) => {
+    const { children, schema, values, onPatch, onError, ...rest } = props;
+    const initialValues2 = useMemo(() => initialFormValues(schema.fields, values), [schema.fields, values]);
+    const handlePatch = useCallback(
+      (values2) => {
+        const diff = {};
+        for (const key in values2) {
+          const value = values2[key];
+          if (value !== initialValues2[key] && value !== void 0) {
+            diff[key] = value;
+          }
         }
-        De(v) && s(v);
+        if (!hasKeys(diff))
+          return;
+        onPatch(diff);
       },
-      [l, s]
-    ), u = T(
-      async (g) => {
-        const v = await Ot(t, g);
-        return v && a(v), v;
+      [initialValues2, onPatch]
+    );
+    const validate = useCallback(
+      async (form) => {
+        const error = await validateForm(schema, form);
+        if (error) {
+          onError(error);
+        }
+        return error;
       },
-      [t, a]
-    ), f = et({
-      initialValues: l,
-      onSubmit: d,
-      validate: u,
+      [schema, onError]
+    );
+    const formik = useFormik({
+      initialValues: initialValues2,
+      onSubmit: handlePatch,
+      validate,
       // only validate the entire form on submit
-      validateOnBlur: !1,
-      validateOnChange: !1
-    }), { errors: p, resetForm: h } = f;
-    return ve(() => {
-      De(p) && h({ values: l, errors: {} });
-    }, [p, l, h]), /* @__PURE__ */ r(tt, { value: f, children: /* @__PURE__ */ r("form", { ...c, ref: i, onSubmit: f.handleSubmit, children: e }) });
+      validateOnBlur: false,
+      validateOnChange: false
+    });
+    const { errors, resetForm } = formik;
+    useEffect(() => {
+      if (hasKeys(errors)) {
+        resetForm({ values: initialValues2, errors: {} });
+      }
+    }, [errors, initialValues2, resetForm]);
+    return /* @__PURE__ */ jsx(FormikProvider, { value: formik, children: /* @__PURE__ */ jsx("form", { ...rest, ref, onSubmit: formik.handleSubmit, children }) });
   })
 );
-function an(o, i) {
-  if (o == null)
-    return {};
-  var e = {}, t = Object.keys(o), n, s;
-  for (s = 0; s < t.length; s++)
-    n = t[s], !(i.indexOf(n) >= 0) && (e[n] = o[n]);
-  return e;
-}
-var cn = ["color"], dn = /* @__PURE__ */ pe(function(o, i) {
-  var e = o.color, t = e === void 0 ? "currentColor" : e, n = an(o, cn);
-  return ft("svg", Object.assign({
-    width: "15",
-    height: "15",
-    viewBox: "0 0 15 15",
-    fill: "none",
-    xmlns: "http://www.w3.org/2000/svg"
-  }, n, {
-    ref: i
-  }), ft("path", {
-    d: "M12.8536 2.85355C13.0488 2.65829 13.0488 2.34171 12.8536 2.14645C12.6583 1.95118 12.3417 1.95118 12.1464 2.14645L7.5 6.79289L2.85355 2.14645C2.65829 1.95118 2.34171 1.95118 2.14645 2.14645C1.95118 2.34171 1.95118 2.65829 2.14645 2.85355L6.79289 7.5L2.14645 12.1464C1.95118 12.3417 1.95118 12.6583 2.14645 12.8536C2.34171 13.0488 2.65829 13.0488 2.85355 12.8536L7.5 8.20711L12.1464 12.8536C12.3417 13.0488 12.6583 13.0488 12.8536 12.8536C13.0488 12.6583 13.0488 12.3417 12.8536 12.1464L8.20711 7.5L12.8536 2.85355Z",
-    fill: t,
-    fillRule: "evenodd",
-    clipRule: "evenodd"
-  }));
-});
-const Nt = {
-  ...lt,
-  section: X
-}, un = S(function(i) {
-  const { field: e, setFieldType: t } = i, n = e.fieldTypeName, s = e.fieldTypeDescription, a = e.Icon;
-  return /* @__PURE__ */ b(y, { gap: "4", align: "center", children: [
-    /* @__PURE__ */ r(H, { type: "button", variant: "surface", onClick: t, style: { width: "135px" }, children: /* @__PURE__ */ b(y, { gap: "3", align: "center", grow: "1", children: [
-      /* @__PURE__ */ r(a, {}),
-      n
+const CompleteFieldTypeToClsMapping = {
+  ...FieldTypeToClsMapping,
+  section: FieldSection
+};
+const FieldToChoose = memo(function FieldToChoose2(props) {
+  const { field, setFieldType } = props;
+  const typeName = field.fieldTypeName;
+  const description2 = field.fieldTypeDescription;
+  const Icon = field.Icon;
+  return /* @__PURE__ */ jsxs(Flex, { gap: "4", align: "center", children: [
+    /* @__PURE__ */ jsx(Button, { type: "button", variant: "surface", onClick: setFieldType, style: { width: "135px" }, children: /* @__PURE__ */ jsxs(Flex, { gap: "3", align: "center", grow: "1", children: [
+      /* @__PURE__ */ jsx(Icon, {}),
+      typeName
     ] }) }),
-    /* @__PURE__ */ r(V, { children: s })
+    /* @__PURE__ */ jsx(Text, { children: description2 })
   ] });
-}), Bt = [
+});
+const fieldsToChoose = [
   ["string", "text"],
   ["select", "multi-select", "upload"],
   ["boolean", "date", "number", "multi-string"]
-], fn = Bt.length - 1, mn = S(function(i) {
-  const { setFieldType: e } = i;
-  return /* @__PURE__ */ r(y, { direction: "column", gap: "3", children: Bt.map((t, n) => /* @__PURE__ */ b(y, { direction: "column", gap: "3", children: [
-    /* @__PURE__ */ r(y, { direction: "column", gap: "2", children: t.map((s) => /* @__PURE__ */ r(
-      un,
+];
+const indexOfLastFieldGroup = fieldsToChoose.length - 1;
+const ChooseFieldToAdd = memo(function ChooseFieldToAdd2(props) {
+  const { setFieldType } = props;
+  return /* @__PURE__ */ jsx(Flex, { direction: "column", gap: "3", children: fieldsToChoose.map((fieldGroup, index) => /* @__PURE__ */ jsxs(Flex, { direction: "column", gap: "3", children: [
+    /* @__PURE__ */ jsx(Flex, { direction: "column", gap: "2", children: fieldGroup.map((identifier) => /* @__PURE__ */ jsx(
+      FieldToChoose,
       {
-        field: lt[s],
-        setFieldType: () => e(s)
+        field: FieldTypeToClsMapping[identifier],
+        setFieldType: () => setFieldType(identifier)
       },
-      s
+      identifier
     )) }),
-    n < fn && /* @__PURE__ */ r(di, { size: "4" })
-  ] }, n)) });
-}), pn = (o) => (i) => {
-  if (!(!i || typeof i != "string") && o.includes(i.trim()))
-    return "This name is already taken.";
-}, hn = (o, i) => {
-  const e = [
-    new be({
+    index < indexOfLastFieldGroup && /* @__PURE__ */ jsx(Separator, { size: "4" })
+  ] }, index)) });
+});
+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: !0,
+      required: true,
       maxLength: 200,
       identifier: "label",
-      fieldValidators: [pn(o)]
+      fieldValidators: [validateNewFieldName(takenLabels)]
     }),
-    new ye({
+    new TextField({
       label: "Description",
-      required: !1,
+      required: false,
       maxLength: 1e3,
       identifier: "description"
     })
   ];
-  return i === "section" ? e : [
-    ...e,
-    new de({ label: "Required", description: null, required: !1, identifier: "required" })
+  if (type === "section")
+    return base;
+  return [
+    ...base,
+    new BooleanField({ label: "Required", description: null, required: false, identifier: "required" })
   ];
-}, gn = S(function(i) {
-  const { fieldType: e, handleCancel: t, handleCreateField: n, defaultField: s, conditionalSourceFields: a } = i, c = Nt[e], l = me(), d = x(() => {
-    const u = kt(l.values.fields).filter((p) => p !== (s == null ? void 0 : s.label));
-    let f = hn(u, e);
-    if (c === X) {
-      if (a === void 0)
+};
+const FieldOptionsForm = memo(function FieldOptionsForm2(props) {
+  const { fieldType, handleCancel, handleCreateField, defaultField, conditionalSourceFields } = props;
+  const fieldCls = CompleteFieldTypeToClsMapping[fieldType];
+  const formik = useFormikContext();
+  const schema = useMemo(() => {
+    const takenFieldLabels = getTakenFieldLabels(formik.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.");
-      f = f.concat(c.getFieldCreationSchema(a));
+      }
+      fields = fields.concat(fieldCls.getFieldCreationSchema(conditionalSourceFields));
     } else {
-      if (!(c.prototype instanceof O))
-        throw new Error(`Field must be an instance of BaseField. Got ${c}.`);
-      f = [...f, ...c.getFieldCreationSchema()];
+      if (!(fieldCls.prototype instanceof BaseField)) {
+        throw new Error(`Field must be an instance of BaseField. Got ${fieldCls}.`);
+      }
+      fields = [...fields, ...fieldCls.getFieldCreationSchema()];
     }
     return {
-      fields: f,
-      meta: { readonly: !1 },
+      fields,
+      meta: { readonly: false },
       // using the dialog title as the form title
       title: null
     };
-  }, [l.values.fields, e, c, s == null ? void 0 : s.label, a]);
-  return /* @__PURE__ */ r(
-    ct,
+  }, [formik.values.fields, fieldType, fieldCls, defaultField == null ? void 0 : defaultField.label, conditionalSourceFields]);
+  return /* @__PURE__ */ jsx(
+    FormRenderer,
     {
-      schema: d,
-      values: s,
-      onSubmit: n,
-      cancelText: s ? void 0 : "Back",
-      onCancel: t
+      schema,
+      values: defaultField,
+      onSubmit: handleCreateField,
+      cancelText: defaultField ? void 0 : "Back",
+      onCancel: handleCancel
     }
   );
-}), he = S(function(i) {
-  const { parentPath: e, index: t, onComplete: n, initial: s, editing: a, conditionalSourceFields: c } = i, [l, d] = Y(), u = (s == null ? void 0 : s.type) ?? l, f = u ? Nt[u].fieldTypeName : void 0, { setFieldValue: p, values: h } = me();
-  if (a && !s)
+});
+const FieldBuilder = memo(function FieldBuilder2(props) {
+  const { parentPath, index, children, initial, editing, conditionalSourceFields } = props;
+  const [fieldType, setFieldType] = useState();
+  const type = (initial == null ? void 0 : initial.type) ?? fieldType;
+  const typeName = type ? CompleteFieldTypeToClsMapping[type].fieldTypeName : void 0;
+  const { setFieldValue, values } = useFormikContext();
+  if (editing && !initial)
     throw new Error("Initial field must be provided if editing is true.");
-  const g = !u && !a && !s, v = g ? "Choose a field type" : `${f} settings`, z = g ? "Select a field type to add to this section." : (f == null ? void 0 : f.toLowerCase()) === "section" ? "Customize your section" : `Customize your ${f == null ? void 0 : f.toLowerCase()} field.`, I = T(() => d(void 0), []), w = T(() => {
-    d(void 0), n();
-  }, [n]), k = T(
-    (A) => {
-      const { label: C } = A;
-      if (!u)
+  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 = useCallback(() => setFieldType(void 0), []);
+  const handleCloseInterrupt = useCallback((confirmClose) => {
+    setFieldType(void 0);
+    confirmClose();
+  }, []);
+  const handleCreateField = useCallback(
+    (form, closeDialog) => {
+      const { label } = form;
+      if (!type)
         throw new Error("Field type must be selected before creating a field.");
-      if (!C || typeof C != "string")
+      if (!label || typeof label !== "string")
         throw new Error("Label must be provided before creating a field.");
-      const $ = Ne({
-        type: u,
-        ...A,
-        identifier: At(A.identifier, C)
-      }).serialize(), R = ce(h, e);
-      if (R === void 0)
+      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 U;
-      if (!Array.isArray(R))
+      }
+      let newFields;
+      if (!Array.isArray(parent))
         throw new Error("Parent path must point to an array.");
-      a ? U = qi(R, t, $) : U = Lt(R, t, $), p(e, U).then(), n();
+      if (editing) {
+        newFields = replace(parent, index, field);
+      } else {
+        newFields = insert(parent, index, field);
+      }
+      setFieldValue(parentPath, newFields).then();
+      closeDialog();
     },
-    [u, h, e, a, p, n, t]
+    [editing, type, values, parentPath, setFieldValue, index]
   );
-  return /* @__PURE__ */ r(fe, { children: /* @__PURE__ */ b(y, { direction: "column", gap: "2", children: [
-    /* @__PURE__ */ b(y, { justify: "between", children: [
-      /* @__PURE__ */ r(V, { children: v }),
-      /* @__PURE__ */ r(K, { "aria-label": "Close", onClick: w, type: "button", children: /* @__PURE__ */ r(dn, {}) })
-    ] }),
-    /* @__PURE__ */ r(V, { children: z }),
-    g ? /* @__PURE__ */ r(mn, { setFieldType: d }) : /* @__PURE__ */ r(
-      gn,
-      {
-        conditionalSourceFields: c,
-        handleCancel: I,
-        handleCreateField: (A) => k(A),
-        fieldType: u,
-        defaultField: s
+  const dialogContent = useCallback(
+    (closeDialog) => {
+      if (showChooseField) {
+        return /* @__PURE__ */ jsx(ChooseFieldToAdd, { setFieldType });
       }
-    )
-  ] }) });
-}), ht = ({ children: o }) => /* @__PURE__ */ r(Ze, { children: o }), gt = (o, i) => ({
-  initial: o ? i : "none",
-  sm: o ? "none" : i
-}), qt = S(function(i) {
-  const { remove: e, dragHandleProps: t, editProps: n, insertAfterProps: s, duplicateProps: a } = i, c = x(
+      return /* @__PURE__ */ jsx(
+        FieldOptionsForm,
+        {
+          conditionalSourceFields,
+          handleCancel,
+          handleCreateField: (form) => handleCreateField(form, closeDialog),
+          fieldType: type,
+          defaultField: initial
+        }
+      );
+    },
+    [conditionalSourceFields, handleCancel, handleCreateField, initial, showChooseField, type]
+  );
+  return /* @__PURE__ */ jsx(Dialog, { onCloseInterrupt: handleCloseInterrupt, title: title2, description: description2, content: dialogContent, children });
+});
+const DefaultWrapper = ({ children }) => /* @__PURE__ */ jsx(Fragment, { children });
+const forMobile = (mobile, display) => ({
+  initial: mobile ? display : "none",
+  sm: mobile ? "none" : display
+});
+const FieldActions = memo(function FieldActions2(props) {
+  const { remove: remove2, dragHandleProps, editProps, insertAfterProps, duplicateProps } = props;
+  const actions = useMemo(
     () => [
       {
-        Wrapper: he,
-        wrapperProps: n,
-        Icon: ui,
+        Wrapper: FieldBuilder,
+        wrapperProps: editProps,
+        Icon: Pencil1Icon,
         text: "Edit"
       },
       {
-        Icon: fi,
+        Icon: TrashIcon,
         buttonProps: {
-          onClick: e
+          onClick: remove2
         },
         text: "Delete"
       },
       {
-        Wrapper: he,
-        wrapperProps: a,
-        Icon: mi,
+        Wrapper: FieldBuilder,
+        wrapperProps: duplicateProps,
+        Icon: CopyIcon,
         text: "Duplicate"
       },
       {
-        Wrapper: he,
-        wrapperProps: s,
-        Icon: _e,
+        Wrapper: FieldBuilder,
+        wrapperProps: insertAfterProps,
+        Icon: PlusIcon,
         text: "Add after"
       },
       {
         // Wrapping icon in a div so that the asChild turns the button into a div
         // so that the drag handle props are not applied to the icon
         // Note: b/c the <button> does not handle the space-press event correctly
-        Icon: (l) => /* @__PURE__ */ r("div", { ...l, children: /* @__PURE__ */ r(pi, {}) }),
+        Icon: (props2) => /* @__PURE__ */ jsx("div", { ...props2, children: /* @__PURE__ */ jsx(DragHandleDots2Icon, {}) }),
         text: "Reorder",
-        disableOnMobile: !0,
-        buttonProps: { ...t, asChild: !0 }
+        disableOnMobile: true,
+        buttonProps: { ...dragHandleProps, asChild: true }
       }
     ],
-    [t, a, n, s, e]
+    [dragHandleProps, duplicateProps, editProps, insertAfterProps, remove2]
   );
-  return /* @__PURE__ */ b(Ze, { children: [
-    /* @__PURE__ */ r(y, { gap: "4", display: gt(!1, "flex"), children: c.map((l) => {
-      const d = l.Wrapper ?? ht;
-      return /* @__PURE__ */ r(d, { ...l.wrapperProps, children: /* @__PURE__ */ r(K, { type: "button", variant: "ghost", "aria-label": l.text, ...l.buttonProps, children: /* @__PURE__ */ r(l.Icon, {}) }) }, l.text);
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(Flex, { gap: "4", display: forMobile(false, "flex"), children: actions.map((Action) => {
+      const Wrapper = Action.Wrapper ?? DefaultWrapper;
+      return /* @__PURE__ */ jsx(Wrapper, { ...Action.wrapperProps, children: /* @__PURE__ */ jsx(IconButton, { type: "button", variant: "ghost", "aria-label": Action.text, ...Action.buttonProps, children: /* @__PURE__ */ jsx(Action.Icon, {}) }) }, Action.text);
     }) }),
-    /* @__PURE__ */ r(ge, { display: gt(!0, "block"), children: /* @__PURE__ */ r(
-      hi,
+    /* @__PURE__ */ jsx(Box, { display: forMobile(true, "block"), children: /* @__PURE__ */ jsx(
+      DropdownMenu,
       {
-        trigger: /* @__PURE__ */ r(K, { variant: "ghost", "aria-label": "Actions menu", children: /* @__PURE__ */ r(gi, {}) }),
-        closeOnSelect: !1,
-        items: c.map((l) => {
-          var u;
-          if (l.disableOnMobile)
+        trigger: /* @__PURE__ */ jsx(IconButton, { variant: "ghost", "aria-label": "Actions menu", children: /* @__PURE__ */ jsx(DotsVerticalIcon, {}) }),
+        closeOnSelect: false,
+        items: actions.map((Action) => {
+          var _a;
+          if (Action.disableOnMobile)
             return null;
-          const d = l.Wrapper ?? ht;
+          const Wrapper = Action.Wrapper ?? DefaultWrapper;
           return {
-            ...l.buttonProps,
-            onSelect: (u = l.buttonProps) == null ? void 0 : u.onClick,
-            content: /* @__PURE__ */ r(d, { ...l.wrapperProps, children: /* @__PURE__ */ b(y, { gap: "2", align: "center", children: [
-              /* @__PURE__ */ r(l.Icon, {}),
-              l.text
+            ...Action.buttonProps,
+            onSelect: (_a = Action.buttonProps) == null ? void 0 : _a.onClick,
+            content: /* @__PURE__ */ jsx(Wrapper, { ...Action.wrapperProps, children: /* @__PURE__ */ jsxs(Flex, { gap: "2", align: "center", children: [
+              /* @__PURE__ */ jsx(Action.Icon, {}),
+              Action.text
             ] }) })
           };
-        }).filter((l) => l !== null)
+        }).filter((x) => x !== null)
       }
     ) })
   ] });
-}), Be = "form-builder", bn = S(function(i) {
-  const { field: e, index: t, sectionIndex: n, mode: s, takenLabels: a, remove: c, onModeChange: l } = i, d = x(() => Ne(e), [e]), u = $e(d, { formId: Be, disabled: !0 }), f = T(
-    (v) => {
-      if (v.label === null)
-        throw new Error(`Expected a label for field ${v.identifier}`);
-      return { ...v, label: Ke(v.label, a), identifier: "" };
+});
+const formId = "form-builder";
+const FieldWithActions = memo(function FieldWithActions2(props) {
+  const { field, index, sectionIndex, takenLabels, remove: remove2 } = props;
+  const deserializedField = useMemo(() => deserialize(field), [field]);
+  const input = useFieldInput(deserializedField, { formId, disabled: true });
+  const duplicateField = useCallback(
+    (field2) => {
+      if (field2.label === null) {
+        throw new Error(`Expected a label for field ${field2.identifier}`);
+      }
+      return { ...field2, label: incrementFieldLabel(field2.label, takenLabels), identifier: "" };
     },
-    [a]
-  ), p = x(() => (l("edit"), {
-    index: t,
-    parentPath: `fields.${n}.fields`,
-    initial: e,
-    editing: !0,
-    onComplete: () => l("display")
-  }), [e, t, l, n]), h = x(
+    [takenLabels]
+  );
+  const editFieldProps = useMemo(
+    () => ({
+      index,
+      parentPath: `fields.${sectionIndex}.fields`,
+      initial: field,
+      editing: true
+    }),
+    [field, index, sectionIndex]
+  );
+  const duplicateFieldProps = useMemo(
     () => ({
-      parentPath: `fields.${n}.fields`,
-      index: t + 1,
-      initial: f(e),
-      onComplete: () => l("display")
+      parentPath: `fields.${sectionIndex}.fields`,
+      index: index + 1,
+      initial: duplicateField(field)
     }),
-    [f, e, t, l, n]
-  ), g = x(
+    [duplicateField, field, index, sectionIndex]
+  );
+  const insertAfterProps = useMemo(
     () => ({
-      parentPath: `fields.${n}.fields`,
-      index: t + 1,
-      initial: void 0,
-      onComplete: () => l("display")
+      parentPath: `fields.${sectionIndex}.fields`,
+      index: index + 1,
+      initial: void 0
     }),
-    [t, l, n]
+    [index, sectionIndex]
   );
-  return console.log(u), /* @__PURE__ */ r(Ze, { children: s === "display" ? /* @__PURE__ */ r(nt, { draggableId: e.identifier, index: t, children: (v) => /* @__PURE__ */ r(
-    fe,
+  return /* @__PURE__ */ jsx(Draggable, { draggableId: field.identifier, index, children: (draggableProvided) => /* @__PURE__ */ jsx(
+    Card,
     {
-      ref: v.innerRef,
-      ...v.draggableProps,
-      ...v.dragHandleProps,
+      ref: draggableProvided.innerRef,
+      ...draggableProvided.draggableProps,
+      ...draggableProvided.dragHandleProps,
       mb: "4",
-      children: /* @__PURE__ */ b(y, { gap: "4", justify: "between", align: "center", children: [
-        u,
-        /* @__PURE__ */ r(
-          qt,
+      children: /* @__PURE__ */ jsxs(Flex, { gap: "4", justify: "between", align: "center", children: [
+        input,
+        /* @__PURE__ */ jsx(
+          FieldActions,
           {
-            remove: c,
-            editProps: p,
-            duplicateProps: h,
-            insertAfterProps: g,
-            dragHandleProps: v.dragHandleProps
+            remove: remove2,
+            editProps: editFieldProps,
+            duplicateProps: duplicateFieldProps,
+            insertAfterProps,
+            dragHandleProps: draggableProvided.dragHandleProps
           }
         )
       ] })
     }
-  ) }) : null });
-}), yn = S(function(i) {
-  var we, xe, L, N, G, Ie, Ce;
-  const { field: e, index: t, dropState: n } = i, [s, a] = Y(Array(e.fields.length).fill("display")), c = (we = n[e.identifier]) == null ? void 0 : we.disabled, { setFieldValue: l, values: d } = me(), u = bi(), f = kt(d.fields), p = T(
-    (F, E) => {
-      for (const D of F) {
-        const P = E.indexOf(D);
-        l(`fields.${P}.condition`, null).then(), l(`fields.${P}.conditional`, !1).then();
+  ) });
+});
+const FieldSectionWithActions = memo(function FieldSectionWithActions2(props) {
+  var _a, _b, _c, _d, _e, _f, _g;
+  const { field, index: sectionIndex, dropState } = props;
+  const isDropDisabled = (_a = dropState[field.identifier]) == null ? void 0 : _a.disabled;
+  const { setFieldValue, values } = useFormikContext();
+  const alertDialog = useAlertDialog();
+  const takenFieldLabels = getTakenFieldLabels(values.fields);
+  const removeSectionConditions = useCallback(
+    (sectionsToUpdate, allSections) => {
+      for (const section of sectionsToUpdate) {
+        const sectionIndex2 = allSections.indexOf(section);
+        setFieldValue(`fields.${sectionIndex2}.condition`, null).then();
+        setFieldValue(`fields.${sectionIndex2}.conditional`, false).then();
       }
     },
-    [l]
-  ), h = T(
-    (F) => {
-      var P;
-      const E = e.fields[F];
-      if (!E)
+    [setFieldValue]
+  );
+  const makeRemoveFieldAction = useCallback(
+    (fieldIndex) => {
+      var _a2;
+      const removing = field.fields[fieldIndex];
+      if (!removing)
         throw new Error("Could not find field to remove.");
-      const D = [];
-      for (const _ of d.fields)
-        ((P = _.condition) == null ? void 0 : P.identifier) === E.identifier && D.push(_);
+      const sectionsWithMatchingCondition = [];
+      for (const section of values.fields) {
+        if (((_a2 = section.condition) == null ? void 0 : _a2.identifier) === removing.identifier) {
+          sectionsWithMatchingCondition.push(section);
+        }
+      }
       return {
-        removing: E,
-        affectedSections: D,
-        action: () => l(`fields.${t}.fields`, Le(e.fields, F))
+        removing,
+        affectedSections: sectionsWithMatchingCondition,
+        action: () => setFieldValue(`fields.${sectionIndex}.fields`, remove(field.fields, fieldIndex))
       };
     },
-    [e.fields, d.fields, l, t]
-  ), g = T(
-    (F) => {
-      const { affectedSections: E, action: D, removing: P } = h(F), _ = () => {
-        D().then(), p(E, d.fields);
+    [field.fields, values.fields, setFieldValue, sectionIndex]
+  );
+  const removeField = useCallback(
+    (i) => {
+      const { affectedSections, action, removing } = makeRemoveFieldAction(i);
+      const cmd = () => {
+        action().then();
+        removeSectionConditions(affectedSections, values.fields);
       };
-      if (E.length > 0) {
-        const qe = E.map((Fe) => Fe.label).join(", ");
-        return u({
+      if (affectedSections.length > 0) {
+        const labels = affectedSections.map((section) => section.label).join(", ");
+        return alertDialog({
           title: "Remove condition?",
-          description: `${P.label} is being used as a condition, deleting it will remove the condition from the ${qe} section(s).`,
+          description: `${removing.label} is being used as a condition, deleting it will remove the condition from the ${labels} section(s).`,
           severity: "danger",
           actionText: "Remove",
-          onAction: _
+          onAction: cmd
         });
       }
-      _();
+      cmd();
     },
-    [h, p, d.fields, u]
-  ), v = T(() => {
-    const E = e.fields.map((Te, Wt) => h(Wt)).flatMap((Te) => Te.affectedSections), D = E.length ? "Remove fields and conditions?" : "Remove fields?", P = e.fields.length, _ = E.map((Te) => Te.label).join(", "), qe = E.length ? `Deleting this section will remove the ${P} field(s) it contains and will remove the conditions from following sections: ${_}` : `Deleting this section will remove the ${P} field(s) it contains.`, Fe = Le(d.fields, t), dt = () => l("fields", Fe);
-    if (E.length > 0)
-      return u({
-        title: D,
-        description: qe,
+    [makeRemoveFieldAction, removeSectionConditions, values.fields, alertDialog]
+  );
+  const removeSection = useCallback(() => {
+    const fieldSideEffects = field.fields.map((_, i) => makeRemoveFieldAction(i));
+    const affectedSections = fieldSideEffects.flatMap((sideEffect) => sideEffect.affectedSections);
+    const title2 = affectedSections.length ? "Remove fields and conditions?" : "Remove fields?";
+    const numFields = field.fields.length;
+    const sectionLabels = affectedSections.map((section) => section.label).join(", ");
+    const description2 = affectedSections.length ? `Deleting this section will remove the ${numFields} field(s) it contains and will remove the conditions from following sections: ${sectionLabels}` : `Deleting this section will remove the ${numFields} field(s) it contains.`;
+    const updatedSections = remove(values.fields, sectionIndex);
+    const cmd = () => setFieldValue("fields", updatedSections);
+    if (affectedSections.length > 0) {
+      return alertDialog({
+        title: title2,
+        description: description2,
         severity: "danger",
         actionText: "Remove",
         onAction: () => {
-          dt().then(() => {
-            p(E, Fe);
+          cmd().then(() => {
+            removeSectionConditions(affectedSections, updatedSections);
           });
         }
       });
-    dt().then();
+    }
+    cmd().then();
   }, [
-    e.fields,
-    d.fields,
-    t,
-    h,
-    l,
-    u,
-    p
-  ]), z = T(
-    (F) => {
-      if (F.label === null)
-        throw new Error(`Expected a label for field ${F.identifier}`);
-      const E = Ke(F.label, f), D = F.fields.map((P) => {
-        const _ = Ke(P.label, f);
+    field.fields,
+    values.fields,
+    sectionIndex,
+    makeRemoveFieldAction,
+    setFieldValue,
+    alertDialog,
+    removeSectionConditions
+  ]);
+  const duplicateSection = useCallback(
+    (field2) => {
+      if (field2.label === null) {
+        throw new Error(`Expected a label for field ${field2.identifier}`);
+      }
+      const newSectionLabel = incrementFieldLabel(field2.label, takenFieldLabels);
+      const newFields = field2.fields.map((f) => {
+        const newLabel = incrementFieldLabel(f.label, takenFieldLabels);
         return {
-          ...P,
-          label: _,
-          identifier: At(void 0, _)
+          ...f,
+          label: newLabel,
+          identifier: makeIdentifier(void 0, newLabel)
         };
       });
-      return { ...F, label: E, fields: D, identifier: "" };
+      return { ...field2, label: newSectionLabel, fields: newFields, identifier: "" };
     },
-    [f]
-  ), I = T((F, E) => {
-    a((D) => {
-      const P = [...D];
-      return P[F] = E, P;
-    });
-  }, []), w = x(
+    [takenFieldLabels]
+  );
+  const editSectionProps = useMemo(
     () => ({
-      index: t,
+      index: sectionIndex,
       parentPath: "fields",
-      initial: e,
-      editing: !0,
-      conditionalSourceFields: Se(d.fields, t),
-      onComplete: () => console.log("editsectionprops")
+      initial: field,
+      editing: true,
+      conditionalSourceFields: makeConditionalSourceFields(values.fields, sectionIndex)
     }),
-    [e, t, d.fields]
-  ), k = x(
+    [field, sectionIndex, values.fields]
+  );
+  const insertSectionProps = useMemo(
     () => ({
-      index: t + 1,
+      index: sectionIndex + 1,
       parentPath: "fields",
-      initial: Ee(),
-      conditionalSourceFields: Se(d.fields, t + 1),
-      onComplete: () => console.log("insertsectionprops")
+      initial: emptySection(),
+      conditionalSourceFields: makeConditionalSourceFields(values.fields, sectionIndex + 1)
     }),
-    [t, d.fields]
-  ), A = x(
+    [sectionIndex, values.fields]
+  );
+  const insertFieldAtEndOfSection = useMemo(
     () => ({
-      parentPath: `fields.${t}.fields`,
-      index: e.fields.length,
-      initial: void 0,
-      onComplete: () => console.log("insertfieldatendofsectionprops")
+      parentPath: `fields.${sectionIndex}.fields`,
+      index: field.fields.length,
+      initial: void 0
     }),
-    [e.fields.length, t]
-  ), C = x(
+    [field.fields.length, sectionIndex]
+  );
+  const duplicateSectionProps = useMemo(
     () => ({
-      index: t + 1,
+      index: sectionIndex + 1,
       parentPath: "fields",
-      initial: z(e),
-      conditionalSourceFields: Se(d.fields, t + 1),
-      onComplete: () => console.log("duplicatesectionprops")
+      initial: duplicateSection(field),
+      conditionalSourceFields: makeConditionalSourceFields(values.fields, sectionIndex + 1)
     }),
-    [z, e, t, d.fields]
-  ), $ = x(
+    [duplicateSection, field, sectionIndex, values.fields]
+  );
+  const conditionLabel = useMemo(
     () => {
-      var F, E;
-      return (E = Pt(d.fields, (F = e.condition) == null ? void 0 : F.identifier)) == null ? void 0 : E.label;
+      var _a2, _b2;
+      return (_b2 = findFieldByIdentifier(values.fields, (_a2 = field.condition) == null ? void 0 : _a2.identifier)) == null ? void 0 : _b2.label;
     },
-    [(xe = e.condition) == null ? void 0 : xe.identifier, d.fields]
-  ), R = Array.isArray((L = e.condition) == null ? void 0 : L.value) ? "contains all of" : "equals";
-  if (Qe((N = e.condition) == null ? void 0 : N.value))
+    [(_b = field.condition) == null ? void 0 : _b.identifier, values.fields]
+  );
+  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 U = Array.isArray((G = e.condition) == null ? void 0 : G.value) ? (Ie = e.condition) == null ? void 0 : Ie.value.map((F) => typeof F == "string" ? F : F.label).join(", ") : (Ce = e.condition) == null ? void 0 : Ce.value.toString();
-  return /* @__PURE__ */ r(nt, { draggableId: e.identifier, index: t, children: (F) => /* @__PURE__ */ r(
-    fe,
+  const conditionValue = Array.isArray((_e = field.condition) == null ? void 0 : _e.value) ? (_f = field.condition) == null ? void 0 : _f.value.map((v) => typeof v === "string" ? v : v.label).join(", ") : (_g = field.condition) == null ? void 0 : _g.value.toString();
+  return /* @__PURE__ */ jsx(Draggable, { draggableId: field.identifier, index: sectionIndex, children: (draggableProvided) => /* @__PURE__ */ jsx(
+    Card,
     {
-      ref: F.innerRef,
-      ...F.draggableProps,
-      ...F.dragHandleProps,
+      ref: draggableProvided.innerRef,
+      ...draggableProvided.draggableProps,
+      ...draggableProvided.dragHandleProps,
       mb: "4",
-      children: /* @__PURE__ */ b(y, { gap: "3", justify: "between", align: "center", children: [
-        /* @__PURE__ */ b(y, { direction: "column", gap: "2", grow: "1", children: [
-          /* @__PURE__ */ b(y, { direction: "column", children: [
-            /* @__PURE__ */ r(Me, { as: "h3", size: "3", children: e.label }),
-            /* @__PURE__ */ r(V, { className: Re.description, children: e.description })
+      children: /* @__PURE__ */ jsxs(Flex, { gap: "3", justify: "between", align: "center", children: [
+        /* @__PURE__ */ jsxs(Flex, { direction: "column", gap: "2", grow: "1", children: [
+          /* @__PURE__ */ jsxs(Flex, { direction: "column", children: [
+            /* @__PURE__ */ jsx(Heading, { as: "h3", size: "3", children: field.label }),
+            /* @__PURE__ */ jsx(Text, { className: styles$3.description, children: field.description })
           ] }),
-          e.condition && /* @__PURE__ */ r(V, { size: "1", children: /* @__PURE__ */ b(yi, { children: [
+          field.condition && /* @__PURE__ */ jsx(Text, { size: "1", children: /* @__PURE__ */ jsxs(Em, { children: [
             "Display only if ",
-            /* @__PURE__ */ r(ut, { children: $ }),
+            /* @__PURE__ */ jsx(Strong, { children: conditionLabel }),
             " ",
-            R,
+            conditionComparison,
             " ",
-            /* @__PURE__ */ r(ut, { children: U })
+            /* @__PURE__ */ jsx(Strong, { children: conditionValue })
           ] }) }),
-          /* @__PURE__ */ r(it, { droppableId: e.identifier, type: "SECTION", isDropDisabled: c, children: (E) => /* @__PURE__ */ b(
-            y,
+          /* @__PURE__ */ jsx(Droppable, { droppableId: field.identifier, type: "SECTION", isDropDisabled, children: (droppableProvided) => /* @__PURE__ */ jsxs(
+            Flex,
             {
-              ref: E.innerRef,
-              ...E.droppableProps,
+              ref: droppableProvided.innerRef,
+              ...droppableProvided.droppableProps,
               direction: "column",
               gap: "0",
               children: [
-                e.fields.map((D, P) => /* @__PURE__ */ r(
-                  bn,
+                field.fields.map((child, i) => /* @__PURE__ */ jsx(
+                  FieldWithActions,
                   {
-                    field: D,
-                    index: P,
-                    sectionIndex: t,
-                    remove: () => g(P),
-                    takenLabels: f,
-                    mode: s[P] ?? "display",
-                    onModeChange: (_) => I(P, _)
+                    field: child,
+                    index: i,
+                    sectionIndex,
+                    remove: () => removeField(i),
+                    takenLabels: takenFieldLabels
                   },
-                  D.identifier
+                  child.identifier
                 )),
-                E.placeholder,
-                /* @__PURE__ */ r(he, { ...A, children: /* @__PURE__ */ b(H, { type: "button", variant: "outline", children: [
-                  /* @__PURE__ */ r(_e, {}),
+                droppableProvided.placeholder,
+                /* @__PURE__ */ jsx(FieldBuilder, { ...insertFieldAtEndOfSection, children: /* @__PURE__ */ jsxs(Button, { type: "button", variant: "outline", children: [
+                  /* @__PURE__ */ jsx(PlusIcon, {}),
                   " Add a field"
                 ] }) })
               ]
             }
           ) })
         ] }),
-        /* @__PURE__ */ r(
-          qt,
+        /* @__PURE__ */ jsx(
+          FieldActions,
           {
-            remove: v,
-            insertAfterProps: k,
-            dragHandleProps: F.dragHandleProps,
-            editProps: w,
-            duplicateProps: C
+            remove: removeSection,
+            insertAfterProps: insertSectionProps,
+            dragHandleProps: draggableProvided.dragHandleProps,
+            editProps: editSectionProps,
+            duplicateProps: duplicateSectionProps
           }
         )
       ] })
     }
   ) });
-}), vn = (o, i) => {
-  var t;
-  const e = { ...o };
-  switch (i.type) {
+});
+const reducer = (state, action) => {
+  var _a;
+  const next = { ...state };
+  switch (action.type) {
     case "release":
-      for (const n in e)
-        e[n].disabled = !1;
-      return e;
+      for (const sectionId in next) {
+        next[sectionId].disabled = false;
+      }
+      return next;
     case "hold":
-      for (const n in e)
-        (t = e[n]) != null && t.conditionFields.has(i.fieldId) && (e[n].disabled = !0);
-      return e;
-    case "update":
-      return i.state;
-  }
-}, wn = (o, i) => {
-  if (i)
-    for (let e = 0; e < o.length; e++) {
-      const t = o[e];
-      if (t) {
-        for (const n of t.fields)
-          if (n.identifier === i)
-            return e;
+      for (const sectionId in next) {
+        if ((_a = next[sectionId]) == null ? void 0 : _a.conditionFields.has(action.fieldId)) {
+          next[sectionId].disabled = true;
+        }
       }
+      return next;
+    case "update":
+      return action.state;
+  }
+};
+const getConditionIndex = (fields, identifier) => {
+  if (!identifier)
+    return void 0;
+  for (let i = 0; i < fields.length; i++) {
+    const section = fields[i];
+    if (!section)
+      continue;
+    for (const field of section.fields) {
+      if (field.identifier === identifier)
+        return i;
     }
-}, bt = (o) => {
-  var e, t, n;
-  const i = {};
-  for (let s = 0; s < o.length; s++) {
-    const a = o[s];
-    if (!a)
+  }
+};
+const initializer = (fields) => {
+  var _a, _b, _c;
+  const acc = {};
+  for (let index = 0; index < fields.length; index++) {
+    const field = fields[index];
+    if (!field)
       throw new Error("Field is undefined.");
-    const c = s > 0 ? (e = i[o[s - 1].identifier]) == null ? void 0 : e.conditionFields : void 0, l = new Set(c);
-    (t = a.condition) != null && t.identifier && l.add(a.condition.identifier), i[a.identifier] = {
-      disabled: !1,
-      conditionFields: l,
-      conditionIndex: wn(o, (n = a.condition) == null ? void 0 : n.identifier),
-      index: s,
-      label: a.label
+    const previousConditionFields = index > 0 ? (_a = acc[fields[index - 1].identifier]) == null ? void 0 : _a.conditionFields : void 0;
+    const disabledFields = new Set(previousConditionFields);
+    if ((_b = field.condition) == null ? void 0 : _b.identifier) {
+      disabledFields.add(field.condition.identifier);
+    }
+    acc[field.identifier] = {
+      disabled: false,
+      conditionFields: disabledFields,
+      conditionIndex: getConditionIndex(fields, (_c = field.condition) == null ? void 0 : _c.identifier),
+      index,
+      label: field.label
     };
   }
-  return i;
-}, yt = (o, i) => {
-  for (const [e, t] of Object.entries(o))
-    if (t.identifier === i)
-      return [t, e];
-}, xn = S(function() {
-  const { values: i, setFieldValue: e } = me(), [t, n] = Ii(vn, i.fields, bt), { showInfo: s } = vi();
-  ve(() => {
-    n({ type: "update", state: bt(i.fields) });
-  }, [n, i.fields]);
-  const a = T((d) => {
-    d.type === "SECTION" && n({ type: "hold", fieldId: d.draggableId });
-  }, []), c = T(
-    (d) => {
-      const { source: u, destination: f, type: p, reason: h, draggableId: g } = d;
-      if (n({ type: "release" }), !f || h === "CANCEL")
+  return acc;
+};
+const findSection = (fields, sectionId) => {
+  for (const [i, section] of Object.entries(fields)) {
+    if (section.identifier === sectionId)
+      return [section, i];
+  }
+};
+const FieldsEditor = memo(function FieldsEditor2() {
+  const { values, setFieldValue } = useFormikContext();
+  const [dropState, dispatch] = useReducer(reducer, values.fields, initializer);
+  const { showInfo } = useToast();
+  useEffect(() => {
+    dispatch({ type: "update", state: initializer(values.fields) });
+  }, [dispatch, values.fields]);
+  const handleDragStart = useCallback((start) => {
+    if (start.type === "SECTION") {
+      dispatch({ type: "hold", fieldId: start.draggableId });
+    }
+  }, []);
+  const handleDragEnd = useCallback(
+    (result) => {
+      const { source, destination, type, reason, draggableId } = result;
+      dispatch({ type: "release" });
+      if (!destination || reason === "CANCEL")
         return;
-      if (p === "ROOT") {
-        const k = t[g];
-        if (!k)
+      if (type === "ROOT") {
+        const state = dropState[draggableId];
+        if (!state)
           throw new Error("Could not find section context.");
-        let A = typeof k.conditionIndex < "u" ? (
+        let dest = typeof state.conditionIndex !== "undefined" ? (
           // cannot move a section with a condition before the condition's field
-          Math.max(k.conditionIndex + 1, f.index)
-        ) : f.index;
-        for (const C of Object.values(t))
-          C.conditionIndex === u.index && (A = Math.min(A, C.index - 1));
-        return A != f.index && s({
-          title: "Reordered sections",
-          description: "Sections with conditions must be below the fields they reference."
-        }), e("fields", Ge(i.fields, u.index, A));
+          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));
       }
-      if (p !== "SECTION")
+      if (type !== "SECTION")
         throw new Error("Unexpected droppable type.");
-      const [v, z] = yt(i.fields, u.droppableId) ?? [], [I, w] = yt(i.fields, f.droppableId) ?? [];
-      if (!(v != null && v.fields) || !I)
+      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 (v.identifier === I.identifier)
-        e(
-          `fields.${z}.fields`,
-          Ge(v.fields, u.index, f.index)
+      if (sourceSection.identifier === destinationSection.identifier) {
+        setFieldValue(
+          `fields.${srcIndex}.fields`,
+          reorder(sourceSection.fields, source.index, destination.index)
         ).then();
-      else {
-        const k = v.fields[u.index];
-        if (!k)
+      } else {
+        const removed = sourceSection.fields[source.index];
+        if (!removed)
           throw new Error("Could not find field to reorder.");
-        e(`fields.${z}.fields`, Le(v.fields, u.index)).then(), e(
-          `fields.${w}.fields`,
-          Lt(I.fields, f.index, k)
+        setFieldValue(`fields.${srcIndex}.fields`, remove(sourceSection.fields, source.index)).then();
+        setFieldValue(
+          `fields.${destIndex}.fields`,
+          insert(destinationSection.fields, destination.index, removed)
         ).then();
       }
     },
-    [i.fields, e, t, s]
-  ), l = x(
+    [values.fields, setFieldValue, dropState, showInfo]
+  );
+  const makeFieldSectionProps = useMemo(
     () => ({
-      index: i.fields.length,
+      index: values.fields.length,
       parentPath: "fields",
-      initial: Ee(),
-      conditionalSourceFields: Se(i.fields, i.fields.length),
-      onComplete: () => console.log("makefieldsectionprops")
+      initial: emptySection(),
+      conditionalSourceFields: makeConditionalSourceFields(values.fields, values.fields.length)
     }),
-    [i.fields]
+    [values.fields]
   );
-  return /* @__PURE__ */ r(It, { onDragStart: a, onDragEnd: c, children: /* @__PURE__ */ r(it, { droppableId: "droppable", type: "ROOT", children: (d) => /* @__PURE__ */ b(
-    y,
+  return /* @__PURE__ */ jsx(DragDropContext, { onDragStart: handleDragStart, onDragEnd: handleDragEnd, children: /* @__PURE__ */ jsx(Droppable, { droppableId: "droppable", type: "ROOT", children: (droppableProvided) => /* @__PURE__ */ jsxs(
+    Flex,
     {
-      ref: d.innerRef,
-      ...d.droppableProps,
+      ref: droppableProvided.innerRef,
+      ...droppableProvided.droppableProps,
       direction: "column",
       gap: "0",
       children: [
-        i.fields.map((u, f) => /* @__PURE__ */ r(
-          yn,
+        values.fields.map((field, index) => /* @__PURE__ */ jsx(
+          FieldSectionWithActions,
           {
-            field: u,
-            index: f,
-            dropState: t
+            field,
+            index,
+            dropState
           },
-          u.label
+          field.label
         )),
-        d.placeholder,
-        /* @__PURE__ */ r(he, { ...l, children: /* @__PURE__ */ b(H, { type: "button", variant: "outline", children: [
-          /* @__PURE__ */ r(_e, {}),
+        droppableProvided.placeholder,
+        /* @__PURE__ */ jsx(FieldBuilder, { ...makeFieldSectionProps, children: /* @__PURE__ */ jsxs(Button, { type: "button", variant: "outline", children: [
+          /* @__PURE__ */ jsx(PlusIcon, {}),
           " Add a section"
         ] }) })
       ]
     }
   ) }) });
-}), In = {
+});
+const initialValues = {
   title: "",
   description: "",
   fields: []
-}, Cn = new be({
+};
+const title = new StringField({
   label: "Title",
   minLength: 0,
   maxLength: 100,
-  required: !0,
+  required: true,
   identifier: "title"
-}), Fn = { formId: Be, placeholder: "Give your form a title." }, Tn = new ye({
+});
+const titleProps = { formId, placeholder: "Give your form a title." };
+const description = new TextField({
   label: "Description",
   minLength: 0,
   maxLength: 1e3,
-  required: !1,
+  required: false,
   identifier: "description"
-}), Sn = { formId: Be, placeholder: "Explain the purpose of this form." }, zn = () => {
+});
+const descriptionProps = { formId, placeholder: "Explain the purpose of this form." };
+const previewSubmit = () => {
   alert("This is a form preview, your data will not be saved.");
-}, qn = S(
-  pe((o, i) => {
-    const { onCancel: e, onSave: t, revision: n } = o, s = n ? "Edit form" : "Create a new form", { heading: a = s } = o, c = T((h) => {
-      const g = {};
-      if (h.title || (g.title = "Title is required."), (!h.fields || h.fields.length === 0) && (g.fields = "At least one field is required."), De(g))
-        return g;
-    }, []), l = et({
-      initialValues: Bi(n) ?? In,
-      validate: c,
-      onSubmit: (h) => t(h),
+};
+const FormBuilder = memo(
+  forwardRef((props, ref) => {
+    const { onCancel, onSave, revision } = props;
+    const defaultHeading = revision ? "Edit form" : "Create a new form";
+    const { heading = defaultHeading } = props;
+    const validate = 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 formik = useFormik({
+      initialValues: wrapRootFieldsWithFieldSection(revision) ?? initialValues,
+      validate,
+      onSubmit: (form) => onSave(form),
       // only validate the entire for on submit
-      validateOnChange: !1,
-      validateOnBlur: !1
-    }), d = x(() => Dt(l.values), [l.values]), u = $e(Cn, Fn), f = $e(Tn, Sn), p = x(
-      () => typeof a == "object" ? a : /* @__PURE__ */ r(Me, { children: a }),
-      [a]
+      validateOnChange: false,
+      validateOnBlur: false
+    });
+    const previewSchema = useMemo(() => formRevisionToSchema(formik.values), [formik.values]);
+    const titleInput = useFieldInput(title, titleProps);
+    const descriptionInput = useFieldInput(description, descriptionProps);
+    const FormBuilderHeading = useMemo(
+      () => typeof heading === "object" ? heading : /* @__PURE__ */ jsx(Heading, { children: heading }),
+      [heading]
     );
-    return /* @__PURE__ */ r(Z.Root, { ref: i, defaultValue: "edit", children: /* @__PURE__ */ b(y, { direction: "column", gap: "2", children: [
-      /* @__PURE__ */ b(Z.List, { children: [
-        /* @__PURE__ */ r(Z.Trigger, { value: "edit", children: "Edit" }),
-        /* @__PURE__ */ r(Z.Trigger, { value: "preview", children: "Preview" })
+    return /* @__PURE__ */ jsx(Tabs.Root, { ref, defaultValue: "edit", children: /* @__PURE__ */ jsxs(Flex, { direction: "column", gap: "2", children: [
+      /* @__PURE__ */ jsxs(Tabs.List, { children: [
+        /* @__PURE__ */ jsx(Tabs.Trigger, { value: "edit", children: "Edit" }),
+        /* @__PURE__ */ jsx(Tabs.Trigger, { value: "preview", children: "Preview" })
       ] }),
-      /* @__PURE__ */ b(Z.Content, { value: "edit", children: [
-        p,
-        /* @__PURE__ */ b(V, { children: [
+      /* @__PURE__ */ jsxs(Tabs.Content, { value: "edit", children: [
+        FormBuilderHeading,
+        /* @__PURE__ */ jsxs(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",
           " ",
-          /* @__PURE__ */ r("em", { children: "Preview" }),
+          /* @__PURE__ */ jsx("em", { children: "Preview" }),
           " tab, but",
           " ",
-          /* @__PURE__ */ r("strong", { children: "field values entered on this page will not be saved." })
+          /* @__PURE__ */ jsx("strong", { children: "field values entered on this page will not be saved." })
         ] }),
-        /* @__PURE__ */ r(y, { asChild: !0, direction: "column", gap: "2", mt: "3", children: /* @__PURE__ */ b("form", { id: Be, onSubmit: l.handleSubmit, children: [
-          /* @__PURE__ */ b(tt, { value: l, children: [
-            u,
-            f,
-            /* @__PURE__ */ r(xn, {}),
-            /* @__PURE__ */ r(V, { severity: "danger", size: "1", children: typeof l.errors.fields == "string" && l.errors.fields })
+        /* @__PURE__ */ jsx(Flex, { asChild: true, direction: "column", gap: "2", mt: "3", children: /* @__PURE__ */ jsxs("form", { id: formId, onSubmit: formik.handleSubmit, children: [
+          /* @__PURE__ */ jsxs(FormikProvider, { value: formik, children: [
+            titleInput,
+            descriptionInput,
+            /* @__PURE__ */ jsx(FieldsEditor, {}),
+            /* @__PURE__ */ jsx(Text, { severity: "danger", size: "1", children: typeof formik.errors.fields === "string" && formik.errors.fields })
           ] }),
-          /* @__PURE__ */ b(y, { justify: "end", gap: "2", children: [
-            /* @__PURE__ */ r(H, { type: "button", variant: "soft", onClick: e, children: "Cancel" }),
-            /* @__PURE__ */ r(H, { type: "submit", disabled: !l.isValid, children: "Save" })
+          /* @__PURE__ */ jsxs(Flex, { justify: "end", gap: "2", children: [
+            /* @__PURE__ */ jsx(Button, { type: "button", variant: "soft", onClick: onCancel, children: "Cancel" }),
+            /* @__PURE__ */ jsx(Button, { type: "submit", disabled: !formik.isValid, children: "Save" })
           ] })
         ] }) })
       ] }),
-      /* @__PURE__ */ r(Z.Content, { value: "preview", children: /* @__PURE__ */ r(ct, { schema: d, onSubmit: zn }) })
+      /* @__PURE__ */ jsx(Tabs.Content, { value: "preview", children: /* @__PURE__ */ jsx(FormRenderer, { schema: previewSchema, onSubmit: previewSubmit }) })
     ] }) });
   })
 );
 export {
-  de as BooleanField,
-  Di as BooleanInput,
-  Ue as DateField,
-  Mi as DateInput,
-  X as FieldSection,
-  On as FormBrowser,
-  qn as FormBuilder,
-  ct as FormRenderer,
-  Rn as FormSubmissionBrowser,
-  Mn as FormSubmissionViewer,
-  ke as MultiSelectField,
-  Hi as MultiSelectInput,
-  Ae as MultiStringField,
-  Wi as MultiStringInput,
-  Q as NumberField,
-  _i as NumberInput,
-  Nn as PatchField,
-  Bn as PatchFormProvider,
-  Pe as SelectField,
-  Ni as SelectInput,
-  be as StringField,
-  Oi as StringInput,
-  ye as TextField,
-  Ri as TextInput,
-  Ne as deserialize,
-  $t as deserializeField,
-  Dt as formRevisionToSchema,
-  _t as isConditionMet,
-  $e as useFieldInput,
-  Mt as useFieldInputs,
-  Qe as valueIsFile
+  BooleanField,
+  BooleanInput,
+  DateField,
+  DateInput,
+  FieldSection,
+  FormBrowser,
+  FormBuilder,
+  FormRenderer,
+  FormSubmissionBrowser,
+  FormSubmissionViewer,
+  MultiSelectField,
+  MultiSelectInput,
+  MultiStringField,
+  MultiStringInput,
+  NumberField,
+  NumberInput$1 as NumberInput,
+  PatchField,
+  PatchFormProvider,
+  SelectField,
+  SelectInput,
+  StringField,
+  StringInput,
+  TextField,
+  TextInput,
+  deserialize,
+  deserializeField,
+  formRevisionToSchema,
+  isConditionMet,
+  useFieldInput,
+  useFieldInputs,
+  valueIsFile
 };
+//# sourceMappingURL=forms.js.map