@bigbinary/neeto-team-members-frontend 2.4.14 → 2.4.15

package/dist/index.cjs.js

@@ -56,13 +56,29 @@ function _classCallCheck(instance, Constructor) {
   }
 }
 
+function _toPrimitive(input, hint) {
+  if (_typeof(input) !== "object" || input === null) return input;
+  var prim = input[Symbol.toPrimitive];
+  if (prim !== undefined) {
+    var res = prim.call(input, hint || "default");
+    if (_typeof(res) !== "object") return res;
+    throw new TypeError("@@toPrimitive must return a primitive value.");
+  }
+  return (hint === "string" ? String : Number)(input);
+}
+
+function _toPropertyKey(arg) {
+  var key = _toPrimitive(arg, "string");
+  return _typeof(key) === "symbol" ? key : String(key);
+}
+
 function _defineProperties(target, props) {
   for (var i = 0; i < props.length; i++) {
     var descriptor = props[i];
     descriptor.enumerable = descriptor.enumerable || false;
     descriptor.configurable = true;
     if ("value" in descriptor) descriptor.writable = true;
-    Object.defineProperty(target, descriptor.key, descriptor);
+    Object.defineProperty(target, _toPropertyKey(descriptor.key), descriptor);
   }
 }
 function _createClass(Constructor, protoProps, staticProps) {
@@ -123,6 +139,7 @@ function _getPrototypeOf(o) {
 }
 
 function _defineProperty(obj, key, value) {
+  key = _toPropertyKey(key);
   if (key in obj) {
     Object.defineProperty(obj, key, {
       value: value,
@@ -3591,8 +3608,8 @@ function hasLoadedNamespace(ns, i18n) {
   });
 }
 
-var _excluded$2 = ["format"],
-    _excluded2$2 = ["children", "count", "parent", "i18nKey", "context", "tOptions", "values", "defaults", "components", "ns", "i18n", "t", "shouldUnescape"];
+var _excluded$3 = ["format"],
+    _excluded2$3 = ["children", "count", "parent", "i18nKey", "context", "tOptions", "values", "defaults", "components", "ns", "i18n", "t", "shouldUnescape"];
 
 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; }
 
@@ -3657,7 +3674,7 @@ function nodesToString(children, i18nOptions) {
       warn("Trans: the passed in value is invalid - seems you passed in a null child.");
     } else if (_typeof(child) === 'object') {
       var format = child.format,
-          clone = _objectWithoutProperties(child, _excluded$2);
+          clone = _objectWithoutProperties(child, _excluded$3);
 
       var keys = Object.keys(clone);
 
@@ -3813,7 +3830,7 @@ function Trans(_ref) {
       i18nFromProps = _ref.i18n,
       tFromProps = _ref.t,
       shouldUnescape = _ref.shouldUnescape,
-      additionalProps = _objectWithoutProperties(_ref, _excluded2$2);
+      additionalProps = _objectWithoutProperties(_ref, _excluded2$3);
 
   var _ref2 = React.useContext(I18nContext) || {},
       i18nFromContext = _ref2.i18n,
@@ -3860,28 +3877,33 @@ function Trans(_ref) {
 }
 
 function _iterableToArrayLimit(arr, i) {
-  var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"];
-  if (_i == null) return;
-  var _arr = [];
-  var _n = true;
-  var _d = false;
-  var _s, _e;
-  try {
-    for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) {
-      _arr.push(_s.value);
-      if (i && _arr.length === i) break;
-    }
-  } catch (err) {
-    _d = true;
-    _e = err;
-  } finally {
+  var _i = null == arr ? null : "undefined" != typeof Symbol && arr[Symbol.iterator] || arr["@@iterator"];
+  if (null != _i) {
+    var _s,
+      _e,
+      _x,
+      _r,
+      _arr = [],
+      _n = !0,
+      _d = !1;
     try {
-      if (!_n && _i["return"] != null) _i["return"]();
+      if (_x = (_i = _i.call(arr)).next, 0 === i) {
+        if (Object(_i) !== _i) return;
+        _n = !1;
+      } else for (; !(_n = (_s = _x.call(_i)).done) && (_arr.push(_s.value), _arr.length !== i); _n = !0) {
+        ;
+      }
+    } catch (err) {
+      _d = !0, _e = err;
     } finally {
-      if (_d) throw _e;
+      try {
+        if (!_n && null != _i["return"] && (_r = _i["return"](), Object(_r) !== _r)) return;
+      } finally {
+        if (_d) throw _e;
+      }
     }
+    return _arr;
   }
-  return _arr;
 }
 
 function _slicedToArray(arr, i) {
@@ -4319,8 +4341,8 @@ const organizationRolesApi = {
   destroy
 };
 
-const _excluded$1 = ["onSuccess"],
-  _excluded2$1 = ["onSuccess"],
+const _excluded$2 = ["onSuccess"],
+  _excluded2$2 = ["onSuccess"],
   _excluded3$1 = ["onSuccess"];
 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; }
@@ -4333,7 +4355,7 @@ const useFetchRoles = function () {
 };
 const useCreateRole = _ref => {
   let onSuccess = _ref.onSuccess,
-    options = _objectWithoutProperties(_ref, _excluded$1);
+    options = _objectWithoutProperties(_ref, _excluded$2);
   return reactQuery.useMutation(organizationRolesApi.create, _objectSpread$7({
     onSuccess: response => {
       queryClient.setQueriesData(QUERY_KEYS.ROLES, cachedData => {
@@ -4349,7 +4371,7 @@ const useCreateRole = _ref => {
 };
 const useUpdateRole = _ref2 => {
   let onSuccess = _ref2.onSuccess,
-    options = _objectWithoutProperties(_ref2, _excluded2$1);
+    options = _objectWithoutProperties(_ref2, _excluded2$2);
   return reactQuery.useMutation(_ref3 => {
     let id = _ref3.id,
       payload = _ref3.payload;
@@ -6705,8 +6727,8 @@ const teamsApi = {
   update
 };
 
-const _excluded = ["onSuccess"],
-  _excluded2 = ["onSuccess"],
+const _excluded$1 = ["onSuccess"],
+  _excluded2$1 = ["onSuccess"],
   _excluded3 = ["onSuccess"];
 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; }
@@ -6721,7 +6743,7 @@ const useFetchMembers = function () {
 };
 const useCreateMember = _ref => {
   let onSuccess = _ref.onSuccess,
-    options = _objectWithoutProperties(_ref, _excluded);
+    options = _objectWithoutProperties(_ref, _excluded$1);
   return reactQuery.useMutation(teamsApi.create, _objectSpread$4({
     onSuccess: response => {
       queryClient.invalidateQueries(QUERY_KEYS.TEAMS);
@@ -6732,7 +6754,7 @@ const useCreateMember = _ref => {
 };
 const useUpdateMember = _ref2 => {
   let onSuccess = _ref2.onSuccess,
-    options = _objectWithoutProperties(_ref2, _excluded2);
+    options = _objectWithoutProperties(_ref2, _excluded2$1);
   return reactQuery.useMutation(_ref3 => {
     let id = _ref3.id,
       payload = _ref3.payload;
@@ -6773,26 +6795,6 @@ const useDebounce = function (value) {
   return debouncedValue;
 };
 
-const Header = _ref => {
-  var _permissions$create, _permissions$create2;
-  let metaName = _ref.metaName,
-    _ref$onClick = _ref.onClick,
-    onClick = _ref$onClick === void 0 ? noop : _ref$onClick,
-    permissions = _ref.permissions;
-  return /*#__PURE__*/React__default["default"].createElement(neetoui.Tooltip, {
-    content: instance.t("tooltips.noPermissionToAddMember"),
-    disabled: (_permissions$create = permissions === null || permissions === void 0 ? void 0 : permissions.create) !== null && _permissions$create !== void 0 ? _permissions$create : hasPermission(MANAGE_MEMBER_PERMISSIONS),
-    position: "bottom"
-  }, /*#__PURE__*/React__default["default"].createElement("span", null, /*#__PURE__*/React__default["default"].createElement(neetoui.Button, {
-    "data-cy": "ntm-add-member-button",
-    disabled: !((_permissions$create2 = permissions === null || permissions === void 0 ? void 0 : permissions.create) !== null && _permissions$create2 !== void 0 ? _permissions$create2 : hasPermission(MANAGE_MEMBER_PERMISSIONS)),
-    label: instance.t("common.add_", {
-      what: metaName(SINGULAR).toLocaleLowerCase()
-    }),
-    onClick: onClick
-  })));
-};
-
 function _extends() {
   _extends = Object.assign ? Object.assign.bind() : function (target) {
     for (var i = 1; i < arguments.length; i++) {
@@ -6808,6 +6810,44 @@ function _extends() {
   return _extends.apply(this, arguments);
 }
 
+const FIXED_COLUMNS = ["actions"];
+const COLUMNS_DROPDOWN_PROPS = {
+  label: instance.t("common.column", PLURAL)
+};
+const COLUMNS_SEARCH_PROPS = {
+  placeholder: instance.t("columns.search")
+};
+const MANAGE_ROLES_BUTTON_LABEL = instance.t("common.manage_", {
+  what: instance.t("common.role", PLURAL).toLocaleLowerCase()
+});
+
+const Header = _ref => {
+  var _permissions$create;
+  let metaName = _ref.metaName,
+    _ref$onClick = _ref.onClick,
+    onClick = _ref$onClick === void 0 ? noop : _ref$onClick,
+    permissions = _ref.permissions,
+    rolesButtonProps = _ref.rolesButtonProps;
+  const isRolesButtonVisible = !!rolesButtonProps;
+  const hasCreatePermission = (_permissions$create = permissions === null || permissions === void 0 ? void 0 : permissions.create) !== null && _permissions$create !== void 0 ? _permissions$create : hasPermission(MANAGE_MEMBER_PERMISSIONS);
+  return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, isRolesButtonVisible ? /*#__PURE__*/React__default["default"].createElement(neetoui.Button, _extends({
+    "data-cy": "ntm-manage-roles-button",
+    label: MANAGE_ROLES_BUTTON_LABEL,
+    style: "secondary"
+  }, rolesButtonProps)) : null, /*#__PURE__*/React__default["default"].createElement(neetoui.Tooltip, {
+    content: instance.t("tooltips.noPermissionToAddMember"),
+    disabled: hasCreatePermission,
+    position: "bottom"
+  }, /*#__PURE__*/React__default["default"].createElement("span", null, /*#__PURE__*/React__default["default"].createElement(neetoui.Button, {
+    "data-cy": "ntm-add-member-button",
+    disabled: !hasCreatePermission,
+    label: instance.t("common.add_", {
+      what: metaName(SINGULAR).toLocaleLowerCase()
+    }),
+    onClick: onClick
+  }))));
+};
+
 const getStorageValue = (key, defaultValue) => {
   const saved = localStorage.getItem(key);
   return JSON.parse(saved) || defaultValue;
@@ -6939,17 +6979,6 @@ const Columns = _ref => {
   }, noColumnMessage), !!actionBlock && /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement(Divider, null), actionBlock))));
 };
 
-const FIXED_COLUMNS = ["actions"];
-const COLUMNS_DROPDOWN_PROPS = {
-  label: instance.t("common.column", PLURAL)
-};
-const COLUMNS_SEARCH_PROPS = {
-  placeholder: instance.t("columns.search")
-};
-const MANAGE_ROLES_BUTTON_LABEL = instance.t("common.manage_", {
-  what: instance.t("common.role", PLURAL).toLocaleLowerCase()
-});
-
 const filterBySearchTerm = (searchTerm, roles) => ramda.filter(_ref => {
   let name = _ref.name;
   return ramda.includes(ramda.trim(ramda.toLower(searchTerm)), ramda.trim(ramda.toLower(name)));
@@ -7079,7 +7108,7 @@ const DEFAULT_SELECTED_ROWS = {
 };
 
 const Left = _ref => {
-  var _selectedRows$keys, _selectedRows$keys2, _config$permissions$u, _config$permissions;
+  var _selectedRows$keys, _selectedRows$keys2, _config$permissions$u, _config$permissions, _config$otherBulkActi;
   let config = _ref.config,
     filteredCount = _ref.filteredCount,
     metaName = _ref.metaName,
@@ -7157,14 +7186,12 @@ const Left = _ref => {
     handleRoleChange: handleRoleChange,
     hasUpdatePermission: hasUpdatePermission,
     roles: roles
-  }))))));
+  }), config === null || config === void 0 ? void 0 : (_config$otherBulkActi = config.otherBulkActions) === null || _config$otherBulkActi === void 0 ? void 0 : _config$otherBulkActi.call(config))))));
 };
 const Right = _ref2 => {
   let columns = _ref2.columns,
-    rolesButtonProps = _ref2.rolesButtonProps,
     setColumnData = _ref2.setColumnData;
-  const isRolesButtonVisible = !!rolesButtonProps;
-  return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement(Columns, {
+  return /*#__PURE__*/React__default["default"].createElement(Columns, {
     columnData: columns,
     dropdownProps: COLUMNS_DROPDOWN_PROPS,
     fixedColumns: FIXED_COLUMNS,
@@ -7172,11 +7199,7 @@ const Right = _ref2 => {
     noColumnMessage: instance.t("columns.noColumnsFound"),
     onChange: setColumnData,
     searchProps: COLUMNS_SEARCH_PROPS
-  }), isRolesButtonVisible ? /*#__PURE__*/React__default["default"].createElement(neetoui.Button, _extends({
-    "data-cy": "ntm-manage-roles-button",
-    label: MANAGE_ROLES_BUTTON_LABEL,
-    style: "secondary"
-  }, rolesButtonProps)) : null);
+  });
 };
 const SubHeader = {
   Left,
@@ -7875,6 +7898,28 @@ const getMetaName = ramda.curry((metaName, count) => {
 });
 const clearSelectedMembers = (previousCategory, currentCategory) => isNotEqual(previousCategory, currentCategory) && isNotEqual(currentCategory, "ALL");
 
+const _excluded = ["className", "children"],
+  _excluded2 = ["className", "children"];
+const PageWrapper = _ref => {
+  let className = _ref.className,
+    children = _ref.children,
+    otherProps = _objectWithoutProperties(_ref, _excluded);
+  return /*#__PURE__*/React__default["default"].createElement("div", _extends({
+    className: className
+  }, otherProps), children);
+};
+const Page = _ref2 => {
+  let className = _ref2.className,
+    children = _ref2.children,
+    otherProps = _objectWithoutProperties(_ref2, _excluded2);
+  return /*#__PURE__*/React__default["default"].createElement("div", _extends({
+    className: className
+  }, otherProps), children);
+};
+Page.Header = PageWrapper;
+Page.Body = PageWrapper;
+Page.Footer = PageWrapper;
+
 function ownKeys$2(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 = {
@@ -7895,6 +7940,19 @@ const MANAGE_MEMBERS_FORMIK_PROPS = {
   enableReinitialize: true,
   validationSchema: VALIDATION_SCHEMA$1
 };
+const DEFAULT_COMPONENT_CONFIG = {
+  type: "pane",
+  isOpen: false,
+  className: "",
+  headerProps: {},
+  bodyProps: {},
+  footerProps: {}
+};
+const MEMBERS_FORM_COMPONENT_MAPPER = {
+  pane: neetoui.Pane,
+  modal: neetoui.Modal,
+  page: Page
+};
 
 const renderInitialValues = (selectedMember, roles) => {
   var _roles$;
@@ -7926,7 +7984,9 @@ const MultipleEmailInput = _ref => {
   var _head;
   let emails = _ref.emails,
     selectedMember = _ref.selectedMember;
-  return selectedMember ? /*#__PURE__*/React__default["default"].createElement(formik$1.Input, {
+  return /*#__PURE__*/React__default["default"].createElement("div", {
+    className: "neeto-ui-w-full"
+  }, selectedMember ? /*#__PURE__*/React__default["default"].createElement(formik$1.Input, {
     disabled: true,
     "data-cy": "ntm-manage-member-email-input",
     label: instance.t("common.email", SINGULAR),
@@ -7941,7 +8001,7 @@ const MultipleEmailInput = _ref => {
     label: `${instance.t("common.email", PLURAL)}*`,
     name: "emails",
     placeholder: instance.t("placeholders.email")
-  });
+  }));
 };
 MultipleEmailInput.defaultProps = {
   emails: [],
@@ -7968,11 +8028,11 @@ const RolesRadioGroup = _ref => {
     let id = _ref2.id,
       name = _ref2.name;
     return /*#__PURE__*/React__default["default"].createElement("label", {
-      className: "ntm-members-pane-radio-item__wrapper",
+      className: "ntm-members-form-radio-item__wrapper",
       htmlFor: slugify(name),
       key: id
     }, /*#__PURE__*/React__default["default"].createElement(formik$1.Radio.Item, {
-      className: "ntm-members-pane-radio-item__label",
+      className: "ntm-members-form-radio-item__label",
       "data-cy": "ntm-manage-member-roles-button",
       defaultChecked: ramda.identical(name, role),
       id: slugify(name),
@@ -7990,41 +8050,55 @@ RolesRadioGroup.defaultProps = {
 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;
+  var _config$permissions$v, _config$permissions, _config$manageMember;
   let config = _ref.config,
-    isOpen = _ref.isOpen,
-    metaName = _ref.metaName,
-    onClose = _ref.onClose,
+    onComplete = _ref.onComplete,
     _ref$roles = _ref.roles,
     roles = _ref$roles === void 0 ? [] : _ref$roles,
-    selectedMember = _ref.selectedMember;
+    _ref$selectedMember = _ref.selectedMember,
+    selectedMember = _ref$selectedMember === void 0 ? null : _ref$selectedMember,
+    _ref$componentConfig = _ref.componentConfig,
+    componentConfig = _ref$componentConfig === void 0 ? {} : _ref$componentConfig;
   const _useState = React.useState(false),
     _useState2 = _slicedToArray(_useState, 2),
     hasSubmitted = _useState2[0],
     setHasSubmitted = _useState2[1];
   const formReference = React.useRef(null);
-  const onPaneClose = () => {
-    onClose();
+  const manageMemberComponentConfig = _objectSpread$1(_objectSpread$1({}, DEFAULT_COMPONENT_CONFIG), componentConfig);
+  const Component = MEMBERS_FORM_COMPONENT_MAPPER[manageMemberComponentConfig.type || "pane"];
+  const handleClose = () => {
+    onComplete();
     setHasSubmitted(false);
   };
+  const haveToFetchRoles = ramda.isEmpty(roles) ? (_config$permissions$v = config === null || config === void 0 ? void 0 : (_config$permissions = config.permissions) === null || _config$permissions === void 0 ? void 0 : _config$permissions.view) !== null && _config$permissions$v !== void 0 ? _config$permissions$v : DEFAULT_PERMISSION : false;
+  const _useFetchRoles = useFetchRoles({
+      select: response => {
+        var _ref2;
+        return ramda.reverse((_ref2 = response.organizationRoles || response.data.organizationRoles) !== null && _ref2 !== void 0 ? _ref2 : []);
+      },
+      enabled: haveToFetchRoles
+    }),
+    _useFetchRoles$data = _useFetchRoles.data,
+    rolesList = _useFetchRoles$data === void 0 ? roles : _useFetchRoles$data,
+    isRolesLoading = _useFetchRoles.isLoading;
   const manageMemberProps = {
     hasSubmitted,
-    onPaneClose,
-    roles,
+    handleClose,
+    roles: rolesList,
     selectedMember,
     queryClient
   };
   const _useCreateMember = useCreateMember({
       onSuccess: () => {
         var _config$createMember, _config$createMember$;
-        onPaneClose();
+        handleClose();
         config === null || config === void 0 ? void 0 : (_config$createMember = config.createMember) === null || _config$createMember === void 0 ? void 0 : (_config$createMember$ = _config$createMember.onSuccess) === null || _config$createMember$ === void 0 ? void 0 : _config$createMember$.callback();
       }
     }),
     createMember = _useCreateMember.mutate,
     isCreatingMember = _useCreateMember.isLoading;
   const _useUpdateMember = useUpdateMember({
-      onSuccess: onPaneClose
+      onSuccess: handleClose
     }),
     updateMember = _useUpdateMember.mutate,
     isUpdatingMember = _useUpdateMember.isLoading;
@@ -8034,46 +8108,56 @@ const ManageMember = _ref => {
       payload: renderPayload(values, selectedMember)
     }) : createMember(renderPayload(values));
   };
-  const isSubmitting = isCreatingMember || isUpdatingMember;
-  return /*#__PURE__*/React__default["default"].createElement(neetoui.Pane, {
+  const isSubmitting = isCreatingMember || isUpdatingMember || isRolesLoading;
+  const getTitle = () => {
+    const metaName = (config === null || config === void 0 ? void 0 : config.metaName) || "member";
+
+    /* eslint-disable @bigbinary/neeto/no-missing-localization */
+    return selectedMember ? instance.t("common.edit_", {
+      what: getMetaName(metaName)(SINGULAR).toLocaleLowerCase()
+    }) : instance.t("common.add_", {
+      what: getMetaName(metaName)(SINGULAR).toLocaleLowerCase()
+    });
+    /* eslint-disable @bigbinary/neeto/no-missing-localization */
+  };
+
+  return /*#__PURE__*/React__default["default"].createElement(Component, {
     "data-cy": "ntm-manage-members-pane-wrapper",
-    isOpen: isOpen,
-    onClose: onPaneClose
-  }, /*#__PURE__*/React__default["default"].createElement(neetoui.Pane.Header, null, /*#__PURE__*/React__default["default"].createElement(neetoui.Typography, {
-    className: "ntm-members-pane__header",
+    isOpen: manageMemberComponentConfig.isOpen,
+    onClose: handleClose,
+    className: manageMemberComponentConfig.className
+  }, /*#__PURE__*/React__default["default"].createElement(Component.Header, manageMemberComponentConfig.headerProps, /*#__PURE__*/React__default["default"].createElement(neetoui.Typography, {
+    className: "ntm-members-form__header",
     "data-cy": "ntm-manage-members-pane-header",
     style: "h2",
     weight: "semibold"
-  }, selectedMember ? instance.t("common.edit_", {
-    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__default["default"].createElement(formik$1.Form, {
+  }, getTitle())), config !== null && config !== void 0 && (_config$manageMember = config.manageMember) !== null && _config$manageMember !== void 0 && _config$manageMember.component ? config.manageMember.component(manageMemberProps) : /*#__PURE__*/React__default["default"].createElement(formik$1.Form, {
     ref: formReference,
     formikProps: _objectSpread$1(_objectSpread$1({}, MANAGE_MEMBERS_FORMIK_PROPS), {}, {
-      initialValues: renderInitialValues(selectedMember, roles),
+      initialValues: renderInitialValues(selectedMember, rolesList),
       onSubmit: handleAddMember,
       validateOnBlur: hasSubmitted,
       validateOnChange: hasSubmitted
     })
-  }, _ref2 => {
-    let values = _ref2.values,
-      dirty = _ref2.dirty;
+  }, _ref3 => {
+    var _manageMemberComponen, _manageMemberComponen2;
+    let values = _ref3.values,
+      dirty = _ref3.dirty;
     const emails = values.emails,
       role = values.role;
     return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement(ScrollToErrorField, {
       formRef: formReference
-    }), /*#__PURE__*/React__default["default"].createElement(neetoui.Pane.Body, null, /*#__PURE__*/React__default["default"].createElement("div", {
-      className: "ntm-members-pane__body"
-    }, /*#__PURE__*/React__default["default"].createElement(MultipleEmailInput, {
+    }), /*#__PURE__*/React__default["default"].createElement(Component.Body, _extends({}, manageMemberComponentConfig.bodyProps, {
+      className: classnames__default["default"](["ntm-members-form__body", (_manageMemberComponen = manageMemberComponentConfig.bodyProps) === null || _manageMemberComponen === void 0 ? void 0 : _manageMemberComponen.className])
+    }), /*#__PURE__*/React__default["default"].createElement(MultipleEmailInput, {
       emails: emails,
       selectedMember: selectedMember
     }), /*#__PURE__*/React__default["default"].createElement(RolesRadioGroup, {
       role: role,
-      roles: roles
-    }))), /*#__PURE__*/React__default["default"].createElement(neetoui.Pane.Footer, {
-      className: "ntm-members-pane__footer"
-    }, /*#__PURE__*/React__default["default"].createElement(neetoui.Button, {
+      roles: rolesList
+    })), /*#__PURE__*/React__default["default"].createElement(Component.Footer, _extends({}, manageMemberComponentConfig.footerProps, {
+      className: classnames__default["default"](["ntm-members-form__footer", (_manageMemberComponen2 = manageMemberComponentConfig.footerProps) === null || _manageMemberComponen2 === void 0 ? void 0 : _manageMemberComponen2.className])
+    }), /*#__PURE__*/React__default["default"].createElement(neetoui.Button, {
       "data-cy": "ntm-manage-member-submit-button",
       disabled: !dirty || isSubmitting,
       label: instance.t("buttons.saveChanges"),
@@ -8084,7 +8168,7 @@ const ManageMember = _ref => {
     }), /*#__PURE__*/React__default["default"].createElement(neetoui.Button, {
       "data-cy": "ntm-manage-member-cancel-button",
       label: instance.t("buttons.cancel"),
-      onClick: onPaneClose,
+      onClick: handleClose,
       style: "text"
     })));
   }));
@@ -8217,6 +8301,7 @@ const TeamMembers = _ref => {
     setIsOpen(ramda.assoc("manageMember", false));
     setSelectedMember(null);
   };
+  const resetSelectedRows = () => setSelectedRows(DEFAULT_SELECTED_ROWS);
   const handleMemberFilterChange = filter => {
     setFilters(ramda.assoc("category", filter));
     clearSelectedMembers(filters.category, filter) && setSelectedRows(DEFAULT_SELECTED_ROWS);
@@ -8229,10 +8314,17 @@ const TeamMembers = _ref => {
     }));
   };
   const handleRowSelect = (keys, rowData) => {
-    setSelectedRows({
+    var _config$table, _config$table$onRowSe;
+    const rows = {
       active: ramda.pluck("active", rowData),
       emails: ramda.pluck("email", rowData),
       keys
+    };
+    setSelectedRows(_objectSpread({}, rows));
+    config === null || config === void 0 ? void 0 : (_config$table = config.table) === null || _config$table === void 0 ? void 0 : (_config$table$onRowSe = _config$table.onRowSelect) === null || _config$table$onRowSe === void 0 ? void 0 : _config$table$onRowSe.call(_config$table, {
+      rows,
+      resetSelectedRows,
+      rowData
     });
   };
   if (isRolesLoading || isMembersLoading) {
@@ -8260,7 +8352,8 @@ const TeamMembers = _ref => {
     actionBlock: /*#__PURE__*/React__default["default"].createElement(Header, {
       metaName: metaName,
       onClick: () => setIsOpen(ramda.assoc("manageMember", true)),
-      permissions: config === null || config === void 0 ? void 0 : config.permissions
+      permissions: config === null || config === void 0 ? void 0 : config.permissions,
+      rolesButtonProps: config.rolesButtonProps
     })
   }), /*#__PURE__*/React__default["default"].createElement(layouts.SubHeader, {
     leftActionBlock: /*#__PURE__*/React__default["default"].createElement(SubHeader.Left, {
@@ -8274,7 +8367,6 @@ const TeamMembers = _ref => {
     }),
     rightActionBlock: /*#__PURE__*/React__default["default"].createElement(SubHeader.Right, {
       columns: columns,
-      rolesButtonProps: config.rolesButtonProps,
       setColumnData: setColumnData
     })
   }), (team === null || team === void 0 ? void 0 : team.membersCount) !== 0 ? /*#__PURE__*/React__default["default"].createElement("div", {
@@ -8306,11 +8398,12 @@ const TeamMembers = _ref => {
     })
   })), /*#__PURE__*/React__default["default"].createElement(ManageMember, {
     config: config,
-    isOpen: isOpen.manageMember,
-    metaName: metaName,
-    onClose: handleModalClose,
+    onComplete: handleModalClose,
     roles: roles,
-    selectedMember: selectedMember
+    selectedMember: selectedMember,
+    componentConfig: {
+      isOpen: isOpen.manageMember
+    }
   }), /*#__PURE__*/React__default["default"].createElement(neetoui.Alert, {
     isOpen: isOpen.alert,
     title: renderUpdateAlert("title", updateMemberAlertProps),
@@ -8341,9 +8434,10 @@ 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  --ntm-roles-table-cell-height: 68px;\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: var(--ntm-roles-table-cell-height);\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  height: var(--ntm-roles-table-cell-height);\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\n.neeto-ui-subheader .neeto-ui-subheader__left-wrapper .neeto-ui-subheader__left {\n  max-width: none;\n}\n\ntd.ant-table-column-sort {\n  background: transparent;\n}";
+var css = ":root {\n  --ntm-roles-table-default-scroll: 15px;\n  --ntm-roles-table-cell-height: 68px;\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-form__header {\n  margin-bottom: 0.5rem;\n}\n.ntm-members-form__body {\n  width: 100%;\n  padding-bottom: 1rem;\n}\n.ntm-members-form__body > * + * {\n  margin-top: 1rem;\n}\n.ntm-members-form__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-form-radio-item__wrapper {\n  width: 100%;\n  cursor: pointer;\n  padding: 8px 0px !important;\n}\n.ntm-members-form-radio-item__wrapper:first-child {\n  padding-top: 0px !important;\n}\n.ntm-members-form-radio-item__label {\n  margin-bottom: 0 !important;\n}\n.ntm-members-form-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: var(--ntm-roles-table-cell-height);\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  height: var(--ntm-roles-table-cell-height);\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\n.neeto-ui-subheader .neeto-ui-subheader__left-wrapper .neeto-ui-subheader__left {\n  max-width: none;\n}\n\ntd.ant-table-column-sort {\n  background: transparent;\n}";
 n(css,{});
 
+exports.ManageMember = ManageMember;
 exports.MultipleEmailInput = MultipleEmailInput;
 exports.Roles = index$1;
 exports.RolesRadioGroup = RolesRadioGroup;