analytica-frontend-lib 1.0.45 → 1.0.46

package/dist/index.js

@@ -24,6 +24,13 @@ __export(src_exports, {
   Badge: () => Badge_default,
   Button: () => Button_default,
   Calendar: () => Calendar_default,
+  CardActivesResults: () => CardActivesResults,
+  CardPerformance: () => CardPerformance,
+  CardProgress: () => CardProgress,
+  CardQuestions: () => CardQuestions,
+  CardResults: () => CardResults,
+  CardStatus: () => CardStatus,
+  CardTopic: () => CardTopic,
   CheckBox: () => CheckBox_default,
   Chips: () => Chips_default,
   Divider: () => Divider_default,
@@ -54,6 +61,7 @@ __export(src_exports, {
   SelectTrigger: () => SelectTrigger,
   SelectValue: () => SelectValue,
   SelectionButton: () => SelectionButton_default,
+  Stepper: () => Stepper_default,
   Table: () => Table_default,
   Text: () => Text_default,
   TextArea: () => TextArea_default,
@@ -2089,9 +2097,308 @@ var ProgressCircle = ({
 };
 var ProgressCircle_default = ProgressCircle;
 
+// src/components/Stepper/Stepper.tsx
+var import_phosphor_react7 = require("phosphor-react");
+var import_jsx_runtime20 = require("react/jsx-runtime");
+var SIZE_CLASSES9 = {
+  small: {
+    container: "gap-2",
+    // 8px gap as specified in CSS
+    stepWidth: "w-[58px]",
+    // exact 58px from CSS
+    stepHeight: "h-[38px]",
+    // exact 38px from CSS
+    indicator: "w-5 h-5",
+    // 20px as specified
+    progressBar: "h-0.5",
+    // 2px as specified
+    indicatorTextSize: "2xs",
+    // 10px as specified
+    labelTextSize: "xs",
+    // 12px as specified
+    iconSize: "w-3 h-3"
+    // 12px
+  },
+  medium: {
+    container: "gap-3",
+    // 12px (8px + 4px progression)
+    stepWidth: "w-[110px]",
+    // 110px (increased from 90px to fit "Endereço Residencial")
+    stepHeight: "h-[48px]",
+    // 48px (increased from 46px for better proportion)
+    indicator: "w-6 h-6",
+    // 24px (20px + 4px progression)
+    progressBar: "h-0.5",
+    // 2px maintained for consistency
+    indicatorTextSize: "2xs",
+    // 10px maintained for readability
+    labelTextSize: "xs",
+    // 12px maintained
+    iconSize: "w-3.5 h-3.5"
+    // 14px
+  },
+  large: {
+    container: "gap-4",
+    // 16px (12px + 4px progression)
+    stepWidth: "w-[160px]",
+    // 160px (increased from 140px to fit "Endereço Residencial")
+    stepHeight: "h-[58px]",
+    // 58px (increased from 54px for better proportion)
+    indicator: "w-7 h-7",
+    // 28px (24px + 4px progression)
+    progressBar: "h-1",
+    // 4px (increased for better visibility)
+    indicatorTextSize: "xs",
+    // 12px (increased for larger size)
+    labelTextSize: "sm",
+    // 14px (increased for larger size)
+    iconSize: "w-4 h-4"
+    // 16px
+  },
+  extraLarge: {
+    container: "gap-5",
+    // 20px (16px + 4px progression)
+    stepWidth: "w-[200px]",
+    // 200px (increased from 180px to ensure "Endereço Residencial" fits)
+    stepHeight: "h-[68px]",
+    // 68px (increased from 62px for better proportion)
+    indicator: "w-8 h-8",
+    // 32px (28px + 4px progression)
+    progressBar: "h-1",
+    // 4px maintained
+    indicatorTextSize: "xs",
+    // 12px maintained for readability
+    labelTextSize: "sm",
+    // 14px maintained
+    iconSize: "w-[18px] h-[18px]"
+    // 18px
+  }
+};
+var STATE_CLASSES6 = {
+  pending: {
+    progressBar: "bg-text-400",
+    // #A3A3A3
+    indicator: "bg-text-400",
+    // #A3A3A3
+    indicatorText: "text-white",
+    // Branco para contraste com background cinza
+    label: "text-text-400"
+    // #A3A3A3
+  },
+  current: {
+    progressBar: "bg-primary-800",
+    // #1C61B2 usando classe Tailwind padrão
+    indicator: "bg-primary-800",
+    // #1C61B2 usando classe Tailwind padrão
+    indicatorText: "text-white",
+    // Branco usando classe Tailwind padrão
+    label: "text-primary-800"
+    // #1C61B2 usando classe Tailwind padrão
+  },
+  completed: {
+    progressBar: "bg-primary-400",
+    // #48A0E8 para barra quando checked (completed)
+    indicator: "bg-primary-400",
+    // #48A0E8 para corresponder à barra de progresso
+    indicatorText: "text-white",
+    // Branco usando classe Tailwind padrão
+    label: "text-primary-400"
+    // #48A0E8 para corresponder à barra de progresso
+  }
+};
+var Step = ({
+  step,
+  index,
+  size: _size,
+  sizeClasses,
+  stateClasses,
+  isLast: _isLast,
+  className = ""
+}) => {
+  const stepNumber = index + 1;
+  const isCompleted = step.state === "completed";
+  const getAriaLabel = () => {
+    let suffix = "";
+    if (step.state === "completed") {
+      suffix = " (conclu\xEDdo)";
+    } else if (step.state === "current") {
+      suffix = " (atual)";
+    }
+    return `${step.label}${suffix}`;
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(
+    "div",
+    {
+      className: `
+        flex flex-col justify-center items-center pb-2 gap-2
+        ${sizeClasses.stepWidth} ${sizeClasses.stepHeight}
+        flex-none flex-grow
+        ${className}
+        sm:max-w-[100px] md:max-w-[120px] lg:max-w-none xl:max-w-none
+        sm:min-h-[40px] md:min-h-[45px] lg:min-h-none
+        overflow-visible
+      `,
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+          "div",
+          {
+            className: `
+          w-full ${sizeClasses.progressBar} ${stateClasses.progressBar}
+          rounded-sm flex-none
+        `
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(
+          "div",
+          {
+            className: `
+          flex flex-col sm:flex-row items-center
+          gap-1 sm:gap-2 w-full sm:w-auto
+          h-auto sm:h-5 flex-none
+          overflow-visible
+        `,
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+                "div",
+                {
+                  className: `
+            ${sizeClasses.indicator} ${stateClasses.indicator}
+            rounded-full flex items-center justify-center relative
+            flex-none transition-all duration-300 ease-out
+            w-4 h-4 sm:w-5 sm:h-5 md:w-5 md:h-5 lg:w-6 lg:h-6
+          `,
+                  "aria-label": getAriaLabel(),
+                  children: isCompleted ? /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+                    import_phosphor_react7.Check,
+                    {
+                      weight: "bold",
+                      className: `
+                ${stateClasses.indicatorText}
+                w-2.5 h-2.5 sm:w-3 sm:h-3 md:w-3 md:h-3 lg:w-3.5 lg:h-3.5
+              `
+                    }
+                  ) : /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+                    Text_default,
+                    {
+                      size: sizeClasses.indicatorTextSize,
+                      weight: "medium",
+                      color: "",
+                      className: `${stateClasses.indicatorText} leading-none text-2xs sm:text-xs`,
+                      children: stepNumber
+                    }
+                  )
+                }
+              ),
+              /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+                Text_default,
+                {
+                  size: sizeClasses.labelTextSize,
+                  weight: "medium",
+                  color: "",
+                  className: `
+            ${stateClasses.label} leading-tight flex-none
+            text-center sm:text-left break-words
+            px-1 sm:px-0 max-w-full
+            text-2xs sm:text-xs md:text-xs lg:text-sm
+            whitespace-normal
+          `,
+                  children: step.label
+                }
+              )
+            ]
+          }
+        )
+      ]
+    }
+  );
+};
+var calculateStepStates = (steps, currentStep) => {
+  return steps.map((step, index) => {
+    let stepState;
+    if (index < currentStep) {
+      stepState = "completed";
+    } else if (index === currentStep) {
+      stepState = "current";
+    } else {
+      stepState = "pending";
+    }
+    return {
+      ...step,
+      state: stepState
+    };
+  });
+};
+var getProgressText = (currentStep, totalSteps, customText) => {
+  if (customText) return customText;
+  return `Etapa ${currentStep + 1} de ${totalSteps}`;
+};
+var Stepper = ({
+  steps: initialSteps,
+  size = "medium",
+  currentStep,
+  className = "",
+  stepClassName = "",
+  showProgress = false,
+  progressText,
+  responsive = true
+}) => {
+  const sizeClasses = SIZE_CLASSES9[size];
+  const steps = currentStep !== void 0 ? calculateStepStates(initialSteps, currentStep) : initialSteps;
+  return /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(
+    "fieldset",
+    {
+      className: `flex flex-col gap-4 sm:gap-5 md:gap-6 ${className} border-0 p-0 m-0`,
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("legend", { className: "absolute w-px h-px p-0 -m-px overflow-hidden whitespace-nowrap border-0", children: "Stepper de formul\xE1rio" }),
+        showProgress && currentStep !== void 0 && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+          Text_default,
+          {
+            size: "sm",
+            weight: "medium",
+            className: "text-text-600 text-center sm:text-left text-xs sm:text-sm",
+            children: getProgressText(currentStep, steps.length, progressText)
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+          "div",
+          {
+            className: `
+          flex items-center
+          ${sizeClasses.container}
+          ${responsive ? "flex-row overflow-x-auto overflow-y-hidden scrollbar-hide justify-start sm:justify-center md:justify-center lg:justify-center" : "flex-row justify-center"}
+          px-2 sm:px-4 md:px-6 lg:px-0
+          max-w-full min-w-0
+          gap-2 sm:gap-3 md:gap-4 lg:gap-4
+        `,
+            role: "tablist",
+            "aria-label": "Progress steps",
+            children: steps.map((step, index) => {
+              const stateClasses = STATE_CLASSES6[step.state];
+              return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+                Step,
+                {
+                  step,
+                  index,
+                  size,
+                  sizeClasses,
+                  stateClasses,
+                  isLast: index === steps.length - 1,
+                  className: stepClassName
+                },
+                step.id
+              );
+            })
+          }
+        )
+      ]
+    }
+  );
+};
+var Stepper_default = Stepper;
+
 // src/components/Calendar/Calendar.tsx
 var import_react9 = require("react");
-var import_jsx_runtime20 = require("react/jsx-runtime");
+var import_jsx_runtime21 = require("react/jsx-runtime");
 var WEEK_DAYS = ["SEG", "TER", "QUA", "QUI", "SEX", "S\xC1B", "DOM"];
 var WEEK_DAYS_SHORT = ["S", "T", "Q", "Q", "S", "S", "D"];
 var MONTH_NAMES = [
@@ -2114,15 +2421,15 @@ var MonthYearPicker = ({
   currentDate,
   onYearChange,
   onMonthChange
-}) => /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(
+}) => /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(
   "div",
   {
     ref: monthPickerRef,
     className: "absolute top-full left-0 z-50 mt-1 bg-white rounded-lg shadow-lg border border-border-200 p-4 min-w-[280px]",
     children: [
-      /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: "mb-4", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("h3", { className: "text-sm font-medium text-text-700 mb-2", children: "Selecionar Ano" }),
-        /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { className: "grid grid-cols-4 gap-1 max-h-32 overflow-y-auto", children: availableYears.map((year) => /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { className: "mb-4", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("h3", { className: "text-sm font-medium text-text-700 mb-2", children: "Selecionar Ano" }),
+        /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { className: "grid grid-cols-4 gap-1 max-h-32 overflow-y-auto", children: availableYears.map((year) => /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
           "button",
           {
             onClick: () => onYearChange(year),
@@ -2135,9 +2442,9 @@ var MonthYearPicker = ({
           year
         )) })
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { children: [
-        /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("h3", { className: "text-sm font-medium text-text-700 mb-2", children: "Selecionar M\xEAs" }),
-        /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { className: "grid grid-cols-3 gap-1", children: MONTH_NAMES.map((month, index) => /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("h3", { className: "text-sm font-medium text-text-700 mb-2", children: "Selecionar M\xEAs" }),
+        /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { className: "grid grid-cols-3 gap-1", children: MONTH_NAMES.map((month, index) => /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
           "button",
           {
             onClick: () => onMonthChange(index, currentDate.getFullYear()),
@@ -2269,28 +2576,28 @@ var Calendar = ({
     onDateSelect?.(day.date);
   };
   if (variant === "navigation") {
-    return /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: `bg-background rounded-xl p-3 ${className}`, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: "flex items-center justify-between mb-4 px-6", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: "relative", ref: monthPickerContainerRef, children: [
-          /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(
+    return /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { className: `bg-background rounded-xl p-3 ${className}`, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { className: "flex items-center justify-between mb-4 px-6", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { className: "relative", ref: monthPickerContainerRef, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(
             "button",
             {
               onClick: toggleMonthPicker,
               className: "flex items-center gap-1 hover:bg-background-100 rounded px-2 py-1 transition-colors",
               children: [
-                /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("span", { className: "text-sm font-medium text-text-600", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("span", { className: "text-sm font-medium text-text-600", children: [
                   MONTH_NAMES[currentDate.getMonth()],
                   " ",
                   currentDate.getFullYear()
                 ] }),
-                /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+                /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
                   "svg",
                   {
                     className: `w-4 h-4 text-primary-950 transition-transform ${isMonthPickerOpen ? "rotate-180" : ""}`,
                     fill: "none",
                     stroke: "currentColor",
                     viewBox: "0 0 24 24",
-                    children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+                    children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
                       "path",
                       {
                         strokeLinecap: "round",
@@ -2304,7 +2611,7 @@ var Calendar = ({
               ]
             }
           ),
-          isMonthPickerOpen && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+          isMonthPickerOpen && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
             MonthYearPicker,
             {
               monthPickerRef,
@@ -2315,21 +2622,21 @@ var Calendar = ({
             }
           )
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: "flex items-center gap-10", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { className: "flex items-center gap-10", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
             "button",
             {
               onClick: goToPreviousMonth,
               className: "p-1 rounded hover:bg-background-100 transition-colors",
               "aria-label": "M\xEAs anterior",
-              children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+              children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
                 "svg",
                 {
                   className: "w-6 h-6 text-primary-950",
                   fill: "none",
                   stroke: "currentColor",
                   viewBox: "0 0 24 24",
-                  children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+                  children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
                     "path",
                     {
                       strokeLinecap: "round",
@@ -2342,20 +2649,20 @@ var Calendar = ({
               )
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
             "button",
             {
               onClick: goToNextMonth,
               className: "p-1 rounded hover:bg-background-100 transition-colors",
               "aria-label": "Pr\xF3ximo m\xEAs",
-              children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+              children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
                 "svg",
                 {
                   className: "w-6 h-6 text-primary-950",
                   fill: "none",
                   stroke: "currentColor",
                   viewBox: "0 0 24 24",
-                  children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+                  children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
                     "path",
                     {
                       strokeLinecap: "round",
@@ -2370,7 +2677,7 @@ var Calendar = ({
           )
         ] })
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { className: "grid grid-cols-7 gap-1 mb-2", children: WEEK_DAYS_SHORT.map((day, index) => /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { className: "grid grid-cols-7 gap-1 mb-2", children: WEEK_DAYS_SHORT.map((day, index) => /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
         "div",
         {
           className: "h-9 flex items-center justify-center text-xs font-normal text-text-600",
@@ -2378,13 +2685,13 @@ var Calendar = ({
         },
         `${day}-${index}`
       )) }),
-      /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { className: "grid grid-cols-7 gap-1", children: calendarData.map((day) => {
+      /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { className: "grid grid-cols-7 gap-1", children: calendarData.map((day) => {
         if (!day.isCurrentMonth) {
-          return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+          return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
             "div",
             {
               className: "flex items-center justify-center",
-              children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { className: "w-9 h-9" })
+              children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { className: "w-9 h-9" })
             },
             day.date.getTime()
           );
@@ -2400,11 +2707,11 @@ var Calendar = ({
         } else if (day.isSelected) {
           spanClass = "h-6 w-6 rounded-full bg-primary-950 text-text";
         }
-        return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+        return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
           "div",
           {
             className: "flex items-center justify-center",
-            children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+            children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
               "button",
               {
                 className: `
@@ -2420,7 +2727,7 @@ var Calendar = ({
                 "aria-label": `${day.date.getDate()} de ${MONTH_NAMES[day.date.getMonth()]}`,
                 "aria-current": day.isToday ? "date" : void 0,
                 tabIndex: 0,
-                children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("span", { className: spanClass, children: day.date.getDate() })
+                children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("span", { className: spanClass, children: day.date.getDate() })
               }
             )
           },
@@ -2429,28 +2736,28 @@ var Calendar = ({
       }) })
     ] });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: `bg-background rounded-xl p-4 ${className}`, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: "flex items-center justify-between mb-3.5", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: "relative", ref: monthPickerContainerRef, children: [
-        /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { className: `bg-background rounded-xl p-4 ${className}`, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { className: "flex items-center justify-between mb-3.5", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { className: "relative", ref: monthPickerContainerRef, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(
           "button",
           {
             onClick: toggleMonthPicker,
             className: "flex items-center gap-2 hover:bg-background-100 rounded px-2 py-1 transition-colors",
             children: [
-              /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("h2", { className: "text-lg font-semibold text-text-950", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("h2", { className: "text-lg font-semibold text-text-950", children: [
                 MONTH_NAMES[currentDate.getMonth()],
                 " ",
                 currentDate.getFullYear()
               ] }),
-              /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
                 "svg",
                 {
                   className: `w-4 h-4 text-text-400 transition-transform ${isMonthPickerOpen ? "rotate-180" : ""}`,
                   fill: "none",
                   stroke: "currentColor",
                   viewBox: "0 0 24 24",
-                  children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+                  children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
                     "path",
                     {
                       strokeLinecap: "round",
@@ -2464,7 +2771,7 @@ var Calendar = ({
             ]
           }
         ),
-        isMonthPickerOpen && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+        isMonthPickerOpen && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
           MonthYearPicker,
           {
             monthPickerRef,
@@ -2475,21 +2782,21 @@ var Calendar = ({
           }
         )
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: "flex items-center gap-1", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { className: "flex items-center gap-1", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
           "button",
           {
             onClick: goToPreviousMonth,
             className: "p-1 rounded-md hover:bg-background-100 transition-colors",
             "aria-label": "M\xEAs anterior",
-            children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+            children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
               "svg",
               {
                 className: "w-6 h-6 text-primary-950",
                 fill: "none",
                 stroke: "currentColor",
                 viewBox: "0 0 24 24",
-                children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+                children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
                   "path",
                   {
                     strokeLinecap: "round",
@@ -2502,20 +2809,20 @@ var Calendar = ({
             )
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
           "button",
           {
             onClick: goToNextMonth,
             className: "p-1 rounded-md hover:bg-background-100 transition-colors",
             "aria-label": "Pr\xF3ximo m\xEAs",
-            children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+            children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
               "svg",
               {
                 className: "w-6 h-6 text-primary-950",
                 fill: "none",
                 stroke: "currentColor",
                 viewBox: "0 0 24 24",
-                children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+                children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
                   "path",
                   {
                     strokeLinecap: "round",
@@ -2530,7 +2837,7 @@ var Calendar = ({
         )
       ] })
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { className: "grid grid-cols-7 gap-1 mb-2", children: WEEK_DAYS.map((day) => /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { className: "grid grid-cols-7 gap-1 mb-2", children: WEEK_DAYS.map((day) => /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
       "div",
       {
         className: "h-4 flex items-center justify-center text-xs font-semibold text-text-500",
@@ -2538,13 +2845,13 @@ var Calendar = ({
       },
       day
     )) }),
-    /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { className: "grid grid-cols-7 gap-1", children: calendarData.map((day) => {
+    /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { className: "grid grid-cols-7 gap-1", children: calendarData.map((day) => {
       if (!day.isCurrentMonth) {
-        return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+        return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
           "div",
           {
             className: "flex items-center justify-center",
-            children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { className: "w-10 h-10" })
+            children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { className: "w-10 h-10" })
           },
           day.date.getTime()
         );
@@ -2554,11 +2861,11 @@ var Calendar = ({
         variant,
         showActivities
       );
-      return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+      return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
         "div",
         {
           className: "flex items-center justify-center",
-          children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+          children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
             "button",
             {
               className: `
@@ -2588,9 +2895,9 @@ var Calendar_default = Calendar;
 
 // src/components/Modal/Modal.tsx
 var import_react10 = require("react");
-var import_phosphor_react7 = require("phosphor-react");
-var import_jsx_runtime21 = require("react/jsx-runtime");
-var SIZE_CLASSES9 = {
+var import_phosphor_react8 = require("phosphor-react");
+var import_jsx_runtime22 = require("react/jsx-runtime");
+var SIZE_CLASSES10 = {
   xs: "max-w-[360px]",
   sm: "max-w-[420px]",
   md: "max-w-[510px]",
@@ -2641,10 +2948,10 @@ var Modal = ({
     }
   };
   if (!isOpen) return null;
-  const sizeClasses = SIZE_CLASSES9[size];
+  const sizeClasses = SIZE_CLASSES10[size];
   const baseClasses = "bg-background rounded-3xl shadow-hard-shadow-2 border border-border-100 w-full mx-4";
   const modalClasses = `${baseClasses} ${sizeClasses} ${className}`;
-  return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+  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",
@@ -2652,7 +2959,7 @@ var Modal = ({
       onKeyDown: handleBackdropKeyDown,
       role: "none",
       "aria-hidden": "true",
-      children: /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(
         "div",
         {
           className: modalClasses,
@@ -2660,20 +2967,20 @@ var Modal = ({
           "aria-modal": "true",
           "aria-labelledby": "modal-title",
           children: [
-            /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { className: "flex items-center justify-between px-6 py-6", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("h2", { id: "modal-title", className: "text-lg font-semibold text-text-950", children: title }),
-              !hideCloseButton && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+            /* @__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: "modal-title", 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_runtime21.jsx)(import_phosphor_react7.X, { size: 18 })
+                  children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_phosphor_react8.X, { size: 18 })
                 }
               )
             ] }),
-            /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { className: "px-6 pb-6", children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { className: "text-text-500 font-normal text-sm leading-6", children }) }),
-            footer && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { className: "flex justify-end gap-3 px-6 pb-6", children: footer })
+            /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { className: "px-6 pb-6", 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 })
           ]
         }
       )
@@ -2683,10 +2990,10 @@ var Modal = ({
 var Modal_default = Modal;
 
 // src/components/DropdownMenu/DropdownMenu.tsx
-var import_phosphor_react8 = require("phosphor-react");
+var import_phosphor_react9 = require("phosphor-react");
 var import_react11 = require("react");
 var import_zustand2 = require("zustand");
-var import_jsx_runtime22 = require("react/jsx-runtime");
+var import_jsx_runtime23 = require("react/jsx-runtime");
 function createDropdownStore() {
   return (0, import_zustand2.create)((set) => ({
     open: false,
@@ -2781,7 +3088,7 @@ var DropdownMenu = ({
       setOpen(propOpen);
     }
   }, [propOpen]);
-  return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { className: "relative", ref: menuRef, children: injectStore(children, store) });
+  return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("div", { className: "relative", ref: menuRef, children: injectStore(children, store) });
 };
 var DropdownMenuTrigger = ({
   className,
@@ -2793,7 +3100,7 @@ var DropdownMenuTrigger = ({
   const store = useDropdownStore(externalStore);
   const open = (0, import_zustand2.useStore)(store, (s) => s.open);
   const toggleOpen = () => store.setState({ open: !open });
-  return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
     Button_default,
     {
       variant: "outline",
@@ -2830,7 +3137,7 @@ var MENUCONTENT_VARIANT_CLASSES = {
   profile: "p-6"
 };
 var MenuLabel = (0, import_react11.forwardRef)(({ className, inset, store: _store, ...props }, ref) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
     "div",
     {
       ref,
@@ -2869,7 +3176,7 @@ var MenuContent = (0, import_react11.forwardRef)(
       return `absolute ${vertical} ${horizontal}`;
     };
     const variantClasses = MENUCONTENT_VARIANT_CLASSES[variant];
-    return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
       "div",
       {
         ref,
@@ -2928,7 +3235,7 @@ var DropdownMenuItem = (0, import_react11.forwardRef)(
     const getVariantProps = () => {
       return variant === "profile" ? { "data-variant": "profile" } : {};
     };
-    return /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(
+    return /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(
       "div",
       {
         ref,
@@ -2950,7 +3257,7 @@ var DropdownMenuItem = (0, import_react11.forwardRef)(
         ...props,
         children: [
           iconLeft,
-          /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("span", { className: "w-full text-md", children }),
+          /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("span", { className: "w-full text-md", children }),
           iconRight
         ]
       }
@@ -2958,7 +3265,7 @@ var DropdownMenuItem = (0, import_react11.forwardRef)(
   }
 );
 DropdownMenuItem.displayName = "DropdownMenuItem";
-var DropdownMenuSeparator = (0, import_react11.forwardRef)(({ className, store: _store, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+var DropdownMenuSeparator = (0, import_react11.forwardRef)(({ className, store: _store, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
   "div",
   {
     ref,
@@ -2971,7 +3278,7 @@ var ProfileMenuTrigger = (0, import_react11.forwardRef)(({ className, onClick, s
   const store = useDropdownStore(externalStore);
   const open = (0, import_zustand2.useStore)(store, (s) => s.open);
   const toggleOpen = () => store.setState({ open: !open });
-  return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
     "button",
     {
       ref,
@@ -2983,13 +3290,13 @@ var ProfileMenuTrigger = (0, import_react11.forwardRef)(({ className, onClick, s
       },
       "aria-expanded": open,
       ...props,
-      children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("span", { className: "size-6 rounded-full bg-background-100 flex items-center justify-center", children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_phosphor_react8.User, { className: "text-background-950", size: 18 }) })
+      children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("span", { className: "size-6 rounded-full bg-background-100 flex items-center justify-center", children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_phosphor_react9.User, { className: "text-background-950", size: 18 }) })
     }
   );
 });
 ProfileMenuTrigger.displayName = "ProfileMenuTrigger";
 var ProfileMenuHeader = (0, import_react11.forwardRef)(({ className, name, email, store: _store, ...props }, ref) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(
     "div",
     {
       ref,
@@ -3000,10 +3307,10 @@ var ProfileMenuHeader = (0, import_react11.forwardRef)(({ className, name, email
         `,
       ...props,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("span", { className: "size-16 bg-background-100 rounded-full flex items-center justify-center", children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_phosphor_react8.User, { size: 34, className: "text-background-950" }) }),
-        /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { className: "flex flex-col ", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("p", { className: "text-xl font-bold text-text-950", children: name }),
-          /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("p", { className: "text-md text-text-600", children: email })
+        /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("span", { className: "size-16 bg-background-100 rounded-full flex items-center justify-center", children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_phosphor_react9.User, { size: 34, className: "text-background-950" }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { className: "flex flex-col ", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("p", { className: "text-xl font-bold text-text-950", children: name }),
+          /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("p", { className: "text-md text-text-600", children: email })
         ] })
       ]
     }
@@ -3011,7 +3318,7 @@ var ProfileMenuHeader = (0, import_react11.forwardRef)(({ className, name, email
 });
 ProfileMenuHeader.displayName = "ProfileMenuHeader";
 var ProfileMenuSection = (0, import_react11.forwardRef)(({ className, children, store: _store, ...props }, ref) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
     "div",
     {
       ref,
@@ -3034,7 +3341,7 @@ var ProfileMenuFooter = ({
 }) => {
   const store = useDropdownStore(externalStore);
   const setOpen = (0, import_zustand2.useStore)(store, (s) => s.setOpen);
-  return /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(
     Button_default,
     {
       variant: "outline",
@@ -3046,8 +3353,8 @@ var ProfileMenuFooter = ({
       },
       ...props,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("span", { className: "mr-2 flex items-center", children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_phosphor_react8.SignOut, {}) }),
-        /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("span", { children: "Sair" })
+        /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("span", { className: "mr-2 flex items-center", children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_phosphor_react9.SignOut, {}) }),
+        /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("span", { children: "Sair" })
       ]
     }
   );
@@ -3058,14 +3365,14 @@ var DropdownMenu_default = DropdownMenu;
 // src/components/Select/Select.tsx
 var import_zustand3 = require("zustand");
 var import_react12 = require("react");
-var import_phosphor_react9 = require("phosphor-react");
-var import_jsx_runtime23 = require("react/jsx-runtime");
+var import_phosphor_react10 = require("phosphor-react");
+var import_jsx_runtime24 = require("react/jsx-runtime");
 var VARIANT_CLASSES4 = {
   outlined: "border-2 rounded-sm focus:border-primary-950",
   underlined: "border-b-2 focus:border-primary-950",
   rounded: "border-2 rounded-4xl focus:border-primary-950"
 };
-var SIZE_CLASSES10 = {
+var SIZE_CLASSES11 = {
   small: "text-sm",
   medium: "text-md",
   large: "text-lg"
@@ -3105,7 +3412,7 @@ function getLabelAsNode(children) {
   }
   const flattened = import_react12.Children.toArray(children);
   if (flattened.length === 1) return flattened[0];
-  return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_jsx_runtime23.Fragment, { children: flattened });
+  return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_jsx_runtime24.Fragment, { children: flattened });
 }
 var injectStore2 = (children, store) => {
   return import_react12.Children.map(children, (child) => {
@@ -3206,8 +3513,8 @@ var Select = ({
       if (label) store.setState({ selectedLabel: label });
     }
   }, [propValue]);
-  const sizeClasses = SIZE_CLASSES10[size];
-  return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("div", { className: `relative ${sizeClasses} w-[288px]`, ref: selectRef, children: injectStore2(children, store) });
+  const sizeClasses = SIZE_CLASSES11[size];
+  return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { className: `relative ${sizeClasses} w-[288px]`, ref: selectRef, children: injectStore2(children, store) });
 };
 var SelectValue = ({
   placeholder,
@@ -3216,7 +3523,7 @@ var SelectValue = ({
   const store = useSelectStore(externalStore);
   const selectedLabel = (0, import_zustand3.useStore)(store, (s) => s.selectedLabel);
   const value = (0, import_zustand3.useStore)(store, (s) => s.value);
-  return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("span", { className: "text-inherit", children: selectedLabel || placeholder || value });
+  return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("span", { className: "text-inherit", children: selectedLabel || placeholder || value });
 };
 var SelectTrigger = (0, import_react12.forwardRef)(
   ({
@@ -3231,7 +3538,7 @@ var SelectTrigger = (0, import_react12.forwardRef)(
     const open = (0, import_zustand3.useStore)(store, (s) => s.open);
     const toggleOpen = () => store.setState({ open: !open });
     const variantClasses = VARIANT_CLASSES4[variant];
-    return /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(
+    return /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(
       "button",
       {
         ref,
@@ -3250,8 +3557,8 @@ var SelectTrigger = (0, import_react12.forwardRef)(
         ...props,
         children: [
           props.children,
-          /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
-            import_phosphor_react9.CaretDown,
+          /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+            import_phosphor_react10.CaretDown,
             {
               className: `h-[1em] w-[1em] opacity-50 transition-transform ${open ? "rotate-180" : ""}`
             }
@@ -3275,7 +3582,7 @@ var SelectContent = (0, import_react12.forwardRef)(
     const open = (0, import_zustand3.useStore)(store, (s) => s.open);
     if (!open) return null;
     const getPositionClasses = () => `w-full min-w-full absolute ${SIDE_CLASSES2[side]} ${ALIGN_CLASSES2[align]}`;
-    return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
       "div",
       {
         role: "menu",
@@ -3313,7 +3620,7 @@ var SelectItem = (0, import_react12.forwardRef)(
       }
       props.onClick?.(e);
     };
-    return /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(
+    return /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(
       "div",
       {
         role: "menuitem",
@@ -3333,7 +3640,7 @@ var SelectItem = (0, import_react12.forwardRef)(
         tabIndex: disabled ? -1 : 0,
         ...props,
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("span", { className: "absolute right-2 flex h-3.5 w-3.5 items-center justify-center", children: selectedValue === value && /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_phosphor_react9.Check, { className: "" }) }),
+          /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("span", { className: "absolute right-2 flex h-3.5 w-3.5 items-center justify-center", children: selectedValue === value && /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_phosphor_react10.Check, { className: "" }) }),
           children
         ]
       }
@@ -3346,8 +3653,8 @@ var Select_default = Select;
 // src/components/Menu/Menu.tsx
 var import_zustand4 = require("zustand");
 var import_react13 = require("react");
-var import_phosphor_react10 = require("phosphor-react");
-var import_jsx_runtime24 = require("react/jsx-runtime");
+var import_phosphor_react11 = require("phosphor-react");
+var import_jsx_runtime25 = require("react/jsx-runtime");
 var createMenuStore = () => (0, import_zustand4.create)((set) => ({
   value: "",
   setValue: (value) => set({ value })
@@ -3383,7 +3690,7 @@ var Menu = (0, import_react13.forwardRef)(
     }, [value, onValueChange]);
     const baseClasses = "w-full flex flex-row items-center gap-2 py-2 px-6";
     const variantClasses = VARIANT_CLASSES5[variant];
-    return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
       "ul",
       {
         ref,
@@ -3428,7 +3735,7 @@ var MenuItem = (0, import_react13.forwardRef)(
       ...props
     };
     const variants = {
-      menu: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+      menu: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
         "li",
         {
           "data-variant": "menu",
@@ -3443,7 +3750,7 @@ var MenuItem = (0, import_react13.forwardRef)(
           children
         }
       ),
-      menu2: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+      menu2: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
         "li",
         {
           "data-variant": "menu2",
@@ -3455,7 +3762,7 @@ var MenuItem = (0, import_react13.forwardRef)(
           children
         }
       ),
-      breadcrumb: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+      breadcrumb: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
         "li",
         {
           "data-variant": "breadcrumb",
@@ -3466,7 +3773,7 @@ var MenuItem = (0, import_react13.forwardRef)(
             ${className ?? ""}
           `,
           ...commonProps,
-          children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+          children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
             "span",
             {
               className: `
@@ -3484,14 +3791,14 @@ var MenuItem = (0, import_react13.forwardRef)(
 );
 MenuItem.displayName = "MenuItem";
 var MenuSeparator = (0, import_react13.forwardRef)(
-  ({ className, children, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+  ({ className, children, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
     "li",
     {
       ref,
       "aria-hidden": "true",
       className: `[&>svg]:w-4 [&>svg]:h-4 text-text-600 ${className ?? ""}`,
       ...props,
-      children: children ?? /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_phosphor_react10.CaretRight, {})
+      children: children ?? /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_phosphor_react11.CaretRight, {})
     }
   )
 );
@@ -3506,12 +3813,427 @@ var injectStore3 = (children, store) => import_react13.Children.map(children, (c
   });
 });
 var Menu_default = Menu;
+
+// src/components/Card/Card.tsx
+var import_react14 = require("react");
+var import_phosphor_react12 = require("phosphor-react");
+var import_jsx_runtime26 = require("react/jsx-runtime");
+var ACTION_CARD_CLASSES = {
+  warning: "bg-warning-background",
+  success: "bg-success-300",
+  error: "bg-error-100",
+  info: "bg-info-background"
+};
+var ACTION_ICON_CLASSES = {
+  warning: "bg-warning-300 text-text",
+  success: "bg-yellow-300 text-text-950",
+  error: "bg-error-500 text-text",
+  info: "bg-info-500 text-text"
+};
+var ACTION_SUBTITLE_CLASSES = {
+  warning: "text-warning-600",
+  success: "text-success-700",
+  error: "text-error-700",
+  info: "text-info-700"
+};
+var ACTION_HEADER_CLASSES = {
+  warning: "text-warning-300",
+  success: "text-success-300",
+  error: "text-error-300",
+  info: "text-info-300"
+};
+var CardActivesResults = (0, import_react14.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_runtime26.jsxs)(
+      "div",
+      {
+        ref,
+        className: `w-full flex flex-col border border-border-50 bg-background rounded-xl ${className}`,
+        ...props,
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(
+            "div",
+            {
+              className: `
+          flex flex-col gap-1 items-center justify-center p-4 
+          ${actionCardClasses}
+          ${extended ? "rounded-t-xl" : "rounded-xl"}`,
+              children: [
+                /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
+                  "span",
+                  {
+                    className: `size-7.5 rounded-full flex items-center justify-center ${actionIconClasses}`,
+                    children: icon
+                  }
+                ),
+                /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("p", { className: "text-text-800 font-medium uppercase text-2xs", children: title }),
+                /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("p", { className: `text-lg font-bold ${actionSubTitleClasses}`, children: subTitle })
+              ]
+            }
+          ),
+          extended && /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("div", { className: "flex flex-col items-center gap-2.5 pb-9.5 pt-2.5", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
+              "p",
+              {
+                className: `text-2xs font-medium uppercase ${actionHeaderClasses}`,
+                children: header
+              }
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("p", { className: "text-sm text-info-800 text-center", children: description })
+          ] })
+        ]
+      }
+    );
+  }
+);
+var CardQuestions = (0, import_react14.forwardRef)(
+  ({
+    header,
+    state = "undone",
+    className,
+    onClickButton,
+    valueButton,
+    ...props
+  }, ref) => {
+    const isDone = state === "done";
+    const stateLabel = isDone ? "Realizado" : "N\xE3o Realizado";
+    const buttonLabel = isDone ? "Ver Quest\xE3o" : "Responder";
+    return /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(
+      "div",
+      {
+        ref,
+        className: `
+          w-full flex flex-row justify-between rounded-xl p-4 gap-4 bg-background border border-border-50
+          ${className}
+        `,
+        ...props,
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("section", { className: "flex flex-col gap-1", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("p", { className: "font-bold text-xs text-text-950", children: header }),
+            /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("div", { className: "flex flex-row gap-6 items-center", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
+                Badge_default,
+                {
+                  size: "medium",
+                  variant: "solid",
+                  action: isDone ? "success" : "error",
+                  children: stateLabel
+                }
+              ),
+              /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("span", { className: "flex flex-row items-center gap-1 text-text-700 text-xs", children: [
+                isDone ? "Nota" : "Sem nota",
+                isDone && /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(Badge_default, { size: "medium", action: "success", children: "00" })
+              ] })
+            ] })
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(Button_default, { size: "extra-small", onClick: () => onClickButton?.(valueButton), children: buttonLabel })
+        ]
+      }
+    );
+  }
+);
+var CardProgress = (0, import_react14.forwardRef)(
+  ({
+    header,
+    subhead,
+    initialDate,
+    endDate,
+    progress = 0,
+    direction = "horizontal",
+    icon,
+    color = "#B7DFFF",
+    className,
+    ...props
+  }, ref) => {
+    const isHorizontal = direction === "horizontal";
+    const contentComponent = {
+      horizontal: /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(import_jsx_runtime26.Fragment, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("div", { className: "flex flex-row gap-6 items-center", children: [
+          initialDate && /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("span", { className: "flex flex-row gap-1 items-center text-2xs", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("p", { className: "text-text-800 font-semibold", children: "In\xEDcio" }),
+            /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("p", { className: "text-text-600", children: initialDate })
+          ] }),
+          endDate && /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("span", { className: "flex flex-row gap-1 items-center text-2xs", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("p", { className: "text-text-800 font-semibold", children: "Fim" }),
+            /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("p", { className: "text-text-600", children: endDate })
+          ] })
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
+          ProgressBar_default,
+          {
+            size: "medium",
+            showPercentage: true,
+            value: progress,
+            "data-testid": "progress-bar"
+          }
+        )
+      ] }),
+      vertical: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("p", { className: "text-sm text-text-800", children: subhead })
+    };
+    return /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(
+      "div",
+      {
+        ref,
+        className: `
+          w-full flex border border-border-50 rounded-xl
+          ${isHorizontal ? "flex-row h-20" : "flex-col"}
+          ${className}
+        `,
+        ...props,
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
+            "div",
+            {
+              className: `
+            flex justify-center items-center [&>svg]:size-8 text-text-950
+            ${isHorizontal ? "w-20 h-full rounded-l-xl" : "min-h-[50px] w-full rounded-t-xl"}
+          `,
+              style: {
+                backgroundColor: color
+              },
+              children: icon
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(
+            "div",
+            {
+              className: `
+            p-4 flex flex-col justify-between w-full h-full
+            ${!isHorizontal && "gap-4"}
+          `,
+              children: [
+                /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("p", { className: "text-xs font-bold text-text-950", children: header }),
+                contentComponent[direction]
+              ]
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+var CardTopic = (0, import_react14.forwardRef)(
+  ({
+    header,
+    subHead,
+    progress,
+    showPercentage = false,
+    className = "",
+    ...props
+  }, ref) => {
+    return /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(
+      "div",
+      {
+        ref,
+        className: `w-full py-2 px-4 flex flex-col justify-center gap-2 border border-border-50 rounded-xl min-h-20 ${className}`,
+        ...props,
+        children: [
+          subHead && /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("span", { className: "text-text-600 text-2xs flex flex-row gap-1", children: subHead.map((text, index) => /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(import_react14.Fragment, { children: [
+            /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("p", { children: text }),
+            index < subHead.length - 1 && /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("p", { children: "\u2022" })
+          ] }, `${text} - ${index}`)) }),
+          /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("p", { className: "text-xs text-text-950 font-bold", children: header }),
+          /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(ProgressBar_default, { showPercentage, value: progress })
+        ]
+      }
+    );
+  }
+);
+var CardPerformance = (0, import_react14.forwardRef)(
+  ({
+    header,
+    progress,
+    description = "Sem dados ainda! Voc\xEA ainda n\xE3o fez um question\xE1rio neste assunto.",
+    className = "",
+    onClickButton,
+    valueButton,
+    ...props
+  }, ref) => {
+    const hasProgress = progress !== void 0;
+    return /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(
+      "div",
+      {
+        ref,
+        className: `w-full h-20.5 flex flex-row justify-between p-4 gap-2 bg-background border border-border-50 ${className}`,
+        ...props,
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("div", { className: "w-full flex flex-col justify-between gap-2", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("div", { className: "flex flex-row justify-between items-center", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("p", { className: "text-md font-bold text-text-950", children: header }),
+              hasProgress && /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
+                Button_default,
+                {
+                  variant: "outline",
+                  size: "extra-small",
+                  onClick: () => onClickButton?.(valueButton),
+                  children: "Ver Aula"
+                }
+              )
+            ] }),
+            /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("div", { className: "w-full", children: hasProgress ? /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(ProgressBar_default, { value: progress, label: `${progress}% corretas` }) : /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("p", { className: "text-xs text-text-600", children: description }) })
+          ] }),
+          !hasProgress && /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
+            import_phosphor_react12.CaretRight,
+            {
+              className: "size-4.5",
+              "data-testid": "caret-icon",
+              onClick: () => onClickButton?.(valueButton)
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+var CardResults = (0, import_react14.forwardRef)(
+  ({
+    header,
+    correct_answers,
+    incorrect_answers,
+    icon,
+    direction = "col",
+    color = "#B7DFFF",
+    className,
+    ...props
+  }, ref) => {
+    const isRow = direction == "row";
+    return /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(
+      "div",
+      {
+        ref,
+        className: `
+          w-full flex border border-border-50 rounded-xl min-h-20 flex-row items-center pr-4
+          ${className}
+        `,
+        ...props,
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
+            "div",
+            {
+              className: `
+              flex justify-center items-center [&>svg]:size-8 text-text-950 min-w-20 max-w-20 h-full rounded-l-xl
+            `,
+              style: {
+                backgroundColor: color
+              },
+              children: icon
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(
+            "div",
+            {
+              className: `
+            p-4 flex justify-between w-full h-full
+            ${isRow ? "flex-row items-center" : "flex-col"}
+          `,
+              children: [
+                /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("p", { className: "text-xs font-bold text-text-950", children: header }),
+                /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("span", { className: "flex flex-row gap-1 items-center", children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(
+                    Badge_default,
+                    {
+                      action: "success",
+                      variant: "solid",
+                      size: "medium",
+                      iconLeft: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_phosphor_react12.CheckCircle, {}),
+                      children: [
+                        correct_answers,
+                        " Corretas"
+                      ]
+                    }
+                  ),
+                  /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(
+                    Badge_default,
+                    {
+                      action: "error",
+                      variant: "solid",
+                      size: "medium",
+                      iconLeft: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_phosphor_react12.XCircle, {}),
+                      children: [
+                        incorrect_answers,
+                        " Incorretas"
+                      ]
+                    }
+                  )
+                ] })
+              ]
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_phosphor_react12.CaretRight, { className: "min-w-6 min-h-6" })
+        ]
+      }
+    );
+  }
+);
+var CardStatus = (0, import_react14.forwardRef)(
+  ({ header, className, status, ...props }, ref) => {
+    return /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(
+      "div",
+      {
+        ref,
+        className: `
+          w-full flex border border-border-50 rounded-xl min-h-20 flex-row items-center pr-4
+          ${className}
+        `,
+        ...props,
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(
+            "div",
+            {
+              className: `
+            p-4 flex justify-between w-full h-full flex-row items-center
+          `,
+              children: [
+                /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("p", { className: "text-xs font-bold text-text-950", children: header }),
+                /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("span", { className: "flex flex-row gap-1 items-center", children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
+                    Badge_default,
+                    {
+                      action: status == "correct" ? "success" : "error",
+                      variant: "solid",
+                      size: "medium",
+                      iconLeft: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_phosphor_react12.CheckCircle, {}),
+                      children: status == "correct" ? "Correta" : "Incorreta"
+                    }
+                  ),
+                  /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("p", { className: "text-sm text-text-800", children: "Respondida" })
+                ] })
+              ]
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_phosphor_react12.CaretRight, { className: "min-w-6 min-h-6" })
+        ]
+      }
+    );
+  }
+);
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   Alert,
   Badge,
   Button,
   Calendar,
+  CardActivesResults,
+  CardPerformance,
+  CardProgress,
+  CardQuestions,
+  CardResults,
+  CardStatus,
+  CardTopic,
   CheckBox,
   Chips,
   Divider,
@@ -3542,6 +4264,7 @@ var Menu_default = Menu;
   SelectTrigger,
   SelectValue,
   SelectionButton,
+  Stepper,
   Table,
   Text,
   TextArea,