@bigbinary/neeto-fields-frontend 1.1.12 → 1.1.13

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$e(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread$e(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$e(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$e(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
 function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
 function noop$1() {}
@@ -3810,9 +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$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;
@@ -4090,7 +4091,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;
@@ -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$e(_objectSpread$e(_objectSpread$e({}, 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$e({}, 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$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: '',
@@ -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$d(_objectSpread$d({}, defaultOptions$1), options);
 }
 function getDefaults() {
   return defaultOptions$1;
@@ -4877,12 +4878,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;
@@ -4908,7 +4909,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;
@@ -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$5);
 
       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$c(_objectSpread$c({}, 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$c(_objectSpread$c({}, 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$c(_objectSpread$c({}, 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$c(_objectSpread$c({}, 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$c(_objectSpread$c({}, 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$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'];
@@ -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$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,
@@ -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$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;
@@ -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$b(_objectSpread$b(_objectSpread$b({}, 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?",
@@ -5488,6 +5491,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 +6045,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,
@@ -6049,7 +6059,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 = formik.useFormikContext();
   var submitForm = formikContext.submitForm,
     dirty = formikContext.dirty,
@@ -6091,7 +6101,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 +6109,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: 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 +6141,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 +6276,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,
@@ -6320,7 +6328,7 @@ var transformValues = function transformValues(_ref2) {
     delete allFieldValues[fieldPath];
   });
   var cleanedFieldValues = ramda.pipe(removeItemsWithNullData, removeNoiseFromValues)(neetoFieldValues);
-  return _objectSpread$a(_objectSpread$a({}, allFieldValues), {}, {
+  return _objectSpread$9(_objectSpread$9({}, allFieldValues), {}, {
     fieldValuesAttributes: cleanedFieldValues
   });
 };
@@ -6383,8 +6391,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,
@@ -6402,7 +6410,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$8(_objectSpread$8({}, field), {}, {
         formRef: formRef,
         disabled: disabled,
         isRequiredColumnName: isRequiredColumnName
@@ -6423,28 +6431,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__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
-  })));
-};
-
 var fieldUrl = function fieldUrl(fieldId) {
   return utils.buildUrl(FIELD_URL, {
     fieldId: fieldId
@@ -6525,8 +6513,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) {
@@ -6543,13 +6531,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 = reactQuery.useQueryClient();
-  return reactQuery.useMutation(fieldsApi.create, _objectSpread$8(_objectSpread$8({}, options), {}, {
+  return reactQuery.useMutation(fieldsApi.create, _objectSpread$7(_objectSpread$7({}, options), {}, {
     onSuccess: function onSuccess() {
       var _options$onSuccess;
       for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
@@ -6583,7 +6571,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$7(_objectSpread$7({}, options), {}, {
     onSuccess: function onSuccess() {
       var _options$onSuccess2;
       for (var _len2 = arguments.length, args = new Array(_len2), _key2 = 0; _key2 < _len2; _key2++) {
@@ -6596,7 +6584,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$7(_objectSpread$7({}, options), {}, {
     onSuccess: function onSuccess() {
       var _options$onSuccess3;
       for (var _len3 = arguments.length, args = new Array(_len3), _key3 = 0; _key3 < _len3; _key3++) {
@@ -6616,11 +6604,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
     });
   });
@@ -6635,7 +6623,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$6(_objectSpread$6({}, ramda.omit(["createdAt", "id", "ownerId", "ownerType", "updatedAt"], formValues)), {}, {
       kind: kind,
       name: name,
       resourceType: ramda.isEmpty(resourceType) ? undefined : resourceType,
@@ -6662,7 +6650,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$6(_objectSpread$6({}, BASIC_FIELD_FORM_VALIDATIONS), additionalValidations));
 };
 var renderFormFooter = function renderFormFooter(_ref3) {
   var onClose = _ref3.onClose,
@@ -6961,9 +6949,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>} */
 
@@ -6976,7 +6964,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 +6988,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$5(_objectSpread$5({}, initialValues), INITIAL_FIELDS),
       validationSchema: generateValidationSchema(additionalValidations),
       onSubmit: handleSubmit
     }
@@ -7018,9 +7006,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>} */
 
@@ -7035,7 +7023,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 +7061,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$4(_objectSpread$4({}, initialValues), ramda.assoc("kind", FIELD_KINDS[field.kind], field)),
       validationSchema: generateValidationSchema(additionalValidations),
       enableReinitialize: true,
       onSubmit: handleSubmit
@@ -7097,7 +7085,7 @@ var Edit = function Edit(_ref) {
   }));
 };
 
-var _excluded = ["isOpen", "selectedField"];
+var _excluded$1 = ["isOpen", "selectedField"];
 
 /** @type {React.FC<import("types").FieldsPaneProps>} */
 
@@ -7105,7 +7093,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 +7622,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 +7654,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 +7796,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 reactQuery.useQuery([QUERY_KEYS.CONFIGS], configsApi.fetchConfigs, _objectSpread$4({
+  return reactQuery.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,
@@ -7828,26 +7818,22 @@ 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(""),
-    _useState12 = _slicedToArray(_useState11, 2),
-    searchTerm = _useState12[0],
-    setSearchTerm = _useState12[1];
+    searchTerm = _useState10[0],
+    setSearchTerm = _useState10[1];
   var debouncedSearchTerm = reactUtils.useDebounce(searchTerm.trim());
   var history = reactRouterDom.useHistory();
   var _useTranslation = useTranslation(),
@@ -7885,7 +7871,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: ""
     }), {
@@ -7938,7 +7924,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$2({
       resource: resource,
       state: state
     }, params)));
@@ -8012,8 +7998,6 @@ var useFieldsDashboard = function useFieldsDashboard(_ref) {
   return {
     isPaneOpen: isPaneOpen,
     setIsPaneOpen: setIsPaneOpen,
-    isMenuBarOpen: isMenuBarOpen,
-    setIsMenuBarOpen: setIsMenuBarOpen,
     isDeleteAlertOpen: isDeleteAlertOpen,
     isReorderPaneOpen: isReorderPaneOpen,
     setIsReorderPaneOpen: setIsReorderPaneOpen,
@@ -8115,6 +8099,83 @@ var FieldsTable = function FieldsTable(_ref) {
   }));
 };
 
+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 selectedState = _ref.selectedState,
+    allFields = _ref.allFields,
+    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",
+    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(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];
@@ -12471,8 +12532,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 +12579,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 +12591,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,
@@ -12545,51 +12617,25 @@ var FieldsDashboard = function FieldsDashboard(_ref) {
     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,
+  var headerProps = {
+    allFields: allFields,
+    breadcrumbs: breadcrumbs,
+    helpDocUrl: helpDocUrl,
+    searchProps: searchProps,
+    selectedState: selectedState,
+    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,