analytica-frontend-lib 1.2.21 → 1.2.22

package/dist/AlertManagerView/index.js

@@ -408,7 +408,7 @@ var Divider = ({
 var Divider_default = Divider;
 
 // src/components/Table/Table.tsx
-var import_react2 = require("react");
+var import_react3 = require("react");
 var import_phosphor_react2 = require("phosphor-react");
 
 // src/components/NoSearchResult/NoSearchResult.tsx
@@ -440,123 +440,311 @@ var NoSearchResult = ({ image, title, description }) => {
 };
 var NoSearchResult_default = NoSearchResult;
 
-// src/components/Table/Table.tsx
+// src/components/Skeleton/Skeleton.tsx
+var import_react2 = require("react");
 var import_jsx_runtime6 = require("react/jsx-runtime");
-var Table = (0, import_react2.forwardRef)(
+var SKELETON_ANIMATION_CLASSES = {
+  pulse: "animate-pulse",
+  none: ""
+};
+var SKELETON_VARIANT_CLASSES = {
+  text: "h-4 bg-background-200 rounded",
+  circular: "bg-background-200 rounded-full",
+  rectangular: "bg-background-200",
+  rounded: "bg-background-200 rounded-lg"
+};
+var SPACING_CLASSES = {
+  none: "",
+  small: "space-y-1",
+  medium: "space-y-2",
+  large: "space-y-3"
+};
+var Skeleton = (0, import_react2.forwardRef)(
   ({
-    variant = "default",
-    className,
+    variant = "text",
+    width,
+    height,
+    animation = "pulse",
+    lines = 1,
+    spacing = "none",
+    className = "",
     children,
-    searchTerm,
-    noSearchResultImage,
-    noSearchResultTitle = "Nenhum resultado encontrado",
-    noSearchResultDescription = "N\xE3o encontramos nenhum resultado com esse nome. Tente revisar a busca ou usar outra palavra-chave.",
-    emptyStateMessage = "Nenhum dado dispon\xEDvel no momento.",
-    emptyStateButtonText = "Adicionar item",
-    onEmptyStateButtonClick,
     ...props
   }, ref) => {
-    const isTableBodyEmpty = (0, import_react2.useMemo)(() => {
-      let foundBody = false;
-      let empty = true;
-      import_react2.Children.forEach(children, (child) => {
-        if ((0, import_react2.isValidElement)(child) && child.type === TableBody) {
-          foundBody = true;
-          const bodyProps = child.props;
-          if (import_react2.Children.count(bodyProps?.children) > 0) {
-            empty = false;
-          }
-        }
-      });
-      return foundBody ? empty : false;
-    }, [children]);
-    const columnCount = (0, import_react2.useMemo)(() => {
-      let count = 0;
-      import_react2.Children.forEach(children, (child) => {
-        if ((0, import_react2.isValidElement)(child) && child.type === TableHeader) {
-          const headerProps = child.props;
-          import_react2.Children.forEach(headerProps.children, (row) => {
-            if ((0, import_react2.isValidElement)(row) && row.type === TableRow) {
-              const rowProps = row.props;
-              count = import_react2.Children.count(rowProps.children);
-            }
-          });
-        }
-      });
-      return count || 1;
-    }, [children]);
-    const hasSearchTerm = searchTerm && searchTerm.trim() !== "";
-    const showNoSearchResult = hasSearchTerm && isTableBodyEmpty;
-    const showEmptyState = !hasSearchTerm && isTableBodyEmpty;
-    if (showNoSearchResult) {
-      return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
+    const animationClass = SKELETON_ANIMATION_CLASSES[animation];
+    const variantClass = SKELETON_VARIANT_CLASSES[variant];
+    const spacingClass = SPACING_CLASSES[spacing];
+    const style = {
+      width: typeof width === "number" ? `${width}px` : width,
+      height: typeof height === "number" ? `${height}px` : height
+    };
+    if (variant === "text" && lines > 1) {
+      return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
         "div",
         {
-          className: cn(
-            "relative w-full overflow-x-auto",
-            variant === "default" && "border border-border-200 rounded-xl"
-          ),
-          children: [
-            /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
-              "table",
-              {
-                ref,
-                className: cn(
-                  "analytica-table w-full caption-bottom text-sm border-separate border-spacing-0",
-                  className
-                ),
-                ...props,
-                children: import_react2.Children.map(children, (child) => {
-                  if ((0, import_react2.isValidElement)(child) && (child.type === TableCaption || child.type === TableHeader)) {
-                    return child;
-                  }
-                  return null;
-                })
-              }
-            ),
-            /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: "py-8 flex justify-center", children: noSearchResultImage ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
-              NoSearchResult_default,
-              {
-                image: noSearchResultImage,
-                title: noSearchResultTitle,
-                description: noSearchResultDescription
-              }
-            ) : /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "text-center", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("p", { className: "text-text-600 text-lg font-semibold mb-2", children: noSearchResultTitle }),
-              /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("p", { className: "text-text-500 text-sm", children: noSearchResultDescription })
-            ] }) })
-          ]
+          ref,
+          className: cn("flex flex-col", spacingClass, className),
+          ...props,
+          children: Array.from({ length: lines }, (_, index) => /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+            "div",
+            {
+              className: cn(variantClass, animationClass),
+              style: index === lines - 1 ? { width: "60%" } : void 0
+            },
+            index
+          ))
         }
       );
     }
-    const modifiedChildren = import_react2.Children.map(children, (child) => {
-      if ((0, import_react2.isValidElement)(child) && child.type === TableBody && showEmptyState) {
-        return (0, import_react2.cloneElement)(child, {
-          children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(TableRow, { variant, children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(TableCell, { colSpan: columnCount, children: /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "flex flex-col items-center justify-center py-12 gap-4", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("p", { className: "text-text-600 text-base font-normal", children: emptyStateMessage }),
-            onEmptyStateButtonClick && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
-              Button_default,
-              {
-                variant: "solid",
-                action: "primary",
-                size: "medium",
-                onClick: onEmptyStateButtonClick,
-                children: emptyStateButtonText
-              }
-            )
-          ] }) }) })
-        });
+    return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+      "div",
+      {
+        ref,
+        className: cn(variantClass, animationClass, className),
+        style,
+        ...props,
+        children
       }
+    );
+  }
+);
+var SkeletonText = (0, import_react2.forwardRef)(
+  (props, ref) => /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(Skeleton, { ref, variant: "text", ...props })
+);
+var SkeletonCircle = (0, import_react2.forwardRef)((props, ref) => /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(Skeleton, { ref, variant: "circular", ...props }));
+var SkeletonRectangle = (0, import_react2.forwardRef)((props, ref) => /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(Skeleton, { ref, variant: "rectangular", ...props }));
+var SkeletonRounded = (0, import_react2.forwardRef)((props, ref) => /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(Skeleton, { ref, variant: "rounded", ...props }));
+var SkeletonCard = (0, import_react2.forwardRef)(
+  ({
+    showAvatar = true,
+    showTitle = true,
+    showDescription = true,
+    showActions = true,
+    lines = 2,
+    className = "",
+    ...props
+  }, ref) => {
+    return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
+      "div",
+      {
+        ref,
+        className: cn(
+          "w-full p-4 bg-background border border-border-200 rounded-lg",
+          className
+        ),
+        ...props,
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "flex items-start space-x-3", children: [
+            showAvatar && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(SkeletonCircle, { width: 40, height: 40 }),
+            /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "flex-1 space-y-2", children: [
+              showTitle && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(SkeletonText, { width: "60%", height: 20 }),
+              showDescription && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(SkeletonText, { lines, spacing: "small" })
+            ] })
+          ] }),
+          showActions && /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "flex justify-end space-x-2 mt-4", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(SkeletonRectangle, { width: 80, height: 32 }),
+            /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(SkeletonRectangle, { width: 80, height: 32 })
+          ] })
+        ]
+      }
+    );
+  }
+);
+var SkeletonList = (0, import_react2.forwardRef)(
+  ({
+    items = 3,
+    showAvatar = true,
+    showTitle = true,
+    showDescription = true,
+    lines = 1,
+    className = "",
+    ...props
+  }, ref) => {
+    return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { ref, className: cn("space-y-3", className), ...props, children: Array.from({ length: items }, (_, index) => /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "flex items-start space-x-3 p-3", children: [
+      showAvatar && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(SkeletonCircle, { width: 32, height: 32 }),
+      /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "flex-1 space-y-2", children: [
+        showTitle && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(SkeletonText, { width: "40%", height: 16 }),
+        showDescription && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(SkeletonText, { lines, spacing: "small" })
+      ] })
+    ] }, index)) });
+  }
+);
+var SkeletonTable = (0, import_react2.forwardRef)(
+  ({ rows = 5, columns = 4, showHeader = true, className = "", ...props }, ref) => {
+    return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { ref, className: cn("w-full", className), ...props, children: [
+      showHeader && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: "flex space-x-2 mb-3", children: Array.from({ length: columns }, (_, index) => /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+        SkeletonText,
+        {
+          width: `${100 / columns}%`,
+          height: 20
+        },
+        index
+      )) }),
+      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: "space-y-2", children: Array.from({ length: rows }, (_, rowIndex) => /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: "flex space-x-2", children: Array.from({ length: columns }, (_2, colIndex) => /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+        SkeletonText,
+        {
+          width: `${100 / columns}%`,
+          height: 16
+        },
+        colIndex
+      )) }, rowIndex)) })
+    ] });
+  }
+);
+
+// src/components/Table/Table.tsx
+var import_jsx_runtime7 = require("react/jsx-runtime");
+var renderHeaderElements = (children) => {
+  return import_react3.Children.map(children, (child) => {
+    if ((0, import_react3.isValidElement)(child) && (child.type === TableCaption || child.type === TableHeader)) {
       return child;
-    });
-    return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+    }
+    return null;
+  });
+};
+var getNoSearchResultContent = (config, defaultTitle, defaultDescription) => {
+  if (config.component) {
+    return config.component;
+  }
+  if (config.image) {
+    return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+      NoSearchResult_default,
+      {
+        image: config.image,
+        title: config.title || defaultTitle,
+        description: config.description || defaultDescription
+      }
+    );
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "text-center", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("p", { className: "text-text-600 text-lg font-semibold mb-2", children: config.title || defaultTitle }),
+    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("p", { className: "text-text-500 text-sm", children: config.description || defaultDescription })
+  ] });
+};
+var getEmptyStateContent = (config, defaultMessage, defaultButtonText, onButtonClick) => {
+  if (config?.component) {
+    return config.component;
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "flex flex-col items-center justify-center gap-4", children: [
+    config?.image && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+      "img",
+      {
+        src: config.image,
+        alt: "Empty state",
+        className: "w-auto h-auto max-w-full"
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("p", { className: "text-text-600 text-base font-normal", children: config?.message || defaultMessage }),
+    (config?.onButtonClick || onButtonClick) && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+      Button_default,
+      {
+        variant: "solid",
+        action: "primary",
+        size: "medium",
+        onClick: config?.onButtonClick || onButtonClick,
+        children: config?.buttonText || defaultButtonText
+      }
+    )
+  ] });
+};
+var renderTableWrapper = (variant, tableRef, className, children, stateContent, tableProps) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
+    "div",
+    {
+      className: cn(
+        "relative w-full overflow-x-auto",
+        variant === "default" && "border border-border-200 rounded-xl"
+      ),
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+          "table",
+          {
+            ref: tableRef,
+            className: cn(
+              "analytica-table w-full caption-bottom text-sm border-separate border-spacing-0",
+              className
+            ),
+            ...tableProps,
+            children: renderHeaderElements(children)
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "py-8 flex justify-center", children: stateContent })
+      ]
+    }
+  );
+};
+var Table = (0, import_react3.forwardRef)(
+  ({
+    variant = "default",
+    className,
+    children,
+    showLoading = false,
+    loadingState,
+    showNoSearchResult = false,
+    noSearchResultState,
+    showEmpty = false,
+    emptyState,
+    ...props
+  }, ref) => {
+    const defaultNoSearchResultState = {
+      title: "Nenhum resultado encontrado",
+      description: "N\xE3o encontramos nenhum resultado com esse nome. Tente revisar a busca ou usar outra palavra-chave."
+    };
+    const defaultEmptyState = {
+      message: "Nenhum dado dispon\xEDvel no momento.",
+      buttonText: "Adicionar item"
+    };
+    const finalNoSearchResultState = noSearchResultState || defaultNoSearchResultState;
+    const finalEmptyState = emptyState || defaultEmptyState;
+    if (showLoading) {
+      const loadingContent = loadingState?.component || /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(SkeletonTable, { rows: 5, columns: 4, showHeader: false });
+      return renderTableWrapper(
+        variant,
+        ref,
+        className,
+        children,
+        loadingContent,
+        props
+      );
+    }
+    if (showNoSearchResult) {
+      const noSearchContent = getNoSearchResultContent(
+        finalNoSearchResultState,
+        defaultNoSearchResultState.title || "",
+        defaultNoSearchResultState.description || ""
+      );
+      return renderTableWrapper(
+        variant,
+        ref,
+        className,
+        children,
+        noSearchContent,
+        props
+      );
+    }
+    if (showEmpty) {
+      const emptyContent = getEmptyStateContent(
+        finalEmptyState,
+        defaultEmptyState.message || "Nenhum dado dispon\xEDvel no momento.",
+        defaultEmptyState.buttonText || "Adicionar item"
+      );
+      return renderTableWrapper(
+        variant,
+        ref,
+        className,
+        children,
+        emptyContent,
+        props
+      );
+    }
+    return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
       "div",
       {
         className: cn(
           "relative w-full overflow-x-auto",
           variant === "default" && "border border-border-200 rounded-xl"
         ),
-        children: /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
+        children: /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
           "table",
           {
             ref,
@@ -568,10 +756,10 @@ var Table = (0, import_react2.forwardRef)(
             ),
             ...props,
             children: [
-              !import_react2.Children.toArray(children).some(
-                (child) => (0, import_react2.isValidElement)(child) && child.type === TableCaption
-              ) && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("caption", { className: "sr-only", children: "My Table" }),
-              modifiedChildren
+              !import_react3.Children.toArray(children).some(
+                (child) => (0, import_react3.isValidElement)(child) && child.type === TableCaption
+              ) && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("caption", { className: "sr-only", children: "My Table" }),
+              children
             ]
           }
         )
@@ -580,7 +768,7 @@ var Table = (0, import_react2.forwardRef)(
   }
 );
 Table.displayName = "Table";
-var TableHeader = (0, import_react2.forwardRef)(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+var TableHeader = (0, import_react3.forwardRef)(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
   "thead",
   {
     ref,
@@ -589,8 +777,8 @@ var TableHeader = (0, import_react2.forwardRef)(({ className, ...props }, ref) =
   }
 ));
 TableHeader.displayName = "TableHeader";
-var TableBody = (0, import_react2.forwardRef)(
-  ({ className, variant = "default", ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+var TableBody = (0, import_react3.forwardRef)(
+  ({ className, variant = "default", ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
     "tbody",
     {
       ref,
@@ -604,8 +792,8 @@ var TableBody = (0, import_react2.forwardRef)(
   )
 );
 TableBody.displayName = "TableBody";
-var TableFooter = (0, import_react2.forwardRef)(
-  ({ variant = "default", className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+var TableFooter = (0, import_react3.forwardRef)(
+  ({ variant = "default", className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
     "tfoot",
     {
       ref,
@@ -641,7 +829,7 @@ var VARIANT_STATES_ROW = {
     borderless: "bg-background-50 opacity-50 cursor-not-allowed"
   }
 };
-var TableRow = (0, import_react2.forwardRef)(
+var TableRow = (0, import_react3.forwardRef)(
   ({
     variant = "default",
     state = "default",
@@ -649,7 +837,7 @@ var TableRow = (0, import_react2.forwardRef)(
     className,
     ...props
   }, ref) => {
-    return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
       "tr",
       {
         ref,
@@ -667,7 +855,7 @@ var TableRow = (0, import_react2.forwardRef)(
   }
 );
 TableRow.displayName = "TableRow";
-var TableHead = (0, import_react2.forwardRef)(
+var TableHead = (0, import_react3.forwardRef)(
   ({
     className,
     sortable = true,
@@ -681,7 +869,7 @@ var TableHead = (0, import_react2.forwardRef)(
         onSort();
       }
     };
-    return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
       "th",
       {
         ref,
@@ -692,11 +880,11 @@ var TableHead = (0, import_react2.forwardRef)(
         ),
         onClick: handleClick,
         ...props,
-        children: /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "flex items-center gap-2", children: [
+        children: /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "flex items-center gap-2", children: [
           children,
-          sortable && /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "flex flex-col", children: [
-            sortDirection === "asc" && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_phosphor_react2.CaretUp, { size: 16, weight: "fill", className: "text-text-800" }),
-            sortDirection === "desc" && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_phosphor_react2.CaretDown, { size: 16, weight: "fill", className: "text-text-800" })
+          sortable && /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "flex flex-col", children: [
+            sortDirection === "asc" && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_phosphor_react2.CaretUp, { size: 16, weight: "fill", className: "text-text-800" }),
+            sortDirection === "desc" && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_phosphor_react2.CaretDown, { size: 16, weight: "fill", className: "text-text-800" })
           ] })
         ] })
       }
@@ -704,7 +892,7 @@ var TableHead = (0, import_react2.forwardRef)(
   }
 );
 TableHead.displayName = "TableHead";
-var TableCell = (0, import_react2.forwardRef)(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+var TableCell = (0, import_react3.forwardRef)(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
   "td",
   {
     ref,
@@ -716,7 +904,7 @@ var TableCell = (0, import_react2.forwardRef)(({ className, ...props }, ref) =>
   }
 ));
 TableCell.displayName = "TableCell";
-var TableCaption = (0, import_react2.forwardRef)(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+var TableCaption = (0, import_react3.forwardRef)(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
   "caption",
   {
     ref,
@@ -732,7 +920,7 @@ var Table_default = Table;
 
 // src/components/Badge/Badge.tsx
 var import_phosphor_react3 = require("phosphor-react");
-var import_jsx_runtime7 = require("react/jsx-runtime");
+var import_jsx_runtime8 = require("react/jsx-runtime");
 var VARIANT_ACTION_CLASSES2 = {
   solid: {
     error: "bg-error-background text-error-700 focus-visible:outline-none",
@@ -794,14 +982,14 @@ var Badge = ({
   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)(
+    return /* @__PURE__ */ (0, import_jsx_runtime8.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)(
+          /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_phosphor_react3.Bell, { size: 24, className: "text-current", "aria-hidden": "true" }),
+          notificationActive && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
             "span",
             {
               "data-testid": "notification-dot",
@@ -812,15 +1000,15 @@ var Badge = ({
       }
     );
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
     "div",
     {
       className: cn(baseClasses, variantClasses, sizeClasses, className),
       ...props,
       children: [
-        iconLeft && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: cn(baseClassesIcon, sizeClassesIcon), children: iconLeft }),
+        iconLeft && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { className: cn(baseClassesIcon, sizeClassesIcon), children: iconLeft }),
         children,
-        iconRight && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: cn(baseClassesIcon, sizeClassesIcon), children: iconRight })
+        iconRight && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { className: cn(baseClassesIcon, sizeClassesIcon), children: iconRight })
       ]
     }
   );
@@ -829,7 +1017,7 @@ var Badge_default = Badge;
 
 // src/components/AlertManagerView/AlertsManagerView.tsx
 var import_phosphor_react4 = require("phosphor-react");
-var import_jsx_runtime8 = require("react/jsx-runtime");
+var import_jsx_runtime9 = require("react/jsx-runtime");
 var AlertsManagerView = ({
   alertData,
   isOpen = false,
@@ -858,7 +1046,7 @@ var AlertsManagerView = ({
       year: "numeric"
     });
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
     Modal_default,
     {
       isOpen,
@@ -866,59 +1054,59 @@ var AlertsManagerView = ({
       title: alertData.title,
       size: "md",
       contentClassName: "p-0",
-      children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "flex flex-col h-[calc(100vh-8rem)] max-h-[700px]", children: /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "flex-1 overflow-y-auto px-6 py-4", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "bg-background-50 px-5 py-6 flex flex-col items-center gap-4 rounded-xl mb-4", children: [
-          (imageLink || alertData.image || defaultImage) && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: "flex flex-col h-[calc(100vh-8rem)] max-h-[700px]", children: /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "flex-1 overflow-y-auto px-6 py-4", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "bg-background-50 px-5 py-6 flex flex-col items-center gap-4 rounded-xl mb-4", children: [
+          (imageLink || alertData.image || defaultImage) && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
             "img",
             {
               src: imageLink || alertData.image || defaultImage || void 0,
               alt: alertData.title || "Imagem do alerta"
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "flex flex-col items-center text-center gap-3", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(Text_default, { size: "lg", weight: "semibold", children: alertData.title || "Sem T\xEDtulo" }),
-            /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(Text_default, { size: "sm", weight: "normal", className: "text-text-500", children: alertData.message || "Sem mensagem" })
+          /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "flex flex-col items-center text-center gap-3", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(Text_default, { size: "lg", weight: "semibold", children: alertData.title || "Sem T\xEDtulo" }),
+            /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(Text_default, { size: "sm", weight: "normal", className: "text-text-500", children: alertData.message || "Sem mensagem" })
           ] })
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(Divider_default, { className: "my-4" }),
-        /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "flex justify-between items-center mb-4 px-2", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(Text_default, { size: "sm", weight: "bold", className: "text-text-700", children: "Enviado em" }),
-          /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(Text_default, { size: "sm", weight: "medium", className: "text-text-900", children: formatDate(alertData.sentAt) })
+        /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(Divider_default, { className: "my-4" }),
+        /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "flex justify-between items-center mb-4 px-2", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(Text_default, { size: "sm", weight: "bold", className: "text-text-700", children: "Enviado em" }),
+          /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(Text_default, { size: "sm", weight: "medium", className: "text-text-900", children: formatDate(alertData.sentAt) })
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(Divider_default, { className: "my-4" }),
-        /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "mb-4", children: /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(Table_default, { variant: "borderless", className: "table-fixed", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(TableHeader, { children: /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(TableRow, { variant: "borderless", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(TableHead, { className: "py-2 px-3.5 text-start", children: "Destinat\xE1rio" }),
-            /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(TableHead, { className: "py-2 px-3.5 w-[120px] text-start", children: "Status" })
+        /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(Divider_default, { className: "my-4" }),
+        /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: "mb-4", children: /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(Table_default, { variant: "borderless", className: "table-fixed", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(TableHeader, { children: /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(TableRow, { variant: "borderless", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(TableHead, { className: "py-2 px-3.5 text-start", children: "Destinat\xE1rio" }),
+            /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(TableHead, { className: "py-2 px-3.5 w-[120px] text-start", children: "Status" })
           ] }) }),
-          /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(TableBody, { variant: "borderless", children: paginatedRecipients.map((recipient) => /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(TableRow, { children: [
-            /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(TableCell, { className: "py-2 px-3.5 flex flex-row gap-2 text-start truncate", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "rounded-full size-6 bg-primary-100 flex items-center justify-center", children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_phosphor_react4.User, { className: "text-primary-950", size: 18 }) }),
+          /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(TableBody, { variant: "borderless", children: paginatedRecipients.map((recipient) => /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(TableRow, { children: [
+            /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(TableCell, { className: "py-2 px-3.5 flex flex-row gap-2 text-start truncate", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: "rounded-full size-6 bg-primary-100 flex items-center justify-center", children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_phosphor_react4.User, { className: "text-primary-950", size: 18 }) }),
               recipient.name
             ] }),
-            /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(TableCell, { className: "py-2 px-3.5 text-center", children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "flex justify-center items-center gap-1", children: recipient.status === "viewed" ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(Badge_default, { variant: "solid", action: "success", children: "Visualizado" }) : /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(Badge_default, { variant: "solid", action: "error", children: "Pendente" }) }) })
+            /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(TableCell, { className: "py-2 px-3.5 text-center", children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: "flex justify-center items-center gap-1", children: recipient.status === "viewed" ? /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(Badge_default, { variant: "solid", action: "success", children: "Visualizado" }) : /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(Badge_default, { variant: "solid", action: "error", children: "Pendente" }) }) })
           ] }, recipient.id)) })
         ] }) }),
-        totalPages > 1 && /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "flex justify-end items-center gap-2 bg-background-50 border border-border-200 py-3.5 px-2 rounded-b-2xl", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(Text_default, { size: "sm", className: "text-text-600", children: [
+        totalPages > 1 && /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "flex justify-end items-center gap-2 bg-background-50 border border-border-200 py-3.5 px-2 rounded-b-2xl", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(Text_default, { size: "sm", className: "text-text-600", children: [
             "P\xE1gina ",
             effectiveCurrentPage,
             " de ",
             totalPages
           ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "flex gap-2", children: onPageChange ? /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(import_jsx_runtime8.Fragment, { children: [
-            /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: "flex gap-2", children: onPageChange ? /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(import_jsx_runtime9.Fragment, { children: [
+            /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
               Button_default,
               {
                 variant: "link",
                 size: "extra-small",
                 onClick: () => onPageChange(Math.max(1, effectiveCurrentPage - 1)),
                 disabled: effectiveCurrentPage === 1,
-                iconLeft: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_phosphor_react4.CaretLeft, {}),
+                iconLeft: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_phosphor_react4.CaretLeft, {}),
                 children: "Anterior"
               }
             ),
-            /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
               Button_default,
               {
                 variant: "link",
@@ -927,28 +1115,28 @@ var AlertsManagerView = ({
                   Math.min(totalPages, effectiveCurrentPage + 1)
                 ),
                 disabled: effectiveCurrentPage === totalPages,
-                iconRight: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_phosphor_react4.CaretRight, {}),
+                iconRight: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_phosphor_react4.CaretRight, {}),
                 children: "Pr\xF3ximo"
               }
             )
-          ] }) : /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(import_jsx_runtime8.Fragment, { children: [
-            /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+          ] }) : /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(import_jsx_runtime9.Fragment, { children: [
+            /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
               Button_default,
               {
                 variant: "link",
                 size: "extra-small",
                 disabled: effectiveCurrentPage === 1,
-                iconLeft: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_phosphor_react4.CaretLeft, {}),
+                iconLeft: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_phosphor_react4.CaretLeft, {}),
                 children: "Anterior"
               }
             ),
-            /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
               Button_default,
               {
                 variant: "link",
                 size: "extra-small",
                 disabled: effectiveCurrentPage === totalPages,
-                iconRight: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_phosphor_react4.CaretRight, {}),
+                iconRight: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_phosphor_react4.CaretRight, {}),
                 children: "Pr\xF3ximo"
               }
             )