@cerberus-design/react 0.9.2-next-d32e769 → 0.9.2-next-863daf6

package/build/legacy/index.cjs

@@ -56,6 +56,7 @@ __export(src_exports, {
   Radio: () => Radio,
   Select: () => Select,
   Show: () => Show,
+  Spinner: () => Spinner,
   THEME_KEY: () => THEME_KEY,
   Tab: () => Tab,
   TabList: () => TabList,
@@ -564,7 +565,7 @@ function FileStatus(props) {
                 }
               ),
               /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(ProgressBar, { now, size: "sm" }),
-              /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(Field, { invalid: modalIconPalette === "red", children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(Field, { invalid: modalIconPalette === "hades-dark", children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
                 FieldMessage,
                 {
                   className: (0, import_css7.css)({
@@ -667,13 +668,13 @@ function getModalIconPalette(status) {
   switch (status) {
     case "todo" /* TODO */:
     case "processing" /* PROCESSING */:
-      return "light-purple";
+      return "charon-light";
     case "error" /* ERROR */:
-      return "red";
+      return "hades-dark";
     case "done" /* DONE */:
-      return "green";
+      return "thanatos-light";
     default:
-      return "light-purple";
+      return "charon-light";
   }
 }
 
@@ -699,7 +700,7 @@ function FileUploader(props) {
         /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { className: styles.icon, children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
           Avatar,
           {
-            gradient: "light-purple",
+            gradient: "charon-light",
             ariaLabel: "",
             icon: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(Icon, {}),
             size: "md",
@@ -1285,13 +1286,89 @@ function Option(props) {
   return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("option", { ...props });
 }
 
+// src/components/Spinner.tsx
+var import_jsx_runtime29 = require("react/jsx-runtime");
+function Spinner(props) {
+  return /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
+    "svg",
+    {
+      "aria-busy": "true",
+      role: "status",
+      xmlns: "http://www.w3.org/2000/svg",
+      height: props.size,
+      width: props.size,
+      viewBox: "0 0 24 24",
+      ...props,
+      children: /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(
+        "g",
+        {
+          fill: "none",
+          stroke: "currentColor",
+          strokeLinecap: "round",
+          strokeLinejoin: "round",
+          strokeWidth: 2,
+          children: [
+            /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(
+              "path",
+              {
+                strokeDasharray: 16,
+                strokeDashoffset: 16,
+                d: "M12 3c4.97 0 9 4.03 9 9",
+                children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
+                    "animate",
+                    {
+                      fill: "freeze",
+                      attributeName: "stroke-dashoffset",
+                      dur: "0.15s",
+                      values: "16;0"
+                    }
+                  ),
+                  /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
+                    "animateTransform",
+                    {
+                      attributeName: "transform",
+                      dur: "0.75s",
+                      repeatCount: "indefinite",
+                      type: "rotate",
+                      values: "0 12 12;360 12 12"
+                    }
+                  )
+                ]
+              }
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime29.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_runtime29.jsx)(
+                  "animate",
+                  {
+                    fill: "freeze",
+                    attributeName: "stroke-dashoffset",
+                    dur: "0.6s",
+                    values: "64;0"
+                  }
+                )
+              }
+            )
+          ]
+        }
+      )
+    }
+  );
+}
+
 // src/components/Tab.tsx
 var import_react13 = require("react");
 
 // src/context/tabs.tsx
 var import_recipes20 = require("@cerberus/styled-system/recipes");
 var import_react11 = require("react");
-var import_jsx_runtime29 = require("react/jsx-runtime");
+var import_jsx_runtime30 = require("react/jsx-runtime");
 var TabsContext = (0, import_react11.createContext)(null);
 function Tabs(props) {
   const { cache, active, id, palette } = props;
@@ -1323,7 +1400,7 @@ function Tabs(props) {
       window.localStorage.setItem(uuid, activeTab);
     }
   }, [activeTab, cache]);
-  return /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(TabsContext.Provider, { value, children: props.children });
+  return /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(TabsContext.Provider, { value, children: props.children });
 }
 function useTabsContext() {
   const context = (0, import_react11.useContext)(TabsContext);
@@ -1393,7 +1470,7 @@ function useTabsKeyboardNavigation() {
 }
 
 // src/components/Tab.tsx
-var import_jsx_runtime30 = require("react/jsx-runtime");
+var import_jsx_runtime31 = require("react/jsx-runtime");
 function Tab(props) {
   const { value, ...nativeProps } = props;
   const { active, onTabUpdate, styles } = useTabsContext();
@@ -1405,7 +1482,7 @@ function Tab(props) {
     (_a = props.onClick) == null ? void 0 : _a.call(props, e);
     startTransition(() => onTabUpdate(e.currentTarget.value));
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
     "button",
     {
       ...nativeProps,
@@ -1426,11 +1503,11 @@ function Tab(props) {
 // src/components/TabList.tsx
 var import_css25 = require("@cerberus/styled-system/css");
 var import_patterns11 = require("@cerberus/styled-system/patterns");
-var import_jsx_runtime31 = require("react/jsx-runtime");
+var import_jsx_runtime32 = require("react/jsx-runtime");
 function TabList(props) {
   const { description, ...nativeProps } = props;
   const { id, styles } = useTabsContext();
-  return /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
     "div",
     {
       ...nativeProps,
@@ -1450,12 +1527,12 @@ function TabList(props) {
 // src/components/TabPanel.tsx
 var import_css26 = require("@cerberus/styled-system/css");
 var import_react14 = require("react");
-var import_jsx_runtime32 = require("react/jsx-runtime");
+var import_jsx_runtime33 = 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_runtime32.jsx)(Show, { when: isActive, children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(Show, { when: isActive, children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
     "div",
     {
       ...nativeProps,
@@ -1471,52 +1548,52 @@ function TabPanel(props) {
 // src/components/Table.tsx
 var import_css27 = require("@cerberus/styled-system/css");
 var import_recipes21 = require("@cerberus/styled-system/recipes");
-var import_jsx_runtime33 = require("react/jsx-runtime");
+var import_jsx_runtime34 = require("react/jsx-runtime");
 function Table(props) {
   const { caption, children, ...nativeProps } = props;
   const styles = (0, import_recipes21.table)();
-  return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("div", { className: styles.container, children: /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("div", { className: styles.container, children: /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(
     "table",
     {
       ...nativeProps,
       className: (0, import_css27.cx)(nativeProps.className, styles.table),
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("caption", { className: styles.caption, children: caption }),
+        /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("caption", { className: styles.caption, children: caption }),
         children
       ]
     }
   ) });
 }
 function Tr(props) {
-  return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("tr", { ...props });
+  return /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("tr", { ...props });
 }
 
 // src/components/Thead.tsx
 var import_css28 = require("@cerberus/styled-system/css");
 var import_recipes22 = require("@cerberus/styled-system/recipes");
-var import_jsx_runtime34 = require("react/jsx-runtime");
+var import_jsx_runtime35 = require("react/jsx-runtime");
 function Thead(props) {
-  return /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("thead", { ...props, className: (0, import_css28.cx)(props.className, (0, import_recipes22.thead)()) });
+  return /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("thead", { ...props, className: (0, import_css28.cx)(props.className, (0, import_recipes22.thead)()) });
 }
 
 // src/components/Th.tsx
 var import_css29 = require("@cerberus/styled-system/css");
 var import_recipes23 = require("@cerberus/styled-system/recipes");
-var import_jsx_runtime35 = require("react/jsx-runtime");
+var import_jsx_runtime36 = require("react/jsx-runtime");
 function Th(props) {
   const { size, onClick, ...nativeProps } = props;
-  return /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
     Show,
     {
       when: Boolean(onClick),
-      fallback: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
+      fallback: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
         "th",
         {
           ...nativeProps,
           className: (0, import_css29.cx)(nativeProps.className, (0, import_recipes23.th)({ size }))
         }
       ),
-      children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("th", { ...nativeProps, children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("th", { ...nativeProps, children: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
         "button",
         {
           className: (0, import_css29.cx)(
@@ -1541,10 +1618,10 @@ function Th(props) {
 // src/components/Td.tsx
 var import_css30 = require("@cerberus/styled-system/css");
 var import_recipes24 = require("@cerberus/styled-system/recipes");
-var import_jsx_runtime36 = require("react/jsx-runtime");
+var import_jsx_runtime37 = require("react/jsx-runtime");
 function Td(props) {
   const { size, ...nativeProps } = props;
-  return /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
     "td",
     {
       ...nativeProps,
@@ -1561,10 +1638,10 @@ function Td(props) {
 // src/components/Tbody.tsx
 var import_recipes25 = require("@cerberus/styled-system/recipes");
 var import_css31 = require("@cerberus/styled-system/css");
-var import_jsx_runtime37 = require("react/jsx-runtime");
+var import_jsx_runtime38 = require("react/jsx-runtime");
 function Tbody(props) {
   const { decoration, ...nativeProps } = props;
-  return /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
     "tbody",
     {
       ...nativeProps,
@@ -1582,14 +1659,14 @@ function Tbody(props) {
 var import_icons3 = require("@cerberus/icons");
 var import_css32 = require("@cerberus/styled-system/css");
 var import_recipes26 = require("@cerberus/styled-system/recipes");
-var import_jsx_runtime38 = require("react/jsx-runtime");
+var import_jsx_runtime39 = require("react/jsx-runtime");
 function Tag(props) {
   const { shape: initShape, gradient, onClick, usage, ...nativeProps } = props;
   const palette = (props == null ? void 0 : props.palette) ?? "page";
   const isClosable = Boolean(onClick);
   const shape = isClosable ? "pill" : initShape;
   const closableStyles = isClosable ? closableCss : "";
-  return /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)(
     "span",
     {
       ...nativeProps,
@@ -1605,7 +1682,7 @@ function Tag(props) {
       ),
       children: [
         props.children,
-        /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(Show, { when: isClosable, children: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(Show, { when: isClosable, children: /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
           "button",
           {
             "aria-label": "Close",
@@ -1615,7 +1692,7 @@ function Tag(props) {
               size: "sm"
             }),
             onClick,
-            children: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(import_icons3.Close, {})
+            children: /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(import_icons3.Close, {})
           }
         ) })
       ]
@@ -1631,11 +1708,11 @@ var closableCss = (0, import_css32.css)({
 // src/components/Textarea.tsx
 var import_css33 = require("@cerberus/styled-system/css");
 var import_recipes27 = require("@cerberus/styled-system/recipes");
-var import_jsx_runtime39 = require("react/jsx-runtime");
+var import_jsx_runtime40 = require("react/jsx-runtime");
 function Textarea(props) {
   const { describedBy, ...nativeProps } = props;
   const { invalid, ...fieldState } = useFieldContext();
-  return /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
     "textarea",
     {
       ...nativeProps,
@@ -1660,19 +1737,19 @@ function Textarea(props) {
 var import_css34 = require("@cerberus/styled-system/css");
 var import_patterns12 = require("@cerberus/styled-system/patterns");
 var import_recipes28 = require("@cerberus/styled-system/recipes");
-var import_jsx_runtime40 = require("react/jsx-runtime");
+var import_jsx_runtime41 = require("react/jsx-runtime");
 function Toggle(props) {
   const { size, describedBy, ...nativeProps } = props;
   const styles = (0, import_recipes28.toggle)({ size });
   const { invalid, ...state } = useFieldContext();
   const Icon = $cerberusIcons.toggleChecked;
-  return /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)(
     "span",
     {
       className: (0, import_css34.cx)("group", styles.track, (0, import_patterns12.hstack)()),
       "data-checked": props.checked || props.defaultChecked,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
           "input",
           {
             ...nativeProps,
@@ -1684,7 +1761,7 @@ function Toggle(props) {
             type: "checkbox"
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
           "span",
           {
             className: (0, import_css34.cx)(
@@ -1693,7 +1770,7 @@ function Toggle(props) {
                 justify: "center"
               })
             ),
-            children: /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(Icon, {})
+            children: /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(Icon, {})
           }
         )
       ]
@@ -1728,7 +1805,7 @@ function useModal() {
 }
 
 // src/context/confirm-modal.tsx
-var import_jsx_runtime41 = require("react/jsx-runtime");
+var import_jsx_runtime42 = require("react/jsx-runtime");
 var ConfirmModalContext = (0, import_react16.createContext)(null);
 function ConfirmModal(props) {
   const { modalRef, show, close } = useModal();
@@ -1768,36 +1845,36 @@ function ConfirmModal(props) {
     }),
     [handleShow]
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)(ConfirmModalContext.Provider, { value, children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)(ConfirmModalContext.Provider, { value, children: [
     props.children,
-    /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)(Modal, { onKeyDown: focusTrap, ref: modalRef, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)(ModalHeader, { children: [
-        /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)(Modal, { onKeyDown: focusTrap, ref: modalRef, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)(ModalHeader, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
           "div",
           {
             className: (0, import_patterns13.hstack)({
               justify: "center",
               w: "full"
             }),
-            children: /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
+            children: /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
               Show,
               {
                 when: palette === "danger",
-                fallback: /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
+                fallback: /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
                   Avatar,
                   {
                     ariaLabel: "",
-                    gradient: "light-purple",
-                    icon: /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(ConfirmIcon, { size: 24 }),
+                    gradient: "charon-light",
+                    icon: /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(ConfirmIcon, { size: 24 }),
                     src: ""
                   }
                 ),
-                children: /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
+                children: /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
                   Avatar,
                   {
                     ariaLabel: "",
-                    gradient: "red",
-                    icon: /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(ConfirmIcon, { size: 24 }),
+                    gradient: "hades-dark",
+                    icon: /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(ConfirmIcon, { size: 24 }),
                     src: ""
                   }
                 )
@@ -1805,17 +1882,17 @@ function ConfirmModal(props) {
             )
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(ModalHeading, { children: content == null ? void 0 : content.heading }),
-        /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(ModalDescription, { children: content == null ? void 0 : content.description })
+        /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(ModalHeading, { children: content == null ? void 0 : content.heading }),
+        /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(ModalDescription, { children: content == null ? void 0 : content.description })
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)(
+      /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)(
         "div",
         {
           className: (0, import_patterns13.hstack)({
             gap: "4"
           }),
           children: [
-            /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
               Button,
               {
                 autoFocus: true,
@@ -1829,7 +1906,7 @@ function ConfirmModal(props) {
                 children: content == null ? void 0 : content.actionText
               }
             ),
-            /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
               Button,
               {
                 className: (0, import_css35.css)({
@@ -1863,7 +1940,7 @@ var import_react17 = require("react");
 var import_patterns14 = require("@cerberus/styled-system/patterns");
 var import_recipes29 = require("@cerberus/styled-system/recipes");
 var import_css36 = require("@cerberus/styled-system/css");
-var import_jsx_runtime42 = require("react/jsx-runtime");
+var import_jsx_runtime43 = require("react/jsx-runtime");
 var NotificationsContext = (0, import_react17.createContext)(null);
 function NotificationCenter(props) {
   const [activeNotifications, setActiveNotifications] = (0, import_react17.useState)([]);
@@ -1896,10 +1973,10 @@ function NotificationCenter(props) {
     }),
     [handleNotify]
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)(NotificationsContext.Provider, { value, children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)(NotificationsContext.Provider, { value, children: [
     props.children,
-    /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(Show, { when: activeNotifications.length > 0, children: /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(Portal, { container: props.container, children: /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)("div", { className: styles.center, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(Show, { when: activeNotifications.length >= 4, children: /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(Show, { when: activeNotifications.length > 0, children: /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(Portal, { container: props.container, children: /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)("div", { className: styles.center, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(Show, { when: activeNotifications.length >= 4, children: /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
         Button,
         {
           className: (0, import_css36.cx)(styles.closeAll, (0, import_patterns14.animateIn)()),
@@ -1911,7 +1988,7 @@ function NotificationCenter(props) {
           children: "Close all"
         }
       ) }),
-      /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
         "div",
         {
           className: (0, import_patterns14.vstack)({
@@ -1921,17 +1998,11 @@ function NotificationCenter(props) {
           style: {
             alignItems: "flex-end"
           },
-          children: activeNotifications.map((option) => /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)(
-            Notification,
+          children: activeNotifications.map((option) => /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
+            MatchNotification,
             {
-              id: option.id,
-              onClose: handleClose,
-              open: true,
-              palette: option.palette,
-              children: [
-                /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(NotificationHeading, { palette: option.palette, children: option.heading }),
-                /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(NotificationDescription, { palette: option.palette, children: option.description })
-              ]
+              ...option,
+              onClose: handleClose
             },
             option.id
           ))
@@ -1940,6 +2011,52 @@ function NotificationCenter(props) {
     ] }) }) })
   ] });
 }
+function MatchNotification(props) {
+  const { palette, id, onClose, heading, description } = props;
+  switch (palette) {
+    case "success":
+      return /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)(
+        Notification,
+        {
+          id,
+          onClose,
+          open: true,
+          palette: "success",
+          children: [
+            /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(NotificationHeading, { palette: "success", children: heading }),
+            /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(NotificationDescription, { palette: "success", children: description })
+          ]
+        },
+        id
+      );
+    case "warning":
+      return /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)(
+        Notification,
+        {
+          id,
+          onClose,
+          open: true,
+          palette: "warning",
+          children: [
+            /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(NotificationHeading, { palette: "warning", children: heading }),
+            /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(NotificationDescription, { palette: "warning", children: description })
+          ]
+        },
+        id
+      );
+    case "danger":
+      return /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)(Notification, { id, onClose, open: true, palette: "danger", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(NotificationHeading, { palette: "danger", children: heading }),
+        /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(NotificationDescription, { palette: "danger", children: description })
+      ] }, id);
+    case "info":
+    default:
+      return /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)(Notification, { id, onClose, open: true, palette: "info", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(NotificationHeading, { palette: "info", children: heading }),
+        /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(NotificationDescription, { palette: "info", children: description })
+      ] }, id);
+  }
+}
 function useNotificationCenter() {
   const context = (0, import_react17.useContext)(NotificationsContext);
   if (!context) {
@@ -1954,7 +2071,7 @@ function useNotificationCenter() {
 var import_react18 = require("react");
 var import_css37 = require("@cerberus/styled-system/css");
 var import_patterns15 = require("@cerberus/styled-system/patterns");
-var import_jsx_runtime43 = require("react/jsx-runtime");
+var import_jsx_runtime44 = require("react/jsx-runtime");
 var PromptModalContext = (0, import_react18.createContext)(null);
 function PromptModal(props) {
   const { modalRef, show, close } = useModal();
@@ -2004,36 +2121,36 @@ function PromptModal(props) {
     }),
     [handleShow]
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)(PromptModalContext.Provider, { value, children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)(PromptModalContext.Provider, { value, children: [
     props.children,
-    /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)(Modal, { onKeyDown: focusTrap, ref: modalRef, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)(ModalHeader, { children: [
-        /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)(Modal, { onKeyDown: focusTrap, ref: modalRef, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)(ModalHeader, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
           "div",
           {
             className: (0, import_patterns15.hstack)({
               justify: "center",
               w: "full"
             }),
-            children: /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
+            children: /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
               Show,
               {
                 when: palette === "danger",
-                fallback: /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
+                fallback: /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
                   Avatar,
                   {
                     ariaLabel: "",
-                    gradient: "light-purple",
-                    icon: /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(PromptIcon, { size: 24 }),
+                    gradient: "charon-light",
+                    icon: /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(PromptIcon, { size: 24 }),
                     src: ""
                   }
                 ),
-                children: /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
+                children: /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
                   Avatar,
                   {
                     ariaLabel: "",
-                    gradient: "red",
-                    icon: /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(PromptIcon, { size: 24 }),
+                    gradient: "hades-dark",
+                    icon: /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(PromptIcon, { size: 24 }),
                     src: ""
                   }
                 )
@@ -2041,10 +2158,10 @@ function PromptModal(props) {
             )
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(ModalHeading, { children: content == null ? void 0 : content.heading }),
-        /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(ModalDescription, { children: content == null ? void 0 : content.description })
+        /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(ModalHeading, { children: content == null ? void 0 : content.heading }),
+        /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(ModalDescription, { children: content == null ? void 0 : content.description })
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
         "div",
         {
           className: (0, import_patterns15.vstack)({
@@ -2052,10 +2169,10 @@ function PromptModal(props) {
             mt: "4",
             mb: "8"
           }),
-          children: /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)(Field, { invalid: !isValid, children: [
-            /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)(Label, { htmlFor: "confirm", size: "md", children: [
+          children: /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)(Field, { invalid: !isValid, children: [
+            /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)(Label, { htmlFor: "confirm", size: "md", children: [
               "Type",
-              /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
                 "strong",
                 {
                   className: (0, import_css37.css)({
@@ -2066,7 +2183,7 @@ function PromptModal(props) {
               ),
               "to confirm"
             ] }),
-            /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
               Input,
               {
                 id: "confirm",
@@ -2078,7 +2195,7 @@ function PromptModal(props) {
           ] })
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)(
+      /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)(
         "div",
         {
           className: (0, import_patterns15.hstack)({
@@ -2086,7 +2203,7 @@ function PromptModal(props) {
             gap: "4"
           }),
           children: [
-            /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
               Button,
               {
                 autoFocus: true,
@@ -2101,7 +2218,7 @@ function PromptModal(props) {
                 children: content == null ? void 0 : content.actionText
               }
             ),
-            /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
               Button,
               {
                 className: (0, import_css37.css)({
@@ -2195,7 +2312,7 @@ function useTheme(defaultTheme = "cerberus", defaultColorMode = "light", options
 }
 
 // src/context/theme.tsx
-var import_jsx_runtime44 = require("react/jsx-runtime");
+var import_jsx_runtime45 = require("react/jsx-runtime");
 var ThemeContext = (0, import_react20.createContext)(
   null
 );
@@ -2205,7 +2322,7 @@ function ThemeProvider(props) {
     updateMode: props.updateMode,
     updateTheme: props.updateTheme
   });
-  return /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(ThemeContext.Provider, { value: state, children: props.children });
+  return /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(ThemeContext.Provider, { value: state, children: props.children });
 }
 function useThemeContext() {
   const context = (0, import_react20.useContext)(ThemeContext);
@@ -2272,6 +2389,7 @@ __reExport(src_exports, require("@dnd-kit/core"), module.exports);
   Radio,
   Select,
   Show,
+  Spinner,
   THEME_KEY,
   Tab,
   TabList,