@cerberus-design/react 0.7.4-next-92f76bb → 0.7.4-next-9a605c3

package/build/modern/chunk-OCBED5GL.js

@@ -0,0 +1,70 @@
+import {
+  IconButton
+} from "./chunk-SLHX5K6I.js";
+import {
+  trapFocus
+} from "./chunk-JIZQFTW6.js";
+import {
+  $cerberusIcons
+} from "./chunk-BEYPMC73.js";
+
+// src/components/Notification.tsx
+import { cx } from "@cerberus-design/styled-system/css";
+import { hstack, vstack } from "@cerberus-design/styled-system/patterns";
+import {
+  notification
+} from "@cerberus-design/styled-system/recipes";
+import {
+  useRef
+} from "react";
+import { Close } from "@cerberus/icons";
+import { jsx, jsxs } from "react/jsx-runtime";
+function MatchNotificationIcon(props) {
+  const palette = props.palette || "info";
+  const key = `${palette}Notification`;
+  const Icon = $cerberusIcons[key];
+  return /* @__PURE__ */ jsx(Icon, {});
+}
+function Notification(props) {
+  const { children, palette, onClose, ...nativeProps } = props;
+  const ref = useRef(null);
+  const onKeyDown = trapFocus(ref);
+  const styles = notification({ palette });
+  return /* @__PURE__ */ jsxs(
+    "dialog",
+    {
+      ...nativeProps,
+      className: cx(
+        nativeProps.className,
+        hstack({
+          position: "relative",
+          gap: "4"
+        }),
+        styles.dialog
+      ),
+      onKeyDown,
+      ref,
+      role: "alert",
+      children: [
+        /* @__PURE__ */ jsx("span", { className: styles.icon, children: /* @__PURE__ */ jsx(MatchNotificationIcon, { palette }) }),
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: vstack({
+              alignItems: "flex-start",
+              gap: "0",
+              py: "2"
+            }),
+            children
+          }
+        ),
+        /* @__PURE__ */ jsx(IconButton, { ariaLabel: "Close", onClick: onClose, value: props.id, children: /* @__PURE__ */ jsx(Close, {}) })
+      ]
+    }
+  );
+}
+
+export {
+  Notification
+};
+//# sourceMappingURL=chunk-OCBED5GL.js.map

package/build/modern/chunk-OCBED5GL.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/components/Notification.tsx"],"sourcesContent":["'use client'\n\nimport { cx } from '@cerberus-design/styled-system/css'\nimport { hstack, vstack } from '@cerberus-design/styled-system/patterns'\nimport {\n  notification,\n  type NotificationVariantProps,\n} from '@cerberus-design/styled-system/recipes'\nimport {\n  useRef,\n  type DialogHTMLAttributes,\n  type PropsWithChildren,\n  type MouseEvent,\n} from 'react'\nimport { IconButton } from './IconButton'\nimport { Close } from '@cerberus/icons'\nimport { $cerberusIcons } from '../config/defineIcons'\nimport type { IconType } from '../config/cerbIcons'\nimport { trapFocus } from '../aria-helpers/trap-focus.aria'\n\n/**\n * This module exports the Notification component.\n * @module\n */\n\nfunction MatchNotificationIcon(props: NotificationVariantProps) {\n  const palette = props.palette || 'info'\n  const key = `${palette}Notification` as keyof typeof $cerberusIcons\n  const Icon = $cerberusIcons[key] as IconType\n  return <Icon />\n}\n\nexport interface NotificationBaseProps\n  extends Omit<DialogHTMLAttributes<HTMLDialogElement>, 'onClose'> {\n  id: string\n  onClose?: (e: MouseEvent<HTMLButtonElement>) => void\n}\nexport type NotificationProps = NotificationBaseProps & NotificationVariantProps\n\n/**\n * The info notification component.\n * @param props - The component props.\n * @returns The info notification component.\n * @example\n * ```tsx\n * <Notification id=\"info:1\" open>\n *  <NotificationHeading>Info Notification</NotificationHeading>\n * <NotificationDescription>\n *  This is a description with a <a href=\"#\">link</a> in the message.\n * </NotificationDescription>\n * </Notification>\n * ```\n */\nexport function Notification(props: PropsWithChildren<NotificationProps>) {\n  const { children, palette, onClose, ...nativeProps } = props\n  const ref = useRef<HTMLDialogElement>(null)\n  const onKeyDown = trapFocus(ref)\n  const styles = notification({ palette })\n\n  return (\n    <dialog\n      {...nativeProps}\n      className={cx(\n        nativeProps.className,\n        hstack({\n          position: 'relative',\n          gap: '4',\n        }),\n        styles.dialog,\n      )}\n      onKeyDown={onKeyDown}\n      ref={ref}\n      role=\"alert\"\n    >\n      <span className={styles.icon}>\n        <MatchNotificationIcon palette={palette} />\n      </span>\n\n      <div\n        className={vstack({\n          alignItems: 'flex-start',\n          gap: '0',\n          py: '2',\n        })}\n      >\n        {children}\n      </div>\n\n      <IconButton ariaLabel=\"Close\" onClick={onClose} value={props.id}>\n        <Close />\n      </IconButton>\n    </dialog>\n  )\n}\n"],"mappings":";;;;;;;;;;;AAEA,SAAS,UAAU;AACnB,SAAS,QAAQ,cAAc;AAC/B;AAAA,EACE;AAAA,OAEK;AACP;AAAA,EACE;AAAA,OAIK;AAEP,SAAS,aAAa;AAcb,cA+BL,YA/BK;AAJT,SAAS,sBAAsB,OAAiC;AAC9D,QAAM,UAAU,MAAM,WAAW;AACjC,QAAM,MAAM,GAAG,OAAO;AACtB,QAAM,OAAO,eAAe,GAAG;AAC/B,SAAO,oBAAC,QAAK;AACf;AAuBO,SAAS,aAAa,OAA6C;AACxE,QAAM,EAAE,UAAU,SAAS,SAAS,GAAG,YAAY,IAAI;AACvD,QAAM,MAAM,OAA0B,IAAI;AAC1C,QAAM,YAAY,UAAU,GAAG;AAC/B,QAAM,SAAS,aAAa,EAAE,QAAQ,CAAC;AAEvC,SACE;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACJ,WAAW;AAAA,QACT,YAAY;AAAA,QACZ,OAAO;AAAA,UACL,UAAU;AAAA,UACV,KAAK;AAAA,QACP,CAAC;AAAA,QACD,OAAO;AAAA,MACT;AAAA,MACA;AAAA,MACA;AAAA,MACA,MAAK;AAAA,MAEL;AAAA,4BAAC,UAAK,WAAW,OAAO,MACtB,8BAAC,yBAAsB,SAAkB,GAC3C;AAAA,QAEA;AAAA,UAAC;AAAA;AAAA,YACC,WAAW,OAAO;AAAA,cAChB,YAAY;AAAA,cACZ,KAAK;AAAA,cACL,IAAI;AAAA,YACN,CAAC;AAAA,YAEA;AAAA;AAAA,QACH;AAAA,QAEA,oBAAC,cAAW,WAAU,SAAQ,SAAS,SAAS,OAAO,MAAM,IAC3D,8BAAC,SAAM,GACT;AAAA;AAAA;AAAA,EACF;AAEJ;","names":[]}

package/build/modern/chunk-SINTHADQ.js

@@ -0,0 +1,22 @@
+// src/components/NotificationDescription.tsx
+import { cx } from "@cerberus-design/styled-system/css";
+import {
+  notification
+} from "@cerberus-design/styled-system/recipes";
+import { jsx } from "react/jsx-runtime";
+function NotificationDescription(props) {
+  const { palette, ...nativeProps } = props;
+  const styles = notification({ palette });
+  return /* @__PURE__ */ jsx(
+    "p",
+    {
+      className: cx(nativeProps.className, styles.description),
+      ...nativeProps
+    }
+  );
+}
+
+export {
+  NotificationDescription
+};
+//# sourceMappingURL=chunk-SINTHADQ.js.map

package/build/modern/chunk-SINTHADQ.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/components/NotificationDescription.tsx"],"sourcesContent":["/**\n * This module exports the NotificationDescription component.\n * @module\n */\n\nimport { cx } from '@cerberus-design/styled-system/css'\nimport {\n  notification,\n  type NotificationVariantProps,\n} from '@cerberus-design/styled-system/recipes'\nimport type { HTMLAttributes } from 'react'\n\nexport interface BaseNotificationDescriptionProps\n  extends HTMLAttributes<HTMLParagraphElement> {}\nexport type NotificationDescriptionProps = BaseNotificationDescriptionProps &\n  NotificationVariantProps\n\n/**\n * The NotificationDescription component is used to render the description of a notification.\n * @param props - The anything a HTMLParagraphElement can accept.\n */\nexport function NotificationDescription(props: NotificationDescriptionProps) {\n  const { palette, ...nativeProps } = props\n  const styles = notification({ palette })\n  return (\n    <p\n      className={cx(nativeProps.className, styles.description)}\n      {...nativeProps}\n    />\n  )\n}\n"],"mappings":";AAKA,SAAS,UAAU;AACnB;AAAA,EACE;AAAA,OAEK;AAgBH;AAJG,SAAS,wBAAwB,OAAqC;AAC3E,QAAM,EAAE,SAAS,GAAG,YAAY,IAAI;AACpC,QAAM,SAAS,aAAa,EAAE,QAAQ,CAAC;AACvC,SACE;AAAA,IAAC;AAAA;AAAA,MACC,WAAW,GAAG,YAAY,WAAW,OAAO,WAAW;AAAA,MACtD,GAAG;AAAA;AAAA,EACN;AAEJ;","names":[]}

package/build/modern/{chunk-DED42MIR.js → chunk-XB4ZRAH4.js}

@@ -6,7 +6,7 @@ import {
 } from "./chunk-4O4QFF4S.js";
 import {
   $cerberusIcons
-} from "./chunk-OLQQB53X.js";
+} from "./chunk-BEYPMC73.js";
 
 // src/components/Input.tsx
 import { input } from "@cerberus/styled-system/recipes";
@@ -39,4 +39,4 @@ function Input(props) {
 export {
   Input
 };
-//# sourceMappingURL=chunk-DED42MIR.js.map
+//# sourceMappingURL=chunk-XB4ZRAH4.js.map

package/build/modern/{chunk-SHNZS357.js → chunk-ZPWSMCZ5.js}

@@ -27,7 +27,7 @@ import {
 } from "./chunk-JIZQFTW6.js";
 import {
   $cerberusIcons
-} from "./chunk-OLQQB53X.js";
+} from "./chunk-BEYPMC73.js";
 import {
   useModal
 } from "./chunk-C5HLLGME.js";
@@ -151,4 +151,4 @@ export {
   ConfirmModal,
   useConfirmModal
 };
-//# sourceMappingURL=chunk-SHNZS357.js.map
+//# sourceMappingURL=chunk-ZPWSMCZ5.js.map

package/build/modern/components/FileUploader.js

@@ -1,10 +1,10 @@
 "use client";
 import {
   FileUploader
-} from "../chunk-2NSXMFKX.js";
+} from "../chunk-3YORUZIQ.js";
 import "../chunk-4O4QFF4S.js";
-import "../chunk-OLQQB53X.js";
-import "../chunk-GIHAFJYX.js";
+import "../chunk-BEYPMC73.js";
+import "../chunk-GVNPFXKL.js";
 export {
   FileUploader
 };

package/build/modern/components/Input.js

@@ -1,11 +1,11 @@
 "use client";
 import {
   Input
-} from "../chunk-DED42MIR.js";
+} from "../chunk-XB4ZRAH4.js";
 import "../chunk-ZAU4JVLL.js";
 import "../chunk-4O4QFF4S.js";
-import "../chunk-OLQQB53X.js";
-import "../chunk-GIHAFJYX.js";
+import "../chunk-BEYPMC73.js";
+import "../chunk-GVNPFXKL.js";
 export {
   Input
 };

package/build/modern/components/Notification.js

@@ -0,0 +1,12 @@
+"use client";
+import {
+  Notification
+} from "../chunk-OCBED5GL.js";
+import "../chunk-SLHX5K6I.js";
+import "../chunk-JIZQFTW6.js";
+import "../chunk-BEYPMC73.js";
+import "../chunk-GVNPFXKL.js";
+export {
+  Notification
+};
+//# sourceMappingURL=Notification.js.map

package/build/modern/components/Notification.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"sourcesContent":[],"mappings":"","names":[]}

package/build/modern/components/NotificationDescription.js

@@ -0,0 +1,7 @@
+import {
+  NotificationDescription
+} from "../chunk-SINTHADQ.js";
+export {
+  NotificationDescription
+};
+//# sourceMappingURL=NotificationDescription.js.map

package/build/modern/components/NotificationDescription.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"sourcesContent":[],"mappings":"","names":[]}

package/build/modern/components/NotificationHeading.js

@@ -0,0 +1,7 @@
+import {
+  NotificationHeading
+} from "../chunk-NWMNEJGU.js";
+export {
+  NotificationHeading
+};
+//# sourceMappingURL=NotificationHeading.js.map

package/build/modern/components/NotificationHeading.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"sourcesContent":[],"mappings":"","names":[]}

package/build/modern/components/Toggle.js

@@ -1,10 +1,10 @@
 "use client";
 import {
   Toggle
-} from "../chunk-ANXV7JDK.js";
+} from "../chunk-IL5ELPTT.js";
 import "../chunk-ZAU4JVLL.js";
-import "../chunk-OLQQB53X.js";
-import "../chunk-GIHAFJYX.js";
+import "../chunk-BEYPMC73.js";
+import "../chunk-GVNPFXKL.js";
 export {
   Toggle
 };

package/build/modern/config/cerbIcons.js

@@ -1,6 +1,6 @@
 import {
   defaultIcons
-} from "../chunk-GIHAFJYX.js";
+} from "../chunk-GVNPFXKL.js";
 export {
   defaultIcons
 };

package/build/modern/config/defineIcons.js

@@ -1,8 +1,8 @@
 import {
   $cerberusIcons,
   defineIcons
-} from "../chunk-OLQQB53X.js";
-import "../chunk-GIHAFJYX.js";
+} from "../chunk-BEYPMC73.js";
+import "../chunk-GVNPFXKL.js";
 export {
   $cerberusIcons,
   defineIcons

package/build/modern/context/confirm-modal.js

@@ -2,7 +2,7 @@
 import {
   ConfirmModal,
   useConfirmModal
-} from "../chunk-SHNZS357.js";
+} from "../chunk-ZPWSMCZ5.js";
 import "../chunk-4CAT3FHV.js";
 import "../chunk-2UFNQM55.js";
 import "../chunk-4M4LCQ43.js";
@@ -12,8 +12,8 @@ import "../chunk-JJP2TFTU.js";
 import "../chunk-2ATICEW3.js";
 import "../chunk-4O4QFF4S.js";
 import "../chunk-JIZQFTW6.js";
-import "../chunk-OLQQB53X.js";
-import "../chunk-GIHAFJYX.js";
+import "../chunk-BEYPMC73.js";
+import "../chunk-GVNPFXKL.js";
 import "../chunk-C5HLLGME.js";
 export {
   ConfirmModal,

package/build/modern/context/notification-center.js

@@ -0,0 +1,19 @@
+"use client";
+import {
+  NotificationCenter,
+  useNotificationCenter
+} from "../chunk-32E6OUMD.js";
+import "../chunk-OCBED5GL.js";
+import "../chunk-SINTHADQ.js";
+import "../chunk-NWMNEJGU.js";
+import "../chunk-4CAT3FHV.js";
+import "../chunk-4O4QFF4S.js";
+import "../chunk-SLHX5K6I.js";
+import "../chunk-JIZQFTW6.js";
+import "../chunk-BEYPMC73.js";
+import "../chunk-GVNPFXKL.js";
+export {
+  NotificationCenter,
+  useNotificationCenter
+};
+//# sourceMappingURL=notification-center.js.map

package/build/modern/context/notification-center.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"sourcesContent":[],"mappings":"","names":[]}

package/build/modern/context/prompt-modal.js

@@ -2,9 +2,9 @@
 import {
   PromptModal,
   usePromptModal
-} from "../chunk-DKHQ5GBY.js";
+} from "../chunk-BMQ7I2PL.js";
 import "../chunk-4CAT3FHV.js";
-import "../chunk-DED42MIR.js";
+import "../chunk-XB4ZRAH4.js";
 import "../chunk-JJGZRBIR.js";
 import "../chunk-2UFNQM55.js";
 import "../chunk-4M4LCQ43.js";
@@ -15,8 +15,8 @@ import "../chunk-2ATICEW3.js";
 import "../chunk-ZAU4JVLL.js";
 import "../chunk-4O4QFF4S.js";
 import "../chunk-JIZQFTW6.js";
-import "../chunk-OLQQB53X.js";
-import "../chunk-GIHAFJYX.js";
+import "../chunk-BEYPMC73.js";
+import "../chunk-GVNPFXKL.js";
 import "../chunk-C5HLLGME.js";
 export {
   PromptModal,

package/build/modern/index.js

@@ -1,3 +1,20 @@
+import {
+  NotificationCenter,
+  useNotificationCenter
+} from "./chunk-32E6OUMD.js";
+import {
+  PromptModal,
+  usePromptModal
+} from "./chunk-BMQ7I2PL.js";
+import {
+  Tab
+} from "./chunk-SONHHNYQ.js";
+import {
+  TabList
+} from "./chunk-ISPTI4GC.js";
+import {
+  TabPanel
+} from "./chunk-U72VPIZA.js";
 import {
   Tag
 } from "./chunk-Z6IWNVPN.js";
@@ -6,15 +23,11 @@ import {
 } from "./chunk-TCO46FK7.js";
 import {
   Toggle
-} from "./chunk-ANXV7JDK.js";
+} from "./chunk-IL5ELPTT.js";
 import {
   ConfirmModal,
   useConfirmModal
-} from "./chunk-SHNZS357.js";
-import {
-  PromptModal,
-  usePromptModal
-} from "./chunk-DKHQ5GBY.js";
+} from "./chunk-ZPWSMCZ5.js";
 import {
   NavMenuList,
   getPosition
@@ -26,24 +39,24 @@ import {
   NavMenu,
   useNavMenuContext
 } from "./chunk-KJUCHZHV.js";
+import {
+  Notification
+} from "./chunk-OCBED5GL.js";
+import {
+  NotificationDescription
+} from "./chunk-SINTHADQ.js";
+import {
+  NotificationHeading
+} from "./chunk-NWMNEJGU.js";
 import {
   Portal
 } from "./chunk-4CAT3FHV.js";
 import {
   Radio
 } from "./chunk-PH64POOB.js";
-import {
-  Tab
-} from "./chunk-SONHHNYQ.js";
-import {
-  TabList
-} from "./chunk-ISPTI4GC.js";
-import {
-  TabPanel
-} from "./chunk-U72VPIZA.js";
 import {
   Input
-} from "./chunk-DED42MIR.js";
+} from "./chunk-XB4ZRAH4.js";
 import {
   Label
 } from "./chunk-JJGZRBIR.js";
@@ -97,7 +110,7 @@ import {
 } from "./chunk-ZAU4JVLL.js";
 import {
   FileUploader
-} from "./chunk-2NSXMFKX.js";
+} from "./chunk-3YORUZIQ.js";
 import {
   Show
 } from "./chunk-4O4QFF4S.js";
@@ -122,8 +135,8 @@ import {
 import {
   $cerberusIcons,
   defineIcons
-} from "./chunk-OLQQB53X.js";
-import "./chunk-GIHAFJYX.js";
+} from "./chunk-BEYPMC73.js";
+import "./chunk-GVNPFXKL.js";
 import {
   useModal
 } from "./chunk-C5HLLGME.js";
@@ -153,6 +166,10 @@ export {
   NavMenuLink,
   NavMenuList,
   NavMenuTrigger,
+  Notification,
+  NotificationCenter,
+  NotificationDescription,
+  NotificationHeading,
   Portal,
   PromptModal,
   Radio,
@@ -176,6 +193,7 @@ export {
   useFieldContext,
   useModal,
   useNavMenuContext,
+  useNotificationCenter,
   usePromptModal,
   useTabsContext,
   useTabsKeyboardNavigation,

package/build/modern/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/index.ts"],"sourcesContent":["/**\n * This module is the entry point for the Cerberus React package.\n * @module\n */\n\n// components\n\nexport * from './components/Button'\nexport * from './components/Droppable'\nexport * from './components/FieldMessage'\nexport * from './components/FeatureFlag'\nexport * from './components/FileUploader'\nexport * from './components/IconButton'\nexport * from './components/Input'\nexport * from './components/Label'\nexport * from './components/Modal'\nexport * from './components/ModalHeader'\nexport * from './components/ModalHeading'\nexport * from './components/ModalDescription'\nexport * from './components/ModalIcon'\nexport * from './components/NavMenuTrigger'\nexport * from './components/NavMenuList'\nexport * from './components/NavMenuLink'\nexport * from './components/Portal'\nexport * from './components/Radio'\nexport * from './components/Tab'\nexport * from './components/TabList'\nexport * from './components/TabPanel'\nexport * from './components/Tag'\nexport * from './components/Textarea'\nexport * from './components/Toggle'\nexport * from './components/Show'\n\n// context\n\nexport * from './context/confirm-modal'\nexport * from './context/feature-flags'\nexport * from './context/field'\nexport * from './context/navMenu'\nexport * from './context/prompt-modal'\nexport * from './context/tabs'\nexport * from './context/theme'\n\n// hooks\n\nexport * from './hooks/useModal'\nexport * from './hooks/useTheme'\nexport * from './hooks/useToggle'\n\n// aria-helpers\n\nexport * from './aria-helpers/nav-menu.aria'\nexport * from './aria-helpers/tabs.aria'\nexport * from './aria-helpers/trap-focus.aria'\n\n// utils\n\nexport * from './config/defineIcons'\n\n// shared types\n\nexport * from './types'\n\n// 3rd party\n\nexport * from '@dnd-kit/core'\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAiEA,cAAc;","names":[]}
+{"version":3,"sources":["../../src/index.ts"],"sourcesContent":["/**\n * This module is the entry point for the Cerberus React package.\n * @module\n */\n\n// components\n\nexport * from './components/Button'\nexport * from './components/Droppable'\nexport * from './components/FieldMessage'\nexport * from './components/FeatureFlag'\nexport * from './components/FileUploader'\nexport * from './components/IconButton'\nexport * from './components/Input'\nexport * from './components/Label'\nexport * from './components/Modal'\nexport * from './components/ModalHeader'\nexport * from './components/ModalHeading'\nexport * from './components/ModalDescription'\nexport * from './components/ModalIcon'\nexport * from './components/NavMenuTrigger'\nexport * from './components/NavMenuList'\nexport * from './components/NavMenuLink'\nexport * from './components/Notification'\nexport * from './components/NotificationHeading'\nexport * from './components/NotificationDescription'\nexport * from './components/Portal'\nexport * from './components/Radio'\nexport * from './components/Tab'\nexport * from './components/TabList'\nexport * from './components/TabPanel'\nexport * from './components/Tag'\nexport * from './components/Textarea'\nexport * from './components/Toggle'\nexport * from './components/Show'\n\n// context\n\nexport * from './context/confirm-modal'\nexport * from './context/feature-flags'\nexport * from './context/field'\nexport * from './context/navMenu'\nexport * from './context/notification-center'\nexport * from './context/prompt-modal'\nexport * from './context/tabs'\nexport * from './context/theme'\n\n// hooks\n\nexport * from './hooks/useModal'\nexport * from './hooks/useTheme'\nexport * from './hooks/useToggle'\n\n// aria-helpers\n\nexport * from './aria-helpers/nav-menu.aria'\nexport * from './aria-helpers/tabs.aria'\nexport * from './aria-helpers/trap-focus.aria'\n\n// utils\n\nexport * from './config/defineIcons'\n\n// shared types\n\nexport * from './types'\n\n// 3rd party\n\nexport * from '@dnd-kit/core'\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAqEA,cAAc;","names":[]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cerberus-design/react",
-  "version": "0.7.4-next-92f76bb",
+  "version": "0.7.4-next-9a605c3",
   "description": "The Cerberus Design React component library.",
   "browserslist": "> 0.25%, not dead",
   "sideEffects": false,
@@ -25,8 +25,8 @@
     "react": "^18",
     "react-dom": "^18",
     "tsup": "^8.1.0",
-    "@cerberus-design/configs": "0.0.0",
-    "@cerberus-design/styled-system": "0.7.4-next-92f76bb"
+    "@cerberus-design/styled-system": "0.7.4-next-9a605c3",
+    "@cerberus-design/configs": "0.0.0"
   },
   "publishConfig": {
     "access": "public"

package/src/components/Notification.tsx

@@ -0,0 +1,94 @@
+'use client'
+
+import { cx } from '@cerberus-design/styled-system/css'
+import { hstack, vstack } from '@cerberus-design/styled-system/patterns'
+import {
+  notification,
+  type NotificationVariantProps,
+} from '@cerberus-design/styled-system/recipes'
+import {
+  useRef,
+  type DialogHTMLAttributes,
+  type PropsWithChildren,
+  type MouseEvent,
+} from 'react'
+import { IconButton } from './IconButton'
+import { Close } from '@cerberus/icons'
+import { $cerberusIcons } from '../config/defineIcons'
+import type { IconType } from '../config/cerbIcons'
+import { trapFocus } from '../aria-helpers/trap-focus.aria'
+
+/**
+ * This module exports the Notification component.
+ * @module
+ */
+
+function MatchNotificationIcon(props: NotificationVariantProps) {
+  const palette = props.palette || 'info'
+  const key = `${palette}Notification` as keyof typeof $cerberusIcons
+  const Icon = $cerberusIcons[key] as IconType
+  return <Icon />
+}
+
+export interface NotificationBaseProps
+  extends Omit<DialogHTMLAttributes<HTMLDialogElement>, 'onClose'> {
+  id: string
+  onClose?: (e: MouseEvent<HTMLButtonElement>) => void
+}
+export type NotificationProps = NotificationBaseProps & NotificationVariantProps
+
+/**
+ * The info notification component.
+ * @param props - The component props.
+ * @returns The info notification component.
+ * @example
+ * ```tsx
+ * <Notification id="info:1" open>
+ *  <NotificationHeading>Info Notification</NotificationHeading>
+ * <NotificationDescription>
+ *  This is a description with a <a href="#">link</a> in the message.
+ * </NotificationDescription>
+ * </Notification>
+ * ```
+ */
+export function Notification(props: PropsWithChildren<NotificationProps>) {
+  const { children, palette, onClose, ...nativeProps } = props
+  const ref = useRef<HTMLDialogElement>(null)
+  const onKeyDown = trapFocus(ref)
+  const styles = notification({ palette })
+
+  return (
+    <dialog
+      {...nativeProps}
+      className={cx(
+        nativeProps.className,
+        hstack({
+          position: 'relative',
+          gap: '4',
+        }),
+        styles.dialog,
+      )}
+      onKeyDown={onKeyDown}
+      ref={ref}
+      role="alert"
+    >
+      <span className={styles.icon}>
+        <MatchNotificationIcon palette={palette} />
+      </span>
+
+      <div
+        className={vstack({
+          alignItems: 'flex-start',
+          gap: '0',
+          py: '2',
+        })}
+      >
+        {children}
+      </div>
+
+      <IconButton ariaLabel="Close" onClick={onClose} value={props.id}>
+        <Close />
+      </IconButton>
+    </dialog>
+  )
+}

package/src/components/NotificationDescription.tsx

@@ -0,0 +1,31 @@
+/**
+ * This module exports the NotificationDescription component.
+ * @module
+ */
+
+import { cx } from '@cerberus-design/styled-system/css'
+import {
+  notification,
+  type NotificationVariantProps,
+} from '@cerberus-design/styled-system/recipes'
+import type { HTMLAttributes } from 'react'
+
+export interface BaseNotificationDescriptionProps
+  extends HTMLAttributes<HTMLParagraphElement> {}
+export type NotificationDescriptionProps = BaseNotificationDescriptionProps &
+  NotificationVariantProps
+
+/**
+ * The NotificationDescription component is used to render the description of a notification.
+ * @param props - The anything a HTMLParagraphElement can accept.
+ */
+export function NotificationDescription(props: NotificationDescriptionProps) {
+  const { palette, ...nativeProps } = props
+  const styles = notification({ palette })
+  return (
+    <p
+      className={cx(nativeProps.className, styles.description)}
+      {...nativeProps}
+    />
+  )
+}

package/src/components/NotificationHeading.tsx

@@ -0,0 +1,28 @@
+/**
+ * This module exports the NotificationHeading component.
+ * @module
+ */
+
+import { cx } from '@cerberus-design/styled-system/css'
+import {
+  notification,
+  type NotificationVariantProps,
+} from '@cerberus-design/styled-system/recipes'
+import type { HTMLAttributes } from 'react'
+
+export interface BaseNotificationHeadingProps
+  extends HTMLAttributes<HTMLParagraphElement> {}
+export type NotificationHeadingProps = BaseNotificationHeadingProps &
+  NotificationVariantProps
+
+/**
+ * The NotificationHeading component is used to render the heading of a notification.
+ * @param props - The anything a HTMLParagraphElement can accept.
+ */
+export function NotificationHeading(props: NotificationHeadingProps) {
+  const { palette, ...nativeProps } = props
+  const styles = notification({ palette })
+  return (
+    <p className={cx(nativeProps.className, styles.heading)} {...nativeProps} />
+  )
+}

package/src/config/cerbIcons.ts

@@ -1,24 +1,37 @@
 import {
   Checkmark,
+  CheckmarkFilled,
   CloudUpload,
+  ErrorFilled,
   Information,
+  InformationFilled,
   WarningFilled,
   type CarbonIconType,
 } from '@cerberus/icons'
 import type { ElementType } from 'react'
 
+export type IconType = CarbonIconType | ElementType
+
 export interface DefinedIcons {
-  confirmModal?: CarbonIconType | ElementType
-  fileUploader?: CarbonIconType | ElementType
-  promptModal?: CarbonIconType | ElementType
-  invalid: CarbonIconType | ElementType
-  toggleChecked?: CarbonIconType | ElementType
+  confirmModal?: IconType
+  promptModal?: IconType
+  fileUploader?: IconType
+  infoNotification?: IconType
+  successNotification?: IconType
+  warningNotification?: IconType
+  dangerNotification?: IconType
+  invalid: IconType
+  toggleChecked?: IconType
 }
 
 export const defaultIcons: DefinedIcons = {
   confirmModal: Information,
-  fileUploader: CloudUpload,
   promptModal: Information,
+  fileUploader: CloudUpload,
+  infoNotification: InformationFilled,
+  successNotification: CheckmarkFilled,
+  warningNotification: WarningFilled,
+  dangerNotification: ErrorFilled,
   invalid: WarningFilled,
   toggleChecked: Checkmark,
 }