@mirai/ui 1.1.16 → 2.0.2

package/build/primitives/Icon/__tests__/__snapshots__/Icon.test.js.snap

@@ -2,7 +2,7 @@
 
 exports[`primitive:<Icon> color prop:accent 1`] = `
 <DocumentFragment>
-  <span
+  <ui_icon
     class="icon accent headline-3"
   >
     <svg
@@ -22,13 +22,13 @@ exports[`primitive:<Icon> color prop:accent 1`] = `
         d="M20 11H7.83l5.59-5.59L12 4l-8 8 8 8 1.41-1.41L7.83 13H20v-2z"
       />
     </svg>
-  </span>
+  </ui_icon>
 </DocumentFragment>
 `;
 
 exports[`primitive:<Icon> color prop:accentDark 1`] = `
 <DocumentFragment>
-  <span
+  <ui_icon
     class="icon accentDark headline-3"
   >
     <svg
@@ -48,13 +48,13 @@ exports[`primitive:<Icon> color prop:accentDark 1`] = `
         d="M20 11H7.83l5.59-5.59L12 4l-8 8 8 8 1.41-1.41L7.83 13H20v-2z"
       />
     </svg>
-  </span>
+  </ui_icon>
 </DocumentFragment>
 `;
 
 exports[`primitive:<Icon> color prop:accentLight 1`] = `
 <DocumentFragment>
-  <span
+  <ui_icon
     class="icon accentLight headline-3"
   >
     <svg
@@ -74,13 +74,13 @@ exports[`primitive:<Icon> color prop:accentLight 1`] = `
         d="M20 11H7.83l5.59-5.59L12 4l-8 8 8 8 1.41-1.41L7.83 13H20v-2z"
       />
     </svg>
-  </span>
+  </ui_icon>
 </DocumentFragment>
 `;
 
 exports[`primitive:<Icon> color prop:dark 1`] = `
 <DocumentFragment>
-  <span
+  <ui_icon
     class="icon dark headline-3"
   >
     <svg
@@ -100,13 +100,13 @@ exports[`primitive:<Icon> color prop:dark 1`] = `
         d="M20 11H7.83l5.59-5.59L12 4l-8 8 8 8 1.41-1.41L7.83 13H20v-2z"
       />
     </svg>
-  </span>
+  </ui_icon>
 </DocumentFragment>
 `;
 
 exports[`primitive:<Icon> color prop:error 1`] = `
 <DocumentFragment>
-  <span
+  <ui_icon
     class="icon error headline-3"
   >
     <svg
@@ -126,13 +126,13 @@ exports[`primitive:<Icon> color prop:error 1`] = `
         d="M20 11H7.83l5.59-5.59L12 4l-8 8 8 8 1.41-1.41L7.83 13H20v-2z"
       />
     </svg>
-  </span>
+  </ui_icon>
 </DocumentFragment>
 `;
 
 exports[`primitive:<Icon> color prop:info 1`] = `
 <DocumentFragment>
-  <span
+  <ui_icon
     class="icon info headline-3"
   >
     <svg
@@ -152,13 +152,13 @@ exports[`primitive:<Icon> color prop:info 1`] = `
         d="M20 11H7.83l5.59-5.59L12 4l-8 8 8 8 1.41-1.41L7.83 13H20v-2z"
       />
     </svg>
-  </span>
+  </ui_icon>
 </DocumentFragment>
 `;
 
 exports[`primitive:<Icon> color prop:light 1`] = `
 <DocumentFragment>
-  <span
+  <ui_icon
     class="icon light headline-3"
   >
     <svg
@@ -178,13 +178,13 @@ exports[`primitive:<Icon> color prop:light 1`] = `
         d="M20 11H7.83l5.59-5.59L12 4l-8 8 8 8 1.41-1.41L7.83 13H20v-2z"
       />
     </svg>
-  </span>
+  </ui_icon>
 </DocumentFragment>
 `;
 
 exports[`primitive:<Icon> color prop:success 1`] = `
 <DocumentFragment>
-  <span
+  <ui_icon
     class="icon success headline-3"
   >
     <svg
@@ -204,13 +204,13 @@ exports[`primitive:<Icon> color prop:success 1`] = `
         d="M20 11H7.83l5.59-5.59L12 4l-8 8 8 8 1.41-1.41L7.83 13H20v-2z"
       />
     </svg>
-  </span>
+  </ui_icon>
 </DocumentFragment>
 `;
 
 exports[`primitive:<Icon> color prop:warning 1`] = `
 <DocumentFragment>
-  <span
+  <ui_icon
     class="icon warning headline-3"
   >
     <svg
@@ -230,13 +230,13 @@ exports[`primitive:<Icon> color prop:warning 1`] = `
         d="M20 11H7.83l5.59-5.59L12 4l-8 8 8 8 1.41-1.41L7.83 13H20v-2z"
       />
     </svg>
-  </span>
+  </ui_icon>
 </DocumentFragment>
 `;
 
 exports[`primitive:<Icon> inherit:className 1`] = `
 <DocumentFragment>
-  <span
+  <ui_icon
     class="icon headline-3 mirai"
   >
     <svg
@@ -256,13 +256,13 @@ exports[`primitive:<Icon> inherit:className 1`] = `
         d="M20 11H7.83l5.59-5.59L12 4l-8 8 8 8 1.41-1.41L7.83 13H20v-2z"
       />
     </svg>
-  </span>
+  </ui_icon>
 </DocumentFragment>
 `;
 
 exports[`primitive:<Icon> prop:action 1`] = `
 <DocumentFragment>
-  <span
+  <ui_icon
     class="icon action"
   >
     <svg
@@ -282,13 +282,13 @@ exports[`primitive:<Icon> prop:action 1`] = `
         d="M20 11H7.83l5.59-5.59L12 4l-8 8 8 8 1.41-1.41L7.83 13H20v-2z"
       />
     </svg>
-  </span>
+  </ui_icon>
 </DocumentFragment>
 `;
 
 exports[`primitive:<Icon> prop:headline & level:1 1`] = `
 <DocumentFragment>
-  <span
+  <ui_icon
     class="icon headline-1"
   >
     <svg
@@ -308,13 +308,13 @@ exports[`primitive:<Icon> prop:headline & level:1 1`] = `
         d="M20 11H7.83l5.59-5.59L12 4l-8 8 8 8 1.41-1.41L7.83 13H20v-2z"
       />
     </svg>
-  </span>
+  </ui_icon>
 </DocumentFragment>
 `;
 
 exports[`primitive:<Icon> prop:headline & level:2 1`] = `
 <DocumentFragment>
-  <span
+  <ui_icon
     class="icon headline-2"
   >
     <svg
@@ -334,13 +334,13 @@ exports[`primitive:<Icon> prop:headline & level:2 1`] = `
         d="M20 11H7.83l5.59-5.59L12 4l-8 8 8 8 1.41-1.41L7.83 13H20v-2z"
       />
     </svg>
-  </span>
+  </ui_icon>
 </DocumentFragment>
 `;
 
 exports[`primitive:<Icon> prop:headline & level:3 1`] = `
 <DocumentFragment>
-  <span
+  <ui_icon
     class="icon headline-3"
   >
     <svg
@@ -360,13 +360,13 @@ exports[`primitive:<Icon> prop:headline & level:3 1`] = `
         d="M20 11H7.83l5.59-5.59L12 4l-8 8 8 8 1.41-1.41L7.83 13H20v-2z"
       />
     </svg>
-  </span>
+  </ui_icon>
 </DocumentFragment>
 `;
 
 exports[`primitive:<Icon> prop:headline & level:4 1`] = `
 <DocumentFragment>
-  <span
+  <ui_icon
     class="icon headline-4"
   >
     <svg
@@ -386,13 +386,13 @@ exports[`primitive:<Icon> prop:headline & level:4 1`] = `
         d="M20 11H7.83l5.59-5.59L12 4l-8 8 8 8 1.41-1.41L7.83 13H20v-2z"
       />
     </svg>
-  </span>
+  </ui_icon>
 </DocumentFragment>
 `;
 
 exports[`primitive:<Icon> prop:headline 1`] = `
 <DocumentFragment>
-  <span
+  <ui_icon
     class="icon headline-3"
   >
     <svg
@@ -412,13 +412,13 @@ exports[`primitive:<Icon> prop:headline 1`] = `
         d="M20 11H7.83l5.59-5.59L12 4l-8 8 8 8 1.41-1.41L7.83 13H20v-2z"
       />
     </svg>
-  </span>
+  </ui_icon>
 </DocumentFragment>
 `;
 
 exports[`primitive:<Icon> prop:paragraph 1`] = `
 <DocumentFragment>
-  <span
+  <ui_icon
     class="icon paragraph"
   >
     <svg
@@ -438,13 +438,13 @@ exports[`primitive:<Icon> prop:paragraph 1`] = `
         d="M20 11H7.83l5.59-5.59L12 4l-8 8 8 8 1.41-1.41L7.83 13H20v-2z"
       />
     </svg>
-  </span>
+  </ui_icon>
 </DocumentFragment>
 `;
 
 exports[`primitive:<Icon> prop:small 1`] = `
 <DocumentFragment>
-  <span
+  <ui_icon
     class="icon small"
   >
     <svg
@@ -464,13 +464,13 @@ exports[`primitive:<Icon> prop:small 1`] = `
         d="M20 11H7.83l5.59-5.59L12 4l-8 8 8 8 1.41-1.41L7.83 13H20v-2z"
       />
     </svg>
-  </span>
+  </ui_icon>
 </DocumentFragment>
 `;
 
 exports[`primitive:<Icon> prop:value prop:value (ADD) 1`] = `
 <DocumentFragment>
-  <span
+  <ui_icon
     class="icon headline-3"
   >
     <svg
@@ -490,13 +490,13 @@ exports[`primitive:<Icon> prop:value prop:value (ADD) 1`] = `
         d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"
       />
     </svg>
-  </span>
+  </ui_icon>
 </DocumentFragment>
 `;
 
 exports[`primitive:<Icon> prop:value prop:value (CHECK) 1`] = `
 <DocumentFragment>
-  <span
+  <ui_icon
     class="icon headline-3"
   >
     <svg
@@ -516,13 +516,13 @@ exports[`primitive:<Icon> prop:value prop:value (CHECK) 1`] = `
         d="M9 16.17 4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41L9 16.17z"
       />
     </svg>
-  </span>
+  </ui_icon>
 </DocumentFragment>
 `;
 
 exports[`primitive:<Icon> prop:value prop:value (CLOSE) 1`] = `
 <DocumentFragment>
-  <span
+  <ui_icon
     class="icon headline-3"
   >
     <svg
@@ -542,13 +542,13 @@ exports[`primitive:<Icon> prop:value prop:value (CLOSE) 1`] = `
         d="M19 6.41 17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12 19 6.41z"
       />
     </svg>
-  </span>
+  </ui_icon>
 </DocumentFragment>
 `;
 
 exports[`primitive:<Icon> prop:value prop:value (DOWN) 1`] = `
 <DocumentFragment>
-  <span
+  <ui_icon
     class="icon headline-3"
   >
     <svg
@@ -568,13 +568,13 @@ exports[`primitive:<Icon> prop:value prop:value (DOWN) 1`] = `
         d="m20 12-1.41-1.41L13 16.17V4h-2v12.17l-5.58-5.59L4 12l8 8 8-8z"
       />
     </svg>
-  </span>
+  </ui_icon>
 </DocumentFragment>
 `;
 
 exports[`primitive:<Icon> prop:value prop:value (ERROR) 1`] = `
 <DocumentFragment>
-  <span
+  <ui_icon
     class="icon headline-3"
   >
     <svg
@@ -594,13 +594,13 @@ exports[`primitive:<Icon> prop:value prop:value (ERROR) 1`] = `
         d="M11 15h2v2h-2zm0-8h2v6h-2zm.99-5C6.47 2 2 6.48 2 12s4.47 10 9.99 10C17.52 22 22 17.52 22 12S17.52 2 11.99 2zM12 20c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z"
       />
     </svg>
-  </span>
+  </ui_icon>
 </DocumentFragment>
 `;
 
 exports[`primitive:<Icon> prop:value prop:value (EXPAND_LESS) 1`] = `
 <DocumentFragment>
-  <span
+  <ui_icon
     class="icon headline-3"
   >
     <svg
@@ -620,13 +620,13 @@ exports[`primitive:<Icon> prop:value prop:value (EXPAND_LESS) 1`] = `
         d="m12 8-6 6 1.41 1.41L12 10.83l4.59 4.58L18 14l-6-6z"
       />
     </svg>
-  </span>
+  </ui_icon>
 </DocumentFragment>
 `;
 
 exports[`primitive:<Icon> prop:value prop:value (EXPAND_MORE) 1`] = `
 <DocumentFragment>
-  <span
+  <ui_icon
     class="icon headline-3"
   >
     <svg
@@ -647,13 +647,13 @@ exports[`primitive:<Icon> prop:value prop:value (EXPAND_MORE) 1`] = `
         d="M16.59 8.59 12 13.17 7.41 8.59 6 10l6 6 6-6-1.41-1.41z"
       />
     </svg>
-  </span>
+  </ui_icon>
 </DocumentFragment>
 `;
 
 exports[`primitive:<Icon> prop:value prop:value (EYE_CLOSE) 1`] = `
 <DocumentFragment>
-  <span
+  <ui_icon
     class="icon headline-3"
   >
     <svg
@@ -673,13 +673,13 @@ exports[`primitive:<Icon> prop:value prop:value (EYE_CLOSE) 1`] = `
         d="M12 6a9.77 9.77 0 0 1 8.82 5.5 9.647 9.647 0 0 1-2.41 3.12l1.41 1.41c1.39-1.23 2.49-2.77 3.18-4.53C21.27 7.11 17 4 12 4c-1.27 0-2.49.2-3.64.57l1.65 1.65C10.66 6.09 11.32 6 12 6zm-1.07 1.14L13 9.21c.57.25 1.03.71 1.28 1.28l2.07 2.07c.08-.34.14-.7.14-1.07C16.5 9.01 14.48 7 12 7c-.37 0-.72.05-1.07.14zM2.01 3.87l2.68 2.68A11.738 11.738 0 0 0 1 11.5C2.73 15.89 7 19 12 19c1.52 0 2.98-.29 4.32-.82l3.42 3.42 1.41-1.41L3.42 2.45 2.01 3.87zm7.5 7.5 2.61 2.61c-.04.01-.08.02-.12.02a2.5 2.5 0 0 1-2.5-2.5c0-.05.01-.08.01-.13zm-3.4-3.4 1.75 1.75a4.6 4.6 0 0 0-.36 1.78 4.507 4.507 0 0 0 6.27 4.14l.98.98c-.88.24-1.8.38-2.75.38a9.77 9.77 0 0 1-8.82-5.5c.7-1.43 1.72-2.61 2.93-3.53z"
       />
     </svg>
-  </span>
+  </ui_icon>
 </DocumentFragment>
 `;
 
 exports[`primitive:<Icon> prop:value prop:value (EYE_OPEN) 1`] = `
 <DocumentFragment>
-  <span
+  <ui_icon
     class="icon headline-3"
   >
     <svg
@@ -699,13 +699,13 @@ exports[`primitive:<Icon> prop:value prop:value (EYE_OPEN) 1`] = `
         d="M12 6a9.77 9.77 0 0 1 8.82 5.5C19.17 14.87 15.79 17 12 17s-7.17-2.13-8.82-5.5A9.77 9.77 0 0 1 12 6m0-2C7 4 2.73 7.11 1 11.5 2.73 15.89 7 19 12 19s9.27-3.11 11-7.5C21.27 7.11 17 4 12 4zm0 5a2.5 2.5 0 0 1 0 5 2.5 2.5 0 0 1 0-5m0-2c-2.48 0-4.5 2.02-4.5 4.5S9.52 16 12 16s4.5-2.02 4.5-4.5S14.48 7 12 7z"
       />
     </svg>
-  </span>
+  </ui_icon>
 </DocumentFragment>
 `;
 
 exports[`primitive:<Icon> prop:value prop:value (FILTER) 1`] = `
 <DocumentFragment>
-  <span
+  <ui_icon
     class="icon headline-3"
   >
     <svg
@@ -725,13 +725,13 @@ exports[`primitive:<Icon> prop:value prop:value (FILTER) 1`] = `
         d="M10 18h4v-2h-4v2zM3 6v2h18V6H3zm3 7h12v-2H6v2z"
       />
     </svg>
-  </span>
+  </ui_icon>
 </DocumentFragment>
 `;
 
 exports[`primitive:<Icon> prop:value prop:value (INFO) 1`] = `
 <DocumentFragment>
-  <span
+  <ui_icon
     class="icon headline-3"
   >
     <svg
@@ -751,13 +751,13 @@ exports[`primitive:<Icon> prop:value prop:value (INFO) 1`] = `
         d="M11 7h2v2h-2zm0 4h2v6h-2zm1-9C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8z"
       />
     </svg>
-  </span>
+  </ui_icon>
 </DocumentFragment>
 `;
 
 exports[`primitive:<Icon> prop:value prop:value (LEFT) 1`] = `
 <DocumentFragment>
-  <span
+  <ui_icon
     class="icon headline-3"
   >
     <svg
@@ -777,13 +777,13 @@ exports[`primitive:<Icon> prop:value prop:value (LEFT) 1`] = `
         d="M20 11H7.83l5.59-5.59L12 4l-8 8 8 8 1.41-1.41L7.83 13H20v-2z"
       />
     </svg>
-  </span>
+  </ui_icon>
 </DocumentFragment>
 `;
 
 exports[`primitive:<Icon> prop:value prop:value (MARKDOWN) 1`] = `
 <DocumentFragment>
-  <span
+  <ui_icon
     class="icon headline-3"
   >
     <svg
@@ -799,13 +799,13 @@ exports[`primitive:<Icon> prop:value prop:value (MARKDOWN) 1`] = `
         d="M 2.875 6 C 1.320313 6 0 7.253906 0 8.8125 L 0 23.1875 C 0 24.746094 1.320313 26 2.875 26 L 29.125 26 C 30.679688 26 32 24.746094 32 23.1875 L 32 8.8125 C 32 7.253906 30.679688 6 29.125 6 Z M 2.875 8 L 29.125 8 C 29.640625 8 30 8.382813 30 8.8125 L 30 23.1875 C 30 23.617188 29.640625 24 29.125 24 L 2.875 24 C 2.359375 24 2 23.617188 2 23.1875 L 2 8.8125 C 2 8.382813 2.359375 8 2.875 8 Z M 5 11 L 5 21 L 8 21 L 8 14.34375 L 11 18.3125 L 14 14.34375 L 14 21 L 17 21 L 17 11 L 14 11 L 11 15 L 8 11 Z M 22 11 L 22 16 L 19 16 L 23.5 21 L 28 16 L 25 16 L 25 11 Z"
       />
     </svg>
-  </span>
+  </ui_icon>
 </DocumentFragment>
 `;
 
 exports[`primitive:<Icon> prop:value prop:value (PHOTO_LIBRARY) 1`] = `
 <DocumentFragment>
-  <span
+  <ui_icon
     class="icon headline-3"
   >
     <svg
@@ -825,13 +825,13 @@ exports[`primitive:<Icon> prop:value prop:value (PHOTO_LIBRARY) 1`] = `
         d="M20 4v12H8V4h12m0-2H8c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm-8.5 9.67 1.69 2.26 2.48-3.1L19 15H9zM2 6v14c0 1.1.9 2 2 2h14v-2H4V6H2z"
       />
     </svg>
-  </span>
+  </ui_icon>
 </DocumentFragment>
 `;
 
 exports[`primitive:<Icon> prop:value prop:value (REMOVE) 1`] = `
 <DocumentFragment>
-  <span
+  <ui_icon
     class="icon headline-3"
   >
     <svg
@@ -851,13 +851,13 @@ exports[`primitive:<Icon> prop:value prop:value (REMOVE) 1`] = `
         d="M19 13H5v-2h14v2z"
       />
     </svg>
-  </span>
+  </ui_icon>
 </DocumentFragment>
 `;
 
 exports[`primitive:<Icon> prop:value prop:value (REPLAY) 1`] = `
 <DocumentFragment>
-  <span
+  <ui_icon
     class="icon headline-3"
   >
     <svg
@@ -886,13 +886,13 @@ exports[`primitive:<Icon> prop:value prop:value (REPLAY) 1`] = `
         d="M12 5V1L7 6l5 5V7c3.31 0 6 2.69 6 6s-2.69 6-6 6-6-2.69-6-6H4c0 4.42 3.58 8 8 8s8-3.58 8-8-3.58-8-8-8z"
       />
     </svg>
-  </span>
+  </ui_icon>
 </DocumentFragment>
 `;
 
 exports[`primitive:<Icon> prop:value prop:value (RIGHT) 1`] = `
 <DocumentFragment>
-  <span
+  <ui_icon
     class="icon headline-3"
   >
     <svg
@@ -912,13 +912,13 @@ exports[`primitive:<Icon> prop:value prop:value (RIGHT) 1`] = `
         d="m12 4-1.41 1.41L16.17 11H4v2h12.17l-5.58 5.59L12 20l8-8-8-8z"
       />
     </svg>
-  </span>
+  </ui_icon>
 </DocumentFragment>
 `;
 
 exports[`primitive:<Icon> prop:value prop:value (SEARCH) 1`] = `
 <DocumentFragment>
-  <span
+  <ui_icon
     class="icon headline-3"
   >
     <svg
@@ -938,13 +938,13 @@ exports[`primitive:<Icon> prop:value prop:value (SEARCH) 1`] = `
         d="M15.5 14h-.79l-.28-.27A6.471 6.471 0 0 0 16 9.5 6.5 6.5 0 1 0 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"
       />
     </svg>
-  </span>
+  </ui_icon>
 </DocumentFragment>
 `;
 
 exports[`primitive:<Icon> prop:value prop:value (SUCCESS) 1`] = `
 <DocumentFragment>
-  <span
+  <ui_icon
     class="icon headline-3"
   >
     <svg
@@ -964,13 +964,13 @@ exports[`primitive:<Icon> prop:value prop:value (SUCCESS) 1`] = `
         d="M16.59 7.58 10 14.17l-3.59-3.58L5 12l5 5 8-8zM12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z"
       />
     </svg>
-  </span>
+  </ui_icon>
 </DocumentFragment>
 `;
 
 exports[`primitive:<Icon> prop:value prop:value (UP) 1`] = `
 <DocumentFragment>
-  <span
+  <ui_icon
     class="icon headline-3"
   >
     <svg
@@ -990,13 +990,13 @@ exports[`primitive:<Icon> prop:value prop:value (UP) 1`] = `
         d="m4 12 1.41 1.41L11 7.83V20h2V7.83l5.58 5.59L20 12l-8-8-8 8z"
       />
     </svg>
-  </span>
+  </ui_icon>
 </DocumentFragment>
 `;
 
 exports[`primitive:<Icon> prop:value prop:value (WARNING) 1`] = `
 <DocumentFragment>
-  <span
+  <ui_icon
     class="icon headline-3"
   >
     <svg
@@ -1012,13 +1012,13 @@ exports[`primitive:<Icon> prop:value prop:value (WARNING) 1`] = `
         d="M12 5.99 19.53 19H4.47L12 5.99M12 2 1 21h22L12 2zm1 14h-2v2h2v-2zm0-6h-2v4h2v-4z"
       />
     </svg>
-  </span>
+  </ui_icon>
 </DocumentFragment>
 `;
 
 exports[`primitive:<Icon> renders 1`] = `
 <DocumentFragment>
-  <span
+  <ui_icon
     class="icon headline-3"
   >
     <svg
@@ -1038,13 +1038,39 @@ exports[`primitive:<Icon> renders 1`] = `
         d="M20 11H7.83l5.59-5.59L12 4l-8 8 8 8 1.41-1.41L7.83 13H20v-2z"
       />
     </svg>
-  </span>
+  </ui_icon>
+</DocumentFragment>
+`;
+
+exports[`primitive:<Icon> tag 1`] = `
+<DocumentFragment>
+  <ui_tag
+    class="icon headline-3"
+  >
+    <svg
+      fill="currentColor"
+      height="1em"
+      stroke="currentColor"
+      stroke-width="0"
+      viewBox="0 0 24 24"
+      width="1em"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M0 0h24v24H0V0z"
+        fill="none"
+      />
+      <path
+        d="M20 11H7.83l5.59-5.59L12 4l-8 8 8 8 1.41-1.41L7.83 13H20v-2z"
+      />
+    </svg>
+  </ui_tag>
 </DocumentFragment>
 `;
 
 exports[`primitive:<Icon> testId 1`] = `
 <DocumentFragment>
-  <span
+  <ui_icon
     class="icon headline-3"
     data-testid="mirai"
   >
@@ -1065,6 +1091,6 @@ exports[`primitive:<Icon> testId 1`] = `
         d="M20 11H7.83l5.59-5.59L12 4l-8 8 8 8 1.41-1.41L7.83 13H20v-2z"
       />
     </svg>
-  </span>
+  </ui_icon>
 </DocumentFragment>
 `;

package/build/primitives/Layer/Layer.js

@@ -111,7 +111,7 @@ var Layer = function Layer(_ref) {
   return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_Primitive.Primitive, {
     ref: componentRef,
     role: others.role || 'layer',
-    tag: "span",
+    tag: others.tag || 'layer',
     className: _LayerModule.default.container,
     testId: others.testId
   }, children.find(function (_ref2) {
@@ -120,6 +120,7 @@ var Layer = function Layer(_ref) {
   })), (forceRender || visible) && /*#__PURE__*/_react.default.createElement(_Primitive.Primitive, {
     ref: contentRef,
     role: others.role ? "".concat(others.role, "-content") : 'layer-content',
+    tag: "".concat(others.tag || 'layer', "_content"),
     className: (0, _helpers.styles)(_LayerModule.default.layer, fixed && _LayerModule.default.fixed, !visible && _LayerModule.default.hidden),
     style: _objectSpread({}, position)
   }, /*#__PURE__*/_react.default.createElement(createWrapper ? 'div' : _react.default.Fragment, createWrapper ? {