From a83b49e289ef443ddef3ef31a4b510d23a2a3e48 Mon Sep 17 00:00:00 2001
From: Manuel <manuel.fischer@abusix.com>
Date: Wed, 31 Jul 2024 12:26:22 +0200
Subject: [PATCH 01/42] chore: update @headlessui/react and
 @headlessui/tailwindcss dependencies

---
 package-lock.json | 193 ++++++++++++++++++++++++++++++++++++++++------
 package.json      |   4 +-
 2 files changed, 170 insertions(+), 27 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 7b6c8baf..637be4c9 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -9,8 +9,8 @@
             "version": "5.6.5",
             "license": "ISC",
             "dependencies": {
-                "@headlessui/react": "^1.7.17",
-                "@headlessui/tailwindcss": "^0.2.0",
+                "@headlessui/react": "^2.1.2",
+                "@headlessui/tailwindcss": "^0.2.1",
                 "@popperjs/core": "^2.11.8",
                 "@tailwindcss/forms": "^0.5.7",
                 "@tanstack/react-table": "^8.10.7",
@@ -2684,25 +2684,76 @@
                 "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
             }
         },
+        "node_modules/@floating-ui/core": {
+            "version": "1.6.5",
+            "resolved": "https://registry.npmjs.org/@floating-ui/core/-/core-1.6.5.tgz",
+            "integrity": "sha512-8GrTWmoFhm5BsMZOTHeGD2/0FLKLQQHvO/ZmQga4tKempYRLz8aqJGqXVuQgisnMObq2YZ2SgkwctN1LOOxcqA==",
+            "dependencies": {
+                "@floating-ui/utils": "^0.2.5"
+            }
+        },
+        "node_modules/@floating-ui/dom": {
+            "version": "1.6.8",
+            "resolved": "https://registry.npmjs.org/@floating-ui/dom/-/dom-1.6.8.tgz",
+            "integrity": "sha512-kx62rP19VZ767Q653wsP1XZCGIirkE09E0QUGNYTM/ttbbQHqcGPdSfWFxUyyNLc/W6aoJRBajOSXhP6GXjC0Q==",
+            "dependencies": {
+                "@floating-ui/core": "^1.6.0",
+                "@floating-ui/utils": "^0.2.5"
+            }
+        },
+        "node_modules/@floating-ui/react": {
+            "version": "0.26.20",
+            "resolved": "https://registry.npmjs.org/@floating-ui/react/-/react-0.26.20.tgz",
+            "integrity": "sha512-RixKJJG92fcIsVoqrFr4Onpzh7hlOx4U7NV4aLhMLmtvjZ5oTB/WzXaANYUZATKqXvvW7t9sCxtzejip26N5Ag==",
+            "dependencies": {
+                "@floating-ui/react-dom": "^2.1.1",
+                "@floating-ui/utils": "^0.2.5",
+                "tabbable": "^6.0.0"
+            },
+            "peerDependencies": {
+                "react": ">=16.8.0",
+                "react-dom": ">=16.8.0"
+            }
+        },
+        "node_modules/@floating-ui/react-dom": {
+            "version": "2.1.1",
+            "resolved": "https://registry.npmjs.org/@floating-ui/react-dom/-/react-dom-2.1.1.tgz",
+            "integrity": "sha512-4h84MJt3CHrtG18mGsXuLCHMrug49d7DFkU0RMIyshRveBeyV2hmV/pDaF2Uxtu8kgq5r46llp5E5FQiR0K2Yg==",
+            "dependencies": {
+                "@floating-ui/dom": "^1.0.0"
+            },
+            "peerDependencies": {
+                "react": ">=16.8.0",
+                "react-dom": ">=16.8.0"
+            }
+        },
+        "node_modules/@floating-ui/utils": {
+            "version": "0.2.5",
+            "resolved": "https://registry.npmjs.org/@floating-ui/utils/-/utils-0.2.5.tgz",
+            "integrity": "sha512-sTcG+QZ6fdEUObICavU+aB3Mp8HY4n14wYHdxK4fXjPmv3PXZZeY5RaguJmGyeH/CJQhX3fqKUtS4qc1LoHwhQ=="
+        },
         "node_modules/@headlessui/react": {
-            "version": "1.7.17",
-            "resolved": "https://registry.npmjs.org/@headlessui/react/-/react-1.7.17.tgz",
-            "integrity": "sha512-4am+tzvkqDSSgiwrsEpGWqgGo9dz8qU5M3znCkC4PgkpY4HcCZzEDEvozltGGGHIKl9jbXbZPSH5TWn4sWJdow==",
+            "version": "2.1.2",
+            "resolved": "https://registry.npmjs.org/@headlessui/react/-/react-2.1.2.tgz",
+            "integrity": "sha512-Kb3hgk9gRNRcTZktBrKdHhF3xFhYkca1Rk6e1/im2ENf83dgN54orMW0uSKTXFnUpZOUFZ+wcY05LlipwgZIFQ==",
             "dependencies": {
-                "client-only": "^0.0.1"
+                "@floating-ui/react": "^0.26.16",
+                "@react-aria/focus": "^3.17.1",
+                "@react-aria/interactions": "^3.21.3",
+                "@tanstack/react-virtual": "^3.8.1"
             },
             "engines": {
                 "node": ">=10"
             },
             "peerDependencies": {
-                "react": "^16 || ^17 || ^18",
-                "react-dom": "^16 || ^17 || ^18"
+                "react": "^18",
+                "react-dom": "^18"
             }
         },
         "node_modules/@headlessui/tailwindcss": {
-            "version": "0.2.0",
-            "resolved": "https://registry.npmjs.org/@headlessui/tailwindcss/-/tailwindcss-0.2.0.tgz",
-            "integrity": "sha512-fpL830Fln1SykOCboExsWr3JIVeQKieLJ3XytLe/tt1A0XzqUthOftDmjcCYLW62w7mQI7wXcoPXr3tZ9QfGxw==",
+            "version": "0.2.1",
+            "resolved": "https://registry.npmjs.org/@headlessui/tailwindcss/-/tailwindcss-0.2.1.tgz",
+            "integrity": "sha512-2+5+NZ+RzMyrVeCZOxdbvkUSssSxGvcUxphkIfSVLpRiKsj+/63T2TOL9dBYMXVfj/CGr6hMxSRInzXv6YY7sA==",
             "engines": {
                 "node": ">=10"
             },
@@ -3341,6 +3392,64 @@
                 "url": "https://opencollective.com/popperjs"
             }
         },
+        "node_modules/@react-aria/focus": {
+            "version": "3.18.1",
+            "resolved": "https://registry.npmjs.org/@react-aria/focus/-/focus-3.18.1.tgz",
+            "integrity": "sha512-N0Cy61WCIv+57mbqC7hiZAsB+3rF5n4JKabxUmg/2RTJL6lq7hJ5N4gx75ymKxkN8GnVDwt4pKZah48Wopa5jw==",
+            "dependencies": {
+                "@react-aria/interactions": "^3.22.1",
+                "@react-aria/utils": "^3.25.1",
+                "@react-types/shared": "^3.24.1",
+                "@swc/helpers": "^0.5.0",
+                "clsx": "^2.0.0"
+            },
+            "peerDependencies": {
+                "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0"
+            }
+        },
+        "node_modules/@react-aria/interactions": {
+            "version": "3.22.1",
+            "resolved": "https://registry.npmjs.org/@react-aria/interactions/-/interactions-3.22.1.tgz",
+            "integrity": "sha512-5TLzQaDAQQ5C70yG8GInbO4wIylKY67RfTIIwQPGR/4n5OIjbUD8BOj3NuSsuZ/frUPaBXo1VEBBmSO23fxkjw==",
+            "dependencies": {
+                "@react-aria/ssr": "^3.9.5",
+                "@react-aria/utils": "^3.25.1",
+                "@react-types/shared": "^3.24.1",
+                "@swc/helpers": "^0.5.0"
+            },
+            "peerDependencies": {
+                "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0"
+            }
+        },
+        "node_modules/@react-aria/ssr": {
+            "version": "3.9.5",
+            "resolved": "https://registry.npmjs.org/@react-aria/ssr/-/ssr-3.9.5.tgz",
+            "integrity": "sha512-xEwGKoysu+oXulibNUSkXf8itW0npHHTa6c4AyYeZIJyRoegeteYuFpZUBPtIDE8RfHdNsSmE1ssOkxRnwbkuQ==",
+            "dependencies": {
+                "@swc/helpers": "^0.5.0"
+            },
+            "engines": {
+                "node": ">= 12"
+            },
+            "peerDependencies": {
+                "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0"
+            }
+        },
+        "node_modules/@react-aria/utils": {
+            "version": "3.25.1",
+            "resolved": "https://registry.npmjs.org/@react-aria/utils/-/utils-3.25.1.tgz",
+            "integrity": "sha512-5Uj864e7T5+yj78ZfLnfHqmypLiqW2mN+nsdslog2z5ssunTqjolVeM15ootXskjISlZ7MojLpq97kIC4nlnAw==",
+            "dependencies": {
+                "@react-aria/ssr": "^3.9.5",
+                "@react-stately/utils": "^3.10.2",
+                "@react-types/shared": "^3.24.1",
+                "@swc/helpers": "^0.5.0",
+                "clsx": "^2.0.0"
+            },
+            "peerDependencies": {
+                "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0"
+            }
+        },
         "node_modules/@react-dnd/asap": {
             "version": "5.0.2",
             "resolved": "https://registry.npmjs.org/@react-dnd/asap/-/asap-5.0.2.tgz",
@@ -3356,6 +3465,25 @@
             "resolved": "https://registry.npmjs.org/@react-dnd/shallowequal/-/shallowequal-4.0.2.tgz",
             "integrity": "sha512-/RVXdLvJxLg4QKvMoM5WlwNR9ViO9z8B/qPcc+C0Sa/teJY7QG7kJ441DwzOjMYEY7GmU4dj5EcGHIkKZiQZCA=="
         },
+        "node_modules/@react-stately/utils": {
+            "version": "3.10.2",
+            "resolved": "https://registry.npmjs.org/@react-stately/utils/-/utils-3.10.2.tgz",
+            "integrity": "sha512-fh6OTQtbeQC0ywp6LJuuKs6tKIgFvt/DlIZEcIpGho6/oZG229UnIk6TUekwxnDbumuYyan6D9EgUtEMmT8UIg==",
+            "dependencies": {
+                "@swc/helpers": "^0.5.0"
+            },
+            "peerDependencies": {
+                "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0"
+            }
+        },
+        "node_modules/@react-types/shared": {
+            "version": "3.24.1",
+            "resolved": "https://registry.npmjs.org/@react-types/shared/-/shared-3.24.1.tgz",
+            "integrity": "sha512-AUQeGYEm/zDTN6zLzdXolDxz3Jk5dDL7f506F07U8tBwxNNI3WRdhU84G0/AaFikOZzDXhOZDr3MhQMzyE7Ydw==",
+            "peerDependencies": {
+                "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0"
+            }
+        },
         "node_modules/@rollup/plugin-commonjs": {
             "version": "25.0.7",
             "resolved": "https://registry.npmjs.org/@rollup/plugin-commonjs/-/plugin-commonjs-25.0.7.tgz",
@@ -5911,6 +6039,14 @@
                 "url": "https://opencollective.com/svgo"
             }
         },
+        "node_modules/@swc/helpers": {
+            "version": "0.5.12",
+            "resolved": "https://registry.npmjs.org/@swc/helpers/-/helpers-0.5.12.tgz",
+            "integrity": "sha512-KMZNXiGibsW9kvZAO1Pam2JPTDBm+KSHMMHWdsyI/1DbIZjT2A6Gy3hblVXUMEDvUAKq+e0vL0X0o54owWji7g==",
+            "dependencies": {
+                "tslib": "^2.4.0"
+            }
+        },
         "node_modules/@tailwindcss/forms": {
             "version": "0.5.7",
             "resolved": "https://registry.npmjs.org/@tailwindcss/forms/-/forms-0.5.7.tgz",
@@ -5942,11 +6078,11 @@
             }
         },
         "node_modules/@tanstack/react-virtual": {
-            "version": "3.0.1",
-            "resolved": "https://registry.npmjs.org/@tanstack/react-virtual/-/react-virtual-3.0.1.tgz",
-            "integrity": "sha512-IFOFuRUTaiM/yibty9qQ9BfycQnYXIDHGP2+cU+0LrFFGNhVxCXSQnaY6wkX8uJVteFEBjUondX0Hmpp7TNcag==",
+            "version": "3.8.4",
+            "resolved": "https://registry.npmjs.org/@tanstack/react-virtual/-/react-virtual-3.8.4.tgz",
+            "integrity": "sha512-Dq0VQr3QlTS2qL35g360QaJWBt7tCn/0xw4uZ0dHXPLO1Ak4Z4nVX4vuj1Npg1b/jqNMDToRtR5OIxM2NXRBWg==",
             "dependencies": {
-                "@tanstack/virtual-core": "3.0.0"
+                "@tanstack/virtual-core": "3.8.4"
             },
             "funding": {
                 "type": "github",
@@ -5970,9 +6106,9 @@
             }
         },
         "node_modules/@tanstack/virtual-core": {
-            "version": "3.0.0",
-            "resolved": "https://registry.npmjs.org/@tanstack/virtual-core/-/virtual-core-3.0.0.tgz",
-            "integrity": "sha512-SYXOBTjJb05rXa2vl55TTwO40A6wKu0R5i1qQwhJYNDIqaIGF7D0HsLw+pJAyi2OvntlEIVusx3xtbbgSUi6zg==",
+            "version": "3.8.4",
+            "resolved": "https://registry.npmjs.org/@tanstack/virtual-core/-/virtual-core-3.8.4.tgz",
+            "integrity": "sha512-iO5Ujgw3O1yIxWDe9FgUPNkGjyT657b1WNX52u+Wv1DyBFEpdCdGkuVaky0M3hHFqNWjAmHWTn4wgj9rTr7ZQg==",
             "funding": {
                 "type": "github",
                 "url": "https://github.com/sponsors/tannerlinsley"
@@ -8679,11 +8815,6 @@
                 "@colors/colors": "1.5.0"
             }
         },
-        "node_modules/client-only": {
-            "version": "0.0.1",
-            "resolved": "https://registry.npmjs.org/client-only/-/client-only-0.0.1.tgz",
-            "integrity": "sha512-IV3Ou0jSMzZrd3pZ48nLkT9DA7Ag1pnPzaiQhpW7c3RbcqqzvzzVu+L8gfqMp/8IM2MQtSiqaCxrrcfu8I8rMA=="
-        },
         "node_modules/cliui": {
             "version": "7.0.4",
             "resolved": "https://registry.npmjs.org/cliui/-/cliui-7.0.4.tgz",
@@ -8730,6 +8861,14 @@
                 "node": ">=0.10.0"
             }
         },
+        "node_modules/clsx": {
+            "version": "2.1.1",
+            "resolved": "https://registry.npmjs.org/clsx/-/clsx-2.1.1.tgz",
+            "integrity": "sha512-eYm0QWBtUrBWZWG0d386OGAw16Z995PiOVo2B7bjWSbHedGl5e0ZWaq65kOGgUSNesEIDkB9ISbTg/JK9dhCZA==",
+            "engines": {
+                "node": ">=6"
+            }
+        },
         "node_modules/color-convert": {
             "version": "1.9.3",
             "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-1.9.3.tgz",
@@ -21424,6 +21563,11 @@
                 "url": "https://opencollective.com/unts"
             }
         },
+        "node_modules/tabbable": {
+            "version": "6.2.0",
+            "resolved": "https://registry.npmjs.org/tabbable/-/tabbable-6.2.0.tgz",
+            "integrity": "sha512-Cat63mxsVJlzYvN51JmVXIgNoUokrIaT2zLclCXjRd8boZ0004U4KCs/sToJ75C6sdlByWxpYnb5Boif1VSFew=="
+        },
         "node_modules/tailwind-merge": {
             "version": "2.1.0",
             "resolved": "https://registry.npmjs.org/tailwind-merge/-/tailwind-merge-2.1.0.tgz",
@@ -21987,8 +22131,7 @@
         "node_modules/tslib": {
             "version": "2.6.2",
             "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.6.2.tgz",
-            "integrity": "sha512-AEYxH93jGFPn/a2iVAwW87VuUIkR1FVUKB77NwMF7nBTDkDrrT/Hpt/IrCJ0QXhW27jTBDcf5ZY7w6RiqTMw2Q==",
-            "dev": true
+            "integrity": "sha512-AEYxH93jGFPn/a2iVAwW87VuUIkR1FVUKB77NwMF7nBTDkDrrT/Hpt/IrCJ0QXhW27jTBDcf5ZY7w6RiqTMw2Q=="
         },
         "node_modules/tsutils": {
             "version": "3.21.0",
diff --git a/package.json b/package.json
index 600e194e..6fd0f6ce 100644
--- a/package.json
+++ b/package.json
@@ -42,8 +42,8 @@
         "build:tailwind:scoped": "NODE_ENV=production npx tailwindcss -i ./src/styles/styles.scoped.css -o ./dist/styles/hailstorm.scoped.css --postcss -m"
     },
     "dependencies": {
-        "@headlessui/react": "^1.7.17",
-        "@headlessui/tailwindcss": "^0.2.0",
+        "@headlessui/react": "^2.1.2",
+        "@headlessui/tailwindcss": "^0.2.1",
         "@popperjs/core": "^2.11.8",
         "@tailwindcss/forms": "^0.5.7",
         "@tanstack/react-table": "^8.10.7",

From b4f1f39f6b826f92caf0e1cd328559400602a2b9 Mon Sep 17 00:00:00 2001
From: Manuel <manuel.fischer@abusix.com>
Date: Wed, 31 Jul 2024 12:26:37 +0200
Subject: [PATCH 02/42] fix: Update Dialog component with @headlessui/react
 v2.0 changes

---
 src/components/dialog/dialog.tsx | 33 ++++++++++++++++++--------------
 1 file changed, 19 insertions(+), 14 deletions(-)

diff --git a/src/components/dialog/dialog.tsx b/src/components/dialog/dialog.tsx
index da0d092b..0e6ab132 100644
--- a/src/components/dialog/dialog.tsx
+++ b/src/components/dialog/dialog.tsx
@@ -1,8 +1,15 @@
-import { Dialog as HeadlessDialog, Transition } from "@headlessui/react";
+import {
+    Description as HeadlessDescription,
+    Dialog as HeadlessDialog,
+    DialogPanel as HeadlessDialogPanel,
+    DialogTitle as HeadlessDialogTitle,
+    Transition,
+    TransitionChild,
+} from "@headlessui/react";
 import React, { Fragment } from "react";
-import { IconButton } from "../icon-button/icon-button";
-import { classNames } from "../../util/class-names";
 import { CrossIcon } from "../../icons";
+import { classNames } from "../../util/class-names";
+import { IconButton } from "../icon-button/icon-button";
 
 export interface DialogProps {
     isShown?: boolean;
@@ -39,7 +46,7 @@ export const Dialog = ({
         <Transition show={isShown} as={Fragment}>
             <HeadlessDialog as="div" onClose={handleClose}>
                 {hasBackground ? (
-                    <Transition.Child
+                    <TransitionChild
                         as={Fragment}
                         enter="ease-out duration-300"
                         enterFrom="opacity-0"
@@ -53,7 +60,7 @@ export const Dialog = ({
                             aria-hidden="true"
                             onClick={() => handleClose(true)}
                         />
-                    </Transition.Child>
+                    </TransitionChild>
                 ) : null}
 
                 <div
@@ -63,7 +70,7 @@ export const Dialog = ({
                         position === "center" && "items-center justify-center"
                     )}
                 >
-                    <Transition.Child
+                    <TransitionChild
                         as={Fragment}
                         enter="ease-out duration-300"
                         enterFrom="opacity-0 translate-y-4"
@@ -72,7 +79,7 @@ export const Dialog = ({
                         leaveFrom="opacity-100 translate-y-0"
                         leaveTo="opacity-0 translate-y-4"
                     >
-                        <HeadlessDialog.Panel
+                        <HeadlessDialogPanel
                             className={classNames(
                                 "flex w-[736px] transform flex-col overflow-y-auto rounded-md bg-neutral-0 shadow-lg transition-all",
                                 !footer && "pb-8",
@@ -80,9 +87,9 @@ export const Dialog = ({
                             )}
                         >
                             <div className="relative mx-10 mt-10">
-                                <HeadlessDialog.Title className="mb-6 pr-12 text-lg font-semibold text-neutral-900">
+                                <HeadlessDialogTitle className="mb-6 pr-12 text-lg font-semibold text-neutral-900">
                                     {title}
-                                </HeadlessDialog.Title>
+                                </HeadlessDialogTitle>
 
                                 {isCloseable && (
                                     <IconButton
@@ -92,9 +99,7 @@ export const Dialog = ({
                                         onClick={() => handleClose(false)}
                                     />
                                 )}
-                                <HeadlessDialog.Description as="div">
-                                    {children}
-                                </HeadlessDialog.Description>
+                                <HeadlessDescription as="div">{children}</HeadlessDescription>
                             </div>
                             {!!footer && (
                                 <div
@@ -107,8 +112,8 @@ export const Dialog = ({
                                     {footer}
                                 </div>
                             )}
-                        </HeadlessDialog.Panel>
-                    </Transition.Child>
+                        </HeadlessDialogPanel>
+                    </TransitionChild>
                 </div>
             </HeadlessDialog>
         </Transition>

From d124a7f35ee79b805b7249ccda705f6e7a263c39 Mon Sep 17 00:00:00 2001
From: Manuel <manuel.fischer@abusix.com>
Date: Wed, 31 Jul 2024 12:27:42 +0200
Subject: [PATCH 03/42] chore: Update Disclosure component with
 @headlessui/react v2.0 changes

---
 src/components/disclosure/disclosure.tsx | 9 ++++++---
 1 file changed, 6 insertions(+), 3 deletions(-)

diff --git a/src/components/disclosure/disclosure.tsx b/src/components/disclosure/disclosure.tsx
index 67411fb0..cb80ef93 100644
--- a/src/components/disclosure/disclosure.tsx
+++ b/src/components/disclosure/disclosure.tsx
@@ -1,5 +1,8 @@
+import {
+    Disclosure as HeadlessUiDisclosure,
+    DisclosureButton as HeadlessUiDisclosureButton,
+} from "@headlessui/react";
 import React from "react";
-import { Disclosure as HeadlessUiDisclosure } from "@headlessui/react";
 import { ChevronDownIcon } from "../../icons";
 import { classNames } from "../../util/class-names";
 
@@ -17,7 +20,7 @@ interface DisclosureButtonProps extends React.ComponentPropsWithoutRef<"button">
 
 const DisclosureButton = ({ children, ...props }: DisclosureButtonProps) => {
     return (
-        <HeadlessUiDisclosure.Button
+        <HeadlessUiDisclosureButton
             className="headline-300 flex w-full items-center justify-between border-b border-t border-b-neutral-300 border-t-transparent bg-neutral-50 py-3 pl-3 pr-5 text-left text-neutral-900 focus:outline focus:outline-2 focus:outline-offset-0 focus:outline-primary-200"
             {...props}
         >
@@ -29,7 +32,7 @@ const DisclosureButton = ({ children, ...props }: DisclosureButtonProps) => {
                     />
                 </>
             )}
-        </HeadlessUiDisclosure.Button>
+        </HeadlessUiDisclosureButton>
     );
 };
 

From b22e0d7ccede1ab8022600f20c98ffd342e26068 Mon Sep 17 00:00:00 2001
From: Manuel <manuel.fischer@abusix.com>
Date: Wed, 31 Jul 2024 12:28:39 +0200
Subject: [PATCH 04/42] refactor: Update ListboxButton component with
 @headlessui/react v2.0 changes

---
 src/components/form-field/listbox/listbox-button.tsx | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/components/form-field/listbox/listbox-button.tsx b/src/components/form-field/listbox/listbox-button.tsx
index e0ee9831..6d377101 100644
--- a/src/components/form-field/listbox/listbox-button.tsx
+++ b/src/components/form-field/listbox/listbox-button.tsx
@@ -1,8 +1,8 @@
-import { Listbox } from "@headlessui/react";
+import { ListboxButton as HeadlessUiListboxButton } from "@headlessui/react";
 import React from "react";
+import { CaretDownIcon } from "../../../icons";
 import { ListboxButtonBadgeValue } from "./listbox-button-badge-value";
 import { ListboxButtonTextValue } from "./listbox-button-text-value";
-import { CaretDownIcon } from "../../../icons";
 
 export interface ListboxButtonProps {
     children: React.ReactNode;
@@ -10,14 +10,14 @@ export interface ListboxButtonProps {
 
 const ListboxButton = ({ children }: ListboxButtonProps) => {
     return (
-        <Listbox.Button className="group flex h-8 w-full cursor-pointer items-center rounded border border-neutral-400 bg-neutral-0 py-2 pl-3 pr-8 outline-none hover:border-neutral-600 focus:border-primary-400 focus:ring-2 focus:ring-primary-200 ui-open:border-primary-400 ui-open:ring-2 ui-open:ring-primary-200">
+        <HeadlessUiListboxButton className="group flex h-8 w-full cursor-pointer items-center rounded border border-neutral-400 bg-neutral-0 py-2 pl-3 pr-8 outline-none hover:border-neutral-600 focus:border-primary-400 focus:ring-2 focus:ring-primary-200 ui-open:border-primary-400 ui-open:ring-2 ui-open:ring-primary-200">
             {children}
             <div className="absolute inset-y-0 right-0 flex items-center px-1.5">
                 <div className="flex h-5 w-5 items-center justify-center rounded rounded-r-md bg-neutral-100  focus:outline-none">
                     <CaretDownIcon className="h-3 w-3 fill-neutral-600" aria-hidden="true" />
                 </div>
             </div>
-        </Listbox.Button>
+        </HeadlessUiListboxButton>
     );
 };
 

From fa33a1df67d5fcce9427e0d6cf12a7d8b084df45 Mon Sep 17 00:00:00 2001
From: Manuel <manuel.fischer@abusix.com>
Date: Wed, 31 Jul 2024 12:29:24 +0200
Subject: [PATCH 05/42] chore: Update ListboxOption component with
 @headlessui/react v2.0 changes

---
 src/components/form-field/listbox/listbox-option.tsx | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/components/form-field/listbox/listbox-option.tsx b/src/components/form-field/listbox/listbox-option.tsx
index ee62fcf3..becc19cf 100644
--- a/src/components/form-field/listbox/listbox-option.tsx
+++ b/src/components/form-field/listbox/listbox-option.tsx
@@ -1,8 +1,8 @@
-import { Listbox } from "@headlessui/react";
+import { ListboxOption as HeadlessUiListboxOption } from "@headlessui/react";
 import React, { Fragment } from "react";
+import { classNames } from "../../../util/class-names";
 import { ListboxBadgeOption } from "./listbox-badge-option";
 import { ListboxTextOption } from "./listbox-text-option";
-import { classNames } from "../../../util/class-names";
 
 const listboxOptionStyles = {
     base: "relative cursor-pointer px-3 py-2 ",
@@ -20,7 +20,7 @@ export interface ListboxOptionProps<TValue> {
 
 const ListboxOption = <TValue,>({ value, disabled, children }: ListboxOptionProps<TValue>) => {
     return (
-        <Listbox.Option value={value} as={Fragment} disabled={disabled}>
+        <HeadlessUiListboxOption value={value} as={Fragment} disabled={disabled}>
             {({ active, selected }) => (
                 <li
                     className={classNames(
@@ -33,7 +33,7 @@ const ListboxOption = <TValue,>({ value, disabled, children }: ListboxOptionProp
                     {children}
                 </li>
             )}
-        </Listbox.Option>
+        </HeadlessUiListboxOption>
     );
 };
 

From 854e6ef43010ae2d07bb2cc5406d202706337f85 Mon Sep 17 00:00:00 2001
From: Manuel <manuel.fischer@abusix.com>
Date: Wed, 31 Jul 2024 12:30:01 +0200
Subject: [PATCH 06/42] refactor: Update ListboxOptions component with
 @headlessui/react v2.0 changes

---
 src/components/form-field/listbox/listbox-options.tsx | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/components/form-field/listbox/listbox-options.tsx b/src/components/form-field/listbox/listbox-options.tsx
index 7e4da31f..d033e24a 100644
--- a/src/components/form-field/listbox/listbox-options.tsx
+++ b/src/components/form-field/listbox/listbox-options.tsx
@@ -1,4 +1,4 @@
-import { Listbox } from "@headlessui/react";
+import { ListboxOptions as HeadlessUiListboxOptions } from "@headlessui/react";
 import React from "react";
 
 export interface ListboxOptionsProps {
@@ -7,8 +7,8 @@ export interface ListboxOptionsProps {
 
 export const ListboxOptions = ({ children }: ListboxOptionsProps) => {
     return (
-        <Listbox.Options className="absolute mt-1 max-h-60 w-full overflow-auto rounded-md border border-neutral-300 bg-neutral-0 shadow-md outline-none ring-0">
+        <HeadlessUiListboxOptions className="absolute mt-1 max-h-60 w-full overflow-auto rounded-md border border-neutral-300 bg-neutral-0 shadow-md outline-none ring-0">
             {children}
-        </Listbox.Options>
+        </HeadlessUiListboxOptions>
     );
 };

From 75e5d2c19aa5f73fa654cee43ee883dda49f2931 Mon Sep 17 00:00:00 2001
From: Manuel <manuel.fischer@abusix.com>
Date: Wed, 31 Jul 2024 12:31:14 +0200
Subject: [PATCH 07/42] refactor: Update MultiComboboxCustomOption component
 with @headlessui/react v2.0 changes

---
 .../multi-combobox/multi-combobox-custom-option.tsx         | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/components/form-field/multi-combobox/multi-combobox-custom-option.tsx b/src/components/form-field/multi-combobox/multi-combobox-custom-option.tsx
index c73209e3..7e00d233 100644
--- a/src/components/form-field/multi-combobox/multi-combobox-custom-option.tsx
+++ b/src/components/form-field/multi-combobox/multi-combobox-custom-option.tsx
@@ -1,5 +1,5 @@
+import { ComboboxOption as HeadlessUiComboboxOption } from "@headlessui/react";
 import React from "react";
-import { Combobox as HeadlessCombobox } from "@headlessui/react";
 
 export interface MultiComboboxCustomOptionProps<TValue> {
     value: TValue;
@@ -11,11 +11,11 @@ export const MultiComboboxCustomOption = <TValue,>({
     children,
 }: MultiComboboxCustomOptionProps<TValue>) => {
     return (
-        <HeadlessCombobox.Option
+        <HeadlessUiComboboxOption
             value={value}
             className="paragraph-100 flex cursor-pointer items-center gap-1 px-3 py-2 text-neutral-700 ui-selected:bg-primary-100 ui-selected:text-primary-500 ui-selected:before:absolute ui-selected:before:bottom-0 ui-selected:before:left-0 ui-selected:before:top-0 ui-selected:before:block ui-selected:before:w-[2px] ui-selected:before:rounded-r-md ui-selected:before:bg-primary-400 ui-active:bg-neutral-50 ui-active:ui-selected:bg-primary-100"
         >
             {children}
-        </HeadlessCombobox.Option>
+        </HeadlessUiComboboxOption>
     );
 };

From aca13ca3a707063c996a7eb69f384f71b61691b0 Mon Sep 17 00:00:00 2001
From: Manuel <manuel.fischer@abusix.com>
Date: Wed, 31 Jul 2024 12:32:23 +0200
Subject: [PATCH 08/42] refactor: Update MultiComboboxInput component with
 @headlessui/react v2.0 changes

---
 .../multi-combobox/multi-combobox-input.tsx           | 11 +++++++----
 1 file changed, 7 insertions(+), 4 deletions(-)

diff --git a/src/components/form-field/multi-combobox/multi-combobox-input.tsx b/src/components/form-field/multi-combobox/multi-combobox-input.tsx
index ad19e040..0ec18d31 100644
--- a/src/components/form-field/multi-combobox/multi-combobox-input.tsx
+++ b/src/components/form-field/multi-combobox/multi-combobox-input.tsx
@@ -1,5 +1,8 @@
+import {
+    ComboboxButton as HeadlessUiComboboxButton,
+    ComboboxInput as HeadlessUiComboboxInput,
+} from "@headlessui/react";
 import React from "react";
-import { Combobox as HeadlessCombobox } from "@headlessui/react";
 import { CaretDownIcon } from "../../../icons";
 
 export interface MultiComboboxInputProps {
@@ -19,7 +22,7 @@ export const MultiComboboxInput = ({
 }: MultiComboboxInputProps) => {
     return (
         <div className="relative">
-            <HeadlessCombobox.Input
+            <HeadlessUiComboboxInput
                 id={id}
                 name={id}
                 placeholder={placeholder}
@@ -28,7 +31,7 @@ export const MultiComboboxInput = ({
                 className="paragraph-100 flex h-8 w-full items-center rounded border border-neutral-400 py-2 pl-3 pr-8 focus-visible:border-primary-400 focus-visible:ring-2 focus-visible:ring-primary-200"
             />
             {showButton ? (
-                <HeadlessCombobox.Button className="absolute inset-y-0 right-0 flex items-center px-1.5">
+                <HeadlessUiComboboxButton className="absolute inset-y-0 right-0 flex items-center px-1.5">
                     <div className="flex h-5 w-5 items-center justify-center rounded rounded-r-md bg-neutral-100">
                         <CaretDownIcon
                             name="caret-down"
@@ -36,7 +39,7 @@ export const MultiComboboxInput = ({
                             aria-hidden="true"
                         />
                     </div>
-                </HeadlessCombobox.Button>
+                </HeadlessUiComboboxButton>
             ) : null}
         </div>
     );

From 34c6ed0b533f3a03b99f45b170c98bc99859c32f Mon Sep 17 00:00:00 2001
From: Manuel <manuel.fischer@abusix.com>
Date: Wed, 31 Jul 2024 12:32:55 +0200
Subject: [PATCH 09/42] refactor: Update MultiComboboxOption component with
 @headlessui/react v2.0 changes

---
 .../form-field/multi-combobox/multi-combobox-option.tsx     | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/components/form-field/multi-combobox/multi-combobox-option.tsx b/src/components/form-field/multi-combobox/multi-combobox-option.tsx
index f558da3b..08dcd439 100644
--- a/src/components/form-field/multi-combobox/multi-combobox-option.tsx
+++ b/src/components/form-field/multi-combobox/multi-combobox-option.tsx
@@ -1,5 +1,5 @@
+import { ComboboxOption as HeadlessUiComboboxOption } from "@headlessui/react";
 import React from "react";
-import { Combobox as HeadlessCombobox } from "@headlessui/react";
 import { SmallTickIcon } from "../../../icons";
 
 export interface MultiComboboxOptionProps<TValue> {
@@ -12,7 +12,7 @@ export const MultiComboboxOption = <TValue,>({
     children,
 }: MultiComboboxOptionProps<TValue>) => {
     return (
-        <HeadlessCombobox.Option
+        <HeadlessUiComboboxOption
             value={value}
             className="relative flex cursor-pointer items-center px-3 py-2 ui-selected:bg-primary-100 ui-selected:text-primary-500 ui-selected:before:absolute ui-selected:before:bottom-0 ui-selected:before:left-0 ui-selected:before:top-0 ui-selected:before:block ui-selected:before:w-[2px] ui-selected:before:rounded-r-md ui-selected:before:bg-primary-400 ui-active:bg-neutral-50 ui-active:ui-selected:bg-primary-100"
         >
@@ -20,6 +20,6 @@ export const MultiComboboxOption = <TValue,>({
             <div className="absolute inset-y-0 right-3 hidden items-center fill-primary-500 ui-selected:flex">
                 <SmallTickIcon />
             </div>
-        </HeadlessCombobox.Option>
+        </HeadlessUiComboboxOption>
     );
 };

From db2aad0744da87f6b0285739faafaab9fe0a6ee5 Mon Sep 17 00:00:00 2001
From: Manuel <manuel.fischer@abusix.com>
Date: Wed, 31 Jul 2024 12:33:26 +0200
Subject: [PATCH 10/42] refactor: Update MultiComboboxOptions component with
 @headlessui/react v2.0 changes

---
 .../form-field/multi-combobox/multi-combobox-options.tsx    | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/components/form-field/multi-combobox/multi-combobox-options.tsx b/src/components/form-field/multi-combobox/multi-combobox-options.tsx
index 285164d0..d5d12d77 100644
--- a/src/components/form-field/multi-combobox/multi-combobox-options.tsx
+++ b/src/components/form-field/multi-combobox/multi-combobox-options.tsx
@@ -1,5 +1,5 @@
+import { ComboboxOptions as HeadlessUiComboboxOptions } from "@headlessui/react";
 import React from "react";
-import { Combobox as HeadlessCombobox } from "@headlessui/react";
 import { classNames } from "../../../util/class-names";
 
 export interface MultiComboboxOptionsProps {
@@ -9,7 +9,7 @@ export interface MultiComboboxOptionsProps {
 
 const MultiComboboxOptions = ({ children, className }: MultiComboboxOptionsProps) => {
     return (
-        <HeadlessCombobox.Options
+        <HeadlessUiComboboxOptions
             hold
             className={classNames(
                 "absolute mt-1 max-h-60 w-full overflow-auto rounded-md border border-neutral-300 bg-neutral-0 shadow-md outline-none ring-0",
@@ -17,7 +17,7 @@ const MultiComboboxOptions = ({ children, className }: MultiComboboxOptionsProps
             )}
         >
             {children}
-        </HeadlessCombobox.Options>
+        </HeadlessUiComboboxOptions>
     );
 };
 

From 17c81de4ce38f57d87bb7b964a5e7e919037aab5 Mon Sep 17 00:00:00 2001
From: Manuel <manuel.fischer@abusix.com>
Date: Wed, 31 Jul 2024 12:35:56 +0200
Subject: [PATCH 11/42] refactor: Update MultiCombobox component with
 @headlessui/react v2.0 changes

---
 src/components/form-field/multi-combobox/multi-combobox.tsx | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/components/form-field/multi-combobox/multi-combobox.tsx b/src/components/form-field/multi-combobox/multi-combobox.tsx
index 76b98002..9f404bc4 100644
--- a/src/components/form-field/multi-combobox/multi-combobox.tsx
+++ b/src/components/form-field/multi-combobox/multi-combobox.tsx
@@ -1,4 +1,4 @@
-import { Combobox as HeadlessCombobox } from "@headlessui/react";
+import { Combobox as HeadlessUiCombobox } from "@headlessui/react";
 import React from "react";
 import { MultiComboboxCustomOption } from "./multi-combobox-custom-option";
 import { MultiComboboxEmptyOption } from "./multi-combobox-empty-option";
@@ -15,9 +15,9 @@ export interface MultiComboboxProps<TValue> {
 
 const MultiCombobox = <TValue,>({ value, onChange, children }: MultiComboboxProps<TValue>) => {
     return (
-        <HeadlessCombobox multiple value={value} onChange={onChange}>
+        <HeadlessUiCombobox multiple value={value} onChange={onChange}>
             <div className="relative">{children}</div>
-        </HeadlessCombobox>
+        </HeadlessUiCombobox>
     );
 };
 

From 948be5cf562a433018f16b81607d8a59bf8be2ea Mon Sep 17 00:00:00 2001
From: Manuel <manuel.fischer@abusix.com>
Date: Wed, 31 Jul 2024 12:41:02 +0200
Subject: [PATCH 12/42] refactor: Update RadioBoxOption component with
 @headlessui/react v2.0 changes

---
 .../form-field/radio-box/radio-box-option.tsx      | 14 ++++++--------
 1 file changed, 6 insertions(+), 8 deletions(-)

diff --git a/src/components/form-field/radio-box/radio-box-option.tsx b/src/components/form-field/radio-box/radio-box-option.tsx
index 326b4a34..1f04af1b 100644
--- a/src/components/form-field/radio-box/radio-box-option.tsx
+++ b/src/components/form-field/radio-box/radio-box-option.tsx
@@ -1,4 +1,4 @@
-import { RadioGroup } from "@headlessui/react";
+import { Radio as HeadlessUiRadio } from "@headlessui/react";
 import React, { Fragment } from "react";
 import { classNames } from "../../../util/class-names";
 
@@ -10,11 +10,10 @@ export interface RadioBoxOptionProps {
 }
 
 const radioBoxContainerStyles = {
-    base: "group relative flex items-center gap-3 rounded-lg bg-neutral-0 border p-4 border-neutral-300 hover:border-primary-600 hover:bg-primary-50 cursor-pointer focus:outline-none",
+    base: "group relative flex items-center gap-3 rounded-lg bg-neutral-0 border p-4 border-neutral-300 hover:border-primary-600 hover:bg-primary-50 cursor-pointer focus:outline-none data-[focus]:outline-2 data-[focus]:outline-primary-200",
     checked: "border-primary-600 bg-primary-600 hover:bg-primary-600 hover:text-neutral-0",
     disabled:
         "bg-neutral-100 group-hover:border-neutral-300 group-hover:bg-neutral-100 hover:border-neutral-300 hover:bg-neutral-100 cursor-not-allowed",
-    active: "ring-2 ring-primary-200",
 };
 
 const radioBoxCircleStyles = {
@@ -39,15 +38,14 @@ const Description = ({ children }: { children: React.ReactNode }) => (
 
 export const RadioBoxOption = ({ children, value, disabled, className }: RadioBoxOptionProps) => {
     return (
-        <RadioGroup.Option value={value} disabled={disabled} as={Fragment}>
-            {({ checked, disabled: optionDisabled, active }) => (
+        <HeadlessUiRadio value={value} disabled={disabled} as={Fragment}>
+            {({ checked, disabled: optionDisabled }) => (
                 <div
                     className={classNames(
                         radioBoxContainerStyles.base,
                         checked && classNames("is-checked", radioBoxContainerStyles.checked),
                         optionDisabled &&
-                            classNames("is-disabled", radioBoxContainerStyles.disabled),
-                        active && radioBoxContainerStyles.active
+                            classNames("is-disabled", radioBoxContainerStyles.disabled)
                     )}
                 >
                     <div
@@ -71,7 +69,7 @@ export const RadioBoxOption = ({ children, value, disabled, className }: RadioBo
                     <div className={classNames("flex flex-col", className)}>{children}</div>
                 </div>
             )}
-        </RadioGroup.Option>
+        </HeadlessUiRadio>
     );
 };
 

From ade1c567425cf655ed6b961c2e08b92d16d05661 Mon Sep 17 00:00:00 2001
From: Manuel <manuel.fischer@abusix.com>
Date: Wed, 31 Jul 2024 13:14:48 +0200
Subject: [PATCH 13/42] refactor: Update RadioInputOption component with
 @headlessui/react v2.0 changes

---
 .../form-field/radio-input/radio-input-option.tsx           | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/components/form-field/radio-input/radio-input-option.tsx b/src/components/form-field/radio-input/radio-input-option.tsx
index 963c6d9b..544bc0d1 100644
--- a/src/components/form-field/radio-input/radio-input-option.tsx
+++ b/src/components/form-field/radio-input/radio-input-option.tsx
@@ -1,4 +1,4 @@
-import { RadioGroup } from "@headlessui/react";
+import { Radio as HeadlessUiRadio } from "@headlessui/react";
 import React from "react";
 import { classNames } from "../../../util/class-names";
 
@@ -10,7 +10,7 @@ export interface RadioInputOptionProps {
 
 export const RadioInputOption = ({ children, value, disabled }: RadioInputOptionProps) => {
     return (
-        <RadioGroup.Option
+        <HeadlessUiRadio
             value={value}
             className="max-w-fit cursor-pointer focus:outline-none"
             disabled={disabled}
@@ -50,6 +50,6 @@ export const RadioInputOption = ({ children, value, disabled }: RadioInputOption
                     </p>
                 </div>
             )}
-        </RadioGroup.Option>
+        </HeadlessUiRadio>
     );
 };

From 031cade8a38d2823f7f3a42343f768c4d1f13d4c Mon Sep 17 00:00:00 2001
From: Manuel <manuel.fischer@abusix.com>
Date: Wed, 31 Jul 2024 13:15:34 +0200
Subject: [PATCH 14/42] refactor: Update RadioBox component with
 @headlessui/react v2.0 changes

---
 src/components/form-field/radio-box/radio-box.tsx | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/components/form-field/radio-box/radio-box.tsx b/src/components/form-field/radio-box/radio-box.tsx
index dcb753bf..97dac92e 100644
--- a/src/components/form-field/radio-box/radio-box.tsx
+++ b/src/components/form-field/radio-box/radio-box.tsx
@@ -1,5 +1,5 @@
+import { RadioGroup as HeadlessUiRadioGroup } from "@headlessui/react";
 import React from "react";
-import { RadioGroup } from "@headlessui/react";
 import { RadioBoxOption } from "./radio-box-option";
 
 export interface RadioBoxProps {
@@ -12,9 +12,9 @@ export interface RadioBoxProps {
 
 export const RadioBox = ({ id, value, children, onChange, className }: RadioBoxProps) => {
     return (
-        <RadioGroup id={id} value={value} onChange={onChange} className={className}>
+        <HeadlessUiRadioGroup id={id} value={value} onChange={onChange} className={className}>
             {children}
-        </RadioGroup>
+        </HeadlessUiRadioGroup>
     );
 };
 

From 2f833715d2c066788673f3da2142cba4819f3eaf Mon Sep 17 00:00:00 2001
From: Manuel <manuel.fischer@abusix.com>
Date: Wed, 31 Jul 2024 13:15:55 +0200
Subject: [PATCH 15/42] refactor: Update RadioInput component with
 @headlessui/react v2.0 changes

---
 src/components/form-field/radio-input/radio-input.tsx | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/components/form-field/radio-input/radio-input.tsx b/src/components/form-field/radio-input/radio-input.tsx
index 6050df76..e4ce0ef7 100644
--- a/src/components/form-field/radio-input/radio-input.tsx
+++ b/src/components/form-field/radio-input/radio-input.tsx
@@ -1,4 +1,4 @@
-import { RadioGroup as HeadlessRadioGroup } from "@headlessui/react";
+import { RadioGroup as HeadlessUiRadioGroup } from "@headlessui/react";
 import React from "react";
 import { RadioInputOption } from "./radio-input-option";
 
@@ -11,9 +11,9 @@ export interface RadioInputProps {
 
 const RadioInput = ({ id, children, value, onChange }: RadioInputProps) => {
     return (
-        <HeadlessRadioGroup id={id} value={value} onChange={onChange}>
+        <HeadlessUiRadioGroup id={id} value={value} onChange={onChange}>
             {children}
-        </HeadlessRadioGroup>
+        </HeadlessUiRadioGroup>
     );
 };
 

From 96d3491be3b66cc35fcd01731ad015f769c2267e Mon Sep 17 00:00:00 2001
From: Manuel <manuel.fischer@abusix.com>
Date: Wed, 31 Jul 2024 13:33:05 +0200
Subject: [PATCH 16/42] refactor: Update SingleComboboxCustomOption component
 with @headlessui/react v2.0 changes

---
 .../single-combobox/single-combobox-custom-option.tsx       | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/components/form-field/single-combobox/single-combobox-custom-option.tsx b/src/components/form-field/single-combobox/single-combobox-custom-option.tsx
index 866dee71..83612097 100644
--- a/src/components/form-field/single-combobox/single-combobox-custom-option.tsx
+++ b/src/components/form-field/single-combobox/single-combobox-custom-option.tsx
@@ -1,4 +1,4 @@
-import { Combobox as HeadlessCombobox } from "@headlessui/react";
+import { ComboboxOption as HeadlessUiComboboxOption } from "@headlessui/react";
 import React from "react";
 
 export interface SingleComboboxCustomOptionProps<TValue> {
@@ -11,11 +11,11 @@ export const SingleComboboxCustomOption = <TValue,>({
     children,
 }: SingleComboboxCustomOptionProps<TValue>) => {
     return (
-        <HeadlessCombobox.Option
+        <HeadlessUiComboboxOption
             value={value}
             className="paragraph-100 flex cursor-pointer items-center gap-1 px-3 py-2 text-neutral-700 ui-selected:bg-primary-100 ui-selected:text-primary-500 ui-selected:before:absolute ui-selected:before:bottom-0 ui-selected:before:left-0 ui-selected:before:top-0 ui-selected:before:block ui-selected:before:w-[2px] ui-selected:before:rounded-r-md ui-selected:before:bg-primary-400 ui-active:bg-neutral-50 ui-active:ui-selected:bg-primary-100"
         >
             {children}
-        </HeadlessCombobox.Option>
+        </HeadlessUiComboboxOption>
     );
 };

From 02a430cc8ea5e89a46aabe0b926672b1f61d5c2b Mon Sep 17 00:00:00 2001
From: Manuel <manuel.fischer@abusix.com>
Date: Wed, 31 Jul 2024 13:34:47 +0200
Subject: [PATCH 17/42] refactor: Update SingleComboboxInput component with
 @headlessui/react v2.0 changes

---
 .../single-combobox/single-combobox-input.tsx         | 11 +++++++----
 1 file changed, 7 insertions(+), 4 deletions(-)

diff --git a/src/components/form-field/single-combobox/single-combobox-input.tsx b/src/components/form-field/single-combobox/single-combobox-input.tsx
index 425f5d54..be98df69 100644
--- a/src/components/form-field/single-combobox/single-combobox-input.tsx
+++ b/src/components/form-field/single-combobox/single-combobox-input.tsx
@@ -1,4 +1,7 @@
-import { Combobox as HeadlessCombobox } from "@headlessui/react";
+import {
+    ComboboxButton as HeadlessUiComboboxButton,
+    ComboboxInput as HeadlessUiComboboxInput,
+} from "@headlessui/react";
 import React from "react";
 import { CaretDownIcon } from "../../../icons";
 
@@ -19,7 +22,7 @@ export const SingleComboboxInput = <TValue,>({
 }: SingleComboboxInputProps<TValue>) => {
     return (
         <div className="relative">
-            <HeadlessCombobox.Input
+            <HeadlessUiComboboxInput
                 id={id}
                 name={id}
                 placeholder={placeholder}
@@ -28,7 +31,7 @@ export const SingleComboboxInput = <TValue,>({
                 className="paragraph-100 flex h-8 w-full items-center rounded border border-neutral-400 py-2 pl-3 pr-8 focus-visible:border-primary-400 focus-visible:ring-2 focus-visible:ring-primary-200 disabled:border-neutral-300 disabled:bg-neutral-100 disabled:text-neutral-600"
             />
             {showButton ? (
-                <HeadlessCombobox.Button className="absolute inset-y-0 right-0 flex items-center px-1.5">
+                <HeadlessUiComboboxButton className="absolute inset-y-0 right-0 flex items-center px-1.5">
                     <div className="flex h-5 w-5 items-center justify-center rounded rounded-r-md bg-neutral-100">
                         <CaretDownIcon
                             name="caret-down"
@@ -36,7 +39,7 @@ export const SingleComboboxInput = <TValue,>({
                             aria-hidden="true"
                         />
                     </div>
-                </HeadlessCombobox.Button>
+                </HeadlessUiComboboxButton>
             ) : null}
         </div>
     );

From 8a126fe360318cff7974d7320bc76bf2449837d1 Mon Sep 17 00:00:00 2001
From: Manuel <manuel.fischer@abusix.com>
Date: Wed, 31 Jul 2024 13:35:20 +0200
Subject: [PATCH 18/42] refactor: Update SingleComboboxOptions component with
 @headlessui/react v2.0 changes

---
 .../form-field/single-combobox/single-combobox-options.tsx  | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/components/form-field/single-combobox/single-combobox-options.tsx b/src/components/form-field/single-combobox/single-combobox-options.tsx
index 5d72ed21..b8fd6912 100644
--- a/src/components/form-field/single-combobox/single-combobox-options.tsx
+++ b/src/components/form-field/single-combobox/single-combobox-options.tsx
@@ -1,4 +1,4 @@
-import { Combobox as HeadlessCombobox } from "@headlessui/react";
+import { ComboboxOptions as HeadlessUiComboboxOptions } from "@headlessui/react";
 import React from "react";
 
 export interface SingleComboboxOptionsProps {
@@ -7,11 +7,11 @@ export interface SingleComboboxOptionsProps {
 
 export const SingleComboboxOptions = ({ children }: SingleComboboxOptionsProps) => {
     return (
-        <HeadlessCombobox.Options
+        <HeadlessUiComboboxOptions
             hold
             className="absolute mt-1 max-h-60 w-full overflow-auto rounded-md border border-neutral-300 bg-neutral-0 shadow-md outline-none ring-0"
         >
             {children}
-        </HeadlessCombobox.Options>
+        </HeadlessUiComboboxOptions>
     );
 };

From 338a99e22c8e9dcae4dc151c0644446e5996b879 Mon Sep 17 00:00:00 2001
From: Manuel <manuel.fischer@abusix.com>
Date: Wed, 31 Jul 2024 13:35:57 +0200
Subject: [PATCH 19/42] refactor: Update SingleComboboxResultInput component
 with @headlessui/react v2.0 changes

---
 .../single-combobox/single-combobox-result-input.tsx      | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/components/form-field/single-combobox/single-combobox-result-input.tsx b/src/components/form-field/single-combobox/single-combobox-result-input.tsx
index 68ea921e..94d0959f 100644
--- a/src/components/form-field/single-combobox/single-combobox-result-input.tsx
+++ b/src/components/form-field/single-combobox/single-combobox-result-input.tsx
@@ -1,7 +1,7 @@
-import { Combobox as HeadlessCombobox } from "@headlessui/react";
+import { ComboboxButton as HeadlessUiComboboxButton } from "@headlessui/react";
 import React from "react";
-import { Tag } from "../../tag/tag";
 import { CaretDownIcon } from "../../../icons";
+import { Tag } from "../../tag/tag";
 
 export interface SingleComboboxResultInputProps {
     onUnselect: () => void;
@@ -16,11 +16,11 @@ export const SingleComboboxResultInput = ({
         <div className="relative">
             <div className="paragraph-100 flex h-8 w-full items-center rounded border border-neutral-400 py-2 pl-3 pr-8 focus-visible:border-primary-400 focus-visible:ring-2 focus-visible:ring-primary-200">
                 <Tag onClick={onUnselect}>{children}</Tag>
-                <HeadlessCombobox.Button className="absolute inset-y-0 right-0 flex items-center px-1.5">
+                <HeadlessUiComboboxButton className="absolute inset-y-0 right-0 flex items-center px-1.5">
                     <div className="flex h-5 w-5 items-center justify-center rounded rounded-r-md bg-neutral-100">
                         <CaretDownIcon className="h-3 w-3 fill-neutral-600" aria-hidden="true" />
                     </div>
-                </HeadlessCombobox.Button>
+                </HeadlessUiComboboxButton>
             </div>
         </div>
     );

From 95e45abfbdcd093459bca4ed331f5c290adf5537 Mon Sep 17 00:00:00 2001
From: Manuel <manuel.fischer@abusix.com>
Date: Wed, 31 Jul 2024 13:36:30 +0200
Subject: [PATCH 20/42] refactor: Update SingleComboboxOption component with
 @headlessui/react v2.0 changes

---
 .../form-field/single-combobox/single-combobox.option.tsx   | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/components/form-field/single-combobox/single-combobox.option.tsx b/src/components/form-field/single-combobox/single-combobox.option.tsx
index 511ea6f9..f613a058 100644
--- a/src/components/form-field/single-combobox/single-combobox.option.tsx
+++ b/src/components/form-field/single-combobox/single-combobox.option.tsx
@@ -1,4 +1,4 @@
-import { Combobox as HeadlessCombobox } from "@headlessui/react";
+import { ComboboxOption as HeadlessUiComboboxOption } from "@headlessui/react";
 import React from "react";
 
 export interface SingleComboboxOptionProps<TValue> {
@@ -10,10 +10,10 @@ export const SingleComboboxOption = <TValue,>({
     value,
     children,
 }: SingleComboboxOptionProps<TValue>) => (
-    <HeadlessCombobox.Option
+    <HeadlessUiComboboxOption
         value={value}
         className="relative flex cursor-pointer items-center px-3 py-2 ui-selected:bg-primary-100 ui-selected:text-primary-500 ui-selected:before:absolute ui-selected:before:bottom-0 ui-selected:before:left-0 ui-selected:before:top-0 ui-selected:before:block ui-selected:before:w-[2px] ui-selected:before:rounded-r-md ui-selected:before:bg-primary-400 ui-active:bg-neutral-50 ui-active:ui-selected:bg-primary-100"
     >
         {children}
-    </HeadlessCombobox.Option>
+    </HeadlessUiComboboxOption>
 );

From ee004ee81a12cef85c44bc38d20ed9c328a5451b Mon Sep 17 00:00:00 2001
From: Manuel <manuel.fischer@abusix.com>
Date: Wed, 31 Jul 2024 13:36:49 +0200
Subject: [PATCH 21/42] refactor: Update SingleCombobox component with
 @headlessui/react v2.0 changes

---
 .../form-field/single-combobox/single-combobox.tsx   | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/src/components/form-field/single-combobox/single-combobox.tsx b/src/components/form-field/single-combobox/single-combobox.tsx
index 8c3fb8b4..e2e99820 100644
--- a/src/components/form-field/single-combobox/single-combobox.tsx
+++ b/src/components/form-field/single-combobox/single-combobox.tsx
@@ -1,11 +1,11 @@
-import { Combobox as HeadlessCombobox } from "@headlessui/react";
+import { Combobox as HeadlessUiCombobox } from "@headlessui/react";
 import React from "react";
+import { SingleComboboxCustomOption } from "./single-combobox-custom-option";
+import { SingleComboboxEmptyOption } from "./single-combobox-empty-option";
 import { SingleComboboxInput } from "./single-combobox-input";
 import { SingleComboboxOptions } from "./single-combobox-options";
-import { SingleComboboxOption } from "./single-combobox.option";
 import { SingleComboboxResultInput } from "./single-combobox-result-input";
-import { SingleComboboxCustomOption } from "./single-combobox-custom-option";
-import { SingleComboboxEmptyOption } from "./single-combobox-empty-option";
+import { SingleComboboxOption } from "./single-combobox.option";
 
 export interface SingleComboboxProps<TValue> {
     value?: TValue;
@@ -21,9 +21,9 @@ const SingleCombobox = <TValue,>({
     disabled,
 }: SingleComboboxProps<TValue>) => {
     return (
-        <HeadlessCombobox value={value} onChange={onChange} disabled={disabled}>
+        <HeadlessUiCombobox value={value} onChange={onChange} disabled={disabled}>
             <div className="relative">{children}</div>
-        </HeadlessCombobox>
+        </HeadlessUiCombobox>
     );
 };
 

From dd4e1b0a69efbbd922aa158f6dec01a697f11747 Mon Sep 17 00:00:00 2001
From: Manuel <manuel.fischer@abusix.com>
Date: Wed, 31 Jul 2024 13:37:07 +0200
Subject: [PATCH 22/42] refactor: Update menu component with @headlessui/react
 v2.0 changes

---
 src/components/menu/menu.tsx | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/components/menu/menu.tsx b/src/components/menu/menu.tsx
index 059d57a5..217e7927 100644
--- a/src/components/menu/menu.tsx
+++ b/src/components/menu/menu.tsx
@@ -1,11 +1,11 @@
+import { Menu as HeadlessUiMenu } from "@headlessui/react";
 import React from "react";
-import { Menu as HeadlessMenu } from "@headlessui/react";
+import { MenuButton } from "./menu-button/menu-button";
 import { MenuInfoItem } from "./menu-info-item/menu-info-item";
 import { MenuItem } from "./menu-item/menu-item";
 import { MenuItems } from "./menu-items/menu-items";
 import { MenuSeparator } from "./menu-separator/menu-separator";
 import { MenuTitle } from "./menu-title/menu-title";
-import { MenuButton } from "./menu-button/menu-button";
 
 interface MenuProps {
     children: React.ReactNode;
@@ -13,9 +13,9 @@ interface MenuProps {
 
 const Menu = ({ children }: MenuProps) => {
     return (
-        <HeadlessMenu as="div" className="relative">
+        <HeadlessUiMenu as="div" className="relative">
             {children}
-        </HeadlessMenu>
+        </HeadlessUiMenu>
     );
 };
 

From 6a4efc5935caa4c2fa52b351bc16e5957b81c695 Mon Sep 17 00:00:00 2001
From: Manuel <manuel.fischer@abusix.com>
Date: Wed, 31 Jul 2024 13:37:41 +0200
Subject: [PATCH 23/42] refactor: Update menu button component with
 @headlessui/react v2.0 changes

---
 src/components/menu/menu-button/menu-button.tsx | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/components/menu/menu-button/menu-button.tsx b/src/components/menu/menu-button/menu-button.tsx
index 9c73a1b7..c60a394f 100644
--- a/src/components/menu/menu-button/menu-button.tsx
+++ b/src/components/menu/menu-button/menu-button.tsx
@@ -1,4 +1,4 @@
-import { Menu as HeadlessMenu } from "@headlessui/react";
+import { MenuButton as HeadlessUiMenuButton } from "@headlessui/react";
 import React from "react";
 
 export interface MenuButtonProps {
@@ -8,8 +8,8 @@ export interface MenuButtonProps {
 
 export const MenuButton = ({ children, className }: MenuButtonProps) => {
     return (
-        <HeadlessMenu.Button as="div" className={className}>
+        <HeadlessUiMenuButton as="div" className={className}>
             {children}
-        </HeadlessMenu.Button>
+        </HeadlessUiMenuButton>
     );
 };

From 28d75ce559dc55aeb0fdf16f708aeba5d407cef1 Mon Sep 17 00:00:00 2001
From: Manuel <manuel.fischer@abusix.com>
Date: Wed, 31 Jul 2024 13:48:06 +0200
Subject: [PATCH 24/42] refactor: Update menu item component with
 @headlessui/react v2.0 changes

---
 src/components/menu/menu-item/menu-item.tsx | 61 ++++++---------------
 1 file changed, 18 insertions(+), 43 deletions(-)

diff --git a/src/components/menu/menu-item/menu-item.tsx b/src/components/menu/menu-item/menu-item.tsx
index 36751dab..edc9672c 100644
--- a/src/components/menu/menu-item/menu-item.tsx
+++ b/src/components/menu/menu-item/menu-item.tsx
@@ -1,55 +1,30 @@
-import { Menu as HeadlessMenu } from "@headlessui/react";
+import { MenuItem as HeadlessUiMenuItem } from "@headlessui/react";
 import React from "react";
-import { classNames } from "../../../util/class-names";
 
 export interface MenuItemProps {
     children: React.ReactNode;
     LeftIcon?: React.ElementType;
-    isSelected?: boolean;
     disabled?: boolean;
     onClick?: () => void;
 }
 
-export const MenuItem = ({
-    children,
-    LeftIcon,
-    isSelected = false,
-    disabled = false,
-    onClick,
-}: MenuItemProps) => {
+export const MenuItem = ({ children, LeftIcon, disabled = false, onClick }: MenuItemProps) => {
     return (
-        <HeadlessMenu.Item disabled={disabled}>
-            {({ active }) => (
-                <button
-                    type="button"
-                    className={classNames(
-                        "group relative flex w-full cursor-pointer items-center gap-4 bg-neutral-0 px-4 py-2.5 hover:bg-neutral-100 focus:ring-2 focus:ring-primary-200 active:bg-neutral-200 disabled:bg-neutral-0",
-                        active && "bg-neutral-100",
-                        isSelected && "bg-primary-100 hover:bg-primary-100 active:bg-primary-100"
-                    )}
-                    disabled={disabled}
-                    onKeyDown={onClick}
-                    onClick={onClick}
-                >
-                    {LeftIcon ? (
-                        <LeftIcon
-                            className={classNames(
-                                "h-4 w-4 fill-neutral-600 group-disabled:fill-neutral-400",
-                                isSelected && "fill-primary-400"
-                            )}
-                        />
-                    ) : null}
-                    <div
-                        className={classNames(
-                            "paragraph-200 text-neutral-800 group-disabled:text-neutral-400",
-                            isSelected &&
-                                "text-primary-400 before:absolute before:bottom-0 before:left-0 before:top-0 before:w-0.5 before:rounded-r-sm before:bg-primary-400 group-disabled:before:bg-neutral-0"
-                        )}
-                    >
-                        {children}
-                    </div>
-                </button>
-            )}
-        </HeadlessMenu.Item>
+        <HeadlessUiMenuItem disabled={disabled}>
+            <button
+                type="button"
+                className="group relative flex w-full cursor-pointer items-center gap-4 bg-neutral-0 px-4 py-2.5 hover:bg-neutral-100 disabled:bg-neutral-0 data-[focus]:bg-neutral-200"
+                disabled={disabled}
+                onKeyDown={onClick}
+                onClick={onClick}
+            >
+                {LeftIcon ? (
+                    <LeftIcon className="h-4 w-4 fill-neutral-600 group-disabled:fill-neutral-400" />
+                ) : null}
+                <div className="paragraph-200 text-neutral-800 group-disabled:text-neutral-400">
+                    {children}
+                </div>
+            </button>
+        </HeadlessUiMenuItem>
     );
 };

From 626d1bf059529c1622ef41e711da876d0bb3c2ab Mon Sep 17 00:00:00 2001
From: Manuel <manuel.fischer@abusix.com>
Date: Wed, 31 Jul 2024 13:48:39 +0200
Subject: [PATCH 25/42] refactor: Update menu items component with
 @headlessui/react v2.0 changes

---
 src/components/menu/menu-items/menu-items.tsx | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/components/menu/menu-items/menu-items.tsx b/src/components/menu/menu-items/menu-items.tsx
index ef658fa3..7f146df7 100644
--- a/src/components/menu/menu-items/menu-items.tsx
+++ b/src/components/menu/menu-items/menu-items.tsx
@@ -1,13 +1,13 @@
+import { MenuItems as HeadlessUiMenuItems } from "@headlessui/react";
 import React from "react";
-import { Menu as HeadlessMenu } from "@headlessui/react";
 
 export interface MenuItemsProps {
     children: React.ReactNode;
 }
 export const MenuItems = ({ children }: MenuItemsProps) => {
     return (
-        <HeadlessMenu.Items className="absolute right-0 z-10 mt-2 flex w-52 flex-col rounded-md bg-neutral-0 py-2 shadow-md outline-none">
+        <HeadlessUiMenuItems className="absolute right-0 z-10 mt-2 flex w-52 flex-col rounded-md bg-neutral-0 py-2 shadow-md outline-none">
             {children}
-        </HeadlessMenu.Items>
+        </HeadlessUiMenuItems>
     );
 };

From 5fd15dad959098e270502e6f9a58e6cb65ea2c4a Mon Sep 17 00:00:00 2001
From: Manuel <manuel.fischer@abusix.com>
Date: Wed, 31 Jul 2024 13:49:36 +0200
Subject: [PATCH 26/42] refactor: Update NavigationDisclosurePanel to use
 @headlessui/react v2.0 changes

---
 src/components/navigation/navigation-disclosure-panel.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/navigation/navigation-disclosure-panel.tsx b/src/components/navigation/navigation-disclosure-panel.tsx
index fb35ae73..c1ec2ac4 100644
--- a/src/components/navigation/navigation-disclosure-panel.tsx
+++ b/src/components/navigation/navigation-disclosure-panel.tsx
@@ -1,5 +1,5 @@
+import { DisclosurePanel as HeadlessUiDisclosurePanel } from "@headlessui/react";
 import React from "react";
-import { Disclosure } from "@headlessui/react";
 import { classNames } from "../../util/class-names";
 
 export interface NavigationDisclosurePanelItemProps extends React.ComponentPropsWithoutRef<"div"> {
@@ -35,7 +35,7 @@ export interface NavigationDisclosurePanelProps {
 }
 
 const NavigationDisclosurePanel = ({ children }: NavigationDisclosurePanelProps) => {
-    return <Disclosure.Panel>{children}</Disclosure.Panel>;
+    return <HeadlessUiDisclosurePanel>{children}</HeadlessUiDisclosurePanel>;
 };
 
 NavigationDisclosurePanel.Item = NavigationDisclosurePanelItem;

From a04618f6ab7e0a749e0ae9a911105d64c308ecbe Mon Sep 17 00:00:00 2001
From: Manuel <manuel.fischer@abusix.com>
Date: Wed, 31 Jul 2024 13:50:30 +0200
Subject: [PATCH 27/42] refactor: Update NavigationDisclosureButton to use
 @headlessui/react v2.0 changes

---
 .../navigation/navigation-disclosure.tsx          | 15 +++++++++------
 1 file changed, 9 insertions(+), 6 deletions(-)

diff --git a/src/components/navigation/navigation-disclosure.tsx b/src/components/navigation/navigation-disclosure.tsx
index 97f07db3..ed7f4c28 100644
--- a/src/components/navigation/navigation-disclosure.tsx
+++ b/src/components/navigation/navigation-disclosure.tsx
@@ -1,8 +1,11 @@
-import { Disclosure } from "@headlessui/react";
+import {
+    Disclosure as HeadlessUiDisclosure,
+    DisclosureButton as HeadlessUiDisclosureButton,
+} from "@headlessui/react";
 import React from "react";
+import { classNames } from "../../util/class-names";
 import { NavigationDisclosurePanel } from "./navigation-disclosure-panel";
 import { NavigationGroupItemTag } from "./navigation-group-item-tag";
-import { classNames } from "../../util/class-names";
 
 export interface NavigationDisclosureButtonProps {
     children: React.ReactNode;
@@ -20,7 +23,7 @@ const NavigationDisclosureButton = ({
     className,
 }: NavigationDisclosureButtonProps) => {
     return (
-        <Disclosure.Button
+        <HeadlessUiDisclosureButton
             className={classNames(
                 "flex w-full cursor-pointer items-center gap-x-2 px-4 py-3 text-left text-sm text-neutral-0 hover:bg-primary-900+10 ui-open:bg-primary-900+8 ui-open:font-semibold",
                 className
@@ -30,7 +33,7 @@ const NavigationDisclosureButton = ({
             {LeftIcon ? <LeftIcon className="h-4 w-4" /> : null}
             {children}
             {tag ? <NavigationGroupItemTag>{tag}</NavigationGroupItemTag> : null}
-        </Disclosure.Button>
+        </HeadlessUiDisclosureButton>
     );
 };
 
@@ -59,9 +62,9 @@ const renderDisclosureChildren = ({
 
 const NavigationDisclosure = ({ children, defaultOpen }: NavigationDisclosureProps) => {
     return (
-        <Disclosure as="div" defaultOpen={defaultOpen}>
+        <HeadlessUiDisclosure as="div" defaultOpen={defaultOpen}>
             {({ close }) => <>{renderDisclosureChildren({ children, close })}</>}
-        </Disclosure>
+        </HeadlessUiDisclosure>
     );
 };
 

From 48e18007b4188fa129997fd607d0b5da86215783 Mon Sep 17 00:00:00 2001
From: Manuel <manuel.fischer@abusix.com>
Date: Wed, 31 Jul 2024 13:51:09 +0200
Subject: [PATCH 28/42] refactor: Update NavigationPopoverButton to use
 @headlessui/react v2.0 changes

---
 src/components/navigation/navigation-popover-button.tsx | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/components/navigation/navigation-popover-button.tsx b/src/components/navigation/navigation-popover-button.tsx
index ea4fd00b..f6a59fd2 100644
--- a/src/components/navigation/navigation-popover-button.tsx
+++ b/src/components/navigation/navigation-popover-button.tsx
@@ -1,4 +1,4 @@
-import { Popover } from "@headlessui/react";
+import { PopoverButton as HeadlessUiPopoverButton } from "@headlessui/react";
 import React from "react";
 import { useNavigationPopoverContext } from "./navigation-popover-context";
 
@@ -18,7 +18,7 @@ export const NavigationPopoverButton = ({
     } = useNavigationPopoverContext();
 
     return (
-        <Popover.Button
+        <HeadlessUiPopoverButton
             ref={(el) => el && setReferenceElement(el)}
             className="flex w-full cursor-pointer items-center gap-x-3 px-4 py-3 text-left text-sm text-neutral-0 hover:bg-primary-900+10 ui-open:bg-primary-900+8 ui-open:font-semibold"
             onClick={onClick}
@@ -27,6 +27,6 @@ export const NavigationPopoverButton = ({
                 {LeftIcon && <LeftIcon className="h-4 w-4" />}
                 {children}
             </>
-        </Popover.Button>
+        </HeadlessUiPopoverButton>
     );
 };

From b47a3f67c7a977e673e0eb215cfcaa727a73b820 Mon Sep 17 00:00:00 2001
From: Manuel <manuel.fischer@abusix.com>
Date: Wed, 31 Jul 2024 13:52:53 +0200
Subject: [PATCH 29/42] refactor: Update NavigationPopoverOverlay to use
 @headlessui/react v2.0 changes

---
 src/components/navigation/navigation-popover-overlay.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/navigation/navigation-popover-overlay.tsx b/src/components/navigation/navigation-popover-overlay.tsx
index cc88c094..baa25362 100644
--- a/src/components/navigation/navigation-popover-overlay.tsx
+++ b/src/components/navigation/navigation-popover-overlay.tsx
@@ -1,6 +1,6 @@
-import { Popover } from "@headlessui/react";
+import { PopoverBackdrop as HeadlessUiPopoverBackdrop } from "@headlessui/react";
 import * as React from "react";
 
 export const NavigationPopoverOverlay = () => (
-    <Popover.Overlay className="fixed inset-0 z-30 translate-x-[180px] bg-modal-background" />
+    <HeadlessUiPopoverBackdrop className="fixed inset-0 z-30 translate-x-[180px] bg-modal-background" />
 );

From 903b0985ce5dfcfd949646ec667f7c6a743c559f Mon Sep 17 00:00:00 2001
From: Manuel <manuel.fischer@abusix.com>
Date: Wed, 31 Jul 2024 13:53:18 +0200
Subject: [PATCH 30/42] refactor: Update NavigationPopoverPanel to use
 @headlessui/react v2.0 changes

---
 src/components/navigation/navigation-popover-panel.tsx | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/components/navigation/navigation-popover-panel.tsx b/src/components/navigation/navigation-popover-panel.tsx
index 23f4178e..fdbd19f2 100644
--- a/src/components/navigation/navigation-popover-panel.tsx
+++ b/src/components/navigation/navigation-popover-panel.tsx
@@ -1,4 +1,4 @@
-import { Popover } from "@headlessui/react";
+import { PopoverPanel as HeadlessUiPopoverPanel } from "@headlessui/react";
 import React from "react";
 import { useNavigationPopoverContext } from "./navigation-popover-context";
 
@@ -24,14 +24,14 @@ const NavigationPopoverPanel = ({ children }: NavigationPopoverPanelProps) => {
     } = useNavigationPopoverContext();
 
     return (
-        <Popover.Panel
+        <HeadlessUiPopoverPanel
             ref={(el) => el && setPopperElement(el)}
             style={styles}
             {...attributes}
             className="z-40 ml-2 w-52 rounded bg-neutral-0 py-2 shadow"
         >
             {children}
-        </Popover.Panel>
+        </HeadlessUiPopoverPanel>
     );
 };
 

From dd128bf948400e5aa41dc5c9fc6859b05256bffe Mon Sep 17 00:00:00 2001
From: Manuel <manuel.fischer@abusix.com>
Date: Wed, 31 Jul 2024 13:53:24 +0200
Subject: [PATCH 31/42] refactor: Update NavigationPopoverContext to use
 @headlessui/react v2.0 changes

---
 src/components/navigation/navigation-popover-context.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/navigation/navigation-popover-context.tsx b/src/components/navigation/navigation-popover-context.tsx
index f0ad389f..b4515a4e 100644
--- a/src/components/navigation/navigation-popover-context.tsx
+++ b/src/components/navigation/navigation-popover-context.tsx
@@ -5,7 +5,7 @@ export const NavigationPopoverContext = createContext<{
         setReferenceElement: React.Dispatch<React.SetStateAction<HTMLButtonElement | undefined>>;
     };
     popoverPanel: {
-        setPopperElement: React.Dispatch<React.SetStateAction<HTMLDivElement | undefined>>;
+        setPopperElement: React.Dispatch<React.SetStateAction<HTMLElement | undefined>>;
         styles: CSSProperties;
         attributes: { [key: string]: string } | undefined;
     };

From d1aaa27ba7457f9cf5c8605bc601e81051915bec Mon Sep 17 00:00:00 2001
From: Manuel <manuel.fischer@abusix.com>
Date: Wed, 31 Jul 2024 13:54:26 +0200
Subject: [PATCH 32/42] refactor: Update SidesheetPanelHeaderTitle to use
 @headlessui/react v2.0 changes

---
 src/components/sidesheet/sidesheet-panel-header-title.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/sidesheet/sidesheet-panel-header-title.tsx b/src/components/sidesheet/sidesheet-panel-header-title.tsx
index 06c0f118..445db14a 100644
--- a/src/components/sidesheet/sidesheet-panel-header-title.tsx
+++ b/src/components/sidesheet/sidesheet-panel-header-title.tsx
@@ -1,10 +1,10 @@
+import { DialogTitle as HeadlessUiDialogTitle } from "@headlessui/react";
 import React from "react";
-import { Dialog as HeadlessDialog } from "@headlessui/react";
 
 export interface PanelHeaderTitleProps {
     children: React.ReactNode;
 }
 
 export const SidesheetPanelHeaderTitle = ({ children }: PanelHeaderTitleProps) => {
-    return <HeadlessDialog.Title className="headline-600">{children}</HeadlessDialog.Title>;
+    return <HeadlessUiDialogTitle className="headline-600">{children}</HeadlessUiDialogTitle>;
 };

From 77af8673e8df5efcbd41ef5595b3805fca68a337 Mon Sep 17 00:00:00 2001
From: Manuel <manuel.fischer@abusix.com>
Date: Wed, 31 Jul 2024 13:54:55 +0200
Subject: [PATCH 33/42] refactor: Update SidesheetPanel to use
 @headlessui/react v2.0 changes

---
 src/components/sidesheet/sidesheet-panel.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/sidesheet/sidesheet-panel.tsx b/src/components/sidesheet/sidesheet-panel.tsx
index 66ff1b4d..8afc9112 100644
--- a/src/components/sidesheet/sidesheet-panel.tsx
+++ b/src/components/sidesheet/sidesheet-panel.tsx
@@ -1,10 +1,10 @@
+import { DialogPanel as HeadlessUiDialogPanel } from "@headlessui/react";
 import React from "react";
-import { Dialog as HeadlessDialog } from "@headlessui/react";
 
 export interface SidesheetPanelProps {
     children: React.ReactNode;
 }
 
 export const SidesheetPanel = ({ children }: SidesheetPanelProps) => {
-    return <HeadlessDialog.Panel>{children}</HeadlessDialog.Panel>;
+    return <HeadlessUiDialogPanel>{children}</HeadlessUiDialogPanel>;
 };

From 4dcac8f0d3f40392f1168186faba742b5bfe6011 Mon Sep 17 00:00:00 2001
From: Manuel <manuel.fischer@abusix.com>
Date: Wed, 31 Jul 2024 13:56:19 +0200
Subject: [PATCH 34/42] refactor: Update Sidesheet component to use
 @headlessui/react v2.0 changes

---
 src/components/sidesheet/sidesheet.tsx | 27 +++++++++++++++-----------
 1 file changed, 16 insertions(+), 11 deletions(-)

diff --git a/src/components/sidesheet/sidesheet.tsx b/src/components/sidesheet/sidesheet.tsx
index 06d11850..1d64cf72 100644
--- a/src/components/sidesheet/sidesheet.tsx
+++ b/src/components/sidesheet/sidesheet.tsx
@@ -1,5 +1,10 @@
+import {
+    Dialog as HeadlessUiDialog,
+    DialogPanel as HeadlessUiDialogPanel,
+    Transition as HeadlessUiTransition,
+    TransitionChild as HeadlessUiTransitionChild,
+} from "@headlessui/react";
 import React, { Fragment } from "react";
-import { Dialog as HeadlessDialog, Transition } from "@headlessui/react";
 import { SidesheetPanel } from "./sidesheet-panel";
 import { SidesheetPanelContent } from "./sidesheet-panel-content";
 import { SidesheetPanelHeader } from "./sidesheet-panel-header";
@@ -13,9 +18,9 @@ export interface SidesheetProps {
 
 const Sidesheet = ({ children, isOpen, onClose, initialFocus }: SidesheetProps) => {
     return (
-        <Transition appear show={isOpen} as={Fragment}>
-            <HeadlessDialog onClose={onClose} initialFocus={initialFocus}>
-                <Transition.Child
+        <HeadlessUiTransition appear show={isOpen} as={Fragment}>
+            <HeadlessUiDialog onClose={onClose} initialFocus={initialFocus}>
+                <HeadlessUiTransitionChild
                     as={Fragment}
                     enter="ease-out duration-300"
                     enterFrom="opacity-0 z-0"
@@ -25,9 +30,9 @@ const Sidesheet = ({ children, isOpen, onClose, initialFocus }: SidesheetProps)
                     leaveTo="opacity-0 z-0"
                 >
                     <div className="fixed inset-0 bg-modal-background" aria-hidden="true" />
-                </Transition.Child>
+                </HeadlessUiTransitionChild>
 
-                <Transition.Child
+                <HeadlessUiTransitionChild
                     as={Fragment}
                     enter="transition ease-in-out duration-300 transform"
                     enterFrom="translate-x-full"
@@ -36,12 +41,12 @@ const Sidesheet = ({ children, isOpen, onClose, initialFocus }: SidesheetProps)
                     leaveFrom="-translate-x-0"
                     leaveTo="translate-x-full"
                 >
-                    <HeadlessDialog.Panel className="fixed inset-y-0 right-0 z-10 w-184 overflow-y-auto bg-neutral-0">
+                    <HeadlessUiDialogPanel className="fixed inset-y-0 right-0 z-10 w-184 overflow-y-auto bg-neutral-0">
                         {children}
-                    </HeadlessDialog.Panel>
-                </Transition.Child>
-            </HeadlessDialog>
-        </Transition>
+                    </HeadlessUiDialogPanel>
+                </HeadlessUiTransitionChild>
+            </HeadlessUiDialog>
+        </HeadlessUiTransition>
     );
 };
 

From 0d73b839c88a56e967452ca1bbf5453d44313d5f Mon Sep 17 00:00:00 2001
From: Manuel <manuel.fischer@abusix.com>
Date: Wed, 31 Jul 2024 13:57:28 +0200
Subject: [PATCH 35/42] refactor: Update TabButton component to use
 @headlessui/react v2.0 changes

---
 src/components/tab/tab-button.tsx | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/src/components/tab/tab-button.tsx b/src/components/tab/tab-button.tsx
index 4f086532..b9d0f07d 100644
--- a/src/components/tab/tab-button.tsx
+++ b/src/components/tab/tab-button.tsx
@@ -1,10 +1,10 @@
+import { Tab as HeadlessUiTab, TabProps as HeadlessUiTabProps } from "@headlessui/react";
 import React from "react";
-import { Tab as HeadlessTab, TabProps } from "@headlessui/react";
-import { TabType, useTabContext } from "./tab-context";
 import { classNames } from "../../util/class-names";
+import { TabType, useTabContext } from "./tab-context";
 
 export interface TabButtonProps<TTag extends React.ElementType>
-    extends TabProps<React.ElementType> {
+    extends HeadlessUiTabProps<React.ElementType> {
     children: React.ReactNode;
     as?: TTag;
 }
@@ -25,7 +25,7 @@ export const TabButton = <TTag extends React.ElementType>({
 
     return (
         // eslint-disable-next-line react/jsx-props-no-spreading, @typescript-eslint/no-explicit-any
-        <HeadlessTab {...(props as any)} className="focus-visible:outline-none">
+        <HeadlessUiTab {...(props as any)} className="focus-visible:outline-none">
             <div
                 className={classNames(
                     "rounded text-xs font-medium outline-none ui-selected:text-primary-500 ui-not-selected:text-neutral-700",
@@ -34,6 +34,6 @@ export const TabButton = <TTag extends React.ElementType>({
             >
                 {children}
             </div>
-        </HeadlessTab>
+        </HeadlessUiTab>
     );
 };

From d3580ad2969478925da5ceef30399439f18b3f53 Mon Sep 17 00:00:00 2001
From: Manuel <manuel.fischer@abusix.com>
Date: Wed, 31 Jul 2024 13:57:32 +0200
Subject: [PATCH 36/42] refactor: Update TabList component to use
 @headlessui/react v2.0 changes

---
 src/components/tab/tab-list.tsx | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/components/tab/tab-list.tsx b/src/components/tab/tab-list.tsx
index d2a5558c..a406cd2e 100644
--- a/src/components/tab/tab-list.tsx
+++ b/src/components/tab/tab-list.tsx
@@ -1,7 +1,7 @@
+import { TabList as HeadlessUiTabList } from "@headlessui/react";
 import React from "react";
-import { Tab as HeadlessTab } from "@headlessui/react";
-import { TabType, useTabContext } from "./tab-context";
 import { classNames } from "../../util/class-names";
+import { TabType, useTabContext } from "./tab-context";
 
 export interface TabListProps {
     children: React.ReactNode;
@@ -16,8 +16,8 @@ export const TabList = ({ children }: TabListProps) => {
     const { type } = useTabContext();
 
     return (
-        <HeadlessTab.List className={classNames("flex", listVariants[type])}>
+        <HeadlessUiTabList className={classNames("flex", listVariants[type])}>
             {children}
-        </HeadlessTab.List>
+        </HeadlessUiTabList>
     );
 };

From 86aee70ad81d9f5726905a21681d3def16faa20e Mon Sep 17 00:00:00 2001
From: Manuel <manuel.fischer@abusix.com>
Date: Wed, 31 Jul 2024 13:58:03 +0200
Subject: [PATCH 37/42] refactor: Update TabPanel component to use
 @headlessui/react v2.0 changes

---
 src/components/tab/tab-panel.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/tab/tab-panel.tsx b/src/components/tab/tab-panel.tsx
index 9bfecbf2..6a135993 100644
--- a/src/components/tab/tab-panel.tsx
+++ b/src/components/tab/tab-panel.tsx
@@ -1,4 +1,4 @@
-import { Tab as HeadlessTab } from "@headlessui/react";
+import { TabPanel as HeadlessUiTabPanel } from "@headlessui/react";
 import React from "react";
 
 export interface TabPanelProps {
@@ -6,5 +6,5 @@ export interface TabPanelProps {
 }
 
 export const TabPanel = ({ children }: TabPanelProps) => {
-    return <HeadlessTab.Panel>{children}</HeadlessTab.Panel>;
+    return <HeadlessUiTabPanel>{children}</HeadlessUiTabPanel>;
 };

From a7599d097e22163c770eb7f036eca153757f104f Mon Sep 17 00:00:00 2001
From: Manuel <manuel.fischer@abusix.com>
Date: Wed, 31 Jul 2024 13:58:26 +0200
Subject: [PATCH 38/42] refactor: Update TabPanels component to use
 @headlessui/react v2.0 changes

---
 src/components/tab/tab-panels.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/tab/tab-panels.tsx b/src/components/tab/tab-panels.tsx
index bc8aa377..f0e140c3 100644
--- a/src/components/tab/tab-panels.tsx
+++ b/src/components/tab/tab-panels.tsx
@@ -1,5 +1,5 @@
+import { TabPanels as HeadlessUiTabPanels } from "@headlessui/react";
 import React from "react";
-import { Tab as HeadlessTab } from "@headlessui/react";
 
 export interface TabPanelsProps {
     children: React.ReactNode;
@@ -7,5 +7,5 @@ export interface TabPanelsProps {
 }
 
 export const TabPanels = ({ children, className }: TabPanelsProps) => {
-    return <HeadlessTab.Panels className={className}>{children}</HeadlessTab.Panels>;
+    return <HeadlessUiTabPanels className={className}>{children}</HeadlessUiTabPanels>;
 };

From 957ae11a1a5eccdd30b14da6c0d334def6ac38c1 Mon Sep 17 00:00:00 2001
From: Manuel <manuel.fischer@abusix.com>
Date: Wed, 31 Jul 2024 13:58:59 +0200
Subject: [PATCH 39/42] refactor: Update Tab component to use @headlessui/react
 v2.0 changes

---
 src/components/tab/tab.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/tab/tab.tsx b/src/components/tab/tab.tsx
index bc5a3a25..8930da95 100644
--- a/src/components/tab/tab.tsx
+++ b/src/components/tab/tab.tsx
@@ -1,4 +1,4 @@
-import { Tab as HeadlessTab, TabGroupProps } from "@headlessui/react";
+import { TabGroup as HeadlessUiTabGroup, TabGroupProps } from "@headlessui/react";
 import React from "react";
 import { TabButton } from "./tab-button";
 import { TabContext, TabType } from "./tab-context";
@@ -17,7 +17,7 @@ const Tab = ({ type = "primary", children, ...props }: TabProps) => {
     return (
         <TabContext.Provider value={value}>
             {/* eslint-disable-next-line react/jsx-props-no-spreading */}
-            <HeadlessTab.Group {...props}>{children}</HeadlessTab.Group>
+            <HeadlessUiTabGroup {...props}>{children}</HeadlessUiTabGroup>
         </TabContext.Provider>
     );
 };

From 7d5df4e078b7ddd492c5dfd7264b0a27092c0152 Mon Sep 17 00:00:00 2001
From: Manuel <manuel.fischer@abusix.com>
Date: Wed, 31 Jul 2024 14:01:53 +0200
Subject: [PATCH 40/42] refactor: Update Toggle component to use
 @headlessui/react v2.0 changes

---
 src/components/toggle/toggle.tsx | 18 +++++++++++-------
 1 file changed, 11 insertions(+), 7 deletions(-)

diff --git a/src/components/toggle/toggle.tsx b/src/components/toggle/toggle.tsx
index 93363147..8aadd1ff 100644
--- a/src/components/toggle/toggle.tsx
+++ b/src/components/toggle/toggle.tsx
@@ -1,5 +1,9 @@
+import {
+    Field as HeadlessUiField,
+    Label as HeadlessUiLabel,
+    Switch as HeadlessUiSwitch,
+} from "@headlessui/react";
 import React from "react";
-import { Switch as HeadlessSwitch } from "@headlessui/react";
 import { classNames } from "../../util/class-names";
 
 interface LabelProps {
@@ -9,14 +13,14 @@ interface LabelProps {
 
 const Label = ({ children, passive = false }: LabelProps) => {
     return (
-        <HeadlessSwitch.Label
+        <HeadlessUiLabel
             className={classNames(
                 "paragraph-200 cursor-pointer text-neutral-800 ui-disabled:text-danger-600"
             )}
             passive={passive}
         >
             {children}
-        </HeadlessSwitch.Label>
+        </HeadlessUiLabel>
     );
 };
 
@@ -29,7 +33,7 @@ export interface SwitchProps {
 
 const Switch = ({ checked = false, onChange, disabled = false, ariaLabel }: SwitchProps) => {
     return (
-        <HeadlessSwitch
+        <HeadlessUiSwitch
             checked={checked}
             disabled={disabled}
             onChange={onChange}
@@ -48,7 +52,7 @@ const Switch = ({ checked = false, onChange, disabled = false, ariaLabel }: Swit
                     !checked && !disabled && "bg-neutral-0"
                 )}
             />
-        </HeadlessSwitch>
+        </HeadlessUiSwitch>
     );
 };
 
@@ -58,9 +62,9 @@ export interface ToggleProps {
 
 const Toggle = ({ children }: ToggleProps) => {
     return (
-        <HeadlessSwitch.Group>
+        <HeadlessUiField>
             <div className="flex items-center gap-3">{children}</div>
-        </HeadlessSwitch.Group>
+        </HeadlessUiField>
     );
 };
 

From a139288c984a68719f00afc41b306f2c0f6ea80d Mon Sep 17 00:00:00 2001
From: Manuel <manuel.fischer@abusix.com>
Date: Wed, 31 Jul 2024 14:10:02 +0200
Subject: [PATCH 41/42] refactor: Update menu-item.stories.tsx to import
 MenuItem from correct path

---
 src/components/menu/menu-item/menu-item.stories.tsx | 6 +-----
 1 file changed, 1 insertion(+), 5 deletions(-)

diff --git a/src/components/menu/menu-item/menu-item.stories.tsx b/src/components/menu/menu-item/menu-item.stories.tsx
index 2db100bd..ae4a47f7 100644
--- a/src/components/menu/menu-item/menu-item.stories.tsx
+++ b/src/components/menu/menu-item/menu-item.stories.tsx
@@ -2,8 +2,8 @@ import type { Meta, StoryObj } from "@storybook/react";
 import React from "react";
 import { ChatIcon } from "../../../icons";
 
-import { MenuItem } from "./menu-item";
 import { Menu } from "../menu";
+import { MenuItem } from "./menu-item";
 
 const meta: Meta<typeof MenuItem> = {
     title: "Menu/MenuItem",
@@ -15,10 +15,6 @@ type Story = StoryObj<typeof MenuItem>;
 
 export const Default: Story = {
     argTypes: {
-        isSelected: {
-            type: "boolean",
-            defaultValue: false,
-        },
         disabled: {
             type: "boolean",
             defaultValue: false,

From 7bf87ed5c6c9a27e0b6ea0dfbfab9736537bb8e1 Mon Sep 17 00:00:00 2001
From: Manuel <manuel.fischer@abusix.com>
Date: Wed, 31 Jul 2024 14:12:14 +0200
Subject: [PATCH 42/42] fix: Update NavigationPopover component to use
 @headlessui/react v2.0 changes

---
 src/components/navigation/navigation-popover.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/navigation/navigation-popover.tsx b/src/components/navigation/navigation-popover.tsx
index e560e67d..0adf7f2b 100644
--- a/src/components/navigation/navigation-popover.tsx
+++ b/src/components/navigation/navigation-popover.tsx
@@ -12,7 +12,7 @@ export interface NavigationPopoverProps {
 
 const NavigationPopover = ({ children }: NavigationPopoverProps) => {
     const [referenceElement, setReferenceElement] = useState<HTMLButtonElement>();
-    const [popperElement, setPopperElement] = useState<HTMLDivElement>();
+    const [popperElement, setPopperElement] = useState<HTMLElement>();
     const { styles, attributes } = usePopper(referenceElement, popperElement, {
         placement: "top-start",
     });