@cerberus-design/react 0.13.1-next-e3e9e48 → 0.13.1-next-8c8a5ee

package/build/modern/_tsup-dts-rollup.d.ts

@@ -299,6 +299,27 @@ declare type AvatarProps = (HtmlHTMLAttributes<HTMLDivElement> & AvatarVariantPr
 export { AvatarProps }
 export { AvatarProps as AvatarProps_alias_1 }
 
+/**
+ * This module provides a context and hook for the confirm modal.
+ * @module
+ */
+declare interface BaseConfirmOptions {
+    /**
+     * The heading of the confirm modal.
+     */
+    heading: string;
+    /**
+     * The text for the action button.
+     */
+    actionText: string;
+    /**
+     * The text for the cancel button.
+     */
+    cancelText: string;
+}
+export { BaseConfirmOptions }
+export { BaseConfirmOptions as BaseConfirmOptions_alias_1 }
+
 /**
  * This module exports the NotificationDescription component.
  * @module
@@ -640,6 +661,19 @@ declare function defineIcons(icons: DefinedIcons): Required<DefinedIcons>;
 export { defineIcons }
 export { defineIcons as defineIcons_alias_1 }
 
+declare interface DestructiveConfirmOptions extends BaseConfirmOptions {
+    /**
+     * The kind of confirm modal to show.
+     */
+    kind?: 'destructive';
+    /**
+     * The description of the confirm modal. Can only be a string for destructive confirm modals.
+     */
+    description?: string;
+}
+export { DestructiveConfirmOptions }
+export { DestructiveConfirmOptions as DestructiveConfirmOptions_alias_1 }
+
 export { DistanceMeasurement }
 
 export { DndContext }
@@ -1669,6 +1703,23 @@ declare type NavTriggerRef = RefObject<HTMLButtonElement>;
 export { NavTriggerRef }
 export { NavTriggerRef as NavTriggerRef_alias_1 }
 
+declare interface NonDestructiveConfirmModalOptions extends BaseConfirmOptions {
+    /**
+     * The kind of confirm modal to show.
+     * @default 'non-destructive'
+     */
+    kind?: 'non-destructive';
+    /**
+     * The description of the confirm modal. Can be a ReactNode for non-destructive kind if you need to display text links.
+     * @example
+     * ```tsx
+     * description: <>Use a Fragment because we put the content within a Paragraph tag.</>
+     */
+    description?: ReactNode;
+}
+export { NonDestructiveConfirmModalOptions }
+export { NonDestructiveConfirmModalOptions as NonDestructiveConfirmModalOptions_alias_1 }
+
 declare type NonIndeterminateProgressBarProps = {
     /**
      * A unique identifier for the progress bar. Required for accessibility.
@@ -2138,33 +2189,7 @@ declare function Show(props: PropsWithChildren<ShowProps>): ReactNode;
 export { Show }
 export { Show as Show_alias_1 }
 
-/**
- * This module provides a context and hook for the confirm modal.
- * @module
- */
-declare interface ShowConfirmModalOptions {
-    /**
-     * The kind of confirm modal to show.
-     * @default 'non-destructive'
-     */
-    kind?: 'destructive' | 'non-destructive';
-    /**
-     * The heading of the confirm modal.
-     */
-    heading: string;
-    /**
-     * The description of the confirm modal.
-     */
-    description?: string;
-    /**
-     * The text for the action button.
-     */
-    actionText: string;
-    /**
-     * The text for the cancel button.
-     */
-    cancelText: string;
-}
+declare type ShowConfirmModalOptions = NonDestructiveConfirmModalOptions | DestructiveConfirmOptions;
 export { ShowConfirmModalOptions }
 export { ShowConfirmModalOptions as ShowConfirmModalOptions_alias_1 }
 

package/build/modern/{chunk-KFGI37CO.js → chunk-4D6VIGNQ.js}

@@ -3,7 +3,7 @@ import {
 } from "./chunk-K2PSHGS7.js";
 import {
   ModalHeader
-} from "./chunk-ZFAIE47A.js";
+} from "./chunk-XY6WL55R.js";
 import {
   ModalHeading
 } from "./chunk-2UXE5PDG.js";
@@ -43,6 +43,7 @@ import {
 } from "react";
 import { css } from "@cerberus/styled-system/css";
 import { hstack } from "@cerberus/styled-system/patterns";
+import { HStack, VStack } from "@cerberus/styled-system/jsx";
 import { jsx, jsxs } from "react/jsx-runtime";
 var ConfirmModalContext = createContext(null);
 function ConfirmModal(props) {
@@ -51,9 +52,10 @@ function ConfirmModal(props) {
   const [content, setContent] = useState(null);
   const focusTrap = trapFocus(modalRef);
   const ConfirmIcon = $cerberusIcons.confirmModal;
+  const kind = content?.kind ?? "non-destructive";
   const palette = useMemo(
-    () => content?.kind === "destructive" ? "danger" : "action",
-    [content]
+    () => kind === "destructive" ? "danger" : "action",
+    [kind]
   );
   const handleChoice = useCallback(
     (e) => {
@@ -69,7 +71,7 @@ function ConfirmModal(props) {
   const handleShow = useCallback(
     (options) => {
       return new Promise((resolve) => {
-        setContent({ ...options, kind: options.kind || "non-destructive" });
+        setContent({ ...options });
         show();
         resolveRef.current = resolve;
       });
@@ -84,7 +86,7 @@ function ConfirmModal(props) {
   );
   return /* @__PURE__ */ jsxs(ConfirmModalContext.Provider, { value, children: [
     props.children,
-    /* @__PURE__ */ jsx(Portal, { children: /* @__PURE__ */ jsxs(Modal, { onKeyDown: focusTrap, ref: modalRef, children: [
+    /* @__PURE__ */ jsx(Portal, { children: /* @__PURE__ */ jsx(Modal, { onKeyDown: focusTrap, ref: modalRef, children: /* @__PURE__ */ jsxs(VStack, { gap: "xl", w: "full", children: [
       /* @__PURE__ */ jsxs(ModalHeader, { children: [
         /* @__PURE__ */ jsx(
           "div",
@@ -122,44 +124,36 @@ function ConfirmModal(props) {
         /* @__PURE__ */ jsx(ModalHeading, { children: content?.heading }),
         /* @__PURE__ */ jsx(ModalDescription, { children: content?.description })
       ] }),
-      /* @__PURE__ */ jsxs(
-        "div",
-        {
-          className: hstack({
-            gap: "4"
-          }),
-          children: [
-            /* @__PURE__ */ jsx(
-              Button,
-              {
-                autoFocus: true,
-                className: css({
-                  w: "1/2"
-                }),
-                name: "confirm",
-                onClick: handleChoice,
-                palette,
-                value: "true",
-                children: content?.actionText
-              }
-            ),
-            /* @__PURE__ */ jsx(
-              Button,
-              {
-                className: css({
-                  w: "1/2"
-                }),
-                name: "cancel",
-                onClick: handleChoice,
-                usage: "outlined",
-                value: "false",
-                children: content?.cancelText
-              }
-            )
-          ]
-        }
-      )
-    ] }) })
+      /* @__PURE__ */ jsxs(HStack, { gap: "4", w: "full", children: [
+        /* @__PURE__ */ jsx(
+          Button,
+          {
+            autoFocus: true,
+            className: css({
+              w: "1/2"
+            }),
+            name: "confirm",
+            onClick: handleChoice,
+            palette,
+            value: "true",
+            children: content?.actionText
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          Button,
+          {
+            className: css({
+              w: "1/2"
+            }),
+            name: "cancel",
+            onClick: handleChoice,
+            usage: "outlined",
+            value: "false",
+            children: content?.cancelText
+          }
+        )
+      ] })
+    ] }) }) })
   ] });
 }
 function useConfirmModal() {
@@ -176,4 +170,4 @@ export {
   ConfirmModal,
   useConfirmModal
 };
-//# sourceMappingURL=chunk-KFGI37CO.js.map
+//# sourceMappingURL=chunk-4D6VIGNQ.js.map

package/build/modern/chunk-4D6VIGNQ.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/context/confirm-modal.tsx"],"sourcesContent":["'use client'\n\nimport {\n  createContext,\n  useCallback,\n  useContext,\n  useMemo,\n  useRef,\n  useState,\n  type MouseEvent,\n  type PropsWithChildren,\n  type ReactNode,\n} from 'react'\nimport { Portal } from '../components/Portal'\nimport { Button } from '../components/Button'\nimport { css } from '@cerberus/styled-system/css'\nimport { hstack } from '@cerberus/styled-system/patterns'\nimport { $cerberusIcons } from '../config/defineIcons'\nimport { trapFocus } from '../aria-helpers/trap-focus.aria'\nimport { Show } from '../components/Show'\nimport { Modal } from '../components/Modal'\nimport { useModal } from '../hooks/useModal'\nimport { ModalHeader } from '../components/ModalHeader'\nimport { ModalHeading } from '../components/ModalHeading'\nimport { ModalDescription } from '../components/ModalDescription'\nimport { Avatar } from '../components/Avatar'\nimport { HStack, VStack } from '@cerberus/styled-system/jsx'\n\n/**\n * This module provides a context and hook for the confirm modal.\n * @module\n */\n\nexport interface BaseConfirmOptions {\n  /**\n   * The heading of the confirm modal.\n   */\n  heading: string\n  /**\n   * The text for the action button.\n   */\n  actionText: string\n  /**\n   * The text for the cancel button.\n   */\n  cancelText: string\n}\n\nexport interface DestructiveConfirmOptions extends BaseConfirmOptions {\n  /**\n   * The kind of confirm modal to show.\n   */\n  kind?: 'destructive'\n  /**\n   * The description of the confirm modal. Can only be a string for destructive confirm modals.\n   */\n  description?: string\n}\n\nexport interface NonDestructiveConfirmModalOptions extends BaseConfirmOptions {\n  /**\n   * The kind of confirm modal to show.\n   * @default 'non-destructive'\n   */\n  kind?: 'non-destructive'\n  /**\n   * The description of the confirm modal. Can be a ReactNode for non-destructive kind if you need to display text links.\n   * @example\n   * ```tsx\n   * description: <>Use a Fragment because we put the content within a Paragraph tag.</>\n   */\n  description?: ReactNode\n}\n\nexport type ShowConfirmModalOptions =\n  | NonDestructiveConfirmModalOptions\n  | DestructiveConfirmOptions\n\nexport type ShowResult =\n  | ((value: boolean | PromiseLike<boolean>) => void)\n  | null\n\nexport interface ConfirmModalValue {\n  show: (options: ShowConfirmModalOptions) => Promise<boolean>\n}\n\nconst ConfirmModalContext = createContext<ConfirmModalValue | null>(null)\n\nexport interface ConfirmModalProviderProps {}\n\n/**\n * Provides a confirm modal to the app.\n * @see https://cerberus.digitalu.design/react/confirm-modal\n * @example\n * ```tsx\n * // Wrap the Provider around the root of the feature.\n * <ConfirmModal>\n *   <SomeFeatureSection />\n * </ConfirmModal>\n *\n * // Use the hook to show the confirm modal.\n * const confirm = useConfirmModal()\n *\n * const handleClick = useCallback(async () => {\n *  const userConsent = await confirm.show({\n *   heading: 'Add new payment method?',\n *  description:\n *   'This will add a new payment method to your account to be billed for future purchases.',\n * actionText: 'Yes, add payment method',\n * cancelText: 'No, cancel',\n * })\n * setConsent(userConsent)\n * }, [confirm])\n * ```\n */\nexport function ConfirmModal(\n  props: PropsWithChildren<ConfirmModalProviderProps>,\n) {\n  const { modalRef, show, close } = useModal()\n  const resolveRef = useRef<ShowResult>(null)\n  const [content, setContent] = useState<ShowConfirmModalOptions | null>(null)\n  const focusTrap = trapFocus(modalRef)\n  const ConfirmIcon = $cerberusIcons.confirmModal\n  const kind = content?.kind ?? 'non-destructive'\n\n  const palette = useMemo(\n    () => (kind === 'destructive' ? 'danger' : 'action'),\n    [kind],\n  )\n\n  const handleChoice = useCallback(\n    (e: MouseEvent<HTMLButtonElement>) => {\n      const target = e.currentTarget as HTMLButtonElement\n      if (target.value === 'true') {\n        resolveRef.current?.(true)\n      }\n      resolveRef.current?.(false)\n      close()\n    },\n    [close],\n  )\n\n  const handleShow = useCallback(\n    (options: ShowConfirmModalOptions) => {\n      return new Promise<boolean>((resolve) => {\n        setContent({ ...options })\n        show()\n        resolveRef.current = resolve\n      })\n    },\n    [show],\n  )\n\n  const value = useMemo(\n    () => ({\n      show: handleShow,\n    }),\n    [handleShow],\n  )\n\n  return (\n    <ConfirmModalContext.Provider value={value}>\n      {props.children}\n\n      <Portal>\n        <Modal onKeyDown={focusTrap} ref={modalRef}>\n          <VStack gap=\"xl\" w=\"full\">\n            <ModalHeader>\n              <div\n                className={hstack({\n                  justify: 'center',\n                  w: 'full',\n                })}\n              >\n                <Show\n                  when={palette === 'danger'}\n                  fallback={\n                    <Avatar\n                      ariaLabel=\"\"\n                      gradient=\"charon-light\"\n                      icon={<ConfirmIcon size={24} />}\n                      src=\"\"\n                    />\n                  }\n                >\n                  <Avatar\n                    ariaLabel=\"\"\n                    gradient=\"hades-dark\"\n                    icon={<ConfirmIcon size={24} />}\n                    src=\"\"\n                  />\n                </Show>\n              </div>\n              <ModalHeading>{content?.heading}</ModalHeading>\n              <ModalDescription>{content?.description}</ModalDescription>\n            </ModalHeader>\n\n            <HStack gap=\"4\" w=\"full\">\n              <Button\n                autoFocus\n                className={css({\n                  w: '1/2',\n                })}\n                name=\"confirm\"\n                onClick={handleChoice}\n                palette={palette}\n                value=\"true\"\n              >\n                {content?.actionText}\n              </Button>\n              <Button\n                className={css({\n                  w: '1/2',\n                })}\n                name=\"cancel\"\n                onClick={handleChoice}\n                usage=\"outlined\"\n                value=\"false\"\n              >\n                {content?.cancelText}\n              </Button>\n            </HStack>\n          </VStack>\n        </Modal>\n      </Portal>\n    </ConfirmModalContext.Provider>\n  )\n}\n\nexport function useConfirmModal(): ConfirmModalValue {\n  const context = useContext(ConfirmModalContext)\n  if (context === null) {\n    throw new Error(\n      'useConfirmModal must be used within a ConfirmModal Provider',\n    )\n  }\n  return context\n}\n"],"mappings":"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","names":[]}

package/build/modern/{chunk-KUT2YEEQ.js → chunk-5KHGTLFM.js}

@@ -159,4 +159,4 @@ export {
   NotificationCenter,
   useNotificationCenter
 };
-//# sourceMappingURL=chunk-KUT2YEEQ.js.map
+//# sourceMappingURL=chunk-5KHGTLFM.js.map

package/build/modern/chunk-5KHGTLFM.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 { animateIn, vstack } from '@cerberus/styled-system/patterns'\nimport { Portal, type PortalProps } from '../components/Portal'\nimport { notification } from '@cerberus/styled-system/recipes'\nimport { Button } from '../components/Button'\nimport { cx } from '@cerberus/styled-system/css'\n\n/**\n * This module provides a context and hook for notifications.\n * @module\n */\n\nexport interface NotifyOptions {\n  /**\n   * The palette of the notification.\n   * @default 'info'\n   */\n  palette: 'info' | 'success' | 'warning' | 'danger'\n  /**\n   * The heading of the notification.\n   */\n  heading: string\n  /**\n   * The unique id of the notification.\n   */\n  id?: string\n  /**\n   * The description of the notification.\n   */\n  description?: ReactNode\n  /**\n   * The action to take when the notification is closed\n   */\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 * @see https://cerberus.digitalu.design/react/notification\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  const styles = notification()\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 handleCloseAll = useCallback(() => {\n    setActiveNotifications((prev) => {\n      prev.forEach((item) => {\n        if (item.onClose) item.onClose()\n      })\n      return []\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 className={styles.center}>\n            <Show when={activeNotifications.length >= 4}>\n              <Button\n                className={cx(styles.closeAll, animateIn())}\n                onClick={handleCloseAll}\n                palette=\"action\"\n                shape=\"rounded\"\n                size=\"sm\"\n                usage=\"ghost\"\n              >\n                Close all\n              </Button>\n            </Show>\n\n            <div\n              className={vstack({\n                alignItems: 'flex-end',\n                gap: '4',\n              })}\n              style={{\n                alignItems: 'flex-end',\n              }}\n            >\n              {activeNotifications.map((option) => (\n                <MatchNotification\n                  key={option.id}\n                  {...option}\n                  onClose={handleClose}\n                />\n              ))}\n            </div>\n          </div>\n        </Portal>\n      </Show>\n    </NotificationsContext.Provider>\n  )\n}\n\ninterface MatchNotificationProps extends Omit<NotifyOptions, 'onClose'> {\n  onClose: (e: MouseEvent<HTMLButtonElement>) => void\n  key: string | undefined\n}\n\nfunction MatchNotification(props: MatchNotificationProps) {\n  const { palette, id, onClose, heading, description } = props\n\n  switch (palette) {\n    case 'success':\n      return (\n        <Notification\n          id={id!}\n          key={id}\n          onClose={onClose}\n          open\n          palette=\"success\"\n        >\n          <NotificationHeading palette=\"success\">{heading}</NotificationHeading>\n          <NotificationDescription palette=\"success\">\n            {description}\n          </NotificationDescription>\n        </Notification>\n      )\n\n    case 'warning':\n      return (\n        <Notification\n          id={id!}\n          key={id}\n          onClose={onClose}\n          open\n          palette=\"warning\"\n        >\n          <NotificationHeading palette=\"warning\">{heading}</NotificationHeading>\n          <NotificationDescription palette=\"warning\">\n            {description}\n          </NotificationDescription>\n        </Notification>\n      )\n\n    case 'danger':\n      return (\n        <Notification id={id!} key={id} onClose={onClose} open palette=\"danger\">\n          <NotificationHeading palette=\"danger\">{heading}</NotificationHeading>\n          <NotificationDescription palette=\"danger\">\n            {description}\n          </NotificationDescription>\n        </Notification>\n      )\n\n    case 'info':\n    default:\n      return (\n        <Notification id={id!} key={id} onClose={onClose} open palette=\"info\">\n          <NotificationHeading palette=\"info\">{heading}</NotificationHeading>\n          <NotificationDescription palette=\"info\">\n            {description}\n          </NotificationDescription>\n        </Notification>\n      )\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":"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","names":[]}

package/build/modern/{chunk-NCUHRVW2.js → chunk-MMHCX2RG.js}

@@ -3,7 +3,7 @@ import {
 } from "./chunk-K2PSHGS7.js";
 import {
   ModalHeader
-} from "./chunk-ZFAIE47A.js";
+} from "./chunk-XY6WL55R.js";
 import {
   ModalHeading
 } from "./chunk-2UXE5PDG.js";
@@ -240,4 +240,4 @@ export {
   PromptModal,
   usePromptModal
 };
-//# sourceMappingURL=chunk-NCUHRVW2.js.map
+//# sourceMappingURL=chunk-MMHCX2RG.js.map

package/build/modern/{chunk-J4LOSTEP.js → chunk-MXMVC3ZQ.js}

@@ -3,7 +3,7 @@ import {
 } from "./chunk-K2PSHGS7.js";
 import {
   ModalHeader
-} from "./chunk-ZFAIE47A.js";
+} from "./chunk-XY6WL55R.js";
 import {
   ModalHeading
 } from "./chunk-2UXE5PDG.js";
@@ -101,42 +101,42 @@ function CTAModal(props) {
           children: /* @__PURE__ */ jsx(IconButton, { ariaLabel: "Close modal", onClick: close, children: /* @__PURE__ */ jsx(CloseIcon, {}) })
         }
       ),
-      /* @__PURE__ */ jsxs(ModalHeader, { children: [
-        /* @__PURE__ */ jsx(HStack, { justify: "center", w: "full", children: /* @__PURE__ */ jsx(
-          Avatar,
-          {
-            ariaLabel: "",
-            gradient: "charon-light",
-            icon: /* @__PURE__ */ jsx(
-              Show,
-              {
-                when: Boolean(confirmIcon),
-                fallback: /* @__PURE__ */ jsx(FallbackIcon, { size: 24 }),
-                children: confirmIcon
-              }
-            ),
-            src: ""
-          }
-        ) }),
-        /* @__PURE__ */ jsxs(VStack, { gap: "lg", w: "full", children: [
+      /* @__PURE__ */ jsxs(VStack, { gap: "xl", w: "full", children: [
+        /* @__PURE__ */ jsx(ModalHeader, { children: /* @__PURE__ */ jsxs(VStack, { gap: "lg", w: "full", children: [
+          /* @__PURE__ */ jsx(
+            Avatar,
+            {
+              ariaLabel: "",
+              gradient: "charon-light",
+              icon: /* @__PURE__ */ jsx(
+                Show,
+                {
+                  when: Boolean(confirmIcon),
+                  fallback: /* @__PURE__ */ jsx(FallbackIcon, { size: 24 }),
+                  children: confirmIcon
+                }
+              ),
+              src: ""
+            }
+          ),
           /* @__PURE__ */ jsx(ModalHeading, { children: content?.heading }),
           /* @__PURE__ */ jsx(ModalDescription, { children: content?.description })
-        ] })
-      ] }),
-      /* @__PURE__ */ jsx(HStack, { gap: "md", pt: "sm", w: "full", children: /* @__PURE__ */ jsx(Show, { when: Boolean(content?.actions?.length), children: content?.actions?.map((action, index) => /* @__PURE__ */ jsx(
-        Button,
-        {
-          "data-index": index,
-          className: css({
-            w: "1/2"
-          }),
-          onClick: handleActionClick,
-          shape: "rounded",
-          usage: "outlined",
-          children: action.text
-        },
-        index
-      )) }) })
+        ] }) }),
+        /* @__PURE__ */ jsx(HStack, { gap: "md", w: "full", children: /* @__PURE__ */ jsx(Show, { when: Boolean(content?.actions?.length), children: content?.actions?.map((action, index) => /* @__PURE__ */ jsx(
+          Button,
+          {
+            "data-index": index,
+            className: css({
+              w: "1/2"
+            }),
+            onClick: handleActionClick,
+            shape: "rounded",
+            usage: "outlined",
+            children: action.text
+          },
+          index
+        )) }) })
+      ] })
     ] }) })
   ] });
 }
@@ -152,4 +152,4 @@ export {
   CTAModal,
   useCTAModal
 };
-//# sourceMappingURL=chunk-J4LOSTEP.js.map
+//# sourceMappingURL=chunk-MXMVC3ZQ.js.map

package/build/modern/{chunk-J4LOSTEP.js.map → chunk-MXMVC3ZQ.js.map}

@@ -1 +1 @@
-{"version":3,"sources":["../../src/context/cta-modal.tsx"],"sourcesContent":["'use client'\n\nimport {\n  createContext,\n  useCallback,\n  useContext,\n  useMemo,\n  useState,\n  type ButtonHTMLAttributes,\n  type MouseEvent,\n  type PropsWithChildren,\n  type ReactNode,\n} from 'react'\nimport { Portal } from '../components/Portal'\nimport { Button } from '../components/Button'\nimport { $cerberusIcons } from '../config/defineIcons'\nimport { trapFocus } from '../aria-helpers/trap-focus.aria'\nimport { Show } from '../components/Show'\nimport { Modal } from '../components/Modal'\nimport { useModal } from '../hooks/useModal'\nimport { ModalHeader } from '../components/ModalHeader'\nimport { ModalHeading } from '../components/ModalHeading'\nimport { ModalDescription } from '../components/ModalDescription'\nimport { Avatar } from '../components/Avatar'\nimport { HStack } from '@cerberus/styled-system/jsx'\nimport { IconButton } from '../components/IconButton'\nimport { css } from '@cerberus/styled-system/css'\nimport { VStack } from '@cerberus/styled-system/jsx'\n\n/**\n * This module provides a context and hook for the cta modal.\n * @module\n */\n\nexport interface ShowCTAModalOptions {\n  /**\n   * The heading of the cta modal.\n   */\n  heading: string\n  /**\n   * The description of the cta modal.\n   */\n  description?: string\n  /**\n   * The icon used for the modal Avatar.\n   */\n  icon?: ReactNode\n  /**\n   * The actions for the cta modal. Max of 2 actions.\n   */\n  actions: {\n    text: string\n    onClick: Required<ButtonHTMLAttributes<HTMLButtonElement>['onClick']>\n  }[]\n}\n\nexport interface CTAModalValue {\n  show: (options: ShowCTAModalOptions) => void\n}\n\nconst CTAModalContext = createContext<CTAModalValue | null>(null)\n\nexport interface CTAModalProviderProps {}\n\n/**\n * Provides a CTA modal to the app.\n * @see https://cerberus.digitalu.design/react/cta-modal\n * @example\n * ```tsx\n * // Wrap the Provider around the root of the feature.\n * <CTAModal>\n *   <SomeFeatureSection />\n * </CTAModal>\n *\n * // Use the hook to show the cta modal.\n * const cta = useCTAModal()\n *\n * const handleClick = useCallback(async () => {\n *  const userConsent = await cta.show({\n *   heading: 'Create or copy a Cohort',\n *  description:\n *   'Create a new cohort or copy and existing one.',\n *  icon: <Copy size={24} />,\n *  actions: [\n *  {\n *   text: 'Create Cohort',\n *   onClick: () => {},\n *  {\n *   text: 'Copy Cohort',\n *   onClick: () => {}\n *  }\n * })\n * setConsent(userConsent)\n * }, [cta])\n * ```\n */\nexport function CTAModal(props: PropsWithChildren<CTAModalProviderProps>) {\n  const { modalRef, show, close } = useModal()\n  const [content, setContent] = useState<ShowCTAModalOptions | null>(null)\n  const focusTrap = trapFocus(modalRef)\n  const FallbackIcon = $cerberusIcons.confirmModal\n  const confirmIcon = content?.icon as ReactNode\n  const { close: CloseIcon } = $cerberusIcons\n\n  const handleShow = useCallback(\n    (options: ShowCTAModalOptions) => {\n      const maxActions = 2\n      if (options.actions.length > maxActions) {\n        throw new Error(\n          `CTA Modal only supports a maximum of ${maxActions} actions.`,\n        )\n      }\n      setContent({ ...options })\n      show()\n    },\n    [show],\n  )\n\n  const handleActionClick = useCallback(\n    (event: MouseEvent<HTMLButtonElement>) => {\n      const index = event.currentTarget.getAttribute('data-index')\n      const action = content?.actions[Number(index)]\n      if (typeof action?.onClick === 'function') {\n        action.onClick(event)\n      }\n      close()\n    },\n    [content, close],\n  )\n\n  const value = useMemo(\n    () => ({\n      show: handleShow,\n    }),\n    [handleShow],\n  )\n\n  return (\n    <CTAModalContext.Provider value={value}>\n      {props.children}\n\n      <Portal>\n        <Modal onKeyDown={focusTrap} ref={modalRef}>\n          <span\n            className={css({\n              padding: 'md',\n              position: 'absolute',\n              right: 0,\n              top: 0,\n              zIndex: 'decorator',\n            })}\n          >\n            <IconButton ariaLabel=\"Close modal\" onClick={close}>\n              <CloseIcon />\n            </IconButton>\n          </span>\n\n          <ModalHeader>\n            <HStack justify=\"center\" w=\"full\">\n              <Avatar\n                ariaLabel=\"\"\n                gradient=\"charon-light\"\n                icon={\n                  <Show\n                    when={Boolean(confirmIcon)}\n                    fallback={<FallbackIcon size={24} />}\n                  >\n                    {confirmIcon}\n                  </Show>\n                }\n                src=\"\"\n              />\n            </HStack>\n            <VStack gap=\"lg\" w=\"full\">\n              <ModalHeading>{content?.heading}</ModalHeading>\n              <ModalDescription>{content?.description}</ModalDescription>\n            </VStack>\n          </ModalHeader>\n\n          <HStack gap=\"md\" pt=\"sm\" w=\"full\">\n            <Show when={Boolean(content?.actions?.length)}>\n              {content?.actions?.map((action, index) => (\n                <Button\n                  data-index={index}\n                  className={css({\n                    w: '1/2',\n                  })}\n                  key={index}\n                  onClick={handleActionClick}\n                  shape=\"rounded\"\n                  usage=\"outlined\"\n                >\n                  {action.text}\n                </Button>\n              ))}\n            </Show>\n          </HStack>\n        </Modal>\n      </Portal>\n    </CTAModalContext.Provider>\n  )\n}\n\nexport function useCTAModal(): CTAModalValue {\n  const context = useContext(CTAModalContext)\n  if (context === null) {\n    throw new Error('useCTAModal must be used within a CTAModal Provider')\n  }\n  return context\n}\n"],"mappings":"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","names":[]}
+{"version":3,"sources":["../../src/context/cta-modal.tsx"],"sourcesContent":["'use client'\n\nimport {\n  createContext,\n  useCallback,\n  useContext,\n  useMemo,\n  useState,\n  type ButtonHTMLAttributes,\n  type MouseEvent,\n  type PropsWithChildren,\n  type ReactNode,\n} from 'react'\nimport { Portal } from '../components/Portal'\nimport { Button } from '../components/Button'\nimport { $cerberusIcons } from '../config/defineIcons'\nimport { trapFocus } from '../aria-helpers/trap-focus.aria'\nimport { Show } from '../components/Show'\nimport { Modal } from '../components/Modal'\nimport { useModal } from '../hooks/useModal'\nimport { ModalHeader } from '../components/ModalHeader'\nimport { ModalHeading } from '../components/ModalHeading'\nimport { ModalDescription } from '../components/ModalDescription'\nimport { Avatar } from '../components/Avatar'\nimport { HStack } from '@cerberus/styled-system/jsx'\nimport { IconButton } from '../components/IconButton'\nimport { css } from '@cerberus/styled-system/css'\nimport { VStack } from '@cerberus/styled-system/jsx'\n\n/**\n * This module provides a context and hook for the cta modal.\n * @module\n */\n\nexport interface ShowCTAModalOptions {\n  /**\n   * The heading of the cta modal.\n   */\n  heading: string\n  /**\n   * The description of the cta modal.\n   */\n  description?: string\n  /**\n   * The icon used for the modal Avatar.\n   */\n  icon?: ReactNode\n  /**\n   * The actions for the cta modal. Max of 2 actions.\n   */\n  actions: {\n    text: string\n    onClick: Required<ButtonHTMLAttributes<HTMLButtonElement>['onClick']>\n  }[]\n}\n\nexport interface CTAModalValue {\n  show: (options: ShowCTAModalOptions) => void\n}\n\nconst CTAModalContext = createContext<CTAModalValue | null>(null)\n\nexport interface CTAModalProviderProps {}\n\n/**\n * Provides a CTA modal to the app.\n * @see https://cerberus.digitalu.design/react/cta-modal\n * @example\n * ```tsx\n * // Wrap the Provider around the root of the feature.\n * <CTAModal>\n *   <SomeFeatureSection />\n * </CTAModal>\n *\n * // Use the hook to show the cta modal.\n * const cta = useCTAModal()\n *\n * const handleClick = useCallback(async () => {\n *  const userConsent = await cta.show({\n *   heading: 'Create or copy a Cohort',\n *  description:\n *   'Create a new cohort or copy and existing one.',\n *  icon: <Copy size={24} />,\n *  actions: [\n *  {\n *   text: 'Create Cohort',\n *   onClick: () => {},\n *  {\n *   text: 'Copy Cohort',\n *   onClick: () => {}\n *  }\n * })\n * setConsent(userConsent)\n * }, [cta])\n * ```\n */\nexport function CTAModal(props: PropsWithChildren<CTAModalProviderProps>) {\n  const { modalRef, show, close } = useModal()\n  const [content, setContent] = useState<ShowCTAModalOptions | null>(null)\n  const focusTrap = trapFocus(modalRef)\n  const FallbackIcon = $cerberusIcons.confirmModal\n  const confirmIcon = content?.icon as ReactNode\n  const { close: CloseIcon } = $cerberusIcons\n\n  const handleShow = useCallback(\n    (options: ShowCTAModalOptions) => {\n      const maxActions = 2\n      if (options.actions.length > maxActions) {\n        throw new Error(\n          `CTA Modal only supports a maximum of ${maxActions} actions.`,\n        )\n      }\n      setContent({ ...options })\n      show()\n    },\n    [show],\n  )\n\n  const handleActionClick = useCallback(\n    (event: MouseEvent<HTMLButtonElement>) => {\n      const index = event.currentTarget.getAttribute('data-index')\n      const action = content?.actions[Number(index)]\n      if (typeof action?.onClick === 'function') {\n        action.onClick(event)\n      }\n      close()\n    },\n    [content, close],\n  )\n\n  const value = useMemo(\n    () => ({\n      show: handleShow,\n    }),\n    [handleShow],\n  )\n\n  return (\n    <CTAModalContext.Provider value={value}>\n      {props.children}\n\n      <Portal>\n        <Modal onKeyDown={focusTrap} ref={modalRef}>\n          <span\n            className={css({\n              padding: 'md',\n              position: 'absolute',\n              right: 0,\n              top: 0,\n              zIndex: 'decorator',\n            })}\n          >\n            <IconButton ariaLabel=\"Close modal\" onClick={close}>\n              <CloseIcon />\n            </IconButton>\n          </span>\n\n          <VStack gap=\"xl\" w=\"full\">\n            <ModalHeader>\n              <VStack gap=\"lg\" w=\"full\">\n                <Avatar\n                  ariaLabel=\"\"\n                  gradient=\"charon-light\"\n                  icon={\n                    <Show\n                      when={Boolean(confirmIcon)}\n                      fallback={<FallbackIcon size={24} />}\n                    >\n                      {confirmIcon}\n                    </Show>\n                  }\n                  src=\"\"\n                />\n                <ModalHeading>{content?.heading}</ModalHeading>\n                <ModalDescription>{content?.description}</ModalDescription>\n              </VStack>\n            </ModalHeader>\n\n            <HStack gap=\"md\" w=\"full\">\n              <Show when={Boolean(content?.actions?.length)}>\n                {content?.actions?.map((action, index) => (\n                  <Button\n                    data-index={index}\n                    className={css({\n                      w: '1/2',\n                    })}\n                    key={index}\n                    onClick={handleActionClick}\n                    shape=\"rounded\"\n                    usage=\"outlined\"\n                  >\n                    {action.text}\n                  </Button>\n                ))}\n              </Show>\n            </HStack>\n          </VStack>\n        </Modal>\n      </Portal>\n    </CTAModalContext.Provider>\n  )\n}\n\nexport function useCTAModal(): CTAModalValue {\n  const context = useContext(CTAModalContext)\n  if (context === null) {\n    throw new Error('useCTAModal must be used within a CTAModal Provider')\n  }\n  return context\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAEA;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OAKK;AAYP,SAAS,cAAc;AAEvB,SAAS,WAAW;AACpB,SAAS,cAAc;AA8HT,cAMA,YANA;AA7Fd,IAAM,kBAAkB,cAAoC,IAAI;AAoCzD,SAAS,SAAS,OAAiD;AACxE,QAAM,EAAE,UAAU,MAAM,MAAM,IAAI,SAAS;AAC3C,QAAM,CAAC,SAAS,UAAU,IAAI,SAAqC,IAAI;AACvE,QAAM,YAAY,UAAU,QAAQ;AACpC,QAAM,eAAe,eAAe;AACpC,QAAM,cAAc,SAAS;AAC7B,QAAM,EAAE,OAAO,UAAU,IAAI;AAE7B,QAAM,aAAa;AAAA,IACjB,CAAC,YAAiC;AAChC,YAAM,aAAa;AACnB,UAAI,QAAQ,QAAQ,SAAS,YAAY;AACvC,cAAM,IAAI;AAAA,UACR,wCAAwC,UAAU;AAAA,QACpD;AAAA,MACF;AACA,iBAAW,EAAE,GAAG,QAAQ,CAAC;AACzB,WAAK;AAAA,IACP;AAAA,IACA,CAAC,IAAI;AAAA,EACP;AAEA,QAAM,oBAAoB;AAAA,IACxB,CAAC,UAAyC;AACxC,YAAM,QAAQ,MAAM,cAAc,aAAa,YAAY;AAC3D,YAAM,SAAS,SAAS,QAAQ,OAAO,KAAK,CAAC;AAC7C,UAAI,OAAO,QAAQ,YAAY,YAAY;AACzC,eAAO,QAAQ,KAAK;AAAA,MACtB;AACA,YAAM;AAAA,IACR;AAAA,IACA,CAAC,SAAS,KAAK;AAAA,EACjB;AAEA,QAAM,QAAQ;AAAA,IACZ,OAAO;AAAA,MACL,MAAM;AAAA,IACR;AAAA,IACA,CAAC,UAAU;AAAA,EACb;AAEA,SACE,qBAAC,gBAAgB,UAAhB,EAAyB,OACvB;AAAA,UAAM;AAAA,IAEP,oBAAC,UACC,+BAAC,SAAM,WAAW,WAAW,KAAK,UAChC;AAAA;AAAA,QAAC;AAAA;AAAA,UACC,WAAW,IAAI;AAAA,YACb,SAAS;AAAA,YACT,UAAU;AAAA,YACV,OAAO;AAAA,YACP,KAAK;AAAA,YACL,QAAQ;AAAA,UACV,CAAC;AAAA,UAED,8BAAC,cAAW,WAAU,eAAc,SAAS,OAC3C,8BAAC,aAAU,GACb;AAAA;AAAA,MACF;AAAA,MAEA,qBAAC,UAAO,KAAI,MAAK,GAAE,QACjB;AAAA,4BAAC,eACC,+BAAC,UAAO,KAAI,MAAK,GAAE,QACjB;AAAA;AAAA,YAAC;AAAA;AAAA,cACC,WAAU;AAAA,cACV,UAAS;AAAA,cACT,MACE;AAAA,gBAAC;AAAA;AAAA,kBACC,MAAM,QAAQ,WAAW;AAAA,kBACzB,UAAU,oBAAC,gBAAa,MAAM,IAAI;AAAA,kBAEjC;AAAA;AAAA,cACH;AAAA,cAEF,KAAI;AAAA;AAAA,UACN;AAAA,UACA,oBAAC,gBAAc,mBAAS,SAAQ;AAAA,UAChC,oBAAC,oBAAkB,mBAAS,aAAY;AAAA,WAC1C,GACF;AAAA,QAEA,oBAAC,UAAO,KAAI,MAAK,GAAE,QACjB,8BAAC,QAAK,MAAM,QAAQ,SAAS,SAAS,MAAM,GACzC,mBAAS,SAAS,IAAI,CAAC,QAAQ,UAC9B;AAAA,UAAC;AAAA;AAAA,YACC,cAAY;AAAA,YACZ,WAAW,IAAI;AAAA,cACb,GAAG;AAAA,YACL,CAAC;AAAA,YAED,SAAS;AAAA,YACT,OAAM;AAAA,YACN,OAAM;AAAA,YAEL,iBAAO;AAAA;AAAA,UALH;AAAA,QAMP,CACD,GACH,GACF;AAAA,SACF;AAAA,OACF,GACF;AAAA,KACF;AAEJ;AAEO,SAAS,cAA6B;AAC3C,QAAM,UAAU,WAAW,eAAe;AAC1C,MAAI,YAAY,MAAM;AACpB,UAAM,IAAI,MAAM,qDAAqD;AAAA,EACvE;AACA,SAAO;AACT;","names":[]}

package/build/modern/{chunk-ZFAIE47A.js → chunk-XY6WL55R.js}

@@ -12,7 +12,6 @@ function ModalHeader(props) {
         vstack({
           alignItems: "flex-start",
           gap: "md",
-          mb: "md",
           position: "relative"
         })
       )
@@ -23,4 +22,4 @@ function ModalHeader(props) {
 export {
   ModalHeader
 };
-//# sourceMappingURL=chunk-ZFAIE47A.js.map
+//# sourceMappingURL=chunk-XY6WL55R.js.map

package/build/modern/{chunk-ZFAIE47A.js.map → chunk-XY6WL55R.js.map}

@@ -1 +1 @@
-{"version":3,"sources":["../../src/components/ModalHeader.tsx"],"sourcesContent":["import { cx } from '@cerberus/styled-system/css'\nimport { vstack } from '@cerberus/styled-system/patterns'\nimport type { HTMLAttributes } from 'react'\n\n/**\n * This module contains the ModalHeader component for a customizable modal.\n * @module\n */\n\nexport type ModalHeaderProps = HTMLAttributes<HTMLDivElement>\n\n/**\n * The ModalHeader component is a header element for a customizable modal.\n * @see https://cerberus.digitalu.design/react/modal\n * @example\n * ```tsx\n * <Modal>\n *   <ModalHeader>\n *     <h2>Modal Heading</h2>\n *   </ModalHeader>\n * </Modal>\n * ```\n */\nexport function ModalHeader(props: ModalHeaderProps) {\n  return (\n    <div\n      {...props}\n      className={cx(\n        props.className,\n        vstack({\n          alignItems: 'flex-start',\n          gap: 'md',\n          mb: 'md',\n          position: 'relative',\n        }),\n      )}\n    />\n  )\n}\n"],"mappings":";AAAA,SAAS,UAAU;AACnB,SAAS,cAAc;AAwBnB;AAFG,SAAS,YAAY,OAAyB;AACnD,SACE;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACJ,WAAW;AAAA,QACT,MAAM;AAAA,QACN,OAAO;AAAA,UACL,YAAY;AAAA,UACZ,KAAK;AAAA,UACL,IAAI;AAAA,UACJ,UAAU;AAAA,QACZ,CAAC;AAAA,MACH;AAAA;AAAA,EACF;AAEJ;","names":[]}
+{"version":3,"sources":["../../src/components/ModalHeader.tsx"],"sourcesContent":["import { cx } from '@cerberus/styled-system/css'\nimport { vstack } from '@cerberus/styled-system/patterns'\nimport type { HTMLAttributes } from 'react'\n\n/**\n * This module contains the ModalHeader component for a customizable modal.\n * @module\n */\n\nexport type ModalHeaderProps = HTMLAttributes<HTMLDivElement>\n\n/**\n * The ModalHeader component is a header element for a customizable modal.\n * @see https://cerberus.digitalu.design/react/modal\n * @example\n * ```tsx\n * <Modal>\n *   <ModalHeader>\n *     <h2>Modal Heading</h2>\n *   </ModalHeader>\n * </Modal>\n * ```\n */\nexport function ModalHeader(props: ModalHeaderProps) {\n  return (\n    <div\n      {...props}\n      className={cx(\n        props.className,\n        vstack({\n          alignItems: 'flex-start',\n          gap: 'md',\n          position: 'relative',\n        }),\n      )}\n    />\n  )\n}\n"],"mappings":";AAAA,SAAS,UAAU;AACnB,SAAS,cAAc;AAwBnB;AAFG,SAAS,YAAY,OAAyB;AACnD,SACE;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACJ,WAAW;AAAA,QACT,MAAM;AAAA,QACN,OAAO;AAAA,UACL,YAAY;AAAA,UACZ,KAAK;AAAA,UACL,UAAU;AAAA,QACZ,CAAC;AAAA,MACH;AAAA;AAAA,EACF;AAEJ;","names":[]}

package/build/modern/components/ModalHeader.js

@@ -1,6 +1,6 @@
 import {
   ModalHeader
-} from "../chunk-ZFAIE47A.js";
+} from "../chunk-XY6WL55R.js";
 export {
   ModalHeader
 };

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

@@ -2,9 +2,9 @@
 import {
   ConfirmModal,
   useConfirmModal
-} from "../chunk-KFGI37CO.js";
+} from "../chunk-4D6VIGNQ.js";
 import "../chunk-K2PSHGS7.js";
-import "../chunk-ZFAIE47A.js";
+import "../chunk-XY6WL55R.js";
 import "../chunk-2UXE5PDG.js";
 import "../chunk-BE4EOU2P.js";
 import "../chunk-Q7BRMIBR.js";

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

@@ -2,9 +2,9 @@
 import {
   CTAModal,
   useCTAModal
-} from "../chunk-J4LOSTEP.js";
+} from "../chunk-MXMVC3ZQ.js";
 import "../chunk-K2PSHGS7.js";
-import "../chunk-ZFAIE47A.js";
+import "../chunk-XY6WL55R.js";
 import "../chunk-2UXE5PDG.js";
 import "../chunk-BE4EOU2P.js";
 import "../chunk-Q7BRMIBR.js";

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

@@ -2,7 +2,7 @@
 import {
   NotificationCenter,
   useNotificationCenter
-} from "../chunk-KUT2YEEQ.js";
+} from "../chunk-5KHGTLFM.js";
 import "../chunk-K2PSHGS7.js";
 import "../chunk-7SGPJM66.js";
 import "../chunk-XEW6TJJ4.js";

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

@@ -2,9 +2,9 @@
 import {
   PromptModal,
   usePromptModal
-} from "../chunk-NCUHRVW2.js";
+} from "../chunk-MMHCX2RG.js";
 import "../chunk-K2PSHGS7.js";
-import "../chunk-ZFAIE47A.js";
+import "../chunk-XY6WL55R.js";
 import "../chunk-2UXE5PDG.js";
 import "../chunk-NKM6PISB.js";
 import "../chunk-NMF2HYWO.js";

package/build/modern/index.js

@@ -1,7 +1,7 @@
 import {
   PromptModal,
   usePromptModal
-} from "./chunk-NCUHRVW2.js";
+} from "./chunk-MMHCX2RG.js";
 import {
   ThemeProvider,
   useThemeContext
@@ -15,15 +15,15 @@ import {
 import {
   ConfirmModal,
   useConfirmModal
-} from "./chunk-KFGI37CO.js";
+} from "./chunk-4D6VIGNQ.js";
 import {
   CTAModal,
   useCTAModal
-} from "./chunk-J4LOSTEP.js";
+} from "./chunk-MXMVC3ZQ.js";
 import {
   NotificationCenter,
   useNotificationCenter
-} from "./chunk-KUT2YEEQ.js";
+} from "./chunk-5KHGTLFM.js";
 import {
   TabPanel
 } from "./chunk-AYIRV5CL.js";
@@ -70,7 +70,7 @@ import {
 } from "./chunk-UKPF7JOB.js";
 import {
   ModalHeader
-} from "./chunk-ZFAIE47A.js";
+} from "./chunk-XY6WL55R.js";
 import {
   ModalHeading
 } from "./chunk-2UXE5PDG.js";

package/package.json

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

package/src/components/ModalHeader.tsx

@@ -30,7 +30,6 @@ export function ModalHeader(props: ModalHeaderProps) {
         vstack({
           alignItems: 'flex-start',
           gap: 'md',
-          mb: 'md',
           position: 'relative',
         }),
       )}