@greatapps/common 1.1.218 → 1.1.221

package/src/components/account/ConfigurationsMyAccountModal.tsx

@@ -1,150 +1,150 @@
-'use client';
-
-import { Lock, Settings2, User, X } from 'lucide-react';
-import { Dialog, DialogContent, DialogHeader, DialogTitle } from '../ui/overlay/Dialog';
-import { Tabs, TabsList, TabsTrigger, TabsContent } from '../ui/data-display/Tabs';
-import { Button } from '../ui/buttons/Button';
-import { cn } from '../../infra/utils/clsx';
-import { AccountSectionType } from '../../enums/AccountSectionType';
-import { MyProfileSection } from './sections/MyProfileSection';
-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';
-
-export default function ConfigurationsMyAccountModal() {
-  const {
-    activeModal,
-    config,
-    initialSection,
-    openDeleteAccount,
-    openIsntPossibleDelete,
-    close,
-  } = useAccountModals();
-
-  const open = activeModal === 'configurations';
-  const { hasActiveSubscription } = config;
-
-  const isMobile = useIsMobile();
-  const { activeSection, setActiveSection } = useConfigurationsModal({
-    isOpen: open,
-    initialSection,
-  });
-
-  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! 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}
-          >
-            <X 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.MY_PROFILE} className={tabTriggerClasses}>
-                <User size={20} className="shrink-0" />
-                <span className="paragraph-small-medium">Meu perfil</span>
-              </TabsTrigger>
-
-              <TabsTrigger value={AccountSectionType.PREFERENCES} className={tabTriggerClasses}>
-                <Settings2 size={20} className="shrink-0" />
-                <span className="paragraph-small-medium">Preferências</span>
-              </TabsTrigger>
-
-              <TabsTrigger value={AccountSectionType.SECURITY} className={tabTriggerClasses}>
-                <Lock 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">
-            <TabsContent value={AccountSectionType.MY_PROFILE} className="h-full! relative overflow-hidden">
-              <MyProfileSection onClose={close} />
-            </TabsContent>
-
-            <TabsContent value={AccountSectionType.SECURITY} className="h-full! relative overflow-hidden">
-              <SecuritySection
-                setActiveSection={setActiveSection}
-                onClose={close}
-                hasActiveSubscription={hasActiveSubscription}
-                onDeleteAccount={handleDeleteAccount}
-              />
-            </TabsContent>
-
-            <TabsContent value={AccountSectionType.CHANGE_PASSWORD} className="h-full! relative overflow-hidden">
-              <ChangePasswordSection onBack={() => setActiveSection(AccountSectionType.SECURITY)} />
-            </TabsContent>
-
-            <TabsContent value={AccountSectionType.PREFERENCES} className="h-full! relative overflow-hidden">
-              <PreferencesSection onClose={close} />
-            </TabsContent>
-          </div>
-        </Tabs>
-      </DialogContent>
-    </Dialog>
-  );
-}
+'use client';
+
+import { IconLock, IconSettings2, IconUser, 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 { Button } from '../ui/buttons/Button';
+import { cn } from '../../infra/utils/clsx';
+import { AccountSectionType } from '../../enums/AccountSectionType';
+import { MyProfileSection } from './sections/MyProfileSection';
+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';
+
+export default function ConfigurationsMyAccountModal() {
+  const {
+    activeModal,
+    config,
+    initialSection,
+    openDeleteAccount,
+    openIsntPossibleDelete,
+    close,
+  } = useAccountModals();
+
+  const open = activeModal === 'configurations';
+  const { hasActiveSubscription } = config;
+
+  const isMobile = useIsMobile();
+  const { activeSection, setActiveSection } = useConfigurationsModal({
+    isOpen: open,
+    initialSection,
+  });
+
+  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! 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.MY_PROFILE} className={tabTriggerClasses}>
+                <IconUser size={20} className="shrink-0" />
+                <span className="paragraph-small-medium">Meu perfil</span>
+              </TabsTrigger>
+
+              <TabsTrigger value={AccountSectionType.PREFERENCES} className={tabTriggerClasses}>
+                <IconSettings2 size={20} className="shrink-0" />
+                <span className="paragraph-small-medium">Preferências</span>
+              </TabsTrigger>
+
+              <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">
+            <TabsContent value={AccountSectionType.MY_PROFILE} className="h-full! relative overflow-hidden">
+              <MyProfileSection onClose={close} />
+            </TabsContent>
+
+            <TabsContent value={AccountSectionType.SECURITY} className="h-full! relative overflow-hidden">
+              <SecuritySection
+                setActiveSection={setActiveSection}
+                onClose={close}
+                hasActiveSubscription={hasActiveSubscription}
+                onDeleteAccount={handleDeleteAccount}
+              />
+            </TabsContent>
+
+            <TabsContent value={AccountSectionType.CHANGE_PASSWORD} className="h-full! relative overflow-hidden">
+              <ChangePasswordSection onBack={() => setActiveSection(AccountSectionType.SECURITY)} />
+            </TabsContent>
+
+            <TabsContent value={AccountSectionType.PREFERENCES} className="h-full! relative overflow-hidden">
+              <PreferencesSection onClose={close} />
+            </TabsContent>
+          </div>
+        </Tabs>
+      </DialogContent>
+    </Dialog>
+  );
+}

package/src/components/account/ConfirmDeleteAccountModal.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import { TriangleAlert } from 'lucide-react';
+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';
@@ -29,7 +29,7 @@ export default function ConfirmDeleteAccountModal() {
           </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} />
+            <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>{' '}

package/src/components/account/ConfirmGlobalPreferencesModal.tsx

@@ -1,66 +1,66 @@
-'use client';
-
-import { TriangleAlert } from 'lucide-react';
-import { Button } from '../ui/buttons/Button';
-import {
-  Dialog,
-  DialogContent,
-  DialogHeader,
-  DialogTitle,
-  DialogDescription,
-} from '../ui/overlay/Dialog';
-import { Separator } from '../ui/data-display/Separator';
-
-interface ConfirmGlobalPreferencesModalProps {
-  open: boolean;
-  onConfirm: () => void;
-  onCancel: () => void;
-}
-
-export default function ConfirmGlobalPreferencesModal({
-  open,
-  onConfirm,
-  onCancel,
-}: ConfirmGlobalPreferencesModalProps) {
-  return (
-    <Dialog open={open} onOpenChange={onCancel}>
-      <DialogContent className="flex flex-col p-0 gap-0 md:w-[386px]! lg:w-[386px]! max-w-[386px]! max-[386px]:w-[calc(100%-32px)]">
-        <DialogHeader className="sr-only">
-          <DialogTitle>Alterar preferências globais</DialogTitle>
-          <DialogDescription>
-            Confirmação de alteração de preferências globais da conta
-          </DialogDescription>
-        </DialogHeader>
-
-        <div className="flex flex-col gap-3 p-5">
-          <div className="flex items-center justify-center bg-gray-50 rounded-lg size-10">
-            <TriangleAlert size={24} className="text-gray-950" />
-          </div>
-          <div className="flex flex-col gap-2">
-            <span className="paragraph-medium-semibold text-gray-950">
-              Alterar preferências globais
-            </span>
-            <span className="paragraph-small-regular text-gray-600">
-              Você está alterando configurações que impactam{' '}
-              <span className="paragraph-small-semibold text-gray-950">
-                todos os usuários da conta
-              </span>
-              . Deseja confirmar?
-            </span>
-          </div>
-        </div>
-
-        <Separator className="w-full" />
-
-        <div className="flex items-center gap-2 p-5">
-          <Button onClick={onConfirm} className="h-10!">
-            Confirmar
-          </Button>
-          <Button variant="secondary" onClick={onCancel} className="h-10!">
-            Cancelar
-          </Button>
-        </div>
-      </DialogContent>
-    </Dialog>
-  );
-}
+'use client';
+
+import { IconAlertTriangle } from '@tabler/icons-react';
+import { Button } from '../ui/buttons/Button';
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+  DialogDescription,
+} from '../ui/overlay/Dialog';
+import { Separator } from '../ui/data-display/Separator';
+
+interface ConfirmGlobalPreferencesModalProps {
+  open: boolean;
+  onConfirm: () => void;
+  onCancel: () => void;
+}
+
+export default function ConfirmGlobalPreferencesModal({
+  open,
+  onConfirm,
+  onCancel,
+}: ConfirmGlobalPreferencesModalProps) {
+  return (
+    <Dialog open={open} onOpenChange={onCancel}>
+      <DialogContent className="flex flex-col p-0 gap-0 md:w-[386px]! lg:w-[386px]! max-w-[386px]! max-[386px]:w-[calc(100%-32px)]">
+        <DialogHeader className="sr-only">
+          <DialogTitle>Alterar preferências globais</DialogTitle>
+          <DialogDescription>
+            Confirmação de alteração de preferências globais da conta
+          </DialogDescription>
+        </DialogHeader>
+
+        <div className="flex flex-col gap-3 p-5">
+          <div className="flex items-center justify-center bg-gray-50 rounded-lg size-10">
+            <IconAlertTriangle size={24} className="text-gray-950" />
+          </div>
+          <div className="flex flex-col gap-2">
+            <span className="paragraph-medium-semibold text-gray-950">
+              Alterar preferências globais
+            </span>
+            <span className="paragraph-small-regular text-gray-600">
+              Você está alterando configurações que impactam{' '}
+              <span className="paragraph-small-semibold text-gray-950">
+                todos os usuários da conta
+              </span>
+              . Deseja confirmar?
+            </span>
+          </div>
+        </div>
+
+        <Separator className="w-full" />
+
+        <div className="flex items-center gap-2 p-5">
+          <Button onClick={onConfirm} className="h-10!">
+            Confirmar
+          </Button>
+          <Button variant="secondary" onClick={onCancel} className="h-10!">
+            Cancelar
+          </Button>
+        </div>
+      </DialogContent>
+    </Dialog>
+  );
+}

package/src/components/account/DeleteAccountModal.tsx

@@ -1,7 +1,7 @@
 'use client';
 
 import { useState, useCallback } from 'react';
-import { Lock, TriangleAlert } from 'lucide-react';
+import { IconLock, IconAlertTriangle } from '@tabler/icons-react';
 import { toast } from 'sonner';
 import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle } from '../ui/overlay/Dialog';
 import { Button } from '../ui/buttons/Button';
@@ -63,7 +63,7 @@ export default function DeleteAccountModal() {
           <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" />
+                <IconAlertTriangle size={20} className="text-red-500" />
               </div>
               <DialogTitle>Excluir conta</DialogTitle>
               <DialogDescription className="paragraph-small-regular">
@@ -102,7 +102,7 @@ export default function DeleteAccountModal() {
               label="Senha"
               type="password"
               placeholder="Informe sua senha"
-              leftIcon={Lock}
+              leftIcon={IconLock}
               value={password}
               onChange={(e) => setPassword(e.target.value)}
               classnameContainer="h-10!"

package/src/components/account/DisableTwoFactorAuthModal.tsx

@@ -1,86 +1,86 @@
-'use client';
-
-import { ShieldCheck } from 'lucide-react';
-import { Button } from '../ui/buttons/Button';
-import {
-  Dialog,
-  DialogContent,
-  DialogDescription,
-  DialogHeader,
-  DialogTitle,
-} from '../ui/overlay/Dialog';
-import { InputOTP, InputOTPGroup, InputOTPSlot } from '../ui/form/InputOtp';
-import useDisableTwoFactorAuthForm from './hooks/useDisableTwoFactorAuthForm';
-
-interface DisableTwoFactorAuthModalProps {
-  open: boolean;
-  onClose: () => void;
-  onSuccess?: () => void;
-}
-
-export default function DisableTwoFactorAuthModal({
-  open,
-  onClose,
-  onSuccess,
-}: DisableTwoFactorAuthModalProps) {
-  const { code, setCode, isValid, isLoading, handleClose, handleSubmit } =
-    useDisableTwoFactorAuthForm({ onClose, onSuccess });
-
-  return (
-    <Dialog open={open} onOpenChange={handleClose}>
-      <DialogContent overlayClassName="z-[1010]" className="z-[1011] flex flex-col p-0 gap-0 max-w-full! border-0 rounded-t-2xl rounded-b-none h-dvh top-0! bottom-0! left-0! right-0! translate-x-0! translate-y-0! lg:max-w-117.5! lg:h-auto! 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%]!">
-        <form
-          onSubmit={(e) => {
-            e.preventDefault();
-            handleSubmit();
-          }}
-          className="flex flex-col flex-1 lg:flex-none"
-        >
-          <div className="flex flex-col gap-4 lg:gap-5 p-4 lg:p-5 flex-1 lg:flex-none">
-            <div className="flex items-center justify-center w-fit bg-gray-50 rounded-lg p-2">
-              <ShieldCheck size={20} className="text-gray-600" />
-            </div>
-            <DialogHeader className="p-0 gap-2">
-              <DialogTitle className="paragraph-medium-semibold text-gray-950">
-                Desabilitar autenticação 2FA
-              </DialogTitle>
-              <DialogDescription className="paragraph-small-regular text-gray-600">
-                Informe o código de 6 dígitos do seu aplicativo autenticador para confirmar a
-                desativação.
-              </DialogDescription>
-            </DialogHeader>
-
-            <div className="flex flex-col gap-2">
-              <span className="paragraph-small-medium text-gray-700">Código do autenticador</span>
-              <InputOTP maxLength={6} value={code} onChange={setCode}>
-                <InputOTPGroup className="gap-2">
-                  {Array.from({ length: 6 }).map((_, i) => (
-                    <InputOTPSlot
-                      key={i}
-                      index={i}
-                      className="w-11! lg:w-12! h-13! lg:h-14! rounded-lg! text-lg border-gray-200"
-                    />
-                  ))}
-                </InputOTPGroup>
-              </InputOTP>
-            </div>
-          </div>
-
-          <div className="flex flex-row items-center gap-2 p-4 lg:p-5 border-t border-gray-200 mt-auto lg:mt-0">
-            <Button className="h-10! flex-1" disabled={!isValid || isLoading} type="submit">
-              {isLoading ? 'Desabilitando...' : 'Desabilitar 2FA'}
-            </Button>
-            <Button
-              variant="secondary"
-              className="h-10! flex-1"
-              type="button"
-              onClick={handleClose}
-            >
-              Cancelar
-            </Button>
-          </div>
-        </form>
-      </DialogContent>
-    </Dialog>
-  );
-}
+'use client';
+
+import { IconShieldCheck } from '@tabler/icons-react';
+import { Button } from '../ui/buttons/Button';
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle,
+} from '../ui/overlay/Dialog';
+import { InputOTP, InputOTPGroup, InputOTPSlot } from '../ui/form/InputOtp';
+import useDisableTwoFactorAuthForm from './hooks/useDisableTwoFactorAuthForm';
+
+interface DisableTwoFactorAuthModalProps {
+  open: boolean;
+  onClose: () => void;
+  onSuccess?: () => void;
+}
+
+export default function DisableTwoFactorAuthModal({
+  open,
+  onClose,
+  onSuccess,
+}: DisableTwoFactorAuthModalProps) {
+  const { code, setCode, isValid, isLoading, handleClose, handleSubmit } =
+    useDisableTwoFactorAuthForm({ onClose, onSuccess });
+
+  return (
+    <Dialog open={open} onOpenChange={handleClose}>
+      <DialogContent overlayClassName="z-[1010]" className="z-[1011] flex flex-col p-0 gap-0 max-w-full! border-0 rounded-t-2xl rounded-b-none h-dvh top-0! bottom-0! left-0! right-0! translate-x-0! translate-y-0! lg:max-w-117.5! lg:h-auto! 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%]!">
+        <form
+          onSubmit={(e) => {
+            e.preventDefault();
+            handleSubmit();
+          }}
+          className="flex flex-col flex-1 lg:flex-none"
+        >
+          <div className="flex flex-col gap-4 lg:gap-5 p-4 lg:p-5 flex-1 lg:flex-none">
+            <div className="flex items-center justify-center w-fit bg-gray-50 rounded-lg p-2">
+              <IconShieldCheck size={20} className="text-gray-600" />
+            </div>
+            <DialogHeader className="p-0 gap-2">
+              <DialogTitle className="paragraph-medium-semibold text-gray-950">
+                Desabilitar autenticação 2FA
+              </DialogTitle>
+              <DialogDescription className="paragraph-small-regular text-gray-600">
+                Informe o código de 6 dígitos do seu aplicativo autenticador para confirmar a
+                desativação.
+              </DialogDescription>
+            </DialogHeader>
+
+            <div className="flex flex-col gap-2">
+              <span className="paragraph-small-medium text-gray-700">Código do autenticador</span>
+              <InputOTP maxLength={6} value={code} onChange={setCode}>
+                <InputOTPGroup className="gap-2">
+                  {Array.from({ length: 6 }).map((_, i) => (
+                    <InputOTPSlot
+                      key={i}
+                      index={i}
+                      className="w-11! lg:w-12! h-13! lg:h-14! rounded-lg! text-lg border-gray-200"
+                    />
+                  ))}
+                </InputOTPGroup>
+              </InputOTP>
+            </div>
+          </div>
+
+          <div className="flex flex-row items-center gap-2 p-4 lg:p-5 border-t border-gray-200 mt-auto lg:mt-0">
+            <Button className="h-10! flex-1" disabled={!isValid || isLoading} type="submit">
+              {isLoading ? 'Desabilitando...' : 'Desabilitar 2FA'}
+            </Button>
+            <Button
+              variant="secondary"
+              className="h-10! flex-1"
+              type="button"
+              onClick={handleClose}
+            >
+              Cancelar
+            </Button>
+          </div>
+        </form>
+      </DialogContent>
+    </Dialog>
+  );
+}