@mirai/core 0.3.356 → 0.3.357

package/build/components/Checkout/partials/__tests__/__snapshots__/Checkout.Form.test.js.snap

@@ -5,31 +5,31 @@ exports[`component:<Checkout> partial:<Form> inherit:className 1`] = `
   <form
     autocomplete="off"
   >
-    <ui_text
+    <ui-text
       class="text bold headline-3 wide"
     >
       user.label.personal_details
-    </ui_text>
-    <ui_text
+    </ui-text>
+    <ui-text
       class="text small wide"
     >
       <span>
         *
       </span>
        　
-    </ui_text>
-    <ui_input_text
+    </ui-text>
+    <ui-input-text
       class="view inputContainer"
     >
-      <ui_view
+      <ui-view
         class="view row inputBorder"
       >
-        <ui_view
+        <ui-view
           class="view wide content"
         >
-          <label
+          <ui-label
             class="text paragraph text label"
-            for="input.checkout-firstName"
+            htmlfor="input.checkout-firstName"
           >
             common.label.firstname
             <span
@@ -37,7 +37,7 @@ exports[`component:<Checkout> partial:<Form> inherit:className 1`] = `
             >
                *
             </span>
-          </label>
+          </ui-label>
           <input
             class="input input withLabel"
             id="input.checkout-firstName"
@@ -46,21 +46,21 @@ exports[`component:<Checkout> partial:<Form> inherit:className 1`] = `
             type="text"
             value=""
           />
-        </ui_view>
-      </ui_view>
-    </ui_input_text>
-    <ui_input_text
+        </ui-view>
+      </ui-view>
+    </ui-input-text>
+    <ui-input-text
       class="view inputContainer"
     >
-      <ui_view
+      <ui-view
         class="view row inputBorder"
       >
-        <ui_view
+        <ui-view
           class="view wide content"
         >
-          <label
+          <ui-label
             class="text paragraph text label"
-            for="input.checkout-lastName"
+            htmlfor="input.checkout-lastName"
           >
             common.label.lastname
             <span
@@ -68,7 +68,7 @@ exports[`component:<Checkout> partial:<Form> inherit:className 1`] = `
             >
                *
             </span>
-          </label>
+          </ui-label>
           <input
             class="input input withLabel"
             id="input.checkout-lastName"
@@ -77,21 +77,21 @@ exports[`component:<Checkout> partial:<Form> inherit:className 1`] = `
             type="text"
             value=""
           />
-        </ui_view>
-      </ui_view>
-    </ui_input_text>
-    <ui_input_text
+        </ui-view>
+      </ui-view>
+    </ui-input-text>
+    <ui-input-text
       class="view inputContainer"
     >
-      <ui_view
+      <ui-view
         class="view row inputBorder"
       >
-        <ui_view
+        <ui-view
           class="view wide content"
         >
-          <label
+          <ui-label
             class="text paragraph text label"
-            for="input.checkout-email"
+            htmlfor="input.checkout-email"
           >
             common.label.email
             <span
@@ -99,7 +99,7 @@ exports[`component:<Checkout> partial:<Form> inherit:className 1`] = `
             >
                *
             </span>
-          </label>
+          </ui-label>
           <input
             class="input input withLabel"
             id="input.checkout-email"
@@ -108,27 +108,27 @@ exports[`component:<Checkout> partial:<Form> inherit:className 1`] = `
             type="email"
             value=""
           />
-        </ui_view>
-      </ui_view>
-    </ui_input_text>
-    <ui_input_phone
+        </ui-view>
+      </ui-view>
+    </ui-input-text>
+    <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="phone-prefix"
+              htmlfor="phone-prefix"
             >
               common.label.phone_prefix
-            </label>
+            </ui-label>
             <select
               class="select empty input prefix withLabel empty"
               id="phone-prefix"
@@ -1171,8 +1171,8 @@ exports[`component:<Checkout> partial:<Form> inherit:className 1`] = `
                 +998
               </option>
             </select>
-          </ui_view>
-          <ui_icon
+          </ui-view>
+          <ui-icon
             class="icon headline-3 icon expand"
           >
             <svg
@@ -1193,20 +1193,20 @@ exports[`component:<Checkout> partial:<Form> 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"
           >
-            <label
+            <ui-label
               class="text paragraph text label"
-              for="checkout-phone"
+              htmlfor="checkout-phone"
             >
               common.label.phone
               <span
@@ -1214,7 +1214,7 @@ exports[`component:<Checkout> partial:<Form> inherit:className 1`] = `
               >
                  *
               </span>
-            </label>
+            </ui-label>
             <input
               class="input input withLabel"
               id="checkout-phone"
@@ -1224,25 +1224,25 @@ exports[`component:<Checkout> partial:<Form> inherit:className 1`] = `
               type="tel"
               value=""
             />
-          </ui_view>
-        </ui_view>
-      </ui_view>
-    </ui_input_phone>
-    <ui_input_text
+          </ui-view>
+        </ui-view>
+      </ui-view>
+    </ui-input-phone>
+    <ui-input-text
       class="view inputContainer"
     >
-      <ui_view
+      <ui-view
         class="view row inputBorder"
       >
-        <ui_view
+        <ui-view
           class="view wide content"
         >
-          <label
+          <ui-label
             class="text paragraph text label"
-            for="input.checkout-company"
+            htmlfor="input.checkout-company"
           >
             common.label.company
-          </label>
+          </ui-label>
           <input
             class="input input withLabel"
             id="input.checkout-company"
@@ -1250,53 +1250,55 @@ exports[`component:<Checkout> partial:<Form> inherit:className 1`] = `
             type="text"
             value=""
           />
-        </ui_view>
-      </ui_view>
-    </ui_input_text>
-    <ui_input_text
+        </ui-view>
+      </ui-view>
+    </ui-input-text>
+    <ui-input-text
       class="view inputContainer"
     >
-      <ui_view
+      <ui-view
         class="view row inputBorder"
       >
-        <ui_view
+        <ui-view
           class="view wide content"
         >
-          <label
+          <ui-label
             class="text paragraph text label"
-            for="input.checkout-comments"
+            htmlfor="input.checkout-comments"
           >
             common.label.comments
-          </label>
+          </ui-label>
           <textarea
             class="input input withLabel multiLine"
             id="input.checkout-comments"
             name="comments"
           />
-        </ui_view>
-      </ui_view>
-      <ui_text
+        </ui-view>
+      </ui-view>
+      <ui-text
         class="text small text hint"
       >
         user.label.comments_hint
-      </ui_text>
-    </ui_input_text>
-    <ui_text
+      </ui-text>
+    </ui-input-text>
+    <ui-text
       class="text small"
       hint=""
       id="checkout-undefined"
       label="undefined"
       name="undefined"
+      showrequired="true"
     >
       La hora de entrada es a partir de las 15:00h. La hora de salidas es hasta las 12:00h
-    </ui_text>
-    <ui_input_option
+    </ui-text>
+    <ui-input-option
       class="pressable inputOption"
       hint=""
       id="checkout-hotel_future_offers"
+      success="false"
       tabindex="0"
     >
-      <ui_checkbox
+      <ui-checkbox
         class="checkbox"
       >
         <input
@@ -1305,21 +1307,22 @@ exports[`component:<Checkout> partial:<Form> inherit:className 1`] = `
           type="checkbox"
           value=""
         />
-      </ui_checkbox>
-      <label
+      </ui-checkbox>
+      <ui-label
         class="text small text label"
-        for="checkout-hotel_future_offers"
+        htmlfor="checkout-hotel_future_offers"
       >
         Quiero recibir futuras ofertas y noticias de este establecimiento
-      </label>
-    </ui_input_option>
-    <ui_input_option
+      </ui-label>
+    </ui-input-option>
+    <ui-input-option
       class="pressable inputOption"
       hint=""
       id="checkout-joinClub"
+      success="false"
       tabindex="0"
     >
-      <ui_checkbox
+      <ui-checkbox
         class="checkbox"
       >
         <input
@@ -1328,21 +1331,22 @@ exports[`component:<Checkout> partial:<Form> inherit:className 1`] = `
           type="checkbox"
           value=""
         />
-      </ui_checkbox>
-      <label
+      </ui-checkbox>
+      <ui-label
         class="text small text label"
-        for="checkout-joinClub"
+        htmlfor="checkout-joinClub"
       >
         user.label.join_club
-      </label>
-    </ui_input_option>
-    <ui_input_option
+      </ui-label>
+    </ui-input-option>
+    <ui-input-option
       class="pressable inputOption"
       hint=""
       id="checkout-privacyPolicy"
+      success="false"
       tabindex="0"
     >
-      <ui_checkbox
+      <ui-checkbox
         class="checkbox"
       >
         <input
@@ -1351,10 +1355,10 @@ exports[`component:<Checkout> partial:<Form> inherit:className 1`] = `
           type="checkbox"
           value=""
         />
-      </ui_checkbox>
-      <label
+      </ui-checkbox>
+      <ui-label
         class="text small text label"
-        for="checkout-privacyPolicy"
+        htmlfor="checkout-privacyPolicy"
       >
         user.label.checkout_privacy_policy
         <span
@@ -1362,29 +1366,29 @@ exports[`component:<Checkout> partial:<Form> inherit:className 1`] = `
         >
            *
         </span>
-      </label>
-    </ui_input_option>
+      </ui-label>
+    </ui-input-option>
   </form>
-  <ui_view
+  <ui-view
     class="view"
   >
-    <ui_view
+    <ui-view
       class="view"
     >
-      <ui_text
+      <ui-text
         class="text bold headline-3"
       >
         payments.label.payment_methods
-      </ui_text>
-    </ui_view>
-    <ui_view
+      </ui-text>
+    </ui-view>
+    <ui-view
       class="view"
     >
-      <ui_pressable
+      <ui-pressable
         class="pressable disabled"
-        disabled=""
+        disabled="true"
       >
-        <ui_radio
+        <ui-radio
           class="radio"
         >
           <input
@@ -1394,15 +1398,15 @@ exports[`component:<Checkout> partial:<Form> inherit:className 1`] = `
             type="radio"
             value="CARD"
           />
-          <ui_primitive
+          <ui-primitive
             class="checkmark"
           />
-        </ui_radio>
-        <ui_text
+        </ui-radio>
+        <ui-text
           class="text bold paragraph"
         >
           payments.label.card
-        </ui_text>
+        </ui-text>
         <img
           alt="VISA"
           class="view"
@@ -1413,25 +1417,25 @@ exports[`component:<Checkout> partial:<Form> inherit:className 1`] = `
           class="view"
           src="https://static.mirai.com/payments/images/cards/mastercard.png"
         />
-      </ui_pressable>
-      <ui_view
+      </ui-pressable>
+      <ui-view
         class="view"
       >
-        <ui_fieldset
+        <form
           autocomplete="off"
         >
-          <ui_input_text
+          <ui-input-text
             class="view inputContainer"
           >
-            <ui_view
+            <ui-view
               class="view row inputBorder"
             >
-              <ui_view
+              <ui-view
                 class="view wide content"
               >
-                <label
+                <ui-label
                   class="text paragraph text label"
-                  for="input.checkout-card"
+                  htmlfor="input.checkout-card"
                 >
                   payments.label.card_number
                   <span
@@ -1439,7 +1443,7 @@ exports[`component:<Checkout> partial:<Form> inherit:className 1`] = `
                   >
                      *
                   </span>
-                </label>
+                </ui-label>
                 <input
                   class="input input withLabel"
                   id="input.checkout-card"
@@ -1450,21 +1454,21 @@ exports[`component:<Checkout> partial:<Form> inherit:className 1`] = `
                   type="text"
                   value=""
                 />
-              </ui_view>
-            </ui_view>
-          </ui_input_text>
-          <ui_input_text
+              </ui-view>
+            </ui-view>
+          </ui-input-text>
+          <ui-input-text
             class="view inputContainer"
           >
-            <ui_view
+            <ui-view
               class="view row inputBorder"
             >
-              <ui_view
+              <ui-view
                 class="view wide content"
               >
-                <label
+                <ui-label
                   class="text paragraph text label"
-                  for="input.checkout-name"
+                  htmlfor="input.checkout-name"
                 >
                   payments.label.card_name
                   <span
@@ -1472,7 +1476,7 @@ exports[`component:<Checkout> partial:<Form> inherit:className 1`] = `
                   >
                      *
                   </span>
-                </label>
+                </ui-label>
                 <input
                   class="input input withLabel"
                   id="input.checkout-name"
@@ -1483,21 +1487,21 @@ exports[`component:<Checkout> partial:<Form> inherit:className 1`] = `
                   type="text"
                   value=""
                 />
-              </ui_view>
-            </ui_view>
-          </ui_input_text>
-          <ui_input_date
+              </ui-view>
+            </ui-view>
+          </ui-input-text>
+          <ui-input-text
             class="view inputContainer"
           >
-            <ui_view
+            <ui-view
               class="view row inputBorder"
             >
-              <ui_view
+              <ui-view
                 class="view wide content"
               >
-                <label
+                <ui-label
                   class="text paragraph text label"
-                  for="input.checkout-expire"
+                  htmlfor="input.checkout-expire"
                 >
                   payments.label.expiration
                   <span
@@ -1505,7 +1509,7 @@ exports[`component:<Checkout> partial:<Form> inherit:className 1`] = `
                   >
                      *
                   </span>
-                </label>
+                </ui-label>
                 <input
                   class="input input withLabel"
                   id="input.checkout-expire"
@@ -1516,20 +1520,21 @@ exports[`component:<Checkout> partial:<Form> inherit:className 1`] = `
                   type="inputDate"
                   value=""
                 />
-              </ui_view>
-            </ui_view>
-          </ui_input_date>
-        </ui_fieldset>
-      </ui_view>
-    </ui_view>
-    <ui_view
+              </ui-view>
+            </ui-view>
+          </ui-input-text>
+        </form>
+      </ui-view>
+    </ui-view>
+    <ui-view
       class="view"
     >
-      <ui_pressable
+      <ui-pressable
         class="pressable"
+        disabled="false"
         tabindex="0"
       >
-        <ui_radio
+        <ui-radio
           class="radio"
         >
           <input
@@ -1538,39 +1543,39 @@ exports[`component:<Checkout> partial:<Form> inherit:className 1`] = `
             type="radio"
             value="AMAZON_PAY"
           />
-          <ui_primitive
+          <ui-primitive
             class="checkmark"
           />
-        </ui_radio>
-        <ui_text
+        </ui-radio>
+        <ui-text
           class="text bold paragraph"
         >
           payments.label.amazon
-        </ui_text>
+        </ui-text>
         <img
           alt="AMAZON PAY"
           class="view"
           src="https://static.mirai.com/payments/images/amazonpay.png"
         />
-      </ui_pressable>
-    </ui_view>
-  </ui_view>
-  <ui_modal_overflow
+      </ui-pressable>
+    </ui-view>
+  </ui-view>
+  <ui-modal-overflow
     class="pressable container overflow"
     style="height: 768px;"
     tabindex="0"
   >
-    <ui_view
+    <ui-modal
       class="view fit modal"
     >
-      <ui_view
+      <ui-view
         class="view row header hideBack"
       >
         <button
           class="pressable button small squared transparent button"
           tabindex="0"
         >
-          <ui_icon
+          <ui-icon
             class="icon headline-3 icon"
           >
             <svg
@@ -1590,85 +1595,86 @@ exports[`component:<Checkout> partial:<Form> inherit:className 1`] = `
                 d="M19 6.41 17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12 19 6.41z"
               />
             </svg>
-          </ui_icon>
+          </ui-icon>
         </button>
-      </ui_view>
-      <ui_scrollview
+      </ui-view>
+      <ui-scrollview
         class="scrollview vertical"
+        vertical="true"
       >
-        <ui_view
+        <ui-view
           class="view"
         >
-          <ui_view
+          <ui-view
             class="view"
           >
-            <ui_text
+            <ui-text
               class="text bold small"
             >
               common.label.payment_terms
-            </ui_text>
-            <ui_text
+            </ui-text>
+            <ui-text
               class="text small"
             >
               Prepago de 100%: Tarjeta de crédito o Amazon Pay
-            </ui_text>
-          </ui_view>
-          <ui_view
+            </ui-text>
+          </ui-view>
+          <ui-view
             class="view"
           >
-            <ui_text
+            <ui-text
               class="text bold small"
             >
               common.label.cancellation_policy
-            </ui_text>
-            <ui_text
+            </ui-text>
+            <ui-text
               class="text small"
             >
               Para que la reserva quede confirmada, es necesario el cobro por anticipado del 100% de toda la estancia reservada. Recibirá un cargo en su tarjeta por dicho importe. Sólo entonces su confirmación tendrá validez. El importe no será devuelto bajo ninguna circunstancia.
-            </ui_text>
-          </ui_view>
-          <ui_view
+            </ui-text>
+          </ui-view>
+          <ui-view
             class="view"
           >
-            <ui_text
+            <ui-text
               class="text bold small"
             >
               common.label.others_terms
-            </ui_text>
-            <ui_text
+            </ui-text>
+            <ui-text
               class="text small"
             >
-              <ui_text
+              <ui-text
                 class="text small wide"
               >
                 Check- in a partir de las 15.00h. 
-              </ui_text>
-              <ui_text
+              </ui-text>
+              <ui-text
                 class="text small wide"
               >
                 Check - out hasta las 12.00h. 
-              </ui_text>
-              <ui_text
+              </ui-text>
+              <ui-text
                 class="text small wide"
               >
                 Los niños de 3 a 12 años podrán acceder a las instalaciones dedicadas a su uso y disfrute.
-              </ui_text>
-              <ui_text
+              </ui-text>
+              <ui-text
                 class="text small wide"
               >
                 En caso de alojarse con bebés, éstos no incluyen régimen alguno.
-              </ui_text>
-              <ui_text
+              </ui-text>
+              <ui-text
                 class="text small wide"
               >
                 Acceso spa infantil para bebés 8.50€ al día.
-              </ui_text>
-            </ui_text>
-          </ui_view>
-        </ui_view>
-      </ui_scrollview>
-    </ui_view>
-  </ui_modal_overflow>
+              </ui-text>
+            </ui-text>
+          </ui-view>
+        </ui-view>
+      </ui-scrollview>
+    </ui-modal>
+  </ui-modal-overflow>
 </DocumentFragment>
 `;
 
@@ -1677,31 +1683,31 @@ exports[`component:<Checkout> partial:<Form> renders 1`] = `
   <form
     autocomplete="off"
   >
-    <ui_text
+    <ui-text
       class="text bold headline-3 wide"
     >
       user.label.personal_details
-    </ui_text>
-    <ui_text
+    </ui-text>
+    <ui-text
       class="text small wide"
     >
       <span>
         *
       </span>
        　
-    </ui_text>
-    <ui_input_text
+    </ui-text>
+    <ui-input-text
       class="view inputContainer"
     >
-      <ui_view
+      <ui-view
         class="view row inputBorder"
       >
-        <ui_view
+        <ui-view
           class="view wide content"
         >
-          <label
+          <ui-label
             class="text paragraph text label"
-            for="input.checkout-firstName"
+            htmlfor="input.checkout-firstName"
           >
             common.label.firstname
             <span
@@ -1709,7 +1715,7 @@ exports[`component:<Checkout> partial:<Form> renders 1`] = `
             >
                *
             </span>
-          </label>
+          </ui-label>
           <input
             class="input input withLabel"
             id="input.checkout-firstName"
@@ -1718,21 +1724,21 @@ exports[`component:<Checkout> partial:<Form> renders 1`] = `
             type="text"
             value=""
           />
-        </ui_view>
-      </ui_view>
-    </ui_input_text>
-    <ui_input_text
+        </ui-view>
+      </ui-view>
+    </ui-input-text>
+    <ui-input-text
       class="view inputContainer"
     >
-      <ui_view
+      <ui-view
         class="view row inputBorder"
       >
-        <ui_view
+        <ui-view
           class="view wide content"
         >
-          <label
+          <ui-label
             class="text paragraph text label"
-            for="input.checkout-lastName"
+            htmlfor="input.checkout-lastName"
           >
             common.label.lastname
             <span
@@ -1740,7 +1746,7 @@ exports[`component:<Checkout> partial:<Form> renders 1`] = `
             >
                *
             </span>
-          </label>
+          </ui-label>
           <input
             class="input input withLabel"
             id="input.checkout-lastName"
@@ -1749,21 +1755,21 @@ exports[`component:<Checkout> partial:<Form> renders 1`] = `
             type="text"
             value=""
           />
-        </ui_view>
-      </ui_view>
-    </ui_input_text>
-    <ui_input_text
+        </ui-view>
+      </ui-view>
+    </ui-input-text>
+    <ui-input-text
       class="view inputContainer"
     >
-      <ui_view
+      <ui-view
         class="view row inputBorder"
       >
-        <ui_view
+        <ui-view
           class="view wide content"
         >
-          <label
+          <ui-label
             class="text paragraph text label"
-            for="input.checkout-email"
+            htmlfor="input.checkout-email"
           >
             common.label.email
             <span
@@ -1771,7 +1777,7 @@ exports[`component:<Checkout> partial:<Form> renders 1`] = `
             >
                *
             </span>
-          </label>
+          </ui-label>
           <input
             class="input input withLabel"
             id="input.checkout-email"
@@ -1780,27 +1786,27 @@ exports[`component:<Checkout> partial:<Form> renders 1`] = `
             type="email"
             value=""
           />
-        </ui_view>
-      </ui_view>
-    </ui_input_text>
-    <ui_input_phone
+        </ui-view>
+      </ui-view>
+    </ui-input-text>
+    <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="phone-prefix"
+              htmlfor="phone-prefix"
             >
               common.label.phone_prefix
-            </label>
+            </ui-label>
             <select
               class="select empty input prefix withLabel empty"
               id="phone-prefix"
@@ -2843,8 +2849,8 @@ exports[`component:<Checkout> partial:<Form> renders 1`] = `
                 +998
               </option>
             </select>
-          </ui_view>
-          <ui_icon
+          </ui-view>
+          <ui-icon
             class="icon headline-3 icon expand"
           >
             <svg
@@ -2865,20 +2871,20 @@ exports[`component:<Checkout> partial:<Form> 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"
           >
-            <label
+            <ui-label
               class="text paragraph text label"
-              for="checkout-phone"
+              htmlfor="checkout-phone"
             >
               common.label.phone
               <span
@@ -2886,7 +2892,7 @@ exports[`component:<Checkout> partial:<Form> renders 1`] = `
               >
                  *
               </span>
-            </label>
+            </ui-label>
             <input
               class="input input withLabel"
               id="checkout-phone"
@@ -2896,25 +2902,25 @@ exports[`component:<Checkout> partial:<Form> renders 1`] = `
               type="tel"
               value=""
             />
-          </ui_view>
-        </ui_view>
-      </ui_view>
-    </ui_input_phone>
-    <ui_input_text
+          </ui-view>
+        </ui-view>
+      </ui-view>
+    </ui-input-phone>
+    <ui-input-text
       class="view inputContainer"
     >
-      <ui_view
+      <ui-view
         class="view row inputBorder"
       >
-        <ui_view
+        <ui-view
           class="view wide content"
         >
-          <label
+          <ui-label
             class="text paragraph text label"
-            for="input.checkout-company"
+            htmlfor="input.checkout-company"
           >
             common.label.company
-          </label>
+          </ui-label>
           <input
             class="input input withLabel"
             id="input.checkout-company"
@@ -2922,53 +2928,55 @@ exports[`component:<Checkout> partial:<Form> renders 1`] = `
             type="text"
             value=""
           />
-        </ui_view>
-      </ui_view>
-    </ui_input_text>
-    <ui_input_text
+        </ui-view>
+      </ui-view>
+    </ui-input-text>
+    <ui-input-text
       class="view inputContainer"
     >
-      <ui_view
+      <ui-view
         class="view row inputBorder"
       >
-        <ui_view
+        <ui-view
           class="view wide content"
         >
-          <label
+          <ui-label
             class="text paragraph text label"
-            for="input.checkout-comments"
+            htmlfor="input.checkout-comments"
           >
             common.label.comments
-          </label>
+          </ui-label>
           <textarea
             class="input input withLabel multiLine"
             id="input.checkout-comments"
             name="comments"
           />
-        </ui_view>
-      </ui_view>
-      <ui_text
+        </ui-view>
+      </ui-view>
+      <ui-text
         class="text small text hint"
       >
         user.label.comments_hint
-      </ui_text>
-    </ui_input_text>
-    <ui_text
+      </ui-text>
+    </ui-input-text>
+    <ui-text
       class="text small"
       hint=""
       id="checkout-undefined"
       label="undefined"
       name="undefined"
+      showrequired="true"
     >
       La hora de entrada es a partir de las 15:00h. La hora de salidas es hasta las 12:00h
-    </ui_text>
-    <ui_input_option
+    </ui-text>
+    <ui-input-option
       class="pressable inputOption"
       hint=""
       id="checkout-hotel_future_offers"
+      success="false"
       tabindex="0"
     >
-      <ui_checkbox
+      <ui-checkbox
         class="checkbox"
       >
         <input
@@ -2977,21 +2985,22 @@ exports[`component:<Checkout> partial:<Form> renders 1`] = `
           type="checkbox"
           value=""
         />
-      </ui_checkbox>
-      <label
+      </ui-checkbox>
+      <ui-label
         class="text small text label"
-        for="checkout-hotel_future_offers"
+        htmlfor="checkout-hotel_future_offers"
       >
         Quiero recibir futuras ofertas y noticias de este establecimiento
-      </label>
-    </ui_input_option>
-    <ui_input_option
+      </ui-label>
+    </ui-input-option>
+    <ui-input-option
       class="pressable inputOption"
       hint=""
       id="checkout-joinClub"
+      success="false"
       tabindex="0"
     >
-      <ui_checkbox
+      <ui-checkbox
         class="checkbox"
       >
         <input
@@ -3000,21 +3009,22 @@ exports[`component:<Checkout> partial:<Form> renders 1`] = `
           type="checkbox"
           value=""
         />
-      </ui_checkbox>
-      <label
+      </ui-checkbox>
+      <ui-label
         class="text small text label"
-        for="checkout-joinClub"
+        htmlfor="checkout-joinClub"
       >
         user.label.join_club
-      </label>
-    </ui_input_option>
-    <ui_input_option
+      </ui-label>
+    </ui-input-option>
+    <ui-input-option
       class="pressable inputOption"
       hint=""
       id="checkout-privacyPolicy"
+      success="false"
       tabindex="0"
     >
-      <ui_checkbox
+      <ui-checkbox
         class="checkbox"
       >
         <input
@@ -3023,10 +3033,10 @@ exports[`component:<Checkout> partial:<Form> renders 1`] = `
           type="checkbox"
           value=""
         />
-      </ui_checkbox>
-      <label
+      </ui-checkbox>
+      <ui-label
         class="text small text label"
-        for="checkout-privacyPolicy"
+        htmlfor="checkout-privacyPolicy"
       >
         user.label.checkout_privacy_policy
         <span
@@ -3034,29 +3044,29 @@ exports[`component:<Checkout> partial:<Form> renders 1`] = `
         >
            *
         </span>
-      </label>
-    </ui_input_option>
+      </ui-label>
+    </ui-input-option>
   </form>
-  <ui_view
+  <ui-view
     class="view"
   >
-    <ui_view
+    <ui-view
       class="view"
     >
-      <ui_text
+      <ui-text
         class="text bold headline-3"
       >
         payments.label.payment_methods
-      </ui_text>
-    </ui_view>
-    <ui_view
+      </ui-text>
+    </ui-view>
+    <ui-view
       class="view"
     >
-      <ui_pressable
+      <ui-pressable
         class="pressable disabled"
-        disabled=""
+        disabled="true"
       >
-        <ui_radio
+        <ui-radio
           class="radio"
         >
           <input
@@ -3066,15 +3076,15 @@ exports[`component:<Checkout> partial:<Form> renders 1`] = `
             type="radio"
             value="CARD"
           />
-          <ui_primitive
+          <ui-primitive
             class="checkmark"
           />
-        </ui_radio>
-        <ui_text
+        </ui-radio>
+        <ui-text
           class="text bold paragraph"
         >
           payments.label.card
-        </ui_text>
+        </ui-text>
         <img
           alt="VISA"
           class="view"
@@ -3085,25 +3095,25 @@ exports[`component:<Checkout> partial:<Form> renders 1`] = `
           class="view"
           src="https://static.mirai.com/payments/images/cards/mastercard.png"
         />
-      </ui_pressable>
-      <ui_view
+      </ui-pressable>
+      <ui-view
         class="view"
       >
-        <ui_fieldset
+        <form
           autocomplete="off"
         >
-          <ui_input_text
+          <ui-input-text
             class="view inputContainer"
           >
-            <ui_view
+            <ui-view
               class="view row inputBorder"
             >
-              <ui_view
+              <ui-view
                 class="view wide content"
               >
-                <label
+                <ui-label
                   class="text paragraph text label"
-                  for="input.checkout-card"
+                  htmlfor="input.checkout-card"
                 >
                   payments.label.card_number
                   <span
@@ -3111,7 +3121,7 @@ exports[`component:<Checkout> partial:<Form> renders 1`] = `
                   >
                      *
                   </span>
-                </label>
+                </ui-label>
                 <input
                   class="input input withLabel"
                   id="input.checkout-card"
@@ -3122,21 +3132,21 @@ exports[`component:<Checkout> partial:<Form> renders 1`] = `
                   type="text"
                   value=""
                 />
-              </ui_view>
-            </ui_view>
-          </ui_input_text>
-          <ui_input_text
+              </ui-view>
+            </ui-view>
+          </ui-input-text>
+          <ui-input-text
             class="view inputContainer"
           >
-            <ui_view
+            <ui-view
               class="view row inputBorder"
             >
-              <ui_view
+              <ui-view
                 class="view wide content"
               >
-                <label
+                <ui-label
                   class="text paragraph text label"
-                  for="input.checkout-name"
+                  htmlfor="input.checkout-name"
                 >
                   payments.label.card_name
                   <span
@@ -3144,7 +3154,7 @@ exports[`component:<Checkout> partial:<Form> renders 1`] = `
                   >
                      *
                   </span>
-                </label>
+                </ui-label>
                 <input
                   class="input input withLabel"
                   id="input.checkout-name"
@@ -3155,21 +3165,21 @@ exports[`component:<Checkout> partial:<Form> renders 1`] = `
                   type="text"
                   value=""
                 />
-              </ui_view>
-            </ui_view>
-          </ui_input_text>
-          <ui_input_date
+              </ui-view>
+            </ui-view>
+          </ui-input-text>
+          <ui-input-text
             class="view inputContainer"
           >
-            <ui_view
+            <ui-view
               class="view row inputBorder"
             >
-              <ui_view
+              <ui-view
                 class="view wide content"
               >
-                <label
+                <ui-label
                   class="text paragraph text label"
-                  for="input.checkout-expire"
+                  htmlfor="input.checkout-expire"
                 >
                   payments.label.expiration
                   <span
@@ -3177,7 +3187,7 @@ exports[`component:<Checkout> partial:<Form> renders 1`] = `
                   >
                      *
                   </span>
-                </label>
+                </ui-label>
                 <input
                   class="input input withLabel"
                   id="input.checkout-expire"
@@ -3188,20 +3198,21 @@ exports[`component:<Checkout> partial:<Form> renders 1`] = `
                   type="inputDate"
                   value=""
                 />
-              </ui_view>
-            </ui_view>
-          </ui_input_date>
-        </ui_fieldset>
-      </ui_view>
-    </ui_view>
-    <ui_view
+              </ui-view>
+            </ui-view>
+          </ui-input-text>
+        </form>
+      </ui-view>
+    </ui-view>
+    <ui-view
       class="view"
     >
-      <ui_pressable
+      <ui-pressable
         class="pressable"
+        disabled="false"
         tabindex="0"
       >
-        <ui_radio
+        <ui-radio
           class="radio"
         >
           <input
@@ -3210,39 +3221,39 @@ exports[`component:<Checkout> partial:<Form> renders 1`] = `
             type="radio"
             value="AMAZON_PAY"
           />
-          <ui_primitive
+          <ui-primitive
             class="checkmark"
           />
-        </ui_radio>
-        <ui_text
+        </ui-radio>
+        <ui-text
           class="text bold paragraph"
         >
           payments.label.amazon
-        </ui_text>
+        </ui-text>
         <img
           alt="AMAZON PAY"
           class="view"
           src="https://static.mirai.com/payments/images/amazonpay.png"
         />
-      </ui_pressable>
-    </ui_view>
-  </ui_view>
-  <ui_modal_overflow
+      </ui-pressable>
+    </ui-view>
+  </ui-view>
+  <ui-modal-overflow
     class="pressable container overflow"
     style="height: 768px;"
     tabindex="0"
   >
-    <ui_view
+    <ui-modal
       class="view fit modal"
     >
-      <ui_view
+      <ui-view
         class="view row header hideBack"
       >
         <button
           class="pressable button small squared transparent button"
           tabindex="0"
         >
-          <ui_icon
+          <ui-icon
             class="icon headline-3 icon"
           >
             <svg
@@ -3262,85 +3273,86 @@ exports[`component:<Checkout> partial:<Form> renders 1`] = `
                 d="M19 6.41 17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12 19 6.41z"
               />
             </svg>
-          </ui_icon>
+          </ui-icon>
         </button>
-      </ui_view>
-      <ui_scrollview
+      </ui-view>
+      <ui-scrollview
         class="scrollview vertical"
+        vertical="true"
       >
-        <ui_view
+        <ui-view
           class="view"
         >
-          <ui_view
+          <ui-view
             class="view"
           >
-            <ui_text
+            <ui-text
               class="text bold small"
             >
               common.label.payment_terms
-            </ui_text>
-            <ui_text
+            </ui-text>
+            <ui-text
               class="text small"
             >
               Prepago de 100%: Tarjeta de crédito o Amazon Pay
-            </ui_text>
-          </ui_view>
-          <ui_view
+            </ui-text>
+          </ui-view>
+          <ui-view
             class="view"
           >
-            <ui_text
+            <ui-text
               class="text bold small"
             >
               common.label.cancellation_policy
-            </ui_text>
-            <ui_text
+            </ui-text>
+            <ui-text
               class="text small"
             >
               Para que la reserva quede confirmada, es necesario el cobro por anticipado del 100% de toda la estancia reservada. Recibirá un cargo en su tarjeta por dicho importe. Sólo entonces su confirmación tendrá validez. El importe no será devuelto bajo ninguna circunstancia.
-            </ui_text>
-          </ui_view>
-          <ui_view
+            </ui-text>
+          </ui-view>
+          <ui-view
             class="view"
           >
-            <ui_text
+            <ui-text
               class="text bold small"
             >
               common.label.others_terms
-            </ui_text>
-            <ui_text
+            </ui-text>
+            <ui-text
               class="text small"
             >
-              <ui_text
+              <ui-text
                 class="text small wide"
               >
                 Check- in a partir de las 15.00h. 
-              </ui_text>
-              <ui_text
+              </ui-text>
+              <ui-text
                 class="text small wide"
               >
                 Check - out hasta las 12.00h. 
-              </ui_text>
-              <ui_text
+              </ui-text>
+              <ui-text
                 class="text small wide"
               >
                 Los niños de 3 a 12 años podrán acceder a las instalaciones dedicadas a su uso y disfrute.
-              </ui_text>
-              <ui_text
+              </ui-text>
+              <ui-text
                 class="text small wide"
               >
                 En caso de alojarse con bebés, éstos no incluyen régimen alguno.
-              </ui_text>
-              <ui_text
+              </ui-text>
+              <ui-text
                 class="text small wide"
               >
                 Acceso spa infantil para bebés 8.50€ al día.
-              </ui_text>
-            </ui_text>
-          </ui_view>
-        </ui_view>
-      </ui_scrollview>
-    </ui_view>
-  </ui_modal_overflow>
+              </ui-text>
+            </ui-text>
+          </ui-view>
+        </ui-view>
+      </ui-scrollview>
+    </ui-modal>
+  </ui-modal-overflow>
 </DocumentFragment>
 `;
 
@@ -3350,31 +3362,31 @@ exports[`component:<Checkout> partial:<Form> testID 1`] = `
     autocomplete="off"
     data-testid="mirai"
   >
-    <ui_text
+    <ui-text
       class="text bold headline-3 wide"
     >
       user.label.personal_details
-    </ui_text>
-    <ui_text
+    </ui-text>
+    <ui-text
       class="text small wide"
     >
       <span>
         *
       </span>
        　
-    </ui_text>
-    <ui_input_text
+    </ui-text>
+    <ui-input-text
       class="view inputContainer"
     >
-      <ui_view
+      <ui-view
         class="view row inputBorder"
       >
-        <ui_view
+        <ui-view
           class="view wide content"
         >
-          <label
+          <ui-label
             class="text paragraph text label"
-            for="input.checkout-firstName"
+            htmlfor="input.checkout-firstName"
           >
             common.label.firstname
             <span
@@ -3382,7 +3394,7 @@ exports[`component:<Checkout> partial:<Form> testID 1`] = `
             >
                *
             </span>
-          </label>
+          </ui-label>
           <input
             class="input input withLabel"
             id="input.checkout-firstName"
@@ -3391,21 +3403,21 @@ exports[`component:<Checkout> partial:<Form> testID 1`] = `
             type="text"
             value=""
           />
-        </ui_view>
-      </ui_view>
-    </ui_input_text>
-    <ui_input_text
+        </ui-view>
+      </ui-view>
+    </ui-input-text>
+    <ui-input-text
       class="view inputContainer"
     >
-      <ui_view
+      <ui-view
         class="view row inputBorder"
       >
-        <ui_view
+        <ui-view
           class="view wide content"
         >
-          <label
+          <ui-label
             class="text paragraph text label"
-            for="input.checkout-lastName"
+            htmlfor="input.checkout-lastName"
           >
             common.label.lastname
             <span
@@ -3413,7 +3425,7 @@ exports[`component:<Checkout> partial:<Form> testID 1`] = `
             >
                *
             </span>
-          </label>
+          </ui-label>
           <input
             class="input input withLabel"
             id="input.checkout-lastName"
@@ -3422,21 +3434,21 @@ exports[`component:<Checkout> partial:<Form> testID 1`] = `
             type="text"
             value=""
           />
-        </ui_view>
-      </ui_view>
-    </ui_input_text>
-    <ui_input_text
+        </ui-view>
+      </ui-view>
+    </ui-input-text>
+    <ui-input-text
       class="view inputContainer"
     >
-      <ui_view
+      <ui-view
         class="view row inputBorder"
       >
-        <ui_view
+        <ui-view
           class="view wide content"
         >
-          <label
+          <ui-label
             class="text paragraph text label"
-            for="input.checkout-email"
+            htmlfor="input.checkout-email"
           >
             common.label.email
             <span
@@ -3444,7 +3456,7 @@ exports[`component:<Checkout> partial:<Form> testID 1`] = `
             >
                *
             </span>
-          </label>
+          </ui-label>
           <input
             class="input input withLabel"
             id="input.checkout-email"
@@ -3453,27 +3465,27 @@ exports[`component:<Checkout> partial:<Form> testID 1`] = `
             type="email"
             value=""
           />
-        </ui_view>
-      </ui_view>
-    </ui_input_text>
-    <ui_input_phone
+        </ui-view>
+      </ui-view>
+    </ui-input-text>
+    <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="phone-prefix"
+              htmlfor="phone-prefix"
             >
               common.label.phone_prefix
-            </label>
+            </ui-label>
             <select
               class="select empty input prefix withLabel empty"
               id="phone-prefix"
@@ -4516,8 +4528,8 @@ exports[`component:<Checkout> partial:<Form> testID 1`] = `
                 +998
               </option>
             </select>
-          </ui_view>
-          <ui_icon
+          </ui-view>
+          <ui-icon
             class="icon headline-3 icon expand"
           >
             <svg
@@ -4538,20 +4550,20 @@ exports[`component:<Checkout> partial:<Form> 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"
           >
-            <label
+            <ui-label
               class="text paragraph text label"
-              for="checkout-phone"
+              htmlfor="checkout-phone"
             >
               common.label.phone
               <span
@@ -4559,7 +4571,7 @@ exports[`component:<Checkout> partial:<Form> testID 1`] = `
               >
                  *
               </span>
-            </label>
+            </ui-label>
             <input
               class="input input withLabel"
               id="checkout-phone"
@@ -4569,25 +4581,25 @@ exports[`component:<Checkout> partial:<Form> testID 1`] = `
               type="tel"
               value=""
             />
-          </ui_view>
-        </ui_view>
-      </ui_view>
-    </ui_input_phone>
-    <ui_input_text
+          </ui-view>
+        </ui-view>
+      </ui-view>
+    </ui-input-phone>
+    <ui-input-text
       class="view inputContainer"
     >
-      <ui_view
+      <ui-view
         class="view row inputBorder"
       >
-        <ui_view
+        <ui-view
           class="view wide content"
         >
-          <label
+          <ui-label
             class="text paragraph text label"
-            for="input.checkout-company"
+            htmlfor="input.checkout-company"
           >
             common.label.company
-          </label>
+          </ui-label>
           <input
             class="input input withLabel"
             id="input.checkout-company"
@@ -4595,53 +4607,55 @@ exports[`component:<Checkout> partial:<Form> testID 1`] = `
             type="text"
             value=""
           />
-        </ui_view>
-      </ui_view>
-    </ui_input_text>
-    <ui_input_text
+        </ui-view>
+      </ui-view>
+    </ui-input-text>
+    <ui-input-text
       class="view inputContainer"
     >
-      <ui_view
+      <ui-view
         class="view row inputBorder"
       >
-        <ui_view
+        <ui-view
           class="view wide content"
         >
-          <label
+          <ui-label
             class="text paragraph text label"
-            for="input.checkout-comments"
+            htmlfor="input.checkout-comments"
           >
             common.label.comments
-          </label>
+          </ui-label>
           <textarea
             class="input input withLabel multiLine"
             id="input.checkout-comments"
             name="comments"
           />
-        </ui_view>
-      </ui_view>
-      <ui_text
+        </ui-view>
+      </ui-view>
+      <ui-text
         class="text small text hint"
       >
         user.label.comments_hint
-      </ui_text>
-    </ui_input_text>
-    <ui_text
+      </ui-text>
+    </ui-input-text>
+    <ui-text
       class="text small"
       hint=""
       id="checkout-undefined"
       label="undefined"
       name="undefined"
+      showrequired="true"
     >
       La hora de entrada es a partir de las 15:00h. La hora de salidas es hasta las 12:00h
-    </ui_text>
-    <ui_input_option
+    </ui-text>
+    <ui-input-option
       class="pressable inputOption"
       hint=""
       id="checkout-hotel_future_offers"
+      success="false"
       tabindex="0"
     >
-      <ui_checkbox
+      <ui-checkbox
         class="checkbox"
       >
         <input
@@ -4650,21 +4664,22 @@ exports[`component:<Checkout> partial:<Form> testID 1`] = `
           type="checkbox"
           value=""
         />
-      </ui_checkbox>
-      <label
+      </ui-checkbox>
+      <ui-label
         class="text small text label"
-        for="checkout-hotel_future_offers"
+        htmlfor="checkout-hotel_future_offers"
       >
         Quiero recibir futuras ofertas y noticias de este establecimiento
-      </label>
-    </ui_input_option>
-    <ui_input_option
+      </ui-label>
+    </ui-input-option>
+    <ui-input-option
       class="pressable inputOption"
       hint=""
       id="checkout-joinClub"
+      success="false"
       tabindex="0"
     >
-      <ui_checkbox
+      <ui-checkbox
         class="checkbox"
       >
         <input
@@ -4673,21 +4688,22 @@ exports[`component:<Checkout> partial:<Form> testID 1`] = `
           type="checkbox"
           value=""
         />
-      </ui_checkbox>
-      <label
+      </ui-checkbox>
+      <ui-label
         class="text small text label"
-        for="checkout-joinClub"
+        htmlfor="checkout-joinClub"
       >
         user.label.join_club
-      </label>
-    </ui_input_option>
-    <ui_input_option
+      </ui-label>
+    </ui-input-option>
+    <ui-input-option
       class="pressable inputOption"
       hint=""
       id="checkout-privacyPolicy"
+      success="false"
       tabindex="0"
     >
-      <ui_checkbox
+      <ui-checkbox
         class="checkbox"
       >
         <input
@@ -4696,10 +4712,10 @@ exports[`component:<Checkout> partial:<Form> testID 1`] = `
           type="checkbox"
           value=""
         />
-      </ui_checkbox>
-      <label
+      </ui-checkbox>
+      <ui-label
         class="text small text label"
-        for="checkout-privacyPolicy"
+        htmlfor="checkout-privacyPolicy"
       >
         user.label.checkout_privacy_policy
         <span
@@ -4707,29 +4723,29 @@ exports[`component:<Checkout> partial:<Form> testID 1`] = `
         >
            *
         </span>
-      </label>
-    </ui_input_option>
+      </ui-label>
+    </ui-input-option>
   </form>
-  <ui_view
+  <ui-view
     class="view"
   >
-    <ui_view
+    <ui-view
       class="view"
     >
-      <ui_text
+      <ui-text
         class="text bold headline-3"
       >
         payments.label.payment_methods
-      </ui_text>
-    </ui_view>
-    <ui_view
+      </ui-text>
+    </ui-view>
+    <ui-view
       class="view"
     >
-      <ui_pressable
+      <ui-pressable
         class="pressable disabled"
-        disabled=""
+        disabled="true"
       >
-        <ui_radio
+        <ui-radio
           class="radio"
         >
           <input
@@ -4739,15 +4755,15 @@ exports[`component:<Checkout> partial:<Form> testID 1`] = `
             type="radio"
             value="CARD"
           />
-          <ui_primitive
+          <ui-primitive
             class="checkmark"
           />
-        </ui_radio>
-        <ui_text
+        </ui-radio>
+        <ui-text
           class="text bold paragraph"
         >
           payments.label.card
-        </ui_text>
+        </ui-text>
         <img
           alt="VISA"
           class="view"
@@ -4758,25 +4774,25 @@ exports[`component:<Checkout> partial:<Form> testID 1`] = `
           class="view"
           src="https://static.mirai.com/payments/images/cards/mastercard.png"
         />
-      </ui_pressable>
-      <ui_view
+      </ui-pressable>
+      <ui-view
         class="view"
       >
-        <ui_fieldset
+        <form
           autocomplete="off"
         >
-          <ui_input_text
+          <ui-input-text
             class="view inputContainer"
           >
-            <ui_view
+            <ui-view
               class="view row inputBorder"
             >
-              <ui_view
+              <ui-view
                 class="view wide content"
               >
-                <label
+                <ui-label
                   class="text paragraph text label"
-                  for="input.checkout-card"
+                  htmlfor="input.checkout-card"
                 >
                   payments.label.card_number
                   <span
@@ -4784,7 +4800,7 @@ exports[`component:<Checkout> partial:<Form> testID 1`] = `
                   >
                      *
                   </span>
-                </label>
+                </ui-label>
                 <input
                   class="input input withLabel"
                   id="input.checkout-card"
@@ -4795,21 +4811,21 @@ exports[`component:<Checkout> partial:<Form> testID 1`] = `
                   type="text"
                   value=""
                 />
-              </ui_view>
-            </ui_view>
-          </ui_input_text>
-          <ui_input_text
+              </ui-view>
+            </ui-view>
+          </ui-input-text>
+          <ui-input-text
             class="view inputContainer"
           >
-            <ui_view
+            <ui-view
               class="view row inputBorder"
             >
-              <ui_view
+              <ui-view
                 class="view wide content"
               >
-                <label
+                <ui-label
                   class="text paragraph text label"
-                  for="input.checkout-name"
+                  htmlfor="input.checkout-name"
                 >
                   payments.label.card_name
                   <span
@@ -4817,7 +4833,7 @@ exports[`component:<Checkout> partial:<Form> testID 1`] = `
                   >
                      *
                   </span>
-                </label>
+                </ui-label>
                 <input
                   class="input input withLabel"
                   id="input.checkout-name"
@@ -4828,21 +4844,21 @@ exports[`component:<Checkout> partial:<Form> testID 1`] = `
                   type="text"
                   value=""
                 />
-              </ui_view>
-            </ui_view>
-          </ui_input_text>
-          <ui_input_date
+              </ui-view>
+            </ui-view>
+          </ui-input-text>
+          <ui-input-text
             class="view inputContainer"
           >
-            <ui_view
+            <ui-view
               class="view row inputBorder"
             >
-              <ui_view
+              <ui-view
                 class="view wide content"
               >
-                <label
+                <ui-label
                   class="text paragraph text label"
-                  for="input.checkout-expire"
+                  htmlfor="input.checkout-expire"
                 >
                   payments.label.expiration
                   <span
@@ -4850,7 +4866,7 @@ exports[`component:<Checkout> partial:<Form> testID 1`] = `
                   >
                      *
                   </span>
-                </label>
+                </ui-label>
                 <input
                   class="input input withLabel"
                   id="input.checkout-expire"
@@ -4861,20 +4877,21 @@ exports[`component:<Checkout> partial:<Form> testID 1`] = `
                   type="inputDate"
                   value=""
                 />
-              </ui_view>
-            </ui_view>
-          </ui_input_date>
-        </ui_fieldset>
-      </ui_view>
-    </ui_view>
-    <ui_view
+              </ui-view>
+            </ui-view>
+          </ui-input-text>
+        </form>
+      </ui-view>
+    </ui-view>
+    <ui-view
       class="view"
     >
-      <ui_pressable
+      <ui-pressable
         class="pressable"
+        disabled="false"
         tabindex="0"
       >
-        <ui_radio
+        <ui-radio
           class="radio"
         >
           <input
@@ -4883,39 +4900,39 @@ exports[`component:<Checkout> partial:<Form> testID 1`] = `
             type="radio"
             value="AMAZON_PAY"
           />
-          <ui_primitive
+          <ui-primitive
             class="checkmark"
           />
-        </ui_radio>
-        <ui_text
+        </ui-radio>
+        <ui-text
           class="text bold paragraph"
         >
           payments.label.amazon
-        </ui_text>
+        </ui-text>
         <img
           alt="AMAZON PAY"
           class="view"
           src="https://static.mirai.com/payments/images/amazonpay.png"
         />
-      </ui_pressable>
-    </ui_view>
-  </ui_view>
-  <ui_modal_overflow
+      </ui-pressable>
+    </ui-view>
+  </ui-view>
+  <ui-modal-overflow
     class="pressable container overflow"
     style="height: 768px;"
     tabindex="0"
   >
-    <ui_view
+    <ui-modal
       class="view fit modal"
     >
-      <ui_view
+      <ui-view
         class="view row header hideBack"
       >
         <button
           class="pressable button small squared transparent button"
           tabindex="0"
         >
-          <ui_icon
+          <ui-icon
             class="icon headline-3 icon"
           >
             <svg
@@ -4935,85 +4952,86 @@ exports[`component:<Checkout> partial:<Form> testID 1`] = `
                 d="M19 6.41 17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12 19 6.41z"
               />
             </svg>
-          </ui_icon>
+          </ui-icon>
         </button>
-      </ui_view>
-      <ui_scrollview
+      </ui-view>
+      <ui-scrollview
         class="scrollview vertical"
+        vertical="true"
       >
-        <ui_view
+        <ui-view
           class="view"
         >
-          <ui_view
+          <ui-view
             class="view"
           >
-            <ui_text
+            <ui-text
               class="text bold small"
             >
               common.label.payment_terms
-            </ui_text>
-            <ui_text
+            </ui-text>
+            <ui-text
               class="text small"
             >
               Prepago de 100%: Tarjeta de crédito o Amazon Pay
-            </ui_text>
-          </ui_view>
-          <ui_view
+            </ui-text>
+          </ui-view>
+          <ui-view
             class="view"
           >
-            <ui_text
+            <ui-text
               class="text bold small"
             >
               common.label.cancellation_policy
-            </ui_text>
-            <ui_text
+            </ui-text>
+            <ui-text
               class="text small"
             >
               Para que la reserva quede confirmada, es necesario el cobro por anticipado del 100% de toda la estancia reservada. Recibirá un cargo en su tarjeta por dicho importe. Sólo entonces su confirmación tendrá validez. El importe no será devuelto bajo ninguna circunstancia.
-            </ui_text>
-          </ui_view>
-          <ui_view
+            </ui-text>
+          </ui-view>
+          <ui-view
             class="view"
           >
-            <ui_text
+            <ui-text
               class="text bold small"
             >
               common.label.others_terms
-            </ui_text>
-            <ui_text
+            </ui-text>
+            <ui-text
               class="text small"
             >
-              <ui_text
+              <ui-text
                 class="text small wide"
               >
                 Check- in a partir de las 15.00h. 
-              </ui_text>
-              <ui_text
+              </ui-text>
+              <ui-text
                 class="text small wide"
               >
                 Check - out hasta las 12.00h. 
-              </ui_text>
-              <ui_text
+              </ui-text>
+              <ui-text
                 class="text small wide"
               >
                 Los niños de 3 a 12 años podrán acceder a las instalaciones dedicadas a su uso y disfrute.
-              </ui_text>
-              <ui_text
+              </ui-text>
+              <ui-text
                 class="text small wide"
               >
                 En caso de alojarse con bebés, éstos no incluyen régimen alguno.
-              </ui_text>
-              <ui_text
+              </ui-text>
+              <ui-text
                 class="text small wide"
               >
                 Acceso spa infantil para bebés 8.50€ al día.
-              </ui_text>
-            </ui_text>
-          </ui_view>
-        </ui_view>
-      </ui_scrollview>
-    </ui_view>
-  </ui_modal_overflow>
+              </ui-text>
+            </ui-text>
+          </ui-view>
+        </ui-view>
+      </ui-scrollview>
+    </ui-modal>
+  </ui-modal-overflow>
 </DocumentFragment>
 `;
 
@@ -5022,31 +5040,31 @@ exports[`component:<Checkout> partial:<Form> with a store 1`] = `
   <form
     autocomplete="off"
   >
-    <ui_text
+    <ui-text
       class="text bold headline-3 wide"
     >
       user.label.personal_details
-    </ui_text>
-    <ui_text
+    </ui-text>
+    <ui-text
       class="text small wide"
     >
       <span>
         *
       </span>
        　
-    </ui_text>
-    <ui_input_text
+    </ui-text>
+    <ui-input-text
       class="view inputContainer"
     >
-      <ui_view
+      <ui-view
         class="view row inputBorder"
       >
-        <ui_view
+        <ui-view
           class="view wide content"
         >
-          <label
+          <ui-label
             class="text paragraph text label"
-            for="input.checkout-firstName"
+            htmlfor="input.checkout-firstName"
           >
             common.label.firstname
             <span
@@ -5054,7 +5072,7 @@ exports[`component:<Checkout> partial:<Form> with a store 1`] = `
             >
                *
             </span>
-          </label>
+          </ui-label>
           <input
             class="input input withLabel"
             id="input.checkout-firstName"
@@ -5063,21 +5081,21 @@ exports[`component:<Checkout> partial:<Form> with a store 1`] = `
             type="text"
             value=""
           />
-        </ui_view>
-      </ui_view>
-    </ui_input_text>
-    <ui_input_text
+        </ui-view>
+      </ui-view>
+    </ui-input-text>
+    <ui-input-text
       class="view inputContainer"
     >
-      <ui_view
+      <ui-view
         class="view row inputBorder"
       >
-        <ui_view
+        <ui-view
           class="view wide content"
         >
-          <label
+          <ui-label
             class="text paragraph text label"
-            for="input.checkout-lastName"
+            htmlfor="input.checkout-lastName"
           >
             common.label.lastname
             <span
@@ -5085,7 +5103,7 @@ exports[`component:<Checkout> partial:<Form> with a store 1`] = `
             >
                *
             </span>
-          </label>
+          </ui-label>
           <input
             class="input input withLabel"
             id="input.checkout-lastName"
@@ -5094,21 +5112,21 @@ exports[`component:<Checkout> partial:<Form> with a store 1`] = `
             type="text"
             value=""
           />
-        </ui_view>
-      </ui_view>
-    </ui_input_text>
-    <ui_input_text
+        </ui-view>
+      </ui-view>
+    </ui-input-text>
+    <ui-input-text
       class="view inputContainer"
     >
-      <ui_view
+      <ui-view
         class="view row inputBorder"
       >
-        <ui_view
+        <ui-view
           class="view wide content"
         >
-          <label
+          <ui-label
             class="text paragraph text label"
-            for="input.checkout-email"
+            htmlfor="input.checkout-email"
           >
             common.label.email
             <span
@@ -5116,7 +5134,7 @@ exports[`component:<Checkout> partial:<Form> with a store 1`] = `
             >
                *
             </span>
-          </label>
+          </ui-label>
           <input
             class="input input withLabel"
             id="input.checkout-email"
@@ -5125,27 +5143,27 @@ exports[`component:<Checkout> partial:<Form> with a store 1`] = `
             type="email"
             value=""
           />
-        </ui_view>
-      </ui_view>
-    </ui_input_text>
-    <ui_input_phone
+        </ui-view>
+      </ui-view>
+    </ui-input-text>
+    <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="phone-prefix"
+              htmlfor="phone-prefix"
             >
               common.label.phone_prefix
-            </label>
+            </ui-label>
             <select
               class="select empty input prefix withLabel empty"
               id="phone-prefix"
@@ -6188,8 +6206,8 @@ exports[`component:<Checkout> partial:<Form> with a store 1`] = `
                 +998
               </option>
             </select>
-          </ui_view>
-          <ui_icon
+          </ui-view>
+          <ui-icon
             class="icon headline-3 icon expand"
           >
             <svg
@@ -6210,20 +6228,20 @@ exports[`component:<Checkout> partial:<Form> with a store 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="checkout-phone"
+              htmlfor="checkout-phone"
             >
               common.label.phone
               <span
@@ -6231,7 +6249,7 @@ exports[`component:<Checkout> partial:<Form> with a store 1`] = `
               >
                  *
               </span>
-            </label>
+            </ui-label>
             <input
               class="input input withLabel"
               id="checkout-phone"
@@ -6241,25 +6259,25 @@ exports[`component:<Checkout> partial:<Form> with a store 1`] = `
               type="tel"
               value=""
             />
-          </ui_view>
-        </ui_view>
-      </ui_view>
-    </ui_input_phone>
-    <ui_input_text
+          </ui-view>
+        </ui-view>
+      </ui-view>
+    </ui-input-phone>
+    <ui-input-text
       class="view inputContainer"
     >
-      <ui_view
+      <ui-view
         class="view row inputBorder"
       >
-        <ui_view
+        <ui-view
           class="view wide content"
         >
-          <label
+          <ui-label
             class="text paragraph text label"
-            for="input.checkout-company"
+            htmlfor="input.checkout-company"
           >
             common.label.company
-          </label>
+          </ui-label>
           <input
             class="input input withLabel"
             id="input.checkout-company"
@@ -6267,53 +6285,55 @@ exports[`component:<Checkout> partial:<Form> with a store 1`] = `
             type="text"
             value=""
           />
-        </ui_view>
-      </ui_view>
-    </ui_input_text>
-    <ui_input_text
+        </ui-view>
+      </ui-view>
+    </ui-input-text>
+    <ui-input-text
       class="view inputContainer"
     >
-      <ui_view
+      <ui-view
         class="view row inputBorder"
       >
-        <ui_view
+        <ui-view
           class="view wide content"
         >
-          <label
+          <ui-label
             class="text paragraph text label"
-            for="input.checkout-comments"
+            htmlfor="input.checkout-comments"
           >
             common.label.comments
-          </label>
+          </ui-label>
           <textarea
             class="input input withLabel multiLine"
             id="input.checkout-comments"
             name="comments"
           />
-        </ui_view>
-      </ui_view>
-      <ui_text
+        </ui-view>
+      </ui-view>
+      <ui-text
         class="text small text hint"
       >
         user.label.comments_hint
-      </ui_text>
-    </ui_input_text>
-    <ui_text
+      </ui-text>
+    </ui-input-text>
+    <ui-text
       class="text small"
       hint=""
       id="checkout-undefined"
       label="undefined"
       name="undefined"
+      showrequired="true"
     >
       La hora de entrada es a partir de las 15:00h. La hora de salidas es hasta las 12:00h
-    </ui_text>
-    <ui_input_option
+    </ui-text>
+    <ui-input-option
       class="pressable inputOption"
       hint=""
       id="checkout-hotel_future_offers"
+      success="false"
       tabindex="0"
     >
-      <ui_checkbox
+      <ui-checkbox
         class="checkbox"
       >
         <input
@@ -6322,21 +6342,22 @@ exports[`component:<Checkout> partial:<Form> with a store 1`] = `
           type="checkbox"
           value=""
         />
-      </ui_checkbox>
-      <label
+      </ui-checkbox>
+      <ui-label
         class="text small text label"
-        for="checkout-hotel_future_offers"
+        htmlfor="checkout-hotel_future_offers"
       >
         Quiero recibir futuras ofertas y noticias de este establecimiento
-      </label>
-    </ui_input_option>
-    <ui_input_option
+      </ui-label>
+    </ui-input-option>
+    <ui-input-option
       class="pressable inputOption"
       hint=""
       id="checkout-joinClub"
+      success="false"
       tabindex="0"
     >
-      <ui_checkbox
+      <ui-checkbox
         class="checkbox"
       >
         <input
@@ -6345,21 +6366,22 @@ exports[`component:<Checkout> partial:<Form> with a store 1`] = `
           type="checkbox"
           value=""
         />
-      </ui_checkbox>
-      <label
+      </ui-checkbox>
+      <ui-label
         class="text small text label"
-        for="checkout-joinClub"
+        htmlfor="checkout-joinClub"
       >
         user.label.join_club
-      </label>
-    </ui_input_option>
-    <ui_input_option
+      </ui-label>
+    </ui-input-option>
+    <ui-input-option
       class="pressable inputOption"
       hint=""
       id="checkout-privacyPolicy"
+      success="false"
       tabindex="0"
     >
-      <ui_checkbox
+      <ui-checkbox
         class="checkbox"
       >
         <input
@@ -6368,10 +6390,10 @@ exports[`component:<Checkout> partial:<Form> with a store 1`] = `
           type="checkbox"
           value=""
         />
-      </ui_checkbox>
-      <label
+      </ui-checkbox>
+      <ui-label
         class="text small text label"
-        for="checkout-privacyPolicy"
+        htmlfor="checkout-privacyPolicy"
       >
         user.label.checkout_privacy_policy
         <span
@@ -6379,29 +6401,29 @@ exports[`component:<Checkout> partial:<Form> with a store 1`] = `
         >
            *
         </span>
-      </label>
-    </ui_input_option>
+      </ui-label>
+    </ui-input-option>
   </form>
-  <ui_view
+  <ui-view
     class="view"
   >
-    <ui_view
+    <ui-view
       class="view"
     >
-      <ui_text
+      <ui-text
         class="text bold headline-3"
       >
         payments.label.payment_methods
-      </ui_text>
-    </ui_view>
-    <ui_view
+      </ui-text>
+    </ui-view>
+    <ui-view
       class="view"
     >
-      <ui_pressable
+      <ui-pressable
         class="pressable disabled"
-        disabled=""
+        disabled="true"
       >
-        <ui_radio
+        <ui-radio
           class="radio"
         >
           <input
@@ -6411,15 +6433,15 @@ exports[`component:<Checkout> partial:<Form> with a store 1`] = `
             type="radio"
             value="CARD"
           />
-          <ui_primitive
+          <ui-primitive
             class="checkmark"
           />
-        </ui_radio>
-        <ui_text
+        </ui-radio>
+        <ui-text
           class="text bold paragraph"
         >
           payments.label.card
-        </ui_text>
+        </ui-text>
         <img
           alt="VISA"
           class="view"
@@ -6430,25 +6452,25 @@ exports[`component:<Checkout> partial:<Form> with a store 1`] = `
           class="view"
           src="https://static.mirai.com/payments/images/cards/mastercard.png"
         />
-      </ui_pressable>
-      <ui_view
+      </ui-pressable>
+      <ui-view
         class="view"
       >
-        <ui_fieldset
+        <form
           autocomplete="off"
         >
-          <ui_input_text
+          <ui-input-text
             class="view inputContainer"
           >
-            <ui_view
+            <ui-view
               class="view row inputBorder"
             >
-              <ui_view
+              <ui-view
                 class="view wide content"
               >
-                <label
+                <ui-label
                   class="text paragraph text label"
-                  for="input.checkout-card"
+                  htmlfor="input.checkout-card"
                 >
                   payments.label.card_number
                   <span
@@ -6456,7 +6478,7 @@ exports[`component:<Checkout> partial:<Form> with a store 1`] = `
                   >
                      *
                   </span>
-                </label>
+                </ui-label>
                 <input
                   class="input input withLabel"
                   id="input.checkout-card"
@@ -6467,21 +6489,21 @@ exports[`component:<Checkout> partial:<Form> with a store 1`] = `
                   type="text"
                   value=""
                 />
-              </ui_view>
-            </ui_view>
-          </ui_input_text>
-          <ui_input_text
+              </ui-view>
+            </ui-view>
+          </ui-input-text>
+          <ui-input-text
             class="view inputContainer"
           >
-            <ui_view
+            <ui-view
               class="view row inputBorder"
             >
-              <ui_view
+              <ui-view
                 class="view wide content"
               >
-                <label
+                <ui-label
                   class="text paragraph text label"
-                  for="input.checkout-name"
+                  htmlfor="input.checkout-name"
                 >
                   payments.label.card_name
                   <span
@@ -6489,7 +6511,7 @@ exports[`component:<Checkout> partial:<Form> with a store 1`] = `
                   >
                      *
                   </span>
-                </label>
+                </ui-label>
                 <input
                   class="input input withLabel"
                   id="input.checkout-name"
@@ -6500,21 +6522,21 @@ exports[`component:<Checkout> partial:<Form> with a store 1`] = `
                   type="text"
                   value=""
                 />
-              </ui_view>
-            </ui_view>
-          </ui_input_text>
-          <ui_input_date
+              </ui-view>
+            </ui-view>
+          </ui-input-text>
+          <ui-input-text
             class="view inputContainer"
           >
-            <ui_view
+            <ui-view
               class="view row inputBorder"
             >
-              <ui_view
+              <ui-view
                 class="view wide content"
               >
-                <label
+                <ui-label
                   class="text paragraph text label"
-                  for="input.checkout-expire"
+                  htmlfor="input.checkout-expire"
                 >
                   payments.label.expiration
                   <span
@@ -6522,7 +6544,7 @@ exports[`component:<Checkout> partial:<Form> with a store 1`] = `
                   >
                      *
                   </span>
-                </label>
+                </ui-label>
                 <input
                   class="input input withLabel"
                   id="input.checkout-expire"
@@ -6533,20 +6555,21 @@ exports[`component:<Checkout> partial:<Form> with a store 1`] = `
                   type="inputDate"
                   value=""
                 />
-              </ui_view>
-            </ui_view>
-          </ui_input_date>
-        </ui_fieldset>
-      </ui_view>
-    </ui_view>
-    <ui_view
+              </ui-view>
+            </ui-view>
+          </ui-input-text>
+        </form>
+      </ui-view>
+    </ui-view>
+    <ui-view
       class="view"
     >
-      <ui_pressable
+      <ui-pressable
         class="pressable"
+        disabled="false"
         tabindex="0"
       >
-        <ui_radio
+        <ui-radio
           class="radio"
         >
           <input
@@ -6555,39 +6578,39 @@ exports[`component:<Checkout> partial:<Form> with a store 1`] = `
             type="radio"
             value="AMAZON_PAY"
           />
-          <ui_primitive
+          <ui-primitive
             class="checkmark"
           />
-        </ui_radio>
-        <ui_text
+        </ui-radio>
+        <ui-text
           class="text bold paragraph"
         >
           payments.label.amazon
-        </ui_text>
+        </ui-text>
         <img
           alt="AMAZON PAY"
           class="view"
           src="https://static.mirai.com/payments/images/amazonpay.png"
         />
-      </ui_pressable>
-    </ui_view>
-  </ui_view>
-  <ui_modal_overflow
+      </ui-pressable>
+    </ui-view>
+  </ui-view>
+  <ui-modal-overflow
     class="pressable container overflow"
     style="height: 768px;"
     tabindex="0"
   >
-    <ui_view
+    <ui-modal
       class="view fit modal"
     >
-      <ui_view
+      <ui-view
         class="view row header hideBack"
       >
         <button
           class="pressable button small squared transparent button"
           tabindex="0"
         >
-          <ui_icon
+          <ui-icon
             class="icon headline-3 icon"
           >
             <svg
@@ -6607,84 +6630,85 @@ exports[`component:<Checkout> partial:<Form> with a store 1`] = `
                 d="M19 6.41 17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12 19 6.41z"
               />
             </svg>
-          </ui_icon>
+          </ui-icon>
         </button>
-      </ui_view>
-      <ui_scrollview
+      </ui-view>
+      <ui-scrollview
         class="scrollview vertical"
+        vertical="true"
       >
-        <ui_view
+        <ui-view
           class="view"
         >
-          <ui_view
+          <ui-view
             class="view"
           >
-            <ui_text
+            <ui-text
               class="text bold small"
             >
               common.label.payment_terms
-            </ui_text>
-            <ui_text
+            </ui-text>
+            <ui-text
               class="text small"
             >
               Prepago de 100%: Tarjeta de crédito o Amazon Pay
-            </ui_text>
-          </ui_view>
-          <ui_view
+            </ui-text>
+          </ui-view>
+          <ui-view
             class="view"
           >
-            <ui_text
+            <ui-text
               class="text bold small"
             >
               common.label.cancellation_policy
-            </ui_text>
-            <ui_text
+            </ui-text>
+            <ui-text
               class="text small"
             >
               Para que la reserva quede confirmada, es necesario el cobro por anticipado del 100% de toda la estancia reservada. Recibirá un cargo en su tarjeta por dicho importe. Sólo entonces su confirmación tendrá validez. El importe no será devuelto bajo ninguna circunstancia.
-            </ui_text>
-          </ui_view>
-          <ui_view
+            </ui-text>
+          </ui-view>
+          <ui-view
             class="view"
           >
-            <ui_text
+            <ui-text
               class="text bold small"
             >
               common.label.others_terms
-            </ui_text>
-            <ui_text
+            </ui-text>
+            <ui-text
               class="text small"
             >
-              <ui_text
+              <ui-text
                 class="text small wide"
               >
                 Check- in a partir de las 15.00h. 
-              </ui_text>
-              <ui_text
+              </ui-text>
+              <ui-text
                 class="text small wide"
               >
                 Check - out hasta las 12.00h. 
-              </ui_text>
-              <ui_text
+              </ui-text>
+              <ui-text
                 class="text small wide"
               >
                 Los niños de 3 a 12 años podrán acceder a las instalaciones dedicadas a su uso y disfrute.
-              </ui_text>
-              <ui_text
+              </ui-text>
+              <ui-text
                 class="text small wide"
               >
                 En caso de alojarse con bebés, éstos no incluyen régimen alguno.
-              </ui_text>
-              <ui_text
+              </ui-text>
+              <ui-text
                 class="text small wide"
               >
                 Acceso spa infantil para bebés 8.50€ al día.
-              </ui_text>
-            </ui_text>
-          </ui_view>
-        </ui_view>
-      </ui_scrollview>
-    </ui_view>
-  </ui_modal_overflow>
+              </ui-text>
+            </ui-text>
+          </ui-view>
+        </ui-view>
+      </ui-scrollview>
+    </ui-modal>
+  </ui-modal-overflow>
 </DocumentFragment>
 `;