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

package/lib/index.cjs

@@ -1,15 +1,14 @@
-var React = require('react');
 var clsx = require('clsx');
 var schemas = require('@react-typed-forms/schemas');
-var core = require('@react-typed-forms/core');
 var jsxRuntime = require('react/jsx-runtime');
+var core = require('@react-typed-forms/core');
+var react = require('react');
 var base = require('@mui/base');
 var ariaBase = require('@astroapps/aria-base');
 var overlays = require('@react-stately/overlays');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
-var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var clsx__default = /*#__PURE__*/_interopDefaultLegacy(clsx);
 
 function _extends() {
@@ -41,7 +40,7 @@ function createDefaultDisplayRenderer(options) {
   }
   return {
     render: function render(props, renderer) {
-      return React.createElement(DefaultDisplay, _extends({}, options, props, {
+      return /*#__PURE__*/jsxRuntime.jsx(DefaultDisplay, _extends({}, options, props, {
         renderer: renderer
       }));
     },
@@ -57,20 +56,28 @@ function DefaultDisplay(_ref) {
       style = _ref.style,
       renderer = _ref.renderer,
       options = _objectWithoutPropertiesLoose(_ref, _excluded$4);
-    var h = renderer.h;
+    var _renderer$html = renderer.html,
+      I = _renderer$html.I,
+      Div = _renderer$html.Div,
+      Span = _renderer$html.Span,
+      B = _renderer$html.B,
+      H1 = _renderer$html.H1;
     switch (data.type) {
       case schemas.DisplayDataType.Icon:
-        return h("i", {
+        return /*#__PURE__*/jsxRuntime.jsx(I, {
           style: style,
           className: clsx__default["default"](schemas.getOverrideClass(className), display ? display.value : data.iconClass)
         });
       case schemas.DisplayDataType.Text:
-        return h("div", {
+        return /*#__PURE__*/jsxRuntime.jsx(Div, {
           style: style,
-          className: schemas.rendererClass(className, options.textClassName)
-        }, display ? schemas.coerceToString(display.value) : data.text);
+          className: schemas.rendererClass(className, options.textClassName),
+          children: /*#__PURE__*/jsxRuntime.jsx(Span, {
+            children: display ? schemas.coerceToString(display.value) : data.text
+          })
+        });
       case schemas.DisplayDataType.Html:
-        return h("div", {
+        return /*#__PURE__*/jsxRuntime.jsx(Div, {
           style: style,
           className: schemas.rendererClass(className, options.htmlClassName),
           dangerouslySetInnerHTML: {
@@ -78,9 +85,15 @@ function DefaultDisplay(_ref) {
           }
         });
       case schemas.DisplayDataType.Custom:
-        return h("div", null, h("b", null, "(", data.customId, ")"));
+        return /*#__PURE__*/jsxRuntime.jsx(Div, {
+          children: /*#__PURE__*/jsxRuntime.jsxs(B, {
+            children: ["(", data.customId, ")"]
+          })
+        });
       default:
-        return h("h1", null, "Unknown display type: ", data.type);
+        return /*#__PURE__*/jsxRuntime.jsxs(H1, {
+          children: ["Unknown display type: ", data.type]
+        });
     }
   } finally {
     _effect();
@@ -112,9 +125,8 @@ function ControlInput(_ref) {
     }, function (v) {
       return textValue.value = toText(v);
     });
-    // noinspection JSUnusedLocalSymbols
-    var h = renderer.h;
-    return h("input", _extends({}, inputProps, {
+    var Input = renderer.html.Input;
+    return /*#__PURE__*/jsxRuntime.jsx(Input, _extends({}, inputProps, {
       type: convert[0],
       value: textValue.value,
       onChange: function onChange(e) {
@@ -191,7 +203,7 @@ function createSelectRenderer(options) {
   }
   return schemas.createDataRenderer(function (props, asArray) {
     var _props$options;
-    return React.createElement(SelectDataRenderer, {
+    return /*#__PURE__*/jsxRuntime.jsx(SelectDataRenderer, {
       className: schemas.rendererClass(props.className, options.className),
       state: props.control,
       id: props.id,
@@ -210,11 +222,11 @@ function SelectDataRenderer(_ref) {
   var _effect = core.useComponentTracking();
   try {
     var renderOption = function renderOption(x, i) {
-      return React.createElement("option", {
-        key: i,
+      return /*#__PURE__*/jsxRuntime.jsx("option", {
         value: convert(x.value),
-        disabled: !!x.disabled
-      }, x.name);
+        disabled: !!x.disabled,
+        children: x.name
+      }, i);
     };
     var state = _ref.state,
       options = _ref.options,
@@ -229,39 +241,41 @@ function SelectDataRenderer(_ref) {
       props = _objectWithoutPropertiesLoose(_ref, _excluded$2);
     var value = state.value,
       disabled = state.disabled;
-    var _useState = React.useState(!required || value == null),
+    var _useState = react.useState(!required || value == null),
       showEmpty = _useState[0];
-    var optionStringMap = React.useMemo(function () {
+    var optionStringMap = react.useMemo(function () {
       return Object.fromEntries(options.map(function (x) {
         return [convert(x.value), x.value];
       }));
     }, [options]);
-    var optionGroups = React.useMemo(function () {
+    var optionGroups = react.useMemo(function () {
       return new Set(options.filter(function (x) {
         return x.group;
       }).map(function (x) {
         return x.group;
       }));
     }, [options]);
-    return React.createElement("select", _extends({}, props, {
+    return /*#__PURE__*/jsxRuntime.jsxs("select", _extends({}, props, {
       className: className,
       onChange: function onChange(v) {
         return state.value = optionStringMap[v.target.value];
       },
       value: convert(value),
-      disabled: disabled || readonly
-    }), showEmpty && React.createElement("option", {
-      value: ""
-    }, required ? requiredText : emptyText), [].concat(optionGroups.keys()).map(function (x) {
-      return React.createElement("optgroup", {
-        key: x,
-        label: x
-      }, options.filter(function (o) {
-        return o.group === x;
-      }).map(renderOption));
-    }), options.filter(function (x) {
-      return !x.group;
-    }).map(renderOption));
+      disabled: disabled || readonly,
+      children: [showEmpty && /*#__PURE__*/jsxRuntime.jsx("option", {
+        value: "",
+        children: required ? requiredText : emptyText
+      }), [].concat(optionGroups.keys()).map(function (x) {
+        return /*#__PURE__*/jsxRuntime.jsx("optgroup", {
+          label: x,
+          children: options.filter(function (o) {
+            return o.group === x;
+          }).map(renderOption)
+        }, x);
+      }), options.filter(function (x) {
+        return !x.group;
+      }).map(renderOption)]
+    }));
   } finally {
     _effect();
   }
@@ -289,7 +303,7 @@ function createRadioRenderer(options) {
     options = {};
   }
   return schemas.createDataRenderer(function (p, renderer) {
-    return React.createElement(CheckButtons, _extends({
+    return /*#__PURE__*/jsxRuntime.jsx(CheckButtons, _extends({
       classes: options,
       controlClasses: p.renderOptions
     }, p, {
@@ -314,7 +328,7 @@ function createCheckListRenderer(options) {
     options = {};
   }
   return schemas.createDataRenderer(function (p, renderer) {
-    return React.createElement(CheckButtons, _extends({
+    return /*#__PURE__*/jsxRuntime.jsx(CheckButtons, _extends({
       classes: options,
       controlClasses: p.renderOptions
     }, p, {
@@ -354,44 +368,53 @@ function CheckButtons(_ref) {
       _ref$controlClasses = _ref.controlClasses,
       controlClasses = _ref$controlClasses === void 0 ? {} : _ref$controlClasses,
       renderer = _ref.renderer;
-    var h = renderer.h;
+    var _renderer$html = renderer.html,
+      Button = _renderer$html.Button,
+      Input = _renderer$html.Input,
+      Label = _renderer$html.Label,
+      Div = _renderer$html.Div;
     var disabled = control.disabled;
     var name = "r" + control.uniqueId;
-    return h("div", {
+    return /*#__PURE__*/jsxRuntime.jsx(Div, {
       className: className,
-      id: id
-    }, h(core.RenderArrayElements, {
-      array: options == null ? void 0 : options.filter(function (x) {
-        return x.value != null;
-      })
-    }, function (o, i) {
-      var checked = core.useComputed(function () {
-        return isChecked(control, o);
-      }).value;
-      var selOrUnsel = checked ? schemas.rendererClass(controlClasses == null ? void 0 : controlClasses.selectedClass, classes.selectedClass) : schemas.rendererClass(controlClasses == null ? void 0 : controlClasses.notSelectedClass, classes.notSelectedClass);
-      return h("div", {
-        className: clsx__default["default"](schemas.rendererClass(controlClasses == null ? void 0 : controlClasses.entryWrapperClass, classes.entryWrapperClass), selOrUnsel),
-        onClick: function onClick() {
-          return !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: function onChange(x) {
-          !readonly && setChecked(control, o, x.target.checked);
+      id: id,
+      children: /*#__PURE__*/jsxRuntime.jsx(core.RenderArrayElements, {
+        array: options == null ? void 0 : options.filter(function (x) {
+          return x.value != null;
+        }),
+        children: function children(o, i) {
+          var checked = core.useComputed(function () {
+            return isChecked(control, o);
+          }).value;
+          var selOrUnsel = checked ? schemas.rendererClass(controlClasses == null ? void 0 : controlClasses.selectedClass, classes.selectedClass) : schemas.rendererClass(controlClasses == null ? void 0 : controlClasses.notSelectedClass, classes.notSelectedClass);
+          return /*#__PURE__*/jsxRuntime.jsxs(Button, {
+            className: clsx__default["default"](schemas.rendererClass(controlClasses == null ? void 0 : controlClasses.entryWrapperClass, classes.entryWrapperClass), selOrUnsel),
+            onClick: function onClick() {
+              return !readonly && setChecked(control, o, !checked);
+            },
+            children: [/*#__PURE__*/jsxRuntime.jsxs(Div, {
+              className: classes.entryClass,
+              children: [/*#__PURE__*/jsxRuntime.jsx(Input, {
+                id: name + "_" + i,
+                className: classes.checkClass,
+                type: type,
+                name: name,
+                readOnly: readonly,
+                disabled: disabled,
+                checked: checked,
+                onChange: function onChange(x) {
+                  !readonly && setChecked(control, o, x.target.checked);
+                }
+              }), /*#__PURE__*/jsxRuntime.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();
   }
@@ -416,7 +439,7 @@ function createCheckboxRenderer(options) {
     return function (p) {
       return _extends({}, p, {
         label: undefined,
-        children: React.createElement(CheckBox, {
+        children: /*#__PURE__*/jsxRuntime.jsx(CheckBox, {
           p: p,
           renderer: renderer,
           options: options,
@@ -435,16 +458,17 @@ function CheckBox(_ref2) {
       props = _ref2.props,
       renderer = _ref2.renderer,
       options = _ref2.options;
-    var h = renderer.h;
-    return h("div", {
-      className: schemas.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));
+    var Div = renderer.html.Div;
+    return /*#__PURE__*/jsxRuntime.jsxs(Div, {
+      className: schemas.rendererClass(props.className, options.entryClass),
+      children: [/*#__PURE__*/jsxRuntime.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();
   }
@@ -459,25 +483,20 @@ function Fcheckbox(_ref3) {
       notValue = _ref3$notValue === void 0 ? false : _ref3$notValue,
       renderer = _ref3.renderer,
       others = _objectWithoutPropertiesLoose(_ref3, _excluded$1);
-    var 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 ?? ""),
-    // );
+    var Input = renderer.html.Input;
     var _formControlProps = core.formControlProps(control),
       value = _formControlProps.value,
       onChange = _formControlProps.onChange,
       errorText = _formControlProps.errorText,
       theseProps = _objectWithoutPropertiesLoose(_formControlProps, _excluded2);
-    return h("input", _extends({}, theseProps, {
+    return /*#__PURE__*/jsxRuntime.jsx(Input, _extends({}, theseProps, {
       checked: !!value !== notValue,
       ref: function ref(r) {
-        control.element = r;
-        // if (r) r.setCustomValidity(control.current.error ?? "");
+        return control.element = r;
       },
       onChange: function onChange(e) {
-        return control.value = e.target.checked !== notValue;
+        control.touched = true;
+        control.value = e.target.checked !== notValue;
       },
       type: type
     }, others));
@@ -493,7 +512,7 @@ function createDefaultLayoutRenderer(options) {
   return schemas.createLayoutRenderer(function (props, renderers) {
     var layout = schemas.renderLayoutParts(props, renderers);
     return {
-      children: layout.wrapLayout(React.createElement(DefaultLayout, _extends({
+      children: layout.wrapLayout(/*#__PURE__*/jsxRuntime.jsx(DefaultLayout, _extends({
         layout: layout
       }, options, {
         renderer: renderers
@@ -511,13 +530,18 @@ function DefaultLayout(_ref) {
   try {
     var errorClass = _ref.errorClass,
       _ref$renderer = _ref.renderer,
-      h = _ref$renderer.h,
+      _ref$renderer$html = _ref$renderer.html,
+      Div = _ref$renderer$html.Div,
+      Span = _ref$renderer$html.Span,
       renderText = _ref$renderer.renderText,
       _ref$renderError = _ref.renderError,
       renderError = _ref$renderError === void 0 ? function (e) {
-        return e && h("div", null, h("span", {
-          className: errorClass
-        }, renderText(e)));
+        return e && /*#__PURE__*/jsxRuntime.jsx(Div, {
+          children: /*#__PURE__*/jsxRuntime.jsx(Span, {
+            className: errorClass,
+            children: renderText(e)
+          })
+        });
       } : _ref$renderError,
       _ref$layout = _ref.layout,
       controlEnd = _ref$layout.controlEnd,
@@ -527,7 +551,9 @@ function DefaultLayout(_ref) {
       errorControl = _ref$layout.errorControl;
     var ec = errorControl;
     var errorText = ec && ec.touched ? ec.error : undefined;
-    return h(React.Fragment, null, label, controlStart, children, renderError(errorText), controlEnd);
+    return /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
+      children: [label, controlStart, children, renderError(errorText), controlEnd]
+    });
   } finally {
     _effect();
   }
@@ -546,12 +572,16 @@ function DefaultDisplayOnly(_ref) {
       renderer = _ref.renderer;
     var v = control.value;
     var text = (_ref2 = schemaInterface.isEmptyValue(field, v) ? emptyText : schemaInterface.textValue(field, v)) != null ? _ref2 : "";
-    // noinspection JSUnusedLocalSymbols
-    var h = renderer.h;
-    return h("div", {
+    var _renderer$html = renderer.html,
+      Div = _renderer$html.Div,
+      Span = _renderer$html.Span;
+    return /*#__PURE__*/jsxRuntime.jsx(Div, {
       style: style,
-      className: className
-    }, text);
+      className: className,
+      children: /*#__PURE__*/jsxRuntime.jsx(Span, {
+        children: text
+      })
+    });
   } finally {
     _effect();
   }
@@ -566,7 +596,9 @@ function DefaultAccordion(_ref) {
       contentStyle = _ref.contentStyle,
       contentClassName = _ref.contentClassName,
       designMode = _ref.designMode,
+      iconOpenName = _ref.iconOpenName,
       iconOpenClass = _ref.iconOpenClass,
+      iconClosedName = _ref.iconClosedName,
       iconClosedClass = _ref.iconClosedClass,
       className = _ref.className,
       _ref$renderTitle = _ref.renderTitle,
@@ -578,6 +610,11 @@ function DefaultAccordion(_ref) {
       titleClass = _ref.titleClass,
       useCss = _ref.useCss,
       dataContext = _ref.dataContext;
+    var _renderers$html = renderers.html,
+      Button = _renderers$html.Button,
+      I = _renderers$html.I,
+      Div = _renderers$html.Div,
+      Label = _renderers$html.Label;
     var dataControl = ((_dataContext$dataNode = dataContext.dataNode) != null ? _dataContext$dataNode : dataContext.parentNode).control;
     var open = core.useControl(!!accordion.defaultExpanded);
     if (dataControl && !dataControl.meta.accordionState) {
@@ -588,22 +625,28 @@ function DefaultAccordion(_ref) {
       display: "none"
     });
     var title = renderers.renderLabelText(renderTitle(accordion.title, open));
-    var toggler = renderToggler ? renderToggler(open, title) : React.createElement("button", {
+    var toggler = renderToggler ? renderToggler(open, title) : /*#__PURE__*/jsxRuntime.jsxs(Button, {
       className: className,
       onClick: function onClick() {
         return open.setValue(function (x) {
           return !x;
         });
-      }
-    }, React.createElement("label", {
-      className: titleClass
-    }, title), React.createElement("i", {
-      className: clsx__default["default"](isOpen ? iconOpenClass : iconClosedClass)
-    }));
-    return React.createElement(React.Fragment, null, toggler, (useCss || isOpen || designMode) && React.createElement("div", {
-      style: fullContentStyle,
-      className: contentClassName
-    }, children));
+      },
+      children: [/*#__PURE__*/jsxRuntime.jsx(Label, {
+        className: titleClass,
+        children: title
+      }), /*#__PURE__*/jsxRuntime.jsx(I, {
+        title: isOpen ? iconOpenName : iconClosedName,
+        className: clsx__default["default"](isOpen ? iconOpenClass : iconClosedClass)
+      })]
+    });
+    return /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
+      children: [toggler, (useCss || isOpen || designMode) && /*#__PURE__*/jsxRuntime.jsx(Div, {
+        style: fullContentStyle,
+        className: contentClassName,
+        children: children
+      })]
+    });
   } finally {
     _effect();
   }
@@ -617,7 +660,7 @@ function createTabsRenderer(options) {
     options = {};
   }
   return schemas.createGroupRenderer(function (p, renderer) {
-    return React.createElement(TabsGroupRenderer, _extends({}, p, {
+    return /*#__PURE__*/jsxRuntime.jsx(TabsGroupRenderer, _extends({}, p, {
       tabOptions: p.renderOptions,
       options: options
     }));
@@ -629,24 +672,27 @@ function TabsGroupRenderer(_ref) {
   var _effect = core.useComponentTracking();
   try {
     var renderTabs = function renderTabs(tabs, key) {
-      return React.createElement("div", {
-        key: key,
-        className: schemas.rendererClass(className, options.className)
-      }, React.createElement("ul", {
-        className: schemas.rendererClass(null, tabListClass)
-      }, tabs.map(function (x, i) {
-        return React.createElement("li", {
-          key: i,
-          className: schemas.rendererClass(null, tabClass),
-          onClick: function onClick() {
-            return tabIndex.value = i;
-          }
-        }, React.createElement("span", {
-          className: schemas.rendererClass(null, clsx__default["default"](labelClass, i == currentTab ? activeClass : inactiveClass))
-        }, x.definition.title ? x.definition.title : "<untitled>"));
-      })), React.createElement("div", {
-        className: schemas.rendererClass(tabOptions.contentClass, contentClass)
-      }, renderChild(currentTab, tabs[currentTab])));
+      return /*#__PURE__*/jsxRuntime.jsxs("div", {
+        className: schemas.rendererClass(className, options.className),
+        children: [/*#__PURE__*/jsxRuntime.jsx("ul", {
+          className: schemas.rendererClass(null, tabListClass),
+          children: tabs.map(function (x, i) {
+            return /*#__PURE__*/jsxRuntime.jsx("li", {
+              className: schemas.rendererClass(null, tabClass),
+              onClick: function onClick() {
+                return tabIndex.value = i;
+              },
+              children: /*#__PURE__*/jsxRuntime.jsx("span", {
+                className: schemas.rendererClass(null, clsx__default["default"](labelClass, i == currentTab ? activeClass : inactiveClass)),
+                children: x.definition.title ? x.definition.title : "<untitled>"
+              })
+            }, i);
+          })
+        }), /*#__PURE__*/jsxRuntime.jsx("div", {
+          className: schemas.rendererClass(tabOptions.contentClass, contentClass),
+          children: renderChild(currentTab, tabs[currentTab])
+        })]
+      }, key);
     };
     var formNode = _ref.formNode,
       className = _ref.className,
@@ -662,9 +708,11 @@ function TabsGroupRenderer(_ref) {
       activeClass = options.activeClass,
       contentClass = options.contentClass;
     var currentTab = tabIndex.value;
-    return designMode ? React.createElement(React.Fragment, null, formNode.getChildNodes().map(function (x, i) {
-      return renderTabs([x], i);
-    })) : renderTabs(formNode.getChildNodes(), 0);
+    return designMode ? /*#__PURE__*/jsxRuntime.jsx(jsxRuntime.Fragment, {
+      children: formNode.getChildNodes().map(function (x, i) {
+        return renderTabs([x], i);
+      })
+    }) : renderTabs(formNode.getChildNodes(), 0);
   } finally {
     _effect();
   }
@@ -709,7 +757,7 @@ function createDefaultGroupRenderer(options) {
       formNode = props.formNode;
     if (schemas.isTabsRenderer(renderOptions)) return tabsRenderer.render(props, renderer);
     if (schemas.isSelectChildRenderer(renderOptions) && !props.designMode) {
-      return h(SelectChildGroupRenderer, _extends({}, props, {
+      return /*#__PURE__*/jsxRuntime.jsx(SelectChildGroupRenderer, _extends({}, props, {
         renderOptions: renderOptions
       }));
     }
@@ -718,14 +766,14 @@ function createDefaultGroupRenderer(options) {
       },
       style = _ref3.style,
       gcn = _ref3.className;
-    // noinspection JSUnusedLocalSymbols
-    var h = renderer.h;
-    return h("div", {
+    var Div = renderer.html.Div;
+    return /*#__PURE__*/jsxRuntime.jsx(Div, {
       className: schemas.rendererClass(props.className, clsx__default["default"](className, gcn)),
-      style: style
-    }, formNode.getChildNodes().map(function (c, i) {
-      return renderChild(i, c);
-    }));
+      style: style,
+      children: formNode.getChildNodes().map(function (c, i) {
+        return renderChild(i, c);
+      })
+    });
   }
   return {
     type: "group",
@@ -744,18 +792,19 @@ function SelectChildGroupRenderer(props) {
       var ctrl = dynHook.runHook(p.dataContext, dynHook.state);
       var childIndex = ctrl == null ? void 0 : ctrl.value;
       var childDefinitions = p.formNode.getChildNodes();
-      return React.createElement("div", null, typeof childIndex === "number" && childIndex < childDefinitions.length && childIndex >= 0 && p.renderChild(childIndex, childDefinitions[childIndex]));
+      return /*#__PURE__*/jsxRuntime.jsx("div", {
+        children: typeof childIndex === "number" && childIndex < childDefinitions.length && childIndex >= 0 && p.renderChild(childIndex, childDefinitions[childIndex])
+      });
     }, [dynHook.deps]);
-    return React.createElement(Render, props);
+    return /*#__PURE__*/jsxRuntime.jsx(Render, _extends({}, props));
   } finally {
     _effect();
   }
 }
 
 function createDefaultVisibilityRenderer() {
-  var h = jsxRuntime.jsx;
   return schemas.createVisibilityRenderer(function (props, renderer) {
-    return h(DefaultVisibility, _extends({}, props, {
+    return /*#__PURE__*/jsxRuntime.jsx(DefaultVisibility, _extends({}, props, {
       renderer: renderer
     }));
   });
@@ -770,7 +819,7 @@ function DefaultVisibility(_ref) {
       divRef = _ref.divRef,
       renderer = _ref.renderer;
     var v = visibility.value;
-    React.useEffect(function () {
+    react.useEffect(function () {
       if (v) {
         visibility.setValue(function (ex) {
           return {
@@ -780,13 +829,13 @@ function DefaultVisibility(_ref) {
         });
       }
     }, [v == null ? void 0 : v.visible]);
-    var h = renderer.h;
-    return v != null && v.visible ? h("div", {
+    var Div = renderer.html.Div;
+    return v != null && v.visible ? /*#__PURE__*/jsxRuntime.jsx(Div, {
       className: className,
       style: style,
       ref: divRef,
       children: children
-    }) : h(React.Fragment, null);
+    }) : /*#__PURE__*/jsxRuntime.jsx(jsxRuntime.Fragment, {});
   } finally {
     _effect();
   }
@@ -794,7 +843,7 @@ function DefaultVisibility(_ref) {
 
 function createJsonataRenderer(className) {
   return schemas.createDataRenderer(function (p) {
-    return React.createElement(JsonataRenderer, {
+    return /*#__PURE__*/jsxRuntime.jsx(JsonataRenderer, {
       renderOptions: p.renderOptions,
       className: schemas.rendererClass(p.className, className),
       dataNode: p.dataNode,
@@ -826,7 +875,7 @@ function JsonataRenderer(_ref) {
       };
     });
     var rendered = schemas.useJsonataExpression(renderOptions.expression, schemas.getRootDataNode(sdn).control, schemas.getJsonPath(sdn), bindings, schemas.coerceToString);
-    return React.createElement("div", {
+    return /*#__PURE__*/jsxRuntime.jsx("div", {
       className: className,
       dangerouslySetInnerHTML: {
         __html: rendered.value
@@ -863,7 +912,7 @@ function createNullToggleRenderer() {
 
 function createDefaultArrayDataRenderer(defaultActions) {
   return schemas.createDataRenderer(function (props, renderers) {
-    return React.createElement(DataArrayRenderer, {
+    return /*#__PURE__*/jsxRuntime.jsx(DataArrayRenderer, {
       dataProps: props,
       renderers: renderers,
       defaultActions: defaultActions
@@ -899,9 +948,8 @@ function DataArrayRenderer(_ref) {
     editExternal = _mergeObjects.editExternal;
   var childOptions = schemas.isArrayRenderer(renderOptions) ? renderOptions.childOptions : undefined;
   var renderAsElement = !schemas.isCompoundField(field);
-  var childDefinition = schemas.nodeForControl(!renderAsElement ? {
+  var childDefinition = formNode.tree.createTempNode(formNode.id + "child", !renderAsElement ? {
     type: schemas.ControlDefinitionType.Group,
-    children: definition.children,
     groupOptions: {
       type: schemas.GroupRenderType.Standard,
       hideTitle: true
@@ -909,12 +957,11 @@ function DataArrayRenderer(_ref) {
   } : {
     type: schemas.ControlDefinitionType.Data,
     field: definition.field,
-    children: definition.children,
     renderOptions: childOptions != null ? childOptions : {
       type: schemas.DataRenderType.Standard
     },
     hideTitle: true
-  }, formNode.tree);
+  }, formNode.getChildNodes());
   var visibilities = ((_definition$children = definition.children) != null ? _definition$children : []).map(function (x) {
     return [useChildVisibility(x, undefined, true), x];
   });
@@ -934,7 +981,7 @@ function DataArrayRenderer(_ref) {
   }), {
     required: required,
     renderElement: function renderElement(i, wrap) {
-      return React.createElement(Entry, {
+      return /*#__PURE__*/jsxRuntime.jsx(Entry, {
         index: i,
         renderChildElement: renderChildElement,
         dataContext: dataContext,
@@ -979,9 +1026,11 @@ function RenderEntry(_ref2) {
 function createDefaultArrayRenderer(options) {
   return {
     render: function render(props, _ref4) {
-      var renderAction = _ref4.renderAction;
-      return React.createElement(DefaultArrayRenderer, _extends({}, props, options, {
-        renderAction: renderAction
+      var renderAction = _ref4.renderAction,
+        html = _ref4.html;
+      return /*#__PURE__*/jsxRuntime.jsx(DefaultArrayRenderer, _extends({}, props, options, {
+        renderAction: renderAction,
+        html: html
       }));
     },
     type: "array"
@@ -1000,29 +1049,39 @@ function DefaultArrayRenderer(props) {
       arrayControl = props.arrayControl,
       renderAction = props.renderAction,
       style = props.style,
-      editAction = props.editAction;
+      editAction = props.editAction,
+      Div = props.html.Div;
     var _applyArrayLengthRest = schemas.applyArrayLengthRestrictions(props),
       addAction = _applyArrayLengthRest.addAction,
       removeAction = _applyArrayLengthRest.removeAction;
-    return React.createElement("div", {
-      style: style
-    }, React.createElement("div", {
-      className: clsx__default["default"](className, removeAction && removableClass)
-    }, React.createElement(core.RenderElements, {
-      control: arrayControl
-    }, function (_, x) {
-      return renderElement(x, function (children) {
-        return removeAction || editAction ? React.createElement(React.Fragment, null, React.createElement("div", {
-          className: clsx__default["default"](childClass, removableChildClass)
-        }, children), React.createElement("div", {
-          className: removeActionClass
-        }, editAction && renderAction(editAction(x)), removeAction && renderAction(removeAction(x)))) : React.createElement("div", {
-          className: childClass
-        }, children);
-      });
-    })), addAction && React.createElement("div", {
-      className: addActionClass
-    }, renderAction(addAction)));
+    return /*#__PURE__*/jsxRuntime.jsxs(Div, {
+      style: style,
+      children: [/*#__PURE__*/jsxRuntime.jsx(Div, {
+        className: clsx__default["default"](className, removeAction && removableClass),
+        children: /*#__PURE__*/jsxRuntime.jsx(core.RenderElements, {
+          control: arrayControl,
+          children: function children(_, x) {
+            return renderElement(x, function (children) {
+              return removeAction || editAction ? /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
+                children: [/*#__PURE__*/jsxRuntime.jsx(Div, {
+                  className: clsx__default["default"](childClass, removableChildClass),
+                  children: children
+                }), /*#__PURE__*/jsxRuntime.jsxs(Div, {
+                  className: removeActionClass,
+                  children: [editAction && renderAction(editAction(x)), removeAction && renderAction(removeAction(x))]
+                })]
+              }) : /*#__PURE__*/jsxRuntime.jsx(Div, {
+                className: childClass,
+                children: children
+              });
+            });
+          }
+        })
+      }), addAction && /*#__PURE__*/jsxRuntime.jsx(Div, {
+        className: addActionClass,
+        children: renderAction(addAction)
+      })]
+    });
   } finally {
     _effect();
   }
@@ -1035,7 +1094,7 @@ function createAutocompleteRenderer(options) {
   }
   return schemas.createDataRenderer(function (p) {
     var _p$options, _p$options2;
-    return p.field.collection ? React.createElement(MultipleAutocomplete, {
+    return p.field.collection ? /*#__PURE__*/jsxRuntime.jsx(MultipleAutocomplete, {
       options: (_p$options = p.options) != null ? _p$options : [],
       control: p.control,
       className: schemas.rendererClass(p.className, options.className),
@@ -1043,7 +1102,7 @@ function createAutocompleteRenderer(options) {
       controlClasses: p.renderOptions,
       readOnly: p.readonly,
       id: p.id
-    }) : React.createElement(SingleAutocomplete, {
+    }) : /*#__PURE__*/jsxRuntime.jsx(SingleAutocomplete, {
       options: (_p$options2 = p.options) != null ? _p$options2 : [],
       control: p.control,
       className: schemas.rendererClass(p.className, options.className),
@@ -1109,33 +1168,38 @@ function SingleAutocomplete(_ref) {
       popupOpen = _useAutocomplete.popupOpen,
       focused = _useAutocomplete.focused,
       getPopupIndicatorProps = _useAutocomplete.getPopupIndicatorProps;
-    return React.createElement("div", _extends({
+    return /*#__PURE__*/jsxRuntime.jsxs("div", _extends({
       id: id,
       className: "relative"
-    }, getRootProps()), React.createElement("div", {
-      className: clsx__default["default"](className, focused ? "border-primary-400 shadow-[0_0_0_3px_transparent] shadow-primary-200" : "shadow-[0_2px_2px_transparent] shadow-surface-50")
-    }, React.createElement("input", _extends({
-      type: "text"
-    }, getInputProps(), {
-      placeholder: (_controlClasses$place = controlClasses == null ? void 0 : controlClasses.placeholder) != null ? _controlClasses$place : "",
-      className: inputClass
-    })), React.createElement("button", _extends({}, getPopupIndicatorProps(), {
-      disabled: disabled || readOnly,
-      className: "outline-0 shadow-none border-0 py-0 px-0.5 bg-transparent pr-[10px]"
-    }), React.createElement("li", {
-      className: clsx__default["default"]("fa-solid fa-angle-down", "text-primary-500", popupOpen && "rotate-180")
-    }))), groupedOptions.length > 0 && popupOpen && React.createElement("ul", _extends({}, getListboxProps(), {
-      className: listContainerClass
-    }), groupedOptions.map(function (option, index) {
-      var optionProps = getOptionProps({
-        option: option,
-        index: index
-      });
-      return React.createElement("li", _extends({}, optionProps, {
-        key: optionProps.key,
-        className: listEntryClass
-      }), option.name);
-    })));
+    }, getRootProps(), {
+      children: [/*#__PURE__*/jsxRuntime.jsxs("div", {
+        className: clsx__default["default"](className, focused ? "border-primary-400 shadow-[0_0_0_3px_transparent] shadow-primary-200" : "shadow-[0_2px_2px_transparent] shadow-surface-50"),
+        children: [/*#__PURE__*/jsxRuntime.jsx("input", _extends({
+          type: "text"
+        }, getInputProps(), {
+          placeholder: (_controlClasses$place = controlClasses == null ? void 0 : controlClasses.placeholder) != null ? _controlClasses$place : "",
+          className: inputClass
+        })), /*#__PURE__*/jsxRuntime.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__*/jsxRuntime.jsx("li", {
+            className: clsx__default["default"]("fa-solid fa-angle-down", "text-primary-500", popupOpen && "rotate-180")
+          })
+        }))]
+      }), groupedOptions.length > 0 && popupOpen && /*#__PURE__*/jsxRuntime.jsx("ul", _extends({}, getListboxProps(), {
+        className: listContainerClass,
+        children: groupedOptions.map(function (option, index) {
+          var optionProps = getOptionProps({
+            option: option,
+            index: index
+          });
+          return /*#__PURE__*/react.createElement("li", _extends({}, optionProps, {
+            key: optionProps.key,
+            className: listEntryClass
+          }), option.name);
+        })
+      }))]
+    }));
   } finally {
     _effect();
   }
@@ -1198,48 +1262,53 @@ function MultipleAutocomplete(_ref3) {
       popupOpen = _useAutocomplete2.popupOpen,
       focused = _useAutocomplete2.focused,
       getPopupIndicatorProps = _useAutocomplete2.getPopupIndicatorProps;
-    return React.createElement("div", _extends({
+    return /*#__PURE__*/jsxRuntime.jsxs("div", _extends({
       id: id,
       className: "relative"
-    }, getRootProps()), React.createElement("div", {
-      className: clsx__default["default"](className, focused ? "border-primary-400 shadow-[0_0_0_3px_transparent] shadow-primary-200" : "shadow-[0_2px_2px_transparent] shadow-surface-50")
-    }, React.createElement("div", {
-      className: "flex flex-1 flex-row flex-wrap"
-    }, (_selectedOptionsContr2 = selectedOptionsControl.value) == null ? void 0 : _selectedOptionsContr2.map(function (v) {
-      return React.createElement(Chip, {
-        key: typeof v === "string" ? v : v.name,
-        text: typeof v === "string" ? v : v.name,
-        chipContainerClass: chipContainerClass,
-        chipCloseButtonClass: chipCloseButtonClass,
-        onDeleteClick: function onDeleteClick() {
-          var c = selectedOptionsControl.elements.find(function (x) {
-            return x.value == v;
+    }, getRootProps(), {
+      children: [/*#__PURE__*/jsxRuntime.jsxs("div", {
+        className: clsx__default["default"](className, focused ? "border-primary-400 shadow-[0_0_0_3px_transparent] shadow-primary-200" : "shadow-[0_2px_2px_transparent] shadow-surface-50"),
+        children: [/*#__PURE__*/jsxRuntime.jsxs("div", {
+          className: "flex flex-1 flex-row flex-wrap",
+          children: [(_selectedOptionsContr2 = selectedOptionsControl.value) == null ? void 0 : _selectedOptionsContr2.map(function (v) {
+            return /*#__PURE__*/jsxRuntime.jsx(Chip, {
+              text: typeof v === "string" ? v : v.name,
+              chipContainerClass: chipContainerClass,
+              chipCloseButtonClass: chipCloseButtonClass,
+              onDeleteClick: function onDeleteClick() {
+                var c = selectedOptionsControl.elements.find(function (x) {
+                  return x.value == v;
+                });
+                if (c) core.removeElement(selectedOptionsControl, c);
+              }
+            }, typeof v === "string" ? v : v.name);
+          }), /*#__PURE__*/jsxRuntime.jsx("input", _extends({
+            type: "text"
+          }, getInputProps(), {
+            placeholder: (_controlClasses$place2 = controlClasses == null ? void 0 : controlClasses.placeholder) != null ? _controlClasses$place2 : "",
+            className: clsx__default["default"](inputClass)
+          }))]
+        }), /*#__PURE__*/jsxRuntime.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__*/jsxRuntime.jsx("i", {
+            className: clsx__default["default"]("fa-solid fa-angle-down", "text-primary-500", popupOpen && "rotate-180")
+          })
+        }))]
+      }), groupedOptions.length > 0 && popupOpen && /*#__PURE__*/jsxRuntime.jsx("ul", _extends({}, getListboxProps(), {
+        className: listContainerClass,
+        children: groupedOptions.map(function (option, index) {
+          var optionProps = getOptionProps({
+            option: option,
+            index: index
           });
-          if (c) core.removeElement(selectedOptionsControl, c);
-        }
-      });
-    }), React.createElement("input", _extends({
-      type: "text"
-    }, getInputProps(), {
-      placeholder: (_controlClasses$place2 = controlClasses == null ? void 0 : controlClasses.placeholder) != null ? _controlClasses$place2 : "",
-      className: clsx__default["default"](inputClass)
-    }))), React.createElement("button", _extends({}, getPopupIndicatorProps(), {
-      disabled: disabled || readOnly,
-      className: "outline-0 shadow-none border-0 py-0 px-0.5 bg-transparent pr-[10px]"
-    }), React.createElement("i", {
-      className: clsx__default["default"]("fa-solid fa-angle-down", "text-primary-500", popupOpen && "rotate-180")
-    }))), groupedOptions.length > 0 && popupOpen && React.createElement("ul", _extends({}, getListboxProps(), {
-      className: listContainerClass
-    }), groupedOptions.map(function (option, index) {
-      var optionProps = getOptionProps({
-        option: option,
-        index: index
-      });
-      return React.createElement("li", _extends({}, optionProps, {
-        key: optionProps.key,
-        className: listEntryClass
-      }), option.name);
-    })));
+          return /*#__PURE__*/react.createElement("li", _extends({}, optionProps, {
+            key: optionProps.key,
+            className: listEntryClass
+          }), option.name);
+        })
+      }))]
+    }));
   } finally {
     _effect2();
   }
@@ -1251,14 +1320,15 @@ function Chip(_ref5) {
       chipContainerClass = _ref5.chipContainerClass,
       chipCloseButtonClass = _ref5.chipCloseButtonClass,
       onDeleteClick = _ref5.onDeleteClick;
-    return React.createElement("div", {
-      className: chipContainerClass
-    }, text, React.createElement("i", {
-      className: chipCloseButtonClass,
-      onClick: function onClick() {
-        onDeleteClick == null || onDeleteClick();
-      }
-    }));
+    return /*#__PURE__*/jsxRuntime.jsxs("div", {
+      className: chipContainerClass,
+      children: [text, /*#__PURE__*/jsxRuntime.jsx("i", {
+        className: chipCloseButtonClass,
+        onClick: function onClick() {
+          onDeleteClick == null || onDeleteClick();
+        }
+      })]
+    });
   } finally {
     _effect3();
   }
@@ -1280,11 +1350,13 @@ function createValueForFieldRenderer(options) {
     var fieldRef = o.renderOptions.fieldRef;
     var actualFieldRef = fieldRef ? (_schemaDataForFieldRe = schemas.schemaDataForFieldRef(fieldRef, o.dataContext.parentNode)) == null || (_schemaDataForFieldRe = _schemaDataForFieldRe.control) == null ? void 0 : _schemaDataForFieldRe.value : undefined;
     var node = actualFieldRef ? schemas.schemaForFieldRef(actualFieldRef, options.schema) : undefined;
-    return node ? React.createElement(ValueForField, {
+    return node ? /*#__PURE__*/jsxRuntime.jsx(ValueForField, {
       renderer: renderer,
       schema: node,
       control: o.control
-    }) : React.createElement(React.Fragment, null, actualFieldRef ? "No schema node for " + actualFieldRef : "");
+    }) : /*#__PURE__*/jsxRuntime.jsx(jsxRuntime.Fragment, {
+      children: actualFieldRef ? "No schema node for " + actualFieldRef : ""
+    });
   }, {
     renderType: RenderType
   });
@@ -1302,7 +1374,7 @@ function ValueForField(_ref) {
         "default": control
       });
     });
-    var _useMemo = React.useMemo(function () {
+    var _useMemo = react.useMemo(function () {
         var rootSchema = schemas.rootSchemaNode([_extends({}, schema.field, {
           field: "default",
           required: false,
@@ -1317,7 +1389,7 @@ function ValueForField(_ref) {
     var Render = schemas.useControlRendererComponent(schemas.groupedControl(controls), renderer, {
       disabled: control.disabled
     }, schemas.makeSchemaDataNode(rootSchema, value));
-    return React.createElement(Render, null);
+    return /*#__PURE__*/jsxRuntime.jsx(Render, {});
   } finally {
     _effect();
   }
@@ -1341,7 +1413,7 @@ function createOptionalAdornment(options) {
       apply: function apply(rl) {
         var _ref, _adornment$placement;
         if (props.formOptions.readonly) return rl;
-        if (!options.hideEdit && adornment.editSelectable) schemas.appendMarkupAt((_ref = (_adornment$placement = adornment.placement) != null ? _adornment$placement : options.defaultPlacement) != null ? _ref : schemas.AdornmentPlacement.LabelStart, React.createElement(core.Fcheckbox, {
+        if (!options.hideEdit && adornment.editSelectable) schemas.appendMarkupAt((_ref = (_adornment$placement = adornment.placement) != null ? _adornment$placement : options.defaultPlacement) != null ? _ref : schemas.AdornmentPlacement.LabelStart, /*#__PURE__*/jsxRuntime.jsx(core.Fcheckbox, {
           control: editing,
           className: options.checkClass
         }))(rl);
@@ -1354,7 +1426,7 @@ function createOptionalAdornment(options) {
             nullToggler: nullToggler,
             dataContext: dataContext,
             options: options
-          }) : React.createElement(OptionalEditRenderer, {
+          }) : /*#__PURE__*/jsxRuntime.jsx(OptionalEditRenderer, {
             children: children,
             options: options,
             editing: editing.as(),
@@ -1382,20 +1454,26 @@ function OptionalEditRenderer(_ref2) {
     var nullToggler = schemas.getNullToggler(dataControl);
     var allValues = schemas.getAllValues(dataControl);
     var multipleValues = allValues.value.length > 1;
-    var nullEdit = adornment.allowNull ? React.createElement("div", {
-      className: options.nullWrapperClass
-    }, React.createElement(core.Fcheckbox, {
-      control: nullToggler,
-      className: options.checkClass,
-      notValue: true
-    }), React.createElement("span", null, (_options$setNullText = options.setNullText) != null ? _options$setNullText : "Null")) : undefined;
-    return React.createElement("div", {
-      className: options.className
-    }, multipleValues && editing.value === false ? React.createElement("div", {
-      className: options.multiValuesClass
-    }, (_options$multiValuesT = options.multiValuesText) != null ? _options$multiValuesT : "Differing values") : React.createElement("div", {
-      className: options.childWrapperClass
-    }, nullEdit, children));
+    var nullEdit = adornment.allowNull ? /*#__PURE__*/jsxRuntime.jsxs("div", {
+      className: options.nullWrapperClass,
+      children: [/*#__PURE__*/jsxRuntime.jsx(core.Fcheckbox, {
+        control: nullToggler,
+        className: options.checkClass,
+        notValue: true
+      }), /*#__PURE__*/jsxRuntime.jsx("span", {
+        children: (_options$setNullText = options.setNullText) != null ? _options$setNullText : "Null"
+      })]
+    }) : undefined;
+    return /*#__PURE__*/jsxRuntime.jsx("div", {
+      className: options.className,
+      children: multipleValues && editing.value === false ? /*#__PURE__*/jsxRuntime.jsx("div", {
+        className: options.multiValuesClass,
+        children: (_options$multiValuesT = options.multiValuesText) != null ? _options$multiValuesT : "Differing values"
+      }) : /*#__PURE__*/jsxRuntime.jsxs("div", {
+        className: options.childWrapperClass,
+        children: [nullEdit, children]
+      })
+    });
   } finally {
     _effect();
   }
@@ -1403,7 +1481,7 @@ function OptionalEditRenderer(_ref2) {
 
 function createMultilineFieldRenderer(className) {
   return schemas.createDataRenderer(function (p) {
-    return React.createElement(MultilineTextfield, _extends({}, p, {
+    return /*#__PURE__*/jsxRuntime.jsx(MultilineTextfield, _extends({}, p, {
       className: schemas.rendererClass(p.className, className)
     }));
   });
@@ -1413,7 +1491,7 @@ function MultilineTextfield(_ref) {
   try {
     var control = _ref.control,
       className = _ref.className;
-    var codeRef = React.useRef(null);
+    var codeRef = react.useRef(null);
     core.useControlEffect(function () {
       return control.value;
     }, function (v) {
@@ -1422,7 +1500,7 @@ function MultilineTextfield(_ref) {
         c.textContent = v;
       }
     }, true);
-    return React.createElement("code", {
+    return /*#__PURE__*/jsxRuntime.jsx("code", {
       contentEditable: !control.disabled,
       className: className,
       onInput: function onInput(t) {
@@ -1440,7 +1518,7 @@ function createArrayElementRenderer(options) {
     options = {};
   }
   return schemas.createDataRenderer(function (props, formRenderer) {
-    return React.createElement(ArrayElementRenderer, {
+    return /*#__PURE__*/jsxRuntime.jsx(ArrayElementRenderer, {
       dataProps: props,
       options: options,
       formRenderer: formRenderer,
@@ -1486,33 +1564,36 @@ function ArrayElementRenderer(_ref) {
         });
       };
       var parentDataNode = schemas.makeSchemaDataNode(dataProps.dataNode.schema, extData.fields.data);
-      var elementGroup = schemas.nodeForControl({
+      var elementGroup = formNode.tree.createTempNode(formNode.id + "group", {
         type: schemas.ControlDefinitionType.Group,
-        children: formNode.definition.children,
         groupOptions: {
           type: schemas.GroupRenderType.Standard,
           hideTitle: true
         }
-      }, formNode.tree);
-      var editContent = React.createElement("div", {
-        className: schemas.rendererClass(dataProps.className, options.className)
-      }, renderChild("", elementGroup, {
-        parentDataNode: parentDataNode,
-        elementIndex: 0
-      }), React.createElement("div", {
-        className: options.actionsClass
-      }, React.createElement(core.RenderElements, {
-        control: extData.fields.actions
-      }, function (c) {
-        return formRenderer.renderAction(applyValidation(c.value));
-      })));
+      }, formNode.getChildNodes());
+      var editContent = /*#__PURE__*/jsxRuntime.jsxs("div", {
+        className: schemas.rendererClass(dataProps.className, options.className),
+        children: [renderChild("", elementGroup, {
+          parentDataNode: parentDataNode,
+          elementIndex: 0
+        }), /*#__PURE__*/jsxRuntime.jsx("div", {
+          className: options.actionsClass,
+          children: /*#__PURE__*/jsxRuntime.jsx(core.RenderElements, {
+            control: extData.fields.actions,
+            children: function children(c) {
+              return formRenderer.renderAction(applyValidation(c.value));
+            }
+          })
+        })]
+      });
       if (renderOptions.showInline || designMode) return editContent;
-      return React.createElement(ariaBase.Modal, {
-        state: overlayState
-      }, React.createElement(ariaBase.Dialog, {
-        children: editContent
-      }));
-    } else return React.createElement(React.Fragment, null);
+      return /*#__PURE__*/jsxRuntime.jsx(ariaBase.Modal, {
+        state: overlayState,
+        children: /*#__PURE__*/jsxRuntime.jsx(ariaBase.Dialog, {
+          children: editContent
+        })
+      });
+    } else return /*#__PURE__*/jsxRuntime.jsx(jsxRuntime.Fragment, {});
   } finally {
     _effect();
   }
@@ -1531,13 +1612,15 @@ function createButtonActionRenderer(actionId, options) {
       actionId = _ref.actionId,
       actionData = _ref.actionData,
       disabled = _ref.disabled;
-    var h = renderer.h;
-    return h("button", {
-      className: schemas.rendererClass(className, options.className),
+    var Button = renderer.html.Button;
+    var classNames = schemas.rendererClass(className, options.className);
+    return /*#__PURE__*/jsxRuntime.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)
+    });
   });
 }
 var DefaultBoolOptions = [{
@@ -1552,7 +1635,6 @@ function createDefaultDataRenderer(options) {
   if (options === void 0) {
     options = {};
   }
-  var h = React__default["default"].createElement;
   var jsonataRenderer = createJsonataRenderer(options.jsonataClass);
   var nullToggler = createNullToggleRenderer();
   var multilineRenderer = createMultilineFieldRenderer(options.multilineClass);
@@ -1594,7 +1676,7 @@ function createDefaultDataRenderer(options) {
     if (props.displayOnly || schemas.isDisplayOnlyRenderer(renderOptions)) return function (p) {
       return _extends({}, p, {
         className: "@ " + schemas.rendererClass(p.className, displayOnlyClass),
-        children: h(DefaultDisplayOnly, {
+        children: /*#__PURE__*/jsxRuntime.jsx(DefaultDisplayOnly, {
           field: props.field,
           schemaInterface: props.dataContext.schemaInterface,
           control: props.control,
@@ -1632,11 +1714,13 @@ function createDefaultDataRenderer(options) {
     }
     if (fieldType == schemas.FieldType.Any) {
       var _field$displayName;
-      return h(React.Fragment, null, "Can't render field: ", (_field$displayName = field.displayName) != null ? _field$displayName : field.field, " (", renderType, ")");
+      return /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
+        children: ["Can't render field: ", (_field$displayName = field.displayName) != null ? _field$displayName : field.field, " (", renderType, ")"]
+      });
     }
     if (schemas.isTextfieldRenderer(renderOptions) && renderOptions.multiline) return multilineRenderer.render(props, renderers);
     var placeholder = schemas.isTextfieldRenderer(renderOptions) ? renderOptions.placeholder : undefined;
-    return h(ControlInput, {
+    return /*#__PURE__*/jsxRuntime.jsx(ControlInput, {
       className: schemas.rendererClass(props.className, inputClass),
       style: props.style,
       id: props.id,
@@ -1693,7 +1777,7 @@ function createDefaultAdornmentRenderer(options) {
             });
             var SetFieldWrapper = core.useTrackedComponent(setFieldWrapper, [dynamicHooks]);
             return schemas.wrapLayout(function (x) {
-              return React.createElement(SetFieldWrapper, {
+              return /*#__PURE__*/jsxRuntime.jsx(SetFieldWrapper, {
                 children: x,
                 parentContext: dataContext,
                 adornment: adornment
@@ -1702,13 +1786,13 @@ function createDefaultAdornmentRenderer(options) {
           }
           if (schemas.isIconAdornment(adornment)) {
             var _adornment$placement;
-            return schemas.appendMarkupAt((_adornment$placement = adornment.placement) != null ? _adornment$placement : schemas.AdornmentPlacement.ControlStart, React.createElement("i", {
+            return schemas.appendMarkupAt((_adornment$placement = adornment.placement) != null ? _adornment$placement : schemas.AdornmentPlacement.ControlStart, /*#__PURE__*/jsxRuntime.jsx("i", {
               className: adornment.iconClass
             }))(rl);
           }
           if (schemas.isAccordionAdornment(adornment)) {
             return schemas.wrapLayout(function (x) {
-              return React.createElement(DefaultAccordion, _extends({
+              return /*#__PURE__*/jsxRuntime.jsx(DefaultAccordion, _extends({
                 renderers: renderers,
                 children: x,
                 accordion: adornment,
@@ -1739,21 +1823,37 @@ function createDefaultLabelRenderer(options) {
   return {
     render: function render(props, labelStart, labelEnd, renderers) {
       var _options$requiredElem;
-      var h = renderers.h;
-      var requiredElement = (_options$requiredElem = options == null ? void 0 : options.requiredElement) != null ? _options$requiredElem : function (h) {
-        return h("span", null, " *");
+      var Label = renderers.html.Label;
+      var requiredElement = (_options$requiredElem = options == null ? void 0 : options.requiredElement) != null ? _options$requiredElem : function (_ref5) {
+        var Span = _ref5.Span;
+        return /*#__PURE__*/jsxRuntime.jsx(Span, {
+          children: " *"
+        });
       };
       if (props.type == schemas.LabelType.Text) return renderers.renderText(props.label);
-      return labelContainer(h(React.Fragment, null, h("label", {
-        htmlFor: props.forId,
-        className: schemas.rendererClass(props.className, clsx__default["default"](className, props.type === schemas.LabelType.Group && groupLabelClass, props.type === schemas.LabelType.Control && controlLabelClass))
-      }, labelStart, renderers.renderLabelText(props.label), props.required && requiredElement(h)), labelEnd));
+      return labelContainer(/*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
+        children: [/*#__PURE__*/jsxRuntime.jsxs(Label, {
+          htmlFor: props.forId,
+          className: schemas.rendererClass(props.className, clsx__default["default"](className, props.type === schemas.LabelType.Group && groupLabelClass, props.type === schemas.LabelType.Control && controlLabelClass)),
+          children: [labelStart, renderers.renderLabelText(props.label), props.required && requiredElement(renderers.html)]
+        }), labelEnd]
+      }));
     },
     type: "label"
   };
 }
+var 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;
   if (options === void 0) {
     options = {};
   }
@@ -1767,10 +1867,11 @@ 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 : function (x) {
       return x;
     },
-    h: (_options$h = options.h) != null ? _options$h : React.createElement
+    html: (_options$html = options.html) != null ? _options$html : StandardHtmlComponents
   };
 }
 function createClassStyledRenderers() {
@@ -1800,10 +1901,12 @@ function createClassStyledRenderers() {
 var defaultTailwindTheme = {
   label: {
     groupLabelClass: "font-bold",
-    requiredElement: function requiredElement(h) {
-      return h("span", {
-        className: "text-red-500"
-      }, " *");
+    requiredElement: function requiredElement(_ref) {
+      var Span = _ref.Span;
+      return /*#__PURE__*/jsxRuntime.jsx(Span, {
+        className: "text-red-500",
+        children: " *"
+      });
     }
   },
   array: {
@@ -1834,6 +1937,7 @@ var 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",
@@ -1884,6 +1988,7 @@ exports.Fcheckbox = Fcheckbox;
 exports.JsonataRenderer = JsonataRenderer;
 exports.OptionalEditRenderer = OptionalEditRenderer;
 exports.SelectDataRenderer = SelectDataRenderer;
+exports.StandardHtmlComponents = StandardHtmlComponents;
 exports.ValueForFieldExtension = ValueForFieldExtension;
 exports.createAutocompleteRenderer = createAutocompleteRenderer;
 exports.createButtonActionRenderer = createButtonActionRenderer;