analytica-frontend-lib 1.1.52 → 1.1.54

package/dist/NotificationCard/index.js

@@ -24,7 +24,7 @@ __export(NotificationCard_exports, {
   default: () => NotificationCard_default
 });
 module.exports = __toCommonJS(NotificationCard_exports);
-var import_phosphor_react3 = require("phosphor-react");
+var import_phosphor_react4 = require("phosphor-react");
 var import_react6 = require("react");
 
 // src/utils/utils.ts
@@ -663,6 +663,52 @@ var IconButton_default = IconButton;
 // src/components/Modal/Modal.tsx
 var import_react4 = require("react");
 var import_phosphor_react2 = require("phosphor-react");
+
+// src/components/Modal/utils/videoUtils.ts
+var isYouTubeUrl = (url) => {
+  const youtubeRegex = /^(https?:\/\/)?((www|m|music)\.)?(youtube\.com|youtu\.be|youtube-nocookie\.com)\/.+/i;
+  return youtubeRegex.test(url);
+};
+var isValidYouTubeHost = (host) => {
+  if (host === "youtu.be") return "youtu.be";
+  const isValidYouTubeCom = host === "youtube.com" || host.endsWith(".youtube.com") && /^(www|m|music)\.youtube\.com$/.test(host);
+  if (isValidYouTubeCom) return "youtube";
+  const isValidNoCookie = host === "youtube-nocookie.com" || host.endsWith(".youtube-nocookie.com") && /^(www|m|music)\.youtube-nocookie\.com$/.test(host);
+  if (isValidNoCookie) return "nocookie";
+  return null;
+};
+var extractYoutuBeId = (pathname) => {
+  const firstSeg = pathname.split("/").filter(Boolean)[0];
+  return firstSeg || null;
+};
+var extractYouTubeId = (pathname, searchParams) => {
+  const parts = pathname.split("/").filter(Boolean);
+  const [first, second] = parts;
+  if (first === "embed" && second) return second;
+  if (first === "shorts" && second) return second;
+  if (first === "live" && second) return second;
+  const v = searchParams.get("v");
+  if (v) return v;
+  return null;
+};
+var getYouTubeVideoId = (url) => {
+  try {
+    const u = new URL(url);
+    const hostType = isValidYouTubeHost(u.hostname.toLowerCase());
+    if (!hostType) return null;
+    if (hostType === "youtu.be") {
+      return extractYoutuBeId(u.pathname);
+    }
+    return extractYouTubeId(u.pathname, u.searchParams);
+  } catch {
+    return null;
+  }
+};
+var getYouTubeEmbedUrl = (videoId) => {
+  return `https://www.youtube-nocookie.com/embed/${videoId}?autoplay=0&rel=0&modestbranding=1`;
+};
+
+// src/components/Modal/Modal.tsx
 var import_jsx_runtime5 = require("react/jsx-runtime");
 var SIZE_CLASSES2 = {
   xs: "max-w-[360px]",
@@ -678,11 +724,17 @@ var Modal = ({
   children,
   size = "md",
   className = "",
-  closeOnBackdropClick = true,
   closeOnEscape = true,
   footer,
-  hideCloseButton = false
+  hideCloseButton = false,
+  variant = "default",
+  description,
+  image,
+  imageAlt,
+  actionLink,
+  actionLabel
 }) => {
+  const titleId = (0, import_react4.useId)();
   (0, import_react4.useEffect)(() => {
     if (!isOpen || !closeOnEscape) return;
     const handleEscape = (event) => {
@@ -704,16 +756,6 @@ var Modal = ({
       document.body.style.overflow = originalOverflow;
     };
   }, [isOpen]);
-  const handleBackdropClick = (event) => {
-    if (closeOnBackdropClick && event.target === event.currentTarget) {
-      onClose();
-    }
-  };
-  const handleBackdropKeyDown = (event) => {
-    if (closeOnBackdropClick && (event.key === "Enter" || event.key === " ")) {
-      onClose();
-    }
-  };
   if (!isOpen) return null;
   const sizeClasses = SIZE_CLASSES2[size];
   const baseClasses = "bg-secondary-50 rounded-3xl shadow-hard-shadow-2 border border-border-100 w-full mx-4";
@@ -724,18 +766,105 @@ var Modal = ({
     dialogResetClasses,
     className
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
-    "div",
+  const normalizeUrl = (href) => /^https?:\/\//i.test(href) ? href : `https://${href}`;
+  const handleActionClick = () => {
+    if (actionLink) {
+      window.open(normalizeUrl(actionLink), "_blank", "noopener,noreferrer");
+    }
+  };
+  if (variant === "activity") {
+    return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "fixed inset-0 z-50 flex items-center justify-center bg-black/60 backdrop-blur-xs border-none p-0 m-0 w-full cursor-default", children: /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
+      "dialog",
+      {
+        className: modalClasses,
+        "aria-labelledby": titleId,
+        "aria-modal": "true",
+        open: true,
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "flex justify-end p-6 pb-0", children: !hideCloseButton && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+            "button",
+            {
+              onClick: onClose,
+              className: "p-1 text-text-500 hover:text-text-700 hover:bg-background-50 rounded-md transition-colors focus:outline-none focus:ring-2 focus:ring-indicator-info focus:ring-offset-2",
+              "aria-label": "Fechar modal",
+              children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_phosphor_react2.X, { size: 18 })
+            }
+          ) }),
+          /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "flex flex-col items-center px-6 pb-6 gap-5", children: [
+            image && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "flex justify-center", children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+              "img",
+              {
+                src: image,
+                alt: imageAlt ?? "",
+                className: "w-[122px] h-[122px] object-contain"
+              }
+            ) }),
+            /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+              "h2",
+              {
+                id: titleId,
+                className: "text-lg font-semibold text-text-950 text-center",
+                children: title
+              }
+            ),
+            description && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("p", { className: "text-sm font-normal text-text-400 text-center max-w-md leading-[21px]", children: description }),
+            actionLink && /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "w-full", children: [
+              (() => {
+                const normalized = normalizeUrl(actionLink);
+                const isYT = isYouTubeUrl(normalized);
+                if (!isYT) return null;
+                const id = getYouTubeVideoId(normalized);
+                if (!id) {
+                  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+                    Button_default,
+                    {
+                      variant: "solid",
+                      action: "primary",
+                      size: "large",
+                      className: "w-full",
+                      onClick: handleActionClick,
+                      children: actionLabel || "Iniciar Atividade"
+                    }
+                  );
+                }
+                return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+                  "iframe",
+                  {
+                    src: getYouTubeEmbedUrl(id),
+                    className: "w-full aspect-video rounded-lg",
+                    allowFullScreen: true,
+                    allow: "accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture",
+                    title: "V\xEDdeo YouTube"
+                  }
+                );
+              })(),
+              !isYouTubeUrl(normalizeUrl(actionLink)) && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+                Button_default,
+                {
+                  variant: "solid",
+                  action: "primary",
+                  size: "large",
+                  className: "w-full",
+                  onClick: handleActionClick,
+                  children: actionLabel || "Iniciar Atividade"
+                }
+              )
+            ] })
+          ] })
+        ]
+      }
+    ) });
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "fixed inset-0 z-50 flex items-center justify-center bg-black/60 backdrop-blur-xs border-none p-0 m-0 w-full cursor-default", children: /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
+    "dialog",
     {
-      className: "fixed inset-0 z-50 flex items-center justify-center bg-black/60 backdrop-blur-xs",
-      onClick: handleBackdropClick,
-      onKeyDown: handleBackdropKeyDown,
-      role: "button",
-      tabIndex: closeOnBackdropClick ? 0 : -1,
-      "aria-label": "Fechar modal clicando no fundo",
-      children: /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("dialog", { className: modalClasses, "aria-labelledby": "modal-title", open: true, children: [
+      className: modalClasses,
+      "aria-labelledby": titleId,
+      "aria-modal": "true",
+      open: true,
+      children: [
         /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "flex items-center justify-between px-6 py-6", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("h2", { id: "modal-title", className: "text-lg font-semibold text-text-950", children: title }),
+          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("h2", { id: titleId, className: "text-lg font-semibold text-text-950", children: title }),
           !hideCloseButton && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
             "button",
             {
@@ -746,11 +875,11 @@ var Modal = ({
             }
           )
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "px-6 pb-6", children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "text-text-500 font-normal text-sm leading-6", children }) }),
+        children && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "px-6 pb-6", children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "text-text-500 font-normal text-sm leading-6", children }) }),
         footer && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "flex justify-end gap-3 px-6 pb-6", children: footer })
-      ] })
+      ]
     }
-  );
+  ) });
 };
 var Modal_default = Modal;
 
@@ -805,6 +934,103 @@ var Text = ({
 };
 var Text_default = Text;
 
+// src/components/Badge/Badge.tsx
+var import_phosphor_react3 = require("phosphor-react");
+var import_jsx_runtime7 = require("react/jsx-runtime");
+var VARIANT_ACTION_CLASSES2 = {
+  solid: {
+    error: "bg-error-background text-error-700 focus-visible:outline-none",
+    warning: "bg-warning text-warning-800 focus-visible:outline-none",
+    success: "bg-success text-success-800 focus-visible:outline-none",
+    info: "bg-info text-info-800 focus-visible:outline-none",
+    muted: "bg-background-muted text-background-800 focus-visible:outline-none"
+  },
+  outlined: {
+    error: "bg-error text-error-700 border border-error-300 focus-visible:outline-none",
+    warning: "bg-warning text-warning-800 border border-warning-300 focus-visible:outline-none",
+    success: "bg-success text-success-800 border border-success-300 focus-visible:outline-none",
+    info: "bg-info text-info-800 border border-info-300 focus-visible:outline-none",
+    muted: "bg-background-muted text-background-800 border border-border-300 focus-visible:outline-none"
+  },
+  exams: {
+    exam1: "bg-exam-1 text-info-700 focus-visible:outline-none",
+    exam2: "bg-exam-2 text-typography-1 focus-visible:outline-none",
+    exam3: "bg-exam-3 text-typography-2 focus-visible:outline-none",
+    exam4: "bg-exam-4 text-success-700 focus-visible:outline-none"
+  },
+  examsOutlined: {
+    exam1: "bg-exam-1 text-info-700 border border-info-700 focus-visible:outline-none",
+    exam2: "bg-exam-2 text-typography-1 border border-typography-1 focus-visible:outline-none",
+    exam3: "bg-exam-3 text-typography-2 border border-typography-2 focus-visible:outline-none",
+    exam4: "bg-exam-4 text-success-700 border border-success-700 focus-visible:outline-none"
+  },
+  resultStatus: {
+    negative: "bg-error text-error-800 focus-visible:outline-none",
+    positive: "bg-success text-success-800 focus-visible:outline-none"
+  },
+  notification: "text-primary"
+};
+var SIZE_CLASSES3 = {
+  small: "text-2xs px-2 py-1",
+  medium: "text-xs px-2 py-1",
+  large: "text-sm px-2 py-1"
+};
+var SIZE_CLASSES_ICON = {
+  small: "size-3",
+  medium: "size-3.5",
+  large: "size-4"
+};
+var Badge = ({
+  children,
+  iconLeft,
+  iconRight,
+  size = "medium",
+  variant = "solid",
+  action = "error",
+  className = "",
+  notificationActive = false,
+  ...props
+}) => {
+  const sizeClasses = SIZE_CLASSES3[size];
+  const sizeClassesIcon = SIZE_CLASSES_ICON[size];
+  const variantActionMap = VARIANT_ACTION_CLASSES2[variant] || {};
+  const variantClasses = typeof variantActionMap === "string" ? variantActionMap : variantActionMap[action] ?? variantActionMap.muted ?? "";
+  const baseClasses = "inline-flex items-center justify-center rounded-xs font-normal gap-1 relative";
+  const baseClassesIcon = "flex items-center";
+  if (variant === "notification") {
+    return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
+      "div",
+      {
+        className: cn(baseClasses, variantClasses, sizeClasses, className),
+        ...props,
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_phosphor_react3.Bell, { size: 24, className: "text-current", "aria-hidden": "true" }),
+          notificationActive && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+            "span",
+            {
+              "data-testid": "notification-dot",
+              className: "absolute top-[5px] right-[10px] block h-2 w-2 rounded-full bg-indicator-error ring-2 ring-white"
+            }
+          )
+        ]
+      }
+    );
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
+    "div",
+    {
+      className: cn(baseClasses, variantClasses, sizeClasses, className),
+      ...props,
+      children: [
+        iconLeft && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: cn(baseClassesIcon, sizeClassesIcon), children: iconLeft }),
+        children,
+        iconRight && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: cn(baseClassesIcon, sizeClassesIcon), children: iconRight })
+      ]
+    }
+  );
+};
+var Badge_default = Badge;
+
 // src/hooks/useMobile.ts
 var import_react5 = require("react");
 var MOBILE_WIDTH = 500;
@@ -895,14 +1121,14 @@ var formatTimeAgo = (date) => {
 };
 
 // src/components/NotificationCard/NotificationCard.tsx
-var import_jsx_runtime7 = require("react/jsx-runtime");
+var import_jsx_runtime8 = require("react/jsx-runtime");
 var NotificationEmpty = ({
   emptyStateImage,
   emptyStateTitle = "Nenhuma notifica\xE7\xE3o no momento",
   emptyStateDescription = "Voc\xEA est\xE1 em dia com todas as novidades. Volte depois para conferir atualiza\xE7\xF5es!"
 }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "flex flex-col items-center justify-center gap-4 p-6 w-full", children: [
-    emptyStateImage && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "w-20 h-20 flex items-center justify-center", children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "flex flex-col items-center justify-center gap-4 p-6 w-full", children: [
+    emptyStateImage && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "w-20 h-20 flex items-center justify-center", children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
       "img",
       {
         src: emptyStateImage,
@@ -912,20 +1138,27 @@ var NotificationEmpty = ({
         className: "object-contain"
       }
     ) }),
-    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("h3", { className: "text-xl font-semibold text-text-950 text-center leading-[23px]", children: emptyStateTitle }),
-    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("p", { className: "text-sm font-normal text-text-400 text-center max-w-[316px] leading-[21px]", children: emptyStateDescription })
+    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("h3", { className: "text-xl font-semibold text-text-950 text-center leading-[23px]", children: emptyStateTitle }),
+    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("p", { className: "text-sm font-normal text-text-400 text-center max-w-[316px] leading-[21px]", children: emptyStateDescription })
   ] });
 };
 var NotificationHeader = ({
   unreadCount,
   variant = "modal"
 }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "flex items-center justify-between", children: [
-    variant === "modal" ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(Text_default, { size: "sm", weight: "bold", className: "text-text-950", children: "Notifica\xE7\xF5es" }) : /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("h3", { className: "text-sm font-semibold text-text-950", children: "Notifica\xE7\xF5es" }),
-    unreadCount > 0 && /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("span", { className: "px-2 py-1 bg-info-100 text-info-700 text-xs rounded-full", children: [
-      unreadCount,
-      " n\xE3o lidas"
-    ] })
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "flex items-center justify-between gap-2", children: [
+    variant === "modal" ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(Text_default, { size: "sm", weight: "bold", className: "text-text-950", children: "Notifica\xE7\xF5es" }) : /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("h3", { className: "text-sm font-semibold text-text-950", children: "Notifica\xE7\xF5es" }),
+    unreadCount > 0 && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+      Badge_default,
+      {
+        variant: "solid",
+        action: "info",
+        size: "small",
+        iconLeft: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_phosphor_react4.Bell, { size: 12, "aria-hidden": "true", focusable: "false" }),
+        className: "border-0",
+        children: unreadCount === 1 ? "1 n\xE3o lida" : `${unreadCount} n\xE3o lidas`
+      }
+    )
   ] });
 };
 var SingleNotificationCard = ({
@@ -957,7 +1190,7 @@ var SingleNotificationCard = ({
       onNavigate();
     }
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
     "div",
     {
       className: cn(
@@ -966,20 +1199,20 @@ var SingleNotificationCard = ({
         className
       ),
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "flex items-center gap-2 w-full", children: [
-          !isRead && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "w-[7px] h-[7px] bg-info-300 rounded-full flex-shrink-0" }),
-          /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("h3", { className: "font-bold text-sm leading-4 text-text-950 flex-grow", children: title }),
-          /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(DropdownMenu_default, { children: [
-            /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "flex items-center gap-2 w-full", children: [
+          !isRead && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "w-[7px] h-[7px] bg-info-300 rounded-full flex-shrink-0" }),
+          /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("h3", { className: "font-bold text-sm leading-4 text-text-950 flex-grow", children: title }),
+          /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(DropdownMenu_default, { children: [
+            /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
               DropdownMenuTrigger,
               {
                 className: "flex-shrink-0 inline-flex items-center justify-center font-medium bg-transparent text-text-950 cursor-pointer hover:bg-info-50 w-6 h-6 rounded-lg",
                 "aria-label": "Menu de a\xE7\xF5es",
-                children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_phosphor_react3.DotsThreeVertical, { size: 24 })
+                children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_phosphor_react4.DotsThreeVertical, { size: 24 })
               }
             ),
-            /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(DropdownMenuContent, { align: "end", className: "min-w-[160px]", children: [
-              !isRead && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(DropdownMenuContent, { align: "end", className: "min-w-[160px]", children: [
+              !isRead && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
                 DropdownMenuItem,
                 {
                   onClick: handleMarkAsRead,
@@ -987,14 +1220,14 @@ var SingleNotificationCard = ({
                   children: "Marcar como lida"
                 }
               ),
-              /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(DropdownMenuItem, { onClick: handleDelete, className: "text-error-600", children: "Deletar" })
+              /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(DropdownMenuItem, { onClick: handleDelete, className: "text-error-600", children: "Deletar" })
             ] })
           ] })
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("p", { className: "text-sm leading-[21px] text-text-800 w-full", children: message }),
-        /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "flex items-center justify-between w-full", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: "text-sm font-medium text-text-400", children: time }),
-          onNavigate && actionLabel && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("p", { className: "text-sm leading-[21px] text-text-800 w-full", children: message }),
+        /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "flex items-center justify-between w-full", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { className: "text-sm font-medium text-text-400", children: time }),
+          onNavigate && actionLabel && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
             "button",
             {
               type: "button",
@@ -1021,9 +1254,9 @@ var NotificationList = ({
   className
 }) => {
   if (error) {
-    return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "flex flex-col items-center gap-4 p-6 w-full", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("p", { className: "text-sm text-error-600", children: error }),
-      onRetry && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "flex flex-col items-center gap-4 p-6 w-full", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("p", { className: "text-sm text-error-600", children: error }),
+      onRetry && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
         "button",
         {
           type: "button",
@@ -1035,8 +1268,8 @@ var NotificationList = ({
     ] });
   }
   if (loading) {
-    return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "flex flex-col gap-0 w-full", children: ["skeleton-first", "skeleton-second", "skeleton-third"].map(
-      (skeletonId) => /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "flex flex-col gap-0 w-full", children: ["skeleton-first", "skeleton-second", "skeleton-third"].map(
+      (skeletonId) => /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
         SkeletonCard,
         {
           className: "p-4 border-b border-border-200"
@@ -1046,11 +1279,11 @@ var NotificationList = ({
     ) });
   }
   if (!groupedNotifications || groupedNotifications.length === 0) {
-    return renderEmpty ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "w-full", children: renderEmpty() }) : /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(NotificationEmpty, {});
+    return renderEmpty ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "w-full", children: renderEmpty() }) : /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(NotificationEmpty, {});
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: cn("flex flex-col gap-0 w-full", className), children: groupedNotifications.map((group, idx) => /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "flex flex-col", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "flex items-end px-4 py-6 pb-4", children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("h4", { className: "text-lg font-bold text-text-500 flex-grow", children: group.label }) }),
-    group.notifications.map((notification) => /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: cn("flex flex-col gap-0 w-full", className), children: groupedNotifications.map((group, idx) => /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "flex flex-col", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "flex items-end px-4 py-6 pb-4", children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("h4", { className: "text-lg font-bold text-text-500 flex-grow", children: group.label }) }),
+    group.notifications.map((notification) => /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
       SingleNotificationCard,
       {
         title: notification.title,
@@ -1108,7 +1341,7 @@ var NotificationCenter = ({
     onCleanup?.();
     onNavigateById?.(entityType, entityId);
   };
-  const renderEmptyState = () => /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+  const renderEmptyState = () => /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
     NotificationEmpty,
     {
       emptyStateImage,
@@ -1117,17 +1350,17 @@ var NotificationCenter = ({
     }
   );
   if (isMobile) {
-    return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(import_jsx_runtime7.Fragment, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(import_jsx_runtime8.Fragment, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
         IconButton_default,
         {
           active: isModalOpen,
           onClick: handleMobileClick,
-          icon: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_phosphor_react3.Bell, { size: 24, className: "text-primary" }),
+          icon: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_phosphor_react4.Bell, { size: 24, className: "text-primary" }),
           className
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
         Modal_default,
         {
           isOpen: isModalOpen,
@@ -1135,22 +1368,21 @@ var NotificationCenter = ({
           title: "Notifica\xE7\xF5es",
           size: "md",
           hideCloseButton: false,
-          closeOnBackdropClick: true,
           closeOnEscape: true,
-          children: /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "flex flex-col h-full max-h-[80vh]", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "px-0 pb-3 border-b border-border-200", children: /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "flex items-center justify-between", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(NotificationHeader, { unreadCount, variant: "modal" }),
-              unreadCount > 0 && onMarkAllAsRead && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+          children: /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "flex flex-col h-full max-h-[80vh]", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "px-0 pb-3 border-b border-border-200", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(NotificationHeader, { unreadCount, variant: "modal" }),
+              unreadCount > 0 && onMarkAllAsRead && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
                 "button",
                 {
                   type: "button",
                   onClick: onMarkAllAsRead,
-                  className: "text-sm font-medium text-info-600 hover:text-info-700 cursor-pointer",
+                  className: "text-sm font-medium text-info-600 hover:text-info-700 cursor-pointer mt-2",
                   children: "Marcar todas como lidas"
                 }
               )
-            ] }) }),
-            /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "flex-1 overflow-y-auto", children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+            ] }),
+            /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "flex-1 overflow-y-auto", children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
               NotificationList,
               {
                 groupedNotifications,
@@ -1173,14 +1405,14 @@ var NotificationCenter = ({
       )
     ] });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(DropdownMenu_default, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(DropdownMenuTrigger, { className: "text-primary cursor-pointer", children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(DropdownMenu_default, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(DropdownMenuTrigger, { className: "text-primary cursor-pointer", children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
       IconButton_default,
       {
         active: isActive,
         onClick: handleDesktopClick,
-        icon: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
-          import_phosphor_react3.Bell,
+        icon: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+          import_phosphor_react4.Bell,
           {
             size: 24,
             className: isActive ? "text-primary-950" : "text-primary"
@@ -1189,32 +1421,26 @@ var NotificationCenter = ({
         className
       }
     ) }),
-    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
       DropdownMenuContent,
       {
         className: "min-w-[320px] max-w-[400px] max-h-[500px] overflow-hidden",
         side: "bottom",
         align: "end",
-        children: /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "flex flex-col", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "px-4 py-3 border-b border-border-200", children: /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "flex items-center justify-between", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
-              NotificationHeader,
-              {
-                unreadCount,
-                variant: "dropdown"
-              }
-            ),
-            unreadCount > 0 && onMarkAllAsRead && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+        children: /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "flex flex-col", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "px-4 py-3 border-b border-border-200", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(NotificationHeader, { unreadCount, variant: "dropdown" }),
+            unreadCount > 0 && onMarkAllAsRead && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
               "button",
               {
                 type: "button",
                 onClick: onMarkAllAsRead,
-                className: "text-sm font-medium text-info-600 hover:text-info-700 cursor-pointer",
+                className: "text-sm font-medium text-info-600 hover:text-info-700 cursor-pointer mt-2",
                 children: "Marcar todas como lidas"
               }
             )
-          ] }) }),
-          /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "max-h-[350px] overflow-y-auto", children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "max-h-[350px] overflow-y-auto", children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
             NotificationList,
             {
               groupedNotifications,
@@ -1236,7 +1462,7 @@ var NotificationCenter = ({
 var NotificationCard = (props) => {
   switch (props.mode) {
     case "single":
-      return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+      return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
         SingleNotificationCard,
         {
           title: props.title,
@@ -1251,7 +1477,7 @@ var NotificationCard = (props) => {
         }
       );
     case "list":
-      return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+      return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
         NotificationList,
         {
           groupedNotifications: props.groupedNotifications ?? (props.notifications ? [
@@ -1272,9 +1498,9 @@ var NotificationCard = (props) => {
         }
       );
     case "center":
-      return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(NotificationCenter, { ...props });
+      return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(NotificationCenter, { ...props });
     default:
-      return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "flex flex-col items-center gap-4 p-6 w-full", children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("p", { className: "text-sm text-text-600", children: "Modo de notifica\xE7\xE3o n\xE3o reconhecido" }) });
+      return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "flex flex-col items-center gap-4 p-6 w-full", children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("p", { className: "text-sm text-text-600", children: "Modo de notifica\xE7\xE3o n\xE3o reconhecido" }) });
   }
 };
 var LegacyNotificationCard = (props) => {
@@ -1283,10 +1509,10 @@ var LegacyNotificationCard = (props) => {
       mode: "center",
       ...props
     };
-    return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(NotificationCenter, { ...centerProps });
+    return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(NotificationCenter, { ...centerProps });
   }
   if (props.groupedNotifications !== void 0 || props.notifications !== void 0 || props.loading || props.error) {
-    return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
       NotificationList,
       {
         groupedNotifications: props.groupedNotifications ?? (props.notifications ? [
@@ -1323,7 +1549,7 @@ var LegacyNotificationCard = (props) => {
       emptyStateTitle: props.emptyStateTitle,
       emptyStateDescription: props.emptyStateDescription
     };
-    return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
       SingleNotificationCard,
       {
         title: singleProps.title,
@@ -1338,7 +1564,7 @@ var LegacyNotificationCard = (props) => {
       }
     );
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "flex flex-col items-center gap-4 p-6 w-full", children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("p", { className: "text-sm text-text-600", children: "Nenhuma notifica\xE7\xE3o configurada" }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "flex flex-col items-center gap-4 p-6 w-full", children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("p", { className: "text-sm text-text-600", children: "Nenhuma notifica\xE7\xE3o configurada" }) });
 };
 var NotificationCard_default = NotificationCard;
 // Annotate the CommonJS export names for ESM import in node: