@form-engine-ts/react 2.9.1 → 2.9.2

package/dist/index.js

@@ -750,6 +750,8 @@ function DefaultButton({
   className,
   disabled,
   "aria-label": ariaLabel,
+  "aria-describedby": ariaDescribedBy,
+  "aria-labelledby": ariaLabelledBy,
   onClick,
   children,
   title,
@@ -764,6 +766,8 @@ function DefaultButton({
       type: "button",
       disabled,
       "aria-label": ariaLabel,
+      "aria-describedby": ariaDescribedBy,
+      "aria-labelledby": ariaLabelledBy,
       title,
       "data-builder-action": action,
       "data-target-id": targetId,
@@ -780,17 +784,43 @@ function DefaultIconButton(props) {
       ...props.className === void 0 ? {} : { className: props.className },
       ...props.disabled === void 0 ? {} : { disabled: props.disabled },
       "aria-label": props["aria-label"] ?? props.title,
+      "aria-describedby": props["aria-describedby"],
+      "aria-labelledby": props["aria-labelledby"],
+      ...props.title === void 0 ? {} : { title: props.title },
       ...props.onClick === void 0 ? {} : { onClick: props.onClick },
       children: props.icon
     }
   );
 }
+function defaultIconFor(actionType) {
+  switch (actionType) {
+    case "moveUp":
+      return "\u2191";
+    case "moveDown":
+      return "\u2193";
+    case "delete":
+    case "close":
+      return "\xD7";
+    case "add":
+      return "+";
+    case "dragHandle":
+      return "\u283F";
+    case "edit":
+      return "\u270E";
+    case "settings":
+      return "\u2699";
+    case "translate":
+      return "\u6587";
+  }
+}
 function DefaultTextInput({
   id,
   className,
   disabled,
   readOnly,
   "aria-label": ariaLabel,
+  "aria-describedby": ariaDescribedBy,
+  "aria-labelledby": ariaLabelledBy,
   name,
   label,
   required,
@@ -806,7 +836,9 @@ function DefaultTextInput({
   max,
   step
 }) {
+  const labelElement = label === void 0 ? null : id === void 0 ? /* @__PURE__ */ jsx("span", { children: label }) : /* @__PURE__ */ jsx("label", { htmlFor: id, children: label });
   return /* @__PURE__ */ jsxs(Fragment, { children: [
+    labelElement,
     /* @__PURE__ */ jsx(
       "input",
       {
@@ -816,7 +848,9 @@ function DefaultTextInput({
         disabled,
         readOnly,
         required,
-        "aria-label": ariaLabel ?? label,
+        "aria-label": ariaLabel,
+        "aria-describedby": ariaDescribedBy,
+        "aria-labelledby": ariaLabelledBy,
         "aria-invalid": error === true ? true : void 0,
         type: type === "text" ? void 0 : type,
         inputMode,
@@ -829,7 +863,7 @@ function DefaultTextInput({
         onChange: (event) => onChange(event.currentTarget.value)
       }
     ),
-    helperText === void 0 || helperText.length === 0 ? null : /* @__PURE__ */ jsx("small", { children: helperText })
+    helperText === void 0 || helperText.length === 0 ? null : /* @__PURE__ */ jsx("small", { id: ariaDescribedBy, children: helperText })
   ] });
 }
 function DefaultTextArea({
@@ -838,6 +872,8 @@ function DefaultTextArea({
   disabled,
   readOnly,
   "aria-label": ariaLabel,
+  "aria-describedby": ariaDescribedBy,
+  "aria-labelledby": ariaLabelledBy,
   name,
   label,
   required,
@@ -849,7 +885,9 @@ function DefaultTextArea({
   placeholder,
   maxLength
 }) {
+  const labelElement = label === void 0 ? null : id === void 0 ? /* @__PURE__ */ jsx("span", { children: label }) : /* @__PURE__ */ jsx("label", { htmlFor: id, children: label });
   return /* @__PURE__ */ jsxs(Fragment, { children: [
+    labelElement,
     /* @__PURE__ */ jsx(
       "textarea",
       {
@@ -859,7 +897,9 @@ function DefaultTextArea({
         disabled,
         readOnly,
         required,
-        "aria-label": ariaLabel ?? label,
+        "aria-label": ariaLabel,
+        "aria-describedby": ariaDescribedBy,
+        "aria-labelledby": ariaLabelledBy,
         "aria-invalid": error === true ? true : void 0,
         value,
         rows,
@@ -868,7 +908,7 @@ function DefaultTextArea({
         onChange: (event) => onChange(event.currentTarget.value)
       }
     ),
-    helperText === void 0 || helperText.length === 0 ? null : /* @__PURE__ */ jsx("small", { children: helperText })
+    helperText === void 0 || helperText.length === 0 ? null : /* @__PURE__ */ jsx("small", { id: ariaDescribedBy, children: helperText })
   ] });
 }
 function DefaultSelect({
@@ -876,6 +916,8 @@ function DefaultSelect({
   className,
   disabled,
   "aria-label": ariaLabel,
+  "aria-describedby": ariaDescribedBy,
+  "aria-labelledby": ariaLabelledBy,
   name,
   label,
   required,
@@ -885,7 +927,9 @@ function DefaultSelect({
   onChange,
   options
 }) {
+  const labelElement = label === void 0 ? null : id === void 0 ? /* @__PURE__ */ jsx("span", { children: label }) : /* @__PURE__ */ jsx("label", { htmlFor: id, children: label });
   return /* @__PURE__ */ jsxs(Fragment, { children: [
+    labelElement,
     /* @__PURE__ */ jsx(
       "select",
       {
@@ -894,14 +938,16 @@ function DefaultSelect({
         className,
         disabled,
         required,
-        "aria-label": ariaLabel ?? label,
+        "aria-label": ariaLabel,
+        "aria-describedby": ariaDescribedBy,
+        "aria-labelledby": ariaLabelledBy,
         "aria-invalid": error === true ? true : void 0,
         value,
         onChange: (event) => onChange(event.currentTarget.value),
         children: options.map((option) => /* @__PURE__ */ jsx("option", { value: option.value, disabled: option.disabled, children: option.label }, option.value))
       }
     ),
-    helperText === void 0 || helperText.length === 0 ? null : /* @__PURE__ */ jsx("small", { children: helperText })
+    helperText === void 0 || helperText.length === 0 ? null : /* @__PURE__ */ jsx("small", { id: ariaDescribedBy, children: helperText })
   ] });
 }
 function DefaultCheckbox({
@@ -960,8 +1006,8 @@ function DefaultFieldset({ className, legend, disabled, children }) {
     children
   ] });
 }
-function DefaultErrorMessage({ message }) {
-  return /* @__PURE__ */ jsx("p", { className: "form-engine-builder__error", children: message });
+function DefaultErrorMessage({ className, message }) {
+  return /* @__PURE__ */ jsx("p", { className, children: message });
 }
 var DEFAULT_COMPONENTS = {
   Button: DefaultButton,
@@ -972,41 +1018,101 @@ var DEFAULT_COMPONENTS = {
   Checkbox: DefaultCheckbox,
   Section: DefaultSection,
   Fieldset: DefaultFieldset,
-  ErrorMessage: DefaultErrorMessage
+  ErrorMessage: DefaultErrorMessage,
+  renderIcon: defaultIconFor
 };
 var BuilderPrimitiveContext = createContext({
   components: DEFAULT_COMPONENTS,
-  readOnly: false
+  readOnly: false,
+  unstyled: false
 });
+function withoutDefaultStyleClasses(className) {
+  const filtered = className?.split(/\s+/u).filter((name) => name.length > 0 && !name.startsWith("form-engine-builder") && !name.startsWith("feb-")).join(" ");
+  return filtered === void 0 || filtered.length === 0 ? void 0 : filtered;
+}
+function primitiveClassName(className, defaultClassName, unstyled) {
+  const userClassName = unstyled ? withoutDefaultStyleClasses(className) : className;
+  return [unstyled ? void 0 : defaultClassName, userClassName].filter((value) => value !== void 0).join(" ") || void 0;
+}
 function BuilderButton(props) {
   const context = useContext(BuilderPrimitiveContext);
   const Component = context.components.Button;
-  return /* @__PURE__ */ jsx(Component, { ...props, disabled: context.readOnly || props.disabled === true, readOnly: context.readOnly });
+  return /* @__PURE__ */ jsx(
+    Component,
+    {
+      ...props,
+      className: primitiveClassName(props.className, "feb-button", context.unstyled),
+      disabled: context.readOnly || props.disabled === true,
+      readOnly: context.readOnly
+    }
+  );
 }
 function BuilderIconButton(props) {
   const context = useContext(BuilderPrimitiveContext);
   const Component = context.components.IconButton;
-  return /* @__PURE__ */ jsx(Component, { ...props, disabled: context.readOnly || props.disabled === true, readOnly: context.readOnly });
+  const icon = props.actionType === void 0 ? props.icon ?? void 0 : context.components.renderIcon(props.actionType) ?? props.icon ?? defaultIconFor(props.actionType);
+  return /* @__PURE__ */ jsx(
+    Component,
+    {
+      ...props,
+      icon,
+      className: primitiveClassName(props.className, "feb-icon-button", context.unstyled),
+      disabled: context.readOnly || props.disabled === true,
+      readOnly: context.readOnly
+    }
+  );
 }
 function BuilderTextInput(props) {
   const context = useContext(BuilderPrimitiveContext);
   const Component = context.components.TextInput;
-  return /* @__PURE__ */ jsx(Component, { ...props, disabled: context.readOnly || props.disabled === true, readOnly: context.readOnly });
+  return /* @__PURE__ */ jsx(
+    Component,
+    {
+      ...props,
+      className: primitiveClassName(props.className, "feb-input", context.unstyled),
+      disabled: context.readOnly || props.disabled === true,
+      readOnly: context.readOnly
+    }
+  );
 }
 function BuilderTextArea(props) {
   const context = useContext(BuilderPrimitiveContext);
   const Component = context.components.TextArea;
-  return /* @__PURE__ */ jsx(Component, { ...props, disabled: context.readOnly || props.disabled === true, readOnly: context.readOnly });
+  return /* @__PURE__ */ jsx(
+    Component,
+    {
+      ...props,
+      className: primitiveClassName(props.className, "feb-textarea", context.unstyled),
+      disabled: context.readOnly || props.disabled === true,
+      readOnly: context.readOnly
+    }
+  );
 }
 function BuilderSelect(props) {
   const context = useContext(BuilderPrimitiveContext);
   const Component = context.components.Select;
-  return /* @__PURE__ */ jsx(Component, { ...props, disabled: context.readOnly || props.disabled === true, readOnly: context.readOnly });
+  return /* @__PURE__ */ jsx(
+    Component,
+    {
+      ...props,
+      className: primitiveClassName(props.className, "feb-select", context.unstyled),
+      disabled: context.readOnly || props.disabled === true,
+      readOnly: context.readOnly
+    }
+  );
 }
 function BuilderCheckbox(props) {
   const context = useContext(BuilderPrimitiveContext);
   const Component = context.components.Checkbox;
-  return /* @__PURE__ */ jsx(Component, { ...props, disabled: context.readOnly || props.disabled === true, readOnly: context.readOnly });
+  return /* @__PURE__ */ jsx(
+    Component,
+    {
+      ...props,
+      className: primitiveClassName(props.className, "feb-checkbox", context.unstyled),
+      disabled: context.readOnly || props.disabled === true,
+      readOnly: context.readOnly
+    }
+  );
 }
 function BuilderSection(props) {
   const Component = useContext(BuilderPrimitiveContext).components.Section;
@@ -1018,8 +1124,9 @@ function BuilderFieldset(props) {
   return /* @__PURE__ */ jsx(Component, { ...props, disabled: context.readOnly || props.disabled === true });
 }
 function BuilderErrorMessage(props) {
-  const Component = useContext(BuilderPrimitiveContext).components.ErrorMessage;
-  return /* @__PURE__ */ jsx(Component, { ...props });
+  const context = useContext(BuilderPrimitiveContext);
+  const Component = context.components.ErrorMessage;
+  return /* @__PURE__ */ jsx("div", { className: primitiveClassName(props.className, "form-engine-builder__error", context.unstyled), children: /* @__PURE__ */ jsx(Component, { message: props.message }) });
 }
 var GUARDED_COMPONENTS = {
   Button: BuilderButton,
@@ -1208,10 +1315,17 @@ function FormBuilder({
   readOnly = false,
   features,
   components: componentOverrides,
-  slots
+  slots,
+  disableDefaultStyles = false,
+  unstyled = false
 }) {
   const resolvedComponents = { ...DEFAULT_COMPONENTS, ...componentOverrides };
-  const components = GUARDED_COMPONENTS;
+  const components = {
+    ...GUARDED_COMPONENTS,
+    renderIcon: resolvedComponents.renderIcon
+  };
+  const defaultStylesDisabled = disableDefaultStyles || unstyled;
+  const builderClass = (value) => defaultStylesDisabled ? void 0 : value;
   const { Button, Checkbox, ErrorMessage, Fieldset, IconButton, Section, Select, TextArea, TextInput } = components;
   const ToolbarSlot = slots?.toolbar;
   const FieldEditorSlot = slots?.fieldEditor;
@@ -1494,817 +1608,818 @@ function FormBuilder({
       params: { locale: targetLocale }
     })
   };
-  return /* @__PURE__ */ jsx(BuilderPrimitiveContext.Provider, { value: { components: resolvedComponents, readOnly }, children: /* @__PURE__ */ jsx(
-    Section,
+  return /* @__PURE__ */ jsx(
+    BuilderPrimitiveContext.Provider,
     {
-      className: `form-engine-builder ${className}`.trim(),
-      "aria-label": translate("builder.formBuilder"),
-      onClickCapture: (event) => {
-        if (readOnly) return;
-        if (!(event.target instanceof HTMLElement)) return;
-        const actionTarget = event.target.closest("[data-builder-action]");
-        if (actionTarget?.dataset.builderAction === "addField" && maxFieldsReached && initialFieldType !== null)
-          addField();
-        if (actionTarget?.dataset.builderAction === "addLocale" && localeLimitReached && newLocale.trim().length > 0)
-          addLocale();
-        if (actionTarget?.dataset.builderAction !== "addOption") return;
-        const fieldId = actionTarget.dataset.targetId;
-        const field = schema.fields.find((candidate) => candidate.id === fieldId);
-        if (fieldId !== void 0 && field !== void 0 && "options" in field && policy?.maxOptionsPerField !== void 0 && field.options.length >= policy.maxOptionsPerField) {
-          addOption(fieldId);
-        }
-      },
-      children: /* @__PURE__ */ jsxs(Fieldset, { className: "form-engine-builder__controls", disabled: readOnly, children: [
-        /* @__PURE__ */ jsx(
-          Section,
-          {
-            className: "form-engine-builder__basic-settings",
-            headingId: "builder-basic-settings-heading",
-            title: translate("builder.basicSettings"),
-            children: /* @__PURE__ */ jsxs("div", { className: "form-engine-builder__grid", children: [
-              /* @__PURE__ */ jsxs("label", { children: [
-                translate("builder.formTitle"),
-                /* @__PURE__ */ jsx(
-                  TextInput,
-                  {
-                    name: "title",
-                    required: true,
-                    error: schema.title.trim().length === 0,
-                    helperText: schema.title.trim().length === 0 ? translate("builder.required") : "",
-                    value: schema.title,
-                    onChange: (value) => setSourceText({ kind: "form" }, "title", value)
-                  }
-                )
-              ] }),
-              /* @__PURE__ */ jsxs("label", { children: [
-                translate("builder.formDescription"),
-                /* @__PURE__ */ jsx(
-                  TextArea,
-                  {
-                    name: "description",
-                    rows: 3,
-                    value: schema.description ?? "",
-                    onChange: (value) => setSourceText({ kind: "form" }, "description", value)
-                  }
-                )
-              ] })
-            ] })
-          }
-        ),
-        pagesEnabled ? PagesSlot === void 0 ? /* @__PURE__ */ jsx(
-          Section,
-          {
-            className: "form-engine-builder__pages",
-            headingId: "builder-pages-heading",
-            title: translate("builder.pages"),
-            children: schema.pages === void 0 ? /* @__PURE__ */ jsx(Button, { onClick: enablePages, children: translate("builder.enablePages") }) : /* @__PURE__ */ jsxs(Fragment, { children: [
-              schema.pages.map((page, pageIndex) => {
-                const priorQuestionIds = new Set(
-                  schema.pages?.slice(0, pageIndex).flatMap((item) => item.questionIds)
-                );
-                const availableSources = schema.fields.filter((field) => priorQuestionIds.has(field.id));
-                const source = schema.fields.find((field) => field.id === page.displayCondition?.questionId);
-                return /* @__PURE__ */ jsxs(
-                  Fieldset,
-                  {
-                    className: "form-engine-builder__page",
-                    legend: page.title ?? `${translate("builder.newPage")} ${pageIndex + 1}`,
-                    children: [
-                      /* @__PURE__ */ jsx("div", { className: "form-engine-builder__toolbar", children: ToolbarSlot === void 0 ? /* @__PURE__ */ jsxs(Fragment, { children: [
-                        /* @__PURE__ */ jsx(
-                          IconButton,
-                          {
-                            icon: "\u2191",
-                            title: translate("builder.moveUp", { title: page.title ?? page.id }),
-                            disabled: pageIndex === 0,
-                            onClick: () => movePage(pageIndex, -1)
-                          }
-                        ),
-                        /* @__PURE__ */ jsx(
-                          IconButton,
-                          {
-                            icon: "\u2193",
-                            title: translate("builder.moveDown", { title: page.title ?? page.id }),
-                            disabled: pageIndex === (schema.pages?.length ?? 0) - 1,
-                            onClick: () => movePage(pageIndex, 1)
-                          }
-                        ),
-                        /* @__PURE__ */ jsx(Button, { onClick: () => removePage(pageIndex), variant: "danger", children: translate("builder.deleteAction") })
-                      ] }) : /* @__PURE__ */ jsx(
-                        ToolbarSlot,
-                        {
-                          schema,
-                          kind: "page",
-                          targetId: page.id,
-                          index: pageIndex,
-                          total: schema.pages?.length ?? 0,
-                          title: page.title ?? page.id,
-                          onMoveUp: () => movePage(pageIndex, -1),
-                          onMoveDown: () => movePage(pageIndex, 1),
-                          onRemove: () => removePage(pageIndex),
-                          readOnly,
-                          actions,
-                          components
-                        }
-                      ) }),
-                      /* @__PURE__ */ jsxs("div", { className: "form-engine-builder__grid", children: [
-                        /* @__PURE__ */ jsxs("label", { children: [
-                          translate("builder.pageTitle"),
-                          /* @__PURE__ */ jsx(
-                            TextInput,
-                            {
-                              value: page.title ?? "",
-                              onChange: (value) => {
-                                updatePage(page.id, (current) => {
-                                  if (value.length > 0) return { ...current, title: value };
-                                  const { title: _title, ...withoutTitle } = current;
-                                  return withoutTitle;
-                                });
-                              }
-                            }
-                          )
-                        ] }),
-                        /* @__PURE__ */ jsxs("label", { children: [
-                          translate("builder.pageDescription"),
-                          /* @__PURE__ */ jsx(
-                            TextInput,
-                            {
-                              value: page.description ?? "",
-                              onChange: (value) => {
-                                updatePage(page.id, (current) => {
-                                  if (value.length > 0) return { ...current, description: value };
-                                  const { description: _description, ...withoutDescription } = current;
-                                  return withoutDescription;
-                                });
+      value: { components: resolvedComponents, readOnly, unstyled: defaultStylesDisabled },
+      children: /* @__PURE__ */ jsx(
+        Section,
+        {
+          className: defaultStylesDisabled ? className || void 0 : `form-engine-builder ${className}`.trim(),
+          "aria-label": translate("builder.formBuilder"),
+          onClickCapture: (event) => {
+            if (readOnly) return;
+            if (!(event.target instanceof HTMLElement)) return;
+            const actionTarget = event.target.closest("[data-builder-action]");
+            if (actionTarget?.dataset.builderAction === "addField" && maxFieldsReached && initialFieldType !== null)
+              addField();
+            if (actionTarget?.dataset.builderAction === "addLocale" && localeLimitReached && newLocale.trim().length > 0)
+              addLocale();
+            if (actionTarget?.dataset.builderAction !== "addOption") return;
+            const fieldId = actionTarget.dataset.targetId;
+            const field = schema.fields.find((candidate) => candidate.id === fieldId);
+            if (fieldId !== void 0 && field !== void 0 && "options" in field && policy?.maxOptionsPerField !== void 0 && field.options.length >= policy.maxOptionsPerField) {
+              addOption(fieldId);
+            }
+          },
+          children: /* @__PURE__ */ jsxs(Fieldset, { className: builderClass("form-engine-builder__controls"), disabled: readOnly, children: [
+            /* @__PURE__ */ jsx(
+              Section,
+              {
+                className: builderClass("form-engine-builder__basic-settings"),
+                headingId: "builder-basic-settings-heading",
+                title: translate("builder.basicSettings"),
+                children: /* @__PURE__ */ jsxs("div", { className: builderClass("form-engine-builder__grid"), children: [
+                  /* @__PURE__ */ jsx("div", { className: builderClass("form-engine-builder__field"), children: /* @__PURE__ */ jsx(
+                    TextInput,
+                    {
+                      id: "builder-form-title",
+                      name: "title",
+                      label: translate("builder.formTitle"),
+                      required: true,
+                      error: schema.title.trim().length === 0,
+                      helperText: schema.title.trim().length === 0 ? translate("builder.required") : "",
+                      "aria-describedby": schema.title.trim().length === 0 ? "builder-form-title-error" : void 0,
+                      value: schema.title,
+                      onChange: (value) => setSourceText({ kind: "form" }, "title", value)
+                    }
+                  ) }),
+                  /* @__PURE__ */ jsx("div", { className: builderClass("form-engine-builder__field"), children: /* @__PURE__ */ jsx(
+                    TextArea,
+                    {
+                      id: "builder-form-description",
+                      name: "description",
+                      label: translate("builder.formDescription"),
+                      rows: 3,
+                      value: schema.description ?? "",
+                      onChange: (value) => setSourceText({ kind: "form" }, "description", value)
+                    }
+                  ) })
+                ] })
+              }
+            ),
+            pagesEnabled ? PagesSlot === void 0 ? /* @__PURE__ */ jsx(
+              Section,
+              {
+                className: builderClass("form-engine-builder__pages"),
+                headingId: "builder-pages-heading",
+                title: translate("builder.pages"),
+                children: schema.pages === void 0 ? /* @__PURE__ */ jsx(Button, { onClick: enablePages, children: translate("builder.enablePages") }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+                  schema.pages.map((page, pageIndex) => {
+                    const priorQuestionIds = new Set(
+                      schema.pages?.slice(0, pageIndex).flatMap((item) => item.questionIds)
+                    );
+                    const availableSources = schema.fields.filter((field) => priorQuestionIds.has(field.id));
+                    const source = schema.fields.find((field) => field.id === page.displayCondition?.questionId);
+                    return /* @__PURE__ */ jsxs(
+                      Fieldset,
+                      {
+                        className: builderClass("form-engine-builder__page"),
+                        legend: page.title ?? `${translate("builder.newPage")} ${pageIndex + 1}`,
+                        children: [
+                          /* @__PURE__ */ jsx("div", { className: builderClass("form-engine-builder__toolbar"), children: ToolbarSlot === void 0 ? /* @__PURE__ */ jsxs(Fragment, { children: [
+                            /* @__PURE__ */ jsx(
+                              IconButton,
+                              {
+                                actionType: "moveUp",
+                                title: translate("builder.moveUp", { title: page.title ?? page.id }),
+                                disabled: pageIndex === 0,
+                                onClick: () => movePage(pageIndex, -1)
                               }
-                            }
-                          )
-                        ] })
-                      ] }),
-                      !localizationEnabled || editingLocale.length === 0 ? null : /* @__PURE__ */ jsxs("div", { className: "form-engine-builder__translation-editor", children: [
-                        /* @__PURE__ */ jsx("strong", { children: editingLocale }),
-                        /* @__PURE__ */ jsxs("div", { className: "form-engine-builder__grid", children: [
-                          /* @__PURE__ */ jsxs("label", { children: [
-                            translate("builder.pageTitle"),
+                            ),
                             /* @__PURE__ */ jsx(
-                              TextInput,
+                              IconButton,
                               {
-                                value: page.translations?.[editingLocale]?.title ?? "",
-                                onChange: (value) => updateManualTranslation({
-                                  locale: editingLocale,
-                                  kind: "page",
-                                  nodeId: page.id,
-                                  property: "title",
-                                  sourceText: page.title ?? "",
-                                  translatedText: value,
-                                  ...page.translationMetadata?.[editingLocale]?.title === void 0 ? {} : {
-                                    existingTranslationMetadata: page.translationMetadata[editingLocale]?.title
-                                  }
-                                })
+                                actionType: "moveDown",
+                                title: translate("builder.moveDown", { title: page.title ?? page.id }),
+                                disabled: pageIndex === (schema.pages?.length ?? 0) - 1,
+                                onClick: () => movePage(pageIndex, 1)
                               }
-                            )
-                          ] }),
-                          /* @__PURE__ */ jsxs("label", { children: [
-                            translate("builder.pageDescription"),
+                            ),
                             /* @__PURE__ */ jsx(
-                              TextInput,
+                              IconButton,
                               {
-                                value: page.translations?.[editingLocale]?.description ?? "",
-                                onChange: (value) => updateManualTranslation({
-                                  locale: editingLocale,
-                                  kind: "page",
-                                  nodeId: page.id,
-                                  property: "description",
-                                  sourceText: page.description ?? "",
-                                  translatedText: value,
-                                  ...page.translationMetadata?.[editingLocale]?.description === void 0 ? {} : {
-                                    existingTranslationMetadata: page.translationMetadata[editingLocale]?.description
-                                  }
-                                })
+                                actionType: "delete",
+                                title: translate("builder.delete", { title: page.title ?? page.id }),
+                                onClick: () => removePage(pageIndex)
                               }
                             )
-                          ] })
-                        ] })
-                      ] }),
-                      conditionsEnabled ? /* @__PURE__ */ jsxs("div", { className: "form-engine-builder__condition", children: [
-                        /* @__PURE__ */ jsxs("label", { children: [
-                          translate("builder.pageCondition"),
-                          /* @__PURE__ */ jsx(
-                            Select,
-                            {
-                              value: page.displayCondition?.questionId ?? "",
-                              onChange: (value) => {
-                                const selected = schema.fields.find((field) => field.id === value);
-                                updatePage(page.id, (current) => {
-                                  if (selected === void 0) {
-                                    const { displayCondition: _condition, ...withoutCondition } = current;
-                                    return withoutCondition;
-                                  }
-                                  return {
-                                    ...current,
-                                    displayCondition: conditionWithValue(
-                                      selected.id,
-                                      conditionOperators(selected)[0] ?? "not_empty",
-                                      defaultConditionValue(selected)
-                                    )
-                                  };
-                                });
-                              },
-                              options: [
-                                { value: "", label: translate("builder.alwaysVisible") },
-                                ...availableSources.map((field) => ({ value: field.id, label: field.title }))
-                              ]
-                            }
-                          )
-                        ] }),
-                        page.displayCondition !== void 0 && source !== void 0 ? /* @__PURE__ */ jsxs(Fragment, { children: [
-                          /* @__PURE__ */ jsx(
-                            Select,
-                            {
-                              "aria-label": translate("builder.conditionOperator"),
-                              value: page.displayCondition.operator,
-                              onChange: (value) => {
-                                const operator = value;
-                                updatePage(page.id, (current) => ({
-                                  ...current,
-                                  displayCondition: conditionWithValue(
-                                    source.id,
-                                    operator,
-                                    defaultConditionValue(source)
-                                  )
-                                }));
-                              },
-                              options: conditionOperators(source).map((operator) => ({
-                                value: operator,
-                                label: translate(operatorKey(operator))
-                              }))
-                            }
-                          ),
-                          /* @__PURE__ */ jsx(
-                            ConditionValueEditor,
+                          ] }) : /* @__PURE__ */ jsx(
+                            ToolbarSlot,
                             {
-                              source,
-                              condition: page.displayCondition,
-                              onChange: (condition) => updatePage(page.id, (current) => ({ ...current, displayCondition: condition })),
-                              translate,
+                              schema,
+                              kind: "page",
+                              targetId: page.id,
+                              index: pageIndex,
+                              total: schema.pages?.length ?? 0,
+                              title: page.title ?? page.id,
+                              onMoveUp: () => movePage(pageIndex, -1),
+                              onMoveDown: () => movePage(pageIndex, 1),
+                              onRemove: () => removePage(pageIndex),
+                              readOnly,
+                              actions,
                               components
                             }
-                          )
-                        ] }) : null
-                      ] }) : null
-                    ]
+                          ) }),
+                          /* @__PURE__ */ jsxs("div", { className: builderClass("form-engine-builder__grid"), children: [
+                            /* @__PURE__ */ jsx("div", { className: builderClass("form-engine-builder__field"), children: /* @__PURE__ */ jsx(
+                              TextInput,
+                              {
+                                id: `builder-page-${page.id}-title`,
+                                label: translate("builder.pageTitle"),
+                                value: page.title ?? "",
+                                onChange: (value) => {
+                                  updatePage(page.id, (current) => {
+                                    if (value.length > 0) return { ...current, title: value };
+                                    const { title: _title, ...withoutTitle } = current;
+                                    return withoutTitle;
+                                  });
+                                }
+                              }
+                            ) }),
+                            /* @__PURE__ */ jsx("div", { className: builderClass("form-engine-builder__field"), children: /* @__PURE__ */ jsx(
+                              TextInput,
+                              {
+                                id: `builder-page-${page.id}-description`,
+                                label: translate("builder.pageDescription"),
+                                value: page.description ?? "",
+                                onChange: (value) => {
+                                  updatePage(page.id, (current) => {
+                                    if (value.length > 0) return { ...current, description: value };
+                                    const { description: _description, ...withoutDescription } = current;
+                                    return withoutDescription;
+                                  });
+                                }
+                              }
+                            ) })
+                          ] }),
+                          !localizationEnabled || editingLocale.length === 0 ? null : /* @__PURE__ */ jsxs("div", { className: builderClass("form-engine-builder__translation-editor"), children: [
+                            /* @__PURE__ */ jsx("strong", { children: editingLocale }),
+                            /* @__PURE__ */ jsxs("div", { className: builderClass("form-engine-builder__grid"), children: [
+                              /* @__PURE__ */ jsx("div", { className: builderClass("form-engine-builder__field"), children: /* @__PURE__ */ jsx(
+                                TextInput,
+                                {
+                                  id: `builder-page-${page.id}-${editingLocale}-title`,
+                                  label: translate("builder.pageTitle"),
+                                  value: page.translations?.[editingLocale]?.title ?? "",
+                                  onChange: (value) => updateManualTranslation({
+                                    locale: editingLocale,
+                                    kind: "page",
+                                    nodeId: page.id,
+                                    property: "title",
+                                    sourceText: page.title ?? "",
+                                    translatedText: value,
+                                    ...page.translationMetadata?.[editingLocale]?.title === void 0 ? {} : {
+                                      existingTranslationMetadata: page.translationMetadata[editingLocale]?.title
+                                    }
+                                  })
+                                }
+                              ) }),
+                              /* @__PURE__ */ jsx("div", { className: builderClass("form-engine-builder__field"), children: /* @__PURE__ */ jsx(
+                                TextInput,
+                                {
+                                  id: `builder-page-${page.id}-${editingLocale}-description`,
+                                  label: translate("builder.pageDescription"),
+                                  value: page.translations?.[editingLocale]?.description ?? "",
+                                  onChange: (value) => updateManualTranslation({
+                                    locale: editingLocale,
+                                    kind: "page",
+                                    nodeId: page.id,
+                                    property: "description",
+                                    sourceText: page.description ?? "",
+                                    translatedText: value,
+                                    ...page.translationMetadata?.[editingLocale]?.description === void 0 ? {} : {
+                                      existingTranslationMetadata: page.translationMetadata[editingLocale]?.description
+                                    }
+                                  })
+                                }
+                              ) })
+                            ] })
+                          ] }),
+                          conditionsEnabled ? /* @__PURE__ */ jsxs("div", { className: builderClass("form-engine-builder__condition"), children: [
+                            /* @__PURE__ */ jsx("div", { className: builderClass("form-engine-builder__field"), children: /* @__PURE__ */ jsx(
+                              Select,
+                              {
+                                id: `builder-page-${page.id}-condition`,
+                                label: translate("builder.pageCondition"),
+                                value: page.displayCondition?.questionId ?? "",
+                                onChange: (value) => {
+                                  const selected = schema.fields.find((field) => field.id === value);
+                                  updatePage(page.id, (current) => {
+                                    if (selected === void 0) {
+                                      const { displayCondition: _condition, ...withoutCondition } = current;
+                                      return withoutCondition;
+                                    }
+                                    return {
+                                      ...current,
+                                      displayCondition: conditionWithValue(
+                                        selected.id,
+                                        conditionOperators(selected)[0] ?? "not_empty",
+                                        defaultConditionValue(selected)
+                                      )
+                                    };
+                                  });
+                                },
+                                options: [
+                                  { value: "", label: translate("builder.alwaysVisible") },
+                                  ...availableSources.map((field) => ({ value: field.id, label: field.title }))
+                                ]
+                              }
+                            ) }),
+                            page.displayCondition !== void 0 && source !== void 0 ? /* @__PURE__ */ jsxs(Fragment, { children: [
+                              /* @__PURE__ */ jsx(
+                                Select,
+                                {
+                                  "aria-label": translate("builder.conditionOperator"),
+                                  value: page.displayCondition.operator,
+                                  onChange: (value) => {
+                                    const operator = value;
+                                    updatePage(page.id, (current) => ({
+                                      ...current,
+                                      displayCondition: conditionWithValue(
+                                        source.id,
+                                        operator,
+                                        defaultConditionValue(source)
+                                      )
+                                    }));
+                                  },
+                                  options: conditionOperators(source).map((operator) => ({
+                                    value: operator,
+                                    label: translate(operatorKey(operator))
+                                  }))
+                                }
+                              ),
+                              /* @__PURE__ */ jsx(
+                                ConditionValueEditor,
+                                {
+                                  source,
+                                  condition: page.displayCondition,
+                                  onChange: (condition) => updatePage(page.id, (current) => ({ ...current, displayCondition: condition })),
+                                  translate,
+                                  components
+                                }
+                              )
+                            ] }) : null
+                          ] }) : null
+                        ]
+                      },
+                      page.id
+                    );
+                  }),
+                  /* @__PURE__ */ jsxs("div", { className: builderClass("form-engine-builder__page-add"), children: [
+                    /* @__PURE__ */ jsx("div", { className: builderClass("form-engine-builder__field"), children: /* @__PURE__ */ jsx(
+                      Select,
+                      {
+                        id: "builder-page-question",
+                        label: translate("builder.pageQuestion"),
+                        value: newPageQuestionId,
+                        disabled: movablePageQuestions.length === 0,
+                        onChange: setNewPageQuestionId,
+                        options: [
+                          { value: "", label: "\u2014" },
+                          ...schema.fields.filter((field) => movablePageQuestions.includes(field.id)).map((field) => ({ value: field.id, label: field.title }))
+                        ]
+                      }
+                    ) }),
+                    /* @__PURE__ */ jsx(Button, { disabled: movablePageQuestions.length === 0, onClick: addPage, children: translate("builder.addPage") })
+                  ] })
+                ] })
+              }
+            ) : /* @__PURE__ */ jsx(
+              PagesSlot,
+              {
+                schema,
+                currentLocale: editingLocale,
+                readOnly,
+                actions,
+                components
+              }
+            ) : null,
+            localizationEnabled ? LocalizationSlot === void 0 ? /* @__PURE__ */ jsxs(
+              Section,
+              {
+                className: builderClass("form-engine-builder__localization"),
+                headingId: "builder-localization-heading",
+                title: translate("builder.localization"),
+                children: [
+                  /* @__PURE__ */ jsx("div", { className: builderClass("form-engine-builder__field"), children: /* @__PURE__ */ jsx(
+                    TextInput,
+                    {
+                      id: "builder-completion-message",
+                      label: translate("builder.completionMessage"),
+                      value: schema.completionMessage ?? "",
+                      onChange: (value) => setSourceText({ kind: "form" }, "completionMessage", value)
+                    }
+                  ) }),
+                  /* @__PURE__ */ jsxs("div", { className: builderClass("form-engine-builder__grid"), children: [
+                    /* @__PURE__ */ jsx("div", { className: builderClass("form-engine-builder__field"), children: /* @__PURE__ */ jsx(
+                      TextInput,
+                      {
+                        id: "builder-default-locale",
+                        label: translate("builder.defaultLocale"),
+                        value: schema.defaultLocale ?? "",
+                        onChange: setDefaultLocale
+                      }
+                    ) }),
+                    /* @__PURE__ */ jsx("div", { className: builderClass("form-engine-builder__field"), children: availableAllowedLocales === void 0 ? /* @__PURE__ */ jsx(
+                      TextInput,
+                      {
+                        id: "builder-new-locale",
+                        label: translate("builder.addLocale"),
+                        value: newLocale,
+                        onChange: setNewLocale
+                      }
+                    ) : /* @__PURE__ */ jsx(
+                      Select,
+                      {
+                        id: "builder-new-locale",
+                        label: translate("builder.addLocale"),
+                        value: newLocale,
+                        onChange: setNewLocale,
+                        options: [
+                          { value: "", label: "\u2014" },
+                          ...availableAllowedLocales.map((candidate) => ({ value: candidate, label: candidate }))
+                        ]
+                      }
+                    ) }),
+                    /* @__PURE__ */ jsx(
+                      Button,
+                      {
+                        action: "addLocale",
+                        disabled: newLocale.trim().length === 0 || localeLimitReached,
+                        onClick: addLocale,
+                        children: translate("builder.addLocale")
+                      }
+                    ),
+                    /* @__PURE__ */ jsx("div", { className: builderClass("form-engine-builder__field"), children: /* @__PURE__ */ jsx(
+                      Select,
+                      {
+                        id: "builder-edit-locale",
+                        label: translate("builder.editLocale"),
+                        value: editingLocale,
+                        onChange: setEditingLocale,
+                        options: [
+                          { value: "", label: "\u2014" },
+                          ...(schema.supportedLocales ?? []).filter((item) => item !== schema.defaultLocale).map((item) => ({ value: item, label: item }))
+                        ]
+                      }
+                    ) }),
+                    TranslationActionsSlot === void 0 ? /* @__PURE__ */ jsx(
+                      Button,
+                      {
+                        disabled: translationAdapter === void 0 || editingLocale.length === 0 || isTranslating,
+                        onClick: () => void translateAll(),
+                        children: translate("builder.autoTranslate")
+                      }
+                    ) : /* @__PURE__ */ jsx(
+                      TranslationActionsSlot,
+                      {
+                        schema,
+                        currentLocale: editingLocale,
+                        onAutoTranslate: () => void translateAll(),
+                        isTranslating,
+                        ...translationError === null ? {} : { translationError },
+                        ...translationReport === void 0 ? {} : { translationReport },
+                        onClearTranslationError: () => setTranslationError(null),
+                        readOnly,
+                        actions,
+                        components
+                      }
+                    )
+                  ] }),
+                  translationAdapter === void 0 ? /* @__PURE__ */ jsx("p", { children: translate("builder.translationUnavailable") }) : null,
+                  translationError === null ? null : /* @__PURE__ */ jsx(ErrorMessage, { message: translationError }),
+                  editingLocale.length === 0 ? null : /* @__PURE__ */ jsxs("div", { className: builderClass("form-engine-builder__grid"), children: [
+                    /* @__PURE__ */ jsx("div", { className: builderClass("form-engine-builder__field"), children: /* @__PURE__ */ jsx(
+                      TextInput,
+                      {
+                        id: `builder-${editingLocale}-form-title`,
+                        label: translate("builder.questionTitle"),
+                        value: schema.translations?.[editingLocale]?.title ?? "",
+                        onChange: (value) => updateFormTranslation("title", value)
+                      }
+                    ) }),
+                    /* @__PURE__ */ jsx("div", { className: builderClass("form-engine-builder__field"), children: /* @__PURE__ */ jsx(
+                      TextInput,
+                      {
+                        id: `builder-${editingLocale}-form-description`,
+                        label: translate("builder.pageDescription"),
+                        value: schema.translations?.[editingLocale]?.description ?? "",
+                        onChange: (value) => updateFormTranslation("description", value)
+                      }
+                    ) }),
+                    /* @__PURE__ */ jsx("div", { className: builderClass("form-engine-builder__field"), children: /* @__PURE__ */ jsx(
+                      TextInput,
+                      {
+                        id: `builder-${editingLocale}-completion-message`,
+                        label: translate("builder.completionMessage"),
+                        value: schema.translations?.[editingLocale]?.completionMessage ?? "",
+                        onChange: (value) => updateFormTranslation("completionMessage", value)
+                      }
+                    ) })
+                  ] })
+                ]
+              }
+            ) : /* @__PURE__ */ jsx(
+              LocalizationSlot,
+              {
+                schema,
+                currentLocale: editingLocale,
+                onCurrentLocaleChange: setEditingLocale,
+                onAutoTranslate: () => void translateAll(),
+                isTranslating,
+                ...translationError === null ? {} : { translationError },
+                readOnly,
+                actions,
+                components
+              }
+            ) : null,
+            /* @__PURE__ */ jsx("div", { className: builderClass("form-engine-builder__list"), children: schema.fields.map((field, index) => {
+              const condition = field.displayCondition;
+              const source = condition === void 0 ? void 0 : schema.fields.find((item) => item.id === condition.questionId);
+              const availableSources = schema.fields.slice(0, index);
+              if (FieldEditorSlot !== void 0) {
+                return /* @__PURE__ */ jsx(
+                  FieldEditorSlot,
+                  {
+                    schema,
+                    field,
+                    index,
+                    currentLocale: editingLocale,
+                    ...policy === void 0 ? {} : { policy },
+                    readOnly,
+                    actions,
+                    components
                   },
-                  page.id
+                  field.id
                 );
-              }),
-              /* @__PURE__ */ jsxs("div", { className: "form-engine-builder__page-add", children: [
-                /* @__PURE__ */ jsxs("label", { children: [
-                  translate("builder.pageQuestion"),
+              }
+              return /* @__PURE__ */ jsxs(Fieldset, { className: builderClass("form-engine-builder__question"), legend: field.title, children: [
+                /* @__PURE__ */ jsx("div", { className: builderClass("form-engine-builder__toolbar"), children: ToolbarSlot === void 0 ? /* @__PURE__ */ jsxs(Fragment, { children: [
                   /* @__PURE__ */ jsx(
-                    Select,
+                    IconButton,
                     {
-                      value: newPageQuestionId,
-                      disabled: movablePageQuestions.length === 0,
-                      onChange: setNewPageQuestionId,
-                      options: [
-                        { value: "", label: "\u2014" },
-                        ...schema.fields.filter((field) => movablePageQuestions.includes(field.id)).map((field) => ({ value: field.id, label: field.title }))
-                      ]
+                      actionType: "moveUp",
+                      title: translate("builder.moveUp", { title: field.title }),
+                      disabled: index === 0,
+                      onClick: () => moveField(index, -1)
                     }
-                  )
-                ] }),
-                /* @__PURE__ */ jsx(Button, { disabled: movablePageQuestions.length === 0, onClick: addPage, children: translate("builder.addPage") })
-              ] })
-            ] })
-          }
-        ) : /* @__PURE__ */ jsx(
-          PagesSlot,
-          {
-            schema,
-            currentLocale: editingLocale,
-            readOnly,
-            actions,
-            components
-          }
-        ) : null,
-        localizationEnabled ? LocalizationSlot === void 0 ? /* @__PURE__ */ jsxs(
-          Section,
-          {
-            className: "form-engine-builder__localization",
-            headingId: "builder-localization-heading",
-            title: translate("builder.localization"),
-            children: [
-              /* @__PURE__ */ jsxs("label", { children: [
-                translate("builder.completionMessage"),
-                /* @__PURE__ */ jsx(
-                  TextInput,
-                  {
-                    value: schema.completionMessage ?? "",
-                    onChange: (value) => setSourceText({ kind: "form" }, "completionMessage", value)
-                  }
-                )
-              ] }),
-              /* @__PURE__ */ jsxs("div", { className: "form-engine-builder__grid", children: [
-                /* @__PURE__ */ jsxs("label", { children: [
-                  translate("builder.defaultLocale"),
-                  /* @__PURE__ */ jsx(TextInput, { value: schema.defaultLocale ?? "", onChange: setDefaultLocale })
-                ] }),
-                /* @__PURE__ */ jsxs("label", { htmlFor: "builder-new-locale", children: [
-                  translate("builder.addLocale"),
-                  availableAllowedLocales === void 0 ? /* @__PURE__ */ jsx(TextInput, { id: "builder-new-locale", value: newLocale, onChange: setNewLocale }) : /* @__PURE__ */ jsx(
-                    Select,
+                  ),
+                  /* @__PURE__ */ jsx(
+                    IconButton,
                     {
-                      id: "builder-new-locale",
-                      value: newLocale,
-                      onChange: setNewLocale,
-                      options: [
-                        { value: "", label: "\u2014" },
-                        ...availableAllowedLocales.map((candidate) => ({ value: candidate, label: candidate }))
-                      ]
+                      actionType: "moveDown",
+                      title: translate("builder.moveDown", { title: field.title }),
+                      disabled: index === schema.fields.length - 1,
+                      onClick: () => moveField(index, 1)
                     }
-                  )
-                ] }),
-                /* @__PURE__ */ jsx(
-                  Button,
-                  {
-                    action: "addLocale",
-                    disabled: newLocale.trim().length === 0 || localeLimitReached,
-                    onClick: addLocale,
-                    children: translate("builder.addLocale")
-                  }
-                ),
-                /* @__PURE__ */ jsxs("label", { children: [
-                  translate("builder.editLocale"),
+                  ),
                   /* @__PURE__ */ jsx(
-                    Select,
+                    IconButton,
                     {
-                      value: editingLocale,
-                      onChange: setEditingLocale,
-                      options: [
-                        { value: "", label: "\u2014" },
-                        ...(schema.supportedLocales ?? []).filter((item) => item !== schema.defaultLocale).map((item) => ({ value: item, label: item }))
-                      ]
+                      actionType: "delete",
+                      disabled: schema.fields.length === 1,
+                      onClick: () => removeField(field.id),
+                      "aria-label": translate("builder.delete", { title: field.title }),
+                      title: translate("builder.delete", { title: field.title })
                     }
                   )
-                ] }),
-                TranslationActionsSlot === void 0 ? /* @__PURE__ */ jsx(
-                  Button,
-                  {
-                    disabled: translationAdapter === void 0 || editingLocale.length === 0 || isTranslating,
-                    onClick: () => void translateAll(),
-                    children: translate("builder.autoTranslate")
-                  }
-                ) : /* @__PURE__ */ jsx(
-                  TranslationActionsSlot,
+                ] }) : /* @__PURE__ */ jsx(
+                  ToolbarSlot,
                   {
                     schema,
-                    currentLocale: editingLocale,
-                    onAutoTranslate: () => void translateAll(),
-                    isTranslating,
-                    ...translationError === null ? {} : { translationError },
-                    ...translationReport === void 0 ? {} : { translationReport },
-                    onClearTranslationError: () => setTranslationError(null),
+                    kind: "field",
+                    targetId: field.id,
+                    index,
+                    total: schema.fields.length,
+                    title: field.title,
+                    onMoveUp: () => moveField(index, -1),
+                    onMoveDown: () => moveField(index, 1),
+                    onRemove: () => removeField(field.id),
                     readOnly,
                     actions,
                     components
                   }
-                )
-              ] }),
-              translationAdapter === void 0 ? /* @__PURE__ */ jsx("p", { children: translate("builder.translationUnavailable") }) : null,
-              translationError === null ? null : /* @__PURE__ */ jsx(ErrorMessage, { message: translationError }),
-              editingLocale.length === 0 ? null : /* @__PURE__ */ jsxs("div", { className: "form-engine-builder__grid", children: [
-                /* @__PURE__ */ jsxs("label", { children: [
-                  translate("builder.questionTitle"),
-                  /* @__PURE__ */ jsx(
+                ) }),
+                /* @__PURE__ */ jsxs("div", { className: builderClass("form-engine-builder__grid"), children: [
+                  /* @__PURE__ */ jsx("div", { className: builderClass("form-engine-builder__field"), children: /* @__PURE__ */ jsx(
                     TextInput,
                     {
-                      value: schema.translations?.[editingLocale]?.title ?? "",
-                      onChange: (value) => updateFormTranslation("title", value)
+                      id: `builder-field-${field.id}-title`,
+                      name: `fields.${field.id}.title`,
+                      label: translate("builder.questionTitle"),
+                      required: true,
+                      error: field.title.trim().length === 0,
+                      helperText: field.title.trim().length === 0 ? translate("builder.required") : "",
+                      "aria-describedby": field.title.trim().length === 0 ? `builder-field-${field.id}-title-error` : void 0,
+                      value: field.title,
+                      placeholder: translate("builder.questionTitlePlaceholder"),
+                      onChange: (value) => updateField(field.id, (current) => ({
+                        ...current,
+                        title: value.trim().length === 0 ? current.title : value
+                      }))
                     }
-                  )
-                ] }),
-                /* @__PURE__ */ jsxs("label", { children: [
-                  translate("builder.pageDescription"),
-                  /* @__PURE__ */ jsx(
-                    TextInput,
+                  ) }),
+                  /* @__PURE__ */ jsx("div", { className: builderClass("form-engine-builder__field"), children: /* @__PURE__ */ jsx(
+                    Select,
                     {
-                      value: schema.translations?.[editingLocale]?.description ?? "",
-                      onChange: (value) => updateFormTranslation("description", value)
+                      id: `builder-field-${field.id}-type`,
+                      label: translate("builder.type"),
+                      value: field.type,
+                      onChange: (value) => changeType(field.id, value),
+                      options: FIELD_TYPES.filter(
+                        (type) => policy?.allowedFieldTypes === void 0 || policy.allowedFieldTypes.includes(type)
+                      ).map((type) => ({ value: type, label: translate(fieldTypeKey(type)) }))
                     }
-                  )
-                ] }),
-                /* @__PURE__ */ jsxs("label", { children: [
-                  translate("builder.completionMessage"),
+                  ) }),
                   /* @__PURE__ */ jsx(
-                    TextInput,
+                    Checkbox,
                     {
-                      value: schema.translations?.[editingLocale]?.completionMessage ?? "",
-                      onChange: (value) => updateFormTranslation("completionMessage", value)
+                      className: builderClass("form-engine-builder__check"),
+                      checked: field.required === true,
+                      onChange: (checked) => updateField(field.id, (current) => ({ ...current, required: checked })),
+                      label: translate("builder.required")
                     }
                   )
-                ] })
-              ] })
-            ]
-          }
-        ) : /* @__PURE__ */ jsx(
-          LocalizationSlot,
-          {
-            schema,
-            currentLocale: editingLocale,
-            onCurrentLocaleChange: setEditingLocale,
-            onAutoTranslate: () => void translateAll(),
-            isTranslating,
-            ...translationError === null ? {} : { translationError },
-            readOnly,
-            actions,
-            components
-          }
-        ) : null,
-        /* @__PURE__ */ jsx("div", { className: "form-engine-builder__list", children: schema.fields.map((field, index) => {
-          const condition = field.displayCondition;
-          const source = condition === void 0 ? void 0 : schema.fields.find((item) => item.id === condition.questionId);
-          const availableSources = schema.fields.slice(0, index);
-          if (FieldEditorSlot !== void 0) {
-            return /* @__PURE__ */ jsx(
-              FieldEditorSlot,
-              {
-                schema,
-                field,
-                index,
-                currentLocale: editingLocale,
-                ...policy === void 0 ? {} : { policy },
-                readOnly,
-                actions,
-                components
-              },
-              field.id
-            );
-          }
-          return /* @__PURE__ */ jsxs(Fieldset, { className: "form-engine-builder__question", legend: field.title, children: [
-            /* @__PURE__ */ jsx("div", { className: "form-engine-builder__toolbar", children: ToolbarSlot === void 0 ? /* @__PURE__ */ jsxs(Fragment, { children: [
-              /* @__PURE__ */ jsx(
-                IconButton,
-                {
-                  icon: "\u2191",
-                  title: translate("builder.moveUp", { title: field.title }),
-                  disabled: index === 0,
-                  onClick: () => moveField(index, -1)
-                }
-              ),
-              /* @__PURE__ */ jsx(
-                IconButton,
-                {
-                  icon: "\u2193",
-                  title: translate("builder.moveDown", { title: field.title }),
-                  disabled: index === schema.fields.length - 1,
-                  onClick: () => moveField(index, 1)
-                }
-              ),
-              /* @__PURE__ */ jsx(
-                Button,
-                {
-                  disabled: schema.fields.length === 1,
-                  onClick: () => removeField(field.id),
-                  "aria-label": translate("builder.delete", { title: field.title }),
-                  variant: "danger",
-                  children: translate("builder.deleteAction")
-                }
-              )
-            ] }) : /* @__PURE__ */ jsx(
-              ToolbarSlot,
-              {
-                schema,
-                kind: "field",
-                targetId: field.id,
-                index,
-                total: schema.fields.length,
-                title: field.title,
-                onMoveUp: () => moveField(index, -1),
-                onMoveDown: () => moveField(index, 1),
-                onRemove: () => removeField(field.id),
-                readOnly,
-                actions,
-                components
-              }
-            ) }),
-            /* @__PURE__ */ jsxs("div", { className: "form-engine-builder__grid", children: [
-              /* @__PURE__ */ jsxs("label", { children: [
-                translate("builder.questionTitle"),
-                /* @__PURE__ */ jsx(
-                  TextInput,
-                  {
-                    name: `fields.${field.id}.title`,
-                    label: translate("builder.questionTitle"),
-                    required: true,
-                    error: field.title.trim().length === 0,
-                    helperText: field.title.trim().length === 0 ? translate("builder.required") : "",
-                    value: field.title,
-                    placeholder: translate("builder.questionTitlePlaceholder"),
-                    onChange: (value) => updateField(field.id, (current) => ({
-                      ...current,
-                      title: value.trim().length === 0 ? current.title : value
-                    }))
-                  }
-                )
-              ] }),
-              /* @__PURE__ */ jsxs("label", { children: [
-                translate("builder.type"),
-                /* @__PURE__ */ jsx(
+                ] }),
+                !pagesEnabled || schema.pages === void 0 ? null : /* @__PURE__ */ jsx("div", { className: builderClass("form-engine-builder__field"), children: /* @__PURE__ */ jsx(
                   Select,
                   {
-                    value: field.type,
-                    onChange: (value) => changeType(field.id, value),
-                    options: FIELD_TYPES.filter(
-                      (type) => policy?.allowedFieldTypes === void 0 || policy.allowedFieldTypes.includes(type)
-                    ).map((type) => ({ value: type, label: translate(fieldTypeKey(type)) }))
+                    id: `builder-field-${field.id}-page`,
+                    label: translate("builder.questionPage"),
+                    value: pageForField(field.id)?.id ?? "",
+                    onChange: (value) => assignFieldToPage(field.id, value),
+                    options: schema.pages.map((page, pageIndex) => ({
+                      value: page.id,
+                      label: page.title ?? `${translate("builder.newPage")} ${pageIndex + 1}`
+                    }))
                   }
-                )
-              ] }),
-              /* @__PURE__ */ jsx(
-                Checkbox,
-                {
-                  className: "form-engine-builder__check",
-                  checked: field.required === true,
-                  onChange: (checked) => updateField(field.id, (current) => ({ ...current, required: checked })),
-                  label: translate("builder.required")
-                }
-              )
-            ] }),
-            !pagesEnabled || schema.pages === void 0 ? null : /* @__PURE__ */ jsxs("label", { children: [
-              translate("builder.questionPage"),
-              /* @__PURE__ */ jsx(
-                Select,
-                {
-                  value: pageForField(field.id)?.id ?? "",
-                  onChange: (value) => assignFieldToPage(field.id, value),
-                  options: schema.pages.map((page, pageIndex) => ({
-                    value: page.id,
-                    label: page.title ?? `${translate("builder.newPage")} ${pageIndex + 1}`
-                  }))
-                }
-              )
-            ] }),
-            !localizationEnabled || editingLocale.length === 0 ? null : /* @__PURE__ */ jsxs("div", { className: "form-engine-builder__translation-editor", children: [
-              /* @__PURE__ */ jsx("strong", { children: editingLocale }),
-              /* @__PURE__ */ jsxs("div", { className: "form-engine-builder__grid", children: [
-                /* @__PURE__ */ jsxs("label", { children: [
-                  translate("builder.questionTitle"),
-                  /* @__PURE__ */ jsx(
+                ) }),
+                !localizationEnabled || editingLocale.length === 0 ? null : /* @__PURE__ */ jsxs("div", { className: builderClass("form-engine-builder__translation-editor"), children: [
+                  /* @__PURE__ */ jsx("strong", { children: editingLocale }),
+                  /* @__PURE__ */ jsxs("div", { className: builderClass("form-engine-builder__grid"), children: [
+                    /* @__PURE__ */ jsx("div", { className: builderClass("form-engine-builder__field"), children: /* @__PURE__ */ jsx(
+                      TextInput,
+                      {
+                        id: `builder-field-${field.id}-${editingLocale}-title`,
+                        label: translate("builder.questionTitle"),
+                        value: field.translations?.[editingLocale]?.title ?? "",
+                        onChange: (value) => updateManualTranslation({
+                          locale: editingLocale,
+                          kind: "field",
+                          nodeId: field.id,
+                          property: "title",
+                          sourceText: field.title,
+                          translatedText: value,
+                          ...field.translationMetadata?.[editingLocale]?.title === void 0 ? {} : {
+                            existingTranslationMetadata: field.translationMetadata[editingLocale]?.title
+                          }
+                        })
+                      }
+                    ) }),
+                    /* @__PURE__ */ jsx("div", { className: builderClass("form-engine-builder__field"), children: /* @__PURE__ */ jsx(
+                      TextInput,
+                      {
+                        id: `builder-field-${field.id}-${editingLocale}-description`,
+                        label: translate("builder.pageDescription"),
+                        value: field.translations?.[editingLocale]?.description ?? "",
+                        onChange: (value) => updateManualTranslation({
+                          locale: editingLocale,
+                          kind: "field",
+                          nodeId: field.id,
+                          property: "description",
+                          sourceText: field.description ?? "",
+                          translatedText: value,
+                          ...field.translationMetadata?.[editingLocale]?.description === void 0 ? {} : {
+                            existingTranslationMetadata: field.translationMetadata[editingLocale]?.description
+                          }
+                        })
+                      }
+                    ) })
+                  ] }),
+                  "options" in field ? field.options.map((option, optionIndex) => /* @__PURE__ */ jsx("div", { className: builderClass("form-engine-builder__field"), children: /* @__PURE__ */ jsx(
                     TextInput,
                     {
-                      value: field.translations?.[editingLocale]?.title ?? "",
+                      id: `builder-option-${option.id}-${editingLocale}`,
+                      label: `${translate("builder.optionLabel", { index: optionIndex + 1 })} (${editingLocale})`,
+                      value: option.translations?.[editingLocale] ?? "",
                       onChange: (value) => updateManualTranslation({
                         locale: editingLocale,
-                        kind: "field",
-                        nodeId: field.id,
-                        property: "title",
-                        sourceText: field.title,
+                        kind: "option",
+                        nodeId: option.id,
+                        property: "label",
+                        sourceText: option.label,
                         translatedText: value,
-                        ...field.translationMetadata?.[editingLocale]?.title === void 0 ? {} : {
-                          existingTranslationMetadata: field.translationMetadata[editingLocale]?.title
+                        ...option.translationMetadata?.[editingLocale]?.label === void 0 ? {} : {
+                          existingTranslationMetadata: option.translationMetadata[editingLocale]?.label
                         }
                       })
                     }
-                  )
+                  ) }, option.id)) : null
                 ] }),
-                /* @__PURE__ */ jsxs("label", { children: [
-                  translate("builder.pageDescription"),
-                  /* @__PURE__ */ jsx(
+                field.type === "rating" ? /* @__PURE__ */ jsxs("div", { className: builderClass("form-engine-builder__grid"), children: [
+                  /* @__PURE__ */ jsx("div", { className: builderClass("form-engine-builder__field"), children: /* @__PURE__ */ jsx(
                     TextInput,
                     {
-                      value: field.translations?.[editingLocale]?.description ?? "",
-                      onChange: (value) => updateManualTranslation({
-                        locale: editingLocale,
-                        kind: "field",
-                        nodeId: field.id,
-                        property: "description",
-                        sourceText: field.description ?? "",
-                        translatedText: value,
-                        ...field.translationMetadata?.[editingLocale]?.description === void 0 ? {} : {
-                          existingTranslationMetadata: field.translationMetadata[editingLocale]?.description
-                        }
-                      })
-                    }
-                  )
-                ] })
-              ] }),
-              "options" in field ? field.options.map((option, optionIndex) => /* @__PURE__ */ jsxs("label", { children: [
-                translate("builder.optionLabel", { index: optionIndex + 1 }),
-                " (",
-                editingLocale,
-                ")",
-                /* @__PURE__ */ jsx(
-                  TextInput,
-                  {
-                    value: option.translations?.[editingLocale] ?? "",
-                    onChange: (value) => updateManualTranslation({
-                      locale: editingLocale,
-                      kind: "option",
-                      nodeId: option.id,
-                      property: "label",
-                      sourceText: option.label,
-                      translatedText: value,
-                      ...option.translationMetadata?.[editingLocale]?.label === void 0 ? {} : {
-                        existingTranslationMetadata: option.translationMetadata[editingLocale]?.label
+                      id: `builder-field-${field.id}-minimum`,
+                      label: translate("builder.minimum"),
+                      type: "number",
+                      value: String(field.min ?? 1),
+                      onChange: (value) => {
+                        const min = Number(value);
+                        if (!Number.isInteger(min)) return;
+                        updateField(
+                          field.id,
+                          (current) => current.type === "rating" ? { ...current, min, max: Math.max(min, current.max ?? 5) } : current
+                        );
                       }
-                    })
-                  }
-                )
-              ] }, option.id)) : null
-            ] }),
-            field.type === "rating" ? /* @__PURE__ */ jsxs("div", { className: "form-engine-builder__grid", children: [
-              /* @__PURE__ */ jsxs("label", { children: [
-                translate("builder.minimum"),
-                /* @__PURE__ */ jsx(
-                  TextInput,
-                  {
-                    type: "number",
-                    value: String(field.min ?? 1),
-                    onChange: (value) => {
-                      const min = Number(value);
-                      if (!Number.isInteger(min)) return;
-                      updateField(
-                        field.id,
-                        (current) => current.type === "rating" ? { ...current, min, max: Math.max(min, current.max ?? 5) } : current
-                      );
                     }
-                  }
-                )
-              ] }),
-              /* @__PURE__ */ jsxs("label", { children: [
-                translate("builder.maximum"),
-                /* @__PURE__ */ jsx(
-                  TextInput,
-                  {
-                    type: "number",
-                    value: String(field.max ?? 5),
-                    onChange: (value) => {
-                      const max = Number(value);
-                      if (!Number.isInteger(max)) return;
-                      updateField(
-                        field.id,
-                        (current) => current.type === "rating" ? { ...current, min: Math.min(current.min ?? 1, max), max } : current
-                      );
-                    }
-                  }
-                )
-              ] })
-            ] }) : null,
-            "options" in field ? /* @__PURE__ */ jsxs("div", { className: "form-engine-builder__options", children: [
-              /* @__PURE__ */ jsx("strong", { children: translate("builder.options") }),
-              field.options.map(
-                (option, optionIndex) => OptionEditorSlot === void 0 ? /* @__PURE__ */ jsxs("div", { className: "form-engine-builder__option", children: [
-                  /* @__PURE__ */ jsx(
+                  ) }),
+                  /* @__PURE__ */ jsx("div", { className: builderClass("form-engine-builder__field"), children: /* @__PURE__ */ jsx(
                     TextInput,
                     {
-                      "aria-label": translate("builder.optionLabel", { index: optionIndex + 1 }),
-                      value: option.label,
-                      placeholder: translate("builder.optionLabelPlaceholder"),
-                      onChange: (value) => value.trim().length === 0 ? void 0 : updateOption(field.id, option.id, value)
+                      id: `builder-field-${field.id}-maximum`,
+                      label: translate("builder.maximum"),
+                      type: "number",
+                      value: String(field.max ?? 5),
+                      onChange: (value) => {
+                        const max = Number(value);
+                        if (!Number.isInteger(max)) return;
+                        updateField(
+                          field.id,
+                          (current) => current.type === "rating" ? { ...current, min: Math.min(current.min ?? 1, max), max } : current
+                        );
+                      }
                     }
-                  ),
-                  ToolbarSlot === void 0 ? /* @__PURE__ */ jsxs(Fragment, { children: [
-                    /* @__PURE__ */ jsx(
-                      IconButton,
+                  ) })
+                ] }) : null,
+                "options" in field ? /* @__PURE__ */ jsxs("div", { className: builderClass("form-engine-builder__options"), children: [
+                  /* @__PURE__ */ jsx("strong", { children: translate("builder.options") }),
+                  field.options.map(
+                    (option, optionIndex) => OptionEditorSlot === void 0 ? /* @__PURE__ */ jsxs("div", { className: builderClass("form-engine-builder__option"), children: [
+                      /* @__PURE__ */ jsx(
+                        TextInput,
+                        {
+                          id: `builder-option-${option.id}`,
+                          label: translate("builder.optionLabel", { index: optionIndex + 1 }),
+                          value: option.label,
+                          placeholder: translate("builder.optionLabelPlaceholder"),
+                          onChange: (value) => value.trim().length === 0 ? void 0 : updateOption(field.id, option.id, value)
+                        }
+                      ),
+                      ToolbarSlot === void 0 ? /* @__PURE__ */ jsxs(Fragment, { children: [
+                        /* @__PURE__ */ jsx(
+                          IconButton,
+                          {
+                            actionType: "moveUp",
+                            title: translate("builder.moveUp", { title: option.label }),
+                            disabled: optionIndex === 0,
+                            onClick: () => moveOption(field.id, option.id, optionIndex - 1)
+                          }
+                        ),
+                        /* @__PURE__ */ jsx(
+                          IconButton,
+                          {
+                            actionType: "moveDown",
+                            title: translate("builder.moveDown", { title: option.label }),
+                            disabled: optionIndex === field.options.length - 1,
+                            onClick: () => moveOption(field.id, option.id, optionIndex + 1)
+                          }
+                        ),
+                        /* @__PURE__ */ jsx(
+                          IconButton,
+                          {
+                            actionType: "delete",
+                            disabled: field.options.length === 1,
+                            onClick: () => removeOption(field.id, option.id),
+                            title: translate("builder.remove")
+                          }
+                        )
+                      ] }) : /* @__PURE__ */ jsx(
+                        ToolbarSlot,
+                        {
+                          schema,
+                          kind: "option",
+                          targetId: option.id,
+                          index: optionIndex,
+                          total: field.options.length,
+                          title: option.label,
+                          onMoveUp: () => moveOption(field.id, option.id, optionIndex - 1),
+                          onMoveDown: () => moveOption(field.id, option.id, optionIndex + 1),
+                          onRemove: () => removeOption(field.id, option.id),
+                          readOnly,
+                          actions,
+                          components
+                        }
+                      )
+                    ] }, option.id) : /* @__PURE__ */ jsx(
+                      OptionEditorSlot,
                       {
-                        icon: "\u2191",
-                        title: translate("builder.moveUp", { title: option.label }),
-                        disabled: optionIndex === 0,
-                        onClick: () => moveOption(field.id, option.id, optionIndex - 1)
-                      }
-                    ),
+                        schema,
+                        field,
+                        option,
+                        index: optionIndex,
+                        currentLocale: editingLocale,
+                        readOnly,
+                        actions,
+                        components
+                      },
+                      option.id
+                    )
+                  ),
+                  /* @__PURE__ */ jsx(
+                    Button,
+                    {
+                      action: "addOption",
+                      targetId: field.id,
+                      disabled: policy?.maxOptionsPerField !== void 0 && field.options.length >= policy.maxOptionsPerField,
+                      onClick: () => addOption(field.id),
+                      children: translate("builder.addOption")
+                    }
+                  )
+                ] }) : null,
+                conditionsEnabled ? /* @__PURE__ */ jsxs("div", { className: builderClass("form-engine-builder__condition"), children: [
+                  /* @__PURE__ */ jsx("div", { className: builderClass("form-engine-builder__field"), children: /* @__PURE__ */ jsx(
+                    Select,
+                    {
+                      id: `builder-field-${field.id}-condition`,
+                      label: translate("builder.displayCondition"),
+                      value: condition?.questionId ?? "",
+                      onChange: (value) => {
+                        const selected = schema.fields.find((item) => item.id === value);
+                        setDisplayCondition(
+                          field.id,
+                          selected === void 0 ? void 0 : conditionWithValue(
+                            selected.id,
+                            conditionOperators(selected)[0] ?? "not_empty",
+                            defaultConditionValue(selected)
+                          )
+                        );
+                      },
+                      options: [
+                        { value: "", label: translate("builder.alwaysVisible") },
+                        ...availableSources.map((candidate) => ({ value: candidate.id, label: candidate.title }))
+                      ]
+                    }
+                  ) }),
+                  condition !== void 0 && source !== void 0 ? /* @__PURE__ */ jsxs(Fragment, { children: [
                     /* @__PURE__ */ jsx(
-                      IconButton,
+                      Select,
                       {
-                        icon: "\u2193",
-                        title: translate("builder.moveDown", { title: option.label }),
-                        disabled: optionIndex === field.options.length - 1,
-                        onClick: () => moveOption(field.id, option.id, optionIndex + 1)
+                        "aria-label": translate("builder.conditionOperator"),
+                        value: condition.operator,
+                        onChange: (value) => {
+                          const operator = value;
+                          setDisplayCondition(
+                            field.id,
+                            conditionWithValue(source.id, operator, defaultConditionValue(source))
+                          );
+                        },
+                        options: conditionOperators(source).map((operator) => ({
+                          value: operator,
+                          label: translate(operatorKey(operator))
+                        }))
                       }
                     ),
                     /* @__PURE__ */ jsx(
-                      Button,
+                      ConditionValueEditor,
                       {
-                        disabled: field.options.length === 1,
-                        onClick: () => removeOption(field.id, option.id),
-                        variant: "danger",
-                        children: translate("builder.remove")
+                        source,
+                        condition,
+                        onChange: (next) => setDisplayCondition(field.id, next),
+                        translate,
+                        components
                       }
                     )
-                  ] }) : /* @__PURE__ */ jsx(
-                    ToolbarSlot,
-                    {
-                      schema,
-                      kind: "option",
-                      targetId: option.id,
-                      index: optionIndex,
-                      total: field.options.length,
-                      title: option.label,
-                      onMoveUp: () => moveOption(field.id, option.id, optionIndex - 1),
-                      onMoveDown: () => moveOption(field.id, option.id, optionIndex + 1),
-                      onRemove: () => removeOption(field.id, option.id),
-                      readOnly,
-                      actions,
-                      components
-                    }
-                  )
-                ] }, option.id) : /* @__PURE__ */ jsx(
-                  OptionEditorSlot,
-                  {
-                    schema,
-                    field,
-                    option,
-                    index: optionIndex,
-                    currentLocale: editingLocale,
-                    readOnly,
-                    actions,
-                    components
-                  },
-                  option.id
-                )
-              ),
-              /* @__PURE__ */ jsx(
-                Button,
-                {
-                  action: "addOption",
-                  targetId: field.id,
-                  disabled: policy?.maxOptionsPerField !== void 0 && field.options.length >= policy.maxOptionsPerField,
-                  onClick: () => addOption(field.id),
-                  children: translate("builder.addOption")
-                }
-              )
-            ] }) : null,
-            conditionsEnabled ? /* @__PURE__ */ jsxs("div", { className: "form-engine-builder__condition", children: [
-              /* @__PURE__ */ jsxs("label", { children: [
-                translate("builder.displayCondition"),
-                /* @__PURE__ */ jsx(
-                  Select,
-                  {
-                    value: condition?.questionId ?? "",
-                    onChange: (value) => {
-                      const selected = schema.fields.find((item) => item.id === value);
-                      setDisplayCondition(
-                        field.id,
-                        selected === void 0 ? void 0 : conditionWithValue(
-                          selected.id,
-                          conditionOperators(selected)[0] ?? "not_empty",
-                          defaultConditionValue(selected)
-                        )
-                      );
-                    },
-                    options: [
-                      { value: "", label: translate("builder.alwaysVisible") },
-                      ...availableSources.map((candidate) => ({ value: candidate.id, label: candidate.title }))
-                    ]
-                  }
-                )
-              ] }),
-              condition !== void 0 && source !== void 0 ? /* @__PURE__ */ jsxs(Fragment, { children: [
-                /* @__PURE__ */ jsx(
-                  Select,
-                  {
-                    "aria-label": translate("builder.conditionOperator"),
-                    value: condition.operator,
-                    onChange: (value) => {
-                      const operator = value;
-                      setDisplayCondition(
-                        field.id,
-                        conditionWithValue(source.id, operator, defaultConditionValue(source))
-                      );
-                    },
-                    options: conditionOperators(source).map((operator) => ({
-                      value: operator,
-                      label: translate(operatorKey(operator))
-                    }))
-                  }
-                ),
-                /* @__PURE__ */ jsx(
-                  ConditionValueEditor,
-                  {
-                    source,
-                    condition,
-                    onChange: (next) => setDisplayCondition(field.id, next),
-                    translate,
-                    components
-                  }
-                )
-              ] }) : null
-            ] }) : null
-          ] }, field.id);
-        }) }),
-        /* @__PURE__ */ jsx(
-          Button,
-          {
-            className: "form-engine-builder__add",
-            action: "addField",
-            disabled: initialFieldType === null || maxFieldsReached,
-            onClick: addField,
-            children: translate("builder.addQuestion")
-          }
-        )
-      ] })
+                  ] }) : null
+                ] }) : null
+              ] }, field.id);
+            }) }),
+            /* @__PURE__ */ jsx(
+              Button,
+              {
+                className: builderClass("form-engine-builder__add"),
+                action: "addField",
+                disabled: initialFieldType === null || maxFieldsReached,
+                onClick: addField,
+                children: translate("builder.addQuestion")
+              }
+            )
+          ] })
+        }
+      )
     }
-  ) });
+  );
 }
 
 // src/context.tsx