@cerberus-design/react 0.11.1-next-2ed68bd → 0.11.1-next-c28b077

package/build/legacy/index.cjs

@@ -27,6 +27,7 @@ __export(src_exports, {
   AdmonitionHeading: () => AdmonitionHeading,
   Avatar: () => Avatar,
   Button: () => Button,
+  CTAModal: () => CTAModal,
   Checkbox: () => Checkbox,
   CircularProgress: () => CircularProgress,
   ConfirmModal: () => ConfirmModal,
@@ -86,6 +87,7 @@ __export(src_exports, {
   getPosition: () => getPosition,
   processStatus: () => processStatus,
   trapFocus: () => trapFocus,
+  useCTAModal: () => useCTAModal,
   useConfirmModal: () => useConfirmModal,
   useFeatureFlags: () => useFeatureFlags,
   useFieldContext: () => useFieldContext,
@@ -246,7 +248,7 @@ function AnimatingUploadIcon(props) {
 var defaultIcons = {
   avatar: import_icons.UserFilled,
   checkbox: CheckmarkIcon,
-  close: import_icons.CloseFilled,
+  close: import_icons.Close,
   confirmModal: import_icons.Information,
   delete: import_icons.TrashCan,
   promptModal: import_icons.Information,
@@ -1304,7 +1306,8 @@ function ModalHeader(props) {
         (0, import_patterns9.vstack)({
           alignItems: "flex-start",
           gap: "md",
-          mb: "md"
+          mb: "md",
+          position: "relative"
         })
       )
     }
@@ -1560,7 +1563,6 @@ var import_css24 = require("@cerberus/styled-system/css");
 var import_patterns11 = require("@cerberus/styled-system/patterns");
 var import_recipes18 = require("@cerberus/styled-system/recipes");
 var import_react10 = require("react");
-var import_icons2 = require("@cerberus/icons");
 
 // src/aria-helpers/trap-focus.aria.ts
 function trapFocus(modalRef) {
@@ -1601,6 +1603,7 @@ function Notification(props) {
   const ref = (0, import_react10.useRef)(null);
   const onKeyDown = trapFocus(ref);
   const styles = (0, import_recipes18.notification)({ palette });
+  const { close: CloseIcon } = $cerberusIcons;
   return /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(
     "dialog",
     {
@@ -1635,7 +1638,7 @@ function Notification(props) {
             className: styles.close,
             onClick: onClose,
             value: props.id,
-            children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(import_icons2.Close, {})
+            children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(CloseIcon, {})
           }
         )
       ]
@@ -2425,23 +2428,131 @@ function useConfirmModal() {
   return context;
 }
 
-// src/context/notification-center.tsx
+// src/context/cta-modal.tsx
 var import_react17 = require("react");
-var import_patterns17 = require("@cerberus/styled-system/patterns");
-var import_recipes32 = require("@cerberus/styled-system/recipes");
+var import_jsx = require("@cerberus/styled-system/jsx");
 var import_css41 = require("@cerberus/styled-system/css");
+var import_jsx2 = require("@cerberus/styled-system/jsx");
 var import_jsx_runtime49 = require("react/jsx-runtime");
-var NotificationsContext = (0, import_react17.createContext)(null);
+var CTAModalContext = (0, import_react17.createContext)(null);
+function CTAModal(props) {
+  var _a, _b;
+  const { modalRef, show, close } = useModal();
+  const [content, setContent] = (0, import_react17.useState)(null);
+  const focusTrap = trapFocus(modalRef);
+  const FallbackIcon = $cerberusIcons.confirmModal;
+  const confirmIcon = content == null ? void 0 : content.icon;
+  const { close: CloseIcon } = $cerberusIcons;
+  const handleShow = (0, import_react17.useCallback)(
+    (options) => {
+      const maxActions = 2;
+      if (options.actions.length > maxActions) {
+        throw new Error(
+          `CTA Modal only supports a maximum of ${maxActions} actions.`
+        );
+      }
+      setContent({ ...options });
+      show();
+    },
+    [show]
+  );
+  const handleActionClick = (0, import_react17.useCallback)(
+    (event) => {
+      const index = event.currentTarget.getAttribute("data-index");
+      const action = content == null ? void 0 : content.actions[Number(index)];
+      if (typeof (action == null ? void 0 : action.onClick) === "function") {
+        action.onClick(event);
+      }
+      close();
+    },
+    [content, close]
+  );
+  const value = (0, import_react17.useMemo)(
+    () => ({
+      show: handleShow
+    }),
+    [handleShow]
+  );
+  return /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)(CTAModalContext.Provider, { value, children: [
+    props.children,
+    /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)(Modal, { onKeyDown: focusTrap, ref: modalRef, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
+        "span",
+        {
+          className: (0, import_css41.css)({
+            padding: "md",
+            position: "absolute",
+            right: 0,
+            top: 0,
+            zIndex: "decorator"
+          }),
+          children: /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(IconButton, { ariaLabel: "Close modal", onClick: close, children: /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(CloseIcon, {}) })
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)(ModalHeader, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(import_jsx.HStack, { justify: "center", w: "full", children: /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
+          Avatar,
+          {
+            ariaLabel: "",
+            gradient: "charon-light",
+            icon: /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
+              Show,
+              {
+                when: Boolean(confirmIcon),
+                fallback: /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(FallbackIcon, { size: 24 }),
+                children: confirmIcon
+              }
+            ),
+            src: ""
+          }
+        ) }),
+        /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)(import_jsx2.VStack, { gap: "lg", w: "full", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(ModalHeading, { children: content == null ? void 0 : content.heading }),
+          /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(ModalDescription, { children: content == null ? void 0 : content.description })
+        ] })
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(import_jsx.HStack, { gap: "md", pt: "sm", w: "full", children: /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(Show, { when: Boolean((_a = content == null ? void 0 : content.actions) == null ? void 0 : _a.length), children: (_b = content == null ? void 0 : content.actions) == null ? void 0 : _b.map((action, index) => /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
+        Button,
+        {
+          "data-index": index,
+          className: (0, import_css41.css)({
+            w: "1/2"
+          }),
+          onClick: handleActionClick,
+          shape: "rounded",
+          usage: "outlined",
+          children: action.text
+        },
+        index
+      )) }) })
+    ] }) })
+  ] });
+}
+function useCTAModal() {
+  const context = (0, import_react17.useContext)(CTAModalContext);
+  if (context === null) {
+    throw new Error("useCTAModal must be used within a CTAModal Provider");
+  }
+  return context;
+}
+
+// src/context/notification-center.tsx
+var import_react18 = require("react");
+var import_patterns17 = require("@cerberus/styled-system/patterns");
+var import_recipes32 = require("@cerberus/styled-system/recipes");
+var import_css42 = require("@cerberus/styled-system/css");
+var import_jsx_runtime50 = require("react/jsx-runtime");
+var NotificationsContext = (0, import_react18.createContext)(null);
 function NotificationCenter(props) {
-  const [activeNotifications, setActiveNotifications] = (0, import_react17.useState)([]);
+  const [activeNotifications, setActiveNotifications] = (0, import_react18.useState)([]);
   const styles = (0, import_recipes32.notification)();
-  const handleNotify = (0, import_react17.useCallback)((options) => {
+  const handleNotify = (0, import_react18.useCallback)((options) => {
     setActiveNotifications((prev) => {
       const id = `${options.palette}:${prev.length + 1}`;
       return [...prev, { ...options, id }];
     });
   }, []);
-  const handleClose = (0, import_react17.useCallback)((e) => {
+  const handleClose = (0, import_react18.useCallback)((e) => {
     const target = e.currentTarget;
     setActiveNotifications((prev) => {
       const item = prev.find((option) => option.id === target.value);
@@ -2449,7 +2560,7 @@ function NotificationCenter(props) {
       return prev.filter((option) => option.id !== target.value);
     });
   }, []);
-  const handleCloseAll = (0, import_react17.useCallback)(() => {
+  const handleCloseAll = (0, import_react18.useCallback)(() => {
     setActiveNotifications((prev) => {
       prev.forEach((item) => {
         if (item.onClose) item.onClose();
@@ -2457,19 +2568,19 @@ function NotificationCenter(props) {
       return [];
     });
   }, []);
-  const value = (0, import_react17.useMemo)(
+  const value = (0, import_react18.useMemo)(
     () => ({
       notify: handleNotify
     }),
     [handleNotify]
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)(NotificationsContext.Provider, { value, children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)(NotificationsContext.Provider, { value, children: [
     props.children,
-    /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(Show, { when: activeNotifications.length > 0, children: /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(Portal, { container: props.container, children: /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)("div", { className: styles.center, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(Show, { when: activeNotifications.length >= 4, children: /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(Show, { when: activeNotifications.length > 0, children: /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(Portal, { container: props.container, children: /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)("div", { className: styles.center, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(Show, { when: activeNotifications.length >= 4, children: /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
         Button,
         {
-          className: (0, import_css41.cx)(styles.closeAll, (0, import_patterns17.animateIn)()),
+          className: (0, import_css42.cx)(styles.closeAll, (0, import_patterns17.animateIn)()),
           onClick: handleCloseAll,
           palette: "action",
           shape: "rounded",
@@ -2478,7 +2589,7 @@ function NotificationCenter(props) {
           children: "Close all"
         }
       ) }),
-      /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
         "div",
         {
           className: (0, import_patterns17.vstack)({
@@ -2488,7 +2599,7 @@ function NotificationCenter(props) {
           style: {
             alignItems: "flex-end"
           },
-          children: activeNotifications.map((option) => /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
+          children: activeNotifications.map((option) => /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
             MatchNotification,
             {
               ...option,
@@ -2505,7 +2616,7 @@ function MatchNotification(props) {
   const { palette, id, onClose, heading, description } = props;
   switch (palette) {
     case "success":
-      return /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)(
+      return /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)(
         Notification,
         {
           id,
@@ -2513,14 +2624,14 @@ function MatchNotification(props) {
           open: true,
           palette: "success",
           children: [
-            /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(NotificationHeading, { palette: "success", children: heading }),
-            /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(NotificationDescription, { palette: "success", children: description })
+            /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(NotificationHeading, { palette: "success", children: heading }),
+            /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(NotificationDescription, { palette: "success", children: description })
           ]
         },
         id
       );
     case "warning":
-      return /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)(
+      return /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)(
         Notification,
         {
           id,
@@ -2528,27 +2639,27 @@ function MatchNotification(props) {
           open: true,
           palette: "warning",
           children: [
-            /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(NotificationHeading, { palette: "warning", children: heading }),
-            /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(NotificationDescription, { palette: "warning", children: description })
+            /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(NotificationHeading, { palette: "warning", children: heading }),
+            /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(NotificationDescription, { palette: "warning", children: description })
           ]
         },
         id
       );
     case "danger":
-      return /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)(Notification, { id, onClose, open: true, palette: "danger", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(NotificationHeading, { palette: "danger", children: heading }),
-        /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(NotificationDescription, { palette: "danger", children: description })
+      return /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)(Notification, { id, onClose, open: true, palette: "danger", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(NotificationHeading, { palette: "danger", children: heading }),
+        /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(NotificationDescription, { palette: "danger", children: description })
       ] }, id);
     case "info":
     default:
-      return /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)(Notification, { id, onClose, open: true, palette: "info", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(NotificationHeading, { palette: "info", children: heading }),
-        /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(NotificationDescription, { palette: "info", children: description })
+      return /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)(Notification, { id, onClose, open: true, palette: "info", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(NotificationHeading, { palette: "info", children: heading }),
+        /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(NotificationDescription, { palette: "info", children: description })
       ] }, id);
   }
 }
 function useNotificationCenter() {
-  const context = (0, import_react17.useContext)(NotificationsContext);
+  const context = (0, import_react18.useContext)(NotificationsContext);
   if (!context) {
     throw new Error(
       "useNotificationCenter must be used within a NotificationsProvider"
@@ -2558,33 +2669,33 @@ function useNotificationCenter() {
 }
 
 // src/context/prompt-modal.tsx
-var import_react18 = require("react");
-var import_css42 = require("@cerberus/styled-system/css");
+var import_react19 = require("react");
+var import_css43 = require("@cerberus/styled-system/css");
 var import_patterns18 = require("@cerberus/styled-system/patterns");
-var import_jsx_runtime50 = require("react/jsx-runtime");
-var PromptModalContext = (0, import_react18.createContext)(null);
+var import_jsx_runtime51 = require("react/jsx-runtime");
+var PromptModalContext = (0, import_react19.createContext)(null);
 function PromptModal(props) {
   const { modalRef, show, close } = useModal();
-  const resolveRef = (0, import_react18.useRef)(null);
-  const [content, setContent] = (0, import_react18.useState)(null);
-  const [inputValue, setInputValue] = (0, import_react18.useState)("");
+  const resolveRef = (0, import_react19.useRef)(null);
+  const [content, setContent] = (0, import_react19.useState)(null);
+  const [inputValue, setInputValue] = (0, import_react19.useState)("");
   const focusTrap = trapFocus(modalRef);
   const PromptIcon = $cerberusIcons.promptModal;
-  const isValid = (0, import_react18.useMemo)(
+  const isValid = (0, import_react19.useMemo)(
     () => inputValue === (content == null ? void 0 : content.key),
     [inputValue, content]
   );
-  const palette = (0, import_react18.useMemo)(
+  const palette = (0, import_react19.useMemo)(
     () => (content == null ? void 0 : content.kind) === "destructive" ? "danger" : "action",
     [content]
   );
-  const handleChange = (0, import_react18.useCallback)(
+  const handleChange = (0, import_react19.useCallback)(
     (e) => {
       setInputValue(e.currentTarget.value);
     },
     [content]
   );
-  const handleChoice = (0, import_react18.useCallback)(
+  const handleChoice = (0, import_react19.useCallback)(
     (e) => {
       var _a;
       const target = e.currentTarget;
@@ -2595,7 +2706,7 @@ function PromptModal(props) {
     },
     [inputValue, close]
   );
-  const handleShow = (0, import_react18.useCallback)(
+  const handleShow = (0, import_react19.useCallback)(
     (options) => {
       return new Promise((resolve) => {
         setContent({ ...options, kind: options.kind || "non-destructive" });
@@ -2605,42 +2716,42 @@ function PromptModal(props) {
     },
     [show]
   );
-  const value = (0, import_react18.useMemo)(
+  const value = (0, import_react19.useMemo)(
     () => ({
       show: handleShow
     }),
     [handleShow]
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)(PromptModalContext.Provider, { value, children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime51.jsxs)(PromptModalContext.Provider, { value, children: [
     props.children,
-    /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)(Modal, { onKeyDown: focusTrap, ref: modalRef, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)(ModalHeader, { children: [
-        /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime51.jsxs)(Modal, { onKeyDown: focusTrap, ref: modalRef, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime51.jsxs)(ModalHeader, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
           "div",
           {
             className: (0, import_patterns18.hstack)({
               justify: "center",
               w: "full"
             }),
-            children: /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
+            children: /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
               Show,
               {
                 when: palette === "danger",
-                fallback: /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
+                fallback: /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
                   Avatar,
                   {
                     ariaLabel: "",
                     gradient: "charon-light",
-                    icon: /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(PromptIcon, { size: 24 }),
+                    icon: /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(PromptIcon, { size: 24 }),
                     src: ""
                   }
                 ),
-                children: /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
+                children: /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
                   Avatar,
                   {
                     ariaLabel: "",
                     gradient: "hades-dark",
-                    icon: /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(PromptIcon, { size: 24 }),
+                    icon: /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(PromptIcon, { size: 24 }),
                     src: ""
                   }
                 )
@@ -2648,10 +2759,10 @@ function PromptModal(props) {
             )
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(ModalHeading, { children: content == null ? void 0 : content.heading }),
-        /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(ModalDescription, { children: content == null ? void 0 : content.description })
+        /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(ModalHeading, { children: content == null ? void 0 : content.heading }),
+        /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(ModalDescription, { children: content == null ? void 0 : content.description })
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
         "div",
         {
           className: (0, import_patterns18.vstack)({
@@ -2659,11 +2770,11 @@ function PromptModal(props) {
             mt: "4",
             mb: "8"
           }),
-          children: /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)(Field, { invalid: !isValid, children: [
-            /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)(
+          children: /* @__PURE__ */ (0, import_jsx_runtime51.jsxs)(Field, { invalid: !isValid, children: [
+            /* @__PURE__ */ (0, import_jsx_runtime51.jsxs)(
               Label,
               {
-                className: (0, import_css42.css)({
+                className: (0, import_css43.css)({
                   gap: 1,
                   justifyContent: "flex-start"
                 }),
@@ -2671,10 +2782,10 @@ function PromptModal(props) {
                 size: "md",
                 children: [
                   "Type",
-                  /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
+                  /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
                     "strong",
                     {
-                      className: (0, import_css42.css)({
+                      className: (0, import_css43.css)({
                         textTransform: "uppercase"
                       }),
                       children: content == null ? void 0 : content.key
@@ -2684,7 +2795,7 @@ function PromptModal(props) {
                 ]
               }
             ),
-            /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
               Input,
               {
                 id: "confirm",
@@ -2696,7 +2807,7 @@ function PromptModal(props) {
           ] })
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)(
+      /* @__PURE__ */ (0, import_jsx_runtime51.jsxs)(
         "div",
         {
           className: (0, import_patterns18.hstack)({
@@ -2704,11 +2815,11 @@ function PromptModal(props) {
             gap: "4"
           }),
           children: [
-            /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
               Button,
               {
                 autoFocus: true,
-                className: (0, import_css42.css)({
+                className: (0, import_css43.css)({
                   w: "1/2"
                 }),
                 disabled: !isValid,
@@ -2719,10 +2830,10 @@ function PromptModal(props) {
                 children: content == null ? void 0 : content.actionText
               }
             ),
-            /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
               Button,
               {
-                className: (0, import_css42.css)({
+                className: (0, import_css43.css)({
                   w: "1/2"
                 }),
                 name: "cancel",
@@ -2739,7 +2850,7 @@ function PromptModal(props) {
   ] });
 }
 function usePromptModal() {
-  const context = (0, import_react18.useContext)(PromptModalContext);
+  const context = (0, import_react19.useContext)(PromptModalContext);
   if (context === null) {
     throw new Error("usePromptModal must be used within a PromptModal Provider");
   }
@@ -2747,50 +2858,50 @@ function usePromptModal() {
 }
 
 // src/context/theme.tsx
-var import_react20 = require("react");
+var import_react21 = require("react");
 
 // src/hooks/useTheme.ts
-var import_react19 = require("react");
+var import_react20 = require("react");
 var THEME_KEY = "cerberus-theme";
 var MODE_KEY = "cerberus-mode";
 function useTheme(defaultTheme = "cerberus", defaultColorMode = "light", options = {}) {
   const { updateMode, updateTheme, cache } = options;
-  const [theme, setTheme] = (0, import_react19.useState)(defaultTheme);
-  const [colorMode, setColorMode] = (0, import_react19.useState)(defaultColorMode);
-  const handleThemeChange = (0, import_react19.useCallback)(
+  const [theme, setTheme] = (0, import_react20.useState)(defaultTheme);
+  const [colorMode, setColorMode] = (0, import_react20.useState)(defaultColorMode);
+  const handleThemeChange = (0, import_react20.useCallback)(
     (newTheme) => {
       setTheme(newTheme);
       updateTheme == null ? void 0 : updateTheme(newTheme);
     },
     [updateTheme]
   );
-  const handleColorModeChange = (0, import_react19.useCallback)(
+  const handleColorModeChange = (0, import_react20.useCallback)(
     (newMode) => {
       setColorMode(newMode);
       updateMode == null ? void 0 : updateMode(newMode);
     },
     [updateMode]
   );
-  (0, import_react19.useLayoutEffect)(() => {
+  (0, import_react20.useLayoutEffect)(() => {
     const theme2 = localStorage.getItem(THEME_KEY);
     if (theme2) {
       setTheme(theme2);
     }
   }, []);
-  (0, import_react19.useLayoutEffect)(() => {
+  (0, import_react20.useLayoutEffect)(() => {
     const mode = localStorage.getItem(MODE_KEY);
     if (mode) {
       setColorMode(mode);
     }
   }, []);
-  (0, import_react19.useEffect)(() => {
+  (0, import_react20.useEffect)(() => {
     const root = document.documentElement;
     root.dataset.pandaTheme = theme;
     if (cache) {
       localStorage.setItem(THEME_KEY, theme);
     }
   }, [theme, cache]);
-  (0, import_react19.useEffect)(() => {
+  (0, import_react20.useEffect)(() => {
     const root = document.documentElement;
     if (colorMode === "system") {
       root.dataset.colorMode = window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
@@ -2801,7 +2912,7 @@ function useTheme(defaultTheme = "cerberus", defaultColorMode = "light", options
       localStorage.setItem(MODE_KEY, colorMode);
     }
   }, [colorMode, cache]);
-  return (0, import_react19.useMemo)(
+  return (0, import_react20.useMemo)(
     () => ({
       theme,
       mode: colorMode,
@@ -2813,8 +2924,8 @@ function useTheme(defaultTheme = "cerberus", defaultColorMode = "light", options
 }
 
 // src/context/theme.tsx
-var import_jsx_runtime51 = require("react/jsx-runtime");
-var ThemeContext = (0, import_react20.createContext)(
+var import_jsx_runtime52 = require("react/jsx-runtime");
+var ThemeContext = (0, import_react21.createContext)(
   null
 );
 function ThemeProvider(props) {
@@ -2823,10 +2934,10 @@ function ThemeProvider(props) {
     updateMode: props.updateMode,
     updateTheme: props.updateTheme
   });
-  return /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(ThemeContext.Provider, { value: state, children: props.children });
+  return /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(ThemeContext.Provider, { value: state, children: props.children });
 }
 function useThemeContext() {
-  const context = (0, import_react20.useContext)(ThemeContext);
+  const context = (0, import_react21.useContext)(ThemeContext);
   if (!context) {
     throw new Error("useThemeContext must be used within a ThemeProvider");
   }
@@ -2834,11 +2945,11 @@ function useThemeContext() {
 }
 
 // src/hooks/useToggle.ts
-var import_react21 = require("react");
+var import_react22 = require("react");
 function useToggle(options) {
-  const [checked, setChecked] = (0, import_react21.useState)((options == null ? void 0 : options.checked) ?? "");
+  const [checked, setChecked] = (0, import_react22.useState)((options == null ? void 0 : options.checked) ?? "");
   const onChange = options == null ? void 0 : options.onChange;
-  const handleChange = (0, import_react21.useCallback)(
+  const handleChange = (0, import_react22.useCallback)(
     (e) => {
       const target = e.currentTarget;
       setChecked((prev) => {
@@ -2848,7 +2959,7 @@ function useToggle(options) {
     },
     [onChange]
   );
-  return (0, import_react21.useMemo)(() => ({ checked, handleChange }), [checked, handleChange]);
+  return (0, import_react22.useMemo)(() => ({ checked, handleChange }), [checked, handleChange]);
 }
 
 // src/utils/index.ts
@@ -2867,6 +2978,7 @@ __reExport(src_exports, require("@dnd-kit/core"), module.exports);
   AdmonitionHeading,
   Avatar,
   Button,
+  CTAModal,
   Checkbox,
   CircularProgress,
   ConfirmModal,
@@ -2926,6 +3038,7 @@ __reExport(src_exports, require("@dnd-kit/core"), module.exports);
   getPosition,
   processStatus,
   trapFocus,
+  useCTAModal,
   useConfirmModal,
   useFeatureFlags,
   useFieldContext,