@greatapps/common 1.1.671 → 1.1.673

package/dist/components/layouts/NavBar.mjs

@@ -2,6 +2,7 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import Image from "next/image";
 import Link from "next/link";
+import { useTranslations } from "next-intl";
 import { IconChevronRight } from "@tabler/icons-react";
 import { Separator } from "../ui/data-display/Separator";
 import { Tooltip, TooltipContent, TooltipTrigger } from "../ui/overlay/Tooltip";
@@ -23,6 +24,7 @@ function NavBar({
   children,
   className
 }) {
+  const translate = useTranslations();
   const { isExpanded: isDesktopExpanded, toggle: toggleDesktop } = useDesktopSidebarStore();
   useDesktopSidebarHydration();
   const { whitelabel } = useWhitelabel();
@@ -113,7 +115,7 @@ function NavBar({
                   children: /* @__PURE__ */ jsx(IconChevronRight, { size: 16, className: "text-gray-500" })
                 }
               ) }),
-              /* @__PURE__ */ jsx(TooltipContent, { side: "right", children: "Expandir menu" })
+              /* @__PURE__ */ jsx(TooltipContent, { side: "right", children: translate("common.layout.navbar.expandMenu") })
             ] }),
             !isDesktopExpanded && /* @__PURE__ */ jsxs(Tooltip, { children: [
               /* @__PURE__ */ jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx(
@@ -124,7 +126,7 @@ function NavBar({
                   children: /* @__PURE__ */ jsx(IconChevronRight, { size: 16, className: "text-gray-500" })
                 }
               ) }),
-              /* @__PURE__ */ jsx(TooltipContent, { side: "right", children: "Expandir menu" })
+              /* @__PURE__ */ jsx(TooltipContent, { side: "right", children: translate("common.layout.navbar.expandMenu") })
             ] })
           ] }),
           /* @__PURE__ */ jsxs("div", { className: "relative", children: [
@@ -171,7 +173,7 @@ function NavBar({
                   )
                 }
               ) }),
-              /* @__PURE__ */ jsx(TooltipContent, { side: "right", children: isDefaultWl ? "GreatPages" : "P\xE1ginas" })
+              /* @__PURE__ */ jsx(TooltipContent, { side: "right", children: isDefaultWl ? translate("common.layout.navbar.greatPages") : translate("common.layout.navbar.pages") })
             ] }),
             /* @__PURE__ */ jsx(
               "div",

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/layouts/NavBar.tsx"],"sourcesContent":["\"use client\";\n\nimport * as React from \"react\";\nimport Image from \"next/image\";\nimport Link from \"next/link\";\nimport { IconChevronRight } from \"@tabler/icons-react\";\nimport { Separator } from \"../ui/data-display/Separator\";\nimport { Tooltip, TooltipContent, TooltipTrigger } from \"../ui/overlay/Tooltip\";\nimport {\n  useDesktopSidebarStore,\n  useDesktopSidebarHydration,\n} from \"../../store/useDesktopSidebarStore\";\nimport {\n  useWhitelabel,\n  useIsDefaultWhitelabel,\n} from \"../../providers/whitelabel.provider\";\nimport { cn } from \"../../infra/utils/clsx\";\n\ntype NavBarProps = {\n  logoHref: string;\n  appIconHref: string;\n  activeApp?: \"gapps\" | \"gpages\";\n  showExpandButton?: boolean;\n  onExpandClick?: () => void;\n  children?: React.ReactNode;\n  className?: string;\n};\n\nfunction NavBar({\n  logoHref,\n  appIconHref,\n  activeApp,\n  showExpandButton = false,\n  onExpandClick,\n  children,\n  className,\n}: NavBarProps) {\n  const { isExpanded: isDesktopExpanded, toggle: toggleDesktop } =\n    useDesktopSidebarStore();\n  useDesktopSidebarHydration();\n  const { whitelabel } = useWhitelabel();\n  const isDefaultWl = useIsDefaultWhitelabel();\n  const primaryColor = whitelabel?.general?.primary_color;\n  const wlName = whitelabel?.name || \"Great\";\n\n  const wlIcon = whitelabel?.secondary_logo ? (\n    <Image\n      className=\"size-7 object-contain\"\n      src={`${process.env.NEXT_PUBLIC_STORAGE_URL}/${whitelabel.secondary_logo}`}\n      alt={`${wlName} Logo`}\n      width={28}\n      height={28}\n    />\n  ) : (\n    <div\n      className={cn(\n        \"size-10 rounded-lg flex items-center justify-center transition-opacity duration-300\",\n        activeApp !== \"gapps\" && \"opacity-20\",\n      )}\n      style={{ backgroundColor: primaryColor }}\n    >\n      <svg\n        xmlns=\"http://www.w3.org/2000/svg\"\n        width=\"24\"\n        height=\"24\"\n        viewBox=\"0 0 24 24\"\n        fill=\"none\"\n        stroke=\"white\"\n        strokeWidth=\"2\"\n        strokeLinecap=\"round\"\n        strokeLinejoin=\"round\"\n      >\n        <path d=\"M4 5a1 1 0 0 1 1 -1h4a1 1 0 0 1 1 1v4a1 1 0 0 1 -1 1h-4a1 1 0 0 1 -1 -1l0 -4\" />\n        <path d=\"M14 5a1 1 0 0 1 1 -1h4a1 1 0 0 1 1 1v4a1 1 0 0 1 -1 1h-4a1 1 0 0 1 -1 -1l0 -4\" />\n        <path d=\"M4 15a1 1 0 0 1 1 -1h4a1 1 0 0 1 1 1v4a1 1 0 0 1 -1 1h-4a1 1 0 0 1 -1 -1l0 -4\" />\n        <path d=\"M14 15a1 1 0 0 1 1 -1h4a1 1 0 0 1 1 1v4a1 1 0 0 1 -1 1h-4a1 1 0 0 1 -1 -1l0 -4\" />\n      </svg>\n    </div>\n  );\n\n  return (\n    <div\n      className={cn(\n        \"hidden md:flex flex-col justify-between h-screen p-4 border-r border-gray-200 overflow-visible z-40 bg-white\",\n        className,\n      )}\n    >\n      <div className=\"flex flex-col gap-4 items-center mt-[6.5px]\">\n        {/* GreatApps logo */}\n        <div className=\"relative\">\n          <Tooltip>\n            <TooltipTrigger className=\"cursor-pointer\" asChild>\n              <Link href={logoHref}>\n                {isDefaultWl ? (\n                  <Image\n                    src=\"/icons/great-icon.svg\"\n                    alt=\"Great Icon\"\n                    width={28}\n                    height={28}\n                  />\n                ) : (\n                  wlIcon\n                )}\n              </Link>\n            </TooltipTrigger>\n            <TooltipContent side=\"right\">{wlName}</TooltipContent>\n          </Tooltip>\n          <div\n            className={cn(\n              \"absolute -left-[22px] top-1/2 -translate-y-1/2 z-10 w-[3px] h-5 rounded-r-xl transition-opacity duration-300\",\n              isDefaultWl ? \"bg-gray-950\" : \"\",\n              activeApp === \"gapps\" ? \"opacity-100\" : \"opacity-0\",\n            )}\n            style={!isDefaultWl ? { backgroundColor: primaryColor } : undefined}\n          />\n        </div>\n\n        <div className=\"relative w-full mt-[7.5px]\">\n          <Separator />\n          {/* Md expand button */}\n          {showExpandButton && (\n            <Tooltip>\n              <TooltipTrigger asChild>\n                <button\n                  onClick={onExpandClick}\n                  className=\"hidden md:flex lg:hidden absolute top-1/2 -translate-y-1/2 right-0 translate-x-[calc(50%+1rem)] size-8 items-center justify-center rounded-full border border-gray-200 bg-white hover:bg-gray-100 cursor-pointer transition-colors z-10\"\n                >\n                  <IconChevronRight size={16} className=\"text-gray-500\" />\n                </button>\n              </TooltipTrigger>\n              <TooltipContent side=\"right\">Expandir menu</TooltipContent>\n            </Tooltip>\n          )}\n          {/* Desktop expand button */}\n          {!isDesktopExpanded && (\n            <Tooltip>\n              <TooltipTrigger asChild>\n                <button\n                  onClick={toggleDesktop}\n                  className=\"hidden lg:flex absolute top-1/2 -translate-y-1/2 right-0 translate-x-[calc(50%+1rem)] size-8 items-center justify-center rounded-full border border-gray-200 bg-white hover:bg-gray-100 cursor-pointer transition-colors z-10\"\n                >\n                  <IconChevronRight size={16} className=\"text-gray-500\" />\n                </button>\n              </TooltipTrigger>\n              <TooltipContent side=\"right\">Expandir menu</TooltipContent>\n            </Tooltip>\n          )}\n        </div>\n\n        {/* GreatPages icon */}\n        <div className=\"relative\">\n          <Tooltip>\n            <TooltipTrigger asChild>\n              <Link\n                href={appIconHref}\n                className={cn(\n                  \"size-10 rounded-lg cursor-pointer flex items-center justify-center border-2 ring-2 transition-colors duration-300\",\n                  activeApp === \"gpages\"\n                    ? isDefaultWl\n                      ? \"bg-cyan-100 border-white ring-cyan-300\"\n                      : \"border-white ring-transparent\"\n                    : isDefaultWl\n                      ? \"hover:bg-gray-100 border-transparent ring-transparent\"\n                      : \"border-transparent ring-transparent\",\n                )}\n                style={\n                  !isDefaultWl\n                    ? {\n                        backgroundColor: primaryColor,\n                        boxShadow:\n                          activeApp === \"gpages\"\n                            ? `0 0 0 2px ${primaryColor}40`\n                            : undefined,\n                        opacity: activeApp !== \"gpages\" ? 0.2 : undefined,\n                      }\n                    : undefined\n                }\n              >\n                {isDefaultWl ? (\n                  <Image\n                    src=\"/icons/icon-navbar.svg\"\n                    alt=\"GreatPages\"\n                    width={24}\n                    height={24}\n                  />\n                ) : (\n                  <svg\n                    xmlns=\"http://www.w3.org/2000/svg\"\n                    width=\"24\"\n                    height=\"24\"\n                    viewBox=\"0 0 24 24\"\n                    fill=\"none\"\n                    stroke=\"white\"\n                    strokeWidth=\"2\"\n                    strokeLinecap=\"round\"\n                    strokeLinejoin=\"round\"\n                  >\n                    <path d=\"M4 8h16\" />\n                    <path d=\"M4 6a2 2 0 0 1 2 -2h12a2 2 0 0 1 2 2v12a2 2 0 0 1 -2 2h-12a2 2 0 0 1 -2 -2l0 -12\" />\n                    <path d=\"M8 4v4\" />\n                  </svg>\n                )}\n              </Link>\n            </TooltipTrigger>\n            <TooltipContent side=\"right\">\n              {isDefaultWl ? \"GreatPages\" : \"Páginas\"}\n            </TooltipContent>\n          </Tooltip>\n          <div\n            className={cn(\n              \"absolute -left-4 top-1/2 -translate-y-1/2 z-10 w-[3px] h-5 rounded-r-xl transition-opacity duration-300\",\n              isDefaultWl ? \"bg-cyan-300\" : \"\",\n              activeApp === \"gpages\" ? \"opacity-100\" : \"opacity-0\",\n            )}\n            style={!isDefaultWl ? { backgroundColor: primaryColor } : undefined}\n          />\n        </div>\n      </div>\n\n      <div className=\"flex flex-col items-center gap-2\">{children}</div>\n    </div>\n  );\n}\n\nexport { NavBar };\nexport type { NavBarProps };\n"],"mappings":";AA8CI,cAeE,YAfF;AA3CJ,OAAO,WAAW;AAClB,OAAO,UAAU;AACjB,SAAS,wBAAwB;AACjC,SAAS,iBAAiB;AAC1B,SAAS,SAAS,gBAAgB,sBAAsB;AACxD;AAAA,EACE;AAAA,EACA;AAAA,OACK;AACP;AAAA,EACE;AAAA,EACA;AAAA,OACK;AACP,SAAS,UAAU;AAYnB,SAAS,OAAO;AAAA,EACd;AAAA,EACA;AAAA,EACA;AAAA,EACA,mBAAmB;AAAA,EACnB;AAAA,EACA;AAAA,EACA;AACF,GAAgB;AACd,QAAM,EAAE,YAAY,mBAAmB,QAAQ,cAAc,IAC3D,uBAAuB;AACzB,6BAA2B;AAC3B,QAAM,EAAE,WAAW,IAAI,cAAc;AACrC,QAAM,cAAc,uBAAuB;AAC3C,QAAM,eAAe,YAAY,SAAS;AAC1C,QAAM,SAAS,YAAY,QAAQ;AAEnC,QAAM,SAAS,YAAY,iBACzB;AAAA,IAAC;AAAA;AAAA,MACC,WAAU;AAAA,MACV,KAAK,GAAG,QAAQ,IAAI,uBAAuB,IAAI,WAAW,cAAc;AAAA,MACxE,KAAK,GAAG,MAAM;AAAA,MACd,OAAO;AAAA,MACP,QAAQ;AAAA;AAAA,EACV,IAEA;AAAA,IAAC;AAAA;AAAA,MACC,WAAW;AAAA,QACT;AAAA,QACA,cAAc,WAAW;AAAA,MAC3B;AAAA,MACA,OAAO,EAAE,iBAAiB,aAAa;AAAA,MAEvC;AAAA,QAAC;AAAA;AAAA,UACC,OAAM;AAAA,UACN,OAAM;AAAA,UACN,QAAO;AAAA,UACP,SAAQ;AAAA,UACR,MAAK;AAAA,UACL,QAAO;AAAA,UACP,aAAY;AAAA,UACZ,eAAc;AAAA,UACd,gBAAe;AAAA,UAEf;AAAA,gCAAC,UAAK,GAAE,gFAA+E;AAAA,YACvF,oBAAC,UAAK,GAAE,iFAAgF;AAAA,YACxF,oBAAC,UAAK,GAAE,iFAAgF;AAAA,YACxF,oBAAC,UAAK,GAAE,kFAAiF;AAAA;AAAA;AAAA,MAC3F;AAAA;AAAA,EACF;AAGF,SACE;AAAA,IAAC;AAAA;AAAA,MACC,WAAW;AAAA,QACT;AAAA,QACA;AAAA,MACF;AAAA,MAEA;AAAA,6BAAC,SAAI,WAAU,+CAEb;AAAA,+BAAC,SAAI,WAAU,YACb;AAAA,iCAAC,WACC;AAAA,kCAAC,kBAAe,WAAU,kBAAiB,SAAO,MAChD,8BAAC,QAAK,MAAM,UACT,wBACC;AAAA,gBAAC;AAAA;AAAA,kBACC,KAAI;AAAA,kBACJ,KAAI;AAAA,kBACJ,OAAO;AAAA,kBACP,QAAQ;AAAA;AAAA,cACV,IAEA,QAEJ,GACF;AAAA,cACA,oBAAC,kBAAe,MAAK,SAAS,kBAAO;AAAA,eACvC;AAAA,YACA;AAAA,cAAC;AAAA;AAAA,gBACC,WAAW;AAAA,kBACT;AAAA,kBACA,cAAc,gBAAgB;AAAA,kBAC9B,cAAc,UAAU,gBAAgB;AAAA,gBAC1C;AAAA,gBACA,OAAO,CAAC,cAAc,EAAE,iBAAiB,aAAa,IAAI;AAAA;AAAA,YAC5D;AAAA,aACF;AAAA,UAEA,qBAAC,SAAI,WAAU,8BACb;AAAA,gCAAC,aAAU;AAAA,YAEV,oBACC,qBAAC,WACC;AAAA,kCAAC,kBAAe,SAAO,MACrB;AAAA,gBAAC;AAAA;AAAA,kBACC,SAAS;AAAA,kBACT,WAAU;AAAA,kBAEV,8BAAC,oBAAiB,MAAM,IAAI,WAAU,iBAAgB;AAAA;AAAA,cACxD,GACF;AAAA,cACA,oBAAC,kBAAe,MAAK,SAAQ,2BAAa;AAAA,eAC5C;AAAA,YAGD,CAAC,qBACA,qBAAC,WACC;AAAA,kCAAC,kBAAe,SAAO,MACrB;AAAA,gBAAC;AAAA;AAAA,kBACC,SAAS;AAAA,kBACT,WAAU;AAAA,kBAEV,8BAAC,oBAAiB,MAAM,IAAI,WAAU,iBAAgB;AAAA;AAAA,cACxD,GACF;AAAA,cACA,oBAAC,kBAAe,MAAK,SAAQ,2BAAa;AAAA,eAC5C;AAAA,aAEJ;AAAA,UAGA,qBAAC,SAAI,WAAU,YACb;AAAA,iCAAC,WACC;AAAA,kCAAC,kBAAe,SAAO,MACrB;AAAA,gBAAC;AAAA;AAAA,kBACC,MAAM;AAAA,kBACN,WAAW;AAAA,oBACT;AAAA,oBACA,cAAc,WACV,cACE,2CACA,kCACF,cACE,0DACA;AAAA,kBACR;AAAA,kBACA,OACE,CAAC,cACG;AAAA,oBACE,iBAAiB;AAAA,oBACjB,WACE,cAAc,WACV,aAAa,YAAY,OACzB;AAAA,oBACN,SAAS,cAAc,WAAW,MAAM;AAAA,kBAC1C,IACA;AAAA,kBAGL,wBACC;AAAA,oBAAC;AAAA;AAAA,sBACC,KAAI;AAAA,sBACJ,KAAI;AAAA,sBACJ,OAAO;AAAA,sBACP,QAAQ;AAAA;AAAA,kBACV,IAEA;AAAA,oBAAC;AAAA;AAAA,sBACC,OAAM;AAAA,sBACN,OAAM;AAAA,sBACN,QAAO;AAAA,sBACP,SAAQ;AAAA,sBACR,MAAK;AAAA,sBACL,QAAO;AAAA,sBACP,aAAY;AAAA,sBACZ,eAAc;AAAA,sBACd,gBAAe;AAAA,sBAEf;AAAA,4CAAC,UAAK,GAAE,WAAU;AAAA,wBAClB,oBAAC,UAAK,GAAE,oFAAmF;AAAA,wBAC3F,oBAAC,UAAK,GAAE,UAAS;AAAA;AAAA;AAAA,kBACnB;AAAA;AAAA,cAEJ,GACF;AAAA,cACA,oBAAC,kBAAe,MAAK,SAClB,wBAAc,eAAe,cAChC;AAAA,eACF;AAAA,YACA;AAAA,cAAC;AAAA;AAAA,gBACC,WAAW;AAAA,kBACT;AAAA,kBACA,cAAc,gBAAgB;AAAA,kBAC9B,cAAc,WAAW,gBAAgB;AAAA,gBAC3C;AAAA,gBACA,OAAO,CAAC,cAAc,EAAE,iBAAiB,aAAa,IAAI;AAAA;AAAA,YAC5D;AAAA,aACF;AAAA,WACF;AAAA,QAEA,oBAAC,SAAI,WAAU,oCAAoC,UAAS;AAAA;AAAA;AAAA,EAC9D;AAEJ;","names":[]}
+{"version":3,"sources":["../../../src/components/layouts/NavBar.tsx"],"sourcesContent":["\"use client\";\n\nimport * as React from \"react\";\nimport Image from \"next/image\";\nimport Link from \"next/link\";\nimport { useTranslations } from \"next-intl\";\nimport { IconChevronRight } from \"@tabler/icons-react\";\nimport { Separator } from \"../ui/data-display/Separator\";\nimport { Tooltip, TooltipContent, TooltipTrigger } from \"../ui/overlay/Tooltip\";\nimport {\n  useDesktopSidebarStore,\n  useDesktopSidebarHydration,\n} from \"../../store/useDesktopSidebarStore\";\nimport {\n  useWhitelabel,\n  useIsDefaultWhitelabel,\n} from \"../../providers/whitelabel.provider\";\nimport { cn } from \"../../infra/utils/clsx\";\n\ntype NavBarProps = {\n  logoHref: string;\n  appIconHref: string;\n  activeApp?: \"gapps\" | \"gpages\";\n  showExpandButton?: boolean;\n  onExpandClick?: () => void;\n  children?: React.ReactNode;\n  className?: string;\n};\n\nfunction NavBar({\n  logoHref,\n  appIconHref,\n  activeApp,\n  showExpandButton = false,\n  onExpandClick,\n  children,\n  className,\n}: NavBarProps) {\n  const translate = useTranslations();\n  const { isExpanded: isDesktopExpanded, toggle: toggleDesktop } =\n    useDesktopSidebarStore();\n  useDesktopSidebarHydration();\n  const { whitelabel } = useWhitelabel();\n  const isDefaultWl = useIsDefaultWhitelabel();\n  const primaryColor = whitelabel?.general?.primary_color;\n  const wlName = whitelabel?.name || \"Great\";\n\n  const wlIcon = whitelabel?.secondary_logo ? (\n    <Image\n      className=\"size-7 object-contain\"\n      src={`${process.env.NEXT_PUBLIC_STORAGE_URL}/${whitelabel.secondary_logo}`}\n      alt={`${wlName} Logo`}\n      width={28}\n      height={28}\n    />\n  ) : (\n    <div\n      className={cn(\n        \"size-10 rounded-lg flex items-center justify-center transition-opacity duration-300\",\n        activeApp !== \"gapps\" && \"opacity-20\",\n      )}\n      style={{ backgroundColor: primaryColor }}\n    >\n      <svg\n        xmlns=\"http://www.w3.org/2000/svg\"\n        width=\"24\"\n        height=\"24\"\n        viewBox=\"0 0 24 24\"\n        fill=\"none\"\n        stroke=\"white\"\n        strokeWidth=\"2\"\n        strokeLinecap=\"round\"\n        strokeLinejoin=\"round\"\n      >\n        <path d=\"M4 5a1 1 0 0 1 1 -1h4a1 1 0 0 1 1 1v4a1 1 0 0 1 -1 1h-4a1 1 0 0 1 -1 -1l0 -4\" />\n        <path d=\"M14 5a1 1 0 0 1 1 -1h4a1 1 0 0 1 1 1v4a1 1 0 0 1 -1 1h-4a1 1 0 0 1 -1 -1l0 -4\" />\n        <path d=\"M4 15a1 1 0 0 1 1 -1h4a1 1 0 0 1 1 1v4a1 1 0 0 1 -1 1h-4a1 1 0 0 1 -1 -1l0 -4\" />\n        <path d=\"M14 15a1 1 0 0 1 1 -1h4a1 1 0 0 1 1 1v4a1 1 0 0 1 -1 1h-4a1 1 0 0 1 -1 -1l0 -4\" />\n      </svg>\n    </div>\n  );\n\n  return (\n    <div\n      className={cn(\n        \"hidden md:flex flex-col justify-between h-screen p-4 border-r border-gray-200 overflow-visible z-40 bg-white\",\n        className,\n      )}\n    >\n      <div className=\"flex flex-col gap-4 items-center mt-[6.5px]\">\n        {/* GreatApps logo */}\n        <div className=\"relative\">\n          <Tooltip>\n            <TooltipTrigger className=\"cursor-pointer\" asChild>\n              <Link href={logoHref}>\n                {isDefaultWl ? (\n                  <Image\n                    src=\"/icons/great-icon.svg\"\n                    alt=\"Great Icon\"\n                    width={28}\n                    height={28}\n                  />\n                ) : (\n                  wlIcon\n                )}\n              </Link>\n            </TooltipTrigger>\n            <TooltipContent side=\"right\">{wlName}</TooltipContent>\n          </Tooltip>\n          <div\n            className={cn(\n              \"absolute -left-[22px] top-1/2 -translate-y-1/2 z-10 w-[3px] h-5 rounded-r-xl transition-opacity duration-300\",\n              isDefaultWl ? \"bg-gray-950\" : \"\",\n              activeApp === \"gapps\" ? \"opacity-100\" : \"opacity-0\",\n            )}\n            style={!isDefaultWl ? { backgroundColor: primaryColor } : undefined}\n          />\n        </div>\n\n        <div className=\"relative w-full mt-[7.5px]\">\n          <Separator />\n          {/* Md expand button */}\n          {showExpandButton && (\n            <Tooltip>\n              <TooltipTrigger asChild>\n                <button\n                  onClick={onExpandClick}\n                  className=\"hidden md:flex lg:hidden absolute top-1/2 -translate-y-1/2 right-0 translate-x-[calc(50%+1rem)] size-8 items-center justify-center rounded-full border border-gray-200 bg-white hover:bg-gray-100 cursor-pointer transition-colors z-10\"\n                >\n                  <IconChevronRight size={16} className=\"text-gray-500\" />\n                </button>\n              </TooltipTrigger>\n              <TooltipContent side=\"right\">{translate('common.layout.navbar.expandMenu')}</TooltipContent>\n            </Tooltip>\n          )}\n          {/* Desktop expand button */}\n          {!isDesktopExpanded && (\n            <Tooltip>\n              <TooltipTrigger asChild>\n                <button\n                  onClick={toggleDesktop}\n                  className=\"hidden lg:flex absolute top-1/2 -translate-y-1/2 right-0 translate-x-[calc(50%+1rem)] size-8 items-center justify-center rounded-full border border-gray-200 bg-white hover:bg-gray-100 cursor-pointer transition-colors z-10\"\n                >\n                  <IconChevronRight size={16} className=\"text-gray-500\" />\n                </button>\n              </TooltipTrigger>\n              <TooltipContent side=\"right\">{translate('common.layout.navbar.expandMenu')}</TooltipContent>\n            </Tooltip>\n          )}\n        </div>\n\n        {/* GreatPages icon */}\n        <div className=\"relative\">\n          <Tooltip>\n            <TooltipTrigger asChild>\n              <Link\n                href={appIconHref}\n                className={cn(\n                  \"size-10 rounded-lg cursor-pointer flex items-center justify-center border-2 ring-2 transition-colors duration-300\",\n                  activeApp === \"gpages\"\n                    ? isDefaultWl\n                      ? \"bg-cyan-100 border-white ring-cyan-300\"\n                      : \"border-white ring-transparent\"\n                    : isDefaultWl\n                      ? \"hover:bg-gray-100 border-transparent ring-transparent\"\n                      : \"border-transparent ring-transparent\",\n                )}\n                style={\n                  !isDefaultWl\n                    ? {\n                        backgroundColor: primaryColor,\n                        boxShadow:\n                          activeApp === \"gpages\"\n                            ? `0 0 0 2px ${primaryColor}40`\n                            : undefined,\n                        opacity: activeApp !== \"gpages\" ? 0.2 : undefined,\n                      }\n                    : undefined\n                }\n              >\n                {isDefaultWl ? (\n                  <Image\n                    src=\"/icons/icon-navbar.svg\"\n                    alt=\"GreatPages\"\n                    width={24}\n                    height={24}\n                  />\n                ) : (\n                  <svg\n                    xmlns=\"http://www.w3.org/2000/svg\"\n                    width=\"24\"\n                    height=\"24\"\n                    viewBox=\"0 0 24 24\"\n                    fill=\"none\"\n                    stroke=\"white\"\n                    strokeWidth=\"2\"\n                    strokeLinecap=\"round\"\n                    strokeLinejoin=\"round\"\n                  >\n                    <path d=\"M4 8h16\" />\n                    <path d=\"M4 6a2 2 0 0 1 2 -2h12a2 2 0 0 1 2 2v12a2 2 0 0 1 -2 2h-12a2 2 0 0 1 -2 -2l0 -12\" />\n                    <path d=\"M8 4v4\" />\n                  </svg>\n                )}\n              </Link>\n            </TooltipTrigger>\n            <TooltipContent side=\"right\">\n              {isDefaultWl ? translate('common.layout.navbar.greatPages') : translate('common.layout.navbar.pages')}\n            </TooltipContent>\n          </Tooltip>\n          <div\n            className={cn(\n              \"absolute -left-4 top-1/2 -translate-y-1/2 z-10 w-[3px] h-5 rounded-r-xl transition-opacity duration-300\",\n              isDefaultWl ? \"bg-cyan-300\" : \"\",\n              activeApp === \"gpages\" ? \"opacity-100\" : \"opacity-0\",\n            )}\n            style={!isDefaultWl ? { backgroundColor: primaryColor } : undefined}\n          />\n        </div>\n      </div>\n\n      <div className=\"flex flex-col items-center gap-2\">{children}</div>\n    </div>\n  );\n}\n\nexport { NavBar };\nexport type { NavBarProps };\n"],"mappings":"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","names":[]}

package/dist/components/layouts/NotificationsPopover.mjs

@@ -1,6 +1,7 @@
 "use client";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { useState } from "react";
+import { useTranslations } from "next-intl";
 import { IconBell } from "@tabler/icons-react";
 import * as PopoverPrimitive from "@radix-ui/react-popover";
 import { Popover } from "../ui/overlay/Popover";
@@ -18,6 +19,7 @@ function NotificationsPopover({
   contentClassName,
   badgeClassName
 }) {
+  const translate = useTranslations();
   const isDefaultWl = useIsDefaultWhitelabel();
   const resolvedBadgeClassName = badgeClassName ?? (isDefaultWl ? "bg-cyan-300" : "bg-zinc-300");
   const [open, setOpen] = useState(false);
@@ -61,7 +63,7 @@ function NotificationsPopover({
         align,
         sideOffset: 8,
         children: [
-          /* @__PURE__ */ jsx("span", { className: "paragraph-small-semibold text-gray-950 px-4", children: "\xDAltimas notifica\xE7\xF5es" }),
+          /* @__PURE__ */ jsx("span", { className: "paragraph-small-semibold text-gray-950 px-4", children: translate("common.notifications.popover.title") }),
           messages.length > 0 ? messages.map((message, index) => /* @__PURE__ */ jsx(
             NotificationCard,
             {
@@ -78,7 +80,7 @@ function NotificationsPopover({
             message.id
           )) : /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center gap-4 pt-[41.5px] pb-[33.5px]", children: [
             /* @__PURE__ */ jsx("div", { className: "bg-gray-50 rounded-md p-2.5", children: /* @__PURE__ */ jsx(IconBell, { size: 20, color: "var(--color-gray-950)" }) }),
-            /* @__PURE__ */ jsx("span", { className: "paragraph-small-medium text-gray-950", children: "Sem notifica\xE7\xF5es por enquanto" })
+            /* @__PURE__ */ jsx("span", { className: "paragraph-small-medium text-gray-950", children: translate("common.notifications.popover.empty") })
           ] }),
           onViewAll && /* @__PURE__ */ jsx(
             Button,
@@ -86,7 +88,7 @@ function NotificationsPopover({
               variant: "secondary",
               className: "h-8! mt-2 mb-4 mx-4 paragraph-small-semibold",
               onClick: onViewAll,
-              children: "Todas as notifica\xE7\xF5es"
+              children: translate("common.notifications.popover.viewAll")
             }
           )
         ]

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 { useIsDefaultWhitelabel } from \"../../providers/whitelabel.provider\";\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,\n}: NotificationsPopoverProps) {\n  const isDefaultWl = useIsDefaultWhitelabel();\n  const resolvedBadgeClassName = badgeClassName ?? (isDefaultWl ? \"bg-cyan-300\" : \"bg-zinc-300\");\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                resolvedBadgeClassName,\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":";AAgDQ,SAGE,KAHF;AA9CR,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,8BAA8B;AACvC,SAAS,2BAA2B;AACpC,SAAS,YAAY;AAUrB,SAAS,qBAAqB;AAAA,EAC5B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAA8B;AAC5B,QAAM,cAAc,uBAAuB;AAC3C,QAAM,yBAAyB,mBAAmB,cAAc,gBAAgB;AAChF,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 { useTranslations } from \"next-intl\";\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 { useIsDefaultWhitelabel } from \"../../providers/whitelabel.provider\";\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,\n}: NotificationsPopoverProps) {\n  const translate = useTranslations();\n  const isDefaultWl = useIsDefaultWhitelabel();\n  const resolvedBadgeClassName = badgeClassName ?? (isDefaultWl ? \"bg-cyan-300\" : \"bg-zinc-300\");\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                resolvedBadgeClassName,\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            {translate('common.notifications.popover.title')}\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                {translate('common.notifications.popover.empty')}\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              {translate('common.notifications.popover.viewAll')}\n            </Button>\n          )}\n        </PopoverPrimitive.Content>\n      </PopoverPrimitive.Portal>\n    </Popover>\n  );\n}\n\nexport { NotificationsPopover };\n"],"mappings":";AAkDQ,SAGE,KAHF;AAhDR,SAAS,gBAAgB;AACzB,SAAS,uBAAuB;AAChC,SAAS,gBAAgB;AACzB,YAAY,sBAAsB;AAClC,SAAS,eAAe;AACxB,SAAS,cAAc;AACvB,OAAO,sBAAsB;AAC7B,SAAS,UAAU;AACnB,SAAS,aAAa,gCAAgC;AACtD,SAAS,8BAA8B;AACvC,SAAS,2BAA2B;AACpC,SAAS,YAAY;AAUrB,SAAS,qBAAqB;AAAA,EAC5B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAA8B;AAC5B,QAAM,YAAY,gBAAgB;AAClC,QAAM,cAAc,uBAAuB;AAC3C,QAAM,yBAAyB,mBAAmB,cAAc,gBAAgB;AAChF,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,+CACb,oBAAU,oCAAoC,GACjD;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,wCACb,oBAAU,oCAAoC,GACjD;AAAA,aACF;AAAA,UAGD,aACC;AAAA,YAAC;AAAA;AAAA,cACC,SAAQ;AAAA,cACR,WAAU;AAAA,cACV,SAAS;AAAA,cAER,oBAAU,sCAAsC;AAAA;AAAA,UACnD;AAAA;AAAA;AAAA,IAEJ,GACF;AAAA,KACF;AAEJ;","names":[]}

package/dist/components/layouts/ProfilePopover.mjs

@@ -1,6 +1,7 @@
 "use client";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { useState } from "react";
+import { useTranslations } from "next-intl";
 import { useRouter } from "next/navigation";
 import * as PopoverPrimitive from "@radix-ui/react-popover";
 import { Popover } from "../ui/overlay/Popover";
@@ -22,6 +23,7 @@ function ProfilePopover({
   contentClassName = "absolute bottom-2 left-[26px]",
   menuItems = []
 }) {
+  const translate = useTranslations();
   const { user, logout } = useAuth();
   const [isLoggingOut, setIsLoggingOut] = useState(false);
   const [popoverOpen, setPopoverOpen] = useState(false);
@@ -46,7 +48,7 @@ function ProfilePopover({
       LoadingOverlay,
       {
         isLoading: isLoggingOut,
-        message: "Saindo da sua conta..."
+        message: translate("common.layout.profile.loggingOut")
       }
     ),
     /* @__PURE__ */ jsxs(Popover, { open: popoverOpen, onOpenChange: setPopoverOpen, children: [
@@ -98,7 +100,7 @@ function ProfilePopover({
                       window.location.href = `${accountsUrl}?openProfile=true`;
                     }
                   },
-                  children: "Editar"
+                  children: translate("common.actions.edit")
                 }
               )
             ] }),
@@ -120,7 +122,7 @@ function ProfilePopover({
                   },
                   children: [
                     /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-2", children: [
-                      /* @__PURE__ */ jsx("span", { className: "paragraph-xsmall-semibold text-white truncate", children: "Cr\xE9ditos usados" }),
+                      /* @__PURE__ */ jsx("span", { className: "paragraph-xsmall-semibold text-white truncate", children: translate("common.layout.profile.usedCredits") }),
                       /* @__PURE__ */ jsxs("span", { className: "paragraph-xsmall-medium text-white/50", children: [
                         summary.usedCredits.toLocaleString("pt-BR"),
                         "/",
@@ -149,7 +151,7 @@ function ProfilePopover({
                   index
                 )) }),
                 /* @__PURE__ */ jsx(Separator, {}),
-                /* @__PURE__ */ jsx(NavBarItem, { label: "Sair", onClick: handleLogout })
+                /* @__PURE__ */ jsx(NavBarItem, { label: translate("common.layout.profile.logout"), onClick: handleLogout })
               ] })
             ] })
           ]

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 { useRouter } from \"next/navigation\";\nimport * as PopoverPrimitive from \"@radix-ui/react-popover\";\nimport { Popover } from \"../ui/overlay/Popover\";\nimport { Button } from \"../ui/buttons/Button\";\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 { useIsDefaultWhitelabel, useWhitelabelUrls } from \"../../providers/whitelabel.provider\";\nimport { cn } from \"../../infra/utils/clsx\";\nimport { useIaCredits } from \"../../modules/ia-credits/hooks/ia-credits.hook\";\nimport { useBuyCreditsModal } from \"../../store/useBuyCreditsModal\";\nimport { useCreditsDisabledModal } from \"../../store/useCreditsDisabledModal\";\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 { openModal: openCreditsDisabledModal } = useCreditsDisabledModal();\n  const canManage = user?.profile === 'owner' || user?.profile === 'admin';\n  const isDefaultWl = useIsDefaultWhitelabel();\n  const { accountsUrl } = useWhitelabelUrls();\n  const router = useRouter();\n\n  const handleLogout = async () => {\n    setPopoverOpen(false);\n    setIsLoggingOut(true);\n    await logout();\n  };\n\n  const hasSubscription = !isSubscriptionLoading && subscription !== null;\n\n  const isApiPlan = hasSubscription && subscription.id_plan === 411;\n  const shouldShowCredits = hasSubscription && isDefaultWl && !isApiPlan;\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_auto] 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\n              <Button\n                variant=\"secondary\"\n                className=\"h-8! px-3! paragraph-xsmall-semibold\"\n                onClick={() => {\n                  const isSameOrigin = accountsUrl.startsWith(window.location.origin);\n                  if (isSameOrigin) {\n                    setPopoverOpen(false);\n                    router.push(`${window.location.pathname}?openProfile=true`);\n                  } else {\n                    window.location.href = `${accountsUrl}?openProfile=true`;\n                  }\n                }}\n              >\n                Editar\n              </Button>\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-950/90\",\n                  )}\n                  onClick={() => {\n                    setPopoverOpen(false);\n                    if (canManage) {\n                      openBuyCreditsModal();\n                    } else {\n                      openCreditsDisabledModal();\n                    }\n                  }}\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":";AAmEI,mBACE,KAoCQ,YArCV;AAjEJ,SAAS,gBAAgB;AACzB,SAAS,iBAAiB;AAC1B,YAAY,sBAAsB;AAClC,SAAS,eAAe;AACxB,SAAS,cAAc;AACvB,SAAS,gBAAgB;AACzB,SAAS,iBAAiB;AAC1B,SAAS,kBAAkB;AAC3B,SAAS,kBAAkB;AAC3B,SAAS,sBAAsB;AAC/B,SAAS,eAAe;AACxB,SAAS,wBAAwB,yBAAyB;AAC1D,SAAS,UAAU;AACnB,SAAS,oBAAoB;AAC7B,SAAS,0BAA0B;AACnC,SAAS,+BAA+B;AAexC,SAAS,eAAe;AAAA,EACtB,OAAO;AAAA,EACP,QAAQ;AAAA,EACR,mBAAmB;AAAA,EACnB,YAAY,CAAC;AACf,GAAwB;AACtB,QAAM,EAAE,MAAM,OAAO,IAAI,QAAQ;AACjC,QAAM,CAAC,cAAc,eAAe,IAAI,SAAS,KAAK;AACtD,QAAM,CAAC,aAAa,cAAc,IAAI,SAAS,KAAK;AAEpD,QAAM,EAAE,SAAS,cAAc,uBAAuB,iBAAiB,IACrE,aAAa;AACf,QAAM,EAAE,WAAW,oBAAoB,IAAI,mBAAmB;AAC9D,QAAM,EAAE,WAAW,yBAAyB,IAAI,wBAAwB;AACxE,QAAM,YAAY,MAAM,YAAY,WAAW,MAAM,YAAY;AACjE,QAAM,cAAc,uBAAuB;AAC3C,QAAM,EAAE,YAAY,IAAI,kBAAkB;AAC1C,QAAM,SAAS,UAAU;AAEzB,QAAM,eAAe,YAAY;AAC/B,mBAAe,KAAK;AACpB,oBAAgB,IAAI;AACpB,UAAM,OAAO;AAAA,EACf;AAEA,QAAM,kBAAkB,CAAC,yBAAyB,iBAAiB;AAEnE,QAAM,YAAY,mBAAmB,aAAa,YAAY;AAC9D,QAAM,oBAAoB,mBAAmB,eAAe,CAAC;AAC7D,QAAM,oBACJ,qBAAqB,QAAQ,eAAe,IACvC,QAAQ,cAAc,QAAQ,eAAgB,MAC/C;AAEN,SACE,iCACE;AAAA;AAAA,MAAC;AAAA;AAAA,QACC,WAAW;AAAA,QACX,SAAQ;AAAA;AAAA,IACV;AAAA,IACA,qBAAC,WAAQ,MAAM,aAAa,cAAc,gBACxC;AAAA,0BAAC,iBAAiB,SAAjB,EAAyB,WAAU,kBACjC,kBACC;AAAA,QAAC;AAAA;AAAA,UAEC,OAAO,KAAK;AAAA,UACZ,MAAM,KAAK;AAAA,UACX,MAAM;AAAA;AAAA,QAHD,KAAK;AAAA,MAIZ,GAEJ;AAAA,MAEA,oBAAC,iBAAiB,QAAjB,EACC;AAAA,QAAC,iBAAiB;AAAA,QAAjB;AAAA,UACC,WAAW;AAAA,YACT;AAAA,YACA;AAAA,UACF;AAAA,UACA;AAAA,UACA;AAAA,UACA,YAAY;AAAA,UAEZ;AAAA,iCAAC,SAAI,WAAU,gEACZ;AAAA,sBACC;AAAA,gBAAC;AAAA;AAAA,kBAEC,OAAO,KAAK;AAAA,kBACZ,MAAM,KAAK;AAAA,kBACX,MAAM;AAAA;AAAA,gBAHD,KAAK;AAAA,cAIZ;AAAA,cAGF,qBAAC,SAAI,WAAU,iCACb;AAAA,oCAAC,UAAK,WAAU,mDACb,gBAAM,QAAQ,IACjB;AAAA,gBACA,oBAAC,UAAK,WAAU,kDACb,gBAAM,SAAS,IAClB;AAAA,iBACF;AAAA,cAEA;AAAA,gBAAC;AAAA;AAAA,kBACC,SAAQ;AAAA,kBACR,WAAU;AAAA,kBACV,SAAS,MAAM;AACb,0BAAM,eAAe,YAAY,WAAW,OAAO,SAAS,MAAM;AAClE,wBAAI,cAAc;AAChB,qCAAe,KAAK;AACpB,6BAAO,KAAK,GAAG,OAAO,SAAS,QAAQ,mBAAmB;AAAA,oBAC5D,OAAO;AACL,6BAAO,SAAS,OAAO,GAAG,WAAW;AAAA,oBACvC;AAAA,kBACF;AAAA,kBACD;AAAA;AAAA,cAED;AAAA,eACF;AAAA,YAEA,qBAAC,SAAI,WAAU,kEACZ;AAAA,mCACC;AAAA,gBAAC;AAAA;AAAA,kBACC,WAAW;AAAA,oBACT;AAAA,oBACA;AAAA,kBACF;AAAA,kBACA,SAAS,MAAM;AACb,mCAAe,KAAK;AACpB,wBAAI,WAAW;AACb,0CAAoB;AAAA,oBACtB,OAAO;AACL,+CAAyB;AAAA,oBAC3B;AAAA,kBACF;AAAA,kBAEA;AAAA,yCAAC,SAAI,WAAU,2CACb;AAAA,0CAAC,UAAK,WAAU,iDAAgD,gCAEhE;AAAA,sBACA,qBAAC,UAAK,WAAU,yCACb;AAAA,gCAAQ,YAAY,eAAe,OAAO;AAAA,wBAAE;AAAA,wBAC5C,QAAQ,aAAa,eAAe,OAAO;AAAA,yBAC9C;AAAA,uBACF;AAAA,oBACA;AAAA,sBAAC;AAAA;AAAA,wBACC,WAAU;AAAA,wBACV,gBAAe;AAAA,wBACf,OAAO;AAAA;AAAA,oBACT;AAAA;AAAA;AAAA,cACF;AAAA,cAGF,qBAAC,SAAI,WAAU,uBACb;AAAA,oCAAC,SAAI,WAAU,iBACZ,oBAAU,IAAI,CAAC,MAAM,UACpB;AAAA,kBAAC;AAAA;AAAA,oBAEC,MAAM,KAAK;AAAA,oBACX,OAAO,KAAK;AAAA,oBACZ,SAAS,KAAK;AAAA;AAAA,kBAHT;AAAA,gBAIP,CACD,GACH;AAAA,gBACA,oBAAC,aAAU;AAAA,gBACX,oBAAC,cAAW,OAAM,QAAO,SAAS,cAAc;AAAA,iBAClD;AAAA,eACF;AAAA;AAAA;AAAA,MACF,GACF;AAAA,OACF;AAAA,KACF;AAEJ;","names":[]}
+{"version":3,"sources":["../../../src/components/layouts/ProfilePopover.tsx"],"sourcesContent":["\"use client\";\n\nimport { useState } from \"react\";\nimport { useTranslations } from \"next-intl\";\nimport { useRouter } from \"next/navigation\";\nimport * as PopoverPrimitive from \"@radix-ui/react-popover\";\nimport { Popover } from \"../ui/overlay/Popover\";\nimport { Button } from \"../ui/buttons/Button\";\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 { useIsDefaultWhitelabel, useWhitelabelUrls } from \"../../providers/whitelabel.provider\";\nimport { cn } from \"../../infra/utils/clsx\";\nimport { useIaCredits } from \"../../modules/ia-credits/hooks/ia-credits.hook\";\nimport { useBuyCreditsModal } from \"../../store/useBuyCreditsModal\";\nimport { useCreditsDisabledModal } from \"../../store/useCreditsDisabledModal\";\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 translate = useTranslations();\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 { openModal: openCreditsDisabledModal } = useCreditsDisabledModal();\n  const canManage = user?.profile === 'owner' || user?.profile === 'admin';\n  const isDefaultWl = useIsDefaultWhitelabel();\n  const { accountsUrl } = useWhitelabelUrls();\n  const router = useRouter();\n\n  const handleLogout = async () => {\n    setPopoverOpen(false);\n    setIsLoggingOut(true);\n    await logout();\n  };\n\n  const hasSubscription = !isSubscriptionLoading && subscription !== null;\n\n  const isApiPlan = hasSubscription && subscription.id_plan === 411;\n  const shouldShowCredits = hasSubscription && isDefaultWl && !isApiPlan;\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={translate('common.layout.profile.loggingOut')}\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_auto] 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\n              <Button\n                variant=\"secondary\"\n                className=\"h-8! px-3! paragraph-xsmall-semibold\"\n                onClick={() => {\n                  const isSameOrigin = accountsUrl.startsWith(window.location.origin);\n                  if (isSameOrigin) {\n                    setPopoverOpen(false);\n                    router.push(`${window.location.pathname}?openProfile=true`);\n                  } else {\n                    window.location.href = `${accountsUrl}?openProfile=true`;\n                  }\n                }}\n              >\n                {translate('common.actions.edit')}\n              </Button>\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-950/90\",\n                  )}\n                  onClick={() => {\n                    setPopoverOpen(false);\n                    if (canManage) {\n                      openBuyCreditsModal();\n                    } else {\n                      openCreditsDisabledModal();\n                    }\n                  }}\n                >\n                  <div className=\"flex items-center justify-between gap-2\">\n                    <span className=\"paragraph-xsmall-semibold text-white truncate\">\n                      {translate('common.layout.profile.usedCredits')}\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={translate('common.layout.profile.logout')} 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/layouts/UsersSelectorPopover.mjs

@@ -1,6 +1,7 @@
 "use client";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { useEffect, useState } from "react";
+import { useTranslations } from "next-intl";
 import { IconPlus, IconUser, IconUsers } from "@tabler/icons-react";
 import { UserAvatar } from "../ui/data-display/UserAvatar";
 import { Popover, PopoverContent, PopoverTrigger } from "../ui/overlay/Popover";
@@ -35,6 +36,7 @@ function UsersSelectorPopover({
   align,
   contentClassName
 }) {
+  const translate = useTranslations();
   const { accountsUrl } = useWhitelabelUrls();
   const [open, setOpen] = useState(false);
   const [hoveredId, setHoveredId] = useState(null);
@@ -86,7 +88,7 @@ function UsersSelectorPopover({
         sideOffset: 8,
         children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col p-3 gap-2", children: [
           /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
-            /* @__PURE__ */ jsx("span", { className: "paragraph-small-semibold", children: "Usu\xE1rios" }),
+            /* @__PURE__ */ jsx("span", { className: "paragraph-small-semibold", children: translate("common.layout.usersSelector.title") }),
             /* @__PURE__ */ jsx("div", { className: "flex items-center gap-1.5", children: /* @__PURE__ */ jsxs(
               Button,
               {
@@ -97,7 +99,7 @@ function UsersSelectorPopover({
                 },
                 children: [
                   /* @__PURE__ */ jsx(IconPlus, { size: 16 }),
-                  "Adicionar"
+                  translate("common.layout.usersSelector.add")
                 ]
               }
             ) })
@@ -106,7 +108,7 @@ function UsersSelectorPopover({
             /* @__PURE__ */ jsx(
               CommandInput,
               {
-                placeholder: "Busque aqui",
+                placeholder: translate("common.layout.usersSelector.searchPlaceholder"),
                 value: searchInput,
                 onValueChange: setSearchInput
               }
@@ -122,9 +124,9 @@ function UsersSelectorPopover({
                   /* @__PURE__ */ jsx(UserItemSkeleton, {})
                 ] }) : allUsers.length === 0 ? /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center justify-center gap-2 h-full text-gray-400 py-4", children: [
                   /* @__PURE__ */ jsx(IconUsers, { size: 28, className: "text-gray-300" }),
-                  /* @__PURE__ */ jsx("span", { className: "paragraph-small-medium text-center text-gray-500", children: "Nenhum usu\xE1rio encontrado." })
+                  /* @__PURE__ */ jsx("span", { className: "paragraph-small-medium text-center text-gray-500", children: translate("common.layout.usersSelector.empty") })
                 ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
-                  /* @__PURE__ */ jsx(CommandEmpty, { children: "Nenhum resultado encontrado." }),
+                  /* @__PURE__ */ jsx(CommandEmpty, { children: translate("common.layout.usersSelector.noResults") }),
                   allUsers.map((user) => {
                     const inProject = user.in_project ?? false;
                     const removable = inProject && user.profile !== "owner" && user.profile !== "admin";
@@ -172,7 +174,7 @@ function UsersSelectorPopover({
                                 )
                               }
                             ) }),
-                            /* @__PURE__ */ jsx(TooltipContent, { className: "z-[1002]", children: inProject ? "Remover do projeto" : "Adicionar ao projeto" })
+                            /* @__PURE__ */ jsx(TooltipContent, { className: "z-[1002]", children: inProject ? translate("common.layout.usersSelector.removeFromProject") : translate("common.layout.usersSelector.addToProject") })
                           ] })
                         ] })
                       },
@@ -196,7 +198,7 @@ function UsersSelectorPopover({
               onClick: () => {
                 window.location.href = `${accountsUrl}/my-teams`;
               },
-              children: "Gerenciar equipe"
+              children: translate("common.layout.usersSelector.manageTeam")
             }
           )
         ] })

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/layouts/UsersSelectorPopover.tsx"],"sourcesContent":["\"use client\";\n\nimport { useEffect, useState } from \"react\";\nimport { IconPlus, IconUser, IconUsers } from '@tabler/icons-react';\nimport { UserAvatar } from \"../ui/data-display/UserAvatar\";\nimport { Popover, PopoverContent, PopoverTrigger } from \"../ui/overlay/Popover\";\nimport { Button } from \"../ui/buttons/Button\";\nimport {\n  Command,\n  CommandEmpty,\n  CommandInput,\n  CommandItem,\n  CommandList,\n} from \"../ui/overlay/Command\";\nimport { Checkbox } from \"../ui/form/Checkbox\";\nimport { Tooltip, TooltipContent, TooltipTrigger } from \"../ui/overlay/Tooltip\";\nimport { cn } from \"../../infra/utils/clsx\";\nimport { useListProjectUsers } from \"../../modules/projects/hooks/list-project-users.hook\";\nimport { useListAllAccountUsers } from \"../../modules/projects/hooks/list-all-account-users.hook\";\nimport { useAddProjectUser } from \"../../modules/projects/hooks/add-project-user.hook\";\nimport { useRemoveProjectUser } from \"../../modules/projects/hooks/remove-project-user.hook\";\nimport { useWhitelabelUrls } from \"../../providers/whitelabel.provider\";\n\nexport interface UsersSelectorPopoverProps {\n  projectId?: number;\n  side?: \"top\" | \"bottom\" | \"left\" | \"right\";\n  align?: \"start\" | \"center\" | \"end\";\n  contentClassName?: string;\n}\n\nfunction UserItemSkeleton() {\n  return (\n    <div className=\"flex items-center justify-between px-2 py-1.5 gap-2\">\n      <div className=\"flex items-center gap-2 flex-1\">\n        <div className=\"skeleton size-8 rounded-full shrink-0\" />\n        <div className=\"skeleton h-3.5 w-28 rounded\" />\n      </div>\n      <div className=\"skeleton size-4 rounded shrink-0\" />\n    </div>\n  );\n}\n\nexport function UsersSelectorPopover({\n  projectId,\n  side,\n  align,\n  contentClassName,\n}: UsersSelectorPopoverProps) {\n  const { accountsUrl } = useWhitelabelUrls();\n  const [open, setOpen] = useState(false);\n  const [hoveredId, setHoveredId] = useState<number | null>(null);\n  const [searchInput, setSearchInput] = useState(\"\");\n  const [search, setSearch] = useState(\"\");\n\n  const id = projectId ?? 0;\n\n  useEffect(() => {\n    const timer = setTimeout(() => setSearch(searchInput), 300);\n    return () => clearTimeout(timer);\n  }, [searchInput]);\n\n  const accountUsers = useListAllAccountUsers(search, id || undefined);\n  const projectUsers = useListProjectUsers(id, \"\");\n  const addMutation = useAddProjectUser(id);\n  const removeMutation = useRemoveProjectUser(id);\n\n  const allUsers = accountUsers.data?.pages.flatMap((p) => p.data) ?? [];\n  const isLoading = accountUsers.isLoading;\n  const isFetchingMore = accountUsers.isFetchingNextPage;\n  const totalInProject = projectUsers.data?.pages[0]?.total ?? 0;\n\n  const toggleUser = (userId: number, inProject: boolean, removable: boolean) => {\n    if (inProject) {\n      if (!removable) return;\n      removeMutation.mutate(userId);\n    } else {\n      addMutation.mutate(userId);\n    }\n  };\n\n  const handleScroll = (e: React.UIEvent<HTMLDivElement>) => {\n    const target = e.currentTarget;\n    const nearBottom =\n      target.scrollTop + target.clientHeight >= target.scrollHeight - 50;\n    if (!nearBottom) return;\n    if (accountUsers.hasNextPage && !accountUsers.isFetchingNextPage) {\n      accountUsers.fetchNextPage();\n    }\n  };\n\n  return (\n    <Popover open={open} onOpenChange={setOpen}>\n      <PopoverTrigger className=\"cursor-pointer\">\n        <div className=\"flex items-center gap-2 text-gray-950 px-3 py-2 border border-gray-200 rounded-full hover:border-gray-950\">\n          <span className=\"paragraph-small-semibold\">{totalInProject}</span>\n          <IconUser size={16} />\n        </div>\n      </PopoverTrigger>\n\n      <PopoverContent\n        className={cn(\n          \"absolute right-0 md:right-[-88px] w-[296px] p-0 bg-white rounded-2xl shadow-md border border-gray-200\",\n          contentClassName,\n        )}\n        side={side}\n        align={align}\n        sideOffset={8}\n      >\n        <div className=\"flex flex-col p-3 gap-2\">\n          <div className=\"flex items-center justify-between\">\n            <span className=\"paragraph-small-semibold\">Usuários</span>\n            <div className=\"flex items-center gap-1.5\">\n              <Button\n                variant=\"secondary\"\n                className=\"h-8 paragraph-small-semibold text-gray-950\"\n                onClick={() => {\n                  window.location.href = `${accountsUrl}/my-teams?createNew=true`;\n                }}\n              >\n                <IconPlus size={16} />\n                Adicionar\n              </Button>\n            </div>\n          </div>\n\n          <Command shouldFilter={false} className=\"gap-2\" value=\"\">\n            <CommandInput\n              placeholder=\"Busque aqui\"\n              value={searchInput}\n              onValueChange={setSearchInput}\n            />\n            <CommandList\n              className=\"custom-scrollbar paragraph-small-medium text-gray-600 h-[162px]\"\n              onScroll={handleScroll}\n            >\n              {isLoading ? (\n                <>\n                  <UserItemSkeleton />\n                  <UserItemSkeleton />\n                  <UserItemSkeleton />\n                </>\n              ) : allUsers.length === 0 ? (\n                <div className=\"flex flex-col items-center justify-center gap-2 h-full text-gray-400 py-4\">\n                  <IconUsers size={28} className=\"text-gray-300\" />\n                  <span className=\"paragraph-small-medium text-center text-gray-500\">\n                    Nenhum usuário encontrado.\n                  </span>\n                </div>\n              ) : (\n                <>\n                  <CommandEmpty>Nenhum resultado encontrado.</CommandEmpty>\n                  {allUsers.map((user) => {\n                    const inProject = user.in_project ?? false;\n                    const removable =\n                      inProject &&\n                      user.profile !== \"owner\" &&\n                      user.profile !== \"admin\";\n                    const interactive = !inProject || removable;\n\n                    return (\n                      <CommandItem\n                        key={user.id}\n                        value={user.name || String(user.id)}\n                        autoFocus={false}\n                        onPointerEnter={() => setHoveredId(user.id)}\n                        onPointerLeave={() => setHoveredId(null)}\n                        onFocus={() => setHoveredId(user.id)}\n                        onBlur={() => setHoveredId(null)}\n                        onSelect={() => toggleUser(user.id, inProject, removable)}\n                        className={interactive ? \"cursor-pointer\" : \"cursor-default\"}\n                      >\n                        <div className=\"flex items-center justify-between w-full\">\n                          <div className=\"flex items-center gap-2 min-w-0\">\n                            <UserAvatar\n                              photo={user.photo}\n                              name={user.name ?? undefined}\n                              size={32}\n                            />\n                            <span className=\"truncate\">{user.name}</span>\n                          </div>\n                          <Tooltip open={interactive && hoveredId === user.id}>\n                            <TooltipTrigger asChild>\n                              <div\n                                onClick={(e) => e.stopPropagation()}\n                                onPointerDown={(e) => e.stopPropagation()}\n                              >\n                                <Checkbox\n                                  checked={inProject}\n                                  disabled={!interactive}\n                                  onCheckedChange={() =>\n                                    toggleUser(user.id, inProject, removable)\n                                  }\n                                  className={cn(\n                                    interactive && hoveredId === user.id\n                                      ? \"border-gray-950\"\n                                      : \"\",\n                                    \"disabled:opacity-10\",\n                                  )}\n                                />\n                              </div>\n                            </TooltipTrigger>\n                            <TooltipContent className=\"z-[1002]\">\n                              {inProject ? \"Remover do projeto\" : \"Adicionar ao projeto\"}\n                            </TooltipContent>\n                          </Tooltip>\n                        </div>\n                      </CommandItem>\n                    );\n                  })}\n                  {isFetchingMore && (\n                    <>\n                      <UserItemSkeleton />\n                      <UserItemSkeleton />\n                    </>\n                  )}\n                </>\n              )}\n            </CommandList>\n          </Command>\n          <div className=\"border-t border-gray-200\" />\n          <Button\n            variant=\"ghost\"\n            className=\"h-10! paragraph-small-medium text-gray-600 hover:text-gray-950 hover:bg-zinc-50 w-full justify-center\"\n            onClick={() => {\n              window.location.href = `${accountsUrl}/my-teams`;\n            }}\n          >\n            Gerenciar equipe\n          </Button>\n        </div>\n      </PopoverContent>\n    </Popover>\n  );\n}\n"],"mappings":"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","names":[]}
+{"version":3,"sources":["../../../src/components/layouts/UsersSelectorPopover.tsx"],"sourcesContent":["\"use client\";\n\nimport { useEffect, useState } from \"react\";\nimport { useTranslations } from \"next-intl\";\nimport { IconPlus, IconUser, IconUsers } from '@tabler/icons-react';\nimport { UserAvatar } from \"../ui/data-display/UserAvatar\";\nimport { Popover, PopoverContent, PopoverTrigger } from \"../ui/overlay/Popover\";\nimport { Button } from \"../ui/buttons/Button\";\nimport {\n  Command,\n  CommandEmpty,\n  CommandInput,\n  CommandItem,\n  CommandList,\n} from \"../ui/overlay/Command\";\nimport { Checkbox } from \"../ui/form/Checkbox\";\nimport { Tooltip, TooltipContent, TooltipTrigger } from \"../ui/overlay/Tooltip\";\nimport { cn } from \"../../infra/utils/clsx\";\nimport { useListProjectUsers } from \"../../modules/projects/hooks/list-project-users.hook\";\nimport { useListAllAccountUsers } from \"../../modules/projects/hooks/list-all-account-users.hook\";\nimport { useAddProjectUser } from \"../../modules/projects/hooks/add-project-user.hook\";\nimport { useRemoveProjectUser } from \"../../modules/projects/hooks/remove-project-user.hook\";\nimport { useWhitelabelUrls } from \"../../providers/whitelabel.provider\";\n\nexport interface UsersSelectorPopoverProps {\n  projectId?: number;\n  side?: \"top\" | \"bottom\" | \"left\" | \"right\";\n  align?: \"start\" | \"center\" | \"end\";\n  contentClassName?: string;\n}\n\nfunction UserItemSkeleton() {\n  return (\n    <div className=\"flex items-center justify-between px-2 py-1.5 gap-2\">\n      <div className=\"flex items-center gap-2 flex-1\">\n        <div className=\"skeleton size-8 rounded-full shrink-0\" />\n        <div className=\"skeleton h-3.5 w-28 rounded\" />\n      </div>\n      <div className=\"skeleton size-4 rounded shrink-0\" />\n    </div>\n  );\n}\n\nexport function UsersSelectorPopover({\n  projectId,\n  side,\n  align,\n  contentClassName,\n}: UsersSelectorPopoverProps) {\n  const translate = useTranslations();\n  const { accountsUrl } = useWhitelabelUrls();\n  const [open, setOpen] = useState(false);\n  const [hoveredId, setHoveredId] = useState<number | null>(null);\n  const [searchInput, setSearchInput] = useState(\"\");\n  const [search, setSearch] = useState(\"\");\n\n  const id = projectId ?? 0;\n\n  useEffect(() => {\n    const timer = setTimeout(() => setSearch(searchInput), 300);\n    return () => clearTimeout(timer);\n  }, [searchInput]);\n\n  const accountUsers = useListAllAccountUsers(search, id || undefined);\n  const projectUsers = useListProjectUsers(id, \"\");\n  const addMutation = useAddProjectUser(id);\n  const removeMutation = useRemoveProjectUser(id);\n\n  const allUsers = accountUsers.data?.pages.flatMap((p) => p.data) ?? [];\n  const isLoading = accountUsers.isLoading;\n  const isFetchingMore = accountUsers.isFetchingNextPage;\n  const totalInProject = projectUsers.data?.pages[0]?.total ?? 0;\n\n  const toggleUser = (userId: number, inProject: boolean, removable: boolean) => {\n    if (inProject) {\n      if (!removable) return;\n      removeMutation.mutate(userId);\n    } else {\n      addMutation.mutate(userId);\n    }\n  };\n\n  const handleScroll = (e: React.UIEvent<HTMLDivElement>) => {\n    const target = e.currentTarget;\n    const nearBottom =\n      target.scrollTop + target.clientHeight >= target.scrollHeight - 50;\n    if (!nearBottom) return;\n    if (accountUsers.hasNextPage && !accountUsers.isFetchingNextPage) {\n      accountUsers.fetchNextPage();\n    }\n  };\n\n  return (\n    <Popover open={open} onOpenChange={setOpen}>\n      <PopoverTrigger className=\"cursor-pointer\">\n        <div className=\"flex items-center gap-2 text-gray-950 px-3 py-2 border border-gray-200 rounded-full hover:border-gray-950\">\n          <span className=\"paragraph-small-semibold\">{totalInProject}</span>\n          <IconUser size={16} />\n        </div>\n      </PopoverTrigger>\n\n      <PopoverContent\n        className={cn(\n          \"absolute right-0 md:right-[-88px] w-[296px] p-0 bg-white rounded-2xl shadow-md border border-gray-200\",\n          contentClassName,\n        )}\n        side={side}\n        align={align}\n        sideOffset={8}\n      >\n        <div className=\"flex flex-col p-3 gap-2\">\n          <div className=\"flex items-center justify-between\">\n            <span className=\"paragraph-small-semibold\">{translate('common.layout.usersSelector.title')}</span>\n            <div className=\"flex items-center gap-1.5\">\n              <Button\n                variant=\"secondary\"\n                className=\"h-8 paragraph-small-semibold text-gray-950\"\n                onClick={() => {\n                  window.location.href = `${accountsUrl}/my-teams?createNew=true`;\n                }}\n              >\n                <IconPlus size={16} />\n                {translate('common.layout.usersSelector.add')}\n              </Button>\n            </div>\n          </div>\n\n          <Command shouldFilter={false} className=\"gap-2\" value=\"\">\n            <CommandInput\n              placeholder={translate('common.layout.usersSelector.searchPlaceholder')}\n              value={searchInput}\n              onValueChange={setSearchInput}\n            />\n            <CommandList\n              className=\"custom-scrollbar paragraph-small-medium text-gray-600 h-[162px]\"\n              onScroll={handleScroll}\n            >\n              {isLoading ? (\n                <>\n                  <UserItemSkeleton />\n                  <UserItemSkeleton />\n                  <UserItemSkeleton />\n                </>\n              ) : allUsers.length === 0 ? (\n                <div className=\"flex flex-col items-center justify-center gap-2 h-full text-gray-400 py-4\">\n                  <IconUsers size={28} className=\"text-gray-300\" />\n                  <span className=\"paragraph-small-medium text-center text-gray-500\">\n                    {translate('common.layout.usersSelector.empty')}\n                  </span>\n                </div>\n              ) : (\n                <>\n                  <CommandEmpty>{translate('common.layout.usersSelector.noResults')}</CommandEmpty>\n                  {allUsers.map((user) => {\n                    const inProject = user.in_project ?? false;\n                    const removable =\n                      inProject &&\n                      user.profile !== \"owner\" &&\n                      user.profile !== \"admin\";\n                    const interactive = !inProject || removable;\n\n                    return (\n                      <CommandItem\n                        key={user.id}\n                        value={user.name || String(user.id)}\n                        autoFocus={false}\n                        onPointerEnter={() => setHoveredId(user.id)}\n                        onPointerLeave={() => setHoveredId(null)}\n                        onFocus={() => setHoveredId(user.id)}\n                        onBlur={() => setHoveredId(null)}\n                        onSelect={() => toggleUser(user.id, inProject, removable)}\n                        className={interactive ? \"cursor-pointer\" : \"cursor-default\"}\n                      >\n                        <div className=\"flex items-center justify-between w-full\">\n                          <div className=\"flex items-center gap-2 min-w-0\">\n                            <UserAvatar\n                              photo={user.photo}\n                              name={user.name ?? undefined}\n                              size={32}\n                            />\n                            <span className=\"truncate\">{user.name}</span>\n                          </div>\n                          <Tooltip open={interactive && hoveredId === user.id}>\n                            <TooltipTrigger asChild>\n                              <div\n                                onClick={(e) => e.stopPropagation()}\n                                onPointerDown={(e) => e.stopPropagation()}\n                              >\n                                <Checkbox\n                                  checked={inProject}\n                                  disabled={!interactive}\n                                  onCheckedChange={() =>\n                                    toggleUser(user.id, inProject, removable)\n                                  }\n                                  className={cn(\n                                    interactive && hoveredId === user.id\n                                      ? \"border-gray-950\"\n                                      : \"\",\n                                    \"disabled:opacity-10\",\n                                  )}\n                                />\n                              </div>\n                            </TooltipTrigger>\n                            <TooltipContent className=\"z-[1002]\">\n                              {inProject ? translate('common.layout.usersSelector.removeFromProject') : translate('common.layout.usersSelector.addToProject')}\n                            </TooltipContent>\n                          </Tooltip>\n                        </div>\n                      </CommandItem>\n                    );\n                  })}\n                  {isFetchingMore && (\n                    <>\n                      <UserItemSkeleton />\n                      <UserItemSkeleton />\n                    </>\n                  )}\n                </>\n              )}\n            </CommandList>\n          </Command>\n          <div className=\"border-t border-gray-200\" />\n          <Button\n            variant=\"ghost\"\n            className=\"h-10! paragraph-small-medium text-gray-600 hover:text-gray-950 hover:bg-zinc-50 w-full justify-center\"\n            onClick={() => {\n              window.location.href = `${accountsUrl}/my-teams`;\n            }}\n          >\n            {translate('common.layout.usersSelector.manageTeam')}\n          </Button>\n        </div>\n      </PopoverContent>\n    </Popover>\n  );\n}\n"],"mappings":"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","names":[]}

package/dist/components/modals/BuyCreditsModal.mjs

@@ -26,6 +26,7 @@ import { useUpdateSubscriptionPlan } from "../../modules/subscriptions/hooks/upd
 import { getPriceFromCalculatedData } from "../../modules/subscriptions/utils/periodicity";
 import { useIsDefaultWhitelabel, useExternalContracting } from "../../providers/whitelabel.provider";
 import { IconInfoCircle, IconX, IconLoader2, IconSparkles } from "@tabler/icons-react";
+import { useTranslations } from "next-intl";
 import { useCallback, useEffect, useMemo, useRef } from "react";
 import { useForm } from "react-hook-form";
 import { zodResolver } from "@hookform/resolvers/zod";
@@ -38,6 +39,7 @@ const buyCreditSchema = z.object({
   selectedCardId: z.string().min(1, "Selecione um cart\xE3o")
 });
 function BuyCreditsModal() {
+  const translate = useTranslations();
   const { open, closeModal } = useBuyCreditsModal();
   const { openModal } = useModalManager();
   const isDefaultWl = useIsDefaultWhitelabel();
@@ -151,13 +153,10 @@ function BuyCreditsModal() {
     return AI_CREDIT_OPTIONS.map((opt) => ({
       value: opt.credits,
       label: /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-2 w-full", children: [
-        /* @__PURE__ */ jsxs("span", { className: "paragraph-small-medium text-zinc-950 flex-1", children: [
-          opt.credits.toLocaleString("pt-BR"),
-          " cr\xE9ditos de IA"
-        ] }),
+        /* @__PURE__ */ jsx("span", { className: "paragraph-small-medium text-zinc-950 flex-1", children: translate("common.credits.buy.creditsOptionLabel", { credits: opt.credits.toLocaleString("pt-BR") }) }),
         /* @__PURE__ */ jsx("span", { className: "paragraph-small-medium text-zinc-500 opacity-70", children: opt.priceLabel })
       ] }),
-      displayValue: `${opt.credits.toLocaleString("pt-BR")} cr\xE9ditos de IA`
+      displayValue: translate("common.credits.buy.creditsOptionDisplayValue", { credits: opt.credits.toLocaleString("pt-BR") })
     }));
   }, []);
   const onSubmit = useCallback(
@@ -180,7 +179,7 @@ function BuyCreditsModal() {
         Toast,
         {
           variant: "success",
-          message: `Cr\xE9ditos de IA alterados para ${data.creditOption.toLocaleString("pt-BR")}`,
+          message: translate("common.credits.buy.creditsChangedToast", { credits: data.creditOption.toLocaleString("pt-BR") }),
           toastId: t
         }
       ));
@@ -194,7 +193,7 @@ function BuyCreditsModal() {
       return /* @__PURE__ */ jsx(Skeleton, { className: "h-7 w-24" });
     }
     if (totalPrice !== null) {
-      return /* @__PURE__ */ jsx("span", { className: "paragraph-xlarge-semibold text-zinc-950", children: totalPrice === 0 ? "Padr\xE3o" : formatPrice(totalPrice) });
+      return /* @__PURE__ */ jsx("span", { className: "paragraph-xlarge-semibold text-zinc-950", children: totalPrice === 0 ? translate("common.credits.buy.defaultPrice") : formatPrice(totalPrice) });
     }
     return /* @__PURE__ */ jsx("span", { className: "paragraph-xlarge-semibold text-zinc-400", children: "--" });
   }, [isCalculatePending, totalPrice, formatPrice]);
@@ -203,8 +202,8 @@ function BuyCreditsModal() {
       /* @__PURE__ */ jsxs(DialogHeader, { className: "gap-3 text-left p-5", children: [
         /* @__PURE__ */ jsx("div", { className: "flex items-center justify-center w-10 h-10 bg-zinc-50 rounded-lg", children: /* @__PURE__ */ jsx(IconSparkles, { size: 24, className: "text-zinc-950" }) }),
         /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-2", children: [
-          /* @__PURE__ */ jsx(DialogTitle, { className: "paragraph-medium-semibold text-zinc-950", children: "Cr\xE9ditos de IA" }),
-          /* @__PURE__ */ jsx("span", { className: "paragraph-small-regular text-zinc-600", children: "Para adquirir cr\xE9ditos de IA, acesse sua \xE1rea de assinatura." })
+          /* @__PURE__ */ jsx(DialogTitle, { className: "paragraph-medium-semibold text-zinc-950", children: translate("common.credits.buy.externalTitle") }),
+          /* @__PURE__ */ jsx("span", { className: "paragraph-small-regular text-zinc-600", children: translate("common.credits.buy.externalDescription") })
         ] })
       ] }),
       /* @__PURE__ */ jsx("div", { className: "flex items-center gap-2 p-5 border-t border-zinc-200", children: /* @__PURE__ */ jsx(
@@ -215,7 +214,7 @@ function BuyCreditsModal() {
             closeModal();
             redirectToExternal("contracting");
           },
-          children: "Acessar \xE1rea de assinatura"
+          children: translate("common.credits.buy.externalButton")
         }
       ) })
     ] }) });
@@ -227,7 +226,7 @@ function BuyCreditsModal() {
       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-[433px] lg:h-auto lg:max-h-[90vh] lg:rounded-lg lg:border lg:top-[50%] lg:left-[50%] lg:right-auto lg:bottom-auto lg:translate-x-[-50%] lg:translate-y-[-50%] overflow-hidden lg:overflow-y-auto",
       children: [
         /* @__PURE__ */ jsxs(DialogHeader, { className: "px-4 py-3 border-b border-zinc-200 shrink-0 relative", children: [
-          /* @__PURE__ */ jsx(DialogTitle, { className: "paragraph-medium-semibold text-zinc-950 text-center", children: "Comprar cr\xE9ditos de IA" }),
+          /* @__PURE__ */ jsx(DialogTitle, { className: "paragraph-medium-semibold text-zinc-950 text-center", children: translate("common.credits.buy.title") }),
           /* @__PURE__ */ jsx(
             "button",
             {
@@ -265,17 +264,17 @@ function BuyCreditsModal() {
                   ),
                   hasChanged && /* @__PURE__ */ jsxs("div", { className: `flex items-center gap-3 p-4 rounded-lg ${isDefaultWl ? "bg-cyan-50" : "bg-zinc-50"}`, children: [
                     /* @__PURE__ */ jsx(IconInfoCircle, { className: "size-4 text-zinc-950 shrink-0" }),
-                    /* @__PURE__ */ jsx("span", { className: "paragraph-small-regular text-zinc-950", children: isIncreasingCredits ? "O pagamento ser\xE1 processado no momento da confirma\xE7\xE3o." : "As altera\xE7\xF5es entrar\xE3o em vigor a partir da sua pr\xF3xima fatura." })
+                    /* @__PURE__ */ jsx("span", { className: "paragraph-small-regular text-zinc-950", children: isIncreasingCredits ? translate("common.credits.buy.paymentOnConfirm") : translate("common.credits.buy.nextInvoiceChanges") })
                   ] })
                 ] }),
                 /* @__PURE__ */ jsx(Separator, { className: "bg-zinc-200 hidden lg:block" }),
                 /* @__PURE__ */ jsxs("div", { className: "hidden lg:flex flex-col gap-2", children: [
                   immediateChargeTotal !== null && immediateChargeTotal > 0 && /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
-                    /* @__PURE__ */ jsx("span", { className: "paragraph-xsmall-medium text-zinc-500", children: "Cobran\xE7a imediata" }),
+                    /* @__PURE__ */ jsx("span", { className: "paragraph-xsmall-medium text-zinc-500", children: translate("common.credits.buy.immediateCharge") }),
                     isCalculatePending ? /* @__PURE__ */ jsx(Skeleton, { className: "h-5 w-20" }) : /* @__PURE__ */ jsx("span", { className: "paragraph-small-semibold text-zinc-950", children: formatPrice(immediateChargeTotal) })
                   ] }),
                   /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
-                    /* @__PURE__ */ jsx("span", { className: "paragraph-small-medium text-zinc-500", children: "Valor total do plano" }),
+                    /* @__PURE__ */ jsx("span", { className: "paragraph-small-medium text-zinc-500", children: translate("common.credits.buy.totalPlanValue") }),
                     renderPriceDisplay()
                   ] })
                 ] }),
@@ -287,7 +286,7 @@ function BuyCreditsModal() {
                     className: "w-full hidden lg:inline-flex",
                     children: [
                       isSubmitting && /* @__PURE__ */ jsx(IconLoader2, { className: "size-4 animate-spin" }),
-                      "Confirmar e pagar"
+                      translate("common.credits.buy.confirmAndPay")
                     ]
                   }
                 )
@@ -295,17 +294,17 @@ function BuyCreditsModal() {
               /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-4 p-4 border-t border-zinc-200 shrink-0 lg:hidden", children: [
                 /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-2", children: [
                   immediateChargeTotal !== null && immediateChargeTotal > 0 && /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
-                    /* @__PURE__ */ jsx("span", { className: "paragraph-xsmall-medium text-zinc-500", children: "Cobran\xE7a imediata" }),
+                    /* @__PURE__ */ jsx("span", { className: "paragraph-xsmall-medium text-zinc-500", children: translate("common.credits.buy.immediateCharge") }),
                     isCalculatePending ? /* @__PURE__ */ jsx(Skeleton, { className: "h-5 w-20" }) : /* @__PURE__ */ jsx("span", { className: "paragraph-small-semibold text-zinc-950", children: formatPrice(immediateChargeTotal) })
                   ] }),
                   /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
-                    /* @__PURE__ */ jsx("span", { className: "paragraph-small-medium text-zinc-500", children: "Valor total do plano" }),
+                    /* @__PURE__ */ jsx("span", { className: "paragraph-small-medium text-zinc-500", children: translate("common.credits.buy.totalPlanValue") }),
                     renderPriceDisplay()
                   ] })
                 ] }),
                 /* @__PURE__ */ jsxs(Button, { type: "submit", disabled: isConfirmDisabled, className: "w-full", children: [
                   isSubmitting && /* @__PURE__ */ jsx(IconLoader2, { className: "size-4 animate-spin" }),
-                  "Confirmar e pagar"
+                  translate("common.credits.buy.confirmAndPay")
                 ] })
               ] })
             ]