analytica-frontend-lib 1.0.68 → 1.0.71

package/dist/index.js

@@ -21,9 +21,13 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 var src_exports = {};
 __export(src_exports, {
   Alert: () => Alert_default,
+  AlertDialog: () => AlertDialog,
+  AlternativesList: () => AlternativesList,
+  AuthProvider: () => AuthProvider,
   Badge: () => Badge_default,
   Button: () => Button_default,
   Calendar: () => Calendar_default,
+  CardAccordation: () => CardAccordation,
   CardActivitiesResults: () => CardActivitiesResults,
   CardPerformance: () => CardPerformance,
   CardProgress: () => CardProgress,
@@ -56,7 +60,11 @@ __export(src_exports, {
   ProfileMenuTrigger: () => ProfileMenuTrigger,
   ProgressBar: () => ProgressBar_default,
   ProgressCircle: () => ProgressCircle_default,
+  ProtectedRoute: () => ProtectedRoute,
+  PublicRoute: () => PublicRoute,
   Radio: () => Radio_default,
+  RadioGroup: () => RadioGroup,
+  RadioGroupItem: () => RadioGroupItem,
   Select: () => Select_default,
   SelectContent: () => SelectContent,
   SelectItem: () => SelectItem,
@@ -72,12 +80,17 @@ __export(src_exports, {
   SkeletonTable: () => SkeletonTable,
   SkeletonText: () => SkeletonText,
   Stepper: () => Stepper_default,
+  Tab: () => Tab_default,
   Table: () => Table_default,
   Text: () => Text_default,
   TextArea: () => TextArea_default,
   Toast: () => Toast_default,
   Toaster: () => Toaster_default,
-  useToastStore: () => ToastStore_default
+  useAuth: () => useAuth,
+  useAuthGuard: () => useAuthGuard,
+  useRouteAuth: () => useRouteAuth,
+  useToastStore: () => ToastStore_default,
+  withAuth: () => withAuth
 });
 module.exports = __toCommonJS(src_exports);
 
@@ -195,7 +208,7 @@ var import_phosphor_react = require("phosphor-react");
 var import_jsx_runtime3 = require("react/jsx-runtime");
 var VARIANT_ACTION_CLASSES2 = {
   solid: {
-    error: "bg-error text-error-700 focus-visible:outline-none",
+    error: "bg-error-background text-error-700 focus-visible:outline-none",
     warning: "bg-warning text-warning-800 focus-visible:outline-none",
     success: "bg-success text-success-800 focus-visible:outline-none",
     info: "bg-info text-info-800 focus-visible:outline-none",
@@ -847,6 +860,7 @@ var CheckBox_default = CheckBox;
 
 // src/components/Radio/Radio.tsx
 var import_react6 = require("react");
+var import_zustand = require("zustand");
 var import_jsx_runtime11 = require("react/jsx-runtime");
 var SIZE_CLASSES4 = {
   small: {
@@ -932,6 +946,7 @@ var Radio = (0, import_react6.forwardRef)(
   }, ref) => {
     const generatedId = (0, import_react6.useId)();
     const inputId = id ?? `radio-${generatedId}`;
+    const inputRef = (0, import_react6.useRef)(null);
     const [internalChecked, setInternalChecked] = (0, import_react6.useState)(defaultChecked);
     const isControlled = checkedProp !== void 0;
     const checked = isControlled ? checkedProp : internalChecked;
@@ -940,6 +955,9 @@ var Radio = (0, import_react6.forwardRef)(
       if (!isControlled) {
         setInternalChecked(newChecked);
       }
+      if (event.target) {
+        event.target.blur();
+      }
       onChange?.(event);
     };
     const currentState = disabled ? "disabled" : state;
@@ -980,7 +998,11 @@ var Radio = (0, import_react6.forwardRef)(
             /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
               "input",
               {
-                ref,
+                ref: (node) => {
+                  inputRef.current = node;
+                  if (typeof ref === "function") ref(node);
+                  else if (ref) ref.current = node;
+                },
                 type: "radio",
                 id: inputId,
                 checked,
@@ -989,10 +1011,42 @@ var Radio = (0, import_react6.forwardRef)(
                 value,
                 onChange: handleChange,
                 className: "sr-only",
+                style: {
+                  position: "absolute",
+                  left: "-9999px",
+                  visibility: "hidden"
+                },
                 ...props
               }
             ),
-            /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("label", { htmlFor: inputId, className: radioClasses, children: checked && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { className: dotClasses }) }),
+            /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+              "button",
+              {
+                type: "button",
+                className: radioClasses,
+                disabled,
+                "aria-pressed": checked,
+                onClick: (e) => {
+                  e.preventDefault();
+                  if (!disabled) {
+                    if (inputRef.current) {
+                      inputRef.current.click();
+                      inputRef.current.blur();
+                    }
+                  }
+                },
+                onKeyDown: (e) => {
+                  if ((e.key === "Enter" || e.key === " ") && !disabled) {
+                    e.preventDefault();
+                    if (inputRef.current) {
+                      inputRef.current.click();
+                      inputRef.current.blur();
+                    }
+                  }
+                },
+                children: checked && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { className: dotClasses })
+              }
+            ),
             label && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
               "div",
               {
@@ -1038,6 +1092,129 @@ var Radio = (0, import_react6.forwardRef)(
   }
 );
 Radio.displayName = "Radio";
+var createRadioGroupStore = (name, defaultValue, disabled, onValueChange) => (0, import_zustand.create)((set, get) => ({
+  value: defaultValue,
+  setValue: (value) => {
+    if (!get().disabled) {
+      set({ value });
+      get().onValueChange?.(value);
+    }
+  },
+  onValueChange,
+  disabled,
+  name
+}));
+var useRadioGroupStore = (externalStore) => {
+  if (!externalStore) {
+    throw new Error("RadioGroupItem must be used within a RadioGroup");
+  }
+  return externalStore;
+};
+var injectStore = (children, store) => import_react6.Children.map(children, (child) => {
+  if (!(0, import_react6.isValidElement)(child)) return child;
+  const typedChild = child;
+  const shouldInject = typedChild.type === RadioGroupItem;
+  return (0, import_react6.cloneElement)(typedChild, {
+    ...shouldInject ? { store } : {},
+    ...typedChild.props.children ? { children: injectStore(typedChild.props.children, store) } : {}
+  });
+});
+var RadioGroup = (0, import_react6.forwardRef)(
+  ({
+    value: propValue,
+    defaultValue = "",
+    onValueChange,
+    name: propName,
+    disabled = false,
+    className = "",
+    children,
+    ...props
+  }, ref) => {
+    const generatedId = (0, import_react6.useId)();
+    const name = propName || `radio-group-${generatedId}`;
+    const storeRef = (0, import_react6.useRef)(null);
+    storeRef.current ??= createRadioGroupStore(
+      name,
+      defaultValue,
+      disabled,
+      onValueChange
+    );
+    const store = storeRef.current;
+    const { setValue } = (0, import_zustand.useStore)(store, (s) => s);
+    (0, import_react6.useEffect)(() => {
+      const currentValue = store.getState().value;
+      if (currentValue && onValueChange) {
+        onValueChange(currentValue);
+      }
+    }, []);
+    (0, import_react6.useEffect)(() => {
+      if (propValue !== void 0) {
+        setValue(propValue);
+      }
+    }, [propValue, setValue]);
+    (0, import_react6.useEffect)(() => {
+      store.setState({ disabled });
+    }, [disabled, store]);
+    return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+      "div",
+      {
+        ref,
+        className,
+        role: "radiogroup",
+        "aria-label": name,
+        ...props,
+        children: injectStore(children, store)
+      }
+    );
+  }
+);
+RadioGroup.displayName = "RadioGroup";
+var RadioGroupItem = (0, import_react6.forwardRef)(
+  ({
+    value,
+    store: externalStore,
+    disabled: itemDisabled,
+    size = "medium",
+    state = "default",
+    className = "",
+    id,
+    ...props
+  }, ref) => {
+    const store = useRadioGroupStore(externalStore);
+    const {
+      value: groupValue,
+      setValue,
+      disabled: groupDisabled,
+      name
+    } = (0, import_zustand.useStore)(store);
+    const generatedId = (0, import_react6.useId)();
+    const inputId = id ?? `radio-item-${generatedId}`;
+    const isChecked = groupValue === value;
+    const isDisabled = groupDisabled || itemDisabled;
+    const currentState = isDisabled ? "disabled" : state;
+    return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+      Radio,
+      {
+        ref,
+        id: inputId,
+        name,
+        value,
+        checked: isChecked,
+        disabled: isDisabled,
+        size,
+        state: currentState,
+        className,
+        onChange: (e) => {
+          if (e.target.checked && !isDisabled) {
+            setValue(value);
+          }
+        },
+        ...props
+      }
+    );
+  }
+);
+RadioGroupItem.displayName = "RadioGroupItem";
 var Radio_default = Radio;
 
 // src/components/TextArea/TextArea.tsx
@@ -1243,8 +1420,8 @@ var Toast = ({
 var Toast_default = Toast;
 
 // src/components/Toast/utils/ToastStore.ts
-var import_zustand = require("zustand");
-var useToastStore = (0, import_zustand.create)((set) => ({
+var import_zustand2 = require("zustand");
+var useToastStore = (0, import_zustand2.create)((set) => ({
   toasts: [],
   addToast: (toast) => {
     const id = crypto.randomUUID();
@@ -2989,623 +3166,881 @@ var Modal = ({
 };
 var Modal_default = Modal;
 
-// src/components/DropdownMenu/DropdownMenu.tsx
-var import_phosphor_react10 = require("phosphor-react");
+// src/components/Accordation/Accordation.tsx
+var import_react12 = require("react");
+
+// src/components/Card/Card.tsx
 var import_react11 = require("react");
-var import_zustand2 = require("zustand");
+var import_phosphor_react10 = require("phosphor-react");
 var import_jsx_runtime23 = require("react/jsx-runtime");
-function createDropdownStore() {
-  return (0, import_zustand2.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_react11.Children.map(children, (child) => {
-    if ((0, import_react11.isValidElement)(child)) {
-      const typedChild = child;
-      const newProps = {
-        store
-      };
-      if (typedChild.props.children) {
-        newProps.children = injectStore(typedChild.props.children, store);
-      }
-      return (0, import_react11.cloneElement)(typedChild, newProps);
-    }
-    return child;
-  });
-};
-var DropdownMenu = ({
-  children,
-  open: propOpen,
-  onOpenChange
-}) => {
-  const storeRef = (0, import_react11.useRef)(null);
-  storeRef.current ??= createDropdownStore();
-  const store = storeRef.current;
-  const { open, setOpen: storeSetOpen } = (0, import_zustand2.useStore)(store, (s) => s);
-  const setOpen = (newOpen) => {
-    storeSetOpen(newOpen);
-  };
-  const menuRef = (0, import_react11.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_react11.useEffect)(() => {
-    if (open) {
-      document.addEventListener("mousedown", handleClickOutside);
-      document.addEventListener("keydown", handleDownkey);
-    }
-    return () => {
-      document.removeEventListener("mousedown", handleClickOutside);
-      document.removeEventListener("keydown", handleDownkey);
-    };
-  }, [open]);
-  (0, import_react11.useEffect)(() => {
-    setOpen(open);
-    onOpenChange?.(open);
-  }, [open, onOpenChange]);
-  (0, import_react11.useEffect)(() => {
-    if (propOpen) {
-      setOpen(propOpen);
-    }
-  }, [propOpen]);
-  return /* @__PURE__ */ (0, import_jsx_runtime23.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_zustand2.useStore)(store, (s) => s.open);
-  const toggleOpen = () => store.setState({ open: !open });
-  return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
-    "button",
-    {
-      onClick: (e) => {
-        e.stopPropagation();
-        toggleOpen();
-        if (onClick) onClick(e);
-      },
-      "aria-expanded": open,
-      className: `${className}`,
-      ...props,
-      children
-    }
-  );
+var CARD_BASE_CLASSES = {
+  default: "w-full bg-background border border-border-50 rounded-xl",
+  compact: "w-full bg-background border border-border-50 rounded-lg",
+  minimal: "w-full bg-background border border-border-100 rounded-md"
 };
-DropdownMenuTrigger.displayName = "DropdownMenuTrigger";
-var ITEM_SIZE_CLASSES = {
-  small: "text-sm",
-  medium: "text-md"
+var CARD_PADDING_CLASSES = {
+  none: "",
+  small: "p-2",
+  medium: "p-4",
+  large: "p-6"
 };
-var SIDE_CLASSES = {
-  top: "bottom-full",
-  right: "top-full",
-  bottom: "top-full",
-  left: "top-full"
+var CARD_MIN_HEIGHT_CLASSES = {
+  none: "",
+  small: "min-h-16",
+  medium: "min-h-20",
+  large: "min-h-24"
 };
-var ALIGN_CLASSES = {
-  start: "left-0",
-  center: "left-1/2 -translate-x-1/2",
-  end: "right-0"
+var CARD_LAYOUT_CLASSES = {
+  horizontal: "flex flex-row",
+  vertical: "flex flex-col"
 };
-var MENUCONTENT_VARIANT_CLASSES = {
-  menu: "p-1",
-  profile: "p-6"
+var CARD_CURSOR_CLASSES = {
+  default: "",
+  pointer: "cursor-pointer"
 };
-var MenuLabel = (0, import_react11.forwardRef)(({ className, inset, store: _store, ...props }, ref) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
-    "div",
-    {
-      ref,
-      className: `text-sm w-full ${inset ? "pl-8" : ""} ${className ?? ""}`,
-      ...props
-    }
-  );
-});
-MenuLabel.displayName = "MenuLabel";
-var DropdownMenuContent = (0, import_react11.forwardRef)(
+var CardBase = (0, import_react11.forwardRef)(
   ({
-    className,
-    align = "start",
-    side = "bottom",
-    variant = "menu",
-    sideOffset = 4,
     children,
-    store: externalStore,
+    variant = "default",
+    layout = "horizontal",
+    padding = "medium",
+    minHeight = "medium",
+    cursor = "default",
+    className = "",
     ...props
   }, ref) => {
-    const store = useDropdownStore(externalStore);
-    const open = (0, import_zustand2.useStore)(store, (s) => s.open);
-    const [isVisible, setIsVisible] = (0, import_react11.useState)(open);
-    (0, import_react11.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_runtime23.jsx)(
+    const baseClasses = CARD_BASE_CLASSES[variant];
+    const paddingClasses = CARD_PADDING_CLASSES[padding];
+    const minHeightClasses = CARD_MIN_HEIGHT_CLASSES[minHeight];
+    const layoutClasses = CARD_LAYOUT_CLASSES[layout];
+    const cursorClasses = CARD_CURSOR_CLASSES[cursor];
+    const combinedClasses = [
+      baseClasses,
+      paddingClasses,
+      minHeightClasses,
+      layoutClasses,
+      cursorClasses,
+      className
+    ].filter(Boolean).join(" ");
+    return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("div", { ref, className: combinedClasses, ...props, children });
+  }
+);
+var ACTION_CARD_CLASSES = {
+  warning: "bg-warning-background",
+  success: "bg-success-300",
+  error: "bg-error-100",
+  info: "bg-info-background"
+};
+var ACTION_ICON_CLASSES = {
+  warning: "bg-warning-300 text-text",
+  success: "bg-yellow-300 text-text-950",
+  error: "bg-error-500 text-text",
+  info: "bg-info-500 text-text"
+};
+var ACTION_SUBTITLE_CLASSES = {
+  warning: "text-warning-600",
+  success: "text-success-700",
+  error: "text-error-700",
+  info: "text-info-700"
+};
+var ACTION_HEADER_CLASSES = {
+  warning: "text-warning-300",
+  success: "text-success-300",
+  error: "text-error-300",
+  info: "text-info-300"
+};
+var CardActivitiesResults = (0, import_react11.forwardRef)(
+  ({
+    icon,
+    title,
+    subTitle,
+    header,
+    extended = false,
+    action = "success",
+    description,
+    className,
+    ...props
+  }, ref) => {
+    const actionCardClasses = ACTION_CARD_CLASSES[action];
+    const actionIconClasses = ACTION_ICON_CLASSES[action];
+    const actionSubTitleClasses = ACTION_SUBTITLE_CLASSES[action];
+    const actionHeaderClasses = ACTION_HEADER_CLASSES[action];
+    return /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(
       "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
-        },
+        className: `w-full flex flex-col border border-border-50  bg-background rounded-xl ${className}`,
         ...props,
-        children
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(
+            "div",
+            {
+              className: `
+          flex flex-col gap-1 items-center justify-center p-4 
+          ${actionCardClasses}
+          ${extended ? "rounded-t-xl" : "rounded-xl"}`,
+              children: [
+                /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+                  "span",
+                  {
+                    className: `size-7.5 rounded-full flex items-center justify-center ${actionIconClasses}`,
+                    children: icon
+                  }
+                ),
+                /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+                  Text_default,
+                  {
+                    size: "2xs",
+                    weight: "medium",
+                    className: "text-text-800 uppercase truncate",
+                    children: title
+                  }
+                ),
+                /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("p", { className: `text-lg font-bold truncate ${actionSubTitleClasses}`, children: subTitle })
+              ]
+            }
+          ),
+          extended && /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { className: "flex flex-col items-center gap-2.5 pb-9.5 pt-2.5", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+              "p",
+              {
+                className: `text-2xs font-medium uppercase truncate ${actionHeaderClasses}`,
+                children: header
+              }
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(Badge_default, { size: "large", action: "info", children: description })
+          ] })
+        ]
       }
     );
   }
 );
-DropdownMenuContent.displayName = "DropdownMenuContent";
-var DropdownMenuItem = (0, import_react11.forwardRef)(
+var CardQuestions = (0, import_react11.forwardRef)(
   ({
+    header,
+    state = "undone",
     className,
-    size = "small",
-    children,
-    iconRight,
-    iconLeft,
-    disabled = false,
-    onClick,
-    variant = "menu",
-    store: externalStore,
+    onClickButton,
+    valueButton,
     ...props
   }, ref) => {
-    const store = useDropdownStore(externalStore);
-    const setOpen = (0, import_zustand2.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";
-      }
-      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" } : {};
-    };
+    const isDone = state === "done";
+    const stateLabel = isDone ? "Realizado" : "N\xE3o Realizado";
+    const buttonLabel = isDone ? "Ver Quest\xE3o" : "Responder";
     return /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(
-      "div",
+      CardBase,
       {
         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,
+        layout: "horizontal",
+        padding: "medium",
+        minHeight: "medium",
+        className: `justify-between gap-4 ${className}`,
         ...props,
         children: [
-          iconLeft,
-          /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("span", { className: "w-full text-md", children }),
-          iconRight
+          /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("section", { className: "flex flex-col gap-1 flex-1 min-w-0", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("p", { className: "font-bold text-xs text-text-950 truncate", children: header }),
+            /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { className: "flex flex-row gap-6 items-center", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+                Badge_default,
+                {
+                  size: "medium",
+                  variant: "solid",
+                  action: isDone ? "success" : "error",
+                  children: stateLabel
+                }
+              ),
+              /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("span", { className: "flex flex-row items-center gap-1 text-text-700 text-xs", children: [
+                isDone ? "Nota" : "Sem nota",
+                isDone && /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(Badge_default, { size: "medium", action: "success", children: "00" })
+              ] })
+            ] })
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("span", { className: "flex-shrink-0", children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+            Button_default,
+            {
+              size: "extra-small",
+              onClick: () => onClickButton?.(valueButton),
+              className: "min-w-fit",
+              children: buttonLabel
+            }
+          ) })
         ]
       }
     );
   }
 );
-DropdownMenuItem.displayName = "DropdownMenuItem";
-var DropdownMenuSeparator = (0, import_react11.forwardRef)(({ className, store: _store, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
-  "div",
-  {
-    ref,
-    className: `my-1 h-px bg-border-200 ${className}`,
+var CardProgress = (0, import_react11.forwardRef)(
+  ({
+    header,
+    subhead,
+    initialDate,
+    endDate,
+    progress = 0,
+    direction = "horizontal",
+    icon,
+    color = "#B7DFFF",
+    progressVariant = "blue",
+    showDates = true,
+    className,
     ...props
-  }
-));
-DropdownMenuSeparator.displayName = "DropdownMenuSeparator";
-var ProfileMenuTrigger = (0, import_react11.forwardRef)(({ className, onClick, store: externalStore, ...props }, ref) => {
-  const store = useDropdownStore(externalStore);
-  const open = (0, import_zustand2.useStore)(store, (s) => s.open);
-  const toggleOpen = () => store.setState({ open: !open });
-  return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
-    "button",
-    {
-      ref,
-      className: `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_runtime23.jsx)("span", { className: "size-6 rounded-full bg-primary-100 flex items-center justify-center", children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_phosphor_react10.User, { className: "text-primary-950", size: 18 }) })
-    }
-  );
-});
-ProfileMenuTrigger.displayName = "ProfileMenuTrigger";
-var ProfileMenuHeader = (0, import_react11.forwardRef)(({ className, name, email, store: _store, ...props }, ref) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(
-    "div",
-    {
-      ref,
-      "data-component": "ProfileMenuHeader",
-      className: `
-          flex flex-row gap-4 items-center
-          ${className}
-        `,
-      ...props,
-      children: [
-        /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("span", { className: "size-16 bg-primary-100 rounded-full flex items-center justify-center", children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_phosphor_react10.User, { size: 34, className: "text-primary-950" }) }),
-        /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { className: "flex flex-col ", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("p", { className: "text-xl font-bold text-text-950", children: name }),
-          /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("p", { className: "text-md text-text-600", children: email })
-        ] })
-      ]
-    }
-  );
-});
-ProfileMenuHeader.displayName = "ProfileMenuHeader";
-var ProfileMenuSection = (0, import_react11.forwardRef)(({ className, children, store: _store, ...props }, ref) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
-    "div",
-    {
-      ref,
-      className: `
-          flex flex-col p-2
-          ${className}
-        `,
-      ...props,
-      children
-    }
-  );
-});
-ProfileMenuSection.displayName = "ProfileMenuSection";
-var ProfileMenuFooter = ({
-  className,
-  disabled = false,
-  onClick,
-  store: externalStore,
-  ...props
-}) => {
-  const store = useDropdownStore(externalStore);
-  const setOpen = (0, import_zustand2.useStore)(store, (s) => s.setOpen);
-  return /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(
-    Button_default,
-    {
-      variant: "outline",
-      className: `w-full ${className}`,
-      disabled,
-      onClick: (e) => {
-        setOpen(false);
-        onClick?.(e);
-      },
-      ...props,
-      children: [
-        /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("span", { className: "mr-2 flex items-center", children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_phosphor_react10.SignOut, {}) }),
-        /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("span", { children: "Sair" })
-      ]
-    }
-  );
-};
-ProfileMenuFooter.displayName = "ProfileMenuFooter";
-var DropdownMenu_default = DropdownMenu;
-
-// src/components/Select/Select.tsx
-var import_zustand3 = require("zustand");
-var import_react12 = require("react");
-var import_phosphor_react11 = require("phosphor-react");
-var import_jsx_runtime24 = require("react/jsx-runtime");
-var VARIANT_CLASSES4 = {
-  outlined: "border rounded-lg focus:border-primary-950",
-  underlined: "border-b focus:border-primary-950",
-  rounded: "border rounded-full focus:border-primary-950"
-};
-var SIZE_CLASSES11 = {
-  small: "text-sm",
-  medium: "text-md",
-  large: "text-lg",
-  "extra-large": "text-lg"
-};
-var HEIGHT_CLASSES = {
-  small: "h-8",
-  medium: "h-9",
-  large: "h-10",
-  "extra-large": "h-12"
-};
-var PADDING_CLASSES = {
-  small: "px-2 py-1",
-  medium: "px-3 py-2",
-  large: "px-4 py-3",
-  "extra-large": "px-5 py-4"
-};
-var SIDE_CLASSES2 = {
-  top: "bottom-full -translate-y-1",
-  right: "top-full translate-y-1",
-  bottom: "top-full translate-y-1",
-  left: "top-full translate-y-1"
-};
-var ALIGN_CLASSES2 = {
-  start: "left-0",
-  center: "left-1/2 -translate-x-1/2",
-  end: "right-0"
-};
-function createSelectStore(onValueChange) {
-  return (0, import_zustand3.create)((set) => ({
-    open: false,
-    setOpen: (open) => set({ open }),
-    value: "",
-    setValue: (value) => set({ value }),
-    selectedLabel: "",
-    setSelectedLabel: (label) => set({ selectedLabel: label }),
-    onValueChange
-  }));
-}
-var useSelectStore = (externalStore) => {
-  if (!externalStore) {
-    throw new Error(
-      "Component must be used within a Select (store is missing)"
+  }, ref) => {
+    const isHorizontal = direction === "horizontal";
+    const contentComponent = {
+      horizontal: /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(import_jsx_runtime23.Fragment, { children: [
+        showDates && /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { className: "flex flex-row gap-6 items-center", children: [
+          initialDate && /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("span", { className: "flex flex-row gap-1 items-center text-2xs", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("p", { className: "text-text-800 font-semibold", children: "In\xEDcio" }),
+            /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("p", { className: "text-text-600", children: initialDate })
+          ] }),
+          endDate && /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("span", { className: "flex flex-row gap-1 items-center text-2xs", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("p", { className: "text-text-800 font-semibold", children: "Fim" }),
+            /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("p", { className: "text-text-600", children: endDate })
+          ] })
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("span", { className: "grid grid-cols-[1fr_auto] items-center gap-2", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+            ProgressBar_default,
+            {
+              size: "small",
+              value: progress,
+              variant: progressVariant,
+              "data-testid": "progress-bar"
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(
+            Text_default,
+            {
+              size: "xs",
+              weight: "medium",
+              className: `text-text-950 leading-none tracking-normal text-center flex-none`,
+              children: [
+                Math.round(progress),
+                "%"
+              ]
+            }
+          )
+        ] })
+      ] }),
+      vertical: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("p", { className: "text-sm text-text-800", children: subhead })
+    };
+    return /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(
+      CardBase,
+      {
+        ref,
+        layout: isHorizontal ? "horizontal" : "vertical",
+        padding: "none",
+        minHeight: "medium",
+        cursor: "pointer",
+        className: `${isHorizontal ? "h-20" : ""} ${className}`,
+        ...props,
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+            "div",
+            {
+              className: `
+            flex justify-center items-center [&>svg]:size-6 text-text-950
+            ${isHorizontal ? "min-w-[80px] min-h-[80px] rounded-l-xl" : "min-h-[50px] w-full rounded-t-xl"}
+            ${!color.startsWith("#") ? `bg-${color}` : ""}
+          `,
+              style: color.startsWith("#") ? { backgroundColor: color } : void 0,
+              "data-testid": "icon-container",
+              children: icon
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(
+            "div",
+            {
+              className: `
+            p-4 flex flex-col justify-between w-full h-full
+            ${!isHorizontal && "gap-4"}
+          `,
+              children: [
+                /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(Text_default, { size: "sm", weight: "bold", className: "text-text-950 truncate", children: header }),
+                contentComponent[direction]
+              ]
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+var CardTopic = (0, import_react11.forwardRef)(
+  ({
+    header,
+    subHead,
+    progress,
+    showPercentage = false,
+    progressVariant = "blue",
+    className = "",
+    ...props
+  }, ref) => {
+    return /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(
+      CardBase,
+      {
+        ref,
+        layout: "vertical",
+        padding: "small",
+        minHeight: "medium",
+        cursor: "pointer",
+        className: `justify-center gap-2  py-2 px-4 ${className}`,
+        ...props,
+        children: [
+          subHead && /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("span", { className: "text-text-600 text-2xs flex flex-row gap-1", children: subHead.map((text, index) => /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(import_react11.Fragment, { children: [
+            /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("p", { children: text }),
+            index < subHead.length - 1 && /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("p", { children: "\u2022" })
+          ] }, `${text} - ${index}`)) }),
+          /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("p", { className: "text-sm text-text-950 font-bold truncate", children: header }),
+          /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("span", { className: "grid grid-cols-[1fr_auto] items-center gap-2", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+              ProgressBar_default,
+              {
+                size: "small",
+                value: progress,
+                variant: progressVariant,
+                "data-testid": "progress-bar"
+              }
+            ),
+            showPercentage && /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(
+              Text_default,
+              {
+                size: "xs",
+                weight: "medium",
+                className: `text-text-950 leading-none tracking-normal text-center flex-none`,
+                children: [
+                  Math.round(progress),
+                  "%"
+                ]
+              }
+            )
+          ] })
+        ]
+      }
+    );
+  }
+);
+var CardPerformance = (0, import_react11.forwardRef)(
+  ({
+    header,
+    progress,
+    description = "Sem dados ainda! Voc\xEA ainda n\xE3o fez um question\xE1rio neste assunto.",
+    actionVariant = "button",
+    progressVariant = "blue",
+    labelProgress = "",
+    className = "",
+    onClickButton,
+    valueButton,
+    ...props
+  }, ref) => {
+    const hasProgress = progress !== void 0;
+    return /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(
+      CardBase,
+      {
+        ref,
+        layout: "horizontal",
+        padding: "medium",
+        minHeight: "none",
+        className: `justify-between gap-2 ${actionVariant == "caret" ? "cursor-pointer" : ""} ${className}`,
+        onClick: () => actionVariant == "caret" && onClickButton?.(valueButton),
+        ...props,
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { className: "w-full flex flex-col justify-between gap-2", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { className: "flex flex-row justify-between items-center gap-2", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("p", { className: "text-lg font-bold text-text-950 truncate flex-1 min-w-0", children: header }),
+              actionVariant === "button" && /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+                Button_default,
+                {
+                  variant: "outline",
+                  size: "extra-small",
+                  onClick: () => onClickButton?.(valueButton),
+                  className: "min-w-fit flex-shrink-0",
+                  children: "Ver Aula"
+                }
+              )
+            ] }),
+            /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("div", { className: "w-full", children: hasProgress ? /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+              ProgressBar_default,
+              {
+                value: progress,
+                label: `${progress}% ${labelProgress}`,
+                variant: progressVariant
+              }
+            ) : /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("p", { className: "text-xs text-text-600 truncate", children: description }) })
+          ] }),
+          actionVariant == "caret" && /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+            import_phosphor_react10.CaretRight,
+            {
+              className: "size-4.5 text-text-800 cursor-pointer",
+              "data-testid": "caret-icon"
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+var CardResults = (0, import_react11.forwardRef)(
+  ({
+    header,
+    correct_answers,
+    incorrect_answers,
+    icon,
+    direction = "col",
+    color = "#B7DFFF",
+    className,
+    ...props
+  }, ref) => {
+    const isRow = direction == "row";
+    return /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(
+      CardBase,
+      {
+        ref,
+        layout: "horizontal",
+        padding: "none",
+        minHeight: "medium",
+        className: `items-center pr-4 ${className}`,
+        ...props,
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+            "div",
+            {
+              className: `
+              flex justify-center items-center [&>svg]:size-8 text-text-950 min-w-20 max-w-20 min-h-20 h-full rounded-l-xl
+            `,
+              style: {
+                backgroundColor: color
+              },
+              children: icon
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(
+            "div",
+            {
+              className: `
+            p-4 flex justify-between w-full h-full
+            ${isRow ? "flex-row items-center gap-2" : "flex-col"}
+          `,
+              children: [
+                /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("p", { className: "text-sm font-bold text-text-950 truncate flex-1 min-w-0", children: header }),
+                /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("span", { className: "flex flex-row gap-1 items-center", children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(
+                    Badge_default,
+                    {
+                      action: "success",
+                      variant: "solid",
+                      size: "medium",
+                      iconLeft: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_phosphor_react10.CheckCircle, {}),
+                      children: [
+                        correct_answers,
+                        " Corretas"
+                      ]
+                    }
+                  ),
+                  /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(
+                    Badge_default,
+                    {
+                      action: "error",
+                      variant: "solid",
+                      size: "medium",
+                      iconLeft: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_phosphor_react10.XCircle, {}),
+                      children: [
+                        incorrect_answers,
+                        " Incorretas"
+                      ]
+                    }
+                  )
+                ] })
+              ]
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_phosphor_react10.CaretRight, { className: "min-w-6 min-h-6 text-text-800 cursor-pointer" })
+        ]
+      }
+    );
+  }
+);
+var CardStatus = (0, import_react11.forwardRef)(
+  ({ header, className, status, ...props }, ref) => {
+    return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+      CardBase,
+      {
+        ref,
+        layout: "horizontal",
+        padding: "medium",
+        minHeight: "medium",
+        className: `items-center ${className}`,
+        ...props,
+        children: /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { className: "flex justify-between w-full h-full flex-row items-center gap-2", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("p", { className: "text-sm font-bold text-text-950 truncate flex-1 min-w-0", children: header }),
+          status && /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("span", { className: "flex flex-row gap-1 items-center flex-shrink-0", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+              Badge_default,
+              {
+                action: status == "correct" ? "success" : "error",
+                variant: "solid",
+                size: "medium",
+                iconLeft: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_phosphor_react10.CheckCircle, {}),
+                children: status == "correct" ? "Correta" : "Incorreta"
+              }
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("p", { className: "text-sm text-text-800", children: "Respondida" })
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_phosphor_react10.CaretRight, { className: "min-w-6 min-h-6 text-text-800 cursor-pointer flex-shrink-0 ml-2" })
+        ] })
+      }
+    );
+  }
+);
+var CardSettings = (0, import_react11.forwardRef)(
+  ({ header, className, icon, ...props }, ref) => {
+    return /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(
+      CardBase,
+      {
+        ref,
+        layout: "horizontal",
+        padding: "small",
+        minHeight: "none",
+        className: `border-none items-center gap-2 text-text-700 ${className}`,
+        ...props,
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("span", { className: "[&>svg]:size-6", children: icon }),
+          /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("p", { className: "w-full text-sm truncate", children: header }),
+          /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_phosphor_react10.CaretRight, { size: 24, className: "cursor-pointer" })
+        ]
+      }
+    );
+  }
+);
+var CardSupport = (0, import_react11.forwardRef)(
+  ({ header, className, direction = "col", children, ...props }, ref) => {
+    return /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(
+      CardBase,
+      {
+        ref,
+        layout: "horizontal",
+        padding: "medium",
+        minHeight: "none",
+        className: `border-none items-center gap-2 text-text-700 ${className}`,
+        ...props,
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(
+            "div",
+            {
+              className: `
+              w-full flex ${direction == "col" ? "flex-col" : "flex-row items-center"}  gap-2
+          `,
+              children: [
+                /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("span", { className: "w-full min-w-0", children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("p", { className: "text-sm text-text-950 font-bold truncate", children: header }) }),
+                /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("span", { className: "flex flex-row gap-1", children })
+              ]
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_phosphor_react10.CaretRight, { className: "text-text-800 cursor-pointer", size: 24 })
+        ]
+      }
+    );
+  }
+);
+var CardForum = (0, import_react11.forwardRef)(
+  ({
+    title,
+    content,
+    comments,
+    onClickComments,
+    valueComments,
+    onClickProfile,
+    valueProfile,
+    className = "",
+    date,
+    hour,
+    ...props
+  }, ref) => {
+    return /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(
+      CardBase,
+      {
+        ref,
+        layout: "horizontal",
+        padding: "medium",
+        minHeight: "none",
+        variant: "minimal",
+        className: `w-auto h-auto gap-3 ${className}`,
+        ...props,
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+            "button",
+            {
+              type: "button",
+              "aria-label": "Ver perfil",
+              onClick: () => onClickProfile?.(valueProfile),
+              className: "min-w-8 h-8 rounded-full bg-background-950"
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { className: "flex flex-col gap-2 flex-1 min-w-0", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { className: "flex flex-row gap-1 items-center flex-wrap", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("p", { className: "text-xs font-semibold text-primary-700 truncate", children: title }),
+              /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("p", { className: "text-xs text-text-600", children: [
+                "\u2022 ",
+                date,
+                " \u2022 ",
+                hour
+              ] })
+            ] }),
+            /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("p", { className: "text-text-950 text-sm line-clamp-2 truncate", children: content }),
+            /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(
+              "button",
+              {
+                type: "button",
+                "aria-label": "Ver coment\xE1rios",
+                onClick: () => onClickComments?.(valueComments),
+                className: "text-text-600 flex flex-row gap-2 items-center",
+                children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_phosphor_react10.ChatCircleText, { "aria-hidden": "true", size: 16 }),
+                  /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("p", { className: "text-xs", children: [
+                    comments,
+                    " respostas"
+                  ] })
+                ]
+              }
+            )
+          ] })
+        ]
+      }
     );
   }
-  return externalStore;
-};
-function getLabelAsNode(children) {
-  if (typeof children === "string" || typeof children === "number") {
-    return children;
-  }
-  const flattened = import_react12.Children.toArray(children);
-  if (flattened.length === 1) return flattened[0];
-  return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_jsx_runtime24.Fragment, { children: flattened });
-}
-var injectStore2 = (children, store, size, selectId) => {
-  return import_react12.Children.map(children, (child) => {
-    if ((0, import_react12.isValidElement)(child)) {
-      const typedChild = child;
-      const newProps = {
-        store
-      };
-      if (typedChild.type === SelectTrigger) {
-        newProps.size = size;
-        newProps.selectId = selectId;
-      }
-      if (typedChild.props.children) {
-        newProps.children = injectStore2(
-          typedChild.props.children,
-          store,
-          size,
-          selectId
-        );
+);
+var CardAudio = (0, import_react11.forwardRef)(
+  ({
+    src,
+    title,
+    onPlay,
+    onPause,
+    onEnded,
+    onAudioTimeUpdate,
+    loop = false,
+    preload = "metadata",
+    tracks,
+    className,
+    ...props
+  }, ref) => {
+    const [isPlaying, setIsPlaying] = (0, import_react11.useState)(false);
+    const [currentTime, setCurrentTime] = (0, import_react11.useState)(0);
+    const [duration, setDuration] = (0, import_react11.useState)(0);
+    const [volume, setVolume] = (0, import_react11.useState)(1);
+    const [showVolumeControl, setShowVolumeControl] = (0, import_react11.useState)(false);
+    const audioRef = (0, import_react11.useRef)(null);
+    const formatTime = (time) => {
+      const minutes = Math.floor(time / 60);
+      const seconds = Math.floor(time % 60);
+      return `${minutes}:${seconds.toString().padStart(2, "0")}`;
+    };
+    const handlePlayPause = () => {
+      if (isPlaying) {
+        audioRef.current?.pause();
+        setIsPlaying(false);
+        onPause?.();
+      } else {
+        audioRef.current?.play();
+        setIsPlaying(true);
+        onPlay?.();
       }
-      return (0, import_react12.cloneElement)(typedChild, newProps);
-    }
-    return child;
-  });
-};
-var Select = ({
-  children,
-  defaultValue = "",
-  value: propValue,
-  onValueChange,
-  size = "small",
-  label,
-  helperText,
-  errorMessage,
-  id
-}) => {
-  const storeRef = (0, import_react12.useRef)(null);
-  storeRef.current ??= createSelectStore(onValueChange);
-  const store = storeRef.current;
-  const selectRef = (0, import_react12.useRef)(null);
-  const { open, setOpen, setValue, selectedLabel } = (0, import_zustand3.useStore)(store, (s) => s);
-  const generatedId = (0, import_react12.useId)();
-  const selectId = id ?? `select-${generatedId}`;
-  const findLabelForValue = (children2, targetValue) => {
-    let found = null;
-    const search = (nodes) => {
-      import_react12.Children.forEach(nodes, (child) => {
-        if (!(0, import_react12.isValidElement)(child)) return;
-        const typedChild = child;
-        if (typedChild.type === SelectItem && typedChild.props.value === targetValue) {
-          if (typeof typedChild.props.children === "string")
-            found = typedChild.props.children;
-        }
-        if (typedChild.props.children && !found)
-          search(typedChild.props.children);
-      });
     };
-    search(children2);
-    return found;
-  };
-  (0, import_react12.useEffect)(() => {
-    if (!selectedLabel && defaultValue) {
-      const label2 = findLabelForValue(children, defaultValue);
-      if (label2) store.setState({ selectedLabel: label2 });
-    }
-  }, [children, defaultValue, selectedLabel]);
-  (0, import_react12.useEffect)(() => {
-    const handleClickOutside = (event) => {
-      if (selectRef.current && !selectRef.current.contains(event.target)) {
-        setOpen(false);
+    const handleTimeUpdate = () => {
+      const current = audioRef.current?.currentTime ?? 0;
+      const total = audioRef.current?.duration ?? 0;
+      setCurrentTime(current);
+      setDuration(total);
+      onAudioTimeUpdate?.(current, total);
+    };
+    const handleLoadedMetadata = () => {
+      setDuration(audioRef.current?.duration ?? 0);
+    };
+    const handleEnded = () => {
+      setIsPlaying(false);
+      setCurrentTime(0);
+      onEnded?.();
+    };
+    const handleProgressClick = (e) => {
+      const rect = e.currentTarget.getBoundingClientRect();
+      const clickX = e.clientX - rect.left;
+      const width = rect.width;
+      const percentage = clickX / width;
+      const newTime = percentage * duration;
+      if (audioRef.current) {
+        audioRef.current.currentTime = newTime;
       }
+      setCurrentTime(newTime);
     };
-    const handleArrowKeys = (event) => {
-      const selectContent = selectRef.current?.querySelector('[role="menu"]');
-      if (selectContent) {
-        event.preventDefault();
-        const items = Array.from(
-          selectContent.querySelectorAll(
-            '[role="menuitem"]:not([aria-disabled="true"])'
-          )
-        ).filter((el) => el instanceof HTMLElement);
-        const focused = document.activeElement;
-        const currentIndex = items.findIndex((item) => item === focused);
-        let nextIndex = 0;
-        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 handleVolumeChange = (e) => {
+      const newVolume = parseFloat(e.target.value);
+      setVolume(newVolume);
+      if (audioRef.current) {
+        audioRef.current.volume = newVolume;
       }
     };
-    if (open) {
-      document.addEventListener("mousedown", handleClickOutside);
-      document.addEventListener("keydown", handleArrowKeys);
-    }
-    return () => {
-      document.removeEventListener("mousedown", handleClickOutside);
-      document.removeEventListener("keydown", handleArrowKeys);
+    const toggleVolumeControl = () => {
+      setShowVolumeControl(!showVolumeControl);
     };
-  }, [open]);
-  (0, import_react12.useEffect)(() => {
-    if (propValue) {
-      setValue(propValue);
-      const label2 = findLabelForValue(children, propValue);
-      if (label2) store.setState({ selectedLabel: label2 });
-    }
-  }, [propValue]);
-  const sizeClasses = SIZE_CLASSES11[size];
-  return /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { className: "w-full", children: [
-    label && /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
-      "label",
-      {
-        htmlFor: selectId,
-        className: `block font-bold text-text-900 mb-1.5 ${sizeClasses}`,
-        children: label
+    const getVolumeIcon = () => {
+      if (volume === 0) {
+        return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_phosphor_react10.SpeakerSimpleX, {});
       }
-    ),
-    /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { className: `relative ${sizeClasses}`, ref: selectRef, children: injectStore2(children, store, size, selectId) }),
-    /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { className: "mt-1.5 gap-1.5", children: [
-      helperText && /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("p", { className: "text-sm text-text-500", children: helperText }),
-      errorMessage && /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("p", { className: "flex gap-1 items-center text-sm text-indicator-error", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_phosphor_react11.WarningCircle, { size: 16 }),
-        " ",
-        errorMessage
-      ] })
-    ] })
-  ] });
-};
-var SelectValue = ({
-  placeholder,
-  store: externalStore
-}) => {
-  const store = useSelectStore(externalStore);
-  const selectedLabel = (0, import_zustand3.useStore)(store, (s) => s.selectedLabel);
-  const value = (0, import_zustand3.useStore)(store, (s) => s.value);
-  return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("span", { className: "text-inherit", children: selectedLabel || placeholder || value });
-};
-var SelectTrigger = (0, import_react12.forwardRef)(
-  ({
-    className,
-    invalid = false,
-    variant = "outlined",
-    store: externalStore,
-    disabled,
-    size = "medium",
-    selectId,
-    ...props
-  }, ref) => {
-    const store = useSelectStore(externalStore);
-    const open = (0, import_zustand3.useStore)(store, (s) => s.open);
-    const toggleOpen = () => store.setState({ open: !open });
-    const variantClasses = VARIANT_CLASSES4[variant];
-    const heightClasses = HEIGHT_CLASSES[size];
-    const paddingClasses = PADDING_CLASSES[size];
-    return /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(
-      "button",
+      if (volume < 0.5) {
+        return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_phosphor_react10.SpeakerLow, {});
+      }
+      return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_phosphor_react10.SpeakerHigh, {});
+    };
+    return /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(
+      CardBase,
       {
         ref,
-        id: selectId,
-        className: `
-        flex min-w-[220px] w-full items-center justify-between border-border-300
-        ${heightClasses} ${paddingClasses}
-        ${invalid && `${variant == "underlined" ? "border-b-2" : "border-2"} border-indicator-error text-text-600`}
-        ${disabled ? "cursor-not-allowed text-text-400 pointer-events-none opacity-50" : "cursor-pointer hover:bg-background-50 focus:bg-accent focus:text-accent-foreground hover:bg-accent hover:text-accent-foreground"}
-        ${!invalid && !disabled ? "text-text-700" : ""}
-        ${variantClasses}
-        ${className}
-      `,
-        onClick: toggleOpen,
-        "aria-expanded": open,
-        "aria-haspopup": "listbox",
-        "aria-controls": open ? "select-content" : void 0,
+        layout: "horizontal",
+        padding: "medium",
+        minHeight: "none",
+        className: `w-auto h-14 items-center gap-2 ${className}`,
         ...props,
         children: [
-          props.children,
-          /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
-            import_phosphor_react11.CaretDown,
+          /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+            "audio",
+            {
+              ref: audioRef,
+              src,
+              loop,
+              preload,
+              onTimeUpdate: handleTimeUpdate,
+              onLoadedMetadata: handleLoadedMetadata,
+              onEnded: handleEnded,
+              "data-testid": "audio-element",
+              "aria-label": title,
+              children: tracks ? tracks.map((track) => /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+                "track",
+                {
+                  kind: track.kind,
+                  src: track.src,
+                  srcLang: track.srcLang,
+                  label: track.label,
+                  default: track.default
+                },
+                track.src
+              )) : /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+                "track",
+                {
+                  kind: "captions",
+                  src: "data:text/vtt;base64,",
+                  srcLang: "pt",
+                  label: "Sem legendas dispon\xEDveis"
+                }
+              )
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+            "button",
+            {
+              type: "button",
+              onClick: handlePlayPause,
+              disabled: !src,
+              className: "cursor-pointer text-text-950 hover:text-primary-600 disabled:text-text-400 disabled:cursor-not-allowed",
+              "aria-label": isPlaying ? "Pausar" : "Reproduzir",
+              children: isPlaying ? /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("div", { className: "w-6 h-6 flex items-center justify-center", children: /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { className: "flex gap-0.5", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("div", { className: "w-1 h-4 bg-current rounded-sm" }),
+                /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("div", { className: "w-1 h-4 bg-current rounded-sm" })
+              ] }) }) : /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_phosphor_react10.Play, { size: 24 })
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("p", { className: "text-text-800 text-sm font-medium min-w-[2.5rem]", children: formatTime(currentTime) }),
+          /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("div", { className: "flex-1 relative", "data-testid": "progress-bar", children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+            "button",
             {
-              className: `h-[1em] w-[1em] opacity-50 transition-transform ${open ? "rotate-180" : ""}`
+              type: "button",
+              className: "w-full h-2 bg-border-100 rounded-full cursor-pointer",
+              onClick: handleProgressClick,
+              onKeyDown: (e) => {
+                if (e.key === "Enter" || e.key === " ") {
+                  e.preventDefault();
+                  handleProgressClick(
+                    e
+                  );
+                }
+              },
+              "aria-label": "Barra de progresso do \xE1udio",
+              children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+                "div",
+                {
+                  className: "h-full bg-primary-600 rounded-full transition-all duration-100",
+                  style: {
+                    width: duration > 0 ? `${currentTime / duration * 100}%` : "0%"
+                  }
+                }
+              )
+            }
+          ) }),
+          /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("p", { className: "text-text-800 text-sm font-medium min-w-[2.5rem]", children: formatTime(duration) }),
+          /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { className: "relative", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+              "button",
+              {
+                type: "button",
+                onClick: toggleVolumeControl,
+                className: "cursor-pointer text-text-950 hover:text-primary-600",
+                "aria-label": "Controle de volume",
+                children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("div", { className: "w-6 h-6 flex items-center justify-center", children: getVolumeIcon() })
+              }
+            ),
+            showVolumeControl && /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+              "button",
+              {
+                type: "button",
+                className: "absolute bottom-full right-0 mb-2 p-2 bg-background border border-border-100 rounded-lg shadow-lg focus:outline-none focus:ring-2 focus:ring-primary-500",
+                onKeyDown: (e) => {
+                  if (e.key === "Escape") {
+                    setShowVolumeControl(false);
+                  }
+                },
+                children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+                  "input",
+                  {
+                    type: "range",
+                    min: "0",
+                    max: "1",
+                    step: "0.1",
+                    value: volume,
+                    onChange: handleVolumeChange,
+                    onKeyDown: (e) => {
+                      if (e.key === "ArrowUp" || e.key === "ArrowRight") {
+                        e.preventDefault();
+                        const newVolume = Math.min(
+                          1,
+                          Math.round((volume + 0.1) * 10) / 10
+                        );
+                        setVolume(newVolume);
+                        if (audioRef.current) audioRef.current.volume = newVolume;
+                      } else if (e.key === "ArrowDown" || e.key === "ArrowLeft") {
+                        e.preventDefault();
+                        const newVolume = Math.max(
+                          0,
+                          Math.round((volume - 0.1) * 10) / 10
+                        );
+                        setVolume(newVolume);
+                        if (audioRef.current) audioRef.current.volume = newVolume;
+                      }
+                    },
+                    className: "w-20 h-2 bg-border-100 rounded-lg appearance-none cursor-pointer",
+                    style: {
+                      background: `linear-gradient(to right, #3b82f6 0%, #3b82f6 ${volume * 100}%, #e5e7eb ${volume * 100}%, #e5e7eb 100%)`
+                    },
+                    "aria-label": "Volume",
+                    "aria-valuenow": Math.round(volume * 100),
+                    "aria-valuemin": 0,
+                    "aria-valuemax": 100
+                  }
+                )
+              }
+            )
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+            import_phosphor_react10.DotsThreeVertical,
+            {
+              size: 24,
+              className: "text-text-950 cursor-pointer hover:text-primary-600"
             }
           )
         ]
@@ -3613,776 +4048,1095 @@ var SelectTrigger = (0, import_react12.forwardRef)(
     );
   }
 );
-SelectTrigger.displayName = "SelectTrigger";
-var SelectContent = (0, import_react12.forwardRef)(
-  ({
-    children,
-    className,
-    align = "start",
-    side = "bottom",
-    store: externalStore,
-    ...props
-  }, ref) => {
-    const store = useSelectStore(externalStore);
-    const open = (0, import_zustand3.useStore)(store, (s) => s.open);
-    if (!open) return null;
-    const getPositionClasses = () => `w-full min-w-full absolute ${SIDE_CLASSES2[side]} ${ALIGN_CLASSES2[align]}`;
-    return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
-      "div",
+var SIMULADO_BACKGROUND_CLASSES = {
+  enem: "bg-exam-1",
+  prova: "bg-exam-2",
+  simuladao: "bg-exam-3",
+  vestibular: "bg-exam-4"
+};
+var CardSimulado = (0, import_react11.forwardRef)(
+  ({ title, duration, info, backgroundColor, className, ...props }, ref) => {
+    const backgroundClass = SIMULADO_BACKGROUND_CLASSES[backgroundColor];
+    return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+      CardBase,
       {
-        role: "menu",
         ref,
-        className: `bg-background z-50 min-w-[210px] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md border-border-100 ${getPositionClasses()} ${className}`,
+        layout: "horizontal",
+        padding: "medium",
+        minHeight: "none",
+        cursor: "pointer",
+        className: `${backgroundClass} hover:shadow-soft-shadow-2 transition-shadow duration-200 ${className}`,
         ...props,
-        children
+        children: /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { className: "flex justify-between items-center w-full gap-4", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { className: "flex flex-col gap-1 flex-1 min-w-0", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(Text_default, { size: "lg", weight: "bold", className: "text-text-950 truncate", children: title }),
+            /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { className: "flex items-center gap-4 text-text-700", children: [
+              duration && /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { className: "flex items-center gap-1", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_phosphor_react10.Clock, { size: 16, className: "flex-shrink-0" }),
+                /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(Text_default, { size: "sm", children: duration })
+              ] }),
+              /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(Text_default, { size: "sm", className: "truncate", children: info })
+            ] })
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+            import_phosphor_react10.CaretRight,
+            {
+              size: 24,
+              className: "text-text-800 flex-shrink-0",
+              "data-testid": "caret-icon"
+            }
+          )
+        ] })
       }
     );
   }
 );
-SelectContent.displayName = "SelectContent";
-var SelectItem = (0, import_react12.forwardRef)(
+
+// src/components/Accordation/Accordation.tsx
+var import_phosphor_react11 = require("phosphor-react");
+var import_jsx_runtime24 = require("react/jsx-runtime");
+var CardAccordation = (0, import_react12.forwardRef)(
   ({
-    className,
+    title,
     children,
-    value,
-    disabled = false,
-    store: externalStore,
+    className,
+    defaultExpanded = false,
+    onToggleExpanded,
     ...props
   }, ref) => {
-    const store = useSelectStore(externalStore);
-    const {
-      value: selectedValue,
-      setValue,
-      setOpen,
-      setSelectedLabel,
-      onValueChange
-    } = (0, import_zustand3.useStore)(store, (s) => s);
-    const handleClick = (e) => {
-      const labelNode = getLabelAsNode(children);
-      if (!disabled) {
-        setValue(value);
-        setSelectedLabel(labelNode);
-        setOpen(false);
-        onValueChange?.(value);
-      }
-      props.onClick?.(e);
+    const [isExpanded, setIsExpanded] = (0, import_react12.useState)(defaultExpanded);
+    const contentId = (0, import_react12.useId)();
+    const handleToggle = () => {
+      const newExpanded = !isExpanded;
+      setIsExpanded(newExpanded);
+      onToggleExpanded?.(newExpanded);
     };
     return /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(
-      "div",
+      CardBase,
       {
-        role: "menuitem",
-        "aria-disabled": disabled,
         ref,
-        className: `
-          focus-visible:bg-background-50
-          relative flex select-none items-center gap-2 rounded-sm p-3 outline-none transition-colors [&>svg]:size-4 [&>svg]:shrink-0
-          ${className}
-          ${disabled ? "cursor-not-allowed text-text-400 pointer-events-none opacity-50" : "cursor-pointer hover:bg-background-50 text-text-700 focus:bg-accent focus:text-accent-foreground hover:bg-accent hover:text-accent-foreground"}
-          ${selectedValue === value && "bg-background-50"}
-        `,
-        onClick: handleClick,
-        onKeyDown: (e) => {
-          if (e.key === "Enter" || e.key === " ") handleClick(e);
-        },
-        tabIndex: disabled ? -1 : 0,
+        layout: "vertical",
+        padding: "none",
+        minHeight: "none",
+        className: `overflow-hidden ${className}`,
         ...props,
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("span", { className: "absolute right-2 flex h-3.5 w-3.5 items-center justify-center", children: selectedValue === value && /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_phosphor_react11.Check, { className: "" }) }),
-          children
+          /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(
+            "button",
+            {
+              onClick: handleToggle,
+              className: "w-full cursor-pointer p-4 flex items-center justify-between gap-3 text-left transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-primary-500 focus:ring-inset",
+              "aria-expanded": isExpanded,
+              "aria-controls": "accordion-content",
+              children: [
+                /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+                  Text_default,
+                  {
+                    size: "sm",
+                    weight: "bold",
+                    className: "text-text-950 truncate flex-1",
+                    children: title
+                  }
+                ),
+                /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+                  import_phosphor_react11.CaretRight,
+                  {
+                    size: 20,
+                    className: `text-text-700 transition-transform duration-200 flex-shrink-0 ${isExpanded ? "rotate-90" : "rotate-0"}`,
+                    "data-testid": "accordion-caret"
+                  }
+                )
+              ]
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+            "div",
+            {
+              id: contentId,
+              className: `transition-all duration-300 ease-in-out overflow-hidden ${isExpanded ? "max-h-screen opacity-100" : "max-h-0 opacity-0"}`,
+              "data-testid": "accordion-content",
+              children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { className: "p-4 pt-0 border-border-50", children })
+            }
+          )
         ]
       }
     );
   }
 );
-SelectItem.displayName = "SelectItem";
-var Select_default = Select;
 
-// src/components/Menu/Menu.tsx
-var import_zustand4 = require("zustand");
-var import_react13 = require("react");
+// src/components/Alternative/Alternative.tsx
 var import_phosphor_react12 = require("phosphor-react");
+var import_react13 = require("react");
 var import_jsx_runtime25 = require("react/jsx-runtime");
-var createMenuStore = (onValueChange) => (0, import_zustand4.create)((set) => ({
-  value: "",
-  setValue: (value) => {
-    set({ value });
-    onValueChange?.(value);
-  },
-  onValueChange
-}));
-var useMenuStore = (externalStore) => {
-  if (!externalStore) throw new Error("MenuItem must be inside Menu");
-  return externalStore;
-};
-var VARIANT_CLASSES5 = {
-  menu: "bg-background shadow-soft-shadow-1 px-6",
-  menu2: "",
-  breadcrumb: ""
-};
-var Menu = (0, import_react13.forwardRef)(
-  ({
-    className,
-    children,
-    defaultValue,
-    value: propValue,
-    variant = "menu",
-    onValueChange,
-    ...props
-  }, ref) => {
-    const storeRef = (0, import_react13.useRef)(null);
-    storeRef.current ??= createMenuStore(onValueChange);
-    const store = storeRef.current;
-    const { setValue } = (0, import_zustand4.useStore)(store, (s) => s);
-    (0, import_react13.useEffect)(() => {
-      setValue(propValue ?? defaultValue);
-    }, [defaultValue, propValue, setValue]);
-    const baseClasses = "w-full py-2 flex flex-row items-center justify-center";
-    const variantClasses = VARIANT_CLASSES5[variant];
+var AlternativesList = ({
+  alternatives,
+  name,
+  defaultValue,
+  value,
+  onValueChange,
+  disabled = false,
+  layout = "default",
+  className = "",
+  mode = "interactive",
+  selectedValue
+}) => {
+  const uniqueId = (0, import_react13.useId)();
+  const groupName = name || `alternatives-${uniqueId}`;
+  const isReadonly = mode === "readonly";
+  const getStatusStyles = (status, isReadonly2) => {
+    const hoverClass = isReadonly2 ? "" : "hover:bg-background-50";
+    switch (status) {
+      case "correct":
+        return "bg-success-background border-success-300";
+      case "incorrect":
+        return "bg-error-background border-error-300";
+      default:
+        return `bg-background border-border-100 ${hoverClass}`;
+    }
+  };
+  const getStatusBadge = (status) => {
+    switch (status) {
+      case "correct":
+        return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(Badge_default, { variant: "solid", action: "success", iconLeft: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_phosphor_react12.CheckCircle, {}), children: "Resposta correta" });
+      case "incorrect":
+        return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(Badge_default, { variant: "solid", action: "error", iconLeft: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_phosphor_react12.XCircle, {}), children: "Resposta incorreta" });
+      default:
+        return null;
+    }
+  };
+  const getLayoutClasses = () => {
+    switch (layout) {
+      case "compact":
+        return "gap-2";
+      case "detailed":
+        return "gap-4";
+      default:
+        return "gap-3.5";
+    }
+  };
+  const renderReadonlyAlternative = (alternative) => {
+    const alternativeId = alternative.value;
+    const isUserSelected = selectedValue === alternative.value;
+    const isCorrectAnswer = alternative.status === "correct";
+    let displayStatus = void 0;
+    if (isUserSelected && !isCorrectAnswer) {
+      displayStatus = "incorrect";
+    } else if (isCorrectAnswer) {
+      displayStatus = "correct";
+    }
+    const statusStyles = getStatusStyles(displayStatus, true);
+    const statusBadge = getStatusBadge(displayStatus);
+    const renderRadio = () => {
+      const radioClasses = `w-6 h-6 rounded-full border-2 cursor-default transition-all duration-200 flex items-center justify-center ${isUserSelected ? "border-primary-950 bg-background" : "border-border-400 bg-background"}`;
+      const dotClasses = "w-3 h-3 rounded-full bg-primary-950 transition-all duration-200";
+      return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("div", { className: radioClasses, children: isUserSelected && /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("div", { className: dotClasses }) });
+    };
+    if (layout === "detailed") {
+      return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+        "div",
+        {
+          className: `border-2 rounded-lg p-4 w-full ${statusStyles} ${alternative.disabled ? "opacity-50" : ""}`,
+          children: /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("div", { className: "flex items-start justify-between gap-3", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("div", { className: "flex items-start gap-3 flex-1", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("div", { className: "mt-1", children: renderRadio() }),
+              /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("div", { className: "flex-1", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("p", { className: "block font-medium text-text-950", children: alternative.label }),
+                alternative.description && /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("p", { className: "text-sm text-text-600 mt-1", children: alternative.description })
+              ] })
+            ] }),
+            statusBadge && /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("div", { className: "flex-shrink-0", children: statusBadge })
+          ] })
+        },
+        alternativeId
+      );
+    }
+    return /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(
+      "div",
+      {
+        className: `flex flex-row justify-between items-start gap-2 p-2 rounded-lg w-full ${statusStyles} ${alternative.disabled ? "opacity-50" : ""}`,
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("div", { className: "flex items-center gap-2 flex-1", children: [
+            renderRadio(),
+            /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("span", { className: "flex-1", children: alternative.label })
+          ] }),
+          statusBadge && /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("div", { className: "flex-shrink-0", children: statusBadge })
+        ]
+      },
+      alternativeId
+    );
+  };
+  if (isReadonly) {
     return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
       "div",
       {
-        ref,
-        className: `
-          ${baseClasses}
-          ${variantClasses}
-          ${className ?? ""}
-        `,
-        ...props,
-        children: injectStore3(children, store)
+        className: `flex flex-col ${getLayoutClasses()} w-full ${className}`,
+        children: alternatives.map(
+          (alternative) => renderReadonlyAlternative(alternative)
+        )
       }
     );
   }
-);
-Menu.displayName = "Menu";
-var MenuContent = (0, import_react13.forwardRef)(
-  ({ className, children, variant = "menu", ...props }, ref) => {
-    const baseClasses = "w-full flex flex-row items-center gap-2";
-    const variantClasses = variant === "menu2" ? "overflow-x-auto scroll-smooth" : "";
-    return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
-      "ul",
+  return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+    RadioGroup,
+    {
+      name: groupName,
+      defaultValue,
+      value,
+      onValueChange,
+      disabled,
+      className: `flex flex-col ${getLayoutClasses()} ${className}`,
+      children: alternatives.map((alternative, index) => {
+        const alternativeId = alternative.value || `alt-${index}`;
+        const statusStyles = getStatusStyles(alternative.status, false);
+        const statusBadge = getStatusBadge(alternative.status);
+        if (layout === "detailed") {
+          return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+            "div",
+            {
+              className: `border-2 rounded-lg p-4 transition-all ${statusStyles} ${alternative.disabled ? "opacity-50 cursor-not-allowed" : "cursor-pointer"}`,
+              children: /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("div", { className: "flex items-start justify-between gap-3", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("div", { className: "flex items-start gap-3 flex-1", children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+                    RadioGroupItem,
+                    {
+                      value: alternative.value,
+                      id: alternativeId,
+                      disabled: alternative.disabled,
+                      className: "mt-1"
+                    }
+                  ),
+                  /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("div", { className: "flex-1", children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+                      "label",
+                      {
+                        htmlFor: alternativeId,
+                        className: `block font-medium text-text-950 ${alternative.disabled ? "cursor-not-allowed" : "cursor-pointer"}`,
+                        children: alternative.label
+                      }
+                    ),
+                    alternative.description && /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("p", { className: "text-sm text-text-600 mt-1", children: alternative.description })
+                  ] })
+                ] }),
+                statusBadge && /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("div", { className: "flex-shrink-0", children: statusBadge })
+              ] })
+            },
+            alternativeId
+          );
+        }
+        return /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(
+          "div",
+          {
+            className: `flex flex-row justify-between gap-2 items-start p-2 rounded-lg transition-all ${statusStyles} ${alternative.disabled ? "opacity-50 cursor-not-allowed" : ""}`,
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("div", { className: "flex items-center gap-2 flex-1", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+                  RadioGroupItem,
+                  {
+                    value: alternative.value,
+                    id: alternativeId,
+                    disabled: alternative.disabled
+                  }
+                ),
+                /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+                  "label",
+                  {
+                    htmlFor: alternativeId,
+                    className: `flex-1 ${alternative.disabled ? "cursor-not-allowed" : "cursor-pointer"}`,
+                    children: alternative.label
+                  }
+                )
+              ] }),
+              statusBadge && /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("div", { className: "flex-shrink-0", children: statusBadge })
+            ]
+          },
+          alternativeId
+        );
+      })
+    }
+  );
+};
+var HeaderAlternative = (0, import_react13.forwardRef)(
+  ({ className, title, subTitle, content, ...props }, ref) => {
+    return /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(
+      "div",
       {
         ref,
-        className: `
-          ${baseClasses}
-          ${variantClasses}
-          ${variant == "breadcrumb" ? "flex-wrap" : ""}
-          ${className ?? ""}
-        `,
-        style: variant === "menu2" ? { scrollbarWidth: "none", msOverflowStyle: "none" } : void 0,
+        className: `bg-background p-4 flex flex-col gap-4 rounded-xl ${className}`,
         ...props,
-        children
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("span", { className: "flex flex-col", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("p", { className: "text-text-950 font-bold text-lg", children: title }),
+            /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("p", { className: "text-text-700 text-sm ", children: subTitle })
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("p", { className: "text-text-950 text-md", children: content })
+        ]
       }
     );
   }
 );
-MenuContent.displayName = "MenuContent";
-var MenuItem = (0, import_react13.forwardRef)(
+
+// src/components/AlertDialog/AlertDialog.tsx
+var import_react14 = require("react");
+var import_jsx_runtime26 = require("react/jsx-runtime");
+var SIZE_CLASSES11 = {
+  "extra-small": "w-screen max-w-[324px]",
+  small: "w-screen max-w-[378px]",
+  medium: "w-screen max-w-[459px]",
+  large: "w-screen max-w-[578px]",
+  "extra-large": "w-screen max-w-[912px]"
+};
+var AlertDialog = (0, import_react14.forwardRef)(
   ({
-    className,
-    children,
-    value,
-    disabled = false,
-    store: externalStore,
-    variant = "menu",
-    separator = false,
+    trigger,
+    description,
+    cancelButtonLabel = "Cancelar",
+    submitButtonLabel = "Deletar",
+    title,
+    isOpen: controlledIsOpen,
+    onOpen,
+    onClose,
+    closeOnBackdropClick = true,
+    closeOnEscape = true,
+    className = "",
+    onSubmit,
+    submitValue,
+    onCancel,
+    cancelValue,
+    size = "medium",
     ...props
   }, ref) => {
-    const store = useMenuStore(externalStore);
-    const { value: selectedValue, setValue } = (0, import_zustand4.useStore)(store, (s) => s);
-    const handleClick = (e) => {
-      if (!disabled) {
-        setValue(value);
+    const [internalIsOpen, setInternalIsOpen] = (0, import_react14.useState)(false);
+    const isOpen = controlledIsOpen ?? internalIsOpen;
+    const setIsOpen = (open) => {
+      if (controlledIsOpen === void 0) {
+        setInternalIsOpen(open);
       }
-      props.onClick?.(e);
-    };
-    const commonProps = {
-      role: "menuitem",
-      "aria-disabled": disabled,
-      ref,
-      onClick: handleClick,
-      onKeyDown: (e) => {
-        if (["Enter", " "].includes(e.key)) handleClick(e);
-      },
-      tabIndex: disabled ? -1 : 0,
-      onMouseDown: (e) => {
-        e.preventDefault();
-      },
-      ...props
+      if (open && onOpen) onOpen();
+      if (!open && onClose) onClose();
     };
-    const variants = {
-      menu: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
-        "li",
-        {
-          "data-variant": "menu",
-          className: `
-            w-full flex flex-col items-center justify-center gap-0.5 py-1 px-2 rounded-sm font-medium text-xs
-            [&>svg]:size-6 cursor-pointer hover:bg-primary-600 hover:text-text
-            focus:outline-none focus:border-indicator-info focus:border-2
-            ${selectedValue === value ? "bg-primary-50 text-primary-950" : "text-text-950"}
-            ${className ?? ""}
-          `,
-          ...commonProps,
-          children
+    (0, import_react14.useEffect)(() => {
+      if (!isOpen || !closeOnEscape) return;
+      const handleEscape = (event) => {
+        if (event.key === "Escape") {
+          setIsOpen(false);
         }
-      ),
-      menu2: /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(
-        "li",
+      };
+      document.addEventListener("keydown", handleEscape);
+      return () => document.removeEventListener("keydown", handleEscape);
+    }, [isOpen, closeOnEscape]);
+    (0, import_react14.useEffect)(() => {
+      if (isOpen) {
+        document.body.style.overflow = "hidden";
+      } else {
+        document.body.style.overflow = "unset";
+      }
+      return () => {
+        document.body.style.overflow = "unset";
+      };
+    }, [isOpen]);
+    const handleBackdropClick = (event) => {
+      if (event.target === event.currentTarget && closeOnBackdropClick) {
+        setIsOpen(false);
+      }
+    };
+    const handleBackdropKeyDown = (event) => {
+      if (event.key === "Escape" && closeOnEscape) {
+        setIsOpen(false);
+      }
+    };
+    const handleTriggerClick = () => {
+      setIsOpen(true);
+    };
+    const handleSubmit = () => {
+      setIsOpen(false);
+      onSubmit?.(submitValue);
+    };
+    const handleCancel = () => {
+      setIsOpen(false);
+      onCancel?.(cancelValue);
+    };
+    const sizeClasses = SIZE_CLASSES11[size];
+    return /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(import_jsx_runtime26.Fragment, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
+        "button",
         {
-          "data-variant": "menu2",
-          className: `
-            w-full flex flex-col items-center px-2 pt-4 gap-3 cursor-pointer focus:rounded-sm justify-center hover:bg-background-100 rounded-lg
-            focus:outline-none focus:border-indicator-info focus:border-2 
-            ${selectedValue === value ? "" : "pb-4"}
-          `,
-          ...commonProps,
-          children: [
-            /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
-              "span",
-              {
-                className: `flex flex-row items-center gap-2 px-4 text-text-950 text-xs font-bold ${className ?? ""}`,
-                children
-              }
-            ),
-            selectedValue === value && /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("div", { className: "h-1 w-full bg-primary-950 rounded-lg" })
-          ]
+          onClick: handleTriggerClick,
+          "aria-label": "Open dialog",
+          type: "button",
+          className: "border-none bg-transparent p-0 cursor-pointer",
+          children: trigger
         }
       ),
-      breadcrumb: /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(
-        "li",
+      isOpen && /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
+        "div",
         {
-          "data-variant": "breadcrumb",
-          className: `
-            flex flex-row gap-2 items-center w-fit p-2 rounded-lg hover:text-primary-600 cursor-pointer font-bold text-xs
-            focus:outline-none focus:border-indicator-info focus:border-2
-            ${selectedValue === value ? "text-text-950" : "text-text-600"}
-            ${className ?? ""}
-          `,
-          ...commonProps,
-          children: [
-            /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
-              "span",
-              {
-                className: `
-              border-b border-text-600 hover:border-primary-600 text-inherit text-xs
-              ${selectedValue === value ? "border-b-0 font-bold" : "border-b-text-600"}
-            `,
-                children
-              }
-            ),
-            separator && /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
-              import_phosphor_react12.CaretRight,
-              {
-                size: 16,
-                className: "text-text-600",
-                "data-testid": "separator"
-              }
-            )
-          ]
+          className: "fixed inset-0 z-50 flex items-center justify-center bg-black/50 backdrop-blur-sm",
+          onClick: handleBackdropClick,
+          onKeyDown: handleBackdropKeyDown,
+          "data-testid": "alert-dialog-overlay",
+          children: /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(
+            "div",
+            {
+              ref,
+              className: `bg-background border border-border-100 rounded-lg shadow-lg p-6 m-3 ${sizeClasses} ${className}`,
+              ...props,
+              children: [
+                /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
+                  "h2",
+                  {
+                    id: "alert-dialog-title",
+                    className: "pb-3 text-xl font-semibold",
+                    children: title
+                  }
+                ),
+                /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
+                  "p",
+                  {
+                    id: "alert-dialog-description",
+                    className: "text-text-700 text-sm",
+                    children: description
+                  }
+                ),
+                /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("div", { className: "flex flex-row items-center justify-end pt-4 gap-3", children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(Button_default, { variant: "outline", size: "small", onClick: handleCancel, children: cancelButtonLabel }),
+                  /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
+                    Button_default,
+                    {
+                      variant: "solid",
+                      size: "small",
+                      action: "negative",
+                      onClick: handleSubmit,
+                      children: submitButtonLabel
+                    }
+                  )
+                ] })
+              ]
+            }
+          )
         }
       )
+    ] });
+  }
+);
+AlertDialog.displayName = "AlertDialog";
+
+// src/components/DropdownMenu/DropdownMenu.tsx
+var import_phosphor_react13 = require("phosphor-react");
+var import_react15 = require("react");
+var import_zustand3 = require("zustand");
+var import_jsx_runtime27 = require("react/jsx-runtime");
+function createDropdownStore() {
+  return (0, import_zustand3.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 injectStore2 = (children, store) => {
+  return import_react15.Children.map(children, (child) => {
+    if ((0, import_react15.isValidElement)(child)) {
+      const typedChild = child;
+      const newProps = {
+        store
+      };
+      if (typedChild.props.children) {
+        newProps.children = injectStore2(typedChild.props.children, store);
+      }
+      return (0, import_react15.cloneElement)(typedChild, newProps);
+    }
+    return child;
+  });
+};
+var DropdownMenu = ({
+  children,
+  open: propOpen,
+  onOpenChange
+}) => {
+  const storeRef = (0, import_react15.useRef)(null);
+  storeRef.current ??= createDropdownStore();
+  const store = storeRef.current;
+  const { open, setOpen: storeSetOpen } = (0, import_zustand3.useStore)(store, (s) => s);
+  const setOpen = (newOpen) => {
+    storeSetOpen(newOpen);
+  };
+  const menuRef = (0, import_react15.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_react15.useEffect)(() => {
+    if (open) {
+      document.addEventListener("mousedown", handleClickOutside);
+      document.addEventListener("keydown", handleDownkey);
+    }
+    return () => {
+      document.removeEventListener("mousedown", handleClickOutside);
+      document.removeEventListener("keydown", handleDownkey);
     };
-    return variants[variant] ?? variants["menu"];
-  }
-);
-MenuItem.displayName = "MenuItem";
-var internalScroll = (container, direction) => {
-  if (!container) return;
-  container.scrollBy({
-    left: direction === "left" ? -150 : 150,
-    behavior: "smooth"
-  });
-};
-var internalCheckScroll = (container, setShowLeftArrow, setShowRightArrow) => {
-  if (!container) return;
-  const { scrollLeft, scrollWidth, clientWidth } = container;
-  setShowLeftArrow(scrollLeft > 0);
-  setShowRightArrow(scrollLeft + clientWidth < scrollWidth);
+  }, [open]);
+  (0, import_react15.useEffect)(() => {
+    setOpen(open);
+    onOpenChange?.(open);
+  }, [open, onOpenChange]);
+  (0, import_react15.useEffect)(() => {
+    if (propOpen) {
+      setOpen(propOpen);
+    }
+  }, [propOpen]);
+  return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("div", { className: "relative", ref: menuRef, children: injectStore2(children, store) });
 };
-var MenuOverflow = ({
-  children,
+var DropdownMenuTrigger = ({
   className,
-  defaultValue,
-  value,
-  onValueChange,
+  children,
+  onClick,
+  store: externalStore,
   ...props
 }) => {
-  const containerRef = (0, import_react13.useRef)(null);
-  const [showLeftArrow, setShowLeftArrow] = (0, import_react13.useState)(false);
-  const [showRightArrow, setShowRightArrow] = (0, import_react13.useState)(false);
-  (0, import_react13.useEffect)(() => {
-    const checkScroll = () => internalCheckScroll(
-      containerRef.current,
-      setShowLeftArrow,
-      setShowRightArrow
-    );
-    checkScroll();
-    const container = containerRef.current;
-    container?.addEventListener("scroll", checkScroll);
-    window.addEventListener("resize", checkScroll);
-    return () => {
-      container?.removeEventListener("scroll", checkScroll);
-      window.removeEventListener("resize", checkScroll);
-    };
-  }, []);
-  return /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(
-    "div",
+  const store = useDropdownStore(externalStore);
+  const open = (0, import_zustand3.useStore)(store, (s) => s.open);
+  const toggleOpen = () => store.setState({ open: !open });
+  return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+    "button",
     {
-      "data-testid": "menu-overflow-wrapper",
-      className: `relative w-full overflow-hidden ${className ?? ""}`,
-      children: [
-        showLeftArrow && /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(
-          "button",
-          {
-            onClick: () => internalScroll(containerRef.current, "left"),
-            className: "absolute left-0 top-1/2 -translate-y-1/2 z-10 flex h-8 w-8 items-center justify-center rounded-full bg-white shadow-md cursor-pointer",
-            "data-testid": "scroll-left-button",
-            children: [
-              /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_phosphor_react12.CaretLeft, { size: 16 }),
-              /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("span", { className: "sr-only", children: "Scroll left" })
-            ]
-          }
-        ),
-        /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
-          Menu,
-          {
-            defaultValue,
-            onValueChange,
-            value,
-            variant: "menu2",
-            ...props,
-            children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(MenuContent, { ref: containerRef, variant: "menu2", children })
-          }
-        ),
-        showRightArrow && /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(
-          "button",
-          {
-            onClick: () => internalScroll(containerRef.current, "right"),
-            className: "absolute right-0 top-1/2 -translate-y-1/2 z-10 flex h-8 w-8 items-center justify-center rounded-full bg-white shadow-md cursor-pointer",
-            "data-testid": "scroll-right-button",
-            children: [
-              /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_phosphor_react12.CaretRight, { size: 16 }),
-              /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("span", { className: "sr-only", children: "Scroll right" })
-            ]
-          }
-        )
-      ]
+      onClick: (e) => {
+        e.stopPropagation();
+        toggleOpen();
+        if (onClick) onClick(e);
+      },
+      "aria-expanded": open,
+      className: `${className}`,
+      ...props,
+      children
     }
   );
 };
-var injectStore3 = (children, store) => import_react13.Children.map(children, (child) => {
-  if (!(0, import_react13.isValidElement)(child)) return child;
-  const typedChild = child;
-  const shouldInject = typedChild.type === MenuItem;
-  return (0, import_react13.cloneElement)(typedChild, {
-    ...shouldInject ? { store } : {},
-    ...typedChild.props.children ? { children: injectStore3(typedChild.props.children, store) } : {}
-  });
-});
-var Menu_default = Menu;
-
-// src/components/Card/Card.tsx
-var import_react14 = require("react");
-var import_phosphor_react13 = require("phosphor-react");
-var import_jsx_runtime26 = require("react/jsx-runtime");
-var CARD_BASE_CLASSES = {
-  default: "w-full bg-background border border-border-50 rounded-xl",
-  compact: "w-full bg-background border border-border-50 rounded-lg",
-  minimal: "w-full bg-background border border-border-100 rounded-md"
-};
-var CARD_PADDING_CLASSES = {
-  none: "",
-  small: "p-2",
-  medium: "p-4",
-  large: "p-6"
-};
-var CARD_MIN_HEIGHT_CLASSES = {
-  none: "",
-  small: "min-h-16",
-  medium: "min-h-20",
-  large: "min-h-24"
-};
-var CARD_LAYOUT_CLASSES = {
-  horizontal: "flex flex-row",
-  vertical: "flex flex-col"
-};
-var CARD_CURSOR_CLASSES = {
-  default: "",
-  pointer: "cursor-pointer"
-};
-var CardBase = (0, import_react14.forwardRef)(
-  ({
-    children,
-    variant = "default",
-    layout = "horizontal",
-    padding = "medium",
-    minHeight = "medium",
-    cursor = "default",
-    className = "",
-    ...props
-  }, ref) => {
-    const baseClasses = CARD_BASE_CLASSES[variant];
-    const paddingClasses = CARD_PADDING_CLASSES[padding];
-    const minHeightClasses = CARD_MIN_HEIGHT_CLASSES[minHeight];
-    const layoutClasses = CARD_LAYOUT_CLASSES[layout];
-    const cursorClasses = CARD_CURSOR_CLASSES[cursor];
-    const combinedClasses = [
-      baseClasses,
-      paddingClasses,
-      minHeightClasses,
-      layoutClasses,
-      cursorClasses,
-      className
-    ].filter(Boolean).join(" ");
-    return /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("div", { ref, className: combinedClasses, ...props, children });
-  }
-);
-var ACTION_CARD_CLASSES = {
-  warning: "bg-warning-background",
-  success: "bg-success-300",
-  error: "bg-error-100",
-  info: "bg-info-background"
+DropdownMenuTrigger.displayName = "DropdownMenuTrigger";
+var ITEM_SIZE_CLASSES = {
+  small: "text-sm",
+  medium: "text-md"
 };
-var ACTION_ICON_CLASSES = {
-  warning: "bg-warning-300 text-text",
-  success: "bg-yellow-300 text-text-950",
-  error: "bg-error-500 text-text",
-  info: "bg-info-500 text-text"
+var SIDE_CLASSES = {
+  top: "bottom-full",
+  right: "top-full",
+  bottom: "top-full",
+  left: "top-full"
 };
-var ACTION_SUBTITLE_CLASSES = {
-  warning: "text-warning-600",
-  success: "text-success-700",
-  error: "text-error-700",
-  info: "text-info-700"
+var ALIGN_CLASSES = {
+  start: "left-0",
+  center: "left-1/2 -translate-x-1/2",
+  end: "right-0"
 };
-var ACTION_HEADER_CLASSES = {
-  warning: "text-warning-300",
-  success: "text-success-300",
-  error: "text-error-300",
-  info: "text-info-300"
+var MENUCONTENT_VARIANT_CLASSES = {
+  menu: "p-1",
+  profile: "p-6"
 };
-var CardActivitiesResults = (0, import_react14.forwardRef)(
+var MenuLabel = (0, import_react15.forwardRef)(({ className, inset, store: _store, ...props }, ref) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+    "div",
+    {
+      ref,
+      className: `text-sm w-full ${inset ? "pl-8" : ""} ${className ?? ""}`,
+      ...props
+    }
+  );
+});
+MenuLabel.displayName = "MenuLabel";
+var DropdownMenuContent = (0, import_react15.forwardRef)(
   ({
-    icon,
-    title,
-    subTitle,
-    header,
-    extended = false,
-    action = "success",
-    description,
     className,
+    align = "start",
+    side = "bottom",
+    variant = "menu",
+    sideOffset = 4,
+    children,
+    store: externalStore,
     ...props
   }, ref) => {
-    const actionCardClasses = ACTION_CARD_CLASSES[action];
-    const actionIconClasses = ACTION_ICON_CLASSES[action];
-    const actionSubTitleClasses = ACTION_SUBTITLE_CLASSES[action];
-    const actionHeaderClasses = ACTION_HEADER_CLASSES[action];
-    return /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(
+    const store = useDropdownStore(externalStore);
+    const open = (0, import_zustand3.useStore)(store, (s) => s.open);
+    const [isVisible, setIsVisible] = (0, import_react15.useState)(open);
+    (0, import_react15.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_runtime27.jsx)(
       "div",
       {
         ref,
-        className: `w-full flex flex-col border border-border-50  bg-background rounded-xl ${className}`,
+        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: [
-          /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(
-            "div",
-            {
-              className: `
-          flex flex-col gap-1 items-center justify-center p-4 
-          ${actionCardClasses}
-          ${extended ? "rounded-t-xl" : "rounded-xl"}`,
-              children: [
-                /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
-                  "span",
-                  {
-                    className: `size-7.5 rounded-full flex items-center justify-center ${actionIconClasses}`,
-                    children: icon
-                  }
-                ),
-                /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
-                  Text_default,
-                  {
-                    size: "2xs",
-                    weight: "medium",
-                    className: "text-text-800 uppercase truncate",
-                    children: title
-                  }
-                ),
-                /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("p", { className: `text-lg font-bold truncate ${actionSubTitleClasses}`, children: subTitle })
-              ]
-            }
-          ),
-          extended && /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("div", { className: "flex flex-col items-center gap-2.5 pb-9.5 pt-2.5", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
-              "p",
-              {
-                className: `text-2xs font-medium uppercase truncate ${actionHeaderClasses}`,
-                children: header
-              }
-            ),
-            /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(Badge_default, { size: "large", action: "info", children: description })
-          ] })
-        ]
+        children
       }
     );
   }
 );
-var CardQuestions = (0, import_react14.forwardRef)(
+DropdownMenuContent.displayName = "DropdownMenuContent";
+var DropdownMenuItem = (0, import_react15.forwardRef)(
   ({
-    header,
-    state = "undone",
     className,
-    onClickButton,
-    valueButton,
+    size = "small",
+    children,
+    iconRight,
+    iconLeft,
+    disabled = false,
+    onClick,
+    variant = "menu",
+    store: externalStore,
     ...props
   }, ref) => {
-    const isDone = state === "done";
-    const stateLabel = isDone ? "Realizado" : "N\xE3o Realizado";
-    const buttonLabel = isDone ? "Ver Quest\xE3o" : "Responder";
-    return /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(
-      CardBase,
+    const store = useDropdownStore(externalStore);
+    const setOpen = (0, import_zustand3.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";
+      }
+      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_runtime27.jsxs)(
+      "div",
       {
         ref,
-        layout: "horizontal",
-        padding: "medium",
-        minHeight: "medium",
-        className: `justify-between gap-4 ${className}`,
+        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_runtime26.jsxs)("section", { className: "flex flex-col gap-1 flex-1 min-w-0", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("p", { className: "font-bold text-xs text-text-950 truncate", children: header }),
-            /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("div", { className: "flex flex-row gap-6 items-center", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
-                Badge_default,
-                {
-                  size: "medium",
-                  variant: "solid",
-                  action: isDone ? "success" : "error",
-                  children: stateLabel
-                }
-              ),
-              /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("span", { className: "flex flex-row items-center gap-1 text-text-700 text-xs", children: [
-                isDone ? "Nota" : "Sem nota",
-                isDone && /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(Badge_default, { size: "medium", action: "success", children: "00" })
-              ] })
-            ] })
-          ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("span", { className: "flex-shrink-0", children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
-            Button_default,
-            {
-              size: "extra-small",
-              onClick: () => onClickButton?.(valueButton),
-              className: "min-w-fit",
-              children: buttonLabel
-            }
-          ) })
+          iconLeft,
+          /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("span", { className: "w-full text-md", children }),
+          iconRight
         ]
       }
     );
   }
-);
-var CardProgress = (0, import_react14.forwardRef)(
-  ({
-    header,
-    subhead,
-    initialDate,
-    endDate,
-    progress = 0,
-    direction = "horizontal",
-    icon,
-    color = "#B7DFFF",
-    progressVariant = "blue",
-    showDates = true,
-    className,
-    ...props
-  }, ref) => {
-    const isHorizontal = direction === "horizontal";
-    const contentComponent = {
-      horizontal: /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(import_jsx_runtime26.Fragment, { children: [
-        showDates && /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("div", { className: "flex flex-row gap-6 items-center", children: [
-          initialDate && /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("span", { className: "flex flex-row gap-1 items-center text-2xs", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("p", { className: "text-text-800 font-semibold", children: "In\xEDcio" }),
-            /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("p", { className: "text-text-600", children: initialDate })
-          ] }),
-          endDate && /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("span", { className: "flex flex-row gap-1 items-center text-2xs", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("p", { className: "text-text-800 font-semibold", children: "Fim" }),
-            /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("p", { className: "text-text-600", children: endDate })
-          ] })
-        ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("span", { className: "grid grid-cols-[1fr_auto] items-center gap-2", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
-            ProgressBar_default,
-            {
-              size: "small",
-              value: progress,
-              variant: progressVariant,
-              "data-testid": "progress-bar"
-            }
-          ),
-          /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(
-            Text_default,
-            {
-              size: "xs",
-              weight: "medium",
-              className: `text-text-950 leading-none tracking-normal text-center flex-none`,
-              children: [
-                Math.round(progress),
-                "%"
-              ]
-            }
-          )
-        ] })
-      ] }),
-      vertical: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("p", { className: "text-sm text-text-800", children: subhead })
+);
+DropdownMenuItem.displayName = "DropdownMenuItem";
+var DropdownMenuSeparator = (0, import_react15.forwardRef)(({ className, store: _store, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+  "div",
+  {
+    ref,
+    className: `my-1 h-px bg-border-200 ${className}`,
+    ...props
+  }
+));
+DropdownMenuSeparator.displayName = "DropdownMenuSeparator";
+var ProfileMenuTrigger = (0, import_react15.forwardRef)(({ className, onClick, store: externalStore, ...props }, ref) => {
+  const store = useDropdownStore(externalStore);
+  const open = (0, import_zustand3.useStore)(store, (s) => s.open);
+  const toggleOpen = () => store.setState({ open: !open });
+  return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+    "button",
+    {
+      ref,
+      className: `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_runtime27.jsx)("span", { className: "size-6 rounded-full bg-primary-100 flex items-center justify-center", children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(import_phosphor_react13.User, { className: "text-primary-950", size: 18 }) })
+    }
+  );
+});
+ProfileMenuTrigger.displayName = "ProfileMenuTrigger";
+var ProfileMenuHeader = (0, import_react15.forwardRef)(({ className, name, email, store: _store, ...props }, ref) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(
+    "div",
+    {
+      ref,
+      "data-component": "ProfileMenuHeader",
+      className: `
+          flex flex-row gap-4 items-center
+          ${className}
+        `,
+      ...props,
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("span", { className: "size-16 bg-primary-100 rounded-full flex items-center justify-center", children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(import_phosphor_react13.User, { size: 34, className: "text-primary-950" }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)("div", { className: "flex flex-col ", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("p", { className: "text-xl font-bold text-text-950", children: name }),
+          /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("p", { className: "text-md text-text-600", children: email })
+        ] })
+      ]
+    }
+  );
+});
+ProfileMenuHeader.displayName = "ProfileMenuHeader";
+var ProfileMenuSection = (0, import_react15.forwardRef)(({ className, children, store: _store, ...props }, ref) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+    "div",
+    {
+      ref,
+      className: `
+          flex flex-col p-2
+          ${className}
+        `,
+      ...props,
+      children
+    }
+  );
+});
+ProfileMenuSection.displayName = "ProfileMenuSection";
+var ProfileMenuFooter = ({
+  className,
+  disabled = false,
+  onClick,
+  store: externalStore,
+  ...props
+}) => {
+  const store = useDropdownStore(externalStore);
+  const setOpen = (0, import_zustand3.useStore)(store, (s) => s.setOpen);
+  return /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(
+    Button_default,
+    {
+      variant: "outline",
+      className: `w-full ${className}`,
+      disabled,
+      onClick: (e) => {
+        setOpen(false);
+        onClick?.(e);
+      },
+      ...props,
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("span", { className: "mr-2 flex items-center", children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(import_phosphor_react13.SignOut, {}) }),
+        /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("span", { children: "Sair" })
+      ]
+    }
+  );
+};
+ProfileMenuFooter.displayName = "ProfileMenuFooter";
+var DropdownMenu_default = DropdownMenu;
+
+// src/components/Select/Select.tsx
+var import_zustand4 = require("zustand");
+var import_react16 = require("react");
+var import_phosphor_react14 = require("phosphor-react");
+var import_jsx_runtime28 = require("react/jsx-runtime");
+var VARIANT_CLASSES4 = {
+  outlined: "border rounded-lg focus:border-primary-950",
+  underlined: "border-b focus:border-primary-950",
+  rounded: "border rounded-full focus:border-primary-950"
+};
+var SIZE_CLASSES12 = {
+  small: "text-sm",
+  medium: "text-md",
+  large: "text-lg",
+  "extra-large": "text-lg"
+};
+var HEIGHT_CLASSES = {
+  small: "h-8",
+  medium: "h-9",
+  large: "h-10",
+  "extra-large": "h-12"
+};
+var PADDING_CLASSES = {
+  small: "px-2 py-1",
+  medium: "px-3 py-2",
+  large: "px-4 py-3",
+  "extra-large": "px-5 py-4"
+};
+var SIDE_CLASSES2 = {
+  top: "bottom-full -translate-y-1",
+  right: "top-full translate-y-1",
+  bottom: "top-full translate-y-1",
+  left: "top-full translate-y-1"
+};
+var ALIGN_CLASSES2 = {
+  start: "left-0",
+  center: "left-1/2 -translate-x-1/2",
+  end: "right-0"
+};
+function createSelectStore(onValueChange) {
+  return (0, import_zustand4.create)((set) => ({
+    open: false,
+    setOpen: (open) => set({ open }),
+    value: "",
+    setValue: (value) => set({ value }),
+    selectedLabel: "",
+    setSelectedLabel: (label) => set({ selectedLabel: label }),
+    onValueChange
+  }));
+}
+var useSelectStore = (externalStore) => {
+  if (!externalStore) {
+    throw new Error(
+      "Component must be used within a Select (store is missing)"
+    );
+  }
+  return externalStore;
+};
+function getLabelAsNode(children) {
+  if (typeof children === "string" || typeof children === "number") {
+    return children;
+  }
+  const flattened = import_react16.Children.toArray(children);
+  if (flattened.length === 1) return flattened[0];
+  return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_jsx_runtime28.Fragment, { children: flattened });
+}
+var injectStore3 = (children, store, size, selectId) => {
+  return import_react16.Children.map(children, (child) => {
+    if ((0, import_react16.isValidElement)(child)) {
+      const typedChild = child;
+      const newProps = {
+        store
+      };
+      if (typedChild.type === SelectTrigger) {
+        newProps.size = size;
+        newProps.selectId = selectId;
+      }
+      if (typedChild.props.children) {
+        newProps.children = injectStore3(
+          typedChild.props.children,
+          store,
+          size,
+          selectId
+        );
+      }
+      return (0, import_react16.cloneElement)(typedChild, newProps);
+    }
+    return child;
+  });
+};
+var Select = ({
+  children,
+  defaultValue = "",
+  value: propValue,
+  onValueChange,
+  size = "small",
+  label,
+  helperText,
+  errorMessage,
+  id
+}) => {
+  const storeRef = (0, import_react16.useRef)(null);
+  storeRef.current ??= createSelectStore(onValueChange);
+  const store = storeRef.current;
+  const selectRef = (0, import_react16.useRef)(null);
+  const { open, setOpen, setValue, selectedLabel } = (0, import_zustand4.useStore)(store, (s) => s);
+  const generatedId = (0, import_react16.useId)();
+  const selectId = id ?? `select-${generatedId}`;
+  const findLabelForValue = (children2, targetValue) => {
+    let found = null;
+    const search = (nodes) => {
+      import_react16.Children.forEach(nodes, (child) => {
+        if (!(0, import_react16.isValidElement)(child)) return;
+        const typedChild = child;
+        if (typedChild.type === SelectItem && typedChild.props.value === targetValue) {
+          if (typeof typedChild.props.children === "string")
+            found = typedChild.props.children;
+        }
+        if (typedChild.props.children && !found)
+          search(typedChild.props.children);
+      });
     };
-    return /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(
-      CardBase,
-      {
-        ref,
-        layout: isHorizontal ? "horizontal" : "vertical",
-        padding: "none",
-        minHeight: "medium",
-        cursor: "pointer",
-        className: `${isHorizontal ? "h-20" : ""} ${className}`,
-        ...props,
-        children: [
-          /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
-            "div",
-            {
-              className: `
-            flex justify-center items-center [&>svg]:size-6 text-text-950
-            ${isHorizontal ? "min-w-[80px] min-h-[80px] rounded-l-xl" : "min-h-[50px] w-full rounded-t-xl"}
-            ${!color.startsWith("#") ? `bg-${color}` : ""}
-          `,
-              style: color.startsWith("#") ? { backgroundColor: color } : void 0,
-              "data-testid": "icon-container",
-              children: icon
-            }
-          ),
-          /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(
-            "div",
-            {
-              className: `
-            p-4 flex flex-col justify-between w-full h-full
-            ${!isHorizontal && "gap-4"}
-          `,
-              children: [
-                /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(Text_default, { size: "sm", weight: "bold", className: "text-text-950 truncate", children: header }),
-                contentComponent[direction]
-              ]
-            }
+    search(children2);
+    return found;
+  };
+  (0, import_react16.useEffect)(() => {
+    if (!selectedLabel && defaultValue) {
+      const label2 = findLabelForValue(children, defaultValue);
+      if (label2) store.setState({ selectedLabel: label2 });
+    }
+  }, [children, defaultValue, selectedLabel]);
+  (0, import_react16.useEffect)(() => {
+    const handleClickOutside = (event) => {
+      if (selectRef.current && !selectRef.current.contains(event.target)) {
+        setOpen(false);
+      }
+    };
+    const handleArrowKeys = (event) => {
+      const selectContent = selectRef.current?.querySelector('[role="menu"]');
+      if (selectContent) {
+        event.preventDefault();
+        const items = Array.from(
+          selectContent.querySelectorAll(
+            '[role="menuitem"]:not([aria-disabled="true"])'
           )
-        ]
+        ).filter((el) => el instanceof HTMLElement);
+        const focused = document.activeElement;
+        const currentIndex = items.findIndex((item) => item === focused);
+        let nextIndex = 0;
+        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();
       }
-    );
-  }
-);
-var CardTopic = (0, import_react14.forwardRef)(
-  ({
-    header,
-    subHead,
-    progress,
-    showPercentage = false,
-    progressVariant = "blue",
-    className = "",
-    ...props
-  }, ref) => {
-    return /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(
-      CardBase,
+    };
+    if (open) {
+      document.addEventListener("mousedown", handleClickOutside);
+      document.addEventListener("keydown", handleArrowKeys);
+    }
+    return () => {
+      document.removeEventListener("mousedown", handleClickOutside);
+      document.removeEventListener("keydown", handleArrowKeys);
+    };
+  }, [open]);
+  (0, import_react16.useEffect)(() => {
+    if (propValue) {
+      setValue(propValue);
+      const label2 = findLabelForValue(children, propValue);
+      if (label2) store.setState({ selectedLabel: label2 });
+    }
+  }, [propValue]);
+  const sizeClasses = SIZE_CLASSES12[size];
+  return /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("div", { className: "w-full", children: [
+    label && /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+      "label",
       {
-        ref,
-        layout: "vertical",
-        padding: "small",
-        minHeight: "medium",
-        cursor: "pointer",
-        className: `justify-center gap-2  py-2 px-4 ${className}`,
-        ...props,
-        children: [
-          subHead && /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("span", { className: "text-text-600 text-2xs flex flex-row gap-1", children: subHead.map((text, index) => /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(import_react14.Fragment, { children: [
-            /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("p", { children: text }),
-            index < subHead.length - 1 && /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("p", { children: "\u2022" })
-          ] }, `${text} - ${index}`)) }),
-          /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("p", { className: "text-sm text-text-950 font-bold truncate", children: header }),
-          /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("span", { className: "grid grid-cols-[1fr_auto] items-center gap-2", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
-              ProgressBar_default,
-              {
-                size: "small",
-                value: progress,
-                variant: progressVariant,
-                "data-testid": "progress-bar"
-              }
-            ),
-            showPercentage && /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(
-              Text_default,
-              {
-                size: "xs",
-                weight: "medium",
-                className: `text-text-950 leading-none tracking-normal text-center flex-none`,
-                children: [
-                  Math.round(progress),
-                  "%"
-                ]
-              }
-            )
-          ] })
-        ]
+        htmlFor: selectId,
+        className: `block font-bold text-text-900 mb-1.5 ${sizeClasses}`,
+        children: label
       }
-    );
-  }
-);
-var CardPerformance = (0, import_react14.forwardRef)(
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { className: `relative ${sizeClasses}`, ref: selectRef, children: injectStore3(children, store, size, selectId) }),
+    /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("div", { className: "mt-1.5 gap-1.5", children: [
+      helperText && /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("p", { className: "text-sm text-text-500", children: helperText }),
+      errorMessage && /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("p", { className: "flex gap-1 items-center text-sm text-indicator-error", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_phosphor_react14.WarningCircle, { size: 16 }),
+        " ",
+        errorMessage
+      ] })
+    ] })
+  ] });
+};
+var SelectValue = ({
+  placeholder,
+  store: externalStore
+}) => {
+  const store = useSelectStore(externalStore);
+  const selectedLabel = (0, import_zustand4.useStore)(store, (s) => s.selectedLabel);
+  const value = (0, import_zustand4.useStore)(store, (s) => s.value);
+  return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("span", { className: "text-inherit", children: selectedLabel || placeholder || value });
+};
+var SelectTrigger = (0, import_react16.forwardRef)(
   ({
-    header,
-    progress,
-    description = "Sem dados ainda! Voc\xEA ainda n\xE3o fez um question\xE1rio neste assunto.",
-    actionVariant = "button",
-    progressVariant = "blue",
-    labelProgress = "",
-    className = "",
-    onClickButton,
-    valueButton,
+    className,
+    invalid = false,
+    variant = "outlined",
+    store: externalStore,
+    disabled,
+    size = "medium",
+    selectId,
     ...props
   }, ref) => {
-    const hasProgress = progress !== void 0;
-    return /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(
-      CardBase,
+    const store = useSelectStore(externalStore);
+    const open = (0, import_zustand4.useStore)(store, (s) => s.open);
+    const toggleOpen = () => store.setState({ open: !open });
+    const variantClasses = VARIANT_CLASSES4[variant];
+    const heightClasses = HEIGHT_CLASSES[size];
+    const paddingClasses = PADDING_CLASSES[size];
+    return /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(
+      "button",
       {
         ref,
-        layout: "horizontal",
-        padding: "medium",
-        minHeight: "none",
-        className: `justify-between gap-2 ${actionVariant == "caret" ? "cursor-pointer" : ""} ${className}`,
-        onClick: () => actionVariant == "caret" && onClickButton?.(valueButton),
+        id: selectId,
+        className: `
+        flex min-w-[220px] w-full items-center justify-between border-border-300
+        ${heightClasses} ${paddingClasses}
+        ${invalid && `${variant == "underlined" ? "border-b-2" : "border-2"} border-indicator-error text-text-600`}
+        ${disabled ? "cursor-not-allowed text-text-400 pointer-events-none opacity-50" : "cursor-pointer hover:bg-background-50 focus:bg-accent focus:text-accent-foreground hover:bg-accent hover:text-accent-foreground"}
+        ${!invalid && !disabled ? "text-text-700" : ""}
+        ${variantClasses}
+        ${className}
+      `,
+        onClick: toggleOpen,
+        "aria-expanded": open,
+        "aria-haspopup": "listbox",
+        "aria-controls": open ? "select-content" : void 0,
         ...props,
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("div", { className: "w-full flex flex-col justify-between gap-2", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("div", { className: "flex flex-row justify-between items-center gap-2", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("p", { className: "text-lg font-bold text-text-950 truncate flex-1 min-w-0", children: header }),
-              actionVariant === "button" && /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
-                Button_default,
-                {
-                  variant: "outline",
-                  size: "extra-small",
-                  onClick: () => onClickButton?.(valueButton),
-                  className: "min-w-fit flex-shrink-0",
-                  children: "Ver Aula"
-                }
-              )
-            ] }),
-            /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("div", { className: "w-full", children: hasProgress ? /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
-              ProgressBar_default,
-              {
-                value: progress,
-                label: `${progress}% ${labelProgress}`,
-                variant: progressVariant
-              }
-            ) : /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("p", { className: "text-xs text-text-600 truncate", children: description }) })
-          ] }),
-          actionVariant == "caret" && /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
-            import_phosphor_react13.CaretRight,
+          props.children,
+          /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+            import_phosphor_react14.CaretDown,
             {
-              className: "size-4.5 text-text-800 cursor-pointer",
-              "data-testid": "caret-icon"
+              className: `h-[1em] w-[1em] opacity-50 transition-transform ${open ? "rotate-180" : ""}`
             }
           )
         ]
@@ -4390,522 +5144,376 @@ var CardPerformance = (0, import_react14.forwardRef)(
     );
   }
 );
-var CardResults = (0, import_react14.forwardRef)(
+SelectTrigger.displayName = "SelectTrigger";
+var SelectContent = (0, import_react16.forwardRef)(
   ({
-    header,
-    correct_answers,
-    incorrect_answers,
-    icon,
-    direction = "col",
-    color = "#B7DFFF",
+    children,
     className,
+    align = "start",
+    side = "bottom",
+    store: externalStore,
     ...props
   }, ref) => {
-    const isRow = direction == "row";
-    return /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(
-      CardBase,
+    const store = useSelectStore(externalStore);
+    const open = (0, import_zustand4.useStore)(store, (s) => s.open);
+    if (!open) return null;
+    const getPositionClasses = () => `w-full min-w-full absolute ${SIDE_CLASSES2[side]} ${ALIGN_CLASSES2[align]}`;
+    return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+      "div",
       {
+        role: "menu",
         ref,
-        layout: "horizontal",
-        padding: "none",
-        minHeight: "medium",
-        className: `items-center pr-4 ${className}`,
+        className: `bg-background z-50 min-w-[210px] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md border-border-100 ${getPositionClasses()} ${className}`,
         ...props,
-        children: [
-          /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
-            "div",
-            {
-              className: `
-              flex justify-center items-center [&>svg]:size-8 text-text-950 min-w-20 max-w-20 min-h-20 h-full rounded-l-xl
-            `,
-              style: {
-                backgroundColor: color
-              },
-              children: icon
-            }
-          ),
-          /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(
-            "div",
-            {
-              className: `
-            p-4 flex justify-between w-full h-full
-            ${isRow ? "flex-row items-center gap-2" : "flex-col"}
-          `,
-              children: [
-                /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("p", { className: "text-sm font-bold text-text-950 truncate flex-1 min-w-0", children: header }),
-                /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("span", { className: "flex flex-row gap-1 items-center", children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(
-                    Badge_default,
-                    {
-                      action: "success",
-                      variant: "solid",
-                      size: "medium",
-                      iconLeft: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_phosphor_react13.CheckCircle, {}),
-                      children: [
-                        correct_answers,
-                        " Corretas"
-                      ]
-                    }
-                  ),
-                  /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(
-                    Badge_default,
-                    {
-                      action: "error",
-                      variant: "solid",
-                      size: "medium",
-                      iconLeft: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_phosphor_react13.XCircle, {}),
-                      children: [
-                        incorrect_answers,
-                        " Incorretas"
-                      ]
-                    }
-                  )
-                ] })
-              ]
-            }
-          ),
-          /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_phosphor_react13.CaretRight, { className: "min-w-6 min-h-6 text-text-800 cursor-pointer" })
-        ]
+        children
       }
     );
   }
 );
-var CardStatus = (0, import_react14.forwardRef)(
-  ({ header, className, status, ...props }, ref) => {
-    return /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
-      CardBase,
-      {
-        ref,
-        layout: "horizontal",
-        padding: "medium",
-        minHeight: "medium",
-        className: `items-center ${className}`,
-        ...props,
-        children: /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("div", { className: "flex justify-between w-full h-full flex-row items-center gap-2", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("p", { className: "text-sm font-bold text-text-950 truncate flex-1 min-w-0", children: header }),
-          status && /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("span", { className: "flex flex-row gap-1 items-center flex-shrink-0", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
-              Badge_default,
-              {
-                action: status == "correct" ? "success" : "error",
-                variant: "solid",
-                size: "medium",
-                iconLeft: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_phosphor_react13.CheckCircle, {}),
-                children: status == "correct" ? "Correta" : "Incorreta"
-              }
-            ),
-            /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("p", { className: "text-sm text-text-800", children: "Respondida" })
-          ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_phosphor_react13.CaretRight, { className: "min-w-6 min-h-6 text-text-800 cursor-pointer flex-shrink-0 ml-2" })
-        ] })
+SelectContent.displayName = "SelectContent";
+var SelectItem = (0, import_react16.forwardRef)(
+  ({
+    className,
+    children,
+    value,
+    disabled = false,
+    store: externalStore,
+    ...props
+  }, ref) => {
+    const store = useSelectStore(externalStore);
+    const {
+      value: selectedValue,
+      setValue,
+      setOpen,
+      setSelectedLabel,
+      onValueChange
+    } = (0, import_zustand4.useStore)(store, (s) => s);
+    const handleClick = (e) => {
+      const labelNode = getLabelAsNode(children);
+      if (!disabled) {
+        setValue(value);
+        setSelectedLabel(labelNode);
+        setOpen(false);
+        onValueChange?.(value);
       }
-    );
-  }
-);
-var CardSettings = (0, import_react14.forwardRef)(
-  ({ header, className, icon, ...props }, ref) => {
-    return /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(
-      CardBase,
+      props.onClick?.(e);
+    };
+    return /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(
+      "div",
       {
+        role: "menuitem",
+        "aria-disabled": disabled,
         ref,
-        layout: "horizontal",
-        padding: "small",
-        minHeight: "none",
-        className: `border-none items-center gap-2 text-text-700 ${className}`,
+        className: `
+          focus-visible:bg-background-50
+          relative flex select-none items-center gap-2 rounded-sm p-3 outline-none transition-colors [&>svg]:size-4 [&>svg]:shrink-0
+          ${className}
+          ${disabled ? "cursor-not-allowed text-text-400 pointer-events-none opacity-50" : "cursor-pointer hover:bg-background-50 text-text-700 focus:bg-accent focus:text-accent-foreground hover:bg-accent hover:text-accent-foreground"}
+          ${selectedValue === value && "bg-background-50"}
+        `,
+        onClick: handleClick,
+        onKeyDown: (e) => {
+          if (e.key === "Enter" || e.key === " ") handleClick(e);
+        },
+        tabIndex: disabled ? -1 : 0,
         ...props,
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("span", { className: "[&>svg]:size-6", children: icon }),
-          /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("p", { className: "w-full text-sm truncate", children: header }),
-          /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_phosphor_react13.CaretRight, { size: 24, className: "cursor-pointer" })
+          /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("span", { className: "absolute right-2 flex h-3.5 w-3.5 items-center justify-center", children: selectedValue === value && /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_phosphor_react14.Check, { className: "" }) }),
+          children
         ]
       }
     );
   }
 );
-var CardSupport = (0, import_react14.forwardRef)(
-  ({ header, className, direction = "col", children, ...props }, ref) => {
-    return /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(
-      CardBase,
+SelectItem.displayName = "SelectItem";
+var Select_default = Select;
+
+// src/components/Menu/Menu.tsx
+var import_zustand5 = require("zustand");
+var import_react17 = require("react");
+var import_phosphor_react15 = require("phosphor-react");
+var import_jsx_runtime29 = require("react/jsx-runtime");
+var createMenuStore = (onValueChange) => (0, import_zustand5.create)((set) => ({
+  value: "",
+  setValue: (value) => {
+    set({ value });
+    onValueChange?.(value);
+  },
+  onValueChange
+}));
+var useMenuStore = (externalStore) => {
+  if (!externalStore) throw new Error("MenuItem must be inside Menu");
+  return externalStore;
+};
+var VARIANT_CLASSES5 = {
+  menu: "bg-background shadow-soft-shadow-1 px-6",
+  menu2: "",
+  breadcrumb: ""
+};
+var Menu = (0, import_react17.forwardRef)(
+  ({
+    className,
+    children,
+    defaultValue,
+    value: propValue,
+    variant = "menu",
+    onValueChange,
+    ...props
+  }, ref) => {
+    const storeRef = (0, import_react17.useRef)(null);
+    storeRef.current ??= createMenuStore(onValueChange);
+    const store = storeRef.current;
+    const { setValue } = (0, import_zustand5.useStore)(store, (s) => s);
+    (0, import_react17.useEffect)(() => {
+      setValue(propValue ?? defaultValue);
+    }, [defaultValue, propValue, setValue]);
+    const baseClasses = "w-full py-2 flex flex-row items-center justify-center";
+    const variantClasses = VARIANT_CLASSES5[variant];
+    return /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
+      "div",
       {
         ref,
-        layout: "horizontal",
-        padding: "medium",
-        minHeight: "none",
-        className: `border-none items-center gap-2 text-text-700 ${className}`,
+        className: `
+          ${baseClasses}
+          ${variantClasses}
+          ${className ?? ""}
+        `,
         ...props,
-        children: [
-          /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(
-            "div",
-            {
-              className: `
-              w-full flex ${direction == "col" ? "flex-col" : "flex-row items-center"}  gap-2
-          `,
-              children: [
-                /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("span", { className: "w-full min-w-0", children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("p", { className: "text-sm text-text-950 font-bold truncate", children: header }) }),
-                /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("span", { className: "flex flex-row gap-1", children })
-              ]
-            }
-          ),
-          /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_phosphor_react13.CaretRight, { className: "text-text-800 cursor-pointer", size: 24 })
-        ]
+        children: injectStore4(children, store)
       }
     );
   }
 );
-var CardForum = (0, import_react14.forwardRef)(
-  ({
-    title,
-    content,
-    comments,
-    onClickComments,
-    valueComments,
-    onClickProfile,
-    valueProfile,
-    className = "",
-    date,
-    hour,
-    ...props
-  }, ref) => {
-    return /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(
-      CardBase,
+Menu.displayName = "Menu";
+var MenuContent = (0, import_react17.forwardRef)(
+  ({ className, children, variant = "menu", ...props }, ref) => {
+    const baseClasses = "w-full flex flex-row items-center gap-2";
+    const variantClasses = variant === "menu2" ? "overflow-x-auto scroll-smooth" : "";
+    return /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
+      "ul",
       {
         ref,
-        layout: "horizontal",
-        padding: "medium",
-        minHeight: "none",
-        variant: "minimal",
-        className: `w-auto h-auto gap-3 ${className}`,
+        className: `
+          ${baseClasses}
+          ${variantClasses}
+          ${variant == "breadcrumb" ? "flex-wrap" : ""}
+          ${className ?? ""}
+        `,
+        style: variant === "menu2" ? { scrollbarWidth: "none", msOverflowStyle: "none" } : void 0,
         ...props,
-        children: [
-          /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
-            "button",
-            {
-              type: "button",
-              "aria-label": "Ver perfil",
-              onClick: () => onClickProfile?.(valueProfile),
-              className: "min-w-8 h-8 rounded-full bg-background-950"
-            }
-          ),
-          /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("div", { className: "flex flex-col gap-2 flex-1 min-w-0", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("div", { className: "flex flex-row gap-1 items-center flex-wrap", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("p", { className: "text-xs font-semibold text-primary-700 truncate", children: title }),
-              /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("p", { className: "text-xs text-text-600", children: [
-                "\u2022 ",
-                date,
-                " \u2022 ",
-                hour
-              ] })
-            ] }),
-            /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("p", { className: "text-text-950 text-sm line-clamp-2 truncate", children: content }),
-            /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(
-              "button",
-              {
-                type: "button",
-                "aria-label": "Ver coment\xE1rios",
-                onClick: () => onClickComments?.(valueComments),
-                className: "text-text-600 flex flex-row gap-2 items-center",
-                children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_phosphor_react13.ChatCircleText, { "aria-hidden": "true", size: 16 }),
-                  /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("p", { className: "text-xs", children: [
-                    comments,
-                    " respostas"
-                  ] })
-                ]
-              }
-            )
-          ] })
-        ]
+        children
       }
     );
   }
 );
-var CardAudio = (0, import_react14.forwardRef)(
+MenuContent.displayName = "MenuContent";
+var MenuItem = (0, import_react17.forwardRef)(
   ({
-    src,
-    title,
-    onPlay,
-    onPause,
-    onEnded,
-    onAudioTimeUpdate,
-    loop = false,
-    preload = "metadata",
-    tracks,
     className,
+    children,
+    value,
+    disabled = false,
+    store: externalStore,
+    variant = "menu",
+    separator = false,
     ...props
   }, ref) => {
-    const [isPlaying, setIsPlaying] = (0, import_react14.useState)(false);
-    const [currentTime, setCurrentTime] = (0, import_react14.useState)(0);
-    const [duration, setDuration] = (0, import_react14.useState)(0);
-    const [volume, setVolume] = (0, import_react14.useState)(1);
-    const [showVolumeControl, setShowVolumeControl] = (0, import_react14.useState)(false);
-    const audioRef = (0, import_react14.useRef)(null);
-    const formatTime = (time) => {
-      const minutes = Math.floor(time / 60);
-      const seconds = Math.floor(time % 60);
-      return `${minutes}:${seconds.toString().padStart(2, "0")}`;
-    };
-    const handlePlayPause = () => {
-      if (isPlaying) {
-        audioRef.current?.pause();
-        setIsPlaying(false);
-        onPause?.();
-      } else {
-        audioRef.current?.play();
-        setIsPlaying(true);
-        onPlay?.();
-      }
-    };
-    const handleTimeUpdate = () => {
-      const current = audioRef.current?.currentTime ?? 0;
-      const total = audioRef.current?.duration ?? 0;
-      setCurrentTime(current);
-      setDuration(total);
-      onAudioTimeUpdate?.(current, total);
-    };
-    const handleLoadedMetadata = () => {
-      setDuration(audioRef.current?.duration ?? 0);
-    };
-    const handleEnded = () => {
-      setIsPlaying(false);
-      setCurrentTime(0);
-      onEnded?.();
-    };
-    const handleProgressClick = (e) => {
-      const rect = e.currentTarget.getBoundingClientRect();
-      const clickX = e.clientX - rect.left;
-      const width = rect.width;
-      const percentage = clickX / width;
-      const newTime = percentage * duration;
-      if (audioRef.current) {
-        audioRef.current.currentTime = newTime;
-      }
-      setCurrentTime(newTime);
-    };
-    const handleVolumeChange = (e) => {
-      const newVolume = parseFloat(e.target.value);
-      setVolume(newVolume);
-      if (audioRef.current) {
-        audioRef.current.volume = newVolume;
+    const store = useMenuStore(externalStore);
+    const { value: selectedValue, setValue } = (0, import_zustand5.useStore)(store, (s) => s);
+    const handleClick = (e) => {
+      if (!disabled) {
+        setValue(value);
       }
+      props.onClick?.(e);
     };
-    const toggleVolumeControl = () => {
-      setShowVolumeControl(!showVolumeControl);
-    };
-    const getVolumeIcon = () => {
-      if (volume === 0) {
-        return /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_phosphor_react13.SpeakerSimpleX, {});
-      }
-      if (volume < 0.5) {
-        return /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_phosphor_react13.SpeakerLow, {});
-      }
-      return /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_phosphor_react13.SpeakerHigh, {});
+    const commonProps = {
+      role: "menuitem",
+      "aria-disabled": disabled,
+      ref,
+      onClick: handleClick,
+      onKeyDown: (e) => {
+        if (["Enter", " "].includes(e.key)) handleClick(e);
+      },
+      tabIndex: disabled ? -1 : 0,
+      onMouseDown: (e) => {
+        e.preventDefault();
+      },
+      ...props
     };
-    return /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(
-      CardBase,
-      {
-        ref,
-        layout: "horizontal",
-        padding: "medium",
-        minHeight: "none",
-        className: `w-auto h-14 items-center gap-2 ${className}`,
-        ...props,
-        children: [
-          /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
-            "audio",
-            {
-              ref: audioRef,
-              src,
-              loop,
-              preload,
-              onTimeUpdate: handleTimeUpdate,
-              onLoadedMetadata: handleLoadedMetadata,
-              onEnded: handleEnded,
-              "data-testid": "audio-element",
-              "aria-label": title,
-              children: tracks ? tracks.map((track) => /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
-                "track",
-                {
-                  kind: track.kind,
-                  src: track.src,
-                  srcLang: track.srcLang,
-                  label: track.label,
-                  default: track.default
-                },
-                track.src
-              )) : /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
-                "track",
-                {
-                  kind: "captions",
-                  src: "data:text/vtt;base64,",
-                  srcLang: "pt",
-                  label: "Sem legendas dispon\xEDveis"
-                }
-              )
-            }
-          ),
-          /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
-            "button",
-            {
-              type: "button",
-              onClick: handlePlayPause,
-              disabled: !src,
-              className: "cursor-pointer text-text-950 hover:text-primary-600 disabled:text-text-400 disabled:cursor-not-allowed",
-              "aria-label": isPlaying ? "Pausar" : "Reproduzir",
-              children: isPlaying ? /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("div", { className: "w-6 h-6 flex items-center justify-center", children: /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("div", { className: "flex gap-0.5", children: [
-                /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("div", { className: "w-1 h-4 bg-current rounded-sm" }),
-                /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("div", { className: "w-1 h-4 bg-current rounded-sm" })
-              ] }) }) : /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_phosphor_react13.Play, { size: 24 })
-            }
-          ),
-          /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("p", { className: "text-text-800 text-sm font-medium min-w-[2.5rem]", children: formatTime(currentTime) }),
-          /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("div", { className: "flex-1 relative", "data-testid": "progress-bar", children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
-            "button",
-            {
-              type: "button",
-              className: "w-full h-2 bg-border-100 rounded-full cursor-pointer",
-              onClick: handleProgressClick,
-              onKeyDown: (e) => {
-                if (e.key === "Enter" || e.key === " ") {
-                  e.preventDefault();
-                  handleProgressClick(
-                    e
-                  );
-                }
-              },
-              "aria-label": "Barra de progresso do \xE1udio",
-              children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
-                "div",
-                {
-                  className: "h-full bg-primary-600 rounded-full transition-all duration-100",
-                  style: {
-                    width: duration > 0 ? `${currentTime / duration * 100}%` : "0%"
-                  }
-                }
-              )
-            }
-          ) }),
-          /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("p", { className: "text-text-800 text-sm font-medium min-w-[2.5rem]", children: formatTime(duration) }),
-          /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("div", { className: "relative", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
-              "button",
+    const variants = {
+      menu: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
+        "li",
+        {
+          "data-variant": "menu",
+          className: `
+            w-full flex flex-col items-center justify-center gap-0.5 py-1 px-2 rounded-sm font-medium text-xs
+            [&>svg]:size-6 cursor-pointer hover:bg-primary-600 hover:text-text
+            focus:outline-none focus:border-indicator-info focus:border-2
+            ${selectedValue === value ? "bg-primary-50 text-primary-950" : "text-text-950"}
+            ${className ?? ""}
+          `,
+          ...commonProps,
+          children
+        }
+      ),
+      menu2: /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(
+        "li",
+        {
+          "data-variant": "menu2",
+          className: `
+            w-full flex flex-col items-center px-2 pt-4 gap-3 cursor-pointer focus:rounded-sm justify-center hover:bg-background-100 rounded-lg
+            focus:outline-none focus:border-indicator-info focus:border-2 
+            ${selectedValue === value ? "" : "pb-4"}
+          `,
+          ...commonProps,
+          children: [
+            /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
+              "span",
               {
-                type: "button",
-                onClick: toggleVolumeControl,
-                className: "cursor-pointer text-text-950 hover:text-primary-600",
-                "aria-label": "Controle de volume",
-                children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("div", { className: "w-6 h-6 flex items-center justify-center", children: getVolumeIcon() })
+                className: `flex flex-row items-center gap-2 px-4 text-text-950 text-xs font-bold ${className ?? ""}`,
+                children
+              }
+            ),
+            selectedValue === value && /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("div", { className: "h-1 w-full bg-primary-950 rounded-lg" })
+          ]
+        }
+      ),
+      breadcrumb: /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(
+        "li",
+        {
+          "data-variant": "breadcrumb",
+          className: `
+            flex flex-row gap-2 items-center w-fit p-2 rounded-lg hover:text-primary-600 cursor-pointer font-bold text-xs
+            focus:outline-none focus:border-indicator-info focus:border-2
+            ${selectedValue === value ? "text-text-950" : "text-text-600"}
+            ${className ?? ""}
+          `,
+          ...commonProps,
+          children: [
+            /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
+              "span",
+              {
+                className: `
+              border-b border-text-600 hover:border-primary-600 text-inherit text-xs
+              ${selectedValue === value ? "border-b-0 font-bold" : "border-b-text-600"}
+            `,
+                children
               }
             ),
-            showVolumeControl && /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
-              "button",
+            separator && /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
+              import_phosphor_react15.CaretRight,
               {
-                type: "button",
-                className: "absolute bottom-full right-0 mb-2 p-2 bg-background border border-border-100 rounded-lg shadow-lg focus:outline-none focus:ring-2 focus:ring-primary-500",
-                onKeyDown: (e) => {
-                  if (e.key === "Escape") {
-                    setShowVolumeControl(false);
-                  }
-                },
-                children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
-                  "input",
-                  {
-                    type: "range",
-                    min: "0",
-                    max: "1",
-                    step: "0.1",
-                    value: volume,
-                    onChange: handleVolumeChange,
-                    onKeyDown: (e) => {
-                      if (e.key === "ArrowUp" || e.key === "ArrowRight") {
-                        e.preventDefault();
-                        const newVolume = Math.min(
-                          1,
-                          Math.round((volume + 0.1) * 10) / 10
-                        );
-                        setVolume(newVolume);
-                        if (audioRef.current) audioRef.current.volume = newVolume;
-                      } else if (e.key === "ArrowDown" || e.key === "ArrowLeft") {
-                        e.preventDefault();
-                        const newVolume = Math.max(
-                          0,
-                          Math.round((volume - 0.1) * 10) / 10
-                        );
-                        setVolume(newVolume);
-                        if (audioRef.current) audioRef.current.volume = newVolume;
-                      }
-                    },
-                    className: "w-20 h-2 bg-border-100 rounded-lg appearance-none cursor-pointer",
-                    style: {
-                      background: `linear-gradient(to right, #3b82f6 0%, #3b82f6 ${volume * 100}%, #e5e7eb ${volume * 100}%, #e5e7eb 100%)`
-                    },
-                    "aria-label": "Volume",
-                    "aria-valuenow": Math.round(volume * 100),
-                    "aria-valuemin": 0,
-                    "aria-valuemax": 100
-                  }
-                )
+                size: 16,
+                className: "text-text-600",
+                "data-testid": "separator"
               }
             )
-          ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
-            import_phosphor_react13.DotsThreeVertical,
-            {
-              size: 24,
-              className: "text-text-950 cursor-pointer hover:text-primary-600"
-            }
-          )
-        ]
-      }
-    );
+          ]
+        }
+      )
+    };
+    return variants[variant] ?? variants["menu"];
   }
 );
-var SIMULADO_BACKGROUND_CLASSES = {
-  enem: "bg-exam-1",
-  prova: "bg-exam-2",
-  simuladao: "bg-exam-3",
-  vestibular: "bg-exam-4"
+MenuItem.displayName = "MenuItem";
+var internalScroll = (container, direction) => {
+  if (!container) return;
+  container.scrollBy({
+    left: direction === "left" ? -150 : 150,
+    behavior: "smooth"
+  });
 };
-var CardSimulado = (0, import_react14.forwardRef)(
-  ({ title, duration, info, backgroundColor, className, ...props }, ref) => {
-    const backgroundClass = SIMULADO_BACKGROUND_CLASSES[backgroundColor];
-    return /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
-      CardBase,
-      {
-        ref,
-        layout: "horizontal",
-        padding: "medium",
-        minHeight: "none",
-        cursor: "pointer",
-        className: `${backgroundClass} hover:shadow-soft-shadow-2 transition-shadow duration-200 ${className}`,
-        ...props,
-        children: /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("div", { className: "flex justify-between items-center w-full gap-4", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("div", { className: "flex flex-col gap-1 flex-1 min-w-0", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(Text_default, { size: "lg", weight: "bold", className: "text-text-950 truncate", children: title }),
-            /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("div", { className: "flex items-center gap-4 text-text-700", children: [
-              duration && /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("div", { className: "flex items-center gap-1", children: [
-                /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_phosphor_react13.Clock, { size: 16, className: "flex-shrink-0" }),
-                /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(Text_default, { size: "sm", children: duration })
-              ] }),
-              /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(Text_default, { size: "sm", className: "truncate", children: info })
-            ] })
-          ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
-            import_phosphor_react13.CaretRight,
-            {
-              size: 24,
-              className: "text-text-800 flex-shrink-0",
-              "data-testid": "caret-icon"
-            }
-          )
-        ] })
-      }
+var internalCheckScroll = (container, setShowLeftArrow, setShowRightArrow) => {
+  if (!container) return;
+  const { scrollLeft, scrollWidth, clientWidth } = container;
+  setShowLeftArrow(scrollLeft > 0);
+  setShowRightArrow(scrollLeft + clientWidth < scrollWidth);
+};
+var MenuOverflow = ({
+  children,
+  className,
+  defaultValue,
+  value,
+  onValueChange,
+  ...props
+}) => {
+  const containerRef = (0, import_react17.useRef)(null);
+  const [showLeftArrow, setShowLeftArrow] = (0, import_react17.useState)(false);
+  const [showRightArrow, setShowRightArrow] = (0, import_react17.useState)(false);
+  (0, import_react17.useEffect)(() => {
+    const checkScroll = () => internalCheckScroll(
+      containerRef.current,
+      setShowLeftArrow,
+      setShowRightArrow
     );
-  }
-);
+    checkScroll();
+    const container = containerRef.current;
+    container?.addEventListener("scroll", checkScroll);
+    window.addEventListener("resize", checkScroll);
+    return () => {
+      container?.removeEventListener("scroll", checkScroll);
+      window.removeEventListener("resize", checkScroll);
+    };
+  }, []);
+  return /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(
+    "div",
+    {
+      "data-testid": "menu-overflow-wrapper",
+      className: `relative w-full overflow-hidden ${className ?? ""}`,
+      children: [
+        showLeftArrow && /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(
+          "button",
+          {
+            onClick: () => internalScroll(containerRef.current, "left"),
+            className: "absolute left-0 top-1/2 -translate-y-1/2 z-10 flex h-8 w-8 items-center justify-center rounded-full bg-white shadow-md cursor-pointer",
+            "data-testid": "scroll-left-button",
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(import_phosphor_react15.CaretLeft, { size: 16 }),
+              /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("span", { className: "sr-only", children: "Scroll left" })
+            ]
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
+          Menu,
+          {
+            defaultValue,
+            onValueChange,
+            value,
+            variant: "menu2",
+            ...props,
+            children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(MenuContent, { ref: containerRef, variant: "menu2", children })
+          }
+        ),
+        showRightArrow && /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(
+          "button",
+          {
+            onClick: () => internalScroll(containerRef.current, "right"),
+            className: "absolute right-0 top-1/2 -translate-y-1/2 z-10 flex h-8 w-8 items-center justify-center rounded-full bg-white shadow-md cursor-pointer",
+            "data-testid": "scroll-right-button",
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(import_phosphor_react15.CaretRight, { size: 16 }),
+              /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("span", { className: "sr-only", children: "Scroll right" })
+            ]
+          }
+        )
+      ]
+    }
+  );
+};
+var injectStore4 = (children, store) => import_react17.Children.map(children, (child) => {
+  if (!(0, import_react17.isValidElement)(child)) return child;
+  const typedChild = child;
+  const shouldInject = typedChild.type === MenuItem;
+  return (0, import_react17.cloneElement)(typedChild, {
+    ...shouldInject ? { store } : {},
+    ...typedChild.props.children ? { children: injectStore4(typedChild.props.children, store) } : {}
+  });
+});
+var Menu_default = Menu;
 
 // src/components/Skeleton/Skeleton.tsx
-var import_react15 = require("react");
-var import_jsx_runtime27 = require("react/jsx-runtime");
+var import_react18 = require("react");
+var import_jsx_runtime30 = require("react/jsx-runtime");
 var SKELETON_ANIMATION_CLASSES = {
   pulse: "animate-pulse",
   none: ""
@@ -4922,7 +5530,7 @@ var SPACING_CLASSES = {
   medium: "space-y-2",
   large: "space-y-3"
 };
-var Skeleton = (0, import_react15.forwardRef)(
+var Skeleton = (0, import_react18.forwardRef)(
   ({
     variant = "text",
     width,
@@ -4942,13 +5550,13 @@ var Skeleton = (0, import_react15.forwardRef)(
       height: typeof height === "number" ? `${height}px` : height
     };
     if (variant === "text" && lines > 1) {
-      return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+      return /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
         "div",
         {
           ref,
           className: `flex flex-col ${spacingClass} ${className}`,
           ...props,
-          children: Array.from({ length: lines }, (_, index) => /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+          children: Array.from({ length: lines }, (_, index) => /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
             "div",
             {
               className: `${variantClass} ${animationClass}`,
@@ -4959,7 +5567,7 @@ var Skeleton = (0, import_react15.forwardRef)(
         }
       );
     }
-    return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
       "div",
       {
         ref,
@@ -4971,13 +5579,13 @@ var Skeleton = (0, import_react15.forwardRef)(
     );
   }
 );
-var SkeletonText = (0, import_react15.forwardRef)(
-  (props, ref) => /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(Skeleton, { ref, variant: "text", ...props })
+var SkeletonText = (0, import_react18.forwardRef)(
+  (props, ref) => /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(Skeleton, { ref, variant: "text", ...props })
 );
-var SkeletonCircle = (0, import_react15.forwardRef)((props, ref) => /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(Skeleton, { ref, variant: "circular", ...props }));
-var SkeletonRectangle = (0, import_react15.forwardRef)((props, ref) => /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(Skeleton, { ref, variant: "rectangular", ...props }));
-var SkeletonRounded = (0, import_react15.forwardRef)((props, ref) => /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(Skeleton, { ref, variant: "rounded", ...props }));
-var SkeletonCard = (0, import_react15.forwardRef)(
+var SkeletonCircle = (0, import_react18.forwardRef)((props, ref) => /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(Skeleton, { ref, variant: "circular", ...props }));
+var SkeletonRectangle = (0, import_react18.forwardRef)((props, ref) => /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(Skeleton, { ref, variant: "rectangular", ...props }));
+var SkeletonRounded = (0, import_react18.forwardRef)((props, ref) => /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(Skeleton, { ref, variant: "rounded", ...props }));
+var SkeletonCard = (0, import_react18.forwardRef)(
   ({
     showAvatar = true,
     showTitle = true,
@@ -4987,30 +5595,30 @@ var SkeletonCard = (0, import_react15.forwardRef)(
     className = "",
     ...props
   }, ref) => {
-    return /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(
+    return /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(
       "div",
       {
         ref,
         className: `w-full p-4 bg-background border border-border-200 rounded-lg ${className}`,
         ...props,
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)("div", { className: "flex items-start space-x-3", children: [
-            showAvatar && /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(SkeletonCircle, { width: 40, height: 40 }),
-            /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)("div", { className: "flex-1 space-y-2", children: [
-              showTitle && /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(SkeletonText, { width: "60%", height: 20 }),
-              showDescription && /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(SkeletonText, { lines, spacing: "small" })
+          /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("div", { className: "flex items-start space-x-3", children: [
+            showAvatar && /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(SkeletonCircle, { width: 40, height: 40 }),
+            /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("div", { className: "flex-1 space-y-2", children: [
+              showTitle && /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(SkeletonText, { width: "60%", height: 20 }),
+              showDescription && /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(SkeletonText, { lines, spacing: "small" })
             ] })
           ] }),
-          showActions && /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)("div", { className: "flex justify-end space-x-2 mt-4", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(SkeletonRectangle, { width: 80, height: 32 }),
-            /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(SkeletonRectangle, { width: 80, height: 32 })
+          showActions && /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("div", { className: "flex justify-end space-x-2 mt-4", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(SkeletonRectangle, { width: 80, height: 32 }),
+            /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(SkeletonRectangle, { width: 80, height: 32 })
           ] })
         ]
       }
     );
   }
 );
-var SkeletonList = (0, import_react15.forwardRef)(
+var SkeletonList = (0, import_react18.forwardRef)(
   ({
     items = 3,
     showAvatar = true,
@@ -5020,19 +5628,19 @@ var SkeletonList = (0, import_react15.forwardRef)(
     className = "",
     ...props
   }, ref) => {
-    return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("div", { ref, className: `space-y-3 ${className}`, ...props, children: Array.from({ length: items }, (_, index) => /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)("div", { className: "flex items-start space-x-3 p-3", children: [
-      showAvatar && /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(SkeletonCircle, { width: 32, height: 32 }),
-      /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)("div", { className: "flex-1 space-y-2", children: [
-        showTitle && /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(SkeletonText, { width: "40%", height: 16 }),
-        showDescription && /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(SkeletonText, { lines, spacing: "small" })
+    return /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("div", { ref, className: `space-y-3 ${className}`, ...props, children: Array.from({ length: items }, (_, index) => /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("div", { className: "flex items-start space-x-3 p-3", children: [
+      showAvatar && /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(SkeletonCircle, { width: 32, height: 32 }),
+      /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("div", { className: "flex-1 space-y-2", children: [
+        showTitle && /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(SkeletonText, { width: "40%", height: 16 }),
+        showDescription && /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(SkeletonText, { lines, spacing: "small" })
       ] })
     ] }, index)) });
   }
 );
-var SkeletonTable = (0, import_react15.forwardRef)(
+var SkeletonTable = (0, import_react18.forwardRef)(
   ({ rows = 5, columns = 4, showHeader = true, className = "", ...props }, ref) => {
-    return /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)("div", { ref, className: `w-full ${className}`, ...props, children: [
-      showHeader && /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("div", { className: "flex space-x-2 mb-3", children: Array.from({ length: columns }, (_, index) => /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("div", { ref, className: `w-full ${className}`, ...props, children: [
+      showHeader && /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("div", { className: "flex space-x-2 mb-3", children: Array.from({ length: columns }, (_, index) => /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
         SkeletonText,
         {
           width: `${100 / columns}%`,
@@ -5040,7 +5648,7 @@ var SkeletonTable = (0, import_react15.forwardRef)(
         },
         index
       )) }),
-      /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("div", { className: "space-y-2", children: Array.from({ length: rows }, (_, rowIndex) => /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("div", { className: "flex space-x-2", children: Array.from({ length: columns }, (_2, colIndex) => /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("div", { className: "space-y-2", children: Array.from({ length: rows }, (_, rowIndex) => /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("div", { className: "flex space-x-2", children: Array.from({ length: columns }, (_2, colIndex) => /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
         SkeletonText,
         {
           width: `${100 / columns}%`,
@@ -5051,12 +5659,314 @@ var SkeletonTable = (0, import_react15.forwardRef)(
     ] });
   }
 );
+
+// src/components/Auth/Auth.tsx
+var import_react19 = require("react");
+var import_react_router_dom = require("react-router-dom");
+var import_jsx_runtime31 = require("react/jsx-runtime");
+var AuthContext = (0, import_react19.createContext)(void 0);
+var AuthProvider = ({
+  children,
+  checkAuthFn,
+  signOutFn,
+  initialAuthState = {},
+  getUserFn,
+  getSessionFn,
+  getTokensFn
+}) => {
+  const [authState, setAuthState] = (0, import_react19.useState)({
+    isAuthenticated: false,
+    isLoading: true,
+    ...initialAuthState
+  });
+  const checkAuth = (0, import_react19.useCallback)(async () => {
+    try {
+      setAuthState((prev) => ({ ...prev, isLoading: true }));
+      if (!checkAuthFn) {
+        setAuthState((prev) => ({
+          ...prev,
+          isAuthenticated: false,
+          isLoading: false
+        }));
+        return false;
+      }
+      const isAuth = await checkAuthFn();
+      setAuthState((prev) => ({
+        ...prev,
+        isAuthenticated: isAuth,
+        isLoading: false,
+        user: getUserFn ? getUserFn() : prev.user,
+        sessionInfo: getSessionFn ? getSessionFn() : prev.sessionInfo,
+        tokens: getTokensFn ? getTokensFn() : prev.tokens
+      }));
+      return isAuth;
+    } catch (error) {
+      console.error("Erro ao verificar autentica\xE7\xE3o:", error);
+      setAuthState((prev) => ({
+        ...prev,
+        isAuthenticated: false,
+        isLoading: false
+      }));
+      return false;
+    }
+  }, [checkAuthFn, getUserFn, getSessionFn, getTokensFn]);
+  const signOut = (0, import_react19.useCallback)(() => {
+    if (signOutFn) {
+      signOutFn();
+    }
+    setAuthState((prev) => ({
+      ...prev,
+      isAuthenticated: false,
+      user: void 0,
+      sessionInfo: void 0,
+      tokens: void 0
+    }));
+  }, [signOutFn]);
+  (0, import_react19.useEffect)(() => {
+    checkAuth();
+  }, [checkAuth]);
+  const contextValue = (0, import_react19.useMemo)(
+    () => ({
+      ...authState,
+      checkAuth,
+      signOut
+    }),
+    [authState, checkAuth, signOut]
+  );
+  return /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(AuthContext.Provider, { value: contextValue, children });
+};
+var useAuth = () => {
+  const context = (0, import_react19.useContext)(AuthContext);
+  if (context === void 0) {
+    throw new Error("useAuth deve ser usado dentro de um AuthProvider");
+  }
+  return context;
+};
+var ProtectedRoute = ({
+  children,
+  redirectTo = "/",
+  loadingComponent,
+  additionalCheck
+}) => {
+  const { isAuthenticated, isLoading, ...authState } = useAuth();
+  const defaultLoadingComponent = /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("div", { className: "flex items-center justify-center min-h-screen", children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("div", { className: "text-text-950 text-lg", children: "Carregando..." }) });
+  if (isLoading) {
+    return /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(import_jsx_runtime31.Fragment, { children: loadingComponent || defaultLoadingComponent });
+  }
+  if (!isAuthenticated) {
+    return /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(import_react_router_dom.Navigate, { to: redirectTo, replace: true });
+  }
+  if (additionalCheck && !additionalCheck({ isAuthenticated, isLoading, ...authState })) {
+    return /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(import_react_router_dom.Navigate, { to: redirectTo, replace: true });
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(import_jsx_runtime31.Fragment, { children });
+};
+var PublicRoute = ({
+  children,
+  redirectTo = "/painel",
+  redirectIfAuthenticated = false,
+  checkAuthBeforeRender = false
+}) => {
+  const { isAuthenticated, isLoading } = useAuth();
+  if (checkAuthBeforeRender && isLoading) {
+    return /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("div", { className: "flex items-center justify-center min-h-screen", children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("div", { className: "text-text-950 text-lg", children: "Carregando..." }) });
+  }
+  if (isAuthenticated && redirectIfAuthenticated) {
+    return /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(import_react_router_dom.Navigate, { to: redirectTo, replace: true });
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(import_jsx_runtime31.Fragment, { children });
+};
+var withAuth = (Component, options = {}) => {
+  return (props) => /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(ProtectedRoute, { ...options, children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(Component, { ...props }) });
+};
+var useAuthGuard = (options = {}) => {
+  const authState = useAuth();
+  const { requireAuth = true, customCheck } = options;
+  const canAccess = !authState.isLoading && (requireAuth ? authState.isAuthenticated && (!customCheck || customCheck(authState)) : !authState.isAuthenticated || !customCheck || customCheck(authState));
+  return {
+    canAccess,
+    isLoading: authState.isLoading,
+    authState
+  };
+};
+var useRouteAuth = (fallbackPath = "/") => {
+  const { isAuthenticated, isLoading } = useAuth();
+  const location = (0, import_react_router_dom.useLocation)();
+  const redirectToLogin = () => /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(import_react_router_dom.Navigate, { to: fallbackPath, state: { from: location }, replace: true });
+  return {
+    isAuthenticated,
+    isLoading,
+    redirectToLogin
+  };
+};
+
+// src/components/Tab/Tab.tsx
+var import_react20 = require("react");
+var import_jsx_runtime32 = require("react/jsx-runtime");
+var TAB_SIZE_CLASSES = {
+  small: {
+    container: "h-10 gap-1",
+    tab: "px-3 py-2 text-sm",
+    indicator: "h-0.5"
+  },
+  medium: {
+    container: "h-12 gap-2",
+    tab: "px-4 py-4 text-sm",
+    indicator: "h-1"
+  },
+  large: {
+    container: "h-14 gap-2",
+    tab: "px-6 py-4 text-base",
+    indicator: "h-1"
+  }
+};
+var RESPONSIVE_WIDTH_CLASSES = {
+  twoTabs: "w-[115px] sm:w-[204px]",
+  threeTabs: "w-[100px] sm:w-[160px]",
+  fourTabs: "w-[80px] sm:w-[140px]",
+  fiveTabs: "w-[70px] sm:w-[120px]",
+  default: "flex-1"
+};
+var Tab = (0, import_react20.forwardRef)(
+  ({
+    tabs,
+    activeTab,
+    onTabChange,
+    size = "medium",
+    responsive = true,
+    className = "",
+    ...props
+  }, ref) => {
+    const sizeClasses = TAB_SIZE_CLASSES[size];
+    const getResponsiveWidthClass = (tabCount) => {
+      if (!responsive) return RESPONSIVE_WIDTH_CLASSES.default;
+      switch (tabCount) {
+        case 2:
+          return RESPONSIVE_WIDTH_CLASSES.twoTabs;
+        case 3:
+          return RESPONSIVE_WIDTH_CLASSES.threeTabs;
+        case 4:
+          return RESPONSIVE_WIDTH_CLASSES.fourTabs;
+        case 5:
+          return RESPONSIVE_WIDTH_CLASSES.fiveTabs;
+        default:
+          return RESPONSIVE_WIDTH_CLASSES.default;
+      }
+    };
+    const handleTabClick = (tabId) => {
+      const tab = tabs.find((t) => t.id === tabId);
+      if (tab && !tab.disabled) {
+        onTabChange(tabId);
+      }
+    };
+    const wrapAroundIndex = (index, maxLength) => {
+      if (index < 0) return maxLength - 1;
+      if (index >= maxLength) return 0;
+      return index;
+    };
+    const findNextValidTab = (startIndex, direction) => {
+      let nextIndex = wrapAroundIndex(startIndex + direction, tabs.length);
+      let attempts = 0;
+      while (tabs[nextIndex]?.disabled && attempts < tabs.length) {
+        nextIndex = wrapAroundIndex(nextIndex + direction, tabs.length);
+        attempts++;
+      }
+      return nextIndex;
+    };
+    const handleArrowNavigation = (direction) => {
+      const currentIndex = tabs.findIndex((tab) => tab.id === activeTab);
+      const nextIndex = findNextValidTab(currentIndex, direction);
+      if (!tabs[nextIndex]?.disabled && nextIndex !== currentIndex) {
+        handleTabClick(tabs[nextIndex].id);
+      }
+    };
+    const handleKeyDown = (event, tabId) => {
+      if (event.key === "Enter" || event.key === " ") {
+        event.preventDefault();
+        handleTabClick(tabId);
+        return;
+      }
+      if (event.key === "ArrowLeft" || event.key === "ArrowRight") {
+        event.preventDefault();
+        const direction = event.key === "ArrowLeft" ? -1 : 1;
+        handleArrowNavigation(direction);
+      }
+    };
+    const getTabClassNames = (isDisabled, isActive) => {
+      if (isDisabled) {
+        return "text-text-400 cursor-not-allowed opacity-50";
+      }
+      if (isActive) {
+        return "text-text-950";
+      }
+      return "text-text-700 hover:text-text-800";
+    };
+    const tabWidthClass = getResponsiveWidthClass(tabs.length);
+    const containerWidth = responsive && tabs.length <= 2 ? "w-[240px] sm:w-[416px]" : "w-full";
+    return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
+      "div",
+      {
+        ref,
+        className: `flex flex-row items-start ${sizeClasses.container} ${containerWidth} ${className}`,
+        role: "tablist",
+        ...props,
+        children: tabs.map((tab) => {
+          const isActive = tab.id === activeTab;
+          const isDisabled = Boolean(tab.disabled);
+          const tabClassNames = getTabClassNames(isDisabled, isActive);
+          return /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(
+            "button",
+            {
+              type: "button",
+              role: "tab",
+              "aria-selected": isActive,
+              "aria-disabled": isDisabled,
+              tabIndex: isActive ? 0 : -1,
+              className: `
+                relative flex flex-row justify-center items-center gap-2 rounded transition-colors isolate
+                ${sizeClasses.tab}
+                ${tabWidthClass}
+                ${tabClassNames}
+                ${!isDisabled && !isActive ? "hover:bg-background-50" : ""}
+                focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary-500 focus-visible:ring-offset-2
+              `,
+              onClick: () => handleTabClick(tab.id),
+              onKeyDown: (e) => handleKeyDown(e, tab.id),
+              disabled: isDisabled,
+              "data-testid": `tab-${tab.id}`,
+              children: [
+                /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("span", { className: "font-bold leading-4 tracking-[0.2px] truncate", children: responsive && tab.mobileLabel ? /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(import_jsx_runtime32.Fragment, { children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("span", { className: "sm:hidden", children: tab.mobileLabel }),
+                  /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("span", { className: "hidden sm:inline", children: tab.label })
+                ] }) : tab.label }),
+                isActive && /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
+                  "div",
+                  {
+                    className: `absolute bottom-0 left-2 right-2 bg-primary-700 rounded-lg z-[2] ${sizeClasses.indicator}`,
+                    "data-testid": "active-indicator"
+                  }
+                )
+              ]
+            },
+            tab.id
+          );
+        })
+      }
+    );
+  }
+);
+Tab.displayName = "Tab";
+var Tab_default = Tab;
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   Alert,
+  AlertDialog,
+  AlternativesList,
+  AuthProvider,
   Badge,
   Button,
   Calendar,
+  CardAccordation,
   CardActivitiesResults,
   CardPerformance,
   CardProgress,
@@ -5089,7 +5999,11 @@ var SkeletonTable = (0, import_react15.forwardRef)(
   ProfileMenuTrigger,
   ProgressBar,
   ProgressCircle,
+  ProtectedRoute,
+  PublicRoute,
   Radio,
+  RadioGroup,
+  RadioGroupItem,
   Select,
   SelectContent,
   SelectItem,
@@ -5105,11 +6019,16 @@ var SkeletonTable = (0, import_react15.forwardRef)(
   SkeletonTable,
   SkeletonText,
   Stepper,
+  Tab,
   Table,
   Text,
   TextArea,
   Toast,
   Toaster,
-  useToastStore
+  useAuth,
+  useAuthGuard,
+  useRouteAuth,
+  useToastStore,
+  withAuth
 });
 //# sourceMappingURL=index.js.map