@react-typed-forms/schemas-html 2.4.1 → 3.1.0

package/lib/index.js

@@ -1,8 +1,8 @@
-import React, { createElement, useState, useMemo, Fragment, useEffect, useRef } from 'react';
 import clsx from 'clsx';
-import { DisplayDataType, rendererClass, coerceToString, getOverrideClass, FieldType, createDataRenderer, fieldOptionAdornment, DataRenderType, createLayoutRenderer, renderLayoutParts, createGroupRenderer, GroupRenderType, isTabsRenderer, isSelectChildRenderer, isGridRenderer, isFlexRenderer, createVisibilityRenderer, getJsonPath, useJsonataExpression, getRootDataNode, getLastDefinedValue, getNullToggler, mergeObjects, isArrayRenderer, isCompoundField, nodeForControl, ControlDefinitionType, makeHookDepString, createArrayActions, getLengthRestrictions, lookupDataNode, applyArrayLengthRestrictions, buildSchema, stringField, schemaDataForFieldRef, schemaForFieldRef, rootSchemaNode, addMissingControlsForSchema, useControlRendererComponent, groupedControl, makeSchemaDataNode, createAdornmentRenderer, getIsEditing, appendMarkupAt, AdornmentPlacement, wrapMarkup, getAllValues, ControlAdornmentType, getExternalEditData, visitFormDataInContext, validationVisitor, createActionRenderer, isDataGroupRenderer, isDisplayOnlyRenderer, hasOptions, isTextfieldRenderer, isOptionalAdornment, isSetFieldAdornment, useDynamicHooks, wrapLayout, isIconAdornment, isAccordionAdornment, LabelType } from '@react-typed-forms/schemas';
+import { DisplayDataType, rendererClass, coerceToString, getOverrideClass, FieldType, createDataRenderer, fieldOptionAdornment, DataRenderType, createLayoutRenderer, renderLayoutParts, createGroupRenderer, GroupRenderType, isTabsRenderer, isSelectChildRenderer, isGridRenderer, isFlexRenderer, createVisibilityRenderer, getJsonPath, useJsonataExpression, getRootDataNode, getLastDefinedValue, getNullToggler, mergeObjects, isArrayRenderer, isCompoundField, ControlDefinitionType, makeHookDepString, createArrayActions, getLengthRestrictions, lookupDataNode, applyArrayLengthRestrictions, buildSchema, stringField, schemaDataForFieldRef, schemaForFieldRef, rootSchemaNode, addMissingControlsForSchema, useControlRendererComponent, groupedControl, makeSchemaDataNode, createAdornmentRenderer, getIsEditing, appendMarkupAt, AdornmentPlacement, wrapMarkup, getAllValues, ControlAdornmentType, getExternalEditData, visitFormDataInContext, validationVisitor, createActionRenderer, isDataGroupRenderer, isDisplayOnlyRenderer, hasOptions, isTextfieldRenderer, isOptionalAdornment, isSetFieldAdornment, useDynamicHooks, wrapLayout, isIconAdornment, isAccordionAdornment, LabelType } from '@react-typed-forms/schemas';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { useComponentTracking, formControlProps, useControl, useControlEffect, RenderArrayElements, useComputed, useTrackedComponent, RenderElements, controlValues, removeElement, setFields, newControl, Fcheckbox as Fcheckbox$1 } from '@react-typed-forms/core';
-import { jsx } from 'react/jsx-runtime';
+import { useState, useMemo, useEffect, createElement, useRef } from 'react';
 import { useAutocomplete } from '@mui/base';
 import { Modal, Dialog } from '@astroapps/aria-base';
 import { useOverlayTriggerState } from '@react-stately/overlays';
@@ -32,7 +32,7 @@ function _objectWithoutPropertiesLoose(r, e) {
 const _excluded$4 = ["data", "display", "className", "style", "renderer"];
 function createDefaultDisplayRenderer(options = {}) {
   return {
-    render: (props, renderer) => createElement(DefaultDisplay, _extends({}, options, props, {
+    render: (props, renderer) => /*#__PURE__*/jsx(DefaultDisplay, _extends({}, options, props, {
       renderer: renderer
     })),
     type: "display"
@@ -49,20 +49,29 @@ function DefaultDisplay(_ref) {
         renderer
       } = _ref,
       options = _objectWithoutPropertiesLoose(_ref, _excluded$4);
-    const h = renderer.h;
+    const {
+      I,
+      Div,
+      Span,
+      B,
+      H1
+    } = renderer.html;
     switch (data.type) {
       case DisplayDataType.Icon:
-        return h("i", {
+        return /*#__PURE__*/jsx(I, {
           style: style,
           className: clsx(getOverrideClass(className), display ? display.value : data.iconClass)
         });
       case DisplayDataType.Text:
-        return h("div", {
+        return /*#__PURE__*/jsx(Div, {
           style: style,
-          className: rendererClass(className, options.textClassName)
-        }, display ? coerceToString(display.value) : data.text);
+          className: rendererClass(className, options.textClassName),
+          children: /*#__PURE__*/jsx(Span, {
+            children: display ? coerceToString(display.value) : data.text
+          })
+        });
       case DisplayDataType.Html:
-        return h("div", {
+        return /*#__PURE__*/jsx(Div, {
           style: style,
           className: rendererClass(className, options.htmlClassName),
           dangerouslySetInnerHTML: {
@@ -70,9 +79,15 @@ function DefaultDisplay(_ref) {
           }
         });
       case DisplayDataType.Custom:
-        return h("div", null, h("b", null, "(", data.customId, ")"));
+        return /*#__PURE__*/jsx(Div, {
+          children: /*#__PURE__*/jsxs(B, {
+            children: ["(", data.customId, ")"]
+          })
+        });
       default:
-        return h("h1", null, "Unknown display type: ", data.type);
+        return /*#__PURE__*/jsxs(H1, {
+          children: ["Unknown display type: ", data.type]
+        });
     }
   } finally {
     _effect();
@@ -97,9 +112,10 @@ function ControlInput(_ref) {
       inputProps = _objectWithoutPropertiesLoose(_formControlProps, _excluded2$1);
     const textValue = useControl(() => toText(value));
     useControlEffect(() => control.value, v => textValue.value = toText(v));
-    // noinspection JSUnusedLocalSymbols
-    const h = renderer.h;
-    return h("input", _extends({}, inputProps, {
+    const {
+      Input
+    } = renderer.html;
+    return /*#__PURE__*/jsx(Input, _extends({}, inputProps, {
       type: convert[0],
       value: textValue.value,
       onChange: e => {
@@ -148,7 +164,7 @@ const _excluded$2 = ["state", "options", "className", "convert", "required", "em
 function createSelectRenderer(options = {}) {
   return createDataRenderer((props, asArray) => {
     var _props$options;
-    return createElement(SelectDataRenderer, {
+    return /*#__PURE__*/jsx(SelectDataRenderer, {
       className: rendererClass(props.className, options.className),
       state: props.control,
       id: props.id,
@@ -184,23 +200,25 @@ function SelectDataRenderer(_ref) {
     const [showEmpty] = useState(!required || value == null);
     const optionStringMap = useMemo(() => Object.fromEntries(options.map(x => [convert(x.value), x.value])), [options]);
     const optionGroups = useMemo(() => new Set(options.filter(x => x.group).map(x => x.group)), [options]);
-    return createElement("select", _extends({}, props, {
+    return /*#__PURE__*/jsxs("select", _extends({}, props, {
       className: className,
       onChange: v => state.value = optionStringMap[v.target.value],
       value: convert(value),
-      disabled: disabled || readonly
-    }), showEmpty && createElement("option", {
-      value: ""
-    }, required ? requiredText : emptyText), [...optionGroups.keys()].map(x => createElement("optgroup", {
-      key: x,
-      label: x
-    }, options.filter(o => o.group === x).map(renderOption))), options.filter(x => !x.group).map(renderOption));
+      disabled: disabled || readonly,
+      children: [showEmpty && /*#__PURE__*/jsx("option", {
+        value: "",
+        children: required ? requiredText : emptyText
+      }), [...optionGroups.keys()].map(x => /*#__PURE__*/jsx("optgroup", {
+        label: x,
+        children: options.filter(o => o.group === x).map(renderOption)
+      }, x)), options.filter(x => !x.group).map(renderOption)]
+    }));
     function renderOption(x, i) {
-      return createElement("option", {
-        key: i,
+      return /*#__PURE__*/jsx("option", {
         value: convert(x.value),
-        disabled: !!x.disabled
-      }, x.name);
+        disabled: !!x.disabled,
+        children: x.name
+      }, i);
     }
   } finally {
     _effect();
@@ -223,7 +241,7 @@ function createSelectConversion(ft) {
 const _excluded$1 = ["control", "type", "notValue", "renderer"],
   _excluded2 = ["value", "onChange", "errorText"];
 function createRadioRenderer(options = {}) {
-  return createDataRenderer((p, renderer) => createElement(CheckButtons, _extends({
+  return createDataRenderer((p, renderer) => /*#__PURE__*/jsx(CheckButtons, _extends({
     classes: options,
     controlClasses: p.renderOptions
   }, p, {
@@ -239,7 +257,7 @@ function createRadioRenderer(options = {}) {
   });
 }
 function createCheckListRenderer(options = {}) {
-  return createDataRenderer((p, renderer) => createElement(CheckButtons, _extends({
+  return createDataRenderer((p, renderer) => /*#__PURE__*/jsx(CheckButtons, _extends({
     classes: options,
     controlClasses: p.renderOptions
   }, p, {
@@ -276,40 +294,50 @@ function CheckButtons({
 }) {
   var _effect = useComponentTracking();
   try {
-    const h = renderer.h;
+    const {
+      Button,
+      Input,
+      Label,
+      Div
+    } = renderer.html;
     const {
       disabled
     } = control;
     const name = "r" + control.uniqueId;
-    return h("div", {
+    return /*#__PURE__*/jsx(Div, {
       className: className,
-      id: id
-    }, h(RenderArrayElements, {
-      array: options == null ? void 0 : options.filter(x => x.value != null)
-    }, (o, i) => {
-      const checked = useComputed(() => isChecked(control, o)).value;
-      const selOrUnsel = checked ? rendererClass(controlClasses == null ? void 0 : controlClasses.selectedClass, classes.selectedClass) : rendererClass(controlClasses == null ? void 0 : controlClasses.notSelectedClass, classes.notSelectedClass);
-      return h("div", {
-        className: clsx(rendererClass(controlClasses == null ? void 0 : controlClasses.entryWrapperClass, classes.entryWrapperClass), selOrUnsel),
-        onClick: () => !readonly && setChecked(control, o, !checked)
-      }, h("div", {
-        className: classes.entryClass
-      }, h("input", {
-        id: name + "_" + i,
-        className: classes.checkClass,
-        type: type,
-        name: name,
-        readOnly: readonly,
-        disabled: disabled,
-        checked: checked,
-        onChange: x => {
-          !readonly && setChecked(control, o, x.target.checked);
+      id: id,
+      children: /*#__PURE__*/jsx(RenderArrayElements, {
+        array: options == null ? void 0 : options.filter(x => x.value != null),
+        children: (o, i) => {
+          const checked = useComputed(() => isChecked(control, o)).value;
+          const selOrUnsel = checked ? rendererClass(controlClasses == null ? void 0 : controlClasses.selectedClass, classes.selectedClass) : rendererClass(controlClasses == null ? void 0 : controlClasses.notSelectedClass, classes.notSelectedClass);
+          return /*#__PURE__*/jsxs(Button, {
+            className: clsx(rendererClass(controlClasses == null ? void 0 : controlClasses.entryWrapperClass, classes.entryWrapperClass), selOrUnsel),
+            onClick: () => !readonly && setChecked(control, o, !checked),
+            children: [/*#__PURE__*/jsxs(Div, {
+              className: classes.entryClass,
+              children: [/*#__PURE__*/jsx(Input, {
+                id: name + "_" + i,
+                className: classes.checkClass,
+                type: type,
+                name: name,
+                readOnly: readonly,
+                disabled: disabled,
+                checked: checked,
+                onChange: x => {
+                  !readonly && setChecked(control, o, x.target.checked);
+                }
+              }), /*#__PURE__*/jsx(Label, {
+                className: classes.labelClass,
+                htmlFor: name + "_" + i,
+                children: o.name
+              })]
+            }), entryAdornment == null ? void 0 : entryAdornment(o, i, checked)]
+          });
         }
-      }), h("label", {
-        className: classes.labelClass,
-        htmlFor: name + "_" + i
-      }, o.name)), entryAdornment == null ? void 0 : entryAdornment(o, i, checked));
-    }));
+      })
+    });
   } finally {
     _effect();
   }
@@ -327,7 +355,7 @@ function setIncluded(array, elem, included) {
 function createCheckboxRenderer(options = {}) {
   return createDataRenderer((props, renderer) => p => _extends({}, p, {
     label: undefined,
-    children: createElement(CheckBox, {
+    children: /*#__PURE__*/jsx(CheckBox, {
       p: p,
       renderer: renderer,
       options: options,
@@ -345,16 +373,19 @@ function CheckBox({
 }) {
   var _effect2 = useComponentTracking();
   try {
-    const h = renderer.h;
-    return h("div", {
-      className: rendererClass(props.className, options.entryClass)
-    }, h(Fcheckbox, {
-      id: props.id,
-      control: props.control.as(),
-      style: props.style,
-      className: options.checkClass,
-      renderer: renderer
-    }), p.label && renderer.renderLabel(p.label, undefined, undefined));
+    const {
+      Div
+    } = renderer.html;
+    return /*#__PURE__*/jsxs(Div, {
+      className: rendererClass(props.className, options.entryClass),
+      children: [/*#__PURE__*/jsx(Fcheckbox, {
+        id: props.id,
+        control: props.control.as(),
+        style: props.style,
+        className: options.checkClass,
+        renderer: renderer
+      }), p.label && renderer.renderLabel(p.label, undefined, undefined)]
+    });
   } finally {
     _effect2();
   }
@@ -369,24 +400,21 @@ function Fcheckbox(_ref) {
         renderer
       } = _ref,
       others = _objectWithoutPropertiesLoose(_ref, _excluded$1);
-    const h = renderer.h;
-    // Update the HTML5 custom validity whenever the error message is changed/cleared
-    // useControlEffect(
-    //   () => control.error,
-    //   (s) => (control.element as HTMLInputElement)?.setCustomValidity(s ?? ""),
-    // );
+    const {
+      Input
+    } = renderer.html;
     const _formControlProps = formControlProps(control),
       {
         value
       } = _formControlProps,
       theseProps = _objectWithoutPropertiesLoose(_formControlProps, _excluded2);
-    return h("input", _extends({}, theseProps, {
+    return /*#__PURE__*/jsx(Input, _extends({}, theseProps, {
       checked: !!value !== notValue,
-      ref: r => {
-        control.element = r;
-        // if (r) r.setCustomValidity(control.current.error ?? "");
+      ref: r => control.element = r,
+      onChange: e => {
+        control.touched = true;
+        control.value = e.target.checked !== notValue;
       },
-      onChange: e => control.value = e.target.checked !== notValue,
       type: type
     }, others));
   } finally {
@@ -398,7 +426,7 @@ function createDefaultLayoutRenderer(options = {}) {
   return createLayoutRenderer((props, renderers) => {
     const layout = renderLayoutParts(props, renderers);
     return {
-      children: layout.wrapLayout(createElement(DefaultLayout, _extends({
+      children: layout.wrapLayout(/*#__PURE__*/jsx(DefaultLayout, _extends({
         layout: layout
       }, options, {
         renderer: renderers
@@ -412,12 +440,18 @@ function createDefaultLayoutRenderer(options = {}) {
 function DefaultLayout({
   errorClass,
   renderer: {
-    h,
+    html: {
+      Div,
+      Span
+    },
     renderText
   },
-  renderError = e => e && h("div", null, h("span", {
-    className: errorClass
-  }, renderText(e))),
+  renderError = e => e && /*#__PURE__*/jsx(Div, {
+    children: /*#__PURE__*/jsx(Span, {
+      className: errorClass,
+      children: renderText(e)
+    })
+  }),
   layout: {
     controlEnd,
     controlStart,
@@ -430,7 +464,9 @@ function DefaultLayout({
   try {
     const ec = errorControl;
     const errorText = ec && ec.touched ? ec.error : undefined;
-    return h(Fragment, null, label, controlStart, children, renderError(errorText), controlEnd);
+    return /*#__PURE__*/jsxs(Fragment, {
+      children: [label, controlStart, children, renderError(errorText), controlEnd]
+    });
   } finally {
     _effect();
   }
@@ -450,12 +486,17 @@ function DefaultDisplayOnly({
     var _ref;
     const v = control.value;
     const text = (_ref = schemaInterface.isEmptyValue(field, v) ? emptyText : schemaInterface.textValue(field, v)) != null ? _ref : "";
-    // noinspection JSUnusedLocalSymbols
-    const h = renderer.h;
-    return h("div", {
+    const {
+      Div,
+      Span
+    } = renderer.html;
+    return /*#__PURE__*/jsx(Div, {
       style: style,
-      className: className
-    }, text);
+      className: className,
+      children: /*#__PURE__*/jsx(Span, {
+        children: text
+      })
+    });
   } finally {
     _effect();
   }
@@ -467,7 +508,9 @@ function DefaultAccordion({
   contentStyle,
   contentClassName,
   designMode,
+  iconOpenName,
   iconOpenClass,
+  iconClosedName,
   iconClosedClass,
   className,
   renderTitle = t => t,
@@ -480,6 +523,12 @@ function DefaultAccordion({
   var _effect = useComponentTracking();
   try {
     var _dataContext$dataNode;
+    const {
+      Button,
+      I,
+      Div,
+      Label
+    } = renderers.html;
     const dataControl = ((_dataContext$dataNode = dataContext.dataNode) != null ? _dataContext$dataNode : dataContext.parentNode).control;
     const open = useControl(!!accordion.defaultExpanded);
     if (dataControl && !dataControl.meta.accordionState) {
@@ -490,18 +539,24 @@ function DefaultAccordion({
       display: "none"
     });
     const title = renderers.renderLabelText(renderTitle(accordion.title, open));
-    const toggler = renderToggler ? renderToggler(open, title) : createElement("button", {
+    const toggler = renderToggler ? renderToggler(open, title) : /*#__PURE__*/jsxs(Button, {
       className: className,
-      onClick: () => open.setValue(x => !x)
-    }, createElement("label", {
-      className: titleClass
-    }, title), createElement("i", {
-      className: clsx(isOpen ? iconOpenClass : iconClosedClass)
-    }));
-    return createElement(Fragment, null, toggler, (useCss || isOpen || designMode) && createElement("div", {
-      style: fullContentStyle,
-      className: contentClassName
-    }, children));
+      onClick: () => open.setValue(x => !x),
+      children: [/*#__PURE__*/jsx(Label, {
+        className: titleClass,
+        children: title
+      }), /*#__PURE__*/jsx(I, {
+        title: isOpen ? iconOpenName : iconClosedName,
+        className: clsx(isOpen ? iconOpenClass : iconClosedClass)
+      })]
+    });
+    return /*#__PURE__*/jsxs(Fragment, {
+      children: [toggler, (useCss || isOpen || designMode) && /*#__PURE__*/jsx(Div, {
+        style: fullContentStyle,
+        className: contentClassName,
+        children: children
+      })]
+    });
   } finally {
     _effect();
   }
@@ -511,7 +566,7 @@ function getAccordionState(c) {
 }
 
 function createTabsRenderer(options = {}) {
-  return createGroupRenderer((p, renderer) => createElement(TabsGroupRenderer, _extends({}, p, {
+  return createGroupRenderer((p, renderer) => /*#__PURE__*/jsx(TabsGroupRenderer, _extends({}, p, {
     tabOptions: p.renderOptions,
     options: options
   })), {
@@ -538,22 +593,27 @@ function TabsGroupRenderer({
       contentClass
     } = options;
     const currentTab = tabIndex.value;
-    return designMode ? createElement(Fragment, null, formNode.getChildNodes().map((x, i) => renderTabs([x], i))) : renderTabs(formNode.getChildNodes(), 0);
+    return designMode ? /*#__PURE__*/jsx(Fragment, {
+      children: formNode.getChildNodes().map((x, i) => renderTabs([x], i))
+    }) : renderTabs(formNode.getChildNodes(), 0);
     function renderTabs(tabs, key) {
-      return createElement("div", {
-        key: key,
-        className: rendererClass(className, options.className)
-      }, createElement("ul", {
-        className: rendererClass(null, tabListClass)
-      }, tabs.map((x, i) => createElement("li", {
-        key: i,
-        className: rendererClass(null, tabClass),
-        onClick: () => tabIndex.value = i
-      }, createElement("span", {
-        className: rendererClass(null, clsx(labelClass, i == currentTab ? activeClass : inactiveClass))
-      }, x.definition.title ? x.definition.title : "<untitled>")))), createElement("div", {
-        className: rendererClass(tabOptions.contentClass, contentClass)
-      }, renderChild(currentTab, tabs[currentTab])));
+      return /*#__PURE__*/jsxs("div", {
+        className: rendererClass(className, options.className),
+        children: [/*#__PURE__*/jsx("ul", {
+          className: rendererClass(null, tabListClass),
+          children: tabs.map((x, i) => /*#__PURE__*/jsx("li", {
+            className: rendererClass(null, tabClass),
+            onClick: () => tabIndex.value = i,
+            children: /*#__PURE__*/jsx("span", {
+              className: rendererClass(null, clsx(labelClass, i == currentTab ? activeClass : inactiveClass)),
+              children: x.definition.title ? x.definition.title : "<untitled>"
+            })
+          }, i))
+        }), /*#__PURE__*/jsx("div", {
+          className: rendererClass(tabOptions.contentClass, contentClass),
+          children: renderChild(currentTab, tabs[currentTab])
+        })]
+      }, key);
     }
   } finally {
     _effect();
@@ -600,7 +660,7 @@ function createDefaultGroupRenderer(options) {
     } = props;
     if (isTabsRenderer(renderOptions)) return tabsRenderer.render(props, renderer);
     if (isSelectChildRenderer(renderOptions) && !props.designMode) {
-      return h(SelectChildGroupRenderer, _extends({}, props, {
+      return /*#__PURE__*/jsx(SelectChildGroupRenderer, _extends({}, props, {
         renderOptions: renderOptions
       }));
     }
@@ -610,12 +670,14 @@ function createDefaultGroupRenderer(options) {
     } = isGridRenderer(renderOptions) ? gridStyles(renderOptions) : isFlexRenderer(renderOptions) ? flexStyles(renderOptions) : {
       className: standardClassName
     };
-    // noinspection JSUnusedLocalSymbols
-    const h = renderer.h;
-    return h("div", {
+    const {
+      Div
+    } = renderer.html;
+    return /*#__PURE__*/jsx(Div, {
       className: rendererClass(props.className, clsx(className, gcn)),
-      style: style
-    }, formNode.getChildNodes().map((c, i) => renderChild(i, c)));
+      style: style,
+      children: formNode.getChildNodes().map((c, i) => renderChild(i, c))
+    });
   }
   return {
     type: "group",
@@ -634,17 +696,18 @@ function SelectChildGroupRenderer(props) {
       const ctrl = dynHook.runHook(p.dataContext, dynHook.state);
       const childIndex = ctrl == null ? void 0 : ctrl.value;
       const childDefinitions = p.formNode.getChildNodes();
-      return createElement("div", null, typeof childIndex === "number" && childIndex < childDefinitions.length && childIndex >= 0 && p.renderChild(childIndex, childDefinitions[childIndex]));
+      return /*#__PURE__*/jsx("div", {
+        children: typeof childIndex === "number" && childIndex < childDefinitions.length && childIndex >= 0 && p.renderChild(childIndex, childDefinitions[childIndex])
+      });
     }, [dynHook.deps]);
-    return createElement(Render, props);
+    return /*#__PURE__*/jsx(Render, _extends({}, props));
   } finally {
     _effect();
   }
 }
 
 function createDefaultVisibilityRenderer() {
-  const h = jsx;
-  return createVisibilityRenderer((props, renderer) => h(DefaultVisibility, _extends({}, props, {
+  return createVisibilityRenderer((props, renderer) => /*#__PURE__*/jsx(DefaultVisibility, _extends({}, props, {
     renderer: renderer
   })));
 }
@@ -667,20 +730,22 @@ function DefaultVisibility({
         }));
       }
     }, [v == null ? void 0 : v.visible]);
-    const h = renderer.h;
-    return v != null && v.visible ? h("div", {
+    const {
+      Div
+    } = renderer.html;
+    return v != null && v.visible ? /*#__PURE__*/jsx(Div, {
       className: className,
       style: style,
       ref: divRef,
       children: children
-    }) : h(Fragment, null);
+    }) : /*#__PURE__*/jsx(Fragment, {});
   } finally {
     _effect();
   }
 }
 
 function createJsonataRenderer(className) {
-  return createDataRenderer(p => createElement(JsonataRenderer, {
+  return createDataRenderer(p => /*#__PURE__*/jsx(JsonataRenderer, {
     renderOptions: p.renderOptions,
     className: rendererClass(p.className, className),
     dataNode: p.dataNode,
@@ -710,7 +775,7 @@ function JsonataRenderer({
       dataPath: getJsonPath(dataNode)
     }));
     const rendered = useJsonataExpression(renderOptions.expression, getRootDataNode(sdn).control, getJsonPath(sdn), bindings, coerceToString);
-    return createElement("div", {
+    return /*#__PURE__*/jsx("div", {
       className: className,
       dangerouslySetInnerHTML: {
         __html: rendered.value
@@ -749,7 +814,7 @@ function createNullToggleRenderer() {
 
 function createDefaultArrayDataRenderer(defaultActions) {
   return createDataRenderer((props, renderers) => {
-    return createElement(DataArrayRenderer, {
+    return /*#__PURE__*/jsx(DataArrayRenderer, {
       dataProps: props,
       renderers: renderers,
       defaultActions: defaultActions
@@ -790,9 +855,8 @@ function DataArrayRenderer({
   } = mergeObjects(isArrayRenderer(renderOptions) ? renderOptions : {}, defaultActions);
   const childOptions = isArrayRenderer(renderOptions) ? renderOptions.childOptions : undefined;
   const renderAsElement = !isCompoundField(field);
-  const childDefinition = nodeForControl(!renderAsElement ? {
+  const childDefinition = formNode.tree.createTempNode(formNode.id + "child", !renderAsElement ? {
     type: ControlDefinitionType.Group,
-    children: definition.children,
     groupOptions: {
       type: GroupRenderType.Standard,
       hideTitle: true
@@ -800,12 +864,11 @@ function DataArrayRenderer({
   } : {
     type: ControlDefinitionType.Data,
     field: definition.field,
-    children: definition.children,
     renderOptions: childOptions != null ? childOptions : {
       type: DataRenderType.Standard
     },
     hideTitle: true
-  }, formNode.tree);
+  }, formNode.getChildNodes());
   const visibilities = ((_definition$children = definition.children) != null ? _definition$children : []).map(x => [useChildVisibility(x, undefined, true), x]);
   const deps = makeHookDepString(visibilities, x => x[0].deps);
   const Entry = useTrackedComponent(RenderEntry, [deps]);
@@ -820,7 +883,7 @@ function DataArrayRenderer({
     editExternal
   }), {
     required,
-    renderElement: (i, wrap) => createElement(Entry, {
+    renderElement: (i, wrap) => /*#__PURE__*/jsx(Entry, {
       index: i,
       renderChildElement: renderChildElement,
       dataContext: dataContext,
@@ -859,9 +922,11 @@ function RenderEntry({
 function createDefaultArrayRenderer(options) {
   return {
     render: (props, {
-      renderAction
-    }) => createElement(DefaultArrayRenderer, _extends({}, props, options, {
-      renderAction: renderAction
+      renderAction,
+      html
+    }) => /*#__PURE__*/jsx(DefaultArrayRenderer, _extends({}, props, options, {
+      renderAction: renderAction,
+      html: html
     })),
     type: "array"
   };
@@ -880,27 +945,39 @@ function DefaultArrayRenderer(props) {
       arrayControl,
       renderAction,
       style,
-      editAction
+      editAction,
+      html: {
+        Div
+      }
     } = props;
     const {
       addAction,
       removeAction
     } = applyArrayLengthRestrictions(props);
-    return createElement("div", {
-      style: style
-    }, createElement("div", {
-      className: clsx(className, removeAction && removableClass)
-    }, createElement(RenderElements, {
-      control: arrayControl
-    }, (_, x) => renderElement(x, children => removeAction || editAction ? createElement(Fragment, null, createElement("div", {
-      className: clsx(childClass, removableChildClass)
-    }, children), createElement("div", {
-      className: removeActionClass
-    }, editAction && renderAction(editAction(x)), removeAction && renderAction(removeAction(x)))) : createElement("div", {
-      className: childClass
-    }, children)))), addAction && createElement("div", {
-      className: addActionClass
-    }, renderAction(addAction)));
+    return /*#__PURE__*/jsxs(Div, {
+      style: style,
+      children: [/*#__PURE__*/jsx(Div, {
+        className: clsx(className, removeAction && removableClass),
+        children: /*#__PURE__*/jsx(RenderElements, {
+          control: arrayControl,
+          children: (_, x) => renderElement(x, children => removeAction || editAction ? /*#__PURE__*/jsxs(Fragment, {
+            children: [/*#__PURE__*/jsx(Div, {
+              className: clsx(childClass, removableChildClass),
+              children: children
+            }), /*#__PURE__*/jsxs(Div, {
+              className: removeActionClass,
+              children: [editAction && renderAction(editAction(x)), removeAction && renderAction(removeAction(x))]
+            })]
+          }) : /*#__PURE__*/jsx(Div, {
+            className: childClass,
+            children: children
+          }))
+        })
+      }), addAction && /*#__PURE__*/jsx(Div, {
+        className: addActionClass,
+        children: renderAction(addAction)
+      })]
+    });
   } finally {
     _effect();
   }
@@ -910,7 +987,7 @@ const inputClass = "leading-[1.5] text-surface-900 bg-[inherit] border-0 rounded
 function createAutocompleteRenderer(options = {}) {
   return createDataRenderer(p => {
     var _p$options, _p$options2;
-    return p.field.collection ? createElement(MultipleAutocomplete, {
+    return p.field.collection ? /*#__PURE__*/jsx(MultipleAutocomplete, {
       options: (_p$options = p.options) != null ? _p$options : [],
       control: p.control,
       className: rendererClass(p.className, options.className),
@@ -918,7 +995,7 @@ function createAutocompleteRenderer(options = {}) {
       controlClasses: p.renderOptions,
       readOnly: p.readonly,
       id: p.id
-    }) : createElement(SingleAutocomplete, {
+    }) : /*#__PURE__*/jsx(SingleAutocomplete, {
       options: (_p$options2 = p.options) != null ? _p$options2 : [],
       control: p.control,
       className: rendererClass(p.className, options.className),
@@ -983,33 +1060,38 @@ function SingleAutocomplete(_ref) {
         }
       }
     }, props));
-    return createElement("div", _extends({
+    return /*#__PURE__*/jsxs("div", _extends({
       id: id,
       className: "relative"
-    }, getRootProps()), createElement("div", {
-      className: clsx(className, focused ? "border-primary-400 shadow-[0_0_0_3px_transparent] shadow-primary-200" : "shadow-[0_2px_2px_transparent] shadow-surface-50")
-    }, createElement("input", _extends({
-      type: "text"
-    }, getInputProps(), {
-      placeholder: (_controlClasses$place = controlClasses == null ? void 0 : controlClasses.placeholder) != null ? _controlClasses$place : "",
-      className: inputClass
-    })), createElement("button", _extends({}, getPopupIndicatorProps(), {
-      disabled: disabled || readOnly,
-      className: "outline-0 shadow-none border-0 py-0 px-0.5 bg-transparent pr-[10px]"
-    }), createElement("li", {
-      className: clsx("fa-solid fa-angle-down", "text-primary-500", popupOpen && "rotate-180")
-    }))), groupedOptions.length > 0 && popupOpen && createElement("ul", _extends({}, getListboxProps(), {
-      className: listContainerClass
-    }), groupedOptions.map((option, index) => {
-      const optionProps = getOptionProps({
-        option,
-        index
-      });
-      return createElement("li", _extends({}, optionProps, {
-        key: optionProps.key,
-        className: listEntryClass
-      }), option.name);
-    })));
+    }, getRootProps(), {
+      children: [/*#__PURE__*/jsxs("div", {
+        className: clsx(className, focused ? "border-primary-400 shadow-[0_0_0_3px_transparent] shadow-primary-200" : "shadow-[0_2px_2px_transparent] shadow-surface-50"),
+        children: [/*#__PURE__*/jsx("input", _extends({
+          type: "text"
+        }, getInputProps(), {
+          placeholder: (_controlClasses$place = controlClasses == null ? void 0 : controlClasses.placeholder) != null ? _controlClasses$place : "",
+          className: inputClass
+        })), /*#__PURE__*/jsx("button", _extends({}, getPopupIndicatorProps(), {
+          disabled: disabled || readOnly,
+          className: "outline-0 shadow-none border-0 py-0 px-0.5 bg-transparent pr-[10px]",
+          children: /*#__PURE__*/jsx("li", {
+            className: clsx("fa-solid fa-angle-down", "text-primary-500", popupOpen && "rotate-180")
+          })
+        }))]
+      }), groupedOptions.length > 0 && popupOpen && /*#__PURE__*/jsx("ul", _extends({}, getListboxProps(), {
+        className: listContainerClass,
+        children: groupedOptions.map((option, index) => {
+          const optionProps = getOptionProps({
+            option,
+            index
+          });
+          return /*#__PURE__*/createElement("li", _extends({}, optionProps, {
+            key: optionProps.key,
+            className: listEntryClass
+          }), option.name);
+        })
+      }))]
+    }));
   } finally {
     _effect();
   }
@@ -1071,44 +1153,49 @@ function MultipleAutocomplete(_ref2) {
         }
       }
     }, props));
-    return createElement("div", _extends({
+    return /*#__PURE__*/jsxs("div", _extends({
       id: id,
       className: "relative"
-    }, getRootProps()), createElement("div", {
-      className: clsx(className, focused ? "border-primary-400 shadow-[0_0_0_3px_transparent] shadow-primary-200" : "shadow-[0_2px_2px_transparent] shadow-surface-50")
-    }, createElement("div", {
-      className: "flex flex-1 flex-row flex-wrap"
-    }, (_selectedOptionsContr2 = selectedOptionsControl.value) == null ? void 0 : _selectedOptionsContr2.map(v => createElement(Chip, {
-      key: typeof v === "string" ? v : v.name,
-      text: typeof v === "string" ? v : v.name,
-      chipContainerClass: chipContainerClass,
-      chipCloseButtonClass: chipCloseButtonClass,
-      onDeleteClick: () => {
-        const c = selectedOptionsControl.elements.find(x => x.value == v);
-        if (c) removeElement(selectedOptionsControl, c);
-      }
-    })), createElement("input", _extends({
-      type: "text"
-    }, getInputProps(), {
-      placeholder: (_controlClasses$place2 = controlClasses == null ? void 0 : controlClasses.placeholder) != null ? _controlClasses$place2 : "",
-      className: clsx(inputClass)
-    }))), createElement("button", _extends({}, getPopupIndicatorProps(), {
-      disabled: disabled || readOnly,
-      className: "outline-0 shadow-none border-0 py-0 px-0.5 bg-transparent pr-[10px]"
-    }), createElement("i", {
-      className: clsx("fa-solid fa-angle-down", "text-primary-500", popupOpen && "rotate-180")
-    }))), groupedOptions.length > 0 && popupOpen && createElement("ul", _extends({}, getListboxProps(), {
-      className: listContainerClass
-    }), groupedOptions.map((option, index) => {
-      const optionProps = getOptionProps({
-        option,
-        index
-      });
-      return createElement("li", _extends({}, optionProps, {
-        key: optionProps.key,
-        className: listEntryClass
-      }), option.name);
-    })));
+    }, getRootProps(), {
+      children: [/*#__PURE__*/jsxs("div", {
+        className: clsx(className, focused ? "border-primary-400 shadow-[0_0_0_3px_transparent] shadow-primary-200" : "shadow-[0_2px_2px_transparent] shadow-surface-50"),
+        children: [/*#__PURE__*/jsxs("div", {
+          className: "flex flex-1 flex-row flex-wrap",
+          children: [(_selectedOptionsContr2 = selectedOptionsControl.value) == null ? void 0 : _selectedOptionsContr2.map(v => /*#__PURE__*/jsx(Chip, {
+            text: typeof v === "string" ? v : v.name,
+            chipContainerClass: chipContainerClass,
+            chipCloseButtonClass: chipCloseButtonClass,
+            onDeleteClick: () => {
+              const c = selectedOptionsControl.elements.find(x => x.value == v);
+              if (c) removeElement(selectedOptionsControl, c);
+            }
+          }, typeof v === "string" ? v : v.name)), /*#__PURE__*/jsx("input", _extends({
+            type: "text"
+          }, getInputProps(), {
+            placeholder: (_controlClasses$place2 = controlClasses == null ? void 0 : controlClasses.placeholder) != null ? _controlClasses$place2 : "",
+            className: clsx(inputClass)
+          }))]
+        }), /*#__PURE__*/jsx("button", _extends({}, getPopupIndicatorProps(), {
+          disabled: disabled || readOnly,
+          className: "outline-0 shadow-none border-0 py-0 px-0.5 bg-transparent pr-[10px]",
+          children: /*#__PURE__*/jsx("i", {
+            className: clsx("fa-solid fa-angle-down", "text-primary-500", popupOpen && "rotate-180")
+          })
+        }))]
+      }), groupedOptions.length > 0 && popupOpen && /*#__PURE__*/jsx("ul", _extends({}, getListboxProps(), {
+        className: listContainerClass,
+        children: groupedOptions.map((option, index) => {
+          const optionProps = getOptionProps({
+            option,
+            index
+          });
+          return /*#__PURE__*/createElement("li", _extends({}, optionProps, {
+            key: optionProps.key,
+            className: listEntryClass
+          }), option.name);
+        })
+      }))]
+    }));
   } finally {
     _effect2();
   }
@@ -1121,14 +1208,15 @@ function Chip({
 }) {
   var _effect3 = useComponentTracking();
   try {
-    return createElement("div", {
-      className: chipContainerClass
-    }, text, createElement("i", {
-      className: chipCloseButtonClass,
-      onClick: () => {
-        onDeleteClick == null || onDeleteClick();
-      }
-    }));
+    return /*#__PURE__*/jsxs("div", {
+      className: chipContainerClass,
+      children: [text, /*#__PURE__*/jsx("i", {
+        className: chipCloseButtonClass,
+        onClick: () => {
+          onDeleteClick == null || onDeleteClick();
+        }
+      })]
+    });
   } finally {
     _effect3();
   }
@@ -1152,11 +1240,13 @@ function createValueForFieldRenderer(options) {
     } = o.renderOptions;
     const actualFieldRef = fieldRef ? (_schemaDataForFieldRe = schemaDataForFieldRef(fieldRef, o.dataContext.parentNode)) == null || (_schemaDataForFieldRe = _schemaDataForFieldRe.control) == null ? void 0 : _schemaDataForFieldRe.value : undefined;
     const node = actualFieldRef ? schemaForFieldRef(actualFieldRef, options.schema) : undefined;
-    return node ? createElement(ValueForField, {
+    return node ? /*#__PURE__*/jsx(ValueForField, {
       renderer: renderer,
       schema: node,
       control: o.control
-    }) : createElement(Fragment, null, actualFieldRef ? "No schema node for " + actualFieldRef : "");
+    }) : /*#__PURE__*/jsx(Fragment, {
+      children: actualFieldRef ? "No schema node for " + actualFieldRef : ""
+    });
   }, {
     renderType: RenderType
   });
@@ -1186,7 +1276,7 @@ function ValueForField({
     const Render = useControlRendererComponent(groupedControl(controls), renderer, {
       disabled: control.disabled
     }, makeSchemaDataNode(rootSchema, value));
-    return createElement(Render, null);
+    return /*#__PURE__*/jsx(Render, {});
   } finally {
     _effect();
   }
@@ -1209,7 +1299,7 @@ function createOptionalAdornment(options = {}) {
       apply: rl => {
         var _ref, _adornment$placement;
         if (props.formOptions.readonly) return rl;
-        if (!options.hideEdit && adornment.editSelectable) appendMarkupAt((_ref = (_adornment$placement = adornment.placement) != null ? _adornment$placement : options.defaultPlacement) != null ? _ref : AdornmentPlacement.LabelStart, createElement(Fcheckbox$1, {
+        if (!options.hideEdit && adornment.editSelectable) appendMarkupAt((_ref = (_adornment$placement = adornment.placement) != null ? _adornment$placement : options.defaultPlacement) != null ? _ref : AdornmentPlacement.LabelStart, /*#__PURE__*/jsx(Fcheckbox$1, {
           control: editing,
           className: options.checkClass
         }))(rl);
@@ -1221,7 +1311,7 @@ function createOptionalAdornment(options = {}) {
           nullToggler,
           dataContext,
           options
-        }) : createElement(OptionalEditRenderer, {
+        }) : /*#__PURE__*/jsx(OptionalEditRenderer, {
           children: children,
           options: options,
           editing: editing.as(),
@@ -1249,27 +1339,33 @@ function OptionalEditRenderer({
     const nullToggler = getNullToggler(dataControl);
     const allValues = getAllValues(dataControl);
     const multipleValues = allValues.value.length > 1;
-    const nullEdit = adornment.allowNull ? createElement("div", {
-      className: options.nullWrapperClass
-    }, createElement(Fcheckbox$1, {
-      control: nullToggler,
-      className: options.checkClass,
-      notValue: true
-    }), createElement("span", null, (_options$setNullText = options.setNullText) != null ? _options$setNullText : "Null")) : undefined;
-    return createElement("div", {
-      className: options.className
-    }, multipleValues && editing.value === false ? createElement("div", {
-      className: options.multiValuesClass
-    }, (_options$multiValuesT = options.multiValuesText) != null ? _options$multiValuesT : "Differing values") : createElement("div", {
-      className: options.childWrapperClass
-    }, nullEdit, children));
+    const nullEdit = adornment.allowNull ? /*#__PURE__*/jsxs("div", {
+      className: options.nullWrapperClass,
+      children: [/*#__PURE__*/jsx(Fcheckbox$1, {
+        control: nullToggler,
+        className: options.checkClass,
+        notValue: true
+      }), /*#__PURE__*/jsx("span", {
+        children: (_options$setNullText = options.setNullText) != null ? _options$setNullText : "Null"
+      })]
+    }) : undefined;
+    return /*#__PURE__*/jsx("div", {
+      className: options.className,
+      children: multipleValues && editing.value === false ? /*#__PURE__*/jsx("div", {
+        className: options.multiValuesClass,
+        children: (_options$multiValuesT = options.multiValuesText) != null ? _options$multiValuesT : "Differing values"
+      }) : /*#__PURE__*/jsxs("div", {
+        className: options.childWrapperClass,
+        children: [nullEdit, children]
+      })
+    });
   } finally {
     _effect();
   }
 }
 
 function createMultilineFieldRenderer(className) {
-  return createDataRenderer(p => createElement(MultilineTextfield, _extends({}, p, {
+  return createDataRenderer(p => /*#__PURE__*/jsx(MultilineTextfield, _extends({}, p, {
     className: rendererClass(p.className, className)
   })));
 }
@@ -1286,7 +1382,7 @@ function MultilineTextfield({
         c.textContent = v;
       }
     }, true);
-    return createElement("code", {
+    return /*#__PURE__*/jsx("code", {
       contentEditable: !control.disabled,
       className: className,
       onInput: t => control.value = t.currentTarget.textContent,
@@ -1298,7 +1394,7 @@ function MultilineTextfield({
 }
 
 function createArrayElementRenderer(options = {}) {
-  return createDataRenderer((props, formRenderer) => createElement(ArrayElementRenderer, {
+  return createDataRenderer((props, formRenderer) => /*#__PURE__*/jsx(ArrayElementRenderer, {
     dataProps: props,
     options: options,
     formRenderer: formRenderer,
@@ -1330,30 +1426,33 @@ function ArrayElementRenderer({
     });
     if (designMode || extData.value !== undefined) {
       const parentDataNode = makeSchemaDataNode(dataProps.dataNode.schema, extData.fields.data);
-      const elementGroup = nodeForControl({
+      const elementGroup = formNode.tree.createTempNode(formNode.id + "group", {
         type: ControlDefinitionType.Group,
-        children: formNode.definition.children,
         groupOptions: {
           type: GroupRenderType.Standard,
           hideTitle: true
         }
-      }, formNode.tree);
-      const editContent = createElement("div", {
-        className: rendererClass(dataProps.className, options.className)
-      }, renderChild("", elementGroup, {
-        parentDataNode,
-        elementIndex: 0
-      }), createElement("div", {
-        className: options.actionsClass
-      }, createElement(RenderElements, {
-        control: extData.fields.actions
-      }, c => formRenderer.renderAction(applyValidation(c.value)))));
+      }, formNode.getChildNodes());
+      const editContent = /*#__PURE__*/jsxs("div", {
+        className: rendererClass(dataProps.className, options.className),
+        children: [renderChild("", elementGroup, {
+          parentDataNode,
+          elementIndex: 0
+        }), /*#__PURE__*/jsx("div", {
+          className: options.actionsClass,
+          children: /*#__PURE__*/jsx(RenderElements, {
+            control: extData.fields.actions,
+            children: c => formRenderer.renderAction(applyValidation(c.value))
+          })
+        })]
+      });
       if (renderOptions.showInline || designMode) return editContent;
-      return createElement(Modal, {
-        state: overlayState
-      }, createElement(Dialog, {
-        children: editContent
-      }));
+      return /*#__PURE__*/jsx(Modal, {
+        state: overlayState,
+        children: /*#__PURE__*/jsx(Dialog, {
+          children: editContent
+        })
+      });
       function runValidation(onClick) {
         let hasErrors = false;
         visitFormDataInContext(parentDataNode, elementGroup, validationVisitor(() => {
@@ -1369,7 +1468,7 @@ function ArrayElementRenderer({
           onClick: () => runValidation(action.onClick)
         });
       }
-    } else return createElement(Fragment, null);
+    } else return /*#__PURE__*/jsx(Fragment, {});
   } finally {
     _effect();
   }
@@ -1386,13 +1485,17 @@ function createButtonActionRenderer(actionId, options = {}) {
     disabled
   }, renderer) => {
     var _options$renderConten;
-    const h = renderer.h;
-    return h("button", {
-      className: rendererClass(className, options.className),
+    const {
+      Button
+    } = renderer.html;
+    const classNames = rendererClass(className, options.className);
+    return /*#__PURE__*/jsx(Button, {
+      className: classNames,
       disabled: disabled,
       style: style,
-      onClick: onClick
-    }, (_options$renderConten = options.renderContent == null ? void 0 : options.renderContent(actionText, actionId, actionData)) != null ? _options$renderConten : renderer.renderText(actionText));
+      onClick: onClick,
+      children: (_options$renderConten = options.renderContent == null ? void 0 : options.renderContent(actionText, actionId, actionData)) != null ? _options$renderConten : renderer.renderText(actionText, classNames)
+    });
   });
 }
 const DefaultBoolOptions = [{
@@ -1404,7 +1507,6 @@ const DefaultBoolOptions = [{
 }];
 function createDefaultDataRenderer(options = {}) {
   var _options$checkOptions, _options$radioOptions, _options$checkListOpt;
-  const h = React.createElement;
   const jsonataRenderer = createJsonataRenderer(options.jsonataClass);
   const nullToggler = createNullToggleRenderer();
   const multilineRenderer = createMultilineFieldRenderer(options.multilineClass);
@@ -1449,7 +1551,7 @@ function createDefaultDataRenderer(options = {}) {
     if (props.displayOnly || isDisplayOnlyRenderer(renderOptions)) return p => {
       return _extends({}, p, {
         className: "@ " + rendererClass(p.className, displayOnlyClass),
-        children: h(DefaultDisplayOnly, {
+        children: /*#__PURE__*/jsx(DefaultDisplayOnly, {
           field: props.field,
           schemaInterface: props.dataContext.schemaInterface,
           control: props.control,
@@ -1487,11 +1589,13 @@ function createDefaultDataRenderer(options = {}) {
     }
     if (fieldType == FieldType.Any) {
       var _field$displayName;
-      return h(Fragment, null, "Can't render field: ", (_field$displayName = field.displayName) != null ? _field$displayName : field.field, " (", renderType, ")");
+      return /*#__PURE__*/jsxs(Fragment, {
+        children: ["Can't render field: ", (_field$displayName = field.displayName) != null ? _field$displayName : field.field, " (", renderType, ")"]
+      });
     }
     if (isTextfieldRenderer(renderOptions) && renderOptions.multiline) return multilineRenderer.render(props, renderers);
     const placeholder = isTextfieldRenderer(renderOptions) ? renderOptions.placeholder : undefined;
-    return h(ControlInput, {
+    return /*#__PURE__*/jsx(ControlInput, {
       className: rendererClass(props.className, inputClass),
       style: props.style,
       id: props.id,
@@ -1525,7 +1629,7 @@ function createDefaultAdornmentRenderer(options = {}) {
               value: hook
             });
             const SetFieldWrapper = useTrackedComponent(setFieldWrapper, [dynamicHooks]);
-            return wrapLayout(x => createElement(SetFieldWrapper, {
+            return wrapLayout(x => /*#__PURE__*/jsx(SetFieldWrapper, {
               children: x,
               parentContext: dataContext,
               adornment: adornment
@@ -1549,12 +1653,12 @@ function createDefaultAdornmentRenderer(options = {}) {
           }
           if (isIconAdornment(adornment)) {
             var _adornment$placement;
-            return appendMarkupAt((_adornment$placement = adornment.placement) != null ? _adornment$placement : AdornmentPlacement.ControlStart, createElement("i", {
+            return appendMarkupAt((_adornment$placement = adornment.placement) != null ? _adornment$placement : AdornmentPlacement.ControlStart, /*#__PURE__*/jsx("i", {
               className: adornment.iconClass
             }))(rl);
           }
           if (isAccordionAdornment(adornment)) {
-            return wrapLayout(x => createElement(DefaultAccordion, _extends({
+            return wrapLayout(x => /*#__PURE__*/jsx(DefaultAccordion, _extends({
               renderers: renderers,
               children: x,
               accordion: adornment,
@@ -1583,19 +1687,38 @@ function createDefaultLabelRenderer(options) {
   return {
     render: (props, labelStart, labelEnd, renderers) => {
       var _options$requiredElem;
-      const h = renderers.h;
-      const requiredElement = (_options$requiredElem = options == null ? void 0 : options.requiredElement) != null ? _options$requiredElem : h => h("span", null, " *");
+      const {
+        Label
+      } = renderers.html;
+      const requiredElement = (_options$requiredElem = options == null ? void 0 : options.requiredElement) != null ? _options$requiredElem : ({
+        Span
+      }) => /*#__PURE__*/jsx(Span, {
+        children: " *"
+      });
       if (props.type == LabelType.Text) return renderers.renderText(props.label);
-      return labelContainer(h(Fragment, null, h("label", {
-        htmlFor: props.forId,
-        className: rendererClass(props.className, clsx(className, props.type === LabelType.Group && groupLabelClass, props.type === LabelType.Control && controlLabelClass))
-      }, labelStart, renderers.renderLabelText(props.label), props.required && requiredElement(h)), labelEnd));
+      return labelContainer(/*#__PURE__*/jsxs(Fragment, {
+        children: [/*#__PURE__*/jsxs(Label, {
+          htmlFor: props.forId,
+          className: rendererClass(props.className, clsx(className, props.type === LabelType.Group && groupLabelClass, props.type === LabelType.Control && controlLabelClass)),
+          children: [labelStart, renderers.renderLabelText(props.label), props.required && requiredElement(renderers.html)]
+        }), labelEnd]
+      }));
     },
     type: "label"
   };
 }
+const StandardHtmlComponents = {
+  Button: "button",
+  Label: "label",
+  I: "i",
+  Span: "span",
+  Div: "div",
+  H1: "h1",
+  B: "b",
+  Input: "input"
+};
 function createDefaultRenderers(options = {}) {
-  var _options$renderText, _options$h;
+  var _options$extraRendere, _options$renderText, _options$html;
   return {
     data: createDefaultDataRenderer(options.data),
     display: createDefaultDisplayRenderer(options.display),
@@ -1606,8 +1729,9 @@ function createDefaultRenderers(options = {}) {
     adornment: createDefaultAdornmentRenderer(options.adornment),
     renderLayout: createDefaultLayoutRenderer(options.layout),
     visibility: createDefaultVisibilityRenderer(),
+    extraRenderers: (_options$extraRendere = options.extraRenderers == null ? void 0 : options.extraRenderers(options)) != null ? _options$extraRendere : [],
     renderText: (_options$renderText = options.renderText) != null ? _options$renderText : x => x,
-    h: (_options$h = options.h) != null ? _options$h : createElement
+    html: (_options$html = options.html) != null ? _options$html : StandardHtmlComponents
   };
 }
 function createClassStyledRenderers() {
@@ -1637,9 +1761,12 @@ function createClassStyledRenderers() {
 const defaultTailwindTheme = {
   label: {
     groupLabelClass: "font-bold",
-    requiredElement: h => h("span", {
-      className: "text-red-500"
-    }, " *")
+    requiredElement: ({
+      Span
+    }) => /*#__PURE__*/jsx(Span, {
+      className: "text-red-500",
+      children: " *"
+    })
   },
   array: {
     removableClass: "grid grid-cols-[1fr_auto] items-center gap-x-2",
@@ -1669,6 +1796,7 @@ const defaultTailwindTheme = {
     errorClass: "text-sm text-red-500"
   },
   data: {
+    inputClass: "form-control",
     displayOnlyClass: "flex flex-row items-center gap-2",
     checkOptions: {
       className: "flex items-center gap-4",
@@ -1705,5 +1833,5 @@ const defaultTailwindTheme = {
   }
 };
 
-export { CheckButtons, ControlInput, DataArrayRenderer, DefaultAccordion, DefaultArrayRenderer, DefaultBoolOptions, DefaultDisplay, DefaultDisplayOnly, DefaultLayout, DefaultVisibility, Fcheckbox, JsonataRenderer, OptionalEditRenderer, SelectDataRenderer, ValueForFieldExtension, createAutocompleteRenderer, createButtonActionRenderer, createCheckListRenderer, createCheckboxRenderer, createClassStyledRenderers, createDefaultAdornmentRenderer, createDefaultArrayDataRenderer, createDefaultArrayRenderer, createDefaultDataRenderer, createDefaultDisplayRenderer, createDefaultGroupRenderer, createDefaultLabelRenderer, createDefaultLayoutRenderer, createDefaultRenderers, createDefaultVisibilityRenderer, createInputConversion, createJsonataRenderer, createNullToggleRenderer, createOptionalAdornment, createRadioRenderer, createSelectConversion, createSelectRenderer, createValueForFieldRenderer, defaultTailwindTheme, getAccordionState, setIncluded };
+export { CheckButtons, ControlInput, DataArrayRenderer, DefaultAccordion, DefaultArrayRenderer, DefaultBoolOptions, DefaultDisplay, DefaultDisplayOnly, DefaultLayout, DefaultVisibility, Fcheckbox, JsonataRenderer, OptionalEditRenderer, SelectDataRenderer, StandardHtmlComponents, ValueForFieldExtension, createAutocompleteRenderer, createButtonActionRenderer, createCheckListRenderer, createCheckboxRenderer, createClassStyledRenderers, createDefaultAdornmentRenderer, createDefaultArrayDataRenderer, createDefaultArrayRenderer, createDefaultDataRenderer, createDefaultDisplayRenderer, createDefaultGroupRenderer, createDefaultLabelRenderer, createDefaultLayoutRenderer, createDefaultRenderers, createDefaultVisibilityRenderer, createInputConversion, createJsonataRenderer, createNullToggleRenderer, createOptionalAdornment, createRadioRenderer, createSelectConversion, createSelectRenderer, createValueForFieldRenderer, defaultTailwindTheme, getAccordionState, setIncluded };
 //# sourceMappingURL=index.js.map