analytica-frontend-lib 1.2.50 → 1.2.51

package/dist/RecommendedLessonDetails/index.js

@@ -1,7 +1,9 @@
 "use strict";
+var __create = Object.create;
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
 var __export = (target, all) => {
   for (var name in all)
@@ -15,17 +17,26 @@ var __copyProps = (to, from, except, desc) => {
   }
   return to;
 };
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 
 // src/components/RecommendedLessonDetails/index.ts
 var RecommendedLessonDetails_exports = {};
 __export(RecommendedLessonDetails_exports, {
-  RecommendedLessonDetails: () => RecommendedLessonDetails_default
+  RecommendedLessonDetails: () => RecommendedLessonDetails_default,
+  StudentPerformanceModal: () => StudentPerformanceModal
 });
 module.exports = __toCommonJS(RecommendedLessonDetails_exports);
 
 // src/components/RecommendedLessonDetails/RecommendedLessonDetails.tsx
-var import_react8 = require("react");
+var import_react16 = require("react");
 
 // src/utils/utils.ts
 var import_clsx = require("clsx");
@@ -2140,22 +2151,2614 @@ var StudentsTable = ({
   ] }) });
 };
 
-// src/components/RecommendedLessonDetails/types.ts
-var DEFAULT_LABELS = {
-  viewLesson: "Ver aula",
-  viewPerformance: "Ver desempenho",
-  resultsTitle: "Resultados da aula recomendada",
-  completedLabel: "CONCLU\xCDDO",
-  bestResultLabel: "MELHOR RESULTADO",
-  hardestTopicLabel: "MAIOR DIFICULDADE",
-  studentColumn: "Aluno",
-  statusColumn: "Status",
-  completionColumn: "Conclus\xE3o",
-  durationColumn: "Dura\xE7\xE3o"
+// src/components/RecommendedLessonDetails/components/StudentPerformanceModal.tsx
+var import_react14 = require("react");
+var import_react15 = require("@phosphor-icons/react");
+
+// src/components/Modal/Modal.tsx
+var import_react8 = require("react");
+var import_phosphor_react4 = require("phosphor-react");
+
+// src/components/Modal/utils/videoUtils.ts
+var isYouTubeUrl = (url) => {
+  const youtubeRegex = /^(https?:\/\/)?((www|m|music)\.)?(youtube\.com|youtu\.be|youtube-nocookie\.com)\/.+/i;
+  return youtubeRegex.test(url);
+};
+var isValidYouTubeHost = (host) => {
+  if (host === "youtu.be") return "youtu.be";
+  const isValidYouTubeCom = host === "youtube.com" || host.endsWith(".youtube.com") && /^(www|m|music)\.youtube\.com$/.test(host);
+  if (isValidYouTubeCom) return "youtube";
+  const isValidNoCookie = host === "youtube-nocookie.com" || host.endsWith(".youtube-nocookie.com") && /^(www|m|music)\.youtube-nocookie\.com$/.test(host);
+  if (isValidNoCookie) return "nocookie";
+  return null;
+};
+var extractYoutuBeId = (pathname) => {
+  const firstSeg = pathname.split("/").filter(Boolean)[0];
+  return firstSeg || null;
+};
+var extractYouTubeId = (pathname, searchParams) => {
+  const parts = pathname.split("/").filter(Boolean);
+  const [first, second] = parts;
+  if (first === "embed" && second) return second;
+  if (first === "shorts" && second) return second;
+  if (first === "live" && second) return second;
+  const v = searchParams.get("v");
+  if (v) return v;
+  return null;
+};
+var getYouTubeVideoId = (url) => {
+  try {
+    const u = new URL(url);
+    const hostType = isValidYouTubeHost(u.hostname.toLowerCase());
+    if (!hostType) return null;
+    if (hostType === "youtu.be") {
+      return extractYoutuBeId(u.pathname);
+    }
+    return extractYouTubeId(u.pathname, u.searchParams);
+  } catch {
+    return null;
+  }
+};
+var getYouTubeEmbedUrl = (videoId) => {
+  return `https://www.youtube-nocookie.com/embed/${videoId}?autoplay=0&rel=0&modestbranding=1`;
 };
 
-// src/components/RecommendedLessonDetails/RecommendedLessonDetails.tsx
+// src/components/Modal/Modal.tsx
 var import_jsx_runtime22 = require("react/jsx-runtime");
+var SIZE_CLASSES5 = {
+  xs: "max-w-[360px]",
+  sm: "max-w-[420px]",
+  md: "max-w-[510px]",
+  lg: "max-w-[640px]",
+  xl: "max-w-[970px]"
+};
+var Modal = ({
+  isOpen,
+  onClose,
+  title,
+  children,
+  size = "md",
+  className = "",
+  closeOnEscape = true,
+  footer,
+  hideCloseButton = false,
+  variant = "default",
+  description,
+  image,
+  imageAlt,
+  actionLink,
+  actionLabel,
+  contentClassName = ""
+}) => {
+  const titleId = (0, import_react8.useId)();
+  (0, import_react8.useEffect)(() => {
+    if (!isOpen || !closeOnEscape) return;
+    const handleEscape = (event) => {
+      if (event.key === "Escape") {
+        onClose();
+      }
+    };
+    document.addEventListener("keydown", handleEscape);
+    return () => document.removeEventListener("keydown", handleEscape);
+  }, [isOpen, closeOnEscape, onClose]);
+  (0, import_react8.useEffect)(() => {
+    if (!isOpen) return;
+    const scrollbarWidth = window.innerWidth - document.documentElement.clientWidth;
+    const originalOverflow = document.body.style.overflow;
+    const originalPaddingRight = document.body.style.paddingRight;
+    document.body.style.overflow = "hidden";
+    if (scrollbarWidth > 0) {
+      document.body.style.paddingRight = `${scrollbarWidth}px`;
+      const overlay = document.createElement("div");
+      overlay.id = "modal-scrollbar-overlay";
+      overlay.style.cssText = `
+        position: fixed;
+        top: 0;
+        right: 0;
+        width: ${scrollbarWidth}px;
+        height: 100vh;
+        background-color: rgb(0 0 0 / 0.6);
+        z-index: 40;
+        pointer-events: none;
+      `;
+      document.body.appendChild(overlay);
+    }
+    return () => {
+      document.body.style.overflow = originalOverflow;
+      document.body.style.paddingRight = originalPaddingRight;
+      const overlay = document.getElementById("modal-scrollbar-overlay");
+      if (overlay) {
+        overlay.remove();
+      }
+    };
+  }, [isOpen]);
+  if (!isOpen) return null;
+  const sizeClasses = SIZE_CLASSES5[size];
+  const baseClasses = "bg-secondary-50 rounded-3xl shadow-hard-shadow-2 border border-border-100 w-full mx-4";
+  const dialogResetClasses = "p-0 m-0 border-none outline-none max-h-none static";
+  const modalClasses = cn(
+    baseClasses,
+    sizeClasses,
+    dialogResetClasses,
+    className
+  );
+  const normalizeUrl = (href) => /^https?:\/\//i.test(href) ? href : `https://${href}`;
+  const handleActionClick = () => {
+    if (actionLink) {
+      window.open(normalizeUrl(actionLink), "_blank", "noopener,noreferrer");
+    }
+  };
+  if (variant === "activity") {
+    return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { className: "fixed inset-0 z-50 flex items-center justify-center bg-black/60 backdrop-blur-xs border-none p-0 m-0 w-full cursor-default", children: /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(
+      "dialog",
+      {
+        className: modalClasses,
+        "aria-labelledby": titleId,
+        "aria-modal": "true",
+        open: true,
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { className: "flex justify-end p-6 pb-0", children: !hideCloseButton && /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+            "button",
+            {
+              onClick: onClose,
+              className: "p-1 text-text-500 hover:text-text-700 hover:bg-background-50 rounded-md transition-colors focus:outline-none focus:ring-2 focus:ring-indicator-info focus:ring-offset-2",
+              "aria-label": "Fechar modal",
+              children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_phosphor_react4.X, { size: 18 })
+            }
+          ) }),
+          /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { className: "flex flex-col items-center px-6 pb-6 gap-5", children: [
+            image && /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { className: "flex justify-center", children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+              "img",
+              {
+                src: image,
+                alt: imageAlt ?? "",
+                className: "w-[122px] h-[122px] object-contain"
+              }
+            ) }),
+            /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+              "h2",
+              {
+                id: titleId,
+                className: "text-lg font-semibold text-text-950 text-center",
+                children: title
+              }
+            ),
+            description && /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("p", { className: "text-sm font-normal text-text-400 text-center max-w-md leading-[21px]", children: description }),
+            actionLink && /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { className: "w-full", children: [
+              (() => {
+                const normalized = normalizeUrl(actionLink);
+                const isYT = isYouTubeUrl(normalized);
+                if (!isYT) return null;
+                const id = getYouTubeVideoId(normalized);
+                if (!id) {
+                  return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+                    Button_default,
+                    {
+                      variant: "solid",
+                      action: "primary",
+                      size: "large",
+                      className: "w-full",
+                      onClick: handleActionClick,
+                      children: actionLabel || "Iniciar Atividade"
+                    }
+                  );
+                }
+                return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+                  "iframe",
+                  {
+                    src: getYouTubeEmbedUrl(id),
+                    className: "w-full aspect-video rounded-lg",
+                    allowFullScreen: true,
+                    allow: "accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture",
+                    title: "V\xEDdeo YouTube"
+                  }
+                );
+              })(),
+              !isYouTubeUrl(normalizeUrl(actionLink)) && /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+                Button_default,
+                {
+                  variant: "solid",
+                  action: "primary",
+                  size: "large",
+                  className: "w-full",
+                  onClick: handleActionClick,
+                  children: actionLabel || "Iniciar Atividade"
+                }
+              )
+            ] })
+          ] })
+        ]
+      }
+    ) });
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { className: "fixed inset-0 z-50 flex items-center justify-center bg-black/60 backdrop-blur-xs border-none p-0 m-0 w-full cursor-default", children: /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(
+    "dialog",
+    {
+      className: modalClasses,
+      "aria-labelledby": titleId,
+      "aria-modal": "true",
+      open: true,
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { className: "flex items-center justify-between px-6 py-6", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("h2", { id: titleId, className: "text-lg font-semibold text-text-950", children: title }),
+          !hideCloseButton && /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+            "button",
+            {
+              onClick: onClose,
+              className: "p-1 text-text-500 hover:text-text-700 hover:bg-background-50 rounded-md transition-colors focus:outline-none focus:ring-2 focus:ring-indicator-info focus:ring-offset-2",
+              "aria-label": "Fechar modal",
+              children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_phosphor_react4.X, { size: 18 })
+            }
+          )
+        ] }),
+        children && /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { className: cn("px-6 pb-6", contentClassName), children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { className: "text-text-500 font-normal text-sm leading-6", children }) }),
+        footer && /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { className: "flex justify-end gap-3 px-6 pb-6", children: footer })
+      ]
+    }
+  ) });
+};
+var Modal_default = Modal;
+
+// src/components/Accordation/Accordation.tsx
+var import_react11 = require("react");
+
+// src/components/Card/Card.tsx
+var import_react10 = require("react");
+var import_phosphor_react5 = require("phosphor-react");
+
+// src/components/IconRender/IconRender.tsx
+var import_react9 = require("react");
+var PhosphorIcons = __toESM(require("phosphor-react"));
+var import_jsx_runtime23 = require("react/jsx-runtime");
+var IconRender = ({
+  iconName,
+  color = "#000000",
+  size = 24,
+  weight = "regular"
+}) => {
+  if (typeof iconName === "string") {
+    switch (iconName) {
+      case "Chat_PT":
+        return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(ChatPT, { size, color });
+      case "Chat_EN":
+        return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(ChatEN, { size, color });
+      case "Chat_ES":
+        return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(ChatES, { size, color });
+      default: {
+        const IconComponent = PhosphorIcons[iconName] || PhosphorIcons.Question;
+        return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(IconComponent, { size, color, weight });
+      }
+    }
+  } else {
+    return (0, import_react9.cloneElement)(iconName, {
+      size,
+      color: "currentColor"
+    });
+  }
+};
+var IconRender_default = IconRender;
+
+// src/components/Card/Card.tsx
+var import_jsx_runtime24 = 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_react10.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];
+    return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+      "div",
+      {
+        ref,
+        className: cn(
+          baseClasses,
+          paddingClasses,
+          minHeightClasses,
+          layoutClasses,
+          cursorClasses,
+          className
+        ),
+        ...props,
+        children
+      }
+    );
+  }
+);
+var ACTION_CARD_CLASSES = {
+  warning: "bg-warning-background",
+  success: "bg-success-200",
+  error: "bg-error-100",
+  info: "bg-info-background"
+};
+var ACTION_ICON_CLASSES = {
+  warning: "bg-warning-300 text-text",
+  success: "bg-indicator-positive text-text-950",
+  error: "bg-indicator-negative 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_react10.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_runtime24.jsxs)(
+      "div",
+      {
+        ref,
+        className: cn(
+          "w-full flex flex-col border border-border-50  bg-background rounded-xl",
+          className
+        ),
+        ...props,
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(
+            "div",
+            {
+              className: cn(
+                "flex flex-col gap-1 items-center justify-center p-4",
+                actionCardClasses,
+                extended ? "rounded-t-xl" : "rounded-xl"
+              ),
+              children: [
+                /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+                  "span",
+                  {
+                    className: cn(
+                      "size-7.5 rounded-full flex items-center justify-center",
+                      actionIconClasses
+                    ),
+                    children: icon
+                  }
+                ),
+                /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+                  Text_default,
+                  {
+                    size: "2xs",
+                    weight: "medium",
+                    className: "text-text-800 uppercase truncate",
+                    children: title
+                  }
+                ),
+                /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+                  "p",
+                  {
+                    className: cn("text-lg font-bold truncate", actionSubTitleClasses),
+                    children: subTitle
+                  }
+                )
+              ]
+            }
+          ),
+          extended && /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { className: "flex flex-col items-center gap-2.5 pb-9.5 pt-2.5", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+              "p",
+              {
+                className: cn(
+                  "text-2xs font-medium uppercase truncate",
+                  actionHeaderClasses
+                ),
+                children: header
+              }
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(Badge_default, { size: "large", action: "info", children: description })
+          ] })
+        ]
+      }
+    );
+  }
+);
+var CardQuestions = (0, import_react10.forwardRef)(
+  ({
+    header,
+    state = "undone",
+    className,
+    onClickButton,
+    valueButton,
+    ...props
+  }, ref) => {
+    const isDone = state === "done";
+    const stateLabel = isDone ? "Realizado" : "N\xE3o Realizado";
+    const buttonLabel = isDone ? "Ver Resultado" : "Responder";
+    return /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(
+      CardBase,
+      {
+        ref,
+        layout: "horizontal",
+        padding: "medium",
+        minHeight: "medium",
+        className: cn("justify-between gap-4", className),
+        ...props,
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("section", { className: "flex flex-col gap-1 flex-1 min-w-0", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("p", { className: "font-bold text-xs text-text-950 truncate", children: header }),
+            /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { className: "flex flex-row gap-6 items-center", children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+              Badge_default,
+              {
+                size: "medium",
+                variant: "solid",
+                action: isDone ? "success" : "error",
+                children: stateLabel
+              }
+            ) })
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("span", { className: "flex-shrink-0", children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+            Button_default,
+            {
+              size: "extra-small",
+              onClick: () => onClickButton?.(valueButton),
+              className: "min-w-fit",
+              children: buttonLabel
+            }
+          ) })
+        ]
+      }
+    );
+  }
+);
+var CardProgress = (0, import_react10.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_runtime24.jsxs)(import_jsx_runtime24.Fragment, { children: [
+        showDates && /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { className: "flex flex-row gap-6 items-center", children: [
+          initialDate && /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("span", { className: "flex flex-row gap-1 items-center text-2xs", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("p", { className: "text-text-800 font-semibold", children: "In\xEDcio" }),
+            /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("p", { className: "text-text-600", children: initialDate })
+          ] }),
+          endDate && /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("span", { className: "flex flex-row gap-1 items-center text-2xs", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("p", { className: "text-text-800 font-semibold", children: "Fim" }),
+            /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("p", { className: "text-text-600", children: endDate })
+          ] })
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("span", { className: "grid grid-cols-[1fr_auto] items-center gap-2", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+            ProgressBar_default,
+            {
+              size: "small",
+              value: progress,
+              variant: progressVariant,
+              "data-testid": "progress-bar"
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(
+            Text_default,
+            {
+              size: "xs",
+              weight: "medium",
+              className: cn(
+                "text-text-950 leading-none tracking-normal text-center flex-none"
+              ),
+              children: [
+                Math.round(progress),
+                "%"
+              ]
+            }
+          )
+        ] })
+      ] }),
+      vertical: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("p", { className: "text-sm text-text-800", children: subhead })
+    };
+    return /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(
+      CardBase,
+      {
+        ref,
+        layout: isHorizontal ? "horizontal" : "vertical",
+        padding: "none",
+        minHeight: "medium",
+        cursor: "pointer",
+        className: cn(isHorizontal ? "h-20" : "", className),
+        ...props,
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+            "div",
+            {
+              className: cn(
+                "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("#") ? `${color}` : ""
+              ),
+              style: color.startsWith("#") ? { backgroundColor: color } : void 0,
+              "data-testid": "icon-container",
+              children: icon
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(
+            "div",
+            {
+              className: cn(
+                "p-4 flex flex-col justify-between w-full h-full",
+                !isHorizontal && "gap-4"
+              ),
+              children: [
+                /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(Text_default, { size: "sm", weight: "bold", className: "text-text-950 truncate", children: header }),
+                contentComponent[direction]
+              ]
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+var CardTopic = (0, import_react10.forwardRef)(
+  ({
+    header,
+    subHead,
+    progress,
+    showPercentage = false,
+    progressVariant = "blue",
+    className = "",
+    ...props
+  }, ref) => {
+    return /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(
+      CardBase,
+      {
+        ref,
+        layout: "vertical",
+        padding: "small",
+        minHeight: "medium",
+        cursor: "pointer",
+        className: cn("justify-center gap-2  py-2 px-4", className),
+        ...props,
+        children: [
+          subHead && /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("span", { className: "text-text-600 text-2xs flex flex-row gap-1", children: subHead.map((text, index) => /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(import_react10.Fragment, { children: [
+            /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("p", { children: text }),
+            index < subHead.length - 1 && /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("p", { children: "\u2022" })
+          ] }, `${text} - ${index}`)) }),
+          /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("p", { className: "text-sm text-text-950 font-bold truncate", children: header }),
+          /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("span", { className: "grid grid-cols-[1fr_auto] items-center gap-2", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+              ProgressBar_default,
+              {
+                size: "small",
+                value: progress,
+                variant: progressVariant,
+                "data-testid": "progress-bar"
+              }
+            ),
+            showPercentage && /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(
+              Text_default,
+              {
+                size: "xs",
+                weight: "medium",
+                className: cn(
+                  "text-text-950 leading-none tracking-normal text-center flex-none"
+                ),
+                children: [
+                  Math.round(progress),
+                  "%"
+                ]
+              }
+            )
+          ] })
+        ]
+      }
+    );
+  }
+);
+var CardPerformance = (0, import_react10.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_runtime24.jsxs)(
+      CardBase,
+      {
+        ref,
+        layout: "horizontal",
+        padding: "medium",
+        minHeight: "none",
+        className: cn(
+          actionVariant == "caret" ? "cursor-pointer" : "",
+          className
+        ),
+        onClick: () => actionVariant == "caret" && onClickButton?.(valueButton),
+        ...props,
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { className: "w-full flex flex-col justify-between gap-2", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { className: "flex flex-row justify-between items-center gap-2", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("p", { className: "text-lg font-bold text-text-950 truncate flex-1 min-w-0", children: header }),
+              actionVariant === "button" && /* @__PURE__ */ (0, import_jsx_runtime24.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_runtime24.jsx)("div", { className: "w-full", children: hasProgress ? /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+              ProgressBar_default,
+              {
+                value: progress,
+                label: `${progress}% ${labelProgress}`,
+                variant: progressVariant
+              }
+            ) : /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("p", { className: "text-xs text-text-600 truncate", children: description }) })
+          ] }),
+          actionVariant == "caret" && /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+            import_phosphor_react5.CaretRight,
+            {
+              className: "size-4.5 text-text-800 cursor-pointer",
+              "data-testid": "caret-icon"
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+var CardResults = (0, import_react10.forwardRef)(
+  ({
+    header,
+    correct_answers,
+    incorrect_answers,
+    icon,
+    direction = "col",
+    color = "#B7DFFF",
+    className,
+    ...props
+  }, ref) => {
+    const isRow = direction == "row";
+    return /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(
+      CardBase,
+      {
+        ref,
+        layout: "horizontal",
+        padding: "none",
+        minHeight: "medium",
+        className: cn("items-stretch cursor-pointer pr-4", className),
+        ...props,
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+            "div",
+            {
+              className: cn(
+                "flex justify-center items-center [&>svg]:size-8 text-text-950 min-w-20 max-w-20 min-h-full rounded-l-xl"
+              ),
+              style: {
+                backgroundColor: color
+              },
+              children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(IconRender_default, { iconName: icon, color: "currentColor", size: 20 })
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { className: "w-full flex flex-row justify-between items-center", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(
+              "div",
+              {
+                className: cn(
+                  "p-4 flex flex-wrap justify-between w-full h-full",
+                  isRow ? "flex-row items-center gap-2" : "flex-col"
+                ),
+                children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("p", { className: "text-sm font-bold text-text-950 flex-1", children: header }),
+                  /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("span", { className: "flex flex-wrap flex-row gap-1 items-center", children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(
+                      Badge_default,
+                      {
+                        action: "success",
+                        variant: "solid",
+                        size: "large",
+                        iconLeft: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_phosphor_react5.CheckCircle, {}),
+                        children: [
+                          correct_answers,
+                          " Corretas"
+                        ]
+                      }
+                    ),
+                    /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(
+                      Badge_default,
+                      {
+                        action: "error",
+                        variant: "solid",
+                        size: "large",
+                        iconLeft: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_phosphor_react5.XCircle, {}),
+                        children: [
+                          incorrect_answers,
+                          " Incorretas"
+                        ]
+                      }
+                    )
+                  ] })
+                ]
+              }
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_phosphor_react5.CaretRight, { className: "min-w-6 min-h-6 text-text-800" })
+          ] })
+        ]
+      }
+    );
+  }
+);
+var CardStatus = (0, import_react10.forwardRef)(
+  ({ header, className, status, label, ...props }, ref) => {
+    const getLabelBadge = (status2) => {
+      switch (status2) {
+        case "correct":
+          return "Correta";
+        case "incorrect":
+          return "Incorreta";
+        case "unanswered":
+          return "Em branco";
+        case "pending":
+          return "Avalia\xE7\xE3o pendente";
+        default:
+          return "Em branco";
+      }
+    };
+    const getIconBadge = (status2) => {
+      switch (status2) {
+        case "correct":
+          return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_phosphor_react5.CheckCircle, {});
+        case "incorrect":
+          return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_phosphor_react5.XCircle, {});
+        case "pending":
+          return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_phosphor_react5.Clock, {});
+        default:
+          return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_phosphor_react5.XCircle, {});
+      }
+    };
+    const getActionBadge = (status2) => {
+      switch (status2) {
+        case "correct":
+          return "success";
+        case "incorrect":
+          return "error";
+        case "pending":
+          return "info";
+        default:
+          return "info";
+      }
+    };
+    return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+      CardBase,
+      {
+        ref,
+        layout: "horizontal",
+        padding: "medium",
+        minHeight: "medium",
+        className: cn("items-center cursor-pointer", className),
+        ...props,
+        children: /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { className: "flex justify-between w-full h-full flex-row items-center gap-2", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("p", { className: "text-sm font-bold text-text-950 truncate flex-1 min-w-0", children: header }),
+          /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("span", { className: "flex flex-row gap-1 items-center flex-shrink-0", children: [
+            status && /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+              Badge_default,
+              {
+                action: getActionBadge(status),
+                variant: "solid",
+                size: "medium",
+                iconLeft: getIconBadge(status),
+                children: getLabelBadge(status)
+              }
+            ),
+            label && /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("p", { className: "text-sm text-text-800", children: label })
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_phosphor_react5.CaretRight, { className: "min-w-6 min-h-6 text-text-800 cursor-pointer flex-shrink-0 ml-2" })
+        ] })
+      }
+    );
+  }
+);
+var CardSettings = (0, import_react10.forwardRef)(
+  ({ header, className, icon, ...props }, ref) => {
+    return /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(
+      CardBase,
+      {
+        ref,
+        layout: "horizontal",
+        padding: "small",
+        minHeight: "none",
+        className: cn(
+          "border-none items-center gap-2 text-text-700",
+          className
+        ),
+        ...props,
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("span", { className: "[&>svg]:size-6", children: icon }),
+          /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("p", { className: "w-full text-sm truncate", children: header }),
+          /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_phosphor_react5.CaretRight, { size: 24, className: "cursor-pointer" })
+        ]
+      }
+    );
+  }
+);
+var CardSupport = (0, import_react10.forwardRef)(
+  ({ header, className, direction = "col", children, ...props }, ref) => {
+    return /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(
+      CardBase,
+      {
+        ref,
+        layout: "horizontal",
+        padding: "medium",
+        minHeight: "none",
+        className: cn(
+          "border-none items-center gap-2 text-text-700",
+          className
+        ),
+        ...props,
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(
+            "div",
+            {
+              className: cn(
+                "w-full flex",
+                direction == "col" ? "flex-col" : "flex-row items-center"
+              ),
+              children: [
+                /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("span", { className: "w-full min-w-0", children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("p", { className: "text-sm text-text-950 font-bold truncate", children: header }) }),
+                /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("span", { className: "flex flex-row gap-1", children })
+              ]
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_phosphor_react5.CaretRight, { className: "text-text-800 cursor-pointer", size: 24 })
+        ]
+      }
+    );
+  }
+);
+var CardForum = (0, import_react10.forwardRef)(
+  ({
+    title,
+    content,
+    comments,
+    onClickComments,
+    valueComments,
+    onClickProfile,
+    valueProfile,
+    className = "",
+    date,
+    hour,
+    ...props
+  }, ref) => {
+    return /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(
+      CardBase,
+      {
+        ref,
+        layout: "horizontal",
+        padding: "medium",
+        minHeight: "none",
+        variant: "minimal",
+        className: cn("w-auto h-auto gap-3", className),
+        ...props,
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime24.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_runtime24.jsxs)("div", { className: "flex flex-col gap-2 flex-1 min-w-0", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { className: "flex flex-row gap-1 items-center flex-wrap", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("p", { className: "text-xs font-semibold text-primary-700 truncate", children: title }),
+              /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("p", { className: "text-xs text-text-600", children: [
+                "\u2022 ",
+                date,
+                " \u2022 ",
+                hour
+              ] })
+            ] }),
+            /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("p", { className: "text-text-950 text-sm line-clamp-2 truncate", children: content }),
+            /* @__PURE__ */ (0, import_jsx_runtime24.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_runtime24.jsx)(import_phosphor_react5.ChatCircleText, { "aria-hidden": "true", size: 16 }),
+                  /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("p", { className: "text-xs", children: [
+                    comments,
+                    " respostas"
+                  ] })
+                ]
+              }
+            )
+          ] })
+        ]
+      }
+    );
+  }
+);
+var CardAudio = (0, import_react10.forwardRef)(
+  ({
+    src,
+    title,
+    onPlay,
+    onPause,
+    onEnded,
+    onAudioTimeUpdate,
+    loop = false,
+    preload = "metadata",
+    tracks,
+    className,
+    ...props
+  }, ref) => {
+    const [isPlaying, setIsPlaying] = (0, import_react10.useState)(false);
+    const [currentTime, setCurrentTime] = (0, import_react10.useState)(0);
+    const [duration, setDuration] = (0, import_react10.useState)(0);
+    const [volume, setVolume] = (0, import_react10.useState)(1);
+    const [showVolumeControl, setShowVolumeControl] = (0, import_react10.useState)(false);
+    const [showSpeedMenu, setShowSpeedMenu] = (0, import_react10.useState)(false);
+    const [playbackRate, setPlaybackRate] = (0, import_react10.useState)(1);
+    const audioRef = (0, import_react10.useRef)(null);
+    const volumeControlRef = (0, import_react10.useRef)(null);
+    const speedMenuRef = (0, import_react10.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 toggleVolumeControl = () => {
+      setShowVolumeControl(!showVolumeControl);
+      setShowSpeedMenu(false);
+    };
+    const toggleSpeedMenu = () => {
+      setShowSpeedMenu(!showSpeedMenu);
+      setShowVolumeControl(false);
+    };
+    const handleSpeedChange = (speed) => {
+      setPlaybackRate(speed);
+      if (audioRef.current) {
+        audioRef.current.playbackRate = speed;
+      }
+      setShowSpeedMenu(false);
+    };
+    const getVolumeIcon = () => {
+      if (volume === 0) {
+        return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_phosphor_react5.SpeakerSimpleX, { size: 24 });
+      }
+      if (volume < 0.5) {
+        return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_phosphor_react5.SpeakerLow, { size: 24 });
+      }
+      return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_phosphor_react5.SpeakerHigh, { size: 24 });
+    };
+    (0, import_react10.useEffect)(() => {
+      const handleClickOutside = (event) => {
+        if (volumeControlRef.current && !volumeControlRef.current.contains(event.target)) {
+          setShowVolumeControl(false);
+        }
+        if (speedMenuRef.current && !speedMenuRef.current.contains(event.target)) {
+          setShowSpeedMenu(false);
+        }
+      };
+      document.addEventListener("mousedown", handleClickOutside);
+      return () => {
+        document.removeEventListener("mousedown", handleClickOutside);
+      };
+    }, []);
+    return /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(
+      CardBase,
+      {
+        ref,
+        layout: "horizontal",
+        padding: "medium",
+        minHeight: "none",
+        className: cn(
+          "flex flex-row w-auto h-14 items-center gap-2",
+          className
+        ),
+        ...props,
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime24.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_runtime24.jsx)(
+                "track",
+                {
+                  kind: track.kind,
+                  src: track.src,
+                  srcLang: track.srcLang,
+                  label: track.label,
+                  default: track.default
+                },
+                track.src
+              )) : /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+                "track",
+                {
+                  kind: "captions",
+                  src: "data:text/vtt;base64,",
+                  srcLang: "pt",
+                  label: "Sem legendas dispon\xEDveis"
+                }
+              )
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime24.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_runtime24.jsx)("div", { className: "w-6 h-6 flex items-center justify-center", children: /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { className: "flex gap-0.5", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { className: "w-1 h-4 bg-current rounded-sm" }),
+                /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { className: "w-1 h-4 bg-current rounded-sm" })
+              ] }) }) : /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_phosphor_react5.Play, { size: 24 })
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("p", { className: "text-text-800 text-md font-medium min-w-[2.5rem]", children: formatTime(currentTime) }),
+          /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { className: "flex-1 relative", "data-testid": "progress-bar", children: /* @__PURE__ */ (0, import_jsx_runtime24.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_runtime24.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_runtime24.jsx)("p", { className: "text-text-800 text-md font-medium min-w-[2.5rem]", children: formatTime(duration) }),
+          /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { className: "relative h-6", ref: volumeControlRef, children: [
+            /* @__PURE__ */ (0, import_jsx_runtime24.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_runtime24.jsx)("div", { className: "w-6 h-6 flex items-center justify-center", children: getVolumeIcon() })
+              }
+            ),
+            showVolumeControl && /* @__PURE__ */ (0, import_jsx_runtime24.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_runtime24.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_runtime24.jsxs)("div", { className: "relative h-6", ref: speedMenuRef, children: [
+            /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+              "button",
+              {
+                type: "button",
+                onClick: toggleSpeedMenu,
+                className: "cursor-pointer text-text-950 hover:text-primary-600",
+                "aria-label": "Op\xE7\xF5es de velocidade",
+                children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_phosphor_react5.DotsThreeVertical, { size: 24 })
+              }
+            ),
+            showSpeedMenu && /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { className: "absolute bottom-full right-0 mb-2 p-2 bg-background border border-border-100 rounded-lg shadow-lg min-w-24 z-10", children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { className: "flex flex-col gap-1", children: [
+              { speed: 1, label: "1x" },
+              { speed: 1.5, label: "1.5x" },
+              { speed: 2, label: "2x" }
+            ].map(({ speed, label }) => /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+              "button",
+              {
+                type: "button",
+                onClick: () => handleSpeedChange(speed),
+                className: cn(
+                  "px-3 py-1 text-sm text-left rounded hover:bg-border-50 transition-colors",
+                  playbackRate === speed ? "bg-primary-950 text-secondary-100 font-medium" : "text-text-950"
+                ),
+                children: label
+              },
+              speed
+            )) }) })
+          ] })
+        ]
+      }
+    );
+  }
+);
+var SIMULADO_BACKGROUND_CLASSES = {
+  enem: "bg-exam-1",
+  prova: "bg-exam-2",
+  simuladao: "bg-exam-3",
+  vestibular: "bg-exam-4"
+};
+var CardSimulado = (0, import_react10.forwardRef)(
+  ({ title, duration, info, backgroundColor, className, ...props }, ref) => {
+    const backgroundClass = SIMULADO_BACKGROUND_CLASSES[backgroundColor];
+    return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+      CardBase,
+      {
+        ref,
+        layout: "horizontal",
+        padding: "medium",
+        minHeight: "none",
+        cursor: "pointer",
+        className: cn(
+          `${backgroundClass} hover:shadow-soft-shadow-2 transition-shadow duration-200`,
+          className
+        ),
+        ...props,
+        children: /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { className: "flex justify-between items-center w-full gap-4", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { className: "flex flex-col gap-1 flex-1 min-w-0", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(Text_default, { size: "lg", weight: "bold", className: "text-text-950 truncate", children: title }),
+            /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { className: "flex items-center gap-4 text-text-700", children: [
+              duration && /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { className: "flex items-center gap-1", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_phosphor_react5.Clock, { size: 16, className: "flex-shrink-0" }),
+                /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(Text_default, { size: "sm", children: duration })
+              ] }),
+              /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(Text_default, { size: "sm", className: "truncate", children: info })
+            ] })
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+            import_phosphor_react5.CaretRight,
+            {
+              size: 24,
+              className: "text-text-800 flex-shrink-0",
+              "data-testid": "caret-icon"
+            }
+          )
+        ] })
+      }
+    );
+  }
+);
+var CardTest = (0, import_react10.forwardRef)(
+  ({
+    title,
+    duration,
+    questionsCount,
+    additionalInfo,
+    selected = false,
+    onSelect,
+    className = "",
+    ...props
+  }, ref) => {
+    const handleClick = () => {
+      if (onSelect) {
+        onSelect(!selected);
+      }
+    };
+    const handleKeyDown = (event) => {
+      if ((event.key === "Enter" || event.key === " ") && onSelect) {
+        event.preventDefault();
+        onSelect(!selected);
+      }
+    };
+    const isSelectable = !!onSelect;
+    const getQuestionsText = (count) => {
+      const singular = count === 1 ? "quest\xE3o" : "quest\xF5es";
+      return `${count} ${singular}`;
+    };
+    const displayInfo = questionsCount ? getQuestionsText(questionsCount) : additionalInfo || "";
+    const baseClasses = "flex flex-row items-center p-4 gap-2 w-full max-w-full bg-background shadow-soft-shadow-1 rounded-xl isolate border-0 text-left";
+    const interactiveClasses = isSelectable ? "cursor-pointer focus:outline-none focus:ring-2 focus:ring-primary-950 focus:ring-offset-2" : "";
+    const selectedClasses = selected ? "ring-2 ring-primary-950 ring-offset-2" : "";
+    if (isSelectable) {
+      return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+        "button",
+        {
+          ref,
+          type: "button",
+          className: cn(
+            `${baseClasses} ${interactiveClasses} ${selectedClasses} ${className}`.trim()
+          ),
+          onClick: handleClick,
+          onKeyDown: handleKeyDown,
+          "aria-pressed": selected,
+          ...props,
+          children: /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { className: "flex flex-col justify-between gap-[27px] flex-grow min-h-[67px] w-full min-w-0", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+              Text_default,
+              {
+                size: "md",
+                weight: "bold",
+                className: "text-text-950 tracking-[0.2px] leading-[19px] truncate",
+                children: title
+              }
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { className: "flex flex-row justify-start items-end gap-4 w-full", children: [
+              duration && /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { className: "flex flex-row items-center gap-1 flex-shrink-0", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_phosphor_react5.Clock, { size: 16, className: "text-text-700" }),
+                /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+                  Text_default,
+                  {
+                    size: "sm",
+                    className: "text-text-700 leading-[21px] whitespace-nowrap",
+                    children: duration
+                  }
+                )
+              ] }),
+              /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+                Text_default,
+                {
+                  size: "sm",
+                  className: "text-text-700 leading-[21px] flex-grow truncate",
+                  children: displayInfo
+                }
+              )
+            ] })
+          ] })
+        }
+      );
+    }
+    return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+      "div",
+      {
+        ref,
+        className: cn(`${baseClasses} ${className}`.trim()),
+        ...props,
+        children: /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { className: "flex flex-col justify-between gap-[27px] flex-grow min-h-[67px] w-full min-w-0", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+            Text_default,
+            {
+              size: "md",
+              weight: "bold",
+              className: "text-text-950 tracking-[0.2px] leading-[19px] truncate",
+              children: title
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { className: "flex flex-row justify-start items-end gap-4 w-full", children: [
+            duration && /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { className: "flex flex-row items-center gap-1 flex-shrink-0", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_phosphor_react5.Clock, { size: 16, className: "text-text-700" }),
+              /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+                Text_default,
+                {
+                  size: "sm",
+                  className: "text-text-700 leading-[21px] whitespace-nowrap",
+                  children: duration
+                }
+              )
+            ] }),
+            /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+              Text_default,
+              {
+                size: "sm",
+                className: "text-text-700 leading-[21px] flex-grow truncate min-w-0",
+                children: displayInfo
+              }
+            )
+          ] })
+        ] })
+      }
+    );
+  }
+);
+var SIMULATION_TYPE_STYLES = {
+  enem: {
+    background: "bg-exam-1",
+    badge: "exam1",
+    text: "Enem"
+  },
+  prova: {
+    background: "bg-exam-2",
+    badge: "exam2",
+    text: "Prova"
+  },
+  simulado: {
+    background: "bg-exam-3",
+    badge: "exam3",
+    text: "Simulad\xE3o"
+  },
+  vestibular: {
+    background: "bg-exam-4",
+    badge: "exam4",
+    text: "Vestibular"
+  }
+};
+var CardSimulationHistory = (0, import_react10.forwardRef)(({ data, onSimulationClick, className, ...props }, ref) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+    "div",
+    {
+      ref,
+      className: cn("w-full max-w-[992px] h-auto", className),
+      ...props,
+      children: /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { className: "flex flex-col gap-0", children: [
+        data.map((section, sectionIndex) => /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { className: "flex flex-col", children: /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(
+          "div",
+          {
+            className: cn(
+              "flex flex-row justify-center items-start px-4 py-6 gap-2 w-full bg-background",
+              sectionIndex === 0 ? "rounded-t-3xl" : ""
+            ),
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+                Text_default,
+                {
+                  size: "xs",
+                  weight: "bold",
+                  className: "text-text-800 w-11 flex-shrink-0",
+                  children: section.date
+                }
+              ),
+              /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { className: "flex flex-col gap-2 flex-1", children: section.simulations.map((simulation) => {
+                const typeStyles = SIMULATION_TYPE_STYLES[simulation.type];
+                return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+                  CardBase,
+                  {
+                    layout: "horizontal",
+                    padding: "medium",
+                    minHeight: "none",
+                    cursor: "pointer",
+                    className: cn(
+                      `${typeStyles.background} rounded-xl hover:shadow-soft-shadow-2 
+                          transition-shadow duration-200 h-auto min-h-[61px]`
+                    ),
+                    onClick: () => onSimulationClick?.(simulation),
+                    children: /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { className: "flex justify-between items-center w-full gap-2", children: [
+                      /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { className: "flex flex-wrap flex-col justify-between sm:flex-row gap-2 flex-1 min-w-0", children: [
+                        /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+                          Text_default,
+                          {
+                            size: "lg",
+                            weight: "bold",
+                            className: "text-text-950 truncate",
+                            children: simulation.title
+                          }
+                        ),
+                        /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { className: "flex items-center gap-2", children: [
+                          /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+                            Badge_default,
+                            {
+                              variant: "examsOutlined",
+                              action: typeStyles.badge,
+                              size: "medium",
+                              children: typeStyles.text
+                            }
+                          ),
+                          /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(Text_default, { size: "sm", className: "text-text-800 truncate", children: simulation.info })
+                        ] })
+                      ] }),
+                      /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+                        import_phosphor_react5.CaretRight,
+                        {
+                          size: 24,
+                          className: "text-text-800 flex-shrink-0",
+                          "data-testid": "caret-icon"
+                        }
+                      )
+                    ] })
+                  },
+                  simulation.id
+                );
+              }) })
+            ]
+          }
+        ) }, section.date)),
+        data.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { className: "w-full h-6 bg-background rounded-b-3xl" })
+      ] })
+    }
+  );
+});
+
+// src/components/Accordation/Accordation.tsx
+var import_phosphor_react6 = require("phosphor-react");
+var import_jsx_runtime25 = require("react/jsx-runtime");
+var CardAccordation = (0, import_react11.forwardRef)(
+  ({
+    trigger,
+    children,
+    className,
+    defaultExpanded = false,
+    expanded: controlledExpanded,
+    onToggleExpanded,
+    value,
+    disabled = false,
+    triggerClassName,
+    contentClassName,
+    ...props
+  }, ref) => {
+    const [internalExpanded, setInternalExpanded] = (0, import_react11.useState)(defaultExpanded);
+    const generatedId = (0, import_react11.useId)();
+    const contentId = value ? `accordion-content-${value}` : generatedId;
+    const headerId = value ? `accordion-header-${value}` : `${generatedId}-header`;
+    const isControlled = controlledExpanded !== void 0;
+    const isExpanded = isControlled ? controlledExpanded : internalExpanded;
+    (0, import_react11.useEffect)(() => {
+      if (isControlled) {
+        setInternalExpanded(controlledExpanded);
+      }
+    }, [isControlled, controlledExpanded]);
+    const handleToggle = () => {
+      if (disabled) return;
+      const newExpanded = !isExpanded;
+      if (!isControlled) {
+        setInternalExpanded(newExpanded);
+      }
+      onToggleExpanded?.(newExpanded);
+    };
+    const handleKeyDown = (event) => {
+      if (disabled) return;
+      if (event.key === "Enter" || event.key === " ") {
+        event.preventDefault();
+        handleToggle();
+      }
+    };
+    return /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(
+      CardBase,
+      {
+        ref,
+        layout: "vertical",
+        padding: "none",
+        minHeight: "none",
+        className: cn("overflow-hidden", className),
+        ...props,
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(
+            "button",
+            {
+              id: headerId,
+              type: "button",
+              onClick: handleToggle,
+              onKeyDown: handleKeyDown,
+              disabled,
+              className: cn(
+                "w-full cursor-pointer not-aria-expanded:rounded-xl aria-expanded:rounded-t-xl flex items-center justify-between gap-3 text-left transition-colors duration-200 focus:outline-none focus:border-2 focus:border-primary-950 focus:ring-inset px-2",
+                disabled && "cursor-not-allowed text-text-400",
+                triggerClassName
+              ),
+              "aria-expanded": isExpanded,
+              "aria-controls": contentId,
+              "aria-disabled": disabled,
+              "data-value": value,
+              children: [
+                trigger,
+                /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+                  import_phosphor_react6.CaretRight,
+                  {
+                    size: 20,
+                    className: cn(
+                      "transition-transform duration-200 flex-shrink-0",
+                      disabled ? "text-gray-400" : "text-text-700",
+                      isExpanded ? "rotate-90" : "rotate-0"
+                    ),
+                    "data-testid": "accordion-caret"
+                  }
+                )
+              ]
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+            "section",
+            {
+              id: contentId,
+              "aria-labelledby": headerId,
+              "aria-hidden": !isExpanded,
+              className: cn(
+                "transition-all duration-300 ease-in-out overflow-hidden",
+                isExpanded ? "max-h-screen opacity-100" : "max-h-0 opacity-0"
+              ),
+              "data-testid": "accordion-content",
+              "data-value": value,
+              children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("div", { className: cn("p-4 pt-0", contentClassName), children })
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+CardAccordation.displayName = "CardAccordation";
+
+// src/components/Alternative/Alternative.tsx
+var import_phosphor_react7 = require("phosphor-react");
+
+// src/components/Radio/Radio.tsx
+var import_react12 = require("react");
+var import_zustand = require("zustand");
+var import_jsx_runtime26 = require("react/jsx-runtime");
+var SIZE_CLASSES6 = {
+  small: {
+    radio: "w-5 h-5",
+    textSize: "sm",
+    spacing: "gap-1.5",
+    borderWidth: "border-2",
+    dotSize: "w-2.5 h-2.5",
+    labelHeight: "h-5"
+  },
+  medium: {
+    radio: "w-6 h-6",
+    textSize: "md",
+    spacing: "gap-2",
+    borderWidth: "border-2",
+    dotSize: "w-3 h-3",
+    labelHeight: "h-6"
+  },
+  large: {
+    radio: "w-7 h-7",
+    textSize: "lg",
+    spacing: "gap-2",
+    borderWidth: "border-2",
+    dotSize: "w-3.5 h-3.5",
+    labelHeight: "h-7"
+  },
+  extraLarge: {
+    radio: "w-8 h-8",
+    textSize: "xl",
+    spacing: "gap-3",
+    borderWidth: "border-2",
+    dotSize: "w-4 h-4",
+    labelHeight: "h-8"
+  }
+};
+var BASE_RADIO_CLASSES = "rounded-full border cursor-pointer transition-all duration-200 flex items-center justify-center focus:outline-none";
+var STATE_CLASSES = {
+  default: {
+    unchecked: "border-border-400 bg-background hover:border-border-500",
+    checked: "border-primary-950 bg-background hover:border-primary-800"
+  },
+  hovered: {
+    unchecked: "border-border-500 bg-background",
+    checked: "border-info-700 bg-background"
+  },
+  focused: {
+    unchecked: "border-border-400 bg-background",
+    checked: "border-primary-950 bg-background"
+  },
+  invalid: {
+    unchecked: "border-border-400 bg-background",
+    checked: "border-primary-950 bg-background"
+  },
+  disabled: {
+    unchecked: "border-border-400 bg-background cursor-not-allowed",
+    checked: "border-primary-950 bg-background cursor-not-allowed"
+  }
+};
+var DOT_CLASSES = {
+  default: "bg-primary-950",
+  hovered: "bg-info-700",
+  focused: "bg-primary-950",
+  invalid: "bg-primary-950",
+  disabled: "bg-primary-950"
+};
+var Radio = (0, import_react12.forwardRef)(
+  ({
+    label,
+    size = "medium",
+    state = "default",
+    errorMessage,
+    helperText,
+    className = "",
+    labelClassName = "",
+    checked: checkedProp,
+    defaultChecked = false,
+    disabled,
+    id,
+    name,
+    value,
+    onChange,
+    ...props
+  }, ref) => {
+    const generatedId = (0, import_react12.useId)();
+    const inputId = id ?? `radio-${generatedId}`;
+    const inputRef = (0, import_react12.useRef)(null);
+    const [internalChecked, setInternalChecked] = (0, import_react12.useState)(defaultChecked);
+    const isControlled = checkedProp !== void 0;
+    const checked = isControlled ? checkedProp : internalChecked;
+    const handleChange = (event) => {
+      const newChecked = event.target.checked;
+      if (!isControlled) {
+        setInternalChecked(newChecked);
+      }
+      if (event.target) {
+        event.target.blur();
+      }
+      onChange?.(event);
+    };
+    const currentState = disabled ? "disabled" : state;
+    const sizeClasses = SIZE_CLASSES6[size];
+    const actualRadioSize = sizeClasses.radio;
+    const actualDotSize = sizeClasses.dotSize;
+    const radioVariant = checked ? "checked" : "unchecked";
+    const stylingClasses = STATE_CLASSES[currentState][radioVariant];
+    const getBorderWidth = () => {
+      if (currentState === "focused") {
+        return "border-2";
+      }
+      return sizeClasses.borderWidth;
+    };
+    const borderWidthClass = getBorderWidth();
+    const radioClasses = cn(
+      BASE_RADIO_CLASSES,
+      actualRadioSize,
+      borderWidthClass,
+      stylingClasses,
+      className
+    );
+    const dotClasses = cn(
+      actualDotSize,
+      "rounded-full",
+      DOT_CLASSES[currentState],
+      "transition-all duration-200"
+    );
+    const isWrapperNeeded = currentState === "focused" || currentState === "invalid";
+    const wrapperBorderColor = currentState === "focused" ? "border-indicator-info" : "border-indicator-error";
+    const getTextColor = () => {
+      if (currentState === "disabled") {
+        return checked ? "text-text-900" : "text-text-600";
+      }
+      if (currentState === "focused") {
+        return "text-text-900";
+      }
+      return checked ? "text-text-900" : "text-text-600";
+    };
+    const getCursorClass = () => {
+      return currentState === "disabled" ? "cursor-not-allowed" : "cursor-pointer";
+    };
+    return /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("div", { className: "flex flex-col", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(
+        "div",
+        {
+          className: cn(
+            "flex flex-row items-center",
+            isWrapperNeeded ? cn("p-1 border-2", wrapperBorderColor, "rounded-lg gap-1.5") : sizeClasses.spacing,
+            disabled ? "opacity-40" : ""
+          ),
+          children: [
+            /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
+              "input",
+              {
+                ref: (node) => {
+                  inputRef.current = node;
+                  if (typeof ref === "function") ref(node);
+                  else if (ref) ref.current = node;
+                },
+                type: "radio",
+                id: inputId,
+                checked,
+                disabled,
+                name,
+                value,
+                onChange: handleChange,
+                className: "sr-only",
+                style: {
+                  position: "absolute",
+                  left: "-9999px",
+                  visibility: "hidden"
+                },
+                ...props
+              }
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime26.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_runtime26.jsx)("div", { className: dotClasses })
+              }
+            ),
+            label && /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
+              "div",
+              {
+                className: cn(
+                  "flex flex-row items-center",
+                  sizeClasses.labelHeight,
+                  "flex-1 min-w-0"
+                ),
+                children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
+                  Text_default,
+                  {
+                    as: "label",
+                    htmlFor: inputId,
+                    size: sizeClasses.textSize,
+                    weight: "normal",
+                    className: cn(
+                      getCursorClass(),
+                      "select-none leading-normal flex items-center font-roboto truncate",
+                      labelClassName
+                    ),
+                    color: getTextColor(),
+                    children: label
+                  }
+                )
+              }
+            )
+          ]
+        }
+      ),
+      errorMessage && /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
+        Text_default,
+        {
+          size: "sm",
+          weight: "normal",
+          className: "mt-1.5 truncate",
+          color: "text-error-600",
+          children: errorMessage
+        }
+      ),
+      helperText && !errorMessage && /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
+        Text_default,
+        {
+          size: "sm",
+          weight: "normal",
+          className: "mt-1.5 truncate",
+          color: "text-text-500",
+          children: helperText
+        }
+      )
+    ] });
+  }
+);
+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_react12.Children.map(children, (child) => {
+  if (!(0, import_react12.isValidElement)(child)) return child;
+  const typedChild = child;
+  const shouldInject = typedChild.type === RadioGroupItem;
+  return (0, import_react12.cloneElement)(typedChild, {
+    ...shouldInject ? { store } : {},
+    ...typedChild.props.children ? { children: injectStore(typedChild.props.children, store) } : {}
+  });
+});
+var RadioGroup = (0, import_react12.forwardRef)(
+  ({
+    value: propValue,
+    defaultValue = "",
+    onValueChange,
+    name: propName,
+    disabled = false,
+    className = "",
+    children,
+    ...props
+  }, ref) => {
+    const generatedId = (0, import_react12.useId)();
+    const name = propName || `radio-group-${generatedId}`;
+    const storeRef = (0, import_react12.useRef)(null);
+    storeRef.current ??= createRadioGroupStore(
+      name,
+      defaultValue,
+      disabled,
+      onValueChange
+    );
+    const store = storeRef.current;
+    const { setValue } = (0, import_zustand.useStore)(store, (s) => s);
+    (0, import_react12.useEffect)(() => {
+      const currentValue = store.getState().value;
+      if (currentValue && onValueChange) {
+        onValueChange(currentValue);
+      }
+    }, []);
+    (0, import_react12.useEffect)(() => {
+      if (propValue !== void 0) {
+        setValue(propValue);
+      }
+    }, [propValue, setValue]);
+    (0, import_react12.useEffect)(() => {
+      store.setState({ disabled });
+    }, [disabled, store]);
+    return /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
+      "div",
+      {
+        ref,
+        className,
+        role: "radiogroup",
+        "aria-label": name,
+        ...props,
+        children: injectStore(children, store)
+      }
+    );
+  }
+);
+RadioGroup.displayName = "RadioGroup";
+var RadioGroupItem = (0, import_react12.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_react12.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_runtime26.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";
+
+// src/components/Alternative/Alternative.tsx
+var import_react13 = require("react");
+var import_jsx_runtime27 = require("react/jsx-runtime");
+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 [actualValue, setActualValue] = (0, import_react13.useState)(value);
+  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_runtime27.jsx)(Badge_default, { variant: "solid", action: "success", iconLeft: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(import_phosphor_react7.CheckCircle, {}), children: "Resposta correta" });
+      case "incorrect":
+        return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(Badge_default, { variant: "solid", action: "error", iconLeft: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(import_phosphor_react7.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_runtime27.jsx)("div", { className: radioClasses, children: isUserSelected && /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("div", { className: dotClasses }) });
+    };
+    if (layout === "detailed") {
+      return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+        "div",
+        {
+          className: cn(
+            "border-2 rounded-lg p-4 w-full",
+            statusStyles,
+            alternative.disabled ? "opacity-50" : ""
+          ),
+          children: /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)("div", { className: "flex items-start justify-between gap-3", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)("div", { className: "flex items-start gap-3 flex-1", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("div", { className: "mt-1", children: renderRadio() }),
+              /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)("div", { className: "flex-1", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+                  "p",
+                  {
+                    className: cn(
+                      "block font-medium",
+                      selectedValue === alternative.value || statusBadge ? "text-text-950" : "text-text-600"
+                    ),
+                    children: alternative.label
+                  }
+                ),
+                alternative.description && /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("p", { className: "text-sm text-text-600 mt-1", children: alternative.description })
+              ] })
+            ] }),
+            statusBadge && /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("div", { className: "flex-shrink-0", children: statusBadge })
+          ] })
+        },
+        alternativeId
+      );
+    }
+    return /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(
+      "div",
+      {
+        className: cn(
+          "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_runtime27.jsxs)("div", { className: "flex items-center gap-2 flex-1", children: [
+            renderRadio(),
+            /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+              "span",
+              {
+                className: cn(
+                  "flex-1",
+                  selectedValue === alternative.value || statusBadge ? "text-text-950" : "text-text-600"
+                ),
+                children: alternative.label
+              }
+            )
+          ] }),
+          statusBadge && /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("div", { className: "flex-shrink-0", children: statusBadge })
+        ]
+      },
+      alternativeId
+    );
+  };
+  if (isReadonly) {
+    return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+      "div",
+      {
+        className: cn("flex flex-col", getLayoutClasses(), "w-full", className),
+        children: alternatives.map(
+          (alternative) => renderReadonlyAlternative(alternative)
+        )
+      }
+    );
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+    RadioGroup,
+    {
+      name: groupName,
+      defaultValue,
+      value,
+      onValueChange: (value2) => {
+        setActualValue(value2);
+        onValueChange?.(value2);
+      },
+      disabled,
+      className: cn("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_runtime27.jsx)(
+            "div",
+            {
+              className: cn(
+                "border-2 rounded-lg p-4 transition-all",
+                statusStyles,
+                alternative.disabled ? "opacity-50 cursor-not-allowed" : "cursor-pointer"
+              ),
+              children: /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)("div", { className: "flex items-start justify-between gap-3", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)("div", { className: "flex items-start gap-3 flex-1", children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+                    RadioGroupItem,
+                    {
+                      value: alternative.value,
+                      id: alternativeId,
+                      disabled: alternative.disabled,
+                      className: "mt-1"
+                    }
+                  ),
+                  /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)("div", { className: "flex-1", children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+                      "label",
+                      {
+                        htmlFor: alternativeId,
+                        className: cn(
+                          "block font-medium",
+                          actualValue === alternative.value ? "text-text-950" : "text-text-600",
+                          alternative.disabled ? "cursor-not-allowed" : "cursor-pointer"
+                        ),
+                        children: alternative.label
+                      }
+                    ),
+                    alternative.description && /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("p", { className: "text-sm text-text-600 mt-1", children: alternative.description })
+                  ] })
+                ] }),
+                statusBadge && /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("div", { className: "flex-shrink-0", children: statusBadge })
+              ] })
+            },
+            alternativeId
+          );
+        }
+        return /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(
+          "div",
+          {
+            className: cn(
+              "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_runtime27.jsxs)("div", { className: "flex items-center gap-2 flex-1", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+                  RadioGroupItem,
+                  {
+                    value: alternative.value,
+                    id: alternativeId,
+                    disabled: alternative.disabled
+                  }
+                ),
+                /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+                  "label",
+                  {
+                    htmlFor: alternativeId,
+                    className: cn(
+                      "flex-1",
+                      actualValue === alternative.value ? "text-text-950" : "text-text-600",
+                      alternative.disabled ? "cursor-not-allowed" : "cursor-pointer"
+                    ),
+                    children: alternative.label
+                  }
+                )
+              ] }),
+              statusBadge && /* @__PURE__ */ (0, import_jsx_runtime27.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_runtime27.jsxs)(
+      "div",
+      {
+        ref,
+        className: cn(
+          "bg-background p-4 flex flex-col gap-4 rounded-xl",
+          className
+        ),
+        ...props,
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)("span", { className: "flex flex-col", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("p", { className: "text-text-950 font-bold text-lg", children: title }),
+            /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("p", { className: "text-text-700 text-sm ", children: subTitle })
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("p", { className: "text-text-950 text-md", children: content })
+        ]
+      }
+    );
+  }
+);
+
+// src/components/RecommendedLessonDetails/types.ts
+var DEFAULT_LABELS = {
+  viewLesson: "Ver aula",
+  viewPerformance: "Ver desempenho",
+  resultsTitle: "Resultados da aula recomendada",
+  completedLabel: "CONCLU\xCDDO",
+  bestResultLabel: "MELHOR RESULTADO",
+  hardestTopicLabel: "MAIOR DIFICULDADE",
+  studentColumn: "Aluno",
+  statusColumn: "Status",
+  completionColumn: "Conclus\xE3o",
+  durationColumn: "Dura\xE7\xE3o"
+};
+var DEFAULT_PERFORMANCE_LABELS = {
+  title: "Desempenho",
+  correctAnswersLabel: "N\xB0 DE QUEST\xD5ES CORRETAS",
+  incorrectAnswersLabel: "N\xB0 DE QUEST\xD5ES INCORRETAS",
+  bestResultLabel: "MELHOR RESULTADO",
+  hardestTopicLabel: "MAIOR DIFICULDADE",
+  lessonsTitle: "Aulas"
+};
+
+// src/components/RecommendedLessonDetails/components/StudentPerformanceModal.tsx
+var import_jsx_runtime28 = require("react/jsx-runtime");
+var PerformanceCard = ({
+  icon,
+  label,
+  value,
+  secondaryLabel,
+  secondaryValue,
+  variant
+}) => {
+  const headerBgColor = {
+    success: "bg-success-200",
+    error: "bg-error-100"
+  }[variant];
+  const valueColor = {
+    success: "text-success-700",
+    error: "text-error-700"
+  }[variant];
+  const iconBgColor = {
+    success: "bg-warning-300",
+    error: "bg-error-300"
+  }[variant];
+  const secondaryLabelColor = {
+    success: "text-success-600",
+    error: "text-error-600"
+  }[variant];
+  return /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("div", { className: "flex flex-col rounded-xl border border-border-50 bg-background overflow-hidden", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(
+      "div",
+      {
+        className: `flex flex-col items-center justify-center p-4 gap-1 ${headerBgColor}`,
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+            Text_default,
+            {
+              as: "span",
+              className: `size-8 rounded-full flex items-center justify-center ${iconBgColor}`,
+              children: icon
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+            Text_default,
+            {
+              size: "2xs",
+              weight: "medium",
+              className: "text-text-800 uppercase text-center leading-none",
+              children: label
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(Text_default, { size: "xl", weight: "bold", className: `${valueColor} text-center`, children: value })
+        ]
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("div", { className: "flex flex-col items-center gap-2 px-4 py-3", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+        Text_default,
+        {
+          size: "2xs",
+          weight: "medium",
+          className: `${secondaryLabelColor} uppercase text-center`,
+          children: secondaryLabel
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(Badge_default, { size: "large", action: "info", children: secondaryValue || "-" })
+    ] })
+  ] });
+};
+var getAlternativeStatus = (isCorrect, isSelected) => {
+  if (isCorrect) {
+    return "correct";
+  }
+  if (isSelected) {
+    return "incorrect";
+  }
+  return void 0;
+};
+var mapAlternatives = (question) => {
+  return question.alternatives.map((alt) => ({
+    value: alt.id,
+    label: alt.text,
+    status: getAlternativeStatus(alt.isCorrect, alt.isSelected)
+  }));
+};
+var getSelectedValue = (question) => {
+  const selected = question.alternatives.find((alt) => alt.isSelected);
+  return selected?.id;
+};
+var QuestionAccordionItem = ({
+  question,
+  index
+}) => /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+  CardAccordation,
+  {
+    value: question.id,
+    className: "bg-background rounded-xl border border-border-50",
+    triggerClassName: "py-5 px-5",
+    contentClassName: "px-5 pb-5",
+    trigger: /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("div", { className: "flex items-center justify-between flex-1", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(Text_default, { size: "sm", weight: "semibold", className: "text-text-950", children: [
+        "Quest\xE3o ",
+        index + 1
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+        Badge_default,
+        {
+          size: "small",
+          action: question.isCorrect ? "success" : "error",
+          variant: "solid",
+          iconLeft: question.isCorrect ? /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_react15.CheckCircleIcon, {}) : /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_react15.XCircleIcon, {}),
+          children: question.isCorrect ? "Correta" : "Incorreta"
+        }
+      )
+    ] }),
+    children: /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("div", { className: "flex flex-col gap-3", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(Text_default, { size: "sm", className: "text-text-700", children: question.statement }),
+      /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+        CardAccordation,
+        {
+          value: `${question.id}-alternatives`,
+          className: "bg-background rounded-lg border border-border-50",
+          triggerClassName: "py-5 px-5",
+          contentClassName: "px-5 py-5",
+          trigger: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(Text_default, { size: "sm", weight: "medium", className: "text-text-800", children: "Alternativas" }),
+          children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+            AlternativesList,
+            {
+              mode: "readonly",
+              alternatives: mapAlternatives(question),
+              selectedValue: getSelectedValue(question),
+              layout: "default"
+            }
+          )
+        }
+      )
+    ] })
+  }
+);
+var LessonAccordionItem = ({ lesson }) => /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+  CardAccordation,
+  {
+    value: lesson.id,
+    className: "bg-background rounded-xl border border-border-50",
+    triggerClassName: "py-5 px-5",
+    contentClassName: "px-5 pb-5",
+    trigger: /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("div", { className: "flex flex-col gap-1 flex-1", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(Text_default, { size: "sm", weight: "semibold", className: "text-text-950", children: lesson.title }),
+      /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+        ProgressBar_default,
+        {
+          value: lesson.progress,
+          variant: "blue",
+          size: "medium",
+          showPercentage: true,
+          layout: "default"
+        }
+      )
+    ] }),
+    children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { className: "flex flex-col gap-2", children: lesson.questions.map((question, index) => /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+      QuestionAccordionItem,
+      {
+        question,
+        index
+      },
+      question.id
+    )) })
+  }
+);
+var LoadingSkeleton2 = () => /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("div", { className: "flex flex-col gap-4 animate-pulse", children: [
+  /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { className: "h-6 bg-background-200 rounded w-48" }),
+  /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("div", { className: "grid grid-cols-2 gap-3", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { className: "h-44 bg-background-200 rounded-xl" }),
+    /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { className: "h-44 bg-background-200 rounded-xl" })
+  ] })
+] });
+var PerformanceContent = ({
+  data,
+  labels
+}) => /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("div", { className: "flex flex-col gap-5", children: [
+  /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("div", { className: "flex items-center gap-2", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+      Text_default,
+      {
+        as: "span",
+        className: "size-8 rounded-full bg-background-100 flex items-center justify-center",
+        children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_react15.UserIcon, { size: 16, className: "text-text-500" })
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(Text_default, { size: "md", weight: "medium", className: "text-text-950", children: data.studentName })
+  ] }),
+  /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("div", { className: "grid grid-cols-2 gap-3", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+      PerformanceCard,
+      {
+        icon: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+          import_react15.LightbulbFilamentIcon,
+          {
+            size: 18,
+            weight: "fill",
+            className: "text-white"
+          }
+        ),
+        label: labels.correctAnswersLabel,
+        value: data.correctAnswers,
+        secondaryLabel: labels.bestResultLabel,
+        secondaryValue: data.bestResult,
+        variant: "success"
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+      PerformanceCard,
+      {
+        icon: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+          import_react15.WarningCircleIcon,
+          {
+            size: 18,
+            weight: "fill",
+            className: "text-error-700"
+          }
+        ),
+        label: labels.incorrectAnswersLabel,
+        value: data.incorrectAnswers,
+        secondaryLabel: labels.hardestTopicLabel,
+        secondaryValue: data.hardestTopic,
+        variant: "error"
+      }
+    )
+  ] }),
+  data.lessons.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("div", { className: "flex flex-col gap-3", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(Text_default, { size: "md", weight: "semibold", className: "text-text-950", children: labels.lessonsTitle }),
+    /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { className: "flex flex-col gap-2", children: data.lessons.map((lesson) => /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(LessonAccordionItem, { lesson }, lesson.id)) })
+  ] })
+] });
+var renderModalContent = (loading, data, labels) => {
+  if (loading) {
+    return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(LoadingSkeleton2, {});
+  }
+  if (data) {
+    return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(PerformanceContent, { data, labels });
+  }
+  return null;
+};
+var StudentPerformanceModal = ({
+  isOpen,
+  onClose,
+  data,
+  loading = false,
+  labels: customLabels
+}) => {
+  const labels = (0, import_react14.useMemo)(
+    () => ({ ...DEFAULT_PERFORMANCE_LABELS, ...customLabels }),
+    [customLabels]
+  );
+  if (!data && !loading) {
+    return null;
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+    Modal_default,
+    {
+      isOpen,
+      onClose,
+      title: labels.title,
+      size: "lg",
+      contentClassName: "max-h-[70vh] overflow-y-auto",
+      children: renderModalContent(loading, data, labels)
+    }
+  );
+};
+
+// src/components/RecommendedLessonDetails/RecommendedLessonDetails.tsx
+var import_jsx_runtime29 = require("react/jsx-runtime");
 var RecommendedLessonDetails = ({
   data,
   loading = false,
@@ -2168,11 +4771,11 @@ var RecommendedLessonDetails = ({
   labels: customLabels,
   className
 }) => {
-  const labels = (0, import_react8.useMemo)(
+  const labels = (0, import_react16.useMemo)(
     () => ({ ...DEFAULT_LABELS, ...customLabels }),
     [customLabels]
   );
-  const defaultBreadcrumbs = (0, import_react8.useMemo)(
+  const defaultBreadcrumbs = (0, import_react16.useMemo)(
     () => [
       { label: "Aulas recomendadas", path: "/aulas-recomendadas" },
       { label: data?.goal.title || "Detalhes" }
@@ -2180,7 +4783,7 @@ var RecommendedLessonDetails = ({
     [data?.goal.title]
   );
   const breadcrumbItems = breadcrumbs || defaultBreadcrumbs;
-  const displayStudents = (0, import_react8.useMemo)(() => {
+  const displayStudents = (0, import_react16.useMemo)(() => {
     if (!data?.details.students) return [];
     const deadline = data?.goal.finalDate;
     return data.details.students.map(
@@ -2188,17 +4791,17 @@ var RecommendedLessonDetails = ({
     );
   }, [data?.details.students, data?.goal.finalDate]);
   if (loading) {
-    return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
       "div",
       {
         className: cn("flex flex-col gap-6", className),
         "data-testid": "lesson-details-loading",
-        children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(LoadingSkeleton, {})
+        children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(LoadingSkeleton, {})
       }
     );
   }
   if (error) {
-    return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
       "div",
       {
         className: cn(
@@ -2206,21 +4809,21 @@ var RecommendedLessonDetails = ({
           className
         ),
         "data-testid": "lesson-details-error",
-        children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(Text_default, { size: "md", className: "text-error-700", children: error })
+        children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(Text_default, { size: "md", className: "text-error-700", children: error })
       }
     );
   }
   if (!data) {
     return null;
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(
     "div",
     {
       className: cn("flex flex-col gap-6", className),
       "data-testid": "recommended-lesson-details",
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(Breadcrumb, { items: breadcrumbItems, onItemClick: onBreadcrumbClick }),
-        /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(Breadcrumb, { items: breadcrumbItems, onItemClick: onBreadcrumbClick }),
+        /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
           LessonHeader,
           {
             data,
@@ -2229,8 +4832,8 @@ var RecommendedLessonDetails = ({
             viewLessonLabel: labels.viewLesson
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(ResultsSection, { data, labels }),
-        /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(ResultsSection, { data, labels }),
+        /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
           StudentsTable,
           {
             students: displayStudents,
@@ -2245,6 +4848,7 @@ var RecommendedLessonDetails = ({
 var RecommendedLessonDetails_default = RecommendedLessonDetails;
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
-  RecommendedLessonDetails
+  RecommendedLessonDetails,
+  StudentPerformanceModal
 });
 //# sourceMappingURL=index.js.map