Update className to use clsx for primitives

src/core/primitives/Avatar/fragments/AvatarPrimitiveFallback.tsx

@@ -1,4 +1,6 @@
 import React, { useContext } from 'react';
+import { clsx } from 'clsx';
+
 import { AvatarPrimitiveContext } from '../contexts/AvatarPrimitiveContext';
 
 export interface AvatarPrimitiveFallbackProps {
@@ -13,7 +15,7 @@ const AvatarPrimitiveFallback = ({ children, className = '' }: AvatarPrimitiveFa
         return null;
     }
 
-    return <span className={`${fallBackRootClass} ${className}`}>{children}</span>;
+    return <span className={clsx(fallBackRootClass, className)}>{children}</span>;
 };
 
 export default AvatarPrimitiveFallback;

src/core/primitives/Avatar/fragments/AvatarPrimitiveImage.tsx

@@ -1,4 +1,5 @@
 import React, { useContext } from 'react';
+import { clsx } from 'clsx';
 
 import { AvatarPrimitiveContext } from '../contexts/AvatarPrimitiveContext';
 
@@ -28,7 +29,7 @@ const AvatarPrimitiveImage = ({
             alt={alt}
             onError={handleErrorImage}
             onLoad={handleLoadImage}
-            className={className}
+            className={clsx(className)}
             {...props}
         />
     );

src/core/primitives/Avatar/fragments/AvatarPrimitiveRoot.tsx

@@ -1,4 +1,5 @@
 import React, { useState, useEffect } from 'react';
+import { clsx } from 'clsx';
 
 import { AvatarPrimitiveContext } from '../contexts/AvatarPrimitiveContext';
 import { customClassSwitcher } from '~/core/customClassSwitcher';
@@ -38,7 +39,7 @@ const AvatarPrimitiveRoot = ({ children, className = '', customRootClass = '', s
     };
 
     return <AvatarPrimitiveContext.Provider value={values} >
-        <span className={`${rootClass} ${className}`} {...props}>{children}</span>
+        <span className={clsx(rootClass, className)} {...props}>{children}</span>
     </AvatarPrimitiveContext.Provider>;
 };