analytica-frontend-lib 1.0.84 → 1.0.85

package/dist/index.js

@@ -112,6 +112,13 @@ __export(src_exports, {
 });
 module.exports = __toCommonJS(src_exports);
 
+// src/utils/utils.ts
+var import_clsx = require("clsx");
+var import_tailwind_merge = require("tailwind-merge");
+function cn(...inputs) {
+  return (0, import_tailwind_merge.twMerge)((0, import_clsx.clsx)(inputs));
+}
+
 // src/components/Text/Text.tsx
 var import_jsx_runtime = require("react/jsx-runtime");
 var Text = ({
@@ -155,7 +162,7 @@ var Text = ({
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
     Component,
     {
-      className: `${baseClasses} ${sizeClasses} ${weightClasses} ${color} ${className}`,
+      className: cn(baseClasses, sizeClasses, weightClasses, color, className),
       ...props,
       children
     }
@@ -207,7 +214,7 @@ var Button = ({
   return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
     "button",
     {
-      className: `${baseClasses} ${variantClasses} ${sizeClasses} ${className}`,
+      className: cn(baseClasses, variantClasses, sizeClasses, className),
       disabled,
       type,
       ...props,
@@ -288,7 +295,7 @@ var Badge = ({
     return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
       "div",
       {
-        className: `${baseClasses} ${variantClasses} ${sizeClasses} ${className}`,
+        className: cn(baseClasses, variantClasses, sizeClasses, className),
         ...props,
         children: [
           /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_phosphor_react.Bell, { size: 24, className: "text-current", "aria-hidden": "true" }),
@@ -306,12 +313,12 @@ var Badge = ({
   return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
     "div",
     {
-      className: `${baseClasses} ${variantClasses} ${sizeClasses} ${className}`,
+      className: cn(baseClasses, variantClasses, sizeClasses, className),
       ...props,
       children: [
-        iconLeft && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: `${baseClassesIcon} ${sizeClassesIcon}`, children: iconLeft }),
+        iconLeft && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: cn(baseClassesIcon, sizeClassesIcon), children: iconLeft }),
         children,
-        iconRight && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: `${baseClassesIcon} ${sizeClassesIcon}`, children: iconRight })
+        iconRight && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: cn(baseClassesIcon, sizeClassesIcon), children: iconRight })
       ]
     }
   );
@@ -364,37 +371,30 @@ var Alert = ({
   const variantColor = COLOR_CLASSES[action];
   const variantIcon = ICONS[action];
   const hasHeading = Boolean(title);
-  return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
-    "div",
-    {
-      className: `${baseClasses} ${variantClasses} ${className ?? ""}`,
-      ...props,
-      children: [
-        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: `mt-0.5 ${variantColor}`, children: variantIcon }),
-        /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { children: [
-          hasHeading && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
-            Text_default,
-            {
-              size: "md",
-              weight: "medium",
-              color: variantColor,
-              className: "mb-0.5",
-              children: title
-            }
-          ),
-          /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
-            Text_default,
-            {
-              size: hasHeading ? "sm" : "md",
-              weight: "normal",
-              color: !hasHeading ? variantColor : "text-text-700",
-              children: description
-            }
-          )
-        ] })
-      ]
-    }
-  );
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: cn(baseClasses, variantClasses, className), ...props, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: cn("mt-0.5", variantColor), children: variantIcon }),
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { children: [
+      hasHeading && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+        Text_default,
+        {
+          size: "md",
+          weight: "medium",
+          color: variantColor,
+          className: "mb-0.5",
+          children: title
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+        Text_default,
+        {
+          size: hasHeading ? "sm" : "md",
+          weight: "normal",
+          color: !hasHeading ? variantColor : "text-text-700",
+          children: description
+        }
+      )
+    ] })
+  ] });
 };
 var Alert_default = Alert;
 
@@ -438,7 +438,7 @@ var IconButton = (0, import_react.forwardRef)(
       {
         ref,
         type: "button",
-        className: `${allClasses} ${className}`,
+        className: cn(allClasses, className),
         disabled,
         "aria-pressed": active,
         "aria-label": ariaLabel,
@@ -484,7 +484,7 @@ var IconRoundedButton = ({
     "button",
     {
       type: "button",
-      className: `${baseClasses} ${className}`,
+      className: cn(baseClasses, className),
       disabled,
       ...props,
       children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: "flex items-center justify-center w-5 h-5", children: icon })
@@ -528,7 +528,7 @@ var NavButton = (0, import_react2.forwardRef)(
       {
         ref,
         type: "button",
-        className: `${allClasses} ${className}`,
+        className: cn(allClasses, className),
         disabled,
         "aria-pressed": selected,
         ...props,
@@ -583,7 +583,7 @@ var SelectionButton = (0, import_react3.forwardRef)(
       {
         ref,
         type: "button",
-        className: `${allClasses} ${className}`,
+        className: cn(allClasses, className),
         disabled,
         "aria-pressed": selected,
         ...props,
@@ -606,7 +606,7 @@ var Table = (0, import_react4.forwardRef)(
     "table",
     {
       ref,
-      className: `w-full caption-bottom text-sm ${className ?? ""}`,
+      className: cn("w-full caption-bottom text-sm", className),
       ...props,
       children: [
         /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("caption", { className: "sr-only", children: "My Table" }),
@@ -620,7 +620,7 @@ var TableHeader = (0, import_react4.forwardRef)(({ className, ...props }, ref) =
   "thead",
   {
     ref,
-    className: `[&_tr:first-child]:border-0 ${className}`,
+    className: cn("[&_tr:first-child]:border-0", className),
     ...props
   }
 ));
@@ -629,7 +629,10 @@ var TableBody = (0, import_react4.forwardRef)(({ className, ...props }, ref) =>
   "tbody",
   {
     ref,
-    className: `[&_tr:last-child]:border-0 border-t border-border-200 ${className}`,
+    className: cn(
+      "[&_tr:last-child]:border-0 border-t border-border-200",
+      className
+    ),
     ...props
   }
 ));
@@ -638,7 +641,10 @@ var TableFooter = (0, import_react4.forwardRef)(({ className, ...props }, ref) =
   "tfoot",
   {
     ref,
-    className: `border-t bg-background-50 border-border-200 font-medium [&>tr]:last:border-b-0 px-6 py-3.5 ${className}`,
+    className: cn(
+      "border-t bg-background-50 border-border-200 font-medium [&>tr]:last:border-b-0 px-6 py-3.5",
+      className
+    ),
     ...props
   }
 ));
@@ -655,12 +661,12 @@ var TableRow = (0, import_react4.forwardRef)(
       "tr",
       {
         ref,
-        className: `
-        transition-colors
-        ${state !== "disabled" ? "hover:bg-muted/50" : ""}
-        ${VARIANT_STATES_ROW[state]}
-        ${className}
-      `,
+        className: cn(
+          "transition-colors",
+          state !== "disabled" ? "hover:bg-muted/50" : "",
+          VARIANT_STATES_ROW[state],
+          className
+        ),
         "aria-disabled": state === "disabled",
         ...props
       }
@@ -672,7 +678,10 @@ var TableHead = (0, import_react4.forwardRef)(({ className, ...props }, ref) =>
   "th",
   {
     ref,
-    className: `h-10 px-6 py-3.5 bg-bg-secondary bg-muted/50 text-left align-middle font-bold text-text-800 [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px] ${className}`,
+    className: cn(
+      "h-10 px-6 py-3.5 bg-muted/50 text-left align-middle font-bold text-text-800 [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]",
+      className
+    ),
     ...props
   }
 ));
@@ -681,7 +690,10 @@ var TableCell = (0, import_react4.forwardRef)(({ className, ...props }, ref) =>
   "td",
   {
     ref,
-    className: `p-2 align-middle [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px] text-md text-text-800 px-6 py-3.5 ${className}`,
+    className: cn(
+      "p-2 align-middle [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px] text-md text-text-800 px-6 py-3.5",
+      className
+    ),
     ...props
   }
 ));
@@ -690,7 +702,10 @@ var TableCaption = (0, import_react4.forwardRef)(({ className, ...props }, ref)
   "caption",
   {
     ref,
-    className: `border-t border-border-200 text-sm text-text-800 px-6 py-3.5 ${className}`,
+    className: cn(
+      "border-t border-border-200 text-sm text-text-800 px-6 py-3.5",
+      className
+    ),
     ...props
   }
 ));
@@ -792,7 +807,13 @@ var CheckBox = (0, import_react5.forwardRef)(
     const checkVariant = checked || indeterminate ? "checked" : "unchecked";
     const stylingClasses = STATE_CLASSES[currentState][checkVariant];
     const borderWidthClass = state === "focused" || state === "hovered" && size === "large" ? "border-[3px]" : sizeClasses.borderWidth;
-    const checkboxClasses = `${BASE_CHECKBOX_CLASSES} ${sizeClasses.checkbox} ${borderWidthClass} ${stylingClasses} ${className}`;
+    const checkboxClasses = cn(
+      BASE_CHECKBOX_CLASSES,
+      sizeClasses.checkbox,
+      borderWidthClass,
+      stylingClasses,
+      className
+    );
     const renderIcon = () => {
       if (indeterminate) {
         return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
@@ -820,7 +841,11 @@ var CheckBox = (0, import_react5.forwardRef)(
       /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
         "div",
         {
-          className: `flex flex-row items-center ${sizeClasses.spacing} ${disabled ? "opacity-40" : ""}`,
+          className: cn(
+            "flex flex-row items-center",
+            sizeClasses.spacing,
+            disabled ? "opacity-40" : ""
+          ),
           children: [
             /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
               "input",
@@ -839,7 +864,10 @@ var CheckBox = (0, import_react5.forwardRef)(
             label && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
               "div",
               {
-                className: `flex flex-row items-center ${sizeClasses.labelHeight}`,
+                className: cn(
+                  "flex flex-row items-center",
+                  sizeClasses.labelHeight
+                ),
                 children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
                   Text_default,
                   {
@@ -847,7 +875,10 @@ var CheckBox = (0, import_react5.forwardRef)(
                     htmlFor: inputId,
                     size: sizeClasses.textSize,
                     weight: "normal",
-                    className: `cursor-pointer select-none leading-[150%] flex items-center font-roboto ${labelClassName}`,
+                    className: cn(
+                      "cursor-pointer select-none leading-[150%] flex items-center font-roboto",
+                      labelClassName
+                    ),
                     children: label
                   }
                 )
@@ -997,8 +1028,19 @@ var Radio = (0, import_react6.forwardRef)(
       return sizeClasses.borderWidth;
     };
     const borderWidthClass = getBorderWidth();
-    const radioClasses = `${BASE_RADIO_CLASSES} ${actualRadioSize} ${borderWidthClass} ${stylingClasses} ${className}`;
-    const dotClasses = `${actualDotSize} rounded-full ${DOT_CLASSES[currentState]} transition-all duration-200`;
+    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 = () => {
@@ -1017,7 +1059,11 @@ var Radio = (0, import_react6.forwardRef)(
       /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
         "div",
         {
-          className: `flex flex-row items-center ${isWrapperNeeded ? `p-1 border-2 ${wrapperBorderColor} rounded-lg gap-1.5` : sizeClasses.spacing} ${disabled ? "opacity-40" : ""}`,
+          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_runtime11.jsx)(
               "input",
@@ -1074,7 +1120,11 @@ var Radio = (0, import_react6.forwardRef)(
             label && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
               "div",
               {
-                className: `flex flex-row items-center ${sizeClasses.labelHeight} flex-1 min-w-0`,
+                className: cn(
+                  "flex flex-row items-center",
+                  sizeClasses.labelHeight,
+                  "flex-1 min-w-0"
+                ),
                 children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
                   Text_default,
                   {
@@ -1082,7 +1132,11 @@ var Radio = (0, import_react6.forwardRef)(
                     htmlFor: inputId,
                     size: sizeClasses.textSize,
                     weight: "normal",
-                    className: `${getCursorClass()} select-none leading-normal flex items-center font-roboto truncate ${labelClassName}`,
+                    className: cn(
+                      getCursorClass(),
+                      "select-none leading-normal flex items-center font-roboto truncate",
+                      labelClassName
+                    ),
                     color: getTextColor(),
                     children: label
                   }
@@ -1330,7 +1384,14 @@ var TextArea = (0, import_react7.forwardRef)(
     }
     const sizeClasses = SIZE_CLASSES5[size];
     const stateClasses = STATE_CLASSES3[currentState];
-    const textareaClasses = `${BASE_TEXTAREA_CLASSES} ${sizeClasses.textarea} ${stateClasses.base} ${stateClasses.hover} ${stateClasses.focus} ${className}`;
+    const textareaClasses = cn(
+      BASE_TEXTAREA_CLASSES,
+      sizeClasses.textarea,
+      stateClasses.base,
+      stateClasses.hover,
+      stateClasses.focus,
+      className
+    );
     return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: `flex flex-col`, children: [
       label && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
         Text_default,
@@ -1340,7 +1401,7 @@ var TextArea = (0, import_react7.forwardRef)(
           size: sizeClasses.textSize,
           weight: "medium",
           color: "text-text-950",
-          className: `mb-1.5 ${labelClassName}`,
+          className: cn("mb-1.5", labelClassName),
           children: label
         }
       ),
@@ -1418,7 +1479,12 @@ var Toast = ({
       role: "alert",
       "aria-live": "assertive",
       "aria-atomic": "true",
-      className: `${baseClasses} ${positionClasses[position]} ${variantClasses} ${className}`,
+      className: cn(
+        baseClasses,
+        positionClasses[position],
+        variantClasses,
+        className
+      ),
       ...props,
       children: [
         /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: "flex flex-row items-start gap-3", children: [
@@ -1496,7 +1562,7 @@ var Divider = ({
   return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
     "hr",
     {
-      className: `${baseClasses} ${orientationClasses[orientation]} ${className}`,
+      className: cn(baseClasses, orientationClasses[orientation], className),
       "aria-orientation": orientation,
       ...props
     }
@@ -1687,7 +1753,7 @@ var Chips = ({
   return /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(
     "button",
     {
-      className: `${baseClasses} ${stateClasses} ${className}`,
+      className: cn(baseClasses, stateClasses, className),
       disabled,
       type,
       ...props,
@@ -1816,7 +1882,10 @@ var renderStackedHitCountDisplay = (showHitCount, showPercentage, clampedValue,
   return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
     "div",
     {
-      className: `text-xs font-medium leading-[14px] text-right ${percentageClassName}`,
+      className: cn(
+        "text-xs font-medium leading-[14px] text-right",
+        percentageClassName
+      ),
       children: displayPriority.type === "hitCount" ? /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(import_jsx_runtime18.Fragment, { children: [
         /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("span", { className: "text-success-200", children: Math.round(clampedValue) }),
         /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("span", { className: "text-text-600", children: [
@@ -1841,7 +1910,11 @@ var ProgressBarBase = ({
 }) => /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(
   "div",
   {
-    className: `${containerClassName} ${variantClasses.background} overflow-hidden relative`,
+    className: cn(
+      containerClassName,
+      variantClasses.background,
+      "overflow-hidden relative"
+    ),
     children: [
       /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
         "progress",
@@ -1855,7 +1928,11 @@ var ProgressBarBase = ({
       /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
         "div",
         {
-          className: `${fillClassName} ${variantClasses.fill} transition-all duration-300 ease-out`,
+          className: cn(
+            fillClassName,
+            variantClasses.fill,
+            "transition-all duration-300 ease-out"
+          ),
           style: { width: `${percentage}%` }
         }
       )
@@ -1877,7 +1954,12 @@ var StackedLayout = ({
 }) => /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(
   "div",
   {
-    className: `flex flex-col items-start gap-2 ${dimensions.width} ${dimensions.height} ${className}`,
+    className: cn(
+      "flex flex-col items-start gap-2",
+      dimensions.width,
+      dimensions.height,
+      className
+    ),
     children: [
       shouldShowHeader(label, showPercentage, showHitCount) && /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { className: "flex flex-row justify-between items-center w-full h-[19px]", children: [
         label && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
@@ -1886,7 +1968,7 @@ var StackedLayout = ({
             as: "div",
             size: "md",
             weight: "medium",
-            className: `text-text-600 leading-[19px] ${labelClassName}`,
+            className: cn("text-text-600 leading-[19px]", labelClassName),
             children: label
           }
         ),
@@ -1944,7 +2026,12 @@ var CompactLayout = ({
   return /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(
     "div",
     {
-      className: `flex flex-col items-start gap-1 ${dimensions.width} ${dimensions.height} ${className}`,
+      className: cn(
+        "flex flex-col items-start gap-1",
+        dimensions.width,
+        dimensions.height,
+        className
+      ),
       children: [
         shouldShowHeader(label, showPercentage, showHitCount) && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
           Text_default,
@@ -1953,7 +2040,7 @@ var CompactLayout = ({
             size: "sm",
             weight: "medium",
             color,
-            className: `leading-4 w-full ${compactClassName}`,
+            className: cn("leading-4 w-full", compactClassName),
             children: content
           }
         ),
@@ -1993,7 +2080,7 @@ var DefaultLayout = ({
     label,
     showPercentage
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { className: `flex ${sizeClasses.layout} ${gapClass} ${className}`, children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { className: cn("flex", sizeClasses.layout, gapClass, className), children: [
     displayConfig.showHeader && /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { className: "flex flex-row items-center justify-between w-full", children: [
       label && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
         Text_default,
@@ -2001,7 +2088,10 @@ var DefaultLayout = ({
           as: "div",
           size: "xs",
           weight: "medium",
-          className: `text-text-950 leading-none tracking-normal text-center ${labelClassName}`,
+          className: cn(
+            "text-text-950 leading-none tracking-normal text-center",
+            labelClassName
+          ),
           children: label
         }
       ),
@@ -2010,7 +2100,10 @@ var DefaultLayout = ({
         {
           size: "xs",
           weight: "medium",
-          className: `text-text-950 leading-none tracking-normal text-center ${percentageClassName}`,
+          className: cn(
+            "text-text-950 leading-none tracking-normal text-center",
+            percentageClassName
+          ),
           children: [
             Math.round(percentage),
             "%"
@@ -2026,8 +2119,16 @@ var DefaultLayout = ({
         percentage,
         label,
         variantClasses,
-        containerClassName: `${progressBarClass} ${sizeClasses.container} ${sizeClasses.borderRadius}`,
-        fillClassName: `${sizeClasses.bar} ${sizeClasses.borderRadius} shadow-hard-shadow-3`
+        containerClassName: cn(
+          progressBarClass,
+          sizeClasses.container,
+          sizeClasses.borderRadius
+        ),
+        fillClassName: cn(
+          sizeClasses.bar,
+          sizeClasses.borderRadius,
+          "shadow-hard-shadow-3"
+        )
       }
     ),
     displayConfig.showPercentage && /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(
@@ -2035,7 +2136,10 @@ var DefaultLayout = ({
       {
         size: "xs",
         weight: "medium",
-        className: `text-text-950 leading-none tracking-normal text-center flex-none ${percentageClassName}`,
+        className: cn(
+          "text-text-950 leading-none tracking-normal text-center flex-none",
+          percentageClassName
+        ),
         children: [
           Math.round(percentage),
           "%"
@@ -2048,7 +2152,10 @@ var DefaultLayout = ({
         as: "div",
         size: "xs",
         weight: "medium",
-        className: `text-text-950 leading-none tracking-normal text-center flex-none ${labelClassName}`,
+        className: cn(
+          "text-text-950 leading-none tracking-normal text-center flex-none",
+          labelClassName
+        ),
         children: label
       }
     )
@@ -2221,7 +2328,12 @@ var ProgressCircle = ({
   return /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(
     "div",
     {
-      className: `relative flex flex-col items-center justify-center ${sizeClasses.container} rounded-lg ${className}`,
+      className: cn(
+        "relative flex flex-col items-center justify-center",
+        sizeClasses.container,
+        "rounded-lg",
+        className
+      ),
       children: [
         /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(
           "svg",
@@ -2240,7 +2352,7 @@ var ProgressCircle = ({
                   r: radius,
                   fill: "none",
                   strokeWidth: sizeClasses.strokeWidth,
-                  className: `${variantClasses.background} rounded-lg`
+                  className: cn(variantClasses.background, "rounded-lg")
                 }
               ),
               /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
@@ -2254,7 +2366,10 @@ var ProgressCircle = ({
                   strokeLinecap: "round",
                   strokeDasharray: circumference,
                   strokeDashoffset,
-                  className: `${variantClasses.fill} transition-all duration-500 ease-out shadow-soft-shadow-3 rounded-lg`
+                  className: cn(
+                    variantClasses.fill,
+                    "transition-all duration-500 ease-out shadow-soft-shadow-3 rounded-lg"
+                  )
                 }
               )
             ]
@@ -2272,14 +2387,22 @@ var ProgressCircle = ({
         /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(
           "div",
           {
-            className: `relative z-10 flex flex-col items-center justify-center ${sizeClasses.spacing} ${sizeClasses.contentWidth}`,
+            className: cn(
+              "relative z-10 flex flex-col items-center justify-center",
+              sizeClasses.spacing,
+              sizeClasses.contentWidth
+            ),
             children: [
               showPercentage && /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(
                 Text_default,
                 {
                   size: sizeClasses.textSize,
                   weight: sizeClasses.textWeight,
-                  className: `text-center w-full ${variantClasses.textColor} ${percentageClassName}`,
+                  className: cn(
+                    "text-center w-full",
+                    variantClasses.textColor,
+                    percentageClassName
+                  ),
                   children: [
                     Math.round(percentage),
                     "%"
@@ -2292,7 +2415,11 @@ var ProgressCircle = ({
                   as: "span",
                   size: sizeClasses.labelSize,
                   weight: sizeClasses.labelWeight,
-                  className: `${variantClasses.labelColor} text-center uppercase tracking-wide truncate w-full ${size === "small" ? "text-[8px] leading-[9px]" : ""} ${labelClassName}`,
+                  className: cn(
+                    variantClasses.labelColor,
+                    "text-center uppercase tracking-wide truncate w-full",
+                    labelClassName
+                  ),
                   children: label
                 }
               )
@@ -2491,7 +2618,10 @@ var Step = ({
                       size: sizeClasses.indicatorTextSize,
                       weight: "medium",
                       color: "",
-                      className: `${stateClasses.indicatorText} leading-none text-2xs sm:text-xs`,
+                      className: cn(
+                        stateClasses.indicatorText,
+                        "leading-none text-2xs sm:text-xs"
+                      ),
                       children: stepNumber
                     }
                   )
@@ -2503,13 +2633,10 @@ var Step = ({
                   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
-          `,
+                  className: cn(
+                    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
                 }
               )
@@ -2555,7 +2682,11 @@ var Stepper = ({
   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`,
+      className: cn(
+        "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)(
@@ -2570,14 +2701,12 @@ var Stepper = ({
         /* @__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
-        `,
+            className: cn(
+              "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) => {
@@ -2784,7 +2913,7 @@ var Calendar = ({
     onDateSelect?.(day.date);
   };
   if (variant === "navigation") {
-    return /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { className: `bg-background rounded-xl pt-6 ${className}`, children: [
+    return /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { className: cn("bg-background rounded-xl pt-6", 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)(
@@ -2944,7 +3073,7 @@ var Calendar = ({
       }) })
     ] });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { className: `bg-background rounded-xl p-4 ${className}`, children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { className: cn("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)(
@@ -3159,7 +3288,12 @@ var Modal = ({
   const sizeClasses = SIZE_CLASSES10[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 = `${baseClasses} ${sizeClasses} ${dialogResetClasses} ${className}`;
+  const modalClasses = cn(
+    baseClasses,
+    sizeClasses,
+    dialogResetClasses,
+    className
+  );
   return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
     "div",
     {
@@ -3293,21 +3427,28 @@ var CardActivitiesResults = (0, import_react11.forwardRef)(
       "div",
       {
         ref,
-        className: `w-full flex flex-col border border-border-50  bg-background rounded-xl ${className}`,
+        className: cn(
+          "w-full flex flex-col border border-border-50  bg-background rounded-xl",
+          className
+        ),
         ...props,
         children: [
           /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(
             "div",
             {
-              className: `
-          flex flex-col gap-1 items-center justify-center p-4 
-          ${actionCardClasses}
-          ${extended ? "rounded-t-xl" : "rounded-xl"}`,
+              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_runtime23.jsx)(
                   "span",
                   {
-                    className: `size-7.5 rounded-full flex items-center justify-center ${actionIconClasses}`,
+                    className: cn(
+                      "size-7.5 rounded-full flex items-center justify-center",
+                      actionIconClasses
+                    ),
                     children: icon
                   }
                 ),
@@ -3320,7 +3461,13 @@ var CardActivitiesResults = (0, import_react11.forwardRef)(
                     children: title
                   }
                 ),
-                /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("p", { className: `text-lg font-bold truncate ${actionSubTitleClasses}`, children: subTitle })
+                /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+                  "p",
+                  {
+                    className: cn("text-lg font-bold truncate", actionSubTitleClasses),
+                    children: subTitle
+                  }
+                )
               ]
             }
           ),
@@ -3328,7 +3475,10 @@ var CardActivitiesResults = (0, import_react11.forwardRef)(
             /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
               "p",
               {
-                className: `text-2xs font-medium uppercase truncate ${actionHeaderClasses}`,
+                className: cn(
+                  "text-2xs font-medium uppercase truncate",
+                  actionHeaderClasses
+                ),
                 children: header
               }
             ),
@@ -3358,7 +3508,7 @@ var CardQuestions = (0, import_react11.forwardRef)(
         layout: "horizontal",
         padding: "medium",
         minHeight: "medium",
-        className: `justify-between gap-4 ${className}`,
+        className: cn("justify-between gap-4", className),
         ...props,
         children: [
           /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("section", { className: "flex flex-col gap-1 flex-1 min-w-0", children: [
@@ -3436,7 +3586,9 @@ var CardProgress = (0, import_react11.forwardRef)(
             {
               size: "xs",
               weight: "medium",
-              className: `text-text-950 leading-none tracking-normal text-center flex-none`,
+              className: cn(
+                "text-text-950 leading-none tracking-normal text-center flex-none"
+              ),
               children: [
                 Math.round(progress),
                 "%"
@@ -3455,17 +3607,17 @@ var CardProgress = (0, import_react11.forwardRef)(
         padding: "none",
         minHeight: "medium",
         cursor: "pointer",
-        className: `${isHorizontal ? "h-20" : ""} ${className}`,
+        className: cn(isHorizontal ? "h-20" : "", className),
         ...props,
         children: [
           /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
             "div",
             {
-              className: `
-            flex justify-center items-center [&>svg]:size-6 text-text-950
-            ${isHorizontal ? "min-w-[80px] min-h-[80px] rounded-l-xl" : "min-h-[50px] w-full rounded-t-xl"}
-            ${!color.startsWith("#") ? `bg-${color}` : ""}
-          `,
+              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("#") ? `bg-${color}` : ""
+              ),
               style: color.startsWith("#") ? { backgroundColor: color } : void 0,
               "data-testid": "icon-container",
               children: icon
@@ -3474,10 +3626,10 @@ var CardProgress = (0, import_react11.forwardRef)(
           /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(
             "div",
             {
-              className: `
-            p-4 flex flex-col justify-between w-full h-full
-            ${!isHorizontal && "gap-4"}
-          `,
+              className: cn(
+                "p-4 flex flex-col justify-between w-full h-full",
+                !isHorizontal && "gap-4"
+              ),
               children: [
                 /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(Text_default, { size: "sm", weight: "bold", className: "text-text-950 truncate", children: header }),
                 contentComponent[direction]
@@ -3507,7 +3659,7 @@ var CardTopic = (0, import_react11.forwardRef)(
         padding: "small",
         minHeight: "medium",
         cursor: "pointer",
-        className: `justify-center gap-2  py-2 px-4 ${className}`,
+        className: cn("justify-center gap-2  py-2 px-4", className),
         ...props,
         children: [
           subHead && /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("span", { className: "text-text-600 text-2xs flex flex-row gap-1", children: subHead.map((text, index) => /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(import_react11.Fragment, { children: [
@@ -3530,7 +3682,9 @@ var CardTopic = (0, import_react11.forwardRef)(
               {
                 size: "xs",
                 weight: "medium",
-                className: `text-text-950 leading-none tracking-normal text-center flex-none`,
+                className: cn(
+                  "text-text-950 leading-none tracking-normal text-center flex-none"
+                ),
                 children: [
                   Math.round(progress),
                   "%"
@@ -3564,7 +3718,10 @@ var CardPerformance = (0, import_react11.forwardRef)(
         layout: "horizontal",
         padding: "medium",
         minHeight: "none",
-        className: `justify-between gap-2 ${actionVariant == "caret" ? "cursor-pointer" : ""} ${className}`,
+        className: cn(
+          actionVariant == "caret" ? "cursor-pointer" : "",
+          className
+        ),
         onClick: () => actionVariant == "caret" && onClickButton?.(valueButton),
         ...props,
         children: [
@@ -3622,15 +3779,15 @@ var CardResults = (0, import_react11.forwardRef)(
         layout: "horizontal",
         padding: "none",
         minHeight: "medium",
-        className: `items-center cursor-pointer pr-4 ${className}`,
+        className: cn("items-center cursor-pointer pr-4", className),
         ...props,
         children: [
           /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
             "div",
             {
-              className: `
-              flex justify-center items-center [&>svg]:size-8 text-text-950 min-w-20 max-w-20 min-h-20 h-full rounded-l-xl
-            `,
+              className: cn(
+                "flex justify-center items-center [&>svg]:size-8 text-text-950 min-w-20 max-w-20 min-h-20 h-full rounded-l-xl"
+              ),
               style: {
                 backgroundColor: color
               },
@@ -3640,10 +3797,10 @@ var CardResults = (0, import_react11.forwardRef)(
           /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(
             "div",
             {
-              className: `
-            p-4 flex justify-between w-full h-full
-            ${isRow ? "flex-row items-center gap-2" : "flex-col"}
-          `,
+              className: cn(
+                "p-4 flex justify-between w-full h-full",
+                isRow ? "flex-row items-center gap-2" : "flex-col"
+              ),
               children: [
                 /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("p", { className: "text-sm font-bold text-text-950 truncate flex-1 min-w-0", children: header }),
                 /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("span", { className: "flex flex-row gap-1 items-center", children: [
@@ -3692,7 +3849,7 @@ var CardStatus = (0, import_react11.forwardRef)(
         layout: "horizontal",
         padding: "medium",
         minHeight: "medium",
-        className: `items-center cursor-pointer ${className}`,
+        className: cn("items-center cursor-pointer", className),
         ...props,
         children: /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { className: "flex justify-between w-full h-full flex-row items-center gap-2", children: [
           /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("p", { className: "text-sm font-bold text-text-950 truncate flex-1 min-w-0", children: header }),
@@ -3724,7 +3881,10 @@ var CardSettings = (0, import_react11.forwardRef)(
         layout: "horizontal",
         padding: "small",
         minHeight: "none",
-        className: `border-none items-center gap-2 text-text-700 ${className}`,
+        className: cn(
+          "border-none items-center gap-2 text-text-700",
+          className
+        ),
         ...props,
         children: [
           /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("span", { className: "[&>svg]:size-6", children: icon }),
@@ -3744,15 +3904,19 @@ var CardSupport = (0, import_react11.forwardRef)(
         layout: "horizontal",
         padding: "medium",
         minHeight: "none",
-        className: `border-none items-center gap-2 text-text-700 ${className}`,
+        className: cn(
+          "border-none items-center gap-2 text-text-700",
+          className
+        ),
         ...props,
         children: [
           /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(
             "div",
             {
-              className: `
-              w-full flex ${direction == "col" ? "flex-col" : "flex-row items-center"}  gap-2
-          `,
+              className: cn(
+                "w-full flex",
+                direction == "col" ? "flex-col" : "flex-row items-center"
+              ),
               children: [
                 /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("span", { className: "w-full min-w-0", children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("p", { className: "text-sm text-text-950 font-bold truncate", children: header }) }),
                 /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("span", { className: "flex flex-row gap-1", children })
@@ -3787,7 +3951,7 @@ var CardForum = (0, import_react11.forwardRef)(
         padding: "medium",
         minHeight: "none",
         variant: "minimal",
-        className: `w-auto h-auto gap-3 ${className}`,
+        className: cn("w-auto h-auto gap-3", className),
         ...props,
         children: [
           /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
@@ -3920,7 +4084,7 @@ var CardAudio = (0, import_react11.forwardRef)(
         layout: "horizontal",
         padding: "medium",
         minHeight: "none",
-        className: `w-auto h-14 items-center gap-2 ${className}`,
+        className: cn("w-auto h-14 items-center gap-2", className),
         ...props,
         children: [
           /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
@@ -4089,7 +4253,10 @@ var CardSimulado = (0, import_react11.forwardRef)(
         padding: "medium",
         minHeight: "none",
         cursor: "pointer",
-        className: `${backgroundClass} hover:shadow-soft-shadow-2 transition-shadow duration-200 ${className}`,
+        className: cn(
+          `${backgroundClass} hover:shadow-soft-shadow-2 transition-shadow duration-200`,
+          className
+        ),
         ...props,
         children: /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { className: "flex justify-between items-center w-full gap-4", children: [
           /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { className: "flex flex-col gap-1 flex-1 min-w-0", children: [
@@ -4152,7 +4319,9 @@ var CardTest = (0, import_react11.forwardRef)(
         {
           ref,
           type: "button",
-          className: `${baseClasses} ${interactiveClasses} ${selectedClasses} ${className}`.trim(),
+          className: cn(
+            `${baseClasses} ${interactiveClasses} ${selectedClasses} ${className}`.trim()
+          ),
           onClick: handleClick,
           onKeyDown: handleKeyDown,
           "aria-pressed": selected,
@@ -4196,7 +4365,7 @@ var CardTest = (0, import_react11.forwardRef)(
       "div",
       {
         ref,
-        className: `${baseClasses} ${className}`.trim(),
+        className: cn(`${baseClasses} ${className}`.trim()),
         ...props,
         children: /* @__PURE__ */ (0, import_jsx_runtime23.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_runtime23.jsx)(
@@ -4261,16 +4430,16 @@ var CardSimulationHistory = (0, import_react11.forwardRef)(({ data, onSimulation
     "div",
     {
       ref,
-      className: `w-full max-w-[992px] h-auto ${className}`,
+      className: cn("w-full max-w-[992px] h-auto", className),
       ...props,
       children: /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { className: "flex flex-col gap-0", children: [
         data.map((section, sectionIndex) => /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("div", { className: "flex flex-col", children: /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(
           "div",
           {
-            className: `
-                  flex flex-row justify-center items-start px-4 py-6 gap-2 w-full bg-white
-                  ${sectionIndex === 0 ? "rounded-t-3xl" : ""}
-                `,
+            className: cn(
+              "flex flex-row justify-center items-start px-4 py-6 gap-2 w-full bg-white",
+              sectionIndex === 0 ? "rounded-t-3xl" : ""
+            ),
             children: [
               /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
                 Text_default,
@@ -4290,10 +4459,10 @@ var CardSimulationHistory = (0, import_react11.forwardRef)(({ data, onSimulation
                     padding: "medium",
                     minHeight: "none",
                     cursor: "pointer",
-                    className: `
-                          ${typeStyles.background} rounded-xl hover:shadow-soft-shadow-2 
-                          transition-shadow duration-200 h-auto min-h-[61px]
-                        `,
+                    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_runtime23.jsxs)("div", { className: "flex justify-between items-center w-full gap-2", children: [
                       /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { className: "flex flex-col gap-2 flex-1 min-w-0", children: [
@@ -4373,7 +4542,7 @@ var CardAccordation = (0, import_react12.forwardRef)(
         layout: "vertical",
         padding: "none",
         minHeight: "none",
-        className: `overflow-hidden ${className}`,
+        className: cn("overflow-hidden", className),
         ...props,
         children: [
           /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(
@@ -4390,7 +4559,10 @@ var CardAccordation = (0, import_react12.forwardRef)(
                   import_phosphor_react11.CaretRight,
                   {
                     size: 20,
-                    className: `text-text-700 transition-transform duration-200 flex-shrink-0 ${isExpanded ? "rotate-90" : "rotate-0"}`,
+                    className: cn(
+                      "text-text-700 transition-transform duration-200 flex-shrink-0",
+                      isExpanded ? "rotate-90" : "rotate-0"
+                    ),
                     "data-testid": "accordion-caret"
                   }
                 )
@@ -4401,7 +4573,10 @@ var CardAccordation = (0, import_react12.forwardRef)(
             "div",
             {
               id: contentId,
-              className: `transition-all duration-300 ease-in-out overflow-hidden ${isExpanded ? "max-h-screen opacity-100" : "max-h-0 opacity-0"}`,
+              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",
               children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { className: "p-4 pt-0 border-border-50", children })
             }
@@ -4484,7 +4659,11 @@ var AlternativesList = ({
       return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
         "div",
         {
-          className: `border-2 rounded-lg p-4 w-full ${statusStyles} ${alternative.disabled ? "opacity-50" : ""}`,
+          className: cn(
+            "border-2 rounded-lg p-4 w-full",
+            statusStyles,
+            alternative.disabled ? "opacity-50" : ""
+          ),
           children: /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("div", { className: "flex items-start justify-between gap-3", children: [
             /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("div", { className: "flex items-start gap-3 flex-1", children: [
               /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("div", { className: "mt-1", children: renderRadio() }),
@@ -4492,7 +4671,10 @@ var AlternativesList = ({
                 /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
                   "p",
                   {
-                    className: `block font-medium ${selectedValue === alternative.value || statusBadge ? "text-text-950" : "text-text-600"}`,
+                    className: cn(
+                      "block font-medium",
+                      selectedValue === alternative.value || statusBadge ? "text-text-950" : "text-text-600"
+                    ),
                     children: alternative.label
                   }
                 ),
@@ -4508,14 +4690,21 @@ var AlternativesList = ({
     return /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(
       "div",
       {
-        className: `flex flex-row justify-between items-start gap-2 p-2 rounded-lg w-full ${statusStyles} ${alternative.disabled ? "opacity-50" : ""}`,
+        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_runtime25.jsxs)("div", { className: "flex items-center gap-2 flex-1", children: [
             renderRadio(),
             /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
               "span",
               {
-                className: `flex-1 ${selectedValue === alternative.value || statusBadge ? "text-text-950" : "text-text-600"}`,
+                className: cn(
+                  "flex-1",
+                  selectedValue === alternative.value || statusBadge ? "text-text-950" : "text-text-600"
+                ),
                 children: alternative.label
               }
             )
@@ -4530,7 +4719,7 @@ var AlternativesList = ({
     return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
       "div",
       {
-        className: `flex flex-col ${getLayoutClasses()} w-full ${className}`,
+        className: cn("flex flex-col", getLayoutClasses(), "w-full", className),
         children: alternatives.map(
           (alternative) => renderReadonlyAlternative(alternative)
         )
@@ -4548,7 +4737,7 @@ var AlternativesList = ({
         onValueChange?.(value2);
       },
       disabled,
-      className: `flex flex-col ${getLayoutClasses()} ${className}`,
+      className: cn("flex flex-col", getLayoutClasses(), className),
       children: alternatives.map((alternative, index) => {
         const alternativeId = alternative.value || `alt-${index}`;
         const statusStyles = getStatusStyles(alternative.status, false);
@@ -4557,7 +4746,11 @@ var AlternativesList = ({
           return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
             "div",
             {
-              className: `border-2 rounded-lg p-4 transition-all ${statusStyles} ${alternative.disabled ? "opacity-50 cursor-not-allowed" : "cursor-pointer"}`,
+              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_runtime25.jsxs)("div", { className: "flex items-start justify-between gap-3", children: [
                 /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("div", { className: "flex items-start gap-3 flex-1", children: [
                   /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
@@ -4574,9 +4767,11 @@ var AlternativesList = ({
                       "label",
                       {
                         htmlFor: alternativeId,
-                        className: `block font-medium
-                        ${actualValue === alternative.value ? "text-text-950" : "text-text-600"}
-                        ${alternative.disabled ? "cursor-not-allowed" : "cursor-pointer"}`,
+                        className: cn(
+                          "block font-medium",
+                          actualValue === alternative.value ? "text-text-950" : "text-text-600",
+                          alternative.disabled ? "cursor-not-allowed" : "cursor-pointer"
+                        ),
                         children: alternative.label
                       }
                     ),
@@ -4592,7 +4787,11 @@ var AlternativesList = ({
         return /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(
           "div",
           {
-            className: `flex flex-row justify-between gap-2 items-start p-2 rounded-lg transition-all ${statusStyles} ${alternative.disabled ? "opacity-50 cursor-not-allowed" : ""}`,
+            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_runtime25.jsxs)("div", { className: "flex items-center gap-2 flex-1", children: [
                 /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
@@ -4607,9 +4806,11 @@ var AlternativesList = ({
                   "label",
                   {
                     htmlFor: alternativeId,
-                    className: `flex-1
-                  ${actualValue === alternative.value ? "text-text-950" : "text-text-600"}
-                  ${alternative.disabled ? "cursor-not-allowed" : "cursor-pointer"}`,
+                    className: cn(
+                      "flex-1",
+                      actualValue === alternative.value ? "text-text-950" : "text-text-600",
+                      alternative.disabled ? "cursor-not-allowed" : "cursor-pointer"
+                    ),
                     children: alternative.label
                   }
                 )
@@ -4629,7 +4830,10 @@ var HeaderAlternative = (0, import_react13.forwardRef)(
       "div",
       {
         ref,
-        className: `bg-background p-4 flex flex-col gap-4 rounded-xl ${className}`,
+        className: cn(
+          "bg-background p-4 flex flex-col gap-4 rounded-xl",
+          className
+        ),
         ...props,
         children: [
           /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("span", { className: "flex flex-col", children: [
@@ -4721,7 +4925,11 @@ var AlertDialog = (0, import_react14.forwardRef)(
           "div",
           {
             ref,
-            className: `bg-background border border-border-100 rounded-lg shadow-lg p-6 m-3 ${sizeClasses} ${className}`,
+            className: cn(
+              "bg-background border border-border-100 rounded-lg shadow-lg p-6 m-3",
+              sizeClasses,
+              className
+            ),
             ...props,
             children: [
               /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
@@ -4882,7 +5090,7 @@ var DropdownMenuTrigger = ({
         if (onClick) onClick(e);
       },
       "aria-expanded": open,
-      className: `${className}`,
+      className: cn(className),
       ...props,
       children
     }
@@ -4913,7 +5121,7 @@ var MenuLabel = (0, import_react15.forwardRef)(({ className, inset, store: _stor
     "div",
     {
       ref,
-      className: `text-sm w-full ${inset ? "pl-8" : ""} ${className ?? ""}`,
+      className: cn("text-sm w-full", inset ? "pl-8" : "", className),
       ...props
     }
   );
@@ -5041,7 +5249,7 @@ var DropdownMenuSeparator = (0, import_react15.forwardRef)(({ className, store:
   "div",
   {
     ref,
-    className: `my-1 h-px bg-border-200 ${className}`,
+    className: cn("my-1 h-px bg-border-200", className),
     ...props
   }
 ));
@@ -5054,7 +5262,10 @@ var ProfileMenuTrigger = (0, import_react15.forwardRef)(({ className, onClick, s
     "button",
     {
       ref,
-      className: `rounded-lg size-10 bg-primary-50 flex items-center justify-center cursor-pointer ${className}`,
+      className: cn(
+        "rounded-lg size-10 bg-primary-50 flex items-center justify-center cursor-pointer",
+        className
+      ),
       onClick: (e) => {
         e.stopPropagation();
         toggleOpen();
@@ -5073,10 +5284,7 @@ var ProfileMenuHeader = (0, import_react15.forwardRef)(({ className, name, email
     {
       ref,
       "data-component": "ProfileMenuHeader",
-      className: `
-          flex flex-row gap-4 items-center
-          ${className}
-        `,
+      className: cn("flex flex-row gap-4 items-center", className),
       ...props,
       children: [
         /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("span", { className: "size-16 bg-primary-100 rounded-full flex items-center justify-center", children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(import_phosphor_react13.User, { size: 34, className: "text-primary-950" }) }),
@@ -5090,18 +5298,7 @@ var ProfileMenuHeader = (0, import_react15.forwardRef)(({ className, name, email
 });
 ProfileMenuHeader.displayName = "ProfileMenuHeader";
 var ProfileMenuSection = (0, import_react15.forwardRef)(({ className, children, store: _store, ...props }, ref) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
-    "div",
-    {
-      ref,
-      className: `
-          flex flex-col p-2
-          ${className}
-        `,
-      ...props,
-      children
-    }
-  );
+  return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("div", { ref, className: cn("flex flex-col p-2", className), ...props, children });
 });
 ProfileMenuSection.displayName = "ProfileMenuSection";
 var ProfileMenuFooter = ({
@@ -5117,7 +5314,7 @@ var ProfileMenuFooter = ({
     Button_default,
     {
       variant: "outline",
-      className: `w-full ${className}`,
+      className: cn("w-full", className),
       disabled,
       onClick: (e) => {
         setOpen(false);
@@ -5313,11 +5510,11 @@ var Select = ({
       "label",
       {
         htmlFor: selectId,
-        className: `block font-bold text-text-900 mb-1.5 ${sizeClasses}`,
+        className: cn("block font-bold text-text-900 mb-1.5", sizeClasses),
         children: label
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { className: `relative ${sizeClasses}`, ref: selectRef, children: injectStore3(children, store, size, selectId) }),
+    /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { className: cn("relative", sizeClasses), ref: selectRef, children: injectStore3(children, store, size, selectId) }),
     /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("div", { className: "mt-1.5 gap-1.5", children: [
       helperText && /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("p", { className: "text-sm text-text-500", children: helperText }),
       errorMessage && /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("p", { className: "flex gap-1 items-center text-sm text-indicator-error", children: [
@@ -5378,7 +5575,10 @@ var SelectTrigger = (0, import_react16.forwardRef)(
           /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
             import_phosphor_react14.CaretDown,
             {
-              className: `h-[1em] w-[1em] opacity-50 transition-transform ${open ? "rotate-180" : ""}`
+              className: cn(
+                "h-[1em] w-[1em] opacity-50 transition-transform",
+                open ? "rotate-180" : ""
+              )
             }
           )
         ]
@@ -5405,7 +5605,11 @@ var SelectContent = (0, import_react16.forwardRef)(
       {
         role: "menu",
         ref,
-        className: `bg-background z-50 min-w-[210px] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md border-border-100 ${getPositionClasses()} ${className}`,
+        className: cn(
+          "bg-background z-50 min-w-[210px] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md border-border-100",
+          getPositionClasses(),
+          className
+        ),
         ...props,
         children
       }
@@ -5612,7 +5816,10 @@ var MenuItem = (0, import_react17.forwardRef)(
             /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
               "span",
               {
-                className: `flex flex-row items-center gap-2 px-4 text-text-950 text-xs font-bold ${className ?? ""}`,
+                className: cn(
+                  "flex flex-row items-center gap-2 px-4 text-text-950 text-xs font-bold",
+                  className
+                ),
                 children
               }
             ),
@@ -5635,10 +5842,10 @@ var MenuItem = (0, import_react17.forwardRef)(
             /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
               "span",
               {
-                className: `
-              border-b border-text-600 hover:border-primary-600 text-inherit text-xs
-              ${selectedValue === value ? "border-b-0 font-bold" : "border-b-text-600"}
-            `,
+                className: cn(
+                  "border-b border-text-600 hover:border-primary-600 text-inherit text-xs",
+                  selectedValue === value ? "border-b-0 font-bold" : "border-b-primary-200"
+                ),
                 children
               }
             ),
@@ -5701,7 +5908,7 @@ var MenuOverflow = ({
     "div",
     {
       "data-testid": "menu-overflow-wrapper",
-      className: `relative w-full overflow-hidden ${className ?? ""}`,
+      className: cn("relative w-full overflow-hidden", className),
       children: [
         showLeftArrow && /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(
           "button",
@@ -5796,12 +6003,12 @@ var Skeleton = (0, import_react18.forwardRef)(
         "div",
         {
           ref,
-          className: `flex flex-col ${spacingClass} ${className}`,
+          className: cn("flex flex-col", spacingClass, className),
           ...props,
           children: Array.from({ length: lines }, (_, index) => /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
             "div",
             {
-              className: `${variantClass} ${animationClass}`,
+              className: cn(variantClass, animationClass),
               style: index === lines - 1 ? { width: "60%" } : void 0
             },
             index
@@ -5813,7 +6020,7 @@ var Skeleton = (0, import_react18.forwardRef)(
       "div",
       {
         ref,
-        className: `${variantClass} ${animationClass} ${className}`,
+        className: cn(variantClass, animationClass, className),
         style,
         ...props,
         children
@@ -5841,7 +6048,10 @@ var SkeletonCard = (0, import_react18.forwardRef)(
       "div",
       {
         ref,
-        className: `w-full p-4 bg-background border border-border-200 rounded-lg ${className}`,
+        className: cn(
+          "w-full p-4 bg-background border border-border-200 rounded-lg",
+          className
+        ),
         ...props,
         children: [
           /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("div", { className: "flex items-start space-x-3", children: [
@@ -5870,7 +6080,7 @@ var SkeletonList = (0, import_react18.forwardRef)(
     className = "",
     ...props
   }, ref) => {
-    return /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("div", { ref, className: `space-y-3 ${className}`, ...props, children: Array.from({ length: items }, (_, index) => /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("div", { className: "flex items-start space-x-3 p-3", children: [
+    return /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("div", { ref, className: cn("space-y-3", className), ...props, children: Array.from({ length: items }, (_, index) => /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("div", { className: "flex items-start space-x-3 p-3", children: [
       showAvatar && /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(SkeletonCircle, { width: 32, height: 32 }),
       /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("div", { className: "flex-1 space-y-2", children: [
         showTitle && /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(SkeletonText, { width: "40%", height: 16 }),
@@ -5881,7 +6091,7 @@ var SkeletonList = (0, import_react18.forwardRef)(
 );
 var SkeletonTable = (0, import_react18.forwardRef)(
   ({ rows = 5, columns = 4, showHeader = true, className = "", ...props }, ref) => {
-    return /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("div", { ref, className: `w-full ${className}`, ...props, children: [
+    return /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("div", { ref, className: cn("w-full", className), ...props, children: [
       showHeader && /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("div", { className: "flex space-x-2 mb-3", children: Array.from({ length: columns }, (_, index) => /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
         SkeletonText,
         {
@@ -5949,7 +6159,10 @@ var NotFound = ({
   return /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
     "div",
     {
-      className: `flex flex-col w-full h-screen items-center justify-center bg-background-50 px-4 ${className}`,
+      className: cn(
+        "flex flex-col w-full h-screen items-center justify-center bg-background-50 px-4",
+        className
+      ),
       children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
         "main",
         {
@@ -6638,7 +6851,10 @@ var Quiz = (0, import_react22.forwardRef)(({ children, className, ...props }, re
     "div",
     {
       ref,
-      className: `w-full max-w-[1000px] flex flex-col mx-auto h-full relative not-lg:px-6 ${className}`,
+      className: cn(
+        "w-full max-w-[1000px] flex flex-col mx-auto h-full relative not-lg:px-6",
+        className
+      ),
       ...props,
       children
     }
@@ -6654,7 +6870,11 @@ var QuizHeaderResult = (0, import_react22.forwardRef)(
       "div",
       {
         ref,
-        className: `flex flex-row items-center gap-10 p-3.5 rounded-xl ${isCorrect ? "bg-success-background" : "bg-error-background"} ${className}`,
+        className: cn(
+          "flex flex-row items-center gap-10 p-3.5 rounded-xl",
+          isCorrect ? "bg-success-background" : "bg-error-background",
+          className
+        ),
         ...props,
         children: [
           /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("p", { className: "text-text-950 font-bold text-lg", children: "Resultado" }),
@@ -6680,7 +6900,10 @@ var QuizTitle = (0, import_react22.forwardRef)(
       "div",
       {
         ref,
-        className: `flex flex-row justify-center items-center relative p-2 ${className}`,
+        className: cn(
+          "flex flex-row justify-center items-center relative p-2",
+          className
+        ),
         ...props,
         children: [
           /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("span", { className: "flex flex-col gap-2 text-center", children: [
@@ -6712,7 +6935,10 @@ var QuizContent = (0, import_react22.forwardRef)(({ type = "Alternativas", child
       "div",
       {
         ref,
-        className: `rounded-t-xl px-4 pt-4 pb-[80px] h-full flex flex-col gap-4 mb-auto ${className}`,
+        className: cn(
+          "rounded-t-xl px-4 pt-4 pb-[80px] h-full flex flex-col gap-4 mb-auto",
+          className
+        ),
         ...props,
         children
       }
@@ -6865,7 +7091,10 @@ var QuizFooter = (0, import_react22.forwardRef)(({ className, onGoToSimulated, o
       "footer",
       {
         ref,
-        className: `w-full px-2 bg-background lg:max-w-[1000px] not-lg:max-w-[calc(100vw-32px)] border-t border-border-50 fixed bottom-0 min-h-[80px] flex flex-row justify-between items-center ${className}`,
+        className: cn(
+          "w-full px-2 bg-background lg:max-w-[1000px] not-lg:max-w-[calc(100vw-32px)] border-t border-border-50 fixed bottom-0 min-h-[80px] flex flex-row justify-between items-center",
+          className
+        ),
         ...props,
         children: [
           /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("div", { className: "flex flex-row items-center gap-1", children: [
@@ -7048,7 +7277,7 @@ var QuizResultHeaderTitle = (0, import_react22.forwardRef)(({ className, ...prop
     "div",
     {
       ref,
-      className: `flex flex-row pt-4 justify-between ${className}`,
+      className: cn("flex flex-row pt-4 justify-between", className),
       ...props,
       children: [
         /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("p", { className: "text-text-950 font-bold text-2xl", children: "Resultado" }),
@@ -7063,7 +7292,7 @@ var QuizResultTitle = (0, import_react22.forwardRef)(({ className, ...props }, r
   return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
     "p",
     {
-      className: `pt-6 pb-4 text-text-950 font-bold text-lg ${className}`,
+      className: cn("pt-6 pb-4 text-text-950 font-bold text-lg", className),
       ref,
       ...props,
       children: quizTitle