@mirai/ui 1.0.256 → 1.0.257

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

@@ -6,7 +6,7 @@ exports[`component:<Notification> inherit:className 1`] = `
     class="view row notification outlined mirai"
   >
     <span
-      class="icon headline-3 icon"
+      class="icon headline-3 icon small"
     >
       <svg
         fill="currentColor"
@@ -26,22 +26,26 @@ exports[`component:<Notification> inherit:className 1`] = `
         />
       </svg>
     </span>
-    <span
-      class="text paragraph text"
+    <div
+      class="view texts"
     >
-      Lorem Ipsum...
-    </span>
+      <span
+        class="text action"
+      >
+        Lorem Ipsum...
+      </span>
+    </div>
   </div>
 </DocumentFragment>
 `;
 
-exports[`component:<Notification> prop:error 1`] = `
+exports[`component:<Notification> prop:error & inline 1`] = `
 <DocumentFragment>
   <div
-    class="view row notification error outlined"
+    class="view row notification error inline"
   >
     <span
-      class="icon headline-3 icon"
+      class="icon headline-3 icon small"
     >
       <svg
         fill="currentColor"
@@ -61,22 +65,26 @@ exports[`component:<Notification> prop:error 1`] = `
         />
       </svg>
     </span>
-    <span
-      class="text paragraph text error"
+    <div
+      class="view texts"
     >
-      Lorem Ipsum...
-    </span>
+      <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>
   <div
-    class="view row notification info inline inline"
+    class="view row notification error outlined large"
   >
     <span
-      class="icon headline-3 icon"
+      class="icon headline-1 icon"
     >
       <svg
         fill="currentColor"
@@ -92,26 +100,30 @@ 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>
     </span>
-    <span
-      class="text paragraph text"
+    <div
+      class="view texts"
     >
-      Lorem Ipsum...
-    </span>
+      <span
+        class="text action"
+      >
+        Lorem Ipsum...
+      </span>
+    </div>
   </div>
 </DocumentFragment>
 `;
 
-exports[`component:<Notification> prop:info & large 1`] = `
+exports[`component:<Notification> prop:error & small 1`] = `
 <DocumentFragment>
   <div
-    class="view row notification info outlined large"
+    class="view row notification error outlined small"
   >
     <span
-      class="icon headline-1 icon"
+      class="icon headline-3 icon small"
     >
       <svg
         fill="currentColor"
@@ -127,26 +139,30 @@ exports[`component:<Notification> prop:info & large 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>
     </span>
-    <span
-      class="text paragraph text"
+    <div
+      class="view texts"
     >
-      Lorem Ipsum...
-    </span>
+      <span
+        class="text small"
+      >
+        Lorem Ipsum...
+      </span>
+    </div>
   </div>
 </DocumentFragment>
 `;
 
-exports[`component:<Notification> prop:info & small 1`] = `
+exports[`component:<Notification> prop:error 1`] = `
 <DocumentFragment>
   <div
-    class="view row notification info outlined small"
+    class="view row notification error outlined"
   >
     <span
-      class="icon paragraph icon"
+      class="icon headline-3 icon small"
     >
       <svg
         fill="currentColor"
@@ -162,26 +178,30 @@ exports[`component:<Notification> prop:info & small 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>
     </span>
-    <span
-      class="text small text"
+    <div
+      class="view texts"
     >
-      Lorem Ipsum...
-    </span>
+      <span
+        class="text action"
+      >
+        Lorem Ipsum...
+      </span>
+    </div>
   </div>
 </DocumentFragment>
 `;
 
-exports[`component:<Notification> prop:info 1`] = `
+exports[`component:<Notification> prop:info & inline 1`] = `
 <DocumentFragment>
   <div
-    class="view row notification info outlined"
+    class="view row notification info inline"
   >
     <span
-      class="icon headline-3 icon"
+      class="icon headline-3 icon small"
     >
       <svg
         fill="currentColor"
@@ -201,22 +221,26 @@ exports[`component:<Notification> prop:info 1`] = `
         />
       </svg>
     </span>
-    <span
-      class="text paragraph text"
+    <div
+      class="view texts"
     >
-      Lorem Ipsum...
-    </span>
+      <span
+        class="text action"
+      >
+        Lorem Ipsum...
+      </span>
+    </div>
   </div>
 </DocumentFragment>
 `;
 
-exports[`component:<Notification> prop:inline 1`] = `
+exports[`component:<Notification> prop:info & large 1`] = `
 <DocumentFragment>
   <div
-    class="view row notification inline inline"
+    class="view row notification info outlined large"
   >
     <span
-      class="icon headline-3 icon"
+      class="icon headline-1 icon"
     >
       <svg
         fill="currentColor"
@@ -236,22 +260,26 @@ exports[`component:<Notification> prop:inline 1`] = `
         />
       </svg>
     </span>
-    <span
-      class="text paragraph text"
+    <div
+      class="view texts"
     >
-      Lorem Ipsum...
-    </span>
+      <span
+        class="text action"
+      >
+        Lorem Ipsum...
+      </span>
+    </div>
   </div>
 </DocumentFragment>
 `;
 
-exports[`component:<Notification> prop:large & prop:inline 1`] = `
+exports[`component:<Notification> prop:info & small 1`] = `
 <DocumentFragment>
   <div
-    class="view row notification inline inline large"
+    class="view row notification info outlined small"
   >
     <span
-      class="icon headline-1 icon"
+      class="icon headline-3 icon small"
     >
       <svg
         fill="currentColor"
@@ -271,22 +299,26 @@ exports[`component:<Notification> prop:large & prop:inline 1`] = `
         />
       </svg>
     </span>
-    <span
-      class="text paragraph text"
+    <div
+      class="view texts"
     >
-      Lorem Ipsum...
-    </span>
+      <span
+        class="text small"
+      >
+        Lorem Ipsum...
+      </span>
+    </div>
   </div>
 </DocumentFragment>
 `;
 
-exports[`component:<Notification> prop:large 1`] = `
+exports[`component:<Notification> prop:info 1`] = `
 <DocumentFragment>
   <div
-    class="view row notification outlined large"
+    class="view row notification info outlined"
   >
     <span
-      class="icon headline-1 icon"
+      class="icon headline-3 icon small"
     >
       <svg
         fill="currentColor"
@@ -306,11 +338,15 @@ exports[`component:<Notification> prop:large 1`] = `
         />
       </svg>
     </span>
-    <span
-      class="text paragraph text"
+    <div
+      class="view texts"
     >
-      Lorem Ipsum...
-    </span>
+      <span
+        class="text action"
+      >
+        Lorem Ipsum...
+      </span>
+    </div>
   </div>
 </DocumentFragment>
 `;
@@ -322,7 +358,7 @@ exports[`component:<Notification> prop:onClose 1`] = `
     data-testid="mirai-onClose"
   >
     <span
-      class="icon headline-3 icon"
+      class="icon headline-3 icon small"
     >
       <svg
         fill="currentColor"
@@ -342,13 +378,17 @@ exports[`component:<Notification> prop:onClose 1`] = `
         />
       </svg>
     </span>
-    <span
-      class="text paragraph text"
+    <div
+      class="view texts"
     >
-      Lorem Ipsum...
-    </span>
+      <span
+        class="text action"
+      >
+        Lorem Ipsum...
+      </span>
+    </div>
     <div
-      class="pressable pressable icon"
+      class="pressable"
       data-testid="mirai-onClose-button-close"
     >
       <span
@@ -377,13 +417,13 @@ exports[`component:<Notification> prop:onClose 1`] = `
 </DocumentFragment>
 `;
 
-exports[`component:<Notification> prop:small & prop:inline 1`] = `
+exports[`component:<Notification> prop:success & inline 1`] = `
 <DocumentFragment>
   <div
-    class="view row notification inline inline small"
+    class="view row notification success inline"
   >
     <span
-      class="icon paragraph icon"
+      class="icon headline-3 icon small"
     >
       <svg
         fill="currentColor"
@@ -399,26 +439,30 @@ exports[`component:<Notification> prop:small & prop: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="M9 16.17 4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41L9 16.17z"
         />
       </svg>
     </span>
-    <span
-      class="text small text"
+    <div
+      class="view texts"
     >
-      Lorem Ipsum...
-    </span>
+      <span
+        class="text action"
+      >
+        Lorem Ipsum...
+      </span>
+    </div>
   </div>
 </DocumentFragment>
 `;
 
-exports[`component:<Notification> prop:small 1`] = `
+exports[`component:<Notification> prop:success & large 1`] = `
 <DocumentFragment>
   <div
-    class="view row notification outlined small"
+    class="view row notification success outlined large"
   >
     <span
-      class="icon paragraph icon"
+      class="icon headline-1 icon"
     >
       <svg
         fill="currentColor"
@@ -434,26 +478,30 @@ exports[`component:<Notification> prop:small 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="M9 16.17 4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41L9 16.17z"
         />
       </svg>
     </span>
-    <span
-      class="text small text"
+    <div
+      class="view texts"
     >
-      Lorem Ipsum...
-    </span>
+      <span
+        class="text action"
+      >
+        Lorem Ipsum...
+      </span>
+    </div>
   </div>
 </DocumentFragment>
 `;
 
-exports[`component:<Notification> prop:success & inline 1`] = `
+exports[`component:<Notification> prop:success & small 1`] = `
 <DocumentFragment>
   <div
-    class="view row notification success inline inline"
+    class="view row notification success outlined small"
   >
     <span
-      class="icon headline-3 icon"
+      class="icon headline-3 icon small"
     >
       <svg
         fill="currentColor"
@@ -469,26 +517,30 @@ exports[`component:<Notification> prop:success & inline 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="M9 16.17 4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41L9 16.17z"
         />
       </svg>
     </span>
-    <span
-      class="text paragraph text success"
+    <div
+      class="view texts"
     >
-      Lorem Ipsum...
-    </span>
+      <span
+        class="text small"
+      >
+        Lorem Ipsum...
+      </span>
+    </div>
   </div>
 </DocumentFragment>
 `;
 
-exports[`component:<Notification> prop:success & large 1`] = `
+exports[`component:<Notification> prop:success 1`] = `
 <DocumentFragment>
   <div
-    class="view row notification success outlined large"
+    class="view row notification success outlined"
   >
     <span
-      class="icon headline-1 icon"
+      class="icon headline-3 icon small"
     >
       <svg
         fill="currentColor"
@@ -504,26 +556,30 @@ 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="M9 16.17 4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41L9 16.17z"
         />
       </svg>
     </span>
-    <span
-      class="text paragraph text success"
+    <div
+      class="view texts"
     >
-      Lorem Ipsum...
-    </span>
+      <span
+        class="text action"
+      >
+        Lorem Ipsum...
+      </span>
+    </div>
   </div>
 </DocumentFragment>
 `;
 
-exports[`component:<Notification> prop:success & small 1`] = `
+exports[`component:<Notification> prop:title 1`] = `
 <DocumentFragment>
   <div
-    class="view row notification success outlined small"
+    class="view row notification outlined"
   >
     <span
-      class="icon paragraph icon"
+      class="icon headline-2 icon"
     >
       <svg
         fill="currentColor"
@@ -539,26 +595,35 @@ 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 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>
-    <span
-      class="text small text success"
+    <div
+      class="view texts"
     >
-      Lorem Ipsum...
-    </span>
+      <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:warning & inline 1`] = `
 <DocumentFragment>
   <div
-    class="view row notification success outlined"
+    class="view row notification warning inline"
   >
     <span
-      class="icon headline-3 icon"
+      class="icon headline-3 icon small"
     >
       <svg
         fill="currentColor"
@@ -574,46 +639,19 @@ 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 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>
-    <span
-      class="text paragraph text success"
-    >
-      Lorem Ipsum...
-    </span>
-  </div>
-</DocumentFragment>
-`;
-
-exports[`component:<Notification> prop:warning & inline 1`] = `
-<DocumentFragment>
-  <div
-    class="view row notification warning inline inline"
-  >
-    <span
-      class="icon headline-3 icon"
+    <div
+      class="view texts"
     >
-      <svg
-        fill="currentColor"
-        height="1em"
-        stroke="currentColor"
-        stroke-width="0"
-        viewBox="0 0 24 24"
-        width="1em"
-        xmlns="http://www.w3.org/2000/svg"
+      <span
+        class="text action"
       >
-        <path
-          d="M12 5.99 19.53 19H4.47L12 5.99M12 2 1 21h22L12 2zm1 14h-2v2h2v-2zm0-6h-2v4h2v-4z"
-        />
-      </svg>
-    </span>
-    <span
-      class="text paragraph text warning"
-    >
-      Lorem Ipsum...
-    </span>
+        Lorem Ipsum...
+      </span>
+    </div>
   </div>
 </DocumentFragment>
 `;
@@ -636,15 +674,23 @@ exports[`component:<Notification> prop:warning & large 1`] = `
         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"
+          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>
-    <span
-      class="text paragraph text warning"
+    <div
+      class="view texts"
     >
-      Lorem Ipsum...
-    </span>
+      <span
+        class="text action"
+      >
+        Lorem Ipsum...
+      </span>
+    </div>
   </div>
 </DocumentFragment>
 `;
@@ -655,7 +701,7 @@ exports[`component:<Notification> prop:warning & small 1`] = `
     class="view row notification warning outlined small"
   >
     <span
-      class="icon paragraph icon"
+      class="icon headline-3 icon small"
     >
       <svg
         fill="currentColor"
@@ -667,15 +713,23 @@ exports[`component:<Notification> prop:warning & small 1`] = `
         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"
+          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>
-    <span
-      class="text small text warning"
+    <div
+      class="view texts"
     >
-      Lorem Ipsum...
-    </span>
+      <span
+        class="text small"
+      >
+        Lorem Ipsum...
+      </span>
+    </div>
   </div>
 </DocumentFragment>
 `;
@@ -686,7 +740,7 @@ exports[`component:<Notification> prop:warning 1`] = `
     class="view row notification warning outlined"
   >
     <span
-      class="icon headline-3 icon"
+      class="icon headline-3 icon small"
     >
       <svg
         fill="currentColor"
@@ -698,15 +752,23 @@ exports[`component:<Notification> prop:warning 1`] = `
         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"
+          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>
-    <span
-      class="text paragraph text warning"
+    <div
+      class="view texts"
     >
-      Lorem Ipsum...
-    </span>
+      <span
+        class="text action"
+      >
+        Lorem Ipsum...
+      </span>
+    </div>
   </div>
 </DocumentFragment>
 `;
@@ -717,7 +779,7 @@ exports[`component:<Notification> prop:wide 1`] = `
     class="view row notification outlined wide"
   >
     <span
-      class="icon headline-3 icon"
+      class="icon headline-3 icon small"
     >
       <svg
         fill="currentColor"
@@ -737,11 +799,15 @@ exports[`component:<Notification> prop:wide 1`] = `
         />
       </svg>
     </span>
-    <span
-      class="text paragraph text"
+    <div
+      class="view texts"
     >
-      Lorem Ipsum...
-    </span>
+      <span
+        class="text action"
+      >
+        Lorem Ipsum...
+      </span>
+    </div>
   </div>
 </DocumentFragment>
 `;
@@ -752,7 +818,7 @@ exports[`component:<Notification> renders 1`] = `
     class="view row notification outlined"
   >
     <span
-      class="icon headline-3 icon"
+      class="icon headline-3 icon small"
     >
       <svg
         fill="currentColor"
@@ -772,11 +838,15 @@ exports[`component:<Notification> renders 1`] = `
         />
       </svg>
     </span>
-    <span
-      class="text paragraph text"
+    <div
+      class="view texts"
     >
-      Lorem Ipsum...
-    </span>
+      <span
+        class="text action"
+      >
+        Lorem Ipsum...
+      </span>
+    </div>
   </div>
 </DocumentFragment>
 `;
@@ -788,7 +858,7 @@ exports[`component:<Notification> testId 1`] = `
     data-testid="mirai"
   >
     <span
-      class="icon headline-3 icon"
+      class="icon headline-3 icon small"
     >
       <svg
         fill="currentColor"
@@ -808,11 +878,15 @@ exports[`component:<Notification> testId 1`] = `
         />
       </svg>
     </span>
-    <span
-      class="text paragraph text"
+    <div
+      class="view texts"
     >
-      Lorem Ipsum...
-    </span>
+      <span
+        class="text action"
+      >
+        Lorem Ipsum...
+      </span>
+    </div>
   </div>
 </DocumentFragment>
 `;