@bigbinary/neeto-fields-frontend 1.0.8 → 1.1.1

package/dist/index.cjs.js

@@ -4,20 +4,20 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var React = require('react');
 var neetoui = require('@bigbinary/neetoui');
-var ramda = require('ramda');
-var formik = require('@bigbinary/neetoui/formik');
-var reactQuery = require('react-query');
-var axios = require('axios');
-var utils = require('@bigbinary/neeto-commons-frontend/utils');
 var pure = require('@bigbinary/neeto-commons-frontend/pure');
+var ramda = require('ramda');
+var formik = require('formik');
 var yup = require('yup');
-var formik$1 = require('formik');
 var neetoIcons = require('@bigbinary/neeto-icons');
+var formik$1 = require('@bigbinary/neetoui/formik');
 var Container = require('@bigbinary/neeto-molecules/Container');
 var Header = require('@bigbinary/neeto-molecules/Header');
 var MenuBar = require('@bigbinary/neeto-molecules/MenuBar');
 var PageLoader = require('@bigbinary/neeto-molecules/PageLoader');
 var SubHeader = require('@bigbinary/neeto-molecules/SubHeader');
+var reactQuery = require('react-query');
+var axios = require('axios');
+var utils = require('@bigbinary/neeto-commons-frontend/utils');
 var reactUtils = require('@bigbinary/neeto-commons-frontend/react-utils');
 var reactRouterDom = require('react-router-dom');
 var TableWrapper = require('@bigbinary/neeto-molecules/TableWrapper');
@@ -45,13 +45,13 @@ function _interopNamespace(e) {
 }
 
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
-var axios__default = /*#__PURE__*/_interopDefaultLegacy(axios);
 var yup__namespace = /*#__PURE__*/_interopNamespace(yup);
 var Container__default = /*#__PURE__*/_interopDefaultLegacy(Container);
 var Header__default = /*#__PURE__*/_interopDefaultLegacy(Header);
 var MenuBar__default = /*#__PURE__*/_interopDefaultLegacy(MenuBar);
 var PageLoader__default = /*#__PURE__*/_interopDefaultLegacy(PageLoader);
 var SubHeader__default = /*#__PURE__*/_interopDefaultLegacy(SubHeader);
+var axios__default = /*#__PURE__*/_interopDefaultLegacy(axios);
 var TableWrapper__default = /*#__PURE__*/_interopDefaultLegacy(TableWrapper);
 var classnames__default = /*#__PURE__*/_interopDefaultLegacy(classnames);
 
@@ -3749,8 +3749,8 @@ function transformOptions(options) {
   return options;
 }
 
-function ownKeys$d(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$d(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$d(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$d(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+function ownKeys$e(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$e(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$e(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$e(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
 function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
 function noop$1() {}
@@ -3810,9 +3810,9 @@ var I18n = function (_EventEmitter) {
         }
       }
       var defOpts = get();
-      this.options = _objectSpread$d(_objectSpread$d(_objectSpread$d({}, defOpts), this.options), transformOptions(options));
+      this.options = _objectSpread$e(_objectSpread$e(_objectSpread$e({}, defOpts), this.options), transformOptions(options));
       if (this.options.compatibilityAPI !== 'v1') {
-        this.options.interpolation = _objectSpread$d(_objectSpread$d({}, defOpts.interpolation), this.options.interpolation);
+        this.options.interpolation = _objectSpread$e(_objectSpread$e({}, defOpts.interpolation), this.options.interpolation);
       }
       if (options.keySeparator !== undefined) {
         this.options.userDefinedKeySeparator = options.keySeparator;
@@ -4090,7 +4090,7 @@ var I18n = function (_EventEmitter) {
           }
           options = _this5.options.overloadTranslationOptionHandler([key, opts].concat(rest));
         } else {
-          options = _objectSpread$d({}, opts);
+          options = _objectSpread$e({}, opts);
         }
         options.lng = options.lng || fixedT.lng;
         options.lngs = options.lngs || fixedT.lngs;
@@ -4217,7 +4217,7 @@ var I18n = function (_EventEmitter) {
       var _this8 = this;
       var options = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
       var callback = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : noop$1;
-      var mergedOptions = _objectSpread$d(_objectSpread$d(_objectSpread$d({}, this.options), options), {
+      var mergedOptions = _objectSpread$e(_objectSpread$e(_objectSpread$e({}, this.options), options), {
         isClone: true
       });
       var clone = new I18n(mergedOptions);
@@ -4228,7 +4228,7 @@ var I18n = function (_EventEmitter) {
       membersToCopy.forEach(function (m) {
         clone[m] = _this8[m];
       });
-      clone.services = _objectSpread$d({}, this.services);
+      clone.services = _objectSpread$e({}, this.services);
       clone.services.utils = {
         hasLoadedNamespace: clone.hasLoadedNamespace.bind(clone)
       };
@@ -4276,7 +4276,7 @@ instance.reloadResources;
 instance.use;
 instance.changeLanguage;
 instance.getFixedT;
-var t = instance.t;
+var t$1 = instance.t;
 instance.exists;
 instance.setDefaultNamespace;
 instance.hasLoadedNamespace;
@@ -4667,9 +4667,79 @@ function getDefaultExportFromCjs (x) {
 	return x && x.__esModule && Object.prototype.hasOwnProperty.call(x, 'default') ? x['default'] : x;
 }
 
-function ownKeys$c(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
+/**
+ * This file automatically generated from `pre-publish.js`.
+ * Do not manually edit.
+ */
 
-function _objectSpread$c(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys$c(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys$c(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+var voidElements = {
+  "area": true,
+  "base": true,
+  "br": true,
+  "col": true,
+  "embed": true,
+  "hr": true,
+  "img": true,
+  "input": true,
+  "link": true,
+  "meta": true,
+  "param": true,
+  "source": true,
+  "track": true,
+  "wbr": true
+};
+
+var e = /*@__PURE__*/getDefaultExportFromCjs(voidElements);
+
+var t=/\s([^'"/\s><]+?)[\s/>]|([^\s=]+)=\s?(".*?"|'.*?')/g;function n(n){var r={type:"tag",name:"",voidElement:!1,attrs:{},children:[]},i=n.match(/<\/?([^\s]+?)[/\s>]/);if(i&&(r.name=i[1],(e[i[1]]||"/"===n.charAt(n.length-2))&&(r.voidElement=!0),r.name.startsWith("!--"))){var s=n.indexOf("--\x3e");return {type:"comment",comment:-1!==s?n.slice(4,s):""}}for(var a=new RegExp(t),c=null;null!==(c=a.exec(n));)if(c[0].trim())if(c[1]){var o=c[1].trim(),l=[o,""];o.indexOf("=")>-1&&(l=o.split("=")),r.attrs[l[0]]=l[1],a.lastIndex--;}else c[2]&&(r.attrs[c[2]]=c[3].trim().substring(1,c[3].length-1));return r}var r=/<[a-zA-Z0-9\-\!\/](?:"[^"]*"|'[^']*'|[^'">])*>/g,i=/^\s*$/,s=Object.create(null);function a(e,t){switch(t.type){case"text":return e+t.content;case"tag":return e+="<"+t.name+(t.attrs?function(e){var t=[];for(var n in e)t.push(n+'="'+e[n]+'"');return t.length?" "+t.join(" "):""}(t.attrs):"")+(t.voidElement?"/>":">"),t.voidElement?e:e+t.children.reduce(a,"")+"</"+t.name+">";case"comment":return e+"\x3c!--"+t.comment+"--\x3e"}}var c={parse:function(e,t){t||(t={}),t.components||(t.components=s);var a,c=[],o=[],l=-1,m=!1;if(0!==e.indexOf("<")){var u=e.indexOf("<");c.push({type:"text",content:-1===u?e:e.substring(0,u)});}return e.replace(r,function(r,s){if(m){if(r!=="</"+a.name+">")return;m=!1;}var u,f="/"!==r.charAt(1),h=r.startsWith("\x3c!--"),p=s+r.length,d=e.charAt(p);if(h){var v=n(r);return l<0?(c.push(v),c):((u=o[l]).children.push(v),c)}if(f&&(l++,"tag"===(a=n(r)).type&&t.components[a.name]&&(a.type="component",m=!0),a.voidElement||m||!d||"<"===d||a.children.push({type:"text",content:e.slice(p,e.indexOf("<",p))}),0===l&&c.push(a),(u=o[l-1])&&u.children.push(a),o[l]=a),(!f||a.voidElement)&&(l>-1&&(a.voidElement||a.name===r.slice(2,-1))&&(l--,a=-1===l?c:o[l]),!m&&"<"!==d&&d)){u=-1===l?c:o[l].children;var x=e.indexOf("<",p),g=e.slice(p,-1===x?void 0:x);i.test(g)&&(g=" "),(x>-1&&l+u.length>=0||" "!==g)&&u.push({type:"text",content:g});}}),c},stringify:function(e){return e.reduce(function(e,t){return e+a("",t)},"")}};
+
+/**
+ * Copyright (C) 2017-present by Andrea Giammarchi - @WebReflection
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in
+ * all copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+ * THE SOFTWARE.
+ */
+
+var replace = ''.replace;
+var es = /&(?:amp|#38|lt|#60|gt|#62|apos|#39|quot|#34);/g;
+var unes = {
+  '&amp;': '&',
+  '&#38;': '&',
+  '&lt;': '<',
+  '&#60;': '<',
+  '&gt;': '>',
+  '&#62;': '>',
+  '&apos;': "'",
+  '&#39;': "'",
+  '&quot;': '"',
+  '&#34;': '"'
+};
+
+function unescape(un) {
+  return replace.call(un, es, cape);
+}
+function cape(m) {
+  return unes[m];
+}
+
+function ownKeys$d(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread$d(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys$d(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys$d(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
 var defaultOptions$1 = {
   bindI18n: 'languageChanged',
   bindI18nStore: '',
@@ -4683,7 +4753,7 @@ var i18nInstance;
 var I18nContext = React__default["default"].createContext();
 function setDefaults() {
   var options = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
-  defaultOptions$1 = _objectSpread$c(_objectSpread$c({}, defaultOptions$1), options);
+  defaultOptions$1 = _objectSpread$d(_objectSpread$d({}, defaultOptions$1), options);
 }
 function getDefaults() {
   return defaultOptions$1;
@@ -4807,6 +4877,274 @@ function hasLoadedNamespace(ns, i18n) {
   });
 }
 
+var _excluded$4 = ["format"],
+    _excluded2 = ["children", "count", "parent", "i18nKey", "context", "tOptions", "values", "defaults", "components", "ns", "i18n", "t", "shouldUnescape"];
+
+function ownKeys$c(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread$c(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys$c(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys$c(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+
+function hasChildren(node, checkLength) {
+  if (!node) return false;
+  var base = node.props ? node.props.children : node.children;
+  if (checkLength) return base.length > 0;
+  return !!base;
+}
+
+function getChildren(node) {
+  if (!node) return [];
+  return node && node.children ? node.children : node.props && node.props.children;
+}
+
+function hasValidReactChildren(children) {
+  if (Object.prototype.toString.call(children) !== '[object Array]') return false;
+  return children.every(function (child) {
+    return React__default["default"].isValidElement(child);
+  });
+}
+
+function getAsArray(data) {
+  return Array.isArray(data) ? data : [data];
+}
+
+function mergeProps(source, target) {
+  var newTarget = _objectSpread$c({}, target);
+
+  newTarget.props = Object.assign(source.props, target.props);
+  return newTarget;
+}
+
+function nodesToString(children, i18nOptions) {
+  if (!children) return '';
+  var stringNode = '';
+  var childrenArray = getAsArray(children);
+  var keepArray = i18nOptions.transSupportBasicHtmlNodes && i18nOptions.transKeepBasicHtmlNodesFor ? i18nOptions.transKeepBasicHtmlNodesFor : [];
+  childrenArray.forEach(function (child, childIndex) {
+    if (typeof child === 'string') {
+      stringNode += "".concat(child);
+    } else if (React__default["default"].isValidElement(child)) {
+      var childPropsCount = Object.keys(child.props).length;
+      var shouldKeepChild = keepArray.indexOf(child.type) > -1;
+      var childChildren = child.props.children;
+
+      if (!childChildren && shouldKeepChild && childPropsCount === 0) {
+        stringNode += "<".concat(child.type, "/>");
+      } else if (!childChildren && (!shouldKeepChild || childPropsCount !== 0)) {
+        stringNode += "<".concat(childIndex, "></").concat(childIndex, ">");
+      } else if (child.props.i18nIsDynamicList) {
+        stringNode += "<".concat(childIndex, "></").concat(childIndex, ">");
+      } else if (shouldKeepChild && childPropsCount === 1 && typeof childChildren === 'string') {
+        stringNode += "<".concat(child.type, ">").concat(childChildren, "</").concat(child.type, ">");
+      } else {
+        var content = nodesToString(childChildren, i18nOptions);
+        stringNode += "<".concat(childIndex, ">").concat(content, "</").concat(childIndex, ">");
+      }
+    } else if (child === null) {
+      warn("Trans: the passed in value is invalid - seems you passed in a null child.");
+    } else if (_typeof$1(child) === 'object') {
+      var format = child.format,
+          clone = _objectWithoutProperties(child, _excluded$4);
+
+      var keys = Object.keys(clone);
+
+      if (keys.length === 1) {
+        var value = format ? "".concat(keys[0], ", ").concat(format) : keys[0];
+        stringNode += "{{".concat(value, "}}");
+      } else {
+        warn("react-i18next: the passed in object contained more than one variable - the object should look like {{ value, format }} where format is optional.", child);
+      }
+    } else {
+      warn("Trans: the passed in value is invalid - seems you passed in a variable like {number} - please pass in variables for interpolation as full objects like {{number}}.", child);
+    }
+  });
+  return stringNode;
+}
+
+function renderNodes(children, targetString, i18n, i18nOptions, combinedTOpts, shouldUnescape) {
+  if (targetString === '') return [];
+  var keepArray = i18nOptions.transKeepBasicHtmlNodesFor || [];
+  var emptyChildrenButNeedsHandling = targetString && new RegExp(keepArray.join('|')).test(targetString);
+  if (!children && !emptyChildrenButNeedsHandling) return [targetString];
+  var data = {};
+
+  function getData(childs) {
+    var childrenArray = getAsArray(childs);
+    childrenArray.forEach(function (child) {
+      if (typeof child === 'string') return;
+      if (hasChildren(child)) getData(getChildren(child));else if (_typeof$1(child) === 'object' && !React__default["default"].isValidElement(child)) Object.assign(data, child);
+    });
+  }
+
+  getData(children);
+  var ast = c.parse("<0>".concat(targetString, "</0>"));
+
+  var opts = _objectSpread$c(_objectSpread$c({}, data), combinedTOpts);
+
+  function renderInner(child, node, rootReactNode) {
+    var childs = getChildren(child);
+    var mappedChildren = mapAST(childs, node.children, rootReactNode);
+    return hasValidReactChildren(childs) && mappedChildren.length === 0 ? childs : mappedChildren;
+  }
+
+  function pushTranslatedJSX(child, inner, mem, i, isVoid) {
+    if (child.dummy) child.children = inner;
+    mem.push(React__default["default"].cloneElement(child, _objectSpread$c(_objectSpread$c({}, child.props), {}, {
+      key: i
+    }), isVoid ? undefined : inner));
+  }
+
+  function mapAST(reactNode, astNode, rootReactNode) {
+    var reactNodes = getAsArray(reactNode);
+    var astNodes = getAsArray(astNode);
+    return astNodes.reduce(function (mem, node, i) {
+      var translationContent = node.children && node.children[0] && node.children[0].content && i18n.services.interpolator.interpolate(node.children[0].content, opts, i18n.language);
+
+      if (node.type === 'tag') {
+        var tmp = reactNodes[parseInt(node.name, 10)];
+        if (!tmp && rootReactNode.length === 1 && rootReactNode[0][node.name]) tmp = rootReactNode[0][node.name];
+        if (!tmp) tmp = {};
+        var child = Object.keys(node.attrs).length !== 0 ? mergeProps({
+          props: node.attrs
+        }, tmp) : tmp;
+        var isElement = React__default["default"].isValidElement(child);
+        var isValidTranslationWithChildren = isElement && hasChildren(node, true) && !node.voidElement;
+        var isEmptyTransWithHTML = emptyChildrenButNeedsHandling && _typeof$1(child) === 'object' && child.dummy && !isElement;
+        var isKnownComponent = _typeof$1(children) === 'object' && children !== null && Object.hasOwnProperty.call(children, node.name);
+
+        if (typeof child === 'string') {
+          var value = i18n.services.interpolator.interpolate(child, opts, i18n.language);
+          mem.push(value);
+        } else if (hasChildren(child) || isValidTranslationWithChildren) {
+            var inner = renderInner(child, node, rootReactNode);
+            pushTranslatedJSX(child, inner, mem, i);
+          } else if (isEmptyTransWithHTML) {
+          var _inner = mapAST(reactNodes, node.children, rootReactNode);
+
+          mem.push(React__default["default"].cloneElement(child, _objectSpread$c(_objectSpread$c({}, child.props), {}, {
+            key: i
+          }), _inner));
+        } else if (Number.isNaN(parseFloat(node.name))) {
+          if (isKnownComponent) {
+            var _inner2 = renderInner(child, node, rootReactNode);
+
+            pushTranslatedJSX(child, _inner2, mem, i, node.voidElement);
+          } else if (i18nOptions.transSupportBasicHtmlNodes && keepArray.indexOf(node.name) > -1) {
+            if (node.voidElement) {
+              mem.push(React__default["default"].createElement(node.name, {
+                key: "".concat(node.name, "-").concat(i)
+              }));
+            } else {
+              var _inner3 = mapAST(reactNodes, node.children, rootReactNode);
+
+              mem.push(React__default["default"].createElement(node.name, {
+                key: "".concat(node.name, "-").concat(i)
+              }, _inner3));
+            }
+          } else if (node.voidElement) {
+            mem.push("<".concat(node.name, " />"));
+          } else {
+            var _inner4 = mapAST(reactNodes, node.children, rootReactNode);
+
+            mem.push("<".concat(node.name, ">").concat(_inner4, "</").concat(node.name, ">"));
+          }
+        } else if (_typeof$1(child) === 'object' && !isElement) {
+          var content = node.children[0] ? translationContent : null;
+          if (content) mem.push(content);
+        } else if (node.children.length === 1 && translationContent) {
+          mem.push(React__default["default"].cloneElement(child, _objectSpread$c(_objectSpread$c({}, child.props), {}, {
+            key: i
+          }), translationContent));
+        } else {
+          mem.push(React__default["default"].cloneElement(child, _objectSpread$c(_objectSpread$c({}, child.props), {}, {
+            key: i
+          })));
+        }
+      } else if (node.type === 'text') {
+        var wrapTextNodes = i18nOptions.transWrapTextNodes;
+
+        var _content = shouldUnescape ? unescape(i18n.services.interpolator.interpolate(node.content, opts, i18n.language)) : i18n.services.interpolator.interpolate(node.content, opts, i18n.language);
+
+        if (wrapTextNodes) {
+          mem.push(React__default["default"].createElement(wrapTextNodes, {
+            key: "".concat(node.name, "-").concat(i)
+          }, _content));
+        } else {
+          mem.push(_content);
+        }
+      }
+
+      return mem;
+    }, []);
+  }
+
+  var result = mapAST([{
+    dummy: true,
+    children: children || []
+  }], ast, getAsArray(children || []));
+  return getChildren(result[0]);
+}
+
+function Trans(_ref) {
+  var children = _ref.children,
+      count = _ref.count,
+      parent = _ref.parent,
+      i18nKey = _ref.i18nKey,
+      context = _ref.context,
+      _ref$tOptions = _ref.tOptions,
+      tOptions = _ref$tOptions === void 0 ? {} : _ref$tOptions,
+      values = _ref.values,
+      defaults = _ref.defaults,
+      components = _ref.components,
+      ns = _ref.ns,
+      i18nFromProps = _ref.i18n,
+      tFromProps = _ref.t,
+      shouldUnescape = _ref.shouldUnescape,
+      additionalProps = _objectWithoutProperties(_ref, _excluded2);
+
+  var _ref2 = React.useContext(I18nContext) || {},
+      i18nFromContext = _ref2.i18n,
+      defaultNSFromContext = _ref2.defaultNS;
+
+  var i18n = i18nFromProps || i18nFromContext || getI18n();
+
+  if (!i18n) {
+    warnOnce('You will need to pass in an i18next instance by using i18nextReactModule');
+    return children;
+  }
+
+  var t = tFromProps || i18n.t.bind(i18n) || function (k) {
+    return k;
+  };
+
+  if (context) tOptions.context = context;
+
+  var reactI18nextOptions = _objectSpread$c(_objectSpread$c({}, getDefaults()), i18n.options && i18n.options.react);
+
+  var namespaces = ns || t.ns || defaultNSFromContext || i18n.options && i18n.options.defaultNS;
+  namespaces = typeof namespaces === 'string' ? [namespaces] : namespaces || ['translation'];
+  var defaultValue = defaults || nodesToString(children, reactI18nextOptions) || reactI18nextOptions.transEmptyNodeValue || i18nKey;
+  var hashTransKey = reactI18nextOptions.hashTransKey;
+  var key = i18nKey || (hashTransKey ? hashTransKey(defaultValue) : defaultValue);
+  var interpolationOverride = values ? tOptions.interpolation : {
+    interpolation: _objectSpread$c(_objectSpread$c({}, tOptions.interpolation), {}, {
+      prefix: '#$?',
+      suffix: '?$#'
+    })
+  };
+
+  var combinedTOpts = _objectSpread$c(_objectSpread$c(_objectSpread$c(_objectSpread$c({}, tOptions), {}, {
+    count: count
+  }, values), interpolationOverride), {}, {
+    defaultValue: defaultValue,
+    ns: namespaces
+  });
+
+  var translation = key ? t(key, combinedTOpts) : defaultValue;
+  var content = renderNodes(components || children, translation, i18n, reactI18nextOptions, combinedTOpts, shouldUnescape);
+  var useAsParent = parent !== undefined ? parent : reactI18nextOptions.defaultTransParent;
+  return useAsParent ? React__default["default"].createElement(useAsParent, additionalProps, content) : content;
+}
+
 function _iterableToArrayLimit(arr, i) {
   var _i = null == arr ? null : "undefined" != typeof Symbol && arr[Symbol.iterator] || arr["@@iterator"];
   if (null != _i) {
@@ -5003,7 +5341,7 @@ var fields = {
 };
 var messages = {
 	noFields: "There are no fields to show",
-	confirmDelete: "Are you sure want to delete the field ?. This action cannot be undone.",
+	confirmDelete: "Are you sure want to delete the field? This action cannot be undone.",
 	manageFieldFor: "Manage fields for {{resource}}",
 	invalidKind: "Invalid kind",
 	reorderFields: "Fields are displayed from top to bottom."
@@ -5024,6 +5362,9 @@ var validations = {
 var tooltips = {
 	reorder: "Fields a are displayed from top to bottom. Re-order them"
 };
+var helpTexts = {
+	noData: "Here is how you can use <a>fields.</a>"
+};
 var en = {
 	common: common,
 	titles: titles,
@@ -5032,7 +5373,8 @@ var en = {
 	fields: fields,
 	messages: messages,
 	validations: validations,
-	tooltips: tooltips
+	tooltips: tooltips,
+	helpTexts: helpTexts
 };
 
 instance.use(Browser).use(initReactI18next).init({
@@ -5064,6 +5406,33 @@ instance.services.formatter.addCached("boldList", function (lng, options) {
   };
 });
 
+function _extends() {
+  _extends = Object.assign ? Object.assign.bind() : function (target) {
+    for (var i = 1; i < arguments.length; i++) {
+      var source = arguments[i];
+      for (var key in source) {
+        if (Object.prototype.hasOwnProperty.call(source, key)) {
+          target[key] = source[key];
+        }
+      }
+    }
+    return target;
+  };
+  return _extends.apply(this, arguments);
+}
+
+function _arrayWithoutHoles(arr) {
+  if (Array.isArray(arr)) return _arrayLikeToArray(arr);
+}
+
+function _nonIterableSpread() {
+  throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
+}
+
+function _toConsumableArray(arr) {
+  return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread();
+}
+
 var KINDS = {
   text: "text",
   number: "number",
@@ -5084,23 +5453,23 @@ var KINDS = {
   datetime: "datetime"
 };
 var DISPLAY_KINDS = {
-  text: t("fields.kinds.text"),
-  number: t("fields.kinds.number"),
-  monetary: t("fields.kinds.monetary"),
-  single_option: t("fields.kinds.singleOption"),
-  multi_option: t("fields.kinds.multiOption"),
-  date: t("fields.kinds.date"),
-  time: t("fields.kinds.time"),
-  date_range: t("fields.kinds.dateRange"),
-  time_range: t("fields.kinds.timeRange"),
-  textarea: t("fields.kinds.textarea"),
-  text_area: t("fields.kinds.textArea"),
-  person: t("fields.kinds.person"),
-  checkbox: t("fields.kinds.checkbox"),
-  regex: t("fields.kinds.regex"),
-  integer: t("fields.kinds.integer"),
-  decimal: t("fields.kinds.decimal"),
-  datetime: t("fields.kinds.datetime")
+  text: t$1("fields.kinds.text"),
+  number: t$1("fields.kinds.number"),
+  monetary: t$1("fields.kinds.monetary"),
+  single_option: t$1("fields.kinds.singleOption"),
+  multi_option: t$1("fields.kinds.multiOption"),
+  date: t$1("fields.kinds.date"),
+  time: t$1("fields.kinds.time"),
+  date_range: t$1("fields.kinds.dateRange"),
+  time_range: t$1("fields.kinds.timeRange"),
+  textarea: t$1("fields.kinds.textarea"),
+  text_area: t$1("fields.kinds.textArea"),
+  person: t$1("fields.kinds.person"),
+  checkbox: t$1("fields.kinds.checkbox"),
+  regex: t$1("fields.kinds.regex"),
+  integer: t$1("fields.kinds.integer"),
+  decimal: t$1("fields.kinds.decimal"),
+  datetime: t$1("fields.kinds.datetime")
 };
 var FIELD_STATES = {
   active: "active",
@@ -5112,706 +5481,57 @@ var DEFAULT_FIELD_STATE_TAXONOMY = {
 };
 var ALL_KINDS = ramda.values(KINDS);
 
-function _extends() {
-  _extends = Object.assign ? Object.assign.bind() : function (target) {
-    for (var i = 1; i < arguments.length; i++) {
-      var source = arguments[i];
-      for (var key in source) {
-        if (Object.prototype.hasOwnProperty.call(source, key)) {
-          target[key] = source[key];
-        }
+function asyncGeneratorStep(gen, resolve, reject, _next, _throw, key, arg) {
+  try {
+    var info = gen[key](arg);
+    var value = info.value;
+  } catch (error) {
+    reject(error);
+    return;
+  }
+  if (info.done) {
+    resolve(value);
+  } else {
+    Promise.resolve(value).then(_next, _throw);
+  }
+}
+function _asyncToGenerator(fn) {
+  return function () {
+    var self = this,
+      args = arguments;
+    return new Promise(function (resolve, reject) {
+      var gen = fn.apply(self, args);
+      function _next(value) {
+        asyncGeneratorStep(gen, resolve, reject, _next, _throw, "next", value);
       }
-    }
-    return target;
+      function _throw(err) {
+        asyncGeneratorStep(gen, resolve, reject, _next, _throw, "throw", err);
+      }
+      _next(undefined);
+    });
   };
-  return _extends.apply(this, arguments);
 }
 
-function _arrayWithoutHoles(arr) {
-  if (Array.isArray(arr)) return _arrayLikeToArray(arr);
-}
+var regeneratorRuntime$1 = {exports: {}};
 
-function _nonIterableSpread() {
-  throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
-}
+var _typeof = {exports: {}};
 
-function _toConsumableArray(arr) {
-  return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread();
-}
+_typeof.exports;
 
-var NEETO_FIELDS_URL = "/neeto_fields_engine/api/v1";
-var FIELDS_URL = "".concat(NEETO_FIELDS_URL, "/fields");
-var FIELD_VALUES_URL = "".concat(NEETO_FIELDS_URL, "/field_values");
-var FIELD_VALUE_URL = "".concat(NEETO_FIELDS_URL, "/field_values/:fieldValueId");
-var FIELD_URL = "".concat(NEETO_FIELDS_URL, "/fields/:fieldId");
-var FIELDS_REORDER_URL = "".concat(FIELDS_URL, "/reorder");
-var CONFIGS_URL = "".concat(NEETO_FIELDS_URL, "/configs");
-var SINGULAR = {
-  count: 1
-};
-var PLURAL = {
-  count: 2
-};
+(function (module) {
+	function _typeof(obj) {
+	  "@babel/helpers - typeof";
 
-var fieldUrl = function fieldUrl(fieldId) {
-  return utils.buildUrl(FIELD_URL, {
-    fieldId: fieldId
-  });
-};
-var fetch$1 = function fetch(_ref) {
-  var resourceType = _ref.resourceType,
-    ownerId = _ref.ownerId,
-    state = _ref.state;
-  return axios__default["default"].get(FIELDS_URL, {
-    params: {
-      resourceType: resourceType,
-      ownerId: ownerId,
-      state: state
-    }
-  });
-};
-var create$1 = function create(field) {
-  return axios__default["default"].post(FIELDS_URL, {
-    field: field
-  });
-};
-var show = function show(fieldId) {
-  return axios__default["default"].get(fieldUrl(fieldId));
-};
-var destroy$1 = function destroy(fieldId) {
-  return axios__default["default"]["delete"](fieldUrl(fieldId));
-};
-var update$1 = function update(_ref2) {
-  var fieldId = _ref2.fieldId,
-    payload = _ref2.payload;
-  return axios__default["default"].put(fieldUrl(fieldId), {
-    field: payload
-  });
-};
-var reorder = function reorder(payload) {
-  return axios__default["default"].patch(FIELDS_REORDER_URL, payload);
-};
-var fieldsApi = {
-  fetch: fetch$1,
-  create: create$1,
-  show: show,
-  destroy: destroy$1,
-  update: update$1,
-  reorder: reorder
-};
+	  return (module.exports = _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) {
+	    return typeof obj;
+	  } : function (obj) {
+	    return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj;
+	  }, module.exports.__esModule = true, module.exports["default"] = module.exports), _typeof(obj);
+	}
+	module.exports = _typeof, module.exports.__esModule = true, module.exports["default"] = module.exports; 
+} (_typeof));
 
-var QUERY_KEYS = {
-  FIELDS: "fields",
-  FIELD_VALUES: "field_values",
-  CONFIGS: "configurations"
-};
-var DEFAULT_STALE_TIME = 3600000; // 1 hour
-
-function ownKeys$a(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$a(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$a(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$a(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
-var FIELDS = QUERY_KEYS.FIELDS;
-var useFetchFields = function useFetchFields(_ref, options) {
-  var resourceType = _ref.resourceType,
-    ownerId = _ref.ownerId,
-    state = _ref.state,
-    _ref$prefixQueryKeys = _ref.prefixQueryKeys,
-    prefixQueryKeys = _ref$prefixQueryKeys === void 0 ? [] : _ref$prefixQueryKeys;
-  return reactQuery.useQuery([FIELDS].concat(_toConsumableArray(prefixQueryKeys), [resourceType, ownerId, state]), function () {
-    return fieldsApi.fetch({
-      resourceType: resourceType,
-      ownerId: ownerId,
-      state: state
-    });
-  }, _objectSpread$a({
-    staleTime: DEFAULT_STALE_TIME
-  }, options));
-};
-var useCreateField = function useCreateField(options) {
-  var queryClient = reactQuery.useQueryClient();
-  return reactQuery.useMutation(fieldsApi.create, _objectSpread$a(_objectSpread$a({}, options), {}, {
-    onSuccess: function onSuccess() {
-      var _options$onSuccess;
-      for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
-        args[_key] = arguments[_key];
-      }
-      options === null || options === void 0 ? void 0 : (_options$onSuccess = options.onSuccess) === null || _options$onSuccess === void 0 ? void 0 : _options$onSuccess.call.apply(_options$onSuccess, [options].concat(args));
-      queryClient.invalidateQueries(FIELDS);
-    }
-  }));
-};
-var useShowField = function useShowField(fieldId, options) {
-  var queryKey = [FIELDS, fieldId];
-  return reactQuery.useQuery(queryKey, function () {
-    return fieldsApi.show(fieldId);
-  }, options);
-};
-var useUpdateField = function useUpdateField(options) {
-  var queryClient = reactQuery.useQueryClient();
-  return reactQuery.useMutation(fieldsApi.update, _objectSpread$a(_objectSpread$a({}, options), {}, {
-    onSuccess: function onSuccess() {
-      var _options$onSuccess2;
-      for (var _len2 = arguments.length, args = new Array(_len2), _key2 = 0; _key2 < _len2; _key2++) {
-        args[_key2] = arguments[_key2];
-      }
-      options === null || options === void 0 ? void 0 : (_options$onSuccess2 = options.onSuccess) === null || _options$onSuccess2 === void 0 ? void 0 : _options$onSuccess2.call.apply(_options$onSuccess2, [options].concat(args));
-      queryClient.invalidateQueries(FIELDS);
-    }
-  }));
-};
-var useDestroyField = function useDestroyField(options) {
-  var queryClient = reactQuery.useQueryClient();
-  return reactQuery.useMutation(fieldsApi.destroy, _objectSpread$a(_objectSpread$a({}, options), {}, {
-    onSuccess: function onSuccess() {
-      var _options$onSuccess3;
-      for (var _len3 = arguments.length, args = new Array(_len3), _key3 = 0; _key3 < _len3; _key3++) {
-        args[_key3] = arguments[_key3];
-      }
-      options === null || options === void 0 ? void 0 : (_options$onSuccess3 = options.onSuccess) === null || _options$onSuccess3 === void 0 ? void 0 : _options$onSuccess3.call.apply(_options$onSuccess3, [options].concat(args));
-      queryClient.invalidateQueries(FIELDS);
-    }
-  }));
-};
-var useReorderFields = function useReorderFields() {
-  var queryClient = reactQuery.useQueryClient();
-  return reactQuery.useMutation(fieldsApi.reorder, {
-    onSuccess: function onSuccess() {
-      queryClient.invalidateQueries(FIELDS);
-    }
-  });
-};
-
-function ownKeys$9(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$9(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$9(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$9(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
-var arrangeOptionsDisplayOrder = function arrangeOptionsDisplayOrder(options) {
-  return options.map(function (option, index) {
-    return _objectSpread$9(_objectSpread$9({}, option), {}, {
-      displayOrder: index
-    });
-  });
-};
-var buildPayload = function buildPayload(_ref) {
-  var formValues = _ref.formValues,
-    _ref$resourceType = _ref.resourceType,
-    resourceType = _ref$resourceType === void 0 ? "" : _ref$resourceType,
-    _ref$ownerId = _ref.ownerId,
-    ownerId = _ref$ownerId === void 0 ? "" : _ref$ownerId;
-  var kind = formValues.kind.value;
-  var name = formValues.name.trim();
-  return _objectSpread$9(_objectSpread$9({}, ramda.omit(["createdAt", "id", "ownerId", "ownerType", "updatedAt"], formValues)), {}, {
-    kind: kind,
-    name: name,
-    resourceType: ramda.isEmpty(resourceType) ? undefined : resourceType,
-    ownerId: ramda.isEmpty(ownerId) ? undefined : ownerId,
-    data: isDropdown(kind) ? arrangeOptionsDisplayOrder(formValues.data) : formValues.data
-  });
-};
-var isDropdown = function isDropdown(kind) {
-  return ["single_option", "multi_option"].includes(kind);
-};
-var isRegex = function isRegex(kind) {
-  return kind === "regex";
-};
-var isAdditionalDataNeeded = function isAdditionalDataNeeded(kind) {
-  return ADDITIONAL_DATA_NEEDED_FIELD_KINDS.includes(kind);
-};
-var getPermittedKinds = function getPermittedKinds(_ref2) {
-  var allowedKinds = _ref2.allowedKinds,
-    selectedKind = _ref2.selectedKind;
-  var filteredKinds = ramda.pick(allowedKinds, FIELD_KINDS);
-  var permittedKinds = pure.filterBy({
-    group: selectedKind === null || selectedKind === void 0 ? void 0 : selectedKind.group
-  }, ramda.values(filteredKinds));
-  return permittedKinds;
-};
-var generateValidationSchema = function generateValidationSchema(additionalValidations) {
-  return yup__namespace.object().shape(_objectSpread$9(_objectSpread$9({}, BASIC_FIELD_FORM_VALIDATIONS), additionalValidations));
-};
-var renderFormFooter = function renderFormFooter(_ref3) {
-  var onClose = _ref3.onClose,
-    loading = _ref3.loading,
-    _ref3$dirty = _ref3.dirty,
-    dirty = _ref3$dirty === void 0 ? true : _ref3$dirty;
-  return /*#__PURE__*/React__default["default"].createElement(neetoui.Pane.Footer, null, /*#__PURE__*/React__default["default"].createElement(formik.ActionBlock, {
-    cancelButtonProps: {
-      onClick: onClose,
-      style: "text",
-      disabled: loading
-    },
-    submitButtonProps: {
-      label: t("labels.saveChanges"),
-      className: "mr-2",
-      type: "submit",
-      disabled: !dirty,
-      loading: loading
-    }
-  }));
-};
-
-var regexValidationSchema = yup__namespace.object().shape({
-  condition: yup__namespace.string().required(t("validations.regexConditionIsRequired")),
-  helpMessage: yup__namespace.string().required(t("validations.regexHelpMessageIsRequired"))
-});
-var dropDownOptionsValidationSchema = yup__namespace.array().of(yup__namespace.object().shape({
-  label: yup__namespace.string().trim().required(t("validations.fieldOptionIsRequired")),
-  displayOrder: yup__namespace.number()
-})).min(1, t("validations.atLeastFieldOptionIsRequired"));
-var FIELD_KINDS = {
-  text: {
-    value: "text",
-    label: t("fields.kinds.text"),
-    group: 1
-  },
-  number: {
-    value: "number",
-    label: t("fields.kinds.number"),
-    group: 2
-  },
-  monetary: {
-    value: "monetary",
-    label: t("fields.kinds.monetary"),
-    group: 2
-  },
-  single_option: {
-    value: "single_option",
-    label: t("fields.kinds.singleOption"),
-    group: 3
-  },
-  multi_option: {
-    value: "multi_option",
-    label: t("fields.kinds.multiOption"),
-    group: 3
-  },
-  date: {
-    value: "date",
-    label: t("fields.kinds.date"),
-    group: 4
-  },
-  time: {
-    value: "time",
-    label: t("fields.kinds.time"),
-    group: 5
-  },
-  date_range: {
-    value: "date_range",
-    label: t("fields.kinds.dateRange"),
-    group: 6
-  },
-  time_range: {
-    value: "time_range",
-    label: t("fields.kinds.timeRange"),
-    group: 7
-  },
-  text_area: {
-    value: "text_area",
-    label: t("fields.kinds.textArea"),
-    group: 1
-  },
-  textarea: {
-    value: "textarea",
-    label: t("fields.kinds.textarea"),
-    group: 1
-  },
-  person: {
-    value: "person",
-    label: t("fields.kinds.person"),
-    group: 8
-  },
-  checkbox: {
-    value: "checkbox",
-    label: t("fields.kinds.checkbox"),
-    group: 9
-  },
-  regex: {
-    value: "regex",
-    label: t("fields.kinds.regex"),
-    group: 10
-  },
-  integer: {
-    value: "integer",
-    label: t("fields.kinds.integer"),
-    group: 2
-  },
-  decimal: {
-    value: "decimal",
-    label: t("fields.kinds.decimal"),
-    group: 2
-  },
-  datetime: {
-    value: "datetime",
-    label: t("fields.kinds.datetime"),
-    group: 11
-  }
-};
-var ADDITIONAL_DATA_NEEDED_FIELD_KINDS = ["single_option", "multi_option", "regex"];
-var INITIAL_FIELDS = {
-  name: "",
-  kind: pure.toLabelAndValue("text"),
-  isRequired: false
-};
-var DEFAULT_OPTION = {
-  label: "",
-  displayOrder: 0
-};
-var DEFAULT_OPTIONS_DATA = [DEFAULT_OPTION];
-var DEFAULT_REGEX_DATA = {
-  regex: "",
-  helpMessage: ""
-};
-var BASIC_FIELD_FORM_VALIDATIONS = {
-  name: yup__namespace.string().trim().required(t("validations.fieldNameIsRequired")),
-  isRequired: yup__namespace["boolean"](),
-  kind: yup__namespace.object().shape({
-    value: yup__namespace.string().required()
-  }).required(t("validations.kindIsRequired")),
-  data: yup__namespace.mixed().when("kind", {
-    is: function is(kind) {
-      return isRegex(kind === null || kind === void 0 ? void 0 : kind.value);
-    },
-    then: regexValidationSchema
-  }).when("kind", {
-    is: function is(kind) {
-      return isDropdown(kind === null || kind === void 0 ? void 0 : kind.value);
-    },
-    then: dropDownOptionsValidationSchema
-  })
-};
-
-var AdditionalInputs = function AdditionalInputs() {
-  var _useTranslation = useTranslation(),
-    t = _useTranslation.t;
-  var _useFormikContext = formik$1.useFormikContext(),
-    _useFormikContext$val = _useFormikContext.values,
-    kind = _useFormikContext$val.kind,
-    options = _useFormikContext$val.data,
-    isSystem = _useFormikContext$val.isSystem;
-  var removeOption = function removeOption(arrayHelpers, index) {
-    return arrayHelpers.remove(index);
-  };
-  var addOption = function addOption(arrayHelpers) {
-    return arrayHelpers.push(DEFAULT_OPTION);
-  };
-  if (isDropdown(kind.value)) {
-    return /*#__PURE__*/React__default["default"].createElement(formik$1.FieldArray, {
-      name: "data"
-    }, function (arrayHelpers) {
-      return /*#__PURE__*/React__default["default"].createElement("div", {
-        className: "flex w-full flex-col gap-y-4"
-      }, /*#__PURE__*/React__default["default"].createElement(neetoui.Label, {
-        required: true
-      }, t("titles.dropdownOptions")), pure.isNotEmpty(options) && Array.isArray(options) && options.map(function (_, index) {
-        return /*#__PURE__*/React__default["default"].createElement("div", {
-          className: "flex w-full space-x-3",
-          key: index
-        }, /*#__PURE__*/React__default["default"].createElement("div", {
-          className: "w-full"
-        }, /*#__PURE__*/React__default["default"].createElement(formik.Input, {
-          disabled: isSystem,
-          name: "data.".concat(index, ".label"),
-          placeholder: t("placeholders.enterAnOption"),
-          suffix: options.length > 1 && /*#__PURE__*/React__default["default"].createElement(neetoui.Button, {
-            icon: neetoIcons.Delete,
-            style: "text",
-            onClick: function onClick() {
-              return removeOption(arrayHelpers, index);
-            }
-          })
-        })));
-      }), /*#__PURE__*/React__default["default"].createElement(neetoui.Button, {
-        fullWidth: true,
-        className: "mb-6 border-dashed text-xs uppercase",
-        label: t("labels.addMoreOption"),
-        style: "secondary",
-        onClick: function onClick() {
-          return addOption(arrayHelpers);
-        }
-      }));
-    });
-  } else if (isRegex(kind.value)) {
-    return /*#__PURE__*/React__default["default"].createElement("div", {
-      className: "flex w-full flex-col gap-y-4"
-    }, /*#__PURE__*/React__default["default"].createElement(neetoui.Label, {
-      required: true
-    }, t("titles.regexOptions")), /*#__PURE__*/React__default["default"].createElement(formik.Input, {
-      disabled: isSystem,
-      label: t("labels.regexCondition"),
-      name: "data.condition",
-      placeholder: t("placeholders.regexExample")
-    }), /*#__PURE__*/React__default["default"].createElement(formik.Input, {
-      disabled: isSystem,
-      label: t("labels.helpMessage"),
-      name: "data.helpMessage",
-      placeholder: t("placeholders.enterErrorMessage")
-    }));
-  }
-  return null;
-};
-
-/** @type {React.FC<import("types").FieldFormProps>} */
-
-var FieldForm = function FieldForm(_ref) {
-  var chosenKind = _ref.chosenKind,
-    _ref$kindSelectOption = _ref.kindSelectOptions,
-    kindSelectOptions = _ref$kindSelectOption === void 0 ? [] : _ref$kindSelectOption,
-    _ref$isSystem = _ref.isSystem,
-    isSystem = _ref$isSystem === void 0 ? false : _ref$isSystem,
-    _ref$hideRequiredSwit = _ref.hideRequiredSwitch,
-    hideRequiredSwitch = _ref$hideRequiredSwit === void 0 ? false : _ref$hideRequiredSwit,
-    children = _ref.children;
-  var _useTranslation = useTranslation(),
-    t = _useTranslation.t;
-  var _useFormikContext = formik$1.useFormikContext(),
-    options = _useFormikContext.values.data,
-    setFieldValue = _useFormikContext.setFieldValue;
-  var handleKindChange = function handleKindChange(kind) {
-    setFieldValue("kind", kind);
-    if (isDropdown(kind.value)) {
-      setFieldValue("data", options !== null && options !== void 0 ? options : DEFAULT_OPTIONS_DATA);
-    } else if (isRegex(kind.value)) {
-      setFieldValue("data", options !== null && options !== void 0 ? options : DEFAULT_REGEX_DATA);
-    }
-  };
-  return /*#__PURE__*/React__default["default"].createElement(neetoui.Pane.Body, null, /*#__PURE__*/React__default["default"].createElement("div", {
-    className: "w-full space-y-4"
-  }, /*#__PURE__*/React__default["default"].createElement(formik.Input, {
-    required: true,
-    disabled: isSystem,
-    label: t("labels.fieldName"),
-    name: "name",
-    placeholder: t("placeholders.enterFieldName")
-  }), /*#__PURE__*/React__default["default"].createElement(formik.Select, {
-    isSearchable: true,
-    isDisabled: isSystem,
-    label: t("labels.fieldKind"),
-    name: "kind",
-    options: kindSelectOptions,
-    onChange: handleKindChange
-  }), isAdditionalDataNeeded(chosenKind) && /*#__PURE__*/React__default["default"].createElement(AdditionalInputs, null), !hideRequiredSwitch && /*#__PURE__*/React__default["default"].createElement(neetoui.Label, {
-    className: "flex items-center gap-2"
-  }, /*#__PURE__*/React__default["default"].createElement(formik.Switch, {
-    name: "isRequired"
-  }), /*#__PURE__*/React__default["default"].createElement(neetoui.Typography, {
-    className: "leading-4",
-    component: "span",
-    style: "body2"
-  }, t("labels.isRequired"))), children));
-};
-
-var _excluded$3 = ["resourceType", "allowedKinds", "additionalValidations", "initialValues", "onClose"];
-function ownKeys$8(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$8(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$8(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$8(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
-
-/** @type {React.FC<import("types").AddProps>} */
-
-var Add = function Add(_ref) {
-  var resourceType = _ref.resourceType,
-    allowedKinds = _ref.allowedKinds,
-    additionalValidations = _ref.additionalValidations,
-    initialValues = _ref.initialValues,
-    onClose = _ref.onClose,
-    props = _objectWithoutProperties(_ref, _excluded$3);
-  var _useTranslation = useTranslation(),
-    t = _useTranslation.t;
-  var _useCreateField = useCreateField(),
-    createField = _useCreateField.mutate,
-    isSubmitting = _useCreateField.isLoading;
-  var filteredKinds = ramda.values(ramda.pick(allowedKinds, FIELD_KINDS));
-  var handleSubmit = function handleSubmit(formValues) {
-    var payload = buildPayload({
-      formValues: formValues,
-      resourceType: resourceType
-    });
-    createField(payload, {
-      onSuccess: onClose
-    });
-  };
-  return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement(neetoui.Pane.Header, null, /*#__PURE__*/React__default["default"].createElement(neetoui.Typography, {
-    style: "h2"
-  }, t("titles.addField"))), /*#__PURE__*/React__default["default"].createElement(formik.Form, {
-    formikProps: {
-      initialValues: _objectSpread$8(_objectSpread$8({}, initialValues), INITIAL_FIELDS),
-      validationSchema: generateValidationSchema(additionalValidations),
-      onSubmit: handleSubmit
-    }
-  }, function (_ref2) {
-    var dirty = _ref2.dirty,
-      kind = _ref2.values.kind;
-    return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement(FieldForm, _extends({
-      chosenKind: kind.value,
-      kindSelectOptions: filteredKinds
-    }, props)), renderFormFooter({
-      onClose: onClose,
-      loading: isSubmitting,
-      dirty: dirty
-    }));
-  }));
-};
-
-var _excluded$2 = ["fieldId", "allowedKinds", "additionalValidations", "initialValues", "onClose"];
-function ownKeys$7(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$7(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$7(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$7(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
-
-/** @type {React.FC<import("types").EditProps>} */
-
-var Edit = function Edit(_ref) {
-  var fieldId = _ref.fieldId,
-    allowedKinds = _ref.allowedKinds,
-    _ref$additionalValida = _ref.additionalValidations,
-    additionalValidations = _ref$additionalValida === void 0 ? {} : _ref$additionalValida,
-    _ref$initialValues = _ref.initialValues,
-    initialValues = _ref$initialValues === void 0 ? {} : _ref$initialValues,
-    onClose = _ref.onClose,
-    props = _objectWithoutProperties(_ref, _excluded$2);
-  var _useTranslation = useTranslation(),
-    t = _useTranslation.t;
-  var _useShowField = useShowField(fieldId),
-    _useShowField$data = _useShowField.data,
-    _useShowField$data2 = _useShowField$data === void 0 ? {} : _useShowField$data,
-    _useShowField$data2$f = _useShowField$data2.field,
-    field = _useShowField$data2$f === void 0 ? {} : _useShowField$data2$f;
-  var _useUpdateField = useUpdateField(),
-    updateField = _useUpdateField.mutate,
-    isSubmitting = _useUpdateField.isLoading;
-  var handleSubmit = function handleSubmit(formValues) {
-    var payload = buildPayload({
-      formValues: formValues
-    });
-    updateField({
-      fieldId: fieldId,
-      payload: payload
-    }, {
-      onSuccess: onClose
-    });
-  };
-  return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement(neetoui.Pane.Header, null, /*#__PURE__*/React__default["default"].createElement(neetoui.Typography, {
-    style: "h2"
-  }, t("titles.editField"))), /*#__PURE__*/React__default["default"].createElement(formik.Form, {
-    formikProps: {
-      initialValues: _objectSpread$7(_objectSpread$7({}, initialValues), ramda.assoc("kind", FIELD_KINDS[field.kind], field)),
-      validationSchema: generateValidationSchema(additionalValidations),
-      enableReinitialize: true,
-      onSubmit: handleSubmit
-    }
-  }, function (_ref2) {
-    var kind = _ref2.values.kind,
-      dirty = _ref2.dirty;
-    var permittedKinds = getPermittedKinds({
-      allowedKinds: allowedKinds,
-      selectedKind: kind
-    });
-    return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement(FieldForm, _extends({
-      chosenKind: kind === null || kind === void 0 ? void 0 : kind.value,
-      isSystem: field.isSystem,
-      kindSelectOptions: permittedKinds
-    }, props)), renderFormFooter({
-      onClose: onClose,
-      loading: isSubmitting,
-      dirty: dirty
-    }));
-  }));
-};
-
-var _excluded$1 = ["isOpen", "selectedField"];
-
-/** @type {React.FC<import("types").FieldsPaneProps>} */
-
-var FieldsPane = function FieldsPane(_ref) {
-  var isOpen = _ref.isOpen,
-    _ref$selectedField = _ref.selectedField,
-    selectedField = _ref$selectedField === void 0 ? {} : _ref$selectedField,
-    props = _objectWithoutProperties(_ref, _excluded$1);
-  return /*#__PURE__*/React__default["default"].createElement(neetoui.Pane, {
-    isOpen: isOpen,
-    onClose: props.onClose
-  }, ramda.isEmpty(selectedField) ? /*#__PURE__*/React__default["default"].createElement(Add, props) : /*#__PURE__*/React__default["default"].createElement(Edit, _extends({
-    fieldId: selectedField === null || selectedField === void 0 ? void 0 : selectedField.id
-  }, props)));
-};
-
-/** @type {React.FC<import("types").AddFieldProps>} */
-
-var AddField = function AddField(_ref) {
-  var resourceType = _ref.resourceType,
-    _ref$allowedKinds = _ref.allowedKinds,
-    allowedKinds = _ref$allowedKinds === void 0 ? ALL_KINDS : _ref$allowedKinds,
-    additionalValidations = _ref.additionalValidations,
-    initialValues = _ref.initialValues,
-    hideRequiredSwitch = _ref.hideRequiredSwitch,
-    children = _ref.children;
-  var _useState = React.useState(false),
-    _useState2 = _slicedToArray(_useState, 2),
-    isOpen = _useState2[0],
-    setIsOpen = _useState2[1];
-  var _useTranslation = useTranslation(),
-    t = _useTranslation.t;
-  return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement(neetoui.Button, {
-    label: t("labels.addField"),
-    onClick: function onClick() {
-      return setIsOpen(true);
-    }
-  }), /*#__PURE__*/React__default["default"].createElement(FieldsPane, {
-    additionalValidations: additionalValidations,
-    allowedKinds: allowedKinds,
-    hideRequiredSwitch: hideRequiredSwitch,
-    initialValues: initialValues,
-    isOpen: isOpen,
-    resourceType: resourceType,
-    onClose: function onClose() {
-      return setIsOpen(false);
-    }
-  }, children));
-};
-
-function asyncGeneratorStep(gen, resolve, reject, _next, _throw, key, arg) {
-  try {
-    var info = gen[key](arg);
-    var value = info.value;
-  } catch (error) {
-    reject(error);
-    return;
-  }
-  if (info.done) {
-    resolve(value);
-  } else {
-    Promise.resolve(value).then(_next, _throw);
-  }
-}
-function _asyncToGenerator(fn) {
-  return function () {
-    var self = this,
-      args = arguments;
-    return new Promise(function (resolve, reject) {
-      var gen = fn.apply(self, args);
-      function _next(value) {
-        asyncGeneratorStep(gen, resolve, reject, _next, _throw, "next", value);
-      }
-      function _throw(err) {
-        asyncGeneratorStep(gen, resolve, reject, _next, _throw, "throw", err);
-      }
-      _next(undefined);
-    });
-  };
-}
-
-var regeneratorRuntime$1 = {exports: {}};
-
-var _typeof = {exports: {}};
-
-_typeof.exports;
-
-(function (module) {
-	function _typeof(obj) {
-	  "@babel/helpers - typeof";
-
-	  return (module.exports = _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) {
-	    return typeof obj;
-	  } : function (obj) {
-	    return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj;
-	  }, module.exports.__esModule = true, module.exports["default"] = module.exports), _typeof(obj);
-	}
-	module.exports = _typeof, module.exports.__esModule = true, module.exports["default"] = module.exports; 
-} (_typeof));
-
-var _typeofExports = _typeof.exports;
+var _typeofExports = _typeof.exports;
 
 regeneratorRuntime$1.exports;
 
@@ -6121,481 +5841,1129 @@ regeneratorRuntime$1.exports;
 	module.exports = _regeneratorRuntime, module.exports.__esModule = true, module.exports["default"] = module.exports; 
 } (regeneratorRuntime$1));
 
-var regeneratorRuntimeExports = regeneratorRuntime$1.exports;
+var regeneratorRuntimeExports = regeneratorRuntime$1.exports;
+
+// TODO(Babel 8): Remove this file.
+
+var runtime = regeneratorRuntimeExports();
+var regenerator = runtime;
+
+// Copied from https://github.com/facebook/regenerator/blob/main/packages/runtime/runtime.js#L736=
+try {
+  regeneratorRuntime = runtime;
+} catch (accidentalStrictMode) {
+  if (typeof globalThis === "object") {
+    globalThis.regeneratorRuntime = runtime;
+  } else {
+    Function("r", "regeneratorRuntime = r")(runtime);
+  }
+}
+
+var _regeneratorRuntime = /*@__PURE__*/getDefaultExportFromCjs(regenerator);
+
+var dayjs_min = {exports: {}};
+
+dayjs_min.exports;
+
+(function (module, exports) {
+	!function(t,e){module.exports=e();}(commonjsGlobal,(function(){var t=1e3,e=6e4,n=36e5,r="millisecond",i="second",s="minute",u="hour",a="day",o="week",f="month",h="quarter",c="year",d="date",l="Invalid Date",$=/^(\d{4})[-/]?(\d{1,2})?[-/]?(\d{0,2})[Tt\s]*(\d{1,2})?:?(\d{1,2})?:?(\d{1,2})?[.:]?(\d+)?$/,y=/\[([^\]]+)]|Y{1,4}|M{1,4}|D{1,2}|d{1,4}|H{1,2}|h{1,2}|a|A|m{1,2}|s{1,2}|Z{1,2}|SSS/g,M={name:"en",weekdays:"Sunday_Monday_Tuesday_Wednesday_Thursday_Friday_Saturday".split("_"),months:"January_February_March_April_May_June_July_August_September_October_November_December".split("_"),ordinal:function(t){var e=["th","st","nd","rd"],n=t%100;return "["+t+(e[(n-20)%10]||e[n]||e[0])+"]"}},m=function(t,e,n){var r=String(t);return !r||r.length>=e?t:""+Array(e+1-r.length).join(n)+t},v={s:m,z:function(t){var e=-t.utcOffset(),n=Math.abs(e),r=Math.floor(n/60),i=n%60;return (e<=0?"+":"-")+m(r,2,"0")+":"+m(i,2,"0")},m:function t(e,n){if(e.date()<n.date())return -t(n,e);var r=12*(n.year()-e.year())+(n.month()-e.month()),i=e.clone().add(r,f),s=n-i<0,u=e.clone().add(r+(s?-1:1),f);return +(-(r+(n-i)/(s?i-u:u-i))||0)},a:function(t){return t<0?Math.ceil(t)||0:Math.floor(t)},p:function(t){return {M:f,y:c,w:o,d:a,D:d,h:u,m:s,s:i,ms:r,Q:h}[t]||String(t||"").toLowerCase().replace(/s$/,"")},u:function(t){return void 0===t}},g="en",D={};D[g]=M;var p=function(t){return t instanceof _},S=function t(e,n,r){var i;if(!e)return g;if("string"==typeof e){var s=e.toLowerCase();D[s]&&(i=s),n&&(D[s]=n,i=s);var u=e.split("-");if(!i&&u.length>1)return t(u[0])}else {var a=e.name;D[a]=e,i=a;}return !r&&i&&(g=i),i||!r&&g},w=function(t,e){if(p(t))return t.clone();var n="object"==typeof e?e:{};return n.date=t,n.args=arguments,new _(n)},O=v;O.l=S,O.i=p,O.w=function(t,e){return w(t,{locale:e.$L,utc:e.$u,x:e.$x,$offset:e.$offset})};var _=function(){function M(t){this.$L=S(t.locale,null,!0),this.parse(t);}var m=M.prototype;return m.parse=function(t){this.$d=function(t){var e=t.date,n=t.utc;if(null===e)return new Date(NaN);if(O.u(e))return new Date;if(e instanceof Date)return new Date(e);if("string"==typeof e&&!/Z$/i.test(e)){var r=e.match($);if(r){var i=r[2]-1||0,s=(r[7]||"0").substring(0,3);return n?new Date(Date.UTC(r[1],i,r[3]||1,r[4]||0,r[5]||0,r[6]||0,s)):new Date(r[1],i,r[3]||1,r[4]||0,r[5]||0,r[6]||0,s)}}return new Date(e)}(t),this.$x=t.x||{},this.init();},m.init=function(){var t=this.$d;this.$y=t.getFullYear(),this.$M=t.getMonth(),this.$D=t.getDate(),this.$W=t.getDay(),this.$H=t.getHours(),this.$m=t.getMinutes(),this.$s=t.getSeconds(),this.$ms=t.getMilliseconds();},m.$utils=function(){return O},m.isValid=function(){return !(this.$d.toString()===l)},m.isSame=function(t,e){var n=w(t);return this.startOf(e)<=n&&n<=this.endOf(e)},m.isAfter=function(t,e){return w(t)<this.startOf(e)},m.isBefore=function(t,e){return this.endOf(e)<w(t)},m.$g=function(t,e,n){return O.u(t)?this[e]:this.set(n,t)},m.unix=function(){return Math.floor(this.valueOf()/1e3)},m.valueOf=function(){return this.$d.getTime()},m.startOf=function(t,e){var n=this,r=!!O.u(e)||e,h=O.p(t),l=function(t,e){var i=O.w(n.$u?Date.UTC(n.$y,e,t):new Date(n.$y,e,t),n);return r?i:i.endOf(a)},$=function(t,e){return O.w(n.toDate()[t].apply(n.toDate("s"),(r?[0,0,0,0]:[23,59,59,999]).slice(e)),n)},y=this.$W,M=this.$M,m=this.$D,v="set"+(this.$u?"UTC":"");switch(h){case c:return r?l(1,0):l(31,11);case f:return r?l(1,M):l(0,M+1);case o:var g=this.$locale().weekStart||0,D=(y<g?y+7:y)-g;return l(r?m-D:m+(6-D),M);case a:case d:return $(v+"Hours",0);case u:return $(v+"Minutes",1);case s:return $(v+"Seconds",2);case i:return $(v+"Milliseconds",3);default:return this.clone()}},m.endOf=function(t){return this.startOf(t,!1)},m.$set=function(t,e){var n,o=O.p(t),h="set"+(this.$u?"UTC":""),l=(n={},n[a]=h+"Date",n[d]=h+"Date",n[f]=h+"Month",n[c]=h+"FullYear",n[u]=h+"Hours",n[s]=h+"Minutes",n[i]=h+"Seconds",n[r]=h+"Milliseconds",n)[o],$=o===a?this.$D+(e-this.$W):e;if(o===f||o===c){var y=this.clone().set(d,1);y.$d[l]($),y.init(),this.$d=y.set(d,Math.min(this.$D,y.daysInMonth())).$d;}else l&&this.$d[l]($);return this.init(),this},m.set=function(t,e){return this.clone().$set(t,e)},m.get=function(t){return this[O.p(t)]()},m.add=function(r,h){var d,l=this;r=Number(r);var $=O.p(h),y=function(t){var e=w(l);return O.w(e.date(e.date()+Math.round(t*r)),l)};if($===f)return this.set(f,this.$M+r);if($===c)return this.set(c,this.$y+r);if($===a)return y(1);if($===o)return y(7);var M=(d={},d[s]=e,d[u]=n,d[i]=t,d)[$]||1,m=this.$d.getTime()+r*M;return O.w(m,this)},m.subtract=function(t,e){return this.add(-1*t,e)},m.format=function(t){var e=this,n=this.$locale();if(!this.isValid())return n.invalidDate||l;var r=t||"YYYY-MM-DDTHH:mm:ssZ",i=O.z(this),s=this.$H,u=this.$m,a=this.$M,o=n.weekdays,f=n.months,h=function(t,n,i,s){return t&&(t[n]||t(e,r))||i[n].slice(0,s)},c=function(t){return O.s(s%12||12,t,"0")},d=n.meridiem||function(t,e,n){var r=t<12?"AM":"PM";return n?r.toLowerCase():r},$={YY:String(this.$y).slice(-2),YYYY:this.$y,M:a+1,MM:O.s(a+1,2,"0"),MMM:h(n.monthsShort,a,f,3),MMMM:h(f,a),D:this.$D,DD:O.s(this.$D,2,"0"),d:String(this.$W),dd:h(n.weekdaysMin,this.$W,o,2),ddd:h(n.weekdaysShort,this.$W,o,3),dddd:o[this.$W],H:String(s),HH:O.s(s,2,"0"),h:c(1),hh:c(2),a:d(s,u,!0),A:d(s,u,!1),m:String(u),mm:O.s(u,2,"0"),s:String(this.$s),ss:O.s(this.$s,2,"0"),SSS:O.s(this.$ms,3,"0"),Z:i};return r.replace(y,(function(t,e){return e||$[t]||i.replace(":","")}))},m.utcOffset=function(){return 15*-Math.round(this.$d.getTimezoneOffset()/15)},m.diff=function(r,d,l){var $,y=O.p(d),M=w(r),m=(M.utcOffset()-this.utcOffset())*e,v=this-M,g=O.m(this,M);return g=($={},$[c]=g/12,$[f]=g,$[h]=g/3,$[o]=(v-m)/6048e5,$[a]=(v-m)/864e5,$[u]=v/n,$[s]=v/e,$[i]=v/t,$)[y]||v,l?g:O.a(g)},m.daysInMonth=function(){return this.endOf(f).$D},m.$locale=function(){return D[this.$L]},m.locale=function(t,e){if(!t)return this.$L;var n=this.clone(),r=S(t,e,!0);return r&&(n.$L=r),n},m.clone=function(){return O.w(this.$d,this)},m.toDate=function(){return new Date(this.valueOf())},m.toJSON=function(){return this.isValid()?this.toISOString():null},m.toISOString=function(){return this.$d.toISOString()},m.toString=function(){return this.$d.toUTCString()},M}(),T=_.prototype;return w.prototype=T,[["$ms",r],["$s",i],["$m",s],["$H",u],["$W",a],["$M",f],["$y",c],["$D",d]].forEach((function(t){T[t[1]]=function(e){return this.$g(e,t[0],t[1])};})),w.extend=function(t,e){return t.$i||(t(e,_,w),t.$i=!0),w},w.locale=S,w.isDayjs=p,w.unix=function(t){return w(1e3*t)},w.en=D[g],w.Ls=D,w.p={},w})); 
+} (dayjs_min, dayjs_min.exports));
+
+var dayjs_minExports = dayjs_min.exports;
+var dayjs = /*@__PURE__*/getDefaultExportFromCjs(dayjs_minExports);
+
+var dateSchema = yup__namespace.date().nullable();
+var buildSchemaAllowingEmptyValue = function buildSchemaAllowingEmptyValue(schema) {
+  return yup__namespace.mixed().test({
+    name: "validate-if-not-empty",
+    test: function test(value) {
+      if (pure.isNotEmpty(value) && ramda.isNotNil(value)) {
+        try {
+          schema.validateSync(value);
+          return true;
+        } catch (_unused) {
+          return false;
+        }
+      }
+      return true;
+    }
+  });
+};
+var buildFieldValidationSchema = function buildFieldValidationSchema(_ref) {
+  var kind = _ref.kind,
+    isRequired = _ref.isRequired,
+    fieldData = _ref.fieldData;
+  switch (kind) {
+    case KINDS.singleOption:
+    case KINDS.text:
+      {
+        var schema = yup__namespace.string().trim().nullable();
+        return isRequired ? schema.required(t$1("validations.thisIsRequired")) : schema;
+      }
+    case KINDS.number:
+    case KINDS.monetary:
+    case KINDS.decimal:
+      {
+        var _schema = buildSchemaAllowingEmptyValue(yup__namespace.number().typeError(t$1("validations.notAValidNumber")));
+        return isRequired ? _schema.required(t$1("validations.thisIsRequired")) : _schema;
+      }
+    case KINDS.integer:
+      {
+        var _schema2 = buildSchemaAllowingEmptyValue(yup__namespace.number().nullable().integer().typeError(t$1("validations.notAValidInteger")));
+        return isRequired ? _schema2.required(t$1("validations.thisIsRequired")) : _schema2;
+      }
+    case KINDS.date:
+    case KINDS.time:
+      {
+        var _schema3 = buildSchemaAllowingEmptyValue(dateSchema);
+        return isRequired ? _schema3.required(t$1("validations.thisIsRequired")) : _schema3;
+      }
+    case KINDS.multiOption:
+      {
+        var _schema4 = yup__namespace.array().of(yup__namespace.string()).nullable();
+        return isRequired ? _schema4.min(1, t$1("validations.minOneItem")).required(t$1("validations.thisIsRequired")) : _schema4;
+      }
+    case KINDS.dateRange:
+    case KINDS.timeRange:
+      {
+        if (isRequired) {
+          return yup__namespace.array().of(dateSchema).required(t$1("validations.thisIsRequired"));
+        }
+        return yup__namespace.array().of(dateSchema).nullable();
+      }
+    case KINDS.checkbox:
+      return yup__namespace["boolean"]().nullable();
+    case KINDS.regex:
+      {
+        var regexPattern = fieldData === null || fieldData === void 0 ? void 0 : fieldData.condition;
+        var _schema5 = buildSchemaAllowingEmptyValue(yup__namespace.string().nullable().matches(cleanedRegex(regexPattern), fieldData === null || fieldData === void 0 ? void 0 : fieldData.helpMessage));
+        return isRequired ? _schema5.required(t$1("validations.thisIsRequired")) : _schema5;
+      }
+    default:
+      return yup__namespace.mixed();
+  }
+};
+var cleanedRegex = function cleanedRegex(expression) {
+  if (expression.startsWith("/") && expression.endsWith("/")) {
+    return expression.slice(1, -1);
+  }
+  return expression;
+};
+var buildOptionsToLabelAndValue = function buildOptionsToLabelAndValue() {
+  var optionObjects = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
+  return optionObjects.map(function (_ref2) {
+    var label = _ref2.label,
+      value = _ref2.value;
+    return {
+      label: label,
+      value: value || label
+    };
+  });
+};
+var buildArrayToLabelAndValues = function buildArrayToLabelAndValues(value) {
+  return ramda.map(pure.toLabelAndValue, value || []);
+};
+var validateField = /*#__PURE__*/function () {
+  var _ref4 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee(_ref3) {
+    var fieldValue, fieldName, isRequired, kind, fieldData;
+    return _regeneratorRuntime.wrap(function _callee$(_context) {
+      while (1) switch (_context.prev = _context.next) {
+        case 0:
+          fieldValue = _ref3.fieldValue, fieldName = _ref3.fieldName, isRequired = _ref3.isRequired, kind = _ref3.kind, fieldData = _ref3.fieldData;
+          _context.prev = 1;
+          _context.next = 4;
+          return yup__namespace.object().shape(_defineProperty({}, fieldName, buildFieldValidationSchema({
+            kind: kind,
+            isRequired: isRequired,
+            fieldData: fieldData
+          }))).validate(_defineProperty({}, fieldName, fieldValue));
+        case 4:
+          return _context.abrupt("return", false);
+        case 7:
+          _context.prev = 7;
+          _context.t0 = _context["catch"](1);
+          return _context.abrupt("return", _context.t0.errors);
+        case 10:
+        case "end":
+          return _context.stop();
+      }
+    }, _callee, null, [[1, 7]]);
+  }));
+  return function validateField(_x) {
+    return _ref4.apply(this, arguments);
+  };
+}();
+var dateTimeToString = function dateTimeToString(dateTime) {
+  return dateTime && dayjs(dateTime).toString() || "";
+};
+
+var _excluded$3 = ["name", "id", "kind", "data", "individualSubmit", "formRef", "formRefs", "disabled", "isRequiredColumnName"];
+function ownKeys$a(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$a(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$a(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$a(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+var useFormikFields = function useFormikFields(_ref) {
+  var name = _ref.name,
+    fieldId = _ref.id,
+    kind = _ref.kind,
+    fieldData = _ref.data,
+    individualSubmit = _ref.individualSubmit,
+    formRef = _ref.formRef,
+    formRefs = _ref.formRefs,
+    disabled = _ref.disabled,
+    _ref$isRequiredColumn = _ref.isRequiredColumnName,
+    isRequiredColumnName = _ref$isRequiredColumn === void 0 ? "isRequired" : _ref$isRequiredColumn,
+    props = _objectWithoutProperties(_ref, _excluded$3);
+  var formikContext = formik.useFormikContext();
+  var setFieldValue = formikContext.setFieldValue,
+    submitForm = formikContext.submitForm,
+    dirty = formikContext.dirty,
+    isSubmitting = formikContext.isSubmitting;
+  var fieldPath = escapeString("".concat(name, "-").concat(fieldId));
+  var fieldName = kind === KINDS.multiOption ? "values" : "value";
+  var fieldValuePath = "".concat(fieldPath, ".data.").concat(fieldName);
+  if (ramda.isNil(formRef) && ramda.isNotNil(formRefs)) {
+    formRefs.current[fieldValuePath] = formikContext;
+  } else if (ramda.isNil(formRefs) && ramda.isNotNil(formRef)) {
+    formRef.current = formikContext;
+  }
+  var _useField = formik.useField({
+      name: fieldValuePath,
+      validate: function validate(fieldValue) {
+        return validateField({
+          fieldValue: fieldValue,
+          fieldName: name,
+          isRequired: props[isRequiredColumnName],
+          kind: kind,
+          fieldData: fieldData
+        });
+      }
+    }),
+    _useField2 = _slicedToArray(_useField, 3),
+    formikFieldProps = _useField2[0],
+    meta = _useField2[1],
+    helpers = _useField2[2];
+  var handleSubmit = function handleSubmit(value) {
+    ramda.isNotNil(value) && setFieldValue(fieldValuePath, value);
+    individualSubmit && submitForm();
+  };
+  var getValueForField = function getValueForField(value) {
+    if (kind === KINDS.singleOption) {
+      value = pure.toLabelAndValue(value);
+    } else if (kind === KINDS.multiOption) {
+      value = buildArrayToLabelAndValues(value);
+    }
+    return value || "";
+  };
+  var isDropdown = ["single_option", "multi_option"].includes(kind);
+  if (isSubmitting && !meta.touched) {
+    helpers.setTouched(true);
+  }
+  return {
+    handleSubmit: handleSubmit,
+    fieldProps: _objectSpread$a(_objectSpread$a({}, formikFieldProps), {}, {
+      required: props[isRequiredColumnName],
+      error: meta.touched && meta.error,
+      options: isDropdown ? buildOptionsToLabelAndValue(fieldData) : undefined,
+      value: getValueForField(formikFieldProps.value),
+      dirty: dirty,
+      label: !individualSubmit && pure.capitalize(name),
+      disabled: disabled
+    })
+  };
+};
 
-// TODO(Babel 8): Remove this file.
+var Checkbox = function Checkbox(props) {
+  var _useFormikFields = useFormikFields(props),
+    handleSubmit = _useFormikFields.handleSubmit,
+    fieldProps = _useFormikFields.fieldProps;
+  return /*#__PURE__*/React__default["default"].createElement(neetoui.Switch, _extends({}, fieldProps, {
+    checked: fieldProps.value,
+    onChange: function onChange(_ref) {
+      var checked = _ref.target.checked;
+      return handleSubmit(checked);
+    }
+  }));
+};
 
-var runtime = regeneratorRuntimeExports();
-var regenerator = runtime;
+var DateOrTime = function DateOrTime(props) {
+  var _useFormikFields = useFormikFields(props),
+    handleSubmit = _useFormikFields.handleSubmit,
+    fieldProps = _useFormikFields.fieldProps;
+  if (props.kind === KINDS.time) {
+    return /*#__PURE__*/React__default["default"].createElement(neetoui.TimePicker, _extends({}, fieldProps, {
+      use12Hours: true,
+      format: "h:mm A",
+      onChange: function onChange(dateTime) {
+        return handleSubmit(dateTimeToString(dateTime));
+      }
+    }));
+  } else if (props.kind === KINDS.date) {
+    return /*#__PURE__*/React__default["default"].createElement(neetoui.DatePicker, _extends({}, fieldProps, {
+      onChange: function onChange(dateTime) {
+        return handleSubmit(dateTimeToString(dateTime));
+      }
+    }));
+  }
+  return /*#__PURE__*/React__default["default"].createElement(neetoui.DatePicker, _extends({
+    showTime: true,
+    timeFormat: "h:mm A"
+  }, fieldProps, {
+    onChange: function onChange(dateTime) {
+      return handleSubmit(dateTimeToString(dateTime));
+    }
+  }));
+};
 
-// Copied from https://github.com/facebook/regenerator/blob/main/packages/runtime/runtime.js#L736=
-try {
-  regeneratorRuntime = runtime;
-} catch (accidentalStrictMode) {
-  if (typeof globalThis === "object") {
-    globalThis.regeneratorRuntime = runtime;
-  } else {
-    Function("r", "regeneratorRuntime = r")(runtime);
+var MultiOption = function MultiOption(props) {
+  var _useFormikFields = useFormikFields(props),
+    handleSubmit = _useFormikFields.handleSubmit,
+    fieldProps = _useFormikFields.fieldProps;
+  return /*#__PURE__*/React__default["default"].createElement(neetoui.Select, _extends({
+    isMulti: true,
+    isSearchable: true
+  }, fieldProps, {
+    onChange: function onChange(selectedOptions) {
+      return handleSubmit(ramda.pluck("value", selectedOptions));
+    }
+  }));
+};
+
+var Number$1 = function Number(props) {
+  var _useFormikFields = useFormikFields(props),
+    handleSubmit = _useFormikFields.handleSubmit,
+    fieldProps = _useFormikFields.fieldProps;
+  var showSubmitButton = props.individualSubmit && fieldProps.dirty;
+  return /*#__PURE__*/React__default["default"].createElement(neetoui.Input, _extends({}, fieldProps, {
+    type: "number",
+    suffix: showSubmitButton && /*#__PURE__*/React__default["default"].createElement(formik$1.Button, {
+      icon: neetoIcons.Check,
+      style: "text",
+      onClick: function onClick() {
+        return handleSubmit();
+      }
+    })
+  }));
+};
+
+var RangePicker = function RangePicker(props) {
+  var _useFormikFields = useFormikFields(props),
+    handleSubmit = _useFormikFields.handleSubmit,
+    fieldProps = _useFormikFields.fieldProps;
+  var handleChange = function handleChange(_ref) {
+    var _ref2 = _slicedToArray(_ref, 2),
+      begin = _ref2[0],
+      end = _ref2[1];
+    return handleSubmit([dateTimeToString(begin), dateTimeToString(end)]);
+  };
+  if (props.kind === KINDS.dateRange) {
+    return /*#__PURE__*/React__default["default"].createElement(neetoui.DatePicker, _extends({}, fieldProps, {
+      type: "range",
+      onChange: handleChange
+    }));
+  }
+
+  //time_range
+  return /*#__PURE__*/React__default["default"].createElement(neetoui.TimePicker, _extends({}, fieldProps, {
+    use12Hours: true,
+    format: "h:mm A",
+    type: "range",
+    onChange: handleChange
+  }));
+};
+
+var SingleOption = function SingleOption(props) {
+  var _useFormikFields = useFormikFields(props),
+    handleSubmit = _useFormikFields.handleSubmit,
+    fieldProps = _useFormikFields.fieldProps;
+  return /*#__PURE__*/React__default["default"].createElement(neetoui.Select, _extends({
+    isSearchable: true
+  }, fieldProps, {
+    onChange: function onChange(_ref) {
+      var value = _ref.value;
+      return handleSubmit(value);
+    }
+  }));
+};
+
+var Text = function Text(props) {
+  var _useFormikFields = useFormikFields(props),
+    handleSubmit = _useFormikFields.handleSubmit,
+    fieldProps = _useFormikFields.fieldProps;
+  var showSubmitButton = props.individualSubmit && fieldProps.dirty;
+  return /*#__PURE__*/React__default["default"].createElement(neetoui.Input, _extends({}, fieldProps, {
+    suffix: showSubmitButton && /*#__PURE__*/React__default["default"].createElement(formik$1.Button, {
+      icon: neetoIcons.Check,
+      style: "text",
+      onClick: function onClick() {
+        return handleSubmit();
+      }
+    })
+  }));
+};
+
+var TextArea = function TextArea(props) {
+  var _useTranslation = useTranslation(),
+    t = _useTranslation.t;
+  var _useFormikFields = useFormikFields(props),
+    handleSubmit = _useFormikFields.handleSubmit,
+    fieldProps = _useFormikFields.fieldProps;
+  var showSubmitButton = props.individualSubmit && fieldProps.dirty;
+  return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement(neetoui.Textarea, fieldProps), showSubmitButton && /*#__PURE__*/React__default["default"].createElement(formik$1.Button, {
+    className: "m-auto mt-2",
+    label: t("labels.submit"),
+    size: "small",
+    onClick: function onClick() {
+      return handleSubmit();
+    }
+  }));
+};
+
+function ownKeys$9(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$9(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$9(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$9(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+var standardComponents = {
+  text: Text,
+  regex: Text,
+  textarea: TextArea,
+  text_area: TextArea,
+  // TODO: Remove text-area after integration in all hosts.
+  number: Number$1,
+  monetary: Number$1,
+  integer: Number$1,
+  decimal: Number$1,
+  date: DateOrTime,
+  time: DateOrTime,
+  datetime: DateOrTime,
+  single_option: SingleOption,
+  multi_option: MultiOption,
+  date_range: RangePicker,
+  time_range: RangePicker,
+  checkbox: Checkbox
+};
+var getFieldInput = function getFieldInput(_ref) {
+  var field = _ref.field,
+    _ref$customComponents = _ref.customComponents,
+    customComponents = _ref$customComponents === void 0 ? {} : _ref$customComponents;
+  var Component = customComponents[field.kind] || standardComponents[field.kind];
+  if (Component) {
+    return Component;
   }
-}
-
-var _regeneratorRuntime = /*@__PURE__*/getDefaultExportFromCjs(regenerator);
+  return null;
+};
+var removeItemsWithNullData = function removeItemsWithNullData(fieldValues) {
+  return fieldValues.filter(function (item) {
+    return !ramda.isNil(ramda.prop("data", item));
+  });
+};
+var removeNoiseFromValues = function removeNoiseFromValues(fieldValues) {
+  return ramda.map(ramda.pick(["id", "fieldId", "data"]), fieldValues);
+};
+var transformValues = function transformValues(_ref2) {
+  var formikValues = _ref2.values,
+    fields = _ref2.fields;
+  var allFieldValues = ramda.clone(formikValues);
+  var neetoFieldValues = [];
+  fields.forEach(function (_ref3) {
+    var id = _ref3.id,
+      name = _ref3.name;
+    var fieldPath = escapeString("".concat(name, "-").concat(id));
+    neetoFieldValues.push(allFieldValues[fieldPath]);
+    delete allFieldValues[fieldPath];
+  });
+  var cleanedFieldValues = ramda.pipe(removeItemsWithNullData, removeNoiseFromValues)(neetoFieldValues);
+  return _objectSpread$9(_objectSpread$9({}, allFieldValues), {}, {
+    fieldValuesAttributes: cleanedFieldValues
+  });
+};
+var getInitialFieldValue = function getInitialFieldValue(field) {
+  var fieldValues = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : [];
+  var existingFieldValueData = pure.findBy({
+    fieldId: field.id
+  }, fieldValues);
+  var newFieldValueData = {
+    fieldId: field.id,
+    data: null
+  };
+  return _defineProperty({}, escapeString("".concat(field.name, "-").concat(field.id)), existingFieldValueData || newFieldValueData);
+};
+var getAllInitialFieldValues = function getAllInitialFieldValues(fields) {
+  var fieldValues = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : [];
+  return getNonSystemFields(fields).map(function (field) {
+    return getInitialFieldValue(field, fieldValues);
+  });
+};
+var mergeInitialValues = function mergeInitialValues(_ref5) {
+  var initialValues = _ref5.initialValues,
+    fields = _ref5.fields;
+  var initialValue = ramda.mergeAll([initialValues].concat(_toConsumableArray(getAllInitialFieldValues(fields, initialValues === null || initialValues === void 0 ? void 0 : initialValues.fieldValues))));
+  return ramda.omit(["fieldValues"], initialValue);
+};
+var getNonSystemFields = function getNonSystemFields(fields) {
+  return pure.filterBy({
+    isSystem: false
+  }, fields);
+};
+var escapeString = function escapeString(string) {
+  return string.replace(/[^a-zA-Z0-9_]/g, function (match) {
+    var charCode = match.charCodeAt(0);
+    return "_".concat(charCode, "_");
+  });
+};
+var neetoFieldsUtils = {
+  mergeInitialValues: mergeInitialValues,
+  transformValues: transformValues
+};
 
-var dayjs_min = {exports: {}};
+function ownKeys$8(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$8(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$8(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$8(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+var FieldInputs = function FieldInputs(_ref) {
+  var _ref$customComponents = _ref.customComponents,
+    customComponents = _ref$customComponents === void 0 ? {} : _ref$customComponents,
+    fields = _ref.fields,
+    formRef = _ref.formRef,
+    disabled = _ref.disabled,
+    isRequiredColumnName = _ref.isRequiredColumnName;
+  var _useTranslation = useTranslation(),
+    t = _useTranslation.t;
+  return getNonSystemFields(fields).map(function (field) {
+    var Field = getFieldInput({
+      field: field,
+      customComponents: customComponents
+    });
+    if (Field) {
+      return /*#__PURE__*/React__default["default"].createElement(Field, _extends({
+        key: field.id
+      }, _objectSpread$8(_objectSpread$8({}, field), {}, {
+        formRef: formRef,
+        disabled: disabled,
+        isRequiredColumnName: isRequiredColumnName
+      })));
+    }
+    return /*#__PURE__*/React__default["default"].createElement(neetoui.Typography, {
+      key: field.id,
+      style: "body2"
+    }, t("messages.invalidKind"));
+  });
+};
 
-dayjs_min.exports;
+var NEETO_FIELDS_URL = "/neeto_fields_engine/api/v1";
+var FIELDS_URL = "".concat(NEETO_FIELDS_URL, "/fields");
+var FIELD_VALUES_URL = "".concat(NEETO_FIELDS_URL, "/field_values");
+var FIELD_VALUE_URL = "".concat(NEETO_FIELDS_URL, "/field_values/:fieldValueId");
+var FIELD_URL = "".concat(NEETO_FIELDS_URL, "/fields/:fieldId");
+var FIELDS_REORDER_URL = "".concat(FIELDS_URL, "/reorder");
+var CONFIGS_URL = "".concat(NEETO_FIELDS_URL, "/configs");
+var SINGULAR = {
+  count: 1
+};
+var PLURAL = {
+  count: 2
+};
 
-(function (module, exports) {
-	!function(t,e){module.exports=e();}(commonjsGlobal,(function(){var t=1e3,e=6e4,n=36e5,r="millisecond",i="second",s="minute",u="hour",a="day",o="week",f="month",h="quarter",c="year",d="date",l="Invalid Date",$=/^(\d{4})[-/]?(\d{1,2})?[-/]?(\d{0,2})[Tt\s]*(\d{1,2})?:?(\d{1,2})?:?(\d{1,2})?[.:]?(\d+)?$/,y=/\[([^\]]+)]|Y{1,4}|M{1,4}|D{1,2}|d{1,4}|H{1,2}|h{1,2}|a|A|m{1,2}|s{1,2}|Z{1,2}|SSS/g,M={name:"en",weekdays:"Sunday_Monday_Tuesday_Wednesday_Thursday_Friday_Saturday".split("_"),months:"January_February_March_April_May_June_July_August_September_October_November_December".split("_"),ordinal:function(t){var e=["th","st","nd","rd"],n=t%100;return "["+t+(e[(n-20)%10]||e[n]||e[0])+"]"}},m=function(t,e,n){var r=String(t);return !r||r.length>=e?t:""+Array(e+1-r.length).join(n)+t},v={s:m,z:function(t){var e=-t.utcOffset(),n=Math.abs(e),r=Math.floor(n/60),i=n%60;return (e<=0?"+":"-")+m(r,2,"0")+":"+m(i,2,"0")},m:function t(e,n){if(e.date()<n.date())return -t(n,e);var r=12*(n.year()-e.year())+(n.month()-e.month()),i=e.clone().add(r,f),s=n-i<0,u=e.clone().add(r+(s?-1:1),f);return +(-(r+(n-i)/(s?i-u:u-i))||0)},a:function(t){return t<0?Math.ceil(t)||0:Math.floor(t)},p:function(t){return {M:f,y:c,w:o,d:a,D:d,h:u,m:s,s:i,ms:r,Q:h}[t]||String(t||"").toLowerCase().replace(/s$/,"")},u:function(t){return void 0===t}},g="en",D={};D[g]=M;var p=function(t){return t instanceof _},S=function t(e,n,r){var i;if(!e)return g;if("string"==typeof e){var s=e.toLowerCase();D[s]&&(i=s),n&&(D[s]=n,i=s);var u=e.split("-");if(!i&&u.length>1)return t(u[0])}else {var a=e.name;D[a]=e,i=a;}return !r&&i&&(g=i),i||!r&&g},w=function(t,e){if(p(t))return t.clone();var n="object"==typeof e?e:{};return n.date=t,n.args=arguments,new _(n)},O=v;O.l=S,O.i=p,O.w=function(t,e){return w(t,{locale:e.$L,utc:e.$u,x:e.$x,$offset:e.$offset})};var _=function(){function M(t){this.$L=S(t.locale,null,!0),this.parse(t);}var m=M.prototype;return m.parse=function(t){this.$d=function(t){var e=t.date,n=t.utc;if(null===e)return new Date(NaN);if(O.u(e))return new Date;if(e instanceof Date)return new Date(e);if("string"==typeof e&&!/Z$/i.test(e)){var r=e.match($);if(r){var i=r[2]-1||0,s=(r[7]||"0").substring(0,3);return n?new Date(Date.UTC(r[1],i,r[3]||1,r[4]||0,r[5]||0,r[6]||0,s)):new Date(r[1],i,r[3]||1,r[4]||0,r[5]||0,r[6]||0,s)}}return new Date(e)}(t),this.$x=t.x||{},this.init();},m.init=function(){var t=this.$d;this.$y=t.getFullYear(),this.$M=t.getMonth(),this.$D=t.getDate(),this.$W=t.getDay(),this.$H=t.getHours(),this.$m=t.getMinutes(),this.$s=t.getSeconds(),this.$ms=t.getMilliseconds();},m.$utils=function(){return O},m.isValid=function(){return !(this.$d.toString()===l)},m.isSame=function(t,e){var n=w(t);return this.startOf(e)<=n&&n<=this.endOf(e)},m.isAfter=function(t,e){return w(t)<this.startOf(e)},m.isBefore=function(t,e){return this.endOf(e)<w(t)},m.$g=function(t,e,n){return O.u(t)?this[e]:this.set(n,t)},m.unix=function(){return Math.floor(this.valueOf()/1e3)},m.valueOf=function(){return this.$d.getTime()},m.startOf=function(t,e){var n=this,r=!!O.u(e)||e,h=O.p(t),l=function(t,e){var i=O.w(n.$u?Date.UTC(n.$y,e,t):new Date(n.$y,e,t),n);return r?i:i.endOf(a)},$=function(t,e){return O.w(n.toDate()[t].apply(n.toDate("s"),(r?[0,0,0,0]:[23,59,59,999]).slice(e)),n)},y=this.$W,M=this.$M,m=this.$D,v="set"+(this.$u?"UTC":"");switch(h){case c:return r?l(1,0):l(31,11);case f:return r?l(1,M):l(0,M+1);case o:var g=this.$locale().weekStart||0,D=(y<g?y+7:y)-g;return l(r?m-D:m+(6-D),M);case a:case d:return $(v+"Hours",0);case u:return $(v+"Minutes",1);case s:return $(v+"Seconds",2);case i:return $(v+"Milliseconds",3);default:return this.clone()}},m.endOf=function(t){return this.startOf(t,!1)},m.$set=function(t,e){var n,o=O.p(t),h="set"+(this.$u?"UTC":""),l=(n={},n[a]=h+"Date",n[d]=h+"Date",n[f]=h+"Month",n[c]=h+"FullYear",n[u]=h+"Hours",n[s]=h+"Minutes",n[i]=h+"Seconds",n[r]=h+"Milliseconds",n)[o],$=o===a?this.$D+(e-this.$W):e;if(o===f||o===c){var y=this.clone().set(d,1);y.$d[l]($),y.init(),this.$d=y.set(d,Math.min(this.$D,y.daysInMonth())).$d;}else l&&this.$d[l]($);return this.init(),this},m.set=function(t,e){return this.clone().$set(t,e)},m.get=function(t){return this[O.p(t)]()},m.add=function(r,h){var d,l=this;r=Number(r);var $=O.p(h),y=function(t){var e=w(l);return O.w(e.date(e.date()+Math.round(t*r)),l)};if($===f)return this.set(f,this.$M+r);if($===c)return this.set(c,this.$y+r);if($===a)return y(1);if($===o)return y(7);var M=(d={},d[s]=e,d[u]=n,d[i]=t,d)[$]||1,m=this.$d.getTime()+r*M;return O.w(m,this)},m.subtract=function(t,e){return this.add(-1*t,e)},m.format=function(t){var e=this,n=this.$locale();if(!this.isValid())return n.invalidDate||l;var r=t||"YYYY-MM-DDTHH:mm:ssZ",i=O.z(this),s=this.$H,u=this.$m,a=this.$M,o=n.weekdays,f=n.months,h=function(t,n,i,s){return t&&(t[n]||t(e,r))||i[n].slice(0,s)},c=function(t){return O.s(s%12||12,t,"0")},d=n.meridiem||function(t,e,n){var r=t<12?"AM":"PM";return n?r.toLowerCase():r},$={YY:String(this.$y).slice(-2),YYYY:this.$y,M:a+1,MM:O.s(a+1,2,"0"),MMM:h(n.monthsShort,a,f,3),MMMM:h(f,a),D:this.$D,DD:O.s(this.$D,2,"0"),d:String(this.$W),dd:h(n.weekdaysMin,this.$W,o,2),ddd:h(n.weekdaysShort,this.$W,o,3),dddd:o[this.$W],H:String(s),HH:O.s(s,2,"0"),h:c(1),hh:c(2),a:d(s,u,!0),A:d(s,u,!1),m:String(u),mm:O.s(u,2,"0"),s:String(this.$s),ss:O.s(this.$s,2,"0"),SSS:O.s(this.$ms,3,"0"),Z:i};return r.replace(y,(function(t,e){return e||$[t]||i.replace(":","")}))},m.utcOffset=function(){return 15*-Math.round(this.$d.getTimezoneOffset()/15)},m.diff=function(r,d,l){var $,y=O.p(d),M=w(r),m=(M.utcOffset()-this.utcOffset())*e,v=this-M,g=O.m(this,M);return g=($={},$[c]=g/12,$[f]=g,$[h]=g/3,$[o]=(v-m)/6048e5,$[a]=(v-m)/864e5,$[u]=v/n,$[s]=v/e,$[i]=v/t,$)[y]||v,l?g:O.a(g)},m.daysInMonth=function(){return this.endOf(f).$D},m.$locale=function(){return D[this.$L]},m.locale=function(t,e){if(!t)return this.$L;var n=this.clone(),r=S(t,e,!0);return r&&(n.$L=r),n},m.clone=function(){return O.w(this.$d,this)},m.toDate=function(){return new Date(this.valueOf())},m.toJSON=function(){return this.isValid()?this.toISOString():null},m.toISOString=function(){return this.$d.toISOString()},m.toString=function(){return this.$d.toUTCString()},M}(),T=_.prototype;return w.prototype=T,[["$ms",r],["$s",i],["$m",s],["$H",u],["$W",a],["$M",f],["$y",c],["$D",d]].forEach((function(t){T[t[1]]=function(e){return this.$g(e,t[0],t[1])};})),w.extend=function(t,e){return t.$i||(t(e,_,w),t.$i=!0),w},w.locale=S,w.isDayjs=p,w.unix=function(t){return w(1e3*t)},w.en=D[g],w.Ls=D,w.p={},w})); 
-} (dayjs_min, dayjs_min.exports));
+var fieldUrl = function fieldUrl(fieldId) {
+  return utils.buildUrl(FIELD_URL, {
+    fieldId: fieldId
+  });
+};
+var fetch$1 = function fetch(_ref) {
+  var resourceType = _ref.resourceType,
+    ownerId = _ref.ownerId,
+    state = _ref.state;
+  return axios__default["default"].get(FIELDS_URL, {
+    params: {
+      resourceType: resourceType,
+      ownerId: ownerId,
+      state: state
+    }
+  });
+};
+var create$1 = function create(payload) {
+  return axios__default["default"].post(FIELDS_URL, payload);
+};
+var show = function show(_ref2) {
+  var fieldId = _ref2.fieldId,
+    ownerId = _ref2.ownerId;
+  return axios__default["default"].get(fieldUrl(fieldId), {
+    params: {
+      ownerId: ownerId
+    }
+  });
+};
+var destroy$1 = function destroy(_ref3) {
+  var fieldId = _ref3.fieldId,
+    ownerId = _ref3.ownerId;
+  return axios__default["default"]["delete"](fieldUrl(fieldId), {
+    data: {
+      ownerId: ownerId
+    }
+  });
+};
+var update$1 = function update(_ref4) {
+  var fieldId = _ref4.fieldId,
+    payload = _ref4.payload;
+  return axios__default["default"].put(fieldUrl(fieldId), payload);
+};
+var reorder = function reorder(payload) {
+  return axios__default["default"].patch(FIELDS_REORDER_URL, payload);
+};
+var fieldsApi = {
+  fetch: fetch$1,
+  create: create$1,
+  show: show,
+  destroy: destroy$1,
+  update: update$1,
+  reorder: reorder
+};
 
-var dayjs_minExports = dayjs_min.exports;
-var dayjs = /*@__PURE__*/getDefaultExportFromCjs(dayjs_minExports);
+var QUERY_KEYS = {
+  FIELDS: "fields",
+  FIELD_VALUES: "field_values",
+  CONFIGS: "configurations"
+};
+var DEFAULT_STALE_TIME = 3600000; // 1 hour
 
-var dateSchema = yup__namespace.date().nullable();
-var buildFieldValidationSchema = function buildFieldValidationSchema(_ref) {
-  var kind = _ref.kind,
-    isRequired = _ref.isRequired,
-    fieldData = _ref.fieldData;
-  switch (kind) {
-    case KINDS.singleOption:
-    case KINDS.text:
-      {
-        var schema = yup__namespace.string().trim().nullable();
-        return isRequired ? schema.required(t("validations.thisIsRequired")) : schema;
-      }
-    case KINDS.number:
-    case KINDS.monetary:
-    case KINDS.decimal:
-      {
-        var _schema = yup__namespace.number().nullable().typeError(t("validations.notAValidNumber"));
-        return isRequired ? _schema.required(t("validations.thisIsRequired")) : _schema;
-      }
-    case KINDS.integer:
-      {
-        var _schema2 = yup__namespace.number().nullable().integer().typeError(t("validations.notAValidInteger"));
-        return isRequired ? _schema2.required(t("validations.thisIsRequired")) : _schema2;
-      }
-    case KINDS.date:
-    case KINDS.time:
-      return isRequired ? dateSchema.required(t("validations.thisIsRequired")) : dateSchema;
-    case KINDS.multiOption:
-      {
-        var _schema3 = yup__namespace.array().of(yup__namespace.string()).nullable();
-        return isRequired ? _schema3.min(1, t("validations.minOneItem")).required(t("validations.thisIsRequired")) : _schema3;
-      }
-    case KINDS.dateRange:
-    case KINDS.timeRange:
-      {
-        if (isRequired) {
-          return yup__namespace.array().of(dateSchema).required(t("validations.thisIsRequired"));
-        }
-        return yup__namespace.array().of(dateSchema).nullable();
-      }
-    case KINDS.checkbox:
-      return yup__namespace["boolean"]().nullable();
-    case KINDS.regex:
-      {
-        var regexPattern = fieldData === null || fieldData === void 0 ? void 0 : fieldData.condition;
-        var _schema4 = yup__namespace.string().nullable().matches(cleanedRegex(regexPattern), fieldData === null || fieldData === void 0 ? void 0 : fieldData.helpMessage);
-        return isRequired ? _schema4.required(t("validations.thisIsRequired")) : _schema4;
-      }
-    default:
-      return yup__namespace.mixed();
-  }
+function ownKeys$7(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$7(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$7(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$7(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+var FIELDS = QUERY_KEYS.FIELDS;
+var useFetchFields = function useFetchFields(_ref, options) {
+  var resourceType = _ref.resourceType,
+    ownerId = _ref.ownerId,
+    state = _ref.state,
+    _ref$prefixQueryKeys = _ref.prefixQueryKeys,
+    prefixQueryKeys = _ref$prefixQueryKeys === void 0 ? [] : _ref$prefixQueryKeys;
+  return reactQuery.useQuery([FIELDS].concat(_toConsumableArray(prefixQueryKeys), [resourceType, ownerId, state]), function () {
+    return fieldsApi.fetch({
+      resourceType: resourceType,
+      ownerId: ownerId,
+      state: state
+    });
+  }, _objectSpread$7({
+    staleTime: DEFAULT_STALE_TIME
+  }, options));
 };
-var cleanedRegex = function cleanedRegex(expression) {
-  if (expression.startsWith("/") && expression.endsWith("/")) {
-    return expression.slice(1, -1);
-  }
-  return expression;
+var useCreateField = function useCreateField(options) {
+  var queryClient = reactQuery.useQueryClient();
+  return reactQuery.useMutation(fieldsApi.create, _objectSpread$7(_objectSpread$7({}, options), {}, {
+    onSuccess: function onSuccess() {
+      var _options$onSuccess;
+      for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+        args[_key] = arguments[_key];
+      }
+      options === null || options === void 0 ? void 0 : (_options$onSuccess = options.onSuccess) === null || _options$onSuccess === void 0 ? void 0 : _options$onSuccess.call.apply(_options$onSuccess, [options].concat(args));
+      queryClient.invalidateQueries(FIELDS);
+    }
+  }));
 };
-var buildOptionsToLabelAndValue = function buildOptionsToLabelAndValue() {
-  var optionObjects = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
-  return optionObjects.map(function (_ref2) {
-    var label = _ref2.label,
-      value = _ref2.value;
-    return {
-      label: label,
-      value: value || label
-    };
-  });
+var useShowField = function useShowField(_ref2, options) {
+  var fieldId = _ref2.fieldId,
+    ownerId = _ref2.ownerId;
+  var queryKey = [FIELDS, fieldId];
+  return reactQuery.useQuery(queryKey, function () {
+    return fieldsApi.show({
+      fieldId: fieldId,
+      ownerId: ownerId
+    });
+  }, options);
 };
-var buildArrayToLabelAndValues = function buildArrayToLabelAndValues(value) {
-  return ramda.map(pure.toLabelAndValue, value || []);
+var useUpdateField = function useUpdateField(options) {
+  var queryClient = reactQuery.useQueryClient();
+  return reactQuery.useMutation(fieldsApi.update, _objectSpread$7(_objectSpread$7({}, options), {}, {
+    onSuccess: function onSuccess() {
+      var _options$onSuccess2;
+      for (var _len2 = arguments.length, args = new Array(_len2), _key2 = 0; _key2 < _len2; _key2++) {
+        args[_key2] = arguments[_key2];
+      }
+      options === null || options === void 0 ? void 0 : (_options$onSuccess2 = options.onSuccess) === null || _options$onSuccess2 === void 0 ? void 0 : _options$onSuccess2.call.apply(_options$onSuccess2, [options].concat(args));
+      queryClient.invalidateQueries(FIELDS);
+    }
+  }));
 };
-var validateField = /*#__PURE__*/function () {
-  var _ref4 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee(_ref3) {
-    var fieldValue, fieldName, isRequired, kind, fieldData;
-    return _regeneratorRuntime.wrap(function _callee$(_context) {
-      while (1) switch (_context.prev = _context.next) {
-        case 0:
-          fieldValue = _ref3.fieldValue, fieldName = _ref3.fieldName, isRequired = _ref3.isRequired, kind = _ref3.kind, fieldData = _ref3.fieldData;
-          _context.prev = 1;
-          _context.next = 4;
-          return yup__namespace.object().shape(_defineProperty({}, fieldName, buildFieldValidationSchema({
-            kind: kind,
-            isRequired: isRequired,
-            fieldData: fieldData
-          }))).validate(_defineProperty({}, fieldName, fieldValue));
-        case 4:
-          return _context.abrupt("return", false);
-        case 7:
-          _context.prev = 7;
-          _context.t0 = _context["catch"](1);
-          return _context.abrupt("return", _context.t0.errors);
-        case 10:
-        case "end":
-          return _context.stop();
+var useDestroyField = function useDestroyField(options) {
+  var queryClient = reactQuery.useQueryClient();
+  return reactQuery.useMutation(fieldsApi.destroy, _objectSpread$7(_objectSpread$7({}, options), {}, {
+    onSuccess: function onSuccess() {
+      var _options$onSuccess3;
+      for (var _len3 = arguments.length, args = new Array(_len3), _key3 = 0; _key3 < _len3; _key3++) {
+        args[_key3] = arguments[_key3];
       }
-    }, _callee, null, [[1, 7]]);
+      options === null || options === void 0 ? void 0 : (_options$onSuccess3 = options.onSuccess) === null || _options$onSuccess3 === void 0 ? void 0 : _options$onSuccess3.call.apply(_options$onSuccess3, [options].concat(args));
+      queryClient.invalidateQueries(FIELDS);
+    }
   }));
-  return function validateField(_x) {
-    return _ref4.apply(this, arguments);
-  };
-}();
-var dateTimeToString = function dateTimeToString(dateTime) {
-  return dayjs(dateTime).toString();
+};
+var useReorderFields = function useReorderFields() {
+  var queryClient = reactQuery.useQueryClient();
+  return reactQuery.useMutation(fieldsApi.reorder, {
+    onSuccess: function onSuccess() {
+      queryClient.invalidateQueries(FIELDS);
+    }
+  });
 };
 
-var _excluded = ["name", "id", "kind", "data", "individualSubmit", "formRef", "formRefs", "disabled", "isRequiredColumnName"];
 function ownKeys$6(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$6(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$6(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$6(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
-var useFormikFields = function useFormikFields(_ref) {
-  var name = _ref.name,
-    fieldId = _ref.id,
-    kind = _ref.kind,
-    fieldData = _ref.data,
-    individualSubmit = _ref.individualSubmit,
-    formRef = _ref.formRef,
-    formRefs = _ref.formRefs,
-    disabled = _ref.disabled,
-    _ref$isRequiredColumn = _ref.isRequiredColumnName,
-    isRequiredColumnName = _ref$isRequiredColumn === void 0 ? "isRequired" : _ref$isRequiredColumn,
-    props = _objectWithoutProperties(_ref, _excluded);
-  var formikContext = formik$1.useFormikContext();
-  var setFieldValue = formikContext.setFieldValue,
-    submitForm = formikContext.submitForm,
-    dirty = formikContext.dirty,
-    isSubmitting = formikContext.isSubmitting;
-  var fieldPath = "".concat(name, "-").concat(fieldId);
-  var fieldName = kind === KINDS.multiOption ? "values" : "value";
-  var fieldValuePath = "".concat(fieldPath, ".data.").concat(fieldName);
-  if (ramda.isNil(formRef) && ramda.isNotNil(formRefs)) {
-    formRefs.current[fieldValuePath] = formikContext;
-  } else if (ramda.isNil(formRefs) && ramda.isNotNil(formRef)) {
-    formRef.current = formikContext;
-  }
-  var _useField = formik$1.useField({
-      name: fieldValuePath,
-      validate: function validate(fieldValue) {
-        return validateField({
-          fieldValue: fieldValue,
-          fieldName: name,
-          isRequired: props[isRequiredColumnName],
-          kind: kind,
-          fieldData: fieldData
-        });
-      }
-    }),
-    _useField2 = _slicedToArray(_useField, 3),
-    formikFieldProps = _useField2[0],
-    meta = _useField2[1],
-    helpers = _useField2[2];
-  var handleSubmit = function handleSubmit(value) {
-    ramda.isNotNil(value) && setFieldValue(fieldValuePath, value);
-    individualSubmit && submitForm();
-  };
-  var getValueForField = function getValueForField(value) {
-    if (kind === KINDS.singleOption) {
-      value = pure.toLabelAndValue(value);
-    } else if (kind === KINDS.multiOption) {
-      value = buildArrayToLabelAndValues(value);
-    }
-    return value;
-  };
-  var isDropdown = ["single_option", "multi_option"].includes(kind);
-  if (isSubmitting && !meta.touched) {
-    helpers.setTouched(true);
-  }
+var arrangeOptionsDisplayOrder = function arrangeOptionsDisplayOrder(options) {
+  return options.map(function (option, index) {
+    return _objectSpread$6(_objectSpread$6({}, option), {}, {
+      displayOrder: index
+    });
+  });
+};
+var buildPayload = function buildPayload(_ref) {
+  var formValues = _ref.formValues,
+    _ref$resourceType = _ref.resourceType,
+    resourceType = _ref$resourceType === void 0 ? "" : _ref$resourceType,
+    _ref$ownerId = _ref.ownerId,
+    ownerId = _ref$ownerId === void 0 ? "" : _ref$ownerId;
+  var kind = formValues.kind.value;
+  var name = formValues.name.trim();
   return {
-    handleSubmit: handleSubmit,
-    fieldProps: _objectSpread$6(_objectSpread$6({}, formikFieldProps), {}, {
-      required: props[isRequiredColumnName],
-      error: meta.touched && meta.error,
-      options: isDropdown ? buildOptionsToLabelAndValue(fieldData) : undefined,
-      value: getValueForField(formikFieldProps.value),
-      dirty: dirty,
-      label: !individualSubmit && pure.capitalize(name),
-      disabled: disabled
+    ownerId: ramda.isEmpty(ownerId) ? undefined : ownerId,
+    field: _objectSpread$6(_objectSpread$6({}, ramda.omit(["createdAt", "id", "ownerId", "ownerType", "updatedAt"], formValues)), {}, {
+      kind: kind,
+      name: name,
+      resourceType: ramda.isEmpty(resourceType) ? undefined : resourceType,
+      data: isDropdown(kind) ? arrangeOptionsDisplayOrder(formValues.data) : formValues.data
     })
   };
 };
-
-var Checkbox = function Checkbox(props) {
-  var _useFormikFields = useFormikFields(props),
-    handleSubmit = _useFormikFields.handleSubmit,
-    fieldProps = _useFormikFields.fieldProps;
-  return /*#__PURE__*/React__default["default"].createElement(neetoui.Switch, _extends({}, fieldProps, {
-    checked: fieldProps.value,
-    onChange: function onChange(_ref) {
-      var checked = _ref.target.checked;
-      return handleSubmit(checked);
+var isDropdown = function isDropdown(kind) {
+  return ["single_option", "multi_option"].includes(kind);
+};
+var isRegex = function isRegex(kind) {
+  return kind === "regex";
+};
+var isAdditionalDataNeeded = function isAdditionalDataNeeded(kind) {
+  return ADDITIONAL_DATA_NEEDED_FIELD_KINDS.includes(kind);
+};
+var getPermittedKinds = function getPermittedKinds(_ref2) {
+  var allowedKinds = _ref2.allowedKinds,
+    selectedKind = _ref2.selectedKind;
+  var filteredKinds = ramda.pick(allowedKinds, FIELD_KINDS);
+  var permittedKinds = pure.filterBy({
+    group: selectedKind === null || selectedKind === void 0 ? void 0 : selectedKind.group
+  }, ramda.values(filteredKinds));
+  return permittedKinds;
+};
+var generateValidationSchema = function generateValidationSchema(additionalValidations) {
+  return yup__namespace.object().shape(_objectSpread$6(_objectSpread$6({}, BASIC_FIELD_FORM_VALIDATIONS), additionalValidations));
+};
+var renderFormFooter = function renderFormFooter(_ref3) {
+  var onClose = _ref3.onClose,
+    loading = _ref3.loading,
+    _ref3$dirty = _ref3.dirty,
+    dirty = _ref3$dirty === void 0 ? true : _ref3$dirty;
+  return /*#__PURE__*/React__default["default"].createElement(neetoui.Pane.Footer, null, /*#__PURE__*/React__default["default"].createElement(formik$1.ActionBlock, {
+    cancelButtonProps: {
+      onClick: onClose,
+      style: "text",
+      disabled: loading
+    },
+    submitButtonProps: {
+      label: t$1("labels.saveChanges"),
+      className: "mr-2",
+      type: "submit",
+      disabled: !dirty,
+      loading: loading
     }
   }));
 };
 
-var DateOrTime = function DateOrTime(props) {
-  var _useFormikFields = useFormikFields(props),
-    handleSubmit = _useFormikFields.handleSubmit,
-    fieldProps = _useFormikFields.fieldProps;
-  if (props.kind === KINDS.time) {
-    return /*#__PURE__*/React__default["default"].createElement(neetoui.TimePicker, _extends({}, fieldProps, {
-      use12Hours: true,
-      format: "h:mm A",
-      onChange: function onChange(dateTime) {
-        return handleSubmit(dateTimeToString(dateTime));
-      }
-    }));
-  } else if (props.kind === KINDS.date) {
-    return /*#__PURE__*/React__default["default"].createElement(neetoui.DatePicker, _extends({}, fieldProps, {
-      onChange: function onChange(dateTime) {
-        return handleSubmit(dateTimeToString(dateTime));
-      }
-    }));
+var regexValidationSchema = yup__namespace.object().shape({
+  condition: yup__namespace.string().required(t$1("validations.regexConditionIsRequired")),
+  helpMessage: yup__namespace.string().required(t$1("validations.regexHelpMessageIsRequired"))
+});
+var dropDownOptionsValidationSchema = yup__namespace.array().of(yup__namespace.object().shape({
+  label: yup__namespace.string().trim().required(t$1("validations.fieldOptionIsRequired")),
+  displayOrder: yup__namespace.number()
+})).min(1, t$1("validations.atLeastFieldOptionIsRequired"));
+var FIELD_KINDS = {
+  text: {
+    value: "text",
+    label: t$1("fields.kinds.text"),
+    group: 1
+  },
+  number: {
+    value: "number",
+    label: t$1("fields.kinds.number"),
+    group: 2
+  },
+  monetary: {
+    value: "monetary",
+    label: t$1("fields.kinds.monetary"),
+    group: 2
+  },
+  single_option: {
+    value: "single_option",
+    label: t$1("fields.kinds.singleOption"),
+    group: 3
+  },
+  multi_option: {
+    value: "multi_option",
+    label: t$1("fields.kinds.multiOption"),
+    group: 3
+  },
+  date: {
+    value: "date",
+    label: t$1("fields.kinds.date"),
+    group: 4
+  },
+  time: {
+    value: "time",
+    label: t$1("fields.kinds.time"),
+    group: 5
+  },
+  date_range: {
+    value: "date_range",
+    label: t$1("fields.kinds.dateRange"),
+    group: 6
+  },
+  time_range: {
+    value: "time_range",
+    label: t$1("fields.kinds.timeRange"),
+    group: 7
+  },
+  text_area: {
+    value: "text_area",
+    label: t$1("fields.kinds.textArea"),
+    group: 1
+  },
+  textarea: {
+    value: "textarea",
+    label: t$1("fields.kinds.textarea"),
+    group: 1
+  },
+  person: {
+    value: "person",
+    label: t$1("fields.kinds.person"),
+    group: 8
+  },
+  checkbox: {
+    value: "checkbox",
+    label: t$1("fields.kinds.checkbox"),
+    group: 9
+  },
+  regex: {
+    value: "regex",
+    label: t$1("fields.kinds.regex"),
+    group: 10
+  },
+  integer: {
+    value: "integer",
+    label: t$1("fields.kinds.integer"),
+    group: 2
+  },
+  decimal: {
+    value: "decimal",
+    label: t$1("fields.kinds.decimal"),
+    group: 2
+  },
+  datetime: {
+    value: "datetime",
+    label: t$1("fields.kinds.datetime"),
+    group: 11
   }
-  return /*#__PURE__*/React__default["default"].createElement(neetoui.DatePicker, _extends({
-    showTime: true,
-    timeFormat: "h:mm A"
-  }, fieldProps, {
-    onChange: function onChange(dateTime) {
-      return handleSubmit(dateTimeToString(dateTime));
-    }
-  }));
 };
-
-var MultiOption = function MultiOption(props) {
-  var _useFormikFields = useFormikFields(props),
-    handleSubmit = _useFormikFields.handleSubmit,
-    fieldProps = _useFormikFields.fieldProps;
-  return /*#__PURE__*/React__default["default"].createElement(neetoui.Select, _extends({
-    isMulti: true,
-    isSearchable: true
-  }, fieldProps, {
-    onChange: function onChange(selectedOptions) {
-      return handleSubmit(ramda.pluck("value", selectedOptions));
-    }
-  }));
+var ADDITIONAL_DATA_NEEDED_FIELD_KINDS = ["single_option", "multi_option", "regex"];
+var INITIAL_FIELDS = {
+  name: "",
+  kind: pure.toLabelAndValue("text"),
+  isRequired: false
 };
-
-var Number$1 = function Number(props) {
-  var _useFormikFields = useFormikFields(props),
-    handleSubmit = _useFormikFields.handleSubmit,
-    fieldProps = _useFormikFields.fieldProps;
-  var showSubmitButton = props.individualSubmit && fieldProps.dirty;
-  return /*#__PURE__*/React__default["default"].createElement(neetoui.Input, _extends({}, fieldProps, {
-    type: "number",
-    suffix: showSubmitButton && /*#__PURE__*/React__default["default"].createElement(formik.Button, {
-      icon: neetoIcons.Check,
-      style: "text",
-      onClick: function onClick() {
-        return handleSubmit();
-      }
-    })
-  }));
+var DEFAULT_OPTION = {
+  label: "",
+  displayOrder: 0
+};
+var DEFAULT_OPTIONS_DATA = [DEFAULT_OPTION];
+var DEFAULT_REGEX_DATA = {
+  regex: "",
+  helpMessage: ""
+};
+var BASIC_FIELD_FORM_VALIDATIONS = {
+  name: yup__namespace.string().trim().required(t$1("validations.fieldNameIsRequired")),
+  isRequired: yup__namespace["boolean"](),
+  kind: yup__namespace.object().shape({
+    value: yup__namespace.string().required()
+  }).required(t$1("validations.kindIsRequired")),
+  data: yup__namespace.mixed().when("kind", {
+    is: function is(kind) {
+      return isRegex(kind === null || kind === void 0 ? void 0 : kind.value);
+    },
+    then: regexValidationSchema
+  }).when("kind", {
+    is: function is(kind) {
+      return isDropdown(kind === null || kind === void 0 ? void 0 : kind.value);
+    },
+    then: dropDownOptionsValidationSchema
+  })
 };
 
-var RangePicker = function RangePicker(props) {
-  var _useFormikFields = useFormikFields(props),
-    handleSubmit = _useFormikFields.handleSubmit,
-    fieldProps = _useFormikFields.fieldProps;
-  var handleChange = function handleChange(_ref) {
-    var _ref2 = _slicedToArray(_ref, 2),
-      begin = _ref2[0],
-      end = _ref2[1];
-    return handleSubmit([dateTimeToString(begin), dateTimeToString(end)]);
+var AdditionalInputs = function AdditionalInputs() {
+  var _useTranslation = useTranslation(),
+    t = _useTranslation.t;
+  var _useFormikContext = formik.useFormikContext(),
+    _useFormikContext$val = _useFormikContext.values,
+    kind = _useFormikContext$val.kind,
+    options = _useFormikContext$val.data,
+    isSystem = _useFormikContext$val.isSystem;
+  var removeOption = function removeOption(arrayHelpers, index) {
+    return arrayHelpers.remove(index);
   };
-  if (props.kind === KINDS.dateRange) {
-    return /*#__PURE__*/React__default["default"].createElement(neetoui.DatePicker, _extends({}, fieldProps, {
-      type: "range",
-      onChange: handleChange
+  var addOption = function addOption(arrayHelpers) {
+    return arrayHelpers.push(DEFAULT_OPTION);
+  };
+  if (isDropdown(kind.value)) {
+    return /*#__PURE__*/React__default["default"].createElement(formik.FieldArray, {
+      name: "data"
+    }, function (arrayHelpers) {
+      return /*#__PURE__*/React__default["default"].createElement("div", {
+        className: "flex w-full flex-col gap-y-4"
+      }, /*#__PURE__*/React__default["default"].createElement(neetoui.Label, {
+        required: true
+      }, t("titles.dropdownOptions")), pure.isNotEmpty(options) && Array.isArray(options) && options.map(function (_, index) {
+        return /*#__PURE__*/React__default["default"].createElement("div", {
+          className: "flex w-full space-x-3",
+          key: index
+        }, /*#__PURE__*/React__default["default"].createElement("div", {
+          className: "w-full"
+        }, /*#__PURE__*/React__default["default"].createElement(formik$1.Input, {
+          disabled: isSystem,
+          name: "data.".concat(index, ".label"),
+          placeholder: t("placeholders.enterAnOption"),
+          suffix: options.length > 1 && /*#__PURE__*/React__default["default"].createElement(neetoui.Button, {
+            icon: neetoIcons.Delete,
+            style: "text",
+            onClick: function onClick() {
+              return removeOption(arrayHelpers, index);
+            }
+          })
+        })));
+      }), /*#__PURE__*/React__default["default"].createElement(neetoui.Button, {
+        fullWidth: true,
+        className: "mb-6 border-dashed text-xs uppercase",
+        label: t("labels.addMoreOption"),
+        style: "secondary",
+        onClick: function onClick() {
+          return addOption(arrayHelpers);
+        }
+      }));
+    });
+  } else if (isRegex(kind.value)) {
+    return /*#__PURE__*/React__default["default"].createElement("div", {
+      className: "flex w-full flex-col gap-y-4"
+    }, /*#__PURE__*/React__default["default"].createElement(neetoui.Label, {
+      required: true
+    }, t("titles.regexOptions")), /*#__PURE__*/React__default["default"].createElement(formik$1.Input, {
+      disabled: isSystem,
+      label: t("labels.regexCondition"),
+      name: "data.condition",
+      placeholder: t("placeholders.regexExample")
+    }), /*#__PURE__*/React__default["default"].createElement(formik$1.Input, {
+      disabled: isSystem,
+      label: t("labels.helpMessage"),
+      name: "data.helpMessage",
+      placeholder: t("placeholders.enterErrorMessage")
     }));
   }
+  return null;
+};
 
-  //time_range
-  return /*#__PURE__*/React__default["default"].createElement(neetoui.TimePicker, _extends({}, fieldProps, {
-    use12Hours: true,
-    format: "h:mm A",
-    type: "range",
-    onChange: handleChange
-  }));
+/** @type {React.FC<import("types").FieldFormProps>} */
+
+var FieldForm = function FieldForm(_ref) {
+  var chosenKind = _ref.chosenKind,
+    _ref$kindSelectOption = _ref.kindSelectOptions,
+    kindSelectOptions = _ref$kindSelectOption === void 0 ? [] : _ref$kindSelectOption,
+    _ref$isSystem = _ref.isSystem,
+    isSystem = _ref$isSystem === void 0 ? false : _ref$isSystem,
+    _ref$hideRequiredSwit = _ref.hideRequiredSwitch,
+    hideRequiredSwitch = _ref$hideRequiredSwit === void 0 ? false : _ref$hideRequiredSwit,
+    children = _ref.children;
+  var _useTranslation = useTranslation(),
+    t = _useTranslation.t;
+  var _useFormikContext = formik.useFormikContext(),
+    options = _useFormikContext.values.data,
+    setFieldValue = _useFormikContext.setFieldValue;
+  var handleKindChange = function handleKindChange(kind) {
+    setFieldValue("kind", kind);
+    if (isDropdown(kind.value)) {
+      setFieldValue("data", options !== null && options !== void 0 ? options : DEFAULT_OPTIONS_DATA);
+    } else if (isRegex(kind.value)) {
+      setFieldValue("data", options !== null && options !== void 0 ? options : DEFAULT_REGEX_DATA);
+    }
+  };
+  return /*#__PURE__*/React__default["default"].createElement(neetoui.Pane.Body, null, /*#__PURE__*/React__default["default"].createElement("div", {
+    className: "w-full space-y-4"
+  }, /*#__PURE__*/React__default["default"].createElement(formik$1.Input, {
+    required: true,
+    disabled: isSystem,
+    label: t("labels.fieldName"),
+    name: "name",
+    placeholder: t("placeholders.enterFieldName")
+  }), /*#__PURE__*/React__default["default"].createElement(formik$1.Select, {
+    isSearchable: true,
+    isDisabled: isSystem,
+    label: t("labels.fieldKind"),
+    name: "kind",
+    options: kindSelectOptions,
+    onChange: handleKindChange
+  }), isAdditionalDataNeeded(chosenKind) && /*#__PURE__*/React__default["default"].createElement(AdditionalInputs, null), !hideRequiredSwitch && /*#__PURE__*/React__default["default"].createElement(neetoui.Label, {
+    className: "flex items-center gap-2"
+  }, /*#__PURE__*/React__default["default"].createElement(formik$1.Switch, {
+    name: "isRequired"
+  }), /*#__PURE__*/React__default["default"].createElement(neetoui.Typography, {
+    className: "leading-4",
+    component: "span",
+    style: "body2"
+  }, t("labels.isRequired"))), children));
 };
 
-var SingleOption = function SingleOption(props) {
-  var _useFormikFields = useFormikFields(props),
-    handleSubmit = _useFormikFields.handleSubmit,
-    fieldProps = _useFormikFields.fieldProps;
-  return /*#__PURE__*/React__default["default"].createElement(neetoui.Select, _extends({
-    isSearchable: true
-  }, fieldProps, {
-    onChange: function onChange(_ref) {
-      var value = _ref.value;
-      return handleSubmit(value);
+var _excluded$2 = ["resourceType", "allowedKinds", "ownerId", "additionalValidations", "initialValues", "onClose", "onMutationSuccess"];
+function ownKeys$5(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$5(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$5(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$5(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+
+/** @type {React.FC<import("types").AddProps>} */
+
+var Add = function Add(_ref) {
+  var resourceType = _ref.resourceType,
+    _ref$allowedKinds = _ref.allowedKinds,
+    allowedKinds = _ref$allowedKinds === void 0 ? ALL_KINDS : _ref$allowedKinds,
+    ownerId = _ref.ownerId,
+    additionalValidations = _ref.additionalValidations,
+    initialValues = _ref.initialValues,
+    onClose = _ref.onClose,
+    onMutationSuccess = _ref.onMutationSuccess,
+    props = _objectWithoutProperties(_ref, _excluded$2);
+  var _useTranslation = useTranslation(),
+    t = _useTranslation.t;
+  var _useCreateField = useCreateField({
+      onSuccess: onMutationSuccess
+    }),
+    createField = _useCreateField.mutate,
+    isSubmitting = _useCreateField.isLoading;
+  var filteredKinds = ramda.values(ramda.pick(allowedKinds, FIELD_KINDS));
+  var handleSubmit = function handleSubmit(formValues) {
+    var payload = buildPayload({
+      formValues: formValues,
+      resourceType: resourceType,
+      ownerId: ownerId
+    });
+    createField(payload, {
+      onSuccess: onClose
+    });
+  };
+  return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement(neetoui.Pane.Header, null, /*#__PURE__*/React__default["default"].createElement(neetoui.Typography, {
+    style: "h2"
+  }, t("titles.addField"))), /*#__PURE__*/React__default["default"].createElement(formik$1.Form, {
+    formikProps: {
+      initialValues: _objectSpread$5(_objectSpread$5({}, initialValues), INITIAL_FIELDS),
+      validationSchema: generateValidationSchema(additionalValidations),
+      onSubmit: handleSubmit
     }
+  }, function (_ref2) {
+    var dirty = _ref2.dirty,
+      kind = _ref2.values.kind;
+    return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement(FieldForm, _extends({
+      chosenKind: kind.value,
+      kindSelectOptions: filteredKinds
+    }, props)), renderFormFooter({
+      onClose: onClose,
+      loading: isSubmitting,
+      dirty: dirty
+    }));
   }));
 };
 
-var Text = function Text(props) {
-  var _useFormikFields = useFormikFields(props),
-    handleSubmit = _useFormikFields.handleSubmit,
-    fieldProps = _useFormikFields.fieldProps;
-  var showSubmitButton = props.individualSubmit && fieldProps.dirty;
-  return /*#__PURE__*/React__default["default"].createElement(neetoui.Input, _extends({}, fieldProps, {
-    suffix: showSubmitButton && /*#__PURE__*/React__default["default"].createElement(formik.Button, {
-      icon: neetoIcons.Check,
-      style: "text",
-      onClick: function onClick() {
-        return handleSubmit();
-      }
-    })
-  }));
-};
+var _excluded$1 = ["fieldId", "allowedKinds", "ownerId", "additionalValidations", "initialValues", "onClose", "onMutationSuccess"];
+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 TextArea = function TextArea(props) {
+/** @type {React.FC<import("types").EditProps>} */
+
+var Edit = function Edit(_ref) {
+  var fieldId = _ref.fieldId,
+    _ref$allowedKinds = _ref.allowedKinds,
+    allowedKinds = _ref$allowedKinds === void 0 ? ALL_KINDS : _ref$allowedKinds,
+    ownerId = _ref.ownerId,
+    _ref$additionalValida = _ref.additionalValidations,
+    additionalValidations = _ref$additionalValida === void 0 ? {} : _ref$additionalValida,
+    _ref$initialValues = _ref.initialValues,
+    initialValues = _ref$initialValues === void 0 ? {} : _ref$initialValues,
+    onClose = _ref.onClose,
+    onMutationSuccess = _ref.onMutationSuccess,
+    props = _objectWithoutProperties(_ref, _excluded$1);
   var _useTranslation = useTranslation(),
     t = _useTranslation.t;
-  var _useFormikFields = useFormikFields(props),
-    handleSubmit = _useFormikFields.handleSubmit,
-    fieldProps = _useFormikFields.fieldProps;
-  var showSubmitButton = props.individualSubmit && fieldProps.dirty;
-  return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement(neetoui.Textarea, fieldProps), showSubmitButton && /*#__PURE__*/React__default["default"].createElement(formik.Button, {
-    className: "m-auto mt-2",
-    label: t("labels.submit"),
-    size: "small",
-    onClick: function onClick() {
-      return handleSubmit();
+  var _useShowField = useShowField({
+      fieldId: fieldId,
+      ownerId: ownerId
+    }),
+    _useShowField$data = _useShowField.data,
+    _useShowField$data2 = _useShowField$data === void 0 ? {} : _useShowField$data,
+    _useShowField$data2$f = _useShowField$data2.field,
+    field = _useShowField$data2$f === void 0 ? {} : _useShowField$data2$f;
+  var _useUpdateField = useUpdateField({
+      onSuccess: function onSuccess() {
+        for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+          args[_key] = arguments[_key];
+        }
+        onMutationSuccess === null || onMutationSuccess === void 0 ? void 0 : onMutationSuccess.apply(void 0, args);
+        onClose();
+      }
+    }),
+    updateField = _useUpdateField.mutate,
+    isSubmitting = _useUpdateField.isLoading;
+  var handleSubmit = function handleSubmit(formValues) {
+    var payload = buildPayload({
+      formValues: formValues,
+      ownerId: ownerId
+    });
+    updateField({
+      fieldId: fieldId,
+      payload: payload
+    });
+  };
+  return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement(neetoui.Pane.Header, null, /*#__PURE__*/React__default["default"].createElement(neetoui.Typography, {
+    style: "h2"
+  }, t("titles.editField"))), /*#__PURE__*/React__default["default"].createElement(formik$1.Form, {
+    formikProps: {
+      initialValues: _objectSpread$4(_objectSpread$4({}, initialValues), ramda.assoc("kind", FIELD_KINDS[field.kind], field)),
+      validationSchema: generateValidationSchema(additionalValidations),
+      enableReinitialize: true,
+      onSubmit: handleSubmit
     }
+  }, function (_ref2) {
+    var kind = _ref2.values.kind,
+      dirty = _ref2.dirty;
+    var permittedKinds = getPermittedKinds({
+      allowedKinds: allowedKinds,
+      selectedKind: kind
+    });
+    return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement(FieldForm, _extends({
+      chosenKind: kind === null || kind === void 0 ? void 0 : kind.value,
+      isSystem: field.isSystem,
+      kindSelectOptions: permittedKinds
+    }, props)), renderFormFooter({
+      onClose: onClose,
+      loading: isSubmitting,
+      dirty: dirty
+    }));
   }));
 };
 
-function ownKeys$5(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$5(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$5(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$5(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
-var standardComponents = {
-  text: Text,
-  regex: Text,
-  textarea: TextArea,
-  text_area: TextArea,
-  // TODO: Remove text-area after integration in all hosts.
-  number: Number$1,
-  monetary: Number$1,
-  integer: Number$1,
-  decimal: Number$1,
-  date: DateOrTime,
-  time: DateOrTime,
-  datetime: DateOrTime,
-  single_option: SingleOption,
-  multi_option: MultiOption,
-  date_range: RangePicker,
-  time_range: RangePicker,
-  checkbox: Checkbox
-};
-var getFieldInput = function getFieldInput(_ref) {
-  var field = _ref.field,
-    _ref$customComponents = _ref.customComponents,
-    customComponents = _ref$customComponents === void 0 ? {} : _ref$customComponents;
-  var Component = customComponents[field.kind] || standardComponents[field.kind];
-  if (Component) {
-    return Component;
-  }
-  return null;
-};
-var removeItemsWithNullData = function removeItemsWithNullData(fieldValues) {
-  return fieldValues.filter(function (item) {
-    return !ramda.isNil(ramda.prop("data", item));
-  });
-};
-var removeNoiseFromValues = function removeNoiseFromValues(fieldValues) {
-  return ramda.map(ramda.pick(["id", "fieldId", "data"]), fieldValues);
-};
-var transformValues = function transformValues(_ref2) {
-  var formikValues = _ref2.values,
-    fields = _ref2.fields;
-  var allFieldValues = ramda.clone(formikValues);
-  var neetoFieldValues = [];
-  fields.forEach(function (_ref3) {
-    var id = _ref3.id,
-      name = _ref3.name;
-    neetoFieldValues.push(allFieldValues["".concat(name, "-").concat(id)]);
-    delete allFieldValues["".concat(name, "-").concat(id)];
-  });
-  var cleanedFieldValues = ramda.pipe(removeItemsWithNullData, removeNoiseFromValues)(neetoFieldValues);
-  return _objectSpread$5(_objectSpread$5({}, allFieldValues), {}, {
-    fieldValuesAttributes: cleanedFieldValues
-  });
-};
-var getInitialFieldValue = function getInitialFieldValue(field) {
-  var fieldValues = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : [];
-  var existingFieldValueData = pure.findBy({
-    fieldId: field.id
-  }, fieldValues);
-  var newFieldValueData = {
-    fieldId: field.id,
-    data: null
-  };
-  return _defineProperty({}, "".concat(field.name, "-").concat(field.id), existingFieldValueData || newFieldValueData);
-};
-var getAllInitialFieldValues = function getAllInitialFieldValues(fields) {
-  var fieldValues = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : [];
-  return getNonSystemFields(fields).map(function (field) {
-    return getInitialFieldValue(field, fieldValues);
-  });
-};
-var mergeInitialValues = function mergeInitialValues(_ref5) {
-  var initialValues = _ref5.initialValues,
-    fields = _ref5.fields;
-  var initialValue = ramda.mergeAll([initialValues].concat(_toConsumableArray(getAllInitialFieldValues(fields, initialValues === null || initialValues === void 0 ? void 0 : initialValues.fieldValues))));
-  return ramda.omit(["fieldValues"], initialValue);
-};
-var getNonSystemFields = function getNonSystemFields(fields) {
-  return pure.filterBy({
-    isSystem: false
-  }, fields);
-};
-var neetoFieldsUtils = {
-  mergeInitialValues: mergeInitialValues,
-  transformValues: transformValues
-};
+var _excluded = ["isOpen", "selectedField"];
 
-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 FieldInputs = function FieldInputs(_ref) {
-  var _ref$customComponents = _ref.customComponents,
-    customComponents = _ref$customComponents === void 0 ? {} : _ref$customComponents,
-    fields = _ref.fields,
-    formRef = _ref.formRef,
-    disabled = _ref.disabled,
-    isRequiredColumnName = _ref.isRequiredColumnName;
-  var _useTranslation = useTranslation(),
-    t = _useTranslation.t;
-  return getNonSystemFields(fields).map(function (field) {
-    var Field = getFieldInput({
-      field: field,
-      customComponents: customComponents
-    });
-    if (Field) {
-      return /*#__PURE__*/React__default["default"].createElement(Field, _extends({
-        key: field.id
-      }, _objectSpread$4(_objectSpread$4({}, field), {}, {
-        formRef: formRef,
-        disabled: disabled,
-        isRequiredColumnName: isRequiredColumnName
-      })));
-    }
-    return /*#__PURE__*/React__default["default"].createElement(neetoui.Typography, {
-      key: field.id,
-      style: "body2"
-    }, t("messages.invalidKind"));
-  });
+/** @type {React.FC<import("types").FieldsPaneProps>} */
+
+var FieldsPane = function FieldsPane(_ref) {
+  var isOpen = _ref.isOpen,
+    _ref$selectedField = _ref.selectedField,
+    selectedField = _ref$selectedField === void 0 ? {} : _ref$selectedField,
+    props = _objectWithoutProperties(_ref, _excluded);
+  return /*#__PURE__*/React__default["default"].createElement(neetoui.Pane, {
+    isOpen: isOpen,
+    onClose: props.onClose
+  }, ramda.isEmpty(selectedField) ? /*#__PURE__*/React__default["default"].createElement(Add, props) : /*#__PURE__*/React__default["default"].createElement(Edit, _extends({
+    fieldId: selectedField === null || selectedField === void 0 ? void 0 : selectedField.id
+  }, props)));
 };
 
 var Menu = neetoui.Dropdown.Menu,
@@ -6606,7 +6974,7 @@ var buildDefaultColumns = function buildDefaultColumns(_ref) {
   return [{
     key: "name",
     dataIndex: "name",
-    title: t("titles.name"),
+    title: t$1("titles.name"),
     render: function render(name, field) {
       return /*#__PURE__*/React__default["default"].createElement("div", {
         className: "flex items-center justify-between gap-x-3"
@@ -6623,25 +6991,25 @@ var buildDefaultColumns = function buildDefaultColumns(_ref) {
         onClick: function onClick() {
           return onEditClick(field);
         }
-      }, t("labels.edit")), !field.isSystem && /*#__PURE__*/React__default["default"].createElement(MenuItem.Button, {
+      }, t$1("labels.edit")), !field.isSystem && /*#__PURE__*/React__default["default"].createElement(MenuItem.Button, {
         onClick: function onClick() {
           return onDeleteClick(field);
         }
-      }, t("labels.delete")))));
+      }, t$1("labels.delete")))));
     }
   }, {
     key: "kind",
     dataIndex: "kind",
-    title: t("titles.kind"),
+    title: t$1("titles.kind"),
     render: function render(kind) {
       return DISPLAY_KINDS[kind];
     }
   }, {
     key: "isRequired",
     dataIndex: "isRequired",
-    title: t("titles.required"),
+    title: t$1("titles.required"),
     render: function render(boolVal) {
-      return boolVal ? t("common.yes") : t("common.no");
+      return boolVal ? t$1("common.yes") : t$1("common.no");
     }
   }];
 };
@@ -6649,14 +7017,15 @@ var renderMenuBarItems = function renderMenuBarItems(_ref2) {
   var items = _ref2.items,
     isOwnerBased = _ref2.isOwnerBased,
     selectedMenu = _ref2.selectedMenu,
-    handleBlockClick = _ref2.handleBlockClick;
+    handleBlockClick = _ref2.handleBlockClick,
+    nameAliases = _ref2.nameAliases;
   if (isOwnerBased) {
     return items.map(function (item) {
       return /*#__PURE__*/React__default["default"].createElement(MenuBar__default["default"].Item, {
         active: selectedMenu === item.id,
         key: item.id,
         label: pure.humanize(item.name),
-        description: t("messages.manageFieldFor", {
+        description: t$1("messages.manageFieldFor", {
           resource: pure.humanize(item.name).toLocaleLowerCase()
         }),
         onClick: handleBlockClick({
@@ -6669,8 +7038,8 @@ var renderMenuBarItems = function renderMenuBarItems(_ref2) {
     return /*#__PURE__*/React__default["default"].createElement(MenuBar__default["default"].Item, {
       active: selectedMenu === item,
       key: item,
-      label: pure.humanize(item),
-      description: t("messages.manageFieldFor", {
+      label: nameAliases[item] || pure.humanize(item),
+      description: t$1("messages.manageFieldFor", {
         resource: pure.humanize(item).toLocaleLowerCase()
       }),
       onClick: handleBlockClick({
@@ -6689,7 +7058,7 @@ var renderMenuBarFilters = function renderMenuBarFilters(_ref3) {
     style: "h5",
     textTransform: "uppercase",
     weight: "bold"
-  }, t("titles.filters"))), /*#__PURE__*/React__default["default"].createElement(MenuBar__default["default"].Block, {
+  }, t$1("titles.filters"))), /*#__PURE__*/React__default["default"].createElement(MenuBar__default["default"].Block, {
     active: selectedState === FIELD_STATES.active,
     count: activeFieldsCount,
     label: fieldStatesTaxonomy.active,
@@ -6709,11 +7078,26 @@ var getDashBoardTitle = function getDashBoardTitle(_ref4) {
   var _findBy;
   var isOwnerBased = _ref4.isOwnerBased,
     owners = _ref4.owners,
-    selectedVal = _ref4.selectedVal;
-  return t("messages.manageFieldFor", {
+    selectedVal = _ref4.selectedVal,
+    nameAliases = _ref4.nameAliases;
+  return t$1("messages.manageFieldFor", {
     resource: isOwnerBased ? (_findBy = pure.findBy({
       id: selectedVal
-    }, owners)) === null || _findBy === void 0 ? void 0 : _findBy.name : selectedVal
+    }, owners)) === null || _findBy === void 0 ? void 0 : _findBy.name : nameAliases[selectedVal] || selectedVal
+  });
+};
+var renderNoDataHelpText = function renderNoDataHelpText(url) {
+  return /*#__PURE__*/React__default["default"].createElement(Trans, {
+    i18nKey: "helpTexts.noData",
+    components: {
+      a: /*#__PURE__*/React__default["default"].createElement(reactRouterDom.Link, {
+        className: "neeto-ui-text-primary-600 underline",
+        target: "_blank",
+        to: {
+          pathname: url
+        }
+      })
+    }
   });
 };
 
@@ -6760,6 +7144,7 @@ var useFieldsDashboard = function useFieldsDashboard(_ref) {
   var _getQueryParams = utils.getQueryParams(),
     resource = _getQueryParams.resource,
     state = _getQueryParams.state;
+  var ownerId = showOwnersInMenu ? resource : undefined;
   var history = reactRouterDom.useHistory();
   var _useFetchConfigs = useFetchConfigs(),
     _useFetchConfigs$data = _useFetchConfigs.data,
@@ -6771,7 +7156,7 @@ var useFieldsDashboard = function useFieldsDashboard(_ref) {
     isConfigsLoading = _useFetchConfigs.isLoading;
   var fieldParams = {
     resourceType: !showOwnersInMenu ? resource : undefined,
-    ownerId: showOwnersInMenu ? resource : undefined,
+    ownerId: ownerId,
     state: state || FIELD_STATES.active
   };
   var _useFetchFields = useFetchFields(fieldParams, {
@@ -6786,15 +7171,18 @@ var useFieldsDashboard = function useFieldsDashboard(_ref) {
     inactiveFieldsCount = _useFetchFields$data2.inactiveFieldsCount,
     isFieldsLoading = _useFetchFields.isLoading,
     isFieldsFetching = _useFetchFields.isFetching;
-  var _useDestroyField = useDestroyField(),
-    deleteField = _useDestroyField.mutate,
-    isDeleting = _useDestroyField.isLoading;
-  var handleDelete = function handleDelete() {
-    deleteField(selectedField.id, {
+  var _useDestroyField = useDestroyField({
       onSuccess: function onSuccess() {
         setIsDeleteAlertOpen(false);
         setSelectedField({});
       }
+    }),
+    deleteField = _useDestroyField.mutate,
+    isDeleting = _useDestroyField.isLoading;
+  var handleDelete = function handleDelete() {
+    deleteField({
+      fieldId: selectedField.id,
+      ownerId: ownerId
     });
   };
   var handleClosePane = function handleClosePane() {
@@ -6871,6 +7259,7 @@ var useFieldsDashboard = function useFieldsDashboard(_ref) {
     selectedField: selectedField,
     selectedState: state,
     selectedMenu: resource,
+    // resource will be ownerId if showOwnersInMenu is true, else it will be resourceType
     isFieldsFetching: isFieldsFetching,
     isFieldsLoading: isFieldsLoading,
     isDeleting: isDeleting,
@@ -6890,13 +7279,16 @@ var FieldsTable = function FieldsTable(_ref) {
     isLoading = _ref.isLoading,
     rowData = _ref.rowData,
     columnData = _ref.columnData,
-    setIsPaneOpen = _ref.setIsPaneOpen;
+    setIsPaneOpen = _ref.setIsPaneOpen,
+    helpDocUrl = _ref.helpDocUrl;
   var _useTranslation = useTranslation(),
     t = _useTranslation.t;
   var showNoDataScreen = !isLoading && ramda.isEmpty(rowData);
   return /*#__PURE__*/React__default["default"].createElement(TableWrapper__default["default"], null, showNoDataScreen ? /*#__PURE__*/React__default["default"].createElement("div", {
     className: "flex h-full w-full items-center justify-center"
-  }, /*#__PURE__*/React__default["default"].createElement(neetoui.NoData, {
+  }, /*#__PURE__*/React__default["default"].createElement(neetoui.NoData, _extends({}, helpDocUrl && {
+    helpText: renderNoDataHelpText(helpDocUrl)
+  }, {
     title: t("messages.noFields"),
     primaryButtonProps: {
       label: t("labels.addField"),
@@ -6904,7 +7296,7 @@ var FieldsTable = function FieldsTable(_ref) {
         return setIsPaneOpen(true);
       }
     }
-  })) : /*#__PURE__*/React__default["default"].createElement(neetoui.Table, {
+  }))) : /*#__PURE__*/React__default["default"].createElement(neetoui.Table, {
     fixedHeight: true,
     allowRowClick: false,
     columnData: columnData,
@@ -11184,7 +11576,8 @@ var FieldBlock$1 = /*#__PURE__*/React__default["default"].memo(FieldBlock);
 var ReorderPane = function ReorderPane(_ref) {
   var isOpen = _ref.isOpen,
     onClose = _ref.onClose,
-    allFields = _ref.allFields;
+    allFields = _ref.allFields,
+    ownerId = _ref.ownerId;
   var _useState = React.useState([]),
     _useState2 = _slicedToArray(_useState, 2),
     fields = _useState2[0],
@@ -11209,10 +11602,11 @@ var ReorderPane = function ReorderPane(_ref) {
     fields.map(function (field, index) {
       return field.id !== allFields[index].id && params.push({
         id: field.id,
-        displayOrder: index
+        displayOrder: index + 1
       });
     });
     reorderField({
+      ownerId: ramda.isEmpty(ownerId) ? undefined : ownerId,
       fields: params
     }, {
       onSuccess: onClose
@@ -11284,7 +11678,10 @@ var FieldsDashboard = function FieldsDashboard(_ref) {
     _ref$showStateFilter = _ref.showStateFilter,
     showStateFilter = _ref$showStateFilter === void 0 ? true : _ref$showStateFilter,
     _ref$fieldStatesTaxon = _ref.fieldStatesTaxonomy,
-    fieldStatesTaxonomy = _ref$fieldStatesTaxon === void 0 ? DEFAULT_FIELD_STATE_TAXONOMY : _ref$fieldStatesTaxon;
+    fieldStatesTaxonomy = _ref$fieldStatesTaxon === void 0 ? DEFAULT_FIELD_STATE_TAXONOMY : _ref$fieldStatesTaxon,
+    helpDocUrl = _ref.helpDocUrl,
+    _ref$nameAliases = _ref.nameAliases,
+    nameAliases = _ref$nameAliases === void 0 ? {} : _ref$nameAliases;
   var _useTranslation = useTranslation(),
     t = _useTranslation.t;
   var _useFieldsDashboard = useFieldsDashboard({
@@ -11319,7 +11716,8 @@ var FieldsDashboard = function FieldsDashboard(_ref) {
     handleClosePane = _useFieldsDashboard.handleClosePane,
     handleReorderPaneClose = _useFieldsDashboard.handleReorderPaneClose,
     handleBlockClick = _useFieldsDashboard.handleBlockClick;
-  return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement(MenuBar__default["default"], {
+  var isMenuBarNeeded = showStateFilter || menuItems.length > 1;
+  return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, isMenuBarNeeded && /*#__PURE__*/React__default["default"].createElement(MenuBar__default["default"], {
     showMenu: isMenuBarOpen,
     title: t("titles.field", PLURAL)
   }, isConfigsLoading ? /*#__PURE__*/React__default["default"].createElement("div", {
@@ -11328,7 +11726,8 @@ var FieldsDashboard = function FieldsDashboard(_ref) {
     isOwnerBased: showOwnersInMenu,
     items: menuItems,
     selectedMenu: selectedMenu,
-    handleBlockClick: handleBlockClick
+    handleBlockClick: handleBlockClick,
+    nameAliases: nameAliases
   }), showStateFilter && renderMenuBarFilters({
     selectedState: selectedState,
     fieldStatesTaxonomy: fieldStatesTaxonomy,
@@ -11337,11 +11736,13 @@ var FieldsDashboard = function FieldsDashboard(_ref) {
     handleBlockClick: handleBlockClick
   })), isScreenLoading ? /*#__PURE__*/React__default["default"].createElement("div", {
     className: "flex w-full flex-grow items-center justify-center"
-  }, /*#__PURE__*/React__default["default"].createElement(PageLoader__default["default"], null)) : /*#__PURE__*/React__default["default"].createElement(Container__default["default"], null, /*#__PURE__*/React__default["default"].createElement(Header__default["default"], {
-    breadcrumbs: breadcrumbs,
+  }, /*#__PURE__*/React__default["default"].createElement(PageLoader__default["default"], null)) : /*#__PURE__*/React__default["default"].createElement(Container__default["default"], null, /*#__PURE__*/React__default["default"].createElement(Header__default["default"], _extends({
+    breadcrumbs: breadcrumbs
+  }, isMenuBarNeeded && {
     menuBarToggle: function menuBarToggle() {
       return setIsMenuBarOpen(ramda.not);
-    },
+    }
+  }, {
     actionBlock: /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement(neetoui.Button, {
       label: t("labels.reorder"),
       style: "secondary",
@@ -11363,22 +11764,27 @@ var FieldsDashboard = function FieldsDashboard(_ref) {
       hideRequiredSwitch: paneProps === null || paneProps === void 0 ? void 0 : paneProps.hideRequiredSwitch,
       initialValues: paneProps === null || paneProps === void 0 ? void 0 : paneProps.initialValues,
       isOpen: isPaneOpen,
-      resourceType: showOwnersInMenu ? resourceType : selectedMenu,
+      ownerId: showOwnersInMenu ? selectedMenu : "",
+      resourceType: showOwnersInMenu ? resourceType : selectedMenu //Currently we support only one resource type when fields are classified based on owners
+      ,
       selectedField: selectedField,
-      onClose: handleClosePane
+      onClose: handleClosePane,
+      onMutationSuccess: paneProps === null || paneProps === void 0 ? void 0 : paneProps.onMutationSuccess
     }, paneProps === null || paneProps === void 0 ? void 0 : paneProps.children)),
     title: pure.humanize(getDashBoardTitle({
       isOwnerBased: showOwnersInMenu,
       owners: owners,
-      selectedVal: selectedMenu
+      selectedVal: selectedMenu,
+      nameAliases: nameAliases
     }))
-  }), showCountSubheader && /*#__PURE__*/React__default["default"].createElement(SubHeader__default["default"], {
+  })), showCountSubheader && /*#__PURE__*/React__default["default"].createElement(SubHeader__default["default"], {
     leftActionBlock: /*#__PURE__*/React__default["default"].createElement(neetoui.Typography, {
       className: "mr-4 font-semibold",
       style: "h4"
     }, "".concat(count, " "), t("titles.field", count > 1 ? PLURAL : SINGULAR).toLocaleLowerCase())
   }), /*#__PURE__*/React__default["default"].createElement(FieldsTable, {
     columnData: columnData,
+    helpDocUrl: helpDocUrl,
     isLoading: isFieldsFetching || isFieldsLoading,
     rowData: ramda.isEmpty(rowData) ? fields : rowData,
     setIsPaneOpen: setIsPaneOpen,
@@ -11386,6 +11792,7 @@ var FieldsDashboard = function FieldsDashboard(_ref) {
   })), /*#__PURE__*/React__default["default"].createElement(ReorderPane, {
     allFields: fields,
     isOpen: isReorderPaneOpen,
+    ownerId: showOwnersInMenu ? selectedMenu : "",
     onClose: handleReorderPaneClose
   }), /*#__PURE__*/React__default["default"].createElement(neetoui.Alert, {
     isOpen: isDeleteAlertOpen,
@@ -11408,14 +11815,16 @@ var create = function create(payload) {
 var fetch = function fetch(payload) {
   return axios__default["default"].get(FIELD_VALUES_URL, payload);
 };
-var destroy = function destroy(id, payload) {
+var destroy = function destroy(_ref) {
+  var id = _ref.id,
+    payload = _ref.payload;
   return axios__default["default"]["delete"](fieldValueUrl(id), {
     data: payload
   });
 };
-var update = function update(_ref) {
-  var id = _ref.id,
-    payload = _ref.payload;
+var update = function update(_ref2) {
+  var id = _ref2.id,
+    payload = _ref2.payload;
   return axios__default["default"].patch(fieldValueUrl(id), payload);
 };
 var fieldValuesApi = {
@@ -11431,8 +11840,11 @@ var useCreateFieldValue = function useCreateFieldValue(options) {
   var queryClient = reactQuery.useQueryClient();
   return reactQuery.useMutation(fieldValuesApi.create, _objectSpread$1(_objectSpread$1({}, options), {}, {
     onSuccess: function onSuccess() {
+      for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+        args[_key] = arguments[_key];
+      }
+      options === null || options === void 0 ? void 0 : options.onSuccess.apply(options, args);
       queryClient.invalidateQueries([QUERY_KEYS.FIELD_VALUES]);
-      options === null || options === void 0 ? void 0 : options.onSuccess();
     }
   }));
 };
@@ -11440,8 +11852,23 @@ var useUpdateFieldValue = function useUpdateFieldValue(options) {
   var queryClient = reactQuery.useQueryClient();
   return reactQuery.useMutation(fieldValuesApi.update, _objectSpread$1(_objectSpread$1({}, options), {}, {
     onSuccess: function onSuccess() {
+      for (var _len2 = arguments.length, args = new Array(_len2), _key2 = 0; _key2 < _len2; _key2++) {
+        args[_key2] = arguments[_key2];
+      }
+      options === null || options === void 0 ? void 0 : options.onSuccess.apply(options, args);
+      queryClient.invalidateQueries([QUERY_KEYS.FIELD_VALUES]);
+    }
+  }));
+};
+var useDeleteFieldValue = function useDeleteFieldValue(options) {
+  var queryClient = reactQuery.useQueryClient();
+  return reactQuery.useMutation(fieldValuesApi.destroy, _objectSpread$1(_objectSpread$1({}, options), {}, {
+    onSuccess: function onSuccess() {
+      for (var _len3 = arguments.length, args = new Array(_len3), _key3 = 0; _key3 < _len3; _key3++) {
+        args[_key3] = arguments[_key3];
+      }
+      options === null || options === void 0 ? void 0 : options.onSuccess.apply(options, args);
       queryClient.invalidateQueries([QUERY_KEYS.FIELD_VALUES]);
-      options === null || options === void 0 ? void 0 : options.onSuccess();
     }
   }));
 };
@@ -11453,7 +11880,7 @@ var FieldValueInputWrapper = function FieldValueInputWrapper(_ref) {
     onSubmit = _ref.onSubmit,
     _ref$className = _ref.className,
     className = _ref$className === void 0 ? "" : _ref$className;
-  return /*#__PURE__*/React__default["default"].createElement(formik.Form, {
+  return /*#__PURE__*/React__default["default"].createElement(formik$1.Form, {
     className: classnames__default["default"]("flex w-full", className),
     formikProps: {
       initialValues: getInitialFieldValue(field, fieldValues),
@@ -11463,6 +11890,14 @@ var FieldValueInputWrapper = function FieldValueInputWrapper(_ref) {
   }, children);
 };
 
+var isFieldValueEmpty = function isFieldValueEmpty(fieldKind, fieldValueData) {
+  if (fieldKind === KINDS.multiOption) return ramda.isEmpty(fieldValueData.values);
+  if ([KINDS.timeRange, KINDS.dateRange].includes(fieldKind)) {
+    return ramda.isEmpty(fieldValueData.value[0]) && ramda.isEmpty(fieldValueData.value[1]);
+  }
+  return ramda.isEmpty(fieldValueData.value);
+};
+
 function ownKeys(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(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 var FieldValuesContainer = function FieldValuesContainer(_ref) {
@@ -11473,8 +11908,6 @@ var FieldValuesContainer = function FieldValuesContainer(_ref) {
     _ref$ownerId = _ref.ownerId,
     ownerId = _ref$ownerId === void 0 ? "" : _ref$ownerId,
     resourceId = _ref.resourceId,
-    _ref$queryKeysToBeInv = _ref.queryKeysToBeInvalidatedOnSuccess,
-    queryKeysToBeInvalidatedOnSuccess = _ref$queryKeysToBeInv === void 0 ? [] : _ref$queryKeysToBeInv,
     _ref$customComponents = _ref.customComponents,
     customComponents = _ref$customComponents === void 0 ? {} : _ref$customComponents,
     _ref$className = _ref.className,
@@ -11487,14 +11920,13 @@ var FieldValuesContainer = function FieldValuesContainer(_ref) {
     isRequiredColumnName = _ref.isRequiredColumnName,
     fieldContainerClassName = _ref.fieldContainerClassName,
     fieldClassName = _ref.fieldClassName,
-    labelClassName = _ref.labelClassName;
-  var queryClient = reactQuery.useQueryClient();
+    labelClassName = _ref.labelClassName,
+    _ref$onMutationSucces = _ref.onMutationSuccess,
+    onMutationSuccess = _ref$onMutationSucces === void 0 ? pure.noop : _ref$onMutationSucces;
   var _useTranslation = useTranslation(),
     t = _useTranslation.t;
   var queryOptions = {
-    onSuccess: function onSuccess() {
-      queryClient.invalidateQueries(queryKeysToBeInvalidatedOnSuccess);
-    }
+    onSuccess: onMutationSuccess
   };
   var _useFetchFields = useFetchFields({
       resourceType: ramda.isEmpty(resourceType) ? undefined : resourceType,
@@ -11512,7 +11944,9 @@ var FieldValuesContainer = function FieldValuesContainer(_ref) {
     createFieldValue = _useCreateFieldValue.mutate;
   var _useUpdateFieldValue = useUpdateFieldValue(queryOptions),
     updateFieldValue = _useUpdateFieldValue.mutate;
-  var handleSubmit = function handleSubmit(values) {
+  var _useDeleteFieldValue = useDeleteFieldValue(queryOptions),
+    deleteFieldValue = _useDeleteFieldValue.mutate;
+  var handleSubmit = function handleSubmit(field, values) {
     var fieldValue = ramda.head(ramda.values(values));
     var payload = {
       fieldValue: fieldValue,
@@ -11520,10 +11954,17 @@ var FieldValuesContainer = function FieldValuesContainer(_ref) {
       resourceId: resourceId,
       ownerId: ramda.isEmpty(ownerId) ? undefined : ownerId
     };
-    fieldValue.id ? updateFieldValue({
-      id: fieldValue.id,
-      payload: payload
-    }) : createFieldValue(payload);
+    if (isFieldValueEmpty(field.kind, fieldValue.data)) {
+      deleteFieldValue({
+        id: fieldValue.id,
+        payload: payload
+      });
+    } else {
+      fieldValue.id ? updateFieldValue({
+        id: fieldValue.id,
+        payload: payload
+      }) : createFieldValue(payload);
+    }
   };
   var fields = propFields || fetchedFields;
   return /*#__PURE__*/React__default["default"].createElement("div", {
@@ -11546,7 +11987,9 @@ var FieldValuesContainer = function FieldValuesContainer(_ref) {
         style: "h5"
       }, pure.capitalize(field.name)), /*#__PURE__*/React__default["default"].createElement(FieldValueInputWrapper, {
         className: fieldClassName,
-        onSubmit: handleSubmit,
+        onSubmit: function onSubmit(values) {
+          return handleSubmit(field, values);
+        },
         field: field,
         fieldValues: fieldValues
       }, /*#__PURE__*/React__default["default"].createElement("div", {
@@ -11565,10 +12008,10 @@ var FieldValuesContainer = function FieldValuesContainer(_ref) {
   }));
 };
 
-exports.AddField = AddField;
 exports.FieldInputs = FieldInputs;
 exports.FieldValuesContainer = FieldValuesContainer;
 exports.FieldsDashboard = FieldsDashboard;
+exports.FieldsPane = FieldsPane;
 exports.neetoFieldsUtils = neetoFieldsUtils;
 exports.useCreateField = useCreateField;
 exports.useDestroyField = useDestroyField;