@bigbinary/neeto-team-members-frontend 3.1.3 → 3.1.5

package/dist/index.js

@@ -1,5 +1,5 @@
 import { globalProps, taxonomies } from '@bigbinary/neeto-commons-frontend/initializers';
-import React, { useState, useMemo, useEffect, useRef, Fragment, memo, useCallback } from 'react';
+import require$$0, { useState, useMemo, useEffect, createElement, useRef, Fragment as Fragment$1, memo, useCallback } from 'react';
 import Pane from '@bigbinary/neetoui/Pane';
 import Typography from '@bigbinary/neetoui/Typography';
 import { useTranslation, Trans } from 'react-i18next';
@@ -27,6 +27,7 @@ import { object, string } from 'yup';
 import { replace as replace$1, is, prop, append, equals, concat, groupBy, pluck, not, map, identical, modify, includes, __, isEmpty, filter as filter$1, identity, clamp, curry, mergeLeft, isNil, toLower, assoc, trim, isNotNil, keys, pick, move, head, reverse } from 'ramda';
 import { useField, useFormikContext } from 'formik';
 import Avatar from '@bigbinary/neetoui/Avatar';
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 import withImmutableActions from '@bigbinary/neeto-commons-frontend/react-utils/withImmutableActions';
 import { create as create$2 } from 'zustand';
 import { shallow } from 'zustand/shallow';
@@ -47,9 +48,10 @@ import SubHeaderMolecule from '@bigbinary/neeto-molecules/SubHeader';
 import TableWrapper from '@bigbinary/neeto-molecules/TableWrapper';
 import Table$1 from '@bigbinary/neetoui/Table';
 import { useHistory } from 'react-router-dom';
-import require$$0 from 'util';
+import require$$0$1 from 'util';
 import Dropdown from '@bigbinary/neetoui/Dropdown';
 import Tag from '@bigbinary/neetoui/Tag';
+import useFetchNeetoApps from '@bigbinary/neeto-commons-frontend/react-utils/useFetchNeetoApps';
 import Switch from '@bigbinary/neetoui/formik/Switch';
 import Modal from '@bigbinary/neetoui/Modal';
 import MultiEmailInput from '@bigbinary/neetoui/formik/MultiEmailInput';
@@ -599,6 +601,9 @@ var DATE_FORMAT_OPTIONS = [{
 }, {
   label: t$1("neetoTeamMembers.profile.common.ddmmyy"),
   value: "%d/%m/%Y"
+}, {
+  label: t$1("neetoTeamMembers.profile.common.yymmdd"),
+  value: "%Y/%m/%d"
 }];
 var SUBSCRIPTION_PLANS = Object.freeze({
   PRO: "pro",
@@ -622,16 +627,16 @@ var profileApi = {
   updateUser: updateUser
 };
 
-function ownKeys$g(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
-function _objectSpread$g(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$g(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$g(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function ownKeys$j(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread$j(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$j(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$j(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var useFetchProfile = function useFetchProfile(options) {
-  return useQuery([QUERY_KEYS.USER_PROFILE], profileApi.fetchUserDetails, _objectSpread$g({
+  return useQuery([QUERY_KEYS.USER_PROFILE], profileApi.fetchUserDetails, _objectSpread$j({
     staleTime: DEFAULT_STALE_TIME,
     refetchOnWindowFocus: true
   }, options));
 };
 var useUpdateProfileMutation = function useUpdateProfileMutation(options) {
-  return useMutationWithInvalidation(profileApi.updateUser, _objectSpread$g(_objectSpread$g({
+  return useMutationWithInvalidation(profileApi.updateUser, _objectSpread$j(_objectSpread$j({
     keysToInvalidate: [[QUERY_KEYS.USER_PROFILE]]
   }, options), {}, {
     onSuccess: function onSuccess() {
@@ -657,10 +662,10 @@ var VALIDATION_ERRORS = {
   })
 };
 
-function ownKeys$f(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
-function _objectSpread$f(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$f(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$f(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function ownKeys$i(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread$i(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$i(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$i(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var useFetchCountries = function useFetchCountries(options) {
-  return useQuery([QUERY_KEYS.COUNTRIES_LIST], profileApi.fetchCountries, _objectSpread$f({
+  return useQuery([QUERY_KEYS.COUNTRIES_LIST], profileApi.fetchCountries, _objectSpread$i({
     staleTime: DEFAULT_STALE_TIME
   }, options));
 };
@@ -806,57 +811,65 @@ var ProfileImage = function ProfileImage() {
     }
     return null;
   };
-  return /*#__PURE__*/React.createElement("div", {
-    className: "mb-8 flex flex-row justify-start"
-  }, /*#__PURE__*/React.createElement("div", {
-    className: "flex-shrink-0"
-  }, isPresent(avatarDetails === null || avatarDetails === void 0 ? void 0 : avatarDetails.imageUrl) && /*#__PURE__*/React.createElement("div", {
-    className: "relative z-10"
-  }, /*#__PURE__*/React.createElement("div", {
-    className: "neeto-ui-bg-gray-300 neeto-ui-rounded-full absolute right-0 top-0 cursor-pointer p-0.5",
-    "data-cy": "profile-image-remove-button",
-    onClick: handleRemoveImage
-  }, /*#__PURE__*/React.createElement(Delete$1, {
-    size: IMAGE_DELETE_BUTTON_SIZE
-  }))), /*#__PURE__*/React.createElement(Avatar, {
-    size: "extraLarge",
-    user: avatarDetails
-  })), /*#__PURE__*/React.createElement("div", {
-    className: "ml-4 flex flex-col"
-  }, /*#__PURE__*/React.createElement(Label, {
-    className: "neeto-ui-text-black mb-1 font-medium"
-  }, t("neetoTeamMembers.profile.avatar.profilePicture")), /*#__PURE__*/React.createElement(Typography, {
-    className: "neeto-ui-text-gray-700 mb-2",
-    style: "body3"
-  }, /*#__PURE__*/React.createElement(Trans, {
-    components: {
-      code: /*#__PURE__*/React.createElement("code", null)
-    },
-    i18nKey: "neetoTeamMembers.profile.avatar.profilePictureUploadMessage",
-    values: {
-      limit: globalProps.endUserUploadedFileSizeLimitInMb
-    }
-  })), /*#__PURE__*/React.createElement("div", {
-    className: "neeto-ui-file-upload flex flex-row ",
-    "data-cy": "profile-image-upload-container"
-  }, /*#__PURE__*/React.createElement("label", {
-    className: "neeto-ui-btn--style-secondary neeto-ui-btn m-0 mr-3 ",
-    "data-cy": "profile-image-upload-label",
-    htmlFor: "uploadProfileImage"
-  }, avatarDetails !== null && avatarDetails !== void 0 && avatarDetails.imageUrl ? t("neetoTeamMembers.profile.avatar.changeProfilePicture") : t("neetoTeamMembers.profile.avatar.uploadProfilePicture")), /*#__PURE__*/React.createElement("input", {
-    hidden: true,
-    accept: "image/*",
-    "data-cy": "profile-image-upload-file-field",
-    id: "uploadProfileImage",
-    key: avatarDetails === null || avatarDetails === void 0 ? void 0 : avatarDetails.imageUrl,
-    name: "profile_image_path",
-    type: "file",
-    onChange: onProfileImageChange
-  }))));
+  return /*#__PURE__*/jsxs("div", {
+    className: "mb-8 flex flex-row justify-start",
+    children: [/*#__PURE__*/jsxs("div", {
+      className: "flex-shrink-0",
+      children: [isPresent(avatarDetails === null || avatarDetails === void 0 ? void 0 : avatarDetails.imageUrl) && /*#__PURE__*/jsx("div", {
+        className: "relative z-10",
+        children: /*#__PURE__*/jsx("div", {
+          className: "neeto-ui-bg-gray-300 neeto-ui-rounded-full absolute right-0 top-0 cursor-pointer p-0.5",
+          "data-cy": "profile-image-remove-button",
+          onClick: handleRemoveImage,
+          children: /*#__PURE__*/jsx(Delete$1, {
+            size: IMAGE_DELETE_BUTTON_SIZE
+          })
+        })
+      }), /*#__PURE__*/jsx(Avatar, {
+        size: "extraLarge",
+        user: avatarDetails
+      })]
+    }), /*#__PURE__*/jsxs("div", {
+      className: "ml-4 flex flex-col",
+      children: [/*#__PURE__*/jsx(Label, {
+        className: "neeto-ui-text-black mb-1 font-medium",
+        children: t("neetoTeamMembers.profile.avatar.profilePicture")
+      }), /*#__PURE__*/jsx(Typography, {
+        className: "neeto-ui-text-gray-700 mb-2",
+        style: "body3",
+        children: /*#__PURE__*/jsx(Trans, {
+          components: {
+            code: /*#__PURE__*/jsx("code", {})
+          },
+          i18nKey: "neetoTeamMembers.profile.avatar.profilePictureUploadMessage",
+          values: {
+            limit: globalProps.endUserUploadedFileSizeLimitInMb
+          }
+        })
+      }), /*#__PURE__*/jsxs("div", {
+        className: "neeto-ui-file-upload flex flex-row ",
+        "data-cy": "profile-image-upload-container",
+        children: [/*#__PURE__*/jsx("label", {
+          className: "neeto-ui-btn--style-secondary neeto-ui-btn m-0 mr-3 ",
+          "data-cy": "profile-image-upload-label",
+          htmlFor: "uploadProfileImage",
+          children: avatarDetails !== null && avatarDetails !== void 0 && avatarDetails.imageUrl ? t("neetoTeamMembers.profile.avatar.changeProfilePicture") : t("neetoTeamMembers.profile.avatar.uploadProfilePicture")
+        }), /*#__PURE__*/jsx("input", {
+          hidden: true,
+          accept: "image/*",
+          "data-cy": "profile-image-upload-file-field",
+          id: "uploadProfileImage",
+          name: "profile_image_path",
+          type: "file",
+          onChange: onProfileImageChange
+        }, avatarDetails === null || avatarDetails === void 0 ? void 0 : avatarDetails.imageUrl)]
+      })]
+    })]
+  });
 };
 
-function ownKeys$e(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
-function _objectSpread$e(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$e(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$e(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function ownKeys$h(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread$h(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$h(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$h(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var ChangeProfile = function ChangeProfile(_ref) {
   var onClose = _ref.onClose;
   var _useTranslation = useTranslation(),
@@ -954,7 +967,7 @@ var ChangeProfile = function ChangeProfile(_ref) {
               url: url
             };
           case 14:
-            payload = _objectSpread$e(_objectSpread$e({}, values), {}, {
+            payload = _objectSpread$h(_objectSpread$h({}, values), {}, {
               timeZone: selectedTimeZoneOption === null || selectedTimeZoneOption === void 0 ? void 0 : selectedTimeZoneOption.name,
               avatar: avatar
             });
@@ -979,9 +992,11 @@ var ChangeProfile = function ChangeProfile(_ref) {
     };
   }();
   if (isUpdatingProfile || isFetchingCountriesList || isFetchingUserDetails) {
-    return /*#__PURE__*/React.createElement(Container, null, /*#__PURE__*/React.createElement(PageLoader, null));
+    return /*#__PURE__*/jsx(Container, {
+      children: /*#__PURE__*/jsx(PageLoader, {})
+    });
   }
-  return /*#__PURE__*/React.createElement(Form, {
+  return /*#__PURE__*/jsx(Form, {
     formProps: {
       "data-cy": "ntm-profile-form"
     },
@@ -989,105 +1004,119 @@ var ChangeProfile = function ChangeProfile(_ref) {
       initialValues: initialFormValues,
       validationSchema: PROFILE_VALIDATION_SCHEMA,
       onSubmit: handleSubmit
-    }
-  }, function (_ref3) {
-    var setFieldValue = _ref3.setFieldValue,
-      values = _ref3.values;
-    return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Pane.Body, {
-      className: "w-full"
-    }, /*#__PURE__*/React.createElement("div", {
-      className: "w-full space-y-6 pb-6"
-    }, /*#__PURE__*/React.createElement(ProfileImage, null), /*#__PURE__*/React.createElement("div", {
-      className: "grid grid-cols-2 gap-4"
-    }, /*#__PURE__*/React.createElement(Input, {
-      autoFocus: true,
-      required: true,
-      "data-cy": "profile-first-name-text-field",
-      "data-test-id": "ntm-profile-first-name",
-      label: t("neetoTeamMembers.profile.inputs.label.firstName"),
-      name: "firstName",
-      type: "text",
-      placeholder: t("neetoTeamMembers.profile.inputs.placeholder.firstName")
-    }), /*#__PURE__*/React.createElement(Input, {
-      required: true,
-      "data-cy": "profile-last-name-text-field",
-      "data-test-id": "ntm-profile-last-name",
-      label: t("neetoTeamMembers.profile.inputs.label.lastName"),
-      name: "lastName",
-      type: "text",
-      placeholder: t("neetoTeamMembers.profile.inputs.placeholder.lastName")
-    })), /*#__PURE__*/React.createElement(Select, {
-      required: true,
-      "data-cy": "ntm-profile-country-select",
-      label: t("neetoTeamMembers.profile.inputs.label.selectCountry"),
-      name: "countryId",
-      options: countryDropdownOptions,
-      value: selectedCountryOption,
-      onChange: function onChange(option) {
-        var dependentFields = handleCountryChange(option);
-        setFieldValue("dateFormat", dependentFields === null || dependentFields === void 0 ? void 0 : dependentFields.dateFormat);
-        setFieldValue("timeZone", dependentFields === null || dependentFields === void 0 ? void 0 : dependentFields.timeZone);
-      }
-    }), /*#__PURE__*/React.createElement("div", {
-      className: "space-y-2"
-    }, /*#__PURE__*/React.createElement(Select, {
-      required: true,
-      "data-cy": "ntm-profile-time-zone-select",
-      name: "timeZoneId",
-      options: timeZoneDropdownOptions,
-      value: selectedTimeZoneOption,
-      label: t("neetoTeamMembers.profile.inputs.label.selectTimeZone"),
-      onChange: function onChange(option) {
-        setFieldValue("timeZone", option === null || option === void 0 ? void 0 : option.name);
-        handleTimeZoneChange(option);
-      }
-    })), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Label, {
-      required: true
-    }, t("neetoTeamMembers.profile.inputs.label.dateFormat")), /*#__PURE__*/React.createElement(Radio, {
-      className: "mt-2 space-x-4"
-    }, DATE_FORMAT_OPTIONS.map(function (_ref4) {
-      var label = _ref4.label,
-        value = _ref4.value;
-      return /*#__PURE__*/React.createElement(Radio.Item, {
-        label: label,
-        value: value,
-        checked: values.dateFormat === value,
-        "data-cy": "ntm-profile-date-format-radio",
-        key: value,
-        name: "dateFormat",
-        onChange: function onChange(event) {
-          return setFieldValue("dateFormat", event.target.value);
-        }
+    },
+    children: function children(_ref3) {
+      var setFieldValue = _ref3.setFieldValue,
+        values = _ref3.values;
+      return /*#__PURE__*/jsxs(Fragment, {
+        children: [/*#__PURE__*/jsxs(Pane.Body, {
+          className: "w-full",
+          children: [/*#__PURE__*/jsxs("div", {
+            className: "w-full space-y-6 pb-6",
+            children: [/*#__PURE__*/jsx(ProfileImage, {}), /*#__PURE__*/jsxs("div", {
+              className: "grid grid-cols-2 gap-4",
+              children: [/*#__PURE__*/jsx(Input, {
+                autoFocus: true,
+                required: true,
+                "data-cy": "profile-first-name-text-field",
+                "data-test-id": "ntm-profile-first-name",
+                label: t("neetoTeamMembers.profile.inputs.label.firstName"),
+                name: "firstName",
+                type: "text",
+                placeholder: t("neetoTeamMembers.profile.inputs.placeholder.firstName")
+              }), /*#__PURE__*/jsx(Input, {
+                required: true,
+                "data-cy": "profile-last-name-text-field",
+                "data-test-id": "ntm-profile-last-name",
+                label: t("neetoTeamMembers.profile.inputs.label.lastName"),
+                name: "lastName",
+                type: "text",
+                placeholder: t("neetoTeamMembers.profile.inputs.placeholder.lastName")
+              })]
+            }), /*#__PURE__*/jsx(Select, {
+              required: true,
+              "data-cy": "ntm-profile-country-select",
+              label: t("neetoTeamMembers.profile.inputs.label.selectCountry"),
+              name: "countryId",
+              options: countryDropdownOptions,
+              value: selectedCountryOption,
+              onChange: function onChange(option) {
+                var dependentFields = handleCountryChange(option);
+                setFieldValue("dateFormat", dependentFields === null || dependentFields === void 0 ? void 0 : dependentFields.dateFormat);
+                setFieldValue("timeZone", dependentFields === null || dependentFields === void 0 ? void 0 : dependentFields.timeZone);
+              }
+            }), /*#__PURE__*/jsx("div", {
+              className: "space-y-2",
+              children: /*#__PURE__*/jsx(Select, {
+                required: true,
+                "data-cy": "ntm-profile-time-zone-select",
+                name: "timeZoneId",
+                options: timeZoneDropdownOptions,
+                value: selectedTimeZoneOption,
+                label: t("neetoTeamMembers.profile.inputs.label.selectTimeZone"),
+                onChange: function onChange(option) {
+                  setFieldValue("timeZone", option === null || option === void 0 ? void 0 : option.name);
+                  handleTimeZoneChange(option);
+                }
+              })
+            }), /*#__PURE__*/jsxs("div", {
+              children: [/*#__PURE__*/jsx(Label, {
+                required: true,
+                children: t("neetoTeamMembers.profile.inputs.label.dateFormat")
+              }), /*#__PURE__*/jsx(Radio, {
+                className: "mt-2 space-x-4",
+                children: DATE_FORMAT_OPTIONS.map(function (_ref4) {
+                  var label = _ref4.label,
+                    value = _ref4.value;
+                  return /*#__PURE__*/createElement(Radio.Item, {
+                    label: label,
+                    value: value,
+                    checked: values.dateFormat === value,
+                    "data-cy": "ntm-profile-date-format-radio",
+                    key: value,
+                    name: "dateFormat",
+                    onChange: function onChange(event) {
+                      return setFieldValue("dateFormat", event.target.value);
+                    }
+                  });
+                })
+              })]
+            })]
+          }), /*#__PURE__*/jsxs(Callout, {
+            className: "neeto-ui-bg-gray-100 neeto-ui-border-gray-300 mt-8 flex w-full items-center",
+            children: [/*#__PURE__*/jsx(Typography, {
+              style: "body2",
+              children: t("neetoTeamMembers.profile.common.toUpdateProfile")
+            }), /*#__PURE__*/jsx(Button, {
+              "data-cy": "ntm-visit-auth-button",
+              "data-test-id": "ntm-visit-auth-button",
+              href: MY_PROFILE_PATH,
+              icon: ExternalLink,
+              label: t("neetoTeamMembers.profile.common.neetoAuth"),
+              style: "link",
+              target: "_blank"
+            })]
+          })]
+        }), /*#__PURE__*/jsx(Pane.Footer, {
+          className: "flex items-center space-x-2",
+          children: /*#__PURE__*/jsx(ActionBlock, {
+            cancelButtonProps: {
+              "data-test-id": "ntm-profile-cancel-button",
+              "data-cy": "ntm-profile-cancel-button",
+              disabled: false,
+              style: "text",
+              className: "ml-2",
+              onClick: onClose
+            },
+            submitButtonProps: {
+              "data-cy": "ntm-profile-submit-button",
+              "data-test-id": "ntm-profile-save-changes-button",
+              loading: isUpdatingProfile || isUploading
+            }
+          })
+        })]
       });
-    })))), /*#__PURE__*/React.createElement(Callout, {
-      className: "neeto-ui-bg-gray-100 neeto-ui-border-gray-300 mt-8 flex w-full items-center"
-    }, /*#__PURE__*/React.createElement(Typography, {
-      style: "body2"
-    }, t("neetoTeamMembers.profile.common.toUpdateProfile")), /*#__PURE__*/React.createElement(Button, {
-      "data-cy": "ntm-visit-auth-button",
-      "data-test-id": "ntm-visit-auth-button",
-      href: MY_PROFILE_PATH,
-      icon: ExternalLink,
-      label: t("neetoTeamMembers.profile.common.neetoAuth"),
-      style: "link",
-      target: "_blank"
-    }))), /*#__PURE__*/React.createElement(Pane.Footer, {
-      className: "flex items-center space-x-2"
-    }, /*#__PURE__*/React.createElement(ActionBlock, {
-      cancelButtonProps: {
-        "data-test-id": "ntm-profile-cancel-button",
-        "data-cy": "ntm-profile-cancel-button",
-        disabled: false,
-        style: "text",
-        className: "ml-2",
-        onClick: onClose
-      },
-      submitButtonProps: {
-        "data-cy": "ntm-profile-submit-button",
-        "data-test-id": "ntm-profile-save-changes-button",
-        loading: isUpdatingProfile || isUploading
-      }
-    })));
+    }
   });
 };
 
@@ -1128,17 +1157,22 @@ var Profile$1 = function Profile() {
   var onClose = function onClose() {
     return setIsOpen(false);
   };
-  return /*#__PURE__*/React.createElement("div", {
-    className: "w-full"
-  }, /*#__PURE__*/React.createElement(Pane, {
-    isOpen: isOpen,
-    onClose: onClose
-  }, /*#__PURE__*/React.createElement(Pane.Header, null, /*#__PURE__*/React.createElement(Typography, {
-    style: "h2",
-    weight: "semibold"
-  }, t("neetoTeamMembers.profile.common.myProfile"))), /*#__PURE__*/React.createElement(ChangeProfile, {
-    onClose: onClose
-  })));
+  return /*#__PURE__*/jsx("div", {
+    className: "w-full",
+    children: /*#__PURE__*/jsxs(Pane, {
+      isOpen: isOpen,
+      onClose: onClose,
+      children: [/*#__PURE__*/jsx(Pane.Header, {
+        children: /*#__PURE__*/jsx(Typography, {
+          style: "h2",
+          weight: "semibold",
+          children: t("neetoTeamMembers.profile.common.myProfile")
+        })
+      }), /*#__PURE__*/jsx(ChangeProfile, {
+        onClose: onClose
+      })]
+    })
+  });
 };
 
 var dist = {exports: {}};
@@ -1147,7 +1181,7 @@ dist.exports;
 
 (function (module, exports) {
 	(function webpackUniversalModuleDefinition(root, factory) {
-		module.exports = factory(React);
+		module.exports = factory(require$$0);
 	})(commonjsGlobal, function(__WEBPACK_EXTERNAL_MODULE_4__) {
 	return /******/ (function(modules) { // webpackBootstrap
 	/******/ 	// The module cache
@@ -2528,15 +2562,17 @@ var queryClient = new QueryClient({
   }
 });
 
-/* eslint-disable @bigbinary/neeto/file-name-and-export-name-standards */
+function ownKeys$g(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread$g(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$g(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$g(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var withReactQuery = function withReactQuery(Component) {
   var QueryWrapper = function QueryWrapper(props) {
-    return /*#__PURE__*/React.createElement(QueryClientProvider, {
-      client: queryClient
-    }, /*#__PURE__*/React.createElement(Component, props), /*#__PURE__*/React.createElement(ReactQueryDevtools, {
-      initialIsOpen: false,
-      position: "bottom-right"
-    }));
+    return /*#__PURE__*/jsxs(QueryClientProvider, {
+      client: queryClient,
+      children: [/*#__PURE__*/jsx(Component, _objectSpread$g({}, props)), /*#__PURE__*/jsx(ReactQueryDevtools, {
+        initialIsOpen: false,
+        position: "bottom-right"
+      })]
+    });
   };
   return QueryWrapper;
 };
@@ -2548,11 +2584,11 @@ var permissionsApi = {
   fetch: fetch$3
 };
 
-function ownKeys$d(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
-function _objectSpread$d(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$d(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$d(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function ownKeys$f(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread$f(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$f(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$f(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var useFetchPermissions = function useFetchPermissions() {
   var options = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
-  return useQuery(QUERY_KEYS.PERMISSIONS, permissionsApi.fetch, _objectSpread$d({
+  return useQuery(QUERY_KEYS.PERMISSIONS, permissionsApi.fetch, _objectSpread$f({
     select: function select(response) {
       return response === null || response === void 0 ? void 0 : response.permissions;
     }
@@ -2624,11 +2660,11 @@ var _excluded$3 = ["onSuccess"],
   _excluded2$2 = ["onSuccess"],
   _excluded3 = ["onSuccess"],
   _excluded4 = ["onSuccess"];
-function ownKeys$c(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
-function _objectSpread$c(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$c(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$c(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function ownKeys$e(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread$e(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$e(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$e(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var useFetchRoles = function useFetchRoles() {
   var options = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
-  return useQuery(QUERY_KEYS.ROLES, organizationRolesApi.fetch, _objectSpread$c({
+  return useQuery(QUERY_KEYS.ROLES, organizationRolesApi.fetch, _objectSpread$e({
     select: function select(response) {
       return response === null || response === void 0 ? void 0 : response.organizationRoles;
     }
@@ -2636,12 +2672,12 @@ var useFetchRoles = function useFetchRoles() {
 };
 var useFetchGlobalRoles = function useFetchGlobalRoles() {
   var options = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
-  return useQuery(QUERY_KEYS.GLOBAL_ROLES, globalRolesApi.fetch, _objectSpread$c({}, options));
+  return useQuery(QUERY_KEYS.GLOBAL_ROLES, globalRolesApi.fetch, _objectSpread$e({}, options));
 };
 var useCreateRole = function useCreateRole(_ref) {
   var _onSuccess = _ref.onSuccess,
     options = _objectWithoutProperties(_ref, _excluded$3);
-  return useMutation(organizationRolesApi.create, _objectSpread$c({
+  return useMutation(organizationRolesApi.create, _objectSpread$e({
     onSuccess: function onSuccess() {
       queryClient.invalidateQueries(QUERY_KEYS.TEAMS_DEPENDENCIES);
       queryClient.invalidateQueries(QUERY_KEYS.ROLES);
@@ -2656,7 +2692,7 @@ var useUpdateRole = function useUpdateRole(_ref2) {
     var id = _ref3.id,
       payload = _ref3.payload;
     return organizationRolesApi.update(id, payload);
-  }, _objectSpread$c({
+  }, _objectSpread$e({
     onSuccess: function onSuccess() {
       queryClient.invalidateQueries(QUERY_KEYS.TEAMS);
       queryClient.invalidateQueries(QUERY_KEYS.TEAMS_DEPENDENCIES);
@@ -2673,7 +2709,7 @@ var useDestroyRole = function useDestroyRole(_ref4) {
     var id = _ref5.id,
       payload = _ref5.payload;
     return organizationRolesApi.destroy(id, payload);
-  }, _objectSpread$c({
+  }, _objectSpread$e({
     onSuccess: function onSuccess() {
       queryClient.invalidateQueries(QUERY_KEYS.TEAMS);
       queryClient.invalidateQueries(QUERY_KEYS.TEAMS_DEPENDENCIES);
@@ -2685,7 +2721,7 @@ var useDestroyRole = function useDestroyRole(_ref4) {
 var useBulkUpdateRoles = function useBulkUpdateRoles(_ref6) {
   var _onSuccess4 = _ref6.onSuccess,
     options = _objectWithoutProperties(_ref6, _excluded4);
-  return useMutation(organizationRolesApi.bulkUpdate, _objectSpread$c({
+  return useMutation(organizationRolesApi.bulkUpdate, _objectSpread$e({
     onSuccess: function onSuccess() {
       queryClient.invalidateQueries(QUERY_KEYS.TEAMS);
       queryClient.invalidateQueries(QUERY_KEYS.TEAMS_DEPENDENCIES);
@@ -2714,16 +2750,19 @@ var AddRoleButton = function AddRoleButton(_ref) {
   var _useTranslation = useTranslation(),
     t = _useTranslation.t;
   var isCreatePermissionGranted = config.permissions.create;
-  return /*#__PURE__*/React.createElement(Tooltip, {
+  return /*#__PURE__*/jsx(Tooltip, {
     content: t("neetoTeamMembers.tooltips.noPermissionToAddRole"),
     disabled: isCreatePermissionGranted,
-    position: "bottom"
-  }, /*#__PURE__*/React.createElement("span", null, /*#__PURE__*/React.createElement(Button, {
-    "data-cy": "ntm-add-role-button",
-    disabled: !isCreatePermissionGranted,
-    label: t("neetoTeamMembers.labels.addNewRole"),
-    onClick: onClick
-  })));
+    position: "bottom",
+    children: /*#__PURE__*/jsx("span", {
+      children: /*#__PURE__*/jsx(Button, {
+        "data-cy": "ntm-add-role-button",
+        disabled: !isCreatePermissionGranted,
+        label: t("neetoTeamMembers.labels.addNewRole"),
+        onClick: onClick
+      })
+    })
+  });
 };
 
 var Header$3 = function Header(_ref) {
@@ -2737,43 +2776,49 @@ var Header$3 = function Header(_ref) {
   var _useTranslation = useTranslation(),
     t = _useTranslation.t;
   var isUpdatePermissionGranted = config.permissions.update;
-  return /*#__PURE__*/React.createElement(NeetoHeader, {
+  return /*#__PURE__*/jsx(NeetoHeader, {
     breadcrumbs: renderBreadcrumbs(config === null || config === void 0 || (_config$header = config.header) === null || _config$header === void 0 ? void 0 : _config$header.breadcrumbs),
     className: "ntm-roles-header",
     searchProps: isNotEmpty(roles) ? renderSearchProps() : null,
-    actionBlock: isDirty ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Tooltip, {
-      content: t("neetoTeamMembers.tooltips.noPermissionToEditRoles"),
-      disabled: isUpdatePermissionGranted,
-      position: "bottom"
-    }, /*#__PURE__*/React.createElement("span", null, /*#__PURE__*/React.createElement(Button, {
-      "data-cy": "ntm-role-submission-button",
-      disabled: !isUpdatePermissionGranted,
-      label: t("neetoTeamMembers.buttons.saveChanges"),
-      type: "submit",
-      onClick: handleSubmit
-    }))), /*#__PURE__*/React.createElement(Button, {
-      "data-cy": "ntm-role-reset-button",
-      label: t("neetoTeamMembers.buttons.reset"),
-      style: "text",
-      type: "reset",
-      onClick: handleReset
-    })) : /*#__PURE__*/React.createElement(AddRoleButton, {
+    actionBlock: isDirty ? /*#__PURE__*/jsxs(Fragment, {
+      children: [/*#__PURE__*/jsx(Tooltip, {
+        content: t("neetoTeamMembers.tooltips.noPermissionToEditRoles"),
+        disabled: isUpdatePermissionGranted,
+        position: "bottom",
+        children: /*#__PURE__*/jsx("span", {
+          children: /*#__PURE__*/jsx(Button, {
+            "data-cy": "ntm-role-submission-button",
+            disabled: !isUpdatePermissionGranted,
+            label: t("neetoTeamMembers.buttons.saveChanges"),
+            type: "submit",
+            onClick: handleSubmit
+          })
+        })
+      }), /*#__PURE__*/jsx(Button, {
+        "data-cy": "ntm-role-reset-button",
+        label: t("neetoTeamMembers.buttons.reset"),
+        style: "text",
+        type: "reset",
+        onClick: handleReset
+      })]
+    }) : /*#__PURE__*/jsx(AddRoleButton, {
       config: config,
       onClick: function onClick() {
         return setIsNewRolePaneOpen(true);
       }
     }),
-    title: /*#__PURE__*/React.createElement("span", {
-      className: "neeto-ui-flex neeto-ui-items-center neeto-ui-gap-6"
-    }, t("neetoTeamMembers.common.role", PLURAL), (config === null || config === void 0 ? void 0 : config.helpUrl) && /*#__PURE__*/React.createElement(Button, {
-      className: "neeto-ui-mt-1",
-      "data-cy": "ntm-roles-permission-more-info-button",
-      href: config === null || config === void 0 ? void 0 : config.helpUrl,
-      icon: ExternalLink,
-      label: t("neetoTeamMembers.helpers.moreInfoAboutPermissions"),
-      style: "link",
-      target: "_blank"
-    }))
+    title: /*#__PURE__*/jsxs("span", {
+      className: "neeto-ui-flex neeto-ui-items-center neeto-ui-gap-6",
+      children: [t("neetoTeamMembers.common.role", PLURAL), (config === null || config === void 0 ? void 0 : config.helpUrl) && /*#__PURE__*/jsx(Button, {
+        className: "neeto-ui-mt-1",
+        "data-cy": "ntm-roles-permission-more-info-button",
+        href: config === null || config === void 0 ? void 0 : config.helpUrl,
+        icon: ExternalLink,
+        label: t("neetoTeamMembers.helpers.moreInfoAboutPermissions"),
+        style: "link",
+        target: "_blank"
+      })]
+    })
   });
 };
 
@@ -2866,8 +2911,8 @@ var ROLE_FORMIK_PROPS = {
   validationSchema: ADD_ROLE_FORM_VALIDATION_SCHEMA
 };
 
-function ownKeys$b(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
-function _objectSpread$b(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$b(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$b(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function ownKeys$d(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread$d(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$d(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$d(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var sortPermissionsBySequence = function sortPermissionsBySequence() {
   var _permissions$;
   var permissions = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
@@ -2909,7 +2954,7 @@ var getModifiedPermissions = function getModifiedPermissions() {
 var attachChildrenRecursively = function attachChildrenRecursively(permission, permissionsNameMap, permissionRelationConfig) {
   var _ref = permissionRelationConfig[permission.name] || {},
     children = _ref.children;
-  return children ? _objectSpread$b(_objectSpread$b({}, permission), {}, {
+  return children ? _objectSpread$d(_objectSpread$d({}, permission), {}, {
     children: children.flatMap(function (childName) {
       return attachChildrenRecursively(permissionsNameMap[childName][0], permissionsNameMap, permissionRelationConfig);
     })
@@ -2935,8 +2980,8 @@ var getChildrenRemovedFromRoot = function getChildrenRemovedFromRoot(_ref3) {
   });
 };
 
-function ownKeys$a(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
-function _objectSpread$a(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$a(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$a(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function ownKeys$c(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread$c(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$c(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$c(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var Permissions = function Permissions(_ref) {
   var _ref$permissions = _ref.permissions,
     permissions = _ref$permissions === void 0 ? [] : _ref$permissions,
@@ -3009,59 +3054,69 @@ var Permissions = function Permissions(_ref) {
         return pluck("description", permissionsNameMap[name]);
       }).join(", ")
     });
-    return /*#__PURE__*/React.createElement(Fragment, {
-      key: id
-    }, /*#__PURE__*/React.createElement(Tooltip, {
-      content: tooltipMessage,
-      disabled: !tooltipMessage || isChecked,
-      position: "left-start"
-    }, /*#__PURE__*/React.createElement("div", {
-      className: "ntm-roles-permission__card"
-    }, /*#__PURE__*/React.createElement(Checkbox, {
-      checked: isChecked,
-      className: "flex-grow-0",
-      "data-cy": "ntm-roles-permission-checkbox",
-      disabled: isCheckingDisabled,
-      label: description,
-      onChange: function onChange() {
-        return handleTogglePermission(id);
-      }
-    }), /*#__PURE__*/React.createElement("div", {
-      className: "ntm-roles-permission__sub-blocks neeto-ui-relative neeto-ui-pl-6"
-    }, sortedChildren === null || sortedChildren === void 0 ? void 0 : sortedChildren.map(function (childPermission) {
-      return renderPermission(_objectSpread$a(_objectSpread$a({}, childPermission), {}, {
-        isParentChecked: isChecked
-      }));
-    })))));
+    return /*#__PURE__*/jsx(Fragment$1, {
+      children: /*#__PURE__*/jsx(Tooltip, {
+        content: tooltipMessage,
+        disabled: !tooltipMessage || isChecked,
+        position: "left-start",
+        children: /*#__PURE__*/jsxs("div", {
+          className: "ntm-roles-permission__card",
+          children: [/*#__PURE__*/jsx(Checkbox, {
+            checked: isChecked,
+            className: "flex-grow-0",
+            "data-cy": "ntm-roles-permission-checkbox",
+            disabled: isCheckingDisabled,
+            label: description,
+            onChange: function onChange() {
+              return handleTogglePermission(id);
+            }
+          }), /*#__PURE__*/jsx("div", {
+            className: "ntm-roles-permission__sub-blocks neeto-ui-relative neeto-ui-pl-6",
+            children: sortedChildren === null || sortedChildren === void 0 ? void 0 : sortedChildren.map(function (childPermission) {
+              return renderPermission(_objectSpread$c(_objectSpread$c({}, childPermission), {}, {
+                isParentChecked: isChecked
+              }));
+            })
+          })]
+        })
+      })
+    }, id);
   };
-  return /*#__PURE__*/React.createElement("div", {
-    className: "ntm-roles-pane__body-wrapper"
-  }, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Typography, {
-    lineHeight: "normal",
-    style: "h4",
-    weight: "semibold"
-  }, t("neetoTeamMembers.common.permission", SINGULAR)), /*#__PURE__*/React.createElement(Typography, {
-    lineHeight: "normal",
-    style: "body2"
-  }, t("neetoTeamMembers.helpers.configPermissions"))), Object.keys(groupedPermissions).map(function (category) {
-    return /*#__PURE__*/React.createElement("div", {
-      className: "ntm-roles-permission",
-      key: category,
-      "data-cy": "ntm-roles-permission-card"
-    }, /*#__PURE__*/React.createElement(Typography, {
-      className: "ntm-roles-permission__heading neeto-ui-mb-2",
-      "data-cy": "ntm-roles-permission-category-title",
-      lineHeight: "normal",
-      style: "h5",
-      weight: "bold"
-    }, category), /*#__PURE__*/React.createElement("div", {
-      className: "ntm-roles-permission-category-card"
-    }, groupedPermissions[category].map(renderPermission)));
-  }));
+  return /*#__PURE__*/jsxs("div", {
+    className: "ntm-roles-pane__body-wrapper",
+    children: [/*#__PURE__*/jsxs("div", {
+      children: [/*#__PURE__*/jsx(Typography, {
+        lineHeight: "normal",
+        style: "h4",
+        weight: "semibold",
+        children: t("neetoTeamMembers.common.permission", SINGULAR)
+      }), /*#__PURE__*/jsx(Typography, {
+        lineHeight: "normal",
+        style: "body2",
+        children: t("neetoTeamMembers.helpers.configPermissions")
+      })]
+    }), Object.keys(groupedPermissions).map(function (category) {
+      return /*#__PURE__*/jsxs("div", {
+        className: "ntm-roles-permission",
+        "data-cy": "ntm-roles-permission-card",
+        children: [/*#__PURE__*/jsx(Typography, {
+          className: "ntm-roles-permission__heading neeto-ui-mb-2",
+          "data-cy": "ntm-roles-permission-category-title",
+          lineHeight: "normal",
+          style: "h5",
+          weight: "bold",
+          children: category
+        }), /*#__PURE__*/jsx("div", {
+          className: "ntm-roles-permission-category-card",
+          children: groupedPermissions[category].map(renderPermission)
+        })]
+      }, category);
+    })]
+  });
 };
 
-function ownKeys$9(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
-function _objectSpread$9(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$9(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$9(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function ownKeys$b(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread$b(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$b(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$b(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var ManageRoles = function ManageRoles(_ref) {
   var config = _ref.config,
     _ref$isOpen = _ref.isOpen,
@@ -3089,7 +3144,7 @@ var ManageRoles = function ManageRoles(_ref) {
   var isSubmitting = isCreatingRole || isUpdatingRole;
   var handleSubmit = function handleSubmit(formValues) {
     var payload = {
-      organizationRole: _objectSpread$9(_objectSpread$9({}, formValues), {}, {
+      organizationRole: _objectSpread$b(_objectSpread$b({}, formValues), {}, {
         name: formValues.name.trim(),
         description: formValues.description.trim()
       })
@@ -3100,68 +3155,82 @@ var ManageRoles = function ManageRoles(_ref) {
     }) : createRole(payload);
   };
   var initialValues = isEdit ? selectedRole : ADD_ROLE_FORM_INITIAL_VALUES;
-  var formikProps = _objectSpread$9(_objectSpread$9({}, ROLE_FORMIK_PROPS), {}, {
+  var formikProps = _objectSpread$b(_objectSpread$b({}, ROLE_FORMIK_PROPS), {}, {
     initialValues: initialValues,
     onSubmit: handleSubmit
   });
   var isReadOnly = selectedRole.kind === "system";
   var isDisabled = ADMIN_ROLES.includes(selectedRole.name) && isReadOnly;
-  return /*#__PURE__*/React.createElement(Pane, {
+  return /*#__PURE__*/jsxs(Pane, {
     initialFocusRef: inputReference,
     isOpen: isOpen,
-    onClose: onClose
-  }, /*#__PURE__*/React.createElement(Pane.Header, null, /*#__PURE__*/React.createElement(Typography, {
-    "data-cy": "ntm-add-role-title",
-    style: "h2"
-  }, isEdit ? t("neetoTeamMembers.labels.editRole") : t("neetoTeamMembers.labels.addNewRole"))), /*#__PURE__*/React.createElement(Form, {
-    formikProps: formikProps,
-    ref: formReference
-  }, function (_ref2) {
-    var _config$permissionRel;
-    var dirty = _ref2.dirty;
-    return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(ScrollToErrorField, {
-      formRef: formReference
-    }), /*#__PURE__*/React.createElement(Pane.Body, null, /*#__PURE__*/React.createElement("div", {
-      className: "ntm-roles-pane__body"
-    }, /*#__PURE__*/React.createElement("div", {
-      className: "ntm-roles-pane__body-wrapper"
-    }, /*#__PURE__*/React.createElement(Input, {
-      required: true,
-      unlimitedChars: true,
-      "data-cy": "ntm-add-role-name-text-field",
-      label: t("neetoTeamMembers.common.name"),
-      maxLength: ROLE_NAME_MAX_LENGTH,
-      name: "name",
-      placeholder: t("neetoTeamMembers.placeholders.enterName"),
-      readOnly: isReadOnly,
-      ref: inputReference
-    }), /*#__PURE__*/React.createElement(Textarea, {
-      unlimitedChars: true,
-      "data-cy": "ntm-add-role-description-text-field",
-      label: t("neetoTeamMembers.common.description"),
-      maxLength: ROLE_DESCRIPTION_MAX_LENGTH,
-      name: "description",
-      readOnly: isDisabled,
-      placeholder: t("neetoTeamMembers.placeholders.enterDescription")
-    })), /*#__PURE__*/React.createElement(Permissions, {
-      isDisabled: isDisabled,
-      permissions: permissions,
-      permissionRelationConfig: (_config$permissionRel = config === null || config === void 0 ? void 0 : config.permissionRelation) !== null && _config$permissionRel !== void 0 ? _config$permissionRel : {}
-    }))), /*#__PURE__*/React.createElement(Pane.Footer, null, /*#__PURE__*/React.createElement("div", {
-      className: "ntm-roles-pane__footer"
-    }, /*#__PURE__*/React.createElement(Button, {
-      "data-cy": "ntm-add-role-submit-button",
-      disabled: !dirty || isSubmitting || isDisabled,
-      label: t("neetoTeamMembers.buttons.saveChanges"),
-      loading: isSubmitting,
-      type: "submit"
-    }), /*#__PURE__*/React.createElement(Button, {
-      "data-cy": "ntm-add-role-cancel-button",
-      label: t("neetoTeamMembers.buttons.cancel"),
-      style: "text",
-      onClick: onClose
-    }))));
-  }));
+    onClose: onClose,
+    children: [/*#__PURE__*/jsx(Pane.Header, {
+      children: /*#__PURE__*/jsx(Typography, {
+        "data-cy": "ntm-add-role-title",
+        style: "h2",
+        children: isEdit ? t("neetoTeamMembers.labels.editRole") : t("neetoTeamMembers.labels.addNewRole")
+      })
+    }), /*#__PURE__*/jsx(Form, {
+      formikProps: formikProps,
+      ref: formReference,
+      children: function children(_ref2) {
+        var _config$permissionRel;
+        var dirty = _ref2.dirty;
+        return /*#__PURE__*/jsxs(Fragment, {
+          children: [/*#__PURE__*/jsx(ScrollToErrorField, {
+            formRef: formReference
+          }), /*#__PURE__*/jsx(Pane.Body, {
+            children: /*#__PURE__*/jsxs("div", {
+              className: "ntm-roles-pane__body",
+              children: [/*#__PURE__*/jsxs("div", {
+                className: "ntm-roles-pane__body-wrapper",
+                children: [/*#__PURE__*/jsx(Input, {
+                  required: true,
+                  unlimitedChars: true,
+                  "data-cy": "ntm-add-role-name-text-field",
+                  label: t("neetoTeamMembers.common.name"),
+                  maxLength: ROLE_NAME_MAX_LENGTH,
+                  name: "name",
+                  placeholder: t("neetoTeamMembers.placeholders.enterName"),
+                  readOnly: isReadOnly,
+                  ref: inputReference
+                }), /*#__PURE__*/jsx(Textarea, {
+                  unlimitedChars: true,
+                  "data-cy": "ntm-add-role-description-text-field",
+                  label: t("neetoTeamMembers.common.description"),
+                  maxLength: ROLE_DESCRIPTION_MAX_LENGTH,
+                  name: "description",
+                  readOnly: isDisabled,
+                  placeholder: t("neetoTeamMembers.placeholders.enterDescription")
+                })]
+              }), /*#__PURE__*/jsx(Permissions, {
+                isDisabled: isDisabled,
+                permissions: permissions,
+                permissionRelationConfig: (_config$permissionRel = config === null || config === void 0 ? void 0 : config.permissionRelation) !== null && _config$permissionRel !== void 0 ? _config$permissionRel : {}
+              })]
+            })
+          }), /*#__PURE__*/jsx(Pane.Footer, {
+            children: /*#__PURE__*/jsxs("div", {
+              className: "ntm-roles-pane__footer",
+              children: [/*#__PURE__*/jsx(Button, {
+                "data-cy": "ntm-add-role-submit-button",
+                disabled: !dirty || isSubmitting || isDisabled,
+                label: t("neetoTeamMembers.buttons.saveChanges"),
+                loading: isSubmitting,
+                type: "submit"
+              }), /*#__PURE__*/jsx(Button, {
+                "data-cy": "ntm-add-role-cancel-button",
+                label: t("neetoTeamMembers.buttons.cancel"),
+                style: "text",
+                onClick: onClose
+              })]
+            })
+          })]
+        });
+      }
+    })]
+  });
 };
 
 var DEFAULT_MANAGE_ROLE_VALUES = {
@@ -3318,34 +3387,37 @@ var Row = function Row(_ref) {
   var isCheckboxChecked = function isCheckboxChecked(role) {
     return !allPermissionsOfCategory ? includes(permission === null || permission === void 0 ? void 0 : permission.id, role.permissionIds) : allPermissionIdsOfCategory.every(includes(__, role.permissionIds));
   };
-  return /*#__PURE__*/React.createElement("div", {
+  return /*#__PURE__*/jsx("div", {
     className: classnames("ntm-roles-table__row", {
       "ntm-roles-table__row--highlighted": !!allPermissionsOfCategory
+    }),
+    children: roles.map(function (role) {
+      return /*#__PURE__*/jsx("div", {
+        className: "ntm-roles-table__cell",
+        style: {
+          height: getRowClientHeight(permission)
+        },
+        children: /*#__PURE__*/jsx(Tooltip, {
+          content: renderRolesTooltipContent(role.name),
+          position: "top",
+          disabled: isUpdatePermissionGranted && !identical(role.name, "Admin"),
+          children: /*#__PURE__*/jsx("div", {
+            className: "ntm-roles-table-cell__checkbox-wrapper",
+            children: /*#__PURE__*/jsx(Checkbox, {
+              disabled: true,
+              checked: isCheckboxChecked(role),
+              className: "ntm-roles-table-cell__checkbox",
+              "data-cy": "ntm-roles-table-permission-checkbox",
+              onChange: function onChange(_ref2) {
+                var checked = _ref2.target.checked;
+                return handleSubmit(role, checked);
+              }
+            })
+          })
+        })
+      }, role.id);
     })
-  }, roles.map(function (role) {
-    return /*#__PURE__*/React.createElement("div", {
-      className: "ntm-roles-table__cell",
-      key: role.id,
-      style: {
-        height: getRowClientHeight(permission)
-      }
-    }, /*#__PURE__*/React.createElement(Tooltip, {
-      content: renderRolesTooltipContent(role.name),
-      position: "top",
-      disabled: isUpdatePermissionGranted && !identical(role.name, "Admin")
-    }, /*#__PURE__*/React.createElement("div", {
-      className: "ntm-roles-table-cell__checkbox-wrapper"
-    }, /*#__PURE__*/React.createElement(Checkbox, {
-      disabled: true,
-      checked: isCheckboxChecked(role),
-      className: "ntm-roles-table-cell__checkbox",
-      "data-cy": "ntm-roles-table-permission-checkbox",
-      onChange: function onChange(_ref2) {
-        var checked = _ref2.target.checked;
-        return handleSubmit(role, checked);
-      }
-    }))));
-  }));
+  });
 };
 
 var TableHeader = function TableHeader(_ref) {
@@ -3370,44 +3442,48 @@ var TableHeader = function TableHeader(_ref) {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
   useEffect(getOverflowStatus, [getOverflowStatus, scrollSyncElement, roles]);
-  return /*#__PURE__*/React.createElement(distExports.ScrollSyncPane, {
+  return /*#__PURE__*/jsx(distExports.ScrollSyncPane, {
     group: "horizontal",
-    ref: scrollSyncElement
-  }, /*#__PURE__*/React.createElement("div", {
-    className: "ntm-roles-table__header",
-    "data-cy": "ntm-roles-table-header"
-  }, roles === null || roles === void 0 ? void 0 : roles.map(function (role, index) {
-    var isSystemRole = identical("system", role.kind);
-    var isAdminRole = ADMIN_ROLES.includes(role.name) && isSystemRole;
-    return /*#__PURE__*/React.createElement("div", {
-      className: "ntm-roles-table__cell",
-      key: "ntm-roles-".concat(index)
-    }, /*#__PURE__*/React.createElement("div", {
-      className: "ntm-roles-table-header-cell__container",
-      "data-cy": "ntm-roles-table-role-header"
-    }, /*#__PURE__*/React.createElement(Typography, {
-      className: "ntm-roles-table-header__role-name",
-      "data-cy": "ntm-roles-table-header-role-title",
-      lineHeight: "normal",
-      style: "h4",
-      weight: "semibold"
-    }, role.name), !isAdminRole && /*#__PURE__*/React.createElement(MoreDropdown, {
-      dropdownProps: {
-        autoWidth: true
-      },
-      dropdownButtonProps: {
-        className: "ntm-roles-table-header__dropdown",
-        "data-cy": "ntm-roles-table-header-role-dropdown-button"
-      },
-      menuItems: getMenuItems({
-        isDeletePermissionGranted: isDeletePermissionGranted,
-        isUpdatePermissionGranted: isUpdatePermissionGranted,
-        role: role,
-        setManageRole: setManageRole,
-        isSystemRole: isSystemRole
+    ref: scrollSyncElement,
+    children: /*#__PURE__*/jsx("div", {
+      className: "ntm-roles-table__header",
+      "data-cy": "ntm-roles-table-header",
+      children: roles === null || roles === void 0 ? void 0 : roles.map(function (role, index) {
+        var isSystemRole = identical("system", role.kind);
+        var isAdminRole = ADMIN_ROLES.includes(role.name) && isSystemRole;
+        return /*#__PURE__*/jsx("div", {
+          className: "ntm-roles-table__cell",
+          children: /*#__PURE__*/jsxs("div", {
+            className: "ntm-roles-table-header-cell__container",
+            "data-cy": "ntm-roles-table-role-header",
+            children: [/*#__PURE__*/jsx(Typography, {
+              className: "ntm-roles-table-header__role-name",
+              "data-cy": "ntm-roles-table-header-role-title",
+              lineHeight: "normal",
+              style: "h4",
+              weight: "semibold",
+              children: role.name
+            }), !isAdminRole && /*#__PURE__*/jsx(MoreDropdown, {
+              dropdownProps: {
+                autoWidth: true
+              },
+              dropdownButtonProps: {
+                className: "ntm-roles-table-header__dropdown",
+                "data-cy": "ntm-roles-table-header-role-dropdown-button"
+              },
+              menuItems: getMenuItems({
+                isDeletePermissionGranted: isDeletePermissionGranted,
+                isUpdatePermissionGranted: isUpdatePermissionGranted,
+                role: role,
+                setManageRole: setManageRole,
+                isSystemRole: isSystemRole
+              })
+            })]
+          })
+        }, "ntm-roles-".concat(index));
       })
-    })));
-  })));
+    })
+  });
 };
 var TableHeader$1 = /*#__PURE__*/memo(TableHeader);
 
@@ -3436,13 +3512,13 @@ var Delete = function Delete(_ref) {
       payload: payload
     });
   };
-  return /*#__PURE__*/React.createElement(Alert, {
+  return /*#__PURE__*/jsx(Alert, {
     cancelButtonLabel: t("neetoTeamMembers.buttons.cancel"),
     isOpen: isOpen,
     isSubmitting: isDeleting,
     submitButtonLabel: t("neetoTeamMembers.buttons.delete"),
     title: t("neetoTeamMembers.labels.deleteRole"),
-    message: /*#__PURE__*/React.createElement(Trans, {
+    message: /*#__PURE__*/jsx(Trans, {
       i18nKey: "neetoTeamMembers.alerts.messages.deletingRole",
       values: {
         name: selectedRole === null || selectedRole === void 0 ? void 0 : selectedRole.name
@@ -3469,59 +3545,61 @@ var Columns = function Columns(_ref) {
   var onClose = function onClose() {
     return setManageRole(DEFAULT_MANAGE_ROLE_VALUES);
   };
-  return /*#__PURE__*/React.createElement("div", {
-    className: "ntm-roles-table__columns"
-  }, /*#__PURE__*/React.createElement(TableHeader$1, {
-    config: config,
-    roles: filteredRoles,
-    setIsScrollPresent: setIsScrollPresent,
-    setManageRole: setManageRole
-  }), /*#__PURE__*/React.createElement(distExports.ScrollSyncPane, {
-    group: ["horizontal", "vertical"]
-  }, /*#__PURE__*/React.createElement("div", {
-    className: "ntm-roles-table__rows"
-  }, categories.map(function (category, index) {
-    var groupedPermissions = filteredGroupPermissions.get(category);
-    var isPermissionVisible = groupedPermissions.get("isPermissionVisible");
-    var permissions = groupedPermissions.get("permissions");
-    return /*#__PURE__*/React.createElement("div", {
-      key: index
-    }, /*#__PURE__*/React.createElement(Row, {
-      allPermissionsOfCategory: groupedPermissions,
+  return /*#__PURE__*/jsxs("div", {
+    className: "ntm-roles-table__columns",
+    children: [/*#__PURE__*/jsx(TableHeader$1, {
       config: config,
       roles: filteredRoles,
-      setModifiedRoles: setModifiedRoles
-    }), isPermissionVisible && permissions.map(function (permission) {
-      return /*#__PURE__*/React.createElement(Row, {
-        config: config,
-        key: permission.id,
-        permission: permission,
-        roles: filteredRoles,
-        setModifiedRoles: setModifiedRoles
-      });
-    }));
-  }))), /*#__PURE__*/React.createElement(ManageRoles, {
-    config: config,
-    isOpen: manageRole.isEdit,
-    permissions: permissions,
-    selectedRole: manageRole.selectedRole,
-    onClose: onClose
-  }), /*#__PURE__*/React.createElement(Delete, {
-    isOpen: manageRole.isDelete,
-    roles: roles,
-    selectedRole: manageRole.selectedRole,
-    onClose: onClose
-  }));
+      setIsScrollPresent: setIsScrollPresent,
+      setManageRole: setManageRole
+    }), /*#__PURE__*/jsx(distExports.ScrollSyncPane, {
+      group: ["horizontal", "vertical"],
+      children: /*#__PURE__*/jsx("div", {
+        className: "ntm-roles-table__rows",
+        children: categories.map(function (category, index) {
+          var groupedPermissions = filteredGroupPermissions.get(category);
+          var isPermissionVisible = groupedPermissions.get("isPermissionVisible");
+          var permissions = groupedPermissions.get("permissions");
+          return /*#__PURE__*/jsxs("div", {
+            children: [/*#__PURE__*/jsx(Row, {
+              allPermissionsOfCategory: groupedPermissions,
+              config: config,
+              roles: filteredRoles,
+              setModifiedRoles: setModifiedRoles
+            }), isPermissionVisible && permissions.map(function (permission) {
+              return /*#__PURE__*/jsx(Row, {
+                config: config,
+                permission: permission,
+                roles: filteredRoles,
+                setModifiedRoles: setModifiedRoles
+              }, permission.id);
+            })]
+          }, index);
+        })
+      })
+    }), /*#__PURE__*/jsx(ManageRoles, {
+      config: config,
+      isOpen: manageRole.isEdit,
+      permissions: permissions,
+      selectedRole: manageRole.selectedRole,
+      onClose: onClose
+    }), /*#__PURE__*/jsx(Delete, {
+      isOpen: manageRole.isDelete,
+      roles: roles,
+      selectedRole: manageRole.selectedRole,
+      onClose: onClose
+    })]
+  });
 };
 
 var ToggleDropdown = function ToggleDropdown(_ref) {
   var isVisible = _ref.isVisible;
-  return isVisible ? /*#__PURE__*/React.createElement(Up, {
+  return isVisible ? /*#__PURE__*/jsx(Up, {
     className: "ntm-roles-table-sidebar__drop-down-button",
     "data-cy": "ntm-permission-category-hide-button",
     size: 16,
     strokeWidth: 2
-  }) : /*#__PURE__*/React.createElement(Down, {
+  }) : /*#__PURE__*/jsx(Down, {
     className: "ntm-roles-table-sidebar__drop-down-button",
     "data-cy": "ntm-permission-category-show-button",
     size: 16,
@@ -3533,15 +3611,16 @@ var renderDescription = function renderDescription(permissions) {
   return permissions === null || permissions === void 0 ? void 0 : permissions.map(function (_ref) {
     var id = _ref.id,
       description = _ref.description;
-    return /*#__PURE__*/React.createElement("div", {
+    return /*#__PURE__*/jsx("div", {
       className: "ntm-roles-table-sidebar__list-item",
       "data-name": description,
-      key: id
-    }, /*#__PURE__*/React.createElement(Typography, {
-      "data-cy": "ntm-permission-category-description",
-      lineHeight: "normal",
-      style: "body2"
-    }, description));
+      children: /*#__PURE__*/jsx(Typography, {
+        "data-cy": "ntm-permission-category-description",
+        lineHeight: "normal",
+        style: "body2",
+        children: description
+      })
+    }, id);
   });
 };
 var getSearchWrapperStyle = function getSearchWrapperStyle() {
@@ -3562,45 +3641,51 @@ var Sidebar = function Sidebar(_ref) {
     t = _useTranslation.t;
   var categories = Array.from(filteredGroupPermissions.keys());
   var searchWrapperStyle = isScrollPresent ? getSearchWrapperStyle() : {};
-  return /*#__PURE__*/React.createElement("div", {
-    className: "ntm-roles-table__sidebar"
-  }, /*#__PURE__*/React.createElement("div", {
-    className: "ntm-roles-table-sidebar__search",
-    style: searchWrapperStyle
-  }, /*#__PURE__*/React.createElement(Input$1, {
-    "data-cy": "ntm-search-permissions-input",
-    prefix: /*#__PURE__*/React.createElement(Search, null),
-    type: "search",
-    value: searchTerm,
-    placeholder: t("neetoTeamMembers.placeholders.searchPermission", PLURAL),
-    onChange: function onChange(_ref2) {
-      var value = _ref2.target.value;
-      return setSearchTerm(value);
-    }
-  })), /*#__PURE__*/React.createElement(distExports.ScrollSyncPane, {
-    group: "vertical"
-  }, /*#__PURE__*/React.createElement("div", {
-    className: "ntm-roles-table-sidebar__list"
-  }, categories.map(function (category, index) {
-    var groupedPermissions = filteredGroupPermissions.get(category);
-    var isPermissionVisible = groupedPermissions.get("isPermissionVisible");
-    var permissions = groupedPermissions.get("permissions");
-    return /*#__PURE__*/React.createElement("div", {
-      key: index
-    }, /*#__PURE__*/React.createElement("div", {
-      className: "ntm-roles-table-sidebar__list-item ntm-roles-table-sidebar__list-item--highlighted cursor-pointer",
-      onClick: function onClick() {
-        return toggleDropdown(category);
-      }
-    }, /*#__PURE__*/React.createElement(Typography, {
-      "data-cy": "ntm-permission-category-title",
-      lineHeight: "normal",
-      style: "h4",
-      weight: "semibold"
-    }, category), /*#__PURE__*/React.createElement(ToggleDropdown, {
-      isVisible: isPermissionVisible
-    })), isPermissionVisible && renderDescription(permissions));
-  }))));
+  return /*#__PURE__*/jsxs("div", {
+    className: "ntm-roles-table__sidebar",
+    children: [/*#__PURE__*/jsx("div", {
+      className: "ntm-roles-table-sidebar__search",
+      style: searchWrapperStyle,
+      children: /*#__PURE__*/jsx(Input$1, {
+        "data-cy": "ntm-search-permissions-input",
+        prefix: /*#__PURE__*/jsx(Search, {}),
+        type: "search",
+        value: searchTerm,
+        placeholder: t("neetoTeamMembers.placeholders.searchPermission", PLURAL),
+        onChange: function onChange(_ref2) {
+          var value = _ref2.target.value;
+          return setSearchTerm(value);
+        }
+      })
+    }), /*#__PURE__*/jsx(distExports.ScrollSyncPane, {
+      group: "vertical",
+      children: /*#__PURE__*/jsx("div", {
+        className: "ntm-roles-table-sidebar__list",
+        children: categories.map(function (category, index) {
+          var groupedPermissions = filteredGroupPermissions.get(category);
+          var isPermissionVisible = groupedPermissions.get("isPermissionVisible");
+          var permissions = groupedPermissions.get("permissions");
+          return /*#__PURE__*/jsxs("div", {
+            children: [/*#__PURE__*/jsxs("div", {
+              className: "ntm-roles-table-sidebar__list-item ntm-roles-table-sidebar__list-item--highlighted cursor-pointer",
+              onClick: function onClick() {
+                return toggleDropdown(category);
+              },
+              children: [/*#__PURE__*/jsx(Typography, {
+                "data-cy": "ntm-permission-category-title",
+                lineHeight: "normal",
+                style: "h4",
+                weight: "semibold",
+                children: category
+              }), /*#__PURE__*/jsx(ToggleDropdown, {
+                isVisible: isPermissionVisible
+              })]
+            }), isPermissionVisible && renderDescription(permissions)]
+          }, index);
+        })
+      })
+    })]
+  });
 };
 
 var Table = function Table(_ref) {
@@ -3646,54 +3731,61 @@ var Table = function Table(_ref) {
     var newValue = filterPermissionsBySearch(searchTerm, permissionGroups);
     setFilteredGroupPermissions(newValue);
   }, [permissionGroups, searchTerm]);
-  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
-    className: "ntm-roles-table__wrapper"
-  }, /*#__PURE__*/React.createElement("div", {
-    className: "ntm-roles-table__container"
-  }, isEmpty(filteredRoles) ? /*#__PURE__*/React.createElement("div", {
-    className: "ntm-empty-state"
-  }, /*#__PURE__*/React.createElement(NoData, {
-    title: t("neetoTeamMembers.labels.roleNotFound", PLURAL),
-    primaryButtonProps: {
-      "data-cy": "ntm-add-role-button",
-      disabled: !isCreatePermissionGranted,
-      label: t("neetoTeamMembers.labels.addNewRole"),
-      onClick: function onClick() {
-        return setIsNewRolePaneOpen(true);
+  return /*#__PURE__*/jsxs(Fragment, {
+    children: [/*#__PURE__*/jsx("div", {
+      className: "ntm-roles-table__wrapper",
+      children: /*#__PURE__*/jsx("div", {
+        className: "ntm-roles-table__container",
+        children: isEmpty(filteredRoles) ? /*#__PURE__*/jsx("div", {
+          className: "ntm-empty-state",
+          children: /*#__PURE__*/jsx(NoData, {
+            title: t("neetoTeamMembers.labels.roleNotFound", PLURAL),
+            primaryButtonProps: {
+              "data-cy": "ntm-add-role-button",
+              disabled: !isCreatePermissionGranted,
+              label: t("neetoTeamMembers.labels.addNewRole"),
+              onClick: function onClick() {
+                return setIsNewRolePaneOpen(true);
+              }
+            }
+          })
+        }) : /*#__PURE__*/jsxs(Fragment, {
+          children: [/*#__PURE__*/jsx(Sidebar, {
+            filteredGroupPermissions: filteredGroupPermissions,
+            isScrollPresent: isScrollPresent,
+            searchTerm: searchTerm,
+            setSearchTerm: setSearchTerm,
+            toggleDropdown: toggleDropdown
+          }), /*#__PURE__*/jsx(Columns, {
+            config: config,
+            filteredGroupPermissions: filteredGroupPermissions,
+            filteredRoles: filteredRoles,
+            permissions: permissions,
+            roles: roles,
+            setIsScrollPresent: setIsScrollPresent,
+            setModifiedRoles: setModifiedRoles
+          })]
+        })
+      })
+    }), /*#__PURE__*/jsx(ManageRoles, {
+      config: config,
+      permissions: permissions,
+      selectedRole: selectedRole,
+      isOpen: isEditPaneOpen,
+      onClose: function onClose() {
+        setSelectedRole(undefined);
+        setIsEditPaneOpen(false);
       }
-    }
-  })) : /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Sidebar, {
-    filteredGroupPermissions: filteredGroupPermissions,
-    isScrollPresent: isScrollPresent,
-    searchTerm: searchTerm,
-    setSearchTerm: setSearchTerm,
-    toggleDropdown: toggleDropdown
-  }), /*#__PURE__*/React.createElement(Columns, {
-    config: config,
-    filteredGroupPermissions: filteredGroupPermissions,
-    filteredRoles: filteredRoles,
-    permissions: permissions,
-    roles: roles,
-    setIsScrollPresent: setIsScrollPresent,
-    setModifiedRoles: setModifiedRoles
-  })))), /*#__PURE__*/React.createElement(ManageRoles, {
-    config: config,
-    permissions: permissions,
-    selectedRole: selectedRole,
-    isOpen: isEditPaneOpen,
-    onClose: function onClose() {
-      setSelectedRole(undefined);
-      setIsEditPaneOpen(false);
-    }
-  }), /*#__PURE__*/React.createElement(Delete, {
-    roles: roles,
-    selectedRole: selectedRole,
-    isOpen: isDeleteAlertOpen,
-    onClose: function onClose() {
-      setSelectedRole(undefined);
-      setIsDeleteAlertOpen(false);
-    }
-  }));
+    }), /*#__PURE__*/jsx(Delete, {
+      roles: roles,
+      selectedRole: selectedRole,
+      isOpen: isDeleteAlertOpen,
+      onClose: function onClose() {
+        setSelectedRole(undefined);
+        setIsDeleteAlertOpen(false);
+      }
+    })]
+  });
 };
 
 var Roles = function Roles(_ref) {
@@ -3746,35 +3838,41 @@ var Roles = function Roles(_ref) {
     return setModifiedRoles(roles);
   };
   if (isRolesLoading || isPermissionsLoading) {
-    return /*#__PURE__*/React.createElement("div", {
-      className: "ntm-members-page-loader"
-    }, /*#__PURE__*/React.createElement(PageLoader, null));
+    return /*#__PURE__*/jsx("div", {
+      className: "ntm-members-page-loader",
+      children: /*#__PURE__*/jsx(PageLoader, {})
+    });
   }
-  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(distExports.ScrollSync, null, /*#__PURE__*/React.createElement(Container, {
-    isHeaderFixed: true
-  }, /*#__PURE__*/React.createElement(Header$3, {
-    config: config,
-    handleReset: handleReset,
-    handleSubmit: handleSubmit,
-    isDirty: isDirty,
-    roles: roles,
-    setIsNewRolePaneOpen: setIsNewRolePaneOpen
-  }), /*#__PURE__*/React.createElement(Table, {
-    config: config,
-    filteredRoles: filteredRoles,
-    permissionGroups: permissionGroups,
-    permissions: permissions,
-    roles: roles,
-    setIsNewRolePaneOpen: setIsNewRolePaneOpen,
-    setModifiedRoles: setModifiedRoles
-  }))), /*#__PURE__*/React.createElement(ManageRoles, {
-    config: config,
-    permissions: permissions,
-    isOpen: isNewRolePaneOpen,
-    onClose: function onClose() {
-      return setIsNewRolePaneOpen(false);
-    }
-  }));
+  return /*#__PURE__*/jsxs(Fragment, {
+    children: [/*#__PURE__*/jsx(distExports.ScrollSync, {
+      children: /*#__PURE__*/jsxs(Container, {
+        isHeaderFixed: true,
+        children: [/*#__PURE__*/jsx(Header$3, {
+          config: config,
+          handleReset: handleReset,
+          handleSubmit: handleSubmit,
+          isDirty: isDirty,
+          roles: roles,
+          setIsNewRolePaneOpen: setIsNewRolePaneOpen
+        }), /*#__PURE__*/jsx(Table, {
+          config: config,
+          filteredRoles: filteredRoles,
+          permissionGroups: permissionGroups,
+          permissions: permissions,
+          roles: roles,
+          setIsNewRolePaneOpen: setIsNewRolePaneOpen,
+          setModifiedRoles: setModifiedRoles
+        })]
+      })
+    }), /*#__PURE__*/jsx(ManageRoles, {
+      config: config,
+      permissions: permissions,
+      isOpen: isNewRolePaneOpen,
+      onClose: function onClose() {
+        return setIsNewRolePaneOpen(false);
+      }
+    })]
+  });
 };
 var index$1 = withTitle(withReactQuery(Roles), i18next.t("neetoTeamMembers.common.role", PLURAL));
 
@@ -4319,7 +4417,7 @@ var callBound$1 = function callBoundIntrinsic(name, allowMissing) {
 	return intrinsic;
 };
 
-var util_inspect = require$$0.inspect;
+var util_inspect = require$$0$1.inspect;
 
 var hasMap = typeof Map === 'function' && Map.prototype;
 var mapSizeDescriptor = Object.getOwnPropertyDescriptor && hasMap ? Object.getOwnPropertyDescriptor(Map.prototype, 'size') : null;
@@ -5869,14 +5967,14 @@ var teamsApi = {
 
 var _excluded$2 = ["onSuccess"],
   _excluded2$1 = ["onSuccess"];
-function ownKeys$8(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
-function _objectSpread$8(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$8(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$8(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function ownKeys$a(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread$a(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$a(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$a(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var useFetchMembers = function useFetchMembers() {
   var params = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
   var options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
   return useQuery([QUERY_KEYS.TEAMS, params], function () {
     return teamsApi.fetch(params);
-  }, _objectSpread$8(_objectSpread$8({
+  }, _objectSpread$a(_objectSpread$a({
     select: identity,
     keepPreviousData: true
   }, options), {}, {
@@ -5885,7 +5983,7 @@ var useFetchMembers = function useFetchMembers() {
 };
 var useFetchMembersCountsPerCategory = function useFetchMembersCountsPerCategory() {
   var options = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
-  return useQuery([QUERY_KEYS.TEAMS], teamsApi.fetchCountsPerCategory, _objectSpread$8(_objectSpread$8({
+  return useQuery([QUERY_KEYS.TEAMS], teamsApi.fetchCountsPerCategory, _objectSpread$a(_objectSpread$a({
     select: identity,
     keepPreviousData: true
   }, options), {}, {
@@ -5903,7 +6001,7 @@ var useUpdateMember = function useUpdateMember(_ref) {
     var id = _ref2.id,
       payload = _ref2.payload;
     return teamsApi.update(id, payload);
-  }, _objectSpread$8({
+  }, _objectSpread$a({
     keysToInvalidate: [QUERY_KEYS.TEAMS, QUERY_KEYS.TEAMS_DEPENDENCIES],
     onSuccess: function onSuccess() {
       _onSuccess === null || _onSuccess === void 0 || _onSuccess();
@@ -5913,7 +6011,7 @@ var useUpdateMember = function useUpdateMember(_ref) {
 var useBulkUpdateMembers = function useBulkUpdateMembers(_ref3) {
   var _onSuccess2 = _ref3.onSuccess,
     options = _objectWithoutProperties(_ref3, _excluded2$1);
-  return useMutationWithInvalidation(teamsApi.bulkUpdate, _objectSpread$8({
+  return useMutationWithInvalidation(teamsApi.bulkUpdate, _objectSpread$a({
     keysToInvalidate: [QUERY_KEYS.TEAMS, QUERY_KEYS.TEAMS_DEPENDENCIES],
     onSuccess: function onSuccess() {
       _onSuccess2 === null || _onSuccess2 === void 0 || _onSuccess2();
@@ -5931,7 +6029,7 @@ var useFetchFilterOptions = function useFetchFilterOptions(_ref4) {
     options = _ref4$options === void 0 ? {} : _ref4$options;
   return useQuery([QUERY_KEYS.TEAMS_DEPENDENCIES, params], function () {
     return teamsApi.fetchFilterOptions(params);
-  }, _objectSpread$8(_objectSpread$8({
+  }, _objectSpread$a(_objectSpread$a({
     select: identity
   }, options), {}, {
     refetchOnWindowFocus: false
@@ -5987,8 +6085,8 @@ var DEFAULT_SELECTED_ROWS = {
 };
 var TEAM_MEMBERS_HIDDEN_COLUMNS = "TEAM_MEMBERS_TABLE_HIDDEN_COLUMNS";
 
-function ownKeys$7(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
-function _objectSpread$7(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$7(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$7(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function ownKeys$9(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread$9(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$9(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$9(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var MenuItem$2 = Dropdown.MenuItem;
 var renderNameColumn = function renderNameColumn(_ref) {
   var config = _ref.config,
@@ -6000,36 +6098,39 @@ var renderNameColumn = function renderNameColumn(_ref) {
     name = tableData.displayName,
     imageUrl = tableData.profileImageUrl,
     subscriptionPlan = tableData.subscriptionPlan;
-  return /*#__PURE__*/React.createElement("div", {
-    className: "ntm-members-table__wrapper"
-  }, /*#__PURE__*/React.createElement("div", {
-    className: "ntm-members-table__column"
-  }, /*#__PURE__*/React.createElement(Avatar, {
-    size: "medium",
-    user: {
-      name: name,
-      imageUrl: imageUrl
-    }
-  }), /*#__PURE__*/React.createElement(Typography, {
-    "data-cy": "ntm-member-name-".concat(hyphenize(name)),
-    style: "body2"
-  }, name), displayStatusTag && /*#__PURE__*/React.createElement(Tag, {
-    "data-cy": "ntm-member-status-tag",
-    style: active ? "primary" : "secondary",
-    type: "outline",
-    label: active ? i18next.t(MEMBER_FILTER.ACTIVE.label) : i18next.t(MEMBER_FILTER.DEACTIVATED.label)
-  }), subscriptionPlan === SUBSCRIPTION_PLANS.PRO && /*#__PURE__*/React.createElement(Tag, {
-    className: "neeto-ui-text-transform-uppercase",
-    "data-cy": "ntm-member-subscription-plan-tag",
-    label: i18next.t("neetoTeamMembers.common.pro"),
-    style: "info",
-    type: "outline"
-  })), renderDropdownButton({
-    config: config,
-    handleUpdateRole: handleUpdateRole,
-    handleUpdateStatus: handleUpdateStatus,
-    tableData: tableData
-  }));
+  return /*#__PURE__*/jsxs("div", {
+    className: "ntm-members-table__wrapper",
+    children: [/*#__PURE__*/jsxs("div", {
+      className: "ntm-members-table__column",
+      children: [/*#__PURE__*/jsx(Avatar, {
+        size: "medium",
+        user: {
+          name: name,
+          imageUrl: imageUrl
+        }
+      }), /*#__PURE__*/jsx(Typography, {
+        "data-cy": "ntm-member-name-".concat(hyphenize(name)),
+        style: "body2",
+        children: name
+      }), displayStatusTag && /*#__PURE__*/jsx(Tag, {
+        "data-cy": "ntm-member-status-tag",
+        style: active ? "primary" : "secondary",
+        type: "outline",
+        label: active ? i18next.t(MEMBER_FILTER.ACTIVE.label) : i18next.t(MEMBER_FILTER.DEACTIVATED.label)
+      }), subscriptionPlan === SUBSCRIPTION_PLANS.PRO && /*#__PURE__*/jsx(Tag, {
+        className: "neeto-ui-text-transform-uppercase",
+        "data-cy": "ntm-member-subscription-plan-tag",
+        label: i18next.t("neetoTeamMembers.common.pro"),
+        style: "info",
+        type: "outline"
+      })]
+    }), renderDropdownButton({
+      config: config,
+      handleUpdateRole: handleUpdateRole,
+      handleUpdateStatus: handleUpdateStatus,
+      tableData: tableData
+    })]
+  });
 };
 var renderDropdownButton = function renderDropdownButton(_ref2) {
   var _config$table, _config$table$dropdow;
@@ -6037,7 +6138,7 @@ var renderDropdownButton = function renderDropdownButton(_ref2) {
     handleUpdateRole = _ref2.handleUpdateRole,
     handleUpdateStatus = _ref2.handleUpdateStatus,
     tableData = _ref2.tableData;
-  return /*#__PURE__*/React.createElement(MoreDropdown, {
+  return /*#__PURE__*/jsx(MoreDropdown, {
     dropdownProps: {
       appendTo: function appendTo() {
         return document.body;
@@ -6054,26 +6155,33 @@ var renderDropdownButton = function renderDropdownButton(_ref2) {
         position: "top"
       }
     },
-    menuTopChildren: /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Tooltip, {
-      disabled: tableData.active,
-      position: "top",
-      content: i18next.t("neetoTeamMembers.tooltips.activateUserToEdit", SINGULAR)
-    }, /*#__PURE__*/React.createElement("span", null, /*#__PURE__*/React.createElement(MenuItem$2.Button, {
-      className: "ntm-dropdown__button",
-      "data-cy": "ntm-edit-member-button",
-      isDisabled: not(tableData.active),
-      size: "small",
-      onClick: function onClick() {
-        return tableData.active && handleUpdateRole(tableData);
-      }
-    }, i18next.t("neetoTeamMembers.common.edit")))), config === null || config === void 0 || (_config$table = config.table) === null || _config$table === void 0 || (_config$table$dropdow = _config$table.dropdownProps) === null || _config$table$dropdow === void 0 ? void 0 : _config$table$dropdow.call(_config$table, tableData), /*#__PURE__*/React.createElement(MenuItem$2.Button, {
-      className: "ntm-dropdown__button",
-      "data-cy": "ntm-deactivate-member-button",
-      size: "small",
-      onClick: function onClick() {
-        return handleUpdateStatus(tableData);
-      }
-    }, tableData.active ? i18next.t("neetoTeamMembers.common.deactivate") : i18next.t("neetoTeamMembers.common.activate")))
+    menuTopChildren: /*#__PURE__*/jsxs(Fragment, {
+      children: [/*#__PURE__*/jsx(Tooltip, {
+        disabled: tableData.active,
+        position: "top",
+        content: i18next.t("neetoTeamMembers.tooltips.activateUserToEdit", SINGULAR),
+        children: /*#__PURE__*/jsx("span", {
+          children: /*#__PURE__*/jsx(MenuItem$2.Button, {
+            className: "ntm-dropdown__button",
+            "data-cy": "ntm-edit-member-button",
+            isDisabled: not(tableData.active),
+            size: "small",
+            onClick: function onClick() {
+              return tableData.active && handleUpdateRole(tableData);
+            },
+            children: i18next.t("neetoTeamMembers.common.edit")
+          })
+        })
+      }), config === null || config === void 0 || (_config$table = config.table) === null || _config$table === void 0 || (_config$table$dropdow = _config$table.dropdownProps) === null || _config$table$dropdow === void 0 ? void 0 : _config$table$dropdow.call(_config$table, tableData), /*#__PURE__*/jsx(MenuItem$2.Button, {
+        className: "ntm-dropdown__button",
+        "data-cy": "ntm-deactivate-member-button",
+        size: "small",
+        onClick: function onClick() {
+          return handleUpdateStatus(tableData);
+        },
+        children: tableData.active ? i18next.t("neetoTeamMembers.common.deactivate") : i18next.t("neetoTeamMembers.common.activate")
+      })]
+    })
   });
 };
 var getDefaultAlertTitle = function getDefaultAlertTitle(_ref3) {
@@ -6086,8 +6194,8 @@ var getDefaultAlertTitle = function getDefaultAlertTitle(_ref3) {
 };
 var getDefaultAlertMessage = function getDefaultAlertMessage(_ref4) {
   var member = _ref4.member;
-  return /*#__PURE__*/React.createElement(Trans, {
-    values: _objectSpread$7(_objectSpread$7({}, SINGULAR), {}, {
+  return /*#__PURE__*/jsx(Trans, {
+    values: _objectSpread$9(_objectSpread$9({}, SINGULAR), {}, {
       person: member === null || member === void 0 ? void 0 : member.displayName
     }),
     i18nKey: member !== null && member !== void 0 && member.active ? "neetoTeamMembers.alerts.messages.deactivateMember" : "neetoTeamMembers.alerts.messages.activateMember"
@@ -6323,8 +6431,8 @@ var generateNoDataContent = function generateNoDataContent(_ref13) {
   };
 };
 
-function ownKeys$6(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
-function _objectSpread$6(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$6(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$6(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function ownKeys$8(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread$8(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$8(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$8(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var useFilters = function useFilters(_ref) {
   var _config$filterColumns, _config$defaultFilter;
   var config = _ref.config;
@@ -6344,7 +6452,7 @@ var useFilters = function useFilters(_ref) {
     emailSearchTerm = _useState2[0],
     setEmailSearchTerm = _useState2[1];
   var defaultNeetoFilters = buildFiltersFromURL([].concat(_toConsumableArray((_config$filterColumns = config === null || config === void 0 ? void 0 : config.filterColumns) !== null && _config$filterColumns !== void 0 ? _config$filterColumns : defaultNeetoFiltersColumns()), [searchKeywordProps]));
-  var _useState3 = useState(_objectSpread$6(_objectSpread$6(_objectSpread$6({}, DEFAULT_FILTER_VALUES), config === null || config === void 0 ? void 0 : config.defaultFilterValues), {}, {
+  var _useState3 = useState(_objectSpread$8(_objectSpread$8(_objectSpread$8({}, DEFAULT_FILTER_VALUES), config === null || config === void 0 ? void 0 : config.defaultFilterValues), {}, {
       neetoFilters: defaultNeetoFilters,
       category: getValidCategory(filter === null || filter === void 0 ? void 0 : filter.toUpperCase(), config === null || config === void 0 || (_config$defaultFilter = config.defaultFilterValues) === null || _config$defaultFilter === void 0 ? void 0 : _config$defaultFilter.category)
     })),
@@ -6394,8 +6502,8 @@ var useFilters = function useFilters(_ref) {
   };
 };
 
-function ownKeys$5(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
-function _objectSpread$5(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$5(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$5(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function ownKeys$7(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread$7(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$7(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$7(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var useTeams = function useTeams(_ref) {
   var config = _ref.config,
     filters = _ref.filters,
@@ -6474,7 +6582,7 @@ var useTeams = function useTeams(_ref) {
       subscriptionPlans: pluck("subscriptionPlan", rowData),
       keys: keys
     };
-    setSelectedRows(_objectSpread$5({}, rows));
+    setSelectedRows(_objectSpread$7({}, rows));
     config === null || config === void 0 || (_config$table = config.table) === null || _config$table === void 0 || (_config$table$onRowSe = _config$table.onRowSelect) === null || _config$table$onRowSe === void 0 || _config$table$onRowSe.call(_config$table, {
       rows: rows,
       resetSelectedRows: resetSelectedRows,
@@ -6498,24 +6606,11 @@ var useTeams = function useTeams(_ref) {
   };
 };
 
-function _extends() {
-  _extends = Object.assign ? Object.assign.bind() : function (target) {
-    for (var i = 1; i < arguments.length; i++) {
-      var source = arguments[i];
-      for (var key in source) {
-        if (Object.prototype.hasOwnProperty.call(source, key)) {
-          target[key] = source[key];
-        }
-      }
-    }
-    return target;
-  };
-  return _extends.apply(this, arguments);
-}
-
 var FIXED_COLUMNS = ["name", "actions"];
 var MANAGE_ROLES_BUTTON_LABEL = t$1("neetoTeamMembers.labels.manageRole", PLURAL);
 
+function ownKeys$6(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread$6(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$6(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$6(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var Header$2 = function Header(_ref) {
   var isCreatePermissionGranted = _ref.isCreatePermissionGranted,
     otherActionBlock = _ref.otherActionBlock,
@@ -6526,22 +6621,27 @@ var Header$2 = function Header(_ref) {
     t = _useTranslation.t;
   var isRolesButtonVisible = !!rolesButtonProps;
   var isOtherActionBlockVisible = !!otherActionBlock;
-  return /*#__PURE__*/React.createElement(React.Fragment, null, isOtherActionBlockVisible && otherActionBlock(), isRolesButtonVisible ? /*#__PURE__*/React.createElement(Button, _extends({
-    "data-cy": "ntm-manage-roles-button",
-    label: MANAGE_ROLES_BUTTON_LABEL,
-    style: "secondary"
-  }, rolesButtonProps)) : null, /*#__PURE__*/React.createElement(Tooltip, {
-    content: t("neetoTeamMembers.tooltips.noPermissionToAddMember"),
-    disabled: isCreatePermissionGranted,
-    position: "bottom"
-  }, /*#__PURE__*/React.createElement("span", null, /*#__PURE__*/React.createElement(Button, {
-    "data-cy": "ntm-add-member-button",
-    disabled: !isCreatePermissionGranted,
-    label: t("neetoTeamMembers.common.addNew_", {
-      what: taxonomies.member.singular
-    }),
-    onClick: onClick
-  }))));
+  return /*#__PURE__*/jsxs(Fragment, {
+    children: [isOtherActionBlockVisible && otherActionBlock(), isRolesButtonVisible ? /*#__PURE__*/jsx(Button, _objectSpread$6({
+      "data-cy": "ntm-manage-roles-button",
+      label: MANAGE_ROLES_BUTTON_LABEL,
+      style: "secondary"
+    }, rolesButtonProps)) : null, /*#__PURE__*/jsx(Tooltip, {
+      content: t("neetoTeamMembers.tooltips.noPermissionToAddMember"),
+      disabled: isCreatePermissionGranted,
+      position: "bottom",
+      children: /*#__PURE__*/jsx("span", {
+        children: /*#__PURE__*/jsx(Button, {
+          "data-cy": "ntm-add-member-button",
+          disabled: !isCreatePermissionGranted,
+          label: t("neetoTeamMembers.common.addNew_", {
+            what: taxonomies.member.singular
+          }),
+          onClick: onClick
+        })
+      })
+    })]
+  });
 };
 var HeaderActionBlock = /*#__PURE__*/memo(Header$2);
 
@@ -6607,58 +6707,68 @@ var RolesDropdown = function RolesDropdown(_ref) {
     event.stopPropagation();
     setIsDropdownOpen(!isDropdownOpen);
   };
-  return /*#__PURE__*/React.createElement(Tooltip, {
+  return /*#__PURE__*/jsx(Tooltip, {
     disabled: isUpdatingAllowed,
     position: "top",
     content: t("neetoTeamMembers.tooltips.activateUserToEdit", {
       count: selectedMembersCount
-    })
-  }, /*#__PURE__*/React.createElement("span", null, /*#__PURE__*/React.createElement(Dropdown, {
-    buttonStyle: "secondary",
-    closeOnSelect: false,
-    "data-cy": "ntm-members-roles-update-dropdown-button",
-    disabled: !isUpdatingAllowed,
-    isOpen: isUpdatingAllowed && isDropdownOpen,
-    position: "auto-end",
-    customTarget: /*#__PURE__*/React.createElement(MenuItem$1.Button, {
-      disabled: !isUpdatingAllowed,
-      suffix: /*#__PURE__*/React.createElement(Right$1, {
-        size: 16
+    }),
+    children: /*#__PURE__*/jsx("span", {
+      children: /*#__PURE__*/jsx(Dropdown, {
+        buttonStyle: "secondary",
+        closeOnSelect: false,
+        "data-cy": "ntm-members-roles-update-dropdown-button",
+        disabled: !isUpdatingAllowed,
+        isOpen: isUpdatingAllowed && isDropdownOpen,
+        position: "auto-end",
+        customTarget: /*#__PURE__*/jsx(MenuItem$1.Button, {
+          disabled: !isUpdatingAllowed,
+          suffix: /*#__PURE__*/jsx(Right$1, {
+            size: 16
+          }),
+          children: t("neetoTeamMembers.buttons.changeRole")
+        }),
+        onClick: handleClick,
+        onClose: handleOnClose,
+        children: /*#__PURE__*/jsxs(Menu$2, {
+          children: [isSearchable && /*#__PURE__*/jsx("div", {
+            className: "neeto-ui-px-3 neeto-ui-py-2",
+            onClick: function onClick(event) {
+              event.stopPropagation();
+            },
+            children: /*#__PURE__*/jsx(Input$1, {
+              "data-cy": "ntm-members-roles-search-input",
+              prefix: /*#__PURE__*/jsx(Search, {}),
+              type: "search",
+              value: searchTerm,
+              placeholder: t("neetoTeamMembers.placeholders.searchRole", PLURAL),
+              onChange: handleSearch
+            })
+          }), isNotEmpty(filteredRoles) ? filteredRoles.map(function (_ref3) {
+            var id = _ref3.id,
+              name = _ref3.name;
+            return /*#__PURE__*/jsx(MenuItem$1.Button, {
+              onClick: function onClick() {
+                return handleSelectRole(name);
+              },
+              children: name
+            }, id);
+          }) : /*#__PURE__*/jsx("div", {
+            className: "neeto-ui-flex neeto-ui-justify-center neeto-ui-p-1",
+            children: /*#__PURE__*/jsx(Typography, {
+              className: "neeto-ui-text-gray-700",
+              style: "body2",
+              children: t("neetoTeamMembers.helpers.noRolesFound")
+            })
+          })]
+        })
       })
-    }, t("neetoTeamMembers.buttons.changeRole")),
-    onClick: handleClick,
-    onClose: handleOnClose
-  }, /*#__PURE__*/React.createElement(Menu$2, null, isSearchable && /*#__PURE__*/React.createElement("div", {
-    className: "neeto-ui-px-3 neeto-ui-py-2",
-    onClick: function onClick(event) {
-      event.stopPropagation();
-    }
-  }, /*#__PURE__*/React.createElement(Input$1, {
-    "data-cy": "ntm-members-roles-search-input",
-    prefix: /*#__PURE__*/React.createElement(Search, null),
-    type: "search",
-    value: searchTerm,
-    placeholder: t("neetoTeamMembers.placeholders.searchRole", PLURAL),
-    onChange: handleSearch
-  })), isNotEmpty(filteredRoles) ? filteredRoles.map(function (_ref3) {
-    var id = _ref3.id,
-      name = _ref3.name;
-    return /*#__PURE__*/React.createElement(MenuItem$1.Button, {
-      key: id,
-      onClick: function onClick() {
-        return handleSelectRole(name);
-      }
-    }, name);
-  }) : /*#__PURE__*/React.createElement("div", {
-    className: "neeto-ui-flex neeto-ui-justify-center neeto-ui-p-1"
-  }, /*#__PURE__*/React.createElement(Typography, {
-    className: "neeto-ui-text-gray-700",
-    style: "body2"
-  }, t("neetoTeamMembers.helpers.noRolesFound")))))));
+    })
+  });
 };
 
-function ownKeys$4(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
-function _objectSpread$4(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$4(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$4(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function ownKeys$5(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread$5(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$5(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$5(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var Menu$1 = Dropdown.Menu,
   MenuItem = Dropdown.MenuItem;
 var Left = function Left(_ref) {
@@ -6765,64 +6875,74 @@ var Left = function Left(_ref) {
     }
     return type === "deactivate" ? t("neetoTeamMembers.buttons.deactivate") : t("neetoTeamMembers.buttons.activate");
   };
-  return /*#__PURE__*/React.createElement("div", {
-    className: "neeto-ui-flex neeto-ui-items-center neeto-ui-gap-4"
-  }, /*#__PURE__*/React.createElement(Typography, {
-    component: "h4",
-    "data-cy": "ntm-filtered-members-count",
-    style: "h4"
-  }, /*#__PURE__*/React.createElement(Trans, {
-    components: {
-      span: /*#__PURE__*/React.createElement("span", {
-        className: "neeto-ui-text-gray-600"
+  return /*#__PURE__*/jsxs("div", {
+    className: "neeto-ui-flex neeto-ui-items-center neeto-ui-gap-4",
+    children: [/*#__PURE__*/jsx(Typography, {
+      component: "h4",
+      "data-cy": "ntm-filtered-members-count",
+      style: "h4",
+      children: /*#__PURE__*/jsx(Trans, {
+        components: {
+          span: /*#__PURE__*/jsx("span", {
+            className: "neeto-ui-text-gray-600"
+          })
+        },
+        values: selectedMembersCountValues,
+        i18nKey: hasSelectedRows ? "neetoTeamMembers.helpers.selectedMembersCount" : "neetoTeamMembers.helpers.metaNameWithCount"
       })
-    },
-    values: selectedMembersCountValues,
-    i18nKey: hasSelectedRows ? "neetoTeamMembers.helpers.selectedMembersCount" : "neetoTeamMembers.helpers.metaNameWithCount"
-  })), hasSelectedRows && /*#__PURE__*/React.createElement(Tooltip, {
-    content: t("neetoTeamMembers.tooltips.noPermissionToEditMembers"),
-    disabled: isUpdatePermissionGranted,
-    position: "top"
-  }, /*#__PURE__*/React.createElement("span", null, /*#__PURE__*/React.createElement(Dropdown, {
-    buttonStyle: "secondary",
-    "data-cy": "ntm-members-take-action-dropdown-button",
-    disabled: !isUpdatePermissionGranted,
-    label: t("neetoTeamMembers.common.takeAction")
-  }, /*#__PURE__*/React.createElement(Menu$1, null, getDeactivatedButtonVisible(selectedRows, config) && /*#__PURE__*/React.createElement(MenuItem.Button, {
-    "data-cy": "ntm-deactivate-members-button",
-    disabled: !isUpdatePermissionGranted,
-    onClick: function onClick() {
-      return setAlertType("deactivate");
-    }
-  }, t("neetoTeamMembers.common.deactivate")), getActivateButtonVisible(selectedRows, config) && /*#__PURE__*/React.createElement(MenuItem.Button, {
-    "data-cy": "ntm-activate-members-button",
-    disabled: !isUpdatePermissionGranted,
-    onClick: function onClick() {
-      return setAlertType("activate");
-    }
-  }, t("neetoTeamMembers.common.activate")), !(config !== null && config !== void 0 && (_config$hiddenBulkAct = config.hiddenBulkActions) !== null && _config$hiddenBulkAct !== void 0 && _config$hiddenBulkAct.includes("role")) && /*#__PURE__*/React.createElement(RolesDropdown, {
-    roles: roles,
-    setAlertType: setAlertType,
-    setBulkUpdateRole: setBulkUpdateRole,
-    disabled: hasDeactivateMembers,
-    hasUpdatePermission: isUpdatePermissionGranted,
-    selectedMembersCount: selectedMembersCountValues === null || selectedMembersCountValues === void 0 ? void 0 : selectedMembersCountValues.count
-  }), config === null || config === void 0 || (_config$otherBulkActi = config.otherBulkActions) === null || _config$otherBulkActi === void 0 ? void 0 : _config$otherBulkActi.call(config, resetSelectedRows, selectedRows))))), /*#__PURE__*/React.createElement(Alert, {
-    isOpen: selectedAlert,
-    submitButtonLabel: getButtonLabel(selectedAlert === null || selectedAlert === void 0 ? void 0 : selectedAlert.type),
-    title: selectedAlert === null || selectedAlert === void 0 ? void 0 : selectedAlert.title,
-    message: /*#__PURE__*/React.createElement(Trans, {
-      i18nKey: selectedAlert === null || selectedAlert === void 0 ? void 0 : selectedAlert.message,
-      values: _objectSpread$4(_objectSpread$4({}, selectedMembersCountValues), {}, {
-        person: selectedRows.displayNames[0],
-        role: bulkUpdateRole
+    }), hasSelectedRows && /*#__PURE__*/jsx(Tooltip, {
+      content: t("neetoTeamMembers.tooltips.noPermissionToEditMembers"),
+      disabled: isUpdatePermissionGranted,
+      position: "top",
+      children: /*#__PURE__*/jsx("span", {
+        children: /*#__PURE__*/jsx(Dropdown, {
+          buttonStyle: "secondary",
+          "data-cy": "ntm-members-take-action-dropdown-button",
+          disabled: !isUpdatePermissionGranted,
+          label: t("neetoTeamMembers.common.takeAction"),
+          children: /*#__PURE__*/jsxs(Menu$1, {
+            children: [getDeactivatedButtonVisible(selectedRows, config) && /*#__PURE__*/jsx(MenuItem.Button, {
+              "data-cy": "ntm-deactivate-members-button",
+              disabled: !isUpdatePermissionGranted,
+              onClick: function onClick() {
+                return setAlertType("deactivate");
+              },
+              children: t("neetoTeamMembers.common.deactivate")
+            }), getActivateButtonVisible(selectedRows, config) && /*#__PURE__*/jsx(MenuItem.Button, {
+              "data-cy": "ntm-activate-members-button",
+              disabled: !isUpdatePermissionGranted,
+              onClick: function onClick() {
+                return setAlertType("activate");
+              },
+              children: t("neetoTeamMembers.common.activate")
+            }), !(config !== null && config !== void 0 && (_config$hiddenBulkAct = config.hiddenBulkActions) !== null && _config$hiddenBulkAct !== void 0 && _config$hiddenBulkAct.includes("role")) && /*#__PURE__*/jsx(RolesDropdown, {
+              roles: roles,
+              setAlertType: setAlertType,
+              setBulkUpdateRole: setBulkUpdateRole,
+              disabled: hasDeactivateMembers,
+              hasUpdatePermission: isUpdatePermissionGranted,
+              selectedMembersCount: selectedMembersCountValues === null || selectedMembersCountValues === void 0 ? void 0 : selectedMembersCountValues.count
+            }), config === null || config === void 0 || (_config$otherBulkActi = config.otherBulkActions) === null || _config$otherBulkActi === void 0 ? void 0 : _config$otherBulkActi.call(config, resetSelectedRows, selectedRows)]
+          })
+        })
       })
-    }),
-    onClose: function onClose() {
-      return setAlertType("");
-    },
-    onSubmit: handleAlertClose
-  }));
+    }), /*#__PURE__*/jsx(Alert, {
+      isOpen: selectedAlert,
+      submitButtonLabel: getButtonLabel(selectedAlert === null || selectedAlert === void 0 ? void 0 : selectedAlert.type),
+      title: selectedAlert === null || selectedAlert === void 0 ? void 0 : selectedAlert.title,
+      message: /*#__PURE__*/jsx(Trans, {
+        i18nKey: selectedAlert === null || selectedAlert === void 0 ? void 0 : selectedAlert.message,
+        values: _objectSpread$5(_objectSpread$5({}, selectedMembersCountValues), {}, {
+          person: selectedRows.displayNames[0],
+          role: bulkUpdateRole
+        })
+      }),
+      onClose: function onClose() {
+        return setAlertType("");
+      },
+      onSubmit: handleAlertClose
+    })]
+  });
 };
 var Right = withT(function (_ref3) {
   var t = _ref3.t,
@@ -6832,7 +6952,7 @@ var Right = withT(function (_ref3) {
     setIsFiltersPaneOpen = _ref3.setIsFiltersPaneOpen,
     isFiltersPaneOpen = _ref3.isFiltersPaneOpen,
     searchKeywordProps = _ref3.searchKeywordProps;
-  return /*#__PURE__*/React.createElement(SubHeaderMolecule.RightBlock, {
+  return /*#__PURE__*/jsx(SubHeaderMolecule.RightBlock, {
     columnsButtonProps: {
       columnData: columns,
       fixedColumns: FIXED_COLUMNS,
@@ -6856,18 +6976,18 @@ var SubHeader = {
   Right: Right
 };
 
-function ownKeys$3(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
-function _objectSpread$3(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$3(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$3(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function ownKeys$4(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread$4(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$4(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$4(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var Header = function Header(_ref) {
   var _config$header, _config$header2;
   var config = _ref.config,
     setIsOpen = _ref.setIsOpen,
     searchProps = _ref.searchProps,
     filterCategory = _ref.filterCategory;
-  return /*#__PURE__*/React.createElement(NeetoHeader, _extends({
+  return /*#__PURE__*/jsx(NeetoHeader, _objectSpread$4({
     searchProps: searchProps,
     title: renderHeaderTitle(MEMBER_FILTER[filterCategory].value),
-    actionBlock: /*#__PURE__*/React.createElement(HeaderActionBlock, {
+    actionBlock: /*#__PURE__*/jsx(HeaderActionBlock, {
       isCreatePermissionGranted: config.permissions.create,
       otherActionBlock: (_config$header = config.header) === null || _config$header === void 0 ? void 0 : _config$header.otherActionBlock,
       rolesButtonProps: config.rolesButtonProps,
@@ -6877,7 +6997,7 @@ var Header = function Header(_ref) {
     }),
     menuBarToggle: function menuBarToggle() {
       return setIsOpen(function (state) {
-        return _objectSpread$3(_objectSpread$3({}, state), {}, {
+        return _objectSpread$4(_objectSpread$4({}, state), {}, {
           menuBar: !state.menuBar
         });
       });
@@ -6886,126 +7006,29 @@ var Header = function Header(_ref) {
 };
 var Header$1 = /*#__PURE__*/memo(Header);
 
-var AppList = function AppList(_ref) {
-  var globalRoles = _ref.globalRoles,
-    savedStateRef = _ref.savedStateRef;
-  var _useTranslation = useTranslation(),
-    t = _useTranslation.t;
-  var _useState = useState(savedStateRef.current.isAppListEnabled),
-    _useState2 = _slicedToArray(_useState, 2),
-    isAppListEnabled = _useState2[0],
-    setIsAppListEnabled = _useState2[1];
-  var _useFormikContext = useFormikContext(),
-    _useFormikContext$val = _useFormikContext.values,
-    _useFormikContext$val2 = _useFormikContext$val.emails,
-    emails = _useFormikContext$val2 === void 0 ? [] : _useFormikContext$val2,
-    _useFormikContext$val3 = _useFormikContext$val.appRoles,
-    appRoles = _useFormikContext$val3 === void 0 ? [] : _useFormikContext$val3,
-    setFieldValue = _useFormikContext.setFieldValue;
-  var selectedEmail = pluck("value", emails);
-  useEffect(function () {
-    if (savedStateRef.current.isAppListEnabled !== isAppListEnabled) {
-      appRoles === null || appRoles === void 0 || appRoles.forEach(function (appRole, index) {
-        var _globalProps$appName;
-        if ((appRole === null || appRole === void 0 ? void 0 : appRole.appName) === ((_globalProps$appName = globalProps.appName) === null || _globalProps$appName === void 0 ? void 0 : _globalProps$appName.substring(5))) {
-          setFieldValue("appRoles[".concat(index, "].isEnabled"), true);
-          return;
-        }
-        setFieldValue("appRoles[".concat(index, "].isEnabled"), isAppListEnabled);
-      });
-    }
-    savedStateRef.current.isAppListEnabled = isAppListEnabled;
-  }, [isAppListEnabled]); // eslint-disable-line react-hooks/exhaustive-deps
-
-  var buildRoleOptions = function buildRoleOptions(roles) {
-    return roles.map(function (role) {
-      return toLabelAndValue(role.name);
-    });
-  };
-  return /*#__PURE__*/React.createElement("div", {
-    className: "neeto-ui-flex neeto-ui-flex-col neeto-ui-gap-6"
-  }, /*#__PURE__*/React.createElement("div", {
-    className: "neeto-ui-w-full"
-  }, /*#__PURE__*/React.createElement(Checkbox, {
-    checked: isAppListEnabled,
-    className: "ntm-manage-members__checkbox-align-start",
-    "data-cy": "ntm-manage-members-app-list-checkbox",
-    label: /*#__PURE__*/React.createElement(Typography, {
-      component: "span",
-      lineHeight: "relaxed",
-      style: "body2"
-    }, /*#__PURE__*/React.createElement(Trans, {
-      i18nKey: "neetoTeamMembers.helpers.addMembersToNeetoProducts",
-      values: {
-        emails: selectedEmail
-      }
-    })),
-    onChange: function onChange() {
-      return setIsAppListEnabled(not);
-    }
-  })), /*#__PURE__*/React.createElement("div", {
-    className: "neeto-ui-w-full"
-  }, appRoles.map(function (_ref2, index) {
-    var _globalProps$appName2;
-    var appName = _ref2.appName,
-      isEnabled = _ref2.isEnabled;
-    var isCurrentApp = appName === ((_globalProps$appName2 = globalProps.appName) === null || _globalProps$appName2 === void 0 ? void 0 : _globalProps$appName2.substring(5));
-    var isAppRoleSelectionChecked = isCurrentApp || isEnabled;
-    return /*#__PURE__*/React.createElement("div", {
-      className: "ntm-manage-members__app-roles",
-      key: appName
-    }, /*#__PURE__*/React.createElement(Tooltip, {
-      content: t("neetoTeamMembers.tooltips.hostAppIsRequired"),
-      disabled: !isCurrentApp,
-      position: "left"
-    }, /*#__PURE__*/React.createElement("span", null, /*#__PURE__*/React.createElement(Switch, {
-      checked: isAppRoleSelectionChecked,
-      disabled: isCurrentApp,
-      name: "appsRoles[".concat(index, "].isEnabled"),
-      label: t("neetoTeamMembers.labels.neeto_", {
-        product: appName
-      }),
-      onChange: function onChange(_ref3) {
-        var target = _ref3.target;
-        setFieldValue("appRoles[".concat(index, "].isEnabled"), target.checked);
-      }
-    }))), /*#__PURE__*/React.createElement(Tooltip, {
-      content: t("neetoTeamMembers.tooltips.goBackToChangeRole"),
-      disabled: !isCurrentApp,
-      position: "top"
-    }, /*#__PURE__*/React.createElement("span", {
-      className: "ntm-manage-members-app-roles__select-wrapper"
-    }, /*#__PURE__*/React.createElement(Select, {
-      isDisabled: isCurrentApp || !isEnabled,
-      name: "appRoles[".concat(index, "].activeRole"),
-      options: buildRoleOptions(globalRoles[appName]),
-      size: "small",
-      strategy: "fixed",
-      onChange: function onChange(_ref4) {
-        var value = _ref4.value;
-        setFieldValue("appRoles[".concat(index, "].activeRole"), value);
-      }
-    }))));
-  })));
-};
-
 var _excluded$1 = ["className", "children"],
   _excluded2 = ["className", "children"];
+function ownKeys$3(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread$3(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$3(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$3(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var PageWrapper = function PageWrapper(_ref) {
   var className = _ref.className,
     children = _ref.children,
     otherProps = _objectWithoutProperties(_ref, _excluded$1);
-  return /*#__PURE__*/React.createElement("div", _extends({
+  return /*#__PURE__*/jsx("div", _objectSpread$3(_objectSpread$3({
     className: className
-  }, otherProps), children);
+  }, otherProps), {}, {
+    children: children
+  }));
 };
 var Page = function Page(_ref2) {
   var className = _ref2.className,
     children = _ref2.children,
     otherProps = _objectWithoutProperties(_ref2, _excluded2);
-  return /*#__PURE__*/React.createElement("div", _extends({
+  return /*#__PURE__*/jsx("div", _objectSpread$3(_objectSpread$3({
     className: className
-  }, otherProps), children);
+  }, otherProps), {}, {
+    children: children
+  }));
 };
 Page.Header = PageWrapper;
 Page.Body = PageWrapper;
@@ -7052,6 +7075,7 @@ var FORM_PAGES = {
 };
 var EMAIL_REGEX = new RegExp("^[A-Z0-9._%+-]+@[A-Z0-9.-]+\\.[A-Z]{2,}$", "i");
 
+var _globalProps$organiza;
 var _excluded = ["appRoles", "emails", "firstName", "lastName", "role"];
 function ownKeys$2(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread$2(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$2(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$2(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
@@ -7159,13 +7183,13 @@ var buildValidationSchema = function buildValidationSchema(_ref4) {
   return yup.object().shape(_objectSpread$2(_objectSpread$2(_objectSpread$2(_objectSpread$2({}, NAME_INPUT_VALIDATION_SCHEMA), ROLES_RADIO_GROUP_VALIDATION_SCHEMA), APP_ROLES_SCHEMA), {}, {
     emails: yup.array().min(1, t$1("neetoTeamMembers.validations.minOneEmail")).test("are-all-emails-valid", t$1("neetoTeamMembers.validations.validEmail"), function (emails) {
       return emails.every(prop("valid"));
-    }).test("is-emails-length-within-available-members-capacity", /*#__PURE__*/React.createElement(Trans, {
+    }).test("is-emails-length-within-available-members-capacity", /*#__PURE__*/jsx(Trans, {
       i18nKey: "neetoTeamMembers.validations.memberLimitExceeded",
       values: {
         limit: memberLimit
       },
       components: {
-        emailTo: /*#__PURE__*/React.createElement(Button, {
+        emailTo: /*#__PURE__*/jsx(Button, {
           href: "mailto:support@neeto.com",
           style: "link"
         })
@@ -7175,6 +7199,136 @@ var buildValidationSchema = function buildValidationSchema(_ref4) {
     }).nullable()
   }));
 };
+var neetoAuthManageProductUrl = "".concat((_globalProps$organiza = globalProps.organization) === null || _globalProps$organiza === void 0 ? void 0 : _globalProps$organiza.authAppUrl, "/settings/general/products");
+
+var AppList = function AppList(_ref) {
+  var globalRoles = _ref.globalRoles,
+    savedStateRef = _ref.savedStateRef;
+  var _useTranslation = useTranslation(),
+    t = _useTranslation.t;
+  var _useState = useState(savedStateRef.current.isAppListEnabled),
+    _useState2 = _slicedToArray(_useState, 2),
+    isAppListEnabled = _useState2[0],
+    setIsAppListEnabled = _useState2[1];
+  var _useFetchNeetoApps = useFetchNeetoApps(),
+    _useFetchNeetoApps$da = _useFetchNeetoApps.data,
+    _useFetchNeetoApps$da2 = _useFetchNeetoApps$da === void 0 ? {} : _useFetchNeetoApps$da,
+    isOwner = _useFetchNeetoApps$da2.isOwner,
+    neetoApps = _useFetchNeetoApps$da2.neetoApps;
+  var _useFormikContext = useFormikContext(),
+    _useFormikContext$val = _useFormikContext.values,
+    _useFormikContext$val2 = _useFormikContext$val.emails,
+    emails = _useFormikContext$val2 === void 0 ? [] : _useFormikContext$val2,
+    _useFormikContext$val3 = _useFormikContext$val.appRoles,
+    appRoles = _useFormikContext$val3 === void 0 ? [] : _useFormikContext$val3,
+    setFieldValue = _useFormikContext.setFieldValue;
+  var selectedEmail = pluck("value", emails);
+  var isManageProductsLinkEnabled = isOwner && (neetoApps === null || neetoApps === void 0 ? void 0 : neetoApps.length) >= 3;
+  useEffect(function () {
+    if (savedStateRef.current.isAppListEnabled !== isAppListEnabled) {
+      appRoles === null || appRoles === void 0 || appRoles.forEach(function (appRole, index) {
+        var _globalProps$appName;
+        if ((appRole === null || appRole === void 0 ? void 0 : appRole.appName) === ((_globalProps$appName = globalProps.appName) === null || _globalProps$appName === void 0 ? void 0 : _globalProps$appName.substring(5))) {
+          setFieldValue("appRoles[".concat(index, "].isEnabled"), true);
+          return;
+        }
+        setFieldValue("appRoles[".concat(index, "].isEnabled"), isAppListEnabled);
+      });
+    }
+    savedStateRef.current.isAppListEnabled = isAppListEnabled;
+  }, [isAppListEnabled]); // eslint-disable-line react-hooks/exhaustive-deps
+
+  var buildRoleOptions = function buildRoleOptions(roles) {
+    return roles.map(function (role) {
+      return toLabelAndValue(role.name);
+    });
+  };
+  return /*#__PURE__*/jsxs("div", {
+    className: "neeto-ui-flex neeto-ui-flex-col neeto-ui-gap-6",
+    children: [/*#__PURE__*/jsxs("div", {
+      className: "neeto-ui-w-full space-y-3",
+      children: [/*#__PURE__*/jsx(Checkbox, {
+        checked: isAppListEnabled,
+        className: "ntm-manage-members__checkbox-align-start",
+        "data-cy": "ntm-manage-members-app-list-checkbox",
+        label: /*#__PURE__*/jsx(Typography, {
+          component: "span",
+          lineHeight: "relaxed",
+          style: "body2",
+          children: /*#__PURE__*/jsx(Trans, {
+            i18nKey: "neetoTeamMembers.helpers.addMembersToNeetoProducts",
+            values: {
+              emails: selectedEmail
+            }
+          })
+        }),
+        onChange: function onChange() {
+          return setIsAppListEnabled(not);
+        }
+      }), isManageProductsLinkEnabled && /*#__PURE__*/jsx(Typography, {
+        style: "body2",
+        children: /*#__PURE__*/jsx(Trans, {
+          i18nKey: "neetoTeamMembers.helpers.manageProducts",
+          components: {
+            button: /*#__PURE__*/jsx(Button, {
+              href: neetoAuthManageProductUrl,
+              style: "link"
+            })
+          }
+        })
+      })]
+    }), /*#__PURE__*/jsx("div", {
+      className: "neeto-ui-w-full",
+      children: appRoles.map(function (_ref2, index) {
+        var _globalProps$appName2;
+        var appName = _ref2.appName,
+          isEnabled = _ref2.isEnabled;
+        var isCurrentApp = appName === ((_globalProps$appName2 = globalProps.appName) === null || _globalProps$appName2 === void 0 ? void 0 : _globalProps$appName2.substring(5));
+        var isAppRoleSelectionChecked = isCurrentApp || isEnabled;
+        return /*#__PURE__*/jsxs("div", {
+          className: "ntm-manage-members__app-roles",
+          children: [/*#__PURE__*/jsx(Tooltip, {
+            content: t("neetoTeamMembers.tooltips.hostAppIsRequired"),
+            disabled: !isCurrentApp,
+            position: "left",
+            children: /*#__PURE__*/jsx("span", {
+              children: /*#__PURE__*/jsx(Switch, {
+                checked: isAppRoleSelectionChecked,
+                disabled: isCurrentApp,
+                name: "appsRoles[".concat(index, "].isEnabled"),
+                label: t("neetoTeamMembers.labels.neeto_", {
+                  product: appName
+                }),
+                onChange: function onChange(_ref3) {
+                  var target = _ref3.target;
+                  setFieldValue("appRoles[".concat(index, "].isEnabled"), target.checked);
+                }
+              })
+            })
+          }), /*#__PURE__*/jsx(Tooltip, {
+            content: t("neetoTeamMembers.tooltips.goBackToChangeRole"),
+            disabled: !isCurrentApp,
+            position: "top",
+            children: /*#__PURE__*/jsx("span", {
+              className: "ntm-manage-members-app-roles__select-wrapper",
+              children: /*#__PURE__*/jsx(Select, {
+                isDisabled: isCurrentApp || !isEnabled,
+                name: "appRoles[".concat(index, "].activeRole"),
+                options: buildRoleOptions(globalRoles[appName]),
+                size: "small",
+                strategy: "fixed",
+                onChange: function onChange(_ref4) {
+                  var value = _ref4.value;
+                  setFieldValue("appRoles[".concat(index, "].activeRole"), value);
+                }
+              })
+            })
+          })]
+        }, appName);
+      })
+    })]
+  });
+};
 
 var Confirmation = function Confirmation() {
   var _globalProps$organiza;
@@ -7189,51 +7343,72 @@ var Confirmation = function Confirmation() {
   var activeAppRoles = filterBy({
     isEnabled: true
   }, appRoles);
-  return activeAppRoles.length > 1 ? /*#__PURE__*/React.createElement("div", {
-    className: "neeto-ui-flex neeto-ui-flex-col neeto-ui-gap-6"
-  }, /*#__PURE__*/React.createElement("div", {
-    className: "neeto-ui-w-full"
-  }, /*#__PURE__*/React.createElement(Typography, {
-    component: "span",
-    lineHeight: "relaxed",
-    style: "body2"
-  }, /*#__PURE__*/React.createElement(Trans, {
-    i18nKey: "neetoTeamMembers.helpers.multipleProductInvitation",
-    values: {
-      count: selectedEmail.length,
-      emails: selectedEmail,
-      orgName: (_globalProps$organiza = globalProps.organization) === null || _globalProps$organiza === void 0 ? void 0 : _globalProps$organiza.name
-    }
-  }))), /*#__PURE__*/React.createElement("table", {
-    className: "neeto-ui-w-full ntm-product-roles-table"
-  }, /*#__PURE__*/React.createElement("thead", null, /*#__PURE__*/React.createElement("tr", null, /*#__PURE__*/React.createElement("th", null, t("neetoTeamMembers.common.productName")), /*#__PURE__*/React.createElement("th", null, t("neetoTeamMembers.common.role", SINGULAR)))), /*#__PURE__*/React.createElement("tbody", null, activeAppRoles.map(function (_ref) {
-    var appName = _ref.appName,
-      activeRole = _ref.activeRole;
-    return /*#__PURE__*/React.createElement("tr", {
-      key: appName
-    }, /*#__PURE__*/React.createElement("td", null, /*#__PURE__*/React.createElement(Typography, {
-      component: "span",
-      lineHeight: "relaxed",
-      style: "body2"
-    }, t("neetoTeamMembers.labels.neeto_", {
-      product: appName
-    }))), /*#__PURE__*/React.createElement("td", null, /*#__PURE__*/React.createElement(Typography, {
-      component: "span",
-      lineHeight: "relaxed",
-      style: "body2"
-    }, activeRole)));
-  })))) : /*#__PURE__*/React.createElement(Typography, {
+  return activeAppRoles.length > 1 ? /*#__PURE__*/jsxs("div", {
+    className: "neeto-ui-flex neeto-ui-flex-col neeto-ui-gap-6",
+    children: [/*#__PURE__*/jsx("div", {
+      className: "neeto-ui-w-full",
+      children: /*#__PURE__*/jsx(Typography, {
+        component: "span",
+        lineHeight: "relaxed",
+        style: "body2",
+        children: /*#__PURE__*/jsx(Trans, {
+          i18nKey: "neetoTeamMembers.helpers.multipleProductInvitation",
+          values: {
+            count: selectedEmail.length,
+            emails: selectedEmail,
+            orgName: (_globalProps$organiza = globalProps.organization) === null || _globalProps$organiza === void 0 ? void 0 : _globalProps$organiza.name
+          }
+        })
+      })
+    }), /*#__PURE__*/jsxs("table", {
+      className: "neeto-ui-w-full ntm-product-roles-table",
+      children: [/*#__PURE__*/jsx("thead", {
+        children: /*#__PURE__*/jsxs("tr", {
+          children: [/*#__PURE__*/jsx("th", {
+            children: t("neetoTeamMembers.common.productName")
+          }), /*#__PURE__*/jsx("th", {
+            children: t("neetoTeamMembers.common.role", SINGULAR)
+          })]
+        })
+      }), /*#__PURE__*/jsx("tbody", {
+        children: activeAppRoles.map(function (_ref) {
+          var appName = _ref.appName,
+            activeRole = _ref.activeRole;
+          return /*#__PURE__*/jsxs("tr", {
+            children: [/*#__PURE__*/jsx("td", {
+              children: /*#__PURE__*/jsx(Typography, {
+                component: "span",
+                lineHeight: "relaxed",
+                style: "body2",
+                children: t("neetoTeamMembers.labels.neeto_", {
+                  product: appName
+                })
+              })
+            }), /*#__PURE__*/jsx("td", {
+              children: /*#__PURE__*/jsx(Typography, {
+                component: "span",
+                lineHeight: "relaxed",
+                style: "body2",
+                children: activeRole
+              })
+            })]
+          }, appName);
+        })
+      })]
+    })]
+  }) : /*#__PURE__*/jsx(Typography, {
     component: "span",
     lineHeight: "relaxed",
-    style: "body2"
-  }, /*#__PURE__*/React.createElement(Trans, {
-    i18nKey: "neetoTeamMembers.helpers.singleProductInvitation",
-    values: getSingleInvitationTranslationProps({
-      activeAppRoles: activeAppRoles,
-      role: role,
-      selectedEmail: selectedEmail
+    style: "body2",
+    children: /*#__PURE__*/jsx(Trans, {
+      i18nKey: "neetoTeamMembers.helpers.singleProductInvitation",
+      values: getSingleInvitationTranslationProps({
+        activeAppRoles: activeAppRoles,
+        role: role,
+        selectedEmail: selectedEmail
+      })
     })
-  }));
+  });
 };
 
 var MultipleEmailInput = function MultipleEmailInput(_ref) {
@@ -7256,50 +7431,54 @@ var MultipleEmailInput = function MultipleEmailInput(_ref) {
     }];
     setFieldValue("emails", emailList);
   };
-  return /*#__PURE__*/React.createElement("div", {
-    className: "neeto-ui-w-full"
-  }, selectedMember ? /*#__PURE__*/React.createElement(Input, {
-    "data-cy": "ntm-manage-member-email-input",
-    name: "emails",
-    size: "medium",
-    type: "email",
-    value: (_head = head(emails)) === null || _head === void 0 ? void 0 : _head.value,
-    label: /*#__PURE__*/React.createElement("span", {
-      className: "neeto-ui-w-full neeto-ui-flex neeto-ui-justify-between"
-    }, /*#__PURE__*/React.createElement(Typography, {
-      component: "span",
-      style: "body2"
-    }, t("neetoTeamMembers.common.email", SINGULAR))),
-    onChange: handleInputChange
-  }) : /*#__PURE__*/React.createElement(MultiEmailInput, {
-    required: true,
-    counter: COUNTER_PROPS,
-    "data-cy": "ntm-manage-member-email-input",
-    filterInvalidEmails: FILTER_INVALID_EMAILS,
-    helpText: t("neetoTeamMembers.helpers.enterMultipleEmails"),
-    label: t("neetoTeamMembers.common.email", PLURAL),
-    name: "emails",
-    placeholder: t("neetoTeamMembers.placeholders.email"),
-    ref: innerRef
-  }));
+  return /*#__PURE__*/jsx("div", {
+    className: "neeto-ui-w-full",
+    children: selectedMember ? /*#__PURE__*/jsx(Input, {
+      "data-cy": "ntm-manage-member-email-input",
+      name: "emails",
+      size: "medium",
+      type: "email",
+      value: (_head = head(emails)) === null || _head === void 0 ? void 0 : _head.value,
+      label: /*#__PURE__*/jsx("span", {
+        className: "neeto-ui-w-full neeto-ui-flex neeto-ui-justify-between",
+        children: /*#__PURE__*/jsx(Typography, {
+          component: "span",
+          style: "body2",
+          children: t("neetoTeamMembers.common.email", SINGULAR)
+        })
+      }),
+      onChange: handleInputChange
+    }) : /*#__PURE__*/jsx(MultiEmailInput, {
+      required: true,
+      counter: COUNTER_PROPS,
+      "data-cy": "ntm-manage-member-email-input",
+      filterInvalidEmails: FILTER_INVALID_EMAILS,
+      helpText: t("neetoTeamMembers.helpers.enterMultipleEmails"),
+      label: t("neetoTeamMembers.common.email", PLURAL),
+      name: "emails",
+      placeholder: t("neetoTeamMembers.placeholders.email"),
+      ref: innerRef
+    })
+  });
 };
 
 var NameInputs = function NameInputs(_ref) {
   var innerRef = _ref.innerRef;
   var _useTranslation = useTranslation(),
     t = _useTranslation.t;
-  return /*#__PURE__*/React.createElement("div", {
-    className: "neeto-ui-flex neeto-ui-w-full neeto-ui-gap-4"
-  }, /*#__PURE__*/React.createElement(Input, {
-    "data-cy": "ntm-edit-member-first-name-text-field",
-    label: t("neetoTeamMembers.labels.firstName"),
-    name: "firstName",
-    ref: innerRef
-  }), /*#__PURE__*/React.createElement(Input, {
-    "data-cy": "ntm-edit-member-last-name-text-field",
-    label: t("neetoTeamMembers.labels.lastName"),
-    name: "lastName"
-  }));
+  return /*#__PURE__*/jsxs("div", {
+    className: "neeto-ui-flex neeto-ui-w-full neeto-ui-gap-4",
+    children: [/*#__PURE__*/jsx(Input, {
+      "data-cy": "ntm-edit-member-first-name-text-field",
+      label: t("neetoTeamMembers.labels.firstName"),
+      name: "firstName",
+      ref: innerRef
+    }), /*#__PURE__*/jsx(Input, {
+      "data-cy": "ntm-edit-member-last-name-text-field",
+      label: t("neetoTeamMembers.labels.lastName"),
+      name: "lastName"
+    })]
+  });
 };
 
 var RolesRadioGroup = function RolesRadioGroup(_ref) {
@@ -7335,7 +7514,7 @@ var RolesRadioGroup = function RolesRadioGroup(_ref) {
       }
     });
   };
-  return /*#__PURE__*/React.createElement(Radio$1, {
+  return /*#__PURE__*/jsx(Radio$1, {
     stacked: true,
     className: "ntm-members-radio-group flex-grow-0",
     "data-cy": "ntm-manage-member-roles-group",
@@ -7343,37 +7522,40 @@ var RolesRadioGroup = function RolesRadioGroup(_ref) {
       className: "neeto-ui-radio__label w-full"
     },
     name: "role",
-    label: /*#__PURE__*/React.createElement("span", {
-      className: "flex w-full items-center justify-between"
-    }, /*#__PURE__*/React.createElement(Label, {
-      required: true
-    }, " ", t("neetoTeamMembers.common.role", SINGULAR)), /*#__PURE__*/React.createElement(Button, {
-      label: t("neetoTeamMembers.labels.manageRole", PLURAL),
-      style: "link",
-      to: config.pathToRolesPage
-    })),
+    label: /*#__PURE__*/jsxs("span", {
+      className: "flex w-full items-center justify-between",
+      children: [/*#__PURE__*/jsxs(Label, {
+        required: true,
+        children: [" ", t("neetoTeamMembers.common.role", SINGULAR)]
+      }), /*#__PURE__*/jsx(Button, {
+        label: t("neetoTeamMembers.labels.manageRole", PLURAL),
+        style: "link",
+        to: config.pathToRolesPage
+      })]
+    }),
     onChange: function onChange(_ref3) {
       var value = _ref3.target.value;
       setFieldValue("role", value);
       !isEdit && setDefaultSelection(value);
-    }
-  }, roles.map(function (_ref4) {
-    var id = _ref4.id,
-      name = _ref4.name;
-    return /*#__PURE__*/React.createElement("label", {
-      className: "ntm-members-form-radio-item__wrapper",
-      htmlFor: slugify(name),
-      key: id
-    }, /*#__PURE__*/React.createElement(Radio$1.Item, {
-      className: "ntm-members-form-radio-item__label",
-      "data-cy": "ntm-manage-member-roles-button",
-      defaultChecked: identical(name, role),
-      id: slugify(name),
-      label: name,
-      name: "role",
-      value: name
-    }));
-  }));
+    },
+    children: roles.map(function (_ref4) {
+      var id = _ref4.id,
+        name = _ref4.name;
+      return /*#__PURE__*/jsx("label", {
+        className: "ntm-members-form-radio-item__wrapper",
+        htmlFor: slugify(name),
+        children: /*#__PURE__*/jsx(Radio$1.Item, {
+          className: "ntm-members-form-radio-item__label",
+          "data-cy": "ntm-manage-member-roles-button",
+          defaultChecked: identical(name, role),
+          id: slugify(name),
+          label: name,
+          name: "role",
+          value: name
+        })
+      }, id);
+    })
+  });
 };
 
 var SubscriptionPlan = function SubscriptionPlan(_ref) {
@@ -7386,29 +7568,32 @@ var SubscriptionPlan = function SubscriptionPlan(_ref) {
   var handleChange = function handleChange(event) {
     return setFieldValue("subscriptionPlan", event.target.checked ? SUBSCRIPTION_PLANS.PRO : SUBSCRIPTION_PLANS.FREE);
   };
-  return /*#__PURE__*/React.createElement("div", {
-    className: "flex flex-col space-y-4"
-  }, /*#__PURE__*/React.createElement(Checkbox$1, {
-    label: /*#__PURE__*/React.createElement(Trans, {
-      i18nKey: "neetoTeamMembers.labels.upgradeToProPlan"
-    }),
-    name: "isSubscriptionProPlan",
-    onChange: handleChange
-  }), isProPlan && /*#__PURE__*/React.createElement(Callout, {
-    icon: Warning,
-    style: "warning"
-  }, /*#__PURE__*/React.createElement(Typography, {
-    style: "body2",
-    weight: "normal"
-  }, /*#__PURE__*/React.createElement(Trans, {
-    i18nKey: "neetoTeamMembers.helpers.subscriptionWarning",
-    values: {
-      amount: currencyFormat.withSymbol(subscription === null || subscription === void 0 || (_subscription$plan = subscription.plan) === null || _subscription$plan === void 0 ? void 0 : _subscription$plan.amount, subscription === null || subscription === void 0 || (_subscription$plan2 = subscription.plan) === null || _subscription$plan2 === void 0 || (_subscription$plan2 = _subscription$plan2.currency) === null || _subscription$plan2 === void 0 ? void 0 : _subscription$plan2.toUpperCase(), {
-        maximumFractionDigits: 2,
-        minimumFractionDigits: 0
+  return /*#__PURE__*/jsxs("div", {
+    className: "flex flex-col space-y-4",
+    children: [/*#__PURE__*/jsx(Checkbox$1, {
+      label: /*#__PURE__*/jsx(Trans, {
+        i18nKey: "neetoTeamMembers.labels.upgradeToProPlan"
+      }),
+      name: "isSubscriptionProPlan",
+      onChange: handleChange
+    }), isProPlan && /*#__PURE__*/jsx(Callout, {
+      icon: Warning,
+      style: "warning",
+      children: /*#__PURE__*/jsx(Typography, {
+        style: "body2",
+        weight: "normal",
+        children: /*#__PURE__*/jsx(Trans, {
+          i18nKey: "neetoTeamMembers.helpers.subscriptionWarning",
+          values: {
+            amount: currencyFormat.withSymbol(subscription === null || subscription === void 0 || (_subscription$plan = subscription.plan) === null || _subscription$plan === void 0 ? void 0 : _subscription$plan.amount, subscription === null || subscription === void 0 || (_subscription$plan2 = subscription.plan) === null || _subscription$plan2 === void 0 || (_subscription$plan2 = _subscription$plan2.currency) === null || _subscription$plan2 === void 0 ? void 0 : _subscription$plan2.toUpperCase(), {
+              maximumFractionDigits: 2,
+              minimumFractionDigits: 0
+            })
+          }
+        })
       })
-    }
-  }))));
+    })]
+  });
 };
 
 function ownKeys$1(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
@@ -7584,112 +7769,123 @@ var ManageMember = function ManageMember(_ref) {
     var _config$additionalFie;
     switch (page) {
       case FORM_PAGES.MAIN:
-        return /*#__PURE__*/React.createElement(React.Fragment, null, selectedMember && /*#__PURE__*/React.createElement(NameInputs, {
-          innerRef: inputReference
-        }), /*#__PURE__*/React.createElement(MultipleEmailInput, {
-          emails: emails,
-          selectedMember: selectedMember,
-          innerRef: inputReference
-        }), isSubscriptionVisible && /*#__PURE__*/React.createElement(SubscriptionPlan, {
-          handleClose: handleClose,
-          subscription: config.subscription
-        }), /*#__PURE__*/React.createElement(RolesRadioGroup, {
-          config: config,
-          globalRoles: globalRoles,
-          role: role,
-          isEdit: !!selectedMember,
-          roles: filteredRoles
-        }), (_config$additionalFie = config.additionalFields) === null || _config$additionalFie === void 0 ? void 0 : _config$additionalFie.component);
+        return /*#__PURE__*/jsxs(Fragment, {
+          children: [selectedMember && /*#__PURE__*/jsx(NameInputs, {
+            innerRef: inputReference
+          }), /*#__PURE__*/jsx(MultipleEmailInput, {
+            emails: emails,
+            selectedMember: selectedMember,
+            innerRef: inputReference
+          }), isSubscriptionVisible && /*#__PURE__*/jsx(SubscriptionPlan, {
+            handleClose: handleClose,
+            subscription: config.subscription
+          }), /*#__PURE__*/jsx(RolesRadioGroup, {
+            config: config,
+            globalRoles: globalRoles,
+            role: role,
+            isEdit: !!selectedMember,
+            roles: filteredRoles
+          }), (_config$additionalFie = config.additionalFields) === null || _config$additionalFie === void 0 ? void 0 : _config$additionalFie.component]
+        });
       case FORM_PAGES.APP_LIST:
-        return /*#__PURE__*/React.createElement(AppList, {
+        return /*#__PURE__*/jsx(AppList, {
           globalRoles: globalRoles,
           savedStateRef: appListSavedStateReference
         });
       case FORM_PAGES.CONFIRMATION:
-        return /*#__PURE__*/React.createElement(Confirmation, null);
+        return /*#__PURE__*/jsx(Confirmation, {});
       default:
         return null;
     }
   };
-  return /*#__PURE__*/React.createElement(Component, {
+  return /*#__PURE__*/jsxs(Component, {
     className: manageMemberComponentConfig.className,
     "data-cy": "ntm-manage-members-pane-wrapper",
     initialFocusRef: manageMemberComponentConfig.initialFocusRef,
     isOpen: manageMemberComponentConfig.isOpen,
     onClose: function onClose() {
       return handleClose(false);
-    }
-  }, /*#__PURE__*/React.createElement(Component.Header, _extends({}, manageMemberComponentConfig.headerProps, {
-    className: classnames([{
-      "ntm-manage-members__header": currentPage !== FORM_PAGES.MAIN
-    }, (_manageMemberComponen = manageMemberComponentConfig.headerProps) === null || _manageMemberComponen === void 0 ? void 0 : _manageMemberComponen.className])
-  }), currentPage !== FORM_PAGES.MAIN && /*#__PURE__*/React.createElement(Button, {
-    "aria-label": "Back",
-    icon: LeftArrow,
-    size: "medium",
-    style: "text",
-    tooltipProps: {
-      content: t("neetoTeamMembers.buttons.back"),
-      position: "bottom"
     },
-    onClick: handleBackButton
-  }), /*#__PURE__*/React.createElement(Typography, {
-    className: "ntm-members-form__header",
-    "data-cy": "ntm-manage-members-pane-header",
-    style: "h2",
-    weight: "semibold"
-  }, getTitle())), /*#__PURE__*/React.createElement(Form, {
-    ref: formReference,
-    formikProps: {
-      enableReinitialize: true,
-      initialValues: renderInitialValues({
-        additionalFieldsInitialValues: (_config$additionalFie2 = config.additionalFields) === null || _config$additionalFie2 === void 0 ? void 0 : _config$additionalFie2.initialValues,
-        globalRoles: globalRoles,
-        roles: filteredRoles,
-        selectedMember: selectedMember
-      }),
-      onSubmit: handleOnSubmit,
-      validationSchema: buildValidationSchema(_objectSpread$1({
-        selectedMember: selectedMember
-      }, team))
-    }
-  }, function (_ref5) {
-    var _manageMemberComponen2, _manageMemberComponen3;
-    var values = _ref5.values,
-      dirty = _ref5.dirty;
-    var emails = values.emails,
-      role = values.role;
-    formikValues.current = values;
-    return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(ScrollToErrorField, {
-      formRef: formReference
-    }), /*#__PURE__*/React.createElement(Component.Body, _extends({}, manageMemberComponentConfig.bodyProps, {
-      className: classnames(["ntm-members-form__body", (_manageMemberComponen2 = manageMemberComponentConfig.bodyProps) === null || _manageMemberComponen2 === void 0 ? void 0 : _manageMemberComponen2.className])
-    }), isCreationStatusPollingEnabled && /*#__PURE__*/React.createElement(Callout, {
-      className: "w-full",
-      icon: Info,
-      style: "info"
-    }, t("neetoTeamMembers.helpers.memberCreationStatus", {
-      count: emails.length,
-      totalCount: progress === null || progress === void 0 ? void 0 : progress.totalCount,
-      completedCount: progress === null || progress === void 0 ? void 0 : progress.completedCount
-    })), renderFormPage(currentPage, emails, role)), /*#__PURE__*/React.createElement(Component.Footer, _extends({}, manageMemberComponentConfig.footerProps, {
-      className: classnames(["ntm-members-form__footer", (_manageMemberComponen3 = manageMemberComponentConfig.footerProps) === null || _manageMemberComponen3 === void 0 ? void 0 : _manageMemberComponen3.className])
-    }), /*#__PURE__*/React.createElement(Button, {
-      loading: isSubmitting || isCreationStatusPollingEnabled,
-      style: "primary",
-      type: "submit",
-      "data-cy": isLastPage ? "ntm-manage-member-submit-button" : "ntm-manage-member-continue-button",
-      disabled: !dirty || isSubmitting || isCreationStatusPollingEnabled,
-      label: isLastPage ? t("neetoTeamMembers.buttons.saveChanges") : t("neetoTeamMembers.buttons.continue")
-    }), /*#__PURE__*/React.createElement(Button, {
-      "data-cy": "ntm-manage-member-cancel-button",
-      label: t("neetoTeamMembers.buttons.cancel"),
-      style: "text",
-      onClick: function onClick() {
-        return handleClose(false);
+    children: [/*#__PURE__*/jsxs(Component.Header, _objectSpread$1(_objectSpread$1({}, manageMemberComponentConfig.headerProps), {}, {
+      className: classnames([{
+        "ntm-manage-members__header": currentPage !== FORM_PAGES.MAIN
+      }, (_manageMemberComponen = manageMemberComponentConfig.headerProps) === null || _manageMemberComponen === void 0 ? void 0 : _manageMemberComponen.className]),
+      children: [currentPage !== FORM_PAGES.MAIN && /*#__PURE__*/jsx(Button, {
+        "aria-label": "Back",
+        icon: LeftArrow,
+        size: "medium",
+        style: "text",
+        tooltipProps: {
+          content: t("neetoTeamMembers.buttons.back"),
+          position: "bottom"
+        },
+        onClick: handleBackButton
+      }), /*#__PURE__*/jsx(Typography, {
+        className: "ntm-members-form__header",
+        "data-cy": "ntm-manage-members-pane-header",
+        style: "h2",
+        weight: "semibold",
+        children: getTitle()
+      })]
+    })), /*#__PURE__*/jsx(Form, {
+      ref: formReference,
+      formikProps: {
+        enableReinitialize: true,
+        initialValues: renderInitialValues({
+          additionalFieldsInitialValues: (_config$additionalFie2 = config.additionalFields) === null || _config$additionalFie2 === void 0 ? void 0 : _config$additionalFie2.initialValues,
+          globalRoles: globalRoles,
+          roles: filteredRoles,
+          selectedMember: selectedMember
+        }),
+        onSubmit: handleOnSubmit,
+        validationSchema: buildValidationSchema(_objectSpread$1({
+          selectedMember: selectedMember
+        }, team))
+      },
+      children: function children(_ref5) {
+        var _manageMemberComponen2, _manageMemberComponen3;
+        var values = _ref5.values,
+          dirty = _ref5.dirty;
+        var emails = values.emails,
+          role = values.role;
+        formikValues.current = values;
+        return /*#__PURE__*/jsxs(Fragment, {
+          children: [/*#__PURE__*/jsx(ScrollToErrorField, {
+            formRef: formReference
+          }), /*#__PURE__*/jsxs(Component.Body, _objectSpread$1(_objectSpread$1({}, manageMemberComponentConfig.bodyProps), {}, {
+            className: classnames(["ntm-members-form__body", (_manageMemberComponen2 = manageMemberComponentConfig.bodyProps) === null || _manageMemberComponen2 === void 0 ? void 0 : _manageMemberComponen2.className]),
+            children: [isCreationStatusPollingEnabled && /*#__PURE__*/jsx(Callout, {
+              className: "w-full",
+              icon: Info,
+              style: "info",
+              children: t("neetoTeamMembers.helpers.memberCreationStatus", {
+                count: emails.length,
+                totalCount: progress === null || progress === void 0 ? void 0 : progress.totalCount,
+                completedCount: progress === null || progress === void 0 ? void 0 : progress.completedCount
+              })
+            }), renderFormPage(currentPage, emails, role)]
+          })), /*#__PURE__*/jsxs(Component.Footer, _objectSpread$1(_objectSpread$1({}, manageMemberComponentConfig.footerProps), {}, {
+            className: classnames(["ntm-members-form__footer", (_manageMemberComponen3 = manageMemberComponentConfig.footerProps) === null || _manageMemberComponen3 === void 0 ? void 0 : _manageMemberComponen3.className]),
+            children: [/*#__PURE__*/jsx(Button, {
+              loading: isSubmitting || isCreationStatusPollingEnabled,
+              style: "primary",
+              type: "submit",
+              "data-cy": isLastPage ? "ntm-manage-member-submit-button" : "ntm-manage-member-continue-button",
+              disabled: !dirty || isSubmitting || isCreationStatusPollingEnabled,
+              label: isLastPage ? t("neetoTeamMembers.buttons.saveChanges") : t("neetoTeamMembers.buttons.continue")
+            }), /*#__PURE__*/jsx(Button, {
+              "data-cy": "ntm-manage-member-cancel-button",
+              label: t("neetoTeamMembers.buttons.cancel"),
+              style: "text",
+              onClick: function onClick() {
+                return handleClose(false);
+              }
+            })]
+          }))]
+        });
       }
-    })));
-  }));
+    })]
+  });
 };
 
 var Menu = function Menu(_ref) {
@@ -7700,22 +7896,22 @@ var Menu = function Menu(_ref) {
   var _useTranslation = useTranslation(),
     t = _useTranslation.t;
   var memberFilterKeys = keys(MEMBER_FILTER);
-  return /*#__PURE__*/React.createElement(MenuBar, {
+  return /*#__PURE__*/jsx(MenuBar, {
     "data-cy": "ntm-members-menubar-heading",
     showMenu: isMenuOpen,
-    title: taxonomies.member.plural
-  }, memberFilterKeys.map(function (filter) {
-    return /*#__PURE__*/React.createElement(MenuBar.Block, {
-      count: getPerCategoryCount(filterCounts, filter),
-      "data-cy": "ntm-members-menubar-".concat(slugify(filter), "-block"),
-      key: filter,
-      label: t(MEMBER_FILTER[filter].label),
-      active: memberFilterKeys.includes(memberFilter) && identical(filter, memberFilter),
-      onClick: function onClick() {
-        return handleMemberFilterChange(filter);
-      }
-    });
-  }));
+    title: taxonomies.member.plural,
+    children: memberFilterKeys.map(function (filter) {
+      return /*#__PURE__*/jsx(MenuBar.Block, {
+        count: getPerCategoryCount(filterCounts, filter),
+        "data-cy": "ntm-members-menubar-".concat(slugify(filter), "-block"),
+        label: t(MEMBER_FILTER[filter].label),
+        active: memberFilterKeys.includes(memberFilter) && identical(filter, memberFilter),
+        onClick: function onClick() {
+          return handleMemberFilterChange(filter);
+        }
+      }, filter);
+    })
+  });
 };
 
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
@@ -7843,91 +8039,98 @@ var TeamMembers = function TeamMembers(_ref) {
     noDataTitle = _generateNoDataConten.noDataTitle,
     noDataButtonProps = _generateNoDataConten.noDataButtonProps;
   if (isRolesLoading || isMembersLoading) {
-    return /*#__PURE__*/React.createElement("div", {
-      className: "ntm-members-page-loader"
-    }, /*#__PURE__*/React.createElement(PageLoader, null));
+    return /*#__PURE__*/jsx("div", {
+      className: "ntm-members-page-loader",
+      children: /*#__PURE__*/jsx(PageLoader, {})
+    });
   }
-  return /*#__PURE__*/React.createElement("div", {
-    className: "ntm-members"
-  }, /*#__PURE__*/React.createElement("div", {
-    className: "ntm-members-wrapper"
-  }, /*#__PURE__*/React.createElement(Menu, {
-    handleMemberFilterChange: handleMemberFilterChange,
-    filterCounts: team === null || team === void 0 ? void 0 : team.perCategoryCount,
-    isMenuOpen: isOpen.menuBar,
-    memberFilter: filters.category
-  }), /*#__PURE__*/React.createElement(Container, null, /*#__PURE__*/React.createElement(Header$1, {
-    config: config,
-    setIsOpen: setIsOpen,
-    filterCategory: filters.category,
-    searchProps: hasMembers ? searchProps : null
-  }), /*#__PURE__*/React.createElement(SubHeaderMolecule, {
-    leftActionBlock: /*#__PURE__*/React.createElement(SubHeader.Left, {
-      config: config,
-      selectedRows: selectedRows,
-      setSelectedRows: setSelectedRows,
-      filteredCount: team === null || team === void 0 ? void 0 : team.membersCount,
-      roles: filteredRoles
-    }),
-    rightActionBlock: hasMembers && /*#__PURE__*/React.createElement(SubHeader.Right, {
-      columns: columns,
-      filterColumns: filterColumns,
-      handleNeetoFilterChange: handleNeetoFilterChange,
-      isFiltersPaneOpen: isFiltersPaneOpen,
-      searchKeywordProps: searchKeywordProps,
-      setIsFiltersPaneOpen: setIsFiltersPaneOpen
+  return /*#__PURE__*/jsx("div", {
+    className: "ntm-members",
+    children: /*#__PURE__*/jsxs("div", {
+      className: "ntm-members-wrapper",
+      children: [/*#__PURE__*/jsx(Menu, {
+        handleMemberFilterChange: handleMemberFilterChange,
+        filterCounts: team === null || team === void 0 ? void 0 : team.perCategoryCount,
+        isMenuOpen: isOpen.menuBar,
+        memberFilter: filters.category
+      }), /*#__PURE__*/jsxs(Container, {
+        children: [/*#__PURE__*/jsx(Header$1, {
+          config: config,
+          setIsOpen: setIsOpen,
+          filterCategory: filters.category,
+          searchProps: hasMembers ? searchProps : null
+        }), /*#__PURE__*/jsx(SubHeaderMolecule, {
+          leftActionBlock: /*#__PURE__*/jsx(SubHeader.Left, {
+            config: config,
+            selectedRows: selectedRows,
+            setSelectedRows: setSelectedRows,
+            filteredCount: team === null || team === void 0 ? void 0 : team.membersCount,
+            roles: filteredRoles
+          }),
+          rightActionBlock: hasMembers && /*#__PURE__*/jsx(SubHeader.Right, {
+            columns: columns,
+            filterColumns: filterColumns,
+            handleNeetoFilterChange: handleNeetoFilterChange,
+            isFiltersPaneOpen: isFiltersPaneOpen,
+            searchKeywordProps: searchKeywordProps,
+            setIsFiltersPaneOpen: setIsFiltersPaneOpen
+          })
+        }), /*#__PURE__*/jsx(Bar, {
+          columns: filterColumns,
+          keyword: searchKeywordProps,
+          setIsPaneOpen: setIsFiltersPaneOpen,
+          onChange: handleNeetoFilterChange
+        }), /*#__PURE__*/jsx(TableWrapper, {
+          hasPagination: (team === null || team === void 0 ? void 0 : team.membersCount) > filters.pageSize,
+          children: (team === null || team === void 0 ? void 0 : team.membersCount) !== 0 ? /*#__PURE__*/jsx(Table$1, {
+            fixedHeight: true,
+            allowRowClick: false,
+            columnData: getVisibleColumnData(columns),
+            currentPageNumber: parseInt(filters.page, DEFAULT_RADIX),
+            "data-cy": "ntm-members-table",
+            loading: isMembersFetching,
+            paginationProps: renderPaginationProps(filters.pageSize),
+            rowData: team === null || team === void 0 ? void 0 : team.members,
+            rowSelection: {
+              columnWidth: "2%"
+            },
+            selectedRowKeys: selectedRows.keys,
+            totalCount: team === null || team === void 0 ? void 0 : team.membersCount,
+            handlePageChange: handlePageChange(setFilters, filters.category, history),
+            onChange: handleTableChange,
+            onColumnHide: function onColumnHide(_ref2) {
+              var dataIndex = _ref2.dataIndex;
+              return hideColumn(dataIndex);
+            },
+            onRowSelect: handleRowSelect
+          }) : /*#__PURE__*/jsx("div", {
+            className: "flex h-full w-full items-center justify-center",
+            children: /*#__PURE__*/jsx(NoData, {
+              primaryButtonProps: noDataButtonProps,
+              title: noDataTitle
+            })
+          })
+        })]
+      }), /*#__PURE__*/jsx(ManageMember, {
+        config: config,
+        selectedMember: selectedMember,
+        componentConfig: {
+          isOpen: isOpen.manageMember
+        },
+        roles: filteredRoles,
+        onComplete: handlePaneClose
+      }), /*#__PURE__*/jsx(Alert, {
+        cancelButtonLabel: t("neetoTeamMembers.buttons.cancel"),
+        isOpen: isOpen.alert,
+        isSubmitting: isUpdatingMember,
+        message: renderUpdateAlert("message", updateMemberAlertProps),
+        title: renderUpdateAlert("title", updateMemberAlertProps),
+        submitButtonLabel: selectedMember !== null && selectedMember !== void 0 && selectedMember.active ? t("neetoTeamMembers.buttons.deactivate") : t("neetoTeamMembers.buttons.activate"),
+        onClose: handleAlertClose,
+        onSubmit: handleUpdateMember
+      })]
     })
-  }), /*#__PURE__*/React.createElement(Bar, {
-    columns: filterColumns,
-    keyword: searchKeywordProps,
-    setIsPaneOpen: setIsFiltersPaneOpen,
-    onChange: handleNeetoFilterChange
-  }), /*#__PURE__*/React.createElement(TableWrapper, {
-    hasPagination: (team === null || team === void 0 ? void 0 : team.membersCount) > filters.pageSize
-  }, (team === null || team === void 0 ? void 0 : team.membersCount) !== 0 ? /*#__PURE__*/React.createElement(Table$1, {
-    fixedHeight: true,
-    allowRowClick: false,
-    columnData: getVisibleColumnData(columns),
-    currentPageNumber: parseInt(filters.page, DEFAULT_RADIX),
-    "data-cy": "ntm-members-table",
-    loading: isMembersFetching,
-    paginationProps: renderPaginationProps(filters.pageSize),
-    rowData: team === null || team === void 0 ? void 0 : team.members,
-    rowSelection: {
-      columnWidth: "2%"
-    },
-    selectedRowKeys: selectedRows.keys,
-    totalCount: team === null || team === void 0 ? void 0 : team.membersCount,
-    handlePageChange: handlePageChange(setFilters, filters.category, history),
-    onChange: handleTableChange,
-    onColumnHide: function onColumnHide(_ref2) {
-      var dataIndex = _ref2.dataIndex;
-      return hideColumn(dataIndex);
-    },
-    onRowSelect: handleRowSelect
-  }) : /*#__PURE__*/React.createElement("div", {
-    className: "flex h-full w-full items-center justify-center"
-  }, /*#__PURE__*/React.createElement(NoData, {
-    primaryButtonProps: noDataButtonProps,
-    title: noDataTitle
-  })))), /*#__PURE__*/React.createElement(ManageMember, {
-    config: config,
-    selectedMember: selectedMember,
-    componentConfig: {
-      isOpen: isOpen.manageMember
-    },
-    roles: filteredRoles,
-    onComplete: handlePaneClose
-  }), /*#__PURE__*/React.createElement(Alert, {
-    cancelButtonLabel: t("neetoTeamMembers.buttons.cancel"),
-    isOpen: isOpen.alert,
-    isSubmitting: isUpdatingMember,
-    message: renderUpdateAlert("message", updateMemberAlertProps),
-    title: renderUpdateAlert("title", updateMemberAlertProps),
-    submitButtonLabel: selectedMember !== null && selectedMember !== void 0 && selectedMember.active ? t("neetoTeamMembers.buttons.deactivate") : t("neetoTeamMembers.buttons.activate"),
-    onClose: handleAlertClose,
-    onSubmit: handleUpdateMember
-  })));
+  });
 };
 var index = withTitle(withReactQuery(TeamMembers), taxonomies.member.plural);