@bigbinary/neeto-api-keys-frontend 1.1.13 → 1.1.15

package/dist/index.cjs.js

@@ -2,25 +2,39 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var React = require('react');
+var react = require('react');
 var i18next = require('i18next');
-var constants = require('@bigbinary/neeto-commons-frontend/constants');
 var neetoCist = require('@bigbinary/neeto-cist');
+var constants = require('@bigbinary/neeto-commons-frontend/constants');
 var reactUtils = require('@bigbinary/neeto-commons-frontend/react-utils');
 var Header = require('@bigbinary/neeto-molecules/Header');
-var neetoui = require('@bigbinary/neetoui');
+var HelpPopover = require('@bigbinary/neeto-molecules/HelpPopover');
+var Alert = require('@bigbinary/neetoui/Alert');
+var Button = require('@bigbinary/neetoui/Button');
 var reactI18next = require('react-i18next');
+var initializers = require('@bigbinary/neeto-commons-frontend/initializers');
 var reactQuery = require('react-query');
 var axios = require('axios');
-var formik$1 = require('@bigbinary/neetoui/formik');
+var Pane = require('@bigbinary/neetoui/Pane');
+var Typography = require('@bigbinary/neetoui/Typography');
+var NeetoUIForm = require('@bigbinary/neetoui/formik/Form');
+var Input = require('@bigbinary/neetoui/formik/Input');
+var Checkbox = require('@bigbinary/neetoui/formik/Checkbox');
+var ActionBlock = require('@bigbinary/neetoui/formik/ActionBlock');
 var formik = require('formik');
+var NeetoUIDatePicker = require('@bigbinary/neetoui/DatePicker');
 var ramda = require('ramda');
+var dayjs = require('dayjs');
 var utils = require('@bigbinary/neeto-commons-frontend/utils');
 var MoreDropdown = require('@bigbinary/neeto-molecules/MoreDropdown');
 var CopyToClipboardButton = require('@bigbinary/neeto-molecules/CopyToClipboardButton');
+var Tag = require('@bigbinary/neetoui/Tag');
 var yup = require('yup');
+var jsxRuntime = require('react/jsx-runtime');
 var PageLoader = require('@bigbinary/neeto-molecules/PageLoader');
 var TableWrapper = require('@bigbinary/neeto-molecules/TableWrapper');
+var NeetoUITable = require('@bigbinary/neetoui/Table');
+var NoData = require('@bigbinary/neetoui/NoData');
 var reactRouterDom = require('react-router-dom');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
@@ -43,28 +57,67 @@ function _interopNamespace(e) {
   return Object.freeze(n);
 }
 
-var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var Header__default = /*#__PURE__*/_interopDefaultLegacy(Header);
+var HelpPopover__default = /*#__PURE__*/_interopDefaultLegacy(HelpPopover);
+var Alert__default = /*#__PURE__*/_interopDefaultLegacy(Alert);
+var Button__default = /*#__PURE__*/_interopDefaultLegacy(Button);
 var axios__default = /*#__PURE__*/_interopDefaultLegacy(axios);
+var Pane__default = /*#__PURE__*/_interopDefaultLegacy(Pane);
+var Typography__default = /*#__PURE__*/_interopDefaultLegacy(Typography);
+var NeetoUIForm__default = /*#__PURE__*/_interopDefaultLegacy(NeetoUIForm);
+var Input__default = /*#__PURE__*/_interopDefaultLegacy(Input);
+var Checkbox__default = /*#__PURE__*/_interopDefaultLegacy(Checkbox);
+var ActionBlock__default = /*#__PURE__*/_interopDefaultLegacy(ActionBlock);
+var NeetoUIDatePicker__default = /*#__PURE__*/_interopDefaultLegacy(NeetoUIDatePicker);
+var dayjs__default = /*#__PURE__*/_interopDefaultLegacy(dayjs);
 var MoreDropdown__default = /*#__PURE__*/_interopDefaultLegacy(MoreDropdown);
 var CopyToClipboardButton__default = /*#__PURE__*/_interopDefaultLegacy(CopyToClipboardButton);
+var Tag__default = /*#__PURE__*/_interopDefaultLegacy(Tag);
 var yup__namespace = /*#__PURE__*/_interopNamespace(yup);
 var PageLoader__default = /*#__PURE__*/_interopDefaultLegacy(PageLoader);
 var TableWrapper__default = /*#__PURE__*/_interopDefaultLegacy(TableWrapper);
+var NeetoUITable__default = /*#__PURE__*/_interopDefaultLegacy(NeetoUITable);
+var NoData__default = /*#__PURE__*/_interopDefaultLegacy(NoData);
 
-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(o) {
+  "@babel/helpers - typeof";
+
+  return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) {
+    return typeof o;
+  } : function (o) {
+    return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o;
+  }, _typeof(o);
+}
+
+function _toPrimitive(input, hint) {
+  if (_typeof(input) !== "object" || input === null) return input;
+  var prim = input[Symbol.toPrimitive];
+  if (prim !== undefined) {
+    var res = prim.call(input, hint || "default");
+    if (_typeof(res) !== "object") return res;
+    throw new TypeError("@@toPrimitive must return a primitive value.");
+  }
+  return (hint === "string" ? String : Number)(input);
+}
+
+function _toPropertyKey(arg) {
+  var key = _toPrimitive(arg, "string");
+  return _typeof(key) === "symbol" ? key : String(key);
+}
+
+function _defineProperty(obj, key, value) {
+  key = _toPropertyKey(key);
+  if (key in obj) {
+    Object.defineProperty(obj, key, {
+      value: value,
+      enumerable: true,
+      configurable: true,
+      writable: true
+    });
+  } else {
+    obj[key] = value;
+  }
+  return obj;
 }
 
 function _arrayWithHoles(arr) {
@@ -123,6 +176,7 @@ function _slicedToArray(arr, i) {
 }
 
 var API_KEYS_BASE_URL = "/neeto_api_keys_engine/api/v1/api_keys";
+var HELP_DOC_URL = "https://help.".concat(initializers.globalProps.appName.toLowerCase(), ".com/articles/api-keys");
 
 var fetch = function fetch(params) {
   return axios__default["default"].get(API_KEYS_BASE_URL, {
@@ -188,29 +242,12 @@ var useDeleteApiKey = function useDeleteApiKey(onSuccess) {
   });
 };
 
-var commonjsGlobal = typeof globalThis !== 'undefined' ? globalThis : typeof window !== 'undefined' ? window : typeof global !== 'undefined' ? global : typeof self !== 'undefined' ? self : {};
-
-function getDefaultExportFromCjs (x) {
-	return x && x.__esModule && Object.prototype.hasOwnProperty.call(x, 'default') ? x['default'] : x;
-}
-
-var dayjs_min = {exports: {}};
-
-dayjs_min.exports;
-
-(function (module, exports) {
-	!function(t,e){module.exports=e();}(commonjsGlobal,(function(){var t=1e3,e=6e4,n=36e5,r="millisecond",i="second",s="minute",u="hour",a="day",o="week",c="month",f="quarter",h="year",d="date",l="Invalid Date",$=/^(\d{4})[-/]?(\d{1,2})?[-/]?(\d{0,2})[Tt\s]*(\d{1,2})?:?(\d{1,2})?:?(\d{1,2})?[.:]?(\d+)?$/,y=/\[([^\]]+)]|Y{1,4}|M{1,4}|D{1,2}|d{1,4}|H{1,2}|h{1,2}|a|A|m{1,2}|s{1,2}|Z{1,2}|SSS/g,M={name:"en",weekdays:"Sunday_Monday_Tuesday_Wednesday_Thursday_Friday_Saturday".split("_"),months:"January_February_March_April_May_June_July_August_September_October_November_December".split("_"),ordinal:function(t){var e=["th","st","nd","rd"],n=t%100;return "["+t+(e[(n-20)%10]||e[n]||e[0])+"]"}},m=function(t,e,n){var r=String(t);return !r||r.length>=e?t:""+Array(e+1-r.length).join(n)+t},v={s:m,z:function(t){var e=-t.utcOffset(),n=Math.abs(e),r=Math.floor(n/60),i=n%60;return (e<=0?"+":"-")+m(r,2,"0")+":"+m(i,2,"0")},m:function t(e,n){if(e.date()<n.date())return -t(n,e);var r=12*(n.year()-e.year())+(n.month()-e.month()),i=e.clone().add(r,c),s=n-i<0,u=e.clone().add(r+(s?-1:1),c);return +(-(r+(n-i)/(s?i-u:u-i))||0)},a:function(t){return t<0?Math.ceil(t)||0:Math.floor(t)},p:function(t){return {M:c,y:h,w:o,d:a,D:d,h:u,m:s,s:i,ms:r,Q:f}[t]||String(t||"").toLowerCase().replace(/s$/,"")},u:function(t){return void 0===t}},g="en",D={};D[g]=M;var p="$isDayjsObject",S=function(t){return t instanceof _||!(!t||!t[p])},w=function t(e,n,r){var i;if(!e)return g;if("string"==typeof e){var s=e.toLowerCase();D[s]&&(i=s),n&&(D[s]=n,i=s);var u=e.split("-");if(!i&&u.length>1)return t(u[0])}else {var a=e.name;D[a]=e,i=a;}return !r&&i&&(g=i),i||!r&&g},O=function(t,e){if(S(t))return t.clone();var n="object"==typeof e?e:{};return n.date=t,n.args=arguments,new _(n)},b=v;b.l=w,b.i=S,b.w=function(t,e){return O(t,{locale:e.$L,utc:e.$u,x:e.$x,$offset:e.$offset})};var _=function(){function M(t){this.$L=w(t.locale,null,!0),this.parse(t),this.$x=this.$x||t.x||{},this[p]=!0;}var m=M.prototype;return m.parse=function(t){this.$d=function(t){var e=t.date,n=t.utc;if(null===e)return new Date(NaN);if(b.u(e))return new Date;if(e instanceof Date)return new Date(e);if("string"==typeof e&&!/Z$/i.test(e)){var r=e.match($);if(r){var i=r[2]-1||0,s=(r[7]||"0").substring(0,3);return n?new Date(Date.UTC(r[1],i,r[3]||1,r[4]||0,r[5]||0,r[6]||0,s)):new Date(r[1],i,r[3]||1,r[4]||0,r[5]||0,r[6]||0,s)}}return new Date(e)}(t),this.init();},m.init=function(){var t=this.$d;this.$y=t.getFullYear(),this.$M=t.getMonth(),this.$D=t.getDate(),this.$W=t.getDay(),this.$H=t.getHours(),this.$m=t.getMinutes(),this.$s=t.getSeconds(),this.$ms=t.getMilliseconds();},m.$utils=function(){return b},m.isValid=function(){return !(this.$d.toString()===l)},m.isSame=function(t,e){var n=O(t);return this.startOf(e)<=n&&n<=this.endOf(e)},m.isAfter=function(t,e){return O(t)<this.startOf(e)},m.isBefore=function(t,e){return this.endOf(e)<O(t)},m.$g=function(t,e,n){return b.u(t)?this[e]:this.set(n,t)},m.unix=function(){return Math.floor(this.valueOf()/1e3)},m.valueOf=function(){return this.$d.getTime()},m.startOf=function(t,e){var n=this,r=!!b.u(e)||e,f=b.p(t),l=function(t,e){var i=b.w(n.$u?Date.UTC(n.$y,e,t):new Date(n.$y,e,t),n);return r?i:i.endOf(a)},$=function(t,e){return b.w(n.toDate()[t].apply(n.toDate("s"),(r?[0,0,0,0]:[23,59,59,999]).slice(e)),n)},y=this.$W,M=this.$M,m=this.$D,v="set"+(this.$u?"UTC":"");switch(f){case h:return r?l(1,0):l(31,11);case c:return r?l(1,M):l(0,M+1);case o:var g=this.$locale().weekStart||0,D=(y<g?y+7:y)-g;return l(r?m-D:m+(6-D),M);case a:case d:return $(v+"Hours",0);case u:return $(v+"Minutes",1);case s:return $(v+"Seconds",2);case i:return $(v+"Milliseconds",3);default:return this.clone()}},m.endOf=function(t){return this.startOf(t,!1)},m.$set=function(t,e){var n,o=b.p(t),f="set"+(this.$u?"UTC":""),l=(n={},n[a]=f+"Date",n[d]=f+"Date",n[c]=f+"Month",n[h]=f+"FullYear",n[u]=f+"Hours",n[s]=f+"Minutes",n[i]=f+"Seconds",n[r]=f+"Milliseconds",n)[o],$=o===a?this.$D+(e-this.$W):e;if(o===c||o===h){var y=this.clone().set(d,1);y.$d[l]($),y.init(),this.$d=y.set(d,Math.min(this.$D,y.daysInMonth())).$d;}else l&&this.$d[l]($);return this.init(),this},m.set=function(t,e){return this.clone().$set(t,e)},m.get=function(t){return this[b.p(t)]()},m.add=function(r,f){var d,l=this;r=Number(r);var $=b.p(f),y=function(t){var e=O(l);return b.w(e.date(e.date()+Math.round(t*r)),l)};if($===c)return this.set(c,this.$M+r);if($===h)return this.set(h,this.$y+r);if($===a)return y(1);if($===o)return y(7);var M=(d={},d[s]=e,d[u]=n,d[i]=t,d)[$]||1,m=this.$d.getTime()+r*M;return b.w(m,this)},m.subtract=function(t,e){return this.add(-1*t,e)},m.format=function(t){var e=this,n=this.$locale();if(!this.isValid())return n.invalidDate||l;var r=t||"YYYY-MM-DDTHH:mm:ssZ",i=b.z(this),s=this.$H,u=this.$m,a=this.$M,o=n.weekdays,c=n.months,f=n.meridiem,h=function(t,n,i,s){return t&&(t[n]||t(e,r))||i[n].slice(0,s)},d=function(t){return b.s(s%12||12,t,"0")},$=f||function(t,e,n){var r=t<12?"AM":"PM";return n?r.toLowerCase():r};return r.replace(y,(function(t,r){return r||function(t){switch(t){case"YY":return String(e.$y).slice(-2);case"YYYY":return b.s(e.$y,4,"0");case"M":return a+1;case"MM":return b.s(a+1,2,"0");case"MMM":return h(n.monthsShort,a,c,3);case"MMMM":return h(c,a);case"D":return e.$D;case"DD":return b.s(e.$D,2,"0");case"d":return String(e.$W);case"dd":return h(n.weekdaysMin,e.$W,o,2);case"ddd":return h(n.weekdaysShort,e.$W,o,3);case"dddd":return o[e.$W];case"H":return String(s);case"HH":return b.s(s,2,"0");case"h":return d(1);case"hh":return d(2);case"a":return $(s,u,!0);case"A":return $(s,u,!1);case"m":return String(u);case"mm":return b.s(u,2,"0");case"s":return String(e.$s);case"ss":return b.s(e.$s,2,"0");case"SSS":return b.s(e.$ms,3,"0");case"Z":return i}return null}(t)||i.replace(":","")}))},m.utcOffset=function(){return 15*-Math.round(this.$d.getTimezoneOffset()/15)},m.diff=function(r,d,l){var $,y=this,M=b.p(d),m=O(r),v=(m.utcOffset()-this.utcOffset())*e,g=this-m,D=function(){return b.m(y,m)};switch(M){case h:$=D()/12;break;case c:$=D();break;case f:$=D()/3;break;case o:$=(g-v)/6048e5;break;case a:$=(g-v)/864e5;break;case u:$=g/n;break;case s:$=g/e;break;case i:$=g/t;break;default:$=g;}return l?$:b.a($)},m.daysInMonth=function(){return this.endOf(c).$D},m.$locale=function(){return D[this.$L]},m.locale=function(t,e){if(!t)return this.$L;var n=this.clone(),r=w(t,e,!0);return r&&(n.$L=r),n},m.clone=function(){return b.w(this.$d,this)},m.toDate=function(){return new Date(this.valueOf())},m.toJSON=function(){return this.isValid()?this.toISOString():null},m.toISOString=function(){return this.$d.toISOString()},m.toString=function(){return this.$d.toUTCString()},M}(),k=_.prototype;return O.prototype=k,[["$ms",r],["$s",i],["$m",s],["$H",u],["$W",a],["$M",c],["$y",h],["$D",d]].forEach((function(t){k[t[1]]=function(e){return this.$g(e,t[0],t[1])};})),O.extend=function(t,e){return t.$i||(t(e,_,O),t.$i=!0),O},O.locale=w,O.isDayjs=S,O.unix=function(t){return O(1e3*t)},O.en=D[g],O.Ls=D,O.p={},O})); 
-} (dayjs_min, dayjs_min.exports));
-
-var dayjs_minExports = dayjs_min.exports;
-var dayjs = /*@__PURE__*/getDefaultExportFromCjs(dayjs_minExports);
-
 var INITIAL_VALUES = {
   expiresAt: null,
   label: "",
   hasNoExpiry: true
 };
-var NEXT_DAY = dayjs().add(1, "day").startOf("day");
+var NEXT_DAY = dayjs__default["default"]().add(1, "day").startOf("day");
 var VALIDATION_SCHEMA = yup__namespace.object({
   expiresAt: yup__namespace.date().when("hasNoExpiry", function (hasNoExpiry, field) {
     return hasNoExpiry ? field.nullable() : field.nullable().required(i18next.t("neetoApiKeys.validations.required", {
@@ -229,13 +266,13 @@ var MENU_ITEMS = {
 };
 
 var isInPast = function isInPast(date) {
-  return dayjs(date).isBefore(dayjs());
+  return dayjs__default["default"](date).isBefore(dayjs__default["default"]());
 };
 var partlyHideToken = function partlyHideToken(key) {
   return key.slice(-4).padStart(20, "*");
 };
 var formatExpiry = function formatExpiry(date) {
-  return dayjs(date).diff(dayjs(), "day") <= 2 ? utils.dateFormat.fromNow(date) : utils.dateFormat.date(date);
+  return dayjs__default["default"](date).diff(dayjs__default["default"](), "day") <= 2 ? utils.dateFormat.fromNow(date) : utils.dateFormat.date(date);
 };
 var getMenuItems = function getMenuItems(_ref) {
   var onEdit = _ref.onEdit,
@@ -259,23 +296,25 @@ var buildColumnData = function buildColumnData(_ref2) {
     dataIndex: "label",
     width: 400,
     render: function render(label, apiKey) {
-      return /*#__PURE__*/React__default["default"].createElement("div", {
-        className: "flex items-center justify-between space-x-3"
-      }, /*#__PURE__*/React__default["default"].createElement(neetoui.Typography, {
-        style: "body2"
-      }, label), /*#__PURE__*/React__default["default"].createElement(MoreDropdown__default["default"], {
-        dropdownProps: {
-          strategy: "fixed"
-        },
-        menuItems: getMenuItems({
-          onEdit: function onEdit() {
-            return handleEdit(apiKey);
+      return /*#__PURE__*/jsxRuntime.jsxs("div", {
+        className: "flex items-center justify-between space-x-3",
+        children: [/*#__PURE__*/jsxRuntime.jsx(Typography__default["default"], {
+          style: "body2",
+          children: label
+        }), /*#__PURE__*/jsxRuntime.jsx(MoreDropdown__default["default"], {
+          dropdownProps: {
+            strategy: "fixed"
           },
-          onDelete: function onDelete() {
-            return handleDelete(apiKey);
-          }
-        })
-      }));
+          menuItems: getMenuItems({
+            onEdit: function onEdit() {
+              return handleEdit(apiKey);
+            },
+            onDelete: function onDelete() {
+              return handleDelete(apiKey);
+            }
+          })
+        })]
+      });
     }
   }, {
     title: i18next.t("neetoApiKeys.table.headers.token"),
@@ -283,14 +322,16 @@ var buildColumnData = function buildColumnData(_ref2) {
     dataIndex: "token",
     width: 400,
     render: function render(token) {
-      return /*#__PURE__*/React__default["default"].createElement("div", {
-        className: "flex items-center justify-between gap-x-3"
-      }, /*#__PURE__*/React__default["default"].createElement(neetoui.Typography, {
-        style: "body2"
-      }, partlyHideToken(token)), /*#__PURE__*/React__default["default"].createElement(CopyToClipboardButton__default["default"], {
-        style: "text",
-        value: token
-      }));
+      return /*#__PURE__*/jsxRuntime.jsxs("div", {
+        className: "flex items-center justify-between gap-x-3",
+        children: [/*#__PURE__*/jsxRuntime.jsx(Typography__default["default"], {
+          style: "body2",
+          children: partlyHideToken(token)
+        }), /*#__PURE__*/jsxRuntime.jsx(CopyToClipboardButton__default["default"], {
+          style: "text",
+          value: token
+        })]
+      });
     }
   }, {
     title: i18next.t("neetoApiKeys.table.headers.status"),
@@ -298,11 +339,13 @@ var buildColumnData = function buildColumnData(_ref2) {
     width: 144,
     render: function render(_, _ref3) {
       var expiresAt = _ref3.expiresAt;
-      return neetoCist.isPresent(expiresAt) && isInPast(expiresAt) ? /*#__PURE__*/React__default["default"].createElement(neetoui.Tag, {
-        style: "warning"
-      }, i18next.t("neetoApiKeys.tags.expired")) : /*#__PURE__*/React__default["default"].createElement(neetoui.Tag, {
-        style: "success"
-      }, i18next.t("neetoApiKeys.tags.active"));
+      return neetoCist.isPresent(expiresAt) && isInPast(expiresAt) ? /*#__PURE__*/jsxRuntime.jsx(Tag__default["default"], {
+        style: "warning",
+        children: i18next.t("neetoApiKeys.tags.expired")
+      }) : /*#__PURE__*/jsxRuntime.jsx(Tag__default["default"], {
+        style: "success",
+        children: i18next.t("neetoApiKeys.tags.active")
+      });
     }
   }, {
     title: i18next.t("neetoApiKeys.table.headers.expiresAt"),
@@ -310,9 +353,10 @@ var buildColumnData = function buildColumnData(_ref2) {
     dataIndex: "expiresAt",
     width: 200,
     render: function render(expiresAt) {
-      return neetoCist.isPresent(expiresAt) ? formatExpiry(expiresAt) : /*#__PURE__*/React__default["default"].createElement(neetoui.Typography, {
-        style: "body2"
-      }, i18next.t("neetoApiKeys.common.never"));
+      return neetoCist.isPresent(expiresAt) ? formatExpiry(expiresAt) : /*#__PURE__*/jsxRuntime.jsx(Typography__default["default"], {
+        style: "body2",
+        children: i18next.t("neetoApiKeys.common.never")
+      });
     }
   }, {
     title: i18next.t("neetoApiKeys.table.headers.createdAt"),
@@ -320,16 +364,19 @@ var buildColumnData = function buildColumnData(_ref2) {
     dataIndex: "createdAt",
     width: 200,
     render: function render(createdAt) {
-      return neetoCist.isPresent(createdAt) ? utils.dateFormat.dateTime(createdAt) : /*#__PURE__*/React__default["default"].createElement(neetoui.Typography, {
-        style: "body2"
-      }, i18next.t("neetoApiKeys.common.never"));
+      return neetoCist.isPresent(createdAt) ? utils.dateFormat.dateTime(createdAt) : /*#__PURE__*/jsxRuntime.jsx(Typography__default["default"], {
+        style: "body2",
+        children: i18next.t("neetoApiKeys.common.never")
+      });
     }
   }];
 };
 var getStartOfTime = function getStartOfTime(time, unit) {
-  return dayjs(time).startOf(unit);
+  return dayjs__default["default"](time).startOf(unit);
 };
 
+function ownKeys$3(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread$3(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$3(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$3(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var DatePicker = function DatePicker(_ref) {
   var defaultValue = _ref.defaultValue,
     disabledDate = _ref.disabledDate,
@@ -338,29 +385,30 @@ var DatePicker = function DatePicker(_ref) {
     name = _ref.name,
     _ref$disabled = _ref.disabled,
     disabled = _ref$disabled === void 0 ? false : _ref$disabled;
-  return /*#__PURE__*/React__default["default"].createElement(formik.Field, {
-    name: name
-  }, function (_ref2) {
-    var _globalProps;
-    var field = _ref2.field,
-      meta = _ref2.meta,
-      setFieldValue = _ref2.form.setFieldValue;
-    return /*#__PURE__*/React__default["default"].createElement(neetoui.DatePicker, _extends({
-      disabled: disabled,
-      disabledDate: disabledDate,
-      label: label,
-      placeholder: placeholder,
-      defaultValue: defaultValue,
-      allowClear: false,
-      className: "w-full",
-      error: meta.touched && meta.error,
-      format: (_globalProps = globalProps) === null || _globalProps === void 0 || (_globalProps = _globalProps.user) === null || _globalProps === void 0 ? void 0 : _globalProps.dateFormat,
-      getPopupContainer: ramda.prop("parentNode")
-    }, field, {
-      onChange: function onChange(date) {
-        setFieldValue(field.name, getStartOfTime(date, "day"));
-      }
-    }));
+  return /*#__PURE__*/jsxRuntime.jsx(formik.Field, {
+    name: name,
+    children: function children(_ref2) {
+      var _globalProps;
+      var field = _ref2.field,
+        meta = _ref2.meta,
+        setFieldValue = _ref2.form.setFieldValue;
+      return /*#__PURE__*/jsxRuntime.jsx(NeetoUIDatePicker__default["default"], _objectSpread$3(_objectSpread$3({
+        disabled: disabled,
+        disabledDate: disabledDate,
+        label: label,
+        placeholder: placeholder,
+        defaultValue: defaultValue,
+        allowClear: false,
+        className: "w-full",
+        error: meta.touched && meta.error,
+        format: (_globalProps = globalProps) === null || _globalProps === void 0 || (_globalProps = _globalProps.user) === null || _globalProps === void 0 ? void 0 : _globalProps.dateFormat,
+        getPopupContainer: ramda.prop("parentNode")
+      }, field), {}, {
+        onChange: function onChange(date) {
+          setFieldValue(field.name, getStartOfTime(date, "day"));
+        }
+      }));
+    }
   });
 };
 
@@ -372,123 +420,102 @@ var Form = reactUtils.withT(function (_ref) {
     onClose = _ref.onClose,
     onSubmit = _ref.onSubmit,
     initialFocusRef = _ref.initialFocusRef;
-  return /*#__PURE__*/React__default["default"].createElement(formik$1.Form, {
+  return /*#__PURE__*/jsxRuntime.jsx(NeetoUIForm__default["default"], {
     formikProps: {
       validationSchema: VALIDATION_SCHEMA,
       initialValues: initialValues,
       onSubmit: onSubmit
+    },
+    children: function children(_ref2) {
+      var setFieldValue = _ref2.setFieldValue,
+        _ref2$values = _ref2.values,
+        _ref2$values2 = _ref2$values === void 0 ? {} : _ref2$values,
+        hasNoExpiry = _ref2$values2.hasNoExpiry,
+        expiresAt = _ref2$values2.expiresAt;
+      return /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
+        children: [/*#__PURE__*/jsxRuntime.jsx(Pane__default["default"].Body, {
+          children: /*#__PURE__*/jsxRuntime.jsxs("div", {
+            className: "w-full space-y-4",
+            children: [/*#__PURE__*/jsxRuntime.jsx(Input__default["default"], {
+              autoFocus: true,
+              label: t("neetoApiKeys.fields.label"),
+              name: "label",
+              placeholder: t("neetoApiKeys.placeholders.label"),
+              ref: initialFocusRef
+            }), /*#__PURE__*/jsxRuntime.jsxs("div", {
+              className: "space-y-2",
+              children: [!hasNoExpiry && /*#__PURE__*/jsxRuntime.jsx(DatePicker, {
+                defaultValue: expiresAt,
+                disabledDate: function disabledDate(date) {
+                  return date < NEXT_DAY;
+                },
+                label: t("neetoApiKeys.fields.expiryDate"),
+                name: "expiresAt",
+                placeholder: t("neetoApiKeys.placeholders.selectExpiryDate")
+              }), /*#__PURE__*/jsxRuntime.jsx(Checkbox__default["default"], {
+                checked: hasNoExpiry,
+                label: t("neetoApiKeys.fields.neverExpire"),
+                name: "hasNoExpiry",
+                onChange: function onChange() {
+                  setFieldValue("expiresAt", null);
+                  setFieldValue("hasNoExpiry", !hasNoExpiry);
+                }
+              })]
+            })]
+          })
+        }), /*#__PURE__*/jsxRuntime.jsx(Pane__default["default"].Footer, {
+          children: /*#__PURE__*/jsxRuntime.jsx(ActionBlock__default["default"], {
+            isSubmitting: isSubmitting,
+            cancelButtonProps: {
+              onClick: onClose
+            }
+          })
+        })]
+      });
     }
-  }, function (_ref2) {
-    var setFieldValue = _ref2.setFieldValue,
-      _ref2$values = _ref2.values,
-      _ref2$values2 = _ref2$values === void 0 ? {} : _ref2$values,
-      hasNoExpiry = _ref2$values2.hasNoExpiry,
-      expiresAt = _ref2$values2.expiresAt;
-    return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement(neetoui.Pane.Body, null, /*#__PURE__*/React__default["default"].createElement("div", {
-      className: "w-full space-y-4"
-    }, /*#__PURE__*/React__default["default"].createElement(formik$1.Input, {
-      autoFocus: true,
-      label: t("neetoApiKeys.fields.label"),
-      name: "label",
-      placeholder: t("neetoApiKeys.placeholders.label"),
-      ref: initialFocusRef
-    }), /*#__PURE__*/React__default["default"].createElement("div", {
-      className: "space-y-2"
-    }, !hasNoExpiry && /*#__PURE__*/React__default["default"].createElement(DatePicker, {
-      defaultValue: expiresAt,
-      disabledDate: function disabledDate(date) {
-        return date < NEXT_DAY;
-      },
-      label: t("neetoApiKeys.fields.expiryDate"),
-      name: "expiresAt",
-      placeholder: t("neetoApiKeys.placeholders.selectExpiryDate")
-    }), /*#__PURE__*/React__default["default"].createElement(formik$1.Checkbox, {
-      checked: hasNoExpiry,
-      label: t("neetoApiKeys.fields.neverExpire"),
-      name: "hasNoExpiry",
-      onChange: function onChange() {
-        setFieldValue("expiresAt", null);
-        setFieldValue("hasNoExpiry", !hasNoExpiry);
-      }
-    })))), /*#__PURE__*/React__default["default"].createElement(neetoui.Pane.Footer, null, /*#__PURE__*/React__default["default"].createElement(formik$1.ActionBlock, {
-      isSubmitting: isSubmitting,
-      cancelButtonProps: {
-        onClick: onClose
-      }
-    })));
   });
 });
 
 var Create = function Create(_ref) {
   var onClose = _ref.onClose,
     isOpen = _ref.isOpen;
-  var initialFocusRef = React.useRef(null);
+  var initialFocusRef = react.useRef(null);
   var _useCreateApiKey = useCreateApiKey(onClose),
     createApiKey = _useCreateApiKey.mutate,
     isCreating = _useCreateApiKey.isLoading;
   var _useTranslation = reactI18next.useTranslation(),
     t = _useTranslation.t;
-  return /*#__PURE__*/React__default["default"].createElement(neetoui.Pane, {
-    initialFocusRef: initialFocusRef,
-    onClose: onClose,
-    isOpen: isOpen
-  }, /*#__PURE__*/React__default["default"].createElement(neetoui.Pane.Header, null, /*#__PURE__*/React__default["default"].createElement(neetoui.Typography, {
-    style: "h2"
-  }, t("neetoApiKeys.headers.createApiKey"))), /*#__PURE__*/React__default["default"].createElement(Form, {
+  return /*#__PURE__*/jsxRuntime.jsxs(Pane__default["default"], {
     initialFocusRef: initialFocusRef,
+    isOpen: isOpen,
     onClose: onClose,
-    isSubmitting: isCreating,
-    onSubmit: createApiKey
-  }));
+    children: [/*#__PURE__*/jsxRuntime.jsx(Pane__default["default"].Header, {
+      children: /*#__PURE__*/jsxRuntime.jsxs(Typography__default["default"], {
+        style: "h2",
+        children: [t("neetoApiKeys.headers.createApiKey"), /*#__PURE__*/jsxRuntime.jsx(HelpPopover__default["default"], {
+          className: "ml-2",
+          description: t("neetoApiKeys.tooltips.apiKeysDescription"),
+          helpLinkProps: {
+            href: HELP_DOC_URL
+          },
+          title: t("neetoApiKeys.tooltips.apiKeys")
+        })]
+      })
+    }), /*#__PURE__*/jsxRuntime.jsx(Form, {
+      initialFocusRef: initialFocusRef,
+      onClose: onClose,
+      isSubmitting: isCreating,
+      onSubmit: createApiKey
+    })]
+  });
 };
 
-function _typeof(o) {
-  "@babel/helpers - typeof";
-
-  return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) {
-    return typeof o;
-  } : function (o) {
-    return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o;
-  }, _typeof(o);
-}
-
-function _toPrimitive(input, hint) {
-  if (_typeof(input) !== "object" || input === null) return input;
-  var prim = input[Symbol.toPrimitive];
-  if (prim !== undefined) {
-    var res = prim.call(input, hint || "default");
-    if (_typeof(res) !== "object") return res;
-    throw new TypeError("@@toPrimitive must return a primitive value.");
-  }
-  return (hint === "string" ? String : Number)(input);
-}
-
-function _toPropertyKey(arg) {
-  var key = _toPrimitive(arg, "string");
-  return _typeof(key) === "symbol" ? key : String(key);
-}
-
-function _defineProperty(obj, key, value) {
-  key = _toPropertyKey(key);
-  if (key in obj) {
-    Object.defineProperty(obj, key, {
-      value: value,
-      enumerable: true,
-      configurable: true,
-      writable: true
-    });
-  } else {
-    obj[key] = value;
-  }
-  return obj;
-}
-
-function ownKeys(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) { 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; }
+function ownKeys$2(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$2(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$2(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$2(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var Update = function Update(_ref) {
   var onClose = _ref.onClose,
     apiKey = _ref.apiKey;
-  var initialFocusRef = React.useRef(null);
+  var initialFocusRef = react.useRef(null);
   var _useUpdateApiKey = useUpdateApiKey(onClose),
     updateApiKey = _useUpdateApiKey.mutate,
     isUpdating = _useUpdateApiKey.isLoading;
@@ -500,22 +527,33 @@ var Update = function Update(_ref) {
       payload: values
     });
   };
-  var initialValues = _objectSpread(_objectSpread({}, apiKey), {}, {
+  var initialValues = _objectSpread$2(_objectSpread$2({}, apiKey), {}, {
     hasNoExpiry: neetoCist.isNotPresent(apiKey.expiresAt)
   });
-  return /*#__PURE__*/React__default["default"].createElement(neetoui.Pane, {
+  return /*#__PURE__*/jsxRuntime.jsxs(Pane__default["default"], {
     initialFocusRef: initialFocusRef,
     onClose: onClose,
-    isOpen: neetoCist.isNotEmpty(apiKey)
-  }, /*#__PURE__*/React__default["default"].createElement(neetoui.Pane.Header, null, /*#__PURE__*/React__default["default"].createElement(neetoui.Typography, {
-    style: "h2"
-  }, t("neetoApiKeys.headers.updateApiKey"))), /*#__PURE__*/React__default["default"].createElement(Form, {
-    initialValues: initialValues,
-    onClose: onClose,
-    initialFocusRef: initialFocusRef,
-    isSubmitting: isUpdating,
-    onSubmit: handleUpdate
-  }));
+    isOpen: neetoCist.isNotEmpty(apiKey),
+    children: [/*#__PURE__*/jsxRuntime.jsx(Pane__default["default"].Header, {
+      children: /*#__PURE__*/jsxRuntime.jsxs(Typography__default["default"], {
+        style: "h2",
+        children: [t("neetoApiKeys.headers.updateApiKey"), /*#__PURE__*/jsxRuntime.jsx(HelpPopover__default["default"], {
+          className: "ml-2",
+          description: t("neetoApiKeys.tooltips.apiKeysDescription"),
+          helpLinkProps: {
+            href: HELP_DOC_URL
+          },
+          title: t("neetoApiKeys.tooltips.apiKeys")
+        })]
+      })
+    }), /*#__PURE__*/jsxRuntime.jsx(Form, {
+      initialFocusRef: initialFocusRef,
+      initialValues: initialValues,
+      onClose: onClose,
+      isSubmitting: isUpdating,
+      onSubmit: handleUpdate
+    })]
+  });
 };
 
 var getPageFromSearchParams = function getPageFromSearchParams() {
@@ -536,15 +574,15 @@ var setPageSearchParam = function setPageSearchParam(_ref) {
 
 var usePagination = function usePagination(_ref) {
   var searchTerm = _ref.searchTerm;
-  var _useState = React.useState(getPageFromSearchParams),
+  var _useState = react.useState(getPageFromSearchParams),
     _useState2 = _slicedToArray(_useState, 2),
     currentPage = _useState2[0],
     setCurrentPage = _useState2[1];
   var history = reactRouterDom.useHistory();
-  React.useEffect(function () {
+  react.useEffect(function () {
     handlePageChange(getPageFromSearchParams());
   }, []);
-  React.useEffect(function () {
+  react.useEffect(function () {
     if (neetoCist.isNotEmpty(searchTerm) && currentPage !== constants.DEFAULT_PAGE_INDEX) {
       handlePageChange(constants.DEFAULT_PAGE_INDEX);
     }
@@ -570,6 +608,8 @@ var usePagination = function usePagination(_ref) {
   };
 };
 
+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; }
+function _objectSpread$1(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$1(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$1(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var Table = function Table(_ref) {
   var handleDelete = _ref.handleDelete,
     handleEdit = _ref.handleEdit,
@@ -604,50 +644,64 @@ var Table = function Table(_ref) {
     totalCount = _useFetchApiKeys$data2.totalCount,
     isLoading = _useFetchApiKeys.isLoading,
     isFetching = _useFetchApiKeys.isFetching;
-  if (isLoading) return /*#__PURE__*/React__default["default"].createElement(PageLoader__default["default"], null);
+  if (isLoading) return /*#__PURE__*/jsxRuntime.jsx(PageLoader__default["default"], {});
   if (ramda.isEmpty(apiKeys)) {
-    return /*#__PURE__*/React__default["default"].createElement("div", {
-      className: "flex h-full w-full items-center justify-center"
-    }, /*#__PURE__*/React__default["default"].createElement(neetoui.NoData, _extends({
-      primaryButtonProps: {
-        label: t("neetoApiKeys.buttons.addApiKey"),
-        onClick: function onClick() {
-          return setIsCreatePaneOpen(true);
+    return /*#__PURE__*/jsxRuntime.jsxs("div", {
+      className: "flex h-full w-full items-center justify-center",
+      children: [/*#__PURE__*/jsxRuntime.jsx(NoData__default["default"], _objectSpread$1({
+        className: "w-full",
+        title: t("neetoApiKeys.noData.title"),
+        helpText: /*#__PURE__*/jsxRuntime.jsx(reactI18next.Trans, {
+          i18nKey: "neetoApiKeys.noData.helpText",
+          components: {
+            helpLink: /*#__PURE__*/jsxRuntime.jsx(Button__default["default"], {
+              href: HELP_DOC_URL,
+              style: "link",
+              target: "_blank"
+            })
+          }
+        }),
+        primaryButtonProps: {
+          label: t("neetoApiKeys.buttons.addApiKey"),
+          onClick: function onClick() {
+            return setIsCreatePaneOpen(true);
+          }
         }
-      },
-      className: "w-full",
-      title: t("neetoApiKeys.noData.title")
-    }, noDataProps)), ";");
+      }, noDataProps)), ";"]
+    });
   }
-  return /*#__PURE__*/React__default["default"].createElement(TableWrapper__default["default"], {
-    hasPagination: totalCount > constants.DEFAULT_PAGE_SIZE
-  }, /*#__PURE__*/React__default["default"].createElement(neetoui.Table, {
-    fixedHeight: true,
-    columnData: buildColumnData({
-      handleDelete: handleDelete,
-      handleEdit: handleEdit
-    }),
-    currentPageNumber: currentPage,
-    defaultPageSize: constants.DEFAULT_PAGE_SIZE,
-    handlePageChange: handlePageChange,
-    loading: isFetching,
-    rowData: apiKeys,
-    totalCount: totalCount
-  }));
+  return /*#__PURE__*/jsxRuntime.jsx(TableWrapper__default["default"], {
+    hasPagination: totalCount > constants.DEFAULT_PAGE_SIZE,
+    children: /*#__PURE__*/jsxRuntime.jsx(NeetoUITable__default["default"], {
+      handlePageChange: handlePageChange,
+      totalCount: totalCount,
+      fixedHeight: true,
+      columnData: buildColumnData({
+        handleDelete: handleDelete,
+        handleEdit: handleEdit
+      }),
+      currentPageNumber: currentPage,
+      defaultPageSize: constants.DEFAULT_PAGE_SIZE,
+      loading: isFetching,
+      rowData: apiKeys
+    })
+  });
 };
 
+function ownKeys(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) { 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 ApiKeys = function ApiKeys(_ref) {
   var noDataProps = _ref.noDataProps,
     headerProps = _ref.headerProps;
-  var _useState = React.useState({}),
+  var _useState = react.useState({}),
     _useState2 = _slicedToArray(_useState, 2),
     apiKeyToBeDeleted = _useState2[0],
     setApiKeyToBeDeleted = _useState2[1];
-  var _useState3 = React.useState({}),
+  var _useState3 = react.useState({}),
     _useState4 = _slicedToArray(_useState3, 2),
     apiKeyToBeEdited = _useState4[0],
     setApiKeyToBeEdited = _useState4[1];
-  var _useState5 = React.useState(false),
+  var _useState5 = react.useState(false),
     _useState6 = _slicedToArray(_useState5, 2),
     isCreatePaneOpen = _useState6[0],
     setIsCreatePaneOpen = _useState6[1];
@@ -661,56 +715,66 @@ var ApiKeys = function ApiKeys(_ref) {
     }),
     deleteApiKey = _useDeleteApiKey.mutate,
     isDeleting = _useDeleteApiKey.isLoading;
-  return /*#__PURE__*/React__default["default"].createElement("div", {
-    className: "flex h-full w-full flex-col"
-  }, /*#__PURE__*/React__default["default"].createElement(Header__default["default"], _extends({
-    title: t("neetoApiKeys.common.apiKey", constants.PLURAL),
-    actionBlock: /*#__PURE__*/React__default["default"].createElement(neetoui.Button, {
-      label: t("neetoApiKeys.buttons.addApiKey"),
-      onClick: function onClick() {
-        return setIsCreatePaneOpen(true);
-      }
-    }),
-    searchProps: {
-      placeholder: t("neetoApiKeys.placeholders.search")
-    }
-  }, headerProps)), /*#__PURE__*/React__default["default"].createElement(Table, {
-    handleDelete: setApiKeyToBeDeleted,
-    handleEdit: setApiKeyToBeEdited,
-    searchTerm: searchTerm,
-    setIsCreatePaneOpen: setIsCreatePaneOpen,
-    noDataProps: noDataProps
-  }), /*#__PURE__*/React__default["default"].createElement(neetoui.Alert, {
-    isOpen: neetoCist.isNotEmpty(apiKeyToBeDeleted),
-    isSubmitting: isDeleting,
-    submitButtonLabel: t("neetoApiKeys.buttons.delete"),
-    title: t("neetoApiKeys.alert.titles.deleteApiKey"),
-    message: /*#__PURE__*/React__default["default"].createElement(reactI18next.Trans, {
-      components: {
-        bold: /*#__PURE__*/React__default["default"].createElement("strong", null)
+  return /*#__PURE__*/jsxRuntime.jsxs("div", {
+    className: "flex h-full w-full flex-col",
+    children: [/*#__PURE__*/jsxRuntime.jsx(Header__default["default"], _objectSpread({
+      actionBlock: /*#__PURE__*/jsxRuntime.jsx(Button__default["default"], {
+        label: t("neetoApiKeys.buttons.addApiKey"),
+        onClick: function onClick() {
+          return setIsCreatePaneOpen(true);
+        }
+      }),
+      searchProps: {
+        placeholder: t("neetoApiKeys.placeholders.search")
+      },
+      title: /*#__PURE__*/jsxRuntime.jsxs("div", {
+        className: "flex items-center gap-x-2",
+        children: [t("neetoApiKeys.common.apiKey", constants.PLURAL), /*#__PURE__*/jsxRuntime.jsx(HelpPopover__default["default"], {
+          description: t("neetoApiKeys.tooltips.apiKeysDescription"),
+          helpLinkProps: {
+            href: HELP_DOC_URL
+          },
+          title: t("neetoApiKeys.tooltips.apiKeys")
+        })]
+      })
+    }, headerProps)), /*#__PURE__*/jsxRuntime.jsx(Table, {
+      noDataProps: noDataProps,
+      searchTerm: searchTerm,
+      setIsCreatePaneOpen: setIsCreatePaneOpen,
+      handleDelete: setApiKeyToBeDeleted,
+      handleEdit: setApiKeyToBeEdited
+    }), /*#__PURE__*/jsxRuntime.jsx(Alert__default["default"], {
+      isOpen: neetoCist.isNotEmpty(apiKeyToBeDeleted),
+      isSubmitting: isDeleting,
+      submitButtonLabel: t("neetoApiKeys.buttons.delete"),
+      title: t("neetoApiKeys.alert.titles.deleteApiKey"),
+      message: /*#__PURE__*/jsxRuntime.jsx(reactI18next.Trans, {
+        components: {
+          bold: /*#__PURE__*/jsxRuntime.jsx("strong", {})
+        },
+        i18nKey: "neetoApiKeys.alert.descriptions.deleteApiKey",
+        values: {
+          name: apiKeyToBeDeleted.label
+        }
+      }),
+      onClose: function onClose() {
+        return setApiKeyToBeDeleted({});
       },
-      i18nKey: "neetoApiKeys.alert.descriptions.deleteApiKey",
-      values: {
-        name: apiKeyToBeDeleted.label
+      onSubmit: function onSubmit() {
+        return deleteApiKey(apiKeyToBeDeleted.id);
       }
-    }),
-    onClose: function onClose() {
-      return setApiKeyToBeDeleted({});
-    },
-    onSubmit: function onSubmit() {
-      return deleteApiKey(apiKeyToBeDeleted.id);
-    }
-  }), /*#__PURE__*/React__default["default"].createElement(Create, {
-    isOpen: isCreatePaneOpen,
-    onClose: function onClose() {
-      return setIsCreatePaneOpen(false);
-    }
-  }), /*#__PURE__*/React__default["default"].createElement(Update, {
-    apiKey: apiKeyToBeEdited,
-    onClose: function onClose() {
-      return setApiKeyToBeEdited({});
-    }
-  }));
+    }), /*#__PURE__*/jsxRuntime.jsx(Create, {
+      isOpen: isCreatePaneOpen,
+      onClose: function onClose() {
+        return setIsCreatePaneOpen(false);
+      }
+    }), /*#__PURE__*/jsxRuntime.jsx(Update, {
+      apiKey: apiKeyToBeEdited,
+      onClose: function onClose() {
+        return setApiKeyToBeEdited({});
+      }
+    })]
+  });
 };
 var index = reactUtils.withTitle(ApiKeys, i18next.t("neetoApiKeys.common.apiKey", constants.PLURAL));