@mirai/ui 1.1.0-f → 1.1.1

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

@@ -2,8 +2,8 @@
 
 exports[`primitive:<Icon> inherit:className 1`] = `
 <DocumentFragment>
-  <ui_icon
-    class="icon h3 mirai"
+  <span
+    class="icon headline-3 mirai"
   >
     <svg
       fill="currentColor"
@@ -22,13 +22,39 @@ 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>
-  </ui_icon>
+  </span>
+</DocumentFragment>
+`;
+
+exports[`primitive:<Icon> prop:accent 1`] = `
+<DocumentFragment>
+  <span
+    class="icon accent 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>
+  </span>
 </DocumentFragment>
 `;
 
 exports[`primitive:<Icon> prop:action 1`] = `
 <DocumentFragment>
-  <ui_icon
+  <span
     class="icon action"
   >
     <svg
@@ -48,14 +74,40 @@ 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>
-  </ui_icon>
+  </span>
+</DocumentFragment>
+`;
+
+exports[`primitive:<Icon> prop:error 1`] = `
+<DocumentFragment>
+  <span
+    class="icon error 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>
+  </span>
 </DocumentFragment>
 `;
 
 exports[`primitive:<Icon> prop:headline & level:1 1`] = `
 <DocumentFragment>
-  <ui_icon
-    class="icon h1"
+  <span
+    class="icon headline-1"
   >
     <svg
       fill="currentColor"
@@ -74,14 +126,14 @@ 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>
-  </ui_icon>
+  </span>
 </DocumentFragment>
 `;
 
 exports[`primitive:<Icon> prop:headline & level:2 1`] = `
 <DocumentFragment>
-  <ui_icon
-    class="icon h2"
+  <span
+    class="icon headline-2"
   >
     <svg
       fill="currentColor"
@@ -100,14 +152,14 @@ 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>
-  </ui_icon>
+  </span>
 </DocumentFragment>
 `;
 
 exports[`primitive:<Icon> prop:headline & level:3 1`] = `
 <DocumentFragment>
-  <ui_icon
-    class="icon h3"
+  <span
+    class="icon headline-3"
   >
     <svg
       fill="currentColor"
@@ -126,14 +178,14 @@ 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>
-  </ui_icon>
+  </span>
 </DocumentFragment>
 `;
 
 exports[`primitive:<Icon> prop:headline & level:4 1`] = `
 <DocumentFragment>
-  <ui_icon
-    class="icon h4"
+  <span
+    class="icon headline-4"
   >
     <svg
       fill="currentColor"
@@ -152,14 +204,14 @@ 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>
-  </ui_icon>
+  </span>
 </DocumentFragment>
 `;
 
 exports[`primitive:<Icon> prop:headline 1`] = `
 <DocumentFragment>
-  <ui_icon
-    class="icon h3"
+  <span
+    class="icon headline-3"
   >
     <svg
       fill="currentColor"
@@ -178,13 +230,39 @@ 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>
-  </ui_icon>
+  </span>
+</DocumentFragment>
+`;
+
+exports[`primitive:<Icon> prop:lighten 1`] = `
+<DocumentFragment>
+  <span
+    class="icon headline-3 lighten"
+  >
+    <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>
+  </span>
 </DocumentFragment>
 `;
 
 exports[`primitive:<Icon> prop:paragraph 1`] = `
 <DocumentFragment>
-  <ui_icon
+  <span
     class="icon paragraph"
   >
     <svg
@@ -204,13 +282,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>
-  </ui_icon>
+  </span>
 </DocumentFragment>
 `;
 
 exports[`primitive:<Icon> prop:small 1`] = `
 <DocumentFragment>
-  <ui_icon
+  <span
     class="icon small"
   >
     <svg
@@ -230,14 +308,40 @@ 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>
-  </ui_icon>
+  </span>
+</DocumentFragment>
+`;
+
+exports[`primitive:<Icon> prop:success 1`] = `
+<DocumentFragment>
+  <span
+    class="icon headline-3 success"
+  >
+    <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>
+  </span>
 </DocumentFragment>
 `;
 
 exports[`primitive:<Icon> prop:value prop:value (ADD) 1`] = `
 <DocumentFragment>
-  <ui_icon
-    class="icon h3"
+  <span
+    class="icon headline-3"
   >
     <svg
       fill="currentColor"
@@ -256,14 +360,14 @@ exports[`primitive:<Icon> prop:value prop:value (ADD) 1`] = `
         d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"
       />
     </svg>
-  </ui_icon>
+  </span>
 </DocumentFragment>
 `;
 
 exports[`primitive:<Icon> prop:value prop:value (CHECK) 1`] = `
 <DocumentFragment>
-  <ui_icon
-    class="icon h3"
+  <span
+    class="icon headline-3"
   >
     <svg
       fill="currentColor"
@@ -279,17 +383,17 @@ exports[`primitive:<Icon> prop:value prop:value (CHECK) 1`] = `
         fill="none"
       />
       <path
-        d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41L9 16.17z"
+        d="M9 16.17 4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41L9 16.17z"
       />
     </svg>
-  </ui_icon>
+  </span>
 </DocumentFragment>
 `;
 
 exports[`primitive:<Icon> prop:value prop:value (CLOSE) 1`] = `
 <DocumentFragment>
-  <ui_icon
-    class="icon h3"
+  <span
+    class="icon headline-3"
   >
     <svg
       fill="currentColor"
@@ -305,17 +409,17 @@ exports[`primitive:<Icon> prop:value prop:value (CLOSE) 1`] = `
         fill="none"
       />
       <path
-        d="M19 6.41L17.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"
+        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>
-  </ui_icon>
+  </span>
 </DocumentFragment>
 `;
 
 exports[`primitive:<Icon> prop:value prop:value (DOWN) 1`] = `
 <DocumentFragment>
-  <ui_icon
-    class="icon h3"
+  <span
+    class="icon headline-3"
   >
     <svg
       fill="currentColor"
@@ -331,17 +435,17 @@ exports[`primitive:<Icon> prop:value prop:value (DOWN) 1`] = `
         fill="none"
       />
       <path
-        d="M20 12l-1.41-1.41L13 16.17V4h-2v12.17l-5.58-5.59L4 12l8 8 8-8z"
+        d="m20 12-1.41-1.41L13 16.17V4h-2v12.17l-5.58-5.59L4 12l8 8 8-8z"
       />
     </svg>
-  </ui_icon>
+  </span>
 </DocumentFragment>
 `;
 
 exports[`primitive:<Icon> prop:value prop:value (ERROR) 1`] = `
 <DocumentFragment>
-  <ui_icon
-    class="icon h3"
+  <span
+    class="icon headline-3"
   >
     <svg
       fill="currentColor"
@@ -360,14 +464,14 @@ 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>
-  </ui_icon>
+  </span>
 </DocumentFragment>
 `;
 
 exports[`primitive:<Icon> prop:value prop:value (EXPAND_LESS) 1`] = `
 <DocumentFragment>
-  <ui_icon
-    class="icon h3"
+  <span
+    class="icon headline-3"
   >
     <svg
       fill="currentColor"
@@ -383,17 +487,17 @@ exports[`primitive:<Icon> prop:value prop:value (EXPAND_LESS) 1`] = `
         fill="none"
       />
       <path
-        d="M12 8l-6 6 1.41 1.41L12 10.83l4.59 4.58L18 14l-6-6z"
+        d="m12 8-6 6 1.41 1.41L12 10.83l4.59 4.58L18 14l-6-6z"
       />
     </svg>
-  </ui_icon>
+  </span>
 </DocumentFragment>
 `;
 
 exports[`primitive:<Icon> prop:value prop:value (EXPAND_MORE) 1`] = `
 <DocumentFragment>
-  <ui_icon
-    class="icon h3"
+  <span
+    class="icon headline-3"
   >
     <svg
       fill="currentColor"
@@ -410,17 +514,17 @@ exports[`primitive:<Icon> prop:value prop:value (EXPAND_MORE) 1`] = `
         opacity=".87"
       />
       <path
-        d="M16.59 8.59L12 13.17 7.41 8.59 6 10l6 6 6-6-1.41-1.41z"
+        d="M16.59 8.59 12 13.17 7.41 8.59 6 10l6 6 6-6-1.41-1.41z"
       />
     </svg>
-  </ui_icon>
+  </span>
 </DocumentFragment>
 `;
 
 exports[`primitive:<Icon> prop:value prop:value (EYE_CLOSE) 1`] = `
 <DocumentFragment>
-  <ui_icon
-    class="icon h3"
+  <span
+    class="icon headline-3"
   >
     <svg
       fill="currentColor"
@@ -436,17 +540,17 @@ exports[`primitive:<Icon> prop:value prop:value (EYE_CLOSE) 1`] = `
         fill="none"
       />
       <path
-        d="M12 6a9.77 9.77 0 018.82 5.5 9.647 9.647 0 01-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 001 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.5l2.61 2.61c-.04.01-.08.02-.12.02a2.5 2.5 0 01-2.5-2.5c0-.05.01-.08.01-.13zm-3.4-3.4l1.75 1.75a4.6 4.6 0 00-.36 1.78 4.507 4.507 0 006.27 4.14l.98.98c-.88.24-1.8.38-2.75.38a9.77 9.77 0 01-8.82-5.5c.7-1.43 1.72-2.61 2.93-3.53z"
+        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>
-  </ui_icon>
+  </span>
 </DocumentFragment>
 `;
 
 exports[`primitive:<Icon> prop:value prop:value (EYE_OPEN) 1`] = `
 <DocumentFragment>
-  <ui_icon
-    class="icon h3"
+  <span
+    class="icon headline-3"
   >
     <svg
       fill="currentColor"
@@ -462,17 +566,17 @@ exports[`primitive:<Icon> prop:value prop:value (EYE_OPEN) 1`] = `
         fill="none"
       />
       <path
-        d="M12 6a9.77 9.77 0 018.82 5.5C19.17 14.87 15.79 17 12 17s-7.17-2.13-8.82-5.5A9.77 9.77 0 0112 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 010 5 2.5 2.5 0 010-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"
+        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>
-  </ui_icon>
+  </span>
 </DocumentFragment>
 `;
 
 exports[`primitive:<Icon> prop:value prop:value (FILTER) 1`] = `
 <DocumentFragment>
-  <ui_icon
-    class="icon h3"
+  <span
+    class="icon headline-3"
   >
     <svg
       fill="currentColor"
@@ -491,14 +595,14 @@ exports[`primitive:<Icon> prop:value prop:value (FILTER) 1`] = `
         d="M10 18h4v-2h-4v2zM3 6v2h18V6H3zm3 7h12v-2H6v2z"
       />
     </svg>
-  </ui_icon>
+  </span>
 </DocumentFragment>
 `;
 
 exports[`primitive:<Icon> prop:value prop:value (INFO) 1`] = `
 <DocumentFragment>
-  <ui_icon
-    class="icon h3"
+  <span
+    class="icon headline-3"
   >
     <svg
       fill="currentColor"
@@ -517,14 +621,14 @@ 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>
-  </ui_icon>
+  </span>
 </DocumentFragment>
 `;
 
 exports[`primitive:<Icon> prop:value prop:value (LEFT) 1`] = `
 <DocumentFragment>
-  <ui_icon
-    class="icon h3"
+  <span
+    class="icon headline-3"
   >
     <svg
       fill="currentColor"
@@ -543,14 +647,14 @@ 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>
-  </ui_icon>
+  </span>
 </DocumentFragment>
 `;
 
 exports[`primitive:<Icon> prop:value prop:value (MARKDOWN) 1`] = `
 <DocumentFragment>
-  <ui_icon
-    class="icon h3"
+  <span
+    class="icon headline-3"
   >
     <svg
       fill="currentColor"
@@ -565,14 +669,40 @@ 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>
-  </ui_icon>
+  </span>
+</DocumentFragment>
+`;
+
+exports[`primitive:<Icon> prop:value prop:value (PHOTO_LIBRARY) 1`] = `
+<DocumentFragment>
+  <span
+    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 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>
 </DocumentFragment>
 `;
 
 exports[`primitive:<Icon> prop:value prop:value (REMOVE) 1`] = `
 <DocumentFragment>
-  <ui_icon
-    class="icon h3"
+  <span
+    class="icon headline-3"
   >
     <svg
       fill="currentColor"
@@ -591,14 +721,49 @@ exports[`primitive:<Icon> prop:value prop:value (REMOVE) 1`] = `
         d="M19 13H5v-2h14v2z"
       />
     </svg>
-  </ui_icon>
+  </span>
+</DocumentFragment>
+`;
+
+exports[`primitive:<Icon> prop:value prop:value (REPLAY) 1`] = `
+<DocumentFragment>
+  <span
+    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"
+    >
+      <g
+        fill="none"
+      >
+        <path
+          d="M0 0h24v24H0z"
+        />
+        <path
+          d="M0 0h24v24H0z"
+        />
+        <path
+          d="M0 0h24v24H0z"
+        />
+      </g>
+      <path
+        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>
 </DocumentFragment>
 `;
 
 exports[`primitive:<Icon> prop:value prop:value (RIGHT) 1`] = `
 <DocumentFragment>
-  <ui_icon
-    class="icon h3"
+  <span
+    class="icon headline-3"
   >
     <svg
       fill="currentColor"
@@ -614,17 +779,17 @@ exports[`primitive:<Icon> prop:value prop:value (RIGHT) 1`] = `
         fill="none"
       />
       <path
-        d="M12 4l-1.41 1.41L16.17 11H4v2h12.17l-5.58 5.59L12 20l8-8-8-8z"
+        d="m12 4-1.41 1.41L16.17 11H4v2h12.17l-5.58 5.59L12 20l8-8-8-8z"
       />
     </svg>
-  </ui_icon>
+  </span>
 </DocumentFragment>
 `;
 
 exports[`primitive:<Icon> prop:value prop:value (SEARCH) 1`] = `
 <DocumentFragment>
-  <ui_icon
-    class="icon h3"
+  <span
+    class="icon headline-3"
   >
     <svg
       fill="currentColor"
@@ -640,17 +805,17 @@ exports[`primitive:<Icon> prop:value prop:value (SEARCH) 1`] = `
         fill="none"
       />
       <path
-        d="M15.5 14h-.79l-.28-.27A6.471 6.471 0 0016 9.5 6.5 6.5 0 109.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"
+        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>
-  </ui_icon>
+  </span>
 </DocumentFragment>
 `;
 
 exports[`primitive:<Icon> prop:value prop:value (SUCCESS) 1`] = `
 <DocumentFragment>
-  <ui_icon
-    class="icon h3"
+  <span
+    class="icon headline-3"
   >
     <svg
       fill="currentColor"
@@ -662,21 +827,21 @@ exports[`primitive:<Icon> prop:value prop:value (SUCCESS) 1`] = `
       xmlns="http://www.w3.org/2000/svg"
     >
       <path
-        d="M0 0h24v24H0V0z"
+        d="M0 0h24v24H0V0zm0 0h24v24H0V0z"
         fill="none"
       />
       <path
-        d="M12 2C6.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 8zm4.59-12.42L10 14.17l-2.59-2.58L6 13l4 4 8-8z"
+        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>
-  </ui_icon>
+  </span>
 </DocumentFragment>
 `;
 
 exports[`primitive:<Icon> prop:value prop:value (UP) 1`] = `
 <DocumentFragment>
-  <ui_icon
-    class="icon h3"
+  <span
+    class="icon headline-3"
   >
     <svg
       fill="currentColor"
@@ -692,17 +857,17 @@ exports[`primitive:<Icon> prop:value prop:value (UP) 1`] = `
         fill="none"
       />
       <path
-        d="M4 12l1.41 1.41L11 7.83V20h2V7.83l5.58 5.59L20 12l-8-8-8 8z"
+        d="m4 12 1.41 1.41L11 7.83V20h2V7.83l5.58 5.59L20 12l-8-8-8 8z"
       />
     </svg>
-  </ui_icon>
+  </span>
 </DocumentFragment>
 `;
 
 exports[`primitive:<Icon> prop:value prop:value (WARNING) 1`] = `
 <DocumentFragment>
-  <ui_icon
-    class="icon h3"
+  <span
+    class="icon headline-3"
   >
     <svg
       fill="currentColor"
@@ -714,17 +879,43 @@ exports[`primitive:<Icon> prop:value prop:value (WARNING) 1`] = `
       xmlns="http://www.w3.org/2000/svg"
     >
       <path
-        d="M12 5.99L19.53 19H4.47L12 5.99M12 2L1 21h22L12 2zm1 14h-2v2h2v-2zm0-6h-2v4h2v-4z"
+        d="M12 5.99 19.53 19H4.47L12 5.99M12 2 1 21h22L12 2zm1 14h-2v2h2v-2zm0-6h-2v4h2v-4z"
+      />
+    </svg>
+  </span>
+</DocumentFragment>
+`;
+
+exports[`primitive:<Icon> prop:warning 1`] = `
+<DocumentFragment>
+  <span
+    class="icon headline-3 warning"
+  >
+    <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_icon>
+  </span>
 </DocumentFragment>
 `;
 
 exports[`primitive:<Icon> renders 1`] = `
 <DocumentFragment>
-  <ui_icon
-    class="icon h3"
+  <span
+    class="icon headline-3"
   >
     <svg
       fill="currentColor"
@@ -743,14 +934,14 @@ 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>
-  </ui_icon>
+  </span>
 </DocumentFragment>
 `;
 
 exports[`primitive:<Icon> testId 1`] = `
 <DocumentFragment>
-  <ui_icon
-    class="icon h3"
+  <span
+    class="icon headline-3"
     data-testid="mirai"
   >
     <svg
@@ -770,6 +961,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>
-  </ui_icon>
+  </span>
 </DocumentFragment>
 `;