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

package/dist/forms.umd.cjs

@@ -1,6 +1,6 @@
 (function(global2, factory) {
-  typeof exports === "object" && typeof module !== "undefined" ? factory(exports, require("react/jsx-runtime"), require("@overmap-ai/blocks"), require("class-variance-authority"), require("react"), require("@xyflow/react/dist/style.css"), require("@xyflow/react"), require("formik"), require("graphology"), require("graphology-dag"), require("uuid"), require("@hello-pangea/dnd"), require("lucide-react"), require("react-dom"), require("file-saver"), require("react-zxing"), require("lodash.get"), require("lodash.set"), require("@dagrejs/dagre")) : typeof define === "function" && define.amd ? define(["exports", "react/jsx-runtime", "@overmap-ai/blocks", "class-variance-authority", "react", "@xyflow/react/dist/style.css", "@xyflow/react", "formik", "graphology", "graphology-dag", "uuid", "@hello-pangea/dnd", "lucide-react", "react-dom", "file-saver", "react-zxing", "lodash.get", "lodash.set", "@dagrejs/dagre"], factory) : (global2 = typeof globalThis !== "undefined" ? globalThis : global2 || self, factory(global2.forms = {}, global2.jsxRuntime, global2.blocks, global2.classVarianceAuthority, global2.React, null, global2.react, global2.formik, global2.graphology, global2.graphologyDag, global2.uuid, global2.dnd, global2.lucideReact, global2.ReactDOM, global2.fileSaver, global2.reactZxing, global2.get, global2.set, global2.Dagre));
-})(this, function(exports2, jsxRuntime, blocks, classVarianceAuthority, React, style_css, react, formik, graphology, graphologyDag, uuid, dnd, lucideReact, ReactDOM, fileSaver, reactZxing, get, set, Dagre) {
+  typeof exports === "object" && typeof module !== "undefined" ? factory(exports, require("react/jsx-runtime"), require("@overmap-ai/blocks"), require("class-variance-authority"), require("react"), require("@xyflow/react/dist/style.css"), require("@xyflow/react"), require("formik"), require("graphology"), require("graphology-dag"), require("uuid"), require("@hello-pangea/dnd"), require("lucide-react"), require("react-dom"), require("file-saver"), require("react-zxing"), require("lodash.get"), require("@dagrejs/dagre"), require("lodash.set")) : typeof define === "function" && define.amd ? define(["exports", "react/jsx-runtime", "@overmap-ai/blocks", "class-variance-authority", "react", "@xyflow/react/dist/style.css", "@xyflow/react", "formik", "graphology", "graphology-dag", "uuid", "@hello-pangea/dnd", "lucide-react", "react-dom", "file-saver", "react-zxing", "lodash.get", "@dagrejs/dagre", "lodash.set"], factory) : (global2 = typeof globalThis !== "undefined" ? globalThis : global2 || self, factory(global2.forms = {}, global2.jsxRuntime, global2.blocks, global2.classVarianceAuthority, global2.React, null, global2.react, global2.formik, global2.graphology, global2.graphologyDag, global2.uuid, global2.dnd, global2.lucideReact, global2.ReactDOM, global2.fileSaver, global2.reactZxing, global2.get, global2.Dagre, global2.set));
+})(this, function(exports2, jsxRuntime, blocks, classVarianceAuthority, React, style_css, react, formik, graphology, graphologyDag, uuid, dnd, lucideReact, ReactDOM, fileSaver, reactZxing, get, Dagre, set) {
   "use strict";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);
@@ -40,6 +40,14 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
     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());
@@ -101,14 +109,8 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
       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()) {
@@ -144,59 +146,15 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
       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] = formik.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 = React.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";
@@ -2306,14 +2264,70 @@ For more information, see https://radix-ui.com/primitives/docs/components/${titl
     const { children, ...restProps } = props;
     return /* @__PURE__ */ jsxRuntime.jsx(InputWithHelpText, { ...restProps, children });
   };
+  const useFieldInput = (field, props) => {
+    return React.useMemo(() => {
+      if (!props || !field) return null;
+      return field.render(props);
+    }, [field, props]);
+  };
+  const useFieldInputs = (fields, props) => {
+    return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-col gap-4", children: fields.map((field) => {
+      return /* @__PURE__ */ jsxRuntime.jsx(React.Fragment, { children: field.render(props) }, field.identifier);
+    }) });
+  };
+  const useFormikInput = (props) => {
+    const { field, size, showInputOnly, onValuesChange, ...rest } = props;
+    const [fieldProps, meta, helpers] = formik.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 = React.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 = React.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] = React.useState("");
     const [internalError, setInternalError] = React.useState("");
     const updatedHelpText = internalError || computedHelpText;
@@ -2527,14 +2541,6 @@ For more information, see https://radix-ui.com/primitives/docs/components/${titl
     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) => {
@@ -2552,6 +2558,18 @@ For more information, see https://radix-ui.com/primitives/docs/components/${titl
     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.");
@@ -2657,10 +2675,6 @@ For more information, see https://radix-ui.com/primitives/docs/components/${titl
       __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();
     }
@@ -2689,6 +2703,18 @@ For more information, see https://radix-ui.com/primitives/docs/components/${titl
     render(props) {
       return /* @__PURE__ */ jsxRuntime.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.");
@@ -2701,14 +2727,14 @@ For more information, see https://radix-ui.com/primitives/docs/components/${titl
     const { name, onBlur, onChange, value } = fieldProps;
     const computedHelpText = showInputOnly ? null : helpText;
     const computedLabel = showInputOnly ? "" : label;
-    const [internalValue, setInternalValue] = React.useState(void 0);
+    const [internalValue, setInternalValue] = React.useState(null);
     React.useEffect(() => {
       setInternalValue(value);
     }, [value]);
     const handleChange = React.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));
@@ -2876,6 +2902,18 @@ For more information, see https://radix-ui.com/primitives/docs/components/${titl
     render(props) {
       return /* @__PURE__ */ jsxRuntime.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.");
@@ -2973,18 +3011,28 @@ For more information, see https://radix-ui.com/primitives/docs/components/${titl
     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 = React.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 = React.useCallback(
       (value2) => {
-        const newValue = value2.length > 0 ? value2 : void 0;
-        onChange(newValue);
-        onBlur(newValue);
+        onChange(value2);
+        onBlur(value2);
       },
       [onBlur, onChange]
     );
@@ -3049,20 +3097,31 @@ For more information, see https://radix-ui.com/primitives/docs/components/${titl
     render(props) {
       return /* @__PURE__ */ jsxRuntime.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 = React.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] = React.useState(false);
     const computedHelpText = showInputOnly ? null : helpText;
     const computedLabel = showInputOnly ? "" : label;
-    const value = fieldProps.value ? new Date(fieldProps.value) : void 0;
     const handleValueChange = React.useCallback(
       (date) => {
-        onChange(date);
+        onChange(date ?? null);
         setPopoverOpen(false);
       },
       [onChange]
@@ -3111,7 +3170,7 @@ For more information, see https://radix-ui.com/primitives/docs/components/${titl
               required: false,
               mode: "single",
               variant: "solid",
-              selected: value,
+              selected: value ?? void 0,
               onSelect: handleValueChange
             }
           ) })
@@ -3145,34 +3204,41 @@ For more information, see https://radix-ui.com/primitives/docs/components/${titl
       super.setOptions(options2);
     }
     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__ */ jsxRuntime.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 = React.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 = React.useCallback(
       (value2) => {
-        const newValue = value2.length > 0 ? value2 : void 0;
-        onChange(newValue);
-        onBlur(newValue);
+        onChange(value2);
+        onBlur(value2);
       },
       [onBlur, onChange]
     );
@@ -3239,14 +3305,6 @@ For more information, see https://radix-ui.com/primitives/docs/components/${titl
       __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();
     }
@@ -3279,6 +3337,18 @@ For more information, see https://radix-ui.com/primitives/docs/components/${titl
     render(props) {
       return /* @__PURE__ */ jsxRuntime.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.");
@@ -3290,8 +3360,8 @@ For more information, see https://radix-ui.com/primitives/docs/components/${titl
     const computedLabel = showInputOnly ? "" : label;
     const handleChange = React.useCallback(
       (value2) => {
-        onChange(value2);
-        onBlur(value2);
+        onChange(value2 ?? null);
+        onBlur(value2 ?? null);
       },
       [onBlur, onChange]
     );
@@ -3374,6 +3444,18 @@ For more information, see https://radix-ui.com/primitives/docs/components/${titl
     render(props) {
       return /* @__PURE__ */ jsxRuntime.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.");
@@ -3386,16 +3468,16 @@ For more information, see https://radix-ui.com/primitives/docs/components/${titl
     const { name, onBlur, onChange, value } = fieldProps;
     const computedHelpText = showInputOnly ? null : helpText;
     const computedLabel = showInputOnly ? "" : label;
-    const [internalValue, setInternalValue] = React.useState();
+    const [internalValue, setInternalValue] = React.useState("");
     const inputUuids = React.useMemo(() => Array.from({ length: field.length }, () => uuid.v4()), [field.length]);
     React.useEffect(() => {
       setInternalValue(value);
     }, [value]);
     const handleChange = React.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]
@@ -3425,7 +3507,7 @@ For more information, see https://radix-ui.com/primitives/docs/components/${titl
           {
             id: inputId,
             name,
-            value: internalValue ?? "",
+            value: internalValue,
             onValueChange: handleChange,
             validationType: field.validationType,
             form: formId2,
@@ -3508,7 +3590,7 @@ For more information, see https://radix-ui.com/primitives/docs/components/${titl
       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.`;
         }
       });
@@ -3552,6 +3634,18 @@ For more information, see https://radix-ui.com/primitives/docs/components/${titl
     render(props) {
       return /* @__PURE__ */ jsxRuntime.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.");
@@ -3563,14 +3657,14 @@ For more information, see https://radix-ui.com/primitives/docs/components/${titl
     const computedLabel = showInputOnly ? "" : label;
     const handleChange = React.useCallback(
       (value2) => {
-        onChange(value2 ?? void 0);
-        onBlur(value2 ?? void 0);
+        onChange(value2);
+        onBlur(value2);
       },
       [onBlur, onChange]
     );
     const handleClear = React.useCallback(() => {
-      onChange(void 0);
-      onBlur(void 0);
+      onChange(null);
+      onBlur(null);
     }, [onBlur, onChange]);
     return /* @__PURE__ */ jsxRuntime.jsx(InputWithLabelAndHelpText, { helpText: computedHelpText, severity, children: /* @__PURE__ */ jsxRuntime.jsx(
       InputWithLabel,
@@ -3653,6 +3747,18 @@ For more information, see https://radix-ui.com/primitives/docs/components/${titl
     render(props) {
       return /* @__PURE__ */ jsxRuntime.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.");
@@ -31753,15 +31859,16 @@ For more information, see https://radix-ui.com/primitives/docs/components/${titl
     const [showScanner, setShowScanner] = React.useState(false);
     const computedHelpText = showInputOnly ? null : helpText;
     const computedLabel = showInputOnly ? "" : label;
-    const [internalValue, setInternalValue] = React.useState(void 0);
+    const [internalValue, setInternalValue] = React.useState("");
     React.useEffect(() => {
       setInternalValue(value);
     }, [value]);
     const handleChange = React.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]
@@ -31806,7 +31913,7 @@ For more information, see https://radix-ui.com/primitives/docs/components/${titl
               size: "sm",
               id: inputId,
               name,
-              value: internalValue ?? "",
+              value: internalValue,
               placeholder: "Enter a qr or barcode",
               onChange: handleChange,
               onBlur: handleBlur,
@@ -31911,6 +32018,18 @@ For more information, see https://radix-ui.com/primitives/docs/components/${titl
     render(props) {
       return /* @__PURE__ */ jsxRuntime.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.");
@@ -31924,15 +32043,16 @@ For more information, see https://radix-ui.com/primitives/docs/components/${titl
     const { name, onBlur, onChange, value } = fieldProps;
     const computedHelpText = showInputOnly ? null : helpText;
     const computedLabel = showInputOnly ? "" : label;
-    const [internalValue, setInternalValue] = React.useState(void 0);
+    const [internalValue, setInternalValue] = React.useState("");
     React.useEffect(() => {
       setInternalValue(value);
     }, [value]);
     const handleChange = React.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]
@@ -31956,7 +32076,7 @@ For more information, see https://radix-ui.com/primitives/docs/components/${titl
             id: inputId,
             className: "truncate",
             name,
-            value: internalValue ?? "",
+            value: internalValue,
             type: "text",
             placeholder: field.placeholder,
             onChange: handleChange,
@@ -32016,15 +32136,16 @@ For more information, see https://radix-ui.com/primitives/docs/components/${titl
     const { name, onBlur, onChange, value } = fieldProps;
     const computedHelpText = showInputOnly ? null : helpText;
     const computedLabel = showInputOnly ? "" : label;
-    const [internalValue, setInternalValue] = React.useState(void 0);
+    const [internalValue, setInternalValue] = React.useState("");
     React.useEffect(() => {
       setInternalValue(value);
     }, [value]);
     const handleChange = React.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]
@@ -32046,7 +32167,7 @@ For more information, see https://radix-ui.com/primitives/docs/components/${titl
           blocks.TextArea,
           {
             id: inputId,
-            value: internalValue ?? "",
+            value: internalValue,
             name,
             onChange: handleChange,
             onBlur: handleBlur,
@@ -32154,11 +32275,25 @@ For more information, see https://radix-ui.com/primitives/docs/components/${titl
     });
     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 = React.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 = React.useRef(null);
     const updatedHelpText = React.useMemo(() => {
       if (showInputOnly) return null;
@@ -32188,7 +32323,7 @@ For more information, see https://radix-ui.com/primitives/docs/components/${titl
       (index) => {
         const files = [...value];
         files.splice(index, 1);
-        onChange(files.length > 0 ? files : void 0);
+        onChange(files);
       },
       [value, onChange]
     );
@@ -32198,7 +32333,7 @@ For more information, see https://radix-ui.com/primitives/docs/components/${titl
       input.current.addEventListener(
         "cancel",
         () => {
-          onBlur(void 0);
+          onBlur([...value]);
         },
         {
           signal: abortController.signal
@@ -32357,21 +32492,6 @@ For more information, see https://radix-ui.com/primitives/docs/components/${titl
     ) : /* @__PURE__ */ jsxRuntime.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(options2) {
       const { extensions, maximum_files, maximum_size, ...base } = options2;
@@ -32385,20 +32505,6 @@ For more information, see https://radix-ui.com/primitives/docs/components/${titl
       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 [
@@ -32517,6 +32623,24 @@ For more information, see https://radix-ui.com/primitives/docs/components/${titl
     render(props) {
       return /* @__PURE__ */ jsxRuntime.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.");
@@ -32555,60 +32679,6 @@ For more information, see https://radix-ui.com/primitives/docs/components/${titl
   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");
@@ -32915,6 +32985,60 @@ For more information, see https://radix-ui.com/primitives/docs/components/${titl
     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";
@@ -33655,19 +33779,19 @@ For more information, see https://radix-ui.com/primitives/docs/components/${titl
   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"
     }),
@@ -33878,25 +34002,25 @@ For more information, see https://radix-ui.com/primitives/docs/components/${titl
   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)
     })
@@ -34077,25 +34201,25 @@ For more information, see https://radix-ui.com/primitives/docs/components/${titl
   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)
     })
@@ -34418,15 +34542,15 @@ For more information, see https://radix-ui.com/primitives/docs/components/${titl
         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);
   }
@@ -34452,33 +34576,44 @@ For more information, see https://radix-ui.com/primitives/docs/components/${titl
     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 = React.createContext({});
-  const useFieldInput = (field, props) => {
-    return React.useMemo(() => {
-      if (!props || !field) return null;
-      return field.render(props);
-    }, [field, props]);
-  };
-  const useFieldInputs = (fields, props) => {
-    return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-col gap-4", children: fields.map((field) => {
-      return /* @__PURE__ */ jsxRuntime.jsx(React.Fragment, { children: field.render(props) }, field.identifier);
-    }) });
-  };
   const FieldSectionLayout = React.memo((props) => {
     const { fieldSection: section, ...rest } = props;
     const { label, description } = section;
@@ -34585,13 +34720,12 @@ For more information, see https://radix-ui.com/primitives/docs/components/${titl
       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;
@@ -34746,124 +34880,6 @@ For more information, see https://radix-ui.com/primitives/docs/components/${titl
   }
   const FieldSchemaContext = React.createContext(new FieldSchema([]));
   const FormBuilderContext = React.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":
@@ -35136,7 +35152,7 @@ For more information, see https://radix-ui.com/primitives/docs/components/${titl
     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 = React.useCallback(() => {
@@ -35240,45 +35256,6 @@ For more information, see https://radix-ui.com/primitives/docs/components/${titl
     ] });
   });
   FieldDropdownMenu.displayName = "IssueDataFilterMenu";
-  const FieldSectionConditionalItem = React.memo((props) => {
-    const { sourceFieldSection, targetFieldSection } = props;
-    const conditions = React.useMemo(() => {
-      return sourceFieldSection.getConditions(targetFieldSection.identifier);
-    }, [sourceFieldSection, targetFieldSection.identifier]);
-    const handleDelete = React.useCallback(() => {
-      sourceFieldSection.removeConditional(targetFieldSection.identifier);
-    }, [sourceFieldSection, targetFieldSection.identifier]);
-    const handleSelectField = React.useCallback(
-      (field) => {
-        sourceFieldSection.addCondition(targetFieldSection.identifier, createCondition(field));
-      },
-      [sourceFieldSection, targetFieldSection.identifier]
-    );
-    const handleDeleteCondition = React.useCallback(
-      (condition) => {
-        sourceFieldSection.removeCondition(targetFieldSection.identifier, condition);
-      },
-      [sourceFieldSection, targetFieldSection.identifier]
-    );
-    return /* @__PURE__ */ jsxRuntime.jsxs(blocks.Card, { className: "flex flex-col gap-2", children: [
-      /* @__PURE__ */ jsxRuntime.jsxs(blocks.ButtonGroup, { className: "justify-between gap-2 flex", size: "sm", accentColor: "base", variant: "soft", children: [
-        /* @__PURE__ */ jsxRuntime.jsxs(blocks.Badge, { accentColor: "base", variant: "soft", size: "sm", children: [
-          /* @__PURE__ */ jsxRuntime.jsx(blocks.LuIcon, { icon: fieldIcons.section }),
-          sourceFieldSection.label ?? UNLABELLED_SECTION_LABEL
-        ] }),
-        /* @__PURE__ */ jsxRuntime.jsx(blocks.IconButton, { type: "button", onClick: handleDelete, variant: "ghost", children: /* @__PURE__ */ jsxRuntime.jsx(blocks.LuIcon, { icon: "trash" }) })
-      ] }),
-      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex h-max w-full flex-wrap gap-2", children: [
-        conditions.map((condition) => {
-          return condition.render({
-            onRemove: handleDeleteCondition
-          });
-        }),
-        /* @__PURE__ */ jsxRuntime.jsx(FieldDropdownMenu, { fields: sourceFieldSection.fields, onSelectField: handleSelectField, align: "start", children: /* @__PURE__ */ jsxRuntime.jsx(blocks.IconButton, { type: "button", size: "sm", variant: "soft", accentColor: "base", children: /* @__PURE__ */ jsxRuntime.jsx(blocks.LuIcon, { icon: "plus" }) }) })
-      ] })
-    ] });
-  });
-  FieldSectionConditionalItem.displayName = "FieldSectionConditionalItem";
   const FieldSectionDropdownMenu = React.memo((props) => {
     const { children, variant, size, accentColor, fieldSections, onSelectFieldCondition, ...rest } = props;
     return /* @__PURE__ */ jsxRuntime.jsxs(blocks.Menu.Root, { ...rest, children: [
@@ -35292,169 +35269,6 @@ For more information, see https://radix-ui.com/primitives/docs/components/${titl
     ] });
   });
   FieldSectionDropdownMenu.displayName = "IssueDataFilterMenu";
-  const FieldSectionBuilder = React.memo((props) => {
-    const { fieldSection } = props;
-    const fieldSchema = React.use(FieldSchemaContext);
-    const conditionalSections = React.useMemo(() => {
-      return fieldSchema.fields.filter((section) => fieldSection.identifier in section.conditions);
-    }, [fieldSchema.fields, fieldSection.identifier]);
-    const handleAddConditional = React.useCallback(
-      (conditionalSection) => {
-        conditionalSection.addConditional(fieldSection.identifier);
-      },
-      [fieldSection.identifier]
-    );
-    const validFieldSections = React.useMemo(() => {
-      const graph = new graphology.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) => !graphologyDag.willCreateCycle(graph, sourceSection.identifier, fieldSection.identifier)
-      );
-    }, [fieldSchema.fields, fieldSection.identifier]);
-    return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex grow w-full flex-col gap-4", children: [
-      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-2 w-full overflow-hidden", children: [
-        /* @__PURE__ */ jsxRuntime.jsx(blocks.Input.Root, { variant: "outline", size: "md", children: /* @__PURE__ */ jsxRuntime.jsx(
-          blocks.Input.Field,
-          {
-            placeholder: "Enter a section label (optional)",
-            value: fieldSection.label ?? "",
-            onChange: (event) => fieldSection.setOptions({ label: event.target.value }),
-            maxLength: 200
-          }
-        ) }),
-        /* @__PURE__ */ jsxRuntime.jsx(
-          blocks.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__ */ jsxRuntime.jsx(blocks.Separator, { size: "full" }),
-      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-2", children: [
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex  gap-2 justify-between", children: [
-          /* @__PURE__ */ jsxRuntime.jsx(blocks.Text, { accentColor: "base", children: "Conditions" }),
-          /* @__PURE__ */ jsxRuntime.jsx(
-            FieldSectionDropdownMenu,
-            {
-              fieldSections: validFieldSections,
-              onSelectFieldCondition: handleAddConditional,
-              children: /* @__PURE__ */ jsxRuntime.jsxs(blocks.Button, { type: "button", variant: "soft", size: "sm", className: "w-max", children: [
-                /* @__PURE__ */ jsxRuntime.jsx(blocks.LuIcon, { icon: "plus" }),
-                "Add condition"
-              ] })
-            }
-          )
-        ] }),
-        conditionalSections.map((section) => /* @__PURE__ */ jsxRuntime.jsx(
-          FieldSectionConditionalItem,
-          {
-            sourceFieldSection: section,
-            targetFieldSection: fieldSection
-          },
-          section.identifier
-        ))
-      ] }),
-      /* @__PURE__ */ jsxRuntime.jsx(blocks.Separator, { size: "full" })
-    ] });
-  });
-  FieldSectionBuilder.displayName = "FieldSectionBuilder";
-  const useFieldTypeItems = (onSelect = () => null) => {
-    return React.useMemo(() => {
-      const entries = Object.entries(FieldTypeToClsMapping);
-      return entries.map(([type, fieldClass]) => ({
-        children: fieldClass.fieldTypeName,
-        icon: /* @__PURE__ */ jsxRuntime.jsx(blocks.LuIcon, { icon: fieldIcons[type] }),
-        value: type,
-        onSelect: () => {
-          onSelect(type);
-        }
-      }));
-    }, [onSelect]);
-  };
-  const FieldSectionWithActions = React.memo((props) => {
-    const { fieldSection, index: sectionIndex } = props;
-    const fieldSchema = React.use(FieldSchemaContext);
-    const removeField = React.useCallback(
-      (field) => {
-        fieldSection.removeField(field);
-      },
-      [fieldSection]
-    );
-    const removeSection = React.useCallback(() => {
-      fieldSchema.removeField(fieldSection);
-    }, [fieldSchema, fieldSection]);
-    const moveSection = React.useCallback(
-      (direction) => {
-        const targetIndex = direction === "up" ? sectionIndex - 1 : sectionIndex + 1;
-        fieldSchema.moveField(sectionIndex, targetIndex);
-      },
-      [fieldSchema, sectionIndex]
-    );
-    const duplicateSection = React.useCallback(() => {
-      fieldSchema.addField(fieldSection.duplicate(uuid.v4()));
-    }, [fieldSchema, fieldSection]);
-    const handleCreateField = React.useCallback(
-      (type) => {
-        fieldSection.addField(createField(type));
-      },
-      [fieldSection]
-    );
-    const handleMoveUp = React.useCallback(() => {
-      moveSection("up");
-    }, [moveSection]);
-    const handleMoveDown = React.useCallback(() => {
-      moveSection("down");
-    }, [moveSection]);
-    const fieldTypeItems = useFieldTypeItems(handleCreateField);
-    return /* @__PURE__ */ jsxRuntime.jsxs(blocks.Card, { variant: "outline", className: "flex items-center justify-between gap-4 w-full", children: [
-      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex grow flex-col gap-4 w-full", children: [
-        /* @__PURE__ */ jsxRuntime.jsx(FieldSectionBuilder, { fieldSection }),
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-2 w-full", children: [
-          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex gap-2 justify-between", children: [
-            /* @__PURE__ */ jsxRuntime.jsx(blocks.Text, { accentColor: "base", size: "md", children: "Fields" }),
-            /* @__PURE__ */ jsxRuntime.jsxs(blocks.Menu.Root, { children: [
-              /* @__PURE__ */ jsxRuntime.jsx(blocks.Menu.ClickTrigger, { children: /* @__PURE__ */ jsxRuntime.jsxs(blocks.Button, { type: "button", variant: "soft", size: "sm", children: [
-                /* @__PURE__ */ jsxRuntime.jsx(blocks.LuIcon, { icon: "plus" }),
-                " Add field"
-              ] }) }),
-              /* @__PURE__ */ jsxRuntime.jsx(blocks.Menu.Content, { children: /* @__PURE__ */ jsxRuntime.jsx(blocks.Menu.Scroll, { children: fieldTypeItems.flat().map((item) => /* @__PURE__ */ jsxRuntime.jsxs(blocks.Menu.Item, { onSelect: item.onSelect, children: [
-                item.icon,
-                item.children
-              ] }, item.value)) }) })
-            ] })
-          ] }),
-          fieldSection.fields.map((child, index) => /* @__PURE__ */ jsxRuntime.jsx(
-            FieldWithActions,
-            {
-              field: child,
-              fieldSection,
-              index,
-              sectionIndex,
-              remove: removeField
-            },
-            child.identifier
-          ))
-        ] })
-      ] }),
-      /* @__PURE__ */ jsxRuntime.jsxs(blocks.ButtonGroup, { className: "flex-col gap-0.5 flex", variant: "ghost", accentColor: "base", size: "sm", children: [
-        /* @__PURE__ */ jsxRuntime.jsx(blocks.IconButton, { type: "button", onClick: handleMoveUp, children: /* @__PURE__ */ jsxRuntime.jsx(blocks.LuIcon, { icon: "move-up" }) }),
-        /* @__PURE__ */ jsxRuntime.jsx(blocks.IconButton, { type: "button", onClick: handleMoveDown, children: /* @__PURE__ */ jsxRuntime.jsx(blocks.LuIcon, { icon: "move-down" }) }),
-        /* @__PURE__ */ jsxRuntime.jsx(blocks.IconButton, { type: "button", onClick: duplicateSection, children: /* @__PURE__ */ jsxRuntime.jsx(blocks.LuIcon, { icon: "copy" }) }),
-        /* @__PURE__ */ jsxRuntime.jsx(blocks.IconButton, { type: "button", onClick: removeSection, children: /* @__PURE__ */ jsxRuntime.jsx(blocks.LuIcon, { icon: "trash" }) })
-      ] })
-    ] });
-  });
-  FieldSectionWithActions.displayName = "FieldSectionWithActions";
   const FieldWithActions = React.memo((props) => {
     const { field, fieldSection, index, sectionIndex, remove } = props;
     const { showError } = blocks.useToast();
@@ -35596,6 +35410,19 @@ For more information, see https://radix-ui.com/primitives/docs/components/${titl
     ] });
   });
   FieldSectionConditionEdgeComponent.displayName = "FieldSectionConditionEdgeComponent";
+  const useFieldTypeItems = (onSelect = () => null) => {
+    return React.useMemo(() => {
+      const entries = Object.entries(FieldTypeToClsMapping);
+      return entries.map(([type, fieldClass]) => ({
+        children: fieldClass.fieldTypeName,
+        icon: /* @__PURE__ */ jsxRuntime.jsx(blocks.LuIcon, { icon: fieldIcons[type] }),
+        value: type,
+        onSelect: () => {
+          onSelect(type);
+        }
+      }));
+    }, [onSelect]);
+  };
   const FieldSectionNodeComponent = React.memo((props) => {
     const { data, selected } = props;
     const { fieldSection, index: sectionIndex, layoutDirection } = data;
@@ -35942,6 +35769,195 @@ For more information, see https://radix-ui.com/primitives/docs/components/${titl
     ] });
   });
   FormBuilderFlowBuilder.displayName = "FormBuilderFlowBuilder";
+  const FieldSectionConditionalItem = React.memo((props) => {
+    const { sourceFieldSection, targetFieldSection } = props;
+    const conditions = React.useMemo(() => {
+      return sourceFieldSection.getConditions(targetFieldSection.identifier);
+    }, [sourceFieldSection, targetFieldSection.identifier]);
+    const handleDelete = React.useCallback(() => {
+      sourceFieldSection.removeConditional(targetFieldSection.identifier);
+    }, [sourceFieldSection, targetFieldSection.identifier]);
+    const handleSelectField = React.useCallback(
+      (field) => {
+        sourceFieldSection.addCondition(targetFieldSection.identifier, createCondition(field));
+      },
+      [sourceFieldSection, targetFieldSection.identifier]
+    );
+    const handleDeleteCondition = React.useCallback(
+      (condition) => {
+        sourceFieldSection.removeCondition(targetFieldSection.identifier, condition);
+      },
+      [sourceFieldSection, targetFieldSection.identifier]
+    );
+    return /* @__PURE__ */ jsxRuntime.jsxs(blocks.Card, { className: "flex flex-col gap-2", children: [
+      /* @__PURE__ */ jsxRuntime.jsxs(blocks.ButtonGroup, { className: "justify-between gap-2 flex", size: "sm", accentColor: "base", variant: "soft", children: [
+        /* @__PURE__ */ jsxRuntime.jsxs(blocks.Badge, { accentColor: "base", variant: "soft", size: "sm", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(blocks.LuIcon, { icon: fieldIcons.section }),
+          sourceFieldSection.label ?? UNLABELLED_SECTION_LABEL
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsx(blocks.IconButton, { type: "button", onClick: handleDelete, variant: "ghost", children: /* @__PURE__ */ jsxRuntime.jsx(blocks.LuIcon, { icon: "trash" }) })
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex h-max w-full flex-wrap gap-2", children: [
+        conditions.map((condition) => {
+          return condition.render({
+            onRemove: handleDeleteCondition
+          });
+        }),
+        /* @__PURE__ */ jsxRuntime.jsx(FieldDropdownMenu, { fields: sourceFieldSection.fields, onSelectField: handleSelectField, align: "start", children: /* @__PURE__ */ jsxRuntime.jsx(blocks.IconButton, { type: "button", size: "sm", variant: "soft", accentColor: "base", children: /* @__PURE__ */ jsxRuntime.jsx(blocks.LuIcon, { icon: "plus" }) }) })
+      ] })
+    ] });
+  });
+  FieldSectionConditionalItem.displayName = "FieldSectionConditionalItem";
+  const FieldSectionBuilder = React.memo((props) => {
+    const { fieldSection } = props;
+    const fieldSchema = React.use(FieldSchemaContext);
+    const conditionalSections = React.useMemo(() => {
+      return fieldSchema.fields.filter((section) => fieldSection.identifier in section.conditions);
+    }, [fieldSchema.fields, fieldSection.identifier]);
+    const handleAddConditional = React.useCallback(
+      (conditionalSection) => {
+        conditionalSection.addConditional(fieldSection.identifier);
+      },
+      [fieldSection.identifier]
+    );
+    const validFieldSections = React.useMemo(() => {
+      const graph = new graphology.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) => !graphologyDag.willCreateCycle(graph, sourceSection.identifier, fieldSection.identifier)
+      );
+    }, [fieldSchema.fields, fieldSection.identifier]);
+    return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex grow w-full flex-col gap-4", children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-2 w-full overflow-hidden", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(blocks.Input.Root, { variant: "outline", size: "md", children: /* @__PURE__ */ jsxRuntime.jsx(
+          blocks.Input.Field,
+          {
+            placeholder: "Enter a section label (optional)",
+            value: fieldSection.label ?? "",
+            onChange: (event) => fieldSection.setOptions({ label: event.target.value }),
+            maxLength: 200
+          }
+        ) }),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          blocks.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__ */ jsxRuntime.jsx(blocks.Separator, { size: "full" }),
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-2", children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex  gap-2 justify-between", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(blocks.Text, { accentColor: "base", children: "Conditions" }),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            FieldSectionDropdownMenu,
+            {
+              fieldSections: validFieldSections,
+              onSelectFieldCondition: handleAddConditional,
+              children: /* @__PURE__ */ jsxRuntime.jsxs(blocks.Button, { type: "button", variant: "soft", size: "sm", className: "w-max", children: [
+                /* @__PURE__ */ jsxRuntime.jsx(blocks.LuIcon, { icon: "plus" }),
+                "Add condition"
+              ] })
+            }
+          )
+        ] }),
+        conditionalSections.map((section) => /* @__PURE__ */ jsxRuntime.jsx(
+          FieldSectionConditionalItem,
+          {
+            sourceFieldSection: section,
+            targetFieldSection: fieldSection
+          },
+          section.identifier
+        ))
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsx(blocks.Separator, { size: "full" })
+    ] });
+  });
+  FieldSectionBuilder.displayName = "FieldSectionBuilder";
+  const FieldSectionWithActions = React.memo((props) => {
+    const { fieldSection, index: sectionIndex } = props;
+    const fieldSchema = React.use(FieldSchemaContext);
+    const removeField = React.useCallback(
+      (field) => {
+        fieldSection.removeField(field);
+      },
+      [fieldSection]
+    );
+    const removeSection = React.useCallback(() => {
+      fieldSchema.removeField(fieldSection);
+    }, [fieldSchema, fieldSection]);
+    const moveSection = React.useCallback(
+      (direction) => {
+        const targetIndex = direction === "up" ? sectionIndex - 1 : sectionIndex + 1;
+        fieldSchema.moveField(sectionIndex, targetIndex);
+      },
+      [fieldSchema, sectionIndex]
+    );
+    const duplicateSection = React.useCallback(() => {
+      fieldSchema.addField(fieldSection.duplicate(uuid.v4()));
+    }, [fieldSchema, fieldSection]);
+    const handleCreateField = React.useCallback(
+      (type) => {
+        fieldSection.addField(createField(type));
+      },
+      [fieldSection]
+    );
+    const handleMoveUp = React.useCallback(() => {
+      moveSection("up");
+    }, [moveSection]);
+    const handleMoveDown = React.useCallback(() => {
+      moveSection("down");
+    }, [moveSection]);
+    const fieldTypeItems = useFieldTypeItems(handleCreateField);
+    return /* @__PURE__ */ jsxRuntime.jsxs(blocks.Card, { variant: "outline", className: "flex items-center justify-between gap-4 w-full", children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex grow flex-col gap-4 w-full", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(FieldSectionBuilder, { fieldSection }),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-2 w-full", children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex gap-2 justify-between", children: [
+            /* @__PURE__ */ jsxRuntime.jsx(blocks.Text, { accentColor: "base", size: "md", children: "Fields" }),
+            /* @__PURE__ */ jsxRuntime.jsxs(blocks.Menu.Root, { children: [
+              /* @__PURE__ */ jsxRuntime.jsx(blocks.Menu.ClickTrigger, { children: /* @__PURE__ */ jsxRuntime.jsxs(blocks.Button, { type: "button", variant: "soft", size: "sm", children: [
+                /* @__PURE__ */ jsxRuntime.jsx(blocks.LuIcon, { icon: "plus" }),
+                " Add field"
+              ] }) }),
+              /* @__PURE__ */ jsxRuntime.jsx(blocks.Menu.Content, { children: /* @__PURE__ */ jsxRuntime.jsx(blocks.Menu.Scroll, { children: fieldTypeItems.flat().map((item) => /* @__PURE__ */ jsxRuntime.jsxs(blocks.Menu.Item, { onSelect: item.onSelect, children: [
+                item.icon,
+                item.children
+              ] }, item.value)) }) })
+            ] })
+          ] }),
+          fieldSection.fields.map((child, index) => /* @__PURE__ */ jsxRuntime.jsx(
+            FieldWithActions,
+            {
+              field: child,
+              fieldSection,
+              index,
+              sectionIndex,
+              remove: removeField
+            },
+            child.identifier
+          ))
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsxs(blocks.ButtonGroup, { className: "flex-col gap-0.5 flex", variant: "ghost", accentColor: "base", size: "sm", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(blocks.IconButton, { type: "button", onClick: handleMoveUp, children: /* @__PURE__ */ jsxRuntime.jsx(blocks.LuIcon, { icon: "move-up" }) }),
+        /* @__PURE__ */ jsxRuntime.jsx(blocks.IconButton, { type: "button", onClick: handleMoveDown, children: /* @__PURE__ */ jsxRuntime.jsx(blocks.LuIcon, { icon: "move-down" }) }),
+        /* @__PURE__ */ jsxRuntime.jsx(blocks.IconButton, { type: "button", onClick: duplicateSection, children: /* @__PURE__ */ jsxRuntime.jsx(blocks.LuIcon, { icon: "copy" }) }),
+        /* @__PURE__ */ jsxRuntime.jsx(blocks.IconButton, { type: "button", onClick: removeSection, children: /* @__PURE__ */ jsxRuntime.jsx(blocks.LuIcon, { icon: "trash" }) })
+      ] })
+    ] });
+  });
+  FieldSectionWithActions.displayName = "FieldSectionWithActions";
   const FormBuilderListBuilder = React.memo(() => {
     const { handleSubmit, errors } = formik.useFormikContext();
     const { hideTitle, hideDescription, onCancel } = React.use(FormBuilderContext);
@@ -36011,6 +36027,113 @@ For more information, see https://radix-ui.com/primitives/docs/components/${titl
     ] });
   });
   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 = React.memo(
     React.forwardRef((props, ref) => {
       const {
@@ -36034,11 +36157,13 @@ For more information, see https://radix-ui.com/primitives/docs/components/${titl
       const { readonly } = schema.meta;
       const formId2 = React.useId();
       const initialValues = React.useMemo(() => {
-        return initializeFieldValues(schema.fields, values);
+        return initializeFieldValues(flattenFields(schema.fields), values);
       }, [schema.fields, values]);
       const handleSubmit = React.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]
       );
@@ -36062,7 +36187,7 @@ For more information, see https://radix-ui.com/primitives/docs/components/${titl
       const handleValuesChange = React.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$1.values, [identifier]: value }, { [identifier]: value });
         },
         [formik$1.values, initialValues, onValuesChange, schema.fields]
@@ -36175,7 +36300,7 @@ For more information, see https://radix-ui.com/primitives/docs/components/${titl
         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."
@@ -36334,6 +36459,9 @@ For more information, see https://radix-ui.com/primitives/docs/components/${titl
   exports2.UploadInput = UploadInput;
   exports2.applyConditions = applyConditions;
   exports2.awaitPromisesFromFieldValues = awaitPromisesFromFieldValues;
+  exports2.changedFieldValues = changedFieldValues;
+  exports2.cleanFieldValues = cleanFieldValues;
+  exports2.cleanSerializedFieldValues = cleanSerializedFieldValues;
   exports2.createCondition = createCondition;
   exports2.createConditionModifierConfig = createConditionModifierConfig;
   exports2.createField = createField;
@@ -36348,12 +36476,15 @@ For more information, see https://radix-ui.com/primitives/docs/components/${titl
   exports2.flattenFields = flattenFields;
   exports2.getFieldsMapping = getFieldsMapping;
   exports2.initializeFieldValues = initializeFieldValues;
+  exports2.isFilePromiseArray = isFilePromiseArray;
+  exports2.isStringArray = isStringArray;
   exports2.maxFileSizeB = maxFileSizeB;
   exports2.maxFileSizeKB = maxFileSizeKB;
   exports2.maxFileSizeMB = maxFileSizeMB;
   exports2.separateFilesFromFieldValues = separateFilesFromFieldValues;
   exports2.separateFilesFromFields = separateFilesFromFields;
   exports2.serializeFieldValues = serializeFieldValues;
+  exports2.unchangedFieldValues = unchangedFieldValues;
   exports2.useFieldInput = useFieldInput;
   exports2.useFieldInputs = useFieldInputs;
   exports2.useFormikInput = useFormikInput;