fix(design-system): singleton prompt (#11352)

**What**
- add a flag to disable rendering multiple prompts on a page

**Why**
- pressing "r" when a prompt is already open would stack additional prompts

---

CLOSES SUP-802

Co-authored-by: Kasper Fabricius Kristensen <45367945+kasperkristensen@users.noreply.github.com>

packages/design-system/ui/src/hooks/use-prompt/use-prompt.tsx

@@ -1,22 +1,29 @@
 "use client"
 
 import * as React from "react"
+import { useRef } from "react"
 import { createRoot } from "react-dom/client"
 import { RenderPrompt, RenderPromptProps } from "./render-prompt"
 
 type UsePromptProps = Omit<RenderPromptProps, "onConfirm" | "onCancel" | "open">
 
 const usePrompt = () => {
-  const prompt = async (props: UsePromptProps): Promise<boolean> => {
+  const currentPromptPromise = useRef<Promise<boolean> | null>(null)
-    return new Promise((resolve) => {
-      let open = true
 
+  const prompt = async (props: UsePromptProps): Promise<boolean> => {
+    if (currentPromptPromise.current) {
+      return currentPromptPromise.current
+    }
+
+    const promptPromise = new Promise<boolean>((resolve) => {
+      let open = true
       const mountRoot = createRoot(document.createElement("div"))
 
       const onCancel = () => {
         open = false
         mountRoot.unmount()
         resolve(false)
+        currentPromptPromise.current = null
 
         // TEMP FIX for Radix issue with dropdowns persisting pointer-events: none on body after closing
         document.body.style.pointerEvents = "auto"
@@ -26,6 +33,7 @@ const usePrompt = () => {
         open = false
         resolve(true)
         mountRoot.unmount()
+        currentPromptPromise.current = null
 
         // TEMP FIX for Radix issue with dropdowns persisting pointer-events: none on body after closing
         document.body.style.pointerEvents = "auto"
@@ -44,6 +52,9 @@ const usePrompt = () => {
 
       render()
     })
+
+    currentPromptPromise.current = promptPromise
+    return promptPromise
   }
 
   return prompt