@bigbinary/neeto-team-members-frontend 2.3.6 → 2.4.0

package/README.md

@@ -12,13 +12,13 @@ functioning of the package. Install all the peer dependencies using the below
 command:
 
     ```zsh
-    yarn add @bigbinary/neeto-icons@1.8.39 @bigbinary/neetoui@3.5.17 axios@0.27.2 classnames@2.3.2 formik@2.2.9 ramda@0.28.0 react-router-dom@5.3.3 react-toastify@9.0.8 yup@0.32.11
+    yarn add @bigbinary/neeto-icons@1.8.39 @bigbinary/neetoui@4.0.6 axios@0.27.2 classnames@2.3.2 formik@2.2.9 ramda@0.28.0 react-router-dom@5.3.3 react-toastify@9.0.8 yup@0.32.11
     ```
 
 2. Now install the latest **neetoTeamMembers** package using the below command:
 
     ```zsh
-    yarn add @bigbinary/neeto-team-members-frontend@2.3.6
+    yarn add @bigbinary/neeto-team-members-frontend@2.4.0
     ```
 
 ## Usage

package/dist/index.cjs.js

@@ -4124,13 +4124,12 @@ var placeholders$1 = {
 };
 var tooltips$1 = {
 	activateUserToEdit: "Please activate the user to edit their role.",
-	editAdminRoleNotAllowed: "Sorry, you are not allowed to edit the admin role.",
-	editCurrentUserNotAllowed: "Sorry, you are not allowed to edit your role.",
-	noPermissionToAddMember: "Sorry, you do not have permission to add a member.",
-	noPermissionToAddRole: "Sorry, you do not have permission to add a new role.",
-	noPermissionToEditMembers: "Sorry, you do not have permission to edit members.",
-	noPermissionToEditRoles: "Sorry, you do not have permission to edit roles.",
-	noPermissionToRemoveRoles: "Sorry, you do not have permission to remove roles."
+	adminMustHaveAccess: "Admins should have access to this feature.",
+	noPermissionToAddMember: "Please ask the admin to permit you to add members.",
+	noPermissionToAddRole: "Please ask the admin to permit you to add roles.",
+	noPermissionToEditMembers: "Please ask the admin to permit you to edit members.",
+	noPermissionToEditRoles: "Please ask the admin to permit you to edit roles.",
+	noPermissionToRemoveRoles: "Please ask the admin to permit you to remove roles."
 };
 var validations$1 = {
 	enterRoleName: "Please enter a valid role name.",
@@ -4226,13 +4225,12 @@ var placeholders = {
 };
 var tooltips = {
 	activateUserToEdit: "Veuillez activer l'utilisateur pour modifier son rôle.",
-	editAdminRoleNotAllowed: "Désolé, vous n'êtes pas autorisé à modifier le rôle admin.",
-	editCurrentUserNotAllowed: "Désolé, vous n'êtes pas autorisé à modifier votre rôle.",
-	noPermissionToAddMember: "Désolé, vous n'avez pas la permission d'ajouter un membre.",
-	noPermissionToAddRole: "Désolé, vous n'avez pas la permission d'ajouter un nouveau rôle.",
-	noPermissionToEditMembers: "Désolé, vous n'avez pas la permission de modifier les membres.",
-	noPermissionToEditRoles: "Désolé, vous n'avez pas la permission de modifier les rôles.",
-	noPermissionToRemoveRoles: "Désolé, vous n'avez pas la permission de supprimer des rôles."
+	adminMustHaveAccess: "Les administrateurs doivent avoir accès à cette fonctionnalité.",
+	noPermissionToAddMember: "Veuillez demander à l'administrateur de vous autoriser à ajouter des membres.",
+	noPermissionToAddRole: "Veuillez demander à l'administrateur de vous autoriser à ajouter des rôles.",
+	noPermissionToEditMembers: "Veuillez demander à l'administrateur de vous autoriser à modifier les membres.",
+	noPermissionToEditRoles: "Veuillez demander à l'administrateur de vous autoriser à modifier les rôles.",
+	noPermissionToRemoveRoles: "Veuillez demander à l'administrateur de vous autoriser à supprimer des rôles."
 };
 var validations = {
 	filterInvalidEmails: "Cliquez ici pour supprimer les e-mails invalides.",
@@ -9327,7 +9325,6 @@ const Uploader = _ref => {
     })), /*#__PURE__*/React__default["default"].createElement(neetoui.Typography, {
       style: "body2"
     }, instance.t("helpers.uploadInstruction3")), /*#__PURE__*/React__default["default"].createElement(neetoui.Button, {
-      size: "large",
       style: "link",
       type: "submit",
       icon: neetoIcons.Download,
@@ -9366,8 +9363,8 @@ const COLUMN_DATA = [{
   key: "status",
   render: status => /*#__PURE__*/React__default["default"].createElement("p", {
     className: classnames__default["default"]("ntm-invitations__table-status", {
-      "neeto-ui-text-error": status === "failed",
-      "neeto-ui-text-success": status === "processed"
+      "neeto-ui-text-error-500": status === "failed",
+      "neeto-ui-text-success-500": status === "processed"
     })
   }, status)
 }, {
@@ -9440,6 +9437,7 @@ const Csv = _ref => {
       csvColumns = _ref.csvColumns,
       setIsCSVInviteSelected = _ref.setIsCSVInviteSelected;
   return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement(neetoui.Modal.Header, null, /*#__PURE__*/React__default["default"].createElement(neetoui.Button, {
+    size: "small",
     style: "text",
     icon: neetoIcons.LeftArrow,
     onClick: () => setIsCSVInviteSelected(false)
@@ -9597,19 +9595,16 @@ const InviteLink = _ref => {
   }, /*#__PURE__*/React__default["default"].createElement(Timer, {
     expiresAt: inviteLink.expiresAt
   }), /*#__PURE__*/React__default["default"].createElement(neetoui.Button, {
-    size: "large",
     style: "danger-text",
     label: instance.t("common.delete"),
     loading: isDeleting,
     disabled: isDeleting,
     onClick: () => deleteInviteLink(inviteLink.id)
   }), /*#__PURE__*/React__default["default"].createElement(neetoui.Button, {
-    size: "large",
     style: "primary",
     label: instance.t("buttons.copyLink"),
     onClick: handleCopyInviteLink
   })) : /*#__PURE__*/React__default["default"].createElement(neetoui.Button, {
-    size: "large",
     style: "secondary",
     loading: isLoading || isCreating,
     disabled: isLoading || isCreating,
@@ -9650,7 +9645,6 @@ const Normal = _ref => {
   })), isCSVInviteEnabled && /*#__PURE__*/React__default["default"].createElement("div", null, /*#__PURE__*/React__default["default"].createElement(neetoui.Typography, {
     style: "body2"
   }, instance.t("buttons.inviteFrom")), /*#__PURE__*/React__default["default"].createElement(neetoui.Button, {
-    size: "large",
     style: "secondary",
     icon: neetoIcons.File,
     onClick: () => setIsCSVInviteSelected(true),
@@ -9663,7 +9657,6 @@ const Normal = _ref => {
     label: null,
     placeholder: instance.t("placeholders.email")
   }), /*#__PURE__*/React__default["default"].createElement(neetoui.Button, _extends({
-    size: "large",
     type: "submit",
     label: instance.t("buttons.sendInvites"),
     className: "ntm-invitations__submit-btn",
@@ -9718,7 +9711,7 @@ const Invitations = _ref => {
   }, /*#__PURE__*/React__default["default"].createElement(formik.Form, null, /*#__PURE__*/React__default["default"].createElement(neetoui.Modal, _extends({
     isOpen: isOpen,
     onClose: handleClose,
-    size: "md"
+    size: "large"
   }, otherProps), /*#__PURE__*/React__default["default"].createElement("div", {
     className: "ntm-invitations__wrapper"
   }, isCSVInviteSelected ? /*#__PURE__*/React__default["default"].createElement(Csv, {
@@ -11260,7 +11253,6 @@ const AddRoleButton = _ref => {
     position: "bottom"
   }, /*#__PURE__*/React__default["default"].createElement("span", null, /*#__PURE__*/React__default["default"].createElement(neetoui.Button, {
     icon: neetoIcons.Plus,
-    size: "large",
     label: t("common.add_", {
       what: t("common.role", SINGULAR).toLocaleLowerCase()
     }),
@@ -11425,7 +11417,6 @@ const New = _ref => {
       className: "ntm-roles-pane__body-wrapper"
     }, /*#__PURE__*/React__default["default"].createElement(formik$1.Input, {
       required: true,
-      autoFocus: true,
       maxLength: 40,
       name: "name",
       label: t("common.name"),
@@ -11443,13 +11434,11 @@ const New = _ref => {
     }))), /*#__PURE__*/React__default["default"].createElement(neetoui.Pane.Footer, null, /*#__PURE__*/React__default["default"].createElement("div", {
       className: "ntm-roles-pane__footer"
     }, /*#__PURE__*/React__default["default"].createElement(neetoui.Button, {
-      size: "large",
       label: t("buttons.proceed"),
       disabled: !dirty || isSubmitting,
       type: "submit",
       loading: isSubmitting
     }), /*#__PURE__*/React__default["default"].createElement(neetoui.Button, {
-      size: "large",
       style: "text",
       label: t("buttons.cancel"),
       onClick: onClose
@@ -11579,7 +11568,7 @@ const DEFAULT_MANAGE_ROLE_VALUES = {
   selectedRole: {}
 };
 
-const renderRolesTooltipContent = roleName => Object.is(roleName, "Admin") ? instance.t("tooltips.editAdminRoleNotAllowed") : instance.t("tooltips.noPermissionToEditRoles");
+const renderRolesTooltipContent = roleName => Object.is(roleName, "Admin") ? instance.t("tooltips.adminMustHaveAccess") : instance.t("tooltips.noPermissionToEditRoles");
 const removeDuplicates = array => [...new Set(array)];
 
 const Row = _ref => {
@@ -11649,6 +11638,8 @@ const TableHeader = _ref => {
         t = _useTranslation.t;
 
   const scrollSyncElement = React.useRef(null);
+  const Menu = neetoui.Dropdown.Menu,
+        MenuItem = neetoui.Dropdown.MenuItem;
   const getOverflowStatus = React.useCallback(() => {
     if (scrollSyncElement.current) {
       const headerElement = scrollSyncElement.current.node;
@@ -11677,17 +11668,18 @@ const TableHeader = _ref => {
       lineHeight: "normal",
       className: "ntm-roles-table-header__role-name"
     }, role.name), !hasSystemRole && /*#__PURE__*/React__default["default"].createElement(neetoui.Dropdown, {
+      buttonProps: {
+        className: "ntm-roles-table-header__dropdown"
+      },
       autoWidth: true,
       buttonStyle: "text",
       icon: neetoIcons.MenuHorizontal
-    }, /*#__PURE__*/React__default["default"].createElement(neetoui.Tooltip, {
+    }, /*#__PURE__*/React__default["default"].createElement(Menu, null, /*#__PURE__*/React__default["default"].createElement(neetoui.Tooltip, {
       content: t("tooltips.noPermissionToEditRoles"),
       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: "top"
-    }, /*#__PURE__*/React__default["default"].createElement("li", {
-      className: "ntm-dropdown__item"
-    }, /*#__PURE__*/React__default["default"].createElement(neetoui.Button, {
-      label: t("common.edit"),
+      position: "left"
+    }, /*#__PURE__*/React__default["default"].createElement("span", null, /*#__PURE__*/React__default["default"].createElement(MenuItem.Button, {
+      size: "small",
       onClick: () => setManageRole({
         isEdit: true,
         selectedRole: role
@@ -11695,22 +11687,20 @@ const TableHeader = _ref => {
       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"
-    }))), /*#__PURE__*/React__default["default"].createElement(neetoui.Tooltip, {
+    }, t("common.edit")))), /*#__PURE__*/React__default["default"].createElement(neetoui.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: "bottom"
-    }, /*#__PURE__*/React__default["default"].createElement("li", {
-      className: "ntm-dropdown__item"
-    }, /*#__PURE__*/React__default["default"].createElement(neetoui.Button, {
-      label: t("common.delete"),
+      position: "left"
+    }, /*#__PURE__*/React__default["default"].createElement("span", null, /*#__PURE__*/React__default["default"].createElement(MenuItem.Button, {
+      size: "small",
       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-text",
+      style: "danger",
       className: "ntm-dropdown__button"
-    }))))));
+    }, t("common.delete"))))))));
   })));
 };
 
@@ -11812,7 +11802,6 @@ const Edit = _ref => {
       className: "ntm-roles-modal__body"
     }, /*#__PURE__*/React__default["default"].createElement(formik$1.Input, {
       required: true,
-      autoFocus: true,
       name: "name",
       label: t("common.name"),
       placeholder: t("placeholders.enterRoleName"),
@@ -11825,12 +11814,10 @@ const Edit = _ref => {
       className: "ntm-roles-modal__footer"
     }, /*#__PURE__*/React__default["default"].createElement(neetoui.Button, {
       type: "submit",
-      size: "large",
       disabled: !dirty || isSubmitting,
       label: t("buttons.proceed"),
       loading: isSubmitting
     }), /*#__PURE__*/React__default["default"].createElement(neetoui.Button, {
-      size: "large",
       style: "text",
       label: t("buttons.cancel"),
       onClick: onClose
@@ -12207,7 +12194,6 @@ const Header = _ref => {
     position: "bottom"
   }, /*#__PURE__*/React__default["default"].createElement("span", null, /*#__PURE__*/React__default["default"].createElement(neetoui.Button, {
     icon: neetoIcons.Plus,
-    size: "large",
     label: instance.t("common.add_", {
       what: instance.t(metaName, SINGULAR).toLocaleLowerCase()
     }),
@@ -12238,6 +12224,8 @@ const Right = _ref2 => {
   const permissions = window.globalProps.permissions;
   const hasRequiredPermissions = permissions && hasPermission(MANAGE_MEMBER_PERMISSIONS);
   return isVisible && hasRequiredPermissions ? /*#__PURE__*/React__default["default"].createElement(neetoui.Button, _extends({
+    size: "small",
+    style: "secondary",
     label: instance.t("common.manage_", {
       what: instance.t("common.role", PLURAL).toLocaleLowerCase()
     })
@@ -12273,7 +12261,7 @@ const DEFAULT_MEMBER_FILTER = MEMBER_FILTER.ACTIVE.value;
 const DEFAULT_PAGE_NUMBER = 1;
 const DEFAULT_PAGE_SIZE = 10;
 const DROPDOWN_BUTTON_PROPS = {
-  size: "large"
+  size: "medium"
 };
 const DEFAULT_IS_OPEN_VALUES = {
   menuBar: false,
@@ -12301,74 +12289,65 @@ const renderNameColumn = (_ref, diplayStatusTag) => {
     className: "ntm-members-table__column"
   }, /*#__PURE__*/React__default["default"].createElement(neetoui.Avatar, {
     user: {
-      displayName,
+      name: displayName,
       imageUrl
     },
     size: "medium"
   }), displayName, diplayStatusTag && /*#__PURE__*/React__default["default"].createElement(neetoui.Tag, {
-    style: "outline",
-    color: active ? "blue" : "gray",
+    type: "outline",
+    style: active ? "primary" : "secondary",
     label: active ? MEMBER_FILTER.ACTIVE.label : MEMBER_FILTER.DEACTIVATED.label
   }));
 };
 
-const isCurrentUserEmail = email => {
-  const user = window.globalProps.user;
-  return (user === null || user === void 0 ? void 0 : user.email) === email;
-};
-
-const isDropDownButtonDisabled = (email, permissions) => {
+const isDropDownButtonDisabled = permissions => {
   var _permissions$update;
 
-  return !((_permissions$update = permissions === null || permissions === void 0 ? void 0 : permissions.update) !== null && _permissions$update !== void 0 ? _permissions$update : hasPermission(MANAGE_MEMBER_PERMISSIONS)) || isCurrentUserEmail(email);
+  return !((_permissions$update = permissions === null || permissions === void 0 ? void 0 : permissions.update) !== null && _permissions$update !== void 0 ? _permissions$update : hasPermission(MANAGE_MEMBER_PERMISSIONS));
 };
 
-const getDropDownTooltipContent = email => isCurrentUserEmail(email) ? instance.t("tooltips.editCurrentUserNotAllowed") : instance.t("tooltips.noPermissionToEditMembers");
-
 const renderDropdownButton = (_ref2, handleUpdateStatus, handleUpdateRole, permissions) => {
   let displayName = _ref2.displayName,
       id = _ref2.id,
       active = _ref2.active,
       email = _ref2.email,
       role = _ref2.role;
+  const Menu = neetoui.Dropdown.Menu,
+        MenuItem = neetoui.Dropdown.MenuItem;
   return /*#__PURE__*/React__default["default"].createElement(neetoui.Tooltip, {
-    content: getDropDownTooltipContent(email),
-    disabled: !isDropDownButtonDisabled(email, permissions),
+    content: instance.t("tooltips.noPermissionToEditMembers"),
+    disabled: !isDropDownButtonDisabled(permissions),
     position: "top"
   }, /*#__PURE__*/React__default["default"].createElement("span", null, /*#__PURE__*/React__default["default"].createElement(neetoui.Dropdown, {
     icon: neetoIcons.MenuHorizontal,
     buttonStyle: "text",
     buttonProps: DROPDOWN_BUTTON_PROPS,
     strategy: "fixed",
-    disabled: isDropDownButtonDisabled(email, permissions)
-  }, /*#__PURE__*/React__default["default"].createElement(neetoui.Tooltip, {
+    disabled: isDropDownButtonDisabled(permissions)
+  }, /*#__PURE__*/React__default["default"].createElement(Menu, null, /*#__PURE__*/React__default["default"].createElement(neetoui.Tooltip, {
     content: instance.t("tooltips.activateUserToEdit"),
     disabled: active,
     position: "top"
-  }, /*#__PURE__*/React__default["default"].createElement("li", {
-    className: "ntm-dropdown__item",
+  }, /*#__PURE__*/React__default["default"].createElement("span", null, /*#__PURE__*/React__default["default"].createElement(MenuItem.Button, {
+    size: "small",
+    className: "ntm-dropdown__button",
     onClick: () => active && handleUpdateRole({
       id,
       email,
       role
-    })
-  }, /*#__PURE__*/React__default["default"].createElement(neetoui.Button, {
-    className: "ntm-dropdown__button",
-    label: instance.t("common.edit"),
+    }),
     disabled: !active,
     style: "text"
-  }))), /*#__PURE__*/React__default["default"].createElement("li", {
-    className: "ntm-dropdown__item",
+  }, instance.t("common.edit")))), /*#__PURE__*/React__default["default"].createElement(MenuItem.Button, {
+    size: "small",
+    className: "ntm-dropdown__button",
     onClick: () => handleUpdateStatus({
       id,
       name: displayName,
       active
-    })
-  }, /*#__PURE__*/React__default["default"].createElement(neetoui.Button, {
-    className: "ntm-dropdown__button",
-    label: active ? instance.t("common.deactivate") : instance.t("common.activate"),
-    style: active ? "danger-text" : "text"
-  })))));
+    }),
+    style: active && "danger"
+  }, active ? instance.t("common.deactivate") : instance.t("common.activate"))))));
 };
 
 const getDefaultAlertTitle = _ref3 => {
@@ -12583,12 +12562,11 @@ const ManageMember = _ref => {
     }, selectedMember ? /*#__PURE__*/React__default["default"].createElement(formik$1.Input, {
       name: "emails",
       "data-cy": "add-member-email-text-field",
-      size: "large",
+      size: "medium",
       label: instance.t("common.email", SINGULAR),
       value: ramda.head(emails).value,
       disabled: selectedMember
     }) : /*#__PURE__*/React__default["default"].createElement(formik$1.EmailInput, {
-      autoFocus: true,
       name: "emails",
       "data-cy": "add-member-email-input",
       counter: COUNTER_PROPS,
@@ -12601,11 +12579,10 @@ const ManageMember = _ref => {
       required: true,
       name: "role",
       "data-cy": "add-member-role-select",
-      size: "large",
+      size: "medium",
       label: instance.t("common.role", SINGULAR),
       placeholder: instance.t("placeholders.role"),
       value: roleValue,
-      autoFocus: !!selectedMember,
       onChange: _ref3 => {
         let value = _ref3.value;
         return setFieldValue("role", value);
@@ -12619,7 +12596,6 @@ const ManageMember = _ref => {
     }, /*#__PURE__*/React__default["default"].createElement(neetoui.Button, {
       type: "submit",
       "data-cy": "add-member-submit-button",
-      size: "large",
       style: "primary",
       label: instance.t("buttons.proceed"),
       onClick: () => setHasSubmitted(true),
@@ -12627,7 +12603,6 @@ const ManageMember = _ref => {
       loading: isSubmitting
     }), /*#__PURE__*/React__default["default"].createElement(neetoui.Button, {
       "data-cy": "add-member-cancel-button",
-      size: "large",
       style: "text",
       label: instance.t("buttons.cancel"),
       onClick: onPaneClose
@@ -12866,7 +12841,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__item {\n  background-color: transparent !important;\n  padding: 0 !important;\n}\n\n.ntm-dropdown__button {\n  border-radius: 0 !important;\n  font-weight: 400;\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  background-color: #ffffff;\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 #d8dcde;\n}\n\n.ntm-roles-table__wrapper {\n  width: 100%;\n  height: calc(100vh - 80px);\n  display: flex;\n  background-color: #ffffff;\n}\n.ntm-roles-table__wrapper .ntm-roles-table__sidebar {\n  width: 396px;\n  min-width: 396px;\n  border-right: thin solid #d8dcde;\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 - 80px - 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: #eaf3fc;\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 #d8dcde;\n}\n.ntm-roles-table__wrapper .ntm-roles-table__columns {\n  width: calc(\n      100vw - 64px - 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 #d8dcde;\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__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 - 80px - 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: #d8dcde;\n  border-radius: 50px;\n}\n.ntm-roles-table__wrapper .ntm-roles-table__columns .ntm-roles-table__rows::-webkit-scrollbar-thumb:hover {\n  background: #939ea4;\n  border-radius: 50px;\n}\n.ntm-roles-table__wrapper .ntm-roles-table__columns .ntm-roles-table__rows::-webkit-scrollbar-track {\n  background: #d8dcde;\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: #eaf3fc;\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 #d8dcde;\n}\n\n.ntm-roles-table-sidebar__drop-down-button {\n  color: #68737d;\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: #87929d;\n  text-transform: uppercase;\n}\n.ntm-roles-permission__card {\n  background-color: white;\n  box-shadow: 0px 3px 12px -1px rgba(28, 52, 84, 0.12), 0px 2px 4px -1px rgba(28, 55, 90, 0.08);\n  border-radius: 0.125rem;\n  border-width: 1px;\n  border-color: #d8dcde;\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: #49545c;\n  background: #f8f9f9;\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: #f8f9f9;\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: #49545c;\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}\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}";
 n(css,{});
 
 exports.Invitations = index$2;