@bigbinary/neeto-fields-frontend 1.3.43 → 1.4.0-beta1

package/dist/index.js

@@ -1,4 +1,4 @@
-import React, { useEffect, useState, useRef, useMemo, useLayoutEffect, useCallback, createContext, memo, useReducer, useContext } from 'react';
+import React, { useEffect, useState, useRef, useMemo, useLayoutEffect, useCallback, createContext, memo, useReducer, useContext, createElement } from 'react';
 import { useFuncDebounce, useOnClickOutside, withT, useMutationWithInvalidation, isMetaKeyPressed, useQueryParams, handleMetaClick } from '@bigbinary/neeto-commons-frontend/react-utils';
 import Typography from '@bigbinary/neetoui/Typography';
 import { isNotEmpty, renameKeys, capitalize, findBy, noop as noop$1, notEquals, filterBy, toLabelAndValue, slugify, humanize, countBy, isPresent } from '@bigbinary/neeto-cist';
@@ -8,6 +8,7 @@ import { useFormikContext, useField, FieldArray } from 'formik';
 import { t as t$1 } from 'i18next';
 import dayjs from 'dayjs';
 import * as yup from 'yup';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import DatePicker from '@bigbinary/neetoui/DatePicker';
 import TimePicker from '@bigbinary/neetoui/TimePicker';
 import { hyphenize } from '@bigbinary/neeto-commons-frontend/utils/general';
@@ -24,7 +25,7 @@ import PageLoader from '@bigbinary/neeto-molecules/PageLoader';
 import { useTranslation, Trans } from 'react-i18next';
 import Pane from '@bigbinary/neetoui/Pane';
 import Form from '@bigbinary/neetoui/formik/Form';
-import { useQuery } from 'react-query';
+import { useQuery } from '@tanstack/react-query';
 import axios from 'axios';
 import { buildUrl, getQueryParams, dateFormat, hyphenize as hyphenize$1 } from '@bigbinary/neeto-commons-frontend/utils';
 import ActionBlock$1 from '@bigbinary/neetoui/formik/ActionBlock';
@@ -47,21 +48,6 @@ import { unstable_batchedUpdates, createPortal } from 'react-dom';
 import NeetoUISubHeader from '@bigbinary/neeto-molecules/SubHeader';
 import classnames from 'classnames';
 
-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 _typeof$1(o) {
   "@babel/helpers - typeof";
 
@@ -816,8 +802,8 @@ var getComponentDisplayName = function getComponentDisplayName(Component) {
 };
 
 var _excluded$7 = ["name", "id", "kind", "data", "individualSubmit", "formRef", "formRefs", "disabled", "isRequiredColumnName", "isInline", "onBlur", "hasMetadataWrapper"];
-function ownKeys$i(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
-function _objectSpread$i(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$i(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$i(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function ownKeys$t(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread$t(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$t(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$t(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var useFormikFields = function useFormikFields(_ref) {
   var name = _ref.name,
     fieldId = _ref.id,
@@ -927,7 +913,7 @@ var useFormikFields = function useFormikFields(_ref) {
   return {
     dirty: dirty,
     handleSubmit: handleSubmit,
-    fieldProps: _objectSpread$i(_objectSpread$i({}, formikFieldProps), {}, {
+    fieldProps: _objectSpread$t(_objectSpread$t({}, formikFieldProps), {}, {
       id: fieldId,
       error: individualSubmit ? meta.error : meta.touched && meta.error,
       value: getValueForField(formikFieldProps.value),
@@ -946,12 +932,14 @@ var useFormikFields = function useFormikFields(_ref) {
   };
 };
 
+function ownKeys$s(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread$s(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$s(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$s(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var Checkbox = function Checkbox(props) {
   var _useFormikFields = useFormikFields(props),
     handleSubmit = _useFormikFields.handleSubmit,
     fieldProps = _useFormikFields.fieldProps;
   var submissionStatus = props.submissionStatus;
-  return /*#__PURE__*/React.createElement(NeetoUICheckbox, _extends({}, fieldProps, {
+  return /*#__PURE__*/jsx(NeetoUICheckbox, _objectSpread$s(_objectSpread$s({}, fieldProps), {}, {
     checked: fieldProps.value,
     disabled: submissionStatus === SUBMIT_FIELD_STATUS.SUBMITTING,
     onChange: function onChange(_ref) {
@@ -961,6 +949,8 @@ var Checkbox = function Checkbox(props) {
   }));
 };
 
+function ownKeys$r(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread$r(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$r(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$r(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var MetadataBlock = function MetadataBlock(_ref) {
   var labelProps = _ref.labelProps,
     label = _ref.label,
@@ -968,23 +958,30 @@ var MetadataBlock = function MetadataBlock(_ref) {
     children = _ref.children,
     submissionStatus = _ref.submissionStatus,
     isInline = _ref.isInline;
-  return /*#__PURE__*/React.createElement("div", {
-    className: "w-full space-y-2"
-  }, !isInline && /*#__PURE__*/React.createElement("div", {
-    className: "flex items-center gap-2"
-  }, /*#__PURE__*/React.createElement(Label, _extends({
-    "data-cy": "".concat(hyphenize(label), "-label"),
-    htmlFor: fieldId
-  }, labelProps), label), /*#__PURE__*/React.createElement("div", {
-    className: "inline-flex h-6 items-center"
-  }, submissionStatus === SUBMIT_FIELD_STATUS.SUBMITTING && /*#__PURE__*/React.createElement(Spinner, {
-    className: "neeto-fields-nano__metadata-card__spinner"
-  }), submissionStatus === SUBMIT_FIELD_STATUS.SUCCESS && /*#__PURE__*/React.createElement(Check, {
-    className: "neeto-ui-text-success-500",
-    size: 20
-  }))), children);
+  return /*#__PURE__*/jsxs("div", {
+    className: "w-full space-y-2",
+    children: [!isInline && /*#__PURE__*/jsxs("div", {
+      className: "flex items-center gap-2",
+      children: [/*#__PURE__*/jsx(Label, _objectSpread$r(_objectSpread$r({
+        "data-cy": "".concat(hyphenize(label), "-label"),
+        htmlFor: fieldId
+      }, labelProps), {}, {
+        children: label
+      })), /*#__PURE__*/jsxs("div", {
+        className: "inline-flex h-6 items-center",
+        children: [submissionStatus === SUBMIT_FIELD_STATUS.SUBMITTING && /*#__PURE__*/jsx(Spinner, {
+          className: "neeto-fields-nano__metadata-card__spinner"
+        }), submissionStatus === SUBMIT_FIELD_STATUS.SUCCESS && /*#__PURE__*/jsx(Check, {
+          className: "neeto-ui-text-success-500",
+          size: 20
+        })]
+      })]
+    }), children]
+  });
 };
 
+function ownKeys$q(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread$q(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$q(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$q(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var WithMetadataBlock = function WithMetadataBlock(Component) {
   var withMetadataBlockWrapper = function withMetadataBlockWrapper(props) {
     var submissionStatus = props.submissionStatus,
@@ -998,23 +995,24 @@ var WithMetadataBlock = function WithMetadataBlock(Component) {
     var labelProps = {
       required: props[isRequiredColumnName]
     };
-    return /*#__PURE__*/React.createElement(MetadataBlock, {
+    return /*#__PURE__*/jsx(MetadataBlock, {
       fieldId: fieldId,
       isInline: isInline,
       label: label,
       labelProps: labelProps,
-      submissionStatus: submissionStatus
-    }, /*#__PURE__*/React.createElement(Component, _extends({}, props, {
-      hasMetadataWrapper: true
-    })));
+      submissionStatus: submissionStatus,
+      children: /*#__PURE__*/jsx(Component, _objectSpread$q(_objectSpread$q({}, props), {}, {
+        hasMetadataWrapper: true
+      }))
+    });
   };
   withMetadataBlockWrapper.displayName = "withMetadataBlockWrapper(".concat(getComponentDisplayName(Component), ")");
   return withMetadataBlockWrapper;
 };
 
 var _excluded$6 = ["onBlur"];
-function ownKeys$h(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
-function _objectSpread$h(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$h(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$h(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function ownKeys$p(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread$p(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$p(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$p(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var DateOrTime = function DateOrTime(props) {
   var isInline = props.isInline;
   var _useState = useState(isInline),
@@ -1067,43 +1065,45 @@ var DateOrTime = function DateOrTime(props) {
     };
   }();
   if (props.kind === KINDS.time) {
-    return /*#__PURE__*/React.createElement(TimePicker, _extends({}, _objectSpread$h(_objectSpread$h({}, fieldProps), {}, {
+    return /*#__PURE__*/jsx(TimePicker, _objectSpread$p(_objectSpread$p({}, _objectSpread$p(_objectSpread$p({}, fieldProps), {}, {
       onOpenChange: onOpenChange
-    }), {
+    })), {}, {
       use12Hours: true,
       format: "h:mm A",
       open: isOpen,
       onChange: handleChange
     }));
   } else if (props.kind === KINDS.date) {
-    return /*#__PURE__*/React.createElement(DatePicker, _extends({}, _objectSpread$h(_objectSpread$h({}, fieldProps), {}, {
+    return /*#__PURE__*/jsx(DatePicker, _objectSpread$p(_objectSpread$p({}, _objectSpread$p(_objectSpread$p({}, fieldProps), {}, {
       onOpenChange: onOpenChange
-    }), {
+    })), {}, {
       open: isOpen,
       onChange: handleChange
     }));
   }
-  return /*#__PURE__*/React.createElement(DatePicker, _extends({
+  return /*#__PURE__*/jsx(DatePicker, _objectSpread$p(_objectSpread$p({
     showTime: true,
     timeFormat: "h:mm A"
-  }, _objectSpread$h(_objectSpread$h({}, fieldProps), {}, {
+  }, _objectSpread$p(_objectSpread$p({}, fieldProps), {}, {
     onOpenChange: onOpenChange
-  }), {
+  })), {}, {
     open: isOpen,
     onChange: handleChange
   }));
 };
 var DateOrTimeInput = WithMetadataBlock(DateOrTime);
 
+function ownKeys$o(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread$o(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$o(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$o(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var MultiOption = function MultiOption(props) {
   var _useFormikFields = useFormikFields(props),
     handleSubmit = _useFormikFields.handleSubmit,
     fieldProps = _useFormikFields.fieldProps;
-  return /*#__PURE__*/React.createElement(Select, _extends({
+  return /*#__PURE__*/jsx(Select, _objectSpread$o(_objectSpread$o({
     isMulti: true,
     isSearchable: true,
     strategy: "fixed"
-  }, fieldProps, {
+  }, fieldProps), {}, {
     onChange: function onChange(selectedOptions) {
       return handleSubmit(pluck("value", selectedOptions));
     }
@@ -1111,12 +1111,14 @@ var MultiOption = function MultiOption(props) {
 };
 var MultiOptionInput = WithMetadataBlock(MultiOption);
 
+function ownKeys$n(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread$n(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$n(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$n(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var Number$1 = function Number(props) {
   var _useFormikFields = useFormikFields(props),
     handleSubmit = _useFormikFields.handleSubmit,
     fieldProps = _useFormikFields.fieldProps,
     dirty = _useFormikFields.dirty;
-  return /*#__PURE__*/React.createElement(Input, _extends({}, fieldProps, {
+  return /*#__PURE__*/jsx(Input, _objectSpread$n(_objectSpread$n({}, fieldProps), {}, {
     type: "number",
     onBlur: function onBlur() {
       return dirty && handleSubmit();
@@ -1126,6 +1128,8 @@ var Number$1 = function Number(props) {
 var NumberInput = WithMetadataBlock(Number$1);
 
 var _excluded$5 = ["onBlur"];
+function ownKeys$m(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread$m(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$m(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$m(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var withOnClickOutsideWrapper = function withOnClickOutsideWrapper(Component) {
   var WithOnClickOutsideWrapper = function WithOnClickOutsideWrapper(_ref) {
     var _ref$onBlur = _ref.onBlur,
@@ -1136,11 +1140,12 @@ var withOnClickOutsideWrapper = function withOnClickOutsideWrapper(Component) {
     useOnClickOutside(ref, onBlur, {
       enabled: isInline
     });
-    return isInline ? /*#__PURE__*/React.createElement("div", {
-      ref: ref
-    }, /*#__PURE__*/React.createElement(Component, _extends({}, props, {
-      type: "range"
-    }))) : /*#__PURE__*/React.createElement(Component, _extends({}, props, {
+    return isInline ? /*#__PURE__*/jsx("div", {
+      ref: ref,
+      children: /*#__PURE__*/jsx(Component, _objectSpread$m(_objectSpread$m({}, props), {}, {
+        type: "range"
+      }))
+    }) : /*#__PURE__*/jsx(Component, _objectSpread$m(_objectSpread$m({}, props), {}, {
       type: "range"
     }));
   };
@@ -1164,13 +1169,13 @@ var RangePicker = function RangePicker(props) {
     }
   };
   if (props.kind === KINDS.dateRange) {
-    return /*#__PURE__*/React.createElement(DateRangePicker, _extends({}, fieldProps, {
+    return /*#__PURE__*/jsx(DateRangePicker, _objectSpread$m(_objectSpread$m({}, fieldProps), {}, {
       onChange: handleChange
     }));
   }
 
   //time_range
-  return /*#__PURE__*/React.createElement(TimeRangePicker, _extends({}, fieldProps, {
+  return /*#__PURE__*/jsx(TimeRangePicker, _objectSpread$m(_objectSpread$m({}, fieldProps), {}, {
     use12Hours: true,
     format: "h:mm A",
     onChange: handleChange
@@ -1178,15 +1183,17 @@ var RangePicker = function RangePicker(props) {
 };
 var RangePickerInput = WithMetadataBlock(RangePicker);
 
+function ownKeys$l(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread$l(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$l(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$l(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var SingleOption = function SingleOption(props) {
   var _useFormikFields = useFormikFields(props),
     handleSubmit = _useFormikFields.handleSubmit,
     fieldProps = _useFormikFields.fieldProps;
-  return /*#__PURE__*/React.createElement(Select$1, _extends({
+  return /*#__PURE__*/jsx(Select$1, _objectSpread$l(_objectSpread$l({
     isClearable: true,
     isSearchable: true,
     strategy: "fixed"
-  }, fieldProps, {
+  }, fieldProps), {}, {
     onChange: function onChange(option) {
       return handleSubmit((option === null || option === void 0 ? void 0 : option.value) || "");
     }
@@ -1194,6 +1201,8 @@ var SingleOption = function SingleOption(props) {
 };
 var SingleOptionInput = WithMetadataBlock(SingleOption);
 
+function ownKeys$k(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread$k(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$k(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$k(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var Text = function Text(props) {
   var _useFormikFields = useFormikFields(props),
     handleSubmit = _useFormikFields.handleSubmit,
@@ -1208,7 +1217,7 @@ var Text = function Text(props) {
     var end = element.value.length;
     element.setSelectionRange(end, end);
   };
-  return /*#__PURE__*/React.createElement(Textarea, _extends({}, fieldProps, {
+  return /*#__PURE__*/jsx(Textarea, _objectSpread$k(_objectSpread$k({}, fieldProps), {}, {
     className: "neeto-fields-nano-adaptive-input",
     rows: 1,
     size: "small",
@@ -1227,12 +1236,14 @@ var Text = function Text(props) {
 };
 var TextInput = WithMetadataBlock(Text);
 
+function ownKeys$j(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread$j(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$j(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$j(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var TextArea = function TextArea(props) {
   var _useFormikFields = useFormikFields(props),
     handleSubmit = _useFormikFields.handleSubmit,
     fieldProps = _useFormikFields.fieldProps,
     dirty = _useFormikFields.dirty;
-  return /*#__PURE__*/React.createElement(Textarea, _extends({}, fieldProps, {
+  return /*#__PURE__*/jsx(Textarea, _objectSpread$j(_objectSpread$j({}, fieldProps), {}, {
     onBlur: function onBlur() {
       return dirty && handleSubmit();
     }
@@ -1240,8 +1251,8 @@ var TextArea = function TextArea(props) {
 };
 var TextAreaInput = WithMetadataBlock(TextArea);
 
-function ownKeys$g(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
-function _objectSpread$g(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$g(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$g(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function ownKeys$i(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread$i(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$i(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$i(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var standardComponents = {
   text: TextInput,
   regex: TextInput,
@@ -1292,7 +1303,7 @@ var transformValues = function transformValues(_ref2) {
     delete allFieldValues[fieldPath];
   });
   var cleanedFieldValues = pipe(removeItemsWithNullData, removeNoiseFromValues)(neetoFieldValues);
-  return _objectSpread$g(_objectSpread$g({}, allFieldValues), {}, {
+  return _objectSpread$i(_objectSpread$i({}, allFieldValues), {}, {
     fieldValuesAttributes: cleanedFieldValues
   });
 };
@@ -1355,8 +1366,8 @@ var neetoFieldsUtils = {
   transformValues: transformValues
 };
 
-function ownKeys$f(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
-function _objectSpread$f(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$f(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$f(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function ownKeys$h(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread$h(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$h(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$h(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var FieldInputs = withT(function (_ref) {
   var t = _ref.t,
     _ref$customComponents = _ref.customComponents,
@@ -1371,23 +1382,21 @@ var FieldInputs = withT(function (_ref) {
       customComponents: customComponents
     });
     if (Field) {
-      return /*#__PURE__*/React.createElement(Field, _extends({
-        key: field.id
-      }, _objectSpread$f(_objectSpread$f({}, field), {}, {
+      return /*#__PURE__*/jsx(Field, _objectSpread$h({}, _objectSpread$h(_objectSpread$h({}, field), {}, {
         disabled: disabled,
         formRef: formRef,
         isRequiredColumnName: isRequiredColumnName
-      })));
+      })), field.id);
     }
-    return /*#__PURE__*/React.createElement(Typography, {
-      key: field.id,
-      style: "body2"
-    }, t("neetoFields.messages.invalidKind"));
+    return /*#__PURE__*/jsx(Typography, {
+      style: "body2",
+      children: t("neetoFields.messages.invalidKind")
+    }, field.id);
   });
 });
 
-function ownKeys$e(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
-function _objectSpread$e(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$e(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$e(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function ownKeys$g(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread$g(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$g(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$g(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var fieldUrl = function fieldUrl(fieldId) {
   return buildUrl(FIELD_URL, {
     fieldId: fieldId
@@ -1406,7 +1415,7 @@ var fetch$1 = function fetch(_ref) {
     _ref$pageProps = _ref.pageProps,
     pageProps = _ref$pageProps === void 0 ? {} : _ref$pageProps;
   return axios.get(FIELDS_URL, {
-    params: _objectSpread$e({
+    params: _objectSpread$g({
       resourceType: resourceType,
       ownerId: ownerId,
       state: state,
@@ -1471,53 +1480,60 @@ var QUERY_KEYS = {
 var DEFAULT_STALE_TIME = 3600000; // 1 hour
 
 var _excluded$4 = ["prefixQueryKeys"];
-function ownKeys$d(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
-function _objectSpread$d(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$d(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$d(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function ownKeys$f(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread$f(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$f(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$f(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var FIELDS = QUERY_KEYS.FIELDS,
   DEPENDENCIES = QUERY_KEYS.DEPENDENCIES;
 var useFetchFields = function useFetchFields(_ref, options) {
   var _ref$prefixQueryKeys = _ref.prefixQueryKeys,
     prefixQueryKeys = _ref$prefixQueryKeys === void 0 ? [] : _ref$prefixQueryKeys,
     params = _objectWithoutProperties(_ref, _excluded$4);
-  return useQuery([FIELDS].concat(_toConsumableArray(prefixQueryKeys), [params]), function () {
-    return fieldsApi.fetch(params);
-  }, _objectSpread$d({
+  return useQuery(_objectSpread$f({
+    queryKey: [FIELDS].concat(_toConsumableArray(prefixQueryKeys), [params]),
+    queryFn: function queryFn() {
+      return fieldsApi.fetch(params);
+    },
     staleTime: DEFAULT_STALE_TIME
   }, options));
 };
 var useCreateField = function useCreateField(options) {
-  return useMutationWithInvalidation(fieldsApi.create, _objectSpread$d({
+  return useMutationWithInvalidation(fieldsApi.create, _objectSpread$f({
     keysToInvalidate: [FIELDS]
   }, options));
 };
 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);
+  return useQuery(_objectSpread$f({
+    queryKey: [FIELDS, fieldId],
+    queryFn: function queryFn() {
+      return fieldsApi.show({
+        fieldId: fieldId,
+        ownerId: ownerId
+      });
+    }
+  }, options));
 };
 var useFetchDependencies = function useFetchDependencies(_ref3, options) {
   var fieldId = _ref3.fieldId,
     ownerId = _ref3.ownerId;
-  return useQuery([DEPENDENCIES, fieldId], function () {
-    return fieldsApi.dependencies({
-      fieldId: fieldId,
-      ownerId: ownerId
-    });
-  }, options);
+  return useQuery(_objectSpread$f({
+    queryKey: [DEPENDENCIES, fieldId],
+    queryFn: function queryFn() {
+      return fieldsApi.dependencies({
+        fieldId: fieldId,
+        ownerId: ownerId
+      });
+    }
+  }, options));
 };
 var useUpdateField = function useUpdateField(options) {
-  return useMutationWithInvalidation(fieldsApi.update, _objectSpread$d({
+  return useMutationWithInvalidation(fieldsApi.update, _objectSpread$f({
     keysToInvalidate: [FIELDS]
   }, options));
 };
 var useDestroyField = function useDestroyField(options) {
-  return useMutationWithInvalidation(fieldsApi.destroy, _objectSpread$d({
+  return useMutationWithInvalidation(fieldsApi.destroy, _objectSpread$f({
     keysToInvalidate: [FIELDS]
   }, options));
 };
@@ -1527,11 +1543,11 @@ var useReorderFields = function useReorderFields() {
   });
 };
 
-function ownKeys$c(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
-function _objectSpread$c(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$c(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$c(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function ownKeys$e(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread$e(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$e(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$e(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var arrangeOptionsDisplayOrder = function arrangeOptionsDisplayOrder(options) {
   return options.map(function (option, index) {
-    return _objectSpread$c(_objectSpread$c({}, option), {}, {
+    return _objectSpread$e(_objectSpread$e({}, option), {}, {
       displayOrder: index
     });
   });
@@ -1546,7 +1562,7 @@ var buildPayload = function buildPayload(_ref) {
   var name = formValues.name.trim();
   return {
     ownerId: isEmpty(ownerId) ? undefined : ownerId,
-    field: _objectSpread$c(_objectSpread$c({}, omit(["createdAt", "id", "ownerId", "ownerType", "updatedAt"], formValues)), {}, {
+    field: _objectSpread$e(_objectSpread$e({}, omit(["createdAt", "id", "ownerId", "ownerType", "updatedAt"], formValues)), {}, {
       kind: kind,
       name: name,
       resourceType: isEmpty(resourceType) ? undefined : resourceType,
@@ -1572,17 +1588,19 @@ var getPermittedKinds = function getPermittedKinds(_ref2) {
   }, values(filteredKinds));
 };
 var generateValidationSchema = function generateValidationSchema(additionalValidations) {
-  return yup.object().shape(_objectSpread$c(_objectSpread$c({}, BASIC_FIELD_FORM_VALIDATIONS), additionalValidations));
+  return yup.object().shape(_objectSpread$e(_objectSpread$e({}, BASIC_FIELD_FORM_VALIDATIONS), additionalValidations));
 };
 var renderFormFooter = function renderFormFooter(_ref3) {
   var onClose = _ref3.onClose,
     loading = _ref3.loading;
-  return /*#__PURE__*/React.createElement(Pane.Footer, null, /*#__PURE__*/React.createElement(ActionBlock$1, {
-    cancelButtonProps: {
-      onClick: onClose
-    },
-    isSubmitting: loading
-  }));
+  return /*#__PURE__*/jsx(Pane.Footer, {
+    children: /*#__PURE__*/jsx(ActionBlock$1, {
+      cancelButtonProps: {
+        onClick: onClose
+      },
+      isSubmitting: loading
+    })
+  });
 };
 var getDefaultOption = function getDefaultOption() {
   return {
@@ -1764,69 +1782,73 @@ var AdditionalInputs = function AdditionalInputs() {
     event.stopPropagation();
   };
   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",
-        id: "neeto-fields-dropdown-options-wrapper"
-      }, /*#__PURE__*/React.createElement(Label, {
-        required: true
-      }, t("neetoFields.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, {
-          autoFocus: true,
-          disabled: isSystem,
-          name: "data.".concat(index, ".label"),
-          placeholder: t("neetoFields.placeholders.enterAnOption"),
-          suffix: options.length > 1 && /*#__PURE__*/React.createElement(Button, {
-            icon: Delete,
-            style: "text",
+    return /*#__PURE__*/jsx(FieldArray, {
+      name: "data",
+      children: function children(arrayHelpers) {
+        return /*#__PURE__*/jsxs("div", {
+          className: "flex w-full flex-col gap-y-4",
+          id: "neeto-fields-dropdown-options-wrapper",
+          children: [/*#__PURE__*/jsx(Label, {
+            required: true,
+            children: t("neetoFields.titles.dropdownOptions")
+          }), isNotEmpty(options) && Array.isArray(options) && options.map(function (_, index) {
+            return /*#__PURE__*/jsx("div", {
+              className: "flex w-full space-x-3",
+              children: /*#__PURE__*/jsx("div", {
+                className: "w-full",
+                children: /*#__PURE__*/jsx(Input$1, {
+                  autoFocus: true,
+                  disabled: isSystem,
+                  name: "data.".concat(index, ".label"),
+                  placeholder: t("neetoFields.placeholders.enterAnOption"),
+                  suffix: options.length > 1 && /*#__PURE__*/jsx(Button, {
+                    icon: Delete,
+                    style: "text",
+                    onClick: function onClick() {
+                      return removeOption(arrayHelpers, index);
+                    }
+                  }),
+                  onKeyDown: function onKeyDown(event) {
+                    return handleKeyDown(event, arrayHelpers);
+                  }
+                })
+              })
+            }, index);
+          }), /*#__PURE__*/jsx(Button, {
+            fullWidth: true,
+            className: "mb-6 border-dashed text-xs uppercase",
+            "data-cy": "neeto-fields-add-more-option-button",
+            label: t("neetoFields.labels.addAnotherOption"),
+            style: "secondary",
             onClick: function onClick() {
-              return removeOption(arrayHelpers, index);
+              return addOption(arrayHelpers);
             }
-          }),
-          onKeyDown: function onKeyDown(event) {
-            return handleKeyDown(event, arrayHelpers);
-          }
-        })));
-      }), /*#__PURE__*/React.createElement(Button, {
-        fullWidth: true,
-        className: "mb-6 border-dashed text-xs uppercase",
-        "data-cy": "neeto-fields-add-more-option-button",
-        label: t("neetoFields.labels.addAnotherOption"),
-        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("neetoFields.titles.regexOptions")), /*#__PURE__*/React.createElement(Input$1, {
-      disabled: isSystem,
-      label: t("neetoFields.labels.regexCondition"),
-      name: "data.condition",
-      placeholder: t("neetoFields.placeholders.regexExample")
-    }), /*#__PURE__*/React.createElement(Input$1, {
-      disabled: isSystem,
-      label: t("neetoFields.labels.helpMessage"),
-      name: "data.helpMessage",
-      placeholder: t("neetoFields.placeholders.enterErrorMessage")
-    }));
+    return /*#__PURE__*/jsxs("div", {
+      className: "flex w-full flex-col gap-y-4",
+      children: [/*#__PURE__*/jsx(Label, {
+        required: true,
+        children: t("neetoFields.titles.regexOptions")
+      }), /*#__PURE__*/jsx(Input$1, {
+        disabled: isSystem,
+        label: t("neetoFields.labels.regexCondition"),
+        name: "data.condition",
+        placeholder: t("neetoFields.placeholders.regexExample")
+      }), /*#__PURE__*/jsx(Input$1, {
+        disabled: isSystem,
+        label: t("neetoFields.labels.helpMessage"),
+        name: "data.helpMessage",
+        placeholder: t("neetoFields.placeholders.enterErrorMessage")
+      })]
+    });
   }
   return null;
 };
 
-/** @type {React.FC<import("types").FieldFormProps>} */
-
 var FieldForm = function FieldForm(_ref) {
   var chosenKind = _ref.chosenKind,
     _ref$kindSelectOption = _ref.kindSelectOptions,
@@ -1850,43 +1872,45 @@ var FieldForm = function FieldForm(_ref) {
       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,
-    "data-cy": "name-text-field",
-    disabled: isSystem,
-    label: t("neetoFields.labels.fieldName"),
-    name: "name",
-    placeholder: t("neetoFields.placeholders.enterFieldName"),
-    ref: initialFocusField
-  }), /*#__PURE__*/React.createElement(Select, {
-    isSearchable: true,
-    isDisabled: isSystem,
-    label: t("neetoFields.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",
-    "data-cy": "is-required-switch-container"
-  }, /*#__PURE__*/React.createElement(Switch, {
-    "data-cy": "is-required-switch",
-    name: "isRequired"
-  }), /*#__PURE__*/React.createElement(Typography, {
-    className: "leading-4",
-    component: "span",
-    "data-cy": "is-required-switch-label",
-    style: "body2"
-  }, t("neetoFields.labels.isRequired"))), children));
+  return /*#__PURE__*/jsx(Pane.Body, {
+    children: /*#__PURE__*/jsxs("div", {
+      className: "w-full space-y-4",
+      children: [/*#__PURE__*/jsx(Input$1, {
+        required: true,
+        "data-cy": "name-text-field",
+        disabled: isSystem,
+        label: t("neetoFields.labels.fieldName"),
+        name: "name",
+        placeholder: t("neetoFields.placeholders.enterFieldName"),
+        ref: initialFocusField
+      }), /*#__PURE__*/jsx(Select, {
+        isSearchable: true,
+        isDisabled: isSystem,
+        label: t("neetoFields.labels.fieldKind"),
+        name: "kind",
+        options: kindSelectOptions,
+        onChange: handleKindChange
+      }), isAdditionalDataNeeded(chosenKind) && /*#__PURE__*/jsx(AdditionalInputs, {}), !hideRequiredSwitch && /*#__PURE__*/jsxs(Label, {
+        className: "flex items-center gap-2",
+        "data-cy": "is-required-switch-container",
+        children: [/*#__PURE__*/jsx(Switch, {
+          "data-cy": "is-required-switch",
+          name: "isRequired"
+        }), /*#__PURE__*/jsx(Typography, {
+          className: "leading-4",
+          component: "span",
+          "data-cy": "is-required-switch-label",
+          style: "body2",
+          children: t("neetoFields.labels.isRequired")
+        })]
+      }), children]
+    })
+  });
 };
 
 var _excluded$3 = ["resourceType", "allowedKinds", "ownerId", "additionalValidations", "initialValues", "onClose", "onMutationSuccess"];
-function ownKeys$b(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
-function _objectSpread$b(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$b(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$b(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
-
-/** @type {React.FC<import("types").AddProps>} */
-
+function ownKeys$d(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread$d(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$d(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$d(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var Add = function Add(_ref) {
   var resourceType = _ref.resourceType,
     _ref$allowedKinds = _ref.allowedKinds,
@@ -1903,7 +1927,7 @@ var Add = function Add(_ref) {
       onSuccess: onMutationSuccess
     }),
     createField = _useCreateField.mutate,
-    isSubmitting = _useCreateField.isLoading;
+    isSubmitting = _useCreateField.isPending;
   var filteredKinds = values(pick(allowedKinds, FIELD_KINDS));
   var handleSubmit = function handleSubmit(formValues) {
     var payload = buildPayload({
@@ -1915,33 +1939,38 @@ var Add = function Add(_ref) {
       onSuccess: onClose
     });
   };
-  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Pane.Header, null, /*#__PURE__*/React.createElement(Typography, {
-    "data-cy": "add-pane-header",
-    style: "h2"
-  }, t("neetoFields.titles.addField"))), /*#__PURE__*/React.createElement(Form, {
-    formikProps: {
-      initialValues: _objectSpread$b(_objectSpread$b({}, initialValues), INITIAL_FIELDS),
-      validationSchema: generateValidationSchema(additionalValidations),
-      onSubmit: handleSubmit
-    }
-  }, function (_ref2) {
-    var 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
-    }));
-  }));
+  return /*#__PURE__*/jsxs(Fragment, {
+    children: [/*#__PURE__*/jsx(Pane.Header, {
+      children: /*#__PURE__*/jsx(Typography, {
+        "data-cy": "add-pane-header",
+        style: "h2",
+        children: t("neetoFields.titles.addField")
+      })
+    }), /*#__PURE__*/jsx(Form, {
+      formikProps: {
+        initialValues: _objectSpread$d(_objectSpread$d({}, initialValues), INITIAL_FIELDS),
+        validationSchema: generateValidationSchema(additionalValidations),
+        onSubmit: handleSubmit
+      },
+      children: function children(_ref2) {
+        var kind = _ref2.values.kind;
+        return /*#__PURE__*/jsxs(Fragment, {
+          children: [/*#__PURE__*/jsx(FieldForm, _objectSpread$d({
+            chosenKind: kind.value,
+            kindSelectOptions: filteredKinds
+          }, props)), renderFormFooter({
+            onClose: onClose,
+            loading: isSubmitting
+          })]
+        });
+      }
+    })]
+  });
 };
 
 var _excluded$2 = ["fieldId", "allowedKinds", "ownerId", "additionalValidations", "initialValues", "onClose", "onMutationSuccess"];
-function ownKeys$a(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
-function _objectSpread$a(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$a(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$a(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
-
-/** @type {React.FC<import("types").EditProps>} */
-
+function ownKeys$c(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread$c(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$c(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$c(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var Edit = function Edit(_ref) {
   var fieldId = _ref.fieldId,
     _ref$allowedKinds = _ref.allowedKinds,
@@ -1975,7 +2004,7 @@ var Edit = function Edit(_ref) {
       }
     }),
     updateField = _useUpdateField.mutate,
-    isSubmitting = _useUpdateField.isLoading;
+    isSubmitting = _useUpdateField.isPending;
   var handleSubmit = function handleSubmit(formValues) {
     var payload = buildPayload({
       formValues: formValues,
@@ -1986,56 +2015,62 @@ var Edit = function Edit(_ref) {
       payload: payload
     });
   };
-  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Pane.Header, null, /*#__PURE__*/React.createElement(Typography, {
-    "data-cy": "edit-pane-header",
-    style: "h2"
-  }, t("neetoFields.titles.editField"))), isLoading ? /*#__PURE__*/React.createElement(PageLoader, null) : /*#__PURE__*/React.createElement(Form, {
-    formikProps: {
-      initialValues: _objectSpread$a(_objectSpread$a({}, initialValues), assoc("kind", FIELD_KINDS[field.kind], field)),
-      validationSchema: generateValidationSchema(additionalValidations),
-      enableReinitialize: true,
-      onSubmit: handleSubmit
-    }
-  }, function (_ref2) {
-    var kind = _ref2.values.kind;
-    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
-    }));
-  }));
+  return /*#__PURE__*/jsxs(Fragment, {
+    children: [/*#__PURE__*/jsx(Pane.Header, {
+      children: /*#__PURE__*/jsx(Typography, {
+        "data-cy": "edit-pane-header",
+        style: "h2",
+        children: t("neetoFields.titles.editField")
+      })
+    }), isLoading ? /*#__PURE__*/jsx(PageLoader, {}) : /*#__PURE__*/jsx(Form, {
+      formikProps: {
+        initialValues: _objectSpread$c(_objectSpread$c({}, initialValues), assoc("kind", FIELD_KINDS[field.kind], field)),
+        validationSchema: generateValidationSchema(additionalValidations),
+        enableReinitialize: true,
+        onSubmit: handleSubmit
+      },
+      children: function children(_ref2) {
+        var kind = _ref2.values.kind;
+        var permittedKinds = getPermittedKinds({
+          allowedKinds: allowedKinds,
+          selectedKind: kind
+        });
+        return /*#__PURE__*/jsxs(Fragment, {
+          children: [/*#__PURE__*/jsx(FieldForm, _objectSpread$c({
+            chosenKind: kind === null || kind === void 0 ? void 0 : kind.value,
+            isSystem: field.isSystem,
+            kindSelectOptions: permittedKinds
+          }, props)), renderFormFooter({
+            onClose: onClose,
+            loading: isSubmitting
+          })]
+        });
+      }
+    })]
+  });
 };
 
 var _excluded$1 = ["isOpen", "selectedField"];
-function ownKeys$9(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
-function _objectSpread$9(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$9(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$9(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
-
-/** @type {React.FC<import("types").FieldsPaneProps>} */
-
+function ownKeys$b(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread$b(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$b(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$b(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 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);
   var initialFocusField = useRef(null);
-  return /*#__PURE__*/React.createElement(Pane, {
+  return /*#__PURE__*/jsx(Pane, {
     isOpen: isOpen,
     initialFocusRef: initialFocusField,
-    onClose: props.onClose
-  }, isEmpty(selectedField) ? /*#__PURE__*/React.createElement(Add, _objectSpread$9(_objectSpread$9({}, props), {}, {
-    initialFocusField: initialFocusField
-  })) : /*#__PURE__*/React.createElement(Edit, _extends({
-    fieldId: selectedField === null || selectedField === void 0 ? void 0 : selectedField.id
-  }, _objectSpread$9(_objectSpread$9({}, props), {}, {
-    initialFocusField: initialFocusField
-  }))));
+    onClose: props.onClose,
+    children: isEmpty(selectedField) ? /*#__PURE__*/jsx(Add, _objectSpread$b({}, _objectSpread$b(_objectSpread$b({}, props), {}, {
+      initialFocusField: initialFocusField
+    }))) : /*#__PURE__*/jsx(Edit, _objectSpread$b({
+      fieldId: selectedField === null || selectedField === void 0 ? void 0 : selectedField.id
+    }, _objectSpread$b(_objectSpread$b({}, props), {}, {
+      initialFocusField: initialFocusField
+    })))
+  });
 };
 
 function commonjsRequire(path) {
@@ -2579,24 +2614,26 @@ var buildDefaultColumns = function buildDefaultColumns(_ref2) {
     title: t$1("neetoFields.titles.fieldName"),
     width: 300,
     render: function render(name, field) {
-      return /*#__PURE__*/React.createElement("div", {
-        className: "flex items-center justify-between gap-x-3"
-      }, /*#__PURE__*/React.createElement(Typography, {
-        style: "body2"
-      }, name), /*#__PURE__*/React.createElement(MoreDropdown, {
-        dropdownProps: {
-          strategy: "fixed"
-        },
-        menuItems: getMenuItems({
-          field: field,
-          onDeleteClick: onDeleteClick,
-          onEditClick: onEditClick
-        }),
-        dropdownButtonProps: {
-          className: "flex-shrink-0",
-          "data-cy": "neeto-fields-options-dropdown"
-        }
-      }));
+      return /*#__PURE__*/jsxs("div", {
+        className: "flex items-center justify-between gap-x-3",
+        children: [/*#__PURE__*/jsx(Typography, {
+          style: "body2",
+          children: name
+        }), /*#__PURE__*/jsx(MoreDropdown, {
+          dropdownProps: {
+            strategy: "fixed"
+          },
+          menuItems: getMenuItems({
+            field: field,
+            onDeleteClick: onDeleteClick,
+            onEditClick: onEditClick
+          }),
+          dropdownButtonProps: {
+            className: "flex-shrink-0",
+            "data-cy": "neeto-fields-options-dropdown"
+          }
+        })]
+      });
     }
   }, {
     key: "kind",
@@ -2626,10 +2663,9 @@ var renderMenuBarItems = function renderMenuBarItems(_ref3) {
   title = title.toLocaleLowerCase();
   if (isOwnerBased) {
     return items.map(function (item) {
-      return /*#__PURE__*/React.createElement(MenuBar.Item, {
+      return /*#__PURE__*/jsx(MenuBar.Item, {
         active: selectedMenu === item.id,
         "data-cy": "menubar-".concat(slugify(item.name), "-menu-item"),
-        key: item.id,
         label: humanize(item.name),
         description: t$1("neetoFields.messages.manageTitleForResource", {
           title: title,
@@ -2638,17 +2674,16 @@ var renderMenuBarItems = function renderMenuBarItems(_ref3) {
         onClick: handleBlockClick({
           resource: item.id
         })
-      });
+      }, item.id);
     });
   }
   return items.length > 1 && items.map(function (_ref4) {
     var label = _ref4.label,
       value = _ref4.value;
     var itemLabel = nameAliases[label] || humanize(label);
-    return /*#__PURE__*/React.createElement(MenuBar.Item, {
+    return /*#__PURE__*/jsx(MenuBar.Item, {
       active: selectedMenu === value,
       "data-cy": "neeto-fields-".concat(slugify(itemLabel), "-menu-item"),
-      key: label,
       label: itemLabel,
       description: t$1("neetoFields.messages.manageTitleForResource", {
         title: title,
@@ -2657,7 +2692,7 @@ var renderMenuBarItems = function renderMenuBarItems(_ref3) {
       onClick: handleBlockClick({
         resource: value
       })
-    });
+    }, label);
   });
 };
 var renderStateFilterTabs = function renderStateFilterTabs(_ref5) {
@@ -2666,21 +2701,24 @@ var renderStateFilterTabs = function renderStateFilterTabs(_ref5) {
     activeFieldsCount = _ref5.activeFieldsCount,
     inactiveFieldsCount = _ref5.inactiveFieldsCount,
     handleBlockClick = _ref5.handleBlockClick;
-  return /*#__PURE__*/React.createElement(Tab, {
-    className: "mb-4"
-  }, /*#__PURE__*/React.createElement(Tab.Item, {
-    active: selectedState === FIELD_STATES.active,
-    "data-cy": "menubar-active-block",
-    onClick: handleBlockClick({
-      state: FIELD_STATES.active
-    })
-  }, fieldStatesTaxonomy.active, "(", activeFieldsCount, ")"), /*#__PURE__*/React.createElement(Tab.Item, {
-    active: selectedState === FIELD_STATES.inactive,
-    "data-cy": "menubar-inactive-block",
-    onClick: handleBlockClick({
-      state: FIELD_STATES.inactive
-    })
-  }, fieldStatesTaxonomy.inactive, "(", inactiveFieldsCount, ")"));
+  return /*#__PURE__*/jsxs(Tab, {
+    className: "mb-4",
+    children: [/*#__PURE__*/jsxs(Tab.Item, {
+      active: selectedState === FIELD_STATES.active,
+      "data-cy": "menubar-active-block",
+      onClick: handleBlockClick({
+        state: FIELD_STATES.active
+      }),
+      children: [fieldStatesTaxonomy.active, "(", activeFieldsCount, ")"]
+    }), /*#__PURE__*/jsxs(Tab.Item, {
+      active: selectedState === FIELD_STATES.inactive,
+      "data-cy": "menubar-inactive-block",
+      onClick: handleBlockClick({
+        state: FIELD_STATES.inactive
+      }),
+      children: [fieldStatesTaxonomy.inactive, "(", inactiveFieldsCount, ")"]
+    })]
+  });
 };
 var getResourceName = function getResourceName(_ref6) {
   var _findBy2;
@@ -2710,13 +2748,13 @@ var getDashBoardTitle = function getDashBoardTitle(_ref7) {
   return humanize(displayTitle);
 };
 var renderNoDataHelpText = function renderNoDataHelpText(title, url) {
-  return /*#__PURE__*/React.createElement(Trans, {
+  return /*#__PURE__*/jsx(Trans, {
     i18nKey: "neetoFields.helpTexts.noData",
     values: {
       title: title
     },
     components: {
-      a: /*#__PURE__*/React.createElement(Link, {
+      a: /*#__PURE__*/jsx(Link, {
         className: "neeto-ui-text-primary-600 underline",
         "data-cy": "no-data-help-text-link",
         target: "_blank",
@@ -2731,14 +2769,14 @@ var getDeletionConfirmationMessage = function getDeletionConfirmationMessage(_re
   var resource = _ref8.resource,
     fieldName = _ref8.fieldName,
     affectedResourcesCount = _ref8.affectedResourcesCount;
-  return affectedResourcesCount > 0 ? /*#__PURE__*/React.createElement(Trans, {
+  return affectedResourcesCount > 0 ? /*#__PURE__*/jsx(Trans, {
     i18nKey: "neetoFields.messages.confirmDeleteWithCount",
     values: {
       resource: pluralize(resource, affectedResourcesCount),
       name: fieldName,
       count: affectedResourcesCount
     }
-  }) : /*#__PURE__*/React.createElement(Trans, {
+  }) : /*#__PURE__*/jsx(Trans, {
     i18nKey: "neetoFields.messages.confirmDelete",
     values: {
       name: fieldName
@@ -2753,16 +2791,18 @@ var configsApi = {
   fetchConfigs: fetchConfigs
 };
 
-function ownKeys$8(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
-function _objectSpread$8(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$8(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$8(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function ownKeys$a(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread$a(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$a(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$a(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var useFetchConfigs = function useFetchConfigs(options) {
-  return useQuery([QUERY_KEYS.CONFIGS], configsApi.fetchConfigs, _objectSpread$8({
+  return useQuery(_objectSpread$a({
+    queryKey: [QUERY_KEYS.CONFIGS],
+    queryFn: configsApi.fetchConfigs,
     staleTime: DEFAULT_STALE_TIME
   }, options));
 };
 
-function ownKeys$7(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
-function _objectSpread$7(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$7(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$7(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function ownKeys$9(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread$9(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$9(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$9(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var useFieldsDashboard = function useFieldsDashboard(_ref) {
   var buildColumnData = _ref.buildColumnData,
     isOwnerBased = _ref.isOwnerBased,
@@ -2849,7 +2889,7 @@ var useFieldsDashboard = function useFieldsDashboard(_ref) {
       }
     }),
     deleteField = _useDestroyField.mutate,
-    isDeleting = _useDestroyField.isLoading;
+    isDeleting = _useDestroyField.isPending;
   var handleDelete = function handleDelete() {
     deleteField({
       fieldId: selectedField.id,
@@ -2885,7 +2925,7 @@ var useFieldsDashboard = function useFieldsDashboard(_ref) {
     defaultColumns: defaultColumns
   });
   var handleBlockClick = function handleBlockClick(params) {
-    return handleMetaClick(history, buildUrl("", _objectSpread$7({
+    return handleMetaClick(history, buildUrl("", _objectSpread$9({
       resource: resource,
       state: state
     }, params)));
@@ -3012,7 +3052,7 @@ var DeleteAlert = function DeleteAlert(_ref) {
     _useFetchDependencies2 = _useFetchDependencies.data,
     _useFetchDependencies3 = _useFetchDependencies2 === void 0 ? {} : _useFetchDependencies2,
     affectedResourcesCount = _useFetchDependencies3.affectedResourcesCount;
-  return /*#__PURE__*/React.createElement(Alert, {
+  return /*#__PURE__*/jsx(Alert, {
     affectedResourcesCount: affectedResourcesCount,
     isOpen: isDeleteAlertOpen,
     isSubmitting: isDeleting,
@@ -3028,8 +3068,8 @@ var DeleteAlert = function DeleteAlert(_ref) {
   });
 };
 
-function ownKeys$6(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
-function _objectSpread$6(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$6(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$6(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function ownKeys$8(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread$8(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$8(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$8(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var FieldsTable = function FieldsTable(_ref) {
   var totalCount = _ref.totalCount,
     isFetched = _ref.isFetched,
@@ -3052,7 +3092,7 @@ var FieldsTable = function FieldsTable(_ref) {
     pageSize = pageProps.pageSize;
   var noDataProps = {};
   if (!isFetched && isEmpty(rowData)) {
-    return /*#__PURE__*/React.createElement(PageLoader, null);
+    return /*#__PURE__*/jsx(PageLoader, {});
   }
   if (helpDocUrl) {
     noDataProps.helpText = renderNoDataHelpText(title, helpDocUrl);
@@ -3065,59 +3105,64 @@ var FieldsTable = function FieldsTable(_ref) {
       }
     };
   }
-  return /*#__PURE__*/React.createElement(TableWrapper, null, showNoDataScreen ? /*#__PURE__*/React.createElement("div", {
-    className: "flex h-full w-full items-center justify-center"
-  }, /*#__PURE__*/React.createElement(NoData, _extends({
-    title: showStateFilter ? t("neetoFields.messages.noFieldsWithState", {
-      title: title,
-      state: state
-    }) : t("neetoFields.messages.noFields", {
-      title: title
+  return /*#__PURE__*/jsx(TableWrapper, {
+    children: showNoDataScreen ? /*#__PURE__*/jsx("div", {
+      className: "flex h-full w-full items-center justify-center",
+      children: /*#__PURE__*/jsx(NoData, _objectSpread$8({
+        title: showStateFilter ? t("neetoFields.messages.noFieldsWithState", {
+          title: title,
+          state: state
+        }) : t("neetoFields.messages.noFields", {
+          title: title
+        })
+      }, noDataProps))
+    }) : /*#__PURE__*/jsx(Table, {
+      columnData: columnData,
+      rowData: rowData,
+      totalCount: totalCount,
+      fixedHeight: true,
+      allowRowClick: false,
+      currentPageNumber: page,
+      defaultPageSize: pageSize,
+      handlePageChange: function handlePageChange(page) {
+        return setPageProps(_objectSpread$8(_objectSpread$8({}, pageProps), {}, {
+          page: page
+        }));
+      },
+      loading: isFetching
     })
-  }, noDataProps))) : /*#__PURE__*/React.createElement(Table, {
-    columnData: columnData,
-    rowData: rowData,
-    totalCount: totalCount,
-    fixedHeight: true,
-    allowRowClick: false,
-    currentPageNumber: page,
-    defaultPageSize: pageSize,
-    handlePageChange: function handlePageChange(page) {
-      return setPageProps(_objectSpread$6(_objectSpread$6({}, pageProps), {}, {
-        page: page
-      }));
-    },
-    loading: isFetching
-  }));
+  });
 };
 
-// eslint-disable-next-line @bigbinary/neeto/no-dumb-components-with-use-translation
 var ActionBlock = function ActionBlock(_ref) {
   var reorderable = _ref.reorderable,
     setIsReorderPaneOpen = _ref.setIsReorderPaneOpen,
     setIsPaneOpen = _ref.setIsPaneOpen;
   var _useTranslation = useTranslation(),
     t = _useTranslation.t;
-  return /*#__PURE__*/React.createElement("div", {
-    className: "flex flex-shrink-0 items-center gap-3"
-  }, /*#__PURE__*/React.createElement(Button, {
-    "data-cy": "neeto-fields-reorder-button",
-    disabled: !reorderable,
-    label: t("neetoFields.labels.reorder"),
-    style: "secondary",
-    onClick: function onClick() {
-      return setIsReorderPaneOpen(true);
-    }
-  }), /*#__PURE__*/React.createElement(Button, {
-    "data-cy": "neeto-fields-add-button",
-    label: t("neetoFields.labels.addField"),
-    onClick: function onClick() {
-      return setIsPaneOpen(true);
-    }
-  }));
+  return /*#__PURE__*/jsxs("div", {
+    className: "flex flex-shrink-0 items-center gap-3",
+    children: [/*#__PURE__*/jsx(Button, {
+      "data-cy": "neeto-fields-reorder-button",
+      disabled: !reorderable,
+      label: t("neetoFields.labels.reorder"),
+      style: "secondary",
+      onClick: function onClick() {
+        return setIsReorderPaneOpen(true);
+      }
+    }), /*#__PURE__*/jsx(Button, {
+      "data-cy": "neeto-fields-add-button",
+      label: t("neetoFields.labels.addField"),
+      onClick: function onClick() {
+        return setIsPaneOpen(true);
+      }
+    })]
+  });
 };
 
 var _excluded = ["searchInputProps", "breadcrumbs", "title", "helpDocUrl", "helpDescription", "size"];
+function ownKeys$7(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread$7(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$7(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$7(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var Header = withT(function (_ref) {
   var searchInputProps = _ref.searchInputProps,
     breadcrumbs = _ref.breadcrumbs,
@@ -3126,32 +3171,35 @@ var Header = withT(function (_ref) {
     helpDescription = _ref.helpDescription,
     size = _ref.size,
     actionBlockProps = _objectWithoutProperties(_ref, _excluded);
-  return /*#__PURE__*/React.createElement(NeetoUIHeader, {
+  return /*#__PURE__*/jsx(NeetoUIHeader, {
     breadcrumbs: breadcrumbs,
     size: size,
-    actionBlock: /*#__PURE__*/React.createElement(ActionBlock, actionBlockProps),
+    actionBlock: /*#__PURE__*/jsx(ActionBlock, _objectSpread$7({}, actionBlockProps)),
     searchProps: searchInputProps,
-    title: /*#__PURE__*/React.createElement("span", null, title, (helpDocUrl || helpDescription) && /*#__PURE__*/React.createElement(HelpPopover, _extends({
-      className: "ml-2 self-center"
-    }, helpDocUrl && {
-      title: title
-    }, helpDescription && {
-      description: helpDescription
-    }, helpDocUrl && {
-      helpLinkProps: {
-        href: helpDocUrl
-      }
-    })))
+    title: /*#__PURE__*/jsxs("span", {
+      children: [title, (helpDocUrl || helpDescription) && /*#__PURE__*/jsx(HelpPopover, _objectSpread$7(_objectSpread$7(_objectSpread$7({
+        className: "ml-2 self-center"
+      }, helpDocUrl && {
+        title: title
+      }), helpDescription && {
+        description: helpDescription
+      }), helpDocUrl && {
+        helpLinkProps: {
+          href: helpDocUrl
+        }
+      }))]
+    })
   });
 });
 
 var Menubar = function Menubar(_ref) {
   var menuBarItems = _ref.menuBarItems,
     title = _ref.title;
-  return /*#__PURE__*/React.createElement(MenuBar, {
+  return /*#__PURE__*/jsx(MenuBar, {
     showMenu: true,
-    title: title
-  }, menuBarItems);
+    title: title,
+    children: menuBarItems
+  });
 };
 
 function useCombinedRefs() {
@@ -7388,8 +7436,8 @@ function normalizeLocalDisabled(localDisabled, globalDisabled) {
 
 [KeyboardCode.Down, KeyboardCode.Right, KeyboardCode.Up, KeyboardCode.Left];
 
-function ownKeys$5(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
-function _objectSpread$5(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$5(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$5(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function ownKeys$6(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread$6(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$6(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$6(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var FieldBlock = function FieldBlock(_ref) {
   var field = _ref.field,
     index = _ref.index,
@@ -7410,20 +7458,24 @@ var FieldBlock = function FieldBlock(_ref) {
   var style = {
     transform: CSS.Transform.toString(transform)
   };
-  return /*#__PURE__*/React.createElement("div", _extends({
+  return /*#__PURE__*/jsxs("div", _objectSpread$6(_objectSpread$6({
     ref: setNodeRef
-  }, _objectSpread$5(_objectSpread$5({
+  }, _objectSpread$6(_objectSpread$6({
     style: style
-  }, attributes), listeners), {
+  }, attributes), listeners)), {}, {
     className: "neeto-ui-text-gray-800 mb-3 flex w-full items-center space-x-4 font-medium",
-    "data-cy": "reorder-field-block"
-  }), /*#__PURE__*/React.createElement("div", {
-    className: "neeto-ui-bg-gray-100 neeto-ui-text-gray-700 neeto-ui-rounded-sm flex h-6 w-6 flex-shrink-0 items-center justify-center p-1"
-  }, index - systemFieldsCount + 1), /*#__PURE__*/React.createElement("div", {
-    className: "neeto-ui-border-gray-400 neeto-ui-bg-white neeto-ui-rounded neeto-ui-shadow-xs flex flex-grow items-center space-x-4 border border-solid p-3"
-  }, /*#__PURE__*/React.createElement(Reorder, null), /*#__PURE__*/React.createElement("div", {
-    "data-cy": "reorder-field-block-name"
-  }, field.name)));
+    "data-cy": "reorder-field-block",
+    children: [/*#__PURE__*/jsx("div", {
+      className: "neeto-ui-bg-gray-100 neeto-ui-text-gray-700 neeto-ui-rounded-sm flex h-6 w-6 flex-shrink-0 items-center justify-center p-1",
+      children: index - systemFieldsCount + 1
+    }), /*#__PURE__*/jsxs("div", {
+      className: "neeto-ui-border-gray-400 neeto-ui-bg-white neeto-ui-rounded neeto-ui-shadow-xs flex flex-grow items-center space-x-4 border border-solid p-3",
+      children: [/*#__PURE__*/jsx(Reorder, {}), /*#__PURE__*/jsx("div", {
+        "data-cy": "reorder-field-block-name",
+        children: field.name
+      })]
+    })]
+  }));
 };
 var FieldBlock$1 = /*#__PURE__*/React.memo(FieldBlock);
 
@@ -7442,7 +7494,7 @@ var ReorderPane = function ReorderPane(_ref) {
     resource = _getQueryParams.resource;
   var _useReorderFields = useReorderFields(),
     reorderField = _useReorderFields.mutate,
-    isSubmitting = _useReorderFields.isLoading;
+    isSubmitting = _useReorderFields.isPending;
   var fieldParams = {
     resourceType: isEmpty(ownerId) ? resource : undefined,
     ownerId: ownerId,
@@ -7450,20 +7502,15 @@ var ReorderPane = function ReorderPane(_ref) {
     searchTerm: ""
   };
   var _useFetchFields = useFetchFields(fieldParams, {
-      enabled: !!resource && isOpen,
-      onSuccess: function onSuccess(_ref2) {
-        var fields = _ref2.fields;
-        setFields(fields);
-        initialStateRef.current = fields;
-      }
+      enabled: !!resource && isOpen
     }),
     _useFetchFields$data = _useFetchFields.data,
     _useFetchFields$data2 = _useFetchFields$data === void 0 ? {} : _useFetchFields$data,
     _useFetchFields$data3 = _useFetchFields$data2.fields,
     allFields = _useFetchFields$data3 === void 0 ? [] : _useFetchFields$data3;
-  var handleDragEnd = function handleDragEnd(_ref3) {
-    var active = _ref3.active,
-      over = _ref3.over;
+  var handleDragEnd = function handleDragEnd(_ref2) {
+    var active = _ref2.active,
+      over = _ref2.over;
     if (active.id !== over.id) {
       setFields(function (fields) {
         return arrayMove(fields, active.data.current.index, over.data.current.index);
@@ -7485,70 +7532,88 @@ var ReorderPane = function ReorderPane(_ref) {
       onSuccess: onClose
     });
   };
-  return /*#__PURE__*/React.createElement(Pane, {
+  useEffect(function () {
+    if (isEmpty(allFields)) return;
+    setFields(allFields);
+    initialStateRef.current = allFields;
+  }, [allFields]);
+  return /*#__PURE__*/jsxs(Pane, {
     isOpen: isOpen,
-    onClose: onClose
-  }, /*#__PURE__*/React.createElement(Pane.Header, null, /*#__PURE__*/React.createElement(Typography, {
-    "data-cy": "reorder-pane-header",
-    style: "h2",
-    weight: "semibold"
-  }, t("neetoFields.titles.reorderFields"))), /*#__PURE__*/React.createElement(Pane.Body, null, /*#__PURE__*/React.createElement(Typography, {
-    className: "mb-3",
-    "data-cy": "reorder-pane-message",
-    style: "body2"
-  }, t("neetoFields.messages.reorderFields")), /*#__PURE__*/React.createElement("div", {
-    className: "flex w-full flex-col items-center"
-  }, /*#__PURE__*/React.createElement(DndContext, {
-    collisionDetection: closestCenter,
-    onDragEnd: handleDragEnd
-  }, /*#__PURE__*/React.createElement(SortableContext, {
-    items: fields,
-    strategy: verticalListSortingStrategy
-  }, fields.map(function (field, index) {
-    if (field.isSystem) return null;
-    return /*#__PURE__*/React.createElement(FieldBlock$1, {
-      field: field,
-      fields: fields,
-      index: index,
-      key: index
-    });
-  }))))), /*#__PURE__*/React.createElement(Pane.Footer, {
-    className: "flex items-center space-x-2"
-  }, /*#__PURE__*/React.createElement(Button, {
-    "data-cy": "save-changes-button",
-    disabled: initialStateRef.current === fields,
-    label: t("neetoFields.labels.saveChanges"),
-    loading: isSubmitting,
-    onClick: handleReorderSave
-  }), /*#__PURE__*/React.createElement(Button, {
-    "data-cy": "cancel-button",
-    label: t("neetoFields.labels.cancel"),
-    style: "text",
-    onClick: onClose
-  })));
-};
-
-// eslint-disable-next-line @bigbinary/neeto/no-dumb-components-with-use-translation
+    onClose: onClose,
+    children: [/*#__PURE__*/jsx(Pane.Header, {
+      children: /*#__PURE__*/jsx(Typography, {
+        "data-cy": "reorder-pane-header",
+        style: "h2",
+        weight: "semibold",
+        children: t("neetoFields.titles.reorderFields")
+      })
+    }), /*#__PURE__*/jsxs(Pane.Body, {
+      children: [/*#__PURE__*/jsx(Typography, {
+        className: "mb-3",
+        "data-cy": "reorder-pane-message",
+        style: "body2",
+        children: t("neetoFields.messages.reorderFields")
+      }), /*#__PURE__*/jsx("div", {
+        className: "flex w-full flex-col items-center",
+        children: /*#__PURE__*/jsx(DndContext, {
+          collisionDetection: closestCenter,
+          onDragEnd: handleDragEnd,
+          children: /*#__PURE__*/jsx(SortableContext, {
+            items: fields,
+            strategy: verticalListSortingStrategy,
+            children: fields.map(function (field, index) {
+              if (field.isSystem) return null;
+              return /*#__PURE__*/createElement(FieldBlock$1, {
+                field: field,
+                fields: fields,
+                index: index,
+                key: index
+              });
+            })
+          })
+        })
+      })]
+    }), /*#__PURE__*/jsxs(Pane.Footer, {
+      className: "flex items-center space-x-2",
+      children: [/*#__PURE__*/jsx(Button, {
+        "data-cy": "save-changes-button",
+        disabled: initialStateRef.current === fields,
+        label: t("neetoFields.labels.saveChanges"),
+        loading: isSubmitting,
+        onClick: handleReorderSave
+      }), /*#__PURE__*/jsx(Button, {
+        "data-cy": "cancel-button",
+        label: t("neetoFields.labels.cancel"),
+        style: "text",
+        onClick: onClose
+      })]
+    })]
+  });
+};
+
 var Subheader = function Subheader(_ref) {
   var count = _ref.count,
     searchKeywordProps = _ref.searchKeywordProps;
   var _useTranslation = useTranslation(),
     t = _useTranslation.t;
-  return /*#__PURE__*/React.createElement(NeetoUISubHeader, {
-    leftActionBlock: /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Typography, {
-      className: "neeto-ui-gray-800 mr-4 font-semibold",
-      "data-cy": "neeto-fields-subheader-text",
-      style: "h4"
-    }, t("neetoFields.titles.fieldWithCount", {
-      count: count
-    })), /*#__PURE__*/React.createElement(Bar, {
-      keyword: searchKeywordProps
-    }))
+  return /*#__PURE__*/jsx(NeetoUISubHeader, {
+    leftActionBlock: /*#__PURE__*/jsxs(Fragment, {
+      children: [/*#__PURE__*/jsx(Typography, {
+        className: "neeto-ui-gray-800 mr-4 font-semibold",
+        "data-cy": "neeto-fields-subheader-text",
+        style: "h4",
+        children: t("neetoFields.titles.fieldWithCount", {
+          count: count
+        })
+      }), /*#__PURE__*/jsx(Bar, {
+        keyword: searchKeywordProps
+      })]
+    })
   });
 };
 
-/** @type {React.FC<import("types").FieldsDashboardProps>} */
-
+function ownKeys$5(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread$5(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$5(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$5(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var FieldsDashboard = function FieldsDashboard(_ref) {
   var _ref$rowData = _ref.rowData,
     rowData = _ref$rowData === void 0 ? [] : _ref$rowData,
@@ -7632,51 +7697,57 @@ var FieldsDashboard = function FieldsDashboard(_ref) {
     size: headerSize
   };
   var showSubheader = showCountSubheader || isPresent(searchKeywordProps.value);
-  return /*#__PURE__*/React.createElement(React.Fragment, null, isMenuBarNeeded && /*#__PURE__*/React.createElement(Menubar, {
-    menuBarItems: menuBarItems,
-    title: title
-  }), /*#__PURE__*/React.createElement(Container, null, /*#__PURE__*/React.createElement(Header, headerProps), showSubheader && /*#__PURE__*/React.createElement(Subheader, {
-    count: count,
-    searchKeywordProps: searchKeywordProps
-  }), showStateFilter && stateFilterTabs, isScreenLoading ? /*#__PURE__*/React.createElement("div", {
-    className: "flex h-screen w-full flex-grow items-center justify-center"
-  }, /*#__PURE__*/React.createElement(PageLoader, null)) : /*#__PURE__*/React.createElement(FieldsTable, {
-    columnData: columnData,
-    helpDescription: helpDescription,
-    helpDocUrl: helpDocUrl,
-    pageProps: pageProps,
-    setIsPaneOpen: setIsPaneOpen,
-    setPageProps: setPageProps,
-    showStateFilter: showStateFilter,
-    title: title,
-    isFetched: isFieldsFetched,
-    isFetching: isFieldsFetching,
-    rowData: isEmpty(rowData) ? fields : rowData,
-    totalCount: count
-  }), /*#__PURE__*/React.createElement(FieldsPane, {
-    allowedKinds: allowedKinds,
-    selectedField: selectedField,
-    additionalValidations: paneProps === null || paneProps === void 0 ? void 0 : paneProps.validations,
-    hideRequiredSwitch: paneProps === null || paneProps === void 0 ? void 0 : paneProps.hideRequiredSwitch,
-    initialValues: paneProps === null || paneProps === void 0 ? void 0 : paneProps.initialValues,
-    isOpen: isPaneOpen,
-    ownerId: isOwnerBased ? selectedMenu : "",
-    resourceType: isOwnerBased ? resourceType : selectedMenu,
-    onClose: handleClosePane,
-    onMutationSuccess: paneProps === null || paneProps === void 0 ? void 0 : paneProps.onMutationSuccess
-  }, paneProps === null || paneProps === void 0 ? void 0 : paneProps.children)), /*#__PURE__*/React.createElement(ReorderPane, {
-    isOpen: isReorderPaneOpen,
-    ownerId: isOwnerBased ? selectedMenu : "",
-    onClose: handleReorderPaneClose
-  }), /*#__PURE__*/React.createElement(DeleteAlert, {
-    handleAlertClose: handleAlertClose,
-    handleDelete: handleDelete,
-    isDeleteAlertOpen: isDeleteAlertOpen,
-    isDeleting: isDeleting,
-    ownerId: ownerId,
-    selectedField: selectedField,
-    resourceTypeName: isOwnerBased ? resourceType : selectedMenu
-  }));
+  return /*#__PURE__*/jsxs(Fragment, {
+    children: [isMenuBarNeeded && /*#__PURE__*/jsx(Menubar, {
+      menuBarItems: menuBarItems,
+      title: title
+    }), /*#__PURE__*/jsxs(Container, {
+      children: [/*#__PURE__*/jsx(Header, _objectSpread$5({}, headerProps)), showSubheader && /*#__PURE__*/jsx(Subheader, {
+        count: count,
+        searchKeywordProps: searchKeywordProps
+      }), showStateFilter && stateFilterTabs, isScreenLoading ? /*#__PURE__*/jsx("div", {
+        className: "flex h-screen w-full flex-grow items-center justify-center",
+        children: /*#__PURE__*/jsx(PageLoader, {})
+      }) : /*#__PURE__*/jsx(FieldsTable, {
+        columnData: columnData,
+        helpDescription: helpDescription,
+        helpDocUrl: helpDocUrl,
+        pageProps: pageProps,
+        setIsPaneOpen: setIsPaneOpen,
+        setPageProps: setPageProps,
+        showStateFilter: showStateFilter,
+        title: title,
+        isFetched: isFieldsFetched,
+        isFetching: isFieldsFetching,
+        rowData: isEmpty(rowData) ? fields : rowData,
+        totalCount: count
+      }), /*#__PURE__*/jsx(FieldsPane, {
+        allowedKinds: allowedKinds,
+        selectedField: selectedField,
+        additionalValidations: paneProps === null || paneProps === void 0 ? void 0 : paneProps.validations,
+        hideRequiredSwitch: paneProps === null || paneProps === void 0 ? void 0 : paneProps.hideRequiredSwitch,
+        initialValues: paneProps === null || paneProps === void 0 ? void 0 : paneProps.initialValues,
+        isOpen: isPaneOpen,
+        ownerId: isOwnerBased ? selectedMenu : "",
+        resourceType: isOwnerBased ? resourceType : selectedMenu,
+        onClose: handleClosePane,
+        onMutationSuccess: paneProps === null || paneProps === void 0 ? void 0 : paneProps.onMutationSuccess,
+        children: paneProps === null || paneProps === void 0 ? void 0 : paneProps.children
+      })]
+    }), /*#__PURE__*/jsx(ReorderPane, {
+      isOpen: isReorderPaneOpen,
+      ownerId: isOwnerBased ? selectedMenu : "",
+      onClose: handleReorderPaneClose
+    }), /*#__PURE__*/jsx(DeleteAlert, {
+      handleAlertClose: handleAlertClose,
+      handleDelete: handleDelete,
+      isDeleteAlertOpen: isDeleteAlertOpen,
+      isDeleting: isDeleting,
+      ownerId: ownerId,
+      selectedField: selectedField,
+      resourceTypeName: isOwnerBased ? resourceType : selectedMenu
+    })]
+  });
 };
 
 var isFieldValueEmpty = function isFieldValueEmpty(fieldKind, fieldValueData) {
@@ -7721,17 +7792,17 @@ function ownKeys$4(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymb
 function _objectSpread$4(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$4(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$4(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var useCreateFieldValue = function useCreateFieldValue(options) {
   return useMutationWithInvalidation(fieldValuesApi.create, _objectSpread$4({
-    keysToInvalidate: [[QUERY_KEYS.FIELD_VALUES]]
+    keysToInvalidate: [QUERY_KEYS.FIELD_VALUES]
   }, options));
 };
 var useUpdateFieldValue = function useUpdateFieldValue(options) {
   return useMutationWithInvalidation(fieldValuesApi.update, _objectSpread$4({
-    keysToInvalidate: [[QUERY_KEYS.FIELD_VALUES]]
+    keysToInvalidate: [QUERY_KEYS.FIELD_VALUES]
   }, options));
 };
 var useDeleteFieldValue = function useDeleteFieldValue(options) {
   return useMutationWithInvalidation(fieldValuesApi.destroy, _objectSpread$4({
-    keysToInvalidate: [[QUERY_KEYS.FIELD_VALUES]]
+    keysToInvalidate: [QUERY_KEYS.FIELD_VALUES]
   }, options));
 };
 
@@ -7899,7 +7970,7 @@ var BlockNavigation = function BlockNavigation(_ref) {
     hidePrompt = _useNavPrompt.hidePrompt,
     navigate = _useNavPrompt.navigate;
   var alertProps = _objectSpread$2(_objectSpread$2({}, DEAFULT_BLOCK_NAVIGATION_ALERT_PROPS), blockNavigationAlertProps);
-  return /*#__PURE__*/React.createElement(Alert, {
+  return /*#__PURE__*/jsx(Alert, {
     cancelButtonLabel: alertProps["cancelButtonLabel"],
     isOpen: blocked,
     message: alertProps["message"],
@@ -7917,7 +7988,7 @@ var FieldValueInputWrapper = function FieldValueInputWrapper(_ref) {
     onSubmit = _ref.onSubmit,
     _ref$className = _ref.className,
     className = _ref$className === void 0 ? "" : _ref$className;
-  return /*#__PURE__*/React.createElement(Form, {
+  return /*#__PURE__*/jsx(Form, {
     scrollToErrorField: true,
     className: classnames("flex w-full", className),
     formikProps: {
@@ -7928,8 +7999,9 @@ var FieldValueInputWrapper = function FieldValueInputWrapper(_ref) {
       }),
       onSubmit: onSubmit,
       enableReinitialize: true
-    }
-  }, children);
+    },
+    children: children
+  });
 };
 
 function ownKeys$1(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
@@ -7985,48 +8057,52 @@ var FieldValuesContainer = function FieldValuesContainer(_ref) {
     handleSubmit = _useFieldValues.handleSubmit,
     submittingFieldDetails = _useFieldValues.submittingFieldDetails;
   var fields = propFields || fetchedFields;
-  return /*#__PURE__*/React.createElement("div", {
+  return /*#__PURE__*/jsx("div", {
     className: classnames("space-y-3 py-3", {
       "neeto-ui-border-gray-300 neeto-ui-rounded-lg neeto-ui-bg-white border px-4 py-2": showBorder
-    }, className)
-  }, isFieldsLoading ? /*#__PURE__*/React.createElement("div", {
-    className: "flex items-center justify-center"
-  }, /*#__PURE__*/React.createElement(Spinner, null)) : getNonSystemFields(fields).map(function (field) {
-    var Field = getFieldInput({
-      field: field,
-      customComponents: customComponents
-    });
-    if (Field) {
-      var _submittingFieldDetai;
-      return /*#__PURE__*/React.createElement("div", {
-        className: classnames(fieldClassName, "space-y-1"),
-        key: field.id
-      }, /*#__PURE__*/React.createElement(FieldValueInputWrapper, {
+    }, className),
+    children: isFieldsLoading ? /*#__PURE__*/jsx("div", {
+      className: "flex items-center justify-center",
+      children: /*#__PURE__*/jsx(Spinner, {})
+    }) : getNonSystemFields(fields).map(function (field) {
+      var Field = getFieldInput({
         field: field,
-        fieldValues: fieldValues,
-        className: fieldClassName,
-        onSubmit: function onSubmit(values) {
-          return handleSubmit(field, values);
-        }
-      }, /*#__PURE__*/React.createElement("div", {
-        className: "w-full"
-      }, /*#__PURE__*/React.createElement(Field, _extends({}, _objectSpread$1(_objectSpread$1({}, field), {}, {
-        disabled: disabled,
-        formRefs: formRefs,
-        isRequiredColumnName: isRequiredColumnName
-      }), {
-        individualSubmit: true,
-        submissionStatus: (_submittingFieldDetai = submittingFieldDetails[field.id]) === null || _submittingFieldDetai === void 0 ? void 0 : _submittingFieldDetai.status
-      })), /*#__PURE__*/React.createElement(BlockNavigation, {
-        blockNavigation: blockNavigation,
-        blockNavigationAlertProps: blockNavigationAlertProps
-      }))));
-    }
-    return /*#__PURE__*/React.createElement(Typography, {
-      key: field.id,
-      style: "body2"
-    }, t("neetoFields.messages.invalidKind"));
-  }));
+        customComponents: customComponents
+      });
+      if (Field) {
+        var _submittingFieldDetai;
+        return /*#__PURE__*/jsx("div", {
+          className: classnames(fieldClassName, "space-y-1"),
+          children: /*#__PURE__*/jsx(FieldValueInputWrapper, {
+            field: field,
+            fieldValues: fieldValues,
+            className: fieldClassName,
+            onSubmit: function onSubmit(values) {
+              return handleSubmit(field, values);
+            },
+            children: /*#__PURE__*/jsxs("div", {
+              className: "w-full",
+              children: [/*#__PURE__*/jsx(Field, _objectSpread$1(_objectSpread$1({}, _objectSpread$1(_objectSpread$1({}, field), {}, {
+                disabled: disabled,
+                formRefs: formRefs,
+                isRequiredColumnName: isRequiredColumnName
+              })), {}, {
+                individualSubmit: true,
+                submissionStatus: (_submittingFieldDetai = submittingFieldDetails[field.id]) === null || _submittingFieldDetai === void 0 ? void 0 : _submittingFieldDetai.status
+              })), /*#__PURE__*/jsx(BlockNavigation, {
+                blockNavigation: blockNavigation,
+                blockNavigationAlertProps: blockNavigationAlertProps
+              })]
+            })
+          })
+        }, field.id);
+      }
+      return /*#__PURE__*/jsx(Typography, {
+        style: "body2",
+        children: t("neetoFields.messages.invalidKind")
+      }, field.id);
+    })
+  });
 };
 
 var renderDataAsText = function renderDataAsText(field, fieldValues) {
@@ -8070,9 +8146,10 @@ function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbol
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var DefaultDisplayComponent = function DefaultDisplayComponent(_ref) {
   var value = _ref.value;
-  return /*#__PURE__*/React.createElement(Typography, {
-    className: "text-wrap"
-  }, value);
+  return /*#__PURE__*/jsx(Typography, {
+    className: "text-wrap",
+    children: value
+  });
 };
 var InlineFieldValueInput = function InlineFieldValueInput(_ref2) {
   var field = _ref2.field,
@@ -8119,31 +8196,34 @@ var InlineFieldValueInput = function InlineFieldValueInput(_ref2) {
     _ref3$component = _ref3.component,
     CustomDisplayComponent = _ref3$component === void 0 ? null : _ref3$component;
   var DisplayComponent = CustomDisplayComponent || DefaultDisplayComponent;
-  return isEditable ? /*#__PURE__*/React.createElement("div", {
-    "data-cy": "inline-field-value-input-".concat(hyphenize$1(field.name))
-  }, /*#__PURE__*/React.createElement(FieldValueInputWrapper, {
-    field: field,
-    fieldValues: fieldValues,
-    onSubmit: function onSubmit(values) {
-      return handleSubmit(field, values);
-    }
-  }, /*#__PURE__*/React.createElement(Field, _extends({}, _objectSpread({}, field), {
-    individualSubmit: true,
-    isInline: true,
-    onBlur: function onBlur() {
-      return setEditMode(false);
-    }
-  })))) : /*#__PURE__*/React.createElement("div", {
+  return isEditable ? /*#__PURE__*/jsx("div", {
+    "data-cy": "inline-field-value-input-".concat(hyphenize$1(field.name)),
+    children: /*#__PURE__*/jsx(FieldValueInputWrapper, {
+      field: field,
+      fieldValues: fieldValues,
+      onSubmit: function onSubmit(values) {
+        return handleSubmit(field, values);
+      },
+      children: /*#__PURE__*/jsx(Field, _objectSpread(_objectSpread({}, _objectSpread({}, field)), {}, {
+        individualSubmit: true,
+        isInline: true,
+        onBlur: function onBlur() {
+          return setEditMode(false);
+        }
+      }))
+    })
+  }) : /*#__PURE__*/jsx("div", {
     className: classnames({
       "cursor-pointer": !field.isSystem
     }),
     onClick: function onClick() {
       return setEditMode(true);
-    }
-  }, /*#__PURE__*/React.createElement(DisplayComponent, _extends({
-    resourceId: resourceId,
-    value: displayValue
-  }, customDisplayComponentProps)));
+    },
+    children: /*#__PURE__*/jsx(DisplayComponent, _objectSpread({
+      resourceId: resourceId,
+      value: displayValue
+    }, customDisplayComponentProps))
+  });
 };
 
 var e=[],t=[];function n(n,r){if(n&&"undefined"!=typeof document){var a,s=!0===r.prepend?"prepend":"append",d=!0===r.singleTag,i="string"==typeof r.container?document.querySelector(r.container):document.getElementsByTagName("head")[0];if(d){var u=e.indexOf(i);-1===u&&(u=e.push(i)-1,t[u]={}),a=t[u]&&t[u][s]?t[u][s]:t[u][s]=c();}else a=c();65279===n.charCodeAt(0)&&(n=n.substring(1)),a.styleSheet?a.styleSheet.cssText+=n:a.appendChild(document.createTextNode(n));}function c(){var e=document.createElement("style");if(e.setAttribute("type","text/css"),r.attributes)for(var t=Object.keys(r.attributes),n=0;n<t.length;n++)e.setAttribute(t[n],r.attributes[t[n]]);var a="prepend"===s?"afterbegin":"beforeend";return i.insertAdjacentElement(a,e),e}}