feat(go): referral support (#28345)

Co-authored-by: Jack <jack@anoma.ly>

packages/console/app/src/component/modal.tsx

@@ -1,3 +1,4 @@
+import { Dialog as Kobalte } from "@kobalte/core/dialog"
 import { JSX, Show } from "solid-js"
 import "./modal.css"
 
@@ -5,20 +6,41 @@ interface ModalProps {
   open: boolean
   onClose: () => void
   title?: string
+  variant?: "black"
   children: JSX.Element
 }
 
 export function Modal(props: ModalProps) {
   return (
     <Show when={props.open}>
-      <div data-component="modal" data-slot="overlay" onClick={props.onClose}>
-        <div data-slot="content" onClick={(e) => e.stopPropagation()}>
-          <Show when={props.title}>
-            <h2 data-slot="title">{props.title}</h2>
-          </Show>
-          {props.children}
-        </div>
-      </div>
+      <Kobalte
+        modal
+        open={props.open}
+        preventScroll={false}
+        onOpenChange={(open) => {
+          if (!open) props.onClose()
+        }}
+      >
+        <Kobalte.Portal>
+          <Kobalte.Overlay data-component="modal" data-slot="overlay" onClick={props.onClose}>
+            <Kobalte.Content
+              data-slot="content"
+              data-variant={props.variant}
+              onClick={(e) => e.stopPropagation()}
+              onOpenAutoFocus={(e) => {
+                e.preventDefault()
+                const target = e.currentTarget as HTMLElement | null
+                target?.focus({ preventScroll: true })
+              }}
+            >
+              <Show when={props.title}>
+                <Kobalte.Title data-slot="title">{props.title}</Kobalte.Title>
+              </Show>
+              {props.children}
+            </Kobalte.Content>
+          </Kobalte.Overlay>
+        </Kobalte.Portal>
+      </Kobalte>
     </Show>
   )
 }