@greatapps/common 1.1.776 → 1.1.778

package/dist/components/modals/ModalManager.mjs

@@ -1,16 +1,19 @@
 "use client";
 import { Fragment, jsx } from "react/jsx-runtime";
+import { useContext } from "react";
 import { useModalManager } from "../../store/useModalManager";
+import { DialogDepthContext } from "../ui/overlay/layers";
 function ModalManager({ registry }) {
   const { modalStack } = useModalManager();
+  const depth = useContext(DialogDepthContext);
   if (modalStack.length === 0) return null;
-  return /* @__PURE__ */ jsx(Fragment, { children: modalStack.map((modal) => {
+  return /* @__PURE__ */ jsx(Fragment, { children: modalStack.map((modal, index) => {
     const ModalComponent = registry[modal.key];
     if (!ModalComponent) {
       console.warn(`Modal "${modal.key}" not found in registry`);
       return null;
     }
-    return /* @__PURE__ */ jsx(ModalComponent, {}, modal.key);
+    return /* @__PURE__ */ jsx(DialogDepthContext.Provider, { value: depth + index, children: /* @__PURE__ */ jsx(ModalComponent, {}) }, modal.key);
   }) });
 }
 export {

package/dist/components/modals/ModalManager.mjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/modals/ModalManager.tsx"],"sourcesContent":["'use client';\n\nimport { ComponentType } from 'react';\nimport { useModalManager } from '../../store/useModalManager';\n\ninterface ModalManagerProps {\n  registry: Record<string, ComponentType>;\n}\n\nexport function ModalManager({ registry }: ModalManagerProps) {\n  const { modalStack } = useModalManager();\n\n  if (modalStack.length === 0) return null;\n\n  return (\n    <>\n      {modalStack.map((modal) => {\n        const ModalComponent = registry[modal.key];\n\n        if (!ModalComponent) {\n          console.warn(`Modal \"${modal.key}\" not found in registry`);\n          return null;\n        }\n\n        return <ModalComponent key={modal.key} />;\n      })}\n    </>\n  );\n}\n"],"mappings":";AAeI,mBASW,WATX;AAZJ,SAAS,uBAAuB;AAMzB,SAAS,aAAa,EAAE,SAAS,GAAsB;AAC5D,QAAM,EAAE,WAAW,IAAI,gBAAgB;AAEvC,MAAI,WAAW,WAAW,EAAG,QAAO;AAEpC,SACE,gCACG,qBAAW,IAAI,CAAC,UAAU;AACzB,UAAM,iBAAiB,SAAS,MAAM,GAAG;AAEzC,QAAI,CAAC,gBAAgB;AACnB,cAAQ,KAAK,UAAU,MAAM,GAAG,yBAAyB;AACzD,aAAO;AAAA,IACT;AAEA,WAAO,oBAAC,oBAAoB,MAAM,GAAK;AAAA,EACzC,CAAC,GACH;AAEJ;","names":[]}
+{"version":3,"sources":["../../../src/components/modals/ModalManager.tsx"],"sourcesContent":["'use client';\n\nimport { ComponentType, useContext } from 'react';\nimport { useModalManager } from '../../store/useModalManager';\nimport { DialogDepthContext } from '../ui/overlay/layers';\n\ninterface ModalManagerProps {\n  registry: Record<string, ComponentType>;\n}\n\nexport function ModalManager({ registry }: ModalManagerProps) {\n  const { modalStack } = useModalManager();\n  const depth = useContext(DialogDepthContext);\n\n  if (modalStack.length === 0) return null;\n\n  // Modais da pilha nascem irmaos na arvore React: sem isso, todos cairiam na\n  // mesma profundidade e na mesma faixa de z-index (ver layers.tsx). A\n  // posicao na pilha vira a profundidade, relativa a onde o ModalManager\n  // esta montado.\n  return (\n    <>\n      {modalStack.map((modal, index) => {\n        const ModalComponent = registry[modal.key];\n\n        if (!ModalComponent) {\n          console.warn(`Modal \"${modal.key}\" not found in registry`);\n          return null;\n        }\n\n        return (\n          <DialogDepthContext.Provider value={depth + index} key={modal.key}>\n            <ModalComponent />\n          </DialogDepthContext.Provider>\n        );\n      })}\n    </>\n  );\n}\n"],"mappings":";AAqBI,mBAWQ,WAXR;AAnBJ,SAAwB,kBAAkB;AAC1C,SAAS,uBAAuB;AAChC,SAAS,0BAA0B;AAM5B,SAAS,aAAa,EAAE,SAAS,GAAsB;AAC5D,QAAM,EAAE,WAAW,IAAI,gBAAgB;AACvC,QAAM,QAAQ,WAAW,kBAAkB;AAE3C,MAAI,WAAW,WAAW,EAAG,QAAO;AAMpC,SACE,gCACG,qBAAW,IAAI,CAAC,OAAO,UAAU;AAChC,UAAM,iBAAiB,SAAS,MAAM,GAAG;AAEzC,QAAI,CAAC,gBAAgB;AACnB,cAAQ,KAAK,UAAU,MAAM,GAAG,yBAAyB;AACzD,aAAO;AAAA,IACT;AAEA,WACE,oBAAC,mBAAmB,UAAnB,EAA4B,OAAO,QAAQ,OAC1C,8BAAC,kBAAe,KADsC,MAAM,GAE9D;AAAA,EAEJ,CAAC,GACH;AAEJ;","names":[]}

package/dist/components/widgets/ImageUpload/ImageTooSmallModal.mjs

@@ -8,6 +8,7 @@ import {
   DialogHeader,
   DialogTitle
 } from "../../ui/overlay/Dialog";
+import { DialogLayer } from "../../ui/overlay/layers";
 import { Button } from "../../ui/buttons/Button";
 function ImageTooSmallModal({
   open,
@@ -20,21 +21,17 @@ function ImageTooSmallModal({
 }) {
   const translate = useTranslations();
   const dimensionText = `${minWidth}x${minHeight}px`;
-  return /* @__PURE__ */ jsx(Dialog, { open, onOpenChange, children: /* @__PURE__ */ jsxs(
-    DialogContent,
-    {
-      className: "w-full md:w-[480px]! lg:w-[480px]! max-w-[480px]! max-[480px]:w-[calc(100%-32px)] p-0 gap-0 z-[1003]",
-      overlayClassName: "z-[1002]",
-      children: [
-        /* @__PURE__ */ jsx(DialogHeader, { className: "p-5", children: /* @__PURE__ */ jsx(DialogTitle, { className: "text-center text-[16px]!", children: translate("common.imageUpload.tooSmallTitleWithDimension", { dimensionText }) }) }),
-        /* @__PURE__ */ jsx("div", { className: "px-5 pb-5", children: /* @__PURE__ */ jsx("p", { className: "paragraph-small-regular text-zinc-600 text-center", children: translate("common.imageUpload.tooSmallBodyFileWithDimension", { fileName, dimensionText }) }) }),
-        /* @__PURE__ */ jsxs(DialogFooter, { className: "flex-row! items-center justify-start! gap-3 p-5 border-t border-zinc-200", children: [
-          /* @__PURE__ */ jsx(Button, { onClick: onSelectAnother, children: translate("common.imageUpload.sendAnother") }),
-          /* @__PURE__ */ jsx(Button, { variant: "secondary", onClick: onCancel, children: translate("common.actions.cancel") })
-        ] })
-      ]
-    }
-  ) });
+  return (
+    // Abre por cima do modal/uploader que a disparou.
+    /* @__PURE__ */ jsx(DialogLayer, { children: /* @__PURE__ */ jsx(Dialog, { open, onOpenChange, children: /* @__PURE__ */ jsxs(DialogContent, { className: "w-full md:w-[480px]! lg:w-[480px]! max-w-[480px]! max-[480px]:w-[calc(100%-32px)] p-0 gap-0", children: [
+      /* @__PURE__ */ jsx(DialogHeader, { className: "p-5", children: /* @__PURE__ */ jsx(DialogTitle, { className: "text-center text-[16px]!", children: translate("common.imageUpload.tooSmallTitleWithDimension", { dimensionText }) }) }),
+      /* @__PURE__ */ jsx("div", { className: "px-5 pb-5", children: /* @__PURE__ */ jsx("p", { className: "paragraph-small-regular text-zinc-600 text-center", children: translate("common.imageUpload.tooSmallBodyFileWithDimension", { fileName, dimensionText }) }) }),
+      /* @__PURE__ */ jsxs(DialogFooter, { className: "flex-row! items-center justify-start! gap-3 p-5 border-t border-zinc-200", children: [
+        /* @__PURE__ */ jsx(Button, { onClick: onSelectAnother, children: translate("common.imageUpload.sendAnother") }),
+        /* @__PURE__ */ jsx(Button, { variant: "secondary", onClick: onCancel, children: translate("common.actions.cancel") })
+      ] })
+    ] }) }) })
+  );
 }
 export {
   ImageTooSmallModal

package/dist/components/widgets/ImageUpload/ImageTooSmallModal.mjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/widgets/ImageUpload/ImageTooSmallModal.tsx"],"sourcesContent":["'use client'\n\nimport { useTranslations } from 'next-intl'\nimport {\n  Dialog,\n  DialogContent,\n  DialogFooter,\n  DialogHeader,\n  DialogTitle,\n} from '../../ui/overlay/Dialog'\nimport { Button } from '../../ui/buttons/Button'\n\ninterface ImageTooSmallModalProps {\n  open: boolean\n  onOpenChange: (open: boolean) => void\n  fileName: string\n  minWidth: number\n  minHeight: number\n  onSelectAnother: () => void\n  onCancel: () => void\n}\n\nexport function ImageTooSmallModal({\n  open,\n  onOpenChange,\n  fileName,\n  minWidth,\n  minHeight,\n  onSelectAnother,\n  onCancel,\n}: ImageTooSmallModalProps) {\n  const translate = useTranslations()\n  const dimensionText = `${minWidth}x${minHeight}px`\n\n  return (\n    <Dialog open={open} onOpenChange={onOpenChange}>\n      <DialogContent\n        className=\"w-full md:w-[480px]! lg:w-[480px]! max-w-[480px]! max-[480px]:w-[calc(100%-32px)] p-0 gap-0 z-[1003]\"\n        overlayClassName=\"z-[1002]\"\n      >\n        <DialogHeader className=\"p-5\">\n          <DialogTitle className=\"text-center text-[16px]!\">\n            {translate('common.imageUpload.tooSmallTitleWithDimension', { dimensionText })}\n          </DialogTitle>\n        </DialogHeader>\n\n        <div className=\"px-5 pb-5\">\n          <p className=\"paragraph-small-regular text-zinc-600 text-center\">\n            {translate('common.imageUpload.tooSmallBodyFileWithDimension', { fileName, dimensionText })}\n          </p>\n        </div>\n\n        <DialogFooter className=\"flex-row! items-center justify-start! gap-3 p-5 border-t border-zinc-200\">\n          <Button onClick={onSelectAnother}>{translate('common.imageUpload.sendAnother')}</Button>\n          <Button variant=\"secondary\" onClick={onCancel}>\n            {translate('common.actions.cancel')}\n          </Button>\n        </DialogFooter>\n      </DialogContent>\n    </Dialog>\n  )\n}\n"],"mappings":";AAyCU,cAWF,YAXE;AAvCV,SAAS,uBAAuB;AAChC;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP,SAAS,cAAc;AAYhB,SAAS,mBAAmB;AAAA,EACjC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAA4B;AAC1B,QAAM,YAAY,gBAAgB;AAClC,QAAM,gBAAgB,GAAG,QAAQ,IAAI,SAAS;AAE9C,SACE,oBAAC,UAAO,MAAY,cAClB;AAAA,IAAC;AAAA;AAAA,MACC,WAAU;AAAA,MACV,kBAAiB;AAAA,MAEjB;AAAA,4BAAC,gBAAa,WAAU,OACtB,8BAAC,eAAY,WAAU,4BACpB,oBAAU,iDAAiD,EAAE,cAAc,CAAC,GAC/E,GACF;AAAA,QAEA,oBAAC,SAAI,WAAU,aACb,8BAAC,OAAE,WAAU,qDACV,oBAAU,oDAAoD,EAAE,UAAU,cAAc,CAAC,GAC5F,GACF;AAAA,QAEA,qBAAC,gBAAa,WAAU,4EACtB;AAAA,8BAAC,UAAO,SAAS,iBAAkB,oBAAU,gCAAgC,GAAE;AAAA,UAC/E,oBAAC,UAAO,SAAQ,aAAY,SAAS,UAClC,oBAAU,uBAAuB,GACpC;AAAA,WACF;AAAA;AAAA;AAAA,EACF,GACF;AAEJ;","names":[]}
+{"version":3,"sources":["../../../../src/components/widgets/ImageUpload/ImageTooSmallModal.tsx"],"sourcesContent":["'use client'\n\nimport { useTranslations } from 'next-intl'\nimport {\n  Dialog,\n  DialogContent,\n  DialogFooter,\n  DialogHeader,\n  DialogTitle,\n} from '../../ui/overlay/Dialog'\nimport { DialogLayer } from '../../ui/overlay/layers'\nimport { Button } from '../../ui/buttons/Button'\n\ninterface ImageTooSmallModalProps {\n  open: boolean\n  onOpenChange: (open: boolean) => void\n  fileName: string\n  minWidth: number\n  minHeight: number\n  onSelectAnother: () => void\n  onCancel: () => void\n}\n\nexport function ImageTooSmallModal({\n  open,\n  onOpenChange,\n  fileName,\n  minWidth,\n  minHeight,\n  onSelectAnother,\n  onCancel,\n}: ImageTooSmallModalProps) {\n  const translate = useTranslations()\n  const dimensionText = `${minWidth}x${minHeight}px`\n\n  return (\n    // Abre por cima do modal/uploader que a disparou.\n    <DialogLayer>\n      <Dialog open={open} onOpenChange={onOpenChange}>\n        <DialogContent className=\"w-full md:w-[480px]! lg:w-[480px]! max-w-[480px]! max-[480px]:w-[calc(100%-32px)] p-0 gap-0\">\n          <DialogHeader className=\"p-5\">\n            <DialogTitle className=\"text-center text-[16px]!\">\n              {translate('common.imageUpload.tooSmallTitleWithDimension', { dimensionText })}\n            </DialogTitle>\n          </DialogHeader>\n\n          <div className=\"px-5 pb-5\">\n            <p className=\"paragraph-small-regular text-zinc-600 text-center\">\n              {translate('common.imageUpload.tooSmallBodyFileWithDimension', { fileName, dimensionText })}\n            </p>\n          </div>\n\n          <DialogFooter className=\"flex-row! items-center justify-start! gap-3 p-5 border-t border-zinc-200\">\n            <Button onClick={onSelectAnother}>{translate('common.imageUpload.sendAnother')}</Button>\n            <Button variant=\"secondary\" onClick={onCancel}>\n              {translate('common.actions.cancel')}\n            </Button>\n          </DialogFooter>\n        </DialogContent>\n      </Dialog>\n    </DialogLayer>\n  )\n}\n"],"mappings":";AAyCY,cAWF,YAXE;AAvCZ,SAAS,uBAAuB;AAChC;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP,SAAS,mBAAmB;AAC5B,SAAS,cAAc;AAYhB,SAAS,mBAAmB;AAAA,EACjC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAA4B;AAC1B,QAAM,YAAY,gBAAgB;AAClC,QAAM,gBAAgB,GAAG,QAAQ,IAAI,SAAS;AAE9C;AAAA;AAAA,IAEE,oBAAC,eACC,8BAAC,UAAO,MAAY,cAClB,+BAAC,iBAAc,WAAU,+FACvB;AAAA,0BAAC,gBAAa,WAAU,OACtB,8BAAC,eAAY,WAAU,4BACpB,oBAAU,iDAAiD,EAAE,cAAc,CAAC,GAC/E,GACF;AAAA,MAEA,oBAAC,SAAI,WAAU,aACb,8BAAC,OAAE,WAAU,qDACV,oBAAU,oDAAoD,EAAE,UAAU,cAAc,CAAC,GAC5F,GACF;AAAA,MAEA,qBAAC,gBAAa,WAAU,4EACtB;AAAA,4BAAC,UAAO,SAAS,iBAAkB,oBAAU,gCAAgC,GAAE;AAAA,QAC/E,oBAAC,UAAO,SAAQ,aAAY,SAAS,UAClC,oBAAU,uBAAuB,GACpC;AAAA,SACF;AAAA,OACF,GACF,GACF;AAAA;AAEJ;","names":[]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@greatapps/common",
-  "version": "1.1.776",
+  "version": "1.1.778",
   "description": "Shared library for GreatApps frontend applications",
   "main": "./dist/index.mjs",
   "types": "./src/index.ts",

package/src/components/account/DisableTwoFactorAuthModal.tsx

@@ -10,6 +10,7 @@ import {
   DialogHeader,
   DialogTitle,
 } from '../ui/overlay/Dialog';
+import { DialogLayer } from '../ui/overlay/layers';
 import { InputOTP, InputOTPGroup, InputOTPSlot } from '../ui/form/InputOtp';
 import { REGEXP_ONLY_DIGITS } from 'input-otp';
 import useDisableTwoFactorAuthForm from './hooks/useDisableTwoFactorAuthForm';
@@ -30,63 +31,66 @@ export default function DisableTwoFactorAuthModal({
     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 sm: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">
-                {translate('common.account.twoFactor.disableTitle')}
-              </DialogTitle>
-              <DialogDescription className="paragraph-small-regular text-gray-600">
-                {translate('common.account.twoFactor.disableDescription')}
-              </DialogDescription>
-            </DialogHeader>
+    // Abre por cima do modal de configurações da conta, que é irmão na árvore.
+    <DialogLayer>
+      <Dialog open={open} onOpenChange={handleClose}>
+        <DialogContent className="flex flex-col p-0 gap-0 max-w-full sm: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">
+                  {translate('common.account.twoFactor.disableTitle')}
+                </DialogTitle>
+                <DialogDescription className="paragraph-small-regular text-gray-600">
+                  {translate('common.account.twoFactor.disableDescription')}
+                </DialogDescription>
+              </DialogHeader>
 
-            <div className="flex flex-col gap-2">
-              <span className="paragraph-small-medium text-gray-700">
-                {translate('common.account.twoFactor.authenticatorCode')}
-              </span>
-              <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 className="flex flex-col gap-2">
+                <span className="paragraph-small-medium text-gray-700">
+                  {translate('common.account.twoFactor.authenticatorCode')}
+                </span>
+                <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>
-          </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
-                ? translate('common.account.twoFactor.disabling')
-                : translate('common.account.twoFactor.disable')}
-            </Button>
-            <Button
-              variant="secondary"
-              className="h-10! flex-1"
-              type="button"
-              onClick={handleClose}
-            >
-              {translate('common.actions.cancel')}
-            </Button>
-          </div>
-        </form>
-      </DialogContent>
-    </Dialog>
+            <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
+                  ? translate('common.account.twoFactor.disabling')
+                  : translate('common.account.twoFactor.disable')}
+              </Button>
+              <Button
+                variant="secondary"
+                className="h-10! flex-1"
+                type="button"
+                onClick={handleClose}
+              >
+                {translate('common.actions.cancel')}
+              </Button>
+            </div>
+          </form>
+        </DialogContent>
+      </Dialog>
+    </DialogLayer>
   );
 }

package/src/components/account/TwoFactorAuthModal.tsx

@@ -4,6 +4,7 @@ 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';
@@ -41,18 +42,88 @@ export default function TwoFactorAuthModal({ open, onClose, onSuccess }: TwoFact
 
   if (step === 'recovery') {
     return (
+      // Abre por cima do modal de configurações da conta, que é irmão na árvore.
+      <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 (
+    // Abre por cima do modal de configurações da conta, que é irmão na árvore.
+    <DialogLayer>
       <Dialog open={open} onOpenChange={handleClose}>
         <DialogContent
           showCloseButton={false}
-          overlayClassName="z-[1010]"
-          className="z-[1011] 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%]"
+          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.recoveryTitle')}</DialogTitle>
+            <DialogTitle>{translate('common.account.twoFactor.title')}</DialogTitle>
           </DialogHeader>
-          <div className="flex items-center justify-center px-4 py-3 relative border-b border-gray-200 lg:border-b-0">
+          <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.recoveryTitle')}
+              {translate('common.account.twoFactor.title')}
             </span>
             <Button
               type="button"
@@ -64,157 +135,91 @@ export default function TwoFactorAuthModal({ open, onClose, onSuccess }: TwoFact
             </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>
-    );
-  }
-
-  return (
-    <Dialog open={open} onOpenChange={handleClose}>
-      <DialogContent
-        showCloseButton={false}
-        overlayClassName="z-[1010]"
-        className="z-[1011] 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}
+          <form
+            className="flex-1 min-h-0 flex flex-col"
+            onSubmit={(e) => {
+              e.preventDefault();
+              if (isCodeComplete) handleSubmit();
+            }}
           >
-            <IconX size={18} />
-          </Button>
-        </div>
+            <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>
 
-        <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"
+                <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"
                     >
-                      {chunks}
-                    </a>
-                  ),
-                })}
-              </p>
-
-              <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>
+                      <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="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="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="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 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>
             </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>
-        </form>
-      </DialogContent>
-    </Dialog>
+            <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>
+    </DialogLayer>
   );
 }

package/src/components/embeds/ClarityEmbed.tsx

@@ -28,8 +28,7 @@ function loadClarityScript() {
     const t = document.createElement('script');
     t.async = true;
     t.src = src;
-    const y = document.getElementsByTagName('script')[0];
-    y?.parentNode?.insertBefore(t, y);
+    document.head.appendChild(t);
   } catch {}
 }
 

package/src/components/embeds/FrillEmbed.tsx

@@ -58,12 +58,11 @@ function initFrillLoader() {
 function loadFrillScript() {
   try {
     if (document.querySelector(`script[src="${FRILL_SCRIPT_URL}"]`)) return;
-    const anchor = document.getElementsByTagName('script')[0];
     const script = document.createElement('script');
     script.type = 'text/javascript';
     script.async = true;
     script.src = FRILL_SCRIPT_URL;
-    anchor?.parentNode?.insertBefore(script, anchor);
+    document.head.appendChild(script);
   } catch {}
 }