@bacano/sdk 1.2.2 → 1.2.4

package/react/forms.cjs

@@ -20,12 +20,13 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 // libs/sdk/src/react/forms.tsx
 var forms_exports = {};
 __export(forms_exports, {
+  BacanoFlowForm: () => BacanoFlowForm,
   BacanoForm: () => BacanoForm,
   useBacanoForm: () => useBacanoForm,
   useBacanoFormTracking: () => useBacanoFormTracking
 });
 module.exports = __toCommonJS(forms_exports);
-var import_react4 = require("react");
+var import_react5 = require("react");
 
 // libs/sdk/src/errors.ts
 var WebsiteError = class extends Error {
@@ -41,11 +42,124 @@ var WebsiteError = class extends Error {
   }
 };
 
-// libs/sdk/src/react/form-field-control.tsx
+// libs/sdk/src/form-conditions.ts
+function formRootFields(definition) {
+  return [
+    ...definition.fields,
+    ...definition.sections.flatMap((section) => section.fields),
+    ...definition.steps.flatMap((step) => [
+      ...step.fields,
+      ...step.sections.flatMap((section) => section.fields)
+    ])
+  ];
+}
+function visibleFormFields(fields, values) {
+  return fields.flatMap((field) => [
+    field,
+    ...visibleFormFields(
+      field.branches?.find((branch) => branch.value === values[field.key])?.fields ?? [],
+      values
+    )
+  ]);
+}
+function allFormFields(fields) {
+  return fields.flatMap((field) => [
+    field,
+    ...allFormFields((field.branches ?? []).flatMap((branch) => branch.fields))
+  ]);
+}
+function activeFormValues(definition, values) {
+  const keys = new Set(
+    visibleFormFields(formRootFields(definition), values).map(
+      (field) => field.key
+    )
+  );
+  return Object.fromEntries(
+    Object.entries(values).filter(([key]) => keys.has(key))
+  );
+}
+
+// libs/sdk/src/react/form-scale-control.tsx
 var import_jsx_runtime = require("react/jsx-runtime");
+function FormScaleControl({
+  field,
+  id,
+  value,
+  onChange,
+  className
+}) {
+  const scale = field.scale;
+  if (!scale) return null;
+  const options = Array.from(
+    { length: Math.max(0, Math.min(11, scale.max - scale.min + 1)) },
+    (_, index) => scale.min + index
+  );
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      "div",
+      {
+        role: "radiogroup",
+        "aria-labelledby": `${id}-label`,
+        style: { display: "flex", flexWrap: "wrap", gap: 12 },
+        children: options.map((number) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+          "label",
+          {
+            style: { display: "inline-flex", alignItems: "center", gap: 4 },
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                "input",
+                {
+                  className,
+                  type: "radio",
+                  name: id,
+                  value: String(number),
+                  checked: value === String(number),
+                  required: field.required,
+                  onChange: () => onChange(String(number)),
+                  "aria-label": `${number} de ${scale.max}`
+                }
+              ),
+              scale.display === "stars" ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                "span",
+                {
+                  "aria-hidden": "true",
+                  style: {
+                    fontSize: 24,
+                    color: Number(value) >= number ? "var(--accent, #b45309)" : "var(--muted, #6b7280)"
+                  },
+                  children: "\u2605"
+                }
+              ) : number
+            ]
+          },
+          number
+        ))
+      }
+    ),
+    (scale.minLabel || scale.maxLabel) && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("p", { children: [
+      scale.minLabel,
+      " \u2014 ",
+      scale.maxLabel
+    ] })
+  ] });
+}
+
+// libs/sdk/src/react/form-field-control.tsx
+var import_jsx_runtime2 = require("react/jsx-runtime");
 function BacanoFormFieldControl(props) {
   const { field, className, value, onChange } = props;
   const controlId = props.id ?? field.key;
+  if (field.type === "scale")
+    return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+      FormScaleControl,
+      {
+        field,
+        id: controlId,
+        value,
+        onChange,
+        className
+      }
+    );
   const common = {
     id: controlId,
     name: field.key,
@@ -53,7 +167,7 @@ function BacanoFormFieldControl(props) {
     className
   };
   if (field.type === "textarea") {
-    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
       "textarea",
       {
         ...common,
@@ -67,7 +181,7 @@ function BacanoFormFieldControl(props) {
   }
   if (field.type === "select" || field.type === "multi_select") {
     const isMultiple = field.type === "multi_select";
-    return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+    return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
       "select",
       {
         ...common,
@@ -80,15 +194,15 @@ function BacanoFormFieldControl(props) {
           ) : event.target.value
         ),
         children: [
-          !isMultiple ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("option", { value: "", children: field.placeholder ?? "Selecciona una opci\xF3n" }) : null,
-          (field.options ?? []).map((option) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)("option", { value: option.value, children: option.label }, option.value))
+          !isMultiple ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("option", { value: "", children: field.placeholder ?? "Selecciona una opci\xF3n" }) : null,
+          (field.options ?? []).map((option) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("option", { value: option.value, children: option.label }, option.value))
         ]
       }
     );
   }
   if (field.type === "radio") {
-    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { role: "radiogroup", "aria-labelledby": `${controlId}-label`, children: (field.options ?? []).map((option) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("label", { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { role: "radiogroup", "aria-labelledby": `${controlId}-label`, children: (field.options ?? []).map((option) => /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("label", { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
         "input",
         {
           type: "radio",
@@ -103,7 +217,7 @@ function BacanoFormFieldControl(props) {
     ] }, option.value)) });
   }
   if (field.type === "checkbox") {
-    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
       "input",
       {
         ...common,
@@ -113,7 +227,7 @@ function BacanoFormFieldControl(props) {
       }
     );
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
     "input",
     {
       ...common,
@@ -130,13 +244,13 @@ function BacanoFormFieldControl(props) {
 }
 
 // libs/sdk/src/react/form-sections.tsx
-var import_jsx_runtime2 = require("react/jsx-runtime");
+var import_jsx_runtime3 = require("react/jsx-runtime");
 function FormFields(props) {
   return props.fields.map((field) => {
     const controlId = `${props.idPrefix}-${field.key}`;
     const value = props.values[field.key] ?? (field.type === "checkbox" ? false : field.type === "multi_select" ? [] : "");
-    return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: props.classNames?.field, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: props.classNames?.field, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
         "label",
         {
           id: `${controlId}-label`,
@@ -145,7 +259,7 @@ function FormFields(props) {
           children: field.label
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
         BacanoFormFieldControl,
         {
           field,
@@ -155,15 +269,18 @@ function FormFields(props) {
           onChange: (nextValue) => props.onChange(field.key, nextValue)
         }
       ),
-      field.helpText ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("p", { className: props.classNames?.helpText, children: field.helpText }) : null
+      field.helpText ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("p", { className: props.classNames?.helpText, children: field.helpText }) : null,
+      field.branches?.map(
+        (branch) => branch.value === props.values[field.key] ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { "data-bacano-form-branch": branch.value, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(FormFields, { ...props, fields: branch.fields }) }, branch.value) : null
+      )
     ] }, field.key);
   });
 }
 function FormSections(props) {
-  return props.sections.map((section) => /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("section", { className: props.classNames?.section, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("h3", { className: props.classNames?.sectionTitle, children: section.title }),
-    section.description ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("p", { className: props.classNames?.sectionDescription, children: section.description }) : null,
-    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+  return props.sections.map((section) => /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("section", { className: props.classNames?.section, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("h3", { className: props.classNames?.sectionTitle, children: section.title }),
+    section.description ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("p", { className: props.classNames?.sectionDescription, children: section.description }) : null,
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
       FormFields,
       {
         fields: section.fields,
@@ -303,8 +420,82 @@ function useBacanoState() {
   return (0, import_react3.useContext)(BacanoReactContext);
 }
 
+// libs/sdk/src/react/flow-form.tsx
+var import_react4 = require("react");
+var import_jsx_runtime4 = require("react/jsx-runtime");
+function BacanoFlowForm({
+  form,
+  onSubmit,
+  onRefresh,
+  classNames
+}) {
+  const id = (0, import_react4.useId)();
+  const [values, setValues] = (0, import_react4.useState)(
+    () => activeFormValues(form.definition, form.initialValues ?? {})
+  );
+  const [error, setError] = (0, import_react4.useState)("");
+  const [busy, setBusy] = (0, import_react4.useState)(false);
+  const common = {
+    idPrefix: id,
+    values,
+    classNames,
+    onChange: (key, value) => setValues(
+      (current) => activeFormValues(form.definition, { ...current, [key]: value })
+    )
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
+    "form",
+    {
+      className: classNames?.root,
+      onSubmit: async (event) => {
+        event.preventDefault();
+        if (busy) return;
+        setBusy(true);
+        setError("");
+        try {
+          await onSubmit(activeFormValues(form.definition, values), form);
+        } catch (reason) {
+          setError(
+            reason instanceof Error ? reason.message : "No fue posible enviar la respuesta."
+          );
+        } finally {
+          setBusy(false);
+        }
+      },
+      children: [
+        form.correction && /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("p", { role: "status", children: [
+          "Cargamos tus respuestas anteriores para que puedas corregirlas.",
+          form.correction.formChanged && " Las preguntas cambiaron; revisa los campos antes de enviar."
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(FormFields, { ...common, fields: form.definition.fields }),
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(FormSections, { ...common, sections: form.definition.sections }),
+        form.definition.steps.map((step) => /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("section", { className: classNames?.section, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("h3", { className: classNames?.sectionTitle, children: step.title }),
+          /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("p", { children: step.description }),
+          /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(FormFields, { ...common, fields: step.fields }),
+          /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(FormSections, { ...common, sections: step.sections })
+        ] }, step.key)),
+        error && /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { role: "alert", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("p", { children: error === "FLOW_FORM_CHANGED" ? "El formulario cambi\xF3. Actualiza las preguntas y revisa tus respuestas antes de enviarlas." : error }),
+          /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+            "button",
+            {
+              type: "button",
+              onClick: () => void onRefresh().catch(
+                () => setError("No se pudo actualizar el formulario.")
+              ),
+              children: "Actualizar preguntas sin borrar mis respuestas"
+            }
+          )
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("button", { type: "submit", disabled: busy, className: classNames?.button, children: busy ? "Guardando\u2026" : form.definition.submitLabel })
+      ]
+    }
+  );
+}
+
 // libs/sdk/src/react/forms.tsx
-var import_jsx_runtime3 = require("react/jsx-runtime");
+var import_jsx_runtime5 = require("react/jsx-runtime");
 var EMPTY_FORM_FIELDS = [];
 var EMPTY_FORM_SECTIONS = [];
 var EMPTY_FORM_STEPS = [];
@@ -316,12 +507,12 @@ function useBacanoForm(formKey, options) {
   } = useBacanoState();
   const enabled = options?.enabled ?? true;
   const initialForm = options?.initialForm?.key === formKey ? options.initialForm : null;
-  const [form, setForm] = (0, import_react4.useState)(initialForm);
-  const formRef = (0, import_react4.useRef)(initialForm);
-  const requestVersion = (0, import_react4.useRef)(0);
-  const [loading, setLoading] = (0, import_react4.useState)(enabled && !initialForm);
-  const [error, setError] = (0, import_react4.useState)(null);
-  const load = (0, import_react4.useCallback)(
+  const [form, setForm] = (0, import_react5.useState)(initialForm);
+  const formRef = (0, import_react5.useRef)(initialForm);
+  const requestVersion = (0, import_react5.useRef)(0);
+  const [loading, setLoading] = (0, import_react5.useState)(enabled && !initialForm);
+  const [error, setError] = (0, import_react5.useState)(null);
+  const load = (0, import_react5.useCallback)(
     async (force = false) => {
       if (!enabled || !client) return;
       const version = ++requestVersion.current;
@@ -344,7 +535,7 @@ function useBacanoForm(formKey, options) {
     },
     [client, enabled, formKey]
   );
-  (0, import_react4.useEffect)(() => {
+  (0, import_react5.useEffect)(() => {
     if (!enabled) {
       formRef.current = null;
       setForm(null);
@@ -365,44 +556,45 @@ function useBacanoForm(formKey, options) {
   };
 }
 function BacanoFormInstance(props) {
-  const reactId = (0, import_react4.useId)();
+  const reactId = (0, import_react5.useId)();
   const idPrefix = `${props.formKey}-${reactId.replace(/:/g, "")}`;
   const { client } = useBacanoState();
   const { form, loading, error } = useBacanoForm(props.formKey, {
     initialForm: props.initialForm
   });
-  const [internalValues, setValues] = (0, import_react4.useState)({});
-  const [step, setStep] = (0, import_react4.useState)(0);
-  const [submitting, setSubmitting] = (0, import_react4.useState)(false);
-  const [submitted, setSubmitted] = (0, import_react4.useState)(false);
-  const [submissionError, setSubmissionError] = (0, import_react4.useState)(null);
-  const [honeypot, setHoneypot] = (0, import_react4.useState)("");
+  const [internalValues, setValues] = (0, import_react5.useState)({});
+  const [step, setStep] = (0, import_react5.useState)(0);
+  const [submitting, setSubmitting] = (0, import_react5.useState)(false);
+  const [submitted, setSubmitted] = (0, import_react5.useState)(false);
+  const [submissionError, setSubmissionError] = (0, import_react5.useState)(null);
+  const [honeypot, setHoneypot] = (0, import_react5.useState)("");
   const tracking = useBacanoFormTracking(props.formKey, {
     visible: (props.visible ?? true) && !loading && form?.status === "ACTIVE" && !submitted
   });
-  const idempotencyKey = (0, import_react4.useRef)(crypto.randomUUID());
+  const idempotencyKey = (0, import_react5.useRef)(crypto.randomUUID());
   const fields = form?.definition.fields ?? EMPTY_FORM_FIELDS;
   const sections = form?.definition.sections ?? EMPTY_FORM_SECTIONS;
   const steps = form?.definition.steps ?? EMPTY_FORM_STEPS;
-  const fieldKeys = (0, import_react4.useMemo)(
+  const fieldKeys = (0, import_react5.useMemo)(
     () => new Set(
-      [
+      allFormFields([
         ...fields,
         ...sections.flatMap((section) => section.fields),
         ...steps.flatMap((formStep) => [
           ...formStep.fields,
           ...formStep.sections.flatMap((section) => section.fields)
         ])
-      ].map((field) => field.key)
+      ]).map((field) => field.key)
     ),
     [fields, sections, steps]
   );
-  const values = Object.fromEntries(
+  const rawValues = Object.fromEntries(
     Object.entries(props.values ?? internalValues).filter(
       ([key]) => fieldKeys.has(key)
     )
   );
-  (0, import_react4.useEffect)(() => {
+  const values = form ? activeFormValues(form.definition, props.values ?? internalValues) : rawValues;
+  (0, import_react5.useEffect)(() => {
     setStep(0);
     setValues(
       (current) => Object.fromEntries(
@@ -414,15 +606,15 @@ function BacanoFormInstance(props) {
     setHoneypot("");
     idempotencyKey.current = crypto.randomUUID();
   }, [fieldKeys, form?.version]);
-  if (loading) return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_jsx_runtime3.Fragment, { children: props.loadingFallback ?? null });
+  if (loading) return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_jsx_runtime5.Fragment, { children: props.loadingFallback ?? null });
   if (error && !form)
-    return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_jsx_runtime3.Fragment, { children: props.errorFallback?.(error) ?? props.unavailableFallback ?? null });
-  if (!form) return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_jsx_runtime3.Fragment, { children: props.unavailableFallback ?? null });
+    return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_jsx_runtime5.Fragment, { children: props.errorFallback?.(error) ?? props.unavailableFallback ?? null });
+  if (!form) return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_jsx_runtime5.Fragment, { children: props.unavailableFallback ?? null });
   if (form.status === "PAUSED") {
-    return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: props.classNames?.message, "data-bacano-form-unavailable": true, children: props.unavailableFallback ?? form.definition.unavailableMessage });
+    return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: props.classNames?.message, "data-bacano-form-unavailable": true, children: props.unavailableFallback ?? form.definition.unavailableMessage });
   }
   if (submitted) {
-    return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: props.classNames?.message, "data-bacano-form-success": true, children: form.definition.successMessage });
+    return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: props.classNames?.message, "data-bacano-form-success": true, children: form.definition.successMessage });
   }
   const isMultiStep = steps.length > 0;
   const activeStep = isMultiStep ? steps[step] : null;
@@ -430,7 +622,10 @@ function BacanoFormInstance(props) {
   const setFieldValue = (key, value) => {
     if (value !== "" && value !== false && (!Array.isArray(value) || value.length > 0))
       tracking.start();
-    const nextValues = { ...values, [key]: value };
+    const nextValues = activeFormValues(form.definition, {
+      ...values,
+      [key]: value
+    });
     setValues(nextValues);
     props.onValuesChange?.(nextValues);
   };
@@ -486,7 +681,7 @@ function BacanoFormInstance(props) {
       setSubmitting(false);
     }
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
     "form",
     {
       noValidate: true,
@@ -495,7 +690,7 @@ function BacanoFormInstance(props) {
       "data-bacano-form-version": form.version,
       onSubmit: (event) => void submit(event),
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
           "div",
           {
             "aria-hidden": "true",
@@ -507,8 +702,8 @@ function BacanoFormInstance(props) {
               clip: "rect(0 0 0 0)"
             },
             children: [
-              /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("label", { htmlFor: `${form.key}-company-website`, children: "Empresa" }),
-              /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("label", { htmlFor: `${form.key}-company-website`, children: "Empresa" }),
+              /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
                 "input",
                 {
                   id: `${form.key}-company-website`,
@@ -522,12 +717,12 @@ function BacanoFormInstance(props) {
             ]
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("h2", { className: props.classNames?.title, children: form.name }),
-        form.description ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("p", { className: props.classNames?.description, children: form.description }) : null,
-        activeStep ? /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("section", { className: props.classNames?.step, "data-bacano-form-step": true, children: [
-          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("h3", { className: props.classNames?.stepTitle, children: activeStep.title }),
-          activeStep.description ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("p", { className: props.classNames?.stepDescription, children: activeStep.description }) : null,
-          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("h2", { className: props.classNames?.title, children: form.name }),
+        form.description ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("p", { className: props.classNames?.description, children: form.description }) : null,
+        activeStep ? /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("section", { className: props.classNames?.step, "data-bacano-form-step": true, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("h3", { className: props.classNames?.stepTitle, children: activeStep.title }),
+          activeStep.description ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("p", { className: props.classNames?.stepDescription, children: activeStep.description }) : null,
+          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
             FormFields,
             {
               fields: activeStep.fields,
@@ -537,7 +732,7 @@ function BacanoFormInstance(props) {
               onChange: setFieldValue
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
             FormSections,
             {
               sections: activeStep.sections,
@@ -547,8 +742,8 @@ function BacanoFormInstance(props) {
               onChange: setFieldValue
             }
           )
-        ] }) : /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_jsx_runtime3.Fragment, { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+        ] }) : /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(import_jsx_runtime5.Fragment, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
             FormFields,
             {
               fields,
@@ -558,7 +753,7 @@ function BacanoFormInstance(props) {
               onChange: setFieldValue
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
             FormSections,
             {
               sections,
@@ -569,8 +764,8 @@ function BacanoFormInstance(props) {
             }
           )
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: props.classNames?.actions, children: [
-          isMultiStep && step > 0 ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: props.classNames?.actions, children: [
+          isMultiStep && step > 0 ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
             "button",
             {
               type: "button",
@@ -578,7 +773,7 @@ function BacanoFormInstance(props) {
               children: "Anterior"
             }
           ) : null,
-          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
             "button",
             {
               type: "submit",
@@ -588,7 +783,7 @@ function BacanoFormInstance(props) {
             }
           )
         ] }),
-        submissionError ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+        submissionError ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
           "div",
           {
             role: "alert",
@@ -602,5 +797,5 @@ function BacanoFormInstance(props) {
   );
 }
 function BacanoForm(props) {
-  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(BacanoFormInstance, { ...props }, props.formKey);
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(BacanoFormInstance, { ...props }, props.formKey);
 }

package/react/forms.d.ts

@@ -1,5 +1,6 @@
 import { type ReactNode } from "react";
 import type { WebsiteFormResponseResult, WebsitePublishedForm } from "../types";
+export { BacanoFlowForm } from "./flow-form";
 export { useBacanoFormTracking } from "./form-tracking";
 export type BacanoFormValues = Record<string, string | string[] | boolean>;
 export interface UseBacanoFormOptions {