@mirai/core 0.3.355 → 0.3.357

package/build/components/__shared__/FieldOccupation/__tests__/__snapshots__/FieldOccupation.test.js.snap

@@ -2,14 +2,14 @@
 
 exports[`component:<FieldOccupation> inherit:className 1`] = `
 <DocumentFragment>
-  <ui_layer
+  <ui-layer
     class="container"
   >
-    <ui_pressable
+    <ui-pressable
       class="pressable mirai"
       tabindex="0"
     >
-      <ui_icon
+      <ui-icon
         class="icon headline-3"
       >
         <svg
@@ -29,73 +29,73 @@ exports[`component:<FieldOccupation> inherit:className 1`] = `
             d="M16.67 13.13C18.04 14.06 19 15.32 19 17v3h4v-3c0-2.18-3.57-3.47-6.33-3.87zM15 12c2.21 0 4-1.79 4-4s-1.79-4-4-4c-.47 0-.91.1-1.33.24a5.98 5.98 0 0 1 0 7.52c.42.14.86.24 1.33.24zM9 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0-6c1.1 0 2 .9 2 2s-.9 2-2 2-2-.9-2-2 .9-2 2-2zM9 13c-2.67 0-8 1.34-8 4v3h16v-3c0-2.66-5.33-4-8-4zm6 5H3v-.99C3.2 16.29 6.3 15 9 15s5.8 1.29 6 2v1z"
           />
         </svg>
-      </ui_icon>
-      <ui_view
+      </ui-icon>
+      <ui-view
         class="view"
       >
-        <ui_text
+        <ui-text
           class="text small"
         >
           finder.label.who
-        </ui_text>
-        <ui_text
+        </ui-text>
+        <ui-text
           class="text action"
         >
            · 1 common.label.accommodation_type
-        </ui_text>
-      </ui_view>
-    </ui_pressable>
-  </ui_layer>
-  <ui_layer_content
+        </ui-text>
+      </ui-view>
+    </ui-pressable>
+  </ui-layer>
+  <ui-layer-content
     class="layer hidden"
     style="left: 0px; top: 0px;"
   >
-    <ui_view
+    <ui-view
       class="view"
     >
-      <ui_scrollview
+      <ui-scrollview
         class="scrollview vertical"
       >
-        <ui_view
+        <ui-view
           class="view wide"
         >
-          <ui_view
+          <ui-view
             class="view row"
           >
-            <ui_text
+            <ui-text
               class="text action"
             >
               finder.label.place
-              <ui_text
+              <ui-text
                 style="text-decoration: underline;"
               >
                 type
-              </ui_text>
+              </ui-text>
               count.room
-            </ui_text>
-          </ui_view>
-          <ui_input_number
+            </ui-text>
+          </ui-view>
+          <ui-input-number
             class="view row inputNumber"
           >
-            <ui_view
+            <ui-view
               class="view texts"
             >
-              <label
+              <ui-label
                 class="text paragraph text label"
               >
                 common.label.occupation_type_adult
-              </label>
-              <ui_text
+              </ui-label>
+              <ui-text
                 class="text small text hint hint"
               >
                 common.label.age_from
-              </ui_text>
-            </ui_view>
+              </ui-text>
+            </ui-view>
             <button
               class="pressable button small squared secondary"
               tabindex="0"
             >
-              <ui_icon
+              <ui-icon
                 class="icon headline-3"
               >
                 <svg
@@ -115,18 +115,18 @@ exports[`component:<FieldOccupation> inherit:className 1`] = `
                     d="M19 13H5v-2h14v2z"
                   />
                 </svg>
-              </ui_icon>
+              </ui-icon>
             </button>
-            <ui_text
+            <ui-text
               class="text paragraph value"
             >
               2
-            </ui_text>
+            </ui-text>
             <button
               class="pressable button small squared secondary"
               tabindex="0"
             >
-              <ui_icon
+              <ui-icon
                 class="icon headline-3"
               >
                 <svg
@@ -146,37 +146,37 @@ exports[`component:<FieldOccupation> inherit:className 1`] = `
                     d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"
                   />
                 </svg>
-              </ui_icon>
+              </ui-icon>
             </button>
-          </ui_input_number>
-          <ui_input_number
+          </ui-input-number>
+          <ui-input-number
             class="view row inputNumber"
           >
-            <ui_view
+            <ui-view
               class="view texts"
             >
-              <label
+              <ui-label
                 class="text paragraph text label"
               >
                 common.label.occupation_type_child
-              </label>
-              <ui_text
+              </ui-label>
+              <ui-text
                 class="text small text hint hint"
               >
                 common.label.age
-                <ui_text
+                <ui-text
                   style="text-decoration: underline;"
                 >
                   up
-                </ui_text>
+                </ui-text>
                 to
-              </ui_text>
-            </ui_view>
+              </ui-text>
+            </ui-view>
             <button
               class="pressable disabled button small squared disabled"
               disabled=""
             >
-              <ui_icon
+              <ui-icon
                 class="icon headline-3"
               >
                 <svg
@@ -196,18 +196,18 @@ exports[`component:<FieldOccupation> inherit:className 1`] = `
                     d="M19 13H5v-2h14v2z"
                   />
                 </svg>
-              </ui_icon>
+              </ui-icon>
             </button>
-            <ui_text
+            <ui-text
               class="text paragraph value"
             >
               0
-            </ui_text>
+            </ui-text>
             <button
               class="pressable button small squared secondary"
               tabindex="0"
             >
-              <ui_icon
+              <ui-icon
                 class="icon headline-3"
               >
                 <svg
@@ -227,12 +227,12 @@ exports[`component:<FieldOccupation> inherit:className 1`] = `
                     d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"
                   />
                 </svg>
-              </ui_icon>
+              </ui-icon>
             </button>
-          </ui_input_number>
-        </ui_view>
-      </ui_scrollview>
-      <ui_view
+          </ui-input-number>
+        </ui-view>
+      </ui-scrollview>
+      <ui-view
         class="view row"
       >
         <button
@@ -241,66 +241,66 @@ exports[`component:<FieldOccupation> inherit:className 1`] = `
         >
           finder.action.add_place_type.room
         </button>
-      </ui_view>
-    </ui_view>
-  </ui_layer_content>
+      </ui-view>
+    </ui-view>
+  </ui-layer-content>
 </DocumentFragment>
 `;
 
 exports[`component:<FieldOccupation> prop:compacted 1`] = `
 <DocumentFragment>
-  <ui_layer
+  <ui-layer
     class="container"
   />
-  <ui_layer_content
+  <ui-layer-content
     class="layer hidden"
   >
-    <ui_view
+    <ui-view
       class="view"
     >
-      <ui_scrollview
+      <ui-scrollview
         class="scrollview vertical"
       >
-        <ui_view
+        <ui-view
           class="view wide"
         >
-          <ui_view
+          <ui-view
             class="view row"
           >
-            <ui_text
+            <ui-text
               class="text action"
             >
               finder.label.place
-              <ui_text
+              <ui-text
                 style="text-decoration: underline;"
               >
                 type
-              </ui_text>
+              </ui-text>
               count.room
-            </ui_text>
-          </ui_view>
-          <ui_input_number
+            </ui-text>
+          </ui-view>
+          <ui-input-number
             class="view row inputNumber"
           >
-            <ui_view
+            <ui-view
               class="view texts"
             >
-              <label
+              <ui-label
                 class="text paragraph text label"
               >
                 common.label.occupation_type_adult
-              </label>
-              <ui_text
+              </ui-label>
+              <ui-text
                 class="text small text hint hint"
               >
                 common.label.age_from
-              </ui_text>
-            </ui_view>
+              </ui-text>
+            </ui-view>
             <button
               class="pressable button small squared secondary"
               tabindex="0"
             >
-              <ui_icon
+              <ui-icon
                 class="icon headline-3"
               >
                 <svg
@@ -320,18 +320,18 @@ exports[`component:<FieldOccupation> prop:compacted 1`] = `
                     d="M19 13H5v-2h14v2z"
                   />
                 </svg>
-              </ui_icon>
+              </ui-icon>
             </button>
-            <ui_text
+            <ui-text
               class="text paragraph value"
             >
               2
-            </ui_text>
+            </ui-text>
             <button
               class="pressable button small squared secondary"
               tabindex="0"
             >
-              <ui_icon
+              <ui-icon
                 class="icon headline-3"
               >
                 <svg
@@ -351,37 +351,37 @@ exports[`component:<FieldOccupation> prop:compacted 1`] = `
                     d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"
                   />
                 </svg>
-              </ui_icon>
+              </ui-icon>
             </button>
-          </ui_input_number>
-          <ui_input_number
+          </ui-input-number>
+          <ui-input-number
             class="view row inputNumber"
           >
-            <ui_view
+            <ui-view
               class="view texts"
             >
-              <label
+              <ui-label
                 class="text paragraph text label"
               >
                 common.label.occupation_type_child
-              </label>
-              <ui_text
+              </ui-label>
+              <ui-text
                 class="text small text hint hint"
               >
                 common.label.age
-                <ui_text
+                <ui-text
                   style="text-decoration: underline;"
                 >
                   up
-                </ui_text>
+                </ui-text>
                 to
-              </ui_text>
-            </ui_view>
+              </ui-text>
+            </ui-view>
             <button
               class="pressable disabled button small squared disabled"
               disabled=""
             >
-              <ui_icon
+              <ui-icon
                 class="icon headline-3"
               >
                 <svg
@@ -401,18 +401,18 @@ exports[`component:<FieldOccupation> prop:compacted 1`] = `
                     d="M19 13H5v-2h14v2z"
                   />
                 </svg>
-              </ui_icon>
+              </ui-icon>
             </button>
-            <ui_text
+            <ui-text
               class="text paragraph value"
             >
               0
-            </ui_text>
+            </ui-text>
             <button
               class="pressable button small squared secondary"
               tabindex="0"
             >
-              <ui_icon
+              <ui-icon
                 class="icon headline-3"
               >
                 <svg
@@ -432,12 +432,12 @@ exports[`component:<FieldOccupation> prop:compacted 1`] = `
                     d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"
                   />
                 </svg>
-              </ui_icon>
+              </ui-icon>
             </button>
-          </ui_input_number>
-        </ui_view>
-      </ui_scrollview>
-      <ui_view
+          </ui-input-number>
+        </ui-view>
+      </ui-scrollview>
+      <ui-view
         class="view row"
       >
         <button
@@ -446,22 +446,22 @@ exports[`component:<FieldOccupation> prop:compacted 1`] = `
         >
           finder.action.add_place_type.room
         </button>
-      </ui_view>
-    </ui_view>
-  </ui_layer_content>
+      </ui-view>
+    </ui-view>
+  </ui-layer-content>
 </DocumentFragment>
 `;
 
 exports[`component:<FieldOccupation> prop:minRooms 1`] = `
 <DocumentFragment>
-  <ui_layer
+  <ui-layer
     class="container"
   >
-    <ui_pressable
+    <ui-pressable
       class="pressable"
       tabindex="0"
     >
-      <ui_icon
+      <ui-icon
         class="icon headline-3"
       >
         <svg
@@ -481,79 +481,79 @@ exports[`component:<FieldOccupation> prop:minRooms 1`] = `
             d="M16.67 13.13C18.04 14.06 19 15.32 19 17v3h4v-3c0-2.18-3.57-3.47-6.33-3.87zM15 12c2.21 0 4-1.79 4-4s-1.79-4-4-4c-.47 0-.91.1-1.33.24a5.98 5.98 0 0 1 0 7.52c.42.14.86.24 1.33.24zM9 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0-6c1.1 0 2 .9 2 2s-.9 2-2 2-2-.9-2-2 .9-2 2-2zM9 13c-2.67 0-8 1.34-8 4v3h16v-3c0-2.66-5.33-4-8-4zm6 5H3v-.99C3.2 16.29 6.3 15 9 15s5.8 1.29 6 2v1z"
           />
         </svg>
-      </ui_icon>
-      <ui_view
+      </ui-icon>
+      <ui-view
         class="view"
       >
-        <ui_text
+        <ui-text
           class="text small"
         >
           finder.label.who
-        </ui_text>
-        <ui_text
+        </ui-text>
+        <ui-text
           class="text action"
         >
            · 2 common.label.accomodation
-          <ui_text
+          <ui-text
             style="text-decoration: underline;"
           >
             type
-          </ui_text>
+          </ui-text>
           plural
-        </ui_text>
-      </ui_view>
-    </ui_pressable>
-  </ui_layer>
-  <ui_layer_content
+        </ui-text>
+      </ui-view>
+    </ui-pressable>
+  </ui-layer>
+  <ui-layer-content
     class="layer hidden"
     style="left: 0px; top: 0px;"
   >
-    <ui_view
+    <ui-view
       class="view"
     >
-      <ui_scrollview
+      <ui-scrollview
         class="scrollview vertical"
       >
-        <ui_view
+        <ui-view
           class="view wide"
         >
-          <ui_view
+          <ui-view
             class="view row"
           >
-            <ui_text
+            <ui-text
               class="text action"
             >
               finder.label.place
-              <ui_text
+              <ui-text
                 style="text-decoration: underline;"
               >
                 type
-              </ui_text>
+              </ui-text>
               count.room
-            </ui_text>
-          </ui_view>
-          <ui_input_number
+            </ui-text>
+          </ui-view>
+          <ui-input-number
             class="view row inputNumber"
           >
-            <ui_view
+            <ui-view
               class="view texts"
             >
-              <label
+              <ui-label
                 class="text paragraph text label"
               >
                 common.label.occupation_type_adult
-              </label>
-              <ui_text
+              </ui-label>
+              <ui-text
                 class="text small text hint hint"
               >
                 common.label.age_from
-              </ui_text>
-            </ui_view>
+              </ui-text>
+            </ui-view>
             <button
               class="pressable button small squared secondary"
               tabindex="0"
             >
-              <ui_icon
+              <ui-icon
                 class="icon headline-3"
               >
                 <svg
@@ -573,18 +573,18 @@ exports[`component:<FieldOccupation> prop:minRooms 1`] = `
                     d="M19 13H5v-2h14v2z"
                   />
                 </svg>
-              </ui_icon>
+              </ui-icon>
             </button>
-            <ui_text
+            <ui-text
               class="text paragraph value"
             >
               2
-            </ui_text>
+            </ui-text>
             <button
               class="pressable button small squared secondary"
               tabindex="0"
             >
-              <ui_icon
+              <ui-icon
                 class="icon headline-3"
               >
                 <svg
@@ -604,37 +604,37 @@ exports[`component:<FieldOccupation> prop:minRooms 1`] = `
                     d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"
                   />
                 </svg>
-              </ui_icon>
+              </ui-icon>
             </button>
-          </ui_input_number>
-          <ui_input_number
+          </ui-input-number>
+          <ui-input-number
             class="view row inputNumber"
           >
-            <ui_view
+            <ui-view
               class="view texts"
             >
-              <label
+              <ui-label
                 class="text paragraph text label"
               >
                 common.label.occupation_type_child
-              </label>
-              <ui_text
+              </ui-label>
+              <ui-text
                 class="text small text hint hint"
               >
                 common.label.age
-                <ui_text
+                <ui-text
                   style="text-decoration: underline;"
                 >
                   up
-                </ui_text>
+                </ui-text>
                 to
-              </ui_text>
-            </ui_view>
+              </ui-text>
+            </ui-view>
             <button
               class="pressable disabled button small squared disabled"
               disabled=""
             >
-              <ui_icon
+              <ui-icon
                 class="icon headline-3"
               >
                 <svg
@@ -654,18 +654,18 @@ exports[`component:<FieldOccupation> prop:minRooms 1`] = `
                     d="M19 13H5v-2h14v2z"
                   />
                 </svg>
-              </ui_icon>
+              </ui-icon>
             </button>
-            <ui_text
+            <ui-text
               class="text paragraph value"
             >
               0
-            </ui_text>
+            </ui-text>
             <button
               class="pressable button small squared secondary"
               tabindex="0"
             >
-              <ui_icon
+              <ui-icon
                 class="icon headline-3"
               >
                 <svg
@@ -685,50 +685,50 @@ exports[`component:<FieldOccupation> prop:minRooms 1`] = `
                     d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"
                   />
                 </svg>
-              </ui_icon>
+              </ui-icon>
             </button>
-          </ui_input_number>
-        </ui_view>
-        <ui_view
+          </ui-input-number>
+        </ui-view>
+        <ui-view
           class="view wide"
         >
-          <ui_view
+          <ui-view
             class="view row"
           >
-            <ui_text
+            <ui-text
               class="text action"
             >
               finder.label.place
-              <ui_text
+              <ui-text
                 style="text-decoration: underline;"
               >
                 type
-              </ui_text>
+              </ui-text>
               count.room
-            </ui_text>
-          </ui_view>
-          <ui_input_number
+            </ui-text>
+          </ui-view>
+          <ui-input-number
             class="view row inputNumber"
           >
-            <ui_view
+            <ui-view
               class="view texts"
             >
-              <label
+              <ui-label
                 class="text paragraph text label"
               >
                 common.label.occupation_type_adult
-              </label>
-              <ui_text
+              </ui-label>
+              <ui-text
                 class="text small text hint hint"
               >
                 common.label.age_from
-              </ui_text>
-            </ui_view>
+              </ui-text>
+            </ui-view>
             <button
               class="pressable button small squared secondary"
               tabindex="0"
             >
-              <ui_icon
+              <ui-icon
                 class="icon headline-3"
               >
                 <svg
@@ -748,18 +748,18 @@ exports[`component:<FieldOccupation> prop:minRooms 1`] = `
                     d="M19 13H5v-2h14v2z"
                   />
                 </svg>
-              </ui_icon>
+              </ui-icon>
             </button>
-            <ui_text
+            <ui-text
               class="text paragraph value"
             >
               2
-            </ui_text>
+            </ui-text>
             <button
               class="pressable button small squared secondary"
               tabindex="0"
             >
-              <ui_icon
+              <ui-icon
                 class="icon headline-3"
               >
                 <svg
@@ -779,37 +779,37 @@ exports[`component:<FieldOccupation> prop:minRooms 1`] = `
                     d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"
                   />
                 </svg>
-              </ui_icon>
+              </ui-icon>
             </button>
-          </ui_input_number>
-          <ui_input_number
+          </ui-input-number>
+          <ui-input-number
             class="view row inputNumber"
           >
-            <ui_view
+            <ui-view
               class="view texts"
             >
-              <label
+              <ui-label
                 class="text paragraph text label"
               >
                 common.label.occupation_type_child
-              </label>
-              <ui_text
+              </ui-label>
+              <ui-text
                 class="text small text hint hint"
               >
                 common.label.age
-                <ui_text
+                <ui-text
                   style="text-decoration: underline;"
                 >
                   up
-                </ui_text>
+                </ui-text>
                 to
-              </ui_text>
-            </ui_view>
+              </ui-text>
+            </ui-view>
             <button
               class="pressable disabled button small squared disabled"
               disabled=""
             >
-              <ui_icon
+              <ui-icon
                 class="icon headline-3"
               >
                 <svg
@@ -829,18 +829,18 @@ exports[`component:<FieldOccupation> prop:minRooms 1`] = `
                     d="M19 13H5v-2h14v2z"
                   />
                 </svg>
-              </ui_icon>
+              </ui-icon>
             </button>
-            <ui_text
+            <ui-text
               class="text paragraph value"
             >
               0
-            </ui_text>
+            </ui-text>
             <button
               class="pressable button small squared secondary"
               tabindex="0"
             >
-              <ui_icon
+              <ui-icon
                 class="icon headline-3"
               >
                 <svg
@@ -860,12 +860,12 @@ exports[`component:<FieldOccupation> prop:minRooms 1`] = `
                     d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"
                   />
                 </svg>
-              </ui_icon>
+              </ui-icon>
             </button>
-          </ui_input_number>
-        </ui_view>
-      </ui_scrollview>
-      <ui_view
+          </ui-input-number>
+        </ui-view>
+      </ui-scrollview>
+      <ui-view
         class="view row"
       >
         <button
@@ -874,22 +874,22 @@ exports[`component:<FieldOccupation> prop:minRooms 1`] = `
         >
           finder.action.add_place_type.room
         </button>
-      </ui_view>
-    </ui_view>
-  </ui_layer_content>
+      </ui-view>
+    </ui-view>
+  </ui-layer-content>
 </DocumentFragment>
 `;
 
 exports[`component:<FieldOccupation> prop:value 1`] = `
 <DocumentFragment>
-  <ui_layer
+  <ui-layer
     class="container"
   >
-    <ui_pressable
+    <ui-pressable
       class="pressable"
       tabindex="0"
     >
-      <ui_icon
+      <ui-icon
         class="icon headline-3"
       >
         <svg
@@ -909,85 +909,85 @@ exports[`component:<FieldOccupation> prop:value 1`] = `
             d="M16.67 13.13C18.04 14.06 19 15.32 19 17v3h4v-3c0-2.18-3.57-3.47-6.33-3.87zM15 12c2.21 0 4-1.79 4-4s-1.79-4-4-4c-.47 0-.91.1-1.33.24a5.98 5.98 0 0 1 0 7.52c.42.14.86.24 1.33.24zM9 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0-6c1.1 0 2 .9 2 2s-.9 2-2 2-2-.9-2-2 .9-2 2-2zM9 13c-2.67 0-8 1.34-8 4v3h16v-3c0-2.66-5.33-4-8-4zm6 5H3v-.99C3.2 16.29 6.3 15 9 15s5.8 1.29 6 2v1z"
           />
         </svg>
-      </ui_icon>
-      <ui_view
+      </ui-icon>
+      <ui-view
         class="view"
       >
-        <ui_text
+        <ui-text
           class="text small"
         >
           finder.label.who
-        </ui_text>
-        <ui_text
+        </ui-text>
+        <ui-text
           class="text action"
         >
           2 common.label.guest
-          <ui_text
+          <ui-text
             style="text-decoration: underline;"
           >
             type
-          </ui_text>
+          </ui-text>
           plural, 1 common.label.guest
-          <ui_text
+          <ui-text
             style="text-decoration: underline;"
           >
             type · 1 common.label.accommodation
-          </ui_text>
+          </ui-text>
           type
-        </ui_text>
-      </ui_view>
-    </ui_pressable>
-  </ui_layer>
-  <ui_layer_content
+        </ui-text>
+      </ui-view>
+    </ui-pressable>
+  </ui-layer>
+  <ui-layer-content
     class="layer hidden"
     style="left: 0px; top: 0px;"
   >
-    <ui_view
+    <ui-view
       class="view"
     >
-      <ui_scrollview
+      <ui-scrollview
         class="scrollview vertical"
       >
-        <ui_view
+        <ui-view
           class="view wide"
         >
-          <ui_view
+          <ui-view
             class="view row"
           >
-            <ui_text
+            <ui-text
               class="text action"
             >
               finder.label.place
-              <ui_text
+              <ui-text
                 style="text-decoration: underline;"
               >
                 type
-              </ui_text>
+              </ui-text>
               count.room
-            </ui_text>
-          </ui_view>
-          <ui_input_number
+            </ui-text>
+          </ui-view>
+          <ui-input-number
             class="view row inputNumber"
           >
-            <ui_view
+            <ui-view
               class="view texts"
             >
-              <label
+              <ui-label
                 class="text paragraph text label"
               >
                 common.label.occupation_type_adult
-              </label>
-              <ui_text
+              </ui-label>
+              <ui-text
                 class="text small text hint hint"
               >
                 common.label.age_from
-              </ui_text>
-            </ui_view>
+              </ui-text>
+            </ui-view>
             <button
               class="pressable button small squared secondary"
               tabindex="0"
             >
-              <ui_icon
+              <ui-icon
                 class="icon headline-3"
               >
                 <svg
@@ -1007,18 +1007,18 @@ exports[`component:<FieldOccupation> prop:value 1`] = `
                     d="M19 13H5v-2h14v2z"
                   />
                 </svg>
-              </ui_icon>
+              </ui-icon>
             </button>
-            <ui_text
+            <ui-text
               class="text paragraph value"
             >
               2
-            </ui_text>
+            </ui-text>
             <button
               class="pressable button small squared secondary"
               tabindex="0"
             >
-              <ui_icon
+              <ui-icon
                 class="icon headline-3"
               >
                 <svg
@@ -1038,37 +1038,37 @@ exports[`component:<FieldOccupation> prop:value 1`] = `
                     d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"
                   />
                 </svg>
-              </ui_icon>
+              </ui-icon>
             </button>
-          </ui_input_number>
-          <ui_input_number
+          </ui-input-number>
+          <ui-input-number
             class="view row inputNumber"
           >
-            <ui_view
+            <ui-view
               class="view texts"
             >
-              <label
+              <ui-label
                 class="text paragraph text label"
               >
                 common.label.occupation_type_child
-              </label>
-              <ui_text
+              </ui-label>
+              <ui-text
                 class="text small text hint hint"
               >
                 common.label.age
-                <ui_text
+                <ui-text
                   style="text-decoration: underline;"
                 >
                   up
-                </ui_text>
+                </ui-text>
                 to
-              </ui_text>
-            </ui_view>
+              </ui-text>
+            </ui-view>
             <button
               class="pressable button small squared secondary"
               tabindex="0"
             >
-              <ui_icon
+              <ui-icon
                 class="icon headline-3"
               >
                 <svg
@@ -1088,18 +1088,18 @@ exports[`component:<FieldOccupation> prop:value 1`] = `
                     d="M19 13H5v-2h14v2z"
                   />
                 </svg>
-              </ui_icon>
+              </ui-icon>
             </button>
-            <ui_text
+            <ui-text
               class="text paragraph value"
             >
               1
-            </ui_text>
+            </ui-text>
             <button
               class="pressable button small squared secondary"
               tabindex="0"
             >
-              <ui_icon
+              <ui-icon
                 class="icon headline-3"
               >
                 <svg
@@ -1119,22 +1119,22 @@ exports[`component:<FieldOccupation> prop:value 1`] = `
                     d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"
                   />
                 </svg>
-              </ui_icon>
+              </ui-icon>
             </button>
-          </ui_input_number>
-          <ui_view
+          </ui-input-number>
+          <ui-view
             class="view"
           >
-            <ui_view
+            <ui-view
               class="view row"
             >
-              <ui_view
+              <ui-input-select
                 class="view inputContainer"
               >
-                <ui_view
+                <ui-view
                   class="view row inputBorder"
                 >
-                  <ui_view
+                  <ui-view
                     class="view wide content"
                   >
                     <select
@@ -1237,8 +1237,8 @@ exports[`component:<FieldOccupation> prop:value 1`] = `
                         17
                       </option>
                     </select>
-                  </ui_view>
-                  <ui_icon
+                  </ui-view>
+                  <ui-icon
                     class="icon headline-3 icon expand"
                   >
                     <svg
@@ -1259,19 +1259,19 @@ exports[`component:<FieldOccupation> prop:value 1`] = `
                         d="M16.59 8.59 12 13.17 7.41 8.59 6 10l6 6 6-6-1.41-1.41z"
                       />
                     </svg>
-                  </ui_icon>
-                </ui_view>
-              </ui_view>
-            </ui_view>
-            <ui_text
+                  </ui-icon>
+                </ui-view>
+              </ui-input-select>
+            </ui-view>
+            <ui-text
               class="text light small"
             >
               common.label.age_hint
-            </ui_text>
-          </ui_view>
-        </ui_view>
-      </ui_scrollview>
-      <ui_view
+            </ui-text>
+          </ui-view>
+        </ui-view>
+      </ui-scrollview>
+      <ui-view
         class="view row"
       >
         <button
@@ -1280,22 +1280,22 @@ exports[`component:<FieldOccupation> prop:value 1`] = `
         >
           finder.action.add_place_type.room
         </button>
-      </ui_view>
-    </ui_view>
-  </ui_layer_content>
+      </ui-view>
+    </ui-view>
+  </ui-layer-content>
 </DocumentFragment>
 `;
 
 exports[`component:<FieldOccupation> prop:visible 1`] = `
 <DocumentFragment>
-  <ui_layer
+  <ui-layer
     class="container"
   >
-    <ui_pressable
+    <ui-pressable
       class="pressable"
       tabindex="0"
     >
-      <ui_icon
+      <ui-icon
         class="icon headline-3"
       >
         <svg
@@ -1315,73 +1315,73 @@ exports[`component:<FieldOccupation> prop:visible 1`] = `
             d="M16.67 13.13C18.04 14.06 19 15.32 19 17v3h4v-3c0-2.18-3.57-3.47-6.33-3.87zM15 12c2.21 0 4-1.79 4-4s-1.79-4-4-4c-.47 0-.91.1-1.33.24a5.98 5.98 0 0 1 0 7.52c.42.14.86.24 1.33.24zM9 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0-6c1.1 0 2 .9 2 2s-.9 2-2 2-2-.9-2-2 .9-2 2-2zM9 13c-2.67 0-8 1.34-8 4v3h16v-3c0-2.66-5.33-4-8-4zm6 5H3v-.99C3.2 16.29 6.3 15 9 15s5.8 1.29 6 2v1z"
           />
         </svg>
-      </ui_icon>
-      <ui_view
+      </ui-icon>
+      <ui-view
         class="view"
       >
-        <ui_text
+        <ui-text
           class="text small"
         >
           finder.label.who
-        </ui_text>
-        <ui_text
+        </ui-text>
+        <ui-text
           class="text action"
         >
            · 1 common.label.accommodation_type
-        </ui_text>
-      </ui_view>
-    </ui_pressable>
-  </ui_layer>
-  <ui_layer_content
+        </ui-text>
+      </ui-view>
+    </ui-pressable>
+  </ui-layer>
+  <ui-layer-content
     class="layer"
     style="left: 0px; top: 0px;"
   >
-    <ui_view
+    <ui-view
       class="view"
     >
-      <ui_scrollview
+      <ui-scrollview
         class="scrollview vertical"
       >
-        <ui_view
+        <ui-view
           class="view wide"
         >
-          <ui_view
+          <ui-view
             class="view row"
           >
-            <ui_text
+            <ui-text
               class="text action"
             >
               finder.label.place
-              <ui_text
+              <ui-text
                 style="text-decoration: underline;"
               >
                 type
-              </ui_text>
+              </ui-text>
               count.room
-            </ui_text>
-          </ui_view>
-          <ui_input_number
+            </ui-text>
+          </ui-view>
+          <ui-input-number
             class="view row inputNumber"
           >
-            <ui_view
+            <ui-view
               class="view texts"
             >
-              <label
+              <ui-label
                 class="text paragraph text label"
               >
                 common.label.occupation_type_adult
-              </label>
-              <ui_text
+              </ui-label>
+              <ui-text
                 class="text small text hint hint"
               >
                 common.label.age_from
-              </ui_text>
-            </ui_view>
+              </ui-text>
+            </ui-view>
             <button
               class="pressable button small squared secondary"
               tabindex="0"
             >
-              <ui_icon
+              <ui-icon
                 class="icon headline-3"
               >
                 <svg
@@ -1401,18 +1401,18 @@ exports[`component:<FieldOccupation> prop:visible 1`] = `
                     d="M19 13H5v-2h14v2z"
                   />
                 </svg>
-              </ui_icon>
+              </ui-icon>
             </button>
-            <ui_text
+            <ui-text
               class="text paragraph value"
             >
               2
-            </ui_text>
+            </ui-text>
             <button
               class="pressable button small squared secondary"
               tabindex="0"
             >
-              <ui_icon
+              <ui-icon
                 class="icon headline-3"
               >
                 <svg
@@ -1432,37 +1432,37 @@ exports[`component:<FieldOccupation> prop:visible 1`] = `
                     d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"
                   />
                 </svg>
-              </ui_icon>
+              </ui-icon>
             </button>
-          </ui_input_number>
-          <ui_input_number
+          </ui-input-number>
+          <ui-input-number
             class="view row inputNumber"
           >
-            <ui_view
+            <ui-view
               class="view texts"
             >
-              <label
+              <ui-label
                 class="text paragraph text label"
               >
                 common.label.occupation_type_child
-              </label>
-              <ui_text
+              </ui-label>
+              <ui-text
                 class="text small text hint hint"
               >
                 common.label.age
-                <ui_text
+                <ui-text
                   style="text-decoration: underline;"
                 >
                   up
-                </ui_text>
+                </ui-text>
                 to
-              </ui_text>
-            </ui_view>
+              </ui-text>
+            </ui-view>
             <button
               class="pressable disabled button small squared disabled"
               disabled=""
             >
-              <ui_icon
+              <ui-icon
                 class="icon headline-3"
               >
                 <svg
@@ -1482,18 +1482,18 @@ exports[`component:<FieldOccupation> prop:visible 1`] = `
                     d="M19 13H5v-2h14v2z"
                   />
                 </svg>
-              </ui_icon>
+              </ui-icon>
             </button>
-            <ui_text
+            <ui-text
               class="text paragraph value"
             >
               0
-            </ui_text>
+            </ui-text>
             <button
               class="pressable button small squared secondary"
               tabindex="0"
             >
-              <ui_icon
+              <ui-icon
                 class="icon headline-3"
               >
                 <svg
@@ -1513,12 +1513,12 @@ exports[`component:<FieldOccupation> prop:visible 1`] = `
                     d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"
                   />
                 </svg>
-              </ui_icon>
+              </ui-icon>
             </button>
-          </ui_input_number>
-        </ui_view>
-      </ui_scrollview>
-      <ui_view
+          </ui-input-number>
+        </ui-view>
+      </ui-scrollview>
+      <ui-view
         class="view row"
       >
         <button
@@ -1527,22 +1527,22 @@ exports[`component:<FieldOccupation> prop:visible 1`] = `
         >
           finder.action.add_place_type.room
         </button>
-      </ui_view>
-    </ui_view>
-  </ui_layer_content>
+      </ui-view>
+    </ui-view>
+  </ui-layer-content>
 </DocumentFragment>
 `;
 
 exports[`component:<FieldOccupation> prop:warning 1`] = `
 <DocumentFragment>
-  <ui_layer
+  <ui-layer
     class="container"
   >
-    <ui_pressable
+    <ui-pressable
       class="pressable"
       tabindex="0"
     >
-      <ui_icon
+      <ui-icon
         class="icon headline-3"
       >
         <svg
@@ -1562,22 +1562,22 @@ exports[`component:<FieldOccupation> prop:warning 1`] = `
             d="M16.67 13.13C18.04 14.06 19 15.32 19 17v3h4v-3c0-2.18-3.57-3.47-6.33-3.87zM15 12c2.21 0 4-1.79 4-4s-1.79-4-4-4c-.47 0-.91.1-1.33.24a5.98 5.98 0 0 1 0 7.52c.42.14.86.24 1.33.24zM9 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0-6c1.1 0 2 .9 2 2s-.9 2-2 2-2-.9-2-2 .9-2 2-2zM9 13c-2.67 0-8 1.34-8 4v3h16v-3c0-2.66-5.33-4-8-4zm6 5H3v-.99C3.2 16.29 6.3 15 9 15s5.8 1.29 6 2v1z"
           />
         </svg>
-      </ui_icon>
-      <ui_view
+      </ui-icon>
+      <ui-view
         class="view"
       >
-        <ui_text
+        <ui-text
           class="text small"
         >
           finder.label.who
-        </ui_text>
-        <ui_text
+        </ui-text>
+        <ui-text
           class="text action"
         >
            · 1 common.label.accommodation_type
-        </ui_text>
-      </ui_view>
-      <ui_icon
+        </ui-text>
+      </ui-view>
+      <ui-icon
         class="icon headline-3"
       >
         <svg
@@ -1593,59 +1593,59 @@ exports[`component:<FieldOccupation> prop:warning 1`] = `
             d="M12 5.99 19.53 19H4.47L12 5.99M12 2 1 21h22L12 2zm1 14h-2v2h2v-2zm0-6h-2v4h2v-4z"
           />
         </svg>
-      </ui_icon>
-    </ui_pressable>
-  </ui_layer>
-  <ui_layer_content
+      </ui-icon>
+    </ui-pressable>
+  </ui-layer>
+  <ui-layer-content
     class="layer hidden"
     style="left: 0px; top: 0px;"
   >
-    <ui_view
+    <ui-view
       class="view"
     >
-      <ui_scrollview
+      <ui-scrollview
         class="scrollview vertical"
       >
-        <ui_view
+        <ui-view
           class="view wide"
         >
-          <ui_view
+          <ui-view
             class="view row"
           >
-            <ui_text
+            <ui-text
               class="text action"
             >
               finder.label.place
-              <ui_text
+              <ui-text
                 style="text-decoration: underline;"
               >
                 type
-              </ui_text>
+              </ui-text>
               count.room
-            </ui_text>
-          </ui_view>
-          <ui_input_number
+            </ui-text>
+          </ui-view>
+          <ui-input-number
             class="view row inputNumber"
           >
-            <ui_view
+            <ui-view
               class="view texts"
             >
-              <label
+              <ui-label
                 class="text paragraph text label"
               >
                 common.label.occupation_type_adult
-              </label>
-              <ui_text
+              </ui-label>
+              <ui-text
                 class="text small text hint hint"
               >
                 common.label.age_from
-              </ui_text>
-            </ui_view>
+              </ui-text>
+            </ui-view>
             <button
               class="pressable button small squared secondary"
               tabindex="0"
             >
-              <ui_icon
+              <ui-icon
                 class="icon headline-3"
               >
                 <svg
@@ -1665,18 +1665,18 @@ exports[`component:<FieldOccupation> prop:warning 1`] = `
                     d="M19 13H5v-2h14v2z"
                   />
                 </svg>
-              </ui_icon>
+              </ui-icon>
             </button>
-            <ui_text
+            <ui-text
               class="text paragraph value"
             >
               2
-            </ui_text>
+            </ui-text>
             <button
               class="pressable button small squared secondary"
               tabindex="0"
             >
-              <ui_icon
+              <ui-icon
                 class="icon headline-3"
               >
                 <svg
@@ -1696,37 +1696,37 @@ exports[`component:<FieldOccupation> prop:warning 1`] = `
                     d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"
                   />
                 </svg>
-              </ui_icon>
+              </ui-icon>
             </button>
-          </ui_input_number>
-          <ui_input_number
+          </ui-input-number>
+          <ui-input-number
             class="view row inputNumber"
           >
-            <ui_view
+            <ui-view
               class="view texts"
             >
-              <label
+              <ui-label
                 class="text paragraph text label"
               >
                 common.label.occupation_type_child
-              </label>
-              <ui_text
+              </ui-label>
+              <ui-text
                 class="text small text hint hint"
               >
                 common.label.age
-                <ui_text
+                <ui-text
                   style="text-decoration: underline;"
                 >
                   up
-                </ui_text>
+                </ui-text>
                 to
-              </ui_text>
-            </ui_view>
+              </ui-text>
+            </ui-view>
             <button
               class="pressable disabled button small squared disabled"
               disabled=""
             >
-              <ui_icon
+              <ui-icon
                 class="icon headline-3"
               >
                 <svg
@@ -1746,18 +1746,18 @@ exports[`component:<FieldOccupation> prop:warning 1`] = `
                     d="M19 13H5v-2h14v2z"
                   />
                 </svg>
-              </ui_icon>
+              </ui-icon>
             </button>
-            <ui_text
+            <ui-text
               class="text paragraph value"
             >
               0
-            </ui_text>
+            </ui-text>
             <button
               class="pressable button small squared secondary"
               tabindex="0"
             >
-              <ui_icon
+              <ui-icon
                 class="icon headline-3"
               >
                 <svg
@@ -1777,12 +1777,12 @@ exports[`component:<FieldOccupation> prop:warning 1`] = `
                     d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"
                   />
                 </svg>
-              </ui_icon>
+              </ui-icon>
             </button>
-          </ui_input_number>
-        </ui_view>
-      </ui_scrollview>
-      <ui_view
+          </ui-input-number>
+        </ui-view>
+      </ui-scrollview>
+      <ui-view
         class="view row"
       >
         <button
@@ -1791,22 +1791,22 @@ exports[`component:<FieldOccupation> prop:warning 1`] = `
         >
           finder.action.add_place_type.room
         </button>
-      </ui_view>
-    </ui_view>
-  </ui_layer_content>
+      </ui-view>
+    </ui-view>
+  </ui-layer-content>
 </DocumentFragment>
 `;
 
 exports[`component:<FieldOccupation> renders 1`] = `
 <DocumentFragment>
-  <ui_layer
+  <ui-layer
     class="container"
   >
-    <ui_pressable
+    <ui-pressable
       class="pressable"
       tabindex="0"
     >
-      <ui_icon
+      <ui-icon
         class="icon headline-3"
       >
         <svg
@@ -1826,73 +1826,73 @@ exports[`component:<FieldOccupation> renders 1`] = `
             d="M16.67 13.13C18.04 14.06 19 15.32 19 17v3h4v-3c0-2.18-3.57-3.47-6.33-3.87zM15 12c2.21 0 4-1.79 4-4s-1.79-4-4-4c-.47 0-.91.1-1.33.24a5.98 5.98 0 0 1 0 7.52c.42.14.86.24 1.33.24zM9 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0-6c1.1 0 2 .9 2 2s-.9 2-2 2-2-.9-2-2 .9-2 2-2zM9 13c-2.67 0-8 1.34-8 4v3h16v-3c0-2.66-5.33-4-8-4zm6 5H3v-.99C3.2 16.29 6.3 15 9 15s5.8 1.29 6 2v1z"
           />
         </svg>
-      </ui_icon>
-      <ui_view
+      </ui-icon>
+      <ui-view
         class="view"
       >
-        <ui_text
+        <ui-text
           class="text small"
         >
           finder.label.who
-        </ui_text>
-        <ui_text
+        </ui-text>
+        <ui-text
           class="text action"
         >
            · 1 common.label.accommodation_type
-        </ui_text>
-      </ui_view>
-    </ui_pressable>
-  </ui_layer>
-  <ui_layer_content
+        </ui-text>
+      </ui-view>
+    </ui-pressable>
+  </ui-layer>
+  <ui-layer-content
     class="layer hidden"
     style="left: 0px; top: 0px;"
   >
-    <ui_view
+    <ui-view
       class="view"
     >
-      <ui_scrollview
+      <ui-scrollview
         class="scrollview vertical"
       >
-        <ui_view
+        <ui-view
           class="view wide"
         >
-          <ui_view
+          <ui-view
             class="view row"
           >
-            <ui_text
+            <ui-text
               class="text action"
             >
               finder.label.place
-              <ui_text
+              <ui-text
                 style="text-decoration: underline;"
               >
                 type
-              </ui_text>
+              </ui-text>
               count.room
-            </ui_text>
-          </ui_view>
-          <ui_input_number
+            </ui-text>
+          </ui-view>
+          <ui-input-number
             class="view row inputNumber"
           >
-            <ui_view
+            <ui-view
               class="view texts"
             >
-              <label
+              <ui-label
                 class="text paragraph text label"
               >
                 common.label.occupation_type_adult
-              </label>
-              <ui_text
+              </ui-label>
+              <ui-text
                 class="text small text hint hint"
               >
                 common.label.age_from
-              </ui_text>
-            </ui_view>
+              </ui-text>
+            </ui-view>
             <button
               class="pressable button small squared secondary"
               tabindex="0"
             >
-              <ui_icon
+              <ui-icon
                 class="icon headline-3"
               >
                 <svg
@@ -1912,18 +1912,18 @@ exports[`component:<FieldOccupation> renders 1`] = `
                     d="M19 13H5v-2h14v2z"
                   />
                 </svg>
-              </ui_icon>
+              </ui-icon>
             </button>
-            <ui_text
+            <ui-text
               class="text paragraph value"
             >
               2
-            </ui_text>
+            </ui-text>
             <button
               class="pressable button small squared secondary"
               tabindex="0"
             >
-              <ui_icon
+              <ui-icon
                 class="icon headline-3"
               >
                 <svg
@@ -1943,37 +1943,37 @@ exports[`component:<FieldOccupation> renders 1`] = `
                     d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"
                   />
                 </svg>
-              </ui_icon>
+              </ui-icon>
             </button>
-          </ui_input_number>
-          <ui_input_number
+          </ui-input-number>
+          <ui-input-number
             class="view row inputNumber"
           >
-            <ui_view
+            <ui-view
               class="view texts"
             >
-              <label
+              <ui-label
                 class="text paragraph text label"
               >
                 common.label.occupation_type_child
-              </label>
-              <ui_text
+              </ui-label>
+              <ui-text
                 class="text small text hint hint"
               >
                 common.label.age
-                <ui_text
+                <ui-text
                   style="text-decoration: underline;"
                 >
                   up
-                </ui_text>
+                </ui-text>
                 to
-              </ui_text>
-            </ui_view>
+              </ui-text>
+            </ui-view>
             <button
               class="pressable disabled button small squared disabled"
               disabled=""
             >
-              <ui_icon
+              <ui-icon
                 class="icon headline-3"
               >
                 <svg
@@ -1993,18 +1993,18 @@ exports[`component:<FieldOccupation> renders 1`] = `
                     d="M19 13H5v-2h14v2z"
                   />
                 </svg>
-              </ui_icon>
+              </ui-icon>
             </button>
-            <ui_text
+            <ui-text
               class="text paragraph value"
             >
               0
-            </ui_text>
+            </ui-text>
             <button
               class="pressable button small squared secondary"
               tabindex="0"
             >
-              <ui_icon
+              <ui-icon
                 class="icon headline-3"
               >
                 <svg
@@ -2024,12 +2024,12 @@ exports[`component:<FieldOccupation> renders 1`] = `
                     d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"
                   />
                 </svg>
-              </ui_icon>
+              </ui-icon>
             </button>
-          </ui_input_number>
-        </ui_view>
-      </ui_scrollview>
-      <ui_view
+          </ui-input-number>
+        </ui-view>
+      </ui-scrollview>
+      <ui-view
         class="view row"
       >
         <button
@@ -2038,23 +2038,23 @@ exports[`component:<FieldOccupation> renders 1`] = `
         >
           finder.action.add_place_type.room
         </button>
-      </ui_view>
-    </ui_view>
-  </ui_layer_content>
+      </ui-view>
+    </ui-view>
+  </ui-layer-content>
 </DocumentFragment>
 `;
 
 exports[`component:<FieldOccupation> testID 1`] = `
 <DocumentFragment>
-  <ui_layer
+  <ui-layer
     class="container"
   >
-    <ui_pressable
+    <ui-pressable
       class="pressable"
       data-testid="mirai-field"
       tabindex="0"
     >
-      <ui_icon
+      <ui-icon
         class="icon headline-3"
       >
         <svg
@@ -2074,74 +2074,74 @@ exports[`component:<FieldOccupation> testID 1`] = `
             d="M16.67 13.13C18.04 14.06 19 15.32 19 17v3h4v-3c0-2.18-3.57-3.47-6.33-3.87zM15 12c2.21 0 4-1.79 4-4s-1.79-4-4-4c-.47 0-.91.1-1.33.24a5.98 5.98 0 0 1 0 7.52c.42.14.86.24 1.33.24zM9 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0-6c1.1 0 2 .9 2 2s-.9 2-2 2-2-.9-2-2 .9-2 2-2zM9 13c-2.67 0-8 1.34-8 4v3h16v-3c0-2.66-5.33-4-8-4zm6 5H3v-.99C3.2 16.29 6.3 15 9 15s5.8 1.29 6 2v1z"
           />
         </svg>
-      </ui_icon>
-      <ui_view
+      </ui-icon>
+      <ui-view
         class="view"
       >
-        <ui_text
+        <ui-text
           class="text small"
         >
           finder.label.who
-        </ui_text>
-        <ui_text
+        </ui-text>
+        <ui-text
           class="text action"
         >
            · 1 common.label.accommodation_type
-        </ui_text>
-      </ui_view>
-    </ui_pressable>
-  </ui_layer>
-  <ui_layer_content
+        </ui-text>
+      </ui-view>
+    </ui-pressable>
+  </ui-layer>
+  <ui-layer-content
     class="layer hidden"
     style="left: 0px; top: 0px;"
   >
-    <ui_view
+    <ui-view
       class="view"
       data-testid="mirai"
     >
-      <ui_scrollview
+      <ui-scrollview
         class="scrollview vertical"
       >
-        <ui_view
+        <ui-view
           class="view wide"
         >
-          <ui_view
+          <ui-view
             class="view row"
           >
-            <ui_text
+            <ui-text
               class="text action"
             >
               finder.label.place
-              <ui_text
+              <ui-text
                 style="text-decoration: underline;"
               >
                 type
-              </ui_text>
+              </ui-text>
               count.room
-            </ui_text>
-          </ui_view>
-          <ui_input_number
+            </ui-text>
+          </ui-view>
+          <ui-input-number
             class="view row inputNumber"
           >
-            <ui_view
+            <ui-view
               class="view texts"
             >
-              <label
+              <ui-label
                 class="text paragraph text label"
               >
                 common.label.occupation_type_adult
-              </label>
-              <ui_text
+              </ui-label>
+              <ui-text
                 class="text small text hint hint"
               >
                 common.label.age_from
-              </ui_text>
-            </ui_view>
+              </ui-text>
+            </ui-view>
             <button
               class="pressable button small squared secondary"
               tabindex="0"
             >
-              <ui_icon
+              <ui-icon
                 class="icon headline-3"
               >
                 <svg
@@ -2161,18 +2161,18 @@ exports[`component:<FieldOccupation> testID 1`] = `
                     d="M19 13H5v-2h14v2z"
                   />
                 </svg>
-              </ui_icon>
+              </ui-icon>
             </button>
-            <ui_text
+            <ui-text
               class="text paragraph value"
             >
               2
-            </ui_text>
+            </ui-text>
             <button
               class="pressable button small squared secondary"
               tabindex="0"
             >
-              <ui_icon
+              <ui-icon
                 class="icon headline-3"
               >
                 <svg
@@ -2192,37 +2192,37 @@ exports[`component:<FieldOccupation> testID 1`] = `
                     d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"
                   />
                 </svg>
-              </ui_icon>
+              </ui-icon>
             </button>
-          </ui_input_number>
-          <ui_input_number
+          </ui-input-number>
+          <ui-input-number
             class="view row inputNumber"
           >
-            <ui_view
+            <ui-view
               class="view texts"
             >
-              <label
+              <ui-label
                 class="text paragraph text label"
               >
                 common.label.occupation_type_child
-              </label>
-              <ui_text
+              </ui-label>
+              <ui-text
                 class="text small text hint hint"
               >
                 common.label.age
-                <ui_text
+                <ui-text
                   style="text-decoration: underline;"
                 >
                   up
-                </ui_text>
+                </ui-text>
                 to
-              </ui_text>
-            </ui_view>
+              </ui-text>
+            </ui-view>
             <button
               class="pressable disabled button small squared disabled"
               disabled=""
             >
-              <ui_icon
+              <ui-icon
                 class="icon headline-3"
               >
                 <svg
@@ -2242,18 +2242,18 @@ exports[`component:<FieldOccupation> testID 1`] = `
                     d="M19 13H5v-2h14v2z"
                   />
                 </svg>
-              </ui_icon>
+              </ui-icon>
             </button>
-            <ui_text
+            <ui-text
               class="text paragraph value"
             >
               0
-            </ui_text>
+            </ui-text>
             <button
               class="pressable button small squared secondary"
               tabindex="0"
             >
-              <ui_icon
+              <ui-icon
                 class="icon headline-3"
               >
                 <svg
@@ -2273,12 +2273,12 @@ exports[`component:<FieldOccupation> testID 1`] = `
                     d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"
                   />
                 </svg>
-              </ui_icon>
+              </ui-icon>
             </button>
-          </ui_input_number>
-        </ui_view>
-      </ui_scrollview>
-      <ui_view
+          </ui-input-number>
+        </ui-view>
+      </ui-scrollview>
+      <ui-view
         class="view row"
       >
         <button
@@ -2288,8 +2288,8 @@ exports[`component:<FieldOccupation> testID 1`] = `
         >
           finder.action.add_place_type.room
         </button>
-      </ui_view>
-    </ui_view>
-  </ui_layer_content>
+      </ui-view>
+    </ui-view>
+  </ui-layer-content>
 </DocumentFragment>
 `;