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

package/dist/index.js

@@ -1,9 +1,10 @@
 import { globalProps, taxonomies } from '@bigbinary/neeto-commons-frontend/initializers';
 import React, { useState, useMemo, useEffect, useRef, Fragment, memo, useCallback } from 'react';
-import { Pane, Label, Radio, Callout, Typography, Button, Tooltip, Checkbox, Alert, Input as Input$1, NoData, Dropdown, Avatar, Tag, Modal, Table as Table$1 } from '@bigbinary/neetoui';
+import { Avatar, Label, Typography, Toastr, Pane, Radio, Callout, Button, Tooltip, Checkbox, Alert, Input as Input$1, NoData, Dropdown, Tag, Modal, Table as Table$1 } from '@bigbinary/neetoui';
 import { useTranslation, Trans } from 'react-i18next';
+import { useProfileImageUpload } from '@bigbinary/neeto-image-uploader-frontend';
 import { findBy, isPresent, findById, isNotEmpty, noop, _findBy, replaceById, keysToSnakeCase, notEquals, toLabelAndValue, filterBy, slugify } from '@bigbinary/neeto-cist';
-import { ExternalLink, Up, Down, Search, Right as Right$1, LeftArrow } from '@bigbinary/neeto-icons';
+import { Delete as Delete$1, ExternalLink, Up, Down, Search, Right as Right$1, LeftArrow } from '@bigbinary/neeto-icons';
 import Container from '@bigbinary/neeto-molecules/Container';
 import PageLoader from '@bigbinary/neeto-molecules/PageLoader';
 import { Form, Input, Select, ActionBlock, Textarea, Switch, MultiEmailInput, Radio as Radio$1 } from '@bigbinary/neetoui/formik';
@@ -15,12 +16,12 @@ import axios from 'axios';
 import * as yup from 'yup';
 import { object, string } from 'yup';
 import { replace as replace$1, is, prop, append, equals, concat, groupBy, pluck, not, map, identical, modify, includes, __, isEmpty, filter as filter$1, identity, clamp, curry, mergeLeft, toLower, isNil, assoc, trim, isNotNil, keys, pick, move, head, reverse } from 'ramda';
+import { useField, useFormikContext } from 'formik';
 import withImmutableActions from '@bigbinary/neeto-commons-frontend/react-utils/withImmutableActions';
 import { create as create$2 } from 'zustand';
 import { shallow } from 'zustand/shallow';
 import { ReactQueryDevtools } from 'react-query/devtools';
 import NeetoHeader from '@bigbinary/neeto-molecules/Header';
-import { useFormikContext } from 'formik';
 import classnames from 'classnames';
 import MoreDropdown from '@bigbinary/neeto-molecules/MoreDropdown';
 import { getQueryParams, buildUrl } from '@bigbinary/neeto-commons-frontend/utils';
@@ -32,20 +33,20 @@ import { useHistory } from 'react-router-dom';
 import require$$0 from 'util';
 import MenuBar from '@bigbinary/neeto-molecules/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 = globalProps.permissions) !== null && _globalProps$permissi !== void 0 ? _globalProps$permissi : [];
   if (Object.is(type, "string")) {
     return userPermissions.includes(permissions);
@@ -134,11 +135,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);
@@ -146,7 +147,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) {
@@ -164,6 +165,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];
@@ -206,16 +593,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 useQuery([QUERY_KEYS.USER_PROFILE], profileApi.fetchUserDetails, _objectSpread$h({
+  return useQuery([QUERY_KEYS.USER_PROFILE], profileApi.fetchUserDetails, _objectSpread$g({
     staleTime: DEFAULT_STALE_TIME,
     refetchOnWindowFocus: true
   }, options));
 };
 var useUpdateProfileMutation = function useUpdateProfileMutation(options) {
-  return useMutationWithInvalidation(profileApi.updateUser, _objectSpread$h(_objectSpread$h({
+  return useMutationWithInvalidation(profileApi.updateUser, _objectSpread$g(_objectSpread$g({
     keysToInvalidate: [[QUERY_KEYS.USER_PROFILE]]
   }, options), {}, {
     onSuccess: function onSuccess() {
@@ -230,11 +617,21 @@ var PROFILE_VALIDATION_SCHEMA = yup.object().shape({
   dateFormat: yup.string().required(t$1("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 = globalProps.endUserUploadedFileSizeLimitInMb * 1024 * 1024;
+var VALIDATION_ERRORS = {
+  invalid_type: t$1("neetoTeamMembers.profile.file.invalidType.image"),
+  corrupted_file: t$1("neetoTeamMembers.profile.file.corrupted"),
+  file_limit_exceeded: t$1("neetoTeamMembers.profile.file.limitExceeded", {
+    maxSize: 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 useQuery([QUERY_KEYS.COUNTRIES_LIST], profileApi.fetchCountries, _objectSpread$g({
+  return useQuery([QUERY_KEYS.COUNTRIES_LIST], profileApi.fetchCountries, _objectSpread$f({
     staleTime: DEFAULT_STALE_TIME
   }, options));
 };
@@ -338,12 +735,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 = useTranslation(),
+    t = _useTranslation.t;
+  var _useField = 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) {
+      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.createElement("div", {
+    className: "mb-8 flex flex-row justify-start"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "flex-shrink-0"
+  }, isPresent(avatarDetails === null || avatarDetails === void 0 ? void 0 : avatarDetails.imageUrl) && /*#__PURE__*/React.createElement("div", {
+    className: "relative z-10"
+  }, /*#__PURE__*/React.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.createElement(Delete$1, {
+    size: IMAGE_DELETE_BUTTON_SIZE
+  }))), /*#__PURE__*/React.createElement(Avatar, {
+    size: "extraLarge",
+    user: avatarDetails
+  })), /*#__PURE__*/React.createElement("div", {
+    className: "ml-4 flex flex-col"
+  }, /*#__PURE__*/React.createElement(Label, {
+    className: "neeto-ui-text-black mb-1 font-medium"
+  }, t("neetoTeamMembers.profile.avatar.profilePicture")), /*#__PURE__*/React.createElement(Typography, {
+    className: "neeto-ui-text-gray-700 mb-2",
+    style: "body3"
+  }, /*#__PURE__*/React.createElement(Trans, {
+    components: {
+      code: /*#__PURE__*/React.createElement("code", null)
+    },
+    i18nKey: "neetoTeamMembers.profile.avatar.profilePictureUploadMessage",
+    values: {
+      limit: globalProps.endUserUploadedFileSizeLimitInMb
+    }
+  })), /*#__PURE__*/React.createElement("div", {
+    className: "neeto-ui-file-upload flex flex-row ",
+    "data-cy": "profile-image-upload-container"
+  }, /*#__PURE__*/React.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.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 = useTranslation(),
     t = _useTranslation.t;
+  var _useProfileImageUploa = 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,
@@ -357,7 +862,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,
@@ -375,19 +882,73 @@ 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);
+            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.createElement(Container, null, /*#__PURE__*/React.createElement(PageLoader, null));
   }
@@ -400,14 +961,14 @@ 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.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Pane.Body, {
       className: "w-full"
     }, /*#__PURE__*/React.createElement("div", {
       className: "w-full space-y-6 pb-6"
-    }, /*#__PURE__*/React.createElement("div", {
+    }, /*#__PURE__*/React.createElement(ProfileImage, null), /*#__PURE__*/React.createElement("div", {
       className: "grid grid-cols-2 gap-4"
     }, /*#__PURE__*/React.createElement(Input, {
       autoFocus: true,
@@ -455,9 +1016,9 @@ var ChangeProfile = function ChangeProfile(_ref) {
       required: true
     }, t("neetoTeamMembers.profile.inputs.label.dateFormat")), /*#__PURE__*/React.createElement(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.createElement(Radio.Item, {
         label: label,
         value: value,
@@ -495,7 +1056,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
       }
     })));
   });
@@ -551,12 +1112,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;
@@ -1964,11 +2519,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 useQuery(QUERY_KEYS.PERMISSIONS, permissionsApi.fetch, _objectSpread$e({
+  return useQuery(QUERY_KEYS.PERMISSIONS, permissionsApi.fetch, _objectSpread$d({
     select: function select(response) {
       return response === null || response === void 0 ? void 0 : response.permissions;
     }
@@ -2040,11 +2595,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 useQuery(QUERY_KEYS.ROLES, organizationRolesApi.fetch, _objectSpread$d({
+  return useQuery(QUERY_KEYS.ROLES, organizationRolesApi.fetch, _objectSpread$c({
     select: function select(response) {
       return response === null || response === void 0 ? void 0 : response.organizationRoles;
     }
@@ -2052,12 +2607,12 @@ var useFetchRoles = function useFetchRoles() {
 };
 var useFetchGlobalRoles = function useFetchGlobalRoles() {
   var options = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
-  return useQuery(QUERY_KEYS.GLOBAL_ROLES, globalRolesApi.fetch, _objectSpread$d({}, options));
+  return 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 useMutation(organizationRolesApi.create, _objectSpread$d({
+  return useMutation(organizationRolesApi.create, _objectSpread$c({
     onSuccess: function onSuccess() {
       queryClient.invalidateQueries(QUERY_KEYS.TEAMS_DEPENDENCIES);
       queryClient.invalidateQueries(QUERY_KEYS.ROLES);
@@ -2072,7 +2627,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);
@@ -2089,7 +2644,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);
@@ -2101,7 +2656,7 @@ var useDestroyRole = function useDestroyRole(_ref4) {
 var useBulkUpdateRoles = function useBulkUpdateRoles(_ref6) {
   var _onSuccess4 = _ref6.onSuccess,
     options = _objectWithoutProperties(_ref6, _excluded4);
-  return useMutation(organizationRolesApi.bulkUpdate, _objectSpread$d({
+  return useMutation(organizationRolesApi.bulkUpdate, _objectSpread$c({
     onSuccess: function onSuccess() {
       queryClient.invalidateQueries(QUERY_KEYS.TEAMS);
       queryClient.invalidateQueries(QUERY_KEYS.TEAMS_DEPENDENCIES);
@@ -2281,8 +2836,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] : [];
@@ -2324,7 +2879,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);
     })
@@ -2350,8 +2905,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,
@@ -2444,7 +2999,7 @@ var Permissions = function Permissions(_ref) {
     }), /*#__PURE__*/React.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
       }));
     })))));
@@ -2475,8 +3030,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,
@@ -2504,7 +3059,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()
       })
@@ -2515,7 +3070,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
   });
@@ -2597,7 +3152,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;
@@ -5277,14 +5832,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 useQuery([QUERY_KEYS.TEAMS, params], function () {
     return teamsApi.fetch(params);
-  }, _objectSpread$9(_objectSpread$9({
+  }, _objectSpread$8(_objectSpread$8({
     select: identity,
     keepPreviousData: true
   }, options), {}, {
@@ -5294,7 +5849,7 @@ var useFetchMembers = function useFetchMembers() {
 var useCreateMember = function useCreateMember(_ref) {
   var _onSuccess = _ref.onSuccess,
     options = _objectWithoutProperties(_ref, _excluded$2);
-  return useMutation(teamsApi.create, _objectSpread$9({
+  return useMutation(teamsApi.create, _objectSpread$8({
     onSuccess: function onSuccess(response) {
       queryClient.invalidateQueries(QUERY_KEYS.TEAMS);
       queryClient.invalidateQueries(QUERY_KEYS.TEAMS_DEPENDENCIES);
@@ -5310,7 +5865,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);
@@ -5321,7 +5876,7 @@ var useUpdateMember = function useUpdateMember(_ref2) {
 var useBulkUpdateMembers = function useBulkUpdateMembers(_ref4) {
   var _onSuccess3 = _ref4.onSuccess,
     options = _objectWithoutProperties(_ref4, _excluded3);
-  return useMutation(teamsApi.bulkUpdate, _objectSpread$9({
+  return useMutation(teamsApi.bulkUpdate, _objectSpread$8({
     onSuccess: function onSuccess() {
       queryClient.invalidateQueries(QUERY_KEYS.TEAMS);
       queryClient.invalidateQueries(QUERY_KEYS.TEAMS_DEPENDENCIES);
@@ -5340,7 +5895,7 @@ var useFetchFilterOptions = function useFetchFilterOptions(_ref5) {
     options = _ref5$options === void 0 ? {} : _ref5$options;
   return useQuery([QUERY_KEYS.TEAMS_DEPENDENCIES, params], function () {
     return teamsApi.fetchFilterOptions(params);
-  }, _objectSpread$9(_objectSpread$9({
+  }, _objectSpread$8(_objectSpread$8({
     select: identity
   }, options), {}, {
     refetchOnWindowFocus: false
@@ -5391,8 +5946,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 = Dropdown.MenuItem;
 var renderNameColumn = function renderNameColumn(_ref) {
   var config = _ref.config,
@@ -5483,7 +6038,7 @@ var getDefaultAlertTitle = function getDefaultAlertTitle(_ref3) {
 var getDefaultAlertMessage = function getDefaultAlertMessage(_ref4) {
   var member = _ref4.member;
   return /*#__PURE__*/React.createElement(Trans, {
-    values: _objectSpread$8(_objectSpread$8({}, SINGULAR), {}, {
+    values: _objectSpread$7(_objectSpread$7({}, 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"
@@ -5694,8 +6249,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;
@@ -5715,7 +6270,7 @@ var useFilters = function useFilters(_ref) {
     emailSearchTerm = _useState2[0],
     setEmailSearchTerm = _useState2[1];
   var defaultNeetoFilters = 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 = useState(_objectSpread$7(_objectSpread$7(_objectSpread$7({}, DEFAULT_FILTER_VALUES), config === null || config === void 0 ? void 0 : config.defaultFilterValues), {}, {
+  var _useState3 = 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)
     })),
@@ -5765,8 +6320,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,
@@ -5844,7 +6399,7 @@ var useTeams = function useTeams(_ref) {
       emails: 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,
@@ -6023,8 +6578,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 = Dropdown.Menu,
   MenuItem = Dropdown.MenuItem;
 var Left = function Left(_ref) {
@@ -6175,7 +6730,7 @@ var Left = function Left(_ref) {
     title: selectedAlert === null || selectedAlert === void 0 ? void 0 : selectedAlert.title,
     message: /*#__PURE__*/React.createElement(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
       })
@@ -6218,8 +6773,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,
@@ -6239,7 +6794,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
         });
       });
@@ -6350,9 +6905,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.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.createElement("div", _extends({
+    className: className
+  }, otherProps), children);
+};
+Page.Header = PageWrapper;
+Page.Body = PageWrapper;
+Page.Footer = PageWrapper;
+
+var NAME_INPUT_VALIDATION_SCHEMA = {
+  firstName: yup.string().trim(t$1("neetoTeamMembers.validations.removeSpaces")).strict(true),
+  lastName: yup.string().trim(t$1("neetoTeamMembers.validations.removeSpaces")).strict(true)
+};
+var ROLES_RADIO_GROUP_VALIDATION_SCHEMA = {
+  role: yup.string().required(t$1("neetoTeamMembers.validations.roleRequired"))
+};
+var APP_ROLES_SCHEMA = {
+  appsRoles: yup.array().of(yup.object().shape({
+    appName: yup.string(),
+    isEnabled: yup["boolean"](),
+    role: yup.string().required(t$1("neetoTeamMembers.validations.roleRequired"))
+  }))
+};
+var FILTER_INVALID_EMAILS = {
+  label: t$1("neetoTeamMembers.validations.filterInvalidEmails")
+};
+var COUNTER_PROPS = {
+  label: t$1("neetoTeamMembers.common.email", PLURAL),
+  startsFrom: 4
+};
+var DEFAULT_COMPONENT_CONFIG = {
+  type: "pane",
+  isOpen: false,
+  className: "",
+  headerProps: {},
+  bodyProps: {},
+  footerProps: {}
+};
+var MEMBERS_FORM_COMPONENT_MAPPER = {
+  pane: Pane,
+  modal: 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 ? t$1("neetoTeamMembers.labels.neeto_", {
@@ -6402,13 +7020,13 @@ var renderInitialValues = function renderInitialValues(_ref) {
     selectedMember = _ref.selectedMember;
   if (isNotNil(selectedMember)) {
     var keysToPick = ["firstName", "lastName", "role"].concat(_toConsumableArray(keys(additionalFieldsInitialValues)));
-    return _objectSpread$3(_objectSpread$3(_objectSpread$3({}, additionalFieldsInitialValues), pick(keysToPick, selectedMember)), {}, {
-      emails: [_objectSpread$3(_objectSpread$3({}, toLabelAndValue(selectedMember.email)), {}, {
+    return _objectSpread$2(_objectSpread$2(_objectSpread$2({}, additionalFieldsInitialValues), pick(keysToPick, selectedMember)), {}, {
+      emails: [_objectSpread$2(_objectSpread$2({}, toLabelAndValue(selectedMember.email)), {}, {
         valid: true
       })]
     });
   }
-  return _objectSpread$3({
+  return _objectSpread$2({
     firstName: "",
     lastName: "",
     emails: [],
@@ -6422,16 +7040,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: pluck("value", emails),
       organizationRole: role,
       appRoles: appRoles
@@ -6449,6 +7067,29 @@ 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.object().shape(_objectSpread$2(_objectSpread$2(_objectSpread$2(_objectSpread$2({}, NAME_INPUT_VALIDATION_SCHEMA), ROLES_RADIO_GROUP_VALIDATION_SCHEMA), APP_ROLES_SCHEMA), {}, {
+    emails: yup.array().min(1, t$1("neetoTeamMembers.validations.minOneEmail")).test("are-all-emails-valid", t$1("neetoTeamMembers.validations.validEmail"), function (emails) {
+      return emails.every(prop("valid"));
+    }).test("is-emails-length-within-available-members-capacity", /*#__PURE__*/React.createElement(Trans, {
+      i18nKey: "neetoTeamMembers.validations.memberLimitExceeded",
+      values: {
+        limit: memberLimit
+      },
+      components: {
+        emailTo: /*#__PURE__*/React.createElement(Button, {
+          href: "mailto:support@neeto.com",
+          style: "link"
+        })
+      }
+    }), function (emails) {
+      return isNotNil(selectedMember) || isNil(memberLimit) || emails.length <= memberLimit - organizationUsersCount;
+    }).nullable()
+  }));
+};
 
 var Confirmation = function Confirmation() {
   var _globalProps$organiza;
@@ -6510,80 +7151,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.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.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.string().trim(t$1("neetoTeamMembers.validations.removeSpaces")).strict(true),
-  lastName: yup.string().trim(t$1("neetoTeamMembers.validations.removeSpaces")).strict(true)
-};
-var MULTIPLE_EMAIL_INPUT_VALIDATION_SCHEMA = {
-  emails: yup.array().min(1, t$1("neetoTeamMembers.validations.minOneEmail")).test("are-all-emails-valid", t$1("neetoTeamMembers.validations.validEmail"), function (emails) {
-    return emails.every(prop("valid"));
-  }).nullable()
-};
-var ROLES_RADIO_GROUP_VALIDATION_SCHEMA = {
-  role: yup.string().required(t$1("neetoTeamMembers.validations.roleRequired"))
-};
-var VALIDATION_SCHEMA = yup.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.array().of(yup.object().shape({
-    appName: yup.string(),
-    isEnabled: yup["boolean"](),
-    role: yup.string().required(t$1("neetoTeamMembers.validations.roleRequired"))
-  }))
-}));
-var FILTER_INVALID_EMAILS = {
-  label: t$1("neetoTeamMembers.validations.filterInvalidEmails")
-};
-var COUNTER_PROPS = {
-  label: t$1("neetoTeamMembers.common.email", 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: Pane,
-  modal: 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,
@@ -6740,6 +7307,10 @@ var ManageMember = function ManageMember(_ref) {
     t = _useTranslation.t;
   var isViewPermissionGranted = config.permissions.view;
   var isNotDevelopment = globalProps.railsEnv !== "development";
+  var _useFetchMembers = useFetchMembers({
+      enabled: isViewPermissionGranted
+    }),
+    team = _useFetchMembers.data;
   var _useState = useState(FORM_PAGES.MAIN),
     _useState2 = _slicedToArray(_useState, 2),
     currentPage = _useState2[0],
@@ -6904,15 +7475,19 @@ var ManageMember = function ManageMember(_ref) {
     weight: "semibold"
   }, getTitle())), /*#__PURE__*/React.createElement(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,