npm - @mirai/ui - Versions diffs - 1.1.0-f → 1.1.1 - Mend

@mirai/ui 1.1.0-f → 1.1.1

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 (186) hide show

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

@@ -2,11 +2,11 @@
 exports[`component:<Notification> inherit:className 1`] = `
 <DocumentFragment>
-  <ui_view
+  <div
     class="view row notification outlined mirai"
   >
-    <ui_icon
-      class="icon h3 icon"
+    <span
+      class="icon headline-3"
     >
       <svg
         fill="currentColor"
@@ -25,23 +25,27 @@ 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_text
-      class="text paragraph text"
+    </span>
+    <div
+      class="view texts"
     >
-      Lorem Ipsum...
-    </ui_text>
-  </ui_view>
+      <span
+        class="text action"
+      >
+        Lorem Ipsum...
+      </span>
+    </div>
+  </div>
 </DocumentFragment>
 `;
-exports[`component:<Notification> prop:error 1`] = `
+exports[`component:<Notification> prop:error & inline 1`] = `
 <DocumentFragment>
-  <ui_view
-    class="view row notification error outlined"
+  <div
+    class="view row notification error inline"
   >
-    <ui_icon
-      class="icon h3 icon"
+    <span
+      class="icon headline-3"
     >
       <svg
         fill="currentColor"
@@ -60,23 +64,27 @@ 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_text
-      class="text paragraph text error"
+    </span>
+    <div
+      class="view texts"
     >
-      Lorem Ipsum...
-    </ui_text>
-  </ui_view>
+      <span
+        class="text action"
+      >
+        Lorem Ipsum...
+      </span>
+    </div>
+  </div>
 </DocumentFragment>
 `;
-exports[`component:<Notification> prop:info & inline 1`] = `
+exports[`component:<Notification> prop:error & large 1`] = `
 <DocumentFragment>
-  <ui_view
-    class="view row notification info inline inline"
+  <div
+    class="view row notification error outlined large"
   >
-    <ui_icon
-      class="icon h3 icon"
+    <span
+      class="icon headline-1"
     >
       <svg
         fill="currentColor"
@@ -92,26 +100,108 @@ exports[`component:<Notification> prop:info & inline 1`] = `
           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"
+          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_text
-      class="text paragraph text"
+    </span>
+    <div
+      class="view texts"
     >
-      Lorem Ipsum...
-    </ui_text>
-  </ui_view>
+      <span
+        class="text paragraph"
+      >
+        Lorem Ipsum...
+      </span>
+    </div>
+  </div>
 </DocumentFragment>
 `;
-exports[`component:<Notification> prop:info & large 1`] = `
+exports[`component:<Notification> prop:error & small 1`] = `
 <DocumentFragment>
-  <ui_view
-    class="view row notification info outlined large"
+  <div
+    class="view row notification error outlined small"
   >
-    <ui_icon
-      class="icon h1 icon"
+    <span
+      class="icon paragraph"
+    >
+      <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 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
+      class="view texts"
+    >
+      <span
+        class="text small"
+      >
+        Lorem Ipsum...
+      </span>
+    </div>
+  </div>
+</DocumentFragment>
+`;
+exports[`component:<Notification> prop:error 1`] = `
+<DocumentFragment>
+  <div
+    class="view row notification error outlined"
+  >
+    <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="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
+      class="view texts"
+    >
+      <span
+        class="text action"
+      >
+        Lorem Ipsum...
+      </span>
+    </div>
+  </div>
+</DocumentFragment>
+`;
+exports[`component:<Notification> prop:info & inline 1`] = `
+<DocumentFragment>
+  <div
+    class="view row notification info inline"
+  >
+    <span
+      class="icon headline-3"
     >
       <svg
         fill="currentColor"
@@ -130,23 +220,27 @@ 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_text
-      class="text paragraph text"
+    </span>
+    <div
+      class="view texts"
     >
-      Lorem Ipsum...
-    </ui_text>
-  </ui_view>
+      <span
+        class="text action"
+      >
+        Lorem Ipsum...
+      </span>
+    </div>
+  </div>
 </DocumentFragment>
 `;
-exports[`component:<Notification> prop:info & small 1`] = `
+exports[`component:<Notification> prop:info & large 1`] = `
 <DocumentFragment>
-  <ui_view
-    class="view row notification info outlined small"
+  <div
+    class="view row notification info outlined large"
   >
-    <ui_icon
-      class="icon paragraph icon"
+    <span
+      class="icon headline-1"
     >
       <svg
         fill="currentColor"
@@ -165,23 +259,27 @@ 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_text
-      class="text small text"
+    </span>
+    <div
+      class="view texts"
     >
-      Lorem Ipsum...
-    </ui_text>
-  </ui_view>
+      <span
+        class="text paragraph"
+      >
+        Lorem Ipsum...
+      </span>
+    </div>
+  </div>
 </DocumentFragment>
 `;
-exports[`component:<Notification> prop:info 1`] = `
+exports[`component:<Notification> prop:info & small 1`] = `
 <DocumentFragment>
-  <ui_view
-    class="view row notification info outlined"
+  <div
+    class="view row notification info outlined small"
   >
-    <ui_icon
-      class="icon h3 icon"
+    <span
+      class="icon paragraph"
     >
       <svg
         fill="currentColor"
@@ -200,23 +298,27 @@ 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_text
-      class="text paragraph text"
+    </span>
+    <div
+      class="view texts"
     >
-      Lorem Ipsum...
-    </ui_text>
-  </ui_view>
+      <span
+        class="text small"
+      >
+        Lorem Ipsum...
+      </span>
+    </div>
+  </div>
 </DocumentFragment>
 `;
-exports[`component:<Notification> prop:inline 1`] = `
+exports[`component:<Notification> prop:info 1`] = `
 <DocumentFragment>
-  <ui_view
-    class="view row notification inline inline"
+  <div
+    class="view row notification info outlined"
   >
-    <ui_icon
-      class="icon h3 icon"
+    <span
+      class="icon headline-3"
     >
       <svg
         fill="currentColor"
@@ -235,23 +337,27 @@ 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_text
-      class="text paragraph text"
+    </span>
+    <div
+      class="view texts"
     >
-      Lorem Ipsum...
-    </ui_text>
-  </ui_view>
+      <span
+        class="text action"
+      >
+        Lorem Ipsum...
+      </span>
+    </div>
+  </div>
 </DocumentFragment>
 `;
-exports[`component:<Notification> prop:large & prop:inline 1`] = `
+exports[`component:<Notification> prop:inline 1`] = `
 <DocumentFragment>
-  <ui_view
-    class="view row notification inline inline large"
+  <div
+    class="view row notification inline"
   >
-    <ui_icon
-      class="icon h1 icon"
+    <span
+      class="icon headline-3"
     >
       <svg
         fill="currentColor"
@@ -270,23 +376,27 @@ exports[`component:<Notification> prop:large & 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_text
-      class="text paragraph text"
+    </span>
+    <div
+      class="view texts"
     >
-      Lorem Ipsum...
-    </ui_text>
-  </ui_view>
+      <span
+        class="text action"
+      >
+        Lorem Ipsum...
+      </span>
+    </div>
+  </div>
 </DocumentFragment>
 `;
 exports[`component:<Notification> prop:large 1`] = `
 <DocumentFragment>
-  <ui_view
+  <div
     class="view row notification outlined large"
   >
-    <ui_icon
-      class="icon h1 icon"
+    <span
+      class="icon headline-1"
     >
       <svg
         fill="currentColor"
@@ -305,24 +415,28 @@ 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_text
-      class="text paragraph text"
+    </span>
+    <div
+      class="view texts"
     >
-      Lorem Ipsum...
-    </ui_text>
-  </ui_view>
+      <span
+        class="text paragraph"
+      >
+        Lorem Ipsum...
+      </span>
+    </div>
+  </div>
 </DocumentFragment>
 `;
 exports[`component:<Notification> prop:onClose 1`] = `
 <DocumentFragment>
-  <ui_view
+  <div
     class="view row notification outlined"
     data-testid="mirai-onClose"
   >
-    <ui_icon
-      class="icon h3 icon"
+    <span
+      class="icon headline-3"
     >
       <svg
         fill="currentColor"
@@ -341,19 +455,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_text
-      class="text paragraph text"
-    >
-      Lorem Ipsum...
-    </ui_text>
-    <ui_pressable
-      class="pressable pressable icon"
+    </span>
+    <div
+      class="view texts"
+    >
+      <span
+        class="text action"
+      >
+        Lorem Ipsum...
+      </span>
+    </div>
+    <div
+      class="pressable"
       data-testid="mirai-onClose-button-close"
-      tabindex="0"
     >
-      <ui_icon
-        class="icon h3"
+      <span
+        class="icon headline-3"
       >
         <svg
           fill="currentColor"
@@ -369,22 +486,22 @@ exports[`component:<Notification> prop:onClose 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>
-    </ui_pressable>
-  </ui_view>
+      </span>
+    </div>
+  </div>
 </DocumentFragment>
 `;
-exports[`component:<Notification> prop:small & prop:inline 1`] = `
+exports[`component:<Notification> prop:small 1`] = `
 <DocumentFragment>
-  <ui_view
-    class="view row notification inline inline small"
+  <div
+    class="view row notification outlined small"
   >
-    <ui_icon
-      class="icon paragraph icon"
+    <span
+      class="icon paragraph"
     >
       <svg
         fill="currentColor"
@@ -403,23 +520,27 @@ exports[`component:<Notification> prop:small & 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_text
-      class="text small text"
+    </span>
+    <div
+      class="view texts"
     >
-      Lorem Ipsum...
-    </ui_text>
-  </ui_view>
+      <span
+        class="text small"
+      >
+        Lorem Ipsum...
+      </span>
+    </div>
+  </div>
 </DocumentFragment>
 `;
-exports[`component:<Notification> prop:small 1`] = `
+exports[`component:<Notification> prop:success & inline 1`] = `
 <DocumentFragment>
-  <ui_view
-    class="view row notification outlined small"
+  <div
+    class="view row notification success inline"
   >
-    <ui_icon
-      class="icon paragraph icon"
+    <span
+      class="icon headline-3"
     >
       <svg
         fill="currentColor"
@@ -431,30 +552,34 @@ exports[`component:<Notification> prop:small 1`] = `
         xmlns="http://www.w3.org/2000/svg"
       >
         <path
-          d="M0 0h24v24H0V0z"
+          d="M0 0h24v24H0V0zm0 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"
+          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_text
-      class="text small text"
+    </span>
+    <div
+      class="view texts"
     >
-      Lorem Ipsum...
-    </ui_text>
-  </ui_view>
+      <span
+        class="text action"
+      >
+        Lorem Ipsum...
+      </span>
+    </div>
+  </div>
 </DocumentFragment>
 `;
-exports[`component:<Notification> prop:success & inline 1`] = `
+exports[`component:<Notification> prop:success & large 1`] = `
 <DocumentFragment>
-  <ui_view
-    class="view row notification success inline inline"
+  <div
+    class="view row notification success outlined large"
   >
-    <ui_icon
-      class="icon h3 icon"
+    <span
+      class="icon headline-1"
     >
       <svg
         fill="currentColor"
@@ -466,30 +591,112 @@ exports[`component:<Notification> prop:success & inline 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>
-    <ui_text
-      class="text paragraph text success"
+    </span>
+    <div
+      class="view texts"
     >
-      Lorem Ipsum...
-    </ui_text>
-  </ui_view>
+      <span
+        class="text paragraph"
+      >
+        Lorem Ipsum...
+      </span>
+    </div>
+  </div>
 </DocumentFragment>
 `;
-exports[`component:<Notification> prop:success & large 1`] = `
+exports[`component:<Notification> prop:success & small 1`] = `
 <DocumentFragment>
-  <ui_view
-    class="view row notification success outlined large"
+  <div
+    class="view row notification success outlined small"
   >
-    <ui_icon
-      class="icon h1 icon"
+    <span
+      class="icon paragraph"
+    >
+      <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 0h24v24H0V0zm0 0h24v24H0V0z"
+          fill="none"
+        />
+        <path
+          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
+      class="view texts"
+    >
+      <span
+        class="text small"
+      >
+        Lorem Ipsum...
+      </span>
+    </div>
+  </div>
+</DocumentFragment>
+`;
+exports[`component:<Notification> prop:success 1`] = `
+<DocumentFragment>
+  <div
+    class="view row notification success outlined"
+  >
+    <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 0h24v24H0V0zm0 0h24v24H0V0z"
+          fill="none"
+        />
+        <path
+          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
+      class="view texts"
+    >
+      <span
+        class="text action"
+      >
+        Lorem Ipsum...
+      </span>
+    </div>
+  </div>
+</DocumentFragment>
+`;
+exports[`component:<Notification> prop:title 1`] = `
+<DocumentFragment>
+  <div
+    class="view row notification outlined"
+  >
+    <span
+      class="icon headline-3"
     >
       <svg
         fill="currentColor"
@@ -505,26 +712,35 @@ exports[`component:<Notification> prop:success & large 1`] = `
           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="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_text
-      class="text paragraph text success"
+    </span>
+    <div
+      class="view texts"
     >
-      Lorem Ipsum...
-    </ui_text>
-  </ui_view>
+      <span
+        class="text bold paragraph"
+      >
+        Title
+      </span>
+      <span
+        class="text action"
+      >
+        Lorem Ipsum...
+      </span>
+    </div>
+  </div>
 </DocumentFragment>
 `;
-exports[`component:<Notification> prop:success & small 1`] = `
+exports[`component:<Notification> prop:title 2`] = `
 <DocumentFragment>
-  <ui_view
-    class="view row notification success outlined small"
+  <div
+    class="view row notification error outlined"
   >
-    <ui_icon
-      class="icon paragraph icon"
+    <span
+      class="icon headline-3"
     >
       <svg
         fill="currentColor"
@@ -540,26 +756,119 @@ exports[`component:<Notification> prop:success & small 1`] = `
           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="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_text
-      class="text small text success"
+    </span>
+    <div
+      class="view texts"
     >
-      Lorem Ipsum...
-    </ui_text>
-  </ui_view>
+      <span
+        class="text bold paragraph"
+      >
+        Title
+      </span>
+      <span
+        class="text action"
+      >
+        Lorem Ipsum...
+      </span>
+    </div>
+  </div>
 </DocumentFragment>
 `;
-exports[`component:<Notification> prop:success 1`] = `
+exports[`component:<Notification> prop:title 3`] = `
+<DocumentFragment>
+  <div
+    class="view row notification warning outlined"
+  >
+    <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="M12 5.99 19.53 19H4.47L12 5.99M12 2 1 21h22L12 2zm1 14h-2v2h2v-2zm0-6h-2v4h2v-4z"
+        />
+      </svg>
+    </span>
+    <div
+      class="view texts"
+    >
+      <span
+        class="text bold paragraph"
+      >
+        Title
+      </span>
+      <span
+        class="text action"
+      >
+        Lorem Ipsum...
+      </span>
+    </div>
+  </div>
+</DocumentFragment>
+`;
+exports[`component:<Notification> prop:title 4`] = `
 <DocumentFragment>
-  <ui_view
+  <div
     class="view row notification success outlined"
   >
-    <ui_icon
-      class="icon h3 icon"
+    <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 0h24v24H0V0zm0 0h24v24H0V0z"
+          fill="none"
+        />
+        <path
+          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
+      class="view texts"
+    >
+      <span
+        class="text bold paragraph"
+      >
+        Title
+      </span>
+      <span
+        class="text action"
+      >
+        Lorem Ipsum...
+      </span>
+    </div>
+  </div>
+</DocumentFragment>
+`;
+exports[`component:<Notification> prop:title 5`] = `
+<DocumentFragment>
+  <div
+    class="view row notification info outlined"
+  >
+    <span
+      class="icon headline-3"
     >
       <svg
         fill="currentColor"
@@ -575,26 +884,35 @@ exports[`component:<Notification> prop:success 1`] = `
           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="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_text
-      class="text paragraph text success"
+    </span>
+    <div
+      class="view texts"
     >
-      Lorem Ipsum...
-    </ui_text>
-  </ui_view>
+      <span
+        class="text bold paragraph"
+      >
+        Title
+      </span>
+      <span
+        class="text action"
+      >
+        Lorem Ipsum...
+      </span>
+    </div>
+  </div>
 </DocumentFragment>
 `;
 exports[`component:<Notification> prop:warning & inline 1`] = `
 <DocumentFragment>
-  <ui_view
-    class="view row notification warning inline inline"
+  <div
+    class="view row notification warning inline"
   >
-    <ui_icon
-      class="icon h3 icon"
+    <span
+      class="icon headline-3"
     >
       <svg
         fill="currentColor"
@@ -606,26 +924,30 @@ exports[`component:<Notification> prop:warning & inline 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>
-    </ui_icon>
-    <ui_text
-      class="text paragraph text warning"
+    </span>
+    <div
+      class="view texts"
     >
-      Lorem Ipsum...
-    </ui_text>
-  </ui_view>
+      <span
+        class="text action"
+      >
+        Lorem Ipsum...
+      </span>
+    </div>
+  </div>
 </DocumentFragment>
 `;
 exports[`component:<Notification> prop:warning & large 1`] = `
 <DocumentFragment>
-  <ui_view
+  <div
     class="view row notification warning outlined large"
   >
-    <ui_icon
-      class="icon h1 icon"
+    <span
+      class="icon headline-1"
     >
       <svg
         fill="currentColor"
@@ -637,26 +959,30 @@ exports[`component:<Notification> prop:warning & large 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>
-    </ui_icon>
-    <ui_text
-      class="text paragraph text warning"
+    </span>
+    <div
+      class="view texts"
     >
-      Lorem Ipsum...
-    </ui_text>
-  </ui_view>
+      <span
+        class="text paragraph"
+      >
+        Lorem Ipsum...
+      </span>
+    </div>
+  </div>
 </DocumentFragment>
 `;
 exports[`component:<Notification> prop:warning & small 1`] = `
 <DocumentFragment>
-  <ui_view
+  <div
     class="view row notification warning outlined small"
   >
-    <ui_icon
-      class="icon paragraph icon"
+    <span
+      class="icon paragraph"
     >
       <svg
         fill="currentColor"
@@ -668,26 +994,30 @@ exports[`component:<Notification> prop:warning & small 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>
-    </ui_icon>
-    <ui_text
-      class="text small text warning"
+    </span>
+    <div
+      class="view texts"
     >
-      Lorem Ipsum...
-    </ui_text>
-  </ui_view>
+      <span
+        class="text small"
+      >
+        Lorem Ipsum...
+      </span>
+    </div>
+  </div>
 </DocumentFragment>
 `;
 exports[`component:<Notification> prop:warning 1`] = `
 <DocumentFragment>
-  <ui_view
+  <div
     class="view row notification warning outlined"
   >
-    <ui_icon
-      class="icon h3 icon"
+    <span
+      class="icon headline-3"
     >
       <svg
         fill="currentColor"
@@ -699,26 +1029,30 @@ exports[`component:<Notification> prop: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>
-    </ui_icon>
-    <ui_text
-      class="text paragraph text warning"
+    </span>
+    <div
+      class="view texts"
     >
-      Lorem Ipsum...
-    </ui_text>
-  </ui_view>
+      <span
+        class="text action"
+      >
+        Lorem Ipsum...
+      </span>
+    </div>
+  </div>
 </DocumentFragment>
 `;
 exports[`component:<Notification> prop:wide 1`] = `
 <DocumentFragment>
-  <ui_view
+  <div
     class="view row notification outlined wide"
   >
-    <ui_icon
-      class="icon h3 icon"
+    <span
+      class="icon headline-3"
     >
       <svg
         fill="currentColor"
@@ -737,23 +1071,27 @@ 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_text
-      class="text paragraph text"
+    </span>
+    <div
+      class="view texts"
     >
-      Lorem Ipsum...
-    </ui_text>
-  </ui_view>
+      <span
+        class="text action"
+      >
+        Lorem Ipsum...
+      </span>
+    </div>
+  </div>
 </DocumentFragment>
 `;
 exports[`component:<Notification> renders 1`] = `
 <DocumentFragment>
-  <ui_view
+  <div
     class="view row notification outlined"
   >
-    <ui_icon
-      class="icon h3 icon"
+    <span
+      class="icon headline-3"
     >
       <svg
         fill="currentColor"
@@ -772,24 +1110,28 @@ 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_text
-      class="text paragraph text"
+    </span>
+    <div
+      class="view texts"
     >
-      Lorem Ipsum...
-    </ui_text>
-  </ui_view>
+      <span
+        class="text action"
+      >
+        Lorem Ipsum...
+      </span>
+    </div>
+  </div>
 </DocumentFragment>
 `;
 exports[`component:<Notification> testId 1`] = `
 <DocumentFragment>
-  <ui_view
+  <div
     class="view row notification outlined"
     data-testid="mirai"
   >
-    <ui_icon
-      class="icon h3 icon"
+    <span
+      class="icon headline-3"
     >
       <svg
         fill="currentColor"
@@ -808,12 +1150,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_text
-      class="text paragraph text"
+    </span>
+    <div
+      class="view texts"
     >
-      Lorem Ipsum...
-    </ui_text>
-  </ui_view>
+      <span
+        class="text action"
+      >
+        Lorem Ipsum...
+      </span>
+    </div>
+  </div>
 </DocumentFragment>
 `;