@bigbinary/neeto-fields-frontend 1.1.12 → 1.1.14

package/dist/index.cjs.js

@@ -11,17 +11,18 @@ var reactUtils = require('@bigbinary/neeto-commons-frontend/react-utils');
 var yup = require('yup');
 var neetoIcons = require('@bigbinary/neeto-icons');
 var formik$1 = require('@bigbinary/neetoui/formik');
+var constants = require('@bigbinary/neeto-commons-frontend/constants');
 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 reactRouterDom = require('react-router-dom');
+var MenuBar = require('@bigbinary/neeto-molecules/MenuBar');
 var TableWrapper = require('@bigbinary/neeto-molecules/TableWrapper');
+var NeetoUIHeader = require('@bigbinary/neeto-molecules/Header');
 var reactDom = require('react-dom');
+var NeetoUISubHeader = require('@bigbinary/neeto-molecules/SubHeader');
 var classnames = require('classnames');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
@@ -47,12 +48,12 @@ function _interopNamespace(e) {
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 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 MenuBar__default = /*#__PURE__*/_interopDefaultLegacy(MenuBar);
 var TableWrapper__default = /*#__PURE__*/_interopDefaultLegacy(TableWrapper);
+var NeetoUIHeader__default = /*#__PURE__*/_interopDefaultLegacy(NeetoUIHeader);
+var NeetoUISubHeader__default = /*#__PURE__*/_interopDefaultLegacy(NeetoUISubHeader);
 var classnames__default = /*#__PURE__*/_interopDefaultLegacy(classnames);
 
 /*! @license DOMPurify 3.0.2 | (c) Cure53 and other contributors | Released under the Apache license 2.0 and Mozilla Public License 2.0 | github.com/cure53/DOMPurify/blob/3.0.2/LICENSE */
@@ -3749,8 +3750,8 @@ function transformOptions(options) {
   return options;
 }
 
-function ownKeys$f(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$f(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$f(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$f(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+function ownKeys$h(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$h(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$h(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$h(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 +3811,9 @@ var I18n = function (_EventEmitter) {
         }
       }
       var defOpts = get();
-      this.options = _objectSpread$f(_objectSpread$f(_objectSpread$f({}, defOpts), this.options), transformOptions(options));
+      this.options = _objectSpread$h(_objectSpread$h(_objectSpread$h({}, defOpts), this.options), transformOptions(options));
       if (this.options.compatibilityAPI !== 'v1') {
-        this.options.interpolation = _objectSpread$f(_objectSpread$f({}, defOpts.interpolation), this.options.interpolation);
+        this.options.interpolation = _objectSpread$h(_objectSpread$h({}, defOpts.interpolation), this.options.interpolation);
       }
       if (options.keySeparator !== undefined) {
         this.options.userDefinedKeySeparator = options.keySeparator;
@@ -4090,7 +4091,7 @@ var I18n = function (_EventEmitter) {
           }
           options = _this5.options.overloadTranslationOptionHandler([key, opts].concat(rest));
         } else {
-          options = _objectSpread$f({}, opts);
+          options = _objectSpread$h({}, opts);
         }
         options.lng = options.lng || fixedT.lng;
         options.lngs = options.lngs || fixedT.lngs;
@@ -4217,7 +4218,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$f(_objectSpread$f(_objectSpread$f({}, this.options), options), {
+      var mergedOptions = _objectSpread$h(_objectSpread$h(_objectSpread$h({}, this.options), options), {
         isClone: true
       });
       var clone = new I18n(mergedOptions);
@@ -4228,7 +4229,7 @@ var I18n = function (_EventEmitter) {
       membersToCopy.forEach(function (m) {
         clone[m] = _this8[m];
       });
-      clone.services = _objectSpread$f({}, this.services);
+      clone.services = _objectSpread$h({}, this.services);
       clone.services.utils = {
         hasLoadedNamespace: clone.hasLoadedNamespace.bind(clone)
       };
@@ -4737,9 +4738,9 @@ function cape(m) {
   return unes[m];
 }
 
-function ownKeys$e(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 ownKeys$g(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$e(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys$e(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys$e(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+function _objectSpread$g(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys$g(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys$g(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
 var defaultOptions$1 = {
   bindI18n: 'languageChanged',
   bindI18nStore: '',
@@ -4753,7 +4754,7 @@ var i18nInstance;
 var I18nContext = React__default["default"].createContext();
 function setDefaults() {
   var options = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
-  defaultOptions$1 = _objectSpread$e(_objectSpread$e({}, defaultOptions$1), options);
+  defaultOptions$1 = _objectSpread$g(_objectSpread$g({}, defaultOptions$1), options);
 }
 function getDefaults() {
   return defaultOptions$1;
@@ -4877,12 +4878,12 @@ function hasLoadedNamespace(ns, i18n) {
   });
 }
 
-var _excluded$4 = ["format"],
+var _excluded$6 = ["format"],
     _excluded2 = ["children", "count", "parent", "i18nKey", "context", "tOptions", "values", "defaults", "components", "ns", "i18n", "t", "shouldUnescape"];
 
-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 ownKeys$f(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; }
+function _objectSpread$f(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys$f(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys$f(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
 
 function hasChildren(node, checkLength) {
   if (!node) return false;
@@ -4908,7 +4909,7 @@ function getAsArray(data) {
 }
 
 function mergeProps(source, target) {
-  var newTarget = _objectSpread$d({}, target);
+  var newTarget = _objectSpread$f({}, target);
 
   newTarget.props = Object.assign(source.props, target.props);
   return newTarget;
@@ -4943,7 +4944,7 @@ function nodesToString(children, i18nOptions) {
       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);
+          clone = _objectWithoutProperties(child, _excluded$6);
 
       var keys = Object.keys(clone);
 
@@ -4978,7 +4979,7 @@ function renderNodes(children, targetString, i18n, i18nOptions, combinedTOpts, s
   getData(children);
   var ast = c.parse("<0>".concat(targetString, "</0>"));
 
-  var opts = _objectSpread$d(_objectSpread$d({}, data), combinedTOpts);
+  var opts = _objectSpread$f(_objectSpread$f({}, data), combinedTOpts);
 
   function renderInner(child, node, rootReactNode) {
     var childs = getChildren(child);
@@ -4988,7 +4989,7 @@ function renderNodes(children, targetString, i18n, i18nOptions, combinedTOpts, s
 
   function pushTranslatedJSX(child, inner, mem, i, isVoid) {
     if (child.dummy) child.children = inner;
-    mem.push(React__default["default"].cloneElement(child, _objectSpread$d(_objectSpread$d({}, child.props), {}, {
+    mem.push(React__default["default"].cloneElement(child, _objectSpread$f(_objectSpread$f({}, child.props), {}, {
       key: i
     }), isVoid ? undefined : inner));
   }
@@ -5020,7 +5021,7 @@ function renderNodes(children, targetString, i18n, i18nOptions, combinedTOpts, s
           } else if (isEmptyTransWithHTML) {
           var _inner = mapAST(reactNodes, node.children, rootReactNode);
 
-          mem.push(React__default["default"].cloneElement(child, _objectSpread$d(_objectSpread$d({}, child.props), {}, {
+          mem.push(React__default["default"].cloneElement(child, _objectSpread$f(_objectSpread$f({}, child.props), {}, {
             key: i
           }), _inner));
         } else if (Number.isNaN(parseFloat(node.name))) {
@@ -5051,11 +5052,11 @@ function renderNodes(children, targetString, i18n, i18nOptions, combinedTOpts, s
           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$d(_objectSpread$d({}, child.props), {}, {
+          mem.push(React__default["default"].cloneElement(child, _objectSpread$f(_objectSpread$f({}, child.props), {}, {
             key: i
           }), translationContent));
         } else {
-          mem.push(React__default["default"].cloneElement(child, _objectSpread$d(_objectSpread$d({}, child.props), {}, {
+          mem.push(React__default["default"].cloneElement(child, _objectSpread$f(_objectSpread$f({}, child.props), {}, {
             key: i
           })));
         }
@@ -5118,7 +5119,7 @@ function Trans(_ref) {
 
   if (context) tOptions.context = context;
 
-  var reactI18nextOptions = _objectSpread$d(_objectSpread$d({}, getDefaults()), i18n.options && i18n.options.react);
+  var reactI18nextOptions = _objectSpread$f(_objectSpread$f({}, getDefaults()), i18n.options && i18n.options.react);
 
   var namespaces = ns || t.ns || defaultNSFromContext || i18n.options && i18n.options.defaultNS;
   namespaces = typeof namespaces === 'string' ? [namespaces] : namespaces || ['translation'];
@@ -5126,13 +5127,13 @@ function Trans(_ref) {
   var hashTransKey = reactI18nextOptions.hashTransKey;
   var key = i18nKey || (hashTransKey ? hashTransKey(defaultValue) : defaultValue);
   var interpolationOverride = values ? tOptions.interpolation : {
-    interpolation: _objectSpread$d(_objectSpread$d({}, tOptions.interpolation), {}, {
+    interpolation: _objectSpread$f(_objectSpread$f({}, tOptions.interpolation), {}, {
       prefix: '#$?',
       suffix: '?$#'
     })
   };
 
-  var combinedTOpts = _objectSpread$d(_objectSpread$d(_objectSpread$d(_objectSpread$d({}, tOptions), {}, {
+  var combinedTOpts = _objectSpread$f(_objectSpread$f(_objectSpread$f(_objectSpread$f({}, tOptions), {}, {
     count: count
   }, values), interpolationOverride), {}, {
     defaultValue: defaultValue,
@@ -5177,9 +5178,9 @@ function _slicedToArray(arr, i) {
   return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest();
 }
 
-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 ownKeys$e(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 _objectSpread$e(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys$e(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys$e(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
 function useTranslation(ns) {
   var props = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
   var i18nFromProps = props.i18n;
@@ -5207,7 +5208,7 @@ function useTranslation(ns) {
 
   if (i18n.options.react && i18n.options.react.wait !== undefined) warnOnce('It seems you are still using the old wait option, you may migrate to the new useSuspense behaviour.');
 
-  var i18nOptions = _objectSpread$c(_objectSpread$c(_objectSpread$c({}, getDefaults()), i18n.options.react), props);
+  var i18nOptions = _objectSpread$e(_objectSpread$e(_objectSpread$e({}, getDefaults()), i18n.options.react), props);
 
   var useSuspense = i18nOptions.useSuspense,
       keyPrefix = i18nOptions.keyPrefix;
@@ -5283,6 +5284,8 @@ var common = {
 var titles = {
 	field_one: "Field",
 	field_other: "Fields",
+	fieldWithCount_one: "{{count}} field",
+	fieldWithCount_other: "{{count}} fields",
 	addField: "Add new field",
 	editField: "Edit field",
 	deleteField: "Delete field?",
@@ -5349,7 +5352,13 @@ var messages = {
 	titleForResource: "{{title}} for {{resource}}",
 	stateTitleForResource: "{{state}} {{title}} for {{resource}}",
 	invalidKind: "Invalid kind",
-	reorderFields: "Fields are displayed from top to bottom."
+	reorderFields: "Fields are displayed from top to bottom.",
+	blockNavigationAlert: {
+		title: "You have unsaved changes",
+		message: "All of your unsaved changes will be lost. This can't be undone.",
+		submitButtonLabel: "Discard changes",
+		cancelButtonLabel: "Cancel"
+	}
 };
 var validations = {
 	regexConditionIsRequired: "Regex condition is required",
@@ -5440,6 +5449,7 @@ function _toConsumableArray(arr) {
   return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread();
 }
 
+var DEFAULT_PAGE_SIZE = 12;
 var KINDS = {
   text: "text",
   number: "number",
@@ -5488,6 +5498,13 @@ var DEFAULT_FIELD_STATE_TAXONOMY = {
 };
 var ALL_KINDS = ramda.values(KINDS);
 
+var isDateTime = function isDateTime(kind) {
+  return ["date", "time", "date_range", "time_range", "datetime"].includes(kind);
+};
+var isDropdown$1 = function isDropdown(kind) {
+  return ["single_option", "multi_option"].includes(kind);
+};
+
 function asyncGeneratorStep(gen, resolve, reject, _next, _throw, key, arg) {
   try {
     var info = gen[key](arg);
@@ -6035,9 +6052,9 @@ var dateTimeToString = function dateTimeToString(dateTime) {
   return dateTime && dayjs(dateTime).toString() || "";
 };
 
-var _excluded$3 = ["name", "id", "kind", "data", "individualSubmit", "formRef", "formRefs", "disabled", "isRequiredColumnName"];
-function ownKeys$b(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$b(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$b(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$b(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+var _excluded$5 = ["name", "id", "kind", "data", "individualSubmit", "formRef", "formRefs", "disabled", "isRequiredColumnName"];
+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; }
 var useFormikFields = function useFormikFields(_ref) {
   var name = _ref.name,
     fieldId = _ref.id,
@@ -6049,7 +6066,7 @@ var useFormikFields = function useFormikFields(_ref) {
     disabled = _ref.disabled,
     _ref$isRequiredColumn = _ref.isRequiredColumnName,
     isRequiredColumnName = _ref$isRequiredColumn === void 0 ? "isRequired" : _ref$isRequiredColumn,
-    props = _objectWithoutProperties(_ref, _excluded$3);
+    props = _objectWithoutProperties(_ref, _excluded$5);
   var formikContext = formik.useFormikContext();
   var submitForm = formikContext.submitForm,
     dirty = formikContext.dirty,
@@ -6091,7 +6108,6 @@ var useFormikFields = function useFormikFields(_ref) {
     }
     return value || "";
   };
-  var isDropdown = ["single_option", "multi_option"].includes(kind);
   React.useEffect(function () {
     if (isSubmitting && !meta.touched) {
       helpers.setTouched(true);
@@ -6100,15 +6116,17 @@ var useFormikFields = function useFormikFields(_ref) {
   return {
     dirty: dirty,
     handleSubmit: handleSubmit,
-    fieldProps: _objectSpread$b(_objectSpread$b({}, formikFieldProps), {}, {
+    fieldProps: _objectSpread$d(_objectSpread$d({}, formikFieldProps), {}, {
       error: individualSubmit ? meta.error : meta.touched && meta.error,
-      options: isDropdown ? buildOptionsToLabelAndValue(fieldData) : undefined,
       value: getValueForField(formikFieldProps.value),
       label: pure.capitalize(name),
       labelProps: {
         required: props[isRequiredColumnName]
       },
-      disabled: disabled
+      disabled: disabled,
+      //conditional props
+      options: isDropdown$1(kind) ? buildOptionsToLabelAndValue(fieldData) : undefined,
+      getPopupContainer: isDateTime(kind) ? ramda.prop("parentElement") : undefined
     })
   };
 };
@@ -6130,28 +6148,25 @@ var DateOrTime = function DateOrTime(props) {
   var _useFormikFields = useFormikFields(props),
     handleSubmit = _useFormikFields.handleSubmit,
     fieldProps = _useFormikFields.fieldProps;
+  var handleChange = function handleChange(dateTime) {
+    return handleSubmit(dateTimeToString(dateTime));
+  };
   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));
-      }
+      onChange: handleChange
     }));
   } else if (props.kind === KINDS.date) {
     return /*#__PURE__*/React__default["default"].createElement(neetoui.DatePicker, _extends({}, fieldProps, {
-      onChange: function onChange(dateTime) {
-        return handleSubmit(dateTimeToString(dateTime));
-      }
+      onChange: handleChange
     }));
   }
   return /*#__PURE__*/React__default["default"].createElement(neetoui.DatePicker, _extends({
     showTime: true,
     timeFormat: "h:mm A"
   }, fieldProps, {
-    onChange: function onChange(dateTime) {
-      return handleSubmit(dateTimeToString(dateTime));
-    }
+    onChange: handleChange
   }));
 };
 
@@ -6268,8 +6283,8 @@ var TextArea = function TextArea(props) {
   }));
 };
 
-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; }
+function ownKeys$c(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$c(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$c(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$c(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 var standardComponents = {
   text: Text,
   regex: Text,
@@ -6320,7 +6335,7 @@ var transformValues = function transformValues(_ref2) {
     delete allFieldValues[fieldPath];
   });
   var cleanedFieldValues = ramda.pipe(removeItemsWithNullData, removeNoiseFromValues)(neetoFieldValues);
-  return _objectSpread$a(_objectSpread$a({}, allFieldValues), {}, {
+  return _objectSpread$c(_objectSpread$c({}, allFieldValues), {}, {
     fieldValuesAttributes: cleanedFieldValues
   });
 };
@@ -6383,8 +6398,8 @@ var neetoFieldsUtils = {
   transformValues: transformValues
 };
 
-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; }
+function ownKeys$b(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$b(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$b(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$b(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,
@@ -6402,7 +6417,7 @@ var FieldInputs = function FieldInputs(_ref) {
     if (Field) {
       return /*#__PURE__*/React__default["default"].createElement(Field, _extends({
         key: field.id
-      }, _objectSpread$9(_objectSpread$9({}, field), {}, {
+      }, _objectSpread$b(_objectSpread$b({}, field), {}, {
         formRef: formRef,
         disabled: disabled,
         isRequiredColumnName: isRequiredColumnName
@@ -6423,28 +6438,10 @@ var FIELD_URL = "".concat(NEETO_FIELDS_URL, "/fields/:fieldId");
 var DEPENDENCIES_URL = "".concat(NEETO_FIELDS_URL, "/fields/:fieldId/dependencies");
 var FIELDS_REORDER_URL = "".concat(FIELDS_URL, "/reorder");
 var CONFIGS_URL = "".concat(NEETO_FIELDS_URL, "/configs");
-var SINGULAR = {
-  count: 1
-};
-var PLURAL = {
-  count: 2
-};
 var INFO_ICON_SIZE = 16;
 
-var TitleWithHelpLink = function TitleWithHelpLink(_ref) {
-  var title = _ref.title,
-    helpUrl = _ref.helpUrl;
-  return /*#__PURE__*/React__default["default"].createElement("div", {
-    className: "flex items-center gap-x-1"
-  }, title, helpUrl && /*#__PURE__*/React__default["default"].createElement("a", {
-    href: helpUrl,
-    rel: "noreferrer",
-    target: "_blank"
-  }, /*#__PURE__*/React__default["default"].createElement(neetoIcons.Info, {
-    size: INFO_ICON_SIZE
-  })));
-};
-
+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 fieldUrl = function fieldUrl(fieldId) {
   return utils.buildUrl(FIELD_URL, {
     fieldId: fieldId
@@ -6459,14 +6456,15 @@ var fetch$1 = function fetch(_ref) {
   var resourceType = _ref.resourceType,
     ownerId = _ref.ownerId,
     state = _ref.state,
-    searchTerm = _ref.searchTerm;
+    searchTerm = _ref.searchTerm,
+    pageProps = _ref.pageProps;
   return axios__default["default"].get(FIELDS_URL, {
-    params: {
+    params: _objectSpread$a({
       resourceType: resourceType,
       ownerId: ownerId,
       state: state,
       searchTerm: searchTerm
-    }
+    }, pageProps)
   });
 };
 var create$1 = function create(payload) {
@@ -6525,31 +6523,28 @@ var QUERY_KEYS = {
 };
 var DEFAULT_STALE_TIME = 3600000; // 1 hour
 
-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 _excluded$4 = ["prefixQueryKeys", "pageProps"];
+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 FIELDS = QUERY_KEYS.FIELDS,
   DEPENDENCIES = QUERY_KEYS.DEPENDENCIES;
 var useFetchFields = function useFetchFields(_ref, options) {
-  var resourceType = _ref.resourceType,
-    ownerId = _ref.ownerId,
-    state = _ref.state,
-    _ref$prefixQueryKeys = _ref.prefixQueryKeys,
+  var _ref$prefixQueryKeys = _ref.prefixQueryKeys,
     prefixQueryKeys = _ref$prefixQueryKeys === void 0 ? [] : _ref$prefixQueryKeys,
-    searchTerm = _ref.searchTerm;
-  return reactQuery.useQuery([FIELDS].concat(_toConsumableArray(prefixQueryKeys), [resourceType, ownerId, state, searchTerm]), function () {
-    return fieldsApi.fetch({
-      resourceType: resourceType,
-      ownerId: ownerId,
-      state: state,
-      searchTerm: searchTerm
-    });
-  }, _objectSpread$8({
+    _ref$pageProps = _ref.pageProps,
+    pageProps = _ref$pageProps === void 0 ? {} : _ref$pageProps,
+    params = _objectWithoutProperties(_ref, _excluded$4);
+  return reactQuery.useQuery([FIELDS].concat(_toConsumableArray(prefixQueryKeys), [pageProps, params]), function () {
+    return fieldsApi.fetch(_objectSpread$9({
+      pageProps: pageProps
+    }, params));
+  }, _objectSpread$9({
     staleTime: DEFAULT_STALE_TIME
   }, options));
 };
 var useCreateField = function useCreateField(options) {
   var queryClient = reactQuery.useQueryClient();
-  return reactQuery.useMutation(fieldsApi.create, _objectSpread$8(_objectSpread$8({}, options), {}, {
+  return reactQuery.useMutation(fieldsApi.create, _objectSpread$9(_objectSpread$9({}, options), {}, {
     onSuccess: function onSuccess() {
       var _options$onSuccess;
       for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
@@ -6583,7 +6578,7 @@ var useFetchDependencies = function useFetchDependencies(_ref3, options) {
 };
 var useUpdateField = function useUpdateField(options) {
   var queryClient = reactQuery.useQueryClient();
-  return reactQuery.useMutation(fieldsApi.update, _objectSpread$8(_objectSpread$8({}, options), {}, {
+  return reactQuery.useMutation(fieldsApi.update, _objectSpread$9(_objectSpread$9({}, options), {}, {
     onSuccess: function onSuccess() {
       var _options$onSuccess2;
       for (var _len2 = arguments.length, args = new Array(_len2), _key2 = 0; _key2 < _len2; _key2++) {
@@ -6596,7 +6591,7 @@ var useUpdateField = function useUpdateField(options) {
 };
 var useDestroyField = function useDestroyField(options) {
   var queryClient = reactQuery.useQueryClient();
-  return reactQuery.useMutation(fieldsApi.destroy, _objectSpread$8(_objectSpread$8({}, options), {}, {
+  return reactQuery.useMutation(fieldsApi.destroy, _objectSpread$9(_objectSpread$9({}, options), {}, {
     onSuccess: function onSuccess() {
       var _options$onSuccess3;
       for (var _len3 = arguments.length, args = new Array(_len3), _key3 = 0; _key3 < _len3; _key3++) {
@@ -6616,11 +6611,11 @@ var useReorderFields = function useReorderFields() {
   });
 };
 
-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; }
+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 arrangeOptionsDisplayOrder = function arrangeOptionsDisplayOrder(options) {
   return options.map(function (option, index) {
-    return _objectSpread$7(_objectSpread$7({}, option), {}, {
+    return _objectSpread$8(_objectSpread$8({}, option), {}, {
       displayOrder: index
     });
   });
@@ -6635,7 +6630,7 @@ var buildPayload = function buildPayload(_ref) {
   var name = formValues.name.trim();
   return {
     ownerId: ramda.isEmpty(ownerId) ? undefined : ownerId,
-    field: _objectSpread$7(_objectSpread$7({}, ramda.omit(["createdAt", "id", "ownerId", "ownerType", "updatedAt"], formValues)), {}, {
+    field: _objectSpread$8(_objectSpread$8({}, ramda.omit(["createdAt", "id", "ownerId", "ownerType", "updatedAt"], formValues)), {}, {
       kind: kind,
       name: name,
       resourceType: ramda.isEmpty(resourceType) ? undefined : resourceType,
@@ -6662,7 +6657,7 @@ var getPermittedKinds = function getPermittedKinds(_ref2) {
   return permittedKinds;
 };
 var generateValidationSchema = function generateValidationSchema(additionalValidations) {
-  return yup__namespace.object().shape(_objectSpread$7(_objectSpread$7({}, BASIC_FIELD_FORM_VALIDATIONS), additionalValidations));
+  return yup__namespace.object().shape(_objectSpread$8(_objectSpread$8({}, BASIC_FIELD_FORM_VALIDATIONS), additionalValidations));
 };
 var renderFormFooter = function renderFormFooter(_ref3) {
   var onClose = _ref3.onClose,
@@ -6961,9 +6956,9 @@ var FieldForm = function FieldForm(_ref) {
   }, t("labels.isRequired"))), children));
 };
 
-var _excluded$2 = ["resourceType", "allowedKinds", "ownerId", "additionalValidations", "initialValues", "onClose", "onMutationSuccess"];
-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 _excluded$3 = ["resourceType", "allowedKinds", "ownerId", "additionalValidations", "initialValues", "onClose", "onMutationSuccess"];
+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").AddProps>} */
 
@@ -6976,7 +6971,7 @@ var Add = function Add(_ref) {
     initialValues = _ref.initialValues,
     onClose = _ref.onClose,
     onMutationSuccess = _ref.onMutationSuccess,
-    props = _objectWithoutProperties(_ref, _excluded$2);
+    props = _objectWithoutProperties(_ref, _excluded$3);
   var _useTranslation = useTranslation(),
     t = _useTranslation.t;
   var _useCreateField = useCreateField({
@@ -7000,7 +6995,7 @@ var Add = function Add(_ref) {
     style: "h2"
   }, t("titles.addField"))), /*#__PURE__*/React__default["default"].createElement(formik$1.Form, {
     formikProps: {
-      initialValues: _objectSpread$6(_objectSpread$6({}, initialValues), INITIAL_FIELDS),
+      initialValues: _objectSpread$7(_objectSpread$7({}, initialValues), INITIAL_FIELDS),
       validationSchema: generateValidationSchema(additionalValidations),
       onSubmit: handleSubmit
     }
@@ -7018,9 +7013,9 @@ var Add = function Add(_ref) {
   }));
 };
 
-var _excluded$1 = ["fieldId", "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; }
+var _excluded$2 = ["fieldId", "allowedKinds", "ownerId", "additionalValidations", "initialValues", "onClose", "onMutationSuccess"];
+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; }
 
 /** @type {React.FC<import("types").EditProps>} */
 
@@ -7035,7 +7030,7 @@ var Edit = function Edit(_ref) {
     initialValues = _ref$initialValues === void 0 ? {} : _ref$initialValues,
     onClose = _ref.onClose,
     onMutationSuccess = _ref.onMutationSuccess,
-    props = _objectWithoutProperties(_ref, _excluded$1);
+    props = _objectWithoutProperties(_ref, _excluded$2);
   var _useTranslation = useTranslation(),
     t = _useTranslation.t;
   var _useShowField = useShowField({
@@ -7073,7 +7068,7 @@ var Edit = function Edit(_ref) {
     style: "h2"
   }, t("titles.editField"))), isLoading ? /*#__PURE__*/React__default["default"].createElement(PageLoader__default["default"], null) : /*#__PURE__*/React__default["default"].createElement(formik$1.Form, {
     formikProps: {
-      initialValues: _objectSpread$5(_objectSpread$5({}, initialValues), ramda.assoc("kind", FIELD_KINDS[field.kind], field)),
+      initialValues: _objectSpread$6(_objectSpread$6({}, initialValues), ramda.assoc("kind", FIELD_KINDS[field.kind], field)),
       validationSchema: generateValidationSchema(additionalValidations),
       enableReinitialize: true,
       onSubmit: handleSubmit
@@ -7097,7 +7092,7 @@ var Edit = function Edit(_ref) {
   }));
 };
 
-var _excluded = ["isOpen", "selectedField"];
+var _excluded$1 = ["isOpen", "selectedField"];
 
 /** @type {React.FC<import("types").FieldsPaneProps>} */
 
@@ -7105,7 +7100,7 @@ var FieldsPane = function FieldsPane(_ref) {
   var isOpen = _ref.isOpen,
     _ref$selectedField = _ref.selectedField,
     selectedField = _ref$selectedField === void 0 ? {} : _ref$selectedField,
-    props = _objectWithoutProperties(_ref, _excluded);
+    props = _objectWithoutProperties(_ref, _excluded$1);
   return /*#__PURE__*/React__default["default"].createElement(neetoui.Pane, {
     isOpen: isOpen,
     onClose: props.onClose
@@ -7634,6 +7629,7 @@ var buildDefaultColumns = function buildDefaultColumns(_ref) {
     key: "name",
     dataIndex: "name",
     title: t$1("titles.fieldName"),
+    width: "30%",
     render: function render(name, field) {
       return /*#__PURE__*/React__default["default"].createElement("div", {
         className: "flex items-center justify-between gap-x-3"
@@ -7665,7 +7661,8 @@ var buildDefaultColumns = function buildDefaultColumns(_ref) {
     title: t$1("titles.fieldKind"),
     render: function render(kind) {
       return DISPLAY_KINDS[kind];
-    }
+    },
+    width: "30%"
   }, {
     key: "isRequired",
     dataIndex: "isRequired",
@@ -7806,16 +7803,16 @@ var configsApi = {
   fetchConfigs: fetchConfigs
 };
 
-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; }
+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 useFetchConfigs = function useFetchConfigs(options) {
-  return reactQuery.useQuery([QUERY_KEYS.CONFIGS], configsApi.fetchConfigs, _objectSpread$4({
+  return reactQuery.useQuery([QUERY_KEYS.CONFIGS], configsApi.fetchConfigs, _objectSpread$5({
     staleTime: DEFAULT_STALE_TIME
   }, options));
 };
 
-function ownKeys$3(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-function _objectSpread$3(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$3(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$3(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+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 useFieldsDashboard = function useFieldsDashboard(_ref) {
   var buildColumnData = _ref.buildColumnData,
     isOwnerBased = _ref.isOwnerBased,
@@ -7828,26 +7825,29 @@ var useFieldsDashboard = function useFieldsDashboard(_ref) {
     _useState2 = _slicedToArray(_useState, 2),
     isPaneOpen = _useState2[0],
     setIsPaneOpen = _useState2[1];
-  var _useState3 = React.useState(true),
+  var _useState3 = React.useState(false),
     _useState4 = _slicedToArray(_useState3, 2),
-    isMenuBarOpen = _useState4[0],
-    setIsMenuBarOpen = _useState4[1];
+    isDeleteAlertOpen = _useState4[0],
+    setIsDeleteAlertOpen = _useState4[1];
   var _useState5 = React.useState(false),
     _useState6 = _slicedToArray(_useState5, 2),
-    isDeleteAlertOpen = _useState6[0],
-    setIsDeleteAlertOpen = _useState6[1];
-  var _useState7 = React.useState(false),
+    isReorderPaneOpen = _useState6[0],
+    setIsReorderPaneOpen = _useState6[1];
+  var _useState7 = React.useState({}),
     _useState8 = _slicedToArray(_useState7, 2),
-    isReorderPaneOpen = _useState8[0],
-    setIsReorderPaneOpen = _useState8[1];
-  var _useState9 = React.useState({}),
+    selectedField = _useState8[0],
+    setSelectedField = _useState8[1];
+  var _useState9 = React.useState(""),
     _useState10 = _slicedToArray(_useState9, 2),
-    selectedField = _useState10[0],
-    setSelectedField = _useState10[1];
-  var _useState11 = React.useState(""),
+    searchTerm = _useState10[0],
+    setSearchTerm = _useState10[1];
+  var _useState11 = React.useState({
+      pageIndex: constants.DEFAULT_PAGE_INDEX,
+      pageSize: DEFAULT_PAGE_SIZE
+    }),
     _useState12 = _slicedToArray(_useState11, 2),
-    searchTerm = _useState12[0],
-    setSearchTerm = _useState12[1];
+    pageProps = _useState12[0],
+    setPageProps = _useState12[1];
   var debouncedSearchTerm = reactUtils.useDebounce(searchTerm.trim());
   var history = reactRouterDom.useHistory();
   var _useTranslation = useTranslation(),
@@ -7866,12 +7866,12 @@ var useFieldsDashboard = function useFieldsDashboard(_ref) {
     _useFetchConfigs$data4 = _useFetchConfigs$data2.resourceTypes,
     resourceTypes = _useFetchConfigs$data4 === void 0 ? [] : _useFetchConfigs$data4,
     isConfigsLoading = _useFetchConfigs.isLoading;
-  var fieldParams = {
+  var fieldParams = _objectSpread$4({
     resourceType: !isOwnerBased ? resource : undefined,
     ownerId: ownerId,
     state: state || FIELD_STATES.active,
     searchTerm: debouncedSearchTerm
-  };
+  }, pageProps);
   var _useFetchFields = useFetchFields(fieldParams, {
       enabled: !!resource,
       keepPreviousData: true
@@ -7883,18 +7883,9 @@ var useFieldsDashboard = function useFieldsDashboard(_ref) {
     count = _useFetchFields$data2.count,
     activeFieldsCount = _useFetchFields$data2.activeFieldsCount,
     inactiveFieldsCount = _useFetchFields$data2.inactiveFieldsCount,
+    reorderable = _useFetchFields$data2.reorderable,
     isFieldsLoading = _useFetchFields.isLoading,
     isFieldsFetching = _useFetchFields.isFetching;
-  var _useFetchFields2 = useFetchFields(_objectSpread$3(_objectSpread$3({}, fieldParams), {}, {
-      state: FIELD_STATES.active,
-      searchTerm: ""
-    }), {
-      enabled: !!resource
-    }),
-    _useFetchFields2$data = _useFetchFields2.data,
-    _useFetchFields2$data2 = _useFetchFields2$data === void 0 ? {} : _useFetchFields2$data,
-    _useFetchFields2$data3 = _useFetchFields2$data2.fields,
-    allFields = _useFetchFields2$data3 === void 0 ? [] : _useFetchFields2$data3;
   var _useDestroyField = useDestroyField({
       onSuccess: function onSuccess() {
         setIsDeleteAlertOpen(false);
@@ -7938,7 +7929,7 @@ var useFieldsDashboard = function useFieldsDashboard(_ref) {
     defaultColumns: defaultColumns
   });
   var handleBlockClick = function handleBlockClick(params) {
-    return reactUtils.handleMetaClick(history, utils.buildUrl("", _objectSpread$3({
+    return reactUtils.handleMetaClick(history, utils.buildUrl("", _objectSpread$4({
       resource: resource,
       state: state
     }, params)));
@@ -8009,11 +8000,15 @@ var useFieldsDashboard = function useFieldsDashboard(_ref) {
   React.useEffect(function () {
     handleURLWithDefaultValues();
   }, [isConfigsLoading, resources]);
+  React.useEffect(function () {
+    setPageProps({
+      pageIndex: constants.DEFAULT_PAGE_INDEX,
+      pageSize: DEFAULT_PAGE_SIZE
+    });
+  }, [searchTerm, state, resource]);
   return {
     isPaneOpen: isPaneOpen,
     setIsPaneOpen: setIsPaneOpen,
-    isMenuBarOpen: isMenuBarOpen,
-    setIsMenuBarOpen: setIsMenuBarOpen,
     isDeleteAlertOpen: isDeleteAlertOpen,
     isReorderPaneOpen: isReorderPaneOpen,
     setIsReorderPaneOpen: setIsReorderPaneOpen,
@@ -8021,7 +8016,6 @@ var useFieldsDashboard = function useFieldsDashboard(_ref) {
     count: count,
     columnData: columnData,
     selectedField: selectedField,
-    selectedState: state,
     selectedMenu: resource,
     // resource will be ownerId if showOwnersInMenu is true, else it will be resourceType
     ownerId: ownerId,
@@ -8039,8 +8033,10 @@ var useFieldsDashboard = function useFieldsDashboard(_ref) {
     searchProps: searchProps,
     stateFilterTabs: stateFilterTabs,
     menuBarItems: menuBarItems,
-    allFields: allFields,
-    headerDisplayTitle: headerDisplayTitle
+    reorderable: reorderable,
+    headerDisplayTitle: headerDisplayTitle,
+    pageProps: pageProps,
+    setPageProps: setPageProps
   };
 };
 
@@ -8079,6 +8075,8 @@ var DeleteAlert = function DeleteAlert(_ref) {
   });
 };
 
+function ownKeys$3(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread$3(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$3(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$3(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 var FieldsTable = function FieldsTable(_ref) {
   var totalCount = _ref.totalCount,
     isLoading = _ref.isLoading,
@@ -8086,11 +8084,15 @@ var FieldsTable = function FieldsTable(_ref) {
     columnData = _ref.columnData,
     setIsPaneOpen = _ref.setIsPaneOpen,
     helpDocUrl = _ref.helpDocUrl,
-    title = _ref.title;
+    title = _ref.title,
+    pageProps = _ref.pageProps,
+    setPageProps = _ref.setPageProps;
   var _useTranslation = useTranslation(),
     t = _useTranslation.t;
   var showNoDataScreen = !isLoading && ramda.isEmpty(rowData);
   title = title.toLocaleLowerCase();
+  var pageIndex = pageProps.pageIndex,
+    pageSize = pageProps.pageSize;
   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, _extends({}, helpDocUrl && {
@@ -8109,12 +8111,92 @@ var FieldsTable = function FieldsTable(_ref) {
     fixedHeight: true,
     allowRowClick: false,
     columnData: columnData,
-    loading: isLoading,
     rowData: rowData,
-    totalCount: totalCount
+    totalCount: totalCount,
+    currentPageNumber: pageIndex,
+    defaultPageSize: pageSize,
+    loading: isLoading,
+    handlePageChange: function handlePageChange(pageIndex) {
+      return setPageProps(_objectSpread$3(_objectSpread$3({}, pageProps), {}, {
+        pageIndex: pageIndex
+      }));
+    }
+  }));
+};
+
+var TitleWithHelpLink = function TitleWithHelpLink(_ref) {
+  var title = _ref.title,
+    helpUrl = _ref.helpUrl;
+  return /*#__PURE__*/React__default["default"].createElement("div", {
+    className: "flex items-center gap-x-1"
+  }, title, helpUrl && /*#__PURE__*/React__default["default"].createElement("a", {
+    href: helpUrl,
+    rel: "noreferrer",
+    target: "_blank"
+  }, /*#__PURE__*/React__default["default"].createElement(neetoIcons.Info, {
+    size: INFO_ICON_SIZE
+  })));
+};
+
+// eslint-disable-next-line @bigbinary/neeto/no-dumb-components-with-use-translation
+var ActionBlock = function ActionBlock(_ref) {
+  var reorderable = _ref.reorderable,
+    setIsReorderPaneOpen = _ref.setIsReorderPaneOpen,
+    setIsPaneOpen = _ref.setIsPaneOpen;
+  var _useTranslation = useTranslation(),
+    t = _useTranslation.t;
+  return /*#__PURE__*/React__default["default"].createElement("div", {
+    className: "flex flex-shrink-0 items-center gap-3"
+  }, /*#__PURE__*/React__default["default"].createElement(neetoui.Button, {
+    "data-cy": "neeto-fields-reorder-button",
+    disabled: !reorderable,
+    label: t("labels.reorder"),
+    style: "secondary",
+    onClick: function onClick() {
+      return setIsReorderPaneOpen(true);
+    }
+  }), /*#__PURE__*/React__default["default"].createElement(neetoui.Button, {
+    "data-cy": "neeto-fields-add-button",
+    label: t("labels.addField"),
+    onClick: function onClick() {
+      return setIsPaneOpen(true);
+    }
   }));
 };
 
+var _excluded = ["searchProps", "breadcrumbs", "title", "helpDocUrl"];
+var Header = function Header(_ref) {
+  var searchProps = _ref.searchProps,
+    breadcrumbs = _ref.breadcrumbs,
+    title = _ref.title,
+    helpDocUrl = _ref.helpDocUrl,
+    actionBlockProps = _objectWithoutProperties(_ref, _excluded);
+  return /*#__PURE__*/React__default["default"].createElement(NeetoUIHeader__default["default"], {
+    size: "small",
+    searchProps: searchProps,
+    actionBlock: /*#__PURE__*/React__default["default"].createElement(ActionBlock, actionBlockProps),
+    breadcrumbs: [].concat(_toConsumableArray(breadcrumbs), [{
+      text: pure.truncate(title, 50)
+    }]),
+    title: /*#__PURE__*/React__default["default"].createElement(TitleWithHelpLink, {
+      helpUrl: helpDocUrl,
+      title: title
+    })
+  });
+};
+
+var Menubar = function Menubar(_ref) {
+  var isConfigsLoading = _ref.isConfigsLoading,
+    menuBarItems = _ref.menuBarItems,
+    title = _ref.title;
+  return /*#__PURE__*/React__default["default"].createElement(MenuBar__default["default"], {
+    showMenu: true,
+    title: title
+  }, isConfigsLoading ? /*#__PURE__*/React__default["default"].createElement("div", {
+    className: "flex items-center justify-center"
+  }, /*#__PURE__*/React__default["default"].createElement(neetoui.Spinner, null)) : menuBarItems);
+};
+
 function useCombinedRefs() {
   for (var _len = arguments.length, refs = new Array(_len), _key = 0; _key < _len; _key++) {
     refs[_key] = arguments[_key];
@@ -12388,7 +12470,6 @@ var FieldBlock$1 = /*#__PURE__*/React__default["default"].memo(FieldBlock);
 var ReorderPane = function ReorderPane(_ref) {
   var isOpen = _ref.isOpen,
     onClose = _ref.onClose,
-    allFields = _ref.allFields,
     ownerId = _ref.ownerId;
   var _useState = React.useState([]),
     _useState2 = _slicedToArray(_useState, 2),
@@ -12397,12 +12478,32 @@ var ReorderPane = function ReorderPane(_ref) {
   var initialStateRef = React.useRef([]);
   var _useTranslation = useTranslation(),
     t = _useTranslation.t;
+  var _getQueryParams = utils.getQueryParams(),
+    resource = _getQueryParams.resource;
   var _useReorderFields = useReorderFields(),
     reorderField = _useReorderFields.mutate,
     isSubmitting = _useReorderFields.isLoading;
-  var handleDragEnd = function handleDragEnd(_ref2) {
-    var active = _ref2.active,
-      over = _ref2.over;
+  var fieldParams = {
+    resourceType: ramda.isEmpty(ownerId) ? resource : undefined,
+    ownerId: ownerId,
+    state: FIELD_STATES.active,
+    searchTerm: ""
+  };
+  var _useFetchFields = useFetchFields(fieldParams, {
+      enabled: !!resource && isOpen,
+      onSuccess: function onSuccess(_ref2) {
+        var fields = _ref2.fields;
+        setFields(fields);
+        initialStateRef.current = fields;
+      }
+    }),
+    _useFetchFields$data = _useFetchFields.data,
+    _useFetchFields$data2 = _useFetchFields$data === void 0 ? {} : _useFetchFields$data,
+    _useFetchFields$data3 = _useFetchFields$data2.fields,
+    allFields = _useFetchFields$data3 === void 0 ? [] : _useFetchFields$data3;
+  var handleDragEnd = function handleDragEnd(_ref3) {
+    var active = _ref3.active,
+      over = _ref3.over;
     if (active.id !== over.id) {
       setFields(function (fields) {
         return arrayMove(fields, active.data.current.index, over.data.current.index);
@@ -12424,10 +12525,6 @@ var ReorderPane = function ReorderPane(_ref) {
       onSuccess: onClose
     });
   };
-  React.useEffect(function () {
-    setFields(allFields);
-    initialStateRef.current = allFields;
-  }, [allFields]);
   return /*#__PURE__*/React__default["default"].createElement(neetoui.Pane, {
     isOpen: isOpen,
     onClose: onClose
@@ -12471,8 +12568,21 @@ var ReorderPane = function ReorderPane(_ref) {
   })));
 };
 
-function ownKeys$2(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$2(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$2(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$2(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+// eslint-disable-next-line @bigbinary/neeto/no-dumb-components-with-use-translation
+var Subheader = function Subheader(_ref) {
+  var count = _ref.count;
+  var _useTranslation = useTranslation(),
+    t = _useTranslation.t;
+  return /*#__PURE__*/React__default["default"].createElement(NeetoUISubHeader__default["default"], {
+    leftActionBlock: /*#__PURE__*/React__default["default"].createElement(neetoui.Typography, {
+      className: "neeto-ui-gray-800 mr-4 font-semibold",
+      "data-cy": "neeto-fields-subheader-text",
+      style: "h4"
+    }, t("titles.fieldWithCount", {
+      count: count
+    }))
+  });
+};
 
 /** @type {React.FC<import("types").FieldsDashboardProps>} */
 
@@ -12505,7 +12615,7 @@ var FieldsDashboard = function FieldsDashboard(_ref) {
     resources = _ref.resources;
   var _useTranslation = useTranslation(),
     t = _useTranslation.t;
-  var title = pure.capitalize(headerTitle || t("titles.field", PLURAL));
+  var title = pure.capitalize(headerTitle || t("titles.field", constants.PLURAL));
   var _useFieldsDashboard = useFieldsDashboard({
       buildColumnData: buildColumnData,
       isOwnerBased: isOwnerBased,
@@ -12517,8 +12627,6 @@ var FieldsDashboard = function FieldsDashboard(_ref) {
     }),
     isPaneOpen = _useFieldsDashboard.isPaneOpen,
     setIsPaneOpen = _useFieldsDashboard.setIsPaneOpen,
-    isMenuBarOpen = _useFieldsDashboard.isMenuBarOpen,
-    setIsMenuBarOpen = _useFieldsDashboard.setIsMenuBarOpen,
     isDeleteAlertOpen = _useFieldsDashboard.isDeleteAlertOpen,
     isReorderPaneOpen = _useFieldsDashboard.isReorderPaneOpen,
     setIsReorderPaneOpen = _useFieldsDashboard.setIsReorderPaneOpen,
@@ -12526,7 +12634,6 @@ var FieldsDashboard = function FieldsDashboard(_ref) {
     count = _useFieldsDashboard.count,
     columnData = _useFieldsDashboard.columnData,
     selectedField = _useFieldsDashboard.selectedField,
-    selectedState = _useFieldsDashboard.selectedState,
     selectedMenu = _useFieldsDashboard.selectedMenu,
     ownerId = _useFieldsDashboard.ownerId,
     isFieldsFetching = _useFieldsDashboard.isFieldsFetching,
@@ -12543,59 +12650,36 @@ var FieldsDashboard = function FieldsDashboard(_ref) {
     searchProps = _useFieldsDashboard.searchProps,
     stateFilterTabs = _useFieldsDashboard.stateFilterTabs,
     menuBarItems = _useFieldsDashboard.menuBarItems,
-    allFields = _useFieldsDashboard.allFields,
-    headerDisplayTitle = _useFieldsDashboard.headerDisplayTitle;
-  return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, isMenuBarNeeded && /*#__PURE__*/React__default["default"].createElement(MenuBar__default["default"], {
-    showMenu: isMenuBarOpen,
+    reorderable = _useFieldsDashboard.reorderable,
+    headerDisplayTitle = _useFieldsDashboard.headerDisplayTitle,
+    pageProps = _useFieldsDashboard.pageProps,
+    setPageProps = _useFieldsDashboard.setPageProps;
+  var headerProps = {
+    reorderable: reorderable,
+    breadcrumbs: breadcrumbs,
+    helpDocUrl: helpDocUrl,
+    searchProps: searchProps,
+    setIsPaneOpen: setIsPaneOpen,
+    setIsReorderPaneOpen: setIsReorderPaneOpen,
+    title: headerDisplayTitle
+  };
+  return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, isMenuBarNeeded && /*#__PURE__*/React__default["default"].createElement(Menubar, {
+    isConfigsLoading: isConfigsLoading,
+    menuBarItems: menuBarItems,
     title: title
-  }, isConfigsLoading ? /*#__PURE__*/React__default["default"].createElement("div", {
-    className: "flex items-center justify-center"
-  }, /*#__PURE__*/React__default["default"].createElement(neetoui.Spinner, null)) : menuBarItems), isScreenLoading && ramda.isEmpty(fields) ? /*#__PURE__*/React__default["default"].createElement("div", {
+  }), isScreenLoading && ramda.isEmpty(fields) ? /*#__PURE__*/React__default["default"].createElement("div", {
     className: "flex h-screen 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"], _extends({}, _objectSpread$2(_objectSpread$2({
-    breadcrumbs: breadcrumbs
-  }, isMenuBarNeeded && {
-    menuBarToggle: function menuBarToggle() {
-      return setIsMenuBarOpen(ramda.not);
-    }
-  }), {}, {
-    searchProps: searchProps
-  }), {
-    actionBlock: /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement("div", null, /*#__PURE__*/React__default["default"].createElement(neetoui.Button, {
-      "data-cy": "neeto-fields-reorder-button",
-      label: t("labels.reorder"),
-      style: "secondary",
-      disabled: selectedState === FIELD_STATES.inactive || !pure.existsBy({
-        isSystem: false,
-        state: "active"
-      }, allFields),
-      onClick: function onClick() {
-        return setIsReorderPaneOpen(true);
-      }
-    })), /*#__PURE__*/React__default["default"].createElement("div", null, /*#__PURE__*/React__default["default"].createElement(neetoui.Button, {
-      "data-cy": "neeto-fields-add-button",
-      label: t("labels.addField"),
-      onClick: function onClick() {
-        return setIsPaneOpen(true);
-      }
-    }))),
-    title: /*#__PURE__*/React__default["default"].createElement(TitleWithHelpLink, {
-      helpUrl: helpDocUrl,
-      title: headerDisplayTitle
-    })
-  })), showCountSubheader && /*#__PURE__*/React__default["default"].createElement(SubHeader__default["default"], {
-    leftActionBlock: /*#__PURE__*/React__default["default"].createElement(neetoui.Typography, {
-      className: "mr-4 font-semibold",
-      "data-cy": "neeto-fields-subheader-text",
-      style: "h4"
-    }, "".concat(count, " "), t("titles.field", count > 1 ? PLURAL : SINGULAR).toLocaleLowerCase())
-  }), showStateFilter && stateFilterTabs, /*#__PURE__*/React__default["default"].createElement(FieldsTable, {
+  }, /*#__PURE__*/React__default["default"].createElement(PageLoader__default["default"], null)) : /*#__PURE__*/React__default["default"].createElement(Container__default["default"], null, /*#__PURE__*/React__default["default"].createElement(Header, headerProps), showStateFilter && stateFilterTabs, showCountSubheader && /*#__PURE__*/React__default["default"].createElement(Subheader, {
+    count: count
+  }), /*#__PURE__*/React__default["default"].createElement(FieldsTable, {
     isLoading: isFieldsFetching || isFieldsLoading,
     rowData: ramda.isEmpty(rowData) ? fields : rowData,
     totalCount: count,
     columnData: columnData,
     helpDocUrl: helpDocUrl,
+    pageProps: pageProps,
     setIsPaneOpen: setIsPaneOpen,
+    setPageProps: setPageProps,
     title: title
   }), /*#__PURE__*/React__default["default"].createElement(FieldsPane, {
     additionalValidations: paneProps === null || paneProps === void 0 ? void 0 : paneProps.validations,
@@ -12611,8 +12695,7 @@ var FieldsDashboard = function FieldsDashboard(_ref) {
   }, paneProps === null || paneProps === void 0 ? void 0 : paneProps.children)), /*#__PURE__*/React__default["default"].createElement(ReorderPane, {
     isOpen: isReorderPaneOpen,
     ownerId: isOwnerBased ? selectedMenu : "",
-    onClose: handleReorderPaneClose,
-    allFields: allFields
+    onClose: handleReorderPaneClose
   }), /*#__PURE__*/React__default["default"].createElement(DeleteAlert, {
     handleAlertClose: handleAlertClose,
     handleDelete: handleDelete,
@@ -12654,11 +12737,11 @@ var fieldValuesApi = {
   update: update
 };
 
-function ownKeys$1(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$1(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$1(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$1(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+function ownKeys$2(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$2(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$2(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$2(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 var useCreateFieldValue = function useCreateFieldValue(options) {
   var queryClient = reactQuery.useQueryClient();
-  return reactQuery.useMutation(fieldValuesApi.create, _objectSpread$1(_objectSpread$1({}, options), {}, {
+  return reactQuery.useMutation(fieldValuesApi.create, _objectSpread$2(_objectSpread$2({}, options), {}, {
     onSuccess: function onSuccess() {
       for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
         args[_key] = arguments[_key];
@@ -12670,7 +12753,7 @@ var useCreateFieldValue = function useCreateFieldValue(options) {
 };
 var useUpdateFieldValue = function useUpdateFieldValue(options) {
   var queryClient = reactQuery.useQueryClient();
-  return reactQuery.useMutation(fieldValuesApi.update, _objectSpread$1(_objectSpread$1({}, options), {}, {
+  return reactQuery.useMutation(fieldValuesApi.update, _objectSpread$2(_objectSpread$2({}, options), {}, {
     onSuccess: function onSuccess() {
       for (var _len2 = arguments.length, args = new Array(_len2), _key2 = 0; _key2 < _len2; _key2++) {
         args[_key2] = arguments[_key2];
@@ -12682,7 +12765,7 @@ var useUpdateFieldValue = function useUpdateFieldValue(options) {
 };
 var useDeleteFieldValue = function useDeleteFieldValue(options) {
   var queryClient = reactQuery.useQueryClient();
-  return reactQuery.useMutation(fieldValuesApi.destroy, _objectSpread$1(_objectSpread$1({}, options), {}, {
+  return reactQuery.useMutation(fieldValuesApi.destroy, _objectSpread$2(_objectSpread$2({}, options), {}, {
     onSuccess: function onSuccess() {
       for (var _len3 = arguments.length, args = new Array(_len3), _key3 = 0; _key3 < _len3; _key3++) {
         args[_key3] = arguments[_key3];
@@ -12693,6 +12776,88 @@ var useDeleteFieldValue = function useDeleteFieldValue(options) {
   }));
 };
 
+const useNavPrompt = ({
+  shouldBlock
+}) => {
+  const history = reactRouterDom.useHistory();
+
+  const _unblock = React.useRef(null);
+
+  const _navPath = React.useRef(null);
+
+  const [blocked, setBlocked] = React.useState(false);
+  React.useEffect(() => {
+    if (shouldBlock) {
+      _unblock.current = history.block(location => {
+        // need to use ref?
+        setBlocked(true);
+        _navPath.current = location.pathname + location.search; // $FlowFixMe - See https://github.com/ReactTraining/history/issues/728
+
+        return false;
+      });
+      return () => {
+        if (_unblock.current) {
+          _unblock.current();
+        }
+      };
+    }
+  }, [shouldBlock]);
+
+  const navigate = () => {
+    if (_unblock.current) {
+      _unblock.current();
+
+      setBlocked(false);
+
+      if (_navPath.current) {
+        history.push(_navPath.current);
+      }
+    }
+  };
+
+  const hidePrompt = () => {
+    setBlocked(false);
+  };
+
+  return {
+    blocked,
+    navigate,
+    hidePrompt
+  };
+};
+
+var DEAFULT_BLOCK_NAVIGATION_ALERT_PROPS = {
+  title: t$1("messages.blockNavigationAlert.title"),
+  message: t$1("messages.blockNavigationAlert.message"),
+  submitButtonLabel: t$1("messages.blockNavigationAlert.submitButtonLabel"),
+  cancelButtonLabel: t$1("messages.blockNavigationAlert.cancelButtonLabel")
+};
+
+function ownKeys$1(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$1(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$1(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$1(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+var BlockNavigation = function BlockNavigation(_ref) {
+  var blockNavigation = _ref.blockNavigation,
+    blockNavigationAlertProps = _ref.blockNavigationAlertProps;
+  var _useFormikContext = formik.useFormikContext(),
+    dirty = _useFormikContext.dirty;
+  var _useNavPrompt = useNavPrompt({
+      shouldBlock: blockNavigation && dirty
+    }),
+    blocked = _useNavPrompt.blocked,
+    hidePrompt = _useNavPrompt.hidePrompt,
+    navigate = _useNavPrompt.navigate;
+  var alertProps = _objectSpread$1(_objectSpread$1({}, DEAFULT_BLOCK_NAVIGATION_ALERT_PROPS), blockNavigationAlertProps);
+  return /*#__PURE__*/React__default["default"].createElement(neetoui.Alert, {
+    cancelButtonLabel: alertProps["cancelButtonLabel"],
+    isOpen: blocked,
+    message: alertProps["message"],
+    submitButtonLabel: alertProps["submitButtonLabel"],
+    title: alertProps["title"],
+    onClose: hidePrompt,
+    onSubmit: navigate
+  });
+};
+
 var FieldValueInputWrapper = function FieldValueInputWrapper(_ref) {
   var field = _ref.field,
     fieldValues = _ref.fieldValues,
@@ -12745,7 +12910,11 @@ var FieldValuesContainer = function FieldValuesContainer(_ref) {
     isRequiredColumnName = _ref.isRequiredColumnName,
     fieldClassName = _ref.fieldClassName,
     _ref$onMutationSucces = _ref.onMutationSuccess,
-    onMutationSuccess = _ref$onMutationSucces === void 0 ? pure.noop : _ref$onMutationSucces;
+    onMutationSuccess = _ref$onMutationSucces === void 0 ? pure.noop : _ref$onMutationSucces,
+    _ref$blockNavigation = _ref.blockNavigation,
+    blockNavigation = _ref$blockNavigation === void 0 ? false : _ref$blockNavigation,
+    _ref$blockNavigationA = _ref.blockNavigationAlertProps,
+    blockNavigationAlertProps = _ref$blockNavigationA === void 0 ? {} : _ref$blockNavigationA;
   var _useTranslation = useTranslation(),
     t = _useTranslation.t;
   var queryOptions = {
@@ -12792,7 +12961,7 @@ var FieldValuesContainer = function FieldValuesContainer(_ref) {
   var fields = propFields || fetchedFields;
   return /*#__PURE__*/React__default["default"].createElement("div", {
     className: classnames__default["default"]("space-y-3 py-3", {
-      "neeto-ui-border-gray-300 rounded-lg border bg-white px-4 py-2": showBorder
+      "neeto-ui-border-gray-300 neeto-ui-rounded-lg neeto-ui-bg-white border px-4 py-2": showBorder
     }, className)
   }, isFieldsLoading ? /*#__PURE__*/React__default["default"].createElement("div", {
     className: "flex items-center justify-center"
@@ -12814,12 +12983,16 @@ var FieldValuesContainer = function FieldValuesContainer(_ref) {
         fieldValues: fieldValues
       }, /*#__PURE__*/React__default["default"].createElement("div", {
         className: "w-full"
-      }, /*#__PURE__*/React__default["default"].createElement(Field, _objectSpread(_objectSpread({}, field), {}, {
-        individualSubmit: true,
-        formRefs: formRefs,
+      }, /*#__PURE__*/React__default["default"].createElement(Field, _extends({}, _objectSpread(_objectSpread({}, field), {}, {
         disabled: disabled,
+        formRefs: formRefs,
         isRequiredColumnName: isRequiredColumnName
-      })))));
+      }), {
+        individualSubmit: true
+      })), /*#__PURE__*/React__default["default"].createElement(BlockNavigation, {
+        blockNavigation: blockNavigation,
+        blockNavigationAlertProps: blockNavigationAlertProps
+      }))));
     }
     return /*#__PURE__*/React__default["default"].createElement(neetoui.Typography, {
       key: field.id,