@scenid/react-formulator 0.1.14 → 0.3.0

package/dist/index.cjs.js

@@ -4,19 +4,42 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var React = require('react');
 var PropTypes = require('prop-types');
-var core$1 = require('@material-ui/core');
+var _Input = require('@material-ui/core/esm/Input');
+var _Paper = require('@material-ui/core/esm/Paper');
+var _Box = require('@material-ui/core/esm/Box');
+var _Typography = require('@material-ui/core/esm/Typography');
+var styles$n = require('@material-ui/core/styles');
+var _FormGroup = require('@material-ui/core/esm/FormGroup');
+var _FormControl = require('@material-ui/core/esm/FormControl');
+var _FormHelperText = require('@material-ui/core/esm/FormHelperText');
+var _FormControlLabel = require('@material-ui/core/esm/FormControlLabel');
+var _InputAdornment = require('@material-ui/core/esm/InputAdornment');
 var cx = require('classnames');
-var styles$n = require('@material-ui/styles');
+var styles$o = require('@material-ui/styles');
 var AutorenewIcon = require('@material-ui/icons/Autorenew');
-var icons = require('@material-ui/icons');
+var _TextField = require('@material-ui/core/esm/TextField');
+var _MenuItem = require('@material-ui/core/esm/MenuItem');
+var _Switch = require('@material-ui/core/esm/Switch');
+var _Checkbox = require('@material-ui/core/esm/Checkbox');
+var _Select = require('@material-ui/core/esm/Select');
+var _InputLabel = require('@material-ui/core/esm/InputLabel');
+var _Clear = require('@material-ui/icons/esm/Clear');
+var _Save = require('@material-ui/icons/esm/Save');
+var _Button = require('@material-ui/core/esm/Button');
+var _List = require('@material-ui/core/esm/List');
+var _ListItem = require('@material-ui/core/esm/ListItem');
+var _ListItemSecondaryAction = require('@material-ui/core/esm/ListItemSecondaryAction');
+var _IconButton = require('@material-ui/core/esm/IconButton');
+var _Delete = require('@material-ui/icons/esm/Delete');
+var _ListItemText = require('@material-ui/core/esm/ListItemText');
 var luxon = require('luxon');
 var path$3 = require('path');
 var proc = require('process');
 var url = require('url');
-var styles$o = require('@material-ui/core/styles');
 var Paper = require('@material-ui/core/Paper');
 var utils = require('@material-ui/core/utils');
 var IconButton = require('@material-ui/core/IconButton');
+var core$1 = require('@material-ui/core');
 var Popper = require('@material-ui/core/Popper');
 var ListSubheader = require('@material-ui/core/ListSubheader');
 var Chip = require('@material-ui/core/Chip');
@@ -53,8 +76,32 @@ var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var React__namespace = /*#__PURE__*/_interopNamespace(React);
 var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
 var PropTypes__namespace = /*#__PURE__*/_interopNamespace(PropTypes);
+var _Input__default = /*#__PURE__*/_interopDefaultLegacy(_Input);
+var _Paper__default = /*#__PURE__*/_interopDefaultLegacy(_Paper);
+var _Box__default = /*#__PURE__*/_interopDefaultLegacy(_Box);
+var _Typography__default = /*#__PURE__*/_interopDefaultLegacy(_Typography);
+var _FormGroup__default = /*#__PURE__*/_interopDefaultLegacy(_FormGroup);
+var _FormControl__default = /*#__PURE__*/_interopDefaultLegacy(_FormControl);
+var _FormHelperText__default = /*#__PURE__*/_interopDefaultLegacy(_FormHelperText);
+var _FormControlLabel__default = /*#__PURE__*/_interopDefaultLegacy(_FormControlLabel);
+var _InputAdornment__default = /*#__PURE__*/_interopDefaultLegacy(_InputAdornment);
 var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
 var AutorenewIcon__default = /*#__PURE__*/_interopDefaultLegacy(AutorenewIcon);
+var _TextField__default = /*#__PURE__*/_interopDefaultLegacy(_TextField);
+var _MenuItem__default = /*#__PURE__*/_interopDefaultLegacy(_MenuItem);
+var _Switch__default = /*#__PURE__*/_interopDefaultLegacy(_Switch);
+var _Checkbox__default = /*#__PURE__*/_interopDefaultLegacy(_Checkbox);
+var _Select__default = /*#__PURE__*/_interopDefaultLegacy(_Select);
+var _InputLabel__default = /*#__PURE__*/_interopDefaultLegacy(_InputLabel);
+var _Clear__default = /*#__PURE__*/_interopDefaultLegacy(_Clear);
+var _Save__default = /*#__PURE__*/_interopDefaultLegacy(_Save);
+var _Button__default = /*#__PURE__*/_interopDefaultLegacy(_Button);
+var _List__default = /*#__PURE__*/_interopDefaultLegacy(_List);
+var _ListItem__default = /*#__PURE__*/_interopDefaultLegacy(_ListItem);
+var _ListItemSecondaryAction__default = /*#__PURE__*/_interopDefaultLegacy(_ListItemSecondaryAction);
+var _IconButton__default = /*#__PURE__*/_interopDefaultLegacy(_IconButton);
+var _Delete__default = /*#__PURE__*/_interopDefaultLegacy(_Delete);
+var _ListItemText__default = /*#__PURE__*/_interopDefaultLegacy(_ListItemText);
 var path__default = /*#__PURE__*/_interopDefaultLegacy(path$3);
 var proc__default = /*#__PURE__*/_interopDefaultLegacy(proc);
 var Paper__default = /*#__PURE__*/_interopDefaultLegacy(Paper);
@@ -29054,20 +29101,20 @@ var FormGroupHeader = function FormGroupHeader(_ref) {
       desc = _ref.desc,
       descVariant = _ref.descVariant,
       textAlign = _ref.textAlign;
-  return /*#__PURE__*/React__default["default"].createElement(core$1.Box, {
+  return /*#__PURE__*/React__default["default"].createElement(_Box__default["default"], {
     style: {
       width: '100%',
       display: 'flex',
       flexDirection: 'column'
     }
-  }, label && /*#__PURE__*/React__default["default"].createElement(core$1.Box, {
+  }, label && /*#__PURE__*/React__default["default"].createElement(_Box__default["default"], {
     mb: 2
-  }, /*#__PURE__*/React__default["default"].createElement(core$1.Typography, {
+  }, /*#__PURE__*/React__default["default"].createElement(_Typography__default["default"], {
     variant: labelVariant,
     align: textAlign
-  }, label)), desc && /*#__PURE__*/React__default["default"].createElement(core$1.Box, {
+  }, label)), desc && /*#__PURE__*/React__default["default"].createElement(_Box__default["default"], {
     mb: 2
-  }, /*#__PURE__*/React__default["default"].createElement(core$1.Typography, {
+  }, /*#__PURE__*/React__default["default"].createElement(_Typography__default["default"], {
     variant: descVariant,
     align: textAlign
   }, desc)));
@@ -29093,11 +29140,11 @@ var FormSectionCard = function FormSectionCard(_ref) {
       descVariant = _ref.descVariant,
       textAlign = _ref.textAlign,
       children = _ref.children;
-  return /*#__PURE__*/React__default["default"].createElement(core$1.Box, {
+  return /*#__PURE__*/React__default["default"].createElement(_Box__default["default"], {
     mb: 2
-  }, /*#__PURE__*/React__default["default"].createElement(core$1.Paper, {
+  }, /*#__PURE__*/React__default["default"].createElement(_Paper__default["default"], {
     elevation: 0
-  }, /*#__PURE__*/React__default["default"].createElement(core$1.Box, {
+  }, /*#__PURE__*/React__default["default"].createElement(_Box__default["default"], {
     p: 2
   }, /*#__PURE__*/React__default["default"].createElement(FormGroupHeader, {
     label: label,
@@ -29117,7 +29164,7 @@ FormSectionCard.propTypes = {
   children: PropTypes__default["default"].node
 };
 
-var useStyles$1 = core$1.makeStyles(function (theme) {
+var useStyles$1 = styles$n.makeStyles(function (theme) {
   return {
     formSectionBlock: {
       '&:not(:last-child)': {
@@ -29135,7 +29182,7 @@ var FormSectionBlock = function FormSectionBlock(_ref) {
       textAlign = _ref.textAlign,
       children = _ref.children;
   var styles = useStyles$1();
-  return /*#__PURE__*/React__default["default"].createElement(core$1.Box, {
+  return /*#__PURE__*/React__default["default"].createElement(_Box__default["default"], {
     className: styles.formSectionBlock
   }, /*#__PURE__*/React__default["default"].createElement(FormGroupHeader, {
     label: label,
@@ -29160,7 +29207,7 @@ var _excluded$5 = ["prepend", "append", "componentProps"];
 function ownKeys$4(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 
 function _objectSpread$4(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$4(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$4(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
-var useStyles = styles$n.makeStyles(function (theme) {
+var useStyles = styles$o.makeStyles(function (theme) {
   return {
     error: {
       color: theme.palette.error.main
@@ -29199,10 +29246,10 @@ var FormControlField$1 = function FormControlField(_ref) {
     onChange: onChange
   });
 
-  var isRender = type === 'render';
+  var isRender = type === '@@render';
 
   if (validating) {
-    finalProps.endAdornment = [/*#__PURE__*/React__default["default"].createElement(core$1.InputAdornment, {
+    finalProps.endAdornment = [/*#__PURE__*/React__default["default"].createElement(_InputAdornment__default["default"], {
       position: "end"
     }, /*#__PURE__*/React__default["default"].createElement(AutorenewIcon__default["default"], null))];
   }
@@ -29210,40 +29257,48 @@ var FormControlField$1 = function FormControlField(_ref) {
   var control;
 
   if (isRender) {
-    control = /*#__PURE__*/React__default["default"].cloneElement(component, _objectSpread$4(_objectSpread$4({
-      variant: variant
-    }, finalProps), {}, {
-      label: label,
-      hasErrors: hasErrors,
-      errors: errors,
-      dirty: dirty
-    }));
+    try {
+      control = /*#__PURE__*/React__default["default"].cloneElement(component, _objectSpread$4(_objectSpread$4({
+        variant: variant
+      }, finalProps), {}, {
+        label: label,
+        hasErrors: hasErrors,
+        errors: errors,
+        dirty: dirty
+      }));
+    } catch (e) {
+      throw new Error("error creating control for field \"".concat(name, "\": ").concat(e.message));
+    }
   } else {
-    control = /*#__PURE__*/React__default["default"].createElement(component, _objectSpread$4({
-      variant: variant
-    }, finalProps));
+    try {
+      control = /*#__PURE__*/React__default["default"].createElement(component, _objectSpread$4({
+        variant: variant
+      }, finalProps));
+    } catch (e) {
+      throw new Error("error creating control for field \"".concat(name, "\": ").concat(e.message));
+    }
   }
 
   var isSwitch = type === 'boolean';
-  var isRepeater = type === 'array' && !isRender;
+  var isRepeater = type === 'array';
 
   if (isRepeater || isRender) {
     return control;
   }
 
-  return /*#__PURE__*/React__default["default"].createElement(core$1.FormControl, {
+  return /*#__PURE__*/React__default["default"].createElement(_FormControl__default["default"], {
     className: "data-card-field",
     error: dirty && hasErrors,
     variant: variant,
     margin: "dense",
     fullWidth: true,
     required: required
-  }, isSwitch && /*#__PURE__*/React__default["default"].createElement(core$1.FormControlLabel, {
+  }, isSwitch && /*#__PURE__*/React__default["default"].createElement(_FormControlLabel__default["default"], {
     className: cx__default["default"](_defineProperty({}, styles.error, dirty && hasErrors)),
     control: control,
     label: label,
     labelPlacement: finalProps.labelPlacement || 'end'
-  }), !isSwitch && !isRepeater && !isRender && control, dirty && hasErrors && /*#__PURE__*/React__default["default"].createElement(core$1.FormHelperText, null, errors.map(function (e) {
+  }), !isSwitch && !isRepeater && !isRender && control, dirty && hasErrors && /*#__PURE__*/React__default["default"].createElement(_FormHelperText__default["default"], null, errors.map(function (e) {
     return e.message;
   }).join('. ')));
 };
@@ -29288,7 +29343,7 @@ var FormField = function FormField(_ref2) {
     });
   }
 
-  return /*#__PURE__*/React__default["default"].createElement(core$1.FormGroup, null, prepend, /*#__PURE__*/React__default["default"].createElement(FormControlField$1, finalProps), append);
+  return /*#__PURE__*/React__default["default"].createElement(_FormGroup__default["default"], null, prepend, /*#__PURE__*/React__default["default"].createElement(FormControlField$1, finalProps), append);
 };
 
 FormField.propTypes = {
@@ -29319,7 +29374,7 @@ var FormField$1 = /*#__PURE__*/React__default["default"].memo(FormField, functio
 function ownKeys$3(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 
 function _objectSpread$3(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$3(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$3(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
-
+// eslint-disable-next-line react/prop-types, react/jsx-props-no-spreading
 var FormText = (function (props) {
   var finalProps = _objectSpread$3({}, props);
 
@@ -29329,7 +29384,7 @@ var FormText = (function (props) {
     };
   }
 
-  return /*#__PURE__*/React__default["default"].createElement(core$1.TextField, finalProps);
+  return /*#__PURE__*/React__default["default"].createElement(_TextField__default["default"], finalProps);
 });
 
 function _extends() {
@@ -29370,7 +29425,7 @@ var FormNumber = function FormNumber(_ref) {
       _onChange = _ref.onChange,
       props = _objectWithoutProperties(_ref, _excluded$4);
 
-  return /*#__PURE__*/React__default["default"].createElement(core$1.TextField, _extends({
+  return /*#__PURE__*/React__default["default"].createElement(_TextField__default["default"], _extends({
     name: name,
     type: "number",
     value: castToNumber(value, step),
@@ -29419,14 +29474,14 @@ var FormSelect = function FormSelect(_ref) {
   var allOptions = [].concat(_toConsumableArray(unselectOption), _toConsumableArray(options.sort(function (l, r) {
     return l.label.localeCompare(r.label);
   })));
-  return /*#__PURE__*/React__default["default"].createElement(core$1.TextField, _extends({
+  return /*#__PURE__*/React__default["default"].createElement(_TextField__default["default"], _extends({
     select: true,
     required: required,
     value: value === undefined ? '' : value
   }, props), allOptions.map(function (_ref2) {
     var itemLabel = _ref2.label,
         itemValue = _ref2.value;
-    return /*#__PURE__*/React__default["default"].createElement(core$1.MenuItem, {
+    return /*#__PURE__*/React__default["default"].createElement(_MenuItem__default["default"], {
       key: itemLabel,
       value: itemValue
     }, itemLabel);
@@ -29472,7 +29527,7 @@ var FormBoolean = function FormBoolean(_ref) {
   };
 
   if (variant === 'checkbox') {
-    return /*#__PURE__*/React__default["default"].createElement(core$1.Checkbox, {
+    return /*#__PURE__*/React__default["default"].createElement(_Checkbox__default["default"], {
       color: "primary",
       name: name,
       checked: isChecked$1(value, defaultValue),
@@ -29480,7 +29535,7 @@ var FormBoolean = function FormBoolean(_ref) {
     });
   }
 
-  return /*#__PURE__*/React__default["default"].createElement(core$1.Switch, {
+  return /*#__PURE__*/React__default["default"].createElement(_Switch__default["default"], {
     color: "primary",
     name: name,
     checked: isChecked$1(value, defaultValue),
@@ -29603,58 +29658,58 @@ var FormRepeater = function FormRepeater(_ref) {
     });
   }
 
-  return /*#__PURE__*/React__default["default"].createElement(core$1.Box, null, /*#__PURE__*/React__default["default"].createElement(core$1.List, {
+  return /*#__PURE__*/React__default["default"].createElement(_Box__default["default"], null, /*#__PURE__*/React__default["default"].createElement(_List__default["default"], {
     dense: true
   }, entries.map(function (entry, index) {
     return (
       /*#__PURE__*/
       // eslint-disable-next-line react/no-array-index-key
-      React__default["default"].createElement(core$1.ListItem, {
+      React__default["default"].createElement(_ListItem__default["default"], {
         key: "entry-".concat(index)
-      }, /*#__PURE__*/React__default["default"].createElement(core$1.ListItemText, {
+      }, /*#__PURE__*/React__default["default"].createElement(_ListItemText__default["default"], {
         primary: getValue$1(entry, catalog)
-      }), /*#__PURE__*/React__default["default"].createElement(core$1.ListItemSecondaryAction, null, /*#__PURE__*/React__default["default"].createElement(core$1.IconButton, {
+      }), /*#__PURE__*/React__default["default"].createElement(_ListItemSecondaryAction__default["default"], null, /*#__PURE__*/React__default["default"].createElement(_IconButton__default["default"], {
         edge: "end",
         "aria-label": "delete",
         size: "small",
         onClick: function onClick() {
           return handleEntryDel(index);
         }
-      }, /*#__PURE__*/React__default["default"].createElement(icons.Delete, {
+      }, /*#__PURE__*/React__default["default"].createElement(_Delete__default["default"], {
         fontSize: "small"
       }))))
     );
-  })), !inEdit && /*#__PURE__*/React__default["default"].createElement(core$1.Box, null, /*#__PURE__*/React__default["default"].createElement(core$1.Button, {
+  })), !inEdit && /*#__PURE__*/React__default["default"].createElement(_Box__default["default"], null, /*#__PURE__*/React__default["default"].createElement(_Button__default["default"], {
     color: "primary",
     variant: "outlined",
     onClick: function onClick() {
       return setInEdit(true);
     }
-  }, "Eintrag hinzuf\xFCgen")), inEdit && !catalog && /*#__PURE__*/React__default["default"].createElement(core$1.Box, {
+  }, "Eintrag hinzuf\xFCgen")), inEdit && !catalog && /*#__PURE__*/React__default["default"].createElement(_Box__default["default"], {
     width: "100%",
     display: "flex",
     alignItems: "center"
-  }, /*#__PURE__*/React__default["default"].createElement(core$1.FormControl, {
+  }, /*#__PURE__*/React__default["default"].createElement(_FormControl__default["default"], {
     variant: "filled",
     fullWidth: true
-  }, /*#__PURE__*/React__default["default"].createElement(core$1.TextField, {
+  }, /*#__PURE__*/React__default["default"].createElement(_TextField__default["default"], {
     label: "Neuer Eintrag",
     variant: variant,
     value: inputValue,
     InputProps: {
-      endAdornment: /*#__PURE__*/React__default["default"].createElement(core$1.InputAdornment, {
+      endAdornment: /*#__PURE__*/React__default["default"].createElement(_InputAdornment__default["default"], {
         position: "end"
-      }, /*#__PURE__*/React__default["default"].createElement(core$1.Box, {
+      }, /*#__PURE__*/React__default["default"].createElement(_Box__default["default"], {
         mr: 1
-      }, /*#__PURE__*/React__default["default"].createElement(core$1.IconButton, {
+      }, /*#__PURE__*/React__default["default"].createElement(_IconButton__default["default"], {
         size: "small",
         onClick: handleEntryAdd
-      }, /*#__PURE__*/React__default["default"].createElement(icons.Save, {
+      }, /*#__PURE__*/React__default["default"].createElement(_Save__default["default"], {
         fontSize: "small"
-      }))), /*#__PURE__*/React__default["default"].createElement(core$1.IconButton, {
+      }))), /*#__PURE__*/React__default["default"].createElement(_IconButton__default["default"], {
         size: "small",
         onClick: handleCancelNewEntry
-      }, /*#__PURE__*/React__default["default"].createElement(icons.Clear, {
+      }, /*#__PURE__*/React__default["default"].createElement(_Clear__default["default"], {
         fontSize: "small"
       })))
     },
@@ -29665,25 +29720,25 @@ var FormRepeater = function FormRepeater(_ref) {
     onChange: function onChange(e) {
       return setInputValue(e.target.value);
     }
-  }))), inEdit && catalog && /*#__PURE__*/React__default["default"].createElement(core$1.Box, {
+  }))), inEdit && catalog && /*#__PURE__*/React__default["default"].createElement(_Box__default["default"], {
     width: "100%",
     display: "flex",
     alignItems: "center"
-  }, /*#__PURE__*/React__default["default"].createElement(core$1.FormControl, {
+  }, /*#__PURE__*/React__default["default"].createElement(_FormControl__default["default"], {
     variant: "filled",
     fullWidth: true
-  }, /*#__PURE__*/React__default["default"].createElement(core$1.InputLabel, null, "Neuer Eintrag"), /*#__PURE__*/React__default["default"].createElement(core$1.Select, {
+  }, /*#__PURE__*/React__default["default"].createElement(_InputLabel__default["default"], null, "Neuer Eintrag"), /*#__PURE__*/React__default["default"].createElement(_Select__default["default"], {
     defaultValue: "please-select",
     onChange: function onChange(e) {
       return setEntries([].concat(_toConsumableArray(entries), [e.target.value]));
     }
-  }, /*#__PURE__*/React__default["default"].createElement(core$1.MenuItem, {
+  }, /*#__PURE__*/React__default["default"].createElement(_MenuItem__default["default"], {
     value: "please-select",
     disabled: true
   }, "Eintrag hinzuf\xFCgen"), Object.entries(catalog).sort(function (a, b) {
     return a[1].localeCompare(b[1]);
   }).map(function (e) {
-    return /*#__PURE__*/React__default["default"].createElement(core$1.MenuItem, {
+    return /*#__PURE__*/React__default["default"].createElement(_MenuItem__default["default"], {
       key: "option-".concat(e[0]),
       value: e[0],
       disabled: blockedOptions.includes(e[0])
@@ -29694,7 +29749,7 @@ var FormRepeater = function FormRepeater(_ref) {
 FormRepeater.propTypes = {
   variant: PropTypes__default["default"].oneOf(['standard', 'filled', 'outlined']),
   name: PropTypes__default["default"].string.isRequired,
-  value: PropTypes__default["default"].any.isRequired,
+  value: PropTypes__default["default"].any,
   catalog: PropTypes__default["default"].object,
   onChange: PropTypes__default["default"].func.isRequired
 };
@@ -29729,13 +29784,13 @@ var FormControlField = function FormControlField(_ref) {
   }
 
   var control;
-  if (type === 'render') control = /*#__PURE__*/React__default["default"].cloneElement(component, finalProps);else control = /*#__PURE__*/React__default["default"].createElement(component, finalProps);
-  return /*#__PURE__*/React__default["default"].createElement(core$1.Box, {
+  if (type === '@@render') control = /*#__PURE__*/React__default["default"].cloneElement(component, finalProps);else control = /*#__PURE__*/React__default["default"].createElement(component, finalProps);
+  return /*#__PURE__*/React__default["default"].createElement(_Box__default["default"], {
     width: "100%",
     display: "flex",
     flexDirection: "column",
     mb: 1.5
-  }, label && /*#__PURE__*/React__default["default"].createElement(core$1.Typography, {
+  }, label && /*#__PURE__*/React__default["default"].createElement(_Typography__default["default"], {
     variant: "caption",
     color: "textSecondary"
   }, label), control);
@@ -29813,7 +29868,7 @@ var FormReadOnlyText = function FormReadOnlyText(_ref) {
     finalValue = luxon.DateTime.fromISO(value).toLocaleString(luxon.DateTime.DATE_MED_WITH_WEEKDAY);
   }
 
-  return /*#__PURE__*/React__default["default"].createElement(core$1.Typography, {
+  return /*#__PURE__*/React__default["default"].createElement(_Typography__default["default"], {
     variant: "body1"
   }, finalValue);
 };
@@ -68077,14 +68132,14 @@ var FormReadOnlyBoolean = function FormReadOnlyBoolean(_ref) {
       defaultValue = _ref.defaultValue;
 
   if (variant === 'checkbox') {
-    return /*#__PURE__*/React__default["default"].createElement(core$1.Checkbox, {
+    return /*#__PURE__*/React__default["default"].createElement(_Checkbox__default["default"], {
       name: name,
       checked: isChecked(value, defaultValue),
       disabled: true
     });
   }
 
-  return /*#__PURE__*/React__default["default"].createElement(core$1.Switch, {
+  return /*#__PURE__*/React__default["default"].createElement(_Switch__default["default"], {
     name: name,
     checked: isChecked(value, defaultValue),
     disabled: true
@@ -68106,15 +68161,15 @@ var getValue = function getValue(value, catalog) {
 var FormReadOnlyRepeater = function FormReadOnlyRepeater(_ref) {
   var value = _ref.value,
       catalog = _ref.catalog;
-  return /*#__PURE__*/React__default["default"].createElement(core$1.Box, null, /*#__PURE__*/React__default["default"].createElement(core$1.List, {
+  return /*#__PURE__*/React__default["default"].createElement(_Box__default["default"], null, /*#__PURE__*/React__default["default"].createElement(_List__default["default"], {
     dense: true
   }, value && value.map(function (entry, index) {
     return (
       /*#__PURE__*/
       // eslint-disable-next-line react/no-array-index-key
-      React__default["default"].createElement(core$1.ListItem, {
+      React__default["default"].createElement(_ListItem__default["default"], {
         key: "entry-".concat(index)
-      }, /*#__PURE__*/React__default["default"].createElement(core$1.ListItemText, {
+      }, /*#__PURE__*/React__default["default"].createElement(_ListItemText__default["default"], {
         primary: getValue(entry, catalog)
       }))
     );
@@ -68208,8 +68263,8 @@ var CloseIcon = utils.createSvgIcon( /*#__PURE__*/React__namespace.createElement
 }), 'Close');
 
 var styles$m = function styles(theme) {
-  var getColor = theme.palette.type === 'light' ? styles$o.darken : styles$o.lighten;
-  var getBackgroundColor = theme.palette.type === 'light' ? styles$o.lighten : styles$o.darken;
+  var getColor = theme.palette.type === 'light' ? styles$n.darken : styles$n.lighten;
+  var getBackgroundColor = theme.palette.type === 'light' ? styles$n.lighten : styles$n.darken;
   return {
     /* Styles applied to the root element. */
     root: _extends({}, theme.typography.body2, {
@@ -68485,7 +68540,7 @@ process.env.NODE_ENV !== "production" ? Alert.propTypes = {
    */
   variant: PropTypes__default["default"].oneOf(['filled', 'outlined', 'standard'])
 } : void 0;
-var Alert$1 = styles$o.withStyles(styles$m, {
+var Alert$1 = styles$n.withStyles(styles$m, {
   name: 'MuiAlert'
 })(Alert);
 
@@ -68532,7 +68587,7 @@ process.env.NODE_ENV !== "production" ? AlertTitle.propTypes = {
    */
   className: PropTypes__default["default"].string
 } : void 0;
-styles$o.withStyles(styles$l, {
+styles$n.withStyles(styles$l, {
   name: 'MuiAlertTitle'
 })(AlertTitle);
 
@@ -70514,7 +70569,7 @@ process.env.NODE_ENV !== "production" ? Autocomplete.propTypes = {
    */
   value: PropTypes__default["default"].any
 } : void 0;
-styles$o.withStyles(styles$k, {
+styles$n.withStyles(styles$k, {
   name: 'MuiAutocomplete'
 })(Autocomplete);
 
@@ -70981,7 +71036,7 @@ process.env.NODE_ENV !== "production" ? AvatarGroup.propTypes = {
    */
   spacing: PropTypes__default["default"].oneOfType([PropTypes__default["default"].oneOf(['medium', 'small']), PropTypes__default["default"].number])
 } : void 0;
-styles$o.withStyles(styles$j, {
+styles$n.withStyles(styles$j, {
   name: 'MuiAvatarGroup'
 })(AvatarGroup);
 
@@ -71166,7 +71221,7 @@ var styles$i = function styles(theme) {
       '&$selected': {
         backgroundColor: theme.palette.action.selected,
         '&:hover, &$focusVisible': {
-          backgroundColor: styles$o.alpha(theme.palette.action.selected, theme.palette.action.selectedOpacity + theme.palette.action.hoverOpacity),
+          backgroundColor: styles$n.alpha(theme.palette.action.selected, theme.palette.action.selectedOpacity + theme.palette.action.hoverOpacity),
           // Reset on touch devices, it doesn't add specificity
           '@media (hover: none)': {
             backgroundColor: theme.palette.action.selected
@@ -71257,10 +71312,10 @@ var styles$i = function styles(theme) {
     outlinedPrimary: {
       '&$selected': {
         color: theme.palette.primary.main,
-        border: "1px solid ".concat(styles$o.alpha(theme.palette.primary.main, 0.5)),
-        backgroundColor: styles$o.alpha(theme.palette.primary.main, theme.palette.action.activatedOpacity),
+        border: "1px solid ".concat(styles$n.alpha(theme.palette.primary.main, 0.5)),
+        backgroundColor: styles$n.alpha(theme.palette.primary.main, theme.palette.action.activatedOpacity),
         '&:hover, &$focusVisible': {
-          backgroundColor: styles$o.alpha(theme.palette.primary.main, theme.palette.action.activatedOpacity + theme.palette.action.hoverOpacity),
+          backgroundColor: styles$n.alpha(theme.palette.primary.main, theme.palette.action.activatedOpacity + theme.palette.action.hoverOpacity),
           // Reset on touch devices, it doesn't add specificity
           '@media (hover: none)': {
             backgroundColor: 'transparent'
@@ -71276,10 +71331,10 @@ var styles$i = function styles(theme) {
     outlinedSecondary: {
       '&$selected': {
         color: theme.palette.secondary.main,
-        border: "1px solid ".concat(styles$o.alpha(theme.palette.secondary.main, 0.5)),
-        backgroundColor: styles$o.alpha(theme.palette.secondary.main, theme.palette.action.activatedOpacity),
+        border: "1px solid ".concat(styles$n.alpha(theme.palette.secondary.main, 0.5)),
+        backgroundColor: styles$n.alpha(theme.palette.secondary.main, theme.palette.action.activatedOpacity),
         '&:hover, &$focusVisible': {
-          backgroundColor: styles$o.alpha(theme.palette.secondary.main, theme.palette.action.activatedOpacity + theme.palette.action.hoverOpacity),
+          backgroundColor: styles$n.alpha(theme.palette.secondary.main, theme.palette.action.activatedOpacity + theme.palette.action.hoverOpacity),
           // Reset on touch devices, it doesn't add specificity
           '@media (hover: none)': {
             backgroundColor: 'transparent'
@@ -71341,7 +71396,7 @@ var PaginationItem = /*#__PURE__*/React__namespace.forwardRef(function Paginatio
       variant = _props$variant === void 0 ? 'text' : _props$variant,
       other = _objectWithoutProperties(props, ["classes", "className", "color", "component", "disabled", "page", "selected", "shape", "size", "type", "variant"]);
 
-  var theme = styles$o.useTheme();
+  var theme = styles$n.useTheme();
   var normalizedIcons = theme.direction === 'rtl' ? {
     previous: NavigateNextIcon,
     next: NavigateBeforeIcon,
@@ -71426,7 +71481,7 @@ process.env.NODE_ENV !== "production" ? PaginationItem.propTypes = {
    */
   variant: PropTypes__default["default"].oneOf(['text', 'outlined'])
 } : void 0;
-var PaginationItem$1 = styles$o.withStyles(styles$i, {
+var PaginationItem$1 = styles$n.withStyles(styles$i, {
   name: 'MuiPaginationItem'
 })(PaginationItem);
 
@@ -71631,7 +71686,7 @@ process.env.NODE_ENV !== "production" ? Pagination.propTypes = {
    */
   variant: PropTypes__default["default"].oneOf(['outlined', 'text'])
 } : void 0;
-styles$o.withStyles(styles$h, {
+styles$n.withStyles(styles$h, {
   name: 'MuiPagination'
 })(Pagination);
 
@@ -71839,7 +71894,7 @@ var Rating = /*#__PURE__*/React__namespace.forwardRef(function Rating(props, ref
       setValueState = _useControlled2[1];
 
   var valueRounded = roundValueToPrecision(valueDerived, precision);
-  var theme = styles$o.useTheme();
+  var theme = styles$n.useTheme();
 
   var _React$useState = React__namespace.useState({
     hover: -1,
@@ -72212,7 +72267,7 @@ process.env.NODE_ENV !== "production" ? Rating.propTypes = {
    */
   value: PropTypes__default["default"].number
 } : void 0;
-styles$o.withStyles(styles$g, {
+styles$n.withStyles(styles$g, {
   name: 'MuiRating'
 })(Rating);
 
@@ -72222,7 +72277,7 @@ var styles$f = function styles(theme) {
     root: {
       display: 'block',
       // Create a "on paper" color with sufficient contrast retaining the color
-      backgroundColor: styles$o.alpha(theme.palette.text.primary, theme.palette.type === 'light' ? 0.11 : 0.13),
+      backgroundColor: styles$n.alpha(theme.palette.text.primary, theme.palette.type === 'light' ? 0.11 : 0.13),
       height: '1.2em'
     },
 
@@ -72383,7 +72438,7 @@ process.env.NODE_ENV !== "production" ? Skeleton.propTypes = {
    */
   width: PropTypes__default["default"].oneOfType([PropTypes__default["default"].number, PropTypes__default["default"].string])
 } : void 0;
-styles$o.withStyles(styles$f, {
+styles$n.withStyles(styles$f, {
   name: 'MuiSkeleton'
 })(Skeleton);
 
@@ -72509,8 +72564,8 @@ var SpeedDial = /*#__PURE__*/React__namespace.forwardRef(function SpeedDial(prop
       TransitionComponent = _props$TransitionComp === void 0 ? Zoom__default["default"] : _props$TransitionComp,
       _props$transitionDura = props.transitionDuration,
       transitionDuration = _props$transitionDura === void 0 ? {
-    enter: styles$o.duration.enteringScreen,
-    exit: styles$o.duration.leavingScreen
+    enter: styles$n.duration.enteringScreen,
+    exit: styles$n.duration.leavingScreen
   } : _props$transitionDura,
       TransitionProps = props.TransitionProps,
       other = _objectWithoutProperties(props, ["ariaLabel", "FabProps", "children", "classes", "className", "direction", "hidden", "icon", "onBlur", "onClose", "onFocus", "onKeyDown", "onMouseEnter", "onMouseLeave", "onOpen", "open", "openIcon", "TransitionComponent", "transitionDuration", "TransitionProps"]);
@@ -72848,7 +72903,7 @@ process.env.NODE_ENV !== "production" ? SpeedDial.propTypes = {
    */
   TransitionProps: PropTypes__default["default"].object
 } : void 0;
-styles$o.withStyles(styles$e, {
+styles$n.withStyles(styles$e, {
   name: 'MuiSpeedDial'
 })(SpeedDial);
 
@@ -72860,7 +72915,7 @@ var styles$d = function styles(theme) {
       color: theme.palette.text.secondary,
       backgroundColor: theme.palette.background.paper,
       '&:hover': {
-        backgroundColor: styles$o.emphasize(theme.palette.background.paper, 0.15)
+        backgroundColor: styles$n.emphasize(theme.palette.background.paper, 0.15)
       },
       transition: "".concat(theme.transitions.create('transform', {
         duration: theme.transitions.duration.shorter
@@ -73056,7 +73111,7 @@ process.env.NODE_ENV !== "production" ? SpeedDialAction.propTypes = {
    */
   tooltipTitle: PropTypes__default["default"].node
 } : void 0;
-styles$o.withStyles(styles$d, {
+styles$n.withStyles(styles$d, {
   name: 'MuiSpeedDialAction'
 })(SpeedDialAction);
 
@@ -73171,7 +73226,7 @@ process.env.NODE_ENV !== "production" ? SpeedDialIcon.propTypes = {
   openIcon: PropTypes__default["default"].node
 } : void 0;
 SpeedDialIcon.muiName = 'SpeedDialIcon';
-styles$o.withStyles(styles$c, {
+styles$n.withStyles(styles$c, {
   name: 'MuiSpeedDialIcon'
 })(SpeedDialIcon);
 
@@ -73312,7 +73367,7 @@ process.env.NODE_ENV !== "production" ? TabPanel.propTypes = {
    */
   value: PropTypes__default["default"].string.isRequired
 } : void 0;
-styles$o.withStyles(styles$b, {
+styles$n.withStyles(styles$b, {
   name: 'MuiTabPanel'
 })(TabPanel);
 
@@ -73389,7 +73444,7 @@ process.env.NODE_ENV !== "production" ? Timeline.propTypes = {
    */
   className: PropTypes__default["default"].string
 } : void 0;
-styles$o.withStyles(styles$a, {
+styles$n.withStyles(styles$a, {
   name: 'MuiTimeline'
 })(Timeline);
 
@@ -73435,7 +73490,7 @@ process.env.NODE_ENV !== "production" ? TimelineConnector.propTypes = {
    */
   className: PropTypes__default["default"].string
 } : void 0;
-styles$o.withStyles(styles$9, {
+styles$n.withStyles(styles$9, {
   name: 'MuiTimelineConnector'
 })(TimelineConnector);
 
@@ -73503,7 +73558,7 @@ process.env.NODE_ENV !== "production" ? TimelineContent.propTypes = {
    */
   className: PropTypes__default["default"].string
 } : void 0;
-styles$o.withStyles(styles$8, {
+styles$n.withStyles(styles$8, {
   name: 'MuiTimelineContent'
 })(TimelineContent);
 
@@ -73612,7 +73667,7 @@ process.env.NODE_ENV !== "production" ? TimelineDot.propTypes = {
    */
   variant: PropTypes__default["default"].oneOf(['default', 'outlined'])
 } : void 0;
-styles$o.withStyles(styles$7, {
+styles$n.withStyles(styles$7, {
   name: 'MuiTimelineDot'
 })(TimelineDot);
 
@@ -73712,7 +73767,7 @@ process.env.NODE_ENV !== "production" ? TimelineItem.propTypes = {
    */
   className: PropTypes__default["default"].string
 } : void 0;
-styles$o.withStyles(styles$6, {
+styles$n.withStyles(styles$6, {
   name: 'MuiTimelineItem'
 })(TimelineItem);
 
@@ -73773,7 +73828,7 @@ process.env.NODE_ENV !== "production" ? TimelineOppositeContent.propTypes = {
   className: PropTypes__default["default"].string
 } : void 0;
 TimelineOppositeContent.muiName = 'TimelineOppositeContent';
-styles$o.withStyles(styles$5, {
+styles$n.withStyles(styles$5, {
   name: 'MuiTimelineOppositeContent'
 })(TimelineOppositeContent);
 
@@ -73820,7 +73875,7 @@ process.env.NODE_ENV !== "production" ? TimelineSeparator.propTypes = {
    */
   className: PropTypes__default["default"].string
 } : void 0;
-styles$o.withStyles(styles$4, {
+styles$n.withStyles(styles$4, {
   name: 'MuiTimelineSeparator'
 })(TimelineSeparator);
 
@@ -73831,13 +73886,13 @@ var styles$3 = function styles(theme) {
       boxSizing: 'border-box',
       borderRadius: theme.shape.borderRadius,
       padding: 11,
-      border: "1px solid ".concat(styles$o.alpha(theme.palette.action.active, 0.12)),
-      color: styles$o.alpha(theme.palette.action.active, 0.38),
+      border: "1px solid ".concat(styles$n.alpha(theme.palette.action.active, 0.12)),
+      color: styles$n.alpha(theme.palette.action.active, 0.38),
       '&$selected': {
         color: theme.palette.action.active,
-        backgroundColor: styles$o.alpha(theme.palette.action.active, 0.12),
+        backgroundColor: styles$n.alpha(theme.palette.action.active, 0.12),
         '&:hover': {
-          backgroundColor: styles$o.alpha(theme.palette.action.active, 0.15)
+          backgroundColor: styles$n.alpha(theme.palette.action.active, 0.15)
         },
         '& + &': {
           borderLeft: 0,
@@ -73845,12 +73900,12 @@ var styles$3 = function styles(theme) {
         }
       },
       '&$disabled': {
-        color: styles$o.alpha(theme.palette.action.disabled, 0.12)
+        color: styles$n.alpha(theme.palette.action.disabled, 0.12)
       },
       '&:hover': {
         textDecoration: 'none',
         // Reset on mouse devices
-        backgroundColor: styles$o.alpha(theme.palette.text.primary, 0.05),
+        backgroundColor: styles$n.alpha(theme.palette.text.primary, 0.05),
         '@media (hover: none)': {
           backgroundColor: 'transparent'
         },
@@ -73989,7 +74044,7 @@ process.env.NODE_ENV !== "production" ? ToggleButton.propTypes = {
    */
   value: PropTypes__default["default"].any.isRequired
 } : void 0;
-styles$o.withStyles(styles$3, {
+styles$n.withStyles(styles$3, {
   name: 'MuiToggleButton'
 })(ToggleButton);
 
@@ -74170,7 +74225,7 @@ process.env.NODE_ENV !== "production" ? ToggleButtonGroup.propTypes = {
    */
   value: PropTypes__default["default"].any
 } : void 0;
-styles$o.withStyles(styles$2, {
+styles$n.withStyles(styles$2, {
   name: 'MuiToggleButtonGroup'
 })(ToggleButtonGroup);
 
@@ -74197,10 +74252,10 @@ var styles$1 = function styles(theme) {
         backgroundColor: theme.palette.action.hover
       },
       '&$selected > $content $label': {
-        backgroundColor: styles$o.alpha(theme.palette.primary.main, theme.palette.action.selectedOpacity)
+        backgroundColor: styles$n.alpha(theme.palette.primary.main, theme.palette.action.selectedOpacity)
       },
       '&$selected > $content $label:hover, &$selected:focus > $content $label': {
-        backgroundColor: styles$o.alpha(theme.palette.primary.main, theme.palette.action.selectedOpacity + theme.palette.action.hoverOpacity),
+        backgroundColor: styles$n.alpha(theme.palette.primary.main, theme.palette.action.selectedOpacity + theme.palette.action.hoverOpacity),
         // Reset on touch devices, it doesn't add specificity
         '@media (hover: none)': {
           backgroundColor: 'transparent'
@@ -74319,7 +74374,7 @@ var TreeItem = /*#__PURE__*/React__namespace.forwardRef(function TreeItem(props,
   var tabbable = isTabbable ? isTabbable(nodeId) : false;
   var selected = isSelected ? isSelected(nodeId) : false;
   var icons = contextIcons || {};
-  var theme = styles$o.useTheme();
+  var theme = styles$n.useTheme();
 
   if (!icon) {
     if (expandable) {
@@ -74687,7 +74742,7 @@ process.env.NODE_ENV !== "production" ? TreeItem.propTypes = {
    */
   TransitionProps: PropTypes__default["default"].object
 } : void 0;
-styles$o.withStyles(styles$1, {
+styles$n.withStyles(styles$1, {
   name: 'MuiTreeItem'
 })(TreeItem);
 
@@ -75423,18 +75478,18 @@ process.env.NODE_ENV !== "production" ? TreeView.propTypes = {
    */
   selected: PropTypes__default["default"].oneOfType([PropTypes__default["default"].arrayOf(PropTypes__default["default"].string), PropTypes__default["default"].string])
 } : void 0;
-styles$o.withStyles(styles, {
+styles$n.withStyles(styles, {
   name: 'MuiTreeView'
 })(TreeView);
 
 var HiddenData = function HiddenData(_ref) {
   var subject = _ref.subject,
       label = _ref.label;
-  return /*#__PURE__*/React__default["default"].createElement(core$1.Box, {
+  return /*#__PURE__*/React__default["default"].createElement(_Box__default["default"], {
     mb: 2
   }, /*#__PURE__*/React__default["default"].createElement(Alert$1, {
     severity: "warning"
-  }, /*#__PURE__*/React__default["default"].createElement(core$1.Typography, {
+  }, /*#__PURE__*/React__default["default"].createElement(_Typography__default["default"], {
     variant: "body1"
   }, subject ? "".concat(subject, " ") : '', /*#__PURE__*/React__default["default"].createElement("span", {
     style: {
@@ -75476,8 +75531,8 @@ var formComponentMap = {
   array: FormRepeater
 };
 var apComponentMap = {
-  "default": core$1.Input,
-  string: core$1.Input,
+  "default": _Input__default["default"],
+  string: _Input__default["default"],
   number: FormNumber,
   select: FormSelect,
   "boolean": FormBoolean
@@ -75506,19 +75561,10 @@ var FormulatorFormSection = /*#__PURE__*/function (_React$Component) {
           fieldStates = _this$props.fieldStates,
           renderComponentMap = _this$props.renderComponentMap;
       var field = fieldEntry,
+          isRender = false,
           specialProps = {};
 
       if (Array.isArray(fieldEntry)) {
-        if (fieldEntry[0] === '@@render') {
-          field = fieldEntry[1];
-          return {
-            type: 'render',
-            name: field,
-            component: renderComponentMap[field],
-            componentProps: fieldEntry[2] || {}
-          };
-        }
-
         if (fieldEntry[0] === '@@markdown') {
           return {
             type: 'markdown',
@@ -75530,9 +75576,16 @@ var FormulatorFormSection = /*#__PURE__*/function (_React$Component) {
           };
         }
 
-        field = fieldEntry[0];
-        if (!fieldEntry[1]) throw new Error("field \"".concat(field, "\" is defined in an array, but has no props definition"));
-        specialProps = fieldEntry[1];
+        if (fieldEntry[0] === '@@render') {
+          if (!fieldEntry[1]) throw new Error("render field \"".concat(field, "\" has no name"));
+          field = fieldEntry[1];
+          specialProps = fieldEntry[2] || {};
+          isRender = true;
+        } else {
+          field = fieldEntry[0];
+          if (!fieldEntry[1]) throw new Error("field \"".concat(field, "\" is defined in an array, but has no props definition"));
+          specialProps = fieldEntry[1];
+        }
       }
 
       var _specialProps = specialProps,
@@ -75553,8 +75606,8 @@ var FormulatorFormSection = /*#__PURE__*/function (_React$Component) {
           type = _schema$properties$fi.type,
           defaultValue = _schema$properties$fi["default"];
       var mapKey;
-      if (componentMap[field] !== undefined) mapKey = field;else if (typeof type === 'string' && componentMap[type] !== undefined) mapKey = type;else if (Array.isArray(type)) mapKey = 'select';else if (componentMap["default"] !== undefined) mapKey = 'default';else throw new Error("Could not find a Component to render for \"".concat(field, "\""));
-      var mapEntry = componentMap[mapKey];
+      if (isRender) mapKey = '@@render';else if (componentMap[field] !== undefined) mapKey = field;else if (typeof type === 'string' && componentMap[type] !== undefined) mapKey = type;else if (Array.isArray(type)) mapKey = 'select';else if (componentMap["default"] !== undefined) mapKey = 'default';else throw new Error("Could not find a Component to render for \"".concat(field, "\""));
+      var mapEntry = isRender ? renderComponentMap[field] : componentMap[mapKey];
       var component = mapEntry,
           props = {};
 
@@ -75574,8 +75627,9 @@ var FormulatorFormSection = /*#__PURE__*/function (_React$Component) {
         /* eslint-enable prefer-destructuring */
       }
 
+      if (!component) throw new Error("could not find component for field \"".concat(field, "\""));
       return _objectSpread$1(_objectSpread$1({
-        type: mapKey,
+        type: isRender ? '@@render' : mapKey,
         name: field,
         label: hideLabel !== true && (translations.labels && translations.labels[field] || field),
         defaultValue: defaultValue,
@@ -75631,61 +75685,6 @@ var FormulatorFormSection = /*#__PURE__*/function (_React$Component) {
       return Array.isArray(fields) && fields.map(function (fieldEntry, fieldIndex) {
         if (fieldEntry === false) return false;
 
-        if (Array.isArray(fieldEntry) && fieldEntry[0] === '@@render') {
-          var cKey = fieldEntry[1];
-
-          var _component = renderComponentMap && renderComponentMap[cKey];
-
-          if (!_component) throw new Error("Could not find Component for render field \"".concat(cKey, "\""));
-
-          var _fieldProps = _this.getFieldProps(fieldEntry);
-
-          var _type = _fieldProps.type,
-              _name = _fieldProps.name,
-              _componentProps = _fieldProps.componentProps,
-              _label = _fieldProps.label,
-              _value = _fieldProps.value,
-              _required = _fieldProps.required,
-              _hasErrors = _fieldProps.hasErrors,
-              _errors = _fieldProps.errors,
-              _validating = _fieldProps.validating,
-              _dirty = _fieldProps.dirty;
-
-          if (readOnly) {
-            if (!_value) return false;
-
-            if (Array.isArray(obscuredFields) && obscuredFields.includes(_name)) {
-              return /*#__PURE__*/React__default["default"].createElement(HiddenData, {
-                subject: "Das Feld",
-                label: _label
-              });
-            }
-          }
-
-          return /*#__PURE__*/React__default["default"].createElement(readOnly ? FormReadOnlyField$1 : FormField$1, {
-            key: "form-render-component-".concat(cKey),
-            variant: inputVariant,
-            name: _name,
-            type: _type,
-            label: _label,
-            value: _value,
-            required: _required,
-            hasErrors: _hasErrors,
-            errors: _errors,
-            validating: _validating,
-            dirty: _dirty,
-            component: _component,
-            componentProps: _componentProps,
-            disabled: disabled,
-            readOnly: readOnly,
-            fields: fields,
-            results: results,
-            data: data,
-            fieldStates: fieldStates,
-            onChange: onChange
-          });
-        }
-
         if (typeof fieldEntry !== 'string' && !Array.isArray(fieldEntry)) {
           return /*#__PURE__*/React__default["default"].createElement(FormulatorFormSection, {
             key: "form-section-".concat(fieldEntry.id),
@@ -75841,10 +75840,10 @@ var FormulatorFormSection = /*#__PURE__*/function (_React$Component) {
 
       return /*#__PURE__*/React__default["default"].createElement(FormSectionBlock, {
         key: "form-section-".concat(sectionId),
-        label: groupLabel,
-        labelVariant: groupLabelVariant,
-        desc: groupDesc,
-        descVariant: groupDescVariant,
+        label: label,
+        labelVariant: labelVariant,
+        desc: desc,
+        descVariant: descVariant,
         textAlign: textAlign
       }, sectionContent);
     }