@bigbinary/neeto-team-members-frontend 5.0.32 → 5.0.33

package/dist/{index-DCtowiCJ.js → index-CsL8uUVb.js}

@@ -20,10 +20,11 @@ var _objectWithoutProperties = require('@babel/runtime/helpers/objectWithoutProp
 var formik = require('formik');
 var jsxRuntime = require('react/jsx-runtime');
 var index = require('./index-BkEJugj1.js');
-var useCountries = require('./useCountries-CQdvJz0R.js');
+var timezoneSelector = require('./timezone-selector-C8J9ifSA.js');
 var useTeamsApi = require('./useTeamsApi-Ch5sHR2_.js');
 var neetoCist = require('@bigbinary/neeto-cist');
-var v2_RolesRadioGroup = require('./RolesRadioGroup-fBmS68cW.js');
+var v2_RolesRadioGroup = require('./RolesRadioGroup-bXyHmk_Q.js');
+var Card = require('@bigbinary/neeto-atoms/primitives/Card');
 var constants = require('@bigbinary/neeto-commons-frontend/constants');
 var reactUtils = require('@bigbinary/neeto-commons-frontend/react-utils');
 var reactQuery = require('@tanstack/react-query');
@@ -48,9 +49,9 @@ var axios__default = /*#__PURE__*/_interopDefault(axios);
 var i18next__default = /*#__PURE__*/_interopDefault(i18next);
 var MoreDropdown__default = /*#__PURE__*/_interopDefault(MoreDropdown);
 
-var _excluded = ["name", "label", "className", "checked", "disabled", "onChange"];
-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), true).forEach(function (r) { _defineProperty__default.default(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 _excluded$1 = ["name", "label", "className", "checked", "disabled", "onChange"];
+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), true).forEach(function (r) { _defineProperty__default.default(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 FormikSwitch = function FormikSwitch(_ref) {
   var name = _ref.name,
     label = _ref.label,
@@ -58,7 +59,7 @@ var FormikSwitch = function FormikSwitch(_ref) {
     checkedProp = _ref.checked,
     disabled = _ref.disabled,
     onChangeProp = _ref.onChange,
-    rest = _objectWithoutProperties__default.default(_ref, _excluded);
+    rest = _objectWithoutProperties__default.default(_ref, _excluded$1);
   var _useField = formik.useField(name),
     _useField2 = _slicedToArray__default.default(_useField, 3),
     field = _useField2[0],
@@ -66,7 +67,7 @@ var FormikSwitch = function FormikSwitch(_ref) {
   var isChecked = checkedProp !== undefined ? checkedProp : field.value;
   return /*#__PURE__*/jsxRuntime.jsxs("div", {
     className: neetoAtoms.cn("flex items-center gap-2", className),
-    children: [/*#__PURE__*/jsxRuntime.jsx(neetoAtoms.Switch, _objectSpread$3({
+    children: [/*#__PURE__*/jsxRuntime.jsx(neetoAtoms.Switch, _objectSpread$4({
       disabled: disabled,
       checked: isChecked,
       id: name,
@@ -108,8 +109,8 @@ var DEFAULT_SELECTED_ROWS = {
   displayNames: []
 };
 
-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), true).forEach(function (r) { _defineProperty__default.default(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; }
+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), true).forEach(function (r) { _defineProperty__default.default(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 renderNameColumn = function renderNameColumn(_ref) {
   var config = _ref.config,
     handleUpdateRole = _ref.handleUpdateRole,
@@ -194,7 +195,7 @@ var getDefaultAlertMessage = function getDefaultAlertMessage(_ref4) {
   var member = _ref4.member;
   return /*#__PURE__*/jsxRuntime.jsx(reactI18next.Trans, {
     i18nKey: "neetoTeamMembers.alerts.messages.removeMember",
-    values: _objectSpread$2(_objectSpread$2({}, constants.SINGULAR), {}, {
+    values: _objectSpread$3(_objectSpread$3({}, constants.SINGULAR), {}, {
       person: member === null || member === void 0 ? void 0 : member.displayName
     })
   });
@@ -443,6 +444,7 @@ var AppList = function AppList(_ref) {
           components: {
             button: /*#__PURE__*/jsxRuntime.jsx(neetoAtoms.Button, {
               asChild: true,
+              className: "text-primary underline underline-offset-4",
               variant: "link",
               children: /*#__PURE__*/jsxRuntime.jsx("a", {
                 href: v2_RolesRadioGroup.NEETO_AUTH_MANAGE_PRODUCT_URL,
@@ -485,11 +487,7 @@ var AppList = function AppList(_ref) {
               children: /*#__PURE__*/jsxRuntime.jsx(Select.FormikSelect, {
                 isDisabled: isCurrentApp || !isEnabled,
                 name: "appRoles[".concat(index, "].activeRole"),
-                options: buildRoleOptions(globalRoles[appName]),
-                onChange: function onChange(_ref4) {
-                  var value = _ref4.value;
-                  setFieldValue("appRoles[".concat(index, "].activeRole"), value);
-                }
+                options: buildRoleOptions(globalRoles[appName])
               })
             })
           })]
@@ -512,70 +510,156 @@ var Confirmation = function Confirmation() {
   var activeAppRoles = neetoCist.filterBy({
     isEnabled: true
   }, appRoles);
-  return activeAppRoles.length > 1 ? /*#__PURE__*/jsxRuntime.jsxs("div", {
-    className: "flex flex-col gap-6",
-    children: [/*#__PURE__*/jsxRuntime.jsx("div", {
-      className: "w-full",
-      children: /*#__PURE__*/jsxRuntime.jsx(neetoAtoms.Typography, {
-        className: "text-sm leading-relaxed",
-        children: /*#__PURE__*/jsxRuntime.jsx(reactI18next.Trans, {
-          i18nKey: "neetoTeamMembers.helpers.multipleProductInvitation",
-          values: {
-            count: selectedEmail.length,
-            emails: selectedEmail,
-            orgName: (_globalProps$organiza = initializers.globalProps.organization) === null || _globalProps$organiza === void 0 ? void 0 : _globalProps$organiza.name
-          }
-        })
+  var isMultipleProduct = activeAppRoles.length > 1;
+  return /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
+    children: [/*#__PURE__*/jsxRuntime.jsx(Card.Card, {
+      className: "w-full shrink-0 bg-muted/40 ring-0",
+      size: "sm",
+      children: /*#__PURE__*/jsxRuntime.jsxs(Card.CardContent, {
+        className: "flex items-start gap-3",
+        children: [/*#__PURE__*/jsxRuntime.jsx("div", {
+          className: "bg-primary/10 mt-0.5 flex size-9 shrink-0 items-center justify-center rounded-full",
+          children: /*#__PURE__*/jsxRuntime.jsx(lucideReact.Mail, {
+            className: "size-4 text-primary"
+          })
+        }), /*#__PURE__*/jsxRuntime.jsx(neetoAtoms.Typography, {
+          className: "min-w-0 flex-1 leading-relaxed",
+          variant: "body3",
+          children: isMultipleProduct ? /*#__PURE__*/jsxRuntime.jsx(reactI18next.Trans, {
+            i18nKey: "neetoTeamMembers.helpers.multipleProductInvitation",
+            values: {
+              count: selectedEmail.length,
+              emails: selectedEmail,
+              orgName: (_globalProps$organiza = initializers.globalProps.organization) === null || _globalProps$organiza === void 0 ? void 0 : _globalProps$organiza.name
+            }
+          }) : /*#__PURE__*/jsxRuntime.jsx(reactI18next.Trans, {
+            i18nKey: "neetoTeamMembers.helpers.singleProductInvitation",
+            values: v2_RolesRadioGroup.getSingleInvitationTranslationProps({
+              activeAppRoles: activeAppRoles,
+              role: role,
+              selectedEmail: selectedEmail
+            })
+          })
+        })]
       })
-    }), /*#__PURE__*/jsxRuntime.jsxs("table", {
-      className: "w-full border-collapse",
-      children: [/*#__PURE__*/jsxRuntime.jsx("thead", {
-        children: /*#__PURE__*/jsxRuntime.jsxs("tr", {
-          children: [/*#__PURE__*/jsxRuntime.jsx("th", {
-            className: "border border-border p-2 text-start text-xs font-bold uppercase text-muted-foreground",
-            children: t("neetoTeamMembers.common.productName")
-          }), /*#__PURE__*/jsxRuntime.jsx("th", {
-            className: "border border-border p-2 text-start text-xs font-bold uppercase text-muted-foreground",
-            children: t("neetoTeamMembers.common.role", constants.SINGULAR)
+    }), isMultipleProduct && /*#__PURE__*/jsxRuntime.jsx(Card.Card, {
+      className: "w-full shrink-0 ring-0",
+      size: "sm",
+      children: /*#__PURE__*/jsxRuntime.jsx(Card.CardContent, {
+        className: "overflow-hidden rounded-md border border-border p-0",
+        children: /*#__PURE__*/jsxRuntime.jsxs("table", {
+          className: "w-full border-collapse",
+          children: [/*#__PURE__*/jsxRuntime.jsx("thead", {
+            className: "bg-muted/40",
+            children: /*#__PURE__*/jsxRuntime.jsxs("tr", {
+              children: [/*#__PURE__*/jsxRuntime.jsx("th", {
+                className: "px-3 py-2 text-start text-xs font-medium uppercase tracking-wide text-muted-foreground",
+                children: t("neetoTeamMembers.common.productName")
+              }), /*#__PURE__*/jsxRuntime.jsx("th", {
+                className: "px-3 py-2 text-start text-xs font-medium uppercase tracking-wide text-muted-foreground",
+                children: t("neetoTeamMembers.common.role", constants.SINGULAR)
+              })]
+            })
+          }), /*#__PURE__*/jsxRuntime.jsx("tbody", {
+            className: "divide-y divide-border",
+            children: activeAppRoles.map(function (_ref) {
+              var appName = _ref.appName,
+                activeRole = _ref.activeRole;
+              return /*#__PURE__*/jsxRuntime.jsxs("tr", {
+                children: [/*#__PURE__*/jsxRuntime.jsx("td", {
+                  className: "px-3 py-2",
+                  children: /*#__PURE__*/jsxRuntime.jsx(neetoAtoms.Typography, {
+                    variant: "body3",
+                    children: t("neetoTeamMembers.labels.neeto_", {
+                      product: appName
+                    })
+                  })
+                }), /*#__PURE__*/jsxRuntime.jsx("td", {
+                  className: "px-3 py-2",
+                  children: /*#__PURE__*/jsxRuntime.jsx(neetoAtoms.Typography, {
+                    variant: "body3",
+                    children: activeRole
+                  })
+                })]
+              }, appName);
+            })
           })]
         })
-      }), /*#__PURE__*/jsxRuntime.jsx("tbody", {
-        children: activeAppRoles.map(function (_ref) {
-          var appName = _ref.appName,
-            activeRole = _ref.activeRole;
-          return /*#__PURE__*/jsxRuntime.jsxs("tr", {
-            children: [/*#__PURE__*/jsxRuntime.jsx("td", {
-              className: "border border-border p-2",
-              children: /*#__PURE__*/jsxRuntime.jsx(neetoAtoms.Typography, {
-                className: "text-sm leading-relaxed",
-                children: t("neetoTeamMembers.labels.neeto_", {
-                  product: appName
-                })
-              })
-            }), /*#__PURE__*/jsxRuntime.jsx("td", {
-              className: "border border-border p-2",
-              children: /*#__PURE__*/jsxRuntime.jsx(neetoAtoms.Typography, {
-                className: "text-sm leading-relaxed",
-                children: activeRole
-              })
-            })]
-          }, appName);
-        })
-      })]
-    })]
-  }) : /*#__PURE__*/jsxRuntime.jsx(neetoAtoms.Typography, {
-    className: "text-sm leading-relaxed",
-    children: /*#__PURE__*/jsxRuntime.jsx(reactI18next.Trans, {
-      i18nKey: "neetoTeamMembers.helpers.singleProductInvitation",
-      values: v2_RolesRadioGroup.getSingleInvitationTranslationProps({
-        activeAppRoles: activeAppRoles,
-        role: role,
-        selectedEmail: selectedEmail
       })
-    })
+    })]
   });
 };
 
+var _excluded = ["value", "className", "size", "variant", "children"];
+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), true).forEach(function (r) { _defineProperty__default.default(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; }
+var CopyToClipboardButton = function CopyToClipboardButton(_ref) {
+  var value = _ref.value,
+    className = _ref.className,
+    _ref$size = _ref.size,
+    size = _ref$size === void 0 ? "sm" : _ref$size,
+    _ref$variant = _ref.variant,
+    variant = _ref$variant === void 0 ? "outline" : _ref$variant,
+    children = _ref.children,
+    rest = _objectWithoutProperties__default.default(_ref, _excluded);
+  var _useState = React.useState(false),
+    _useState2 = _slicedToArray__default.default(_useState, 2),
+    copied = _useState2[0],
+    setCopied = _useState2[1];
+  var handleCopy = /*#__PURE__*/function () {
+    var _ref2 = _asyncToGenerator__default.default(/*#__PURE__*/_regeneratorRuntime__default.default.mark(function _callee() {
+      var textArea;
+      return _regeneratorRuntime__default.default.wrap(function _callee$(_context) {
+        while (1) switch (_context.prev = _context.next) {
+          case 0:
+            _context.prev = 0;
+            _context.next = 3;
+            return navigator.clipboard.writeText(value);
+          case 3:
+            setCopied(true);
+            setTimeout(function () {
+              return setCopied(false);
+            }, 2000);
+            _context.next = 17;
+            break;
+          case 7:
+            _context.prev = 7;
+            _context.t0 = _context["catch"](0);
+            // Fallback for older browsers
+            textArea = document.createElement("textarea");
+            textArea.value = value;
+            document.body.appendChild(textArea);
+            textArea.select();
+            document.execCommand("copy");
+            document.body.removeChild(textArea);
+            setCopied(true);
+            setTimeout(function () {
+              return setCopied(false);
+            }, 2000);
+          case 17:
+          case "end":
+            return _context.stop();
+        }
+      }, _callee, null, [[0, 7]]);
+    }));
+    return function handleCopy() {
+      return _ref2.apply(this, arguments);
+    };
+  }();
+  return /*#__PURE__*/jsxRuntime.jsxs(neetoAtoms.Button, _objectSpread$2(_objectSpread$2({
+    size: size,
+    variant: variant,
+    className: neetoAtoms.cn("gap-1", className),
+    onClick: handleCopy
+  }, rest), {}, {
+    children: [copied ? /*#__PURE__*/jsxRuntime.jsx(lucideReact.Check, {
+      className: "size-3.5"
+    }) : /*#__PURE__*/jsxRuntime.jsx(lucideReact.Copy, {
+      className: "size-3.5"
+    }), children]
+  }));
+};
+
 // eslint-disable-next-line @bigbinary/neeto/no-axios-import-outside-apis
 var fetch = function fetch() {
   return axios__default.default.get("".concat(constants$1.BASE_URL, "/api/v1/invite_links"));
@@ -671,7 +755,7 @@ var InviteLink = function InviteLink(_ref) {
     children: [/*#__PURE__*/jsxRuntime.jsxs("div", {
       className: "flex items-center gap-2 pt-1",
       children: [/*#__PURE__*/jsxRuntime.jsxs("div", {
-        className: "relative flex min-w-0 grow items-center truncate neeto-ui-rounded-md border border-border bg-muted/50 leading-none",
+        className: "relative flex min-w-0 grow items-center truncate rounded-md border border-border bg-muted/50 leading-none",
         children: [/*#__PURE__*/jsxRuntime.jsx("div", {
           className: "relative min-w-0 grow truncate p-2 leading-none",
           children: !isInviteLinkEmpty && v2_RolesRadioGroup.getInviteURL(inviteLinks === null || inviteLinks === void 0 || (_inviteLinks$ = inviteLinks[0]) === null || _inviteLinks$ === void 0 ? void 0 : _inviteLinks$.token)
@@ -679,7 +763,7 @@ var InviteLink = function InviteLink(_ref) {
           className: "rounded-s-none",
           onClick: handleRegenerate,
           children: t("neetoTeamMembers.buttons.generateLink")
-        }) : /*#__PURE__*/jsxRuntime.jsx(useCountries.CopyToClipboardButton, {
+        }) : /*#__PURE__*/jsxRuntime.jsx(CopyToClipboardButton, {
           className: "rounded-s-none",
           value: v2_RolesRadioGroup.getInviteURL(inviteLinks === null || inviteLinks === void 0 || (_inviteLinks$2 = inviteLinks[0]) === null || _inviteLinks$2 === void 0 ? void 0 : _inviteLinks$2.token),
           children: t("neetoTeamMembers.buttons.copyLink")
@@ -765,6 +849,7 @@ var MultipleEmailInput = function MultipleEmailInput(_ref) {
             children: " *"
           })]
         }), isInviteLinkFeatureEnabled && /*#__PURE__*/jsxRuntime.jsx(neetoAtoms.Button, {
+          className: "text-primary underline underline-offset-4",
           variant: "link",
           onClick: function onClick() {
             return setCurrentPage(v2_RolesRadioGroup.FORM_PAGES.INVITE_LINK);
@@ -814,28 +899,24 @@ var ProfileSettings = function ProfileSettings(_ref) {
   React.useEffect(function () {
     setFieldValueRef.current = setFieldValue;
   }, [setFieldValue]);
-  var _useCountries = useCountries.useCountries(),
+  var _useCountries = timezoneSelector.useCountries(),
     countryDropdownOptions = _useCountries.countryDropdownOptions,
     isFetchingCountriesList = _useCountries.isFetchingCountriesList,
     handleCountryChange = _useCountries.handleCountryChange;
-  var timezoneContainerRef = React.useRef(null);
-  React.useEffect(function () {
-    var node = timezoneContainerRef.current;
-    if (!node) return undefined;
-    new neetoTimeZones.NeetoTimezoneSelector(node, {
-      isTimeFormat24H: member.timeFormat === "24h",
-      className: "w-full z-10",
-      position: "bottom",
-      initialValue: member.timeZone,
-      onChange: function onChange(_ref2) {
-        var main = _ref2.main;
-        return setFieldValueRef.current("timeZone", main);
-      },
-      disabled: isTimezoneFieldDisabled
-    });
-    return function () {
-      node.innerHTML = "";
-    };
+  var timezoneContainerRef = React.useCallback(function (node) {
+    if (ramda.isNotNil(node)) {
+      new neetoTimeZones.NeetoTimezoneSelector(node, {
+        isTimeFormat24H: member.timeFormat === "24h",
+        className: "w-full z-10",
+        position: "bottom",
+        initialValue: member.timeZone,
+        onChange: function onChange(_ref2) {
+          var main = _ref2.main;
+          return setFieldValueRef.current("timeZone", main);
+        },
+        disabled: isTimezoneFieldDisabled
+      });
+    }
   }, [member.timeZone, member.timeFormat, isTimezoneFieldDisabled]);
   React.useEffect(function () {
     var country = neetoCist.findBy({
@@ -844,7 +925,7 @@ var ProfileSettings = function ProfileSettings(_ref) {
     if (country) handleCountryChange(country);
   }, [member.countryIdentifier, countryDropdownOptions, handleCountryChange]);
   return /*#__PURE__*/jsxRuntime.jsxs("div", {
-    className: "w-full space-y-4",
+    className: "w-full space-y-6",
     "data-cy": "ntm-profile-settings",
     children: [/*#__PURE__*/jsxRuntime.jsx(Select.FormikSelect, {
       "data-cy": "ntm-edit-member-country-select",
@@ -1198,7 +1279,7 @@ var ManageMember = function ManageMember(_ref) {
     switch (page) {
       case v2_RolesRadioGroup.FORM_PAGES.MAIN:
         return /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
-          children: [selectedMember && /*#__PURE__*/jsxRuntime.jsx(useCountries.ProfileImage, {}), selectedMember && /*#__PURE__*/jsxRuntime.jsx(NameInputs, {
+          children: [selectedMember && /*#__PURE__*/jsxRuntime.jsx(timezoneSelector.ProfileImage, {}), selectedMember && /*#__PURE__*/jsxRuntime.jsx(NameInputs, {
             innerRef: inputReference
           }), /*#__PURE__*/jsxRuntime.jsx(MultipleEmailInput, {
             emails: emails,
@@ -1230,22 +1311,20 @@ var ManageMember = function ManageMember(_ref) {
   };
   var isSheet = manageMemberComponentConfig.type !== "modal";
   return /*#__PURE__*/jsxRuntime.jsxs(Component, {
-    className: manageMemberComponentConfig.className,
     "data-testid": "ntm-manage-members-pane-wrapper",
     isOpen: manageMemberComponentConfig.isOpen,
+    className: classnames__default.default("ntm-timezone-shadcn-overrides", manageMemberComponentConfig.className),
     onClose: function onClose() {
       return handleClose(false);
     },
     children: [/*#__PURE__*/jsxRuntime.jsxs(Component.Header, _objectSpread(_objectSpread({}, isSheet ? manageMemberComponentConfig.headerProps : {}), {}, {
-      className: neetoAtoms.cn(isSheet && currentPage !== v2_RolesRadioGroup.FORM_PAGES.MAIN && "flex flex-row items-start gap-2", isSheet && ((_manageMemberComponen = manageMemberComponentConfig.headerProps) === null || _manageMemberComponen === void 0 ? void 0 : _manageMemberComponen.className)),
+      className: neetoAtoms.cn(isSheet && currentPage !== v2_RolesRadioGroup.FORM_PAGES.MAIN && "flex flex-row items-center gap-2", isSheet && ((_manageMemberComponen = manageMemberComponentConfig.headerProps) === null || _manageMemberComponen === void 0 ? void 0 : _manageMemberComponen.className)),
       children: [isSheet && currentPage !== v2_RolesRadioGroup.FORM_PAGES.MAIN && /*#__PURE__*/jsxRuntime.jsx(neetoAtoms.Button, {
-        "aria-label": "Back",
+        "aria-label": t("neetoTeamMembers.buttons.back"),
+        icon: lucideReact.ArrowLeft,
         size: "icon-sm",
         variant: "ghost",
-        onClick: handleBackButton,
-        children: /*#__PURE__*/jsxRuntime.jsx(lucideReact.ArrowLeft, {
-          className: "size-4"
-        })
+        onClick: handleBackButton
       }), /*#__PURE__*/jsxRuntime.jsxs("div", {
         children: [/*#__PURE__*/jsxRuntime.jsx(Component.Title, {
           "data-testid": "ntm-manage-members-pane-header",
@@ -1285,7 +1364,7 @@ var ManageMember = function ManageMember(_ref) {
           children: [/*#__PURE__*/jsxRuntime.jsx(index.ScrollToErrorField, {
             formRef: formReference
           }), /*#__PURE__*/jsxRuntime.jsxs("div", _objectSpread(_objectSpread({}, isSheet ? manageMemberComponentConfig.bodyProps : {}), {}, {
-            className: neetoAtoms.cn(isSheet ? "w-full flex-1 space-y-4 overflow-y-auto px-4 pb-4" : "w-full space-y-4 pb-4", isSheet && ((_manageMemberComponen2 = manageMemberComponentConfig.bodyProps) === null || _manageMemberComponen2 === void 0 ? void 0 : _manageMemberComponen2.className)),
+            className: neetoAtoms.cn(isSheet ? "w-full flex-1 space-y-6 overflow-y-auto px-4 pb-4" : "w-full space-y-6 pb-4", isSheet && ((_manageMemberComponen2 = manageMemberComponentConfig.bodyProps) === null || _manageMemberComponen2 === void 0 ? void 0 : _manageMemberComponen2.className)),
             children: [isSheet && isCreationStatusPollingEnabled && /*#__PURE__*/jsxRuntime.jsxs(neetoAtoms.Alert, {
               children: [/*#__PURE__*/jsxRuntime.jsx(lucideReact.Info, {
                 className: "size-4"
@@ -1331,4 +1410,4 @@ exports.getColumnData = getColumnData;
 exports.getFilteredRoles = getFilteredRoles;
 exports.handlePageChange = handlePageChange;
 exports.renderUpdateAlert = renderUpdateAlert;
-//# sourceMappingURL=index-DCtowiCJ.js.map
+//# sourceMappingURL=index-CsL8uUVb.js.map