@bigbinary/neeto-fields-frontend 1.3.41 → 1.3.43

package/dist/index.js

@@ -1,26 +1,46 @@
 import React, { useEffect, useState, useRef, useMemo, useLayoutEffect, useCallback, createContext, memo, useReducer, useContext } from 'react';
 import { useFuncDebounce, useOnClickOutside, withT, useMutationWithInvalidation, isMetaKeyPressed, useQueryParams, handleMetaClick } from '@bigbinary/neeto-commons-frontend/react-utils';
-import { Checkbox as Checkbox$1, TimePicker, DatePicker, Input, Select as Select$1, Textarea, Typography, Pane, Label, Button as Button$1, Tab, Alert, NoData, Table, Spinner } from '@bigbinary/neetoui';
+import Typography from '@bigbinary/neetoui/Typography';
 import { isNotEmpty, renameKeys, capitalize, findBy, noop as noop$1, notEquals, filterBy, toLabelAndValue, slugify, humanize, countBy, isPresent } from '@bigbinary/neeto-cist';
 import { values, isNotNil, isNil, isEmpty, prop, pluck, clone, pipe, mergeAll, omit, map, pick, assoc, not, any, head } from 'ramda';
+import NeetoUICheckbox from '@bigbinary/neetoui/Checkbox';
 import { useFormikContext, useField, FieldArray } from 'formik';
 import { t as t$1 } from 'i18next';
+import dayjs from 'dayjs';
 import * as yup from 'yup';
-import { Select, Button, ActionBlock as ActionBlock$1, Input as Input$1, Switch, Form } from '@bigbinary/neetoui/formik';
-import { joinHyphenCase, buildUrl, getQueryParams, dateFormat, hyphenize } from '@bigbinary/neeto-commons-frontend/utils';
+import DatePicker from '@bigbinary/neetoui/DatePicker';
+import TimePicker from '@bigbinary/neetoui/TimePicker';
+import { hyphenize } from '@bigbinary/neeto-commons-frontend/utils/general';
 import { Check, Delete, Reorder } from '@bigbinary/neeto-icons';
-import { useTranslation, Trans } from 'react-i18next';
+import Label from '@bigbinary/neetoui/Label';
+import Spinner from '@bigbinary/neetoui/Spinner';
+import Select from '@bigbinary/neetoui/formik/Select';
+import Input from '@bigbinary/neetoui/Input';
+import Select$1 from '@bigbinary/neetoui/Select';
+import Textarea from '@bigbinary/neetoui/Textarea';
 import { DEFAULT_PAGE_INDEX, DEFAULT_PAGE_SIZE, PLURAL } from '@bigbinary/neeto-commons-frontend/constants';
 import Container from '@bigbinary/neeto-molecules/Container';
 import PageLoader from '@bigbinary/neeto-molecules/PageLoader';
+import { useTranslation, Trans } from 'react-i18next';
+import Pane from '@bigbinary/neetoui/Pane';
+import Form from '@bigbinary/neetoui/formik/Form';
 import { useQuery } from 'react-query';
 import axios from 'axios';
+import { buildUrl, getQueryParams, dateFormat, hyphenize as hyphenize$1 } from '@bigbinary/neeto-commons-frontend/utils';
+import ActionBlock$1 from '@bigbinary/neetoui/formik/ActionBlock';
 import { v4 } from 'uuid';
+import Input$1 from '@bigbinary/neetoui/formik/Input';
+import Switch from '@bigbinary/neetoui/formik/Switch';
+import Button from '@bigbinary/neetoui/Button';
 import { buildFiltersFromURL, Bar } from '@bigbinary/neeto-filters-frontend';
 import { Link, useHistory } from 'react-router-dom';
 import MenuBar from '@bigbinary/neeto-molecules/MenuBar';
 import MoreDropdown from '@bigbinary/neeto-molecules/MoreDropdown';
+import Tab from '@bigbinary/neetoui/Tab';
+import Alert from '@bigbinary/neetoui/Alert';
 import TableWrapper from '@bigbinary/neeto-molecules/TableWrapper';
+import NoData from '@bigbinary/neetoui/NoData';
+import Table from '@bigbinary/neetoui/Table';
 import NeetoUIHeader from '@bigbinary/neeto-molecules/Header';
 import HelpPopover from '@bigbinary/neeto-molecules/HelpPopover';
 import { unstable_batchedUpdates, createPortal } from 'react-dom';
@@ -114,6 +134,20 @@ function _toConsumableArray(arr) {
   return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread();
 }
 
+var NEETO_FIELDS_URL = "/neeto_fields_engine/api/v1";
+var FIELDS_URL = "".concat(NEETO_FIELDS_URL, "/fields");
+var FIELD_VALUES_URL = "".concat(NEETO_FIELDS_URL, "/field_values");
+var FIELD_VALUE_URL = "".concat(NEETO_FIELDS_URL, "/field_values/:fieldValueId");
+var FIELD_URL = "".concat(NEETO_FIELDS_URL, "/fields/:fieldId");
+var 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 SUBMIT_FIELD_STATUS = {
+  SUBMITTING: "submitting",
+  SUCCESS: "success",
+  FAILED: "failed"
+};
+
 function asyncGeneratorStep(gen, resolve, reject, _next, _throw, key, arg) {
   try {
     var info = gen[key](arg);
@@ -633,17 +667,6 @@ var isTextType = function isTextType(kind) {
   return [KINDS.text, KINDS.decimal, KINDS.integer, KINDS.monetary, KINDS.number, KINDS.regex, KINDS.textarea].includes(kind);
 };
 
-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",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;
-var dayjs = /*@__PURE__*/getDefaultExportFromCjs(dayjs_minExports);
-
 var dateSchema = yup.date().nullable();
 var isValueEmpty = function isValueEmpty(value) {
   return typeof value === "string" && isEmpty(value.trim());
@@ -788,10 +811,13 @@ var dateTimeToString = function dateTimeToString(dateTime) {
 var getValueFromBool = function getValueFromBool(value) {
   return value === true ? t$1("neetoFields.common.yes") : t$1("neetoFields.common.no");
 };
+var getComponentDisplayName = function getComponentDisplayName(Component) {
+  return Component.displayName || Component.name || "Component";
+};
 
-var _excluded$7 = ["name", "id", "kind", "data", "individualSubmit", "formRef", "formRefs", "disabled", "isRequiredColumnName", "isInline", "onBlur"];
-function ownKeys$h(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
-function _objectSpread$h(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$h(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$h(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+var _excluded$7 = ["name", "id", "kind", "data", "individualSubmit", "formRef", "formRefs", "disabled", "isRequiredColumnName", "isInline", "onBlur", "hasMetadataWrapper"];
+function ownKeys$i(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread$i(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$i(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$i(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var useFormikFields = function useFormikFields(_ref) {
   var name = _ref.name,
     fieldId = _ref.id,
@@ -807,6 +833,8 @@ var useFormikFields = function useFormikFields(_ref) {
     isInline = _ref$isInline === void 0 ? false : _ref$isInline,
     _ref$onBlur = _ref.onBlur,
     handleBlur = _ref$onBlur === void 0 ? noop$1 : _ref$onBlur,
+    _ref$hasMetadataWrapp = _ref.hasMetadataWrapper,
+    hasMetadataWrapper = _ref$hasMetadataWrapp === void 0 ? false : _ref$hasMetadataWrapp,
     props = _objectWithoutProperties(_ref, _excluded$7);
   var formikContext = useFormikContext();
   var submitForm = formikContext.submitForm,
@@ -899,11 +927,12 @@ var useFormikFields = function useFormikFields(_ref) {
   return {
     dirty: dirty,
     handleSubmit: handleSubmit,
-    fieldProps: _objectSpread$h(_objectSpread$h({}, formikFieldProps), {}, {
+    fieldProps: _objectSpread$i(_objectSpread$i({}, formikFieldProps), {}, {
+      id: fieldId,
       error: individualSubmit ? meta.error : meta.touched && meta.error,
       value: getValueForField(formikFieldProps.value),
-      label: !isInline && capitalize(name),
-      labelProps: {
+      label: !isInline && !hasMetadataWrapper && capitalize(name),
+      labelProps: !isInline && !hasMetadataWrapper && {
         required: props[isRequiredColumnName]
       },
       autoFocus: isInline && !DIRECT_EDIT_INPUT_FIELDS.includes(kind),
@@ -921,8 +950,10 @@ var Checkbox = function Checkbox(props) {
   var _useFormikFields = useFormikFields(props),
     handleSubmit = _useFormikFields.handleSubmit,
     fieldProps = _useFormikFields.fieldProps;
-  return /*#__PURE__*/React.createElement(Checkbox$1, _extends({}, fieldProps, {
+  var submissionStatus = props.submissionStatus;
+  return /*#__PURE__*/React.createElement(NeetoUICheckbox, _extends({}, fieldProps, {
     checked: fieldProps.value,
+    disabled: submissionStatus === SUBMIT_FIELD_STATUS.SUBMITTING,
     onChange: function onChange(_ref) {
       var checked = _ref.target.checked;
       return handleSubmit(checked);
@@ -930,9 +961,60 @@ var Checkbox = function Checkbox(props) {
   }));
 };
 
+var MetadataBlock = function MetadataBlock(_ref) {
+  var labelProps = _ref.labelProps,
+    label = _ref.label,
+    fieldId = _ref.fieldId,
+    children = _ref.children,
+    submissionStatus = _ref.submissionStatus,
+    isInline = _ref.isInline;
+  return /*#__PURE__*/React.createElement("div", {
+    className: "w-full space-y-2"
+  }, !isInline && /*#__PURE__*/React.createElement("div", {
+    className: "flex items-center gap-2"
+  }, /*#__PURE__*/React.createElement(Label, _extends({
+    "data-cy": "".concat(hyphenize(label), "-label"),
+    htmlFor: fieldId
+  }, labelProps), label), /*#__PURE__*/React.createElement("div", {
+    className: "inline-flex h-6 items-center"
+  }, submissionStatus === SUBMIT_FIELD_STATUS.SUBMITTING && /*#__PURE__*/React.createElement(Spinner, {
+    className: "neeto-fields-nano__metadata-card__spinner"
+  }), submissionStatus === SUBMIT_FIELD_STATUS.SUCCESS && /*#__PURE__*/React.createElement(Check, {
+    className: "neeto-ui-text-success-500",
+    size: 20
+  }))), children);
+};
+
+var WithMetadataBlock = function WithMetadataBlock(Component) {
+  var withMetadataBlockWrapper = function withMetadataBlockWrapper(props) {
+    var submissionStatus = props.submissionStatus,
+      _props$isInline = props.isInline,
+      isInline = _props$isInline === void 0 ? false : _props$isInline,
+      _props$isRequiredColu = props.isRequiredColumnName,
+      isRequiredColumnName = _props$isRequiredColu === void 0 ? "isRequired" : _props$isRequiredColu,
+      name = props.name,
+      fieldId = props.id;
+    var label = !isInline && capitalize(name);
+    var labelProps = {
+      required: props[isRequiredColumnName]
+    };
+    return /*#__PURE__*/React.createElement(MetadataBlock, {
+      fieldId: fieldId,
+      isInline: isInline,
+      label: label,
+      labelProps: labelProps,
+      submissionStatus: submissionStatus
+    }, /*#__PURE__*/React.createElement(Component, _extends({}, props, {
+      hasMetadataWrapper: true
+    })));
+  };
+  withMetadataBlockWrapper.displayName = "withMetadataBlockWrapper(".concat(getComponentDisplayName(Component), ")");
+  return withMetadataBlockWrapper;
+};
+
 var _excluded$6 = ["onBlur"];
-function ownKeys$g(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
-function _objectSpread$g(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$g(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$g(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function ownKeys$h(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread$h(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$h(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$h(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var DateOrTime = function DateOrTime(props) {
   var isInline = props.isInline;
   var _useState = useState(isInline),
@@ -985,7 +1067,7 @@ var DateOrTime = function DateOrTime(props) {
     };
   }();
   if (props.kind === KINDS.time) {
-    return /*#__PURE__*/React.createElement(TimePicker, _extends({}, _objectSpread$g(_objectSpread$g({}, fieldProps), {}, {
+    return /*#__PURE__*/React.createElement(TimePicker, _extends({}, _objectSpread$h(_objectSpread$h({}, fieldProps), {}, {
       onOpenChange: onOpenChange
     }), {
       use12Hours: true,
@@ -994,7 +1076,7 @@ var DateOrTime = function DateOrTime(props) {
       onChange: handleChange
     }));
   } else if (props.kind === KINDS.date) {
-    return /*#__PURE__*/React.createElement(DatePicker, _extends({}, _objectSpread$g(_objectSpread$g({}, fieldProps), {}, {
+    return /*#__PURE__*/React.createElement(DatePicker, _extends({}, _objectSpread$h(_objectSpread$h({}, fieldProps), {}, {
       onOpenChange: onOpenChange
     }), {
       open: isOpen,
@@ -1004,13 +1086,14 @@ var DateOrTime = function DateOrTime(props) {
   return /*#__PURE__*/React.createElement(DatePicker, _extends({
     showTime: true,
     timeFormat: "h:mm A"
-  }, _objectSpread$g(_objectSpread$g({}, fieldProps), {}, {
+  }, _objectSpread$h(_objectSpread$h({}, fieldProps), {}, {
     onOpenChange: onOpenChange
   }), {
     open: isOpen,
     onChange: handleChange
   }));
 };
+var DateOrTimeInput = WithMetadataBlock(DateOrTime);
 
 var MultiOption = function MultiOption(props) {
   var _useFormikFields = useFormikFields(props),
@@ -1026,36 +1109,25 @@ var MultiOption = function MultiOption(props) {
     }
   }));
 };
+var MultiOptionInput = WithMetadataBlock(MultiOption);
 
 var Number$1 = function Number(props) {
   var _useFormikFields = useFormikFields(props),
     handleSubmit = _useFormikFields.handleSubmit,
     fieldProps = _useFormikFields.fieldProps,
     dirty = _useFormikFields.dirty;
-  var individualSubmit = props.individualSubmit,
-    isInline = props.isInline;
-  var isNotInline = !isInline;
-  var showSubmitButton = isNotInline && individualSubmit && dirty;
-  return /*#__PURE__*/React.createElement(Input, _extends({}, fieldProps, isNotInline && {
+  return /*#__PURE__*/React.createElement(Input, _extends({}, fieldProps, {
+    type: "number",
     onBlur: function onBlur() {
       return dirty && handleSubmit();
     }
-  }, {
-    type: "number",
-    suffix: showSubmitButton && /*#__PURE__*/React.createElement(Button, {
-      "data-cy": joinHyphenCase(fieldProps.label, "check-button"),
-      icon: Check,
-      style: "text",
-      onClick: function onClick() {
-        return handleSubmit();
-      }
-    })
   }));
 };
+var NumberInput = WithMetadataBlock(Number$1);
 
 var _excluded$5 = ["onBlur"];
 var withOnClickOutsideWrapper = function withOnClickOutsideWrapper(Component) {
-  var Wrapper = function Wrapper(_ref) {
+  var WithOnClickOutsideWrapper = function WithOnClickOutsideWrapper(_ref) {
     var _ref$onBlur = _ref.onBlur,
       onBlur = _ref$onBlur === void 0 ? noop$1 : _ref$onBlur,
       props = _objectWithoutProperties(_ref, _excluded$5);
@@ -1072,7 +1144,8 @@ var withOnClickOutsideWrapper = function withOnClickOutsideWrapper(Component) {
       type: "range"
     }));
   };
-  return Wrapper;
+  WithOnClickOutsideWrapper.displayName = "WithOnClickOutsideWrapper(".concat(getComponentDisplayName(Component), ")");
+  return WithOnClickOutsideWrapper;
 };
 var DateRangePicker = withOnClickOutsideWrapper(DatePicker);
 var TimeRangePicker = withOnClickOutsideWrapper(TimePicker);
@@ -1103,6 +1176,7 @@ var RangePicker = function RangePicker(props) {
     onChange: handleChange
   }));
 };
+var RangePickerInput = WithMetadataBlock(RangePicker);
 
 var SingleOption = function SingleOption(props) {
   var _useFormikFields = useFormikFields(props),
@@ -1118,13 +1192,13 @@ var SingleOption = function SingleOption(props) {
     }
   }));
 };
+var SingleOptionInput = WithMetadataBlock(SingleOption);
 
 var Text = function Text(props) {
   var _useFormikFields = useFormikFields(props),
     handleSubmit = _useFormikFields.handleSubmit,
     fieldProps = _useFormikFields.fieldProps,
     dirty = _useFormikFields.dirty;
-  var isInline = props.isInline;
   var handleKeyDown = function handleKeyDown(event) {
     if (event.key !== "Enter" || event.shiftKey) return;
     event.preventDefault();
@@ -1140,13 +1214,10 @@ var Text = function Text(props) {
     size: "small",
     style: {
       resize: "none"
-    }
-    // Inline inputs are already saved on blur and this could override that onBlur handler if this condition is not added.
-  }, !isInline && {
+    },
     onBlur: function onBlur() {
       return dirty && handleSubmit();
-    }
-  }, {
+    },
     onFocus: function onFocus(_ref) {
       var target = _ref.target;
       return handleFocus(target);
@@ -1154,46 +1225,40 @@ var Text = function Text(props) {
     onKeyDown: handleKeyDown
   }));
 };
+var TextInput = WithMetadataBlock(Text);
 
 var TextArea = function TextArea(props) {
-  var _useTranslation = useTranslation(),
-    t = _useTranslation.t;
   var _useFormikFields = useFormikFields(props),
     handleSubmit = _useFormikFields.handleSubmit,
     fieldProps = _useFormikFields.fieldProps,
     dirty = _useFormikFields.dirty;
-  var individualSubmit = props.individualSubmit,
-    isInline = props.isInline;
-  var showSubmitButton = !isInline && individualSubmit && dirty;
-  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Textarea, fieldProps), showSubmitButton && /*#__PURE__*/React.createElement(Button, {
-    className: "m-auto mt-2",
-    label: t("neetoFields.labels.submit"),
-    size: "small",
-    onClick: function onClick() {
-      return handleSubmit();
+  return /*#__PURE__*/React.createElement(Textarea, _extends({}, fieldProps, {
+    onBlur: function onBlur() {
+      return dirty && handleSubmit();
     }
   }));
 };
+var TextAreaInput = WithMetadataBlock(TextArea);
 
-function ownKeys$f(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
-function _objectSpread$f(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$f(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$f(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function ownKeys$g(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread$g(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$g(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$g(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var standardComponents = {
-  text: Text,
-  regex: Text,
-  textarea: TextArea,
-  text_area: TextArea,
+  text: TextInput,
+  regex: TextInput,
+  textarea: TextAreaInput,
+  text_area: TextAreaInput,
   // TODO: Remove text-area after integration in all hosts.
-  number: Number$1,
-  monetary: Number$1,
-  integer: Number$1,
-  decimal: Number$1,
-  date: DateOrTime,
-  time: DateOrTime,
-  datetime: DateOrTime,
-  single_option: SingleOption,
-  multi_option: MultiOption,
-  date_range: RangePicker,
-  time_range: RangePicker,
+  number: NumberInput,
+  monetary: NumberInput,
+  integer: NumberInput,
+  decimal: NumberInput,
+  date: DateOrTimeInput,
+  time: DateOrTimeInput,
+  datetime: DateOrTimeInput,
+  single_option: SingleOptionInput,
+  multi_option: MultiOptionInput,
+  date_range: RangePickerInput,
+  time_range: RangePickerInput,
   checkbox: Checkbox
 };
 var getFieldInput = function getFieldInput(_ref) {
@@ -1227,7 +1292,7 @@ var transformValues = function transformValues(_ref2) {
     delete allFieldValues[fieldPath];
   });
   var cleanedFieldValues = pipe(removeItemsWithNullData, removeNoiseFromValues)(neetoFieldValues);
-  return _objectSpread$f(_objectSpread$f({}, allFieldValues), {}, {
+  return _objectSpread$g(_objectSpread$g({}, allFieldValues), {}, {
     fieldValuesAttributes: cleanedFieldValues
   });
 };
@@ -1290,8 +1355,8 @@ var neetoFieldsUtils = {
   transformValues: transformValues
 };
 
-function ownKeys$e(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
-function _objectSpread$e(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$e(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$e(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function ownKeys$f(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread$f(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$f(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$f(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var FieldInputs = withT(function (_ref) {
   var t = _ref.t,
     _ref$customComponents = _ref.customComponents,
@@ -1308,7 +1373,7 @@ var FieldInputs = withT(function (_ref) {
     if (Field) {
       return /*#__PURE__*/React.createElement(Field, _extends({
         key: field.id
-      }, _objectSpread$e(_objectSpread$e({}, field), {}, {
+      }, _objectSpread$f(_objectSpread$f({}, field), {}, {
         disabled: disabled,
         formRef: formRef,
         isRequiredColumnName: isRequiredColumnName
@@ -1321,17 +1386,8 @@ var FieldInputs = withT(function (_ref) {
   });
 });
 
-var NEETO_FIELDS_URL = "/neeto_fields_engine/api/v1";
-var FIELDS_URL = "".concat(NEETO_FIELDS_URL, "/fields");
-var FIELD_VALUES_URL = "".concat(NEETO_FIELDS_URL, "/field_values");
-var FIELD_VALUE_URL = "".concat(NEETO_FIELDS_URL, "/field_values/:fieldValueId");
-var FIELD_URL = "".concat(NEETO_FIELDS_URL, "/fields/:fieldId");
-var 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");
-
-function ownKeys$d(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
-function _objectSpread$d(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$d(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$d(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function ownKeys$e(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread$e(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$e(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$e(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var fieldUrl = function fieldUrl(fieldId) {
   return buildUrl(FIELD_URL, {
     fieldId: fieldId
@@ -1350,7 +1406,7 @@ var fetch$1 = function fetch(_ref) {
     _ref$pageProps = _ref.pageProps,
     pageProps = _ref$pageProps === void 0 ? {} : _ref$pageProps;
   return axios.get(FIELDS_URL, {
-    params: _objectSpread$d({
+    params: _objectSpread$e({
       resourceType: resourceType,
       ownerId: ownerId,
       state: state,
@@ -1415,8 +1471,8 @@ var QUERY_KEYS = {
 var DEFAULT_STALE_TIME = 3600000; // 1 hour
 
 var _excluded$4 = ["prefixQueryKeys"];
-function ownKeys$c(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
-function _objectSpread$c(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$c(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$c(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function ownKeys$d(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread$d(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$d(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$d(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var FIELDS = QUERY_KEYS.FIELDS,
   DEPENDENCIES = QUERY_KEYS.DEPENDENCIES;
 var useFetchFields = function useFetchFields(_ref, options) {
@@ -1425,12 +1481,12 @@ var useFetchFields = function useFetchFields(_ref, options) {
     params = _objectWithoutProperties(_ref, _excluded$4);
   return useQuery([FIELDS].concat(_toConsumableArray(prefixQueryKeys), [params]), function () {
     return fieldsApi.fetch(params);
-  }, _objectSpread$c({
+  }, _objectSpread$d({
     staleTime: DEFAULT_STALE_TIME
   }, options));
 };
 var useCreateField = function useCreateField(options) {
-  return useMutationWithInvalidation(fieldsApi.create, _objectSpread$c({
+  return useMutationWithInvalidation(fieldsApi.create, _objectSpread$d({
     keysToInvalidate: [FIELDS]
   }, options));
 };
@@ -1456,12 +1512,12 @@ var useFetchDependencies = function useFetchDependencies(_ref3, options) {
   }, options);
 };
 var useUpdateField = function useUpdateField(options) {
-  return useMutationWithInvalidation(fieldsApi.update, _objectSpread$c({
+  return useMutationWithInvalidation(fieldsApi.update, _objectSpread$d({
     keysToInvalidate: [FIELDS]
   }, options));
 };
 var useDestroyField = function useDestroyField(options) {
-  return useMutationWithInvalidation(fieldsApi.destroy, _objectSpread$c({
+  return useMutationWithInvalidation(fieldsApi.destroy, _objectSpread$d({
     keysToInvalidate: [FIELDS]
   }, options));
 };
@@ -1471,11 +1527,11 @@ var useReorderFields = function useReorderFields() {
   });
 };
 
-function ownKeys$b(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
-function _objectSpread$b(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$b(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$b(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function ownKeys$c(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread$c(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$c(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$c(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var arrangeOptionsDisplayOrder = function arrangeOptionsDisplayOrder(options) {
   return options.map(function (option, index) {
-    return _objectSpread$b(_objectSpread$b({}, option), {}, {
+    return _objectSpread$c(_objectSpread$c({}, option), {}, {
       displayOrder: index
     });
   });
@@ -1490,7 +1546,7 @@ var buildPayload = function buildPayload(_ref) {
   var name = formValues.name.trim();
   return {
     ownerId: isEmpty(ownerId) ? undefined : ownerId,
-    field: _objectSpread$b(_objectSpread$b({}, omit(["createdAt", "id", "ownerId", "ownerType", "updatedAt"], formValues)), {}, {
+    field: _objectSpread$c(_objectSpread$c({}, omit(["createdAt", "id", "ownerId", "ownerType", "updatedAt"], formValues)), {}, {
       kind: kind,
       name: name,
       resourceType: isEmpty(resourceType) ? undefined : resourceType,
@@ -1516,7 +1572,7 @@ var getPermittedKinds = function getPermittedKinds(_ref2) {
   }, values(filteredKinds));
 };
 var generateValidationSchema = function generateValidationSchema(additionalValidations) {
-  return yup.object().shape(_objectSpread$b(_objectSpread$b({}, BASIC_FIELD_FORM_VALIDATIONS), additionalValidations));
+  return yup.object().shape(_objectSpread$c(_objectSpread$c({}, BASIC_FIELD_FORM_VALIDATIONS), additionalValidations));
 };
 var renderFormFooter = function renderFormFooter(_ref3) {
   var onClose = _ref3.onClose,
@@ -1727,7 +1783,7 @@ var AdditionalInputs = function AdditionalInputs() {
           disabled: isSystem,
           name: "data.".concat(index, ".label"),
           placeholder: t("neetoFields.placeholders.enterAnOption"),
-          suffix: options.length > 1 && /*#__PURE__*/React.createElement(Button$1, {
+          suffix: options.length > 1 && /*#__PURE__*/React.createElement(Button, {
             icon: Delete,
             style: "text",
             onClick: function onClick() {
@@ -1738,7 +1794,7 @@ var AdditionalInputs = function AdditionalInputs() {
             return handleKeyDown(event, arrayHelpers);
           }
         })));
-      }), /*#__PURE__*/React.createElement(Button$1, {
+      }), /*#__PURE__*/React.createElement(Button, {
         fullWidth: true,
         className: "mb-6 border-dashed text-xs uppercase",
         "data-cy": "neeto-fields-add-more-option-button",
@@ -1826,8 +1882,8 @@ var FieldForm = function FieldForm(_ref) {
 };
 
 var _excluded$3 = ["resourceType", "allowedKinds", "ownerId", "additionalValidations", "initialValues", "onClose", "onMutationSuccess"];
-function ownKeys$a(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
-function _objectSpread$a(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$a(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$a(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function ownKeys$b(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread$b(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$b(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$b(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 
 /** @type {React.FC<import("types").AddProps>} */
 
@@ -1864,7 +1920,7 @@ var Add = function Add(_ref) {
     style: "h2"
   }, t("neetoFields.titles.addField"))), /*#__PURE__*/React.createElement(Form, {
     formikProps: {
-      initialValues: _objectSpread$a(_objectSpread$a({}, initialValues), INITIAL_FIELDS),
+      initialValues: _objectSpread$b(_objectSpread$b({}, initialValues), INITIAL_FIELDS),
       validationSchema: generateValidationSchema(additionalValidations),
       onSubmit: handleSubmit
     }
@@ -1881,8 +1937,8 @@ var Add = function Add(_ref) {
 };
 
 var _excluded$2 = ["fieldId", "allowedKinds", "ownerId", "additionalValidations", "initialValues", "onClose", "onMutationSuccess"];
-function ownKeys$9(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
-function _objectSpread$9(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$9(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$9(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function ownKeys$a(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread$a(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$a(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$a(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 
 /** @type {React.FC<import("types").EditProps>} */
 
@@ -1935,7 +1991,7 @@ var Edit = function Edit(_ref) {
     style: "h2"
   }, t("neetoFields.titles.editField"))), isLoading ? /*#__PURE__*/React.createElement(PageLoader, null) : /*#__PURE__*/React.createElement(Form, {
     formikProps: {
-      initialValues: _objectSpread$9(_objectSpread$9({}, initialValues), assoc("kind", FIELD_KINDS[field.kind], field)),
+      initialValues: _objectSpread$a(_objectSpread$a({}, initialValues), assoc("kind", FIELD_KINDS[field.kind], field)),
       validationSchema: generateValidationSchema(additionalValidations),
       enableReinitialize: true,
       onSubmit: handleSubmit
@@ -1958,8 +2014,8 @@ var Edit = function Edit(_ref) {
 };
 
 var _excluded$1 = ["isOpen", "selectedField"];
-function ownKeys$8(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
-function _objectSpread$8(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$8(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$8(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function ownKeys$9(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread$9(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$9(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$9(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 
 /** @type {React.FC<import("types").FieldsPaneProps>} */
 
@@ -1973,11 +2029,11 @@ var FieldsPane = function FieldsPane(_ref) {
     isOpen: isOpen,
     initialFocusRef: initialFocusField,
     onClose: props.onClose
-  }, isEmpty(selectedField) ? /*#__PURE__*/React.createElement(Add, _objectSpread$8(_objectSpread$8({}, props), {}, {
+  }, isEmpty(selectedField) ? /*#__PURE__*/React.createElement(Add, _objectSpread$9(_objectSpread$9({}, props), {}, {
     initialFocusField: initialFocusField
   })) : /*#__PURE__*/React.createElement(Edit, _extends({
     fieldId: selectedField === null || selectedField === void 0 ? void 0 : selectedField.id
-  }, _objectSpread$8(_objectSpread$8({}, props), {}, {
+  }, _objectSpread$9(_objectSpread$9({}, props), {}, {
     initialFocusField: initialFocusField
   }))));
 };
@@ -2697,16 +2753,16 @@ var configsApi = {
   fetchConfigs: fetchConfigs
 };
 
-function ownKeys$7(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
-function _objectSpread$7(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$7(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$7(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function ownKeys$8(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread$8(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$8(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$8(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var useFetchConfigs = function useFetchConfigs(options) {
-  return useQuery([QUERY_KEYS.CONFIGS], configsApi.fetchConfigs, _objectSpread$7({
+  return useQuery([QUERY_KEYS.CONFIGS], configsApi.fetchConfigs, _objectSpread$8({
     staleTime: DEFAULT_STALE_TIME
   }, options));
 };
 
-function ownKeys$6(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
-function _objectSpread$6(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$6(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$6(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function ownKeys$7(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread$7(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$7(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$7(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var useFieldsDashboard = function useFieldsDashboard(_ref) {
   var buildColumnData = _ref.buildColumnData,
     isOwnerBased = _ref.isOwnerBased,
@@ -2829,7 +2885,7 @@ var useFieldsDashboard = function useFieldsDashboard(_ref) {
     defaultColumns: defaultColumns
   });
   var handleBlockClick = function handleBlockClick(params) {
-    return handleMetaClick(history, buildUrl("", _objectSpread$6({
+    return handleMetaClick(history, buildUrl("", _objectSpread$7({
       resource: resource,
       state: state
     }, params)));
@@ -2972,8 +3028,8 @@ var DeleteAlert = function DeleteAlert(_ref) {
   });
 };
 
-function ownKeys$5(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
-function _objectSpread$5(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$5(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$5(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function ownKeys$6(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread$6(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$6(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$6(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var FieldsTable = function FieldsTable(_ref) {
   var totalCount = _ref.totalCount,
     isFetched = _ref.isFetched,
@@ -3027,7 +3083,7 @@ var FieldsTable = function FieldsTable(_ref) {
     currentPageNumber: page,
     defaultPageSize: pageSize,
     handlePageChange: function handlePageChange(page) {
-      return setPageProps(_objectSpread$5(_objectSpread$5({}, pageProps), {}, {
+      return setPageProps(_objectSpread$6(_objectSpread$6({}, pageProps), {}, {
         page: page
       }));
     },
@@ -3044,7 +3100,7 @@ var ActionBlock = function ActionBlock(_ref) {
     t = _useTranslation.t;
   return /*#__PURE__*/React.createElement("div", {
     className: "flex flex-shrink-0 items-center gap-3"
-  }, /*#__PURE__*/React.createElement(Button$1, {
+  }, /*#__PURE__*/React.createElement(Button, {
     "data-cy": "neeto-fields-reorder-button",
     disabled: !reorderable,
     label: t("neetoFields.labels.reorder"),
@@ -3052,7 +3108,7 @@ var ActionBlock = function ActionBlock(_ref) {
     onClick: function onClick() {
       return setIsReorderPaneOpen(true);
     }
-  }), /*#__PURE__*/React.createElement(Button$1, {
+  }), /*#__PURE__*/React.createElement(Button, {
     "data-cy": "neeto-fields-add-button",
     label: t("neetoFields.labels.addField"),
     onClick: function onClick() {
@@ -7332,8 +7388,8 @@ function normalizeLocalDisabled(localDisabled, globalDisabled) {
 
 [KeyboardCode.Down, KeyboardCode.Right, KeyboardCode.Up, KeyboardCode.Left];
 
-function ownKeys$4(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
-function _objectSpread$4(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$4(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$4(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function ownKeys$5(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread$5(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$5(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$5(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var FieldBlock = function FieldBlock(_ref) {
   var field = _ref.field,
     index = _ref.index,
@@ -7356,7 +7412,7 @@ var FieldBlock = function FieldBlock(_ref) {
   };
   return /*#__PURE__*/React.createElement("div", _extends({
     ref: setNodeRef
-  }, _objectSpread$4(_objectSpread$4({
+  }, _objectSpread$5(_objectSpread$5({
     style: style
   }, attributes), listeners), {
     className: "neeto-ui-text-gray-800 mb-3 flex w-full items-center space-x-4 font-medium",
@@ -7458,13 +7514,13 @@ var ReorderPane = function ReorderPane(_ref) {
     });
   }))))), /*#__PURE__*/React.createElement(Pane.Footer, {
     className: "flex items-center space-x-2"
-  }, /*#__PURE__*/React.createElement(Button$1, {
+  }, /*#__PURE__*/React.createElement(Button, {
     "data-cy": "save-changes-button",
     disabled: initialStateRef.current === fields,
     label: t("neetoFields.labels.saveChanges"),
     loading: isSubmitting,
     onClick: handleReorderSave
-  }), /*#__PURE__*/React.createElement(Button$1, {
+  }), /*#__PURE__*/React.createElement(Button, {
     "data-cy": "cancel-button",
     label: t("neetoFields.labels.cancel"),
     style: "text",
@@ -7661,37 +7717,93 @@ var fieldValuesApi = {
   update: update
 };
 
-function ownKeys$3(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
-function _objectSpread$3(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$3(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$3(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function ownKeys$4(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread$4(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$4(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$4(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var useCreateFieldValue = function useCreateFieldValue(options) {
-  return useMutationWithInvalidation(fieldValuesApi.create, _objectSpread$3({
+  return useMutationWithInvalidation(fieldValuesApi.create, _objectSpread$4({
     keysToInvalidate: [[QUERY_KEYS.FIELD_VALUES]]
   }, options));
 };
 var useUpdateFieldValue = function useUpdateFieldValue(options) {
-  return useMutationWithInvalidation(fieldValuesApi.update, _objectSpread$3({
+  return useMutationWithInvalidation(fieldValuesApi.update, _objectSpread$4({
     keysToInvalidate: [[QUERY_KEYS.FIELD_VALUES]]
   }, options));
 };
 var useDeleteFieldValue = function useDeleteFieldValue(options) {
-  return useMutationWithInvalidation(fieldValuesApi.destroy, _objectSpread$3({
+  return useMutationWithInvalidation(fieldValuesApi.destroy, _objectSpread$4({
     keysToInvalidate: [[QUERY_KEYS.FIELD_VALUES]]
   }, options));
 };
 
+function ownKeys$3(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread$3(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$3(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$3(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var useFieldValues = function useFieldValues(_ref) {
   var resourceId = _ref.resourceId,
     resourceType = _ref.resourceType,
     ownerId = _ref.ownerId,
-    queryOptions = _ref.queryOptions;
-  var _useCreateFieldValue = useCreateFieldValue(queryOptions),
+    _ref$queryOptions = _ref.queryOptions,
+    queryOptions = _ref$queryOptions === void 0 ? {} : _ref$queryOptions;
+  var _useState = useState({}),
+    _useState2 = _slicedToArray(_useState, 2),
+    submittingFieldDetails = _useState2[0],
+    setSubmittingFieldDetails = _useState2[1];
+  var onMutationSuccess = function onMutationSuccess() {
+    var _response$fieldValue, _queryOptions$onSucce;
+    for (var _len = arguments.length, callbackArguments = new Array(_len), _key = 0; _key < _len; _key++) {
+      callbackArguments[_key] = arguments[_key];
+    }
+    var _callbackArguments$ = callbackArguments[0],
+      response = _callbackArguments$ === void 0 ? {} : _callbackArguments$;
+    setSubmittingFieldDetails(assoc((_response$fieldValue = response.fieldValue) === null || _response$fieldValue === void 0 ? void 0 : _response$fieldValue.fieldId, {
+      status: SUBMIT_FIELD_STATUS.SUCCESS
+    }));
+    (_queryOptions$onSucce = queryOptions.onSuccess) === null || _queryOptions$onSucce === void 0 || _queryOptions$onSucce.call.apply(_queryOptions$onSucce, [queryOptions].concat(callbackArguments));
+  };
+  var onMutationError = function onMutationError() {
+    var _payload$payload, _queryOptions$onError;
+    for (var _len2 = arguments.length, callbackArguments = new Array(_len2), _key2 = 0; _key2 < _len2; _key2++) {
+      callbackArguments[_key2] = arguments[_key2];
+    }
+    callbackArguments[0];
+      var _callbackArguments$2 = callbackArguments[1],
+      payload = _callbackArguments$2 === void 0 ? {} : _callbackArguments$2;
+    setSubmittingFieldDetails(assoc((_payload$payload = payload.payload) === null || _payload$payload === void 0 || (_payload$payload = _payload$payload.fieldValue) === null || _payload$payload === void 0 ? void 0 : _payload$payload.fieldId, {
+      status: SUBMIT_FIELD_STATUS.FAILED
+    }));
+    (_queryOptions$onError = queryOptions.onError) === null || _queryOptions$onError === void 0 || _queryOptions$onError.call.apply(_queryOptions$onError, [queryOptions].concat(callbackArguments));
+  };
+  var onSettled = function onSettled() {
+    var _response$fieldValue2, _request$payload, _queryOptions$onSettl;
+    for (var _len3 = arguments.length, callbackArguments = new Array(_len3), _key3 = 0; _key3 < _len3; _key3++) {
+      callbackArguments[_key3] = arguments[_key3];
+    }
+    var _callbackArguments$3 = callbackArguments[0],
+      response = _callbackArguments$3 === void 0 ? {} : _callbackArguments$3;
+      callbackArguments[1];
+      var _callbackArguments$4 = callbackArguments[2],
+      request = _callbackArguments$4 === void 0 ? {} : _callbackArguments$4;
+    var fieldId = ((_response$fieldValue2 = response.fieldValue) === null || _response$fieldValue2 === void 0 ? void 0 : _response$fieldValue2.fieldId) || ((_request$payload = request.payload) === null || _request$payload === void 0 || (_request$payload = _request$payload.fieldValue) === null || _request$payload === void 0 ? void 0 : _request$payload.fieldId);
+    setTimeout(function () {
+      return setSubmittingFieldDetails(omit([fieldId]));
+    }, 5000);
+    (_queryOptions$onSettl = queryOptions.onSettled) === null || _queryOptions$onSettl === void 0 || _queryOptions$onSettl.call.apply(_queryOptions$onSettl, [queryOptions].concat(callbackArguments));
+  };
+  var updatedQueryOptions = _objectSpread$3(_objectSpread$3({}, queryOptions), {}, {
+    onSuccess: onMutationSuccess,
+    onError: onMutationError,
+    onSettled: onSettled
+  });
+  var _useCreateFieldValue = useCreateFieldValue(updatedQueryOptions),
     createFieldValue = _useCreateFieldValue.mutate;
-  var _useUpdateFieldValue = useUpdateFieldValue(queryOptions),
+  var _useUpdateFieldValue = useUpdateFieldValue(updatedQueryOptions),
     updateFieldValue = _useUpdateFieldValue.mutate;
-  var _useDeleteFieldValue = useDeleteFieldValue(queryOptions),
+  var _useDeleteFieldValue = useDeleteFieldValue(updatedQueryOptions),
     deleteFieldValue = _useDeleteFieldValue.mutate;
   var handleSubmit = function handleSubmit(field, values$1) {
     var fieldValue = head(values(values$1));
+    setSubmittingFieldDetails(assoc(fieldValue.fieldId, {
+      status: SUBMIT_FIELD_STATUS.SUBMITTING
+    }));
     var payload = {
       fieldValue: fieldValue,
       resource: resourceType,
@@ -7711,7 +7823,8 @@ var useFieldValues = function useFieldValues(_ref) {
     }
   };
   return {
-    handleSubmit: handleSubmit
+    handleSubmit: handleSubmit,
+    submittingFieldDetails: submittingFieldDetails
   };
 };
 
@@ -7869,7 +7982,8 @@ var FieldValuesContainer = function FieldValuesContainer(_ref) {
       ownerId: ownerId,
       queryOptions: queryOptions
     }),
-    handleSubmit = _useFieldValues.handleSubmit;
+    handleSubmit = _useFieldValues.handleSubmit,
+    submittingFieldDetails = _useFieldValues.submittingFieldDetails;
   var fields = propFields || fetchedFields;
   return /*#__PURE__*/React.createElement("div", {
     className: classnames("space-y-3 py-3", {
@@ -7883,6 +7997,7 @@ var FieldValuesContainer = function FieldValuesContainer(_ref) {
       customComponents: customComponents
     });
     if (Field) {
+      var _submittingFieldDetai;
       return /*#__PURE__*/React.createElement("div", {
         className: classnames(fieldClassName, "space-y-1"),
         key: field.id
@@ -7900,7 +8015,8 @@ var FieldValuesContainer = function FieldValuesContainer(_ref) {
         formRefs: formRefs,
         isRequiredColumnName: isRequiredColumnName
       }), {
-        individualSubmit: true
+        individualSubmit: true,
+        submissionStatus: (_submittingFieldDetai = submittingFieldDetails[field.id]) === null || _submittingFieldDetai === void 0 ? void 0 : _submittingFieldDetai.status
       })), /*#__PURE__*/React.createElement(BlockNavigation, {
         blockNavigation: blockNavigation,
         blockNavigationAlertProps: blockNavigationAlertProps
@@ -8004,7 +8120,7 @@ var InlineFieldValueInput = function InlineFieldValueInput(_ref2) {
     CustomDisplayComponent = _ref3$component === void 0 ? null : _ref3$component;
   var DisplayComponent = CustomDisplayComponent || DefaultDisplayComponent;
   return isEditable ? /*#__PURE__*/React.createElement("div", {
-    "data-cy": "inline-field-value-input-".concat(hyphenize(field.name))
+    "data-cy": "inline-field-value-input-".concat(hyphenize$1(field.name))
   }, /*#__PURE__*/React.createElement(FieldValueInputWrapper, {
     field: field,
     fieldValues: fieldValues,
@@ -8032,7 +8148,7 @@ var InlineFieldValueInput = function InlineFieldValueInput(_ref2) {
 
 var e=[],t=[];function n(n,r){if(n&&"undefined"!=typeof document){var a,s=!0===r.prepend?"prepend":"append",d=!0===r.singleTag,i="string"==typeof r.container?document.querySelector(r.container):document.getElementsByTagName("head")[0];if(d){var u=e.indexOf(i);-1===u&&(u=e.push(i)-1,t[u]={}),a=t[u]&&t[u][s]?t[u][s]:t[u][s]=c();}else a=c();65279===n.charCodeAt(0)&&(n=n.substring(1)),a.styleSheet?a.styleSheet.cssText+=n:a.appendChild(document.createTextNode(n));}function c(){var e=document.createElement("style");if(e.setAttribute("type","text/css"),r.attributes)for(var t=Object.keys(r.attributes),n=0;n<t.length;n++)e.setAttribute(t[n],r.attributes[t[n]]);var a="prepend"===s?"afterbegin":"beforeend";return i.insertAdjacentElement(a,e),e}}
 
-var css = ".neeto-fields-nano-adaptive-input textarea{--neeto-ui-input-line-height:1.5}.neeto-fields-nano-adaptive-input .neeto-ui-input.neeto-ui-input--small{--neeto-ui-textarea-padding-x:8px;--neeto-ui-textarea-padding-y:4px}.neeto-fields-nano-adaptive-input .neeto-ui-input.neeto-ui-input--medium{--neeto-ui-textarea-padding-x:8px;--neeto-ui-textarea-padding-y:5px}.neeto-fields-nano-adaptive-input .neeto-ui-input.neeto-ui-input--large{--neeto-ui-textarea-padding-x:12px;--neeto-ui-textarea-padding-y:8px}\n/*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImFwcC9qYXZhc2NyaXB0L3N0eWxlc2hlZXRzL2NvbXBvbmVudHMvX2FkYXB0aXZlX2lucHV0LnNjc3MiLCJhcHAvamF2YXNjcmlwdC9zdHlsZXNoZWV0cy9hcHBsaWNhdGlvbi5zY3NzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUNFLDJDQUNFLGdDQ0FKLENESUksd0VBQ0UsaUNBQUEsQ0FDQSxpQ0NGTixDREtJLHlFQUNFLGlDQUFBLENBQ0EsaUNDSE4sQ0RNSSx3RUFDRSxrQ0FBQSxDQUNBLGlDQ0pOIiwic291cmNlc0NvbnRlbnQiOlsiLm5lZXRvLWZpZWxkcy1uYW5vLWFkYXB0aXZlLWlucHV0IHtcbiAgdGV4dGFyZWEge1xuICAgIC0tbmVldG8tdWktaW5wdXQtbGluZS1oZWlnaHQ6IDEuNTtcbiAgfVxuXG4gIC5uZWV0by11aS1pbnB1dCAge1xuICAgICYubmVldG8tdWktaW5wdXQtLXNtYWxsIHtcbiAgICAgIC0tbmVldG8tdWktdGV4dGFyZWEtcGFkZGluZy14OiA4cHg7XG4gICAgICAtLW5lZXRvLXVpLXRleHRhcmVhLXBhZGRpbmcteTogNHB4O1xuICAgIH1cblxuICAgICYubmVldG8tdWktaW5wdXQtLW1lZGl1bSB7XG4gICAgICAtLW5lZXRvLXVpLXRleHRhcmVhLXBhZGRpbmcteDogOHB4O1xuICAgICAgLS1uZWV0by11aS10ZXh0YXJlYS1wYWRkaW5nLXk6IDVweDtcbiAgICB9XG5cbiAgICAmLm5lZXRvLXVpLWlucHV0LS1sYXJnZSB7XG4gICAgICAtLW5lZXRvLXVpLXRleHRhcmVhLXBhZGRpbmcteDogMTJweDtcbiAgICAgIC0tbmVldG8tdWktdGV4dGFyZWEtcGFkZGluZy15OiA4cHg7XG4gICAgfVxuICB9XG59XG4iLCIubmVldG8tZmllbGRzLW5hbm8tYWRhcHRpdmUtaW5wdXQgdGV4dGFyZWEge1xuICAtLW5lZXRvLXVpLWlucHV0LWxpbmUtaGVpZ2h0OiAxLjU7XG59XG4ubmVldG8tZmllbGRzLW5hbm8tYWRhcHRpdmUtaW5wdXQgLm5lZXRvLXVpLWlucHV0Lm5lZXRvLXVpLWlucHV0LS1zbWFsbCB7XG4gIC0tbmVldG8tdWktdGV4dGFyZWEtcGFkZGluZy14OiA4cHg7XG4gIC0tbmVldG8tdWktdGV4dGFyZWEtcGFkZGluZy15OiA0cHg7XG59XG4ubmVldG8tZmllbGRzLW5hbm8tYWRhcHRpdmUtaW5wdXQgLm5lZXRvLXVpLWlucHV0Lm5lZXRvLXVpLWlucHV0LS1tZWRpdW0ge1xuICAtLW5lZXRvLXVpLXRleHRhcmVhLXBhZGRpbmcteDogOHB4O1xuICAtLW5lZXRvLXVpLXRleHRhcmVhLXBhZGRpbmcteTogNXB4O1xufVxuLm5lZXRvLWZpZWxkcy1uYW5vLWFkYXB0aXZlLWlucHV0IC5uZWV0by11aS1pbnB1dC5uZWV0by11aS1pbnB1dC0tbGFyZ2Uge1xuICAtLW5lZXRvLXVpLXRleHRhcmVhLXBhZGRpbmcteDogMTJweDtcbiAgLS1uZWV0by11aS10ZXh0YXJlYS1wYWRkaW5nLXk6IDhweDtcbn0iXX0= */";
+var css = ".neeto-fields-nano-adaptive-input textarea{--neeto-ui-input-line-height:1.5}.neeto-fields-nano-adaptive-input .neeto-ui-input.neeto-ui-input--small{--neeto-ui-textarea-padding-x:8px;--neeto-ui-textarea-padding-y:4px}.neeto-fields-nano-adaptive-input .neeto-ui-input.neeto-ui-input--medium{--neeto-ui-textarea-padding-x:8px;--neeto-ui-textarea-padding-y:5px}.neeto-fields-nano-adaptive-input .neeto-ui-input.neeto-ui-input--large{--neeto-ui-textarea-padding-x:12px;--neeto-ui-textarea-padding-y:8px}.neeto-fields-nano__metadata-card__spinner{scale:.6}\n/*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImFwcC9qYXZhc2NyaXB0L3N0eWxlc2hlZXRzL2NvbXBvbmVudHMvX2FkYXB0aXZlX2lucHV0LnNjc3MiLCJhcHAvamF2YXNjcmlwdC9zdHlsZXNoZWV0cy9hcHBsaWNhdGlvbi5zY3NzIiwiYXBwL2phdmFzY3JpcHQvc3R5bGVzaGVldHMvY29tcG9uZW50cy9fbWV0YWRhdGEtcGFuZWwuc2NzcyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFDRSwyQ0FDRSxnQ0NBSixDRElJLHdFQUNFLGlDQUFBLENBQ0EsaUNDRk4sQ0RLSSx5RUFDRSxpQ0FBQSxDQUNBLGlDQ0hOLENETUksd0VBQ0Usa0NBQUEsQ0FDQSxpQ0NKTixDQ2RBLDJDQUNFLFFEaUJGIiwic291cmNlc0NvbnRlbnQiOlsiLm5lZXRvLWZpZWxkcy1uYW5vLWFkYXB0aXZlLWlucHV0IHtcbiAgdGV4dGFyZWEge1xuICAgIC0tbmVldG8tdWktaW5wdXQtbGluZS1oZWlnaHQ6IDEuNTtcbiAgfVxuXG4gIC5uZWV0by11aS1pbnB1dCAge1xuICAgICYubmVldG8tdWktaW5wdXQtLXNtYWxsIHtcbiAgICAgIC0tbmVldG8tdWktdGV4dGFyZWEtcGFkZGluZy14OiA4cHg7XG4gICAgICAtLW5lZXRvLXVpLXRleHRhcmVhLXBhZGRpbmcteTogNHB4O1xuICAgIH1cblxuICAgICYubmVldG8tdWktaW5wdXQtLW1lZGl1bSB7XG4gICAgICAtLW5lZXRvLXVpLXRleHRhcmVhLXBhZGRpbmcteDogOHB4O1xuICAgICAgLS1uZWV0by11aS10ZXh0YXJlYS1wYWRkaW5nLXk6IDVweDtcbiAgICB9XG5cbiAgICAmLm5lZXRvLXVpLWlucHV0LS1sYXJnZSB7XG4gICAgICAtLW5lZXRvLXVpLXRleHRhcmVhLXBhZGRpbmcteDogMTJweDtcbiAgICAgIC0tbmVldG8tdWktdGV4dGFyZWEtcGFkZGluZy15OiA4cHg7XG4gICAgfVxuICB9XG59XG4iLCIubmVldG8tZmllbGRzLW5hbm8tYWRhcHRpdmUtaW5wdXQgdGV4dGFyZWEge1xuICAtLW5lZXRvLXVpLWlucHV0LWxpbmUtaGVpZ2h0OiAxLjU7XG59XG4ubmVldG8tZmllbGRzLW5hbm8tYWRhcHRpdmUtaW5wdXQgLm5lZXRvLXVpLWlucHV0Lm5lZXRvLXVpLWlucHV0LS1zbWFsbCB7XG4gIC0tbmVldG8tdWktdGV4dGFyZWEtcGFkZGluZy14OiA4cHg7XG4gIC0tbmVldG8tdWktdGV4dGFyZWEtcGFkZGluZy15OiA0cHg7XG59XG4ubmVldG8tZmllbGRzLW5hbm8tYWRhcHRpdmUtaW5wdXQgLm5lZXRvLXVpLWlucHV0Lm5lZXRvLXVpLWlucHV0LS1tZWRpdW0ge1xuICAtLW5lZXRvLXVpLXRleHRhcmVhLXBhZGRpbmcteDogOHB4O1xuICAtLW5lZXRvLXVpLXRleHRhcmVhLXBhZGRpbmcteTogNXB4O1xufVxuLm5lZXRvLWZpZWxkcy1uYW5vLWFkYXB0aXZlLWlucHV0IC5uZWV0by11aS1pbnB1dC5uZWV0by11aS1pbnB1dC0tbGFyZ2Uge1xuICAtLW5lZXRvLXVpLXRleHRhcmVhLXBhZGRpbmcteDogMTJweDtcbiAgLS1uZWV0by11aS10ZXh0YXJlYS1wYWRkaW5nLXk6IDhweDtcbn1cblxuLm5lZXRvLWZpZWxkcy1uYW5vX19tZXRhZGF0YS1jYXJkX19zcGlubmVyIHtcbiAgc2NhbGU6IDAuNjtcbn0iLCIubmVldG8tZmllbGRzLW5hbm9fX21ldGFkYXRhLWNhcmRfX3NwaW5uZXIge1xuICBzY2FsZTogMC42O1xufVxuIl19 */";
 n(css,{});
 
 export { DeleteAlert as FieldDeleteAlert, FieldInputs, FieldValuesContainer, FieldsDashboard, FieldsPane, InlineFieldValueInput, neetoFieldsUtils, useCreateField, useDestroyField, useFetchFields, useShowField, useUpdateField };