diff --git a/next-docs/public/examples/avatar/__tests__/__snapshots__/index.test.tsx.snap b/next-docs/public/examples/avatar/__tests__/__snapshots__/index.test.tsx.snap
index 89e77efd1f..a595b9355b 100644
--- a/next-docs/public/examples/avatar/__tests__/__snapshots__/index.test.tsx.snap
+++ b/next-docs/public/examples/avatar/__tests__/__snapshots__/index.test.tsx.snap
@@ -10,7 +10,6 @@ Object {
       >
         <div
           class="relative overflow-hidden uppercase font-medium flex items-center justify-center bg-cover text-bulma bg-goku h-10 w-10 text-moon-14 rounded-moon-i-sm [&_.status]:w-3 [&_.status]:h-3 [&_.status]:border-2"
-          style="background-image: url(undefined);"
         >
            
           <svg
@@ -37,7 +36,6 @@ Object {
         </div>
         <div
           class="relative overflow-hidden uppercase font-medium flex items-center justify-center bg-cover text-bulma bg-goku h-10 w-10 text-moon-14 rounded-moon-i-sm [&_.status]:w-3 [&_.status]:h-3 [&_.status]:border-2"
-          style="background-image: url(undefined);"
         >
            
           md
@@ -65,7 +63,6 @@ Object {
     >
       <div
         class="relative overflow-hidden uppercase font-medium flex items-center justify-center bg-cover text-bulma bg-goku h-10 w-10 text-moon-14 rounded-moon-i-sm [&_.status]:w-3 [&_.status]:h-3 [&_.status]:border-2"
-        style="background-image: url(undefined);"
       >
          
         <svg
@@ -92,7 +89,6 @@ Object {
       </div>
       <div
         class="relative overflow-hidden uppercase font-medium flex items-center justify-center bg-cover text-bulma bg-goku h-10 w-10 text-moon-14 rounded-moon-i-sm [&_.status]:w-3 [&_.status]:h-3 [&_.status]:border-2"
-        style="background-image: url(undefined);"
       >
          
         md
@@ -177,7 +173,6 @@ Object {
       >
         <div
           class="relative overflow-hidden uppercase font-medium flex items-center justify-center bg-cover bg-goku h-10 w-10 text-moon-14 rounded-moon-i-sm [&_.status]:w-3 [&_.status]:h-3 [&_.status]:border-2 text-chichi"
-          style="background-image: url(undefined);"
         >
            
           <svg
@@ -201,7 +196,6 @@ Object {
         </div>
         <div
           class="relative overflow-hidden uppercase font-medium flex items-center justify-center bg-cover h-10 w-10 text-moon-14 rounded-moon-i-sm [&_.status]:w-3 [&_.status]:h-3 [&_.status]:border-2 bg-piccolo text-goten"
-          style="background-image: url(undefined);"
         >
            
           <svg
@@ -225,7 +219,6 @@ Object {
         </div>
         <div
           class="relative overflow-hidden uppercase font-medium flex items-center justify-center bg-cover text-bulma bg-goku h-10 w-10 text-moon-14 [&_.status]:w-3 [&_.status]:h-3 [&_.status]:border-2 rounded-full"
-          style="background-image: url(undefined);"
         >
            
           <svg
@@ -249,7 +242,6 @@ Object {
         </div>
         <div
           class="relative overflow-hidden uppercase font-medium flex items-center justify-center bg-cover text-bulma bg-goku h-10 w-10 text-moon-14 rounded-moon-i-sm [&_.status]:w-3 [&_.status]:h-3 [&_.status]:border-2"
-          style="background-image: url(undefined);"
         >
            
           <svg
@@ -276,7 +268,6 @@ Object {
         </div>
         <div
           class="relative overflow-hidden uppercase font-medium flex items-center justify-center bg-cover text-bulma bg-goku h-10 w-10 text-moon-14 rounded-moon-i-sm [&_.status]:w-3 [&_.status]:h-3 [&_.status]:border-2"
-          style="background-image: url(undefined);"
         >
            
           <svg
@@ -310,7 +301,6 @@ Object {
     >
       <div
         class="relative overflow-hidden uppercase font-medium flex items-center justify-center bg-cover bg-goku h-10 w-10 text-moon-14 rounded-moon-i-sm [&_.status]:w-3 [&_.status]:h-3 [&_.status]:border-2 text-chichi"
-        style="background-image: url(undefined);"
       >
          
         <svg
@@ -334,7 +324,6 @@ Object {
       </div>
       <div
         class="relative overflow-hidden uppercase font-medium flex items-center justify-center bg-cover h-10 w-10 text-moon-14 rounded-moon-i-sm [&_.status]:w-3 [&_.status]:h-3 [&_.status]:border-2 bg-piccolo text-goten"
-        style="background-image: url(undefined);"
       >
          
         <svg
@@ -358,7 +347,6 @@ Object {
       </div>
       <div
         class="relative overflow-hidden uppercase font-medium flex items-center justify-center bg-cover text-bulma bg-goku h-10 w-10 text-moon-14 [&_.status]:w-3 [&_.status]:h-3 [&_.status]:border-2 rounded-full"
-        style="background-image: url(undefined);"
       >
          
         <svg
@@ -382,7 +370,6 @@ Object {
       </div>
       <div
         class="relative overflow-hidden uppercase font-medium flex items-center justify-center bg-cover text-bulma bg-goku h-10 w-10 text-moon-14 rounded-moon-i-sm [&_.status]:w-3 [&_.status]:h-3 [&_.status]:border-2"
-        style="background-image: url(undefined);"
       >
          
         <svg
@@ -409,7 +396,6 @@ Object {
       </div>
       <div
         class="relative overflow-hidden uppercase font-medium flex items-center justify-center bg-cover text-bulma bg-goku h-10 w-10 text-moon-14 rounded-moon-i-sm [&_.status]:w-3 [&_.status]:h-3 [&_.status]:border-2"
-        style="background-image: url(undefined);"
       >
          
         <svg
@@ -500,7 +486,6 @@ Object {
       >
         <div
           class="relative overflow-hidden uppercase font-medium flex items-center justify-center bg-cover text-bulma bg-goku h-10 w-10 text-moon-14 rounded-moon-i-sm [&_.status]:w-3 [&_.status]:h-3 [&_.status]:border-2"
-          style="background-image: url(undefined);"
         >
            
           <svg
@@ -531,7 +516,6 @@ Object {
     >
       <div
         class="relative overflow-hidden uppercase font-medium flex items-center justify-center bg-cover text-bulma bg-goku h-10 w-10 text-moon-14 rounded-moon-i-sm [&_.status]:w-3 [&_.status]:h-3 [&_.status]:border-2"
-        style="background-image: url(undefined);"
       >
          
         <svg
@@ -622,7 +606,6 @@ Object {
         >
           <div
             class="relative overflow-hidden uppercase font-medium flex items-center justify-center bg-cover text-bulma bg-goku h-6 w-6 text-moon-10-caption rounded-moon-i-xs [&_.status]:w-2 [&_.status]:h-2 [&_.status]:border"
-            style="background-image: url(undefined);"
           >
              
             <svg
@@ -646,7 +629,6 @@ Object {
           </div>
           <div
             class="relative overflow-hidden uppercase font-medium flex items-center justify-center bg-cover text-bulma bg-goku h-8 w-8 text-moon-12 rounded-moon-i-sm [&_.status]:w-3 [&_.status]:h-3 [&_.status]:border-2"
-            style="background-image: url(undefined);"
           >
              
             <svg
@@ -670,7 +652,6 @@ Object {
           </div>
           <div
             class="relative overflow-hidden uppercase font-medium flex items-center justify-center bg-cover text-bulma bg-goku h-10 w-10 text-moon-14 rounded-moon-i-sm [&_.status]:w-3 [&_.status]:h-3 [&_.status]:border-2"
-            style="background-image: url(undefined);"
           >
              
             <svg
@@ -694,7 +675,6 @@ Object {
           </div>
           <div
             class="relative overflow-hidden uppercase font-medium flex items-center justify-center bg-cover text-bulma bg-goku h-12 w-12 text-moon-16 rounded-moon-i-sm [&_.status]:w-4 [&_.status]:h-4 [&_.status]:border-2"
-            style="background-image: url(undefined);"
           >
              
             <svg
@@ -718,7 +698,6 @@ Object {
           </div>
           <div
             class="relative overflow-hidden uppercase font-medium flex items-center justify-center bg-cover text-bulma bg-goku h-14 w-14 text-moon-16 rounded-moon-i-sm [&_.status]:w-4 [&_.status]:h-4 [&_.status]:border-2"
-            style="background-image: url(undefined);"
           >
              
             <svg
@@ -742,7 +721,6 @@ Object {
           </div>
           <div
             class="relative overflow-hidden uppercase font-medium flex items-center justify-center bg-cover text-bulma bg-goku h-16 w-16 text-moon-20 rounded-moon-i-md [&_.status]:w-4 [&_.status]:h-4 [&_.status]:border-2"
-            style="background-image: url(undefined);"
           >
              
             <svg
@@ -770,7 +748,6 @@ Object {
         >
           <div
             class="relative overflow-hidden uppercase font-medium flex items-center justify-center bg-cover text-bulma bg-goku h-6 w-6 text-moon-10-caption rounded-moon-i-xs [&_.status]:w-2 [&_.status]:h-2 [&_.status]:border"
-            style="background-image: url(undefined);"
           >
              
             xs
@@ -778,7 +755,6 @@ Object {
           </div>
           <div
             class="relative overflow-hidden uppercase font-medium flex items-center justify-center bg-cover text-bulma bg-goku h-8 w-8 text-moon-12 rounded-moon-i-sm [&_.status]:w-3 [&_.status]:h-3 [&_.status]:border-2"
-            style="background-image: url(undefined);"
           >
              
             sm
@@ -786,7 +762,6 @@ Object {
           </div>
           <div
             class="relative overflow-hidden uppercase font-medium flex items-center justify-center bg-cover text-bulma bg-goku h-10 w-10 text-moon-14 rounded-moon-i-sm [&_.status]:w-3 [&_.status]:h-3 [&_.status]:border-2"
-            style="background-image: url(undefined);"
           >
              
             md
@@ -794,7 +769,6 @@ Object {
           </div>
           <div
             class="relative overflow-hidden uppercase font-medium flex items-center justify-center bg-cover text-bulma bg-goku h-12 w-12 text-moon-16 rounded-moon-i-sm [&_.status]:w-4 [&_.status]:h-4 [&_.status]:border-2"
-            style="background-image: url(undefined);"
           >
              
             lg
@@ -802,7 +776,6 @@ Object {
           </div>
           <div
             class="relative overflow-hidden uppercase font-medium flex items-center justify-center bg-cover text-bulma bg-goku h-14 w-14 text-moon-16 rounded-moon-i-sm [&_.status]:w-4 [&_.status]:h-4 [&_.status]:border-2"
-            style="background-image: url(undefined);"
           >
              
             xl
@@ -810,7 +783,6 @@ Object {
           </div>
           <div
             class="relative overflow-hidden uppercase font-medium flex items-center justify-center bg-cover text-bulma bg-goku h-16 w-16 text-moon-20 rounded-moon-i-md [&_.status]:w-4 [&_.status]:h-4 [&_.status]:border-2"
-            style="background-image: url(undefined);"
           >
              
             2xl
@@ -875,7 +847,6 @@ Object {
       >
         <div
           class="relative overflow-hidden uppercase font-medium flex items-center justify-center bg-cover text-bulma bg-goku h-6 w-6 text-moon-10-caption rounded-moon-i-xs [&_.status]:w-2 [&_.status]:h-2 [&_.status]:border"
-          style="background-image: url(undefined);"
         >
            
           <svg
@@ -899,7 +870,6 @@ Object {
         </div>
         <div
           class="relative overflow-hidden uppercase font-medium flex items-center justify-center bg-cover text-bulma bg-goku h-8 w-8 text-moon-12 rounded-moon-i-sm [&_.status]:w-3 [&_.status]:h-3 [&_.status]:border-2"
-          style="background-image: url(undefined);"
         >
            
           <svg
@@ -923,7 +893,6 @@ Object {
         </div>
         <div
           class="relative overflow-hidden uppercase font-medium flex items-center justify-center bg-cover text-bulma bg-goku h-10 w-10 text-moon-14 rounded-moon-i-sm [&_.status]:w-3 [&_.status]:h-3 [&_.status]:border-2"
-          style="background-image: url(undefined);"
         >
            
           <svg
@@ -947,7 +916,6 @@ Object {
         </div>
         <div
           class="relative overflow-hidden uppercase font-medium flex items-center justify-center bg-cover text-bulma bg-goku h-12 w-12 text-moon-16 rounded-moon-i-sm [&_.status]:w-4 [&_.status]:h-4 [&_.status]:border-2"
-          style="background-image: url(undefined);"
         >
            
           <svg
@@ -971,7 +939,6 @@ Object {
         </div>
         <div
           class="relative overflow-hidden uppercase font-medium flex items-center justify-center bg-cover text-bulma bg-goku h-14 w-14 text-moon-16 rounded-moon-i-sm [&_.status]:w-4 [&_.status]:h-4 [&_.status]:border-2"
-          style="background-image: url(undefined);"
         >
            
           <svg
@@ -995,7 +962,6 @@ Object {
         </div>
         <div
           class="relative overflow-hidden uppercase font-medium flex items-center justify-center bg-cover text-bulma bg-goku h-16 w-16 text-moon-20 rounded-moon-i-md [&_.status]:w-4 [&_.status]:h-4 [&_.status]:border-2"
-          style="background-image: url(undefined);"
         >
            
           <svg
@@ -1023,7 +989,6 @@ Object {
       >
         <div
           class="relative overflow-hidden uppercase font-medium flex items-center justify-center bg-cover text-bulma bg-goku h-6 w-6 text-moon-10-caption rounded-moon-i-xs [&_.status]:w-2 [&_.status]:h-2 [&_.status]:border"
-          style="background-image: url(undefined);"
         >
            
           xs
@@ -1031,7 +996,6 @@ Object {
         </div>
         <div
           class="relative overflow-hidden uppercase font-medium flex items-center justify-center bg-cover text-bulma bg-goku h-8 w-8 text-moon-12 rounded-moon-i-sm [&_.status]:w-3 [&_.status]:h-3 [&_.status]:border-2"
-          style="background-image: url(undefined);"
         >
            
           sm
@@ -1039,7 +1003,6 @@ Object {
         </div>
         <div
           class="relative overflow-hidden uppercase font-medium flex items-center justify-center bg-cover text-bulma bg-goku h-10 w-10 text-moon-14 rounded-moon-i-sm [&_.status]:w-3 [&_.status]:h-3 [&_.status]:border-2"
-          style="background-image: url(undefined);"
         >
            
           md
@@ -1047,7 +1010,6 @@ Object {
         </div>
         <div
           class="relative overflow-hidden uppercase font-medium flex items-center justify-center bg-cover text-bulma bg-goku h-12 w-12 text-moon-16 rounded-moon-i-sm [&_.status]:w-4 [&_.status]:h-4 [&_.status]:border-2"
-          style="background-image: url(undefined);"
         >
            
           lg
@@ -1055,7 +1017,6 @@ Object {
         </div>
         <div
           class="relative overflow-hidden uppercase font-medium flex items-center justify-center bg-cover text-bulma bg-goku h-14 w-14 text-moon-16 rounded-moon-i-sm [&_.status]:w-4 [&_.status]:h-4 [&_.status]:border-2"
-          style="background-image: url(undefined);"
         >
            
           xl
@@ -1063,7 +1024,6 @@ Object {
         </div>
         <div
           class="relative overflow-hidden uppercase font-medium flex items-center justify-center bg-cover text-bulma bg-goku h-16 w-16 text-moon-20 rounded-moon-i-md [&_.status]:w-4 [&_.status]:h-4 [&_.status]:border-2"
-          style="background-image: url(undefined);"
         >
            
           2xl
@@ -1182,7 +1142,6 @@ Object {
       >
         <div
           class="relative overflow-hidden uppercase font-medium flex items-center justify-center bg-cover text-bulma bg-goku h-10 w-10 text-moon-14 rounded-moon-i-sm [&_.status]:w-3 [&_.status]:h-3 [&_.status]:border-2"
-          style="background-image: url(undefined);"
         >
            
           <svg
@@ -1209,7 +1168,6 @@ Object {
         </div>
         <div
           class="relative overflow-hidden uppercase font-medium flex items-center justify-center bg-cover text-bulma bg-goku h-10 w-10 text-moon-14 rounded-moon-i-sm [&_.status]:w-3 [&_.status]:h-3 [&_.status]:border-2"
-          style="background-image: url(undefined);"
         >
            
           <svg
@@ -1236,7 +1194,6 @@ Object {
         </div>
         <div
           class="relative overflow-hidden uppercase font-medium flex items-center justify-center bg-cover text-bulma bg-goku h-10 w-10 text-moon-14 rounded-moon-i-sm [&_.status]:w-3 [&_.status]:h-3 [&_.status]:border-2"
-          style="background-image: url(undefined);"
         >
            
           <svg
@@ -1263,7 +1220,6 @@ Object {
         </div>
         <div
           class="relative overflow-hidden uppercase font-medium flex items-center justify-center bg-cover text-bulma bg-goku h-10 w-10 text-moon-14 rounded-moon-i-sm [&_.status]:w-3 [&_.status]:h-3 [&_.status]:border-2"
-          style="background-image: url(undefined);"
         >
            
           <svg
@@ -1297,7 +1253,6 @@ Object {
     >
       <div
         class="relative overflow-hidden uppercase font-medium flex items-center justify-center bg-cover text-bulma bg-goku h-10 w-10 text-moon-14 rounded-moon-i-sm [&_.status]:w-3 [&_.status]:h-3 [&_.status]:border-2"
-        style="background-image: url(undefined);"
       >
          
         <svg
@@ -1324,7 +1279,6 @@ Object {
       </div>
       <div
         class="relative overflow-hidden uppercase font-medium flex items-center justify-center bg-cover text-bulma bg-goku h-10 w-10 text-moon-14 rounded-moon-i-sm [&_.status]:w-3 [&_.status]:h-3 [&_.status]:border-2"
-        style="background-image: url(undefined);"
       >
          
         <svg
@@ -1351,7 +1305,6 @@ Object {
       </div>
       <div
         class="relative overflow-hidden uppercase font-medium flex items-center justify-center bg-cover text-bulma bg-goku h-10 w-10 text-moon-14 rounded-moon-i-sm [&_.status]:w-3 [&_.status]:h-3 [&_.status]:border-2"
-        style="background-image: url(undefined);"
       >
          
         <svg
@@ -1378,7 +1331,6 @@ Object {
       </div>
       <div
         class="relative overflow-hidden uppercase font-medium flex items-center justify-center bg-cover text-bulma bg-goku h-10 w-10 text-moon-14 rounded-moon-i-sm [&_.status]:w-3 [&_.status]:h-3 [&_.status]:border-2"
-        style="background-image: url(undefined);"
       >
          
         <svg
@@ -1469,7 +1421,6 @@ Object {
       >
         <div
           class="relative overflow-hidden uppercase font-medium flex items-center justify-center bg-cover text-bulma bg-goku h-10 w-10 text-moon-14 rounded-moon-i-sm [&_.status]:w-3 [&_.status]:h-3 [&_.status]:border-2"
-          style="background-image: url(undefined);"
         >
            
           <svg
@@ -1493,7 +1444,6 @@ Object {
         </div>
         <div
           class="relative overflow-hidden uppercase font-medium flex items-center justify-center bg-cover text-bulma bg-goku h-10 w-10 text-moon-14 rounded-moon-i-sm [&_.status]:w-3 [&_.status]:h-3 [&_.status]:border-2"
-          style="background-image: url(undefined);"
         >
            
           md
@@ -1515,7 +1465,6 @@ Object {
     >
       <div
         class="relative overflow-hidden uppercase font-medium flex items-center justify-center bg-cover text-bulma bg-goku h-10 w-10 text-moon-14 rounded-moon-i-sm [&_.status]:w-3 [&_.status]:h-3 [&_.status]:border-2"
-        style="background-image: url(undefined);"
       >
          
         <svg
@@ -1539,7 +1488,6 @@ Object {
       </div>
       <div
         class="relative overflow-hidden uppercase font-medium flex items-center justify-center bg-cover text-bulma bg-goku h-10 w-10 text-moon-14 rounded-moon-i-sm [&_.status]:w-3 [&_.status]:h-3 [&_.status]:border-2"
-        style="background-image: url(undefined);"
       >
          
         md
@@ -1615,7 +1563,6 @@ Object {
     <div>
       <div
         class="relative overflow-hidden uppercase font-medium flex items-center justify-center bg-cover text-bulma bg-goku h-10 w-10 text-moon-14 rounded-moon-i-sm [&_.status]:w-3 [&_.status]:h-3 [&_.status]:border-2"
-        style="background-image: url(undefined);"
       >
          
         <svg
@@ -1642,7 +1589,6 @@ Object {
       </div>
       <div
         class="relative overflow-hidden uppercase font-medium flex items-center justify-center bg-cover text-bulma bg-goku h-10 w-10 text-moon-14 rounded-moon-i-sm [&_.status]:w-3 [&_.status]:h-3 [&_.status]:border-2"
-        style="background-image: url(undefined);"
       >
          
         md
@@ -1666,7 +1612,6 @@ Object {
   "container": <div>
     <div
       class="relative overflow-hidden uppercase font-medium flex items-center justify-center bg-cover text-bulma bg-goku h-10 w-10 text-moon-14 rounded-moon-i-sm [&_.status]:w-3 [&_.status]:h-3 [&_.status]:border-2"
-      style="background-image: url(undefined);"
     >
        
       <svg
@@ -1693,7 +1638,6 @@ Object {
     </div>
     <div
       class="relative overflow-hidden uppercase font-medium flex items-center justify-center bg-cover text-bulma bg-goku h-10 w-10 text-moon-14 rounded-moon-i-sm [&_.status]:w-3 [&_.status]:h-3 [&_.status]:border-2"
-      style="background-image: url(undefined);"
     >
        
       md
@@ -1774,7 +1718,6 @@ Object {
     <div>
       <div
         class="relative overflow-hidden uppercase font-medium flex items-center justify-center bg-cover bg-goku h-10 w-10 text-moon-14 rounded-moon-i-sm [&_.status]:w-3 [&_.status]:h-3 [&_.status]:border-2 text-chichi"
-        style="background-image: url(undefined);"
       >
          
         <svg
@@ -1798,7 +1741,6 @@ Object {
       </div>
       <div
         class="relative overflow-hidden uppercase font-medium flex items-center justify-center bg-cover h-10 w-10 text-moon-14 rounded-moon-i-sm [&_.status]:w-3 [&_.status]:h-3 [&_.status]:border-2 bg-piccolo text-goten"
-        style="background-image: url(undefined);"
       >
          
         <svg
@@ -1822,7 +1764,6 @@ Object {
       </div>
       <div
         class="relative overflow-hidden uppercase font-medium flex items-center justify-center bg-cover text-bulma bg-goku h-10 w-10 text-moon-14 [&_.status]:w-3 [&_.status]:h-3 [&_.status]:border-2 rounded-full"
-        style="background-image: url(undefined);"
       >
          
         <svg
@@ -1846,7 +1787,6 @@ Object {
       </div>
       <div
         class="relative overflow-hidden uppercase font-medium flex items-center justify-center bg-cover text-bulma bg-goku h-10 w-10 text-moon-14 rounded-moon-i-sm [&_.status]:w-3 [&_.status]:h-3 [&_.status]:border-2"
-        style="background-image: url(undefined);"
       >
          
         <svg
@@ -1873,7 +1813,6 @@ Object {
       </div>
       <div
         class="relative overflow-hidden uppercase font-medium flex items-center justify-center bg-cover text-bulma bg-goku h-10 w-10 text-moon-14 rounded-moon-i-sm [&_.status]:w-3 [&_.status]:h-3 [&_.status]:border-2"
-        style="background-image: url(undefined);"
       >
          
         <svg
@@ -1903,7 +1842,6 @@ Object {
   "container": <div>
     <div
       class="relative overflow-hidden uppercase font-medium flex items-center justify-center bg-cover bg-goku h-10 w-10 text-moon-14 rounded-moon-i-sm [&_.status]:w-3 [&_.status]:h-3 [&_.status]:border-2 text-chichi"
-      style="background-image: url(undefined);"
     >
        
       <svg
@@ -1927,7 +1865,6 @@ Object {
     </div>
     <div
       class="relative overflow-hidden uppercase font-medium flex items-center justify-center bg-cover h-10 w-10 text-moon-14 rounded-moon-i-sm [&_.status]:w-3 [&_.status]:h-3 [&_.status]:border-2 bg-piccolo text-goten"
-      style="background-image: url(undefined);"
     >
        
       <svg
@@ -1951,7 +1888,6 @@ Object {
     </div>
     <div
       class="relative overflow-hidden uppercase font-medium flex items-center justify-center bg-cover text-bulma bg-goku h-10 w-10 text-moon-14 [&_.status]:w-3 [&_.status]:h-3 [&_.status]:border-2 rounded-full"
-      style="background-image: url(undefined);"
     >
        
       <svg
@@ -1975,7 +1911,6 @@ Object {
     </div>
     <div
       class="relative overflow-hidden uppercase font-medium flex items-center justify-center bg-cover text-bulma bg-goku h-10 w-10 text-moon-14 rounded-moon-i-sm [&_.status]:w-3 [&_.status]:h-3 [&_.status]:border-2"
-      style="background-image: url(undefined);"
     >
        
       <svg
@@ -2002,7 +1937,6 @@ Object {
     </div>
     <div
       class="relative overflow-hidden uppercase font-medium flex items-center justify-center bg-cover text-bulma bg-goku h-10 w-10 text-moon-14 rounded-moon-i-sm [&_.status]:w-3 [&_.status]:h-3 [&_.status]:border-2"
-      style="background-image: url(undefined);"
     >
        
       <svg
@@ -2089,7 +2023,6 @@ Object {
     <div>
       <div
         class="relative overflow-hidden uppercase font-medium flex items-center justify-center bg-cover text-bulma bg-goku h-10 w-10 text-moon-14 rounded-moon-i-sm [&_.status]:w-3 [&_.status]:h-3 [&_.status]:border-2"
-        style="background-image: url(undefined);"
       >
          
         <svg
@@ -2116,7 +2049,6 @@ Object {
   "container": <div>
     <div
       class="relative overflow-hidden uppercase font-medium flex items-center justify-center bg-cover text-bulma bg-goku h-10 w-10 text-moon-14 rounded-moon-i-sm [&_.status]:w-3 [&_.status]:h-3 [&_.status]:border-2"
-      style="background-image: url(undefined);"
     >
        
       <svg
@@ -2203,7 +2135,6 @@ Object {
       >
         <div
           class="relative overflow-hidden uppercase font-medium flex items-center justify-center bg-cover text-bulma bg-goku h-6 w-6 text-moon-10-caption rounded-moon-i-xs [&_.status]:w-2 [&_.status]:h-2 [&_.status]:border"
-          style="background-image: url(undefined);"
         >
            
           <svg
@@ -2227,7 +2158,6 @@ Object {
         </div>
         <div
           class="relative overflow-hidden uppercase font-medium flex items-center justify-center bg-cover text-bulma bg-goku h-8 w-8 text-moon-12 rounded-moon-i-sm [&_.status]:w-3 [&_.status]:h-3 [&_.status]:border-2"
-          style="background-image: url(undefined);"
         >
            
           <svg
@@ -2251,7 +2181,6 @@ Object {
         </div>
         <div
           class="relative overflow-hidden uppercase font-medium flex items-center justify-center bg-cover text-bulma bg-goku h-10 w-10 text-moon-14 rounded-moon-i-sm [&_.status]:w-3 [&_.status]:h-3 [&_.status]:border-2"
-          style="background-image: url(undefined);"
         >
            
           <svg
@@ -2275,7 +2204,6 @@ Object {
         </div>
         <div
           class="relative overflow-hidden uppercase font-medium flex items-center justify-center bg-cover text-bulma bg-goku h-12 w-12 text-moon-16 rounded-moon-i-sm [&_.status]:w-4 [&_.status]:h-4 [&_.status]:border-2"
-          style="background-image: url(undefined);"
         >
            
           <svg
@@ -2299,7 +2227,6 @@ Object {
         </div>
         <div
           class="relative overflow-hidden uppercase font-medium flex items-center justify-center bg-cover text-bulma bg-goku h-14 w-14 text-moon-16 rounded-moon-i-sm [&_.status]:w-4 [&_.status]:h-4 [&_.status]:border-2"
-          style="background-image: url(undefined);"
         >
            
           <svg
@@ -2323,7 +2250,6 @@ Object {
         </div>
         <div
           class="relative overflow-hidden uppercase font-medium flex items-center justify-center bg-cover text-bulma bg-goku h-16 w-16 text-moon-20 rounded-moon-i-md [&_.status]:w-4 [&_.status]:h-4 [&_.status]:border-2"
-          style="background-image: url(undefined);"
         >
            
           <svg
@@ -2351,7 +2277,6 @@ Object {
       >
         <div
           class="relative overflow-hidden uppercase font-medium flex items-center justify-center bg-cover text-bulma bg-goku h-6 w-6 text-moon-10-caption rounded-moon-i-xs [&_.status]:w-2 [&_.status]:h-2 [&_.status]:border"
-          style="background-image: url(undefined);"
         >
            
           xs
@@ -2359,7 +2284,6 @@ Object {
         </div>
         <div
           class="relative overflow-hidden uppercase font-medium flex items-center justify-center bg-cover text-bulma bg-goku h-8 w-8 text-moon-12 rounded-moon-i-sm [&_.status]:w-3 [&_.status]:h-3 [&_.status]:border-2"
-          style="background-image: url(undefined);"
         >
            
           sm
@@ -2367,7 +2291,6 @@ Object {
         </div>
         <div
           class="relative overflow-hidden uppercase font-medium flex items-center justify-center bg-cover text-bulma bg-goku h-10 w-10 text-moon-14 rounded-moon-i-sm [&_.status]:w-3 [&_.status]:h-3 [&_.status]:border-2"
-          style="background-image: url(undefined);"
         >
            
           md
@@ -2375,7 +2298,6 @@ Object {
         </div>
         <div
           class="relative overflow-hidden uppercase font-medium flex items-center justify-center bg-cover text-bulma bg-goku h-12 w-12 text-moon-16 rounded-moon-i-sm [&_.status]:w-4 [&_.status]:h-4 [&_.status]:border-2"
-          style="background-image: url(undefined);"
         >
            
           lg
@@ -2383,7 +2305,6 @@ Object {
         </div>
         <div
           class="relative overflow-hidden uppercase font-medium flex items-center justify-center bg-cover text-bulma bg-goku h-14 w-14 text-moon-16 rounded-moon-i-sm [&_.status]:w-4 [&_.status]:h-4 [&_.status]:border-2"
-          style="background-image: url(undefined);"
         >
            
           xl
@@ -2391,7 +2312,6 @@ Object {
         </div>
         <div
           class="relative overflow-hidden uppercase font-medium flex items-center justify-center bg-cover text-bulma bg-goku h-16 w-16 text-moon-20 rounded-moon-i-md [&_.status]:w-4 [&_.status]:h-4 [&_.status]:border-2"
-          style="background-image: url(undefined);"
         >
            
           2xl
@@ -2452,7 +2372,6 @@ Object {
     >
       <div
         class="relative overflow-hidden uppercase font-medium flex items-center justify-center bg-cover text-bulma bg-goku h-6 w-6 text-moon-10-caption rounded-moon-i-xs [&_.status]:w-2 [&_.status]:h-2 [&_.status]:border"
-        style="background-image: url(undefined);"
       >
          
         <svg
@@ -2476,7 +2395,6 @@ Object {
       </div>
       <div
         class="relative overflow-hidden uppercase font-medium flex items-center justify-center bg-cover text-bulma bg-goku h-8 w-8 text-moon-12 rounded-moon-i-sm [&_.status]:w-3 [&_.status]:h-3 [&_.status]:border-2"
-        style="background-image: url(undefined);"
       >
          
         <svg
@@ -2500,7 +2418,6 @@ Object {
       </div>
       <div
         class="relative overflow-hidden uppercase font-medium flex items-center justify-center bg-cover text-bulma bg-goku h-10 w-10 text-moon-14 rounded-moon-i-sm [&_.status]:w-3 [&_.status]:h-3 [&_.status]:border-2"
-        style="background-image: url(undefined);"
       >
          
         <svg
@@ -2524,7 +2441,6 @@ Object {
       </div>
       <div
         class="relative overflow-hidden uppercase font-medium flex items-center justify-center bg-cover text-bulma bg-goku h-12 w-12 text-moon-16 rounded-moon-i-sm [&_.status]:w-4 [&_.status]:h-4 [&_.status]:border-2"
-        style="background-image: url(undefined);"
       >
          
         <svg
@@ -2548,7 +2464,6 @@ Object {
       </div>
       <div
         class="relative overflow-hidden uppercase font-medium flex items-center justify-center bg-cover text-bulma bg-goku h-14 w-14 text-moon-16 rounded-moon-i-sm [&_.status]:w-4 [&_.status]:h-4 [&_.status]:border-2"
-        style="background-image: url(undefined);"
       >
          
         <svg
@@ -2572,7 +2487,6 @@ Object {
       </div>
       <div
         class="relative overflow-hidden uppercase font-medium flex items-center justify-center bg-cover text-bulma bg-goku h-16 w-16 text-moon-20 rounded-moon-i-md [&_.status]:w-4 [&_.status]:h-4 [&_.status]:border-2"
-        style="background-image: url(undefined);"
       >
          
         <svg
@@ -2600,7 +2514,6 @@ Object {
     >
       <div
         class="relative overflow-hidden uppercase font-medium flex items-center justify-center bg-cover text-bulma bg-goku h-6 w-6 text-moon-10-caption rounded-moon-i-xs [&_.status]:w-2 [&_.status]:h-2 [&_.status]:border"
-        style="background-image: url(undefined);"
       >
          
         xs
@@ -2608,7 +2521,6 @@ Object {
       </div>
       <div
         class="relative overflow-hidden uppercase font-medium flex items-center justify-center bg-cover text-bulma bg-goku h-8 w-8 text-moon-12 rounded-moon-i-sm [&_.status]:w-3 [&_.status]:h-3 [&_.status]:border-2"
-        style="background-image: url(undefined);"
       >
          
         sm
@@ -2616,7 +2528,6 @@ Object {
       </div>
       <div
         class="relative overflow-hidden uppercase font-medium flex items-center justify-center bg-cover text-bulma bg-goku h-10 w-10 text-moon-14 rounded-moon-i-sm [&_.status]:w-3 [&_.status]:h-3 [&_.status]:border-2"
-        style="background-image: url(undefined);"
       >
          
         md
@@ -2624,7 +2535,6 @@ Object {
       </div>
       <div
         class="relative overflow-hidden uppercase font-medium flex items-center justify-center bg-cover text-bulma bg-goku h-12 w-12 text-moon-16 rounded-moon-i-sm [&_.status]:w-4 [&_.status]:h-4 [&_.status]:border-2"
-        style="background-image: url(undefined);"
       >
          
         lg
@@ -2632,7 +2542,6 @@ Object {
       </div>
       <div
         class="relative overflow-hidden uppercase font-medium flex items-center justify-center bg-cover text-bulma bg-goku h-14 w-14 text-moon-16 rounded-moon-i-sm [&_.status]:w-4 [&_.status]:h-4 [&_.status]:border-2"
-        style="background-image: url(undefined);"
       >
          
         xl
@@ -2640,7 +2549,6 @@ Object {
       </div>
       <div
         class="relative overflow-hidden uppercase font-medium flex items-center justify-center bg-cover text-bulma bg-goku h-16 w-16 text-moon-20 rounded-moon-i-md [&_.status]:w-4 [&_.status]:h-4 [&_.status]:border-2"
-        style="background-image: url(undefined);"
       >
          
         2xl
@@ -2755,7 +2663,6 @@ Object {
     <div>
       <div
         class="relative overflow-hidden uppercase font-medium flex items-center justify-center bg-cover text-bulma bg-goku h-10 w-10 text-moon-14 rounded-moon-i-sm [&_.status]:w-3 [&_.status]:h-3 [&_.status]:border-2"
-        style="background-image: url(undefined);"
       >
          
         <svg
@@ -2782,7 +2689,6 @@ Object {
       </div>
       <div
         class="relative overflow-hidden uppercase font-medium flex items-center justify-center bg-cover text-bulma bg-goku h-10 w-10 text-moon-14 rounded-moon-i-sm [&_.status]:w-3 [&_.status]:h-3 [&_.status]:border-2"
-        style="background-image: url(undefined);"
       >
          
         <svg
@@ -2809,7 +2715,6 @@ Object {
       </div>
       <div
         class="relative overflow-hidden uppercase font-medium flex items-center justify-center bg-cover text-bulma bg-goku h-10 w-10 text-moon-14 rounded-moon-i-sm [&_.status]:w-3 [&_.status]:h-3 [&_.status]:border-2"
-        style="background-image: url(undefined);"
       >
          
         <svg
@@ -2836,7 +2741,6 @@ Object {
       </div>
       <div
         class="relative overflow-hidden uppercase font-medium flex items-center justify-center bg-cover text-bulma bg-goku h-10 w-10 text-moon-14 rounded-moon-i-sm [&_.status]:w-3 [&_.status]:h-3 [&_.status]:border-2"
-        style="background-image: url(undefined);"
       >
          
         <svg
@@ -2866,7 +2770,6 @@ Object {
   "container": <div>
     <div
       class="relative overflow-hidden uppercase font-medium flex items-center justify-center bg-cover text-bulma bg-goku h-10 w-10 text-moon-14 rounded-moon-i-sm [&_.status]:w-3 [&_.status]:h-3 [&_.status]:border-2"
-      style="background-image: url(undefined);"
     >
        
       <svg
@@ -2893,7 +2796,6 @@ Object {
     </div>
     <div
       class="relative overflow-hidden uppercase font-medium flex items-center justify-center bg-cover text-bulma bg-goku h-10 w-10 text-moon-14 rounded-moon-i-sm [&_.status]:w-3 [&_.status]:h-3 [&_.status]:border-2"
-      style="background-image: url(undefined);"
     >
        
       <svg
@@ -2920,7 +2822,6 @@ Object {
     </div>
     <div
       class="relative overflow-hidden uppercase font-medium flex items-center justify-center bg-cover text-bulma bg-goku h-10 w-10 text-moon-14 rounded-moon-i-sm [&_.status]:w-3 [&_.status]:h-3 [&_.status]:border-2"
-      style="background-image: url(undefined);"
     >
        
       <svg
@@ -2947,7 +2848,6 @@ Object {
     </div>
     <div
       class="relative overflow-hidden uppercase font-medium flex items-center justify-center bg-cover text-bulma bg-goku h-10 w-10 text-moon-14 rounded-moon-i-sm [&_.status]:w-3 [&_.status]:h-3 [&_.status]:border-2"
-      style="background-image: url(undefined);"
     >
        
       <svg
@@ -3034,7 +2934,6 @@ Object {
     <div>
       <div
         class="relative overflow-hidden uppercase font-medium flex items-center justify-center bg-cover text-bulma bg-goku h-10 w-10 text-moon-14 rounded-moon-i-sm [&_.status]:w-3 [&_.status]:h-3 [&_.status]:border-2"
-        style="background-image: url(undefined);"
       >
          
         <svg
@@ -3058,7 +2957,6 @@ Object {
       </div>
       <div
         class="relative overflow-hidden uppercase font-medium flex items-center justify-center bg-cover text-bulma bg-goku h-10 w-10 text-moon-14 rounded-moon-i-sm [&_.status]:w-3 [&_.status]:h-3 [&_.status]:border-2"
-        style="background-image: url(undefined);"
       >
          
         md
@@ -3076,7 +2974,6 @@ Object {
   "container": <div>
     <div
       class="relative overflow-hidden uppercase font-medium flex items-center justify-center bg-cover text-bulma bg-goku h-10 w-10 text-moon-14 rounded-moon-i-sm [&_.status]:w-3 [&_.status]:h-3 [&_.status]:border-2"
-      style="background-image: url(undefined);"
     >
        
       <svg
@@ -3100,7 +2997,6 @@ Object {
     </div>
     <div
       class="relative overflow-hidden uppercase font-medium flex items-center justify-center bg-cover text-bulma bg-goku h-10 w-10 text-moon-14 rounded-moon-i-sm [&_.status]:w-3 [&_.status]:h-3 [&_.status]:border-2"
-      style="background-image: url(undefined);"
     >
        
       md
diff --git a/workspaces/core/src/avatar/styles/Wrapper.tsx b/workspaces/core/src/avatar/styles/Wrapper.tsx
index 96aee11800..59be658562 100644
--- a/workspaces/core/src/avatar/styles/Wrapper.tsx
+++ b/workspaces/core/src/avatar/styles/Wrapper.tsx
@@ -17,13 +17,13 @@ const Wrapper = ({
     className={mergeClassnames(
       'relative overflow-hidden uppercase font-medium flex items-center justify-center bg-cover',
       'text-bulma bg-goku',
-      color && color,
-      bgColor && bgColor,
+      color,
+      bgColor,
       getWrapperSize(size),
       getBorderRadius(size, isRounded),
       className
     )}
-    style={{ backgroundImage: `url('${imageUrl}')` }}
+    style={{ backgroundImage: imageUrl && `url('${imageUrl}')` }}
   >
     {children}
   </div>