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

package/build/legacy/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/legacy/config/cerbIcons.js

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

package/build/legacy/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/legacy/context/confirm-modal.js

@@ -2,7 +2,7 @@
 import {
   ConfirmModal,
   useConfirmModal
-} from "../chunk-7BB66W4A.js";
+} from "../chunk-4EMJR2AY.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-KESKDLX6.js";
-import "../chunk-OLQQB53X.js";
-import "../chunk-GIHAFJYX.js";
+import "../chunk-BEYPMC73.js";
+import "../chunk-GVNPFXKL.js";
 import "../chunk-TZNYJ3G7.js";
 export {
   ConfirmModal,

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

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

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

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

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

@@ -2,9 +2,9 @@
 import {
   PromptModal,
   usePromptModal
-} from "../chunk-3RZUW5KH.js";
+} from "../chunk-DB2OA5PU.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-KESKDLX6.js";
-import "../chunk-OLQQB53X.js";
-import "../chunk-GIHAFJYX.js";
+import "../chunk-BEYPMC73.js";
+import "../chunk-GVNPFXKL.js";
 import "../chunk-TZNYJ3G7.js";
 export {
   PromptModal,

package/build/legacy/index.js

@@ -1,3 +1,20 @@
+import {
+  NotificationCenter,
+  useNotificationCenter
+} from "./chunk-TAJBSUS7.js";
+import {
+  PromptModal,
+  usePromptModal
+} from "./chunk-DB2OA5PU.js";
+import {
+  Tab
+} from "./chunk-NE5NHILF.js";
+import {
+  TabList
+} from "./chunk-ISPTI4GC.js";
+import {
+  TabPanel
+} from "./chunk-U72VPIZA.js";
 import {
   Tag
 } from "./chunk-EVEEQRH6.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-7BB66W4A.js";
-import {
-  PromptModal,
-  usePromptModal
-} from "./chunk-3RZUW5KH.js";
+} from "./chunk-4EMJR2AY.js";
 import {
   NavMenuList,
   getPosition
@@ -26,24 +39,24 @@ import {
   NavMenu,
   useNavMenuContext
 } from "./chunk-KJUCHZHV.js";
+import {
+  Notification
+} from "./chunk-SPGBCV6A.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-NE5NHILF.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-DCI4IKCI.js";
+} from "./chunk-X5JR5LSC.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-TZNYJ3G7.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/legacy/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/build/modern/_tsup-dts-rollup.d.ts

@@ -25,6 +25,7 @@ import { defaultCoordinates } from '@dnd-kit/core';
 import { defaultDropAnimation } from '@dnd-kit/core';
 import { defaultDropAnimationSideEffects } from '@dnd-kit/core';
 import { defaultScreenReaderInstructions } from '@dnd-kit/core';
+import { DialogHTMLAttributes } from 'react';
 import { DistanceMeasurement } from '@dnd-kit/core';
 import { DndContext } from '@dnd-kit/core';
 import { DndContextDescriptor } from '@dnd-kit/core';
@@ -76,9 +77,11 @@ import { MeasuringStrategy } from '@dnd-kit/core';
 import { ModalIconVariantProps } from '@cerberus/styled-system/recipes';
 import { Modifier } from '@dnd-kit/core';
 import { Modifiers } from '@dnd-kit/core';
+import { MouseEvent as MouseEvent_2 } from 'react';
 import { MouseSensor } from '@dnd-kit/core';
 import { MouseSensorOptions } from '@dnd-kit/core';
 import { MutableRefObject } from 'react';
+import { NotificationVariantProps } from '@cerberus-design/styled-system/recipes';
 import { Over } from '@dnd-kit/core';
 import { PointerActivationConstraint } from '@dnd-kit/core';
 import { PointerEventHandlers } from '@dnd-kit/core';
@@ -143,6 +146,16 @@ export { AutoScrollActivator }
 
 export { AutoScrollOptions }
 
+declare interface BaseNotificationDescriptionProps extends HTMLAttributes<HTMLParagraphElement> {
+}
+export { BaseNotificationDescriptionProps }
+export { BaseNotificationDescriptionProps as BaseNotificationDescriptionProps_alias_1 }
+
+declare interface BaseNotificationHeadingProps extends HTMLAttributes<HTMLParagraphElement> {
+}
+export { BaseNotificationHeadingProps }
+export { BaseNotificationHeadingProps as BaseNotificationHeadingProps_alias_1 }
+
 /**
  * A component that allows the user to perform actions
  * @description https://github.com/omnifed/cerberus/blob/main/packages/react/src/components/Button.tsx
@@ -255,11 +268,15 @@ export { DefaultThemes }
 export { DefaultThemes as DefaultThemes_alias_1 }
 
 export declare 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;
 }
 
 declare function defineIcons(icons: DefinedIcons): Required<DefinedIcons>;
@@ -482,6 +499,8 @@ declare type IconButtonRecipeProps = RecipeVariantProps<typeof iconButton>;
 export { IconButtonRecipeProps }
 export { IconButtonRecipeProps as IconButtonRecipeProps_alias_1 }
 
+export declare type IconType = CarbonIconType | ElementType;
+
 declare function Input(props: InputProps): JSX_2.Element;
 export { Input }
 export { Input as Input_alias_1 }
@@ -758,6 +777,109 @@ declare type NavTriggerRef = RefObject<HTMLButtonElement>;
 export { NavTriggerRef }
 export { NavTriggerRef as NavTriggerRef_alias_1 }
 
+/**
+ * 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>
+ * ```
+ */
+declare function Notification_2(props: PropsWithChildren<NotificationProps>): JSX_2.Element;
+export { Notification_2 as Notification }
+export { Notification_2 as Notification_alias_1 }
+
+declare interface NotificationBaseProps extends Omit<DialogHTMLAttributes<HTMLDialogElement>, 'onClose'> {
+    id: string;
+    onClose?: (e: MouseEvent_2<HTMLButtonElement>) => void;
+}
+export { NotificationBaseProps }
+export { NotificationBaseProps as NotificationBaseProps_alias_1 }
+
+/**
+ * Provides a notification center to the app.
+ * @example
+ * ```tsx
+ * // Wrap the Provider around the root of the feature.
+ * <Notifications>
+ *   <SomeFeatureSection />
+ * </Notifications>
+ *
+ * // Use the hook to show a notification.
+ * const notify = useNotifications()
+ *
+ * const handleClick = useCallback(() => {
+ *  notify({
+ *   palette: 'info',
+ *   heading: 'New feature!',
+ *   description: 'We have added a new feature to the app.',
+ * })
+ * }, [notify])
+ * ```
+ */
+declare function NotificationCenter(props: PropsWithChildren<NotificationsProviderProps>): JSX_2.Element;
+export { NotificationCenter }
+export { NotificationCenter as NotificationCenter_alias_1 }
+
+/**
+ * The NotificationDescription component is used to render the description of a notification.
+ * @param props - The anything a HTMLParagraphElement can accept.
+ */
+declare function NotificationDescription(props: NotificationDescriptionProps): JSX_2.Element;
+export { NotificationDescription }
+export { NotificationDescription as NotificationDescription_alias_1 }
+
+declare type NotificationDescriptionProps = BaseNotificationDescriptionProps & NotificationVariantProps;
+export { NotificationDescriptionProps }
+export { NotificationDescriptionProps as NotificationDescriptionProps_alias_1 }
+
+/**
+ * The NotificationHeading component is used to render the heading of a notification.
+ * @param props - The anything a HTMLParagraphElement can accept.
+ */
+declare function NotificationHeading(props: NotificationHeadingProps): JSX_2.Element;
+export { NotificationHeading }
+export { NotificationHeading as NotificationHeading_alias_1 }
+
+declare type NotificationHeadingProps = BaseNotificationHeadingProps & NotificationVariantProps;
+export { NotificationHeadingProps }
+export { NotificationHeadingProps as NotificationHeadingProps_alias_1 }
+
+declare type NotificationProps = NotificationBaseProps & NotificationVariantProps;
+export { NotificationProps }
+export { NotificationProps as NotificationProps_alias_1 }
+
+declare interface NotificationsProviderProps extends PortalProps {
+}
+export { NotificationsProviderProps }
+export { NotificationsProviderProps as NotificationsProviderProps_alias_1 }
+
+declare interface NotificationsValue {
+    notify: (options: NotifyOptions) => void;
+}
+export { NotificationsValue }
+export { NotificationsValue as NotificationsValue_alias_1 }
+
+/**
+ * This module provides a context and hook for notifications.
+ * @module
+ */
+declare interface NotifyOptions {
+    palette: 'info' | 'success' | 'warning' | 'danger';
+    heading: string;
+    id?: string;
+    description?: ReactNode;
+    onClose?: () => void;
+}
+export { NotifyOptions }
+export { NotifyOptions as NotifyOptions_alias_1 }
+
 export { Over }
 
 export { PointerActivationConstraint }
@@ -1219,6 +1341,23 @@ declare function useNavMenuContext(): NavMenuContextValue;
 export { useNavMenuContext }
 export { useNavMenuContext as useNavMenuContext_alias_1 }
 
+/**
+ * The hook to use the NotificationCenter.
+ * @returns The notify method to trigger a notification.
+ * @example
+ * ```tsx
+ * const {notify} = useNotificationCenter()
+ * notify({
+ *  palette: 'info',
+ *  heading: 'New feature',
+ *  description: 'We have added a new feature to the app.',
+ * })
+ * ```
+ */
+declare function useNotificationCenter(): NotificationsValue;
+export { useNotificationCenter }
+export { useNotificationCenter as useNotificationCenter_alias_1 }
+
 declare function usePromptModal(): PromptModalValue;
 export { usePromptModal }
 export { usePromptModal as usePromptModal_alias_1 }

package/build/modern/chunk-32E6OUMD.js

@@ -0,0 +1,99 @@
+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 {
+  Show
+} from "./chunk-4O4QFF4S.js";
+
+// src/context/notification-center.tsx
+import {
+  createContext,
+  useCallback,
+  useContext,
+  useMemo,
+  useState
+} from "react";
+import { vstack } from "@cerberus-design/styled-system/patterns";
+import { cx } from "@cerberus-design/styled-system/css";
+import { notification } from "@cerberus-design/styled-system/recipes";
+import { jsx, jsxs } from "react/jsx-runtime";
+var NotificationsContext = createContext(null);
+function NotificationCenter(props) {
+  const [activeNotifications, setActiveNotifications] = useState([]);
+  const handleNotify = useCallback((options) => {
+    setActiveNotifications((prev) => {
+      const id = `${options.palette}:${prev.length + 1}`;
+      return [...prev, { ...options, id }];
+    });
+  }, []);
+  const handleClose = useCallback((e) => {
+    const target = e.currentTarget;
+    setActiveNotifications((prev) => {
+      const item = prev.find((option) => option.id === target.value);
+      if (item?.onClose) item.onClose();
+      return prev.filter((option) => option.id !== target.value);
+    });
+  }, []);
+  const value = useMemo(
+    () => ({
+      notify: handleNotify
+    }),
+    [handleNotify]
+  );
+  return /* @__PURE__ */ jsxs(NotificationsContext.Provider, { value, children: [
+    props.children,
+    /* @__PURE__ */ jsx(Show, { when: activeNotifications.length > 0, children: /* @__PURE__ */ jsx(Portal, { container: props.container, children: /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: cx(
+          notification().center,
+          vstack({
+            alignItems: "flex-end",
+            gap: "4"
+          })
+        ),
+        style: {
+          alignItems: "flex-end"
+        },
+        children: activeNotifications.map((option) => /* @__PURE__ */ jsxs(
+          Notification,
+          {
+            id: option.id,
+            onClose: handleClose,
+            open: true,
+            palette: option.palette,
+            children: [
+              /* @__PURE__ */ jsx(NotificationHeading, { palette: option.palette, children: option.heading }),
+              /* @__PURE__ */ jsx(NotificationDescription, { palette: option.palette, children: option.description })
+            ]
+          },
+          option.id
+        ))
+      }
+    ) }) })
+  ] });
+}
+function useNotificationCenter() {
+  const context = useContext(NotificationsContext);
+  if (!context) {
+    throw new Error(
+      "useNotificationCenter must be used within a NotificationsProvider"
+    );
+  }
+  return context;
+}
+
+export {
+  NotificationCenter,
+  useNotificationCenter
+};
+//# sourceMappingURL=chunk-32E6OUMD.js.map

package/build/modern/chunk-32E6OUMD.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/context/notification-center.tsx"],"sourcesContent":["'use client'\n\nimport {\n  createContext,\n  useCallback,\n  useContext,\n  useMemo,\n  useState,\n  type MouseEvent,\n  type PropsWithChildren,\n  type ReactNode,\n} from 'react'\nimport { Show } from '../components/Show'\nimport { NotificationHeading } from '../components/NotificationHeading'\nimport { NotificationDescription } from '../components/NotificationDescription'\nimport { Notification } from '../components/Notification'\nimport { vstack } from '@cerberus-design/styled-system/patterns'\nimport { Portal, type PortalProps } from '../components/Portal'\nimport { cx } from '@cerberus-design/styled-system/css'\nimport { notification } from '@cerberus-design/styled-system/recipes'\n\n/**\n * This module provides a context and hook for notifications.\n * @module\n */\n\nexport interface NotifyOptions {\n  palette: 'info' | 'success' | 'warning' | 'danger'\n  heading: string\n  id?: string\n  description?: ReactNode\n  onClose?: () => void\n}\n\nexport interface NotificationsValue {\n  notify: (options: NotifyOptions) => void\n}\n\nconst NotificationsContext = createContext<NotificationsValue | null>(null)\n\nexport interface NotificationsProviderProps extends PortalProps {}\n\n/**\n * Provides a notification center to the app.\n * @example\n * ```tsx\n * // Wrap the Provider around the root of the feature.\n * <Notifications>\n *   <SomeFeatureSection />\n * </Notifications>\n *\n * // Use the hook to show a notification.\n * const notify = useNotifications()\n *\n * const handleClick = useCallback(() => {\n *  notify({\n *   palette: 'info',\n *   heading: 'New feature!',\n *   description: 'We have added a new feature to the app.',\n * })\n * }, [notify])\n * ```\n */\nexport function NotificationCenter(\n  props: PropsWithChildren<NotificationsProviderProps>,\n) {\n  const [activeNotifications, setActiveNotifications] = useState<\n    NotifyOptions[]\n  >([])\n\n  const handleNotify = useCallback((options: NotifyOptions) => {\n    setActiveNotifications((prev) => {\n      const id = `${options.palette}:${prev.length + 1}`\n      return [...prev, { ...options, id }]\n    })\n  }, [])\n\n  const handleClose = useCallback((e: MouseEvent<HTMLButtonElement>) => {\n    const target = e.currentTarget as HTMLButtonElement\n    setActiveNotifications((prev) => {\n      const item = prev.find((option) => option.id === target.value)\n      if (item?.onClose) item.onClose()\n      return prev.filter((option) => option.id !== target.value)\n    })\n  }, [])\n\n  const value = useMemo(\n    () => ({\n      notify: handleNotify,\n    }),\n    [handleNotify],\n  )\n\n  // For some reason, the vstack pattern alignItems is not registering here.\n  // So we are forcing it with the style prop.\n\n  return (\n    <NotificationsContext.Provider value={value}>\n      {props.children}\n\n      <Show when={activeNotifications.length > 0}>\n        <Portal container={props.container}>\n          <div\n            className={cx(\n              notification().center,\n              vstack({\n                alignItems: 'flex-end',\n                gap: '4',\n              }),\n            )}\n            style={{\n              alignItems: 'flex-end',\n            }}\n          >\n            {activeNotifications.map((option) => (\n              <Notification\n                id={option.id!}\n                key={option.id}\n                onClose={handleClose}\n                open\n                palette={option.palette}\n              >\n                <NotificationHeading palette={option.palette}>\n                  {option.heading}\n                </NotificationHeading>\n                <NotificationDescription palette={option.palette}>\n                  {option.description}\n                </NotificationDescription>\n              </Notification>\n            ))}\n          </div>\n        </Portal>\n      </Show>\n    </NotificationsContext.Provider>\n  )\n}\n\n/**\n * The hook to use the NotificationCenter.\n * @returns The notify method to trigger a notification.\n * @example\n * ```tsx\n * const {notify} = useNotificationCenter()\n * notify({\n *  palette: 'info',\n *  heading: 'New feature',\n *  description: 'We have added a new feature to the app.',\n * })\n * ```\n */\nexport function useNotificationCenter(): NotificationsValue {\n  const context = useContext(NotificationsContext)\n  if (!context) {\n    throw new Error(\n      'useNotificationCenter must be used within a NotificationsProvider',\n    )\n  }\n  return context\n}\n"],"mappings":";;;;;;;;;;;;;;;;;AAEA;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OAIK;AAKP,SAAS,cAAc;AAEvB,SAAS,UAAU;AACnB,SAAS,oBAAoB;AAgGf,SAOE,KAPF;AA7Ed,IAAM,uBAAuB,cAAyC,IAAI;AAyBnE,SAAS,mBACd,OACA;AACA,QAAM,CAAC,qBAAqB,sBAAsB,IAAI,SAEpD,CAAC,CAAC;AAEJ,QAAM,eAAe,YAAY,CAAC,YAA2B;AAC3D,2BAAuB,CAAC,SAAS;AAC/B,YAAM,KAAK,GAAG,QAAQ,OAAO,IAAI,KAAK,SAAS,CAAC;AAChD,aAAO,CAAC,GAAG,MAAM,EAAE,GAAG,SAAS,GAAG,CAAC;AAAA,IACrC,CAAC;AAAA,EACH,GAAG,CAAC,CAAC;AAEL,QAAM,cAAc,YAAY,CAAC,MAAqC;AACpE,UAAM,SAAS,EAAE;AACjB,2BAAuB,CAAC,SAAS;AAC/B,YAAM,OAAO,KAAK,KAAK,CAAC,WAAW,OAAO,OAAO,OAAO,KAAK;AAC7D,UAAI,MAAM,QAAS,MAAK,QAAQ;AAChC,aAAO,KAAK,OAAO,CAAC,WAAW,OAAO,OAAO,OAAO,KAAK;AAAA,IAC3D,CAAC;AAAA,EACH,GAAG,CAAC,CAAC;AAEL,QAAM,QAAQ;AAAA,IACZ,OAAO;AAAA,MACL,QAAQ;AAAA,IACV;AAAA,IACA,CAAC,YAAY;AAAA,EACf;AAKA,SACE,qBAAC,qBAAqB,UAArB,EAA8B,OAC5B;AAAA,UAAM;AAAA,IAEP,oBAAC,QAAK,MAAM,oBAAoB,SAAS,GACvC,8BAAC,UAAO,WAAW,MAAM,WACvB;AAAA,MAAC;AAAA;AAAA,QACC,WAAW;AAAA,UACT,aAAa,EAAE;AAAA,UACf,OAAO;AAAA,YACL,YAAY;AAAA,YACZ,KAAK;AAAA,UACP,CAAC;AAAA,QACH;AAAA,QACA,OAAO;AAAA,UACL,YAAY;AAAA,QACd;AAAA,QAEC,8BAAoB,IAAI,CAAC,WACxB;AAAA,UAAC;AAAA;AAAA,YACC,IAAI,OAAO;AAAA,YAEX,SAAS;AAAA,YACT,MAAI;AAAA,YACJ,SAAS,OAAO;AAAA,YAEhB;AAAA,kCAAC,uBAAoB,SAAS,OAAO,SAClC,iBAAO,SACV;AAAA,cACA,oBAAC,2BAAwB,SAAS,OAAO,SACtC,iBAAO,aACV;AAAA;AAAA;AAAA,UAVK,OAAO;AAAA,QAWd,CACD;AAAA;AAAA,IACH,GACF,GACF;AAAA,KACF;AAEJ;AAeO,SAAS,wBAA4C;AAC1D,QAAM,UAAU,WAAW,oBAAoB;AAC/C,MAAI,CAAC,SAAS;AACZ,UAAM,IAAI;AAAA,MACR;AAAA,IACF;AAAA,EACF;AACA,SAAO;AACT;","names":[]}

package/build/modern/{chunk-2NSXMFKX.js → chunk-3YORUZIQ.js}

@@ -3,7 +3,7 @@ import {
 } from "./chunk-4O4QFF4S.js";
 import {
   $cerberusIcons
-} from "./chunk-OLQQB53X.js";
+} from "./chunk-BEYPMC73.js";
 
 // src/components/FileUploader.tsx
 import { cx } from "@cerberus-design/styled-system/css";
@@ -59,4 +59,4 @@ function FileUploader(props) {
 export {
   FileUploader
 };
-//# sourceMappingURL=chunk-2NSXMFKX.js.map
+//# sourceMappingURL=chunk-3YORUZIQ.js.map

package/build/modern/{chunk-OLQQB53X.js → chunk-BEYPMC73.js}

@@ -1,6 +1,6 @@
 import {
   defaultIcons
-} from "./chunk-GIHAFJYX.js";
+} from "./chunk-GVNPFXKL.js";
 
 // src/config/defineIcons.ts
 function _validateIconsProperties(icons) {
@@ -24,4 +24,4 @@ export {
   defineIcons,
   $cerberusIcons
 };
-//# sourceMappingURL=chunk-OLQQB53X.js.map
+//# sourceMappingURL=chunk-BEYPMC73.js.map

package/build/modern/{chunk-DKHQ5GBY.js → chunk-BMQ7I2PL.js}

@@ -3,7 +3,7 @@ import {
 } from "./chunk-4CAT3FHV.js";
 import {
   Input
-} from "./chunk-DED42MIR.js";
+} from "./chunk-XB4ZRAH4.js";
 import {
   Label
 } from "./chunk-JJGZRBIR.js";
@@ -36,7 +36,7 @@ import {
 } from "./chunk-JIZQFTW6.js";
 import {
   $cerberusIcons
-} from "./chunk-OLQQB53X.js";
+} from "./chunk-BEYPMC73.js";
 import {
   useModal
 } from "./chunk-C5HLLGME.js";
@@ -204,4 +204,4 @@ export {
   PromptModal,
   usePromptModal
 };
-//# sourceMappingURL=chunk-DKHQ5GBY.js.map
+//# sourceMappingURL=chunk-BMQ7I2PL.js.map

package/build/modern/{chunk-GIHAFJYX.js → chunk-GVNPFXKL.js}

@@ -1,14 +1,21 @@
 // src/config/cerbIcons.ts
 import {
   Checkmark,
+  CheckmarkFilled,
   CloudUpload,
+  ErrorFilled,
   Information,
+  InformationFilled,
   WarningFilled
 } from "@cerberus/icons";
 var defaultIcons = {
   confirmModal: Information,
-  fileUploader: CloudUpload,
   promptModal: Information,
+  fileUploader: CloudUpload,
+  infoNotification: InformationFilled,
+  successNotification: CheckmarkFilled,
+  warningNotification: WarningFilled,
+  dangerNotification: ErrorFilled,
   invalid: WarningFilled,
   toggleChecked: Checkmark
 };
@@ -16,4 +23,4 @@ var defaultIcons = {
 export {
   defaultIcons
 };
-//# sourceMappingURL=chunk-GIHAFJYX.js.map
+//# sourceMappingURL=chunk-GVNPFXKL.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/config/cerbIcons.ts"],"sourcesContent":["import {\n  Checkmark,\n  CheckmarkFilled,\n  CloudUpload,\n  ErrorFilled,\n  Information,\n  InformationFilled,\n  WarningFilled,\n  type CarbonIconType,\n} from '@cerberus/icons'\nimport type { ElementType } from 'react'\n\nexport type IconType = CarbonIconType | ElementType\n\nexport interface DefinedIcons {\n  confirmModal?: IconType\n  promptModal?: IconType\n  fileUploader?: IconType\n  infoNotification?: IconType\n  successNotification?: IconType\n  warningNotification?: IconType\n  dangerNotification?: IconType\n  invalid: IconType\n  toggleChecked?: IconType\n}\n\nexport const defaultIcons: DefinedIcons = {\n  confirmModal: Information,\n  promptModal: Information,\n  fileUploader: CloudUpload,\n  infoNotification: InformationFilled,\n  successNotification: CheckmarkFilled,\n  warningNotification: WarningFilled,\n  dangerNotification: ErrorFilled,\n  invalid: WarningFilled,\n  toggleChecked: Checkmark,\n}\n"],"mappings":";AAAA;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OAEK;AAiBA,IAAM,eAA6B;AAAA,EACxC,cAAc;AAAA,EACd,aAAa;AAAA,EACb,cAAc;AAAA,EACd,kBAAkB;AAAA,EAClB,qBAAqB;AAAA,EACrB,qBAAqB;AAAA,EACrB,oBAAoB;AAAA,EACpB,SAAS;AAAA,EACT,eAAe;AACjB;","names":[]}

package/build/modern/{chunk-ANXV7JDK.js → chunk-IL5ELPTT.js}

@@ -3,7 +3,7 @@ import {
 } from "./chunk-ZAU4JVLL.js";
 import {
   $cerberusIcons
-} from "./chunk-OLQQB53X.js";
+} from "./chunk-BEYPMC73.js";
 
 // src/components/Toggle.tsx
 import { cx } from "@cerberus/styled-system/css";
@@ -55,4 +55,4 @@ function Toggle(props) {
 export {
   Toggle
 };
-//# sourceMappingURL=chunk-ANXV7JDK.js.map
+//# sourceMappingURL=chunk-IL5ELPTT.js.map

package/build/modern/chunk-NWMNEJGU.js

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

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/components/NotificationHeading.tsx"],"sourcesContent":["/**\n * This module exports the NotificationHeading 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 BaseNotificationHeadingProps\n  extends HTMLAttributes<HTMLParagraphElement> {}\nexport type NotificationHeadingProps = BaseNotificationHeadingProps &\n  NotificationVariantProps\n\n/**\n * The NotificationHeading component is used to render the heading of a notification.\n * @param props - The anything a HTMLParagraphElement can accept.\n */\nexport function NotificationHeading(props: NotificationHeadingProps) {\n  const { palette, ...nativeProps } = props\n  const styles = notification({ palette })\n  return (\n    <p className={cx(nativeProps.className, styles.heading)} {...nativeProps} />\n  )\n}\n"],"mappings":";AAKA,SAAS,UAAU;AACnB;AAAA,EACE;AAAA,OAEK;AAgBH;AAJG,SAAS,oBAAoB,OAAiC;AACnE,QAAM,EAAE,SAAS,GAAG,YAAY,IAAI;AACpC,QAAM,SAAS,aAAa,EAAE,QAAQ,CAAC;AACvC,SACE,oBAAC,OAAE,WAAW,GAAG,YAAY,WAAW,OAAO,OAAO,GAAI,GAAG,aAAa;AAE9E;","names":[]}