diff --git a/next-docs/public/examples/tagsInput/__tests__/__snapshots__/index.test.tsx.snap b/next-docs/public/examples/tagsInput/__tests__/__snapshots__/index.test.tsx.snap
index 16b6933bbd..02ba5d696c 100644
--- a/next-docs/public/examples/tagsInput/__tests__/__snapshots__/index.test.tsx.snap
+++ b/next-docs/public/examples/tagsInput/__tests__/__snapshots__/index.test.tsx.snap
@@ -123,7 +123,7 @@ Object {
               <label
                 class="block text-bulma pb-2 text-moon-14"
                 data-headlessui-state=""
-                id="headlessui-listbox-label-:r9:"
+                id="headlessui-listbox-label-:r8:"
               >
                 Small
               </label>
@@ -146,7 +146,7 @@ Object {
               <label
                 class="block text-bulma pb-2 text-moon-16"
                 data-headlessui-state=""
-                id="headlessui-listbox-label-:ra:"
+                id="headlessui-listbox-label-:r9:"
               >
                 Medium (default)
               </label>
@@ -169,7 +169,7 @@ Object {
               <label
                 class="block text-bulma pb-2 text-moon-16"
                 data-headlessui-state=""
-                id="headlessui-listbox-label-:rb:"
+                id="headlessui-listbox-label-:ra:"
               >
                 Large
               </label>
@@ -207,7 +207,7 @@ Object {
             <label
               class="block text-bulma pb-2 text-moon-14"
               data-headlessui-state=""
-              id="headlessui-listbox-label-:r9:"
+              id="headlessui-listbox-label-:r8:"
             >
               Small
             </label>
@@ -230,7 +230,7 @@ Object {
             <label
               class="block text-bulma pb-2 text-moon-16"
               data-headlessui-state=""
-              id="headlessui-listbox-label-:ra:"
+              id="headlessui-listbox-label-:r9:"
             >
               Medium (default)
             </label>
@@ -253,7 +253,7 @@ Object {
             <label
               class="block text-bulma pb-2 text-moon-16"
               data-headlessui-state=""
-              id="headlessui-listbox-label-:rb:"
+              id="headlessui-listbox-label-:ra:"
             >
               Large
             </label>
@@ -348,7 +348,7 @@ Object {
               <label
                 class="block text-bulma pb-2 text-moon-16"
                 data-headlessui-state=""
-                id="headlessui-listbox-label-:rc:"
+                id="headlessui-listbox-label-:rb:"
               >
                 Error
               </label>
@@ -360,7 +360,7 @@ Object {
                   class="flex flex-wrap justify-start items-start gap-1"
                 >
                   <span
-                    class="flex gap-2 items-center flex-grow-0 flex-shrink-0 self-center max-w-full [&>div]:max-w-full"
+                    class="flex gap-2 items-center flex-grow-0 flex-shrink-0 self-center max-w-full"
                   >
                     <div
                       class="relative"
@@ -412,7 +412,7 @@ Object {
               <label
                 class="block text-bulma pb-2 text-moon-16 opacity-60 cursor-not-allowed"
                 data-headlessui-state=""
-                id="headlessui-listbox-label-:rd:"
+                id="headlessui-listbox-label-:rc:"
               >
                 Disabled
               </label>
@@ -424,7 +424,7 @@ Object {
                   class="flex flex-wrap justify-start items-start gap-1"
                 >
                   <span
-                    class="flex gap-2 items-center flex-grow-0 flex-shrink-0 self-center max-w-full [&>div]:max-w-full"
+                    class="flex gap-2 items-center flex-grow-0 flex-shrink-0 self-center max-w-full"
                   >
                     <div
                       class="relative"
@@ -477,7 +477,7 @@ Object {
               <label
                 class="block text-bulma pb-2 text-moon-16"
                 data-headlessui-state=""
-                id="headlessui-listbox-label-:re:"
+                id="headlessui-listbox-label-:rd:"
               >
                 Placeholder
               </label>
@@ -489,7 +489,7 @@ Object {
                   class="flex flex-wrap justify-start items-start gap-1"
                 >
                   <span
-                    class="flex gap-2 items-center flex-grow-0 flex-shrink-0 self-center max-w-full [&>div]:max-w-full"
+                    class="flex gap-2 items-center flex-grow-0 flex-shrink-0 self-center max-w-full"
                   >
                     <div
                       class="relative"
@@ -557,7 +557,7 @@ Object {
             <label
               class="block text-bulma pb-2 text-moon-16"
               data-headlessui-state=""
-              id="headlessui-listbox-label-:rc:"
+              id="headlessui-listbox-label-:rb:"
             >
               Error
             </label>
@@ -569,7 +569,7 @@ Object {
                 class="flex flex-wrap justify-start items-start gap-1"
               >
                 <span
-                  class="flex gap-2 items-center flex-grow-0 flex-shrink-0 self-center max-w-full [&>div]:max-w-full"
+                  class="flex gap-2 items-center flex-grow-0 flex-shrink-0 self-center max-w-full"
                 >
                   <div
                     class="relative"
@@ -621,7 +621,7 @@ Object {
             <label
               class="block text-bulma pb-2 text-moon-16 opacity-60 cursor-not-allowed"
               data-headlessui-state=""
-              id="headlessui-listbox-label-:rd:"
+              id="headlessui-listbox-label-:rc:"
             >
               Disabled
             </label>
@@ -633,7 +633,7 @@ Object {
                 class="flex flex-wrap justify-start items-start gap-1"
               >
                 <span
-                  class="flex gap-2 items-center flex-grow-0 flex-shrink-0 self-center max-w-full [&>div]:max-w-full"
+                  class="flex gap-2 items-center flex-grow-0 flex-shrink-0 self-center max-w-full"
                 >
                   <div
                     class="relative"
@@ -686,7 +686,7 @@ Object {
             <label
               class="block text-bulma pb-2 text-moon-16"
               data-headlessui-state=""
-              id="headlessui-listbox-label-:re:"
+              id="headlessui-listbox-label-:rd:"
             >
               Placeholder
             </label>
@@ -698,7 +698,7 @@ Object {
                 class="flex flex-wrap justify-start items-start gap-1"
               >
                 <span
-                  class="flex gap-2 items-center flex-grow-0 flex-shrink-0 self-center max-w-full [&>div]:max-w-full"
+                  class="flex gap-2 items-center flex-grow-0 flex-shrink-0 self-center max-w-full"
                 >
                   <div
                     class="relative"
@@ -823,71 +823,7 @@ Object {
               <label
                 class="block text-bulma pb-2 text-moon-16"
                 data-headlessui-state=""
-                id="headlessui-listbox-label-:rf:"
-              >
-                Normal
-              </label>
-              <span
-                class="w-full flex flex-col justify-between rounded-lg py-2 px-3 bg-goku gap-y-1 shadow-input hover:shadow-input-hov focus:shadow-input-focus focus:outline-none focus-visible::shadow-input-focus focus-visible::outline-none"
-                tabindex="-1"
-              >
-                <div
-                  class="flex flex-wrap justify-start items-start gap-1"
-                >
-                  <span
-                    class="flex gap-2 items-center flex-grow-0 flex-shrink-0 self-center max-w-full [&>div]:max-w-full [&>div>span>div]:normal-case"
-                  >
-                    <div
-                      class="relative"
-                    >
-                      <span
-                        class="text-moon-16 w-full text-bulma truncate"
-                      >
-                        <div
-                          class="flex items-center rounded-moon-i-xs gap-1 select-none text-goku bg-bulma py-1 ps-2 pe-1 h-6 text-moon-10-caption uppercase font-medium"
-                        >
-                          <span
-                            class="break-all truncate"
-                          >
-                            Preset data
-                          </span>
-                          <span
-                            class="text-moon-16"
-                          >
-                            <svg
-                              class="cursor-pointer"
-                              fill="none"
-                              height="1em"
-                              viewBox="0 0 32 32"
-                              width="1em"
-                              xmlns="http://www.w3.org/2000/svg"
-                            >
-                              <path
-                                d="M10 10L16 16M16 16L10 22M16 16L22 22M16 16L22 10"
-                                stroke="currentColor"
-                                stroke-linecap="round"
-                                stroke-linejoin="round"
-                              />
-                            </svg>
-                          </span>
-                        </div>
-                      </span>
-                    </div>
-                  </span>
-                </div>
-                <input
-                  class="block w-full max-w-full py-0 m-0 appearance-none text-bulma transition-shadow box-border relative z-[2] shadow-input hover:shadow-input-hov focus:shadow-input-focus focus:outline-none focus-visible::shadow-input-focus focus-visible::outline-none rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:[&:not([readonly])]:hover:rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-sm rtl:invalid:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:hover:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-sm ltr:invalid:rounded-moon-i-sm before:box-border after:box-border placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity placeholder:delay-75 read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input input-dt-shared invalid:shadow-input-err invalid:hover:shadow-input-err invalid:focus:shadow-input-err invalid:focus-visible:shadow-input-err flex-grow h-full border-0 !rounded-none bg-transparent px-0 !shadow-none hover:shadow-none focus:shadow-none focus-visible:shadow-none text-moon-16 leading-5"
-                  type="text"
-                />
-              </span>
-            </div>
-            <div
-              class="flex flex-col w-full max-w-xs"
-            >
-              <label
-                class="block text-bulma pb-2 text-moon-16"
-                data-headlessui-state=""
-                id="headlessui-listbox-label-:rg:"
+                id="headlessui-listbox-label-:re:"
               >
                 Lower
               </label>
@@ -899,7 +835,7 @@ Object {
                   class="flex flex-wrap justify-start items-start gap-1"
                 >
                   <span
-                    class="flex gap-2 items-center flex-grow-0 flex-shrink-0 self-center max-w-full [&>div]:max-w-full [&>div>span>div]:lowercase"
+                    class="flex gap-2 items-center flex-grow-0 flex-shrink-0 self-center max-w-full"
                   >
                     <div
                       class="relative"
@@ -908,7 +844,7 @@ Object {
                         class="text-moon-16 w-full text-bulma truncate"
                       >
                         <div
-                          class="flex items-center rounded-moon-i-xs gap-1 select-none text-goku bg-bulma py-1 ps-2 pe-1 h-6 text-moon-10-caption uppercase font-medium"
+                          class="flex items-center rounded-moon-i-xs gap-1 select-none text-goku bg-bulma py-1 ps-2 pe-1 h-6 text-moon-12"
                         >
                           <span
                             class="break-all truncate"
@@ -951,7 +887,7 @@ Object {
               <label
                 class="block text-bulma pb-2 text-moon-16"
                 data-headlessui-state=""
-                id="headlessui-listbox-label-:rh:"
+                id="headlessui-listbox-label-:rf:"
               >
                 Capitalized
               </label>
@@ -963,7 +899,7 @@ Object {
                   class="flex flex-wrap justify-start items-start gap-1"
                 >
                   <span
-                    class="flex gap-2 items-center flex-grow-0 flex-shrink-0 self-center max-w-full [&>div]:max-w-full [&>div>span>div]:capitalize"
+                    class="flex gap-2 items-center flex-grow-0 flex-shrink-0 self-center max-w-full"
                   >
                     <div
                       class="relative"
@@ -1030,71 +966,7 @@ Object {
             <label
               class="block text-bulma pb-2 text-moon-16"
               data-headlessui-state=""
-              id="headlessui-listbox-label-:rf:"
-            >
-              Normal
-            </label>
-            <span
-              class="w-full flex flex-col justify-between rounded-lg py-2 px-3 bg-goku gap-y-1 shadow-input hover:shadow-input-hov focus:shadow-input-focus focus:outline-none focus-visible::shadow-input-focus focus-visible::outline-none"
-              tabindex="-1"
-            >
-              <div
-                class="flex flex-wrap justify-start items-start gap-1"
-              >
-                <span
-                  class="flex gap-2 items-center flex-grow-0 flex-shrink-0 self-center max-w-full [&>div]:max-w-full [&>div>span>div]:normal-case"
-                >
-                  <div
-                    class="relative"
-                  >
-                    <span
-                      class="text-moon-16 w-full text-bulma truncate"
-                    >
-                      <div
-                        class="flex items-center rounded-moon-i-xs gap-1 select-none text-goku bg-bulma py-1 ps-2 pe-1 h-6 text-moon-10-caption uppercase font-medium"
-                      >
-                        <span
-                          class="break-all truncate"
-                        >
-                          Preset data
-                        </span>
-                        <span
-                          class="text-moon-16"
-                        >
-                          <svg
-                            class="cursor-pointer"
-                            fill="none"
-                            height="1em"
-                            viewBox="0 0 32 32"
-                            width="1em"
-                            xmlns="http://www.w3.org/2000/svg"
-                          >
-                            <path
-                              d="M10 10L16 16M16 16L10 22M16 16L22 22M16 16L22 10"
-                              stroke="currentColor"
-                              stroke-linecap="round"
-                              stroke-linejoin="round"
-                            />
-                          </svg>
-                        </span>
-                      </div>
-                    </span>
-                  </div>
-                </span>
-              </div>
-              <input
-                class="block w-full max-w-full py-0 m-0 appearance-none text-bulma transition-shadow box-border relative z-[2] shadow-input hover:shadow-input-hov focus:shadow-input-focus focus:outline-none focus-visible::shadow-input-focus focus-visible::outline-none rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:[&:not([readonly])]:hover:rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-sm rtl:invalid:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:hover:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-sm ltr:invalid:rounded-moon-i-sm before:box-border after:box-border placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity placeholder:delay-75 read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input input-dt-shared invalid:shadow-input-err invalid:hover:shadow-input-err invalid:focus:shadow-input-err invalid:focus-visible:shadow-input-err flex-grow h-full border-0 !rounded-none bg-transparent px-0 !shadow-none hover:shadow-none focus:shadow-none focus-visible:shadow-none text-moon-16 leading-5"
-                type="text"
-              />
-            </span>
-          </div>
-          <div
-            class="flex flex-col w-full max-w-xs"
-          >
-            <label
-              class="block text-bulma pb-2 text-moon-16"
-              data-headlessui-state=""
-              id="headlessui-listbox-label-:rg:"
+              id="headlessui-listbox-label-:re:"
             >
               Lower
             </label>
@@ -1106,7 +978,7 @@ Object {
                 class="flex flex-wrap justify-start items-start gap-1"
               >
                 <span
-                  class="flex gap-2 items-center flex-grow-0 flex-shrink-0 self-center max-w-full [&>div]:max-w-full [&>div>span>div]:lowercase"
+                  class="flex gap-2 items-center flex-grow-0 flex-shrink-0 self-center max-w-full"
                 >
                   <div
                     class="relative"
@@ -1115,7 +987,7 @@ Object {
                       class="text-moon-16 w-full text-bulma truncate"
                     >
                       <div
-                        class="flex items-center rounded-moon-i-xs gap-1 select-none text-goku bg-bulma py-1 ps-2 pe-1 h-6 text-moon-10-caption uppercase font-medium"
+                        class="flex items-center rounded-moon-i-xs gap-1 select-none text-goku bg-bulma py-1 ps-2 pe-1 h-6 text-moon-12"
                       >
                         <span
                           class="break-all truncate"
@@ -1158,7 +1030,7 @@ Object {
             <label
               class="block text-bulma pb-2 text-moon-16"
               data-headlessui-state=""
-              id="headlessui-listbox-label-:rh:"
+              id="headlessui-listbox-label-:rf:"
             >
               Capitalized
             </label>
@@ -1170,7 +1042,7 @@ Object {
                 class="flex flex-wrap justify-start items-start gap-1"
               >
                 <span
-                  class="flex gap-2 items-center flex-grow-0 flex-shrink-0 self-center max-w-full [&>div]:max-w-full [&>div>span>div]:capitalize"
+                  class="flex gap-2 items-center flex-grow-0 flex-shrink-0 self-center max-w-full"
                 >
                   <div
                     class="relative"
@@ -1615,7 +1487,7 @@ Object {
                 class="flex flex-wrap justify-start items-start gap-1"
               >
                 <span
-                  class="flex gap-2 items-center flex-grow-0 flex-shrink-0 self-center max-w-full [&>div]:max-w-full"
+                  class="flex gap-2 items-center flex-grow-0 flex-shrink-0 self-center max-w-full"
                 >
                   <div
                     class="relative"
@@ -1679,7 +1551,7 @@ Object {
                 class="flex flex-wrap justify-start items-start gap-1"
               >
                 <span
-                  class="flex gap-2 items-center flex-grow-0 flex-shrink-0 self-center max-w-full [&>div]:max-w-full"
+                  class="flex gap-2 items-center flex-grow-0 flex-shrink-0 self-center max-w-full"
                 >
                   <div
                     class="relative"
@@ -1744,7 +1616,7 @@ Object {
                 class="flex flex-wrap justify-start items-start gap-1"
               >
                 <span
-                  class="flex gap-2 items-center flex-grow-0 flex-shrink-0 self-center max-w-full [&>div]:max-w-full"
+                  class="flex gap-2 items-center flex-grow-0 flex-shrink-0 self-center max-w-full"
                 >
                   <div
                     class="relative"
@@ -1820,7 +1692,7 @@ Object {
               class="flex flex-wrap justify-start items-start gap-1"
             >
               <span
-                class="flex gap-2 items-center flex-grow-0 flex-shrink-0 self-center max-w-full [&>div]:max-w-full"
+                class="flex gap-2 items-center flex-grow-0 flex-shrink-0 self-center max-w-full"
               >
                 <div
                   class="relative"
@@ -1884,7 +1756,7 @@ Object {
               class="flex flex-wrap justify-start items-start gap-1"
             >
               <span
-                class="flex gap-2 items-center flex-grow-0 flex-shrink-0 self-center max-w-full [&>div]:max-w-full"
+                class="flex gap-2 items-center flex-grow-0 flex-shrink-0 self-center max-w-full"
               >
                 <div
                   class="relative"
@@ -1949,7 +1821,7 @@ Object {
               class="flex flex-wrap justify-start items-start gap-1"
             >
               <span
-                class="flex gap-2 items-center flex-grow-0 flex-shrink-0 self-center max-w-full [&>div]:max-w-full"
+                class="flex gap-2 items-center flex-grow-0 flex-shrink-0 self-center max-w-full"
               >
                 <div
                   class="relative"
@@ -2071,70 +1943,6 @@ Object {
               class="block text-bulma pb-2 text-moon-16"
               data-headlessui-state=""
               id="headlessui-listbox-label-:r6:"
-            >
-              Normal
-            </label>
-            <span
-              class="w-full flex flex-col justify-between rounded-lg py-2 px-3 bg-goku gap-y-1 shadow-input hover:shadow-input-hov focus:shadow-input-focus focus:outline-none focus-visible::shadow-input-focus focus-visible::outline-none"
-              tabindex="-1"
-            >
-              <div
-                class="flex flex-wrap justify-start items-start gap-1"
-              >
-                <span
-                  class="flex gap-2 items-center flex-grow-0 flex-shrink-0 self-center max-w-full [&>div]:max-w-full [&>div>span>div]:normal-case"
-                >
-                  <div
-                    class="relative"
-                  >
-                    <span
-                      class="text-moon-16 w-full text-bulma truncate"
-                    >
-                      <div
-                        class="flex items-center rounded-moon-i-xs gap-1 select-none text-goku bg-bulma py-1 ps-2 pe-1 h-6 text-moon-10-caption uppercase font-medium"
-                      >
-                        <span
-                          class="break-all truncate"
-                        >
-                          Preset data
-                        </span>
-                        <span
-                          class="text-moon-16"
-                        >
-                          <svg
-                            class="cursor-pointer"
-                            fill="none"
-                            height="1em"
-                            viewBox="0 0 32 32"
-                            width="1em"
-                            xmlns="http://www.w3.org/2000/svg"
-                          >
-                            <path
-                              d="M10 10L16 16M16 16L10 22M16 16L22 22M16 16L22 10"
-                              stroke="currentColor"
-                              stroke-linecap="round"
-                              stroke-linejoin="round"
-                            />
-                          </svg>
-                        </span>
-                      </div>
-                    </span>
-                  </div>
-                </span>
-              </div>
-              <input
-                class="block w-full max-w-full py-0 m-0 appearance-none text-bulma transition-shadow box-border relative z-[2] shadow-input hover:shadow-input-hov focus:shadow-input-focus focus:outline-none focus-visible::shadow-input-focus focus-visible::outline-none rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:[&:not([readonly])]:hover:rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-sm rtl:invalid:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:hover:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-sm ltr:invalid:rounded-moon-i-sm before:box-border after:box-border placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity placeholder:delay-75 read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input input-dt-shared invalid:shadow-input-err invalid:hover:shadow-input-err invalid:focus:shadow-input-err invalid:focus-visible:shadow-input-err flex-grow h-full border-0 !rounded-none bg-transparent px-0 !shadow-none hover:shadow-none focus:shadow-none focus-visible:shadow-none text-moon-16 leading-5"
-                type="text"
-              />
-            </span>
-          </div>
-          <div
-            class="flex flex-col w-full max-w-xs"
-          >
-            <label
-              class="block text-bulma pb-2 text-moon-16"
-              data-headlessui-state=""
-              id="headlessui-listbox-label-:r7:"
             >
               Lower
             </label>
@@ -2146,7 +1954,7 @@ Object {
                 class="flex flex-wrap justify-start items-start gap-1"
               >
                 <span
-                  class="flex gap-2 items-center flex-grow-0 flex-shrink-0 self-center max-w-full [&>div]:max-w-full [&>div>span>div]:lowercase"
+                  class="flex gap-2 items-center flex-grow-0 flex-shrink-0 self-center max-w-full"
                 >
                   <div
                     class="relative"
@@ -2155,7 +1963,7 @@ Object {
                       class="text-moon-16 w-full text-bulma truncate"
                     >
                       <div
-                        class="flex items-center rounded-moon-i-xs gap-1 select-none text-goku bg-bulma py-1 ps-2 pe-1 h-6 text-moon-10-caption uppercase font-medium"
+                        class="flex items-center rounded-moon-i-xs gap-1 select-none text-goku bg-bulma py-1 ps-2 pe-1 h-6 text-moon-12"
                       >
                         <span
                           class="break-all truncate"
@@ -2198,7 +2006,7 @@ Object {
             <label
               class="block text-bulma pb-2 text-moon-16"
               data-headlessui-state=""
-              id="headlessui-listbox-label-:r8:"
+              id="headlessui-listbox-label-:r7:"
             >
               Capitalized
             </label>
@@ -2210,7 +2018,7 @@ Object {
                 class="flex flex-wrap justify-start items-start gap-1"
               >
                 <span
-                  class="flex gap-2 items-center flex-grow-0 flex-shrink-0 self-center max-w-full [&>div]:max-w-full [&>div>span>div]:capitalize"
+                  class="flex gap-2 items-center flex-grow-0 flex-shrink-0 self-center max-w-full"
                 >
                   <div
                     class="relative"
@@ -2274,70 +2082,6 @@ Object {
             class="block text-bulma pb-2 text-moon-16"
             data-headlessui-state=""
             id="headlessui-listbox-label-:r6:"
-          >
-            Normal
-          </label>
-          <span
-            class="w-full flex flex-col justify-between rounded-lg py-2 px-3 bg-goku gap-y-1 shadow-input hover:shadow-input-hov focus:shadow-input-focus focus:outline-none focus-visible::shadow-input-focus focus-visible::outline-none"
-            tabindex="-1"
-          >
-            <div
-              class="flex flex-wrap justify-start items-start gap-1"
-            >
-              <span
-                class="flex gap-2 items-center flex-grow-0 flex-shrink-0 self-center max-w-full [&>div]:max-w-full [&>div>span>div]:normal-case"
-              >
-                <div
-                  class="relative"
-                >
-                  <span
-                    class="text-moon-16 w-full text-bulma truncate"
-                  >
-                    <div
-                      class="flex items-center rounded-moon-i-xs gap-1 select-none text-goku bg-bulma py-1 ps-2 pe-1 h-6 text-moon-10-caption uppercase font-medium"
-                    >
-                      <span
-                        class="break-all truncate"
-                      >
-                        Preset data
-                      </span>
-                      <span
-                        class="text-moon-16"
-                      >
-                        <svg
-                          class="cursor-pointer"
-                          fill="none"
-                          height="1em"
-                          viewBox="0 0 32 32"
-                          width="1em"
-                          xmlns="http://www.w3.org/2000/svg"
-                        >
-                          <path
-                            d="M10 10L16 16M16 16L10 22M16 16L22 22M16 16L22 10"
-                            stroke="currentColor"
-                            stroke-linecap="round"
-                            stroke-linejoin="round"
-                          />
-                        </svg>
-                      </span>
-                    </div>
-                  </span>
-                </div>
-              </span>
-            </div>
-            <input
-              class="block w-full max-w-full py-0 m-0 appearance-none text-bulma transition-shadow box-border relative z-[2] shadow-input hover:shadow-input-hov focus:shadow-input-focus focus:outline-none focus-visible::shadow-input-focus focus-visible::outline-none rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:[&:not([readonly])]:hover:rounded-moon-i-sm rtl:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-sm rtl:invalid:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:hover:rounded-moon-i-sm ltr:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-sm ltr:invalid:rounded-moon-i-sm before:box-border after:box-border placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity placeholder:delay-75 read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input input-dt-shared invalid:shadow-input-err invalid:hover:shadow-input-err invalid:focus:shadow-input-err invalid:focus-visible:shadow-input-err flex-grow h-full border-0 !rounded-none bg-transparent px-0 !shadow-none hover:shadow-none focus:shadow-none focus-visible:shadow-none text-moon-16 leading-5"
-              type="text"
-            />
-          </span>
-        </div>
-        <div
-          class="flex flex-col w-full max-w-xs"
-        >
-          <label
-            class="block text-bulma pb-2 text-moon-16"
-            data-headlessui-state=""
-            id="headlessui-listbox-label-:r7:"
           >
             Lower
           </label>
@@ -2349,7 +2093,7 @@ Object {
               class="flex flex-wrap justify-start items-start gap-1"
             >
               <span
-                class="flex gap-2 items-center flex-grow-0 flex-shrink-0 self-center max-w-full [&>div]:max-w-full [&>div>span>div]:lowercase"
+                class="flex gap-2 items-center flex-grow-0 flex-shrink-0 self-center max-w-full"
               >
                 <div
                   class="relative"
@@ -2358,7 +2102,7 @@ Object {
                     class="text-moon-16 w-full text-bulma truncate"
                   >
                     <div
-                      class="flex items-center rounded-moon-i-xs gap-1 select-none text-goku bg-bulma py-1 ps-2 pe-1 h-6 text-moon-10-caption uppercase font-medium"
+                      class="flex items-center rounded-moon-i-xs gap-1 select-none text-goku bg-bulma py-1 ps-2 pe-1 h-6 text-moon-12"
                     >
                       <span
                         class="break-all truncate"
@@ -2401,7 +2145,7 @@ Object {
           <label
             class="block text-bulma pb-2 text-moon-16"
             data-headlessui-state=""
-            id="headlessui-listbox-label-:r8:"
+            id="headlessui-listbox-label-:r7:"
           >
             Capitalized
           </label>
@@ -2413,7 +2157,7 @@ Object {
               class="flex flex-wrap justify-start items-start gap-1"
             >
               <span
-                class="flex gap-2 items-center flex-grow-0 flex-shrink-0 self-center max-w-full [&>div]:max-w-full [&>div>span>div]:capitalize"
+                class="flex gap-2 items-center flex-grow-0 flex-shrink-0 self-center max-w-full"
               >
                 <div
                   class="relative"