@bigbinary/neeto-team-members-frontend 2.4.9 → 2.4.11

package/dist/index.esm.js

@@ -1,15 +1,15 @@
 import React, { createContext, useContext, createElement, isValidElement, cloneElement, useState, useRef, useEffect, useMemo, useCallback } from 'react';
 import { complement, isEmpty, modifyPath, prepend, assocPath, findIndex, propEq, dissocPath, groupBy, is, prop, keys, map, identical, modify, includes, fromPairs, toPairs, filter, isNil, curry, __, trim, toLower, identity, without, append, clamp, mergeLeft, pluck, head, reverse, assoc } from 'ramda';
+import { ExternalLink, MenuHorizontal, Up, Down, Search, Info } from '@bigbinary/neeto-icons';
 import ReactDOM from 'react-dom';
 import axios from 'axios';
 import { Toastr, Tooltip, Button, Typography, Checkbox, Pane, Dropdown, Alert, Input as Input$1, PageLoader, Label, Avatar, Tag, Table as Table$1 } from '@bigbinary/neetoui';
 import { Header as Header$2, Container, MenuBar, SubHeader as SubHeader$1 } from '@bigbinary/neetoui/layouts';
-import { useFormikContext, Formik, Form } from 'formik';
-import { Input, Textarea, MultiEmailInput, Radio } from '@bigbinary/neetoui/formik';
+import { useFormikContext } from 'formik';
+import { Form, Input, Textarea, MultiEmailInput, Radio } from '@bigbinary/neetoui/formik';
 import * as yup from 'yup';
 import { object, string } from 'yup';
 import classnames from 'classnames';
-import { MenuHorizontal, Up, Down, Search, Info } from '@bigbinary/neeto-icons';
 
 function _typeof(obj) {
   "@babel/helpers - typeof";
@@ -140,9 +140,9 @@ function _toArray(arr) {
   return _arrayWithHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableRest();
 }
 
-function ownKeys$b(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
+function ownKeys$c(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
 
-function _objectSpread$b(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys$b(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys$b(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+function _objectSpread$c(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys$c(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys$c(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
 
 var consoleLogger = {
   type: 'logger',
@@ -229,7 +229,7 @@ var Logger = function () {
   }, {
     key: "create",
     value: function create(moduleName) {
-      return new Logger(this.logger, _objectSpread$b(_objectSpread$b({}, {
+      return new Logger(this.logger, _objectSpread$c(_objectSpread$c({}, {
         prefix: "".concat(this.prefix, ":").concat(moduleName, ":")
       }), this.options));
     }
@@ -3421,9 +3421,9 @@ var unescape = function unescape(text) {
   return text.replace(matchHtmlEntity, unescapeHtmlEntity);
 };
 
-function ownKeys$a(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
+function ownKeys$b(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
 
-function _objectSpread$a(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys$a(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys$a(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+function _objectSpread$b(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys$b(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys$b(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
 var defaultOptions = {
   bindI18n: 'languageChanged',
   bindI18nStore: '',
@@ -3438,7 +3438,7 @@ var i18nInstance;
 var I18nContext = createContext();
 function setDefaults() {
   var options = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
-  defaultOptions = _objectSpread$a(_objectSpread$a({}, defaultOptions), options);
+  defaultOptions = _objectSpread$b(_objectSpread$b({}, defaultOptions), options);
 }
 function getDefaults() {
   return defaultOptions;
@@ -3565,9 +3565,9 @@ function hasLoadedNamespace(ns, i18n) {
 var _excluded$2 = ["format"],
     _excluded2$2 = ["children", "count", "parent", "i18nKey", "context", "tOptions", "values", "defaults", "components", "ns", "i18n", "t", "shouldUnescape"];
 
-function ownKeys$9(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
+function ownKeys$a(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
 
-function _objectSpread$9(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys$9(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys$9(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+function _objectSpread$a(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys$a(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys$a(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
 
 function hasChildren(node, checkLength) {
   if (!node) return false;
@@ -3593,7 +3593,7 @@ function getAsArray(data) {
 }
 
 function mergeProps(source, target) {
-  var newTarget = _objectSpread$9({}, target);
+  var newTarget = _objectSpread$a({}, target);
 
   newTarget.props = Object.assign(source.props, target.props);
   return newTarget;
@@ -3663,7 +3663,7 @@ function renderNodes(children, targetString, i18n, i18nOptions, combinedTOpts, s
   getData(children);
   var ast = c.parse("<0>".concat(targetString, "</0>"));
 
-  var opts = _objectSpread$9(_objectSpread$9({}, data), combinedTOpts);
+  var opts = _objectSpread$a(_objectSpread$a({}, data), combinedTOpts);
 
   function renderInner(child, node, rootReactNode) {
     var childs = getChildren(child);
@@ -3673,7 +3673,7 @@ function renderNodes(children, targetString, i18n, i18nOptions, combinedTOpts, s
 
   function pushTranslatedJSX(child, inner, mem, i, isVoid) {
     if (child.dummy) child.children = inner;
-    mem.push(cloneElement(child, _objectSpread$9(_objectSpread$9({}, child.props), {}, {
+    mem.push(cloneElement(child, _objectSpread$a(_objectSpread$a({}, child.props), {}, {
       key: i
     }), isVoid ? undefined : inner));
   }
@@ -3705,7 +3705,7 @@ function renderNodes(children, targetString, i18n, i18nOptions, combinedTOpts, s
           } else if (isEmptyTransWithHTML) {
           var _inner = mapAST(reactNodes, node.children, rootReactNode);
 
-          mem.push(cloneElement(child, _objectSpread$9(_objectSpread$9({}, child.props), {}, {
+          mem.push(cloneElement(child, _objectSpread$a(_objectSpread$a({}, child.props), {}, {
             key: i
           }), _inner));
         } else if (Number.isNaN(parseFloat(node.name))) {
@@ -3736,11 +3736,11 @@ function renderNodes(children, targetString, i18n, i18nOptions, combinedTOpts, s
           var content = node.children[0] ? translationContent : null;
           if (content) mem.push(content);
         } else if (node.children.length === 1 && translationContent) {
-          mem.push(cloneElement(child, _objectSpread$9(_objectSpread$9({}, child.props), {}, {
+          mem.push(cloneElement(child, _objectSpread$a(_objectSpread$a({}, child.props), {}, {
             key: i
           }), translationContent));
         } else {
-          mem.push(cloneElement(child, _objectSpread$9(_objectSpread$9({}, child.props), {}, {
+          mem.push(cloneElement(child, _objectSpread$a(_objectSpread$a({}, child.props), {}, {
             key: i
           })));
         }
@@ -3803,7 +3803,7 @@ function Trans(_ref) {
 
   if (context) tOptions.context = context;
 
-  var reactI18nextOptions = _objectSpread$9(_objectSpread$9({}, getDefaults()), i18n.options && i18n.options.react);
+  var reactI18nextOptions = _objectSpread$a(_objectSpread$a({}, getDefaults()), i18n.options && i18n.options.react);
 
   var namespaces = ns || t.ns || defaultNSFromContext || i18n.options && i18n.options.defaultNS;
   namespaces = typeof namespaces === 'string' ? [namespaces] : namespaces || ['translation'];
@@ -3811,13 +3811,13 @@ function Trans(_ref) {
   var hashTransKey = reactI18nextOptions.hashTransKey;
   var key = i18nKey || (hashTransKey ? hashTransKey(defaultValue) : defaultValue);
   var interpolationOverride = values ? tOptions.interpolation : {
-    interpolation: _objectSpread$9(_objectSpread$9({}, tOptions.interpolation), {}, {
+    interpolation: _objectSpread$a(_objectSpread$a({}, tOptions.interpolation), {}, {
       prefix: '#$?',
       suffix: '?$#'
     })
   };
 
-  var combinedTOpts = _objectSpread$9(_objectSpread$9(_objectSpread$9(_objectSpread$9({}, tOptions), {}, {
+  var combinedTOpts = _objectSpread$a(_objectSpread$a(_objectSpread$a(_objectSpread$a({}, tOptions), {}, {
     count: count
   }, values), interpolationOverride), {}, {
     defaultValue: defaultValue,
@@ -3859,9 +3859,9 @@ function _slicedToArray(arr, i) {
   return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest();
 }
 
-function ownKeys$8(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
+function ownKeys$9(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
 
-function _objectSpread$8(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys$8(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys$8(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+function _objectSpread$9(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys$9(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys$9(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
 
 var usePrevious = function usePrevious(value, ignore) {
   var ref = useRef();
@@ -3898,7 +3898,7 @@ function useTranslation(ns) {
 
   if (i18n.options.react && i18n.options.react.wait !== undefined) warnOnce('It seems you are still using the old wait option, you may migrate to the new useSuspense behaviour.');
 
-  var i18nOptions = _objectSpread$8(_objectSpread$8(_objectSpread$8({}, getDefaults()), i18n.options.react), props);
+  var i18nOptions = _objectSpread$9(_objectSpread$9(_objectSpread$9({}, getDefaults()), i18n.options.react), props);
 
   var useSuspense = i18nOptions.useSuspense,
       keyPrefix = i18nOptions.keyPrefix;
@@ -4022,9 +4022,11 @@ var common$1 = {
 var helpers$1 = {
 	configPermissions: "Configure permissions for the modules.",
 	enterMultipleEmails: "Please press space, tab or enter key after entering an email address.",
+	moreInfoAboutPermissions: "More information about permissions",
 	noRolesFound: "No roles found.",
 	searchRoles: "Search roles",
-	selectedMembersCount: "{{count}} {{metaName}} selected from {{totalCount}}"
+	selectedMembersCount: "{{count}} {{metaName}} selected from {{totalCount}}",
+	visitToKnowMoreAboutPermissions: "Visit to know more about permissions"
 };
 var metaNames$1 = {
 	agent_one: "Agent",
@@ -4117,10 +4119,12 @@ var common = {
 var helpers = {
 	configPermissions: "Configurez les autorisations pour les modules.",
 	enterMultipleEmails: "Veuillez appuyer sur espace, tabulation ou entrée après avoir saisi une adresse e-mail.",
+	moreInfoAboutPermissions: "Plus d'informations sur les autorisations",
 	noRolesFound: "Aucun rôle trouvé.",
 	searchRoles: "Rechercher des rôles",
 	selectedMembersCount_one: "{{count}} {{metaName}} sélectionné parmi {{totalCount}}",
-	selectedMembersCount_other: "{{count}} {{metaName}} sélectionnés parmi {{totalCount}}"
+	selectedMembersCount_other: "{{count}} {{metaName}} sélectionnés parmi {{totalCount}}",
+	visitToKnowMoreAboutPermissions: "Visitez pour en savoir plus sur les autorisations"
 };
 var metaNames = {
 	member_one: "Membre",
@@ -7449,11 +7453,11 @@ const QUERY_KEYS = {
   PERMISSIONS: "neeto-team-members-permissions"
 };
 
-function ownKeys$7(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-function _objectSpread$7(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$7(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$7(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+function ownKeys$8(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread$8(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$8(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$8(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 const useFetchPermissions = function () {
   let options = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
-  return useQuery(QUERY_KEYS.PERMISSIONS, permissionsApi.fetch, _objectSpread$7({
+  return useQuery(QUERY_KEYS.PERMISSIONS, permissionsApi.fetch, _objectSpread$8({
     staleTime: DEFAULT_STALE_TIME,
     select: response => response.permissions || response.data.permissions
   }, options));
@@ -7475,11 +7479,11 @@ const organizationRolesApi = {
 const _excluded$1 = ["onSuccess"],
   _excluded2$1 = ["onSuccess"],
   _excluded3$1 = ["onSuccess"];
-function ownKeys$6(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-function _objectSpread$6(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$6(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$6(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+function ownKeys$7(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread$7(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$7(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$7(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 const useFetchRoles = function () {
   let options = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
-  return useQuery(QUERY_KEYS.ROLES, organizationRolesApi.fetch, _objectSpread$6({
+  return useQuery(QUERY_KEYS.ROLES, organizationRolesApi.fetch, _objectSpread$7({
     staleTime: DEFAULT_STALE_TIME,
     select: response => response.organizationRoles || response.data.organizationRoles
   }, options));
@@ -7487,7 +7491,7 @@ const useFetchRoles = function () {
 const useCreateRole = _ref => {
   let onSuccess = _ref.onSuccess,
     options = _objectWithoutProperties(_ref, _excluded$1);
-  return useMutation(organizationRolesApi.create, _objectSpread$6({
+  return useMutation(organizationRolesApi.create, _objectSpread$7({
     onSuccess: response => {
       queryClient.setQueriesData(QUERY_KEYS.ROLES, cachedData => {
         if (!!cachedData.data && !!cachedData.data.organizationRoles) {
@@ -7507,7 +7511,7 @@ const useUpdateRole = _ref2 => {
     let id = _ref3.id,
       payload = _ref3.payload;
     return organizationRolesApi.update(id, payload);
-  }, _objectSpread$6({
+  }, _objectSpread$7({
     onSuccess: response => {
       queryClient.invalidateQueries(QUERY_KEYS.TEAMS);
       queryClient.setQueriesData(QUERY_KEYS.ROLES, cachedData => {
@@ -7529,7 +7533,7 @@ const useDestroyRole = _ref4 => {
     let id = _ref5.id,
       payload = _ref5.payload;
     return organizationRolesApi.destroy(id, payload);
-  }, _objectSpread$6({
+  }, _objectSpread$7({
     onSuccess: response => {
       queryClient.setQueriesData(QUERY_KEYS.ROLES, cachedData => {
         if (!!cachedData.data && !!cachedData.data.organizationRoles) {
@@ -8928,9 +8932,9 @@ const renderSearchProps = (searchString, setSearchString) => ({
   }),
   value: searchString
 });
-const renderBreadcrumbs = (breadcrumbs, membersPageUrl) => breadcrumbs !== null && breadcrumbs !== void 0 ? breadcrumbs : [{
+const renderBreadcrumbs = breadcrumbs => breadcrumbs !== null && breadcrumbs !== void 0 ? breadcrumbs : [{
   text: instance.t("metaNames.member", PLURAL),
-  link: membersPageUrl !== null && membersPageUrl !== void 0 ? membersPageUrl : "/members"
+  link: "/members"
 }];
 
 const AddRoleButton = _ref => {
@@ -8962,8 +8966,18 @@ const Header$1 = _ref => {
   const _useTranslation = useTranslation(),
     t = _useTranslation.t;
   return /*#__PURE__*/React.createElement(Header$2, {
-    title: t("common.role", PLURAL),
-    breadcrumbs: renderBreadcrumbs(config === null || config === void 0 ? void 0 : (_config$header = config.header) === null || _config$header === void 0 ? void 0 : _config$header.breadcrumbs, config === null || config === void 0 ? void 0 : config.membersPageUrl),
+    title: /*#__PURE__*/React.createElement("span", {
+      className: "neeto-ui-flex neeto-ui-items-center neeto-ui-gap-6"
+    }, t("common.role", PLURAL), (config === null || config === void 0 ? void 0 : config.helpUrl) && /*#__PURE__*/React.createElement(Button, {
+      "data-cy": "ntm-roles-permission-more-info-button",
+      className: "neeto-ui-mt-1",
+      href: config === null || config === void 0 ? void 0 : config.helpUrl,
+      icon: ExternalLink,
+      label: t("helpers.moreInfoAboutPermissions"),
+      style: "link",
+      target: "_blank"
+    })),
+    breadcrumbs: renderBreadcrumbs(config === null || config === void 0 ? void 0 : (_config$header = config.header) === null || _config$header === void 0 ? void 0 : _config$header.breadcrumbs),
     searchProps: renderSearchProps(searchString, setSearchString),
     actionBlock: /*#__PURE__*/React.createElement(AddRoleButton, {
       onClick: () => setIsNewRolePaneOpen(true),
@@ -9043,6 +9057,12 @@ const ADD_ROLE_FORM_VALIDATION_SCHEMA = object({
     limit: 255
   }))
 });
+const ROLE_FORMIK_PROPS = {
+  initialValues: ADD_ROLE_FORM_INITIAL_VALUES,
+  validateOnBlur: false,
+  validateOnChange: false,
+  validationSchema: ADD_ROLE_FORM_VALIDATION_SCHEMA
+};
 
 const Permissions = _ref => {
   let permissions = _ref.permissions;
@@ -9099,8 +9119,8 @@ const Permissions = _ref => {
   }))));
 };
 
-function ownKeys$5(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-function _objectSpread$5(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$5(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$5(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+function ownKeys$6(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread$6(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$6(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$6(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 const New = _ref => {
   let isOpen = _ref.isOpen,
     onClose = _ref.onClose,
@@ -9114,7 +9134,7 @@ const New = _ref => {
     createRole = _useCreateRole.mutate,
     isSubmitting = _useCreateRole.isLoading;
   const handleFormSubmit = formValues => {
-    const modifiedFormValues = _objectSpread$5(_objectSpread$5({}, formValues), {}, {
+    const modifiedFormValues = _objectSpread$6(_objectSpread$6({}, formValues), {}, {
       description: formValues.description.trim()
     });
     createRole({
@@ -9129,18 +9149,14 @@ const New = _ref => {
     style: "h2"
   }, t("common.add_", {
     what: t("common.role", SINGULAR).toLocaleLowerCase()
-  }))), /*#__PURE__*/React.createElement(Formik, {
-    initialValues: ADD_ROLE_FORM_INITIAL_VALUES,
-    onSubmit: handleFormSubmit,
-    validateOnBlur: false,
-    validateOnChange: false,
-    validationSchema: ADD_ROLE_FORM_VALIDATION_SCHEMA
+  }))), /*#__PURE__*/React.createElement(Form, {
+    formikProps: _objectSpread$6(_objectSpread$6({}, ROLE_FORMIK_PROPS), {}, {
+      onSubmit: handleFormSubmit
+    }),
+    ref: formReference
   }, _ref2 => {
     let dirty = _ref2.dirty;
-    return /*#__PURE__*/React.createElement(Form, {
-      ref: formReference,
-      noValidate: true
-    }, /*#__PURE__*/React.createElement(ScrollToErrorField, {
+    return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(ScrollToErrorField, {
       formRef: formReference
     }), /*#__PURE__*/React.createElement(Pane.Body, null, /*#__PURE__*/React.createElement("div", {
       className: "ntm-roles-pane__body"
@@ -9428,8 +9444,7 @@ const TableHeader = _ref => {
         isDelete: true,
         selectedRole: role
       }),
-      size: "small",
-      style: "danger"
+      size: "small"
     }, t("common.delete"))))))));
   })));
 };
@@ -9473,8 +9488,8 @@ const Delete = _ref => {
   });
 };
 
-function ownKeys$4(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-function _objectSpread$4(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$4(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$4(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+function ownKeys$5(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread$5(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$5(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$5(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 const Edit = _ref => {
   let isOpen = _ref.isOpen,
     onClose = _ref.onClose,
@@ -9493,7 +9508,7 @@ const Edit = _ref => {
   };
   const handleFormSubmit = formValues => {
     const payload = {
-      organizationRole: _objectSpread$4(_objectSpread$4(_objectSpread$4({}, selectedRole), formValues), {}, {
+      organizationRole: _objectSpread$5(_objectSpread$5(_objectSpread$5({}, selectedRole), formValues), {}, {
         description: formValues.description.trim()
       })
     };
@@ -9510,18 +9525,15 @@ const Edit = _ref => {
     style: "h2"
   }, t("common.update_", {
     what: t("common.role", SINGULAR).toLocaleLowerCase()
-  }))), /*#__PURE__*/React.createElement(Formik, {
-    initialValues: initialValues,
-    onSubmit: handleFormSubmit,
-    validateOnBlur: false,
-    validateOnChange: false,
-    validationSchema: ADD_ROLE_FORM_VALIDATION_SCHEMA
+  }))), /*#__PURE__*/React.createElement(Form, {
+    formikProps: _objectSpread$5(_objectSpread$5({}, ROLE_FORMIK_PROPS), {}, {
+      initialValues,
+      onSubmit: handleFormSubmit
+    }),
+    ref: formReference
   }, _ref2 => {
     let dirty = _ref2.dirty;
-    return /*#__PURE__*/React.createElement(Form, {
-      ref: formReference,
-      noValidate: true
-    }, /*#__PURE__*/React.createElement(ScrollToErrorField, {
+    return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(ScrollToErrorField, {
       formRef: formReference
     }), /*#__PURE__*/React.createElement(Pane.Body, null, /*#__PURE__*/React.createElement("div", {
       className: "ntm-roles-pane__body"
@@ -9755,6 +9767,8 @@ const Table = _ref => {
 const Roles = _ref => {
   var _config$permissions$v, _config$permissions, _config$permissions$v2, _config$permissions2;
   let config = _ref.config;
+  const _useTranslation = useTranslation(),
+    t = _useTranslation.t;
   const _useState = useState(""),
     _useState2 = _slicedToArray(_useState, 2),
     searchString = _useState2[0],
@@ -9803,17 +9817,21 @@ const Roles = _ref => {
     permissionGroups: permissionGroups,
     roles: roles,
     setIsNewRolePaneOpen: setIsNewRolePaneOpen
-  }))), /*#__PURE__*/React.createElement(New, {
+  }), (config === null || config === void 0 ? void 0 : config.helpUrl) && /*#__PURE__*/React.createElement("div", {
+    className: "ntm-roles-help-url-wrapper"
+  }, /*#__PURE__*/React.createElement(Button, {
+    "data-cy": "ntm-roles-permission-more-info-button",
+    href: config.helpUrl,
+    icon: ExternalLink,
+    label: t("helpers.visitToKnowMoreAboutPermissions"),
+    style: "link",
+    target: "_blank"
+  })))), /*#__PURE__*/React.createElement(New, {
     isOpen: isNewRolePaneOpen,
     onClose: () => setIsNewRolePaneOpen(false),
     permissions: permissions
   }));
 };
-Roles.defaultProps = {
-  config: {
-    membersPageUrl: "/members"
-  }
-};
 var index$1 = withReactQuery(Roles);
 
 const fetch = params => axios.get(`${BASE_URL}/teams`, {
@@ -9832,12 +9850,12 @@ const teamsApi = {
 const _excluded = ["onSuccess"],
   _excluded2 = ["onSuccess"],
   _excluded3 = ["onSuccess"];
-function ownKeys$3(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-function _objectSpread$3(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$3(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$3(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+function ownKeys$4(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread$4(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$4(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$4(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 const useFetchMembers = function () {
   let params = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
   let options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
-  return useQuery([QUERY_KEYS.TEAMS, params], () => teamsApi.fetch(params), _objectSpread$3({
+  return useQuery([QUERY_KEYS.TEAMS, params], () => teamsApi.fetch(params), _objectSpread$4({
     staleTime: DEFAULT_STALE_TIME,
     select: response => response.data || response,
     keepPreviousData: true
@@ -9846,7 +9864,7 @@ const useFetchMembers = function () {
 const useCreateMember = _ref => {
   let onSuccess = _ref.onSuccess,
     options = _objectWithoutProperties(_ref, _excluded);
-  return useMutation(teamsApi.create, _objectSpread$3({
+  return useMutation(teamsApi.create, _objectSpread$4({
     onSuccess: response => {
       queryClient.invalidateQueries(QUERY_KEYS.TEAMS);
       Toastr.success(response.ntmNotice || response.data.ntmNotice);
@@ -9861,7 +9879,7 @@ const useUpdateMember = _ref2 => {
     let id = _ref3.id,
       payload = _ref3.payload;
     return teamsApi.update(id, payload);
-  }, _objectSpread$3({
+  }, _objectSpread$4({
     onSuccess: response => {
       queryClient.invalidateQueries(QUERY_KEYS.TEAMS);
       Toastr.success(response.ntmNotice || response.data.ntmNotice);
@@ -9872,7 +9890,7 @@ const useUpdateMember = _ref2 => {
 const useBulkUpdateMembers = _ref4 => {
   let onSuccess = _ref4.onSuccess,
     options = _objectWithoutProperties(_ref4, _excluded3);
-  return useMutation(teamsApi.bulkUpdate, _objectSpread$3({
+  return useMutation(teamsApi.bulkUpdate, _objectSpread$4({
     onSuccess: response => {
       queryClient.invalidateQueries(QUERY_KEYS.TEAMS);
       Toastr.success(response.ntmNotice || response.data.ntmNotice);
@@ -10070,6 +10088,7 @@ const Menu$1 = Dropdown.Menu,
   MenuItem = Dropdown.MenuItem;
 const RolesDropdown = _ref => {
   let handleRoleChange = _ref.handleRoleChange,
+    hasUpdatePermission = _ref.hasUpdatePermission,
     _ref$isSearchable = _ref.isSearchable,
     isSearchable = _ref$isSearchable === void 0 ? false : _ref$isSearchable,
     _ref$roles = _ref.roles,
@@ -10095,11 +10114,16 @@ const RolesDropdown = _ref => {
     setSearchTerm("");
     setIsDropdownOpen(false);
   };
-  return /*#__PURE__*/React.createElement(Dropdown, {
+  return /*#__PURE__*/React.createElement(Tooltip, {
+    content: instance.t("tooltips.noPermissionToEditMembers"),
+    disabled: hasUpdatePermission,
+    position: "top"
+  }, /*#__PURE__*/React.createElement("span", null, /*#__PURE__*/React.createElement(Dropdown, {
     buttonSize: "small",
     buttonStyle: "secondary",
     closeOnSelect: false,
     "data-cy": "ntm-members-roles-update-dropdown",
+    disabled: !hasUpdatePermission,
     label: instance.t("buttons.changeRole"),
     isOpen: isDropdownOpen,
     onClick: () => setIsDropdownOpen(true),
@@ -10122,7 +10146,7 @@ const RolesDropdown = _ref => {
     }, name);
   }) : /*#__PURE__*/React.createElement("span", {
     className: "neeto-ui-flex neeto-ui-flex-col neeto-ui-items-center neeto-ui-p-2"
-  }, instance.t("helpers.noRolesFound")))));
+  }, instance.t("helpers.noRolesFound")))))));
 };
 
 var _URLSearchParams$get;
@@ -10198,13 +10222,16 @@ const Left = _ref => {
   }) : `${filteredCount} ${pluralizedByFilterCount}`);
 };
 const Right = _ref2 => {
+  var _config$permissions$u, _config$permissions;
   let columns = _ref2.columns,
+    config = _ref2.config,
     roles = _ref2.roles,
     rolesButtonProps = _ref2.rolesButtonProps,
     selectedRows = _ref2.selectedRows,
     setColumnData = _ref2.setColumnData,
     setSelectedRows = _ref2.setSelectedRows;
   const isRolesButtonVisible = !!rolesButtonProps;
+  const hasUpdatePermission = (_config$permissions$u = config === null || config === void 0 ? void 0 : (_config$permissions = config.permissions) === null || _config$permissions === void 0 ? void 0 : _config$permissions.update) !== null && _config$permissions$u !== void 0 ? _config$permissions$u : DEFAULT_PERMISSION;
   const _useBulkUpdateMembers = useBulkUpdateMembers({
       onSuccess: () => setSelectedRows(DEFAULT_SELECTED_ROWS)
     }),
@@ -10230,20 +10257,31 @@ const Right = _ref2 => {
       }
     });
   };
-  return /*#__PURE__*/React.createElement(React.Fragment, null, getDeactivatedButtonVisible(selectedRows) && /*#__PURE__*/React.createElement(Button, {
+  return /*#__PURE__*/React.createElement(React.Fragment, null, getDeactivatedButtonVisible(selectedRows) && /*#__PURE__*/React.createElement(Tooltip, {
+    content: instance.t("tooltips.noPermissionToEditMembers"),
+    disabled: hasUpdatePermission,
+    position: "top"
+  }, /*#__PURE__*/React.createElement("span", null, /*#__PURE__*/React.createElement(Button, {
     "data-cy": "ntm-deactivate-members-button",
+    disabled: !hasUpdatePermission,
     label: instance.t("common.deactivate"),
     size: "small",
     style: "secondary",
     onClick: () => handleDeactivateMembers()
-  }), getActivateButtonVisible(selectedRows) && /*#__PURE__*/React.createElement(Button, {
+  }))), getActivateButtonVisible(selectedRows) && /*#__PURE__*/React.createElement(Tooltip, {
+    content: instance.t("tooltips.noPermissionToEditMembers"),
+    disabled: hasUpdatePermission,
+    position: "top"
+  }, /*#__PURE__*/React.createElement("span", null, /*#__PURE__*/React.createElement(Button, {
     "data-cy": "ntm-activate-members-button",
+    disabled: !hasUpdatePermission,
     label: instance.t("common.activate"),
     size: "small",
     style: "secondary",
     onClick: () => handleActivateMembers()
-  }), isNotEmpty$1(selectedRows.keys) && /*#__PURE__*/React.createElement(RolesDropdown, {
+  }))), isNotEmpty$1(selectedRows.keys) && /*#__PURE__*/React.createElement(RolesDropdown, {
     handleRoleChange: handleRoleChange,
+    hasUpdatePermission: hasUpdatePermission,
     roles: roles
   }), /*#__PURE__*/React.createElement(Columns, {
     columnData: columns,
@@ -10774,21 +10812,21 @@ var pluralize$1 = {exports: {}};
 
 var pluralize = pluralize$1.exports;
 
-function ownKeys$2(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-function _objectSpread$2(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$2(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$2(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+function ownKeys$3(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread$3(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$3(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$3(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 const renderNameColumn = (_ref, diplayStatusTag) => {
-  let displayName = _ref.displayName,
+  let name = _ref.displayName,
     imageUrl = _ref.profileImageUrl,
     active = _ref.active;
   return /*#__PURE__*/React.createElement("div", {
     className: "ntm-members-table__column"
   }, /*#__PURE__*/React.createElement(Avatar, {
     user: {
-      name: displayName,
+      name,
       imageUrl
     },
     size: "medium"
-  }), displayName, diplayStatusTag && /*#__PURE__*/React.createElement(Tag, {
+  }), name, diplayStatusTag && /*#__PURE__*/React.createElement(Tag, {
     "data-cy": "ntm-member-status-tag",
     label: active ? MEMBER_FILTER.ACTIVE.label : MEMBER_FILTER.DEACTIVATED.label,
     style: active ? "primary" : "secondary",
@@ -10799,7 +10837,7 @@ const isDropDownButtonDisabled = permissions => {
   var _permissions$update;
   return !((_permissions$update = permissions === null || permissions === void 0 ? void 0 : permissions.update) !== null && _permissions$update !== void 0 ? _permissions$update : hasPermission(MANAGE_MEMBER_PERMISSIONS));
 };
-const renderDropdownButton = (_ref2, handleUpdateStatus, handleUpdateRole, permissions) => {
+const renderDropdownButton = (_ref2, handleUpdateRole, handleUpdateStatus, permissions) => {
   let displayName = _ref2.displayName,
     id = _ref2.id,
     active = _ref2.active,
@@ -10840,8 +10878,7 @@ const renderDropdownButton = (_ref2, handleUpdateStatus, handleUpdateRole, permi
       name: displayName,
       active
     }),
-    size: "small",
-    style: active && "danger"
+    size: "small"
   }, active ? instance.t("common.deactivate") : instance.t("common.activate"))))));
 };
 const getDefaultAlertTitle = _ref3 => {
@@ -10864,37 +10901,60 @@ const getDefaultAlertMessage = _ref4 => {
     person: member === null || member === void 0 ? void 0 : member.name
   });
 };
+const getDefaultColumns = displayStatusTag => [{
+  dataIndex: "name",
+  key: "name",
+  render: (_, tableData) => renderNameColumn(tableData, displayStatusTag),
+  sorter: true,
+  title: instance.t("common.name")
+}, {
+  dataIndex: "email",
+  key: "email",
+  sorter: true,
+  title: instance.t("common.email", SINGULAR)
+}, {
+  dataIndex: "role",
+  key: "organization_role",
+  sorter: true,
+  title: instance.t("common.role", SINGULAR)
+}];
+const getActionColumn = (handleUpdateRole, handleUpdateStatus, permissions) => ({
+  dataIndex: "actions",
+  key: "icon_button",
+  render: (_, props) => renderDropdownButton(props, handleUpdateRole, handleUpdateStatus, permissions),
+  width: 75
+});
 const getColumnData = _ref5 => {
-  let memberFilter = _ref5.memberFilter,
-    handleUpdateStatus = _ref5.handleUpdateStatus,
+  var _config$otherColumns;
+  let config = _ref5.config,
     handleUpdateRole = _ref5.handleUpdateRole,
-    permissions = _ref5.permissions;
-  const diplayStatusTag = identical(memberFilter, MEMBER_FILTER.ALL.value);
-  return [{
-    title: instance.t("common.name"),
-    key: "name",
-    dataIndex: "name",
-    render: (_, tableData) => renderNameColumn(tableData, diplayStatusTag),
-    width: "30%",
-    sorter: true
-  }, {
-    title: instance.t("common.email", SINGULAR),
-    dataIndex: "email",
-    key: "email",
-    width: "35%",
-    sorter: true
-  }, {
-    title: instance.t("common.role", SINGULAR),
-    dataIndex: "role",
-    key: "organization_role",
-    width: "25%",
-    sorter: true
-  }, {
-    dataIndex: "actions",
-    key: "icon_button",
-    render: (_, props) => renderDropdownButton(props, handleUpdateStatus, handleUpdateRole, permissions),
-    width: "10%"
-  }];
+    handleUpdateStatus = _ref5.handleUpdateStatus,
+    memberFilter = _ref5.memberFilter;
+  const displayStatusTag = identical(memberFilter, MEMBER_FILTER.ALL.value);
+  const defaultColumns = getDefaultColumns(displayStatusTag);
+  const actionColumn = getActionColumn(handleUpdateRole, handleUpdateStatus, config === null || config === void 0 ? void 0 : config.permissions);
+  const otherColumns = (_config$otherColumns = config === null || config === void 0 ? void 0 : config.otherColumns) !== null && _config$otherColumns !== void 0 ? _config$otherColumns : [];
+  const columns = defaultColumns.map(column => {
+    const otherColumn = otherColumns.find(_ref6 => {
+      let dataIndex = _ref6.dataIndex;
+      return identical(dataIndex, column.dataIndex);
+    });
+    return otherColumn || column;
+  });
+  otherColumns.forEach(otherColumn => {
+    const column = columns.find(_ref7 => {
+      let dataIndex = _ref7.dataIndex;
+      return identical(dataIndex, otherColumn.dataIndex);
+    });
+    if (!column) columns.push(otherColumn);
+  });
+  if (!columns.some(_ref8 => {
+    let dataIndex = _ref8.dataIndex;
+    return identical(dataIndex, "actions");
+  })) {
+    columns.push(actionColumn);
+  }
+  return columns;
 };
 const renderHeaderTitle = (filterStatus, metaName) => instance.t(`common.${toLower(filterStatus)}_`, {
   what: metaName(PLURAL).toLocaleLowerCase()
@@ -10913,7 +10973,7 @@ const renderUpdateAlert = (field, props) => {
   }
   return field === "title" ? getDefaultAlertTitle(props) : getDefaultAlertMessage(props);
 };
-const getSearchParams = (page, filter) => new URLSearchParams(_objectSpread$2(_objectSpread$2({}, page), {}, {
+const getSearchParams = (page, filter) => new URLSearchParams(_objectSpread$3(_objectSpread$3({}, page), {}, {
   filter: filter.toLowerCase()
 })).toString();
 const handlePageChange = (setFilters, filter) => (page, results) => {
@@ -10935,15 +10995,15 @@ const getMetaName = curry((metaName, count) => {
 });
 const clearSelectedMembers = (previousCategory, currentCategory) => isNotEqual(previousCategory, currentCategory) && isNotEqual(currentCategory, "ALL");
 
-function ownKeys$1(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-function _objectSpread$1(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$1(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$1(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+function ownKeys$2(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread$2(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$2(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$2(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 const MULTIPLE_EMAIL_INPUT_VALIDATION_SCHEMA = {
   emails: yup.array().min(1, instance.t("validations.minOneEmail")).test("are-all-emails-valid", instance.t("validations.validEmail"), emails => emails.every(prop("valid"))).nullable()
 };
 const ROLES_RADIO_GROUP_VALIDATION_SCHEMA = {
   role: yup.string().required(instance.t("validations.roleRequired"))
 };
-const VALIDATION_SCHEMA$1 = yup.object().shape(_objectSpread$1(_objectSpread$1({}, MULTIPLE_EMAIL_INPUT_VALIDATION_SCHEMA), ROLES_RADIO_GROUP_VALIDATION_SCHEMA));
+const VALIDATION_SCHEMA$1 = yup.object().shape(_objectSpread$2(_objectSpread$2({}, MULTIPLE_EMAIL_INPUT_VALIDATION_SCHEMA), ROLES_RADIO_GROUP_VALIDATION_SCHEMA));
 const FILTER_INVALID_EMAILS = {
   label: instance.t("validations.filterInvalidEmails")
 };
@@ -10951,6 +11011,10 @@ const COUNTER_PROPS = {
   label: instance.t("common.email", PLURAL),
   startsFrom: 4
 };
+const MANAGE_MEMBERS_FORMIK_PROPS = {
+  enableReinitialize: true,
+  validationSchema: VALIDATION_SCHEMA$1
+};
 
 const renderInitialValues = (selectedMember, roles) => {
   var _roles$;
@@ -11043,6 +11107,8 @@ RolesRadioGroup.defaultProps = {
   roles: []
 };
 
+function ownKeys$1(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread$1(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$1(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$1(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 const ManageMember = _ref => {
   var _config$manageMember;
   let config = _ref.config,
@@ -11102,21 +11168,20 @@ const ManageMember = _ref => {
     what: metaName(SINGULAR).toLocaleLowerCase()
   }) : instance.t("common.add_", {
     what: metaName(SINGULAR).toLocaleLowerCase()
-  }))), config !== null && config !== void 0 && (_config$manageMember = config.manageMember) !== null && _config$manageMember !== void 0 && _config$manageMember.component ? config.manageMember.component(manageMemberProps) : /*#__PURE__*/React.createElement(Formik, {
-    enableReinitialize: true,
-    initialValues: renderInitialValues(selectedMember, roles),
-    onSubmit: handleAddMember,
-    validateOnBlur: hasSubmitted,
-    validateOnChange: hasSubmitted,
-    validationSchema: VALIDATION_SCHEMA$1
+  }))), config !== null && config !== void 0 && (_config$manageMember = config.manageMember) !== null && _config$manageMember !== void 0 && _config$manageMember.component ? config.manageMember.component(manageMemberProps) : /*#__PURE__*/React.createElement(Form, {
+    ref: formReference,
+    formikProps: _objectSpread$1(_objectSpread$1({}, MANAGE_MEMBERS_FORMIK_PROPS), {}, {
+      initialValues: renderInitialValues(selectedMember, roles),
+      onSubmit: handleAddMember,
+      validateOnBlur: hasSubmitted,
+      validateOnChange: hasSubmitted
+    })
   }, _ref2 => {
     let values = _ref2.values,
       dirty = _ref2.dirty;
     const emails = values.emails,
       role = values.role;
-    return /*#__PURE__*/React.createElement(Form, {
-      ref: formReference
-    }, /*#__PURE__*/React.createElement(ScrollToErrorField, {
+    return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(ScrollToErrorField, {
       formRef: formReference
     }), /*#__PURE__*/React.createElement(Pane.Body, null, /*#__PURE__*/React.createElement("div", {
       className: "ntm-members-pane__body"
@@ -11256,11 +11321,11 @@ const TeamMembers = _ref => {
     setIsOpen(assoc("manageMember", true));
   };
   const columns = useMemo(() => getColumnData({
-    memberFilter: filters.category,
-    handleUpdateStatus,
+    config,
     handleUpdateRole,
-    permissions: config === null || config === void 0 ? void 0 : config.permissions
-  }), [] // eslint-disable-line react-hooks/exhaustive-deps
+    handleUpdateStatus,
+    memberFilter: filters.category
+  }), [filters.category] // eslint-disable-line react-hooks/exhaustive-deps
   );
 
   const handleAlertClose = () => {
@@ -11324,6 +11389,7 @@ const TeamMembers = _ref => {
     }),
     rightActionBlock: /*#__PURE__*/React.createElement(SubHeader.Right, {
       columns: columns,
+      config: config,
       roles: roles,
       rolesButtonProps: config.rolesButtonProps,
       selectedRows: selectedRows,
@@ -11354,7 +11420,8 @@ const TeamMembers = _ref => {
     }),
     actionBlock: /*#__PURE__*/React.createElement(Header, {
       metaName: metaName,
-      onClick: () => setIsOpen(assoc("manageMember", true))
+      onClick: () => setIsOpen(assoc("manageMember", true)),
+      permissions: config === null || config === void 0 ? void 0 : config.permissions
     })
   })), /*#__PURE__*/React.createElement(ManageMember, {
     config: config,
@@ -11393,7 +11460,7 @@ const VALIDATION_SCHEMA = {
 
 var e=[],t=[];function n(n,r){if(n&&"undefined"!=typeof document){var a,s=!0===r.prepend?"prepend":"append",d=!0===r.singleTag,i="string"==typeof r.container?document.querySelector(r.container):document.getElementsByTagName("head")[0];if(d){var u=e.indexOf(i);-1===u&&(u=e.push(i)-1,t[u]={}),a=t[u]&&t[u][s]?t[u][s]:t[u][s]=c();}else a=c();65279===n.charCodeAt(0)&&(n=n.substring(1)),a.styleSheet?a.styleSheet.cssText+=n:a.appendChild(document.createTextNode(n));}function c(){var e=document.createElement("style");if(e.setAttribute("type","text/css"),r.attributes)for(var t=Object.keys(r.attributes),n=0;n<t.length;n++)e.setAttribute(t[n],r.attributes[t[n]]);var a="prepend"===s?"afterbegin":"beforeend";return i.insertAdjacentElement(a,e),e}}
 
-var css = ":root {\n  --ntm-roles-table-default-scroll: 15px;\n}\n\n.ntm-dropdown__button {\n  border-radius: 0 !important;\n  font-weight: var(--neeto-ui-font-normal);\n  min-height: 34px;\n  min-width: 150px;\n  text-align: left;\n  width: 100%;\n}\n\n.ntm-scrollbar__inner {\n  width: 100%;\n  height: 200px;\n}\n.ntm-scrollbar__outer {\n  position: \"absolute\";\n  top: 0px;\n  left: 0px;\n  width: 200px;\n  height: 150px;\n  overflow: \"hidden\";\n  visibility: \"hidden\";\n}\n\n.ntm-empty-state {\n  align-items: center;\n  display: flex;\n  height: 100%;\n  justify-content: center;\n  width: 100%;\n}\n.ntm-empty-state__image {\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  margin-bottom: 2rem;\n}\n.ntm-empty-state__title--with-action-block {\n  margin-bottom: 1rem;\n}\n.ntm-empty-state__action-block {\n  display: flex;\n  justify-content: center;\n}\n\n.ntm-members {\n  overflow: auto;\n  width: 100%;\n}\n.ntm-members-wrapper {\n  display: flex;\n}\n.ntm-members-page-loader {\n  width: 100%;\n  height: 100vh;\n}\n.ntm-members__table-wrapper {\n  height: calc(100vh - 205px);\n  width: 100%;\n}\n.ntm-members-table__column {\n  display: flex;\n  align-items: center;\n  gap: 0.5rem;\n}\n.ntm-members-pane__header {\n  margin-bottom: 0.5rem;\n}\n.ntm-members-pane__body {\n  width: 100%;\n  padding-bottom: 1rem;\n}\n.ntm-members-pane__body > * + * {\n  margin-top: 1rem;\n}\n.ntm-members-pane__footer {\n  display: flex;\n  gap: 0.5rem;\n}\n\n.ntm-members-radio-group {\n  width: 100%;\n}\n.ntm-members-radio-group .neeto-ui-radio__container--stacked {\n  width: 100%;\n}\n.ntm-members-radio-group__label {\n  padding-right: 4px;\n}\n.ntm-members-radio-group__icon {\n  cursor: pointer;\n}\n\n.ntm-members-pane-radio-item__wrapper {\n  width: 100%;\n  cursor: pointer;\n  padding: 8px 0px !important;\n}\n.ntm-members-pane-radio-item__wrapper:first-child {\n  padding-top: 0px !important;\n}\n.ntm-members-pane-radio-item__label {\n  margin-bottom: 0 !important;\n}\n.ntm-members-pane-radio-item__description {\n  color: rgb(var(--neeto-ui-gray-700));\n}\n\n.ntm-roles-header {\n  border-bottom: 1px solid rgb(var(--neeto-ui-gray-300));\n}\n\n.ntm-roles-table__wrapper {\n  width: 100%;\n  height: calc(100vh - var(--neeto-ui-main-header-height));\n  display: flex;\n}\n.ntm-roles-table__wrapper .ntm-roles-table__sidebar {\n  width: 396px;\n  min-width: 396px;\n  border-right: thin solid rgb(var(--neeto-ui-gray-300));\n}\n.ntm-roles-table__wrapper .ntm-roles-table__sidebar .ntm-roles-table-sidebar__search {\n  padding: 24px 24px 16px;\n  height: 72px;\n}\n.ntm-roles-table__wrapper .ntm-roles-table__sidebar .ntm-roles-table-sidebar__list {\n  height: calc(\n        100vh - var(--neeto-ui-main-header-height) - 72px -\n          var(--ntm-roles-table-default-scroll)\n      );\n  overflow-y: auto;\n  padding-left: 24px;\n}\n.ntm-roles-table__wrapper .ntm-roles-table__sidebar .ntm-roles-table-sidebar__list .ntm-roles-table-sidebar__list-item {\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  padding: 12px 8px;\n  min-height: 48px;\n}\n.ntm-roles-table__wrapper .ntm-roles-table__sidebar .ntm-roles-table-sidebar__list .ntm-roles-table-sidebar__list-item.ntm-roles-table-sidebar__list-item--highlighted {\n  background-color: rgb(var(--neeto-ui-primary-100));\n  padding: 12px 8px;\n}\n.ntm-roles-table__wrapper .ntm-roles-table__sidebar .ntm-roles-table-sidebar__list .ntm-roles-table-sidebar__list-item:not(.ntm-roles-table-sidebar__list-item--highlighted) {\n  border-bottom: thin solid rgb(var(--neeto-ui-gray-300));\n}\n.ntm-roles-table__wrapper .ntm-roles-table__columns {\n  width: calc(\n      100vw - var(--neeto-ui-sidebar-width) - 396px - 24px\n    );\n  overflow: hidden;\n}\n.ntm-roles-table__wrapper .ntm-roles-table__columns .ntm-roles-table__cell {\n  width: 100%;\n  min-width: 200px;\n  min-height: 48px;\n  padding: 12px 8px;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  border-right: thin solid rgb(var(--neeto-ui-gray-300));\n}\n.ntm-roles-table__wrapper .ntm-roles-table__columns .ntm-roles-table-cell__checkbox-wrapper {\n  position: absolute;\n  height: 1rem;\n  width: 1rem;\n  margin: auto;\n  z-index: 10;\n}\n.ntm-roles-table__wrapper .ntm-roles-table__columns .ntm-roles-table-cell__checkbox {\n  z-index: 10;\n}\n.ntm-roles-table__wrapper .ntm-roles-table__columns .ntm-roles-table__header {\n  display: flex;\n  align-items: center;\n  overflow-x: auto;\n}\n.ntm-roles-table__wrapper .ntm-roles-table__columns .ntm-roles-table__header .ntm-roles-table__cell {\n  height: 72px;\n  padding-left: 24px;\n}\n.ntm-roles-table__wrapper .ntm-roles-table__columns .ntm-roles-table__header .ntm-roles-table-header-cell__container {\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  width: 100%;\n  gap: 1rem;\n  overflow: hidden;\n}\n.ntm-roles-table__wrapper .ntm-roles-table__columns .ntm-roles-table__header .ntm-roles-table-header__dropdown {\n  margin: 3px;\n}\n.ntm-roles-table__wrapper .ntm-roles-table__columns .ntm-roles-table__header .ntm-roles-table-header__role-name {\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n.ntm-roles-table__wrapper .ntm-roles-table__columns .ntm-roles-table__rows {\n  width: 100%;\n  height: calc(\n        100vh - var(--neeto-ui-main-header-height) - 72px -\n          var(--ntm-roles-table-default-scroll)\n      );\n  overflow-y: auto;\n  scrollbar-width: none;\n}\n.ntm-roles-table__wrapper .ntm-roles-table__columns .ntm-roles-table__rows::-webkit-scrollbar {\n  width: 0px;\n  height: 0px;\n}\n.ntm-roles-table__wrapper .ntm-roles-table__columns .ntm-roles-table__rows::-webkit-scrollbar-thumb {\n  background: rgb(var(--neeto-ui-gray-300));\n  border-radius: 50px;\n}\n.ntm-roles-table__wrapper .ntm-roles-table__columns .ntm-roles-table__rows::-webkit-scrollbar-thumb:hover {\n  border-radius: 50px;\n}\n.ntm-roles-table__wrapper .ntm-roles-table__columns .ntm-roles-table__rows::-webkit-scrollbar-track {\n  background: rgb(var(--neeto-ui-gray-300));\n}\n.ntm-roles-table__wrapper .ntm-roles-table__columns .ntm-roles-table__rows .ntm-roles-table__row {\n  display: flex;\n  align-items: center;\n}\n.ntm-roles-table__wrapper .ntm-roles-table__columns .ntm-roles-table__rows .ntm-roles-table__row .ntm-roles-table__cell {\n  overflow: hidden;\n  position: relative;\n}\n.ntm-roles-table__wrapper .ntm-roles-table__columns .ntm-roles-table__rows .ntm-roles-table__row .ntm-roles-table__cell p {\n  opacity: 0;\n  width: 340px;\n  min-width: 340px;\n}\n.ntm-roles-table__wrapper .ntm-roles-table__columns .ntm-roles-table__rows .ntm-roles-table__row.ntm-roles-table__row--highlighted .ntm-roles-table__cell {\n  background-color: rgb(var(--neeto-ui-primary-100));\n}\n.ntm-roles-table__wrapper .ntm-roles-table__columns .ntm-roles-table__rows .ntm-roles-table__row:not(.ntm-roles-table__row--highlighted) .ntm-roles-table__cell {\n  border-bottom: thin solid rgb(var(--neeto-ui-gray-300));\n}\n\n.ntm-roles-table-sidebar__drop-down-button {\n  color: rgb(var(--neeto-ui-gray-600));\n  cursor: pointer;\n}\n\n.ntm-roles-modal__body > * + * {\n  margin-top: 1rem;\n}\n.ntm-roles-modal__footer {\n  display: flex;\n  gap: 0.5rem;\n}\n\n.ntm-roles-pane__body {\n  width: 100%;\n  margin-bottom: 1.5rem;\n}\n.ntm-roles-pane__body-wrapper > * + * {\n  margin-top: 1rem;\n}\n.ntm-roles-pane__body > * + * {\n  margin-top: 1.5rem;\n}\n.ntm-roles-pane__footer {\n  display: flex;\n  gap: 0.5rem;\n}\n\n.ntm-roles-permission > * + * {\n  margin: 0.5rem;\n}\n.ntm-roles-permission__heading {\n  color: rgb(var(--neeto-ui-gray-500));\n  text-transform: uppercase;\n}\n.ntm-roles-permission__card {\n  background-color: rgb(var(--neeto-ui-white));\n  align-items: center;\n  border-radius: var(--neeto-ui-rounded);\n  border-width: 1px;\n  border-color: rgb(var(--neeto-ui-gray-300));\n  cursor: pointer;\n  display: flex;\n  gap: 0.75rem;\n  padding: 1rem 0.75rem;\n}\n.ntm-roles-permission__card--description {\n  flex-grow: 1;\n}\n.ntm-roles-permission__card--checkbox {\n  padding: 0 0.5rem;\n}\n\ntd.ant-table-column-sort {\n  background: transparent;\n}";
+var css = ":root {\n  --ntm-roles-table-default-scroll: 15px;\n}\n\n.ntm-dropdown__button {\n  border-radius: 0 !important;\n  font-weight: var(--neeto-ui-font-normal);\n  min-height: 34px;\n  min-width: 150px;\n  text-align: left;\n  width: 100%;\n}\n\n.ntm-scrollbar__inner {\n  width: 100%;\n  height: 200px;\n}\n.ntm-scrollbar__outer {\n  position: \"absolute\";\n  top: 0px;\n  left: 0px;\n  width: 200px;\n  height: 150px;\n  overflow: \"hidden\";\n  visibility: \"hidden\";\n}\n\n.ntm-empty-state {\n  align-items: center;\n  display: flex;\n  height: 100%;\n  justify-content: center;\n  width: 100%;\n}\n.ntm-empty-state__image {\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  margin-bottom: 2rem;\n}\n.ntm-empty-state__title--with-action-block {\n  margin-bottom: 1rem;\n}\n.ntm-empty-state__action-block {\n  display: flex;\n  justify-content: center;\n}\n\n.ntm-members {\n  overflow: auto;\n  width: 100%;\n}\n.ntm-members-wrapper {\n  display: flex;\n}\n.ntm-members-page-loader {\n  width: 100%;\n  height: 100vh;\n}\n.ntm-members__table-wrapper {\n  height: calc(100vh - 205px);\n  width: 100%;\n}\n.ntm-members-table__column {\n  display: flex;\n  align-items: center;\n  gap: 0.5rem;\n}\n.ntm-members-pane__header {\n  margin-bottom: 0.5rem;\n}\n.ntm-members-pane__body {\n  width: 100%;\n  padding-bottom: 1rem;\n}\n.ntm-members-pane__body > * + * {\n  margin-top: 1rem;\n}\n.ntm-members-pane__footer {\n  display: flex;\n  gap: 0.5rem;\n}\n\n.ntm-members-radio-group {\n  width: 100%;\n}\n.ntm-members-radio-group .neeto-ui-radio__container--stacked {\n  width: 100%;\n}\n.ntm-members-radio-group__label {\n  padding-right: 4px;\n}\n.ntm-members-radio-group__icon {\n  cursor: pointer;\n}\n\n.ntm-members-pane-radio-item__wrapper {\n  width: 100%;\n  cursor: pointer;\n  padding: 8px 0px !important;\n}\n.ntm-members-pane-radio-item__wrapper:first-child {\n  padding-top: 0px !important;\n}\n.ntm-members-pane-radio-item__label {\n  margin-bottom: 0 !important;\n}\n.ntm-members-pane-radio-item__description {\n  color: rgb(var(--neeto-ui-gray-700));\n}\n\n.ntm-roles-header {\n  border-bottom: 1px solid rgb(var(--neeto-ui-gray-300));\n}\n\n.ntm-roles-table__wrapper {\n  width: 100%;\n  height: calc(100vh - var(--neeto-ui-main-header-with-breadcrumbs-height));\n  display: flex;\n}\n.ntm-roles-table__wrapper .ntm-roles-table__sidebar {\n  width: 396px;\n  min-width: 396px;\n  border-right: thin solid rgb(var(--neeto-ui-gray-300));\n}\n.ntm-roles-table__wrapper .ntm-roles-table__sidebar .ntm-roles-table-sidebar__search {\n  padding: 24px 24px 16px;\n  height: 72px;\n}\n.ntm-roles-table__wrapper .ntm-roles-table__sidebar .ntm-roles-table-sidebar__list {\n  height: calc(\n        100vh - var(--neeto-ui-main-header-with-breadcrumbs-height) - 72px -\n          var(--ntm-roles-table-default-scroll)\n      );\n  overflow-y: auto;\n  padding-left: 24px;\n}\n.ntm-roles-table__wrapper .ntm-roles-table__sidebar .ntm-roles-table-sidebar__list .ntm-roles-table-sidebar__list-item {\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  padding: 12px 8px;\n  min-height: 68px;\n}\n.ntm-roles-table__wrapper .ntm-roles-table__sidebar .ntm-roles-table-sidebar__list .ntm-roles-table-sidebar__list-item.ntm-roles-table-sidebar__list-item--highlighted {\n  background-color: rgb(var(--neeto-ui-primary-100));\n  padding: 12px 8px;\n}\n.ntm-roles-table__wrapper .ntm-roles-table__sidebar .ntm-roles-table-sidebar__list .ntm-roles-table-sidebar__list-item:not(.ntm-roles-table-sidebar__list-item--highlighted) {\n  border-bottom: thin solid rgb(var(--neeto-ui-gray-300));\n}\n.ntm-roles-table__wrapper .ntm-roles-table__columns {\n  width: calc(\n      100vw - var(--neeto-ui-sidebar-width) - 396px - 24px\n    );\n  overflow: hidden;\n}\n.ntm-roles-table__wrapper .ntm-roles-table__columns .ntm-roles-table__cell {\n  width: 100%;\n  min-width: 200px;\n  min-height: 68px;\n  padding: 12px 8px;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  border-right: thin solid rgb(var(--neeto-ui-gray-300));\n}\n.ntm-roles-table__wrapper .ntm-roles-table__columns .ntm-roles-table-cell__checkbox-wrapper {\n  position: absolute;\n  height: 1rem;\n  width: 1rem;\n  margin: auto;\n  z-index: 10;\n}\n.ntm-roles-table__wrapper .ntm-roles-table__columns .ntm-roles-table-cell__checkbox {\n  z-index: 10;\n}\n.ntm-roles-table__wrapper .ntm-roles-table__columns .ntm-roles-table__header {\n  display: flex;\n  align-items: center;\n  overflow-x: auto;\n}\n.ntm-roles-table__wrapper .ntm-roles-table__columns .ntm-roles-table__header .ntm-roles-table__cell {\n  height: 72px;\n  padding-left: 24px;\n}\n.ntm-roles-table__wrapper .ntm-roles-table__columns .ntm-roles-table__header .ntm-roles-table-header-cell__container {\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  width: 100%;\n  gap: 1rem;\n  overflow: hidden;\n}\n.ntm-roles-table__wrapper .ntm-roles-table__columns .ntm-roles-table__header .ntm-roles-table-header__dropdown {\n  margin: 3px;\n}\n.ntm-roles-table__wrapper .ntm-roles-table__columns .ntm-roles-table__header .ntm-roles-table-header__role-name {\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n.ntm-roles-table__wrapper .ntm-roles-table__columns .ntm-roles-table__rows {\n  width: 100%;\n  height: calc(\n        100vh - var(--neeto-ui-main-header-with-breadcrumbs-height) - 72px -\n          var(--ntm-roles-table-default-scroll)\n      );\n  overflow-y: auto;\n  scrollbar-width: none;\n}\n.ntm-roles-table__wrapper .ntm-roles-table__columns .ntm-roles-table__rows::-webkit-scrollbar {\n  width: 0px;\n  height: 0px;\n}\n.ntm-roles-table__wrapper .ntm-roles-table__columns .ntm-roles-table__rows::-webkit-scrollbar-thumb {\n  background: rgb(var(--neeto-ui-gray-300));\n  border-radius: 50px;\n}\n.ntm-roles-table__wrapper .ntm-roles-table__columns .ntm-roles-table__rows::-webkit-scrollbar-thumb:hover {\n  border-radius: 50px;\n}\n.ntm-roles-table__wrapper .ntm-roles-table__columns .ntm-roles-table__rows::-webkit-scrollbar-track {\n  background: rgb(var(--neeto-ui-gray-300));\n}\n.ntm-roles-table__wrapper .ntm-roles-table__columns .ntm-roles-table__rows .ntm-roles-table__row {\n  display: flex;\n  align-items: center;\n}\n.ntm-roles-table__wrapper .ntm-roles-table__columns .ntm-roles-table__rows .ntm-roles-table__row .ntm-roles-table__cell {\n  overflow: hidden;\n  position: relative;\n}\n.ntm-roles-table__wrapper .ntm-roles-table__columns .ntm-roles-table__rows .ntm-roles-table__row .ntm-roles-table__cell p {\n  opacity: 0;\n  width: 340px;\n  min-width: 340px;\n}\n.ntm-roles-table__wrapper .ntm-roles-table__columns .ntm-roles-table__rows .ntm-roles-table__row.ntm-roles-table__row--highlighted .ntm-roles-table__cell {\n  background-color: rgb(var(--neeto-ui-primary-100));\n}\n.ntm-roles-table__wrapper .ntm-roles-table__columns .ntm-roles-table__rows .ntm-roles-table__row:not(.ntm-roles-table__row--highlighted) .ntm-roles-table__cell {\n  border-bottom: thin solid rgb(var(--neeto-ui-gray-300));\n}\n\n.ntm-roles-table-sidebar__drop-down-button {\n  color: rgb(var(--neeto-ui-gray-600));\n  cursor: pointer;\n}\n\n.ntm-roles-modal__body > * + * {\n  margin-top: 1rem;\n}\n.ntm-roles-modal__footer {\n  display: flex;\n  gap: 0.5rem;\n}\n\n.ntm-roles-pane__body {\n  width: 100%;\n  margin-bottom: 1.5rem;\n}\n.ntm-roles-pane__body-wrapper > * + * {\n  margin-top: 1rem;\n}\n.ntm-roles-pane__body > * + * {\n  margin-top: 1.5rem;\n}\n.ntm-roles-pane__footer {\n  display: flex;\n  gap: 0.5rem;\n}\n\n.ntm-roles-permission > * + * {\n  margin: 0.5rem;\n}\n.ntm-roles-permission__heading {\n  color: rgb(var(--neeto-ui-gray-500));\n  text-transform: uppercase;\n}\n.ntm-roles-permission__card {\n  background-color: rgb(var(--neeto-ui-white));\n  align-items: center;\n  border-radius: var(--neeto-ui-rounded);\n  border-width: 1px;\n  border-color: rgb(var(--neeto-ui-gray-300));\n  cursor: pointer;\n  display: flex;\n  gap: 0.75rem;\n  padding: 1rem 0.75rem;\n}\n.ntm-roles-permission__card--description {\n  flex-grow: 1;\n}\n.ntm-roles-permission__card--checkbox {\n  padding: 0 0.5rem;\n}\n\n.ntm-roles-help-url-wrapper {\n  display: flex;\n  width: 100%;\n  align-items: center;\n  justify-content: center;\n  padding: 1rem 0;\n}\n\ntd.ant-table-column-sort {\n  background: transparent;\n}";
 n(css,{});
 
 export { MultipleEmailInput, index$1 as Roles, RolesRadioGroup, index as TeamMembers, VALIDATION_SCHEMA, hasPermission };