@mirai/ui 1.0.218 → 1.1.0-beta

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

@@ -2,20 +2,20 @@
 
 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
-            class="select empty input singleLine prefix"
+            class="select empty input prefix"
             name="name-prefix"
           >
             <option
@@ -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,47 +56,47 @@ 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
-            class="input input singleLine"
+            class="input input"
             maxlength="12"
             name="name-phone"
             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
-            class="select empty input singleLine prefix"
+            class="select empty input prefix"
             disabled=""
             name="name-prefix"
           >
@@ -116,48 +116,48 @@ 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
-            class="input input singleLine"
+            class="input input"
             disabled=""
             maxlength="12"
             name="name-phone"
             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
-            class="select empty input singleLine prefix"
+            class="select empty input prefix"
             name="name-prefix"
           >
             <option
@@ -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,27 +198,27 @@ 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
-            class="input input singleLine"
+            class="input input"
             maxlength="12"
             name="name-phone"
             type="tel"
             value=""
           />
-        </div>
-      </div>
-      <span
+        </ui_view>
+      </ui_view>
+      <ui_icon
         class="icon headline-3 icon error"
       >
         <svg
@@ -238,28 +238,28 @@ 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
-            class="select empty input singleLine prefix"
+            class="select empty input prefix"
             name="name-prefix"
           >
             <option
@@ -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,52 +300,52 @@ 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
-            class="input input singleLine"
+            class="input input"
             maxlength="12"
             name="name-phone"
             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
-            class="select empty input singleLine prefix"
+            class="select empty input prefix"
             disabled=""
             name="name-prefix"
           >
@@ -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,41 +393,41 @@ 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
-            class="input input singleLine"
+            class="input input"
             disabled=""
             maxlength="12"
             name="name-phone"
             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
-            class="select empty input singleLine prefix"
+            class="select empty input prefix"
             name="name-prefix"
           >
             <option
@@ -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,20 +496,20 @@ 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
-            class="input input singleLine"
+            class="input input"
             maxlength="12"
             name="name-phone"
             type="tel"
             value=""
           />
-        </div>
-      </div>
-      <span
+        </ui_view>
+      </ui_view>
+      <ui_icon
         class="icon headline-3 icon error"
       >
         <svg
@@ -529,28 +529,28 @@ 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
-            class="select empty input singleLine prefix"
+            class="select empty input prefix"
             name="name-prefix"
           >
             <option
@@ -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,40 +619,40 @@ 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
-            class="input input singleLine"
+            class="input input"
             maxlength="12"
             name="name-phone"
             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
-            class="select empty input singleLine prefix"
+            class="select empty input prefix"
             name="name-prefix"
           >
             <option
@@ -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,57 +693,57 @@ 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 singleLine withLabel"
+            class="input input withLabel"
             maxlength="12"
             name="name-phone"
             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 singleLine prefix withLabel empty"
+            class="select empty input prefix withLabel empty"
             name="name-prefix"
           >
             <option
@@ -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,46 +784,46 @@ 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
-            class="input input singleLine"
+            class="input input"
             maxlength="12"
             name="name-phone"
             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,9 +832,9 @@ exports[`component:<InputPhone> prop:required & prop:showRequired (true) 1`] = `
             >
                *
             </span>
-          </span>
+          </ui_text>
           <select
-            class="select empty input singleLine prefix withLabel empty"
+            class="select empty input prefix withLabel empty"
             name="name-prefix"
             required=""
           >
@@ -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,43 +896,43 @@ exports[`component:<InputPhone> prop:required & prop:showRequired (true) 1`] = `
             >
                *
             </span>
-          </span>
+          </ui_text>
           <input
-            class="input input singleLine withLabel"
+            class="input input withLabel"
             maxlength="12"
             name="name-phone"
             required=""
             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 singleLine prefix withLabel empty"
+            class="select empty input prefix withLabel empty"
             name="name-prefix"
             required=""
           >
@@ -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,53 +974,53 @@ 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 singleLine withLabel"
+            class="input input withLabel"
             maxlength="12"
             name="name-phone"
             required=""
             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
-            class="select empty input singleLine prefix"
+            class="select empty input prefix"
             name="name-prefix"
           >
             <option
@@ -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,27 +1061,27 @@ 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
-            class="input input singleLine"
+            class="input input"
             maxlength="12"
             name="name-phone"
             type="tel"
             value=""
           />
-        </div>
-      </div>
-      <span
+        </ui_view>
+      </ui_view>
+      <ui_icon
         class="icon headline-3 icon error"
       >
         <svg
@@ -1101,28 +1101,28 @@ 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
-            class="select empty input singleLine prefix"
+            class="select empty input prefix"
             name="name-prefix"
           >
             <option
@@ -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,27 +1163,27 @@ 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
-            class="input input singleLine"
+            class="input input"
             maxlength="12"
             name="name-phone"
             type="tel"
             value=""
           />
-        </div>
-      </div>
-      <span
+        </ui_view>
+      </ui_view>
+      <ui_icon
         class="icon headline-3 icon success"
       >
         <svg
@@ -1203,28 +1203,28 @@ 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
-            class="select empty input singleLine prefix"
+            class="select empty input prefix"
             name="name-prefix"
           >
             <option
@@ -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,27 +1265,27 @@ 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
-            class="input input singleLine"
+            class="input input"
             maxlength="12"
             name="name-phone"
             type="tel"
             value=""
           />
-        </div>
-      </div>
-      <span
+        </ui_view>
+      </ui_view>
+      <ui_icon
         class="icon headline-3 icon warning"
       >
         <svg
@@ -1301,28 +1301,28 @@ 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
-            class="select empty input singleLine prefix"
+            class="select empty input prefix"
             name="name-prefix"
           >
             <option
@@ -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,27 +1363,27 @@ 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
-            class="input input singleLine"
+            class="input input"
             maxlength="12"
             name="name-phone"
             type="tel"
             value=""
           />
-        </div>
-      </div>
-      <span
+        </ui_view>
+      </ui_view>
+      <ui_icon
         class="icon headline-3 icon success"
       >
         <svg
@@ -1403,28 +1403,28 @@ 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
-            class="select input singleLine prefix"
+            class="select input prefix"
             name="name-prefix"
           >
             <option
@@ -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,75 +1465,75 @@ 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
-            class="input input singleLine"
+            class="input input"
             maxlength="12"
             name="name-phone"
             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
-            class="input input singleLine"
+            class="input input"
             maxlength="12"
             name="name-phone"
             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
-            class="select empty input singleLine prefix"
+            class="select empty input prefix"
             name="name-prefix"
           >
             <option
@@ -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,27 +1574,27 @@ 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
-            class="input input singleLine"
+            class="input input"
             maxlength="12"
             name="name-phone"
             type="tel"
             value=""
           />
-        </div>
-      </div>
-      <span
+        </ui_view>
+      </ui_view>
+      <ui_icon
         class="icon headline-3 icon warning"
       >
         <svg
@@ -1610,28 +1610,28 @@ 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
-            class="select empty input singleLine prefix"
+            class="select empty input prefix"
             name="name-prefix"
           >
             <option
@@ -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,47 +1672,47 @@ 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
-            class="input input singleLine"
+            class="input input"
             maxlength="12"
             name="name-phone"
             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
-            class="select empty input singleLine prefix"
+            class="select empty input prefix"
             data-testid="mirai-select"
             name="name-prefix"
           >
@@ -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,57 +1754,57 @@ 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
-            class="input input singleLine"
+            class="input input"
             data-testid="mirai-input"
             maxlength="12"
             name="name-phone"
             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
-            class="input input singleLine"
+            class="input input"
             data-testid="mirai-input"
             maxlength="12"
             name="name-phone"
             type="tel"
             value=""
           />
-        </div>
-      </div>
-    </div>
-  </div>
+        </ui_view>
+      </ui_view>
+    </ui_view>
+  </ui_view>
 </DocumentFragment>
 `;