@react-typed-forms/schemas-html 3.0.0 → 4.0.0

package/lib/index.js

@@ -1,86 +1,109 @@
-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, 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 { 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 { DisplayDataType, rendererClass, coerceToString, getOverrideClass, FieldType, createDataRenderer, fieldOptionAdornment, DataRenderType, createLayoutRenderer, renderLayoutParts, createGroupRenderer, GroupRenderType, fontAwesomeIcon, deepMerge, createAction, IconPlacement, visitFormDataInContext, validationVisitor, ActionStyle, isTabsRenderer, isGridRenderer, isWizardRenderer, isDialogRenderer, isSelectChildRenderer, isFlexRenderer, isInlineRenderer, useExpression, createVisibilityRenderer, getJsonPath, ExpressionType, getLastDefinedValue, getNullToggler, mergeObjects, isArrayRenderer, isCompoundField, ControlDefinitionType, createArrayActions, getLengthRestrictions, applyArrayLengthRestrictions, buildSchema, stringField, boolField, schemaDataForFieldRef, schemaForFieldRef, defaultControlForField, createSchemaTree, useControlRendererComponent, makeSchemaDataNode, createAdornmentRenderer, getIsEditing, appendMarkupAt, AdornmentPlacement, wrapMarkup, getAllValues, ControlAdornmentType, getExternalEditData, createActionRenderer, isDataGroupRenderer, isDisplayOnlyRenderer, hasOptions, isTextfieldRenderer, isOptionalAdornment, isSetFieldAdornment, wrapLayout, isIconAdornment, isAccordionAdornment, LabelType, IconLibrary } from '@react-typed-forms/schemas';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { useComponentTracking, formControlProps, useControl, useControlEffect, RenderArrayElements, useComputed, RenderElements, controlValues, removeElement, trackedValue, setFields, newControl, Fcheckbox as Fcheckbox$1 } from '@react-typed-forms/core';
+import { useState, useMemo, useEffect, Fragment as Fragment$1, createElement, useRef } from 'react';
+import { createOverlayState, Dialog, Modal } from '@astroapps/aria-base';
 import { useAutocomplete } from '@mui/base';
-import { Modal, Dialog } from '@astroapps/aria-base';
 import { useOverlayTriggerState } from '@react-stately/overlays';
 
-function _extends() {
-  return _extends = Object.assign ? Object.assign.bind() : function (n) {
-    for (var e = 1; e < arguments.length; e++) {
-      var t = arguments[e];
-      for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]);
-    }
-    return n;
-  }, _extends.apply(null, arguments);
-}
-function _objectDestructuringEmpty(t) {
-  if (null == t) throw new TypeError("Cannot destructure " + t);
-}
-function _objectWithoutPropertiesLoose(r, e) {
-  if (null == r) return {};
-  var t = {};
-  for (var n in r) if ({}.hasOwnProperty.call(r, n)) {
-    if (e.includes(n)) continue;
-    t[n] = r[n];
-  }
-  return t;
-}
-
-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, {
+      options: options,
+      displayProps: props,
       renderer: renderer
-    })),
+    }),
     type: "display"
   };
 }
-function DefaultDisplay(_ref) {
+function DefaultDisplay({
+  renderer,
+  options,
+  displayProps
+}) {
   var _effect = useComponentTracking();
   try {
-    let {
-        data,
-        display,
-        className,
-        style,
-        renderer
-      } = _ref,
-      options = _objectWithoutPropertiesLoose(_ref, _excluded$4);
-    const h = renderer.h;
+    var _iconDisplay$icon, _iconDisplay$icon2;
+    const {
+      data,
+      display,
+      className,
+      textClass,
+      style
+    } = displayProps;
+    const {
+      I,
+      Div,
+      B,
+      H1,
+      Span
+    } = renderer.html;
     switch (data.type) {
       case DisplayDataType.Icon:
-        return h("i", {
+        const iconDisplay = data;
+        return /*#__PURE__*/jsx(I, {
           style: style,
-          className: clsx(getOverrideClass(className), display ? display.value : data.iconClass)
+          className: clsx(getOverrideClass(className), display ? display.value : iconDisplay.iconClass),
+          iconName: display ? display.value : (_iconDisplay$icon = iconDisplay.icon) == null ? void 0 : _iconDisplay$icon.name,
+          iconLibrary: (_iconDisplay$icon2 = iconDisplay.icon) == null ? void 0 : _iconDisplay$icon2.library
         });
       case DisplayDataType.Text:
-        return h("div", {
+        const text = display ? coerceToString(display.value) : data.text;
+        return /*#__PURE__*/jsx(Div, {
           style: style,
-          className: rendererClass(className, options.textClassName)
-        }, display ? coerceToString(display.value) : data.text);
+          className: rendererClass(className, options.textClassName),
+          textClass: rendererClass(textClass, options.textTextClass),
+          text: text,
+          inline: displayProps.inline
+        });
       case DisplayDataType.Html:
-        return h("div", {
+        return /*#__PURE__*/jsx(Div, {
           style: style,
           className: rendererClass(className, options.htmlClassName),
-          dangerouslySetInnerHTML: {
-            __html: display ? coerceToString(display.value) : data.html
-          }
+          inline: displayProps.inline,
+          html: display ? coerceToString(display.value) : data.html
         });
       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();
   }
 }
 
-const _excluded$3 = ["control", "convert", "renderer"],
-  _excluded2$1 = ["errorText", "value", "onChange"];
+function _extends() {
+  return _extends = Object.assign ? Object.assign.bind() : function (n) {
+    for (var e = 1; e < arguments.length; e++) {
+      var t = arguments[e];
+      for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]);
+    }
+    return n;
+  }, _extends.apply(null, arguments);
+}
+function _objectDestructuringEmpty(t) {
+  if (null == t) throw new TypeError("Cannot destructure " + t);
+}
+function _objectWithoutPropertiesLoose(r, e) {
+  if (null == r) return {};
+  var t = {};
+  for (var n in r) if ({}.hasOwnProperty.call(r, n)) {
+    if (e.includes(n)) continue;
+    t[n] = r[n];
+  }
+  return t;
+}
+
+const _excluded$4 = ["control", "convert", "renderer"],
+  _excluded2$2 = ["errorText", "value", "onChange", "ref"];
 function ControlInput(_ref) {
   var _effect = useComponentTracking();
   try {
@@ -89,22 +112,25 @@ function ControlInput(_ref) {
         convert,
         renderer
       } = _ref,
-      props = _objectWithoutPropertiesLoose(_ref, _excluded$3);
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$4);
     const _formControlProps = formControlProps(control),
       {
-        value
+        value,
+        ref
       } = _formControlProps,
-      inputProps = _objectWithoutPropertiesLoose(_formControlProps, _excluded2$1);
+      inputProps = _objectWithoutPropertiesLoose(_formControlProps, _excluded2$2);
     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, {
+      inputRef: ref,
       type: convert[0],
       value: textValue.value,
-      onChange: e => {
-        textValue.value = e.target.value;
-        const converted = convert[1](e.target.value);
+      onChangeValue: e => {
+        textValue.value = e;
+        const converted = convert[1](e);
         if (converted !== undefined) control.value = converted;
       }
     }, props));
@@ -144,11 +170,11 @@ function createInputConversion(ft) {
   }
 }
 
-const _excluded$2 = ["state", "options", "className", "convert", "required", "emptyText", "requiredText", "readonly"];
+const _excluded$3 = ["state", "options", "className", "convert", "required", "emptyText", "requiredText", "readonly"];
 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,
@@ -176,7 +202,7 @@ function SelectDataRenderer(_ref) {
         requiredText = "<please select>",
         readonly
       } = _ref,
-      props = _objectWithoutPropertiesLoose(_ref, _excluded$2);
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$3);
     const {
       value,
       disabled
@@ -184,23 +210,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();
@@ -220,16 +248,19 @@ function createSelectConversion(ft) {
   }
 }
 
-const _excluded$1 = ["control", "type", "notValue", "renderer"],
-  _excluded2 = ["value", "onChange", "errorText"];
+const _excluded$2 = ["control", "type", "notValue", "renderer"],
+  _excluded2$1 = ["value", "onChange", "errorText", "ref"];
 function createRadioRenderer(options = {}) {
-  return createDataRenderer((p, renderer) => createElement(CheckButtons, _extends({
+  return createDataRenderer((p, renderer) => /*#__PURE__*/jsx(CheckButtons, _extends({
     classes: options,
     controlClasses: p.renderOptions
   }, p, {
     className: rendererClass(p.className, options.className),
     isChecked: (control, o) => control.value == o.value,
-    setChecked: (c, o) => c.value = o.value,
+    setChecked: (c, o) => {
+      c.setTouched(true);
+      c.value = o.value;
+    },
     control: p.control,
     type: "radio",
     entryAdornment: fieldOptionAdornment(p),
@@ -239,7 +270,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, {
@@ -249,6 +280,7 @@ function createCheckListRenderer(options = {}) {
       return Array.isArray(v) ? v.includes(o.value) : false;
     },
     setChecked: (c, o, checked) => {
+      c.setTouched(true);
       c.setValue(x => setIncluded(x != null ? x : [], o.value, checked));
     },
     control: p.control,
@@ -276,40 +308,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,
+                onChangeChecked: x => {
+                  !readonly && setChecked(control, o, x);
+                }
+              }), /*#__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 +369,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,
@@ -337,7 +379,20 @@ function createCheckboxRenderer(options = {}) {
     renderType: DataRenderType.Checkbox
   });
 }
-function CheckBox({
+function createElementSelectedRenderer(options = {}) {
+  return createDataRenderer((props, renderer) => p => _extends({}, p, {
+    label: undefined,
+    children: /*#__PURE__*/jsx(CheckBoxSelected, {
+      p: p,
+      renderer: renderer,
+      options: options,
+      props: props
+    })
+  }), {
+    renderType: DataRenderType.ElementSelected
+  });
+}
+function CheckBoxSelected({
   p,
   props,
   renderer,
@@ -345,22 +400,63 @@ 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;
+    const elementValue = useControl();
+    useEffect(() => {
+      props.runExpression(elementValue, props.renderOptions.elementExpression, v => elementValue.value = v);
+    });
+    const isSelected = useComputed(() => {
+      var _props$control$as$val, _props$control$as$val2;
+      return (_props$control$as$val = (_props$control$as$val2 = props.control.as().value) == null ? void 0 : _props$control$as$val2.includes(elementValue.current.value)) != null ? _props$control$as$val : false;
+    });
+    const selControl = useControl(() => isSelected.current.value);
+    selControl.value = isSelected.value;
+    useControlEffect(() => selControl.value, v => {
+      props.control.as().setValue(x => setIncluded(x != null ? x : [], elementValue.value, v));
+    });
+    return /*#__PURE__*/jsxs(Div, {
+      className: rendererClass(props.className, options.entryClass),
+      children: [/*#__PURE__*/jsx(Fcheckbox, {
+        id: props.id,
+        control: selControl,
+        style: props.style,
+        className: options.checkClass,
+        renderer: renderer
+      }), p.label && renderer.renderLabel(p.label, undefined, undefined)]
+    });
   } finally {
     _effect2();
   }
 }
-function Fcheckbox(_ref) {
+function CheckBox({
+  p,
+  props,
+  renderer,
+  options
+}) {
   var _effect3 = useComponentTracking();
+  try {
+    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 {
+    _effect3();
+  }
+}
+function Fcheckbox(_ref) {
+  var _effect4 = useComponentTracking();
   try {
     let {
         control,
@@ -368,29 +464,26 @@ function Fcheckbox(_ref) {
         notValue = false,
         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 ?? ""),
-    // );
+      others = _objectWithoutPropertiesLoose(_ref, _excluded$2);
+    const {
+      Input
+    } = renderer.html;
     const _formControlProps = formControlProps(control),
       {
         value
       } = _formControlProps,
-      theseProps = _objectWithoutPropertiesLoose(_formControlProps, _excluded2);
-    return h("input", _extends({}, theseProps, {
+      theseProps = _objectWithoutPropertiesLoose(_formControlProps, _excluded2$1);
+    return /*#__PURE__*/jsx(Input, _extends({}, theseProps, {
       checked: !!value !== notValue,
-      ref: r => {
-        control.element = r;
-        // if (r) r.setCustomValidity(control.current.error ?? "");
+      inputRef: r => control.element = r,
+      onChangeChecked: e => {
+        control.touched = true;
+        control.value = e !== notValue;
       },
-      onChange: e => control.value = e.target.checked !== notValue,
       type: type
     }, others));
   } finally {
-    _effect3();
+    _effect4();
   }
 }
 
@@ -398,11 +491,12 @@ 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
       }))),
+      inline: layout.inline,
       className: rendererClass(layout.className, options.className),
       style: layout.style,
       divRef: e => e && props.errorControl ? props.errorControl.meta.scrollElement = e : undefined
@@ -412,12 +506,17 @@ function createDefaultLayoutRenderer(options = {}) {
 function DefaultLayout({
   errorClass,
   renderer: {
-    h,
-    renderText
+    html: {
+      Div,
+      Span
+    }
   },
-  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: e
+    })
+  }),
   layout: {
     controlEnd,
     controlStart,
@@ -430,32 +529,38 @@ 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();
   }
 }
 
 function DefaultDisplayOnly({
-  control,
+  dataNode,
   className,
   emptyText,
   schemaInterface,
-  field,
   style,
-  renderer
+  renderer,
+  textClass,
+  inline
 }) {
   var _effect = useComponentTracking();
   try {
     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 text = (_ref = schemaInterface.isEmptyValue(dataNode.schema.field, dataNode.control.value) ? emptyText : schemaInterface.textValueForData(dataNode)) != null ? _ref : "";
+    const {
+      Div
+    } = renderer.html;
+    return /*#__PURE__*/jsx(Div, {
       style: style,
-      className: className
-    }, text);
+      className: className,
+      textClass: textClass,
+      text: text,
+      inline: inline
+    });
   } finally {
     _effect();
   }
@@ -467,8 +572,8 @@ function DefaultAccordion({
   contentStyle,
   contentClassName,
   designMode,
-  iconOpenClass,
-  iconClosedClass,
+  iconOpen,
+  iconClosed,
   className,
   renderTitle = t => t,
   renderToggler,
@@ -480,6 +585,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 +601,25 @@ function DefaultAccordion({
       display: "none"
     });
     const title = renderers.renderLabelText(renderTitle(accordion.title, open));
-    const toggler = renderToggler ? renderToggler(open, title) : createElement("button", {
+    const currentIcon = isOpen ? iconOpen : iconClosed;
+    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
+      }), currentIcon && /*#__PURE__*/jsx(I, {
+        iconLibrary: currentIcon.library,
+        iconName: currentIcon.name
+      })]
+    });
+    return /*#__PURE__*/jsxs(Fragment, {
+      children: [toggler, (useCss || isOpen || designMode) && /*#__PURE__*/jsx(Div, {
+        style: fullContentStyle,
+        className: contentClassName,
+        children: children
+      })]
+    });
   } finally {
     _effect();
   }
@@ -510,24 +628,45 @@ function getAccordionState(c) {
   return c.meta.accordionState;
 }
 
+/**
+ * @trackControls
+ */
+function VisibleChildrenRenderer(props) {
+  var _effect = useComponentTracking();
+  try {
+    const childStates = props.parentFormNode.getChildNodes().map(x => props.parent.getChildState(x));
+    return props.render(props.props, i => !childStates[i].hidden);
+  } finally {
+    _effect();
+  }
+}
+
 function createTabsRenderer(options = {}) {
-  return createGroupRenderer((p, renderer) => createElement(TabsGroupRenderer, _extends({}, p, {
-    tabOptions: p.renderOptions,
-    options: options
-  })), {
+  return createGroupRenderer((p, renderer) => {
+    return /*#__PURE__*/jsx(VisibleChildrenRenderer, {
+      render: renderAllTabs,
+      dataContext: p.dataContext,
+      parentFormNode: p.formNode,
+      parent: p,
+      props: {
+        groupProps: p,
+        tabOptions: p.renderOptions,
+        options: options
+      }
+    });
+  }, {
     renderType: GroupRenderType.Tabs
   });
-}
-function TabsGroupRenderer({
-  formNode,
-  className,
-  options,
-  renderChild,
-  designMode,
-  tabOptions
-}) {
-  var _effect = useComponentTracking();
-  try {
+  function renderAllTabs({
+    options,
+    groupProps: {
+      designMode,
+      formNode,
+      className,
+      renderChild
+    },
+    tabOptions
+  }, isVisible) {
     const tabIndex = useControl(0);
     const {
       tabClass,
@@ -538,22 +677,289 @@ 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().filter((x, i) => isVisible(i)), 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);
+    }
+  }
+}
+
+function createGridRenderer(options) {
+  return createGroupRenderer((props, formRenderer) => /*#__PURE__*/jsx(VisibleChildrenRenderer, {
+    props: _extends({}, props, {
+      formRenderer,
+      defaultOptions: options
+    }),
+    render: renderGrid,
+    parent: props,
+    dataContext: props.dataContext,
+    parentFormNode: props.formNode
+  }), {
+    renderType: GroupRenderType.Grid
+  });
+  function renderGrid(props, isChildVisible) {
+    var _props$defaultOptions, _ref, _gridOptions$columns;
+    const filteredChildren = props.formNode.getChildNodes().filter((x, i) => isChildVisible(i));
+    const {
+      Div
+    } = props.formRenderer.html;
+    const defaults = (_props$defaultOptions = props.defaultOptions) != null ? _props$defaultOptions : {};
+    const gridOptions = props.renderOptions;
+    const numColumns = (_ref = (_gridOptions$columns = gridOptions.columns) != null ? _gridOptions$columns : defaults.defaultColumns) != null ? _ref : 2;
+    const allChildren = filteredChildren.map((x, i) => props.renderChild(i, x));
+    // split into numColumns items wrapped a div each
+    const rows = [];
+    for (let i = 0; i < allChildren.length; i += numColumns) {
+      rows.push(allChildren.slice(i, i + numColumns));
+    }
+    return /*#__PURE__*/jsx(Div, {
+      className: rendererClass(props.className, defaults.className),
+      children: rows.map((row, rowIndex) => /*#__PURE__*/jsx(Div, {
+        className: rendererClass(gridOptions.rowClass, defaults.rowClass),
+        children: row
+      }, rowIndex))
+    });
+  }
+}
+
+const defaultOptions = {
+  classes: {
+    className: undefined,
+    contentClass: "min-h-96 overflow-auto",
+    navContainerClass: "flex justify-between gap-4 my-2"
+  },
+  actions: {
+    nextText: "Next",
+    nextIcon: fontAwesomeIcon("chevron-right"),
+    nextValidate: true,
+    prevText: "Prev",
+    prevIcon: fontAwesomeIcon("chevron-left"),
+    prevValidate: false
+  },
+  renderNavigation: defaultNavigationRender
+};
+function defaultNavigationRender({
+  formRenderer,
+  prev,
+  next,
+  className
+}) {
+  {
+    const {
+      html: {
+        Div
+      },
+      renderAction
+    } = formRenderer;
+    return /*#__PURE__*/jsxs(Div, {
+      className: className,
+      children: [renderAction(prev), renderAction(next)]
+    });
+  }
+}
+function createWizardRenderer(options) {
+  return createGroupRenderer((props, formRenderer) => /*#__PURE__*/jsx(VisibleChildrenRenderer, {
+    props: _extends({}, props, {
+      formRenderer,
+      defaultOptions: options
+    }),
+    render: renderWizard,
+    parent: props,
+    dataContext: props.dataContext,
+    parentFormNode: props.formNode
+  }), {
+    renderType: GroupRenderType.Wizard
+  });
+}
+function renderWizard(props, isChildVisible) {
+  var _props$defaultOptions;
+  const mergedOptions = deepMerge((_props$defaultOptions = props.defaultOptions) != null ? _props$defaultOptions : {}, defaultOptions);
+  const {
+    classes: {
+      className,
+      contentClass,
+      navContainerClass
+    },
+    actions: {
+      nextText,
+      nextIcon,
+      prevText,
+      prevIcon,
+      nextValidate,
+      prevValidate
+    },
+    renderNavigation
+  } = mergedOptions;
+  const {
+    html: {
+      Div
+    }
+  } = props.formRenderer;
+  const children = props.formNode.getChildNodes();
+  const allVisible = children.map((_, i) => isChildVisible(i));
+  const page = useControl(0);
+  const currentPage = page.value;
+  const isValid = useComputed(() => isPageValid());
+  const next = createAction("nav", () => nav(1, nextValidate), nextText, {
+    hidden: !props.designMode && nextVisibleInDirection(1) == null,
+    disabled: !isValid.value,
+    icon: nextIcon,
+    iconPlacement: IconPlacement.AfterText
+  });
+  const prev = createAction("nav", () => nav(-1, prevValidate), prevText, {
+    disabled: !props.designMode && nextVisibleInDirection(-1) == null,
+    icon: prevIcon
+  });
+  const navElement = renderNavigation({
+    formRenderer: props.formRenderer,
+    page: countVisibleUntil(currentPage),
+    totalPages: countVisibleUntil(children.length),
+    prev,
+    next: next,
+    className: navContainerClass,
+    validatePage: async () => validatePage()
+  });
+  const content = props.designMode ? /*#__PURE__*/jsx(Div, {
+    children: children.map((child, i) => props.renderChild(i, child))
+  }) : currentPage < children.length ? /*#__PURE__*/jsx(Div, {
+    className: contentClass,
+    children: props.renderChild(currentPage, children[currentPage])
+  }) : /*#__PURE__*/jsx(Fragment$1, {});
+  return /*#__PURE__*/jsxs(Div, {
+    className: rendererClass(props.className, className),
+    children: [content, navElement]
+  });
+  function countVisibleUntil(untilPage) {
+    let count = 0;
+    for (let i = 0; i < untilPage && i < allVisible.length; i++) {
+      if (allVisible[i]) {
+        count++;
+      }
+    }
+    return count;
+  }
+  function nav(dir, validate) {
+    if (validate && !validatePage()) {
+      return;
+    }
+    const next = nextVisibleInDirection(dir);
+    if (next != null) {
+      page.value = next;
+    }
+  }
+  function nextVisibleInDirection(dir) {
+    let next = currentPage + dir;
+    while (next >= 0 && next < children.length) {
+      if (allVisible[next]) {
+        return next;
+      }
+      next += dir;
+    }
+    return null;
+  }
+  function validatePage() {
+    const pageNode = children[currentPage];
+    let hasErrors = false;
+    visitFormDataInContext(props.dataContext.parentNode, pageNode, validationVisitor(() => {
+      hasErrors = true;
+    }));
+    return !hasErrors;
+  }
+  function isPageValid() {
+    const pageNode = children[currentPage];
+    let hasErrors = false;
+    visitFormDataInContext(props.dataContext.parentNode, pageNode, c => {
+      if (!c.control.valid) hasErrors = true;
+    });
+    return !hasErrors;
+  }
+}
+
+const defaultDialogOptions = {
+  classes: {
+    className: "",
+    titleClass: "text-2xl font-bold"
+  }
+};
+function createDialogRenderer(options) {
+  return createGroupRenderer((props, renderer) => /*#__PURE__*/jsx(DefaultDialogRenderer, {
+    props: props,
+    options: options,
+    renderer: renderer,
+    renderOptions: props.renderOptions
+  }), {
+    renderType: GroupRenderType.Dialog
+  });
+}
+function DefaultDialogRenderer({
+  props,
+  renderOptions,
+  options,
+  renderer
+}) {
+  var _effect = useComponentTracking();
+  try {
+    const {
+      classes: {
+        titleClass,
+        className
+      }
+    } = deepMerge(options, defaultDialogOptions);
+    const open = useControl(false);
+    const overlayState = createOverlayState(open);
+    const actionOnClick = action => {
+      switch (action) {
+        case "closeDialog":
+          return () => overlayState.close();
+        case "openDialog":
+          return () => overlayState.open();
+      }
+    };
+    const triggerChildren = props.formNode.getChildNodes().filter(x => x.definition.placement === "trigger");
+    const dialogContent = /*#__PURE__*/jsx(Dialog, {
+      title: renderOptions.title,
+      titleClass: titleClass,
+      className: rendererClass(props.className, className),
+      children: props.formNode.getChildNodes().filter(x => !x.definition.placement || x.definition.placement === "dialog").map((x, i) => props.renderChild(i, x, {
+        actionOnClick
+      }))
+    });
+    return /*#__PURE__*/jsxs(Fragment, {
+      children: [triggerChildren.map((x, i) => props.renderChild(i, x, {
+        actionOnClick
+      })), props.designMode ? designContent() : open.value && /*#__PURE__*/jsx(Modal, {
+        state: overlayState,
+        isDismissable: true,
+        children: dialogContent
+      })]
+    });
+    function designContent() {
+      return /*#__PURE__*/jsxs(Fragment, {
+        children: [/*#__PURE__*/jsx("div", {
+          onClickCapture: () => overlayState.toggle(),
+          children: renderer.renderAction(createAction("Toggle Dialog", () => {}, open.value ? "Hide Content" : "Show Content", {
+            actionStyle: ActionStyle.Link
+          }))
+        }), open.value && dialogContent]
+      });
     }
   } finally {
     _effect();
@@ -561,27 +967,17 @@ function TabsGroupRenderer({
 }
 
 function createDefaultGroupRenderer(options) {
+  const gridRenderer = createGridRenderer(options == null ? void 0 : options.grid);
   const tabsRenderer = createTabsRenderer(options == null ? void 0 : options.tabs);
+  const wizardRenderer = createWizardRenderer(options == null ? void 0 : options.wizard);
+  const dialogRenderer = createDialogRenderer(options == null ? void 0 : options.dialog);
   const {
     className,
-    gridStyles = defaultGridStyles,
-    defaultGridColumns = 2,
-    gridClassName,
     standardClassName,
     flexClassName,
+    inlineClass,
     defaultFlexGap
   } = options != null ? options : {};
-  function defaultGridStyles({
-    columns = defaultGridColumns
-  }) {
-    return {
-      className: gridClassName,
-      style: {
-        display: "grid",
-        gridTemplateColumns: `repeat(${columns}, 1fr)`
-      }
-    };
-  }
   function flexStyles(options) {
     return {
       className: flexClassName,
@@ -599,52 +995,78 @@ function createDefaultGroupRenderer(options) {
       formNode
     } = props;
     if (isTabsRenderer(renderOptions)) return tabsRenderer.render(props, renderer);
+    if (isGridRenderer(renderOptions)) return gridRenderer.render(props, renderer);
+    if (isWizardRenderer(renderOptions)) return wizardRenderer.render(props, renderer);
+    if (isDialogRenderer(renderOptions)) return dialogRenderer.render(props, renderer);
     if (isSelectChildRenderer(renderOptions) && !props.designMode) {
-      return h(SelectChildGroupRenderer, _extends({}, props, {
+      return /*#__PURE__*/jsx(SelectChildGroupRenderer, _extends({}, props, {
         renderOptions: renderOptions
       }));
     }
     const {
       style,
       className: gcn
-    } = isGridRenderer(renderOptions) ? gridStyles(renderOptions) : isFlexRenderer(renderOptions) ? flexStyles(renderOptions) : {
+    } = isFlexRenderer(renderOptions) ? flexStyles(renderOptions) : isInlineRenderer(renderOptions) ? {
+      className: inlineClass
+    } : {
       className: standardClassName
     };
-    // noinspection JSUnusedLocalSymbols
-    const h = renderer.h;
-    return h("div", {
+    const {
+      Div
+    } = renderer.html;
+    const inline = renderOptions.type == GroupRenderType.Inline;
+    const children = formNode.getChildNodes().map((c, i) => renderChild(i, c, {
+      inline
+    }));
+    return /*#__PURE__*/jsx(Div, {
       className: rendererClass(props.className, clsx(className, gcn)),
-      style: style
-    }, formNode.getChildNodes().map((c, i) => renderChild(i, c)));
+      textClass: props.textClass,
+      style: style,
+      inline: inline,
+      children: children
+    });
+  }
+  function renderLayout(props, renderer) {
+    if (props.renderOptions.type === GroupRenderType.Contents) {
+      const {
+        formNode,
+        renderChild
+      } = props;
+      const children = formNode.getChildNodes().map((c, i) => renderChild(i, c));
+      return layout => {
+        return _extends({}, layout, {
+          inline: true,
+          children
+        });
+      };
+    }
+    return render(props, renderer);
   }
   return {
     type: "group",
-    render
+    render: renderLayout
   };
 }
 function SelectChildGroupRenderer(props) {
   var _effect = useComponentTracking();
   try {
     const {
-      useEvalExpression,
+      runExpression,
       renderOptions
     } = props;
-    const dynHook = useEvalExpression(renderOptions == null ? void 0 : renderOptions.childIndexExpression, x => x == "string" ? parseInt(x) : x);
-    const Render = useTrackedComponent(p => {
-      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]));
-    }, [dynHook.deps]);
-    return createElement(Render, props);
+    const ctrl = useExpression(undefined, runExpression, renderOptions == null ? void 0 : renderOptions.childIndexExpression, x => typeof x == "string" ? parseInt(x) : x);
+    const childIndex = ctrl == null ? void 0 : ctrl.value;
+    const childDefinitions = props.formNode.getChildNodes();
+    return /*#__PURE__*/jsx("div", {
+      children: typeof childIndex === "number" && childIndex < childDefinitions.length && childIndex >= 0 && props.renderChild(childIndex, childDefinitions[childIndex])
+    });
   } 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
   })));
 }
@@ -654,7 +1076,8 @@ function DefaultVisibility({
   className,
   style,
   divRef,
-  renderer
+  renderer,
+  inline
 }) {
   var _effect = useComponentTracking();
   try {
@@ -667,26 +1090,30 @@ function DefaultVisibility({
         }));
       }
     }, [v == null ? void 0 : v.visible]);
-    const h = renderer.h;
-    return v != null && v.visible ? h("div", {
+    const {
+      Div
+    } = renderer.html;
+    if (inline) return v != null && v.visible ? children : undefined;
+    return v != null && v.visible ? /*#__PURE__*/jsx(Div, {
       className: className,
       style: style,
-      ref: divRef,
+      nativeRef: 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,
     dataContext: p.dataContext,
     control: p.control,
-    readonly: p.readonly
+    readonly: p.readonly,
+    runExpression: p.runExpression
   }), {
     renderType: DataRenderType.Jsonata
   });
@@ -697,20 +1124,23 @@ function JsonataRenderer({
   readonly,
   className,
   dataContext,
-  dataNode
+  dataNode,
+  runExpression
 }) {
   var _effect = useComponentTracking();
   try {
     const sdn = dataNode.elementIndex != null ? dataNode : dataContext.parentNode;
-    const bindings = useComputed(() => ({
+    const bindings = useComputed(() => _extends({}, dataContext.variables, {
       value: control.value,
       readonly,
       disabled: control.disabled,
-      formData: dataContext.formData,
       dataPath: getJsonPath(dataNode)
     }));
-    const rendered = useJsonataExpression(renderOptions.expression, getRootDataNode(sdn).control, getJsonPath(sdn), bindings, coerceToString);
-    return createElement("div", {
+    const rendered = useExpression("", runExpression, {
+      type: ExpressionType.Jsonata,
+      expression: renderOptions.expression
+    }, coerceToString, bindings);
+    return /*#__PURE__*/jsx("div", {
       className: className,
       dangerouslySetInnerHTML: {
         __html: rendered.value
@@ -721,14 +1151,14 @@ function JsonataRenderer({
   }
 }
 
-const _excluded = ["control", "field", "renderOptions"];
+const _excluded$1 = ["control", "field", "renderOptions"];
 function createNullToggleRenderer() {
   return createDataRenderer((_ref, renderers) => {
     let {
         control,
         field
       } = _ref,
-      props = _objectWithoutPropertiesLoose(_ref, _excluded);
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$1);
     const lastDefined = getLastDefinedValue(control);
     if (lastDefined.current.value == null) lastDefined.value = props.definition.defaultValue;
     const nullControl = getNullToggler(control);
@@ -749,7 +1179,7 @@ function createNullToggleRenderer() {
 
 function createDefaultArrayDataRenderer(defaultActions) {
   return createDataRenderer((props, renderers) => {
-    return createElement(DataArrayRenderer, {
+    return /*#__PURE__*/jsx(DataArrayRenderer, {
       dataProps: props,
       renderers: renderers,
       defaultActions: defaultActions
@@ -759,113 +1189,123 @@ function createDefaultArrayDataRenderer(defaultActions) {
     collection: true
   });
 }
+/**
+ * @trackControls
+ */
 function DataArrayRenderer({
   dataProps,
   renderers,
   defaultActions
 }) {
-  var _definition$children;
-  const {
-    renderOptions,
-    control,
-    field,
-    readonly,
-    designMode,
-    required,
-    renderChild,
-    definition,
-    className,
-    style,
-    useChildVisibility,
-    dataContext,
-    formNode
-  } = dataProps;
-  const {
-    addText,
-    noAdd,
-    noRemove,
-    noReorder,
-    removeText,
-    editExternal
-  } = mergeObjects(isArrayRenderer(renderOptions) ? renderOptions : {}, defaultActions);
-  const childOptions = isArrayRenderer(renderOptions) ? renderOptions.childOptions : undefined;
-  const renderAsElement = !isCompoundField(field);
-  const childDefinition = formNode.tree.createTempNode(formNode.id + "child", !renderAsElement ? {
-    type: ControlDefinitionType.Group,
-    groupOptions: {
-      type: GroupRenderType.Standard,
+  var _effect = useComponentTracking();
+  try {
+    const {
+      renderOptions,
+      control,
+      field,
+      readonly,
+      designMode,
+      required,
+      renderChild,
+      definition,
+      className,
+      style,
+      dataContext,
+      formNode,
+      getChildState
+    } = dataProps;
+    const {
+      addText,
+      noAdd,
+      noRemove,
+      noReorder,
+      removeText,
+      editExternal
+    } = mergeObjects(isArrayRenderer(renderOptions) ? renderOptions : {}, defaultActions);
+    const childDefs = formNode.getResolvedChildren();
+    const renderAsElement = !isCompoundField(field);
+    const defaultChildDef = {
+      type: ControlDefinitionType.Data,
+      field: ".",
+      renderOptions: {
+        type: DataRenderType.Standard
+      },
       hideTitle: true
+    };
+    const childDef = {
+      type: ControlDefinitionType.Group,
+      groupOptions: {
+        type: GroupRenderType.Standard,
+        hideTitle: true
+      },
+      children: renderAsElement && childDefs.length == 0 ? [defaultChildDef] : childDefs
+    };
+    const childNode = formNode.createChildNode("child", childDef);
+    const childNodes = childNode.getChildNodes();
+    const arrayProps = _extends({}, createArrayActions(control.as(), field, {
+      addText,
+      removeText,
+      noAdd,
+      noRemove,
+      readonly,
+      disabled: control.disabled,
+      designMode,
+      editExternal
+    }), {
+      required,
+      renderElement: (i, wrap) => /*#__PURE__*/jsx(RenderEntry, {
+        index: i,
+        renderChildElement: renderChildElement,
+        dataContext: dataContext,
+        wrap: wrap,
+        isChildHidden: dataNode => childNodes.every(x => getChildState(x, dataNode).hidden)
+      }),
+      className: className ? className : undefined,
+      style
+    }, getLengthRestrictions(definition));
+    return renderers.renderArray(arrayProps);
+    function renderChildElement(i, elementNode) {
+      return renderChild(elementNode.control.uniqueId, childNode, {
+        parentDataNode: elementNode
+      });
     }
-  } : {
-    type: ControlDefinitionType.Data,
-    field: definition.field,
-    renderOptions: childOptions != null ? childOptions : {
-      type: DataRenderType.Standard
-    },
-    hideTitle: true
-  }, 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]);
-  const arrayProps = _extends({}, createArrayActions(control.as(), field, {
-    addText,
-    removeText,
-    noAdd,
-    noRemove,
-    readonly,
-    disabled: control.disabled,
-    designMode,
-    editExternal
-  }), {
-    required,
-    renderElement: (i, wrap) => createElement(Entry, {
-      index: i,
-      renderChildElement: renderChildElement,
-      dataContext: dataContext,
-      visibilities: visibilities,
-      wrap: wrap
-    }),
-    className: className ? className : undefined,
-    style
-  }, getLengthRestrictions(definition));
-  return renderers.renderArray(arrayProps);
-  function renderChildElement(i, elementNode) {
-    var _control$elements$i$u, _control$elements;
-    return renderChild((_control$elements$i$u = (_control$elements = control.elements) == null ? void 0 : _control$elements[i].uniqueId) != null ? _control$elements$i$u : i, childDefinition, renderAsElement ? {
-      elementIndex: i
-    } : {
-      parentDataNode: elementNode
-    });
+  } finally {
+    _effect();
   }
 }
+/**
+ * @trackControls
+ */
 function RenderEntry({
   index: i,
   renderChildElement,
-  visibilities,
   wrap,
+  isChildHidden,
   dataContext
 }) {
-  const elementNode = dataContext.dataNode.getChildElement(i);
-  const childVis = visibilities.map(([hook, def]) => hook.runHook(_extends({}, dataContext, {
-    parentNode: elementNode,
-    dataNode: lookupDataNode(def, elementNode)
-  }), hook.state).value);
-  const anyVisible = childVis.length == 0 || childVis.some(x => x === true);
-  if (!anyVisible) return undefined;
-  return wrap(renderChildElement(i, elementNode));
+  var _effect2 = useComponentTracking();
+  try {
+    const elementNode = dataContext.dataNode.getChildElement(i);
+    if (isChildHidden(elementNode)) return undefined;
+    return wrap(renderChildElement(i, elementNode));
+  } finally {
+    _effect2();
+  }
 }
 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"
   };
 }
 function DefaultArrayRenderer(props) {
-  var _effect = useComponentTracking();
+  var _effect3 = useComponentTracking();
   try {
     const {
       renderElement,
@@ -878,29 +1318,41 @@ 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();
+    _effect3();
   }
 }
 
@@ -908,7 +1360,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),
@@ -916,7 +1368,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),
@@ -964,6 +1416,7 @@ function SingleAutocomplete(_ref) {
     } = useAutocomplete(_extends({
       freeSolo: true,
       multiple: false,
+      readOnly,
       value: selectedOptionControl.value,
       inputValue: inputControl.value,
       getOptionLabel: v => typeof v === "string" ? v : v.name,
@@ -981,33 +1434,39 @@ 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,
+          readOnly: readOnly
+        })), /*#__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();
   }
@@ -1054,6 +1513,7 @@ function MultipleAutocomplete(_ref2) {
       value: (_selectedOptionsContr = selectedOptionsControl.value) != null ? _selectedOptionsContr : [],
       inputValue: inputControl.value,
       freeSolo: true,
+      readOnly,
       multiple: true,
       getOptionLabel: v => typeof v === "string" ? v : v.name,
       filterOptions: (o, s) => o.filter(o => {
@@ -1069,44 +1529,50 @@ 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: readOnly || disabled ? undefined : () => {
+              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),
+            readOnly: readOnly
+          }))]
+        }), /*#__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();
   }
@@ -1119,14 +1585,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();
   }
@@ -1138,7 +1605,9 @@ const ValueForFieldExtension = {
     value: RenderType,
     name: "Value For Field",
     fields: buildSchema({
-      fieldRef: stringField("Field Reference")
+      fieldRef: stringField("Field Reference"),
+      noOptions: boolField("No Options"),
+      refIsDirect: boolField("Reference is direct")
     })
   }
 };
@@ -1146,23 +1615,35 @@ function createValueForFieldRenderer(options) {
   return createDataRenderer((o, renderer) => {
     var _schemaDataForFieldRe;
     const {
-      fieldRef
+      fieldRef,
+      noOptions,
+      refIsDirect
     } = 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, {
+    const actualFieldRef = fieldRef ? refIsDirect ? fieldRef : (_schemaDataForFieldRe = schemaDataForFieldRef(fieldRef, o.dataContext.parentNode)) == null || (_schemaDataForFieldRe = _schemaDataForFieldRe.control) == null ? void 0 : _schemaDataForFieldRe.value : ".";
+    let schemaField;
+    if (refIsDirect) {
+      const dataNode = schemaDataForFieldRef(actualFieldRef, o.dataContext.parentNode);
+      schemaField = trackedValue(dataNode.control.as());
+    } else {
+      schemaField = actualFieldRef ? schemaForFieldRef(actualFieldRef, options.schema).field : undefined;
+    }
+    return schemaField ? /*#__PURE__*/jsx(ValueForField, {
       renderer: renderer,
-      schema: node,
-      control: o.control
-    }) : createElement(Fragment, null, actualFieldRef ? "No schema node for " + actualFieldRef : "");
+      schemaField: schemaField,
+      control: o.control,
+      noOptions: noOptions
+    }) : /*#__PURE__*/jsx(Fragment, {
+      children: actualFieldRef ? "No schema node for " + actualFieldRef : ""
+    });
   }, {
     renderType: RenderType
   });
 }
 function ValueForField({
-  schema,
+  schemaField,
   renderer,
-  control
+  control,
+  noOptions
 }) {
   var _effect = useComponentTracking();
   try {
@@ -1172,19 +1653,25 @@ function ValueForField({
       default: control
     }));
     const [controls, rootSchema] = useMemo(() => {
-      const rootSchema = rootSchemaNode([_extends({}, schema.field, {
+      const adjustedField = _extends({}, schemaField, {
+        collection: noOptions ? false : schemaField.collection,
+        options: noOptions ? undefined : schemaField.options,
         field: "default",
         required: false,
         notNullable: false,
         onlyForTypes: null,
         defaultValue: undefined
-      })]);
-      return [addMissingControlsForSchema(rootSchema, []), rootSchema];
-    }, [schema]);
-    const Render = useControlRendererComponent(groupedControl(controls), renderer, {
+      });
+      const control = _extends({}, defaultControlForField(adjustedField), {
+        hideTitle: true
+      });
+      const rootSchema = createSchemaTree([adjustedField]).rootNode;
+      return [control, rootSchema];
+    }, [schemaField]);
+    const Render = useControlRendererComponent(controls, renderer, {
       disabled: control.disabled
     }, makeSchemaDataNode(rootSchema, value));
-    return createElement(Render, null);
+    return /*#__PURE__*/jsx(Render, {});
   } finally {
     _effect();
   }
@@ -1207,7 +1694,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);
@@ -1219,7 +1706,7 @@ function createOptionalAdornment(options = {}) {
           nullToggler,
           dataContext,
           options
-        }) : createElement(OptionalEditRenderer, {
+        }) : /*#__PURE__*/jsx(OptionalEditRenderer, {
           children: children,
           options: options,
           editing: editing.as(),
@@ -1247,27 +1734,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)
   })));
 }
@@ -1284,7 +1777,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,
@@ -1296,7 +1789,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,
@@ -1328,29 +1821,33 @@ function ArrayElementRenderer({
     });
     if (designMode || extData.value !== undefined) {
       const parentDataNode = makeSchemaDataNode(dataProps.dataNode.schema, extData.fields.data);
-      const elementGroup = formNode.tree.createTempNode(formNode.id + "group", {
+      const elementGroup = formNode.createChildNode("group", {
         type: ControlDefinitionType.Group,
         groupOptions: {
           type: GroupRenderType.Standard,
           hideTitle: true
-        }
-      }, formNode.getChildNodes());
-      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)))));
+        },
+        children: formNode.getResolvedChildren()
+      });
+      const editContent = /*#__PURE__*/jsxs("div", {
+        className: rendererClass(dataProps.className, options.className),
+        children: [renderChild("", elementGroup, {
+          parentDataNode
+        }), /*#__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(() => {
@@ -1366,32 +1863,71 @@ function ArrayElementRenderer({
           onClick: () => runValidation(action.onClick)
         });
       }
-    } else return createElement(Fragment, null);
+    } else return /*#__PURE__*/jsx(Fragment, {});
   } finally {
     _effect();
   }
 }
 
 function createButtonActionRenderer(actionId, options = {}) {
-  return createActionRenderer(actionId, ({
-    onClick,
-    actionText,
-    className,
-    style,
-    actionId,
-    actionData,
-    disabled
-  }, renderer) => {
-    var _options$renderConten;
-    const h = renderer.h;
-    return h("button", {
-      className: rendererClass(className, options.className),
+  return createActionRenderer(actionId, (props, renderer) => {
+    var _props$icon, _ref, _props$iconPlacement, _options$renderConten;
+    const {
+      key,
+      onClick,
+      actionText,
+      className,
+      style,
+      actionId,
+      actionData,
+      disabled,
+      textClass,
+      actionStyle,
+      inline,
+      actionContent
+    } = props;
+    const icon = (_props$icon = props.icon) != null && _props$icon.name ? props.icon : options.icon;
+    const iconPlacement = (_ref = (_props$iconPlacement = props.iconPlacement) != null ? _props$iconPlacement : options.iconPlacement) != null ? _ref : IconPlacement.BeforeText;
+    const {
+      Button,
+      I,
+      Span
+    } = renderer.html;
+    const isLink = actionStyle == ActionStyle.Link;
+    const isGroup = actionStyle == ActionStyle.Group;
+    const classNames = rendererClass(className, isLink ? options.linkClass : isGroup ? options.groupClass : rendererClass(options.buttonClass, actionStyle == ActionStyle.Secondary ? options.secondaryClass : options.primaryClass));
+    const iconElement = icon && /*#__PURE__*/jsx(I, {
+      iconName: icon.name,
+      iconLibrary: icon.library,
+      className: iconPlacement == IconPlacement.BeforeText ? options.iconBeforeClass : options.iconAfterClass
+    });
+    const textClassNames = rendererClass(textClass, isLink ? options.linkTextClass : rendererClass(options.textClass, actionStyle == ActionStyle.Secondary ? options.secondaryTextClass : options.primaryTextClass));
+    const textElement = actionContent != null ? actionContent : actionText && /*#__PURE__*/jsx(Span, {
+      className: textClassNames,
+      children: actionText
+    });
+    return /*#__PURE__*/jsx(Button, {
+      className: classNames,
+      textClass: textClassNames,
       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,
+      inline: inline,
+      nonTextContent: isGroup,
+      title: iconPlacement == IconPlacement.ReplaceText ? actionText : undefined,
+      notWrapInText: options.notWrapInText,
+      androidRippleColor: options.androidRippleColor,
+      children: (_options$renderConten = options.renderContent == null ? void 0 : options.renderContent(actionText, actionId, actionData)) != null ? _options$renderConten : /*#__PURE__*/jsxs(Fragment, {
+        children: [iconPlacement == IconPlacement.BeforeText && iconElement, iconPlacement != IconPlacement.ReplaceText && textElement, iconPlacement != IconPlacement.BeforeText && iconElement]
+      })
+    }, key);
   });
 }
+
+const _excluded = ["inline", "textClass", "className", "notWrapInText", "androidRippleColor", "onClick", "nonTextContent"],
+  _excluded2 = ["textClass", "className", "onChangeValue", "onChangeChecked", "inputRef"],
+  _excluded3 = ["text", "html", "children", "className", "textClass", "nativeRef", "inline"],
+  _excluded4 = ["textClass", "className"];
 const DefaultBoolOptions = [{
   name: "Yes",
   value: true
@@ -1400,18 +1936,19 @@ const DefaultBoolOptions = [{
   value: false
 }];
 function createDefaultDataRenderer(options = {}) {
-  var _options$checkOptions, _options$radioOptions, _options$checkListOpt;
-  const h = React.createElement;
+  var _options$checkboxOpti, _options$checkboxOpti2, _options$radioOptions, _options$checkListOpt;
+  const elementSelectedRenderer = createElementSelectedRenderer((_options$checkboxOpti = options.checkboxOptions) != null ? _options$checkboxOpti : options.checkOptions);
   const jsonataRenderer = createJsonataRenderer(options.jsonataClass);
   const nullToggler = createNullToggleRenderer();
   const multilineRenderer = createMultilineFieldRenderer(options.multilineClass);
-  const checkboxRenderer = createCheckboxRenderer((_options$checkOptions = options.checkOptions) != null ? _options$checkOptions : options.checkboxOptions);
+  const checkboxRenderer = createCheckboxRenderer((_options$checkboxOpti2 = options.checkboxOptions) != null ? _options$checkboxOpti2 : options.checkOptions);
   const selectRenderer = createSelectRenderer(options.selectOptions);
   const radioRenderer = createRadioRenderer((_options$radioOptions = options.radioOptions) != null ? _options$radioOptions : options.checkOptions);
   const checkListRenderer = createCheckListRenderer((_options$checkListOpt = options.checkListOptions) != null ? _options$checkListOpt : options.checkOptions);
   const arrayElementRenderer = createArrayElementRenderer(options.arrayElementOptions);
   const {
     inputClass,
+    inputTextClass,
     booleanOptions,
     optionRenderer,
     displayOnlyClass,
@@ -1429,7 +1966,7 @@ function createDefaultDataRenderer(options = {}) {
     const fieldType = field.type;
     const renderOptions = props.renderOptions;
     let renderType = renderOptions.type;
-    if (field.collection && props.elementIndex == null && (renderType == DataRenderType.Standard || renderType == DataRenderType.Array || renderType == DataRenderType.ArrayElement)) {
+    if (field.collection && props.dataNode.elementIndex == null && (renderType == DataRenderType.Standard || renderType == DataRenderType.Array || renderType == DataRenderType.ArrayElement)) {
       if (renderType == DataRenderType.ArrayElement) return arrayElementRenderer.render(props, renderers);
       return arrayRenderer.render(props, renderers);
     }
@@ -1446,12 +1983,13 @@ function createDefaultDataRenderer(options = {}) {
     if (props.displayOnly || isDisplayOnlyRenderer(renderOptions)) return p => {
       return _extends({}, p, {
         className: "@ " + rendererClass(p.className, displayOnlyClass),
-        children: h(DefaultDisplayOnly, {
-          field: props.field,
+        children: /*#__PURE__*/jsx(DefaultDisplayOnly, {
+          dataNode: props.dataNode,
           schemaInterface: props.dataContext.schemaInterface,
-          control: props.control,
           className: props.className,
+          textClass: props.textClass,
           style: props.style,
+          inline: props.inline,
           renderer: renderers,
           emptyText: isDisplayOnlyRenderer(renderOptions) && renderOptions.emptyText ? renderOptions.emptyText : defaultEmptyText
         })
@@ -1481,15 +2019,20 @@ function createDefaultDataRenderer(options = {}) {
         return jsonataRenderer.render(props, renderers);
       case DataRenderType.Autocomplete:
         return autocompleteRenderer.render(props, renderers);
+      case DataRenderType.ElementSelected:
+        return elementSelectedRenderer.render(props, renderers);
     }
     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),
+      textClass: rendererClass(props.textClass, inputTextClass),
       style: props.style,
       id: props.id,
       readOnly: props.readonly,
@@ -1512,46 +2055,35 @@ function createDefaultAdornmentRenderer(options = {}) {
         adornment,
         designMode,
         dataContext,
-        useExpr
+        runExpression
       } = props;
       return {
         apply: rl => {
-          if (isSetFieldAdornment(adornment) && useExpr) {
-            const hook = useExpr(adornment.expression, x => x);
-            const dynamicHooks = useDynamicHooks({
-              value: hook
-            });
-            const SetFieldWrapper = useTrackedComponent(setFieldWrapper, [dynamicHooks]);
-            return wrapLayout(x => createElement(SetFieldWrapper, {
+          if (isSetFieldAdornment(adornment) && runExpression) {
+            return wrapLayout(x => /*#__PURE__*/jsx(SetFieldWrapper, {
               children: x,
               parentContext: dataContext,
-              adornment: adornment
+              adornment: adornment,
+              runExpression: runExpression
             }))(rl);
-            function setFieldWrapper({
-              children,
-              adornment,
-              parentContext
-            }) {
-              const {
-                value
-              } = dynamicHooks(parentContext);
-              const fieldNode = schemaDataForFieldRef(adornment.field, parentContext.parentNode);
-              const otherField = fieldNode.control;
-              const always = !adornment.defaultOnly;
-              useControlEffect(() => [value == null ? void 0 : value.value, (otherField == null ? void 0 : otherField.value) == null], ([v]) => {
-                otherField == null || otherField.setValue(x => always || x == null ? v : x);
-              }, true);
-              return children;
-            }
           }
           if (isIconAdornment(adornment)) {
-            var _adornment$placement;
-            return appendMarkupAt((_adornment$placement = adornment.placement) != null ? _adornment$placement : AdornmentPlacement.ControlStart, createElement("i", {
-              className: adornment.iconClass
+            const {
+              I
+            } = renderers.html;
+            const {
+              icon,
+              placement,
+              iconClass
+            } = adornment;
+            return appendMarkupAt(placement != null ? placement : AdornmentPlacement.ControlStart, /*#__PURE__*/jsx(I, {
+              className: iconClass,
+              iconName: icon == null ? void 0 : icon.name,
+              iconLibrary: icon == null ? void 0 : icon.library
             }))(rl);
           }
           if (isAccordionAdornment(adornment)) {
-            return wrapLayout(x => createElement(DefaultAccordion, _extends({
+            return wrapLayout(x => /*#__PURE__*/jsx(DefaultAccordion, _extends({
               renderers: renderers,
               children: x,
               accordion: adornment,
@@ -1568,11 +2100,29 @@ function createDefaultAdornmentRenderer(options = {}) {
     }
   };
 }
+function SetFieldWrapper({
+  children,
+  adornment,
+  parentContext,
+  runExpression
+}) {
+  const fieldNode = schemaDataForFieldRef(adornment.field, parentContext.parentNode);
+  const otherField = fieldNode.control;
+  const always = !adornment.defaultOnly;
+  const value = useExpression(undefined, runExpression, adornment.expression, x => x);
+  useControlEffect(() => [value == null ? void 0 : value.value, (otherField == null ? void 0 : otherField.value) == null], ([v]) => {
+    otherField == null || otherField.setValue(x => always || x == null ? v : x);
+  }, true);
+  return children;
+}
 function createDefaultLabelRenderer(options) {
   const {
     className,
+    controlLabelTextClass,
+    groupLabelTextClass,
     groupLabelClass,
     controlLabelClass,
+    textClass,
     labelContainer
   } = _extends({
     labelContainer: c => c
@@ -1580,19 +2130,152 @@ 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, " *");
-      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));
+      const {
+        Label,
+        Span
+      } = 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 /*#__PURE__*/jsx(Span, {
+        children: props.label
+      });
+      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)),
+          textClass: rendererClass(props.textClass, clsx(textClass, props.type === LabelType.Group && groupLabelTextClass, props.type === LabelType.Control && controlLabelTextClass)),
+          children: [labelStart, renderers.renderLabelText(props.label), props.required && requiredElement(renderers.html)]
+        }), labelEnd]
+      }));
     },
     type: "label"
   };
 }
+const StandardHtmlComponents = {
+  Button: DefaultHtmlButtonRenderer,
+  Label: DefaultHtmlLabelRenderer,
+  I: DefaultHtmlIconRenderer,
+  Span: "span",
+  Div: DefaultHtmlDivRenderer,
+  H1: "h1",
+  B: "b",
+  Input: DefaultHtmlInputRenderer
+};
+function DefaultHtmlButtonRenderer(_ref2) {
+  var _effect = useComponentTracking();
+  try {
+    let {
+        textClass,
+        className,
+        onClick,
+        nonTextContent
+      } = _ref2,
+      props = _objectWithoutPropertiesLoose(_ref2, _excluded);
+    const Comp = nonTextContent ? "div" : "button";
+    return /*#__PURE__*/jsx(Comp, _extends({
+      role: nonTextContent ? "button" : undefined,
+      onClick: onClick ? e => {
+        e.stopPropagation();
+        onClick();
+      } : undefined,
+      className: nonTextContent ? className : clsx(className, textClass)
+    }, props));
+  } finally {
+    _effect();
+  }
+}
+function DefaultHtmlInputRenderer(_ref3) {
+  var _effect2 = useComponentTracking();
+  try {
+    let {
+        textClass,
+        className,
+        onChangeValue,
+        onChangeChecked,
+        inputRef
+      } = _ref3,
+      props = _objectWithoutPropertiesLoose(_ref3, _excluded2);
+    return /*#__PURE__*/jsx("input", _extends({
+      ref: inputRef
+    }, props, {
+      className: clsx(className, textClass),
+      onChange: onChangeValue ? e => onChangeValue(e.target.value) : onChangeChecked ? e => onChangeChecked(e.target.checked) : undefined
+    }));
+  } finally {
+    _effect2();
+  }
+}
+function DefaultHtmlDivRenderer(_ref4) {
+  var _effect3 = useComponentTracking();
+  try {
+    let {
+        text,
+        html,
+        children,
+        className,
+        textClass,
+        nativeRef,
+        inline
+      } = _ref4,
+      props = _objectWithoutPropertiesLoose(_ref4, _excluded3);
+    const Tag = inline ? "span" : "div";
+    return /*#__PURE__*/jsx(Tag, _extends({}, props, {
+      ref: nativeRef,
+      className: clsx(className, textClass),
+      children: text != null ? text : children,
+      dangerouslySetInnerHTML: html ? {
+        __html: html
+      } : undefined
+    }));
+  } finally {
+    _effect3();
+  }
+}
+function DefaultHtmlLabelRenderer(_ref5) {
+  var _effect4 = useComponentTracking();
+  try {
+    let {
+        textClass,
+        className
+      } = _ref5,
+      props = _objectWithoutPropertiesLoose(_ref5, _excluded4);
+    return /*#__PURE__*/jsx("label", _extends({}, props, {
+      className: clsx(className, textClass)
+    }));
+  } finally {
+    _effect4();
+  }
+}
+function DefaultHtmlIconRenderer({
+  iconName,
+  iconLibrary,
+  className,
+  style
+}) {
+  var _effect5 = useComponentTracking();
+  try {
+    return iconName ? /*#__PURE__*/jsx("i", {
+      className: clsx(className, toIconClass()),
+      style: style
+    }) : undefined;
+    function toIconClass() {
+      if (!iconName) return undefined;
+      switch (iconLibrary) {
+        case IconLibrary.FontAwesome:
+          return "fa fa-" + iconName;
+        default:
+          return iconName;
+      }
+    }
+  } finally {
+    _effect5();
+  }
+}
 function createDefaultRenderers(options = {}) {
-  var _options$renderText, _options$h;
+  var _options$extraRendere, _options$html;
   return {
     data: createDefaultDataRenderer(options.data),
     display: createDefaultDisplayRenderer(options.display),
@@ -1603,8 +2286,8 @@ function createDefaultRenderers(options = {}) {
     adornment: createDefaultAdornmentRenderer(options.adornment),
     renderLayout: createDefaultLayoutRenderer(options.layout),
     visibility: createDefaultVisibilityRenderer(),
-    renderText: (_options$renderText = options.renderText) != null ? _options$renderText : x => x,
-    h: (_options$h = options.h) != null ? _options$h : createElement
+    extraRenderers: (_options$extraRendere = options.extraRenderers == null ? void 0 : options.extraRenderers(options)) != null ? _options$extraRendere : [],
+    html: (_options$html = options.html) != null ? _options$html : StandardHtmlComponents
   };
 }
 function createClassStyledRenderers() {
@@ -1619,7 +2302,7 @@ function createClassStyledRenderers() {
       className: "control-array"
     },
     action: {
-      className: "action"
+      buttonClass: "action"
     },
     data: {
       inputClass: "data"
@@ -1634,9 +2317,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",
@@ -1646,8 +2332,12 @@ const defaultTailwindTheme = {
   },
   group: {
     standardClassName: "flex flex-col gap-4",
-    gridClassName: "gap-x-2 gap-y-4",
+    grid: {
+      className: "flex flex-col gap-4",
+      rowClass: "flex flex-row gap-4 justify-between *:flex-1"
+    },
     flexClassName: "gap-2",
+    inlineClass: "",
     tabs: {
       className: "",
       tabListClass: "flex flex-wrap text-sm font-medium text-center text-gray-500 border-b border-gray-200 dark:border-gray-700 dark:text-gray-400",
@@ -1659,17 +2349,22 @@ const defaultTailwindTheme = {
     }
   },
   action: {
-    className: "bg-primary-500 rounded-lg p-3 text-white"
+    buttonClass: "rounded-lg p-3 text-white disabled:opacity-75 disabled:cursor-not-allowed",
+    primaryClass: "bg-primary-500",
+    secondaryClass: "bg-secondary-500",
+    iconBeforeClass: "px-2",
+    iconAfterClass: "px-2"
   },
   layout: {
     className: "flex flex-col",
     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",
-      entryClass: "flex gap-1 items-center"
+      entryClass: "flex items-center gap-1"
     },
     selectOptions: {
       emptyText: "<select>"
@@ -1690,8 +2385,8 @@ const defaultTailwindTheme = {
     accordion: {
       className: "flex items-center gap-2 my-2",
       titleClass: "cursor-pointer",
-      iconOpenClass: "fa fa-chevron-up",
-      iconClosedClass: "fa fa-chevron-down"
+      iconOpen: fontAwesomeIcon("chevron-up"),
+      iconClosed: fontAwesomeIcon("chevron-down")
     },
     optional: {
       checkClass: "m-2",
@@ -1702,5 +2397,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, DefaultHtmlButtonRenderer, DefaultHtmlDivRenderer, DefaultHtmlIconRenderer, DefaultHtmlInputRenderer, DefaultHtmlLabelRenderer, DefaultLayout, DefaultVisibility, Fcheckbox, JsonataRenderer, OptionalEditRenderer, SelectDataRenderer, StandardHtmlComponents, ValueForFieldExtension, createAutocompleteRenderer, createButtonActionRenderer, createCheckListRenderer, createCheckboxRenderer, createClassStyledRenderers, createDefaultAdornmentRenderer, createDefaultArrayDataRenderer, createDefaultArrayRenderer, createDefaultDataRenderer, createDefaultDisplayRenderer, createDefaultGroupRenderer, createDefaultLabelRenderer, createDefaultLayoutRenderer, createDefaultRenderers, createDefaultVisibilityRenderer, createElementSelectedRenderer, createInputConversion, createJsonataRenderer, createNullToggleRenderer, createOptionalAdornment, createRadioRenderer, createSelectConversion, createSelectRenderer, createValueForFieldRenderer, createWizardRenderer, defaultTailwindTheme, getAccordionState, setIncluded };
 //# sourceMappingURL=index.js.map