@cerberus-design/react 0.11.1 → 0.12.0

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,
@@ -44,6 +45,13 @@ __export(src_exports, {
   Label: () => Label,
   Legend: () => Legend,
   MODE_KEY: () => MODE_KEY,
+  Menu: () => Menu,
+  MenuContent: () => MenuContent,
+  MenuGroupLabel: () => MenuGroupLabel,
+  MenuItem: () => MenuItem,
+  MenuItemGroup: () => MenuItemGroup,
+  MenuSeparator: () => MenuSeparator,
+  MenuTrigger: () => MenuTrigger,
   Modal: () => Modal,
   ModalDescription: () => ModalDescription,
   ModalHeader: () => ModalHeader,
@@ -82,9 +90,11 @@ __export(src_exports, {
   Tr: () => Tr,
   createNavTriggerProps: () => createNavTriggerProps,
   defineIcons: () => defineIcons,
+  formatNotifyCount: () => formatNotifyCount,
   getPosition: () => getPosition,
   processStatus: () => processStatus,
   trapFocus: () => trapFocus,
+  useCTAModal: () => useCTAModal,
   useConfirmModal: () => useConfirmModal,
   useFeatureFlags: () => useFeatureFlags,
   useFieldContext: () => useFieldContext,
@@ -245,7 +255,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,
@@ -1272,38 +1282,81 @@ function Legend(props) {
   );
 }
 
-// src/components/Modal.tsx
-var import_css16 = require("@cerberus/styled-system/css");
+// src/components/Menu.tsx
+var import_react6 = require("@ark-ui/react");
 var import_recipes14 = require("@cerberus/styled-system/recipes");
-var import_react6 = require("react");
+var import_css16 = require("@cerberus/styled-system/css");
 var import_jsx_runtime22 = require("react/jsx-runtime");
-function ModalEl(props, ref) {
+var menuStyles = (0, import_recipes14.menu)();
+var Menu = import_react6.Menu.Root;
+function MenuTrigger(props) {
+  return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_react6.Menu.Trigger, { ...props, asChild: true });
+}
+function MenuContent(props) {
+  return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_react6.Menu.Positioner, { children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+    import_react6.Menu.Content,
+    {
+      ...props,
+      className: (0, import_css16.cx)(props.className, menuStyles.content)
+    }
+  ) });
+}
+function MenuItem(props) {
+  return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_react6.Menu.Item, { ...props, className: (0, import_css16.cx)(props.className, menuStyles.item) });
+}
+var MenuItemGroup = import_react6.Menu.ItemGroup;
+function MenuGroupLabel(props) {
   return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+    import_react6.Menu.ItemGroupLabel,
+    {
+      ...props,
+      className: (0, import_css16.cx)(props.className, menuStyles.itemGroupLabel)
+    }
+  );
+}
+function MenuSeparator(props) {
+  return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+    import_react6.Menu.Separator,
+    {
+      ...props,
+      className: (0, import_css16.cx)(props.className, menuStyles.separator)
+    }
+  );
+}
+
+// src/components/Modal.tsx
+var import_css17 = require("@cerberus/styled-system/css");
+var import_recipes15 = require("@cerberus/styled-system/recipes");
+var import_react7 = require("react");
+var import_jsx_runtime23 = require("react/jsx-runtime");
+function ModalEl(props, ref) {
+  return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
     "dialog",
     {
       ...props,
-      className: (0, import_css16.cx)(props.className, (0, import_recipes14.modal)().dialog),
+      className: (0, import_css17.cx)(props.className, (0, import_recipes15.modal)().dialog),
       ref
     }
   );
 }
-var Modal = (0, import_react6.forwardRef)(ModalEl);
+var Modal = (0, import_react7.forwardRef)(ModalEl);
 
 // src/components/ModalHeader.tsx
-var import_css17 = require("@cerberus/styled-system/css");
+var import_css18 = require("@cerberus/styled-system/css");
 var import_patterns9 = require("@cerberus/styled-system/patterns");
-var import_jsx_runtime23 = require("react/jsx-runtime");
+var import_jsx_runtime24 = require("react/jsx-runtime");
 function ModalHeader(props) {
-  return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
     "div",
     {
       ...props,
-      className: (0, import_css17.cx)(
+      className: (0, import_css18.cx)(
         props.className,
         (0, import_patterns9.vstack)({
           alignItems: "flex-start",
           gap: "md",
-          mb: "md"
+          mb: "md",
+          position: "relative"
         })
       )
     }
@@ -1311,25 +1364,25 @@ function ModalHeader(props) {
 }
 
 // src/components/ModalHeading.tsx
-var import_css18 = require("@cerberus/styled-system/css");
-var import_recipes15 = require("@cerberus/styled-system/recipes");
-var import_jsx_runtime24 = require("react/jsx-runtime");
+var import_css19 = require("@cerberus/styled-system/css");
+var import_recipes16 = require("@cerberus/styled-system/recipes");
+var import_jsx_runtime25 = require("react/jsx-runtime");
 function ModalHeading(props) {
-  return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("p", { ...props, className: (0, import_css18.cx)(props.className, (0, import_recipes15.modal)().heading) });
+  return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("p", { ...props, className: (0, import_css19.cx)(props.className, (0, import_recipes16.modal)().heading) });
 }
 
 // src/components/ModalDescription.tsx
-var import_css19 = require("@cerberus/styled-system/css");
-var import_recipes16 = require("@cerberus/styled-system/recipes");
-var import_jsx_runtime25 = require("react/jsx-runtime");
+var import_css20 = require("@cerberus/styled-system/css");
+var import_recipes17 = require("@cerberus/styled-system/recipes");
+var import_jsx_runtime26 = require("react/jsx-runtime");
 function ModalDescription(props) {
-  return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("p", { ...props, className: (0, import_css19.cx)(props.className, (0, import_recipes16.modal)().description) });
+  return /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("p", { ...props, className: (0, import_css20.cx)(props.className, (0, import_recipes17.modal)().description) });
 }
 
 // src/components/NavMenuTrigger.tsx
-var import_react8 = require("react");
-var import_css21 = require("@cerberus/styled-system/css");
-var import_recipes17 = require("@cerberus/styled-system/recipes");
+var import_react9 = require("react");
+var import_css22 = require("@cerberus/styled-system/css");
+var import_recipes18 = require("@cerberus/styled-system/recipes");
 
 // src/aria-helpers/nav-menu.aria.ts
 function createNavTriggerProps(values) {
@@ -1340,18 +1393,18 @@ function createNavTriggerProps(values) {
 }
 
 // src/context/navMenu.tsx
-var import_css20 = require("@cerberus/styled-system/css");
-var import_react7 = require("react");
-var import_jsx_runtime26 = require("react/jsx-runtime");
-var NavMenuContext = (0, import_react7.createContext)(null);
+var import_css21 = require("@cerberus/styled-system/css");
+var import_react8 = require("react");
+var import_jsx_runtime27 = require("react/jsx-runtime");
+var NavMenuContext = (0, import_react8.createContext)(null);
 function NavMenu(props) {
-  const triggerRef = (0, import_react7.useRef)(null);
-  const menuRef = (0, import_react7.useRef)(null);
-  const [expanded, setExpanded] = (0, import_react7.useState)(false);
-  const handleToggle = (0, import_react7.useCallback)(() => {
+  const triggerRef = (0, import_react8.useRef)(null);
+  const menuRef = (0, import_react8.useRef)(null);
+  const [expanded, setExpanded] = (0, import_react8.useState)(false);
+  const handleToggle = (0, import_react8.useCallback)(() => {
     setExpanded((prev) => !prev);
   }, []);
-  const value = (0, import_react7.useMemo)(
+  const value = (0, import_react8.useMemo)(
     () => ({
       triggerRef,
       menuRef,
@@ -1360,10 +1413,10 @@ function NavMenu(props) {
     }),
     [expanded, handleToggle]
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(NavMenuContext.Provider, { value, children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(NavMenuContext.Provider, { value, children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
     "nav",
     {
-      className: (0, import_css20.css)({
+      className: (0, import_css21.css)({
         position: "relative"
       }),
       children: props.children
@@ -1371,7 +1424,7 @@ function NavMenu(props) {
   ) });
 }
 function useNavMenuContext() {
-  const context = (0, import_react7.useContext)(NavMenuContext);
+  const context = (0, import_react8.useContext)(NavMenuContext);
   if (!context) {
     throw new Error("useNavMenuContext must be used within a NavMenu.");
   }
@@ -1379,7 +1432,7 @@ function useNavMenuContext() {
 }
 
 // src/components/NavMenuTrigger.tsx
-var import_jsx_runtime27 = require("react/jsx-runtime");
+var import_jsx_runtime28 = require("react/jsx-runtime");
 function NavMenuTrigger(props) {
   const {
     as,
@@ -1398,25 +1451,25 @@ function NavMenuTrigger(props) {
   });
   const hasAs = Boolean(as);
   const AsSub = as;
-  const handleClick = (0, import_react8.useCallback)(
+  const handleClick = (0, import_react9.useCallback)(
     (e) => {
       if (onClick) return onClick(e);
       onToggle();
     },
     [onClick, onToggle]
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
     Show,
     {
       when: hasAs,
-      fallback: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+      fallback: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
         "button",
         {
           ...nativeProps,
           ...ariaProps,
-          className: (0, import_css21.cx)(
+          className: (0, import_css22.cx)(
             nativeProps.className,
-            (0, import_recipes17.button)({
+            (0, import_recipes18.button)({
               palette,
               usage,
               shape
@@ -1427,7 +1480,7 @@ function NavMenuTrigger(props) {
           children: props.children
         }
       ),
-      children: hasAs && /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+      children: hasAs && /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
         AsSub,
         {
           ...nativeProps,
@@ -1441,10 +1494,10 @@ function NavMenuTrigger(props) {
 }
 
 // src/components/NavMenuList.tsx
-var import_react9 = require("react");
-var import_css22 = require("@cerberus/styled-system/css");
+var import_react10 = require("react");
+var import_css23 = require("@cerberus/styled-system/css");
 var import_patterns10 = require("@cerberus/styled-system/patterns");
-var import_jsx_runtime28 = require("react/jsx-runtime");
+var import_jsx_runtime29 = require("react/jsx-runtime");
 function getPosition(position) {
   const defaultPositions = {
     left: "auto",
@@ -1498,16 +1551,16 @@ var navListStyles = (0, import_patterns10.vstack)({
 function NavMenuList(props) {
   const { position, ...nativeProps } = props;
   const { menuRef, expanded } = useNavMenuContext();
-  const locationStyles = (0, import_react9.useMemo)(
+  const locationStyles = (0, import_react10.useMemo)(
     () => getPosition(position ?? "bottom"),
     [position]
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(Show, { when: expanded, children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(Show, { when: expanded, children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
     "ul",
     {
       ...nativeProps,
       "data-position": position ?? "bottom",
-      className: (0, import_css22.cx)(nativeProps.className, navListStyles),
+      className: (0, import_css23.cx)(nativeProps.className, navListStyles),
       ref: menuRef,
       style: locationStyles
     }
@@ -1515,29 +1568,29 @@ function NavMenuList(props) {
 }
 
 // src/components/NavMenuLink.tsx
-var import_css23 = require("@cerberus/styled-system/css");
-var import_jsx_runtime29 = require("react/jsx-runtime");
+var import_css24 = require("@cerberus/styled-system/css");
+var import_jsx_runtime30 = require("react/jsx-runtime");
 function NavMenuLink(props) {
   const { as, ...nativeProps } = props;
   const hasAs = Boolean(as);
   const AsSub = as;
-  return /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
     "li",
     {
-      className: (0, import_css23.css)({
+      className: (0, import_css24.css)({
         w: "full"
       }),
-      children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
         Show,
         {
           when: hasAs,
-          fallback: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
+          fallback: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
             "a",
             {
               ...nativeProps,
-              className: (0, import_css23.cx)(
+              className: (0, import_css24.cx)(
                 nativeProps.className,
-                (0, import_css23.css)({
+                (0, import_css24.css)({
                   color: "action.navigation.initial",
                   textStyle: "link",
                   _hover: {
@@ -1547,7 +1600,7 @@ function NavMenuLink(props) {
               )
             }
           ),
-          children: hasAs && /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(AsSub, { ...nativeProps })
+          children: hasAs && /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(AsSub, { ...nativeProps })
         }
       )
     }
@@ -1555,11 +1608,10 @@ function NavMenuLink(props) {
 }
 
 // src/components/Notification.tsx
-var import_css24 = require("@cerberus/styled-system/css");
+var import_css25 = 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");
+var import_recipes19 = require("@cerberus/styled-system/recipes");
+var import_react11 = require("react");
 
 // src/aria-helpers/trap-focus.aria.ts
 function trapFocus(modalRef) {
@@ -1588,23 +1640,24 @@ function trapFocus(modalRef) {
 }
 
 // src/components/Notification.tsx
-var import_jsx_runtime30 = require("react/jsx-runtime");
+var import_jsx_runtime31 = require("react/jsx-runtime");
 function MatchNotificationIcon(props) {
   const palette = props.palette || "info";
   const key = `${palette}Notification`;
   const Icon = $cerberusIcons[key];
-  return /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(Icon, {});
+  return /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(Icon, {});
 }
 function Notification(props) {
   const { children, palette, onClose, ...nativeProps } = props;
-  const ref = (0, import_react10.useRef)(null);
+  const ref = (0, import_react11.useRef)(null);
   const onKeyDown = trapFocus(ref);
-  const styles = (0, import_recipes18.notification)({ palette });
-  return /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(
+  const styles = (0, import_recipes19.notification)({ palette });
+  const { close: CloseIcon } = $cerberusIcons;
+  return /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(
     "dialog",
     {
       ...nativeProps,
-      className: (0, import_css24.cx)(
+      className: (0, import_css25.cx)(
         nativeProps.className,
         (0, import_patterns11.hstack)({
           position: "relative",
@@ -1615,8 +1668,8 @@ function Notification(props) {
       onKeyDown,
       ref,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("span", { className: styles.icon, children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(MatchNotificationIcon, { palette }) }),
-        /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("span", { className: styles.icon, children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(MatchNotificationIcon, { palette }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
           "div",
           {
             className: (0, import_patterns11.vstack)({
@@ -1627,14 +1680,14 @@ function Notification(props) {
             children
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
           "button",
           {
             "aria-label": "Close",
             className: styles.close,
             onClick: onClose,
             value: props.id,
-            children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(import_icons2.Close, {})
+            children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(CloseIcon, {})
           }
         )
       ]
@@ -1643,26 +1696,26 @@ function Notification(props) {
 }
 
 // src/components/NotificationHeading.tsx
-var import_css25 = require("@cerberus/styled-system/css");
-var import_recipes19 = require("@cerberus/styled-system/recipes");
-var import_jsx_runtime31 = require("react/jsx-runtime");
+var import_css26 = require("@cerberus/styled-system/css");
+var import_recipes20 = require("@cerberus/styled-system/recipes");
+var import_jsx_runtime32 = require("react/jsx-runtime");
 function NotificationHeading(props) {
   const { palette, ...nativeProps } = props;
-  const styles = (0, import_recipes19.notification)({ palette });
-  return /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("p", { className: (0, import_css25.cx)(nativeProps.className, styles.heading), ...nativeProps });
+  const styles = (0, import_recipes20.notification)({ palette });
+  return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("p", { className: (0, import_css26.cx)(nativeProps.className, styles.heading), ...nativeProps });
 }
 
 // src/components/NotificationDescription.tsx
-var import_css26 = require("@cerberus/styled-system/css");
-var import_recipes20 = require("@cerberus/styled-system/recipes");
-var import_jsx_runtime32 = require("react/jsx-runtime");
+var import_css27 = require("@cerberus/styled-system/css");
+var import_recipes21 = require("@cerberus/styled-system/recipes");
+var import_jsx_runtime33 = require("react/jsx-runtime");
 function NotificationDescription(props) {
   const { palette, ...nativeProps } = props;
-  const styles = (0, import_recipes20.notification)({ palette });
-  return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
+  const styles = (0, import_recipes21.notification)({ palette });
+  return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
     "p",
     {
-      className: (0, import_css26.cx)(nativeProps.className, styles.description),
+      className: (0, import_css27.cx)(nativeProps.className, styles.description),
       ...nativeProps
     }
   );
@@ -1679,18 +1732,18 @@ function Portal(props) {
 }
 
 // src/components/Radio.tsx
-var import_css27 = require("@cerberus/styled-system/css");
+var import_css28 = require("@cerberus/styled-system/css");
 var import_patterns12 = require("@cerberus/styled-system/patterns");
-var import_recipes21 = require("@cerberus/styled-system/recipes");
-var import_jsx_runtime33 = require("react/jsx-runtime");
+var import_recipes22 = require("@cerberus/styled-system/recipes");
+var import_jsx_runtime34 = require("react/jsx-runtime");
 function Radio(props) {
   const { children, size, ...nativeProps } = props;
   const { invalid, ...state } = useFieldContext();
-  const styles = (0, import_recipes21.radio)({ size });
-  return /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(
+  const styles = (0, import_recipes22.radio)({ size });
+  return /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(
     "div",
     {
-      className: (0, import_css27.cx)(
+      className: (0, import_css28.cx)(
         "group",
         (0, import_patterns12.hstack)({
           gap: "sm"
@@ -1699,13 +1752,13 @@ function Radio(props) {
       ),
       tabIndex: 0,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
           "input",
           {
             ...nativeProps,
             ...state,
             ...invalid && { "aria-invalid": true },
-            className: (0, import_css27.cx)(nativeProps.className, styles.input),
+            className: (0, import_css28.cx)(nativeProps.className, styles.input),
             tabIndex: -1,
             type: "radio"
           }
@@ -1717,19 +1770,19 @@ function Radio(props) {
 }
 
 // src/components/Select.tsx
-var import_css28 = require("@cerberus/styled-system/css");
+var import_css29 = require("@cerberus/styled-system/css");
 var import_patterns13 = require("@cerberus/styled-system/patterns");
-var import_recipes22 = require("@cerberus/styled-system/recipes");
-var import_jsx_runtime34 = require("react/jsx-runtime");
+var import_recipes23 = require("@cerberus/styled-system/recipes");
+var import_jsx_runtime35 = require("react/jsx-runtime");
 function Select(props) {
   const { describedBy, size, ...nativeProps } = props;
   const { invalid, ...fieldStates } = useFieldContext();
   const { invalid: InvalidIcon, selectArrow: SelectArrow } = $cerberusIcons;
-  const styles = (0, import_recipes22.select)({
+  const styles = (0, import_recipes23.select)({
     size
   });
-  return /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("div", { className: styles.root, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)("div", { className: styles.root, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
       "select",
       {
         ...nativeProps,
@@ -1739,38 +1792,38 @@ function Select(props) {
         className: styles.input
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(
+    /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(
       "span",
       {
-        className: (0, import_css28.cx)(
+        className: (0, import_css29.cx)(
           styles.iconStack,
           (0, import_patterns13.hstack)({
             gap: "2"
           })
         ),
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(Show, { when: invalid, children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(Show, { when: invalid, children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
             "span",
             {
               ...invalid && { "data-invalid": true },
               className: styles.stateIcon,
-              children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(InvalidIcon, {})
+              children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(InvalidIcon, {})
             }
           ) }),
-          /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("span", { className: styles.arrowIcon, children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(SelectArrow, {}) })
+          /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("span", { className: styles.arrowIcon, children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(SelectArrow, {}) })
         ]
       }
     )
   ] });
 }
 function Option(props) {
-  return /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("option", { ...props });
+  return /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("option", { ...props });
 }
 
 // src/components/Spinner.tsx
-var import_jsx_runtime35 = require("react/jsx-runtime");
+var import_jsx_runtime36 = require("react/jsx-runtime");
 function Spinner(props) {
-  return /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
     "svg",
     {
       "aria-busy": "true",
@@ -1780,7 +1833,7 @@ function Spinner(props) {
       width: props.size,
       viewBox: "0 0 24 24",
       ...props,
-      children: /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)(
         "g",
         {
           fill: "none",
@@ -1789,14 +1842,14 @@ function Spinner(props) {
           strokeLinejoin: "round",
           strokeWidth: 2,
           children: [
-            /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(
+            /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)(
               "path",
               {
                 strokeDasharray: 16,
                 strokeDashoffset: 16,
                 d: "M12 3c4.97 0 9 4.03 9 9",
                 children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
+                  /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
                     "animate",
                     {
                       fill: "freeze",
@@ -1805,7 +1858,7 @@ function Spinner(props) {
                       values: "16;0"
                     }
                   ),
-                  /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
+                  /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
                     "animateTransform",
                     {
                       attributeName: "transform",
@@ -1818,14 +1871,14 @@ function Spinner(props) {
                 ]
               }
             ),
-            /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
               "path",
               {
                 strokeDasharray: 64,
                 strokeDashoffset: 64,
                 strokeOpacity: 0.3,
                 d: "M12 3c4.97 0 9 4.03 9 9c0 4.97 -4.03 9 -9 9c-4.97 0 -9 -4.03 -9 -9c0 -4.97 4.03 -9 9 -9Z",
-                children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
+                children: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
                   "animate",
                   {
                     fill: "freeze",
@@ -1844,31 +1897,31 @@ function Spinner(props) {
 }
 
 // src/components/Tab.tsx
-var import_react13 = require("react");
+var import_react14 = require("react");
 
 // src/context/tabs.tsx
-var import_recipes23 = require("@cerberus/styled-system/recipes");
-var import_react11 = require("react");
-var import_jsx_runtime36 = require("react/jsx-runtime");
-var TabsContext = (0, import_react11.createContext)(null);
+var import_recipes24 = require("@cerberus/styled-system/recipes");
+var import_react12 = require("react");
+var import_jsx_runtime37 = require("react/jsx-runtime");
+var TabsContext = (0, import_react12.createContext)(null);
 function Tabs(props) {
   const { cache, active, id, palette } = props;
-  const [activeTab, setActiveTab] = (0, import_react11.useState)(() => cache ? "" : active ?? "");
-  const tabsList = (0, import_react11.useRef)([]);
-  const uuid = (0, import_react11.useMemo)(() => {
+  const [activeTab, setActiveTab] = (0, import_react12.useState)(() => cache ? "" : active ?? "");
+  const tabsList = (0, import_react12.useRef)([]);
+  const uuid = (0, import_react12.useMemo)(() => {
     return id ? `cerberus-tabs-${id}` : "cerberus-tabs";
   }, [id]);
-  const value = (0, import_react11.useMemo)(
+  const value = (0, import_react12.useMemo)(
     () => ({
       tabs: tabsList,
       id: uuid,
       active: activeTab,
-      styles: (0, import_recipes23.tabs)({ palette }),
+      styles: (0, import_recipes24.tabs)({ palette }),
       onTabUpdate: setActiveTab
     }),
     [activeTab, setActiveTab, palette, uuid, tabsList]
   );
-  (0, import_react11.useEffect)(() => {
+  (0, import_react12.useEffect)(() => {
     if (cache) {
       const cachedTab = window.localStorage.getItem(uuid);
       setActiveTab(
@@ -1876,15 +1929,15 @@ function Tabs(props) {
       );
     }
   }, [cache, active, uuid]);
-  (0, import_react11.useEffect)(() => {
+  (0, import_react12.useEffect)(() => {
     if (cache && activeTab) {
       window.localStorage.setItem(uuid, activeTab);
     }
   }, [activeTab, cache]);
-  return /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(TabsContext.Provider, { value, children: props.children });
+  return /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(TabsContext.Provider, { value, children: props.children });
 }
 function useTabsContext() {
-  const context = (0, import_react11.useContext)(TabsContext);
+  const context = (0, import_react12.useContext)(TabsContext);
   if (!context) {
     throw new Error("useTabsContext must be used within a Tabs Provider.");
   }
@@ -1892,10 +1945,10 @@ function useTabsContext() {
 }
 
 // src/components/Tab.tsx
-var import_css29 = require("@cerberus/styled-system/css");
+var import_css30 = require("@cerberus/styled-system/css");
 
 // src/aria-helpers/tabs.aria.ts
-var import_react12 = require("react");
+var import_react13 = require("react");
 function getNextIndex(index, length) {
   return index === length - 1 ? 0 : index + 1;
 }
@@ -1904,8 +1957,8 @@ function getPrevIndex(index, length) {
 }
 function useTabsKeyboardNavigation() {
   const { tabs: tabs2 } = useTabsContext();
-  const [activeTab, setActiveTab] = (0, import_react12.useState)(-1);
-  (0, import_react12.useEffect)(() => {
+  const [activeTab, setActiveTab] = (0, import_react13.useState)(-1);
+  (0, import_react13.useEffect)(() => {
     const handleKeyDown = (event) => {
       const index = activeTab === -1 ? tabs2.current.findIndex((tab) => tab.ariaSelected === "true") : activeTab;
       const nextIndex = getNextIndex(index, tabs2.current.length);
@@ -1951,19 +2004,19 @@ function useTabsKeyboardNavigation() {
 }
 
 // src/components/Tab.tsx
-var import_jsx_runtime37 = require("react/jsx-runtime");
+var import_jsx_runtime38 = require("react/jsx-runtime");
 function Tab(props) {
   const { value, ...nativeProps } = props;
   const { active, onTabUpdate, styles } = useTabsContext();
-  const [isPending, startTransition] = (0, import_react13.useTransition)();
+  const [isPending, startTransition] = (0, import_react14.useTransition)();
   const { ref } = useTabsKeyboardNavigation();
-  const isActive = (0, import_react13.useMemo)(() => active === value, [active, value]);
+  const isActive = (0, import_react14.useMemo)(() => active === value, [active, value]);
   function handleClick(e) {
     var _a;
     (_a = props.onClick) == null ? void 0 : _a.call(props, e);
     startTransition(() => onTabUpdate(e.currentTarget.value));
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
     "button",
     {
       ...nativeProps,
@@ -1972,7 +2025,7 @@ function Tab(props) {
       "aria-busy": isPending,
       "aria-selected": isActive,
       id: `tab:${value}`,
-      className: (0, import_css29.cx)(nativeProps.className, styles.tab),
+      className: (0, import_css30.cx)(nativeProps.className, styles.tab),
       onClick: handleClick,
       role: "tab",
       ref,
@@ -1982,18 +2035,18 @@ function Tab(props) {
 }
 
 // src/components/TabList.tsx
-var import_css30 = require("@cerberus/styled-system/css");
+var import_css31 = require("@cerberus/styled-system/css");
 var import_patterns14 = require("@cerberus/styled-system/patterns");
-var import_jsx_runtime38 = require("react/jsx-runtime");
+var import_jsx_runtime39 = require("react/jsx-runtime");
 function TabList(props) {
   const { description, ...nativeProps } = props;
   const { id, styles } = useTabsContext();
-  return /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
     "div",
     {
       ...nativeProps,
       "aria-label": description,
-      className: (0, import_css30.cx)(
+      className: (0, import_css31.cx)(
         nativeProps.className,
         (0, import_patterns14.hstack)({
           gap: "0"
@@ -2007,20 +2060,20 @@ function TabList(props) {
 }
 
 // src/components/TabPanel.tsx
-var import_css31 = require("@cerberus/styled-system/css");
-var import_react14 = require("react");
-var import_jsx_runtime39 = require("react/jsx-runtime");
+var import_css32 = require("@cerberus/styled-system/css");
+var import_react15 = require("react");
+var import_jsx_runtime40 = require("react/jsx-runtime");
 function TabPanel(props) {
   const { tab, ...nativeProps } = props;
   const { active, styles } = useTabsContext();
-  const isActive = (0, import_react14.useMemo)(() => active === tab, [active, tab]);
-  return /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(Show, { when: isActive, children: /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
+  const isActive = (0, import_react15.useMemo)(() => active === tab, [active, tab]);
+  return /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(Show, { when: isActive, children: /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
     "div",
     {
       ...nativeProps,
       ...isActive && { tabIndex: 0 },
       "aria-labelledby": `tab:${tab}`,
-      className: (0, import_css31.cx)(nativeProps.className, styles.tabPanel),
+      className: (0, import_css32.cx)(nativeProps.className, styles.tabPanel),
       id: `panel:${tab}`,
       role: "tabpanel"
     }
@@ -2028,60 +2081,60 @@ function TabPanel(props) {
 }
 
 // src/components/Table.tsx
-var import_css32 = require("@cerberus/styled-system/css");
-var import_recipes24 = require("@cerberus/styled-system/recipes");
-var import_jsx_runtime40 = require("react/jsx-runtime");
+var import_css33 = require("@cerberus/styled-system/css");
+var import_recipes25 = require("@cerberus/styled-system/recipes");
+var import_jsx_runtime41 = require("react/jsx-runtime");
 function Table(props) {
   const { caption, children, ...nativeProps } = props;
-  const styles = (0, import_recipes24.table)();
-  return /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("div", { className: styles.container, children: /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)(
+  const styles = (0, import_recipes25.table)();
+  return /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("div", { className: styles.container, children: /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)(
     "table",
     {
       ...nativeProps,
-      className: (0, import_css32.cx)(nativeProps.className, styles.table),
+      className: (0, import_css33.cx)(nativeProps.className, styles.table),
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("caption", { className: styles.caption, children: caption }),
+        /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("caption", { className: styles.caption, children: caption }),
         children
       ]
     }
   ) });
 }
 function Tr(props) {
-  return /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("tr", { ...props });
+  return /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("tr", { ...props });
 }
 
 // src/components/Thead.tsx
-var import_css33 = require("@cerberus/styled-system/css");
-var import_recipes25 = require("@cerberus/styled-system/recipes");
-var import_jsx_runtime41 = require("react/jsx-runtime");
+var import_css34 = require("@cerberus/styled-system/css");
+var import_recipes26 = require("@cerberus/styled-system/recipes");
+var import_jsx_runtime42 = require("react/jsx-runtime");
 function Thead(props) {
-  return /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("thead", { ...props, className: (0, import_css33.cx)(props.className, (0, import_recipes25.thead)()) });
+  return /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("thead", { ...props, className: (0, import_css34.cx)(props.className, (0, import_recipes26.thead)()) });
 }
 
 // src/components/Th.tsx
-var import_css34 = require("@cerberus/styled-system/css");
-var import_recipes26 = require("@cerberus/styled-system/recipes");
-var import_jsx_runtime42 = require("react/jsx-runtime");
+var import_css35 = require("@cerberus/styled-system/css");
+var import_recipes27 = require("@cerberus/styled-system/recipes");
+var import_jsx_runtime43 = require("react/jsx-runtime");
 function Th(props) {
   const { size, onClick, ...nativeProps } = props;
-  return /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
     Show,
     {
       when: Boolean(onClick),
-      fallback: /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
+      fallback: /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
         "th",
         {
           ...nativeProps,
-          className: (0, import_css34.cx)(nativeProps.className, (0, import_recipes26.th)({ size }))
+          className: (0, import_css35.cx)(nativeProps.className, (0, import_recipes27.th)({ size }))
         }
       ),
-      children: /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("th", { ...nativeProps, children: /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("th", { ...nativeProps, children: /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
         "button",
         {
-          className: (0, import_css34.cx)(
+          className: (0, import_css35.cx)(
             nativeProps.className,
-            (0, import_recipes26.th)({ size }),
-            (0, import_css34.css)({
+            (0, import_recipes27.th)({ size }),
+            (0, import_css35.css)({
               alignItems: "center",
               display: "inline-flex",
               justifyContent: "space-between",
@@ -2101,18 +2154,18 @@ function Th(props) {
 }
 
 // src/components/Td.tsx
-var import_css35 = require("@cerberus/styled-system/css");
-var import_recipes27 = require("@cerberus/styled-system/recipes");
-var import_jsx_runtime43 = require("react/jsx-runtime");
+var import_css36 = require("@cerberus/styled-system/css");
+var import_recipes28 = require("@cerberus/styled-system/recipes");
+var import_jsx_runtime44 = require("react/jsx-runtime");
 function Td(props) {
   const { size, ...nativeProps } = props;
-  return /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
     "td",
     {
       ...nativeProps,
-      className: (0, import_css35.cx)(
+      className: (0, import_css36.cx)(
         nativeProps.className,
-        (0, import_recipes27.td)({
+        (0, import_recipes28.td)({
           size
         })
       )
@@ -2121,18 +2174,18 @@ function Td(props) {
 }
 
 // src/components/Tbody.tsx
-var import_recipes28 = require("@cerberus/styled-system/recipes");
-var import_css36 = require("@cerberus/styled-system/css");
-var import_jsx_runtime44 = require("react/jsx-runtime");
+var import_recipes29 = require("@cerberus/styled-system/recipes");
+var import_css37 = require("@cerberus/styled-system/css");
+var import_jsx_runtime45 = require("react/jsx-runtime");
 function Tbody(props) {
   const { decoration, ...nativeProps } = props;
-  return /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
     "tbody",
     {
       ...nativeProps,
-      className: (0, import_css36.cx)(
+      className: (0, import_css37.cx)(
         nativeProps.className,
-        (0, import_recipes28.tbody)({
+        (0, import_recipes29.tbody)({
           decoration
         })
       )
@@ -2141,9 +2194,9 @@ function Tbody(props) {
 }
 
 // src/components/Tag.tsx
-var import_css37 = require("@cerberus/styled-system/css");
-var import_recipes29 = require("@cerberus/styled-system/recipes");
-var import_jsx_runtime45 = require("react/jsx-runtime");
+var import_css38 = require("@cerberus/styled-system/css");
+var import_recipes30 = require("@cerberus/styled-system/recipes");
+var import_jsx_runtime46 = require("react/jsx-runtime");
 function Tag(props) {
   const { shape: initShape, gradient, onClick, usage, ...nativeProps } = props;
   const palette = (props == null ? void 0 : props.palette) ?? "page";
@@ -2151,13 +2204,13 @@ function Tag(props) {
   const shape = isClosable ? "pill" : initShape;
   const closableStyles = isClosable ? closableCss : "";
   const { close: Close2 } = $cerberusIcons;
-  return /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)(
     "span",
     {
       ...nativeProps,
-      className: (0, import_css37.cx)(
+      className: (0, import_css38.cx)(
         nativeProps.className,
-        (0, import_recipes29.tag)({
+        (0, import_recipes30.tag)({
           gradient,
           palette,
           shape,
@@ -2167,47 +2220,47 @@ function Tag(props) {
       ),
       children: [
         props.children,
-        /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(Show, { when: isClosable, children: /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(Show, { when: isClosable, children: /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
           "button",
           {
             "aria-label": "Close",
-            className: (0, import_recipes29.iconButton)({
+            className: (0, import_recipes30.iconButton)({
               palette: "action",
               usage: "filled",
               size: "sm"
             }),
             onClick,
-            children: /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(Close2, {})
+            children: /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(Close2, {})
           }
         ) })
       ]
     }
   );
 }
-var closableCss = (0, import_css37.css)({
+var closableCss = (0, import_css38.css)({
   bgColor: "action.bg.active",
   color: "action.text.initial",
   paddingInlineEnd: "0"
 });
 
 // src/components/Textarea.tsx
-var import_css38 = require("@cerberus/styled-system/css");
-var import_recipes30 = require("@cerberus/styled-system/recipes");
-var import_jsx_runtime46 = require("react/jsx-runtime");
+var import_css39 = require("@cerberus/styled-system/css");
+var import_recipes31 = require("@cerberus/styled-system/recipes");
+var import_jsx_runtime47 = require("react/jsx-runtime");
 function Textarea(props) {
   const { describedBy, ...nativeProps } = props;
   const { invalid, ...fieldState } = useFieldContext();
-  return /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
     "textarea",
     {
       ...nativeProps,
       ...fieldState,
       ...describedBy && { "aria-describedby": describedBy },
       ...invalid && { "aria-invalid": true },
-      className: (0, import_css38.cx)(
+      className: (0, import_css39.cx)(
         props.className,
-        (0, import_recipes30.input)().input,
-        (0, import_css38.css)({
+        (0, import_recipes31.input)().input,
+        (0, import_css39.css)({
           pxi: "2",
           py: "2",
           resize: "vertical"
@@ -2219,43 +2272,43 @@ function Textarea(props) {
 }
 
 // src/components/Toggle.tsx
-var import_css39 = require("@cerberus/styled-system/css");
+var import_css40 = require("@cerberus/styled-system/css");
 var import_patterns15 = require("@cerberus/styled-system/patterns");
-var import_recipes31 = require("@cerberus/styled-system/recipes");
-var import_jsx_runtime47 = require("react/jsx-runtime");
+var import_recipes32 = require("@cerberus/styled-system/recipes");
+var import_jsx_runtime48 = require("react/jsx-runtime");
 function Toggle(props) {
   const { size, describedBy, ...nativeProps } = props;
-  const styles = (0, import_recipes31.toggle)({ size });
+  const styles = (0, import_recipes32.toggle)({ size });
   const { invalid, ...state } = useFieldContext();
   const Icon = $cerberusIcons.toggleChecked;
-  return /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)(
     "span",
     {
-      className: (0, import_css39.cx)("group", styles.track, (0, import_patterns15.hstack)()),
+      className: (0, import_css40.cx)("group", styles.track, (0, import_patterns15.hstack)()),
       "data-checked": props.checked || props.defaultChecked,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
           "input",
           {
             ...nativeProps,
             ...state,
             ...describedBy && { "aria-describedby": describedBy },
             ...invalid && { "aria-invalid": true },
-            className: (0, import_css39.cx)("peer", styles.input),
+            className: (0, import_css40.cx)("peer", styles.input),
             role: "switch",
             type: "checkbox"
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
           "span",
           {
-            className: (0, import_css39.cx)(
+            className: (0, import_css40.cx)(
               styles.thumb,
               (0, import_patterns15.vstack)({
                 justify: "center"
               })
             ),
-            children: /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(Icon, {})
+            children: /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(Icon, {})
           }
         )
       ]
@@ -2264,26 +2317,26 @@ function Toggle(props) {
 }
 
 // src/context/confirm-modal.tsx
-var import_react16 = require("react");
-var import_css40 = require("@cerberus/styled-system/css");
+var import_react17 = require("react");
+var import_css41 = require("@cerberus/styled-system/css");
 var import_patterns16 = require("@cerberus/styled-system/patterns");
 
 // src/hooks/useModal.ts
-var import_react15 = require("react");
+var import_react16 = require("react");
 function useModal() {
-  const modalRef = (0, import_react15.useRef)(null);
-  const [isOpen, setIsOpen] = (0, import_react15.useState)(false);
-  const show = (0, import_react15.useCallback)(() => {
+  const modalRef = (0, import_react16.useRef)(null);
+  const [isOpen, setIsOpen] = (0, import_react16.useState)(false);
+  const show = (0, import_react16.useCallback)(() => {
     var _a;
     (_a = modalRef.current) == null ? void 0 : _a.showModal();
     setIsOpen(true);
   }, []);
-  const close = (0, import_react15.useCallback)(() => {
+  const close = (0, import_react16.useCallback)(() => {
     var _a;
     (_a = modalRef.current) == null ? void 0 : _a.close();
     setIsOpen(false);
   }, []);
-  return (0, import_react15.useMemo)(() => {
+  return (0, import_react16.useMemo)(() => {
     return {
       modalRef,
       show,
@@ -2294,19 +2347,19 @@ function useModal() {
 }
 
 // src/context/confirm-modal.tsx
-var import_jsx_runtime48 = require("react/jsx-runtime");
-var ConfirmModalContext = (0, import_react16.createContext)(null);
+var import_jsx_runtime49 = require("react/jsx-runtime");
+var ConfirmModalContext = (0, import_react17.createContext)(null);
 function ConfirmModal(props) {
   const { modalRef, show, close } = useModal();
-  const resolveRef = (0, import_react16.useRef)(null);
-  const [content, setContent] = (0, import_react16.useState)(null);
+  const resolveRef = (0, import_react17.useRef)(null);
+  const [content, setContent] = (0, import_react17.useState)(null);
   const focusTrap = trapFocus(modalRef);
   const ConfirmIcon = $cerberusIcons.confirmModal;
-  const palette = (0, import_react16.useMemo)(
+  const palette = (0, import_react17.useMemo)(
     () => (content == null ? void 0 : content.kind) === "destructive" ? "danger" : "action",
     [content]
   );
-  const handleChoice = (0, import_react16.useCallback)(
+  const handleChoice = (0, import_react17.useCallback)(
     (e) => {
       var _a, _b;
       const target = e.currentTarget;
@@ -2318,7 +2371,7 @@ function ConfirmModal(props) {
     },
     [close]
   );
-  const handleShow = (0, import_react16.useCallback)(
+  const handleShow = (0, import_react17.useCallback)(
     (options) => {
       return new Promise((resolve) => {
         setContent({ ...options, kind: options.kind || "non-destructive" });
@@ -2328,42 +2381,42 @@ function ConfirmModal(props) {
     },
     [show]
   );
-  const value = (0, import_react16.useMemo)(
+  const value = (0, import_react17.useMemo)(
     () => ({
       show: handleShow
     }),
     [handleShow]
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)(ConfirmModalContext.Provider, { value, children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)(ConfirmModalContext.Provider, { value, children: [
     props.children,
-    /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)(Modal, { onKeyDown: focusTrap, ref: modalRef, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)(ModalHeader, { children: [
-        /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
+    /* @__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.jsxs)(ModalHeader, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
           "div",
           {
             className: (0, import_patterns16.hstack)({
               justify: "center",
               w: "full"
             }),
-            children: /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
+            children: /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
               Show,
               {
                 when: palette === "danger",
-                fallback: /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
+                fallback: /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
                   Avatar,
                   {
                     ariaLabel: "",
                     gradient: "charon-light",
-                    icon: /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(ConfirmIcon, { size: 24 }),
+                    icon: /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(ConfirmIcon, { size: 24 }),
                     src: ""
                   }
                 ),
-                children: /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
+                children: /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
                   Avatar,
                   {
                     ariaLabel: "",
                     gradient: "hades-dark",
-                    icon: /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(ConfirmIcon, { size: 24 }),
+                    icon: /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(ConfirmIcon, { size: 24 }),
                     src: ""
                   }
                 )
@@ -2371,21 +2424,21 @@ function ConfirmModal(props) {
             )
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(ModalHeading, { children: content == null ? void 0 : content.heading }),
-        /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(ModalDescription, { children: content == null ? void 0 : content.description })
+        /* @__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_runtime48.jsxs)(
+      /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)(
         "div",
         {
           className: (0, import_patterns16.hstack)({
             gap: "4"
           }),
           children: [
-            /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
               Button,
               {
                 autoFocus: true,
-                className: (0, import_css40.css)({
+                className: (0, import_css41.css)({
                   w: "1/2"
                 }),
                 name: "confirm",
@@ -2395,10 +2448,10 @@ function ConfirmModal(props) {
                 children: content == null ? void 0 : content.actionText
               }
             ),
-            /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
               Button,
               {
-                className: (0, import_css40.css)({
+                className: (0, import_css41.css)({
                   w: "1/2"
                 }),
                 name: "cancel",
@@ -2415,7 +2468,7 @@ function ConfirmModal(props) {
   ] });
 }
 function useConfirmModal() {
-  const context = (0, import_react16.useContext)(ConfirmModalContext);
+  const context = (0, import_react17.useContext)(ConfirmModalContext);
   if (context === null) {
     throw new Error(
       "useConfirmModal must be used within a ConfirmModal Provider"
@@ -2424,23 +2477,131 @@ function useConfirmModal() {
   return context;
 }
 
+// src/context/cta-modal.tsx
+var import_react18 = require("react");
+var import_jsx = require("@cerberus/styled-system/jsx");
+var import_css42 = require("@cerberus/styled-system/css");
+var import_jsx2 = require("@cerberus/styled-system/jsx");
+var import_jsx_runtime50 = require("react/jsx-runtime");
+var CTAModalContext = (0, import_react18.createContext)(null);
+function CTAModal(props) {
+  var _a, _b;
+  const { modalRef, show, close } = useModal();
+  const [content, setContent] = (0, import_react18.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_react18.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_react18.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_react18.useMemo)(
+    () => ({
+      show: handleShow
+    }),
+    [handleShow]
+  );
+  return /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)(CTAModalContext.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.jsx)(
+        "span",
+        {
+          className: (0, import_css42.css)({
+            padding: "md",
+            position: "absolute",
+            right: 0,
+            top: 0,
+            zIndex: "decorator"
+          }),
+          children: /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(IconButton, { ariaLabel: "Close modal", onClick: close, children: /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(CloseIcon, {}) })
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)(ModalHeader, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(import_jsx.HStack, { justify: "center", w: "full", children: /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
+          Avatar,
+          {
+            ariaLabel: "",
+            gradient: "charon-light",
+            icon: /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
+              Show,
+              {
+                when: Boolean(confirmIcon),
+                fallback: /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(FallbackIcon, { size: 24 }),
+                children: confirmIcon
+              }
+            ),
+            src: ""
+          }
+        ) }),
+        /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)(import_jsx2.VStack, { gap: "lg", w: "full", children: [
+          /* @__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_runtime50.jsx)(import_jsx.HStack, { gap: "md", pt: "sm", w: "full", children: /* @__PURE__ */ (0, import_jsx_runtime50.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_runtime50.jsx)(
+        Button,
+        {
+          "data-index": index,
+          className: (0, import_css42.css)({
+            w: "1/2"
+          }),
+          onClick: handleActionClick,
+          shape: "rounded",
+          usage: "outlined",
+          children: action.text
+        },
+        index
+      )) }) })
+    ] }) })
+  ] });
+}
+function useCTAModal() {
+  const context = (0, import_react18.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_react17 = require("react");
+var import_react19 = require("react");
 var import_patterns17 = require("@cerberus/styled-system/patterns");
-var import_recipes32 = require("@cerberus/styled-system/recipes");
-var import_css41 = require("@cerberus/styled-system/css");
-var import_jsx_runtime49 = require("react/jsx-runtime");
-var NotificationsContext = (0, import_react17.createContext)(null);
+var import_recipes33 = require("@cerberus/styled-system/recipes");
+var import_css43 = require("@cerberus/styled-system/css");
+var import_jsx_runtime51 = require("react/jsx-runtime");
+var NotificationsContext = (0, import_react19.createContext)(null);
 function NotificationCenter(props) {
-  const [activeNotifications, setActiveNotifications] = (0, import_react17.useState)([]);
-  const styles = (0, import_recipes32.notification)();
-  const handleNotify = (0, import_react17.useCallback)((options) => {
+  const [activeNotifications, setActiveNotifications] = (0, import_react19.useState)([]);
+  const styles = (0, import_recipes33.notification)();
+  const handleNotify = (0, import_react19.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_react19.useCallback)((e) => {
     const target = e.currentTarget;
     setActiveNotifications((prev) => {
       const item = prev.find((option) => option.id === target.value);
@@ -2448,7 +2609,7 @@ function NotificationCenter(props) {
       return prev.filter((option) => option.id !== target.value);
     });
   }, []);
-  const handleCloseAll = (0, import_react17.useCallback)(() => {
+  const handleCloseAll = (0, import_react19.useCallback)(() => {
     setActiveNotifications((prev) => {
       prev.forEach((item) => {
         if (item.onClose) item.onClose();
@@ -2456,19 +2617,19 @@ function NotificationCenter(props) {
       return [];
     });
   }, []);
-  const value = (0, import_react17.useMemo)(
+  const value = (0, import_react19.useMemo)(
     () => ({
       notify: handleNotify
     }),
     [handleNotify]
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)(NotificationsContext.Provider, { value, children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime51.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_runtime51.jsx)(Show, { when: activeNotifications.length > 0, children: /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(Portal, { container: props.container, children: /* @__PURE__ */ (0, import_jsx_runtime51.jsxs)("div", { className: styles.center, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(Show, { when: activeNotifications.length >= 4, children: /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
         Button,
         {
-          className: (0, import_css41.cx)(styles.closeAll, (0, import_patterns17.animateIn)()),
+          className: (0, import_css43.cx)(styles.closeAll, (0, import_patterns17.animateIn)()),
           onClick: handleCloseAll,
           palette: "action",
           shape: "rounded",
@@ -2477,7 +2638,7 @@ function NotificationCenter(props) {
           children: "Close all"
         }
       ) }),
-      /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
         "div",
         {
           className: (0, import_patterns17.vstack)({
@@ -2487,7 +2648,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_runtime51.jsx)(
             MatchNotification,
             {
               ...option,
@@ -2504,7 +2665,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_runtime51.jsxs)(
         Notification,
         {
           id,
@@ -2512,14 +2673,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_runtime51.jsx)(NotificationHeading, { palette: "success", children: heading }),
+            /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(NotificationDescription, { palette: "success", children: description })
           ]
         },
         id
       );
     case "warning":
-      return /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)(
+      return /* @__PURE__ */ (0, import_jsx_runtime51.jsxs)(
         Notification,
         {
           id,
@@ -2527,27 +2688,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_runtime51.jsx)(NotificationHeading, { palette: "warning", children: heading }),
+            /* @__PURE__ */ (0, import_jsx_runtime51.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_runtime51.jsxs)(Notification, { id, onClose, open: true, palette: "danger", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(NotificationHeading, { palette: "danger", children: heading }),
+        /* @__PURE__ */ (0, import_jsx_runtime51.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_runtime51.jsxs)(Notification, { id, onClose, open: true, palette: "info", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(NotificationHeading, { palette: "info", children: heading }),
+        /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(NotificationDescription, { palette: "info", children: description })
       ] }, id);
   }
 }
 function useNotificationCenter() {
-  const context = (0, import_react17.useContext)(NotificationsContext);
+  const context = (0, import_react19.useContext)(NotificationsContext);
   if (!context) {
     throw new Error(
       "useNotificationCenter must be used within a NotificationsProvider"
@@ -2557,33 +2718,33 @@ function useNotificationCenter() {
 }
 
 // src/context/prompt-modal.tsx
-var import_react18 = require("react");
-var import_css42 = require("@cerberus/styled-system/css");
+var import_react20 = require("react");
+var import_css44 = 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_runtime52 = require("react/jsx-runtime");
+var PromptModalContext = (0, import_react20.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_react20.useRef)(null);
+  const [content, setContent] = (0, import_react20.useState)(null);
+  const [inputValue, setInputValue] = (0, import_react20.useState)("");
   const focusTrap = trapFocus(modalRef);
   const PromptIcon = $cerberusIcons.promptModal;
-  const isValid = (0, import_react18.useMemo)(
+  const isValid = (0, import_react20.useMemo)(
     () => inputValue === (content == null ? void 0 : content.key),
     [inputValue, content]
   );
-  const palette = (0, import_react18.useMemo)(
+  const palette = (0, import_react20.useMemo)(
     () => (content == null ? void 0 : content.kind) === "destructive" ? "danger" : "action",
     [content]
   );
-  const handleChange = (0, import_react18.useCallback)(
+  const handleChange = (0, import_react20.useCallback)(
     (e) => {
       setInputValue(e.currentTarget.value);
     },
     [content]
   );
-  const handleChoice = (0, import_react18.useCallback)(
+  const handleChoice = (0, import_react20.useCallback)(
     (e) => {
       var _a;
       const target = e.currentTarget;
@@ -2594,7 +2755,7 @@ function PromptModal(props) {
     },
     [inputValue, close]
   );
-  const handleShow = (0, import_react18.useCallback)(
+  const handleShow = (0, import_react20.useCallback)(
     (options) => {
       return new Promise((resolve) => {
         setContent({ ...options, kind: options.kind || "non-destructive" });
@@ -2604,42 +2765,42 @@ function PromptModal(props) {
     },
     [show]
   );
-  const value = (0, import_react18.useMemo)(
+  const value = (0, import_react20.useMemo)(
     () => ({
       show: handleShow
     }),
     [handleShow]
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)(PromptModalContext.Provider, { value, children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime52.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_runtime52.jsx)(Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime52.jsxs)(Modal, { onKeyDown: focusTrap, ref: modalRef, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime52.jsxs)(ModalHeader, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(
           "div",
           {
             className: (0, import_patterns18.hstack)({
               justify: "center",
               w: "full"
             }),
-            children: /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
+            children: /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(
               Show,
               {
                 when: palette === "danger",
-                fallback: /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
+                fallback: /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(
                   Avatar,
                   {
                     ariaLabel: "",
                     gradient: "charon-light",
-                    icon: /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(PromptIcon, { size: 24 }),
+                    icon: /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(PromptIcon, { size: 24 }),
                     src: ""
                   }
                 ),
-                children: /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
+                children: /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(
                   Avatar,
                   {
                     ariaLabel: "",
                     gradient: "hades-dark",
-                    icon: /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(PromptIcon, { size: 24 }),
+                    icon: /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(PromptIcon, { size: 24 }),
                     src: ""
                   }
                 )
@@ -2647,10 +2808,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_runtime52.jsx)(ModalHeading, { children: content == null ? void 0 : content.heading }),
+        /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(ModalDescription, { children: content == null ? void 0 : content.description })
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(
         "div",
         {
           className: (0, import_patterns18.vstack)({
@@ -2658,11 +2819,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_runtime52.jsxs)(Field, { invalid: !isValid, children: [
+            /* @__PURE__ */ (0, import_jsx_runtime52.jsxs)(
               Label,
               {
-                className: (0, import_css42.css)({
+                className: (0, import_css44.css)({
                   gap: 1,
                   justifyContent: "flex-start"
                 }),
@@ -2670,10 +2831,10 @@ function PromptModal(props) {
                 size: "md",
                 children: [
                   "Type",
-                  /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
+                  /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(
                     "strong",
                     {
-                      className: (0, import_css42.css)({
+                      className: (0, import_css44.css)({
                         textTransform: "uppercase"
                       }),
                       children: content == null ? void 0 : content.key
@@ -2683,7 +2844,7 @@ function PromptModal(props) {
                 ]
               }
             ),
-            /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(
               Input,
               {
                 id: "confirm",
@@ -2695,7 +2856,7 @@ function PromptModal(props) {
           ] })
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)(
+      /* @__PURE__ */ (0, import_jsx_runtime52.jsxs)(
         "div",
         {
           className: (0, import_patterns18.hstack)({
@@ -2703,11 +2864,11 @@ function PromptModal(props) {
             gap: "4"
           }),
           children: [
-            /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(
               Button,
               {
                 autoFocus: true,
-                className: (0, import_css42.css)({
+                className: (0, import_css44.css)({
                   w: "1/2"
                 }),
                 disabled: !isValid,
@@ -2718,10 +2879,10 @@ function PromptModal(props) {
                 children: content == null ? void 0 : content.actionText
               }
             ),
-            /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(
               Button,
               {
-                className: (0, import_css42.css)({
+                className: (0, import_css44.css)({
                   w: "1/2"
                 }),
                 name: "cancel",
@@ -2738,7 +2899,7 @@ function PromptModal(props) {
   ] });
 }
 function usePromptModal() {
-  const context = (0, import_react18.useContext)(PromptModalContext);
+  const context = (0, import_react20.useContext)(PromptModalContext);
   if (context === null) {
     throw new Error("usePromptModal must be used within a PromptModal Provider");
   }
@@ -2746,50 +2907,50 @@ function usePromptModal() {
 }
 
 // src/context/theme.tsx
-var import_react20 = require("react");
+var import_react22 = require("react");
 
 // src/hooks/useTheme.ts
-var import_react19 = require("react");
+var import_react21 = 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_react21.useState)(defaultTheme);
+  const [colorMode, setColorMode] = (0, import_react21.useState)(defaultColorMode);
+  const handleThemeChange = (0, import_react21.useCallback)(
     (newTheme) => {
       setTheme(newTheme);
       updateTheme == null ? void 0 : updateTheme(newTheme);
     },
     [updateTheme]
   );
-  const handleColorModeChange = (0, import_react19.useCallback)(
+  const handleColorModeChange = (0, import_react21.useCallback)(
     (newMode) => {
       setColorMode(newMode);
       updateMode == null ? void 0 : updateMode(newMode);
     },
     [updateMode]
   );
-  (0, import_react19.useLayoutEffect)(() => {
+  (0, import_react21.useLayoutEffect)(() => {
     const theme2 = localStorage.getItem(THEME_KEY);
     if (theme2) {
       setTheme(theme2);
     }
   }, []);
-  (0, import_react19.useLayoutEffect)(() => {
+  (0, import_react21.useLayoutEffect)(() => {
     const mode = localStorage.getItem(MODE_KEY);
     if (mode) {
       setColorMode(mode);
     }
   }, []);
-  (0, import_react19.useEffect)(() => {
+  (0, import_react21.useEffect)(() => {
     const root = document.documentElement;
     root.dataset.pandaTheme = theme;
     if (cache) {
       localStorage.setItem(THEME_KEY, theme);
     }
   }, [theme, cache]);
-  (0, import_react19.useEffect)(() => {
+  (0, import_react21.useEffect)(() => {
     const root = document.documentElement;
     if (colorMode === "system") {
       root.dataset.colorMode = window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
@@ -2800,7 +2961,7 @@ function useTheme(defaultTheme = "cerberus", defaultColorMode = "light", options
       localStorage.setItem(MODE_KEY, colorMode);
     }
   }, [colorMode, cache]);
-  return (0, import_react19.useMemo)(
+  return (0, import_react21.useMemo)(
     () => ({
       theme,
       mode: colorMode,
@@ -2812,8 +2973,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_runtime53 = require("react/jsx-runtime");
+var ThemeContext = (0, import_react22.createContext)(
   null
 );
 function ThemeProvider(props) {
@@ -2822,10 +2983,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_runtime53.jsx)(ThemeContext.Provider, { value: state, children: props.children });
 }
 function useThemeContext() {
-  const context = (0, import_react20.useContext)(ThemeContext);
+  const context = (0, import_react22.useContext)(ThemeContext);
   if (!context) {
     throw new Error("useThemeContext must be used within a ThemeProvider");
   }
@@ -2833,11 +2994,11 @@ function useThemeContext() {
 }
 
 // src/hooks/useToggle.ts
-var import_react21 = require("react");
+var import_react23 = require("react");
 function useToggle(options) {
-  const [checked, setChecked] = (0, import_react21.useState)((options == null ? void 0 : options.checked) ?? "");
+  const [checked, setChecked] = (0, import_react23.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_react23.useCallback)(
     (e) => {
       const target = e.currentTarget;
       setChecked((prev) => {
@@ -2847,7 +3008,13 @@ function useToggle(options) {
     },
     [onChange]
   );
-  return (0, import_react21.useMemo)(() => ({ checked, handleChange }), [checked, handleChange]);
+  return (0, import_react23.useMemo)(() => ({ checked, handleChange }), [checked, handleChange]);
+}
+
+// src/utils/index.ts
+function formatNotifyCount(count) {
+  if (count > 99) return "99+";
+  return count.toString();
 }
 
 // src/index.ts
@@ -2860,6 +3027,7 @@ __reExport(src_exports, require("@dnd-kit/core"), module.exports);
   AdmonitionHeading,
   Avatar,
   Button,
+  CTAModal,
   Checkbox,
   CircularProgress,
   ConfirmModal,
@@ -2877,6 +3045,13 @@ __reExport(src_exports, require("@dnd-kit/core"), module.exports);
   Label,
   Legend,
   MODE_KEY,
+  Menu,
+  MenuContent,
+  MenuGroupLabel,
+  MenuItem,
+  MenuItemGroup,
+  MenuSeparator,
+  MenuTrigger,
   Modal,
   ModalDescription,
   ModalHeader,
@@ -2915,9 +3090,11 @@ __reExport(src_exports, require("@dnd-kit/core"), module.exports);
   Tr,
   createNavTriggerProps,
   defineIcons,
+  formatNotifyCount,
   getPosition,
   processStatus,
   trapFocus,
+  useCTAModal,
   useConfirmModal,
   useFeatureFlags,
   useFieldContext,