Fix react dependencies

documentation-ui/package.json

@@ -67,9 +67,9 @@
     "@commitlint/cli": "^20.5.0",
     "@commitlint/config-conventional": "^20.5.0",
     "@eslint/js": "^9.25.1",
+    "@radix-ui/react-icons": "^1.0.0",
     "@rollup/plugin-commonjs": "^29.0.2",
     "@rollup/plugin-node-resolve": "^16.0.3",
-    "@rollup/plugin-replace": "^6.0.3",
     "@rollup/plugin-terser": "^1.0.0",
     "@rollup/plugin-typescript": "^12.3.0",
     "@storybook/addon-essentials": "^8.4.7",
@@ -82,6 +82,7 @@
     "@storybook/test": "^8.4.7",
     "@tailwindcss/typography": "^0.5.15",
     "@testing-library/react": "^16.3.2",
+    "@types/react": "^18.3.31",
     "@types/react-dom": "^18.2.22",
     "@vitejs/plugin-react": "^4.3.4",
     "autoprefixer": "^10.4.16",
@@ -92,41 +93,28 @@
     "jsdom": "^29.0.1",
     "postcss": "^8.4.32",
     "postcss-fail-on-warn": "^0.2.1",
-    "prop-types": "^15.8.1",
+    "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "react-hook-form": "^7.50.1",
     "rollup": "^4.60.1",
-    "rollup-plugin-dts": "^6.4.1",
     "rollup-plugin-peer-deps-external": "^2.2.4",
-    "rollup-plugin-postcss": "^4.0.2",
     "rollup-plugin-preserve-directives": "^0.4.0",
-    "rollup-plugin-scss": "^4.0.1",
     "semantic-release": "^25.0.3",
-    "sonner": "^2.0.1",
     "storybook": "^8.6.14",
+    "tailwindcss": "^3.4.15",
     "tailwindcss-animate": "^1.0.7",
     "typescript": "^6.0.3",
     "typescript-eslint": "^8.30.1",
+    "vite": "^6.4.3",
     "vite-tsconfig-paths": "^6.1.1",
     "vitest": "^4.1.2"
   },
   "dependencies": {
     "@quantinuum/quantinuum-ui": "^4",
-    "@radix-ui/react-icons": "^1.0.0",
-    "@radix-ui/react-navigation-menu": "^1.1.4",
-    "class-variance-authority": "^0.7.0",
     "clsx": "^2.1.1",
-    "cmdk": "^0.2.0",
-    "date-fns": "^3.6.0",
-    "input-otp": "^1.4.1",
     "lucide-react": "^0.468.0",
-    "react": "^18.2.0",
-    "react-day-picker": "^8.10.0",
-    "react-icons": "^5.3.0",
-    "react-resizable-panels": "^1.0.5",
     "remeda": "^2.33.7",
     "tailwind-merge": "^2.6.0",
-    "typescript": "^5.2.2",
-    "vaul": "^0.8.0",
     "zod": "^3.25.56"
   },
   "peerDependencies": {

documentation-ui/src/custom/docs/components/gdpr/_components/CookieBanner/CookieBanner.test.tsx

@@ -16,6 +16,8 @@ vi.mock('@quantinuum/quantinuum-ui', () => ({
   DialogContent: (props: MockDialogProps) => (
     <div aria-label="dialog-content">{props.children}</div>
   ),
+  DialogDescription: (props: MockDialogProps) => <p {...props}>{props.children}</p>,
+  DialogTitle: (props: MockDialogProps) => <h2 {...props}>{props.children}</h2>,
 }))
 
 const defaultProps = {

documentation-ui/src/custom/docs/components/gdpr/_components/CookieBanner/CookieBanner.tsx

@@ -1,6 +1,12 @@
 'use client'
 
-import { Button, Dialog, DialogContent } from '@quantinuum/quantinuum-ui'
+import {
+  Button,
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogTitle,
+} from '@quantinuum/quantinuum-ui'
 
 export const CookieBanner = ({
   isOpen,
@@ -17,10 +23,12 @@ export const CookieBanner = ({
     <Dialog open={isOpen}>
       <DialogContent isDismissable={false} isBottomDialog>
         <div className="max-w-5xl mx-auto" aria-label="Cookie banner">
-          <h3 className="text-lg font-semibold capitalize">We value your privacy</h3>
+          <DialogTitle className="m-0 p-0 text-left text-lg font-semibold capitalize leading-normal tracking-normal">
+            We value your privacy
+          </DialogTitle>
 
           <div className="pt-1.5 flex flex-col md:flex-row gap-8">
-            <p className="text-base md:w-9/12">
+            <DialogDescription className="text-base text-foreground md:w-9/12">
               We use essential cookies to ensure the website functions properly. With your
               permission, we’ll also use optional cookies to analyze site usage and improve the user
               experience. For details of how we use cookies and your personal data, please read our{' '}
@@ -51,7 +59,7 @@ export const CookieBanner = ({
                 Terms & Conditions
               </a>
               .
-            </p>
+            </DialogDescription>
 
             <div className="flex flex-col md:hidden">
               <div className="flex mb-4 gap-4">

documentation-ui/src/custom/docs/components/gdpr/_components/CookieBanner/__snapshots__/CookieBanner.test.tsx.snap

@@ -12,16 +12,16 @@ exports[`Cookie Banner Component > desktop > should render as expected 1`] = `
         aria-label="Cookie banner"
         class="max-w-5xl mx-auto"
       >
-        <h3
-          class="text-lg font-semibold capitalize"
+        <h2
+          class="m-0 p-0 text-left text-lg font-semibold capitalize leading-normal tracking-normal"
         >
           We value your privacy
-        </h3>
+        </h2>
         <div
           class="pt-1.5 flex flex-col md:flex-row gap-8"
         >
           <p
-            class="text-base md:w-9/12"
+            class="text-base text-foreground md:w-9/12"
           >
             We use essential cookies to ensure the website functions properly. With your permission, we’ll also use optional cookies to analyze site usage and improve the user experience. For details of how we use cookies and your personal data, please read our 
             <a
@@ -131,16 +131,16 @@ exports[`Cookie Banner Component > mobile > should render as expected 1`] = `
         aria-label="Cookie banner"
         class="max-w-5xl mx-auto"
       >
-        <h3
-          class="text-lg font-semibold capitalize"
+        <h2
+          class="m-0 p-0 text-left text-lg font-semibold capitalize leading-normal tracking-normal"
         >
           We value your privacy
-        </h3>
+        </h2>
         <div
           class="pt-1.5 flex flex-col md:flex-row gap-8"
         >
           <p
-            class="text-base md:w-9/12"
+            class="text-base text-foreground md:w-9/12"
           >
             We use essential cookies to ensure the website functions properly. With your permission, we’ll also use optional cookies to analyze site usage and improve the user experience. For details of how we use cookies and your personal data, please read our 
             <a

documentation-ui/src/custom/docs/components/gdpr/_components/CookieSettingsDialog/CookieSettingsDialog.tsx

@@ -11,6 +11,8 @@ import {
   Button,
   Dialog,
   DialogContent,
+  DialogDescription,
+  DialogTitle,
   Form,
   FormControl,
   FormDescription,
@@ -58,17 +60,17 @@ export const CookieSettingsDialog = ({
       <DialogContent
         isDismissable
         className="w-full max-w-[90vw] max-h-[90vh] sm:max-w-xl md:max-w-2xl sm:max-h-[80vh] px-5"
-        aria-label="Cookie settings dialog"
-        aria-labelledby="cookies-settings"
       >
         <article>
           <header className="px-1 mb-5">
-            <h2 className="text-lg font-semibold mb-1.5">Manage Cookies Settings</h2>
-            <p>
+            <DialogTitle className="m-0 mb-1.5 p-0 text-left text-lg font-semibold leading-normal tracking-normal">
+              Manage Cookie Settings
+            </DialogTitle>
+            <DialogDescription className="text-base text-foreground">
               Please choose whether this site may use optional cookies. Optional cookies help us
               measure usage and improve performance. We only set optional cookies with your consent.
               You can withdraw consent at any time in Cookie settings.
-            </p>
+            </DialogDescription>
             <a
               className="font-semibold hover:underline underline-offset-4 mt-1 block"
               href="https://www.quantinuum.com/cookie-notice"
@@ -124,10 +126,10 @@ export const CookieSettingsDialog = ({
                             <Accordion type="single" collapsible className="w-full">
                               <AccordionItem
                                 value={`${category.name}-cookies`}
-                                className="border-b-0"
+                                className="border-b-0 pl-0 [&>h3]:m-0 [&>h3]:p-0"
                               >
-                                <AccordionTrigger className="font-semibold flex justify-start gap-3 p-0">
-                                  Cookies Details
+                                <AccordionTrigger className="m-0 flex flex-none justify-start gap-2 p-0 pl-0 text-left font-semibold leading-normal">
+                                  Cookie Details
                                 </AccordionTrigger>
                                 <AccordionContent className="flex flex-col gap-2 pb-0 mt-8 md:mt-5">
                                   <div className="md:border-[1px] md:rounded-md">

documentation-ui/src/custom/docs/components/gdpr/_components/CookieSettingsDialog/__snapshots__/CookieSettingsDialog.test.tsx.snap

@@ -3,8 +3,7 @@
 exports[`CookieSettingsDialog component > should render as expected 1`] = `
 <div
   aria-describedby="radix-:r2:"
-  aria-label="Cookie settings dialog"
-  aria-labelledby="cookies-settings"
+  aria-labelledby="radix-:r1:"
   class="z-50 fixed grid gap-4 p-6 border bg-background duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out left-[50%] top-[50%] translate-x-[-50%] translate-y-[-50%] sm:rounded-lg shadow-lg data-[state=open]:fade-in-0 data-[state=closed]:fade-out-0 data-[state=open]:zoom-in-95 data-[state=closed]:zoom-out-95 data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] w-full max-w-[90vw] max-h-[90vh] sm:max-w-xl md:max-w-2xl sm:max-h-[80vh] px-5"
   data-state="open"
   id="radix-:r0:"
@@ -17,11 +16,15 @@ exports[`CookieSettingsDialog component > should render as expected 1`] = `
       class="px-1 mb-5"
     >
       <h2
-        class="text-lg font-semibold mb-1.5"
+        class="m-0 mb-1.5 p-0 text-left text-lg font-semibold leading-normal tracking-normal"
+        id="radix-:r1:"
       >
-        Manage Cookies Settings
+        Manage Cookie Settings
       </h2>
-      <p>
+      <p
+        class="text-base text-foreground"
+        id="radix-:r2:"
+      >
         Please choose whether this site may use optional cookies. Optional cookies help us measure usage and improve performance. We only set optional cookies with your consent. You can withdraw consent at any time in Cookie settings.
       </p>
       <a
@@ -103,7 +106,7 @@ exports[`CookieSettingsDialog component > should render as expected 1`] = `
               </button>
               <input
                 aria-hidden="true"
-                style="transform: translateX(-100%); position: absolute; pointer-events: none; opacity: 0; margin: 0px; width: 0px; height: 0px;"
+                style="position: absolute; pointer-events: none; opacity: 0; margin: 0px; transform: translateX(-100%); width: 0px; height: 0px;"
                 tabindex="-1"
                 type="checkbox"
                 value="on"
@@ -120,7 +123,7 @@ exports[`CookieSettingsDialog component > should render as expected 1`] = `
               data-orientation="vertical"
             >
               <div
-                class="border-b-0"
+                class="border-b-0 pl-0 [&>h3]:m-0 [&>h3]:p-0"
                 data-orientation="vertical"
                 data-state="closed"
               >
@@ -130,16 +133,15 @@ exports[`CookieSettingsDialog component > should render as expected 1`] = `
                   data-state="closed"
                 >
                   <button
-                    aria-controls="radix-:r6:"
                     aria-expanded="false"
-                    class="flex-1 items-center text-sm transition-all hover:underline [&[data-state=open]>svg]:rotate-180 font-semibold flex justify-start gap-3 p-0"
+                    class="items-center text-sm transition-all hover:underline [&[data-state=open]>svg]:rotate-180 m-0 flex flex-none justify-start gap-2 p-0 pl-0 text-left font-semibold leading-normal"
                     data-orientation="vertical"
                     data-radix-collection-item=""
                     data-state="closed"
                     id="radix-:r5:"
                     type="button"
                   >
-                    Cookies Details
+                    Cookie Details
                     <svg
                       class="h-4 w-4 shrink-0 text-muted-foreground transition-transform duration-200"
                       fill="none"

sphinx-ui/react/README.md

@@ -10,9 +10,3 @@ Build UI assets:
 `npm run build`
 
 outputs js and css to `build`
-
-Test UI assets:
-
-`npm run dev`
-
-loads navbar in simple html page.