@bigbinary/neeto-fields-frontend 1.1.11 → 1.1.13

package/dist/index.js

@@ -1,23 +1,24 @@
 import React, { useContext, useState, useRef, useEffect, useMemo, useLayoutEffect, useCallback, createContext, memo, useReducer } from 'react';
 import { Checkbox as Checkbox$1, TimePicker, DatePicker, Select, Input, Textarea, Typography, Pane, Label, Button as Button$1, Dropdown, Tab, Alert, NoData, Table, Spinner } from '@bigbinary/neetoui';
-import { toLabelAndValue, isNotEmpty, capitalize as capitalize$1, filterBy, findBy, slugify, humanize, countBy, existsBy, noop as noop$2 } from '@bigbinary/neeto-commons-frontend/pure';
-import { values, map, isNotNil, isNil, isEmpty, pluck, clone as clone$1, pipe, mergeAll, omit, prop, pick, assoc, any, not, head } from 'ramda';
+import { toLabelAndValue, isNotEmpty, capitalize as capitalize$1, filterBy, findBy, slugify, humanize, existsBy, truncate, countBy, noop as noop$2 } from '@bigbinary/neeto-commons-frontend/pure';
+import { values, map, isNotNil, isNil, isEmpty, prop, pluck, clone as clone$1, pipe, mergeAll, omit, pick, assoc, any, head } from 'ramda';
 import { useFormikContext, useField, FieldArray } from 'formik';
 import { useFuncDebounce, useDebounce, handleMetaClick } from '@bigbinary/neeto-commons-frontend/react-utils';
 import * as yup from 'yup';
-import { Check, Info, Delete, MenuHorizontal, Reorder } from '@bigbinary/neeto-icons';
-import { Button, ActionBlock, Input as Input$1, Select as Select$1, Switch, Form } from '@bigbinary/neetoui/formik';
+import { Check, Delete, MenuHorizontal, Info, Reorder } from '@bigbinary/neeto-icons';
+import { Button, ActionBlock as ActionBlock$1, Input as Input$1, Select as Select$1, Switch, Form } from '@bigbinary/neetoui/formik';
+import { PLURAL } from '@bigbinary/neeto-commons-frontend/constants';
 import Container from '@bigbinary/neeto-molecules/Container';
-import Header from '@bigbinary/neeto-molecules/Header';
-import MenuBar from '@bigbinary/neeto-molecules/MenuBar';
 import PageLoader from '@bigbinary/neeto-molecules/PageLoader';
-import SubHeader from '@bigbinary/neeto-molecules/SubHeader';
 import { useQuery, useQueryClient, useMutation } from 'react-query';
 import axios from 'axios';
 import { buildUrl, getQueryParams } from '@bigbinary/neeto-commons-frontend/utils';
 import { Link, useHistory } from 'react-router-dom';
+import MenuBar from '@bigbinary/neeto-molecules/MenuBar';
 import TableWrapper from '@bigbinary/neeto-molecules/TableWrapper';
+import NeetoUIHeader from '@bigbinary/neeto-molecules/Header';
 import { unstable_batchedUpdates, createPortal } from 'react-dom';
+import NeetoUISubHeader from '@bigbinary/neeto-molecules/SubHeader';
 import classnames from '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 */
@@ -3714,8 +3715,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$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() {}
@@ -3775,9 +3776,9 @@ var I18n = function (_EventEmitter) {
         }
       }
       var defOpts = get();
-      this.options = _objectSpread$f(_objectSpread$f(_objectSpread$f({}, 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$f(_objectSpread$f({}, 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;
@@ -4055,7 +4056,7 @@ var I18n = function (_EventEmitter) {
           }
           options = _this5.options.overloadTranslationOptionHandler([key, opts].concat(rest));
         } else {
-          options = _objectSpread$f({}, opts);
+          options = _objectSpread$e({}, opts);
         }
         options.lng = options.lng || fixedT.lng;
         options.lngs = options.lngs || fixedT.lngs;
@@ -4182,7 +4183,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$e(_objectSpread$e(_objectSpread$e({}, this.options), options), {
         isClone: true
       });
       var clone = new I18n(mergedOptions);
@@ -4193,7 +4194,7 @@ var I18n = function (_EventEmitter) {
       membersToCopy.forEach(function (m) {
         clone[m] = _this8[m];
       });
-      clone.services = _objectSpread$f({}, this.services);
+      clone.services = _objectSpread$e({}, this.services);
       clone.services.utils = {
         hasLoadedNamespace: clone.hasLoadedNamespace.bind(clone)
       };
@@ -4702,9 +4703,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$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$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$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: '',
@@ -4718,7 +4719,7 @@ var i18nInstance;
 var I18nContext = React.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$d(_objectSpread$d({}, defaultOptions$1), options);
 }
 function getDefaults() {
   return defaultOptions$1;
@@ -4842,12 +4843,12 @@ function hasLoadedNamespace(ns, i18n) {
   });
 }
 
-var _excluded$4 = ["format"],
+var _excluded$5 = ["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$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$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$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;
@@ -4873,7 +4874,7 @@ function getAsArray(data) {
 }
 
 function mergeProps(source, target) {
-  var newTarget = _objectSpread$d({}, target);
+  var newTarget = _objectSpread$c({}, target);
 
   newTarget.props = Object.assign(source.props, target.props);
   return newTarget;
@@ -4908,7 +4909,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$5);
 
       var keys = Object.keys(clone);
 
@@ -4943,7 +4944,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$c(_objectSpread$c({}, data), combinedTOpts);
 
   function renderInner(child, node, rootReactNode) {
     var childs = getChildren(child);
@@ -4953,7 +4954,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.cloneElement(child, _objectSpread$d(_objectSpread$d({}, child.props), {}, {
+    mem.push(React.cloneElement(child, _objectSpread$c(_objectSpread$c({}, child.props), {}, {
       key: i
     }), isVoid ? undefined : inner));
   }
@@ -4985,7 +4986,7 @@ function renderNodes(children, targetString, i18n, i18nOptions, combinedTOpts, s
           } else if (isEmptyTransWithHTML) {
           var _inner = mapAST(reactNodes, node.children, rootReactNode);
 
-          mem.push(React.cloneElement(child, _objectSpread$d(_objectSpread$d({}, child.props), {}, {
+          mem.push(React.cloneElement(child, _objectSpread$c(_objectSpread$c({}, child.props), {}, {
             key: i
           }), _inner));
         } else if (Number.isNaN(parseFloat(node.name))) {
@@ -5016,11 +5017,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.cloneElement(child, _objectSpread$d(_objectSpread$d({}, child.props), {}, {
+          mem.push(React.cloneElement(child, _objectSpread$c(_objectSpread$c({}, child.props), {}, {
             key: i
           }), translationContent));
         } else {
-          mem.push(React.cloneElement(child, _objectSpread$d(_objectSpread$d({}, child.props), {}, {
+          mem.push(React.cloneElement(child, _objectSpread$c(_objectSpread$c({}, child.props), {}, {
             key: i
           })));
         }
@@ -5083,7 +5084,7 @@ function Trans(_ref) {
 
   if (context) tOptions.context = context;
 
-  var reactI18nextOptions = _objectSpread$d(_objectSpread$d({}, getDefaults()), i18n.options && i18n.options.react);
+  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'];
@@ -5091,13 +5092,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$c(_objectSpread$c({}, tOptions.interpolation), {}, {
       prefix: '#$?',
       suffix: '?$#'
     })
   };
 
-  var combinedTOpts = _objectSpread$d(_objectSpread$d(_objectSpread$d(_objectSpread$d({}, tOptions), {}, {
+  var combinedTOpts = _objectSpread$c(_objectSpread$c(_objectSpread$c(_objectSpread$c({}, tOptions), {}, {
     count: count
   }, values), interpolationOverride), {}, {
     defaultValue: defaultValue,
@@ -5142,9 +5143,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$b(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$b(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys$b(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys$b(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;
@@ -5172,7 +5173,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$b(_objectSpread$b(_objectSpread$b({}, getDefaults()), i18n.options.react), props);
 
   var useSuspense = i18nOptions.useSuspense,
       keyPrefix = i18nOptions.keyPrefix;
@@ -5248,6 +5249,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?",
@@ -5453,6 +5456,13 @@ var DEFAULT_FIELD_STATE_TAXONOMY = {
 };
 var ALL_KINDS = 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);
@@ -5838,7 +5848,7 @@ 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})); 
+	!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",c="month",f="quarter",h="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,c),s=n-i<0,u=e.clone().add(r+(s?-1:1),c);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:c,y:h,w:o,d:a,D:d,h:u,m:s,s:i,ms:r,Q:f}[t]||String(t||"").toLowerCase().replace(/s$/,"")},u:function(t){return void 0===t}},g="en",D={};D[g]=M;var p="$isDayjsObject",S=function(t){return t instanceof _||!(!t||!t[p])},w=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},O=function(t,e){if(S(t))return t.clone();var n="object"==typeof e?e:{};return n.date=t,n.args=arguments,new _(n)},b=v;b.l=w,b.i=S,b.w=function(t,e){return O(t,{locale:e.$L,utc:e.$u,x:e.$x,$offset:e.$offset})};var _=function(){function M(t){this.$L=w(t.locale,null,!0),this.parse(t),this.$x=this.$x||t.x||{},this[p]=!0;}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(b.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.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 b},m.isValid=function(){return !(this.$d.toString()===l)},m.isSame=function(t,e){var n=O(t);return this.startOf(e)<=n&&n<=this.endOf(e)},m.isAfter=function(t,e){return O(t)<this.startOf(e)},m.isBefore=function(t,e){return this.endOf(e)<O(t)},m.$g=function(t,e,n){return b.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=!!b.u(e)||e,f=b.p(t),l=function(t,e){var i=b.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 b.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(f){case h:return r?l(1,0):l(31,11);case c: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=b.p(t),f="set"+(this.$u?"UTC":""),l=(n={},n[a]=f+"Date",n[d]=f+"Date",n[c]=f+"Month",n[h]=f+"FullYear",n[u]=f+"Hours",n[s]=f+"Minutes",n[i]=f+"Seconds",n[r]=f+"Milliseconds",n)[o],$=o===a?this.$D+(e-this.$W):e;if(o===c||o===h){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[b.p(t)]()},m.add=function(r,f){var d,l=this;r=Number(r);var $=b.p(f),y=function(t){var e=O(l);return b.w(e.date(e.date()+Math.round(t*r)),l)};if($===c)return this.set(c,this.$M+r);if($===h)return this.set(h,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 b.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=b.z(this),s=this.$H,u=this.$m,a=this.$M,o=n.weekdays,c=n.months,f=n.meridiem,h=function(t,n,i,s){return t&&(t[n]||t(e,r))||i[n].slice(0,s)},d=function(t){return b.s(s%12||12,t,"0")},$=f||function(t,e,n){var r=t<12?"AM":"PM";return n?r.toLowerCase():r};return r.replace(y,(function(t,r){return r||function(t){switch(t){case"YY":return String(e.$y).slice(-2);case"YYYY":return b.s(e.$y,4,"0");case"M":return a+1;case"MM":return b.s(a+1,2,"0");case"MMM":return h(n.monthsShort,a,c,3);case"MMMM":return h(c,a);case"D":return e.$D;case"DD":return b.s(e.$D,2,"0");case"d":return String(e.$W);case"dd":return h(n.weekdaysMin,e.$W,o,2);case"ddd":return h(n.weekdaysShort,e.$W,o,3);case"dddd":return o[e.$W];case"H":return String(s);case"HH":return b.s(s,2,"0");case"h":return d(1);case"hh":return d(2);case"a":return $(s,u,!0);case"A":return $(s,u,!1);case"m":return String(u);case"mm":return b.s(u,2,"0");case"s":return String(e.$s);case"ss":return b.s(e.$s,2,"0");case"SSS":return b.s(e.$ms,3,"0");case"Z":return i}return null}(t)||i.replace(":","")}))},m.utcOffset=function(){return 15*-Math.round(this.$d.getTimezoneOffset()/15)},m.diff=function(r,d,l){var $,y=this,M=b.p(d),m=O(r),v=(m.utcOffset()-this.utcOffset())*e,g=this-m,D=function(){return b.m(y,m)};switch(M){case h:$=D()/12;break;case c:$=D();break;case f:$=D()/3;break;case o:$=(g-v)/6048e5;break;case a:$=(g-v)/864e5;break;case u:$=g/n;break;case s:$=g/e;break;case i:$=g/t;break;default:$=g;}return l?$:b.a($)},m.daysInMonth=function(){return this.endOf(c).$D},m.$locale=function(){return D[this.$L]},m.locale=function(t,e){if(!t)return this.$L;var n=this.clone(),r=w(t,e,!0);return r&&(n.$L=r),n},m.clone=function(){return b.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}(),k=_.prototype;return O.prototype=k,[["$ms",r],["$s",i],["$m",s],["$H",u],["$W",a],["$M",c],["$y",h],["$D",d]].forEach((function(t){k[t[1]]=function(e){return this.$g(e,t[0],t[1])};})),O.extend=function(t,e){return t.$i||(t(e,_,O),t.$i=!0),O},O.locale=w,O.isDayjs=S,O.unix=function(t){return O(1e3*t)},O.en=D[g],O.Ls=D,O.p={},O})); 
 } (dayjs_min, dayjs_min.exports));
 
 var dayjs_minExports = dayjs_min.exports;
@@ -6000,9 +6010,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$4 = ["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,
@@ -6014,7 +6024,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$4);
   var formikContext = useFormikContext();
   var submitForm = formikContext.submitForm,
     dirty = formikContext.dirty,
@@ -6056,7 +6066,6 @@ var useFormikFields = function useFormikFields(_ref) {
     }
     return value || "";
   };
-  var isDropdown = ["single_option", "multi_option"].includes(kind);
   useEffect(function () {
     if (isSubmitting && !meta.touched) {
       helpers.setTouched(true);
@@ -6065,15 +6074,17 @@ var useFormikFields = function useFormikFields(_ref) {
   return {
     dirty: dirty,
     handleSubmit: handleSubmit,
-    fieldProps: _objectSpread$b(_objectSpread$b({}, formikFieldProps), {}, {
+    fieldProps: _objectSpread$a(_objectSpread$a({}, formikFieldProps), {}, {
       error: individualSubmit ? meta.error : meta.touched && meta.error,
-      options: isDropdown ? buildOptionsToLabelAndValue(fieldData) : undefined,
       value: getValueForField(formikFieldProps.value),
       label: capitalize$1(name),
       labelProps: {
         required: props[isRequiredColumnName]
       },
-      disabled: disabled
+      disabled: disabled,
+      //conditional props
+      options: isDropdown$1(kind) ? buildOptionsToLabelAndValue(fieldData) : undefined,
+      getPopupContainer: isDateTime(kind) ? prop("parentElement") : undefined
     })
   };
 };
@@ -6095,28 +6106,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.createElement(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.createElement(DatePicker, _extends({}, fieldProps, {
-      onChange: function onChange(dateTime) {
-        return handleSubmit(dateTimeToString(dateTime));
-      }
+      onChange: handleChange
     }));
   }
   return /*#__PURE__*/React.createElement(DatePicker, _extends({
     showTime: true,
     timeFormat: "h:mm A"
   }, fieldProps, {
-    onChange: function onChange(dateTime) {
-      return handleSubmit(dateTimeToString(dateTime));
-    }
+    onChange: handleChange
   }));
 };
 
@@ -6233,8 +6241,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$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,
@@ -6285,7 +6293,7 @@ var transformValues = function transformValues(_ref2) {
     delete allFieldValues[fieldPath];
   });
   var cleanedFieldValues = pipe(removeItemsWithNullData, removeNoiseFromValues)(neetoFieldValues);
-  return _objectSpread$a(_objectSpread$a({}, allFieldValues), {}, {
+  return _objectSpread$9(_objectSpread$9({}, allFieldValues), {}, {
     fieldValuesAttributes: cleanedFieldValues
   });
 };
@@ -6348,8 +6356,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$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,
@@ -6367,7 +6375,7 @@ var FieldInputs = function FieldInputs(_ref) {
     if (Field) {
       return /*#__PURE__*/React.createElement(Field, _extends({
         key: field.id
-      }, _objectSpread$9(_objectSpread$9({}, field), {}, {
+      }, _objectSpread$8(_objectSpread$8({}, field), {}, {
         formRef: formRef,
         disabled: disabled,
         isRequiredColumnName: isRequiredColumnName
@@ -6388,28 +6396,8 @@ 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.createElement("div", {
-    className: "flex items-center gap-x-1"
-  }, title, helpUrl && /*#__PURE__*/React.createElement("a", {
-    href: helpUrl,
-    rel: "noreferrer",
-    target: "_blank"
-  }, /*#__PURE__*/React.createElement(Info, {
-    size: INFO_ICON_SIZE
-  })));
-};
-
 var fieldUrl = function fieldUrl(fieldId) {
   return buildUrl(FIELD_URL, {
     fieldId: fieldId
@@ -6490,8 +6478,8 @@ 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; }
+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,
   DEPENDENCIES = QUERY_KEYS.DEPENDENCIES;
 var useFetchFields = function useFetchFields(_ref, options) {
@@ -6508,13 +6496,13 @@ var useFetchFields = function useFetchFields(_ref, options) {
       state: state,
       searchTerm: searchTerm
     });
-  }, _objectSpread$8({
+  }, _objectSpread$7({
     staleTime: DEFAULT_STALE_TIME
   }, options));
 };
 var useCreateField = function useCreateField(options) {
   var queryClient = useQueryClient();
-  return useMutation(fieldsApi.create, _objectSpread$8(_objectSpread$8({}, options), {}, {
+  return 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++) {
@@ -6548,7 +6536,7 @@ var useFetchDependencies = function useFetchDependencies(_ref3, options) {
 };
 var useUpdateField = function useUpdateField(options) {
   var queryClient = useQueryClient();
-  return useMutation(fieldsApi.update, _objectSpread$8(_objectSpread$8({}, options), {}, {
+  return 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++) {
@@ -6561,7 +6549,7 @@ var useUpdateField = function useUpdateField(options) {
 };
 var useDestroyField = function useDestroyField(options) {
   var queryClient = useQueryClient();
-  return useMutation(fieldsApi.destroy, _objectSpread$8(_objectSpread$8({}, options), {}, {
+  return 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++) {
@@ -6581,11 +6569,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$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 arrangeOptionsDisplayOrder = function arrangeOptionsDisplayOrder(options) {
   return options.map(function (option, index) {
-    return _objectSpread$7(_objectSpread$7({}, option), {}, {
+    return _objectSpread$6(_objectSpread$6({}, option), {}, {
       displayOrder: index
     });
   });
@@ -6600,7 +6588,7 @@ var buildPayload = function buildPayload(_ref) {
   var name = formValues.name.trim();
   return {
     ownerId: isEmpty(ownerId) ? undefined : ownerId,
-    field: _objectSpread$7(_objectSpread$7({}, omit(["createdAt", "id", "ownerId", "ownerType", "updatedAt"], formValues)), {}, {
+    field: _objectSpread$6(_objectSpread$6({}, omit(["createdAt", "id", "ownerId", "ownerType", "updatedAt"], formValues)), {}, {
       kind: kind,
       name: name,
       resourceType: isEmpty(resourceType) ? undefined : resourceType,
@@ -6627,14 +6615,14 @@ var getPermittedKinds = function getPermittedKinds(_ref2) {
   return permittedKinds;
 };
 var generateValidationSchema = function generateValidationSchema(additionalValidations) {
-  return yup.object().shape(_objectSpread$7(_objectSpread$7({}, BASIC_FIELD_FORM_VALIDATIONS), additionalValidations));
+  return yup.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.createElement(Pane.Footer, null, /*#__PURE__*/React.createElement(ActionBlock, {
+  return /*#__PURE__*/React.createElement(Pane.Footer, null, /*#__PURE__*/React.createElement(ActionBlock$1, {
     cancelButtonProps: {
       onClick: onClose,
       style: "text",
@@ -6926,9 +6914,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$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>} */
 
@@ -6941,7 +6929,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({
@@ -6965,7 +6953,7 @@ var Add = function Add(_ref) {
     style: "h2"
   }, t("titles.addField"))), /*#__PURE__*/React.createElement(Form, {
     formikProps: {
-      initialValues: _objectSpread$6(_objectSpread$6({}, initialValues), INITIAL_FIELDS),
+      initialValues: _objectSpread$5(_objectSpread$5({}, initialValues), INITIAL_FIELDS),
       validationSchema: generateValidationSchema(additionalValidations),
       onSubmit: handleSubmit
     }
@@ -6983,9 +6971,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$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; }
 
 /** @type {React.FC<import("types").EditProps>} */
 
@@ -7000,7 +6988,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({
@@ -7038,7 +7026,7 @@ var Edit = function Edit(_ref) {
     style: "h2"
   }, t("titles.editField"))), isLoading ? /*#__PURE__*/React.createElement(PageLoader, null) : /*#__PURE__*/React.createElement(Form, {
     formikProps: {
-      initialValues: _objectSpread$5(_objectSpread$5({}, initialValues), assoc("kind", FIELD_KINDS[field.kind], field)),
+      initialValues: _objectSpread$4(_objectSpread$4({}, initialValues), assoc("kind", FIELD_KINDS[field.kind], field)),
       validationSchema: generateValidationSchema(additionalValidations),
       enableReinitialize: true,
       onSubmit: handleSubmit
@@ -7062,7 +7050,7 @@ var Edit = function Edit(_ref) {
   }));
 };
 
-var _excluded = ["isOpen", "selectedField"];
+var _excluded$1 = ["isOpen", "selectedField"];
 
 /** @type {React.FC<import("types").FieldsPaneProps>} */
 
@@ -7070,7 +7058,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.createElement(Pane, {
     isOpen: isOpen,
     onClose: props.onClose
@@ -7599,6 +7587,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.createElement("div", {
         className: "flex items-center justify-between gap-x-3"
@@ -7630,7 +7619,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",
@@ -7771,16 +7761,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$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 useFetchConfigs = function useFetchConfigs(options) {
-  return useQuery([QUERY_KEYS.CONFIGS], configsApi.fetchConfigs, _objectSpread$4({
+  return useQuery([QUERY_KEYS.CONFIGS], configsApi.fetchConfigs, _objectSpread$3({
     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$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 useFieldsDashboard = function useFieldsDashboard(_ref) {
   var buildColumnData = _ref.buildColumnData,
     isOwnerBased = _ref.isOwnerBased,
@@ -7793,26 +7783,22 @@ var useFieldsDashboard = function useFieldsDashboard(_ref) {
     _useState2 = _slicedToArray(_useState, 2),
     isPaneOpen = _useState2[0],
     setIsPaneOpen = _useState2[1];
-  var _useState3 = useState(true),
+  var _useState3 = useState(false),
     _useState4 = _slicedToArray(_useState3, 2),
-    isMenuBarOpen = _useState4[0],
-    setIsMenuBarOpen = _useState4[1];
+    isDeleteAlertOpen = _useState4[0],
+    setIsDeleteAlertOpen = _useState4[1];
   var _useState5 = useState(false),
     _useState6 = _slicedToArray(_useState5, 2),
-    isDeleteAlertOpen = _useState6[0],
-    setIsDeleteAlertOpen = _useState6[1];
-  var _useState7 = useState(false),
+    isReorderPaneOpen = _useState6[0],
+    setIsReorderPaneOpen = _useState6[1];
+  var _useState7 = useState({}),
     _useState8 = _slicedToArray(_useState7, 2),
-    isReorderPaneOpen = _useState8[0],
-    setIsReorderPaneOpen = _useState8[1];
-  var _useState9 = useState({}),
+    selectedField = _useState8[0],
+    setSelectedField = _useState8[1];
+  var _useState9 = useState(""),
     _useState10 = _slicedToArray(_useState9, 2),
-    selectedField = _useState10[0],
-    setSelectedField = _useState10[1];
-  var _useState11 = useState(""),
-    _useState12 = _slicedToArray(_useState11, 2),
-    searchTerm = _useState12[0],
-    setSearchTerm = _useState12[1];
+    searchTerm = _useState10[0],
+    setSearchTerm = _useState10[1];
   var debouncedSearchTerm = useDebounce(searchTerm.trim());
   var history = useHistory();
   var _useTranslation = useTranslation(),
@@ -7850,7 +7836,7 @@ var useFieldsDashboard = function useFieldsDashboard(_ref) {
     inactiveFieldsCount = _useFetchFields$data2.inactiveFieldsCount,
     isFieldsLoading = _useFetchFields.isLoading,
     isFieldsFetching = _useFetchFields.isFetching;
-  var _useFetchFields2 = useFetchFields(_objectSpread$3(_objectSpread$3({}, fieldParams), {}, {
+  var _useFetchFields2 = useFetchFields(_objectSpread$2(_objectSpread$2({}, fieldParams), {}, {
       state: FIELD_STATES.active,
       searchTerm: ""
     }), {
@@ -7903,7 +7889,7 @@ var useFieldsDashboard = function useFieldsDashboard(_ref) {
     defaultColumns: defaultColumns
   });
   var handleBlockClick = function handleBlockClick(params) {
-    return handleMetaClick(history, buildUrl("", _objectSpread$3({
+    return handleMetaClick(history, buildUrl("", _objectSpread$2({
       resource: resource,
       state: state
     }, params)));
@@ -7977,8 +7963,6 @@ var useFieldsDashboard = function useFieldsDashboard(_ref) {
   return {
     isPaneOpen: isPaneOpen,
     setIsPaneOpen: setIsPaneOpen,
-    isMenuBarOpen: isMenuBarOpen,
-    setIsMenuBarOpen: setIsMenuBarOpen,
     isDeleteAlertOpen: isDeleteAlertOpen,
     isReorderPaneOpen: isReorderPaneOpen,
     setIsReorderPaneOpen: setIsReorderPaneOpen,
@@ -8080,6 +8064,83 @@ var FieldsTable = function FieldsTable(_ref) {
   }));
 };
 
+var TitleWithHelpLink = function TitleWithHelpLink(_ref) {
+  var title = _ref.title,
+    helpUrl = _ref.helpUrl;
+  return /*#__PURE__*/React.createElement("div", {
+    className: "flex items-center gap-x-1"
+  }, title, helpUrl && /*#__PURE__*/React.createElement("a", {
+    href: helpUrl,
+    rel: "noreferrer",
+    target: "_blank"
+  }, /*#__PURE__*/React.createElement(Info, {
+    size: INFO_ICON_SIZE
+  })));
+};
+
+// eslint-disable-next-line @bigbinary/neeto/no-dumb-components-with-use-translation
+var ActionBlock = function ActionBlock(_ref) {
+  var selectedState = _ref.selectedState,
+    allFields = _ref.allFields,
+    setIsReorderPaneOpen = _ref.setIsReorderPaneOpen,
+    setIsPaneOpen = _ref.setIsPaneOpen;
+  var _useTranslation = useTranslation(),
+    t = _useTranslation.t;
+  return /*#__PURE__*/React.createElement("div", {
+    className: "flex flex-shrink-0 items-center gap-3"
+  }, /*#__PURE__*/React.createElement(Button$1, {
+    "data-cy": "neeto-fields-reorder-button",
+    label: t("labels.reorder"),
+    style: "secondary",
+    disabled: selectedState === FIELD_STATES.inactive || !existsBy({
+      isSystem: false,
+      state: "active"
+    }, allFields),
+    onClick: function onClick() {
+      return setIsReorderPaneOpen(true);
+    }
+  }), /*#__PURE__*/React.createElement(Button$1, {
+    "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.createElement(NeetoUIHeader, {
+    size: "small",
+    searchProps: searchProps,
+    actionBlock: /*#__PURE__*/React.createElement(ActionBlock, actionBlockProps),
+    breadcrumbs: [].concat(_toConsumableArray(breadcrumbs), [{
+      text: truncate(title, 50)
+    }]),
+    title: /*#__PURE__*/React.createElement(TitleWithHelpLink, {
+      helpUrl: helpDocUrl,
+      title: title
+    })
+  });
+};
+
+var Menubar = function Menubar(_ref) {
+  var isConfigsLoading = _ref.isConfigsLoading,
+    menuBarItems = _ref.menuBarItems,
+    title = _ref.title;
+  return /*#__PURE__*/React.createElement(MenuBar, {
+    showMenu: true,
+    title: title
+  }, isConfigsLoading ? /*#__PURE__*/React.createElement("div", {
+    className: "flex items-center justify-center"
+  }, /*#__PURE__*/React.createElement(Spinner, null)) : menuBarItems);
+};
+
 function useCombinedRefs() {
   for (var _len = arguments.length, refs = new Array(_len), _key = 0; _key < _len; _key++) {
     refs[_key] = arguments[_key];
@@ -12436,8 +12497,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.createElement(NeetoUISubHeader, {
+    leftActionBlock: /*#__PURE__*/React.createElement(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>} */
 
@@ -12482,8 +12556,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,
@@ -12510,51 +12582,25 @@ var FieldsDashboard = function FieldsDashboard(_ref) {
     menuBarItems = _useFieldsDashboard.menuBarItems,
     allFields = _useFieldsDashboard.allFields,
     headerDisplayTitle = _useFieldsDashboard.headerDisplayTitle;
-  return /*#__PURE__*/React.createElement(React.Fragment, null, isMenuBarNeeded && /*#__PURE__*/React.createElement(MenuBar, {
-    showMenu: isMenuBarOpen,
+  var headerProps = {
+    allFields: allFields,
+    breadcrumbs: breadcrumbs,
+    helpDocUrl: helpDocUrl,
+    searchProps: searchProps,
+    selectedState: selectedState,
+    setIsPaneOpen: setIsPaneOpen,
+    setIsReorderPaneOpen: setIsReorderPaneOpen,
+    title: headerDisplayTitle
+  };
+  return /*#__PURE__*/React.createElement(React.Fragment, null, isMenuBarNeeded && /*#__PURE__*/React.createElement(Menubar, {
+    isConfigsLoading: isConfigsLoading,
+    menuBarItems: menuBarItems,
     title: title
-  }, isConfigsLoading ? /*#__PURE__*/React.createElement("div", {
-    className: "flex items-center justify-center"
-  }, /*#__PURE__*/React.createElement(Spinner, null)) : menuBarItems), isScreenLoading && isEmpty(fields) ? /*#__PURE__*/React.createElement("div", {
+  }), isScreenLoading && isEmpty(fields) ? /*#__PURE__*/React.createElement("div", {
     className: "flex h-screen w-full flex-grow items-center justify-center"
-  }, /*#__PURE__*/React.createElement(PageLoader, null)) : /*#__PURE__*/React.createElement(Container, null, /*#__PURE__*/React.createElement(Header, _extends({}, _objectSpread$2(_objectSpread$2({
-    breadcrumbs: breadcrumbs
-  }, isMenuBarNeeded && {
-    menuBarToggle: function menuBarToggle() {
-      return setIsMenuBarOpen(not);
-    }
-  }), {}, {
-    searchProps: searchProps
-  }), {
-    actionBlock: /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Button$1, {
-      "data-cy": "neeto-fields-reorder-button",
-      label: t("labels.reorder"),
-      style: "secondary",
-      disabled: selectedState === FIELD_STATES.inactive || !existsBy({
-        isSystem: false,
-        state: "active"
-      }, allFields),
-      onClick: function onClick() {
-        return setIsReorderPaneOpen(true);
-      }
-    })), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Button$1, {
-      "data-cy": "neeto-fields-add-button",
-      label: t("labels.addField"),
-      onClick: function onClick() {
-        return setIsPaneOpen(true);
-      }
-    }))),
-    title: /*#__PURE__*/React.createElement(TitleWithHelpLink, {
-      helpUrl: helpDocUrl,
-      title: headerDisplayTitle
-    })
-  })), showCountSubheader && /*#__PURE__*/React.createElement(SubHeader, {
-    leftActionBlock: /*#__PURE__*/React.createElement(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.createElement(FieldsTable, {
+  }, /*#__PURE__*/React.createElement(PageLoader, null)) : /*#__PURE__*/React.createElement(Container, null, /*#__PURE__*/React.createElement(Header, headerProps), showStateFilter && stateFilterTabs, showCountSubheader && /*#__PURE__*/React.createElement(Subheader, {
+    count: count
+  }), /*#__PURE__*/React.createElement(FieldsTable, {
     isLoading: isFieldsFetching || isFieldsLoading,
     rowData: isEmpty(rowData) ? fields : rowData,
     totalCount: count,