npm - @mirai/ui - Versions diffs - 2.0.6 → 2.0.7 - Mend

@mirai/ui 2.0.6 → 2.0.7

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (105) hide show

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

@@ -2,10 +2,10 @@
 exports[`component:<Notification> inherit:className 1`] = `
 <DocumentFragment>
-  <ui_notification
+  <ui-notification
     class="view row notification outlined mirai"
   >
-    <ui_icon
+    <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>
-    </ui_icon>
-    <ui_view
+    </ui-icon>
+    <ui-view
       class="view texts"
     >
-      <ui_text
+      <ui-text
         class="text action"
       >
         Lorem Ipsum...
-      </ui_text>
-    </ui_view>
-  </ui_notification>
+      </ui-text>
+    </ui-view>
+  </ui-notification>
 </DocumentFragment>
 `;
 exports[`component:<Notification> prop:contrast & inline 1`] = `
 <DocumentFragment>
-  <ui_notification
+  <ui-notification
     class="view row notification contrast inline"
   >
-    <ui_icon
+    <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>
-    </ui_icon>
-    <ui_view
+    </ui-icon>
+    <ui-view
       class="view texts"
     >
-      <ui_text
+      <ui-text
         class="text action"
       >
         Lorem Ipsum...
-      </ui_text>
-    </ui_view>
-  </ui_notification>
+      </ui-text>
+    </ui-view>
+  </ui-notification>
 </DocumentFragment>
 `;
 exports[`component:<Notification> prop:contrast & large 1`] = `
 <DocumentFragment>
-  <ui_notification
+  <ui-notification
     class="view row notification contrast outlined large"
   >
-    <ui_icon
+    <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>
-    </ui_icon>
-    <ui_view
+    </ui-icon>
+    <ui-view
       class="view texts"
     >
-      <ui_text
+      <ui-text
         class="text paragraph"
       >
         Lorem Ipsum...
-      </ui_text>
-    </ui_view>
-  </ui_notification>
+      </ui-text>
+    </ui-view>
+  </ui-notification>
 </DocumentFragment>
 `;
 exports[`component:<Notification> prop:contrast & small 1`] = `
 <DocumentFragment>
-  <ui_notification
+  <ui-notification
     class="view row notification contrast outlined small"
   >
-    <ui_icon
+    <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>
-    </ui_icon>
-    <ui_view
+    </ui-icon>
+    <ui-view
       class="view texts"
     >
-      <ui_text
+      <ui-text
         class="text small"
       >
         Lorem Ipsum...
-      </ui_text>
-    </ui_view>
-  </ui_notification>
+      </ui-text>
+    </ui-view>
+  </ui-notification>
 </DocumentFragment>
 `;
 exports[`component:<Notification> prop:contrast 1`] = `
 <DocumentFragment>
-  <ui_notification
+  <ui-notification
     class="view row notification contrast outlined"
   >
-    <ui_icon
+    <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>
-    </ui_icon>
-    <ui_view
+    </ui-icon>
+    <ui-view
       class="view texts"
     >
-      <ui_text
+      <ui-text
         class="text action"
       >
         Lorem Ipsum...
-      </ui_text>
-    </ui_view>
-  </ui_notification>
+      </ui-text>
+    </ui-view>
+  </ui-notification>
 </DocumentFragment>
 `;
 exports[`component:<Notification> prop:error & inline 1`] = `
 <DocumentFragment>
-  <ui_notification
+  <ui-notification
     class="view row notification error inline"
   >
-    <ui_icon
+    <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>
-    </ui_icon>
-    <ui_view
+    </ui-icon>
+    <ui-view
       class="view texts"
     >
-      <ui_text
+      <ui-text
         class="text action"
       >
         Lorem Ipsum...
-      </ui_text>
-    </ui_view>
-  </ui_notification>
+      </ui-text>
+    </ui-view>
+  </ui-notification>
 </DocumentFragment>
 `;
 exports[`component:<Notification> prop:error & large 1`] = `
 <DocumentFragment>
-  <ui_notification
+  <ui-notification
     class="view row notification error outlined large"
   >
-    <ui_icon
+    <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>
-    </ui_icon>
-    <ui_view
+    </ui-icon>
+    <ui-view
       class="view texts"
     >
-      <ui_text
+      <ui-text
         class="text paragraph"
       >
         Lorem Ipsum...
-      </ui_text>
-    </ui_view>
-  </ui_notification>
+      </ui-text>
+    </ui-view>
+  </ui-notification>
 </DocumentFragment>
 `;
 exports[`component:<Notification> prop:error & small 1`] = `
 <DocumentFragment>
-  <ui_notification
+  <ui-notification
     class="view row notification error outlined small"
   >
-    <ui_icon
+    <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>
-    </ui_icon>
-    <ui_view
+    </ui-icon>
+    <ui-view
       class="view texts"
     >
-      <ui_text
+      <ui-text
         class="text small"
       >
         Lorem Ipsum...
-      </ui_text>
-    </ui_view>
-  </ui_notification>
+      </ui-text>
+    </ui-view>
+  </ui-notification>
 </DocumentFragment>
 `;
 exports[`component:<Notification> prop:error 1`] = `
 <DocumentFragment>
-  <ui_notification
+  <ui-notification
     class="view row notification error outlined"
   >
-    <ui_icon
+    <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>
-    </ui_icon>
-    <ui_view
+    </ui-icon>
+    <ui-view
       class="view texts"
     >
-      <ui_text
+      <ui-text
         class="text action"
       >
         Lorem Ipsum...
-      </ui_text>
-    </ui_view>
-  </ui_notification>
+      </ui-text>
+    </ui-view>
+  </ui-notification>
 </DocumentFragment>
 `;
 exports[`component:<Notification> prop:info & inline 1`] = `
 <DocumentFragment>
-  <ui_notification
+  <ui-notification
     class="view row notification info inline"
   >
-    <ui_icon
+    <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>
-    </ui_icon>
-    <ui_view
+    </ui-icon>
+    <ui-view
       class="view texts"
     >
-      <ui_text
+      <ui-text
         class="text action"
       >
         Lorem Ipsum...
-      </ui_text>
-    </ui_view>
-  </ui_notification>
+      </ui-text>
+    </ui-view>
+  </ui-notification>
 </DocumentFragment>
 `;
 exports[`component:<Notification> prop:info & large 1`] = `
 <DocumentFragment>
-  <ui_notification
+  <ui-notification
     class="view row notification info outlined large"
   >
-    <ui_icon
+    <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>
-    </ui_icon>
-    <ui_view
+    </ui-icon>
+    <ui-view
       class="view texts"
     >
-      <ui_text
+      <ui-text
         class="text paragraph"
       >
         Lorem Ipsum...
-      </ui_text>
-    </ui_view>
-  </ui_notification>
+      </ui-text>
+    </ui-view>
+  </ui-notification>
 </DocumentFragment>
 `;
 exports[`component:<Notification> prop:info & small 1`] = `
 <DocumentFragment>
-  <ui_notification
+  <ui-notification
     class="view row notification info outlined small"
   >
-    <ui_icon
+    <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>
-    </ui_icon>
-    <ui_view
+    </ui-icon>
+    <ui-view
       class="view texts"
     >
-      <ui_text
+      <ui-text
         class="text small"
       >
         Lorem Ipsum...
-      </ui_text>
-    </ui_view>
-  </ui_notification>
+      </ui-text>
+    </ui-view>
+  </ui-notification>
 </DocumentFragment>
 `;
 exports[`component:<Notification> prop:info 1`] = `
 <DocumentFragment>
-  <ui_notification
+  <ui-notification
     class="view row notification info outlined"
   >
-    <ui_icon
+    <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>
-    </ui_icon>
-    <ui_view
+    </ui-icon>
+    <ui-view
       class="view texts"
     >
-      <ui_text
+      <ui-text
         class="text action"
       >
         Lorem Ipsum...
-      </ui_text>
-    </ui_view>
-  </ui_notification>
+      </ui-text>
+    </ui-view>
+  </ui-notification>
 </DocumentFragment>
 `;
 exports[`component:<Notification> prop:inline 1`] = `
 <DocumentFragment>
-  <ui_notification
+  <ui-notification
     class="view row notification inline"
   >
-    <ui_icon
+    <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>
-    </ui_icon>
-    <ui_view
+    </ui-icon>
+    <ui-view
       class="view texts"
     >
-      <ui_text
+      <ui-text
         class="text action"
       >
         Lorem Ipsum...
-      </ui_text>
-    </ui_view>
-  </ui_notification>
+      </ui-text>
+    </ui-view>
+  </ui-notification>
 </DocumentFragment>
 `;
 exports[`component:<Notification> prop:large 1`] = `
 <DocumentFragment>
-  <ui_notification
+  <ui-notification
     class="view row notification outlined large"
   >
-    <ui_icon
+    <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>
-    </ui_icon>
-    <ui_view
+    </ui-icon>
+    <ui-view
       class="view texts"
     >
-      <ui_text
+      <ui-text
         class="text paragraph"
       >
         Lorem Ipsum...
-      </ui_text>
-    </ui_view>
-  </ui_notification>
+      </ui-text>
+    </ui-view>
+  </ui-notification>
 </DocumentFragment>
 `;
 exports[`component:<Notification> prop:onClose 1`] = `
 <DocumentFragment>
-  <ui_notification
+  <ui-notification
     class="view row notification outlined"
     data-testid="mirai-onClose"
   >
-    <ui_icon
+    <ui-icon
       class="icon headline-3"
     >
       <svg
@@ -611,22 +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>
-    </ui_icon>
-    <ui_view
+    </ui-icon>
+    <ui-view
       class="view texts"
     >
-      <ui_text
+      <ui-text
         class="text action"
       >
         Lorem Ipsum...
-      </ui_text>
-    </ui_view>
-    <ui_pressable
+      </ui-text>
+    </ui-view>
+    <ui-pressable
       class="pressable"
       data-testid="mirai-onClose-button-close"
       tabindex="0"
     >
-      <ui_icon
+      <ui-icon
         class="icon headline-3"
       >
         <svg
@@ -646,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>
-      </ui_icon>
-    </ui_pressable>
-  </ui_notification>
+      </ui-icon>
+    </ui-pressable>
+  </ui-notification>
 </DocumentFragment>
 `;
 exports[`component:<Notification> prop:small 1`] = `
 <DocumentFragment>
-  <ui_notification
+  <ui-notification
     class="view row notification outlined small"
   >
-    <ui_icon
+    <ui-icon
       class="icon paragraph"
     >
       <svg
@@ -677,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>
-    </ui_icon>
-    <ui_view
+    </ui-icon>
+    <ui-view
       class="view texts"
     >
-      <ui_text
+      <ui-text
         class="text small"
       >
         Lorem Ipsum...
-      </ui_text>
-    </ui_view>
-  </ui_notification>
+      </ui-text>
+    </ui-view>
+  </ui-notification>
 </DocumentFragment>
 `;
 exports[`component:<Notification> prop:success & inline 1`] = `
 <DocumentFragment>
-  <ui_notification
+  <ui-notification
     class="view row notification success inline"
   >
-    <ui_icon
+    <ui-icon
       class="icon headline-3"
     >
       <svg
@@ -716,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>
-    </ui_icon>
-    <ui_view
+    </ui-icon>
+    <ui-view
       class="view texts"
     >
-      <ui_text
+      <ui-text
         class="text action"
       >
         Lorem Ipsum...
-      </ui_text>
-    </ui_view>
-  </ui_notification>
+      </ui-text>
+    </ui-view>
+  </ui-notification>
 </DocumentFragment>
 `;
 exports[`component:<Notification> prop:success & large 1`] = `
 <DocumentFragment>
-  <ui_notification
+  <ui-notification
     class="view row notification success outlined large"
   >
-    <ui_icon
+    <ui-icon
       class="icon headline-1"
     >
       <svg
@@ -755,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>
-    </ui_icon>
-    <ui_view
+    </ui-icon>
+    <ui-view
       class="view texts"
     >
-      <ui_text
+      <ui-text
         class="text paragraph"
       >
         Lorem Ipsum...
-      </ui_text>
-    </ui_view>
-  </ui_notification>
+      </ui-text>
+    </ui-view>
+  </ui-notification>
 </DocumentFragment>
 `;
 exports[`component:<Notification> prop:success & small 1`] = `
 <DocumentFragment>
-  <ui_notification
+  <ui-notification
     class="view row notification success outlined small"
   >
-    <ui_icon
+    <ui-icon
       class="icon paragraph"
     >
       <svg
@@ -794,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>
-    </ui_icon>
-    <ui_view
+    </ui-icon>
+    <ui-view
       class="view texts"
     >
-      <ui_text
+      <ui-text
         class="text small"
       >
         Lorem Ipsum...
-      </ui_text>
-    </ui_view>
-  </ui_notification>
+      </ui-text>
+    </ui-view>
+  </ui-notification>
 </DocumentFragment>
 `;
 exports[`component:<Notification> prop:success 1`] = `
 <DocumentFragment>
-  <ui_notification
+  <ui-notification
     class="view row notification success outlined"
   >
-    <ui_icon
+    <ui-icon
       class="icon headline-3"
     >
       <svg
@@ -833,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>
-    </ui_icon>
-    <ui_view
+    </ui-icon>
+    <ui-view
       class="view texts"
     >
-      <ui_text
+      <ui-text
         class="text action"
       >
         Lorem Ipsum...
-      </ui_text>
-    </ui_view>
-  </ui_notification>
+      </ui-text>
+    </ui-view>
+  </ui-notification>
 </DocumentFragment>
 `;
 exports[`component:<Notification> prop:title 1`] = `
 <DocumentFragment>
-  <ui_notification
+  <ui-notification
     class="view row notification outlined"
   >
-    <ui_icon
+    <ui-icon
       class="icon headline-3"
     >
       <svg
@@ -872,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>
-    </ui_icon>
-    <ui_view
+    </ui-icon>
+    <ui-view
       class="view texts"
     >
-      <ui_text
+      <ui-text
         class="text bold paragraph"
       >
         Title
-      </ui_text>
-      <ui_text
+      </ui-text>
+      <ui-text
         class="text action"
       >
         Lorem Ipsum...
-      </ui_text>
-    </ui_view>
-  </ui_notification>
+      </ui-text>
+    </ui-view>
+  </ui-notification>
 </DocumentFragment>
 `;
 exports[`component:<Notification> prop:title 2`] = `
 <DocumentFragment>
-  <ui_notification
+  <ui-notification
     class="view row notification contrast outlined"
   >
-    <ui_icon
+    <ui-icon
       class="icon headline-3"
     >
       <svg
@@ -916,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>
-    </ui_icon>
-    <ui_view
+    </ui-icon>
+    <ui-view
       class="view texts"
     >
-      <ui_text
+      <ui-text
         class="text bold paragraph"
       >
         Title
-      </ui_text>
-      <ui_text
+      </ui-text>
+      <ui-text
         class="text action"
       >
         Lorem Ipsum...
-      </ui_text>
-    </ui_view>
-  </ui_notification>
+      </ui-text>
+    </ui-view>
+  </ui-notification>
 </DocumentFragment>
 `;
 exports[`component:<Notification> prop:title 3`] = `
 <DocumentFragment>
-  <ui_notification
+  <ui-notification
     class="view row notification error outlined"
   >
-    <ui_icon
+    <ui-icon
       class="icon headline-3"
     >
       <svg
@@ -960,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>
-    </ui_icon>
-    <ui_view
+    </ui-icon>
+    <ui-view
       class="view texts"
     >
-      <ui_text
+      <ui-text
         class="text bold paragraph"
       >
         Title
-      </ui_text>
-      <ui_text
+      </ui-text>
+      <ui-text
         class="text action"
       >
         Lorem Ipsum...
-      </ui_text>
-    </ui_view>
-  </ui_notification>
+      </ui-text>
+    </ui-view>
+  </ui-notification>
 </DocumentFragment>
 `;
 exports[`component:<Notification> prop:title 4`] = `
 <DocumentFragment>
-  <ui_notification
+  <ui-notification
     class="view row notification warning outlined"
   >
-    <ui_icon
+    <ui-icon
       class="icon headline-3"
     >
       <svg
@@ -1000,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>
-    </ui_icon>
-    <ui_view
+    </ui-icon>
+    <ui-view
       class="view texts"
     >
-      <ui_text
+      <ui-text
         class="text bold paragraph"
       >
         Title
-      </ui_text>
-      <ui_text
+      </ui-text>
+      <ui-text
         class="text action"
       >
         Lorem Ipsum...
-      </ui_text>
-    </ui_view>
-  </ui_notification>
+      </ui-text>
+    </ui-view>
+  </ui-notification>
 </DocumentFragment>
 `;
 exports[`component:<Notification> prop:title 5`] = `
 <DocumentFragment>
-  <ui_notification
+  <ui-notification
     class="view row notification success outlined"
   >
-    <ui_icon
+    <ui-icon
       class="icon headline-3"
     >
       <svg
@@ -1044,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>
-    </ui_icon>
-    <ui_view
+    </ui-icon>
+    <ui-view
       class="view texts"
     >
-      <ui_text
+      <ui-text
         class="text bold paragraph"
       >
         Title
-      </ui_text>
-      <ui_text
+      </ui-text>
+      <ui-text
         class="text action"
       >
         Lorem Ipsum...
-      </ui_text>
-    </ui_view>
-  </ui_notification>
+      </ui-text>
+    </ui-view>
+  </ui-notification>
 </DocumentFragment>
 `;
 exports[`component:<Notification> prop:title 6`] = `
 <DocumentFragment>
-  <ui_notification
+  <ui-notification
     class="view row notification info outlined"
   >
-    <ui_icon
+    <ui-icon
       class="icon headline-3"
     >
       <svg
@@ -1088,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>
-    </ui_icon>
-    <ui_view
+    </ui-icon>
+    <ui-view
       class="view texts"
     >
-      <ui_text
+      <ui-text
         class="text bold paragraph"
       >
         Title
-      </ui_text>
-      <ui_text
+      </ui-text>
+      <ui-text
         class="text action"
       >
         Lorem Ipsum...
-      </ui_text>
-    </ui_view>
-  </ui_notification>
+      </ui-text>
+    </ui-view>
+  </ui-notification>
 </DocumentFragment>
 `;
 exports[`component:<Notification> prop:warning & inline 1`] = `
 <DocumentFragment>
-  <ui_notification
+  <ui-notification
     class="view row notification warning inline"
   >
-    <ui_icon
+    <ui-icon
       class="icon headline-3"
     >
       <svg
@@ -1128,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>
-    </ui_icon>
-    <ui_view
+    </ui-icon>
+    <ui-view
       class="view texts"
     >
-      <ui_text
+      <ui-text
         class="text action"
       >
         Lorem Ipsum...
-      </ui_text>
-    </ui_view>
-  </ui_notification>
+      </ui-text>
+    </ui-view>
+  </ui-notification>
 </DocumentFragment>
 `;
 exports[`component:<Notification> prop:warning & large 1`] = `
 <DocumentFragment>
-  <ui_notification
+  <ui-notification
     class="view row notification warning outlined large"
   >
-    <ui_icon
+    <ui-icon
       class="icon headline-1"
     >
       <svg
@@ -1163,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>
-    </ui_icon>
-    <ui_view
+    </ui-icon>
+    <ui-view
       class="view texts"
     >
-      <ui_text
+      <ui-text
         class="text paragraph"
       >
         Lorem Ipsum...
-      </ui_text>
-    </ui_view>
-  </ui_notification>
+      </ui-text>
+    </ui-view>
+  </ui-notification>
 </DocumentFragment>
 `;
 exports[`component:<Notification> prop:warning & small 1`] = `
 <DocumentFragment>
-  <ui_notification
+  <ui-notification
     class="view row notification warning outlined small"
   >
-    <ui_icon
+    <ui-icon
       class="icon paragraph"
     >
       <svg
@@ -1198,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>
-    </ui_icon>
-    <ui_view
+    </ui-icon>
+    <ui-view
       class="view texts"
     >
-      <ui_text
+      <ui-text
         class="text small"
       >
         Lorem Ipsum...
-      </ui_text>
-    </ui_view>
-  </ui_notification>
+      </ui-text>
+    </ui-view>
+  </ui-notification>
 </DocumentFragment>
 `;
 exports[`component:<Notification> prop:warning 1`] = `
 <DocumentFragment>
-  <ui_notification
+  <ui-notification
     class="view row notification warning outlined"
   >
-    <ui_icon
+    <ui-icon
       class="icon headline-3"
     >
       <svg
@@ -1233,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>
-    </ui_icon>
-    <ui_view
+    </ui-icon>
+    <ui-view
       class="view texts"
     >
-      <ui_text
+      <ui-text
         class="text action"
       >
         Lorem Ipsum...
-      </ui_text>
-    </ui_view>
-  </ui_notification>
+      </ui-text>
+    </ui-view>
+  </ui-notification>
 </DocumentFragment>
 `;
 exports[`component:<Notification> prop:wide 1`] = `
 <DocumentFragment>
-  <ui_notification
+  <ui-notification
     class="view row notification outlined wide"
   >
-    <ui_icon
+    <ui-icon
       class="icon headline-3"
     >
       <svg
@@ -1272,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>
-    </ui_icon>
-    <ui_view
+    </ui-icon>
+    <ui-view
       class="view texts"
     >
-      <ui_text
+      <ui-text
         class="text action"
       >
         Lorem Ipsum...
-      </ui_text>
-    </ui_view>
-  </ui_notification>
+      </ui-text>
+    </ui-view>
+  </ui-notification>
 </DocumentFragment>
 `;
 exports[`component:<Notification> renders 1`] = `
 <DocumentFragment>
-  <ui_notification
+  <ui-notification
     class="view row notification outlined"
   >
-    <ui_icon
+    <ui-icon
       class="icon headline-3"
     >
       <svg
@@ -1311,66 +1311,27 @@ 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>
-    </ui_icon>
-    <ui_view
+    </ui-icon>
+    <ui-view
       class="view texts"
     >
-      <ui_text
+      <ui-text
         class="text action"
       >
         Lorem Ipsum...
-      </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>
+      </ui-text>
+    </ui-view>
+  </ui-notification>
 </DocumentFragment>
 `;
 exports[`component:<Notification> testId 1`] = `
 <DocumentFragment>
-  <ui_notification
+  <ui-notification
     class="view row notification outlined"
     data-testid="mirai"
   >
-    <ui_icon
+    <ui-icon
       class="icon headline-3"
     >
       <svg
@@ -1390,16 +1351,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>
-    </ui_icon>
-    <ui_view
+    </ui-icon>
+    <ui-view
       class="view texts"
     >
-      <ui_text
+      <ui-text
         class="text action"
       >
         Lorem Ipsum...
-      </ui_text>
-    </ui_view>
-  </ui_notification>
+      </ui-text>
+    </ui-view>
+  </ui-notification>
 </DocumentFragment>
 `;