@mirai/ui 1.0.221 → 1.1.0-beta

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

@@ -2,16 +2,16 @@
 
 exports[`component:<InputPhone> inherit:className 1`] = `
 <DocumentFragment>
-  <div
+  <ui_view
     class="view container mirai"
   >
-    <div
+    <ui_view
       class="view row inputBorder"
     >
-      <div
+      <ui_view
         class="view row"
       >
-        <div
+        <ui_view
           class="view content"
         >
           <select
@@ -34,8 +34,8 @@ exports[`component:<InputPhone> inherit:className 1`] = `
               +001
             </option>
           </select>
-        </div>
-        <span
+        </ui_view>
+        <ui_icon
           class="icon headline-3 expand"
         >
           <svg
@@ -56,15 +56,15 @@ exports[`component:<InputPhone> inherit:className 1`] = `
               d="M16.59 8.59L12 13.17 7.41 8.59 6 10l6 6 6-6-1.41-1.41z"
             />
           </svg>
-        </span>
-      </div>
-      <div
+        </ui_icon>
+      </ui_view>
+      <ui_view
         class="view forceRow separator"
       />
-      <div
+      <ui_view
         class="view row wide"
       >
-        <div
+        <ui_view
           class="view wide content"
         >
           <input
@@ -74,25 +74,25 @@ exports[`component:<InputPhone> inherit:className 1`] = `
             type="tel"
             value=""
           />
-        </div>
-      </div>
-    </div>
-  </div>
+        </ui_view>
+      </ui_view>
+    </ui_view>
+  </ui_view>
 </DocumentFragment>
 `;
 
 exports[`component:<InputPhone> prop:disabled 1`] = `
 <DocumentFragment>
-  <div
+  <ui_view
     class="view container"
   >
-    <div
+    <ui_view
       class="view row inputBorder disabled"
     >
-      <div
+      <ui_view
         class="view row"
       >
-        <div
+        <ui_view
           class="view content"
         >
           <select
@@ -116,15 +116,15 @@ exports[`component:<InputPhone> prop:disabled 1`] = `
               +001
             </option>
           </select>
-        </div>
-      </div>
-      <div
+        </ui_view>
+      </ui_view>
+      <ui_view
         class="view forceRow separator"
       />
-      <div
+      <ui_view
         class="view row wide"
       >
-        <div
+        <ui_view
           class="view wide content"
         >
           <input
@@ -135,25 +135,25 @@ exports[`component:<InputPhone> prop:disabled 1`] = `
             type="tel"
             value=""
           />
-        </div>
-      </div>
-    </div>
-  </div>
+        </ui_view>
+      </ui_view>
+    </ui_view>
+  </ui_view>
 </DocumentFragment>
 `;
 
 exports[`component:<InputPhone> prop:error 1`] = `
 <DocumentFragment>
-  <div
+  <ui_view
     class="view container"
   >
-    <div
+    <ui_view
       class="view row inputBorder error"
     >
-      <div
+      <ui_view
         class="view row"
       >
-        <div
+        <ui_view
           class="view content"
         >
           <select
@@ -176,8 +176,8 @@ exports[`component:<InputPhone> prop:error 1`] = `
               +001
             </option>
           </select>
-        </div>
-        <span
+        </ui_view>
+        <ui_icon
           class="icon headline-3 expand"
         >
           <svg
@@ -198,15 +198,15 @@ exports[`component:<InputPhone> prop:error 1`] = `
               d="M16.59 8.59L12 13.17 7.41 8.59 6 10l6 6 6-6-1.41-1.41z"
             />
           </svg>
-        </span>
-      </div>
-      <div
+        </ui_icon>
+      </ui_view>
+      <ui_view
         class="view forceRow separator"
       />
-      <div
+      <ui_view
         class="view row wide"
       >
-        <div
+        <ui_view
           class="view wide content"
         >
           <input
@@ -216,9 +216,9 @@ exports[`component:<InputPhone> prop:error 1`] = `
             type="tel"
             value=""
           />
-        </div>
-      </div>
-      <span
+        </ui_view>
+      </ui_view>
+      <ui_icon
         class="icon headline-3 icon error"
       >
         <svg
@@ -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>
-      </span>
-    </div>
-  </div>
+      </ui_icon>
+    </ui_view>
+  </ui_view>
 </DocumentFragment>
 `;
 
 exports[`component:<InputPhone> prop:hint 1`] = `
 <DocumentFragment>
-  <div
+  <ui_view
     class="view container"
   >
-    <div
+    <ui_view
       class="view row inputBorder"
     >
-      <div
+      <ui_view
         class="view row"
       >
-        <div
+        <ui_view
           class="view content"
         >
           <select
@@ -278,8 +278,8 @@ exports[`component:<InputPhone> prop:hint 1`] = `
               +001
             </option>
           </select>
-        </div>
-        <span
+        </ui_view>
+        <ui_icon
           class="icon headline-3 expand"
         >
           <svg
@@ -300,15 +300,15 @@ exports[`component:<InputPhone> prop:hint 1`] = `
               d="M16.59 8.59L12 13.17 7.41 8.59 6 10l6 6 6-6-1.41-1.41z"
             />
           </svg>
-        </span>
-      </div>
-      <div
+        </ui_icon>
+      </ui_view>
+      <ui_view
         class="view forceRow separator"
       />
-      <div
+      <ui_view
         class="view row wide"
       >
-        <div
+        <ui_view
           class="view wide content"
         >
           <input
@@ -318,30 +318,30 @@ exports[`component:<InputPhone> prop:hint 1`] = `
             type="tel"
             value=""
           />
-        </div>
-      </div>
-    </div>
-    <span
+        </ui_view>
+      </ui_view>
+    </ui_view>
+    <ui_text
       class="text small text hint"
     >
       hint
-    </span>
-  </div>
+    </ui_text>
+  </ui_view>
 </DocumentFragment>
 `;
 
 exports[`component:<InputPhone> prop:icon & disabled 1`] = `
 <DocumentFragment>
-  <div
+  <ui_view
     class="view container"
   >
-    <div
+    <ui_view
       class="view row inputBorder disabled"
     >
-      <div
+      <ui_view
         class="view row"
       >
-        <div
+        <ui_view
           class="view content"
         >
           <select
@@ -365,15 +365,15 @@ exports[`component:<InputPhone> prop:icon & disabled 1`] = `
               +001
             </option>
           </select>
-        </div>
-      </div>
-      <div
+        </ui_view>
+      </ui_view>
+      <ui_view
         class="view forceRow separator"
       />
-      <div
+      <ui_view
         class="view row wide"
       >
-        <span
+        <ui_icon
           class="icon headline-3 icon left disabled"
         >
           <svg
@@ -393,8 +393,8 @@ exports[`component:<InputPhone> prop:icon & disabled 1`] = `
               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"
             />
           </svg>
-        </span>
-        <div
+        </ui_icon>
+        <ui_view
           class="view wide content"
         >
           <input
@@ -405,25 +405,25 @@ exports[`component:<InputPhone> prop:icon & disabled 1`] = `
             type="tel"
             value=""
           />
-        </div>
-      </div>
-    </div>
-  </div>
+        </ui_view>
+      </ui_view>
+    </ui_view>
+  </ui_view>
 </DocumentFragment>
 `;
 
 exports[`component:<InputPhone> prop:icon & error 1`] = `
 <DocumentFragment>
-  <div
+  <ui_view
     class="view container"
   >
-    <div
+    <ui_view
       class="view row inputBorder error"
     >
-      <div
+      <ui_view
         class="view row"
       >
-        <div
+        <ui_view
           class="view content"
         >
           <select
@@ -446,8 +446,8 @@ exports[`component:<InputPhone> prop:icon & error 1`] = `
               +001
             </option>
           </select>
-        </div>
-        <span
+        </ui_view>
+        <ui_icon
           class="icon headline-3 expand"
         >
           <svg
@@ -468,15 +468,15 @@ exports[`component:<InputPhone> prop:icon & error 1`] = `
               d="M16.59 8.59L12 13.17 7.41 8.59 6 10l6 6 6-6-1.41-1.41z"
             />
           </svg>
-        </span>
-      </div>
-      <div
+        </ui_icon>
+      </ui_view>
+      <ui_view
         class="view forceRow separator"
       />
-      <div
+      <ui_view
         class="view row wide"
       >
-        <span
+        <ui_icon
           class="icon headline-3 icon left error"
         >
           <svg
@@ -496,8 +496,8 @@ exports[`component:<InputPhone> prop:icon & error 1`] = `
               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"
             />
           </svg>
-        </span>
-        <div
+        </ui_icon>
+        <ui_view
           class="view wide content"
         >
           <input
@@ -507,9 +507,9 @@ exports[`component:<InputPhone> prop:icon & error 1`] = `
             type="tel"
             value=""
           />
-        </div>
-      </div>
-      <span
+        </ui_view>
+      </ui_view>
+      <ui_icon
         class="icon headline-3 icon error"
       >
         <svg
@@ -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>
-      </span>
-    </div>
-  </div>
+      </ui_icon>
+    </ui_view>
+  </ui_view>
 </DocumentFragment>
 `;
 
 exports[`component:<InputPhone> prop:icon 1`] = `
 <DocumentFragment>
-  <div
+  <ui_view
     class="view container"
   >
-    <div
+    <ui_view
       class="view row inputBorder"
     >
-      <div
+      <ui_view
         class="view row"
       >
-        <div
+        <ui_view
           class="view content"
         >
           <select
@@ -569,8 +569,8 @@ exports[`component:<InputPhone> prop:icon 1`] = `
               +001
             </option>
           </select>
-        </div>
-        <span
+        </ui_view>
+        <ui_icon
           class="icon headline-3 expand"
         >
           <svg
@@ -591,15 +591,15 @@ exports[`component:<InputPhone> prop:icon 1`] = `
               d="M16.59 8.59L12 13.17 7.41 8.59 6 10l6 6 6-6-1.41-1.41z"
             />
           </svg>
-        </span>
-      </div>
-      <div
+        </ui_icon>
+      </ui_view>
+      <ui_view
         class="view forceRow separator"
       />
-      <div
+      <ui_view
         class="view row wide"
       >
-        <span
+        <ui_icon
           class="icon headline-3 icon left"
         >
           <svg
@@ -619,8 +619,8 @@ exports[`component:<InputPhone> prop:icon 1`] = `
               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"
             />
           </svg>
-        </span>
-        <div
+        </ui_icon>
+        <ui_view
           class="view wide content"
         >
           <input
@@ -630,25 +630,25 @@ exports[`component:<InputPhone> prop:icon 1`] = `
             type="tel"
             value=""
           />
-        </div>
-      </div>
-    </div>
-  </div>
+        </ui_view>
+      </ui_view>
+    </ui_view>
+  </ui_view>
 </DocumentFragment>
 `;
 
 exports[`component:<InputPhone> prop:label 1`] = `
 <DocumentFragment>
-  <div
+  <ui_view
     class="view container"
   >
-    <div
+    <ui_view
       class="view row inputBorder"
     >
-      <div
+      <ui_view
         class="view row"
       >
-        <div
+        <ui_view
           class="view content"
         >
           <select
@@ -671,8 +671,8 @@ exports[`component:<InputPhone> prop:label 1`] = `
               +001
             </option>
           </select>
-        </div>
-        <span
+        </ui_view>
+        <ui_icon
           class="icon headline-3 expand"
         >
           <svg
@@ -693,22 +693,22 @@ exports[`component:<InputPhone> prop:label 1`] = `
               d="M16.59 8.59L12 13.17 7.41 8.59 6 10l6 6 6-6-1.41-1.41z"
             />
           </svg>
-        </span>
-      </div>
-      <div
+        </ui_icon>
+      </ui_view>
+      <ui_view
         class="view forceRow separator"
       />
-      <div
+      <ui_view
         class="view row wide"
       >
-        <div
+        <ui_view
           class="view wide content"
         >
-          <span
+          <ui_text
             class="text paragraph text label"
           >
             label
-          </span>
+          </ui_text>
           <input
             class="input input withLabel"
             maxlength="12"
@@ -716,32 +716,32 @@ exports[`component:<InputPhone> prop:label 1`] = `
             type="tel"
             value=""
           />
-        </div>
-      </div>
-    </div>
-  </div>
+        </ui_view>
+      </ui_view>
+    </ui_view>
+  </ui_view>
 </DocumentFragment>
 `;
 
 exports[`component:<InputPhone> prop:labelPrefix 1`] = `
 <DocumentFragment>
-  <div
+  <ui_view
     class="view container"
   >
-    <div
+    <ui_view
       class="view row inputBorder"
     >
-      <div
+      <ui_view
         class="view row"
       >
-        <div
+        <ui_view
           class="view content"
         >
-          <span
+          <ui_text
             class="text paragraph text label"
           >
             labelPrefix
-          </span>
+          </ui_text>
           <select
             class="select empty input prefix withLabel empty"
             name="name-prefix"
@@ -762,8 +762,8 @@ exports[`component:<InputPhone> prop:labelPrefix 1`] = `
               +001
             </option>
           </select>
-        </div>
-        <span
+        </ui_view>
+        <ui_icon
           class="icon headline-3 expand"
         >
           <svg
@@ -784,15 +784,15 @@ exports[`component:<InputPhone> prop:labelPrefix 1`] = `
               d="M16.59 8.59L12 13.17 7.41 8.59 6 10l6 6 6-6-1.41-1.41z"
             />
           </svg>
-        </span>
-      </div>
-      <div
+        </ui_icon>
+      </ui_view>
+      <ui_view
         class="view forceRow separator"
       />
-      <div
+      <ui_view
         class="view row wide"
       >
-        <div
+        <ui_view
           class="view wide content"
         >
           <input
@@ -802,28 +802,28 @@ exports[`component:<InputPhone> prop:labelPrefix 1`] = `
             type="tel"
             value=""
           />
-        </div>
-      </div>
-    </div>
-  </div>
+        </ui_view>
+      </ui_view>
+    </ui_view>
+  </ui_view>
 </DocumentFragment>
 `;
 
 exports[`component:<InputPhone> prop:required & prop:showRequired (true) 1`] = `
 <DocumentFragment>
-  <div
+  <ui_view
     class="view container"
   >
-    <div
+    <ui_view
       class="view row inputBorder"
     >
-      <div
+      <ui_view
         class="view row"
       >
-        <div
+        <ui_view
           class="view content"
         >
-          <span
+          <ui_text
             class="text paragraph text label"
           >
             labelPrefix
@@ -832,7 +832,7 @@ exports[`component:<InputPhone> prop:required & prop:showRequired (true) 1`] = `
             >
                *
             </span>
-          </span>
+          </ui_text>
           <select
             class="select empty input prefix withLabel empty"
             name="name-prefix"
@@ -854,8 +854,8 @@ exports[`component:<InputPhone> prop:required & prop:showRequired (true) 1`] = `
               +001
             </option>
           </select>
-        </div>
-        <span
+        </ui_view>
+        <ui_icon
           class="icon headline-3 expand"
         >
           <svg
@@ -876,18 +876,18 @@ exports[`component:<InputPhone> prop:required & prop:showRequired (true) 1`] = `
               d="M16.59 8.59L12 13.17 7.41 8.59 6 10l6 6 6-6-1.41-1.41z"
             />
           </svg>
-        </span>
-      </div>
-      <div
+        </ui_icon>
+      </ui_view>
+      <ui_view
         class="view forceRow separator"
       />
-      <div
+      <ui_view
         class="view row wide"
       >
-        <div
+        <ui_view
           class="view wide content"
         >
-          <span
+          <ui_text
             class="text paragraph text label"
           >
             label
@@ -896,7 +896,7 @@ exports[`component:<InputPhone> prop:required & prop:showRequired (true) 1`] = `
             >
                *
             </span>
-          </span>
+          </ui_text>
           <input
             class="input input withLabel"
             maxlength="12"
@@ -905,32 +905,32 @@ exports[`component:<InputPhone> prop:required & prop:showRequired (true) 1`] = `
             type="tel"
             value=""
           />
-        </div>
-      </div>
-    </div>
-  </div>
+        </ui_view>
+      </ui_view>
+    </ui_view>
+  </ui_view>
 </DocumentFragment>
 `;
 
 exports[`component:<InputPhone> prop:required 1`] = `
 <DocumentFragment>
-  <div
+  <ui_view
     class="view container"
   >
-    <div
+    <ui_view
       class="view row inputBorder"
     >
-      <div
+      <ui_view
         class="view row"
       >
-        <div
+        <ui_view
           class="view content"
         >
-          <span
+          <ui_text
             class="text paragraph text label"
           >
             labelPrefix
-          </span>
+          </ui_text>
           <select
             class="select empty input prefix withLabel empty"
             name="name-prefix"
@@ -952,8 +952,8 @@ exports[`component:<InputPhone> prop:required 1`] = `
               +001
             </option>
           </select>
-        </div>
-        <span
+        </ui_view>
+        <ui_icon
           class="icon headline-3 expand"
         >
           <svg
@@ -974,22 +974,22 @@ exports[`component:<InputPhone> prop:required 1`] = `
               d="M16.59 8.59L12 13.17 7.41 8.59 6 10l6 6 6-6-1.41-1.41z"
             />
           </svg>
-        </span>
-      </div>
-      <div
+        </ui_icon>
+      </ui_view>
+      <ui_view
         class="view forceRow separator"
       />
-      <div
+      <ui_view
         class="view row wide"
       >
-        <div
+        <ui_view
           class="view wide content"
         >
-          <span
+          <ui_text
             class="text paragraph text label"
           >
             label
-          </span>
+          </ui_text>
           <input
             class="input input withLabel"
             maxlength="12"
@@ -998,25 +998,25 @@ exports[`component:<InputPhone> prop:required 1`] = `
             type="tel"
             value=""
           />
-        </div>
-      </div>
-    </div>
-  </div>
+        </ui_view>
+      </ui_view>
+    </ui_view>
+  </ui_view>
 </DocumentFragment>
 `;
 
 exports[`component:<InputPhone> prop:showState (false) & error 1`] = `
 <DocumentFragment>
-  <div
+  <ui_view
     class="view container"
   >
-    <div
+    <ui_view
       class="view row inputBorder error"
     >
-      <div
+      <ui_view
         class="view row"
       >
-        <div
+        <ui_view
           class="view content"
         >
           <select
@@ -1039,8 +1039,8 @@ exports[`component:<InputPhone> prop:showState (false) & error 1`] = `
               +001
             </option>
           </select>
-        </div>
-        <span
+        </ui_view>
+        <ui_icon
           class="icon headline-3 expand"
         >
           <svg
@@ -1061,15 +1061,15 @@ exports[`component:<InputPhone> prop:showState (false) & error 1`] = `
               d="M16.59 8.59L12 13.17 7.41 8.59 6 10l6 6 6-6-1.41-1.41z"
             />
           </svg>
-        </span>
-      </div>
-      <div
+        </ui_icon>
+      </ui_view>
+      <ui_view
         class="view forceRow separator"
       />
-      <div
+      <ui_view
         class="view row wide"
       >
-        <div
+        <ui_view
           class="view wide content"
         >
           <input
@@ -1079,9 +1079,9 @@ exports[`component:<InputPhone> prop:showState (false) & error 1`] = `
             type="tel"
             value=""
           />
-        </div>
-      </div>
-      <span
+        </ui_view>
+      </ui_view>
+      <ui_icon
         class="icon headline-3 icon error"
       >
         <svg
@@ -1101,24 +1101,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>
-      </span>
-    </div>
-  </div>
+      </ui_icon>
+    </ui_view>
+  </ui_view>
 </DocumentFragment>
 `;
 
 exports[`component:<InputPhone> prop:showState (false) & success 1`] = `
 <DocumentFragment>
-  <div
+  <ui_view
     class="view container"
   >
-    <div
+    <ui_view
       class="view row inputBorder"
     >
-      <div
+      <ui_view
         class="view row"
       >
-        <div
+        <ui_view
           class="view content"
         >
           <select
@@ -1141,8 +1141,8 @@ exports[`component:<InputPhone> prop:showState (false) & success 1`] = `
               +001
             </option>
           </select>
-        </div>
-        <span
+        </ui_view>
+        <ui_icon
           class="icon headline-3 expand"
         >
           <svg
@@ -1163,15 +1163,15 @@ exports[`component:<InputPhone> prop:showState (false) & success 1`] = `
               d="M16.59 8.59L12 13.17 7.41 8.59 6 10l6 6 6-6-1.41-1.41z"
             />
           </svg>
-        </span>
-      </div>
-      <div
+        </ui_icon>
+      </ui_view>
+      <ui_view
         class="view forceRow separator"
       />
-      <div
+      <ui_view
         class="view row wide"
       >
-        <div
+        <ui_view
           class="view wide content"
         >
           <input
@@ -1181,9 +1181,9 @@ exports[`component:<InputPhone> prop:showState (false) & success 1`] = `
             type="tel"
             value=""
           />
-        </div>
-      </div>
-      <span
+        </ui_view>
+      </ui_view>
+      <ui_icon
         class="icon headline-3 icon success"
       >
         <svg
@@ -1203,24 +1203,24 @@ exports[`component:<InputPhone> prop:showState (false) & success 1`] = `
             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"
           />
         </svg>
-      </span>
-    </div>
-  </div>
+      </ui_icon>
+    </ui_view>
+  </ui_view>
 </DocumentFragment>
 `;
 
 exports[`component:<InputPhone> prop:showState (false) & warning 1`] = `
 <DocumentFragment>
-  <div
+  <ui_view
     class="view container"
   >
-    <div
+    <ui_view
       class="view row inputBorder"
     >
-      <div
+      <ui_view
         class="view row"
       >
-        <div
+        <ui_view
           class="view content"
         >
           <select
@@ -1243,8 +1243,8 @@ exports[`component:<InputPhone> prop:showState (false) & warning 1`] = `
               +001
             </option>
           </select>
-        </div>
-        <span
+        </ui_view>
+        <ui_icon
           class="icon headline-3 expand"
         >
           <svg
@@ -1265,15 +1265,15 @@ exports[`component:<InputPhone> prop:showState (false) & warning 1`] = `
               d="M16.59 8.59L12 13.17 7.41 8.59 6 10l6 6 6-6-1.41-1.41z"
             />
           </svg>
-        </span>
-      </div>
-      <div
+        </ui_icon>
+      </ui_view>
+      <ui_view
         class="view forceRow separator"
       />
-      <div
+      <ui_view
         class="view row wide"
       >
-        <div
+        <ui_view
           class="view wide content"
         >
           <input
@@ -1283,9 +1283,9 @@ exports[`component:<InputPhone> prop:showState (false) & warning 1`] = `
             type="tel"
             value=""
           />
-        </div>
-      </div>
-      <span
+        </ui_view>
+      </ui_view>
+      <ui_icon
         class="icon headline-3 icon warning"
       >
         <svg
@@ -1301,24 +1301,24 @@ exports[`component:<InputPhone> prop:showState (false) & warning 1`] = `
             d="M12 5.99L19.53 19H4.47L12 5.99M12 2L1 21h22L12 2zm1 14h-2v2h2v-2zm0-6h-2v4h2v-4z"
           />
         </svg>
-      </span>
-    </div>
-  </div>
+      </ui_icon>
+    </ui_view>
+  </ui_view>
 </DocumentFragment>
 `;
 
 exports[`component:<InputPhone> prop:success 1`] = `
 <DocumentFragment>
-  <div
+  <ui_view
     class="view container"
   >
-    <div
+    <ui_view
       class="view row inputBorder"
     >
-      <div
+      <ui_view
         class="view row"
       >
-        <div
+        <ui_view
           class="view content"
         >
           <select
@@ -1341,8 +1341,8 @@ exports[`component:<InputPhone> prop:success 1`] = `
               +001
             </option>
           </select>
-        </div>
-        <span
+        </ui_view>
+        <ui_icon
           class="icon headline-3 expand"
         >
           <svg
@@ -1363,15 +1363,15 @@ exports[`component:<InputPhone> prop:success 1`] = `
               d="M16.59 8.59L12 13.17 7.41 8.59 6 10l6 6 6-6-1.41-1.41z"
             />
           </svg>
-        </span>
-      </div>
-      <div
+        </ui_icon>
+      </ui_view>
+      <ui_view
         class="view forceRow separator"
       />
-      <div
+      <ui_view
         class="view row wide"
       >
-        <div
+        <ui_view
           class="view wide content"
         >
           <input
@@ -1381,9 +1381,9 @@ exports[`component:<InputPhone> prop:success 1`] = `
             type="tel"
             value=""
           />
-        </div>
-      </div>
-      <span
+        </ui_view>
+      </ui_view>
+      <ui_icon
         class="icon headline-3 icon success"
       >
         <svg
@@ -1403,24 +1403,24 @@ exports[`component:<InputPhone> prop:success 1`] = `
             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"
           />
         </svg>
-      </span>
-    </div>
-  </div>
+      </ui_icon>
+    </ui_view>
+  </ui_view>
 </DocumentFragment>
 `;
 
 exports[`component:<InputPhone> prop:value 1`] = `
 <DocumentFragment>
-  <div
+  <ui_view
     class="view container"
   >
-    <div
+    <ui_view
       class="view row inputBorder"
     >
-      <div
+      <ui_view
         class="view row"
       >
-        <div
+        <ui_view
           class="view content"
         >
           <select
@@ -1443,8 +1443,8 @@ exports[`component:<InputPhone> prop:value 1`] = `
               +001
             </option>
           </select>
-        </div>
-        <span
+        </ui_view>
+        <ui_icon
           class="icon headline-3 expand"
         >
           <svg
@@ -1465,15 +1465,15 @@ exports[`component:<InputPhone> prop:value 1`] = `
               d="M16.59 8.59L12 13.17 7.41 8.59 6 10l6 6 6-6-1.41-1.41z"
             />
           </svg>
-        </span>
-      </div>
-      <div
+        </ui_icon>
+      </ui_view>
+      <ui_view
         class="view forceRow separator"
       />
-      <div
+      <ui_view
         class="view row wide"
       >
-        <div
+        <ui_view
           class="view wide content"
         >
           <input
@@ -1483,25 +1483,25 @@ exports[`component:<InputPhone> prop:value 1`] = `
             type="tel"
             value="212123789"
           />
-        </div>
-      </div>
-    </div>
-  </div>
+        </ui_view>
+      </ui_view>
+    </ui_view>
+  </ui_view>
 </DocumentFragment>
 `;
 
 exports[`component:<InputPhone> prop:value:without prefixes 1`] = `
 <DocumentFragment>
-  <div
+  <ui_view
     class="view container"
   >
-    <div
+    <ui_view
       class="view row inputBorder"
     >
-      <div
+      <ui_view
         class="view row wide"
       >
-        <div
+        <ui_view
           class="view wide content"
         >
           <input
@@ -1511,25 +1511,25 @@ exports[`component:<InputPhone> prop:value:without prefixes 1`] = `
             type="tel"
             value="212123789"
           />
-        </div>
-      </div>
-    </div>
-  </div>
+        </ui_view>
+      </ui_view>
+    </ui_view>
+  </ui_view>
 </DocumentFragment>
 `;
 
 exports[`component:<InputPhone> prop:warning 1`] = `
 <DocumentFragment>
-  <div
+  <ui_view
     class="view container"
   >
-    <div
+    <ui_view
       class="view row inputBorder"
     >
-      <div
+      <ui_view
         class="view row"
       >
-        <div
+        <ui_view
           class="view content"
         >
           <select
@@ -1552,8 +1552,8 @@ exports[`component:<InputPhone> prop:warning 1`] = `
               +001
             </option>
           </select>
-        </div>
-        <span
+        </ui_view>
+        <ui_icon
           class="icon headline-3 expand"
         >
           <svg
@@ -1574,15 +1574,15 @@ exports[`component:<InputPhone> prop:warning 1`] = `
               d="M16.59 8.59L12 13.17 7.41 8.59 6 10l6 6 6-6-1.41-1.41z"
             />
           </svg>
-        </span>
-      </div>
-      <div
+        </ui_icon>
+      </ui_view>
+      <ui_view
         class="view forceRow separator"
       />
-      <div
+      <ui_view
         class="view row wide"
       >
-        <div
+        <ui_view
           class="view wide content"
         >
           <input
@@ -1592,9 +1592,9 @@ exports[`component:<InputPhone> prop:warning 1`] = `
             type="tel"
             value=""
           />
-        </div>
-      </div>
-      <span
+        </ui_view>
+      </ui_view>
+      <ui_icon
         class="icon headline-3 icon warning"
       >
         <svg
@@ -1610,24 +1610,24 @@ exports[`component:<InputPhone> prop:warning 1`] = `
             d="M12 5.99L19.53 19H4.47L12 5.99M12 2L1 21h22L12 2zm1 14h-2v2h2v-2zm0-6h-2v4h2v-4z"
           />
         </svg>
-      </span>
-    </div>
-  </div>
+      </ui_icon>
+    </ui_view>
+  </ui_view>
 </DocumentFragment>
 `;
 
 exports[`component:<InputPhone> renders 1`] = `
 <DocumentFragment>
-  <div
+  <ui_view
     class="view container"
   >
-    <div
+    <ui_view
       class="view row inputBorder"
     >
-      <div
+      <ui_view
         class="view row"
       >
-        <div
+        <ui_view
           class="view content"
         >
           <select
@@ -1650,8 +1650,8 @@ exports[`component:<InputPhone> renders 1`] = `
               +001
             </option>
           </select>
-        </div>
-        <span
+        </ui_view>
+        <ui_icon
           class="icon headline-3 expand"
         >
           <svg
@@ -1672,15 +1672,15 @@ exports[`component:<InputPhone> renders 1`] = `
               d="M16.59 8.59L12 13.17 7.41 8.59 6 10l6 6 6-6-1.41-1.41z"
             />
           </svg>
-        </span>
-      </div>
-      <div
+        </ui_icon>
+      </ui_view>
+      <ui_view
         class="view forceRow separator"
       />
-      <div
+      <ui_view
         class="view row wide"
       >
-        <div
+        <ui_view
           class="view wide content"
         >
           <input
@@ -1690,25 +1690,25 @@ exports[`component:<InputPhone> renders 1`] = `
             type="tel"
             value=""
           />
-        </div>
-      </div>
-    </div>
-  </div>
+        </ui_view>
+      </ui_view>
+    </ui_view>
+  </ui_view>
 </DocumentFragment>
 `;
 
 exports[`component:<InputPhone> testId 1`] = `
 <DocumentFragment>
-  <div
+  <ui_view
     class="view container"
   >
-    <div
+    <ui_view
       class="view row inputBorder"
     >
-      <div
+      <ui_view
         class="view row"
       >
-        <div
+        <ui_view
           class="view content"
         >
           <select
@@ -1732,8 +1732,8 @@ exports[`component:<InputPhone> testId 1`] = `
               +001
             </option>
           </select>
-        </div>
-        <span
+        </ui_view>
+        <ui_icon
           class="icon headline-3 expand"
         >
           <svg
@@ -1754,15 +1754,15 @@ exports[`component:<InputPhone> testId 1`] = `
               d="M16.59 8.59L12 13.17 7.41 8.59 6 10l6 6 6-6-1.41-1.41z"
             />
           </svg>
-        </span>
-      </div>
-      <div
+        </ui_icon>
+      </ui_view>
+      <ui_view
         class="view forceRow separator"
       />
-      <div
+      <ui_view
         class="view row wide"
       >
-        <div
+        <ui_view
           class="view wide content"
         >
           <input
@@ -1773,25 +1773,25 @@ exports[`component:<InputPhone> testId 1`] = `
             type="tel"
             value=""
           />
-        </div>
-      </div>
-    </div>
-  </div>
+        </ui_view>
+      </ui_view>
+    </ui_view>
+  </ui_view>
 </DocumentFragment>
 `;
 
 exports[`component:<InputPhone> testId:without prefixes 1`] = `
 <DocumentFragment>
-  <div
+  <ui_view
     class="view container"
   >
-    <div
+    <ui_view
       class="view row inputBorder"
     >
-      <div
+      <ui_view
         class="view row wide"
       >
-        <div
+        <ui_view
           class="view wide content"
         >
           <input
@@ -1802,9 +1802,9 @@ exports[`component:<InputPhone> testId:without prefixes 1`] = `
             type="tel"
             value=""
           />
-        </div>
-      </div>
-    </div>
-  </div>
+        </ui_view>
+      </ui_view>
+    </ui_view>
+  </ui_view>
 </DocumentFragment>
 `;