@react-typed-forms/schemas 9.1.1 → 10.0.0

package/lib/index.js

@@ -66,6 +66,7 @@ exports.ControlAdornmentType = void 0;
 exports.DataRenderType = void 0;
 (function (DataRenderType) {
   DataRenderType["Standard"] = "Standard";
+  DataRenderType["Textfield"] = "Textfield";
   DataRenderType["Radio"] = "Radio";
   DataRenderType["HtmlEditor"] = "HtmlEditor";
   DataRenderType["IconList"] = "IconList";
@@ -102,6 +103,7 @@ exports.ValidatorType = void 0;
 (function (ValidatorType) {
   ValidatorType["Jsonata"] = "Jsonata";
   ValidatorType["Date"] = "Date";
+  ValidatorType["Length"] = "Length";
 })(exports.ValidatorType || (exports.ValidatorType = {}));
 exports.DateComparison = void 0;
 (function (DateComparison) {
@@ -143,6 +145,9 @@ function isFlexRenderer(options) {
 function isDisplayOnlyRenderer(options) {
   return options.type === exports.DataRenderType.DisplayOnly;
 }
+function isTextfieldRenderer(options) {
+  return options.type === exports.DataRenderType.Textfield;
+}
 function isDataGroupRenderer(options) {
   return options.type === exports.DataRenderType.Group;
 }
@@ -566,6 +571,14 @@ function toDepString(x) {
   if (x === null) return "~";
   return x.toString();
 }
+function appendElementIndex(dataContext, elementIndex) {
+  return _extends({}, dataContext, {
+    path: [].concat(dataContext.path, [elementIndex])
+  });
+}
+function applyLengthRestrictions(length, min, max, minValue, maxValue) {
+  return [min == null || length > min ? minValue : undefined, max == null || length < max ? maxValue : undefined];
+}
 
 function buildSchema(def) {
   return Object.entries(def).map(function (x) {
@@ -919,7 +932,7 @@ function useEvalDisabledHook(useEvalExpressionHook, definition) {
 function useEvalDisplayHook(useEvalExpressionHook, definition) {
   return useEvalDynamicHook(definition, exports.DynamicPropertyType.Display, useEvalExpressionHook);
 }
-function useEvalDefaultValueHook(useEvalExpressionHook, definition, schemaField) {
+function useEvalDefaultValueHook(useEvalExpressionHook, definition, schemaField, element) {
   var dynamicValue = useEvalDynamicHook(definition, exports.DynamicPropertyType.DefaultValue, useEvalExpressionHook);
   return makeDynamicPropertyHook(dynamicValue, function (ctx, _ref3) {
     var definition = _ref3.definition,
@@ -929,7 +942,7 @@ function useEvalDefaultValueHook(useEvalExpressionHook, definition, schemaField)
       var _ref4 = isDataControlDefinition(definition) ? [definition.required, definition.defaultValue] : [false, undefined],
         required = _ref4[0],
         dcv = _ref4[1];
-      return dcv != null ? dcv : schemaField ? defaultValueForField(schemaField, required) : undefined;
+      return dcv != null ? dcv : schemaField ? element ? elementValueForField(schemaField) : defaultValueForField(schemaField, required) : undefined;
     }
   }, {
     definition: definition,
@@ -1066,16 +1079,21 @@ function makeDynamicPropertyHook(dynamicValue, makeDefault, state, deps) {
   };
 }
 
-function useValidationHook(definition) {
+function useValidationHook(definition, field) {
   var _definition$validator, _definition$validator2;
   var validatorTypes = isDataControlDefinition(definition) ? (_definition$validator = (_definition$validator2 = definition.validators) == null ? void 0 : _definition$validator2.map(function (x) {
     return x.type;
   })) != null ? _definition$validator : [] : null;
-  var r = useUpdatedRef(definition);
-  return React.useCallback(function (control, hidden, groupContext) {
+  var r = useUpdatedRef({
+    definition: definition,
+    field: field
+  });
+  return React.useCallback(function (control, hidden, groupContext, schemaInterface) {
     var _dd$validators;
     if (!validatorTypes) return;
-    var dd = r.current;
+    var _r$current = r.current,
+      dd = _r$current.definition,
+      field = _r$current.field;
     core.useValueChangeEffect(control, function () {
       return control.setError("default", "");
     });
@@ -1084,6 +1102,27 @@ function useValidationHook(definition) {
     }, "required");
     ((_dd$validators = dd.validators) != null ? _dd$validators : []).forEach(function (x, i) {
       switch (x.type) {
+        case exports.ValidatorType.Length:
+          var lv = x;
+          core.useControlEffect(function () {
+            core.trackControlChange(control, core.ControlChange.Validate);
+            return field ? schemaInterface.controlLength(field, control) : 0;
+          }, function (len) {
+            if (lv.min != null && len < lv.min) {
+              if (field != null && field.collection) {
+                control.setValue(function (v) {
+                  return [].concat(v, Array.from({
+                    length: lv.min - len
+                  }));
+                });
+              } else {
+                control.setError("length", "Length must be at least " + lv.min);
+              }
+            } else if (lv.max != null && len > lv.max) {
+              control.setError("length", "Length must be less than " + lv.max);
+            }
+          }, true);
+          break;
         case exports.ValidatorType.Jsonata:
           return useJsonataValidator(control, groupContext, x, hidden, i);
         case exports.ValidatorType.Date:
@@ -1125,31 +1164,41 @@ function useDateValidator(control, dv, i) {
   }, "date" + i);
 }
 
-var defaultSchemaInterface = {
-  isEmptyValue: defaultIsEmpty,
-  textValue: defaultTextValue
-};
-function defaultIsEmpty(f, value) {
-  if (f.collection) return Array.isArray(value) ? value.length === 0 : value == null;
-  switch (f.type) {
-    case exports.FieldType.String:
-      return !value;
-    default:
-      return value == null;
-  }
-}
-function defaultTextValue(f, value) {
-  switch (f.type) {
-    case exports.FieldType.DateTime:
-      return new Date(value).toLocaleDateString();
-    case exports.FieldType.Date:
-      return new Date(value).toLocaleDateString();
-    default:
-      return value != null ? value.toString() : undefined;
-  }
-}
+var DefaultSchemaInterface = /*#__PURE__*/function () {
+  function DefaultSchemaInterface() {}
+  var _proto = DefaultSchemaInterface.prototype;
+  _proto.isEmptyValue = function isEmptyValue(f, value) {
+    if (f.collection) return Array.isArray(value) ? value.length === 0 : value == null;
+    switch (f.type) {
+      case exports.FieldType.String:
+        return !value;
+      default:
+        return value == null;
+    }
+  };
+  _proto.textValue = function textValue(field, value, element) {
+    switch (field.type) {
+      case exports.FieldType.DateTime:
+        return new Date(value).toLocaleDateString();
+      case exports.FieldType.Date:
+        return new Date(value).toLocaleDateString();
+      default:
+        return value != null ? value.toString() : undefined;
+    }
+  };
+  _proto.controlLength = function controlLength(f, control) {
+    var _control$elements$len, _control$elements;
+    return f.collection ? (_control$elements$len = (_control$elements = control.elements) == null ? void 0 : _control$elements.length) != null ? _control$elements$len : 0 : this.valueLength(f, control.value);
+  };
+  _proto.valueLength = function valueLength(field, value) {
+    var _ref;
+    return (_ref = value && (value == null ? void 0 : value.length)) != null ? _ref : 0;
+  };
+  return DefaultSchemaInterface;
+}();
+var defaultSchemaInterface = new DefaultSchemaInterface();
 
-var _excluded$1 = ["definition", "field", "control", "options", "elementRenderer", "style", "allowedOptions"];
+var _excluded$3 = ["definition", "field", "control", "formOptions", "style", "allowedOptions"];
 var AppendAdornmentPriority = 0;
 var WrapAdornmentPriority = 1000;
 exports.LabelType = void 0;
@@ -1163,11 +1212,12 @@ function useControlRenderer(definition, fields, renderer, options) {
     options = {};
   }
   var dataProps = (_options$useDataHook = options.useDataHook == null ? void 0 : options.useDataHook(definition)) != null ? _options$useDataHook : defaultDataProps;
+  var elementIndex = options.elementIndex;
   var schemaInterface = (_options$schemaInterf = options.schemaInterface) != null ? _options$schemaInterf : defaultSchemaInterface;
   var useExpr = (_options$useEvalExpre = options.useEvalExpressionHook) != null ? _options$useEvalExpre : defaultUseEvalExpressionHook;
   var schemaField = lookupSchemaField(definition, fields);
   var dynamicHooks = useDynamicHooks({
-    defaultValueControl: useEvalDefaultValueHook(useExpr, definition, schemaField),
+    defaultValueControl: useEvalDefaultValueHook(useExpr, definition, schemaField, elementIndex != null),
     visibleControl: useEvalVisibilityHook(useExpr, definition, schemaField),
     readonlyControl: useEvalReadonlyHook(useExpr, definition),
     disabledControl: useEvalDisabledHook(useExpr, definition),
@@ -1177,12 +1227,13 @@ function useControlRenderer(definition, fields, renderer, options) {
     layoutStyle: useEvalStyleHook(useExpr, exports.DynamicPropertyType.LayoutStyle, definition),
     displayControl: useEvalDisplayHook(useExpr, definition)
   });
-  var useValidation = useValidationHook(definition);
+  var useValidation = useValidationHook(definition, schemaField);
   var r = useUpdatedRef({
     options: options,
     definition: definition,
     fields: fields,
-    schemaField: schemaField
+    schemaField: schemaField,
+    elementIndex: elementIndex
   });
   var Component = React.useCallback(function (_ref) {
     var rootControl = _ref.control,
@@ -1195,7 +1246,8 @@ function useControlRenderer(definition, fields, renderer, options) {
         c = _r$current.definition,
         _options = _r$current.options,
         _fields = _r$current.fields,
-        _schemaField = _r$current.schemaField;
+        _schemaField = _r$current.schemaField,
+        _elementIndex = _r$current.elementIndex;
       var parentDataContext = {
         fields: _fields,
         schemaInterface: schemaInterface,
@@ -1229,7 +1281,7 @@ function useControlRenderer(definition, fields, renderer, options) {
           };
         });
       });
-      var _getControlData = getControlData(_schemaField, parentDataContext),
+      var _getControlData = getControlData(_schemaField, parentDataContext, _elementIndex),
         parentControl = _getControlData[0],
         control = _getControlData[1],
         controlDataContext = _getControlData[2];
@@ -1263,8 +1315,10 @@ function useControlRenderer(definition, fields, renderer, options) {
           disabled: _options.disabled || disabledControl.value
         };
       }).value;
-      useValidation(control != null ? control : core.newControl(null), !!myOptions.hidden, parentDataContext);
-      var childOptions = _extends({}, _options, myOptions);
+      useValidation(control != null ? control : core.newControl(null), !!myOptions.hidden, parentDataContext, schemaInterface);
+      var childOptions = _extends({}, _options, myOptions, {
+        elementIndex: undefined
+      });
       React.useEffect(function () {
         if (control && typeof myOptions.disabled === "boolean") control.disabled = myOptions.disabled;
       }, [control, myOptions.disabled]);
@@ -1277,29 +1331,34 @@ function useControlRenderer(definition, fields, renderer, options) {
       var labelAndChildren = renderControlLayout({
         definition: c,
         renderer: renderer,
-        renderChild: function renderChild(k, child, path) {
+        renderChild: function renderChild(k, child, options) {
+          var _options$dataContext;
+          var dataContext = (_options$dataContext = options == null ? void 0 : options.dataContext) != null ? _options$dataContext : controlDataContext;
           return /*#__PURE__*/React__default["default"].createElement(ControlRenderer, {
             key: k,
-            control: controlDataContext.data,
-            fields: controlDataContext.fields,
-            definition: findChildDefinition(c, child),
-            parentPath: path ? [].concat(controlDataContext.path, path) : controlDataContext.path,
+            control: dataContext.data,
+            fields: dataContext.fields,
+            definition: child,
+            parentPath: dataContext.path,
             renderer: renderer,
-            options: childOptions
+            options: options ? _extends({}, childOptions, {
+              elementIndex: options == null ? void 0 : options.elementIndex
+            }) : childOptions
           });
         },
         createDataProps: dataProps,
         formOptions: myOptions,
         dataContext: controlDataContext,
+        parentContext: parentDataContext,
         control: displayControl != null ? displayControl : control,
+        elementIndex: _elementIndex,
         labelText: labelText,
-        schemaField: _schemaField,
+        field: _schemaField,
         displayControl: displayControl,
         style: customStyle.value,
         allowedOptions: allowedOptions,
-        useChildVisibility: function useChildVisibility(child) {
-          var childDef = findChildDefinition(c, child);
-          var schemaField = lookupSchemaField(childDef, controlDataContext.fields);
+        useChildVisibility: function useChildVisibility(childDef, context) {
+          var schemaField = lookupSchemaField(childDef, (context != null ? context : controlDataContext).fields);
           return useEvalVisibilityHook(useExpr, childDef, schemaField);
         }
       });
@@ -1322,14 +1381,14 @@ function lookupSchemaField(c, fields) {
   var fieldName = isGroupControlsDefinition(c) ? c.compoundField : isDataControlDefinition(c) ? c.field : undefined;
   return fieldName ? findField(fields, fieldName) : undefined;
 }
-function getControlData(schemaField, parentContext) {
-  var _parentControl$fields;
+function getControlData(schemaField, parentContext, elementIndex) {
+  var _parentControl$fields, _childControl$element;
   var data = parentContext.data,
     path = parentContext.path;
   var parentControl = data.lookupControl(path);
-  var childPath = schemaField ? [].concat(path, [schemaField.field]) : path;
+  var childPath = schemaField ? elementIndex != null ? [].concat(path, [schemaField.field, elementIndex]) : [].concat(path, [schemaField.field]) : path;
   var childControl = schemaField && parentControl ? (_parentControl$fields = parentControl.fields) == null ? void 0 : _parentControl$fields[schemaField.field] : undefined;
-  return [parentControl, childControl, schemaField ? _extends({}, parentContext, {
+  return [parentControl, childControl && elementIndex != null ? (_childControl$element = childControl.elements) == null ? void 0 : _childControl$element[elementIndex] : childControl, schemaField ? _extends({}, parentContext, {
     path: childPath,
     fields: isCompoundField(schemaField) ? schemaField.children : parentContext.fields
   }) : parentContext];
@@ -1352,63 +1411,61 @@ function ControlRenderer(_ref3) {
     _effect();
   }
 }
-function groupProps(definition, renderChild, dataContext, className, style, useChildVisibility) {
-  var _definition$children, _definition$groupOpti;
-  return {
-    childDefinitions: (_definition$children = definition.children) != null ? _definition$children : [],
-    renderChild: renderChild,
-    dataContext: dataContext,
-    renderOptions: (_definition$groupOpti = definition.groupOptions) != null ? _definition$groupOpti : {
-      type: "Standard"
-    },
-    className: cc(className),
-    useChildVisibility: useChildVisibility,
-    style: style
-  };
-}
 function defaultDataProps(_ref4) {
-  var _field$options$length, _field$options, _allowedOptions$value, _definition$children2, _definition$renderOpt;
+  var _definition$validator, _field$options$length, _field$options, _allowedOptions$value, _definition$children, _definition$renderOpt;
   var definition = _ref4.definition,
     field = _ref4.field,
     control = _ref4.control,
-    options = _ref4.options,
-    elementRenderer = _ref4.elementRenderer,
+    formOptions = _ref4.formOptions,
     style = _ref4.style,
     allowedOptions = _ref4.allowedOptions,
-    props = _objectWithoutPropertiesLoose(_ref4, _excluded$1);
+    props = _objectWithoutPropertiesLoose(_ref4, _excluded$3);
+  var lengthVal = (_definition$validator = definition.validators) == null ? void 0 : _definition$validator.find(function (x) {
+    return x.type === exports.ValidatorType.Length;
+  });
   var className = cc(definition.styleClass);
   var required = !!definition.required;
   var fieldOptions = ((_field$options$length = (_field$options = field.options) == null ? void 0 : _field$options.length) != null ? _field$options$length : 0) === 0 ? null : field.options;
   var allowed = (_allowedOptions$value = allowedOptions == null ? void 0 : allowedOptions.value) != null ? _allowedOptions$value : [];
   return _extends({
-    childDefinitions: (_definition$children2 = definition.children) != null ? _definition$children2 : [],
+    definition: definition,
+    childDefinitions: (_definition$children = definition.children) != null ? _definition$children : [],
     control: control,
     field: field,
     id: "c" + control.uniqueId,
     options: fieldOptions && allowed.length > 0 ? fieldOptions.filter(function (x) {
       return allowed.includes(x.value);
     }) : fieldOptions,
-    readonly: !!options.readonly,
+    readonly: !!formOptions.readonly,
     renderOptions: (_definition$renderOpt = definition.renderOptions) != null ? _definition$renderOpt : {
       type: "Standard"
     },
     required: required,
-    hidden: !!options.hidden,
+    hidden: !!formOptions.hidden,
     className: className,
     style: style
   }, props, {
-    toArrayProps: elementRenderer ? function () {
-      return defaultArrayProps(control, field, required, style, className, elementRenderer);
+    toArrayProps: field.collection && props.elementIndex == null ? function () {
+      return defaultArrayProps(control, field, required, style, className, function (elementIndex) {
+        var _control$elements$ele, _control$elements;
+        return props.renderChild((_control$elements$ele = (_control$elements = control.elements) == null ? void 0 : _control$elements[elementIndex].uniqueId) != null ? _control$elements$ele : elementIndex, {
+          type: exports.ControlDefinitionType.Data,
+          field: definition.field,
+          children: definition.children,
+          hideTitle: true
+        }, {
+          elementIndex: elementIndex,
+          dataContext: props.parentContext
+        });
+      }, lengthVal == null ? void 0 : lengthVal.min, lengthVal == null ? void 0 : lengthVal.max);
     } : undefined
   });
 }
-function defaultArrayProps(arrayControl, field, required, style, className, _renderElement) {
-  var _field$displayName, _arrayControl$element;
+function defaultArrayProps(arrayControl, field, required, style, className, _renderElement, min, max) {
+  var _field$displayName;
   var noun = (_field$displayName = field.displayName) != null ? _field$displayName : field.field;
-  var elems = (_arrayControl$element = arrayControl.elements) != null ? _arrayControl$element : [];
   return {
     arrayControl: arrayControl,
-    elementCount: elems.length,
     required: required,
     addAction: {
       actionId: "add",
@@ -1417,9 +1474,6 @@ function defaultArrayProps(arrayControl, field, required, style, className, _ren
         return core.addElement(arrayControl, elementValueForField(field));
       }
     },
-    elementKey: function elementKey(i) {
-      return elems[i].uniqueId;
-    },
     removeAction: function removeAction(i) {
       return {
         actionId: "",
@@ -1433,28 +1487,29 @@ function defaultArrayProps(arrayControl, field, required, style, className, _ren
       return _renderElement(i);
     },
     className: cc(className),
-    style: style
+    style: style,
+    min: min,
+    max: max
   };
 }
-function renderControlLayout(_ref5) {
-  var c = _ref5.definition,
-    renderer = _ref5.renderer,
-    childRenderer = _ref5.renderChild,
-    childControl = _ref5.control,
-    schemaField = _ref5.schemaField,
-    dataContext = _ref5.dataContext,
-    dataOptions = _ref5.formOptions,
-    dataProps = _ref5.createDataProps,
-    displayControl = _ref5.displayControl,
-    style = _ref5.style,
-    labelText = _ref5.labelText,
-    allowedOptions = _ref5.allowedOptions,
-    useChildVisibility = _ref5.useChildVisibility;
+function renderControlLayout(props) {
+  var c = props.definition,
+    renderer = props.renderer,
+    renderChild = props.renderChild,
+    control = props.control,
+    field = props.field,
+    dataContext = props.dataContext,
+    dataProps = props.createDataProps,
+    displayControl = props.displayControl,
+    style = props.style,
+    labelText = props.labelText,
+    parentContext = props.parentContext,
+    useChildVisibility = props.useChildVisibility;
   if (isDataControlDefinition(c)) {
     return renderData(c);
   }
   if (isGroupControlsDefinition(c)) {
-    var _labelText$value, _c$groupOptions2;
+    var _c$children, _c$groupOptions2, _labelText$value, _c$groupOptions3;
     if (c.compoundField) {
       var _c$groupOptions;
       return renderData(dataControl(c.compoundField, c.title, {
@@ -1463,20 +1518,32 @@ function renderControlLayout(_ref5) {
       }));
     }
     return {
-      processLayout: renderer.renderGroup(groupProps(c, childRenderer, dataContext, c.styleClass, style, useChildVisibility)),
+      processLayout: renderer.renderGroup({
+        childDefinitions: (_c$children = c.children) != null ? _c$children : [],
+        definition: c,
+        parentContext: parentContext,
+        renderChild: renderChild,
+        dataContext: dataContext,
+        renderOptions: (_c$groupOptions2 = c.groupOptions) != null ? _c$groupOptions2 : {
+          type: "Standard"
+        },
+        className: cc(c.styleClass),
+        useChildVisibility: useChildVisibility,
+        style: style
+      }),
       label: {
         label: (_labelText$value = labelText == null ? void 0 : labelText.value) != null ? _labelText$value : c.title,
         className: cc(c.labelClass),
         type: exports.LabelType.Group,
-        hide: (_c$groupOptions2 = c.groupOptions) == null ? void 0 : _c$groupOptions2.hideTitle
+        hide: (_c$groupOptions3 = c.groupOptions) == null ? void 0 : _c$groupOptions3.hideTitle
       }
     };
   }
   if (isActionControlsDefinition(c)) {
-    var _ref6, _labelText$value2;
+    var _ref5, _labelText$value2;
     return {
       children: renderer.renderAction({
-        actionText: (_ref6 = (_labelText$value2 = labelText == null ? void 0 : labelText.value) != null ? _labelText$value2 : c.title) != null ? _ref6 : c.actionId,
+        actionText: (_ref5 = (_labelText$value2 = labelText == null ? void 0 : labelText.value) != null ? _labelText$value2 : c.title) != null ? _ref5 : c.actionId,
         actionId: c.actionId,
         onClick: function onClick() {},
         className: cc(c.styleClass),
@@ -1497,44 +1564,27 @@ function renderControlLayout(_ref5) {
     };
   }
   return {};
-  function renderData(c, elemIndex) {
+  function renderData(c) {
     var _labelText$value3;
-    if (!schemaField) return {
+    if (!field) return {
       children: "No schema field for: " + c.field
     };
-    if (!childControl) return {
+    if (!control) return {
       children: "No control for: " + c.field
     };
-    var props = dataProps({
-      definition: c,
-      field: schemaField,
-      dataContext: elemIndex != null ? _extends({}, dataContext, {
-        path: [].concat(dataContext.path, [elemIndex])
-      }) : dataContext,
-      control: elemIndex != null ? childControl.elements[elemIndex] : childControl,
-      options: dataOptions,
-      style: style,
-      allowedOptions: allowedOptions,
-      renderChild: elemIndex != null ? function (k, d, p) {
-        return childRenderer(k, d, p ? [elemIndex].concat(p) : [elemIndex]);
-      } : childRenderer,
-      useChildVisibility: useChildVisibility,
-      elementRenderer: elemIndex == null && schemaField.collection ? function (ei) {
-        return renderLayoutParts(renderData(c, ei), renderer).children;
-      } : undefined
-    });
-    var label = !c.hideTitle ? controlTitle((_labelText$value3 = labelText == null ? void 0 : labelText.value) != null ? _labelText$value3 : c.title, schemaField) : undefined;
+    var rendererProps = dataProps(props);
+    var label = !c.hideTitle ? controlTitle((_labelText$value3 = labelText == null ? void 0 : labelText.value) != null ? _labelText$value3 : c.title, field) : undefined;
     return {
-      processLayout: renderer.renderData(props),
+      processLayout: renderer.renderData(rendererProps),
       label: {
         type: exports.LabelType.Control,
         label: label,
-        forId: props.id,
+        forId: rendererProps.id,
         required: c.required,
         hide: c.hideTitle,
         className: cc(c.labelClass)
       },
-      errorControl: childControl
+      errorControl: control
     };
   }
 }
@@ -1568,13 +1618,13 @@ function wrapMarkupAt(pos, wrap) {
 }
 function renderLayoutParts(props, renderer) {
   var _props$processLayout;
-  var _ref7 = (_props$processLayout = props.processLayout == null ? void 0 : props.processLayout(props)) != null ? _props$processLayout : props,
-    className = _ref7.className,
-    children = _ref7.children,
-    style = _ref7.style,
-    errorControl = _ref7.errorControl,
-    label = _ref7.label,
-    adornments = _ref7.adornments;
+  var _ref6 = (_props$processLayout = props.processLayout == null ? void 0 : props.processLayout(props)) != null ? _props$processLayout : props,
+    className = _ref6.className,
+    children = _ref6.children,
+    style = _ref6.style,
+    errorControl = _ref6.errorControl,
+    label = _ref6.label,
+    adornments = _ref6.adornments;
   var layout = {
     children: children,
     errorControl: errorControl,
@@ -1592,268 +1642,128 @@ function renderLayoutParts(props, renderer) {
 function controlTitle(title, field) {
   return title ? title : fieldDisplayName(field);
 }
-
-var _excluded = ["data", "display", "className", "style"],
-  _excluded2 = ["control", "convert"],
-  _excluded3 = ["errorText", "value", "onChange"],
-  _excluded4 = ["state", "options", "className", "convert", "required", "emptyText", "requiredText"];
-function createFormRenderer(customRenderers, defaultRenderers) {
-  var _customRenderers$find;
-  if (customRenderers === void 0) {
-    customRenderers = [];
-  }
-  if (defaultRenderers === void 0) {
-    defaultRenderers = createClassStyledRenderers();
-  }
-  var dataRegistrations = customRenderers.filter(isDataRegistration);
-  var groupRegistrations = customRenderers.filter(isGroupRegistration);
-  var adornmentRegistrations = customRenderers.filter(isAdornmentRegistration);
-  var displayRegistrations = customRenderers.filter(isDisplayRegistration);
-  var labelRenderers = customRenderers.filter(isLabelRegistration);
-  var arrayRenderers = customRenderers.filter(isArrayRegistration);
-  var actionRenderers = customRenderers.filter(isActionRegistration);
-  var layoutRenderers = customRenderers.filter(isLayoutRegistration);
-  var visibilityRenderer = (_customRenderers$find = customRenderers.find(isVisibilityRegistration)) != null ? _customRenderers$find : defaultRenderers.visibility;
-  var formRenderers = {
-    renderAction: renderAction,
-    renderData: renderData,
-    renderGroup: renderGroup,
-    renderDisplay: renderDisplay,
-    renderLabel: renderLabel,
-    renderArray: renderArray,
-    renderAdornment: renderAdornment,
-    renderLayout: renderLayout,
-    renderVisibility: visibilityRenderer.render
+function applyArrayLengthRestrictions(_ref7, disable) {
+  var _arrayControl$element, _arrayControl$element2;
+  var arrayControl = _ref7.arrayControl,
+    min = _ref7.min,
+    max = _ref7.max,
+    aa = _ref7.addAction,
+    ra = _ref7.removeAction,
+    required = _ref7.required;
+  var _applyLengthRestricti = applyLengthRestrictions((_arrayControl$element = (_arrayControl$element2 = arrayControl.elements) == null ? void 0 : _arrayControl$element2.length) != null ? _arrayControl$element : 0, min == null && required ? 1 : min, max, true, true),
+    removeAllowed = _applyLengthRestricti[0],
+    addAllowed = _applyLengthRestricti[1];
+  return {
+    addAction: disable || addAllowed ? aa : undefined,
+    removeAction: disable || removeAllowed ? ra : undefined,
+    removeDisabled: !removeAllowed,
+    addDisabled: !addAllowed
   };
-  function renderLayout(props) {
-    var _layoutRenderers$find;
-    var renderer = (_layoutRenderers$find = layoutRenderers.find(function (x) {
-      return !x.match || x.match(props);
-    })) != null ? _layoutRenderers$find : defaultRenderers.renderLayout;
-    return renderer.render(props, formRenderers);
-  }
-  function renderAdornment(props) {
-    var _adornmentRegistratio;
-    var renderer = (_adornmentRegistratio = adornmentRegistrations.find(function (x) {
-      return isOneOf(x.adornmentType, props.adornment.type);
-    })) != null ? _adornmentRegistratio : defaultRenderers.adornment;
-    return renderer.render(props);
-  }
-  function renderArray(props) {
-    var _arrayRenderers$;
-    return ((_arrayRenderers$ = arrayRenderers[0]) != null ? _arrayRenderers$ : defaultRenderers.array).render(props, formRenderers);
-  }
-  function renderLabel(props, labelStart, labelEnd) {
-    var _labelRenderers$find;
-    var renderer = (_labelRenderers$find = labelRenderers.find(function (x) {
-      return isOneOf(x.labelType, props.type);
-    })) != null ? _labelRenderers$find : defaultRenderers.label;
-    return renderer.render(props, labelStart, labelEnd, formRenderers);
-  }
-  function renderData(props) {
-    var _dataRegistrations$fi;
-    var renderType = props.renderOptions.type,
-      field = props.field;
-    var options = hasOptions(props);
-    var renderer = (_dataRegistrations$fi = dataRegistrations.find(function (x) {
-      var _x$collection, _field$collection, _x$options;
-      return ((_x$collection = x.collection) != null ? _x$collection : false) === ((_field$collection = field.collection) != null ? _field$collection : false) && ((_x$options = x.options) != null ? _x$options : false) === options && isOneOf(x.schemaType, field.type) && isOneOf(x.renderType, renderType) && (!x.match || x.match(props));
-    })) != null ? _dataRegistrations$fi : defaultRenderers.data;
-    var result = renderer.render(props, formRenderers);
-    if (typeof result === "function") return result;
-    return function (l) {
-      return _extends({}, l, {
-        children: result
-      });
-    };
-  }
-  function renderGroup(props) {
-    var _groupRegistrations$f;
-    var renderType = props.renderOptions.type;
-    var renderer = (_groupRegistrations$f = groupRegistrations.find(function (x) {
-      return isOneOf(x.renderType, renderType);
-    })) != null ? _groupRegistrations$f : defaultRenderers.group;
-    var result = renderer.render(props, formRenderers);
-    if (typeof result === "function") return result;
-    return function (l) {
-      return _extends({}, l, {
-        children: result
-      });
-    };
-  }
-  function renderAction(props) {
-    var _actionRenderers$find;
-    var renderer = (_actionRenderers$find = actionRenderers.find(function (x) {
-      return isOneOf(x.actionType, props.actionId);
-    })) != null ? _actionRenderers$find : defaultRenderers.action;
-    return renderer.render(props, formRenderers);
-  }
-  function renderDisplay(props) {
-    var _displayRegistrations;
-    var renderType = props.data.type;
-    var renderer = (_displayRegistrations = displayRegistrations.find(function (x) {
-      return isOneOf(x.renderType, renderType);
-    })) != null ? _displayRegistrations : defaultRenderers.display;
-    return renderer.render(props, formRenderers);
-  }
-  return formRenderers;
 }
-function createDefaultActionRenderer(options) {
+
+function isIconAdornment(a) {
+  return a.type === exports.ControlAdornmentType.Icon;
+}
+function createLayoutRenderer(render, options) {
+  return _extends({
+    type: "layout",
+    render: render
+  }, options);
+}
+function createArrayRenderer(render, options) {
+  return _extends({
+    type: "array",
+    render: render
+  }, options);
+}
+function createDataRenderer(render, options) {
+  return _extends({
+    type: "data",
+    render: render
+  }, options);
+}
+function createGroupRenderer(render, options) {
+  return _extends({
+    type: "group",
+    render: render
+  }, options);
+}
+function createDisplayRenderer(render, options) {
+  return _extends({
+    type: "display",
+    render: render
+  }, options);
+}
+function createLabelRenderer(render, options) {
+  return _extends({
+    type: "label",
+    render: render
+  }, options);
+}
+function createVisibilityRenderer(render, options) {
+  return _extends({
+    type: "visibility",
+    render: render
+  }, options);
+}
+function createAdornmentRenderer(render, options) {
+  return _extends({
+    type: "adornment"
+  }, options, {
+    render: render
+  });
+}
+
+var defaultTailwindTheme = {
+  label: {
+    groupLabelClass: "font-bold",
+    requiredElement: /*#__PURE__*/React__default["default"].createElement("span", {
+      className: "text-red-500"
+    }, " *")
+  },
+  array: {
+    removableClass: "grid grid-cols-[1fr_auto] items-center gap-x-2",
+    childClass: "grow my-2",
+    addActionClass: "my-2"
+  },
+  group: {
+    standardClassName: "flex flex-col gap-4",
+    gridClassName: "gap-x-2 gap-y-4",
+    flexClassName: "gap-2"
+  },
+  action: {
+    className: "bg-primary-500 rounded-lg p-3 text-white"
+  },
+  layout: {
+    className: "flex flex-col",
+    errorClass: "text-sm text-danger-500"
+  },
+  data: {
+    displayOnlyClass: "flex flex-row items-center gap-2"
+  }
+};
+
+var _excluded$2 = ["data", "display", "className", "style"];
+function createDefaultDisplayRenderer(options) {
   if (options === void 0) {
     options = {};
   }
-  function render(_ref) {
-    var onClick = _ref.onClick,
-      actionText = _ref.actionText;
-    return /*#__PURE__*/React__default["default"].createElement("button", {
-      className: options.className,
-      onClick: onClick
-    }, actionText);
-  }
   return {
-    render: render,
-    type: "action"
+    render: function render(props) {
+      return /*#__PURE__*/React__default["default"].createElement(DefaultDisplay, _extends({}, options, props));
+    },
+    type: "display"
   };
 }
-function createDefaultLabelRenderer(options) {
-  if (options === void 0) {
-    options = {
-      requiredElement: /*#__PURE__*/React__default["default"].createElement("span", null, " *")
-    };
-  }
-  var _options = options,
-    className = _options.className,
-    groupLabelClass = _options.groupLabelClass,
-    controlLabelClass = _options.controlLabelClass,
-    requiredElement = _options.requiredElement;
-  return {
-    render: function render(props, labelStart, labelEnd) {
-      return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, labelStart, /*#__PURE__*/React__default["default"].createElement("label", {
-        htmlFor: props.forId,
-        className: rendererClass(props.className, clsx__default["default"](className, props.type === exports.LabelType.Group && groupLabelClass, props.type === exports.LabelType.Control && controlLabelClass))
-      }, props.label, props.required && requiredElement), labelEnd);
-    },
-    type: "label"
-  };
-}
-function createDefaultArrayRenderer(options) {
-  var _ref2 = options != null ? options : {},
-    className = _ref2.className,
-    removableClass = _ref2.removableClass,
-    childClass = _ref2.childClass,
-    removableChildClass = _ref2.removableChildClass,
-    removeActionClass = _ref2.removeActionClass,
-    addActionClass = _ref2.addActionClass;
-  function render(_ref3, _ref4) {
-    var elementCount = _ref3.elementCount,
-      renderElement = _ref3.renderElement,
-      addAction = _ref3.addAction,
-      removeAction = _ref3.removeAction,
-      elementKey = _ref3.elementKey,
-      required = _ref3.required;
-    var renderAction = _ref4.renderAction;
-    var showRemove = !required || elementCount > 1;
-    return /*#__PURE__*/React__default["default"].createElement("div", null, /*#__PURE__*/React__default["default"].createElement("div", {
-      className: clsx__default["default"](className, removeAction && removableClass)
-    }, Array.from({
-      length: elementCount
-    }, function (_, x) {
-      return removeAction ? /*#__PURE__*/React__default["default"].createElement(React.Fragment, {
-        key: elementKey(x)
-      }, /*#__PURE__*/React__default["default"].createElement("div", {
-        className: clsx__default["default"](childClass, removableChildClass)
-      }, renderElement(x)), /*#__PURE__*/React__default["default"].createElement("div", {
-        className: removeActionClass
-      }, showRemove && renderAction(removeAction(x)))) : /*#__PURE__*/React__default["default"].createElement("div", {
-        key: elementKey(x),
-        className: childClass
-      }, renderElement(x));
-    })), addAction && /*#__PURE__*/React__default["default"].createElement("div", {
-      className: addActionClass
-    }, renderAction(addAction)));
-  }
-  return {
-    render: render,
-    type: "array"
-  };
-}
-function createDefaultGroupRenderer(options) {
-  var _ref5 = options != null ? options : {},
-    className = _ref5.className,
-    _ref5$gridStyles = _ref5.gridStyles,
-    gridStyles = _ref5$gridStyles === void 0 ? defaultGridStyles : _ref5$gridStyles,
-    _ref5$defaultGridColu = _ref5.defaultGridColumns,
-    defaultGridColumns = _ref5$defaultGridColu === void 0 ? 2 : _ref5$defaultGridColu,
-    gridClassName = _ref5.gridClassName,
-    standardClassName = _ref5.standardClassName,
-    flexClassName = _ref5.flexClassName,
-    defaultFlexGap = _ref5.defaultFlexGap;
-  function defaultGridStyles(_ref6) {
-    var _ref6$columns = _ref6.columns,
-      columns = _ref6$columns === void 0 ? defaultGridColumns : _ref6$columns;
-    return {
-      className: gridClassName,
-      style: {
-        display: "grid",
-        gridTemplateColumns: "repeat(" + columns + ", 1fr)"
-      }
-    };
-  }
-  function flexStyles(options) {
-    return {
-      className: flexClassName,
-      style: {
-        display: "flex",
-        gap: options.gap ? options.gap : defaultFlexGap,
-        flexDirection: options.direction ? options.direction : undefined
-      }
-    };
-  }
-  function render(props) {
-    var renderChild = props.renderChild,
-      renderOptions = props.renderOptions,
-      childDefinitions = props.childDefinitions;
-    var _ref7 = isGridRenderer(renderOptions) ? gridStyles(renderOptions) : isFlexRenderer(renderOptions) ? flexStyles(renderOptions) : {
-        className: standardClassName
-      },
-      style = _ref7.style,
-      gcn = _ref7.className;
-    return function (cp) {
-      return _extends({}, cp, {
-        children: /*#__PURE__*/React__default["default"].createElement("div", {
-          className: rendererClass(props.className, clsx__default["default"](className, gcn)),
-          style: style
-        }, childDefinitions == null ? void 0 : childDefinitions.map(function (c, i) {
-          return renderChild(i, i);
-        }))
-      });
-    };
-  }
-  return {
-    type: "group",
-    render: render
-  };
-}
-function createDefaultDisplayRenderer(options) {
-  if (options === void 0) {
-    options = {};
-  }
-  return {
-    render: function render(props) {
-      return /*#__PURE__*/React__default["default"].createElement(DefaultDisplay, _extends({}, options, props));
-    },
-    type: "display"
-  };
-}
-function DefaultDisplay(_ref8) {
+function DefaultDisplay(_ref) {
   var _effect = core.useComponentTracking();
   try {
     var _display$value;
-    var data = _ref8.data,
-      display = _ref8.display,
-      className = _ref8.className,
-      style = _ref8.style,
-      options = _objectWithoutPropertiesLoose(_ref8, _excluded);
+    var data = _ref.data,
+      display = _ref.display,
+      className = _ref.className,
+      style = _ref.style,
+      options = _objectWithoutPropertiesLoose(_ref, _excluded$2);
     switch (data.type) {
       case exports.DisplayDataType.Icon:
         return /*#__PURE__*/React__default["default"].createElement("i", {
@@ -1880,131 +1790,175 @@ function DefaultDisplay(_ref8) {
     _effect();
   }
 }
-var DefaultBoolOptions = [{
-  name: "Yes",
-  value: true
-}, {
-  name: "No",
-  value: false
-}];
-function createDefaultDataRenderer(options) {
-  var _options$selectOption;
+
+function DefaultLayout(_ref) {
+  var _effect = core.useComponentTracking();
+  try {
+    var errorClass = _ref.errorClass,
+      _ref$layout = _ref.layout,
+      controlEnd = _ref$layout.controlEnd,
+      controlStart = _ref$layout.controlStart,
+      label = _ref$layout.label,
+      children = _ref$layout.children,
+      errorControl = _ref$layout.errorControl;
+    var ec = errorControl;
+    var errorText = ec && ec.touched ? ec.error : undefined;
+    return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, label, controlStart, children, errorText && /*#__PURE__*/React__default["default"].createElement("div", {
+      className: errorClass
+    }, errorText), controlEnd);
+  } finally {
+    _effect();
+  }
+}
+
+function createDefaultVisibilityRenderer() {
+  return createVisibilityRenderer(function (props) {
+    return /*#__PURE__*/React__default["default"].createElement(DefaultVisibility, props);
+  });
+}
+function DefaultVisibility(_ref) {
+  var _effect = core.useComponentTracking();
+  try {
+    var visibility = _ref.visibility,
+      children = _ref.children,
+      className = _ref.className,
+      style = _ref.style,
+      divRef = _ref.divRef;
+    var v = visibility.value;
+    React.useEffect(function () {
+      if (v) {
+        visibility.setValue(function (ex) {
+          return {
+            visible: v.visible,
+            showing: v.visible
+          };
+        });
+      }
+    }, [v == null ? void 0 : v.visible]);
+    return v != null && v.visible ? /*#__PURE__*/React__default["default"].createElement("div", {
+      className: clsx__default["default"](className),
+      style: style,
+      ref: divRef
+    }, children) : /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null);
+  } finally {
+    _effect();
+  }
+}
+
+var _excluded$1 = ["state", "options", "className", "convert", "required", "emptyText", "requiredText", "readonly"];
+function createSelectRenderer(options) {
   if (options === void 0) {
     options = {};
   }
-  var selectRenderer = createSelectRenderer((_options$selectOption = options.selectOptions) != null ? _options$selectOption : {});
-  var _optionRenderer$boole = _extends({
-      optionRenderer: selectRenderer,
-      booleanOptions: DefaultBoolOptions
-    }, options),
-    inputClass = _optionRenderer$boole.inputClass,
-    booleanOptions = _optionRenderer$boole.booleanOptions,
-    optionRenderer = _optionRenderer$boole.optionRenderer,
-    displayOnlyClass = _optionRenderer$boole.displayOnlyClass;
-  return createDataRenderer(function (props, renderers) {
-    var fieldType = props.field.type;
-    if (props.toArrayProps) {
-      return function (p) {
-        return _extends({}, p, {
-          children: renderers.renderArray(props.toArrayProps())
-        });
-      };
-    }
-    var renderOptions = props.renderOptions;
-    if (fieldType === exports.FieldType.Compound) {
-      var groupOptions = isDataGroupRenderer(renderOptions) ? renderOptions.groupOptions : undefined;
-      var style = props.style,
-        className = props.className,
-        childDefinitions = props.childDefinitions,
-        renderChild = props.renderChild,
-        dataContext = props.dataContext,
-        useChildVisibility = props.useChildVisibility;
-      return renderers.renderGroup({
-        style: style,
-        className: className,
-        childDefinitions: childDefinitions,
-        renderOptions: groupOptions != null ? groupOptions : {
-          type: "Standard",
-          hideTitle: true
-        },
-        renderChild: renderChild,
-        dataContext: dataContext,
-        useChildVisibility: useChildVisibility
-      });
-    }
-    var renderType = renderOptions.type;
-    if (fieldType == exports.FieldType.Any) return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, "No control for Any");
-    if (isDisplayOnlyRenderer(renderOptions)) return function (p) {
-      return _extends({}, p, {
-        className: displayOnlyClass,
-        children: /*#__PURE__*/React__default["default"].createElement(DefaultDisplayOnly, {
-          field: props.field,
-          schemaInterface: props.dataContext.schemaInterface,
-          control: props.control,
-          className: props.className,
-          style: props.style,
-          emptyText: renderOptions.emptyText
-        })
-      });
-    };
-    var isBool = fieldType === exports.FieldType.Bool;
-    if (booleanOptions != null && isBool && props.options == null) {
-      return renderers.renderData(_extends({}, props, {
-        options: booleanOptions
-      }));
-    }
-    if (renderType === exports.DataRenderType.Standard && hasOptions(props)) {
-      return optionRenderer.render(props, renderers);
-    }
-    switch (renderType) {
-      case exports.DataRenderType.Dropdown:
-        return selectRenderer.render(props, renderers);
-    }
-    return renderType === exports.DataRenderType.Checkbox ? /*#__PURE__*/React__default["default"].createElement(core.Fcheckbox, {
-      style: props.style,
-      className: props.className,
-      control: props.control
-    }) : /*#__PURE__*/React__default["default"].createElement(ControlInput, {
-      className: rendererClass(props.className, inputClass),
-      style: props.style,
+  return createDataRenderer(function (props, asArray) {
+    return /*#__PURE__*/React__default["default"].createElement(SelectDataRenderer, {
+      className: rendererClass(props.className, options.className),
+      state: props.control,
       id: props.id,
-      readOnly: props.readonly,
-      control: props.control,
-      convert: createInputConversion(props.field.type)
+      readonly: props.readonly,
+      options: props.options,
+      required: props.required,
+      emptyText: options.emptyText,
+      requiredText: options.requiredText,
+      convert: createSelectConversion(props.field.type)
     });
+  }, {
+    options: true
   });
 }
-function DefaultDisplayOnly(_ref9) {
-  var _effect2 = core.useComponentTracking();
+function SelectDataRenderer(_ref) {
+  var _effect = core.useComponentTracking();
+  try {
+    var state = _ref.state,
+      options = _ref.options,
+      className = _ref.className,
+      convert = _ref.convert,
+      required = _ref.required,
+      _ref$emptyText = _ref.emptyText,
+      emptyText = _ref$emptyText === void 0 ? "N/A" : _ref$emptyText,
+      _ref$requiredText = _ref.requiredText,
+      requiredText = _ref$requiredText === void 0 ? "<please select>" : _ref$requiredText,
+      readonly = _ref.readonly,
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$1);
+    var value = state.value,
+      disabled = state.disabled;
+    var _useState = React.useState(!required || value == null),
+      showEmpty = _useState[0];
+    var optionStringMap = React.useMemo(function () {
+      return Object.fromEntries(options.map(function (x) {
+        return [convert(x.value), x.value];
+      }));
+    }, [options]);
+    return /*#__PURE__*/React__default["default"].createElement("select", _extends({}, props, {
+      className: className,
+      onChange: function onChange(v) {
+        return state.value = optionStringMap[v.target.value];
+      },
+      value: convert(value),
+      disabled: disabled || readonly
+    }), showEmpty && /*#__PURE__*/React__default["default"].createElement("option", {
+      value: ""
+    }, required ? requiredText : emptyText), options.map(function (x, i) {
+      return /*#__PURE__*/React__default["default"].createElement("option", {
+        key: i,
+        value: convert(x.value),
+        disabled: !!x.disabled
+      }, x.name);
+    }));
+  } finally {
+    _effect();
+  }
+}
+function createSelectConversion(ft) {
+  switch (ft) {
+    case exports.FieldType.String:
+    case exports.FieldType.Int:
+    case exports.FieldType.Double:
+      return function (a) {
+        return a;
+      };
+    default:
+      return function (a) {
+        var _a$toString;
+        return (_a$toString = a == null ? void 0 : a.toString()) != null ? _a$toString : "";
+      };
+  }
+}
+
+function DefaultDisplayOnly(_ref) {
+  var _effect = core.useComponentTracking();
   try {
-    var _ref10;
-    var control = _ref9.control,
-      className = _ref9.className,
-      emptyText = _ref9.emptyText,
-      schemaInterface = _ref9.schemaInterface,
-      field = _ref9.field,
-      style = _ref9.style;
+    var _ref2;
+    var control = _ref.control,
+      className = _ref.className,
+      emptyText = _ref.emptyText,
+      schemaInterface = _ref.schemaInterface,
+      field = _ref.field,
+      style = _ref.style;
     var v = control.value;
-    var text = (_ref10 = schemaInterface.isEmptyValue(field, v) ? emptyText : schemaInterface.textValue(field, v)) != null ? _ref10 : "";
+    var text = (_ref2 = schemaInterface.isEmptyValue(field, v) ? emptyText : schemaInterface.textValue(field, v)) != null ? _ref2 : "";
     return /*#__PURE__*/React__default["default"].createElement("div", {
       style: style,
       className: rendererClass(className)
     }, text);
   } finally {
-    _effect2();
+    _effect();
   }
 }
-function ControlInput(_ref11) {
-  var _effect3 = core.useComponentTracking();
+
+var _excluded = ["control", "convert"],
+  _excluded2 = ["errorText", "value", "onChange"];
+function ControlInput(_ref) {
+  var _effect = core.useComponentTracking();
   try {
-    var control = _ref11.control,
-      convert = _ref11.convert,
-      props = _objectWithoutPropertiesLoose(_ref11, _excluded2);
+    var control = _ref.control,
+      convert = _ref.convert,
+      props = _objectWithoutPropertiesLoose(_ref, _excluded);
     var _formControlProps = core.formControlProps(control),
       errorText = _formControlProps.errorText,
       value = _formControlProps.value,
       onChange = _formControlProps.onChange,
-      inputProps = _objectWithoutPropertiesLoose(_formControlProps, _excluded3);
+      inputProps = _objectWithoutPropertiesLoose(_formControlProps, _excluded2);
     return /*#__PURE__*/React__default["default"].createElement("input", _extends({}, inputProps, {
       type: convert[0],
       value: value == null ? "" : convert[2](value),
@@ -2013,19 +1967,332 @@ function ControlInput(_ref11) {
       }
     }, props));
   } finally {
-    _effect3();
+    _effect();
   }
 }
-function createDefaultAdornmentRenderer(options) {
-  return {
-    type: "adornment",
-    render: function render(_ref12) {
-      var adornment = _ref12.adornment;
-      return {
-        apply: function apply(rl) {
-          if (isIconAdornment(adornment)) {
-            var _adornment$placement;
-            return appendMarkupAt((_adornment$placement = adornment.placement) != null ? _adornment$placement : exports.AdornmentPlacement.ControlStart, /*#__PURE__*/React__default["default"].createElement("i", {
+function createInputConversion(ft) {
+  switch (ft) {
+    case exports.FieldType.String:
+      return ["text", function (a) {
+        return a;
+      }, function (a) {
+        return a;
+      }];
+    case exports.FieldType.Bool:
+      return ["text", function (a) {
+        return a === "true";
+      }, function (a) {
+        var _a$toString;
+        return (_a$toString = a == null ? void 0 : a.toString()) != null ? _a$toString : "";
+      }];
+    case exports.FieldType.Int:
+      return ["number", function (a) {
+        return a !== "" ? parseInt(a) : null;
+      }, function (a) {
+        return a == null ? "" : a;
+      }];
+    case exports.FieldType.Date:
+      return ["date", function (a) {
+        return a;
+      }, function (a) {
+        return a;
+      }];
+    case exports.FieldType.Double:
+      return ["number", function (a) {
+        return parseFloat(a);
+      }, function (a) {
+        return a;
+      }];
+    default:
+      return ["text", function (a) {
+        return a;
+      }, function (a) {
+        return a;
+      }];
+  }
+}
+
+function createRadioRenderer(options) {
+  if (options === void 0) {
+    options = {};
+  }
+  return createDataRenderer(function (p) {
+    return /*#__PURE__*/React__default["default"].createElement(RadioButtons, _extends({}, options, p, {
+      className: rendererClass(p.className, options.className),
+      control: p.control
+    }));
+  }, {
+    renderType: exports.DataRenderType.Radio
+  });
+}
+function RadioButtons(_ref) {
+  var _effect = core.useComponentTracking();
+  try {
+    var control = _ref.control,
+      options = _ref.options,
+      labelClass = _ref.labelClass,
+      radioClass = _ref.radioClass,
+      readonly = _ref.readonly,
+      entryClass = _ref.entryClass,
+      className = _ref.className,
+      id = _ref.id;
+    var disabled = control.disabled;
+    var canChange = !disabled && !readonly;
+    var name = "r" + control.uniqueId;
+    return /*#__PURE__*/React__default["default"].createElement("div", {
+      className: className,
+      id: id
+    }, /*#__PURE__*/React__default["default"].createElement(core.RenderArrayElements, {
+      array: options == null ? void 0 : options.filter(function (x) {
+        return x.value != null;
+      })
+    }, function (o, i) {
+      return /*#__PURE__*/React__default["default"].createElement("div", {
+        key: i,
+        className: entryClass
+      }, /*#__PURE__*/React__default["default"].createElement("input", {
+        id: name + "_" + i,
+        className: radioClass,
+        type: "radio",
+        name: name,
+        readOnly: readonly,
+        disabled: disabled,
+        checked: control.value == o.value,
+        onChange: function onChange(x) {
+          return control.value = o.value;
+        }
+      }), /*#__PURE__*/React__default["default"].createElement("label", {
+        className: labelClass,
+        htmlFor: name + "_" + i
+      }, o.name));
+    }));
+  } finally {
+    _effect();
+  }
+}
+
+function createDefaultArrayRenderer(options) {
+  return {
+    render: function render(props, _ref) {
+      var renderAction = _ref.renderAction;
+      return /*#__PURE__*/React__default["default"].createElement(DefaultArrayRenderer, _extends({}, props, options, {
+        renderAction: renderAction
+      }));
+    },
+    type: "array"
+  };
+}
+function DefaultArrayRenderer(props) {
+  var _effect = core.useComponentTracking();
+  try {
+    var renderElement = props.renderElement,
+      className = props.className,
+      removableClass = props.removableClass,
+      childClass = props.childClass,
+      removableChildClass = props.removableChildClass,
+      removeActionClass = props.removeActionClass,
+      addActionClass = props.addActionClass,
+      arrayControl = props.arrayControl,
+      renderAction = props.renderAction,
+      style = props.style;
+    var _applyArrayLengthRest = applyArrayLengthRestrictions(props),
+      addAction = _applyArrayLengthRest.addAction,
+      removeAction = _applyArrayLengthRest.removeAction;
+    return /*#__PURE__*/React__default["default"].createElement("div", {
+      style: style
+    }, /*#__PURE__*/React__default["default"].createElement("div", {
+      className: clsx__default["default"](className, removeAction && removableClass)
+    }, /*#__PURE__*/React__default["default"].createElement(core.RenderElements, {
+      control: arrayControl
+    }, function (_, x) {
+      return removeAction ? /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement("div", {
+        className: clsx__default["default"](childClass, removableChildClass)
+      }, renderElement(x)), /*#__PURE__*/React__default["default"].createElement("div", {
+        className: removeActionClass
+      }, renderAction(removeAction(x)))) : /*#__PURE__*/React__default["default"].createElement("div", {
+        className: childClass
+      }, renderElement(x));
+    })), addAction && /*#__PURE__*/React__default["default"].createElement("div", {
+      className: addActionClass
+    }, renderAction(addAction)));
+  } finally {
+    _effect();
+  }
+}
+
+function createDefaultActionRenderer(options) {
+  if (options === void 0) {
+    options = {};
+  }
+  function render(_ref) {
+    var onClick = _ref.onClick,
+      actionText = _ref.actionText;
+    return /*#__PURE__*/React__default["default"].createElement("button", {
+      className: options.className,
+      onClick: onClick
+    }, actionText);
+  }
+  return {
+    render: render,
+    type: "action"
+  };
+}
+function createDefaultGroupRenderer(options) {
+  var _ref2 = options != null ? options : {},
+    className = _ref2.className,
+    _ref2$gridStyles = _ref2.gridStyles,
+    gridStyles = _ref2$gridStyles === void 0 ? defaultGridStyles : _ref2$gridStyles,
+    _ref2$defaultGridColu = _ref2.defaultGridColumns,
+    defaultGridColumns = _ref2$defaultGridColu === void 0 ? 2 : _ref2$defaultGridColu,
+    gridClassName = _ref2.gridClassName,
+    standardClassName = _ref2.standardClassName,
+    flexClassName = _ref2.flexClassName,
+    defaultFlexGap = _ref2.defaultFlexGap;
+  function defaultGridStyles(_ref3) {
+    var _ref3$columns = _ref3.columns,
+      columns = _ref3$columns === void 0 ? defaultGridColumns : _ref3$columns;
+    return {
+      className: gridClassName,
+      style: {
+        display: "grid",
+        gridTemplateColumns: "repeat(" + columns + ", 1fr)"
+      }
+    };
+  }
+  function flexStyles(options) {
+    return {
+      className: flexClassName,
+      style: {
+        display: "flex",
+        gap: options.gap ? options.gap : defaultFlexGap,
+        flexDirection: options.direction ? options.direction : undefined
+      }
+    };
+  }
+  function render(props) {
+    var renderChild = props.renderChild,
+      renderOptions = props.renderOptions,
+      childDefinitions = props.childDefinitions;
+    var _ref4 = isGridRenderer(renderOptions) ? gridStyles(renderOptions) : isFlexRenderer(renderOptions) ? flexStyles(renderOptions) : {
+        className: standardClassName
+      },
+      style = _ref4.style,
+      gcn = _ref4.className;
+    return function (cp) {
+      return _extends({}, cp, {
+        children: /*#__PURE__*/React__default["default"].createElement("div", {
+          className: rendererClass(props.className, clsx__default["default"](className, gcn)),
+          style: style
+        }, childDefinitions == null ? void 0 : childDefinitions.map(function (c, i) {
+          return renderChild(i, c);
+        }))
+      });
+    };
+  }
+  return {
+    type: "group",
+    render: render
+  };
+}
+var DefaultBoolOptions = [{
+  name: "Yes",
+  value: true
+}, {
+  name: "No",
+  value: false
+}];
+function createDefaultDataRenderer(options) {
+  if (options === void 0) {
+    options = {};
+  }
+  var selectRenderer = createSelectRenderer(options.selectOptions);
+  var radioRenderer = createRadioRenderer(options.radioOptions);
+  var _optionRenderer$boole = _extends({
+      optionRenderer: selectRenderer,
+      booleanOptions: DefaultBoolOptions
+    }, options),
+    inputClass = _optionRenderer$boole.inputClass,
+    booleanOptions = _optionRenderer$boole.booleanOptions,
+    optionRenderer = _optionRenderer$boole.optionRenderer,
+    displayOnlyClass = _optionRenderer$boole.displayOnlyClass;
+  return createDataRenderer(function (props, renderers) {
+    var fieldType = props.field.type;
+    if (props.toArrayProps) {
+      return function (p) {
+        return _extends({}, p, {
+          children: renderers.renderArray(props.toArrayProps())
+        });
+      };
+    }
+    var renderOptions = props.renderOptions;
+    if (fieldType === exports.FieldType.Compound) {
+      var _ref5;
+      var groupOptions = (_ref5 = isDataGroupRenderer(renderOptions) ? renderOptions.groupOptions : undefined) != null ? _ref5 : {
+        type: "Standard",
+        hideTitle: true
+      };
+      return renderers.renderGroup(_extends({}, props, {
+        renderOptions: groupOptions
+      }));
+    }
+    var renderType = renderOptions.type;
+    if (fieldType == exports.FieldType.Any) return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, "No control for Any");
+    if (isDisplayOnlyRenderer(renderOptions)) return function (p) {
+      return _extends({}, p, {
+        className: displayOnlyClass,
+        children: /*#__PURE__*/React__default["default"].createElement(DefaultDisplayOnly, {
+          field: props.field,
+          schemaInterface: props.dataContext.schemaInterface,
+          control: props.control,
+          className: props.className,
+          style: props.style,
+          emptyText: renderOptions.emptyText
+        })
+      });
+    };
+    var isBool = fieldType === exports.FieldType.Bool;
+    if (booleanOptions != null && isBool && props.options == null) {
+      return renderers.renderData(_extends({}, props, {
+        options: booleanOptions
+      }));
+    }
+    if (renderType === exports.DataRenderType.Standard && hasOptions(props)) {
+      return optionRenderer.render(props, renderers);
+    }
+    switch (renderType) {
+      case exports.DataRenderType.Dropdown:
+        return selectRenderer.render(props, renderers);
+      case exports.DataRenderType.Radio:
+        return radioRenderer.render(props, renderers);
+      case exports.DataRenderType.Checkbox:
+        return /*#__PURE__*/React__default["default"].createElement(core.Fcheckbox, {
+          style: props.style,
+          className: props.className,
+          control: props.control
+        });
+    }
+    var placeholder = isTextfieldRenderer(renderOptions) ? renderOptions.placeholder : undefined;
+    return /*#__PURE__*/React__default["default"].createElement(ControlInput, {
+      className: rendererClass(props.className, inputClass),
+      style: props.style,
+      id: props.id,
+      readOnly: props.readonly,
+      control: props.control,
+      placeholder: placeholder != null ? placeholder : undefined,
+      convert: createInputConversion(props.field.type)
+    });
+  });
+}
+function createDefaultAdornmentRenderer(options) {
+  return {
+    type: "adornment",
+    render: function render(_ref6) {
+      var adornment = _ref6.adornment;
+      return {
+        apply: function apply(rl) {
+          if (isIconAdornment(adornment)) {
+            var _adornment$placement;
+            return appendMarkupAt((_adornment$placement = adornment.placement) != null ? _adornment$placement : exports.AdornmentPlacement.ControlStart, /*#__PURE__*/React__default["default"].createElement("i", {
               className: adornment.iconClass
             }))(rl);
           }
@@ -2036,22 +2303,6 @@ function createDefaultAdornmentRenderer(options) {
     }
   };
 }
-function createDefaultRenderers(options) {
-  if (options === void 0) {
-    options = {};
-  }
-  return {
-    data: createDefaultDataRenderer(options.data),
-    display: createDefaultDisplayRenderer(options.display),
-    action: createDefaultActionRenderer(options.action),
-    array: createDefaultArrayRenderer(options.array),
-    group: createDefaultGroupRenderer(options.group),
-    label: createDefaultLabelRenderer(options.label),
-    adornment: createDefaultAdornmentRenderer(),
-    renderLayout: createDefaultLayoutRenderer(options.layout),
-    visibility: createDefaultVisibilityRenderer()
-  };
-}
 function createDefaultLayoutRenderer(options) {
   if (options === void 0) {
     options = {};
@@ -2070,7 +2321,147 @@ function createDefaultLayoutRenderer(options) {
         return e && props.errorControl ? props.errorControl.meta.scrollElement = e : undefined;
       }
     };
-  });
+  });
+}
+function createDefaultLabelRenderer(options) {
+  var _requiredElement$labe = _extends({
+      requiredElement: /*#__PURE__*/React__default["default"].createElement("span", null, " *"),
+      labelContainer: function labelContainer(c) {
+        return c;
+      }
+    }, options),
+    className = _requiredElement$labe.className,
+    groupLabelClass = _requiredElement$labe.groupLabelClass,
+    controlLabelClass = _requiredElement$labe.controlLabelClass,
+    requiredElement = _requiredElement$labe.requiredElement,
+    labelContainer = _requiredElement$labe.labelContainer;
+  return {
+    render: function render(props, labelStart, labelEnd) {
+      return labelContainer( /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, labelStart, /*#__PURE__*/React__default["default"].createElement("label", {
+        htmlFor: props.forId,
+        className: rendererClass(props.className, clsx__default["default"](className, props.type === exports.LabelType.Group && groupLabelClass, props.type === exports.LabelType.Control && controlLabelClass))
+      }, props.label, props.required && requiredElement), labelEnd));
+    },
+    type: "label"
+  };
+}
+function createDefaultRenderers(options) {
+  if (options === void 0) {
+    options = {};
+  }
+  return {
+    data: createDefaultDataRenderer(options.data),
+    display: createDefaultDisplayRenderer(options.display),
+    action: createDefaultActionRenderer(options.action),
+    array: createDefaultArrayRenderer(options.array),
+    group: createDefaultGroupRenderer(options.group),
+    label: createDefaultLabelRenderer(options.label),
+    adornment: createDefaultAdornmentRenderer(),
+    renderLayout: createDefaultLayoutRenderer(options.layout),
+    visibility: createDefaultVisibilityRenderer()
+  };
+}
+
+function createFormRenderer(customRenderers, defaultRenderers) {
+  var _customRenderers$find;
+  if (customRenderers === void 0) {
+    customRenderers = [];
+  }
+  if (defaultRenderers === void 0) {
+    defaultRenderers = createClassStyledRenderers();
+  }
+  var dataRegistrations = customRenderers.filter(isDataRegistration);
+  var groupRegistrations = customRenderers.filter(isGroupRegistration);
+  var adornmentRegistrations = customRenderers.filter(isAdornmentRegistration);
+  var displayRegistrations = customRenderers.filter(isDisplayRegistration);
+  var labelRenderers = customRenderers.filter(isLabelRegistration);
+  var arrayRenderers = customRenderers.filter(isArrayRegistration);
+  var actionRenderers = customRenderers.filter(isActionRegistration);
+  var layoutRenderers = customRenderers.filter(isLayoutRegistration);
+  var visibilityRenderer = (_customRenderers$find = customRenderers.find(isVisibilityRegistration)) != null ? _customRenderers$find : defaultRenderers.visibility;
+  var formRenderers = {
+    renderAction: renderAction,
+    renderData: renderData,
+    renderGroup: renderGroup,
+    renderDisplay: renderDisplay,
+    renderLabel: renderLabel,
+    renderArray: renderArray,
+    renderAdornment: renderAdornment,
+    renderLayout: renderLayout,
+    renderVisibility: visibilityRenderer.render
+  };
+  function renderLayout(props) {
+    var _layoutRenderers$find;
+    var renderer = (_layoutRenderers$find = layoutRenderers.find(function (x) {
+      return !x.match || x.match(props);
+    })) != null ? _layoutRenderers$find : defaultRenderers.renderLayout;
+    return renderer.render(props, formRenderers);
+  }
+  function renderAdornment(props) {
+    var _adornmentRegistratio;
+    var renderer = (_adornmentRegistratio = adornmentRegistrations.find(function (x) {
+      return isOneOf(x.adornmentType, props.adornment.type);
+    })) != null ? _adornmentRegistratio : defaultRenderers.adornment;
+    return renderer.render(props);
+  }
+  function renderArray(props) {
+    var _arrayRenderers$;
+    return ((_arrayRenderers$ = arrayRenderers[0]) != null ? _arrayRenderers$ : defaultRenderers.array).render(props, formRenderers);
+  }
+  function renderLabel(props, labelStart, labelEnd) {
+    var _labelRenderers$find;
+    var renderer = (_labelRenderers$find = labelRenderers.find(function (x) {
+      return isOneOf(x.labelType, props.type);
+    })) != null ? _labelRenderers$find : defaultRenderers.label;
+    return renderer.render(props, labelStart, labelEnd, formRenderers);
+  }
+  function renderData(props) {
+    var _dataRegistrations$fi;
+    var renderType = props.renderOptions.type,
+      field = props.field;
+    var options = hasOptions(props);
+    var renderer = (_dataRegistrations$fi = dataRegistrations.find(function (x) {
+      var _x$collection, _field$collection, _x$options;
+      return ((_x$collection = x.collection) != null ? _x$collection : false) === (props.elementIndex == null && ((_field$collection = field.collection) != null ? _field$collection : false)) && ((_x$options = x.options) != null ? _x$options : false) === options && (x.schemaType && isOneOf(x.schemaType, field.type) || x.renderType && isOneOf(x.renderType, renderType) || x.match && x.match(props));
+    })) != null ? _dataRegistrations$fi : defaultRenderers.data;
+    var result = renderer.render(props, formRenderers);
+    if (typeof result === "function") return result;
+    return function (l) {
+      return _extends({}, l, {
+        children: result
+      });
+    };
+  }
+  function renderGroup(props) {
+    var _groupRegistrations$f;
+    var renderType = props.renderOptions.type;
+    var renderer = (_groupRegistrations$f = groupRegistrations.find(function (x) {
+      return isOneOf(x.renderType, renderType);
+    })) != null ? _groupRegistrations$f : defaultRenderers.group;
+    var result = renderer.render(props, formRenderers);
+    if (typeof result === "function") return result;
+    return function (l) {
+      return _extends({}, l, {
+        children: result
+      });
+    };
+  }
+  function renderAction(props) {
+    var _actionRenderers$find;
+    var renderer = (_actionRenderers$find = actionRenderers.find(function (x) {
+      return isOneOf(x.actionType, props.actionId);
+    })) != null ? _actionRenderers$find : defaultRenderers.action;
+    return renderer.render(props, formRenderers);
+  }
+  function renderDisplay(props) {
+    var _displayRegistrations;
+    var renderType = props.data.type;
+    var renderer = (_displayRegistrations = displayRegistrations.find(function (x) {
+      return isOneOf(x.renderType, renderType);
+    })) != null ? _displayRegistrations : defaultRenderers.display;
+    return renderer.render(props, formRenderers);
+  }
+  return formRenderers;
 }
 function createClassStyledRenderers() {
   return createDefaultRenderers({
@@ -2095,6 +2486,9 @@ function createClassStyledRenderers() {
     }
   });
 }
+function isOneOf(x, v) {
+  return x == null ? true : Array.isArray(x) ? x.includes(v) : v === x;
+}
 function isAdornmentRegistration(x) {
   return x.type === "adornment";
 }
@@ -2122,259 +2516,6 @@ function isDisplayRegistration(x) {
 function isArrayRegistration(x) {
   return x.type === "array";
 }
-function isOneOf(x, v) {
-  return x == null ? true : Array.isArray(x) ? x.includes(v) : v === x;
-}
-function isIconAdornment(a) {
-  return a.type === exports.ControlAdornmentType.Icon;
-}
-function createLayoutRenderer(render, options) {
-  return _extends({
-    type: "layout",
-    render: render
-  }, options);
-}
-function createArrayRenderer(render, options) {
-  return _extends({
-    type: "array",
-    render: render
-  }, options);
-}
-function createDataRenderer(render, options) {
-  return _extends({
-    type: "data",
-    render: render
-  }, options);
-}
-function createGroupRenderer(render, options) {
-  return _extends({
-    type: "group",
-    render: render
-  }, options);
-}
-function createDisplayRenderer(render, options) {
-  return _extends({
-    type: "display",
-    render: render
-  }, options);
-}
-function createLabelRenderer(render, options) {
-  return _extends({
-    type: "label",
-    render: render
-  }, options);
-}
-function createVisibilityRenderer(render, options) {
-  return _extends({
-    type: "visibility",
-    render: render
-  }, options);
-}
-function createAdornmentRenderer(render, options) {
-  return _extends({
-    type: "adornment"
-  }, options, {
-    render: render
-  });
-}
-function createSelectRenderer(options) {
-  if (options === void 0) {
-    options = {};
-  }
-  return createDataRenderer(function (props, asArray) {
-    return /*#__PURE__*/React__default["default"].createElement(SelectDataRenderer, {
-      className: rendererClass(props.className, options.className),
-      state: props.control,
-      id: props.id,
-      options: props.options,
-      required: props.required,
-      emptyText: options.emptyText,
-      requiredText: options.requiredText,
-      convert: createSelectConversion(props.field.type)
-    });
-  }, {
-    options: true
-  });
-}
-function SelectDataRenderer(_ref13) {
-  var _effect4 = core.useComponentTracking();
-  try {
-    var state = _ref13.state,
-      options = _ref13.options,
-      className = _ref13.className,
-      convert = _ref13.convert,
-      required = _ref13.required,
-      _ref13$emptyText = _ref13.emptyText,
-      emptyText = _ref13$emptyText === void 0 ? "N/A" : _ref13$emptyText,
-      _ref13$requiredText = _ref13.requiredText,
-      requiredText = _ref13$requiredText === void 0 ? "<please select>" : _ref13$requiredText,
-      props = _objectWithoutPropertiesLoose(_ref13, _excluded4);
-    var value = state.value,
-      disabled = state.disabled;
-    var _useState = React.useState(!required || value == null),
-      showEmpty = _useState[0];
-    var optionStringMap = React.useMemo(function () {
-      return Object.fromEntries(options.map(function (x) {
-        return [convert(x.value), x.value];
-      }));
-    }, [options]);
-    return /*#__PURE__*/React__default["default"].createElement("select", _extends({}, props, {
-      className: className,
-      onChange: function onChange(v) {
-        return state.value = optionStringMap[v.target.value];
-      },
-      value: convert(value),
-      disabled: disabled
-    }), showEmpty && /*#__PURE__*/React__default["default"].createElement("option", {
-      value: ""
-    }, required ? requiredText : emptyText), options.map(function (x, i) {
-      return /*#__PURE__*/React__default["default"].createElement("option", {
-        key: i,
-        value: convert(x.value),
-        disabled: x.disabled
-      }, x.name);
-    }));
-  } finally {
-    _effect4();
-  }
-}
-function createSelectConversion(ft) {
-  switch (ft) {
-    case exports.FieldType.String:
-    case exports.FieldType.Int:
-    case exports.FieldType.Double:
-      return function (a) {
-        return a;
-      };
-    default:
-      return function (a) {
-        var _a$toString;
-        return (_a$toString = a == null ? void 0 : a.toString()) != null ? _a$toString : "";
-      };
-  }
-}
-function createInputConversion(ft) {
-  switch (ft) {
-    case exports.FieldType.String:
-      return ["text", function (a) {
-        return a;
-      }, function (a) {
-        return a;
-      }];
-    case exports.FieldType.Bool:
-      return ["text", function (a) {
-        return a === "true";
-      }, function (a) {
-        var _a$toString2;
-        return (_a$toString2 = a == null ? void 0 : a.toString()) != null ? _a$toString2 : "";
-      }];
-    case exports.FieldType.Int:
-      return ["number", function (a) {
-        return a !== "" ? parseInt(a) : null;
-      }, function (a) {
-        return a == null ? "" : a;
-      }];
-    case exports.FieldType.Date:
-      return ["date", function (a) {
-        return a;
-      }, function (a) {
-        return a;
-      }];
-    case exports.FieldType.Double:
-      return ["number", function (a) {
-        return parseFloat(a);
-      }, function (a) {
-        return a;
-      }];
-    default:
-      return ["text", function (a) {
-        return a;
-      }, function (a) {
-        return a;
-      }];
-  }
-}
-function createDefaultVisibilityRenderer() {
-  return createVisibilityRenderer(function (props) {
-    return /*#__PURE__*/React__default["default"].createElement(DefaultVisibility, props);
-  });
-}
-function DefaultVisibility(_ref14) {
-  var _effect5 = core.useComponentTracking();
-  try {
-    var visibility = _ref14.visibility,
-      children = _ref14.children,
-      className = _ref14.className,
-      style = _ref14.style,
-      divRef = _ref14.divRef;
-    var v = visibility.value;
-    React.useEffect(function () {
-      if (v) {
-        visibility.setValue(function (ex) {
-          return {
-            visible: v.visible,
-            showing: v.visible
-          };
-        });
-      }
-    }, [v == null ? void 0 : v.visible]);
-    return v != null && v.visible ? /*#__PURE__*/React__default["default"].createElement("div", {
-      className: clsx__default["default"](className),
-      style: style,
-      ref: divRef
-    }, children) : /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null);
-  } finally {
-    _effect5();
-  }
-}
-function DefaultLayout(_ref15) {
-  var _effect6 = core.useComponentTracking();
-  try {
-    var errorClass = _ref15.errorClass,
-      _ref15$layout = _ref15.layout,
-      controlEnd = _ref15$layout.controlEnd,
-      controlStart = _ref15$layout.controlStart,
-      label = _ref15$layout.label,
-      children = _ref15$layout.children,
-      errorControl = _ref15$layout.errorControl;
-    var ec = errorControl;
-    var errorText = ec && ec.touched ? ec.error : undefined;
-    return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, label, controlStart, children, errorText && /*#__PURE__*/React__default["default"].createElement("div", {
-      className: errorClass
-    }, errorText), controlEnd);
-  } finally {
-    _effect6();
-  }
-}
-
-var defaultTailwindTheme = {
-  label: {
-    groupLabelClass: "font-bold",
-    requiredElement: /*#__PURE__*/React__default["default"].createElement("span", {
-      className: "text-red-500"
-    }, " *")
-  },
-  array: {
-    removableClass: "grid grid-cols-[1fr_auto] items-center gap-x-2",
-    childClass: "grow my-2",
-    addActionClass: "my-2"
-  },
-  group: {
-    standardClassName: "flex flex-col gap-4",
-    gridClassName: "gap-x-2 gap-y-4",
-    flexClassName: "gap-2"
-  },
-  action: {
-    className: "bg-primary rounded-lg p-3 text-white"
-  },
-  layout: {
-    className: "flex flex-col",
-    errorClass: "text-sm text-danger-500"
-  },
-  data: {
-    displayOnlyClass: "flex flex-row items-center gap-2"
-  }
-};
 
 exports.AppendAdornmentPriority = AppendAdornmentPriority;
 exports.ControlInput = ControlInput;
@@ -2383,17 +2524,22 @@ exports.DefaultBoolOptions = DefaultBoolOptions;
 exports.DefaultDisplay = DefaultDisplay;
 exports.DefaultDisplayOnly = DefaultDisplayOnly;
 exports.DefaultLayout = DefaultLayout;
+exports.DefaultSchemaInterface = DefaultSchemaInterface;
 exports.DefaultVisibility = DefaultVisibility;
+exports.RadioButtons = RadioButtons;
 exports.SelectDataRenderer = SelectDataRenderer;
 exports.WrapAdornmentPriority = WrapAdornmentPriority;
 exports.addFieldOption = addFieldOption;
 exports.addMissingControls = addMissingControls;
+exports.appendElementIndex = appendElementIndex;
 exports.appendMarkup = appendMarkup;
 exports.appendMarkupAt = appendMarkupAt;
+exports.applyArrayLengthRestrictions = applyArrayLengthRestrictions;
 exports.applyDefaultForField = applyDefaultForField;
 exports.applyDefaultValues = applyDefaultValues;
 exports.applyExtensionToSchema = applyExtensionToSchema;
 exports.applyExtensionsToSchema = applyExtensionsToSchema;
+exports.applyLengthRestrictions = applyLengthRestrictions;
 exports.boolField = boolField;
 exports.buildSchema = buildSchema;
 exports.cleanDataForSchema = cleanDataForSchema;
@@ -2406,7 +2552,6 @@ exports.createArrayRenderer = createArrayRenderer;
 exports.createDataRenderer = createDataRenderer;
 exports.createDefaultActionRenderer = createDefaultActionRenderer;
 exports.createDefaultAdornmentRenderer = createDefaultAdornmentRenderer;
-exports.createDefaultArrayRenderer = createDefaultArrayRenderer;
 exports.createDefaultDataRenderer = createDefaultDataRenderer;
 exports.createDefaultDisplayRenderer = createDefaultDisplayRenderer;
 exports.createDefaultGroupRenderer = createDefaultGroupRenderer;
@@ -2419,6 +2564,7 @@ exports.createGroupRenderer = createGroupRenderer;
 exports.createInputConversion = createInputConversion;
 exports.createLabelRenderer = createLabelRenderer;
 exports.createLayoutRenderer = createLayoutRenderer;
+exports.createRadioRenderer = createRadioRenderer;
 exports.createSelectConversion = createSelectConversion;
 exports.createSelectRenderer = createSelectRenderer;
 exports.createVisibilityRenderer = createVisibilityRenderer;
@@ -2428,11 +2574,9 @@ exports.defaultCompoundField = defaultCompoundField;
 exports.defaultControlForField = defaultControlForField;
 exports.defaultDataProps = defaultDataProps;
 exports.defaultEvalHooks = defaultEvalHooks;
-exports.defaultIsEmpty = defaultIsEmpty;
 exports.defaultScalarField = defaultScalarField;
 exports.defaultSchemaInterface = defaultSchemaInterface;
 exports.defaultTailwindTheme = defaultTailwindTheme;
-exports.defaultTextValue = defaultTextValue;
 exports.defaultUseEvalExpressionHook = defaultUseEvalExpressionHook;
 exports.defaultValueForField = defaultValueForField;
 exports.defaultValueForFields = defaultValueForFields;
@@ -2473,6 +2617,7 @@ exports.isGroupControl = isGroupControl;
 exports.isGroupControlsDefinition = isGroupControlsDefinition;
 exports.isIconAdornment = isIconAdornment;
 exports.isScalarField = isScalarField;
+exports.isTextfieldRenderer = isTextfieldRenderer;
 exports.jsonPathString = jsonPathString;
 exports.jsonataExpr = jsonataExpr;
 exports.layoutKeyForPlacement = layoutKeyForPlacement;