@greatapps/common 1.1.700 → 1.1.702

package/dist/utils/safeServerAction.mjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/utils/safeServerAction.ts"],"sourcesContent":["import { isRedirectError } from 'next/dist/client/components/redirect-error';\r\nimport { ApiError } from '../infra/api/types';\r\nimport type { ActionResult } from '../infra/api/types';\r\n\r\nexport async function safeServerAction<T>(\r\n  fn: () => Promise<T>\r\n): Promise<ActionResult<T>> {\r\n  try {\r\n    const data = await fn();\r\n    return { success: true, data };\r\n  } catch (error) {\r\n    if (isRedirectError(error)) throw error;\r\n    const message =\r\n      error instanceof ApiError\r\n        ? error.message\r\n        : error instanceof Error\r\n          ? error.message\r\n          : 'Erro desconhecido';\r\n    return { success: false, error: message };\r\n  }\r\n}\r\n"],"mappings":"AAAA,SAAS,uBAAuB;AAChC,SAAS,gBAAgB;AAGzB,eAAsB,iBACpB,IAC0B;AAC1B,MAAI;AACF,UAAM,OAAO,MAAM,GAAG;AACtB,WAAO,EAAE,SAAS,MAAM,KAAK;AAAA,EAC/B,SAAS,OAAO;AACd,QAAI,gBAAgB,KAAK,EAAG,OAAM;AAClC,UAAM,UACJ,iBAAiB,WACb,MAAM,UACN,iBAAiB,QACf,MAAM,UACN;AACR,WAAO,EAAE,SAAS,OAAO,OAAO,QAAQ;AAAA,EAC1C;AACF;","names":[]}
+{"version":3,"sources":["../../src/utils/safeServerAction.ts"],"sourcesContent":["import { isRedirectError } from 'next/dist/client/components/redirect-error';\nimport { ApiError } from '../infra/api/types';\nimport type { ActionResult } from '../infra/api/types';\n\nexport async function safeServerAction<T>(\n  fn: () => Promise<T>\n): Promise<ActionResult<T>> {\n  try {\n    const data = await fn();\n    return { success: true, data };\n  } catch (error) {\n    if (isRedirectError(error)) throw error;\n    const message =\n      error instanceof ApiError\n        ? error.message\n        : error instanceof Error\n          ? error.message\n          : 'Erro desconhecido';\n    return { success: false, error: message };\n  }\n}\n"],"mappings":"AAAA,SAAS,uBAAuB;AAChC,SAAS,gBAAgB;AAGzB,eAAsB,iBACpB,IAC0B;AAC1B,MAAI;AACF,UAAM,OAAO,MAAM,GAAG;AACtB,WAAO,EAAE,SAAS,MAAM,KAAK;AAAA,EAC/B,SAAS,OAAO;AACd,QAAI,gBAAgB,KAAK,EAAG,OAAM;AAClC,UAAM,UACJ,iBAAiB,WACb,MAAM,UACN,iBAAiB,QACf,MAAM,UACN;AACR,WAAO,EAAE,SAAS,OAAO,OAAO,QAAQ;AAAA,EAC1C;AACF;","names":[]}

package/dist/utils/withAction.mjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/utils/withAction.ts"],"sourcesContent":["import type { ActionResult } from '../infra/api/types';\r\n\r\nexport function withAction<TArgs extends any[], TData>(\r\n  action: (...args: TArgs) => Promise<ActionResult<TData>>\r\n): (...args: TArgs) => Promise<TData> {\r\n  return async (...args) => {\r\n    const result = await action(...args);\r\n    if (!result.success) {\r\n      throw new Error(result.error ?? 'Erro desconhecido');\r\n    }\r\n    return result.data as TData;\r\n  };\r\n}\r\n"],"mappings":"AAEO,SAAS,WACd,QACoC;AACpC,SAAO,UAAU,SAAS;AACxB,UAAM,SAAS,MAAM,OAAO,GAAG,IAAI;AACnC,QAAI,CAAC,OAAO,SAAS;AACnB,YAAM,IAAI,MAAM,OAAO,SAAS,mBAAmB;AAAA,IACrD;AACA,WAAO,OAAO;AAAA,EAChB;AACF;","names":[]}
+{"version":3,"sources":["../../src/utils/withAction.ts"],"sourcesContent":["import type { ActionResult } from '../infra/api/types';\n\nexport function withAction<TArgs extends any[], TData>(\n  action: (...args: TArgs) => Promise<ActionResult<TData>>\n): (...args: TArgs) => Promise<TData> {\n  return async (...args) => {\n    const result = await action(...args);\n    if (!result.success) {\n      throw new Error(result.error ?? 'Erro desconhecido');\n    }\n    return result.data as TData;\n  };\n}\n"],"mappings":"AAEO,SAAS,WACd,QACoC;AACpC,SAAO,UAAU,SAAS;AACxB,UAAM,SAAS,MAAM,OAAO,GAAG,IAAI;AACnC,QAAI,CAAC,OAAO,SAAS;AACnB,YAAM,IAAI,MAAM,OAAO,SAAS,mBAAmB;AAAA,IACrD;AACA,WAAO,OAAO;AAAA,EAChB;AACF;","names":[]}

package/package.json

@@ -1,115 +1,115 @@
-{
-  "name": "@greatapps/common",
-  "version": "1.1.700",
-  "description": "Shared library for GreatApps frontend applications",
-  "main": "./dist/index.mjs",
-  "types": "./src/index.ts",
-  "exports": {
-    ".": {
-      "import": "./dist/index.mjs",
-      "types": "./src/index.ts"
-    },
-    "./server": {
-      "import": "./dist/server.mjs",
-      "types": "./src/server.ts"
-    },
-    "./middleware": {
-      "import": "./dist/middleware.mjs",
-      "types": "./src/middleware.ts"
-    },
-    "./route": {
-      "import": "./dist/route.mjs",
-      "types": "./src/route.ts"
-    },
-    "./http": {
-      "import": "./dist/http.mjs",
-      "types": "./src/http.ts"
-    },
-    "./handlers": {
-      "import": "./dist/handlers.mjs",
-      "types": "./src/handlers.ts"
-    },
-    "./i18n": {
-      "import": "./dist/i18n.mjs",
-      "types": "./src/i18n.ts"
-    }
-  },
-  "files": [
-    "dist",
-    "src"
-  ],
-  "scripts": {
-    "build": "tsup",
-    "dev": "tsup --watch",
-    "typecheck": "tsc --noEmit",
-    "prepublishOnly": "npm run build"
-  },
-  "keywords": [],
-  "author": "",
-  "license": "ISC",
-  "dependencies": {
-    "@cf-wasm/photon": "0.3.4",
-    "@greatapps/cache": "2.0.1",
-    "@greatapps/jwt": "1.0.12",
-    "@radix-ui/react-accordion": "1.2.12",
-    "@radix-ui/react-checkbox": "1.3.3",
-    "@radix-ui/react-popover": "1.1.15",
-    "@radix-ui/react-progress": "1.1.8",
-    "@radix-ui/react-radio-group": "1.3.8",
-    "@radix-ui/react-scroll-area": "1.2.10",
-    "@radix-ui/react-select": "2.2.6",
-    "@radix-ui/react-separator": "1.1.8",
-    "@radix-ui/react-switch": "1.2.6",
-    "@radix-ui/react-tabs": "1.1.13",
-    "@radix-ui/react-tooltip": "1.2.8",
-    "@tabler/icons-react": "3.41.0",
-    "axios": "1.13.6",
-    "browser-image-compression": "2.0.2",
-    "class-variance-authority": "0.7.1",
-    "clsx": "2.1.1",
-    "cmdk": "1.1.1",
-    "date-fns": "4.1.0",
-    "idb-keyval": "6.2.2",
-    "input-otp": "1.4.2",
-    "libphonenumber-js": "1.12.40",
-    "react-day-picker": "9.14.0",
-    "react-image-crop": "11.0.10",
-    "server-only": "0.0.1",
-    "sonner": ">=2.0.0",
-    "tailwind-merge": "3.5.0"
-  },
-  "devDependencies": {
-    "@hookform/resolvers": "5.2.2",
-    "zod": "4.4.3",
-    "@tanstack/query-broadcast-client-experimental": "5.95.2",
-    "@tanstack/react-query": "5.95.2",
-    "@tanstack/react-query-devtools": "5.95.2",
-    "@tanstack/react-query-persist-client": "5.95.2",
-    "@types/node": "25.5.0",
-    "@types/react": "19.2.14",
-    "@types/react-dom": "19.2.3",
-    "glob": "13.0.6",
-    "next": "16.2.1",
-    "next-intl": "4.12.0",
-    "react": "19.1.4",
-    "react-dom": "19.1.4",
-    "react-hook-form": "7.72.0",
-    "tsup": "8.5.1",
-    "typescript": "5.9.3",
-    "zustand": "5.0.12"
-  },
-  "peerDependencies": {
-    "@hookform/resolvers": ">=3.0.0",
-    "@tanstack/query-broadcast-client-experimental": ">=5.0.0",
-    "@tanstack/react-query": ">=5.0.0",
-    "@tanstack/react-query-persist-client": ">=5.0.0",
-    "next": ">=16.0.0",
-    "next-intl": ">=4.0.0",
-    "react": ">=19.0.0",
-    "react-dom": ">=19.0.0",
-    "react-hook-form": ">=7.0.0",
-    "sonner": ">=2.0.0",
-    "zod": ">=4.0.0",
-    "zustand": ">=4.0.0"
-  }
-}
+{
+  "name": "@greatapps/common",
+  "version": "1.1.702",
+  "description": "Shared library for GreatApps frontend applications",
+  "main": "./dist/index.mjs",
+  "types": "./src/index.ts",
+  "exports": {
+    ".": {
+      "import": "./dist/index.mjs",
+      "types": "./src/index.ts"
+    },
+    "./server": {
+      "import": "./dist/server.mjs",
+      "types": "./src/server.ts"
+    },
+    "./middleware": {
+      "import": "./dist/middleware.mjs",
+      "types": "./src/middleware.ts"
+    },
+    "./route": {
+      "import": "./dist/route.mjs",
+      "types": "./src/route.ts"
+    },
+    "./http": {
+      "import": "./dist/http.mjs",
+      "types": "./src/http.ts"
+    },
+    "./handlers": {
+      "import": "./dist/handlers.mjs",
+      "types": "./src/handlers.ts"
+    },
+    "./i18n": {
+      "import": "./dist/i18n.mjs",
+      "types": "./src/i18n.ts"
+    }
+  },
+  "files": [
+    "dist",
+    "src"
+  ],
+  "scripts": {
+    "build": "tsup",
+    "dev": "tsup --watch",
+    "typecheck": "tsc --noEmit",
+    "prepublishOnly": "npm run build"
+  },
+  "keywords": [],
+  "author": "",
+  "license": "ISC",
+  "dependencies": {
+    "@cf-wasm/photon": "0.3.4",
+    "@greatapps/cache": "2.0.1",
+    "@greatapps/jwt": "1.0.12",
+    "@radix-ui/react-accordion": "1.2.12",
+    "@radix-ui/react-checkbox": "1.3.3",
+    "@radix-ui/react-popover": "1.1.15",
+    "@radix-ui/react-progress": "1.1.8",
+    "@radix-ui/react-radio-group": "1.3.8",
+    "@radix-ui/react-scroll-area": "1.2.10",
+    "@radix-ui/react-select": "2.2.6",
+    "@radix-ui/react-separator": "1.1.8",
+    "@radix-ui/react-switch": "1.2.6",
+    "@radix-ui/react-tabs": "1.1.13",
+    "@radix-ui/react-tooltip": "1.2.8",
+    "@tabler/icons-react": "3.41.0",
+    "axios": "1.13.6",
+    "browser-image-compression": "2.0.2",
+    "class-variance-authority": "0.7.1",
+    "clsx": "2.1.1",
+    "cmdk": "1.1.1",
+    "date-fns": "4.1.0",
+    "idb-keyval": "6.2.2",
+    "input-otp": "1.4.2",
+    "libphonenumber-js": "1.12.40",
+    "react-day-picker": "9.14.0",
+    "react-image-crop": "11.0.10",
+    "server-only": "0.0.1",
+    "sonner": ">=2.0.0",
+    "tailwind-merge": "3.5.0"
+  },
+  "devDependencies": {
+    "@hookform/resolvers": "5.2.2",
+    "zod": "4.4.3",
+    "@tanstack/query-broadcast-client-experimental": "5.95.2",
+    "@tanstack/react-query": "5.95.2",
+    "@tanstack/react-query-devtools": "5.95.2",
+    "@tanstack/react-query-persist-client": "5.95.2",
+    "@types/node": "25.5.0",
+    "@types/react": "19.2.14",
+    "@types/react-dom": "19.2.3",
+    "glob": "13.0.6",
+    "next": "16.2.1",
+    "next-intl": "4.12.0",
+    "react": "19.1.4",
+    "react-dom": "19.1.4",
+    "react-hook-form": "7.72.0",
+    "tsup": "8.5.1",
+    "typescript": "5.9.3",
+    "zustand": "5.0.12"
+  },
+  "peerDependencies": {
+    "@hookform/resolvers": ">=3.0.0",
+    "@tanstack/query-broadcast-client-experimental": ">=5.0.0",
+    "@tanstack/react-query": ">=5.0.0",
+    "@tanstack/react-query-persist-client": ">=5.0.0",
+    "next": ">=16.0.0",
+    "next-intl": ">=4.0.0",
+    "react": ">=19.0.0",
+    "react-dom": ">=19.0.0",
+    "react-hook-form": ">=7.0.0",
+    "sonner": ">=2.0.0",
+    "zod": ">=4.0.0",
+    "zustand": ">=4.0.0"
+  }
+}

package/src/components/account/ConfigurationsMyAccountModal.tsx

@@ -1,179 +1,179 @@
-'use client';
-
-import { IconKey, IconLock, IconSettings2, IconX } from '@tabler/icons-react';
-import { useTranslations } from 'next-intl';
-import { Dialog, DialogContent, DialogHeader, DialogTitle } from '../ui/overlay/Dialog';
-import { Tabs, TabsList, TabsTrigger, TabsContent } from '../ui/data-display/Tabs';
-import { cn } from '../../infra/utils/clsx';
-import { AccountSectionType } from '../../enums/AccountSectionType';
-import { PreferencesSection } from './sections/PreferencesSection';
-import { ChangePasswordSection } from './sections/ChangePasswordSection';
-import { TokenSection } from './sections/TokenSection';
-import { SecuritySection } from './sections/SecuritySection';
-import useConfigurationsModal from './hooks/useConfigurationsModal';
-import useIsMobile from '../../hooks/useIsMobile';
-import { useAccountModals } from '../../store/useAccountModals';
-import { useAuth } from '../../providers/auth.provider';
-import { UserProfile } from '../../modules/users/schema';
-import { useActiveSubscription } from '../../modules/subscriptions/hooks/find-active-subscription.hook';
-import { hasSubscriptionExpired } from '../../modules/subscriptions/utils/has-subscription-expired';
-import { useWhitelabel } from '../../providers/whitelabel.provider';
-
-export default function ConfigurationsMyAccountModal() {
-  const translate = useTranslations();
-  const {
-    activeModal,
-    openDeleteAccount,
-    openIsntPossibleDelete,
-    close,
-  } = useAccountModals();
-  const { whitelabel } = useWhitelabel();
-
-  const open = activeModal === 'configurations';
-
-  const { data: subscriptionData } = useActiveSubscription();
-  const subscription = subscriptionData?.data?.[0] ?? null;
-  const isPaidSubscriptionType =
-    !!subscription &&
-    subscription.type !== 'free' &&
-    subscription.type !== 'trial';
-  const isBlockingSubscription =
-    isPaidSubscriptionType &&
-    subscription.active === true &&
-    !subscription.date_cancellation &&
-    !hasSubscriptionExpired(subscription.date_due);
-
-  const { user } = useAuth();
-  const isOwner = user?.profile === UserProfile.owner;
-
-  const isMobile = useIsMobile();
-  const { activeSection, setActiveSection } = useConfigurationsModal({
-    isOpen: open,
-  });
-
-  const handleDeleteAccount = () => {
-    close();
-    if (isBlockingSubscription) {
-      openIsntPossibleDelete();
-    } else {
-      openDeleteAccount();
-    }
-  };
-
-  const tabTriggerClasses = cn(
-    'border-0! px-0 py-0',
-
-    'lg:rounded-md lg:flex lg:items-center lg:gap-2 lg:p-3 lg:justify-start lg:w-full',
-    'lg:bg-white lg:hover:bg-gray-100 lg:active:bg-gray-50 lg:border-0',
-    'lg:data-[state=active]:bg-gray-50',
-
-    'flex items-center gap-1.5 px-3 py-3 justify-center whitespace-nowrap',
-    'border-b-2 border-transparent',
-    'data-[state=active]:bg-gray-50 rounded-lg',
-
-    'text-gray-500 data-[state=active]:text-gray-950',
-    'hover:text-gray-900 transition-colors'
-  );
-
-  return (
-    <Dialog open={open} onOpenChange={close}>
-      <DialogContent
-        showCloseButton={!isMobile}
-        overlayClassName="bg-black/20 lg:bg-black/50"
-        className="
-          flex flex-col p-0 gap-0 max-w-full sm:max-w-full overflow-x-hidden border-0
-          rounded-t-2xl rounded-b-none h-[100dvh] top-0 bottom-0 left-0 right-0 translate-x-0 translate-y-0
-          lg:flex-row lg:w-[892px] lg:max-w-[892px] lg:h-[626px] lg:rounded-lg lg:border
-          lg:top-[50%] lg:bottom-auto lg:left-[50%] lg:right-auto lg:translate-x-[-50%] lg:translate-y-[-50%]"
-      >
-        <DialogHeader className="sr-only">
-          <DialogTitle>{translate('common.account.configurations.title')}</DialogTitle>
-        </DialogHeader>
-        <div className="md:hidden flex items-center justify-between px-5 py-3 border-b border-gray-200">
-          <span className="text-gray-950 paragraph-medium-semibold">
-            {translate('common.account.configurations.title')}
-          </span>
-          <button
-            type="button"
-            className="size-8 flex items-center justify-center text-gray-500 cursor-pointer"
-            onClick={close}
-          >
-            <IconX size={18} />
-          </button>
-        </div>
-        <Tabs
-          value={activeSection}
-          onValueChange={(value) => setActiveSection(value as AccountSectionType)}
-          orientation="vertical"
-          className="flex lg:flex-row flex-col w-full h-full flex-1 lg:h-full lg:pt-0 lg:gap-0"
-        >
-          <TabsList
-            className={cn(
-              'flex gap-0 bg-transparent border-b-0',
-
-              'lg:flex-col lg:items-stretch lg:justify-start lg:w-auto lg:min-w-60',
-              'lg:border-r lg:border-gray-200 lg:pl-5 lg:pr-5 lg:pt-5 lg:gap-5 lg:overflow-x-visible lg:self-stretch',
-
-              'flex-row items-center justify-start w-full overflow-x-auto scrollbar-hide shrink-0',
-              'px-4 py-3',
-              '[mask-image:linear-gradient(to_right,transparent,black_16px,black_calc(100%-24px),transparent)] lg:[mask-image:none]'
-            )}
-          >
-            <span className="hidden lg:block paragraph-medium-semibold text-gray-950 mb-0">
-              {translate('common.account.configurations.title')}
-            </span>
-
-            <div className="lg:flex lg:flex-col flex flex-row lg:gap-0 gap-0 lg:w-full">
-              <TabsTrigger value={AccountSectionType.PREFERENCES} className={tabTriggerClasses}>
-                <IconSettings2 size={20} className="shrink-0" />
-                <span className="paragraph-small-medium">{translate('common.preferences.title')}</span>
-              </TabsTrigger>
-
-              {isOwner && whitelabel?.id === 1 && (
-                <TabsTrigger value={AccountSectionType.TOKEN} className={tabTriggerClasses}>
-                  <IconKey size={20} className="shrink-0" />
-                  <span className="paragraph-small-medium">{translate('common.account.token.title')}</span>
-                </TabsTrigger>
-              )}
-
-              {isOwner && (
-                <TabsTrigger value={AccountSectionType.SECURITY} className={tabTriggerClasses}>
-                  <IconLock size={20} className="shrink-0" />
-                  <span className="paragraph-small-medium">{translate('common.account.security.title')}</span>
-                </TabsTrigger>
-              )}
-            </div>
-          </TabsList>
-
-          <div className="w-full flex-1 min-h-0 lg:h-full overflow-hidden lg:overflow-visible relative flex flex-col">
-            <TabsContent value={AccountSectionType.PREFERENCES} className="h-full! relative overflow-hidden">
-              <PreferencesSection onClose={close} />
-            </TabsContent>
-
-            {isOwner && (
-              <TabsContent value={AccountSectionType.TOKEN} className="h-full! relative overflow-hidden">
-                <TokenSection />
-              </TabsContent>
-            )}
-
-            {isOwner && (
-              <>
-                <TabsContent value={AccountSectionType.SECURITY} className="h-full! relative overflow-hidden">
-                  <SecuritySection
-                    setActiveSection={setActiveSection}
-                    onClose={close}
-                    onDeleteAccount={handleDeleteAccount}
-                  />
-                </TabsContent>
-
-                <TabsContent value={AccountSectionType.CHANGE_PASSWORD} className="h-full! relative overflow-hidden">
-                  <ChangePasswordSection onBack={() => setActiveSection(AccountSectionType.SECURITY)} />
-                </TabsContent>
-              </>
-            )}
-          </div>
-        </Tabs>
-      </DialogContent>
-    </Dialog>
-  );
-}
+'use client';
+
+import { IconKey, IconLock, IconSettings2, IconX } from '@tabler/icons-react';
+import { useTranslations } from 'next-intl';
+import { Dialog, DialogContent, DialogHeader, DialogTitle } from '../ui/overlay/Dialog';
+import { Tabs, TabsList, TabsTrigger, TabsContent } from '../ui/data-display/Tabs';
+import { cn } from '../../infra/utils/clsx';
+import { AccountSectionType } from '../../enums/AccountSectionType';
+import { PreferencesSection } from './sections/PreferencesSection';
+import { ChangePasswordSection } from './sections/ChangePasswordSection';
+import { TokenSection } from './sections/TokenSection';
+import { SecuritySection } from './sections/SecuritySection';
+import useConfigurationsModal from './hooks/useConfigurationsModal';
+import useIsMobile from '../../hooks/useIsMobile';
+import { useAccountModals } from '../../store/useAccountModals';
+import { useAuth } from '../../providers/auth.provider';
+import { UserProfile } from '../../modules/users/schema';
+import { useActiveSubscription } from '../../modules/subscriptions/hooks/find-active-subscription.hook';
+import { hasSubscriptionExpired } from '../../modules/subscriptions/utils/has-subscription-expired';
+import { useWhitelabel } from '../../providers/whitelabel.provider';
+
+export default function ConfigurationsMyAccountModal() {
+  const translate = useTranslations();
+  const {
+    activeModal,
+    openDeleteAccount,
+    openIsntPossibleDelete,
+    close,
+  } = useAccountModals();
+  const { whitelabel } = useWhitelabel();
+
+  const open = activeModal === 'configurations';
+
+  const { data: subscriptionData } = useActiveSubscription();
+  const subscription = subscriptionData?.data?.[0] ?? null;
+  const isPaidSubscriptionType =
+    !!subscription &&
+    subscription.type !== 'free' &&
+    subscription.type !== 'trial';
+  const isBlockingSubscription =
+    isPaidSubscriptionType &&
+    subscription.active === true &&
+    !subscription.date_cancellation &&
+    !hasSubscriptionExpired(subscription.date_due);
+
+  const { user } = useAuth();
+  const isOwner = user?.profile === UserProfile.owner;
+
+  const isMobile = useIsMobile();
+  const { activeSection, setActiveSection } = useConfigurationsModal({
+    isOpen: open,
+  });
+
+  const handleDeleteAccount = () => {
+    close();
+    if (isBlockingSubscription) {
+      openIsntPossibleDelete();
+    } else {
+      openDeleteAccount();
+    }
+  };
+
+  const tabTriggerClasses = cn(
+    'border-0! px-0 py-0',
+
+    'lg:rounded-md lg:flex lg:items-center lg:gap-2 lg:p-3 lg:justify-start lg:w-full',
+    'lg:bg-white lg:hover:bg-gray-100 lg:active:bg-gray-50 lg:border-0',
+    'lg:data-[state=active]:bg-gray-50',
+
+    'flex items-center gap-1.5 px-3 py-3 justify-center whitespace-nowrap',
+    'border-b-2 border-transparent',
+    'data-[state=active]:bg-gray-50 rounded-lg',
+
+    'text-gray-500 data-[state=active]:text-gray-950',
+    'hover:text-gray-900 transition-colors'
+  );
+
+  return (
+    <Dialog open={open} onOpenChange={close}>
+      <DialogContent
+        showCloseButton={!isMobile}
+        overlayClassName="bg-black/20 lg:bg-black/50"
+        className="
+          flex flex-col p-0 gap-0 max-w-full sm:max-w-full overflow-x-hidden border-0
+          rounded-t-2xl rounded-b-none h-[100dvh] top-0 bottom-0 left-0 right-0 translate-x-0 translate-y-0
+          lg:flex-row lg:w-[892px] lg:max-w-[892px] lg:h-[626px] lg:rounded-lg lg:border
+          lg:top-[50%] lg:bottom-auto lg:left-[50%] lg:right-auto lg:translate-x-[-50%] lg:translate-y-[-50%]"
+      >
+        <DialogHeader className="sr-only">
+          <DialogTitle>{translate('common.account.configurations.title')}</DialogTitle>
+        </DialogHeader>
+        <div className="md:hidden flex items-center justify-between px-5 py-3 border-b border-gray-200">
+          <span className="text-gray-950 paragraph-medium-semibold">
+            {translate('common.account.configurations.title')}
+          </span>
+          <button
+            type="button"
+            className="size-8 flex items-center justify-center text-gray-500 cursor-pointer"
+            onClick={close}
+          >
+            <IconX size={18} />
+          </button>
+        </div>
+        <Tabs
+          value={activeSection}
+          onValueChange={(value) => setActiveSection(value as AccountSectionType)}
+          orientation="vertical"
+          className="flex lg:flex-row flex-col w-full h-full flex-1 lg:h-full lg:pt-0 lg:gap-0"
+        >
+          <TabsList
+            className={cn(
+              'flex gap-0 bg-transparent border-b-0',
+
+              'lg:flex-col lg:items-stretch lg:justify-start lg:w-auto lg:min-w-60',
+              'lg:border-r lg:border-gray-200 lg:pl-5 lg:pr-5 lg:pt-5 lg:gap-5 lg:overflow-x-visible lg:self-stretch',
+
+              'flex-row items-center justify-start w-full overflow-x-auto scrollbar-hide shrink-0',
+              'px-4 py-3',
+              '[mask-image:linear-gradient(to_right,transparent,black_16px,black_calc(100%-24px),transparent)] lg:[mask-image:none]'
+            )}
+          >
+            <span className="hidden lg:block paragraph-medium-semibold text-gray-950 mb-0">
+              {translate('common.account.configurations.title')}
+            </span>
+
+            <div className="lg:flex lg:flex-col flex flex-row lg:gap-0 gap-0 lg:w-full">
+              <TabsTrigger value={AccountSectionType.PREFERENCES} className={tabTriggerClasses}>
+                <IconSettings2 size={20} className="shrink-0" />
+                <span className="paragraph-small-medium">{translate('common.preferences.title')}</span>
+              </TabsTrigger>
+
+              {isOwner && whitelabel?.id === 1 && (
+                <TabsTrigger value={AccountSectionType.TOKEN} className={tabTriggerClasses}>
+                  <IconKey size={20} className="shrink-0" />
+                  <span className="paragraph-small-medium">{translate('common.account.token.title')}</span>
+                </TabsTrigger>
+              )}
+
+              {isOwner && (
+                <TabsTrigger value={AccountSectionType.SECURITY} className={tabTriggerClasses}>
+                  <IconLock size={20} className="shrink-0" />
+                  <span className="paragraph-small-medium">{translate('common.account.security.title')}</span>
+                </TabsTrigger>
+              )}
+            </div>
+          </TabsList>
+
+          <div className="w-full flex-1 min-h-0 lg:h-full overflow-hidden lg:overflow-visible relative flex flex-col">
+            <TabsContent value={AccountSectionType.PREFERENCES} className="h-full! relative overflow-hidden">
+              <PreferencesSection onClose={close} />
+            </TabsContent>
+
+            {isOwner && (
+              <TabsContent value={AccountSectionType.TOKEN} className="h-full! relative overflow-hidden">
+                <TokenSection />
+              </TabsContent>
+            )}
+
+            {isOwner && (
+              <>
+                <TabsContent value={AccountSectionType.SECURITY} className="h-full! relative overflow-hidden">
+                  <SecuritySection
+                    setActiveSection={setActiveSection}
+                    onClose={close}
+                    onDeleteAccount={handleDeleteAccount}
+                  />
+                </TabsContent>
+
+                <TabsContent value={AccountSectionType.CHANGE_PASSWORD} className="h-full! relative overflow-hidden">
+                  <ChangePasswordSection onBack={() => setActiveSection(AccountSectionType.SECURITY)} />
+                </TabsContent>
+              </>
+            )}
+          </div>
+        </Tabs>
+      </DialogContent>
+    </Dialog>
+  );
+}