@overmap-ai/forms 1.0.32-react-flow-david-fixes.11 → 1.0.32-react-flow-david-fixes.13

package/dist/forms.js

@@ -5,7 +5,7 @@ import { jsxs, jsx, Fragment } from "react/jsx-runtime";
 import { Card, LuIcon, Text, Spinner, ButtonGroup, Tooltip, IconButton, Separator, Input, Badge, Checkbox, CheckboxGroup, Popover, Button, DayPicker, Menu, OneTimePasswordField, RadioGroup, TextArea, useToast, stopPropagation, Heading, HoverCard, ToggleGroup } from "@overmap-ai/blocks";
 import { cx } from "class-variance-authority";
 import * as React from "react";
-import { memo, forwardRef, useMemo, createContext, useContext, useState, useRef, useCallback, useEffect, Fragment as Fragment$1, use, useLayoutEffect, useId as useId$1 } from "react";
+import { memo, forwardRef, createContext, useContext, useState, useRef, useCallback, useMemo, useEffect, Fragment as Fragment$1, use, useLayoutEffect, useId as useId$1 } from "react";
 import "@xyflow/react/dist/style.css";
 import { getBezierPath, BaseEdge, EdgeLabelRenderer, NodeToolbar, Position, Handle, MarkerType, useNodesState, useEdgesState, ReactFlow, Panel } from "@xyflow/react";
 import { useField, useFormikContext, useFormik, FormikProvider } from "formik";
@@ -19,8 +19,8 @@ import ReactDOM__default from "react-dom";
 import { saveAs } from "file-saver";
 import { DecodeHintType as DecodeHintType$2, useZxing } from "react-zxing";
 import get from "lodash.get";
-import set from "lodash.set";
 import Dagre from "@dagrejs/dagre";
+import set from "lodash.set";
 const FileCard = memo(
   forwardRef((props, ref) => {
     const { file, className, error, rightSlot, ...rest } = props;
@@ -38,6 +38,14 @@ const SEVERITY_COLOR_MAPPING = {
   info: "base",
   success: "success"
 };
+function isStringArray(value) {
+  if (!Array.isArray(value)) return false;
+  return value.every((item) => typeof item === "string");
+}
+function isFilePromiseArray(value) {
+  if (!Array.isArray(value)) return false;
+  return value.every((item) => item instanceof Promise || item instanceof File);
+}
 class Observable {
   constructor() {
     __publicField(this, "observers", /* @__PURE__ */ new Set());
@@ -99,14 +107,8 @@ class BaseField extends BaseFormElement {
     this.image = image;
     this.fieldValidators = fieldValidators;
   }
-  isBlank(value) {
-    return value === void 0;
-  }
-  isEqual(value1, value2) {
-    return value1 === value2;
-  }
   getError(value) {
-    if (this.required && this.isBlank(value)) {
+    if (this.required && this.isValueBlank(value)) {
       return "This field is required.";
     }
     for (const validator of this.getFieldValidators()) {
@@ -142,59 +144,15 @@ class BaseField extends BaseFormElement {
     this.fieldValidators = fieldValidators ?? this.fieldValidators;
     super.setOptions(base);
   }
+  isValueBlank(value) {
+    return this.areValuesEqual(value, this.blankValue());
+  }
   getFieldValidators() {
     return [...this.fieldValidators];
   }
 }
 __publicField(BaseField, "fieldTypeName");
 __publicField(BaseField, "fieldTypeDescription");
-const useFormikInput = (props) => {
-  const { field, size, showInputOnly, onValuesChange, ...rest } = props;
-  const [fieldProps, meta, helpers] = useField(field.identifier);
-  const { touched } = meta;
-  const helpText = meta.error ?? field.description;
-  const severity = meta.error ? "danger" : void 0;
-  const inputId = field.identifier;
-  const labelId = `${inputId}-label`;
-  const label = field.required ? `${field.label} *` : field.label;
-  const fieldPropsWithValidation = useMemo(() => {
-    const handleChange = (value) => {
-      helpers.setValue(value, false).then();
-      onValuesChange == null ? void 0 : onValuesChange(field.identifier, value);
-      if (touched || !field.onlyValidateAfterTouched) {
-        helpers.setError(field.getError(value));
-      }
-    };
-    const handleBlur = (value) => {
-      void helpers.setTouched(true, false).then();
-      helpers.setError(field.getError(value));
-    };
-    return {
-      ...fieldProps,
-      // name and value not being overridden
-      onChange: handleChange,
-      onBlur: handleBlur
-    };
-  }, [field, fieldProps, helpers, onValuesChange, touched]);
-  return [
-    {
-      helpText,
-      size,
-      severity,
-      inputId,
-      labelId,
-      label,
-      showInputOnly,
-      fieldProps: fieldPropsWithValidation,
-      helpers,
-      field,
-      touched
-    },
-    /* Props that should be spread on the html element representing the field */
-    { ...rest, "aria-labelledby": labelId }
-  ];
-};
-const EMPTY_ARRAY = [];
 const InputWithHelpText = (props) => {
   const { helpText, children, severity } = props;
   const color = severity ? SEVERITY_COLOR_MAPPING[severity] : "base";
@@ -2304,14 +2262,70 @@ const InputWithLabelAndHelpText = (props) => {
   const { children, ...restProps } = props;
   return /* @__PURE__ */ jsx(InputWithHelpText, { ...restProps, children });
 };
+const useFieldInput = (field, props) => {
+  return useMemo(() => {
+    if (!props || !field) return null;
+    return field.render(props);
+  }, [field, props]);
+};
+const useFieldInputs = (fields, props) => {
+  return /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-4", children: fields.map((field) => {
+    return /* @__PURE__ */ jsx(Fragment$1, { children: field.render(props) }, field.identifier);
+  }) });
+};
+const useFormikInput = (props) => {
+  const { field, size, showInputOnly, onValuesChange, ...rest } = props;
+  const [fieldProps, meta, helpers] = useField(field.identifier);
+  const { touched } = meta;
+  const helpText = meta.error ?? field.description;
+  const severity = meta.error ? "danger" : void 0;
+  const inputId = field.identifier;
+  const labelId = `${inputId}-label`;
+  const label = field.required ? `${field.label} *` : field.label;
+  const fieldPropsWithValidation = useMemo(() => {
+    const handleChange = (value) => {
+      helpers.setValue(value, false).then();
+      onValuesChange == null ? void 0 : onValuesChange(field.identifier, value);
+      if (touched || !field.onlyValidateAfterTouched) {
+        helpers.setError(field.getError(value));
+      }
+    };
+    const handleBlur = (value) => {
+      void helpers.setTouched(true, false).then();
+      helpers.setError(field.getError(value));
+    };
+    return {
+      ...fieldProps,
+      // name and value not being overridden
+      onChange: handleChange,
+      onBlur: handleBlur
+    };
+  }, [field, fieldProps, helpers, onValuesChange, touched]);
+  return [
+    {
+      helpText,
+      size,
+      severity,
+      inputId,
+      labelId,
+      label,
+      showInputOnly,
+      fieldProps: fieldPropsWithValidation,
+      helpers,
+      field,
+      touched
+    },
+    /* Props that should be spread on the html element representing the field */
+    { ...rest, "aria-labelledby": labelId }
+  ];
+};
 const MultiStringInput = memo((props) => {
   const [{ inputId, labelId, size, severity, showInputOnly, field, helpText, label, fieldProps }, rest] = useFormikInput(props);
   const computedHelpText = showInputOnly ? null : helpText;
   const computedLabel = showInputOnly ? "" : label;
-  const { name, onChange, onBlur } = fieldProps;
+  const { value, name, onChange, onBlur } = fieldProps;
   const droppableId = `${inputId}-droppable`;
   const { disabled } = rest;
-  const value = fieldProps.value ?? EMPTY_ARRAY;
   const [intermediateValue, setIntermediateValue] = useState("");
   const [internalError, setInternalError] = useState("");
   const updatedHelpText = internalError || computedHelpText;
@@ -2525,14 +2539,6 @@ const _MultiStringField = class _MultiStringField extends BaseField {
   deserializeValue(value) {
     return value;
   }
-  isBlank(value) {
-    return super.isBlank(value) || (value == null ? void 0 : value.length) === 0;
-  }
-  isEqual(value1, value2) {
-    if (value1 === void 0 && value2 === void 0) return true;
-    if (value1 === void 0 || value2 === void 0) return false;
-    return value1.every((v) => value2.includes(v)) && value2.every((v) => value1.includes(v));
-  }
   getFieldValidators() {
     const validators = super.getFieldValidators();
     validators.push((value) => {
@@ -2550,6 +2556,18 @@ const _MultiStringField = class _MultiStringField extends BaseField {
   static deserialize(data) {
     return new _MultiStringField(data);
   }
+  isSerializedValueValid(value) {
+    return isStringArray(value);
+  }
+  isValueValid(value) {
+    return isStringArray(value);
+  }
+  blankValue() {
+    return [];
+  }
+  areValuesEqual(value1, value2) {
+    return value1.every((v) => value2.includes(v)) && value2.every((v) => value1.includes(v));
+  }
 };
 __publicField(_MultiStringField, "fieldTypeName", "Multi-string");
 __publicField(_MultiStringField, "fieldTypeDescription", "Allows the user to provide multiple unique strings.");
@@ -2655,10 +2673,6 @@ const _BooleanField = class _BooleanField extends BaseField {
     __publicField(this, "type", "boolean");
     __publicField(this, "onlyValidateAfterTouched", false);
   }
-  // if a BooleanField is required, `false` is considered blank
-  isBlank(value) {
-    return this.required && !value;
-  }
   serialize() {
     return super.serialize();
   }
@@ -2687,6 +2701,18 @@ const _BooleanField = class _BooleanField extends BaseField {
   render(props) {
     return /* @__PURE__ */ jsx(BooleanInput, { ...props, field: this });
   }
+  isSerializedValueValid(value) {
+    return typeof value === "boolean";
+  }
+  isValueValid(value) {
+    return typeof value === "boolean";
+  }
+  blankValue() {
+    return false;
+  }
+  areValuesEqual(value1, value2) {
+    return value1 === value2;
+  }
 };
 __publicField(_BooleanField, "fieldTypeName", "Checkbox");
 __publicField(_BooleanField, "fieldTypeDescription", "Perfect for both optional and required yes/no questions.");
@@ -2699,14 +2725,14 @@ const NumberInput = memo((props) => {
   const { name, onBlur, onChange, value } = fieldProps;
   const computedHelpText = showInputOnly ? null : helpText;
   const computedLabel = showInputOnly ? "" : label;
-  const [internalValue, setInternalValue] = useState(void 0);
+  const [internalValue, setInternalValue] = useState(null);
   useEffect(() => {
     setInternalValue(value);
   }, [value]);
   const handleChange = useCallback(
     (e) => {
       const number = e.target.valueAsNumber;
-      const value2 = Number.isNaN(number) ? void 0 : number;
+      const value2 = !isNaN(number) ? number : null;
       setInternalValue(value2);
       if (touched || !field.onlyValidateAfterTouched) {
         helpers.setError(field.getError(value2));
@@ -2874,6 +2900,18 @@ const _NumberField = class _NumberField extends BaseField {
   render(props) {
     return /* @__PURE__ */ jsx(NumberInput, { field: this, ...props });
   }
+  isSerializedValueValid(value) {
+    return typeof value === "number" || value === null;
+  }
+  isValueValid(value) {
+    return typeof value === "number" || value === null;
+  }
+  areValuesEqual(value1, value2) {
+    return value1 === value2;
+  }
+  blankValue() {
+    return null;
+  }
 };
 __publicField(_NumberField, "fieldTypeName", "Number");
 __publicField(_NumberField, "fieldTypeDescription", "Allows specifying a number within a given range.");
@@ -2971,18 +3009,28 @@ class BaseStringField extends BaseField {
   deserializeValue(value) {
     return value;
   }
+  isSerializedValueValid(value) {
+    return typeof value === "string";
+  }
+  isValueValid(value) {
+    return typeof value === "string";
+  }
+  blankValue() {
+    return "";
+  }
+  areValuesEqual(value1, value2) {
+    return value1 === value2;
+  }
 }
 const CheckboxListInput = memo((props) => {
   const [{ inputId, labelId, size, severity, field, showInputOnly, helpText, label, fieldProps }, rest] = useFormikInput(props);
-  const { name, onChange, onBlur } = fieldProps;
+  const { value, name, onChange, onBlur } = fieldProps;
   const computedHelpText = showInputOnly ? null : helpText;
   const computedLabel = showInputOnly ? "" : label;
-  const value = fieldProps.value ?? EMPTY_ARRAY;
   const handleChange = useCallback(
     (value2) => {
-      const newValue = value2.length > 0 ? value2 : void 0;
-      onChange(newValue);
-      onBlur(newValue);
+      onChange(value2);
+      onBlur(value2);
     },
     [onBlur, onChange]
   );
@@ -3047,20 +3095,31 @@ const _CheckboxListField = class _CheckboxListField extends BaseOptionsField {
   render(props) {
     return /* @__PURE__ */ jsx(CheckboxListInput, { field: this, ...props });
   }
+  isSerializedValueValid(value) {
+    return isStringArray(value);
+  }
+  isValueValid(value) {
+    return isStringArray(value);
+  }
+  blankValue() {
+    return [];
+  }
+  areValuesEqual(value1, value2) {
+    return value1.every((v) => value2.includes(v)) && value2.every((v) => value1.includes(v));
+  }
 };
 __publicField(_CheckboxListField, "fieldTypeName", "Checkbox list");
 __publicField(_CheckboxListField, "fieldTypeDescription", "Allows the user to select a multiple options from a list.");
 let CheckboxListField = _CheckboxListField;
 const DateInput = memo((props) => {
   const [{ inputId, labelId, size, severity, showInputOnly, field, helpText, label, fieldProps }, rest] = useFormikInput(props);
-  const { name, onChange, onBlur } = fieldProps;
+  const { value, name, onChange, onBlur } = fieldProps;
   const [popoverOpen, setPopoverOpen] = useState(false);
   const computedHelpText = showInputOnly ? null : helpText;
   const computedLabel = showInputOnly ? "" : label;
-  const value = fieldProps.value ? new Date(fieldProps.value) : void 0;
   const handleValueChange = useCallback(
     (date) => {
-      onChange(date);
+      onChange(date ?? null);
       setPopoverOpen(false);
     },
     [onChange]
@@ -3109,7 +3168,7 @@ const DateInput = memo((props) => {
             required: false,
             mode: "single",
             variant: "solid",
-            selected: value,
+            selected: value ?? void 0,
             onSelect: handleValueChange
           }
         ) })
@@ -3143,34 +3202,41 @@ const _DateField = class _DateField extends BaseField {
     super.setOptions(options);
   }
   serializeValue(value) {
-    return value.toISOString();
+    return value ? value.toISOString() : null;
   }
   deserializeValue(value) {
-    return new Date(value);
-  }
-  isEqual(value1, value2) {
-    if (value1 === void 0 && value2 === void 0) return true;
-    if (!value1 || !value2) return false;
-    return value1.getTime() === value2.getTime();
+    return value ? new Date(value) : null;
   }
   render(props) {
     return /* @__PURE__ */ jsx(DateInput, { field: this, ...props });
   }
+  isSerializedValueValid(value) {
+    return typeof value === "string" || value === null;
+  }
+  isValueValid(value) {
+    return value instanceof Date || value === null;
+  }
+  blankValue() {
+    return null;
+  }
+  areValuesEqual(value1, value2) {
+    if (!value1 && !value2) return true;
+    if (!value1 || !value2) return false;
+    return value1.getTime() === value2.getTime();
+  }
 };
 __publicField(_DateField, "fieldTypeName", "Date");
 __publicField(_DateField, "fieldTypeDescription", "Allows specifying a date.");
 let DateField = _DateField;
 const MultiSelectInput = memo((props) => {
   const [{ inputId, labelId, size, severity, showInputOnly, field, helpText, label, fieldProps }, rest] = useFormikInput(props);
-  const { name, onChange, onBlur } = fieldProps;
+  const { value, name, onChange, onBlur } = fieldProps;
   const computedHelpText = showInputOnly ? null : helpText;
   const computedLabel = showInputOnly ? "" : label;
-  const value = fieldProps.value ?? EMPTY_ARRAY;
   const handleChange = useCallback(
     (value2) => {
-      const newValue = value2.length > 0 ? value2 : void 0;
-      onChange(newValue);
-      onBlur(newValue);
+      onChange(value2);
+      onBlur(value2);
     },
     [onBlur, onChange]
   );
@@ -3237,14 +3303,6 @@ const _MultiSelectField = class _MultiSelectField extends BaseOptionsField {
     __publicField(this, "placeholder");
     this.placeholder = placeholder;
   }
-  isBlank(value) {
-    return super.isBlank(value) || (value == null ? void 0 : value.length) === 0;
-  }
-  isEqual(value1, value2) {
-    if (value1 === void 0 && value2 === void 0) return true;
-    if (value1 === void 0 || value2 === void 0) return false;
-    return value1.every((v) => value2.includes(v)) && value2.every((v) => value1.includes(v));
-  }
   serialize() {
     return super.serialize();
   }
@@ -3277,6 +3335,18 @@ const _MultiSelectField = class _MultiSelectField extends BaseOptionsField {
   render(props) {
     return /* @__PURE__ */ jsx(MultiSelectInput, { field: this, ...props });
   }
+  isSerializedValueValid(value) {
+    return isStringArray(value);
+  }
+  isValueValid(value) {
+    return isStringArray(value);
+  }
+  blankValue() {
+    return [];
+  }
+  areValuesEqual(value1, value2) {
+    return value1.every((v) => value2.includes(v)) && value2.every((v) => value1.includes(v));
+  }
 };
 __publicField(_MultiSelectField, "fieldTypeName", "Multi-select");
 __publicField(_MultiSelectField, "fieldTypeDescription", "Allows the user to select a multiple options from a list of options.");
@@ -3288,8 +3358,8 @@ const SelectInput = memo((props) => {
   const computedLabel = showInputOnly ? "" : label;
   const handleChange = useCallback(
     (value2) => {
-      onChange(value2);
-      onBlur(value2);
+      onChange(value2 ?? null);
+      onBlur(value2 ?? null);
     },
     [onBlur, onChange]
   );
@@ -3372,6 +3442,18 @@ const _SelectField = class _SelectField extends BaseOptionsField {
   render(props) {
     return /* @__PURE__ */ jsx(SelectInput, { field: this, ...props });
   }
+  isSerializedValueValid(value) {
+    return typeof value === "string" || value === null;
+  }
+  isValueValid(value) {
+    return typeof value === "string" || value === null;
+  }
+  blankValue() {
+    return null;
+  }
+  areValuesEqual(value1, value2) {
+    return value1 === value2;
+  }
 };
 __publicField(_SelectField, "fieldTypeName", "Dropdown");
 __publicField(_SelectField, "fieldTypeDescription", "Allows the user to select a single option from a list of options.");
@@ -3384,16 +3466,16 @@ const OTPInput = memo((props) => {
   const { name, onBlur, onChange, value } = fieldProps;
   const computedHelpText = showInputOnly ? null : helpText;
   const computedLabel = showInputOnly ? "" : label;
-  const [internalValue, setInternalValue] = useState();
+  const [internalValue, setInternalValue] = useState("");
   const inputUuids = useMemo(() => Array.from({ length: field.length }, () => v4()), [field.length]);
   useEffect(() => {
     setInternalValue(value);
   }, [value]);
   const handleChange = useCallback(
     (value2) => {
-      setInternalValue(value2 || void 0);
+      setInternalValue(value2);
       if (touched || !field.onlyValidateAfterTouched) {
-        helpers.setError(field.getError(value2 || void 0));
+        helpers.setError(field.getError(value2));
       }
     },
     [field, helpers, touched]
@@ -3423,7 +3505,7 @@ const OTPInput = memo((props) => {
         {
           id: inputId,
           name,
-          value: internalValue ?? "",
+          value: internalValue,
           onValueChange: handleChange,
           validationType: field.validationType,
           form: formId2,
@@ -3506,7 +3588,7 @@ const _OTPField = class _OTPField extends BaseField {
     const validators = super.getFieldValidators();
     const length = this.length;
     validators.push((value) => {
-      if (typeof value === "string" && (value.length < length || value.length > length)) {
+      if (!this.isValueBlank(value) && (value.length < length || value.length > length)) {
         return `Must be ${length} characters.`;
       }
     });
@@ -3550,6 +3632,18 @@ const _OTPField = class _OTPField extends BaseField {
   render(props) {
     return /* @__PURE__ */ jsx(OTPInput, { field: this, ...props });
   }
+  isSerializedValueValid(value) {
+    return typeof value === "string";
+  }
+  isValueValid(value) {
+    return typeof value === "string";
+  }
+  blankValue() {
+    return "";
+  }
+  areValuesEqual(value1, value2) {
+    return value1 === value2;
+  }
 };
 __publicField(_OTPField, "fieldTypeName", "OTP");
 __publicField(_OTPField, "fieldTypeDescription", "Allows specifying a number within a given range.");
@@ -3561,14 +3655,14 @@ const RadioInput = memo((props) => {
   const computedLabel = showInputOnly ? "" : label;
   const handleChange = useCallback(
     (value2) => {
-      onChange(value2 ?? void 0);
-      onBlur(value2 ?? void 0);
+      onChange(value2);
+      onBlur(value2);
     },
     [onBlur, onChange]
   );
   const handleClear = useCallback(() => {
-    onChange(void 0);
-    onBlur(void 0);
+    onChange(null);
+    onBlur(null);
   }, [onBlur, onChange]);
   return /* @__PURE__ */ jsx(InputWithLabelAndHelpText, { helpText: computedHelpText, severity, children: /* @__PURE__ */ jsx(
     InputWithLabel,
@@ -3651,6 +3745,18 @@ const _RadioField = class _RadioField extends BaseOptionsField {
   render(props) {
     return /* @__PURE__ */ jsx(RadioInput, { field: this, ...props });
   }
+  isSerializedValueValid(value) {
+    return typeof value === "string" || value === "null";
+  }
+  isValueValid(value) {
+    return typeof value === "string" || value === "null";
+  }
+  blankValue() {
+    return null;
+  }
+  areValuesEqual(value1, value2) {
+    return value1 === value2;
+  }
 };
 __publicField(_RadioField, "fieldTypeName", "Option list");
 __publicField(_RadioField, "fieldTypeDescription", "Allows the user to select a single option from a list of options.");
@@ -31751,15 +31857,16 @@ const ScanInput = memo((props) => {
   const [showScanner, setShowScanner] = useState(false);
   const computedHelpText = showInputOnly ? null : helpText;
   const computedLabel = showInputOnly ? "" : label;
-  const [internalValue, setInternalValue] = useState(void 0);
+  const [internalValue, setInternalValue] = useState("");
   useEffect(() => {
     setInternalValue(value);
   }, [value]);
   const handleChange = useCallback(
     (e) => {
-      setInternalValue(e.target.value || void 0);
+      const value2 = e.target.value;
+      setInternalValue(value2);
       if (touched || !field.onlyValidateAfterTouched) {
-        helpers.setError(field.getError(e.target.value));
+        helpers.setError(field.getError(value2));
       }
     },
     [field, helpers, touched]
@@ -31804,7 +31911,7 @@ const ScanInput = memo((props) => {
             size: "sm",
             id: inputId,
             name,
-            value: internalValue ?? "",
+            value: internalValue,
             placeholder: "Enter a qr or barcode",
             onChange: handleChange,
             onBlur: handleBlur,
@@ -31909,6 +32016,18 @@ const _ScanField = class _ScanField extends BaseField {
   render(props) {
     return /* @__PURE__ */ jsx(ScanInput, { ...props, field: this });
   }
+  isSerializedValueValid(value) {
+    return typeof value === "string";
+  }
+  isValueValid(value) {
+    return typeof value === "string";
+  }
+  blankValue() {
+    return "";
+  }
+  areValuesEqual(value1, value2) {
+    return value1 === value2;
+  }
 };
 __publicField(_ScanField, "fieldTypeName", "Scan");
 __publicField(_ScanField, "fieldTypeDescription", "Used for scanning/reading QR and barcodes.");
@@ -31922,15 +32041,16 @@ const StringInput = memo((props) => {
   const { name, onBlur, onChange, value } = fieldProps;
   const computedHelpText = showInputOnly ? null : helpText;
   const computedLabel = showInputOnly ? "" : label;
-  const [internalValue, setInternalValue] = useState(void 0);
+  const [internalValue, setInternalValue] = useState("");
   useEffect(() => {
     setInternalValue(value);
   }, [value]);
   const handleChange = useCallback(
     (e) => {
-      setInternalValue(e.target.value || void 0);
+      const value2 = e.target.value;
+      setInternalValue(value2);
       if (touched || !field.onlyValidateAfterTouched) {
-        helpers.setError(field.getError(e.target.value));
+        helpers.setError(field.getError(value2));
       }
     },
     [field, helpers, touched]
@@ -31954,7 +32074,7 @@ const StringInput = memo((props) => {
           id: inputId,
           className: "truncate",
           name,
-          value: internalValue ?? "",
+          value: internalValue,
           type: "text",
           placeholder: field.placeholder,
           onChange: handleChange,
@@ -32014,15 +32134,16 @@ const TextInput = memo((props) => {
   const { name, onBlur, onChange, value } = fieldProps;
   const computedHelpText = showInputOnly ? null : helpText;
   const computedLabel = showInputOnly ? "" : label;
-  const [internalValue, setInternalValue] = useState(void 0);
+  const [internalValue, setInternalValue] = useState("");
   useEffect(() => {
     setInternalValue(value);
   }, [value]);
   const handleChange = useCallback(
     (e) => {
-      setInternalValue(e.target.value || void 0);
+      const value2 = e.target.value;
+      setInternalValue(value2);
       if (touched || !field.onlyValidateAfterTouched) {
-        helpers.setError(field.getError(e.target.value));
+        helpers.setError(field.getError(value2));
       }
     },
     [field, helpers, touched]
@@ -32044,7 +32165,7 @@ const TextInput = memo((props) => {
         TextArea,
         {
           id: inputId,
-          value: internalValue ?? "",
+          value: internalValue,
           name,
           onChange: handleChange,
           onBlur: handleBlur,
@@ -32152,11 +32273,25 @@ const convertBytesToLargestUnit = (bytes) => {
   });
   return formatter.format(sizeInUnit);
 };
+function areFilesEqual(file1, file2) {
+  return file1.name === file2.name && file1.size === file2.size && file1.type === file2.type;
+}
+function seprateFilesFromPromises(filesOrPromises) {
+  const files = [];
+  const promises = [];
+  for (const fileOrPromise of filesOrPromises) {
+    if (fileOrPromise instanceof Promise) {
+      promises.push(fileOrPromise);
+    } else {
+      files.push(fileOrPromise);
+    }
+  }
+  return [files, promises];
+}
 const UploadInput = memo((props) => {
   var _a2;
   const [{ inputId, labelId, label, size, severity, helpText, showInputOnly, field, fieldProps }, rest] = useFormikInput(props);
-  const { name, onChange, onBlur } = fieldProps;
-  const value = fieldProps.value ?? EMPTY_ARRAY;
+  const { value, name, onChange, onBlur } = fieldProps;
   const input = useRef(null);
   const updatedHelpText = useMemo(() => {
     if (showInputOnly) return null;
@@ -32186,7 +32321,7 @@ const UploadInput = memo((props) => {
     (index) => {
       const files = [...value];
       files.splice(index, 1);
-      onChange(files.length > 0 ? files : void 0);
+      onChange(files);
     },
     [value, onChange]
   );
@@ -32196,7 +32331,7 @@ const UploadInput = memo((props) => {
     input.current.addEventListener(
       "cancel",
       () => {
-        onBlur(void 0);
+        onBlur([...value]);
       },
       {
         signal: abortController.signal
@@ -32355,21 +32490,6 @@ const DisplayFile = memo((props) => {
   ) : /* @__PURE__ */ jsx(FileCard, { file: resolvedFile, error: error ?? void 0, rightSlot: rightSlotContent });
 });
 DisplayFile.displayName = "DisplayFile";
-function areFilesEqual(file1, file2) {
-  return file1.name === file2.name && file1.size === file2.size && file1.type === file2.type;
-}
-function seprateFilesFromPromises(filesOrPromises) {
-  const files = [];
-  const promises = [];
-  for (const fileOrPromise of filesOrPromises) {
-    if (fileOrPromise instanceof Promise) {
-      promises.push(fileOrPromise);
-    } else {
-      files.push(fileOrPromise);
-    }
-  }
-  return [files, promises];
-}
 const _UploadField = class _UploadField extends BaseField {
   constructor(options) {
     const { extensions, maximum_files, maximum_size, ...base } = options;
@@ -32383,20 +32503,6 @@ const _UploadField = class _UploadField extends BaseField {
     this.maxFiles = Math.max(typeof maximum_files === "number" ? maximum_files : 1, 1);
     this.extensions = extensions;
   }
-  isBlank(value) {
-    return super.isBlank(value) || (value == null ? void 0 : value.length) === 0;
-  }
-  isEqual(value1, value2) {
-    if (value1 === void 0 && value2 === void 0) return true;
-    if (value1 === void 0 || value2 === void 0) return false;
-    const [files1, promises1] = seprateFilesFromPromises(value1);
-    const [files2, promises2] = seprateFilesFromPromises(value2);
-    if (!files1.every((file1) => files2.some((file2) => areFilesEqual(file1, file2)))) return false;
-    if (!files2.every((file2) => files1.some((file1) => areFilesEqual(file1, file2)))) return false;
-    if (!promises1.every((promise1) => promises2.some((promise2) => promise1 === promise2))) return false;
-    if (!promises2.every((promise2) => promises1.some((promise1) => promise1 === promise2))) return false;
-    return true;
-  }
   static getFieldCreationSchema(parentPath = "") {
     const path = parentPath && `${parentPath}.`;
     return [
@@ -32515,6 +32621,24 @@ const _UploadField = class _UploadField extends BaseField {
   render(props) {
     return /* @__PURE__ */ jsx(UploadInput, { field: this, ...props });
   }
+  isSerializedValueValid(value) {
+    return Array.isArray(value) && value.length === 0;
+  }
+  isValueValid(value) {
+    return isFilePromiseArray(value);
+  }
+  areValuesEqual(value1, value2) {
+    const [files1, promises1] = seprateFilesFromPromises(value1);
+    const [files2, promises2] = seprateFilesFromPromises(value2);
+    if (!files1.every((file1) => files2.some((file2) => areFilesEqual(file1, file2)))) return false;
+    if (!files2.every((file2) => files1.some((file1) => areFilesEqual(file1, file2)))) return false;
+    if (!promises1.every((promise1) => promises2.some((promise2) => promise1 === promise2))) return false;
+    if (!promises2.every((promise2) => promises1.some((promise1) => promise1 === promise2))) return false;
+    return true;
+  }
+  blankValue() {
+    return [];
+  }
 };
 __publicField(_UploadField, "fieldTypeName", "Upload");
 __publicField(_UploadField, "fieldTypeDescription", "Allows a file to be uploaded.");
@@ -32553,60 +32677,6 @@ const fieldIcons = {
 const maxFileSizeMB = 50;
 const maxFileSizeKB = maxFileSizeMB * 1e3;
 const maxFileSizeB = maxFileSizeKB * 1e3;
-class BaseCondition extends Observable {
-  constructor(config) {
-    const { id, field, conditionValue, conditionModifier } = config;
-    super();
-    __publicField(this, "id");
-    __publicField(this, "conditionValue");
-    __publicField(this, "conditionModifier");
-    __publicField(this, "field");
-    __publicField(this, "getConditionValue", () => {
-      return this.conditionValue;
-    });
-    __publicField(this, "setConditionValue", (conditionValue) => {
-      const modifier = this.modifiers[this.conditionModifier];
-      if (conditionValue !== void 0 && !modifier.isConditionValueValid(conditionValue)) return;
-      this.conditionValue = conditionValue;
-      this.notify(this);
-    });
-    __publicField(this, "getConditionModifier", () => {
-      return this.conditionModifier;
-    });
-    __publicField(this, "setConditionModifier", (modifier) => {
-      const foundModifier = this.modifiers[modifier];
-      const filterValue = this.getConditionValue();
-      if (filterValue && !foundModifier.isConditionValueValid(filterValue)) {
-        this.conditionValue = void 0;
-      }
-      this.conditionModifier = modifier;
-      this.notify(this);
-    });
-    __publicField(this, "getConditionModifiers", () => {
-      return Object.entries(this.modifiers);
-    });
-    __publicField(this, "apply", (value) => {
-      const modifier = this.modifiers[this.conditionModifier];
-      const conditionValue = this.getConditionValue();
-      if (conditionValue === void 0 || !modifier.isConditionValueValid(conditionValue)) return true;
-      if (!modifier.isValueValid(value)) return false;
-      return modifier.modifier.modifierFn(value, conditionValue);
-    });
-    this.id = id;
-    this.field = field;
-    this.conditionValue = conditionValue;
-    this.conditionModifier = conditionModifier;
-  }
-  serialize() {
-    return {
-      id: this.id,
-      type: this.field.type,
-      fieldId: this.field.identifier,
-      conditionValue: this.modifiers[this.conditionModifier].modifier.serialize(this.conditionValue),
-      conditionModifier: this.conditionModifier
-    };
-  }
-}
 class ConditionModifier {
   constructor(config) {
     __publicField(this, "id");
@@ -32913,6 +32983,60 @@ const StringArrayNotEqualsConditionModifier = ConditionModifier.create({
   deserialize: (filterValue) => filterValue
 });
 const createConditionModifierConfig = (conifg) => conifg;
+class BaseCondition extends Observable {
+  constructor(config) {
+    const { id, field, conditionValue, conditionModifier } = config;
+    super();
+    __publicField(this, "id");
+    __publicField(this, "conditionValue");
+    __publicField(this, "conditionModifier");
+    __publicField(this, "field");
+    __publicField(this, "getConditionValue", () => {
+      return this.conditionValue;
+    });
+    __publicField(this, "setConditionValue", (conditionValue) => {
+      const modifier = this.modifiers[this.conditionModifier];
+      if (conditionValue !== void 0 && !modifier.isConditionValueValid(conditionValue)) return;
+      this.conditionValue = conditionValue;
+      this.notify(this);
+    });
+    __publicField(this, "getConditionModifier", () => {
+      return this.conditionModifier;
+    });
+    __publicField(this, "setConditionModifier", (modifier) => {
+      const foundModifier = this.modifiers[modifier];
+      const filterValue = this.getConditionValue();
+      if (filterValue && !foundModifier.isConditionValueValid(filterValue)) {
+        this.conditionValue = void 0;
+      }
+      this.conditionModifier = modifier;
+      this.notify(this);
+    });
+    __publicField(this, "getConditionModifiers", () => {
+      return Object.entries(this.modifiers);
+    });
+    __publicField(this, "apply", (value) => {
+      const modifier = this.modifiers[this.conditionModifier];
+      const conditionValue = this.getConditionValue();
+      if (conditionValue === void 0 || !modifier.isConditionValueValid(conditionValue)) return true;
+      if (!modifier.isValueValid(value)) return false;
+      return modifier.modifier.modifierFn(value, conditionValue);
+    });
+    this.id = id;
+    this.field = field;
+    this.conditionValue = conditionValue;
+    this.conditionModifier = conditionModifier;
+  }
+  serialize() {
+    return {
+      id: this.id,
+      type: this.field.type,
+      fieldId: this.field.identifier,
+      conditionValue: this.modifiers[this.conditionModifier].modifier.serialize(this.conditionValue),
+      conditionModifier: this.conditionModifier
+    };
+  }
+}
 const formId = "form-builder";
 const UNLABELLED_FIELD_LABEL = "Unlabelled";
 const UNLABELLED_SECTION_LABEL = "Unlabelled";
@@ -33653,19 +33777,19 @@ const NumberFieldConditionCell = (props) => {
 const modifiers$7 = {
   equals: createConditionModifierConfig({
     modifier: NumberEqualsConditionModifier,
-    isValueValid: (_value) => true,
+    isValueValid: (value) => typeof value === "number",
     isConditionValueValid: (conditionValue) => typeof conditionValue === "number",
     isSerializedValueValid: (conditionValue) => typeof conditionValue === "number"
   }),
   notEquals: createConditionModifierConfig({
     modifier: NumberNotEqualsConditionModifier,
-    isValueValid: (_value) => true,
+    isValueValid: (value) => typeof value === "number",
     isConditionValueValid: (conditionValue) => typeof conditionValue === "number",
     isSerializedValueValid: (conditionValue) => typeof conditionValue === "number"
   }),
   lessThan: createConditionModifierConfig({
     modifier: NumberLessThanConditionModifier,
-    isValueValid: (_value) => true,
+    isValueValid: (value) => typeof value === "number",
     isConditionValueValid: (conditionValue) => typeof conditionValue === "number",
     isSerializedValueValid: (conditionValue) => typeof conditionValue === "number"
   }),
@@ -33876,25 +34000,25 @@ const RadioFieldConditionCell = (props) => {
 const modifiers$5 = {
   equals: createConditionModifierConfig({
     modifier: StringEqualsConditionModifier,
-    isValueValid: (_value) => true,
+    isValueValid: (value) => typeof value === "string",
     isConditionValueValid: (conditionValue) => !Array.isArray(conditionValue),
     isSerializedValueValid: (serializedConditionValue) => !Array.isArray(serializedConditionValue)
   }),
   notEquals: createConditionModifierConfig({
     modifier: StringNotEqualsConditionModifier,
-    isValueValid: (_value) => true,
+    isValueValid: (value) => typeof value === "string",
     isConditionValueValid: (conditionValue) => !Array.isArray(conditionValue),
     isSerializedValueValid: (serializedConditionValue) => !Array.isArray(serializedConditionValue)
   }),
   includes: createConditionModifierConfig({
     modifier: StringArrayIncludesConditionModifier,
-    isValueValid: (_value) => true,
+    isValueValid: (value) => typeof value === "string",
     isConditionValueValid: (conditionValue) => Array.isArray(conditionValue),
     isSerializedValueValid: (serializedConditionValue) => Array.isArray(serializedConditionValue)
   }),
   excludes: createConditionModifierConfig({
     modifier: StringArrayExcludesConditionModifier,
-    isValueValid: (_value) => true,
+    isValueValid: (value) => typeof value === "string",
     isConditionValueValid: (conditionValue) => Array.isArray(conditionValue),
     isSerializedValueValid: (serializedConditionValue) => Array.isArray(serializedConditionValue)
   })
@@ -34075,25 +34199,25 @@ const SelectFieldConditionCell = (props) => {
 const modifiers$3 = {
   equals: createConditionModifierConfig({
     modifier: StringEqualsConditionModifier,
-    isValueValid: (_value) => true,
+    isValueValid: (value) => typeof value === "string",
     isConditionValueValid: (conditionValue) => !Array.isArray(conditionValue),
     isSerializedValueValid: (serializedConditionValue) => !Array.isArray(serializedConditionValue)
   }),
   notEquals: createConditionModifierConfig({
     modifier: StringNotEqualsConditionModifier,
-    isValueValid: (_value) => true,
+    isValueValid: (value) => typeof value === "string",
     isConditionValueValid: (conditionValue) => !Array.isArray(conditionValue),
     isSerializedValueValid: (serializedConditionValue) => !Array.isArray(serializedConditionValue)
   }),
   includes: createConditionModifierConfig({
     modifier: StringArrayIncludesConditionModifier,
-    isValueValid: (_value) => true,
+    isValueValid: (value) => typeof value === "string",
     isConditionValueValid: (conditionValue) => Array.isArray(conditionValue),
     isSerializedValueValid: (serializedConditionValue) => Array.isArray(serializedConditionValue)
   }),
   excludes: createConditionModifierConfig({
     modifier: StringArrayExcludesConditionModifier,
-    isValueValid: (_value) => true,
+    isValueValid: (value) => typeof value === "string",
     isConditionValueValid: (conditionValue) => Array.isArray(conditionValue),
     isSerializedValueValid: (serializedConditionValue) => Array.isArray(serializedConditionValue)
   })
@@ -34416,15 +34540,15 @@ const deserializeField = (serializedField) => {
       return OTPField.deserialize(serializedField);
   }
 };
+function deserializeFields(fields) {
+  return fields.map(deserialize);
+}
 const deserialize = (serialized) => {
   if (serialized.type === "section") {
     return FieldSection.deserialize(serialized);
   }
   return deserializeField(serialized);
 };
-function deserializeFields(fields) {
-  return fields.map(deserialize);
-}
 function deserializeOnlyFields(fields) {
   return fields.map(deserializeField);
 }
@@ -34450,33 +34574,44 @@ function getFieldsMapping(fields) {
   return result;
 }
 function serializeFieldValues(fields, values) {
+  const cleanValues = cleanFieldValues(fields, values);
   const ret = {};
   for (const field of fields) {
-    const value = values[field.identifier];
+    const value = cleanValues[field.identifier];
+    if (!field.isValueValid(value)) continue;
     ret[field.identifier] = field.serializeValue(value);
   }
   return ret;
 }
 function deserializeFieldValues(fields, values) {
+  const cleanValues = cleanSerializedFieldValues(fields, values);
   const ret = {};
   for (const field of fields) {
-    const value = values[field.identifier];
+    const value = cleanValues[field.identifier];
+    if (!field.isSerializedValueValid(value)) continue;
     ret[field.identifier] = field.deserializeValue(value);
   }
   return ret;
 }
+function cleanFieldValues(fields, values) {
+  const ret = {};
+  for (const field of fields) {
+    const value = values[field.identifier];
+    if (!field.isSerializedValueValid(value)) continue;
+    ret[field.identifier] = value;
+  }
+  return ret;
+}
+function cleanSerializedFieldValues(fields, values) {
+  const ret = {};
+  for (const field of fields) {
+    const value = values[field.identifier];
+    if (!field.isSerializedValueValid(value)) continue;
+    ret[field.identifier] = value;
+  }
+  return ret;
+}
 const RendererContext = createContext({});
-const useFieldInput = (field, props) => {
-  return useMemo(() => {
-    if (!props || !field) return null;
-    return field.render(props);
-  }, [field, props]);
-};
-const useFieldInputs = (fields, props) => {
-  return /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-4", children: fields.map((field) => {
-    return /* @__PURE__ */ jsx(Fragment$1, { children: field.render(props) }, field.identifier);
-  }) });
-};
 const FieldSectionLayout = memo((props) => {
   const { fieldSection: section, ...rest } = props;
   const { label, description } = section;
@@ -34583,13 +34718,12 @@ const _FieldSection = class _FieldSection extends BaseFormElement {
     this.conditions = conditions || this.conditions;
     super.setOptions(base);
   }
-  getErrors(allValues) {
+  getErrors(values) {
     const errors = {};
     for (const field of this.fields) {
-      const id = field.identifier;
-      const error = field.getError(get(allValues, id));
+      const error = field.getError(values[field.identifier]);
       if (error) {
-        set(errors, field.identifier, error);
+        errors[field.identifier] = error;
       }
     }
     return errors;
@@ -34744,124 +34878,6 @@ class FieldSchema extends Observable {
 }
 const FieldSchemaContext = createContext(new FieldSchema([]));
 const FormBuilderContext = createContext({});
-const hasKeys = (errors) => {
-  return Object.keys(errors).length > 0;
-};
-const validateFields = (fields, values) => {
-  const errors = {};
-  const sectionElements = fields.filter((f) => f instanceof FieldSection);
-  for (const field of fields) {
-    if (field instanceof FieldSection) {
-      const conditionalSections = sectionElements.filter((section) => field.identifier in section.conditions);
-      const conditionMet = conditionalSections.length > 0 ? conditionalSections.some(
-        (conditionalSection) => applyConditions(conditionalSection.getConditions(field.identifier), values)
-      ) : true;
-      if (!conditionMet) continue;
-      Object.assign(errors, field.getErrors(values));
-    } else {
-      if (!(field instanceof BaseField)) {
-        throw new Error("Invalid field type");
-      }
-      const id = field.identifier;
-      const error = field.getError(get(values, id));
-      if (error) set(errors, id, error);
-    }
-  }
-  if (hasKeys(errors)) return errors;
-};
-const initializeFieldValues = (fields, values) => {
-  return fields.reduce((acc, field) => {
-    if (field instanceof FieldSection) {
-      return { ...acc, ...initializeFieldValues(field.fields, values) };
-    }
-    const identifier = field.identifier;
-    const value = acc[identifier];
-    switch (value) {
-      case "":
-        acc[identifier] = void 0;
-        break;
-      case []:
-        acc[identifier] = void 0;
-        break;
-      default:
-        acc[identifier] = value ?? void 0;
-    }
-    return acc;
-  }, values);
-};
-const changedFieldValues = (fields, values1, values2) => {
-  return fields.reduce((acc, field) => {
-    if (field instanceof FieldSection) {
-      return { ...acc, ...changedFieldValues(field.fields, values1, values2) };
-    }
-    if (field instanceof BaseField) {
-      const identifier = field.identifier;
-      const value1 = values1[identifier];
-      const value2 = values2[identifier];
-      if (!field.isEqual(value1, value2)) {
-        acc[identifier] = value2;
-      }
-    }
-    return acc;
-  }, {});
-};
-const isArrayOfFiles = (value) => {
-  return Array.isArray(value) && value[0] instanceof File;
-};
-const separateFilesFromFieldValues = (values) => {
-  const files = {};
-  const newValues = {};
-  for (const key in values) {
-    const value = values[key];
-    if (value instanceof File) {
-      files[key] = [value];
-    } else if (isArrayOfFiles(value)) {
-      files[key] = value;
-    } else if (value !== void 0) {
-      newValues[key] = value;
-    }
-  }
-  return { values: newValues, files };
-};
-const separateFilesFromFields = async (fields) => {
-  const images = {};
-  const newFields = [];
-  for (const section of fields) {
-    if (section.type !== "section") {
-      throw new Error(`Expected ISerializedField type to be a section. Got ${section.type} instead.`);
-    }
-    const { fields: sectionFields } = section;
-    const newSectionFields = [];
-    for (const field of sectionFields) {
-      if (field.image) {
-        if (field.image instanceof Promise) {
-          try {
-            images[field.identifier] = await field.image;
-          } catch (e) {
-            console.error("Failed to get image from promise", e);
-          }
-        } else {
-          images[field.identifier] = field.image;
-        }
-        delete field.image;
-      }
-      newSectionFields.push(field);
-    }
-    newFields.push({ ...section, fields: newSectionFields });
-  }
-  return { fields: newFields, images };
-};
-async function awaitPromisesFromFieldValues(values) {
-  const valuesWithoutFiles = {};
-  for (const [key, value] of Object.entries(values)) {
-    if (Array.isArray(value) && value.every((item) => item instanceof Promise)) {
-      valuesWithoutFiles[key] = await Promise.all(value);
-    } else {
-      valuesWithoutFiles[key] = value;
-    }
-  }
-  return valuesWithoutFiles;
-}
 const createField = (type) => {
   switch (type) {
     case "text":
@@ -35134,7 +35150,7 @@ const FieldBuilder = memo((props) => {
   const showPopoverInputs = popoverFields.length > 0;
   const popoverHasErrors = popoverFields.some((field2) => {
     const error = get(errors, field2.identifier);
-    return error && (typeof error !== "object" || hasKeys(error));
+    return error && (typeof error !== "object" || Object.values(error).length > 0);
   });
   const previewInput = useFieldInput(field, { formId, showInputOnly: false });
   const handleFieldImageClick = useCallback(() => {
@@ -35238,45 +35254,6 @@ const FieldDropdownMenu = memo((props) => {
   ] });
 });
 FieldDropdownMenu.displayName = "IssueDataFilterMenu";
-const FieldSectionConditionalItem = memo((props) => {
-  const { sourceFieldSection, targetFieldSection } = props;
-  const conditions = useMemo(() => {
-    return sourceFieldSection.getConditions(targetFieldSection.identifier);
-  }, [sourceFieldSection, targetFieldSection.identifier]);
-  const handleDelete = useCallback(() => {
-    sourceFieldSection.removeConditional(targetFieldSection.identifier);
-  }, [sourceFieldSection, targetFieldSection.identifier]);
-  const handleSelectField = useCallback(
-    (field) => {
-      sourceFieldSection.addCondition(targetFieldSection.identifier, createCondition(field));
-    },
-    [sourceFieldSection, targetFieldSection.identifier]
-  );
-  const handleDeleteCondition = useCallback(
-    (condition) => {
-      sourceFieldSection.removeCondition(targetFieldSection.identifier, condition);
-    },
-    [sourceFieldSection, targetFieldSection.identifier]
-  );
-  return /* @__PURE__ */ jsxs(Card, { className: "flex flex-col gap-2", children: [
-    /* @__PURE__ */ jsxs(ButtonGroup, { className: "justify-between gap-2 flex", size: "sm", accentColor: "base", variant: "soft", children: [
-      /* @__PURE__ */ jsxs(Badge, { accentColor: "base", variant: "soft", size: "sm", children: [
-        /* @__PURE__ */ jsx(LuIcon, { icon: fieldIcons.section }),
-        sourceFieldSection.label ?? UNLABELLED_SECTION_LABEL
-      ] }),
-      /* @__PURE__ */ jsx(IconButton, { type: "button", onClick: handleDelete, variant: "ghost", children: /* @__PURE__ */ jsx(LuIcon, { icon: "trash" }) })
-    ] }),
-    /* @__PURE__ */ jsxs("div", { className: "flex h-max w-full flex-wrap gap-2", children: [
-      conditions.map((condition) => {
-        return condition.render({
-          onRemove: handleDeleteCondition
-        });
-      }),
-      /* @__PURE__ */ jsx(FieldDropdownMenu, { fields: sourceFieldSection.fields, onSelectField: handleSelectField, align: "start", children: /* @__PURE__ */ jsx(IconButton, { type: "button", size: "sm", variant: "soft", accentColor: "base", children: /* @__PURE__ */ jsx(LuIcon, { icon: "plus" }) }) })
-    ] })
-  ] });
-});
-FieldSectionConditionalItem.displayName = "FieldSectionConditionalItem";
 const FieldSectionDropdownMenu = memo((props) => {
   const { children, variant, size, accentColor, fieldSections, onSelectFieldCondition, ...rest } = props;
   return /* @__PURE__ */ jsxs(Menu.Root, { ...rest, children: [
@@ -35290,169 +35267,6 @@ const FieldSectionDropdownMenu = memo((props) => {
   ] });
 });
 FieldSectionDropdownMenu.displayName = "IssueDataFilterMenu";
-const FieldSectionBuilder = memo((props) => {
-  const { fieldSection } = props;
-  const fieldSchema = use(FieldSchemaContext);
-  const conditionalSections = useMemo(() => {
-    return fieldSchema.fields.filter((section) => fieldSection.identifier in section.conditions);
-  }, [fieldSchema.fields, fieldSection.identifier]);
-  const handleAddConditional = useCallback(
-    (conditionalSection) => {
-      conditionalSection.addConditional(fieldSection.identifier);
-    },
-    [fieldSection.identifier]
-  );
-  const validFieldSections = useMemo(() => {
-    const graph = new DirectedGraph({});
-    for (const sourceSection of fieldSchema.fields) {
-      for (const targetSectionId of Object.keys(sourceSection.conditions)) {
-        graph.mergeEdge(sourceSection.identifier, targetSectionId);
-      }
-    }
-    return fieldSchema.fields.filter(
-      (sourceSection) => !willCreateCycle(graph, sourceSection.identifier, fieldSection.identifier)
-    );
-  }, [fieldSchema.fields, fieldSection.identifier]);
-  return /* @__PURE__ */ jsxs("div", { className: "flex grow w-full flex-col gap-4", children: [
-    /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-2 w-full overflow-hidden", children: [
-      /* @__PURE__ */ jsx(Input.Root, { variant: "outline", size: "md", children: /* @__PURE__ */ jsx(
-        Input.Field,
-        {
-          placeholder: "Enter a section label (optional)",
-          value: fieldSection.label ?? "",
-          onChange: (event) => fieldSection.setOptions({ label: event.target.value }),
-          maxLength: 200
-        }
-      ) }),
-      /* @__PURE__ */ jsx(
-        TextArea,
-        {
-          className: "field-sizing-content",
-          placeholder: "Enter a section description (optional)",
-          value: fieldSection.description ?? "",
-          onChange: (event) => fieldSection.setOptions({ description: event.target.value }),
-          maxLength: 1e3,
-          resize: "vertical",
-          size: "md"
-        }
-      )
-    ] }),
-    /* @__PURE__ */ jsx(Separator, { size: "full" }),
-    /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-2", children: [
-      /* @__PURE__ */ jsxs("div", { className: "flex  gap-2 justify-between", children: [
-        /* @__PURE__ */ jsx(Text, { accentColor: "base", children: "Conditions" }),
-        /* @__PURE__ */ jsx(
-          FieldSectionDropdownMenu,
-          {
-            fieldSections: validFieldSections,
-            onSelectFieldCondition: handleAddConditional,
-            children: /* @__PURE__ */ jsxs(Button, { type: "button", variant: "soft", size: "sm", className: "w-max", children: [
-              /* @__PURE__ */ jsx(LuIcon, { icon: "plus" }),
-              "Add condition"
-            ] })
-          }
-        )
-      ] }),
-      conditionalSections.map((section) => /* @__PURE__ */ jsx(
-        FieldSectionConditionalItem,
-        {
-          sourceFieldSection: section,
-          targetFieldSection: fieldSection
-        },
-        section.identifier
-      ))
-    ] }),
-    /* @__PURE__ */ jsx(Separator, { size: "full" })
-  ] });
-});
-FieldSectionBuilder.displayName = "FieldSectionBuilder";
-const useFieldTypeItems = (onSelect = () => null) => {
-  return useMemo(() => {
-    const entries = Object.entries(FieldTypeToClsMapping);
-    return entries.map(([type, fieldClass]) => ({
-      children: fieldClass.fieldTypeName,
-      icon: /* @__PURE__ */ jsx(LuIcon, { icon: fieldIcons[type] }),
-      value: type,
-      onSelect: () => {
-        onSelect(type);
-      }
-    }));
-  }, [onSelect]);
-};
-const FieldSectionWithActions = memo((props) => {
-  const { fieldSection, index: sectionIndex } = props;
-  const fieldSchema = use(FieldSchemaContext);
-  const removeField = useCallback(
-    (field) => {
-      fieldSection.removeField(field);
-    },
-    [fieldSection]
-  );
-  const removeSection = useCallback(() => {
-    fieldSchema.removeField(fieldSection);
-  }, [fieldSchema, fieldSection]);
-  const moveSection = useCallback(
-    (direction) => {
-      const targetIndex = direction === "up" ? sectionIndex - 1 : sectionIndex + 1;
-      fieldSchema.moveField(sectionIndex, targetIndex);
-    },
-    [fieldSchema, sectionIndex]
-  );
-  const duplicateSection = useCallback(() => {
-    fieldSchema.addField(fieldSection.duplicate(v4()));
-  }, [fieldSchema, fieldSection]);
-  const handleCreateField = useCallback(
-    (type) => {
-      fieldSection.addField(createField(type));
-    },
-    [fieldSection]
-  );
-  const handleMoveUp = useCallback(() => {
-    moveSection("up");
-  }, [moveSection]);
-  const handleMoveDown = useCallback(() => {
-    moveSection("down");
-  }, [moveSection]);
-  const fieldTypeItems = useFieldTypeItems(handleCreateField);
-  return /* @__PURE__ */ jsxs(Card, { variant: "outline", className: "flex items-center justify-between gap-4 w-full", children: [
-    /* @__PURE__ */ jsxs("div", { className: "flex grow flex-col gap-4 w-full", children: [
-      /* @__PURE__ */ jsx(FieldSectionBuilder, { fieldSection }),
-      /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-2 w-full", children: [
-        /* @__PURE__ */ jsxs("div", { className: "flex gap-2 justify-between", children: [
-          /* @__PURE__ */ jsx(Text, { accentColor: "base", size: "md", children: "Fields" }),
-          /* @__PURE__ */ jsxs(Menu.Root, { children: [
-            /* @__PURE__ */ jsx(Menu.ClickTrigger, { children: /* @__PURE__ */ jsxs(Button, { type: "button", variant: "soft", size: "sm", children: [
-              /* @__PURE__ */ jsx(LuIcon, { icon: "plus" }),
-              " Add field"
-            ] }) }),
-            /* @__PURE__ */ jsx(Menu.Content, { children: /* @__PURE__ */ jsx(Menu.Scroll, { children: fieldTypeItems.flat().map((item) => /* @__PURE__ */ jsxs(Menu.Item, { onSelect: item.onSelect, children: [
-              item.icon,
-              item.children
-            ] }, item.value)) }) })
-          ] })
-        ] }),
-        fieldSection.fields.map((child, index) => /* @__PURE__ */ jsx(
-          FieldWithActions,
-          {
-            field: child,
-            fieldSection,
-            index,
-            sectionIndex,
-            remove: removeField
-          },
-          child.identifier
-        ))
-      ] })
-    ] }),
-    /* @__PURE__ */ jsxs(ButtonGroup, { className: "flex-col gap-0.5 flex", variant: "ghost", accentColor: "base", size: "sm", children: [
-      /* @__PURE__ */ jsx(IconButton, { type: "button", onClick: handleMoveUp, children: /* @__PURE__ */ jsx(LuIcon, { icon: "move-up" }) }),
-      /* @__PURE__ */ jsx(IconButton, { type: "button", onClick: handleMoveDown, children: /* @__PURE__ */ jsx(LuIcon, { icon: "move-down" }) }),
-      /* @__PURE__ */ jsx(IconButton, { type: "button", onClick: duplicateSection, children: /* @__PURE__ */ jsx(LuIcon, { icon: "copy" }) }),
-      /* @__PURE__ */ jsx(IconButton, { type: "button", onClick: removeSection, children: /* @__PURE__ */ jsx(LuIcon, { icon: "trash" }) })
-    ] })
-  ] });
-});
-FieldSectionWithActions.displayName = "FieldSectionWithActions";
 const FieldWithActions = memo((props) => {
   const { field, fieldSection, index, sectionIndex, remove } = props;
   const { showError } = useToast();
@@ -35594,6 +35408,19 @@ const FieldSectionConditionEdgeComponent = memo((props) => {
   ] });
 });
 FieldSectionConditionEdgeComponent.displayName = "FieldSectionConditionEdgeComponent";
+const useFieldTypeItems = (onSelect = () => null) => {
+  return useMemo(() => {
+    const entries = Object.entries(FieldTypeToClsMapping);
+    return entries.map(([type, fieldClass]) => ({
+      children: fieldClass.fieldTypeName,
+      icon: /* @__PURE__ */ jsx(LuIcon, { icon: fieldIcons[type] }),
+      value: type,
+      onSelect: () => {
+        onSelect(type);
+      }
+    }));
+  }, [onSelect]);
+};
 const FieldSectionNodeComponent = memo((props) => {
   const { data, selected } = props;
   const { fieldSection, index: sectionIndex, layoutDirection } = data;
@@ -35940,6 +35767,195 @@ const FormBuilderFlowBuilder = memo(() => {
   ] });
 });
 FormBuilderFlowBuilder.displayName = "FormBuilderFlowBuilder";
+const FieldSectionConditionalItem = memo((props) => {
+  const { sourceFieldSection, targetFieldSection } = props;
+  const conditions = useMemo(() => {
+    return sourceFieldSection.getConditions(targetFieldSection.identifier);
+  }, [sourceFieldSection, targetFieldSection.identifier]);
+  const handleDelete = useCallback(() => {
+    sourceFieldSection.removeConditional(targetFieldSection.identifier);
+  }, [sourceFieldSection, targetFieldSection.identifier]);
+  const handleSelectField = useCallback(
+    (field) => {
+      sourceFieldSection.addCondition(targetFieldSection.identifier, createCondition(field));
+    },
+    [sourceFieldSection, targetFieldSection.identifier]
+  );
+  const handleDeleteCondition = useCallback(
+    (condition) => {
+      sourceFieldSection.removeCondition(targetFieldSection.identifier, condition);
+    },
+    [sourceFieldSection, targetFieldSection.identifier]
+  );
+  return /* @__PURE__ */ jsxs(Card, { className: "flex flex-col gap-2", children: [
+    /* @__PURE__ */ jsxs(ButtonGroup, { className: "justify-between gap-2 flex", size: "sm", accentColor: "base", variant: "soft", children: [
+      /* @__PURE__ */ jsxs(Badge, { accentColor: "base", variant: "soft", size: "sm", children: [
+        /* @__PURE__ */ jsx(LuIcon, { icon: fieldIcons.section }),
+        sourceFieldSection.label ?? UNLABELLED_SECTION_LABEL
+      ] }),
+      /* @__PURE__ */ jsx(IconButton, { type: "button", onClick: handleDelete, variant: "ghost", children: /* @__PURE__ */ jsx(LuIcon, { icon: "trash" }) })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "flex h-max w-full flex-wrap gap-2", children: [
+      conditions.map((condition) => {
+        return condition.render({
+          onRemove: handleDeleteCondition
+        });
+      }),
+      /* @__PURE__ */ jsx(FieldDropdownMenu, { fields: sourceFieldSection.fields, onSelectField: handleSelectField, align: "start", children: /* @__PURE__ */ jsx(IconButton, { type: "button", size: "sm", variant: "soft", accentColor: "base", children: /* @__PURE__ */ jsx(LuIcon, { icon: "plus" }) }) })
+    ] })
+  ] });
+});
+FieldSectionConditionalItem.displayName = "FieldSectionConditionalItem";
+const FieldSectionBuilder = memo((props) => {
+  const { fieldSection } = props;
+  const fieldSchema = use(FieldSchemaContext);
+  const conditionalSections = useMemo(() => {
+    return fieldSchema.fields.filter((section) => fieldSection.identifier in section.conditions);
+  }, [fieldSchema.fields, fieldSection.identifier]);
+  const handleAddConditional = useCallback(
+    (conditionalSection) => {
+      conditionalSection.addConditional(fieldSection.identifier);
+    },
+    [fieldSection.identifier]
+  );
+  const validFieldSections = useMemo(() => {
+    const graph = new DirectedGraph({});
+    for (const sourceSection of fieldSchema.fields) {
+      for (const targetSectionId of Object.keys(sourceSection.conditions)) {
+        graph.mergeEdge(sourceSection.identifier, targetSectionId);
+      }
+    }
+    return fieldSchema.fields.filter(
+      (sourceSection) => !willCreateCycle(graph, sourceSection.identifier, fieldSection.identifier)
+    );
+  }, [fieldSchema.fields, fieldSection.identifier]);
+  return /* @__PURE__ */ jsxs("div", { className: "flex grow w-full flex-col gap-4", children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-2 w-full overflow-hidden", children: [
+      /* @__PURE__ */ jsx(Input.Root, { variant: "outline", size: "md", children: /* @__PURE__ */ jsx(
+        Input.Field,
+        {
+          placeholder: "Enter a section label (optional)",
+          value: fieldSection.label ?? "",
+          onChange: (event) => fieldSection.setOptions({ label: event.target.value }),
+          maxLength: 200
+        }
+      ) }),
+      /* @__PURE__ */ jsx(
+        TextArea,
+        {
+          className: "field-sizing-content",
+          placeholder: "Enter a section description (optional)",
+          value: fieldSection.description ?? "",
+          onChange: (event) => fieldSection.setOptions({ description: event.target.value }),
+          maxLength: 1e3,
+          resize: "vertical",
+          size: "md"
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsx(Separator, { size: "full" }),
+    /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-2", children: [
+      /* @__PURE__ */ jsxs("div", { className: "flex  gap-2 justify-between", children: [
+        /* @__PURE__ */ jsx(Text, { accentColor: "base", children: "Conditions" }),
+        /* @__PURE__ */ jsx(
+          FieldSectionDropdownMenu,
+          {
+            fieldSections: validFieldSections,
+            onSelectFieldCondition: handleAddConditional,
+            children: /* @__PURE__ */ jsxs(Button, { type: "button", variant: "soft", size: "sm", className: "w-max", children: [
+              /* @__PURE__ */ jsx(LuIcon, { icon: "plus" }),
+              "Add condition"
+            ] })
+          }
+        )
+      ] }),
+      conditionalSections.map((section) => /* @__PURE__ */ jsx(
+        FieldSectionConditionalItem,
+        {
+          sourceFieldSection: section,
+          targetFieldSection: fieldSection
+        },
+        section.identifier
+      ))
+    ] }),
+    /* @__PURE__ */ jsx(Separator, { size: "full" })
+  ] });
+});
+FieldSectionBuilder.displayName = "FieldSectionBuilder";
+const FieldSectionWithActions = memo((props) => {
+  const { fieldSection, index: sectionIndex } = props;
+  const fieldSchema = use(FieldSchemaContext);
+  const removeField = useCallback(
+    (field) => {
+      fieldSection.removeField(field);
+    },
+    [fieldSection]
+  );
+  const removeSection = useCallback(() => {
+    fieldSchema.removeField(fieldSection);
+  }, [fieldSchema, fieldSection]);
+  const moveSection = useCallback(
+    (direction) => {
+      const targetIndex = direction === "up" ? sectionIndex - 1 : sectionIndex + 1;
+      fieldSchema.moveField(sectionIndex, targetIndex);
+    },
+    [fieldSchema, sectionIndex]
+  );
+  const duplicateSection = useCallback(() => {
+    fieldSchema.addField(fieldSection.duplicate(v4()));
+  }, [fieldSchema, fieldSection]);
+  const handleCreateField = useCallback(
+    (type) => {
+      fieldSection.addField(createField(type));
+    },
+    [fieldSection]
+  );
+  const handleMoveUp = useCallback(() => {
+    moveSection("up");
+  }, [moveSection]);
+  const handleMoveDown = useCallback(() => {
+    moveSection("down");
+  }, [moveSection]);
+  const fieldTypeItems = useFieldTypeItems(handleCreateField);
+  return /* @__PURE__ */ jsxs(Card, { variant: "outline", className: "flex items-center justify-between gap-4 w-full", children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex grow flex-col gap-4 w-full", children: [
+      /* @__PURE__ */ jsx(FieldSectionBuilder, { fieldSection }),
+      /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-2 w-full", children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex gap-2 justify-between", children: [
+          /* @__PURE__ */ jsx(Text, { accentColor: "base", size: "md", children: "Fields" }),
+          /* @__PURE__ */ jsxs(Menu.Root, { children: [
+            /* @__PURE__ */ jsx(Menu.ClickTrigger, { children: /* @__PURE__ */ jsxs(Button, { type: "button", variant: "soft", size: "sm", children: [
+              /* @__PURE__ */ jsx(LuIcon, { icon: "plus" }),
+              " Add field"
+            ] }) }),
+            /* @__PURE__ */ jsx(Menu.Content, { children: /* @__PURE__ */ jsx(Menu.Scroll, { children: fieldTypeItems.flat().map((item) => /* @__PURE__ */ jsxs(Menu.Item, { onSelect: item.onSelect, children: [
+              item.icon,
+              item.children
+            ] }, item.value)) }) })
+          ] })
+        ] }),
+        fieldSection.fields.map((child, index) => /* @__PURE__ */ jsx(
+          FieldWithActions,
+          {
+            field: child,
+            fieldSection,
+            index,
+            sectionIndex,
+            remove: removeField
+          },
+          child.identifier
+        ))
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxs(ButtonGroup, { className: "flex-col gap-0.5 flex", variant: "ghost", accentColor: "base", size: "sm", children: [
+      /* @__PURE__ */ jsx(IconButton, { type: "button", onClick: handleMoveUp, children: /* @__PURE__ */ jsx(LuIcon, { icon: "move-up" }) }),
+      /* @__PURE__ */ jsx(IconButton, { type: "button", onClick: handleMoveDown, children: /* @__PURE__ */ jsx(LuIcon, { icon: "move-down" }) }),
+      /* @__PURE__ */ jsx(IconButton, { type: "button", onClick: duplicateSection, children: /* @__PURE__ */ jsx(LuIcon, { icon: "copy" }) }),
+      /* @__PURE__ */ jsx(IconButton, { type: "button", onClick: removeSection, children: /* @__PURE__ */ jsx(LuIcon, { icon: "trash" }) })
+    ] })
+  ] });
+});
+FieldSectionWithActions.displayName = "FieldSectionWithActions";
 const FormBuilderListBuilder = memo(() => {
   const { handleSubmit, errors } = useFormikContext();
   const { hideTitle, hideDescription, onCancel } = use(FormBuilderContext);
@@ -36009,6 +36025,113 @@ const FormBuilderListBuilder = memo(() => {
   ] });
 });
 FormBuilderListBuilder.displayName = "FormBuilderListBuilder";
+const validateFields = (fields, values) => {
+  const errors = {};
+  const sectionElements = fields.filter((f) => f instanceof FieldSection);
+  for (const field of fields) {
+    if (field instanceof FieldSection) {
+      const conditionalSections = sectionElements.filter((section) => field.identifier in section.conditions);
+      const conditionMet = conditionalSections.length > 0 ? conditionalSections.some(
+        (conditionalSection) => applyConditions(conditionalSection.getConditions(field.identifier), values)
+      ) : true;
+      if (!conditionMet) continue;
+      Object.assign(errors, field.getErrors(values));
+    } else {
+      if (!(field instanceof BaseField)) {
+        throw new Error("Invalid field type");
+      }
+      const id = field.identifier;
+      const error = field.getError(get(values, id));
+      if (error) set(errors, id, error);
+    }
+  }
+  if (Object.keys(errors).length > 0) return errors;
+};
+const initializeFieldValues = (fields, values) => {
+  const ret = {};
+  for (const field of fields) {
+    const value = values[field.identifier];
+    ret[field.identifier] = value !== void 0 ? value : field.blankValue();
+  }
+  return ret;
+};
+const changedFieldValues = (fields, values1, values2) => {
+  const ret = {};
+  for (const field of fields) {
+    const value1 = values1[field.identifier];
+    const value2 = values2[field.identifier];
+    if (field.areValuesEqual(value1, value2)) continue;
+    ret[field.identifier] = value2;
+  }
+  return ret;
+};
+const unchangedFieldValues = (fields, values1, values2) => {
+  const ret = {};
+  for (const field of fields) {
+    const value1 = values1[field.identifier];
+    const value2 = values2[field.identifier];
+    if (!field.areValuesEqual(value1, value2)) continue;
+    ret[field.identifier] = value2;
+  }
+  return ret;
+};
+const isArrayOfFiles = (value) => {
+  return Array.isArray(value) && value[0] instanceof File;
+};
+const separateFilesFromFieldValues = (values) => {
+  const files = {};
+  const newValues = {};
+  for (const key in values) {
+    const value = values[key];
+    if (value instanceof File) {
+      files[key] = [value];
+    } else if (isArrayOfFiles(value)) {
+      files[key] = value;
+    } else if (value !== void 0) {
+      newValues[key] = value;
+    }
+  }
+  return { values: newValues, files };
+};
+const separateFilesFromFields = async (fields) => {
+  const images = {};
+  const newFields = [];
+  for (const section of fields) {
+    if (section.type !== "section") {
+      throw new Error(`Expected ISerializedField type to be a section. Got ${section.type} instead.`);
+    }
+    const { fields: sectionFields } = section;
+    const newSectionFields = [];
+    for (const field of sectionFields) {
+      if (field.image) {
+        if (field.image instanceof Promise) {
+          try {
+            images[field.identifier] = await field.image;
+          } catch (e) {
+            console.error("Failed to get image from promise", e);
+          }
+        } else {
+          images[field.identifier] = field.image;
+        }
+        delete field.image;
+      }
+      newSectionFields.push(field);
+    }
+    newFields.push({ ...section, fields: newSectionFields });
+  }
+  return { fields: newFields, images };
+};
+async function awaitPromisesFromFieldValues(values) {
+  const valuesWithoutFiles = {};
+  for (const [key, value] of Object.entries(values)) {
+    if (Array.isArray(value) && value.every((item) => item instanceof Promise)) {
+      valuesWithoutFiles[key] = await Promise.all(value);
+    } else {
+      valuesWithoutFiles[key] = value;
+    }
+  }
+  return valuesWithoutFiles;
+}
 const FormRenderer = memo(
   forwardRef((props, ref) => {
     const {
@@ -36032,11 +36155,13 @@ const FormRenderer = memo(
     const { readonly } = schema.meta;
     const formId2 = useId$1();
     const initialValues = useMemo(() => {
-      return initializeFieldValues(schema.fields, values);
+      return initializeFieldValues(flattenFields(schema.fields), values);
     }, [schema.fields, values]);
     const handleSubmit = useCallback(
       (values2) => {
-        onSubmit == null ? void 0 : onSubmit(excludeUnchangedFields ? changedFieldValues(schema.fields, initialValues, values2) : values2);
+        onSubmit == null ? void 0 : onSubmit(
+          excludeUnchangedFields ? changedFieldValues(flattenFields(schema.fields), initialValues, values2) : values2
+        );
       },
       [excludeUnchangedFields, initialValues, onSubmit, schema.fields]
     );
@@ -36060,7 +36185,7 @@ const FormRenderer = memo(
     const handleValuesChange = useCallback(
       (identifier, value) => {
         const field = getFieldsMapping(schema.fields)[identifier];
-        if (field.isEqual(initialValues[identifier], value)) return;
+        if (field.areValuesEqual(initialValues[identifier], value)) return;
         onValuesChange == null ? void 0 : onValuesChange({ ...formik.values, [identifier]: value }, { [identifier]: value });
       },
       [formik.values, initialValues, onValuesChange, schema.fields]
@@ -36173,7 +36298,7 @@ const FormBuilderRoot = memo((props) => {
       if (fieldErrors) {
         errors.fields = fieldErrors.fields;
       }
-      if (hasKeys(errors)) {
+      if (Object.keys(errors).length > 0) {
         showError({
           title: "Some form settings are invalid",
           description: "Please check settings highlighted in red."
@@ -36333,6 +36458,9 @@ export {
   UploadInput,
   applyConditions,
   awaitPromisesFromFieldValues,
+  changedFieldValues,
+  cleanFieldValues,
+  cleanSerializedFieldValues,
   createCondition,
   createConditionModifierConfig,
   createField,
@@ -36347,12 +36475,15 @@ export {
   flattenFields,
   getFieldsMapping,
   initializeFieldValues,
+  isFilePromiseArray,
+  isStringArray,
   maxFileSizeB,
   maxFileSizeKB,
   maxFileSizeMB,
   separateFilesFromFieldValues,
   separateFilesFromFields,
   serializeFieldValues,
+  unchangedFieldValues,
   useFieldInput,
   useFieldInputs,
   useFormikInput,