@greatapps/common 1.1.127 → 1.1.129

package/package.json

@@ -1,84 +1,84 @@
-{
-  "name": "@greatapps/common",
-  "version": "1.1.127",
-  "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"
-    }
-  },
-  "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",
-    "@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",
-    "lucide-react": "^0.575.0",
-    "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.129",
+  "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"
+    }
+  },
+  "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",
+    "@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",
+    "lucide-react": "^0.575.0",
+    "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/ConfirmDeleteAccountModal.tsx

@@ -1,55 +1,55 @@
-'use client';
-
-import { TriangleAlert } from 'lucide-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">
-            <TriangleAlert 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 { TriangleAlert } from 'lucide-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">
+            <TriangleAlert 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>
+  );
+}

package/src/components/account/DeleteAccountModal.tsx

@@ -1,130 +1,130 @@
-'use client';
-
-import { useState, useCallback } from 'react';
-import { Lock, TriangleAlert } from 'lucide-react';
-import { toast } from 'sonner';
-import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle } from '../ui/overlay/Dialog';
-import { Button } from '../ui/buttons/Button';
-import { FormField } from '../ui/form/FormField';
-import { SelectField } from '../ui/form/SelectField';
-import { TextAreaField } from '../ui/form/TextAreaField';
-import { Toast } from '../ui/feedback/Toast';
-import usePasswordVisibility from '../../hooks/usePasswordVisibility';
-import { useAccountModals } from '../../store/useAccountModals';
-import { AccountSectionType } from '../../enums/AccountSectionType';
-
-const REASON_OPTIONS = [
-  { value: 'sem-funcao', label: 'A ferramenta não possui uma função que eu preciso' },
-  { value: 'problemas', label: 'Encontrei problemas técnicos ou erros no sistema' },
-  { value: 'suporte', label: 'Tive problemas com o suporte ou atendimento' },
-  { value: 'demora', label: 'As atualizações demoram mais do que o esperado' },
-  { value: 'temporario', label: 'O cancelamento é temporário' },
-  { value: 'outro', label: 'Outro motivo' },
-];
-
-export default function DeleteAccountModal() {
-  const { activeModal, pagesCount, openConfigurations, openConfirmDelete, close } = useAccountModals();
-  const open = activeModal === 'deleteAccount';
-
-  const [reason, setReason] = useState('');
-  const [description, setDescription] = useState('');
-  const [password, setPassword] = useState('');
-  const { showPassword, togglePassword } = usePasswordVisibility();
-
-  const isFormValid = Boolean(reason && description && password);
-
-  const resetForm = useCallback(() => {
-    setReason('');
-    setDescription('');
-    setPassword('');
-  }, []);
-
-  const handleClose = () => {
-    resetForm();
-    openConfigurations(AccountSectionType.SECURITY);
-  };
-
-  const handleDelete = (e: React.FormEvent) => {
-    e.preventDefault();
-    if (!isFormValid) {
-      toast.custom((t) => (
-        <Toast variant="error" message="Preencha todos os campos obrigatórios" toastId={t} />
-      ));
-      return;
-    }
-    resetForm();
-    openConfirmDelete(pagesCount);
-  };
-
-  return (
-    <Dialog open={open} onOpenChange={handleClose}>
-      <DialogContent className="flex flex-col p-0 gap-0 max-w-full! 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:max-w-lg! lg:h-auto! lg:max-h-[90vh] lg:rounded-lg lg:border lg:top-[50%]! lg:left-[50%]! lg:right-auto! lg:bottom-auto! lg:translate-x-[-50%]! lg:translate-y-[-50%]! overflow-y-auto">
-        <form onSubmit={handleDelete} className="flex flex-col flex-1 lg:flex-none">
-          <div className="flex flex-col gap-6 p-4 lg:p-6 flex-1 lg:flex-none">
-            <DialogHeader className="p-0">
-              <div className="flex items-center justify-center w-fit bg-red-50 rounded-lg p-2.5 mb-5">
-                <TriangleAlert size={20} className="text-red-500" />
-              </div>
-              <DialogTitle>Excluir conta</DialogTitle>
-              <DialogDescription className="paragraph-small-regular">
-                Esta ação é <span className="font-semibold text-gray-950">irreversível</span>. Ao
-                confirmar, sua conta e todos os seus dados serão excluídos.
-              </DialogDescription>
-            </DialogHeader>
-
-            <SelectField
-              label="Motivo do cancelamento"
-              required
-              placeholder="Selecione"
-              options={REASON_OPTIONS}
-              value={reason}
-              onChange={(value) => setReason(value as string)}
-              className="h-10!"
-            />
-
-            <div>
-              <TextAreaField
-                label="Descreva o que levou a tomar essa decisão"
-                required
-                placeholder="Explique sua decisão..."
-                value={description}
-                onChange={(e) => setDescription(e.target.value)}
-                rows={4}
-                maxLength={400}
-              />
-              <span className="paragraph-xsmall-medium text-gray-600 text-left mt-1 block">
-                {description.length}/400 caracteres
-              </span>
-            </div>
-
-            <FormField
-              className="text-gray-600"
-              label="Senha"
-              type="password"
-              placeholder="Informe sua senha"
-              leftIcon={Lock}
-              value={password}
-              onChange={(e) => setPassword(e.target.value)}
-              classnameContainer="h-10!"
-              showPassword={showPassword}
-              onTogglePassword={togglePassword}
-            />
-          </div>
-
-          <div className="flex flex-row items-center gap-2 p-4 lg:p-6 border-t border-gray-200 bg-white mt-auto lg:mt-0">
-            <Button
-              variant="default"
-              className="h-10 flex-1 bg-gray-950 text-white hover:bg-gray-800"
-              type="submit"
-            >
-              Excluir conta
-            </Button>
-            <Button variant="secondary" className="h-10 flex-1" type="button" onClick={handleClose}>
-              Fechar
-            </Button>
-          </div>
-        </form>
-      </DialogContent>
-    </Dialog>
-  );
-}
+'use client';
+
+import { useState, useCallback } from 'react';
+import { Lock, TriangleAlert } from 'lucide-react';
+import { toast } from 'sonner';
+import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle } from '../ui/overlay/Dialog';
+import { Button } from '../ui/buttons/Button';
+import { FormField } from '../ui/form/FormField';
+import { SelectField } from '../ui/form/SelectField';
+import { TextAreaField } from '../ui/form/TextAreaField';
+import { Toast } from '../ui/feedback/Toast';
+import usePasswordVisibility from '../../hooks/usePasswordVisibility';
+import { useAccountModals } from '../../store/useAccountModals';
+import { AccountSectionType } from '../../enums/AccountSectionType';
+
+const REASON_OPTIONS = [
+  { value: 'sem-funcao', label: 'A ferramenta não possui uma função que eu preciso' },
+  { value: 'problemas', label: 'Encontrei problemas técnicos ou erros no sistema' },
+  { value: 'suporte', label: 'Tive problemas com o suporte ou atendimento' },
+  { value: 'demora', label: 'As atualizações demoram mais do que o esperado' },
+  { value: 'temporario', label: 'O cancelamento é temporário' },
+  { value: 'outro', label: 'Outro motivo' },
+];
+
+export default function DeleteAccountModal() {
+  const { activeModal, pagesCount, openConfigurations, openConfirmDelete, close } = useAccountModals();
+  const open = activeModal === 'deleteAccount';
+
+  const [reason, setReason] = useState('');
+  const [description, setDescription] = useState('');
+  const [password, setPassword] = useState('');
+  const { showPassword, togglePassword } = usePasswordVisibility();
+
+  const isFormValid = Boolean(reason && description && password);
+
+  const resetForm = useCallback(() => {
+    setReason('');
+    setDescription('');
+    setPassword('');
+  }, []);
+
+  const handleClose = () => {
+    resetForm();
+    openConfigurations(AccountSectionType.SECURITY);
+  };
+
+  const handleDelete = (e: React.FormEvent) => {
+    e.preventDefault();
+    if (!isFormValid) {
+      toast.custom((t) => (
+        <Toast variant="error" message="Preencha todos os campos obrigatórios" toastId={t} />
+      ));
+      return;
+    }
+    resetForm();
+    openConfirmDelete(pagesCount);
+  };
+
+  return (
+    <Dialog open={open} onOpenChange={handleClose}>
+      <DialogContent className="flex flex-col p-0 gap-0 max-w-full! 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:max-w-lg! lg:h-auto! lg:max-h-[90vh] lg:rounded-lg lg:border lg:top-[50%]! lg:left-[50%]! lg:right-auto! lg:bottom-auto! lg:translate-x-[-50%]! lg:translate-y-[-50%]! overflow-y-auto">
+        <form onSubmit={handleDelete} className="flex flex-col flex-1 lg:flex-none">
+          <div className="flex flex-col gap-6 p-4 lg:p-6 flex-1 lg:flex-none">
+            <DialogHeader className="p-0">
+              <div className="flex items-center justify-center w-fit bg-red-50 rounded-lg p-2.5 mb-5">
+                <TriangleAlert size={20} className="text-red-500" />
+              </div>
+              <DialogTitle>Excluir conta</DialogTitle>
+              <DialogDescription className="paragraph-small-regular">
+                Esta ação é <span className="font-semibold text-gray-950">irreversível</span>. Ao
+                confirmar, sua conta e todos os seus dados serão excluídos.
+              </DialogDescription>
+            </DialogHeader>
+
+            <SelectField
+              label="Motivo do cancelamento"
+              required
+              placeholder="Selecione"
+              options={REASON_OPTIONS}
+              value={reason}
+              onChange={(value) => setReason(value as string)}
+              className="h-10!"
+            />
+
+            <div>
+              <TextAreaField
+                label="Descreva o que levou a tomar essa decisão"
+                required
+                placeholder="Explique sua decisão..."
+                value={description}
+                onChange={(e) => setDescription(e.target.value)}
+                rows={4}
+                maxLength={400}
+              />
+              <span className="paragraph-xsmall-medium text-gray-600 text-left mt-1 block">
+                {description.length}/400 caracteres
+              </span>
+            </div>
+
+            <FormField
+              className="text-gray-600"
+              label="Senha"
+              type="password"
+              placeholder="Informe sua senha"
+              leftIcon={Lock}
+              value={password}
+              onChange={(e) => setPassword(e.target.value)}
+              classnameContainer="h-10!"
+              showPassword={showPassword}
+              onTogglePassword={togglePassword}
+            />
+          </div>
+
+          <div className="flex flex-row items-center gap-2 p-4 lg:p-6 border-t border-gray-200 bg-white mt-auto lg:mt-0">
+            <Button
+              variant="default"
+              className="h-10 flex-1 bg-gray-950 text-white hover:bg-gray-800"
+              type="submit"
+            >
+              Excluir conta
+            </Button>
+            <Button variant="secondary" className="h-10 flex-1" type="button" onClick={handleClose}>
+              Fechar
+            </Button>
+          </div>
+        </form>
+      </DialogContent>
+    </Dialog>
+  );
+}

package/src/components/account/IsntPossibleDeleteAccountModal.tsx

@@ -1,49 +1,49 @@
-'use client';
-
-import { TriangleAlert } from 'lucide-react';
-import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle } from '../ui/overlay/Dialog';
-import { Button } from '../ui/buttons/Button';
-import { useAccountModals } from '../../store/useAccountModals';
-
-export default function IsntPossibleDeleteAccountModal() {
-  const { activeModal, close, config } = useAccountModals();
-  const { onGoToSubscription } = config;
-  const open = activeModal === 'isntPossibleDelete';
-
-  return (
-    <Dialog open={open} onOpenChange={close}>
-      <DialogContent className="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">
-          <div className="flex items-center justify-center w-fit bg-red-50 rounded-lg p-2.5">
-            <TriangleAlert size={20} className="text-red-500" />
-          </div>
-          <DialogHeader className="p-0 gap-2">
-            <DialogTitle className="paragraph-medium-semibold text-gray-950">
-              Não é possível excluir a conta
-            </DialogTitle>
-            <DialogDescription className="paragraph-small-regular text-gray-600">
-              Você tem uma assinatura ativa. Para excluir sua conta,{' '}
-              <span className="font-semibold text-gray-950">primeiro cancele a assinatura</span> na
-              página Assinatura e depois tente novamente.
-            </DialogDescription>
-          </DialogHeader>
-        </div>
-
-        <div className="h-px bg-gray-200 -mx-6" />
-
-        <div className="flex flex-row items-center gap-2">
-          <Button className="h-10 flex-1" onClick={close}>
-            Ok, entendi
-          </Button>
-          <Button
-            variant="secondary"
-            className="h-10 flex-1"
-            onClick={onGoToSubscription ?? close}
-          >
-            Ir para assinatura
-          </Button>
-        </div>
-      </DialogContent>
-    </Dialog>
-  );
-}
+'use client';
+
+import { TriangleAlert } from 'lucide-react';
+import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle } from '../ui/overlay/Dialog';
+import { Button } from '../ui/buttons/Button';
+import { useAccountModals } from '../../store/useAccountModals';
+
+export default function IsntPossibleDeleteAccountModal() {
+  const { activeModal, close, config } = useAccountModals();
+  const { onGoToSubscription } = config;
+  const open = activeModal === 'isntPossibleDelete';
+
+  return (
+    <Dialog open={open} onOpenChange={close}>
+      <DialogContent className="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">
+          <div className="flex items-center justify-center w-fit bg-red-50 rounded-lg p-2.5">
+            <TriangleAlert size={20} className="text-red-500" />
+          </div>
+          <DialogHeader className="p-0 gap-2">
+            <DialogTitle className="paragraph-medium-semibold text-gray-950">
+              Não é possível excluir a conta
+            </DialogTitle>
+            <DialogDescription className="paragraph-small-regular text-gray-600">
+              Você tem uma assinatura ativa. Para excluir sua conta,{' '}
+              <span className="font-semibold text-gray-950">primeiro cancele a assinatura</span> na
+              página Assinatura e depois tente novamente.
+            </DialogDescription>
+          </DialogHeader>
+        </div>
+
+        <div className="h-px bg-gray-200 -mx-6" />
+
+        <div className="flex flex-row items-center gap-2">
+          <Button className="h-10 flex-1" onClick={close}>
+            Ok, entendi
+          </Button>
+          <Button
+            variant="secondary"
+            className="h-10 flex-1"
+            onClick={onGoToSubscription ?? close}
+          >
+            Ir para assinatura
+          </Button>
+        </div>
+      </DialogContent>
+    </Dialog>
+  );
+}