@bigbinary/neeto-team-members-frontend 2.3.3 → 2.3.5

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/README.md CHANGED
@@ -12,13 +12,13 @@ functioning of the package. Install all the peer dependencies using the below
12
12
  command:
13
13
 
14
14
  ```zsh
15
- yarn add @bigbinary/neeto-icons@1.8.37 @bigbinary/neetoui@3.5.17 axios@0.27.2 classnames@2.3.1 formik@2.2.9 ramda@0.28.0 react-router-dom@5.3.3 react-toastify@9.0.8 yup@0.32.11
15
+ yarn add @bigbinary/neeto-icons@1.8.37 @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
16
16
  ```
17
17
 
18
18
  2. Now install the latest **neetoTeamMembers** package using the below command:
19
19
 
20
20
  ```zsh
21
- yarn add @bigbinary/neeto-team-members-frontend@2.3.2
21
+ yarn add @bigbinary/neeto-team-members-frontend@2.3.4
22
22
  ```
23
23
 
24
24
  ## Usage
@@ -106,5 +106,5 @@ live update.
106
106
  | neetoWireframe | :white_check_mark: | :white_check_mark: | |
107
107
  | neetoAuth | :x: | :x: | |
108
108
  | neetoChat | :x: | :x: | |
109
- | neetoDesk | :x: | :x: | |
109
+ | neetoDesk | :x: | :white_check_mark: | |
110
110
  | neetoInvoice | :x: | :x: | |
package/dist/index.cjs.js CHANGED
@@ -9458,7 +9458,7 @@ const inviteLinksApi = {
9458
9458
  destroy: destroy$1
9459
9459
  };
9460
9460
 
9461
- const DEFAULT_STALE_TIME = 60000; // 1 minute
9461
+ const DEFAULT_STALE_TIME = 300000; // 5 minutes
9462
9462
 
9463
9463
  const INVITATIONS_STALE_TIME = 3600000; //1 hour
9464
9464
 
@@ -11659,7 +11659,7 @@ const TableHeader = _ref => {
11659
11659
  weight: "semibold",
11660
11660
  lineHeight: "normal",
11661
11661
  className: "ntm-roles-table-header__role-name"
11662
- }, role.name), /*#__PURE__*/React__default["default"].createElement(neetoui.Dropdown, {
11662
+ }, role.name), !hasSystemRole && /*#__PURE__*/React__default["default"].createElement(neetoui.Dropdown, {
11663
11663
  autoWidth: true,
11664
11664
  buttonStyle: "text",
11665
11665
  icon: neetoIcons.MenuHorizontal
@@ -11678,7 +11678,7 @@ const TableHeader = _ref => {
11678
11678
  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),
11679
11679
  style: "text",
11680
11680
  className: "ntm-dropdown__button"
11681
- }))), !hasSystemRole && /*#__PURE__*/React__default["default"].createElement(neetoui.Tooltip, {
11681
+ }))), /*#__PURE__*/React__default["default"].createElement(neetoui.Tooltip, {
11682
11682
  content: t("tooltips.noPermissionToRemoveRoles"),
11683
11683
  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,
11684
11684
  position: "bottom"
@@ -12354,11 +12354,33 @@ const renderDropdownButton = (_ref2, handleUpdateStatus, handleUpdateRole, permi
12354
12354
  })))));
12355
12355
  };
12356
12356
 
12357
- const getColumnData = _ref3 => {
12358
- let memberFilter = _ref3.memberFilter,
12359
- handleUpdateStatus = _ref3.handleUpdateStatus,
12360
- handleUpdateRole = _ref3.handleUpdateRole,
12361
- permissions = _ref3.permissions;
12357
+ const getDefaultAlertTitle = _ref3 => {
12358
+ let member = _ref3.member,
12359
+ metaName = _ref3.metaName;
12360
+ return member !== null && member !== void 0 && member.active ? instance.t("common.deactivate_", {
12361
+ what: instance.t(metaName, SINGULAR).toLocaleLowerCase()
12362
+ }) : instance.t("common.activate_", {
12363
+ what: instance.t(metaName, SINGULAR).toLocaleLowerCase()
12364
+ });
12365
+ };
12366
+
12367
+ const getDefaultAlertMessage = _ref4 => {
12368
+ let member = _ref4.member,
12369
+ metaName = _ref4.metaName;
12370
+ return member !== null && member !== void 0 && member.active ? instance.t("alerts.deactivating_", {
12371
+ what: instance.t(metaName, SINGULAR).toLocaleLowerCase(),
12372
+ person: member === null || member === void 0 ? void 0 : member.name
12373
+ }) : instance.t("alerts.activating_", {
12374
+ what: instance.t(metaName, SINGULAR).toLocaleLowerCase(),
12375
+ person: member === null || member === void 0 ? void 0 : member.name
12376
+ });
12377
+ };
12378
+
12379
+ const getColumnData = _ref5 => {
12380
+ let memberFilter = _ref5.memberFilter,
12381
+ handleUpdateStatus = _ref5.handleUpdateStatus,
12382
+ handleUpdateRole = _ref5.handleUpdateRole,
12383
+ permissions = _ref5.permissions;
12362
12384
  const diplayStatusTag = ramda.identical(memberFilter, MEMBER_FILTER.ALL.value);
12363
12385
  return [{
12364
12386
  title: instance.t("common.name"),
@@ -12388,39 +12410,23 @@ const getColumnData = _ref3 => {
12388
12410
  const renderHeaderTitle = (filterStatus, metaName) => instance.t(`common.${ramda.toLower(filterStatus)}_`, {
12389
12411
  what: instance.t(metaName, PLURAL).toLocaleLowerCase()
12390
12412
  });
12391
- const renderUpdateAlertTitle = (member, metaName, config) => {
12413
+ const renderUpdateAlert = (field, props) => {
12392
12414
  var _config$alert;
12393
12415
 
12394
- if (config !== null && config !== void 0 && (_config$alert = config.alert) !== null && _config$alert !== void 0 && _config$alert.title) {
12395
- return config.alert.title({
12396
- name: member === null || member === void 0 ? void 0 : member.name,
12397
- active: member === null || member === void 0 ? void 0 : member.active
12398
- });
12399
- }
12416
+ const config = props.config,
12417
+ member = props.member;
12400
12418
 
12401
- return member !== null && member !== void 0 && member.active ? instance.t("common.deactivate_", {
12402
- what: instance.t(metaName, SINGULAR).toLocaleLowerCase()
12403
- }) : instance.t("common.activate_", {
12404
- what: instance.t(metaName, SINGULAR).toLocaleLowerCase()
12405
- });
12406
- };
12407
- const renderUpdateAlertMessage = (member, metaName, config) => {
12408
- var _config$alert2;
12419
+ if (config !== null && config !== void 0 && (_config$alert = config.alert) !== null && _config$alert !== void 0 && _config$alert[field]) {
12420
+ var _config$alert2;
12409
12421
 
12410
- if (config !== null && config !== void 0 && (_config$alert2 = config.alert) !== null && _config$alert2 !== void 0 && _config$alert2.message) {
12411
- return config.alert.message({
12412
- name: member === null || member === void 0 ? void 0 : member.name,
12413
- active: member === null || member === void 0 ? void 0 : member.active
12422
+ return (_config$alert2 = config.alert) === null || _config$alert2 === void 0 ? void 0 : _config$alert2[field]({
12423
+ active: member === null || member === void 0 ? void 0 : member.active,
12424
+ id: member === null || member === void 0 ? void 0 : member.id,
12425
+ name: member === null || member === void 0 ? void 0 : member.name
12414
12426
  });
12415
12427
  }
12416
12428
 
12417
- return member !== null && member !== void 0 && member.active ? instance.t("alerts.deactivating_", {
12418
- what: instance.t(metaName, SINGULAR).toLocaleLowerCase(),
12419
- person: member === null || member === void 0 ? void 0 : member.name
12420
- }) : instance.t("alerts.activating_", {
12421
- what: instance.t(metaName, SINGULAR).toLocaleLowerCase(),
12422
- person: member === null || member === void 0 ? void 0 : member.name
12423
- });
12429
+ return field === "title" ? getDefaultAlertTitle(props) : getDefaultAlertMessage(props);
12424
12430
  };
12425
12431
  const getSearchParams = (page, filter) => new URLSearchParams(_objectSpread$1(_objectSpread$1({}, page), {}, {
12426
12432
  filter: filter.toLowerCase()
@@ -12482,11 +12488,21 @@ const ManageMember = _ref => {
12482
12488
  roles = _ref$roles === void 0 ? [] : _ref$roles,
12483
12489
  selectedMember = _ref.selectedMember;
12484
12490
 
12491
+ const _useState = React.useState(false),
12492
+ _useState2 = _slicedToArray$2(_useState, 2),
12493
+ hasSubmitted = _useState2[0],
12494
+ setHasSubmitted = _useState2[1];
12495
+
12496
+ const onPaneClose = () => {
12497
+ onClose();
12498
+ setHasSubmitted(false);
12499
+ };
12500
+
12485
12501
  const _useCreateMember = useCreateMember({
12486
12502
  onSuccess: () => {
12487
12503
  var _config$createMember, _config$createMember$;
12488
12504
 
12489
- onClose();
12505
+ onPaneClose();
12490
12506
  config === null || config === void 0 ? void 0 : (_config$createMember = config.createMember) === null || _config$createMember === void 0 ? void 0 : (_config$createMember$ = _config$createMember.onSuccess) === null || _config$createMember$ === void 0 ? void 0 : _config$createMember$.callback();
12491
12507
  }
12492
12508
  }),
@@ -12494,7 +12510,7 @@ const ManageMember = _ref => {
12494
12510
  isCreatingMember = _useCreateMember.isLoading;
12495
12511
 
12496
12512
  const _useUpdateMember = useUpdateMember({
12497
- onSuccess: onClose
12513
+ onSuccess: onPaneClose
12498
12514
  }),
12499
12515
  updateMember = _useUpdateMember.mutate,
12500
12516
  isUpdatingMember = _useUpdateMember.isLoading;
@@ -12507,11 +12523,11 @@ const ManageMember = _ref => {
12507
12523
  };
12508
12524
 
12509
12525
  const isSubmitting = isCreatingMember || isUpdatingMember;
12510
- return /*#__PURE__*/React__default["default"].createElement(neetoui.Modal, {
12526
+ return /*#__PURE__*/React__default["default"].createElement(neetoui.Pane, {
12511
12527
  isOpen: isOpen,
12512
- onClose: onClose
12513
- }, /*#__PURE__*/React__default["default"].createElement(neetoui.Modal.Header, null, /*#__PURE__*/React__default["default"].createElement(neetoui.Typography, {
12514
- className: "ntm-members-modal__header",
12528
+ onClose: onPaneClose
12529
+ }, /*#__PURE__*/React__default["default"].createElement(neetoui.Pane.Header, null, /*#__PURE__*/React__default["default"].createElement(neetoui.Typography, {
12530
+ className: "ntm-members-pane__header",
12515
12531
  style: "h2",
12516
12532
  weight: "semibold"
12517
12533
  }, selectedMember ? instance.t("common.edit_", {
@@ -12522,8 +12538,8 @@ const ManageMember = _ref => {
12522
12538
  initialValues: renderInitialValues(selectedMember),
12523
12539
  onSubmit: handleAddMember,
12524
12540
  validationSchema: VALIDATION_SCHEMA,
12525
- validateOnChange: false,
12526
- validateOnBlur: false,
12541
+ validateOnChange: hasSubmitted,
12542
+ validateOnBlur: hasSubmitted,
12527
12543
  enableReinitialize: true
12528
12544
  }, _ref2 => {
12529
12545
  let values = _ref2.values,
@@ -12535,8 +12551,8 @@ const ManageMember = _ref => {
12535
12551
  label: role,
12536
12552
  value: role
12537
12553
  };
12538
- return /*#__PURE__*/React__default["default"].createElement(formik.Form, null, /*#__PURE__*/React__default["default"].createElement(neetoui.Modal.Body, null, /*#__PURE__*/React__default["default"].createElement("div", {
12539
- className: "ntm-members-modal__body"
12554
+ return /*#__PURE__*/React__default["default"].createElement(formik.Form, null, /*#__PURE__*/React__default["default"].createElement(neetoui.Pane.Body, null, /*#__PURE__*/React__default["default"].createElement("div", {
12555
+ className: "ntm-members-pane__body"
12540
12556
  }, selectedMember ? /*#__PURE__*/React__default["default"].createElement(formik$1.Input, {
12541
12557
  name: "emails",
12542
12558
  "data-cy": "add-member-email-text-field",
@@ -12571,14 +12587,15 @@ const ManageMember = _ref => {
12571
12587
  label: role,
12572
12588
  value: role
12573
12589
  }))
12574
- }))), /*#__PURE__*/React__default["default"].createElement(neetoui.Modal.Footer, {
12575
- className: "ntm-members-modal__footer"
12590
+ }))), /*#__PURE__*/React__default["default"].createElement(neetoui.Pane.Footer, {
12591
+ className: "ntm-members-pane__footer"
12576
12592
  }, /*#__PURE__*/React__default["default"].createElement(neetoui.Button, {
12577
12593
  type: "submit",
12578
12594
  "data-cy": "add-member-submit-button",
12579
12595
  size: "large",
12580
12596
  style: "primary",
12581
12597
  label: instance.t("buttons.proceed"),
12598
+ onClick: () => setHasSubmitted(true),
12582
12599
  disabled: !dirty || isSubmitting,
12583
12600
  loading: isSubmitting
12584
12601
  }), /*#__PURE__*/React__default["default"].createElement(neetoui.Button, {
@@ -12586,7 +12603,7 @@ const ManageMember = _ref => {
12586
12603
  size: "large",
12587
12604
  style: "text",
12588
12605
  label: instance.t("buttons.cancel"),
12589
- onClick: onClose
12606
+ onClick: onPaneClose
12590
12607
  })));
12591
12608
  }));
12592
12609
  };
@@ -12676,6 +12693,11 @@ const TeamMembers = _ref => {
12676
12693
  }));
12677
12694
  }
12678
12695
  };
12696
+ const updateMemberAlertProps = {
12697
+ member: selectedMember,
12698
+ metaName,
12699
+ config
12700
+ };
12679
12701
 
12680
12702
  const handleUpdateMember = async () => {
12681
12703
  const id = selectedMember.id,
@@ -12793,8 +12815,8 @@ const TeamMembers = _ref => {
12793
12815
  selectedMember: selectedMember
12794
12816
  }), /*#__PURE__*/React__default["default"].createElement(neetoui.Alert, {
12795
12817
  isOpen: isOpen.alert,
12796
- title: renderUpdateAlertTitle(selectedMember, metaName, config),
12797
- message: renderUpdateAlertMessage(selectedMember, metaName, config),
12818
+ title: renderUpdateAlert("title", updateMemberAlertProps),
12819
+ message: renderUpdateAlert("message", updateMemberAlertProps),
12798
12820
  submitButtonLabel: instance.t("buttons.proceed"),
12799
12821
  cancelButtonLabel: instance.t("buttons.cancel"),
12800
12822
  onClose: handleAlertClose,
@@ -12817,7 +12839,7 @@ var index = withReactQuery(TeamMembers);
12817
12839
 
12818
12840
  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}}
12819
12841
 
12820
- 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-modal__header {\n margin-bottom: 0.5rem;\n}\n.ntm-members-modal__body > * + * {\n margin-top: 1rem;\n}\n.ntm-members-modal__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}";
12842
+ 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}";
12821
12843
  n(css,{});
12822
12844
 
12823
12845
  exports.Invitations = index$2;