v.1.2.17

lib/components/avatar/avatar.tsx

@@ -48,7 +48,9 @@ export const Avatar = (props: IAvatar) => {
     return initials.toUpperCase();
   };
 
-  const defaultSvgString = renderToString(<User variant="Bold" color="white" size={28} />);
+  const defaultSvgString = renderToString(
+    <User variant="Bold" color="white" size={28} />
+  );
   const defaultImgSrc = `data:image/svg+xml;base64,${btoa(defaultSvgString)}`;
   const nameLetters = name ? getInitials(name) : "";
 
@@ -63,7 +65,13 @@ export const Avatar = (props: IAvatar) => {
       {...restProps}
     >
       {!error ? (
-        <img src={src} alt={alt} className={theme.img()} />
+        <img
+          src={src}
+          alt={alt}
+          className={theme.img({
+            isError: false,
+          })}
+        />
       ) : name ? (
         <span className={letterClasses}>{nameLetters}</span>
       ) : (
@@ -72,6 +80,7 @@ export const Avatar = (props: IAvatar) => {
           alt={alt}
           className={theme.img({
             size,
+            isError: true,
           })}
         />
       )}

lib/customization/styles/components/avatar.styles.ts

@@ -30,7 +30,7 @@ const base = cva(
     },
   }
 );
-const img = cva(["zn-block", "zn-object-cover", "zn-w-full", "zn-h-full"], {
+const img = cva(["zn-block"], {
   variants: {
     size: {
       "2xs": ["zn-w-3", "zn-h-3"],
@@ -41,6 +41,10 @@ const img = cva(["zn-block", "zn-object-cover", "zn-w-full", "zn-h-full"], {
       xl: ["zn-w-16", "zn-h-16"],
       "2xl": ["zn-w-24", "zn-h-24"],
     },
+    isError: {
+      true: [""],
+      false: ["zn-w-full", "zn-h-full", "zn-object-cover"],
+    },
   },
 });
 const name = cva(["zn-font-medium", "zn-text-white"], {

package.json

@@ -1,7 +1,7 @@
 {
   "name": "zeni-ui",
   "private": false,
-  "version": "1.2.16-beta",
+  "version": "1.2.17-beta",
   "type": "module",
   "main": "dist/main.js",
   "types": "dist/main.d.ts",