@novu/react 3.19.2-rc.dc9caee828 → 3.20.0-rc.569d407fd0

package/dist/cjs/components/msteams-link-user/DefaultMsTeamsLinkUser.cjs

@@ -24,7 +24,6 @@ __export(DefaultMsTeamsLinkUser_exports, {
 });
 module.exports = __toCommonJS(DefaultMsTeamsLinkUser_exports);
 var import_react = require("react");
-var import_NovuUIContext = require("../../context/NovuUIContext.cjs");
 var import_Mounter = require("../Mounter.cjs");
 var import_jsx_runtime = require("react/jsx-runtime");
 var DefaultMsTeamsLinkUser = (props) => {
@@ -39,27 +38,19 @@ var DefaultMsTeamsLinkUser = (props) => {
     linkLabel,
     unlinkLabel
   } = props;
-  const { novuUI } = (0, import_NovuUIContext.useNovuUI)();
-  const mount = (0, import_react.useCallback)(
-    (element) => {
-      return novuUI.mountComponent({
-        name: "MsTeamsLinkUser",
-        props: {
-          integrationIdentifier,
-          connectionIdentifier,
-          context,
-          onLinkSuccess,
-          onLinkError,
-          onUnlinkSuccess,
-          onUnlinkError,
-          linkLabel,
-          unlinkLabel
-        },
-        element
-      });
-    },
+  const mountProps = (0, import_react.useMemo)(
+    () => ({
+      integrationIdentifier,
+      connectionIdentifier,
+      context,
+      onLinkSuccess,
+      onLinkError,
+      onUnlinkSuccess,
+      onUnlinkError,
+      linkLabel,
+      unlinkLabel
+    }),
     [
-      novuUI,
       integrationIdentifier,
       connectionIdentifier,
       context,
@@ -71,7 +62,7 @@ var DefaultMsTeamsLinkUser = (props) => {
       unlinkLabel
     ]
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Mounter.Mounter, { mount });
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Mounter.Mounter, { name: "MsTeamsLinkUser", props: mountProps });
 };
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {

package/dist/cjs/components/msteams-link-user/DefaultMsTeamsLinkUser.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/msteams-link-user/DefaultMsTeamsLinkUser.tsx"],"sourcesContent":["import { MsTeamsLinkUserProps } from '@novu/js/ui';\nimport { useCallback } from 'react';\nimport { useNovuUI } from '../../context/NovuUIContext';\nimport { Mounter } from '../Mounter';\n\nexport type DefaultMsTeamsLinkUserProps = Pick<\n  MsTeamsLinkUserProps,\n  | 'integrationIdentifier'\n  | 'connectionIdentifier'\n  | 'context'\n  | 'onLinkSuccess'\n  | 'onLinkError'\n  | 'onUnlinkSuccess'\n  | 'onUnlinkError'\n  | 'linkLabel'\n  | 'unlinkLabel'\n>;\n\nexport const DefaultMsTeamsLinkUser = (props: DefaultMsTeamsLinkUserProps) => {\n  const {\n    integrationIdentifier,\n    connectionIdentifier,\n    context,\n    onLinkSuccess,\n    onLinkError,\n    onUnlinkSuccess,\n    onUnlinkError,\n    linkLabel,\n    unlinkLabel,\n  } = props;\n  const { novuUI } = useNovuUI();\n\n  const mount = useCallback(\n    (element: HTMLElement) => {\n      return novuUI.mountComponent({\n        name: 'MsTeamsLinkUser',\n        props: {\n          integrationIdentifier,\n          connectionIdentifier,\n          context,\n          onLinkSuccess,\n          onLinkError,\n          onUnlinkSuccess,\n          onUnlinkError,\n          linkLabel,\n          unlinkLabel,\n        },\n        element,\n      });\n    },\n    [\n      novuUI,\n      integrationIdentifier,\n      connectionIdentifier,\n      context,\n      onLinkSuccess,\n      onLinkError,\n      onUnlinkSuccess,\n      onUnlinkError,\n      linkLabel,\n      unlinkLabel,\n    ]\n  );\n\n  return <Mounter mount={mount} />;\n};\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AACA,mBAA4B;AAC5B,2BAA0B;AAC1B,qBAAwB;AA6Df;AA9CF,IAAM,yBAAyB,CAAC,UAAuC;AAC5E,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,IAAI;AACJ,QAAM,EAAE,OAAO,QAAI,gCAAU;AAE7B,QAAM,YAAQ;AAAA,IACZ,CAAC,YAAyB;AACxB,aAAO,OAAO,eAAe;AAAA,QAC3B,MAAM;AAAA,QACN,OAAO;AAAA,UACL;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,QACF;AAAA,QACA;AAAA,MACF,CAAC;AAAA,IACH;AAAA,IACA;AAAA,MACE;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,EACF;AAEA,SAAO,4CAAC,0BAAQ,OAAc;AAChC;","names":[]}
+{"version":3,"sources":["../../../../src/components/msteams-link-user/DefaultMsTeamsLinkUser.tsx"],"sourcesContent":["import { MsTeamsLinkUserProps } from '@novu/js/ui';\nimport { useMemo } from 'react';\nimport { Mounter } from '../Mounter';\n\nexport type DefaultMsTeamsLinkUserProps = Pick<\n  MsTeamsLinkUserProps,\n  | 'integrationIdentifier'\n  | 'connectionIdentifier'\n  | 'context'\n  | 'onLinkSuccess'\n  | 'onLinkError'\n  | 'onUnlinkSuccess'\n  | 'onUnlinkError'\n  | 'linkLabel'\n  | 'unlinkLabel'\n>;\n\nexport const DefaultMsTeamsLinkUser = (props: DefaultMsTeamsLinkUserProps) => {\n  const {\n    integrationIdentifier,\n    connectionIdentifier,\n    context,\n    onLinkSuccess,\n    onLinkError,\n    onUnlinkSuccess,\n    onUnlinkError,\n    linkLabel,\n    unlinkLabel,\n  } = props;\n\n  const mountProps = useMemo(\n    () => ({\n      integrationIdentifier,\n      connectionIdentifier,\n      context,\n      onLinkSuccess,\n      onLinkError,\n      onUnlinkSuccess,\n      onUnlinkError,\n      linkLabel,\n      unlinkLabel,\n    }),\n    [\n      integrationIdentifier,\n      connectionIdentifier,\n      context,\n      onLinkSuccess,\n      onLinkError,\n      onUnlinkSuccess,\n      onUnlinkError,\n      linkLabel,\n      unlinkLabel,\n    ]\n  );\n\n  return <Mounter name=\"MsTeamsLinkUser\" props={mountProps} />;\n};\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AACA,mBAAwB;AACxB,qBAAwB;AAqDf;AAtCF,IAAM,yBAAyB,CAAC,UAAuC;AAC5E,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,IAAI;AAEJ,QAAM,iBAAa;AAAA,IACjB,OAAO;AAAA,MACL;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,IACA;AAAA,MACE;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,EACF;AAEA,SAAO,4CAAC,0BAAQ,MAAK,mBAAkB,OAAO,YAAY;AAC5D;","names":[]}

package/dist/cjs/components/msteams-link-user/MsTeamsLinkUser.cjs

@@ -36,10 +36,9 @@ module.exports = __toCommonJS(MsTeamsLinkUser_exports);
 var import_react = __toESM(require("react"), 1);
 var import_NovuProvider = require("../../hooks/NovuProvider.cjs");
 var import_NovuUI = require("../NovuUI.cjs");
-var import_Renderer = require("../Renderer.cjs");
 var import_DefaultMsTeamsLinkUser = require("./DefaultMsTeamsLinkUser.cjs");
 var import_jsx_runtime = require("react/jsx-runtime");
-var MsTeamsLinkUserInternal = (0, import_Renderer.withRenderer)((props) => {
+var MsTeamsLinkUserInternal = (props) => {
   const { container, appearance, ...defaultProps } = props;
   const novu = (0, import_NovuProvider.useNovu)();
   const options = (0, import_react.useMemo)(() => {
@@ -50,7 +49,7 @@ var MsTeamsLinkUserInternal = (0, import_Renderer.withRenderer)((props) => {
     };
   }, [container, appearance, novu.options]);
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_NovuUI.NovuUI, { options, novu, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_DefaultMsTeamsLinkUser.DefaultMsTeamsLinkUser, { ...defaultProps }) });
-});
+};
 MsTeamsLinkUserInternal.displayName = "MsTeamsLinkUserInternal";
 var MsTeamsLinkUser = import_react.default.memo((props) => {
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(MsTeamsLinkUserInternal, { ...props });

package/dist/cjs/components/msteams-link-user/MsTeamsLinkUser.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/msteams-link-user/MsTeamsLinkUser.tsx"],"sourcesContent":["import React, { useMemo } from 'react';\nimport { useNovu } from '../../hooks/NovuProvider';\nimport { NovuUI, NovuUIOptions } from '../NovuUI';\nimport { withRenderer } from '../Renderer';\nimport { DefaultMsTeamsLinkUser, DefaultMsTeamsLinkUserProps } from './DefaultMsTeamsLinkUser';\n\nexport type MsTeamsLinkUserProps = DefaultMsTeamsLinkUserProps & Pick<NovuUIOptions, 'container' | 'appearance'>;\n\nconst MsTeamsLinkUserInternal = withRenderer<MsTeamsLinkUserProps>((props) => {\n  const { container, appearance, ...defaultProps } = props;\n  const novu = useNovu();\n\n  const options: NovuUIOptions = useMemo(() => {\n    return {\n      container,\n      appearance,\n      options: novu.options,\n    };\n  }, [container, appearance, novu.options]);\n\n  return (\n    <NovuUI options={options} novu={novu}>\n      <DefaultMsTeamsLinkUser {...defaultProps} />\n    </NovuUI>\n  );\n});\n\nMsTeamsLinkUserInternal.displayName = 'MsTeamsLinkUserInternal';\n\nexport const MsTeamsLinkUser = React.memo((props: MsTeamsLinkUserProps) => {\n  return <MsTeamsLinkUserInternal {...props} />;\n});\n\nMsTeamsLinkUser.displayName = 'MsTeamsLinkUser';\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAA+B;AAC/B,0BAAwB;AACxB,oBAAsC;AACtC,sBAA6B;AAC7B,oCAAoE;AAkB9D;AAdN,IAAM,8BAA0B,8BAAmC,CAAC,UAAU;AAC5E,QAAM,EAAE,WAAW,YAAY,GAAG,aAAa,IAAI;AACnD,QAAM,WAAO,6BAAQ;AAErB,QAAM,cAAyB,sBAAQ,MAAM;AAC3C,WAAO;AAAA,MACL;AAAA,MACA;AAAA,MACA,SAAS,KAAK;AAAA,IAChB;AAAA,EACF,GAAG,CAAC,WAAW,YAAY,KAAK,OAAO,CAAC;AAExC,SACE,4CAAC,wBAAO,SAAkB,MACxB,sDAAC,wDAAwB,GAAG,cAAc,GAC5C;AAEJ,CAAC;AAED,wBAAwB,cAAc;AAE/B,IAAM,kBAAkB,aAAAA,QAAM,KAAK,CAAC,UAAgC;AACzE,SAAO,4CAAC,2BAAyB,GAAG,OAAO;AAC7C,CAAC;AAED,gBAAgB,cAAc;","names":["React"]}
+{"version":3,"sources":["../../../../src/components/msteams-link-user/MsTeamsLinkUser.tsx"],"sourcesContent":["import React, { useMemo } from 'react';\nimport { useNovu } from '../../hooks/NovuProvider';\nimport { NovuUI, NovuUIOptions } from '../NovuUI';\nimport { DefaultMsTeamsLinkUser, DefaultMsTeamsLinkUserProps } from './DefaultMsTeamsLinkUser';\n\nexport type MsTeamsLinkUserProps = DefaultMsTeamsLinkUserProps & Pick<NovuUIOptions, 'container' | 'appearance'>;\n\nconst MsTeamsLinkUserInternal = (props: MsTeamsLinkUserProps) => {\n  const { container, appearance, ...defaultProps } = props;\n  const novu = useNovu();\n\n  const options: NovuUIOptions = useMemo(() => {\n    return {\n      container,\n      appearance,\n      options: novu.options,\n    };\n  }, [container, appearance, novu.options]);\n\n  return (\n    <NovuUI options={options} novu={novu}>\n      <DefaultMsTeamsLinkUser {...defaultProps} />\n    </NovuUI>\n  );\n};\n\nMsTeamsLinkUserInternal.displayName = 'MsTeamsLinkUserInternal';\n\nexport const MsTeamsLinkUser = React.memo((props: MsTeamsLinkUserProps) => {\n  return <MsTeamsLinkUserInternal {...props} />;\n});\n\nMsTeamsLinkUser.displayName = 'MsTeamsLinkUser';\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAA+B;AAC/B,0BAAwB;AACxB,oBAAsC;AACtC,oCAAoE;AAkB9D;AAdN,IAAM,0BAA0B,CAAC,UAAgC;AAC/D,QAAM,EAAE,WAAW,YAAY,GAAG,aAAa,IAAI;AACnD,QAAM,WAAO,6BAAQ;AAErB,QAAM,cAAyB,sBAAQ,MAAM;AAC3C,WAAO;AAAA,MACL;AAAA,MACA;AAAA,MACA,SAAS,KAAK;AAAA,IAChB;AAAA,EACF,GAAG,CAAC,WAAW,YAAY,KAAK,OAAO,CAAC;AAExC,SACE,4CAAC,wBAAO,SAAkB,MACxB,sDAAC,wDAAwB,GAAG,cAAc,GAC5C;AAEJ;AAEA,wBAAwB,cAAc;AAE/B,IAAM,kBAAkB,aAAAA,QAAM,KAAK,CAAC,UAAgC;AACzE,SAAO,4CAAC,2BAAyB,GAAG,OAAO;AAC7C,CAAC;AAED,gBAAgB,cAAc;","names":["React"]}

package/dist/cjs/components/notification-item/ClockIcon.cjs

@@ -0,0 +1,43 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/components/notification-item/ClockIcon.tsx
+var ClockIcon_exports = {};
+__export(ClockIcon_exports, {
+  ClockIcon: () => ClockIcon
+});
+module.exports = __toCommonJS(ClockIcon_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var ClockIcon = (props) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("svg", { viewBox: "0 0 12 12", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...props, children: [
+  /* @__PURE__ */ (0, import_jsx_runtime.jsx)("title", { children: "clock" }),
+  /* @__PURE__ */ (0, import_jsx_runtime.jsx)("g", { clipPath: "url(#clip0_3188_15050)", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    "path",
+    {
+      d: "M6 3V6L8 7M11 6C11 8.76142 8.76142 11 6 11C3.23858 11 1 8.76142 1 6C1 3.23858 3.23858 1 6 1C8.76142 1 11 3.23858 11 6Z",
+      stroke: "currentColor",
+      strokeLinecap: "round",
+      strokeLinejoin: "round"
+    }
+  ) })
+] });
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  ClockIcon
+});
+//# sourceMappingURL=ClockIcon.cjs.map

package/dist/cjs/components/notification-item/ClockIcon.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/components/notification-item/ClockIcon.tsx"],"sourcesContent":["import React from 'react';\n\n/** The engine's clock icon, used when the host has no `appearance.icons.clock` override. */\nexport const ClockIcon = (props: React.SVGProps<SVGSVGElement>) => (\n  <svg viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" {...props}>\n    <title>clock</title>\n    <g clipPath=\"url(#clip0_3188_15050)\">\n      <path\n        d=\"M6 3V6L8 7M11 6C11 8.76142 8.76142 11 6 11C3.23858 11 1 8.76142 1 6C1 3.23858 3.23858 1 6 1C8.76142 1 11 3.23858 11 6Z\"\n        stroke=\"currentColor\"\n        strokeLinecap=\"round\"\n        strokeLinejoin=\"round\"\n      />\n    </g>\n  </svg>\n);\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAIE;AADK,IAAM,YAAY,CAAC,UACxB,6CAAC,SAAI,SAAQ,aAAY,MAAK,QAAO,OAAM,8BAA8B,GAAG,OAC1E;AAAA,8CAAC,WAAM,mBAAK;AAAA,EACZ,4CAAC,OAAE,UAAS,0BACV;AAAA,IAAC;AAAA;AAAA,MACC,GAAE;AAAA,MACF,QAAO;AAAA,MACP,eAAc;AAAA,MACd,gBAAe;AAAA;AAAA,EACjB,GACF;AAAA,GACF;","names":[]}

package/dist/cjs/components/notification-item/ClockIcon.d.cts

@@ -0,0 +1,7 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import React__default from 'react';
+
+/** The engine's clock icon, used when the host has no `appearance.icons.clock` override. */
+declare const ClockIcon: (props: React__default.SVGProps<SVGSVGElement>) => react_jsx_runtime.JSX.Element;
+
+export { ClockIcon };

package/dist/cjs/components/notification-item/Markdown.cjs

@@ -0,0 +1,53 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/components/notification-item/Markdown.tsx
+var Markdown_exports = {};
+__export(Markdown_exports, {
+  Markdown: () => Markdown
+});
+module.exports = __toCommonJS(Markdown_exports);
+var import_ui_core = require("@novu/js/ui-core");
+var import_react = require("react");
+var import_useEngineStores = require("../../hooks/internal/useEngineStores.cjs");
+var import_jsx_runtime = require("react/jsx-runtime");
+var Markdown = ({ children, strongKey, emKey, context }) => {
+  const style = (0, import_useEngineStores.useStyle)();
+  const tokens = (0, import_react.useMemo)(() => (0, import_ui_core.parseMarkdownIntoTokens)(children), [children]);
+  const strongClassName = style({ key: strongKey, className: import_ui_core.markdownStyles.strong.className, context });
+  const emClassName = style({ key: emKey, className: import_ui_core.markdownStyles.em.className, context });
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_jsx_runtime.Fragment, { children: tokens.map((token, index) => {
+    const key = `${index}-${token.type}`;
+    if (token.type === "boldItalic") {
+      return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("strong", { className: strongClassName, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("em", { className: emClassName, children: token.content }) }, key);
+    }
+    if (token.type === "bold") {
+      return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("strong", { className: strongClassName, children: token.content }, key);
+    }
+    if (token.type === "italic") {
+      return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("em", { className: emClassName, children: token.content }, key);
+    }
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react.Fragment, { children: token.content }, key);
+  }) });
+};
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  Markdown
+});
+//# sourceMappingURL=Markdown.cjs.map

package/dist/cjs/components/notification-item/Markdown.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/components/notification-item/Markdown.tsx"],"sourcesContent":["import { markdownStyles, parseMarkdownIntoTokens } from '@novu/js/ui-core';\nimport React, { Fragment, useMemo } from 'react';\nimport { useStyle } from '../../hooks/internal/useEngineStores';\n\ntype MarkdownProps = {\n  children: string;\n  strongKey: string;\n  emKey: string;\n  context: Record<string, unknown>;\n};\n\n/** Renders the same inline markdown as the engine: `**strong**`, `*em*`, and both nested. */\nexport const Markdown = ({ children, strongKey, emKey, context }: MarkdownProps) => {\n  const style = useStyle();\n  const tokens = useMemo(() => parseMarkdownIntoTokens(children), [children]);\n  const strongClassName = style({ key: strongKey as never, className: markdownStyles.strong.className, context });\n  const emClassName = style({ key: emKey as never, className: markdownStyles.em.className, context });\n\n  return (\n    <>\n      {tokens.map((token, index) => {\n        const key = `${index}-${token.type}`;\n        if (token.type === 'boldItalic') {\n          return (\n            <strong key={key} className={strongClassName}>\n              <em className={emClassName}>{token.content}</em>\n            </strong>\n          );\n        }\n        if (token.type === 'bold') {\n          return (\n            <strong key={key} className={strongClassName}>\n              {token.content}\n            </strong>\n          );\n        }\n        if (token.type === 'italic') {\n          return (\n            <em key={key} className={emClassName}>\n              {token.content}\n            </em>\n          );\n        }\n\n        return <Fragment key={key}>{token.content}</Fragment>;\n      })}\n    </>\n  );\n};\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,qBAAwD;AACxD,mBAAyC;AACzC,6BAAyB;AAiBrB;AAPG,IAAM,WAAW,CAAC,EAAE,UAAU,WAAW,OAAO,QAAQ,MAAqB;AAClF,QAAM,YAAQ,iCAAS;AACvB,QAAM,aAAS,sBAAQ,UAAM,wCAAwB,QAAQ,GAAG,CAAC,QAAQ,CAAC;AAC1E,QAAM,kBAAkB,MAAM,EAAE,KAAK,WAAoB,WAAW,8BAAe,OAAO,WAAW,QAAQ,CAAC;AAC9G,QAAM,cAAc,MAAM,EAAE,KAAK,OAAgB,WAAW,8BAAe,GAAG,WAAW,QAAQ,CAAC;AAElG,SACE,2EACG,iBAAO,IAAI,CAAC,OAAO,UAAU;AAC5B,UAAM,MAAM,GAAG,KAAK,IAAI,MAAM,IAAI;AAClC,QAAI,MAAM,SAAS,cAAc;AAC/B,aACE,4CAAC,YAAiB,WAAW,iBAC3B,sDAAC,QAAG,WAAW,aAAc,gBAAM,SAAQ,KADhC,GAEb;AAAA,IAEJ;AACA,QAAI,MAAM,SAAS,QAAQ;AACzB,aACE,4CAAC,YAAiB,WAAW,iBAC1B,gBAAM,WADI,GAEb;AAAA,IAEJ;AACA,QAAI,MAAM,SAAS,UAAU;AAC3B,aACE,4CAAC,QAAa,WAAW,aACtB,gBAAM,WADA,GAET;AAAA,IAEJ;AAEA,WAAO,4CAAC,yBAAoB,gBAAM,WAAZ,GAAoB;AAAA,EAC5C,CAAC,GACH;AAEJ;","names":[]}

package/dist/cjs/components/notification-item/Markdown.d.cts

@@ -0,0 +1,12 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+
+type MarkdownProps = {
+    children: string;
+    strongKey: string;
+    emKey: string;
+    context: Record<string, unknown>;
+};
+/** Renders the same inline markdown as the engine: `**strong**`, `*em*`, and both nested. */
+declare const Markdown: ({ children, strongKey, emKey, context }: MarkdownProps) => react_jsx_runtime.JSX.Element;
+
+export { Markdown };

package/dist/cjs/components/notification-item/NotificationItem.cjs

@@ -0,0 +1,146 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/components/notification-item/NotificationItem.tsx
+var NotificationItem_exports = {};
+__export(NotificationItem_exports, {
+  NotificationItem: () => NotificationItem
+});
+module.exports = __toCommonJS(NotificationItem_exports);
+var import_js = require("@novu/js");
+var import_ui_core = require("@novu/js/ui-core");
+var import_react = require("react");
+var import_useEngineStores = require("../../hooks/internal/useEngineStores.cjs");
+var import_context = require("./context.cjs");
+var import_Actions = require("./parts/Actions.cjs");
+var import_Avatar = require("./parts/Avatar.cjs");
+var import_Content = require("./parts/Content.cjs");
+var import_Date = require("./parts/Date.cjs");
+var import_Dot = require("./parts/Dot.cjs");
+var import_Subject = require("./parts/Subject.cjs");
+var import_jsx_runtime = require("react/jsx-runtime");
+var DefaultArrangement = () => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+  /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Avatar.Avatar, {}),
+  /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_Content.Content, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_Content.Text, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Subject.Subject, {}),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Subject.Body, {})
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Actions.DefaultActions, {}),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Actions.CustomActions, {}),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Date.Date, {})
+  ] }),
+  /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Dot.Dot, {})
+] });
+var NotificationItemRoot = (props) => {
+  const {
+    notification,
+    children,
+    className,
+    onNotificationClick,
+    onPrimaryActionClick,
+    onSecondaryActionClick,
+    renderAvatar,
+    renderSubject,
+    renderBody,
+    renderDefaultActions,
+    renderCustomActions
+  } = props;
+  const style = (0, import_useEngineStores.useStyle)();
+  const { inbox } = (0, import_useEngineStores.useEngineStores)();
+  const inherited = (0, import_context.useInheritedNotificationHandlers)();
+  const handlers = (0, import_react.useMemo)(
+    () => ({
+      onNotificationClick: onNotificationClick ?? inherited.onNotificationClick,
+      onPrimaryActionClick: onPrimaryActionClick ?? inherited.onPrimaryActionClick,
+      onSecondaryActionClick: onSecondaryActionClick ?? inherited.onSecondaryActionClick
+    }),
+    [onNotificationClick, onPrimaryActionClick, onSecondaryActionClick, inherited]
+  );
+  const latest = (0, import_react.useRef)({ notification, handlers });
+  latest.current = { notification, handlers };
+  const controller = (0, import_react.useMemo)(
+    () => (0, import_ui_core.createNotificationItemController)({
+      notification: () => latest.current.notification,
+      handlers: () => latest.current.handlers,
+      navigate: inbox.navigate
+    }),
+    [inbox]
+  );
+  const contextValue = (0, import_react.useMemo)(
+    () => ({
+      notification,
+      handlers,
+      renderers: { renderAvatar, renderSubject, renderBody, renderDefaultActions, renderCustomActions }
+    }),
+    [notification, handlers, renderAvatar, renderSubject, renderBody, renderDefaultActions, renderCustomActions]
+  );
+  const severity = notification.severity ?? import_js.SeverityLevelEnum.NONE;
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_context.NotificationItemProvider, { value: contextValue, children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+    "a",
+    {
+      className: style({
+        key: import_ui_core.SEVERITY_TO_NOTIFICATION_KEYS[severity],
+        className: (0, import_ui_core.cn)(
+          import_ui_core.notificationItemStyles.root.className,
+          import_ui_core.notificationItemStyles.root.severity[severity],
+          { [import_ui_core.notificationItemStyles.root.clickable]: controller.isClickable() },
+          className
+        ),
+        context: { notification }
+      }),
+      onClick: (event) => {
+        if (!(0, import_ui_core.isInsideIsland)(event.target)) {
+          event.stopPropagation();
+        }
+        void controller.handleClick(event.nativeEvent);
+      },
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          "div",
+          {
+            className: style({
+              key: import_ui_core.SEVERITY_TO_BAR_KEYS[severity],
+              className: (0, import_ui_core.cn)(import_ui_core.notificationItemStyles.bar.className, import_ui_core.notificationItemStyles.bar.severity[severity]),
+              context: { notification }
+            })
+          }
+        ),
+        children ?? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(DefaultArrangement, {})
+      ]
+    }
+  ) });
+};
+NotificationItemRoot.displayName = "NotificationItem";
+var NotificationItem = Object.assign(NotificationItemRoot, {
+  Avatar: import_Avatar.Avatar,
+  Content: import_Content.Content,
+  Text: import_Content.Text,
+  Subject: import_Subject.Subject,
+  Body: import_Subject.Body,
+  DefaultActions: import_Actions.DefaultActions,
+  CustomActions: import_Actions.CustomActions,
+  Date: import_Date.Date,
+  Dot: import_Dot.Dot
+});
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  NotificationItem
+});
+//# sourceMappingURL=NotificationItem.cjs.map

package/dist/cjs/components/notification-item/NotificationItem.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/components/notification-item/NotificationItem.tsx"],"sourcesContent":["import type { Notification } from '@novu/js';\nimport { SeverityLevelEnum } from '@novu/js';\nimport type { NotificationActionClickHandler, NotificationClickHandler } from '@novu/js/ui';\nimport {\n  cn,\n  createNotificationItemController,\n  isInsideIsland,\n  notificationItemStyles,\n  SEVERITY_TO_BAR_KEYS,\n  SEVERITY_TO_NOTIFICATION_KEYS,\n} from '@novu/js/ui-core';\nimport React, { type ReactNode, useMemo, useRef } from 'react';\nimport { useEngineStores, useStyle } from '../../hooks/internal/useEngineStores';\nimport {\n  type NotificationItemContextValue,\n  NotificationItemProvider,\n  useInheritedNotificationHandlers,\n} from './context';\nimport { CustomActions, DefaultActions } from './parts/Actions';\nimport { Avatar } from './parts/Avatar';\nimport { Content, Text } from './parts/Content';\nimport { Date } from './parts/Date';\nimport { Dot } from './parts/Dot';\nimport { Body, Subject } from './parts/Subject';\n\nexport type NotificationItemProps = {\n  notification: Notification;\n  /** Your own arrangement of the parts. Without it, the built-in arrangement is rendered. */\n  children?: ReactNode;\n  className?: string;\n  onNotificationClick?: NotificationClickHandler;\n  onPrimaryActionClick?: NotificationActionClickHandler;\n  onSecondaryActionClick?: NotificationActionClickHandler;\n  renderAvatar?: (notification: Notification) => ReactNode;\n  renderSubject?: (notification: Notification) => ReactNode;\n  renderBody?: (notification: Notification) => ReactNode;\n  renderDefaultActions?: (notification: Notification) => ReactNode;\n  renderCustomActions?: (notification: Notification) => ReactNode;\n};\n\nconst DefaultArrangement = () => (\n  <>\n    <Avatar />\n    <Content>\n      <Text>\n        <Subject />\n        <Body />\n      </Text>\n      <DefaultActions />\n      <CustomActions />\n      <Date />\n    </Content>\n    <Dot />\n  </>\n);\n\n/**\n * The built-in notification item, rendered natively in React.\n *\n * `<NotificationItem notification={n} />` is the default look. Pass children to arrange the parts yourself:\n * `NotificationItem.Avatar`, `Content`, `Text`, `Subject`, `Body`, `DefaultActions`, `CustomActions`, `Date`\n * and `Dot`. The root carries the item's behaviour in both modes: severity styling, the hover group, and the\n * click that marks the notification read and follows its redirect. Handlers fall back to the ones given to\n * `Inbox`, `Notifications` or `InboxContent`.\n */\nconst NotificationItemRoot = (props: NotificationItemProps) => {\n  const {\n    notification,\n    children,\n    className,\n    onNotificationClick,\n    onPrimaryActionClick,\n    onSecondaryActionClick,\n    renderAvatar,\n    renderSubject,\n    renderBody,\n    renderDefaultActions,\n    renderCustomActions,\n  } = props;\n  const style = useStyle();\n  const { inbox } = useEngineStores();\n  const inherited = useInheritedNotificationHandlers();\n\n  const handlers = useMemo(\n    () => ({\n      onNotificationClick: onNotificationClick ?? inherited.onNotificationClick,\n      onPrimaryActionClick: onPrimaryActionClick ?? inherited.onPrimaryActionClick,\n      onSecondaryActionClick: onSecondaryActionClick ?? inherited.onSecondaryActionClick,\n    }),\n    [onNotificationClick, onPrimaryActionClick, onSecondaryActionClick, inherited]\n  );\n\n  const latest = useRef({ notification, handlers });\n  latest.current = { notification, handlers };\n  const controller = useMemo(\n    () =>\n      createNotificationItemController({\n        notification: () => latest.current.notification,\n        handlers: () => latest.current.handlers,\n        navigate: inbox.navigate,\n      }),\n    [inbox]\n  );\n\n  const contextValue = useMemo<NotificationItemContextValue>(\n    () => ({\n      notification,\n      handlers,\n      renderers: { renderAvatar, renderSubject, renderBody, renderDefaultActions, renderCustomActions },\n    }),\n    [notification, handlers, renderAvatar, renderSubject, renderBody, renderDefaultActions, renderCustomActions]\n  );\n\n  const severity = notification.severity ?? SeverityLevelEnum.NONE;\n\n  return (\n    <NotificationItemProvider value={contextValue}>\n      <a\n        className={style({\n          key: SEVERITY_TO_NOTIFICATION_KEYS[severity],\n          className: cn(\n            notificationItemStyles.root.className,\n            notificationItemStyles.root.severity[severity],\n            { [notificationItemStyles.root.clickable]: controller.isClickable() },\n            className\n          ),\n          context: { notification },\n        })}\n        onClick={(event) => {\n          if (!isInsideIsland(event.target)) {\n            event.stopPropagation();\n          }\n          void controller.handleClick(event.nativeEvent);\n        }}\n      >\n        <div\n          className={style({\n            key: SEVERITY_TO_BAR_KEYS[severity],\n            className: cn(notificationItemStyles.bar.className, notificationItemStyles.bar.severity[severity]),\n            context: { notification },\n          })}\n        />\n        {children ?? <DefaultArrangement />}\n      </a>\n    </NotificationItemProvider>\n  );\n};\n\nNotificationItemRoot.displayName = 'NotificationItem';\n\nexport const NotificationItem = Object.assign(NotificationItemRoot, {\n  Avatar,\n  Content,\n  Text,\n  Subject,\n  Body,\n  DefaultActions,\n  CustomActions,\n  Date,\n  Dot,\n});\n"],"mappings":"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","names":[]}

package/dist/cjs/components/notification-item/NotificationItem.d.cts

@@ -0,0 +1,40 @@
+import { NotificationItemDotProps } from './parts/Dot.cjs';
+import { NotificationItemDateProps } from './parts/Date.cjs';
+import { NotificationItemSubjectProps, NotificationItemBodyProps } from './parts/Subject.cjs';
+import { NotificationItemContentProps, NotificationItemTextProps } from './parts/Content.cjs';
+import { NotificationItemAvatarProps } from './parts/Avatar.cjs';
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { Notification } from '@novu/js';
+import { NotificationClickHandler, NotificationActionClickHandler } from '@novu/js/ui';
+import { ReactNode } from 'react';
+
+type NotificationItemProps = {
+    notification: Notification;
+    /** Your own arrangement of the parts. Without it, the built-in arrangement is rendered. */
+    children?: ReactNode;
+    className?: string;
+    onNotificationClick?: NotificationClickHandler;
+    onPrimaryActionClick?: NotificationActionClickHandler;
+    onSecondaryActionClick?: NotificationActionClickHandler;
+    renderAvatar?: (notification: Notification) => ReactNode;
+    renderSubject?: (notification: Notification) => ReactNode;
+    renderBody?: (notification: Notification) => ReactNode;
+    renderDefaultActions?: (notification: Notification) => ReactNode;
+    renderCustomActions?: (notification: Notification) => ReactNode;
+};
+declare const NotificationItem: {
+    (props: NotificationItemProps): react_jsx_runtime.JSX.Element;
+    displayName: string;
+} & {
+    Avatar: ({ className }: NotificationItemAvatarProps) => react_jsx_runtime.JSX.Element;
+    Content: ({ className, children }: NotificationItemContentProps) => react_jsx_runtime.JSX.Element;
+    Text: ({ className, children }: NotificationItemTextProps) => react_jsx_runtime.JSX.Element;
+    Subject: ({ className, children }: NotificationItemSubjectProps) => react_jsx_runtime.JSX.Element | null;
+    Body: ({ className, children }: NotificationItemBodyProps) => react_jsx_runtime.JSX.Element;
+    DefaultActions: () => react_jsx_runtime.JSX.Element;
+    CustomActions: () => react_jsx_runtime.JSX.Element;
+    Date: ({ className, children }: NotificationItemDateProps) => react_jsx_runtime.JSX.Element;
+    Dot: ({ className }: NotificationItemDotProps) => react_jsx_runtime.JSX.Element;
+};
+
+export { NotificationItem, type NotificationItemProps };

package/dist/cjs/components/notification-item/context.cjs

@@ -0,0 +1,49 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/components/notification-item/context.tsx
+var context_exports = {};
+__export(context_exports, {
+  NotificationHandlersProvider: () => NotificationHandlersProvider,
+  NotificationItemProvider: () => NotificationItemProvider,
+  useInheritedNotificationHandlers: () => useInheritedNotificationHandlers,
+  useNotificationItem: () => useNotificationItem
+});
+module.exports = __toCommonJS(context_exports);
+var import_react = require("react");
+var NotificationItemContext = (0, import_react.createContext)(void 0);
+var NotificationItemProvider = NotificationItemContext.Provider;
+var useNotificationItem = (part) => {
+  const context = (0, import_react.useContext)(NotificationItemContext);
+  if (!context) {
+    throw new Error(`<NotificationItem.${part} /> must be rendered inside <NotificationItem />`);
+  }
+  return context;
+};
+var NotificationHandlersContext = (0, import_react.createContext)({});
+var NotificationHandlersProvider = NotificationHandlersContext.Provider;
+var useInheritedNotificationHandlers = () => (0, import_react.useContext)(NotificationHandlersContext);
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  NotificationHandlersProvider,
+  NotificationItemProvider,
+  useInheritedNotificationHandlers,
+  useNotificationItem
+});
+//# sourceMappingURL=context.cjs.map

package/dist/cjs/components/notification-item/context.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/components/notification-item/context.tsx"],"sourcesContent":["import type { Notification } from '@novu/js';\nimport type { NotificationItemHandlers } from '@novu/js/ui-core';\nimport { createContext, type ReactNode, useContext } from 'react';\n\nexport type NotificationItemRenderers = {\n  renderAvatar?: (notification: Notification) => ReactNode;\n  renderSubject?: (notification: Notification) => ReactNode;\n  renderBody?: (notification: Notification) => ReactNode;\n  renderDefaultActions?: (notification: Notification) => ReactNode;\n  renderCustomActions?: (notification: Notification) => ReactNode;\n};\n\nexport type NotificationItemContextValue = {\n  notification: Notification;\n  handlers: NotificationItemHandlers;\n  renderers: NotificationItemRenderers;\n};\n\nconst NotificationItemContext = createContext<NotificationItemContextValue | undefined>(undefined);\n\nexport const NotificationItemProvider = NotificationItemContext.Provider;\n\nexport const useNotificationItem = (part: string): NotificationItemContextValue => {\n  const context = useContext(NotificationItemContext);\n  if (!context) {\n    throw new Error(`<NotificationItem.${part} /> must be rendered inside <NotificationItem />`);\n  }\n\n  return context;\n};\n\n/**\n * The handlers given to `Inbox`, `Notifications` or `InboxContent`. Items rendered from their `renderNotification`\n * fall back to these when they get no handlers of their own.\n */\nconst NotificationHandlersContext = createContext<NotificationItemHandlers>({});\n\nexport const NotificationHandlersProvider = NotificationHandlersContext.Provider;\n\nexport const useInheritedNotificationHandlers = () => useContext(NotificationHandlersContext);\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAEA,mBAA0D;AAgB1D,IAAM,8BAA0B,4BAAwD,MAAS;AAE1F,IAAM,2BAA2B,wBAAwB;AAEzD,IAAM,sBAAsB,CAAC,SAA+C;AACjF,QAAM,cAAU,yBAAW,uBAAuB;AAClD,MAAI,CAAC,SAAS;AACZ,UAAM,IAAI,MAAM,qBAAqB,IAAI,kDAAkD;AAAA,EAC7F;AAEA,SAAO;AACT;AAMA,IAAM,kCAA8B,4BAAwC,CAAC,CAAC;AAEvE,IAAM,+BAA+B,4BAA4B;AAEjE,IAAM,mCAAmC,UAAM,yBAAW,2BAA2B;","names":[]}

package/dist/cjs/components/notification-item/context.d.cts

@@ -0,0 +1,23 @@
+import * as React from 'react';
+import { ReactNode } from 'react';
+import { Notification } from '@novu/js';
+import { NotificationItemHandlers } from '@novu/js/ui-core';
+
+type NotificationItemRenderers = {
+    renderAvatar?: (notification: Notification) => ReactNode;
+    renderSubject?: (notification: Notification) => ReactNode;
+    renderBody?: (notification: Notification) => ReactNode;
+    renderDefaultActions?: (notification: Notification) => ReactNode;
+    renderCustomActions?: (notification: Notification) => ReactNode;
+};
+type NotificationItemContextValue = {
+    notification: Notification;
+    handlers: NotificationItemHandlers;
+    renderers: NotificationItemRenderers;
+};
+declare const NotificationItemProvider: React.Provider<NotificationItemContextValue | undefined>;
+declare const useNotificationItem: (part: string) => NotificationItemContextValue;
+declare const NotificationHandlersProvider: React.Provider<NotificationItemHandlers>;
+declare const useInheritedNotificationHandlers: () => NotificationItemHandlers;
+
+export { NotificationHandlersProvider, type NotificationItemContextValue, NotificationItemProvider, type NotificationItemRenderers, useInheritedNotificationHandlers, useNotificationItem };

package/dist/cjs/components/notification-item/parts/Actions.cjs

@@ -0,0 +1,56 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/components/notification-item/parts/Actions.tsx
+var Actions_exports = {};
+__export(Actions_exports, {
+  CustomActions: () => CustomActions,
+  DefaultActions: () => DefaultActions
+});
+module.exports = __toCommonJS(Actions_exports);
+var import_react = require("react");
+var import_Mounter = require("../../Mounter.cjs");
+var import_context = require("../context.cjs");
+var import_jsx_runtime = require("react/jsx-runtime");
+var DefaultActions = () => {
+  const { notification, renderers } = (0, import_context.useNotificationItem)("DefaultActions");
+  const mountProps = (0, import_react.useMemo)(() => ({ notification }), [notification]);
+  if (renderers.renderDefaultActions) {
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_jsx_runtime.Fragment, { children: renderers.renderDefaultActions(notification) });
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Mounter.Mounter, { name: "NotificationDefaultActions", props: mountProps, bare: true });
+};
+var CustomActions = () => {
+  const { notification, handlers, renderers } = (0, import_context.useNotificationItem)("CustomActions");
+  const { onPrimaryActionClick, onSecondaryActionClick } = handlers;
+  const mountProps = (0, import_react.useMemo)(
+    () => ({ notification, onPrimaryActionClick, onSecondaryActionClick }),
+    [notification, onPrimaryActionClick, onSecondaryActionClick]
+  );
+  if (renderers.renderCustomActions) {
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_jsx_runtime.Fragment, { children: renderers.renderCustomActions(notification) });
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Mounter.Mounter, { name: "NotificationCustomActions", props: mountProps, bare: true });
+};
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  CustomActions,
+  DefaultActions
+});
+//# sourceMappingURL=Actions.cjs.map

package/dist/cjs/components/notification-item/parts/Actions.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../src/components/notification-item/parts/Actions.tsx"],"sourcesContent":["import React, { useMemo } from 'react';\nimport { Mounter } from '../../Mounter';\nimport { useNotificationItem } from '../context';\n\n/**\n * The read, archive and snooze controls. An island: the engine renders it into this block, so the dropdowns,\n * tooltips and pickers exist once. Clicks inside it never reach the item's own click handler.\n */\nexport const DefaultActions = () => {\n  const { notification, renderers } = useNotificationItem('DefaultActions');\n  const mountProps = useMemo(() => ({ notification }), [notification]);\n\n  if (renderers.renderDefaultActions) {\n    return <>{renderers.renderDefaultActions(notification)}</>;\n  }\n\n  return <Mounter name=\"NotificationDefaultActions\" props={mountProps} bare />;\n};\n\n/** The primary and secondary action buttons. An island, like the default actions. */\nexport const CustomActions = () => {\n  const { notification, handlers, renderers } = useNotificationItem('CustomActions');\n  const { onPrimaryActionClick, onSecondaryActionClick } = handlers;\n  const mountProps = useMemo(\n    () => ({ notification, onPrimaryActionClick, onSecondaryActionClick }),\n    [notification, onPrimaryActionClick, onSecondaryActionClick]\n  );\n\n  if (renderers.renderCustomActions) {\n    return <>{renderers.renderCustomActions(notification)}</>;\n  }\n\n  return <Mounter name=\"NotificationCustomActions\" props={mountProps} bare />;\n};\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAA+B;AAC/B,qBAAwB;AACxB,qBAAoC;AAWzB;AALJ,IAAM,iBAAiB,MAAM;AAClC,QAAM,EAAE,cAAc,UAAU,QAAI,oCAAoB,gBAAgB;AACxE,QAAM,iBAAa,sBAAQ,OAAO,EAAE,aAAa,IAAI,CAAC,YAAY,CAAC;AAEnE,MAAI,UAAU,sBAAsB;AAClC,WAAO,2EAAG,oBAAU,qBAAqB,YAAY,GAAE;AAAA,EACzD;AAEA,SAAO,4CAAC,0BAAQ,MAAK,8BAA6B,OAAO,YAAY,MAAI,MAAC;AAC5E;AAGO,IAAM,gBAAgB,MAAM;AACjC,QAAM,EAAE,cAAc,UAAU,UAAU,QAAI,oCAAoB,eAAe;AACjF,QAAM,EAAE,sBAAsB,uBAAuB,IAAI;AACzD,QAAM,iBAAa;AAAA,IACjB,OAAO,EAAE,cAAc,sBAAsB,uBAAuB;AAAA,IACpE,CAAC,cAAc,sBAAsB,sBAAsB;AAAA,EAC7D;AAEA,MAAI,UAAU,qBAAqB;AACjC,WAAO,2EAAG,oBAAU,oBAAoB,YAAY,GAAE;AAAA,EACxD;AAEA,SAAO,4CAAC,0BAAQ,MAAK,6BAA4B,OAAO,YAAY,MAAI,MAAC;AAC3E;","names":[]}

package/dist/cjs/components/notification-item/parts/Actions.d.cts

@@ -0,0 +1,11 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+
+/**
+ * The read, archive and snooze controls. An island: the engine renders it into this block, so the dropdowns,
+ * tooltips and pickers exist once. Clicks inside it never reach the item's own click handler.
+ */
+declare const DefaultActions: () => react_jsx_runtime.JSX.Element;
+/** The primary and secondary action buttons. An island, like the default actions. */
+declare const CustomActions: () => react_jsx_runtime.JSX.Element;
+
+export { CustomActions, DefaultActions };