@mirai/ui 1.1.16 → 2.0.1

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

@@ -2,16 +2,16 @@
 
 exports[`component:<InputPhone> inherit:className 1`] = `
 <DocumentFragment>
-  <div
-    class="view container mirai"
+  <ui_input_phone
+    class="view inputPhone 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 icon expand"
         >
           <svg
@@ -56,15 +56,15 @@ exports[`component:<InputPhone> inherit:className 1`] = `
               d="M16.59 8.59 12 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_input_phone>
 </DocumentFragment>
 `;
 
 exports[`component:<InputPhone> prop:disabled 1`] = `
 <DocumentFragment>
-  <div
-    class="view container"
+  <ui_input_phone
+    class="view inputPhone"
   >
-    <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_input_phone>
 </DocumentFragment>
 `;
 
 exports[`component:<InputPhone> prop:error 1`] = `
 <DocumentFragment>
-  <div
-    class="view container"
+  <ui_input_phone
+    class="view inputPhone"
   >
-    <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 icon expand"
         >
           <svg
@@ -198,15 +198,15 @@ exports[`component:<InputPhone> prop:error 1`] = `
               d="M16.59 8.59 12 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_input_phone>
 </DocumentFragment>
 `;
 
 exports[`component:<InputPhone> prop:hint 1`] = `
 <DocumentFragment>
-  <div
-    class="view container"
+  <ui_input_phone
+    class="view inputPhone"
   >
-    <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 icon expand"
         >
           <svg
@@ -300,15 +300,15 @@ exports[`component:<InputPhone> prop:hint 1`] = `
               d="M16.59 8.59 12 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_input_phone>
 </DocumentFragment>
 `;
 
 exports[`component:<InputPhone> prop:icon & disabled 1`] = `
 <DocumentFragment>
-  <div
-    class="view container"
+  <ui_input_phone
+    class="view inputPhone"
   >
-    <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 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>
-        </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_input_phone>
 </DocumentFragment>
 `;
 
 exports[`component:<InputPhone> prop:icon & error 1`] = `
 <DocumentFragment>
-  <div
-    class="view container"
+  <ui_input_phone
+    class="view inputPhone"
   >
-    <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 icon expand"
         >
           <svg
@@ -468,15 +468,15 @@ exports[`component:<InputPhone> prop:icon & error 1`] = `
               d="M16.59 8.59 12 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 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>
-        </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_input_phone>
 </DocumentFragment>
 `;
 
 exports[`component:<InputPhone> prop:icon 1`] = `
 <DocumentFragment>
-  <div
-    class="view container"
+  <ui_input_phone
+    class="view inputPhone"
   >
-    <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 icon expand"
         >
           <svg
@@ -591,15 +591,15 @@ exports[`component:<InputPhone> prop:icon 1`] = `
               d="M16.59 8.59 12 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 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>
-        </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_input_phone>
 </DocumentFragment>
 `;
 
 exports[`component:<InputPhone> prop:label 1`] = `
 <DocumentFragment>
-  <div
-    class="view container"
+  <ui_input_phone
+    class="view inputPhone"
   >
-    <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 icon expand"
         >
           <svg
@@ -693,57 +693,61 @@ exports[`component:<InputPhone> prop:label 1`] = `
               d="M16.59 8.59 12 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
+          <label
             class="text paragraph text label"
+            for="name"
           >
             label
-          </span>
+          </label>
           <input
             class="input input withLabel"
+            id="name"
             maxlength="12"
             name="name-phone"
             type="tel"
             value=""
           />
-        </div>
-      </div>
-    </div>
-  </div>
+        </ui_view>
+      </ui_view>
+    </ui_view>
+  </ui_input_phone>
 </DocumentFragment>
 `;
 
 exports[`component:<InputPhone> prop:labelPrefix 1`] = `
 <DocumentFragment>
-  <div
-    class="view container"
+  <ui_input_phone
+    class="view inputPhone"
   >
-    <div
+    <ui_view
       class="view row inputBorder"
     >
-      <div
+      <ui_view
         class="view row"
       >
-        <div
+        <ui_view
           class="view content"
         >
-          <span
+          <label
             class="text paragraph text label"
+            for="name-prefix"
           >
             labelPrefix
-          </span>
+          </label>
           <select
             class="select empty input prefix withLabel empty"
+            id="name-prefix"
             name="name-prefix"
           >
             <option
@@ -762,8 +766,8 @@ exports[`component:<InputPhone> prop:labelPrefix 1`] = `
               +001
             </option>
           </select>
-        </div>
-        <span
+        </ui_view>
+        <ui_icon
           class="icon headline-3 icon expand"
         >
           <svg
@@ -784,15 +788,15 @@ exports[`component:<InputPhone> prop:labelPrefix 1`] = `
               d="M16.59 8.59 12 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,34 +806,36 @@ exports[`component:<InputPhone> prop:labelPrefix 1`] = `
             type="tel"
             value=""
           />
-        </div>
-      </div>
-    </div>
-  </div>
+        </ui_view>
+      </ui_view>
+    </ui_view>
+  </ui_input_phone>
 </DocumentFragment>
 `;
 
 exports[`component:<InputPhone> prop:required & prop:showRequired (true) 1`] = `
 <DocumentFragment>
-  <div
-    class="view container"
+  <ui_input_phone
+    class="view inputPhone"
   >
-    <div
+    <ui_view
       class="view row inputBorder"
     >
-      <div
+      <ui_view
         class="view row"
       >
-        <div
+        <ui_view
           class="view content"
         >
-          <span
+          <label
             class="text paragraph text label"
+            for="name-prefix"
           >
             labelPrefix
-          </span>
+          </label>
           <select
             class="select empty input prefix withLabel empty"
+            id="name-prefix"
             name="name-prefix"
             required=""
           >
@@ -849,8 +855,8 @@ exports[`component:<InputPhone> prop:required & prop:showRequired (true) 1`] = `
               +001
             </option>
           </select>
-        </div>
-        <span
+        </ui_view>
+        <ui_icon
           class="icon headline-3 icon expand"
         >
           <svg
@@ -871,19 +877,20 @@ exports[`component:<InputPhone> prop:required & prop:showRequired (true) 1`] = `
               d="M16.59 8.59 12 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
+          <label
             class="text paragraph text label"
+            for="name"
           >
             label
             <span
@@ -891,43 +898,46 @@ exports[`component:<InputPhone> prop:required & prop:showRequired (true) 1`] = `
             >
                *
             </span>
-          </span>
+          </label>
           <input
             class="input input withLabel"
+            id="name"
             maxlength="12"
             name="name-phone"
             required=""
             type="tel"
             value=""
           />
-        </div>
-      </div>
-    </div>
-  </div>
+        </ui_view>
+      </ui_view>
+    </ui_view>
+  </ui_input_phone>
 </DocumentFragment>
 `;
 
 exports[`component:<InputPhone> prop:required 1`] = `
 <DocumentFragment>
-  <div
-    class="view container"
+  <ui_input_phone
+    class="view inputPhone"
   >
-    <div
+    <ui_view
       class="view row inputBorder"
     >
-      <div
+      <ui_view
         class="view row"
       >
-        <div
+        <ui_view
           class="view content"
         >
-          <span
+          <label
             class="text paragraph text label"
+            for="name-prefix"
           >
             labelPrefix
-          </span>
+          </label>
           <select
             class="select empty input prefix withLabel empty"
+            id="name-prefix"
             name="name-prefix"
             required=""
           >
@@ -947,8 +957,8 @@ exports[`component:<InputPhone> prop:required 1`] = `
               +001
             </option>
           </select>
-        </div>
-        <span
+        </ui_view>
+        <ui_icon
           class="icon headline-3 icon expand"
         >
           <svg
@@ -969,49 +979,51 @@ exports[`component:<InputPhone> prop:required 1`] = `
               d="M16.59 8.59 12 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
+          <label
             class="text paragraph text label"
+            for="name"
           >
             label
-          </span>
+          </label>
           <input
             class="input input withLabel"
+            id="name"
             maxlength="12"
             name="name-phone"
             required=""
             type="tel"
             value=""
           />
-        </div>
-      </div>
-    </div>
-  </div>
+        </ui_view>
+      </ui_view>
+    </ui_view>
+  </ui_input_phone>
 </DocumentFragment>
 `;
 
 exports[`component:<InputPhone> prop:showState (false) & error 1`] = `
 <DocumentFragment>
-  <div
-    class="view container"
+  <ui_input_phone
+    class="view inputPhone"
   >
-    <div
+    <ui_view
       class="view row inputBorder error"
     >
-      <div
+      <ui_view
         class="view row"
       >
-        <div
+        <ui_view
           class="view content"
         >
           <select
@@ -1034,8 +1046,8 @@ exports[`component:<InputPhone> prop:showState (false) & error 1`] = `
               +001
             </option>
           </select>
-        </div>
-        <span
+        </ui_view>
+        <ui_icon
           class="icon headline-3 icon expand"
         >
           <svg
@@ -1056,15 +1068,15 @@ exports[`component:<InputPhone> prop:showState (false) & error 1`] = `
               d="M16.59 8.59 12 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
@@ -1074,9 +1086,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
@@ -1096,24 +1108,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_input_phone>
 </DocumentFragment>
 `;
 
 exports[`component:<InputPhone> prop:showState (false) & success 1`] = `
 <DocumentFragment>
-  <div
-    class="view container"
+  <ui_input_phone
+    class="view inputPhone"
   >
-    <div
+    <ui_view
       class="view row inputBorder"
     >
-      <div
+      <ui_view
         class="view row"
       >
-        <div
+        <ui_view
           class="view content"
         >
           <select
@@ -1136,8 +1148,8 @@ exports[`component:<InputPhone> prop:showState (false) & success 1`] = `
               +001
             </option>
           </select>
-        </div>
-        <span
+        </ui_view>
+        <ui_icon
           class="icon headline-3 icon expand"
         >
           <svg
@@ -1158,15 +1170,15 @@ exports[`component:<InputPhone> prop:showState (false) & success 1`] = `
               d="M16.59 8.59 12 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
@@ -1176,9 +1188,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
@@ -1198,24 +1210,24 @@ exports[`component:<InputPhone> prop:showState (false) & success 1`] = `
             d="M16.59 7.58 10 14.17l-3.59-3.58L5 12l5 5 8-8zM12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z"
           />
         </svg>
-      </span>
-    </div>
-  </div>
+      </ui_icon>
+    </ui_view>
+  </ui_input_phone>
 </DocumentFragment>
 `;
 
 exports[`component:<InputPhone> prop:showState (false) & warning 1`] = `
 <DocumentFragment>
-  <div
-    class="view container"
+  <ui_input_phone
+    class="view inputPhone"
   >
-    <div
+    <ui_view
       class="view row inputBorder"
     >
-      <div
+      <ui_view
         class="view row"
       >
-        <div
+        <ui_view
           class="view content"
         >
           <select
@@ -1238,8 +1250,8 @@ exports[`component:<InputPhone> prop:showState (false) & warning 1`] = `
               +001
             </option>
           </select>
-        </div>
-        <span
+        </ui_view>
+        <ui_icon
           class="icon headline-3 icon expand"
         >
           <svg
@@ -1260,15 +1272,15 @@ exports[`component:<InputPhone> prop:showState (false) & warning 1`] = `
               d="M16.59 8.59 12 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
@@ -1278,9 +1290,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
@@ -1296,24 +1308,24 @@ exports[`component:<InputPhone> prop:showState (false) & warning 1`] = `
             d="M12 5.99 19.53 19H4.47L12 5.99M12 2 1 21h22L12 2zm1 14h-2v2h2v-2zm0-6h-2v4h2v-4z"
           />
         </svg>
-      </span>
-    </div>
-  </div>
+      </ui_icon>
+    </ui_view>
+  </ui_input_phone>
 </DocumentFragment>
 `;
 
 exports[`component:<InputPhone> prop:success 1`] = `
 <DocumentFragment>
-  <div
-    class="view container"
+  <ui_input_phone
+    class="view inputPhone"
   >
-    <div
+    <ui_view
       class="view row inputBorder"
     >
-      <div
+      <ui_view
         class="view row"
       >
-        <div
+        <ui_view
           class="view content"
         >
           <select
@@ -1336,8 +1348,8 @@ exports[`component:<InputPhone> prop:success 1`] = `
               +001
             </option>
           </select>
-        </div>
-        <span
+        </ui_view>
+        <ui_icon
           class="icon headline-3 icon expand"
         >
           <svg
@@ -1358,15 +1370,15 @@ exports[`component:<InputPhone> prop:success 1`] = `
               d="M16.59 8.59 12 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
@@ -1376,9 +1388,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
@@ -1398,31 +1410,31 @@ exports[`component:<InputPhone> prop:success 1`] = `
             d="M16.59 7.58 10 14.17l-3.59-3.58L5 12l5 5 8-8zM12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z"
           />
         </svg>
-      </span>
-    </div>
-  </div>
+      </ui_icon>
+    </ui_view>
+  </ui_input_phone>
 </DocumentFragment>
 `;
 
 exports[`component:<InputPhone> prop:value 1`] = `
 <DocumentFragment>
-  <div
-    class="view container"
+  <ui_input_phone
+    class="view inputPhone"
   >
-    <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 prefixValue"
           >
             +44
-          </span>
+          </ui_text>
           <select
             class="select input prefix"
             name="name-prefix"
@@ -1443,8 +1455,8 @@ exports[`component:<InputPhone> prop:value 1`] = `
               +001
             </option>
           </select>
-        </div>
-        <span
+        </ui_view>
+        <ui_icon
           class="icon headline-3 icon expand"
         >
           <svg
@@ -1465,15 +1477,15 @@ exports[`component:<InputPhone> prop:value 1`] = `
               d="M16.59 8.59 12 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 +1495,25 @@ exports[`component:<InputPhone> prop:value 1`] = `
             type="tel"
             value="212123789"
           />
-        </div>
-      </div>
-    </div>
-  </div>
+        </ui_view>
+      </ui_view>
+    </ui_view>
+  </ui_input_phone>
 </DocumentFragment>
 `;
 
 exports[`component:<InputPhone> prop:value:without prefixes 1`] = `
 <DocumentFragment>
-  <div
-    class="view container"
+  <ui_input_phone
+    class="view inputPhone"
   >
-    <div
+    <ui_view
       class="view row inputBorder"
     >
-      <div
+      <ui_view
         class="view row wide"
       >
-        <div
+        <ui_view
           class="view wide content"
         >
           <input
@@ -1511,25 +1523,25 @@ exports[`component:<InputPhone> prop:value:without prefixes 1`] = `
             type="tel"
             value="212123789"
           />
-        </div>
-      </div>
-    </div>
-  </div>
+        </ui_view>
+      </ui_view>
+    </ui_view>
+  </ui_input_phone>
 </DocumentFragment>
 `;
 
 exports[`component:<InputPhone> prop:warning 1`] = `
 <DocumentFragment>
-  <div
-    class="view container"
+  <ui_input_phone
+    class="view inputPhone"
   >
-    <div
+    <ui_view
       class="view row inputBorder"
     >
-      <div
+      <ui_view
         class="view row"
       >
-        <div
+        <ui_view
           class="view content"
         >
           <select
@@ -1552,8 +1564,8 @@ exports[`component:<InputPhone> prop:warning 1`] = `
               +001
             </option>
           </select>
-        </div>
-        <span
+        </ui_view>
+        <ui_icon
           class="icon headline-3 icon expand"
         >
           <svg
@@ -1574,15 +1586,15 @@ exports[`component:<InputPhone> prop:warning 1`] = `
               d="M16.59 8.59 12 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 +1604,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 +1622,24 @@ exports[`component:<InputPhone> prop:warning 1`] = `
             d="M12 5.99 19.53 19H4.47L12 5.99M12 2 1 21h22L12 2zm1 14h-2v2h2v-2zm0-6h-2v4h2v-4z"
           />
         </svg>
-      </span>
-    </div>
-  </div>
+      </ui_icon>
+    </ui_view>
+  </ui_input_phone>
 </DocumentFragment>
 `;
 
 exports[`component:<InputPhone> renders 1`] = `
 <DocumentFragment>
-  <div
-    class="view container"
+  <ui_input_phone
+    class="view inputPhone"
   >
-    <div
+    <ui_view
       class="view row inputBorder"
     >
-      <div
+      <ui_view
         class="view row"
       >
-        <div
+        <ui_view
           class="view content"
         >
           <select
@@ -1650,8 +1662,8 @@ exports[`component:<InputPhone> renders 1`] = `
               +001
             </option>
           </select>
-        </div>
-        <span
+        </ui_view>
+        <ui_icon
           class="icon headline-3 icon expand"
         >
           <svg
@@ -1672,15 +1684,15 @@ exports[`component:<InputPhone> renders 1`] = `
               d="M16.59 8.59 12 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 +1702,107 @@ exports[`component:<InputPhone> renders 1`] = `
             type="tel"
             value=""
           />
-        </div>
-      </div>
-    </div>
-  </div>
+        </ui_view>
+      </ui_view>
+    </ui_view>
+  </ui_input_phone>
+</DocumentFragment>
+`;
+
+exports[`component:<InputPhone> tag 1`] = `
+<DocumentFragment>
+  <ui_tag
+    class="view inputPhone"
+  >
+    <ui_view
+      class="view row inputBorder"
+    >
+      <ui_view
+        class="view row"
+      >
+        <ui_view
+          class="view content"
+        >
+          <ui_tag
+            class="select empty input prefix"
+            name="name-prefix"
+            value=""
+          >
+            <option
+              value="+34"
+            >
+              +34
+            </option>
+            <option
+              value="+44"
+            >
+              +44
+            </option>
+            <option
+              value="+001"
+            >
+              +001
+            </option>
+          </ui_tag>
+        </ui_view>
+        <ui_icon
+          class="icon headline-3 icon expand"
+        >
+          <svg
+            fill="currentColor"
+            height="1em"
+            stroke="currentColor"
+            stroke-width="0"
+            viewBox="0 0 24 24"
+            width="1em"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path
+              d="M24 24H0V0h24v24z"
+              fill="none"
+              opacity=".87"
+            />
+            <path
+              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
+        class="view forceRow separator"
+      />
+      <ui_view
+        class="view row wide"
+      >
+        <ui_view
+          class="view wide content"
+        >
+          <input
+            class="input input"
+            maxlength="12"
+            name="name-phone"
+            type="tel"
+            value=""
+          />
+        </ui_view>
+      </ui_view>
+    </ui_view>
+  </ui_tag>
 </DocumentFragment>
 `;
 
 exports[`component:<InputPhone> testId 1`] = `
 <DocumentFragment>
-  <div
-    class="view container"
+  <ui_input_phone
+    class="view inputPhone"
   >
-    <div
+    <ui_view
       class="view row inputBorder"
     >
-      <div
+      <ui_view
         class="view row"
       >
-        <div
+        <ui_view
           class="view content"
         >
           <select
@@ -1732,8 +1826,8 @@ exports[`component:<InputPhone> testId 1`] = `
               +001
             </option>
           </select>
-        </div>
-        <span
+        </ui_view>
+        <ui_icon
           class="icon headline-3 icon expand"
         >
           <svg
@@ -1754,15 +1848,15 @@ exports[`component:<InputPhone> testId 1`] = `
               d="M16.59 8.59 12 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 +1867,25 @@ exports[`component:<InputPhone> testId 1`] = `
             type="tel"
             value=""
           />
-        </div>
-      </div>
-    </div>
-  </div>
+        </ui_view>
+      </ui_view>
+    </ui_view>
+  </ui_input_phone>
 </DocumentFragment>
 `;
 
 exports[`component:<InputPhone> testId:without prefixes 1`] = `
 <DocumentFragment>
-  <div
-    class="view container"
+  <ui_input_phone
+    class="view inputPhone"
   >
-    <div
+    <ui_view
       class="view row inputBorder"
     >
-      <div
+      <ui_view
         class="view row wide"
       >
-        <div
+        <ui_view
           class="view wide content"
         >
           <input
@@ -1802,9 +1896,9 @@ exports[`component:<InputPhone> testId:without prefixes 1`] = `
             type="tel"
             value=""
           />
-        </div>
-      </div>
-    </div>
-  </div>
+        </ui_view>
+      </ui_view>
+    </ui_view>
+  </ui_input_phone>
 </DocumentFragment>
 `;