@mirai/core 0.3.356 → 0.3.357

package/build/components/__shared__/Payment/components/Card/__tests__/__snapshots__/Card.test.js.snap

@@ -2,21 +2,21 @@
 
 exports[`component:<Card> inherit:className 1`] = `
 <DocumentFragment>
-  <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
@@ -24,7 +24,7 @@ exports[`component:<Card> inherit:className 1`] = `
             >
                *
             </span>
-          </label>
+          </ui-label>
           <input
             class="input input withLabel"
             id="input.checkout-card"
@@ -35,21 +35,21 @@ exports[`component:<Card> 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
@@ -57,7 +57,7 @@ exports[`component:<Card> inherit:className 1`] = `
             >
                *
             </span>
-          </label>
+          </ui-label>
           <input
             class="input input withLabel"
             id="input.checkout-name"
@@ -68,21 +68,21 @@ exports[`component:<Card> 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
@@ -90,7 +90,7 @@ exports[`component:<Card> inherit:className 1`] = `
             >
                *
             </span>
-          </label>
+          </ui-label>
           <input
             class="input input withLabel"
             id="input.checkout-expire"
@@ -101,21 +101,21 @@ exports[`component:<Card> inherit:className 1`] = `
             type="inputDate"
             value=""
           />
-        </ui_view>
-      </ui_view>
-    </ui_input_date>
-    <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-CVV"
+            htmlfor="input.checkout-CVV"
           >
             payments.label.cvv
             <span
@@ -123,7 +123,7 @@ exports[`component:<Card> inherit:className 1`] = `
             >
                *
             </span>
-          </label>
+          </ui-label>
           <input
             class="input input withLabel"
             id="input.checkout-CVV"
@@ -134,30 +134,30 @@ exports[`component:<Card> inherit:className 1`] = `
             type="text"
             value=""
           />
-        </ui_view>
-      </ui_view>
-    </ui_input_text>
-  </ui_fieldset>
+        </ui-view>
+      </ui-view>
+    </ui-input-text>
+  </form>
 </DocumentFragment>
 `;
 
 exports[`component:<Card> prop:error 1`] = `
 <DocumentFragment>
-  <ui_fieldset
+  <form
     autocomplete="off"
   >
-    <ui_input_text
+    <ui-input-text
       class="view inputContainer"
     >
-      <ui_view
+      <ui-view
         class="view row inputBorder error"
       >
-        <ui_view
+        <ui-view
           class="view wide content"
         >
-          <label
+          <ui-label
             class="text paragraph text label error withValue"
-            for="input.checkout-card"
+            htmlfor="input.checkout-card"
           >
             payments.label.card_number
             <span
@@ -165,7 +165,7 @@ exports[`component:<Card> prop:error 1`] = `
             >
                *
             </span>
-          </label>
+          </ui-label>
           <input
             class="input input withLabel"
             id="input.checkout-card"
@@ -176,8 +176,8 @@ exports[`component:<Card> prop:error 1`] = `
             type="text"
             value=""
           />
-        </ui_view>
-        <ui_icon
+        </ui-view>
+        <ui-icon
           class="icon headline-3 icon error"
         >
           <svg
@@ -197,26 +197,26 @@ exports[`component:<Card> 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_text
+        </ui-icon>
+      </ui-view>
+      <ui-text
         class="text small text hint error"
       >
         Invalid card
-      </ui_text>
-    </ui_input_text>
-    <ui_input_text
+      </ui-text>
+    </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
@@ -224,7 +224,7 @@ exports[`component:<Card> prop:error 1`] = `
             >
                *
             </span>
-          </label>
+          </ui-label>
           <input
             class="input input withLabel"
             id="input.checkout-name"
@@ -235,21 +235,21 @@ exports[`component:<Card> prop:error 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
@@ -257,7 +257,7 @@ exports[`component:<Card> prop:error 1`] = `
             >
                *
             </span>
-          </label>
+          </ui-label>
           <input
             class="input input withLabel"
             id="input.checkout-expire"
@@ -268,21 +268,21 @@ exports[`component:<Card> prop:error 1`] = `
             type="inputDate"
             value=""
           />
-        </ui_view>
-      </ui_view>
-    </ui_input_date>
-    <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-CVV"
+            htmlfor="input.checkout-CVV"
           >
             payments.label.cvv
             <span
@@ -290,7 +290,7 @@ exports[`component:<Card> prop:error 1`] = `
             >
                *
             </span>
-          </label>
+          </ui-label>
           <input
             class="input input withLabel"
             id="input.checkout-CVV"
@@ -301,31 +301,31 @@ exports[`component:<Card> prop:error 1`] = `
             type="text"
             value=""
           />
-        </ui_view>
-      </ui_view>
-    </ui_input_text>
-  </ui_fieldset>
+        </ui-view>
+      </ui-view>
+    </ui-input-text>
+  </form>
 </DocumentFragment>
 `;
 
 exports[`component:<Card> prop:showCVV 1`] = `
 <DocumentFragment>
-  <ui_fieldset
+  <form
     autocomplete="off"
     data-testid="showCVV"
   >
-    <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
@@ -333,7 +333,7 @@ exports[`component:<Card> prop:showCVV 1`] = `
             >
                *
             </span>
-          </label>
+          </ui-label>
           <input
             class="input input withLabel"
             data-testid="showCVV-card"
@@ -345,21 +345,21 @@ exports[`component:<Card> prop:showCVV 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
@@ -367,7 +367,7 @@ exports[`component:<Card> prop:showCVV 1`] = `
             >
                *
             </span>
-          </label>
+          </ui-label>
           <input
             class="input input withLabel"
             data-testid="showCVV-name"
@@ -379,21 +379,21 @@ exports[`component:<Card> prop:showCVV 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
@@ -401,7 +401,7 @@ exports[`component:<Card> prop:showCVV 1`] = `
             >
                *
             </span>
-          </label>
+          </ui-label>
           <input
             class="input input withLabel"
             data-testid="showCVV-expire"
@@ -413,30 +413,30 @@ exports[`component:<Card> prop:showCVV 1`] = `
             type="inputDate"
             value=""
           />
-        </ui_view>
-      </ui_view>
-    </ui_input_date>
-  </ui_fieldset>
+        </ui-view>
+      </ui-view>
+    </ui-input-text>
+  </form>
 </DocumentFragment>
 `;
 
 exports[`component:<Card> prop:showErrors 1`] = `
 <DocumentFragment>
-  <ui_fieldset
+  <form
     autocomplete="off"
   >
-    <ui_input_text
+    <ui-input-text
       class="view inputContainer"
     >
-      <ui_view
+      <ui-view
         class="view row inputBorder error"
       >
-        <ui_view
+        <ui-view
           class="view wide content"
         >
-          <label
+          <ui-label
             class="text paragraph text label error withValue"
-            for="input.checkout-card"
+            htmlfor="input.checkout-card"
           >
             payments.label.card_number
             <span
@@ -444,7 +444,7 @@ exports[`component:<Card> prop:showErrors 1`] = `
             >
                *
             </span>
-          </label>
+          </ui-label>
           <input
             class="input input withLabel"
             id="input.checkout-card"
@@ -455,8 +455,8 @@ exports[`component:<Card> prop:showErrors 1`] = `
             type="text"
             value=""
           />
-        </ui_view>
-        <ui_icon
+        </ui-view>
+        <ui-icon
           class="icon headline-3 icon error"
         >
           <svg
@@ -476,21 +476,21 @@ exports[`component:<Card> prop:showErrors 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_text>
-    <ui_input_text
+        </ui-icon>
+      </ui-view>
+    </ui-input-text>
+    <ui-input-text
       class="view inputContainer"
     >
-      <ui_view
+      <ui-view
         class="view row inputBorder error"
       >
-        <ui_view
+        <ui-view
           class="view wide content"
         >
-          <label
+          <ui-label
             class="text paragraph text label error withValue"
-            for="input.checkout-name"
+            htmlfor="input.checkout-name"
           >
             payments.label.card_name
             <span
@@ -498,7 +498,7 @@ exports[`component:<Card> prop:showErrors 1`] = `
             >
                *
             </span>
-          </label>
+          </ui-label>
           <input
             class="input input withLabel"
             id="input.checkout-name"
@@ -509,8 +509,8 @@ exports[`component:<Card> prop:showErrors 1`] = `
             type="text"
             value=""
           />
-        </ui_view>
-        <ui_icon
+        </ui-view>
+        <ui-icon
           class="icon headline-3 icon error"
         >
           <svg
@@ -530,21 +530,21 @@ exports[`component:<Card> prop:showErrors 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_text>
-    <ui_input_date
+        </ui-icon>
+      </ui-view>
+    </ui-input-text>
+    <ui-input-text
       class="view inputContainer"
     >
-      <ui_view
+      <ui-view
         class="view row inputBorder error"
       >
-        <ui_view
+        <ui-view
           class="view wide content"
         >
-          <label
+          <ui-label
             class="text paragraph text label error withValue"
-            for="input.checkout-expire"
+            htmlfor="input.checkout-expire"
           >
             payments.label.expiration
             <span
@@ -552,7 +552,7 @@ exports[`component:<Card> prop:showErrors 1`] = `
             >
                *
             </span>
-          </label>
+          </ui-label>
           <input
             class="input input withLabel"
             id="input.checkout-expire"
@@ -563,8 +563,8 @@ exports[`component:<Card> prop:showErrors 1`] = `
             type="inputDate"
             value=""
           />
-        </ui_view>
-        <ui_icon
+        </ui-view>
+        <ui-icon
           class="icon headline-3 icon error"
         >
           <svg
@@ -584,21 +584,21 @@ exports[`component:<Card> prop:showErrors 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_date>
-    <ui_input_text
+        </ui-icon>
+      </ui-view>
+    </ui-input-text>
+    <ui-input-text
       class="view inputContainer"
     >
-      <ui_view
+      <ui-view
         class="view row inputBorder error"
       >
-        <ui_view
+        <ui-view
           class="view wide content"
         >
-          <label
+          <ui-label
             class="text paragraph text label error withValue"
-            for="input.checkout-CVV"
+            htmlfor="input.checkout-CVV"
           >
             payments.label.cvv
             <span
@@ -606,7 +606,7 @@ exports[`component:<Card> prop:showErrors 1`] = `
             >
                *
             </span>
-          </label>
+          </ui-label>
           <input
             class="input input withLabel"
             id="input.checkout-CVV"
@@ -617,8 +617,8 @@ exports[`component:<Card> prop:showErrors 1`] = `
             type="text"
             value=""
           />
-        </ui_view>
-        <ui_icon
+        </ui-view>
+        <ui-icon
           class="icon headline-3 icon error"
         >
           <svg
@@ -638,30 +638,30 @@ exports[`component:<Card> prop:showErrors 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_text>
-  </ui_fieldset>
+        </ui-icon>
+      </ui-view>
+    </ui-input-text>
+  </form>
 </DocumentFragment>
 `;
 
 exports[`component:<Card> renders 1`] = `
 <DocumentFragment>
-  <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
@@ -669,7 +669,7 @@ exports[`component:<Card> renders 1`] = `
             >
                *
             </span>
-          </label>
+          </ui-label>
           <input
             class="input input withLabel"
             id="input.checkout-card"
@@ -680,21 +680,21 @@ exports[`component:<Card> 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
@@ -702,7 +702,7 @@ exports[`component:<Card> renders 1`] = `
             >
                *
             </span>
-          </label>
+          </ui-label>
           <input
             class="input input withLabel"
             id="input.checkout-name"
@@ -713,21 +713,21 @@ exports[`component:<Card> 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
@@ -735,7 +735,7 @@ exports[`component:<Card> renders 1`] = `
             >
                *
             </span>
-          </label>
+          </ui-label>
           <input
             class="input input withLabel"
             id="input.checkout-expire"
@@ -746,21 +746,21 @@ exports[`component:<Card> renders 1`] = `
             type="inputDate"
             value=""
           />
-        </ui_view>
-      </ui_view>
-    </ui_input_date>
-    <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-CVV"
+            htmlfor="input.checkout-CVV"
           >
             payments.label.cvv
             <span
@@ -768,7 +768,7 @@ exports[`component:<Card> renders 1`] = `
             >
                *
             </span>
-          </label>
+          </ui-label>
           <input
             class="input input withLabel"
             id="input.checkout-CVV"
@@ -779,31 +779,31 @@ exports[`component:<Card> renders 1`] = `
             type="text"
             value=""
           />
-        </ui_view>
-      </ui_view>
-    </ui_input_text>
-  </ui_fieldset>
+        </ui-view>
+      </ui-view>
+    </ui-input-text>
+  </form>
 </DocumentFragment>
 `;
 
 exports[`component:<Card> testID 1`] = `
 <DocumentFragment>
-  <ui_fieldset
+  <form
     autocomplete="off"
     data-testid="mirai"
   >
-    <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
@@ -811,7 +811,7 @@ exports[`component:<Card> testID 1`] = `
             >
                *
             </span>
-          </label>
+          </ui-label>
           <input
             class="input input withLabel"
             data-testid="mirai-card"
@@ -823,21 +823,21 @@ exports[`component:<Card> 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
@@ -845,7 +845,7 @@ exports[`component:<Card> testID 1`] = `
             >
                *
             </span>
-          </label>
+          </ui-label>
           <input
             class="input input withLabel"
             data-testid="mirai-name"
@@ -857,21 +857,21 @@ exports[`component:<Card> 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
@@ -879,7 +879,7 @@ exports[`component:<Card> testID 1`] = `
             >
                *
             </span>
-          </label>
+          </ui-label>
           <input
             class="input input withLabel"
             data-testid="mirai-expire"
@@ -891,21 +891,21 @@ exports[`component:<Card> testID 1`] = `
             type="inputDate"
             value=""
           />
-        </ui_view>
-      </ui_view>
-    </ui_input_date>
-    <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-CVV"
+            htmlfor="input.checkout-CVV"
           >
             payments.label.cvv
             <span
@@ -913,7 +913,7 @@ exports[`component:<Card> testID 1`] = `
             >
                *
             </span>
-          </label>
+          </ui-label>
           <input
             class="input input withLabel"
             data-testid="mirai-CVV"
@@ -925,9 +925,9 @@ exports[`component:<Card> testID 1`] = `
             type="text"
             value=""
           />
-        </ui_view>
-      </ui_view>
-    </ui_input_text>
-  </ui_fieldset>
+        </ui-view>
+      </ui-view>
+    </ui-input-text>
+  </form>
 </DocumentFragment>
 `;