@cerberus-design/react 0.11.1-next-2ed68bd → 0.11.1-next-c28b077

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

@@ -521,6 +521,53 @@ declare function createNavTriggerProps(values: NavTriggerAriaValues): NavTrigger
 export { createNavTriggerProps }
 export { createNavTriggerProps as createNavTriggerProps_alias_1 }
 
+/**
+ * Provides a CTA modal to the app.
+ * @see https://cerberus.digitalu.design/react/cta-modal
+ * @example
+ * ```tsx
+ * // Wrap the Provider around the root of the feature.
+ * <CTAModal>
+ *   <SomeFeatureSection />
+ * </CTAModal>
+ *
+ * // Use the hook to show the cta modal.
+ * const cta = useCTAModal()
+ *
+ * const handleClick = useCallback(async () => {
+ *  const userConsent = await cta.show({
+ *   heading: 'Create or copy a Cohort',
+ *  description:
+ *   'Create a new cohort or copy and existing one.',
+ *  icon: <Copy size={24} />,
+ *  actions: [
+ *  {
+ *   text: 'Create Cohort',
+ *   onClick: () => {},
+ *  {
+ *   text: 'Copy Cohort',
+ *   onClick: () => {}
+ *  }
+ * })
+ * setConsent(userConsent)
+ * }, [cta])
+ * ```
+ */
+declare function CTAModal(props: PropsWithChildren<CTAModalProviderProps>): JSX_2.Element;
+export { CTAModal }
+export { CTAModal as CTAModal_alias_1 }
+
+declare interface CTAModalProviderProps {
+}
+export { CTAModalProviderProps }
+export { CTAModalProviderProps as CTAModalProviderProps_alias_1 }
+
+declare interface CTAModalValue {
+    show: (options: ShowCTAModalOptions) => void;
+}
+export { CTAModalValue }
+export { CTAModalValue as CTAModalValue_alias_1 }
+
 declare type CustomThemes<K extends string = DefaultThemes> = 'cerberus' | K;
 export { CustomThemes }
 export { CustomThemes as CustomThemes_alias_1 }
@@ -1961,6 +2008,34 @@ declare interface ShowConfirmModalOptions {
 export { ShowConfirmModalOptions }
 export { ShowConfirmModalOptions as ShowConfirmModalOptions_alias_1 }
 
+/**
+ * This module provides a context and hook for the cta modal.
+ * @module
+ */
+declare interface ShowCTAModalOptions {
+    /**
+     * The heading of the cta modal.
+     */
+    heading: string;
+    /**
+     * The description of the cta modal.
+     */
+    description?: string;
+    /**
+     * The icon used for the modal Avatar.
+     */
+    icon?: ReactNode;
+    /**
+     * The actions for the cta modal. Max of 2 actions.
+     */
+    actions: {
+        text: string;
+        onClick: Required<ButtonHTMLAttributes<HTMLButtonElement>['onClick']>;
+    }[];
+}
+export { ShowCTAModalOptions }
+export { ShowCTAModalOptions as ShowCTAModalOptions_alias_1 }
+
 /**
  * This module provides a context and hook for the prompt modal.
  * @module PromptModal
@@ -2566,6 +2641,10 @@ declare function useConfirmModal(): ConfirmModalValue;
 export { useConfirmModal }
 export { useConfirmModal as useConfirmModal_alias_1 }
 
+declare function useCTAModal(): CTAModalValue;
+export { useCTAModal }
+export { useCTAModal as useCTAModal_alias_1 }
+
 export { useDndContext }
 
 export { UseDndContextReturnValue }

package/build/modern/{chunk-RDQHHCFR.js → chunk-5OSUZUR4.js}

@@ -1,6 +1,6 @@
 import {
   Notification
-} from "./chunk-KLUBAM4U.js";
+} from "./chunk-7SGPJM66.js";
 import {
   NotificationDescription
 } from "./chunk-XEW6TJJ4.js";
@@ -159,4 +159,4 @@ export {
   NotificationCenter,
   useNotificationCenter
 };
-//# sourceMappingURL=chunk-RDQHHCFR.js.map
+//# sourceMappingURL=chunk-5OSUZUR4.js.map

package/build/modern/{chunk-KLUBAM4U.js → chunk-7SGPJM66.js}

@@ -3,7 +3,7 @@ import {
 } from "./chunk-JIZQFTW6.js";
 import {
   $cerberusIcons
-} from "./chunk-FT7DFRHQ.js";
+} from "./chunk-VERRHMW4.js";
 
 // src/components/Notification.tsx
 import { cx } from "@cerberus/styled-system/css";
@@ -14,7 +14,6 @@ import {
 import {
   useRef
 } from "react";
-import { Close } from "@cerberus/icons";
 import { jsx, jsxs } from "react/jsx-runtime";
 function MatchNotificationIcon(props) {
   const palette = props.palette || "info";
@@ -27,6 +26,7 @@ function Notification(props) {
   const ref = useRef(null);
   const onKeyDown = trapFocus(ref);
   const styles = notification({ palette });
+  const { close: CloseIcon } = $cerberusIcons;
   return /* @__PURE__ */ jsxs(
     "dialog",
     {
@@ -61,7 +61,7 @@ function Notification(props) {
             className: styles.close,
             onClick: onClose,
             value: props.id,
-            children: /* @__PURE__ */ jsx(Close, {})
+            children: /* @__PURE__ */ jsx(CloseIcon, {})
           }
         )
       ]
@@ -72,4 +72,4 @@ function Notification(props) {
 export {
   Notification
 };
-//# sourceMappingURL=chunk-KLUBAM4U.js.map
+//# sourceMappingURL=chunk-7SGPJM66.js.map

package/build/modern/chunk-7SGPJM66.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/components/Notification.tsx"],"sourcesContent":["'use client'\n\nimport { cx } from '@cerberus/styled-system/css'\nimport { hstack, vstack } from '@cerberus/styled-system/patterns'\nimport {\n  notification,\n  type NotificationVariantProps,\n} from '@cerberus/styled-system/recipes'\nimport {\n  useRef,\n  type DialogHTMLAttributes,\n  type PropsWithChildren,\n  type MouseEvent,\n} from 'react'\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  /**\n   * The unique id of the notification. Required for the onClose callback.\n   */\n  id: string\n  /**\n   * Called when the close button is clicked.\n   */\n  onClose?: (e: MouseEvent<HTMLButtonElement>) => void\n}\nexport type NotificationProps = NotificationBaseProps & NotificationVariantProps\n\n/**\n * A static Notification component that displays a message to the user. This\n * is typically only used when not utilizing the NotificationCenter.\n * @see https://cerberus.digitalu.design/react/notification\n * @memberof module:NotificationCenter\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  const { close: CloseIcon } = $cerberusIcons\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    >\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      <button\n        aria-label=\"Close\"\n        className={styles.close}\n        onClick={onClose}\n        value={props.id}\n      >\n        <CloseIcon />\n      </button>\n    </dialog>\n  )\n}\n"],"mappings":";;;;;;;;AAEA,SAAS,UAAU;AACnB,SAAS,QAAQ,cAAc;AAC/B;AAAA,EACE;AAAA,OAEK;AACP;AAAA,EACE;AAAA,OAIK;AAcE,cAuCL,YAvCK;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;AA8BO,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;AACvC,QAAM,EAAE,OAAO,UAAU,IAAI;AAE7B,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,MAEA;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;AAAA,UAAC;AAAA;AAAA,YACC,cAAW;AAAA,YACX,WAAW,OAAO;AAAA,YAClB,SAAS;AAAA,YACT,OAAO,MAAM;AAAA,YAEb,8BAAC,aAAU;AAAA;AAAA,QACb;AAAA;AAAA;AAAA,EACF;AAEJ;","names":[]}

package/build/modern/{chunk-3NE6C66J.js → chunk-C7UVOGPZ.js}

@@ -3,7 +3,7 @@ import {
 } from "./chunk-GLY7GU5S.js";
 import {
   Input
-} from "./chunk-UJKS4DDN.js";
+} from "./chunk-NKM6PISB.js";
 import {
   Label
 } from "./chunk-NMF2HYWO.js";
@@ -15,13 +15,13 @@ import {
 } from "./chunk-Q7BRMIBR.js";
 import {
   ModalHeader
-} from "./chunk-ULYQLKWA.js";
+} from "./chunk-ZFAIE47A.js";
 import {
   ModalHeading
 } from "./chunk-2UXE5PDG.js";
 import {
   Avatar
-} from "./chunk-ZX6DBC2Z.js";
+} from "./chunk-SPZYPRZ6.js";
 import {
   Button
 } from "./chunk-EXGKZGML.js";
@@ -36,7 +36,7 @@ import {
 } from "./chunk-JIZQFTW6.js";
 import {
   $cerberusIcons
-} from "./chunk-FT7DFRHQ.js";
+} from "./chunk-VERRHMW4.js";
 import {
   useModal
 } from "./chunk-7T3JIGM7.js";
@@ -240,4 +240,4 @@ export {
   PromptModal,
   usePromptModal
 };
-//# sourceMappingURL=chunk-3NE6C66J.js.map
+//# sourceMappingURL=chunk-C7UVOGPZ.js.map

package/build/modern/{chunk-TMR7JGMP.js → chunk-F27AAKQ3.js}

@@ -11,7 +11,7 @@ import {
   Checkmark,
   CheckmarkOutline,
   ChevronDown,
-  CloseFilled,
+  Close,
   CloudUpload,
   Information,
   Restart,
@@ -24,7 +24,7 @@ import {
 var defaultIcons = {
   avatar: UserFilled,
   checkbox: CheckmarkIcon,
-  close: CloseFilled,
+  close: Close,
   confirmModal: Information,
   delete: TrashCan,
   promptModal: Information,
@@ -45,4 +45,4 @@ var defaultIcons = {
 export {
   defaultIcons
 };
-//# sourceMappingURL=chunk-TMR7JGMP.js.map
+//# sourceMappingURL=chunk-F27AAKQ3.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/config/cerbIcons.ts"],"sourcesContent":["import {\n  Checkmark,\n  CheckmarkOutline,\n  ChevronDown,\n  Close,\n  CloudUpload,\n  Information,\n  Restart,\n  TrashCan,\n  UserFilled,\n  Warning,\n  WarningAlt,\n  WarningFilled,\n  type CarbonIconType,\n} from '@cerberus/icons'\nimport type { ElementType } from 'react'\nimport { CheckmarkIcon, IndeterminateIcon } from './icons/checkbox.icons'\nimport { AnimatingUploadIcon } from '../components/AnimatingUploadIcon'\n\nexport type IconType = CarbonIconType | ElementType\n\nexport interface DefinedIcons {\n  avatar?: IconType\n  checkbox?: IconType\n  close?: IconType\n  confirmModal?: IconType\n  delete?: IconType\n  promptModal?: IconType\n  waitingFileUploader?: IconType\n  fileUploader?: IconType\n  indeterminate?: IconType\n  infoNotification?: IconType\n  successNotification?: IconType\n  warningNotification?: IconType\n  dangerNotification?: IconType\n  invalid: IconType\n  invalidAlt?: IconType\n  redo?: IconType\n  selectArrow?: IconType\n  toggleChecked?: IconType\n}\n\nexport const defaultIcons: DefinedIcons = {\n  avatar: UserFilled,\n  checkbox: CheckmarkIcon,\n  close: Close,\n  confirmModal: Information,\n  delete: TrashCan,\n  promptModal: Information,\n  waitingFileUploader: CloudUpload,\n  fileUploader: AnimatingUploadIcon,\n  indeterminate: IndeterminateIcon,\n  infoNotification: Information,\n  successNotification: CheckmarkOutline,\n  warningNotification: WarningAlt,\n  dangerNotification: WarningFilled,\n  invalid: WarningFilled,\n  invalidAlt: Warning,\n  redo: Restart,\n  selectArrow: ChevronDown,\n  toggleChecked: Checkmark,\n}\n"],"mappings":";;;;;;;;;AAAA;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OAEK;AA4BA,IAAM,eAA6B;AAAA,EACxC,QAAQ;AAAA,EACR,UAAU;AAAA,EACV,OAAO;AAAA,EACP,cAAc;AAAA,EACd,QAAQ;AAAA,EACR,aAAa;AAAA,EACb,qBAAqB;AAAA,EACrB,cAAc;AAAA,EACd,eAAe;AAAA,EACf,kBAAkB;AAAA,EAClB,qBAAqB;AAAA,EACrB,qBAAqB;AAAA,EACrB,oBAAoB;AAAA,EACpB,SAAS;AAAA,EACT,YAAY;AAAA,EACZ,MAAM;AAAA,EACN,aAAa;AAAA,EACb,eAAe;AACjB;","names":[]}

package/build/modern/{chunk-BOCAJC3S.js → chunk-F72ZABKX.js}

@@ -3,7 +3,7 @@ import {
 } from "./chunk-BUVVRQLZ.js";
 import {
   $cerberusIcons
-} from "./chunk-FT7DFRHQ.js";
+} from "./chunk-VERRHMW4.js";
 
 // src/components/Tag.tsx
 import { css, cx } from "@cerberus/styled-system/css";
@@ -61,4 +61,4 @@ var closableCss = css({
 export {
   Tag
 };
-//# sourceMappingURL=chunk-BOCAJC3S.js.map
+//# sourceMappingURL=chunk-F72ZABKX.js.map

package/build/modern/chunk-JVIFMN67.js

@@ -0,0 +1,155 @@
+import {
+  Portal
+} from "./chunk-GLY7GU5S.js";
+import {
+  Modal
+} from "./chunk-BE4EOU2P.js";
+import {
+  ModalDescription
+} from "./chunk-Q7BRMIBR.js";
+import {
+  ModalHeader
+} from "./chunk-ZFAIE47A.js";
+import {
+  ModalHeading
+} from "./chunk-2UXE5PDG.js";
+import {
+  IconButton
+} from "./chunk-APD6IX5R.js";
+import {
+  Avatar
+} from "./chunk-SPZYPRZ6.js";
+import {
+  Button
+} from "./chunk-EXGKZGML.js";
+import {
+  Show
+} from "./chunk-BUVVRQLZ.js";
+import {
+  trapFocus
+} from "./chunk-JIZQFTW6.js";
+import {
+  $cerberusIcons
+} from "./chunk-VERRHMW4.js";
+import {
+  useModal
+} from "./chunk-7T3JIGM7.js";
+
+// src/context/cta-modal.tsx
+import {
+  createContext,
+  useCallback,
+  useContext,
+  useMemo,
+  useState
+} from "react";
+import { HStack } from "@cerberus/styled-system/jsx";
+import { css } from "@cerberus/styled-system/css";
+import { VStack } from "@cerberus/styled-system/jsx";
+import { jsx, jsxs } from "react/jsx-runtime";
+var CTAModalContext = createContext(null);
+function CTAModal(props) {
+  const { modalRef, show, close } = useModal();
+  const [content, setContent] = useState(null);
+  const focusTrap = trapFocus(modalRef);
+  const FallbackIcon = $cerberusIcons.confirmModal;
+  const confirmIcon = content?.icon;
+  const { close: CloseIcon } = $cerberusIcons;
+  const handleShow = useCallback(
+    (options) => {
+      const maxActions = 2;
+      if (options.actions.length > maxActions) {
+        throw new Error(
+          `CTA Modal only supports a maximum of ${maxActions} actions.`
+        );
+      }
+      setContent({ ...options });
+      show();
+    },
+    [show]
+  );
+  const handleActionClick = useCallback(
+    (event) => {
+      const index = event.currentTarget.getAttribute("data-index");
+      const action = content?.actions[Number(index)];
+      if (typeof action?.onClick === "function") {
+        action.onClick(event);
+      }
+      close();
+    },
+    [content, close]
+  );
+  const value = useMemo(
+    () => ({
+      show: handleShow
+    }),
+    [handleShow]
+  );
+  return /* @__PURE__ */ jsxs(CTAModalContext.Provider, { value, children: [
+    props.children,
+    /* @__PURE__ */ jsx(Portal, { children: /* @__PURE__ */ jsxs(Modal, { onKeyDown: focusTrap, ref: modalRef, children: [
+      /* @__PURE__ */ jsx(
+        "span",
+        {
+          className: css({
+            padding: "md",
+            position: "absolute",
+            right: 0,
+            top: 0,
+            zIndex: "decorator"
+          }),
+          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__ */ 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
+      )) }) })
+    ] }) })
+  ] });
+}
+function useCTAModal() {
+  const context = useContext(CTAModalContext);
+  if (context === null) {
+    throw new Error("useCTAModal must be used within a CTAModal Provider");
+  }
+  return context;
+}
+
+export {
+  CTAModal,
+  useCTAModal
+};
+//# sourceMappingURL=chunk-JVIFMN67.js.map

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

@@ -0,0 +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":[]}

package/build/modern/{chunk-KF6V5JLW.js → chunk-N4QTLDVM.js}

@@ -1,12 +1,12 @@
 import {
   Avatar
-} from "./chunk-ZX6DBC2Z.js";
+} from "./chunk-SPZYPRZ6.js";
 import {
   Show
 } from "./chunk-BUVVRQLZ.js";
 import {
   $cerberusIcons
-} from "./chunk-FT7DFRHQ.js";
+} from "./chunk-VERRHMW4.js";
 
 // src/components/Admonition.tsx
 import {
@@ -135,4 +135,4 @@ export {
   AdmonitionHeading,
   AdmonitionDescription
 };
-//# sourceMappingURL=chunk-KF6V5JLW.js.map
+//# sourceMappingURL=chunk-N4QTLDVM.js.map

package/build/modern/{chunk-MDIUFBDX.js → chunk-NB6DV4VA.js}

@@ -6,7 +6,7 @@ import {
 } from "./chunk-BUVVRQLZ.js";
 import {
   $cerberusIcons
-} from "./chunk-FT7DFRHQ.js";
+} from "./chunk-VERRHMW4.js";
 
 // src/components/Checkbox.tsx
 import {
@@ -53,4 +53,4 @@ function Checkbox(props) {
 export {
   Checkbox
 };
-//# sourceMappingURL=chunk-MDIUFBDX.js.map
+//# sourceMappingURL=chunk-NB6DV4VA.js.map

package/build/modern/{chunk-UJKS4DDN.js → chunk-NKM6PISB.js}

@@ -6,7 +6,7 @@ import {
 } from "./chunk-BUVVRQLZ.js";
 import {
   $cerberusIcons
-} from "./chunk-FT7DFRHQ.js";
+} from "./chunk-VERRHMW4.js";
 
 // src/components/Input.tsx
 import { input } from "@cerberus/styled-system/recipes";
@@ -39,4 +39,4 @@ function Input(props) {
 export {
   Input
 };
-//# sourceMappingURL=chunk-UJKS4DDN.js.map
+//# sourceMappingURL=chunk-NKM6PISB.js.map

package/build/modern/{chunk-YWCTMLLO.js → chunk-NMNONSHU.js}

@@ -3,7 +3,7 @@ import {
 } from "./chunk-UZDVOIW5.js";
 import {
   $cerberusIcons
-} from "./chunk-FT7DFRHQ.js";
+} from "./chunk-VERRHMW4.js";
 
 // src/components/Toggle.tsx
 import { cx } from "@cerberus/styled-system/css";
@@ -55,4 +55,4 @@ function Toggle(props) {
 export {
   Toggle
 };
-//# sourceMappingURL=chunk-YWCTMLLO.js.map
+//# sourceMappingURL=chunk-NMNONSHU.js.map

package/build/modern/{chunk-X4Y4WTRU.js → chunk-PJGUYNKD.js}

@@ -9,13 +9,13 @@ import {
 } from "./chunk-Q7BRMIBR.js";
 import {
   ModalHeader
-} from "./chunk-ULYQLKWA.js";
+} from "./chunk-ZFAIE47A.js";
 import {
   ModalHeading
 } from "./chunk-2UXE5PDG.js";
 import {
   Avatar
-} from "./chunk-ZX6DBC2Z.js";
+} from "./chunk-SPZYPRZ6.js";
 import {
   Button
 } from "./chunk-EXGKZGML.js";
@@ -27,7 +27,7 @@ import {
 } from "./chunk-JIZQFTW6.js";
 import {
   $cerberusIcons
-} from "./chunk-FT7DFRHQ.js";
+} from "./chunk-VERRHMW4.js";
 import {
   useModal
 } from "./chunk-7T3JIGM7.js";
@@ -176,4 +176,4 @@ export {
   ConfirmModal,
   useConfirmModal
 };
-//# sourceMappingURL=chunk-X4Y4WTRU.js.map
+//# sourceMappingURL=chunk-PJGUYNKD.js.map

package/build/modern/{chunk-ZX6DBC2Z.js → chunk-SPZYPRZ6.js}

@@ -3,7 +3,7 @@ import {
 } from "./chunk-BUVVRQLZ.js";
 import {
   $cerberusIcons
-} from "./chunk-FT7DFRHQ.js";
+} from "./chunk-VERRHMW4.js";
 
 // src/components/Avatar.tsx
 import { css, cx } from "@cerberus/styled-system/css";
@@ -101,4 +101,4 @@ var iconSizeMap = {
 export {
   Avatar
 };
-//# sourceMappingURL=chunk-ZX6DBC2Z.js.map
+//# sourceMappingURL=chunk-SPZYPRZ6.js.map

package/build/modern/{chunk-FT7DFRHQ.js → chunk-VERRHMW4.js}

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

package/build/modern/{chunk-HCB5NQ5J.js → chunk-W4DXACNV.js}

@@ -1,12 +1,12 @@
 import {
   Avatar
-} from "./chunk-ZX6DBC2Z.js";
+} from "./chunk-SPZYPRZ6.js";
 import {
   Show
 } from "./chunk-BUVVRQLZ.js";
 import {
   $cerberusIcons
-} from "./chunk-FT7DFRHQ.js";
+} from "./chunk-VERRHMW4.js";
 
 // src/components/FileUploader.tsx
 import { cx } from "@cerberus/styled-system/css";
@@ -72,4 +72,4 @@ function FileUploader(props) {
 export {
   FileUploader
 };
-//# sourceMappingURL=chunk-HCB5NQ5J.js.map
+//# sourceMappingURL=chunk-W4DXACNV.js.map

package/build/modern/{chunk-PA5EB7EO.js → chunk-XL4JREDT.js}

@@ -6,7 +6,7 @@ import {
 } from "./chunk-BUVVRQLZ.js";
 import {
   $cerberusIcons
-} from "./chunk-FT7DFRHQ.js";
+} from "./chunk-VERRHMW4.js";
 
 // src/components/Select.tsx
 import { cx } from "@cerberus/styled-system/css";
@@ -65,4 +65,4 @@ export {
   Select,
   Option
 };
-//# sourceMappingURL=chunk-PA5EB7EO.js.map
+//# sourceMappingURL=chunk-XL4JREDT.js.map

package/build/modern/{chunk-6EJXHRAP.js → chunk-ZBMA5G54.js}

@@ -9,13 +9,13 @@ import {
 } from "./chunk-JWIJHSI6.js";
 import {
   Avatar
-} from "./chunk-ZX6DBC2Z.js";
+} from "./chunk-SPZYPRZ6.js";
 import {
   Field
 } from "./chunk-UZDVOIW5.js";
 import {
   $cerberusIcons
-} from "./chunk-FT7DFRHQ.js";
+} from "./chunk-VERRHMW4.js";
 
 // src/components/FileStatus.tsx
 import {
@@ -225,4 +225,4 @@ export {
   processStatus,
   FileStatus
 };
-//# sourceMappingURL=chunk-6EJXHRAP.js.map
+//# sourceMappingURL=chunk-ZBMA5G54.js.map

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

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

package/build/modern/{chunk-ULYQLKWA.js.map → chunk-ZFAIE47A.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        }),\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,QACN,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          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":[]}

package/build/modern/components/Admonition.js

@@ -2,11 +2,11 @@ import {
   Admonition,
   AdmonitionDescription,
   AdmonitionHeading
-} from "../chunk-KF6V5JLW.js";
-import "../chunk-ZX6DBC2Z.js";
+} from "../chunk-N4QTLDVM.js";
+import "../chunk-SPZYPRZ6.js";
 import "../chunk-BUVVRQLZ.js";
-import "../chunk-FT7DFRHQ.js";
-import "../chunk-TMR7JGMP.js";
+import "../chunk-VERRHMW4.js";
+import "../chunk-F27AAKQ3.js";
 import "../chunk-CP7OUC2Q.js";
 import "../chunk-HVKM54BA.js";
 export {