@greatapps/common 1.1.343 → 1.1.344

package/dist/components/account/ConfigurationsMyAccountModal.mjs

@@ -1,30 +1,59 @@
 "use client";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { IconX } from "@tabler/icons-react";
+import { IconLock, IconSettings2, IconX } from "@tabler/icons-react";
 import { Dialog, DialogContent, DialogHeader, DialogTitle } from "../ui/overlay/Dialog";
+import { Tabs, TabsList, TabsTrigger, TabsContent } from "../ui/data-display/Tabs";
 import { cn } from "../../infra/utils/clsx";
+import { AccountSectionType } from "../../enums/AccountSectionType";
 import { PreferencesSection } from "./sections/PreferencesSection";
+import { ChangePasswordSection } from "./sections/ChangePasswordSection";
+import { SecuritySection } from "./sections/SecuritySection";
+import useConfigurationsModal from "./hooks/useConfigurationsModal";
 import useIsMobile from "../../hooks/useIsMobile";
 import { useAccountModals } from "../../store/useAccountModals";
 function ConfigurationsMyAccountModal() {
-  const { activeModal, close } = useAccountModals();
+  const {
+    activeModal,
+    config,
+    openDeleteAccount,
+    openIsntPossibleDelete,
+    close
+  } = useAccountModals();
   const open = activeModal === "configurations";
+  const { hasActiveSubscription } = config;
   const isMobile = useIsMobile();
+  const { activeSection, setActiveSection } = useConfigurationsModal({
+    isOpen: open
+  });
+  const handleDeleteAccount = () => {
+    close();
+    if (hasActiveSubscription) {
+      openIsntPossibleDelete();
+    } else {
+      openDeleteAccount();
+    }
+  };
+  const tabTriggerClasses = cn(
+    "border-0! px-0 py-0",
+    "lg:rounded-md lg:flex lg:items-center lg:gap-2 lg:p-3 lg:justify-start lg:w-full",
+    "lg:bg-white lg:hover:bg-gray-100 lg:active:bg-gray-50 lg:border-0",
+    "lg:data-[state=active]:bg-gray-50",
+    "flex items-center gap-1.5 px-3 py-3 justify-center whitespace-nowrap",
+    "border-b-2 border-transparent",
+    "data-[state=active]:bg-gray-50 rounded-lg",
+    "text-gray-500 data-[state=active]:text-gray-950",
+    "hover:text-gray-900 transition-colors"
+  );
   return /* @__PURE__ */ jsx(Dialog, { open, onOpenChange: close, children: /* @__PURE__ */ jsxs(
     DialogContent,
     {
       showCloseButton: !isMobile,
       overlayClassName: "bg-black/20 lg:bg-black/50",
-      className: cn(
-        "flex flex-col p-0 gap-0 max-w-full sm:max-w-full overflow-x-hidden border-0",
-        "rounded-t-2xl rounded-b-none h-[100dvh] top-0 bottom-0 left-0 right-0 translate-x-0 translate-y-0",
-        "lg:w-[700px] lg:max-w-[700px] lg:h-auto 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%]"
-      ),
+      className: "\n          flex flex-col p-0 gap-0 max-w-full sm:max-w-full overflow-x-hidden border-0\n          rounded-t-2xl rounded-b-none h-[100dvh] top-0 bottom-0 left-0 right-0 translate-x-0 translate-y-0\n          lg:flex-row lg:w-[892px] lg:max-w-[892px] lg:h-[626px] lg:rounded-lg lg:border\n          lg:top-[50%] lg:bottom-auto lg:left-[50%] lg:right-auto lg:translate-x-[-50%] lg:translate-y-[-50%]",
       children: [
-        /* @__PURE__ */ jsx(DialogHeader, { className: "sr-only", children: /* @__PURE__ */ jsx(DialogTitle, { children: "Prefer\xEAncias" }) }),
+        /* @__PURE__ */ jsx(DialogHeader, { className: "sr-only", children: /* @__PURE__ */ jsx(DialogTitle, { children: "Configura\xE7\xF5es" }) }),
         /* @__PURE__ */ jsxs("div", { className: "md:hidden flex items-center justify-between px-5 py-3 border-b border-gray-200", children: [
-          /* @__PURE__ */ jsx("span", { className: "text-gray-950 paragraph-medium-semibold", children: "Prefer\xEAncias" }),
+          /* @__PURE__ */ jsx("span", { className: "text-gray-950 paragraph-medium-semibold", children: "Configura\xE7\xF5es" }),
           /* @__PURE__ */ jsx(
             "button",
             {
@@ -35,7 +64,55 @@ function ConfigurationsMyAccountModal() {
             }
           )
         ] }),
-        /* @__PURE__ */ jsx(PreferencesSection, { onClose: close })
+        /* @__PURE__ */ jsxs(
+          Tabs,
+          {
+            value: activeSection,
+            onValueChange: (value) => setActiveSection(value),
+            orientation: "vertical",
+            className: "flex lg:flex-row flex-col w-full h-full flex-1 lg:h-full lg:pt-0 lg:gap-0",
+            children: [
+              /* @__PURE__ */ jsxs(
+                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]"
+                  ),
+                  children: [
+                    /* @__PURE__ */ jsx("span", { className: "hidden lg:block paragraph-medium-semibold text-gray-950 mb-0", children: "Configura\xE7\xF5es" }),
+                    /* @__PURE__ */ jsxs("div", { className: "lg:flex lg:flex-col flex flex-row lg:gap-0 gap-0 lg:w-full", children: [
+                      /* @__PURE__ */ jsxs(TabsTrigger, { value: AccountSectionType.PREFERENCES, className: tabTriggerClasses, children: [
+                        /* @__PURE__ */ jsx(IconSettings2, { size: 20, className: "shrink-0" }),
+                        /* @__PURE__ */ jsx("span", { className: "paragraph-small-medium", children: "Prefer\xEAncias" })
+                      ] }),
+                      /* @__PURE__ */ jsxs(TabsTrigger, { value: AccountSectionType.SECURITY, className: tabTriggerClasses, children: [
+                        /* @__PURE__ */ jsx(IconLock, { size: 20, className: "shrink-0" }),
+                        /* @__PURE__ */ jsx("span", { className: "paragraph-small-medium", children: "Seguran\xE7a" })
+                      ] })
+                    ] })
+                  ]
+                }
+              ),
+              /* @__PURE__ */ jsxs("div", { className: "w-full flex-1 min-h-0 lg:h-full overflow-hidden lg:overflow-visible relative flex flex-col", children: [
+                /* @__PURE__ */ jsx(TabsContent, { value: AccountSectionType.PREFERENCES, className: "h-full! relative overflow-hidden", children: /* @__PURE__ */ jsx(PreferencesSection, { onClose: close }) }),
+                /* @__PURE__ */ jsx(TabsContent, { value: AccountSectionType.SECURITY, className: "h-full! relative overflow-hidden", children: /* @__PURE__ */ jsx(
+                  SecuritySection,
+                  {
+                    setActiveSection,
+                    onClose: close,
+                    onDeleteAccount: handleDeleteAccount
+                  }
+                ) }),
+                /* @__PURE__ */ jsx(TabsContent, { value: AccountSectionType.CHANGE_PASSWORD, className: "h-full! relative overflow-hidden", children: /* @__PURE__ */ jsx(ChangePasswordSection, { onBack: () => setActiveSection(AccountSectionType.SECURITY) }) })
+              ] })
+            ]
+          }
+        )
       ]
     }
   ) });

package/dist/components/account/ConfigurationsMyAccountModal.mjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/account/ConfigurationsMyAccountModal.tsx"],"sourcesContent":["'use client';\n\nimport { IconX } from '@tabler/icons-react';\nimport { Dialog, DialogContent, DialogHeader, DialogTitle } from '../ui/overlay/Dialog';\nimport { cn } from '../../infra/utils/clsx';\nimport { PreferencesSection } from './sections/PreferencesSection';\nimport useIsMobile from '../../hooks/useIsMobile';\nimport { useAccountModals } from '../../store/useAccountModals';\n\nexport default function ConfigurationsMyAccountModal() {\n  const { activeModal, close } = useAccountModals();\n\n  const open = activeModal === 'configurations';\n  const isMobile = useIsMobile();\n\n  return (\n    <Dialog open={open} onOpenChange={close}>\n      <DialogContent\n        showCloseButton={!isMobile}\n        overlayClassName=\"bg-black/20 lg:bg-black/50\"\n        className={cn(\n          \"flex flex-col p-0 gap-0 max-w-full sm:max-w-full overflow-x-hidden border-0\",\n          \"rounded-t-2xl rounded-b-none h-[100dvh] top-0 bottom-0 left-0 right-0 translate-x-0 translate-y-0\",\n          \"lg:w-[700px] lg:max-w-[700px] lg:h-auto lg:rounded-lg lg:border\",\n          \"lg:top-[50%] lg:bottom-auto lg:left-[50%] lg:right-auto lg:translate-x-[-50%] lg:translate-y-[-50%]\"\n        )}\n      >\n        <DialogHeader className=\"sr-only\">\n          <DialogTitle>Preferências</DialogTitle>\n        </DialogHeader>\n        <div className=\"md:hidden flex items-center justify-between px-5 py-3 border-b border-gray-200\">\n          <span className=\"text-gray-950 paragraph-medium-semibold\">Preferências</span>\n          <button\n            type=\"button\"\n            className=\"size-8 flex items-center justify-center text-gray-500 cursor-pointer\"\n            onClick={close}\n          >\n            <IconX size={18} />\n          </button>\n        </div>\n        <PreferencesSection onClose={close} />\n      </DialogContent>\n    </Dialog>\n  );\n}\n"],"mappings":";AA4BU,cAEF,YAFE;AA1BV,SAAS,aAAa;AACtB,SAAS,QAAQ,eAAe,cAAc,mBAAmB;AACjE,SAAS,UAAU;AACnB,SAAS,0BAA0B;AACnC,OAAO,iBAAiB;AACxB,SAAS,wBAAwB;AAElB,SAAR,+BAAgD;AACrD,QAAM,EAAE,aAAa,MAAM,IAAI,iBAAiB;AAEhD,QAAM,OAAO,gBAAgB;AAC7B,QAAM,WAAW,YAAY;AAE7B,SACE,oBAAC,UAAO,MAAY,cAAc,OAChC;AAAA,IAAC;AAAA;AAAA,MACC,iBAAiB,CAAC;AAAA,MAClB,kBAAiB;AAAA,MACjB,WAAW;AAAA,QACT;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,MACF;AAAA,MAEA;AAAA,4BAAC,gBAAa,WAAU,WACtB,8BAAC,eAAY,6BAAY,GAC3B;AAAA,QACA,qBAAC,SAAI,WAAU,kFACb;AAAA,8BAAC,UAAK,WAAU,2CAA0C,6BAAY;AAAA,UACtE;AAAA,YAAC;AAAA;AAAA,cACC,MAAK;AAAA,cACL,WAAU;AAAA,cACV,SAAS;AAAA,cAET,8BAAC,SAAM,MAAM,IAAI;AAAA;AAAA,UACnB;AAAA,WACF;AAAA,QACA,oBAAC,sBAAmB,SAAS,OAAO;AAAA;AAAA;AAAA,EACtC,GACF;AAEJ;","names":[]}
+{"version":3,"sources":["../../../src/components/account/ConfigurationsMyAccountModal.tsx"],"sourcesContent":["'use client';\n\nimport { IconLock, IconSettings2, IconX } from '@tabler/icons-react';\nimport { Dialog, DialogContent, DialogHeader, DialogTitle } from '../ui/overlay/Dialog';\nimport { Tabs, TabsList, TabsTrigger, TabsContent } from '../ui/data-display/Tabs';\nimport { cn } from '../../infra/utils/clsx';\nimport { AccountSectionType } from '../../enums/AccountSectionType';\nimport { PreferencesSection } from './sections/PreferencesSection';\nimport { ChangePasswordSection } from './sections/ChangePasswordSection';\nimport { SecuritySection } from './sections/SecuritySection';\nimport useConfigurationsModal from './hooks/useConfigurationsModal';\nimport useIsMobile from '../../hooks/useIsMobile';\nimport { useAccountModals } from '../../store/useAccountModals';\n\nexport default function ConfigurationsMyAccountModal() {\n  const {\n    activeModal,\n    config,\n    openDeleteAccount,\n    openIsntPossibleDelete,\n    close,\n  } = useAccountModals();\n\n  const open = activeModal === 'configurations';\n  const { hasActiveSubscription } = config;\n\n  const isMobile = useIsMobile();\n  const { activeSection, setActiveSection } = useConfigurationsModal({\n    isOpen: open,\n  });\n\n  const handleDeleteAccount = () => {\n    close();\n    if (hasActiveSubscription) {\n      openIsntPossibleDelete();\n    } else {\n      openDeleteAccount();\n    }\n  };\n\n  const tabTriggerClasses = cn(\n    'border-0! px-0 py-0',\n\n    'lg:rounded-md lg:flex lg:items-center lg:gap-2 lg:p-3 lg:justify-start lg:w-full',\n    'lg:bg-white lg:hover:bg-gray-100 lg:active:bg-gray-50 lg:border-0',\n    'lg:data-[state=active]:bg-gray-50',\n\n    'flex items-center gap-1.5 px-3 py-3 justify-center whitespace-nowrap',\n    'border-b-2 border-transparent',\n    'data-[state=active]:bg-gray-50 rounded-lg',\n\n    'text-gray-500 data-[state=active]:text-gray-950',\n    'hover:text-gray-900 transition-colors'\n  );\n\n  return (\n    <Dialog open={open} onOpenChange={close}>\n      <DialogContent\n        showCloseButton={!isMobile}\n        overlayClassName=\"bg-black/20 lg:bg-black/50\"\n        className=\"\n          flex flex-col p-0 gap-0 max-w-full sm:max-w-full overflow-x-hidden border-0\n          rounded-t-2xl rounded-b-none h-[100dvh] top-0 bottom-0 left-0 right-0 translate-x-0 translate-y-0\n          lg:flex-row lg:w-[892px] lg:max-w-[892px] lg:h-[626px] lg:rounded-lg lg:border\n          lg:top-[50%] lg:bottom-auto lg:left-[50%] lg:right-auto lg:translate-x-[-50%] lg:translate-y-[-50%]\"\n      >\n        <DialogHeader className=\"sr-only\">\n          <DialogTitle>Configurações</DialogTitle>\n        </DialogHeader>\n        <div className=\"md:hidden flex items-center justify-between px-5 py-3 border-b border-gray-200\">\n          <span className=\"text-gray-950 paragraph-medium-semibold\">Configurações</span>\n          <button\n            type=\"button\"\n            className=\"size-8 flex items-center justify-center text-gray-500 cursor-pointer\"\n            onClick={close}\n          >\n            <IconX size={18} />\n          </button>\n        </div>\n        <Tabs\n          value={activeSection}\n          onValueChange={(value) => setActiveSection(value as AccountSectionType)}\n          orientation=\"vertical\"\n          className=\"flex lg:flex-row flex-col w-full h-full flex-1 lg:h-full lg:pt-0 lg:gap-0\"\n        >\n          <TabsList\n            className={cn(\n              'flex gap-0 bg-transparent border-b-0',\n\n              'lg:flex-col lg:items-stretch lg:justify-start lg:w-auto lg:min-w-60',\n              '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',\n\n              'flex-row items-center justify-start w-full overflow-x-auto scrollbar-hide shrink-0',\n              'px-4 py-3',\n              '[mask-image:linear-gradient(to_right,transparent,black_16px,black_calc(100%-24px),transparent)] lg:[mask-image:none]'\n            )}\n          >\n            <span className=\"hidden lg:block paragraph-medium-semibold text-gray-950 mb-0\">\n              Configurações\n            </span>\n\n            <div className=\"lg:flex lg:flex-col flex flex-row lg:gap-0 gap-0 lg:w-full\">\n              <TabsTrigger value={AccountSectionType.PREFERENCES} className={tabTriggerClasses}>\n                <IconSettings2 size={20} className=\"shrink-0\" />\n                <span className=\"paragraph-small-medium\">Preferências</span>\n              </TabsTrigger>\n\n              <TabsTrigger value={AccountSectionType.SECURITY} className={tabTriggerClasses}>\n                <IconLock size={20} className=\"shrink-0\" />\n                <span className=\"paragraph-small-medium\">Segurança</span>\n              </TabsTrigger>\n            </div>\n          </TabsList>\n\n          <div className=\"w-full flex-1 min-h-0 lg:h-full overflow-hidden lg:overflow-visible relative flex flex-col\">\n            <TabsContent value={AccountSectionType.PREFERENCES} className=\"h-full! relative overflow-hidden\">\n              <PreferencesSection onClose={close} />\n            </TabsContent>\n\n            <TabsContent value={AccountSectionType.SECURITY} className=\"h-full! relative overflow-hidden\">\n              <SecuritySection\n                setActiveSection={setActiveSection}\n                onClose={close}\n                onDeleteAccount={handleDeleteAccount}\n              />\n            </TabsContent>\n\n            <TabsContent value={AccountSectionType.CHANGE_PASSWORD} className=\"h-full! relative overflow-hidden\">\n              <ChangePasswordSection onBack={() => setActiveSection(AccountSectionType.SECURITY)} />\n            </TabsContent>\n          </div>\n        </Tabs>\n      </DialogContent>\n    </Dialog>\n  );\n}\n"],"mappings":";AAmEU,cAEF,YAFE;AAjEV,SAAS,UAAU,eAAe,aAAa;AAC/C,SAAS,QAAQ,eAAe,cAAc,mBAAmB;AACjE,SAAS,MAAM,UAAU,aAAa,mBAAmB;AACzD,SAAS,UAAU;AACnB,SAAS,0BAA0B;AACnC,SAAS,0BAA0B;AACnC,SAAS,6BAA6B;AACtC,SAAS,uBAAuB;AAChC,OAAO,4BAA4B;AACnC,OAAO,iBAAiB;AACxB,SAAS,wBAAwB;AAElB,SAAR,+BAAgD;AACrD,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,IAAI,iBAAiB;AAErB,QAAM,OAAO,gBAAgB;AAC7B,QAAM,EAAE,sBAAsB,IAAI;AAElC,QAAM,WAAW,YAAY;AAC7B,QAAM,EAAE,eAAe,iBAAiB,IAAI,uBAAuB;AAAA,IACjE,QAAQ;AAAA,EACV,CAAC;AAED,QAAM,sBAAsB,MAAM;AAChC,UAAM;AACN,QAAI,uBAAuB;AACzB,6BAAuB;AAAA,IACzB,OAAO;AACL,wBAAkB;AAAA,IACpB;AAAA,EACF;AAEA,QAAM,oBAAoB;AAAA,IACxB;AAAA,IAEA;AAAA,IACA;AAAA,IACA;AAAA,IAEA;AAAA,IACA;AAAA,IACA;AAAA,IAEA;AAAA,IACA;AAAA,EACF;AAEA,SACE,oBAAC,UAAO,MAAY,cAAc,OAChC;AAAA,IAAC;AAAA;AAAA,MACC,iBAAiB,CAAC;AAAA,MAClB,kBAAiB;AAAA,MACjB,WAAU;AAAA,MAMV;AAAA,4BAAC,gBAAa,WAAU,WACtB,8BAAC,eAAY,iCAAa,GAC5B;AAAA,QACA,qBAAC,SAAI,WAAU,kFACb;AAAA,8BAAC,UAAK,WAAU,2CAA0C,iCAAa;AAAA,UACvE;AAAA,YAAC;AAAA;AAAA,cACC,MAAK;AAAA,cACL,WAAU;AAAA,cACV,SAAS;AAAA,cAET,8BAAC,SAAM,MAAM,IAAI;AAAA;AAAA,UACnB;AAAA,WACF;AAAA,QACA;AAAA,UAAC;AAAA;AAAA,YACC,OAAO;AAAA,YACP,eAAe,CAAC,UAAU,iBAAiB,KAA2B;AAAA,YACtE,aAAY;AAAA,YACZ,WAAU;AAAA,YAEV;AAAA;AAAA,gBAAC;AAAA;AAAA,kBACC,WAAW;AAAA,oBACT;AAAA,oBAEA;AAAA,oBACA;AAAA,oBAEA;AAAA,oBACA;AAAA,oBACA;AAAA,kBACF;AAAA,kBAEA;AAAA,wCAAC,UAAK,WAAU,gEAA+D,iCAE/E;AAAA,oBAEA,qBAAC,SAAI,WAAU,8DACb;AAAA,2CAAC,eAAY,OAAO,mBAAmB,aAAa,WAAW,mBAC7D;AAAA,4CAAC,iBAAc,MAAM,IAAI,WAAU,YAAW;AAAA,wBAC9C,oBAAC,UAAK,WAAU,0BAAyB,6BAAY;AAAA,yBACvD;AAAA,sBAEA,qBAAC,eAAY,OAAO,mBAAmB,UAAU,WAAW,mBAC1D;AAAA,4CAAC,YAAS,MAAM,IAAI,WAAU,YAAW;AAAA,wBACzC,oBAAC,UAAK,WAAU,0BAAyB,0BAAS;AAAA,yBACpD;AAAA,uBACF;AAAA;AAAA;AAAA,cACF;AAAA,cAEA,qBAAC,SAAI,WAAU,8FACb;AAAA,oCAAC,eAAY,OAAO,mBAAmB,aAAa,WAAU,oCAC5D,8BAAC,sBAAmB,SAAS,OAAO,GACtC;AAAA,gBAEA,oBAAC,eAAY,OAAO,mBAAmB,UAAU,WAAU,oCACzD;AAAA,kBAAC;AAAA;AAAA,oBACC;AAAA,oBACA,SAAS;AAAA,oBACT,iBAAiB;AAAA;AAAA,gBACnB,GACF;AAAA,gBAEA,oBAAC,eAAY,OAAO,mBAAmB,iBAAiB,WAAU,oCAChE,8BAAC,yBAAsB,QAAQ,MAAM,iBAAiB,mBAAmB,QAAQ,GAAG,GACtF;AAAA,iBACF;AAAA;AAAA;AAAA,QACF;AAAA;AAAA;AAAA,EACF,GACF;AAEJ;","names":[]}

package/dist/components/account/TwoFactorAuthModal.mjs

@@ -1,6 +1,6 @@
 "use client";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { IconArrowLeft, IconX, IconCopy, IconRefresh } from "@tabler/icons-react";
+import { IconX, IconCopy, IconRefresh } from "@tabler/icons-react";
 import { Button } from "../ui/buttons/Button";
 import { Dialog, DialogContent, DialogHeader, DialogTitle } from "../ui/overlay/Dialog";
 import { Separator } from "../ui/data-display/Separator";
@@ -92,16 +92,6 @@ function TwoFactorAuthModal({ open, onClose, onSuccess }) {
       children: [
         /* @__PURE__ */ jsx(DialogHeader, { className: "sr-only", children: /* @__PURE__ */ jsx(DialogTitle, { children: "Autentica\xE7\xE3o de dois fatores" }) }),
         /* @__PURE__ */ jsxs("div", { className: "shrink-0 flex items-center justify-center px-4 py-3 relative border-b border-gray-200 lg:border-b-0", children: [
-          /* @__PURE__ */ jsx(
-            Button,
-            {
-              type: "button",
-              variant: "ghost",
-              className: "size-8! p-0 absolute left-4",
-              onClick: handleClose,
-              children: /* @__PURE__ */ jsx(IconArrowLeft, { size: 20 })
-            }
-          ),
           /* @__PURE__ */ jsx("span", { className: "paragraph-medium-semibold text-gray-950 text-center", children: "Autentica\xE7\xE3o de dois fatores" }),
           /* @__PURE__ */ jsx(
             Button,

package/dist/components/account/TwoFactorAuthModal.mjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/account/TwoFactorAuthModal.tsx"],"sourcesContent":["'use client';\n\nimport { IconArrowLeft, IconX, IconCopy, IconRefresh } from '@tabler/icons-react';\nimport { Button } from '../ui/buttons/Button';\nimport { Dialog, DialogContent, DialogHeader, DialogTitle } from '../ui/overlay/Dialog';\nimport { Separator } from '../ui/data-display/Separator';\nimport { InputOTP, InputOTPGroup, InputOTPSlot } from '../ui/form/InputOtp';\nimport useTwoFactorAuthForm from './hooks/useTwoFactorAuthForm';\n\ninterface TwoFactorAuthModalProps {\n  open: boolean;\n  onClose: () => void;\n  onSuccess?: () => void;\n}\n\nexport default function TwoFactorAuthModal({ open, onClose, onSuccess }: TwoFactorAuthModalProps) {\n  const {\n    code,\n    setCode,\n    isCodeComplete,\n    isGenerating,\n    isConfirming,\n    generateFailed,\n    retryGenerate,\n    qrcode,\n    backupCodes,\n    step,\n    handleSubmit,\n    handleFinalize,\n    handleCopyCodes,\n    resetForm,\n  } = useTwoFactorAuthForm({ onSuccess, open });\n\n  const handleClose = () => {\n    resetForm();\n    onClose();\n  };\n\n  if (step === 'recovery') {\n    return (\n      <Dialog open={open} onOpenChange={handleClose}>\n        <DialogContent\n          showCloseButton={false}\n          overlayClassName=\"z-[1010]\"\n          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%]\"\n        >\n          <DialogHeader className=\"sr-only\">\n            <DialogTitle>Códigos de segurança</DialogTitle>\n          </DialogHeader>\n          <div className=\"flex items-center justify-center px-4 py-3 relative border-b border-gray-200 lg:border-b-0\">\n            <span className=\"paragraph-medium-semibold text-gray-950 text-center\">\n              Códigos de segurança\n            </span>\n            <Button\n              type=\"button\"\n              variant=\"ghost\"\n              className=\"size-8! p-0 absolute right-4\"\n              onClick={handleClose}\n            >\n              <IconX size={18} />\n            </Button>\n          </div>\n\n          <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\">\n            <div className=\"flex flex-col gap-2\">\n              <h3 className=\"paragraph-medium-semibold text-gray-950 max-w-[269px]\">\n                Salve estes códigos de recuperação de emergência\n              </h3>\n              <div className=\"paragraph-small-regular text-gray-600\">\n                <p>\n                  Se você perder acesso ao seu telefone, não será possível fazer login em sua conta\n                  sem um código de dois fatores.\n                </p>\n                <br />\n                <p>Imprima, copie ou escreva em um local seguro os códigos abaixo.</p>\n              </div>\n            </div>\n\n            <div className=\"bg-gray-50 rounded-lg p-4 flex flex-col gap-4\">\n              <div className=\"paragraph-small-medium text-gray-950 whitespace-nowrap\">\n                {backupCodes.map((backupCode, i) => (\n                  <p key={i}>{backupCode}</p>\n                ))}\n              </div>\n              <Button\n                type=\"button\"\n                variant=\"secondary\"\n                className=\"h-8! w-fit\"\n                onClick={handleCopyCodes}\n              >\n                <IconCopy size={16} />\n                Copiar códigos\n              </Button>\n            </div>\n          </div>\n\n          <div className=\"flex items-center p-4 lg:p-5 border-t border-gray-200 justify-between mt-auto lg:mt-0\">\n            <Button variant=\"secondary\" className=\"h-10!\" type=\"button\" onClick={handleClose}>\n              Cancelar\n            </Button>\n            <Button className=\"h-10!\" type=\"button\" onClick={handleFinalize}>\n              Finalizar\n            </Button>\n          </div>\n        </DialogContent>\n      </Dialog>\n    );\n  }\n\n  return (\n    <Dialog open={open} onOpenChange={handleClose}>\n      <DialogContent\n        showCloseButton={false}\n        overlayClassName=\"z-[1010]\"\n        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%]\"\n      >\n        <DialogHeader className=\"sr-only\">\n          <DialogTitle>Autenticação de dois fatores</DialogTitle>\n        </DialogHeader>\n        <div className=\"shrink-0 flex items-center justify-center px-4 py-3 relative border-b border-gray-200 lg:border-b-0\">\n          <Button\n            type=\"button\"\n            variant=\"ghost\"\n            className=\"size-8! p-0 absolute left-4\"\n            onClick={handleClose}\n          >\n            <IconArrowLeft size={20} />\n          </Button>\n          <span className=\"paragraph-medium-semibold text-gray-950 text-center\">\n            Autenticação de dois fatores\n          </span>\n          <Button\n            type=\"button\"\n            variant=\"ghost\"\n            className=\"size-8! p-0 absolute right-4\"\n            onClick={handleClose}\n          >\n            <IconX size={18} />\n          </Button>\n        </div>\n\n        <form\n          className=\"flex-1 min-h-0 flex flex-col\"\n          onSubmit={(e) => {\n            e.preventDefault();\n            if (isCodeComplete) handleSubmit();\n          }}\n        >\n          <div className=\"flex-1 min-h-0 overflow-y-auto overscroll-contain lg:overflow-visible\">\n            <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\">\n              <p className=\"paragraph-small-regular text-gray-950 text-center max-w-full lg:max-w-[412px]\">\n                Instale um aplicativo autenticador no seu celular (ex.:{' '}\n                <a\n                  href=\"https://support.google.com/accounts/answer/1066447\"\n                  target=\"_blank\"\n                  rel=\"noopener noreferrer\"\n                  className=\"paragraph-small-medium underline\"\n                >\n                  Google Authenticator\n                </a>\n                ), escaneie o QR Code ao lado ou copie a chave no aplicativo e, em seguida, digite o\n                código de 6 dígitos gerado para continuar.\n              </p>\n\n              <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]\">\n                {generateFailed ? (\n                  <button\n                    type=\"button\"\n                    onClick={() => retryGenerate()}\n                    className=\"flex flex-col items-center gap-1.5 text-center\"\n                  >\n                    <IconRefresh size={20} className=\"text-gray-400\" />\n                    <span className=\"paragraph-xsmall-medium text-gray-500\">Tentar novamente</span>\n                  </button>\n                ) : isGenerating || !qrcode ? (\n                  <div className=\"skeleton w-full h-full rounded\" />\n                ) : (\n                  // eslint-disable-next-line @next/next/no-img-element\n                  <img\n                    src={qrcode}\n                    alt=\"QR Code para autenticação de dois fatores\"\n                    className=\"w-full h-full\"\n                  />\n                )}\n              </div>\n\n              <div className=\"flex items-center gap-3 w-full\">\n                <Separator className=\"flex-1\" />\n                <span className=\"paragraph-xsmall-medium text-gray-500 opacity-80 whitespace-nowrap\">\n                  Cole os 6 dígitos abaixo\n                </span>\n                <Separator className=\"flex-1\" />\n              </div>\n\n              <div className=\"scroll-mt-20\">\n                <InputOTP maxLength={6} value={code} onChange={setCode}>\n                  <InputOTPGroup className=\"gap-2\">\n                    {Array.from({ length: 6 }).map((_, i) => (\n                      <InputOTPSlot\n                        key={i}\n                        index={i}\n                        className=\"w-11! lg:w-12! h-13! lg:h-14! rounded-lg! text-lg border-gray-200\"\n                      />\n                    ))}\n                  </InputOTPGroup>\n                </InputOTP>\n              </div>\n            </div>\n          </div>\n\n          <div className=\"shrink-0 flex items-center p-4 lg:p-5 border-t border-gray-200 justify-between gap-2 bg-white\">\n            <Button variant=\"secondary\" className=\"h-10!\" type=\"button\" onClick={handleClose}>\n              Cancelar\n            </Button>\n            <Button type=\"submit\" className=\"h-10!\" disabled={!isCodeComplete || isConfirming}>\n              {isConfirming ? 'Ativando...' : 'Ativar autenticação'}\n            </Button>\n          </div>\n        </form>\n      </DialogContent>\n    </Dialog>\n  );\n}\n"],"mappings":"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","names":[]}
+{"version":3,"sources":["../../../src/components/account/TwoFactorAuthModal.tsx"],"sourcesContent":["'use client';\n\nimport { IconX, IconCopy, IconRefresh } from '@tabler/icons-react';\nimport { Button } from '../ui/buttons/Button';\nimport { Dialog, DialogContent, DialogHeader, DialogTitle } from '../ui/overlay/Dialog';\nimport { Separator } from '../ui/data-display/Separator';\nimport { InputOTP, InputOTPGroup, InputOTPSlot } from '../ui/form/InputOtp';\nimport useTwoFactorAuthForm from './hooks/useTwoFactorAuthForm';\n\ninterface TwoFactorAuthModalProps {\n  open: boolean;\n  onClose: () => void;\n  onSuccess?: () => void;\n}\n\nexport default function TwoFactorAuthModal({ open, onClose, onSuccess }: TwoFactorAuthModalProps) {\n  const {\n    code,\n    setCode,\n    isCodeComplete,\n    isGenerating,\n    isConfirming,\n    generateFailed,\n    retryGenerate,\n    qrcode,\n    backupCodes,\n    step,\n    handleSubmit,\n    handleFinalize,\n    handleCopyCodes,\n    resetForm,\n  } = useTwoFactorAuthForm({ onSuccess, open });\n\n  const handleClose = () => {\n    resetForm();\n    onClose();\n  };\n\n  if (step === 'recovery') {\n    return (\n      <Dialog open={open} onOpenChange={handleClose}>\n        <DialogContent\n          showCloseButton={false}\n          overlayClassName=\"z-[1010]\"\n          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%]\"\n        >\n          <DialogHeader className=\"sr-only\">\n            <DialogTitle>Códigos de segurança</DialogTitle>\n          </DialogHeader>\n          <div className=\"flex items-center justify-center px-4 py-3 relative border-b border-gray-200 lg:border-b-0\">\n            <span className=\"paragraph-medium-semibold text-gray-950 text-center\">\n              Códigos de segurança\n            </span>\n            <Button\n              type=\"button\"\n              variant=\"ghost\"\n              className=\"size-8! p-0 absolute right-4\"\n              onClick={handleClose}\n            >\n              <IconX size={18} />\n            </Button>\n          </div>\n\n          <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\">\n            <div className=\"flex flex-col gap-2\">\n              <h3 className=\"paragraph-medium-semibold text-gray-950 max-w-[269px]\">\n                Salve estes códigos de recuperação de emergência\n              </h3>\n              <div className=\"paragraph-small-regular text-gray-600\">\n                <p>\n                  Se você perder acesso ao seu telefone, não será possível fazer login em sua conta\n                  sem um código de dois fatores.\n                </p>\n                <br />\n                <p>Imprima, copie ou escreva em um local seguro os códigos abaixo.</p>\n              </div>\n            </div>\n\n            <div className=\"bg-gray-50 rounded-lg p-4 flex flex-col gap-4\">\n              <div className=\"paragraph-small-medium text-gray-950 whitespace-nowrap\">\n                {backupCodes.map((backupCode, i) => (\n                  <p key={i}>{backupCode}</p>\n                ))}\n              </div>\n              <Button\n                type=\"button\"\n                variant=\"secondary\"\n                className=\"h-8! w-fit\"\n                onClick={handleCopyCodes}\n              >\n                <IconCopy size={16} />\n                Copiar códigos\n              </Button>\n            </div>\n          </div>\n\n          <div className=\"flex items-center p-4 lg:p-5 border-t border-gray-200 justify-between mt-auto lg:mt-0\">\n            <Button variant=\"secondary\" className=\"h-10!\" type=\"button\" onClick={handleClose}>\n              Cancelar\n            </Button>\n            <Button className=\"h-10!\" type=\"button\" onClick={handleFinalize}>\n              Finalizar\n            </Button>\n          </div>\n        </DialogContent>\n      </Dialog>\n    );\n  }\n\n  return (\n    <Dialog open={open} onOpenChange={handleClose}>\n      <DialogContent\n        showCloseButton={false}\n        overlayClassName=\"z-[1010]\"\n        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%]\"\n      >\n        <DialogHeader className=\"sr-only\">\n          <DialogTitle>Autenticação de dois fatores</DialogTitle>\n        </DialogHeader>\n        <div className=\"shrink-0 flex items-center justify-center px-4 py-3 relative border-b border-gray-200 lg:border-b-0\">\n          <span className=\"paragraph-medium-semibold text-gray-950 text-center\">\n            Autenticação de dois fatores\n          </span>\n          <Button\n            type=\"button\"\n            variant=\"ghost\"\n            className=\"size-8! p-0 absolute right-4\"\n            onClick={handleClose}\n          >\n            <IconX size={18} />\n          </Button>\n        </div>\n\n        <form\n          className=\"flex-1 min-h-0 flex flex-col\"\n          onSubmit={(e) => {\n            e.preventDefault();\n            if (isCodeComplete) handleSubmit();\n          }}\n        >\n          <div className=\"flex-1 min-h-0 overflow-y-auto overscroll-contain lg:overflow-visible\">\n            <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\">\n              <p className=\"paragraph-small-regular text-gray-950 text-center max-w-full lg:max-w-[412px]\">\n                Instale um aplicativo autenticador no seu celular (ex.:{' '}\n                <a\n                  href=\"https://support.google.com/accounts/answer/1066447\"\n                  target=\"_blank\"\n                  rel=\"noopener noreferrer\"\n                  className=\"paragraph-small-medium underline\"\n                >\n                  Google Authenticator\n                </a>\n                ), escaneie o QR Code ao lado ou copie a chave no aplicativo e, em seguida, digite o\n                código de 6 dígitos gerado para continuar.\n              </p>\n\n              <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]\">\n                {generateFailed ? (\n                  <button\n                    type=\"button\"\n                    onClick={() => retryGenerate()}\n                    className=\"flex flex-col items-center gap-1.5 text-center\"\n                  >\n                    <IconRefresh size={20} className=\"text-gray-400\" />\n                    <span className=\"paragraph-xsmall-medium text-gray-500\">Tentar novamente</span>\n                  </button>\n                ) : isGenerating || !qrcode ? (\n                  <div className=\"skeleton w-full h-full rounded\" />\n                ) : (\n                  // eslint-disable-next-line @next/next/no-img-element\n                  <img\n                    src={qrcode}\n                    alt=\"QR Code para autenticação de dois fatores\"\n                    className=\"w-full h-full\"\n                  />\n                )}\n              </div>\n\n              <div className=\"flex items-center gap-3 w-full\">\n                <Separator className=\"flex-1\" />\n                <span className=\"paragraph-xsmall-medium text-gray-500 opacity-80 whitespace-nowrap\">\n                  Cole os 6 dígitos abaixo\n                </span>\n                <Separator className=\"flex-1\" />\n              </div>\n\n              <div className=\"scroll-mt-20\">\n                <InputOTP maxLength={6} value={code} onChange={setCode}>\n                  <InputOTPGroup className=\"gap-2\">\n                    {Array.from({ length: 6 }).map((_, i) => (\n                      <InputOTPSlot\n                        key={i}\n                        index={i}\n                        className=\"w-11! lg:w-12! h-13! lg:h-14! rounded-lg! text-lg border-gray-200\"\n                      />\n                    ))}\n                  </InputOTPGroup>\n                </InputOTP>\n              </div>\n            </div>\n          </div>\n\n          <div className=\"shrink-0 flex items-center p-4 lg:p-5 border-t border-gray-200 justify-between gap-2 bg-white\">\n            <Button variant=\"secondary\" className=\"h-10!\" type=\"button\" onClick={handleClose}>\n              Cancelar\n            </Button>\n            <Button type=\"submit\" className=\"h-10!\" disabled={!isCodeComplete || isConfirming}>\n              {isConfirming ? 'Ativando...' : 'Ativar autenticação'}\n            </Button>\n          </div>\n        </form>\n      </DialogContent>\n    </Dialog>\n  );\n}\n"],"mappings":"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","names":[]}

package/dist/components/account/hooks/useChangePhoneForm.mjs

@@ -3,14 +3,14 @@ import { jsx } from "react/jsx-runtime";
 import { useState, useCallback } from "react";
 import { toast } from "sonner";
 import { Toast } from "../../ui/feedback/Toast";
-import { requestPhoneChangeAction } from "../../../modules/accounts/actions/account-management.action";
+import { requestPhoneChangeAction, updateUserAction } from "../../../modules/accounts/actions/account-management.action";
 function splitPhoneValue(fullValue) {
   const trimmed = fullValue.trim();
   const spaceIdx = trimmed.indexOf(" ");
   if (spaceIdx === -1) return { ddi: "+55", local: trimmed };
   return { ddi: trimmed.slice(0, spaceIdx), local: trimmed.slice(spaceIdx + 1) };
 }
-function useChangePhoneForm() {
+function useChangePhoneForm({ hasExistingPhone, onDirectUpdateSuccess }) {
   const [showVerification, setShowVerification] = useState(false);
   const [phoneValue, setPhoneValue] = useState("");
   const [phoneError, setPhoneError] = useState("");
@@ -29,6 +29,23 @@ function useChangePhoneForm() {
     }
     setIsSubmitting(true);
     try {
+      if (!hasExistingPhone) {
+        const result2 = await updateUserAction({ phone: local, ddi });
+        if (!result2.success) {
+          toast.custom((t) => /* @__PURE__ */ jsx(
+            Toast,
+            {
+              variant: "error",
+              message: result2.error ?? "Ocorreu um erro ao salvar o telefone. Tente novamente mais tarde.",
+              toastId: t
+            }
+          ));
+          return;
+        }
+        toast.custom((t) => /* @__PURE__ */ jsx(Toast, { variant: "success", message: "Telefone adicionado", toastId: t }));
+        onDirectUpdateSuccess?.();
+        return;
+      }
       const result = await requestPhoneChangeAction(local, ddi);
       if (!result.success) {
         toast.custom((t) => /* @__PURE__ */ jsx(
@@ -46,7 +63,7 @@ function useChangePhoneForm() {
     } finally {
       setIsSubmitting(false);
     }
-  }, [phoneValue]);
+  }, [phoneValue, hasExistingPhone, onDirectUpdateSuccess]);
   const handleBack = useCallback(() => {
     setShowVerification(false);
   }, []);

package/dist/components/account/hooks/useChangePhoneForm.mjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/account/hooks/useChangePhoneForm.tsx"],"sourcesContent":["'use client';\n\nimport { useState, useCallback } from 'react';\nimport { toast } from 'sonner';\nimport { Toast } from '../../ui/feedback/Toast';\nimport { requestPhoneChangeAction } from '../../../modules/accounts/actions/account-management.action';\n\nfunction splitPhoneValue(fullValue: string): { ddi: string; local: string } {\n  const trimmed = fullValue.trim();\n  const spaceIdx = trimmed.indexOf(' ');\n  if (spaceIdx === -1) return { ddi: '+55', local: trimmed };\n  return { ddi: trimmed.slice(0, spaceIdx), local: trimmed.slice(spaceIdx + 1) };\n}\n\nexport default function useChangePhoneForm() {\n  const [showVerification, setShowVerification] = useState(false);\n  const [phoneValue, setPhoneValue] = useState('');\n  const [phoneError, setPhoneError] = useState('');\n  const [isSubmitting, setIsSubmitting] = useState(false);\n  const [submittedPhone, setSubmittedPhone] = useState({ ddi: '+55', local: '' });\n\n  const handlePhoneChange = useCallback((value: string) => {\n    setPhoneValue(value);\n    if (phoneError) setPhoneError('');\n  }, [phoneError]);\n\n  const handleContinue = useCallback(async (e: React.FormEvent) => {\n    e.preventDefault();\n\n    const { ddi, local } = splitPhoneValue(phoneValue);\n\n    if (!local || local.replace(/\\D/g, '').length < 8) {\n      setPhoneError('Número de telefone inválido');\n      return;\n    }\n\n    setIsSubmitting(true);\n    try {\n      const result = await requestPhoneChangeAction(local, ddi);\n\n      if (!result.success) {\n        toast.custom((t) => (\n          <Toast\n            variant=\"error\"\n            message={result.error ?? 'Número já existente ou ocorreu um erro. Tente novamente mais tarde.'}\n            toastId={t}\n          />\n        ));\n        return;\n      }\n\n      setSubmittedPhone({ ddi, local });\n      setShowVerification(true);\n    } finally {\n      setIsSubmitting(false);\n    }\n  }, [phoneValue]);\n\n  const handleBack = useCallback(() => {\n    setShowVerification(false);\n  }, []);\n\n  const resetForm = useCallback(() => {\n    setPhoneValue('');\n    setPhoneError('');\n    setSubmittedPhone({ ddi: '+55', local: '' });\n    setShowVerification(false);\n  }, []);\n\n  return {\n    showVerification,\n    phoneValue,\n    phoneError,\n    isSubmitting,\n    submittedPhone,\n    handlePhoneChange,\n    handleContinue,\n    handleBack,\n    resetForm,\n  };\n}\n"],"mappings":";AA0CU;AAxCV,SAAS,UAAU,mBAAmB;AACtC,SAAS,aAAa;AACtB,SAAS,aAAa;AACtB,SAAS,gCAAgC;AAEzC,SAAS,gBAAgB,WAAmD;AAC1E,QAAM,UAAU,UAAU,KAAK;AAC/B,QAAM,WAAW,QAAQ,QAAQ,GAAG;AACpC,MAAI,aAAa,GAAI,QAAO,EAAE,KAAK,OAAO,OAAO,QAAQ;AACzD,SAAO,EAAE,KAAK,QAAQ,MAAM,GAAG,QAAQ,GAAG,OAAO,QAAQ,MAAM,WAAW,CAAC,EAAE;AAC/E;AAEe,SAAR,qBAAsC;AAC3C,QAAM,CAAC,kBAAkB,mBAAmB,IAAI,SAAS,KAAK;AAC9D,QAAM,CAAC,YAAY,aAAa,IAAI,SAAS,EAAE;AAC/C,QAAM,CAAC,YAAY,aAAa,IAAI,SAAS,EAAE;AAC/C,QAAM,CAAC,cAAc,eAAe,IAAI,SAAS,KAAK;AACtD,QAAM,CAAC,gBAAgB,iBAAiB,IAAI,SAAS,EAAE,KAAK,OAAO,OAAO,GAAG,CAAC;AAE9E,QAAM,oBAAoB,YAAY,CAAC,UAAkB;AACvD,kBAAc,KAAK;AACnB,QAAI,WAAY,eAAc,EAAE;AAAA,EAClC,GAAG,CAAC,UAAU,CAAC;AAEf,QAAM,iBAAiB,YAAY,OAAO,MAAuB;AAC/D,MAAE,eAAe;AAEjB,UAAM,EAAE,KAAK,MAAM,IAAI,gBAAgB,UAAU;AAEjD,QAAI,CAAC,SAAS,MAAM,QAAQ,OAAO,EAAE,EAAE,SAAS,GAAG;AACjD,oBAAc,mCAA6B;AAC3C;AAAA,IACF;AAEA,oBAAgB,IAAI;AACpB,QAAI;AACF,YAAM,SAAS,MAAM,yBAAyB,OAAO,GAAG;AAExD,UAAI,CAAC,OAAO,SAAS;AACnB,cAAM,OAAO,CAAC,MACZ;AAAA,UAAC;AAAA;AAAA,YACC,SAAQ;AAAA,YACR,SAAS,OAAO,SAAS;AAAA,YACzB,SAAS;AAAA;AAAA,QACX,CACD;AACD;AAAA,MACF;AAEA,wBAAkB,EAAE,KAAK,MAAM,CAAC;AAChC,0BAAoB,IAAI;AAAA,IAC1B,UAAE;AACA,sBAAgB,KAAK;AAAA,IACvB;AAAA,EACF,GAAG,CAAC,UAAU,CAAC;AAEf,QAAM,aAAa,YAAY,MAAM;AACnC,wBAAoB,KAAK;AAAA,EAC3B,GAAG,CAAC,CAAC;AAEL,QAAM,YAAY,YAAY,MAAM;AAClC,kBAAc,EAAE;AAChB,kBAAc,EAAE;AAChB,sBAAkB,EAAE,KAAK,OAAO,OAAO,GAAG,CAAC;AAC3C,wBAAoB,KAAK;AAAA,EAC3B,GAAG,CAAC,CAAC;AAEL,SAAO;AAAA,IACL;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF;AACF;","names":[]}
+{"version":3,"sources":["../../../../src/components/account/hooks/useChangePhoneForm.tsx"],"sourcesContent":["'use client';\n\nimport { useState, useCallback } from 'react';\nimport { toast } from 'sonner';\nimport { Toast } from '../../ui/feedback/Toast';\nimport { requestPhoneChangeAction, updateUserAction } from '../../../modules/accounts/actions/account-management.action';\n\nfunction splitPhoneValue(fullValue: string): { ddi: string; local: string } {\n  const trimmed = fullValue.trim();\n  const spaceIdx = trimmed.indexOf(' ');\n  if (spaceIdx === -1) return { ddi: '+55', local: trimmed };\n  return { ddi: trimmed.slice(0, spaceIdx), local: trimmed.slice(spaceIdx + 1) };\n}\n\ninterface UseChangePhoneFormOptions {\n  hasExistingPhone: boolean;\n  onDirectUpdateSuccess?: () => void;\n}\n\nexport default function useChangePhoneForm({ hasExistingPhone, onDirectUpdateSuccess }: UseChangePhoneFormOptions) {\n  const [showVerification, setShowVerification] = useState(false);\n  const [phoneValue, setPhoneValue] = useState('');\n  const [phoneError, setPhoneError] = useState('');\n  const [isSubmitting, setIsSubmitting] = useState(false);\n  const [submittedPhone, setSubmittedPhone] = useState({ ddi: '+55', local: '' });\n\n  const handlePhoneChange = useCallback((value: string) => {\n    setPhoneValue(value);\n    if (phoneError) setPhoneError('');\n  }, [phoneError]);\n\n  const handleContinue = useCallback(async (e: React.FormEvent) => {\n    e.preventDefault();\n\n    const { ddi, local } = splitPhoneValue(phoneValue);\n\n    if (!local || local.replace(/\\D/g, '').length < 8) {\n      setPhoneError('Número de telefone inválido');\n      return;\n    }\n\n    setIsSubmitting(true);\n    try {\n      if (!hasExistingPhone) {\n        const result = await updateUserAction({ phone: local, ddi });\n\n        if (!result.success) {\n          toast.custom((t) => (\n            <Toast\n              variant=\"error\"\n              message={result.error ?? 'Ocorreu um erro ao salvar o telefone. Tente novamente mais tarde.'}\n              toastId={t}\n            />\n          ));\n          return;\n        }\n\n        toast.custom((t) => (\n          <Toast variant=\"success\" message=\"Telefone adicionado\" toastId={t} />\n        ));\n        onDirectUpdateSuccess?.();\n        return;\n      }\n\n      const result = await requestPhoneChangeAction(local, ddi);\n\n      if (!result.success) {\n        toast.custom((t) => (\n          <Toast\n            variant=\"error\"\n            message={result.error ?? 'Número já existente ou ocorreu um erro. Tente novamente mais tarde.'}\n            toastId={t}\n          />\n        ));\n        return;\n      }\n\n      setSubmittedPhone({ ddi, local });\n      setShowVerification(true);\n    } finally {\n      setIsSubmitting(false);\n    }\n  }, [phoneValue, hasExistingPhone, onDirectUpdateSuccess]);\n\n  const handleBack = useCallback(() => {\n    setShowVerification(false);\n  }, []);\n\n  const resetForm = useCallback(() => {\n    setPhoneValue('');\n    setPhoneError('');\n    setSubmittedPhone({ ddi: '+55', local: '' });\n    setShowVerification(false);\n  }, []);\n\n  return {\n    showVerification,\n    phoneValue,\n    phoneError,\n    isSubmitting,\n    submittedPhone,\n    handlePhoneChange,\n    handleContinue,\n    handleBack,\n    resetForm,\n  };\n}\n"],"mappings":";AAgDY;AA9CZ,SAAS,UAAU,mBAAmB;AACtC,SAAS,aAAa;AACtB,SAAS,aAAa;AACtB,SAAS,0BAA0B,wBAAwB;AAE3D,SAAS,gBAAgB,WAAmD;AAC1E,QAAM,UAAU,UAAU,KAAK;AAC/B,QAAM,WAAW,QAAQ,QAAQ,GAAG;AACpC,MAAI,aAAa,GAAI,QAAO,EAAE,KAAK,OAAO,OAAO,QAAQ;AACzD,SAAO,EAAE,KAAK,QAAQ,MAAM,GAAG,QAAQ,GAAG,OAAO,QAAQ,MAAM,WAAW,CAAC,EAAE;AAC/E;AAOe,SAAR,mBAAoC,EAAE,kBAAkB,sBAAsB,GAA8B;AACjH,QAAM,CAAC,kBAAkB,mBAAmB,IAAI,SAAS,KAAK;AAC9D,QAAM,CAAC,YAAY,aAAa,IAAI,SAAS,EAAE;AAC/C,QAAM,CAAC,YAAY,aAAa,IAAI,SAAS,EAAE;AAC/C,QAAM,CAAC,cAAc,eAAe,IAAI,SAAS,KAAK;AACtD,QAAM,CAAC,gBAAgB,iBAAiB,IAAI,SAAS,EAAE,KAAK,OAAO,OAAO,GAAG,CAAC;AAE9E,QAAM,oBAAoB,YAAY,CAAC,UAAkB;AACvD,kBAAc,KAAK;AACnB,QAAI,WAAY,eAAc,EAAE;AAAA,EAClC,GAAG,CAAC,UAAU,CAAC;AAEf,QAAM,iBAAiB,YAAY,OAAO,MAAuB;AAC/D,MAAE,eAAe;AAEjB,UAAM,EAAE,KAAK,MAAM,IAAI,gBAAgB,UAAU;AAEjD,QAAI,CAAC,SAAS,MAAM,QAAQ,OAAO,EAAE,EAAE,SAAS,GAAG;AACjD,oBAAc,mCAA6B;AAC3C;AAAA,IACF;AAEA,oBAAgB,IAAI;AACpB,QAAI;AACF,UAAI,CAAC,kBAAkB;AACrB,cAAMA,UAAS,MAAM,iBAAiB,EAAE,OAAO,OAAO,IAAI,CAAC;AAE3D,YAAI,CAACA,QAAO,SAAS;AACnB,gBAAM,OAAO,CAAC,MACZ;AAAA,YAAC;AAAA;AAAA,cACC,SAAQ;AAAA,cACR,SAASA,QAAO,SAAS;AAAA,cACzB,SAAS;AAAA;AAAA,UACX,CACD;AACD;AAAA,QACF;AAEA,cAAM,OAAO,CAAC,MACZ,oBAAC,SAAM,SAAQ,WAAU,SAAQ,uBAAsB,SAAS,GAAG,CACpE;AACD,gCAAwB;AACxB;AAAA,MACF;AAEA,YAAM,SAAS,MAAM,yBAAyB,OAAO,GAAG;AAExD,UAAI,CAAC,OAAO,SAAS;AACnB,cAAM,OAAO,CAAC,MACZ;AAAA,UAAC;AAAA;AAAA,YACC,SAAQ;AAAA,YACR,SAAS,OAAO,SAAS;AAAA,YACzB,SAAS;AAAA;AAAA,QACX,CACD;AACD;AAAA,MACF;AAEA,wBAAkB,EAAE,KAAK,MAAM,CAAC;AAChC,0BAAoB,IAAI;AAAA,IAC1B,UAAE;AACA,sBAAgB,KAAK;AAAA,IACvB;AAAA,EACF,GAAG,CAAC,YAAY,kBAAkB,qBAAqB,CAAC;AAExD,QAAM,aAAa,YAAY,MAAM;AACnC,wBAAoB,KAAK;AAAA,EAC3B,GAAG,CAAC,CAAC;AAEL,QAAM,YAAY,YAAY,MAAM;AAClC,kBAAc,EAAE;AAChB,kBAAc,EAAE;AAChB,sBAAkB,EAAE,KAAK,OAAO,OAAO,GAAG,CAAC;AAC3C,wBAAoB,KAAK;AAAA,EAC3B,GAAG,CAAC,CAAC;AAEL,SAAO;AAAA,IACL;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF;AACF;","names":["result"]}

package/dist/components/account/hooks/useConfigurationsModal.mjs

@@ -6,21 +6,21 @@ function useConfigurationsModal({
   initialSection
 }) {
   const [activeSection, setActiveSection] = useState(
-    AccountSectionType.MY_PROFILE
+    AccountSectionType.PREFERENCES
   );
   const isValidSection = (section) => Object.values(AccountSectionType).includes(section);
   useEffect(() => {
     if (isOpen && isValidSection(initialSection)) {
       setActiveSection(initialSection);
     } else if (isOpen) {
-      setActiveSection(AccountSectionType.MY_PROFILE);
+      setActiveSection(AccountSectionType.PREFERENCES);
     }
   }, [isOpen, initialSection]);
   const handleSectionChange = useCallback((section) => {
     setActiveSection(section);
   }, []);
   const resetSection = useCallback(() => {
-    setActiveSection(AccountSectionType.MY_PROFILE);
+    setActiveSection(AccountSectionType.PREFERENCES);
   }, []);
   return {
     activeSection,

package/dist/components/account/hooks/useConfigurationsModal.mjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/account/hooks/useConfigurationsModal.ts"],"sourcesContent":["\"use client\";\r\n\r\nimport { useState, useCallback, useEffect } from \"react\";\r\nimport { AccountSectionType } from \"../../../enums/AccountSectionType\";\r\n\r\ninterface UseConfigurationsModalProps {\r\n  isOpen: boolean;\r\n  initialSection?: AccountSectionType;\r\n}\r\n\r\nexport default function useConfigurationsModal({\r\n  isOpen,\r\n  initialSection,\r\n}: UseConfigurationsModalProps) {\r\n  const [activeSection, setActiveSection] = useState<AccountSectionType>(\r\n    AccountSectionType.MY_PROFILE,\r\n  );\r\n\r\n  const isValidSection = (\r\n    section?: AccountSectionType,\r\n  ): section is AccountSectionType =>\r\n    Object.values(AccountSectionType).includes(section as AccountSectionType);\r\n\r\n  useEffect(() => {\r\n    if (isOpen && isValidSection(initialSection)) {\r\n      setActiveSection(initialSection);\r\n    } else if (isOpen) {\r\n      setActiveSection(AccountSectionType.MY_PROFILE);\r\n    }\r\n  }, [isOpen, initialSection]);\r\n\r\n  const handleSectionChange = useCallback((section: AccountSectionType) => {\r\n    setActiveSection(section);\r\n  }, []);\r\n\r\n  const resetSection = useCallback(() => {\r\n    setActiveSection(AccountSectionType.MY_PROFILE);\r\n  }, []);\r\n\r\n  return {\r\n    activeSection,\r\n    setActiveSection: handleSectionChange,\r\n    resetSection,\r\n  };\r\n}\r\n"],"mappings":";AAEA,SAAS,UAAU,aAAa,iBAAiB;AACjD,SAAS,0BAA0B;AAOpB,SAAR,uBAAwC;AAAA,EAC7C;AAAA,EACA;AACF,GAAgC;AAC9B,QAAM,CAAC,eAAe,gBAAgB,IAAI;AAAA,IACxC,mBAAmB;AAAA,EACrB;AAEA,QAAM,iBAAiB,CACrB,YAEA,OAAO,OAAO,kBAAkB,EAAE,SAAS,OAA6B;AAE1E,YAAU,MAAM;AACd,QAAI,UAAU,eAAe,cAAc,GAAG;AAC5C,uBAAiB,cAAc;AAAA,IACjC,WAAW,QAAQ;AACjB,uBAAiB,mBAAmB,UAAU;AAAA,IAChD;AAAA,EACF,GAAG,CAAC,QAAQ,cAAc,CAAC;AAE3B,QAAM,sBAAsB,YAAY,CAAC,YAAgC;AACvE,qBAAiB,OAAO;AAAA,EAC1B,GAAG,CAAC,CAAC;AAEL,QAAM,eAAe,YAAY,MAAM;AACrC,qBAAiB,mBAAmB,UAAU;AAAA,EAChD,GAAG,CAAC,CAAC;AAEL,SAAO;AAAA,IACL;AAAA,IACA,kBAAkB;AAAA,IAClB;AAAA,EACF;AACF;","names":[]}
+{"version":3,"sources":["../../../../src/components/account/hooks/useConfigurationsModal.ts"],"sourcesContent":["\"use client\";\r\n\r\nimport { useState, useCallback, useEffect } from \"react\";\r\nimport { AccountSectionType } from \"../../../enums/AccountSectionType\";\r\n\r\ninterface UseConfigurationsModalProps {\r\n  isOpen: boolean;\r\n  initialSection?: AccountSectionType;\r\n}\r\n\r\nexport default function useConfigurationsModal({\r\n  isOpen,\r\n  initialSection,\r\n}: UseConfigurationsModalProps) {\r\n  const [activeSection, setActiveSection] = useState<AccountSectionType>(\r\n    AccountSectionType.PREFERENCES,\r\n  );\r\n\r\n  const isValidSection = (\r\n    section?: AccountSectionType,\r\n  ): section is AccountSectionType =>\r\n    Object.values(AccountSectionType).includes(section as AccountSectionType);\r\n\r\n  useEffect(() => {\r\n    if (isOpen && isValidSection(initialSection)) {\r\n      setActiveSection(initialSection);\r\n    } else if (isOpen) {\r\n      setActiveSection(AccountSectionType.PREFERENCES);\r\n    }\r\n  }, [isOpen, initialSection]);\r\n\r\n  const handleSectionChange = useCallback((section: AccountSectionType) => {\r\n    setActiveSection(section);\r\n  }, []);\r\n\r\n  const resetSection = useCallback(() => {\r\n    setActiveSection(AccountSectionType.PREFERENCES);\r\n  }, []);\r\n\r\n  return {\r\n    activeSection,\r\n    setActiveSection: handleSectionChange,\r\n    resetSection,\r\n  };\r\n}\r\n"],"mappings":";AAEA,SAAS,UAAU,aAAa,iBAAiB;AACjD,SAAS,0BAA0B;AAOpB,SAAR,uBAAwC;AAAA,EAC7C;AAAA,EACA;AACF,GAAgC;AAC9B,QAAM,CAAC,eAAe,gBAAgB,IAAI;AAAA,IACxC,mBAAmB;AAAA,EACrB;AAEA,QAAM,iBAAiB,CACrB,YAEA,OAAO,OAAO,kBAAkB,EAAE,SAAS,OAA6B;AAE1E,YAAU,MAAM;AACd,QAAI,UAAU,eAAe,cAAc,GAAG;AAC5C,uBAAiB,cAAc;AAAA,IACjC,WAAW,QAAQ;AACjB,uBAAiB,mBAAmB,WAAW;AAAA,IACjD;AAAA,EACF,GAAG,CAAC,QAAQ,cAAc,CAAC;AAE3B,QAAM,sBAAsB,YAAY,CAAC,YAAgC;AACvE,qBAAiB,OAAO;AAAA,EAC1B,GAAG,CAAC,CAAC;AAEL,QAAM,eAAe,YAAY,MAAM;AACrC,qBAAiB,mBAAmB,WAAW;AAAA,EACjD,GAAG,CAAC,CAAC;AAEL,SAAO;AAAA,IACL;AAAA,IACA,kBAAkB;AAAA,IAClB;AAAA,EACF;AACF;","names":[]}

package/dist/components/account/sections/ChangePasswordSection.mjs

@@ -1,6 +1,6 @@
 "use client";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { IconArrowLeft, IconLock } from "@tabler/icons-react";
+import { IconLock, IconX } from "@tabler/icons-react";
 import { Button } from "../../ui/buttons/Button";
 import { FormField } from "../../ui/form/FormField";
 import useChangePasswordForm from "../hooks/useChangePasswordForm";
@@ -17,9 +17,9 @@ function ChangePasswordSection({ onBack }) {
       onSubmit: handleSubmit,
       className: "flex-1 overflow-y-auto px-4 pb-5 lg:p-5 flex flex-col h-full lg:h-full gap-5 lg:gap-6",
       children: [
-        /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3", children: [
-          /* @__PURE__ */ jsx(Button, { type: "button", variant: "ghost", className: "size-8! p-0", onClick: onBack, children: /* @__PURE__ */ jsx(IconArrowLeft, { size: 20 }) }),
-          /* @__PURE__ */ jsx("span", { className: "paragraph-medium-semibold text-gray-950", children: "Alterar senha" })
+        /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
+          /* @__PURE__ */ jsx("span", { className: "paragraph-medium-semibold text-gray-950", children: "Alterar senha" }),
+          /* @__PURE__ */ jsx(Button, { type: "button", variant: "ghost", className: "size-8! p-0", onClick: onBack, children: /* @__PURE__ */ jsx(IconX, { size: 18 }) })
         ] }),
         /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-4", children: [
           /* @__PURE__ */ jsx(

package/dist/components/account/sections/ChangePasswordSection.mjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/account/sections/ChangePasswordSection.tsx"],"sourcesContent":["'use client';\n\nimport { IconArrowLeft, IconLock } from '@tabler/icons-react';\nimport { Button } from '../../ui/buttons/Button';\nimport { FormField } from '../../ui/form/FormField';\nimport useChangePasswordForm from '../hooks/useChangePasswordForm';\nimport usePasswordVisibility from '../../../hooks/usePasswordVisibility';\n\ninterface ChangePasswordSectionProps {\n  onBack: () => void;\n}\n\nexport function ChangePasswordSection({ onBack }: ChangePasswordSectionProps) {\n  const { register, handleSubmit, errors } = useChangePasswordForm({\n    onSuccess: onBack,\n  });\n  const { showPassword: showCurrentPw, togglePassword: toggleCurrentPw } = usePasswordVisibility();\n  const { showPassword: showNewPw, togglePassword: toggleNewPw } = usePasswordVisibility();\n\n  return (\n    <form\n      onSubmit={handleSubmit}\n      className=\"flex-1 overflow-y-auto px-4 pb-5 lg:p-5 flex flex-col h-full lg:h-full gap-5 lg:gap-6\"\n    >\n      <div className=\"flex items-center gap-3\">\n        <Button type=\"button\" variant=\"ghost\" className=\"size-8! p-0\" onClick={onBack}>\n          <IconArrowLeft size={20} />\n        </Button>\n        <span className=\"paragraph-medium-semibold text-gray-950\">Alterar senha</span>\n      </div>\n\n      <div className=\"flex flex-col gap-4\">\n        <FormField\n          label=\"Senha atual\"\n          type=\"password\"\n          placeholder=\"Digite sua senha atual\"\n          leftIcon={IconLock}\n          error={!!errors.currentPassword}\n          errorMessage={errors.currentPassword?.message}\n          classnameContainer=\"h-10!\"\n          showPassword={showCurrentPw}\n          onTogglePassword={toggleCurrentPw}\n          {...register('currentPassword')}\n        />\n        <FormField\n          label=\"Nova senha\"\n          type=\"password\"\n          placeholder=\"Digite sua nova senha\"\n          leftIcon={IconLock}\n          error={!!errors.newPassword}\n          errorMessage={errors.newPassword?.message}\n          classnameContainer=\"h-10!\"\n          showPassword={showNewPw}\n          onTogglePassword={toggleNewPw}\n          {...register('newPassword')}\n        />\n      </div>\n\n      <Button type=\"submit\" className=\"w-fit h-10!\">\n        Salvar nova senha\n      </Button>\n    </form>\n  );\n}\n"],"mappings":";AAwBM,SAEI,KAFJ;AAtBN,SAAS,eAAe,gBAAgB;AACxC,SAAS,cAAc;AACvB,SAAS,iBAAiB;AAC1B,OAAO,2BAA2B;AAClC,OAAO,2BAA2B;AAM3B,SAAS,sBAAsB,EAAE,OAAO,GAA+B;AAC5E,QAAM,EAAE,UAAU,cAAc,OAAO,IAAI,sBAAsB;AAAA,IAC/D,WAAW;AAAA,EACb,CAAC;AACD,QAAM,EAAE,cAAc,eAAe,gBAAgB,gBAAgB,IAAI,sBAAsB;AAC/F,QAAM,EAAE,cAAc,WAAW,gBAAgB,YAAY,IAAI,sBAAsB;AAEvF,SACE;AAAA,IAAC;AAAA;AAAA,MACC,UAAU;AAAA,MACV,WAAU;AAAA,MAEV;AAAA,6BAAC,SAAI,WAAU,2BACb;AAAA,8BAAC,UAAO,MAAK,UAAS,SAAQ,SAAQ,WAAU,eAAc,SAAS,QACrE,8BAAC,iBAAc,MAAM,IAAI,GAC3B;AAAA,UACA,oBAAC,UAAK,WAAU,2CAA0C,2BAAa;AAAA,WACzE;AAAA,QAEA,qBAAC,SAAI,WAAU,uBACb;AAAA;AAAA,YAAC;AAAA;AAAA,cACC,OAAM;AAAA,cACN,MAAK;AAAA,cACL,aAAY;AAAA,cACZ,UAAU;AAAA,cACV,OAAO,CAAC,CAAC,OAAO;AAAA,cAChB,cAAc,OAAO,iBAAiB;AAAA,cACtC,oBAAmB;AAAA,cACnB,cAAc;AAAA,cACd,kBAAkB;AAAA,cACjB,GAAG,SAAS,iBAAiB;AAAA;AAAA,UAChC;AAAA,UACA;AAAA,YAAC;AAAA;AAAA,cACC,OAAM;AAAA,cACN,MAAK;AAAA,cACL,aAAY;AAAA,cACZ,UAAU;AAAA,cACV,OAAO,CAAC,CAAC,OAAO;AAAA,cAChB,cAAc,OAAO,aAAa;AAAA,cAClC,oBAAmB;AAAA,cACnB,cAAc;AAAA,cACd,kBAAkB;AAAA,cACjB,GAAG,SAAS,aAAa;AAAA;AAAA,UAC5B;AAAA,WACF;AAAA,QAEA,oBAAC,UAAO,MAAK,UAAS,WAAU,eAAc,+BAE9C;AAAA;AAAA;AAAA,EACF;AAEJ;","names":[]}
+{"version":3,"sources":["../../../../src/components/account/sections/ChangePasswordSection.tsx"],"sourcesContent":["'use client';\n\nimport { IconLock, IconX } from '@tabler/icons-react';\nimport { Button } from '../../ui/buttons/Button';\nimport { FormField } from '../../ui/form/FormField';\nimport useChangePasswordForm from '../hooks/useChangePasswordForm';\nimport usePasswordVisibility from '../../../hooks/usePasswordVisibility';\n\ninterface ChangePasswordSectionProps {\n  onBack: () => void;\n}\n\nexport function ChangePasswordSection({ onBack }: ChangePasswordSectionProps) {\n  const { register, handleSubmit, errors } = useChangePasswordForm({\n    onSuccess: onBack,\n  });\n  const { showPassword: showCurrentPw, togglePassword: toggleCurrentPw } = usePasswordVisibility();\n  const { showPassword: showNewPw, togglePassword: toggleNewPw } = usePasswordVisibility();\n\n  return (\n    <form\n      onSubmit={handleSubmit}\n      className=\"flex-1 overflow-y-auto px-4 pb-5 lg:p-5 flex flex-col h-full lg:h-full gap-5 lg:gap-6\"\n    >\n      <div className=\"flex items-center justify-between\">\n        <span className=\"paragraph-medium-semibold text-gray-950\">Alterar senha</span>\n        <Button type=\"button\" variant=\"ghost\" className=\"size-8! p-0\" onClick={onBack}>\n          <IconX size={18} />\n        </Button>\n      </div>\n\n      <div className=\"flex flex-col gap-4\">\n        <FormField\n          label=\"Senha atual\"\n          type=\"password\"\n          placeholder=\"Digite sua senha atual\"\n          leftIcon={IconLock}\n          error={!!errors.currentPassword}\n          errorMessage={errors.currentPassword?.message}\n          classnameContainer=\"h-10!\"\n          showPassword={showCurrentPw}\n          onTogglePassword={toggleCurrentPw}\n          {...register('currentPassword')}\n        />\n        <FormField\n          label=\"Nova senha\"\n          type=\"password\"\n          placeholder=\"Digite sua nova senha\"\n          leftIcon={IconLock}\n          error={!!errors.newPassword}\n          errorMessage={errors.newPassword?.message}\n          classnameContainer=\"h-10!\"\n          showPassword={showNewPw}\n          onTogglePassword={toggleNewPw}\n          {...register('newPassword')}\n        />\n      </div>\n\n      <Button type=\"submit\" className=\"w-fit h-10!\">\n        Salvar nova senha\n      </Button>\n    </form>\n  );\n}\n"],"mappings":";AAwBM,SACE,KADF;AAtBN,SAAS,UAAU,aAAa;AAChC,SAAS,cAAc;AACvB,SAAS,iBAAiB;AAC1B,OAAO,2BAA2B;AAClC,OAAO,2BAA2B;AAM3B,SAAS,sBAAsB,EAAE,OAAO,GAA+B;AAC5E,QAAM,EAAE,UAAU,cAAc,OAAO,IAAI,sBAAsB;AAAA,IAC/D,WAAW;AAAA,EACb,CAAC;AACD,QAAM,EAAE,cAAc,eAAe,gBAAgB,gBAAgB,IAAI,sBAAsB;AAC/F,QAAM,EAAE,cAAc,WAAW,gBAAgB,YAAY,IAAI,sBAAsB;AAEvF,SACE;AAAA,IAAC;AAAA;AAAA,MACC,UAAU;AAAA,MACV,WAAU;AAAA,MAEV;AAAA,6BAAC,SAAI,WAAU,qCACb;AAAA,8BAAC,UAAK,WAAU,2CAA0C,2BAAa;AAAA,UACvE,oBAAC,UAAO,MAAK,UAAS,SAAQ,SAAQ,WAAU,eAAc,SAAS,QACrE,8BAAC,SAAM,MAAM,IAAI,GACnB;AAAA,WACF;AAAA,QAEA,qBAAC,SAAI,WAAU,uBACb;AAAA;AAAA,YAAC;AAAA;AAAA,cACC,OAAM;AAAA,cACN,MAAK;AAAA,cACL,aAAY;AAAA,cACZ,UAAU;AAAA,cACV,OAAO,CAAC,CAAC,OAAO;AAAA,cAChB,cAAc,OAAO,iBAAiB;AAAA,cACtC,oBAAmB;AAAA,cACnB,cAAc;AAAA,cACd,kBAAkB;AAAA,cACjB,GAAG,SAAS,iBAAiB;AAAA;AAAA,UAChC;AAAA,UACA;AAAA,YAAC;AAAA;AAAA,cACC,OAAM;AAAA,cACN,MAAK;AAAA,cACL,aAAY;AAAA,cACZ,UAAU;AAAA,cACV,OAAO,CAAC,CAAC,OAAO;AAAA,cAChB,cAAc,OAAO,aAAa;AAAA,cAClC,oBAAmB;AAAA,cACnB,cAAc;AAAA,cACd,kBAAkB;AAAA,cACjB,GAAG,SAAS,aAAa;AAAA;AAAA,UAC5B;AAAA,WACF;AAAA,QAEA,oBAAC,UAAO,MAAK,UAAS,WAAU,eAAc,+BAE9C;AAAA;AAAA;AAAA,EACF;AAEJ;","names":[]}

package/dist/components/account/sections/ChangePhoneModal.mjs

@@ -16,9 +16,14 @@ import useOtpVerification from "../hooks/useOtpVerification";
 function ChangePhoneModal({ open, onClose }) {
   const { user } = useAuth();
   const invalidateUser = useInvalidateUser();
+  const hasExistingPhone = !!user?.phone;
   const currentPhoneDisplay = user?.phone ? formatPhone(
     user.ddi && user.phone.startsWith(user.ddi) ? user.phone.slice(user.ddi.length) : user.phone
   ) : "";
+  const handleDirectUpdateSuccess = () => {
+    invalidateUser();
+    onClose();
+  };
   const {
     showVerification,
     phoneValue,
@@ -29,7 +34,10 @@ function ChangePhoneModal({ open, onClose }) {
     handleContinue,
     handleBack,
     resetForm
-  } = useChangePhoneForm();
+  } = useChangePhoneForm({
+    hasExistingPhone,
+    onDirectUpdateSuccess: handleDirectUpdateSuccess
+  });
   const handleSuccess = () => {
     invalidateUser();
     resetForm();
@@ -82,9 +90,9 @@ function ChangePhoneModal({ open, onClose }) {
           /* @__PURE__ */ jsx(DialogTitle, { className: "paragraph-medium-semibold text-gray-950 text-center flex-1", children: "Alterar telefone" }),
           /* @__PURE__ */ jsx(Button, { variant: "ghost", className: "size-8! p-0", onClick: handleClose, children: /* @__PURE__ */ jsx(IconX, { size: 18, className: "text-gray-500" }) })
         ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
-          /* @__PURE__ */ jsx(DialogHeader, { className: "sr-only", children: /* @__PURE__ */ jsx(DialogTitle, { children: "Alterar telefone" }) }),
+          /* @__PURE__ */ jsx(DialogHeader, { className: "sr-only", children: /* @__PURE__ */ jsx(DialogTitle, { children: hasExistingPhone ? "Alterar telefone" : "Adicionar telefone" }) }),
           /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-center px-4 py-3 relative border-b border-gray-200 lg:border-b-0", children: [
-            /* @__PURE__ */ jsx("span", { className: "paragraph-medium-semibold text-gray-950 text-center", children: "Alterar telefone" }),
+            /* @__PURE__ */ jsx("span", { className: "paragraph-medium-semibold text-gray-950 text-center", children: hasExistingPhone ? "Alterar telefone" : "Adicionar telefone" }),
             /* @__PURE__ */ jsx(
               Button,
               {
@@ -96,7 +104,7 @@ function ChangePhoneModal({ open, onClose }) {
             )
           ] })
         ] }),
-        /* @__PURE__ */ jsx("div", { className: `${showVerification ? "w-full" : "w-1/2"} h-0.75 bg-pages-300` }),
+        /* @__PURE__ */ jsx("div", { className: `${showVerification || !hasExistingPhone ? "w-full" : "w-1/2"} h-0.75 bg-pages-300` }),
         showVerification ? /* @__PURE__ */ jsxs(
           "form",
           {
@@ -154,13 +162,13 @@ function ChangePhoneModal({ open, onClose }) {
         ) : /* @__PURE__ */ jsxs("form", { onSubmit: handleContinue, className: "flex flex-col flex-1 lg:flex-none", children: [
           /* @__PURE__ */ jsxs("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", children: [
             /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-1", children: [
-              /* @__PURE__ */ jsx("span", { className: "paragraph-medium-semibold text-gray-950", children: "Atualizar telefone de contato" }),
-              /* @__PURE__ */ jsx("span", { className: "paragraph-small-regular text-gray-600", children: "Informe o novo n\xFAmero para manter seu contato atualizado." })
+              /* @__PURE__ */ jsx("span", { className: "paragraph-medium-semibold text-gray-950", children: hasExistingPhone ? "Atualizar telefone de contato" : "Adicionar telefone de contato" }),
+              /* @__PURE__ */ jsx("span", { className: "paragraph-small-regular text-gray-600", children: hasExistingPhone ? "Informe o novo n\xFAmero para manter seu contato atualizado." : "Informe seu n\xFAmero de telefone para contato." })
             ] }),
             /* @__PURE__ */ jsx(
               PhoneInput,
               {
-                label: "Novo n\xFAmero",
+                label: hasExistingPhone ? "Novo n\xFAmero" : "N\xFAmero de telefone",
                 placeholder: "(00) 0 0000-0000",
                 value: phoneValue,
                 onChange: handlePhoneChange,
@@ -171,7 +179,7 @@ function ChangePhoneModal({ open, onClose }) {
           ] }),
           /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between p-4 lg:p-5 border-t border-gray-200 mt-auto lg:mt-0", children: [
             /* @__PURE__ */ jsx(Button, { variant: "secondary", className: "h-10!", type: "button", onClick: handleClose, children: "Cancelar" }),
-            /* @__PURE__ */ jsx(Button, { className: "h-10!", type: "submit", disabled: isSubmitting, children: isSubmitting ? "Enviando..." : "Continuar" })
+            /* @__PURE__ */ jsx(Button, { className: "h-10!", type: "submit", disabled: isSubmitting, children: isSubmitting ? hasExistingPhone ? "Enviando..." : "Salvando..." : hasExistingPhone ? "Continuar" : "Salvar" })
           ] })
         ] })
       ]

package/dist/components/account/sections/ChangePhoneModal.mjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/account/sections/ChangePhoneModal.tsx"],"sourcesContent":["'use client';\n\nimport { IconChevronLeft, IconX, IconMessage } from '@tabler/icons-react';\nimport { Button } from '../../ui/buttons/Button';\nimport { Dialog, DialogContent, DialogHeader, DialogTitle } from '../../ui/overlay/Dialog';\nimport { Separator } from '../../ui/data-display/Separator';\nimport { InputOTP, InputOTPGroup, InputOTPSlot } from '../../ui/form/InputOtp';\nimport PhoneInput from '../../ui/form/PhoneInput';\nimport { formatTimer, formatPhone } from '../../../utils/format/masks';\nimport { OTP_CODE_LENGTH } from '../../../utils/validators/account';\nimport { useAuth } from '../../../providers/auth.provider';\nimport { useInvalidateUser } from '../../../modules/auth/hooks/useUserQuery';\nimport { confirmPhoneChangeAction } from '../../../modules/accounts/actions/account-management.action';\nimport useChangePhoneForm from '../hooks/useChangePhoneForm';\nimport useOtpVerification from '../hooks/useOtpVerification';\n\ninterface ChangePhoneModalProps {\n  open: boolean;\n  onClose: () => void;\n}\n\nexport function ChangePhoneModal({ open, onClose }: ChangePhoneModalProps) {\n  const { user } = useAuth();\n  const invalidateUser = useInvalidateUser();\n\n  const currentPhoneDisplay = user?.phone\n    ? formatPhone(\n        user.ddi && user.phone.startsWith(user.ddi) ? user.phone.slice(user.ddi.length) : user.phone\n      )\n    : '';\n\n  const {\n    showVerification,\n    phoneValue,\n    phoneError,\n    isSubmitting,\n    submittedPhone,\n    handlePhoneChange,\n    handleContinue,\n    handleBack,\n    resetForm,\n  } = useChangePhoneForm();\n\n  const handleSuccess = () => {\n    invalidateUser();\n    resetForm();\n    onClose();\n  };\n\n  const {\n    code,\n    isLoading,\n    hasError,\n    timer,\n    canResend,\n    isValidLength,\n    handleCodeChange,\n    handleValidate,\n    handleResend,\n    reset: resetOtp,\n  } = useOtpVerification({\n    onSuccess: handleSuccess,\n    successMessage: 'Telefone alterado',\n    validateFn: async (token) => {\n      const result = await confirmPhoneChangeAction(token, submittedPhone.local, submittedPhone.ddi);\n      return result.success;\n    },\n    resendFn: async () => {\n      const { requestPhoneChangeAction } = await import('../../../modules/accounts/actions/account-management.action');\n      const result = await requestPhoneChangeAction(submittedPhone.local, submittedPhone.ddi);\n      if (!result.success) {\n        throw new Error(result.error);\n      }\n    },\n  });\n\n  const handleClose = () => {\n    resetForm();\n    resetOtp();\n    onClose();\n  };\n\n  const handleBackFromVerification = () => {\n    resetOtp();\n    handleBack();\n  };\n\n  return (\n    <Dialog open={open} onOpenChange={handleClose}>\n      <DialogContent\n        showCloseButton={false}\n        overlayClassName=\"z-[1002]\"\n        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-125 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%] z-[1003]\"\n      >\n        {showVerification ? (\n          <DialogHeader className=\"flex flex-row items-center justify-between px-4 py-3 border-b border-gray-200 lg:border-b-0\">\n            <Button variant=\"ghost\" className=\"size-8! p-0\" onClick={handleBackFromVerification}>\n              <IconChevronLeft size={20} className=\"text-gray-950\" />\n            </Button>\n            <DialogTitle className=\"paragraph-medium-semibold text-gray-950 text-center flex-1\">\n              Alterar telefone\n            </DialogTitle>\n            <Button variant=\"ghost\" className=\"size-8! p-0\" onClick={handleClose}>\n              <IconX size={18} className=\"text-gray-500\" />\n            </Button>\n          </DialogHeader>\n        ) : (\n          <>\n            <DialogHeader className=\"sr-only\">\n              <DialogTitle>Alterar telefone</DialogTitle>\n            </DialogHeader>\n            <div className=\"flex items-center justify-center px-4 py-3 relative border-b border-gray-200 lg:border-b-0\">\n              <span className=\"paragraph-medium-semibold text-gray-950 text-center\">\n                Alterar telefone\n              </span>\n              <Button\n                variant=\"ghost\"\n                className=\"absolute right-2 size-8! p-0\"\n                onClick={handleClose}\n              >\n                <IconX size={18} className=\"text-gray-500\" />\n              </Button>\n            </div>\n          </>\n        )}\n\n        <div className={`${showVerification ? 'w-full' : 'w-1/2'} h-0.75 bg-pages-300`} />\n\n        {showVerification ? (\n          <form\n            onSubmit={(e) => {\n              e.preventDefault();\n              handleValidate();\n            }}\n            className=\"flex flex-col flex-1 lg:flex-none\"\n          >\n            <div className=\"px-4 lg:px-5 py-5 lg:py-6 flex flex-col gap-4 flex-1 lg:flex-none\">\n              <div className=\"flex items-center justify-center size-12 bg-white rounded-lg shadow-xs border border-gray-200\">\n                <IconMessage size={20} className=\"text-gray-950\" />\n              </div>\n\n              <div className=\"flex flex-col gap-1\">\n                <h3 className=\"paragraph-medium-semibold text-gray-950\">Código de validação</h3>\n                <p className=\"paragraph-small-regular text-gray-600\">\n                  Enviamos um código de validação para o número atual{' '}\n                  <span className=\"font-semibold text-gray-950\">{currentPhoneDisplay}.</span>\n                </p>\n              </div>\n\n              <div className=\"flex flex-col gap-2\">\n                <InputOTP maxLength={OTP_CODE_LENGTH} value={code} onChange={handleCodeChange}>\n                  <InputOTPGroup className=\"flex flex-row gap-2\">\n                    {[...Array(OTP_CODE_LENGTH)].map((_, i) => (\n                      <InputOTPSlot\n                        key={i}\n                        index={i}\n                        className={`uppercase text-2xl font-medium w-11 lg:w-12 h-13 lg:h-14 rounded-lg border bg-white shadow-none [&_div.animate-caret-blink]:bg-gray-950 ${hasError ? 'border-red-500' : 'border-gray-200'}`}\n                      />\n                    ))}\n                  </InputOTPGroup>\n                </InputOTP>\n                {hasError && (\n                  <p className=\"paragraph-small-regular text-red-500\">Código incorreto</p>\n                )}\n              </div>\n\n              {canResend ? (\n                <button\n                  type=\"button\"\n                  onClick={handleResend}\n                  className=\"paragraph-small-medium text-gray-950 underline cursor-pointer hover:text-gray-700 w-fit\"\n                >\n                  Reenviar código\n                </button>\n              ) : (\n                <p className=\"paragraph-small-regular text-gray-500\">\n                  Reenviar em{' '}\n                  <span className=\"paragraph-small-semibold text-gray-950\">\n                    {formatTimer(timer)}\n                  </span>\n                </p>\n              )}\n            </div>\n\n            <Separator />\n\n            <div className=\"flex items-center justify-between px-4 lg:px-5 py-4 lg:py-5 mt-auto lg:mt-0\">\n              <Button variant=\"secondary\" className=\"h-10!\" type=\"button\" onClick={handleClose}>\n                Cancelar\n              </Button>\n              <Button className=\"h-10!\" type=\"submit\" disabled={!isValidLength || isLoading}>\n                {isLoading ? 'Validando...' : 'Alterar telefone'}\n              </Button>\n            </div>\n          </form>\n        ) : (\n          <form onSubmit={handleContinue} className=\"flex flex-col flex-1 lg:flex-none\">\n            <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\">\n              <div className=\"flex flex-col gap-1\">\n                <span className=\"paragraph-medium-semibold text-gray-950\">\n                  Atualizar telefone de contato\n                </span>\n                <span className=\"paragraph-small-regular text-gray-600\">\n                  Informe o novo número para manter seu contato atualizado.\n                </span>\n              </div>\n\n              <PhoneInput\n                label=\"Novo número\"\n                placeholder=\"(00) 0 0000-0000\"\n                value={phoneValue}\n                onChange={handlePhoneChange}\n                error={!!phoneError}\n                errorMessage={phoneError}\n              />\n            </div>\n\n            <div className=\"flex items-center justify-between p-4 lg:p-5 border-t border-gray-200 mt-auto lg:mt-0\">\n              <Button variant=\"secondary\" className=\"h-10!\" type=\"button\" onClick={handleClose}>\n                Cancelar\n              </Button>\n              <Button className=\"h-10!\" type=\"submit\" disabled={isSubmitting}>\n                {isSubmitting ? 'Enviando...' : 'Continuar'}\n              </Button>\n            </div>\n          </form>\n        )}\n      </DialogContent>\n    </Dialog>\n  );\n}\n"],"mappings":";AA+FU,SAYA,UAVI,KAFJ;AA7FV,SAAS,iBAAiB,OAAO,mBAAmB;AACpD,SAAS,cAAc;AACvB,SAAS,QAAQ,eAAe,cAAc,mBAAmB;AACjE,SAAS,iBAAiB;AAC1B,SAAS,UAAU,eAAe,oBAAoB;AACtD,OAAO,gBAAgB;AACvB,SAAS,aAAa,mBAAmB;AACzC,SAAS,uBAAuB;AAChC,SAAS,eAAe;AACxB,SAAS,yBAAyB;AAClC,SAAS,gCAAgC;AACzC,OAAO,wBAAwB;AAC/B,OAAO,wBAAwB;AAOxB,SAAS,iBAAiB,EAAE,MAAM,QAAQ,GAA0B;AACzE,QAAM,EAAE,KAAK,IAAI,QAAQ;AACzB,QAAM,iBAAiB,kBAAkB;AAEzC,QAAM,sBAAsB,MAAM,QAC9B;AAAA,IACE,KAAK,OAAO,KAAK,MAAM,WAAW,KAAK,GAAG,IAAI,KAAK,MAAM,MAAM,KAAK,IAAI,MAAM,IAAI,KAAK;AAAA,EACzF,IACA;AAEJ,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,IAAI,mBAAmB;AAEvB,QAAM,gBAAgB,MAAM;AAC1B,mBAAe;AACf,cAAU;AACV,YAAQ;AAAA,EACV;AAEA,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,OAAO;AAAA,EACT,IAAI,mBAAmB;AAAA,IACrB,WAAW;AAAA,IACX,gBAAgB;AAAA,IAChB,YAAY,OAAO,UAAU;AAC3B,YAAM,SAAS,MAAM,yBAAyB,OAAO,eAAe,OAAO,eAAe,GAAG;AAC7F,aAAO,OAAO;AAAA,IAChB;AAAA,IACA,UAAU,YAAY;AACpB,YAAM,EAAE,yBAAyB,IAAI,MAAM,OAAO,6DAA6D;AAC/G,YAAM,SAAS,MAAM,yBAAyB,eAAe,OAAO,eAAe,GAAG;AACtF,UAAI,CAAC,OAAO,SAAS;AACnB,cAAM,IAAI,MAAM,OAAO,KAAK;AAAA,MAC9B;AAAA,IACF;AAAA,EACF,CAAC;AAED,QAAM,cAAc,MAAM;AACxB,cAAU;AACV,aAAS;AACT,YAAQ;AAAA,EACV;AAEA,QAAM,6BAA6B,MAAM;AACvC,aAAS;AACT,eAAW;AAAA,EACb;AAEA,SACE,oBAAC,UAAO,MAAY,cAAc,aAChC;AAAA,IAAC;AAAA;AAAA,MACC,iBAAiB;AAAA,MACjB,kBAAiB;AAAA,MACjB,WAAU;AAAA,MAET;AAAA,2BACC,qBAAC,gBAAa,WAAU,+FACtB;AAAA,8BAAC,UAAO,SAAQ,SAAQ,WAAU,eAAc,SAAS,4BACvD,8BAAC,mBAAgB,MAAM,IAAI,WAAU,iBAAgB,GACvD;AAAA,UACA,oBAAC,eAAY,WAAU,8DAA6D,8BAEpF;AAAA,UACA,oBAAC,UAAO,SAAQ,SAAQ,WAAU,eAAc,SAAS,aACvD,8BAAC,SAAM,MAAM,IAAI,WAAU,iBAAgB,GAC7C;AAAA,WACF,IAEA,iCACE;AAAA,8BAAC,gBAAa,WAAU,WACtB,8BAAC,eAAY,8BAAgB,GAC/B;AAAA,UACA,qBAAC,SAAI,WAAU,8FACb;AAAA,gCAAC,UAAK,WAAU,uDAAsD,8BAEtE;AAAA,YACA;AAAA,cAAC;AAAA;AAAA,gBACC,SAAQ;AAAA,gBACR,WAAU;AAAA,gBACV,SAAS;AAAA,gBAET,8BAAC,SAAM,MAAM,IAAI,WAAU,iBAAgB;AAAA;AAAA,YAC7C;AAAA,aACF;AAAA,WACF;AAAA,QAGF,oBAAC,SAAI,WAAW,GAAG,mBAAmB,WAAW,OAAO,wBAAwB;AAAA,QAE/E,mBACC;AAAA,UAAC;AAAA;AAAA,YACC,UAAU,CAAC,MAAM;AACf,gBAAE,eAAe;AACjB,6BAAe;AAAA,YACjB;AAAA,YACA,WAAU;AAAA,YAEV;AAAA,mCAAC,SAAI,WAAU,qEACb;AAAA,oCAAC,SAAI,WAAU,iGACb,8BAAC,eAAY,MAAM,IAAI,WAAU,iBAAgB,GACnD;AAAA,gBAEA,qBAAC,SAAI,WAAU,uBACb;AAAA,sCAAC,QAAG,WAAU,2CAA0C,0CAAmB;AAAA,kBAC3E,qBAAC,OAAE,WAAU,yCAAwC;AAAA;AAAA,oBACC;AAAA,oBACpD,qBAAC,UAAK,WAAU,+BAA+B;AAAA;AAAA,sBAAoB;AAAA,uBAAC;AAAA,qBACtE;AAAA,mBACF;AAAA,gBAEA,qBAAC,SAAI,WAAU,uBACb;AAAA,sCAAC,YAAS,WAAW,iBAAiB,OAAO,MAAM,UAAU,kBAC3D,8BAAC,iBAAc,WAAU,uBACtB,WAAC,GAAG,MAAM,eAAe,CAAC,EAAE,IAAI,CAAC,GAAG,MACnC;AAAA,oBAAC;AAAA;AAAA,sBAEC,OAAO;AAAA,sBACP,WAAW,2IAA2I,WAAW,mBAAmB,iBAAiB;AAAA;AAAA,oBAFhM;AAAA,kBAGP,CACD,GACH,GACF;AAAA,kBACC,YACC,oBAAC,OAAE,WAAU,wCAAuC,iCAAgB;AAAA,mBAExE;AAAA,gBAEC,YACC;AAAA,kBAAC;AAAA;AAAA,oBACC,MAAK;AAAA,oBACL,SAAS;AAAA,oBACT,WAAU;AAAA,oBACX;AAAA;AAAA,gBAED,IAEA,qBAAC,OAAE,WAAU,yCAAwC;AAAA;AAAA,kBACvC;AAAA,kBACZ,oBAAC,UAAK,WAAU,0CACb,sBAAY,KAAK,GACpB;AAAA,mBACF;AAAA,iBAEJ;AAAA,cAEA,oBAAC,aAAU;AAAA,cAEX,qBAAC,SAAI,WAAU,+EACb;AAAA,oCAAC,UAAO,SAAQ,aAAY,WAAU,SAAQ,MAAK,UAAS,SAAS,aAAa,sBAElF;AAAA,gBACA,oBAAC,UAAO,WAAU,SAAQ,MAAK,UAAS,UAAU,CAAC,iBAAiB,WACjE,sBAAY,iBAAiB,oBAChC;AAAA,iBACF;AAAA;AAAA;AAAA,QACF,IAEA,qBAAC,UAAK,UAAU,gBAAgB,WAAU,qCACxC;AAAA,+BAAC,SAAI,WAAU,8EACb;AAAA,iCAAC,SAAI,WAAU,uBACb;AAAA,kCAAC,UAAK,WAAU,2CAA0C,2CAE1D;AAAA,cACA,oBAAC,UAAK,WAAU,yCAAwC,0EAExD;AAAA,eACF;AAAA,YAEA;AAAA,cAAC;AAAA;AAAA,gBACC,OAAM;AAAA,gBACN,aAAY;AAAA,gBACZ,OAAO;AAAA,gBACP,UAAU;AAAA,gBACV,OAAO,CAAC,CAAC;AAAA,gBACT,cAAc;AAAA;AAAA,YAChB;AAAA,aACF;AAAA,UAEA,qBAAC,SAAI,WAAU,yFACb;AAAA,gCAAC,UAAO,SAAQ,aAAY,WAAU,SAAQ,MAAK,UAAS,SAAS,aAAa,sBAElF;AAAA,YACA,oBAAC,UAAO,WAAU,SAAQ,MAAK,UAAS,UAAU,cAC/C,yBAAe,gBAAgB,aAClC;AAAA,aACF;AAAA,WACF;AAAA;AAAA;AAAA,EAEJ,GACF;AAEJ;","names":[]}
+{"version":3,"sources":["../../../../src/components/account/sections/ChangePhoneModal.tsx"],"sourcesContent":["'use client';\n\nimport { IconChevronLeft, IconX, IconMessage } from '@tabler/icons-react';\nimport { Button } from '../../ui/buttons/Button';\nimport { Dialog, DialogContent, DialogHeader, DialogTitle } from '../../ui/overlay/Dialog';\nimport { Separator } from '../../ui/data-display/Separator';\nimport { InputOTP, InputOTPGroup, InputOTPSlot } from '../../ui/form/InputOtp';\nimport PhoneInput from '../../ui/form/PhoneInput';\nimport { formatTimer, formatPhone } from '../../../utils/format/masks';\nimport { OTP_CODE_LENGTH } from '../../../utils/validators/account';\nimport { useAuth } from '../../../providers/auth.provider';\nimport { useInvalidateUser } from '../../../modules/auth/hooks/useUserQuery';\nimport { confirmPhoneChangeAction } from '../../../modules/accounts/actions/account-management.action';\nimport useChangePhoneForm from '../hooks/useChangePhoneForm';\nimport useOtpVerification from '../hooks/useOtpVerification';\n\ninterface ChangePhoneModalProps {\n  open: boolean;\n  onClose: () => void;\n}\n\nexport function ChangePhoneModal({ open, onClose }: ChangePhoneModalProps) {\n  const { user } = useAuth();\n  const invalidateUser = useInvalidateUser();\n\n  const hasExistingPhone = !!user?.phone;\n\n  const currentPhoneDisplay = user?.phone\n    ? formatPhone(\n        user.ddi && user.phone.startsWith(user.ddi) ? user.phone.slice(user.ddi.length) : user.phone\n      )\n    : '';\n\n  const handleDirectUpdateSuccess = () => {\n    invalidateUser();\n    onClose();\n  };\n\n  const {\n    showVerification,\n    phoneValue,\n    phoneError,\n    isSubmitting,\n    submittedPhone,\n    handlePhoneChange,\n    handleContinue,\n    handleBack,\n    resetForm,\n  } = useChangePhoneForm({\n    hasExistingPhone,\n    onDirectUpdateSuccess: handleDirectUpdateSuccess,\n  });\n\n  const handleSuccess = () => {\n    invalidateUser();\n    resetForm();\n    onClose();\n  };\n\n  const {\n    code,\n    isLoading,\n    hasError,\n    timer,\n    canResend,\n    isValidLength,\n    handleCodeChange,\n    handleValidate,\n    handleResend,\n    reset: resetOtp,\n  } = useOtpVerification({\n    onSuccess: handleSuccess,\n    successMessage: 'Telefone alterado',\n    validateFn: async (token) => {\n      const result = await confirmPhoneChangeAction(token, submittedPhone.local, submittedPhone.ddi);\n      return result.success;\n    },\n    resendFn: async () => {\n      const { requestPhoneChangeAction } = await import('../../../modules/accounts/actions/account-management.action');\n      const result = await requestPhoneChangeAction(submittedPhone.local, submittedPhone.ddi);\n      if (!result.success) {\n        throw new Error(result.error);\n      }\n    },\n  });\n\n  const handleClose = () => {\n    resetForm();\n    resetOtp();\n    onClose();\n  };\n\n  const handleBackFromVerification = () => {\n    resetOtp();\n    handleBack();\n  };\n\n  return (\n    <Dialog open={open} onOpenChange={handleClose}>\n      <DialogContent\n        showCloseButton={false}\n        overlayClassName=\"z-[1002]\"\n        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-125 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%] z-[1003]\"\n      >\n        {showVerification ? (\n          <DialogHeader className=\"flex flex-row items-center justify-between px-4 py-3 border-b border-gray-200 lg:border-b-0\">\n            <Button variant=\"ghost\" className=\"size-8! p-0\" onClick={handleBackFromVerification}>\n              <IconChevronLeft size={20} className=\"text-gray-950\" />\n            </Button>\n            <DialogTitle className=\"paragraph-medium-semibold text-gray-950 text-center flex-1\">\n              Alterar telefone\n            </DialogTitle>\n            <Button variant=\"ghost\" className=\"size-8! p-0\" onClick={handleClose}>\n              <IconX size={18} className=\"text-gray-500\" />\n            </Button>\n          </DialogHeader>\n        ) : (\n          <>\n            <DialogHeader className=\"sr-only\">\n              <DialogTitle>{hasExistingPhone ? 'Alterar telefone' : 'Adicionar telefone'}</DialogTitle>\n            </DialogHeader>\n            <div className=\"flex items-center justify-center px-4 py-3 relative border-b border-gray-200 lg:border-b-0\">\n              <span className=\"paragraph-medium-semibold text-gray-950 text-center\">\n                {hasExistingPhone ? 'Alterar telefone' : 'Adicionar telefone'}\n              </span>\n              <Button\n                variant=\"ghost\"\n                className=\"absolute right-2 size-8! p-0\"\n                onClick={handleClose}\n              >\n                <IconX size={18} className=\"text-gray-500\" />\n              </Button>\n            </div>\n          </>\n        )}\n\n        <div className={`${showVerification || !hasExistingPhone ? 'w-full' : 'w-1/2'} h-0.75 bg-pages-300`} />\n\n        {showVerification ? (\n          <form\n            onSubmit={(e) => {\n              e.preventDefault();\n              handleValidate();\n            }}\n            className=\"flex flex-col flex-1 lg:flex-none\"\n          >\n            <div className=\"px-4 lg:px-5 py-5 lg:py-6 flex flex-col gap-4 flex-1 lg:flex-none\">\n              <div className=\"flex items-center justify-center size-12 bg-white rounded-lg shadow-xs border border-gray-200\">\n                <IconMessage size={20} className=\"text-gray-950\" />\n              </div>\n\n              <div className=\"flex flex-col gap-1\">\n                <h3 className=\"paragraph-medium-semibold text-gray-950\">Código de validação</h3>\n                <p className=\"paragraph-small-regular text-gray-600\">\n                  Enviamos um código de validação para o número atual{' '}\n                  <span className=\"font-semibold text-gray-950\">{currentPhoneDisplay}.</span>\n                </p>\n              </div>\n\n              <div className=\"flex flex-col gap-2\">\n                <InputOTP maxLength={OTP_CODE_LENGTH} value={code} onChange={handleCodeChange}>\n                  <InputOTPGroup className=\"flex flex-row gap-2\">\n                    {[...Array(OTP_CODE_LENGTH)].map((_, i) => (\n                      <InputOTPSlot\n                        key={i}\n                        index={i}\n                        className={`uppercase text-2xl font-medium w-11 lg:w-12 h-13 lg:h-14 rounded-lg border bg-white shadow-none [&_div.animate-caret-blink]:bg-gray-950 ${hasError ? 'border-red-500' : 'border-gray-200'}`}\n                      />\n                    ))}\n                  </InputOTPGroup>\n                </InputOTP>\n                {hasError && (\n                  <p className=\"paragraph-small-regular text-red-500\">Código incorreto</p>\n                )}\n              </div>\n\n              {canResend ? (\n                <button\n                  type=\"button\"\n                  onClick={handleResend}\n                  className=\"paragraph-small-medium text-gray-950 underline cursor-pointer hover:text-gray-700 w-fit\"\n                >\n                  Reenviar código\n                </button>\n              ) : (\n                <p className=\"paragraph-small-regular text-gray-500\">\n                  Reenviar em{' '}\n                  <span className=\"paragraph-small-semibold text-gray-950\">\n                    {formatTimer(timer)}\n                  </span>\n                </p>\n              )}\n            </div>\n\n            <Separator />\n\n            <div className=\"flex items-center justify-between px-4 lg:px-5 py-4 lg:py-5 mt-auto lg:mt-0\">\n              <Button variant=\"secondary\" className=\"h-10!\" type=\"button\" onClick={handleClose}>\n                Cancelar\n              </Button>\n              <Button className=\"h-10!\" type=\"submit\" disabled={!isValidLength || isLoading}>\n                {isLoading ? 'Validando...' : 'Alterar telefone'}\n              </Button>\n            </div>\n          </form>\n        ) : (\n          <form onSubmit={handleContinue} className=\"flex flex-col flex-1 lg:flex-none\">\n            <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\">\n              <div className=\"flex flex-col gap-1\">\n                <span className=\"paragraph-medium-semibold text-gray-950\">\n                  {hasExistingPhone ? 'Atualizar telefone de contato' : 'Adicionar telefone de contato'}\n                </span>\n                <span className=\"paragraph-small-regular text-gray-600\">\n                  {hasExistingPhone\n                    ? 'Informe o novo número para manter seu contato atualizado.'\n                    : 'Informe seu número de telefone para contato.'}\n                </span>\n              </div>\n\n              <PhoneInput\n                label={hasExistingPhone ? 'Novo número' : 'Número de telefone'}\n                placeholder=\"(00) 0 0000-0000\"\n                value={phoneValue}\n                onChange={handlePhoneChange}\n                error={!!phoneError}\n                errorMessage={phoneError}\n              />\n            </div>\n\n            <div className=\"flex items-center justify-between p-4 lg:p-5 border-t border-gray-200 mt-auto lg:mt-0\">\n              <Button variant=\"secondary\" className=\"h-10!\" type=\"button\" onClick={handleClose}>\n                Cancelar\n              </Button>\n              <Button className=\"h-10!\" type=\"submit\" disabled={isSubmitting}>\n                {isSubmitting\n                  ? (hasExistingPhone ? 'Enviando...' : 'Salvando...')\n                  : (hasExistingPhone ? 'Continuar' : 'Salvar')}\n              </Button>\n            </div>\n          </form>\n        )}\n      </DialogContent>\n    </Dialog>\n  );\n}\n"],"mappings":"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","names":[]}

package/dist/components/account/sections/PreferencesSection.mjs

@@ -7,6 +7,7 @@ import { IconLock } from "@tabler/icons-react";
 import { Button } from "../../ui/buttons/Button";
 import { Separator } from "../../ui/data-display/Separator";
 import { Toast } from "../../ui/feedback/Toast";
+import { FormField } from "../../ui/form/FormField";
 import { ComboboxField } from "../../ui/form/ComboboxField";
 import { SelectField } from "../../ui/form/SelectField";
 import ConfirmGlobalPreferencesModal from "../ConfirmGlobalPreferencesModal";
@@ -34,6 +35,7 @@ function PreferencesSection({ onClose }) {
   const [isSaving, setIsSaving] = useState(false);
   const { watch, setValue, handleSubmit, reset, formState: { dirtyFields } } = useForm({
     defaultValues: {
+      companyName: "",
       language: "",
       currency: "",
       timezone: "",
@@ -45,6 +47,7 @@ function PreferencesSection({ onClose }) {
   useEffect(() => {
     if (!user || !account) return;
     reset({
+      companyName: account.name ?? "",
       language: LANGUAGE_OPTIONS.find(
         (o) => o.apiValue === user.language?.toLowerCase()
       )?.value ?? "pt-BR",
@@ -85,6 +88,7 @@ function PreferencesSection({ onClose }) {
   };
   const onSubmit = (data) => {
     const accountFields = {
+      ...canEditPreferences && dirtyFields.companyName && { name: data.companyName },
       ...canEditPreferences && dirtyFields.currency && { currency: data.currency },
       ...canEditPreferences && dirtyFields.timezone && { timezone: data.timezone }
     };
@@ -112,6 +116,18 @@ function PreferencesSection({ onClose }) {
       /* @__PURE__ */ jsxs("div", { className: "overflow-y-auto overscroll-contain px-4 pb-4 lg:p-5 flex flex-col gap-5 lg:gap-6", children: [
         /* @__PURE__ */ jsx("span", { className: "paragraph-medium-semibold text-gray-950", children: "Prefer\xEAncias" }),
         /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-8", children: [
+          /* @__PURE__ */ jsx("div", { className: "flex flex-col lg:flex-row items-center gap-3", children: /* @__PURE__ */ jsx(
+            FormField,
+            {
+              label: "Nome da empresa",
+              placeholder: "Digite o nome da empresa",
+              classnameContainer: "w-full",
+              value: watch("companyName"),
+              onChange: (e) => setValue("companyName", e.target.value, { shouldDirty: true }),
+              disabled: !canEditPreferences
+            }
+          ) }),
+          /* @__PURE__ */ jsx(Separator, {}),
           /* @__PURE__ */ jsxs("div", { className: "flex flex-col lg:flex-row items-center gap-3", children: [
             /* @__PURE__ */ jsx(
               ComboboxField,
@@ -142,7 +158,7 @@ function PreferencesSection({ onClose }) {
           ] }),
           /* @__PURE__ */ jsx(Separator, {}),
           /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-4", children: [
-            /* @__PURE__ */ jsx("span", { className: "paragraph-medium-semibold text-gray-600", children: "Exibi\xE7\xE3o hora" }),
+            /* @__PURE__ */ jsx("span", { className: "paragraph-medium-semibold text-gray-950", children: "Exibi\xE7\xE3o hora" }),
             /* @__PURE__ */ jsxs("div", { className: "flex flex-col lg:flex-row items-center gap-3", children: [
               /* @__PURE__ */ jsx(
                 ComboboxField,

package/dist/components/account/sections/PreferencesSection.mjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/account/sections/PreferencesSection.tsx"],"sourcesContent":["'use client';\n\nimport { useState, useEffect } from 'react';\nimport { useForm } from 'react-hook-form';\nimport { toast } from 'sonner';\nimport { IconLock } from '@tabler/icons-react';\nimport { Button } from '../../ui/buttons/Button';\nimport { Separator } from '../../ui/data-display/Separator';\nimport { Toast } from '../../ui/feedback/Toast';\nimport { ComboboxField } from '../../ui/form/ComboboxField';\nimport { SelectField } from '../../ui/form/SelectField';\nimport ConfirmGlobalPreferencesModal from '../ConfirmGlobalPreferencesModal';\nimport { useAuth } from '../../../providers/auth.provider';\nimport { UserProfile } from '../../../modules/users/schema';\nimport type { UpdateAccountRequest } from '../../../modules/accounts/types';\nimport {\n  useUpdateAccountUser,\n  useUpdateAccount,\n} from '../../../modules/accounts/hooks/useAccountManagement';\nimport {\n  LANGUAGE_OPTIONS,\n  TIME_FORMAT_OPTIONS,\n} from '../constants';\nimport { useTimezones } from '../../../modules/accounts/hooks/useTimezones';\nimport { useCurrencies } from '../../../modules/accounts/hooks/useCurrencies';\n\ninterface PreferencesFormValues {\n  language: string;\n  currency: string;\n  timezone: string;\n  timeFormat: string;\n  receive_sms: boolean;\n  receive_email: boolean;\n}\n\ninterface PreferencesSectionProps {\n  onClose: () => void;\n}\n\nexport function PreferencesSection({ onClose }: PreferencesSectionProps) {\n  const { data: timezones = [] } = useTimezones();\n  const { data: currencies = [] } = useCurrencies();\n  const { user, account } = useAuth();\n  const canEditPreferences =\n    user?.profile === UserProfile.owner || user?.profile === UserProfile.admin;\n  const updateAccountUser = useUpdateAccountUser();\n  const updateAccount = useUpdateAccount();\n  const [confirmGlobalOpen, setConfirmGlobalOpen] = useState(false);\n  const [pendingSubmit, setPendingSubmit] = useState<{\n    data: PreferencesFormValues;\n    accountFields: UpdateAccountRequest;\n  } | null>(null);\n  const [isSaving, setIsSaving] = useState(false);\n\n  const { watch, setValue, handleSubmit, reset, formState: { dirtyFields } } =\n    useForm<PreferencesFormValues>({\n      defaultValues: {\n        language: '',\n        currency: '',\n        timezone: '',\n        timeFormat: '24h',\n        receive_sms: false,\n        receive_email: false,\n      },\n    });\n\n  useEffect(() => {\n    if (!user || !account) return;\n    reset({\n      language: LANGUAGE_OPTIONS.find(\n        (o) => o.apiValue === user.language?.toLowerCase()\n      )?.value ?? 'pt-BR',\n      currency: account.currency,\n      timezone: account.timezone,\n      timeFormat: '24h',\n      receive_sms: user.receive_sms ?? false,\n      receive_email: user.receive_email ?? false,\n    });\n  }, [user, account, reset]);\n\n  const doSave = async (data: PreferencesFormValues, accountFields: UpdateAccountRequest) => {\n    setIsSaving(true);\n    try {\n      const apiLanguage = LANGUAGE_OPTIONS.find((o) => o.value === data.language)?.apiValue ?? data.language.toLowerCase();\n      await updateAccountUser.mutateAsync({\n        language: apiLanguage,\n        receive_sms: data.receive_sms,\n        receive_email: data.receive_email,\n      });\n\n      if (canEditPreferences && Object.keys(accountFields).length > 0) {\n        await updateAccount.mutateAsync(accountFields);\n      }\n\n      reset(data);\n      toast.custom((t) => (\n        <Toast variant=\"success\" message=\"Preferências salvas com sucesso\" toastId={t} />\n      ));\n      onClose();\n    } catch (error) {\n      toast.custom((t) => (\n        <Toast\n          variant=\"error\"\n          message={error instanceof Error ? error.message : 'Erro ao salvar preferências'}\n          toastId={t}\n        />\n      ));\n    } finally {\n      setIsSaving(false);\n    }\n  };\n\n  const onSubmit = (data: PreferencesFormValues) => {\n    const accountFields: UpdateAccountRequest = {\n      ...(canEditPreferences && dirtyFields.currency && { currency: data.currency }),\n      ...(canEditPreferences && dirtyFields.timezone && { timezone: data.timezone }),\n    };\n    const globalFieldChanged = Object.keys(accountFields).length > 0;\n\n    if (globalFieldChanged) {\n      setPendingSubmit({ data, accountFields });\n      setConfirmGlobalOpen(true);\n    } else {\n      doSave(data, accountFields);\n    }\n  };\n\n  const handleConfirmGlobal = () => {\n    setConfirmGlobalOpen(false);\n    if (pendingSubmit) {\n      doSave(pendingSubmit.data, pendingSubmit.accountFields);\n      setPendingSubmit(null);\n    }\n  };\n\n  const handleCancelGlobal = () => {\n    setConfirmGlobalOpen(false);\n    setPendingSubmit(null);\n  };\n\n  return (\n    <>\n      <form onSubmit={handleSubmit(onSubmit)} className=\"flex flex-col\">\n        <div className=\"overflow-y-auto overscroll-contain px-4 pb-4 lg:p-5 flex flex-col gap-5 lg:gap-6\">\n          <span className=\"paragraph-medium-semibold text-gray-950\">Preferências</span>\n          <div className=\"flex flex-col gap-8\">\n            <div className=\"flex flex-col lg:flex-row items-center gap-3\">\n              <ComboboxField\n                label=\"Idioma\"\n                placeholder=\"Selecione o idioma\"\n                searchPlaceholder=\"Buscar idioma...\"\n                containerClassName=\"w-full\"\n                options={LANGUAGE_OPTIONS}\n                value={watch('language')}\n                onChange={(value) => setValue('language', value, { shouldDirty: true })}\n              />\n              <ComboboxField\n                label=\"Moeda\"\n                placeholder=\"Selecione a moeda\"\n                searchPlaceholder=\"Buscar moeda...\"\n                containerClassName=\"w-full\"\n                options={currencies}\n                value={watch('currency')}\n                onChange={(value) => setValue('currency', value, { shouldDirty: true })}\n                icon={!canEditPreferences ? <IconLock className=\"size-4 text-gray-400\" /> : undefined}\n                disabled={!canEditPreferences}\n              />\n            </div>\n\n            <Separator />\n\n            <div className=\"flex flex-col gap-4\">\n              <span className=\"paragraph-medium-semibold text-gray-600\">Exibição hora</span>\n              <div className=\"flex flex-col lg:flex-row items-center gap-3\">\n                <ComboboxField\n                  label=\"Fuso horário\"\n                  placeholder=\"Selecione o fuso horário\"\n                  searchPlaceholder=\"Buscar fuso horário...\"\n                  containerClassName=\"w-full\"\n                  options={timezones}\n                  value={watch('timezone')}\n                  onChange={(value) => setValue('timezone', value, { shouldDirty: true })}\n                  icon={!canEditPreferences ? <IconLock className=\"size-4 text-gray-400\" /> : undefined}\n                  disabled={!canEditPreferences}\n                />\n                <SelectField\n                  label=\"Formato hora\"\n                  placeholder=\"Selecione o formato\"\n                  className=\"h-10!\"\n                  containerClassName=\"w-full\"\n                  options={TIME_FORMAT_OPTIONS}\n                  value={watch('timeFormat')}\n                  onChange={(value) =>\n                    setValue('timeFormat', value as string, { shouldDirty: true })\n                  }\n                  icon={<IconLock className=\"size-4 text-gray-400\" />}\n                  disabled\n                />\n              </div>\n            </div>\n\n          </div>\n        </div>\n\n        <div className=\"flex items-center h-20 px-4 lg:px-5 border-t border-gray-200 justify-between bg-white\">\n          <Button\n            variant=\"secondary\"\n            className=\"h-10!\"\n            type=\"button\"\n            disabled={isSaving}\n            onClick={() => {\n              reset();\n              onClose();\n            }}\n          >\n            Cancelar\n          </Button>\n          <Button className=\"h-10!\" type=\"submit\" disabled={isSaving}>\n            {isSaving ? 'Salvando...' : 'Salvar alterações'}\n          </Button>\n        </div>\n      </form>\n\n      <ConfirmGlobalPreferencesModal\n        open={confirmGlobalOpen}\n        onConfirm={handleConfirmGlobal}\n        onCancel={handleCancelGlobal}\n      />\n    </>\n  );\n}\n"],"mappings":"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","names":[]}
+{"version":3,"sources":["../../../../src/components/account/sections/PreferencesSection.tsx"],"sourcesContent":["'use client';\n\nimport { useState, useEffect } from 'react';\nimport { useForm } from 'react-hook-form';\nimport { toast } from 'sonner';\nimport { IconLock } from '@tabler/icons-react';\nimport { Button } from '../../ui/buttons/Button';\nimport { Separator } from '../../ui/data-display/Separator';\nimport { Toast } from '../../ui/feedback/Toast';\nimport { FormField } from '../../ui/form/FormField';\nimport { ComboboxField } from '../../ui/form/ComboboxField';\nimport { SelectField } from '../../ui/form/SelectField';\nimport ConfirmGlobalPreferencesModal from '../ConfirmGlobalPreferencesModal';\nimport { useAuth } from '../../../providers/auth.provider';\nimport { UserProfile } from '../../../modules/users/schema';\nimport type { UpdateAccountRequest } from '../../../modules/accounts/types';\nimport {\n  useUpdateAccountUser,\n  useUpdateAccount,\n} from '../../../modules/accounts/hooks/useAccountManagement';\nimport {\n  LANGUAGE_OPTIONS,\n  TIME_FORMAT_OPTIONS,\n} from '../constants';\nimport { useTimezones } from '../../../modules/accounts/hooks/useTimezones';\nimport { useCurrencies } from '../../../modules/accounts/hooks/useCurrencies';\n\ninterface PreferencesFormValues {\n  companyName: string;\n  language: string;\n  currency: string;\n  timezone: string;\n  timeFormat: string;\n  receive_sms: boolean;\n  receive_email: boolean;\n}\n\ninterface PreferencesSectionProps {\n  onClose: () => void;\n}\n\nexport function PreferencesSection({ onClose }: PreferencesSectionProps) {\n  const { data: timezones = [] } = useTimezones();\n  const { data: currencies = [] } = useCurrencies();\n  const { user, account } = useAuth();\n  const canEditPreferences =\n    user?.profile === UserProfile.owner || user?.profile === UserProfile.admin;\n  const updateAccountUser = useUpdateAccountUser();\n  const updateAccount = useUpdateAccount();\n  const [confirmGlobalOpen, setConfirmGlobalOpen] = useState(false);\n  const [pendingSubmit, setPendingSubmit] = useState<{\n    data: PreferencesFormValues;\n    accountFields: UpdateAccountRequest;\n  } | null>(null);\n  const [isSaving, setIsSaving] = useState(false);\n\n  const { watch, setValue, handleSubmit, reset, formState: { dirtyFields } } =\n    useForm<PreferencesFormValues>({\n      defaultValues: {\n        companyName: '',\n        language: '',\n        currency: '',\n        timezone: '',\n        timeFormat: '24h',\n        receive_sms: false,\n        receive_email: false,\n      },\n    });\n\n  useEffect(() => {\n    if (!user || !account) return;\n    reset({\n      companyName: account.name ?? '',\n      language: LANGUAGE_OPTIONS.find(\n        (o) => o.apiValue === user.language?.toLowerCase()\n      )?.value ?? 'pt-BR',\n      currency: account.currency,\n      timezone: account.timezone,\n      timeFormat: '24h',\n      receive_sms: user.receive_sms ?? false,\n      receive_email: user.receive_email ?? false,\n    });\n  }, [user, account, reset]);\n\n  const doSave = async (data: PreferencesFormValues, accountFields: UpdateAccountRequest) => {\n    setIsSaving(true);\n    try {\n      const apiLanguage = LANGUAGE_OPTIONS.find((o) => o.value === data.language)?.apiValue ?? data.language.toLowerCase();\n      await updateAccountUser.mutateAsync({\n        language: apiLanguage,\n        receive_sms: data.receive_sms,\n        receive_email: data.receive_email,\n      });\n\n      if (canEditPreferences && Object.keys(accountFields).length > 0) {\n        await updateAccount.mutateAsync(accountFields);\n      }\n\n      reset(data);\n      toast.custom((t) => (\n        <Toast variant=\"success\" message=\"Preferências salvas com sucesso\" toastId={t} />\n      ));\n      onClose();\n    } catch (error) {\n      toast.custom((t) => (\n        <Toast\n          variant=\"error\"\n          message={error instanceof Error ? error.message : 'Erro ao salvar preferências'}\n          toastId={t}\n        />\n      ));\n    } finally {\n      setIsSaving(false);\n    }\n  };\n\n  const onSubmit = (data: PreferencesFormValues) => {\n    const accountFields: UpdateAccountRequest = {\n      ...(canEditPreferences && dirtyFields.companyName && { name: data.companyName }),\n      ...(canEditPreferences && dirtyFields.currency && { currency: data.currency }),\n      ...(canEditPreferences && dirtyFields.timezone && { timezone: data.timezone }),\n    };\n    const globalFieldChanged = Object.keys(accountFields).length > 0;\n\n    if (globalFieldChanged) {\n      setPendingSubmit({ data, accountFields });\n      setConfirmGlobalOpen(true);\n    } else {\n      doSave(data, accountFields);\n    }\n  };\n\n  const handleConfirmGlobal = () => {\n    setConfirmGlobalOpen(false);\n    if (pendingSubmit) {\n      doSave(pendingSubmit.data, pendingSubmit.accountFields);\n      setPendingSubmit(null);\n    }\n  };\n\n  const handleCancelGlobal = () => {\n    setConfirmGlobalOpen(false);\n    setPendingSubmit(null);\n  };\n\n  return (\n    <>\n      <form onSubmit={handleSubmit(onSubmit)} className=\"flex flex-col\">\n        <div className=\"overflow-y-auto overscroll-contain px-4 pb-4 lg:p-5 flex flex-col gap-5 lg:gap-6\">\n          <span className=\"paragraph-medium-semibold text-gray-950\">Preferências</span>\n          <div className=\"flex flex-col gap-8\">\n            <div className=\"flex flex-col lg:flex-row items-center gap-3\">\n              <FormField\n                label=\"Nome da empresa\"\n                placeholder=\"Digite o nome da empresa\"\n                classnameContainer=\"w-full\"\n                value={watch('companyName')}\n                onChange={(e) => setValue('companyName', e.target.value, { shouldDirty: true })}\n                disabled={!canEditPreferences}\n              />\n            </div>\n\n            <Separator />\n\n            <div className=\"flex flex-col lg:flex-row items-center gap-3\">\n              <ComboboxField\n                label=\"Idioma\"\n                placeholder=\"Selecione o idioma\"\n                searchPlaceholder=\"Buscar idioma...\"\n                containerClassName=\"w-full\"\n                options={LANGUAGE_OPTIONS}\n                value={watch('language')}\n                onChange={(value) => setValue('language', value, { shouldDirty: true })}\n              />\n              <ComboboxField\n                label=\"Moeda\"\n                placeholder=\"Selecione a moeda\"\n                searchPlaceholder=\"Buscar moeda...\"\n                containerClassName=\"w-full\"\n                options={currencies}\n                value={watch('currency')}\n                onChange={(value) => setValue('currency', value, { shouldDirty: true })}\n                icon={!canEditPreferences ? <IconLock className=\"size-4 text-gray-400\" /> : undefined}\n                disabled={!canEditPreferences}\n              />\n            </div>\n\n            <Separator />\n\n            <div className=\"flex flex-col gap-4\">\n              <span className=\"paragraph-medium-semibold text-gray-950\">Exibição hora</span>\n              <div className=\"flex flex-col lg:flex-row items-center gap-3\">\n                <ComboboxField\n                  label=\"Fuso horário\"\n                  placeholder=\"Selecione o fuso horário\"\n                  searchPlaceholder=\"Buscar fuso horário...\"\n                  containerClassName=\"w-full\"\n                  options={timezones}\n                  value={watch('timezone')}\n                  onChange={(value) => setValue('timezone', value, { shouldDirty: true })}\n                  icon={!canEditPreferences ? <IconLock className=\"size-4 text-gray-400\" /> : undefined}\n                  disabled={!canEditPreferences}\n                />\n                <SelectField\n                  label=\"Formato hora\"\n                  placeholder=\"Selecione o formato\"\n                  className=\"h-10!\"\n                  containerClassName=\"w-full\"\n                  options={TIME_FORMAT_OPTIONS}\n                  value={watch('timeFormat')}\n                  onChange={(value) =>\n                    setValue('timeFormat', value as string, { shouldDirty: true })\n                  }\n                  icon={<IconLock className=\"size-4 text-gray-400\" />}\n                  disabled\n                />\n              </div>\n            </div>\n\n          </div>\n        </div>\n\n        <div className=\"flex items-center h-20 px-4 lg:px-5 border-t border-gray-200 justify-between bg-white\">\n          <Button\n            variant=\"secondary\"\n            className=\"h-10!\"\n            type=\"button\"\n            disabled={isSaving}\n            onClick={() => {\n              reset();\n              onClose();\n            }}\n          >\n            Cancelar\n          </Button>\n          <Button className=\"h-10!\" type=\"submit\" disabled={isSaving}>\n            {isSaving ? 'Salvando...' : 'Salvar alterações'}\n          </Button>\n        </div>\n      </form>\n\n      <ConfirmGlobalPreferencesModal\n        open={confirmGlobalOpen}\n        onConfirm={handleConfirmGlobal}\n        onCancel={handleCancelGlobal}\n      />\n    </>\n  );\n}\n"],"mappings":"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","names":[]}

package/dist/components/layouts/NotificationsPopover.mjs

@@ -15,7 +15,7 @@ function NotificationsPopover({
   side,
   align,
   contentClassName,
-  badgeClassName = "bg-pages-400"
+  badgeClassName = "bg-cyan-300"
 }) {
   const [open, setOpen] = useState(false);
   const { data: messagesData } = useMessages({ type: "notification", readed: true, limit: 5 });
@@ -39,7 +39,7 @@ function NotificationsPopover({
             "span",
             {
               className: cn(
-                "absolute top-2 right-2 size-2.5 rounded-full",
+                "absolute top-0.5 right-0.5 size-3.5 rounded-full border-2 border-white",
                 badgeClassName
               )
             }

package/dist/components/layouts/NotificationsPopover.mjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/layouts/NotificationsPopover.tsx"],"sourcesContent":["\"use client\";\n\nimport { useState } from \"react\";\nimport { IconBell } from '@tabler/icons-react';\nimport * as PopoverPrimitive from \"@radix-ui/react-popover\";\nimport { Popover } from \"../ui/overlay/Popover\";\nimport { Button } from \"../ui/buttons/Button\";\nimport NotificationCard from \"../widgets/notifications/NotificationCard\";\nimport { cn } from \"../../infra/utils/clsx\";\nimport { useMessages, useMarkAllMessagesAsRead } from \"../../modules/users/hooks/messages.hook\";\nimport { formatDistanceToNow } from \"date-fns\";\nimport { ptBR } from \"date-fns/locale\";\n\nexport interface NotificationsPopoverProps {\n  onViewAll?: () => void;\n  side?: \"top\" | \"bottom\" | \"left\" | \"right\";\n  align?: \"start\" | \"center\" | \"end\";\n  contentClassName?: string;\n  badgeClassName?: string;\n}\n\nfunction NotificationsPopover({\n  onViewAll,\n  side,\n  align,\n  contentClassName,\n  badgeClassName = \"bg-pages-400\",\n}: NotificationsPopoverProps) {\n  const [open, setOpen] = useState(false);\n  const { data: messagesData } = useMessages({ type: 'notification', readed: true, limit: 5 });\n  const { mutate: markAllAsRead } = useMarkAllMessagesAsRead();\n\n  const messages = messagesData?.data ?? [];\n  const totalUnread = messagesData?.totalUnread ?? 0;\n\n  const handleOpenChange = (isOpen: boolean) => {\n    setOpen(isOpen);\n    if (isOpen && totalUnread > 0) {\n      markAllAsRead();\n    }\n  };\n\n  return (\n    <Popover open={open} onOpenChange={handleOpenChange}>\n      <PopoverPrimitive.Trigger className=\"cursor-pointer\">\n        <div\n          className={`relative rounded-full p-2.5 ${open ? \"bg-gray-100\" : \"hover:bg-gray-100\"}`}\n        >\n          <IconBell size={20} className=\"text-gray-500\" />\n          {totalUnread > 0 && (\n            <span\n              className={cn(\n                \"absolute top-2 right-2 size-2.5 rounded-full\",\n                badgeClassName,\n              )}\n            />\n          )}\n        </div>\n      </PopoverPrimitive.Trigger>\n      <PopoverPrimitive.Portal>\n        <PopoverPrimitive.Content\n          className={cn(\n            \"absolute bottom-2 left-[26px] z-[9999] w-[308px] p-0 pt-4 bg-white rounded-2xl shadow-md border border-gray-200\",\n            contentClassName,\n          )}\n          side={side}\n          align={align}\n          sideOffset={8}\n        >\n          <span className=\"paragraph-small-semibold text-gray-950 px-4\">\n            Últimas notificações\n          </span>\n\n          {messages.length > 0 ? (\n            messages.map((message, index) => (\n              <NotificationCard\n                key={message.id}\n                icon={<IconBell size={16} />}\n                iconBgColor=\"bg-gray-100\"\n                title={message.subject}\n                time={formatDistanceToNow(new Date(message.datetime_add), {\n                  addSuffix: true,\n                  locale: ptBR,\n                })}\n                gapPx={6}\n                showBorder={index < messages.length - 1}\n              />\n            ))\n          ) : (\n            <div className=\"flex flex-col items-center gap-4 pt-[41.5px] pb-[33.5px]\">\n              <div className=\"bg-gray-50 rounded-md p-2.5\">\n                <IconBell size={20} color=\"var(--color-gray-950)\" />\n              </div>\n              <span className=\"paragraph-small-medium text-gray-950\">\n                Sem notificações por enquanto\n              </span>\n            </div>\n          )}\n\n          {onViewAll && (\n            <Button\n              variant=\"secondary\"\n              className=\"h-8! mt-2 mb-4 mx-4 paragraph-small-semibold\"\n              onClick={onViewAll}\n            >\n              Todas as notificações\n            </Button>\n          )}\n        </PopoverPrimitive.Content>\n      </PopoverPrimitive.Portal>\n    </Popover>\n  );\n}\n\nexport { NotificationsPopover };\n"],"mappings":";AA6CQ,SAGE,KAHF;AA3CR,SAAS,gBAAgB;AACzB,SAAS,gBAAgB;AACzB,YAAY,sBAAsB;AAClC,SAAS,eAAe;AACxB,SAAS,cAAc;AACvB,OAAO,sBAAsB;AAC7B,SAAS,UAAU;AACnB,SAAS,aAAa,gCAAgC;AACtD,SAAS,2BAA2B;AACpC,SAAS,YAAY;AAUrB,SAAS,qBAAqB;AAAA,EAC5B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,iBAAiB;AACnB,GAA8B;AAC5B,QAAM,CAAC,MAAM,OAAO,IAAI,SAAS,KAAK;AACtC,QAAM,EAAE,MAAM,aAAa,IAAI,YAAY,EAAE,MAAM,gBAAgB,QAAQ,MAAM,OAAO,EAAE,CAAC;AAC3F,QAAM,EAAE,QAAQ,cAAc,IAAI,yBAAyB;AAE3D,QAAM,WAAW,cAAc,QAAQ,CAAC;AACxC,QAAM,cAAc,cAAc,eAAe;AAEjD,QAAM,mBAAmB,CAAC,WAAoB;AAC5C,YAAQ,MAAM;AACd,QAAI,UAAU,cAAc,GAAG;AAC7B,oBAAc;AAAA,IAChB;AAAA,EACF;AAEA,SACE,qBAAC,WAAQ,MAAY,cAAc,kBACjC;AAAA,wBAAC,iBAAiB,SAAjB,EAAyB,WAAU,kBAClC;AAAA,MAAC;AAAA;AAAA,QACC,WAAW,+BAA+B,OAAO,gBAAgB,mBAAmB;AAAA,QAEpF;AAAA,8BAAC,YAAS,MAAM,IAAI,WAAU,iBAAgB;AAAA,UAC7C,cAAc,KACb;AAAA,YAAC;AAAA;AAAA,cACC,WAAW;AAAA,gBACT;AAAA,gBACA;AAAA,cACF;AAAA;AAAA,UACF;AAAA;AAAA;AAAA,IAEJ,GACF;AAAA,IACA,oBAAC,iBAAiB,QAAjB,EACC;AAAA,MAAC,iBAAiB;AAAA,MAAjB;AAAA,QACC,WAAW;AAAA,UACT;AAAA,UACA;AAAA,QACF;AAAA,QACA;AAAA,QACA;AAAA,QACA,YAAY;AAAA,QAEZ;AAAA,8BAAC,UAAK,WAAU,+CAA8C,2CAE9D;AAAA,UAEC,SAAS,SAAS,IACjB,SAAS,IAAI,CAAC,SAAS,UACrB;AAAA,YAAC;AAAA;AAAA,cAEC,MAAM,oBAAC,YAAS,MAAM,IAAI;AAAA,cAC1B,aAAY;AAAA,cACZ,OAAO,QAAQ;AAAA,cACf,MAAM,oBAAoB,IAAI,KAAK,QAAQ,YAAY,GAAG;AAAA,gBACxD,WAAW;AAAA,gBACX,QAAQ;AAAA,cACV,CAAC;AAAA,cACD,OAAO;AAAA,cACP,YAAY,QAAQ,SAAS,SAAS;AAAA;AAAA,YATjC,QAAQ;AAAA,UAUf,CACD,IAED,qBAAC,SAAI,WAAU,4DACb;AAAA,gCAAC,SAAI,WAAU,+BACb,8BAAC,YAAS,MAAM,IAAI,OAAM,yBAAwB,GACpD;AAAA,YACA,oBAAC,UAAK,WAAU,wCAAuC,iDAEvD;AAAA,aACF;AAAA,UAGD,aACC;AAAA,YAAC;AAAA;AAAA,cACC,SAAQ;AAAA,cACR,WAAU;AAAA,cACV,SAAS;AAAA,cACV;AAAA;AAAA,UAED;AAAA;AAAA;AAAA,IAEJ,GACF;AAAA,KACF;AAEJ;","names":[]}
+{"version":3,"sources":["../../../src/components/layouts/NotificationsPopover.tsx"],"sourcesContent":["\"use client\";\n\nimport { useState } from \"react\";\nimport { IconBell } from '@tabler/icons-react';\nimport * as PopoverPrimitive from \"@radix-ui/react-popover\";\nimport { Popover } from \"../ui/overlay/Popover\";\nimport { Button } from \"../ui/buttons/Button\";\nimport NotificationCard from \"../widgets/notifications/NotificationCard\";\nimport { cn } from \"../../infra/utils/clsx\";\nimport { useMessages, useMarkAllMessagesAsRead } from \"../../modules/users/hooks/messages.hook\";\nimport { formatDistanceToNow } from \"date-fns\";\nimport { ptBR } from \"date-fns/locale\";\n\nexport interface NotificationsPopoverProps {\n  onViewAll?: () => void;\n  side?: \"top\" | \"bottom\" | \"left\" | \"right\";\n  align?: \"start\" | \"center\" | \"end\";\n  contentClassName?: string;\n  badgeClassName?: string;\n}\n\nfunction NotificationsPopover({\n  onViewAll,\n  side,\n  align,\n  contentClassName,\n  badgeClassName = \"bg-cyan-300\",\n}: NotificationsPopoverProps) {\n  const [open, setOpen] = useState(false);\n  const { data: messagesData } = useMessages({ type: 'notification', readed: true, limit: 5 });\n  const { mutate: markAllAsRead } = useMarkAllMessagesAsRead();\n\n  const messages = messagesData?.data ?? [];\n  const totalUnread = messagesData?.totalUnread ?? 0;\n\n  const handleOpenChange = (isOpen: boolean) => {\n    setOpen(isOpen);\n    if (isOpen && totalUnread > 0) {\n      markAllAsRead();\n    }\n  };\n\n  return (\n    <Popover open={open} onOpenChange={handleOpenChange}>\n      <PopoverPrimitive.Trigger className=\"cursor-pointer\">\n        <div\n          className={`relative rounded-full p-2.5 ${open ? \"bg-gray-100\" : \"hover:bg-gray-100\"}`}\n        >\n          <IconBell size={20} className=\"text-gray-500\" />\n          {totalUnread > 0 && (\n            <span\n              className={cn(\n                \"absolute top-0.5 right-0.5 size-3.5 rounded-full border-2 border-white\",\n                badgeClassName,\n              )}\n            />\n          )}\n        </div>\n      </PopoverPrimitive.Trigger>\n      <PopoverPrimitive.Portal>\n        <PopoverPrimitive.Content\n          className={cn(\n            \"absolute bottom-2 left-[26px] z-[9999] w-[308px] p-0 pt-4 bg-white rounded-2xl shadow-md border border-gray-200\",\n            contentClassName,\n          )}\n          side={side}\n          align={align}\n          sideOffset={8}\n        >\n          <span className=\"paragraph-small-semibold text-gray-950 px-4\">\n            Últimas notificações\n          </span>\n\n          {messages.length > 0 ? (\n            messages.map((message, index) => (\n              <NotificationCard\n                key={message.id}\n                icon={<IconBell size={16} />}\n                iconBgColor=\"bg-gray-100\"\n                title={message.subject}\n                time={formatDistanceToNow(new Date(message.datetime_add), {\n                  addSuffix: true,\n                  locale: ptBR,\n                })}\n                gapPx={6}\n                showBorder={index < messages.length - 1}\n              />\n            ))\n          ) : (\n            <div className=\"flex flex-col items-center gap-4 pt-[41.5px] pb-[33.5px]\">\n              <div className=\"bg-gray-50 rounded-md p-2.5\">\n                <IconBell size={20} color=\"var(--color-gray-950)\" />\n              </div>\n              <span className=\"paragraph-small-medium text-gray-950\">\n                Sem notificações por enquanto\n              </span>\n            </div>\n          )}\n\n          {onViewAll && (\n            <Button\n              variant=\"secondary\"\n              className=\"h-8! mt-2 mb-4 mx-4 paragraph-small-semibold\"\n              onClick={onViewAll}\n            >\n              Todas as notificações\n            </Button>\n          )}\n        </PopoverPrimitive.Content>\n      </PopoverPrimitive.Portal>\n    </Popover>\n  );\n}\n\nexport { NotificationsPopover };\n"],"mappings":";AA6CQ,SAGE,KAHF;AA3CR,SAAS,gBAAgB;AACzB,SAAS,gBAAgB;AACzB,YAAY,sBAAsB;AAClC,SAAS,eAAe;AACxB,SAAS,cAAc;AACvB,OAAO,sBAAsB;AAC7B,SAAS,UAAU;AACnB,SAAS,aAAa,gCAAgC;AACtD,SAAS,2BAA2B;AACpC,SAAS,YAAY;AAUrB,SAAS,qBAAqB;AAAA,EAC5B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,iBAAiB;AACnB,GAA8B;AAC5B,QAAM,CAAC,MAAM,OAAO,IAAI,SAAS,KAAK;AACtC,QAAM,EAAE,MAAM,aAAa,IAAI,YAAY,EAAE,MAAM,gBAAgB,QAAQ,MAAM,OAAO,EAAE,CAAC;AAC3F,QAAM,EAAE,QAAQ,cAAc,IAAI,yBAAyB;AAE3D,QAAM,WAAW,cAAc,QAAQ,CAAC;AACxC,QAAM,cAAc,cAAc,eAAe;AAEjD,QAAM,mBAAmB,CAAC,WAAoB;AAC5C,YAAQ,MAAM;AACd,QAAI,UAAU,cAAc,GAAG;AAC7B,oBAAc;AAAA,IAChB;AAAA,EACF;AAEA,SACE,qBAAC,WAAQ,MAAY,cAAc,kBACjC;AAAA,wBAAC,iBAAiB,SAAjB,EAAyB,WAAU,kBAClC;AAAA,MAAC;AAAA;AAAA,QACC,WAAW,+BAA+B,OAAO,gBAAgB,mBAAmB;AAAA,QAEpF;AAAA,8BAAC,YAAS,MAAM,IAAI,WAAU,iBAAgB;AAAA,UAC7C,cAAc,KACb;AAAA,YAAC;AAAA;AAAA,cACC,WAAW;AAAA,gBACT;AAAA,gBACA;AAAA,cACF;AAAA;AAAA,UACF;AAAA;AAAA;AAAA,IAEJ,GACF;AAAA,IACA,oBAAC,iBAAiB,QAAjB,EACC;AAAA,MAAC,iBAAiB;AAAA,MAAjB;AAAA,QACC,WAAW;AAAA,UACT;AAAA,UACA;AAAA,QACF;AAAA,QACA;AAAA,QACA;AAAA,QACA,YAAY;AAAA,QAEZ;AAAA,8BAAC,UAAK,WAAU,+CAA8C,2CAE9D;AAAA,UAEC,SAAS,SAAS,IACjB,SAAS,IAAI,CAAC,SAAS,UACrB;AAAA,YAAC;AAAA;AAAA,cAEC,MAAM,oBAAC,YAAS,MAAM,IAAI;AAAA,cAC1B,aAAY;AAAA,cACZ,OAAO,QAAQ;AAAA,cACf,MAAM,oBAAoB,IAAI,KAAK,QAAQ,YAAY,GAAG;AAAA,gBACxD,WAAW;AAAA,gBACX,QAAQ;AAAA,cACV,CAAC;AAAA,cACD,OAAO;AAAA,cACP,YAAY,QAAQ,SAAS,SAAS;AAAA;AAAA,YATjC,QAAQ;AAAA,UAUf,CACD,IAED,qBAAC,SAAI,WAAU,4DACb;AAAA,gCAAC,SAAI,WAAU,+BACb,8BAAC,YAAS,MAAM,IAAI,OAAM,yBAAwB,GACpD;AAAA,YACA,oBAAC,UAAK,WAAU,wCAAuC,iDAEvD;AAAA,aACF;AAAA,UAGD,aACC;AAAA,YAAC;AAAA;AAAA,cACC,SAAQ;AAAA,cACR,WAAU;AAAA,cACV,SAAS;AAAA,cACV;AAAA;AAAA,UAED;AAAA;AAAA;AAAA,IAEJ,GACF;AAAA,KACF;AAEJ;","names":[]}

package/dist/components/layouts/ProfilePopover.mjs

@@ -12,6 +12,7 @@ import { useAuth } from "../../providers/auth.provider";
 import { cn } from "../../infra/utils/clsx";
 import { useIaCredits } from "../../modules/ia-credits/hooks/ia-credits.hook";
 import { useBuyCreditsModal } from "../../store/useBuyCreditsModal";
+import { useAccountModals } from "../../store/useAccountModals";
 function ProfilePopover({
   side = "top",
   align = "start",
@@ -23,6 +24,7 @@ function ProfilePopover({
   const [popoverOpen, setPopoverOpen] = useState(false);
   const { summary, subscription, isSubscriptionLoading, isCreditsLoading } = useIaCredits();
   const { openModal: openBuyCreditsModal } = useBuyCreditsModal();
+  const { openConfigurations } = useAccountModals();
   const handleLogout = async () => {
     try {
       setPopoverOpen(false);
@@ -109,7 +111,7 @@ function ProfilePopover({
                 }
               ),
               /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-2", children: [
-                menuItems.length > 0 && /* @__PURE__ */ jsx("div", { className: "flex flex-col", children: menuItems.map((item, index) => /* @__PURE__ */ jsx(
+                /* @__PURE__ */ jsx("div", { className: "flex flex-col", children: menuItems.map((item, index) => /* @__PURE__ */ jsx(
                   NavBarItem,
                   {
                     icon: item.icon,

package/dist/components/layouts/ProfilePopover.mjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/layouts/ProfilePopover.tsx"],"sourcesContent":["\"use client\";\n\nimport { useState } from \"react\";\nimport * as PopoverPrimitive from \"@radix-ui/react-popover\";\nimport { Popover } from \"../ui/overlay/Popover\";\nimport { Progress } from \"../ui/feedback/Progress\";\nimport { Separator } from \"../ui/data-display/Separator\";\nimport { NavBarItem } from \"./NavBarItem\";\nimport { UserAvatar } from \"../ui/data-display/UserAvatar\";\nimport { LoadingOverlay } from \"../ui/feedback/LoadingOverlay\";\nimport { useAuth } from \"../../providers/auth.provider\";\nimport { cn } from \"../../infra/utils/clsx\";\nimport { useIaCredits } from \"../../modules/ia-credits/hooks/ia-credits.hook\";\nimport { useBuyCreditsModal } from \"../../store/useBuyCreditsModal\";\n\nexport interface ProfileMenuItem {\n  icon?: React.ReactNode;\n  label: string;\n  onClick: () => void;\n}\n\nexport interface ProfilePopoverProps {\n  side?: \"top\" | \"bottom\" | \"left\" | \"right\";\n  align?: \"start\" | \"center\" | \"end\";\n  contentClassName?: string;\n  menuItems?: ProfileMenuItem[];\n}\n\nfunction ProfilePopover({\n  side = \"top\",\n  align = \"start\",\n  contentClassName = \"absolute bottom-2 left-[26px]\",\n  menuItems = [],\n}: ProfilePopoverProps) {\n  const { user, logout } = useAuth();\n  const [isLoggingOut, setIsLoggingOut] = useState(false);\n  const [popoverOpen, setPopoverOpen] = useState(false);\n\n  const { summary, subscription, isSubscriptionLoading, isCreditsLoading } =\n    useIaCredits();\n  const { openModal: openBuyCreditsModal } = useBuyCreditsModal();\n\n  const handleLogout = async () => {\n    try {\n      setPopoverOpen(false);\n      setIsLoggingOut(true);\n      await logout();\n    } finally {\n      setIsLoggingOut(false);\n    }\n  };\n\n  const hasSubscription = !isSubscriptionLoading && subscription !== null;\n\n  const shouldShowCredits = hasSubscription && subscription.id_wl === 1;\n  const creditsPercentage =\n    shouldShowCredits && summary.totalCredits > 0\n      ? (summary.usedCredits / summary.totalCredits) * 100\n      : 0;\n\n  return (\n    <>\n      <LoadingOverlay\n        isLoading={isLoggingOut}\n        message=\"Saindo da sua conta...\"\n      />\n      <Popover open={popoverOpen} onOpenChange={setPopoverOpen}>\n        <PopoverPrimitive.Trigger className=\"cursor-pointer\">\n          {user && (\n            <UserAvatar\n              key={user.id}\n              photo={user.photo}\n              name={user.name}\n              size={40}\n            />\n          )}\n        </PopoverPrimitive.Trigger>\n\n        <PopoverPrimitive.Portal>\n          <PopoverPrimitive.Content\n            className={cn(\n              \"w-64.75 p-0 bg-white rounded-2xl shadow-md border border-gray-200 z-99\",\n              contentClassName,\n            )}\n            side={side}\n            align={align}\n            sideOffset={8}\n          >\n            <div className=\"grid grid-cols-[32px_1fr] items-center gap-3 p-3 w-full\">\n              {user && (\n                <UserAvatar\n                  key={user.id}\n                  photo={user.photo}\n                  name={user.name}\n                  size={32}\n                />\n              )}\n\n              <div className=\"flex flex-col gap-0.5 min-w-0\">\n                <span className=\"paragraph-small-semibold text-gray-950 truncate\">\n                  {user?.name || \"\"}\n                </span>\n                <span className=\"paragraph-xsmall-medium text-gray-500 truncate\">\n                  {user?.email || \"\"}\n                </span>\n              </div>\n            </div>\n\n            <div className=\"flex flex-col gap-2 border-t border-gray-200 rounded-2xl p-1.5\">\n              {shouldShowCredits && (\n                <div\n                  className={cn(\n                    \"flex flex-col bg-gray-950 rounded-lg gap-4 w-full p-4 transition-colors\",\n                    \"cursor-pointer hover:bg-gray-900\",\n                  )}\n                  onClick={() => openBuyCreditsModal()}\n                >\n                  <div className=\"flex items-center justify-between gap-2\">\n                    <span className=\"paragraph-xsmall-semibold text-white truncate\">\n                      Créditos usados\n                    </span>\n                    <span className=\"paragraph-xsmall-medium text-white/50\">\n                      {summary.usedCredits.toLocaleString(\"pt-BR\")}/\n                      {summary.totalCredits.toLocaleString(\"pt-BR\")}\n                    </span>\n                  </div>\n                  <Progress\n                    className=\"bg-white/10\"\n                    indicatorColor=\"bg-white\"\n                    value={creditsPercentage}\n                  />\n                </div>\n              )}\n\n              <div className=\"flex flex-col gap-2\">\n                {menuItems.length > 0 && (\n                  <div className=\"flex flex-col\">\n                    {menuItems.map((item, index) => (\n                      <NavBarItem\n                        key={index}\n                        icon={item.icon}\n                        label={item.label}\n                        onClick={item.onClick}\n                      />\n                    ))}\n                  </div>\n                )}\n                <Separator />\n                <NavBarItem label=\"Sair\" onClick={handleLogout} />\n              </div>\n            </div>\n          </PopoverPrimitive.Content>\n        </PopoverPrimitive.Portal>\n      </Popover>\n    </>\n  );\n}\n\nexport { ProfilePopover };\n"],"mappings":"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","names":[]}
+{"version":3,"sources":["../../../src/components/layouts/ProfilePopover.tsx"],"sourcesContent":["\"use client\";\n\nimport { useState } from \"react\";\nimport * as PopoverPrimitive from \"@radix-ui/react-popover\";\nimport { IconSettings2 } from \"@tabler/icons-react\";\nimport { Popover } from \"../ui/overlay/Popover\";\nimport { Progress } from \"../ui/feedback/Progress\";\nimport { Separator } from \"../ui/data-display/Separator\";\nimport { NavBarItem } from \"./NavBarItem\";\nimport { UserAvatar } from \"../ui/data-display/UserAvatar\";\nimport { LoadingOverlay } from \"../ui/feedback/LoadingOverlay\";\nimport { useAuth } from \"../../providers/auth.provider\";\nimport { cn } from \"../../infra/utils/clsx\";\nimport { useIaCredits } from \"../../modules/ia-credits/hooks/ia-credits.hook\";\nimport { useBuyCreditsModal } from \"../../store/useBuyCreditsModal\";\nimport { useAccountModals } from \"../../store/useAccountModals\";\n\nexport interface ProfileMenuItem {\n  icon?: React.ReactNode;\n  label: string;\n  onClick: () => void;\n}\n\nexport interface ProfilePopoverProps {\n  side?: \"top\" | \"bottom\" | \"left\" | \"right\";\n  align?: \"start\" | \"center\" | \"end\";\n  contentClassName?: string;\n  menuItems?: ProfileMenuItem[];\n}\n\nfunction ProfilePopover({\n  side = \"top\",\n  align = \"start\",\n  contentClassName = \"absolute bottom-2 left-[26px]\",\n  menuItems = [],\n}: ProfilePopoverProps) {\n  const { user, logout } = useAuth();\n  const [isLoggingOut, setIsLoggingOut] = useState(false);\n  const [popoverOpen, setPopoverOpen] = useState(false);\n\n  const { summary, subscription, isSubscriptionLoading, isCreditsLoading } =\n    useIaCredits();\n  const { openModal: openBuyCreditsModal } = useBuyCreditsModal();\n  const { openConfigurations } = useAccountModals();\n\n  const handleLogout = async () => {\n    try {\n      setPopoverOpen(false);\n      setIsLoggingOut(true);\n      await logout();\n    } finally {\n      setIsLoggingOut(false);\n    }\n  };\n\n  const hasSubscription = !isSubscriptionLoading && subscription !== null;\n\n  const shouldShowCredits = hasSubscription && subscription.id_wl === 1;\n  const creditsPercentage =\n    shouldShowCredits && summary.totalCredits > 0\n      ? (summary.usedCredits / summary.totalCredits) * 100\n      : 0;\n\n  return (\n    <>\n      <LoadingOverlay\n        isLoading={isLoggingOut}\n        message=\"Saindo da sua conta...\"\n      />\n      <Popover open={popoverOpen} onOpenChange={setPopoverOpen}>\n        <PopoverPrimitive.Trigger className=\"cursor-pointer\">\n          {user && (\n            <UserAvatar\n              key={user.id}\n              photo={user.photo}\n              name={user.name}\n              size={40}\n            />\n          )}\n        </PopoverPrimitive.Trigger>\n\n        <PopoverPrimitive.Portal>\n          <PopoverPrimitive.Content\n            className={cn(\n              \"w-64.75 p-0 bg-white rounded-2xl shadow-md border border-gray-200 z-99\",\n              contentClassName,\n            )}\n            side={side}\n            align={align}\n            sideOffset={8}\n          >\n            <div className=\"grid grid-cols-[32px_1fr] items-center gap-3 p-3 w-full\">\n              {user && (\n                <UserAvatar\n                  key={user.id}\n                  photo={user.photo}\n                  name={user.name}\n                  size={32}\n                />\n              )}\n\n              <div className=\"flex flex-col gap-0.5 min-w-0\">\n                <span className=\"paragraph-small-semibold text-gray-950 truncate\">\n                  {user?.name || \"\"}\n                </span>\n                <span className=\"paragraph-xsmall-medium text-gray-500 truncate\">\n                  {user?.email || \"\"}\n                </span>\n              </div>\n            </div>\n\n            <div className=\"flex flex-col gap-2 border-t border-gray-200 rounded-2xl p-1.5\">\n              {shouldShowCredits && (\n                <div\n                  className={cn(\n                    \"flex flex-col bg-gray-950 rounded-lg gap-4 w-full p-4 transition-colors\",\n                    \"cursor-pointer hover:bg-gray-900\",\n                  )}\n                  onClick={() => openBuyCreditsModal()}\n                >\n                  <div className=\"flex items-center justify-between gap-2\">\n                    <span className=\"paragraph-xsmall-semibold text-white truncate\">\n                      Créditos usados\n                    </span>\n                    <span className=\"paragraph-xsmall-medium text-white/50\">\n                      {summary.usedCredits.toLocaleString(\"pt-BR\")}/\n                      {summary.totalCredits.toLocaleString(\"pt-BR\")}\n                    </span>\n                  </div>\n                  <Progress\n                    className=\"bg-white/10\"\n                    indicatorColor=\"bg-white\"\n                    value={creditsPercentage}\n                  />\n                </div>\n              )}\n\n              <div className=\"flex flex-col gap-2\">\n                <div className=\"flex flex-col\">\n                  {menuItems.map((item, index) => (\n                    <NavBarItem\n                      key={index}\n                      icon={item.icon}\n                      label={item.label}\n                      onClick={item.onClick}\n                    />\n                  ))}\n                </div>\n                <Separator />\n                <NavBarItem label=\"Sair\" onClick={handleLogout} />\n              </div>\n            </div>\n          </PopoverPrimitive.Content>\n        </PopoverPrimitive.Portal>\n      </Popover>\n    </>\n  );\n}\n\nexport { ProfilePopover };\n"],"mappings":"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","names":[]}

package/dist/components/pages/NotFoundPage.mjs

@@ -1,5 +1,7 @@
+"use client";
 import { jsx, jsxs } from "react/jsx-runtime";
 import Image from "next/image";
+import { useWhitelabel } from "../../providers/whitelabel.provider";
 function GreatAppsLogo() {
   return /* @__PURE__ */ jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", width: "50", height: "50", viewBox: "0 0 68 68", fill: "none", children: [
     /* @__PURE__ */ jsx("rect", { x: "4.5", y: "4.5", width: "58.4463", height: "58.4463", rx: "14.2271", fill: "#09090B" }),
@@ -8,11 +10,14 @@ function GreatAppsLogo() {
   ] });
 }
 function NotFoundPage() {
+  const { whitelabel } = useWhitelabel();
+  const isGreatApps = !whitelabel || whitelabel.id === 1;
+  const whitelabelLogo = whitelabel?.logo ? `${process.env.NEXT_PUBLIC_STORAGE_URL}/${whitelabel.logo}` : null;
   return /* @__PURE__ */ jsx("div", { className: "relative flex min-h-screen w-full flex-col items-center justify-center overflow-hidden bg-white", children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center gap-[22px] text-center", children: [
     /* @__PURE__ */ jsxs("div", { className: "relative flex flex-col items-center", children: [
       /* @__PURE__ */ jsx(Image, { src: "/images/404.svg", alt: "404", width: 440, height: 173, priority: true, unoptimized: true }),
       /* @__PURE__ */ jsx("div", { className: "-mt-1 w-full border-t border-zinc-100" }),
-      /* @__PURE__ */ jsx("div", { className: "-mt-[25px]", children: /* @__PURE__ */ jsx(GreatAppsLogo, {}) })
+      /* @__PURE__ */ jsx("div", { className: "-mt-[25px]", children: isGreatApps ? /* @__PURE__ */ jsx(GreatAppsLogo, {}) : whitelabelLogo ? /* @__PURE__ */ jsx(Image, { src: whitelabelLogo, alt: whitelabel?.name || "", width: 50, height: 50, className: "rounded-xl object-contain" }) : null })
     ] }),
     /* @__PURE__ */ jsx("h1", { className: "max-w-[554px] px-6 font-[family-name:var(--font-outfit)] text-[32px] leading-[36px] font-semibold text-zinc-950 sm:px-0 sm:text-[56px] sm:leading-[56px]", children: "P\xE1gina n\xE3o foi encontrada!" }),
     /* @__PURE__ */ jsx("p", { className: "max-w-[496px] px-6 paragraph-medium-medium text-zinc-950 sm:px-0", children: "A p\xE1gina que voc\xEA est\xE1 procurando n\xE3o existe. Verifique se digitou corretamente o link que est\xE1 procurando." })

package/dist/components/pages/NotFoundPage.mjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/pages/NotFoundPage.tsx"],"sourcesContent":["import Image from \"next/image\";\n\nfunction GreatAppsLogo() {\n  return (\n    <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"50\" height=\"50\" viewBox=\"0 0 68 68\" fill=\"none\">\n      <rect x=\"4.5\" y=\"4.5\" width=\"58.4463\" height=\"58.4463\" rx=\"14.2271\" fill=\"#09090B\" />\n      <rect x=\"4.5\" y=\"4.5\" width=\"58.4463\" height=\"58.4463\" rx=\"14.2271\" stroke=\"white\" strokeWidth=\"9\" />\n      <path d=\"M38.0883 19.5377C38.6909 19.5377 39.1795 20.0264 39.1795 20.6289V25.5892C39.1795 25.9865 39.106 26.3827 38.9364 26.7421C38.4857 27.6992 37.5451 28.2674 36.5452 28.2674H29.9031C28.9993 28.2674 28.2663 29.0004 28.2663 29.9042V37.5427C28.2663 38.4465 28.9993 39.1795 29.9031 39.1795H37.5415C38.4453 39.1795 39.1783 38.4465 39.1783 37.5427V30.9693C39.1783 30.4522 39.3053 29.9374 39.5804 29.5009C40.0596 28.7406 40.8768 28.2899 41.7462 28.2686H46.8168C47.4193 28.2686 47.908 28.7561 47.908 29.3586V37.8238C47.908 38.692 47.5629 39.5246 46.9497 40.139L40.1379 46.9508C39.5235 47.5652 38.6909 47.9091 37.8226 47.9091H29.3587C28.7561 47.9091 28.2674 47.4205 28.2674 46.8179L28.2674 41.8126C28.2674 41.114 27.9899 40.4439 27.4965 39.9504C27.0031 39.457 26.3329 39.1795 25.6343 39.1795H20.629C20.0265 39.1795 19.5378 38.6908 19.5378 38.0883L19.5378 29.6231C19.5378 28.7549 19.8829 27.9222 20.4961 27.3078L27.468 20.3371C27.9792 19.8259 28.6731 19.5377 29.3966 19.5377H38.0871H38.0883Z\" fill=\"white\" />\n    </svg>\n  );\n}\n\nexport function NotFoundPage() {\n  return (\n    <div className=\"relative flex min-h-screen w-full flex-col items-center justify-center overflow-hidden bg-white\">\n      <div className=\"flex flex-col items-center gap-[22px] text-center\">\n        <div className=\"relative flex flex-col items-center\">\n          <Image src=\"/images/404.svg\" alt=\"404\" width={440} height={173} priority unoptimized />\n\n          <div className=\"-mt-1 w-full border-t border-zinc-100\" />\n\n          <div className=\"-mt-[25px]\">\n            <GreatAppsLogo />\n          </div>\n        </div>\n\n        <h1 className=\"max-w-[554px] px-6 font-[family-name:var(--font-outfit)] text-[32px] leading-[36px] font-semibold text-zinc-950 sm:px-0 sm:text-[56px] sm:leading-[56px]\">\n          Página não foi encontrada!\n        </h1>\n\n        <p className=\"max-w-[496px] px-6 paragraph-medium-medium text-zinc-950 sm:px-0\">\n          A página que você está procurando não existe. Verifique se digitou corretamente o link que está procurando.\n        </p>\n      </div>\n    </div>\n  );\n}\n"],"mappings":"AAII,SACE,KADF;AAJJ,OAAO,WAAW;AAElB,SAAS,gBAAgB;AACvB,SACE,qBAAC,SAAI,OAAM,8BAA6B,OAAM,MAAK,QAAO,MAAK,SAAQ,aAAY,MAAK,QACtF;AAAA,wBAAC,UAAK,GAAE,OAAM,GAAE,OAAM,OAAM,WAAU,QAAO,WAAU,IAAG,WAAU,MAAK,WAAU;AAAA,IACnF,oBAAC,UAAK,GAAE,OAAM,GAAE,OAAM,OAAM,WAAU,QAAO,WAAU,IAAG,WAAU,QAAO,SAAQ,aAAY,KAAI;AAAA,IACnG,oBAAC,UAAK,GAAE,m9BAAk9B,MAAK,SAAQ;AAAA,KACz+B;AAEJ;AAEO,SAAS,eAAe;AAC7B,SACE,oBAAC,SAAI,WAAU,mGACb,+BAAC,SAAI,WAAU,qDACb;AAAA,yBAAC,SAAI,WAAU,uCACb;AAAA,0BAAC,SAAM,KAAI,mBAAkB,KAAI,OAAM,OAAO,KAAK,QAAQ,KAAK,UAAQ,MAAC,aAAW,MAAC;AAAA,MAErF,oBAAC,SAAI,WAAU,yCAAwC;AAAA,MAEvD,oBAAC,SAAI,WAAU,cACb,8BAAC,iBAAc,GACjB;AAAA,OACF;AAAA,IAEA,oBAAC,QAAG,WAAU,4JAA2J,8CAEzK;AAAA,IAEA,oBAAC,OAAE,WAAU,oEAAmE,wIAEhF;AAAA,KACF,GACF;AAEJ;","names":[]}
+{"version":3,"sources":["../../../src/components/pages/NotFoundPage.tsx"],"sourcesContent":["'use client';\n\nimport Image from \"next/image\";\nimport { useWhitelabel } from \"../../providers/whitelabel.provider\";\n\nfunction GreatAppsLogo() {\n  return (\n    <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"50\" height=\"50\" viewBox=\"0 0 68 68\" fill=\"none\">\n      <rect x=\"4.5\" y=\"4.5\" width=\"58.4463\" height=\"58.4463\" rx=\"14.2271\" fill=\"#09090B\" />\n      <rect x=\"4.5\" y=\"4.5\" width=\"58.4463\" height=\"58.4463\" rx=\"14.2271\" stroke=\"white\" strokeWidth=\"9\" />\n      <path d=\"M38.0883 19.5377C38.6909 19.5377 39.1795 20.0264 39.1795 20.6289V25.5892C39.1795 25.9865 39.106 26.3827 38.9364 26.7421C38.4857 27.6992 37.5451 28.2674 36.5452 28.2674H29.9031C28.9993 28.2674 28.2663 29.0004 28.2663 29.9042V37.5427C28.2663 38.4465 28.9993 39.1795 29.9031 39.1795H37.5415C38.4453 39.1795 39.1783 38.4465 39.1783 37.5427V30.9693C39.1783 30.4522 39.3053 29.9374 39.5804 29.5009C40.0596 28.7406 40.8768 28.2899 41.7462 28.2686H46.8168C47.4193 28.2686 47.908 28.7561 47.908 29.3586V37.8238C47.908 38.692 47.5629 39.5246 46.9497 40.139L40.1379 46.9508C39.5235 47.5652 38.6909 47.9091 37.8226 47.9091H29.3587C28.7561 47.9091 28.2674 47.4205 28.2674 46.8179L28.2674 41.8126C28.2674 41.114 27.9899 40.4439 27.4965 39.9504C27.0031 39.457 26.3329 39.1795 25.6343 39.1795H20.629C20.0265 39.1795 19.5378 38.6908 19.5378 38.0883L19.5378 29.6231C19.5378 28.7549 19.8829 27.9222 20.4961 27.3078L27.468 20.3371C27.9792 19.8259 28.6731 19.5377 29.3966 19.5377H38.0871H38.0883Z\" fill=\"white\" />\n    </svg>\n  );\n}\n\nexport function NotFoundPage() {\n  const { whitelabel } = useWhitelabel();\n  const isGreatApps = !whitelabel || whitelabel.id === 1;\n  const whitelabelLogo = whitelabel?.logo\n    ? `${process.env.NEXT_PUBLIC_STORAGE_URL}/${whitelabel.logo}`\n    : null;\n\n  return (\n    <div className=\"relative flex min-h-screen w-full flex-col items-center justify-center overflow-hidden bg-white\">\n      <div className=\"flex flex-col items-center gap-[22px] text-center\">\n        <div className=\"relative flex flex-col items-center\">\n          <Image src=\"/images/404.svg\" alt=\"404\" width={440} height={173} priority unoptimized />\n\n          <div className=\"-mt-1 w-full border-t border-zinc-100\" />\n\n          <div className=\"-mt-[25px]\">\n            {isGreatApps ? (\n              <GreatAppsLogo />\n            ) : whitelabelLogo ? (\n              <Image src={whitelabelLogo} alt={whitelabel?.name || ''} width={50} height={50} className=\"rounded-xl object-contain\" />\n            ) : null}\n          </div>\n        </div>\n\n        <h1 className=\"max-w-[554px] px-6 font-[family-name:var(--font-outfit)] text-[32px] leading-[36px] font-semibold text-zinc-950 sm:px-0 sm:text-[56px] sm:leading-[56px]\">\n          Página não foi encontrada!\n        </h1>\n\n        <p className=\"max-w-[496px] px-6 paragraph-medium-medium text-zinc-950 sm:px-0\">\n          A página que você está procurando não existe. Verifique se digitou corretamente o link que está procurando.\n        </p>\n      </div>\n    </div>\n  );\n}\n"],"mappings":";AAOI,SACE,KADF;AALJ,OAAO,WAAW;AAClB,SAAS,qBAAqB;AAE9B,SAAS,gBAAgB;AACvB,SACE,qBAAC,SAAI,OAAM,8BAA6B,OAAM,MAAK,QAAO,MAAK,SAAQ,aAAY,MAAK,QACtF;AAAA,wBAAC,UAAK,GAAE,OAAM,GAAE,OAAM,OAAM,WAAU,QAAO,WAAU,IAAG,WAAU,MAAK,WAAU;AAAA,IACnF,oBAAC,UAAK,GAAE,OAAM,GAAE,OAAM,OAAM,WAAU,QAAO,WAAU,IAAG,WAAU,QAAO,SAAQ,aAAY,KAAI;AAAA,IACnG,oBAAC,UAAK,GAAE,m9BAAk9B,MAAK,SAAQ;AAAA,KACz+B;AAEJ;AAEO,SAAS,eAAe;AAC7B,QAAM,EAAE,WAAW,IAAI,cAAc;AACrC,QAAM,cAAc,CAAC,cAAc,WAAW,OAAO;AACrD,QAAM,iBAAiB,YAAY,OAC/B,GAAG,QAAQ,IAAI,uBAAuB,IAAI,WAAW,IAAI,KACzD;AAEJ,SACE,oBAAC,SAAI,WAAU,mGACb,+BAAC,SAAI,WAAU,qDACb;AAAA,yBAAC,SAAI,WAAU,uCACb;AAAA,0BAAC,SAAM,KAAI,mBAAkB,KAAI,OAAM,OAAO,KAAK,QAAQ,KAAK,UAAQ,MAAC,aAAW,MAAC;AAAA,MAErF,oBAAC,SAAI,WAAU,yCAAwC;AAAA,MAEvD,oBAAC,SAAI,WAAU,cACZ,wBACC,oBAAC,iBAAc,IACb,iBACF,oBAAC,SAAM,KAAK,gBAAgB,KAAK,YAAY,QAAQ,IAAI,OAAO,IAAI,QAAQ,IAAI,WAAU,6BAA4B,IACpH,MACN;AAAA,OACF;AAAA,IAEA,oBAAC,QAAG,WAAU,4JAA2J,8CAEzK;AAAA,IAEA,oBAAC,OAAE,WAAU,oEAAmE,wIAEhF;AAAA,KACF,GACF;AAEJ;","names":[]}

package/dist/components/ui/form/PhoneInput.mjs

@@ -52,6 +52,8 @@ function PhoneInput({
   };
   const handleNumberChange = (e) => {
     const rawInput = e.target.value;
+    const digits = rawInput.replace(/\D/g, "");
+    if (digits.length > 15) return;
     const cursorPos = e.target.selectionStart ?? rawInput.length;
     const digitsBeforeCursor = rawInput.slice(0, cursorPos).replace(/\D/g, "").length;
     const formatted = formatNational(rawInput, selectedCountry.iso);

package/dist/components/ui/form/PhoneInput.mjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/ui/form/PhoneInput.tsx"],"sourcesContent":["'use client';\n\nimport { useState, useEffect, useRef } from 'react';\nimport { AsYouType, CountryCode } from 'libphonenumber-js';\nimport { Input, Separator, Popover, PopoverTrigger, PopoverContent, cn } from '@greatapps/common';\nimport { IconChevronDown, IconSearch } from '@tabler/icons-react';\nimport { COUNTRIES, Country, flagUrl, parsePhoneValue } from '../../../utils/countries';\n\nfunction formatNational(digits: string, iso: string): string {\n  const raw = digits.replace(/\\D/g, '');\n  if (!raw) return '';\n  return new AsYouType(iso as CountryCode).input(raw);\n}\n\ninterface PhoneInputProps {\n  value?: string;\n  onChange?: (value: string) => void;\n  label?: string;\n  optional?: boolean;\n  required?: boolean;\n  hintMessage?: string;\n  error?: boolean;\n  errorMessage?: string;\n  placeholder?: string;\n  disabled?: boolean;\n  classnameContainer?: string;\n  className?: string;\n}\n\nexport default function PhoneInput({\n  value,\n  onChange,\n  label,\n  optional = false,\n  required = false,\n  hintMessage,\n  error = false,\n  errorMessage,\n  placeholder,\n  disabled = false,\n  classnameContainer,\n  className,\n}: PhoneInputProps) {\n  const parsed = parsePhoneValue(value ?? '');\n  const [selectedCountry, setSelectedCountry] = useState<Country>(parsed.country);\n  const [phoneNumber, setPhoneNumber] = useState(parsed.number);\n  const [search, setSearch] = useState('');\n  const [open, setOpen] = useState(false);\n  const prevValueRef = useRef(value);\n  const inputRef = useRef<HTMLInputElement>(null);\n\n  useEffect(() => {\n    if (value !== prevValueRef.current) {\n      prevValueRef.current = value;\n      const p = parsePhoneValue(value ?? '');\n      setSelectedCountry(p.country);\n      setPhoneNumber(formatNational(p.number, p.country.iso));\n    }\n  }, [value]);\n\n  const emit = (country: Country, number: string) => {\n    onChange?.(`${country.dial} ${number}`);\n  };\n\n  const handleCountrySelect = (country: Country) => {\n    const reformatted = formatNational(phoneNumber, country.iso);\n    setSelectedCountry(country);\n    setPhoneNumber(reformatted);\n    setOpen(false);\n    setSearch('');\n    emit(country, reformatted);\n  };\n\n  const handleNumberChange = (e: React.ChangeEvent<HTMLInputElement>) => {\n    const rawInput = e.target.value;\n    const cursorPos = e.target.selectionStart ?? rawInput.length;\n    const digitsBeforeCursor = rawInput.slice(0, cursorPos).replace(/\\D/g, '').length;\n\n    const formatted = formatNational(rawInput, selectedCountry.iso);\n    setPhoneNumber(formatted);\n    emit(selectedCountry, formatted);\n\n    requestAnimationFrame(() => {\n      if (!inputRef.current) return;\n      let digitCount = 0;\n      let newPos = formatted.length;\n      for (let i = 0; i < formatted.length; i++) {\n        if (/\\d/.test(formatted[i])) {\n          digitCount++;\n          if (digitCount === digitsBeforeCursor) {\n            newPos = i + 1;\n            break;\n          }\n        }\n      }\n      inputRef.current.setSelectionRange(newPos, newPos);\n    });\n  };\n\n  const filtered = COUNTRIES.filter(\n    (c) =>\n      c.name.toLowerCase().includes(search.toLowerCase()) ||\n      c.dial.includes(search) ||\n      c.iso.toLowerCase().includes(search.toLowerCase())\n  );\n\n  const finalMessage = error && errorMessage ? errorMessage : hintMessage;\n  const showMessage = finalMessage && finalMessage.trim() !== '';\n\n  return (\n    <div className=\"flex flex-col gap-1.5\">\n      {label && (\n        <div className=\"flex items-center gap-1 paragraph-xsmall-semibold\">\n          <span className=\"text-zinc-600\">{label}</span>\n          {optional && <span className=\"text-zinc-500\">(Opcional)</span>}\n          {required && <span className=\"text-red-600\">*</span>}\n        </div>\n      )}\n\n      <div\n        className={cn(\n          'flex gap-2 items-center border rounded-lg h-10 transition-colors',\n          error\n            ? 'border-red-600 hover:border-red-700'\n            : 'border-zinc-200 hover:border-zinc-400 focus-within:border-zinc-950',\n          disabled && 'cursor-not-allowed',\n          classnameContainer\n        )}\n      >\n        <Popover open={open} onOpenChange={setOpen}>\n          <PopoverTrigger asChild>\n            <button\n              type=\"button\"\n              className=\"flex items-center gap-1.5 px-3 h-full shrink-0 focus:outline-none\"\n              disabled={disabled}\n            >\n              <img src={flagUrl(selectedCountry.iso)} alt={selectedCountry.iso} className=\"w-5 h-5 rounded-full\" />\n              <span className=\"paragraph-small-regular text-zinc-950\">{selectedCountry.dial}</span>\n              <IconChevronDown size={14} className={cn(\"text-zinc-500 transition-transform duration-200\", open && \"rotate-180\")} />\n            </button>\n          </PopoverTrigger>\n          <PopoverContent className=\"w-72 p-0 z-[1010]\" align=\"start\" side=\"top\">\n            <div className=\"flex items-center gap-2 p-2 border-b border-zinc-100\">\n              <IconSearch size={14} className=\"text-zinc-400 shrink-0\" />\n              <input\n                type=\"text\"\n                className=\"flex-1 text-sm outline-none placeholder:text-zinc-400\"\n                placeholder=\"Buscar país...\"\n                value={search}\n                onChange={(e) => setSearch(e.target.value)}\n                autoFocus\n              />\n            </div>\n            <div className=\"max-h-60 overflow-y-auto overscroll-contain\" onTouchMove={(e) => e.stopPropagation()} onWheel={(e) => e.stopPropagation()}>\n              {filtered.map((country) => (\n                <button\n                  key={country.iso}\n                  type=\"button\"\n                  className={cn(\n                    'flex items-center gap-2.5 w-full px-3 py-2 text-left hover:bg-zinc-50 transition-colors',\n                    selectedCountry.iso === country.iso && 'bg-zinc-100'\n                  )}\n                  onClick={() => handleCountrySelect(country)}\n                >\n                  <img src={flagUrl(country.iso)} alt={country.iso} className=\"w-5 h-5 rounded-full shrink-0\" />\n                  <span className=\"paragraph-small-regular text-zinc-950 flex-1 truncate\">\n                    {country.name}\n                  </span>\n                  <span className=\"paragraph-small-regular text-zinc-500 shrink-0\">\n                    {country.dial}\n                  </span>\n                </button>\n              ))}\n              {filtered.length === 0 && (\n                <p className=\"text-sm text-zinc-500 p-3 text-center\">Nenhum país encontrado</p>\n              )}\n            </div>\n          </PopoverContent>\n        </Popover>\n\n        <Separator orientation=\"vertical\" />\n\n        <Input\n          ref={inputRef}\n          type=\"tel\"\n          value={phoneNumber}\n          onChange={handleNumberChange}\n          placeholder={placeholder}\n          disabled={disabled}\n          className={cn(\n            'paragraph-small-medium w-full h-full text-zinc-950 border-0 focus-visible:ring-0 focus-visible:ring-offset-0',\n            disabled && 'cursor-not-allowed',\n            className\n          )}\n        />\n      </div>\n\n      {showMessage && (\n        <span className={cn('paragraph-xsmall-medium', error ? 'text-red-600' : 'text-zinc-600')}>\n          {finalMessage}\n        </span>\n      )}\n    </div>\n  );\n}\n"],"mappings":"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","names":[]}
+{"version":3,"sources":["../../../../src/components/ui/form/PhoneInput.tsx"],"sourcesContent":["'use client';\n\nimport { useState, useEffect, useRef } from 'react';\nimport { AsYouType, CountryCode } from 'libphonenumber-js';\nimport { Input, Separator, Popover, PopoverTrigger, PopoverContent, cn } from '@greatapps/common';\nimport { IconChevronDown, IconSearch } from '@tabler/icons-react';\nimport { COUNTRIES, Country, flagUrl, parsePhoneValue } from '../../../utils/countries';\n\nfunction formatNational(digits: string, iso: string): string {\n  const raw = digits.replace(/\\D/g, '');\n  if (!raw) return '';\n  return new AsYouType(iso as CountryCode).input(raw);\n}\n\ninterface PhoneInputProps {\n  value?: string;\n  onChange?: (value: string) => void;\n  label?: string;\n  optional?: boolean;\n  required?: boolean;\n  hintMessage?: string;\n  error?: boolean;\n  errorMessage?: string;\n  placeholder?: string;\n  disabled?: boolean;\n  classnameContainer?: string;\n  className?: string;\n}\n\nexport default function PhoneInput({\n  value,\n  onChange,\n  label,\n  optional = false,\n  required = false,\n  hintMessage,\n  error = false,\n  errorMessage,\n  placeholder,\n  disabled = false,\n  classnameContainer,\n  className,\n}: PhoneInputProps) {\n  const parsed = parsePhoneValue(value ?? '');\n  const [selectedCountry, setSelectedCountry] = useState<Country>(parsed.country);\n  const [phoneNumber, setPhoneNumber] = useState(parsed.number);\n  const [search, setSearch] = useState('');\n  const [open, setOpen] = useState(false);\n  const prevValueRef = useRef(value);\n  const inputRef = useRef<HTMLInputElement>(null);\n\n  useEffect(() => {\n    if (value !== prevValueRef.current) {\n      prevValueRef.current = value;\n      const p = parsePhoneValue(value ?? '');\n      setSelectedCountry(p.country);\n      setPhoneNumber(formatNational(p.number, p.country.iso));\n    }\n  }, [value]);\n\n  const emit = (country: Country, number: string) => {\n    onChange?.(`${country.dial} ${number}`);\n  };\n\n  const handleCountrySelect = (country: Country) => {\n    const reformatted = formatNational(phoneNumber, country.iso);\n    setSelectedCountry(country);\n    setPhoneNumber(reformatted);\n    setOpen(false);\n    setSearch('');\n    emit(country, reformatted);\n  };\n\n  const handleNumberChange = (e: React.ChangeEvent<HTMLInputElement>) => {\n    const rawInput = e.target.value;\n    const digits = rawInput.replace(/\\D/g, '');\n    if (digits.length > 15) return;\n\n    const cursorPos = e.target.selectionStart ?? rawInput.length;\n    const digitsBeforeCursor = rawInput.slice(0, cursorPos).replace(/\\D/g, '').length;\n\n    const formatted = formatNational(rawInput, selectedCountry.iso);\n    setPhoneNumber(formatted);\n    emit(selectedCountry, formatted);\n\n    requestAnimationFrame(() => {\n      if (!inputRef.current) return;\n      let digitCount = 0;\n      let newPos = formatted.length;\n      for (let i = 0; i < formatted.length; i++) {\n        if (/\\d/.test(formatted[i])) {\n          digitCount++;\n          if (digitCount === digitsBeforeCursor) {\n            newPos = i + 1;\n            break;\n          }\n        }\n      }\n      inputRef.current.setSelectionRange(newPos, newPos);\n    });\n  };\n\n  const filtered = COUNTRIES.filter(\n    (c) =>\n      c.name.toLowerCase().includes(search.toLowerCase()) ||\n      c.dial.includes(search) ||\n      c.iso.toLowerCase().includes(search.toLowerCase())\n  );\n\n  const finalMessage = error && errorMessage ? errorMessage : hintMessage;\n  const showMessage = finalMessage && finalMessage.trim() !== '';\n\n  return (\n    <div className=\"flex flex-col gap-1.5\">\n      {label && (\n        <div className=\"flex items-center gap-1 paragraph-xsmall-semibold\">\n          <span className=\"text-zinc-600\">{label}</span>\n          {optional && <span className=\"text-zinc-500\">(Opcional)</span>}\n          {required && <span className=\"text-red-600\">*</span>}\n        </div>\n      )}\n\n      <div\n        className={cn(\n          'flex gap-2 items-center border rounded-lg h-10 transition-colors',\n          error\n            ? 'border-red-600 hover:border-red-700'\n            : 'border-zinc-200 hover:border-zinc-400 focus-within:border-zinc-950',\n          disabled && 'cursor-not-allowed',\n          classnameContainer\n        )}\n      >\n        <Popover open={open} onOpenChange={setOpen}>\n          <PopoverTrigger asChild>\n            <button\n              type=\"button\"\n              className=\"flex items-center gap-1.5 px-3 h-full shrink-0 focus:outline-none\"\n              disabled={disabled}\n            >\n              <img src={flagUrl(selectedCountry.iso)} alt={selectedCountry.iso} className=\"w-5 h-5 rounded-full\" />\n              <span className=\"paragraph-small-regular text-zinc-950\">{selectedCountry.dial}</span>\n              <IconChevronDown size={14} className={cn(\"text-zinc-500 transition-transform duration-200\", open && \"rotate-180\")} />\n            </button>\n          </PopoverTrigger>\n          <PopoverContent className=\"w-72 p-0 z-[1010]\" align=\"start\" side=\"top\">\n            <div className=\"flex items-center gap-2 p-2 border-b border-zinc-100\">\n              <IconSearch size={14} className=\"text-zinc-400 shrink-0\" />\n              <input\n                type=\"text\"\n                className=\"flex-1 text-sm outline-none placeholder:text-zinc-400\"\n                placeholder=\"Buscar país...\"\n                value={search}\n                onChange={(e) => setSearch(e.target.value)}\n                autoFocus\n              />\n            </div>\n            <div className=\"max-h-60 overflow-y-auto overscroll-contain\" onTouchMove={(e) => e.stopPropagation()} onWheel={(e) => e.stopPropagation()}>\n              {filtered.map((country) => (\n                <button\n                  key={country.iso}\n                  type=\"button\"\n                  className={cn(\n                    'flex items-center gap-2.5 w-full px-3 py-2 text-left hover:bg-zinc-50 transition-colors',\n                    selectedCountry.iso === country.iso && 'bg-zinc-100'\n                  )}\n                  onClick={() => handleCountrySelect(country)}\n                >\n                  <img src={flagUrl(country.iso)} alt={country.iso} className=\"w-5 h-5 rounded-full shrink-0\" />\n                  <span className=\"paragraph-small-regular text-zinc-950 flex-1 truncate\">\n                    {country.name}\n                  </span>\n                  <span className=\"paragraph-small-regular text-zinc-500 shrink-0\">\n                    {country.dial}\n                  </span>\n                </button>\n              ))}\n              {filtered.length === 0 && (\n                <p className=\"text-sm text-zinc-500 p-3 text-center\">Nenhum país encontrado</p>\n              )}\n            </div>\n          </PopoverContent>\n        </Popover>\n\n        <Separator orientation=\"vertical\" />\n\n        <Input\n          ref={inputRef}\n          type=\"tel\"\n          value={phoneNumber}\n          onChange={handleNumberChange}\n          placeholder={placeholder}\n          disabled={disabled}\n          className={cn(\n            'paragraph-small-medium w-full h-full text-zinc-950 border-0 focus-visible:ring-0 focus-visible:ring-offset-0',\n            disabled && 'cursor-not-allowed',\n            className\n          )}\n        />\n      </div>\n\n      {showMessage && (\n        <span className={cn('paragraph-xsmall-medium', error ? 'text-red-600' : 'text-zinc-600')}>\n          {finalMessage}\n        </span>\n      )}\n    </div>\n  );\n}\n"],"mappings":"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","names":[]}

package/package.json

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