@cerberus-design/react 0.13.2-next-4bdc7c3 → 0.13.2-next-46f23d2

package/build/legacy/index.cjs

@@ -89,6 +89,7 @@ __export(src_exports, {
   Tag: () => Tag,
   Tbody: () => Tbody,
   Td: () => Td,
+  Text: () => Text,
   Textarea: () => Textarea,
   Th: () => Th,
   Thead: () => Thead,
@@ -2336,14 +2337,45 @@ var closableCss = (0, import_css40.css)({
   paddingInlineEnd: "0"
 });
 
+// src/components/Text.tsx
+var import_jsx = require("@cerberus-design/styled-system/jsx");
+var import_jsx_runtime49 = require("react/jsx-runtime");
+function Text(props) {
+  const { as = "p", ...pandaJSXProps } = props;
+  switch (as) {
+    case "h1":
+      return /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(import_jsx.H1, { ...pandaJSXProps });
+    case "h2":
+      return /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(import_jsx.H2, { ...pandaJSXProps });
+    case "h3":
+      return /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(import_jsx.H3, { ...pandaJSXProps });
+    case "h4":
+      return /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(import_jsx.H4, { ...pandaJSXProps });
+    case "h5":
+      return /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(import_jsx.H5, { ...pandaJSXProps });
+    case "h6":
+      return /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(import_jsx.H6, { ...pandaJSXProps });
+    case "strong":
+      return /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(import_jsx.Strong, { ...pandaJSXProps });
+    case "em":
+      return /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(import_jsx.Em, { ...pandaJSXProps });
+    case "small":
+      return /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(import_jsx.Small, { ...pandaJSXProps });
+    case "span":
+      return /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(import_jsx.Span, { ...pandaJSXProps });
+    default:
+      return /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(import_jsx.P, { ...pandaJSXProps });
+  }
+}
+
 // src/components/Textarea.tsx
 var import_css41 = require("@cerberus/styled-system/css");
 var import_recipes32 = require("@cerberus/styled-system/recipes");
-var import_jsx_runtime49 = require("react/jsx-runtime");
+var import_jsx_runtime50 = require("react/jsx-runtime");
 function Textarea(props) {
   const { describedBy, ...nativeProps } = props;
   const { invalid, ...fieldState } = useFieldContext();
-  return /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
     "textarea",
     {
       ...nativeProps,
@@ -2368,19 +2400,19 @@ function Textarea(props) {
 var import_css42 = require("@cerberus/styled-system/css");
 var import_patterns15 = require("@cerberus/styled-system/patterns");
 var import_recipes33 = require("@cerberus/styled-system/recipes");
-var import_jsx_runtime50 = require("react/jsx-runtime");
+var import_jsx_runtime51 = require("react/jsx-runtime");
 function Toggle(props) {
   const { size, describedBy, ...nativeProps } = props;
   const styles = (0, import_recipes33.toggle)({ size });
   const { invalid, ...state } = useFieldContext();
   const Icon = $cerberusIcons.toggleChecked;
-  return /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime51.jsxs)(
     "span",
     {
       className: (0, import_css42.cx)("group", styles.track, (0, import_patterns15.hstack)()),
       "data-checked": props.checked || props.defaultChecked,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
           "input",
           {
             ...nativeProps,
@@ -2392,7 +2424,7 @@ function Toggle(props) {
             type: "checkbox"
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
           "span",
           {
             className: (0, import_css42.cx)(
@@ -2401,7 +2433,7 @@ function Toggle(props) {
                 justify: "center"
               })
             ),
-            children: /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(Icon, {})
+            children: /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(Icon, {})
           }
         )
       ]
@@ -2413,22 +2445,22 @@ function Toggle(props) {
 var import_tooltip = require("@ark-ui/react/tooltip");
 var import_css43 = require("@cerberus/styled-system/css");
 var import_recipes34 = require("@cerberus/styled-system/recipes");
-var import_jsx_runtime51 = require("react/jsx-runtime");
+var import_jsx_runtime52 = require("react/jsx-runtime");
 function Tooltip(props) {
   const { content, children, asChild, ...nativeProps } = props;
   const styles = (0, import_recipes34.tooltip)();
   const position = {
     placement: props.position || "top"
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime51.jsxs)(import_tooltip.Tooltip.Root, { openDelay: 400, positioning: position, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(import_tooltip.Tooltip.Trigger, { className: styles.trigger, asChild, children }),
-    /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(import_tooltip.Tooltip.Positioner, { children: /* @__PURE__ */ (0, import_jsx_runtime51.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime52.jsxs)(import_tooltip.Tooltip.Root, { openDelay: 400, positioning: position, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(import_tooltip.Tooltip.Trigger, { className: styles.trigger, asChild, children }),
+    /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(import_tooltip.Tooltip.Positioner, { children: /* @__PURE__ */ (0, import_jsx_runtime52.jsxs)(
       import_tooltip.Tooltip.Content,
       {
         ...nativeProps,
         className: (0, import_css43.cx)(nativeProps.className, styles.content),
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(import_tooltip.Tooltip.Arrow, { className: styles.arrow, children: /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(import_tooltip.Tooltip.ArrowTip, { className: styles.arrowTip }) }),
+          /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(import_tooltip.Tooltip.Arrow, { className: styles.arrow, children: /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(import_tooltip.Tooltip.ArrowTip, { className: styles.arrowTip }) }),
           content
         ]
       }
@@ -2467,8 +2499,8 @@ function useModal() {
 }
 
 // src/context/confirm-modal.tsx
-var import_jsx = require("@cerberus/styled-system/jsx");
-var import_jsx_runtime52 = require("react/jsx-runtime");
+var import_jsx2 = require("@cerberus/styled-system/jsx");
+var import_jsx_runtime53 = require("react/jsx-runtime");
 var ConfirmModalContext = (0, import_react19.createContext)(null);
 function ConfirmModal(props) {
   const { modalRef, show, close } = useModal();
@@ -2509,36 +2541,36 @@ function ConfirmModal(props) {
     }),
     [handleShow]
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime52.jsxs)(ConfirmModalContext.Provider, { value, children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime53.jsxs)(ConfirmModalContext.Provider, { value, children: [
     props.children,
-    /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(Modal, { onKeyDown: focusTrap, ref: modalRef, children: /* @__PURE__ */ (0, import_jsx_runtime52.jsxs)(import_jsx.VStack, { gap: "xl", w: "full", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime52.jsxs)(ModalHeader, { children: [
-        /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(Modal, { onKeyDown: focusTrap, ref: modalRef, children: /* @__PURE__ */ (0, import_jsx_runtime53.jsxs)(import_jsx2.VStack, { gap: "xl", w: "full", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime53.jsxs)(ModalHeader, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
           "div",
           {
             className: (0, import_patterns16.hstack)({
               justify: "center",
               w: "full"
             }),
-            children: /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(
+            children: /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
               Show,
               {
                 when: palette === "danger",
-                fallback: /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(
+                fallback: /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
                   Avatar,
                   {
                     ariaLabel: "",
                     gradient: "charon-light",
-                    icon: /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(ConfirmIcon, { size: 24 }),
+                    icon: /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(ConfirmIcon, { size: 24 }),
                     src: ""
                   }
                 ),
-                children: /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(
+                children: /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
                   Avatar,
                   {
                     ariaLabel: "",
                     gradient: "hades-dark",
-                    icon: /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(ConfirmIcon, { size: 24 }),
+                    icon: /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(ConfirmIcon, { size: 24 }),
                     src: ""
                   }
                 )
@@ -2546,11 +2578,11 @@ function ConfirmModal(props) {
             )
           }
         ),
-        /* @__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_runtime53.jsx)(ModalHeading, { children: content == null ? void 0 : content.heading }),
+        /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(ModalDescription, { children: content == null ? void 0 : content.description })
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime52.jsxs)(import_jsx.HStack, { gap: "4", w: "full", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime53.jsxs)(import_jsx2.HStack, { gap: "4", w: "full", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
           Button,
           {
             autoFocus: true,
@@ -2564,7 +2596,7 @@ function ConfirmModal(props) {
             children: content == null ? void 0 : content.actionText
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
           Button,
           {
             className: (0, import_css44.css)({
@@ -2593,10 +2625,10 @@ function useConfirmModal() {
 
 // src/context/cta-modal.tsx
 var import_react20 = require("react");
-var import_jsx2 = require("@cerberus/styled-system/jsx");
-var import_css45 = require("@cerberus/styled-system/css");
 var import_jsx3 = require("@cerberus/styled-system/jsx");
-var import_jsx_runtime53 = require("react/jsx-runtime");
+var import_css45 = require("@cerberus/styled-system/css");
+var import_jsx4 = require("@cerberus/styled-system/jsx");
+var import_jsx_runtime54 = require("react/jsx-runtime");
 var CTAModalContext = (0, import_react20.createContext)(null);
 function CTAModal(props) {
   var _a, _b;
@@ -2623,9 +2655,8 @@ function CTAModal(props) {
     (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);
-      }
+      const { onClick } = action || {};
+      onClick == null ? void 0 : onClick(event);
       close();
     },
     [content, close]
@@ -2636,10 +2667,10 @@ function CTAModal(props) {
     }),
     [handleShow]
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime53.jsxs)(CTAModalContext.Provider, { value, children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)(CTAModalContext.Provider, { value, children: [
     props.children,
-    /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime53.jsxs)(Modal, { onKeyDown: focusTrap, ref: modalRef, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)(Modal, { onKeyDown: focusTrap, ref: modalRef, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(
         "span",
         {
           className: (0, import_css45.css)({
@@ -2649,31 +2680,31 @@ function CTAModal(props) {
             top: 0,
             zIndex: "decorator"
           }),
-          children: /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(IconButton, { ariaLabel: "Close modal", onClick: close, children: /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(CloseIcon, {}) })
+          children: /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(IconButton, { ariaLabel: "Close modal", onClick: close, children: /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(CloseIcon, {}) })
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime53.jsxs)(import_jsx3.VStack, { gap: "xl", w: "full", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(ModalHeader, { children: /* @__PURE__ */ (0, import_jsx_runtime53.jsxs)(import_jsx3.VStack, { gap: "lg", w: "full", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)(import_jsx4.VStack, { gap: "xl", w: "full", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(ModalHeader, { children: /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)(import_jsx4.VStack, { gap: "lg", w: "full", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(
             Avatar,
             {
               ariaLabel: "",
               gradient: "charon-light",
-              icon: /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
+              icon: /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(
                 Show,
                 {
                   when: Boolean(confirmIcon),
-                  fallback: /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(FallbackIcon, { size: 24 }),
+                  fallback: /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(FallbackIcon, { size: 24 }),
                   children: confirmIcon
                 }
               ),
               src: ""
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(ModalHeading, { children: content == null ? void 0 : content.heading }),
-          /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(ModalDescription, { children: content == null ? void 0 : content.description })
+          /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(ModalHeading, { children: content == null ? void 0 : content.heading }),
+          /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(ModalDescription, { children: content == null ? void 0 : content.description })
         ] }) }),
-        /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(import_jsx2.HStack, { gap: "md", w: "full", children: /* @__PURE__ */ (0, import_jsx_runtime53.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_runtime53.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(import_jsx3.HStack, { gap: "md", w: "full", children: /* @__PURE__ */ (0, import_jsx_runtime54.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_runtime54.jsx)(
           Button,
           {
             "data-index": index,
@@ -2704,7 +2735,7 @@ var import_react21 = require("react");
 var import_patterns17 = require("@cerberus/styled-system/patterns");
 var import_recipes35 = require("@cerberus/styled-system/recipes");
 var import_css46 = require("@cerberus/styled-system/css");
-var import_jsx_runtime54 = require("react/jsx-runtime");
+var import_jsx_runtime55 = require("react/jsx-runtime");
 var NotificationsContext = (0, import_react21.createContext)(null);
 function NotificationCenter(props) {
   const [activeNotifications, setActiveNotifications] = (0, import_react21.useState)([]);
@@ -2737,10 +2768,10 @@ function NotificationCenter(props) {
     }),
     [handleNotify]
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)(NotificationsContext.Provider, { value, children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime55.jsxs)(NotificationsContext.Provider, { value, children: [
     props.children,
-    /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(Show, { when: activeNotifications.length > 0, children: /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(Portal, { container: props.container, children: /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)("div", { className: styles.center, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(Show, { when: activeNotifications.length >= 4, children: /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(Show, { when: activeNotifications.length > 0, children: /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(Portal, { container: props.container, children: /* @__PURE__ */ (0, import_jsx_runtime55.jsxs)("div", { className: styles.center, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(Show, { when: activeNotifications.length >= 4, children: /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(
         Button,
         {
           className: (0, import_css46.cx)(styles.closeAll, (0, import_patterns17.animateIn)()),
@@ -2752,7 +2783,7 @@ function NotificationCenter(props) {
           children: "Close all"
         }
       ) }),
-      /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(
         "div",
         {
           className: (0, import_patterns17.vstack)({
@@ -2762,7 +2793,7 @@ function NotificationCenter(props) {
           style: {
             alignItems: "flex-end"
           },
-          children: activeNotifications.map((option) => /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(
+          children: activeNotifications.map((option) => /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(
             MatchNotification,
             {
               ...option,
@@ -2779,7 +2810,7 @@ function MatchNotification(props) {
   const { palette, id, onClose, heading, description } = props;
   switch (palette) {
     case "success":
-      return /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)(
+      return /* @__PURE__ */ (0, import_jsx_runtime55.jsxs)(
         Notification,
         {
           id,
@@ -2787,14 +2818,14 @@ function MatchNotification(props) {
           open: true,
           palette: "success",
           children: [
-            /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(NotificationHeading, { palette: "success", children: heading }),
-            /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(NotificationDescription, { palette: "success", children: description })
+            /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(NotificationHeading, { palette: "success", children: heading }),
+            /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(NotificationDescription, { palette: "success", children: description })
           ]
         },
         id
       );
     case "warning":
-      return /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)(
+      return /* @__PURE__ */ (0, import_jsx_runtime55.jsxs)(
         Notification,
         {
           id,
@@ -2802,22 +2833,22 @@ function MatchNotification(props) {
           open: true,
           palette: "warning",
           children: [
-            /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(NotificationHeading, { palette: "warning", children: heading }),
-            /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(NotificationDescription, { palette: "warning", children: description })
+            /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(NotificationHeading, { palette: "warning", children: heading }),
+            /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(NotificationDescription, { palette: "warning", children: description })
           ]
         },
         id
       );
     case "danger":
-      return /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)(Notification, { id, onClose, open: true, palette: "danger", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(NotificationHeading, { palette: "danger", children: heading }),
-        /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(NotificationDescription, { palette: "danger", children: description })
+      return /* @__PURE__ */ (0, import_jsx_runtime55.jsxs)(Notification, { id, onClose, open: true, palette: "danger", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(NotificationHeading, { palette: "danger", children: heading }),
+        /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(NotificationDescription, { palette: "danger", children: description })
       ] }, id);
     case "info":
     default:
-      return /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)(Notification, { id, onClose, open: true, palette: "info", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(NotificationHeading, { palette: "info", children: heading }),
-        /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(NotificationDescription, { palette: "info", children: description })
+      return /* @__PURE__ */ (0, import_jsx_runtime55.jsxs)(Notification, { id, onClose, open: true, palette: "info", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(NotificationHeading, { palette: "info", children: heading }),
+        /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(NotificationDescription, { palette: "info", children: description })
       ] }, id);
   }
 }
@@ -2835,7 +2866,7 @@ function useNotificationCenter() {
 var import_react22 = require("react");
 var import_css47 = require("@cerberus/styled-system/css");
 var import_patterns18 = require("@cerberus/styled-system/patterns");
-var import_jsx_runtime55 = require("react/jsx-runtime");
+var import_jsx_runtime56 = require("react/jsx-runtime");
 var PromptModalContext = (0, import_react22.createContext)(null);
 function PromptModal(props) {
   const { modalRef, show, close } = useModal();
@@ -2885,36 +2916,36 @@ function PromptModal(props) {
     }),
     [handleShow]
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime55.jsxs)(PromptModalContext.Provider, { value, children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime56.jsxs)(PromptModalContext.Provider, { value, children: [
     props.children,
-    /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime55.jsxs)(Modal, { onKeyDown: focusTrap, ref: modalRef, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime55.jsxs)(ModalHeader, { children: [
-        /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime56.jsxs)(Modal, { onKeyDown: focusTrap, ref: modalRef, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime56.jsxs)(ModalHeader, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(
           "div",
           {
             className: (0, import_patterns18.hstack)({
               justify: "center",
               w: "full"
             }),
-            children: /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(
+            children: /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(
               Show,
               {
                 when: palette === "danger",
-                fallback: /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(
+                fallback: /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(
                   Avatar,
                   {
                     ariaLabel: "",
                     gradient: "charon-light",
-                    icon: /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(PromptIcon, { size: 24 }),
+                    icon: /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(PromptIcon, { size: 24 }),
                     src: ""
                   }
                 ),
-                children: /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(
+                children: /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(
                   Avatar,
                   {
                     ariaLabel: "",
                     gradient: "hades-dark",
-                    icon: /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(PromptIcon, { size: 24 }),
+                    icon: /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(PromptIcon, { size: 24 }),
                     src: ""
                   }
                 )
@@ -2922,10 +2953,10 @@ function PromptModal(props) {
             )
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(ModalHeading, { children: content == null ? void 0 : content.heading }),
-        /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(ModalDescription, { children: content == null ? void 0 : content.description })
+        /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(ModalHeading, { children: content == null ? void 0 : content.heading }),
+        /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(ModalDescription, { children: content == null ? void 0 : content.description })
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(
         "div",
         {
           className: (0, import_patterns18.vstack)({
@@ -2933,8 +2964,8 @@ function PromptModal(props) {
             mt: "4",
             mb: "8"
           }),
-          children: /* @__PURE__ */ (0, import_jsx_runtime55.jsxs)(Field, { invalid: !isValid, children: [
-            /* @__PURE__ */ (0, import_jsx_runtime55.jsxs)(
+          children: /* @__PURE__ */ (0, import_jsx_runtime56.jsxs)(Field, { invalid: !isValid, children: [
+            /* @__PURE__ */ (0, import_jsx_runtime56.jsxs)(
               Label,
               {
                 className: (0, import_css47.css)({
@@ -2945,7 +2976,7 @@ function PromptModal(props) {
                 size: "md",
                 children: [
                   "Type",
-                  /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(
+                  /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(
                     "strong",
                     {
                       className: (0, import_css47.css)({
@@ -2958,7 +2989,7 @@ function PromptModal(props) {
                 ]
               }
             ),
-            /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(
               Input,
               {
                 id: "confirm",
@@ -2970,7 +3001,7 @@ function PromptModal(props) {
           ] })
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime55.jsxs)(
+      /* @__PURE__ */ (0, import_jsx_runtime56.jsxs)(
         "div",
         {
           className: (0, import_patterns18.hstack)({
@@ -2978,7 +3009,7 @@ function PromptModal(props) {
             gap: "4"
           }),
           children: [
-            /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(
               Button,
               {
                 autoFocus: true,
@@ -2993,7 +3024,7 @@ function PromptModal(props) {
                 children: content == null ? void 0 : content.actionText
               }
             ),
-            /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(
               Button,
               {
                 className: (0, import_css47.css)({
@@ -3087,7 +3118,7 @@ function useTheme(defaultTheme = "cerberus", defaultColorMode = "light", options
 }
 
 // src/context/theme.tsx
-var import_jsx_runtime56 = require("react/jsx-runtime");
+var import_jsx_runtime57 = require("react/jsx-runtime");
 var ThemeContext = (0, import_react24.createContext)(
   null
 );
@@ -3097,7 +3128,7 @@ function ThemeProvider(props) {
     updateMode: props.updateMode,
     updateTheme: props.updateTheme
   });
-  return /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(ThemeContext.Provider, { value: state, children: props.children });
+  return /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(ThemeContext.Provider, { value: state, children: props.children });
 }
 function useThemeContext() {
   const context = (0, import_react24.useContext)(ThemeContext);
@@ -3325,6 +3356,7 @@ __reExport(src_exports, require("@dnd-kit/core"), module.exports);
   Tag,
   Tbody,
   Td,
+  Text,
   Textarea,
   Th,
   Thead,