@mirai/ui 1.1.16 → 2.0.2

package/build/components/Notification/__tests__/__snapshots__/Notification.test.js.snap

@@ -2,10 +2,10 @@
 
 exports[`component:<Notification> inherit:className 1`] = `
 <DocumentFragment>
-  <div
+  <ui_notification
     class="view row notification outlined mirai"
   >
-    <span
+    <ui_icon
       class="icon headline-3"
     >
       <svg
@@ -25,26 +25,26 @@ exports[`component:<Notification> inherit:className 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>
-    <div
+    </ui_icon>
+    <ui_view
       class="view texts"
     >
-      <span
+      <ui_text
         class="text action"
       >
         Lorem Ipsum...
-      </span>
-    </div>
-  </div>
+      </ui_text>
+    </ui_view>
+  </ui_notification>
 </DocumentFragment>
 `;
 
 exports[`component:<Notification> prop:contrast & inline 1`] = `
 <DocumentFragment>
-  <div
+  <ui_notification
     class="view row notification contrast inline"
   >
-    <span
+    <ui_icon
       class="icon headline-3"
     >
       <svg
@@ -64,26 +64,26 @@ exports[`component:<Notification> prop:contrast & inline 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>
-    <div
+    </ui_icon>
+    <ui_view
       class="view texts"
     >
-      <span
+      <ui_text
         class="text action"
       >
         Lorem Ipsum...
-      </span>
-    </div>
-  </div>
+      </ui_text>
+    </ui_view>
+  </ui_notification>
 </DocumentFragment>
 `;
 
 exports[`component:<Notification> prop:contrast & large 1`] = `
 <DocumentFragment>
-  <div
+  <ui_notification
     class="view row notification contrast outlined large"
   >
-    <span
+    <ui_icon
       class="icon headline-1"
     >
       <svg
@@ -103,26 +103,26 @@ exports[`component:<Notification> prop:contrast & large 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>
-    <div
+    </ui_icon>
+    <ui_view
       class="view texts"
     >
-      <span
+      <ui_text
         class="text paragraph"
       >
         Lorem Ipsum...
-      </span>
-    </div>
-  </div>
+      </ui_text>
+    </ui_view>
+  </ui_notification>
 </DocumentFragment>
 `;
 
 exports[`component:<Notification> prop:contrast & small 1`] = `
 <DocumentFragment>
-  <div
+  <ui_notification
     class="view row notification contrast outlined small"
   >
-    <span
+    <ui_icon
       class="icon paragraph"
     >
       <svg
@@ -142,26 +142,26 @@ exports[`component:<Notification> prop:contrast & small 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>
-    <div
+    </ui_icon>
+    <ui_view
       class="view texts"
     >
-      <span
+      <ui_text
         class="text small"
       >
         Lorem Ipsum...
-      </span>
-    </div>
-  </div>
+      </ui_text>
+    </ui_view>
+  </ui_notification>
 </DocumentFragment>
 `;
 
 exports[`component:<Notification> prop:contrast 1`] = `
 <DocumentFragment>
-  <div
+  <ui_notification
     class="view row notification contrast outlined"
   >
-    <span
+    <ui_icon
       class="icon headline-3"
     >
       <svg
@@ -181,26 +181,26 @@ exports[`component:<Notification> prop:contrast 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>
-    <div
+    </ui_icon>
+    <ui_view
       class="view texts"
     >
-      <span
+      <ui_text
         class="text action"
       >
         Lorem Ipsum...
-      </span>
-    </div>
-  </div>
+      </ui_text>
+    </ui_view>
+  </ui_notification>
 </DocumentFragment>
 `;
 
 exports[`component:<Notification> prop:error & inline 1`] = `
 <DocumentFragment>
-  <div
+  <ui_notification
     class="view row notification error inline"
   >
-    <span
+    <ui_icon
       class="icon headline-3"
     >
       <svg
@@ -220,26 +220,26 @@ exports[`component:<Notification> prop:error & inline 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>
-    <div
+    </ui_icon>
+    <ui_view
       class="view texts"
     >
-      <span
+      <ui_text
         class="text action"
       >
         Lorem Ipsum...
-      </span>
-    </div>
-  </div>
+      </ui_text>
+    </ui_view>
+  </ui_notification>
 </DocumentFragment>
 `;
 
 exports[`component:<Notification> prop:error & large 1`] = `
 <DocumentFragment>
-  <div
+  <ui_notification
     class="view row notification error outlined large"
   >
-    <span
+    <ui_icon
       class="icon headline-1"
     >
       <svg
@@ -259,26 +259,26 @@ exports[`component:<Notification> prop:error & large 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>
-    <div
+    </ui_icon>
+    <ui_view
       class="view texts"
     >
-      <span
+      <ui_text
         class="text paragraph"
       >
         Lorem Ipsum...
-      </span>
-    </div>
-  </div>
+      </ui_text>
+    </ui_view>
+  </ui_notification>
 </DocumentFragment>
 `;
 
 exports[`component:<Notification> prop:error & small 1`] = `
 <DocumentFragment>
-  <div
+  <ui_notification
     class="view row notification error outlined small"
   >
-    <span
+    <ui_icon
       class="icon paragraph"
     >
       <svg
@@ -298,26 +298,26 @@ exports[`component:<Notification> prop:error & small 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>
-    <div
+    </ui_icon>
+    <ui_view
       class="view texts"
     >
-      <span
+      <ui_text
         class="text small"
       >
         Lorem Ipsum...
-      </span>
-    </div>
-  </div>
+      </ui_text>
+    </ui_view>
+  </ui_notification>
 </DocumentFragment>
 `;
 
 exports[`component:<Notification> prop:error 1`] = `
 <DocumentFragment>
-  <div
+  <ui_notification
     class="view row notification error outlined"
   >
-    <span
+    <ui_icon
       class="icon headline-3"
     >
       <svg
@@ -337,26 +337,26 @@ exports[`component:<Notification> prop: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>
-    <div
+    </ui_icon>
+    <ui_view
       class="view texts"
     >
-      <span
+      <ui_text
         class="text action"
       >
         Lorem Ipsum...
-      </span>
-    </div>
-  </div>
+      </ui_text>
+    </ui_view>
+  </ui_notification>
 </DocumentFragment>
 `;
 
 exports[`component:<Notification> prop:info & inline 1`] = `
 <DocumentFragment>
-  <div
+  <ui_notification
     class="view row notification info inline"
   >
-    <span
+    <ui_icon
       class="icon headline-3"
     >
       <svg
@@ -376,26 +376,26 @@ exports[`component:<Notification> prop:info & inline 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>
-    <div
+    </ui_icon>
+    <ui_view
       class="view texts"
     >
-      <span
+      <ui_text
         class="text action"
       >
         Lorem Ipsum...
-      </span>
-    </div>
-  </div>
+      </ui_text>
+    </ui_view>
+  </ui_notification>
 </DocumentFragment>
 `;
 
 exports[`component:<Notification> prop:info & large 1`] = `
 <DocumentFragment>
-  <div
+  <ui_notification
     class="view row notification info outlined large"
   >
-    <span
+    <ui_icon
       class="icon headline-1"
     >
       <svg
@@ -415,26 +415,26 @@ exports[`component:<Notification> prop:info & large 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>
-    <div
+    </ui_icon>
+    <ui_view
       class="view texts"
     >
-      <span
+      <ui_text
         class="text paragraph"
       >
         Lorem Ipsum...
-      </span>
-    </div>
-  </div>
+      </ui_text>
+    </ui_view>
+  </ui_notification>
 </DocumentFragment>
 `;
 
 exports[`component:<Notification> prop:info & small 1`] = `
 <DocumentFragment>
-  <div
+  <ui_notification
     class="view row notification info outlined small"
   >
-    <span
+    <ui_icon
       class="icon paragraph"
     >
       <svg
@@ -454,26 +454,26 @@ exports[`component:<Notification> prop:info & small 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>
-    <div
+    </ui_icon>
+    <ui_view
       class="view texts"
     >
-      <span
+      <ui_text
         class="text small"
       >
         Lorem Ipsum...
-      </span>
-    </div>
-  </div>
+      </ui_text>
+    </ui_view>
+  </ui_notification>
 </DocumentFragment>
 `;
 
 exports[`component:<Notification> prop:info 1`] = `
 <DocumentFragment>
-  <div
+  <ui_notification
     class="view row notification info outlined"
   >
-    <span
+    <ui_icon
       class="icon headline-3"
     >
       <svg
@@ -493,26 +493,26 @@ exports[`component:<Notification> prop: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>
-    <div
+    </ui_icon>
+    <ui_view
       class="view texts"
     >
-      <span
+      <ui_text
         class="text action"
       >
         Lorem Ipsum...
-      </span>
-    </div>
-  </div>
+      </ui_text>
+    </ui_view>
+  </ui_notification>
 </DocumentFragment>
 `;
 
 exports[`component:<Notification> prop:inline 1`] = `
 <DocumentFragment>
-  <div
+  <ui_notification
     class="view row notification inline"
   >
-    <span
+    <ui_icon
       class="icon headline-3"
     >
       <svg
@@ -532,26 +532,26 @@ exports[`component:<Notification> prop:inline 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>
-    <div
+    </ui_icon>
+    <ui_view
       class="view texts"
     >
-      <span
+      <ui_text
         class="text action"
       >
         Lorem Ipsum...
-      </span>
-    </div>
-  </div>
+      </ui_text>
+    </ui_view>
+  </ui_notification>
 </DocumentFragment>
 `;
 
 exports[`component:<Notification> prop:large 1`] = `
 <DocumentFragment>
-  <div
+  <ui_notification
     class="view row notification outlined large"
   >
-    <span
+    <ui_icon
       class="icon headline-1"
     >
       <svg
@@ -571,27 +571,27 @@ exports[`component:<Notification> prop:large 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>
-    <div
+    </ui_icon>
+    <ui_view
       class="view texts"
     >
-      <span
+      <ui_text
         class="text paragraph"
       >
         Lorem Ipsum...
-      </span>
-    </div>
-  </div>
+      </ui_text>
+    </ui_view>
+  </ui_notification>
 </DocumentFragment>
 `;
 
 exports[`component:<Notification> prop:onClose 1`] = `
 <DocumentFragment>
-  <div
+  <ui_notification
     class="view row notification outlined"
     data-testid="mirai-onClose"
   >
-    <span
+    <ui_icon
       class="icon headline-3"
     >
       <svg
@@ -611,21 +611,22 @@ exports[`component:<Notification> prop:onClose 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>
-    <div
+    </ui_icon>
+    <ui_view
       class="view texts"
     >
-      <span
+      <ui_text
         class="text action"
       >
         Lorem Ipsum...
-      </span>
-    </div>
-    <div
+      </ui_text>
+    </ui_view>
+    <ui_pressable
       class="pressable"
       data-testid="mirai-onClose-button-close"
+      tabindex="0"
     >
-      <span
+      <ui_icon
         class="icon headline-3"
       >
         <svg
@@ -645,18 +646,18 @@ exports[`component:<Notification> prop:onClose 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>
-    </div>
-  </div>
+      </ui_icon>
+    </ui_pressable>
+  </ui_notification>
 </DocumentFragment>
 `;
 
 exports[`component:<Notification> prop:small 1`] = `
 <DocumentFragment>
-  <div
+  <ui_notification
     class="view row notification outlined small"
   >
-    <span
+    <ui_icon
       class="icon paragraph"
     >
       <svg
@@ -676,26 +677,26 @@ exports[`component:<Notification> prop:small 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>
-    <div
+    </ui_icon>
+    <ui_view
       class="view texts"
     >
-      <span
+      <ui_text
         class="text small"
       >
         Lorem Ipsum...
-      </span>
-    </div>
-  </div>
+      </ui_text>
+    </ui_view>
+  </ui_notification>
 </DocumentFragment>
 `;
 
 exports[`component:<Notification> prop:success & inline 1`] = `
 <DocumentFragment>
-  <div
+  <ui_notification
     class="view row notification success inline"
   >
-    <span
+    <ui_icon
       class="icon headline-3"
     >
       <svg
@@ -715,26 +716,26 @@ exports[`component:<Notification> prop:success & inline 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>
-    <div
+    </ui_icon>
+    <ui_view
       class="view texts"
     >
-      <span
+      <ui_text
         class="text action"
       >
         Lorem Ipsum...
-      </span>
-    </div>
-  </div>
+      </ui_text>
+    </ui_view>
+  </ui_notification>
 </DocumentFragment>
 `;
 
 exports[`component:<Notification> prop:success & large 1`] = `
 <DocumentFragment>
-  <div
+  <ui_notification
     class="view row notification success outlined large"
   >
-    <span
+    <ui_icon
       class="icon headline-1"
     >
       <svg
@@ -754,26 +755,26 @@ exports[`component:<Notification> prop:success & large 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>
-    <div
+    </ui_icon>
+    <ui_view
       class="view texts"
     >
-      <span
+      <ui_text
         class="text paragraph"
       >
         Lorem Ipsum...
-      </span>
-    </div>
-  </div>
+      </ui_text>
+    </ui_view>
+  </ui_notification>
 </DocumentFragment>
 `;
 
 exports[`component:<Notification> prop:success & small 1`] = `
 <DocumentFragment>
-  <div
+  <ui_notification
     class="view row notification success outlined small"
   >
-    <span
+    <ui_icon
       class="icon paragraph"
     >
       <svg
@@ -793,26 +794,26 @@ exports[`component:<Notification> prop:success & small 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>
-    <div
+    </ui_icon>
+    <ui_view
       class="view texts"
     >
-      <span
+      <ui_text
         class="text small"
       >
         Lorem Ipsum...
-      </span>
-    </div>
-  </div>
+      </ui_text>
+    </ui_view>
+  </ui_notification>
 </DocumentFragment>
 `;
 
 exports[`component:<Notification> prop:success 1`] = `
 <DocumentFragment>
-  <div
+  <ui_notification
     class="view row notification success outlined"
   >
-    <span
+    <ui_icon
       class="icon headline-3"
     >
       <svg
@@ -832,26 +833,26 @@ exports[`component:<Notification> prop: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>
-    <div
+    </ui_icon>
+    <ui_view
       class="view texts"
     >
-      <span
+      <ui_text
         class="text action"
       >
         Lorem Ipsum...
-      </span>
-    </div>
-  </div>
+      </ui_text>
+    </ui_view>
+  </ui_notification>
 </DocumentFragment>
 `;
 
 exports[`component:<Notification> prop:title 1`] = `
 <DocumentFragment>
-  <div
+  <ui_notification
     class="view row notification outlined"
   >
-    <span
+    <ui_icon
       class="icon headline-3"
     >
       <svg
@@ -871,31 +872,31 @@ exports[`component:<Notification> prop:title 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>
-    <div
+    </ui_icon>
+    <ui_view
       class="view texts"
     >
-      <span
+      <ui_text
         class="text bold paragraph"
       >
         Title
-      </span>
-      <span
+      </ui_text>
+      <ui_text
         class="text action"
       >
         Lorem Ipsum...
-      </span>
-    </div>
-  </div>
+      </ui_text>
+    </ui_view>
+  </ui_notification>
 </DocumentFragment>
 `;
 
 exports[`component:<Notification> prop:title 2`] = `
 <DocumentFragment>
-  <div
+  <ui_notification
     class="view row notification contrast outlined"
   >
-    <span
+    <ui_icon
       class="icon headline-3"
     >
       <svg
@@ -915,31 +916,31 @@ exports[`component:<Notification> prop:title 2`] = `
           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>
-    <div
+    </ui_icon>
+    <ui_view
       class="view texts"
     >
-      <span
+      <ui_text
         class="text bold paragraph"
       >
         Title
-      </span>
-      <span
+      </ui_text>
+      <ui_text
         class="text action"
       >
         Lorem Ipsum...
-      </span>
-    </div>
-  </div>
+      </ui_text>
+    </ui_view>
+  </ui_notification>
 </DocumentFragment>
 `;
 
 exports[`component:<Notification> prop:title 3`] = `
 <DocumentFragment>
-  <div
+  <ui_notification
     class="view row notification error outlined"
   >
-    <span
+    <ui_icon
       class="icon headline-3"
     >
       <svg
@@ -959,31 +960,31 @@ exports[`component:<Notification> prop:title 3`] = `
           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>
-    <div
+    </ui_icon>
+    <ui_view
       class="view texts"
     >
-      <span
+      <ui_text
         class="text bold paragraph"
       >
         Title
-      </span>
-      <span
+      </ui_text>
+      <ui_text
         class="text action"
       >
         Lorem Ipsum...
-      </span>
-    </div>
-  </div>
+      </ui_text>
+    </ui_view>
+  </ui_notification>
 </DocumentFragment>
 `;
 
 exports[`component:<Notification> prop:title 4`] = `
 <DocumentFragment>
-  <div
+  <ui_notification
     class="view row notification warning outlined"
   >
-    <span
+    <ui_icon
       class="icon headline-3"
     >
       <svg
@@ -999,31 +1000,31 @@ exports[`component:<Notification> prop:title 4`] = `
           d="M12 5.99 19.53 19H4.47L12 5.99M12 2 1 21h22L12 2zm1 14h-2v2h2v-2zm0-6h-2v4h2v-4z"
         />
       </svg>
-    </span>
-    <div
+    </ui_icon>
+    <ui_view
       class="view texts"
     >
-      <span
+      <ui_text
         class="text bold paragraph"
       >
         Title
-      </span>
-      <span
+      </ui_text>
+      <ui_text
         class="text action"
       >
         Lorem Ipsum...
-      </span>
-    </div>
-  </div>
+      </ui_text>
+    </ui_view>
+  </ui_notification>
 </DocumentFragment>
 `;
 
 exports[`component:<Notification> prop:title 5`] = `
 <DocumentFragment>
-  <div
+  <ui_notification
     class="view row notification success outlined"
   >
-    <span
+    <ui_icon
       class="icon headline-3"
     >
       <svg
@@ -1043,31 +1044,31 @@ exports[`component:<Notification> prop:title 5`] = `
           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>
-    <div
+    </ui_icon>
+    <ui_view
       class="view texts"
     >
-      <span
+      <ui_text
         class="text bold paragraph"
       >
         Title
-      </span>
-      <span
+      </ui_text>
+      <ui_text
         class="text action"
       >
         Lorem Ipsum...
-      </span>
-    </div>
-  </div>
+      </ui_text>
+    </ui_view>
+  </ui_notification>
 </DocumentFragment>
 `;
 
 exports[`component:<Notification> prop:title 6`] = `
 <DocumentFragment>
-  <div
+  <ui_notification
     class="view row notification info outlined"
   >
-    <span
+    <ui_icon
       class="icon headline-3"
     >
       <svg
@@ -1087,31 +1088,31 @@ exports[`component:<Notification> prop:title 6`] = `
           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>
-    <div
+    </ui_icon>
+    <ui_view
       class="view texts"
     >
-      <span
+      <ui_text
         class="text bold paragraph"
       >
         Title
-      </span>
-      <span
+      </ui_text>
+      <ui_text
         class="text action"
       >
         Lorem Ipsum...
-      </span>
-    </div>
-  </div>
+      </ui_text>
+    </ui_view>
+  </ui_notification>
 </DocumentFragment>
 `;
 
 exports[`component:<Notification> prop:warning & inline 1`] = `
 <DocumentFragment>
-  <div
+  <ui_notification
     class="view row notification warning inline"
   >
-    <span
+    <ui_icon
       class="icon headline-3"
     >
       <svg
@@ -1127,26 +1128,26 @@ exports[`component:<Notification> prop:warning & inline 1`] = `
           d="M12 5.99 19.53 19H4.47L12 5.99M12 2 1 21h22L12 2zm1 14h-2v2h2v-2zm0-6h-2v4h2v-4z"
         />
       </svg>
-    </span>
-    <div
+    </ui_icon>
+    <ui_view
       class="view texts"
     >
-      <span
+      <ui_text
         class="text action"
       >
         Lorem Ipsum...
-      </span>
-    </div>
-  </div>
+      </ui_text>
+    </ui_view>
+  </ui_notification>
 </DocumentFragment>
 `;
 
 exports[`component:<Notification> prop:warning & large 1`] = `
 <DocumentFragment>
-  <div
+  <ui_notification
     class="view row notification warning outlined large"
   >
-    <span
+    <ui_icon
       class="icon headline-1"
     >
       <svg
@@ -1162,26 +1163,26 @@ exports[`component:<Notification> prop:warning & large 1`] = `
           d="M12 5.99 19.53 19H4.47L12 5.99M12 2 1 21h22L12 2zm1 14h-2v2h2v-2zm0-6h-2v4h2v-4z"
         />
       </svg>
-    </span>
-    <div
+    </ui_icon>
+    <ui_view
       class="view texts"
     >
-      <span
+      <ui_text
         class="text paragraph"
       >
         Lorem Ipsum...
-      </span>
-    </div>
-  </div>
+      </ui_text>
+    </ui_view>
+  </ui_notification>
 </DocumentFragment>
 `;
 
 exports[`component:<Notification> prop:warning & small 1`] = `
 <DocumentFragment>
-  <div
+  <ui_notification
     class="view row notification warning outlined small"
   >
-    <span
+    <ui_icon
       class="icon paragraph"
     >
       <svg
@@ -1197,26 +1198,26 @@ exports[`component:<Notification> prop:warning & small 1`] = `
           d="M12 5.99 19.53 19H4.47L12 5.99M12 2 1 21h22L12 2zm1 14h-2v2h2v-2zm0-6h-2v4h2v-4z"
         />
       </svg>
-    </span>
-    <div
+    </ui_icon>
+    <ui_view
       class="view texts"
     >
-      <span
+      <ui_text
         class="text small"
       >
         Lorem Ipsum...
-      </span>
-    </div>
-  </div>
+      </ui_text>
+    </ui_view>
+  </ui_notification>
 </DocumentFragment>
 `;
 
 exports[`component:<Notification> prop:warning 1`] = `
 <DocumentFragment>
-  <div
+  <ui_notification
     class="view row notification warning outlined"
   >
-    <span
+    <ui_icon
       class="icon headline-3"
     >
       <svg
@@ -1232,26 +1233,26 @@ exports[`component:<Notification> prop:warning 1`] = `
           d="M12 5.99 19.53 19H4.47L12 5.99M12 2 1 21h22L12 2zm1 14h-2v2h2v-2zm0-6h-2v4h2v-4z"
         />
       </svg>
-    </span>
-    <div
+    </ui_icon>
+    <ui_view
       class="view texts"
     >
-      <span
+      <ui_text
         class="text action"
       >
         Lorem Ipsum...
-      </span>
-    </div>
-  </div>
+      </ui_text>
+    </ui_view>
+  </ui_notification>
 </DocumentFragment>
 `;
 
 exports[`component:<Notification> prop:wide 1`] = `
 <DocumentFragment>
-  <div
+  <ui_notification
     class="view row notification outlined wide"
   >
-    <span
+    <ui_icon
       class="icon headline-3"
     >
       <svg
@@ -1271,26 +1272,26 @@ exports[`component:<Notification> prop:wide 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>
-    <div
+    </ui_icon>
+    <ui_view
       class="view texts"
     >
-      <span
+      <ui_text
         class="text action"
       >
         Lorem Ipsum...
-      </span>
-    </div>
-  </div>
+      </ui_text>
+    </ui_view>
+  </ui_notification>
 </DocumentFragment>
 `;
 
 exports[`component:<Notification> renders 1`] = `
 <DocumentFragment>
-  <div
+  <ui_notification
     class="view row notification outlined"
   >
-    <span
+    <ui_icon
       class="icon headline-3"
     >
       <svg
@@ -1310,27 +1311,66 @@ exports[`component:<Notification> renders 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>
-    <div
+    </ui_icon>
+    <ui_view
       class="view texts"
     >
-      <span
+      <ui_text
         class="text action"
       >
         Lorem Ipsum...
-      </span>
-    </div>
-  </div>
+      </ui_text>
+    </ui_view>
+  </ui_notification>
+</DocumentFragment>
+`;
+
+exports[`component:<Notification> tag 1`] = `
+<DocumentFragment>
+  <ui_tag
+    class="view row notification outlined"
+  >
+    <ui_icon
+      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="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>
+    <ui_view
+      class="view texts"
+    >
+      <ui_text
+        class="text action"
+      >
+        Lorem Ipsum...
+      </ui_text>
+    </ui_view>
+  </ui_tag>
 </DocumentFragment>
 `;
 
 exports[`component:<Notification> testId 1`] = `
 <DocumentFragment>
-  <div
+  <ui_notification
     class="view row notification outlined"
     data-testid="mirai"
   >
-    <span
+    <ui_icon
       class="icon headline-3"
     >
       <svg
@@ -1350,16 +1390,16 @@ exports[`component:<Notification> testId 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>
-    <div
+    </ui_icon>
+    <ui_view
       class="view texts"
     >
-      <span
+      <ui_text
         class="text action"
       >
         Lorem Ipsum...
-      </span>
-    </div>
-  </div>
+      </ui_text>
+    </ui_view>
+  </ui_notification>
 </DocumentFragment>
 `;