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

package/dist/v2/Profile.js

@@ -1,13 +1,14 @@
 import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
 import { useRef, useCallback, useEffect, memo, useState } from 'react';
-import { Spinner, Label, cn, Typography, Avatar, Button, Sheet, DropdownMenu } from '@bigbinary/neeto-atoms';
-import { Crown, EllipsisVertical } from 'lucide-react';
+import { Spinner, Sheet, Label, cn, Typography, Avatar, Button } from '@bigbinary/neeto-atoms';
+import MoreDropdown from '@bigbinary/neeto-molecules/v2/MoreDropdown';
 import { useTranslation } from 'react-i18next';
 import _defineProperty from '@babel/runtime/helpers/defineProperty';
 import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
 import _asyncToGenerator from '@babel/runtime/helpers/asyncToGenerator';
 import _regeneratorRuntime from '@babel/runtime/regenerator';
 import { Input } from '@bigbinary/neeto-atoms/formik';
+import { Card, CardContent, CardAction } from '@bigbinary/neeto-atoms/primitives/Card';
 import { NeetoTimezoneSelector, ianaTimezoneToHumanReadable } from '@bigbinary/neeto-time-zones';
 import { findBy, noop, _findBy } from '@bigbinary/neeto-cist';
 import { DEFAULT_STALE_TIME, LANGUAGE_OPTIONS } from '@bigbinary/neeto-commons-frontend/constants';
@@ -21,14 +22,17 @@ import 'formik';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { useQuery } from '@tanstack/react-query';
 import { useMutationWithInvalidation } from '@bigbinary/neeto-commons-frontend/react-utils';
-import { p as profileApi, u as useCountries, P as ProfileImage, C as CopyToClipboardButton } from '../useCountries-DePOPtue.js';
+import { p as profileApi, u as useCountries, P as ProfileImage } from '../timezone-selector-ojZT6BkF.js';
 import { t } from 'i18next';
 import { globalProps } from '@bigbinary/neeto-commons-frontend/initializers';
 import * as yup from 'yup';
 import withImmutableActions from '@bigbinary/neeto-commons-frontend/react-utils/withImmutableActions';
 import { create } from 'zustand';
 import { shallow } from 'zustand/shallow';
+import { Crown } from 'lucide-react';
+import CopyToClipboardButton from '@bigbinary/neeto-molecules/v2/CopyToClipboardButton';
 import 'axios';
+import '../inject-css-C2dztUxs.js';
 
 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; }
 function _objectSpread$1(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$1(Object(t), true).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$1(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
@@ -229,6 +233,7 @@ var ChangeProfile = function ChangeProfile(_ref) {
     });
   }
   return /*#__PURE__*/jsx(FormikForm, {
+    className: "flex flex-col h-full flex-1 overflow-y-auto",
     formProps: {
       "data-testid": "ntm-profile-form"
     },
@@ -243,12 +248,19 @@ var ChangeProfile = function ChangeProfile(_ref) {
         touched = _ref4.touched;
       setFieldValueRef.current = setFieldValue;
       return /*#__PURE__*/jsxs(Fragment, {
-        children: [/*#__PURE__*/jsx("div", {
-          className: "w-full flex-1 overflow-y-auto p-4",
-          children: /*#__PURE__*/jsxs("div", {
-            className: "w-full pb-6",
-            children: [/*#__PURE__*/jsx(ProfileImage, {}), /*#__PURE__*/jsxs("div", {
-              className: "mt-4 w-full space-y-4 border-t border-border pt-4",
+        children: [/*#__PURE__*/jsxs(Sheet.Body, {
+          className: "flex min-h-0 w-full flex-1 flex-col gap-2 overflow-y-auto p-4",
+          children: [/*#__PURE__*/jsx(Card, {
+            className: "w-full shrink-0 ring-0",
+            size: "sm",
+            children: /*#__PURE__*/jsx(CardContent, {
+              children: /*#__PURE__*/jsx(ProfileImage, {})
+            })
+          }), /*#__PURE__*/jsx(Card, {
+            className: "w-full shrink-0 ring-0",
+            size: "sm",
+            children: /*#__PURE__*/jsxs(CardContent, {
+              className: "space-y-6",
               children: [/*#__PURE__*/jsx(Input, {
                 autoFocus: true,
                 required: true,
@@ -264,51 +276,42 @@ var ChangeProfile = function ChangeProfile(_ref) {
                 name: "lastName",
                 type: "text",
                 placeholder: t("neetoTeamMembers.profile.inputs.placeholder.lastName")
-              })]
-            }), /*#__PURE__*/jsxs("div", {
-              className: "mt-4 w-full space-y-4 border-t border-border pt-4",
-              children: [/*#__PURE__*/jsx(FormikSelect, {
+              }), /*#__PURE__*/jsx(FormikSelect, {
                 required: true,
                 "data-testid": "ntm-profile-country-select",
                 label: t("neetoTeamMembers.profile.inputs.label.country"),
                 name: "countryId",
                 options: countryDropdownOptions,
                 value: selectedCountryOption,
-                onChange: function onChange(option) {
+                onChange: function onChange(value) {
+                  var option = findBy({
+                    value: value
+                  }, countryDropdownOptions);
                   var dependentFields = handleCountryChange(option);
                   setFieldValue("dateFormat", dependentFields === null || dependentFields === void 0 ? void 0 : dependentFields.dateFormat);
-                  setFieldValue("countryId", option === null || option === void 0 ? void 0 : option.value);
                 }
-              }), /*#__PURE__*/jsx("div", {
-                className: "space-y-2",
-                children: /*#__PURE__*/jsx(FormikSelect, {
-                  required: true,
-                  "data-testid": "ntm-language-select",
-                  name: "language",
-                  options: LANGUAGE_OPTIONS,
-                  label: t("neetoTeamMembers.profile.inputs.label.language"),
-                  onChange: function onChange(option) {
-                    setFieldValue("language", option.value);
-                  }
-                })
+              }), /*#__PURE__*/jsx(FormikSelect, {
+                required: true,
+                "data-testid": "ntm-language-select",
+                label: t("neetoTeamMembers.profile.inputs.label.language"),
+                name: "language",
+                options: LANGUAGE_OPTIONS
               }), /*#__PURE__*/jsxs("div", {
                 className: "space-y-2",
-                children: [/*#__PURE__*/jsxs("div", {
-                  className: "space-y-2",
-                  children: [/*#__PURE__*/jsxs(Label, {
-                    children: [t("neetoTeamMembers.profile.inputs.label.timeZone"), /*#__PURE__*/jsx("span", {
-                      className: "text-destructive",
-                      children: " *"
-                    })]
-                  }), /*#__PURE__*/jsx("div", {
-                    "data-testid": "ntm-profile-time-zone-select",
-                    ref: timezoneRef,
-                    className: cn("w-full grow", {
-                      "pointer-events-none bg-muted": isTimezoneFieldDisabled
-                    })
+                children: [/*#__PURE__*/jsxs(Label, {
+                  children: [t("neetoTeamMembers.profile.inputs.label.timeZone"), /*#__PURE__*/jsx("span", {
+                    className: "text-destructive",
+                    children: " *"
                   })]
+                }), /*#__PURE__*/jsx("div", {
+                  "data-testid": "ntm-profile-time-zone-select",
+                  ref: timezoneRef,
+                  className: cn("w-full grow", {
+                    "pointer-events-none bg-muted": isTimezoneFieldDisabled
+                  })
                 }), touched.timeZone && errors.timeZone && /*#__PURE__*/jsx(Typography, {
-                  className: "text-xs leading-none text-destructive",
+                  className: "text-destructive",
+                  variant: "caption",
                   children: errors.timeZone
                 })]
               }), /*#__PURE__*/jsx(FormikSelect, {
@@ -316,27 +319,18 @@ var ChangeProfile = function ChangeProfile(_ref) {
                 "data-testid": "ntm-time-format-select",
                 name: "timeFormat",
                 options: TIME_FORMAT_OPTIONS,
-                label: t("neetoTeamMembers.profile.inputs.label.preferredTimeFormat"),
-                onChange: function onChange(option) {
-                  setFieldValue("timeFormat", option.value);
-                }
-              }), /*#__PURE__*/jsx("div", {
-                className: "space-y-2",
-                children: /*#__PURE__*/jsx(FormikSelect, {
-                  required: true,
-                  "data-testid": "ntm-date-format-select",
-                  name: "dateFormat",
-                  options: DATE_FORMAT_OPTIONS,
-                  label: t("neetoTeamMembers.profile.inputs.label.preferredDateFormat"),
-                  onChange: function onChange(option) {
-                    setFieldValue("dateFormat", option.value);
-                  }
-                })
+                label: t("neetoTeamMembers.profile.inputs.label.preferredTimeFormat")
+              }), /*#__PURE__*/jsx(FormikSelect, {
+                required: true,
+                "data-testid": "ntm-date-format-select",
+                name: "dateFormat",
+                options: DATE_FORMAT_OPTIONS,
+                label: t("neetoTeamMembers.profile.inputs.label.preferredDateFormat")
               })]
-            })]
-          })
-        }), /*#__PURE__*/jsx("div", {
-          className: "border-t border-border p-4",
+            })
+          })]
+        }), /*#__PURE__*/jsx(Sheet.Footer, {
+          className: "border-t border-border",
           children: /*#__PURE__*/jsx(FormikActionBlock, {
             isSubmitting: isUpdatingProfile || isUploading,
             cancelButtonProps: {
@@ -384,6 +378,24 @@ var sanitizeValue = function sanitizeValue(value, defaultValue) {
   return isNil(value) || is(String, value) && trim(value) === "" ? defaultValue : value;
 };
 
+var Field = function Field(_ref) {
+  var label = _ref.label,
+    children = _ref.children,
+    testId = _ref.testId;
+  return /*#__PURE__*/jsxs("div", {
+    className: "flex flex-col gap-1 py-3 first:pt-0 last:pb-0",
+    children: [/*#__PURE__*/jsx(Typography, {
+      color: "muted",
+      variant: "caption",
+      weight: "medium",
+      children: label
+    }), /*#__PURE__*/jsx(Typography, {
+      "data-testid": testId,
+      variant: "body2",
+      children: children
+    })]
+  });
+};
 var Preview$1 = function Preview() {
   var _globalProps$user, _Intl$DateTimeFormat$, _findBy2, _findBy3, _findBy4;
   var _useTranslation = useTranslation(),
@@ -435,12 +447,12 @@ var Preview$1 = function Preview() {
       children: /*#__PURE__*/jsx(Spinner, {})
     });
   }
-  return /*#__PURE__*/jsx("div", {
-    className: "w-full flex-1 overflow-y-auto bg-muted/50 p-4",
-    children: /*#__PURE__*/jsxs("div", {
-      className: "flex w-full flex-col gap-2",
-      children: [/*#__PURE__*/jsx("div", {
-        className: "neeto-ui-rounded-md bg-background p-3",
+  return /*#__PURE__*/jsxs(Sheet.Body, {
+    className: "flex min-h-0 w-full flex-1 flex-col gap-2 overflow-y-auto p-4",
+    children: [/*#__PURE__*/jsx(Card, {
+      className: "w-full shrink-0 ring-0",
+      size: "sm",
+      children: /*#__PURE__*/jsx(CardContent, {
         children: /*#__PURE__*/jsxs("div", {
           className: "flex items-center gap-3",
           children: [/*#__PURE__*/jsx(Avatar, {
@@ -452,14 +464,15 @@ var Preview$1 = function Preview() {
           }), /*#__PURE__*/jsxs("div", {
             className: "flex flex-col",
             children: [/*#__PURE__*/jsx(Typography, {
-              className: "text-base font-semibold",
               "data-testid": "profile-full-name-field",
+              variant: "h4",
               children: name
             }), /*#__PURE__*/jsxs("div", {
               className: "flex items-center gap-1",
               children: [/*#__PURE__*/jsx(Typography, {
-                className: "text-sm text-muted-foreground",
+                color: "muted",
                 "data-testid": "profile-email-field",
+                variant: "body3",
                 children: email
               }), /*#__PURE__*/jsx(CopyToClipboardButton, {
                 size: "icon-xs",
@@ -469,102 +482,69 @@ var Preview$1 = function Preview() {
             })]
           })]
         })
-      }), /*#__PURE__*/jsxs("div", {
-        className: "divide-y divide-border neeto-ui-rounded-md bg-background p-3",
+      })
+    }), /*#__PURE__*/jsx(Card, {
+      className: "w-full shrink-0 ring-0",
+      size: "sm",
+      children: /*#__PURE__*/jsxs(CardContent, {
+        className: "divide-y divide-border",
+        children: [/*#__PURE__*/jsx(Field, {
+          label: t("neetoTeamMembers.labels.firstName"),
+          testId: "profile-first-name-field",
+          children: firstName
+        }), /*#__PURE__*/jsx(Field, {
+          label: t("neetoTeamMembers.labels.lastName"),
+          testId: "profile-last-name-field",
+          children: lastName
+        }), /*#__PURE__*/jsx(Field, {
+          label: t("neetoTeamMembers.labels.country"),
+          testId: "profile-country-field",
+          children: countryName
+        }), /*#__PURE__*/jsx(Field, {
+          label: t("neetoTeamMembers.labels.language"),
+          testId: "profile-preferred-language-field",
+          children: ((_findBy2 = _findBy({
+            value: language
+          }, LANGUAGE_OPTIONS)) === null || _findBy2 === void 0 ? void 0 : _findBy2.label) || "-"
+        }), /*#__PURE__*/jsxs(Field, {
+          label: t("neetoTeamMembers.labels.timeZone"),
+          testId: "profile-time-zone-field",
+          children: [ianaTimezoneToHumanReadable(timeZone), timeZoneAbbreviation ? " (".concat(timeZoneAbbreviation, ")") : "", " ", time]
+        }), /*#__PURE__*/jsx(Field, {
+          label: t("neetoTeamMembers.labels.preferredTimeFormat"),
+          testId: "profile-preferred-time-format-field",
+          children: ((_findBy3 = _findBy({
+            value: timeFormat
+          }, TIME_FORMAT_OPTIONS)) === null || _findBy3 === void 0 ? void 0 : _findBy3.label) || "-"
+        }), /*#__PURE__*/jsx(Field, {
+          label: t("neetoTeamMembers.labels.preferredDateFormat"),
+          testId: "profile-preferred-date-format-field",
+          children: ((_findBy4 = _findBy({
+            value: dateFormat
+          }, DATE_FORMAT_OPTIONS)) === null || _findBy4 === void 0 ? void 0 : _findBy4.label) || "-"
+        })]
+      })
+    }), /*#__PURE__*/jsx(Card, {
+      className: "w-full shrink-0 ring-0",
+      size: "sm",
+      children: /*#__PURE__*/jsxs(CardContent, {
+        className: "grid grid-cols-[1fr_auto] items-center gap-2",
         children: [/*#__PURE__*/jsxs("div", {
-          className: "flex flex-col gap-1 pb-3",
-          children: [/*#__PURE__*/jsx(Typography, {
-            className: "text-xs font-medium text-muted-foreground",
-            children: t("neetoTeamMembers.labels.firstName")
-          }), /*#__PURE__*/jsx(Typography, {
-            className: "text-[15px] text-foreground",
-            "data-testid": "profile-first-name-field",
-            children: firstName
-          })]
-        }), /*#__PURE__*/jsxs("div", {
-          className: "flex flex-col gap-1 py-3",
+          className: "flex flex-col gap-1",
           children: [/*#__PURE__*/jsx(Typography, {
-            className: "text-xs font-medium text-muted-foreground",
-            children: t("neetoTeamMembers.labels.lastName")
+            color: "muted",
+            variant: "caption",
+            weight: "medium",
+            children: t("neetoTeamMembers.labels.currentPlan")
           }), /*#__PURE__*/jsx(Typography, {
-            className: "text-[15px] text-foreground",
-            "data-testid": "profile-last-name-field",
-            children: lastName
-          })]
-        }), /*#__PURE__*/jsxs("div", {
-          className: "flex flex-col gap-1 py-3",
-          children: [/*#__PURE__*/jsx(Typography, {
-            className: "text-xs font-medium text-muted-foreground",
-            children: t("neetoTeamMembers.labels.country")
-          }), /*#__PURE__*/jsx(Typography, {
-            className: "text-[15px] text-foreground",
-            "data-testid": "profile-country-field",
-            children: countryName
-          })]
-        }), /*#__PURE__*/jsxs("div", {
-          className: "flex flex-col gap-1 py-3",
-          children: [/*#__PURE__*/jsx(Typography, {
-            className: "text-xs font-medium text-muted-foreground",
-            children: t("neetoTeamMembers.labels.language")
-          }), /*#__PURE__*/jsx(Typography, {
-            className: "text-[15px] text-foreground",
-            "data-testid": "profile-preferred-language-field",
-            children: ((_findBy2 = _findBy({
-              value: language
-            }, LANGUAGE_OPTIONS)) === null || _findBy2 === void 0 ? void 0 : _findBy2.label) || "-"
-          })]
-        }), /*#__PURE__*/jsxs("div", {
-          className: "flex flex-col gap-1 py-3",
-          children: [/*#__PURE__*/jsx(Typography, {
-            className: "text-xs font-medium text-muted-foreground",
-            children: t("neetoTeamMembers.labels.timeZone")
-          }), /*#__PURE__*/jsxs(Typography, {
-            className: "text-[15px] text-foreground",
-            "data-testid": "profile-time-zone-field",
-            children: [ianaTimezoneToHumanReadable(timeZone), timeZoneAbbreviation ? " (".concat(timeZoneAbbreviation, ")") : "", " ", time]
-          })]
-        }), /*#__PURE__*/jsxs("div", {
-          className: "flex flex-col gap-1 py-3",
-          children: [/*#__PURE__*/jsx(Typography, {
-            className: "text-xs font-medium text-muted-foreground",
-            children: t("neetoTeamMembers.labels.preferredTimeFormat")
-          }), /*#__PURE__*/jsx(Typography, {
-            className: "text-[15px] text-foreground",
-            "data-testid": "profile-preferred-time-format-field",
-            children: ((_findBy3 = _findBy({
-              value: timeFormat
-            }, TIME_FORMAT_OPTIONS)) === null || _findBy3 === void 0 ? void 0 : _findBy3.label) || "-"
-          })]
-        }), /*#__PURE__*/jsxs("div", {
-          className: "flex flex-col gap-1 pt-3",
-          children: [/*#__PURE__*/jsx(Typography, {
-            className: "text-xs font-medium text-muted-foreground",
-            children: t("neetoTeamMembers.labels.preferredDateFormat")
-          }), /*#__PURE__*/jsx(Typography, {
-            className: "text-[15px] text-foreground",
-            "data-testid": "profile-preferred-date-format-field",
-            children: ((_findBy4 = _findBy({
-              value: dateFormat
-            }, DATE_FORMAT_OPTIONS)) === null || _findBy4 === void 0 ? void 0 : _findBy4.label) || "-"
+            "data-testid": "profile-subscription-type",
+            variant: "body2",
+            children: t("neetoTeamMembers.common.subscriptionType", {
+              subscription: subscription
+            })
           })]
-        })]
-      }), /*#__PURE__*/jsx("div", {
-        className: "neeto-ui-rounded-md bg-background p-3",
-        children: /*#__PURE__*/jsxs("div", {
-          className: "flex items-center justify-between",
-          children: [/*#__PURE__*/jsxs("div", {
-            className: "flex flex-col gap-1",
-            children: [/*#__PURE__*/jsx(Typography, {
-              className: "text-xs font-medium text-muted-foreground",
-              children: t("neetoTeamMembers.labels.currentPlan")
-            }), /*#__PURE__*/jsx(Typography, {
-              className: "text-[15px] text-foreground",
-              "data-testid": "profile-subscription-type",
-              children: t("neetoTeamMembers.common.subscriptionType", {
-                subscription: subscription
-              })
-            })]
-          }), /*#__PURE__*/jsx(Button, {
+        }), /*#__PURE__*/jsx(CardAction, {
+          children: /*#__PURE__*/jsx(Button, {
             asChild: true,
             "data-testid": "profile-upgrade-button",
             size: "sm",
@@ -574,10 +554,10 @@ var Preview$1 = function Preview() {
                 className: "size-4"
               }), t("neetoTeamMembers.buttons.upgrade")]
             })
-          })]
-        })
-      })]
-    })
+          })
+        })]
+      })
+    })]
   });
 };
 var Preview = /*#__PURE__*/memo(Preview$1);
@@ -600,47 +580,52 @@ var Profile = function Profile() {
   var enableEditMode = function enableEditMode() {
     return setIsEditMode(true);
   };
+  var menuItems = [{
+    key: "edit-basic-info",
+    "data-testid": "edit-basic-info-menu-button",
+    label: t("neetoTeamMembers.buttons.editBasicInfo"),
+    onClick: enableEditMode
+  }, {
+    key: "update-email",
+    "data-testid": "update-email-menu-button",
+    label: t("neetoTeamMembers.buttons.updateEmail"),
+    onClick: function onClick() {
+      return window.open(MY_PROFILE_PATH, "_self");
+    }
+  }, {
+    key: "manage-billing-subscriptions",
+    "data-testid": "manage-billing-subscriptions-menu-button",
+    label: t("neetoTeamMembers.buttons.manageBillingAndSubscriptions"),
+    onClick: function onClick() {
+      return window.open(MY_PROFILE_PATH, "_self");
+    }
+  }];
   return /*#__PURE__*/jsx("div", {
     className: "w-full",
     children: /*#__PURE__*/jsxs(Sheet, {
       isOpen: isOpen,
       onClose: onClose,
-      className: "max-w-96 bg-muted/50",
-      children: [/*#__PURE__*/jsx(Sheet.Header, {
-        className: "bg-muted/50",
-        children: /*#__PURE__*/jsxs("div", {
-          className: "flex justify-between",
-          children: [/*#__PURE__*/jsx(Sheet.Title, {
-            className: "text-xl font-semibold",
+      className: "ntm-timezone-shadcn-overrides max-w-96 gap-0 bg-sidebar",
+      children: [/*#__PURE__*/jsxs(Sheet.Header, {
+        children: [/*#__PURE__*/jsx(Sheet.Title, {
+          asChild: true,
+          children: /*#__PURE__*/jsx(Typography, {
+            variant: "h3",
             children: t("neetoTeamMembers.profile.common.myProfile")
-          }), !isEditMode && /*#__PURE__*/jsx(DropdownMenu, {
-            buttonSize: "small",
-            buttonStyle: "text",
-            icon: EllipsisVertical,
+          })
+        }), !isEditMode && /*#__PURE__*/jsx(MoreDropdown, {
+          menuItems: menuItems,
+          isVertical: true,
+          dropdownProps: {
             position: "bottom-end",
-            children: /*#__PURE__*/jsxs(DropdownMenu.Menu, {
-              children: [/*#__PURE__*/jsx(DropdownMenu.MenuItem, {
-                children: /*#__PURE__*/jsx(DropdownMenu.MenuItem.Button, {
-                  "data-testid": "edit-basic-info-menu-button",
-                  onClick: enableEditMode,
-                  children: t("neetoTeamMembers.buttons.editBasicInfo")
-                })
-              }), /*#__PURE__*/jsx(DropdownMenu.MenuItem, {
-                children: /*#__PURE__*/jsx(DropdownMenu.MenuItem.Button, {
-                  "data-testid": "update-email-menu-button",
-                  href: MY_PROFILE_PATH,
-                  children: t("neetoTeamMembers.buttons.updateEmail")
-                })
-              }), /*#__PURE__*/jsx(DropdownMenu.MenuItem, {
-                children: /*#__PURE__*/jsx(DropdownMenu.MenuItem.Button, {
-                  "data-testid": "manage-billing-subscriptions-menu-button",
-                  href: MY_PROFILE_PATH,
-                  children: t("neetoTeamMembers.buttons.manageBillingAndSubscriptions")
-                })
-              })]
-            })
-          })]
-        })
+            strategy: "fixed"
+          },
+          dropdownButtonProps: {
+            "data-testid": "profile-more-dropdown-button",
+            size: "icon-sm",
+            className: "absolute top-3 end-12"
+          }
+        })]
       }), isEditMode ? /*#__PURE__*/jsx(ChangeProfile, {
         onClose: onClose
       }) : /*#__PURE__*/jsx(Preview, {})]