@greatapps/common 1.1.788 → 1.1.789

package/src/components/account/TwoFactorAuthModal.tsx

@@ -4,7 +4,6 @@ import { useTranslations } from 'next-intl';
 import { IconX, IconCopy, IconRefresh } from '@tabler/icons-react';
 import { Button } from '../ui/buttons/Button';
 import { Dialog, DialogContent, DialogHeader, DialogTitle } from '../ui/overlay/Dialog';
-import { DialogLayer } from '../ui/overlay/layers';
 import { Separator } from '../ui/data-display/Separator';
 import { InputOTP, InputOTPGroup, InputOTPSlot } from '../ui/form/InputOtp';
 import { REGEXP_ONLY_DIGITS } from 'input-otp';
@@ -42,86 +41,17 @@ export default function TwoFactorAuthModal({ open, onClose, onSuccess }: TwoFact
 
   if (step === 'recovery') {
     return (
-      <DialogLayer>
-        <Dialog open={open} onOpenChange={handleClose}>
-          <DialogContent
-            showCloseButton={false}
-            className="flex flex-col p-0 gap-0 max-w-full sm: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-[470px] 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%]"
-          >
-            <DialogHeader className="sr-only">
-              <DialogTitle>{translate('common.account.twoFactor.recoveryTitle')}</DialogTitle>
-            </DialogHeader>
-            <div className="flex items-center justify-center px-4 py-3 relative border-b border-gray-200 lg:border-b-0">
-              <span className="paragraph-medium-semibold text-gray-950 text-center">
-                {translate('common.account.twoFactor.recoveryTitle')}
-              </span>
-              <Button
-                type="button"
-                variant="ghost"
-                className="size-8! p-0 absolute right-4"
-                onClick={handleClose}
-              >
-                <IconX size={18} />
-              </Button>
-            </div>
-
-            <div className="flex flex-col gap-5 lg:gap-6 px-4 lg:px-5 py-5 lg:py-6 flex-1 lg:flex-none">
-              <div className="flex flex-col gap-2">
-                <h3 className="paragraph-medium-semibold text-gray-950 max-w-[269px]">
-                  {translate('common.account.twoFactor.recoveryHeading')}
-                </h3>
-                <div className="paragraph-small-regular text-gray-600">
-                  <p>{translate('common.account.twoFactor.recoveryText1')}</p>
-                  <br />
-                  <p>{translate('common.account.twoFactor.recoveryText2')}</p>
-                </div>
-              </div>
-
-              <div className="bg-gray-50 rounded-lg p-4 flex flex-col gap-4">
-                <div className="paragraph-small-medium text-gray-950 whitespace-nowrap">
-                  {backupCodes.map((backupCode, i) => (
-                    <p key={i}>{backupCode}</p>
-                  ))}
-                </div>
-                <Button
-                  type="button"
-                  variant="secondary"
-                  className="h-8! w-fit"
-                  onClick={handleCopyCodes}
-                >
-                  <IconCopy size={16} />
-                  {translate('common.account.twoFactor.copyCodes')}
-                </Button>
-              </div>
-            </div>
-
-            <div className="flex items-center p-4 lg:p-5 border-t border-gray-200 justify-between mt-auto lg:mt-0">
-              <Button variant="secondary" className="h-10!" type="button" onClick={handleClose}>
-                {translate('common.actions.cancel')}
-              </Button>
-              <Button className="h-10!" type="button" onClick={handleFinalize}>
-                {translate('common.account.twoFactor.finish')}
-              </Button>
-            </div>
-          </DialogContent>
-        </Dialog>
-      </DialogLayer>
-    );
-  }
-
-  return (
-    <DialogLayer>
       <Dialog open={open} onOpenChange={handleClose}>
         <DialogContent
           showCloseButton={false}
-          className="flex flex-col p-0 gap-0 max-w-full sm: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-[470px] 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%]"
+          className="flex flex-col p-0 gap-0 max-w-full sm: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-[470px] 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%]"
         >
           <DialogHeader className="sr-only">
-            <DialogTitle>{translate('common.account.twoFactor.title')}</DialogTitle>
+            <DialogTitle>{translate('common.account.twoFactor.recoveryTitle')}</DialogTitle>
           </DialogHeader>
-          <div className="shrink-0 flex items-center justify-center px-4 py-3 relative border-b border-gray-200 lg:border-b-0">
+          <div className="flex items-center justify-center px-4 py-3 relative border-b border-gray-200 lg:border-b-0">
             <span className="paragraph-medium-semibold text-gray-950 text-center">
-              {translate('common.account.twoFactor.title')}
+              {translate('common.account.twoFactor.recoveryTitle')}
             </span>
             <Button
               type="button"
@@ -133,91 +63,156 @@ export default function TwoFactorAuthModal({ open, onClose, onSuccess }: TwoFact
             </Button>
           </div>
 
-          <form
-            className="flex-1 min-h-0 flex flex-col"
-            onSubmit={(e) => {
-              e.preventDefault();
-              if (isCodeComplete) handleSubmit();
-            }}
+          <div className="flex flex-col gap-5 lg:gap-6 px-4 lg:px-5 py-5 lg:py-6 flex-1 lg:flex-none">
+            <div className="flex flex-col gap-2">
+              <h3 className="paragraph-medium-semibold text-gray-950 max-w-[269px]">
+                {translate('common.account.twoFactor.recoveryHeading')}
+              </h3>
+              <div className="paragraph-small-regular text-gray-600">
+                <p>{translate('common.account.twoFactor.recoveryText1')}</p>
+                <br />
+                <p>{translate('common.account.twoFactor.recoveryText2')}</p>
+              </div>
+            </div>
+
+            <div className="bg-gray-50 rounded-lg p-4 flex flex-col gap-4">
+              <div className="paragraph-small-medium text-gray-950 whitespace-nowrap">
+                {backupCodes.map((backupCode, i) => (
+                  <p key={i}>{backupCode}</p>
+                ))}
+              </div>
+              <Button
+                type="button"
+                variant="secondary"
+                className="h-8! w-fit"
+                onClick={handleCopyCodes}
+              >
+                <IconCopy size={16} />
+                {translate('common.account.twoFactor.copyCodes')}
+              </Button>
+            </div>
+          </div>
+
+          <div className="flex items-center p-4 lg:p-5 border-t border-gray-200 justify-between mt-auto lg:mt-0">
+            <Button variant="secondary" className="h-10!" type="button" onClick={handleClose}>
+              {translate('common.actions.cancel')}
+            </Button>
+            <Button className="h-10!" type="button" onClick={handleFinalize}>
+              {translate('common.account.twoFactor.finish')}
+            </Button>
+          </div>
+        </DialogContent>
+      </Dialog>
+    );
+  }
+
+  return (
+    <Dialog open={open} onOpenChange={handleClose}>
+      <DialogContent
+        showCloseButton={false}
+        className="flex flex-col p-0 gap-0 max-w-full sm: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-[470px] 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%]"
+      >
+        <DialogHeader className="sr-only">
+          <DialogTitle>{translate('common.account.twoFactor.title')}</DialogTitle>
+        </DialogHeader>
+        <div className="shrink-0 flex items-center justify-center px-4 py-3 relative border-b border-gray-200 lg:border-b-0">
+          <span className="paragraph-medium-semibold text-gray-950 text-center">
+            {translate('common.account.twoFactor.title')}
+          </span>
+          <Button
+            type="button"
+            variant="ghost"
+            className="size-8! p-0 absolute right-4"
+            onClick={handleClose}
           >
-            <div className="flex-1 min-h-0 overflow-y-auto overscroll-contain lg:overflow-visible">
-              <div className="flex flex-col items-center gap-4 lg:gap-8 px-4 lg:px-5 py-4 lg:py-6 pb-60 lg:pb-6">
-                <p className="paragraph-small-regular text-gray-950 text-center max-w-full lg:max-w-[412px]">
-                  {translate.rich('common.account.twoFactor.instructions', {
-                    link: (chunks) => (
-                      <a
-                        href="https://support.google.com/accounts/answer/1066447"
-                        target="_blank"
-                        rel="noopener noreferrer"
-                        className="paragraph-small-medium underline"
-                      >
-                        {chunks}
-                      </a>
-                    ),
-                  })}
-                </p>
+            <IconX size={18} />
+          </Button>
+        </div>
 
-                <div className="border border-gray-200 rounded-lg overflow-hidden p-2 lg:p-3 flex items-center justify-center w-[136px] h-[136px] lg:w-[203px] lg:h-[203px]">
-                  {generateFailed ? (
-                    <button
-                      type="button"
-                      onClick={() => retryGenerate()}
-                      className="flex flex-col items-center gap-1.5 text-center"
+        <form
+          className="flex-1 min-h-0 flex flex-col"
+          onSubmit={(e) => {
+            e.preventDefault();
+            if (isCodeComplete) handleSubmit();
+          }}
+        >
+          <div className="flex-1 min-h-0 overflow-y-auto overscroll-contain lg:overflow-visible">
+            <div className="flex flex-col items-center gap-4 lg:gap-8 px-4 lg:px-5 py-4 lg:py-6 pb-60 lg:pb-6">
+              <p className="paragraph-small-regular text-gray-950 text-center max-w-full lg:max-w-[412px]">
+                {translate.rich('common.account.twoFactor.instructions', {
+                  link: (chunks) => (
+                    <a
+                      href="https://support.google.com/accounts/answer/1066447"
+                      target="_blank"
+                      rel="noopener noreferrer"
+                      className="paragraph-small-medium underline"
                     >
-                      <IconRefresh size={20} className="text-gray-400" />
-                      <span className="paragraph-xsmall-medium text-gray-500">
-                        {translate('common.account.twoFactor.retry')}
-                      </span>
-                    </button>
-                  ) : isGenerating || !qrcode ? (
-                    <div className="skeleton w-full h-full rounded" />
-                  ) : (
-                    // eslint-disable-next-line @next/next/no-img-element
-                    <img
-                      src={qrcode}
-                      alt={translate('common.account.twoFactor.qrAlt')}
-                      className="w-full h-full"
-                    />
-                  )}
-                </div>
+                      {chunks}
+                    </a>
+                  ),
+                })}
+              </p>
 
-                <div className="flex items-center gap-3 w-full">
-                  <Separator className="flex-1" />
-                  <span className="paragraph-xsmall-medium text-gray-500 opacity-80 whitespace-nowrap">
-                    {translate('common.account.twoFactor.pasteDigits')}
-                  </span>
-                  <Separator className="flex-1" />
-                </div>
+              <div className="border border-gray-200 rounded-lg overflow-hidden p-2 lg:p-3 flex items-center justify-center w-[136px] h-[136px] lg:w-[203px] lg:h-[203px]">
+                {generateFailed ? (
+                  <button
+                    type="button"
+                    onClick={() => retryGenerate()}
+                    className="flex flex-col items-center gap-1.5 text-center"
+                  >
+                    <IconRefresh size={20} className="text-gray-400" />
+                    <span className="paragraph-xsmall-medium text-gray-500">
+                      {translate('common.account.twoFactor.retry')}
+                    </span>
+                  </button>
+                ) : isGenerating || !qrcode ? (
+                  <div className="skeleton w-full h-full rounded" />
+                ) : (
+                  // eslint-disable-next-line @next/next/no-img-element
+                  <img
+                    src={qrcode}
+                    alt={translate('common.account.twoFactor.qrAlt')}
+                    className="w-full h-full"
+                  />
+                )}
+              </div>
 
-                <div className="scroll-mt-20">
-                  <InputOTP maxLength={6} pattern={REGEXP_ONLY_DIGITS} 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 className="flex items-center gap-3 w-full">
+                <Separator className="flex-1" />
+                <span className="paragraph-xsmall-medium text-gray-500 opacity-80 whitespace-nowrap">
+                  {translate('common.account.twoFactor.pasteDigits')}
+                </span>
+                <Separator className="flex-1" />
               </div>
-            </div>
 
-            <div className="shrink-0 flex items-center p-4 lg:p-5 border-t border-gray-200 justify-between gap-2 bg-white">
-              <Button variant="secondary" className="h-10!" type="button" onClick={handleClose}>
-                {translate('common.actions.cancel')}
-              </Button>
-              <Button type="submit" className="h-10!" disabled={!isCodeComplete || isConfirming}>
-                {isConfirming
-                  ? translate('common.account.twoFactor.activating')
-                  : translate('common.account.twoFactor.activate')}
-              </Button>
+              <div className="scroll-mt-20">
+                <InputOTP maxLength={6} pattern={REGEXP_ONLY_DIGITS} 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>
-          </form>
-        </DialogContent>
-      </Dialog>
-    </DialogLayer>
+          </div>
+
+          <div className="shrink-0 flex items-center p-4 lg:p-5 border-t border-gray-200 justify-between gap-2 bg-white">
+            <Button variant="secondary" className="h-10!" type="button" onClick={handleClose}>
+              {translate('common.actions.cancel')}
+            </Button>
+            <Button type="submit" className="h-10!" disabled={!isCodeComplete || isConfirming}>
+              {isConfirming
+                ? translate('common.account.twoFactor.activating')
+                : translate('common.account.twoFactor.activate')}
+            </Button>
+          </div>
+        </form>
+      </DialogContent>
+    </Dialog>
   );
 }

package/src/components/account/sections/MyProfileSection.tsx

@@ -20,7 +20,6 @@ import { useUpdateAccountUser } from '../../../modules/accounts/hooks/useAccount
 import { GENDER_OPTIONS } from '../constants';
 import { ChangePhoneModal } from './ChangePhoneModal';
 import { ChangeEmailModal } from './ChangeEmailModal';
-import { DialogLayer } from '../../ui/overlay/layers';
 
 interface MyProfileSectionProps {
   onClose: () => void;
@@ -270,11 +269,8 @@ export function MyProfileSection({ onClose, storageUrl }: MyProfileSectionProps)
         </div>
       </form>
 
-      {/* Abrem por cima desta secao, mas sao declarados como irmaos dela. */}
-      <DialogLayer>
-        <ChangePhoneModal open={changePhoneOpen} onClose={() => setChangePhoneOpen(false)} />
-        <ChangeEmailModal open={changeEmailOpen} onClose={() => setChangeEmailOpen(false)} />
-      </DialogLayer>
+      <ChangePhoneModal open={changePhoneOpen} onClose={() => setChangePhoneOpen(false)} />
+      <ChangeEmailModal open={changeEmailOpen} onClose={() => setChangeEmailOpen(false)} />
     </>
   );
 }

package/src/components/layouts/UsersSelectorPopover.tsx

@@ -201,12 +201,7 @@ export function UsersSelectorPopover({
                                 />
                               </div>
                             </TooltipTrigger>
-                            {/* Continua na mao: este tooltip nasce dentro de um
-                                `PopoverContent`, e a escala de faixas so modela
-                                aninhamento de modal. Sem o z explicito o tooltip
-                                fica na faixa do popover que o hospeda e some
-                                atras dele. */}
-                            <TooltipContent className="z-[1002]">
+                            <TooltipContent>
                               {inProject ? translate('common.layout.usersSelector.removeFromProject') : translate('common.layout.usersSelector.addToProject')}
                             </TooltipContent>
                           </Tooltip>

package/src/components/modals/ModalManager.tsx

@@ -1,8 +1,7 @@
 'use client';
 
-import { ComponentType, useContext } from 'react';
+import { ComponentType } from 'react';
 import { useModalManager } from '../../store/useModalManager';
-import { DialogDepthContext } from '../ui/overlay/layers';
 
 interface ModalManagerProps {
   registry: Record<string, ComponentType>;
@@ -10,13 +9,12 @@ interface ModalManagerProps {
 
 export function ModalManager({ registry }: ModalManagerProps) {
   const { modalStack } = useModalManager();
-  const depth = useContext(DialogDepthContext);
 
   if (modalStack.length === 0) return null;
 
   return (
     <>
-      {modalStack.map((modal, index) => {
+      {modalStack.map((modal) => {
         const ModalComponent = registry[modal.key];
 
         if (!ModalComponent) {
@@ -24,11 +22,7 @@ export function ModalManager({ registry }: ModalManagerProps) {
           return null;
         }
 
-        return (
-          <DialogDepthContext.Provider value={depth + index} key={modal.key}>
-            <ModalComponent />
-          </DialogDepthContext.Provider>
-        );
+        return <ModalComponent key={modal.key} />;
       })}
     </>
   );

package/src/components/modals/promo/AiCreditsOfferModal/AiCreditsOfferModal.tsx

@@ -26,7 +26,6 @@ import { readOfferStageCookie, writeOfferStageCookie } from '../../../../modules
 import { useAiCreditsOfferModal } from '../../../../store/useAiCreditsOfferModal';
 import { useModalManager } from '../../../../store/useModalManager';
 import { LoseOfferDialog } from './components/LoseOfferDialog';
-import { DialogLayer } from '../../../ui/overlay/layers';
 import { OfferIllustration } from './components/OfferIllustration';
 import { OfferPaymentField } from './components/OfferPaymentField';
 
@@ -389,17 +388,14 @@ export default function AiCreditsOfferModal() {
         </DialogContent>
       </Dialog>
 
-      {/* Irmao do `Dialog` acima, entao nasceria na mesma faixa de z. */}
-      <DialogLayer>
-        <LoseOfferDialog
-          open={confirmingExit}
-          discountLabel={discountLabel}
-          creditsLabel={creditsLabel}
-          fullPriceLabel={fullPrice != null ? formatCurrencyNumber(fullPrice) : ''}
-          onKeep={() => setConfirmingExit(false)}
-          onLose={dismiss}
-        />
-      </DialogLayer>
+      <LoseOfferDialog
+        open={confirmingExit}
+        discountLabel={discountLabel}
+        creditsLabel={creditsLabel}
+        fullPriceLabel={fullPrice != null ? formatCurrencyNumber(fullPrice) : ''}
+        onKeep={() => setConfirmingExit(false)}
+        onLose={dismiss}
+      />
     </>
   );
 }

package/src/components/ui/overlay/Dialog.tsx

@@ -4,21 +4,12 @@ import * as React from "react";
 import * as DialogPrimitive from "@radix-ui/react-dialog";
 import { IconX } from '@tabler/icons-react';
 import { cn } from "../../../infra/utils/clsx";
-import { DialogDepthContext, useDialogLayer } from "./layers";
-
-// Cada `Dialog` aninhado sobe uma faixa de z-index, para que o overlay do modal
-// de cima cubra o conteudo do modal de baixo. A escala (e os dropdowns e
-// tooltips que precisam acompanhar) vive em `./layers`.
+import { OverlayLayerContext, useDialogLayer, useOverlayLayer } from "./layers";
 
 function Dialog({
   ...props
 }: React.ComponentProps<typeof DialogPrimitive.Root>) {
-  const depth = React.useContext(DialogDepthContext);
-  return (
-    <DialogDepthContext.Provider value={depth + 1}>
-      <DialogPrimitive.Root data-slot="dialog" {...props} />
-    </DialogDepthContext.Provider>
-  );
+  return <DialogPrimitive.Root data-slot="dialog" {...props} />;
 }
 
 function DialogTrigger({
@@ -64,40 +55,43 @@ function DialogContent({
   overlayClassName,
   hideOverlay = false,
   ...props
-}: React.ComponentProps<typeof DialogPrimitive.Content> & {
+}: React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content> & {
   showCloseButton?: boolean;
   overlayClassName?: string;
   hideOverlay?: boolean;
 }) {
-  const layer = useDialogLayer();
+  const { layer, presenceRef } = useOverlayLayer();
   return (
-    <DialogPortal data-slot="dialog-portal">
-      {!hideOverlay && <DialogOverlay className={overlayClassName} />}
-      <DialogPrimitive.Content
-        data-slot="dialog-content"
-        className={cn(
-          "bg-background data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 fixed top-[50%] left-[50%] grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border p-6 shadow-lg duration-200 sm:max-w-lg",
-          layer.content,
-          className,
-        )}
-        {...props}
-      >
-        {children}
-        {showCloseButton && (
-          <div className="absolute top-0.5 right-0">
-            <div className="p-4">
-              <DialogPrimitive.Close
-                data-slot="dialog-close"
-                className="hover:cursor-pointer flex size-8 items-center justify-center rounded-lg p-2 text-gray-500 transition-colors hover:bg-gray-100 hover:text-gray-950 focus:outline-none"
-              >
-                <IconX className="size-[18px]" />
-                <span className="sr-only">Close</span>
-              </DialogPrimitive.Close>
+    <OverlayLayerContext.Provider value={layer}>
+      <DialogPortal data-slot="dialog-portal">
+        {!hideOverlay && <DialogOverlay className={overlayClassName} />}
+        <DialogPrimitive.Content
+          ref={presenceRef}
+          data-slot="dialog-content"
+          className={cn(
+            "bg-background data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 fixed top-[50%] left-[50%] grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border p-6 shadow-lg duration-200 sm:max-w-lg",
+            layer.content,
+            className,
+          )}
+          {...props}
+        >
+          {children}
+          {showCloseButton && (
+            <div className="absolute top-0.5 right-0">
+              <div className="p-4">
+                <DialogPrimitive.Close
+                  data-slot="dialog-close"
+                  className="hover:cursor-pointer flex size-8 items-center justify-center rounded-lg p-2 text-gray-500 transition-colors hover:bg-gray-100 hover:text-gray-950 focus:outline-none"
+                >
+                  <IconX className="size-[18px]" />
+                  <span className="sr-only">Close</span>
+                </DialogPrimitive.Close>
+              </div>
             </div>
-          </div>
-        )}
-      </DialogPrimitive.Content>
-    </DialogPortal>
+          )}
+        </DialogPrimitive.Content>
+      </DialogPortal>
+    </OverlayLayerContext.Provider>
   );
 }
 

package/src/components/ui/overlay/Popover.tsx

@@ -5,7 +5,7 @@
 import * as React from "react"
 import * as PopoverPrimitive from "@radix-ui/react-popover"
 import { cn } from "../../../infra/utils/clsx"
-import { useDialogLayer } from "./layers"
+import { OVERLAY_LAYERS, OverlayLayerContext, ROOT_LAYER, useDialogLayer } from "./layers"
 
 function Popover({
   ...props
@@ -25,22 +25,23 @@ function PopoverContent({
   sideOffset = 4,
   ...props
 }: React.ComponentProps<typeof PopoverPrimitive.Content>) {
-  // Portaliza para o body, entao disputa z com o conteudo do modal que o abriu.
   const layer = useDialogLayer()
   return (
-    <PopoverPrimitive.Portal>
-      <PopoverPrimitive.Content
-        data-slot="popover-content"
-        align={align}
-        sideOffset={sideOffset}
-        className={cn(
-          "bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 w-72 origin-(--radix-popover-content-transform-origin) rounded-md border p-4 shadow-md outline-hidden",
-          layer.popover,
-          className
-        )}
-        {...props}
-      />
-    </PopoverPrimitive.Portal>
+    <OverlayLayerContext.Provider value={layer === ROOT_LAYER ? OVERLAY_LAYERS[0] : layer}>
+      <PopoverPrimitive.Portal>
+        <PopoverPrimitive.Content
+          data-slot="popover-content"
+          align={align}
+          sideOffset={sideOffset}
+          className={cn(
+            "bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 w-72 origin-(--radix-popover-content-transform-origin) rounded-md border p-4 shadow-md outline-hidden",
+            layer.popover,
+            className
+          )}
+          {...props}
+        />
+      </PopoverPrimitive.Portal>
+    </OverlayLayerContext.Provider>
   )
 }