From 864acfa5db372e06275e898e72a41c3b443aabd1 Mon Sep 17 00:00:00 2001
From: Karl Kallavus <232199+karl-kallavus@users.noreply.github.com>
Date: Wed, 4 Oct 2023 11:42:52 +0200
Subject: [PATCH] MDS-710 MultiSelect example of the Combobox component with
 SelectAll ability (#2417)

* feat: Combobox.AllSelectableOptions subcomponent

* feat: a MultiSelect example of the Combobox component with SelectAll ability
---
 next-docs/pages/components/combobox.tsx       |   7 +
 .../examples/combobox/MultiAllSelect.tsx      | 123 ++++
 .../__snapshots__/index.test.tsx.snap         | 638 ++++++++++++++----
 .../combobox/__tests__/index.test.tsx         |   9 +
 workspaces/core/src/combobox/Combobox.tsx     |   2 +-
 5 files changed, 636 insertions(+), 143 deletions(-)
 create mode 100644 next-docs/public/examples/combobox/MultiAllSelect.tsx

diff --git a/next-docs/pages/components/combobox.tsx b/next-docs/pages/components/combobox.tsx
index 7f9187e25e..958af9b2a3 100644
--- a/next-docs/pages/components/combobox.tsx
+++ b/next-docs/pages/components/combobox.tsx
@@ -9,6 +9,7 @@ import Default from '../../public/examples/combobox/Default';
 import InsetMultiSelect from '../../public/examples/combobox/InsetMultiSelect';
 import InsetSelect from '../../public/examples/combobox/InsetSelect';
 import InsetSelectStates from '../../public/examples/combobox/InsetSelectStates';
+import MultiAllSelect from '../../public/examples/combobox/MultiAllSelect';
 import MultiSelect from '../../public/examples/combobox/MultiSelect';
 import Select from '../../public/examples/combobox/Select';
 import SelectStates from '../../public/examples/combobox/SelectStates';
@@ -118,6 +119,12 @@ const PageCombobox = () => {
         code={examples ? examples.MultiSelect : 'Loading'}
       />
 
+      <Preview
+        title='MultiSelect with "Select all" option'
+        preview={<MultiAllSelect />}
+        code={examples ? examples.MultiAllSelect : 'Loading'}
+      />
+
       <ComponentAnatomy>
         {`<Combobox>
   <Combobox.InsetMultiSelect>...</Combobox.InsetMultiSelect>
diff --git a/next-docs/public/examples/combobox/MultiAllSelect.tsx b/next-docs/public/examples/combobox/MultiAllSelect.tsx
new file mode 100644
index 0000000000..a1585ec86c
--- /dev/null
+++ b/next-docs/public/examples/combobox/MultiAllSelect.tsx
@@ -0,0 +1,123 @@
+import React, { useCallback, useState } from 'react';
+import { Combobox, MenuItem } from '@heathmont/moon-core-tw';
+import { ControlsChevronDownSmall } from '@heathmont/moon-icons-tw';
+import { boolean } from 'zod';
+
+const people = [
+  { id: 1, label: 'Wade Cooper', value: 'Wade Cooper' },
+  { id: 2, label: 'Arlene Mccoy', value: 'Arlene Mccoy' },
+  { id: 3, label: 'Devon Webb', value: 'Devon Webb' },
+  { id: 4, label: 'Tom Cook', value: 'Tom Cook' },
+  { id: 5, label: 'Tanya Fox', value: 'Tanya Fox' },
+  { id: 6, label: 'Hellen Schmidt', value: 'Hellen Schmidt' },
+];
+
+const filter = (
+  query: string,
+  people: { id: number; label: string; value: string }[]
+) => {
+  return query === ''
+    ? people
+    : people.filter(({ value }) =>
+        value
+          .toLowerCase()
+          .replace(/\s+/g, '')
+          .includes(query.toLowerCase().replace(/\s+/g, ''))
+      );
+};
+
+const Example = () => {
+  const [selected, setSelected] = useState([]);
+  const [isAllSelected, setIsAllSelected] = useState(false);
+  const [query, setQuery] = useState<string>('');
+
+  const filteredPeople = filter(query, people);
+
+  const onChange = useCallback((value: unknown) => {
+    const selectedItems = value as [];
+    const allSelected = selectedItems.filter((item) => {
+      return Array.isArray(item);
+    });
+
+    if (allSelected.length > 0) {
+      const items = (allSelected.at(0) as unknown) as [];
+      if (isAllSelected) {
+        setSelected([]);
+      } else {
+        setSelected(items);
+      }
+      setIsAllSelected(!isAllSelected);
+    } else {
+      setSelected(selectedItems);
+      setIsAllSelected(selectedItems.length === people.length);
+    }
+  }, [setSelected, isAllSelected]);
+
+  const onClear = useCallback(() => {
+    setSelected([]);
+    setIsAllSelected(false);
+  }, [setSelected, setIsAllSelected]);
+
+  return (
+    <div className="flex flex-col items-center lg:flex-row lg:justify-center lg:items-end w-full gap-4">
+      <Combobox
+        value={selected}
+        onChange={onChange}
+        onQueryChange={setQuery}
+        onClear={onClear}
+        className="w-full max-w-xs"
+        size="md"
+        multiple
+      >
+        {({ open }) => (
+          <>
+            <Combobox.MultiSelect
+              open={open}
+              counter={selected.length}
+              placeholder="Choose an option"
+              displayValue={({ label }) => label}
+              onClose={console.log}
+            >
+              <ControlsChevronDownSmall />
+            </Combobox.MultiSelect>
+            <Combobox.Transition>
+              <Combobox.Options>
+                {filteredPeople.length === 0 && query !== '' ? (
+                  <div className="relative cursor-default select-none py-2 px-4 text-trunks">
+                    Nothing found.
+                  </div>
+                ) : (
+                  <>
+                    {!query.length && (
+                      <Combobox.Option value={people} key={-1}>
+                        {({ active }) => (
+                          <MenuItem isActive={active}>
+                            <MenuItem.Title>Select all</MenuItem.Title>
+                            <MenuItem.Checkbox isSelected={isAllSelected} />
+                          </MenuItem>
+                        )}
+                      </Combobox.Option>
+                    )}
+                    {filteredPeople.map((person, index) => (
+                      <Combobox.Option value={person} key={index}>
+                        {({ selected, active }) => (
+                          <MenuItem isActive={active} isSelected={selected}>
+                            <MenuItem.Title>{person.label}</MenuItem.Title>
+                            <MenuItem.Checkbox isSelected={selected} />
+                          </MenuItem>
+                        )}
+                      </Combobox.Option>
+                    ))}
+                  </>
+                )}
+              </Combobox.Options>
+            </Combobox.Transition>
+            <Combobox.Hint>Informative message holder</Combobox.Hint>
+          </>
+        )}
+      </Combobox>
+    </div>
+  );
+};
+
+export default Example;
diff --git a/next-docs/public/examples/combobox/__tests__/__snapshots__/index.test.tsx.snap b/next-docs/public/examples/combobox/__tests__/__snapshots__/index.test.tsx.snap
index f39998249d..2a4ac14d58 100644
--- a/next-docs/public/examples/combobox/__tests__/__snapshots__/index.test.tsx.snap
+++ b/next-docs/public/examples/combobox/__tests__/__snapshots__/index.test.tsx.snap
@@ -23,7 +23,7 @@ Object {
                 aria-expanded="false"
                 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"
                 data-headlessui-state=""
-                id="headlessui-combobox-input-:r21:"
+                id="headlessui-combobox-input-:r24:"
                 placeholder="Choose a name..."
                 role="combobox"
                 type="text"
@@ -35,7 +35,7 @@ Object {
                 aria-label="Open"
                 class="w-6 h-6 text-moon-24 text-bulma transition-transform flex-grow-0 flex-shrink-0 self-center"
                 data-headlessui-state=""
-                id="headlessui-combobox-button-:r22:"
+                id="headlessui-combobox-button-:r25:"
                 tabindex="-1"
                 type="button"
               >
@@ -74,7 +74,7 @@ Object {
                 aria-expanded="false"
                 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"
                 data-headlessui-state=""
-                id="headlessui-combobox-input-:r23:"
+                id="headlessui-combobox-input-:r26:"
                 placeholder="Choose a name..."
                 role="combobox"
                 type="text"
@@ -86,7 +86,7 @@ Object {
                 aria-label="Open"
                 class="w-6 h-6 text-moon-24 text-bulma transition-transform flex-grow-0 flex-shrink-0 self-center"
                 data-headlessui-state=""
-                id="headlessui-combobox-button-:r24:"
+                id="headlessui-combobox-button-:r27:"
                 tabindex="-1"
                 type="button"
               >
@@ -136,7 +136,7 @@ Object {
               aria-expanded="false"
               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"
               data-headlessui-state=""
-              id="headlessui-combobox-input-:r21:"
+              id="headlessui-combobox-input-:r24:"
               placeholder="Choose a name..."
               role="combobox"
               type="text"
@@ -148,7 +148,7 @@ Object {
               aria-label="Open"
               class="w-6 h-6 text-moon-24 text-bulma transition-transform flex-grow-0 flex-shrink-0 self-center"
               data-headlessui-state=""
-              id="headlessui-combobox-button-:r22:"
+              id="headlessui-combobox-button-:r25:"
               tabindex="-1"
               type="button"
             >
@@ -187,7 +187,7 @@ Object {
               aria-expanded="false"
               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"
               data-headlessui-state=""
-              id="headlessui-combobox-input-:r23:"
+              id="headlessui-combobox-input-:r26:"
               placeholder="Choose a name..."
               role="combobox"
               type="text"
@@ -199,7 +199,7 @@ Object {
               aria-label="Open"
               class="w-6 h-6 text-moon-24 text-bulma transition-transform flex-grow-0 flex-shrink-0 self-center"
               data-headlessui-state=""
-              id="headlessui-combobox-button-:r24:"
+              id="headlessui-combobox-button-:r27:"
               tabindex="-1"
               type="button"
             >
@@ -309,7 +309,7 @@ Object {
                   aria-expanded="false"
                   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 pt-3 input-xl-dt-label text-moon-16 leading-5"
                   data-headlessui-state=""
-                  id="headlessui-combobox-input-:r26:"
+                  id="headlessui-combobox-input-:r29:"
                   placeholder="Choose an option"
                   role="combobox"
                   type="text"
@@ -327,7 +327,7 @@ Object {
                 aria-label="Open"
                 class="w-6 h-6 text-moon-24 text-bulma transition-transform flex-grow-0 flex-shrink-0 self-center"
                 data-headlessui-state=""
-                id="headlessui-combobox-button-:r27:"
+                id="headlessui-combobox-button-:r2a:"
                 tabindex="-1"
                 type="button"
               >
@@ -380,7 +380,7 @@ Object {
                 aria-expanded="false"
                 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 pt-3 input-xl-dt-label text-moon-16 leading-5"
                 data-headlessui-state=""
-                id="headlessui-combobox-input-:r26:"
+                id="headlessui-combobox-input-:r29:"
                 placeholder="Choose an option"
                 role="combobox"
                 type="text"
@@ -398,7 +398,7 @@ Object {
               aria-label="Open"
               class="w-6 h-6 text-moon-24 text-bulma transition-transform flex-grow-0 flex-shrink-0 self-center"
               data-headlessui-state=""
-              id="headlessui-combobox-button-:r27:"
+              id="headlessui-combobox-button-:r2a:"
               tabindex="-1"
               type="button"
             >
@@ -508,7 +508,7 @@ Object {
                   aria-expanded="false"
                   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 pt-3 input-xl-dt-label text-moon-16 leading-5"
                   data-headlessui-state=""
-                  id="headlessui-combobox-input-:r29:"
+                  id="headlessui-combobox-input-:r2c:"
                   placeholder="Choose an option"
                   role="combobox"
                   type="text"
@@ -526,7 +526,7 @@ Object {
                 aria-label="Open"
                 class="w-6 h-6 text-moon-24 text-bulma transition-transform flex-grow-0 flex-shrink-0 self-center"
                 data-headlessui-state=""
-                id="headlessui-combobox-button-:r2a:"
+                id="headlessui-combobox-button-:r2d:"
                 tabindex="-1"
                 type="button"
               >
@@ -579,7 +579,7 @@ Object {
                 aria-expanded="false"
                 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 pt-3 input-xl-dt-label text-moon-16 leading-5"
                 data-headlessui-state=""
-                id="headlessui-combobox-input-:r29:"
+                id="headlessui-combobox-input-:r2c:"
                 placeholder="Choose an option"
                 role="combobox"
                 type="text"
@@ -597,7 +597,7 @@ Object {
               aria-label="Open"
               class="w-6 h-6 text-moon-24 text-bulma transition-transform flex-grow-0 flex-shrink-0 self-center"
               data-headlessui-state=""
-              id="headlessui-combobox-button-:r2a:"
+              id="headlessui-combobox-button-:r2d:"
               tabindex="-1"
               type="button"
             >
@@ -707,7 +707,7 @@ Object {
                   aria-expanded="false"
                   class="block w-full max-w-full py-0 m-0 appearance-none text-bulma transition-shadow box-border relative z-[2] focus:outline-none focus-visible::shadow-input-focus focus-visible::outline-none shadow-input-err hover:shadow-input-err focus:shadow-input-err focus-visible:shadow-input-err 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 pt-3 input-xl-dt-label text-moon-16 leading-5"
                   data-headlessui-state=""
-                  id="headlessui-combobox-input-:r2c:"
+                  id="headlessui-combobox-input-:r2f:"
                   placeholder="Choose an option"
                   role="combobox"
                   type="text"
@@ -725,7 +725,7 @@ Object {
                 aria-label="Open"
                 class="w-6 h-6 text-moon-24 text-bulma transition-transform flex-grow-0 flex-shrink-0 self-center"
                 data-headlessui-state=""
-                id="headlessui-combobox-button-:r2d:"
+                id="headlessui-combobox-button-:r2g:"
                 tabindex="-1"
                 type="button"
               >
@@ -768,7 +768,7 @@ Object {
                   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 opacity-60 cursor-not-allowed flex-grow h-full border-0 !rounded-none bg-transparent px-0 !shadow-none hover:shadow-none focus:shadow-none focus-visible:shadow-none pt-3 input-xl-dt-label text-moon-16 leading-5"
                   data-headlessui-state="disabled"
                   disabled=""
-                  id="headlessui-combobox-input-:r2f:"
+                  id="headlessui-combobox-input-:r2i:"
                   placeholder="Choose an option"
                   role="combobox"
                   type="text"
@@ -787,7 +787,7 @@ Object {
                 class="w-6 h-6 text-moon-24 text-bulma transition-transform flex-grow-0 flex-shrink-0 self-center cursor-not-allowed"
                 data-headlessui-state="disabled"
                 disabled=""
-                id="headlessui-combobox-button-:r2g:"
+                id="headlessui-combobox-button-:r2j:"
                 tabindex="-1"
                 type="button"
               >
@@ -830,7 +830,7 @@ Object {
                   aria-label="Without placeholder"
                   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 input-xl pt-3 input-xl-dt-label text-moon-16 leading-5"
                   data-headlessui-state=""
-                  id="headlessui-combobox-input-:r2i:"
+                  id="headlessui-combobox-input-:r2l:"
                   placeholder=""
                   role="combobox"
                   type="text"
@@ -848,7 +848,7 @@ Object {
                 aria-label="Open"
                 class="w-6 h-6 text-moon-24 text-bulma transition-transform flex-grow-0 flex-shrink-0 self-center"
                 data-headlessui-state=""
-                id="headlessui-combobox-button-:r2j:"
+                id="headlessui-combobox-button-:r2m:"
                 tabindex="-1"
                 type="button"
               >
@@ -890,7 +890,7 @@ Object {
                   aria-expanded="false"
                   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 pt-3 input-xl-dt-label text-moon-16 leading-5"
                   data-headlessui-state=""
-                  id="headlessui-combobox-input-:r2l:"
+                  id="headlessui-combobox-input-:r2o:"
                   placeholder="Choose an option"
                   role="combobox"
                   type="text"
@@ -908,7 +908,7 @@ Object {
                 aria-label="Open"
                 class="w-6 h-6 text-moon-24 text-bulma transition-transform flex-grow-0 flex-shrink-0 self-center"
                 data-headlessui-state=""
-                id="headlessui-combobox-button-:r2m:"
+                id="headlessui-combobox-button-:r2p:"
                 tabindex="-1"
                 type="button"
               >
@@ -961,7 +961,7 @@ Object {
                 aria-expanded="false"
                 class="block w-full max-w-full py-0 m-0 appearance-none text-bulma transition-shadow box-border relative z-[2] focus:outline-none focus-visible::shadow-input-focus focus-visible::outline-none shadow-input-err hover:shadow-input-err focus:shadow-input-err focus-visible:shadow-input-err 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 pt-3 input-xl-dt-label text-moon-16 leading-5"
                 data-headlessui-state=""
-                id="headlessui-combobox-input-:r2c:"
+                id="headlessui-combobox-input-:r2f:"
                 placeholder="Choose an option"
                 role="combobox"
                 type="text"
@@ -979,7 +979,7 @@ Object {
               aria-label="Open"
               class="w-6 h-6 text-moon-24 text-bulma transition-transform flex-grow-0 flex-shrink-0 self-center"
               data-headlessui-state=""
-              id="headlessui-combobox-button-:r2d:"
+              id="headlessui-combobox-button-:r2g:"
               tabindex="-1"
               type="button"
             >
@@ -1022,7 +1022,7 @@ Object {
                 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 opacity-60 cursor-not-allowed flex-grow h-full border-0 !rounded-none bg-transparent px-0 !shadow-none hover:shadow-none focus:shadow-none focus-visible:shadow-none pt-3 input-xl-dt-label text-moon-16 leading-5"
                 data-headlessui-state="disabled"
                 disabled=""
-                id="headlessui-combobox-input-:r2f:"
+                id="headlessui-combobox-input-:r2i:"
                 placeholder="Choose an option"
                 role="combobox"
                 type="text"
@@ -1041,7 +1041,7 @@ Object {
               class="w-6 h-6 text-moon-24 text-bulma transition-transform flex-grow-0 flex-shrink-0 self-center cursor-not-allowed"
               data-headlessui-state="disabled"
               disabled=""
-              id="headlessui-combobox-button-:r2g:"
+              id="headlessui-combobox-button-:r2j:"
               tabindex="-1"
               type="button"
             >
@@ -1084,7 +1084,7 @@ Object {
                 aria-label="Without placeholder"
                 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 input-xl pt-3 input-xl-dt-label text-moon-16 leading-5"
                 data-headlessui-state=""
-                id="headlessui-combobox-input-:r2i:"
+                id="headlessui-combobox-input-:r2l:"
                 placeholder=""
                 role="combobox"
                 type="text"
@@ -1102,7 +1102,7 @@ Object {
               aria-label="Open"
               class="w-6 h-6 text-moon-24 text-bulma transition-transform flex-grow-0 flex-shrink-0 self-center"
               data-headlessui-state=""
-              id="headlessui-combobox-button-:r2j:"
+              id="headlessui-combobox-button-:r2m:"
               tabindex="-1"
               type="button"
             >
@@ -1144,7 +1144,7 @@ Object {
                 aria-expanded="false"
                 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 pt-3 input-xl-dt-label text-moon-16 leading-5"
                 data-headlessui-state=""
-                id="headlessui-combobox-input-:r2l:"
+                id="headlessui-combobox-input-:r2o:"
                 placeholder="Choose an option"
                 role="combobox"
                 type="text"
@@ -1162,7 +1162,188 @@ Object {
               aria-label="Open"
               class="w-6 h-6 text-moon-24 text-bulma transition-transform flex-grow-0 flex-shrink-0 self-center"
               data-headlessui-state=""
-              id="headlessui-combobox-button-:r2m:"
+              id="headlessui-combobox-button-:r2p:"
+              tabindex="-1"
+              type="button"
+            >
+              <svg
+                fill="none"
+                height="1em"
+                viewBox="0 0 32 32"
+                width="1em"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  d="M22 13L16 19L10 13"
+                  stroke="currentColor"
+                  stroke-linecap="round"
+                  stroke-linejoin="round"
+                />
+              </svg>
+            </button>
+          </div>
+          <p
+            class="inline-block mt-2 ps-4 text-moon-12 text-trunks"
+            role="alert"
+          >
+            Informative message holder
+          </p>
+        </div>
+      </div>
+    </div>
+  </div>,
+  "debug": [Function],
+  "findAllByAltText": [Function],
+  "findAllByDisplayValue": [Function],
+  "findAllByLabelText": [Function],
+  "findAllByPlaceholderText": [Function],
+  "findAllByRole": [Function],
+  "findAllByTestId": [Function],
+  "findAllByText": [Function],
+  "findAllByTitle": [Function],
+  "findByAltText": [Function],
+  "findByDisplayValue": [Function],
+  "findByLabelText": [Function],
+  "findByPlaceholderText": [Function],
+  "findByRole": [Function],
+  "findByTestId": [Function],
+  "findByText": [Function],
+  "findByTitle": [Function],
+  "getAllByAltText": [Function],
+  "getAllByDisplayValue": [Function],
+  "getAllByLabelText": [Function],
+  "getAllByPlaceholderText": [Function],
+  "getAllByRole": [Function],
+  "getAllByTestId": [Function],
+  "getAllByText": [Function],
+  "getAllByTitle": [Function],
+  "getByAltText": [Function],
+  "getByDisplayValue": [Function],
+  "getByLabelText": [Function],
+  "getByPlaceholderText": [Function],
+  "getByRole": [Function],
+  "getByTestId": [Function],
+  "getByText": [Function],
+  "getByTitle": [Function],
+  "queryAllByAltText": [Function],
+  "queryAllByDisplayValue": [Function],
+  "queryAllByLabelText": [Function],
+  "queryAllByPlaceholderText": [Function],
+  "queryAllByRole": [Function],
+  "queryAllByTestId": [Function],
+  "queryAllByText": [Function],
+  "queryAllByTitle": [Function],
+  "queryByAltText": [Function],
+  "queryByDisplayValue": [Function],
+  "queryByLabelText": [Function],
+  "queryByPlaceholderText": [Function],
+  "queryByRole": [Function],
+  "queryByTestId": [Function],
+  "queryByText": [Function],
+  "queryByTitle": [Function],
+  "rerender": [Function],
+  "unmount": [Function],
+}
+`;
+
+exports[`Combobox in RTL renders MultiAllSelect 1`] = `
+Object {
+  "asFragment": [Function],
+  "baseElement": <body>
+    <div>
+      <div
+        dir="rtl"
+      >
+        <div
+          class="flex flex-col items-center lg:flex-row lg:justify-center lg:items-end w-full gap-4"
+        >
+          <div
+            class="relative w-full max-w-xs"
+          >
+            <div
+              class="relative flex flex-nowrap w-full align-middle items-center rounded-lg py-2 px-3 bg-gohan gap-x-2 shadow-input hover:shadow-input-hov focus:shadow-input-focus focus:outline-none focus-visible::shadow-input-focus focus-visible::outline-none"
+              tabindex="-1"
+            >
+              <input
+                aria-autocomplete="list"
+                aria-expanded="false"
+                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"
+                data-headlessui-state=""
+                id="headlessui-combobox-input-:r37:"
+                placeholder="Choose an option"
+                role="combobox"
+                type="text"
+                value=""
+              />
+              <button
+                aria-expanded="false"
+                aria-haspopup="listbox"
+                aria-label="Open"
+                class="w-6 h-6 text-moon-24 text-bulma transition-transform flex-grow-0 flex-shrink-0 self-center"
+                data-headlessui-state=""
+                id="headlessui-combobox-button-:r38:"
+                tabindex="-1"
+                type="button"
+              >
+                <svg
+                  fill="none"
+                  height="1em"
+                  viewBox="0 0 32 32"
+                  width="1em"
+                  xmlns="http://www.w3.org/2000/svg"
+                >
+                  <path
+                    d="M22 13L16 19L10 13"
+                    stroke="currentColor"
+                    stroke-linecap="round"
+                    stroke-linejoin="round"
+                  />
+                </svg>
+              </button>
+            </div>
+            <p
+              class="inline-block mt-2 ps-4 text-moon-12 text-trunks"
+              role="alert"
+            >
+              Informative message holder
+            </p>
+          </div>
+        </div>
+      </div>
+    </div>
+  </body>,
+  "container": <div>
+    <div
+      dir="rtl"
+    >
+      <div
+        class="flex flex-col items-center lg:flex-row lg:justify-center lg:items-end w-full gap-4"
+      >
+        <div
+          class="relative w-full max-w-xs"
+        >
+          <div
+            class="relative flex flex-nowrap w-full align-middle items-center rounded-lg py-2 px-3 bg-gohan gap-x-2 shadow-input hover:shadow-input-hov focus:shadow-input-focus focus:outline-none focus-visible::shadow-input-focus focus-visible::outline-none"
+            tabindex="-1"
+          >
+            <input
+              aria-autocomplete="list"
+              aria-expanded="false"
+              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"
+              data-headlessui-state=""
+              id="headlessui-combobox-input-:r37:"
+              placeholder="Choose an option"
+              role="combobox"
+              type="text"
+              value=""
+            />
+            <button
+              aria-expanded="false"
+              aria-haspopup="listbox"
+              aria-label="Open"
+              class="w-6 h-6 text-moon-24 text-bulma transition-transform flex-grow-0 flex-shrink-0 self-center"
+              data-headlessui-state=""
+              id="headlessui-combobox-button-:r38:"
               tabindex="-1"
               type="button"
             >
@@ -1263,7 +1444,7 @@ Object {
             <label
               class="block text-bulma pb-2 text-moon-14"
               data-headlessui-state=""
-              id="headlessui-listbox-label-:r2n:"
+              id="headlessui-listbox-label-:r2q:"
             >
               Small
             </label>
@@ -1276,7 +1457,7 @@ Object {
                 aria-expanded="false"
                 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-14 leading-4"
                 data-headlessui-state=""
-                id="headlessui-combobox-input-:r2p:"
+                id="headlessui-combobox-input-:r2s:"
                 placeholder="Choose an option"
                 role="combobox"
                 type="text"
@@ -1288,7 +1469,7 @@ Object {
                 aria-label="Open"
                 class="w-4 h-4 text-moon-16 text-bulma transition-transform flex-grow-0 flex-shrink-0 self-center"
                 data-headlessui-state=""
-                id="headlessui-combobox-button-:r2q:"
+                id="headlessui-combobox-button-:r2t:"
                 tabindex="-1"
                 type="button"
               >
@@ -1321,7 +1502,7 @@ Object {
             <label
               class="block text-bulma pb-2 text-moon-16"
               data-headlessui-state=""
-              id="headlessui-listbox-label-:r2r:"
+              id="headlessui-listbox-label-:r2u:"
             >
               Medium
             </label>
@@ -1334,7 +1515,7 @@ Object {
                 aria-expanded="false"
                 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"
                 data-headlessui-state=""
-                id="headlessui-combobox-input-:r2t:"
+                id="headlessui-combobox-input-:r30:"
                 placeholder="Choose an option"
                 role="combobox"
                 type="text"
@@ -1346,7 +1527,7 @@ Object {
                 aria-label="Open"
                 class="w-6 h-6 text-moon-24 text-bulma transition-transform flex-grow-0 flex-shrink-0 self-center"
                 data-headlessui-state=""
-                id="headlessui-combobox-button-:r2u:"
+                id="headlessui-combobox-button-:r31:"
                 tabindex="-1"
                 type="button"
               >
@@ -1379,7 +1560,7 @@ Object {
             <label
               class="block text-bulma pb-2 text-moon-16"
               data-headlessui-state=""
-              id="headlessui-listbox-label-:r2v:"
+              id="headlessui-listbox-label-:r32:"
             >
               Large
             </label>
@@ -1392,7 +1573,7 @@ Object {
                 aria-expanded="false"
                 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-18 leading-5"
                 data-headlessui-state=""
-                id="headlessui-combobox-input-:r31:"
+                id="headlessui-combobox-input-:r34:"
                 placeholder="Choose an option"
                 role="combobox"
                 type="text"
@@ -1404,7 +1585,7 @@ Object {
                 aria-label="Open"
                 class="w-6 h-6 text-moon-24 text-bulma transition-transform flex-grow-0 flex-shrink-0 self-center"
                 data-headlessui-state=""
-                id="headlessui-combobox-button-:r32:"
+                id="headlessui-combobox-button-:r35:"
                 tabindex="-1"
                 type="button"
               >
@@ -1448,7 +1629,7 @@ Object {
           <label
             class="block text-bulma pb-2 text-moon-14"
             data-headlessui-state=""
-            id="headlessui-listbox-label-:r2n:"
+            id="headlessui-listbox-label-:r2q:"
           >
             Small
           </label>
@@ -1461,7 +1642,7 @@ Object {
               aria-expanded="false"
               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-14 leading-4"
               data-headlessui-state=""
-              id="headlessui-combobox-input-:r2p:"
+              id="headlessui-combobox-input-:r2s:"
               placeholder="Choose an option"
               role="combobox"
               type="text"
@@ -1473,7 +1654,7 @@ Object {
               aria-label="Open"
               class="w-4 h-4 text-moon-16 text-bulma transition-transform flex-grow-0 flex-shrink-0 self-center"
               data-headlessui-state=""
-              id="headlessui-combobox-button-:r2q:"
+              id="headlessui-combobox-button-:r2t:"
               tabindex="-1"
               type="button"
             >
@@ -1506,7 +1687,7 @@ Object {
           <label
             class="block text-bulma pb-2 text-moon-16"
             data-headlessui-state=""
-            id="headlessui-listbox-label-:r2r:"
+            id="headlessui-listbox-label-:r2u:"
           >
             Medium
           </label>
@@ -1519,7 +1700,7 @@ Object {
               aria-expanded="false"
               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"
               data-headlessui-state=""
-              id="headlessui-combobox-input-:r2t:"
+              id="headlessui-combobox-input-:r30:"
               placeholder="Choose an option"
               role="combobox"
               type="text"
@@ -1531,7 +1712,7 @@ Object {
               aria-label="Open"
               class="w-6 h-6 text-moon-24 text-bulma transition-transform flex-grow-0 flex-shrink-0 self-center"
               data-headlessui-state=""
-              id="headlessui-combobox-button-:r2u:"
+              id="headlessui-combobox-button-:r31:"
               tabindex="-1"
               type="button"
             >
@@ -1564,7 +1745,7 @@ Object {
           <label
             class="block text-bulma pb-2 text-moon-16"
             data-headlessui-state=""
-            id="headlessui-listbox-label-:r2v:"
+            id="headlessui-listbox-label-:r32:"
           >
             Large
           </label>
@@ -1577,7 +1758,7 @@ Object {
               aria-expanded="false"
               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-18 leading-5"
               data-headlessui-state=""
-              id="headlessui-combobox-input-:r31:"
+              id="headlessui-combobox-input-:r34:"
               placeholder="Choose an option"
               role="combobox"
               type="text"
@@ -1589,7 +1770,7 @@ Object {
               aria-label="Open"
               class="w-6 h-6 text-moon-24 text-bulma transition-transform flex-grow-0 flex-shrink-0 self-center"
               data-headlessui-state=""
-              id="headlessui-combobox-button-:r32:"
+              id="headlessui-combobox-button-:r35:"
               tabindex="-1"
               type="button"
             >
@@ -1693,7 +1874,7 @@ Object {
               <label
                 class="block text-bulma pb-2 text-moon-14"
                 data-headlessui-state=""
-                id="headlessui-listbox-label-:r33:"
+                id="headlessui-listbox-label-:r39:"
               >
                 Small
               </label>
@@ -1706,7 +1887,7 @@ Object {
                   aria-expanded="false"
                   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-14 leading-4"
                   data-headlessui-state=""
-                  id="headlessui-combobox-input-:r35:"
+                  id="headlessui-combobox-input-:r3b:"
                   placeholder="Choose an option"
                   role="combobox"
                   type="text"
@@ -1718,7 +1899,7 @@ Object {
                   aria-label="Open"
                   class="w-4 h-4 text-moon-16 text-bulma transition-transform flex-grow-0 flex-shrink-0 self-center"
                   data-headlessui-state=""
-                  id="headlessui-combobox-button-:r36:"
+                  id="headlessui-combobox-button-:r3c:"
                   tabindex="-1"
                   type="button"
                 >
@@ -1751,7 +1932,7 @@ Object {
               <label
                 class="block text-bulma pb-2 text-moon-16"
                 data-headlessui-state=""
-                id="headlessui-listbox-label-:r37:"
+                id="headlessui-listbox-label-:r3d:"
               >
                 Medium
               </label>
@@ -1764,7 +1945,7 @@ Object {
                   aria-expanded="false"
                   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"
                   data-headlessui-state=""
-                  id="headlessui-combobox-input-:r39:"
+                  id="headlessui-combobox-input-:r3f:"
                   placeholder="Choose an option"
                   role="combobox"
                   type="text"
@@ -1776,7 +1957,7 @@ Object {
                   aria-label="Open"
                   class="w-6 h-6 text-moon-24 text-bulma transition-transform flex-grow-0 flex-shrink-0 self-center"
                   data-headlessui-state=""
-                  id="headlessui-combobox-button-:r3a:"
+                  id="headlessui-combobox-button-:r3g:"
                   tabindex="-1"
                   type="button"
                 >
@@ -1809,7 +1990,7 @@ Object {
               <label
                 class="block text-bulma pb-2 text-moon-16"
                 data-headlessui-state=""
-                id="headlessui-listbox-label-:r3b:"
+                id="headlessui-listbox-label-:r3h:"
               >
                 Large
               </label>
@@ -1822,7 +2003,7 @@ Object {
                   aria-expanded="false"
                   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-18 leading-5"
                   data-headlessui-state=""
-                  id="headlessui-combobox-input-:r3d:"
+                  id="headlessui-combobox-input-:r3j:"
                   placeholder="Choose an option"
                   role="combobox"
                   type="text"
@@ -1834,7 +2015,7 @@ Object {
                   aria-label="Open"
                   class="w-6 h-6 text-moon-24 text-bulma transition-transform flex-grow-0 flex-shrink-0 self-center"
                   data-headlessui-state=""
-                  id="headlessui-combobox-button-:r3e:"
+                  id="headlessui-combobox-button-:r3k:"
                   tabindex="-1"
                   type="button"
                 >
@@ -1882,7 +2063,7 @@ Object {
             <label
               class="block text-bulma pb-2 text-moon-14"
               data-headlessui-state=""
-              id="headlessui-listbox-label-:r33:"
+              id="headlessui-listbox-label-:r39:"
             >
               Small
             </label>
@@ -1895,7 +2076,7 @@ Object {
                 aria-expanded="false"
                 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-14 leading-4"
                 data-headlessui-state=""
-                id="headlessui-combobox-input-:r35:"
+                id="headlessui-combobox-input-:r3b:"
                 placeholder="Choose an option"
                 role="combobox"
                 type="text"
@@ -1907,7 +2088,7 @@ Object {
                 aria-label="Open"
                 class="w-4 h-4 text-moon-16 text-bulma transition-transform flex-grow-0 flex-shrink-0 self-center"
                 data-headlessui-state=""
-                id="headlessui-combobox-button-:r36:"
+                id="headlessui-combobox-button-:r3c:"
                 tabindex="-1"
                 type="button"
               >
@@ -1940,7 +2121,7 @@ Object {
             <label
               class="block text-bulma pb-2 text-moon-16"
               data-headlessui-state=""
-              id="headlessui-listbox-label-:r37:"
+              id="headlessui-listbox-label-:r3d:"
             >
               Medium
             </label>
@@ -1953,7 +2134,7 @@ Object {
                 aria-expanded="false"
                 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"
                 data-headlessui-state=""
-                id="headlessui-combobox-input-:r39:"
+                id="headlessui-combobox-input-:r3f:"
                 placeholder="Choose an option"
                 role="combobox"
                 type="text"
@@ -1965,7 +2146,7 @@ Object {
                 aria-label="Open"
                 class="w-6 h-6 text-moon-24 text-bulma transition-transform flex-grow-0 flex-shrink-0 self-center"
                 data-headlessui-state=""
-                id="headlessui-combobox-button-:r3a:"
+                id="headlessui-combobox-button-:r3g:"
                 tabindex="-1"
                 type="button"
               >
@@ -1998,7 +2179,7 @@ Object {
             <label
               class="block text-bulma pb-2 text-moon-16"
               data-headlessui-state=""
-              id="headlessui-listbox-label-:r3b:"
+              id="headlessui-listbox-label-:r3h:"
             >
               Large
             </label>
@@ -2011,7 +2192,7 @@ Object {
                 aria-expanded="false"
                 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-18 leading-5"
                 data-headlessui-state=""
-                id="headlessui-combobox-input-:r3d:"
+                id="headlessui-combobox-input-:r3j:"
                 placeholder="Choose an option"
                 role="combobox"
                 type="text"
@@ -2023,7 +2204,7 @@ Object {
                 aria-label="Open"
                 class="w-6 h-6 text-moon-24 text-bulma transition-transform flex-grow-0 flex-shrink-0 self-center"
                 data-headlessui-state=""
-                id="headlessui-combobox-button-:r3e:"
+                id="headlessui-combobox-button-:r3k:"
                 tabindex="-1"
                 type="button"
               >
@@ -2125,7 +2306,7 @@ Object {
             <label
               class="block text-bulma pb-2 text-moon-16"
               data-headlessui-state=""
-              id="headlessui-listbox-label-:r3f:"
+              id="headlessui-listbox-label-:r3l:"
             >
               Error
             </label>
@@ -2138,7 +2319,7 @@ Object {
                 aria-expanded="false"
                 class="block w-full max-w-full py-0 m-0 appearance-none text-bulma transition-shadow box-border relative z-[2] focus:outline-none focus-visible::shadow-input-focus focus-visible::outline-none shadow-input-err hover:shadow-input-err focus:shadow-input-err focus-visible:shadow-input-err 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"
                 data-headlessui-state=""
-                id="headlessui-combobox-input-:r3h:"
+                id="headlessui-combobox-input-:r3n:"
                 placeholder="Choose an option"
                 role="combobox"
                 type="text"
@@ -2150,7 +2331,7 @@ Object {
                 aria-label="Open"
                 class="w-6 h-6 text-moon-24 text-bulma transition-transform flex-grow-0 flex-shrink-0 self-center"
                 data-headlessui-state=""
-                id="headlessui-combobox-button-:r3i:"
+                id="headlessui-combobox-button-:r3o:"
                 tabindex="-1"
                 type="button"
               >
@@ -2183,7 +2364,7 @@ Object {
             <label
               class="block text-bulma pb-2 text-moon-16 opacity-60 cursor-not-allowed"
               data-headlessui-state=""
-              id="headlessui-listbox-label-:r3j:"
+              id="headlessui-listbox-label-:r3p:"
             >
               Disabled
             </label>
@@ -2197,7 +2378,7 @@ Object {
                 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 opacity-60 cursor-not-allowed 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"
                 data-headlessui-state="disabled"
                 disabled=""
-                id="headlessui-combobox-input-:r3l:"
+                id="headlessui-combobox-input-:r3r:"
                 placeholder="Choose an option"
                 role="combobox"
                 type="text"
@@ -2210,7 +2391,7 @@ Object {
                 class="w-6 h-6 text-moon-24 text-bulma transition-transform flex-grow-0 flex-shrink-0 self-center cursor-not-allowed"
                 data-headlessui-state="disabled"
                 disabled=""
-                id="headlessui-combobox-button-:r3m:"
+                id="headlessui-combobox-button-:r3s:"
                 tabindex="-1"
                 type="button"
               >
@@ -2249,7 +2430,7 @@ Object {
                 aria-expanded="false"
                 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"
                 data-headlessui-state=""
-                id="headlessui-combobox-input-:r3o:"
+                id="headlessui-combobox-input-:r3u:"
                 placeholder="Without Label and Hint message"
                 role="combobox"
                 type="text"
@@ -2261,7 +2442,7 @@ Object {
                 aria-label="Open"
                 class="w-6 h-6 text-moon-24 text-bulma transition-transform flex-grow-0 flex-shrink-0 self-center"
                 data-headlessui-state=""
-                id="headlessui-combobox-button-:r3p:"
+                id="headlessui-combobox-button-:r3v:"
                 tabindex="-1"
                 type="button"
               >
@@ -2288,7 +2469,7 @@ Object {
             <label
               class="block text-bulma pb-2 text-moon-16"
               data-headlessui-state=""
-              id="headlessui-listbox-label-:r3q:"
+              id="headlessui-listbox-label-:r40:"
             >
               List options width
             </label>
@@ -2301,7 +2482,7 @@ Object {
                 aria-expanded="false"
                 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"
                 data-headlessui-state=""
-                id="headlessui-combobox-input-:r3s:"
+                id="headlessui-combobox-input-:r42:"
                 placeholder="Choose an option"
                 role="combobox"
                 type="text"
@@ -2313,7 +2494,7 @@ Object {
                 aria-label="Open"
                 class="w-6 h-6 text-moon-24 text-bulma transition-transform flex-grow-0 flex-shrink-0 self-center"
                 data-headlessui-state=""
-                id="headlessui-combobox-button-:r3t:"
+                id="headlessui-combobox-button-:r43:"
                 tabindex="-1"
                 type="button"
               >
@@ -2357,7 +2538,7 @@ Object {
           <label
             class="block text-bulma pb-2 text-moon-16"
             data-headlessui-state=""
-            id="headlessui-listbox-label-:r3f:"
+            id="headlessui-listbox-label-:r3l:"
           >
             Error
           </label>
@@ -2370,7 +2551,7 @@ Object {
               aria-expanded="false"
               class="block w-full max-w-full py-0 m-0 appearance-none text-bulma transition-shadow box-border relative z-[2] focus:outline-none focus-visible::shadow-input-focus focus-visible::outline-none shadow-input-err hover:shadow-input-err focus:shadow-input-err focus-visible:shadow-input-err 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"
               data-headlessui-state=""
-              id="headlessui-combobox-input-:r3h:"
+              id="headlessui-combobox-input-:r3n:"
               placeholder="Choose an option"
               role="combobox"
               type="text"
@@ -2382,7 +2563,7 @@ Object {
               aria-label="Open"
               class="w-6 h-6 text-moon-24 text-bulma transition-transform flex-grow-0 flex-shrink-0 self-center"
               data-headlessui-state=""
-              id="headlessui-combobox-button-:r3i:"
+              id="headlessui-combobox-button-:r3o:"
               tabindex="-1"
               type="button"
             >
@@ -2415,7 +2596,7 @@ Object {
           <label
             class="block text-bulma pb-2 text-moon-16 opacity-60 cursor-not-allowed"
             data-headlessui-state=""
-            id="headlessui-listbox-label-:r3j:"
+            id="headlessui-listbox-label-:r3p:"
           >
             Disabled
           </label>
@@ -2429,7 +2610,7 @@ Object {
               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 opacity-60 cursor-not-allowed 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"
               data-headlessui-state="disabled"
               disabled=""
-              id="headlessui-combobox-input-:r3l:"
+              id="headlessui-combobox-input-:r3r:"
               placeholder="Choose an option"
               role="combobox"
               type="text"
@@ -2442,7 +2623,7 @@ Object {
               class="w-6 h-6 text-moon-24 text-bulma transition-transform flex-grow-0 flex-shrink-0 self-center cursor-not-allowed"
               data-headlessui-state="disabled"
               disabled=""
-              id="headlessui-combobox-button-:r3m:"
+              id="headlessui-combobox-button-:r3s:"
               tabindex="-1"
               type="button"
             >
@@ -2481,7 +2662,7 @@ Object {
               aria-expanded="false"
               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"
               data-headlessui-state=""
-              id="headlessui-combobox-input-:r3o:"
+              id="headlessui-combobox-input-:r3u:"
               placeholder="Without Label and Hint message"
               role="combobox"
               type="text"
@@ -2493,7 +2674,7 @@ Object {
               aria-label="Open"
               class="w-6 h-6 text-moon-24 text-bulma transition-transform flex-grow-0 flex-shrink-0 self-center"
               data-headlessui-state=""
-              id="headlessui-combobox-button-:r3p:"
+              id="headlessui-combobox-button-:r3v:"
               tabindex="-1"
               type="button"
             >
@@ -2520,7 +2701,7 @@ Object {
           <label
             class="block text-bulma pb-2 text-moon-16"
             data-headlessui-state=""
-            id="headlessui-listbox-label-:r3q:"
+            id="headlessui-listbox-label-:r40:"
           >
             List options width
           </label>
@@ -2533,7 +2714,7 @@ Object {
               aria-expanded="false"
               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"
               data-headlessui-state=""
-              id="headlessui-combobox-input-:r3s:"
+              id="headlessui-combobox-input-:r42:"
               placeholder="Choose an option"
               role="combobox"
               type="text"
@@ -2545,7 +2726,7 @@ Object {
               aria-label="Open"
               class="w-6 h-6 text-moon-24 text-bulma transition-transform flex-grow-0 flex-shrink-0 self-center"
               data-headlessui-state=""
-              id="headlessui-combobox-button-:r3t:"
+              id="headlessui-combobox-button-:r43:"
               tabindex="-1"
               type="button"
             >
@@ -2646,7 +2827,7 @@ Object {
             <label
               class="block text-bulma pb-2 text-moon-16"
               data-headlessui-state=""
-              id="headlessui-listbox-label-:r3u:"
+              id="headlessui-listbox-label-:r44:"
             >
               Select label
             </label>
@@ -2665,7 +2846,7 @@ Object {
                   aria-expanded="false"
                   class="block 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 w-full 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"
                   data-headlessui-state=""
-                  id="headlessui-combobox-input-:r40:"
+                  id="headlessui-combobox-input-:r46:"
                   placeholder="Choose an option"
                   role="combobox"
                   type="text"
@@ -2678,7 +2859,7 @@ Object {
                 aria-label="Open"
                 class="w-6 h-6 text-moon-24 text-bulma transition-transform flex-grow-0 flex-shrink-0 self-center"
                 data-headlessui-state=""
-                id="headlessui-combobox-button-:r41:"
+                id="headlessui-combobox-button-:r47:"
                 tabindex="-1"
                 type="button"
               >
@@ -2722,7 +2903,7 @@ Object {
           <label
             class="block text-bulma pb-2 text-moon-16"
             data-headlessui-state=""
-            id="headlessui-listbox-label-:r3u:"
+            id="headlessui-listbox-label-:r44:"
           >
             Select label
           </label>
@@ -2741,7 +2922,7 @@ Object {
                 aria-expanded="false"
                 class="block 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 w-full 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"
                 data-headlessui-state=""
-                id="headlessui-combobox-input-:r40:"
+                id="headlessui-combobox-input-:r46:"
                 placeholder="Choose an option"
                 role="combobox"
                 type="text"
@@ -2754,7 +2935,7 @@ Object {
               aria-label="Open"
               class="w-6 h-6 text-moon-24 text-bulma transition-transform flex-grow-0 flex-shrink-0 self-center"
               data-headlessui-state=""
-              id="headlessui-combobox-button-:r41:"
+              id="headlessui-combobox-button-:r47:"
               tabindex="-1"
               type="button"
             >
@@ -4052,6 +4233,179 @@ Object {
 }
 `;
 
+exports[`Combobox renders MultiAllSelect 1`] = `
+Object {
+  "asFragment": [Function],
+  "baseElement": <body>
+    <div>
+      <div
+        class="flex flex-col items-center lg:flex-row lg:justify-center lg:items-end w-full gap-4"
+      >
+        <div
+          class="relative w-full max-w-xs"
+        >
+          <div
+            class="relative flex flex-nowrap w-full align-middle items-center rounded-lg py-2 px-3 bg-gohan gap-x-2 shadow-input hover:shadow-input-hov focus:shadow-input-focus focus:outline-none focus-visible::shadow-input-focus focus-visible::outline-none"
+            tabindex="-1"
+          >
+            <input
+              aria-autocomplete="list"
+              aria-expanded="false"
+              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"
+              data-headlessui-state=""
+              id="headlessui-combobox-input-:r13:"
+              placeholder="Choose an option"
+              role="combobox"
+              type="text"
+              value=""
+            />
+            <button
+              aria-expanded="false"
+              aria-haspopup="listbox"
+              aria-label="Open"
+              class="w-6 h-6 text-moon-24 text-bulma transition-transform flex-grow-0 flex-shrink-0 self-center"
+              data-headlessui-state=""
+              id="headlessui-combobox-button-:r14:"
+              tabindex="-1"
+              type="button"
+            >
+              <svg
+                fill="none"
+                height="1em"
+                viewBox="0 0 32 32"
+                width="1em"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  d="M22 13L16 19L10 13"
+                  stroke="currentColor"
+                  stroke-linecap="round"
+                  stroke-linejoin="round"
+                />
+              </svg>
+            </button>
+          </div>
+          <p
+            class="inline-block mt-2 ps-4 text-moon-12 text-trunks"
+            role="alert"
+          >
+            Informative message holder
+          </p>
+        </div>
+      </div>
+    </div>
+  </body>,
+  "container": <div>
+    <div
+      class="flex flex-col items-center lg:flex-row lg:justify-center lg:items-end w-full gap-4"
+    >
+      <div
+        class="relative w-full max-w-xs"
+      >
+        <div
+          class="relative flex flex-nowrap w-full align-middle items-center rounded-lg py-2 px-3 bg-gohan gap-x-2 shadow-input hover:shadow-input-hov focus:shadow-input-focus focus:outline-none focus-visible::shadow-input-focus focus-visible::outline-none"
+          tabindex="-1"
+        >
+          <input
+            aria-autocomplete="list"
+            aria-expanded="false"
+            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"
+            data-headlessui-state=""
+            id="headlessui-combobox-input-:r13:"
+            placeholder="Choose an option"
+            role="combobox"
+            type="text"
+            value=""
+          />
+          <button
+            aria-expanded="false"
+            aria-haspopup="listbox"
+            aria-label="Open"
+            class="w-6 h-6 text-moon-24 text-bulma transition-transform flex-grow-0 flex-shrink-0 self-center"
+            data-headlessui-state=""
+            id="headlessui-combobox-button-:r14:"
+            tabindex="-1"
+            type="button"
+          >
+            <svg
+              fill="none"
+              height="1em"
+              viewBox="0 0 32 32"
+              width="1em"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                d="M22 13L16 19L10 13"
+                stroke="currentColor"
+                stroke-linecap="round"
+                stroke-linejoin="round"
+              />
+            </svg>
+          </button>
+        </div>
+        <p
+          class="inline-block mt-2 ps-4 text-moon-12 text-trunks"
+          role="alert"
+        >
+          Informative message holder
+        </p>
+      </div>
+    </div>
+  </div>,
+  "debug": [Function],
+  "findAllByAltText": [Function],
+  "findAllByDisplayValue": [Function],
+  "findAllByLabelText": [Function],
+  "findAllByPlaceholderText": [Function],
+  "findAllByRole": [Function],
+  "findAllByTestId": [Function],
+  "findAllByText": [Function],
+  "findAllByTitle": [Function],
+  "findByAltText": [Function],
+  "findByDisplayValue": [Function],
+  "findByLabelText": [Function],
+  "findByPlaceholderText": [Function],
+  "findByRole": [Function],
+  "findByTestId": [Function],
+  "findByText": [Function],
+  "findByTitle": [Function],
+  "getAllByAltText": [Function],
+  "getAllByDisplayValue": [Function],
+  "getAllByLabelText": [Function],
+  "getAllByPlaceholderText": [Function],
+  "getAllByRole": [Function],
+  "getAllByTestId": [Function],
+  "getAllByText": [Function],
+  "getAllByTitle": [Function],
+  "getByAltText": [Function],
+  "getByDisplayValue": [Function],
+  "getByLabelText": [Function],
+  "getByPlaceholderText": [Function],
+  "getByRole": [Function],
+  "getByTestId": [Function],
+  "getByText": [Function],
+  "getByTitle": [Function],
+  "queryAllByAltText": [Function],
+  "queryAllByDisplayValue": [Function],
+  "queryAllByLabelText": [Function],
+  "queryAllByPlaceholderText": [Function],
+  "queryAllByRole": [Function],
+  "queryAllByTestId": [Function],
+  "queryAllByText": [Function],
+  "queryAllByTitle": [Function],
+  "queryByAltText": [Function],
+  "queryByDisplayValue": [Function],
+  "queryByLabelText": [Function],
+  "queryByPlaceholderText": [Function],
+  "queryByRole": [Function],
+  "queryByTestId": [Function],
+  "queryByText": [Function],
+  "queryByTitle": [Function],
+  "rerender": [Function],
+  "unmount": [Function],
+}
+`;
+
 exports[`Combobox renders MultiSelect 1`] = `
 Object {
   "asFragment": [Function],
@@ -4488,7 +4842,7 @@ Object {
             <label
               class="block text-bulma pb-2 text-moon-14"
               data-headlessui-state=""
-              id="headlessui-listbox-label-:r12:"
+              id="headlessui-listbox-label-:r15:"
             >
               Small
             </label>
@@ -4501,7 +4855,7 @@ Object {
                 aria-expanded="false"
                 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-14 leading-4"
                 data-headlessui-state=""
-                id="headlessui-combobox-input-:r14:"
+                id="headlessui-combobox-input-:r17:"
                 placeholder="Choose an option"
                 role="combobox"
                 type="text"
@@ -4513,7 +4867,7 @@ Object {
                 aria-label="Open"
                 class="w-4 h-4 text-moon-16 text-bulma transition-transform flex-grow-0 flex-shrink-0 self-center"
                 data-headlessui-state=""
-                id="headlessui-combobox-button-:r15:"
+                id="headlessui-combobox-button-:r18:"
                 tabindex="-1"
                 type="button"
               >
@@ -4546,7 +4900,7 @@ Object {
             <label
               class="block text-bulma pb-2 text-moon-16"
               data-headlessui-state=""
-              id="headlessui-listbox-label-:r16:"
+              id="headlessui-listbox-label-:r19:"
             >
               Medium
             </label>
@@ -4559,7 +4913,7 @@ Object {
                 aria-expanded="false"
                 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"
                 data-headlessui-state=""
-                id="headlessui-combobox-input-:r18:"
+                id="headlessui-combobox-input-:r1b:"
                 placeholder="Choose an option"
                 role="combobox"
                 type="text"
@@ -4571,7 +4925,7 @@ Object {
                 aria-label="Open"
                 class="w-6 h-6 text-moon-24 text-bulma transition-transform flex-grow-0 flex-shrink-0 self-center"
                 data-headlessui-state=""
-                id="headlessui-combobox-button-:r19:"
+                id="headlessui-combobox-button-:r1c:"
                 tabindex="-1"
                 type="button"
               >
@@ -4604,7 +4958,7 @@ Object {
             <label
               class="block text-bulma pb-2 text-moon-16"
               data-headlessui-state=""
-              id="headlessui-listbox-label-:r1a:"
+              id="headlessui-listbox-label-:r1d:"
             >
               Large
             </label>
@@ -4617,7 +4971,7 @@ Object {
                 aria-expanded="false"
                 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-18 leading-5"
                 data-headlessui-state=""
-                id="headlessui-combobox-input-:r1c:"
+                id="headlessui-combobox-input-:r1f:"
                 placeholder="Choose an option"
                 role="combobox"
                 type="text"
@@ -4629,7 +4983,7 @@ Object {
                 aria-label="Open"
                 class="w-6 h-6 text-moon-24 text-bulma transition-transform flex-grow-0 flex-shrink-0 self-center"
                 data-headlessui-state=""
-                id="headlessui-combobox-button-:r1d:"
+                id="headlessui-combobox-button-:r1g:"
                 tabindex="-1"
                 type="button"
               >
@@ -4673,7 +5027,7 @@ Object {
           <label
             class="block text-bulma pb-2 text-moon-14"
             data-headlessui-state=""
-            id="headlessui-listbox-label-:r12:"
+            id="headlessui-listbox-label-:r15:"
           >
             Small
           </label>
@@ -4686,7 +5040,7 @@ Object {
               aria-expanded="false"
               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-14 leading-4"
               data-headlessui-state=""
-              id="headlessui-combobox-input-:r14:"
+              id="headlessui-combobox-input-:r17:"
               placeholder="Choose an option"
               role="combobox"
               type="text"
@@ -4698,7 +5052,7 @@ Object {
               aria-label="Open"
               class="w-4 h-4 text-moon-16 text-bulma transition-transform flex-grow-0 flex-shrink-0 self-center"
               data-headlessui-state=""
-              id="headlessui-combobox-button-:r15:"
+              id="headlessui-combobox-button-:r18:"
               tabindex="-1"
               type="button"
             >
@@ -4731,7 +5085,7 @@ Object {
           <label
             class="block text-bulma pb-2 text-moon-16"
             data-headlessui-state=""
-            id="headlessui-listbox-label-:r16:"
+            id="headlessui-listbox-label-:r19:"
           >
             Medium
           </label>
@@ -4744,7 +5098,7 @@ Object {
               aria-expanded="false"
               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"
               data-headlessui-state=""
-              id="headlessui-combobox-input-:r18:"
+              id="headlessui-combobox-input-:r1b:"
               placeholder="Choose an option"
               role="combobox"
               type="text"
@@ -4756,7 +5110,7 @@ Object {
               aria-label="Open"
               class="w-6 h-6 text-moon-24 text-bulma transition-transform flex-grow-0 flex-shrink-0 self-center"
               data-headlessui-state=""
-              id="headlessui-combobox-button-:r19:"
+              id="headlessui-combobox-button-:r1c:"
               tabindex="-1"
               type="button"
             >
@@ -4789,7 +5143,7 @@ Object {
           <label
             class="block text-bulma pb-2 text-moon-16"
             data-headlessui-state=""
-            id="headlessui-listbox-label-:r1a:"
+            id="headlessui-listbox-label-:r1d:"
           >
             Large
           </label>
@@ -4802,7 +5156,7 @@ Object {
               aria-expanded="false"
               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-18 leading-5"
               data-headlessui-state=""
-              id="headlessui-combobox-input-:r1c:"
+              id="headlessui-combobox-input-:r1f:"
               placeholder="Choose an option"
               role="combobox"
               type="text"
@@ -4814,7 +5168,7 @@ Object {
               aria-label="Open"
               class="w-6 h-6 text-moon-24 text-bulma transition-transform flex-grow-0 flex-shrink-0 self-center"
               data-headlessui-state=""
-              id="headlessui-combobox-button-:r1d:"
+              id="headlessui-combobox-button-:r1g:"
               tabindex="-1"
               type="button"
             >
@@ -4912,7 +5266,7 @@ Object {
           <label
             class="block text-bulma pb-2 text-moon-16"
             data-headlessui-state=""
-            id="headlessui-listbox-label-:r1e:"
+            id="headlessui-listbox-label-:r1h:"
           >
             Error
           </label>
@@ -4925,7 +5279,7 @@ Object {
               aria-expanded="false"
               class="block w-full max-w-full py-0 m-0 appearance-none text-bulma transition-shadow box-border relative z-[2] focus:outline-none focus-visible::shadow-input-focus focus-visible::outline-none shadow-input-err hover:shadow-input-err focus:shadow-input-err focus-visible:shadow-input-err 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"
               data-headlessui-state=""
-              id="headlessui-combobox-input-:r1g:"
+              id="headlessui-combobox-input-:r1j:"
               placeholder="Choose an option"
               role="combobox"
               type="text"
@@ -4937,7 +5291,7 @@ Object {
               aria-label="Open"
               class="w-6 h-6 text-moon-24 text-bulma transition-transform flex-grow-0 flex-shrink-0 self-center"
               data-headlessui-state=""
-              id="headlessui-combobox-button-:r1h:"
+              id="headlessui-combobox-button-:r1k:"
               tabindex="-1"
               type="button"
             >
@@ -4970,7 +5324,7 @@ Object {
           <label
             class="block text-bulma pb-2 text-moon-16 opacity-60 cursor-not-allowed"
             data-headlessui-state=""
-            id="headlessui-listbox-label-:r1i:"
+            id="headlessui-listbox-label-:r1l:"
           >
             Disabled
           </label>
@@ -4984,7 +5338,7 @@ Object {
               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 opacity-60 cursor-not-allowed 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"
               data-headlessui-state="disabled"
               disabled=""
-              id="headlessui-combobox-input-:r1k:"
+              id="headlessui-combobox-input-:r1n:"
               placeholder="Choose an option"
               role="combobox"
               type="text"
@@ -4997,7 +5351,7 @@ Object {
               class="w-6 h-6 text-moon-24 text-bulma transition-transform flex-grow-0 flex-shrink-0 self-center cursor-not-allowed"
               data-headlessui-state="disabled"
               disabled=""
-              id="headlessui-combobox-button-:r1l:"
+              id="headlessui-combobox-button-:r1o:"
               tabindex="-1"
               type="button"
             >
@@ -5036,7 +5390,7 @@ Object {
               aria-expanded="false"
               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"
               data-headlessui-state=""
-              id="headlessui-combobox-input-:r1n:"
+              id="headlessui-combobox-input-:r1q:"
               placeholder="Without Label and Hint message"
               role="combobox"
               type="text"
@@ -5048,7 +5402,7 @@ Object {
               aria-label="Open"
               class="w-6 h-6 text-moon-24 text-bulma transition-transform flex-grow-0 flex-shrink-0 self-center"
               data-headlessui-state=""
-              id="headlessui-combobox-button-:r1o:"
+              id="headlessui-combobox-button-:r1r:"
               tabindex="-1"
               type="button"
             >
@@ -5075,7 +5429,7 @@ Object {
           <label
             class="block text-bulma pb-2 text-moon-16"
             data-headlessui-state=""
-            id="headlessui-listbox-label-:r1p:"
+            id="headlessui-listbox-label-:r1s:"
           >
             List options width
           </label>
@@ -5088,7 +5442,7 @@ Object {
               aria-expanded="false"
               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"
               data-headlessui-state=""
-              id="headlessui-combobox-input-:r1r:"
+              id="headlessui-combobox-input-:r1u:"
               placeholder="Choose an option"
               role="combobox"
               type="text"
@@ -5100,7 +5454,7 @@ Object {
               aria-label="Open"
               class="w-6 h-6 text-moon-24 text-bulma transition-transform flex-grow-0 flex-shrink-0 self-center"
               data-headlessui-state=""
-              id="headlessui-combobox-button-:r1s:"
+              id="headlessui-combobox-button-:r1v:"
               tabindex="-1"
               type="button"
             >
@@ -5140,7 +5494,7 @@ Object {
         <label
           class="block text-bulma pb-2 text-moon-16"
           data-headlessui-state=""
-          id="headlessui-listbox-label-:r1e:"
+          id="headlessui-listbox-label-:r1h:"
         >
           Error
         </label>
@@ -5153,7 +5507,7 @@ Object {
             aria-expanded="false"
             class="block w-full max-w-full py-0 m-0 appearance-none text-bulma transition-shadow box-border relative z-[2] focus:outline-none focus-visible::shadow-input-focus focus-visible::outline-none shadow-input-err hover:shadow-input-err focus:shadow-input-err focus-visible:shadow-input-err 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"
             data-headlessui-state=""
-            id="headlessui-combobox-input-:r1g:"
+            id="headlessui-combobox-input-:r1j:"
             placeholder="Choose an option"
             role="combobox"
             type="text"
@@ -5165,7 +5519,7 @@ Object {
             aria-label="Open"
             class="w-6 h-6 text-moon-24 text-bulma transition-transform flex-grow-0 flex-shrink-0 self-center"
             data-headlessui-state=""
-            id="headlessui-combobox-button-:r1h:"
+            id="headlessui-combobox-button-:r1k:"
             tabindex="-1"
             type="button"
           >
@@ -5198,7 +5552,7 @@ Object {
         <label
           class="block text-bulma pb-2 text-moon-16 opacity-60 cursor-not-allowed"
           data-headlessui-state=""
-          id="headlessui-listbox-label-:r1i:"
+          id="headlessui-listbox-label-:r1l:"
         >
           Disabled
         </label>
@@ -5212,7 +5566,7 @@ Object {
             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 opacity-60 cursor-not-allowed 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"
             data-headlessui-state="disabled"
             disabled=""
-            id="headlessui-combobox-input-:r1k:"
+            id="headlessui-combobox-input-:r1n:"
             placeholder="Choose an option"
             role="combobox"
             type="text"
@@ -5225,7 +5579,7 @@ Object {
             class="w-6 h-6 text-moon-24 text-bulma transition-transform flex-grow-0 flex-shrink-0 self-center cursor-not-allowed"
             data-headlessui-state="disabled"
             disabled=""
-            id="headlessui-combobox-button-:r1l:"
+            id="headlessui-combobox-button-:r1o:"
             tabindex="-1"
             type="button"
           >
@@ -5264,7 +5618,7 @@ Object {
             aria-expanded="false"
             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"
             data-headlessui-state=""
-            id="headlessui-combobox-input-:r1n:"
+            id="headlessui-combobox-input-:r1q:"
             placeholder="Without Label and Hint message"
             role="combobox"
             type="text"
@@ -5276,7 +5630,7 @@ Object {
             aria-label="Open"
             class="w-6 h-6 text-moon-24 text-bulma transition-transform flex-grow-0 flex-shrink-0 self-center"
             data-headlessui-state=""
-            id="headlessui-combobox-button-:r1o:"
+            id="headlessui-combobox-button-:r1r:"
             tabindex="-1"
             type="button"
           >
@@ -5303,7 +5657,7 @@ Object {
         <label
           class="block text-bulma pb-2 text-moon-16"
           data-headlessui-state=""
-          id="headlessui-listbox-label-:r1p:"
+          id="headlessui-listbox-label-:r1s:"
         >
           List options width
         </label>
@@ -5316,7 +5670,7 @@ Object {
             aria-expanded="false"
             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"
             data-headlessui-state=""
-            id="headlessui-combobox-input-:r1r:"
+            id="headlessui-combobox-input-:r1u:"
             placeholder="Choose an option"
             role="combobox"
             type="text"
@@ -5328,7 +5682,7 @@ Object {
             aria-label="Open"
             class="w-6 h-6 text-moon-24 text-bulma transition-transform flex-grow-0 flex-shrink-0 self-center"
             data-headlessui-state=""
-            id="headlessui-combobox-button-:r1s:"
+            id="headlessui-combobox-button-:r1v:"
             tabindex="-1"
             type="button"
           >
@@ -5425,7 +5779,7 @@ Object {
           <label
             class="block text-bulma pb-2 text-moon-16"
             data-headlessui-state=""
-            id="headlessui-listbox-label-:r1t:"
+            id="headlessui-listbox-label-:r20:"
           >
             Select label
           </label>
@@ -5444,7 +5798,7 @@ Object {
                 aria-expanded="false"
                 class="block 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 w-full 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"
                 data-headlessui-state=""
-                id="headlessui-combobox-input-:r1v:"
+                id="headlessui-combobox-input-:r22:"
                 placeholder="Choose an option"
                 role="combobox"
                 type="text"
@@ -5457,7 +5811,7 @@ Object {
               aria-label="Open"
               class="w-6 h-6 text-moon-24 text-bulma transition-transform flex-grow-0 flex-shrink-0 self-center"
               data-headlessui-state=""
-              id="headlessui-combobox-button-:r20:"
+              id="headlessui-combobox-button-:r23:"
               tabindex="-1"
               type="button"
             >
@@ -5497,7 +5851,7 @@ Object {
         <label
           class="block text-bulma pb-2 text-moon-16"
           data-headlessui-state=""
-          id="headlessui-listbox-label-:r1t:"
+          id="headlessui-listbox-label-:r20:"
         >
           Select label
         </label>
@@ -5516,7 +5870,7 @@ Object {
               aria-expanded="false"
               class="block 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 w-full 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"
               data-headlessui-state=""
-              id="headlessui-combobox-input-:r1v:"
+              id="headlessui-combobox-input-:r22:"
               placeholder="Choose an option"
               role="combobox"
               type="text"
@@ -5529,7 +5883,7 @@ Object {
             aria-label="Open"
             class="w-6 h-6 text-moon-24 text-bulma transition-transform flex-grow-0 flex-shrink-0 self-center"
             data-headlessui-state=""
-            id="headlessui-combobox-button-:r20:"
+            id="headlessui-combobox-button-:r23:"
             tabindex="-1"
             type="button"
           >
diff --git a/next-docs/public/examples/combobox/__tests__/index.test.tsx b/next-docs/public/examples/combobox/__tests__/index.test.tsx
index 799a6ab6e0..622cb844cd 100644
--- a/next-docs/public/examples/combobox/__tests__/index.test.tsx
+++ b/next-docs/public/examples/combobox/__tests__/index.test.tsx
@@ -7,6 +7,7 @@ import Default from '../Default';
 import InsetMultiSelect from '../InsetMultiSelect';
 import InsetSelect from '../InsetSelect';
 import InsetSelectStates from '../InsetSelectStates';
+import MultiAllSelect from '../MultiAllSelect';
 import MultiSelect from '../MultiSelect';
 import Select from '../Select';
 import SelectStates from '../SelectStates';
@@ -36,6 +37,10 @@ describe('Combobox', () => {
     const tree = render(<MultiSelect />);
     expect(tree).toMatchSnapshot();
   });
+  it('renders MultiAllSelect', () => {
+    const tree = render(<MultiAllSelect />);
+    expect(tree).toMatchSnapshot();
+  });
   it('renders Select', () => {
     const tree = render(<Select />);
     expect(tree).toMatchSnapshot();
@@ -72,6 +77,10 @@ describe('Combobox in RTL', () => {
     const tree = render(withRtl(<MultiSelect />));
     expect(tree).toMatchSnapshot();
   });
+  it('renders MultiAllSelect', () => {
+    const tree = render(withRtl(<MultiAllSelect />));
+    expect(tree).toMatchSnapshot();
+  });
   it('renders Select', () => {
     const tree = render(withRtl(<Select />));
     expect(tree).toMatchSnapshot();
diff --git a/workspaces/core/src/combobox/Combobox.tsx b/workspaces/core/src/combobox/Combobox.tsx
index 41c711b873..9f419aeffe 100644
--- a/workspaces/core/src/combobox/Combobox.tsx
+++ b/workspaces/core/src/combobox/Combobox.tsx
@@ -1,4 +1,4 @@
-import React, { forwardRef, useEffect, useState } from 'react';
+import React, { ReactNode, forwardRef, useEffect, useState } from 'react';
 import {
   Combobox as HeadlessCombobox,
   Transition as HeadlessTransition,