@react-typed-forms/schemas-html 4.1.1 → 5.0.0

package/lib/index.cjs

@@ -1,8 +1,8 @@
+var react = require('react');
 var clsx = require('clsx');
 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 ariaBase = require('@astroapps/aria-base');
 var base = require('@mui/base');
 var overlays = require('@react-stately/overlays');
@@ -94,6 +94,9 @@ function _extends() {
     return n;
   }, _extends.apply(null, arguments);
 }
+function _inheritsLoose(t, o) {
+  t.prototype = Object.create(o.prototype), t.prototype.constructor = t, _setPrototypeOf(t, o);
+}
 function _objectDestructuringEmpty(t) {
   if (null == t) throw new TypeError("Cannot destructure " + t);
 }
@@ -101,13 +104,18 @@ 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;
+    if (-1 !== e.indexOf(n)) continue;
     t[n] = r[n];
   }
   return t;
 }
+function _setPrototypeOf(t, e) {
+  return _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function (t, e) {
+    return t.__proto__ = e, t;
+  }, _setPrototypeOf(t, e);
+}
 
-var _excluded$4 = ["control", "convert", "renderer"],
+var _excluded$4 = ["control", "convert", "renderer", "errorId"],
   _excluded2$2 = ["errorText", "value", "onChange", "ref"];
 function ControlInput(_ref) {
   var _effect = core.useComponentTracking();
@@ -118,6 +126,7 @@ function ControlInput(_ref) {
     var control = _ref.control,
       convert = _ref.convert,
       renderer = _ref.renderer,
+      errorId = _ref.errorId,
       props = _objectWithoutPropertiesLoose(_ref, _excluded$4);
     var _formControlProps = core.formControlProps(control),
       errorText = _formControlProps.errorText,
@@ -138,6 +147,8 @@ function ControlInput(_ref) {
       inputRef: ref,
       type: convert[0],
       value: textValue.value,
+      "aria-describedby": !!errorText ? errorId : undefined,
+      "aria-invalid": !!errorText || undefined,
       onChangeValue: function onChangeValue(e) {
         textValue.value = e;
         var converted = convert[1](e);
@@ -211,7 +222,8 @@ function createSelectRenderer(options) {
     options = {};
   }
   return schemas.createDataRenderer(function (props, asArray) {
-    var _props$options;
+    var _props$options, _renderOptions$requir;
+    var renderOptions = props.definition.renderOptions;
     return /*#__PURE__*/jsxRuntime.jsx(SelectDataRenderer, {
       className: schemas.rendererClass(props.className, options.className),
       state: props.control,
@@ -220,7 +232,7 @@ function createSelectRenderer(options) {
       options: (_props$options = props.options) != null ? _props$options : [],
       required: props.required,
       emptyText: options.emptyText,
-      requiredText: options.requiredText,
+      requiredText: (_renderOptions$requir = renderOptions == null ? void 0 : renderOptions.requiredText) != null ? _renderOptions$requir : options.requiredText,
       convert: createSelectConversion(props.field.type)
     });
   }, {
@@ -312,7 +324,7 @@ function createRadioRenderer(options) {
     options = {};
   }
   return schemas.createDataRenderer(function (p, renderer) {
-    return /*#__PURE__*/jsxRuntime.jsx(CheckButtons, _extends({
+    return /*#__PURE__*/jsxRuntime.jsx(renderer.html.CheckButtons, _extends({
       classes: options,
       controlClasses: p.renderOptions
     }, p, {
@@ -338,7 +350,7 @@ function createCheckListRenderer(options) {
     options = {};
   }
   return schemas.createDataRenderer(function (p, renderer) {
-    return /*#__PURE__*/jsxRuntime.jsx(CheckButtons, _extends({
+    return /*#__PURE__*/jsxRuntime.jsx(renderer.html.CheckButtons, _extends({
       classes: options,
       controlClasses: p.renderOptions
     }, p, {
@@ -350,7 +362,7 @@ function createCheckListRenderer(options) {
       setChecked: function setChecked(c, o, checked) {
         c.setTouched(true);
         c.setValue(function (x) {
-          return setIncluded(x != null ? x : [], o.value, checked);
+          return schemas.setIncluded(x != null ? x : [], o.value, checked);
         });
       },
       control: p.control,
@@ -363,85 +375,6 @@ function createCheckListRenderer(options) {
     renderType: schemas.DataRenderType.CheckList
   });
 }
-function CheckButtons(_ref) {
-  var _effect = core.useComponentTracking();
-  try {
-    var control = _ref.control,
-      options = _ref.options,
-      readonly = _ref.readonly,
-      className = _ref.className,
-      id = _ref.id,
-      type = _ref.type,
-      isChecked = _ref.isChecked,
-      setChecked = _ref.setChecked,
-      entryAdornment = _ref.entryAdornment,
-      classes = _ref.classes,
-      _ref$controlClasses = _ref.controlClasses,
-      controlClasses = _ref$controlClasses === void 0 ? {} : _ref$controlClasses,
-      renderer = _ref.renderer;
-    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 /*#__PURE__*/jsxRuntime.jsx(Div, {
-      className: className,
-      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)]
-          });
-        }
-      })
-    });
-  } finally {
-    _effect();
-  }
-}
-function setIncluded(array, elem, included) {
-  var already = array.includes(elem);
-  if (included === already) {
-    return array;
-  }
-  if (included) {
-    return [].concat(array, [elem]);
-  }
-  return array.filter(function (e) {
-    return e !== elem;
-  });
-}
 function createCheckboxRenderer(options) {
   if (options === void 0) {
     options = {};
@@ -482,35 +415,16 @@ function createElementSelectedRenderer(options) {
     renderType: schemas.DataRenderType.ElementSelected
   });
 }
-function CheckBoxSelected(_ref2) {
-  var _effect2 = core.useComponentTracking();
+function CheckBoxSelected(_ref) {
+  var _effect = core.useComponentTracking();
   try {
-    var p = _ref2.p,
-      props = _ref2.props,
-      renderer = _ref2.renderer,
-      options = _ref2.options;
+    var _p$label;
+    var p = _ref.p,
+      props = _ref.props,
+      renderer = _ref.renderer,
+      options = _ref.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);
-      });
-    });
+    var selControl = schemas.useElementSelectedRenderer(props);
     return /*#__PURE__*/jsxRuntime.jsxs(Div, {
       className: schemas.rendererClass(props.className, options.entryClass),
       children: [/*#__PURE__*/jsxRuntime.jsx(Fcheckbox, {
@@ -519,19 +433,19 @@ function CheckBoxSelected(_ref2) {
         style: props.style,
         className: options.checkClass,
         renderer: renderer
-      }), p.label && renderer.renderLabel(p.label, undefined, undefined)]
+      }), ((_p$label = p.label) == null ? void 0 : _p$label.label) && renderer.renderLabel(p.label, undefined, undefined)]
     });
   } finally {
-    _effect2();
+    _effect();
   }
 }
-function CheckBox(_ref3) {
-  var _effect3 = core.useComponentTracking();
+function CheckBox(_ref2) {
+  var _effect2 = core.useComponentTracking();
   try {
-    var p = _ref3.p,
-      props = _ref3.props,
-      renderer = _ref3.renderer,
-      options = _ref3.options;
+    var p = _ref2.p,
+      props = _ref2.props,
+      renderer = _ref2.renderer,
+      options = _ref2.options;
     var Div = renderer.html.Div;
     return /*#__PURE__*/jsxRuntime.jsxs(Div, {
       className: schemas.rendererClass(props.className, options.entryClass),
@@ -544,19 +458,19 @@ function CheckBox(_ref3) {
       }), p.label && renderer.renderLabel(p.label, undefined, undefined)]
     });
   } finally {
-    _effect3();
+    _effect2();
   }
 }
-function Fcheckbox(_ref4) {
-  var _effect4 = core.useComponentTracking();
+function Fcheckbox(_ref3) {
+  var _effect3 = 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 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,
+      renderer = _ref3.renderer,
+      others = _objectWithoutPropertiesLoose(_ref3, _excluded$2);
     var Input = renderer.html.Input;
     var _formControlProps = core.formControlProps(control),
       value = _formControlProps.value,
@@ -576,7 +490,7 @@ function Fcheckbox(_ref4) {
       type: type
     }, others));
   } finally {
-    _effect4();
+    _effect3();
   }
 }
 
@@ -609,9 +523,10 @@ function DefaultLayout(_ref) {
       Div = _ref$renderer$html.Div,
       Span = _ref$renderer$html.Span,
       _ref$renderError = _ref.renderError,
-      renderError = _ref$renderError === void 0 ? function (e) {
+      renderError = _ref$renderError === void 0 ? function (e, errorId) {
         return e && /*#__PURE__*/jsxRuntime.jsx(Div, {
           children: /*#__PURE__*/jsxRuntime.jsx(Span, {
+            id: errorId,
             className: errorClass,
             children: e
           })
@@ -622,11 +537,12 @@ function DefaultLayout(_ref) {
       controlStart = _ref$layout.controlStart,
       label = _ref$layout.label,
       children = _ref$layout.children,
-      errorControl = _ref$layout.errorControl;
+      errorControl = _ref$layout.errorControl,
+      errorId = _ref$layout.errorId;
     var ec = errorControl;
     var errorText = ec && ec.touched ? ec.error : undefined;
     return /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
-      children: [label, controlStart, children, renderError(errorText), controlEnd]
+      children: [label, controlStart, children, renderError(errorText, errorId), controlEnd]
     });
   } finally {
     _effect();
@@ -646,7 +562,8 @@ function DefaultDisplayOnly(_ref) {
       textClass = _ref.textClass,
       inline = _ref.inline,
       state = _ref.state;
-    var text = state.display != null ? state.display : (_ref2 = schemaInterface.isEmptyValue(dataNode.schema.field, dataNode.control.value) ? emptyText : schemaInterface.textValueForData(dataNode)) != null ? _ref2 : "";
+    var display = state.resolved.display;
+    var text = display != null ? display : (_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,
@@ -660,135 +577,24 @@ function DefaultDisplayOnly(_ref) {
   }
 }
 
-function DefaultAccordion(_ref) {
-  var _effect = core.useComponentTracking();
-  try {
-    var _dataContext$dataNode;
-    var children = _ref.children,
-      accordion = _ref.accordion,
-      contentStyle = _ref.contentStyle,
-      contentClassName = _ref.contentClassName,
-      designMode = _ref.designMode,
-      iconOpen = _ref.iconOpen,
-      iconClosed = _ref.iconClosed,
-      className = _ref.className,
-      _ref$renderTitle = _ref.renderTitle,
-      renderTitle = _ref$renderTitle === void 0 ? function (t) {
-        return t;
-      } : _ref$renderTitle,
-      renderToggler = _ref.renderToggler,
-      renderers = _ref.renderers,
-      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) {
-      dataControl.meta.accordionState = open;
-    }
-    var isOpen = open.value;
-    var fullContentStyle = isOpen || designMode ? contentStyle : _extends({}, contentStyle, {
-      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() {
-        return open.setValue(function (x) {
-          return !x;
-        });
-      },
-      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();
-  }
-}
-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(VisibleChildrenRenderer, {
-      render: renderAllTabs,
-      dataContext: p.dataContext,
-      parentFormNode: p.formNode,
-      parent: p,
-      props: {
-        groupProps: p,
-        tabOptions: p.renderOptions,
-        options: options
-      }
+    return /*#__PURE__*/jsxRuntime.jsx(TabsRenderer, {
+      groupProps: p,
+      tabOptions: p.renderOptions,
+      options: options
     });
   }, {
     renderType: schemas.GroupRenderType.Tabs
   });
-  function renderAllTabs(_ref, isVisible) {
-    var _tabIndex$value;
-    var options = _ref.options,
-      _ref$groupProps = _ref.groupProps,
-      designMode = _ref$groupProps.designMode,
-      formNode = _ref$groupProps.formNode,
-      className = _ref$groupProps.className,
-      renderChild = _ref$groupProps.renderChild,
-      state = _ref$groupProps.state,
-      tabOptions = _ref.tabOptions;
-    var tabIndex = state.meta.fields.tabIndex.as();
-    var tabClass = options.tabClass,
-      labelClass = options.labelClass,
-      tabListClass = options.tabListClass,
-      inactiveClass = options.inactiveClass,
-      activeClass = options.activeClass,
-      contentClass = options.contentClass;
-    var currentTab = (_tabIndex$value = tabIndex.value) != null ? _tabIndex$value : 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) {
+}
+function TabsRenderer(_ref) {
+  var _effect = core.useComponentTracking();
+  try {
+    var renderTabs = function renderTabs(tabs, key) {
       return /*#__PURE__*/jsxRuntime.jsxs("div", {
         className: schemas.rendererClass(className, options.className),
         children: [/*#__PURE__*/jsxRuntime.jsx("ul", {
@@ -807,58 +613,116 @@ function createTabsRenderer(options) {
           })
         }), /*#__PURE__*/jsxRuntime.jsx("div", {
           className: schemas.rendererClass(tabOptions.contentClass, contentClass),
-          children: renderChild(currentTab, tabs[currentTab])
+          children: renderChild(tabs[currentTab])
         })]
       }, key);
-    }
+    };
+    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);
+    react.useEffect(function () {
+      formNode.attachUi(new TabUi(tabIndex, formNode));
+    }, [formNode, tabIndex]);
+    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.children.map(function (x, i) {
+        return renderTabs([x], i);
+      })
+    }) : renderTabs(formNode.children.filter(function (x, i) {
+      return x.visible;
+    }), 0);
+  } finally {
+    _effect();
   }
 }
+var TabUi = /*#__PURE__*/function (_DefaultFormNodeUi) {
+  function TabUi(tabIndex, node) {
+    var _this;
+    _this = _DefaultFormNodeUi.call(this, node) || this;
+    _this.tabIndex = void 0;
+    _this.tabIndex = tabIndex;
+    return _this;
+  }
+  _inheritsLoose(TabUi, _DefaultFormNodeUi);
+  var _proto = TabUi.prototype;
+  _proto.ensureChildVisible = function ensureChildVisible(childIndex) {
+    this.tabIndex.value = childIndex;
+    _DefaultFormNodeUi.prototype.ensureChildVisible.call(this, childIndex);
+  };
+  return TabUi;
+}(schemas.DefaultFormNodeUi);
 
 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
+    return /*#__PURE__*/jsxRuntime.jsx(GridRenderer, {
+      groupProps: props,
+      formRenderer: formRenderer,
+      options: options
     });
   }, {
     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);
+}
+function GridRenderer(props) {
+  var _effect = core.useComponentTracking();
+  try {
+    var _props$options, _ref, _gridOptions$columns;
+    var _props$groupProps = props.groupProps,
+      formNode = _props$groupProps.formNode,
+      renderOptions = _props$groupProps.renderOptions,
+      renderChild = _props$groupProps.renderChild,
+      className = _props$groupProps.className;
+    var filteredChildren = formNode.children.filter(function (x, i) {
+      return x.visible;
     });
     var Div = props.formRenderer.html.Div;
-    var defaults = (_props$defaultOptions = props.defaultOptions) != null ? _props$defaultOptions : {};
-    var gridOptions = props.renderOptions;
+    var defaults = (_props$options = props.options) != null ? _props$options : {};
+    var gridOptions = 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);
+    var allChildren = filteredChildren.map(function (x) {
+      return renderChild(x);
     });
+    var cellClass = gridOptions.cellClass ? getCellClassNames(gridOptions.cellClass) : getCellClassNames(defaults.cellClass);
     // 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),
+      className: schemas.rendererClass(className, defaults.className),
       children: rows.map(function (row, rowIndex) {
         return /*#__PURE__*/jsxRuntime.jsx(Div, {
           className: schemas.rendererClass(gridOptions.rowClass, defaults.rowClass),
-          children: row
+          children: row.map(function (cell, cellIndex) {
+            var _cellClass$at;
+            return /*#__PURE__*/jsxRuntime.jsx(Div, {
+              className: (_cellClass$at = cellClass == null ? void 0 : cellClass.at(cellIndex)) != null ? _cellClass$at : "flex-1",
+              children: cell
+            }, cellIndex);
+          })
         }, rowIndex);
       })
     });
+  } finally {
+    _effect();
   }
 }
+function getCellClassNames(cellClass) {
+  return cellClass == null ? void 0 : cellClass.split(",");
+}
 
-var defaultOptions = {
+var defaultOptions$1 = {
   classes: {
     className: undefined,
     contentClass: "min-h-96 overflow-auto",
@@ -890,136 +754,135 @@ function defaultNavigationRender(_ref) {
 }
 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
+    return /*#__PURE__*/jsxRuntime.jsx(WizardRenderer, {
+      groupProps: props,
+      formRenderer: formRenderer,
+      options: options
     });
   }, {
     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);
+function WizardRenderer(_ref2) {
+  var _effect = core.useComponentTracking();
+  try {
+    var countVisibleUntil = function countVisibleUntil(untilPage) {
+      var count = 0;
+      for (var i = 0; i < untilPage && i < childrenLength; i++) {
+        if (formNode.getChild(i).visible) {
+          count++;
+        }
       }
-    }
-  });
-  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;
+    };
+    var nav = function nav(dir, validate) {
+      if (validate && !_validatePage()) {
+        return;
       }
-    }
-    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;
+      var next = nextVisibleInDirection(dir);
+      if (next != null) {
+        page.value = 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;
+    };
+    var nextVisibleInDirection = function nextVisibleInDirection(dir) {
+      var next = currentPage + dir;
+      while (next >= 0 && next < childrenLength) {
+        if (formNode.getChild(next).visible) {
+          return next;
+        }
+        next += dir;
+      }
+      return null;
+    };
+    var _validatePage = function _validatePage() {
+      var pageNode = formNode.getChild(currentPage);
+      if (pageNode) {
+        var valid = pageNode.validate();
+        pageNode.setTouched(true);
+        return valid;
+      }
+      return false;
+    };
+    var isPageValid = function isPageValid() {
+      return formNode.getChild(currentPage).valid;
+    };
+    var props = _ref2.groupProps,
+      formRenderer = _ref2.formRenderer,
+      options = _ref2.options;
+    var mergedOptions = schemas.deepMerge(options != null ? options : {}, defaultOptions$1);
+    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 formNode = props.formNode,
+      designMode = props.designMode,
+      renderChild = props.renderChild;
+    var Div = formRenderer.html.Div;
+    var childrenLength = formNode.getChildCount();
+    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: !designMode && nextVisibleInDirection(1) == null,
+      disabled: !isValid.value,
+      icon: nextIcon,
+      iconPlacement: schemas.IconPlacement.AfterText
     });
-    return !hasErrors;
+    var prev = schemas.createAction("nav", function () {
+      return nav(-1, prevValidate);
+    }, prevText, {
+      disabled: !designMode && nextVisibleInDirection(-1) == null,
+      icon: prevIcon
+    });
+    var navElement = renderNavigation({
+      formRenderer: formRenderer,
+      page: countVisibleUntil(currentPage),
+      totalPages: countVisibleUntil(childrenLength),
+      prev: prev,
+      next: next,
+      className: navContainerClass,
+      validatePage: function validatePage() {
+        try {
+          return Promise.resolve(_validatePage());
+        } catch (e) {
+          return Promise.reject(e);
+        }
+      }
+    });
+    var content = designMode ? /*#__PURE__*/jsxRuntime.jsx(Div, {
+      children: formNode.children.map(function (child) {
+        return renderChild(child);
+      })
+    }) : currentPage < childrenLength ? /*#__PURE__*/jsxRuntime.jsx(Div, {
+      className: contentClass,
+      children: renderChild(formNode.getChild(currentPage))
+    }) : /*#__PURE__*/jsxRuntime.jsx(react.Fragment, {});
+    return /*#__PURE__*/jsxRuntime.jsxs(Div, {
+      className: schemas.rendererClass(props.className, className),
+      children: [content, navElement]
+    });
+  } finally {
+    _effect();
   }
 }
 
 var defaultDialogOptions = {
   classes: {
     className: "",
-    titleClass: "text-2xl font-bold"
+    titleClass: "text-2xl font-bold",
+    containerClass: "relative m-4 p-4 min-w-[400px] max-w-[80%] rounded-lg bg-white shadow-sm"
   }
 };
 function createDialogRenderer(options) {
@@ -1056,7 +919,8 @@ function DefaultDialogRenderer(_ref) {
     var _deepMerge = schemas.deepMerge(options, defaultDialogOptions),
       _deepMerge$classes = _deepMerge.classes,
       titleClass = _deepMerge$classes.titleClass,
-      className = _deepMerge$classes.className;
+      className = _deepMerge$classes.className,
+      containerClass = _deepMerge$classes.containerClass;
     var open = core.useControl(false);
     var overlayState = ariaBase.createOverlayState(open);
     var actionOnClick = function actionOnClick(action) {
@@ -1071,29 +935,31 @@ function DefaultDialogRenderer(_ref) {
           };
       }
     };
-    var triggerChildren = props.formNode.getChildNodes().filter(function (x) {
+    var allChildren = props.formNode.children;
+    var triggerChildren = allChildren.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) {
+      children: allChildren.filter(function (x) {
         return !x.definition.placement || x.definition.placement === "dialog";
       }).map(function (x, i) {
-        return props.renderChild(i, x, {
+        return props.renderChild(x, {
           actionOnClick: actionOnClick
         });
       })
     });
     return /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
       children: [triggerChildren.map(function (x, i) {
-        return props.renderChild(i, x, {
+        return props.renderChild(x, {
           actionOnClick: actionOnClick
         });
       }), props.designMode ? designContent() : open.value && /*#__PURE__*/jsxRuntime.jsx(ariaBase.Modal, {
         state: overlayState,
         isDismissable: true,
+        containerClass: containerClass,
         children: dialogContent
       })]
     });
@@ -1102,11 +968,152 @@ function DefaultDialogRenderer(_ref) {
   }
 }
 
-function createDefaultGroupRenderer(options) {
+function DefaultAccordion(_ref) {
+  var _effect = core.useComponentTracking();
+  try {
+    var _dataContext$dataNode;
+    var openCtrl = _ref.openCtrl,
+      children = _ref.children,
+      contentStyle = _ref.contentStyle,
+      className = _ref.className,
+      contentClassName = _ref.contentClassName,
+      designMode = _ref.designMode,
+      renderers = _ref.renderers,
+      dataContext = _ref.dataContext,
+      title = _ref.title,
+      options = _ref.options,
+      defaultExpanded = _ref.defaultExpanded,
+      isGroup = _ref.isGroup,
+      titleTextClass = _ref.titleTextClass;
+    var _ref2 = options != null ? options : {},
+      iconOpen = _ref2.iconOpen,
+      iconClosed = _ref2.iconClosed,
+      togglerClass = _ref2.togglerClass,
+      _ref2$renderTitle = _ref2.renderTitle,
+      renderTitle = _ref2$renderTitle === void 0 ? function (t) {
+        return t;
+      } : _ref2$renderTitle,
+      renderToggler = _ref2.renderToggler,
+      useCss = _ref2.useCss;
+    var panelId = react.useId();
+    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(!!defaultExpanded, {
+      use: openCtrl
+    });
+    if (dataControl && !dataControl.meta.accordionState) {
+      dataControl.meta.accordionState = open;
+    }
+    var isOpen = open.value;
+    var fullContentStyle = isOpen || designMode ? contentStyle : _extends({}, contentStyle, {
+      display: "none"
+    });
+    var currentIcon = isOpen ? iconOpen : iconClosed;
+    var accordionClassName = schemas.rendererClass(className, options == null ? void 0 : options.className);
+    var accordionTitleTextClass = schemas.rendererClass(titleTextClass, options == null ? void 0 : options.titleTextClass);
+    var accordionTitle = isGroup ? title : /*#__PURE__*/jsxRuntime.jsx(Label, {
+      textClass: accordionTitleTextClass,
+      children: title
+    });
+    var toggler = renderToggler ? renderToggler(open, renderTitle(title, open)) : /*#__PURE__*/jsxRuntime.jsxs(Button, {
+      className: accordionClassName,
+      notWrapInText: true,
+      onClick: function onClick() {
+        return open.setValue(function (x) {
+          return !x;
+        });
+      },
+      "aria-expanded": isOpen,
+      "aria-controls": panelId,
+      children: [accordionTitle, currentIcon && /*#__PURE__*/jsxRuntime.jsx(I, {
+        className: togglerClass,
+        iconLibrary: currentIcon.library,
+        iconName: currentIcon.name
+      })]
+    });
+    // The content class name not currently used since if the content is wrapped in a group, the group will handle the styling
+    return /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
+      children: [toggler, (useCss || isOpen || designMode) && /*#__PURE__*/jsxRuntime.jsx(Div, {
+        id: panelId,
+        role: "region",
+        style: fullContentStyle,
+        className: contentClassName,
+        children: children
+      })]
+    });
+  } finally {
+    _effect();
+  }
+}
+function getAccordionState(c) {
+  return c.meta.accordionState;
+}
+function createAccordionGroupRenderer(options) {
+  return schemas.createGroupRenderer(function (p, renderer) {
+    return /*#__PURE__*/jsxRuntime.jsx(AccordionGroupRenderer, {
+      groupProps: p,
+      renderer: renderer,
+      options: options
+    });
+  }, {
+    renderType: schemas.GroupRenderType.Accordion
+  });
+}
+function AccordionGroupRenderer(_ref3) {
+  var _effect2 = core.useComponentTracking();
+  try {
+    var groupProps = _ref3.groupProps,
+      renderer = _ref3.renderer,
+      options = _ref3.options;
+    var allChildren = groupProps.formNode.children;
+    var titleChildren = allChildren.filter(function (x) {
+      return x.definition.placement === "title";
+    });
+    var contentChildren = allChildren.filter(function (x) {
+      return x.definition.placement !== "title";
+    });
+    var _groupProps$renderOpt = groupProps.renderOptions,
+      expandStateField = _groupProps$renderOpt.expandStateField,
+      defaultExpanded = _groupProps$renderOpt.defaultExpanded;
+    var expandStateFieldNode = expandStateField ? schemas.schemaDataForFieldRef(expandStateField, groupProps.dataContext.parentNode) : null;
+    var open = expandStateFieldNode == null ? void 0 : expandStateFieldNode.control.as();
+    return /*#__PURE__*/jsxRuntime.jsx(DefaultAccordion, {
+      openCtrl: open,
+      isGroup: true,
+      options: options,
+      children: /*#__PURE__*/jsxRuntime.jsx(jsxRuntime.Fragment, {
+        children: contentChildren.map(function (x) {
+          return groupProps.renderChild(x);
+        })
+      }),
+      title: /*#__PURE__*/jsxRuntime.jsx(jsxRuntime.Fragment, {
+        children: titleChildren.map(function (x) {
+          return groupProps.renderChild(x);
+        })
+      }),
+      renderers: renderer,
+      className: groupProps.className,
+      dataContext: groupProps.dataContext,
+      designMode: groupProps.designMode,
+      defaultExpanded: defaultExpanded,
+      contentStyle: groupProps.style
+    });
+  } finally {
+    _effect2();
+  }
+}
+
+function createDefaultGroupRenderer(options, adornmentOptions) {
+  var _options$accordion;
   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 accordionRenderer = createAccordionGroupRenderer((_options$accordion = options == null ? void 0 : options.accordion) != null ? _options$accordion : adornmentOptions == null ? void 0 : adornmentOptions.accordion);
   var _ref = options != null ? options : {},
     className = _ref.className,
     standardClassName = _ref.standardClassName,
@@ -1131,10 +1138,14 @@ function createDefaultGroupRenderer(options) {
     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.isAccordionRenderer(renderOptions)) return accordionRenderer.render(props, renderer);
     if (schemas.isSelectChildRenderer(renderOptions) && !props.designMode) {
-      return /*#__PURE__*/jsxRuntime.jsx(SelectChildGroupRenderer, _extends({}, props, {
-        renderOptions: renderOptions
-      }));
+      return /*#__PURE__*/jsxRuntime.jsx(SelectChildGroupRenderer, {
+        props: _extends({}, props, {
+          renderOptions: renderOptions
+        }),
+        renderer: renderer
+      });
     }
     var _ref2 = schemas.isFlexRenderer(renderOptions) ? flexStyles(renderOptions) : schemas.isInlineRenderer(renderOptions) ? {
         className: inlineClass
@@ -1145,8 +1156,8 @@ function createDefaultGroupRenderer(options) {
       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, {
+    var children = formNode.children.map(function (c, i) {
+      return renderChild(c, {
         inline: inline
       });
     });
@@ -1162,8 +1173,8 @@ function createDefaultGroupRenderer(options) {
     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);
+      var children = formNode.children.map(function (c) {
+        return renderChild(c);
       });
       return function (layout) {
         return _extends({}, layout, {
@@ -1179,18 +1190,21 @@ function createDefaultGroupRenderer(options) {
     render: renderLayout
   };
 }
-function SelectChildGroupRenderer(props) {
+function SelectChildGroupRenderer(_ref3) {
   var _effect = core.useComponentTracking();
   try {
+    var props = _ref3.props,
+      renderer = _ref3.renderer;
+    var Div = renderer.html.Div;
     var runExpression = props.runExpression,
       renderOptions = props.renderOptions;
     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 childCount = props.formNode.getChildCount();
+    return /*#__PURE__*/jsxRuntime.jsx(Div, {
+      children: typeof childIndex === "number" && childIndex < childCount && childIndex >= 0 && props.renderChild(props.formNode.getChild(childIndex))
     });
   } finally {
     _effect();
@@ -1263,15 +1277,14 @@ function JsonataRenderer(_ref) {
       dataContext = _ref.dataContext,
       dataNode = _ref.dataNode,
       runExpression = _ref.runExpression;
-    var sdn = dataNode.elementIndex != null ? dataNode : dataContext.parentNode;
-    var bindings = core.useComputed(function () {
-      return _extends({}, dataContext.variables, {
-        value: control.value,
+    var bindings = function bindings(changes) {
+      return {
+        value: core.trackedValue(control, changes),
         readonly: readonly,
         disabled: control.disabled,
         dataPath: schemas.getJsonPath(dataNode)
-      });
-    });
+      };
+    };
     var rendered = schemas.useExpression("", runExpression, {
       type: schemas.ExpressionType.Jsonata,
       expression: renderOptions.expression
@@ -1329,11 +1342,6 @@ function createDefaultArrayDataRenderer(defaultActions) {
 function DataArrayRenderer(_ref) {
   var _effect = core.useComponentTracking();
   try {
-    var renderChildElement = function renderChildElement(i, elementNode) {
-      return renderChild(elementNode.control.uniqueId, childNode, {
-        parentDataNode: elementNode
-      });
-    };
     var dataProps = _ref.dataProps,
       renderers = _ref.renderers,
       defaultActions = _ref.defaultActions;
@@ -1348,36 +1356,18 @@ function DataArrayRenderer(_ref) {
       className = dataProps.className,
       style = dataProps.style,
       dataContext = dataProps.dataContext,
-      formNode = dataProps.formNode,
-      getChildState = dataProps.getChildState;
+      formNode = dataProps.formNode;
     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, {
+      editExternal = _mergeObjects.editExternal,
+      childOverrideClass = _mergeObjects.childOverrideClass;
+    var arrayProps = _extends({}, schemas.createArrayActions(control.as(), function () {
+      return formNode.getChildCount();
+    }, field, {
       addText: addText,
       removeText: removeText,
       noAdd: noAdd,
@@ -1387,19 +1377,11 @@ function DataArrayRenderer(_ref) {
       designMode: designMode,
       editExternal: editExternal
     }), {
+      childOverrideClass: childOverrideClass,
       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;
-            });
-          }
-        });
+        var n = formNode.getChild(i);
+        return !n || !n.visible ? undefined : wrap(n.childKey, renderChild(n));
       },
       className: className ? className : undefined,
       style: style
@@ -1409,29 +1391,11 @@ function DataArrayRenderer(_ref) {
     _effect();
   }
 }
-/**
- * @trackControls
- */
-function RenderEntry(_ref2) {
-  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, _ref3) {
-      var renderAction = _ref3.renderAction,
-        html = _ref3.html;
+    render: function render(props, _ref2) {
+      var renderAction = _ref2.renderAction,
+        html = _ref2.html;
       return /*#__PURE__*/jsxRuntime.jsx(DefaultArrayRenderer, _extends({}, props, options, {
         renderAction: renderAction,
         html: html
@@ -1441,16 +1405,17 @@ function createDefaultArrayRenderer(options) {
   };
 }
 function DefaultArrayRenderer(props) {
-  var _effect3 = core.useComponentTracking();
+  var _effect2 = core.useComponentTracking();
   try {
     var renderElement = props.renderElement,
       className = props.className,
       removableClass = props.removableClass,
       childClass = props.childClass,
       removableChildClass = props.removableChildClass,
+      childOverrideClass = props.childOverrideClass,
       removeActionClass = props.removeActionClass,
       addActionClass = props.addActionClass,
-      arrayControl = props.arrayControl,
+      getElementCount = props.getElementCount,
       renderAction = props.renderAction,
       style = props.style,
       editAction = props.editAction,
@@ -1462,24 +1427,27 @@ function DefaultArrayRenderer(props) {
       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: Array.from({
+          length: getElementCount()
+        }, function (_, x) {
+          return /*#__PURE__*/jsxRuntime.jsx(core.RenderControl, {
+            render: function render() {
+              return renderElement(x, function (key, children) {
+                return removeAction || editAction ? /*#__PURE__*/jsxRuntime.jsxs(react.Fragment, {
+                  children: [/*#__PURE__*/jsxRuntime.jsx(Div, {
+                    className: clsx__default["default"](schemas.rendererClass(childOverrideClass, childClass), removableChildClass),
+                    children: children
+                  }), /*#__PURE__*/jsxRuntime.jsxs(Div, {
+                    className: removeActionClass,
+                    children: [editAction && renderAction(editAction(x)), removeAction && renderAction(removeAction(x))]
+                  })]
+                }, key) : /*#__PURE__*/jsxRuntime.jsx(Div, {
+                  className: schemas.rendererClass(childOverrideClass, childClass),
                   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
+                }, key);
               });
-            });
-          }
+            }
+          }, x);
         })
       }), addAction && /*#__PURE__*/jsxRuntime.jsx(Div, {
         className: addActionClass,
@@ -1487,7 +1455,7 @@ function DefaultArrayRenderer(props) {
       })]
     });
   } finally {
-    _effect3();
+    _effect2();
   }
 }
 
@@ -1809,14 +1777,18 @@ function ValueForField(_ref) {
           hideTitle: true
         });
         var rootSchema = schemas.createSchemaTree([adjustedField]).rootNode;
-        return [control, rootSchema];
+        return [schemas.createFormTree([control]), rootSchema];
       }, [schemaField]),
       controls = _useMemo[0],
       rootSchema = _useMemo[1];
-    var Render = schemas.useControlRendererComponent(controls, renderer, {
-      disabled: control.disabled
-    }, schemas.makeSchemaDataNode(rootSchema, value));
-    return /*#__PURE__*/jsxRuntime.jsx(Render, {});
+    return /*#__PURE__*/jsxRuntime.jsx(schemas.RenderForm, {
+      form: controls.rootNode,
+      renderer: renderer,
+      data: schemas.createSchemaDataNode(rootSchema, value),
+      options: {
+        disabled: control.disabled
+      }
+    });
   } finally {
     _effect();
   }
@@ -1839,7 +1811,7 @@ function createOptionalAdornment(options) {
     return {
       apply: function apply(rl) {
         var _ref, _adornment$placement;
-        if (props.formOptions.readonly) return rl;
+        if (props.formNode.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, /*#__PURE__*/jsxRuntime.jsx(core.Fcheckbox, {
           control: editing,
           className: options.checkClass
@@ -1940,6 +1912,17 @@ function MultilineTextfield(_ref) {
   }
 }
 
+// ============================================================================
+// ADDITIONAL CONSTANTS
+// ============================================================================
+var DefaultBoolOptions = [{
+  name: "Yes",
+  value: true
+}, {
+  name: "No",
+  value: false
+}];
+
 function createArrayElementRenderer(options) {
   if (options === void 0) {
     options = {};
@@ -1975,11 +1958,16 @@ function ArrayElementRenderer(_ref) {
     });
     if (designMode || extData.value !== undefined) {
       var runValidation = function runValidation(onClick) {
-        var hasErrors = false;
-        schemas.visitFormDataInContext(parentDataNode, elementGroup, schemas.validationVisitor(function () {
-          hasErrors = true;
-        }));
-        if (!hasErrors) onClick();
+        // TODO
+        // let hasErrors = false;
+        // visitFormDataInContext(
+        //   parentDataNode,
+        //   elementGroup,
+        //   validationVisitor(() => {
+        //     hasErrors = true;
+        //   }),
+        // );
+        // if (!hasErrors) onClick();
       };
       var applyValidation = function applyValidation(_ref2) {
         var action = _ref2.action,
@@ -1991,19 +1979,15 @@ function ArrayElementRenderer(_ref) {
         });
       };
       var parentDataNode = schemas.makeSchemaDataNode(dataProps.dataNode.schema, extData.fields.data);
-      var elementGroup = formNode.createChildNode("group", {
-        type: schemas.ControlDefinitionType.Group,
-        groupOptions: {
-          type: schemas.GroupRenderType.Standard,
-          hideTitle: true
-        },
-        children: formNode.getResolvedChildren()
-      });
-      var editContent = /*#__PURE__*/jsxRuntime.jsxs("div", {
+      // TODO
+      // const elementGroup: FormNode = formNode.createChildNode("group", {
+      //   type: ControlDefinitionType.Group,
+      //   groupOptions: { type: GroupRenderType.Standard, hideTitle: true },
+      //   children: formNode.getResolvedChildren(),
+      // } as GroupedControlsDefinition);
+      var editContent = /*#__PURE__*/jsxRuntime.jsx("div", {
         className: schemas.rendererClass(dataProps.className, options.className),
-        children: [renderChild("", elementGroup, {
-          parentDataNode: parentDataNode
-        }), /*#__PURE__*/jsxRuntime.jsx("div", {
+        children: /*#__PURE__*/jsxRuntime.jsx("div", {
           className: options.actionsClass,
           children: /*#__PURE__*/jsxRuntime.jsx(core.RenderElements, {
             control: extData.fields.actions,
@@ -2011,7 +1995,7 @@ function ArrayElementRenderer(_ref) {
               return formRenderer.renderAction(applyValidation(c.value));
             }
           })
-        })]
+        })
       });
       if (renderOptions.showInline || designMode) return editContent;
       return /*#__PURE__*/jsxRuntime.jsx(ariaBase.Modal, {
@@ -2031,7 +2015,7 @@ function createButtonActionRenderer(actionId, options) {
     options = {};
   }
   return schemas.createActionRenderer(actionId, function (props, renderer) {
-    var _props$icon, _ref, _props$iconPlacement, _options$renderConten;
+    var _props$icon, _ref, _props$iconPlacement, _ref2, _props$iconPlacement2, _options$renderConten;
     var key = props.key,
       onClick = props.onClick,
       actionText = props.actionText,
@@ -2043,9 +2027,14 @@ function createButtonActionRenderer(actionId, options) {
       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;
+      actionContent = props.actionContent,
+      busy = props.busy;
+    var busyIcon = props.busy ? options.busyIcon : undefined;
+    var stdIcon = (_props$icon = props.icon) != null && _props$icon.name ? props.icon : options.icon;
+    var icon = busyIcon != null ? busyIcon : stdIcon;
+    var stdIconPlacement = (_ref = (_props$iconPlacement = props.iconPlacement) != null ? _props$iconPlacement : options.iconPlacement) != null ? _ref : schemas.IconPlacement.BeforeText;
+    var busyPlacement = (_ref2 = (_props$iconPlacement2 = props.iconPlacement) != null ? _props$iconPlacement2 : options.busyIconPlacement) != null ? _ref2 : schemas.IconPlacement.ReplaceText;
+    var iconPlacement = busyIcon ? busyPlacement : stdIconPlacement;
     var _renderer$html = renderer.html,
       Button = _renderer$html.Button,
       I = _renderer$html.I,
@@ -2053,12 +2042,12 @@ function createButtonActionRenderer(actionId, options) {
     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 textClassNames = schemas.rendererClass(textClass, isLink ? options.linkTextClass : schemas.rendererClass(options.textClass, actionStyle == schemas.ActionStyle.Secondary ? options.secondaryTextClass : options.primaryTextClass));
     var iconElement = icon && /*#__PURE__*/jsxRuntime.jsx(I, {
       iconName: icon.name,
       iconLibrary: icon.library,
-      className: iconPlacement == schemas.IconPlacement.BeforeText ? options.iconBeforeClass : options.iconAfterClass
+      className: schemas.rendererClass(textClassNames, 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
@@ -2074,24 +2063,189 @@ function createButtonActionRenderer(actionId, options) {
       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: (_options$renderConten = options.renderContent == null ? void 0 : options.renderContent(actionText, actionId, actionData, busy)) != 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 defaultOptions = {
+  spinnerClass: "flex justify-center my-6",
+  className: "flex flex-row",
+  loadingIcon: undefined,
+  iconClass: "text-[36px]"
+};
+function createScrollListRenderer(options) {
+  return schemas.createDataRenderer(function (p, renderer) {
+    return /*#__PURE__*/jsxRuntime.jsx(ScrollListRenderer, {
+      dataProps: p,
+      renderer: renderer,
+      options: options
+    });
+  }, {
+    collection: true,
+    renderType: schemas.DataRenderType.ScrollList
+  });
+}
+function ScrollListRenderer(_ref) {
+  var _effect = core.useComponentTracking();
+  try {
+    var spinner = function spinner() {
+      return loadingControl.value && /*#__PURE__*/jsxRuntime.jsx("div", {
+        className: spinnerClass,
+        ref: function ref(e) {
+          return e == null ? void 0 : e.scrollIntoView({
+            behavior: "smooth"
+          });
+        },
+        children: /*#__PURE__*/jsxRuntime.jsx(I, {
+          iconName: loadingIcon.name,
+          iconLibrary: loadingIcon.library,
+          className: iconClass
+        })
+      });
+    };
+    var _ref$dataProps = _ref.dataProps,
+      formNode = _ref$dataProps.formNode,
+      renderChild = _ref$dataProps.renderChild,
+      dataNode = _ref$dataProps.dataNode,
+      actionOnClick = _ref$dataProps.actionOnClick,
+      renderOptions = _ref$dataProps.renderOptions,
+      dataContext = _ref$dataProps.dataContext,
+      className = _ref$dataProps.className,
+      renderer = _ref.renderer,
+      options = _ref.options;
+    var bottomActionId = renderOptions.bottomActionId;
+    var loadingControl = schemas.getLoadingControl(dataNode.control);
+    var hasMoreControl = schemas.getHasMoreControl(dataNode.control);
+    var handler = bottomActionId ? actionOnClick == null ? void 0 : actionOnClick(bottomActionId, undefined, dataContext) : undefined;
+    var I = renderer.html.I;
+    var _deepMerge = schemas.deepMerge(options, defaultOptions),
+      loadingIcon = _deepMerge.loadingIcon,
+      spinnerClass = _deepMerge.spinnerClass,
+      iconClass = _deepMerge.iconClass;
+    return /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
+      children: [/*#__PURE__*/jsxRuntime.jsx("div", {
+        className: schemas.rendererClass(className, options == null ? void 0 : options.className),
+        children: formNode.children.map(function (x) {
+          return renderChild(x);
+        })
+      }), (loadingIcon == null ? void 0 : loadingIcon.name) && /*#__PURE__*/jsxRuntime.jsx(core.RenderControl, {
+        render: spinner
+      }), /*#__PURE__*/jsxRuntime.jsx(ScrollTrigger, {
+        hasMoreControl: hasMoreControl,
+        loadingControl: loadingControl,
+        fetchMore: function fetchMore() {
+          return handler == null ? void 0 : handler(schemas.NoOpControlActionContext);
+        }
+      })]
+    });
+  } finally {
+    _effect();
+  }
+}
+function ScrollTrigger(_ref2) {
+  var _effect2 = core.useComponentTracking();
+  try {
+    var hasMoreControl = _ref2.hasMoreControl,
+      loadingControl = _ref2.loadingControl,
+      fetchMore = _ref2.fetchMore;
+    var observerTarget = react.useRef(null);
+    var hasMore = hasMoreControl.value;
+    var loading = loadingControl.value;
+    react.useEffect(function () {
+      var observer = new IntersectionObserver(function (entries) {
+        if (entries[0].isIntersecting && hasMore && !loading) {
+          fetchMore();
+        }
+      }, {
+        threshold: 0.5
+      }); // Trigger when 50% of the target is visible
+      if (observerTarget.current) {
+        observer.observe(observerTarget.current);
+      }
+      return function () {
+        if (observerTarget.current) {
+          observer.unobserve(observerTarget.current);
+        }
+      };
+    }, [hasMore, loading]); // Re-run effect if hasMore or loading state changes
+    return /*#__PURE__*/jsxRuntime.jsx("div", {
+      ref: observerTarget,
+      style: {
+        height: "1px"
+      }
+    });
+  } finally {
+    _effect2();
+  }
+}
+
+function HtmlCheckButtons(props) {
+  var _effect = core.useComponentTracking();
+  try {
+    var control = props.control,
+      options = props.options,
+      readonly = props.readonly,
+      className = props.className,
+      id = props.id,
+      type = props.type,
+      isChecked = props.isChecked,
+      setChecked = props.setChecked,
+      entryAdornment = props.entryAdornment,
+      classes = props.classes,
+      _props$controlClasses = props.controlClasses,
+      controlClasses = _props$controlClasses === void 0 ? {} : _props$controlClasses;
+    var disabled = control.disabled;
+    var name = "r" + control.uniqueId;
+    return /*#__PURE__*/jsxRuntime.jsx("div", {
+      role: "group",
+      className: className,
+      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("div", {
+            className: clsx.clsx(schemas.rendererClass(controlClasses == null ? void 0 : controlClasses.entryWrapperClass, classes.entryWrapperClass), selOrUnsel),
+            children: [/*#__PURE__*/jsxRuntime.jsxs("div", {
+              className: classes.entryClass,
+              children: [/*#__PURE__*/jsxRuntime.jsx("input", {
+                id: name + "_" + i,
+                className: classes.checkClass,
+                type: type,
+                name: name,
+                readOnly: readonly,
+                disabled: disabled,
+                checked: checked,
+                onChange: function onChange(x) {
+                  !readonly && setChecked(control, o, x.target.checked);
+                }
+              }), /*#__PURE__*/jsxRuntime.jsx("label", {
+                className: classes.labelClass,
+                htmlFor: name + "_" + i,
+                children: o.name
+              })]
+            }), entryAdornment == null ? void 0 : entryAdornment(o, i, checked)]
+          });
+        }
+      })
+    });
+  } finally {
+    _effect();
+  }
+}
+
 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
-}, {
-  name: "No",
-  value: false
-}];
 function createDefaultDataRenderer(options) {
   var _options$checkboxOpti, _options$checkboxOpti2, _options$radioOptions, _options$checkListOpt;
   if (options === void 0) {
@@ -2118,16 +2272,17 @@ function createDefaultDataRenderer(options) {
     defaultEmptyText = _optionRenderer$boole.defaultEmptyText;
   var arrayRenderer = createDefaultArrayDataRenderer(options.arrayOptions);
   var autocompleteRenderer = createAutocompleteRenderer(options.autocompleteOptions);
+  var scrollListRenderer = createScrollListRenderer(options.scrollListOptions);
   return schemas.createDataRenderer(function (props, renderers) {
     var field = props.field;
     var fieldType = field.type;
     var renderOptions = props.renderOptions;
-    var renderType = renderOptions.type;
+    var renderType = renderOptions.type ? renderOptions.type : schemas.DataRenderType.Standard;
     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) {
+    if (fieldType === schemas.FieldType.Compound && (schemas.isDataGroupRenderer(renderOptions) || renderType === schemas.DataRenderType.Standard)) {
       var _ref;
       var groupOptions = (_ref = schemas.isDataGroupRenderer(renderOptions) ? renderOptions.groupOptions : undefined) != null ? _ref : {
         type: "Standard",
@@ -2142,7 +2297,7 @@ function createDefaultDataRenderer(options) {
         className: "@ " + schemas.rendererClass(p.className, displayOnlyClass),
         children: /*#__PURE__*/jsxRuntime.jsx(DefaultDisplayOnly, {
           dataNode: props.dataNode,
-          state: props.state,
+          state: props.formNode,
           schemaInterface: props.dataContext.schemaInterface,
           className: props.className,
           textClass: props.textClass,
@@ -2167,6 +2322,8 @@ function createDefaultDataRenderer(options) {
         return nullToggler.render(props, renderers);
       case schemas.DataRenderType.CheckList:
         return checkListRenderer.render(props, renderers);
+      case schemas.DataRenderType.ScrollList:
+        return scrollListRenderer.render(props, renderers);
       case schemas.DataRenderType.Dropdown:
         return selectRenderer.render(props, renderers);
       case schemas.DataRenderType.Radio:
@@ -2193,6 +2350,7 @@ function createDefaultDataRenderer(options) {
       textClass: schemas.rendererClass(props.textClass, inputTextClass),
       style: props.style,
       id: props.id,
+      errorId: props.errorId,
       readOnly: props.readonly,
       control: props.control,
       placeholder: placeholder != null ? placeholder : undefined,
@@ -2241,15 +2399,22 @@ function createDefaultAdornmentRenderer(options) {
           }
           if (schemas.isAccordionAdornment(adornment)) {
             return schemas.wrapLayout(function (x) {
-              return /*#__PURE__*/jsxRuntime.jsx(DefaultAccordion, _extends({
+              var _rl$children$props;
+              var displayProps = /*#__PURE__*/react.isValidElement(rl.children) ? (_rl$children$props = rl.children.props) == null ? void 0 : _rl$children$props.displayProps : undefined;
+              return /*#__PURE__*/jsxRuntime.jsx(DefaultAccordion, {
+                isGroup: false,
                 renderers: renderers,
                 children: x,
-                accordion: adornment,
+                className: displayProps == null ? void 0 : displayProps.className,
+                titleTextClass: displayProps == null ? void 0 : displayProps.textClass,
+                title: renderers.renderLabelText(adornment.title),
+                defaultExpanded: adornment.defaultExpanded,
                 contentStyle: rl.style,
                 contentClassName: rl.className,
                 designMode: designMode,
-                dataContext: dataContext
-              }, options.accordion));
+                dataContext: dataContext,
+                options: options.accordion
+              });
             })(rl);
           }
         },
@@ -2328,7 +2493,8 @@ var StandardHtmlComponents = {
   Div: DefaultHtmlDivRenderer,
   H1: "h1",
   B: "b",
-  Input: DefaultHtmlInputRenderer
+  Input: DefaultHtmlInputRenderer,
+  CheckButtons: HtmlCheckButtons
 };
 function DefaultHtmlButtonRenderer(_ref5) {
   var _effect = core.useComponentTracking();
@@ -2341,9 +2507,9 @@ function DefaultHtmlButtonRenderer(_ref5) {
       onClick = _ref5.onClick,
       nonTextContent = _ref5.nonTextContent,
       props = _objectWithoutPropertiesLoose(_ref5, _excluded);
-    var Comp = nonTextContent ? "div" : "button";
+    var Comp = inline ? "span" : nonTextContent ? "div" : "button";
     return /*#__PURE__*/jsxRuntime.jsx(Comp, _extends({
-      role: nonTextContent ? "button" : undefined,
+      role: nonTextContent || inline ? "button" : undefined,
       onClick: onClick ? function (e) {
         e.stopPropagation();
         onClick();
@@ -2422,8 +2588,11 @@ function DefaultHtmlIconRenderer(_ref9) {
       switch (iconLibrary) {
         case schemas.IconLibrary.FontAwesome:
           return "fa fa-" + iconName;
-        default:
+        case schemas.IconLibrary.Material:
+        case schemas.IconLibrary.CssClass:
           return iconName;
+        default:
+          return iconLibrary + " fa-" + iconName;
       }
     };
     var iconName = _ref9.iconName,
@@ -2448,7 +2617,7 @@ function createDefaultRenderers(options) {
     display: createDefaultDisplayRenderer(options.display),
     action: createButtonActionRenderer(undefined, options.action),
     array: createDefaultArrayRenderer(options.array),
-    group: createDefaultGroupRenderer(options.group),
+    group: createDefaultGroupRenderer(options.group, options.adornment),
     label: createDefaultLabelRenderer(options.label),
     adornment: createDefaultAdornmentRenderer(options.adornment),
     renderLayout: createDefaultLayoutRenderer(options.layout),
@@ -2502,7 +2671,8 @@ var defaultTailwindTheme = {
     standardClassName: "flex flex-col gap-4",
     grid: {
       className: "flex flex-col gap-4",
-      rowClass: "flex flex-row gap-4 justify-between *:flex-1"
+      rowClass: "flex flex-row gap-4 justify-between",
+      cellClass: "flex-1"
     },
     flexClassName: "gap-2",
     inlineClass: "",
@@ -2521,7 +2691,8 @@ var defaultTailwindTheme = {
     primaryClass: "bg-primary-500",
     secondaryClass: "bg-secondary-500",
     iconBeforeClass: "px-2",
-    iconAfterClass: "px-2"
+    iconAfterClass: "px-2",
+    busyIcon: schemas.fontAwesomeIcon("spinner fa-spin")
   },
   layout: {
     className: "flex flex-col",
@@ -2547,12 +2718,15 @@ var defaultTailwindTheme = {
       listEntryClass: "list-none p-2 rounded-lg cursor-default last-of-type:border-b-0 hover:cursor-pointer hover:bg-primary-100 aria-selected:bg-primary-200 aria-selected:text-primary-900 focused:bg-surface-100 focus-visible:bg-surface-100 focused:text-surface-900 focus-visible:text-surface-900 focus-visible:shadow-[0_0_0_3px_transparent] focus-visible:shadow-primary-200  focused:aria-selected:bg-primary-200 focus-visible:aria-selected:bg-primary-200 focused:aria-selected:text-primary-900 focus-visible:aria-selected:text-primary-900",
       chipContainerClass: "flex flex-row items-center px-3 py-1 rounded-full bg-surface-100 m-1 gap-2 truncate",
       chipCloseButtonClass: "fa-solid fa-xmark p-1 bg-surface-300 rounded-full min-w-[24px] flex justify-center text-surface-50 hover:bg-surface-400 hover:text-surface-100 hover:cursor-pointer"
+    },
+    scrollListOptions: {
+      loadingIcon: schemas.fontAwesomeIcon("spinner fa-spin")
     }
   },
   adornment: {
     accordion: {
-      className: "flex items-center gap-2 my-2",
-      titleClass: "cursor-pointer",
+      className: "flex items-center gap-2 my-2 w-fit",
+      titleTextClass: "cursor-pointer",
       iconOpen: schemas.fontAwesomeIcon("chevron-up"),
       iconClosed: schemas.fontAwesomeIcon("chevron-down")
     },
@@ -2565,7 +2739,6 @@ var defaultTailwindTheme = {
   }
 };
 
-exports.CheckButtons = CheckButtons;
 exports.ControlInput = ControlInput;
 exports.DataArrayRenderer = DataArrayRenderer;
 exports.DefaultAccordion = DefaultAccordion;
@@ -2586,6 +2759,7 @@ exports.OptionalEditRenderer = OptionalEditRenderer;
 exports.SelectDataRenderer = SelectDataRenderer;
 exports.StandardHtmlComponents = StandardHtmlComponents;
 exports.ValueForFieldExtension = ValueForFieldExtension;
+exports.createAccordionGroupRenderer = createAccordionGroupRenderer;
 exports.createAutocompleteRenderer = createAutocompleteRenderer;
 exports.createButtonActionRenderer = createButtonActionRenderer;
 exports.createCheckListRenderer = createCheckListRenderer;
@@ -2607,11 +2781,11 @@ exports.createJsonataRenderer = createJsonataRenderer;
 exports.createNullToggleRenderer = createNullToggleRenderer;
 exports.createOptionalAdornment = createOptionalAdornment;
 exports.createRadioRenderer = createRadioRenderer;
+exports.createScrollListRenderer = createScrollListRenderer;
 exports.createSelectConversion = createSelectConversion;
 exports.createSelectRenderer = createSelectRenderer;
 exports.createValueForFieldRenderer = createValueForFieldRenderer;
 exports.createWizardRenderer = createWizardRenderer;
 exports.defaultTailwindTheme = defaultTailwindTheme;
 exports.getAccordionState = getAccordionState;
-exports.setIncluded = setIncluded;
 //# sourceMappingURL=index.cjs.map