analytica-frontend-lib 1.0.84 → 1.0.86

package/dist/Accordation/index.js

@@ -28,6 +28,13 @@ var import_react2 = require("react");
 // src/components/Card/Card.tsx
 var import_react = require("react");
 
+// 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/Button/Button.tsx
 var import_jsx_runtime = require("react/jsx-runtime");
 var VARIANT_ACTION_CLASSES = {
@@ -72,7 +79,7 @@ var Button = ({
   return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
     "button",
     {
-      className: `${baseClasses} ${variantClasses} ${sizeClasses} ${className}`,
+      className: cn(baseClasses, variantClasses, sizeClasses, className),
       disabled,
       type,
       ...props,
@@ -153,7 +160,7 @@ var Badge = ({
     return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
       "div",
       {
-        className: `${baseClasses} ${variantClasses} ${sizeClasses} ${className}`,
+        className: cn(baseClasses, variantClasses, sizeClasses, className),
         ...props,
         children: [
           /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_phosphor_react.Bell, { size: 24, className: "text-current", "aria-hidden": "true" }),
@@ -171,12 +178,12 @@ var Badge = ({
   return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
     "div",
     {
-      className: `${baseClasses} ${variantClasses} ${sizeClasses} ${className}`,
+      className: cn(baseClasses, variantClasses, sizeClasses, className),
       ...props,
       children: [
-        iconLeft && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: `${baseClassesIcon} ${sizeClassesIcon}`, children: iconLeft }),
+        iconLeft && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: cn(baseClassesIcon, sizeClassesIcon), children: iconLeft }),
         children,
-        iconRight && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: `${baseClassesIcon} ${sizeClassesIcon}`, children: iconRight })
+        iconRight && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: cn(baseClassesIcon, sizeClassesIcon), children: iconRight })
       ]
     }
   );
@@ -226,7 +233,7 @@ var Text = ({
   return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
     Component,
     {
-      className: `${baseClasses} ${sizeClasses} ${weightClasses} ${color} ${className}`,
+      className: cn(baseClasses, sizeClasses, weightClasses, color, className),
       ...props,
       children
     }
@@ -350,7 +357,10 @@ var renderStackedHitCountDisplay = (showHitCount, showPercentage, clampedValue,
   return /* @__PURE__ */ (0, import_jsx_runtime4.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_runtime4.jsxs)(import_jsx_runtime4.Fragment, { children: [
         /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: "text-success-200", children: Math.round(clampedValue) }),
         /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("span", { className: "text-text-600", children: [
@@ -375,7 +385,11 @@ var ProgressBarBase = ({
 }) => /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
   "div",
   {
-    className: `${containerClassName} ${variantClasses.background} overflow-hidden relative`,
+    className: cn(
+      containerClassName,
+      variantClasses.background,
+      "overflow-hidden relative"
+    ),
     children: [
       /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
         "progress",
@@ -389,7 +403,11 @@ var ProgressBarBase = ({
       /* @__PURE__ */ (0, import_jsx_runtime4.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}%` }
         }
       )
@@ -411,7 +429,12 @@ var StackedLayout = ({
 }) => /* @__PURE__ */ (0, import_jsx_runtime4.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_runtime4.jsxs)("div", { className: "flex flex-row justify-between items-center w-full h-[19px]", children: [
         label && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
@@ -420,7 +443,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
           }
         ),
@@ -478,7 +501,12 @@ var CompactLayout = ({
   return /* @__PURE__ */ (0, import_jsx_runtime4.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_runtime4.jsx)(
           Text_default,
@@ -487,7 +515,7 @@ var CompactLayout = ({
             size: "sm",
             weight: "medium",
             color,
-            className: `leading-4 w-full ${compactClassName}`,
+            className: cn("leading-4 w-full", compactClassName),
             children: content
           }
         ),
@@ -527,7 +555,7 @@ var DefaultLayout = ({
     label,
     showPercentage
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: `flex ${sizeClasses.layout} ${gapClass} ${className}`, children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: cn("flex", sizeClasses.layout, gapClass, className), children: [
     displayConfig.showHeader && /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "flex flex-row items-center justify-between w-full", children: [
       label && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
         Text_default,
@@ -535,7 +563,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
         }
       ),
@@ -544,7 +575,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),
             "%"
@@ -560,8 +594,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_runtime4.jsxs)(
@@ -569,7 +611,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),
           "%"
@@ -582,7 +627,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
       }
     )
@@ -768,21 +816,28 @@ var CardActivitiesResults = (0, import_react.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_runtime5.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_runtime5.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
                   }
                 ),
@@ -795,7 +850,13 @@ var CardActivitiesResults = (0, import_react.forwardRef)(
                     children: title
                   }
                 ),
-                /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("p", { className: `text-lg font-bold truncate ${actionSubTitleClasses}`, children: subTitle })
+                /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+                  "p",
+                  {
+                    className: cn("text-lg font-bold truncate", actionSubTitleClasses),
+                    children: subTitle
+                  }
+                )
               ]
             }
           ),
@@ -803,7 +864,10 @@ var CardActivitiesResults = (0, import_react.forwardRef)(
             /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
               "p",
               {
-                className: `text-2xs font-medium uppercase truncate ${actionHeaderClasses}`,
+                className: cn(
+                  "text-2xs font-medium uppercase truncate",
+                  actionHeaderClasses
+                ),
                 children: header
               }
             ),
@@ -833,7 +897,7 @@ var CardQuestions = (0, import_react.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_runtime5.jsxs)("section", { className: "flex flex-col gap-1 flex-1 min-w-0", children: [
@@ -911,7 +975,9 @@ var CardProgress = (0, import_react.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),
                 "%"
@@ -930,17 +996,17 @@ var CardProgress = (0, import_react.forwardRef)(
         padding: "none",
         minHeight: "medium",
         cursor: "pointer",
-        className: `${isHorizontal ? "h-20" : ""} ${className}`,
+        className: cn(isHorizontal ? "h-20" : "", className),
         ...props,
         children: [
           /* @__PURE__ */ (0, import_jsx_runtime5.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
@@ -949,10 +1015,10 @@ var CardProgress = (0, import_react.forwardRef)(
           /* @__PURE__ */ (0, import_jsx_runtime5.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_runtime5.jsx)(Text_default, { size: "sm", weight: "bold", className: "text-text-950 truncate", children: header }),
                 contentComponent[direction]
@@ -982,7 +1048,7 @@ var CardTopic = (0, import_react.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_runtime5.jsx)("span", { className: "text-text-600 text-2xs flex flex-row gap-1", children: subHead.map((text, index) => /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(import_react.Fragment, { children: [
@@ -1005,7 +1071,9 @@ var CardTopic = (0, import_react.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),
                   "%"
@@ -1039,7 +1107,10 @@ var CardPerformance = (0, import_react.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: [
@@ -1097,15 +1168,15 @@ var CardResults = (0, import_react.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_runtime5.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
               },
@@ -1115,10 +1186,10 @@ var CardResults = (0, import_react.forwardRef)(
           /* @__PURE__ */ (0, import_jsx_runtime5.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_runtime5.jsx)("p", { className: "text-sm font-bold text-text-950 truncate flex-1 min-w-0", children: header }),
                 /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("span", { className: "flex flex-row gap-1 items-center", children: [
@@ -1167,7 +1238,7 @@ var CardStatus = (0, import_react.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_runtime5.jsxs)("div", { className: "flex justify-between w-full h-full flex-row items-center gap-2", children: [
           /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("p", { className: "text-sm font-bold text-text-950 truncate flex-1 min-w-0", children: header }),
@@ -1199,7 +1270,10 @@ var CardSettings = (0, import_react.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_runtime5.jsx)("span", { className: "[&>svg]:size-6", children: icon }),
@@ -1219,15 +1293,19 @@ var CardSupport = (0, import_react.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_runtime5.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_runtime5.jsx)("span", { className: "w-full min-w-0", children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("p", { className: "text-sm text-text-950 font-bold truncate", children: header }) }),
                 /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: "flex flex-row gap-1", children })
@@ -1262,7 +1340,7 @@ var CardForum = (0, import_react.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_runtime5.jsx)(
@@ -1395,7 +1473,7 @@ var CardAudio = (0, import_react.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_runtime5.jsx)(
@@ -1564,7 +1642,10 @@ var CardSimulado = (0, import_react.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_runtime5.jsxs)("div", { className: "flex justify-between items-center w-full gap-4", children: [
           /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "flex flex-col gap-1 flex-1 min-w-0", children: [
@@ -1627,7 +1708,9 @@ var CardTest = (0, import_react.forwardRef)(
         {
           ref,
           type: "button",
-          className: `${baseClasses} ${interactiveClasses} ${selectedClasses} ${className}`.trim(),
+          className: cn(
+            `${baseClasses} ${interactiveClasses} ${selectedClasses} ${className}`.trim()
+          ),
           onClick: handleClick,
           onKeyDown: handleKeyDown,
           "aria-pressed": selected,
@@ -1671,7 +1754,7 @@ var CardTest = (0, import_react.forwardRef)(
       "div",
       {
         ref,
-        className: `${baseClasses} ${className}`.trim(),
+        className: cn(`${baseClasses} ${className}`.trim()),
         ...props,
         children: /* @__PURE__ */ (0, import_jsx_runtime5.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_runtime5.jsx)(
@@ -1736,16 +1819,16 @@ var CardSimulationHistory = (0, import_react.forwardRef)(({ data, onSimulationCl
     "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_runtime5.jsxs)("div", { className: "flex flex-col gap-0", children: [
         data.map((section, sectionIndex) => /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "flex flex-col", children: /* @__PURE__ */ (0, import_jsx_runtime5.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_runtime5.jsx)(
                 Text_default,
@@ -1765,10 +1848,10 @@ var CardSimulationHistory = (0, import_react.forwardRef)(({ data, onSimulationCl
                     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_runtime5.jsxs)("div", { className: "flex justify-between items-center w-full gap-2", children: [
                       /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "flex flex-col gap-2 flex-1 min-w-0", children: [
@@ -1848,7 +1931,7 @@ var CardAccordation = (0, import_react2.forwardRef)(
         layout: "vertical",
         padding: "none",
         minHeight: "none",
-        className: `overflow-hidden ${className}`,
+        className: cn("overflow-hidden", className),
         ...props,
         children: [
           /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
@@ -1865,7 +1948,10 @@ var CardAccordation = (0, import_react2.forwardRef)(
                   import_phosphor_react3.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"
                   }
                 )
@@ -1876,7 +1962,10 @@ var CardAccordation = (0, import_react2.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_runtime6.jsx)("div", { className: "p-4 pt-0 border-border-50", children })
             }