@bigbinary/neeto-team-members-frontend 2.14.0 → 3.0.0

package/dist/index.cjs.js

@@ -6,11 +6,12 @@ var initializers = require('@bigbinary/neeto-commons-frontend/initializers');
 var React = require('react');
 var neetoui = require('@bigbinary/neetoui');
 var reactI18next = require('react-i18next');
+var neetoImageUploaderFrontend = require('@bigbinary/neeto-image-uploader-frontend');
 var neetoCist = require('@bigbinary/neeto-cist');
 var neetoIcons = require('@bigbinary/neeto-icons');
 var Container = require('@bigbinary/neeto-molecules/Container');
 var PageLoader = require('@bigbinary/neeto-molecules/PageLoader');
-var formik = require('@bigbinary/neetoui/formik');
+var formik$1 = require('@bigbinary/neetoui/formik');
 var i18next = require('i18next');
 var constants = require('@bigbinary/neeto-commons-frontend/constants');
 var reactUtils = require('@bigbinary/neeto-commons-frontend/react-utils');
@@ -18,12 +19,12 @@ var reactQuery = require('react-query');
 var axios = require('axios');
 var yup = require('yup');
 var ramda = require('ramda');
+var formik = require('formik');
 var withImmutableActions = require('@bigbinary/neeto-commons-frontend/react-utils/withImmutableActions');
 var zustand = require('zustand');
 var shallow = require('zustand/shallow');
 var devtools = require('react-query/devtools');
 var NeetoHeader = require('@bigbinary/neeto-molecules/Header');
-var formik$1 = require('formik');
 var classnames = require('classnames');
 var MoreDropdown = require('@bigbinary/neeto-molecules/MoreDropdown');
 var utils$3 = require('@bigbinary/neeto-commons-frontend/utils');
@@ -70,20 +71,20 @@ var TableWrapper__default = /*#__PURE__*/_interopDefaultLegacy(TableWrapper);
 var require$$0__default = /*#__PURE__*/_interopDefaultLegacy(require$$0);
 var MenuBar__default = /*#__PURE__*/_interopDefaultLegacy(MenuBar);
 
-function _typeof(o) {
+function _typeof$1(o) {
   "@babel/helpers - typeof";
 
-  return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) {
+  return _typeof$1 = "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);
+  }, _typeof$1(o);
 }
 
 var hasPermission = function hasPermission() {
   var _globalProps$permissi;
   var permissions = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : "";
-  var type = _typeof(permissions);
+  var type = _typeof$1(permissions);
   var userPermissions = (_globalProps$permissi = initializers.globalProps.permissions) !== null && _globalProps$permissi !== void 0 ? _globalProps$permissi : [];
   if (Object.is(type, "string")) {
     return userPermissions.includes(permissions);
@@ -172,11 +173,11 @@ function _slicedToArray(arr, i) {
 }
 
 function _toPrimitive(input, hint) {
-  if (_typeof(input) !== "object" || input === null) return input;
+  if (_typeof$1(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;
+    if (_typeof$1(res) !== "object") return res;
     throw new TypeError("@@toPrimitive must return a primitive value.");
   }
   return (hint === "string" ? String : Number)(input);
@@ -184,7 +185,7 @@ function _toPrimitive(input, hint) {
 
 function _toPropertyKey(arg) {
   var key = _toPrimitive(arg, "string");
-  return _typeof(key) === "symbol" ? key : String(key);
+  return _typeof$1(key) === "symbol" ? key : String(key);
 }
 
 function _defineProperty(obj, key, value) {
@@ -202,6 +203,392 @@ function _defineProperty(obj, key, value) {
   return obj;
 }
 
+function asyncGeneratorStep(gen, resolve, reject, _next, _throw, key, arg) {
+  try {
+    var info = gen[key](arg);
+    var value = info.value;
+  } catch (error) {
+    reject(error);
+    return;
+  }
+  if (info.done) {
+    resolve(value);
+  } else {
+    Promise.resolve(value).then(_next, _throw);
+  }
+}
+function _asyncToGenerator(fn) {
+  return function () {
+    var self = this,
+      args = arguments;
+    return new Promise(function (resolve, reject) {
+      var gen = fn.apply(self, args);
+      function _next(value) {
+        asyncGeneratorStep(gen, resolve, reject, _next, _throw, "next", value);
+      }
+      function _throw(err) {
+        asyncGeneratorStep(gen, resolve, reject, _next, _throw, "throw", err);
+      }
+      _next(undefined);
+    });
+  };
+}
+
+var 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 regeneratorRuntime$1 = {exports: {}};
+
+var _typeof = {exports: {}};
+
+_typeof.exports;
+
+(function (module) {
+	function _typeof(o) {
+	  "@babel/helpers - typeof";
+
+	  return (module.exports = _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;
+	  }, module.exports.__esModule = true, module.exports["default"] = module.exports), _typeof(o);
+	}
+	module.exports = _typeof, module.exports.__esModule = true, module.exports["default"] = module.exports; 
+} (_typeof));
+
+var _typeofExports = _typeof.exports;
+
+regeneratorRuntime$1.exports;
+
+(function (module) {
+	var _typeof = _typeofExports["default"];
+	function _regeneratorRuntime() {
+	  module.exports = _regeneratorRuntime = function _regeneratorRuntime() {
+	    return e;
+	  }, module.exports.__esModule = true, module.exports["default"] = module.exports;
+	  var t,
+	    e = {},
+	    r = Object.prototype,
+	    n = r.hasOwnProperty,
+	    o = Object.defineProperty || function (t, e, r) {
+	      t[e] = r.value;
+	    },
+	    i = "function" == typeof Symbol ? Symbol : {},
+	    a = i.iterator || "@@iterator",
+	    c = i.asyncIterator || "@@asyncIterator",
+	    u = i.toStringTag || "@@toStringTag";
+	  function define(t, e, r) {
+	    return Object.defineProperty(t, e, {
+	      value: r,
+	      enumerable: !0,
+	      configurable: !0,
+	      writable: !0
+	    }), t[e];
+	  }
+	  try {
+	    define({}, "");
+	  } catch (t) {
+	    define = function define(t, e, r) {
+	      return t[e] = r;
+	    };
+	  }
+	  function wrap(t, e, r, n) {
+	    var i = e && e.prototype instanceof Generator ? e : Generator,
+	      a = Object.create(i.prototype),
+	      c = new Context(n || []);
+	    return o(a, "_invoke", {
+	      value: makeInvokeMethod(t, r, c)
+	    }), a;
+	  }
+	  function tryCatch(t, e, r) {
+	    try {
+	      return {
+	        type: "normal",
+	        arg: t.call(e, r)
+	      };
+	    } catch (t) {
+	      return {
+	        type: "throw",
+	        arg: t
+	      };
+	    }
+	  }
+	  e.wrap = wrap;
+	  var h = "suspendedStart",
+	    l = "suspendedYield",
+	    f = "executing",
+	    s = "completed",
+	    y = {};
+	  function Generator() {}
+	  function GeneratorFunction() {}
+	  function GeneratorFunctionPrototype() {}
+	  var p = {};
+	  define(p, a, function () {
+	    return this;
+	  });
+	  var d = Object.getPrototypeOf,
+	    v = d && d(d(values([])));
+	  v && v !== r && n.call(v, a) && (p = v);
+	  var g = GeneratorFunctionPrototype.prototype = Generator.prototype = Object.create(p);
+	  function defineIteratorMethods(t) {
+	    ["next", "throw", "return"].forEach(function (e) {
+	      define(t, e, function (t) {
+	        return this._invoke(e, t);
+	      });
+	    });
+	  }
+	  function AsyncIterator(t, e) {
+	    function invoke(r, o, i, a) {
+	      var c = tryCatch(t[r], t, o);
+	      if ("throw" !== c.type) {
+	        var u = c.arg,
+	          h = u.value;
+	        return h && "object" == _typeof(h) && n.call(h, "__await") ? e.resolve(h.__await).then(function (t) {
+	          invoke("next", t, i, a);
+	        }, function (t) {
+	          invoke("throw", t, i, a);
+	        }) : e.resolve(h).then(function (t) {
+	          u.value = t, i(u);
+	        }, function (t) {
+	          return invoke("throw", t, i, a);
+	        });
+	      }
+	      a(c.arg);
+	    }
+	    var r;
+	    o(this, "_invoke", {
+	      value: function value(t, n) {
+	        function callInvokeWithMethodAndArg() {
+	          return new e(function (e, r) {
+	            invoke(t, n, e, r);
+	          });
+	        }
+	        return r = r ? r.then(callInvokeWithMethodAndArg, callInvokeWithMethodAndArg) : callInvokeWithMethodAndArg();
+	      }
+	    });
+	  }
+	  function makeInvokeMethod(e, r, n) {
+	    var o = h;
+	    return function (i, a) {
+	      if (o === f) throw new Error("Generator is already running");
+	      if (o === s) {
+	        if ("throw" === i) throw a;
+	        return {
+	          value: t,
+	          done: !0
+	        };
+	      }
+	      for (n.method = i, n.arg = a;;) {
+	        var c = n.delegate;
+	        if (c) {
+	          var u = maybeInvokeDelegate(c, n);
+	          if (u) {
+	            if (u === y) continue;
+	            return u;
+	          }
+	        }
+	        if ("next" === n.method) n.sent = n._sent = n.arg;else if ("throw" === n.method) {
+	          if (o === h) throw o = s, n.arg;
+	          n.dispatchException(n.arg);
+	        } else "return" === n.method && n.abrupt("return", n.arg);
+	        o = f;
+	        var p = tryCatch(e, r, n);
+	        if ("normal" === p.type) {
+	          if (o = n.done ? s : l, p.arg === y) continue;
+	          return {
+	            value: p.arg,
+	            done: n.done
+	          };
+	        }
+	        "throw" === p.type && (o = s, n.method = "throw", n.arg = p.arg);
+	      }
+	    };
+	  }
+	  function maybeInvokeDelegate(e, r) {
+	    var n = r.method,
+	      o = e.iterator[n];
+	    if (o === t) return r.delegate = null, "throw" === n && e.iterator["return"] && (r.method = "return", r.arg = t, maybeInvokeDelegate(e, r), "throw" === r.method) || "return" !== n && (r.method = "throw", r.arg = new TypeError("The iterator does not provide a '" + n + "' method")), y;
+	    var i = tryCatch(o, e.iterator, r.arg);
+	    if ("throw" === i.type) return r.method = "throw", r.arg = i.arg, r.delegate = null, y;
+	    var a = i.arg;
+	    return a ? a.done ? (r[e.resultName] = a.value, r.next = e.nextLoc, "return" !== r.method && (r.method = "next", r.arg = t), r.delegate = null, y) : a : (r.method = "throw", r.arg = new TypeError("iterator result is not an object"), r.delegate = null, y);
+	  }
+	  function pushTryEntry(t) {
+	    var e = {
+	      tryLoc: t[0]
+	    };
+	    1 in t && (e.catchLoc = t[1]), 2 in t && (e.finallyLoc = t[2], e.afterLoc = t[3]), this.tryEntries.push(e);
+	  }
+	  function resetTryEntry(t) {
+	    var e = t.completion || {};
+	    e.type = "normal", delete e.arg, t.completion = e;
+	  }
+	  function Context(t) {
+	    this.tryEntries = [{
+	      tryLoc: "root"
+	    }], t.forEach(pushTryEntry, this), this.reset(!0);
+	  }
+	  function values(e) {
+	    if (e || "" === e) {
+	      var r = e[a];
+	      if (r) return r.call(e);
+	      if ("function" == typeof e.next) return e;
+	      if (!isNaN(e.length)) {
+	        var o = -1,
+	          i = function next() {
+	            for (; ++o < e.length;) if (n.call(e, o)) return next.value = e[o], next.done = !1, next;
+	            return next.value = t, next.done = !0, next;
+	          };
+	        return i.next = i;
+	      }
+	    }
+	    throw new TypeError(_typeof(e) + " is not iterable");
+	  }
+	  return GeneratorFunction.prototype = GeneratorFunctionPrototype, o(g, "constructor", {
+	    value: GeneratorFunctionPrototype,
+	    configurable: !0
+	  }), o(GeneratorFunctionPrototype, "constructor", {
+	    value: GeneratorFunction,
+	    configurable: !0
+	  }), GeneratorFunction.displayName = define(GeneratorFunctionPrototype, u, "GeneratorFunction"), e.isGeneratorFunction = function (t) {
+	    var e = "function" == typeof t && t.constructor;
+	    return !!e && (e === GeneratorFunction || "GeneratorFunction" === (e.displayName || e.name));
+	  }, e.mark = function (t) {
+	    return Object.setPrototypeOf ? Object.setPrototypeOf(t, GeneratorFunctionPrototype) : (t.__proto__ = GeneratorFunctionPrototype, define(t, u, "GeneratorFunction")), t.prototype = Object.create(g), t;
+	  }, e.awrap = function (t) {
+	    return {
+	      __await: t
+	    };
+	  }, defineIteratorMethods(AsyncIterator.prototype), define(AsyncIterator.prototype, c, function () {
+	    return this;
+	  }), e.AsyncIterator = AsyncIterator, e.async = function (t, r, n, o, i) {
+	    void 0 === i && (i = Promise);
+	    var a = new AsyncIterator(wrap(t, r, n, o), i);
+	    return e.isGeneratorFunction(r) ? a : a.next().then(function (t) {
+	      return t.done ? t.value : a.next();
+	    });
+	  }, defineIteratorMethods(g), define(g, u, "Generator"), define(g, a, function () {
+	    return this;
+	  }), define(g, "toString", function () {
+	    return "[object Generator]";
+	  }), e.keys = function (t) {
+	    var e = Object(t),
+	      r = [];
+	    for (var n in e) r.push(n);
+	    return r.reverse(), function next() {
+	      for (; r.length;) {
+	        var t = r.pop();
+	        if (t in e) return next.value = t, next.done = !1, next;
+	      }
+	      return next.done = !0, next;
+	    };
+	  }, e.values = values, Context.prototype = {
+	    constructor: Context,
+	    reset: function reset(e) {
+	      if (this.prev = 0, this.next = 0, this.sent = this._sent = t, this.done = !1, this.delegate = null, this.method = "next", this.arg = t, this.tryEntries.forEach(resetTryEntry), !e) for (var r in this) "t" === r.charAt(0) && n.call(this, r) && !isNaN(+r.slice(1)) && (this[r] = t);
+	    },
+	    stop: function stop() {
+	      this.done = !0;
+	      var t = this.tryEntries[0].completion;
+	      if ("throw" === t.type) throw t.arg;
+	      return this.rval;
+	    },
+	    dispatchException: function dispatchException(e) {
+	      if (this.done) throw e;
+	      var r = this;
+	      function handle(n, o) {
+	        return a.type = "throw", a.arg = e, r.next = n, o && (r.method = "next", r.arg = t), !!o;
+	      }
+	      for (var o = this.tryEntries.length - 1; o >= 0; --o) {
+	        var i = this.tryEntries[o],
+	          a = i.completion;
+	        if ("root" === i.tryLoc) return handle("end");
+	        if (i.tryLoc <= this.prev) {
+	          var c = n.call(i, "catchLoc"),
+	            u = n.call(i, "finallyLoc");
+	          if (c && u) {
+	            if (this.prev < i.catchLoc) return handle(i.catchLoc, !0);
+	            if (this.prev < i.finallyLoc) return handle(i.finallyLoc);
+	          } else if (c) {
+	            if (this.prev < i.catchLoc) return handle(i.catchLoc, !0);
+	          } else {
+	            if (!u) throw new Error("try statement without catch or finally");
+	            if (this.prev < i.finallyLoc) return handle(i.finallyLoc);
+	          }
+	        }
+	      }
+	    },
+	    abrupt: function abrupt(t, e) {
+	      for (var r = this.tryEntries.length - 1; r >= 0; --r) {
+	        var o = this.tryEntries[r];
+	        if (o.tryLoc <= this.prev && n.call(o, "finallyLoc") && this.prev < o.finallyLoc) {
+	          var i = o;
+	          break;
+	        }
+	      }
+	      i && ("break" === t || "continue" === t) && i.tryLoc <= e && e <= i.finallyLoc && (i = null);
+	      var a = i ? i.completion : {};
+	      return a.type = t, a.arg = e, i ? (this.method = "next", this.next = i.finallyLoc, y) : this.complete(a);
+	    },
+	    complete: function complete(t, e) {
+	      if ("throw" === t.type) throw t.arg;
+	      return "break" === t.type || "continue" === t.type ? this.next = t.arg : "return" === t.type ? (this.rval = this.arg = t.arg, this.method = "return", this.next = "end") : "normal" === t.type && e && (this.next = e), y;
+	    },
+	    finish: function finish(t) {
+	      for (var e = this.tryEntries.length - 1; e >= 0; --e) {
+	        var r = this.tryEntries[e];
+	        if (r.finallyLoc === t) return this.complete(r.completion, r.afterLoc), resetTryEntry(r), y;
+	      }
+	    },
+	    "catch": function _catch(t) {
+	      for (var e = this.tryEntries.length - 1; e >= 0; --e) {
+	        var r = this.tryEntries[e];
+	        if (r.tryLoc === t) {
+	          var n = r.completion;
+	          if ("throw" === n.type) {
+	            var o = n.arg;
+	            resetTryEntry(r);
+	          }
+	          return o;
+	        }
+	      }
+	      throw new Error("illegal catch attempt");
+	    },
+	    delegateYield: function delegateYield(e, r, n) {
+	      return this.delegate = {
+	        iterator: values(e),
+	        resultName: r,
+	        nextLoc: n
+	      }, "next" === this.method && (this.arg = t), y;
+	    }
+	  }, e;
+	}
+	module.exports = _regeneratorRuntime, module.exports.__esModule = true, module.exports["default"] = module.exports; 
+} (regeneratorRuntime$1));
+
+var regeneratorRuntimeExports = regeneratorRuntime$1.exports;
+
+// TODO(Babel 8): Remove this file.
+
+var runtime = regeneratorRuntimeExports();
+var regenerator = runtime;
+
+// Copied from https://github.com/facebook/regenerator/blob/main/packages/runtime/runtime.js#L736=
+try {
+  regeneratorRuntime = runtime;
+} catch (accidentalStrictMode) {
+  if (typeof globalThis === "object") {
+    globalThis.regeneratorRuntime = runtime;
+  } else {
+    Function("r", "regeneratorRuntime = r")(runtime);
+  }
+}
+
+var _regeneratorRuntime = /*@__PURE__*/getDefaultExportFromCjs(regenerator);
+
 var ADMIN_ROLE_NAME = "Admin";
 var OWNER_ROLE_NAME = "Owner";
 var ADMIN_ROLES = [ADMIN_ROLE_NAME, OWNER_ROLE_NAME];
@@ -244,16 +631,16 @@ var profileApi = {
   updateUser: updateUser
 };
 
-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$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 useFetchProfile = function useFetchProfile(options) {
-  return reactQuery.useQuery([QUERY_KEYS.USER_PROFILE], profileApi.fetchUserDetails, _objectSpread$h({
+  return reactQuery.useQuery([QUERY_KEYS.USER_PROFILE], profileApi.fetchUserDetails, _objectSpread$g({
     staleTime: constants.DEFAULT_STALE_TIME,
     refetchOnWindowFocus: true
   }, options));
 };
 var useUpdateProfileMutation = function useUpdateProfileMutation(options) {
-  return reactUtils.useMutationWithInvalidation(profileApi.updateUser, _objectSpread$h(_objectSpread$h({
+  return reactUtils.useMutationWithInvalidation(profileApi.updateUser, _objectSpread$g(_objectSpread$g({
     keysToInvalidate: [[QUERY_KEYS.USER_PROFILE]]
   }, options), {}, {
     onSuccess: function onSuccess() {
@@ -268,11 +655,21 @@ var PROFILE_VALIDATION_SCHEMA = yup__namespace.object().shape({
   dateFormat: yup__namespace.string().required(i18next.t("neetoTeamMembers.profile.form.isRequired.dateFormat"))
 });
 var MY_PROFILE_PATH = "/auth/profile/edit";
+var ALLOWED_PROFILE_IMAGE_MIME_TYPES = ["image/jpeg", "image/png"];
+var IMAGE_DELETE_BUTTON_SIZE = 16;
+var STATIC_PROFILE_IMAGE_MAX_SIZE_IN_BYTES = initializers.globalProps.endUserUploadedFileSizeLimitInMb * 1024 * 1024;
+var VALIDATION_ERRORS = {
+  invalid_type: i18next.t("neetoTeamMembers.profile.file.invalidType.image"),
+  corrupted_file: i18next.t("neetoTeamMembers.profile.file.corrupted"),
+  file_limit_exceeded: i18next.t("neetoTeamMembers.profile.file.limitExceeded", {
+    maxSize: initializers.globalProps.endUserUploadedFileSizeLimitInMb
+  })
+};
 
-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$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 useFetchCountries = function useFetchCountries(options) {
-  return reactQuery.useQuery([QUERY_KEYS.COUNTRIES_LIST], profileApi.fetchCountries, _objectSpread$g({
+  return reactQuery.useQuery([QUERY_KEYS.COUNTRIES_LIST], profileApi.fetchCountries, _objectSpread$f({
     staleTime: constants.DEFAULT_STALE_TIME
   }, options));
 };
@@ -376,12 +773,120 @@ var useCountries = function useCountries(user) {
   };
 };
 
-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 ProfileImage = function ProfileImage() {
+  var _useTranslation = reactI18next.useTranslation(),
+    t = _useTranslation.t;
+  var _useField = formik.useField("avatar"),
+    _useField2 = _slicedToArray(_useField, 3),
+    field = _useField2[0];
+    _useField2[1];
+    var helpers = _useField2[2];
+  var setValue = helpers.setValue;
+  var avatarDetails = {
+    imageUrl: field.value.imageUrl
+  };
+  var onProfileImageChange = function onProfileImageChange(event) {
+    var imageFile = event.target.files[0];
+    var validationError = validateProfileImage(imageFile);
+    if (validationError) {
+      neetoui.Toastr.error(validationError);
+      return validationError;
+    }
+    return setValue({
+      imageUrl: URL.createObjectURL(imageFile),
+      file: imageFile
+    });
+  };
+  var handleRemoveImage = function handleRemoveImage() {
+    return setValue({
+      imageUrl: "",
+      file: "_destroy"
+    });
+  };
+  var validateProfileImage = function validateProfileImage(imageFile) {
+    var type = imageFile.type,
+      size = imageFile.size;
+    if (!ALLOWED_PROFILE_IMAGE_MIME_TYPES.includes(type)) {
+      return VALIDATION_ERRORS.invalid_type;
+    }
+    if (size === 0) return VALIDATION_ERRORS.corrupted_file;
+    if (size > STATIC_PROFILE_IMAGE_MAX_SIZE_IN_BYTES) {
+      return VALIDATION_ERRORS.file_limit_exceeded;
+    }
+    return null;
+  };
+  return /*#__PURE__*/React__default["default"].createElement("div", {
+    className: "mb-8 flex flex-row justify-start"
+  }, /*#__PURE__*/React__default["default"].createElement("div", {
+    className: "flex-shrink-0"
+  }, neetoCist.isPresent(avatarDetails === null || avatarDetails === void 0 ? void 0 : avatarDetails.imageUrl) && /*#__PURE__*/React__default["default"].createElement("div", {
+    className: "relative z-10"
+  }, /*#__PURE__*/React__default["default"].createElement("div", {
+    className: "neeto-ui-bg-gray-300 neeto-ui-rounded-full absolute right-0 top-0 cursor-pointer p-0.5",
+    "data-cy": "profile-image-remove-button",
+    onClick: handleRemoveImage
+  }, /*#__PURE__*/React__default["default"].createElement(neetoIcons.Delete, {
+    size: IMAGE_DELETE_BUTTON_SIZE
+  }))), /*#__PURE__*/React__default["default"].createElement(neetoui.Avatar, {
+    size: "extraLarge",
+    user: avatarDetails
+  })), /*#__PURE__*/React__default["default"].createElement("div", {
+    className: "ml-4 flex flex-col"
+  }, /*#__PURE__*/React__default["default"].createElement(neetoui.Label, {
+    className: "neeto-ui-text-black mb-1 font-medium"
+  }, t("neetoTeamMembers.profile.avatar.profilePicture")), /*#__PURE__*/React__default["default"].createElement(neetoui.Typography, {
+    className: "neeto-ui-text-gray-700 mb-2",
+    style: "body3"
+  }, /*#__PURE__*/React__default["default"].createElement(reactI18next.Trans, {
+    components: {
+      code: /*#__PURE__*/React__default["default"].createElement("code", null)
+    },
+    i18nKey: "neetoTeamMembers.profile.avatar.profilePictureUploadMessage",
+    values: {
+      limit: initializers.globalProps.endUserUploadedFileSizeLimitInMb
+    }
+  })), /*#__PURE__*/React__default["default"].createElement("div", {
+    className: "neeto-ui-file-upload flex flex-row ",
+    "data-cy": "profile-image-upload-container"
+  }, /*#__PURE__*/React__default["default"].createElement("label", {
+    className: "neeto-ui-btn--style-secondary neeto-ui-btn m-0 mr-3 ",
+    "data-cy": "profile-image-upload-label",
+    htmlFor: "uploadProfileImage"
+  }, avatarDetails !== null && avatarDetails !== void 0 && avatarDetails.imageUrl ? t("neetoTeamMembers.profile.avatar.changeProfilePicture") : t("neetoTeamMembers.profile.avatar.uploadProfilePicture")), /*#__PURE__*/React__default["default"].createElement("input", {
+    hidden: true,
+    accept: "image/*",
+    "data-cy": "profile-image-upload-file-field",
+    id: "uploadProfileImage",
+    key: avatarDetails === null || avatarDetails === void 0 ? void 0 : avatarDetails.imageUrl,
+    name: "profile_image_path",
+    type: "file",
+    onChange: onProfileImageChange
+  }))));
+};
+
+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 ChangeProfile = function ChangeProfile(_ref) {
   var onClose = _ref.onClose;
   var _useTranslation = reactI18next.useTranslation(),
     t = _useTranslation.t;
+  var _useProfileImageUploa = neetoImageUploaderFrontend.useProfileImageUpload({
+      uploadConfig: {
+        folder: "Auth",
+        customMetadata: {
+          appName: "neetoAuth"
+        }
+      }
+    }),
+    uploadImage = _useProfileImageUploa.uploadImage,
+    isUploading = _useProfileImageUploa.isUploading;
+  var handleUploadImage = function handleUploadImage(image) {
+    return new Promise(function (resolve) {
+      uploadImage(image, function (uploadedImageData) {
+        resolve(uploadedImageData);
+      });
+    });
+  };
   var _useFetchProfile = useFetchProfile(),
     _useFetchProfile$data = _useFetchProfile.data,
     _useFetchProfile$data2 = _useFetchProfile$data === void 0 ? {} : _useFetchProfile$data,
@@ -395,7 +900,9 @@ var ChangeProfile = function ChangeProfile(_ref) {
     _user$dateFormat = user.dateFormat,
     dateFormat = _user$dateFormat === void 0 ? DATE_FORMAT_OPTIONS[0].value : _user$dateFormat,
     _user$timeZone = user.timeZone,
-    timeZone = _user$timeZone === void 0 ? "" : _user$timeZone;
+    timeZone = _user$timeZone === void 0 ? "" : _user$timeZone,
+    _user$profileImageUrl = user.profileImageUrl,
+    profileImageUrl = _user$profileImageUrl === void 0 ? "" : _user$profileImageUrl;
   var _useCountries = useCountries(user),
     countryDropdownOptions = _useCountries.countryDropdownOptions,
     timeZoneDropdownOptions = _useCountries.timeZoneDropdownOptions,
@@ -413,23 +920,77 @@ var ChangeProfile = function ChangeProfile(_ref) {
     firstName: firstName,
     lastName: lastName,
     timeZone: timeZone,
-    dateFormat: dateFormat
+    dateFormat: dateFormat,
+    avatar: {
+      imageUrl: profileImageUrl,
+      file: null
+    }
   };
-  var handleSubmit = function handleSubmit(values) {
-    var payload = {
-      user: _objectSpread$f(_objectSpread$f({}, values), {}, {
-        timeZone: selectedTimeZoneOption.name
-      })
+  var handleSubmit = /*#__PURE__*/function () {
+    var _ref2 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee(values) {
+      var avatar, _yield$handleUploadIm, fileId, filePath, url, payload;
+      return _regeneratorRuntime.wrap(function _callee$(_context) {
+        while (1) switch (_context.prev = _context.next) {
+          case 0:
+            _context.prev = 0;
+            avatar = {};
+            if (!(values.avatar.file === "_destroy")) {
+              _context.next = 6;
+              break;
+            }
+            avatar = {
+              fileId: "_destroy",
+              filePath: "",
+              url: ""
+            };
+            _context.next = 14;
+            break;
+          case 6:
+            if (!values.avatar.file) {
+              _context.next = 14;
+              break;
+            }
+            _context.next = 9;
+            return handleUploadImage(values.avatar.file);
+          case 9:
+            _yield$handleUploadIm = _context.sent;
+            fileId = _yield$handleUploadIm.fileId;
+            filePath = _yield$handleUploadIm.filePath;
+            url = _yield$handleUploadIm.url;
+            avatar = {
+              fileId: fileId,
+              filePath: filePath,
+              url: url
+            };
+          case 14:
+            payload = _objectSpread$e(_objectSpread$e({}, values), {}, {
+              timeZone: selectedTimeZoneOption === null || selectedTimeZoneOption === void 0 ? void 0 : selectedTimeZoneOption.name,
+              avatar: avatar
+            });
+            updateProfile({
+              id: user.id,
+              payload: payload
+            });
+            _context.next = 21;
+            break;
+          case 18:
+            _context.prev = 18;
+            _context.t0 = _context["catch"](0);
+            neetoui.Toastr.error(_context.t0);
+          case 21:
+          case "end":
+            return _context.stop();
+        }
+      }, _callee, null, [[0, 18]]);
+    }));
+    return function handleSubmit(_x) {
+      return _ref2.apply(this, arguments);
     };
-    updateProfile({
-      id: user.id,
-      payload: payload
-    });
-  };
+  }();
   if (isUpdatingProfile || isFetchingCountriesList || isFetchingUserDetails) {
     return /*#__PURE__*/React__default["default"].createElement(Container__default["default"], null, /*#__PURE__*/React__default["default"].createElement(PageLoader__default["default"], null));
   }
-  return /*#__PURE__*/React__default["default"].createElement(formik.Form, {
+  return /*#__PURE__*/React__default["default"].createElement(formik$1.Form, {
     formProps: {
       "data-cy": "ntm-profile-form"
     },
@@ -438,16 +999,16 @@ var ChangeProfile = function ChangeProfile(_ref) {
       validationSchema: PROFILE_VALIDATION_SCHEMA,
       onSubmit: handleSubmit
     }
-  }, function (_ref2) {
-    var setFieldValue = _ref2.setFieldValue,
-      values = _ref2.values;
+  }, function (_ref3) {
+    var setFieldValue = _ref3.setFieldValue,
+      values = _ref3.values;
     return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement(neetoui.Pane.Body, {
       className: "w-full"
     }, /*#__PURE__*/React__default["default"].createElement("div", {
       className: "w-full space-y-6 pb-6"
-    }, /*#__PURE__*/React__default["default"].createElement("div", {
+    }, /*#__PURE__*/React__default["default"].createElement(ProfileImage, null), /*#__PURE__*/React__default["default"].createElement("div", {
       className: "grid grid-cols-2 gap-4"
-    }, /*#__PURE__*/React__default["default"].createElement(formik.Input, {
+    }, /*#__PURE__*/React__default["default"].createElement(formik$1.Input, {
       autoFocus: true,
       required: true,
       "data-cy": "profile-first-name-text-field",
@@ -456,7 +1017,7 @@ var ChangeProfile = function ChangeProfile(_ref) {
       name: "firstName",
       type: "text",
       placeholder: t("neetoTeamMembers.profile.inputs.placeholder.firstName")
-    }), /*#__PURE__*/React__default["default"].createElement(formik.Input, {
+    }), /*#__PURE__*/React__default["default"].createElement(formik$1.Input, {
       required: true,
       "data-cy": "profile-last-name-text-field",
       "data-test-id": "ntm-profile-last-name",
@@ -464,7 +1025,7 @@ var ChangeProfile = function ChangeProfile(_ref) {
       name: "lastName",
       type: "text",
       placeholder: t("neetoTeamMembers.profile.inputs.placeholder.lastName")
-    })), /*#__PURE__*/React__default["default"].createElement(formik.Select, {
+    })), /*#__PURE__*/React__default["default"].createElement(formik$1.Select, {
       required: true,
       "data-cy": "ntm-profile-country-select",
       label: t("neetoTeamMembers.profile.inputs.label.selectCountry"),
@@ -478,7 +1039,7 @@ var ChangeProfile = function ChangeProfile(_ref) {
       }
     }), /*#__PURE__*/React__default["default"].createElement("div", {
       className: "space-y-2"
-    }, /*#__PURE__*/React__default["default"].createElement(formik.Select, {
+    }, /*#__PURE__*/React__default["default"].createElement(formik$1.Select, {
       required: true,
       "data-cy": "ntm-profile-time-zone-select",
       name: "timeZoneId",
@@ -493,9 +1054,9 @@ var ChangeProfile = function ChangeProfile(_ref) {
       required: true
     }, t("neetoTeamMembers.profile.inputs.label.dateFormat")), /*#__PURE__*/React__default["default"].createElement(neetoui.Radio, {
       className: "mt-2 space-x-4"
-    }, DATE_FORMAT_OPTIONS.map(function (_ref3) {
-      var label = _ref3.label,
-        value = _ref3.value;
+    }, DATE_FORMAT_OPTIONS.map(function (_ref4) {
+      var label = _ref4.label,
+        value = _ref4.value;
       return /*#__PURE__*/React__default["default"].createElement(neetoui.Radio.Item, {
         label: label,
         value: value,
@@ -521,7 +1082,7 @@ var ChangeProfile = function ChangeProfile(_ref) {
       target: "_blank"
     }))), /*#__PURE__*/React__default["default"].createElement(neetoui.Pane.Footer, {
       className: "flex items-center space-x-2"
-    }, /*#__PURE__*/React__default["default"].createElement(formik.ActionBlock, {
+    }, /*#__PURE__*/React__default["default"].createElement(formik$1.ActionBlock, {
       cancelButtonProps: {
         "data-test-id": "ntm-profile-cancel-button",
         "data-cy": "ntm-profile-cancel-button",
@@ -533,7 +1094,7 @@ var ChangeProfile = function ChangeProfile(_ref) {
       submitButtonProps: {
         "data-cy": "ntm-profile-submit-button",
         "data-test-id": "ntm-profile-save-changes-button",
-        loading: isUpdatingProfile
+        loading: isUpdatingProfile || isUploading
       }
     })));
   });
@@ -589,12 +1150,6 @@ var Profile$1 = function Profile() {
   })));
 };
 
-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 dist = {exports: {}};
 
 dist.exports;
@@ -2002,11 +2557,11 @@ var permissionsApi = {
   fetch: fetch$3
 };
 
-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$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 useFetchPermissions = function useFetchPermissions() {
   var options = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
-  return reactQuery.useQuery(QUERY_KEYS.PERMISSIONS, permissionsApi.fetch, _objectSpread$e({
+  return reactQuery.useQuery(QUERY_KEYS.PERMISSIONS, permissionsApi.fetch, _objectSpread$d({
     select: function select(response) {
       return response === null || response === void 0 ? void 0 : response.permissions;
     }
@@ -2078,11 +2633,11 @@ var _excluded$3 = ["onSuccess"],
   _excluded2$2 = ["onSuccess"],
   _excluded3$1 = ["onSuccess"],
   _excluded4 = ["onSuccess"];
-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$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 useFetchRoles = function useFetchRoles() {
   var options = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
-  return reactQuery.useQuery(QUERY_KEYS.ROLES, organizationRolesApi.fetch, _objectSpread$d({
+  return reactQuery.useQuery(QUERY_KEYS.ROLES, organizationRolesApi.fetch, _objectSpread$c({
     select: function select(response) {
       return response === null || response === void 0 ? void 0 : response.organizationRoles;
     }
@@ -2090,12 +2645,12 @@ var useFetchRoles = function useFetchRoles() {
 };
 var useFetchGlobalRoles = function useFetchGlobalRoles() {
   var options = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
-  return reactQuery.useQuery(QUERY_KEYS.GLOBAL_ROLES, globalRolesApi.fetch, _objectSpread$d({}, options));
+  return reactQuery.useQuery(QUERY_KEYS.GLOBAL_ROLES, globalRolesApi.fetch, _objectSpread$c({}, options));
 };
 var useCreateRole = function useCreateRole(_ref) {
   var _onSuccess = _ref.onSuccess,
     options = _objectWithoutProperties(_ref, _excluded$3);
-  return reactQuery.useMutation(organizationRolesApi.create, _objectSpread$d({
+  return reactQuery.useMutation(organizationRolesApi.create, _objectSpread$c({
     onSuccess: function onSuccess() {
       queryClient.invalidateQueries(QUERY_KEYS.TEAMS_DEPENDENCIES);
       queryClient.invalidateQueries(QUERY_KEYS.ROLES);
@@ -2110,7 +2665,7 @@ var useUpdateRole = function useUpdateRole(_ref2) {
     var id = _ref3.id,
       payload = _ref3.payload;
     return organizationRolesApi.update(id, payload);
-  }, _objectSpread$d({
+  }, _objectSpread$c({
     onSuccess: function onSuccess() {
       queryClient.invalidateQueries(QUERY_KEYS.TEAMS);
       queryClient.invalidateQueries(QUERY_KEYS.TEAMS_DEPENDENCIES);
@@ -2127,7 +2682,7 @@ var useDestroyRole = function useDestroyRole(_ref4) {
     var id = _ref5.id,
       payload = _ref5.payload;
     return organizationRolesApi.destroy(id, payload);
-  }, _objectSpread$d({
+  }, _objectSpread$c({
     onSuccess: function onSuccess() {
       queryClient.invalidateQueries(QUERY_KEYS.TEAMS);
       queryClient.invalidateQueries(QUERY_KEYS.TEAMS_DEPENDENCIES);
@@ -2139,7 +2694,7 @@ var useDestroyRole = function useDestroyRole(_ref4) {
 var useBulkUpdateRoles = function useBulkUpdateRoles(_ref6) {
   var _onSuccess4 = _ref6.onSuccess,
     options = _objectWithoutProperties(_ref6, _excluded4);
-  return reactQuery.useMutation(organizationRolesApi.bulkUpdate, _objectSpread$d({
+  return reactQuery.useMutation(organizationRolesApi.bulkUpdate, _objectSpread$c({
     onSuccess: function onSuccess() {
       queryClient.invalidateQueries(QUERY_KEYS.TEAMS);
       queryClient.invalidateQueries(QUERY_KEYS.TEAMS_DEPENDENCIES);
@@ -2268,7 +2823,7 @@ var getErrorFieldName = function getErrorFieldName(formikErrors) {
 
 var ScrollToErrorField = function ScrollToErrorField(_ref) {
   var formRef = _ref.formRef;
-  var _useFormikContext = formik$1.useFormikContext(),
+  var _useFormikContext = formik.useFormikContext(),
     submitCount = _useFormikContext.submitCount,
     isValid = _useFormikContext.isValid,
     errors = _useFormikContext.errors;
@@ -2319,8 +2874,8 @@ var ROLE_FORMIK_PROPS = {
   validationSchema: ADD_ROLE_FORM_VALIDATION_SCHEMA
 };
 
-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$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 sortPermissionsBySequence = function sortPermissionsBySequence() {
   var _permissions$;
   var permissions = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
@@ -2362,7 +2917,7 @@ var getModifiedPermissions = function getModifiedPermissions() {
 var attachChildrenRecursively = function attachChildrenRecursively(permission, permissionsNameMap, permissionRelationConfig) {
   var _ref = permissionRelationConfig[permission.name] || {},
     children = _ref.children;
-  return children ? _objectSpread$c(_objectSpread$c({}, permission), {}, {
+  return children ? _objectSpread$b(_objectSpread$b({}, permission), {}, {
     children: children.flatMap(function (childName) {
       return attachChildrenRecursively(permissionsNameMap[childName][0], permissionsNameMap, permissionRelationConfig);
     })
@@ -2388,8 +2943,8 @@ var getChildrenRemovedFromRoot = function getChildrenRemovedFromRoot(_ref3) {
   });
 };
 
-function ownKeys$b(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
-function _objectSpread$b(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$b(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$b(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function ownKeys$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 Permissions = function Permissions(_ref) {
   var _ref$permissions = _ref.permissions,
     permissions = _ref$permissions === void 0 ? [] : _ref$permissions,
@@ -2399,7 +2954,7 @@ var Permissions = function Permissions(_ref) {
     permissionRelationConfig = _ref$permissionRelati === void 0 ? {} : _ref$permissionRelati;
   var _useTranslation = reactI18next.useTranslation(),
     t = _useTranslation.t;
-  var _useFormikContext = formik$1.useFormikContext(),
+  var _useFormikContext = formik.useFormikContext(),
     setFieldValue = _useFormikContext.setFieldValue,
     values = _useFormikContext.values;
   var _values$permissionIds = values.permissionIds,
@@ -2482,7 +3037,7 @@ var Permissions = function Permissions(_ref) {
     }), /*#__PURE__*/React__default["default"].createElement("div", {
       className: "ntm-roles-permission__sub-blocks neeto-ui-relative neeto-ui-pl-6"
     }, sortedChildren === null || sortedChildren === void 0 ? void 0 : sortedChildren.map(function (childPermission) {
-      return renderPermission(_objectSpread$b(_objectSpread$b({}, childPermission), {}, {
+      return renderPermission(_objectSpread$a(_objectSpread$a({}, childPermission), {}, {
         isParentChecked: isChecked
       }));
     })))));
@@ -2513,8 +3068,8 @@ var Permissions = function Permissions(_ref) {
   }));
 };
 
-function ownKeys$a(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
-function _objectSpread$a(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$a(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$a(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function ownKeys$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 ManageRoles = function ManageRoles(_ref) {
   var config = _ref.config,
     _ref$isOpen = _ref.isOpen,
@@ -2542,7 +3097,7 @@ var ManageRoles = function ManageRoles(_ref) {
   var isSubmitting = isCreatingRole || isUpdatingRole;
   var handleSubmit = function handleSubmit(formValues) {
     var payload = {
-      organizationRole: _objectSpread$a(_objectSpread$a({}, formValues), {}, {
+      organizationRole: _objectSpread$9(_objectSpread$9({}, formValues), {}, {
         name: formValues.name.trim(),
         description: formValues.description.trim()
       })
@@ -2553,7 +3108,7 @@ var ManageRoles = function ManageRoles(_ref) {
     }) : createRole(payload);
   };
   var initialValues = isEdit ? selectedRole : ADD_ROLE_FORM_INITIAL_VALUES;
-  var formikProps = _objectSpread$a(_objectSpread$a({}, ROLE_FORMIK_PROPS), {}, {
+  var formikProps = _objectSpread$9(_objectSpread$9({}, ROLE_FORMIK_PROPS), {}, {
     initialValues: initialValues,
     onSubmit: handleSubmit
   });
@@ -2566,7 +3121,7 @@ var ManageRoles = function ManageRoles(_ref) {
   }, /*#__PURE__*/React__default["default"].createElement(neetoui.Pane.Header, null, /*#__PURE__*/React__default["default"].createElement(neetoui.Typography, {
     "data-cy": "ntm-add-role-title",
     style: "h2"
-  }, isEdit ? t("neetoTeamMembers.labels.editRole") : t("neetoTeamMembers.labels.addNewRole"))), /*#__PURE__*/React__default["default"].createElement(formik.Form, {
+  }, isEdit ? t("neetoTeamMembers.labels.editRole") : t("neetoTeamMembers.labels.addNewRole"))), /*#__PURE__*/React__default["default"].createElement(formik$1.Form, {
     formikProps: formikProps,
     ref: formReference
   }, function (_ref2) {
@@ -2578,7 +3133,7 @@ var ManageRoles = function ManageRoles(_ref) {
       className: "ntm-roles-pane__body"
     }, /*#__PURE__*/React__default["default"].createElement("div", {
       className: "ntm-roles-pane__body-wrapper"
-    }, /*#__PURE__*/React__default["default"].createElement(formik.Input, {
+    }, /*#__PURE__*/React__default["default"].createElement(formik$1.Input, {
       required: true,
       unlimitedChars: true,
       "data-cy": "ntm-add-role-name-text-field",
@@ -2588,7 +3143,7 @@ var ManageRoles = function ManageRoles(_ref) {
       placeholder: t("neetoTeamMembers.placeholders.enterName"),
       readOnly: isReadOnly,
       ref: inputReference
-    }), /*#__PURE__*/React__default["default"].createElement(formik.Textarea, {
+    }), /*#__PURE__*/React__default["default"].createElement(formik$1.Textarea, {
       unlimitedChars: true,
       "data-cy": "ntm-add-role-description-text-field",
       label: t("neetoTeamMembers.common.description"),
@@ -2635,7 +3190,7 @@ var deepClone = function deepClone(object) {
     //this also handles boolean as true and false
     return object;
   }
-  var objectType = _typeof(object);
+  var objectType = _typeof$1(object);
   if ("number" === objectType || "string" === objectType) {
     // add your immutables here
     return object;
@@ -5315,14 +5870,14 @@ var teamsApi = {
 var _excluded$2 = ["onSuccess"],
   _excluded2$1 = ["onSuccess"],
   _excluded3 = ["onSuccess"];
-function ownKeys$9(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
-function _objectSpread$9(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$9(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$9(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function ownKeys$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 useFetchMembers = function useFetchMembers() {
   var params = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
   var options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
   return reactQuery.useQuery([QUERY_KEYS.TEAMS, params], function () {
     return teamsApi.fetch(params);
-  }, _objectSpread$9(_objectSpread$9({
+  }, _objectSpread$8(_objectSpread$8({
     select: ramda.identity,
     keepPreviousData: true
   }, options), {}, {
@@ -5332,7 +5887,7 @@ var useFetchMembers = function useFetchMembers() {
 var useCreateMember = function useCreateMember(_ref) {
   var _onSuccess = _ref.onSuccess,
     options = _objectWithoutProperties(_ref, _excluded$2);
-  return reactQuery.useMutation(teamsApi.create, _objectSpread$9({
+  return reactQuery.useMutation(teamsApi.create, _objectSpread$8({
     onSuccess: function onSuccess(response) {
       queryClient.invalidateQueries(QUERY_KEYS.TEAMS);
       queryClient.invalidateQueries(QUERY_KEYS.TEAMS_DEPENDENCIES);
@@ -5348,7 +5903,7 @@ var useUpdateMember = function useUpdateMember(_ref2) {
     var id = _ref3.id,
       payload = _ref3.payload;
     return teamsApi.update(id, payload);
-  }, _objectSpread$9({
+  }, _objectSpread$8({
     onSuccess: function onSuccess() {
       queryClient.invalidateQueries(QUERY_KEYS.TEAMS);
       queryClient.invalidateQueries(QUERY_KEYS.TEAMS_DEPENDENCIES);
@@ -5359,7 +5914,7 @@ var useUpdateMember = function useUpdateMember(_ref2) {
 var useBulkUpdateMembers = function useBulkUpdateMembers(_ref4) {
   var _onSuccess3 = _ref4.onSuccess,
     options = _objectWithoutProperties(_ref4, _excluded3);
-  return reactQuery.useMutation(teamsApi.bulkUpdate, _objectSpread$9({
+  return reactQuery.useMutation(teamsApi.bulkUpdate, _objectSpread$8({
     onSuccess: function onSuccess() {
       queryClient.invalidateQueries(QUERY_KEYS.TEAMS);
       queryClient.invalidateQueries(QUERY_KEYS.TEAMS_DEPENDENCIES);
@@ -5378,7 +5933,7 @@ var useFetchFilterOptions = function useFetchFilterOptions(_ref5) {
     options = _ref5$options === void 0 ? {} : _ref5$options;
   return reactQuery.useQuery([QUERY_KEYS.TEAMS_DEPENDENCIES, params], function () {
     return teamsApi.fetchFilterOptions(params);
-  }, _objectSpread$9(_objectSpread$9({
+  }, _objectSpread$8(_objectSpread$8({
     select: ramda.identity
   }, options), {}, {
     refetchOnWindowFocus: false
@@ -5429,8 +5984,8 @@ var DEFAULT_SELECTED_ROWS = {
 };
 var TEAM_MEMBERS_HIDDEN_COLUMNS = "TEAM_MEMBERS_TABLE_HIDDEN_COLUMNS";
 
-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$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 MenuItem$2 = neetoui.Dropdown.MenuItem;
 var renderNameColumn = function renderNameColumn(_ref) {
   var config = _ref.config,
@@ -5521,7 +6076,7 @@ var getDefaultAlertTitle = function getDefaultAlertTitle(_ref3) {
 var getDefaultAlertMessage = function getDefaultAlertMessage(_ref4) {
   var member = _ref4.member;
   return /*#__PURE__*/React__default["default"].createElement(reactI18next.Trans, {
-    values: _objectSpread$8(_objectSpread$8({}, constants.SINGULAR), {}, {
+    values: _objectSpread$7(_objectSpread$7({}, constants.SINGULAR), {}, {
       person: member === null || member === void 0 ? void 0 : member.displayName
     }),
     i18nKey: member !== null && member !== void 0 && member.active ? "neetoTeamMembers.alerts.messages.deactivateMember" : "neetoTeamMembers.alerts.messages.activateMember"
@@ -5732,8 +6287,8 @@ var generateNoDataContent = function generateNoDataContent(_ref11) {
   };
 };
 
-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$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 useFilters = function useFilters(_ref) {
   var _config$filterColumns, _config$defaultFilter;
   var config = _ref.config;
@@ -5753,7 +6308,7 @@ var useFilters = function useFilters(_ref) {
     emailSearchTerm = _useState2[0],
     setEmailSearchTerm = _useState2[1];
   var defaultNeetoFilters = neetoFiltersFrontend.buildFiltersFromURL([].concat(_toConsumableArray((_config$filterColumns = config === null || config === void 0 ? void 0 : config.filterColumns) !== null && _config$filterColumns !== void 0 ? _config$filterColumns : defaultNeetoFiltersColumns()), [searchKeywordProps]));
-  var _useState3 = React.useState(_objectSpread$7(_objectSpread$7(_objectSpread$7({}, DEFAULT_FILTER_VALUES), config === null || config === void 0 ? void 0 : config.defaultFilterValues), {}, {
+  var _useState3 = React.useState(_objectSpread$6(_objectSpread$6(_objectSpread$6({}, DEFAULT_FILTER_VALUES), config === null || config === void 0 ? void 0 : config.defaultFilterValues), {}, {
       neetoFilters: defaultNeetoFilters,
       category: getValidCategory(filter === null || filter === void 0 ? void 0 : filter.toUpperCase(), config === null || config === void 0 || (_config$defaultFilter = config.defaultFilterValues) === null || _config$defaultFilter === void 0 ? void 0 : _config$defaultFilter.category)
     })),
@@ -5803,8 +6358,8 @@ var useFilters = function useFilters(_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$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 useTeams = function useTeams(_ref) {
   var config = _ref.config,
     filters = _ref.filters,
@@ -5882,7 +6437,7 @@ var useTeams = function useTeams(_ref) {
       emails: ramda.pluck("email", rowData),
       keys: keys
     };
-    setSelectedRows(_objectSpread$6({}, rows));
+    setSelectedRows(_objectSpread$5({}, rows));
     config === null || config === void 0 || (_config$table = config.table) === null || _config$table === void 0 || (_config$table$onRowSe = _config$table.onRowSelect) === null || _config$table$onRowSe === void 0 || _config$table$onRowSe.call(_config$table, {
       rows: rows,
       resetSelectedRows: resetSelectedRows,
@@ -6061,8 +6616,8 @@ var RolesDropdown = function RolesDropdown(_ref) {
   }, t("neetoTeamMembers.helpers.noRolesFound")))))));
 };
 
-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$4(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread$4(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$4(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$4(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var Menu$1 = neetoui.Dropdown.Menu,
   MenuItem = neetoui.Dropdown.MenuItem;
 var Left = function Left(_ref) {
@@ -6213,7 +6768,7 @@ var Left = function Left(_ref) {
     title: selectedAlert === null || selectedAlert === void 0 ? void 0 : selectedAlert.title,
     message: /*#__PURE__*/React__default["default"].createElement(reactI18next.Trans, {
       i18nKey: selectedAlert === null || selectedAlert === void 0 ? void 0 : selectedAlert.message,
-      values: _objectSpread$5(_objectSpread$5({}, selectedMembersCountValues), {}, {
+      values: _objectSpread$4(_objectSpread$4({}, selectedMembersCountValues), {}, {
         person: selectedRows.displayNames[0],
         role: bulkUpdateRole
       })
@@ -6256,8 +6811,8 @@ var SubHeader = {
   Right: Right
 };
 
-function ownKeys$4(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
-function _objectSpread$4(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$4(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$4(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function ownKeys$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 Header = function Header(_ref) {
   var _config$header, _config$header2;
   var config = _ref.config,
@@ -6277,7 +6832,7 @@ var Header = function Header(_ref) {
     }),
     menuBarToggle: function menuBarToggle() {
       return setIsOpen(function (state) {
-        return _objectSpread$4(_objectSpread$4({}, state), {}, {
+        return _objectSpread$3(_objectSpread$3({}, state), {}, {
           menuBar: !state.menuBar
         });
       });
@@ -6295,7 +6850,7 @@ var AppList = function AppList(_ref) {
     _useState2 = _slicedToArray(_useState, 2),
     isAppListEnabled = _useState2[0],
     setIsAppListEnabled = _useState2[1];
-  var _useFormikContext = formik$1.useFormikContext(),
+  var _useFormikContext = formik.useFormikContext(),
     _useFormikContext$val = _useFormikContext.values,
     _useFormikContext$val2 = _useFormikContext$val.emails,
     emails = _useFormikContext$val2 === void 0 ? [] : _useFormikContext$val2,
@@ -6357,7 +6912,7 @@ var AppList = function AppList(_ref) {
       content: t("neetoTeamMembers.tooltips.hostAppIsRequired"),
       disabled: !isCurrentApp,
       position: "left"
-    }, /*#__PURE__*/React__default["default"].createElement("span", null, /*#__PURE__*/React__default["default"].createElement(formik.Switch, {
+    }, /*#__PURE__*/React__default["default"].createElement("span", null, /*#__PURE__*/React__default["default"].createElement(formik$1.Switch, {
       checked: isAppRoleSelectionChecked,
       disabled: isCurrentApp,
       name: "appsRoles[".concat(index, "].isEnabled"),
@@ -6374,7 +6929,7 @@ var AppList = function AppList(_ref) {
       position: "top"
     }, /*#__PURE__*/React__default["default"].createElement("span", {
       className: "ntm-manage-members-app-roles__select-wrapper"
-    }, /*#__PURE__*/React__default["default"].createElement(formik.Select, {
+    }, /*#__PURE__*/React__default["default"].createElement(formik$1.Select, {
       isDisabled: isCurrentApp || !isEnabled,
       name: "appRoles[".concat(index, "].activeRole"),
       options: buildRoleOptions(globalRoles[appName]),
@@ -6388,9 +6943,72 @@ var AppList = function AppList(_ref) {
   })));
 };
 
-var _excluded$1 = ["appRoles", "emails", "firstName", "lastName", "role"];
-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 _excluded$1 = ["className", "children"],
+  _excluded2 = ["className", "children"];
+var PageWrapper = function PageWrapper(_ref) {
+  var className = _ref.className,
+    children = _ref.children,
+    otherProps = _objectWithoutProperties(_ref, _excluded$1);
+  return /*#__PURE__*/React__default["default"].createElement("div", _extends({
+    className: className
+  }, otherProps), children);
+};
+var Page = function Page(_ref2) {
+  var className = _ref2.className,
+    children = _ref2.children,
+    otherProps = _objectWithoutProperties(_ref2, _excluded2);
+  return /*#__PURE__*/React__default["default"].createElement("div", _extends({
+    className: className
+  }, otherProps), children);
+};
+Page.Header = PageWrapper;
+Page.Body = PageWrapper;
+Page.Footer = PageWrapper;
+
+var NAME_INPUT_VALIDATION_SCHEMA = {
+  firstName: yup__namespace.string().trim(i18next.t("neetoTeamMembers.validations.removeSpaces")).strict(true),
+  lastName: yup__namespace.string().trim(i18next.t("neetoTeamMembers.validations.removeSpaces")).strict(true)
+};
+var ROLES_RADIO_GROUP_VALIDATION_SCHEMA = {
+  role: yup__namespace.string().required(i18next.t("neetoTeamMembers.validations.roleRequired"))
+};
+var APP_ROLES_SCHEMA = {
+  appsRoles: yup__namespace.array().of(yup__namespace.object().shape({
+    appName: yup__namespace.string(),
+    isEnabled: yup__namespace["boolean"](),
+    role: yup__namespace.string().required(i18next.t("neetoTeamMembers.validations.roleRequired"))
+  }))
+};
+var FILTER_INVALID_EMAILS = {
+  label: i18next.t("neetoTeamMembers.validations.filterInvalidEmails")
+};
+var COUNTER_PROPS = {
+  label: i18next.t("neetoTeamMembers.common.email", constants.PLURAL),
+  startsFrom: 4
+};
+var DEFAULT_COMPONENT_CONFIG = {
+  type: "pane",
+  isOpen: false,
+  className: "",
+  headerProps: {},
+  bodyProps: {},
+  footerProps: {}
+};
+var MEMBERS_FORM_COMPONENT_MAPPER = {
+  pane: neetoui.Pane,
+  modal: neetoui.Modal,
+  page: Page
+};
+var FORM_PAGES = {
+  MAIN: "main",
+  APP_LIST: "appList",
+  CONFIRMATION: "confirmation"
+};
+var EMAIL_REGEX = new RegExp("^[A-Z0-9._%+-]+@[A-Z0-9.-]+\\.[A-Z]{2,}$", "i");
+
+var _excluded = ["appRoles", "emails", "firstName", "lastName", "role"];
+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 getProductName = function getProductName(activeAppRoles) {
   var _activeAppRoles$;
   return activeAppRoles !== null && activeAppRoles !== void 0 && (_activeAppRoles$ = activeAppRoles[0]) !== null && _activeAppRoles$ !== void 0 && _activeAppRoles$.appName ? i18next.t("neetoTeamMembers.labels.neeto_", {
@@ -6440,13 +7058,13 @@ var renderInitialValues = function renderInitialValues(_ref) {
     selectedMember = _ref.selectedMember;
   if (ramda.isNotNil(selectedMember)) {
     var keysToPick = ["firstName", "lastName", "role"].concat(_toConsumableArray(ramda.keys(additionalFieldsInitialValues)));
-    return _objectSpread$3(_objectSpread$3(_objectSpread$3({}, additionalFieldsInitialValues), ramda.pick(keysToPick, selectedMember)), {}, {
-      emails: [_objectSpread$3(_objectSpread$3({}, neetoCist.toLabelAndValue(selectedMember.email)), {}, {
+    return _objectSpread$2(_objectSpread$2(_objectSpread$2({}, additionalFieldsInitialValues), ramda.pick(keysToPick, selectedMember)), {}, {
+      emails: [_objectSpread$2(_objectSpread$2({}, neetoCist.toLabelAndValue(selectedMember.email)), {}, {
         valid: true
       })]
     });
   }
-  return _objectSpread$3({
+  return _objectSpread$2({
     firstName: "",
     lastName: "",
     emails: [],
@@ -6460,16 +7078,16 @@ var renderPayload = function renderPayload(_ref2) {
     firstName = _ref2.firstName,
     lastName = _ref2.lastName,
     role = _ref2.role,
-    otherValues = _objectWithoutProperties(_ref2, _excluded$1);
+    otherValues = _objectWithoutProperties(_ref2, _excluded);
   var selectedMember = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : null;
-  return selectedMember ? _objectSpread$3({
+  return selectedMember ? _objectSpread$2({
     active: true,
     firstName: firstName.trim(),
     lastName: lastName.trim(),
     organizationRole: role,
     email: emails[0].value
   }, otherValues) : {
-    user: _objectSpread$3({
+    user: _objectSpread$2({
       emails: ramda.pluck("value", emails),
       organizationRole: role,
       appRoles: appRoles
@@ -6487,12 +7105,35 @@ var getSingleInvitationTranslationProps = function getSingleInvitationTranslatio
     role: getActiveRole(activeAppRoles, role)
   };
 };
+var buildValidationSchema = function buildValidationSchema(_ref4) {
+  var selectedMember = _ref4.selectedMember,
+    memberLimit = _ref4.memberLimit,
+    organizationUsersCount = _ref4.organizationUsersCount;
+  return yup__namespace.object().shape(_objectSpread$2(_objectSpread$2(_objectSpread$2(_objectSpread$2({}, NAME_INPUT_VALIDATION_SCHEMA), ROLES_RADIO_GROUP_VALIDATION_SCHEMA), APP_ROLES_SCHEMA), {}, {
+    emails: yup__namespace.array().min(1, i18next.t("neetoTeamMembers.validations.minOneEmail")).test("are-all-emails-valid", i18next.t("neetoTeamMembers.validations.validEmail"), function (emails) {
+      return emails.every(ramda.prop("valid"));
+    }).test("is-emails-length-within-available-members-capacity", /*#__PURE__*/React__default["default"].createElement(reactI18next.Trans, {
+      i18nKey: "neetoTeamMembers.validations.memberLimitExceeded",
+      values: {
+        limit: memberLimit
+      },
+      components: {
+        emailTo: /*#__PURE__*/React__default["default"].createElement(neetoui.Button, {
+          href: "mailto:support@neeto.com",
+          style: "link"
+        })
+      }
+    }), function (emails) {
+      return ramda.isNotNil(selectedMember) || ramda.isNil(memberLimit) || emails.length <= memberLimit - organizationUsersCount;
+    }).nullable()
+  }));
+};
 
 var Confirmation = function Confirmation() {
   var _globalProps$organiza;
   var _useTranslation = reactI18next.useTranslation(),
     t = _useTranslation.t;
-  var _useFormikContext = formik$1.useFormikContext(),
+  var _useFormikContext = formik.useFormikContext(),
     _useFormikContext$val = _useFormikContext.values,
     emails = _useFormikContext$val.emails,
     role = _useFormikContext$val.role,
@@ -6548,80 +7189,6 @@ var Confirmation = function Confirmation() {
   }));
 };
 
-var _excluded = ["className", "children"],
-  _excluded2 = ["className", "children"];
-var PageWrapper = function PageWrapper(_ref) {
-  var className = _ref.className,
-    children = _ref.children,
-    otherProps = _objectWithoutProperties(_ref, _excluded);
-  return /*#__PURE__*/React__default["default"].createElement("div", _extends({
-    className: className
-  }, otherProps), children);
-};
-var Page = function Page(_ref2) {
-  var className = _ref2.className,
-    children = _ref2.children,
-    otherProps = _objectWithoutProperties(_ref2, _excluded2);
-  return /*#__PURE__*/React__default["default"].createElement("div", _extends({
-    className: className
-  }, otherProps), children);
-};
-Page.Header = PageWrapper;
-Page.Body = PageWrapper;
-Page.Footer = PageWrapper;
-
-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 NAME_INPUT_VALIDATION_SCHEMA = {
-  firstName: yup__namespace.string().trim(i18next.t("neetoTeamMembers.validations.removeSpaces")).strict(true),
-  lastName: yup__namespace.string().trim(i18next.t("neetoTeamMembers.validations.removeSpaces")).strict(true)
-};
-var MULTIPLE_EMAIL_INPUT_VALIDATION_SCHEMA = {
-  emails: yup__namespace.array().min(1, i18next.t("neetoTeamMembers.validations.minOneEmail")).test("are-all-emails-valid", i18next.t("neetoTeamMembers.validations.validEmail"), function (emails) {
-    return emails.every(ramda.prop("valid"));
-  }).nullable()
-};
-var ROLES_RADIO_GROUP_VALIDATION_SCHEMA = {
-  role: yup__namespace.string().required(i18next.t("neetoTeamMembers.validations.roleRequired"))
-};
-var VALIDATION_SCHEMA = yup__namespace.object().shape(_objectSpread$2(_objectSpread$2(_objectSpread$2(_objectSpread$2({}, NAME_INPUT_VALIDATION_SCHEMA), MULTIPLE_EMAIL_INPUT_VALIDATION_SCHEMA), ROLES_RADIO_GROUP_VALIDATION_SCHEMA), {}, {
-  appsRoles: yup__namespace.array().of(yup__namespace.object().shape({
-    appName: yup__namespace.string(),
-    isEnabled: yup__namespace["boolean"](),
-    role: yup__namespace.string().required(i18next.t("neetoTeamMembers.validations.roleRequired"))
-  }))
-}));
-var FILTER_INVALID_EMAILS = {
-  label: i18next.t("neetoTeamMembers.validations.filterInvalidEmails")
-};
-var COUNTER_PROPS = {
-  label: i18next.t("neetoTeamMembers.common.email", constants.PLURAL),
-  startsFrom: 4
-};
-var MANAGE_MEMBERS_FORMIK_PROPS = {
-  enableReinitialize: true,
-  validationSchema: VALIDATION_SCHEMA
-};
-var DEFAULT_COMPONENT_CONFIG = {
-  type: "pane",
-  isOpen: false,
-  className: "",
-  headerProps: {},
-  bodyProps: {},
-  footerProps: {}
-};
-var MEMBERS_FORM_COMPONENT_MAPPER = {
-  pane: neetoui.Pane,
-  modal: neetoui.Modal,
-  page: Page
-};
-var FORM_PAGES = {
-  MAIN: "main",
-  APP_LIST: "appList",
-  CONFIRMATION: "confirmation"
-};
-var EMAIL_REGEX = new RegExp("^[A-Z0-9._%+-]+@[A-Z0-9.-]+\\.[A-Z]{2,}$", "i");
-
 var MultipleEmailInput = function MultipleEmailInput(_ref) {
   var _head;
   var _ref$emails = _ref.emails,
@@ -6631,7 +7198,7 @@ var MultipleEmailInput = function MultipleEmailInput(_ref) {
     selectedMember = _ref$selectedMember === void 0 ? null : _ref$selectedMember;
   var _useTranslation = reactI18next.useTranslation(),
     t = _useTranslation.t;
-  var _useFormikContext = formik$1.useFormikContext(),
+  var _useFormikContext = formik.useFormikContext(),
     setFieldValue = _useFormikContext.setFieldValue;
   var handleInputChange = function handleInputChange(event) {
     var email = event.target.value;
@@ -6644,7 +7211,7 @@ var MultipleEmailInput = function MultipleEmailInput(_ref) {
   };
   return /*#__PURE__*/React__default["default"].createElement("div", {
     className: "neeto-ui-w-full"
-  }, selectedMember ? /*#__PURE__*/React__default["default"].createElement(formik.Input, {
+  }, selectedMember ? /*#__PURE__*/React__default["default"].createElement(formik$1.Input, {
     "data-cy": "ntm-manage-member-email-input",
     name: "emails",
     size: "medium",
@@ -6657,7 +7224,7 @@ var MultipleEmailInput = function MultipleEmailInput(_ref) {
       style: "body2"
     }, t("neetoTeamMembers.common.email", constants.SINGULAR))),
     onChange: handleInputChange
-  }) : /*#__PURE__*/React__default["default"].createElement(formik.MultiEmailInput, {
+  }) : /*#__PURE__*/React__default["default"].createElement(formik$1.MultiEmailInput, {
     required: true,
     counter: COUNTER_PROPS,
     "data-cy": "ntm-manage-member-email-input",
@@ -6676,12 +7243,12 @@ var NameInputs = function NameInputs(_ref) {
     t = _useTranslation.t;
   return /*#__PURE__*/React__default["default"].createElement("div", {
     className: "neeto-ui-flex neeto-ui-w-full neeto-ui-gap-4"
-  }, /*#__PURE__*/React__default["default"].createElement(formik.Input, {
+  }, /*#__PURE__*/React__default["default"].createElement(formik$1.Input, {
     "data-cy": "ntm-edit-member-first-name-text-field",
     label: t("neetoTeamMembers.labels.firstName"),
     name: "firstName",
     ref: innerRef
-  }), /*#__PURE__*/React__default["default"].createElement(formik.Input, {
+  }), /*#__PURE__*/React__default["default"].createElement(formik$1.Input, {
     "data-cy": "ntm-edit-member-last-name-text-field",
     label: t("neetoTeamMembers.labels.lastName"),
     name: "lastName"
@@ -6698,7 +7265,7 @@ var RolesRadioGroup = function RolesRadioGroup(_ref) {
     roles = _ref$roles === void 0 ? [] : _ref$roles;
   var _useTranslation = reactI18next.useTranslation(),
     t = _useTranslation.t;
-  var _useFormikContext = formik$1.useFormikContext(),
+  var _useFormikContext = formik.useFormikContext(),
     values = _useFormikContext.values,
     setFieldValue = _useFormikContext.setFieldValue;
   var setDefaultSelection = function setDefaultSelection(currentRole) {
@@ -6721,7 +7288,7 @@ var RolesRadioGroup = function RolesRadioGroup(_ref) {
       }
     });
   };
-  return /*#__PURE__*/React__default["default"].createElement(formik.Radio, {
+  return /*#__PURE__*/React__default["default"].createElement(formik$1.Radio, {
     stacked: true,
     className: "ntm-members-radio-group flex-grow-0",
     "data-cy": "ntm-manage-member-roles-group",
@@ -6750,7 +7317,7 @@ var RolesRadioGroup = function RolesRadioGroup(_ref) {
       className: "ntm-members-form-radio-item__wrapper",
       htmlFor: neetoCist.slugify(name),
       key: id
-    }, /*#__PURE__*/React__default["default"].createElement(formik.Radio.Item, {
+    }, /*#__PURE__*/React__default["default"].createElement(formik$1.Radio.Item, {
       className: "ntm-members-form-radio-item__label",
       "data-cy": "ntm-manage-member-roles-button",
       defaultChecked: ramda.identical(name, role),
@@ -6778,6 +7345,10 @@ var ManageMember = function ManageMember(_ref) {
     t = _useTranslation.t;
   var isViewPermissionGranted = config.permissions.view;
   var isNotDevelopment = initializers.globalProps.railsEnv !== "development";
+  var _useFetchMembers = useFetchMembers({
+      enabled: isViewPermissionGranted
+    }),
+    team = _useFetchMembers.data;
   var _useState = React.useState(FORM_PAGES.MAIN),
     _useState2 = _slicedToArray(_useState, 2),
     currentPage = _useState2[0],
@@ -6940,17 +7511,21 @@ var ManageMember = function ManageMember(_ref) {
     "data-cy": "ntm-manage-members-pane-header",
     style: "h2",
     weight: "semibold"
-  }, getTitle())), /*#__PURE__*/React__default["default"].createElement(formik.Form, {
+  }, getTitle())), /*#__PURE__*/React__default["default"].createElement(formik$1.Form, {
     ref: formReference,
-    formikProps: _objectSpread$1(_objectSpread$1({}, MANAGE_MEMBERS_FORMIK_PROPS), {}, {
+    formikProps: {
+      enableReinitialize: true,
       initialValues: renderInitialValues({
         additionalFieldsInitialValues: (_config$additionalFie2 = config.additionalFields) === null || _config$additionalFie2 === void 0 ? void 0 : _config$additionalFie2.initialValues,
         globalRoles: globalRoles,
         roles: filteredRoles,
         selectedMember: selectedMember
       }),
-      onSubmit: handleOnSubmit
-    })
+      onSubmit: handleOnSubmit,
+      validationSchema: buildValidationSchema(_objectSpread$1({
+        selectedMember: selectedMember
+      }, team))
+    }
   }, function (_ref3) {
     var _manageMemberComponen2, _manageMemberComponen3;
     var values = _ref3.values,