@bigbinary/neeto-team-members-frontend 2.5.3 → 2.5.5

package/dist/index.cjs.js

@@ -2822,7 +2822,7 @@ var localStorageAvailable = function localStorageAvailable() {
   }
   return hasLocalStorageSupport;
 };
-var localStorage$1 = {
+var localStorage = {
   name: 'localStorage',
   lookup: function lookup(options) {
     var found;
@@ -2976,7 +2976,7 @@ var Browser = /*#__PURE__*/function () {
       this.i18nOptions = i18nOptions;
       this.addDetector(cookie$1);
       this.addDetector(querystring);
-      this.addDetector(localStorage$1);
+      this.addDetector(localStorage);
       this.addDetector(sessionStorage);
       this.addDetector(navigator$1);
       this.addDetector(htmlTag);
@@ -3715,6 +3715,7 @@ var buttons$1 = {
 	cancel: "Cancel",
 	changeRole: "Change role",
 	proceed: "Proceed",
+	reset: "Reset",
 	saveChanges: "Save changes"
 };
 var columns$1 = {
@@ -3760,6 +3761,7 @@ var helpers$1 = {
 	noRolesFound: "No roles found.",
 	searchRoles: "Search roles",
 	selectedMembersCount: "{{count}} {{metaName}} selected of",
+	themeSelector: "Theme selector",
 	visitToKnowMoreAboutPermissions: "Visit to know more about permissions"
 };
 var metaNames$1 = {
@@ -3813,6 +3815,7 @@ var buttons = {
 	cancel: "Annuler",
 	changeRole: "Changer de rôle",
 	proceed: "Procéder",
+	reset: "Réinitialiser",
 	saveChanges: "Sauvegarder les modifications"
 };
 var columns = {
@@ -3859,6 +3862,7 @@ var helpers = {
 	searchRoles: "Rechercher des rôles",
 	selectedMembersCount_one: "{{count}} {{metaName}} sélectionné sur",
 	selectedMembersCount_other: "{{count}} {{metaName}} sélectionnés sur",
+	themeSelector: "Sélecteur de thème",
 	visitToKnowMoreAboutPermissions: "Visitez pour en savoir plus sur les autorisations"
 };
 var metaNames = {
@@ -4006,16 +4010,19 @@ const update$1 = (id, payload) => axios__default["default"].patch(`${BASE_URL}/o
 const destroy = (id, payload) => axios__default["default"].delete(`${BASE_URL}/organization_roles/${id}`, {
   data: payload
 });
+const bulkUpdate$1 = payload => axios__default["default"].patch(`${BASE_URL}/organization_roles/bulk_update`, payload);
 const organizationRolesApi = {
-  fetch: fetch$1,
+  bulkUpdate: bulkUpdate$1,
   create: create$1,
-  update: update$1,
-  destroy
+  destroy,
+  fetch: fetch$1,
+  update: update$1
 };
 
 const _excluded$2 = ["onSuccess"],
   _excluded2$2 = ["onSuccess"],
-  _excluded3$1 = ["onSuccess"];
+  _excluded3$1 = ["onSuccess"],
+  _excluded4 = ["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; }
 const useFetchRoles = function () {
@@ -4087,6 +4094,19 @@ const useDestroyRole = _ref4 => {
     }
   }, options));
 };
+const useBulkUpdateRoles = _ref6 => {
+  let onSuccess = _ref6.onSuccess,
+    options = _objectWithoutProperties(_ref6, _excluded4);
+  return reactQuery.useMutation(organizationRolesApi.bulkUpdate, _objectSpread$7({
+    onSuccess: response => {
+      queryClient.invalidateQueries(QUERY_KEYS.TEAMS);
+      queryClient.invalidateQueries(QUERY_KEYS.TEAMS_DEPENDENCIES);
+      queryClient.invalidateQueries(QUERY_KEYS.ROLES);
+      neetoui.Toastr.success(response.ntmNotice || response.data.ntmNotice);
+      onSuccess === null || onSuccess === void 0 ? void 0 : onSuccess();
+    }
+  }, options));
+};
 
 var distExports = {};
 var dist = {
@@ -5466,22 +5486,6 @@ var dist = {
 	
 } (dist));
 
-const renderSearchProps = (searchString, setSearchString) => ({
-  "data-cy": "ntm-search-roles-input",
-  onChange: _ref => {
-    let value = _ref.target.value;
-    return setSearchString(value);
-  },
-  placeholder: instance.t("common.search_", {
-    what: instance.t("common.role", PLURAL).toLocaleLowerCase()
-  }),
-  value: searchString
-});
-const renderBreadcrumbs = breadcrumbs => breadcrumbs !== null && breadcrumbs !== void 0 ? breadcrumbs : [{
-  text: instance.t("metaNames.member", PLURAL),
-  link: "/members"
-}];
-
 const AddRoleButton = _ref => {
   var _permissions$create, _permissions$create2;
   let onClick = _ref.onClick,
@@ -5502,9 +5506,28 @@ const AddRoleButton = _ref => {
   })));
 };
 
+const renderSearchProps = (searchString, setSearchString) => ({
+  "data-cy": "ntm-search-roles-input",
+  onChange: _ref => {
+    let value = _ref.target.value;
+    return setSearchString(value);
+  },
+  placeholder: instance.t("common.search_", {
+    what: instance.t("common.role", PLURAL).toLocaleLowerCase()
+  }),
+  value: searchString
+});
+const renderBreadcrumbs = breadcrumbs => breadcrumbs !== null && breadcrumbs !== void 0 ? breadcrumbs : [{
+  text: instance.t("metaNames.member", PLURAL),
+  link: "/members"
+}];
+
 const Header$1 = _ref => {
   var _config$header;
   let config = _ref.config,
+    handleReset = _ref.handleReset,
+    handleSubmit = _ref.handleSubmit,
+    isDirty = _ref.isDirty,
     searchString = _ref.searchString,
     setSearchString = _ref.setSearchString,
     setIsNewRolePaneOpen = _ref.setIsNewRolePaneOpen;
@@ -5524,7 +5547,18 @@ const Header$1 = _ref => {
     })),
     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__*/e__default["default"].createElement(AddRoleButton, {
+    actionBlock: isDirty ? /*#__PURE__*/e__default["default"].createElement(e__default["default"].Fragment, null, /*#__PURE__*/e__default["default"].createElement(neetoui.Button, {
+      "data-cy": "ntm-role-submission-button",
+      onClick: handleSubmit,
+      label: t("buttons.saveChanges"),
+      type: "submit"
+    }), /*#__PURE__*/e__default["default"].createElement(neetoui.Button, {
+      "data-cy": "ntm-role-reset-button",
+      label: t("buttons.reset"),
+      onClick: handleReset,
+      style: "text",
+      type: "reset"
+    })) : /*#__PURE__*/e__default["default"].createElement(AddRoleButton, {
       onClick: () => setIsNewRolePaneOpen(true),
       permissions: config === null || config === void 0 ? void 0 : config.permissions
     }),
@@ -5532,17 +5566,6 @@ const Header$1 = _ref => {
   });
 };
 
-const getPermissionGroups = function () {
-  let permissions = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
-  const groupedPermissions = ramda.groupBy(permission => permission === null || permission === void 0 ? void 0 : permission.category, permissions);
-  const categories = Object.keys(groupedPermissions);
-  categories.forEach(category => {
-    groupedPermissions[category].permissions = groupedPermissions[category];
-    groupedPermissions[category].isPermissionsVisible = true;
-  });
-  return groupedPermissions;
-};
-
 const transformObjectToDotNotation = function (object) {
   let prefix = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : "";
   let result = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : [];
@@ -5673,6 +5696,7 @@ const New = _ref => {
   const _useTranslation = useTranslation(),
     t = _useTranslation.t;
   const formReference = e$1.useRef(null);
+  const inputReference = e$1.useRef(null);
   const _useCreateRole = useCreateRole({
       onSuccess: onClose
     }),
@@ -5687,6 +5711,7 @@ const New = _ref => {
     });
   };
   return /*#__PURE__*/e__default["default"].createElement(neetoui.Pane, {
+    initialFocusRef: inputReference,
     isOpen: isOpen,
     onClose: onClose
   }, /*#__PURE__*/e__default["default"].createElement(neetoui.Pane.Header, null, /*#__PURE__*/e__default["default"].createElement(neetoui.Typography, {
@@ -5715,7 +5740,8 @@ const New = _ref => {
       name: "name",
       placeholder: t("placeholders.enter_", {
         what: t("common.name").toLocaleLowerCase()
-      })
+      }),
+      ref: inputReference
     }), /*#__PURE__*/e__default["default"].createElement(formik$1.Textarea, {
       "data-cy": "ntm-add-role-description-text-field",
       label: t("common.description"),
@@ -5758,19 +5784,13 @@ const Row = _ref => {
     config = _ref.config,
     _ref$permission = _ref.permission,
     permission = _ref$permission === void 0 ? null : _ref$permission,
-    roles = _ref.roles;
-  const _useUpdateRole = useUpdateRole({}),
-    updateRole = _useUpdateRole.mutate;
+    roles = _ref.roles,
+    setModifiedRoles = _ref.setModifiedRoles;
   const allPermissionIdsOfCategory = ramda.map(ramda.prop("id"), (allPermissionsOfCategory === null || allPermissionsOfCategory === void 0 ? void 0 : allPermissionsOfCategory.permissions) || []);
   const handleSubmit = (role, checked) => {
     const permissionIds = allPermissionIdsOfCategory.length > 0 ? allPermissionIdsOfCategory : [permission.id];
     const modifiedRole = ramda.modify("permissionIds", () => checked ? removeDuplicates([...role.permissionIds, ...permissionIds]) : role.permissionIds.filter(id => !permissionIds.includes(id)), role);
-    updateRole({
-      id: role.id,
-      payload: {
-        organizationRole: modifiedRole
-      }
-    });
+    setModifiedRoles(pure.replaceById(role.id, modifiedRole));
   };
   const isCheckboxChecked = role => !allPermissionsOfCategory ? ramda.includes(permission.id, role.permissionIds) : allPermissionIdsOfCategory.every(id => ramda.includes(id, role.permissionIds));
   return /*#__PURE__*/e__default["default"].createElement("div", {
@@ -5929,6 +5949,7 @@ const Edit = _ref => {
   const _useTranslation = useTranslation(),
     t = _useTranslation.t;
   const formReference = e$1.useRef(null);
+  const inputReference = e$1.useRef(null);
   const _useUpdateRole = useUpdateRole({
       onSuccess: onClose
     }),
@@ -5950,6 +5971,7 @@ const Edit = _ref => {
     });
   };
   return /*#__PURE__*/e__default["default"].createElement(neetoui.Pane, {
+    initialFocusRef: inputReference,
     isOpen: isOpen,
     onClose: onClose
   }, /*#__PURE__*/e__default["default"].createElement(neetoui.Pane.Header, null, /*#__PURE__*/e__default["default"].createElement(neetoui.Typography, {
@@ -5975,7 +5997,8 @@ const Edit = _ref => {
       label: t("common.name"),
       maxLength: 40,
       name: "name",
-      placeholder: t("placeholders.enterRoleName")
+      placeholder: t("placeholders.enterRoleName"),
+      ref: inputReference
     }), /*#__PURE__*/e__default["default"].createElement(formik$1.Textarea, {
       "data-cy": "ntm-update-role-description-text-field",
       label: t("common.description"),
@@ -5999,11 +6022,12 @@ const Edit = _ref => {
   }));
 };
 
-const Columns$1 = _ref => {
+const Columns = _ref => {
   let config = _ref.config,
     filteredGroupPermissions = _ref.filteredGroupPermissions,
     filteredRoles = _ref.filteredRoles,
     roles = _ref.roles,
+    setModifiedRoles = _ref.setModifiedRoles,
     setIsScrollPresent = _ref.setIsScrollPresent;
   const _useState = e$1.useState(DEFAULT_MANAGE_ROLE_VALUES),
     _useState2 = _slicedToArray(_useState, 2),
@@ -6030,11 +6054,13 @@ const Columns$1 = _ref => {
     }, /*#__PURE__*/e__default["default"].createElement(Row, {
       allPermissionsOfCategory: groupedPermissions,
       config: config,
+      setModifiedRoles: setModifiedRoles,
       roles: filteredRoles
     }), isPermissionsVisible && groupedPermissions.permissions.map((permission, permissionIndex) => /*#__PURE__*/e__default["default"].createElement(Row, {
       config: config,
       key: permissionIndex,
       permission: permission,
+      setModifiedRoles: setModifiedRoles,
       roles: filteredRoles
     })));
   }))), /*#__PURE__*/e__default["default"].createElement(Edit, {
@@ -6158,6 +6184,7 @@ const Table = _ref => {
     filteredRoles = _ref.filteredRoles,
     permissionGroups = _ref.permissionGroups,
     roles = _ref.roles,
+    setModifiedRoles = _ref.setModifiedRoles,
     setIsNewRolePaneOpen = _ref.setIsNewRolePaneOpen;
   const _useTranslation = useTranslation(),
     t = _useTranslation.t;
@@ -6210,17 +6237,41 @@ const Table = _ref => {
       }),
       onClick: () => setIsNewRolePaneOpen(true)
     }
-  })) : /*#__PURE__*/e__default["default"].createElement(Columns$1, {
+  })) : /*#__PURE__*/e__default["default"].createElement(Columns, {
     config: config,
     filteredGroupPermissions: filteredGroupPermissions,
     filteredRoles: filteredRoles,
     roles: roles,
+    setModifiedRoles: setModifiedRoles,
     setIsScrollPresent: setIsScrollPresent
   }));
 };
 
+const getPermissionGroups = function () {
+  let permissions = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
+  const groupedPermissions = ramda.groupBy(permission => permission === null || permission === void 0 ? void 0 : permission.category, permissions);
+  const categories = Object.keys(groupedPermissions);
+  categories.forEach(category => {
+    groupedPermissions[category].permissions = groupedPermissions[category];
+    groupedPermissions[category].isPermissionsVisible = true;
+  });
+  return groupedPermissions;
+};
+const getModifiedPermissions = function () {
+  let roles = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
+  let modifiedRoles = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : [];
+  return modifiedRoles.map(role => {
+    const oldPermissions = pure.findById(role.id, roles).permissionIds;
+    if (ramda.equals(oldPermissions, role.permissionIds)) return false;
+    return {
+      id: role.id,
+      permissionIds: role.permissionIds
+    };
+  }).filter(Boolean);
+};
+
 const Roles = _ref => {
-  var _config$permissions$v, _config$permissions, _config$permissions$v2, _config$permissions2;
+  var _config$permissions$v, _config$permissions, _config$permissions$v2, _config$permissions2, _config$permissions$u, _config$permissions3;
   let config = _ref.config;
   const _useTranslation = useTranslation(),
     t = _useTranslation.t;
@@ -6237,7 +6288,7 @@ const Roles = _ref => {
     isNewRolePaneOpen = _useState6[0],
     setIsNewRolePaneOpen = _useState6[1];
   const _useFetchRoles = useFetchRoles({
-      onSuccess: roles => setFilteredRoles(roles),
+      onSuccess: roles => setModifiedRoles(roles),
       enabled: (_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
     }),
     roles = _useFetchRoles.data,
@@ -6247,13 +6298,31 @@ const Roles = _ref => {
     }),
     permissions = _useFetchPermissions.data,
     isPermissionsLoading = _useFetchPermissions.isLoading;
+  const _useBulkUpdateRoles = useBulkUpdateRoles({
+      enabled: (_config$permissions$u = config === null || config === void 0 ? void 0 : (_config$permissions3 = config.permissions) === null || _config$permissions3 === void 0 ? void 0 : _config$permissions3.update) !== null && _config$permissions$u !== void 0 ? _config$permissions$u : DEFAULT_PERMISSION
+    }),
+    bulkUpdate = _useBulkUpdateRoles.mutate;
+  const _useState7 = e$1.useState(roles),
+    _useState8 = _slicedToArray(_useState7, 2),
+    modifiedRoles = _useState8[0],
+    setModifiedRoles = _useState8[1];
+  const isDirty = pure.isPresent(getModifiedPermissions(roles, modifiedRoles));
   const permissionGroups = getPermissionGroups(permissions);
   e$1.useEffect(() => {
     setFilteredRoles(ramda.filter(_ref2 => {
       let name = _ref2.name;
       return ramda.includes(searchString.toLowerCase().trim(), name.toLowerCase().trim());
-    }, roles || []));
-  }, [roles, searchString]);
+    }, modifiedRoles || []));
+  }, [modifiedRoles, searchString]);
+  const handleSubmit = () => {
+    const updatedRoles = getModifiedPermissions(roles, modifiedRoles);
+    bulkUpdate({
+      organizationRoles: {
+        updatedRoles
+      }
+    });
+  };
+  const handleReset = () => setModifiedRoles(roles);
   if (isRolesLoading || isPermissionsLoading) {
     return /*#__PURE__*/e__default["default"].createElement("div", {
       className: "ntm-members-page-loader"
@@ -6263,6 +6332,9 @@ const Roles = _ref => {
     isHeaderFixed: true
   }, /*#__PURE__*/e__default["default"].createElement(Header$1, {
     config: config,
+    handleReset: handleReset,
+    handleSubmit: handleSubmit,
+    isDirty: isDirty,
     searchString: searchString,
     setSearchString: setSearchString,
     setIsNewRolePaneOpen: setIsNewRolePaneOpen
@@ -6271,6 +6343,7 @@ const Roles = _ref => {
     filteredRoles: filteredRoles,
     permissionGroups: permissionGroups,
     roles: roles,
+    setModifiedRoles: setModifiedRoles,
     setIsNewRolePaneOpen: setIsNewRolePaneOpen
   }), (config === null || config === void 0 ? void 0 : config.helpUrl) && /*#__PURE__*/e__default["default"].createElement("div", {
     className: "ntm-roles-help-url-wrapper"
@@ -7024,16 +7097,20 @@ var objectInspect = function inspect_(obj, options, depth, seen) {
     }
     if (isMap(obj)) {
         var mapParts = [];
-        mapForEach.call(obj, function (value, key) {
-            mapParts.push(inspect(key, obj, true) + ' => ' + inspect(value, obj));
-        });
+        if (mapForEach) {
+            mapForEach.call(obj, function (value, key) {
+                mapParts.push(inspect(key, obj, true) + ' => ' + inspect(value, obj));
+            });
+        }
         return collectionOf('Map', mapSize.call(obj), mapParts, indent);
     }
     if (isSet(obj)) {
         var setParts = [];
-        setForEach.call(obj, function (value) {
-            setParts.push(inspect(value, obj));
-        });
+        if (setForEach) {
+            setForEach.call(obj, function (value) {
+                setParts.push(inspect(value, obj));
+            });
+        }
         return collectionOf('Set', setSize.call(obj), setParts, indent);
     }
     if (isWeakMap(obj)) {
@@ -8470,7 +8547,8 @@ function Re(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Obj
 
 const FIXED_COLUMNS = ["actions"];
 const COLUMNS_DROPDOWN_PROPS = {
-  label: instance.t("common.column", PLURAL)
+  label: instance.t("common.column", PLURAL),
+  buttonStyle: "text"
 };
 const COLUMNS_SEARCH_PROPS = {
   placeholder: instance.t("columns.search")
@@ -8508,134 +8586,6 @@ const Header = _ref => {
   }))));
 };
 
-const useDebounce = function (value) {
-  let delay = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 350;
-  const _useState = e$1.useState(value),
-    _useState2 = _slicedToArray(_useState, 2),
-    debouncedValue = _useState2[0],
-    setDebouncedValue = _useState2[1];
-  e$1.useEffect(() => {
-    const handler = setTimeout(() => setDebouncedValue(value), delay);
-    return () => clearTimeout(handler);
-  }, [value, delay]);
-  return debouncedValue;
-};
-
-const getStorageValue = (key, defaultValue) => {
-  const saved = localStorage.getItem(key);
-  return JSON.parse(saved) || defaultValue;
-};
-const useLocalStorage = (key, defaultValue) => {
-  const _useState = e$1.useState(() => getStorageValue(key, defaultValue)),
-    _useState2 = _slicedToArray(_useState, 2),
-    storedValue = _useState2[0],
-    setStoredValue = _useState2[1];
-  const setValue = value => {
-    if (ramda.isNil(value)) {
-      localStorage.removeItem(key);
-    } else {
-      localStorage.setItem(key, JSON.stringify(value));
-    }
-    setStoredValue(value);
-  };
-  return [storedValue, setValue];
-};
-
-const removeFixedColumns = (fixedColumns, columnData) => pure.removeBy({
-  dataIndex: ramda.includes(ramda.__, fixedColumns)
-}, columnData);
-const filterBySearchTerm$1 = (searchTerm, columns) => ramda.filter(_ref => {
-  let title = _ref.title;
-  return ramda.includes(ramda.trim(ramda.toLower(searchTerm)), ramda.trim(ramda.toLower(title)));
-}, columns);
-
-const Columns = _ref => {
-  let actionBlock = _ref.actionBlock,
-    _ref$checkboxProps = _ref.checkboxProps,
-    checkboxProps = _ref$checkboxProps === void 0 ? {} : _ref$checkboxProps,
-    _ref$columnData = _ref.columnData,
-    columnData = _ref$columnData === void 0 ? [] : _ref$columnData,
-    _ref$dropdownProps = _ref.dropdownProps,
-    dropdownProps = _ref$dropdownProps === void 0 ? {} : _ref$dropdownProps,
-    _ref$fixedColumns = _ref.fixedColumns,
-    fixedColumns = _ref$fixedColumns === void 0 ? [] : _ref$fixedColumns,
-    _ref$isSearchable = _ref.isSearchable,
-    isSearchable = _ref$isSearchable === void 0 ? false : _ref$isSearchable,
-    _ref$localStorageKey = _ref.localStorageKey,
-    localStorageKey = _ref$localStorageKey === void 0 ? "" : _ref$localStorageKey,
-    _ref$noColumnMessage = _ref.noColumnMessage,
-    noColumnMessage = _ref$noColumnMessage === void 0 ? "No columns found!" : _ref$noColumnMessage,
-    _ref$onChange = _ref.onChange,
-    onChange = _ref$onChange === void 0 ? ramda.identity : _ref$onChange,
-    _ref$searchProps = _ref.searchProps,
-    searchProps = _ref$searchProps === void 0 ? {} : _ref$searchProps;
-  // @ts-ignore
-  const Divider = neetoui.Dropdown.Divider,
-    Menu = neetoui.Dropdown.Menu,
-    MenuItem = neetoui.Dropdown.MenuItem;
-  const _useLocalStorage = useLocalStorage(localStorageKey, []),
-    _useLocalStorage2 = _slicedToArray(_useLocalStorage, 2),
-    hiddenColumns = _useLocalStorage2[0],
-    setHiddenColumns = _useLocalStorage2[1];
-  const _useState = e$1.useState(""),
-    _useState2 = _slicedToArray(_useState, 2),
-    searchTerm = _useState2[0],
-    setSearchTerm = _useState2[1];
-  const columns = removeFixedColumns(fixedColumns, columnData);
-  const filteredColumns = filterBySearchTerm$1(searchTerm, columns);
-  const handleChange = _ref2 => {
-    let _ref2$target = _ref2.target,
-      dataIndex = _ref2$target.name,
-      checked = _ref2$target.checked;
-    return checked ? setHiddenColumns(ramda.without([dataIndex], hiddenColumns)) : setHiddenColumns(ramda.append(dataIndex, hiddenColumns));
-  };
-  const handleSearch = _ref3 => {
-    let value = _ref3.target.value;
-    return setSearchTerm(value);
-  };
-  e$1.useEffect(() => {
-    onChange(pure.removeBy({
-      dataIndex: ramda.includes(ramda.__, hiddenColumns)
-    }, columnData));
-  }, [columnData, hiddenColumns]); // eslint-disable-line react-hooks/exhaustive-deps
-
-  return /*#__PURE__*/e__default["default"].createElement(neetoui.Dropdown, _extends({
-    buttonSize: "medium",
-    buttonStyle: "secondary",
-    closeOnSelect: false,
-    label: "Columns",
-    onClose: () => setSearchTerm(""),
-    position: "bottom-end"
-  }, dropdownProps), /*#__PURE__*/e__default["default"].createElement(Menu, null, /*#__PURE__*/e__default["default"].createElement("div", null, isSearchable && /*#__PURE__*/e__default["default"].createElement(neetoui.Input, _extends({
-    className: "neeto-ui-px-3 neeto-ui-py-2",
-    "data-cy": "neeto-ui-columns-search",
-    onChange: handleSearch,
-    placeholder: "Search columns",
-    prefix: /*#__PURE__*/e__default["default"].createElement(neetoIcons.Search, null),
-    type: "search",
-    value: searchTerm
-  }, searchProps)), pure.isNotEmpty(filteredColumns) ? filteredColumns.map(_ref4 => {
-    let dataIndex = _ref4.dataIndex,
-      key = _ref4.key,
-      title = _ref4.title;
-    return /*#__PURE__*/e__default["default"].createElement(MenuItem, {
-      key: key
-    }, /*#__PURE__*/e__default["default"].createElement(neetoui.Label, {
-      className: "neeto-ui-w-full neeto-ui-px-3 neeto-ui-py-2 hover:neeto-ui-bg-gray-200 neeto-ui-cursor-pointer",
-      htmlFor: dataIndex
-    }, /*#__PURE__*/e__default["default"].createElement(neetoui.Checkbox, _extends({
-      id: dataIndex,
-      name: dataIndex,
-      checked: !hiddenColumns.includes(dataIndex),
-      "data-cy": "neeto-ui-columns-checkbox",
-      label: title,
-      onChange: handleChange
-    }, checkboxProps))));
-  }) : /*#__PURE__*/e__default["default"].createElement("span", {
-    className: "neeto-ui-flex neeto-ui-flex-col neeto-ui-items-center neeto-ui-p-2"
-  }, noColumnMessage), !!actionBlock && /*#__PURE__*/e__default["default"].createElement(e__default["default"].Fragment, null, /*#__PURE__*/e__default["default"].createElement(Divider, null), actionBlock))));
-};
-
 const filterBySearchTerm = (searchTerm, roles) => ramda.filter(_ref => {
   let name = _ref.name;
   return ramda.includes(ramda.trim(ramda.toLower(searchTerm)), ramda.trim(ramda.toLower(name)));
@@ -8872,7 +8822,7 @@ const Right = _ref2 => {
     handleNeetoFilterChange = _ref2.handleNeetoFilterChange,
     setIsFiltersPaneOpen = _ref2.setIsFiltersPaneOpen,
     isFiltersPaneOpen = _ref2.isFiltersPaneOpen;
-  return /*#__PURE__*/e__default["default"].createElement(e__default["default"].Fragment, null, /*#__PURE__*/e__default["default"].createElement(Columns, {
+  return /*#__PURE__*/e__default["default"].createElement(e__default["default"].Fragment, null, /*#__PURE__*/e__default["default"].createElement(reactUtils.Columns, {
     columnData: columns,
     dropdownProps: COLUMNS_DROPDOWN_PROPS,
     fixedColumns: FIXED_COLUMNS,
@@ -9701,6 +9651,7 @@ const renderPayload = function (_ref) {
 const MultipleEmailInput = _ref => {
   var _head;
   let emails = _ref.emails,
+    innerRef = _ref.innerRef,
     selectedMember = _ref.selectedMember;
   return /*#__PURE__*/e__default["default"].createElement("div", {
     className: "neeto-ui-w-full"
@@ -9718,7 +9669,8 @@ const MultipleEmailInput = _ref => {
     helpText: instance.t("helpers.enterMultipleEmails"),
     label: `${instance.t("common.email", PLURAL)}*`,
     name: "emails",
-    placeholder: instance.t("placeholders.email")
+    placeholder: instance.t("placeholders.email"),
+    ref: innerRef
   }));
 };
 MultipleEmailInput.defaultProps = {
@@ -9782,7 +9734,10 @@ const ManageMember = _ref => {
     hasSubmitted = _useState2[0],
     setHasSubmitted = _useState2[1];
   const formReference = e$1.useRef(null);
-  const manageMemberComponentConfig = _objectSpread$2(_objectSpread$2({}, DEFAULT_COMPONENT_CONFIG), componentConfig);
+  const emailInputReference = e$1.useRef(null);
+  const manageMemberComponentConfig = _objectSpread$2(_objectSpread$2({}, DEFAULT_COMPONENT_CONFIG), {}, {
+    initialFocusRef: emailInputReference
+  }, componentConfig);
   const Component = MEMBERS_FORM_COMPONENT_MAPPER[manageMemberComponentConfig.type || "pane"];
   const handleClose = () => {
     onComplete();
@@ -9843,7 +9798,8 @@ const ManageMember = _ref => {
     "data-cy": "ntm-manage-members-pane-wrapper",
     isOpen: manageMemberComponentConfig.isOpen,
     onClose: handleClose,
-    className: manageMemberComponentConfig.className
+    className: manageMemberComponentConfig.className,
+    initialFocusRef: manageMemberComponentConfig.initialFocusRef
   }, /*#__PURE__*/e__default["default"].createElement(Component.Header, manageMemberComponentConfig.headerProps, /*#__PURE__*/e__default["default"].createElement(neetoui.Typography, {
     className: "ntm-members-form__header",
     "data-cy": "ntm-manage-members-pane-header",
@@ -9869,6 +9825,7 @@ const ManageMember = _ref => {
       className: ie__default["default"](["ntm-members-form__body", (_manageMemberComponen = manageMemberComponentConfig.bodyProps) === null || _manageMemberComponen === void 0 ? void 0 : _manageMemberComponen.className])
     }), /*#__PURE__*/e__default["default"].createElement(MultipleEmailInput, {
       emails: emails,
+      innerRef: emailInputReference,
       selectedMember: selectedMember
     }), /*#__PURE__*/e__default["default"].createElement(RolesRadioGroup, {
       role: role,
@@ -9928,7 +9885,7 @@ const useFilters = _ref => {
     _useState2 = _slicedToArray(_useState, 2),
     filters = _useState2[0],
     setFilters = _useState2[1];
-  const debouncedSearch = useDebounce(filters.search, 750);
+  const debouncedSearch = reactUtils.useDebounce(filters.search, 750);
   const shouldFetchFilterOptions = ramda.isNil(config === null || config === void 0 ? void 0 : config.filterColumns);
   const _useFetchFilterOption = useFetchFilterOptions({
       options: {
@@ -10016,7 +9973,11 @@ const TeamMembers = _ref => {
     roles = _useFetchRoles.data,
     isRolesLoading = _useFetchRoles.isLoading;
   const _useUpdateMember = useUpdateMember({
-      onSuccess: () => handleAlertClose()
+      onSuccess: () => {
+        var _config$updateMember, _config$updateMember$;
+        handleAlertClose();
+        config === null || config === void 0 ? void 0 : (_config$updateMember = config.updateMember) === null || _config$updateMember === void 0 ? void 0 : (_config$updateMember$ = _config$updateMember.onSuccess) === null || _config$updateMember$ === void 0 ? void 0 : _config$updateMember$.callback();
+      }
     }),
     updateMember = _useUpdateMember.mutate,
     isUpdatingMember = _useUpdateMember.isLoading;
@@ -10225,7 +10186,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  --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}";
+var css = ":root {\n  --ntm-roles-table-default-scroll: 15px;\n  --ntm-roles-table-cell-height: 68px;\n  --ntm-roles-sidebar-width: 396px;\n  --ntm-roles-table-header-height: 72px;\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\ntd.ant-table-column-sort {\n  background: transparent;\n}\n\n.ntm-empty-state {\n  width: 100%;\n  height: 100%;\n  display: flex;\n  align-items: center;\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-table__wrapper {\n  width: 100%;\n  height: calc(100vh - var(--neeto-ui-main-header-with-breadcrumbs-height));\n  display: flex;\n  padding: 0 1.5rem;\n}\n\n.ntm-roles-table__sidebar {\n  width: var(--ntm-roles-sidebar-width);\n  min-width: var(--ntm-roles-sidebar-width);\n  border-right: thin solid rgb(var(--neeto-ui-gray-300));\n  border-left: thin solid rgb(var(--neeto-ui-gray-300));\n  border-top: thin solid rgb(var(--neeto-ui-gray-300));\n}\n\n.ntm-roles-table-sidebar__search {\n  padding: 20px 24px;\n  height: var(--ntm-roles-table-header-height);\n}\n\n.ntm-roles-table-sidebar__list {\n  height: calc(\n    100vh - var(--neeto-ui-main-header-with-breadcrumbs-height) - var(\n        --ntm-roles-table-header-height\n      ) - var(--ntm-roles-table-default-scroll)\n  );\n  overflow-y: auto;\n}\n\n.ntm-roles-table-sidebar__list-item {\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  padding: 12px 24px;\n  min-height: var(--ntm-roles-table-cell-height);\n}\n.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 24px;\n}\n.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\n.ntm-roles-table__columns {\n  width: calc(\n    100vw - var(--neeto-ui-sidebar-width) - var(--ntm-roles-sidebar-width) - 24px\n  );\n  overflow: hidden;\n  border-top: thin solid rgb(var(--neeto-ui-gray-300));\n  border-bottom: thin solid rgb(var(--neeto-ui-gray-300));\n}\n\n.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\n.ntm-roles-table-cell__checkbox-wrapper {\n  position: absolute;\n  height: 1rem;\n  width: 1rem;\n  margin: auto;\n  z-index: 10;\n}\n\n.ntm-roles-table-cell__checkbox {\n  z-index: 10;\n}\n\n.ntm-roles-table__header {\n  display: flex;\n  align-items: center;\n  overflow-x: auto;\n}\n.ntm-roles-table__header .ntm-roles-table__cell {\n  height: var(--ntm-roles-table-header-height);\n  padding-left: 24px;\n}\n\n.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\n.ntm-roles-table-header__dropdown {\n  margin: 3px;\n  flex-shrink: 0;\n}\n\n.ntm-roles-table-header__role-name {\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n.ntm-roles-table__rows {\n  width: 100%;\n  height: calc(\n    100vh - var(--neeto-ui-main-header-with-breadcrumbs-height) - var(\n        --ntm-roles-table-header-height\n      ) - var(--ntm-roles-table-default-scroll)\n  );\n  overflow-y: auto;\n  scrollbar-width: none;\n}\n.ntm-roles-table__rows::-webkit-scrollbar {\n  width: 0px;\n  height: 0px;\n}\n.ntm-roles-table__rows::-webkit-scrollbar-thumb {\n  background: rgb(var(--neeto-ui-gray-300));\n  border-radius: 50px;\n}\n.ntm-roles-table__rows::-webkit-scrollbar-thumb:hover {\n  border-radius: 50px;\n}\n.ntm-roles-table__rows::-webkit-scrollbar-track {\n  background: rgb(var(--neeto-ui-gray-300));\n}\n\n.ntm-roles-table__row {\n  display: flex;\n  align-items: center;\n}\n.ntm-roles-table__row .ntm-roles-table__cell {\n  overflow: hidden;\n  position: relative;\n}\n.ntm-roles-table__row .ntm-roles-table__cell p {\n  opacity: 0;\n  width: 340px;\n  min-width: 340px;\n}\n.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__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 0;\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(css,{});
 
 exports.ManageMember = ManageMember;