@bigbinary/neeto-fields-frontend 1.0.8 → 1.1.0

package/dist/index.js

@@ -1,19 +1,19 @@
 import React, { useContext, useState, useRef, useEffect, useLayoutEffect, useMemo, useCallback, createContext, memo, useReducer } from 'react';
-import { Pane, Label, Button, Typography, Switch as Switch$1, TimePicker, DatePicker, Select as Select$1, Input as Input$1, Textarea, Dropdown, NoData, Table, Spinner, Alert } from '@bigbinary/neetoui';
-import { values, pick, isEmpty, omit, assoc, map, isNil, isNotNil, pluck, clone as clone$1, pipe, mergeAll, prop, any, not, head } from 'ramda';
-import { ActionBlock, Input, Select, Switch, Form, Button as Button$1 } from '@bigbinary/neetoui/formik';
-import { useQuery, useQueryClient, useMutation } from 'react-query';
-import axios from 'axios';
-import { buildUrl, getQueryParams } from '@bigbinary/neeto-commons-frontend/utils';
-import { filterBy, toLabelAndValue, isNotEmpty, capitalize as capitalize$1, findBy, humanize, countBy, existsBy } from '@bigbinary/neeto-commons-frontend/pure';
+import { Switch, TimePicker, DatePicker, Select, Input, Textarea, Typography, Pane, Label, Button as Button$1, Dropdown, NoData, Table, Spinner, Alert } from '@bigbinary/neetoui';
+import { toLabelAndValue, capitalize as capitalize$1, filterBy, findBy, isNotEmpty, humanize, countBy, existsBy, noop as noop$2 } from '@bigbinary/neeto-commons-frontend/pure';
+import { values, map, isNil, isNotNil, pluck, clone as clone$1, pipe, mergeAll, omit, prop, pick, isEmpty, assoc, any, not, head } from 'ramda';
+import { useFormikContext, useField, FieldArray } from 'formik';
 import * as yup from 'yup';
-import { useFormikContext, FieldArray, useField } from 'formik';
-import { Delete, Check, MenuHorizontal, Reorder } from '@bigbinary/neeto-icons';
+import { Check, Delete, MenuHorizontal, Reorder } from '@bigbinary/neeto-icons';
+import { Button, ActionBlock, Input as Input$1, Select as Select$1, Switch as Switch$1, Form } from '@bigbinary/neetoui/formik';
 import Container from '@bigbinary/neeto-molecules/Container';
 import Header from '@bigbinary/neeto-molecules/Header';
 import MenuBar from '@bigbinary/neeto-molecules/MenuBar';
 import PageLoader from '@bigbinary/neeto-molecules/PageLoader';
 import SubHeader from '@bigbinary/neeto-molecules/SubHeader';
+import { useQuery, useQueryClient, useMutation } from 'react-query';
+import axios from 'axios';
+import { buildUrl, getQueryParams } from '@bigbinary/neeto-commons-frontend/utils';
 import { handleMetaClick } from '@bigbinary/neeto-commons-frontend/react-utils';
 import { useHistory } from 'react-router-dom';
 import TableWrapper from '@bigbinary/neeto-molecules/TableWrapper';
@@ -5029,6 +5029,33 @@ instance.services.formatter.addCached("boldList", function (lng, options) {
   };
 });
 
+function _extends() {
+  _extends = Object.assign ? Object.assign.bind() : function (target) {
+    for (var i = 1; i < arguments.length; i++) {
+      var source = arguments[i];
+      for (var key in source) {
+        if (Object.prototype.hasOwnProperty.call(source, key)) {
+          target[key] = source[key];
+        }
+      }
+    }
+    return target;
+  };
+  return _extends.apply(this, arguments);
+}
+
+function _arrayWithoutHoles(arr) {
+  if (Array.isArray(arr)) return _arrayLikeToArray(arr);
+}
+
+function _nonIterableSpread() {
+  throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
+}
+
+function _toConsumableArray(arr) {
+  return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread();
+}
+
 var KINDS = {
   text: "text",
   number: "number",
@@ -5077,708 +5104,59 @@ var DEFAULT_FIELD_STATE_TAXONOMY = {
 };
 var ALL_KINDS = values(KINDS);
 
-function _extends() {
-  _extends = Object.assign ? Object.assign.bind() : function (target) {
-    for (var i = 1; i < arguments.length; i++) {
-      var source = arguments[i];
-      for (var key in source) {
-        if (Object.prototype.hasOwnProperty.call(source, key)) {
-          target[key] = source[key];
-        }
+function asyncGeneratorStep(gen, resolve, reject, _next, _throw, key, arg) {
+  try {
+    var info = gen[key](arg);
+    var value = info.value;
+  } catch (error) {
+    reject(error);
+    return;
+  }
+  if (info.done) {
+    resolve(value);
+  } else {
+    Promise.resolve(value).then(_next, _throw);
+  }
+}
+function _asyncToGenerator(fn) {
+  return function () {
+    var self = this,
+      args = arguments;
+    return new Promise(function (resolve, reject) {
+      var gen = fn.apply(self, args);
+      function _next(value) {
+        asyncGeneratorStep(gen, resolve, reject, _next, _throw, "next", value);
       }
-    }
-    return target;
+      function _throw(err) {
+        asyncGeneratorStep(gen, resolve, reject, _next, _throw, "throw", err);
+      }
+      _next(undefined);
+    });
   };
-  return _extends.apply(this, arguments);
 }
 
-function _arrayWithoutHoles(arr) {
-  if (Array.isArray(arr)) return _arrayLikeToArray(arr);
-}
+var regeneratorRuntime$1 = {exports: {}};
 
-function _nonIterableSpread() {
-  throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
-}
+var _typeof = {exports: {}};
 
-function _toConsumableArray(arr) {
-  return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread();
-}
+_typeof.exports;
 
-var NEETO_FIELDS_URL = "/neeto_fields_engine/api/v1";
-var FIELDS_URL = "".concat(NEETO_FIELDS_URL, "/fields");
-var FIELD_VALUES_URL = "".concat(NEETO_FIELDS_URL, "/field_values");
-var FIELD_VALUE_URL = "".concat(NEETO_FIELDS_URL, "/field_values/:fieldValueId");
-var FIELD_URL = "".concat(NEETO_FIELDS_URL, "/fields/:fieldId");
-var FIELDS_REORDER_URL = "".concat(FIELDS_URL, "/reorder");
-var CONFIGS_URL = "".concat(NEETO_FIELDS_URL, "/configs");
-var SINGULAR = {
-  count: 1
-};
-var PLURAL = {
-  count: 2
-};
+(function (module) {
+	function _typeof(obj) {
+	  "@babel/helpers - typeof";
 
-var fieldUrl = function fieldUrl(fieldId) {
-  return buildUrl(FIELD_URL, {
-    fieldId: fieldId
-  });
-};
-var fetch$1 = function fetch(_ref) {
-  var resourceType = _ref.resourceType,
-    ownerId = _ref.ownerId,
-    state = _ref.state;
-  return axios.get(FIELDS_URL, {
-    params: {
-      resourceType: resourceType,
-      ownerId: ownerId,
-      state: state
-    }
-  });
-};
-var create$1 = function create(field) {
-  return axios.post(FIELDS_URL, {
-    field: field
-  });
-};
-var show = function show(fieldId) {
-  return axios.get(fieldUrl(fieldId));
-};
-var destroy$1 = function destroy(fieldId) {
-  return axios["delete"](fieldUrl(fieldId));
-};
-var update$1 = function update(_ref2) {
-  var fieldId = _ref2.fieldId,
-    payload = _ref2.payload;
-  return axios.put(fieldUrl(fieldId), {
-    field: payload
-  });
-};
-var reorder = function reorder(payload) {
-  return axios.patch(FIELDS_REORDER_URL, payload);
-};
-var fieldsApi = {
-  fetch: fetch$1,
-  create: create$1,
-  show: show,
-  destroy: destroy$1,
-  update: update$1,
-  reorder: reorder
-};
+	  return (module.exports = _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) {
+	    return typeof obj;
+	  } : function (obj) {
+	    return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj;
+	  }, module.exports.__esModule = true, module.exports["default"] = module.exports), _typeof(obj);
+	}
+	module.exports = _typeof, module.exports.__esModule = true, module.exports["default"] = module.exports; 
+} (_typeof));
 
-var QUERY_KEYS = {
-  FIELDS: "fields",
-  FIELD_VALUES: "field_values",
-  CONFIGS: "configurations"
-};
-var DEFAULT_STALE_TIME = 3600000; // 1 hour
+var _typeofExports = _typeof.exports;
 
-function ownKeys$a(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-function _objectSpread$a(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$a(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$a(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
-var FIELDS = QUERY_KEYS.FIELDS;
-var useFetchFields = function useFetchFields(_ref, options) {
-  var resourceType = _ref.resourceType,
-    ownerId = _ref.ownerId,
-    state = _ref.state,
-    _ref$prefixQueryKeys = _ref.prefixQueryKeys,
-    prefixQueryKeys = _ref$prefixQueryKeys === void 0 ? [] : _ref$prefixQueryKeys;
-  return useQuery([FIELDS].concat(_toConsumableArray(prefixQueryKeys), [resourceType, ownerId, state]), function () {
-    return fieldsApi.fetch({
-      resourceType: resourceType,
-      ownerId: ownerId,
-      state: state
-    });
-  }, _objectSpread$a({
-    staleTime: DEFAULT_STALE_TIME
-  }, options));
-};
-var useCreateField = function useCreateField(options) {
-  var queryClient = useQueryClient();
-  return useMutation(fieldsApi.create, _objectSpread$a(_objectSpread$a({}, options), {}, {
-    onSuccess: function onSuccess() {
-      var _options$onSuccess;
-      for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
-        args[_key] = arguments[_key];
-      }
-      options === null || options === void 0 ? void 0 : (_options$onSuccess = options.onSuccess) === null || _options$onSuccess === void 0 ? void 0 : _options$onSuccess.call.apply(_options$onSuccess, [options].concat(args));
-      queryClient.invalidateQueries(FIELDS);
-    }
-  }));
-};
-var useShowField = function useShowField(fieldId, options) {
-  var queryKey = [FIELDS, fieldId];
-  return useQuery(queryKey, function () {
-    return fieldsApi.show(fieldId);
-  }, options);
-};
-var useUpdateField = function useUpdateField(options) {
-  var queryClient = useQueryClient();
-  return useMutation(fieldsApi.update, _objectSpread$a(_objectSpread$a({}, options), {}, {
-    onSuccess: function onSuccess() {
-      var _options$onSuccess2;
-      for (var _len2 = arguments.length, args = new Array(_len2), _key2 = 0; _key2 < _len2; _key2++) {
-        args[_key2] = arguments[_key2];
-      }
-      options === null || options === void 0 ? void 0 : (_options$onSuccess2 = options.onSuccess) === null || _options$onSuccess2 === void 0 ? void 0 : _options$onSuccess2.call.apply(_options$onSuccess2, [options].concat(args));
-      queryClient.invalidateQueries(FIELDS);
-    }
-  }));
-};
-var useDestroyField = function useDestroyField(options) {
-  var queryClient = useQueryClient();
-  return useMutation(fieldsApi.destroy, _objectSpread$a(_objectSpread$a({}, options), {}, {
-    onSuccess: function onSuccess() {
-      var _options$onSuccess3;
-      for (var _len3 = arguments.length, args = new Array(_len3), _key3 = 0; _key3 < _len3; _key3++) {
-        args[_key3] = arguments[_key3];
-      }
-      options === null || options === void 0 ? void 0 : (_options$onSuccess3 = options.onSuccess) === null || _options$onSuccess3 === void 0 ? void 0 : _options$onSuccess3.call.apply(_options$onSuccess3, [options].concat(args));
-      queryClient.invalidateQueries(FIELDS);
-    }
-  }));
-};
-var useReorderFields = function useReorderFields() {
-  var queryClient = useQueryClient();
-  return useMutation(fieldsApi.reorder, {
-    onSuccess: function onSuccess() {
-      queryClient.invalidateQueries(FIELDS);
-    }
-  });
-};
-
-function ownKeys$9(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-function _objectSpread$9(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$9(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$9(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
-var arrangeOptionsDisplayOrder = function arrangeOptionsDisplayOrder(options) {
-  return options.map(function (option, index) {
-    return _objectSpread$9(_objectSpread$9({}, option), {}, {
-      displayOrder: index
-    });
-  });
-};
-var buildPayload = function buildPayload(_ref) {
-  var formValues = _ref.formValues,
-    _ref$resourceType = _ref.resourceType,
-    resourceType = _ref$resourceType === void 0 ? "" : _ref$resourceType,
-    _ref$ownerId = _ref.ownerId,
-    ownerId = _ref$ownerId === void 0 ? "" : _ref$ownerId;
-  var kind = formValues.kind.value;
-  var name = formValues.name.trim();
-  return _objectSpread$9(_objectSpread$9({}, omit(["createdAt", "id", "ownerId", "ownerType", "updatedAt"], formValues)), {}, {
-    kind: kind,
-    name: name,
-    resourceType: isEmpty(resourceType) ? undefined : resourceType,
-    ownerId: isEmpty(ownerId) ? undefined : ownerId,
-    data: isDropdown(kind) ? arrangeOptionsDisplayOrder(formValues.data) : formValues.data
-  });
-};
-var isDropdown = function isDropdown(kind) {
-  return ["single_option", "multi_option"].includes(kind);
-};
-var isRegex = function isRegex(kind) {
-  return kind === "regex";
-};
-var isAdditionalDataNeeded = function isAdditionalDataNeeded(kind) {
-  return ADDITIONAL_DATA_NEEDED_FIELD_KINDS.includes(kind);
-};
-var getPermittedKinds = function getPermittedKinds(_ref2) {
-  var allowedKinds = _ref2.allowedKinds,
-    selectedKind = _ref2.selectedKind;
-  var filteredKinds = pick(allowedKinds, FIELD_KINDS);
-  var permittedKinds = filterBy({
-    group: selectedKind === null || selectedKind === void 0 ? void 0 : selectedKind.group
-  }, values(filteredKinds));
-  return permittedKinds;
-};
-var generateValidationSchema = function generateValidationSchema(additionalValidations) {
-  return yup.object().shape(_objectSpread$9(_objectSpread$9({}, BASIC_FIELD_FORM_VALIDATIONS), additionalValidations));
-};
-var renderFormFooter = function renderFormFooter(_ref3) {
-  var onClose = _ref3.onClose,
-    loading = _ref3.loading,
-    _ref3$dirty = _ref3.dirty,
-    dirty = _ref3$dirty === void 0 ? true : _ref3$dirty;
-  return /*#__PURE__*/React.createElement(Pane.Footer, null, /*#__PURE__*/React.createElement(ActionBlock, {
-    cancelButtonProps: {
-      onClick: onClose,
-      style: "text",
-      disabled: loading
-    },
-    submitButtonProps: {
-      label: t("labels.saveChanges"),
-      className: "mr-2",
-      type: "submit",
-      disabled: !dirty,
-      loading: loading
-    }
-  }));
-};
-
-var regexValidationSchema = yup.object().shape({
-  condition: yup.string().required(t("validations.regexConditionIsRequired")),
-  helpMessage: yup.string().required(t("validations.regexHelpMessageIsRequired"))
-});
-var dropDownOptionsValidationSchema = yup.array().of(yup.object().shape({
-  label: yup.string().trim().required(t("validations.fieldOptionIsRequired")),
-  displayOrder: yup.number()
-})).min(1, t("validations.atLeastFieldOptionIsRequired"));
-var FIELD_KINDS = {
-  text: {
-    value: "text",
-    label: t("fields.kinds.text"),
-    group: 1
-  },
-  number: {
-    value: "number",
-    label: t("fields.kinds.number"),
-    group: 2
-  },
-  monetary: {
-    value: "monetary",
-    label: t("fields.kinds.monetary"),
-    group: 2
-  },
-  single_option: {
-    value: "single_option",
-    label: t("fields.kinds.singleOption"),
-    group: 3
-  },
-  multi_option: {
-    value: "multi_option",
-    label: t("fields.kinds.multiOption"),
-    group: 3
-  },
-  date: {
-    value: "date",
-    label: t("fields.kinds.date"),
-    group: 4
-  },
-  time: {
-    value: "time",
-    label: t("fields.kinds.time"),
-    group: 5
-  },
-  date_range: {
-    value: "date_range",
-    label: t("fields.kinds.dateRange"),
-    group: 6
-  },
-  time_range: {
-    value: "time_range",
-    label: t("fields.kinds.timeRange"),
-    group: 7
-  },
-  text_area: {
-    value: "text_area",
-    label: t("fields.kinds.textArea"),
-    group: 1
-  },
-  textarea: {
-    value: "textarea",
-    label: t("fields.kinds.textarea"),
-    group: 1
-  },
-  person: {
-    value: "person",
-    label: t("fields.kinds.person"),
-    group: 8
-  },
-  checkbox: {
-    value: "checkbox",
-    label: t("fields.kinds.checkbox"),
-    group: 9
-  },
-  regex: {
-    value: "regex",
-    label: t("fields.kinds.regex"),
-    group: 10
-  },
-  integer: {
-    value: "integer",
-    label: t("fields.kinds.integer"),
-    group: 2
-  },
-  decimal: {
-    value: "decimal",
-    label: t("fields.kinds.decimal"),
-    group: 2
-  },
-  datetime: {
-    value: "datetime",
-    label: t("fields.kinds.datetime"),
-    group: 11
-  }
-};
-var ADDITIONAL_DATA_NEEDED_FIELD_KINDS = ["single_option", "multi_option", "regex"];
-var INITIAL_FIELDS = {
-  name: "",
-  kind: toLabelAndValue("text"),
-  isRequired: false
-};
-var DEFAULT_OPTION = {
-  label: "",
-  displayOrder: 0
-};
-var DEFAULT_OPTIONS_DATA = [DEFAULT_OPTION];
-var DEFAULT_REGEX_DATA = {
-  regex: "",
-  helpMessage: ""
-};
-var BASIC_FIELD_FORM_VALIDATIONS = {
-  name: yup.string().trim().required(t("validations.fieldNameIsRequired")),
-  isRequired: yup["boolean"](),
-  kind: yup.object().shape({
-    value: yup.string().required()
-  }).required(t("validations.kindIsRequired")),
-  data: yup.mixed().when("kind", {
-    is: function is(kind) {
-      return isRegex(kind === null || kind === void 0 ? void 0 : kind.value);
-    },
-    then: regexValidationSchema
-  }).when("kind", {
-    is: function is(kind) {
-      return isDropdown(kind === null || kind === void 0 ? void 0 : kind.value);
-    },
-    then: dropDownOptionsValidationSchema
-  })
-};
-
-var AdditionalInputs = function AdditionalInputs() {
-  var _useTranslation = useTranslation(),
-    t = _useTranslation.t;
-  var _useFormikContext = useFormikContext(),
-    _useFormikContext$val = _useFormikContext.values,
-    kind = _useFormikContext$val.kind,
-    options = _useFormikContext$val.data,
-    isSystem = _useFormikContext$val.isSystem;
-  var removeOption = function removeOption(arrayHelpers, index) {
-    return arrayHelpers.remove(index);
-  };
-  var addOption = function addOption(arrayHelpers) {
-    return arrayHelpers.push(DEFAULT_OPTION);
-  };
-  if (isDropdown(kind.value)) {
-    return /*#__PURE__*/React.createElement(FieldArray, {
-      name: "data"
-    }, function (arrayHelpers) {
-      return /*#__PURE__*/React.createElement("div", {
-        className: "flex w-full flex-col gap-y-4"
-      }, /*#__PURE__*/React.createElement(Label, {
-        required: true
-      }, t("titles.dropdownOptions")), isNotEmpty(options) && Array.isArray(options) && options.map(function (_, index) {
-        return /*#__PURE__*/React.createElement("div", {
-          className: "flex w-full space-x-3",
-          key: index
-        }, /*#__PURE__*/React.createElement("div", {
-          className: "w-full"
-        }, /*#__PURE__*/React.createElement(Input, {
-          disabled: isSystem,
-          name: "data.".concat(index, ".label"),
-          placeholder: t("placeholders.enterAnOption"),
-          suffix: options.length > 1 && /*#__PURE__*/React.createElement(Button, {
-            icon: Delete,
-            style: "text",
-            onClick: function onClick() {
-              return removeOption(arrayHelpers, index);
-            }
-          })
-        })));
-      }), /*#__PURE__*/React.createElement(Button, {
-        fullWidth: true,
-        className: "mb-6 border-dashed text-xs uppercase",
-        label: t("labels.addMoreOption"),
-        style: "secondary",
-        onClick: function onClick() {
-          return addOption(arrayHelpers);
-        }
-      }));
-    });
-  } else if (isRegex(kind.value)) {
-    return /*#__PURE__*/React.createElement("div", {
-      className: "flex w-full flex-col gap-y-4"
-    }, /*#__PURE__*/React.createElement(Label, {
-      required: true
-    }, t("titles.regexOptions")), /*#__PURE__*/React.createElement(Input, {
-      disabled: isSystem,
-      label: t("labels.regexCondition"),
-      name: "data.condition",
-      placeholder: t("placeholders.regexExample")
-    }), /*#__PURE__*/React.createElement(Input, {
-      disabled: isSystem,
-      label: t("labels.helpMessage"),
-      name: "data.helpMessage",
-      placeholder: t("placeholders.enterErrorMessage")
-    }));
-  }
-  return null;
-};
-
-/** @type {React.FC<import("types").FieldFormProps>} */
-
-var FieldForm = function FieldForm(_ref) {
-  var chosenKind = _ref.chosenKind,
-    _ref$kindSelectOption = _ref.kindSelectOptions,
-    kindSelectOptions = _ref$kindSelectOption === void 0 ? [] : _ref$kindSelectOption,
-    _ref$isSystem = _ref.isSystem,
-    isSystem = _ref$isSystem === void 0 ? false : _ref$isSystem,
-    _ref$hideRequiredSwit = _ref.hideRequiredSwitch,
-    hideRequiredSwitch = _ref$hideRequiredSwit === void 0 ? false : _ref$hideRequiredSwit,
-    children = _ref.children;
-  var _useTranslation = useTranslation(),
-    t = _useTranslation.t;
-  var _useFormikContext = useFormikContext(),
-    options = _useFormikContext.values.data,
-    setFieldValue = _useFormikContext.setFieldValue;
-  var handleKindChange = function handleKindChange(kind) {
-    setFieldValue("kind", kind);
-    if (isDropdown(kind.value)) {
-      setFieldValue("data", options !== null && options !== void 0 ? options : DEFAULT_OPTIONS_DATA);
-    } else if (isRegex(kind.value)) {
-      setFieldValue("data", options !== null && options !== void 0 ? options : DEFAULT_REGEX_DATA);
-    }
-  };
-  return /*#__PURE__*/React.createElement(Pane.Body, null, /*#__PURE__*/React.createElement("div", {
-    className: "w-full space-y-4"
-  }, /*#__PURE__*/React.createElement(Input, {
-    required: true,
-    disabled: isSystem,
-    label: t("labels.fieldName"),
-    name: "name",
-    placeholder: t("placeholders.enterFieldName")
-  }), /*#__PURE__*/React.createElement(Select, {
-    isSearchable: true,
-    isDisabled: isSystem,
-    label: t("labels.fieldKind"),
-    name: "kind",
-    options: kindSelectOptions,
-    onChange: handleKindChange
-  }), isAdditionalDataNeeded(chosenKind) && /*#__PURE__*/React.createElement(AdditionalInputs, null), !hideRequiredSwitch && /*#__PURE__*/React.createElement(Label, {
-    className: "flex items-center gap-2"
-  }, /*#__PURE__*/React.createElement(Switch, {
-    name: "isRequired"
-  }), /*#__PURE__*/React.createElement(Typography, {
-    className: "leading-4",
-    component: "span",
-    style: "body2"
-  }, t("labels.isRequired"))), children));
-};
-
-var _excluded$3 = ["resourceType", "allowedKinds", "additionalValidations", "initialValues", "onClose"];
-function ownKeys$8(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-function _objectSpread$8(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$8(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$8(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
-
-/** @type {React.FC<import("types").AddProps>} */
-
-var Add = function Add(_ref) {
-  var resourceType = _ref.resourceType,
-    allowedKinds = _ref.allowedKinds,
-    additionalValidations = _ref.additionalValidations,
-    initialValues = _ref.initialValues,
-    onClose = _ref.onClose,
-    props = _objectWithoutProperties(_ref, _excluded$3);
-  var _useTranslation = useTranslation(),
-    t = _useTranslation.t;
-  var _useCreateField = useCreateField(),
-    createField = _useCreateField.mutate,
-    isSubmitting = _useCreateField.isLoading;
-  var filteredKinds = values(pick(allowedKinds, FIELD_KINDS));
-  var handleSubmit = function handleSubmit(formValues) {
-    var payload = buildPayload({
-      formValues: formValues,
-      resourceType: resourceType
-    });
-    createField(payload, {
-      onSuccess: onClose
-    });
-  };
-  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Pane.Header, null, /*#__PURE__*/React.createElement(Typography, {
-    style: "h2"
-  }, t("titles.addField"))), /*#__PURE__*/React.createElement(Form, {
-    formikProps: {
-      initialValues: _objectSpread$8(_objectSpread$8({}, initialValues), INITIAL_FIELDS),
-      validationSchema: generateValidationSchema(additionalValidations),
-      onSubmit: handleSubmit
-    }
-  }, function (_ref2) {
-    var dirty = _ref2.dirty,
-      kind = _ref2.values.kind;
-    return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(FieldForm, _extends({
-      chosenKind: kind.value,
-      kindSelectOptions: filteredKinds
-    }, props)), renderFormFooter({
-      onClose: onClose,
-      loading: isSubmitting,
-      dirty: dirty
-    }));
-  }));
-};
-
-var _excluded$2 = ["fieldId", "allowedKinds", "additionalValidations", "initialValues", "onClose"];
-function ownKeys$7(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-function _objectSpread$7(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$7(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$7(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
-
-/** @type {React.FC<import("types").EditProps>} */
-
-var Edit = function Edit(_ref) {
-  var fieldId = _ref.fieldId,
-    allowedKinds = _ref.allowedKinds,
-    _ref$additionalValida = _ref.additionalValidations,
-    additionalValidations = _ref$additionalValida === void 0 ? {} : _ref$additionalValida,
-    _ref$initialValues = _ref.initialValues,
-    initialValues = _ref$initialValues === void 0 ? {} : _ref$initialValues,
-    onClose = _ref.onClose,
-    props = _objectWithoutProperties(_ref, _excluded$2);
-  var _useTranslation = useTranslation(),
-    t = _useTranslation.t;
-  var _useShowField = useShowField(fieldId),
-    _useShowField$data = _useShowField.data,
-    _useShowField$data2 = _useShowField$data === void 0 ? {} : _useShowField$data,
-    _useShowField$data2$f = _useShowField$data2.field,
-    field = _useShowField$data2$f === void 0 ? {} : _useShowField$data2$f;
-  var _useUpdateField = useUpdateField(),
-    updateField = _useUpdateField.mutate,
-    isSubmitting = _useUpdateField.isLoading;
-  var handleSubmit = function handleSubmit(formValues) {
-    var payload = buildPayload({
-      formValues: formValues
-    });
-    updateField({
-      fieldId: fieldId,
-      payload: payload
-    }, {
-      onSuccess: onClose
-    });
-  };
-  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Pane.Header, null, /*#__PURE__*/React.createElement(Typography, {
-    style: "h2"
-  }, t("titles.editField"))), /*#__PURE__*/React.createElement(Form, {
-    formikProps: {
-      initialValues: _objectSpread$7(_objectSpread$7({}, initialValues), assoc("kind", FIELD_KINDS[field.kind], field)),
-      validationSchema: generateValidationSchema(additionalValidations),
-      enableReinitialize: true,
-      onSubmit: handleSubmit
-    }
-  }, function (_ref2) {
-    var kind = _ref2.values.kind,
-      dirty = _ref2.dirty;
-    var permittedKinds = getPermittedKinds({
-      allowedKinds: allowedKinds,
-      selectedKind: kind
-    });
-    return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(FieldForm, _extends({
-      chosenKind: kind === null || kind === void 0 ? void 0 : kind.value,
-      isSystem: field.isSystem,
-      kindSelectOptions: permittedKinds
-    }, props)), renderFormFooter({
-      onClose: onClose,
-      loading: isSubmitting,
-      dirty: dirty
-    }));
-  }));
-};
-
-var _excluded$1 = ["isOpen", "selectedField"];
-
-/** @type {React.FC<import("types").FieldsPaneProps>} */
-
-var FieldsPane = function FieldsPane(_ref) {
-  var isOpen = _ref.isOpen,
-    _ref$selectedField = _ref.selectedField,
-    selectedField = _ref$selectedField === void 0 ? {} : _ref$selectedField,
-    props = _objectWithoutProperties(_ref, _excluded$1);
-  return /*#__PURE__*/React.createElement(Pane, {
-    isOpen: isOpen,
-    onClose: props.onClose
-  }, isEmpty(selectedField) ? /*#__PURE__*/React.createElement(Add, props) : /*#__PURE__*/React.createElement(Edit, _extends({
-    fieldId: selectedField === null || selectedField === void 0 ? void 0 : selectedField.id
-  }, props)));
-};
-
-/** @type {React.FC<import("types").AddFieldProps>} */
-
-var AddField = function AddField(_ref) {
-  var resourceType = _ref.resourceType,
-    _ref$allowedKinds = _ref.allowedKinds,
-    allowedKinds = _ref$allowedKinds === void 0 ? ALL_KINDS : _ref$allowedKinds,
-    additionalValidations = _ref.additionalValidations,
-    initialValues = _ref.initialValues,
-    hideRequiredSwitch = _ref.hideRequiredSwitch,
-    children = _ref.children;
-  var _useState = useState(false),
-    _useState2 = _slicedToArray(_useState, 2),
-    isOpen = _useState2[0],
-    setIsOpen = _useState2[1];
-  var _useTranslation = useTranslation(),
-    t = _useTranslation.t;
-  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Button, {
-    label: t("labels.addField"),
-    onClick: function onClick() {
-      return setIsOpen(true);
-    }
-  }), /*#__PURE__*/React.createElement(FieldsPane, {
-    additionalValidations: additionalValidations,
-    allowedKinds: allowedKinds,
-    hideRequiredSwitch: hideRequiredSwitch,
-    initialValues: initialValues,
-    isOpen: isOpen,
-    resourceType: resourceType,
-    onClose: function onClose() {
-      return setIsOpen(false);
-    }
-  }, children));
-};
-
-function asyncGeneratorStep(gen, resolve, reject, _next, _throw, key, arg) {
-  try {
-    var info = gen[key](arg);
-    var value = info.value;
-  } catch (error) {
-    reject(error);
-    return;
-  }
-  if (info.done) {
-    resolve(value);
-  } else {
-    Promise.resolve(value).then(_next, _throw);
-  }
-}
-function _asyncToGenerator(fn) {
-  return function () {
-    var self = this,
-      args = arguments;
-    return new Promise(function (resolve, reject) {
-      var gen = fn.apply(self, args);
-      function _next(value) {
-        asyncGeneratorStep(gen, resolve, reject, _next, _throw, "next", value);
-      }
-      function _throw(err) {
-        asyncGeneratorStep(gen, resolve, reject, _next, _throw, "throw", err);
-      }
-      _next(undefined);
-    });
-  };
-}
-
-var regeneratorRuntime$1 = {exports: {}};
-
-var _typeof = {exports: {}};
-
-_typeof.exports;
-
-(function (module) {
-	function _typeof(obj) {
-	  "@babel/helpers - typeof";
-
-	  return (module.exports = _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) {
-	    return typeof obj;
-	  } : function (obj) {
-	    return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj;
-	  }, module.exports.__esModule = true, module.exports["default"] = module.exports), _typeof(obj);
-	}
-	module.exports = _typeof, module.exports.__esModule = true, module.exports["default"] = module.exports; 
-} (_typeof));
-
-var _typeofExports = _typeof.exports;
-
-regeneratorRuntime$1.exports;
+regeneratorRuntime$1.exports;
 
 (function (module) {
 	var _typeof = _typeofExports["default"];
@@ -6086,481 +5464,1110 @@ regeneratorRuntime$1.exports;
 	module.exports = _regeneratorRuntime, module.exports.__esModule = true, module.exports["default"] = module.exports; 
 } (regeneratorRuntime$1));
 
-var regeneratorRuntimeExports = regeneratorRuntime$1.exports;
+var regeneratorRuntimeExports = regeneratorRuntime$1.exports;
+
+// TODO(Babel 8): Remove this file.
+
+var runtime = regeneratorRuntimeExports();
+var regenerator = runtime;
+
+// Copied from https://github.com/facebook/regenerator/blob/main/packages/runtime/runtime.js#L736=
+try {
+  regeneratorRuntime = runtime;
+} catch (accidentalStrictMode) {
+  if (typeof globalThis === "object") {
+    globalThis.regeneratorRuntime = runtime;
+  } else {
+    Function("r", "regeneratorRuntime = r")(runtime);
+  }
+}
+
+var _regeneratorRuntime = /*@__PURE__*/getDefaultExportFromCjs(regenerator);
+
+var dayjs_min = {exports: {}};
+
+dayjs_min.exports;
+
+(function (module, exports) {
+	!function(t,e){module.exports=e();}(commonjsGlobal,(function(){var t=1e3,e=6e4,n=36e5,r="millisecond",i="second",s="minute",u="hour",a="day",o="week",f="month",h="quarter",c="year",d="date",l="Invalid Date",$=/^(\d{4})[-/]?(\d{1,2})?[-/]?(\d{0,2})[Tt\s]*(\d{1,2})?:?(\d{1,2})?:?(\d{1,2})?[.:]?(\d+)?$/,y=/\[([^\]]+)]|Y{1,4}|M{1,4}|D{1,2}|d{1,4}|H{1,2}|h{1,2}|a|A|m{1,2}|s{1,2}|Z{1,2}|SSS/g,M={name:"en",weekdays:"Sunday_Monday_Tuesday_Wednesday_Thursday_Friday_Saturday".split("_"),months:"January_February_March_April_May_June_July_August_September_October_November_December".split("_"),ordinal:function(t){var e=["th","st","nd","rd"],n=t%100;return "["+t+(e[(n-20)%10]||e[n]||e[0])+"]"}},m=function(t,e,n){var r=String(t);return !r||r.length>=e?t:""+Array(e+1-r.length).join(n)+t},v={s:m,z:function(t){var e=-t.utcOffset(),n=Math.abs(e),r=Math.floor(n/60),i=n%60;return (e<=0?"+":"-")+m(r,2,"0")+":"+m(i,2,"0")},m:function t(e,n){if(e.date()<n.date())return -t(n,e);var r=12*(n.year()-e.year())+(n.month()-e.month()),i=e.clone().add(r,f),s=n-i<0,u=e.clone().add(r+(s?-1:1),f);return +(-(r+(n-i)/(s?i-u:u-i))||0)},a:function(t){return t<0?Math.ceil(t)||0:Math.floor(t)},p:function(t){return {M:f,y:c,w:o,d:a,D:d,h:u,m:s,s:i,ms:r,Q:h}[t]||String(t||"").toLowerCase().replace(/s$/,"")},u:function(t){return void 0===t}},g="en",D={};D[g]=M;var p=function(t){return t instanceof _},S=function t(e,n,r){var i;if(!e)return g;if("string"==typeof e){var s=e.toLowerCase();D[s]&&(i=s),n&&(D[s]=n,i=s);var u=e.split("-");if(!i&&u.length>1)return t(u[0])}else {var a=e.name;D[a]=e,i=a;}return !r&&i&&(g=i),i||!r&&g},w=function(t,e){if(p(t))return t.clone();var n="object"==typeof e?e:{};return n.date=t,n.args=arguments,new _(n)},O=v;O.l=S,O.i=p,O.w=function(t,e){return w(t,{locale:e.$L,utc:e.$u,x:e.$x,$offset:e.$offset})};var _=function(){function M(t){this.$L=S(t.locale,null,!0),this.parse(t);}var m=M.prototype;return m.parse=function(t){this.$d=function(t){var e=t.date,n=t.utc;if(null===e)return new Date(NaN);if(O.u(e))return new Date;if(e instanceof Date)return new Date(e);if("string"==typeof e&&!/Z$/i.test(e)){var r=e.match($);if(r){var i=r[2]-1||0,s=(r[7]||"0").substring(0,3);return n?new Date(Date.UTC(r[1],i,r[3]||1,r[4]||0,r[5]||0,r[6]||0,s)):new Date(r[1],i,r[3]||1,r[4]||0,r[5]||0,r[6]||0,s)}}return new Date(e)}(t),this.$x=t.x||{},this.init();},m.init=function(){var t=this.$d;this.$y=t.getFullYear(),this.$M=t.getMonth(),this.$D=t.getDate(),this.$W=t.getDay(),this.$H=t.getHours(),this.$m=t.getMinutes(),this.$s=t.getSeconds(),this.$ms=t.getMilliseconds();},m.$utils=function(){return O},m.isValid=function(){return !(this.$d.toString()===l)},m.isSame=function(t,e){var n=w(t);return this.startOf(e)<=n&&n<=this.endOf(e)},m.isAfter=function(t,e){return w(t)<this.startOf(e)},m.isBefore=function(t,e){return this.endOf(e)<w(t)},m.$g=function(t,e,n){return O.u(t)?this[e]:this.set(n,t)},m.unix=function(){return Math.floor(this.valueOf()/1e3)},m.valueOf=function(){return this.$d.getTime()},m.startOf=function(t,e){var n=this,r=!!O.u(e)||e,h=O.p(t),l=function(t,e){var i=O.w(n.$u?Date.UTC(n.$y,e,t):new Date(n.$y,e,t),n);return r?i:i.endOf(a)},$=function(t,e){return O.w(n.toDate()[t].apply(n.toDate("s"),(r?[0,0,0,0]:[23,59,59,999]).slice(e)),n)},y=this.$W,M=this.$M,m=this.$D,v="set"+(this.$u?"UTC":"");switch(h){case c:return r?l(1,0):l(31,11);case f:return r?l(1,M):l(0,M+1);case o:var g=this.$locale().weekStart||0,D=(y<g?y+7:y)-g;return l(r?m-D:m+(6-D),M);case a:case d:return $(v+"Hours",0);case u:return $(v+"Minutes",1);case s:return $(v+"Seconds",2);case i:return $(v+"Milliseconds",3);default:return this.clone()}},m.endOf=function(t){return this.startOf(t,!1)},m.$set=function(t,e){var n,o=O.p(t),h="set"+(this.$u?"UTC":""),l=(n={},n[a]=h+"Date",n[d]=h+"Date",n[f]=h+"Month",n[c]=h+"FullYear",n[u]=h+"Hours",n[s]=h+"Minutes",n[i]=h+"Seconds",n[r]=h+"Milliseconds",n)[o],$=o===a?this.$D+(e-this.$W):e;if(o===f||o===c){var y=this.clone().set(d,1);y.$d[l]($),y.init(),this.$d=y.set(d,Math.min(this.$D,y.daysInMonth())).$d;}else l&&this.$d[l]($);return this.init(),this},m.set=function(t,e){return this.clone().$set(t,e)},m.get=function(t){return this[O.p(t)]()},m.add=function(r,h){var d,l=this;r=Number(r);var $=O.p(h),y=function(t){var e=w(l);return O.w(e.date(e.date()+Math.round(t*r)),l)};if($===f)return this.set(f,this.$M+r);if($===c)return this.set(c,this.$y+r);if($===a)return y(1);if($===o)return y(7);var M=(d={},d[s]=e,d[u]=n,d[i]=t,d)[$]||1,m=this.$d.getTime()+r*M;return O.w(m,this)},m.subtract=function(t,e){return this.add(-1*t,e)},m.format=function(t){var e=this,n=this.$locale();if(!this.isValid())return n.invalidDate||l;var r=t||"YYYY-MM-DDTHH:mm:ssZ",i=O.z(this),s=this.$H,u=this.$m,a=this.$M,o=n.weekdays,f=n.months,h=function(t,n,i,s){return t&&(t[n]||t(e,r))||i[n].slice(0,s)},c=function(t){return O.s(s%12||12,t,"0")},d=n.meridiem||function(t,e,n){var r=t<12?"AM":"PM";return n?r.toLowerCase():r},$={YY:String(this.$y).slice(-2),YYYY:this.$y,M:a+1,MM:O.s(a+1,2,"0"),MMM:h(n.monthsShort,a,f,3),MMMM:h(f,a),D:this.$D,DD:O.s(this.$D,2,"0"),d:String(this.$W),dd:h(n.weekdaysMin,this.$W,o,2),ddd:h(n.weekdaysShort,this.$W,o,3),dddd:o[this.$W],H:String(s),HH:O.s(s,2,"0"),h:c(1),hh:c(2),a:d(s,u,!0),A:d(s,u,!1),m:String(u),mm:O.s(u,2,"0"),s:String(this.$s),ss:O.s(this.$s,2,"0"),SSS:O.s(this.$ms,3,"0"),Z:i};return r.replace(y,(function(t,e){return e||$[t]||i.replace(":","")}))},m.utcOffset=function(){return 15*-Math.round(this.$d.getTimezoneOffset()/15)},m.diff=function(r,d,l){var $,y=O.p(d),M=w(r),m=(M.utcOffset()-this.utcOffset())*e,v=this-M,g=O.m(this,M);return g=($={},$[c]=g/12,$[f]=g,$[h]=g/3,$[o]=(v-m)/6048e5,$[a]=(v-m)/864e5,$[u]=v/n,$[s]=v/e,$[i]=v/t,$)[y]||v,l?g:O.a(g)},m.daysInMonth=function(){return this.endOf(f).$D},m.$locale=function(){return D[this.$L]},m.locale=function(t,e){if(!t)return this.$L;var n=this.clone(),r=S(t,e,!0);return r&&(n.$L=r),n},m.clone=function(){return O.w(this.$d,this)},m.toDate=function(){return new Date(this.valueOf())},m.toJSON=function(){return this.isValid()?this.toISOString():null},m.toISOString=function(){return this.$d.toISOString()},m.toString=function(){return this.$d.toUTCString()},M}(),T=_.prototype;return w.prototype=T,[["$ms",r],["$s",i],["$m",s],["$H",u],["$W",a],["$M",f],["$y",c],["$D",d]].forEach((function(t){T[t[1]]=function(e){return this.$g(e,t[0],t[1])};})),w.extend=function(t,e){return t.$i||(t(e,_,w),t.$i=!0),w},w.locale=S,w.isDayjs=p,w.unix=function(t){return w(1e3*t)},w.en=D[g],w.Ls=D,w.p={},w})); 
+} (dayjs_min, dayjs_min.exports));
+
+var dayjs_minExports = dayjs_min.exports;
+var dayjs = /*@__PURE__*/getDefaultExportFromCjs(dayjs_minExports);
+
+var dateSchema = yup.date().nullable();
+var buildFieldValidationSchema = function buildFieldValidationSchema(_ref) {
+  var kind = _ref.kind,
+    isRequired = _ref.isRequired,
+    fieldData = _ref.fieldData;
+  switch (kind) {
+    case KINDS.singleOption:
+    case KINDS.text:
+      {
+        var schema = yup.string().trim().nullable();
+        return isRequired ? schema.required(t("validations.thisIsRequired")) : schema;
+      }
+    case KINDS.number:
+    case KINDS.monetary:
+    case KINDS.decimal:
+      {
+        var _schema = yup.number().nullable().typeError(t("validations.notAValidNumber"));
+        return isRequired ? _schema.required(t("validations.thisIsRequired")) : _schema;
+      }
+    case KINDS.integer:
+      {
+        var _schema2 = yup.number().nullable().integer().typeError(t("validations.notAValidInteger"));
+        return isRequired ? _schema2.required(t("validations.thisIsRequired")) : _schema2;
+      }
+    case KINDS.date:
+    case KINDS.time:
+      return isRequired ? dateSchema.required(t("validations.thisIsRequired")) : dateSchema;
+    case KINDS.multiOption:
+      {
+        var _schema3 = yup.array().of(yup.string()).nullable();
+        return isRequired ? _schema3.min(1, t("validations.minOneItem")).required(t("validations.thisIsRequired")) : _schema3;
+      }
+    case KINDS.dateRange:
+    case KINDS.timeRange:
+      {
+        if (isRequired) {
+          return yup.array().of(dateSchema).required(t("validations.thisIsRequired"));
+        }
+        return yup.array().of(dateSchema).nullable();
+      }
+    case KINDS.checkbox:
+      return yup["boolean"]().nullable();
+    case KINDS.regex:
+      {
+        var regexPattern = fieldData === null || fieldData === void 0 ? void 0 : fieldData.condition;
+        var _schema4 = yup.string().nullable().matches(cleanedRegex(regexPattern), fieldData === null || fieldData === void 0 ? void 0 : fieldData.helpMessage);
+        return isRequired ? _schema4.required(t("validations.thisIsRequired")) : _schema4;
+      }
+    default:
+      return yup.mixed();
+  }
+};
+var cleanedRegex = function cleanedRegex(expression) {
+  if (expression.startsWith("/") && expression.endsWith("/")) {
+    return expression.slice(1, -1);
+  }
+  return expression;
+};
+var buildOptionsToLabelAndValue = function buildOptionsToLabelAndValue() {
+  var optionObjects = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
+  return optionObjects.map(function (_ref2) {
+    var label = _ref2.label,
+      value = _ref2.value;
+    return {
+      label: label,
+      value: value || label
+    };
+  });
+};
+var buildArrayToLabelAndValues = function buildArrayToLabelAndValues(value) {
+  return map(toLabelAndValue, value || []);
+};
+var validateField = /*#__PURE__*/function () {
+  var _ref4 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee(_ref3) {
+    var fieldValue, fieldName, isRequired, kind, fieldData;
+    return _regeneratorRuntime.wrap(function _callee$(_context) {
+      while (1) switch (_context.prev = _context.next) {
+        case 0:
+          fieldValue = _ref3.fieldValue, fieldName = _ref3.fieldName, isRequired = _ref3.isRequired, kind = _ref3.kind, fieldData = _ref3.fieldData;
+          _context.prev = 1;
+          _context.next = 4;
+          return yup.object().shape(_defineProperty({}, fieldName, buildFieldValidationSchema({
+            kind: kind,
+            isRequired: isRequired,
+            fieldData: fieldData
+          }))).validate(_defineProperty({}, fieldName, fieldValue));
+        case 4:
+          return _context.abrupt("return", false);
+        case 7:
+          _context.prev = 7;
+          _context.t0 = _context["catch"](1);
+          return _context.abrupt("return", _context.t0.errors);
+        case 10:
+        case "end":
+          return _context.stop();
+      }
+    }, _callee, null, [[1, 7]]);
+  }));
+  return function validateField(_x) {
+    return _ref4.apply(this, arguments);
+  };
+}();
+var dateTimeToString = function dateTimeToString(dateTime) {
+  return dayjs(dateTime).toString();
+};
+
+var _excluded$3 = ["name", "id", "kind", "data", "individualSubmit", "formRef", "formRefs", "disabled", "isRequiredColumnName"];
+function ownKeys$a(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread$a(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$a(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$a(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+var useFormikFields = function useFormikFields(_ref) {
+  var name = _ref.name,
+    fieldId = _ref.id,
+    kind = _ref.kind,
+    fieldData = _ref.data,
+    individualSubmit = _ref.individualSubmit,
+    formRef = _ref.formRef,
+    formRefs = _ref.formRefs,
+    disabled = _ref.disabled,
+    _ref$isRequiredColumn = _ref.isRequiredColumnName,
+    isRequiredColumnName = _ref$isRequiredColumn === void 0 ? "isRequired" : _ref$isRequiredColumn,
+    props = _objectWithoutProperties(_ref, _excluded$3);
+  var formikContext = useFormikContext();
+  var setFieldValue = formikContext.setFieldValue,
+    submitForm = formikContext.submitForm,
+    dirty = formikContext.dirty,
+    isSubmitting = formikContext.isSubmitting;
+  var fieldPath = escapeString("".concat(name, "-").concat(fieldId));
+  var fieldName = kind === KINDS.multiOption ? "values" : "value";
+  var fieldValuePath = "".concat(fieldPath, ".data.").concat(fieldName);
+  if (isNil(formRef) && isNotNil(formRefs)) {
+    formRefs.current[fieldValuePath] = formikContext;
+  } else if (isNil(formRefs) && isNotNil(formRef)) {
+    formRef.current = formikContext;
+  }
+  var _useField = useField({
+      name: fieldValuePath,
+      validate: function validate(fieldValue) {
+        return validateField({
+          fieldValue: fieldValue,
+          fieldName: name,
+          isRequired: props[isRequiredColumnName],
+          kind: kind,
+          fieldData: fieldData
+        });
+      }
+    }),
+    _useField2 = _slicedToArray(_useField, 3),
+    formikFieldProps = _useField2[0],
+    meta = _useField2[1],
+    helpers = _useField2[2];
+  var handleSubmit = function handleSubmit(value) {
+    isNotNil(value) && setFieldValue(fieldValuePath, value);
+    individualSubmit && submitForm();
+  };
+  var getValueForField = function getValueForField(value) {
+    if (kind === KINDS.singleOption) {
+      value = toLabelAndValue(value);
+    } else if (kind === KINDS.multiOption) {
+      value = buildArrayToLabelAndValues(value);
+    }
+    return value;
+  };
+  var isDropdown = ["single_option", "multi_option"].includes(kind);
+  if (isSubmitting && !meta.touched) {
+    helpers.setTouched(true);
+  }
+  return {
+    handleSubmit: handleSubmit,
+    fieldProps: _objectSpread$a(_objectSpread$a({}, formikFieldProps), {}, {
+      required: props[isRequiredColumnName],
+      error: meta.touched && meta.error,
+      options: isDropdown ? buildOptionsToLabelAndValue(fieldData) : undefined,
+      value: getValueForField(formikFieldProps.value),
+      dirty: dirty,
+      label: !individualSubmit && capitalize$1(name),
+      disabled: disabled
+    })
+  };
+};
 
-// TODO(Babel 8): Remove this file.
+var Checkbox = function Checkbox(props) {
+  var _useFormikFields = useFormikFields(props),
+    handleSubmit = _useFormikFields.handleSubmit,
+    fieldProps = _useFormikFields.fieldProps;
+  return /*#__PURE__*/React.createElement(Switch, _extends({}, fieldProps, {
+    checked: fieldProps.value,
+    onChange: function onChange(_ref) {
+      var checked = _ref.target.checked;
+      return handleSubmit(checked);
+    }
+  }));
+};
 
-var runtime = regeneratorRuntimeExports();
-var regenerator = runtime;
+var DateOrTime = function DateOrTime(props) {
+  var _useFormikFields = useFormikFields(props),
+    handleSubmit = _useFormikFields.handleSubmit,
+    fieldProps = _useFormikFields.fieldProps;
+  if (props.kind === KINDS.time) {
+    return /*#__PURE__*/React.createElement(TimePicker, _extends({}, fieldProps, {
+      use12Hours: true,
+      format: "h:mm A",
+      onChange: function onChange(dateTime) {
+        return handleSubmit(dateTimeToString(dateTime));
+      }
+    }));
+  } else if (props.kind === KINDS.date) {
+    return /*#__PURE__*/React.createElement(DatePicker, _extends({}, fieldProps, {
+      onChange: function onChange(dateTime) {
+        return handleSubmit(dateTimeToString(dateTime));
+      }
+    }));
+  }
+  return /*#__PURE__*/React.createElement(DatePicker, _extends({
+    showTime: true,
+    timeFormat: "h:mm A"
+  }, fieldProps, {
+    onChange: function onChange(dateTime) {
+      return handleSubmit(dateTimeToString(dateTime));
+    }
+  }));
+};
 
-// Copied from https://github.com/facebook/regenerator/blob/main/packages/runtime/runtime.js#L736=
-try {
-  regeneratorRuntime = runtime;
-} catch (accidentalStrictMode) {
-  if (typeof globalThis === "object") {
-    globalThis.regeneratorRuntime = runtime;
-  } else {
-    Function("r", "regeneratorRuntime = r")(runtime);
+var MultiOption = function MultiOption(props) {
+  var _useFormikFields = useFormikFields(props),
+    handleSubmit = _useFormikFields.handleSubmit,
+    fieldProps = _useFormikFields.fieldProps;
+  return /*#__PURE__*/React.createElement(Select, _extends({
+    isMulti: true,
+    isSearchable: true
+  }, fieldProps, {
+    onChange: function onChange(selectedOptions) {
+      return handleSubmit(pluck("value", selectedOptions));
+    }
+  }));
+};
+
+var Number$1 = function Number(props) {
+  var _useFormikFields = useFormikFields(props),
+    handleSubmit = _useFormikFields.handleSubmit,
+    fieldProps = _useFormikFields.fieldProps;
+  var showSubmitButton = props.individualSubmit && fieldProps.dirty;
+  return /*#__PURE__*/React.createElement(Input, _extends({}, fieldProps, {
+    type: "number",
+    suffix: showSubmitButton && /*#__PURE__*/React.createElement(Button, {
+      icon: Check,
+      style: "text",
+      onClick: function onClick() {
+        return handleSubmit();
+      }
+    })
+  }));
+};
+
+var RangePicker = function RangePicker(props) {
+  var _useFormikFields = useFormikFields(props),
+    handleSubmit = _useFormikFields.handleSubmit,
+    fieldProps = _useFormikFields.fieldProps;
+  var handleChange = function handleChange(_ref) {
+    var _ref2 = _slicedToArray(_ref, 2),
+      begin = _ref2[0],
+      end = _ref2[1];
+    return handleSubmit([dateTimeToString(begin), dateTimeToString(end)]);
+  };
+  if (props.kind === KINDS.dateRange) {
+    return /*#__PURE__*/React.createElement(DatePicker, _extends({}, fieldProps, {
+      type: "range",
+      onChange: handleChange
+    }));
   }
-}
 
-var _regeneratorRuntime = /*@__PURE__*/getDefaultExportFromCjs(regenerator);
+  //time_range
+  return /*#__PURE__*/React.createElement(TimePicker, _extends({}, fieldProps, {
+    use12Hours: true,
+    format: "h:mm A",
+    type: "range",
+    onChange: handleChange
+  }));
+};
+
+var SingleOption = function SingleOption(props) {
+  var _useFormikFields = useFormikFields(props),
+    handleSubmit = _useFormikFields.handleSubmit,
+    fieldProps = _useFormikFields.fieldProps;
+  return /*#__PURE__*/React.createElement(Select, _extends({
+    isSearchable: true
+  }, fieldProps, {
+    onChange: function onChange(_ref) {
+      var value = _ref.value;
+      return handleSubmit(value);
+    }
+  }));
+};
+
+var Text = function Text(props) {
+  var _useFormikFields = useFormikFields(props),
+    handleSubmit = _useFormikFields.handleSubmit,
+    fieldProps = _useFormikFields.fieldProps;
+  var showSubmitButton = props.individualSubmit && fieldProps.dirty;
+  return /*#__PURE__*/React.createElement(Input, _extends({}, fieldProps, {
+    suffix: showSubmitButton && /*#__PURE__*/React.createElement(Button, {
+      icon: Check,
+      style: "text",
+      onClick: function onClick() {
+        return handleSubmit();
+      }
+    })
+  }));
+};
+
+var TextArea = function TextArea(props) {
+  var _useTranslation = useTranslation(),
+    t = _useTranslation.t;
+  var _useFormikFields = useFormikFields(props),
+    handleSubmit = _useFormikFields.handleSubmit,
+    fieldProps = _useFormikFields.fieldProps;
+  var showSubmitButton = props.individualSubmit && fieldProps.dirty;
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Textarea, fieldProps), showSubmitButton && /*#__PURE__*/React.createElement(Button, {
+    className: "m-auto mt-2",
+    label: t("labels.submit"),
+    size: "small",
+    onClick: function onClick() {
+      return handleSubmit();
+    }
+  }));
+};
+
+function ownKeys$9(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread$9(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$9(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$9(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+var standardComponents = {
+  text: Text,
+  regex: Text,
+  textarea: TextArea,
+  text_area: TextArea,
+  // TODO: Remove text-area after integration in all hosts.
+  number: Number$1,
+  monetary: Number$1,
+  integer: Number$1,
+  decimal: Number$1,
+  date: DateOrTime,
+  time: DateOrTime,
+  datetime: DateOrTime,
+  single_option: SingleOption,
+  multi_option: MultiOption,
+  date_range: RangePicker,
+  time_range: RangePicker,
+  checkbox: Checkbox
+};
+var getFieldInput = function getFieldInput(_ref) {
+  var field = _ref.field,
+    _ref$customComponents = _ref.customComponents,
+    customComponents = _ref$customComponents === void 0 ? {} : _ref$customComponents;
+  var Component = customComponents[field.kind] || standardComponents[field.kind];
+  if (Component) {
+    return Component;
+  }
+  return null;
+};
+var removeItemsWithNullData = function removeItemsWithNullData(fieldValues) {
+  return fieldValues.filter(function (item) {
+    return !isNil(prop("data", item));
+  });
+};
+var removeNoiseFromValues = function removeNoiseFromValues(fieldValues) {
+  return map(pick(["id", "fieldId", "data"]), fieldValues);
+};
+var transformValues = function transformValues(_ref2) {
+  var formikValues = _ref2.values,
+    fields = _ref2.fields;
+  var allFieldValues = clone$1(formikValues);
+  var neetoFieldValues = [];
+  fields.forEach(function (_ref3) {
+    var id = _ref3.id,
+      name = _ref3.name;
+    var fieldPath = escapeString("".concat(name, "-").concat(id));
+    neetoFieldValues.push(allFieldValues[fieldPath]);
+    delete allFieldValues[fieldPath];
+  });
+  var cleanedFieldValues = pipe(removeItemsWithNullData, removeNoiseFromValues)(neetoFieldValues);
+  return _objectSpread$9(_objectSpread$9({}, allFieldValues), {}, {
+    fieldValuesAttributes: cleanedFieldValues
+  });
+};
+var getInitialFieldValue = function getInitialFieldValue(field) {
+  var fieldValues = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : [];
+  var existingFieldValueData = findBy({
+    fieldId: field.id
+  }, fieldValues);
+  var newFieldValueData = {
+    fieldId: field.id,
+    data: null
+  };
+  return _defineProperty({}, escapeString("".concat(field.name, "-").concat(field.id)), existingFieldValueData || newFieldValueData);
+};
+var getAllInitialFieldValues = function getAllInitialFieldValues(fields) {
+  var fieldValues = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : [];
+  return getNonSystemFields(fields).map(function (field) {
+    return getInitialFieldValue(field, fieldValues);
+  });
+};
+var mergeInitialValues = function mergeInitialValues(_ref5) {
+  var initialValues = _ref5.initialValues,
+    fields = _ref5.fields;
+  var initialValue = mergeAll([initialValues].concat(_toConsumableArray(getAllInitialFieldValues(fields, initialValues === null || initialValues === void 0 ? void 0 : initialValues.fieldValues))));
+  return omit(["fieldValues"], initialValue);
+};
+var getNonSystemFields = function getNonSystemFields(fields) {
+  return filterBy({
+    isSystem: false
+  }, fields);
+};
+var escapeString = function escapeString(string) {
+  return string.replace(/[^a-zA-Z0-9_]/g, function (match) {
+    var charCode = match.charCodeAt(0);
+    return "_".concat(charCode, "_");
+  });
+};
+var neetoFieldsUtils = {
+  mergeInitialValues: mergeInitialValues,
+  transformValues: transformValues
+};
 
-var dayjs_min = {exports: {}};
+function ownKeys$8(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread$8(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$8(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$8(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+var FieldInputs = function FieldInputs(_ref) {
+  var _ref$customComponents = _ref.customComponents,
+    customComponents = _ref$customComponents === void 0 ? {} : _ref$customComponents,
+    fields = _ref.fields,
+    formRef = _ref.formRef,
+    disabled = _ref.disabled,
+    isRequiredColumnName = _ref.isRequiredColumnName;
+  var _useTranslation = useTranslation(),
+    t = _useTranslation.t;
+  return getNonSystemFields(fields).map(function (field) {
+    var Field = getFieldInput({
+      field: field,
+      customComponents: customComponents
+    });
+    if (Field) {
+      return /*#__PURE__*/React.createElement(Field, _extends({
+        key: field.id
+      }, _objectSpread$8(_objectSpread$8({}, field), {}, {
+        formRef: formRef,
+        disabled: disabled,
+        isRequiredColumnName: isRequiredColumnName
+      })));
+    }
+    return /*#__PURE__*/React.createElement(Typography, {
+      key: field.id,
+      style: "body2"
+    }, t("messages.invalidKind"));
+  });
+};
 
-dayjs_min.exports;
+var NEETO_FIELDS_URL = "/neeto_fields_engine/api/v1";
+var FIELDS_URL = "".concat(NEETO_FIELDS_URL, "/fields");
+var FIELD_VALUES_URL = "".concat(NEETO_FIELDS_URL, "/field_values");
+var FIELD_VALUE_URL = "".concat(NEETO_FIELDS_URL, "/field_values/:fieldValueId");
+var FIELD_URL = "".concat(NEETO_FIELDS_URL, "/fields/:fieldId");
+var FIELDS_REORDER_URL = "".concat(FIELDS_URL, "/reorder");
+var CONFIGS_URL = "".concat(NEETO_FIELDS_URL, "/configs");
+var SINGULAR = {
+  count: 1
+};
+var PLURAL = {
+  count: 2
+};
 
-(function (module, exports) {
-	!function(t,e){module.exports=e();}(commonjsGlobal,(function(){var t=1e3,e=6e4,n=36e5,r="millisecond",i="second",s="minute",u="hour",a="day",o="week",f="month",h="quarter",c="year",d="date",l="Invalid Date",$=/^(\d{4})[-/]?(\d{1,2})?[-/]?(\d{0,2})[Tt\s]*(\d{1,2})?:?(\d{1,2})?:?(\d{1,2})?[.:]?(\d+)?$/,y=/\[([^\]]+)]|Y{1,4}|M{1,4}|D{1,2}|d{1,4}|H{1,2}|h{1,2}|a|A|m{1,2}|s{1,2}|Z{1,2}|SSS/g,M={name:"en",weekdays:"Sunday_Monday_Tuesday_Wednesday_Thursday_Friday_Saturday".split("_"),months:"January_February_March_April_May_June_July_August_September_October_November_December".split("_"),ordinal:function(t){var e=["th","st","nd","rd"],n=t%100;return "["+t+(e[(n-20)%10]||e[n]||e[0])+"]"}},m=function(t,e,n){var r=String(t);return !r||r.length>=e?t:""+Array(e+1-r.length).join(n)+t},v={s:m,z:function(t){var e=-t.utcOffset(),n=Math.abs(e),r=Math.floor(n/60),i=n%60;return (e<=0?"+":"-")+m(r,2,"0")+":"+m(i,2,"0")},m:function t(e,n){if(e.date()<n.date())return -t(n,e);var r=12*(n.year()-e.year())+(n.month()-e.month()),i=e.clone().add(r,f),s=n-i<0,u=e.clone().add(r+(s?-1:1),f);return +(-(r+(n-i)/(s?i-u:u-i))||0)},a:function(t){return t<0?Math.ceil(t)||0:Math.floor(t)},p:function(t){return {M:f,y:c,w:o,d:a,D:d,h:u,m:s,s:i,ms:r,Q:h}[t]||String(t||"").toLowerCase().replace(/s$/,"")},u:function(t){return void 0===t}},g="en",D={};D[g]=M;var p=function(t){return t instanceof _},S=function t(e,n,r){var i;if(!e)return g;if("string"==typeof e){var s=e.toLowerCase();D[s]&&(i=s),n&&(D[s]=n,i=s);var u=e.split("-");if(!i&&u.length>1)return t(u[0])}else {var a=e.name;D[a]=e,i=a;}return !r&&i&&(g=i),i||!r&&g},w=function(t,e){if(p(t))return t.clone();var n="object"==typeof e?e:{};return n.date=t,n.args=arguments,new _(n)},O=v;O.l=S,O.i=p,O.w=function(t,e){return w(t,{locale:e.$L,utc:e.$u,x:e.$x,$offset:e.$offset})};var _=function(){function M(t){this.$L=S(t.locale,null,!0),this.parse(t);}var m=M.prototype;return m.parse=function(t){this.$d=function(t){var e=t.date,n=t.utc;if(null===e)return new Date(NaN);if(O.u(e))return new Date;if(e instanceof Date)return new Date(e);if("string"==typeof e&&!/Z$/i.test(e)){var r=e.match($);if(r){var i=r[2]-1||0,s=(r[7]||"0").substring(0,3);return n?new Date(Date.UTC(r[1],i,r[3]||1,r[4]||0,r[5]||0,r[6]||0,s)):new Date(r[1],i,r[3]||1,r[4]||0,r[5]||0,r[6]||0,s)}}return new Date(e)}(t),this.$x=t.x||{},this.init();},m.init=function(){var t=this.$d;this.$y=t.getFullYear(),this.$M=t.getMonth(),this.$D=t.getDate(),this.$W=t.getDay(),this.$H=t.getHours(),this.$m=t.getMinutes(),this.$s=t.getSeconds(),this.$ms=t.getMilliseconds();},m.$utils=function(){return O},m.isValid=function(){return !(this.$d.toString()===l)},m.isSame=function(t,e){var n=w(t);return this.startOf(e)<=n&&n<=this.endOf(e)},m.isAfter=function(t,e){return w(t)<this.startOf(e)},m.isBefore=function(t,e){return this.endOf(e)<w(t)},m.$g=function(t,e,n){return O.u(t)?this[e]:this.set(n,t)},m.unix=function(){return Math.floor(this.valueOf()/1e3)},m.valueOf=function(){return this.$d.getTime()},m.startOf=function(t,e){var n=this,r=!!O.u(e)||e,h=O.p(t),l=function(t,e){var i=O.w(n.$u?Date.UTC(n.$y,e,t):new Date(n.$y,e,t),n);return r?i:i.endOf(a)},$=function(t,e){return O.w(n.toDate()[t].apply(n.toDate("s"),(r?[0,0,0,0]:[23,59,59,999]).slice(e)),n)},y=this.$W,M=this.$M,m=this.$D,v="set"+(this.$u?"UTC":"");switch(h){case c:return r?l(1,0):l(31,11);case f:return r?l(1,M):l(0,M+1);case o:var g=this.$locale().weekStart||0,D=(y<g?y+7:y)-g;return l(r?m-D:m+(6-D),M);case a:case d:return $(v+"Hours",0);case u:return $(v+"Minutes",1);case s:return $(v+"Seconds",2);case i:return $(v+"Milliseconds",3);default:return this.clone()}},m.endOf=function(t){return this.startOf(t,!1)},m.$set=function(t,e){var n,o=O.p(t),h="set"+(this.$u?"UTC":""),l=(n={},n[a]=h+"Date",n[d]=h+"Date",n[f]=h+"Month",n[c]=h+"FullYear",n[u]=h+"Hours",n[s]=h+"Minutes",n[i]=h+"Seconds",n[r]=h+"Milliseconds",n)[o],$=o===a?this.$D+(e-this.$W):e;if(o===f||o===c){var y=this.clone().set(d,1);y.$d[l]($),y.init(),this.$d=y.set(d,Math.min(this.$D,y.daysInMonth())).$d;}else l&&this.$d[l]($);return this.init(),this},m.set=function(t,e){return this.clone().$set(t,e)},m.get=function(t){return this[O.p(t)]()},m.add=function(r,h){var d,l=this;r=Number(r);var $=O.p(h),y=function(t){var e=w(l);return O.w(e.date(e.date()+Math.round(t*r)),l)};if($===f)return this.set(f,this.$M+r);if($===c)return this.set(c,this.$y+r);if($===a)return y(1);if($===o)return y(7);var M=(d={},d[s]=e,d[u]=n,d[i]=t,d)[$]||1,m=this.$d.getTime()+r*M;return O.w(m,this)},m.subtract=function(t,e){return this.add(-1*t,e)},m.format=function(t){var e=this,n=this.$locale();if(!this.isValid())return n.invalidDate||l;var r=t||"YYYY-MM-DDTHH:mm:ssZ",i=O.z(this),s=this.$H,u=this.$m,a=this.$M,o=n.weekdays,f=n.months,h=function(t,n,i,s){return t&&(t[n]||t(e,r))||i[n].slice(0,s)},c=function(t){return O.s(s%12||12,t,"0")},d=n.meridiem||function(t,e,n){var r=t<12?"AM":"PM";return n?r.toLowerCase():r},$={YY:String(this.$y).slice(-2),YYYY:this.$y,M:a+1,MM:O.s(a+1,2,"0"),MMM:h(n.monthsShort,a,f,3),MMMM:h(f,a),D:this.$D,DD:O.s(this.$D,2,"0"),d:String(this.$W),dd:h(n.weekdaysMin,this.$W,o,2),ddd:h(n.weekdaysShort,this.$W,o,3),dddd:o[this.$W],H:String(s),HH:O.s(s,2,"0"),h:c(1),hh:c(2),a:d(s,u,!0),A:d(s,u,!1),m:String(u),mm:O.s(u,2,"0"),s:String(this.$s),ss:O.s(this.$s,2,"0"),SSS:O.s(this.$ms,3,"0"),Z:i};return r.replace(y,(function(t,e){return e||$[t]||i.replace(":","")}))},m.utcOffset=function(){return 15*-Math.round(this.$d.getTimezoneOffset()/15)},m.diff=function(r,d,l){var $,y=O.p(d),M=w(r),m=(M.utcOffset()-this.utcOffset())*e,v=this-M,g=O.m(this,M);return g=($={},$[c]=g/12,$[f]=g,$[h]=g/3,$[o]=(v-m)/6048e5,$[a]=(v-m)/864e5,$[u]=v/n,$[s]=v/e,$[i]=v/t,$)[y]||v,l?g:O.a(g)},m.daysInMonth=function(){return this.endOf(f).$D},m.$locale=function(){return D[this.$L]},m.locale=function(t,e){if(!t)return this.$L;var n=this.clone(),r=S(t,e,!0);return r&&(n.$L=r),n},m.clone=function(){return O.w(this.$d,this)},m.toDate=function(){return new Date(this.valueOf())},m.toJSON=function(){return this.isValid()?this.toISOString():null},m.toISOString=function(){return this.$d.toISOString()},m.toString=function(){return this.$d.toUTCString()},M}(),T=_.prototype;return w.prototype=T,[["$ms",r],["$s",i],["$m",s],["$H",u],["$W",a],["$M",f],["$y",c],["$D",d]].forEach((function(t){T[t[1]]=function(e){return this.$g(e,t[0],t[1])};})),w.extend=function(t,e){return t.$i||(t(e,_,w),t.$i=!0),w},w.locale=S,w.isDayjs=p,w.unix=function(t){return w(1e3*t)},w.en=D[g],w.Ls=D,w.p={},w})); 
-} (dayjs_min, dayjs_min.exports));
+var fieldUrl = function fieldUrl(fieldId) {
+  return buildUrl(FIELD_URL, {
+    fieldId: fieldId
+  });
+};
+var fetch$1 = function fetch(_ref) {
+  var resourceType = _ref.resourceType,
+    ownerId = _ref.ownerId,
+    state = _ref.state;
+  return axios.get(FIELDS_URL, {
+    params: {
+      resourceType: resourceType,
+      ownerId: ownerId,
+      state: state
+    }
+  });
+};
+var create$1 = function create(payload) {
+  return axios.post(FIELDS_URL, payload);
+};
+var show = function show(_ref2) {
+  var fieldId = _ref2.fieldId,
+    ownerId = _ref2.ownerId;
+  return axios.get(fieldUrl(fieldId), {
+    params: {
+      ownerId: ownerId
+    }
+  });
+};
+var destroy$1 = function destroy(_ref3) {
+  var fieldId = _ref3.fieldId,
+    ownerId = _ref3.ownerId;
+  return axios["delete"](fieldUrl(fieldId), {
+    data: {
+      ownerId: ownerId
+    }
+  });
+};
+var update$1 = function update(_ref4) {
+  var fieldId = _ref4.fieldId,
+    payload = _ref4.payload;
+  return axios.put(fieldUrl(fieldId), payload);
+};
+var reorder = function reorder(payload) {
+  return axios.patch(FIELDS_REORDER_URL, payload);
+};
+var fieldsApi = {
+  fetch: fetch$1,
+  create: create$1,
+  show: show,
+  destroy: destroy$1,
+  update: update$1,
+  reorder: reorder
+};
 
-var dayjs_minExports = dayjs_min.exports;
-var dayjs = /*@__PURE__*/getDefaultExportFromCjs(dayjs_minExports);
+var QUERY_KEYS = {
+  FIELDS: "fields",
+  FIELD_VALUES: "field_values",
+  CONFIGS: "configurations"
+};
+var DEFAULT_STALE_TIME = 3600000; // 1 hour
 
-var dateSchema = yup.date().nullable();
-var buildFieldValidationSchema = function buildFieldValidationSchema(_ref) {
-  var kind = _ref.kind,
-    isRequired = _ref.isRequired,
-    fieldData = _ref.fieldData;
-  switch (kind) {
-    case KINDS.singleOption:
-    case KINDS.text:
-      {
-        var schema = yup.string().trim().nullable();
-        return isRequired ? schema.required(t("validations.thisIsRequired")) : schema;
-      }
-    case KINDS.number:
-    case KINDS.monetary:
-    case KINDS.decimal:
-      {
-        var _schema = yup.number().nullable().typeError(t("validations.notAValidNumber"));
-        return isRequired ? _schema.required(t("validations.thisIsRequired")) : _schema;
-      }
-    case KINDS.integer:
-      {
-        var _schema2 = yup.number().nullable().integer().typeError(t("validations.notAValidInteger"));
-        return isRequired ? _schema2.required(t("validations.thisIsRequired")) : _schema2;
-      }
-    case KINDS.date:
-    case KINDS.time:
-      return isRequired ? dateSchema.required(t("validations.thisIsRequired")) : dateSchema;
-    case KINDS.multiOption:
-      {
-        var _schema3 = yup.array().of(yup.string()).nullable();
-        return isRequired ? _schema3.min(1, t("validations.minOneItem")).required(t("validations.thisIsRequired")) : _schema3;
-      }
-    case KINDS.dateRange:
-    case KINDS.timeRange:
-      {
-        if (isRequired) {
-          return yup.array().of(dateSchema).required(t("validations.thisIsRequired"));
-        }
-        return yup.array().of(dateSchema).nullable();
-      }
-    case KINDS.checkbox:
-      return yup["boolean"]().nullable();
-    case KINDS.regex:
-      {
-        var regexPattern = fieldData === null || fieldData === void 0 ? void 0 : fieldData.condition;
-        var _schema4 = yup.string().nullable().matches(cleanedRegex(regexPattern), fieldData === null || fieldData === void 0 ? void 0 : fieldData.helpMessage);
-        return isRequired ? _schema4.required(t("validations.thisIsRequired")) : _schema4;
-      }
-    default:
-      return yup.mixed();
-  }
+function ownKeys$7(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread$7(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$7(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$7(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+var FIELDS = QUERY_KEYS.FIELDS;
+var useFetchFields = function useFetchFields(_ref, options) {
+  var resourceType = _ref.resourceType,
+    ownerId = _ref.ownerId,
+    state = _ref.state,
+    _ref$prefixQueryKeys = _ref.prefixQueryKeys,
+    prefixQueryKeys = _ref$prefixQueryKeys === void 0 ? [] : _ref$prefixQueryKeys;
+  return useQuery([FIELDS].concat(_toConsumableArray(prefixQueryKeys), [resourceType, ownerId, state]), function () {
+    return fieldsApi.fetch({
+      resourceType: resourceType,
+      ownerId: ownerId,
+      state: state
+    });
+  }, _objectSpread$7({
+    staleTime: DEFAULT_STALE_TIME
+  }, options));
 };
-var cleanedRegex = function cleanedRegex(expression) {
-  if (expression.startsWith("/") && expression.endsWith("/")) {
-    return expression.slice(1, -1);
-  }
-  return expression;
+var useCreateField = function useCreateField(options) {
+  var queryClient = useQueryClient();
+  return useMutation(fieldsApi.create, _objectSpread$7(_objectSpread$7({}, options), {}, {
+    onSuccess: function onSuccess() {
+      var _options$onSuccess;
+      for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+        args[_key] = arguments[_key];
+      }
+      options === null || options === void 0 ? void 0 : (_options$onSuccess = options.onSuccess) === null || _options$onSuccess === void 0 ? void 0 : _options$onSuccess.call.apply(_options$onSuccess, [options].concat(args));
+      queryClient.invalidateQueries(FIELDS);
+    }
+  }));
 };
-var buildOptionsToLabelAndValue = function buildOptionsToLabelAndValue() {
-  var optionObjects = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
-  return optionObjects.map(function (_ref2) {
-    var label = _ref2.label,
-      value = _ref2.value;
-    return {
-      label: label,
-      value: value || label
-    };
-  });
+var useShowField = function useShowField(_ref2, options) {
+  var fieldId = _ref2.fieldId,
+    ownerId = _ref2.ownerId;
+  var queryKey = [FIELDS, fieldId];
+  return useQuery(queryKey, function () {
+    return fieldsApi.show({
+      fieldId: fieldId,
+      ownerId: ownerId
+    });
+  }, options);
 };
-var buildArrayToLabelAndValues = function buildArrayToLabelAndValues(value) {
-  return map(toLabelAndValue, value || []);
+var useUpdateField = function useUpdateField(options) {
+  var queryClient = useQueryClient();
+  return useMutation(fieldsApi.update, _objectSpread$7(_objectSpread$7({}, options), {}, {
+    onSuccess: function onSuccess() {
+      var _options$onSuccess2;
+      for (var _len2 = arguments.length, args = new Array(_len2), _key2 = 0; _key2 < _len2; _key2++) {
+        args[_key2] = arguments[_key2];
+      }
+      options === null || options === void 0 ? void 0 : (_options$onSuccess2 = options.onSuccess) === null || _options$onSuccess2 === void 0 ? void 0 : _options$onSuccess2.call.apply(_options$onSuccess2, [options].concat(args));
+      queryClient.invalidateQueries(FIELDS);
+    }
+  }));
 };
-var validateField = /*#__PURE__*/function () {
-  var _ref4 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee(_ref3) {
-    var fieldValue, fieldName, isRequired, kind, fieldData;
-    return _regeneratorRuntime.wrap(function _callee$(_context) {
-      while (1) switch (_context.prev = _context.next) {
-        case 0:
-          fieldValue = _ref3.fieldValue, fieldName = _ref3.fieldName, isRequired = _ref3.isRequired, kind = _ref3.kind, fieldData = _ref3.fieldData;
-          _context.prev = 1;
-          _context.next = 4;
-          return yup.object().shape(_defineProperty({}, fieldName, buildFieldValidationSchema({
-            kind: kind,
-            isRequired: isRequired,
-            fieldData: fieldData
-          }))).validate(_defineProperty({}, fieldName, fieldValue));
-        case 4:
-          return _context.abrupt("return", false);
-        case 7:
-          _context.prev = 7;
-          _context.t0 = _context["catch"](1);
-          return _context.abrupt("return", _context.t0.errors);
-        case 10:
-        case "end":
-          return _context.stop();
+var useDestroyField = function useDestroyField(options) {
+  var queryClient = useQueryClient();
+  return useMutation(fieldsApi.destroy, _objectSpread$7(_objectSpread$7({}, options), {}, {
+    onSuccess: function onSuccess() {
+      var _options$onSuccess3;
+      for (var _len3 = arguments.length, args = new Array(_len3), _key3 = 0; _key3 < _len3; _key3++) {
+        args[_key3] = arguments[_key3];
       }
-    }, _callee, null, [[1, 7]]);
+      options === null || options === void 0 ? void 0 : (_options$onSuccess3 = options.onSuccess) === null || _options$onSuccess3 === void 0 ? void 0 : _options$onSuccess3.call.apply(_options$onSuccess3, [options].concat(args));
+      queryClient.invalidateQueries(FIELDS);
+    }
   }));
-  return function validateField(_x) {
-    return _ref4.apply(this, arguments);
-  };
-}();
-var dateTimeToString = function dateTimeToString(dateTime) {
-  return dayjs(dateTime).toString();
+};
+var useReorderFields = function useReorderFields() {
+  var queryClient = useQueryClient();
+  return useMutation(fieldsApi.reorder, {
+    onSuccess: function onSuccess() {
+      queryClient.invalidateQueries(FIELDS);
+    }
+  });
 };
 
-var _excluded = ["name", "id", "kind", "data", "individualSubmit", "formRef", "formRefs", "disabled", "isRequiredColumnName"];
 function ownKeys$6(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 function _objectSpread$6(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$6(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$6(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
-var useFormikFields = function useFormikFields(_ref) {
-  var name = _ref.name,
-    fieldId = _ref.id,
-    kind = _ref.kind,
-    fieldData = _ref.data,
-    individualSubmit = _ref.individualSubmit,
-    formRef = _ref.formRef,
-    formRefs = _ref.formRefs,
-    disabled = _ref.disabled,
-    _ref$isRequiredColumn = _ref.isRequiredColumnName,
-    isRequiredColumnName = _ref$isRequiredColumn === void 0 ? "isRequired" : _ref$isRequiredColumn,
-    props = _objectWithoutProperties(_ref, _excluded);
-  var formikContext = useFormikContext();
-  var setFieldValue = formikContext.setFieldValue,
-    submitForm = formikContext.submitForm,
-    dirty = formikContext.dirty,
-    isSubmitting = formikContext.isSubmitting;
-  var fieldPath = "".concat(name, "-").concat(fieldId);
-  var fieldName = kind === KINDS.multiOption ? "values" : "value";
-  var fieldValuePath = "".concat(fieldPath, ".data.").concat(fieldName);
-  if (isNil(formRef) && isNotNil(formRefs)) {
-    formRefs.current[fieldValuePath] = formikContext;
-  } else if (isNil(formRefs) && isNotNil(formRef)) {
-    formRef.current = formikContext;
-  }
-  var _useField = useField({
-      name: fieldValuePath,
-      validate: function validate(fieldValue) {
-        return validateField({
-          fieldValue: fieldValue,
-          fieldName: name,
-          isRequired: props[isRequiredColumnName],
-          kind: kind,
-          fieldData: fieldData
-        });
-      }
-    }),
-    _useField2 = _slicedToArray(_useField, 3),
-    formikFieldProps = _useField2[0],
-    meta = _useField2[1],
-    helpers = _useField2[2];
-  var handleSubmit = function handleSubmit(value) {
-    isNotNil(value) && setFieldValue(fieldValuePath, value);
-    individualSubmit && submitForm();
+var arrangeOptionsDisplayOrder = function arrangeOptionsDisplayOrder(options) {
+  return options.map(function (option, index) {
+    return _objectSpread$6(_objectSpread$6({}, option), {}, {
+      displayOrder: index
+    });
+  });
+};
+var buildPayload = function buildPayload(_ref) {
+  var formValues = _ref.formValues,
+    _ref$resourceType = _ref.resourceType,
+    resourceType = _ref$resourceType === void 0 ? "" : _ref$resourceType,
+    _ref$ownerId = _ref.ownerId,
+    ownerId = _ref$ownerId === void 0 ? "" : _ref$ownerId;
+  var kind = formValues.kind.value;
+  var name = formValues.name.trim();
+  return {
+    ownerId: isEmpty(ownerId) ? undefined : ownerId,
+    field: _objectSpread$6(_objectSpread$6({}, omit(["createdAt", "id", "ownerId", "ownerType", "updatedAt"], formValues)), {}, {
+      kind: kind,
+      name: name,
+      resourceType: isEmpty(resourceType) ? undefined : resourceType,
+      data: isDropdown(kind) ? arrangeOptionsDisplayOrder(formValues.data) : formValues.data
+    })
   };
-  var getValueForField = function getValueForField(value) {
-    if (kind === KINDS.singleOption) {
-      value = toLabelAndValue(value);
-    } else if (kind === KINDS.multiOption) {
-      value = buildArrayToLabelAndValues(value);
+};
+var isDropdown = function isDropdown(kind) {
+  return ["single_option", "multi_option"].includes(kind);
+};
+var isRegex = function isRegex(kind) {
+  return kind === "regex";
+};
+var isAdditionalDataNeeded = function isAdditionalDataNeeded(kind) {
+  return ADDITIONAL_DATA_NEEDED_FIELD_KINDS.includes(kind);
+};
+var getPermittedKinds = function getPermittedKinds(_ref2) {
+  var allowedKinds = _ref2.allowedKinds,
+    selectedKind = _ref2.selectedKind;
+  var filteredKinds = pick(allowedKinds, FIELD_KINDS);
+  var permittedKinds = filterBy({
+    group: selectedKind === null || selectedKind === void 0 ? void 0 : selectedKind.group
+  }, values(filteredKinds));
+  return permittedKinds;
+};
+var generateValidationSchema = function generateValidationSchema(additionalValidations) {
+  return yup.object().shape(_objectSpread$6(_objectSpread$6({}, BASIC_FIELD_FORM_VALIDATIONS), additionalValidations));
+};
+var renderFormFooter = function renderFormFooter(_ref3) {
+  var onClose = _ref3.onClose,
+    loading = _ref3.loading,
+    _ref3$dirty = _ref3.dirty,
+    dirty = _ref3$dirty === void 0 ? true : _ref3$dirty;
+  return /*#__PURE__*/React.createElement(Pane.Footer, null, /*#__PURE__*/React.createElement(ActionBlock, {
+    cancelButtonProps: {
+      onClick: onClose,
+      style: "text",
+      disabled: loading
+    },
+    submitButtonProps: {
+      label: t("labels.saveChanges"),
+      className: "mr-2",
+      type: "submit",
+      disabled: !dirty,
+      loading: loading
     }
-    return value;
-  };
-  var isDropdown = ["single_option", "multi_option"].includes(kind);
-  if (isSubmitting && !meta.touched) {
-    helpers.setTouched(true);
+  }));
+};
+
+var regexValidationSchema = yup.object().shape({
+  condition: yup.string().required(t("validations.regexConditionIsRequired")),
+  helpMessage: yup.string().required(t("validations.regexHelpMessageIsRequired"))
+});
+var dropDownOptionsValidationSchema = yup.array().of(yup.object().shape({
+  label: yup.string().trim().required(t("validations.fieldOptionIsRequired")),
+  displayOrder: yup.number()
+})).min(1, t("validations.atLeastFieldOptionIsRequired"));
+var FIELD_KINDS = {
+  text: {
+    value: "text",
+    label: t("fields.kinds.text"),
+    group: 1
+  },
+  number: {
+    value: "number",
+    label: t("fields.kinds.number"),
+    group: 2
+  },
+  monetary: {
+    value: "monetary",
+    label: t("fields.kinds.monetary"),
+    group: 2
+  },
+  single_option: {
+    value: "single_option",
+    label: t("fields.kinds.singleOption"),
+    group: 3
+  },
+  multi_option: {
+    value: "multi_option",
+    label: t("fields.kinds.multiOption"),
+    group: 3
+  },
+  date: {
+    value: "date",
+    label: t("fields.kinds.date"),
+    group: 4
+  },
+  time: {
+    value: "time",
+    label: t("fields.kinds.time"),
+    group: 5
+  },
+  date_range: {
+    value: "date_range",
+    label: t("fields.kinds.dateRange"),
+    group: 6
+  },
+  time_range: {
+    value: "time_range",
+    label: t("fields.kinds.timeRange"),
+    group: 7
+  },
+  text_area: {
+    value: "text_area",
+    label: t("fields.kinds.textArea"),
+    group: 1
+  },
+  textarea: {
+    value: "textarea",
+    label: t("fields.kinds.textarea"),
+    group: 1
+  },
+  person: {
+    value: "person",
+    label: t("fields.kinds.person"),
+    group: 8
+  },
+  checkbox: {
+    value: "checkbox",
+    label: t("fields.kinds.checkbox"),
+    group: 9
+  },
+  regex: {
+    value: "regex",
+    label: t("fields.kinds.regex"),
+    group: 10
+  },
+  integer: {
+    value: "integer",
+    label: t("fields.kinds.integer"),
+    group: 2
+  },
+  decimal: {
+    value: "decimal",
+    label: t("fields.kinds.decimal"),
+    group: 2
+  },
+  datetime: {
+    value: "datetime",
+    label: t("fields.kinds.datetime"),
+    group: 11
   }
-  return {
-    handleSubmit: handleSubmit,
-    fieldProps: _objectSpread$6(_objectSpread$6({}, formikFieldProps), {}, {
-      required: props[isRequiredColumnName],
-      error: meta.touched && meta.error,
-      options: isDropdown ? buildOptionsToLabelAndValue(fieldData) : undefined,
-      value: getValueForField(formikFieldProps.value),
-      dirty: dirty,
-      label: !individualSubmit && capitalize$1(name),
-      disabled: disabled
-    })
-  };
 };
-
-var Checkbox = function Checkbox(props) {
-  var _useFormikFields = useFormikFields(props),
-    handleSubmit = _useFormikFields.handleSubmit,
-    fieldProps = _useFormikFields.fieldProps;
-  return /*#__PURE__*/React.createElement(Switch$1, _extends({}, fieldProps, {
-    checked: fieldProps.value,
-    onChange: function onChange(_ref) {
-      var checked = _ref.target.checked;
-      return handleSubmit(checked);
-    }
-  }));
+var ADDITIONAL_DATA_NEEDED_FIELD_KINDS = ["single_option", "multi_option", "regex"];
+var INITIAL_FIELDS = {
+  name: "",
+  kind: toLabelAndValue("text"),
+  isRequired: false
 };
-
-var DateOrTime = function DateOrTime(props) {
-  var _useFormikFields = useFormikFields(props),
-    handleSubmit = _useFormikFields.handleSubmit,
-    fieldProps = _useFormikFields.fieldProps;
-  if (props.kind === KINDS.time) {
-    return /*#__PURE__*/React.createElement(TimePicker, _extends({}, fieldProps, {
-      use12Hours: true,
-      format: "h:mm A",
-      onChange: function onChange(dateTime) {
-        return handleSubmit(dateTimeToString(dateTime));
-      }
-    }));
-  } else if (props.kind === KINDS.date) {
-    return /*#__PURE__*/React.createElement(DatePicker, _extends({}, fieldProps, {
-      onChange: function onChange(dateTime) {
-        return handleSubmit(dateTimeToString(dateTime));
-      }
-    }));
-  }
-  return /*#__PURE__*/React.createElement(DatePicker, _extends({
-    showTime: true,
-    timeFormat: "h:mm A"
-  }, fieldProps, {
-    onChange: function onChange(dateTime) {
-      return handleSubmit(dateTimeToString(dateTime));
-    }
-  }));
+var DEFAULT_OPTION = {
+  label: "",
+  displayOrder: 0
 };
-
-var MultiOption = function MultiOption(props) {
-  var _useFormikFields = useFormikFields(props),
-    handleSubmit = _useFormikFields.handleSubmit,
-    fieldProps = _useFormikFields.fieldProps;
-  return /*#__PURE__*/React.createElement(Select$1, _extends({
-    isMulti: true,
-    isSearchable: true
-  }, fieldProps, {
-    onChange: function onChange(selectedOptions) {
-      return handleSubmit(pluck("value", selectedOptions));
-    }
-  }));
+var DEFAULT_OPTIONS_DATA = [DEFAULT_OPTION];
+var DEFAULT_REGEX_DATA = {
+  regex: "",
+  helpMessage: ""
 };
-
-var Number$1 = function Number(props) {
-  var _useFormikFields = useFormikFields(props),
-    handleSubmit = _useFormikFields.handleSubmit,
-    fieldProps = _useFormikFields.fieldProps;
-  var showSubmitButton = props.individualSubmit && fieldProps.dirty;
-  return /*#__PURE__*/React.createElement(Input$1, _extends({}, fieldProps, {
-    type: "number",
-    suffix: showSubmitButton && /*#__PURE__*/React.createElement(Button$1, {
-      icon: Check,
-      style: "text",
-      onClick: function onClick() {
-        return handleSubmit();
-      }
-    })
-  }));
+var BASIC_FIELD_FORM_VALIDATIONS = {
+  name: yup.string().trim().required(t("validations.fieldNameIsRequired")),
+  isRequired: yup["boolean"](),
+  kind: yup.object().shape({
+    value: yup.string().required()
+  }).required(t("validations.kindIsRequired")),
+  data: yup.mixed().when("kind", {
+    is: function is(kind) {
+      return isRegex(kind === null || kind === void 0 ? void 0 : kind.value);
+    },
+    then: regexValidationSchema
+  }).when("kind", {
+    is: function is(kind) {
+      return isDropdown(kind === null || kind === void 0 ? void 0 : kind.value);
+    },
+    then: dropDownOptionsValidationSchema
+  })
 };
 
-var RangePicker = function RangePicker(props) {
-  var _useFormikFields = useFormikFields(props),
-    handleSubmit = _useFormikFields.handleSubmit,
-    fieldProps = _useFormikFields.fieldProps;
-  var handleChange = function handleChange(_ref) {
-    var _ref2 = _slicedToArray(_ref, 2),
-      begin = _ref2[0],
-      end = _ref2[1];
-    return handleSubmit([dateTimeToString(begin), dateTimeToString(end)]);
+var AdditionalInputs = function AdditionalInputs() {
+  var _useTranslation = useTranslation(),
+    t = _useTranslation.t;
+  var _useFormikContext = useFormikContext(),
+    _useFormikContext$val = _useFormikContext.values,
+    kind = _useFormikContext$val.kind,
+    options = _useFormikContext$val.data,
+    isSystem = _useFormikContext$val.isSystem;
+  var removeOption = function removeOption(arrayHelpers, index) {
+    return arrayHelpers.remove(index);
   };
-  if (props.kind === KINDS.dateRange) {
-    return /*#__PURE__*/React.createElement(DatePicker, _extends({}, fieldProps, {
-      type: "range",
-      onChange: handleChange
+  var addOption = function addOption(arrayHelpers) {
+    return arrayHelpers.push(DEFAULT_OPTION);
+  };
+  if (isDropdown(kind.value)) {
+    return /*#__PURE__*/React.createElement(FieldArray, {
+      name: "data"
+    }, function (arrayHelpers) {
+      return /*#__PURE__*/React.createElement("div", {
+        className: "flex w-full flex-col gap-y-4"
+      }, /*#__PURE__*/React.createElement(Label, {
+        required: true
+      }, t("titles.dropdownOptions")), isNotEmpty(options) && Array.isArray(options) && options.map(function (_, index) {
+        return /*#__PURE__*/React.createElement("div", {
+          className: "flex w-full space-x-3",
+          key: index
+        }, /*#__PURE__*/React.createElement("div", {
+          className: "w-full"
+        }, /*#__PURE__*/React.createElement(Input$1, {
+          disabled: isSystem,
+          name: "data.".concat(index, ".label"),
+          placeholder: t("placeholders.enterAnOption"),
+          suffix: options.length > 1 && /*#__PURE__*/React.createElement(Button$1, {
+            icon: Delete,
+            style: "text",
+            onClick: function onClick() {
+              return removeOption(arrayHelpers, index);
+            }
+          })
+        })));
+      }), /*#__PURE__*/React.createElement(Button$1, {
+        fullWidth: true,
+        className: "mb-6 border-dashed text-xs uppercase",
+        label: t("labels.addMoreOption"),
+        style: "secondary",
+        onClick: function onClick() {
+          return addOption(arrayHelpers);
+        }
+      }));
+    });
+  } else if (isRegex(kind.value)) {
+    return /*#__PURE__*/React.createElement("div", {
+      className: "flex w-full flex-col gap-y-4"
+    }, /*#__PURE__*/React.createElement(Label, {
+      required: true
+    }, t("titles.regexOptions")), /*#__PURE__*/React.createElement(Input$1, {
+      disabled: isSystem,
+      label: t("labels.regexCondition"),
+      name: "data.condition",
+      placeholder: t("placeholders.regexExample")
+    }), /*#__PURE__*/React.createElement(Input$1, {
+      disabled: isSystem,
+      label: t("labels.helpMessage"),
+      name: "data.helpMessage",
+      placeholder: t("placeholders.enterErrorMessage")
     }));
   }
-
-  //time_range
-  return /*#__PURE__*/React.createElement(TimePicker, _extends({}, fieldProps, {
-    use12Hours: true,
-    format: "h:mm A",
-    type: "range",
-    onChange: handleChange
-  }));
+  return null;
 };
 
-var SingleOption = function SingleOption(props) {
-  var _useFormikFields = useFormikFields(props),
-    handleSubmit = _useFormikFields.handleSubmit,
-    fieldProps = _useFormikFields.fieldProps;
-  return /*#__PURE__*/React.createElement(Select$1, _extends({
-    isSearchable: true
-  }, fieldProps, {
-    onChange: function onChange(_ref) {
-      var value = _ref.value;
-      return handleSubmit(value);
-    }
-  }));
-};
+/** @type {React.FC<import("types").FieldFormProps>} */
 
-var Text = function Text(props) {
-  var _useFormikFields = useFormikFields(props),
-    handleSubmit = _useFormikFields.handleSubmit,
-    fieldProps = _useFormikFields.fieldProps;
-  var showSubmitButton = props.individualSubmit && fieldProps.dirty;
-  return /*#__PURE__*/React.createElement(Input$1, _extends({}, fieldProps, {
-    suffix: showSubmitButton && /*#__PURE__*/React.createElement(Button$1, {
-      icon: Check,
-      style: "text",
-      onClick: function onClick() {
-        return handleSubmit();
-      }
-    })
-  }));
+var FieldForm = function FieldForm(_ref) {
+  var chosenKind = _ref.chosenKind,
+    _ref$kindSelectOption = _ref.kindSelectOptions,
+    kindSelectOptions = _ref$kindSelectOption === void 0 ? [] : _ref$kindSelectOption,
+    _ref$isSystem = _ref.isSystem,
+    isSystem = _ref$isSystem === void 0 ? false : _ref$isSystem,
+    _ref$hideRequiredSwit = _ref.hideRequiredSwitch,
+    hideRequiredSwitch = _ref$hideRequiredSwit === void 0 ? false : _ref$hideRequiredSwit,
+    children = _ref.children;
+  var _useTranslation = useTranslation(),
+    t = _useTranslation.t;
+  var _useFormikContext = useFormikContext(),
+    options = _useFormikContext.values.data,
+    setFieldValue = _useFormikContext.setFieldValue;
+  var handleKindChange = function handleKindChange(kind) {
+    setFieldValue("kind", kind);
+    if (isDropdown(kind.value)) {
+      setFieldValue("data", options !== null && options !== void 0 ? options : DEFAULT_OPTIONS_DATA);
+    } else if (isRegex(kind.value)) {
+      setFieldValue("data", options !== null && options !== void 0 ? options : DEFAULT_REGEX_DATA);
+    }
+  };
+  return /*#__PURE__*/React.createElement(Pane.Body, null, /*#__PURE__*/React.createElement("div", {
+    className: "w-full space-y-4"
+  }, /*#__PURE__*/React.createElement(Input$1, {
+    required: true,
+    disabled: isSystem,
+    label: t("labels.fieldName"),
+    name: "name",
+    placeholder: t("placeholders.enterFieldName")
+  }), /*#__PURE__*/React.createElement(Select$1, {
+    isSearchable: true,
+    isDisabled: isSystem,
+    label: t("labels.fieldKind"),
+    name: "kind",
+    options: kindSelectOptions,
+    onChange: handleKindChange
+  }), isAdditionalDataNeeded(chosenKind) && /*#__PURE__*/React.createElement(AdditionalInputs, null), !hideRequiredSwitch && /*#__PURE__*/React.createElement(Label, {
+    className: "flex items-center gap-2"
+  }, /*#__PURE__*/React.createElement(Switch$1, {
+    name: "isRequired"
+  }), /*#__PURE__*/React.createElement(Typography, {
+    className: "leading-4",
+    component: "span",
+    style: "body2"
+  }, t("labels.isRequired"))), children));
 };
 
-var TextArea = function TextArea(props) {
+var _excluded$2 = ["resourceType", "allowedKinds", "ownerId", "additionalValidations", "initialValues", "onClose", "onMutationSuccess"];
+function ownKeys$5(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread$5(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$5(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$5(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+
+/** @type {React.FC<import("types").AddProps>} */
+
+var Add = function Add(_ref) {
+  var resourceType = _ref.resourceType,
+    _ref$allowedKinds = _ref.allowedKinds,
+    allowedKinds = _ref$allowedKinds === void 0 ? ALL_KINDS : _ref$allowedKinds,
+    ownerId = _ref.ownerId,
+    additionalValidations = _ref.additionalValidations,
+    initialValues = _ref.initialValues,
+    onClose = _ref.onClose,
+    onMutationSuccess = _ref.onMutationSuccess,
+    props = _objectWithoutProperties(_ref, _excluded$2);
   var _useTranslation = useTranslation(),
     t = _useTranslation.t;
-  var _useFormikFields = useFormikFields(props),
-    handleSubmit = _useFormikFields.handleSubmit,
-    fieldProps = _useFormikFields.fieldProps;
-  var showSubmitButton = props.individualSubmit && fieldProps.dirty;
-  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Textarea, fieldProps), showSubmitButton && /*#__PURE__*/React.createElement(Button$1, {
-    className: "m-auto mt-2",
-    label: t("labels.submit"),
-    size: "small",
-    onClick: function onClick() {
-      return handleSubmit();
+  var _useCreateField = useCreateField({
+      onSuccess: onMutationSuccess
+    }),
+    createField = _useCreateField.mutate,
+    isSubmitting = _useCreateField.isLoading;
+  var filteredKinds = values(pick(allowedKinds, FIELD_KINDS));
+  var handleSubmit = function handleSubmit(formValues) {
+    var payload = buildPayload({
+      formValues: formValues,
+      resourceType: resourceType,
+      ownerId: ownerId
+    });
+    createField(payload, {
+      onSuccess: onClose
+    });
+  };
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Pane.Header, null, /*#__PURE__*/React.createElement(Typography, {
+    style: "h2"
+  }, t("titles.addField"))), /*#__PURE__*/React.createElement(Form, {
+    formikProps: {
+      initialValues: _objectSpread$5(_objectSpread$5({}, initialValues), INITIAL_FIELDS),
+      validationSchema: generateValidationSchema(additionalValidations),
+      onSubmit: handleSubmit
     }
+  }, function (_ref2) {
+    var dirty = _ref2.dirty,
+      kind = _ref2.values.kind;
+    return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(FieldForm, _extends({
+      chosenKind: kind.value,
+      kindSelectOptions: filteredKinds
+    }, props)), renderFormFooter({
+      onClose: onClose,
+      loading: isSubmitting,
+      dirty: dirty
+    }));
   }));
 };
 
-function ownKeys$5(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-function _objectSpread$5(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$5(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$5(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
-var standardComponents = {
-  text: Text,
-  regex: Text,
-  textarea: TextArea,
-  text_area: TextArea,
-  // TODO: Remove text-area after integration in all hosts.
-  number: Number$1,
-  monetary: Number$1,
-  integer: Number$1,
-  decimal: Number$1,
-  date: DateOrTime,
-  time: DateOrTime,
-  datetime: DateOrTime,
-  single_option: SingleOption,
-  multi_option: MultiOption,
-  date_range: RangePicker,
-  time_range: RangePicker,
-  checkbox: Checkbox
-};
-var getFieldInput = function getFieldInput(_ref) {
-  var field = _ref.field,
-    _ref$customComponents = _ref.customComponents,
-    customComponents = _ref$customComponents === void 0 ? {} : _ref$customComponents;
-  var Component = customComponents[field.kind] || standardComponents[field.kind];
-  if (Component) {
-    return Component;
-  }
-  return null;
-};
-var removeItemsWithNullData = function removeItemsWithNullData(fieldValues) {
-  return fieldValues.filter(function (item) {
-    return !isNil(prop("data", item));
-  });
-};
-var removeNoiseFromValues = function removeNoiseFromValues(fieldValues) {
-  return map(pick(["id", "fieldId", "data"]), fieldValues);
-};
-var transformValues = function transformValues(_ref2) {
-  var formikValues = _ref2.values,
-    fields = _ref2.fields;
-  var allFieldValues = clone$1(formikValues);
-  var neetoFieldValues = [];
-  fields.forEach(function (_ref3) {
-    var id = _ref3.id,
-      name = _ref3.name;
-    neetoFieldValues.push(allFieldValues["".concat(name, "-").concat(id)]);
-    delete allFieldValues["".concat(name, "-").concat(id)];
-  });
-  var cleanedFieldValues = pipe(removeItemsWithNullData, removeNoiseFromValues)(neetoFieldValues);
-  return _objectSpread$5(_objectSpread$5({}, allFieldValues), {}, {
-    fieldValuesAttributes: cleanedFieldValues
-  });
-};
-var getInitialFieldValue = function getInitialFieldValue(field) {
-  var fieldValues = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : [];
-  var existingFieldValueData = findBy({
-    fieldId: field.id
-  }, fieldValues);
-  var newFieldValueData = {
-    fieldId: field.id,
-    data: null
-  };
-  return _defineProperty({}, "".concat(field.name, "-").concat(field.id), existingFieldValueData || newFieldValueData);
-};
-var getAllInitialFieldValues = function getAllInitialFieldValues(fields) {
-  var fieldValues = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : [];
-  return getNonSystemFields(fields).map(function (field) {
-    return getInitialFieldValue(field, fieldValues);
-  });
-};
-var mergeInitialValues = function mergeInitialValues(_ref5) {
-  var initialValues = _ref5.initialValues,
-    fields = _ref5.fields;
-  var initialValue = mergeAll([initialValues].concat(_toConsumableArray(getAllInitialFieldValues(fields, initialValues === null || initialValues === void 0 ? void 0 : initialValues.fieldValues))));
-  return omit(["fieldValues"], initialValue);
-};
-var getNonSystemFields = function getNonSystemFields(fields) {
-  return filterBy({
-    isSystem: false
-  }, fields);
-};
-var neetoFieldsUtils = {
-  mergeInitialValues: mergeInitialValues,
-  transformValues: transformValues
-};
-
+var _excluded$1 = ["fieldId", "allowedKinds", "ownerId", "additionalValidations", "initialValues", "onClose", "onMutationSuccess"];
 function ownKeys$4(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 function _objectSpread$4(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$4(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$4(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
-var FieldInputs = function FieldInputs(_ref) {
-  var _ref$customComponents = _ref.customComponents,
-    customComponents = _ref$customComponents === void 0 ? {} : _ref$customComponents,
-    fields = _ref.fields,
-    formRef = _ref.formRef,
-    disabled = _ref.disabled,
-    isRequiredColumnName = _ref.isRequiredColumnName;
+
+/** @type {React.FC<import("types").EditProps>} */
+
+var Edit = function Edit(_ref) {
+  var fieldId = _ref.fieldId,
+    _ref$allowedKinds = _ref.allowedKinds,
+    allowedKinds = _ref$allowedKinds === void 0 ? ALL_KINDS : _ref$allowedKinds,
+    ownerId = _ref.ownerId,
+    _ref$additionalValida = _ref.additionalValidations,
+    additionalValidations = _ref$additionalValida === void 0 ? {} : _ref$additionalValida,
+    _ref$initialValues = _ref.initialValues,
+    initialValues = _ref$initialValues === void 0 ? {} : _ref$initialValues,
+    onClose = _ref.onClose,
+    onMutationSuccess = _ref.onMutationSuccess,
+    props = _objectWithoutProperties(_ref, _excluded$1);
   var _useTranslation = useTranslation(),
     t = _useTranslation.t;
-  return getNonSystemFields(fields).map(function (field) {
-    var Field = getFieldInput({
-      field: field,
-      customComponents: customComponents
+  var _useShowField = useShowField({
+      fieldId: fieldId,
+      ownerId: ownerId
+    }),
+    _useShowField$data = _useShowField.data,
+    _useShowField$data2 = _useShowField$data === void 0 ? {} : _useShowField$data,
+    _useShowField$data2$f = _useShowField$data2.field,
+    field = _useShowField$data2$f === void 0 ? {} : _useShowField$data2$f;
+  var _useUpdateField = useUpdateField({
+      onSuccess: function onSuccess() {
+        for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+          args[_key] = arguments[_key];
+        }
+        onMutationSuccess === null || onMutationSuccess === void 0 ? void 0 : onMutationSuccess.apply(void 0, args);
+        onClose();
+      }
+    }),
+    updateField = _useUpdateField.mutate,
+    isSubmitting = _useUpdateField.isLoading;
+  var handleSubmit = function handleSubmit(formValues) {
+    var payload = buildPayload({
+      formValues: formValues,
+      ownerId: ownerId
     });
-    if (Field) {
-      return /*#__PURE__*/React.createElement(Field, _extends({
-        key: field.id
-      }, _objectSpread$4(_objectSpread$4({}, field), {}, {
-        formRef: formRef,
-        disabled: disabled,
-        isRequiredColumnName: isRequiredColumnName
-      })));
+    updateField({
+      fieldId: fieldId,
+      payload: payload
+    });
+  };
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Pane.Header, null, /*#__PURE__*/React.createElement(Typography, {
+    style: "h2"
+  }, t("titles.editField"))), /*#__PURE__*/React.createElement(Form, {
+    formikProps: {
+      initialValues: _objectSpread$4(_objectSpread$4({}, initialValues), assoc("kind", FIELD_KINDS[field.kind], field)),
+      validationSchema: generateValidationSchema(additionalValidations),
+      enableReinitialize: true,
+      onSubmit: handleSubmit
     }
-    return /*#__PURE__*/React.createElement(Typography, {
-      key: field.id,
-      style: "body2"
-    }, t("messages.invalidKind"));
-  });
+  }, function (_ref2) {
+    var kind = _ref2.values.kind,
+      dirty = _ref2.dirty;
+    var permittedKinds = getPermittedKinds({
+      allowedKinds: allowedKinds,
+      selectedKind: kind
+    });
+    return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(FieldForm, _extends({
+      chosenKind: kind === null || kind === void 0 ? void 0 : kind.value,
+      isSystem: field.isSystem,
+      kindSelectOptions: permittedKinds
+    }, props)), renderFormFooter({
+      onClose: onClose,
+      loading: isSubmitting,
+      dirty: dirty
+    }));
+  }));
+};
+
+var _excluded = ["isOpen", "selectedField"];
+
+/** @type {React.FC<import("types").FieldsPaneProps>} */
+
+var FieldsPane = function FieldsPane(_ref) {
+  var isOpen = _ref.isOpen,
+    _ref$selectedField = _ref.selectedField,
+    selectedField = _ref$selectedField === void 0 ? {} : _ref$selectedField,
+    props = _objectWithoutProperties(_ref, _excluded);
+  return /*#__PURE__*/React.createElement(Pane, {
+    isOpen: isOpen,
+    onClose: props.onClose
+  }, isEmpty(selectedField) ? /*#__PURE__*/React.createElement(Add, props) : /*#__PURE__*/React.createElement(Edit, _extends({
+    fieldId: selectedField === null || selectedField === void 0 ? void 0 : selectedField.id
+  }, props)));
 };
 
 var Menu = Dropdown.Menu,
@@ -6725,6 +6732,7 @@ var useFieldsDashboard = function useFieldsDashboard(_ref) {
   var _getQueryParams = getQueryParams(),
     resource = _getQueryParams.resource,
     state = _getQueryParams.state;
+  var ownerId = showOwnersInMenu ? resource : undefined;
   var history = useHistory();
   var _useFetchConfigs = useFetchConfigs(),
     _useFetchConfigs$data = _useFetchConfigs.data,
@@ -6736,7 +6744,7 @@ var useFieldsDashboard = function useFieldsDashboard(_ref) {
     isConfigsLoading = _useFetchConfigs.isLoading;
   var fieldParams = {
     resourceType: !showOwnersInMenu ? resource : undefined,
-    ownerId: showOwnersInMenu ? resource : undefined,
+    ownerId: ownerId,
     state: state || FIELD_STATES.active
   };
   var _useFetchFields = useFetchFields(fieldParams, {
@@ -6751,15 +6759,18 @@ var useFieldsDashboard = function useFieldsDashboard(_ref) {
     inactiveFieldsCount = _useFetchFields$data2.inactiveFieldsCount,
     isFieldsLoading = _useFetchFields.isLoading,
     isFieldsFetching = _useFetchFields.isFetching;
-  var _useDestroyField = useDestroyField(),
-    deleteField = _useDestroyField.mutate,
-    isDeleting = _useDestroyField.isLoading;
-  var handleDelete = function handleDelete() {
-    deleteField(selectedField.id, {
+  var _useDestroyField = useDestroyField({
       onSuccess: function onSuccess() {
         setIsDeleteAlertOpen(false);
         setSelectedField({});
       }
+    }),
+    deleteField = _useDestroyField.mutate,
+    isDeleting = _useDestroyField.isLoading;
+  var handleDelete = function handleDelete() {
+    deleteField({
+      fieldId: selectedField.id,
+      ownerId: ownerId
     });
   };
   var handleClosePane = function handleClosePane() {
@@ -6836,6 +6847,7 @@ var useFieldsDashboard = function useFieldsDashboard(_ref) {
     selectedField: selectedField,
     selectedState: state,
     selectedMenu: resource,
+    // resource will be ownerId if showOwnersInMenu is true, else it will be resourceType
     isFieldsFetching: isFieldsFetching,
     isFieldsLoading: isFieldsLoading,
     isDeleting: isDeleting,
@@ -11149,7 +11161,8 @@ var FieldBlock$1 = /*#__PURE__*/React.memo(FieldBlock);
 var ReorderPane = function ReorderPane(_ref) {
   var isOpen = _ref.isOpen,
     onClose = _ref.onClose,
-    allFields = _ref.allFields;
+    allFields = _ref.allFields,
+    ownerId = _ref.ownerId;
   var _useState = useState([]),
     _useState2 = _slicedToArray(_useState, 2),
     fields = _useState2[0],
@@ -11174,10 +11187,11 @@ var ReorderPane = function ReorderPane(_ref) {
     fields.map(function (field, index) {
       return field.id !== allFields[index].id && params.push({
         id: field.id,
-        displayOrder: index
+        displayOrder: index + 1
       });
     });
     reorderField({
+      ownerId: isEmpty(ownerId) ? undefined : ownerId,
       fields: params
     }, {
       onSuccess: onClose
@@ -11214,12 +11228,12 @@ var ReorderPane = function ReorderPane(_ref) {
     });
   }))))), /*#__PURE__*/React.createElement(Pane.Footer, {
     className: "flex items-center space-x-2"
-  }, /*#__PURE__*/React.createElement(Button, {
+  }, /*#__PURE__*/React.createElement(Button$1, {
     disabled: initialStateRef.current === fields,
     label: t("labels.saveChanges"),
     loading: isSubmitting,
     onClick: handleReorderSave
-  }), /*#__PURE__*/React.createElement(Button, {
+  }), /*#__PURE__*/React.createElement(Button$1, {
     label: t("labels.cancel"),
     style: "text",
     onClick: onClose
@@ -11307,7 +11321,7 @@ var FieldsDashboard = function FieldsDashboard(_ref) {
     menuBarToggle: function menuBarToggle() {
       return setIsMenuBarOpen(not);
     },
-    actionBlock: /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Button, {
+    actionBlock: /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Button$1, {
       label: t("labels.reorder"),
       style: "secondary",
       disabled: !existsBy({
@@ -11317,7 +11331,7 @@ var FieldsDashboard = function FieldsDashboard(_ref) {
       onClick: function onClick() {
         return setIsReorderPaneOpen(true);
       }
-    }), /*#__PURE__*/React.createElement(Button, {
+    }), /*#__PURE__*/React.createElement(Button$1, {
       label: t("labels.addField"),
       onClick: function onClick() {
         return setIsPaneOpen(true);
@@ -11328,9 +11342,12 @@ var FieldsDashboard = function FieldsDashboard(_ref) {
       hideRequiredSwitch: paneProps === null || paneProps === void 0 ? void 0 : paneProps.hideRequiredSwitch,
       initialValues: paneProps === null || paneProps === void 0 ? void 0 : paneProps.initialValues,
       isOpen: isPaneOpen,
-      resourceType: showOwnersInMenu ? resourceType : selectedMenu,
+      ownerId: showOwnersInMenu ? selectedMenu : "",
+      resourceType: showOwnersInMenu ? resourceType : selectedMenu //Currently we support only one resource type when fields are classified based on owners
+      ,
       selectedField: selectedField,
-      onClose: handleClosePane
+      onClose: handleClosePane,
+      onMutationSuccess: paneProps === null || paneProps === void 0 ? void 0 : paneProps.onMutationSuccess
     }, paneProps === null || paneProps === void 0 ? void 0 : paneProps.children)),
     title: humanize(getDashBoardTitle({
       isOwnerBased: showOwnersInMenu,
@@ -11351,6 +11368,7 @@ var FieldsDashboard = function FieldsDashboard(_ref) {
   })), /*#__PURE__*/React.createElement(ReorderPane, {
     allFields: fields,
     isOpen: isReorderPaneOpen,
+    ownerId: showOwnersInMenu ? selectedMenu : "",
     onClose: handleReorderPaneClose
   }), /*#__PURE__*/React.createElement(Alert, {
     isOpen: isDeleteAlertOpen,
@@ -11396,8 +11414,11 @@ var useCreateFieldValue = function useCreateFieldValue(options) {
   var queryClient = useQueryClient();
   return useMutation(fieldValuesApi.create, _objectSpread$1(_objectSpread$1({}, options), {}, {
     onSuccess: function onSuccess() {
+      for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+        args[_key] = arguments[_key];
+      }
+      options === null || options === void 0 ? void 0 : options.onSuccess.apply(options, args);
       queryClient.invalidateQueries([QUERY_KEYS.FIELD_VALUES]);
-      options === null || options === void 0 ? void 0 : options.onSuccess();
     }
   }));
 };
@@ -11405,8 +11426,11 @@ var useUpdateFieldValue = function useUpdateFieldValue(options) {
   var queryClient = useQueryClient();
   return useMutation(fieldValuesApi.update, _objectSpread$1(_objectSpread$1({}, options), {}, {
     onSuccess: function onSuccess() {
+      for (var _len2 = arguments.length, args = new Array(_len2), _key2 = 0; _key2 < _len2; _key2++) {
+        args[_key2] = arguments[_key2];
+      }
+      options === null || options === void 0 ? void 0 : options.onSuccess.apply(options, args);
       queryClient.invalidateQueries([QUERY_KEYS.FIELD_VALUES]);
-      options === null || options === void 0 ? void 0 : options.onSuccess();
     }
   }));
 };
@@ -11438,8 +11462,6 @@ var FieldValuesContainer = function FieldValuesContainer(_ref) {
     _ref$ownerId = _ref.ownerId,
     ownerId = _ref$ownerId === void 0 ? "" : _ref$ownerId,
     resourceId = _ref.resourceId,
-    _ref$queryKeysToBeInv = _ref.queryKeysToBeInvalidatedOnSuccess,
-    queryKeysToBeInvalidatedOnSuccess = _ref$queryKeysToBeInv === void 0 ? [] : _ref$queryKeysToBeInv,
     _ref$customComponents = _ref.customComponents,
     customComponents = _ref$customComponents === void 0 ? {} : _ref$customComponents,
     _ref$className = _ref.className,
@@ -11452,14 +11474,13 @@ var FieldValuesContainer = function FieldValuesContainer(_ref) {
     isRequiredColumnName = _ref.isRequiredColumnName,
     fieldContainerClassName = _ref.fieldContainerClassName,
     fieldClassName = _ref.fieldClassName,
-    labelClassName = _ref.labelClassName;
-  var queryClient = useQueryClient();
+    labelClassName = _ref.labelClassName,
+    _ref$onMutationSucces = _ref.onMutationSuccess,
+    onMutationSuccess = _ref$onMutationSucces === void 0 ? noop$2 : _ref$onMutationSucces;
   var _useTranslation = useTranslation(),
     t = _useTranslation.t;
   var queryOptions = {
-    onSuccess: function onSuccess() {
-      queryClient.invalidateQueries(queryKeysToBeInvalidatedOnSuccess);
-    }
+    onSuccess: onMutationSuccess
   };
   var _useFetchFields = useFetchFields({
       resourceType: isEmpty(resourceType) ? undefined : resourceType,
@@ -11530,5 +11551,5 @@ var FieldValuesContainer = function FieldValuesContainer(_ref) {
   }));
 };
 
-export { AddField, FieldInputs, FieldValuesContainer, FieldsDashboard, neetoFieldsUtils, useCreateField, useDestroyField, useFetchFields, useShowField, useUpdateField };
+export { FieldInputs, FieldValuesContainer, FieldsDashboard, FieldsPane, neetoFieldsUtils, useCreateField, useDestroyField, useFetchFields, useShowField, useUpdateField };
 //# sourceMappingURL=index.js.map