@overmap-ai/forms 1.0.32-react-flow-david-fixes.8 → 1.0.32-react-flow-david-fixes.10

package/dist/form/builder/Root.d.ts

@@ -7,6 +7,8 @@ export interface FormBuilderRootProps extends PropsWithChildren {
     initialFields?: SerializedFieldSection[];
     onSave: FormBuilderSaveHandler;
     onCancel?: () => void;
+    hideTitle?: boolean;
+    hideDescription?: boolean;
     enableReinitialize?: boolean;
     disableRequiredFields?: boolean;
 }

package/dist/form/builder/context.d.ts

@@ -1,4 +1,6 @@
 interface IFormBuilderContext {
+    hideTitle: boolean;
+    hideDescription: boolean;
     disableRequiredFields: boolean;
     onCancel?: () => void;
 }

package/dist/form/fields/utils.d.ts

@@ -1,11 +1,11 @@
 import { FieldValues, SerializedFieldValues } from '../typings';
 import { FieldSection } from './FieldSection';
-import { AnyField, Field, SerializedField, SerializedOnlyField } from './typings';
+import { Field, SerializedField, SerializedOnlyField } from './typings';
 export declare const deserializeField: (serializedField: SerializedOnlyField) => Field;
 export declare const deserialize: (serialized: SerializedField) => Field | FieldSection;
 export declare function deserializeFields(fields: SerializedField[]): (Field | FieldSection)[];
 export declare function deserializeOnlyFields(fields: SerializedOnlyField[]): Field[];
 export declare function flattenFields(fields: (Field | FieldSection)[]): Field[];
 export declare function getFieldsMapping(fields: (Field | FieldSection)[]): Record<string, Field>;
-export declare function serializeFieldValues(fields: AnyField[], values: FieldValues): SerializedFieldValues;
-export declare function deserializeFieldValues(fields: AnyField[], values: SerializedFieldValues): FieldValues;
+export declare function serializeFieldValues(fields: Field[], values: FieldValues): SerializedFieldValues;
+export declare function deserializeFieldValues(fields: Field[], values: SerializedFieldValues): FieldValues;

package/dist/form/schema/FieldSchema.d.ts

@@ -1,5 +1,6 @@
 import { FieldSection, FieldsManager, SerializedFieldSection } from '../fields';
 import { Observable } from '../observable/Observable';
+import { FieldValues, SerializedFieldValues } from '../typings';
 export declare class FieldSchema extends Observable<FieldSchema> implements FieldsManager<FieldSection> {
     fields: FieldSection[];
     constructor(fields: FieldSection[]);
@@ -13,4 +14,6 @@ export declare class FieldSchema extends Observable<FieldSchema> implements Fiel
     removeField(field: FieldSection): void;
     removeFields(fields: FieldSection[]): void;
     moveField(sourceIndex: number, targetIndex: number): void;
+    deserializeValues(values: SerializedFieldValues): FieldValues;
+    serializeValues(values: FieldValues): SerializedFieldValues;
 }

package/dist/form/utils.d.ts

@@ -3,7 +3,7 @@ import { FormBuilderValues } from './builder';
 import { AnyFormElement, FieldValue, SerializedFieldSection } from './fields';
 import { FieldValues } from './typings';
 export declare const hasKeys: (errors: object) => boolean;
-export declare const validateFields: (fields: AnyFormElement[], values: FieldValues | FormBuilderValues) => FormikErrors<FieldValues | FormBuilderValues> | undefined;
+export declare const validateFields: (fields: AnyFormElement[], values: FieldValues) => FormikErrors<FieldValues | FormBuilderValues> | undefined;
 export declare const initializeFieldValues: (fields: AnyFormElement[], values: FieldValues) => FieldValues;
 export declare const changedFieldValues: (fields: AnyFormElement[], values1: FieldValues, values2: FieldValues) => FieldValues;
 export declare const separateFilesFromFieldValues: (values: FieldValues) => {

package/dist/forms.js

@@ -34480,6 +34480,12 @@ class FieldSchema extends Observable {
     this.fields = this.initFields(newFields);
     this.notify(this);
   }
+  deserializeValues(values) {
+    return deserializeFieldValues(flattenFields(this.fields), values);
+  }
+  serializeValues(values) {
+    return serializeFieldValues(flattenFields(this.fields), values);
+  }
 }
 const FieldSchemaContext = createContext(new FieldSchema([]));
 const FormBuilderContext = createContext({});
@@ -34492,9 +34498,9 @@ const validateFields = (fields, values) => {
   for (const field of fields) {
     if (field instanceof FieldSection) {
       const conditionalSections = sectionElements.filter((section) => field.identifier in section.conditions);
-      const conditionMet = conditionalSections.some(
-        (conditionalSection) => applyConditions(conditionalSection.getConditions(field.identifier), get(values, field.identifier))
-      );
+      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 {
@@ -35478,9 +35484,12 @@ const getLayoutedElements = (nodes, edges, direction) => {
     edges
   ];
 };
+const proOptions = {
+  hideAttribution: true
+};
 const FormBuilderFlowBuilder = memo(() => {
   const { handleSubmit, errors } = useFormikContext();
-  const { onCancel } = use(FormBuilderContext);
+  const { hideTitle, hideDescription, onCancel } = use(FormBuilderContext);
   const fieldSchema = use(FieldSchemaContext);
   const ref = useRef(null);
   const [reactFlow, setReactFlow] = useState();
@@ -35571,7 +35580,7 @@ const FormBuilderFlowBuilder = memo(() => {
   const [titleFieldProps, titleMeta, titleHelpers] = useField("title");
   const [descriptionFieldProps, _descriptionMeta, descriptionHelpers] = useField("description");
   return /* @__PURE__ */ jsxs("form", { className: "size-full flex flex-col gap-4", id: formId, onSubmit: handleSubmit, children: [
-    /* @__PURE__ */ jsx(InputWithHelpText, { severity: "danger", helpText: titleMeta.error ?? null, children: /* @__PURE__ */ jsx(
+    !hideTitle && /* @__PURE__ */ jsx(InputWithHelpText, { severity: "danger", helpText: titleMeta.error ?? null, children: /* @__PURE__ */ jsx(
       Input.Root,
       {
         variant: "outline",
@@ -35590,7 +35599,7 @@ const FormBuilderFlowBuilder = memo(() => {
         )
       }
     ) }),
-    /* @__PURE__ */ jsx(
+    !hideDescription && /* @__PURE__ */ jsx(
       TextArea,
       {
         className: "field-sizing-content",
@@ -35620,7 +35629,8 @@ const FormBuilderFlowBuilder = memo(() => {
           attributionPosition: "bottom-left",
           fitView: true,
           minZoom: 0,
-          isValidConnection: handleValidConnection
+          isValidConnection: handleValidConnection,
+          proOptions
         }
       ),
       /* @__PURE__ */ jsx(Panel, { position: "top-left", children: /* @__PURE__ */ jsx(ButtonGroup, { className: "flex items-center justify-end gap-2", size: "sm", children: /* @__PURE__ */ jsxs(Button, { type: "button", variant: "surface", onClick: handleAddSection, children: [
@@ -35661,79 +35671,69 @@ const FormBuilderFlowBuilder = memo(() => {
 FormBuilderFlowBuilder.displayName = "FormBuilderFlowBuilder";
 const FormBuilderListBuilder = memo(() => {
   const { handleSubmit, errors } = useFormikContext();
-  const { onCancel } = use(FormBuilderContext);
+  const { hideTitle, hideDescription, onCancel } = use(FormBuilderContext);
   const fieldSchema = use(FieldSchemaContext);
   const handleCreateEmptySection = useCallback(() => {
     fieldSchema.addField(new FieldSection({ identifier: v4(), fields: [] }));
   }, [fieldSchema]);
   const [titleFieldProps, titleMeta, titleHelpers] = useField("title");
   const [descriptionFieldProps, _descriptionMeta, descriptionHelpers] = useField("description");
-  return /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-4", children: [
-    /* @__PURE__ */ jsx(Text, { accentColor: "base", size: "sm", children: "Create your form using various field types. Sections can be conditionally rendered based on answers to fields in preceding sections." }),
-    /* @__PURE__ */ jsxs("form", { className: "flex flex-col gap-4", id: formId, onSubmit: handleSubmit, children: [
-      /* @__PURE__ */ jsx(InputWithHelpText, { severity: "danger", helpText: titleMeta.error ?? null, children: /* @__PURE__ */ jsx(
-        Input.Root,
-        {
-          variant: "outline",
-          size: "md",
-          accentColor: titleMeta.error ? SEVERITY_COLOR_MAPPING.danger : "primary",
-          children: /* @__PURE__ */ jsx(
-            Input.Field,
-            {
-              placeholder: "Enter a title",
-              value: titleFieldProps.value ?? "",
-              onChange: (event) => {
-                void titleHelpers.setValue(event.target.value);
-              },
-              maxLength: 100
-            }
-          )
-        }
-      ) }),
-      /* @__PURE__ */ jsx(
-        TextArea,
-        {
-          className: "field-sizing-content",
-          placeholder: "Explain a description",
-          value: descriptionFieldProps.value ?? "",
-          onChange: (event) => {
-            void descriptionHelpers.setValue(event.target.value);
-          },
-          resize: "vertical",
-          maxLength: 1e3,
-          size: "md"
-        }
-      ),
-      /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-4", children: [
-        fieldSchema.fields.map((fieldSection, index) => /* @__PURE__ */ jsx(
-          FieldSectionWithActions,
-          {
-            fieldSection,
-            index
-          },
-          fieldSection.identifier
-        )),
-        /* @__PURE__ */ jsxs(
-          Button,
+  return /* @__PURE__ */ jsxs("form", { className: "flex flex-col gap-4", id: formId, onSubmit: handleSubmit, children: [
+    !hideTitle && /* @__PURE__ */ jsx(InputWithHelpText, { severity: "danger", helpText: titleMeta.error ?? null, children: /* @__PURE__ */ jsx(
+      Input.Root,
+      {
+        variant: "outline",
+        size: "md",
+        accentColor: titleMeta.error ? SEVERITY_COLOR_MAPPING.danger : "primary",
+        children: /* @__PURE__ */ jsx(
+          Input.Field,
           {
-            className: "mb-4",
-            type: "button",
-            variant: "soft",
-            accentColor: "base",
-            size: "sm",
-            onClick: handleCreateEmptySection,
-            children: [
-              /* @__PURE__ */ jsx(LuIcon, { icon: "plus" }),
-              " Add section"
-            ]
+            placeholder: "Enter a title",
+            value: titleFieldProps.value ?? "",
+            onChange: (event) => {
+              void titleHelpers.setValue(event.target.value);
+            },
+            maxLength: 100
           }
         )
-      ] }),
-      !!errors.fields && /* @__PURE__ */ jsx(Text, { size: "xs", accentColor: "danger", children: typeof errors.fields === "string" && errors.fields }),
-      /* @__PURE__ */ jsxs(ButtonGroup, { className: "flex items-center justify-end gap-2", size: "sm", children: [
-        onCancel && /* @__PURE__ */ jsx(Button, { type: "button", variant: "soft", accentColor: "base", onClick: onCancel, children: "Cancel" }),
-        /* @__PURE__ */ jsx(Button, { type: "submit", variant: "surface", children: "Save" })
-      ] })
+      }
+    ) }),
+    !hideDescription && /* @__PURE__ */ jsx(
+      TextArea,
+      {
+        className: "field-sizing-content",
+        placeholder: "Explain a description",
+        value: descriptionFieldProps.value ?? "",
+        onChange: (event) => {
+          void descriptionHelpers.setValue(event.target.value);
+        },
+        resize: "vertical",
+        maxLength: 1e3,
+        size: "md"
+      }
+    ),
+    /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-4", children: [
+      fieldSchema.fields.map((fieldSection, index) => /* @__PURE__ */ jsx(FieldSectionWithActions, { fieldSection, index }, fieldSection.identifier)),
+      /* @__PURE__ */ jsxs(
+        Button,
+        {
+          className: "mb-4",
+          type: "button",
+          variant: "soft",
+          accentColor: "base",
+          size: "sm",
+          onClick: handleCreateEmptySection,
+          children: [
+            /* @__PURE__ */ jsx(LuIcon, { icon: "plus" }),
+            " Add section"
+          ]
+        }
+      )
+    ] }),
+    !!errors.fields && /* @__PURE__ */ jsx(Text, { size: "xs", accentColor: "danger", children: typeof errors.fields === "string" && errors.fields }),
+    /* @__PURE__ */ jsxs(ButtonGroup, { className: "flex items-center justify-end gap-2", size: "sm", children: [
+      onCancel && /* @__PURE__ */ jsx(Button, { type: "button", variant: "soft", accentColor: "base", onClick: onCancel, children: "Cancel" }),
+      /* @__PURE__ */ jsx(Button, { type: "submit", variant: "surface", children: "Save" })
     ] })
   ] });
 });
@@ -35835,20 +35835,10 @@ const FormRenderer = memo(
                 ]
               }
             ),
-            /* @__PURE__ */ jsxs(
-              Button,
-              {
-                ...buttonProps,
-                type: "submit",
-                disabled: !formik.isValid,
-                accentColor: "primary",
-                variant: "surface",
-                children: [
-                  /* @__PURE__ */ jsx(LuIcon, { icon: "check" }),
-                  submitText
-                ]
-              }
-            )
+            /* @__PURE__ */ jsxs(Button, { ...buttonProps, type: "submit", accentColor: "primary", variant: "surface", children: [
+              /* @__PURE__ */ jsx(LuIcon, { icon: "check" }),
+              submitText
+            ] })
           ] })
         ]
       }
@@ -35880,6 +35870,8 @@ const FormBuilderRoot = memo((props) => {
     initialFields,
     onSave,
     onCancel,
+    hideTitle = false,
+    hideDescription = false,
     enableReinitialize = false,
     disableRequiredFields = false
   } = props;
@@ -35941,7 +35933,11 @@ const FormBuilderRoot = memo((props) => {
           }
           fieldsToValidate = [...fieldsToValidate, ...fieldSettings];
         }
-      const fieldErrors = validateFields(fieldsToValidate, form);
+      const values = {};
+      for (const field of fieldsToValidate) {
+        values[field.identifier] = get(form, field.identifier);
+      }
+      const fieldErrors = validateFields(fieldsToValidate, values);
       if (fieldErrors) {
         errors.fields = fieldErrors.fields;
       }
@@ -35984,10 +35980,12 @@ const FormBuilderRoot = memo((props) => {
   }, [formik.values.fields, observer]);
   const contextValue = useMemo(() => {
     return {
+      hideTitle,
+      hideDescription,
       disableRequiredFields,
       onCancel
     };
-  }, [disableRequiredFields, onCancel]);
+  }, [disableRequiredFields, hideDescription, hideTitle, onCancel]);
   return /* @__PURE__ */ jsx(FormBuilderContext, { value: contextValue, children: /* @__PURE__ */ jsx(FieldSchemaContext, { value: schema, children: /* @__PURE__ */ jsx(FormikProvider, { value: formik, children }) }) });
 });
 FormBuilderRoot.displayName = "FormBuilderRoot";

package/dist/forms.umd.cjs

@@ -34482,6 +34482,12 @@ For more information, see https://radix-ui.com/primitives/docs/components/${titl
       this.fields = this.initFields(newFields);
       this.notify(this);
     }
+    deserializeValues(values) {
+      return deserializeFieldValues(flattenFields(this.fields), values);
+    }
+    serializeValues(values) {
+      return serializeFieldValues(flattenFields(this.fields), values);
+    }
   }
   const FieldSchemaContext = React.createContext(new FieldSchema([]));
   const FormBuilderContext = React.createContext({});
@@ -34494,9 +34500,9 @@ For more information, see https://radix-ui.com/primitives/docs/components/${titl
     for (const field of fields) {
       if (field instanceof FieldSection) {
         const conditionalSections = sectionElements.filter((section) => field.identifier in section.conditions);
-        const conditionMet = conditionalSections.some(
-          (conditionalSection) => applyConditions(conditionalSection.getConditions(field.identifier), get(values, field.identifier))
-        );
+        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 {
@@ -35480,9 +35486,12 @@ For more information, see https://radix-ui.com/primitives/docs/components/${titl
       edges
     ];
   };
+  const proOptions = {
+    hideAttribution: true
+  };
   const FormBuilderFlowBuilder = React.memo(() => {
     const { handleSubmit, errors } = formik.useFormikContext();
-    const { onCancel } = React.use(FormBuilderContext);
+    const { hideTitle, hideDescription, onCancel } = React.use(FormBuilderContext);
     const fieldSchema = React.use(FieldSchemaContext);
     const ref = React.useRef(null);
     const [reactFlow, setReactFlow] = React.useState();
@@ -35573,7 +35582,7 @@ For more information, see https://radix-ui.com/primitives/docs/components/${titl
     const [titleFieldProps, titleMeta, titleHelpers] = formik.useField("title");
     const [descriptionFieldProps, _descriptionMeta, descriptionHelpers] = formik.useField("description");
     return /* @__PURE__ */ jsxRuntime.jsxs("form", { className: "size-full flex flex-col gap-4", id: formId, onSubmit: handleSubmit, children: [
-      /* @__PURE__ */ jsxRuntime.jsx(InputWithHelpText, { severity: "danger", helpText: titleMeta.error ?? null, children: /* @__PURE__ */ jsxRuntime.jsx(
+      !hideTitle && /* @__PURE__ */ jsxRuntime.jsx(InputWithHelpText, { severity: "danger", helpText: titleMeta.error ?? null, children: /* @__PURE__ */ jsxRuntime.jsx(
         blocks.Input.Root,
         {
           variant: "outline",
@@ -35592,7 +35601,7 @@ For more information, see https://radix-ui.com/primitives/docs/components/${titl
           )
         }
       ) }),
-      /* @__PURE__ */ jsxRuntime.jsx(
+      !hideDescription && /* @__PURE__ */ jsxRuntime.jsx(
         blocks.TextArea,
         {
           className: "field-sizing-content",
@@ -35622,7 +35631,8 @@ For more information, see https://radix-ui.com/primitives/docs/components/${titl
             attributionPosition: "bottom-left",
             fitView: true,
             minZoom: 0,
-            isValidConnection: handleValidConnection
+            isValidConnection: handleValidConnection,
+            proOptions
           }
         ),
         /* @__PURE__ */ jsxRuntime.jsx(react.Panel, { position: "top-left", children: /* @__PURE__ */ jsxRuntime.jsx(blocks.ButtonGroup, { className: "flex items-center justify-end gap-2", size: "sm", children: /* @__PURE__ */ jsxRuntime.jsxs(blocks.Button, { type: "button", variant: "surface", onClick: handleAddSection, children: [
@@ -35663,79 +35673,69 @@ For more information, see https://radix-ui.com/primitives/docs/components/${titl
   FormBuilderFlowBuilder.displayName = "FormBuilderFlowBuilder";
   const FormBuilderListBuilder = React.memo(() => {
     const { handleSubmit, errors } = formik.useFormikContext();
-    const { onCancel } = React.use(FormBuilderContext);
+    const { hideTitle, hideDescription, onCancel } = React.use(FormBuilderContext);
     const fieldSchema = React.use(FieldSchemaContext);
     const handleCreateEmptySection = React.useCallback(() => {
       fieldSchema.addField(new FieldSection({ identifier: uuid.v4(), fields: [] }));
     }, [fieldSchema]);
     const [titleFieldProps, titleMeta, titleHelpers] = formik.useField("title");
     const [descriptionFieldProps, _descriptionMeta, descriptionHelpers] = formik.useField("description");
-    return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-4", children: [
-      /* @__PURE__ */ jsxRuntime.jsx(blocks.Text, { accentColor: "base", size: "sm", children: "Create your form using various field types. Sections can be conditionally rendered based on answers to fields in preceding sections." }),
-      /* @__PURE__ */ jsxRuntime.jsxs("form", { className: "flex flex-col gap-4", id: formId, onSubmit: handleSubmit, children: [
-        /* @__PURE__ */ jsxRuntime.jsx(InputWithHelpText, { severity: "danger", helpText: titleMeta.error ?? null, children: /* @__PURE__ */ jsxRuntime.jsx(
-          blocks.Input.Root,
-          {
-            variant: "outline",
-            size: "md",
-            accentColor: titleMeta.error ? SEVERITY_COLOR_MAPPING.danger : "primary",
-            children: /* @__PURE__ */ jsxRuntime.jsx(
-              blocks.Input.Field,
-              {
-                placeholder: "Enter a title",
-                value: titleFieldProps.value ?? "",
-                onChange: (event) => {
-                  void titleHelpers.setValue(event.target.value);
-                },
-                maxLength: 100
-              }
-            )
-          }
-        ) }),
-        /* @__PURE__ */ jsxRuntime.jsx(
-          blocks.TextArea,
-          {
-            className: "field-sizing-content",
-            placeholder: "Explain a description",
-            value: descriptionFieldProps.value ?? "",
-            onChange: (event) => {
-              void descriptionHelpers.setValue(event.target.value);
-            },
-            resize: "vertical",
-            maxLength: 1e3,
-            size: "md"
-          }
-        ),
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-4", children: [
-          fieldSchema.fields.map((fieldSection, index) => /* @__PURE__ */ jsxRuntime.jsx(
-            FieldSectionWithActions,
-            {
-              fieldSection,
-              index
-            },
-            fieldSection.identifier
-          )),
-          /* @__PURE__ */ jsxRuntime.jsxs(
-            blocks.Button,
+    return /* @__PURE__ */ jsxRuntime.jsxs("form", { className: "flex flex-col gap-4", id: formId, onSubmit: handleSubmit, children: [
+      !hideTitle && /* @__PURE__ */ jsxRuntime.jsx(InputWithHelpText, { severity: "danger", helpText: titleMeta.error ?? null, children: /* @__PURE__ */ jsxRuntime.jsx(
+        blocks.Input.Root,
+        {
+          variant: "outline",
+          size: "md",
+          accentColor: titleMeta.error ? SEVERITY_COLOR_MAPPING.danger : "primary",
+          children: /* @__PURE__ */ jsxRuntime.jsx(
+            blocks.Input.Field,
             {
-              className: "mb-4",
-              type: "button",
-              variant: "soft",
-              accentColor: "base",
-              size: "sm",
-              onClick: handleCreateEmptySection,
-              children: [
-                /* @__PURE__ */ jsxRuntime.jsx(blocks.LuIcon, { icon: "plus" }),
-                " Add section"
-              ]
+              placeholder: "Enter a title",
+              value: titleFieldProps.value ?? "",
+              onChange: (event) => {
+                void titleHelpers.setValue(event.target.value);
+              },
+              maxLength: 100
             }
           )
-        ] }),
-        !!errors.fields && /* @__PURE__ */ jsxRuntime.jsx(blocks.Text, { size: "xs", accentColor: "danger", children: typeof errors.fields === "string" && errors.fields }),
-        /* @__PURE__ */ jsxRuntime.jsxs(blocks.ButtonGroup, { className: "flex items-center justify-end gap-2", size: "sm", children: [
-          onCancel && /* @__PURE__ */ jsxRuntime.jsx(blocks.Button, { type: "button", variant: "soft", accentColor: "base", onClick: onCancel, children: "Cancel" }),
-          /* @__PURE__ */ jsxRuntime.jsx(blocks.Button, { type: "submit", variant: "surface", children: "Save" })
-        ] })
+        }
+      ) }),
+      !hideDescription && /* @__PURE__ */ jsxRuntime.jsx(
+        blocks.TextArea,
+        {
+          className: "field-sizing-content",
+          placeholder: "Explain a description",
+          value: descriptionFieldProps.value ?? "",
+          onChange: (event) => {
+            void descriptionHelpers.setValue(event.target.value);
+          },
+          resize: "vertical",
+          maxLength: 1e3,
+          size: "md"
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-4", children: [
+        fieldSchema.fields.map((fieldSection, index) => /* @__PURE__ */ jsxRuntime.jsx(FieldSectionWithActions, { fieldSection, index }, fieldSection.identifier)),
+        /* @__PURE__ */ jsxRuntime.jsxs(
+          blocks.Button,
+          {
+            className: "mb-4",
+            type: "button",
+            variant: "soft",
+            accentColor: "base",
+            size: "sm",
+            onClick: handleCreateEmptySection,
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsx(blocks.LuIcon, { icon: "plus" }),
+              " Add section"
+            ]
+          }
+        )
+      ] }),
+      !!errors.fields && /* @__PURE__ */ jsxRuntime.jsx(blocks.Text, { size: "xs", accentColor: "danger", children: typeof errors.fields === "string" && errors.fields }),
+      /* @__PURE__ */ jsxRuntime.jsxs(blocks.ButtonGroup, { className: "flex items-center justify-end gap-2", size: "sm", children: [
+        onCancel && /* @__PURE__ */ jsxRuntime.jsx(blocks.Button, { type: "button", variant: "soft", accentColor: "base", onClick: onCancel, children: "Cancel" }),
+        /* @__PURE__ */ jsxRuntime.jsx(blocks.Button, { type: "submit", variant: "surface", children: "Save" })
       ] })
     ] });
   });
@@ -35837,20 +35837,10 @@ For more information, see https://radix-ui.com/primitives/docs/components/${titl
                   ]
                 }
               ),
-              /* @__PURE__ */ jsxRuntime.jsxs(
-                blocks.Button,
-                {
-                  ...buttonProps,
-                  type: "submit",
-                  disabled: !formik$1.isValid,
-                  accentColor: "primary",
-                  variant: "surface",
-                  children: [
-                    /* @__PURE__ */ jsxRuntime.jsx(blocks.LuIcon, { icon: "check" }),
-                    submitText
-                  ]
-                }
-              )
+              /* @__PURE__ */ jsxRuntime.jsxs(blocks.Button, { ...buttonProps, type: "submit", accentColor: "primary", variant: "surface", children: [
+                /* @__PURE__ */ jsxRuntime.jsx(blocks.LuIcon, { icon: "check" }),
+                submitText
+              ] })
             ] })
           ]
         }
@@ -35882,6 +35872,8 @@ For more information, see https://radix-ui.com/primitives/docs/components/${titl
       initialFields,
       onSave,
       onCancel,
+      hideTitle = false,
+      hideDescription = false,
       enableReinitialize = false,
       disableRequiredFields = false
     } = props;
@@ -35943,7 +35935,11 @@ For more information, see https://radix-ui.com/primitives/docs/components/${titl
             }
             fieldsToValidate = [...fieldsToValidate, ...fieldSettings];
           }
-        const fieldErrors = validateFields(fieldsToValidate, form);
+        const values = {};
+        for (const field of fieldsToValidate) {
+          values[field.identifier] = get(form, field.identifier);
+        }
+        const fieldErrors = validateFields(fieldsToValidate, values);
         if (fieldErrors) {
           errors.fields = fieldErrors.fields;
         }
@@ -35986,10 +35982,12 @@ For more information, see https://radix-ui.com/primitives/docs/components/${titl
     }, [formik$1.values.fields, observer]);
     const contextValue = React.useMemo(() => {
       return {
+        hideTitle,
+        hideDescription,
         disableRequiredFields,
         onCancel
       };
-    }, [disableRequiredFields, onCancel]);
+    }, [disableRequiredFields, hideDescription, hideTitle, onCancel]);
     return /* @__PURE__ */ jsxRuntime.jsx(FormBuilderContext, { value: contextValue, children: /* @__PURE__ */ jsxRuntime.jsx(FieldSchemaContext, { value: schema, children: /* @__PURE__ */ jsxRuntime.jsx(formik.FormikProvider, { value: formik$1, children }) }) });
   });
   FormBuilderRoot.displayName = "FormBuilderRoot";

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@overmap-ai/forms",
-	"version": "1.0.32-react-flow-david-fixes.8",
+	"version": "1.0.32-react-flow-david-fixes.10",
 	"license": "UNLICENSED",
 	"main": "dist/forms.umd.cjs",
 	"module": "dist/forms.js",