1 files changed, 25 insertions, 22 deletions
diff --git a/packages/web-util/src/forms/Group.tsx b/packages/web-util/src/forms/Group.tsx
index 0645f6d97..f63fa4a9b 100644
--- a/packages/web-util/src/forms/Group.tsx
+++ b/packages/web-util/src/forms/Group.tsx
@@ -1,40 +1,43 @@
 import { TranslatedString } from "@gnu-taler/taler-util";
 import { VNode, h } from "preact";
-import { LabelWithTooltipMaybeRequired } from "./InputLine.js";
-import { RenderAllFieldsByUiConfig, UIFormField } from "./forms.js";
+import { LabelWithTooltipMaybeRequired, RenderAddon } from "./InputLine.js";
+import { RenderAllFieldsByUiConfig, UIFormField, convertUiField } from "./forms.js";
+import { Addon, FormProvider } from "./FormProvider.js";
+import { useField } from "./useField.js";
+import { useTranslationContext } from "../index.browser.js";
+import { getConverterById } from "./converter.js";
 
 interface Props {
-  before?: TranslatedString;
-  after?: TranslatedString;
-  tooltipBefore?: TranslatedString;
-  tooltipAfter?: TranslatedString;
+  label: TranslatedString;
+  tooltip?: TranslatedString;
+  help?: TranslatedString;
+  before?: Addon;
+  after?: Addon;
   fields: UIFormField[];
 }
 
 export function Group({
   before,
   after,
-  tooltipAfter,
-  tooltipBefore,
+  label,
+  tooltip,
+  help,
   fields,
 }: Props): VNode {
   return (
     <div class="sm:col-span-6 p-4 rounded-lg border-r-2 border-2 bg-gray-50">
-      <div class="pb-4">
-        {before && (
-          <LabelWithTooltipMaybeRequired
-            label={before}
-            tooltip={tooltipBefore}
-          />
-        )}
-      </div>
+      {before !== undefined && <RenderAddon addon={before} />}
+      <LabelWithTooltipMaybeRequired label={label} tooltip={tooltip} />
+      {after !== undefined && <RenderAddon addon={after} />}
+      {help && (
+        <p class="mt-2 text-sm text-gray-500" id="email-description">
+          {help}
+        </p>
+      )}
       <div class="grid max-w-2xl grid-cols-1 gap-x-6 gap-y-2 sm:grid-cols-6">
-        <RenderAllFieldsByUiConfig fields={fields} />
-      </div>
-      <div class="pt-4">
-        {after && (
-          <LabelWithTooltipMaybeRequired label={after} tooltip={tooltipAfter} />
-        )}
+        <RenderAllFieldsByUiConfig 
+          fields={fields}
+          />
       </div>
     </div>
   );