analytica-frontend-lib 1.1.54 → 1.1.55

package/dist/NotificationCard/index.js

@@ -24,8 +24,8 @@ __export(NotificationCard_exports, {
   default: () => NotificationCard_default
 });
 module.exports = __toCommonJS(NotificationCard_exports);
-var import_phosphor_react4 = require("phosphor-react");
-var import_react6 = require("react");
+var import_phosphor_react5 = require("phosphor-react");
+var import_react9 = require("react");
 
 // src/utils/utils.ts
 var import_clsx = require("clsx");
@@ -35,8 +35,8 @@ function cn(...inputs) {
 }
 
 // src/components/DropdownMenu/DropdownMenu.tsx
-var import_phosphor_react = require("phosphor-react");
-var import_react = require("react");
+var import_phosphor_react3 = require("phosphor-react");
+var import_react5 = require("react");
 var import_zustand = require("zustand");
 
 // src/components/Button/Button.tsx
@@ -97,846 +97,1139 @@ var Button = ({
 };
 var Button_default = Button;
 
-// src/components/DropdownMenu/DropdownMenu.tsx
+// src/components/Text/Text.tsx
 var import_jsx_runtime2 = require("react/jsx-runtime");
-function createDropdownStore() {
-  return (0, import_zustand.create)((set) => ({
-    open: false,
-    setOpen: (open) => set({ open })
-  }));
-}
-var useDropdownStore = (externalStore) => {
-  if (!externalStore) {
-    throw new Error(
-      "Component must be used within a DropdownMenu (store is missing)"
-    );
-  }
-  return externalStore;
-};
-var injectStore = (children, store) => {
-  return import_react.Children.map(children, (child) => {
-    if ((0, import_react.isValidElement)(child)) {
-      const typedChild = child;
-      const newProps = {
-        store
-      };
-      if (typedChild.props.children) {
-        newProps.children = injectStore(typedChild.props.children, store);
-      }
-      return (0, import_react.cloneElement)(typedChild, newProps);
-    }
-    return child;
-  });
-};
-var DropdownMenu = ({
+var Text = ({
   children,
-  open: propOpen,
-  onOpenChange
+  size = "md",
+  weight = "normal",
+  color = "text-text-950",
+  as,
+  className = "",
+  ...props
 }) => {
-  const storeRef = (0, import_react.useRef)(null);
-  storeRef.current ??= createDropdownStore();
-  const store = storeRef.current;
-  const { open, setOpen: storeSetOpen } = (0, import_zustand.useStore)(store, (s) => s);
-  const setOpen = (newOpen) => {
-    storeSetOpen(newOpen);
-  };
-  const menuRef = (0, import_react.useRef)(null);
-  const handleArrowDownOrArrowUp = (event) => {
-    const menuContent = menuRef.current?.querySelector('[role="menu"]');
-    if (menuContent) {
-      event.preventDefault();
-      const items = Array.from(
-        menuContent.querySelectorAll(
-          '[role="menuitem"]:not([aria-disabled="true"])'
-        )
-      ).filter((el) => el instanceof HTMLElement);
-      if (items.length === 0) return;
-      const focusedItem = document.activeElement;
-      const currentIndex = items.findIndex((item) => item === focusedItem);
-      let nextIndex;
-      if (event.key === "ArrowDown") {
-        nextIndex = currentIndex === -1 ? 0 : (currentIndex + 1) % items.length;
-      } else {
-        nextIndex = currentIndex === -1 ? items.length - 1 : (currentIndex - 1 + items.length) % items.length;
-      }
-      items[nextIndex]?.focus();
-    }
-  };
-  const handleDownkey = (event) => {
-    if (event.key === "Escape") {
-      setOpen(false);
-    } else if (event.key === "ArrowDown" || event.key === "ArrowUp") {
-      handleArrowDownOrArrowUp(event);
-    }
+  let sizeClasses = "";
+  let weightClasses = "";
+  const sizeClassMap = {
+    "2xs": "text-2xs",
+    xs: "text-xs",
+    sm: "text-sm",
+    md: "text-md",
+    lg: "text-lg",
+    xl: "text-xl",
+    "2xl": "text-2xl",
+    "3xl": "text-3xl",
+    "4xl": "text-4xl",
+    "5xl": "text-5xl",
+    "6xl": "text-6xl"
   };
-  const handleClickOutside = (event) => {
-    if (menuRef.current && !menuRef.current.contains(event.target)) {
-      setOpen(false);
-    }
+  sizeClasses = sizeClassMap[size] ?? sizeClassMap.md;
+  const weightClassMap = {
+    hairline: "font-hairline",
+    light: "font-light",
+    normal: "font-normal",
+    medium: "font-medium",
+    semibold: "font-semibold",
+    bold: "font-bold",
+    extrabold: "font-extrabold",
+    black: "font-black"
   };
-  (0, import_react.useEffect)(() => {
-    if (open) {
-      document.addEventListener("mousedown", handleClickOutside);
-      document.addEventListener("keydown", handleDownkey);
-    }
-    return () => {
-      document.removeEventListener("mousedown", handleClickOutside);
-      document.removeEventListener("keydown", handleDownkey);
-    };
-  }, [open]);
-  (0, import_react.useEffect)(() => {
-    setOpen(open);
-    onOpenChange?.(open);
-  }, [open, onOpenChange]);
-  (0, import_react.useEffect)(() => {
-    if (propOpen) {
-      setOpen(propOpen);
-    }
-  }, [propOpen]);
-  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "relative", ref: menuRef, children: injectStore(children, store) });
-};
-var DropdownMenuTrigger = ({
-  className,
-  children,
-  onClick,
-  store: externalStore,
-  ...props
-}) => {
-  const store = useDropdownStore(externalStore);
-  const open = (0, import_zustand.useStore)(store, (s) => s.open);
-  const toggleOpen = () => store.setState({ open: !open });
+  weightClasses = weightClassMap[weight] ?? weightClassMap.normal;
+  const baseClasses = "font-primary";
+  const Component = as ?? "p";
   return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
-    "button",
+    Component,
     {
-      onClick: (e) => {
-        e.stopPropagation();
-        toggleOpen();
-        if (onClick) onClick(e);
-      },
-      "aria-expanded": open,
-      className: cn(className),
+      className: cn(baseClasses, sizeClasses, weightClasses, color, className),
       ...props,
       children
     }
   );
 };
-DropdownMenuTrigger.displayName = "DropdownMenuTrigger";
-var ITEM_SIZE_CLASSES = {
-  small: "text-sm",
-  medium: "text-md"
+var Text_default = Text;
+
+// src/components/Modal/Modal.tsx
+var import_react = require("react");
+var import_phosphor_react = 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 SIDE_CLASSES = {
-  top: "bottom-full",
-  right: "top-full",
-  bottom: "top-full",
-  left: "top-full"
+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 ALIGN_CLASSES = {
-  start: "left-0",
-  center: "left-1/2 -translate-x-1/2",
-  end: "right-0"
+var extractYoutuBeId = (pathname) => {
+  const firstSeg = pathname.split("/").filter(Boolean)[0];
+  return firstSeg || null;
 };
-var MENUCONTENT_VARIANT_CLASSES = {
-  menu: "p-1",
-  profile: "p-6"
+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 MenuLabel = (0, import_react.forwardRef)(({ className, inset, store: _store, ...props }, ref) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
-    "div",
-    {
-      ref,
-      className: cn("text-sm w-full", inset ? "pl-8" : "", className),
-      ...props
+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);
     }
-  );
-});
-MenuLabel.displayName = "MenuLabel";
-var DropdownMenuContent = (0, import_react.forwardRef)(
-  ({
-    className,
-    align = "start",
-    side = "bottom",
-    variant = "menu",
-    sideOffset = 4,
-    children,
-    store: externalStore,
-    ...props
-  }, ref) => {
-    const store = useDropdownStore(externalStore);
-    const open = (0, import_zustand.useStore)(store, (s) => s.open);
-    const [isVisible, setIsVisible] = (0, import_react.useState)(open);
-    (0, import_react.useEffect)(() => {
-      if (open) {
-        setIsVisible(true);
-      } else {
-        const timer = setTimeout(() => setIsVisible(false), 200);
-        return () => clearTimeout(timer);
-      }
-    }, [open]);
-    if (!isVisible) return null;
-    const getPositionClasses = () => {
-      const vertical = SIDE_CLASSES[side];
-      const horizontal = ALIGN_CLASSES[align];
-      return `absolute ${vertical} ${horizontal}`;
-    };
-    const variantClasses = MENUCONTENT_VARIANT_CLASSES[variant];
-    return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
-      "div",
-      {
-        ref,
-        role: "menu",
-        className: `
-        bg-background z-50 min-w-[210px] overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-md border-border-100
-        ${open ? "animate-in fade-in-0 zoom-in-95" : "animate-out fade-out-0 zoom-out-95"}
-        ${getPositionClasses()}
-        ${variantClasses}
-        ${className}
-      `,
-        style: {
-          marginTop: side === "bottom" ? sideOffset : void 0,
-          marginBottom: side === "top" ? sideOffset : void 0,
-          marginLeft: side === "right" ? sideOffset : void 0,
-          marginRight: side === "left" ? sideOffset : void 0
-        },
-        ...props,
-        children
-      }
-    );
+    return extractYouTubeId(u.pathname, u.searchParams);
+  } catch {
+    return null;
   }
-);
-DropdownMenuContent.displayName = "DropdownMenuContent";
-var DropdownMenuItem = (0, import_react.forwardRef)(
-  ({
-    className,
-    size = "small",
-    children,
-    iconRight,
-    iconLeft,
-    disabled = false,
-    onClick,
-    variant = "menu",
-    store: externalStore,
-    ...props
-  }, ref) => {
-    const store = useDropdownStore(externalStore);
-    const setOpen = (0, import_zustand.useStore)(store, (s) => s.setOpen);
-    const sizeClasses = ITEM_SIZE_CLASSES[size];
-    const handleClick = (e) => {
-      if (disabled) {
-        e.preventDefault();
-        e.stopPropagation();
-        return;
-      }
-      onClick?.(e);
-      setOpen(false);
-    };
-    const getVariantClasses = () => {
-      if (variant === "profile") {
-        return "relative flex flex-row justify-between select-none items-center gap-2 rounded-sm p-4 text-sm outline-none transition-colors [&>svg]:size-6 [&>svg]:shrink-0";
+};
+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_runtime3 = require("react/jsx-runtime");
+var SIZE_CLASSES2 = {
+  xs: "max-w-[360px]",
+  sm: "max-w-[420px]",
+  md: "max-w-[510px]",
+  lg: "max-w-[640px]",
+  xl: "max-w-[970px]"
+};
+var Modal = ({
+  isOpen,
+  onClose,
+  title,
+  children,
+  size = "md",
+  className = "",
+  closeOnEscape = true,
+  footer,
+  hideCloseButton = false,
+  variant = "default",
+  description,
+  image,
+  imageAlt,
+  actionLink,
+  actionLabel
+}) => {
+  const titleId = (0, import_react.useId)();
+  (0, import_react.useEffect)(() => {
+    if (!isOpen || !closeOnEscape) return;
+    const handleEscape = (event) => {
+      if (event.key === "Escape") {
+        onClose();
       }
-      return "relative flex select-none items-center gap-2 rounded-sm p-3 text-sm outline-none transition-colors [&>svg]:size-4 [&>svg]:shrink-0";
     };
-    const getVariantProps = () => {
-      return variant === "profile" ? { "data-variant": "profile" } : {};
+    document.addEventListener("keydown", handleEscape);
+    return () => document.removeEventListener("keydown", handleEscape);
+  }, [isOpen, closeOnEscape, onClose]);
+  (0, import_react.useEffect)(() => {
+    const originalOverflow = document.body.style.overflow;
+    if (isOpen) {
+      document.body.style.overflow = "hidden";
+    } else {
+      document.body.style.overflow = originalOverflow;
+    }
+    return () => {
+      document.body.style.overflow = originalOverflow;
     };
-    return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
-      "div",
+  }, [isOpen]);
+  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";
+  const dialogResetClasses = "p-0 m-0 border-none outline-none max-h-none static";
+  const modalClasses = cn(
+    baseClasses,
+    sizeClasses,
+    dialogResetClasses,
+    className
+  );
+  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_runtime3.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_runtime3.jsxs)(
+      "dialog",
+      {
+        className: modalClasses,
+        "aria-labelledby": titleId,
+        "aria-modal": "true",
+        open: true,
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "flex justify-end p-6 pb-0", children: !hideCloseButton && /* @__PURE__ */ (0, import_jsx_runtime3.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_runtime3.jsx)(import_phosphor_react.X, { size: 18 })
+            }
+          ) }),
+          /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "flex flex-col items-center px-6 pb-6 gap-5", children: [
+            image && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "flex justify-center", children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+              "img",
+              {
+                src: image,
+                alt: imageAlt ?? "",
+                className: "w-[122px] h-[122px] object-contain"
+              }
+            ) }),
+            /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+              "h2",
+              {
+                id: titleId,
+                className: "text-lg font-semibold text-text-950 text-center",
+                children: title
+              }
+            ),
+            description && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("p", { className: "text-sm font-normal text-text-400 text-center max-w-md leading-[21px]", children: description }),
+            actionLink && /* @__PURE__ */ (0, import_jsx_runtime3.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_runtime3.jsx)(
+                    Button_default,
+                    {
+                      variant: "solid",
+                      action: "primary",
+                      size: "large",
+                      className: "w-full",
+                      onClick: handleActionClick,
+                      children: actionLabel || "Iniciar Atividade"
+                    }
+                  );
+                }
+                return /* @__PURE__ */ (0, import_jsx_runtime3.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_runtime3.jsx)(
+                Button_default,
+                {
+                  variant: "solid",
+                  action: "primary",
+                  size: "large",
+                  className: "w-full",
+                  onClick: handleActionClick,
+                  children: actionLabel || "Iniciar Atividade"
+                }
+              )
+            ] })
+          ] })
+        ]
+      }
+    ) });
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime3.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_runtime3.jsxs)(
+    "dialog",
+    {
+      className: modalClasses,
+      "aria-labelledby": titleId,
+      "aria-modal": "true",
+      open: true,
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "flex items-center justify-between px-6 py-6", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("h2", { id: titleId, className: "text-lg font-semibold text-text-950", children: title }),
+          !hideCloseButton && /* @__PURE__ */ (0, import_jsx_runtime3.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_runtime3.jsx)(import_phosphor_react.X, { size: 18 })
+            }
+          )
+        ] }),
+        children && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "px-6 pb-6", children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "text-text-500 font-normal text-sm leading-6", children }) }),
+        footer && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "flex justify-end gap-3 px-6 pb-6", children: footer })
+      ]
+    }
+  ) });
+};
+var Modal_default = Modal;
+
+// src/components/ThemeToggle/ThemeToggle.tsx
+var import_phosphor_react2 = require("phosphor-react");
+var import_react4 = require("react");
+
+// src/components/SelectionButton/SelectionButton.tsx
+var import_react2 = require("react");
+var import_jsx_runtime4 = require("react/jsx-runtime");
+var SelectionButton = (0, import_react2.forwardRef)(
+  ({ icon, label, selected = false, className = "", disabled, ...props }, ref) => {
+    const baseClasses = [
+      "inline-flex",
+      "items-center",
+      "justify-start",
+      "gap-2",
+      "p-4",
+      "rounded-xl",
+      "cursor-pointer",
+      "border",
+      "border-border-50",
+      "bg-background",
+      "text-sm",
+      "text-text-700",
+      "font-bold",
+      "shadow-soft-shadow-1",
+      "hover:bg-background-100",
+      "focus-visible:outline-none",
+      "focus-visible:ring-2",
+      "focus-visible:ring-indicator-info",
+      "focus-visible:ring-offset-0",
+      "focus-visible:shadow-none",
+      "active:ring-2",
+      "active:ring-primary-950",
+      "active:ring-offset-0",
+      "active:shadow-none",
+      "disabled:opacity-50",
+      "disabled:cursor-not-allowed"
+    ];
+    const stateClasses = selected ? ["ring-primary-950", "ring-2", "ring-offset-0", "shadow-none"] : [];
+    const allClasses = [...baseClasses, ...stateClasses].join(" ");
+    return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
+      "button",
       {
         ref,
-        role: "menuitem",
-        ...getVariantProps(),
-        "aria-disabled": disabled,
-        className: `
-          focus-visible:bg-background-50
-           ${getVariantClasses()}
-          ${sizeClasses}
-          ${className}
-          ${disabled ? "cursor-not-allowed text-text-400" : "cursor-pointer hover:bg-background-50 text-text-700 focus:bg-accent focus:text-accent-foreground hover:bg-accent hover:text-accent-foreground"}
-        `,
-        onClick: handleClick,
-        onKeyDown: (e) => {
-          if (e.key === "Enter" || e.key === " ") handleClick(e);
-        },
-        tabIndex: disabled ? -1 : 0,
+        type: "button",
+        className: cn(allClasses, className),
+        disabled,
+        "aria-pressed": selected,
         ...props,
         children: [
-          iconLeft,
-          /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "w-full text-md", children }),
-          iconRight
+          /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: "flex items-center justify-center w-6 h-6", children: icon }),
+          /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { children: label })
         ]
       }
     );
   }
 );
-DropdownMenuItem.displayName = "DropdownMenuItem";
-var DropdownMenuSeparator = (0, import_react.forwardRef)(({ className, store: _store, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
-  "div",
-  {
-    ref,
-    className: cn("my-1 h-px bg-border-200", className),
-    ...props
-  }
-));
-DropdownMenuSeparator.displayName = "DropdownMenuSeparator";
-var ProfileMenuTrigger = (0, import_react.forwardRef)(({ className, onClick, store: externalStore, ...props }, ref) => {
-  const store = useDropdownStore(externalStore);
-  const open = (0, import_zustand.useStore)(store, (s) => s.open);
-  const toggleOpen = () => store.setState({ open: !open });
-  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
-    "button",
-    {
-      ref,
-      className: cn(
-        "rounded-lg size-10 bg-primary-50 flex items-center justify-center cursor-pointer",
-        className
-      ),
-      onClick: (e) => {
-        e.stopPropagation();
-        toggleOpen();
-        onClick?.(e);
-      },
-      "aria-expanded": open,
-      ...props,
-      children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "size-6 rounded-full bg-primary-100 flex items-center justify-center", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_phosphor_react.User, { className: "text-primary-950", size: 18 }) })
+SelectionButton.displayName = "SelectionButton";
+var SelectionButton_default = SelectionButton;
+
+// src/hooks/useTheme.ts
+var import_react3 = require("react");
+var useTheme = () => {
+  const [themeMode, setThemeMode] = (0, import_react3.useState)("system");
+  const [isDark, setIsDark] = (0, import_react3.useState)(false);
+  const themeModeRef = (0, import_react3.useRef)("system");
+  const applyTheme = (0, import_react3.useCallback)((mode) => {
+    const htmlElement = document.documentElement;
+    const originalTheme = htmlElement.getAttribute("data-original-theme");
+    if (mode === "dark") {
+      htmlElement.setAttribute("data-theme", "dark");
+      setIsDark(true);
+    } else if (mode === "light") {
+      if (originalTheme) {
+        htmlElement.setAttribute("data-theme", originalTheme);
+      }
+      setIsDark(false);
+    } else if (mode === "system") {
+      const isSystemDark = window.matchMedia(
+        "(prefers-color-scheme: dark)"
+      ).matches;
+      if (isSystemDark) {
+        htmlElement.setAttribute("data-theme", "dark");
+        setIsDark(true);
+      } else if (originalTheme) {
+        htmlElement.setAttribute("data-theme", originalTheme);
+        setIsDark(false);
+      }
+    }
+  }, []);
+  const toggleTheme = (0, import_react3.useCallback)(() => {
+    let newMode;
+    if (themeMode === "light") {
+      newMode = "dark";
+    } else if (themeMode === "dark") {
+      newMode = "light";
+    } else {
+      newMode = "dark";
     }
+    setThemeMode(newMode);
+    themeModeRef.current = newMode;
+    applyTheme(newMode);
+    localStorage.setItem("theme-mode", newMode);
+  }, [themeMode, applyTheme]);
+  const setTheme = (0, import_react3.useCallback)(
+    (mode) => {
+      setThemeMode(mode);
+      themeModeRef.current = mode;
+      applyTheme(mode);
+      localStorage.setItem("theme-mode", mode);
+    },
+    [applyTheme]
   );
-});
-ProfileMenuTrigger.displayName = "ProfileMenuTrigger";
-var ProfileMenuHeader = (0, import_react.forwardRef)(({ className, name, email, store: _store, ...props }, ref) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
-    "div",
+  (0, import_react3.useEffect)(() => {
+    const htmlElement = document.documentElement;
+    const currentTheme = htmlElement.getAttribute("data-theme");
+    if (currentTheme && !htmlElement.getAttribute("data-original-theme")) {
+      htmlElement.setAttribute("data-original-theme", currentTheme);
+    }
+    const savedThemeMode = localStorage.getItem("theme-mode");
+    const initialMode = savedThemeMode || "system";
+    if (!savedThemeMode) {
+      localStorage.setItem("theme-mode", "system");
+    }
+    setThemeMode(initialMode);
+    themeModeRef.current = initialMode;
+    applyTheme(initialMode);
+    const mediaQuery = window.matchMedia("(prefers-color-scheme: dark)");
+    const handleSystemThemeChange = () => {
+      if (themeModeRef.current === "system") {
+        applyTheme("system");
+      }
+    };
+    mediaQuery.addEventListener("change", handleSystemThemeChange);
+    return () => {
+      mediaQuery.removeEventListener("change", handleSystemThemeChange);
+    };
+  }, [applyTheme]);
+  return {
+    themeMode,
+    isDark,
+    toggleTheme,
+    setTheme
+  };
+};
+
+// src/components/ThemeToggle/ThemeToggle.tsx
+var import_jsx_runtime5 = require("react/jsx-runtime");
+var ThemeToggle = ({
+  variant = "default",
+  onToggle
+}) => {
+  const { themeMode, setTheme } = useTheme();
+  const [tempTheme, setTempTheme] = (0, import_react4.useState)(themeMode);
+  (0, import_react4.useEffect)(() => {
+    setTempTheme(themeMode);
+  }, [themeMode]);
+  const problemTypes = [
     {
-      ref,
-      "data-component": "ProfileMenuHeader",
-      className: cn("flex flex-row gap-4 items-center", className),
-      ...props,
-      children: [
-        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "size-16 bg-primary-100 rounded-full flex items-center justify-center", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_phosphor_react.User, { size: 34, className: "text-primary-950" }) }),
-        /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "flex flex-col ", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("p", { className: "text-xl font-bold text-text-950", children: name }),
-          /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("p", { className: "text-md text-text-600", children: email })
-        ] })
-      ]
+      id: "light",
+      title: "Claro",
+      icon: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_phosphor_react2.Sun, { size: 24 })
+    },
+    {
+      id: "dark",
+      title: "Escuro",
+      icon: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_phosphor_react2.Moon, { size: 24 })
+    },
+    {
+      id: "system",
+      title: "Sistema",
+      icon: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+        "svg",
+        {
+          width: "25",
+          height: "25",
+          viewBox: "0 0 25 25",
+          fill: "none",
+          xmlns: "http://www.w3.org/2000/svg",
+          children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+            "path",
+            {
+              d: "M12.5 2.75C15.085 2.75276 17.5637 3.78054 19.3916 5.6084C21.2195 7.43628 22.2473 9.915 22.25 12.5C22.25 14.4284 21.6778 16.3136 20.6064 17.917C19.5352 19.5201 18.0128 20.7699 16.2314 21.5078C14.4499 22.2458 12.489 22.4387 10.5977 22.0625C8.70642 21.6863 6.96899 20.758 5.60547 19.3945C4.24197 18.031 3.31374 16.2936 2.9375 14.4023C2.56129 12.511 2.75423 10.5501 3.49219 8.76855C4.23012 6.98718 5.47982 5.46483 7.08301 4.39355C8.68639 3.32221 10.5716 2.75 12.5 2.75ZM11.75 4.28516C9.70145 4.47452 7.7973 5.42115 6.41016 6.94043C5.02299 8.4599 4.25247 10.4426 4.25 12.5C4.25247 14.5574 5.02299 16.5401 6.41016 18.0596C7.7973 19.5789 9.70145 20.5255 11.75 20.7148V4.28516Z",
+              fill: "#525252"
+            }
+          )
+        }
+      )
     }
-  );
-});
-ProfileMenuHeader.displayName = "ProfileMenuHeader";
-var ProfileMenuSection = (0, import_react.forwardRef)(({ className, children, store: _store, ...props }, ref) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { ref, className: cn("flex flex-col p-2", className), ...props, children });
-});
-ProfileMenuSection.displayName = "ProfileMenuSection";
-var ProfileMenuFooter = ({
+  ];
+  const handleThemeSelect = (selectedTheme) => {
+    if (variant === "with-save") {
+      setTempTheme(selectedTheme);
+    } else {
+      setTheme(selectedTheme);
+    }
+    if (onToggle) {
+      onToggle(selectedTheme);
+    }
+  };
+  const currentTheme = variant === "with-save" ? tempTheme : themeMode;
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "flex flex-row gap-2 sm:gap-4 py-2", children: problemTypes.map((type) => /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+    SelectionButton_default,
+    {
+      icon: type.icon,
+      label: type.title,
+      selected: currentTheme === type.id,
+      onClick: () => handleThemeSelect(type.id),
+      className: "w-full p-2 sm:p-4"
+    },
+    type.id
+  )) });
+};
+
+// src/components/DropdownMenu/DropdownMenu.tsx
+var import_jsx_runtime6 = require("react/jsx-runtime");
+function createDropdownStore() {
+  return (0, import_zustand.create)((set) => ({
+    open: false,
+    setOpen: (open) => set({ open })
+  }));
+}
+var useDropdownStore = (externalStore) => {
+  if (!externalStore) {
+    throw new Error(
+      "Component must be used within a DropdownMenu (store is missing)"
+    );
+  }
+  return externalStore;
+};
+var injectStore = (children, store) => {
+  return import_react5.Children.map(children, (child) => {
+    if ((0, import_react5.isValidElement)(child)) {
+      const typedChild = child;
+      const newProps = {
+        store
+      };
+      if (typedChild.props.children) {
+        newProps.children = injectStore(typedChild.props.children, store);
+      }
+      return (0, import_react5.cloneElement)(typedChild, newProps);
+    }
+    return child;
+  });
+};
+var DropdownMenu = ({
+  children,
+  open: propOpen,
+  onOpenChange
+}) => {
+  const storeRef = (0, import_react5.useRef)(null);
+  storeRef.current ??= createDropdownStore();
+  const store = storeRef.current;
+  const { open, setOpen: storeSetOpen } = (0, import_zustand.useStore)(store, (s) => s);
+  const setOpen = (newOpen) => {
+    storeSetOpen(newOpen);
+  };
+  const menuRef = (0, import_react5.useRef)(null);
+  const handleArrowDownOrArrowUp = (event) => {
+    const menuContent = menuRef.current?.querySelector('[role="menu"]');
+    if (menuContent) {
+      event.preventDefault();
+      const items = Array.from(
+        menuContent.querySelectorAll(
+          '[role="menuitem"]:not([aria-disabled="true"])'
+        )
+      ).filter((el) => el instanceof HTMLElement);
+      if (items.length === 0) return;
+      const focusedItem = document.activeElement;
+      const currentIndex = items.findIndex((item) => item === focusedItem);
+      let nextIndex;
+      if (event.key === "ArrowDown") {
+        nextIndex = currentIndex === -1 ? 0 : (currentIndex + 1) % items.length;
+      } else {
+        nextIndex = currentIndex === -1 ? items.length - 1 : (currentIndex - 1 + items.length) % items.length;
+      }
+      items[nextIndex]?.focus();
+    }
+  };
+  const handleDownkey = (event) => {
+    if (event.key === "Escape") {
+      setOpen(false);
+    } else if (event.key === "ArrowDown" || event.key === "ArrowUp") {
+      handleArrowDownOrArrowUp(event);
+    }
+  };
+  const handleClickOutside = (event) => {
+    if (menuRef.current && !menuRef.current.contains(event.target)) {
+      setOpen(false);
+    }
+  };
+  (0, import_react5.useEffect)(() => {
+    if (open) {
+      document.addEventListener("mousedown", handleClickOutside);
+      document.addEventListener("keydown", handleDownkey);
+    }
+    return () => {
+      document.removeEventListener("mousedown", handleClickOutside);
+      document.removeEventListener("keydown", handleDownkey);
+    };
+  }, [open]);
+  (0, import_react5.useEffect)(() => {
+    setOpen(open);
+    onOpenChange?.(open);
+  }, [open, onOpenChange]);
+  (0, import_react5.useEffect)(() => {
+    if (propOpen) {
+      setOpen(propOpen);
+    }
+  }, [propOpen]);
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: "relative", ref: menuRef, children: injectStore(children, store) });
+};
+var DropdownMenuTrigger = ({
   className,
-  disabled = false,
+  children,
   onClick,
   store: externalStore,
   ...props
 }) => {
   const store = useDropdownStore(externalStore);
-  const setOpen = (0, import_zustand.useStore)(store, (s) => s.setOpen);
-  return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
-    Button_default,
+  const open = (0, import_zustand.useStore)(store, (s) => s.open);
+  const toggleOpen = () => store.setState({ open: !open });
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+    "button",
     {
-      variant: "outline",
-      className: cn("w-full", className),
-      disabled,
       onClick: (e) => {
-        setOpen(false);
-        onClick?.(e);
+        e.stopPropagation();
+        toggleOpen();
+        if (onClick) onClick(e);
       },
+      "aria-expanded": open,
+      className: cn(className),
       ...props,
-      children: [
-        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "mr-2 flex items-center", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_phosphor_react.SignOut, {}) }),
-        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { children: "Sair" })
-      ]
+      children
     }
   );
 };
-ProfileMenuFooter.displayName = "ProfileMenuFooter";
-var DropdownMenu_default = DropdownMenu;
-
-// src/components/Skeleton/Skeleton.tsx
-var import_react2 = require("react");
-var import_jsx_runtime3 = require("react/jsx-runtime");
-var SKELETON_ANIMATION_CLASSES = {
-  pulse: "animate-pulse",
-  none: ""
+DropdownMenuTrigger.displayName = "DropdownMenuTrigger";
+var ITEM_SIZE_CLASSES = {
+  small: "text-sm",
+  medium: "text-md"
 };
-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 SIDE_CLASSES = {
+  top: "bottom-full",
+  right: "top-full",
+  bottom: "top-full",
+  left: "top-full"
 };
-var SPACING_CLASSES = {
-  none: "",
-  small: "space-y-1",
-  medium: "space-y-2",
-  large: "space-y-3"
+var ALIGN_CLASSES = {
+  start: "left-0",
+  center: "left-1/2 -translate-x-1/2",
+  end: "right-0"
+};
+var MENUCONTENT_VARIANT_CLASSES = {
+  menu: "p-1",
+  profile: "p-6"
 };
-var Skeleton = (0, import_react2.forwardRef)(
+var MenuLabel = (0, import_react5.forwardRef)(({ className, inset, store: _store, ...props }, ref) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+    "div",
+    {
+      ref,
+      className: cn("text-sm w-full", inset ? "pl-8" : "", className),
+      ...props
+    }
+  );
+});
+MenuLabel.displayName = "MenuLabel";
+var DropdownMenuContent = (0, import_react5.forwardRef)(
   ({
-    variant = "text",
-    width,
-    height,
-    animation = "pulse",
-    lines = 1,
-    spacing = "none",
-    className = "",
+    className,
+    align = "start",
+    side = "bottom",
+    variant = "menu",
+    sideOffset = 4,
     children,
+    store: externalStore,
     ...props
   }, ref) => {
-    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
+    const store = useDropdownStore(externalStore);
+    const open = (0, import_zustand.useStore)(store, (s) => s.open);
+    const [isVisible, setIsVisible] = (0, import_react5.useState)(open);
+    (0, import_react5.useEffect)(() => {
+      if (open) {
+        setIsVisible(true);
+      } else {
+        const timer = setTimeout(() => setIsVisible(false), 200);
+        return () => clearTimeout(timer);
+      }
+    }, [open]);
+    if (!isVisible) return null;
+    const getPositionClasses = () => {
+      const vertical = SIDE_CLASSES[side];
+      const horizontal = ALIGN_CLASSES[align];
+      return `absolute ${vertical} ${horizontal}`;
     };
-    if (variant === "text" && lines > 1) {
-      return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
-        "div",
-        {
-          ref,
-          className: cn("flex flex-col", spacingClass, className),
-          ...props,
-          children: Array.from({ length: lines }, (_, index) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
-            "div",
-            {
-              className: cn(variantClass, animationClass),
-              style: index === lines - 1 ? { width: "60%" } : void 0
-            },
-            index
-          ))
-        }
-      );
-    }
-    return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+    const variantClasses = MENUCONTENT_VARIANT_CLASSES[variant];
+    return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
       "div",
       {
         ref,
-        className: cn(variantClass, animationClass, className),
-        style,
+        role: "menu",
+        className: `
+        bg-background z-50 min-w-[210px] overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-md border-border-100
+        ${open ? "animate-in fade-in-0 zoom-in-95" : "animate-out fade-out-0 zoom-out-95"}
+        ${getPositionClasses()}
+        ${variantClasses}
+        ${className}
+      `,
+        style: {
+          marginTop: side === "bottom" ? sideOffset : void 0,
+          marginBottom: side === "top" ? sideOffset : void 0,
+          marginLeft: side === "right" ? sideOffset : void 0,
+          marginRight: side === "left" ? sideOffset : void 0
+        },
         ...props,
         children
       }
     );
   }
 );
-var SkeletonText = (0, import_react2.forwardRef)(
-  (props, ref) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Skeleton, { ref, variant: "text", ...props })
-);
-var SkeletonCircle = (0, import_react2.forwardRef)((props, ref) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Skeleton, { ref, variant: "circular", ...props }));
-var SkeletonRectangle = (0, import_react2.forwardRef)((props, ref) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Skeleton, { ref, variant: "rectangular", ...props }));
-var SkeletonRounded = (0, import_react2.forwardRef)((props, ref) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Skeleton, { ref, variant: "rounded", ...props }));
-var SkeletonCard = (0, import_react2.forwardRef)(
+DropdownMenuContent.displayName = "DropdownMenuContent";
+var DropdownMenuItem = (0, import_react5.forwardRef)(
   ({
-    showAvatar = true,
-    showTitle = true,
-    showDescription = true,
-    showActions = true,
-    lines = 2,
-    className = "",
+    className,
+    size = "small",
+    children,
+    iconRight,
+    iconLeft,
+    disabled = false,
+    onClick,
+    variant = "menu",
+    store: externalStore,
     ...props
   }, ref) => {
-    return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
-      "div",
-      {
-        ref,
-        className: cn(
-          "w-full p-4 bg-background border border-border-200 rounded-lg",
-          className
-        ),
-        ...props,
-        children: [
-          /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "flex items-start space-x-3", children: [
-            showAvatar && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(SkeletonCircle, { width: 40, height: 40 }),
-            /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "flex-1 space-y-2", children: [
-              showTitle && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(SkeletonText, { width: "60%", height: 20 }),
-              showDescription && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(SkeletonText, { lines, spacing: "small" })
-            ] })
-          ] }),
-          showActions && /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "flex justify-end space-x-2 mt-4", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(SkeletonRectangle, { width: 80, height: 32 }),
-            /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(SkeletonRectangle, { width: 80, height: 32 })
-          ] })
-        ]
+    const store = useDropdownStore(externalStore);
+    const setOpen = (0, import_zustand.useStore)(store, (s) => s.setOpen);
+    const sizeClasses = ITEM_SIZE_CLASSES[size];
+    const handleClick = (e) => {
+      if (disabled) {
+        e.preventDefault();
+        e.stopPropagation();
+        return;
       }
-    );
-  }
-);
-var SkeletonList = (0, import_react2.forwardRef)(
-  ({
-    items = 3,
-    showAvatar = true,
-    showTitle = true,
-    showDescription = true,
-    lines = 1,
-    className = "",
-    ...props
-  }, ref) => {
-    return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { ref, className: cn("space-y-3", className), ...props, children: Array.from({ length: items }, (_, index) => /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "flex items-start space-x-3 p-3", children: [
-      showAvatar && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(SkeletonCircle, { width: 32, height: 32 }),
-      /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "flex-1 space-y-2", children: [
-        showTitle && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(SkeletonText, { width: "40%", height: 16 }),
-        showDescription && /* @__PURE__ */ (0, import_jsx_runtime3.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_runtime3.jsxs)("div", { ref, className: cn("w-full", className), ...props, children: [
-      showHeader && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "flex space-x-2 mb-3", children: Array.from({ length: columns }, (_, index) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
-        SkeletonText,
-        {
-          width: `${100 / columns}%`,
-          height: 20
-        },
-        index
-      )) }),
-      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "space-y-2", children: Array.from({ length: rows }, (_, rowIndex) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "flex space-x-2", children: Array.from({ length: columns }, (_2, colIndex) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
-        SkeletonText,
-        {
-          width: `${100 / columns}%`,
-          height: 16
-        },
-        colIndex
-      )) }, rowIndex)) })
-    ] });
-  }
-);
-
-// src/components/IconButton/IconButton.tsx
-var import_react3 = require("react");
-var import_jsx_runtime4 = require("react/jsx-runtime");
-var IconButton = (0, import_react3.forwardRef)(
-  ({ icon, size = "md", active = false, className = "", disabled, ...props }, ref) => {
-    const baseClasses = [
-      "inline-flex",
-      "items-center",
-      "justify-center",
-      "rounded-lg",
-      "font-medium",
-      "bg-transparent",
-      "text-text-950",
-      "cursor-pointer",
-      "hover:bg-primary-600",
-      "hover:text-text",
-      "focus-visible:outline-none",
-      "focus-visible:ring-2",
-      "focus-visible:ring-offset-0",
-      "focus-visible:ring-indicator-info",
-      "disabled:opacity-50",
-      "disabled:cursor-not-allowed",
-      "disabled:pointer-events-none"
-    ];
-    const sizeClasses = {
-      sm: ["w-6", "h-6", "text-sm"],
-      md: ["w-10", "h-10", "text-base"]
+      onClick?.(e);
+      setOpen(false);
     };
-    const activeClasses = active ? ["!bg-primary-50", "!text-primary-950", "hover:!bg-primary-100"] : [];
-    const allClasses = [
-      ...baseClasses,
-      ...sizeClasses[size],
-      ...activeClasses
-    ].join(" ");
-    const ariaLabel = props["aria-label"] ?? "Bot\xE3o de a\xE7\xE3o";
-    return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
-      "button",
+    const getVariantClasses = () => {
+      if (variant === "profile") {
+        return "relative flex flex-row justify-between select-none items-center gap-2 rounded-sm p-4 text-sm outline-none transition-colors [&>svg]:size-6 [&>svg]:shrink-0";
+      }
+      return "relative flex select-none items-center gap-2 rounded-sm p-3 text-sm outline-none transition-colors [&>svg]:size-4 [&>svg]:shrink-0";
+    };
+    const getVariantProps = () => {
+      return variant === "profile" ? { "data-variant": "profile" } : {};
+    };
+    return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
+      "div",
       {
         ref,
-        type: "button",
-        className: cn(allClasses, className),
-        disabled,
-        "aria-pressed": active,
-        "aria-label": ariaLabel,
+        role: "menuitem",
+        ...getVariantProps(),
+        "aria-disabled": disabled,
+        className: `
+          focus-visible:bg-background-50
+           ${getVariantClasses()}
+          ${sizeClasses}
+          ${className}
+          ${disabled ? "cursor-not-allowed text-text-400" : "cursor-pointer hover:bg-background-50 text-text-700 focus:bg-accent focus:text-accent-foreground hover:bg-accent hover:text-accent-foreground"}
+        `,
+        onClick: handleClick,
+        onKeyDown: (e) => {
+          if (e.key === "Enter" || e.key === " ") handleClick(e);
+        },
+        tabIndex: disabled ? -1 : 0,
         ...props,
-        children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: "flex items-center justify-center", children: icon })
+        children: [
+          iconLeft,
+          /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: "w-full", children }),
+          iconRight
+        ]
       }
     );
   }
 );
-IconButton.displayName = "IconButton";
-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;
+DropdownMenuItem.displayName = "DropdownMenuItem";
+var DropdownMenuSeparator = (0, import_react5.forwardRef)(({ className, store: _store, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+  "div",
+  {
+    ref,
+    className: cn("my-1 h-px bg-border-200", className),
+    ...props
   }
-};
-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]",
-  sm: "max-w-[420px]",
-  md: "max-w-[510px]",
-  lg: "max-w-[640px]",
-  xl: "max-w-[970px]"
-};
-var Modal = ({
-  isOpen,
-  onClose,
-  title,
-  children,
-  size = "md",
-  className = "",
-  closeOnEscape = true,
-  footer,
-  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) => {
-      if (event.key === "Escape") {
-        onClose();
-      }
-    };
-    document.addEventListener("keydown", handleEscape);
-    return () => document.removeEventListener("keydown", handleEscape);
-  }, [isOpen, closeOnEscape, onClose]);
-  (0, import_react4.useEffect)(() => {
-    const originalOverflow = document.body.style.overflow;
-    if (isOpen) {
-      document.body.style.overflow = "hidden";
-    } else {
-      document.body.style.overflow = originalOverflow;
+));
+DropdownMenuSeparator.displayName = "DropdownMenuSeparator";
+var ProfileMenuTrigger = (0, import_react5.forwardRef)(({ className, onClick, store: externalStore, ...props }, ref) => {
+  const store = useDropdownStore(externalStore);
+  const open = (0, import_zustand.useStore)(store, (s) => s.open);
+  const toggleOpen = () => store.setState({ open: !open });
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+    "button",
+    {
+      ref,
+      className: cn(
+        "rounded-lg size-10 bg-primary-50 flex items-center justify-center cursor-pointer",
+        className
+      ),
+      onClick: (e) => {
+        e.stopPropagation();
+        toggleOpen();
+        onClick?.(e);
+      },
+      "aria-expanded": open,
+      ...props,
+      children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: "size-6 rounded-full bg-primary-100 flex items-center justify-center", children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_phosphor_react3.User, { className: "text-primary-950", size: 18 }) })
     }
-    return () => {
-      document.body.style.overflow = originalOverflow;
-    };
-  }, [isOpen]);
-  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";
-  const dialogResetClasses = "p-0 m-0 border-none outline-none max-h-none static";
-  const modalClasses = cn(
-    baseClasses,
-    sizeClasses,
-    dialogResetClasses,
-    className
   );
-  const normalizeUrl = (href) => /^https?:\/\//i.test(href) ? href : `https://${href}`;
-  const handleActionClick = () => {
-    if (actionLink) {
-      window.open(normalizeUrl(actionLink), "_blank", "noopener,noreferrer");
+});
+ProfileMenuTrigger.displayName = "ProfileMenuTrigger";
+var ProfileMenuHeader = (0, import_react5.forwardRef)(({ className, name, email, store: _store, ...props }, ref) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
+    "div",
+    {
+      ref,
+      "data-component": "ProfileMenuHeader",
+      className: cn("flex flex-row gap-4 items-center", className),
+      ...props,
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: "size-16 bg-primary-100 rounded-full flex items-center justify-center", children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_phosphor_react3.User, { size: 34, className: "text-primary-950" }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "flex flex-col ", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(Text_default, { size: "xl", weight: "bold", color: "text-text-950", children: name }),
+          /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(Text_default, { size: "md", color: "text-text-600", children: email })
+        ] })
+      ]
     }
+  );
+});
+ProfileMenuHeader.displayName = "ProfileMenuHeader";
+var ProfileToggleTheme = ({ ...props }) => {
+  const { themeMode, setTheme } = useTheme();
+  const [modalThemeToggle, setModalThemeToggle] = (0, import_react5.useState)(false);
+  const [selectedTheme, setSelectedTheme] = (0, import_react5.useState)(themeMode);
+  const handleClick = (e) => {
+    e.preventDefault();
+    e.stopPropagation();
+    setModalThemeToggle(true);
   };
-  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",
+  const handleSave = () => {
+    setTheme(selectedTheme);
+    setModalThemeToggle(false);
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(import_jsx_runtime6.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
+      "div",
       {
-        className: modalClasses,
-        "aria-labelledby": titleId,
-        "aria-modal": "true",
-        open: true,
+        role: "menuitem",
+        "data-variant": "profile",
+        className: "relative flex flex-row justify-between select-none items-center gap-2 rounded-sm p-4 text-sm outline-none transition-colors [&>svg]:size-6 [&>svg]:shrink-0 cursor-pointer hover:bg-background-50 text-text-700 focus:bg-accent focus:text-accent-foreground hover:bg-accent hover:text-accent-foreground",
+        onClick: handleClick,
+        onKeyDown: (e) => {
+          if (e.key === "Enter" || e.key === " ") {
+            e.preventDefault();
+            e.stopPropagation();
+            setModalThemeToggle(true);
+          }
+        },
+        tabIndex: 0,
+        ...props,
         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",
+          /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+            "svg",
             {
-              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,
+              width: "25",
+              height: "25",
+              viewBox: "0 0 25 25",
+              fill: "none",
+              xmlns: "http://www.w3.org/2000/svg",
+              children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+                "path",
                 {
-                  variant: "solid",
-                  action: "primary",
-                  size: "large",
-                  className: "w-full",
-                  onClick: handleActionClick,
-                  children: actionLabel || "Iniciar Atividade"
+                  d: "M12.5 2.75C15.085 2.75276 17.5637 3.78054 19.3916 5.6084C21.2195 7.43628 22.2473 9.915 22.25 12.5C22.25 14.4284 21.6778 16.3136 20.6064 17.917C19.5352 19.5201 18.0128 20.7699 16.2314 21.5078C14.4499 22.2458 12.489 22.4387 10.5977 22.0625C8.70642 21.6863 6.96899 20.758 5.60547 19.3945C4.24197 18.031 3.31374 16.2936 2.9375 14.4023C2.56129 12.511 2.75423 10.5501 3.49219 8.76855C4.23012 6.98718 5.47982 5.46483 7.08301 4.39355C8.68639 3.32221 10.5716 2.75 12.5 2.75ZM11.75 4.28516C9.70145 4.47452 7.7973 5.42115 6.41016 6.94043C5.02299 8.4599 4.25247 10.4426 4.25 12.5C4.25247 14.5574 5.02299 16.5401 6.41016 18.0596C7.7973 19.5789 9.70145 20.5255 11.75 20.7148V4.28516Z",
+                  fill: "#525252"
                 }
               )
-            ] })
-          ] })
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(Text_default, { className: "w-full", size: "md", children: "Apar\xEAncia" }),
+          /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_phosphor_react3.CaretRight, {})
         ]
       }
-    ) });
-  }
-  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.jsxs)("div", { className: "flex items-center justify-between px-6 py-6", children: [
-          /* @__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",
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+      Modal_default,
+      {
+        isOpen: modalThemeToggle,
+        onClose: () => setModalThemeToggle(false),
+        title: "Apar\xEAncia",
+        size: "md",
+        footer: /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "flex gap-3", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+            Button_default,
             {
-              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 })
+              variant: "outline",
+              onClick: () => setModalThemeToggle(false),
+              children: "Cancelar"
             }
-          )
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(Button_default, { variant: "solid", onClick: () => handleSave(), children: "Salvar" })
         ] }),
-        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 })
-      ]
-    }
-  ) });
+        children: /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "flex flex-col", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("p", { className: "text-sm text-text-500", children: "Escolha o tema:" }),
+          /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(ThemeToggle, { variant: "with-save", onToggle: setSelectedTheme })
+        ] })
+      }
+    )
+  ] });
 };
-var Modal_default = Modal;
-
-// src/components/Text/Text.tsx
-var import_jsx_runtime6 = require("react/jsx-runtime");
-var Text = ({
-  children,
-  size = "md",
-  weight = "normal",
-  color = "text-text-950",
-  as,
-  className = "",
+ProfileToggleTheme.displayName = "ProfileToggleTheme";
+var ProfileMenuSection = (0, import_react5.forwardRef)(({ className, children, store: _store, ...props }, ref) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { ref, className: cn("flex flex-col p-2", className), ...props, children });
+});
+ProfileMenuSection.displayName = "ProfileMenuSection";
+var ProfileMenuFooter = ({
+  className,
+  disabled = false,
+  onClick,
+  store: externalStore,
   ...props
 }) => {
-  let sizeClasses = "";
-  let weightClasses = "";
-  const sizeClassMap = {
-    "2xs": "text-2xs",
-    xs: "text-xs",
-    sm: "text-sm",
-    md: "text-md",
-    lg: "text-lg",
-    xl: "text-xl",
-    "2xl": "text-2xl",
-    "3xl": "text-3xl",
-    "4xl": "text-4xl",
-    "5xl": "text-5xl",
-    "6xl": "text-6xl"
-  };
-  sizeClasses = sizeClassMap[size] ?? sizeClassMap.md;
-  const weightClassMap = {
-    hairline: "font-hairline",
-    light: "font-light",
-    normal: "font-normal",
-    medium: "font-medium",
-    semibold: "font-semibold",
-    bold: "font-bold",
-    extrabold: "font-extrabold",
-    black: "font-black"
-  };
-  weightClasses = weightClassMap[weight] ?? weightClassMap.normal;
-  const baseClasses = "font-primary";
-  const Component = as ?? "p";
-  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
-    Component,
+  const store = useDropdownStore(externalStore);
+  const setOpen = (0, import_zustand.useStore)(store, (s) => s.setOpen);
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
+    Button_default,
     {
-      className: cn(baseClasses, sizeClasses, weightClasses, color, className),
+      variant: "outline",
+      className: cn("w-full", className),
+      disabled,
+      onClick: (e) => {
+        setOpen(false);
+        onClick?.(e);
+      },
       ...props,
-      children
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: "mr-2 flex items-center", children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_phosphor_react3.SignOut, {}) }),
+        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(Text_default, { children: "Sair" })
+      ]
     }
   );
 };
-var Text_default = Text;
+ProfileMenuFooter.displayName = "ProfileMenuFooter";
+var DropdownMenu_default = DropdownMenu;
 
-// src/components/Badge/Badge.tsx
-var import_phosphor_react3 = require("phosphor-react");
+// src/components/Skeleton/Skeleton.tsx
+var import_react6 = require("react");
 var import_jsx_runtime7 = require("react/jsx-runtime");
+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_react6.forwardRef)(
+  ({
+    variant = "text",
+    width,
+    height,
+    animation = "pulse",
+    lines = 1,
+    spacing = "none",
+    className = "",
+    children,
+    ...props
+  }, ref) => {
+    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_runtime7.jsx)(
+        "div",
+        {
+          ref,
+          className: cn("flex flex-col", spacingClass, className),
+          ...props,
+          children: Array.from({ length: lines }, (_, index) => /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+            "div",
+            {
+              className: cn(variantClass, animationClass),
+              style: index === lines - 1 ? { width: "60%" } : void 0
+            },
+            index
+          ))
+        }
+      );
+    }
+    return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+      "div",
+      {
+        ref,
+        className: cn(variantClass, animationClass, className),
+        style,
+        ...props,
+        children
+      }
+    );
+  }
+);
+var SkeletonText = (0, import_react6.forwardRef)(
+  (props, ref) => /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(Skeleton, { ref, variant: "text", ...props })
+);
+var SkeletonCircle = (0, import_react6.forwardRef)((props, ref) => /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(Skeleton, { ref, variant: "circular", ...props }));
+var SkeletonRectangle = (0, import_react6.forwardRef)((props, ref) => /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(Skeleton, { ref, variant: "rectangular", ...props }));
+var SkeletonRounded = (0, import_react6.forwardRef)((props, ref) => /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(Skeleton, { ref, variant: "rounded", ...props }));
+var SkeletonCard = (0, import_react6.forwardRef)(
+  ({
+    showAvatar = true,
+    showTitle = true,
+    showDescription = true,
+    showActions = true,
+    lines = 2,
+    className = "",
+    ...props
+  }, ref) => {
+    return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
+      "div",
+      {
+        ref,
+        className: cn(
+          "w-full p-4 bg-background border border-border-200 rounded-lg",
+          className
+        ),
+        ...props,
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "flex items-start space-x-3", children: [
+            showAvatar && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(SkeletonCircle, { width: 40, height: 40 }),
+            /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "flex-1 space-y-2", children: [
+              showTitle && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(SkeletonText, { width: "60%", height: 20 }),
+              showDescription && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(SkeletonText, { lines, spacing: "small" })
+            ] })
+          ] }),
+          showActions && /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "flex justify-end space-x-2 mt-4", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(SkeletonRectangle, { width: 80, height: 32 }),
+            /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(SkeletonRectangle, { width: 80, height: 32 })
+          ] })
+        ]
+      }
+    );
+  }
+);
+var SkeletonList = (0, import_react6.forwardRef)(
+  ({
+    items = 3,
+    showAvatar = true,
+    showTitle = true,
+    showDescription = true,
+    lines = 1,
+    className = "",
+    ...props
+  }, ref) => {
+    return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { ref, className: cn("space-y-3", className), ...props, children: Array.from({ length: items }, (_, index) => /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "flex items-start space-x-3 p-3", children: [
+      showAvatar && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(SkeletonCircle, { width: 32, height: 32 }),
+      /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "flex-1 space-y-2", children: [
+        showTitle && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(SkeletonText, { width: "40%", height: 16 }),
+        showDescription && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(SkeletonText, { lines, spacing: "small" })
+      ] })
+    ] }, index)) });
+  }
+);
+var SkeletonTable = (0, import_react6.forwardRef)(
+  ({ rows = 5, columns = 4, showHeader = true, className = "", ...props }, ref) => {
+    return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { ref, className: cn("w-full", className), ...props, children: [
+      showHeader && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "flex space-x-2 mb-3", children: Array.from({ length: columns }, (_, index) => /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+        SkeletonText,
+        {
+          width: `${100 / columns}%`,
+          height: 20
+        },
+        index
+      )) }),
+      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "space-y-2", children: Array.from({ length: rows }, (_, rowIndex) => /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "flex space-x-2", children: Array.from({ length: columns }, (_2, colIndex) => /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+        SkeletonText,
+        {
+          width: `${100 / columns}%`,
+          height: 16
+        },
+        colIndex
+      )) }, rowIndex)) })
+    ] });
+  }
+);
+
+// src/components/IconButton/IconButton.tsx
+var import_react7 = require("react");
+var import_jsx_runtime8 = require("react/jsx-runtime");
+var IconButton = (0, import_react7.forwardRef)(
+  ({ icon, size = "md", active = false, className = "", disabled, ...props }, ref) => {
+    const baseClasses = [
+      "inline-flex",
+      "items-center",
+      "justify-center",
+      "rounded-lg",
+      "font-medium",
+      "bg-transparent",
+      "text-text-950",
+      "cursor-pointer",
+      "hover:bg-primary-600",
+      "hover:text-text",
+      "focus-visible:outline-none",
+      "focus-visible:ring-2",
+      "focus-visible:ring-offset-0",
+      "focus-visible:ring-indicator-info",
+      "disabled:opacity-50",
+      "disabled:cursor-not-allowed",
+      "disabled:pointer-events-none"
+    ];
+    const sizeClasses = {
+      sm: ["w-6", "h-6", "text-sm"],
+      md: ["w-10", "h-10", "text-base"]
+    };
+    const activeClasses = active ? ["!bg-primary-50", "!text-primary-950", "hover:!bg-primary-100"] : [];
+    const allClasses = [
+      ...baseClasses,
+      ...sizeClasses[size],
+      ...activeClasses
+    ].join(" ");
+    const ariaLabel = props["aria-label"] ?? "Bot\xE3o de a\xE7\xE3o";
+    return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+      "button",
+      {
+        ref,
+        type: "button",
+        className: cn(allClasses, className),
+        disabled,
+        "aria-pressed": active,
+        "aria-label": ariaLabel,
+        ...props,
+        children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { className: "flex items-center justify-center", children: icon })
+      }
+    );
+  }
+);
+IconButton.displayName = "IconButton";
+var IconButton_default = IconButton;
+
+// src/components/Badge/Badge.tsx
+var import_phosphor_react4 = require("phosphor-react");
+var import_jsx_runtime9 = require("react/jsx-runtime");
 var VARIANT_ACTION_CLASSES2 = {
   solid: {
     error: "bg-error-background text-error-700 focus-visible:outline-none",
@@ -998,14 +1291,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_runtime9.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_runtime9.jsx)(import_phosphor_react4.Bell, { size: 24, className: "text-current", "aria-hidden": "true" }),
+          notificationActive && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
             "span",
             {
               "data-testid": "notification-dot",
@@ -1016,15 +1309,15 @@ var Badge = ({
       }
     );
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime9.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_runtime9.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_runtime9.jsx)("span", { className: cn(baseClassesIcon, sizeClassesIcon), children: iconRight })
       ]
     }
   );
@@ -1032,7 +1325,7 @@ var Badge = ({
 var Badge_default = Badge;
 
 // src/hooks/useMobile.ts
-var import_react5 = require("react");
+var import_react8 = require("react");
 var MOBILE_WIDTH = 500;
 var TABLET_WIDTH = 931;
 var DEFAULT_WIDTH = 1200;
@@ -1047,9 +1340,9 @@ var getDeviceType = () => {
   return width < TABLET_WIDTH ? "responsive" : "desktop";
 };
 var useMobile = () => {
-  const [isMobile, setIsMobile] = (0, import_react5.useState)(false);
-  const [isTablet, setIsTablet] = (0, import_react5.useState)(false);
-  (0, import_react5.useEffect)(() => {
+  const [isMobile, setIsMobile] = (0, import_react8.useState)(false);
+  const [isTablet, setIsTablet] = (0, import_react8.useState)(false);
+  (0, import_react8.useEffect)(() => {
     const checkScreenSize = () => {
       const width = getWindowWidth();
       setIsMobile(width < MOBILE_WIDTH);
@@ -1121,14 +1414,14 @@ var formatTimeAgo = (date) => {
 };
 
 // src/components/NotificationCard/NotificationCard.tsx
-var import_jsx_runtime8 = require("react/jsx-runtime");
+var import_jsx_runtime10 = 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_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)(
+  return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "flex flex-col items-center justify-center gap-4 p-6 w-full", children: [
+    emptyStateImage && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "w-20 h-20 flex items-center justify-center", children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
       "img",
       {
         src: emptyStateImage,
@@ -1138,23 +1431,23 @@ var NotificationEmpty = ({
         className: "object-contain"
       }
     ) }),
-    /* @__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 })
+    /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("h3", { className: "text-xl font-semibold text-text-950 text-center leading-[23px]", children: emptyStateTitle }),
+    /* @__PURE__ */ (0, import_jsx_runtime10.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_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)(
+  return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "flex items-center justify-between gap-2", children: [
+    variant === "modal" ? /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(Text_default, { size: "sm", weight: "bold", className: "text-text-950", children: "Notifica\xE7\xF5es" }) : /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("h3", { className: "text-sm font-semibold text-text-950", children: "Notifica\xE7\xF5es" }),
+    unreadCount > 0 && /* @__PURE__ */ (0, import_jsx_runtime10.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" }),
+        iconLeft: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_phosphor_react5.Bell, { size: 12, "aria-hidden": "true", focusable: "false" }),
         className: "border-0",
         children: unreadCount === 1 ? "1 n\xE3o lida" : `${unreadCount} n\xE3o lidas`
       }
@@ -1190,7 +1483,7 @@ var SingleNotificationCard = ({
       onNavigate();
     }
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
     "div",
     {
       className: cn(
@@ -1199,20 +1492,20 @@ var SingleNotificationCard = ({
         className
       ),
       children: [
-        /* @__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)(
+        /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "flex items-center gap-2 w-full", children: [
+          !isRead && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "w-[7px] h-[7px] bg-info-300 rounded-full flex-shrink-0" }),
+          /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("h3", { className: "font-bold text-sm leading-4 text-text-950 flex-grow", children: title }),
+          /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(DropdownMenu_default, { children: [
+            /* @__PURE__ */ (0, import_jsx_runtime10.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_runtime8.jsx)(import_phosphor_react4.DotsThreeVertical, { size: 24 })
+                children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_phosphor_react5.DotsThreeVertical, { size: 24 })
               }
             ),
-            /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(DropdownMenuContent, { align: "end", className: "min-w-[160px]", children: [
-              !isRead && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(DropdownMenuContent, { align: "end", className: "min-w-[160px]", children: [
+              !isRead && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
                 DropdownMenuItem,
                 {
                   onClick: handleMarkAsRead,
@@ -1220,14 +1513,14 @@ var SingleNotificationCard = ({
                   children: "Marcar como lida"
                 }
               ),
-              /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(DropdownMenuItem, { onClick: handleDelete, className: "text-error-600", children: "Deletar" })
+              /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(DropdownMenuItem, { onClick: handleDelete, className: "text-error-600", children: "Deletar" })
             ] })
           ] })
         ] }),
-        /* @__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)(
+        /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("p", { className: "text-sm leading-[21px] text-text-800 w-full", children: message }),
+        /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "flex items-center justify-between w-full", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { className: "text-sm font-medium text-text-400", children: time }),
+          onNavigate && actionLabel && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
             "button",
             {
               type: "button",
@@ -1254,9 +1547,9 @@ var NotificationList = ({
   className
 }) => {
   if (error) {
-    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)(
+    return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "flex flex-col items-center gap-4 p-6 w-full", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("p", { className: "text-sm text-error-600", children: error }),
+      onRetry && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
         "button",
         {
           type: "button",
@@ -1268,8 +1561,8 @@ var NotificationList = ({
     ] });
   }
   if (loading) {
-    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)(
+    return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "flex flex-col gap-0 w-full", children: ["skeleton-first", "skeleton-second", "skeleton-third"].map(
+      (skeletonId) => /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
         SkeletonCard,
         {
           className: "p-4 border-b border-border-200"
@@ -1279,11 +1572,11 @@ var NotificationList = ({
     ) });
   }
   if (!groupedNotifications || groupedNotifications.length === 0) {
-    return renderEmpty ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "w-full", children: renderEmpty() }) : /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(NotificationEmpty, {});
+    return renderEmpty ? /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "w-full", children: renderEmpty() }) : /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(NotificationEmpty, {});
   }
-  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)(
+  return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: cn("flex flex-col gap-0 w-full", className), children: groupedNotifications.map((group, idx) => /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "flex flex-col", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "flex items-end px-4 py-6 pb-4", children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("h4", { className: "text-lg font-bold text-text-500 flex-grow", children: group.label }) }),
+    group.notifications.map((notification) => /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
       SingleNotificationCard,
       {
         title: notification.title,
@@ -1324,7 +1617,7 @@ var NotificationCenter = ({
   className
 }) => {
   const { isMobile } = useMobile();
-  const [isModalOpen, setIsModalOpen] = (0, import_react6.useState)(false);
+  const [isModalOpen, setIsModalOpen] = (0, import_react9.useState)(false);
   const handleMobileClick = () => {
     setIsModalOpen(true);
     onFetchNotifications?.();
@@ -1332,7 +1625,7 @@ var NotificationCenter = ({
   const handleDesktopClick = () => {
     onToggleActive?.();
   };
-  (0, import_react6.useEffect)(() => {
+  (0, import_react9.useEffect)(() => {
     if (isActive) {
       onFetchNotifications?.();
     }
@@ -1341,7 +1634,7 @@ var NotificationCenter = ({
     onCleanup?.();
     onNavigateById?.(entityType, entityId);
   };
-  const renderEmptyState = () => /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+  const renderEmptyState = () => /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
     NotificationEmpty,
     {
       emptyStateImage,
@@ -1350,17 +1643,17 @@ var NotificationCenter = ({
     }
   );
   if (isMobile) {
-    return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(import_jsx_runtime8.Fragment, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(import_jsx_runtime10.Fragment, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
         IconButton_default,
         {
           active: isModalOpen,
           onClick: handleMobileClick,
-          icon: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_phosphor_react4.Bell, { size: 24, className: "text-primary" }),
+          icon: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_phosphor_react5.Bell, { size: 24, className: "text-primary" }),
           className
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
         Modal_default,
         {
           isOpen: isModalOpen,
@@ -1369,10 +1662,10 @@ var NotificationCenter = ({
           size: "md",
           hideCloseButton: false,
           closeOnEscape: true,
-          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)(
+          children: /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "flex flex-col h-full max-h-[80vh]", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "px-0 pb-3 border-b border-border-200", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(NotificationHeader, { unreadCount, variant: "modal" }),
+              unreadCount > 0 && onMarkAllAsRead && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
                 "button",
                 {
                   type: "button",
@@ -1382,7 +1675,7 @@ var NotificationCenter = ({
                 }
               )
             ] }),
-            /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "flex-1 overflow-y-auto", children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "flex-1 overflow-y-auto", children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
               NotificationList,
               {
                 groupedNotifications,
@@ -1405,14 +1698,14 @@ var NotificationCenter = ({
       )
     ] });
   }
-  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)(
+  return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(DropdownMenu_default, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(DropdownMenuTrigger, { className: "text-primary cursor-pointer", children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
       IconButton_default,
       {
         active: isActive,
         onClick: handleDesktopClick,
-        icon: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
-          import_phosphor_react4.Bell,
+        icon: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+          import_phosphor_react5.Bell,
           {
             size: 24,
             className: isActive ? "text-primary-950" : "text-primary"
@@ -1421,16 +1714,16 @@ var NotificationCenter = ({
         className
       }
     ) }),
-    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
       DropdownMenuContent,
       {
         className: "min-w-[320px] max-w-[400px] max-h-[500px] overflow-hidden",
         side: "bottom",
         align: "end",
-        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)(
+        children: /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "flex flex-col", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "px-4 py-3 border-b border-border-200", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(NotificationHeader, { unreadCount, variant: "dropdown" }),
+            unreadCount > 0 && onMarkAllAsRead && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
               "button",
               {
                 type: "button",
@@ -1440,7 +1733,7 @@ var NotificationCenter = ({
               }
             )
           ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "max-h-[350px] overflow-y-auto", children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "max-h-[350px] overflow-y-auto", children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
             NotificationList,
             {
               groupedNotifications,
@@ -1462,7 +1755,7 @@ var NotificationCenter = ({
 var NotificationCard = (props) => {
   switch (props.mode) {
     case "single":
-      return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+      return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
         SingleNotificationCard,
         {
           title: props.title,
@@ -1477,7 +1770,7 @@ var NotificationCard = (props) => {
         }
       );
     case "list":
-      return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+      return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
         NotificationList,
         {
           groupedNotifications: props.groupedNotifications ?? (props.notifications ? [
@@ -1498,9 +1791,9 @@ var NotificationCard = (props) => {
         }
       );
     case "center":
-      return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(NotificationCenter, { ...props });
+      return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(NotificationCenter, { ...props });
     default:
-      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" }) });
+      return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "flex flex-col items-center gap-4 p-6 w-full", children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("p", { className: "text-sm text-text-600", children: "Modo de notifica\xE7\xE3o n\xE3o reconhecido" }) });
   }
 };
 var LegacyNotificationCard = (props) => {
@@ -1509,10 +1802,10 @@ var LegacyNotificationCard = (props) => {
       mode: "center",
       ...props
     };
-    return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(NotificationCenter, { ...centerProps });
+    return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(NotificationCenter, { ...centerProps });
   }
   if (props.groupedNotifications !== void 0 || props.notifications !== void 0 || props.loading || props.error) {
-    return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
       NotificationList,
       {
         groupedNotifications: props.groupedNotifications ?? (props.notifications ? [
@@ -1549,7 +1842,7 @@ var LegacyNotificationCard = (props) => {
       emptyStateTitle: props.emptyStateTitle,
       emptyStateDescription: props.emptyStateDescription
     };
-    return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
       SingleNotificationCard,
       {
         title: singleProps.title,
@@ -1564,7 +1857,7 @@ var LegacyNotificationCard = (props) => {
       }
     );
   }
-  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" }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "flex flex-col items-center gap-4 p-6 w-full", children: /* @__PURE__ */ (0, import_jsx_runtime10.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: