@mirai/core 0.3.336 → 0.3.338

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

@@ -2,28 +2,28 @@
 
 exports[`component:<Checkout> Test A/B variant A 1`] = `
 <DocumentFragment>
-  <div
+  <ui_view
     class="view wide"
   >
-    <div
+    <ui_view
       class="view row wide"
     >
-      <div
+      <ui_view
         class="view row"
       />
-      <div
+      <ui_view
         class="view row"
       >
-        <span
+        <ui_tooltip
           class="container"
         >
-          <div
+          <ui_view
             class="view row dispatcher"
           >
-            <div
+            <ui_view
               class="view row"
             >
-              <span
+              <ui_icon
                 class="icon headline-2"
               >
                 <svg
@@ -43,11 +43,11 @@ exports[`component:<Checkout> Test A/B variant A 1`] = `
                     d="M11.99 2C6.47 2 2 6.48 2 12s4.47 10 9.99 10C17.52 22 22 17.52 22 12S17.52 2 11.99 2zm6.93 6h-2.95a15.65 15.65 0 0 0-1.38-3.56A8.03 8.03 0 0 1 18.92 8zM12 4.04c.83 1.2 1.48 2.53 1.91 3.96h-3.82c.43-1.43 1.08-2.76 1.91-3.96zM4.26 14C4.1 13.36 4 12.69 4 12s.1-1.36.26-2h3.38c-.08.66-.14 1.32-.14 2s.06 1.34.14 2H4.26zm.82 2h2.95c.32 1.25.78 2.45 1.38 3.56A7.987 7.987 0 0 1 5.08 16zm2.95-8H5.08a7.987 7.987 0 0 1 4.33-3.56A15.65 15.65 0 0 0 8.03 8zM12 19.96c-.83-1.2-1.48-2.53-1.91-3.96h3.82c-.43 1.43-1.08 2.76-1.91 3.96zM14.34 14H9.66c-.09-.66-.16-1.32-.16-2s.07-1.35.16-2h4.68c.09.65.16 1.32.16 2s-.07 1.34-.16 2zm.25 5.56c.6-1.11 1.06-2.31 1.38-3.56h2.95a8.03 8.03 0 0 1-4.33 3.56zM16.36 14c.08-.66.14-1.32.14-2s-.06-1.34-.14-2h3.38c.16.64.26 1.31.26 2s-.1 1.36-.26 2h-3.38z"
                   />
                 </svg>
-              </span>
-              <span
+              </ui_icon>
+              <ui_text
                 class="text bold action"
               />
-            </div>
+            </ui_view>
             <select
               class="select"
               name="locale"
@@ -163,127 +163,129 @@ exports[`component:<Checkout> Test A/B variant A 1`] = `
                 Euskara
               </option>
             </select>
-          </div>
-        </span>
-      </div>
-    </div>
-  </div>
-  <div
+          </ui_view>
+        </ui_tooltip>
+      </ui_view>
+    </ui_view>
+  </ui_view>
+  <ui_view
     class="view"
   >
-    <div
+    <ui_progress
       class="view progress visible"
     >
-      <div
+      <ui_view
         class="view value indeterminate"
       />
-    </div>
-    <div
+    </ui_progress>
+    <ui_view
       class="view wide"
       style="align-items: start;"
     >
-      <div
+      <ui_view
         class="view row wide"
         style="align-items: start; align-self: center; gap: 1rem; max-width: var(--mirai-ui-breakpoint-content);"
       >
-        <div
+        <ui_view
           class="view"
           style="flex: 1; gap: 1rem;"
         >
-          <div
+          <ui_view
             class="view"
             style="height: 32rem;"
           />
-          <div
+          <ui_view
             class="view"
             style="height: 16rem;"
           />
-          <div
+          <ui_view
             class="view"
             style="height: 16rem;"
           />
-          <div
+          <ui_view
             class="view"
             style="height: 12rem;"
           />
-        </div>
-        <div
+        </ui_view>
+        <ui_view
           class="view"
           style="flex: 1; max-width: calc(var(--mirai-ui-breakpoint-S) - var(--mirai-ui-space-M) * 2); height: 36rem;"
         />
-      </div>
-    </div>
-  </div>
-  <div
+      </ui_view>
+    </ui_view>
+  </ui_view>
+  <ui_view
     class="view row"
   >
-    <div
+    <ui_view
       class="view row"
     >
-      <div
+      <ui_view
         class="view row"
       >
-        <span
+        <ui_text
           class="text light small"
         >
           © 2024
-          <button
+          <ui_action
             class="pressable action small"
+            tabindex="0"
           />
           .
-        </span>
-        <span
+        </ui_text>
+        <ui_text
           class="text light small"
         >
           common.label.all
-          <span
+          <ui_text
             style="text-decoration: underline;"
           >
             rights
-          </span>
+          </ui_text>
           reserved
-        </span>
-      </div>
+        </ui_text>
+      </ui_view>
       <a
         class="pressable action small"
         href="https://www.mirai.com/"
+        tabindex="0"
       >
         Powered by 
-        <span
+        <ui_text
           class="text bold light paragraph"
         >
           mirai
-        </span>
+        </ui_text>
       </a>
-    </div>
-  </div>
+    </ui_view>
+  </ui_view>
 </DocumentFragment>
 `;
 
 exports[`component:<Checkout> Test A/B variant B 1`] = `
 <DocumentFragment>
-  <div
+  <ui_view
     class="view wide"
   >
-    <div
+    <ui_view
       class="view row wide"
     >
-      <div
+      <ui_view
         class="view row"
       />
-      <div
+      <ui_view
         class="view row"
       >
-        <span
+        <ui_tooltip
           class="container"
         >
-          <div
+          <ui_view
             class="view row dispatcher"
           >
-            <div
+            <ui_view
               class="view row"
             >
-              <span
+              <ui_icon
                 class="icon headline-2"
               >
                 <svg
@@ -303,11 +305,11 @@ exports[`component:<Checkout> Test A/B variant B 1`] = `
                     d="M11.99 2C6.47 2 2 6.48 2 12s4.47 10 9.99 10C17.52 22 22 17.52 22 12S17.52 2 11.99 2zm6.93 6h-2.95a15.65 15.65 0 0 0-1.38-3.56A8.03 8.03 0 0 1 18.92 8zM12 4.04c.83 1.2 1.48 2.53 1.91 3.96h-3.82c.43-1.43 1.08-2.76 1.91-3.96zM4.26 14C4.1 13.36 4 12.69 4 12s.1-1.36.26-2h3.38c-.08.66-.14 1.32-.14 2s.06 1.34.14 2H4.26zm.82 2h2.95c.32 1.25.78 2.45 1.38 3.56A7.987 7.987 0 0 1 5.08 16zm2.95-8H5.08a7.987 7.987 0 0 1 4.33-3.56A15.65 15.65 0 0 0 8.03 8zM12 19.96c-.83-1.2-1.48-2.53-1.91-3.96h3.82c-.43 1.43-1.08 2.76-1.91 3.96zM14.34 14H9.66c-.09-.66-.16-1.32-.16-2s.07-1.35.16-2h4.68c.09.65.16 1.32.16 2s-.07 1.34-.16 2zm.25 5.56c.6-1.11 1.06-2.31 1.38-3.56h2.95a8.03 8.03 0 0 1-4.33 3.56zM16.36 14c.08-.66.14-1.32.14-2s-.06-1.34-.14-2h3.38c.16.64.26 1.31.26 2s-.1 1.36-.26 2h-3.38z"
                   />
                 </svg>
-              </span>
-              <span
+              </ui_icon>
+              <ui_text
                 class="text bold action"
               />
-            </div>
+            </ui_view>
             <select
               class="select"
               name="locale"
@@ -423,127 +425,129 @@ exports[`component:<Checkout> Test A/B variant B 1`] = `
                 Euskara
               </option>
             </select>
-          </div>
-        </span>
-      </div>
-    </div>
-  </div>
-  <div
+          </ui_view>
+        </ui_tooltip>
+      </ui_view>
+    </ui_view>
+  </ui_view>
+  <ui_view
     class="view"
   >
-    <div
+    <ui_progress
       class="view progress visible"
     >
-      <div
+      <ui_view
         class="view value indeterminate"
       />
-    </div>
-    <div
+    </ui_progress>
+    <ui_view
       class="view wide"
       style="align-items: start;"
     >
-      <div
+      <ui_view
         class="view row wide"
         style="align-items: start; align-self: center; gap: 1rem; max-width: var(--mirai-ui-breakpoint-content);"
       >
-        <div
+        <ui_view
           class="view"
           style="flex: 1; gap: 1rem;"
         >
-          <div
+          <ui_view
             class="view"
             style="height: 32rem;"
           />
-          <div
+          <ui_view
             class="view"
             style="height: 16rem;"
           />
-          <div
+          <ui_view
             class="view"
             style="height: 16rem;"
           />
-          <div
+          <ui_view
             class="view"
             style="height: 12rem;"
           />
-        </div>
-        <div
+        </ui_view>
+        <ui_view
           class="view"
           style="flex: 1; max-width: calc(var(--mirai-ui-breakpoint-S) - var(--mirai-ui-space-M) * 2); height: 36rem;"
         />
-      </div>
-    </div>
-  </div>
-  <div
+      </ui_view>
+    </ui_view>
+  </ui_view>
+  <ui_view
     class="view row"
   >
-    <div
+    <ui_view
       class="view row"
     >
-      <div
+      <ui_view
         class="view row"
       >
-        <span
+        <ui_text
           class="text light small"
         >
           © 2024
-          <button
+          <ui_action
             class="pressable action small"
+            tabindex="0"
           />
           .
-        </span>
-        <span
+        </ui_text>
+        <ui_text
           class="text light small"
         >
           common.label.all
-          <span
+          <ui_text
             style="text-decoration: underline;"
           >
             rights
-          </span>
+          </ui_text>
           reserved
-        </span>
-      </div>
+        </ui_text>
+      </ui_view>
       <a
         class="pressable action small"
         href="https://www.mirai.com/"
+        tabindex="0"
       >
         Powered by 
-        <span
+        <ui_text
           class="text bold light paragraph"
         >
           mirai
-        </span>
+        </ui_text>
       </a>
-    </div>
-  </div>
+    </ui_view>
+  </ui_view>
 </DocumentFragment>
 `;
 
 exports[`component:<Checkout> inherit:className 1`] = `
 <DocumentFragment>
-  <div
+  <ui_view
     class="view wide"
   >
-    <div
+    <ui_view
       class="view row wide"
     >
-      <div
+      <ui_view
         class="view row"
       />
-      <div
+      <ui_view
         class="view row"
       >
-        <span
+        <ui_tooltip
           class="container"
         >
-          <div
+          <ui_view
             class="view row dispatcher"
           >
-            <div
+            <ui_view
               class="view row"
             >
-              <span
+              <ui_icon
                 class="icon headline-2"
               >
                 <svg
@@ -563,11 +567,11 @@ exports[`component:<Checkout> inherit:className 1`] = `
                     d="M11.99 2C6.47 2 2 6.48 2 12s4.47 10 9.99 10C17.52 22 22 17.52 22 12S17.52 2 11.99 2zm6.93 6h-2.95a15.65 15.65 0 0 0-1.38-3.56A8.03 8.03 0 0 1 18.92 8zM12 4.04c.83 1.2 1.48 2.53 1.91 3.96h-3.82c.43-1.43 1.08-2.76 1.91-3.96zM4.26 14C4.1 13.36 4 12.69 4 12s.1-1.36.26-2h3.38c-.08.66-.14 1.32-.14 2s.06 1.34.14 2H4.26zm.82 2h2.95c.32 1.25.78 2.45 1.38 3.56A7.987 7.987 0 0 1 5.08 16zm2.95-8H5.08a7.987 7.987 0 0 1 4.33-3.56A15.65 15.65 0 0 0 8.03 8zM12 19.96c-.83-1.2-1.48-2.53-1.91-3.96h3.82c-.43 1.43-1.08 2.76-1.91 3.96zM14.34 14H9.66c-.09-.66-.16-1.32-.16-2s.07-1.35.16-2h4.68c.09.65.16 1.32.16 2s-.07 1.34-.16 2zm.25 5.56c.6-1.11 1.06-2.31 1.38-3.56h2.95a8.03 8.03 0 0 1-4.33 3.56zM16.36 14c.08-.66.14-1.32.14-2s-.06-1.34-.14-2h3.38c.16.64.26 1.31.26 2s-.1 1.36-.26 2h-3.38z"
                   />
                 </svg>
-              </span>
-              <span
+              </ui_icon>
+              <ui_text
                 class="text bold action"
               />
-            </div>
+            </ui_view>
             <select
               class="select"
               name="locale"
@@ -683,127 +687,129 @@ exports[`component:<Checkout> inherit:className 1`] = `
                 Euskara
               </option>
             </select>
-          </div>
-        </span>
-      </div>
-    </div>
-  </div>
-  <div
+          </ui_view>
+        </ui_tooltip>
+      </ui_view>
+    </ui_view>
+  </ui_view>
+  <ui_view
     class="view mirai"
   >
-    <div
+    <ui_progress
       class="view progress visible"
     >
-      <div
+      <ui_view
         class="view value indeterminate"
       />
-    </div>
-    <div
+    </ui_progress>
+    <ui_view
       class="view wide"
       style="align-items: start;"
     >
-      <div
+      <ui_view
         class="view row wide"
         style="align-items: start; align-self: center; gap: 1rem; max-width: var(--mirai-ui-breakpoint-content);"
       >
-        <div
+        <ui_view
           class="view"
           style="flex: 1; gap: 1rem;"
         >
-          <div
+          <ui_view
             class="view"
             style="height: 32rem;"
           />
-          <div
+          <ui_view
             class="view"
             style="height: 16rem;"
           />
-          <div
+          <ui_view
             class="view"
             style="height: 16rem;"
           />
-          <div
+          <ui_view
             class="view"
             style="height: 12rem;"
           />
-        </div>
-        <div
+        </ui_view>
+        <ui_view
           class="view"
           style="flex: 1; max-width: calc(var(--mirai-ui-breakpoint-S) - var(--mirai-ui-space-M) * 2); height: 36rem;"
         />
-      </div>
-    </div>
-  </div>
-  <div
+      </ui_view>
+    </ui_view>
+  </ui_view>
+  <ui_view
     class="view row"
   >
-    <div
+    <ui_view
       class="view row"
     >
-      <div
+      <ui_view
         class="view row"
       >
-        <span
+        <ui_text
           class="text light small"
         >
           © 2024
-          <button
+          <ui_action
             class="pressable action small"
+            tabindex="0"
           />
           .
-        </span>
-        <span
+        </ui_text>
+        <ui_text
           class="text light small"
         >
           common.label.all
-          <span
+          <ui_text
             style="text-decoration: underline;"
           >
             rights
-          </span>
+          </ui_text>
           reserved
-        </span>
-      </div>
+        </ui_text>
+      </ui_view>
       <a
         class="pressable action small"
         href="https://www.mirai.com/"
+        tabindex="0"
       >
         Powered by 
-        <span
+        <ui_text
           class="text bold light paragraph"
         >
           mirai
-        </span>
+        </ui_text>
       </a>
-    </div>
-  </div>
+    </ui_view>
+  </ui_view>
 </DocumentFragment>
 `;
 
 exports[`component:<Checkout> prop:session (false) 1`] = `
 <DocumentFragment>
-  <div
+  <ui_view
     class="view wide"
   >
-    <div
+    <ui_view
       class="view row wide"
     >
-      <div
+      <ui_view
         class="view row"
       />
-      <div
+      <ui_view
         class="view row"
       >
-        <span
+        <ui_tooltip
           class="container"
         >
-          <div
+          <ui_view
             class="view row dispatcher"
           >
-            <div
+            <ui_view
               class="view row"
             >
-              <span
+              <ui_icon
                 class="icon headline-2"
               >
                 <svg
@@ -823,11 +829,11 @@ exports[`component:<Checkout> prop:session (false) 1`] = `
                     d="M11.99 2C6.47 2 2 6.48 2 12s4.47 10 9.99 10C17.52 22 22 17.52 22 12S17.52 2 11.99 2zm6.93 6h-2.95a15.65 15.65 0 0 0-1.38-3.56A8.03 8.03 0 0 1 18.92 8zM12 4.04c.83 1.2 1.48 2.53 1.91 3.96h-3.82c.43-1.43 1.08-2.76 1.91-3.96zM4.26 14C4.1 13.36 4 12.69 4 12s.1-1.36.26-2h3.38c-.08.66-.14 1.32-.14 2s.06 1.34.14 2H4.26zm.82 2h2.95c.32 1.25.78 2.45 1.38 3.56A7.987 7.987 0 0 1 5.08 16zm2.95-8H5.08a7.987 7.987 0 0 1 4.33-3.56A15.65 15.65 0 0 0 8.03 8zM12 19.96c-.83-1.2-1.48-2.53-1.91-3.96h3.82c-.43 1.43-1.08 2.76-1.91 3.96zM14.34 14H9.66c-.09-.66-.16-1.32-.16-2s.07-1.35.16-2h4.68c.09.65.16 1.32.16 2s-.07 1.34-.16 2zm.25 5.56c.6-1.11 1.06-2.31 1.38-3.56h2.95a8.03 8.03 0 0 1-4.33 3.56zM16.36 14c.08-.66.14-1.32.14-2s-.06-1.34-.14-2h3.38c.16.64.26 1.31.26 2s-.1 1.36-.26 2h-3.38z"
                   />
                 </svg>
-              </span>
-              <span
+              </ui_icon>
+              <ui_text
                 class="text bold action"
               />
-            </div>
+            </ui_view>
             <select
               class="select"
               name="locale"
@@ -943,127 +949,129 @@ exports[`component:<Checkout> prop:session (false) 1`] = `
                 Euskara
               </option>
             </select>
-          </div>
-        </span>
-      </div>
-    </div>
-  </div>
-  <div
+          </ui_view>
+        </ui_tooltip>
+      </ui_view>
+    </ui_view>
+  </ui_view>
+  <ui_view
     class="view"
   >
-    <div
+    <ui_progress
       class="view progress visible"
     >
-      <div
+      <ui_view
         class="view value indeterminate"
       />
-    </div>
-    <div
+    </ui_progress>
+    <ui_view
       class="view wide"
       style="align-items: start;"
     >
-      <div
+      <ui_view
         class="view row wide"
         style="align-items: start; align-self: center; gap: 1rem; max-width: var(--mirai-ui-breakpoint-content);"
       >
-        <div
+        <ui_view
           class="view"
           style="flex: 1; gap: 1rem;"
         >
-          <div
+          <ui_view
             class="view"
             style="height: 32rem;"
           />
-          <div
+          <ui_view
             class="view"
             style="height: 16rem;"
           />
-          <div
+          <ui_view
             class="view"
             style="height: 16rem;"
           />
-          <div
+          <ui_view
             class="view"
             style="height: 12rem;"
           />
-        </div>
-        <div
+        </ui_view>
+        <ui_view
           class="view"
           style="flex: 1; max-width: calc(var(--mirai-ui-breakpoint-S) - var(--mirai-ui-space-M) * 2); height: 36rem;"
         />
-      </div>
-    </div>
-  </div>
-  <div
+      </ui_view>
+    </ui_view>
+  </ui_view>
+  <ui_view
     class="view row"
   >
-    <div
+    <ui_view
       class="view row"
     >
-      <div
+      <ui_view
         class="view row"
       >
-        <span
+        <ui_text
           class="text light small"
         >
           © 2024
-          <button
+          <ui_action
             class="pressable action small"
+            tabindex="0"
           />
           .
-        </span>
-        <span
+        </ui_text>
+        <ui_text
           class="text light small"
         >
           common.label.all
-          <span
+          <ui_text
             style="text-decoration: underline;"
           >
             rights
-          </span>
+          </ui_text>
           reserved
-        </span>
-      </div>
+        </ui_text>
+      </ui_view>
       <a
         class="pressable action small"
         href="https://www.mirai.com/"
+        tabindex="0"
       >
         Powered by 
-        <span
+        <ui_text
           class="text bold light paragraph"
         >
           mirai
-        </span>
+        </ui_text>
       </a>
-    </div>
-  </div>
+    </ui_view>
+  </ui_view>
 </DocumentFragment>
 `;
 
 exports[`component:<Checkout> prop:skeleton 1`] = `
 <DocumentFragment>
-  <div
+  <ui_view
     class="view wide"
   >
-    <div
+    <ui_view
       class="view row wide"
     >
-      <div
+      <ui_view
         class="view row"
       />
-      <div
+      <ui_view
         class="view row"
       >
-        <span
+        <ui_tooltip
           class="container"
         >
-          <div
+          <ui_view
             class="view row dispatcher"
           >
-            <div
+            <ui_view
               class="view row"
             >
-              <span
+              <ui_icon
                 class="icon headline-2"
               >
                 <svg
@@ -1083,11 +1091,11 @@ exports[`component:<Checkout> prop:skeleton 1`] = `
                     d="M11.99 2C6.47 2 2 6.48 2 12s4.47 10 9.99 10C17.52 22 22 17.52 22 12S17.52 2 11.99 2zm6.93 6h-2.95a15.65 15.65 0 0 0-1.38-3.56A8.03 8.03 0 0 1 18.92 8zM12 4.04c.83 1.2 1.48 2.53 1.91 3.96h-3.82c.43-1.43 1.08-2.76 1.91-3.96zM4.26 14C4.1 13.36 4 12.69 4 12s.1-1.36.26-2h3.38c-.08.66-.14 1.32-.14 2s.06 1.34.14 2H4.26zm.82 2h2.95c.32 1.25.78 2.45 1.38 3.56A7.987 7.987 0 0 1 5.08 16zm2.95-8H5.08a7.987 7.987 0 0 1 4.33-3.56A15.65 15.65 0 0 0 8.03 8zM12 19.96c-.83-1.2-1.48-2.53-1.91-3.96h3.82c-.43 1.43-1.08 2.76-1.91 3.96zM14.34 14H9.66c-.09-.66-.16-1.32-.16-2s.07-1.35.16-2h4.68c.09.65.16 1.32.16 2s-.07 1.34-.16 2zm.25 5.56c.6-1.11 1.06-2.31 1.38-3.56h2.95a8.03 8.03 0 0 1-4.33 3.56zM16.36 14c.08-.66.14-1.32.14-2s-.06-1.34-.14-2h3.38c.16.64.26 1.31.26 2s-.1 1.36-.26 2h-3.38z"
                   />
                 </svg>
-              </span>
-              <span
+              </ui_icon>
+              <ui_text
                 class="text bold action"
               />
-            </div>
+            </ui_view>
             <select
               class="select"
               name="locale"
@@ -1203,127 +1211,129 @@ exports[`component:<Checkout> prop:skeleton 1`] = `
                 Euskara
               </option>
             </select>
-          </div>
-        </span>
-      </div>
-    </div>
-  </div>
-  <div
+          </ui_view>
+        </ui_tooltip>
+      </ui_view>
+    </ui_view>
+  </ui_view>
+  <ui_view
     class="view"
   >
-    <div
+    <ui_progress
       class="view progress visible"
     >
-      <div
+      <ui_view
         class="view value indeterminate"
       />
-    </div>
-    <div
+    </ui_progress>
+    <ui_view
       class="view wide"
       style="align-items: start;"
     >
-      <div
+      <ui_view
         class="view row wide"
         style="align-items: start; align-self: center; gap: 1rem; max-width: var(--mirai-ui-breakpoint-content);"
       >
-        <div
+        <ui_view
           class="view"
           style="flex: 1; gap: 1rem;"
         >
-          <div
+          <ui_view
             class="view"
             style="height: 32rem;"
           />
-          <div
+          <ui_view
             class="view"
             style="height: 16rem;"
           />
-          <div
+          <ui_view
             class="view"
             style="height: 16rem;"
           />
-          <div
+          <ui_view
             class="view"
             style="height: 12rem;"
           />
-        </div>
-        <div
+        </ui_view>
+        <ui_view
           class="view"
           style="flex: 1; max-width: calc(var(--mirai-ui-breakpoint-S) - var(--mirai-ui-space-M) * 2); height: 36rem;"
         />
-      </div>
-    </div>
-  </div>
-  <div
+      </ui_view>
+    </ui_view>
+  </ui_view>
+  <ui_view
     class="view row"
   >
-    <div
+    <ui_view
       class="view row"
     >
-      <div
+      <ui_view
         class="view row"
       >
-        <span
+        <ui_text
           class="text light small"
         >
           © 2024
-          <button
+          <ui_action
             class="pressable action small"
+            tabindex="0"
           />
           .
-        </span>
-        <span
+        </ui_text>
+        <ui_text
           class="text light small"
         >
           common.label.all
-          <span
+          <ui_text
             style="text-decoration: underline;"
           >
             rights
-          </span>
+          </ui_text>
           reserved
-        </span>
-      </div>
+        </ui_text>
+      </ui_view>
       <a
         class="pressable action small"
         href="https://www.mirai.com/"
+        tabindex="0"
       >
         Powered by 
-        <span
+        <ui_text
           class="text bold light paragraph"
         >
           mirai
-        </span>
+        </ui_text>
       </a>
-    </div>
-  </div>
+    </ui_view>
+  </ui_view>
 </DocumentFragment>
 `;
 
 exports[`component:<Checkout> renders 1`] = `
 <DocumentFragment>
-  <div
+  <ui_view
     class="view wide"
   >
-    <div
+    <ui_view
       class="view row wide"
     >
-      <div
+      <ui_view
         class="view row"
       />
-      <div
+      <ui_view
         class="view row"
       >
-        <span
+        <ui_tooltip
           class="container"
         >
-          <div
+          <ui_view
             class="view row dispatcher"
           >
-            <div
+            <ui_view
               class="view row"
             >
-              <span
+              <ui_icon
                 class="icon headline-2"
               >
                 <svg
@@ -1343,11 +1353,11 @@ exports[`component:<Checkout> renders 1`] = `
                     d="M11.99 2C6.47 2 2 6.48 2 12s4.47 10 9.99 10C17.52 22 22 17.52 22 12S17.52 2 11.99 2zm6.93 6h-2.95a15.65 15.65 0 0 0-1.38-3.56A8.03 8.03 0 0 1 18.92 8zM12 4.04c.83 1.2 1.48 2.53 1.91 3.96h-3.82c.43-1.43 1.08-2.76 1.91-3.96zM4.26 14C4.1 13.36 4 12.69 4 12s.1-1.36.26-2h3.38c-.08.66-.14 1.32-.14 2s.06 1.34.14 2H4.26zm.82 2h2.95c.32 1.25.78 2.45 1.38 3.56A7.987 7.987 0 0 1 5.08 16zm2.95-8H5.08a7.987 7.987 0 0 1 4.33-3.56A15.65 15.65 0 0 0 8.03 8zM12 19.96c-.83-1.2-1.48-2.53-1.91-3.96h3.82c-.43 1.43-1.08 2.76-1.91 3.96zM14.34 14H9.66c-.09-.66-.16-1.32-.16-2s.07-1.35.16-2h4.68c.09.65.16 1.32.16 2s-.07 1.34-.16 2zm.25 5.56c.6-1.11 1.06-2.31 1.38-3.56h2.95a8.03 8.03 0 0 1-4.33 3.56zM16.36 14c.08-.66.14-1.32.14-2s-.06-1.34-.14-2h3.38c.16.64.26 1.31.26 2s-.1 1.36-.26 2h-3.38z"
                   />
                 </svg>
-              </span>
-              <span
+              </ui_icon>
+              <ui_text
                 class="text bold action"
               />
-            </div>
+            </ui_view>
             <select
               class="select"
               name="locale"
@@ -1463,127 +1473,129 @@ exports[`component:<Checkout> renders 1`] = `
                 Euskara
               </option>
             </select>
-          </div>
-        </span>
-      </div>
-    </div>
-  </div>
-  <div
+          </ui_view>
+        </ui_tooltip>
+      </ui_view>
+    </ui_view>
+  </ui_view>
+  <ui_view
     class="view"
   >
-    <div
+    <ui_progress
       class="view progress visible"
     >
-      <div
+      <ui_view
         class="view value indeterminate"
       />
-    </div>
-    <div
+    </ui_progress>
+    <ui_view
       class="view wide"
       style="align-items: start;"
     >
-      <div
+      <ui_view
         class="view row wide"
         style="align-items: start; align-self: center; gap: 1rem; max-width: var(--mirai-ui-breakpoint-content);"
       >
-        <div
+        <ui_view
           class="view"
           style="flex: 1; gap: 1rem;"
         >
-          <div
+          <ui_view
             class="view"
             style="height: 32rem;"
           />
-          <div
+          <ui_view
             class="view"
             style="height: 16rem;"
           />
-          <div
+          <ui_view
             class="view"
             style="height: 16rem;"
           />
-          <div
+          <ui_view
             class="view"
             style="height: 12rem;"
           />
-        </div>
-        <div
+        </ui_view>
+        <ui_view
           class="view"
           style="flex: 1; max-width: calc(var(--mirai-ui-breakpoint-S) - var(--mirai-ui-space-M) * 2); height: 36rem;"
         />
-      </div>
-    </div>
-  </div>
-  <div
+      </ui_view>
+    </ui_view>
+  </ui_view>
+  <ui_view
     class="view row"
   >
-    <div
+    <ui_view
       class="view row"
     >
-      <div
+      <ui_view
         class="view row"
       >
-        <span
+        <ui_text
           class="text light small"
         >
           © 2024
-          <button
+          <ui_action
             class="pressable action small"
+            tabindex="0"
           />
           .
-        </span>
-        <span
+        </ui_text>
+        <ui_text
           class="text light small"
         >
           common.label.all
-          <span
+          <ui_text
             style="text-decoration: underline;"
           >
             rights
-          </span>
+          </ui_text>
           reserved
-        </span>
-      </div>
+        </ui_text>
+      </ui_view>
       <a
         class="pressable action small"
         href="https://www.mirai.com/"
+        tabindex="0"
       >
         Powered by 
-        <span
+        <ui_text
           class="text bold light paragraph"
         >
           mirai
-        </span>
+        </ui_text>
       </a>
-    </div>
-  </div>
+    </ui_view>
+  </ui_view>
 </DocumentFragment>
 `;
 
 exports[`component:<Checkout> testID 1`] = `
 <DocumentFragment>
-  <div
+  <ui_view
     class="view wide"
   >
-    <div
+    <ui_view
       class="view row wide"
     >
-      <div
+      <ui_view
         class="view row"
       />
-      <div
+      <ui_view
         class="view row"
       >
-        <span
+        <ui_tooltip
           class="container"
         >
-          <div
+          <ui_view
             class="view row dispatcher"
           >
-            <div
+            <ui_view
               class="view row"
             >
-              <span
+              <ui_icon
                 class="icon headline-2"
               >
                 <svg
@@ -1603,11 +1615,11 @@ exports[`component:<Checkout> testID 1`] = `
                     d="M11.99 2C6.47 2 2 6.48 2 12s4.47 10 9.99 10C17.52 22 22 17.52 22 12S17.52 2 11.99 2zm6.93 6h-2.95a15.65 15.65 0 0 0-1.38-3.56A8.03 8.03 0 0 1 18.92 8zM12 4.04c.83 1.2 1.48 2.53 1.91 3.96h-3.82c.43-1.43 1.08-2.76 1.91-3.96zM4.26 14C4.1 13.36 4 12.69 4 12s.1-1.36.26-2h3.38c-.08.66-.14 1.32-.14 2s.06 1.34.14 2H4.26zm.82 2h2.95c.32 1.25.78 2.45 1.38 3.56A7.987 7.987 0 0 1 5.08 16zm2.95-8H5.08a7.987 7.987 0 0 1 4.33-3.56A15.65 15.65 0 0 0 8.03 8zM12 19.96c-.83-1.2-1.48-2.53-1.91-3.96h3.82c-.43 1.43-1.08 2.76-1.91 3.96zM14.34 14H9.66c-.09-.66-.16-1.32-.16-2s.07-1.35.16-2h4.68c.09.65.16 1.32.16 2s-.07 1.34-.16 2zm.25 5.56c.6-1.11 1.06-2.31 1.38-3.56h2.95a8.03 8.03 0 0 1-4.33 3.56zM16.36 14c.08-.66.14-1.32.14-2s-.06-1.34-.14-2h3.38c.16.64.26 1.31.26 2s-.1 1.36-.26 2h-3.38z"
                   />
                 </svg>
-              </span>
-              <span
+              </ui_icon>
+              <ui_text
                 class="text bold action"
               />
-            </div>
+            </ui_view>
             <select
               class="select"
               name="locale"
@@ -1723,128 +1735,130 @@ exports[`component:<Checkout> testID 1`] = `
                 Euskara
               </option>
             </select>
-          </div>
-        </span>
-      </div>
-    </div>
-  </div>
-  <div
+          </ui_view>
+        </ui_tooltip>
+      </ui_view>
+    </ui_view>
+  </ui_view>
+  <ui_view
     class="view"
     data-testid="mirai"
   >
-    <div
+    <ui_progress
       class="view progress visible"
     >
-      <div
+      <ui_view
         class="view value indeterminate"
       />
-    </div>
-    <div
+    </ui_progress>
+    <ui_view
       class="view wide"
       style="align-items: start;"
     >
-      <div
+      <ui_view
         class="view row wide"
         style="align-items: start; align-self: center; gap: 1rem; max-width: var(--mirai-ui-breakpoint-content);"
       >
-        <div
+        <ui_view
           class="view"
           style="flex: 1; gap: 1rem;"
         >
-          <div
+          <ui_view
             class="view"
             style="height: 32rem;"
           />
-          <div
+          <ui_view
             class="view"
             style="height: 16rem;"
           />
-          <div
+          <ui_view
             class="view"
             style="height: 16rem;"
           />
-          <div
+          <ui_view
             class="view"
             style="height: 12rem;"
           />
-        </div>
-        <div
+        </ui_view>
+        <ui_view
           class="view"
           style="flex: 1; max-width: calc(var(--mirai-ui-breakpoint-S) - var(--mirai-ui-space-M) * 2); height: 36rem;"
         />
-      </div>
-    </div>
-  </div>
-  <div
+      </ui_view>
+    </ui_view>
+  </ui_view>
+  <ui_view
     class="view row"
   >
-    <div
+    <ui_view
       class="view row"
     >
-      <div
+      <ui_view
         class="view row"
       >
-        <span
+        <ui_text
           class="text light small"
         >
           © 2024
-          <button
+          <ui_action
             class="pressable action small"
+            tabindex="0"
           />
           .
-        </span>
-        <span
+        </ui_text>
+        <ui_text
           class="text light small"
         >
           common.label.all
-          <span
+          <ui_text
             style="text-decoration: underline;"
           >
             rights
-          </span>
+          </ui_text>
           reserved
-        </span>
-      </div>
+        </ui_text>
+      </ui_view>
       <a
         class="pressable action small"
         href="https://www.mirai.com/"
+        tabindex="0"
       >
         Powered by 
-        <span
+        <ui_text
           class="text bold light paragraph"
         >
           mirai
-        </span>
+        </ui_text>
       </a>
-    </div>
-  </div>
+    </ui_view>
+  </ui_view>
 </DocumentFragment>
 `;
 
 exports[`component:<Checkout> with a store 1`] = `
 <DocumentFragment>
-  <div
+  <ui_view
     class="view wide"
   >
-    <div
+    <ui_view
       class="view row wide"
     >
-      <div
+      <ui_view
         class="view row"
       />
-      <div
+      <ui_view
         class="view row"
       >
-        <span
+        <ui_tooltip
           class="container"
         >
-          <div
+          <ui_view
             class="view row dispatcher"
           >
-            <div
+            <ui_view
               class="view row"
             >
-              <span
+              <ui_icon
                 class="icon headline-2"
               >
                 <svg
@@ -1864,11 +1878,11 @@ exports[`component:<Checkout> with a store 1`] = `
                     d="M11.99 2C6.47 2 2 6.48 2 12s4.47 10 9.99 10C17.52 22 22 17.52 22 12S17.52 2 11.99 2zm6.93 6h-2.95a15.65 15.65 0 0 0-1.38-3.56A8.03 8.03 0 0 1 18.92 8zM12 4.04c.83 1.2 1.48 2.53 1.91 3.96h-3.82c.43-1.43 1.08-2.76 1.91-3.96zM4.26 14C4.1 13.36 4 12.69 4 12s.1-1.36.26-2h3.38c-.08.66-.14 1.32-.14 2s.06 1.34.14 2H4.26zm.82 2h2.95c.32 1.25.78 2.45 1.38 3.56A7.987 7.987 0 0 1 5.08 16zm2.95-8H5.08a7.987 7.987 0 0 1 4.33-3.56A15.65 15.65 0 0 0 8.03 8zM12 19.96c-.83-1.2-1.48-2.53-1.91-3.96h3.82c-.43 1.43-1.08 2.76-1.91 3.96zM14.34 14H9.66c-.09-.66-.16-1.32-.16-2s.07-1.35.16-2h4.68c.09.65.16 1.32.16 2s-.07 1.34-.16 2zm.25 5.56c.6-1.11 1.06-2.31 1.38-3.56h2.95a8.03 8.03 0 0 1-4.33 3.56zM16.36 14c.08-.66.14-1.32.14-2s-.06-1.34-.14-2h3.38c.16.64.26 1.31.26 2s-.1 1.36-.26 2h-3.38z"
                   />
                 </svg>
-              </span>
-              <span
+              </ui_icon>
+              <ui_text
                 class="text bold action"
               />
-            </div>
+            </ui_view>
             <select
               class="select"
               name="locale"
@@ -1984,99 +1998,101 @@ exports[`component:<Checkout> with a store 1`] = `
                 Euskara
               </option>
             </select>
-          </div>
-        </span>
-      </div>
-    </div>
-  </div>
-  <div
+          </ui_view>
+        </ui_tooltip>
+      </ui_view>
+    </ui_view>
+  </ui_view>
+  <ui_view
     class="view"
   >
-    <div
+    <ui_progress
       class="view progress visible"
     >
-      <div
+      <ui_view
         class="view value indeterminate"
       />
-    </div>
-    <div
+    </ui_progress>
+    <ui_view
       class="view wide"
       style="align-items: start;"
     >
-      <div
+      <ui_view
         class="view row wide"
         style="align-items: start; align-self: center; gap: 1rem; max-width: var(--mirai-ui-breakpoint-content);"
       >
-        <div
+        <ui_view
           class="view"
           style="flex: 1; gap: 1rem;"
         >
-          <div
+          <ui_view
             class="view"
             style="height: 32rem;"
           />
-          <div
+          <ui_view
             class="view"
             style="height: 16rem;"
           />
-          <div
+          <ui_view
             class="view"
             style="height: 16rem;"
           />
-          <div
+          <ui_view
             class="view"
             style="height: 12rem;"
           />
-        </div>
-        <div
+        </ui_view>
+        <ui_view
           class="view"
           style="flex: 1; max-width: calc(var(--mirai-ui-breakpoint-S) - var(--mirai-ui-space-M) * 2); height: 36rem;"
         />
-      </div>
-    </div>
-  </div>
-  <div
+      </ui_view>
+    </ui_view>
+  </ui_view>
+  <ui_view
     class="view row"
   >
-    <div
+    <ui_view
       class="view row"
     >
-      <div
+      <ui_view
         class="view row"
       >
-        <span
+        <ui_text
           class="text light small"
         >
           © 2024
-          <button
+          <ui_action
             class="pressable action small"
+            tabindex="0"
           />
           .
-        </span>
-        <span
+        </ui_text>
+        <ui_text
           class="text light small"
         >
           common.label.all
-          <span
+          <ui_text
             style="text-decoration: underline;"
           >
             rights
-          </span>
+          </ui_text>
           reserved
-        </span>
-      </div>
+        </ui_text>
+      </ui_view>
       <a
         class="pressable action small"
         href="https://www.mirai.com/"
+        tabindex="0"
       >
         Powered by 
-        <span
+        <ui_text
           class="text bold light paragraph"
         >
           mirai
-        </span>
+        </ui_text>
       </a>
-    </div>
-  </div>
+    </ui_view>
+  </ui_view>
 </DocumentFragment>
 `;