@mirai/ui 2.0.5 → 2.0.7

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

@@ -2,16 +2,16 @@
 
 exports[`component:<InputPhone> inherit:className 1`] = `
 <DocumentFragment>
-  <ui_input_phone
+  <ui-input-phone
     class="view inputPhone mirai"
   >
-    <ui_view
+    <ui-view
       class="view row inputBorder"
     >
-      <ui_view
+      <ui-view
         class="view row"
       >
-        <ui_view
+        <ui-view
           class="view content"
         >
           <select
@@ -34,8 +34,8 @@ exports[`component:<InputPhone> inherit:className 1`] = `
               +001
             </option>
           </select>
-        </ui_view>
-        <ui_icon
+        </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>
-        </ui_icon>
-      </ui_view>
-      <ui_view
+        </ui-icon>
+      </ui-view>
+      <ui-view
         class="view forceRow separator"
       />
-      <ui_view
+      <ui-view
         class="view row wide"
       >
-        <ui_view
+        <ui-view
           class="view wide content"
         >
           <input
@@ -74,25 +74,25 @@ exports[`component:<InputPhone> inherit:className 1`] = `
             type="tel"
             value=""
           />
-        </ui_view>
-      </ui_view>
-    </ui_view>
-  </ui_input_phone>
+        </ui-view>
+      </ui-view>
+    </ui-view>
+  </ui-input-phone>
 </DocumentFragment>
 `;
 
 exports[`component:<InputPhone> prop:disabled 1`] = `
 <DocumentFragment>
-  <ui_input_phone
+  <ui-input-phone
     class="view inputPhone"
   >
-    <ui_view
+    <ui-view
       class="view row inputBorder disabled"
     >
-      <ui_view
+      <ui-view
         class="view row"
       >
-        <ui_view
+        <ui-view
           class="view content"
         >
           <select
@@ -116,15 +116,15 @@ exports[`component:<InputPhone> prop:disabled 1`] = `
               +001
             </option>
           </select>
-        </ui_view>
-      </ui_view>
-      <ui_view
+        </ui-view>
+      </ui-view>
+      <ui-view
         class="view forceRow separator"
       />
-      <ui_view
+      <ui-view
         class="view row wide"
       >
-        <ui_view
+        <ui-view
           class="view wide content"
         >
           <input
@@ -135,25 +135,25 @@ exports[`component:<InputPhone> prop:disabled 1`] = `
             type="tel"
             value=""
           />
-        </ui_view>
-      </ui_view>
-    </ui_view>
-  </ui_input_phone>
+        </ui-view>
+      </ui-view>
+    </ui-view>
+  </ui-input-phone>
 </DocumentFragment>
 `;
 
 exports[`component:<InputPhone> prop:error 1`] = `
 <DocumentFragment>
-  <ui_input_phone
+  <ui-input-phone
     class="view inputPhone"
   >
-    <ui_view
+    <ui-view
       class="view row inputBorder error"
     >
-      <ui_view
+      <ui-view
         class="view row"
       >
-        <ui_view
+        <ui-view
           class="view content"
         >
           <select
@@ -176,8 +176,8 @@ exports[`component:<InputPhone> prop:error 1`] = `
               +001
             </option>
           </select>
-        </ui_view>
-        <ui_icon
+        </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>
-        </ui_icon>
-      </ui_view>
-      <ui_view
+        </ui-icon>
+      </ui-view>
+      <ui-view
         class="view forceRow separator"
       />
-      <ui_view
+      <ui-view
         class="view row wide"
       >
-        <ui_view
+        <ui-view
           class="view wide content"
         >
           <input
@@ -216,9 +216,9 @@ exports[`component:<InputPhone> prop:error 1`] = `
             type="tel"
             value=""
           />
-        </ui_view>
-      </ui_view>
-      <ui_icon
+        </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>
-      </ui_icon>
-    </ui_view>
-  </ui_input_phone>
+      </ui-icon>
+    </ui-view>
+  </ui-input-phone>
 </DocumentFragment>
 `;
 
 exports[`component:<InputPhone> prop:hint 1`] = `
 <DocumentFragment>
-  <ui_input_phone
+  <ui-input-phone
     class="view inputPhone"
   >
-    <ui_view
+    <ui-view
       class="view row inputBorder"
     >
-      <ui_view
+      <ui-view
         class="view row"
       >
-        <ui_view
+        <ui-view
           class="view content"
         >
           <select
@@ -278,8 +278,8 @@ exports[`component:<InputPhone> prop:hint 1`] = `
               +001
             </option>
           </select>
-        </ui_view>
-        <ui_icon
+        </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>
-        </ui_icon>
-      </ui_view>
-      <ui_view
+        </ui-icon>
+      </ui-view>
+      <ui-view
         class="view forceRow separator"
       />
-      <ui_view
+      <ui-view
         class="view row wide"
       >
-        <ui_view
+        <ui-view
           class="view wide content"
         >
           <input
@@ -318,30 +318,30 @@ exports[`component:<InputPhone> prop:hint 1`] = `
             type="tel"
             value=""
           />
-        </ui_view>
-      </ui_view>
-    </ui_view>
-    <ui_text
+        </ui-view>
+      </ui-view>
+    </ui-view>
+    <ui-text
       class="text small text hint"
     >
       hint
-    </ui_text>
-  </ui_input_phone>
+    </ui-text>
+  </ui-input-phone>
 </DocumentFragment>
 `;
 
 exports[`component:<InputPhone> prop:icon & disabled 1`] = `
 <DocumentFragment>
-  <ui_input_phone
+  <ui-input-phone
     class="view inputPhone"
   >
-    <ui_view
+    <ui-view
       class="view row inputBorder disabled"
     >
-      <ui_view
+      <ui-view
         class="view row"
       >
-        <ui_view
+        <ui-view
           class="view content"
         >
           <select
@@ -365,15 +365,15 @@ exports[`component:<InputPhone> prop:icon & disabled 1`] = `
               +001
             </option>
           </select>
-        </ui_view>
-      </ui_view>
-      <ui_view
+        </ui-view>
+      </ui-view>
+      <ui-view
         class="view forceRow separator"
       />
-      <ui_view
+      <ui-view
         class="view row wide"
       >
-        <ui_icon
+        <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>
-        </ui_icon>
-        <ui_view
+        </ui-icon>
+        <ui-view
           class="view wide content"
         >
           <input
@@ -405,25 +405,25 @@ exports[`component:<InputPhone> prop:icon & disabled 1`] = `
             type="tel"
             value=""
           />
-        </ui_view>
-      </ui_view>
-    </ui_view>
-  </ui_input_phone>
+        </ui-view>
+      </ui-view>
+    </ui-view>
+  </ui-input-phone>
 </DocumentFragment>
 `;
 
 exports[`component:<InputPhone> prop:icon & error 1`] = `
 <DocumentFragment>
-  <ui_input_phone
+  <ui-input-phone
     class="view inputPhone"
   >
-    <ui_view
+    <ui-view
       class="view row inputBorder error"
     >
-      <ui_view
+      <ui-view
         class="view row"
       >
-        <ui_view
+        <ui-view
           class="view content"
         >
           <select
@@ -446,8 +446,8 @@ exports[`component:<InputPhone> prop:icon & error 1`] = `
               +001
             </option>
           </select>
-        </ui_view>
-        <ui_icon
+        </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>
-        </ui_icon>
-      </ui_view>
-      <ui_view
+        </ui-icon>
+      </ui-view>
+      <ui-view
         class="view forceRow separator"
       />
-      <ui_view
+      <ui-view
         class="view row wide"
       >
-        <ui_icon
+        <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>
-        </ui_icon>
-        <ui_view
+        </ui-icon>
+        <ui-view
           class="view wide content"
         >
           <input
@@ -507,9 +507,9 @@ exports[`component:<InputPhone> prop:icon & error 1`] = `
             type="tel"
             value=""
           />
-        </ui_view>
-      </ui_view>
-      <ui_icon
+        </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>
-      </ui_icon>
-    </ui_view>
-  </ui_input_phone>
+      </ui-icon>
+    </ui-view>
+  </ui-input-phone>
 </DocumentFragment>
 `;
 
 exports[`component:<InputPhone> prop:icon 1`] = `
 <DocumentFragment>
-  <ui_input_phone
+  <ui-input-phone
     class="view inputPhone"
   >
-    <ui_view
+    <ui-view
       class="view row inputBorder"
     >
-      <ui_view
+      <ui-view
         class="view row"
       >
-        <ui_view
+        <ui-view
           class="view content"
         >
           <select
@@ -569,8 +569,8 @@ exports[`component:<InputPhone> prop:icon 1`] = `
               +001
             </option>
           </select>
-        </ui_view>
-        <ui_icon
+        </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>
-        </ui_icon>
-      </ui_view>
-      <ui_view
+        </ui-icon>
+      </ui-view>
+      <ui-view
         class="view forceRow separator"
       />
-      <ui_view
+      <ui-view
         class="view row wide"
       >
-        <ui_icon
+        <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>
-        </ui_icon>
-        <ui_view
+        </ui-icon>
+        <ui-view
           class="view wide content"
         >
           <input
@@ -630,25 +630,25 @@ exports[`component:<InputPhone> prop:icon 1`] = `
             type="tel"
             value=""
           />
-        </ui_view>
-      </ui_view>
-    </ui_view>
-  </ui_input_phone>
+        </ui-view>
+      </ui-view>
+    </ui-view>
+  </ui-input-phone>
 </DocumentFragment>
 `;
 
 exports[`component:<InputPhone> prop:label 1`] = `
 <DocumentFragment>
-  <ui_input_phone
+  <ui-input-phone
     class="view inputPhone"
   >
-    <ui_view
+    <ui-view
       class="view row inputBorder"
     >
-      <ui_view
+      <ui-view
         class="view row"
       >
-        <ui_view
+        <ui-view
           class="view content"
         >
           <select
@@ -671,8 +671,8 @@ exports[`component:<InputPhone> prop:label 1`] = `
               +001
             </option>
           </select>
-        </ui_view>
-        <ui_icon
+        </ui-view>
+        <ui-icon
           class="icon headline-3 icon expand"
         >
           <svg
@@ -693,23 +693,23 @@ 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>
-        </ui_icon>
-      </ui_view>
-      <ui_view
+        </ui-icon>
+      </ui-view>
+      <ui-view
         class="view forceRow separator"
       />
-      <ui_view
+      <ui-view
         class="view row wide"
       >
-        <ui_view
+        <ui-view
           class="view wide content"
         >
-          <label
+          <ui-label
             class="text paragraph text label"
-            for="name"
+            htmlfor="name"
           >
             label
-          </label>
+          </ui-label>
           <input
             class="input input withLabel"
             id="name"
@@ -718,33 +718,33 @@ exports[`component:<InputPhone> prop:label 1`] = `
             type="tel"
             value=""
           />
-        </ui_view>
-      </ui_view>
-    </ui_view>
-  </ui_input_phone>
+        </ui-view>
+      </ui-view>
+    </ui-view>
+  </ui-input-phone>
 </DocumentFragment>
 `;
 
 exports[`component:<InputPhone> prop:labelPrefix 1`] = `
 <DocumentFragment>
-  <ui_input_phone
+  <ui-input-phone
     class="view inputPhone"
   >
-    <ui_view
+    <ui-view
       class="view row inputBorder"
     >
-      <ui_view
+      <ui-view
         class="view row"
       >
-        <ui_view
+        <ui-view
           class="view content"
         >
-          <label
+          <ui-label
             class="text paragraph text label"
-            for="name-prefix"
+            htmlfor="name-prefix"
           >
             labelPrefix
-          </label>
+          </ui-label>
           <select
             class="select empty input prefix withLabel empty"
             id="name-prefix"
@@ -766,8 +766,8 @@ exports[`component:<InputPhone> prop:labelPrefix 1`] = `
               +001
             </option>
           </select>
-        </ui_view>
-        <ui_icon
+        </ui-view>
+        <ui-icon
           class="icon headline-3 icon expand"
         >
           <svg
@@ -788,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>
-        </ui_icon>
-      </ui_view>
-      <ui_view
+        </ui-icon>
+      </ui-view>
+      <ui-view
         class="view forceRow separator"
       />
-      <ui_view
+      <ui-view
         class="view row wide"
       >
-        <ui_view
+        <ui-view
           class="view wide content"
         >
           <input
@@ -806,33 +806,33 @@ exports[`component:<InputPhone> prop:labelPrefix 1`] = `
             type="tel"
             value=""
           />
-        </ui_view>
-      </ui_view>
-    </ui_view>
-  </ui_input_phone>
+        </ui-view>
+      </ui-view>
+    </ui-view>
+  </ui-input-phone>
 </DocumentFragment>
 `;
 
 exports[`component:<InputPhone> prop:required & prop:showRequired (true) 1`] = `
 <DocumentFragment>
-  <ui_input_phone
+  <ui-input-phone
     class="view inputPhone"
   >
-    <ui_view
+    <ui-view
       class="view row inputBorder"
     >
-      <ui_view
+      <ui-view
         class="view row"
       >
-        <ui_view
+        <ui-view
           class="view content"
         >
-          <label
+          <ui-label
             class="text paragraph text label"
-            for="name-prefix"
+            htmlfor="name-prefix"
           >
             labelPrefix
-          </label>
+          </ui-label>
           <select
             class="select empty input prefix withLabel empty"
             id="name-prefix"
@@ -855,8 +855,8 @@ exports[`component:<InputPhone> prop:required & prop:showRequired (true) 1`] = `
               +001
             </option>
           </select>
-        </ui_view>
-        <ui_icon
+        </ui-view>
+        <ui-icon
           class="icon headline-3 icon expand"
         >
           <svg
@@ -877,20 +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>
-        </ui_icon>
-      </ui_view>
-      <ui_view
+        </ui-icon>
+      </ui-view>
+      <ui-view
         class="view forceRow separator"
       />
-      <ui_view
+      <ui-view
         class="view row wide"
       >
-        <ui_view
+        <ui-view
           class="view wide content"
         >
-          <label
+          <ui-label
             class="text paragraph text label"
-            for="name"
+            htmlfor="name"
           >
             label
             <span
@@ -898,7 +898,7 @@ exports[`component:<InputPhone> prop:required & prop:showRequired (true) 1`] = `
             >
                *
             </span>
-          </label>
+          </ui-label>
           <input
             class="input input withLabel"
             id="name"
@@ -908,33 +908,33 @@ exports[`component:<InputPhone> prop:required & prop:showRequired (true) 1`] = `
             type="tel"
             value=""
           />
-        </ui_view>
-      </ui_view>
-    </ui_view>
-  </ui_input_phone>
+        </ui-view>
+      </ui-view>
+    </ui-view>
+  </ui-input-phone>
 </DocumentFragment>
 `;
 
 exports[`component:<InputPhone> prop:required 1`] = `
 <DocumentFragment>
-  <ui_input_phone
+  <ui-input-phone
     class="view inputPhone"
   >
-    <ui_view
+    <ui-view
       class="view row inputBorder"
     >
-      <ui_view
+      <ui-view
         class="view row"
       >
-        <ui_view
+        <ui-view
           class="view content"
         >
-          <label
+          <ui-label
             class="text paragraph text label"
-            for="name-prefix"
+            htmlfor="name-prefix"
           >
             labelPrefix
-          </label>
+          </ui-label>
           <select
             class="select empty input prefix withLabel empty"
             id="name-prefix"
@@ -957,8 +957,8 @@ exports[`component:<InputPhone> prop:required 1`] = `
               +001
             </option>
           </select>
-        </ui_view>
-        <ui_icon
+        </ui-view>
+        <ui-icon
           class="icon headline-3 icon expand"
         >
           <svg
@@ -979,23 +979,23 @@ 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>
-        </ui_icon>
-      </ui_view>
-      <ui_view
+        </ui-icon>
+      </ui-view>
+      <ui-view
         class="view forceRow separator"
       />
-      <ui_view
+      <ui-view
         class="view row wide"
       >
-        <ui_view
+        <ui-view
           class="view wide content"
         >
-          <label
+          <ui-label
             class="text paragraph text label"
-            for="name"
+            htmlfor="name"
           >
             label
-          </label>
+          </ui-label>
           <input
             class="input input withLabel"
             id="name"
@@ -1005,25 +1005,25 @@ exports[`component:<InputPhone> prop:required 1`] = `
             type="tel"
             value=""
           />
-        </ui_view>
-      </ui_view>
-    </ui_view>
-  </ui_input_phone>
+        </ui-view>
+      </ui-view>
+    </ui-view>
+  </ui-input-phone>
 </DocumentFragment>
 `;
 
 exports[`component:<InputPhone> prop:showState (false) & error 1`] = `
 <DocumentFragment>
-  <ui_input_phone
+  <ui-input-phone
     class="view inputPhone"
   >
-    <ui_view
+    <ui-view
       class="view row inputBorder error"
     >
-      <ui_view
+      <ui-view
         class="view row"
       >
-        <ui_view
+        <ui-view
           class="view content"
         >
           <select
@@ -1046,8 +1046,8 @@ exports[`component:<InputPhone> prop:showState (false) & error 1`] = `
               +001
             </option>
           </select>
-        </ui_view>
-        <ui_icon
+        </ui-view>
+        <ui-icon
           class="icon headline-3 icon expand"
         >
           <svg
@@ -1068,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>
-        </ui_icon>
-      </ui_view>
-      <ui_view
+        </ui-icon>
+      </ui-view>
+      <ui-view
         class="view forceRow separator"
       />
-      <ui_view
+      <ui-view
         class="view row wide"
       >
-        <ui_view
+        <ui-view
           class="view wide content"
         >
           <input
@@ -1086,9 +1086,9 @@ exports[`component:<InputPhone> prop:showState (false) & error 1`] = `
             type="tel"
             value=""
           />
-        </ui_view>
-      </ui_view>
-      <ui_icon
+        </ui-view>
+      </ui-view>
+      <ui-icon
         class="icon headline-3 icon error"
       >
         <svg
@@ -1108,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>
-      </ui_icon>
-    </ui_view>
-  </ui_input_phone>
+      </ui-icon>
+    </ui-view>
+  </ui-input-phone>
 </DocumentFragment>
 `;
 
 exports[`component:<InputPhone> prop:showState (false) & success 1`] = `
 <DocumentFragment>
-  <ui_input_phone
+  <ui-input-phone
     class="view inputPhone"
   >
-    <ui_view
+    <ui-view
       class="view row inputBorder"
     >
-      <ui_view
+      <ui-view
         class="view row"
       >
-        <ui_view
+        <ui-view
           class="view content"
         >
           <select
@@ -1148,8 +1148,8 @@ exports[`component:<InputPhone> prop:showState (false) & success 1`] = `
               +001
             </option>
           </select>
-        </ui_view>
-        <ui_icon
+        </ui-view>
+        <ui-icon
           class="icon headline-3 icon expand"
         >
           <svg
@@ -1170,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>
-        </ui_icon>
-      </ui_view>
-      <ui_view
+        </ui-icon>
+      </ui-view>
+      <ui-view
         class="view forceRow separator"
       />
-      <ui_view
+      <ui-view
         class="view row wide"
       >
-        <ui_view
+        <ui-view
           class="view wide content"
         >
           <input
@@ -1188,9 +1188,9 @@ exports[`component:<InputPhone> prop:showState (false) & success 1`] = `
             type="tel"
             value=""
           />
-        </ui_view>
-      </ui_view>
-      <ui_icon
+        </ui-view>
+      </ui-view>
+      <ui-icon
         class="icon headline-3 icon success"
       >
         <svg
@@ -1210,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>
-      </ui_icon>
-    </ui_view>
-  </ui_input_phone>
+      </ui-icon>
+    </ui-view>
+  </ui-input-phone>
 </DocumentFragment>
 `;
 
 exports[`component:<InputPhone> prop:showState (false) & warning 1`] = `
 <DocumentFragment>
-  <ui_input_phone
+  <ui-input-phone
     class="view inputPhone"
   >
-    <ui_view
+    <ui-view
       class="view row inputBorder"
     >
-      <ui_view
+      <ui-view
         class="view row"
       >
-        <ui_view
+        <ui-view
           class="view content"
         >
           <select
@@ -1250,8 +1250,8 @@ exports[`component:<InputPhone> prop:showState (false) & warning 1`] = `
               +001
             </option>
           </select>
-        </ui_view>
-        <ui_icon
+        </ui-view>
+        <ui-icon
           class="icon headline-3 icon expand"
         >
           <svg
@@ -1272,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>
-        </ui_icon>
-      </ui_view>
-      <ui_view
+        </ui-icon>
+      </ui-view>
+      <ui-view
         class="view forceRow separator"
       />
-      <ui_view
+      <ui-view
         class="view row wide"
       >
-        <ui_view
+        <ui-view
           class="view wide content"
         >
           <input
@@ -1290,9 +1290,9 @@ exports[`component:<InputPhone> prop:showState (false) & warning 1`] = `
             type="tel"
             value=""
           />
-        </ui_view>
-      </ui_view>
-      <ui_icon
+        </ui-view>
+      </ui-view>
+      <ui-icon
         class="icon headline-3 icon warning"
       >
         <svg
@@ -1308,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>
-      </ui_icon>
-    </ui_view>
-  </ui_input_phone>
+      </ui-icon>
+    </ui-view>
+  </ui-input-phone>
 </DocumentFragment>
 `;
 
 exports[`component:<InputPhone> prop:success 1`] = `
 <DocumentFragment>
-  <ui_input_phone
+  <ui-input-phone
     class="view inputPhone"
   >
-    <ui_view
+    <ui-view
       class="view row inputBorder"
     >
-      <ui_view
+      <ui-view
         class="view row"
       >
-        <ui_view
+        <ui-view
           class="view content"
         >
           <select
@@ -1348,8 +1348,8 @@ exports[`component:<InputPhone> prop:success 1`] = `
               +001
             </option>
           </select>
-        </ui_view>
-        <ui_icon
+        </ui-view>
+        <ui-icon
           class="icon headline-3 icon expand"
         >
           <svg
@@ -1370,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>
-        </ui_icon>
-      </ui_view>
-      <ui_view
+        </ui-icon>
+      </ui-view>
+      <ui-view
         class="view forceRow separator"
       />
-      <ui_view
+      <ui-view
         class="view row wide"
       >
-        <ui_view
+        <ui-view
           class="view wide content"
         >
           <input
@@ -1388,9 +1388,9 @@ exports[`component:<InputPhone> prop:success 1`] = `
             type="tel"
             value=""
           />
-        </ui_view>
-      </ui_view>
-      <ui_icon
+        </ui-view>
+      </ui-view>
+      <ui-icon
         class="icon headline-3 icon success"
       >
         <svg
@@ -1410,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>
-      </ui_icon>
-    </ui_view>
-  </ui_input_phone>
+      </ui-icon>
+    </ui-view>
+  </ui-input-phone>
 </DocumentFragment>
 `;
 
 exports[`component:<InputPhone> prop:value 1`] = `
 <DocumentFragment>
-  <ui_input_phone
+  <ui-input-phone
     class="view inputPhone"
   >
-    <ui_view
+    <ui-view
       class="view row inputBorder"
     >
-      <ui_view
+      <ui-view
         class="view row"
       >
-        <ui_view
+        <ui-view
           class="view content"
         >
-          <ui_text
+          <ui-text
             class="text paragraph prefixValue"
           >
             +44
-          </ui_text>
+          </ui-text>
           <select
             class="select input prefix"
             name="name-prefix"
@@ -1455,8 +1455,8 @@ exports[`component:<InputPhone> prop:value 1`] = `
               +001
             </option>
           </select>
-        </ui_view>
-        <ui_icon
+        </ui-view>
+        <ui-icon
           class="icon headline-3 icon expand"
         >
           <svg
@@ -1477,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>
-        </ui_icon>
-      </ui_view>
-      <ui_view
+        </ui-icon>
+      </ui-view>
+      <ui-view
         class="view forceRow separator"
       />
-      <ui_view
+      <ui-view
         class="view row wide"
       >
-        <ui_view
+        <ui-view
           class="view wide content"
         >
           <input
@@ -1495,25 +1495,25 @@ exports[`component:<InputPhone> prop:value 1`] = `
             type="tel"
             value="212123789"
           />
-        </ui_view>
-      </ui_view>
-    </ui_view>
-  </ui_input_phone>
+        </ui-view>
+      </ui-view>
+    </ui-view>
+  </ui-input-phone>
 </DocumentFragment>
 `;
 
 exports[`component:<InputPhone> prop:value:without prefixes 1`] = `
 <DocumentFragment>
-  <ui_input_phone
+  <ui-input-phone
     class="view inputPhone"
   >
-    <ui_view
+    <ui-view
       class="view row inputBorder"
     >
-      <ui_view
+      <ui-view
         class="view row wide"
       >
-        <ui_view
+        <ui-view
           class="view wide content"
         >
           <input
@@ -1523,25 +1523,25 @@ exports[`component:<InputPhone> prop:value:without prefixes 1`] = `
             type="tel"
             value="212123789"
           />
-        </ui_view>
-      </ui_view>
-    </ui_view>
-  </ui_input_phone>
+        </ui-view>
+      </ui-view>
+    </ui-view>
+  </ui-input-phone>
 </DocumentFragment>
 `;
 
 exports[`component:<InputPhone> prop:warning 1`] = `
 <DocumentFragment>
-  <ui_input_phone
+  <ui-input-phone
     class="view inputPhone"
   >
-    <ui_view
+    <ui-view
       class="view row inputBorder"
     >
-      <ui_view
+      <ui-view
         class="view row"
       >
-        <ui_view
+        <ui-view
           class="view content"
         >
           <select
@@ -1564,8 +1564,8 @@ exports[`component:<InputPhone> prop:warning 1`] = `
               +001
             </option>
           </select>
-        </ui_view>
-        <ui_icon
+        </ui-view>
+        <ui-icon
           class="icon headline-3 icon expand"
         >
           <svg
@@ -1586,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>
-        </ui_icon>
-      </ui_view>
-      <ui_view
+        </ui-icon>
+      </ui-view>
+      <ui-view
         class="view forceRow separator"
       />
-      <ui_view
+      <ui-view
         class="view row wide"
       >
-        <ui_view
+        <ui-view
           class="view wide content"
         >
           <input
@@ -1604,9 +1604,9 @@ exports[`component:<InputPhone> prop:warning 1`] = `
             type="tel"
             value=""
           />
-        </ui_view>
-      </ui_view>
-      <ui_icon
+        </ui-view>
+      </ui-view>
+      <ui-icon
         class="icon headline-3 icon warning"
       >
         <svg
@@ -1622,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>
-      </ui_icon>
-    </ui_view>
-  </ui_input_phone>
+      </ui-icon>
+    </ui-view>
+  </ui-input-phone>
 </DocumentFragment>
 `;
 
 exports[`component:<InputPhone> renders 1`] = `
 <DocumentFragment>
-  <ui_input_phone
+  <ui-input-phone
     class="view inputPhone"
   >
-    <ui_view
+    <ui-view
       class="view row inputBorder"
     >
-      <ui_view
+      <ui-view
         class="view row"
       >
-        <ui_view
+        <ui-view
           class="view content"
         >
           <select
@@ -1662,8 +1662,8 @@ exports[`component:<InputPhone> renders 1`] = `
               +001
             </option>
           </select>
-        </ui_view>
-        <ui_icon
+        </ui-view>
+        <ui-icon
           class="icon headline-3 icon expand"
         >
           <svg
@@ -1684,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>
-        </ui_icon>
-      </ui_view>
-      <ui_view
+        </ui-icon>
+      </ui-view>
+      <ui-view
         class="view forceRow separator"
       />
-      <ui_view
+      <ui-view
         class="view row wide"
       >
-        <ui_view
+        <ui-view
           class="view wide content"
         >
           <input
@@ -1702,107 +1702,25 @@ exports[`component:<InputPhone> renders 1`] = `
             type="tel"
             value=""
           />
-        </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>
+        </ui-view>
+      </ui-view>
+    </ui-view>
+  </ui-input-phone>
 </DocumentFragment>
 `;
 
 exports[`component:<InputPhone> testId 1`] = `
 <DocumentFragment>
-  <ui_input_phone
+  <ui-input-phone
     class="view inputPhone"
   >
-    <ui_view
+    <ui-view
       class="view row inputBorder"
     >
-      <ui_view
+      <ui-view
         class="view row"
       >
-        <ui_view
+        <ui-view
           class="view content"
         >
           <select
@@ -1826,8 +1744,8 @@ exports[`component:<InputPhone> testId 1`] = `
               +001
             </option>
           </select>
-        </ui_view>
-        <ui_icon
+        </ui-view>
+        <ui-icon
           class="icon headline-3 icon expand"
         >
           <svg
@@ -1848,15 +1766,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>
-        </ui_icon>
-      </ui_view>
-      <ui_view
+        </ui-icon>
+      </ui-view>
+      <ui-view
         class="view forceRow separator"
       />
-      <ui_view
+      <ui-view
         class="view row wide"
       >
-        <ui_view
+        <ui-view
           class="view wide content"
         >
           <input
@@ -1867,25 +1785,25 @@ exports[`component:<InputPhone> testId 1`] = `
             type="tel"
             value=""
           />
-        </ui_view>
-      </ui_view>
-    </ui_view>
-  </ui_input_phone>
+        </ui-view>
+      </ui-view>
+    </ui-view>
+  </ui-input-phone>
 </DocumentFragment>
 `;
 
 exports[`component:<InputPhone> testId:without prefixes 1`] = `
 <DocumentFragment>
-  <ui_input_phone
+  <ui-input-phone
     class="view inputPhone"
   >
-    <ui_view
+    <ui-view
       class="view row inputBorder"
     >
-      <ui_view
+      <ui-view
         class="view row wide"
       >
-        <ui_view
+        <ui-view
           class="view wide content"
         >
           <input
@@ -1896,9 +1814,9 @@ exports[`component:<InputPhone> testId:without prefixes 1`] = `
             type="tel"
             value=""
           />
-        </ui_view>
-      </ui_view>
-    </ui_view>
-  </ui_input_phone>
+        </ui-view>
+      </ui-view>
+    </ui-view>
+  </ui-input-phone>
 </DocumentFragment>
 `;