@greatapps/common 1.1.382 → 1.1.384

package/package.json

@@ -1,89 +1,89 @@
-{
-  "name": "@greatapps/common",
-  "version": "1.1.382",
-  "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"
-    }
-  },
-  "files": [
-    "dist",
-    "src"
-  ],
-  "scripts": {
-    "build": "tsup",
-    "dev": "tsup --watch",
-    "typecheck": "tsc --noEmit"
-  },
-  "keywords": [],
-  "author": "",
-  "license": "ISC",
-  "dependencies": {
-    "@greatapps/cache": "^2.0.1",
-    "@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.40.0",
-    "@tanstack/query-broadcast-client-experimental": "^5.95.2",
-    "@tanstack/react-query-persist-client": "^5.95.2",
-    "axios": "^1.13.6",
-    "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",
-    "server-only": "^0.0.1",
-    "sonner": ">=2.0.0",
-    "tailwind-merge": "^3.5.0",
-    "zod": "^4.3.6"
-  },
-  "devDependencies": {
-    "@hookform/resolvers": "^5.2.2",
-    "@tanstack/react-query": "^5.95.2",
-    "@tanstack/react-query-devtools": "^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",
-    "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/react-query": ">=5.0.0",
-    "next": ">=16.0.0",
-    "react": ">=19.0.0",
-    "react-dom": ">=19.0.0",
-    "react-hook-form": ">=7.0.0",
-    "sonner": ">=2.0.0",
-    "zustand": ">=4.0.0"
-  }
-}
+{
+  "name": "@greatapps/common",
+  "version": "1.1.384",
+  "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"
+    }
+  },
+  "files": [
+    "dist",
+    "src"
+  ],
+  "scripts": {
+    "build": "tsup",
+    "dev": "tsup --watch",
+    "typecheck": "tsc --noEmit"
+  },
+  "keywords": [],
+  "author": "",
+  "license": "ISC",
+  "dependencies": {
+    "@greatapps/cache": "^2.0.1",
+    "@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.40.0",
+    "@tanstack/query-broadcast-client-experimental": "^5.95.2",
+    "@tanstack/react-query-persist-client": "^5.95.2",
+    "axios": "^1.13.6",
+    "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",
+    "server-only": "^0.0.1",
+    "sonner": ">=2.0.0",
+    "tailwind-merge": "^3.5.0",
+    "zod": "^4.3.6"
+  },
+  "devDependencies": {
+    "@hookform/resolvers": "^5.2.2",
+    "@tanstack/react-query": "^5.95.2",
+    "@tanstack/react-query-devtools": "^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",
+    "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/react-query": ">=5.0.0",
+    "next": ">=16.0.0",
+    "react": ">=19.0.0",
+    "react-dom": ">=19.0.0",
+    "react-hook-form": ">=7.0.0",
+    "sonner": ">=2.0.0",
+    "zustand": ">=4.0.0"
+  }
+}

package/src/components/account/AccountModals.tsx

@@ -1,17 +1,17 @@
-'use client';
-
-import ConfigurationsMyAccountModal from './ConfigurationsMyAccountModal';
-import DeleteAccountModal from './DeleteAccountModal';
-import IsntPossibleDeleteAccountModal from './IsntPossibleDeleteAccountModal';
-import ConfirmDeleteAccountModal from './ConfirmDeleteAccountModal';
-
-export default function AccountModals() {
-  return (
-    <>
-      <ConfigurationsMyAccountModal />
-      <DeleteAccountModal />
-      <IsntPossibleDeleteAccountModal />
-      <ConfirmDeleteAccountModal />
-    </>
-  );
-}
+'use client';
+
+import ConfigurationsMyAccountModal from './ConfigurationsMyAccountModal';
+import DeleteAccountModal from './DeleteAccountModal';
+import IsntPossibleDeleteAccountModal from './IsntPossibleDeleteAccountModal';
+import ConfirmDeleteAccountModal from './ConfirmDeleteAccountModal';
+
+export default function AccountModals() {
+  return (
+    <>
+      <ConfigurationsMyAccountModal />
+      <DeleteAccountModal />
+      <IsntPossibleDeleteAccountModal />
+      <ConfirmDeleteAccountModal />
+    </>
+  );
+}

package/src/components/account/ConfigurationsMyAccountModal.tsx

@@ -1,146 +1,146 @@
-'use client';
-
-import { IconLock, IconSettings2, IconX } from '@tabler/icons-react';
-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 { 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';
-
-export default function ConfigurationsMyAccountModal() {
-  const {
-    activeModal,
-    config,
-    openDeleteAccount,
-    openIsntPossibleDelete,
-    close,
-  } = useAccountModals();
-
-  const open = activeModal === 'configurations';
-  const { hasActiveSubscription } = config;
-
-  const { user } = useAuth();
-  const isOwnerOrAdmin = user?.profile === UserProfile.owner || user?.profile === UserProfile.admin;
-  const isMobile = useIsMobile();
-  const { activeSection, setActiveSection } = useConfigurationsModal({
-    isOpen: open,
-  });
-
-  const handleDeleteAccount = () => {
-    close();
-    if (hasActiveSubscription) {
-      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>Configurações</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">Configurações</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">
-              Configurações
-            </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">Preferências</span>
-              </TabsTrigger>
-
-              {isOwnerOrAdmin && (
-                <TabsTrigger value={AccountSectionType.SECURITY} className={tabTriggerClasses}>
-                  <IconLock size={20} className="shrink-0" />
-                  <span className="paragraph-small-medium">Segurança</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>
-
-            {isOwnerOrAdmin && (
-              <>
-                <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 { IconLock, IconSettings2, IconX } from '@tabler/icons-react';
+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 { 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';
+
+export default function ConfigurationsMyAccountModal() {
+  const {
+    activeModal,
+    config,
+    openDeleteAccount,
+    openIsntPossibleDelete,
+    close,
+  } = useAccountModals();
+
+  const open = activeModal === 'configurations';
+  const { hasActiveSubscription } = config;
+
+  const { user } = useAuth();
+  const isOwnerOrAdmin = user?.profile === UserProfile.owner || user?.profile === UserProfile.admin;
+  const isMobile = useIsMobile();
+  const { activeSection, setActiveSection } = useConfigurationsModal({
+    isOpen: open,
+  });
+
+  const handleDeleteAccount = () => {
+    close();
+    if (hasActiveSubscription) {
+      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>Configurações</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">Configurações</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">
+              Configurações
+            </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">Preferências</span>
+              </TabsTrigger>
+
+              {isOwnerOrAdmin && (
+                <TabsTrigger value={AccountSectionType.SECURITY} className={tabTriggerClasses}>
+                  <IconLock size={20} className="shrink-0" />
+                  <span className="paragraph-small-medium">Segurança</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>
+
+            {isOwnerOrAdmin && (
+              <>
+                <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>
+  );
+}

package/src/components/account/ConfirmDeleteAccountModal.tsx

@@ -1,55 +1,55 @@
-'use client';
-
-import { IconAlertTriangle } from '@tabler/icons-react';
-import { toast } from 'sonner';
-import { Dialog, DialogContent, DialogHeader, DialogTitle } from '../ui/overlay/Dialog';
-import { Button } from '../ui/buttons/Button';
-import { Toast } from '../ui/feedback/Toast';
-import { useAccountModals } from '../../store/useAccountModals';
-
-export default function ConfirmDeleteAccountModal() {
-  const { activeModal, pagesCount, close } = useAccountModals();
-  const open = activeModal === 'confirmDelete';
-
-  const handleConfirm = () => {
-    toast.custom((t) => (
-      <Toast variant="success" message="Conta excluída com sucesso" toastId={t} />
-    ));
-    close();
-  };
-
-  return (
-    <Dialog open={open} onOpenChange={close}>
-      <DialogContent className="flex flex-col p-0 gap-0 max-w-[calc(100%-2rem)]! w-full rounded-lg border sm:max-w-[400px]! lg:max-w-[470px]! lg:top-[50%]! lg:left-[50%]! lg:right-auto! lg:bottom-auto! lg:translate-x-[-50%]! lg:translate-y-[-50%]!">
-        <div className="flex flex-col gap-5 p-4 lg:p-5">
-          <DialogHeader className="p-0">
-            <DialogTitle className="paragraph-medium-semibold text-gray-950">
-              Uma pena te ver ir!
-            </DialogTitle>
-          </DialogHeader>
-
-          <div className="bg-red-50 p-4 lg:p-5 rounded-lg flex items-center gap-4">
-            <IconAlertTriangle size={20} className="text-red-500 shrink-0" strokeWidth={2} />
-            <p className="paragraph-small-regular text-gray-600">
-              Todas suas{' '}
-              <span className="font-semibold text-gray-950">{pagesCount} páginas</span>{' '}
-              serão deletadas permanentemente. Essa ação é{' '}
-              <span className="font-semibold text-gray-950">irreversível!</span>
-            </p>
-          </div>
-        </div>
-
-        <div className="h-px bg-gray-200" />
-
-        <div className="flex items-center gap-2 p-4 lg:p-5">
-          <Button className="h-10 flex-1" onClick={close}>
-            Manter minha conta
-          </Button>
-          <Button variant="secondary" className="h-10! flex-1" onClick={handleConfirm}>
-            Excluir mesmo assim
-          </Button>
-        </div>
-      </DialogContent>
-    </Dialog>
-  );
-}
+'use client';
+
+import { IconAlertTriangle } from '@tabler/icons-react';
+import { toast } from 'sonner';
+import { Dialog, DialogContent, DialogHeader, DialogTitle } from '../ui/overlay/Dialog';
+import { Button } from '../ui/buttons/Button';
+import { Toast } from '../ui/feedback/Toast';
+import { useAccountModals } from '../../store/useAccountModals';
+
+export default function ConfirmDeleteAccountModal() {
+  const { activeModal, pagesCount, close } = useAccountModals();
+  const open = activeModal === 'confirmDelete';
+
+  const handleConfirm = () => {
+    toast.custom((t) => (
+      <Toast variant="success" message="Conta excluída com sucesso" toastId={t} />
+    ));
+    close();
+  };
+
+  return (
+    <Dialog open={open} onOpenChange={close}>
+      <DialogContent className="flex flex-col p-0 gap-0 max-w-[calc(100%-2rem)]! w-full rounded-lg border sm:max-w-[400px]! lg:max-w-[470px]! lg:top-[50%]! lg:left-[50%]! lg:right-auto! lg:bottom-auto! lg:translate-x-[-50%]! lg:translate-y-[-50%]!">
+        <div className="flex flex-col gap-5 p-4 lg:p-5">
+          <DialogHeader className="p-0">
+            <DialogTitle className="paragraph-medium-semibold text-gray-950">
+              Uma pena te ver ir!
+            </DialogTitle>
+          </DialogHeader>
+
+          <div className="bg-red-50 p-4 lg:p-5 rounded-lg flex items-center gap-4">
+            <IconAlertTriangle size={20} className="text-red-500 shrink-0" strokeWidth={2} />
+            <p className="paragraph-small-regular text-gray-600">
+              Todas suas{' '}
+              <span className="font-semibold text-gray-950">{pagesCount} páginas</span>{' '}
+              serão deletadas permanentemente. Essa ação é{' '}
+              <span className="font-semibold text-gray-950">irreversível!</span>
+            </p>
+          </div>
+        </div>
+
+        <div className="h-px bg-gray-200" />
+
+        <div className="flex items-center gap-2 p-4 lg:p-5">
+          <Button className="h-10 flex-1" onClick={close}>
+            Manter minha conta
+          </Button>
+          <Button variant="secondary" className="h-10! flex-1" onClick={handleConfirm}>
+            Excluir mesmo assim
+          </Button>
+        </div>
+      </DialogContent>
+    </Dialog>
+  );
+}