@bigbinary/neeto-team-members-frontend 2.4.1 → 2.4.3

package/dist/index.esm.js

@@ -4,9 +4,9 @@ import { useFormikContext, Formik, Form } from 'formik';
 import { Typography, Button, Table as Table$1, Modal, Toastr, Tooltip, Checkbox, Pane, Dropdown, Alert, Input as Input$1, PageLoader, Avatar, Tag } from '@bigbinary/neetoui';
 import { Download, File, LeftArrow, MenuHorizontal, Up, Down, Search } from '@bigbinary/neeto-icons';
 import classnames from 'classnames';
-import { EmailInput, Input, Textarea, Select } from '@bigbinary/neetoui/formik';
+import { EmailInput, Input, Textarea, Radio } from '@bigbinary/neetoui/formik';
 import axios from 'axios';
-import { prop, modifyPath, prepend, assocPath, findIndex, propEq, dissocPath, groupBy, keys, map, identical, modify, includes, fromPairs, toPairs, filter, isEmpty, clamp, toLower, mergeLeft, isNil, pluck, head, assoc } from 'ramda';
+import { prop, modifyPath, prepend, assocPath, findIndex, propEq, dissocPath, groupBy, keys, map, identical, modify, includes, fromPairs, toPairs, filter, isEmpty, clamp, toLower, mergeLeft, isNil, pluck, head, reverse, assoc } from 'ramda';
 import { Header as Header$2, Container, MenuBar, SubHeader as SubHeader$1 } from '@bigbinary/neetoui/layouts';
 import * as yup from 'yup';
 import { object, string } from 'yup';
@@ -4124,6 +4124,7 @@ var tooltips$1 = {
 var validations$1 = {
 	enterRoleName: "Please enter a valid role name.",
 	filterInvalidEmails: "Click here to remove invalid emails.",
+	limitExceeded: "You have exceeded the limit of {{limit}} characters for the {{what}}.",
 	minOneEmail: "Please enter at least one email address.",
 	roleRequired: "Please select a role.",
 	validEmail: "Please ensure that all email addresses are valid."
@@ -4224,7 +4225,9 @@ var tooltips = {
 	noPermissionToRemoveRoles: "Veuillez demander à l'administrateur de vous autoriser à supprimer des rôles."
 };
 var validations = {
+	enterRoleName: "Veuillez entrer le nom du rôle",
 	filterInvalidEmails: "Cliquez ici pour supprimer les e-mails invalides.",
+	limitExceeded: "Vous avez dépassé la limite de {{limit}} caractères pour le {{what}}.",
 	minOneEmail: "Veuillez saisir au moins une adresse e-mail.",
 	roleRequired: "Veuillez sélectionner un rôle.",
 	validEmail: "Veuillez vous assurer que toutes les adresses e-mail sont valides."
@@ -4289,6 +4292,12 @@ const getScrollBarWidth = () => {
   return w1 - w2;
 };
 const noop$2 = () => {};
+const slugify = string => string.toString().toLowerCase().replace(/\s+/g, "-") // Replace spaces with -
+.replace(/&/g, "-and-") // Replace & with 'and'
+.replace(/[^\w-]+/g, "") // Remove all non-word characters
+.replace(/--+/g, "-") // Replace multiple - with single -
+.replace(/^-+/, "") // Trim - from start of text
+.replace(/-+$/, ""); // Trim - from end of text
 
 function _extends() {
   _extends = Object.assign ? Object.assign.bind() : function (target) {
@@ -8238,6 +8247,8 @@ function pickerOptionsFromAccept(accept) {
       return _objectSpread$9(_objectSpread$9({}, agg), {}, _defineProperty$1({}, mimeType, ext));
     }, {});
     return [{
+      // description is required due to https://crbug.com/1264708
+      description: "Files",
       accept: acceptForPicker
     }];
   }
@@ -11167,14 +11178,15 @@ var dist = {exports: {}};
 } (dist));
 
 const renderSearchProps = (searchString, setSearchString) => ({
-  placeholder: instance.t("common.search_", {
-    what: instance.t("common.role", PLURAL).toLocaleLowerCase()
-  }),
-  value: searchString,
+  "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, membersPageUrl) => breadcrumbs !== null && breadcrumbs !== void 0 ? breadcrumbs : [{
   text: instance.t("metaNames.member", PLURAL),
@@ -11192,12 +11204,12 @@ const AddRoleButton = _ref => {
     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.createElement("span", null, /*#__PURE__*/React.createElement(Button, {
+    "data-cy": "ntm-add-role-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: t("common.add_", {
       what: t("common.role", SINGULAR).toLocaleLowerCase()
     }),
-    onClick: onClick,
-    disabled: !((_permissions$create2 = permissions === null || permissions === void 0 ? void 0 : permissions.create) !== null && _permissions$create2 !== void 0 ? _permissions$create2 : hasPermission(MANAGE_MEMBER_PERMISSIONS)),
-    "data-cy": "new-role-button"
+    onClick: onClick
   })));
 };
 
@@ -11238,10 +11250,13 @@ const ADD_ROLE_FORM_INITIAL_VALUES = {
   permissionIds: []
 };
 const ADD_ROLE_FORM_VALIDATION_SCHEMA = object({
-  name: string().trim().required(instance.t("validations.enterRoleName")),
+  name: string().trim().max(40, instance.t("validations.limitExceeded", {
+    what: instance.t("common.name").toLocaleLowerCase(),
+    limit: 40
+  })).required(instance.t("validations.enterRoleName")),
   description: string().trim().max(255, instance.t("validations.limitExceeded", {
-    what: instance.t("common.description"),
-    count: 255
+    what: instance.t("common.description").toLocaleLowerCase(),
+    limit: 255
   }))
 });
 
@@ -11273,10 +11288,11 @@ const Permissions = _ref => {
     className: "ntm-roles-permission",
     key: category
   }, /*#__PURE__*/React.createElement(Typography, {
-    style: "h5",
-    weight: "bold",
+    className: "ntm-roles-permission__heading",
+    "data-cy": "ntm-roles-permission-category-title",
     lineHeight: "normal",
-    className: "ntm-roles-permission__heading"
+    style: "h5",
+    weight: "bold"
   }, category), groupedPermissions[category].map(_ref2 => {
     let id = _ref2.id,
       description = _ref2.description;
@@ -11285,12 +11301,14 @@ const Permissions = _ref => {
       onClick: () => handleTogglePermission(id),
       className: "ntm-roles-permission__card"
     }, /*#__PURE__*/React.createElement(Typography, {
-      style: "body2",
+      "data-cy": "ntm-roles-permission-name",
       className: "ntm-roles-permission__card--description",
-      lineHeight: "normal"
+      lineHeight: "normal",
+      style: "body2"
     }, description), /*#__PURE__*/React.createElement("div", {
       className: "ntm-roles-permission__card--checkbox"
     }, /*#__PURE__*/React.createElement(Checkbox, {
+      "data-cy": "ntm-roles-permission-checkbox",
       checked: permissionIds.some(pid => pid === id),
       onChange: () => handleTogglePermission(id)
     })));
@@ -11322,6 +11340,7 @@ const New = _ref => {
     isOpen: isOpen,
     onClose: onClose
   }, /*#__PURE__*/React.createElement(Pane.Header, null, /*#__PURE__*/React.createElement(Typography, {
+    "data-cy": "ntm-add-role-title",
     style: "h2"
   }, t("common.add_", {
     what: t("common.role", SINGULAR).toLocaleLowerCase()
@@ -11341,15 +11360,18 @@ const New = _ref => {
       className: "ntm-roles-pane__body-wrapper"
     }, /*#__PURE__*/React.createElement(Input, {
       required: true,
+      "data-cy": "ntm-add-role-name-text-field",
+      label: t("common.name"),
       maxLength: 40,
       name: "name",
-      label: t("common.name"),
       placeholder: t("placeholders.enter_", {
         what: t("common.name").toLocaleLowerCase()
       })
     }), /*#__PURE__*/React.createElement(Textarea, {
-      name: "description",
+      "data-cy": "ntm-add-role-description-text-field",
       label: t("common.description"),
+      maxLength: 255,
+      name: "description",
       placeholder: t("placeholders.enter_", {
         what: t("common.description").toLocaleLowerCase()
       })
@@ -11358,14 +11380,16 @@ const New = _ref => {
     }))), /*#__PURE__*/React.createElement(Pane.Footer, null, /*#__PURE__*/React.createElement("div", {
       className: "ntm-roles-pane__footer"
     }, /*#__PURE__*/React.createElement(Button, {
-      label: t("buttons.saveChanges"),
+      "data-cy": "ntm-add-role-submit-button",
       disabled: !dirty || isSubmitting,
-      type: "submit",
-      loading: isSubmitting
+      label: t("buttons.saveChanges"),
+      loading: isSubmitting,
+      type: "submit"
     }), /*#__PURE__*/React.createElement(Button, {
-      style: "text",
+      "data-cy": "ntm-add-role-cancel-button",
       label: t("buttons.cancel"),
-      onClick: onClose
+      onClick: onClose,
+      style: "text"
     }))));
   }));
 };
@@ -11471,16 +11495,17 @@ const EmptyState = _ref => {
     _ref$actionBlock = _ref.actionBlock,
     actionBlock = _ref$actionBlock === void 0 ? null : _ref$actionBlock;
   return /*#__PURE__*/React.createElement("div", {
-    "data-cy": "empty-state-container",
-    className: classnames(["ntm-empty-state", className])
+    className: classnames(["ntm-empty-state", className]),
+    "data-cy": "ntm-empty-state-container"
   }, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", {
-    "data-cy": "empty-state-image-container",
-    className: "ntm-empty-state__image"
+    className: "ntm-empty-state__image",
+    "data-cy": "ntm-empty-state-image-container"
   }, /*#__PURE__*/React.createElement(EmptyStateSVG, null)), /*#__PURE__*/React.createElement(Typography, {
+    className: classnames([!!actionBlock && "ntm-empty-state__title--with-action-block"]),
     component: "h2",
+    "data-cy": "ntm-empty-state-title",
     style: "h2",
-    weight: "semibold",
-    className: classnames([!!actionBlock && "ntm-empty-state__title--with-action-block"])
+    weight: "semibold"
   }, title), !!actionBlock && /*#__PURE__*/React.createElement("div", {
     className: "ntm-empty-state__action-block"
   }, actionBlock)));
@@ -11532,17 +11557,15 @@ const Row = _ref => {
     }, /*#__PURE__*/React.createElement("div", {
       className: "ntm-roles-table-cell__checkbox-wrapper"
     }, /*#__PURE__*/React.createElement(Checkbox, {
+      checked: isCheckboxChecked(role),
       className: "ntm-roles-table-cell__checkbox",
+      "data-cy": "ntm-roles-table-permission-checkbox",
       disabled: identical(role.name, "Admin") || !((_config$permissions$u2 = config === null || config === void 0 ? void 0 : (_config$permissions2 = config.permissions) === null || _config$permissions2 === void 0 ? void 0 : _config$permissions2.update) !== null && _config$permissions$u2 !== void 0 ? _config$permissions$u2 : DEFAULT_PERMISSION),
-      checked: isCheckboxChecked(role),
       onChange: _ref2 => {
         let checked = _ref2.target.checked;
         return handleSubmit(role, checked);
       }
-    }))), /*#__PURE__*/React.createElement(Typography, {
-      style: "body2",
-      lineHeight: "normal"
-    }, permission === null || permission === void 0 ? void 0 : permission.description));
+    }))));
   }));
 };
 
@@ -11578,15 +11601,17 @@ const TableHeader = _ref => {
     }, /*#__PURE__*/React.createElement("div", {
       className: "ntm-roles-table-header-cell__container"
     }, /*#__PURE__*/React.createElement(Typography, {
-      style: "h4",
-      weight: "semibold",
+      className: "ntm-roles-table-header__role-name",
+      "data-cy": "ntm-roles-table-header-role-title",
       lineHeight: "normal",
-      className: "ntm-roles-table-header__role-name"
+      style: "h4",
+      weight: "semibold"
     }, role.name), !hasSystemRole && /*#__PURE__*/React.createElement(Dropdown, {
+      autoWidth: true,
       buttonProps: {
-        className: "ntm-roles-table-header__dropdown"
+        className: "ntm-roles-table-header__dropdown",
+        "data-cy": "ntm-roles-table-header-role-dropdown-button"
       },
-      autoWidth: true,
       buttonStyle: "text",
       icon: MenuHorizontal
     }, /*#__PURE__*/React.createElement(Menu, null, /*#__PURE__*/React.createElement(Tooltip, {
@@ -11594,27 +11619,29 @@ const TableHeader = _ref => {
       disabled: (_config$permissions$u = config === null || config === void 0 ? void 0 : (_config$permissions = config.permissions) === null || _config$permissions === void 0 ? void 0 : _config$permissions.update) !== null && _config$permissions$u !== void 0 ? _config$permissions$u : DEFAULT_PERMISSION,
       position: "left"
     }, /*#__PURE__*/React.createElement("span", null, /*#__PURE__*/React.createElement(MenuItem.Button, {
-      size: "small",
+      className: "ntm-dropdown__button",
+      disabled: !((_config$permissions$u2 = config === null || config === void 0 ? void 0 : (_config$permissions2 = config.permissions) === null || _config$permissions2 === void 0 ? void 0 : _config$permissions2.update) !== null && _config$permissions$u2 !== void 0 ? _config$permissions$u2 : DEFAULT_PERMISSION),
+      "data-cy": "ntm-roles-table-edit-role-button",
       onClick: () => setManageRole({
         isEdit: true,
         selectedRole: role
       }),
-      disabled: !((_config$permissions$u2 = config === null || config === void 0 ? void 0 : (_config$permissions2 = config.permissions) === null || _config$permissions2 === void 0 ? void 0 : _config$permissions2.update) !== null && _config$permissions$u2 !== void 0 ? _config$permissions$u2 : DEFAULT_PERMISSION),
-      style: "text",
-      className: "ntm-dropdown__button"
+      size: "small",
+      style: "text"
     }, t("common.edit")))), /*#__PURE__*/React.createElement(Tooltip, {
       content: t("tooltips.noPermissionToRemoveRoles"),
       disabled: (_config$permissions$d = config === null || config === void 0 ? void 0 : (_config$permissions3 = config.permissions) === null || _config$permissions3 === void 0 ? void 0 : _config$permissions3.delete) !== null && _config$permissions$d !== void 0 ? _config$permissions$d : DEFAULT_PERMISSION,
       position: "left"
     }, /*#__PURE__*/React.createElement("span", null, /*#__PURE__*/React.createElement(MenuItem.Button, {
-      size: "small",
+      className: "ntm-dropdown__button",
+      "data-cy": "ntm-roles-table-delete-role-button",
+      disabled: !((_config$permissions$d2 = config === null || config === void 0 ? void 0 : (_config$permissions4 = config.permissions) === null || _config$permissions4 === void 0 ? void 0 : _config$permissions4.delete) !== null && _config$permissions$d2 !== void 0 ? _config$permissions$d2 : DEFAULT_PERMISSION),
       onClick: () => setManageRole({
         isDelete: true,
         selectedRole: role
       }),
-      disabled: !((_config$permissions$d2 = config === null || config === void 0 ? void 0 : (_config$permissions4 = config.permissions) === null || _config$permissions4 === void 0 ? void 0 : _config$permissions4.delete) !== null && _config$permissions$d2 !== void 0 ? _config$permissions$d2 : DEFAULT_PERMISSION),
-      style: "danger",
-      className: "ntm-dropdown__button"
+      size: "small",
+      style: "danger"
     }, t("common.delete"))))))));
   })));
 };
@@ -11698,6 +11725,7 @@ const Edit = _ref => {
     return /*#__PURE__*/React.createElement(Form, {
       noValidate: true
     }, /*#__PURE__*/React.createElement(Modal.Header, null, /*#__PURE__*/React.createElement(Typography, {
+      "data-cy": "ntm-update-role-title",
       style: "h2"
     }, t("common.update_", {
       what: t("common.role", SINGULAR).toLocaleLowerCase()
@@ -11705,25 +11733,30 @@ const Edit = _ref => {
       className: "ntm-roles-modal__body"
     }, /*#__PURE__*/React.createElement(Input, {
       required: true,
-      name: "name",
+      "data-cy": "ntm-update-role-name-text-field",
       label: t("common.name"),
-      placeholder: t("placeholders.enterRoleName"),
-      maxLength: 40
+      maxLength: 40,
+      name: "name",
+      placeholder: t("placeholders.enterRoleName")
     }), /*#__PURE__*/React.createElement(Textarea, {
-      name: "description",
+      "data-cy": "ntm-update-role-description-text-field",
       label: t("common.description"),
+      maxLength: 255,
+      name: "description",
       placeholder: t("placeholders.enterDescription")
     }))), /*#__PURE__*/React.createElement(Modal.Footer, null, /*#__PURE__*/React.createElement("div", {
       className: "ntm-roles-modal__footer"
     }, /*#__PURE__*/React.createElement(Button, {
-      type: "submit",
+      "data-cy": "ntm-update-role-submit-button",
       disabled: !dirty || isSubmitting,
       label: t("buttons.saveChanges"),
-      loading: isSubmitting
+      loading: isSubmitting,
+      type: "submit"
     }), /*#__PURE__*/React.createElement(Button, {
-      style: "text",
+      "data-cy": "ntm-update-role-cancel-button",
       label: t("buttons.cancel"),
-      onClick: onClose
+      onClick: onClose,
+      style: "text"
     }))));
   }));
 };
@@ -11785,6 +11818,7 @@ const renderDescription = permissions => permissions === null || permissions ===
     key: id,
     className: "ntm-roles-table-sidebar__list-item"
   }, /*#__PURE__*/React.createElement(Typography, {
+    "data-cy": "ntm-permission-category-description",
     style: "body2",
     lineHeight: "normal"
   }, description));
@@ -11801,15 +11835,17 @@ const ToggleDropdown = _ref => {
   let isVisible = _ref.isVisible,
     onClick = _ref.onClick;
   return isVisible ? /*#__PURE__*/React.createElement(Up, {
-    size: 16,
-    strokeWidth: 2,
+    "data-cy": "ntm-permission-category-hide-button",
     className: "ntm-roles-table-sidebar__drop-down-button",
-    onClick: onClick
-  }) : /*#__PURE__*/React.createElement(Down, {
+    onClick: onClick,
     size: 16,
-    strokeWidth: 2,
+    strokeWidth: 2
+  }) : /*#__PURE__*/React.createElement(Down, {
+    "data-cy": "ntm-permission-category-show-button",
     className: "ntm-roles-table-sidebar__drop-down-button",
-    onClick: onClick
+    onClick: onClick,
+    size: 16,
+    strokeWidth: 2
   });
 };
 
@@ -11829,16 +11865,17 @@ const Sidebar = _ref => {
     className: "ntm-roles-table-sidebar__search",
     style: searchWrapperStyle
   }, /*#__PURE__*/React.createElement(Input$1, {
-    type: "search",
-    placeholder: t("common.search_", {
-      what: t("common.permission", PLURAL).toLocaleLowerCase()
-    }),
-    value: searchTerm,
+    "data-cy": "ntm-search-permissions-input",
     onChange: _ref2 => {
       let value = _ref2.target.value;
       return setSearchTerm(value);
     },
-    prefix: /*#__PURE__*/React.createElement(Search, null)
+    placeholder: t("common.search_", {
+      what: t("common.permission", PLURAL).toLocaleLowerCase()
+    }),
+    prefix: /*#__PURE__*/React.createElement(Search, null),
+    type: "search",
+    value: searchTerm
   })), /*#__PURE__*/React.createElement(dist.exports.ScrollSyncPane, {
     group: "vertical"
   }, /*#__PURE__*/React.createElement("div", {
@@ -11851,9 +11888,10 @@ const Sidebar = _ref => {
     }, /*#__PURE__*/React.createElement("div", {
       className: "ntm-roles-table-sidebar__list-item ntm-roles-table-sidebar__list-item--highlighted"
     }, /*#__PURE__*/React.createElement(Typography, {
+      "data-cy": "ntm-permission-category-title",
+      lineHeight: "normal",
       style: "h4",
-      weight: "semibold",
-      lineHeight: "normal"
+      weight: "semibold"
     }, category), /*#__PURE__*/React.createElement(ToggleDropdown, {
       isVisible: isPermissionsVisible,
       onClick: () => toggleDropdown(category)
@@ -12060,10 +12098,11 @@ const Header = _ref => {
     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.createElement("span", null, /*#__PURE__*/React.createElement(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: instance.t(metaName, SINGULAR).toLocaleLowerCase()
     }),
-    disabled: !((_permissions$create2 = permissions === null || permissions === void 0 ? void 0 : permissions.create) !== null && _permissions$create2 !== void 0 ? _permissions$create2 : hasPermission(MANAGE_MEMBER_PERMISSIONS)),
     onClick: onClick
   })));
 };
@@ -12072,8 +12111,9 @@ const Left = _ref => {
   let metaName = _ref.metaName,
     count = _ref.count;
   return /*#__PURE__*/React.createElement(Typography, {
-    style: "h4",
-    component: "h4"
+    "data-cy": "ntm-filtered-members-count",
+    component: "h4",
+    style: "h4"
   }, count, " ", instance.t(metaName, {
     count
   }).toLocaleLowerCase());
@@ -12088,11 +12128,12 @@ const Right = _ref2 => {
   const permissions = window.globalProps.permissions;
   const hasRequiredPermissions = permissions && hasPermission(MANAGE_MEMBER_PERMISSIONS);
   return isVisible && hasRequiredPermissions ? /*#__PURE__*/React.createElement(Button, _extends({
-    size: "small",
-    style: "secondary",
+    "data-cy": "ntm-manage-roles-button",
     label: instance.t("common.manage_", {
       what: instance.t("common.role", PLURAL).toLocaleLowerCase()
-    })
+    }),
+    size: "small",
+    style: "secondary"
   }, rolesButtonProps)) : null;
 };
 const SubHeader = {
@@ -12124,6 +12165,7 @@ const DEFAULT_MEMBER_FILTER = MEMBER_FILTER.ACTIVE.value;
 const DEFAULT_PAGE_NUMBER = 1;
 const DEFAULT_PAGE_SIZE = 10;
 const DROPDOWN_BUTTON_PROPS = {
+  "data-cy": "ntm-members-table-row-dropdown-button",
   size: "medium"
 };
 const DEFAULT_IS_OPEN_VALUES = {
@@ -12155,9 +12197,10 @@ const renderNameColumn = (_ref, diplayStatusTag) => {
     },
     size: "medium"
   }), displayName, diplayStatusTag && /*#__PURE__*/React.createElement(Tag, {
-    type: "outline",
+    "data-cy": "ntm-member-status-tag",
+    label: active ? MEMBER_FILTER.ACTIVE.label : MEMBER_FILTER.DEACTIVATED.label,
     style: active ? "primary" : "secondary",
-    label: active ? MEMBER_FILTER.ACTIVE.label : MEMBER_FILTER.DEACTIVATED.label
+    type: "outline"
   }));
 };
 const isDropDownButtonDisabled = permissions => {
@@ -12187,23 +12230,25 @@ const renderDropdownButton = (_ref2, handleUpdateStatus, handleUpdateRole, permi
     disabled: active,
     position: "top"
   }, /*#__PURE__*/React.createElement("span", null, /*#__PURE__*/React.createElement(MenuItem.Button, {
-    size: "small",
     className: "ntm-dropdown__button",
+    "data-cy": "ntm-edit-member-button",
+    disabled: !active,
     onClick: () => active && handleUpdateRole({
       id,
       email,
       role
     }),
-    disabled: !active,
+    size: "small",
     style: "text"
   }, instance.t("common.edit")))), /*#__PURE__*/React.createElement(MenuItem.Button, {
-    size: "small",
     className: "ntm-dropdown__button",
+    "data-cy": "ntm-deactivate-member-button",
     onClick: () => handleUpdateStatus({
       id,
       name: displayName,
       active
     }),
+    size: "small",
     style: active && "danger"
   }, active ? instance.t("common.deactivate") : instance.t("common.activate"))))));
 };
@@ -12372,10 +12417,12 @@ const ManageMember = _ref => {
   };
   const isSubmitting = isCreatingMember || isUpdatingMember;
   return /*#__PURE__*/React.createElement(Pane, {
+    "data-cy": "ntm-manage-members-pane-wrapper",
     isOpen: isOpen,
     onClose: onPaneClose
   }, /*#__PURE__*/React.createElement(Pane.Header, null, /*#__PURE__*/React.createElement(Typography, {
     className: "ntm-members-pane__header",
+    "data-cy": "ntm-manage-members-pane-header",
     style: "h2",
     weight: "semibold"
   }, selectedMember ? instance.t("common.edit_", {
@@ -12391,63 +12438,69 @@ const ManageMember = _ref => {
     enableReinitialize: true
   }, _ref2 => {
     let values = _ref2.values,
-      setFieldValue = _ref2.setFieldValue,
       dirty = _ref2.dirty;
     const emails = values.emails,
       role = values.role;
-    const roleValue = role && {
-      label: role,
-      value: role
-    };
     return /*#__PURE__*/React.createElement(Form, null, /*#__PURE__*/React.createElement(Pane.Body, null, /*#__PURE__*/React.createElement("div", {
       className: "ntm-members-pane__body"
     }, selectedMember ? /*#__PURE__*/React.createElement(Input, {
+      "data-cy": "ntm-manage-member-email-input",
+      disabled: selectedMember,
+      label: instance.t("common.email", SINGULAR),
       name: "emails",
-      "data-cy": "add-member-email-text-field",
       size: "medium",
-      label: instance.t("common.email", SINGULAR),
-      value: head(emails).value,
-      disabled: selectedMember
+      value: head(emails).value
     }) : /*#__PURE__*/React.createElement(EmailInput, {
-      name: "emails",
-      "data-cy": "add-member-email-input",
       counter: COUNTER_PROPS,
-      filterInvalidEmails: FILTER_INVALID_EMAILS,
+      "data-cy": "ntm-manage-member-email-input",
       disabled: selectedMember,
+      filterInvalidEmails: FILTER_INVALID_EMAILS,
+      helpText: instance.t("helpers.enterMultipleEmails"),
       label: `${instance.t("common.email", PLURAL)}*`,
-      placeholder: instance.t("placeholders.email"),
-      helpText: instance.t("helpers.enterMultipleEmails")
-    }), /*#__PURE__*/React.createElement(Select, {
-      required: true,
-      name: "role",
-      "data-cy": "add-member-role-select",
-      size: "medium",
-      label: instance.t("common.role", SINGULAR),
-      placeholder: instance.t("placeholders.role"),
-      value: roleValue,
-      onChange: _ref3 => {
-        let value = _ref3.value;
-        return setFieldValue("role", value);
-      },
-      options: roles.map(role => ({
-        label: role,
-        value: role
-      }))
-    }))), /*#__PURE__*/React.createElement(Pane.Footer, {
+      name: "emails",
+      placeholder: instance.t("placeholders.email")
+    }), /*#__PURE__*/React.createElement(Radio, {
+      className: "ntm-members-radio-group",
+      stacked: true,
+      "data-cy": "ntm-manage-member-roles-group",
+      label: `${instance.t("common.role", SINGULAR)}*`,
+      name: "role"
+    }, roles.map(_ref3 => {
+      let description = _ref3.description,
+        name = _ref3.name;
+      return /*#__PURE__*/React.createElement("label", {
+        className: "ntm-members-pane-radio-item__wrapper",
+        htmlFor: name,
+        key: name
+      }, /*#__PURE__*/React.createElement(Radio.Item, {
+        checked: name === role,
+        className: "ntm-members-pane-radio-item__label",
+        "data-cy": "ntm-manage-member-roles-button",
+        id: name,
+        label: name,
+        name: "role",
+        value: name
+      }), /*#__PURE__*/React.createElement(Typography, {
+        className: "neeto-ui-input__help-text",
+        "data-cy": "ntm-manage-member-roles-description",
+        style: "body3",
+        weight: "normal"
+      }, description));
+    })))), /*#__PURE__*/React.createElement(Pane.Footer, {
       className: "ntm-members-pane__footer"
     }, /*#__PURE__*/React.createElement(Button, {
-      type: "submit",
-      "data-cy": "add-member-submit-button",
-      style: "primary",
+      "data-cy": "ntm-manage-member-submit-button",
+      disabled: !dirty || isSubmitting,
       label: instance.t("buttons.saveChanges"),
+      loading: isSubmitting,
       onClick: () => setHasSubmitted(true),
-      disabled: !dirty || isSubmitting,
-      loading: isSubmitting
+      style: "primary",
+      type: "submit"
     }), /*#__PURE__*/React.createElement(Button, {
-      "data-cy": "add-member-cancel-button",
-      style: "text",
+      "data-cy": "ntm-manage-member-cancel-button",
       label: instance.t("buttons.cancel"),
-      onClick: onPaneClose
+      onClick: onPaneClose,
+      style: "text"
     })));
   }));
 };
@@ -12460,13 +12513,15 @@ const Menu = _ref => {
     handleMemberFilterChange = _ref.handleMemberFilterChange;
   const memberFilterKeys = keys(MEMBER_FILTER);
   return /*#__PURE__*/React.createElement(MenuBar, {
+    "data-cy": "ntm-members-menubar-heading",
     showMenu: isMenuOpen,
     title: instance.t(metaName, PLURAL)
   }, memberFilterKeys.map(filter => /*#__PURE__*/React.createElement(MenuBar.Block, {
+    active: memberFilterKeys.includes(memberFilter) && identical(filter, memberFilter),
     count: getPerCategoryCount(filterCounts, filter),
+    "data-cy": `ntm-members-menubar-${slugify(filter)}-block`,
     key: filter,
     label: MEMBER_FILTER[filter].label,
-    active: memberFilterKeys.includes(memberFilter) && identical(filter, memberFilter),
     onClick: () => handleMemberFilterChange(filter)
   })));
 };
@@ -12501,8 +12556,8 @@ const TeamMembers = _ref => {
     isMembersFetching = _useFetchMembers.isFetching;
   const _useFetchRoles = useFetchRoles({
       select: response => {
-        const roles = response.organizationRoles || response.data.organizationRoles;
-        return pluck("name", roles).sort((a, b) => a.localeCompare(b));
+        var _ref2;
+        return reverse((_ref2 = response.organizationRoles || response.data.organizationRoles) !== null && _ref2 !== void 0 ? _ref2 : []);
       },
       enabled: (_config$permissions$v2 = config === null || config === void 0 ? void 0 : (_config$permissions2 = config.permissions) === null || _config$permissions2 === void 0 ? void 0 : _config$permissions2.view) !== null && _config$permissions$v2 !== void 0 ? _config$permissions$v2 : DEFAULT_PERMISSION
     }),
@@ -12514,17 +12569,18 @@ const TeamMembers = _ref => {
     updateMember = _useUpdateMember.mutate,
     isUpdatingMember = _useUpdateMember.isLoading;
   const searchProps = {
-    placeholder: instance.t("common.search_", {
-      what: instance.t(metaName, PLURAL).toLocaleLowerCase()
-    }),
-    value: filters.search,
-    onChange: _ref2 => {
-      let value = _ref2.target.value;
+    "data-cy": "ntm-search-members-input",
+    onChange: _ref3 => {
+      let value = _ref3.target.value;
       return setFilters(mergeLeft({
         search: value,
         page: DEFAULT_PAGE_NUMBER
       }));
-    }
+    },
+    placeholder: instance.t("common.search_", {
+      what: instance.t(metaName, PLURAL).toLocaleLowerCase()
+    }),
+    value: filters.search
   };
   const updateMemberAlertProps = {
     member: selectedMember,
@@ -12606,22 +12662,23 @@ const TeamMembers = _ref => {
     className: "ntm-members__table-wrapper"
   }, /*#__PURE__*/React.createElement(Table$1, {
     fixedHeight: true,
-    totalCount: team === null || team === void 0 ? void 0 : team.membersCount,
     allowRowClick: false,
-    rowSelection: false,
-    loading: isMembersFetching,
-    defaultPageSize: parseInt(filters.results, DEFAULT_RADIX),
-    rowData: team === null || team === void 0 ? void 0 : team.members,
     columnData: getColumnData({
       memberFilter: filters.category,
       handleUpdateStatus,
       handleUpdateRole,
       permissions: config === null || config === void 0 ? void 0 : config.permissions
     }),
-    onChange: (_, __, sorter) => handleTableChange(_, __, sorter),
     currentPageNumber: parseInt(filters.page, DEFAULT_RADIX),
+    "data-cy": "ntm-members-table",
+    defaultPageSize: parseInt(filters.results, DEFAULT_RADIX),
+    handlePageChange: handlePageChange(setFilters, filters.category),
+    loading: isMembersFetching,
+    onChange: (_, __, sorter) => handleTableChange(_, __, sorter),
     paginationProps: renderPaginationProps(filters.results),
-    handlePageChange: handlePageChange(setFilters, filters.category)
+    rowData: team === null || team === void 0 ? void 0 : team.members,
+    rowSelection: false,
+    totalCount: team === null || team === void 0 ? void 0 : team.membersCount
   })) : /*#__PURE__*/React.createElement(EmptyState, {
     title: instance.t("common.notFound_", {
       what: instance.t(metaName, PLURAL).toLocaleLowerCase()
@@ -12662,7 +12719,7 @@ var index = withReactQuery(TeamMembers);
 
 var e=[],t=[];function n(n,r){if(n&&"undefined"!=typeof document){var a,s=!0===r.prepend?"prepend":"append",d=!0===r.singleTag,i="string"==typeof r.container?document.querySelector(r.container):document.getElementsByTagName("head")[0];if(d){var u=e.indexOf(i);-1===u&&(u=e.push(i)-1,t[u]={}),a=t[u]&&t[u][s]?t[u][s]:t[u][s]=c();}else a=c();65279===n.charCodeAt(0)&&(n=n.substring(1)),a.styleSheet?a.styleSheet.cssText+=n:a.appendChild(document.createTextNode(n));}function c(){var e=document.createElement("style");if(e.setAttribute("type","text/css"),r.attributes)for(var t=Object.keys(r.attributes),n=0;n<t.length;n++)e.setAttribute(t[n],r.attributes[t[n]]);var a="prepend"===s?"afterbegin":"beforeend";return i.insertAdjacentElement(a,e),e}}
 
-var css = ":root {\n  --ntm-roles-table-default-scroll: 15px;\n}\n\n.ntm-dropdown__button {\n  border-radius: 0 !important;\n  font-weight: var(--neeto-ui-font-normal);\n  min-height: 34px;\n  min-width: 150px;\n  text-align: left;\n  width: 100%;\n}\n\n.ntm-scrollbar__inner {\n  width: 100%;\n  height: 200px;\n}\n.ntm-scrollbar__outer {\n  position: \"absolute\";\n  top: 0px;\n  left: 0px;\n  width: 200px;\n  height: 150px;\n  overflow: \"hidden\";\n  visibility: \"hidden\";\n}\n\n.ntm-empty-state {\n  align-items: center;\n  display: flex;\n  height: 100%;\n  justify-content: center;\n  width: 100%;\n}\n.ntm-empty-state__image {\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  margin-bottom: 2rem;\n}\n.ntm-empty-state__title--with-action-block {\n  margin-bottom: 1rem;\n}\n.ntm-empty-state__action-block {\n  display: flex;\n  justify-content: center;\n}\n\n.ntm-members {\n  overflow: auto;\n  width: 100%;\n}\n.ntm-members-wrapper {\n  display: flex;\n}\n.ntm-members-page-loader {\n  width: 100%;\n  height: 100vh;\n}\n.ntm-members__table-wrapper {\n  height: calc(100vh - 205px);\n  width: 100%;\n}\n.ntm-members-table__column {\n  display: flex;\n  align-items: center;\n  gap: 0.5rem;\n}\n.ntm-members-pane__header {\n  margin-bottom: 0.5rem;\n}\n.ntm-members-pane__body {\n  width: 100%;\n}\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-roles-header {\n  border-bottom: 1px solid rgb(var(--neeto-ui-gray-300));\n}\n\n.ntm-roles-table__wrapper {\n  width: 100%;\n  height: calc(100vh - var(--neeto-ui-main-header-height));\n  display: flex;\n}\n.ntm-roles-table__wrapper .ntm-roles-table__sidebar {\n  width: 396px;\n  min-width: 396px;\n  border-right: thin solid rgb(var(--neeto-ui-gray-300));\n}\n.ntm-roles-table__wrapper .ntm-roles-table__sidebar .ntm-roles-table-sidebar__search {\n  padding: 24px 24px 16px;\n  height: 72px;\n}\n.ntm-roles-table__wrapper .ntm-roles-table__sidebar .ntm-roles-table-sidebar__list {\n  height: calc(\n        100vh - var(--neeto-ui-main-header-height) - 72px -\n          var(--ntm-roles-table-default-scroll)\n      );\n  overflow-y: auto;\n  padding-left: 24px;\n}\n.ntm-roles-table__wrapper .ntm-roles-table__sidebar .ntm-roles-table-sidebar__list .ntm-roles-table-sidebar__list-item {\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  padding: 12px 8px;\n  min-height: 48px;\n}\n.ntm-roles-table__wrapper .ntm-roles-table__sidebar .ntm-roles-table-sidebar__list .ntm-roles-table-sidebar__list-item.ntm-roles-table-sidebar__list-item--highlighted {\n  background-color: rgb(var(--neeto-ui-primary-100));\n  padding: 12px 8px;\n}\n.ntm-roles-table__wrapper .ntm-roles-table__sidebar .ntm-roles-table-sidebar__list .ntm-roles-table-sidebar__list-item:not(.ntm-roles-table-sidebar__list-item--highlighted) {\n  border-bottom: thin solid rgb(var(--neeto-ui-gray-300));\n}\n.ntm-roles-table__wrapper .ntm-roles-table__columns {\n  width: calc(\n      100vw - var(--neeto-ui-sidebar-width) - 396px - 24px\n    );\n  overflow: hidden;\n}\n.ntm-roles-table__wrapper .ntm-roles-table__columns .ntm-roles-table__cell {\n  width: 100%;\n  min-width: 200px;\n  min-height: 48px;\n  padding: 12px 8px;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  border-right: thin solid rgb(var(--neeto-ui-gray-300));\n}\n.ntm-roles-table__wrapper .ntm-roles-table__columns .ntm-roles-table-cell__checkbox-wrapper {\n  position: absolute;\n  height: 1rem;\n  width: 1rem;\n  margin: auto;\n  z-index: 10;\n}\n.ntm-roles-table__wrapper .ntm-roles-table__columns .ntm-roles-table-cell__checkbox {\n  z-index: 10;\n}\n.ntm-roles-table__wrapper .ntm-roles-table__columns .ntm-roles-table__header {\n  display: flex;\n  align-items: center;\n  overflow-x: auto;\n}\n.ntm-roles-table__wrapper .ntm-roles-table__columns .ntm-roles-table__header .ntm-roles-table__cell {\n  height: 72px;\n  padding-left: 24px;\n}\n.ntm-roles-table__wrapper .ntm-roles-table__columns .ntm-roles-table__header .ntm-roles-table-header-cell__container {\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  width: 100%;\n  gap: 1rem;\n  overflow: hidden;\n}\n.ntm-roles-table__wrapper .ntm-roles-table__columns .ntm-roles-table__header .ntm-roles-table-header__dropdown {\n  margin: 3px;\n}\n.ntm-roles-table__wrapper .ntm-roles-table__columns .ntm-roles-table__header .ntm-roles-table-header__role-name {\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n.ntm-roles-table__wrapper .ntm-roles-table__columns .ntm-roles-table__rows {\n  width: 100%;\n  height: calc(\n        100vh - var(--neeto-ui-main-header-height) - 72px -\n          var(--ntm-roles-table-default-scroll)\n      );\n  overflow-y: auto;\n  scrollbar-width: none;\n}\n.ntm-roles-table__wrapper .ntm-roles-table__columns .ntm-roles-table__rows::-webkit-scrollbar {\n  width: 0px;\n  height: 0px;\n}\n.ntm-roles-table__wrapper .ntm-roles-table__columns .ntm-roles-table__rows::-webkit-scrollbar-thumb {\n  background: rgb(var(--neeto-ui-gray-300));\n  border-radius: 50px;\n}\n.ntm-roles-table__wrapper .ntm-roles-table__columns .ntm-roles-table__rows::-webkit-scrollbar-thumb:hover {\n  border-radius: 50px;\n}\n.ntm-roles-table__wrapper .ntm-roles-table__columns .ntm-roles-table__rows::-webkit-scrollbar-track {\n  background: rgb(var(--neeto-ui-gray-300));\n}\n.ntm-roles-table__wrapper .ntm-roles-table__columns .ntm-roles-table__rows .ntm-roles-table__row {\n  display: flex;\n  align-items: center;\n}\n.ntm-roles-table__wrapper .ntm-roles-table__columns .ntm-roles-table__rows .ntm-roles-table__row .ntm-roles-table__cell {\n  overflow: hidden;\n  position: relative;\n}\n.ntm-roles-table__wrapper .ntm-roles-table__columns .ntm-roles-table__rows .ntm-roles-table__row .ntm-roles-table__cell p {\n  opacity: 0;\n  width: 340px;\n  min-width: 340px;\n}\n.ntm-roles-table__wrapper .ntm-roles-table__columns .ntm-roles-table__rows .ntm-roles-table__row.ntm-roles-table__row--highlighted .ntm-roles-table__cell {\n  background-color: rgb(var(--neeto-ui-primary-100));\n}\n.ntm-roles-table__wrapper .ntm-roles-table__columns .ntm-roles-table__rows .ntm-roles-table__row:not(.ntm-roles-table__row--highlighted) .ntm-roles-table__cell {\n  border-bottom: thin solid rgb(var(--neeto-ui-gray-300));\n}\n\n.ntm-roles-table-sidebar__drop-down-button {\n  color: rgb(var(--neeto-ui-gray-600));\n  cursor: pointer;\n}\n\n.ntm-roles-modal__body > * + * {\n  margin-top: 1rem;\n}\n.ntm-roles-modal__footer {\n  display: flex;\n  gap: 0.5rem;\n}\n\n.ntm-roles-pane__body {\n  width: 100%;\n  margin-bottom: 1.5rem;\n}\n.ntm-roles-pane__body-wrapper > * + * {\n  margin-top: 1rem;\n}\n.ntm-roles-pane__body > * + * {\n  margin-top: 1.5rem;\n}\n.ntm-roles-pane__footer {\n  display: flex;\n  gap: 0.5rem;\n}\n\n.ntm-roles-permission > * + * {\n  margin: 0.5rem;\n}\n.ntm-roles-permission__heading {\n  color: rgb(var(--neeto-ui-gray-500));\n  text-transform: uppercase;\n}\n.ntm-roles-permission__card {\n  background-color: rgb(var(--neeto-ui-white));\n  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-invitations__wrapper .ntm-invitations__header {\n  height: 28px;\n}\n.ntm-invitations__wrapper .ntm-invitations__body {\n  display: flex;\n  flex-direction: column;\n}\n.ntm-invitations__wrapper .ntm-invitations__body > * {\n  margin-bottom: 8px;\n}\n.ntm-invitations__wrapper .ntm-invitations__body-header {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n}\n.ntm-invitations__wrapper .ntm-invitations__body-header div {\n  display: flex;\n  align-items: center;\n}\n.ntm-invitations__wrapper .ntm-invitations__body-header div p {\n  margin-right: 8px;\n}\n.ntm-invitations__wrapper .ntm-invitations__body .ntm-invitations__dnd {\n  color: rgb(var(--neeto-ui-gray-700));\n  background: rgb(var(--neeto-ui-gray-100));\n  padding: 20px 40px;\n  border: 1px dashed;\n  border-radius: 6px;\n  cursor: pointer;\n  counter-reset: dnd-counter;\n}\n.ntm-invitations__wrapper .ntm-invitations__body .ntm-invitations__dnd h3 {\n  margin-bottom: 8px;\n  text-align: center !important;\n}\n.ntm-invitations__wrapper .ntm-invitations__body .ntm-invitations__dnd p::before {\n  counter-increment: dnd-counter;\n  content: counter(dnd-counter) \". \";\n}\n.ntm-invitations__wrapper .ntm-invitations__body .ntm-invitations__submit-btn {\n  align-self: end !important;\n  margin-top: 16px;\n}\n.ntm-invitations__wrapper .ntm-invitations__footer {\n  background: rgb(var(--neeto-ui-gray-100));\n  margin-top: 24px;\n}\n.ntm-invitations__wrapper .ntm-invitations__footer .ntm-invitations__invite-link {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n}\n.ntm-invitations__wrapper .ntm-invitations__footer .ntm-invitations__invite-link-instructions {\n  display: flex;\n  flex-direction: column;\n  width: 50%;\n}\n.ntm-invitations__wrapper .ntm-invitations__footer .ntm-invitations__invite-link-instructions h4 {\n  margin-bottom: 8px;\n}\n.ntm-invitations__wrapper .ntm-invitations__footer .ntm-invitations__invite-link-btns {\n  display: flex;\n  align-items: center;\n  gap: 0.5rem;\n  font-weight: bold;\n}\n.ntm-invitations__wrapper .ntm-invitations__footer .ntm-invitations__invite-link-btns > button:first-child {\n  margin-right: 8px;\n}\n.ntm-invitations__wrapper .ntm-invitations__footer .ntm-invitations__invite-link-btns p {\n  font-weight: normal;\n  color: rgb(var(--neeto-ui-gray-700));\n}\n.ntm-invitations__wrapper .ntm-invitations__footer .ntm-invitations__table {\n  max-height: 192px;\n}\n.ntm-invitations__wrapper .ntm-invitations__footer .ntm-invitations__table-filename {\n  display: flex;\n  align-items: center;\n}\n.ntm-invitations__wrapper .ntm-invitations__footer .ntm-invitations__table-filename svg {\n  margin-right: 4px;\n}\n.ntm-invitations__wrapper .ntm-invitations__footer .ntm-invitations__table-status {\n  text-transform: capitalize;\n}";
+var css = ":root {\n  --ntm-roles-table-default-scroll: 15px;\n}\n\n.ntm-dropdown__button {\n  border-radius: 0 !important;\n  font-weight: var(--neeto-ui-font-normal);\n  min-height: 34px;\n  min-width: 150px;\n  text-align: left;\n  width: 100%;\n}\n\n.ntm-scrollbar__inner {\n  width: 100%;\n  height: 200px;\n}\n.ntm-scrollbar__outer {\n  position: \"absolute\";\n  top: 0px;\n  left: 0px;\n  width: 200px;\n  height: 150px;\n  overflow: \"hidden\";\n  visibility: \"hidden\";\n}\n\n.ntm-empty-state {\n  align-items: center;\n  display: flex;\n  height: 100%;\n  justify-content: center;\n  width: 100%;\n}\n.ntm-empty-state__image {\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  margin-bottom: 2rem;\n}\n.ntm-empty-state__title--with-action-block {\n  margin-bottom: 1rem;\n}\n.ntm-empty-state__action-block {\n  display: flex;\n  justify-content: center;\n}\n\n.ntm-members {\n  overflow: auto;\n  width: 100%;\n}\n.ntm-members-wrapper {\n  display: flex;\n}\n.ntm-members-page-loader {\n  width: 100%;\n  height: 100vh;\n}\n.ntm-members__table-wrapper {\n  height: calc(100vh - 205px);\n  width: 100%;\n}\n.ntm-members-table__column {\n  display: flex;\n  align-items: center;\n  gap: 0.5rem;\n}\n.ntm-members-pane__header {\n  margin-bottom: 0.5rem;\n}\n.ntm-members-pane__body {\n  width: 100%;\n  padding-bottom: 1rem;\n}\n.ntm-members-pane__body > * + * {\n  margin-top: 1rem;\n}\n.ntm-members-pane__footer {\n  display: flex;\n  gap: 0.5rem;\n}\n\n.ntm-members-radio-group {\n  width: 100%;\n}\n.ntm-members-radio-group .neeto-ui-radio__container--stacked {\n  width: 100%;\n}\n\n.ntm-members-pane-radio-item__wrapper {\n  width: 100%;\n  cursor: pointer;\n  padding: 16px 0px !important;\n  border-bottom: 1px solid rgb(var(--neeto-ui-gray-200));\n}\n.ntm-members-pane-radio-item__label {\n  margin-bottom: 0 !important;\n}\n.ntm-members-pane-radio-item__description {\n  color: rgb(var(--neeto-ui-gray-700));\n}\n\n.ntm-roles-header {\n  border-bottom: 1px solid rgb(var(--neeto-ui-gray-300));\n}\n\n.ntm-roles-table__wrapper {\n  width: 100%;\n  height: calc(100vh - var(--neeto-ui-main-header-height));\n  display: flex;\n}\n.ntm-roles-table__wrapper .ntm-roles-table__sidebar {\n  width: 396px;\n  min-width: 396px;\n  border-right: thin solid rgb(var(--neeto-ui-gray-300));\n}\n.ntm-roles-table__wrapper .ntm-roles-table__sidebar .ntm-roles-table-sidebar__search {\n  padding: 24px 24px 16px;\n  height: 72px;\n}\n.ntm-roles-table__wrapper .ntm-roles-table__sidebar .ntm-roles-table-sidebar__list {\n  height: calc(\n        100vh - var(--neeto-ui-main-header-height) - 72px -\n          var(--ntm-roles-table-default-scroll)\n      );\n  overflow-y: auto;\n  padding-left: 24px;\n}\n.ntm-roles-table__wrapper .ntm-roles-table__sidebar .ntm-roles-table-sidebar__list .ntm-roles-table-sidebar__list-item {\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  padding: 12px 8px;\n  min-height: 48px;\n}\n.ntm-roles-table__wrapper .ntm-roles-table__sidebar .ntm-roles-table-sidebar__list .ntm-roles-table-sidebar__list-item.ntm-roles-table-sidebar__list-item--highlighted {\n  background-color: rgb(var(--neeto-ui-primary-100));\n  padding: 12px 8px;\n}\n.ntm-roles-table__wrapper .ntm-roles-table__sidebar .ntm-roles-table-sidebar__list .ntm-roles-table-sidebar__list-item:not(.ntm-roles-table-sidebar__list-item--highlighted) {\n  border-bottom: thin solid rgb(var(--neeto-ui-gray-300));\n}\n.ntm-roles-table__wrapper .ntm-roles-table__columns {\n  width: calc(\n      100vw - var(--neeto-ui-sidebar-width) - 396px - 24px\n    );\n  overflow: hidden;\n}\n.ntm-roles-table__wrapper .ntm-roles-table__columns .ntm-roles-table__cell {\n  width: 100%;\n  min-width: 200px;\n  min-height: 48px;\n  padding: 12px 8px;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  border-right: thin solid rgb(var(--neeto-ui-gray-300));\n}\n.ntm-roles-table__wrapper .ntm-roles-table__columns .ntm-roles-table-cell__checkbox-wrapper {\n  position: absolute;\n  height: 1rem;\n  width: 1rem;\n  margin: auto;\n  z-index: 10;\n}\n.ntm-roles-table__wrapper .ntm-roles-table__columns .ntm-roles-table-cell__checkbox {\n  z-index: 10;\n}\n.ntm-roles-table__wrapper .ntm-roles-table__columns .ntm-roles-table__header {\n  display: flex;\n  align-items: center;\n  overflow-x: auto;\n}\n.ntm-roles-table__wrapper .ntm-roles-table__columns .ntm-roles-table__header .ntm-roles-table__cell {\n  height: 72px;\n  padding-left: 24px;\n}\n.ntm-roles-table__wrapper .ntm-roles-table__columns .ntm-roles-table__header .ntm-roles-table-header-cell__container {\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  width: 100%;\n  gap: 1rem;\n  overflow: hidden;\n}\n.ntm-roles-table__wrapper .ntm-roles-table__columns .ntm-roles-table__header .ntm-roles-table-header__dropdown {\n  margin: 3px;\n}\n.ntm-roles-table__wrapper .ntm-roles-table__columns .ntm-roles-table__header .ntm-roles-table-header__role-name {\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n.ntm-roles-table__wrapper .ntm-roles-table__columns .ntm-roles-table__rows {\n  width: 100%;\n  height: calc(\n        100vh - var(--neeto-ui-main-header-height) - 72px -\n          var(--ntm-roles-table-default-scroll)\n      );\n  overflow-y: auto;\n  scrollbar-width: none;\n}\n.ntm-roles-table__wrapper .ntm-roles-table__columns .ntm-roles-table__rows::-webkit-scrollbar {\n  width: 0px;\n  height: 0px;\n}\n.ntm-roles-table__wrapper .ntm-roles-table__columns .ntm-roles-table__rows::-webkit-scrollbar-thumb {\n  background: rgb(var(--neeto-ui-gray-300));\n  border-radius: 50px;\n}\n.ntm-roles-table__wrapper .ntm-roles-table__columns .ntm-roles-table__rows::-webkit-scrollbar-thumb:hover {\n  border-radius: 50px;\n}\n.ntm-roles-table__wrapper .ntm-roles-table__columns .ntm-roles-table__rows::-webkit-scrollbar-track {\n  background: rgb(var(--neeto-ui-gray-300));\n}\n.ntm-roles-table__wrapper .ntm-roles-table__columns .ntm-roles-table__rows .ntm-roles-table__row {\n  display: flex;\n  align-items: center;\n}\n.ntm-roles-table__wrapper .ntm-roles-table__columns .ntm-roles-table__rows .ntm-roles-table__row .ntm-roles-table__cell {\n  overflow: hidden;\n  position: relative;\n}\n.ntm-roles-table__wrapper .ntm-roles-table__columns .ntm-roles-table__rows .ntm-roles-table__row .ntm-roles-table__cell p {\n  opacity: 0;\n  width: 340px;\n  min-width: 340px;\n}\n.ntm-roles-table__wrapper .ntm-roles-table__columns .ntm-roles-table__rows .ntm-roles-table__row.ntm-roles-table__row--highlighted .ntm-roles-table__cell {\n  background-color: rgb(var(--neeto-ui-primary-100));\n}\n.ntm-roles-table__wrapper .ntm-roles-table__columns .ntm-roles-table__rows .ntm-roles-table__row:not(.ntm-roles-table__row--highlighted) .ntm-roles-table__cell {\n  border-bottom: thin solid rgb(var(--neeto-ui-gray-300));\n}\n\n.ntm-roles-table-sidebar__drop-down-button {\n  color: rgb(var(--neeto-ui-gray-600));\n  cursor: pointer;\n}\n\n.ntm-roles-modal__body > * + * {\n  margin-top: 1rem;\n}\n.ntm-roles-modal__footer {\n  display: flex;\n  gap: 0.5rem;\n}\n\n.ntm-roles-pane__body {\n  width: 100%;\n  margin-bottom: 1.5rem;\n}\n.ntm-roles-pane__body-wrapper > * + * {\n  margin-top: 1rem;\n}\n.ntm-roles-pane__body > * + * {\n  margin-top: 1.5rem;\n}\n.ntm-roles-pane__footer {\n  display: flex;\n  gap: 0.5rem;\n}\n\n.ntm-roles-permission > * + * {\n  margin: 0.5rem;\n}\n.ntm-roles-permission__heading {\n  color: rgb(var(--neeto-ui-gray-500));\n  text-transform: uppercase;\n}\n.ntm-roles-permission__card {\n  background-color: rgb(var(--neeto-ui-white));\n  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-invitations__wrapper .ntm-invitations__header {\n  height: 28px;\n}\n.ntm-invitations__wrapper .ntm-invitations__body {\n  display: flex;\n  flex-direction: column;\n}\n.ntm-invitations__wrapper .ntm-invitations__body > * {\n  margin-bottom: 8px;\n}\n.ntm-invitations__wrapper .ntm-invitations__body-header {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n}\n.ntm-invitations__wrapper .ntm-invitations__body-header div {\n  display: flex;\n  align-items: center;\n}\n.ntm-invitations__wrapper .ntm-invitations__body-header div p {\n  margin-right: 8px;\n}\n.ntm-invitations__wrapper .ntm-invitations__body .ntm-invitations__dnd {\n  color: rgb(var(--neeto-ui-gray-700));\n  background: rgb(var(--neeto-ui-gray-100));\n  padding: 20px 40px;\n  border: 1px dashed;\n  border-radius: 6px;\n  cursor: pointer;\n  counter-reset: dnd-counter;\n}\n.ntm-invitations__wrapper .ntm-invitations__body .ntm-invitations__dnd h3 {\n  margin-bottom: 8px;\n  text-align: center !important;\n}\n.ntm-invitations__wrapper .ntm-invitations__body .ntm-invitations__dnd p::before {\n  counter-increment: dnd-counter;\n  content: counter(dnd-counter) \". \";\n}\n.ntm-invitations__wrapper .ntm-invitations__body .ntm-invitations__submit-btn {\n  align-self: end !important;\n  margin-top: 16px;\n}\n.ntm-invitations__wrapper .ntm-invitations__footer {\n  background: rgb(var(--neeto-ui-gray-100));\n  margin-top: 24px;\n}\n.ntm-invitations__wrapper .ntm-invitations__footer .ntm-invitations__invite-link {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n}\n.ntm-invitations__wrapper .ntm-invitations__footer .ntm-invitations__invite-link-instructions {\n  display: flex;\n  flex-direction: column;\n  width: 50%;\n}\n.ntm-invitations__wrapper .ntm-invitations__footer .ntm-invitations__invite-link-instructions h4 {\n  margin-bottom: 8px;\n}\n.ntm-invitations__wrapper .ntm-invitations__footer .ntm-invitations__invite-link-btns {\n  display: flex;\n  align-items: center;\n  gap: 0.5rem;\n  font-weight: bold;\n}\n.ntm-invitations__wrapper .ntm-invitations__footer .ntm-invitations__invite-link-btns > button:first-child {\n  margin-right: 8px;\n}\n.ntm-invitations__wrapper .ntm-invitations__footer .ntm-invitations__invite-link-btns p {\n  font-weight: normal;\n  color: rgb(var(--neeto-ui-gray-700));\n}\n.ntm-invitations__wrapper .ntm-invitations__footer .ntm-invitations__table {\n  max-height: 192px;\n}\n.ntm-invitations__wrapper .ntm-invitations__footer .ntm-invitations__table-filename {\n  display: flex;\n  align-items: center;\n}\n.ntm-invitations__wrapper .ntm-invitations__footer .ntm-invitations__table-filename svg {\n  margin-right: 4px;\n}\n.ntm-invitations__wrapper .ntm-invitations__footer .ntm-invitations__table-status {\n  text-transform: capitalize;\n}";
 n(css,{});
 
 export { index$2 as Invitations, index$1 as Roles, index as TeamMembers, hasPermission };