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

package/dist/index.cjs.js

@@ -4153,6 +4153,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."
@@ -4253,7 +4254,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."
@@ -8273,6 +8276,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
     }];
   }
@@ -11274,10 +11279,13 @@ const ADD_ROLE_FORM_INITIAL_VALUES = {
   permissionIds: []
 };
 const ADD_ROLE_FORM_VALIDATION_SCHEMA = yup.object({
-  name: yup.string().trim().required(instance.t("validations.enterRoleName")),
+  name: yup.string().trim().max(40, instance.t("validations.limitExceeded", {
+    what: instance.t("common.name").toLocaleLowerCase(),
+    limit: 40
+  })).required(instance.t("validations.enterRoleName")),
   description: yup.string().trim().max(255, instance.t("validations.limitExceeded", {
-    what: instance.t("common.description"),
-    count: 255
+    what: instance.t("common.description").toLocaleLowerCase(),
+    limit: 255
   }))
 });
 
@@ -11391,6 +11399,7 @@ const New = _ref => {
     }), /*#__PURE__*/React__default["default"].createElement(formik$1.Textarea, {
       "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()
@@ -11761,6 +11770,7 @@ const Edit = _ref => {
     }), /*#__PURE__*/React__default["default"].createElement(formik$1.Textarea, {
       "data-cy": "ntm-update-role-description-text-field",
       label: t("common.description"),
+      maxLength: 255,
       name: "description",
       placeholder: t("placeholders.enterDescription")
     }))), /*#__PURE__*/React__default["default"].createElement(neetoui.Modal.Footer, null, /*#__PURE__*/React__default["default"].createElement("div", {
@@ -12457,14 +12467,9 @@ 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__default["default"].createElement(formik.Form, null, /*#__PURE__*/React__default["default"].createElement(neetoui.Pane.Body, null, /*#__PURE__*/React__default["default"].createElement("div", {
       className: "ntm-members-pane__body"
     }, selectedMember ? /*#__PURE__*/React__default["default"].createElement(formik$1.Input, {
@@ -12483,23 +12488,34 @@ const ManageMember = _ref => {
       label: `${instance.t("common.email", PLURAL)}*`,
       name: "emails",
       placeholder: instance.t("placeholders.email")
-    }), /*#__PURE__*/React__default["default"].createElement(formik$1.Select, {
-      required: true,
-      "data-cy": "ntm-manage-member-role-select",
-      label: instance.t("common.role", SINGULAR),
-      name: "role",
-      onChange: _ref3 => {
-        let value = _ref3.value;
-        return setFieldValue("role", value);
-      },
-      options: roles.map(role => ({
-        label: role,
-        value: role
-      })),
-      placeholder: instance.t("placeholders.role"),
-      size: "medium",
-      value: roleValue
-    }))), /*#__PURE__*/React__default["default"].createElement(neetoui.Pane.Footer, {
+    }), /*#__PURE__*/React__default["default"].createElement(formik$1.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__default["default"].createElement("label", {
+        className: "ntm-members-pane-radio-item__wrapper",
+        htmlFor: name,
+        key: name
+      }, /*#__PURE__*/React__default["default"].createElement(formik$1.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__default["default"].createElement(neetoui.Typography, {
+        className: "neeto-ui-input__help-text",
+        "data-cy": "ntm-manage-member-roles-description",
+        style: "body3",
+        weight: "normal"
+      }, description));
+    })))), /*#__PURE__*/React__default["default"].createElement(neetoui.Pane.Footer, {
       className: "ntm-members-pane__footer"
     }, /*#__PURE__*/React__default["default"].createElement(neetoui.Button, {
       "data-cy": "ntm-manage-member-submit-button",
@@ -12569,8 +12585,8 @@ const TeamMembers = _ref => {
     isMembersFetching = _useFetchMembers.isFetching;
   const _useFetchRoles = useFetchRoles({
       select: response => {
-        const roles = response.organizationRoles || response.data.organizationRoles;
-        return ramda.pluck("name", roles).sort((a, b) => a.localeCompare(b));
+        var _ref2;
+        return ramda.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
     }),
@@ -12583,8 +12599,8 @@ const TeamMembers = _ref => {
     isUpdatingMember = _useUpdateMember.isLoading;
   const searchProps = {
     "data-cy": "ntm-search-members-input",
-    onChange: _ref2 => {
-      let value = _ref2.target.value;
+    onChange: _ref3 => {
+      let value = _ref3.target.value;
       return setFilters(ramda.mergeLeft({
         search: value,
         page: DEFAULT_PAGE_NUMBER
@@ -12732,7 +12748,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,{});
 
 exports.Invitations = index$2;