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

package/lib/index.cjs

@@ -1,49 +1,27 @@
-var React = require('react');
 var clsx = require('clsx');
 var schemas = require('@react-typed-forms/schemas');
-var core = require('@react-typed-forms/core');
 var jsxRuntime = require('react/jsx-runtime');
-var base = require('@mui/base');
+var core = require('@react-typed-forms/core');
+var react = require('react');
 var ariaBase = require('@astroapps/aria-base');
+var base = require('@mui/base');
 var overlays = require('@react-stately/overlays');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
-var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var clsx__default = /*#__PURE__*/_interopDefaultLegacy(clsx);
 
-function _extends() {
-  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;
-}
-
-var _excluded$4 = ["data", "display", "className", "style", "renderer"];
 function createDefaultDisplayRenderer(options) {
   if (options === void 0) {
     options = {};
   }
   return {
     render: function render(props, renderer) {
-      return React.createElement(DefaultDisplay, _extends({}, options, props, {
+      return /*#__PURE__*/jsxRuntime.jsx(DefaultDisplay, {
+        options: options,
+        displayProps: props,
         renderer: renderer
-      }));
+      });
     },
     type: "display"
   };
@@ -51,44 +29,86 @@ function createDefaultDisplayRenderer(options) {
 function DefaultDisplay(_ref) {
   var _effect = core.useComponentTracking();
   try {
-    var data = _ref.data,
-      display = _ref.display,
-      className = _ref.className,
-      style = _ref.style,
-      renderer = _ref.renderer,
-      options = _objectWithoutPropertiesLoose(_ref, _excluded$4);
-    var h = renderer.h;
+    var _iconDisplay$icon, _iconDisplay$icon2;
+    var renderer = _ref.renderer,
+      options = _ref.options,
+      displayProps = _ref.displayProps;
+    var data = displayProps.data,
+      display = displayProps.display,
+      className = displayProps.className,
+      textClass = displayProps.textClass,
+      style = displayProps.style;
+    var _renderer$html = renderer.html,
+      I = _renderer$html.I,
+      Div = _renderer$html.Div,
+      B = _renderer$html.B,
+      H1 = _renderer$html.H1,
+      Span = _renderer$html.Span;
     switch (data.type) {
       case schemas.DisplayDataType.Icon:
-        return h("i", {
+        var iconDisplay = data;
+        return /*#__PURE__*/jsxRuntime.jsx(I, {
           style: style,
-          className: clsx__default["default"](schemas.getOverrideClass(className), display ? display.value : data.iconClass)
+          className: clsx__default["default"](schemas.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 schemas.DisplayDataType.Text:
-        return h("div", {
+        var text = display ? schemas.coerceToString(display.value) : data.text;
+        return /*#__PURE__*/jsxRuntime.jsx(Div, {
           style: style,
-          className: schemas.rendererClass(className, options.textClassName)
-        }, display ? schemas.coerceToString(display.value) : data.text);
+          className: schemas.rendererClass(className, options.textClassName),
+          textClass: schemas.rendererClass(textClass, options.textTextClass),
+          text: text,
+          inline: displayProps.inline
+        });
       case schemas.DisplayDataType.Html:
-        return h("div", {
+        return /*#__PURE__*/jsxRuntime.jsx(Div, {
           style: style,
           className: schemas.rendererClass(className, options.htmlClassName),
-          dangerouslySetInnerHTML: {
-            __html: display ? schemas.coerceToString(display.value) : data.html
-          }
+          inline: displayProps.inline,
+          html: display ? schemas.coerceToString(display.value) : data.html
         });
       case schemas.DisplayDataType.Custom:
-        return h("div", null, h("b", null, "(", data.customId, ")"));
+        return /*#__PURE__*/jsxRuntime.jsx(Div, {
+          children: /*#__PURE__*/jsxRuntime.jsxs(B, {
+            children: ["(", data.customId, ")"]
+          })
+        });
       default:
-        return h("h1", null, "Unknown display type: ", data.type);
+        return /*#__PURE__*/jsxRuntime.jsxs(H1, {
+          children: ["Unknown display type: ", data.type]
+        });
     }
   } finally {
     _effect();
   }
 }
 
-var _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;
+}
+
+var _excluded$4 = ["control", "convert", "renderer"],
+  _excluded2$2 = ["errorText", "value", "onChange", "ref"];
 function ControlInput(_ref) {
   var _effect = core.useComponentTracking();
   try {
@@ -98,12 +118,13 @@ function ControlInput(_ref) {
     var control = _ref.control,
       convert = _ref.convert,
       renderer = _ref.renderer,
-      props = _objectWithoutPropertiesLoose(_ref, _excluded$3);
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$4);
     var _formControlProps = core.formControlProps(control),
       errorText = _formControlProps.errorText,
       value = _formControlProps.value,
       onChange = _formControlProps.onChange,
-      inputProps = _objectWithoutPropertiesLoose(_formControlProps, _excluded2$1);
+      ref = _formControlProps.ref,
+      inputProps = _objectWithoutPropertiesLoose(_formControlProps, _excluded2$2);
     var textValue = core.useControl(function () {
       return toText(value);
     });
@@ -112,14 +133,14 @@ function ControlInput(_ref) {
     }, function (v) {
       return textValue.value = toText(v);
     });
-    // noinspection JSUnusedLocalSymbols
-    var h = renderer.h;
-    return h("input", _extends({}, inputProps, {
+    var Input = renderer.html.Input;
+    return /*#__PURE__*/jsxRuntime.jsx(Input, _extends({}, inputProps, {
+      inputRef: ref,
       type: convert[0],
       value: textValue.value,
-      onChange: function onChange(e) {
-        textValue.value = e.target.value;
-        var converted = convert[1](e.target.value);
+      onChangeValue: function onChangeValue(e) {
+        textValue.value = e;
+        var converted = convert[1](e);
         if (converted !== undefined) control.value = converted;
       }
     }, props));
@@ -184,14 +205,14 @@ function createInputConversion(ft) {
   }
 }
 
-var _excluded$2 = ["state", "options", "className", "convert", "required", "emptyText", "requiredText", "readonly"];
+var _excluded$3 = ["state", "options", "className", "convert", "required", "emptyText", "requiredText", "readonly"];
 function createSelectRenderer(options) {
   if (options === void 0) {
     options = {};
   }
   return schemas.createDataRenderer(function (props, asArray) {
     var _props$options;
-    return React.createElement(SelectDataRenderer, {
+    return /*#__PURE__*/jsxRuntime.jsx(SelectDataRenderer, {
       className: schemas.rendererClass(props.className, options.className),
       state: props.control,
       id: props.id,
@@ -210,11 +231,11 @@ function SelectDataRenderer(_ref) {
   var _effect = core.useComponentTracking();
   try {
     var renderOption = function renderOption(x, i) {
-      return React.createElement("option", {
-        key: i,
+      return /*#__PURE__*/jsxRuntime.jsx("option", {
         value: convert(x.value),
-        disabled: !!x.disabled
-      }, x.name);
+        disabled: !!x.disabled,
+        children: x.name
+      }, i);
     };
     var state = _ref.state,
       options = _ref.options,
@@ -226,42 +247,44 @@ function SelectDataRenderer(_ref) {
       _ref$requiredText = _ref.requiredText,
       requiredText = _ref$requiredText === void 0 ? "<please select>" : _ref$requiredText,
       readonly = _ref.readonly,
-      props = _objectWithoutPropertiesLoose(_ref, _excluded$2);
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$3);
     var value = state.value,
       disabled = state.disabled;
-    var _useState = React.useState(!required || value == null),
+    var _useState = react.useState(!required || value == null),
       showEmpty = _useState[0];
-    var optionStringMap = React.useMemo(function () {
+    var optionStringMap = react.useMemo(function () {
       return Object.fromEntries(options.map(function (x) {
         return [convert(x.value), x.value];
       }));
     }, [options]);
-    var optionGroups = React.useMemo(function () {
+    var optionGroups = react.useMemo(function () {
       return new Set(options.filter(function (x) {
         return x.group;
       }).map(function (x) {
         return x.group;
       }));
     }, [options]);
-    return React.createElement("select", _extends({}, props, {
+    return /*#__PURE__*/jsxRuntime.jsxs("select", _extends({}, props, {
       className: className,
       onChange: function onChange(v) {
         return state.value = optionStringMap[v.target.value];
       },
       value: convert(value),
-      disabled: disabled || readonly
-    }), showEmpty && React.createElement("option", {
-      value: ""
-    }, required ? requiredText : emptyText), [].concat(optionGroups.keys()).map(function (x) {
-      return React.createElement("optgroup", {
-        key: x,
-        label: x
-      }, options.filter(function (o) {
-        return o.group === x;
-      }).map(renderOption));
-    }), options.filter(function (x) {
-      return !x.group;
-    }).map(renderOption));
+      disabled: disabled || readonly,
+      children: [showEmpty && /*#__PURE__*/jsxRuntime.jsx("option", {
+        value: "",
+        children: required ? requiredText : emptyText
+      }), [].concat(optionGroups.keys()).map(function (x) {
+        return /*#__PURE__*/jsxRuntime.jsx("optgroup", {
+          label: x,
+          children: options.filter(function (o) {
+            return o.group === x;
+          }).map(renderOption)
+        }, x);
+      }), options.filter(function (x) {
+        return !x.group;
+      }).map(renderOption)]
+    }));
   } finally {
     _effect();
   }
@@ -282,14 +305,14 @@ function createSelectConversion(ft) {
   }
 }
 
-var _excluded$1 = ["control", "type", "notValue", "renderer"],
-  _excluded2 = ["value", "onChange", "errorText"];
+var _excluded$2 = ["control", "type", "notValue", "renderer"],
+  _excluded2$1 = ["value", "onChange", "errorText", "ref"];
 function createRadioRenderer(options) {
   if (options === void 0) {
     options = {};
   }
   return schemas.createDataRenderer(function (p, renderer) {
-    return React.createElement(CheckButtons, _extends({
+    return /*#__PURE__*/jsxRuntime.jsx(CheckButtons, _extends({
       classes: options,
       controlClasses: p.renderOptions
     }, p, {
@@ -298,7 +321,8 @@ function createRadioRenderer(options) {
         return control.value == o.value;
       },
       setChecked: function setChecked(c, o) {
-        return c.value = o.value;
+        c.setTouched(true);
+        c.value = o.value;
       },
       control: p.control,
       type: "radio",
@@ -314,7 +338,7 @@ function createCheckListRenderer(options) {
     options = {};
   }
   return schemas.createDataRenderer(function (p, renderer) {
-    return React.createElement(CheckButtons, _extends({
+    return /*#__PURE__*/jsxRuntime.jsx(CheckButtons, _extends({
       classes: options,
       controlClasses: p.renderOptions
     }, p, {
@@ -324,6 +348,7 @@ function createCheckListRenderer(options) {
         return Array.isArray(v) ? v.includes(o.value) : false;
       },
       setChecked: function setChecked(c, o, checked) {
+        c.setTouched(true);
         c.setValue(function (x) {
           return setIncluded(x != null ? x : [], o.value, checked);
         });
@@ -354,44 +379,53 @@ function CheckButtons(_ref) {
       _ref$controlClasses = _ref.controlClasses,
       controlClasses = _ref$controlClasses === void 0 ? {} : _ref$controlClasses,
       renderer = _ref.renderer;
-    var h = renderer.h;
+    var _renderer$html = renderer.html,
+      Button = _renderer$html.Button,
+      Input = _renderer$html.Input,
+      Label = _renderer$html.Label,
+      Div = _renderer$html.Div;
     var disabled = control.disabled;
     var name = "r" + control.uniqueId;
-    return h("div", {
+    return /*#__PURE__*/jsxRuntime.jsx(Div, {
       className: className,
-      id: id
-    }, h(core.RenderArrayElements, {
-      array: options == null ? void 0 : options.filter(function (x) {
-        return x.value != null;
-      })
-    }, function (o, i) {
-      var checked = core.useComputed(function () {
-        return isChecked(control, o);
-      }).value;
-      var selOrUnsel = checked ? schemas.rendererClass(controlClasses == null ? void 0 : controlClasses.selectedClass, classes.selectedClass) : schemas.rendererClass(controlClasses == null ? void 0 : controlClasses.notSelectedClass, classes.notSelectedClass);
-      return h("div", {
-        className: clsx__default["default"](schemas.rendererClass(controlClasses == null ? void 0 : controlClasses.entryWrapperClass, classes.entryWrapperClass), selOrUnsel),
-        onClick: function onClick() {
-          return !readonly && setChecked(control, o, !checked);
-        }
-      }, h("div", {
-        className: classes.entryClass
-      }, h("input", {
-        id: name + "_" + i,
-        className: classes.checkClass,
-        type: type,
-        name: name,
-        readOnly: readonly,
-        disabled: disabled,
-        checked: checked,
-        onChange: function onChange(x) {
-          !readonly && setChecked(control, o, x.target.checked);
+      id: id,
+      children: /*#__PURE__*/jsxRuntime.jsx(core.RenderArrayElements, {
+        array: options == null ? void 0 : options.filter(function (x) {
+          return x.value != null;
+        }),
+        children: function children(o, i) {
+          var checked = core.useComputed(function () {
+            return isChecked(control, o);
+          }).value;
+          var selOrUnsel = checked ? schemas.rendererClass(controlClasses == null ? void 0 : controlClasses.selectedClass, classes.selectedClass) : schemas.rendererClass(controlClasses == null ? void 0 : controlClasses.notSelectedClass, classes.notSelectedClass);
+          return /*#__PURE__*/jsxRuntime.jsxs(Button, {
+            className: clsx__default["default"](schemas.rendererClass(controlClasses == null ? void 0 : controlClasses.entryWrapperClass, classes.entryWrapperClass), selOrUnsel),
+            onClick: function onClick() {
+              return !readonly && setChecked(control, o, !checked);
+            },
+            children: [/*#__PURE__*/jsxRuntime.jsxs(Div, {
+              className: classes.entryClass,
+              children: [/*#__PURE__*/jsxRuntime.jsx(Input, {
+                id: name + "_" + i,
+                className: classes.checkClass,
+                type: type,
+                name: name,
+                readOnly: readonly,
+                disabled: disabled,
+                checked: checked,
+                onChangeChecked: function onChangeChecked(x) {
+                  !readonly && setChecked(control, o, x);
+                }
+              }), /*#__PURE__*/jsxRuntime.jsx(Label, {
+                className: classes.labelClass,
+                htmlFor: name + "_" + i,
+                children: o.name
+              })]
+            }), entryAdornment == null ? void 0 : entryAdornment(o, i, checked)]
+          });
         }
-      }), h("label", {
-        className: classes.labelClass,
-        htmlFor: name + "_" + i
-      }, o.name)), entryAdornment == null ? void 0 : entryAdornment(o, i, checked));
-    }));
+      })
+    });
   } finally {
     _effect();
   }
@@ -416,7 +450,7 @@ function createCheckboxRenderer(options) {
     return function (p) {
       return _extends({}, p, {
         label: undefined,
-        children: React.createElement(CheckBox, {
+        children: /*#__PURE__*/jsxRuntime.jsx(CheckBox, {
           p: p,
           renderer: renderer,
           options: options,
@@ -428,61 +462,121 @@ function createCheckboxRenderer(options) {
     renderType: schemas.DataRenderType.Checkbox
   });
 }
-function CheckBox(_ref2) {
+function createElementSelectedRenderer(options) {
+  if (options === void 0) {
+    options = {};
+  }
+  return schemas.createDataRenderer(function (props, renderer) {
+    return function (p) {
+      return _extends({}, p, {
+        label: undefined,
+        children: /*#__PURE__*/jsxRuntime.jsx(CheckBoxSelected, {
+          p: p,
+          renderer: renderer,
+          options: options,
+          props: props
+        })
+      });
+    };
+  }, {
+    renderType: schemas.DataRenderType.ElementSelected
+  });
+}
+function CheckBoxSelected(_ref2) {
   var _effect2 = core.useComponentTracking();
   try {
     var p = _ref2.p,
       props = _ref2.props,
       renderer = _ref2.renderer,
       options = _ref2.options;
-    var h = renderer.h;
-    return h("div", {
-      className: schemas.rendererClass(props.className, options.entryClass)
-    }, h(Fcheckbox, {
-      id: props.id,
-      control: props.control.as(),
-      style: props.style,
-      className: options.checkClass,
-      renderer: renderer
-    }), p.label && renderer.renderLabel(p.label, undefined, undefined));
+    var Div = renderer.html.Div;
+    var elementValue = core.useControl();
+    react.useEffect(function () {
+      props.runExpression(elementValue, props.renderOptions.elementExpression, function (v) {
+        return elementValue.value = v;
+      });
+    });
+    var isSelected = core.useComputed(function () {
+      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;
+    });
+    var selControl = core.useControl(function () {
+      return isSelected.current.value;
+    });
+    selControl.value = isSelected.value;
+    core.useControlEffect(function () {
+      return selControl.value;
+    }, function (v) {
+      props.control.as().setValue(function (x) {
+        return setIncluded(x != null ? x : [], elementValue.value, v);
+      });
+    });
+    return /*#__PURE__*/jsxRuntime.jsxs(Div, {
+      className: schemas.rendererClass(props.className, options.entryClass),
+      children: [/*#__PURE__*/jsxRuntime.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(_ref3) {
+function CheckBox(_ref3) {
   var _effect3 = core.useComponentTracking();
   try {
-    var control = _ref3.control,
-      _ref3$type = _ref3.type,
-      type = _ref3$type === void 0 ? "checkbox" : _ref3$type,
-      _ref3$notValue = _ref3.notValue,
-      notValue = _ref3$notValue === void 0 ? false : _ref3$notValue,
+    var p = _ref3.p,
+      props = _ref3.props,
       renderer = _ref3.renderer,
-      others = _objectWithoutPropertiesLoose(_ref3, _excluded$1);
-    var h = renderer.h;
-    // Update the HTML5 custom validity whenever the error message is changed/cleared
-    // useControlEffect(
-    //   () => control.error,
-    //   (s) => (control.element as HTMLInputElement)?.setCustomValidity(s ?? ""),
-    // );
+      options = _ref3.options;
+    var Div = renderer.html.Div;
+    return /*#__PURE__*/jsxRuntime.jsxs(Div, {
+      className: schemas.rendererClass(props.className, options.entryClass),
+      children: [/*#__PURE__*/jsxRuntime.jsx(Fcheckbox, {
+        id: props.id,
+        control: props.control.as(),
+        style: props.style,
+        className: options.checkClass,
+        renderer: renderer
+      }), p.label && renderer.renderLabel(p.label, undefined, undefined)]
+    });
+  } finally {
+    _effect3();
+  }
+}
+function Fcheckbox(_ref4) {
+  var _effect4 = core.useComponentTracking();
+  try {
+    var control = _ref4.control,
+      _ref4$type = _ref4.type,
+      type = _ref4$type === void 0 ? "checkbox" : _ref4$type,
+      _ref4$notValue = _ref4.notValue,
+      notValue = _ref4$notValue === void 0 ? false : _ref4$notValue,
+      renderer = _ref4.renderer,
+      others = _objectWithoutPropertiesLoose(_ref4, _excluded$2);
+    var Input = renderer.html.Input;
     var _formControlProps = core.formControlProps(control),
       value = _formControlProps.value,
       onChange = _formControlProps.onChange,
       errorText = _formControlProps.errorText,
-      theseProps = _objectWithoutPropertiesLoose(_formControlProps, _excluded2);
-    return h("input", _extends({}, theseProps, {
+      ref = _formControlProps.ref,
+      theseProps = _objectWithoutPropertiesLoose(_formControlProps, _excluded2$1);
+    return /*#__PURE__*/jsxRuntime.jsx(Input, _extends({}, theseProps, {
       checked: !!value !== notValue,
-      ref: function ref(r) {
-        control.element = r;
-        // if (r) r.setCustomValidity(control.current.error ?? "");
+      inputRef: function inputRef(r) {
+        return control.element = r;
       },
-      onChange: function onChange(e) {
-        return control.value = e.target.checked !== notValue;
+      onChangeChecked: function onChangeChecked(e) {
+        control.touched = true;
+        control.value = e !== notValue;
       },
       type: type
     }, others));
   } finally {
-    _effect3();
+    _effect4();
   }
 }
 
@@ -493,11 +587,12 @@ function createDefaultLayoutRenderer(options) {
   return schemas.createLayoutRenderer(function (props, renderers) {
     var layout = schemas.renderLayoutParts(props, renderers);
     return {
-      children: layout.wrapLayout(React.createElement(DefaultLayout, _extends({
+      children: layout.wrapLayout(/*#__PURE__*/jsxRuntime.jsx(DefaultLayout, _extends({
         layout: layout
       }, options, {
         renderer: renderers
       }))),
+      inline: layout.inline,
       className: schemas.rendererClass(layout.className, options.className),
       style: layout.style,
       divRef: function divRef(e) {
@@ -510,14 +605,17 @@ function DefaultLayout(_ref) {
   var _effect = core.useComponentTracking();
   try {
     var errorClass = _ref.errorClass,
-      _ref$renderer = _ref.renderer,
-      h = _ref$renderer.h,
-      renderText = _ref$renderer.renderText,
+      _ref$renderer$html = _ref.renderer.html,
+      Div = _ref$renderer$html.Div,
+      Span = _ref$renderer$html.Span,
       _ref$renderError = _ref.renderError,
       renderError = _ref$renderError === void 0 ? function (e) {
-        return e && h("div", null, h("span", {
-          className: errorClass
-        }, renderText(e)));
+        return e && /*#__PURE__*/jsxRuntime.jsx(Div, {
+          children: /*#__PURE__*/jsxRuntime.jsx(Span, {
+            className: errorClass,
+            children: e
+          })
+        });
       } : _ref$renderError,
       _ref$layout = _ref.layout,
       controlEnd = _ref$layout.controlEnd,
@@ -527,7 +625,9 @@ function DefaultLayout(_ref) {
       errorControl = _ref$layout.errorControl;
     var ec = errorControl;
     var errorText = ec && ec.touched ? ec.error : undefined;
-    return h(React.Fragment, null, label, controlStart, children, renderError(errorText), controlEnd);
+    return /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
+      children: [label, controlStart, children, renderError(errorText), controlEnd]
+    });
   } finally {
     _effect();
   }
@@ -537,21 +637,23 @@ function DefaultDisplayOnly(_ref) {
   var _effect = core.useComponentTracking();
   try {
     var _ref2;
-    var control = _ref.control,
+    var dataNode = _ref.dataNode,
       className = _ref.className,
       emptyText = _ref.emptyText,
       schemaInterface = _ref.schemaInterface,
-      field = _ref.field,
       style = _ref.style,
-      renderer = _ref.renderer;
-    var v = control.value;
-    var text = (_ref2 = schemaInterface.isEmptyValue(field, v) ? emptyText : schemaInterface.textValue(field, v)) != null ? _ref2 : "";
-    // noinspection JSUnusedLocalSymbols
-    var h = renderer.h;
-    return h("div", {
+      renderer = _ref.renderer,
+      textClass = _ref.textClass,
+      inline = _ref.inline;
+    var text = (_ref2 = schemaInterface.isEmptyValue(dataNode.schema.field, dataNode.control.value) ? emptyText : schemaInterface.textValueForData(dataNode)) != null ? _ref2 : "";
+    var Div = renderer.html.Div;
+    return /*#__PURE__*/jsxRuntime.jsx(Div, {
       style: style,
-      className: className
-    }, text);
+      className: className,
+      textClass: textClass,
+      text: text,
+      inline: inline
+    });
   } finally {
     _effect();
   }
@@ -566,8 +668,8 @@ function DefaultAccordion(_ref) {
       contentStyle = _ref.contentStyle,
       contentClassName = _ref.contentClassName,
       designMode = _ref.designMode,
-      iconOpenClass = _ref.iconOpenClass,
-      iconClosedClass = _ref.iconClosedClass,
+      iconOpen = _ref.iconOpen,
+      iconClosed = _ref.iconClosed,
       className = _ref.className,
       _ref$renderTitle = _ref.renderTitle,
       renderTitle = _ref$renderTitle === void 0 ? function (t) {
@@ -578,6 +680,11 @@ function DefaultAccordion(_ref) {
       titleClass = _ref.titleClass,
       useCss = _ref.useCss,
       dataContext = _ref.dataContext;
+    var _renderers$html = renderers.html,
+      Button = _renderers$html.Button,
+      I = _renderers$html.I,
+      Div = _renderers$html.Div,
+      Label = _renderers$html.Label;
     var dataControl = ((_dataContext$dataNode = dataContext.dataNode) != null ? _dataContext$dataNode : dataContext.parentNode).control;
     var open = core.useControl(!!accordion.defaultExpanded);
     if (dataControl && !dataControl.meta.accordionState) {
@@ -588,22 +695,29 @@ function DefaultAccordion(_ref) {
       display: "none"
     });
     var title = renderers.renderLabelText(renderTitle(accordion.title, open));
-    var toggler = renderToggler ? renderToggler(open, title) : React.createElement("button", {
+    var currentIcon = isOpen ? iconOpen : iconClosed;
+    var toggler = renderToggler ? renderToggler(open, title) : /*#__PURE__*/jsxRuntime.jsxs(Button, {
       className: className,
       onClick: function onClick() {
         return open.setValue(function (x) {
           return !x;
         });
-      }
-    }, React.createElement("label", {
-      className: titleClass
-    }, title), React.createElement("i", {
-      className: clsx__default["default"](isOpen ? iconOpenClass : iconClosedClass)
-    }));
-    return React.createElement(React.Fragment, null, toggler, (useCss || isOpen || designMode) && React.createElement("div", {
-      style: fullContentStyle,
-      className: contentClassName
-    }, children));
+      },
+      children: [/*#__PURE__*/jsxRuntime.jsx(Label, {
+        className: titleClass,
+        children: title
+      }), currentIcon && /*#__PURE__*/jsxRuntime.jsx(I, {
+        iconLibrary: currentIcon.library,
+        iconName: currentIcon.name
+      })]
+    });
+    return /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
+      children: [toggler, (useCss || isOpen || designMode) && /*#__PURE__*/jsxRuntime.jsx(Div, {
+        style: fullContentStyle,
+        className: contentClassName,
+        children: children
+      })]
+    });
   } finally {
     _effect();
   }
@@ -612,47 +726,49 @@ function getAccordionState(c) {
   return c.meta.accordionState;
 }
 
+/**
+ * @trackControls
+ */
+function VisibleChildrenRenderer(props) {
+  var _effect = core.useComponentTracking();
+  try {
+    var childStates = props.parentFormNode.getChildNodes().map(function (x) {
+      return props.parent.getChildState(x);
+    });
+    return props.render(props.props, function (i) {
+      return !childStates[i].hidden;
+    });
+  } finally {
+    _effect();
+  }
+}
+
 function createTabsRenderer(options) {
   if (options === void 0) {
     options = {};
   }
   return schemas.createGroupRenderer(function (p, renderer) {
-    return React.createElement(TabsGroupRenderer, _extends({}, p, {
-      tabOptions: p.renderOptions,
-      options: options
-    }));
+    return /*#__PURE__*/jsxRuntime.jsx(VisibleChildrenRenderer, {
+      render: renderAllTabs,
+      dataContext: p.dataContext,
+      parentFormNode: p.formNode,
+      parent: p,
+      props: {
+        groupProps: p,
+        tabOptions: p.renderOptions,
+        options: options
+      }
+    });
   }, {
     renderType: schemas.GroupRenderType.Tabs
   });
-}
-function TabsGroupRenderer(_ref) {
-  var _effect = core.useComponentTracking();
-  try {
-    var renderTabs = function renderTabs(tabs, key) {
-      return React.createElement("div", {
-        key: key,
-        className: schemas.rendererClass(className, options.className)
-      }, React.createElement("ul", {
-        className: schemas.rendererClass(null, tabListClass)
-      }, tabs.map(function (x, i) {
-        return React.createElement("li", {
-          key: i,
-          className: schemas.rendererClass(null, tabClass),
-          onClick: function onClick() {
-            return tabIndex.value = i;
-          }
-        }, React.createElement("span", {
-          className: schemas.rendererClass(null, clsx__default["default"](labelClass, i == currentTab ? activeClass : inactiveClass))
-        }, x.definition.title ? x.definition.title : "<untitled>"));
-      })), React.createElement("div", {
-        className: schemas.rendererClass(tabOptions.contentClass, contentClass)
-      }, renderChild(currentTab, tabs[currentTab])));
-    };
-    var formNode = _ref.formNode,
-      className = _ref.className,
-      options = _ref.options,
-      renderChild = _ref.renderChild,
-      designMode = _ref.designMode,
+  function renderAllTabs(_ref, isVisible) {
+    var options = _ref.options,
+      _ref$groupProps = _ref.groupProps,
+      designMode = _ref$groupProps.designMode,
+      formNode = _ref$groupProps.formNode,
+      className = _ref$groupProps.className,
+      renderChild = _ref$groupProps.renderChild,
       tabOptions = _ref.tabOptions;
     var tabIndex = core.useControl(0);
     var tabClass = options.tabClass,
@@ -662,37 +778,338 @@ function TabsGroupRenderer(_ref) {
       activeClass = options.activeClass,
       contentClass = options.contentClass;
     var currentTab = tabIndex.value;
-    return designMode ? React.createElement(React.Fragment, null, formNode.getChildNodes().map(function (x, i) {
-      return renderTabs([x], i);
-    })) : renderTabs(formNode.getChildNodes(), 0);
+    return designMode ? /*#__PURE__*/jsxRuntime.jsx(jsxRuntime.Fragment, {
+      children: formNode.getChildNodes().map(function (x, i) {
+        return renderTabs([x], i);
+      })
+    }) : renderTabs(formNode.getChildNodes().filter(function (x, i) {
+      return isVisible(i);
+    }), 0);
+    function renderTabs(tabs, key) {
+      return /*#__PURE__*/jsxRuntime.jsxs("div", {
+        className: schemas.rendererClass(className, options.className),
+        children: [/*#__PURE__*/jsxRuntime.jsx("ul", {
+          className: schemas.rendererClass(null, tabListClass),
+          children: tabs.map(function (x, i) {
+            return /*#__PURE__*/jsxRuntime.jsx("li", {
+              className: schemas.rendererClass(null, tabClass),
+              onClick: function onClick() {
+                return tabIndex.value = i;
+              },
+              children: /*#__PURE__*/jsxRuntime.jsx("span", {
+                className: schemas.rendererClass(null, clsx__default["default"](labelClass, i == currentTab ? activeClass : inactiveClass)),
+                children: x.definition.title ? x.definition.title : "<untitled>"
+              })
+            }, i);
+          })
+        }), /*#__PURE__*/jsxRuntime.jsx("div", {
+          className: schemas.rendererClass(tabOptions.contentClass, contentClass),
+          children: renderChild(currentTab, tabs[currentTab])
+        })]
+      }, key);
+    }
+  }
+}
+
+function createGridRenderer(options) {
+  return schemas.createGroupRenderer(function (props, formRenderer) {
+    return /*#__PURE__*/jsxRuntime.jsx(VisibleChildrenRenderer, {
+      props: _extends({}, props, {
+        formRenderer: formRenderer,
+        defaultOptions: options
+      }),
+      render: renderGrid,
+      parent: props,
+      dataContext: props.dataContext,
+      parentFormNode: props.formNode
+    });
+  }, {
+    renderType: schemas.GroupRenderType.Grid
+  });
+  function renderGrid(props, isChildVisible) {
+    var _props$defaultOptions, _ref, _gridOptions$columns;
+    var filteredChildren = props.formNode.getChildNodes().filter(function (x, i) {
+      return isChildVisible(i);
+    });
+    var Div = props.formRenderer.html.Div;
+    var defaults = (_props$defaultOptions = props.defaultOptions) != null ? _props$defaultOptions : {};
+    var gridOptions = props.renderOptions;
+    var numColumns = (_ref = (_gridOptions$columns = gridOptions.columns) != null ? _gridOptions$columns : defaults.defaultColumns) != null ? _ref : 2;
+    var allChildren = filteredChildren.map(function (x, i) {
+      return props.renderChild(i, x);
+    });
+    // split into numColumns items wrapped a div each
+    var rows = [];
+    for (var i = 0; i < allChildren.length; i += numColumns) {
+      rows.push(allChildren.slice(i, i + numColumns));
+    }
+    return /*#__PURE__*/jsxRuntime.jsx(Div, {
+      className: schemas.rendererClass(props.className, defaults.className),
+      children: rows.map(function (row, rowIndex) {
+        return /*#__PURE__*/jsxRuntime.jsx(Div, {
+          className: schemas.rendererClass(gridOptions.rowClass, defaults.rowClass),
+          children: row
+        }, rowIndex);
+      })
+    });
+  }
+}
+
+var defaultOptions = {
+  classes: {
+    className: undefined,
+    contentClass: "min-h-96 overflow-auto",
+    navContainerClass: "flex justify-between gap-4 my-2"
+  },
+  actions: {
+    nextText: "Next",
+    nextIcon: schemas.fontAwesomeIcon("chevron-right"),
+    nextValidate: true,
+    prevText: "Prev",
+    prevIcon: schemas.fontAwesomeIcon("chevron-left"),
+    prevValidate: false
+  },
+  renderNavigation: defaultNavigationRender
+};
+function defaultNavigationRender(_ref) {
+  var formRenderer = _ref.formRenderer,
+    prev = _ref.prev,
+    next = _ref.next,
+    className = _ref.className;
+  {
+    var Div = formRenderer.html.Div,
+      renderAction = formRenderer.renderAction;
+    return /*#__PURE__*/jsxRuntime.jsxs(Div, {
+      className: className,
+      children: [renderAction(prev), renderAction(next)]
+    });
+  }
+}
+function createWizardRenderer(options) {
+  return schemas.createGroupRenderer(function (props, formRenderer) {
+    return /*#__PURE__*/jsxRuntime.jsx(VisibleChildrenRenderer, {
+      props: _extends({}, props, {
+        formRenderer: formRenderer,
+        defaultOptions: options
+      }),
+      render: renderWizard,
+      parent: props,
+      dataContext: props.dataContext,
+      parentFormNode: props.formNode
+    });
+  }, {
+    renderType: schemas.GroupRenderType.Wizard
+  });
+}
+function renderWizard(props, isChildVisible) {
+  var _props$defaultOptions;
+  var mergedOptions = schemas.deepMerge((_props$defaultOptions = props.defaultOptions) != null ? _props$defaultOptions : {}, defaultOptions);
+  var _mergedOptions$classe = mergedOptions.classes,
+    className = _mergedOptions$classe.className,
+    contentClass = _mergedOptions$classe.contentClass,
+    navContainerClass = _mergedOptions$classe.navContainerClass,
+    _mergedOptions$action = mergedOptions.actions,
+    nextText = _mergedOptions$action.nextText,
+    nextIcon = _mergedOptions$action.nextIcon,
+    prevText = _mergedOptions$action.prevText,
+    prevIcon = _mergedOptions$action.prevIcon,
+    nextValidate = _mergedOptions$action.nextValidate,
+    prevValidate = _mergedOptions$action.prevValidate,
+    renderNavigation = mergedOptions.renderNavigation;
+  var Div = props.formRenderer.html.Div;
+  var children = props.formNode.getChildNodes();
+  var allVisible = children.map(function (_, i) {
+    return isChildVisible(i);
+  });
+  var page = core.useControl(0);
+  var currentPage = page.value;
+  var isValid = core.useComputed(function () {
+    return isPageValid();
+  });
+  var next = schemas.createAction("nav", function () {
+    return nav(1, nextValidate);
+  }, nextText, {
+    hidden: !props.designMode && nextVisibleInDirection(1) == null,
+    disabled: !isValid.value,
+    icon: nextIcon,
+    iconPlacement: schemas.IconPlacement.AfterText
+  });
+  var prev = schemas.createAction("nav", function () {
+    return nav(-1, prevValidate);
+  }, prevText, {
+    disabled: !props.designMode && nextVisibleInDirection(-1) == null,
+    icon: prevIcon
+  });
+  var navElement = renderNavigation({
+    formRenderer: props.formRenderer,
+    page: countVisibleUntil(currentPage),
+    totalPages: countVisibleUntil(children.length),
+    prev: prev,
+    next: next,
+    className: navContainerClass,
+    validatePage: function () {
+      try {
+        return Promise.resolve(_validatePage());
+      } catch (e) {
+        return Promise.reject(e);
+      }
+    }
+  });
+  var content = props.designMode ? /*#__PURE__*/jsxRuntime.jsx(Div, {
+    children: children.map(function (child, i) {
+      return props.renderChild(i, child);
+    })
+  }) : currentPage < children.length ? /*#__PURE__*/jsxRuntime.jsx(Div, {
+    className: contentClass,
+    children: props.renderChild(currentPage, children[currentPage])
+  }) : /*#__PURE__*/jsxRuntime.jsx(react.Fragment, {});
+  return /*#__PURE__*/jsxRuntime.jsxs(Div, {
+    className: schemas.rendererClass(props.className, className),
+    children: [content, navElement]
+  });
+  function countVisibleUntil(untilPage) {
+    var count = 0;
+    for (var i = 0; i < untilPage && i < allVisible.length; i++) {
+      if (allVisible[i]) {
+        count++;
+      }
+    }
+    return count;
+  }
+  function nav(dir, validate) {
+    if (validate && !_validatePage()) {
+      return;
+    }
+    var next = nextVisibleInDirection(dir);
+    if (next != null) {
+      page.value = next;
+    }
+  }
+  function nextVisibleInDirection(dir) {
+    var next = currentPage + dir;
+    while (next >= 0 && next < children.length) {
+      if (allVisible[next]) {
+        return next;
+      }
+      next += dir;
+    }
+    return null;
+  }
+  function _validatePage() {
+    var pageNode = children[currentPage];
+    var hasErrors = false;
+    schemas.visitFormDataInContext(props.dataContext.parentNode, pageNode, schemas.validationVisitor(function () {
+      hasErrors = true;
+    }));
+    return !hasErrors;
+  }
+  function isPageValid() {
+    var pageNode = children[currentPage];
+    var hasErrors = false;
+    schemas.visitFormDataInContext(props.dataContext.parentNode, pageNode, function (c) {
+      if (!c.control.valid) hasErrors = true;
+    });
+    return !hasErrors;
+  }
+}
+
+var defaultDialogOptions = {
+  classes: {
+    className: "",
+    titleClass: "text-2xl font-bold"
+  }
+};
+function createDialogRenderer(options) {
+  return schemas.createGroupRenderer(function (props, renderer) {
+    return /*#__PURE__*/jsxRuntime.jsx(DefaultDialogRenderer, {
+      props: props,
+      options: options,
+      renderer: renderer,
+      renderOptions: props.renderOptions
+    });
+  }, {
+    renderType: schemas.GroupRenderType.Dialog
+  });
+}
+function DefaultDialogRenderer(_ref) {
+  var _effect = core.useComponentTracking();
+  try {
+    var designContent = function designContent() {
+      return /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
+        children: [/*#__PURE__*/jsxRuntime.jsx("div", {
+          onClickCapture: function onClickCapture() {
+            return overlayState.toggle();
+          },
+          children: renderer.renderAction(schemas.createAction("Toggle Dialog", function () {}, open.value ? "Hide Content" : "Show Content", {
+            actionStyle: schemas.ActionStyle.Link
+          }))
+        }), open.value && dialogContent]
+      });
+    };
+    var props = _ref.props,
+      renderOptions = _ref.renderOptions,
+      options = _ref.options,
+      renderer = _ref.renderer;
+    var _deepMerge = schemas.deepMerge(options, defaultDialogOptions),
+      _deepMerge$classes = _deepMerge.classes,
+      titleClass = _deepMerge$classes.titleClass,
+      className = _deepMerge$classes.className;
+    var open = core.useControl(false);
+    var overlayState = ariaBase.createOverlayState(open);
+    var actionOnClick = function actionOnClick(action) {
+      switch (action) {
+        case "closeDialog":
+          return function () {
+            return overlayState.close();
+          };
+        case "openDialog":
+          return function () {
+            return overlayState.open();
+          };
+      }
+    };
+    var triggerChildren = props.formNode.getChildNodes().filter(function (x) {
+      return x.definition.placement === "trigger";
+    });
+    var dialogContent = /*#__PURE__*/jsxRuntime.jsx(ariaBase.Dialog, {
+      title: renderOptions.title,
+      titleClass: titleClass,
+      className: schemas.rendererClass(props.className, className),
+      children: props.formNode.getChildNodes().filter(function (x) {
+        return !x.definition.placement || x.definition.placement === "dialog";
+      }).map(function (x, i) {
+        return props.renderChild(i, x, {
+          actionOnClick: actionOnClick
+        });
+      })
+    });
+    return /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
+      children: [triggerChildren.map(function (x, i) {
+        return props.renderChild(i, x, {
+          actionOnClick: actionOnClick
+        });
+      }), props.designMode ? designContent() : open.value && /*#__PURE__*/jsxRuntime.jsx(ariaBase.Modal, {
+        state: overlayState,
+        isDismissable: true,
+        children: dialogContent
+      })]
+    });
   } finally {
     _effect();
   }
 }
 
 function createDefaultGroupRenderer(options) {
+  var gridRenderer = createGridRenderer(options == null ? void 0 : options.grid);
   var tabsRenderer = createTabsRenderer(options == null ? void 0 : options.tabs);
+  var wizardRenderer = createWizardRenderer(options == null ? void 0 : options.wizard);
+  var dialogRenderer = createDialogRenderer(options == null ? void 0 : options.dialog);
   var _ref = options != null ? options : {},
     className = _ref.className,
-    _ref$gridStyles = _ref.gridStyles,
-    gridStyles = _ref$gridStyles === void 0 ? defaultGridStyles : _ref$gridStyles,
-    _ref$defaultGridColum = _ref.defaultGridColumns,
-    defaultGridColumns = _ref$defaultGridColum === void 0 ? 2 : _ref$defaultGridColum,
-    gridClassName = _ref.gridClassName,
     standardClassName = _ref.standardClassName,
     flexClassName = _ref.flexClassName,
+    inlineClass = _ref.inlineClass,
     defaultFlexGap = _ref.defaultFlexGap;
-  function defaultGridStyles(_ref2) {
-    var _ref2$columns = _ref2.columns,
-      columns = _ref2$columns === void 0 ? defaultGridColumns : _ref2$columns;
-    return {
-      className: gridClassName,
-      style: {
-        display: "grid",
-        gridTemplateColumns: "repeat(" + columns + ", 1fr)"
-      }
-    };
-  }
   function flexStyles(options) {
     return {
       className: flexClassName,
@@ -708,54 +1125,78 @@ function createDefaultGroupRenderer(options) {
       renderOptions = props.renderOptions,
       formNode = props.formNode;
     if (schemas.isTabsRenderer(renderOptions)) return tabsRenderer.render(props, renderer);
+    if (schemas.isGridRenderer(renderOptions)) return gridRenderer.render(props, renderer);
+    if (schemas.isWizardRenderer(renderOptions)) return wizardRenderer.render(props, renderer);
+    if (schemas.isDialogRenderer(renderOptions)) return dialogRenderer.render(props, renderer);
     if (schemas.isSelectChildRenderer(renderOptions) && !props.designMode) {
-      return h(SelectChildGroupRenderer, _extends({}, props, {
+      return /*#__PURE__*/jsxRuntime.jsx(SelectChildGroupRenderer, _extends({}, props, {
         renderOptions: renderOptions
       }));
     }
-    var _ref3 = schemas.isGridRenderer(renderOptions) ? gridStyles(renderOptions) : schemas.isFlexRenderer(renderOptions) ? flexStyles(renderOptions) : {
+    var _ref2 = schemas.isFlexRenderer(renderOptions) ? flexStyles(renderOptions) : schemas.isInlineRenderer(renderOptions) ? {
+        className: inlineClass
+      } : {
         className: standardClassName
       },
-      style = _ref3.style,
-      gcn = _ref3.className;
-    // noinspection JSUnusedLocalSymbols
-    var h = renderer.h;
-    return h("div", {
+      style = _ref2.style,
+      gcn = _ref2.className;
+    var Div = renderer.html.Div;
+    var inline = renderOptions.type == schemas.GroupRenderType.Inline;
+    var children = formNode.getChildNodes().map(function (c, i) {
+      return renderChild(i, c, {
+        inline: inline
+      });
+    });
+    return /*#__PURE__*/jsxRuntime.jsx(Div, {
       className: schemas.rendererClass(props.className, clsx__default["default"](className, gcn)),
-      style: style
-    }, formNode.getChildNodes().map(function (c, i) {
-      return renderChild(i, c);
-    }));
+      textClass: props.textClass,
+      style: style,
+      inline: inline,
+      children: children
+    });
+  }
+  function renderLayout(props, renderer) {
+    if (props.renderOptions.type === schemas.GroupRenderType.Contents) {
+      var formNode = props.formNode,
+        renderChild = props.renderChild;
+      var children = formNode.getChildNodes().map(function (c, i) {
+        return renderChild(i, c);
+      });
+      return function (layout) {
+        return _extends({}, layout, {
+          inline: true,
+          children: children
+        });
+      };
+    }
+    return render(props, renderer);
   }
   return {
     type: "group",
-    render: render
+    render: renderLayout
   };
 }
 function SelectChildGroupRenderer(props) {
   var _effect = core.useComponentTracking();
   try {
-    var useEvalExpression = props.useEvalExpression,
+    var runExpression = props.runExpression,
       renderOptions = props.renderOptions;
-    var dynHook = useEvalExpression(renderOptions == null ? void 0 : renderOptions.childIndexExpression, function (x) {
-      return x == "string" ? parseInt(x) : x;
+    var ctrl = schemas.useExpression(undefined, runExpression, renderOptions == null ? void 0 : renderOptions.childIndexExpression, function (x) {
+      return typeof x == "string" ? parseInt(x) : x;
+    });
+    var childIndex = ctrl == null ? void 0 : ctrl.value;
+    var childDefinitions = props.formNode.getChildNodes();
+    return /*#__PURE__*/jsxRuntime.jsx("div", {
+      children: typeof childIndex === "number" && childIndex < childDefinitions.length && childIndex >= 0 && props.renderChild(childIndex, childDefinitions[childIndex])
     });
-    var Render = core.useTrackedComponent(function (p) {
-      var ctrl = dynHook.runHook(p.dataContext, dynHook.state);
-      var childIndex = ctrl == null ? void 0 : ctrl.value;
-      var childDefinitions = p.formNode.getChildNodes();
-      return React.createElement("div", null, typeof childIndex === "number" && childIndex < childDefinitions.length && childIndex >= 0 && p.renderChild(childIndex, childDefinitions[childIndex]));
-    }, [dynHook.deps]);
-    return React.createElement(Render, props);
   } finally {
     _effect();
   }
 }
 
 function createDefaultVisibilityRenderer() {
-  var h = jsxRuntime.jsx;
   return schemas.createVisibilityRenderer(function (props, renderer) {
-    return h(DefaultVisibility, _extends({}, props, {
+    return /*#__PURE__*/jsxRuntime.jsx(DefaultVisibility, _extends({}, props, {
       renderer: renderer
     }));
   });
@@ -768,9 +1209,10 @@ function DefaultVisibility(_ref) {
       className = _ref.className,
       style = _ref.style,
       divRef = _ref.divRef,
-      renderer = _ref.renderer;
+      renderer = _ref.renderer,
+      inline = _ref.inline;
     var v = visibility.value;
-    React.useEffect(function () {
+    react.useEffect(function () {
       if (v) {
         visibility.setValue(function (ex) {
           return {
@@ -780,13 +1222,14 @@ function DefaultVisibility(_ref) {
         });
       }
     }, [v == null ? void 0 : v.visible]);
-    var h = renderer.h;
-    return v != null && v.visible ? h("div", {
+    var Div = renderer.html.Div;
+    if (inline) return v != null && v.visible ? children : undefined;
+    return v != null && v.visible ? /*#__PURE__*/jsxRuntime.jsx(Div, {
       className: className,
       style: style,
-      ref: divRef,
+      nativeRef: divRef,
       children: children
-    }) : h(React.Fragment, null);
+    }) : /*#__PURE__*/jsxRuntime.jsx(jsxRuntime.Fragment, {});
   } finally {
     _effect();
   }
@@ -794,13 +1237,14 @@ function DefaultVisibility(_ref) {
 
 function createJsonataRenderer(className) {
   return schemas.createDataRenderer(function (p) {
-    return React.createElement(JsonataRenderer, {
+    return /*#__PURE__*/jsxRuntime.jsx(JsonataRenderer, {
       renderOptions: p.renderOptions,
       className: schemas.rendererClass(p.className, className),
       dataNode: p.dataNode,
       dataContext: p.dataContext,
       control: p.control,
-      readonly: p.readonly
+      readonly: p.readonly,
+      runExpression: p.runExpression
     });
   }, {
     renderType: schemas.DataRenderType.Jsonata
@@ -814,19 +1258,22 @@ function JsonataRenderer(_ref) {
       readonly = _ref.readonly,
       className = _ref.className,
       dataContext = _ref.dataContext,
-      dataNode = _ref.dataNode;
+      dataNode = _ref.dataNode,
+      runExpression = _ref.runExpression;
     var sdn = dataNode.elementIndex != null ? dataNode : dataContext.parentNode;
     var bindings = core.useComputed(function () {
-      return {
+      return _extends({}, dataContext.variables, {
         value: control.value,
         readonly: readonly,
         disabled: control.disabled,
-        formData: dataContext.formData,
         dataPath: schemas.getJsonPath(dataNode)
-      };
+      });
     });
-    var rendered = schemas.useJsonataExpression(renderOptions.expression, schemas.getRootDataNode(sdn).control, schemas.getJsonPath(sdn), bindings, schemas.coerceToString);
-    return React.createElement("div", {
+    var rendered = schemas.useExpression("", runExpression, {
+      type: schemas.ExpressionType.Jsonata,
+      expression: renderOptions.expression
+    }, schemas.coerceToString, bindings);
+    return /*#__PURE__*/jsxRuntime.jsx("div", {
       className: className,
       dangerouslySetInnerHTML: {
         __html: rendered.value
@@ -837,12 +1284,12 @@ function JsonataRenderer(_ref) {
   }
 }
 
-var _excluded = ["control", "field", "renderOptions"];
+var _excluded$1 = ["control", "field", "renderOptions"];
 function createNullToggleRenderer() {
   return schemas.createDataRenderer(function (_ref, renderers) {
     var control = _ref.control,
       field = _ref.field,
-      props = _objectWithoutPropertiesLoose(_ref, _excluded);
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$1);
     var lastDefined = schemas.getLastDefinedValue(control);
     if (lastDefined.current.value == null) lastDefined.value = props.definition.defaultValue;
     var nullControl = schemas.getNullToggler(control);
@@ -863,7 +1310,7 @@ function createNullToggleRenderer() {
 
 function createDefaultArrayDataRenderer(defaultActions) {
   return schemas.createDataRenderer(function (props, renderers) {
-    return React.createElement(DataArrayRenderer, {
+    return /*#__PURE__*/jsxRuntime.jsx(DataArrayRenderer, {
       dataProps: props,
       renderers: renderers,
       defaultActions: defaultActions
@@ -873,120 +1320,125 @@ function createDefaultArrayDataRenderer(defaultActions) {
     collection: true
   });
 }
+/**
+ * @trackControls
+ */
 function DataArrayRenderer(_ref) {
-  var _definition$children;
-  var dataProps = _ref.dataProps,
-    renderers = _ref.renderers,
-    defaultActions = _ref.defaultActions;
-  var renderOptions = dataProps.renderOptions,
-    control = dataProps.control,
-    field = dataProps.field,
-    readonly = dataProps.readonly,
-    designMode = dataProps.designMode,
-    required = dataProps.required,
-    renderChild = dataProps.renderChild,
-    definition = dataProps.definition,
-    className = dataProps.className,
-    style = dataProps.style,
-    useChildVisibility = dataProps.useChildVisibility,
-    dataContext = dataProps.dataContext,
-    formNode = dataProps.formNode;
-  var _mergeObjects = schemas.mergeObjects(schemas.isArrayRenderer(renderOptions) ? renderOptions : {}, defaultActions),
-    addText = _mergeObjects.addText,
-    noAdd = _mergeObjects.noAdd,
-    noRemove = _mergeObjects.noRemove,
-    removeText = _mergeObjects.removeText,
-    editExternal = _mergeObjects.editExternal;
-  var childOptions = schemas.isArrayRenderer(renderOptions) ? renderOptions.childOptions : undefined;
-  var renderAsElement = !schemas.isCompoundField(field);
-  var childDefinition = formNode.tree.createTempNode(formNode.id + "child", !renderAsElement ? {
-    type: schemas.ControlDefinitionType.Group,
-    groupOptions: {
-      type: schemas.GroupRenderType.Standard,
-      hideTitle: true
-    }
-  } : {
-    type: schemas.ControlDefinitionType.Data,
-    field: definition.field,
-    renderOptions: childOptions != null ? childOptions : {
-      type: schemas.DataRenderType.Standard
-    },
-    hideTitle: true
-  }, formNode.getChildNodes());
-  var visibilities = ((_definition$children = definition.children) != null ? _definition$children : []).map(function (x) {
-    return [useChildVisibility(x, undefined, true), x];
-  });
-  var deps = schemas.makeHookDepString(visibilities, function (x) {
-    return x[0].deps;
-  });
-  var Entry = core.useTrackedComponent(RenderEntry, [deps]);
-  var arrayProps = _extends({}, schemas.createArrayActions(control.as(), field, {
-    addText: addText,
-    removeText: removeText,
-    noAdd: noAdd,
-    noRemove: noRemove,
-    readonly: readonly,
-    disabled: control.disabled,
-    designMode: designMode,
-    editExternal: editExternal
-  }), {
-    required: required,
-    renderElement: function renderElement(i, wrap) {
-      return React.createElement(Entry, {
-        index: i,
-        renderChildElement: renderChildElement,
-        dataContext: dataContext,
-        visibilities: visibilities,
-        wrap: wrap
+  var _effect = core.useComponentTracking();
+  try {
+    var renderChildElement = function renderChildElement(i, elementNode) {
+      return renderChild(elementNode.control.uniqueId, childNode, {
+        parentDataNode: elementNode
       });
-    },
-    className: className ? className : undefined,
-    style: style
-  }, schemas.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
-    });
+    };
+    var dataProps = _ref.dataProps,
+      renderers = _ref.renderers,
+      defaultActions = _ref.defaultActions;
+    var renderOptions = dataProps.renderOptions,
+      control = dataProps.control,
+      field = dataProps.field,
+      readonly = dataProps.readonly,
+      designMode = dataProps.designMode,
+      required = dataProps.required,
+      renderChild = dataProps.renderChild,
+      definition = dataProps.definition,
+      className = dataProps.className,
+      style = dataProps.style,
+      dataContext = dataProps.dataContext,
+      formNode = dataProps.formNode,
+      getChildState = dataProps.getChildState;
+    var _mergeObjects = schemas.mergeObjects(schemas.isArrayRenderer(renderOptions) ? renderOptions : {}, defaultActions),
+      addText = _mergeObjects.addText,
+      noAdd = _mergeObjects.noAdd,
+      noRemove = _mergeObjects.noRemove,
+      noReorder = _mergeObjects.noReorder,
+      removeText = _mergeObjects.removeText,
+      editExternal = _mergeObjects.editExternal;
+    var childDefs = formNode.getResolvedChildren();
+    var renderAsElement = !schemas.isCompoundField(field);
+    var defaultChildDef = {
+      type: schemas.ControlDefinitionType.Data,
+      field: ".",
+      renderOptions: {
+        type: schemas.DataRenderType.Standard
+      },
+      hideTitle: true
+    };
+    var childDef = {
+      type: schemas.ControlDefinitionType.Group,
+      groupOptions: {
+        type: schemas.GroupRenderType.Standard,
+        hideTitle: true
+      },
+      children: renderAsElement && childDefs.length == 0 ? [defaultChildDef] : childDefs
+    };
+    var childNode = formNode.createChildNode("child", childDef);
+    var childNodes = childNode.getChildNodes();
+    var arrayProps = _extends({}, schemas.createArrayActions(control.as(), field, {
+      addText: addText,
+      removeText: removeText,
+      noAdd: noAdd,
+      noRemove: noRemove,
+      readonly: readonly,
+      disabled: control.disabled,
+      designMode: designMode,
+      editExternal: editExternal
+    }), {
+      required: required,
+      renderElement: function renderElement(i, wrap) {
+        return /*#__PURE__*/jsxRuntime.jsx(RenderEntry, {
+          index: i,
+          renderChildElement: renderChildElement,
+          dataContext: dataContext,
+          wrap: wrap,
+          isChildHidden: function isChildHidden(dataNode) {
+            return childNodes.every(function (x) {
+              return getChildState(x, dataNode).hidden;
+            });
+          }
+        });
+      },
+      className: className ? className : undefined,
+      style: style
+    }, schemas.getLengthRestrictions(definition));
+    return renderers.renderArray(arrayProps);
+  } finally {
+    _effect();
   }
 }
+/**
+ * @trackControls
+ */
 function RenderEntry(_ref2) {
-  var i = _ref2.index,
-    renderChildElement = _ref2.renderChildElement,
-    visibilities = _ref2.visibilities,
-    wrap = _ref2.wrap,
-    dataContext = _ref2.dataContext;
-  var elementNode = dataContext.dataNode.getChildElement(i);
-  var childVis = visibilities.map(function (_ref3) {
-    var hook = _ref3[0],
-      def = _ref3[1];
-    return hook.runHook(_extends({}, dataContext, {
-      parentNode: elementNode,
-      dataNode: schemas.lookupDataNode(def, elementNode)
-    }), hook.state).value;
-  });
-  var anyVisible = childVis.length == 0 || childVis.some(function (x) {
-    return x === true;
-  });
-  if (!anyVisible) return undefined;
-  return wrap(renderChildElement(i, elementNode));
+  var _effect2 = core.useComponentTracking();
+  try {
+    var i = _ref2.index,
+      renderChildElement = _ref2.renderChildElement,
+      wrap = _ref2.wrap,
+      isChildHidden = _ref2.isChildHidden,
+      dataContext = _ref2.dataContext;
+    var elementNode = dataContext.dataNode.getChildElement(i);
+    if (isChildHidden(elementNode)) return undefined;
+    return wrap(renderChildElement(i, elementNode));
+  } finally {
+    _effect2();
+  }
 }
 function createDefaultArrayRenderer(options) {
   return {
-    render: function render(props, _ref4) {
-      var renderAction = _ref4.renderAction;
-      return React.createElement(DefaultArrayRenderer, _extends({}, props, options, {
-        renderAction: renderAction
+    render: function render(props, _ref3) {
+      var renderAction = _ref3.renderAction,
+        html = _ref3.html;
+      return /*#__PURE__*/jsxRuntime.jsx(DefaultArrayRenderer, _extends({}, props, options, {
+        renderAction: renderAction,
+        html: html
       }));
     },
     type: "array"
   };
 }
 function DefaultArrayRenderer(props) {
-  var _effect = core.useComponentTracking();
+  var _effect3 = core.useComponentTracking();
   try {
     var renderElement = props.renderElement,
       className = props.className,
@@ -998,31 +1450,41 @@ function DefaultArrayRenderer(props) {
       arrayControl = props.arrayControl,
       renderAction = props.renderAction,
       style = props.style,
-      editAction = props.editAction;
+      editAction = props.editAction,
+      Div = props.html.Div;
     var _applyArrayLengthRest = schemas.applyArrayLengthRestrictions(props),
       addAction = _applyArrayLengthRest.addAction,
       removeAction = _applyArrayLengthRest.removeAction;
-    return React.createElement("div", {
-      style: style
-    }, React.createElement("div", {
-      className: clsx__default["default"](className, removeAction && removableClass)
-    }, React.createElement(core.RenderElements, {
-      control: arrayControl
-    }, function (_, x) {
-      return renderElement(x, function (children) {
-        return removeAction || editAction ? React.createElement(React.Fragment, null, React.createElement("div", {
-          className: clsx__default["default"](childClass, removableChildClass)
-        }, children), React.createElement("div", {
-          className: removeActionClass
-        }, editAction && renderAction(editAction(x)), removeAction && renderAction(removeAction(x)))) : React.createElement("div", {
-          className: childClass
-        }, children);
-      });
-    })), addAction && React.createElement("div", {
-      className: addActionClass
-    }, renderAction(addAction)));
+    return /*#__PURE__*/jsxRuntime.jsxs(Div, {
+      style: style,
+      children: [/*#__PURE__*/jsxRuntime.jsx(Div, {
+        className: clsx__default["default"](className, removeAction && removableClass),
+        children: /*#__PURE__*/jsxRuntime.jsx(core.RenderElements, {
+          control: arrayControl,
+          children: function children(_, x) {
+            return renderElement(x, function (children) {
+              return removeAction || editAction ? /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
+                children: [/*#__PURE__*/jsxRuntime.jsx(Div, {
+                  className: clsx__default["default"](childClass, removableChildClass),
+                  children: children
+                }), /*#__PURE__*/jsxRuntime.jsxs(Div, {
+                  className: removeActionClass,
+                  children: [editAction && renderAction(editAction(x)), removeAction && renderAction(removeAction(x))]
+                })]
+              }) : /*#__PURE__*/jsxRuntime.jsx(Div, {
+                className: childClass,
+                children: children
+              });
+            });
+          }
+        })
+      }), addAction && /*#__PURE__*/jsxRuntime.jsx(Div, {
+        className: addActionClass,
+        children: renderAction(addAction)
+      })]
+    });
   } finally {
-    _effect();
+    _effect3();
   }
 }
 
@@ -1033,7 +1495,7 @@ function createAutocompleteRenderer(options) {
   }
   return schemas.createDataRenderer(function (p) {
     var _p$options, _p$options2;
-    return p.field.collection ? React.createElement(MultipleAutocomplete, {
+    return p.field.collection ? /*#__PURE__*/jsxRuntime.jsx(MultipleAutocomplete, {
       options: (_p$options = p.options) != null ? _p$options : [],
       control: p.control,
       className: schemas.rendererClass(p.className, options.className),
@@ -1041,7 +1503,7 @@ function createAutocompleteRenderer(options) {
       controlClasses: p.renderOptions,
       readOnly: p.readonly,
       id: p.id
-    }) : React.createElement(SingleAutocomplete, {
+    }) : /*#__PURE__*/jsxRuntime.jsx(SingleAutocomplete, {
       options: (_p$options2 = p.options) != null ? _p$options2 : [],
       control: p.control,
       className: schemas.rendererClass(p.className, options.className),
@@ -1078,6 +1540,7 @@ function SingleAutocomplete(_ref) {
     var _useAutocomplete = base.useAutocomplete(_extends({
         freeSolo: true,
         multiple: false,
+        readOnly: readOnly,
         value: selectedOptionControl.value,
         inputValue: inputControl.value,
         getOptionLabel: function getOptionLabel(v) {
@@ -1107,33 +1570,39 @@ function SingleAutocomplete(_ref) {
       popupOpen = _useAutocomplete.popupOpen,
       focused = _useAutocomplete.focused,
       getPopupIndicatorProps = _useAutocomplete.getPopupIndicatorProps;
-    return React.createElement("div", _extends({
+    return /*#__PURE__*/jsxRuntime.jsxs("div", _extends({
       id: id,
       className: "relative"
-    }, getRootProps()), React.createElement("div", {
-      className: clsx__default["default"](className, focused ? "border-primary-400 shadow-[0_0_0_3px_transparent] shadow-primary-200" : "shadow-[0_2px_2px_transparent] shadow-surface-50")
-    }, React.createElement("input", _extends({
-      type: "text"
-    }, getInputProps(), {
-      placeholder: (_controlClasses$place = controlClasses == null ? void 0 : controlClasses.placeholder) != null ? _controlClasses$place : "",
-      className: inputClass
-    })), React.createElement("button", _extends({}, getPopupIndicatorProps(), {
-      disabled: disabled || readOnly,
-      className: "outline-0 shadow-none border-0 py-0 px-0.5 bg-transparent pr-[10px]"
-    }), React.createElement("li", {
-      className: clsx__default["default"]("fa-solid fa-angle-down", "text-primary-500", popupOpen && "rotate-180")
-    }))), groupedOptions.length > 0 && popupOpen && React.createElement("ul", _extends({}, getListboxProps(), {
-      className: listContainerClass
-    }), groupedOptions.map(function (option, index) {
-      var optionProps = getOptionProps({
-        option: option,
-        index: index
-      });
-      return React.createElement("li", _extends({}, optionProps, {
-        key: optionProps.key,
-        className: listEntryClass
-      }), option.name);
-    })));
+    }, getRootProps(), {
+      children: [/*#__PURE__*/jsxRuntime.jsxs("div", {
+        className: clsx__default["default"](className, focused ? "border-primary-400 shadow-[0_0_0_3px_transparent] shadow-primary-200" : "shadow-[0_2px_2px_transparent] shadow-surface-50"),
+        children: [/*#__PURE__*/jsxRuntime.jsx("input", _extends({
+          type: "text"
+        }, getInputProps(), {
+          placeholder: (_controlClasses$place = controlClasses == null ? void 0 : controlClasses.placeholder) != null ? _controlClasses$place : "",
+          className: inputClass,
+          readOnly: readOnly
+        })), /*#__PURE__*/jsxRuntime.jsx("button", _extends({}, getPopupIndicatorProps(), {
+          disabled: disabled || readOnly,
+          className: "outline-0 shadow-none border-0 py-0 px-0.5 bg-transparent pr-[10px]",
+          children: /*#__PURE__*/jsxRuntime.jsx("li", {
+            className: clsx__default["default"]("fa-solid fa-angle-down", "text-primary-500", popupOpen && "rotate-180")
+          })
+        }))]
+      }), groupedOptions.length > 0 && popupOpen && /*#__PURE__*/jsxRuntime.jsx("ul", _extends({}, getListboxProps(), {
+        className: listContainerClass,
+        children: groupedOptions.map(function (option, index) {
+          var optionProps = getOptionProps({
+            option: option,
+            index: index
+          });
+          return /*#__PURE__*/react.createElement("li", _extends({}, optionProps, {
+            key: optionProps.key,
+            className: listEntryClass
+          }), option.name);
+        })
+      }))]
+    }));
   } finally {
     _effect();
   }
@@ -1169,6 +1638,7 @@ function MultipleAutocomplete(_ref3) {
         value: (_selectedOptionsContr = selectedOptionsControl.value) != null ? _selectedOptionsContr : [],
         inputValue: inputControl.value,
         freeSolo: true,
+        readOnly: readOnly,
         multiple: true,
         getOptionLabel: function getOptionLabel(v) {
           return typeof v === "string" ? v : v.name;
@@ -1196,48 +1666,54 @@ function MultipleAutocomplete(_ref3) {
       popupOpen = _useAutocomplete2.popupOpen,
       focused = _useAutocomplete2.focused,
       getPopupIndicatorProps = _useAutocomplete2.getPopupIndicatorProps;
-    return React.createElement("div", _extends({
+    return /*#__PURE__*/jsxRuntime.jsxs("div", _extends({
       id: id,
       className: "relative"
-    }, getRootProps()), React.createElement("div", {
-      className: clsx__default["default"](className, focused ? "border-primary-400 shadow-[0_0_0_3px_transparent] shadow-primary-200" : "shadow-[0_2px_2px_transparent] shadow-surface-50")
-    }, React.createElement("div", {
-      className: "flex flex-1 flex-row flex-wrap"
-    }, (_selectedOptionsContr2 = selectedOptionsControl.value) == null ? void 0 : _selectedOptionsContr2.map(function (v) {
-      return React.createElement(Chip, {
-        key: typeof v === "string" ? v : v.name,
-        text: typeof v === "string" ? v : v.name,
-        chipContainerClass: chipContainerClass,
-        chipCloseButtonClass: chipCloseButtonClass,
-        onDeleteClick: function onDeleteClick() {
-          var c = selectedOptionsControl.elements.find(function (x) {
-            return x.value == v;
+    }, getRootProps(), {
+      children: [/*#__PURE__*/jsxRuntime.jsxs("div", {
+        className: clsx__default["default"](className, focused ? "border-primary-400 shadow-[0_0_0_3px_transparent] shadow-primary-200" : "shadow-[0_2px_2px_transparent] shadow-surface-50"),
+        children: [/*#__PURE__*/jsxRuntime.jsxs("div", {
+          className: "flex flex-1 flex-row flex-wrap",
+          children: [(_selectedOptionsContr2 = selectedOptionsControl.value) == null ? void 0 : _selectedOptionsContr2.map(function (v) {
+            return /*#__PURE__*/jsxRuntime.jsx(Chip, {
+              text: typeof v === "string" ? v : v.name,
+              chipContainerClass: chipContainerClass,
+              chipCloseButtonClass: chipCloseButtonClass,
+              onDeleteClick: readOnly || disabled ? undefined : function () {
+                var c = selectedOptionsControl.elements.find(function (x) {
+                  return x.value == v;
+                });
+                if (c) core.removeElement(selectedOptionsControl, c);
+              }
+            }, typeof v === "string" ? v : v.name);
+          }), /*#__PURE__*/jsxRuntime.jsx("input", _extends({
+            type: "text"
+          }, getInputProps(), {
+            placeholder: (_controlClasses$place2 = controlClasses == null ? void 0 : controlClasses.placeholder) != null ? _controlClasses$place2 : "",
+            className: clsx__default["default"](inputClass),
+            readOnly: readOnly
+          }))]
+        }), /*#__PURE__*/jsxRuntime.jsx("button", _extends({}, getPopupIndicatorProps(), {
+          disabled: disabled || readOnly,
+          className: "outline-0 shadow-none border-0 py-0 px-0.5 bg-transparent pr-[10px]",
+          children: /*#__PURE__*/jsxRuntime.jsx("i", {
+            className: clsx__default["default"]("fa-solid fa-angle-down", "text-primary-500", popupOpen && "rotate-180")
+          })
+        }))]
+      }), groupedOptions.length > 0 && popupOpen && /*#__PURE__*/jsxRuntime.jsx("ul", _extends({}, getListboxProps(), {
+        className: listContainerClass,
+        children: groupedOptions.map(function (option, index) {
+          var optionProps = getOptionProps({
+            option: option,
+            index: index
           });
-          if (c) core.removeElement(selectedOptionsControl, c);
-        }
-      });
-    }), React.createElement("input", _extends({
-      type: "text"
-    }, getInputProps(), {
-      placeholder: (_controlClasses$place2 = controlClasses == null ? void 0 : controlClasses.placeholder) != null ? _controlClasses$place2 : "",
-      className: clsx__default["default"](inputClass)
-    }))), React.createElement("button", _extends({}, getPopupIndicatorProps(), {
-      disabled: disabled || readOnly,
-      className: "outline-0 shadow-none border-0 py-0 px-0.5 bg-transparent pr-[10px]"
-    }), React.createElement("i", {
-      className: clsx__default["default"]("fa-solid fa-angle-down", "text-primary-500", popupOpen && "rotate-180")
-    }))), groupedOptions.length > 0 && popupOpen && React.createElement("ul", _extends({}, getListboxProps(), {
-      className: listContainerClass
-    }), groupedOptions.map(function (option, index) {
-      var optionProps = getOptionProps({
-        option: option,
-        index: index
-      });
-      return React.createElement("li", _extends({}, optionProps, {
-        key: optionProps.key,
-        className: listEntryClass
-      }), option.name);
-    })));
+          return /*#__PURE__*/react.createElement("li", _extends({}, optionProps, {
+            key: optionProps.key,
+            className: listEntryClass
+          }), option.name);
+        })
+      }))]
+    }));
   } finally {
     _effect2();
   }
@@ -1249,14 +1725,15 @@ function Chip(_ref5) {
       chipContainerClass = _ref5.chipContainerClass,
       chipCloseButtonClass = _ref5.chipCloseButtonClass,
       onDeleteClick = _ref5.onDeleteClick;
-    return React.createElement("div", {
-      className: chipContainerClass
-    }, text, React.createElement("i", {
-      className: chipCloseButtonClass,
-      onClick: function onClick() {
-        onDeleteClick == null || onDeleteClick();
-      }
-    }));
+    return /*#__PURE__*/jsxRuntime.jsxs("div", {
+      className: chipContainerClass,
+      children: [text, /*#__PURE__*/jsxRuntime.jsx("i", {
+        className: chipCloseButtonClass,
+        onClick: function onClick() {
+          onDeleteClick == null || onDeleteClick();
+        }
+      })]
+    });
   } finally {
     _effect3();
   }
@@ -1268,21 +1745,35 @@ var ValueForFieldExtension = {
     value: RenderType,
     name: "Value For Field",
     fields: schemas.buildSchema({
-      fieldRef: schemas.stringField("Field Reference")
+      fieldRef: schemas.stringField("Field Reference"),
+      noOptions: schemas.boolField("No Options"),
+      refIsDirect: schemas.boolField("Reference is direct")
     })
   }
 };
 function createValueForFieldRenderer(options) {
   return schemas.createDataRenderer(function (o, renderer) {
     var _schemaDataForFieldRe;
-    var fieldRef = o.renderOptions.fieldRef;
-    var actualFieldRef = fieldRef ? (_schemaDataForFieldRe = schemas.schemaDataForFieldRef(fieldRef, o.dataContext.parentNode)) == null || (_schemaDataForFieldRe = _schemaDataForFieldRe.control) == null ? void 0 : _schemaDataForFieldRe.value : undefined;
-    var node = actualFieldRef ? schemas.schemaForFieldRef(actualFieldRef, options.schema) : undefined;
-    return node ? React.createElement(ValueForField, {
+    var _o$renderOptions = o.renderOptions,
+      fieldRef = _o$renderOptions.fieldRef,
+      noOptions = _o$renderOptions.noOptions,
+      refIsDirect = _o$renderOptions.refIsDirect;
+    var actualFieldRef = fieldRef ? refIsDirect ? fieldRef : (_schemaDataForFieldRe = schemas.schemaDataForFieldRef(fieldRef, o.dataContext.parentNode)) == null || (_schemaDataForFieldRe = _schemaDataForFieldRe.control) == null ? void 0 : _schemaDataForFieldRe.value : ".";
+    var schemaField;
+    if (refIsDirect) {
+      var dataNode = schemas.schemaDataForFieldRef(actualFieldRef, o.dataContext.parentNode);
+      schemaField = core.trackedValue(dataNode.control.as());
+    } else {
+      schemaField = actualFieldRef ? schemas.schemaForFieldRef(actualFieldRef, options.schema).field : undefined;
+    }
+    return schemaField ? /*#__PURE__*/jsxRuntime.jsx(ValueForField, {
       renderer: renderer,
-      schema: node,
-      control: o.control
-    }) : React.createElement(React.Fragment, null, actualFieldRef ? "No schema node for " + actualFieldRef : "");
+      schemaField: schemaField,
+      control: o.control,
+      noOptions: noOptions
+    }) : /*#__PURE__*/jsxRuntime.jsx(jsxRuntime.Fragment, {
+      children: actualFieldRef ? "No schema node for " + actualFieldRef : ""
+    });
   }, {
     renderType: RenderType
   });
@@ -1290,9 +1781,10 @@ function createValueForFieldRenderer(options) {
 function ValueForField(_ref) {
   var _effect = core.useComponentTracking();
   try {
-    var schema = _ref.schema,
+    var schemaField = _ref.schemaField,
       renderer = _ref.renderer,
-      control = _ref.control;
+      control = _ref.control,
+      noOptions = _ref.noOptions;
     var value = core.useControl({
       "default": undefined
     }, undefined, function (e) {
@@ -1300,22 +1792,28 @@ function ValueForField(_ref) {
         "default": control
       });
     });
-    var _useMemo = React.useMemo(function () {
-        var rootSchema = schemas.rootSchemaNode([_extends({}, schema.field, {
+    var _useMemo = react.useMemo(function () {
+        var adjustedField = _extends({}, schemaField, {
+          collection: noOptions ? false : schemaField.collection,
+          options: noOptions ? undefined : schemaField.options,
           field: "default",
           required: false,
           notNullable: false,
           onlyForTypes: null,
           defaultValue: undefined
-        })]);
-        return [schemas.addMissingControlsForSchema(rootSchema, []), rootSchema];
-      }, [schema]),
+        });
+        var control = _extends({}, schemas.defaultControlForField(adjustedField), {
+          hideTitle: true
+        });
+        var rootSchema = schemas.createSchemaTree([adjustedField]).rootNode;
+        return [control, rootSchema];
+      }, [schemaField]),
       controls = _useMemo[0],
       rootSchema = _useMemo[1];
-    var Render = schemas.useControlRendererComponent(schemas.groupedControl(controls), renderer, {
+    var Render = schemas.useControlRendererComponent(controls, renderer, {
       disabled: control.disabled
     }, schemas.makeSchemaDataNode(rootSchema, value));
-    return React.createElement(Render, null);
+    return /*#__PURE__*/jsxRuntime.jsx(Render, {});
   } finally {
     _effect();
   }
@@ -1339,7 +1837,7 @@ function createOptionalAdornment(options) {
       apply: function apply(rl) {
         var _ref, _adornment$placement;
         if (props.formOptions.readonly) return rl;
-        if (!options.hideEdit && adornment.editSelectable) schemas.appendMarkupAt((_ref = (_adornment$placement = adornment.placement) != null ? _adornment$placement : options.defaultPlacement) != null ? _ref : schemas.AdornmentPlacement.LabelStart, React.createElement(core.Fcheckbox, {
+        if (!options.hideEdit && adornment.editSelectable) schemas.appendMarkupAt((_ref = (_adornment$placement = adornment.placement) != null ? _adornment$placement : options.defaultPlacement) != null ? _ref : schemas.AdornmentPlacement.LabelStart, /*#__PURE__*/jsxRuntime.jsx(core.Fcheckbox, {
           control: editing,
           className: options.checkClass
         }))(rl);
@@ -1352,7 +1850,7 @@ function createOptionalAdornment(options) {
             nullToggler: nullToggler,
             dataContext: dataContext,
             options: options
-          }) : React.createElement(OptionalEditRenderer, {
+          }) : /*#__PURE__*/jsxRuntime.jsx(OptionalEditRenderer, {
             children: children,
             options: options,
             editing: editing.as(),
@@ -1380,20 +1878,26 @@ function OptionalEditRenderer(_ref2) {
     var nullToggler = schemas.getNullToggler(dataControl);
     var allValues = schemas.getAllValues(dataControl);
     var multipleValues = allValues.value.length > 1;
-    var nullEdit = adornment.allowNull ? React.createElement("div", {
-      className: options.nullWrapperClass
-    }, React.createElement(core.Fcheckbox, {
-      control: nullToggler,
-      className: options.checkClass,
-      notValue: true
-    }), React.createElement("span", null, (_options$setNullText = options.setNullText) != null ? _options$setNullText : "Null")) : undefined;
-    return React.createElement("div", {
-      className: options.className
-    }, multipleValues && editing.value === false ? React.createElement("div", {
-      className: options.multiValuesClass
-    }, (_options$multiValuesT = options.multiValuesText) != null ? _options$multiValuesT : "Differing values") : React.createElement("div", {
-      className: options.childWrapperClass
-    }, nullEdit, children));
+    var nullEdit = adornment.allowNull ? /*#__PURE__*/jsxRuntime.jsxs("div", {
+      className: options.nullWrapperClass,
+      children: [/*#__PURE__*/jsxRuntime.jsx(core.Fcheckbox, {
+        control: nullToggler,
+        className: options.checkClass,
+        notValue: true
+      }), /*#__PURE__*/jsxRuntime.jsx("span", {
+        children: (_options$setNullText = options.setNullText) != null ? _options$setNullText : "Null"
+      })]
+    }) : undefined;
+    return /*#__PURE__*/jsxRuntime.jsx("div", {
+      className: options.className,
+      children: multipleValues && editing.value === false ? /*#__PURE__*/jsxRuntime.jsx("div", {
+        className: options.multiValuesClass,
+        children: (_options$multiValuesT = options.multiValuesText) != null ? _options$multiValuesT : "Differing values"
+      }) : /*#__PURE__*/jsxRuntime.jsxs("div", {
+        className: options.childWrapperClass,
+        children: [nullEdit, children]
+      })
+    });
   } finally {
     _effect();
   }
@@ -1401,7 +1905,7 @@ function OptionalEditRenderer(_ref2) {
 
 function createMultilineFieldRenderer(className) {
   return schemas.createDataRenderer(function (p) {
-    return React.createElement(MultilineTextfield, _extends({}, p, {
+    return /*#__PURE__*/jsxRuntime.jsx(MultilineTextfield, _extends({}, p, {
       className: schemas.rendererClass(p.className, className)
     }));
   });
@@ -1411,7 +1915,7 @@ function MultilineTextfield(_ref) {
   try {
     var control = _ref.control,
       className = _ref.className;
-    var codeRef = React.useRef(null);
+    var codeRef = react.useRef(null);
     core.useControlEffect(function () {
       return control.value;
     }, function (v) {
@@ -1420,7 +1924,7 @@ function MultilineTextfield(_ref) {
         c.textContent = v;
       }
     }, true);
-    return React.createElement("code", {
+    return /*#__PURE__*/jsxRuntime.jsx("code", {
       contentEditable: !control.disabled,
       className: className,
       onInput: function onInput(t) {
@@ -1438,7 +1942,7 @@ function createArrayElementRenderer(options) {
     options = {};
   }
   return schemas.createDataRenderer(function (props, formRenderer) {
-    return React.createElement(ArrayElementRenderer, {
+    return /*#__PURE__*/jsxRuntime.jsx(ArrayElementRenderer, {
       dataProps: props,
       options: options,
       formRenderer: formRenderer,
@@ -1484,32 +1988,36 @@ function ArrayElementRenderer(_ref) {
         });
       };
       var parentDataNode = schemas.makeSchemaDataNode(dataProps.dataNode.schema, extData.fields.data);
-      var elementGroup = formNode.tree.createTempNode(formNode.id + "group", {
+      var elementGroup = formNode.createChildNode("group", {
         type: schemas.ControlDefinitionType.Group,
         groupOptions: {
           type: schemas.GroupRenderType.Standard,
           hideTitle: true
-        }
-      }, formNode.getChildNodes());
-      var editContent = React.createElement("div", {
-        className: schemas.rendererClass(dataProps.className, options.className)
-      }, renderChild("", elementGroup, {
-        parentDataNode: parentDataNode,
-        elementIndex: 0
-      }), React.createElement("div", {
-        className: options.actionsClass
-      }, React.createElement(core.RenderElements, {
-        control: extData.fields.actions
-      }, function (c) {
-        return formRenderer.renderAction(applyValidation(c.value));
-      })));
+        },
+        children: formNode.getResolvedChildren()
+      });
+      var editContent = /*#__PURE__*/jsxRuntime.jsxs("div", {
+        className: schemas.rendererClass(dataProps.className, options.className),
+        children: [renderChild("", elementGroup, {
+          parentDataNode: parentDataNode
+        }), /*#__PURE__*/jsxRuntime.jsx("div", {
+          className: options.actionsClass,
+          children: /*#__PURE__*/jsxRuntime.jsx(core.RenderElements, {
+            control: extData.fields.actions,
+            children: function children(c) {
+              return formRenderer.renderAction(applyValidation(c.value));
+            }
+          })
+        })]
+      });
       if (renderOptions.showInline || designMode) return editContent;
-      return React.createElement(ariaBase.Modal, {
-        state: overlayState
-      }, React.createElement(ariaBase.Dialog, {
-        children: editContent
-      }));
-    } else return React.createElement(React.Fragment, null);
+      return /*#__PURE__*/jsxRuntime.jsx(ariaBase.Modal, {
+        state: overlayState,
+        children: /*#__PURE__*/jsxRuntime.jsx(ariaBase.Dialog, {
+          children: editContent
+        })
+      });
+    } else return /*#__PURE__*/jsxRuntime.jsx(jsxRuntime.Fragment, {});
   } finally {
     _effect();
   }
@@ -1519,24 +2027,61 @@ function createButtonActionRenderer(actionId, options) {
   if (options === void 0) {
     options = {};
   }
-  return schemas.createActionRenderer(actionId, function (_ref, renderer) {
-    var _options$renderConten;
-    var onClick = _ref.onClick,
-      actionText = _ref.actionText,
-      className = _ref.className,
-      style = _ref.style,
-      actionId = _ref.actionId,
-      actionData = _ref.actionData,
-      disabled = _ref.disabled;
-    var h = renderer.h;
-    return h("button", {
-      className: schemas.rendererClass(className, options.className),
+  return schemas.createActionRenderer(actionId, function (props, renderer) {
+    var _props$icon, _ref, _props$iconPlacement, _options$renderConten;
+    var key = props.key,
+      onClick = props.onClick,
+      actionText = props.actionText,
+      className = props.className,
+      style = props.style,
+      actionId = props.actionId,
+      actionData = props.actionData,
+      disabled = props.disabled,
+      textClass = props.textClass,
+      actionStyle = props.actionStyle,
+      inline = props.inline,
+      actionContent = props.actionContent;
+    var icon = (_props$icon = props.icon) != null && _props$icon.name ? props.icon : options.icon;
+    var iconPlacement = (_ref = (_props$iconPlacement = props.iconPlacement) != null ? _props$iconPlacement : options.iconPlacement) != null ? _ref : schemas.IconPlacement.BeforeText;
+    var _renderer$html = renderer.html,
+      Button = _renderer$html.Button,
+      I = _renderer$html.I,
+      Span = _renderer$html.Span;
+    var isLink = actionStyle == schemas.ActionStyle.Link;
+    var isGroup = actionStyle == schemas.ActionStyle.Group;
+    var classNames = schemas.rendererClass(className, isLink ? options.linkClass : isGroup ? options.groupClass : schemas.rendererClass(options.buttonClass, actionStyle == schemas.ActionStyle.Secondary ? options.secondaryClass : options.primaryClass));
+    var iconElement = icon && /*#__PURE__*/jsxRuntime.jsx(I, {
+      iconName: icon.name,
+      iconLibrary: icon.library,
+      className: iconPlacement == schemas.IconPlacement.BeforeText ? options.iconBeforeClass : options.iconAfterClass
+    });
+    var textClassNames = schemas.rendererClass(textClass, isLink ? options.linkTextClass : schemas.rendererClass(options.textClass, actionStyle == schemas.ActionStyle.Secondary ? options.secondaryTextClass : options.primaryTextClass));
+    var textElement = actionContent != null ? actionContent : actionText && /*#__PURE__*/jsxRuntime.jsx(Span, {
+      className: textClassNames,
+      children: actionText
+    });
+    return /*#__PURE__*/jsxRuntime.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 == schemas.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__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
+        children: [iconPlacement == schemas.IconPlacement.BeforeText && iconElement, iconPlacement != schemas.IconPlacement.ReplaceText && textElement, iconPlacement != schemas.IconPlacement.BeforeText && iconElement]
+      })
+    }, key);
   });
 }
+
+var _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"];
 var DefaultBoolOptions = [{
   name: "Yes",
   value: true
@@ -1545,15 +2090,15 @@ var DefaultBoolOptions = [{
   value: false
 }];
 function createDefaultDataRenderer(options) {
-  var _options$checkOptions, _options$radioOptions, _options$checkListOpt;
+  var _options$checkboxOpti, _options$checkboxOpti2, _options$radioOptions, _options$checkListOpt;
   if (options === void 0) {
     options = {};
   }
-  var h = React__default["default"].createElement;
+  var elementSelectedRenderer = createElementSelectedRenderer((_options$checkboxOpti = options.checkboxOptions) != null ? _options$checkboxOpti : options.checkOptions);
   var jsonataRenderer = createJsonataRenderer(options.jsonataClass);
   var nullToggler = createNullToggleRenderer();
   var multilineRenderer = createMultilineFieldRenderer(options.multilineClass);
-  var checkboxRenderer = createCheckboxRenderer((_options$checkOptions = options.checkOptions) != null ? _options$checkOptions : options.checkboxOptions);
+  var checkboxRenderer = createCheckboxRenderer((_options$checkboxOpti2 = options.checkboxOptions) != null ? _options$checkboxOpti2 : options.checkOptions);
   var selectRenderer = createSelectRenderer(options.selectOptions);
   var radioRenderer = createRadioRenderer((_options$radioOptions = options.radioOptions) != null ? _options$radioOptions : options.checkOptions);
   var checkListRenderer = createCheckListRenderer((_options$checkListOpt = options.checkListOptions) != null ? _options$checkListOpt : options.checkOptions);
@@ -1563,6 +2108,7 @@ function createDefaultDataRenderer(options) {
       booleanOptions: DefaultBoolOptions
     }, options),
     inputClass = _optionRenderer$boole.inputClass,
+    inputTextClass = _optionRenderer$boole.inputTextClass,
     booleanOptions = _optionRenderer$boole.booleanOptions,
     optionRenderer = _optionRenderer$boole.optionRenderer,
     displayOnlyClass = _optionRenderer$boole.displayOnlyClass,
@@ -1574,13 +2120,13 @@ function createDefaultDataRenderer(options) {
     var fieldType = field.type;
     var renderOptions = props.renderOptions;
     var renderType = renderOptions.type;
-    if (field.collection && props.elementIndex == null && (renderType == schemas.DataRenderType.Standard || renderType == schemas.DataRenderType.Array || renderType == schemas.DataRenderType.ArrayElement)) {
+    if (field.collection && props.dataNode.elementIndex == null && (renderType == schemas.DataRenderType.Standard || renderType == schemas.DataRenderType.Array || renderType == schemas.DataRenderType.ArrayElement)) {
       if (renderType == schemas.DataRenderType.ArrayElement) return arrayElementRenderer.render(props, renderers);
       return arrayRenderer.render(props, renderers);
     }
     if (fieldType === schemas.FieldType.Compound) {
-      var _ref2;
-      var groupOptions = (_ref2 = schemas.isDataGroupRenderer(renderOptions) ? renderOptions.groupOptions : undefined) != null ? _ref2 : {
+      var _ref;
+      var groupOptions = (_ref = schemas.isDataGroupRenderer(renderOptions) ? renderOptions.groupOptions : undefined) != null ? _ref : {
         type: "Standard",
         hideTitle: true
       };
@@ -1591,12 +2137,13 @@ function createDefaultDataRenderer(options) {
     if (props.displayOnly || schemas.isDisplayOnlyRenderer(renderOptions)) return function (p) {
       return _extends({}, p, {
         className: "@ " + schemas.rendererClass(p.className, displayOnlyClass),
-        children: h(DefaultDisplayOnly, {
-          field: props.field,
+        children: /*#__PURE__*/jsxRuntime.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: schemas.isDisplayOnlyRenderer(renderOptions) && renderOptions.emptyText ? renderOptions.emptyText : defaultEmptyText
         })
@@ -1626,15 +2173,20 @@ function createDefaultDataRenderer(options) {
         return jsonataRenderer.render(props, renderers);
       case schemas.DataRenderType.Autocomplete:
         return autocompleteRenderer.render(props, renderers);
+      case schemas.DataRenderType.ElementSelected:
+        return elementSelectedRenderer.render(props, renderers);
     }
     if (fieldType == schemas.FieldType.Any) {
       var _field$displayName;
-      return h(React.Fragment, null, "Can't render field: ", (_field$displayName = field.displayName) != null ? _field$displayName : field.field, " (", renderType, ")");
+      return /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
+        children: ["Can't render field: ", (_field$displayName = field.displayName) != null ? _field$displayName : field.field, " (", renderType, ")"]
+      });
     }
     if (schemas.isTextfieldRenderer(renderOptions) && renderOptions.multiline) return multilineRenderer.render(props, renderers);
     var placeholder = schemas.isTextfieldRenderer(renderOptions) ? renderOptions.placeholder : undefined;
-    return h(ControlInput, {
+    return /*#__PURE__*/jsxRuntime.jsx(ControlInput, {
       className: schemas.rendererClass(props.className, inputClass),
+      textClass: schemas.rendererClass(props.textClass, inputTextClass),
       style: props.style,
       id: props.id,
       readOnly: props.readonly,
@@ -1659,53 +2211,33 @@ function createDefaultAdornmentRenderer(options) {
       var adornment = props.adornment,
         designMode = props.designMode,
         dataContext = props.dataContext,
-        useExpr = props.useExpr;
+        runExpression = props.runExpression;
       return {
         apply: function apply(rl) {
-          if (schemas.isSetFieldAdornment(adornment) && useExpr) {
-            var setFieldWrapper = function setFieldWrapper(_ref3) {
-              var children = _ref3.children,
-                adornment = _ref3.adornment,
-                parentContext = _ref3.parentContext;
-              var _dynamicHooks = dynamicHooks(parentContext),
-                value = _dynamicHooks.value;
-              var fieldNode = schemas.schemaDataForFieldRef(adornment.field, parentContext.parentNode);
-              var otherField = fieldNode.control;
-              var always = !adornment.defaultOnly;
-              core.useControlEffect(function () {
-                return [value == null ? void 0 : value.value, (otherField == null ? void 0 : otherField.value) == null];
-              }, function (_ref4) {
-                var v = _ref4[0];
-                otherField == null || otherField.setValue(function (x) {
-                  return always || x == null ? v : x;
-                });
-              }, true);
-              return children;
-            };
-            var hook = useExpr(adornment.expression, function (x) {
-              return x;
-            });
-            var dynamicHooks = schemas.useDynamicHooks({
-              value: hook
-            });
-            var SetFieldWrapper = core.useTrackedComponent(setFieldWrapper, [dynamicHooks]);
+          if (schemas.isSetFieldAdornment(adornment) && runExpression) {
             return schemas.wrapLayout(function (x) {
-              return React.createElement(SetFieldWrapper, {
+              return /*#__PURE__*/jsxRuntime.jsx(SetFieldWrapper, {
                 children: x,
                 parentContext: dataContext,
-                adornment: adornment
+                adornment: adornment,
+                runExpression: runExpression
               });
             })(rl);
           }
           if (schemas.isIconAdornment(adornment)) {
-            var _adornment$placement;
-            return schemas.appendMarkupAt((_adornment$placement = adornment.placement) != null ? _adornment$placement : schemas.AdornmentPlacement.ControlStart, React.createElement("i", {
-              className: adornment.iconClass
+            var I = renderers.html.I;
+            var icon = adornment.icon,
+              placement = adornment.placement,
+              iconClass = adornment.iconClass;
+            return schemas.appendMarkupAt(placement != null ? placement : schemas.AdornmentPlacement.ControlStart, /*#__PURE__*/jsxRuntime.jsx(I, {
+              className: iconClass,
+              iconName: icon == null ? void 0 : icon.name,
+              iconLibrary: icon == null ? void 0 : icon.library
             }))(rl);
           }
           if (schemas.isAccordionAdornment(adornment)) {
             return schemas.wrapLayout(function (x) {
-              return React.createElement(DefaultAccordion, _extends({
+              return /*#__PURE__*/jsxRuntime.jsx(DefaultAccordion, _extends({
                 renderers: renderers,
                 children: x,
                 accordion: adornment,
@@ -1723,6 +2255,27 @@ function createDefaultAdornmentRenderer(options) {
     }
   };
 }
+function SetFieldWrapper(_ref2) {
+  var children = _ref2.children,
+    adornment = _ref2.adornment,
+    parentContext = _ref2.parentContext,
+    runExpression = _ref2.runExpression;
+  var fieldNode = schemas.schemaDataForFieldRef(adornment.field, parentContext.parentNode);
+  var otherField = fieldNode.control;
+  var always = !adornment.defaultOnly;
+  var value = schemas.useExpression(undefined, runExpression, adornment.expression, function (x) {
+    return x;
+  });
+  core.useControlEffect(function () {
+    return [value == null ? void 0 : value.value, (otherField == null ? void 0 : otherField.value) == null];
+  }, function (_ref3) {
+    var v = _ref3[0];
+    otherField == null || otherField.setValue(function (x) {
+      return always || x == null ? v : x;
+    });
+  }, true);
+  return children;
+}
 function createDefaultLabelRenderer(options) {
   var _labelContainer$optio = _extends({
       labelContainer: function labelContainer(c) {
@@ -1730,27 +2283,159 @@ function createDefaultLabelRenderer(options) {
       }
     }, options),
     className = _labelContainer$optio.className,
+    controlLabelTextClass = _labelContainer$optio.controlLabelTextClass,
+    groupLabelTextClass = _labelContainer$optio.groupLabelTextClass,
     groupLabelClass = _labelContainer$optio.groupLabelClass,
     controlLabelClass = _labelContainer$optio.controlLabelClass,
+    textClass = _labelContainer$optio.textClass,
     labelContainer = _labelContainer$optio.labelContainer;
   return {
     render: function render(props, labelStart, labelEnd, renderers) {
       var _options$requiredElem;
-      var h = renderers.h;
-      var requiredElement = (_options$requiredElem = options == null ? void 0 : options.requiredElement) != null ? _options$requiredElem : function (h) {
-        return h("span", null, " *");
+      var _renderers$html = renderers.html,
+        Label = _renderers$html.Label,
+        Span = _renderers$html.Span;
+      var requiredElement = (_options$requiredElem = options == null ? void 0 : options.requiredElement) != null ? _options$requiredElem : function (_ref4) {
+        var Span = _ref4.Span;
+        return /*#__PURE__*/jsxRuntime.jsx(Span, {
+          children: " *"
+        });
       };
-      if (props.type == schemas.LabelType.Text) return renderers.renderText(props.label);
-      return labelContainer(h(React.Fragment, null, h("label", {
-        htmlFor: props.forId,
-        className: schemas.rendererClass(props.className, clsx__default["default"](className, props.type === schemas.LabelType.Group && groupLabelClass, props.type === schemas.LabelType.Control && controlLabelClass))
-      }, labelStart, renderers.renderLabelText(props.label), props.required && requiredElement(h)), labelEnd));
+      if (props.type == schemas.LabelType.Text) return /*#__PURE__*/jsxRuntime.jsx(Span, {
+        children: props.label
+      });
+      return labelContainer(/*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
+        children: [/*#__PURE__*/jsxRuntime.jsxs(Label, {
+          htmlFor: props.forId,
+          className: schemas.rendererClass(props.className, clsx__default["default"](className, props.type === schemas.LabelType.Group && groupLabelClass, props.type === schemas.LabelType.Control && controlLabelClass)),
+          textClass: schemas.rendererClass(props.textClass, clsx__default["default"](textClass, props.type === schemas.LabelType.Group && groupLabelTextClass, props.type === schemas.LabelType.Control && controlLabelTextClass)),
+          children: [labelStart, renderers.renderLabelText(props.label), props.required && requiredElement(renderers.html)]
+        }), labelEnd]
+      }));
     },
     type: "label"
   };
 }
+var StandardHtmlComponents = {
+  Button: DefaultHtmlButtonRenderer,
+  Label: DefaultHtmlLabelRenderer,
+  I: DefaultHtmlIconRenderer,
+  Span: "span",
+  Div: DefaultHtmlDivRenderer,
+  H1: "h1",
+  B: "b",
+  Input: DefaultHtmlInputRenderer
+};
+function DefaultHtmlButtonRenderer(_ref5) {
+  var _effect = core.useComponentTracking();
+  try {
+    var inline = _ref5.inline,
+      textClass = _ref5.textClass,
+      className = _ref5.className,
+      notWrapInText = _ref5.notWrapInText,
+      androidRippleColor = _ref5.androidRippleColor,
+      onClick = _ref5.onClick,
+      nonTextContent = _ref5.nonTextContent,
+      props = _objectWithoutPropertiesLoose(_ref5, _excluded);
+    var Comp = nonTextContent ? "div" : "button";
+    return /*#__PURE__*/jsxRuntime.jsx(Comp, _extends({
+      role: nonTextContent ? "button" : undefined,
+      onClick: onClick ? function (e) {
+        e.stopPropagation();
+        onClick();
+      } : undefined,
+      className: nonTextContent ? className : clsx__default["default"](className, textClass)
+    }, props));
+  } finally {
+    _effect();
+  }
+}
+function DefaultHtmlInputRenderer(_ref6) {
+  var _effect2 = core.useComponentTracking();
+  try {
+    var textClass = _ref6.textClass,
+      className = _ref6.className,
+      onChangeValue = _ref6.onChangeValue,
+      onChangeChecked = _ref6.onChangeChecked,
+      inputRef = _ref6.inputRef,
+      props = _objectWithoutPropertiesLoose(_ref6, _excluded2);
+    return /*#__PURE__*/jsxRuntime.jsx("input", _extends({
+      ref: inputRef
+    }, props, {
+      className: clsx__default["default"](className, textClass),
+      onChange: onChangeValue ? function (e) {
+        return onChangeValue(e.target.value);
+      } : onChangeChecked ? function (e) {
+        return onChangeChecked(e.target.checked);
+      } : undefined
+    }));
+  } finally {
+    _effect2();
+  }
+}
+function DefaultHtmlDivRenderer(_ref7) {
+  var _effect3 = core.useComponentTracking();
+  try {
+    var text = _ref7.text,
+      html = _ref7.html,
+      children = _ref7.children,
+      className = _ref7.className,
+      textClass = _ref7.textClass,
+      nativeRef = _ref7.nativeRef,
+      inline = _ref7.inline,
+      props = _objectWithoutPropertiesLoose(_ref7, _excluded3);
+    var Tag = inline ? "span" : "div";
+    return /*#__PURE__*/jsxRuntime.jsx(Tag, _extends({}, props, {
+      ref: nativeRef,
+      className: clsx__default["default"](className, textClass),
+      children: text != null ? text : children,
+      dangerouslySetInnerHTML: html ? {
+        __html: html
+      } : undefined
+    }));
+  } finally {
+    _effect3();
+  }
+}
+function DefaultHtmlLabelRenderer(_ref8) {
+  var _effect4 = core.useComponentTracking();
+  try {
+    var textClass = _ref8.textClass,
+      className = _ref8.className,
+      props = _objectWithoutPropertiesLoose(_ref8, _excluded4);
+    return /*#__PURE__*/jsxRuntime.jsx("label", _extends({}, props, {
+      className: clsx__default["default"](className, textClass)
+    }));
+  } finally {
+    _effect4();
+  }
+}
+function DefaultHtmlIconRenderer(_ref9) {
+  var _effect5 = core.useComponentTracking();
+  try {
+    var toIconClass = function toIconClass() {
+      if (!iconName) return undefined;
+      switch (iconLibrary) {
+        case schemas.IconLibrary.FontAwesome:
+          return "fa fa-" + iconName;
+        default:
+          return iconName;
+      }
+    };
+    var iconName = _ref9.iconName,
+      iconLibrary = _ref9.iconLibrary,
+      className = _ref9.className,
+      style = _ref9.style;
+    return iconName ? /*#__PURE__*/jsxRuntime.jsx("i", {
+      className: clsx__default["default"](className, toIconClass()),
+      style: style
+    }) : undefined;
+  } finally {
+    _effect5();
+  }
+}
 function createDefaultRenderers(options) {
-  var _options$renderText, _options$h;
+  var _options$extraRendere, _options$html;
   if (options === void 0) {
     options = {};
   }
@@ -1764,10 +2449,8 @@ function createDefaultRenderers(options) {
     adornment: createDefaultAdornmentRenderer(options.adornment),
     renderLayout: createDefaultLayoutRenderer(options.layout),
     visibility: createDefaultVisibilityRenderer(),
-    renderText: (_options$renderText = options.renderText) != null ? _options$renderText : function (x) {
-      return x;
-    },
-    h: (_options$h = options.h) != null ? _options$h : React.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() {
@@ -1782,7 +2465,7 @@ function createClassStyledRenderers() {
       className: "control-array"
     },
     action: {
-      className: "action"
+      buttonClass: "action"
     },
     data: {
       inputClass: "data"
@@ -1797,10 +2480,12 @@ function createClassStyledRenderers() {
 var defaultTailwindTheme = {
   label: {
     groupLabelClass: "font-bold",
-    requiredElement: function requiredElement(h) {
-      return h("span", {
-        className: "text-red-500"
-      }, " *");
+    requiredElement: function requiredElement(_ref) {
+      var Span = _ref.Span;
+      return /*#__PURE__*/jsxRuntime.jsx(Span, {
+        className: "text-red-500",
+        children: " *"
+      });
     }
   },
   array: {
@@ -1811,8 +2496,12 @@ var 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",
@@ -1824,17 +2513,22 @@ var 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>"
@@ -1855,8 +2549,8 @@ var defaultTailwindTheme = {
     accordion: {
       className: "flex items-center gap-2 my-2",
       titleClass: "cursor-pointer",
-      iconOpenClass: "fa fa-chevron-up",
-      iconClosedClass: "fa fa-chevron-down"
+      iconOpen: schemas.fontAwesomeIcon("chevron-up"),
+      iconClosed: schemas.fontAwesomeIcon("chevron-down")
     },
     optional: {
       checkClass: "m-2",
@@ -1875,12 +2569,18 @@ exports.DefaultArrayRenderer = DefaultArrayRenderer;
 exports.DefaultBoolOptions = DefaultBoolOptions;
 exports.DefaultDisplay = DefaultDisplay;
 exports.DefaultDisplayOnly = DefaultDisplayOnly;
+exports.DefaultHtmlButtonRenderer = DefaultHtmlButtonRenderer;
+exports.DefaultHtmlDivRenderer = DefaultHtmlDivRenderer;
+exports.DefaultHtmlIconRenderer = DefaultHtmlIconRenderer;
+exports.DefaultHtmlInputRenderer = DefaultHtmlInputRenderer;
+exports.DefaultHtmlLabelRenderer = DefaultHtmlLabelRenderer;
 exports.DefaultLayout = DefaultLayout;
 exports.DefaultVisibility = DefaultVisibility;
 exports.Fcheckbox = Fcheckbox;
 exports.JsonataRenderer = JsonataRenderer;
 exports.OptionalEditRenderer = OptionalEditRenderer;
 exports.SelectDataRenderer = SelectDataRenderer;
+exports.StandardHtmlComponents = StandardHtmlComponents;
 exports.ValueForFieldExtension = ValueForFieldExtension;
 exports.createAutocompleteRenderer = createAutocompleteRenderer;
 exports.createButtonActionRenderer = createButtonActionRenderer;
@@ -1897,6 +2597,7 @@ exports.createDefaultLabelRenderer = createDefaultLabelRenderer;
 exports.createDefaultLayoutRenderer = createDefaultLayoutRenderer;
 exports.createDefaultRenderers = createDefaultRenderers;
 exports.createDefaultVisibilityRenderer = createDefaultVisibilityRenderer;
+exports.createElementSelectedRenderer = createElementSelectedRenderer;
 exports.createInputConversion = createInputConversion;
 exports.createJsonataRenderer = createJsonataRenderer;
 exports.createNullToggleRenderer = createNullToggleRenderer;
@@ -1905,6 +2606,7 @@ exports.createRadioRenderer = createRadioRenderer;
 exports.createSelectConversion = createSelectConversion;
 exports.createSelectRenderer = createSelectRenderer;
 exports.createValueForFieldRenderer = createValueForFieldRenderer;
+exports.createWizardRenderer = createWizardRenderer;
 exports.defaultTailwindTheme = defaultTailwindTheme;
 exports.getAccordionState = getAccordionState;
 exports.setIncluded = setIncluded;