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

@mirai/ui 1.1.0-d → 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/InputPhone/__tests__/__snapshots__/InputPhone.test.js.snap CHANGED Viewed

@@ -2,16 +2,16 @@
 exports[`component:<InputPhone> inherit:className 1`] = `
 <DocumentFragment>
-  <ui_view
+  <div
     class="view container mirai"
   >
-    <ui_view
+    <div
       class="view row inputBorder"
     >
-      <ui_view
+      <div
         class="view row"
       >
-        <ui_view
+        <div
           class="view content"
         >
           <select
@@ -34,9 +34,9 @@ exports[`component:<InputPhone> inherit:className 1`] = `
               +001
             </option>
           </select>
-        </ui_view>
-        <ui_icon
-          class="icon h3 expand"
+        </div>
+        <span
+          class="icon headline-3 icon expand"
         >
           <svg
             fill="currentColor"
@@ -53,18 +53,18 @@ exports[`component:<InputPhone> inherit:className 1`] = `
               opacity=".87"
             />
             <path
-              d="M16.59 8.59L12 13.17 7.41 8.59 6 10l6 6 6-6-1.41-1.41z"
+              d="M16.59 8.59 12 13.17 7.41 8.59 6 10l6 6 6-6-1.41-1.41z"
             />
           </svg>
-        </ui_icon>
-      </ui_view>
-      <ui_view
+        </span>
+      </div>
+      <div
         class="view forceRow separator"
       />
-      <ui_view
+      <div
         class="view row wide"
       >
-        <ui_view
+        <div
           class="view wide content"
         >
           <input
@@ -74,25 +74,25 @@ exports[`component:<InputPhone> inherit:className 1`] = `
             type="tel"
             value=""
           />
-        </ui_view>
-      </ui_view>
-    </ui_view>
-  </ui_view>
+        </div>
+      </div>
+    </div>
+  </div>
 </DocumentFragment>
 `;
 exports[`component:<InputPhone> prop:disabled 1`] = `
 <DocumentFragment>
-  <ui_view
+  <div
     class="view container"
   >
-    <ui_view
+    <div
       class="view row inputBorder disabled"
     >
-      <ui_view
+      <div
         class="view row"
       >
-        <ui_view
+        <div
           class="view content"
         >
           <select
@@ -116,15 +116,15 @@ exports[`component:<InputPhone> prop:disabled 1`] = `
               +001
             </option>
           </select>
-        </ui_view>
-      </ui_view>
-      <ui_view
+        </div>
+      </div>
+      <div
         class="view forceRow separator"
       />
-      <ui_view
+      <div
         class="view row wide"
       >
-        <ui_view
+        <div
           class="view wide content"
         >
           <input
@@ -135,25 +135,25 @@ exports[`component:<InputPhone> prop:disabled 1`] = `
             type="tel"
             value=""
           />
-        </ui_view>
-      </ui_view>
-    </ui_view>
-  </ui_view>
+        </div>
+      </div>
+    </div>
+  </div>
 </DocumentFragment>
 `;
 exports[`component:<InputPhone> prop:error 1`] = `
 <DocumentFragment>
-  <ui_view
+  <div
     class="view container"
   >
-    <ui_view
+    <div
       class="view row inputBorder error"
     >
-      <ui_view
+      <div
         class="view row"
       >
-        <ui_view
+        <div
           class="view content"
         >
           <select
@@ -176,9 +176,9 @@ exports[`component:<InputPhone> prop:error 1`] = `
               +001
             </option>
           </select>
-        </ui_view>
-        <ui_icon
-          class="icon h3 expand"
+        </div>
+        <span
+          class="icon headline-3 icon expand"
         >
           <svg
             fill="currentColor"
@@ -195,18 +195,18 @@ exports[`component:<InputPhone> prop:error 1`] = `
               opacity=".87"
             />
             <path
-              d="M16.59 8.59L12 13.17 7.41 8.59 6 10l6 6 6-6-1.41-1.41z"
+              d="M16.59 8.59 12 13.17 7.41 8.59 6 10l6 6 6-6-1.41-1.41z"
             />
           </svg>
-        </ui_icon>
-      </ui_view>
-      <ui_view
+        </span>
+      </div>
+      <div
         class="view forceRow separator"
       />
-      <ui_view
+      <div
         class="view row wide"
       >
-        <ui_view
+        <div
           class="view wide content"
         >
           <input
@@ -216,10 +216,10 @@ exports[`component:<InputPhone> prop:error 1`] = `
             type="tel"
             value=""
           />
-        </ui_view>
-      </ui_view>
-      <ui_icon
-        class="icon h3 icon error"
+        </div>
+      </div>
+      <span
+        class="icon headline-3 icon error"
       >
         <svg
           fill="currentColor"
@@ -238,24 +238,24 @@ exports[`component:<InputPhone> 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_view>
+      </span>
+    </div>
+  </div>
 </DocumentFragment>
 `;
 exports[`component:<InputPhone> prop:hint 1`] = `
 <DocumentFragment>
-  <ui_view
+  <div
     class="view container"
   >
-    <ui_view
+    <div
       class="view row inputBorder"
     >
-      <ui_view
+      <div
         class="view row"
       >
-        <ui_view
+        <div
           class="view content"
         >
           <select
@@ -278,9 +278,9 @@ exports[`component:<InputPhone> prop:hint 1`] = `
               +001
             </option>
           </select>
-        </ui_view>
-        <ui_icon
-          class="icon h3 expand"
+        </div>
+        <span
+          class="icon headline-3 icon expand"
         >
           <svg
             fill="currentColor"
@@ -297,18 +297,18 @@ exports[`component:<InputPhone> prop:hint 1`] = `
               opacity=".87"
             />
             <path
-              d="M16.59 8.59L12 13.17 7.41 8.59 6 10l6 6 6-6-1.41-1.41z"
+              d="M16.59 8.59 12 13.17 7.41 8.59 6 10l6 6 6-6-1.41-1.41z"
             />
           </svg>
-        </ui_icon>
-      </ui_view>
-      <ui_view
+        </span>
+      </div>
+      <div
         class="view forceRow separator"
       />
-      <ui_view
+      <div
         class="view row wide"
       >
-        <ui_view
+        <div
           class="view wide content"
         >
           <input
@@ -318,30 +318,30 @@ exports[`component:<InputPhone> prop:hint 1`] = `
             type="tel"
             value=""
           />
-        </ui_view>
-      </ui_view>
-    </ui_view>
-    <ui_text
+        </div>
+      </div>
+    </div>
+    <span
       class="text small text hint"
     >
       hint
-    </ui_text>
-  </ui_view>
+    </span>
+  </div>
 </DocumentFragment>
 `;
 exports[`component:<InputPhone> prop:icon & disabled 1`] = `
 <DocumentFragment>
-  <ui_view
+  <div
     class="view container"
   >
-    <ui_view
+    <div
       class="view row inputBorder disabled"
     >
-      <ui_view
+      <div
         class="view row"
       >
-        <ui_view
+        <div
           class="view content"
         >
           <select
@@ -365,16 +365,16 @@ exports[`component:<InputPhone> prop:icon & disabled 1`] = `
               +001
             </option>
           </select>
-        </ui_view>
-      </ui_view>
-      <ui_view
+        </div>
+      </div>
+      <div
         class="view forceRow separator"
       />
-      <ui_view
+      <div
         class="view row wide"
       >
-        <ui_icon
-          class="icon h3 icon left disabled"
+        <span
+          class="icon headline-3 icon left disabled"
         >
           <svg
             fill="currentColor"
@@ -390,11 +390,11 @@ exports[`component:<InputPhone> prop:icon & disabled 1`] = `
               fill="none"
             />
             <path
-              d="M12 6a9.77 9.77 0 018.82 5.5C19.17 14.87 15.79 17 12 17s-7.17-2.13-8.82-5.5A9.77 9.77 0 0112 6m0-2C7 4 2.73 7.11 1 11.5 2.73 15.89 7 19 12 19s9.27-3.11 11-7.5C21.27 7.11 17 4 12 4zm0 5a2.5 2.5 0 010 5 2.5 2.5 0 010-5m0-2c-2.48 0-4.5 2.02-4.5 4.5S9.52 16 12 16s4.5-2.02 4.5-4.5S14.48 7 12 7z"
+              d="M12 6a9.77 9.77 0 0 1 8.82 5.5C19.17 14.87 15.79 17 12 17s-7.17-2.13-8.82-5.5A9.77 9.77 0 0 1 12 6m0-2C7 4 2.73 7.11 1 11.5 2.73 15.89 7 19 12 19s9.27-3.11 11-7.5C21.27 7.11 17 4 12 4zm0 5a2.5 2.5 0 0 1 0 5 2.5 2.5 0 0 1 0-5m0-2c-2.48 0-4.5 2.02-4.5 4.5S9.52 16 12 16s4.5-2.02 4.5-4.5S14.48 7 12 7z"
             />
           </svg>
-        </ui_icon>
-        <ui_view
+        </span>
+        <div
           class="view wide content"
         >
           <input
@@ -405,25 +405,25 @@ exports[`component:<InputPhone> prop:icon & disabled 1`] = `
             type="tel"
             value=""
           />
-        </ui_view>
-      </ui_view>
-    </ui_view>
-  </ui_view>
+        </div>
+      </div>
+    </div>
+  </div>
 </DocumentFragment>
 `;
 exports[`component:<InputPhone> prop:icon & error 1`] = `
 <DocumentFragment>
-  <ui_view
+  <div
     class="view container"
   >
-    <ui_view
+    <div
       class="view row inputBorder error"
     >
-      <ui_view
+      <div
         class="view row"
       >
-        <ui_view
+        <div
           class="view content"
         >
           <select
@@ -446,9 +446,9 @@ exports[`component:<InputPhone> prop:icon & error 1`] = `
               +001
             </option>
           </select>
-        </ui_view>
-        <ui_icon
-          class="icon h3 expand"
+        </div>
+        <span
+          class="icon headline-3 icon expand"
         >
           <svg
             fill="currentColor"
@@ -465,19 +465,19 @@ exports[`component:<InputPhone> prop:icon & error 1`] = `
               opacity=".87"
             />
             <path
-              d="M16.59 8.59L12 13.17 7.41 8.59 6 10l6 6 6-6-1.41-1.41z"
+              d="M16.59 8.59 12 13.17 7.41 8.59 6 10l6 6 6-6-1.41-1.41z"
             />
           </svg>
-        </ui_icon>
-      </ui_view>
-      <ui_view
+        </span>
+      </div>
+      <div
         class="view forceRow separator"
       />
-      <ui_view
+      <div
         class="view row wide"
       >
-        <ui_icon
-          class="icon h3 icon left error"
+        <span
+          class="icon headline-3 icon left error"
         >
           <svg
             fill="currentColor"
@@ -493,11 +493,11 @@ exports[`component:<InputPhone> prop:icon & error 1`] = `
               fill="none"
             />
             <path
-              d="M12 6a9.77 9.77 0 018.82 5.5C19.17 14.87 15.79 17 12 17s-7.17-2.13-8.82-5.5A9.77 9.77 0 0112 6m0-2C7 4 2.73 7.11 1 11.5 2.73 15.89 7 19 12 19s9.27-3.11 11-7.5C21.27 7.11 17 4 12 4zm0 5a2.5 2.5 0 010 5 2.5 2.5 0 010-5m0-2c-2.48 0-4.5 2.02-4.5 4.5S9.52 16 12 16s4.5-2.02 4.5-4.5S14.48 7 12 7z"
+              d="M12 6a9.77 9.77 0 0 1 8.82 5.5C19.17 14.87 15.79 17 12 17s-7.17-2.13-8.82-5.5A9.77 9.77 0 0 1 12 6m0-2C7 4 2.73 7.11 1 11.5 2.73 15.89 7 19 12 19s9.27-3.11 11-7.5C21.27 7.11 17 4 12 4zm0 5a2.5 2.5 0 0 1 0 5 2.5 2.5 0 0 1 0-5m0-2c-2.48 0-4.5 2.02-4.5 4.5S9.52 16 12 16s4.5-2.02 4.5-4.5S14.48 7 12 7z"
             />
           </svg>
-        </ui_icon>
-        <ui_view
+        </span>
+        <div
           class="view wide content"
         >
           <input
@@ -507,10 +507,10 @@ exports[`component:<InputPhone> prop:icon & error 1`] = `
             type="tel"
             value=""
           />
-        </ui_view>
-      </ui_view>
-      <ui_icon
-        class="icon h3 icon error"
+        </div>
+      </div>
+      <span
+        class="icon headline-3 icon error"
       >
         <svg
           fill="currentColor"
@@ -529,24 +529,24 @@ exports[`component:<InputPhone> prop:icon & 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_view>
+      </span>
+    </div>
+  </div>
 </DocumentFragment>
 `;
 exports[`component:<InputPhone> prop:icon 1`] = `
 <DocumentFragment>
-  <ui_view
+  <div
     class="view container"
   >
-    <ui_view
+    <div
       class="view row inputBorder"
     >
-      <ui_view
+      <div
         class="view row"
       >
-        <ui_view
+        <div
           class="view content"
         >
           <select
@@ -569,9 +569,9 @@ exports[`component:<InputPhone> prop:icon 1`] = `
               +001
             </option>
           </select>
-        </ui_view>
-        <ui_icon
-          class="icon h3 expand"
+        </div>
+        <span
+          class="icon headline-3 icon expand"
         >
           <svg
             fill="currentColor"
@@ -588,19 +588,19 @@ exports[`component:<InputPhone> prop:icon 1`] = `
               opacity=".87"
             />
             <path
-              d="M16.59 8.59L12 13.17 7.41 8.59 6 10l6 6 6-6-1.41-1.41z"
+              d="M16.59 8.59 12 13.17 7.41 8.59 6 10l6 6 6-6-1.41-1.41z"
             />
           </svg>
-        </ui_icon>
-      </ui_view>
-      <ui_view
+        </span>
+      </div>
+      <div
         class="view forceRow separator"
       />
-      <ui_view
+      <div
         class="view row wide"
       >
-        <ui_icon
-          class="icon h3 icon left"
+        <span
+          class="icon headline-3 icon left"
         >
           <svg
             fill="currentColor"
@@ -616,11 +616,11 @@ exports[`component:<InputPhone> prop:icon 1`] = `
               fill="none"
             />
             <path
-              d="M12 6a9.77 9.77 0 018.82 5.5C19.17 14.87 15.79 17 12 17s-7.17-2.13-8.82-5.5A9.77 9.77 0 0112 6m0-2C7 4 2.73 7.11 1 11.5 2.73 15.89 7 19 12 19s9.27-3.11 11-7.5C21.27 7.11 17 4 12 4zm0 5a2.5 2.5 0 010 5 2.5 2.5 0 010-5m0-2c-2.48 0-4.5 2.02-4.5 4.5S9.52 16 12 16s4.5-2.02 4.5-4.5S14.48 7 12 7z"
+              d="M12 6a9.77 9.77 0 0 1 8.82 5.5C19.17 14.87 15.79 17 12 17s-7.17-2.13-8.82-5.5A9.77 9.77 0 0 1 12 6m0-2C7 4 2.73 7.11 1 11.5 2.73 15.89 7 19 12 19s9.27-3.11 11-7.5C21.27 7.11 17 4 12 4zm0 5a2.5 2.5 0 0 1 0 5 2.5 2.5 0 0 1 0-5m0-2c-2.48 0-4.5 2.02-4.5 4.5S9.52 16 12 16s4.5-2.02 4.5-4.5S14.48 7 12 7z"
             />
           </svg>
-        </ui_icon>
-        <ui_view
+        </span>
+        <div
           class="view wide content"
         >
           <input
@@ -630,25 +630,25 @@ exports[`component:<InputPhone> prop:icon 1`] = `
             type="tel"
             value=""
           />
-        </ui_view>
-      </ui_view>
-    </ui_view>
-  </ui_view>
+        </div>
+      </div>
+    </div>
+  </div>
 </DocumentFragment>
 `;
 exports[`component:<InputPhone> prop:label 1`] = `
 <DocumentFragment>
-  <ui_view
+  <div
     class="view container"
   >
-    <ui_view
+    <div
       class="view row inputBorder"
     >
-      <ui_view
+      <div
         class="view row"
       >
-        <ui_view
+        <div
           class="view content"
         >
           <select
@@ -671,9 +671,9 @@ exports[`component:<InputPhone> prop:label 1`] = `
               +001
             </option>
           </select>
-        </ui_view>
-        <ui_icon
-          class="icon h3 expand"
+        </div>
+        <span
+          class="icon headline-3 icon expand"
         >
           <svg
             fill="currentColor"
@@ -690,25 +690,25 @@ exports[`component:<InputPhone> prop:label 1`] = `
               opacity=".87"
             />
             <path
-              d="M16.59 8.59L12 13.17 7.41 8.59 6 10l6 6 6-6-1.41-1.41z"
+              d="M16.59 8.59 12 13.17 7.41 8.59 6 10l6 6 6-6-1.41-1.41z"
             />
           </svg>
-        </ui_icon>
-      </ui_view>
-      <ui_view
+        </span>
+      </div>
+      <div
         class="view forceRow separator"
       />
-      <ui_view
+      <div
         class="view row wide"
       >
-        <ui_view
+        <div
           class="view wide content"
         >
-          <ui_text
+          <span
             class="text paragraph text label"
           >
             label
-          </ui_text>
+          </span>
           <input
             class="input input withLabel"
             maxlength="12"
@@ -716,32 +716,32 @@ exports[`component:<InputPhone> prop:label 1`] = `
             type="tel"
             value=""
           />
-        </ui_view>
-      </ui_view>
-    </ui_view>
-  </ui_view>
+        </div>
+      </div>
+    </div>
+  </div>
 </DocumentFragment>
 `;
 exports[`component:<InputPhone> prop:labelPrefix 1`] = `
 <DocumentFragment>
-  <ui_view
+  <div
     class="view container"
   >
-    <ui_view
+    <div
       class="view row inputBorder"
     >
-      <ui_view
+      <div
         class="view row"
       >
-        <ui_view
+        <div
           class="view content"
         >
-          <ui_text
+          <span
             class="text paragraph text label"
           >
             labelPrefix
-          </ui_text>
+          </span>
           <select
             class="select empty input prefix withLabel empty"
             name="name-prefix"
@@ -762,9 +762,9 @@ exports[`component:<InputPhone> prop:labelPrefix 1`] = `
               +001
             </option>
           </select>
-        </ui_view>
-        <ui_icon
-          class="icon h3 expand"
+        </div>
+        <span
+          class="icon headline-3 icon expand"
         >
           <svg
             fill="currentColor"
@@ -781,18 +781,18 @@ exports[`component:<InputPhone> prop:labelPrefix 1`] = `
               opacity=".87"
             />
             <path
-              d="M16.59 8.59L12 13.17 7.41 8.59 6 10l6 6 6-6-1.41-1.41z"
+              d="M16.59 8.59 12 13.17 7.41 8.59 6 10l6 6 6-6-1.41-1.41z"
             />
           </svg>
-        </ui_icon>
-      </ui_view>
-      <ui_view
+        </span>
+      </div>
+      <div
         class="view forceRow separator"
       />
-      <ui_view
+      <div
         class="view row wide"
       >
-        <ui_view
+        <div
           class="view wide content"
         >
           <input
@@ -802,37 +802,32 @@ exports[`component:<InputPhone> prop:labelPrefix 1`] = `
             type="tel"
             value=""
           />
-        </ui_view>
-      </ui_view>
-    </ui_view>
-  </ui_view>
+        </div>
+      </div>
+    </div>
+  </div>
 </DocumentFragment>
 `;
 exports[`component:<InputPhone> prop:required & prop:showRequired (true) 1`] = `
 <DocumentFragment>
-  <ui_view
+  <div
     class="view container"
   >
-    <ui_view
+    <div
       class="view row inputBorder"
     >
-      <ui_view
+      <div
         class="view row"
       >
-        <ui_view
+        <div
           class="view content"
         >
-          <ui_text
+          <span
             class="text paragraph text label"
           >
             labelPrefix
-            <span
-              class="required"
-            >
-               *
-            </span>
-          </ui_text>
+          </span>
           <select
             class="select empty input prefix withLabel empty"
             name="name-prefix"
@@ -854,9 +849,9 @@ exports[`component:<InputPhone> prop:required & prop:showRequired (true) 1`] = `
               +001
             </option>
           </select>
-        </ui_view>
-        <ui_icon
-          class="icon h3 expand"
+        </div>
+        <span
+          class="icon headline-3 icon expand"
         >
           <svg
             fill="currentColor"
@@ -873,21 +868,21 @@ exports[`component:<InputPhone> prop:required & prop:showRequired (true) 1`] = `
               opacity=".87"
             />
             <path
-              d="M16.59 8.59L12 13.17 7.41 8.59 6 10l6 6 6-6-1.41-1.41z"
+              d="M16.59 8.59 12 13.17 7.41 8.59 6 10l6 6 6-6-1.41-1.41z"
             />
           </svg>
-        </ui_icon>
-      </ui_view>
-      <ui_view
+        </span>
+      </div>
+      <div
         class="view forceRow separator"
       />
-      <ui_view
+      <div
         class="view row wide"
       >
-        <ui_view
+        <div
           class="view wide content"
         >
-          <ui_text
+          <span
             class="text paragraph text label"
           >
             label
@@ -896,7 +891,7 @@ exports[`component:<InputPhone> prop:required & prop:showRequired (true) 1`] = `
             >
                *
             </span>
-          </ui_text>
+          </span>
           <input
             class="input input withLabel"
             maxlength="12"
@@ -905,32 +900,32 @@ exports[`component:<InputPhone> prop:required & prop:showRequired (true) 1`] = `
             type="tel"
             value=""
           />
-        </ui_view>
-      </ui_view>
-    </ui_view>
-  </ui_view>
+        </div>
+      </div>
+    </div>
+  </div>
 </DocumentFragment>
 `;
 exports[`component:<InputPhone> prop:required 1`] = `
 <DocumentFragment>
-  <ui_view
+  <div
     class="view container"
   >
-    <ui_view
+    <div
       class="view row inputBorder"
     >
-      <ui_view
+      <div
         class="view row"
       >
-        <ui_view
+        <div
           class="view content"
         >
-          <ui_text
+          <span
             class="text paragraph text label"
           >
             labelPrefix
-          </ui_text>
+          </span>
           <select
             class="select empty input prefix withLabel empty"
             name="name-prefix"
@@ -952,9 +947,9 @@ exports[`component:<InputPhone> prop:required 1`] = `
               +001
             </option>
           </select>
-        </ui_view>
-        <ui_icon
-          class="icon h3 expand"
+        </div>
+        <span
+          class="icon headline-3 icon expand"
         >
           <svg
             fill="currentColor"
@@ -971,25 +966,25 @@ exports[`component:<InputPhone> prop:required 1`] = `
               opacity=".87"
             />
             <path
-              d="M16.59 8.59L12 13.17 7.41 8.59 6 10l6 6 6-6-1.41-1.41z"
+              d="M16.59 8.59 12 13.17 7.41 8.59 6 10l6 6 6-6-1.41-1.41z"
             />
           </svg>
-        </ui_icon>
-      </ui_view>
-      <ui_view
+        </span>
+      </div>
+      <div
         class="view forceRow separator"
       />
-      <ui_view
+      <div
         class="view row wide"
       >
-        <ui_view
+        <div
           class="view wide content"
         >
-          <ui_text
+          <span
             class="text paragraph text label"
           >
             label
-          </ui_text>
+          </span>
           <input
             class="input input withLabel"
             maxlength="12"
@@ -998,25 +993,25 @@ exports[`component:<InputPhone> prop:required 1`] = `
             type="tel"
             value=""
           />
-        </ui_view>
-      </ui_view>
-    </ui_view>
-  </ui_view>
+        </div>
+      </div>
+    </div>
+  </div>
 </DocumentFragment>
 `;
 exports[`component:<InputPhone> prop:showState (false) & error 1`] = `
 <DocumentFragment>
-  <ui_view
+  <div
     class="view container"
   >
-    <ui_view
+    <div
       class="view row inputBorder error"
     >
-      <ui_view
+      <div
         class="view row"
       >
-        <ui_view
+        <div
           class="view content"
         >
           <select
@@ -1039,9 +1034,9 @@ exports[`component:<InputPhone> prop:showState (false) & error 1`] = `
               +001
             </option>
           </select>
-        </ui_view>
-        <ui_icon
-          class="icon h3 expand"
+        </div>
+        <span
+          class="icon headline-3 icon expand"
         >
           <svg
             fill="currentColor"
@@ -1058,18 +1053,18 @@ exports[`component:<InputPhone> prop:showState (false) & error 1`] = `
               opacity=".87"
             />
             <path
-              d="M16.59 8.59L12 13.17 7.41 8.59 6 10l6 6 6-6-1.41-1.41z"
+              d="M16.59 8.59 12 13.17 7.41 8.59 6 10l6 6 6-6-1.41-1.41z"
             />
           </svg>
-        </ui_icon>
-      </ui_view>
-      <ui_view
+        </span>
+      </div>
+      <div
         class="view forceRow separator"
       />
-      <ui_view
+      <div
         class="view row wide"
       >
-        <ui_view
+        <div
           class="view wide content"
         >
           <input
@@ -1079,10 +1074,10 @@ exports[`component:<InputPhone> prop:showState (false) & error 1`] = `
             type="tel"
             value=""
           />
-        </ui_view>
-      </ui_view>
-      <ui_icon
-        class="icon h3 icon error"
+        </div>
+      </div>
+      <span
+        class="icon headline-3 icon error"
       >
         <svg
           fill="currentColor"
@@ -1101,24 +1096,24 @@ exports[`component:<InputPhone> prop:showState (false) & 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_view>
+      </span>
+    </div>
+  </div>
 </DocumentFragment>
 `;
 exports[`component:<InputPhone> prop:showState (false) & success 1`] = `
 <DocumentFragment>
-  <ui_view
+  <div
     class="view container"
   >
-    <ui_view
+    <div
       class="view row inputBorder"
     >
-      <ui_view
+      <div
         class="view row"
       >
-        <ui_view
+        <div
           class="view content"
         >
           <select
@@ -1141,9 +1136,9 @@ exports[`component:<InputPhone> prop:showState (false) & success 1`] = `
               +001
             </option>
           </select>
-        </ui_view>
-        <ui_icon
-          class="icon h3 expand"
+        </div>
+        <span
+          class="icon headline-3 icon expand"
         >
           <svg
             fill="currentColor"
@@ -1160,18 +1155,18 @@ exports[`component:<InputPhone> prop:showState (false) & success 1`] = `
               opacity=".87"
             />
             <path
-              d="M16.59 8.59L12 13.17 7.41 8.59 6 10l6 6 6-6-1.41-1.41z"
+              d="M16.59 8.59 12 13.17 7.41 8.59 6 10l6 6 6-6-1.41-1.41z"
             />
           </svg>
-        </ui_icon>
-      </ui_view>
-      <ui_view
+        </span>
+      </div>
+      <div
         class="view forceRow separator"
       />
-      <ui_view
+      <div
         class="view row wide"
       >
-        <ui_view
+        <div
           class="view wide content"
         >
           <input
@@ -1181,10 +1176,10 @@ exports[`component:<InputPhone> prop:showState (false) & success 1`] = `
             type="tel"
             value=""
           />
-        </ui_view>
-      </ui_view>
-      <ui_icon
-        class="icon h3 icon success"
+        </div>
+      </div>
+      <span
+        class="icon headline-3 icon success"
       >
         <svg
           fill="currentColor"
@@ -1196,31 +1191,31 @@ exports[`component:<InputPhone> prop:showState (false) & success 1`] = `
           xmlns="http://www.w3.org/2000/svg"
         >
           <path
-            d="M0 0h24v24H0V0z"
+            d="M0 0h24v24H0V0zm0 0h24v24H0V0z"
             fill="none"
           />
           <path
-            d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm4.59-12.42L10 14.17l-2.59-2.58L6 13l4 4 8-8z"
+            d="M16.59 7.58 10 14.17l-3.59-3.58L5 12l5 5 8-8zM12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z"
           />
         </svg>
-      </ui_icon>
-    </ui_view>
-  </ui_view>
+      </span>
+    </div>
+  </div>
 </DocumentFragment>
 `;
 exports[`component:<InputPhone> prop:showState (false) & warning 1`] = `
 <DocumentFragment>
-  <ui_view
+  <div
     class="view container"
   >
-    <ui_view
+    <div
       class="view row inputBorder"
     >
-      <ui_view
+      <div
         class="view row"
       >
-        <ui_view
+        <div
           class="view content"
         >
           <select
@@ -1243,9 +1238,9 @@ exports[`component:<InputPhone> prop:showState (false) & warning 1`] = `
               +001
             </option>
           </select>
-        </ui_view>
-        <ui_icon
-          class="icon h3 expand"
+        </div>
+        <span
+          class="icon headline-3 icon expand"
         >
           <svg
             fill="currentColor"
@@ -1262,18 +1257,18 @@ exports[`component:<InputPhone> prop:showState (false) & warning 1`] = `
               opacity=".87"
             />
             <path
-              d="M16.59 8.59L12 13.17 7.41 8.59 6 10l6 6 6-6-1.41-1.41z"
+              d="M16.59 8.59 12 13.17 7.41 8.59 6 10l6 6 6-6-1.41-1.41z"
             />
           </svg>
-        </ui_icon>
-      </ui_view>
-      <ui_view
+        </span>
+      </div>
+      <div
         class="view forceRow separator"
       />
-      <ui_view
+      <div
         class="view row wide"
       >
-        <ui_view
+        <div
           class="view wide content"
         >
           <input
@@ -1283,10 +1278,10 @@ exports[`component:<InputPhone> prop:showState (false) & warning 1`] = `
             type="tel"
             value=""
           />
-        </ui_view>
-      </ui_view>
-      <ui_icon
-        class="icon h3 icon warning"
+        </div>
+      </div>
+      <span
+        class="icon headline-3 icon warning"
       >
         <svg
           fill="currentColor"
@@ -1298,27 +1293,27 @@ exports[`component:<InputPhone> prop:showState (false) & 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_view>
-  </ui_view>
+      </span>
+    </div>
+  </div>
 </DocumentFragment>
 `;
 exports[`component:<InputPhone> prop:success 1`] = `
 <DocumentFragment>
-  <ui_view
+  <div
     class="view container"
   >
-    <ui_view
+    <div
       class="view row inputBorder"
     >
-      <ui_view
+      <div
         class="view row"
       >
-        <ui_view
+        <div
           class="view content"
         >
           <select
@@ -1341,9 +1336,9 @@ exports[`component:<InputPhone> prop:success 1`] = `
               +001
             </option>
           </select>
-        </ui_view>
-        <ui_icon
-          class="icon h3 expand"
+        </div>
+        <span
+          class="icon headline-3 icon expand"
         >
           <svg
             fill="currentColor"
@@ -1360,18 +1355,18 @@ exports[`component:<InputPhone> prop:success 1`] = `
               opacity=".87"
             />
             <path
-              d="M16.59 8.59L12 13.17 7.41 8.59 6 10l6 6 6-6-1.41-1.41z"
+              d="M16.59 8.59 12 13.17 7.41 8.59 6 10l6 6 6-6-1.41-1.41z"
             />
           </svg>
-        </ui_icon>
-      </ui_view>
-      <ui_view
+        </span>
+      </div>
+      <div
         class="view forceRow separator"
       />
-      <ui_view
+      <div
         class="view row wide"
       >
-        <ui_view
+        <div
           class="view wide content"
         >
           <input
@@ -1381,10 +1376,10 @@ exports[`component:<InputPhone> prop:success 1`] = `
             type="tel"
             value=""
           />
-        </ui_view>
-      </ui_view>
-      <ui_icon
-        class="icon h3 icon success"
+        </div>
+      </div>
+      <span
+        class="icon headline-3 icon success"
       >
         <svg
           fill="currentColor"
@@ -1396,33 +1391,38 @@ exports[`component:<InputPhone> prop:success 1`] = `
           xmlns="http://www.w3.org/2000/svg"
         >
           <path
-            d="M0 0h24v24H0V0z"
+            d="M0 0h24v24H0V0zm0 0h24v24H0V0z"
             fill="none"
           />
           <path
-            d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm4.59-12.42L10 14.17l-2.59-2.58L6 13l4 4 8-8z"
+            d="M16.59 7.58 10 14.17l-3.59-3.58L5 12l5 5 8-8zM12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z"
           />
         </svg>
-      </ui_icon>
-    </ui_view>
-  </ui_view>
+      </span>
+    </div>
+  </div>
 </DocumentFragment>
 `;
 exports[`component:<InputPhone> prop:value 1`] = `
 <DocumentFragment>
-  <ui_view
+  <div
     class="view container"
   >
-    <ui_view
+    <div
       class="view row inputBorder"
     >
-      <ui_view
+      <div
         class="view row"
       >
-        <ui_view
+        <div
           class="view content"
         >
+          <span
+            class="text paragraph prefixValue"
+          >
+            +44
+          </span>
           <select
             class="select input prefix"
             name="name-prefix"
@@ -1443,9 +1443,9 @@ exports[`component:<InputPhone> prop:value 1`] = `
               +001
             </option>
           </select>
-        </ui_view>
-        <ui_icon
-          class="icon h3 expand"
+        </div>
+        <span
+          class="icon headline-3 icon expand"
         >
           <svg
             fill="currentColor"
@@ -1462,18 +1462,18 @@ exports[`component:<InputPhone> prop:value 1`] = `
               opacity=".87"
             />
             <path
-              d="M16.59 8.59L12 13.17 7.41 8.59 6 10l6 6 6-6-1.41-1.41z"
+              d="M16.59 8.59 12 13.17 7.41 8.59 6 10l6 6 6-6-1.41-1.41z"
             />
           </svg>
-        </ui_icon>
-      </ui_view>
-      <ui_view
+        </span>
+      </div>
+      <div
         class="view forceRow separator"
       />
-      <ui_view
+      <div
         class="view row wide"
       >
-        <ui_view
+        <div
           class="view wide content"
         >
           <input
@@ -1483,25 +1483,25 @@ exports[`component:<InputPhone> prop:value 1`] = `
             type="tel"
             value="212123789"
           />
-        </ui_view>
-      </ui_view>
-    </ui_view>
-  </ui_view>
+        </div>
+      </div>
+    </div>
+  </div>
 </DocumentFragment>
 `;
 exports[`component:<InputPhone> prop:value:without prefixes 1`] = `
 <DocumentFragment>
-  <ui_view
+  <div
     class="view container"
   >
-    <ui_view
+    <div
       class="view row inputBorder"
     >
-      <ui_view
+      <div
         class="view row wide"
       >
-        <ui_view
+        <div
           class="view wide content"
         >
           <input
@@ -1511,25 +1511,25 @@ exports[`component:<InputPhone> prop:value:without prefixes 1`] = `
             type="tel"
             value="212123789"
           />
-        </ui_view>
-      </ui_view>
-    </ui_view>
-  </ui_view>
+        </div>
+      </div>
+    </div>
+  </div>
 </DocumentFragment>
 `;
 exports[`component:<InputPhone> prop:warning 1`] = `
 <DocumentFragment>
-  <ui_view
+  <div
     class="view container"
   >
-    <ui_view
+    <div
       class="view row inputBorder"
     >
-      <ui_view
+      <div
         class="view row"
       >
-        <ui_view
+        <div
           class="view content"
         >
           <select
@@ -1552,9 +1552,9 @@ exports[`component:<InputPhone> prop:warning 1`] = `
               +001
             </option>
           </select>
-        </ui_view>
-        <ui_icon
-          class="icon h3 expand"
+        </div>
+        <span
+          class="icon headline-3 icon expand"
         >
           <svg
             fill="currentColor"
@@ -1571,18 +1571,18 @@ exports[`component:<InputPhone> prop:warning 1`] = `
               opacity=".87"
             />
             <path
-              d="M16.59 8.59L12 13.17 7.41 8.59 6 10l6 6 6-6-1.41-1.41z"
+              d="M16.59 8.59 12 13.17 7.41 8.59 6 10l6 6 6-6-1.41-1.41z"
             />
           </svg>
-        </ui_icon>
-      </ui_view>
-      <ui_view
+        </span>
+      </div>
+      <div
         class="view forceRow separator"
       />
-      <ui_view
+      <div
         class="view row wide"
       >
-        <ui_view
+        <div
           class="view wide content"
         >
           <input
@@ -1592,10 +1592,10 @@ exports[`component:<InputPhone> prop:warning 1`] = `
             type="tel"
             value=""
           />
-        </ui_view>
-      </ui_view>
-      <ui_icon
-        class="icon h3 icon warning"
+        </div>
+      </div>
+      <span
+        class="icon headline-3 icon warning"
       >
         <svg
           fill="currentColor"
@@ -1607,27 +1607,27 @@ exports[`component:<InputPhone> 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_view>
-  </ui_view>
+      </span>
+    </div>
+  </div>
 </DocumentFragment>
 `;
 exports[`component:<InputPhone> renders 1`] = `
 <DocumentFragment>
-  <ui_view
+  <div
     class="view container"
   >
-    <ui_view
+    <div
       class="view row inputBorder"
     >
-      <ui_view
+      <div
         class="view row"
       >
-        <ui_view
+        <div
           class="view content"
         >
           <select
@@ -1650,9 +1650,9 @@ exports[`component:<InputPhone> renders 1`] = `
               +001
             </option>
           </select>
-        </ui_view>
-        <ui_icon
-          class="icon h3 expand"
+        </div>
+        <span
+          class="icon headline-3 icon expand"
         >
           <svg
             fill="currentColor"
@@ -1669,18 +1669,18 @@ exports[`component:<InputPhone> renders 1`] = `
               opacity=".87"
             />
             <path
-              d="M16.59 8.59L12 13.17 7.41 8.59 6 10l6 6 6-6-1.41-1.41z"
+              d="M16.59 8.59 12 13.17 7.41 8.59 6 10l6 6 6-6-1.41-1.41z"
             />
           </svg>
-        </ui_icon>
-      </ui_view>
-      <ui_view
+        </span>
+      </div>
+      <div
         class="view forceRow separator"
       />
-      <ui_view
+      <div
         class="view row wide"
       >
-        <ui_view
+        <div
           class="view wide content"
         >
           <input
@@ -1690,25 +1690,25 @@ exports[`component:<InputPhone> renders 1`] = `
             type="tel"
             value=""
           />
-        </ui_view>
-      </ui_view>
-    </ui_view>
-  </ui_view>
+        </div>
+      </div>
+    </div>
+  </div>
 </DocumentFragment>
 `;
 exports[`component:<InputPhone> testId 1`] = `
 <DocumentFragment>
-  <ui_view
+  <div
     class="view container"
   >
-    <ui_view
+    <div
       class="view row inputBorder"
     >
-      <ui_view
+      <div
         class="view row"
       >
-        <ui_view
+        <div
           class="view content"
         >
           <select
@@ -1732,9 +1732,9 @@ exports[`component:<InputPhone> testId 1`] = `
               +001
             </option>
           </select>
-        </ui_view>
-        <ui_icon
-          class="icon h3 expand"
+        </div>
+        <span
+          class="icon headline-3 icon expand"
         >
           <svg
             fill="currentColor"
@@ -1751,18 +1751,18 @@ exports[`component:<InputPhone> testId 1`] = `
               opacity=".87"
             />
             <path
-              d="M16.59 8.59L12 13.17 7.41 8.59 6 10l6 6 6-6-1.41-1.41z"
+              d="M16.59 8.59 12 13.17 7.41 8.59 6 10l6 6 6-6-1.41-1.41z"
             />
           </svg>
-        </ui_icon>
-      </ui_view>
-      <ui_view
+        </span>
+      </div>
+      <div
         class="view forceRow separator"
       />
-      <ui_view
+      <div
         class="view row wide"
       >
-        <ui_view
+        <div
           class="view wide content"
         >
           <input
@@ -1773,25 +1773,25 @@ exports[`component:<InputPhone> testId 1`] = `
             type="tel"
             value=""
           />
-        </ui_view>
-      </ui_view>
-    </ui_view>
-  </ui_view>
+        </div>
+      </div>
+    </div>
+  </div>
 </DocumentFragment>
 `;
 exports[`component:<InputPhone> testId:without prefixes 1`] = `
 <DocumentFragment>
-  <ui_view
+  <div
     class="view container"
   >
-    <ui_view
+    <div
       class="view row inputBorder"
     >
-      <ui_view
+      <div
         class="view row wide"
       >
-        <ui_view
+        <div
           class="view wide content"
         >
           <input
@@ -1802,9 +1802,9 @@ exports[`component:<InputPhone> testId:without prefixes 1`] = `
             type="tel"
             value=""
           />
-        </ui_view>
-      </ui_view>
-    </ui_view>
-  </ui_view>
+        </div>
+      </div>
+    </div>
+  </div>
 </DocumentFragment>
 `;