@cerberus-design/react 0.12.0-next-bd594cf → 0.12.0-next-635644c

package/build/legacy/_tsup-dts-rollup.d.cts

@@ -130,6 +130,7 @@ import { TdVariantProps } from '@cerberus/styled-system/recipes';
 import type { TextareaHTMLAttributes } from 'react';
 import { ThVariantProps } from '@cerberus/styled-system/recipes';
 import { ToggleVariantProps } from '@cerberus/styled-system/recipes';
+import { TooltipContentProps } from '@ark-ui/react/tooltip';
 import { TouchSensor } from '@dnd-kit/core';
 import { TouchSensorOptions } from '@dnd-kit/core';
 import { Translate } from '@dnd-kit/core';
@@ -2731,6 +2732,36 @@ declare type ToggleProps = ToggleBase & ToggleVariantProps;
 export { ToggleProps }
 export { ToggleProps as ToggleProps_alias_1 }
 
+/**
+ * The Tooltip component is used to provide additional information about an element when it is hovered over.
+ * @definition [Tooltip docs](https://cerberus.digitalu.design/react/tooltip)
+ * @example
+ * ```tsx
+ * <Tooltip content="This is a tooltip">
+ *   <Information />
+ * </Tooltip>
+ */
+declare function Tooltip(props: TooltipProps & TooltipContentProps): JSX_2.Element;
+export { Tooltip }
+export { Tooltip as Tooltip_alias_1 }
+
+/**
+ * This module contains the Tooltip component.
+ * @module Tooltip
+ */
+declare interface TooltipProps {
+    /**
+     * The text content to display in the tooltip.
+     */
+    content: ReactNode;
+    /**
+     * The position of the tooltip relative to the trigger element.
+     */
+    position?: 'top' | 'right' | 'bottom' | 'left';
+}
+export { TooltipProps }
+export { TooltipProps as TooltipProps_alias_1 }
+
 export { TouchSensor }
 
 export { TouchSensorOptions }

package/build/legacy/components/Tooltip.cjs

@@ -0,0 +1,55 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/components/Tooltip.tsx
+var Tooltip_exports = {};
+__export(Tooltip_exports, {
+  Tooltip: () => Tooltip
+});
+module.exports = __toCommonJS(Tooltip_exports);
+var import_tooltip = require("@ark-ui/react/tooltip");
+var import_css = require("@cerberus/styled-system/css");
+var import_recipes = require("@cerberus/styled-system/recipes");
+var import_jsx_runtime = require("react/jsx-runtime");
+function Tooltip(props) {
+  const { content, children, ...nativeProps } = props;
+  const styles = (0, import_recipes.tooltip)();
+  const position = {
+    placement: props.position || "top"
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_tooltip.Tooltip.Root, { openDelay: 400, positioning: position, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tooltip.Tooltip.Trigger, { className: styles.trigger, children }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tooltip.Tooltip.Positioner, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+      import_tooltip.Tooltip.Content,
+      {
+        ...nativeProps,
+        className: (0, import_css.cx)(nativeProps.className, styles.content),
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tooltip.Tooltip.Arrow, { className: styles.arrow, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tooltip.Tooltip.ArrowTip, { className: styles.arrowTip }) }),
+          content
+        ]
+      }
+    ) })
+  ] });
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  Tooltip
+});
+//# sourceMappingURL=Tooltip.cjs.map

package/build/legacy/components/Tooltip.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/Tooltip.tsx"],"sourcesContent":["import {\n  Tooltip as ArkTooltip,\n  type TooltipContentProps,\n} from '@ark-ui/react/tooltip'\nimport { cx } from '@cerberus/styled-system/css'\nimport { tooltip } from '@cerberus/styled-system/recipes'\nimport type { ReactNode } from 'react'\n\n/**\n * This module contains the Tooltip component.\n * @module Tooltip\n */\n\nexport interface TooltipProps {\n  /**\n   * The text content to display in the tooltip.\n   */\n  content: ReactNode\n  /**\n   * The position of the tooltip relative to the trigger element.\n   */\n  position?: 'top' | 'right' | 'bottom' | 'left'\n}\n\n/**\n * The Tooltip component is used to provide additional information about an element when it is hovered over.\n * @definition [Tooltip docs](https://cerberus.digitalu.design/react/tooltip)\n * @example\n * ```tsx\n * <Tooltip content=\"This is a tooltip\">\n *   <Information />\n * </Tooltip>\n */\nexport function Tooltip(props: TooltipProps & TooltipContentProps) {\n  const { content, children, ...nativeProps } = props\n  const styles = tooltip()\n  const position = {\n    placement: props.position || 'top',\n  }\n\n  return (\n    <ArkTooltip.Root openDelay={400} positioning={position}>\n      <ArkTooltip.Trigger className={styles.trigger}>\n        {children}\n      </ArkTooltip.Trigger>\n\n      <ArkTooltip.Positioner>\n        <ArkTooltip.Content\n          {...nativeProps}\n          className={cx(nativeProps.className, styles.content)}\n        >\n          <ArkTooltip.Arrow className={styles.arrow}>\n            <ArkTooltip.ArrowTip className={styles.arrowTip} />\n          </ArkTooltip.Arrow>\n\n          {content}\n        </ArkTooltip.Content>\n      </ArkTooltip.Positioner>\n    </ArkTooltip.Root>\n  )\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,qBAGO;AACP,iBAAmB;AACnB,qBAAwB;AAqClB;AATC,SAAS,QAAQ,OAA2C;AACjE,QAAM,EAAE,SAAS,UAAU,GAAG,YAAY,IAAI;AAC9C,QAAM,aAAS,wBAAQ;AACvB,QAAM,WAAW;AAAA,IACf,WAAW,MAAM,YAAY;AAAA,EAC/B;AAEA,SACE,6CAAC,eAAAA,QAAW,MAAX,EAAgB,WAAW,KAAK,aAAa,UAC5C;AAAA,gDAAC,eAAAA,QAAW,SAAX,EAAmB,WAAW,OAAO,SACnC,UACH;AAAA,IAEA,4CAAC,eAAAA,QAAW,YAAX,EACC;AAAA,MAAC,eAAAA,QAAW;AAAA,MAAX;AAAA,QACE,GAAG;AAAA,QACJ,eAAW,eAAG,YAAY,WAAW,OAAO,OAAO;AAAA,QAEnD;AAAA,sDAAC,eAAAA,QAAW,OAAX,EAAiB,WAAW,OAAO,OAClC,sDAAC,eAAAA,QAAW,UAAX,EAAoB,WAAW,OAAO,UAAU,GACnD;AAAA,UAEC;AAAA;AAAA;AAAA,IACH,GACF;AAAA,KACF;AAEJ;","names":["ArkTooltip"]}

package/build/legacy/index.cjs

@@ -87,6 +87,7 @@ __export(src_exports, {
   Thead: () => Thead,
   ThemeProvider: () => ThemeProvider,
   Toggle: () => Toggle,
+  Tooltip: () => Tooltip,
   Tr: () => Tr,
   createNavTriggerProps: () => createNavTriggerProps,
   defineIcons: () => defineIcons,
@@ -2313,9 +2314,36 @@ function Toggle(props) {
   );
 }
 
+// src/components/Tooltip.tsx
+var import_tooltip = require("@ark-ui/react/tooltip");
+var import_css41 = require("@cerberus/styled-system/css");
+var import_recipes33 = require("@cerberus/styled-system/recipes");
+var import_jsx_runtime49 = require("react/jsx-runtime");
+function Tooltip(props) {
+  const { content, children, ...nativeProps } = props;
+  const styles = (0, import_recipes33.tooltip)();
+  const position = {
+    placement: props.position || "top"
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)(import_tooltip.Tooltip.Root, { openDelay: 400, positioning: position, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(import_tooltip.Tooltip.Trigger, { className: styles.trigger, children }),
+    /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(import_tooltip.Tooltip.Positioner, { children: /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)(
+      import_tooltip.Tooltip.Content,
+      {
+        ...nativeProps,
+        className: (0, import_css41.cx)(nativeProps.className, styles.content),
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(import_tooltip.Tooltip.Arrow, { className: styles.arrow, children: /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(import_tooltip.Tooltip.ArrowTip, { className: styles.arrowTip }) }),
+          content
+        ]
+      }
+    ) })
+  ] });
+}
+
 // src/context/confirm-modal.tsx
 var import_react17 = require("react");
-var import_css41 = require("@cerberus/styled-system/css");
+var import_css42 = require("@cerberus/styled-system/css");
 var import_patterns16 = require("@cerberus/styled-system/patterns");
 
 // src/hooks/useModal.ts
@@ -2344,7 +2372,7 @@ function useModal() {
 }
 
 // src/context/confirm-modal.tsx
-var import_jsx_runtime49 = require("react/jsx-runtime");
+var import_jsx_runtime50 = require("react/jsx-runtime");
 var ConfirmModalContext = (0, import_react17.createContext)(null);
 function ConfirmModal(props) {
   const { modalRef, show, close } = useModal();
@@ -2384,36 +2412,36 @@ function ConfirmModal(props) {
     }),
     [handleShow]
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)(ConfirmModalContext.Provider, { value, children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)(ConfirmModalContext.Provider, { value, children: [
     props.children,
-    /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)(Modal, { onKeyDown: focusTrap, ref: modalRef, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)(ModalHeader, { children: [
-        /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
+    /* @__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)(
           "div",
           {
             className: (0, import_patterns16.hstack)({
               justify: "center",
               w: "full"
             }),
-            children: /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
+            children: /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
               Show,
               {
                 when: palette === "danger",
-                fallback: /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
+                fallback: /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
                   Avatar,
                   {
                     ariaLabel: "",
                     gradient: "charon-light",
-                    icon: /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(ConfirmIcon, { size: 24 }),
+                    icon: /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(ConfirmIcon, { size: 24 }),
                     src: ""
                   }
                 ),
-                children: /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
+                children: /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
                   Avatar,
                   {
                     ariaLabel: "",
                     gradient: "hades-dark",
-                    icon: /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(ConfirmIcon, { size: 24 }),
+                    icon: /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(ConfirmIcon, { size: 24 }),
                     src: ""
                   }
                 )
@@ -2421,21 +2449,21 @@ function ConfirmModal(props) {
             )
           }
         ),
-        /* @__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_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_runtime49.jsxs)(
+      /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)(
         "div",
         {
           className: (0, import_patterns16.hstack)({
             gap: "4"
           }),
           children: [
-            /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
               Button,
               {
                 autoFocus: true,
-                className: (0, import_css41.css)({
+                className: (0, import_css42.css)({
                   w: "1/2"
                 }),
                 name: "confirm",
@@ -2445,10 +2473,10 @@ function ConfirmModal(props) {
                 children: content == null ? void 0 : content.actionText
               }
             ),
-            /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
               Button,
               {
-                className: (0, import_css41.css)({
+                className: (0, import_css42.css)({
                   w: "1/2"
                 }),
                 name: "cancel",
@@ -2477,9 +2505,9 @@ function useConfirmModal() {
 // 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_css43 = require("@cerberus/styled-system/css");
 var import_jsx2 = require("@cerberus/styled-system/jsx");
-var import_jsx_runtime50 = require("react/jsx-runtime");
+var import_jsx_runtime51 = require("react/jsx-runtime");
 var CTAModalContext = (0, import_react18.createContext)(null);
 function CTAModal(props) {
   var _a, _b;
@@ -2519,49 +2547,49 @@ function CTAModal(props) {
     }),
     [handleShow]
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)(CTAModalContext.Provider, { value, children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime51.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)(
+    /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime51.jsxs)(Modal, { onKeyDown: focusTrap, ref: modalRef, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
         "span",
         {
-          className: (0, import_css42.css)({
+          className: (0, import_css43.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, {}) })
+          children: /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(IconButton, { ariaLabel: "Close modal", onClick: close, children: /* @__PURE__ */ (0, import_jsx_runtime51.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)(
+      /* @__PURE__ */ (0, import_jsx_runtime51.jsxs)(ModalHeader, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(import_jsx.HStack, { justify: "center", w: "full", children: /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
           Avatar,
           {
             ariaLabel: "",
             gradient: "charon-light",
-            icon: /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
+            icon: /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
               Show,
               {
                 when: Boolean(confirmIcon),
-                fallback: /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(FallbackIcon, { size: 24 }),
+                fallback: /* @__PURE__ */ (0, import_jsx_runtime51.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_runtime51.jsxs)(import_jsx2.VStack, { gap: "lg", w: "full", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(ModalHeading, { children: content == null ? void 0 : content.heading }),
+          /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(ModalDescription, { children: content == null ? void 0 : content.description })
         ] })
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(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)(
+      /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(import_jsx.HStack, { gap: "md", pt: "sm", w: "full", children: /* @__PURE__ */ (0, import_jsx_runtime51.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_runtime51.jsx)(
         Button,
         {
           "data-index": index,
-          className: (0, import_css42.css)({
+          className: (0, import_css43.css)({
             w: "1/2"
           }),
           onClick: handleActionClick,
@@ -2585,13 +2613,13 @@ function useCTAModal() {
 // src/context/notification-center.tsx
 var import_react19 = require("react");
 var import_patterns17 = require("@cerberus/styled-system/patterns");
-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 import_recipes34 = require("@cerberus/styled-system/recipes");
+var import_css44 = require("@cerberus/styled-system/css");
+var import_jsx_runtime52 = require("react/jsx-runtime");
 var NotificationsContext = (0, import_react19.createContext)(null);
 function NotificationCenter(props) {
   const [activeNotifications, setActiveNotifications] = (0, import_react19.useState)([]);
-  const styles = (0, import_recipes33.notification)();
+  const styles = (0, import_recipes34.notification)();
   const handleNotify = (0, import_react19.useCallback)((options) => {
     setActiveNotifications((prev) => {
       const id = `${options.palette}:${prev.length + 1}`;
@@ -2620,13 +2648,13 @@ function NotificationCenter(props) {
     }),
     [handleNotify]
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime51.jsxs)(NotificationsContext.Provider, { value, children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime52.jsxs)(NotificationsContext.Provider, { value, children: [
     props.children,
-    /* @__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)(
+    /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(Show, { when: activeNotifications.length > 0, children: /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(Portal, { container: props.container, children: /* @__PURE__ */ (0, import_jsx_runtime52.jsxs)("div", { className: styles.center, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(Show, { when: activeNotifications.length >= 4, children: /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(
         Button,
         {
-          className: (0, import_css43.cx)(styles.closeAll, (0, import_patterns17.animateIn)()),
+          className: (0, import_css44.cx)(styles.closeAll, (0, import_patterns17.animateIn)()),
           onClick: handleCloseAll,
           palette: "action",
           shape: "rounded",
@@ -2635,7 +2663,7 @@ function NotificationCenter(props) {
           children: "Close all"
         }
       ) }),
-      /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(
         "div",
         {
           className: (0, import_patterns17.vstack)({
@@ -2645,7 +2673,7 @@ function NotificationCenter(props) {
           style: {
             alignItems: "flex-end"
           },
-          children: activeNotifications.map((option) => /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
+          children: activeNotifications.map((option) => /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(
             MatchNotification,
             {
               ...option,
@@ -2662,7 +2690,7 @@ function MatchNotification(props) {
   const { palette, id, onClose, heading, description } = props;
   switch (palette) {
     case "success":
-      return /* @__PURE__ */ (0, import_jsx_runtime51.jsxs)(
+      return /* @__PURE__ */ (0, import_jsx_runtime52.jsxs)(
         Notification,
         {
           id,
@@ -2670,14 +2698,14 @@ function MatchNotification(props) {
           open: true,
           palette: "success",
           children: [
-            /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(NotificationHeading, { palette: "success", children: heading }),
-            /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(NotificationDescription, { palette: "success", children: description })
+            /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(NotificationHeading, { palette: "success", children: heading }),
+            /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(NotificationDescription, { palette: "success", children: description })
           ]
         },
         id
       );
     case "warning":
-      return /* @__PURE__ */ (0, import_jsx_runtime51.jsxs)(
+      return /* @__PURE__ */ (0, import_jsx_runtime52.jsxs)(
         Notification,
         {
           id,
@@ -2685,22 +2713,22 @@ function MatchNotification(props) {
           open: true,
           palette: "warning",
           children: [
-            /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(NotificationHeading, { palette: "warning", children: heading }),
-            /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(NotificationDescription, { palette: "warning", children: description })
+            /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(NotificationHeading, { palette: "warning", children: heading }),
+            /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(NotificationDescription, { palette: "warning", children: description })
           ]
         },
         id
       );
     case "danger":
-      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 })
+      return /* @__PURE__ */ (0, import_jsx_runtime52.jsxs)(Notification, { id, onClose, open: true, palette: "danger", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(NotificationHeading, { palette: "danger", children: heading }),
+        /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(NotificationDescription, { palette: "danger", children: description })
       ] }, id);
     case "info":
     default:
-      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 })
+      return /* @__PURE__ */ (0, import_jsx_runtime52.jsxs)(Notification, { id, onClose, open: true, palette: "info", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(NotificationHeading, { palette: "info", children: heading }),
+        /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(NotificationDescription, { palette: "info", children: description })
       ] }, id);
   }
 }
@@ -2716,9 +2744,9 @@ function useNotificationCenter() {
 
 // src/context/prompt-modal.tsx
 var import_react20 = require("react");
-var import_css44 = require("@cerberus/styled-system/css");
+var import_css45 = require("@cerberus/styled-system/css");
 var import_patterns18 = require("@cerberus/styled-system/patterns");
-var import_jsx_runtime52 = require("react/jsx-runtime");
+var import_jsx_runtime53 = require("react/jsx-runtime");
 var PromptModalContext = (0, import_react20.createContext)(null);
 function PromptModal(props) {
   const { modalRef, show, close } = useModal();
@@ -2768,36 +2796,36 @@ function PromptModal(props) {
     }),
     [handleShow]
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime52.jsxs)(PromptModalContext.Provider, { value, children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime53.jsxs)(PromptModalContext.Provider, { value, children: [
     props.children,
-    /* @__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)(
+    /* @__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.jsxs)(ModalHeader, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
           "div",
           {
             className: (0, import_patterns18.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)(PromptIcon, { size: 24 }),
+                    icon: /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(PromptIcon, { 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)(PromptIcon, { size: 24 }),
+                    icon: /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(PromptIcon, { size: 24 }),
                     src: ""
                   }
                 )
@@ -2805,10 +2833,10 @@ function PromptModal(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.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
         "div",
         {
           className: (0, import_patterns18.vstack)({
@@ -2816,11 +2844,11 @@ function PromptModal(props) {
             mt: "4",
             mb: "8"
           }),
-          children: /* @__PURE__ */ (0, import_jsx_runtime52.jsxs)(Field, { invalid: !isValid, children: [
-            /* @__PURE__ */ (0, import_jsx_runtime52.jsxs)(
+          children: /* @__PURE__ */ (0, import_jsx_runtime53.jsxs)(Field, { invalid: !isValid, children: [
+            /* @__PURE__ */ (0, import_jsx_runtime53.jsxs)(
               Label,
               {
-                className: (0, import_css44.css)({
+                className: (0, import_css45.css)({
                   gap: 1,
                   justifyContent: "flex-start"
                 }),
@@ -2828,10 +2856,10 @@ function PromptModal(props) {
                 size: "md",
                 children: [
                   "Type",
-                  /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(
+                  /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
                     "strong",
                     {
-                      className: (0, import_css44.css)({
+                      className: (0, import_css45.css)({
                         textTransform: "uppercase"
                       }),
                       children: content == null ? void 0 : content.key
@@ -2841,7 +2869,7 @@ function PromptModal(props) {
                 ]
               }
             ),
-            /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
               Input,
               {
                 id: "confirm",
@@ -2853,7 +2881,7 @@ function PromptModal(props) {
           ] })
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime52.jsxs)(
+      /* @__PURE__ */ (0, import_jsx_runtime53.jsxs)(
         "div",
         {
           className: (0, import_patterns18.hstack)({
@@ -2861,11 +2889,11 @@ function PromptModal(props) {
             gap: "4"
           }),
           children: [
-            /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
               Button,
               {
                 autoFocus: true,
-                className: (0, import_css44.css)({
+                className: (0, import_css45.css)({
                   w: "1/2"
                 }),
                 disabled: !isValid,
@@ -2876,10 +2904,10 @@ function PromptModal(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)({
+                className: (0, import_css45.css)({
                   w: "1/2"
                 }),
                 name: "cancel",
@@ -2970,7 +2998,7 @@ function useTheme(defaultTheme = "cerberus", defaultColorMode = "light", options
 }
 
 // src/context/theme.tsx
-var import_jsx_runtime53 = require("react/jsx-runtime");
+var import_jsx_runtime54 = require("react/jsx-runtime");
 var ThemeContext = (0, import_react22.createContext)(
   null
 );
@@ -2980,7 +3008,7 @@ function ThemeProvider(props) {
     updateMode: props.updateMode,
     updateTheme: props.updateTheme
   });
-  return /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(ThemeContext.Provider, { value: state, children: props.children });
+  return /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(ThemeContext.Provider, { value: state, children: props.children });
 }
 function useThemeContext() {
   const context = (0, import_react22.useContext)(ThemeContext);
@@ -3084,6 +3112,7 @@ __reExport(src_exports, require("@dnd-kit/core"), module.exports);
   Thead,
   ThemeProvider,
   Toggle,
+  Tooltip,
   Tr,
   createNavTriggerProps,
   defineIcons,