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

package/lib/index.cjs

@@ -3,46 +3,25 @@ var schemas = require('@react-typed-forms/schemas');
 var jsxRuntime = require('react/jsx-runtime');
 var core = require('@react-typed-forms/core');
 var react = require('react');
-var base = require('@mui/base');
 var ariaBase = require('@astroapps/aria-base');
+var 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 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 /*#__PURE__*/jsxRuntime.jsx(DefaultDisplay, _extends({}, options, props, {
+      return /*#__PURE__*/jsxRuntime.jsx(DefaultDisplay, {
+        options: options,
+        displayProps: props,
         renderer: renderer
-      }));
+      });
     },
     type: "display"
   };
@@ -50,39 +29,45 @@ 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 _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,
-      Span = _renderer$html.Span,
       B = _renderer$html.B,
-      H1 = _renderer$html.H1;
+      H1 = _renderer$html.H1,
+      Span = _renderer$html.Span;
     switch (data.type) {
       case schemas.DisplayDataType.Icon:
+        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:
+        var text = display ? schemas.coerceToString(display.value) : data.text;
         return /*#__PURE__*/jsxRuntime.jsx(Div, {
           style: style,
           className: schemas.rendererClass(className, options.textClassName),
-          children: /*#__PURE__*/jsxRuntime.jsx(Span, {
-            children: display ? schemas.coerceToString(display.value) : data.text
-          })
+          textClass: schemas.rendererClass(textClass, options.textTextClass),
+          text: text,
+          inline: displayProps.inline
         });
       case schemas.DisplayDataType.Html:
         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 /*#__PURE__*/jsxRuntime.jsx(Div, {
@@ -100,8 +85,30 @@ function DefaultDisplay(_ref) {
   }
 }
 
-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 {
@@ -111,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);
     });
@@ -127,11 +135,12 @@ function ControlInput(_ref) {
     });
     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));
@@ -196,7 +205,7 @@ 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 = {};
@@ -238,7 +247,7 @@ 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),
@@ -296,8 +305,8 @@ 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 = {};
@@ -312,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",
@@ -338,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);
         });
@@ -402,8 +413,8 @@ function CheckButtons(_ref) {
                 readOnly: readonly,
                 disabled: disabled,
                 checked: checked,
-                onChange: function onChange(x) {
-                  !readonly && setChecked(control, o, x.target.checked);
+                onChangeChecked: function onChangeChecked(x) {
+                  !readonly && setChecked(control, o, x);
                 }
               }), /*#__PURE__*/jsxRuntime.jsx(Label, {
                 className: classes.labelClass,
@@ -451,7 +462,27 @@ 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,
@@ -459,11 +490,32 @@ function CheckBox(_ref2) {
       renderer = _ref2.renderer,
       options = _ref2.options;
     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: props.control.as(),
+        control: selControl,
         style: props.style,
         className: options.checkClass,
         renderer: renderer
@@ -473,35 +525,58 @@ function CheckBox(_ref2) {
     _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);
+      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);
+      ref = _formControlProps.ref,
+      theseProps = _objectWithoutPropertiesLoose(_formControlProps, _excluded2$1);
     return /*#__PURE__*/jsxRuntime.jsx(Input, _extends({}, theseProps, {
       checked: !!value !== notValue,
-      ref: function ref(r) {
+      inputRef: function inputRef(r) {
         return control.element = r;
       },
-      onChange: function onChange(e) {
+      onChangeChecked: function onChangeChecked(e) {
         control.touched = true;
-        control.value = e.target.checked !== notValue;
+        control.value = e !== notValue;
       },
       type: type
     }, others));
   } finally {
-    _effect3();
+    _effect4();
   }
 }
 
@@ -517,6 +592,7 @@ function createDefaultLayoutRenderer(options) {
       }, options, {
         renderer: renderers
       }))),
+      inline: layout.inline,
       className: schemas.rendererClass(layout.className, options.className),
       style: layout.style,
       divRef: function divRef(e) {
@@ -529,17 +605,15 @@ function DefaultLayout(_ref) {
   var _effect = core.useComponentTracking();
   try {
     var errorClass = _ref.errorClass,
-      _ref$renderer = _ref.renderer,
-      _ref$renderer$html = _ref$renderer.html,
+      _ref$renderer$html = _ref.renderer.html,
       Div = _ref$renderer$html.Div,
       Span = _ref$renderer$html.Span,
-      renderText = _ref$renderer.renderText,
       _ref$renderError = _ref.renderError,
       renderError = _ref$renderError === void 0 ? function (e) {
         return e && /*#__PURE__*/jsxRuntime.jsx(Div, {
           children: /*#__PURE__*/jsxRuntime.jsx(Span, {
             className: errorClass,
-            children: renderText(e)
+            children: e
           })
         });
       } : _ref$renderError,
@@ -563,24 +637,22 @@ 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 : "";
-    var _renderer$html = renderer.html,
-      Div = _renderer$html.Div,
-      Span = _renderer$html.Span;
+      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,
-      children: /*#__PURE__*/jsxRuntime.jsx(Span, {
-        children: text
-      })
+      textClass: textClass,
+      text: text,
+      inline: inline
     });
   } finally {
     _effect();
@@ -596,10 +668,8 @@ function DefaultAccordion(_ref) {
       contentStyle = _ref.contentStyle,
       contentClassName = _ref.contentClassName,
       designMode = _ref.designMode,
-      iconOpenName = _ref.iconOpenName,
-      iconOpenClass = _ref.iconOpenClass,
-      iconClosedName = _ref.iconClosedName,
-      iconClosedClass = _ref.iconClosedClass,
+      iconOpen = _ref.iconOpen,
+      iconClosed = _ref.iconClosed,
       className = _ref.className,
       _ref$renderTitle = _ref.renderTitle,
       renderTitle = _ref$renderTitle === void 0 ? function (t) {
@@ -625,6 +695,7 @@ function DefaultAccordion(_ref) {
       display: "none"
     });
     var title = renderers.renderLabelText(renderTitle(accordion.title, open));
+    var currentIcon = isOpen ? iconOpen : iconClosed;
     var toggler = renderToggler ? renderToggler(open, title) : /*#__PURE__*/jsxRuntime.jsxs(Button, {
       className: className,
       onClick: function onClick() {
@@ -635,9 +706,9 @@ function DefaultAccordion(_ref) {
       children: [/*#__PURE__*/jsxRuntime.jsx(Label, {
         className: titleClass,
         children: title
-      }), /*#__PURE__*/jsxRuntime.jsx(I, {
-        title: isOpen ? iconOpenName : iconClosedName,
-        className: clsx__default["default"](isOpen ? iconOpenClass : iconClosedClass)
+      }), currentIcon && /*#__PURE__*/jsxRuntime.jsx(I, {
+        iconLibrary: currentIcon.library,
+        iconName: currentIcon.name
       })]
     });
     return /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
@@ -655,23 +726,66 @@ 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 /*#__PURE__*/jsxRuntime.jsx(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) {
+  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,
+      labelClass = options.labelClass,
+      tabListClass = options.tabListClass,
+      inactiveClass = options.inactiveClass,
+      activeClass = options.activeClass,
+      contentClass = options.contentClass;
+    var currentTab = tabIndex.value;
+    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", {
@@ -693,54 +807,309 @@ function TabsGroupRenderer(_ref) {
           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 formNode = _ref.formNode,
-      className = _ref.className,
+    var props = _ref.props,
+      renderOptions = _ref.renderOptions,
       options = _ref.options,
-      renderChild = _ref.renderChild,
-      designMode = _ref.designMode,
-      tabOptions = _ref.tabOptions;
-    var tabIndex = core.useControl(0);
-    var tabClass = options.tabClass,
-      labelClass = options.labelClass,
-      tabListClass = options.tabListClass,
-      inactiveClass = options.inactiveClass,
-      activeClass = options.activeClass,
-      contentClass = options.contentClass;
-    var currentTab = tabIndex.value;
-    return designMode ? /*#__PURE__*/jsxRuntime.jsx(jsxRuntime.Fragment, {
-      children: formNode.getChildNodes().map(function (x, i) {
-        return renderTabs([x], i);
+      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
+        });
       })
-    }) : renderTabs(formNode.getChildNodes(), 0);
+    });
+    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,
@@ -756,47 +1125,70 @@ 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 /*#__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;
+      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)),
+      textClass: props.textClass,
       style: style,
-      children: formNode.getChildNodes().map(function (c, i) {
-        return renderChild(i, c);
-      })
+      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 /*#__PURE__*/jsxRuntime.jsx("div", {
-        children: typeof childIndex === "number" && childIndex < childDefinitions.length && childIndex >= 0 && p.renderChild(childIndex, childDefinitions[childIndex])
-      });
-    }, [dynHook.deps]);
-    return /*#__PURE__*/jsxRuntime.jsx(Render, _extends({}, props));
   } finally {
     _effect();
   }
@@ -817,7 +1209,8 @@ 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 () {
       if (v) {
@@ -830,10 +1223,11 @@ function DefaultVisibility(_ref) {
       }
     }, [v == null ? void 0 : v.visible]);
     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
     }) : /*#__PURE__*/jsxRuntime.jsx(jsxRuntime.Fragment, {});
   } finally {
@@ -849,7 +1243,8 @@ function createJsonataRenderer(className) {
       dataNode: p.dataNode,
       dataContext: p.dataContext,
       control: p.control,
-      readonly: p.readonly
+      readonly: p.readonly,
+      runExpression: p.runExpression
     });
   }, {
     renderType: schemas.DataRenderType.Jsonata
@@ -863,18 +1258,21 @@ 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);
+    var rendered = schemas.useExpression("", runExpression, {
+      type: schemas.ExpressionType.Jsonata,
+      expression: renderOptions.expression
+    }, schemas.coerceToString, bindings);
     return /*#__PURE__*/jsxRuntime.jsx("div", {
       className: className,
       dangerouslySetInnerHTML: {
@@ -886,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);
@@ -922,112 +1320,115 @@ 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 /*#__PURE__*/jsxRuntime.jsx(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,
-        html = _ref4.html;
+    render: function render(props, _ref3) {
+      var renderAction = _ref3.renderAction,
+        html = _ref3.html;
       return /*#__PURE__*/jsxRuntime.jsx(DefaultArrayRenderer, _extends({}, props, options, {
         renderAction: renderAction,
         html: html
@@ -1037,7 +1438,7 @@ function createDefaultArrayRenderer(options) {
   };
 }
 function DefaultArrayRenderer(props) {
-  var _effect = core.useComponentTracking();
+  var _effect3 = core.useComponentTracking();
   try {
     var renderElement = props.renderElement,
       className = props.className,
@@ -1083,7 +1484,7 @@ function DefaultArrayRenderer(props) {
       })]
     });
   } finally {
-    _effect();
+    _effect3();
   }
 }
 
@@ -1139,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) {
@@ -1178,7 +1580,8 @@ function SingleAutocomplete(_ref) {
           type: "text"
         }, getInputProps(), {
           placeholder: (_controlClasses$place = controlClasses == null ? void 0 : controlClasses.placeholder) != null ? _controlClasses$place : "",
-          className: inputClass
+          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]",
@@ -1235,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;
@@ -1275,7 +1679,7 @@ function MultipleAutocomplete(_ref3) {
               text: typeof v === "string" ? v : v.name,
               chipContainerClass: chipContainerClass,
               chipCloseButtonClass: chipCloseButtonClass,
-              onDeleteClick: function onDeleteClick() {
+              onDeleteClick: readOnly || disabled ? undefined : function () {
                 var c = selectedOptionsControl.elements.find(function (x) {
                   return x.value == v;
                 });
@@ -1286,7 +1690,8 @@ function MultipleAutocomplete(_ref3) {
             type: "text"
           }, getInputProps(), {
             placeholder: (_controlClasses$place2 = controlClasses == null ? void 0 : controlClasses.placeholder) != null ? _controlClasses$place2 : "",
-            className: clsx__default["default"](inputClass)
+            className: clsx__default["default"](inputClass),
+            readOnly: readOnly
           }))]
         }), /*#__PURE__*/jsxRuntime.jsx("button", _extends({}, getPopupIndicatorProps(), {
           disabled: disabled || readOnly,
@@ -1340,20 +1745,32 @@ 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 ? /*#__PURE__*/jsxRuntime.jsx(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
+      schemaField: schemaField,
+      control: o.control,
+      noOptions: noOptions
     }) : /*#__PURE__*/jsxRuntime.jsx(jsxRuntime.Fragment, {
       children: actualFieldRef ? "No schema node for " + actualFieldRef : ""
     });
@@ -1364,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) {
@@ -1375,18 +1793,24 @@ function ValueForField(_ref) {
       });
     });
     var _useMemo = react.useMemo(function () {
-        var rootSchema = schemas.rootSchemaNode([_extends({}, schema.field, {
+        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 /*#__PURE__*/jsxRuntime.jsx(Render, {});
@@ -1564,18 +1988,18 @@ 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());
+        },
+        children: formNode.getResolvedChildren()
+      });
       var editContent = /*#__PURE__*/jsxRuntime.jsxs("div", {
         className: schemas.rendererClass(dataProps.className, options.className),
         children: [renderChild("", elementGroup, {
-          parentDataNode: parentDataNode,
-          elementIndex: 0
+          parentDataNode: parentDataNode
         }), /*#__PURE__*/jsxRuntime.jsx("div", {
           className: options.actionsClass,
           children: /*#__PURE__*/jsxRuntime.jsx(core.RenderElements, {
@@ -1603,26 +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 Button = renderer.html.Button;
-    var classNames = 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,
-      children: (_options$renderConten = options.renderContent == null ? void 0 : options.renderContent(actionText, actionId, actionData)) != null ? _options$renderConten : renderer.renderText(actionText, classNames)
-    });
+      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
@@ -1631,14 +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 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);
@@ -1648,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,
@@ -1659,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
       };
@@ -1677,11 +2138,12 @@ function createDefaultDataRenderer(options) {
       return _extends({}, p, {
         className: "@ " + schemas.rendererClass(p.className, displayOnlyClass),
         children: /*#__PURE__*/jsxRuntime.jsx(DefaultDisplayOnly, {
-          field: props.field,
+          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
         })
@@ -1711,6 +2173,8 @@ 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;
@@ -1722,6 +2186,7 @@ function createDefaultDataRenderer(options) {
     var placeholder = schemas.isTextfieldRenderer(renderOptions) ? renderOptions.placeholder : undefined;
     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,
@@ -1746,48 +2211,28 @@ 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 /*#__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, /*#__PURE__*/jsxRuntime.jsx("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)) {
@@ -1810,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) {
@@ -1817,24 +2283,32 @@ 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 Label = renderers.html.Label;
-      var requiredElement = (_options$requiredElem = options == null ? void 0 : options.requiredElement) != null ? _options$requiredElem : function (_ref5) {
-        var Span = _ref5.Span;
+      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);
+      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]
       }));
@@ -1843,17 +2317,125 @@ function createDefaultLabelRenderer(options) {
   };
 }
 var StandardHtmlComponents = {
-  Button: "button",
-  Label: "label",
-  I: "i",
+  Button: DefaultHtmlButtonRenderer,
+  Label: DefaultHtmlLabelRenderer,
+  I: DefaultHtmlIconRenderer,
   Span: "span",
-  Div: "div",
+  Div: DefaultHtmlDivRenderer,
   H1: "h1",
   B: "b",
-  Input: "input"
+  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$extraRendere, _options$renderText, _options$html;
+  var _options$extraRendere, _options$html;
   if (options === void 0) {
     options = {};
   }
@@ -1868,9 +2450,6 @@ function createDefaultRenderers(options) {
     renderLayout: createDefaultLayoutRenderer(options.layout),
     visibility: createDefaultVisibilityRenderer(),
     extraRenderers: (_options$extraRendere = options.extraRenderers == null ? void 0 : options.extraRenderers(options)) != null ? _options$extraRendere : [],
-    renderText: (_options$renderText = options.renderText) != null ? _options$renderText : function (x) {
-      return x;
-    },
     html: (_options$html = options.html) != null ? _options$html : StandardHtmlComponents
   };
 }
@@ -1886,7 +2465,7 @@ function createClassStyledRenderers() {
       className: "control-array"
     },
     action: {
-      className: "action"
+      buttonClass: "action"
     },
     data: {
       inputClass: "data"
@@ -1917,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",
@@ -1930,7 +2513,11 @@ 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",
@@ -1941,7 +2528,7 @@ var defaultTailwindTheme = {
     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>"
@@ -1962,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",
@@ -1982,6 +2569,11 @@ 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;
@@ -2005,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;
@@ -2013,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;