@cerberus-design/react 0.14.2-next-2f75188 → 0.14.2-next-f58c1be

package/build/legacy/context/prompt-modal.cjs

@@ -25,11 +25,7 @@ __export(prompt_modal_exports, {
   usePromptModal: () => usePromptModal
 });
 module.exports = __toCommonJS(prompt_modal_exports);
-var import_react7 = require("react");
-
-// src/components/Portal.tsx
-var import_react = require("@ark-ui/react");
-var Portal = import_react.Portal;
+var import_react6 = require("react");
 
 // src/components/Button.tsx
 var import_css = require("@cerberus/styled-system/css");
@@ -54,45 +50,19 @@ function Button(props) {
 }
 
 // src/context/prompt-modal.tsx
-var import_css9 = require("@cerberus/styled-system/css");
-var import_patterns4 = require("@cerberus/styled-system/patterns");
-
-// src/aria-helpers/trap-focus.aria.ts
-function trapFocus(modalRef) {
-  var _a;
-  const focusableElements = 'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])';
-  const focusable = Array.from(
-    ((_a = modalRef.current) == null ? void 0 : _a.querySelectorAll(focusableElements)) ?? []
-  );
-  const firstFocusable = focusable[0];
-  const lastFocusable = focusable[focusable.length - 1];
-  return function handleKeyDown(event) {
-    if (event.key === "Tab") {
-      if (event.shiftKey) {
-        if (document.activeElement === firstFocusable) {
-          lastFocusable.focus();
-          event.preventDefault();
-        }
-      } else {
-        if (document.activeElement === lastFocusable) {
-          firstFocusable.focus();
-          event.preventDefault();
-        }
-      }
-    }
-  };
-}
+var import_css6 = require("@cerberus/styled-system/css");
+var import_patterns3 = require("@cerberus/styled-system/patterns");
 
 // src/components/Input.tsx
 var import_recipes2 = require("@cerberus/styled-system/recipes");
 var import_css2 = require("@cerberus/styled-system/css");
 
 // src/context/field.tsx
-var import_react2 = require("react");
+var import_react = require("react");
 var import_jsx_runtime2 = require("react/jsx-runtime");
-var FieldContext = (0, import_react2.createContext)(null);
+var FieldContext = (0, import_react.createContext)(null);
 function Field(props) {
-  const value = (0, import_react2.useMemo)(
+  const value = (0, import_react.useMemo)(
     () => ({
       disabled: props.disabled,
       readOnly: props.readOnly,
@@ -104,7 +74,7 @@ function Field(props) {
   return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(FieldContext.Provider, { value, children: props.children });
 }
 function useFieldContext() {
-  const context = (0, import_react2.useContext)(FieldContext);
+  const context = (0, import_react.useContext)(FieldContext);
   if (!context) {
     throw new Error("useFieldContext must be used within a Field Provider.");
   }
@@ -112,11 +82,11 @@ function useFieldContext() {
 }
 
 // src/context/cerberus.tsx
-var import_react3 = require("react");
+var import_react2 = require("react");
 var import_jsx_runtime3 = require("react/jsx-runtime");
-var CerberusContext = (0, import_react3.createContext)(null);
+var CerberusContext = (0, import_react2.createContext)(null);
 function useCerberusContext() {
-  const context = (0, import_react3.useContext)(CerberusContext);
+  const context = (0, import_react2.useContext)(CerberusContext);
   if (!context) {
     throw new Error("useCerberus must be used within a CerberusProvider");
   }
@@ -124,11 +94,11 @@ function useCerberusContext() {
 }
 
 // src/components/Show.tsx
-var import_react4 = require("react");
+var import_react3 = require("react");
 function Show(props) {
   const { when, children, fallback } = props;
-  const condition = (0, import_react4.useMemo)(() => when ?? false, [when]);
-  return (0, import_react4.useMemo)(() => {
+  const condition = (0, import_react3.useMemo)(() => when ?? false, [when]);
+  return (0, import_react3.useMemo)(() => {
     if (condition) return children;
     return fallback ?? null;
   }, [condition, children, fallback]);
@@ -200,90 +170,11 @@ function Label(props) {
   );
 }
 
-// src/hooks/useModal.ts
-var import_react5 = require("react");
-function useModal() {
-  const modalRef = (0, import_react5.useRef)(null);
-  const [isOpen, setIsOpen] = (0, import_react5.useState)(false);
-  const show = (0, import_react5.useCallback)(() => {
-    var _a;
-    (_a = modalRef.current) == null ? void 0 : _a.showModal();
-    setIsOpen(true);
-  }, []);
-  const close = (0, import_react5.useCallback)(() => {
-    var _a;
-    (_a = modalRef.current) == null ? void 0 : _a.close();
-    setIsOpen(false);
-  }, []);
-  return (0, import_react5.useMemo)(() => {
-    return {
-      modalRef,
-      show,
-      close,
-      isOpen
-    };
-  }, [modalRef, show, close, isOpen]);
-}
-
-// src/components/Modal.tsx
+// src/components/Avatar.tsx
 var import_css4 = require("@cerberus/styled-system/css");
+var import_patterns2 = require("@cerberus/styled-system/patterns");
 var import_recipes4 = require("@cerberus/styled-system/recipes");
-var import_react6 = require("react");
 var import_jsx_runtime6 = require("react/jsx-runtime");
-function ModalEl(props, ref) {
-  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
-    "dialog",
-    {
-      ...props,
-      className: (0, import_css4.cx)(props.className, (0, import_recipes4.modal)().dialog),
-      ref
-    }
-  );
-}
-var Modal = (0, import_react6.forwardRef)(ModalEl);
-
-// src/components/ModalHeader.tsx
-var import_css5 = require("@cerberus/styled-system/css");
-var import_patterns2 = require("@cerberus/styled-system/patterns");
-var import_jsx_runtime7 = require("react/jsx-runtime");
-function ModalHeader(props) {
-  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
-    "div",
-    {
-      ...props,
-      className: (0, import_css5.cx)(
-        props.className,
-        (0, import_patterns2.vstack)({
-          alignItems: "flex-start",
-          gap: "md",
-          position: "relative"
-        })
-      )
-    }
-  );
-}
-
-// src/components/ModalHeading.tsx
-var import_css6 = require("@cerberus/styled-system/css");
-var import_recipes5 = require("@cerberus/styled-system/recipes");
-var import_jsx_runtime8 = require("react/jsx-runtime");
-function ModalHeading(props) {
-  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("p", { ...props, className: (0, import_css6.cx)(props.className, (0, import_recipes5.modal)().heading) });
-}
-
-// src/components/ModalDescription.tsx
-var import_css7 = require("@cerberus/styled-system/css");
-var import_recipes6 = require("@cerberus/styled-system/recipes");
-var import_jsx_runtime9 = require("react/jsx-runtime");
-function ModalDescription(props) {
-  return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("p", { ...props, className: (0, import_css7.cx)(props.className, (0, import_recipes6.modal)().description) });
-}
-
-// src/components/Avatar.tsx
-var import_css8 = require("@cerberus/styled-system/css");
-var import_patterns3 = require("@cerberus/styled-system/patterns");
-var import_recipes7 = require("@cerberus/styled-system/recipes");
-var import_jsx_runtime10 = require("react/jsx-runtime");
 function Avatar(props) {
   const {
     ariaLabel,
@@ -299,28 +190,28 @@ function Avatar(props) {
   const { icons } = useCerberusContext();
   const { avatar: AvatarIcon } = icons;
   const initials = (ariaLabel || "").split(" ").map((word) => word[0]).join("").slice(0, 2);
-  return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
     "div",
     {
       ...nativeProps,
-      className: (0, import_css8.cx)(
+      className: (0, import_css4.cx)(
         nativeProps.className,
-        (0, import_recipes7.avatar)({ gradient, size }),
-        (0, import_patterns3.circle)()
+        (0, import_recipes4.avatar)({ gradient, size }),
+        (0, import_patterns2.circle)()
       ),
-      children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
         Show,
         {
           when: Boolean(src) || Boolean(as),
-          fallback: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+          fallback: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
             Show,
             {
               when: Boolean(initials),
-              fallback: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+              fallback: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
                 Show,
                 {
                   when: Boolean(icon),
-                  fallback: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+                  fallback: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
                     AvatarIcon,
                     {
                       size: iconSizeMap[size]
@@ -332,15 +223,15 @@ function Avatar(props) {
               children: initials
             }
           ),
-          children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+          children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
             Show,
             {
               when: Boolean(as),
-              fallback: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+              fallback: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
                 "img",
                 {
                   alt: props.ariaLabel,
-                  className: (0, import_css8.css)({
+                  className: (0, import_css4.css)({
                     h: "full",
                     objectFit: "cover",
                     w: "full"
@@ -371,88 +262,162 @@ var iconSizeMap = {
   "4xl": 32
 };
 
+// src/components/Text.tsx
+var import_jsx = require("@cerberus/styled-system/jsx");
+var import_jsx_runtime7 = require("react/jsx-runtime");
+function Text(props) {
+  const { as = "p", ...pandaJSXProps } = props;
+  switch (as) {
+    case "h1":
+      return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_jsx.H1, { ...pandaJSXProps });
+    case "h2":
+      return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_jsx.H2, { ...pandaJSXProps });
+    case "h3":
+      return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_jsx.H3, { ...pandaJSXProps });
+    case "h4":
+      return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_jsx.H4, { ...pandaJSXProps });
+    case "h5":
+      return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_jsx.H5, { ...pandaJSXProps });
+    case "h6":
+      return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_jsx.H6, { ...pandaJSXProps });
+    case "strong":
+      return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_jsx.Strong, { ...pandaJSXProps });
+    case "em":
+      return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_jsx.Em, { ...pandaJSXProps });
+    case "small":
+      return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_jsx.Small, { ...pandaJSXProps });
+    case "span":
+      return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_jsx.Span, { ...pandaJSXProps });
+    default:
+      return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_jsx.P, { ...pandaJSXProps });
+  }
+}
+
+// src/components/Dialog.tsx
+var import_react5 = require("@ark-ui/react");
+var import_recipes5 = require("@cerberus/styled-system/recipes");
+
+// src/components/Portal.tsx
+var import_react4 = require("@ark-ui/react");
+var Portal = import_react4.Portal;
+
+// src/components/Dialog.tsx
+var import_css5 = require("@cerberus/styled-system/css");
+var import_jsx_runtime8 = require("react/jsx-runtime");
+function DialogProvider(props) {
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_react5.Dialog.Root, { ...props });
+}
+function Dialog(props) {
+  const { size, ...contentProps } = props;
+  const styles = (0, import_recipes5.dialog)({ size });
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(Portal, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(DialogBackdrop, { className: styles.backdrop }),
+    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(DialogPositioner, { className: styles.positioner, children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(DialogContent, { className: styles.content, ...contentProps }) })
+  ] });
+}
+function DialogHeading(props) {
+  const styles = (0, import_recipes5.dialog)();
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_react5.Dialog.Title, { ...props, className: (0, import_css5.cx)(props.className, styles.title) });
+}
+function DialogDescription(props) {
+  const styles = (0, import_recipes5.dialog)();
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+    import_react5.Dialog.Description,
+    {
+      ...props,
+      className: (0, import_css5.cx)(props.className, styles.description)
+    }
+  );
+}
+var DialogTrigger = import_react5.Dialog.Trigger;
+var DialogCloseTrigger = import_react5.Dialog.CloseTrigger;
+var DialogBackdrop = import_react5.Dialog.Backdrop;
+var DialogPositioner = import_react5.Dialog.Positioner;
+var DialogContent = import_react5.Dialog.Content;
+
 // src/context/prompt-modal.tsx
-var import_jsx_runtime11 = require("react/jsx-runtime");
-var PromptModalContext = (0, import_react7.createContext)(null);
+var import_jsx2 = require("@cerberus/styled-system/jsx");
+var import_react7 = require("@ark-ui/react");
+var import_jsx_runtime9 = require("react/jsx-runtime");
+var PromptModalContext = (0, import_react6.createContext)(null);
 function PromptModal(props) {
-  const { modalRef, show, close } = useModal();
-  const resolveRef = (0, import_react7.useRef)(null);
-  const [content, setContent] = (0, import_react7.useState)(null);
-  const [inputValue, setInputValue] = (0, import_react7.useState)("");
-  const focusTrap = trapFocus(modalRef);
+  const resolveRef = (0, import_react6.useRef)(null);
+  const [open, setOpen] = (0, import_react6.useState)(false);
+  const [content, setContent] = (0, import_react6.useState)(null);
+  const [inputValue, setInputValue] = (0, import_react6.useState)("");
   const { icons } = useCerberusContext();
   const { promptModal: PromptIcon } = icons;
-  const isValid = (0, import_react7.useMemo)(
+  const isValid = (0, import_react6.useMemo)(
     () => inputValue === (content == null ? void 0 : content.key),
     [inputValue, content]
   );
-  const palette = (0, import_react7.useMemo)(
+  const palette = (0, import_react6.useMemo)(
     () => (content == null ? void 0 : content.kind) === "destructive" ? "danger" : "action",
     [content]
   );
-  const handleChange = (0, import_react7.useCallback)(
+  const handleChange = (0, import_react6.useCallback)(
     (e) => {
       setInputValue(e.currentTarget.value);
     },
     [content]
   );
-  const handleChoice = (0, import_react7.useCallback)(
+  const handleChoice = (0, import_react6.useCallback)(
     (e) => {
       var _a;
       const target = e.currentTarget;
       if (target.value === "true") {
         (_a = resolveRef.current) == null ? void 0 : _a.call(resolveRef, inputValue);
       }
-      close();
+      setOpen(false);
     },
-    [inputValue, close]
+    [inputValue, setOpen]
   );
-  const handleShow = (0, import_react7.useCallback)(
+  const handleShow = (0, import_react6.useCallback)(
     (options) => {
       return new Promise((resolve) => {
         setContent({ ...options, kind: options.kind || "non-destructive" });
-        show();
+        setOpen(true);
         resolveRef.current = resolve;
       });
     },
-    [show]
+    [setOpen]
   );
-  const value = (0, import_react7.useMemo)(
+  const value = (0, import_react6.useMemo)(
     () => ({
       show: handleShow
     }),
     [handleShow]
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(PromptModalContext.Provider, { value, children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(PromptModalContext.Provider, { value, children: [
     props.children,
-    /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(Modal, { onKeyDown: focusTrap, ref: modalRef, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(ModalHeader, { children: [
-        /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
-          "div",
+    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(DialogProvider, { open, onOpenChange: (e) => setOpen(e.open), children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(Dialog, { size: "sm", children: /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(import_jsx2.VStack, { gap: "xl", w: "full", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(import_jsx2.VStack, { alignItems: "flex-start", gap: "md", w: "full", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+          import_jsx2.HStack,
           {
-            className: (0, import_patterns4.hstack)({
-              justify: "center",
-              w: "full"
-            }),
-            children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+            alignSelf: "center",
+            justify: "center",
+            paddingBlockEnd: "md",
+            w: "full",
+            children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
               Show,
               {
                 when: palette === "danger",
-                fallback: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+                fallback: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
                   Avatar,
                   {
                     ariaLabel: "",
                     gradient: "charon-light",
-                    icon: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(PromptIcon, { size: 24 }),
+                    icon: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(PromptIcon, { size: 24 }),
                     src: ""
                   }
                 ),
-                children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+                children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
                   Avatar,
                   {
                     ariaLabel: "",
                     gradient: "hades-dark",
-                    icon: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(PromptIcon, { size: 24 }),
+                    icon: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(PromptIcon, { size: 24 }),
                     src: ""
                   }
                 )
@@ -460,43 +425,34 @@ function PromptModal(props) {
             )
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(ModalHeading, { children: content == null ? void 0 : content.heading }),
-        /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(ModalDescription, { children: content == null ? void 0 : content.description })
+        /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(DialogHeading, { children: content == null ? void 0 : content.heading }),
+        /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(DialogDescription, { children: content == null ? void 0 : content.description })
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
-        "div",
+      /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+        import_jsx2.VStack,
         {
-          className: (0, import_patterns4.vstack)({
-            alignItems: "flex-start",
-            mt: "4",
-            mb: "8"
-          }),
-          children: /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(Field, { invalid: !isValid, children: [
-            /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
+          alignItems: "flex-start",
+          marginBlockStart: "md",
+          marginBlockEnd: "lg",
+          w: "full",
+          children: /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(Field, { invalid: !isValid, children: [
+            /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
               Label,
               {
-                className: (0, import_css9.css)({
-                  gap: 1,
-                  justifyContent: "flex-start"
+                className: (0, import_patterns3.hstack)({
+                  gap: "xs",
+                  justify: "flex-start !important"
                 }),
                 htmlFor: "confirm",
                 size: "md",
                 children: [
                   "Type",
-                  /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
-                    "strong",
-                    {
-                      className: (0, import_css9.css)({
-                        textTransform: "uppercase"
-                      }),
-                      children: content == null ? void 0 : content.key
-                    }
-                  ),
+                  /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(Text, { as: "strong", textTransform: "uppercase", children: content == null ? void 0 : content.key }),
                   "to confirm"
                 ]
               }
             ),
-            /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
               Input,
               {
                 id: "confirm",
@@ -508,50 +464,41 @@ function PromptModal(props) {
           ] })
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
-        "div",
-        {
-          className: (0, import_patterns4.hstack)({
-            justifyContent: "stretch",
-            gap: "4"
-          }),
-          children: [
-            /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
-              Button,
-              {
-                autoFocus: true,
-                className: (0, import_css9.css)({
-                  w: "1/2"
-                }),
-                disabled: !isValid,
-                name: "confirm",
-                onClick: handleChoice,
-                palette,
-                value: "true",
-                children: content == null ? void 0 : content.actionText
-              }
-            ),
-            /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
-              Button,
-              {
-                className: (0, import_css9.css)({
-                  w: "1/2"
-                }),
-                name: "cancel",
-                onClick: handleChoice,
-                usage: "outlined",
-                value: "false",
-                children: content == null ? void 0 : content.cancelText
-              }
-            )
-          ]
-        }
-      )
-    ] }) })
+      /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(import_jsx2.HStack, { gap: "md", justify: "stretch", w: "full", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+          Button,
+          {
+            autoFocus: true,
+            className: (0, import_css6.css)({
+              w: "1/2"
+            }),
+            disabled: !isValid,
+            name: "confirm",
+            onClick: handleChoice,
+            palette,
+            value: "true",
+            children: content == null ? void 0 : content.actionText
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_react7.DialogCloseTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+          Button,
+          {
+            className: (0, import_css6.css)({
+              w: "1/2"
+            }),
+            name: "cancel",
+            onClick: handleChoice,
+            usage: "outlined",
+            value: "false",
+            children: content == null ? void 0 : content.cancelText
+          }
+        ) })
+      ] })
+    ] }) }) })
   ] });
 }
 function usePromptModal() {
-  const context = (0, import_react7.useContext)(PromptModalContext);
+  const context = (0, import_react6.useContext)(PromptModalContext);
   if (context === null) {
     throw new Error("usePromptModal must be used within a PromptModal Provider");
   }