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

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

@@ -0,0 +1,65 @@
+"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/Avatar.tsx
+var Avatar_exports = {};
+__export(Avatar_exports, {
+  Avatar: () => Avatar
+});
+module.exports = __toCommonJS(Avatar_exports);
+var import_ui_core = require("@novu/js/ui-core");
+var import_useEngineStores = require("../../../hooks/internal/useEngineStores.cjs");
+var import_context = require("../context.cjs");
+var import_jsx_runtime = require("react/jsx-runtime");
+var Avatar = ({ className }) => {
+  const { notification, renderers } = (0, import_context.useNotificationItem)("Avatar");
+  const style = (0, import_useEngineStores.useStyle)();
+  if (renderers.renderAvatar) {
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_jsx_runtime.Fragment, { children: renderers.renderAvatar(notification) });
+  }
+  if (!notification.avatar) {
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      "div",
+      {
+        className: style({
+          key: import_ui_core.notificationItemStyles.avatarFallback.key,
+          className: [import_ui_core.notificationItemStyles.avatarFallback.className, className].filter(Boolean).join(" "),
+          context: { notification }
+        })
+      }
+    );
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    "img",
+    {
+      alt: "",
+      className: style({
+        key: import_ui_core.notificationItemStyles.avatar.key,
+        className: [import_ui_core.notificationItemStyles.avatar.className, className].filter(Boolean).join(" "),
+        context: { notification }
+      }),
+      src: notification.avatar
+    }
+  );
+};
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  Avatar
+});
+//# sourceMappingURL=Avatar.cjs.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../src/components/notification-item/parts/Avatar.tsx"],"sourcesContent":["import { notificationItemStyles } from '@novu/js/ui-core';\nimport React from 'react';\nimport { useStyle } from '../../../hooks/internal/useEngineStores';\nimport { useNotificationItem } from '../context';\n\nexport type NotificationItemAvatarProps = { className?: string };\n\nexport const Avatar = ({ className }: NotificationItemAvatarProps) => {\n  const { notification, renderers } = useNotificationItem('Avatar');\n  const style = useStyle();\n\n  if (renderers.renderAvatar) {\n    return <>{renderers.renderAvatar(notification)}</>;\n  }\n\n  if (!notification.avatar) {\n    return (\n      <div\n        className={style({\n          key: notificationItemStyles.avatarFallback.key,\n          className: [notificationItemStyles.avatarFallback.className, className].filter(Boolean).join(' '),\n          context: { notification },\n        })}\n      />\n    );\n  }\n\n  return (\n    <img\n      alt=\"\"\n      className={style({\n        key: notificationItemStyles.avatar.key,\n        className: [notificationItemStyles.avatar.className, className].filter(Boolean).join(' '),\n        context: { notification },\n      })}\n      src={notification.avatar}\n    />\n  );\n};\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,qBAAuC;AAEvC,6BAAyB;AACzB,qBAAoC;AASzB;AALJ,IAAM,SAAS,CAAC,EAAE,UAAU,MAAmC;AACpE,QAAM,EAAE,cAAc,UAAU,QAAI,oCAAoB,QAAQ;AAChE,QAAM,YAAQ,iCAAS;AAEvB,MAAI,UAAU,cAAc;AAC1B,WAAO,2EAAG,oBAAU,aAAa,YAAY,GAAE;AAAA,EACjD;AAEA,MAAI,CAAC,aAAa,QAAQ;AACxB,WACE;AAAA,MAAC;AAAA;AAAA,QACC,WAAW,MAAM;AAAA,UACf,KAAK,sCAAuB,eAAe;AAAA,UAC3C,WAAW,CAAC,sCAAuB,eAAe,WAAW,SAAS,EAAE,OAAO,OAAO,EAAE,KAAK,GAAG;AAAA,UAChG,SAAS,EAAE,aAAa;AAAA,QAC1B,CAAC;AAAA;AAAA,IACH;AAAA,EAEJ;AAEA,SACE;AAAA,IAAC;AAAA;AAAA,MACC,KAAI;AAAA,MACJ,WAAW,MAAM;AAAA,QACf,KAAK,sCAAuB,OAAO;AAAA,QACnC,WAAW,CAAC,sCAAuB,OAAO,WAAW,SAAS,EAAE,OAAO,OAAO,EAAE,KAAK,GAAG;AAAA,QACxF,SAAS,EAAE,aAAa;AAAA,MAC1B,CAAC;AAAA,MACD,KAAK,aAAa;AAAA;AAAA,EACpB;AAEJ;","names":[]}

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

@@ -0,0 +1,8 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+
+type NotificationItemAvatarProps = {
+    className?: string;
+};
+declare const Avatar: ({ className }: NotificationItemAvatarProps) => react_jsx_runtime.JSX.Element;
+
+export { Avatar, type NotificationItemAvatarProps };

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

@@ -0,0 +1,66 @@
+"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/Content.tsx
+var Content_exports = {};
+__export(Content_exports, {
+  Content: () => Content,
+  Text: () => Text
+});
+module.exports = __toCommonJS(Content_exports);
+var import_ui_core = require("@novu/js/ui-core");
+var import_useEngineStores = require("../../../hooks/internal/useEngineStores.cjs");
+var import_context = require("../context.cjs");
+var import_jsx_runtime = require("react/jsx-runtime");
+var Content = ({ className, children }) => {
+  const { notification } = (0, import_context.useNotificationItem)("Content");
+  const style = (0, import_useEngineStores.useStyle)();
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    "div",
+    {
+      className: style({
+        key: import_ui_core.notificationItemStyles.content.key,
+        className: [import_ui_core.notificationItemStyles.content.className, className].filter(Boolean).join(" "),
+        context: { notification }
+      }),
+      children
+    }
+  );
+};
+var Text = ({ className, children }) => {
+  const { notification } = (0, import_context.useNotificationItem)("Text");
+  const style = (0, import_useEngineStores.useStyle)();
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    "div",
+    {
+      className: style({
+        key: import_ui_core.notificationItemStyles.textContainer.key,
+        className: [import_ui_core.notificationItemStyles.textContainer.className, className].filter(Boolean).join(" "),
+        context: { notification }
+      }),
+      children
+    }
+  );
+};
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  Content,
+  Text
+});
+//# sourceMappingURL=Content.cjs.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../src/components/notification-item/parts/Content.tsx"],"sourcesContent":["import { notificationItemStyles } from '@novu/js/ui-core';\nimport React, { type ReactNode } from 'react';\nimport { useStyle } from '../../../hooks/internal/useEngineStores';\nimport { useNotificationItem } from '../context';\n\nexport type NotificationItemContentProps = { className?: string; children?: ReactNode };\n\n/** The column next to the avatar that holds the text, the actions and the date. */\nexport const Content = ({ className, children }: NotificationItemContentProps) => {\n  const { notification } = useNotificationItem('Content');\n  const style = useStyle();\n\n  return (\n    <div\n      className={style({\n        key: notificationItemStyles.content.key,\n        className: [notificationItemStyles.content.className, className].filter(Boolean).join(' '),\n        context: { notification },\n      })}\n    >\n      {children}\n    </div>\n  );\n};\n\nexport type NotificationItemTextProps = { className?: string; children?: ReactNode };\n\n/** Groups the subject and the body. */\nexport const Text = ({ className, children }: NotificationItemTextProps) => {\n  const { notification } = useNotificationItem('Text');\n  const style = useStyle();\n\n  return (\n    <div\n      className={style({\n        key: notificationItemStyles.textContainer.key,\n        className: [notificationItemStyles.textContainer.className, className].filter(Boolean).join(' '),\n        context: { notification },\n      })}\n    >\n      {children}\n    </div>\n  );\n};\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,qBAAuC;AAEvC,6BAAyB;AACzB,qBAAoC;AAUhC;AALG,IAAM,UAAU,CAAC,EAAE,WAAW,SAAS,MAAoC;AAChF,QAAM,EAAE,aAAa,QAAI,oCAAoB,SAAS;AACtD,QAAM,YAAQ,iCAAS;AAEvB,SACE;AAAA,IAAC;AAAA;AAAA,MACC,WAAW,MAAM;AAAA,QACf,KAAK,sCAAuB,QAAQ;AAAA,QACpC,WAAW,CAAC,sCAAuB,QAAQ,WAAW,SAAS,EAAE,OAAO,OAAO,EAAE,KAAK,GAAG;AAAA,QACzF,SAAS,EAAE,aAAa;AAAA,MAC1B,CAAC;AAAA,MAEA;AAAA;AAAA,EACH;AAEJ;AAKO,IAAM,OAAO,CAAC,EAAE,WAAW,SAAS,MAAiC;AAC1E,QAAM,EAAE,aAAa,QAAI,oCAAoB,MAAM;AACnD,QAAM,YAAQ,iCAAS;AAEvB,SACE;AAAA,IAAC;AAAA;AAAA,MACC,WAAW,MAAM;AAAA,QACf,KAAK,sCAAuB,cAAc;AAAA,QAC1C,WAAW,CAAC,sCAAuB,cAAc,WAAW,SAAS,EAAE,OAAO,OAAO,EAAE,KAAK,GAAG;AAAA,QAC/F,SAAS,EAAE,aAAa;AAAA,MAC1B,CAAC;AAAA,MAEA;AAAA;AAAA,EACH;AAEJ;","names":[]}

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

@@ -0,0 +1,17 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { ReactNode } from 'react';
+
+type NotificationItemContentProps = {
+    className?: string;
+    children?: ReactNode;
+};
+/** The column next to the avatar that holds the text, the actions and the date. */
+declare const Content: ({ className, children }: NotificationItemContentProps) => react_jsx_runtime.JSX.Element;
+type NotificationItemTextProps = {
+    className?: string;
+    children?: ReactNode;
+};
+/** Groups the subject and the body. */
+declare const Text: ({ className, children }: NotificationItemTextProps) => react_jsx_runtime.JSX.Element;
+
+export { Content, type NotificationItemContentProps, type NotificationItemTextProps, Text };

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

@@ -0,0 +1,114 @@
+"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/Date.tsx
+var Date_exports = {};
+__export(Date_exports, {
+  Date: () => Date
+});
+module.exports = __toCommonJS(Date_exports);
+var import_ui_core = require("@novu/js/ui-core");
+var import_react = require("react");
+var import_NovuUIContext = require("../../../context/NovuUIContext.cjs");
+var import_useEngineStores = require("../../../hooks/internal/useEngineStores.cjs");
+var import_ClockIcon = require("../ClockIcon.cjs");
+var import_context = require("../context.cjs");
+var import_jsx_runtime = require("react/jsx-runtime");
+var MINUTE = 60 * 1e3;
+var useMinuteTick = () => {
+  const [, setMinutesPassed] = (0, import_react.useState)(0);
+  (0, import_react.useEffect)(() => {
+    const interval = setInterval(() => setMinutesPassed((prev) => prev + 1), MINUTE);
+    return () => clearInterval(interval);
+  }, []);
+};
+var Clock = ({ styleKey }) => {
+  const { notification } = (0, import_context.useNotificationItem)("Date");
+  const { icons } = (0, import_NovuUIContext.useNovuUI)();
+  const style = (0, import_useEngineStores.useStyle)();
+  const className = style({
+    key: import_ui_core.notificationItemStyles[styleKey].key,
+    className: import_ui_core.notificationItemStyles[styleKey].className,
+    iconKey: "clock",
+    context: { notification }
+  });
+  if (icons.clock) {
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_jsx_runtime.Fragment, { children: icons.clock({ class: className }) });
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ClockIcon.ClockIcon, { className });
+};
+var Date = ({ className, children }) => {
+  const { notification } = (0, import_context.useNotificationItem)("Date");
+  const style = (0, import_useEngineStores.useStyle)();
+  const { t, locale } = (0, import_useEngineStores.useLocalization)();
+  useMinuteTick();
+  const createdAt = (0, import_ui_core.formatToRelativeTime)({ fromDate: new globalThis.Date(notification.createdAt), locale });
+  const snoozedUntil = notification.snoozedUntil ? (0, import_ui_core.formatSnoozedUntil)({ untilDate: new globalThis.Date(notification.snoozedUntil), locale }) : null;
+  const deliveredAt = Array.isArray(notification.deliveredAt) ? notification.deliveredAt.map((date) => (0, import_ui_core.formatToRelativeTime)({ fromDate: new globalThis.Date(date), locale })) : null;
+  let content = createdAt;
+  if (children !== void 0) {
+    content = children;
+  } else if (snoozedUntil) {
+    content = /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Clock, { styleKey: "snoozedUntilIcon" }),
+      t("notification.snoozedUntil"),
+      " \xB7 ",
+      snoozedUntil
+    ] });
+  } else if (deliveredAt && deliveredAt.length >= 2) {
+    const [previous, latest] = deliveredAt.slice(-2);
+    content = /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+      " ",
+      previous,
+      " \xB7",
+      /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+        "span",
+        {
+          "data-variant": "secondary",
+          "data-size": "default",
+          className: style({
+            key: import_ui_core.notificationItemStyles.deliveredAtBadge.key,
+            className: [import_ui_core.badgeStyles.base, import_ui_core.badgeStyles.variants.secondary, import_ui_core.badgeStyles.sizes.default].join(" "),
+            context: { notification }
+          }),
+          children: [
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Clock, { styleKey: "deliveredAtIcon" }),
+            latest
+          ]
+        }
+      )
+    ] });
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    "div",
+    {
+      className: style({
+        key: import_ui_core.notificationItemStyles.date.key,
+        className: [import_ui_core.notificationItemStyles.date.className, className].filter(Boolean).join(" "),
+        context: { notification }
+      }),
+      children: content
+    }
+  );
+};
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  Date
+});
+//# sourceMappingURL=Date.cjs.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../src/components/notification-item/parts/Date.tsx"],"sourcesContent":["import { badgeStyles, formatSnoozedUntil, formatToRelativeTime, notificationItemStyles } from '@novu/js/ui-core';\nimport React, { type ReactNode, useEffect, useMemo, useState } from 'react';\nimport { useNovuUI } from '../../../context/NovuUIContext';\nimport { useLocalization, useStyle } from '../../../hooks/internal/useEngineStores';\nimport { ClockIcon } from '../ClockIcon';\nimport { useNotificationItem } from '../context';\n\nexport type NotificationItemDateProps = { className?: string; children?: ReactNode };\n\nconst MINUTE = 60 * 1000;\n\nconst useMinuteTick = () => {\n  const [, setMinutesPassed] = useState(0);\n\n  useEffect(() => {\n    const interval = setInterval(() => setMinutesPassed((prev) => prev + 1), MINUTE);\n\n    return () => clearInterval(interval);\n  }, []);\n};\n\nconst Clock = ({ styleKey }: { styleKey: 'deliveredAtIcon' | 'snoozedUntilIcon' }) => {\n  const { notification } = useNotificationItem('Date');\n  const { icons } = useNovuUI();\n  const style = useStyle();\n  const className = style({\n    key: notificationItemStyles[styleKey].key,\n    className: notificationItemStyles[styleKey].className,\n    iconKey: 'clock',\n    context: { notification },\n  });\n\n  if (icons.clock) {\n    return <>{icons.clock({ class: className })}</>;\n  }\n\n  return <ClockIcon className={className} />;\n};\n\n/** When the notification arrived, when it was delivered again, or until when it is snoozed. */\nexport const Date = ({ className, children }: NotificationItemDateProps) => {\n  const { notification } = useNotificationItem('Date');\n  const style = useStyle();\n  const { t, locale } = useLocalization();\n  useMinuteTick();\n\n  const createdAt = formatToRelativeTime({ fromDate: new globalThis.Date(notification.createdAt), locale });\n  const snoozedUntil = notification.snoozedUntil\n    ? formatSnoozedUntil({ untilDate: new globalThis.Date(notification.snoozedUntil), locale })\n    : null;\n  const deliveredAt = Array.isArray(notification.deliveredAt)\n    ? notification.deliveredAt.map((date) => formatToRelativeTime({ fromDate: new globalThis.Date(date), locale }))\n    : null;\n\n  let content: ReactNode = createdAt;\n  if (children !== undefined) {\n    content = children;\n  } else if (snoozedUntil) {\n    content = (\n      <>\n        <Clock styleKey=\"snoozedUntilIcon\" />\n        {t('notification.snoozedUntil')} · {snoozedUntil}\n      </>\n    );\n  } else if (deliveredAt && deliveredAt.length >= 2) {\n    const [previous, latest] = deliveredAt.slice(-2);\n    content = (\n      <>\n        {' '}\n        {previous} ·\n        <span\n          data-variant=\"secondary\"\n          data-size=\"default\"\n          className={style({\n            key: notificationItemStyles.deliveredAtBadge.key,\n            className: [badgeStyles.base, badgeStyles.variants.secondary, badgeStyles.sizes.default].join(' '),\n            context: { notification },\n          })}\n        >\n          <Clock styleKey=\"deliveredAtIcon\" />\n          {latest}\n        </span>\n      </>\n    );\n  }\n\n  return (\n    <div\n      className={style({\n        key: notificationItemStyles.date.key,\n        className: [notificationItemStyles.date.className, className].filter(Boolean).join(' '),\n        context: { notification },\n      })}\n    >\n      {content}\n    </div>\n  );\n};\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,qBAA8F;AAC9F,mBAAoE;AACpE,2BAA0B;AAC1B,6BAA0C;AAC1C,uBAA0B;AAC1B,qBAAoC;AA4BzB;AAxBX,IAAM,SAAS,KAAK;AAEpB,IAAM,gBAAgB,MAAM;AAC1B,QAAM,CAAC,EAAE,gBAAgB,QAAI,uBAAS,CAAC;AAEvC,8BAAU,MAAM;AACd,UAAM,WAAW,YAAY,MAAM,iBAAiB,CAAC,SAAS,OAAO,CAAC,GAAG,MAAM;AAE/E,WAAO,MAAM,cAAc,QAAQ;AAAA,EACrC,GAAG,CAAC,CAAC;AACP;AAEA,IAAM,QAAQ,CAAC,EAAE,SAAS,MAA4D;AACpF,QAAM,EAAE,aAAa,QAAI,oCAAoB,MAAM;AACnD,QAAM,EAAE,MAAM,QAAI,gCAAU;AAC5B,QAAM,YAAQ,iCAAS;AACvB,QAAM,YAAY,MAAM;AAAA,IACtB,KAAK,sCAAuB,QAAQ,EAAE;AAAA,IACtC,WAAW,sCAAuB,QAAQ,EAAE;AAAA,IAC5C,SAAS;AAAA,IACT,SAAS,EAAE,aAAa;AAAA,EAC1B,CAAC;AAED,MAAI,MAAM,OAAO;AACf,WAAO,2EAAG,gBAAM,MAAM,EAAE,OAAO,UAAU,CAAC,GAAE;AAAA,EAC9C;AAEA,SAAO,4CAAC,8BAAU,WAAsB;AAC1C;AAGO,IAAM,OAAO,CAAC,EAAE,WAAW,SAAS,MAAiC;AAC1E,QAAM,EAAE,aAAa,QAAI,oCAAoB,MAAM;AACnD,QAAM,YAAQ,iCAAS;AACvB,QAAM,EAAE,GAAG,OAAO,QAAI,wCAAgB;AACtC,gBAAc;AAEd,QAAM,gBAAY,qCAAqB,EAAE,UAAU,IAAI,WAAW,KAAK,aAAa,SAAS,GAAG,OAAO,CAAC;AACxG,QAAM,eAAe,aAAa,mBAC9B,mCAAmB,EAAE,WAAW,IAAI,WAAW,KAAK,aAAa,YAAY,GAAG,OAAO,CAAC,IACxF;AACJ,QAAM,cAAc,MAAM,QAAQ,aAAa,WAAW,IACtD,aAAa,YAAY,IAAI,CAAC,aAAS,qCAAqB,EAAE,UAAU,IAAI,WAAW,KAAK,IAAI,GAAG,OAAO,CAAC,CAAC,IAC5G;AAEJ,MAAI,UAAqB;AACzB,MAAI,aAAa,QAAW;AAC1B,cAAU;AAAA,EACZ,WAAW,cAAc;AACvB,cACE,4EACE;AAAA,kDAAC,SAAM,UAAS,oBAAmB;AAAA,MAClC,EAAE,2BAA2B;AAAA,MAAE;AAAA,MAAI;AAAA,OACtC;AAAA,EAEJ,WAAW,eAAe,YAAY,UAAU,GAAG;AACjD,UAAM,CAAC,UAAU,MAAM,IAAI,YAAY,MAAM,EAAE;AAC/C,cACE,4EACG;AAAA;AAAA,MACA;AAAA,MAAS;AAAA,MACV;AAAA,QAAC;AAAA;AAAA,UACC,gBAAa;AAAA,UACb,aAAU;AAAA,UACV,WAAW,MAAM;AAAA,YACf,KAAK,sCAAuB,iBAAiB;AAAA,YAC7C,WAAW,CAAC,2BAAY,MAAM,2BAAY,SAAS,WAAW,2BAAY,MAAM,OAAO,EAAE,KAAK,GAAG;AAAA,YACjG,SAAS,EAAE,aAAa;AAAA,UAC1B,CAAC;AAAA,UAED;AAAA,wDAAC,SAAM,UAAS,mBAAkB;AAAA,YACjC;AAAA;AAAA;AAAA,MACH;AAAA,OACF;AAAA,EAEJ;AAEA,SACE;AAAA,IAAC;AAAA;AAAA,MACC,WAAW,MAAM;AAAA,QACf,KAAK,sCAAuB,KAAK;AAAA,QACjC,WAAW,CAAC,sCAAuB,KAAK,WAAW,SAAS,EAAE,OAAO,OAAO,EAAE,KAAK,GAAG;AAAA,QACtF,SAAS,EAAE,aAAa;AAAA,MAC1B,CAAC;AAAA,MAEA;AAAA;AAAA,EACH;AAEJ;","names":[]}

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

@@ -0,0 +1,11 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { ReactNode } from 'react';
+
+type NotificationItemDateProps = {
+    className?: string;
+    children?: ReactNode;
+};
+/** When the notification arrived, when it was delivered again, or until when it is snoozed. */
+declare const Date: ({ className, children }: NotificationItemDateProps) => react_jsx_runtime.JSX.Element;
+
+export { Date, type NotificationItemDateProps };

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

@@ -0,0 +1,48 @@
+"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/Dot.tsx
+var Dot_exports = {};
+__export(Dot_exports, {
+  Dot: () => Dot
+});
+module.exports = __toCommonJS(Dot_exports);
+var import_ui_core = require("@novu/js/ui-core");
+var import_useEngineStores = require("../../../hooks/internal/useEngineStores.cjs");
+var import_context = require("../context.cjs");
+var import_jsx_runtime = require("react/jsx-runtime");
+var Dot = ({ className }) => {
+  const { notification } = (0, import_context.useNotificationItem)("Dot");
+  const style = (0, import_useEngineStores.useStyle)();
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: import_ui_core.notificationItemStyles.dotContainer.className, children: !notification.isRead && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    "span",
+    {
+      className: style({
+        key: import_ui_core.notificationItemStyles.dot.key,
+        className: [import_ui_core.notificationItemStyles.dot.className, className].filter(Boolean).join(" "),
+        context: { notification }
+      })
+    }
+  ) });
+};
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  Dot
+});
+//# sourceMappingURL=Dot.cjs.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../src/components/notification-item/parts/Dot.tsx"],"sourcesContent":["import { notificationItemStyles } from '@novu/js/ui-core';\nimport React from 'react';\nimport { useStyle } from '../../../hooks/internal/useEngineStores';\nimport { useNotificationItem } from '../context';\n\nexport type NotificationItemDotProps = { className?: string };\n\n/** The unread marker on the right edge of the item. */\nexport const Dot = ({ className }: NotificationItemDotProps) => {\n  const { notification } = useNotificationItem('Dot');\n  const style = useStyle();\n\n  return (\n    <div className={notificationItemStyles.dotContainer.className}>\n      {!notification.isRead && (\n        <span\n          className={style({\n            key: notificationItemStyles.dot.key,\n            className: [notificationItemStyles.dot.className, className].filter(Boolean).join(' '),\n            context: { notification },\n          })}\n        />\n      )}\n    </div>\n  );\n};\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,qBAAuC;AAEvC,6BAAyB;AACzB,qBAAoC;AAY5B;AAPD,IAAM,MAAM,CAAC,EAAE,UAAU,MAAgC;AAC9D,QAAM,EAAE,aAAa,QAAI,oCAAoB,KAAK;AAClD,QAAM,YAAQ,iCAAS;AAEvB,SACE,4CAAC,SAAI,WAAW,sCAAuB,aAAa,WACjD,WAAC,aAAa,UACb;AAAA,IAAC;AAAA;AAAA,MACC,WAAW,MAAM;AAAA,QACf,KAAK,sCAAuB,IAAI;AAAA,QAChC,WAAW,CAAC,sCAAuB,IAAI,WAAW,SAAS,EAAE,OAAO,OAAO,EAAE,KAAK,GAAG;AAAA,QACrF,SAAS,EAAE,aAAa;AAAA,MAC1B,CAAC;AAAA;AAAA,EACH,GAEJ;AAEJ;","names":[]}

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

@@ -0,0 +1,9 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+
+type NotificationItemDotProps = {
+    className?: string;
+};
+/** The unread marker on the right edge of the item. */
+declare const Dot: ({ className }: NotificationItemDotProps) => react_jsx_runtime.JSX.Element;
+
+export { Dot, type NotificationItemDotProps };

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

@@ -0,0 +1,92 @@
+"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/Subject.tsx
+var Subject_exports = {};
+__export(Subject_exports, {
+  Body: () => Body,
+  Subject: () => Subject
+});
+module.exports = __toCommonJS(Subject_exports);
+var import_ui_core = require("@novu/js/ui-core");
+var import_useEngineStores = require("../../../hooks/internal/useEngineStores.cjs");
+var import_context = require("../context.cjs");
+var import_Markdown = require("../Markdown.cjs");
+var import_jsx_runtime = require("react/jsx-runtime");
+var Subject = ({ className, children }) => {
+  const { notification, renderers } = (0, import_context.useNotificationItem)("Subject");
+  const style = (0, import_useEngineStores.useStyle)();
+  if (renderers.renderSubject) {
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_jsx_runtime.Fragment, { children: renderers.renderSubject(notification) });
+  }
+  if (children === void 0 && !notification.subject) {
+    return null;
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    "p",
+    {
+      className: style({
+        key: import_ui_core.notificationItemStyles.subject.key,
+        className: [import_ui_core.notificationItemStyles.subject.className, className].filter(Boolean).join(" "),
+        context: { notification }
+      }),
+      children: children ?? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        import_Markdown.Markdown,
+        {
+          strongKey: import_ui_core.notificationItemStyles.subject.strongKey,
+          emKey: import_ui_core.notificationItemStyles.subject.emKey,
+          context: { notification },
+          children: notification.subject ?? ""
+        }
+      )
+    }
+  );
+};
+var Body = ({ className, children }) => {
+  const { notification, renderers } = (0, import_context.useNotificationItem)("Body");
+  const style = (0, import_useEngineStores.useStyle)();
+  if (renderers.renderBody) {
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_jsx_runtime.Fragment, { children: renderers.renderBody(notification) });
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    "p",
+    {
+      className: style({
+        key: import_ui_core.notificationItemStyles.body.key,
+        className: [import_ui_core.notificationItemStyles.body.className, className].filter(Boolean).join(" "),
+        context: { notification }
+      }),
+      children: children ?? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        import_Markdown.Markdown,
+        {
+          strongKey: import_ui_core.notificationItemStyles.body.strongKey,
+          emKey: import_ui_core.notificationItemStyles.body.emKey,
+          context: { notification },
+          children: notification.body
+        }
+      )
+    }
+  );
+};
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  Body,
+  Subject
+});
+//# sourceMappingURL=Subject.cjs.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../src/components/notification-item/parts/Subject.tsx"],"sourcesContent":["import { notificationItemStyles } from '@novu/js/ui-core';\nimport React, { type ReactNode } from 'react';\nimport { useStyle } from '../../../hooks/internal/useEngineStores';\nimport { useNotificationItem } from '../context';\nimport { Markdown } from '../Markdown';\n\nexport type NotificationItemSubjectProps = { className?: string; children?: ReactNode };\n\nexport const Subject = ({ className, children }: NotificationItemSubjectProps) => {\n  const { notification, renderers } = useNotificationItem('Subject');\n  const style = useStyle();\n\n  if (renderers.renderSubject) {\n    return <>{renderers.renderSubject(notification)}</>;\n  }\n\n  if (children === undefined && !notification.subject) {\n    return null;\n  }\n\n  return (\n    <p\n      className={style({\n        key: notificationItemStyles.subject.key,\n        className: [notificationItemStyles.subject.className, className].filter(Boolean).join(' '),\n        context: { notification },\n      })}\n    >\n      {children ?? (\n        <Markdown\n          strongKey={notificationItemStyles.subject.strongKey}\n          emKey={notificationItemStyles.subject.emKey}\n          context={{ notification }}\n        >\n          {notification.subject ?? ''}\n        </Markdown>\n      )}\n    </p>\n  );\n};\n\nexport type NotificationItemBodyProps = { className?: string; children?: ReactNode };\n\nexport const Body = ({ className, children }: NotificationItemBodyProps) => {\n  const { notification, renderers } = useNotificationItem('Body');\n  const style = useStyle();\n\n  if (renderers.renderBody) {\n    return <>{renderers.renderBody(notification)}</>;\n  }\n\n  return (\n    <p\n      className={style({\n        key: notificationItemStyles.body.key,\n        className: [notificationItemStyles.body.className, className].filter(Boolean).join(' '),\n        context: { notification },\n      })}\n    >\n      {children ?? (\n        <Markdown\n          strongKey={notificationItemStyles.body.strongKey}\n          emKey={notificationItemStyles.body.emKey}\n          context={{ notification }}\n        >\n          {notification.body}\n        </Markdown>\n      )}\n    </p>\n  );\n};\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,qBAAuC;AAEvC,6BAAyB;AACzB,qBAAoC;AACpC,sBAAyB;AASd;AALJ,IAAM,UAAU,CAAC,EAAE,WAAW,SAAS,MAAoC;AAChF,QAAM,EAAE,cAAc,UAAU,QAAI,oCAAoB,SAAS;AACjE,QAAM,YAAQ,iCAAS;AAEvB,MAAI,UAAU,eAAe;AAC3B,WAAO,2EAAG,oBAAU,cAAc,YAAY,GAAE;AAAA,EAClD;AAEA,MAAI,aAAa,UAAa,CAAC,aAAa,SAAS;AACnD,WAAO;AAAA,EACT;AAEA,SACE;AAAA,IAAC;AAAA;AAAA,MACC,WAAW,MAAM;AAAA,QACf,KAAK,sCAAuB,QAAQ;AAAA,QACpC,WAAW,CAAC,sCAAuB,QAAQ,WAAW,SAAS,EAAE,OAAO,OAAO,EAAE,KAAK,GAAG;AAAA,QACzF,SAAS,EAAE,aAAa;AAAA,MAC1B,CAAC;AAAA,MAEA,sBACC;AAAA,QAAC;AAAA;AAAA,UACC,WAAW,sCAAuB,QAAQ;AAAA,UAC1C,OAAO,sCAAuB,QAAQ;AAAA,UACtC,SAAS,EAAE,aAAa;AAAA,UAEvB,uBAAa,WAAW;AAAA;AAAA,MAC3B;AAAA;AAAA,EAEJ;AAEJ;AAIO,IAAM,OAAO,CAAC,EAAE,WAAW,SAAS,MAAiC;AAC1E,QAAM,EAAE,cAAc,UAAU,QAAI,oCAAoB,MAAM;AAC9D,QAAM,YAAQ,iCAAS;AAEvB,MAAI,UAAU,YAAY;AACxB,WAAO,2EAAG,oBAAU,WAAW,YAAY,GAAE;AAAA,EAC/C;AAEA,SACE;AAAA,IAAC;AAAA;AAAA,MACC,WAAW,MAAM;AAAA,QACf,KAAK,sCAAuB,KAAK;AAAA,QACjC,WAAW,CAAC,sCAAuB,KAAK,WAAW,SAAS,EAAE,OAAO,OAAO,EAAE,KAAK,GAAG;AAAA,QACtF,SAAS,EAAE,aAAa;AAAA,MAC1B,CAAC;AAAA,MAEA,sBACC;AAAA,QAAC;AAAA;AAAA,UACC,WAAW,sCAAuB,KAAK;AAAA,UACvC,OAAO,sCAAuB,KAAK;AAAA,UACnC,SAAS,EAAE,aAAa;AAAA,UAEvB,uBAAa;AAAA;AAAA,MAChB;AAAA;AAAA,EAEJ;AAEJ;","names":[]}

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

@@ -0,0 +1,15 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { ReactNode } from 'react';
+
+type NotificationItemSubjectProps = {
+    className?: string;
+    children?: ReactNode;
+};
+declare const Subject: ({ className, children }: NotificationItemSubjectProps) => react_jsx_runtime.JSX.Element | null;
+type NotificationItemBodyProps = {
+    className?: string;
+    children?: ReactNode;
+};
+declare const Body: ({ className, children }: NotificationItemBodyProps) => react_jsx_runtime.JSX.Element;
+
+export { Body, type NotificationItemBodyProps, type NotificationItemSubjectProps, Subject };

package/dist/cjs/components/slack-connect-button/DefaultSlackConnectButton.cjs

@@ -24,7 +24,6 @@ __export(DefaultSlackConnectButton_exports, {
 });
 module.exports = __toCommonJS(DefaultSlackConnectButton_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 DefaultSlackConnectButton = (props) => {
@@ -44,32 +43,24 @@ var DefaultSlackConnectButton = (props) => {
     connectLabel,
     connectedLabel
   } = props;
-  const { novuUI } = (0, import_NovuUIContext.useNovuUI)();
-  const mount = (0, import_react.useCallback)(
-    (element) => {
-      return novuUI.mountComponent({
-        name: "SlackConnectButton",
-        props: {
-          integrationIdentifier,
-          connectionIdentifier,
-          subscriberId,
-          context,
-          contextHash,
-          scope,
-          connectionMode,
-          autoLinkUser,
-          onConnectSuccess,
-          onConnectError,
-          onDisconnectSuccess,
-          onDisconnectError,
-          connectLabel,
-          connectedLabel
-        },
-        element
-      });
-    },
+  const mountProps = (0, import_react.useMemo)(
+    () => ({
+      integrationIdentifier,
+      connectionIdentifier,
+      subscriberId,
+      context,
+      contextHash,
+      scope,
+      connectionMode,
+      autoLinkUser,
+      onConnectSuccess,
+      onConnectError,
+      onDisconnectSuccess,
+      onDisconnectError,
+      connectLabel,
+      connectedLabel
+    }),
     [
-      novuUI,
       integrationIdentifier,
       connectionIdentifier,
       subscriberId,
@@ -86,7 +77,7 @@ var DefaultSlackConnectButton = (props) => {
       connectedLabel
     ]
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Mounter.Mounter, { mount });
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Mounter.Mounter, { name: "SlackConnectButton", props: mountProps });
 };
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {

package/dist/cjs/components/slack-connect-button/DefaultSlackConnectButton.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/slack-connect-button/DefaultSlackConnectButton.tsx"],"sourcesContent":["import { SlackConnectButtonProps } from '@novu/js/ui';\nimport { useCallback } from 'react';\nimport { useNovuUI } from '../../context/NovuUIContext';\nimport { Mounter } from '../Mounter';\n\nexport type DefaultSlackConnectButtonProps = Pick<\n  SlackConnectButtonProps,\n  | 'integrationIdentifier'\n  | 'connectionIdentifier'\n  | 'subscriberId'\n  | 'context'\n  | 'contextHash'\n  | 'scope'\n  | 'connectionMode'\n  | 'autoLinkUser'\n  | 'onConnectSuccess'\n  | 'onConnectError'\n  | 'onDisconnectSuccess'\n  | 'onDisconnectError'\n  | 'connectLabel'\n  | 'connectedLabel'\n>;\n\nexport const DefaultSlackConnectButton = (props: DefaultSlackConnectButtonProps) => {\n  const {\n    integrationIdentifier,\n    connectionIdentifier,\n    subscriberId,\n    context,\n    contextHash,\n    scope,\n    connectionMode,\n    autoLinkUser,\n    onConnectSuccess,\n    onConnectError,\n    onDisconnectSuccess,\n    onDisconnectError,\n    connectLabel,\n    connectedLabel,\n  } = props;\n  const { novuUI } = useNovuUI();\n\n  const mount = useCallback(\n    (element: HTMLElement) => {\n      return novuUI.mountComponent({\n        name: 'SlackConnectButton',\n        props: {\n          integrationIdentifier,\n          connectionIdentifier,\n          subscriberId,\n          context,\n          contextHash,\n          scope,\n          connectionMode,\n          autoLinkUser,\n          onConnectSuccess,\n          onConnectError,\n          onDisconnectSuccess,\n          onDisconnectError,\n          connectLabel,\n          connectedLabel,\n        },\n        element,\n      });\n    },\n    [\n      novuUI,\n      integrationIdentifier,\n      connectionIdentifier,\n      subscriberId,\n      context,\n      contextHash,\n      scope,\n      connectionMode,\n      autoLinkUser,\n      onConnectSuccess,\n      onConnectError,\n      onDisconnectSuccess,\n      onDisconnectError,\n      connectLabel,\n      connectedLabel,\n    ]\n  );\n\n  return <Mounter mount={mount} />;\n};\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AACA,mBAA4B;AAC5B,2BAA0B;AAC1B,qBAAwB;AAiFf;AA7DF,IAAM,4BAA4B,CAAC,UAA0C;AAClF,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;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,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,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/slack-connect-button/DefaultSlackConnectButton.tsx"],"sourcesContent":["import { SlackConnectButtonProps } from '@novu/js/ui';\nimport { useMemo } from 'react';\nimport { Mounter } from '../Mounter';\n\nexport type DefaultSlackConnectButtonProps = Pick<\n  SlackConnectButtonProps,\n  | 'integrationIdentifier'\n  | 'connectionIdentifier'\n  | 'subscriberId'\n  | 'context'\n  | 'contextHash'\n  | 'scope'\n  | 'connectionMode'\n  | 'autoLinkUser'\n  | 'onConnectSuccess'\n  | 'onConnectError'\n  | 'onDisconnectSuccess'\n  | 'onDisconnectError'\n  | 'connectLabel'\n  | 'connectedLabel'\n>;\n\nexport const DefaultSlackConnectButton = (props: DefaultSlackConnectButtonProps) => {\n  const {\n    integrationIdentifier,\n    connectionIdentifier,\n    subscriberId,\n    context,\n    contextHash,\n    scope,\n    connectionMode,\n    autoLinkUser,\n    onConnectSuccess,\n    onConnectError,\n    onDisconnectSuccess,\n    onDisconnectError,\n    connectLabel,\n    connectedLabel,\n  } = props;\n\n  const mountProps = useMemo(\n    () => ({\n      integrationIdentifier,\n      connectionIdentifier,\n      subscriberId,\n      context,\n      contextHash,\n      scope,\n      connectionMode,\n      autoLinkUser,\n      onConnectSuccess,\n      onConnectError,\n      onDisconnectSuccess,\n      onDisconnectError,\n      connectLabel,\n      connectedLabel,\n    }),\n    [\n      integrationIdentifier,\n      connectionIdentifier,\n      subscriberId,\n      context,\n      contextHash,\n      scope,\n      connectionMode,\n      autoLinkUser,\n      onConnectSuccess,\n      onConnectError,\n      onDisconnectSuccess,\n      onDisconnectError,\n      connectLabel,\n      connectedLabel,\n    ]\n  );\n\n  return <Mounter name=\"SlackConnectButton\" props={mountProps} />;\n};\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AACA,mBAAwB;AACxB,qBAAwB;AAyEf;AArDF,IAAM,4BAA4B,CAAC,UAA0C;AAClF,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;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,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,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,EACF;AAEA,SAAO,4CAAC,0BAAQ,MAAK,sBAAqB,OAAO,YAAY;AAC/D;","names":[]}

package/dist/cjs/components/slack-connect-button/SlackConnectButton.cjs

@@ -36,10 +36,9 @@ module.exports = __toCommonJS(SlackConnectButton_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_DefaultSlackConnectButton = require("./DefaultSlackConnectButton.cjs");
 var import_jsx_runtime = require("react/jsx-runtime");
-var SlackConnectButtonInternal = (0, import_Renderer.withRenderer)((props) => {
+var SlackConnectButtonInternal = (props) => {
   const { container, appearance, ...defaultProps } = props;
   const novu = (0, import_NovuProvider.useNovu)();
   const options = (0, import_react.useMemo)(() => {
@@ -50,7 +49,7 @@ var SlackConnectButtonInternal = (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_DefaultSlackConnectButton.DefaultSlackConnectButton, { ...defaultProps }) });
-});
+};
 SlackConnectButtonInternal.displayName = "SlackConnectButtonInternal";
 var SlackConnectButton = import_react.default.memo((props) => {
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(SlackConnectButtonInternal, { ...props });

package/dist/cjs/components/slack-connect-button/SlackConnectButton.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/slack-connect-button/SlackConnectButton.tsx"],"sourcesContent":["import React, { useMemo } from 'react';\nimport { useNovu } from '../../hooks/NovuProvider';\nimport { NovuUI, NovuUIOptions } from '../NovuUI';\nimport { withRenderer } from '../Renderer';\nimport { DefaultSlackConnectButton, DefaultSlackConnectButtonProps } from './DefaultSlackConnectButton';\n\nexport type SlackConnectButtonProps = DefaultSlackConnectButtonProps & Pick<NovuUIOptions, 'container' | 'appearance'>;\n\nconst SlackConnectButtonInternal = withRenderer<SlackConnectButtonProps>((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      <DefaultSlackConnectButton {...defaultProps} />\n    </NovuUI>\n  );\n});\n\nSlackConnectButtonInternal.displayName = 'SlackConnectButtonInternal';\n\nexport const SlackConnectButton = React.memo((props: SlackConnectButtonProps) => {\n  return <SlackConnectButtonInternal {...props} />;\n});\n\nSlackConnectButton.displayName = 'SlackConnectButton';\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAA+B;AAC/B,0BAAwB;AACxB,oBAAsC;AACtC,sBAA6B;AAC7B,uCAA0E;AAkBpE;AAdN,IAAM,iCAA6B,8BAAsC,CAAC,UAAU;AAClF,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,8DAA2B,GAAG,cAAc,GAC/C;AAEJ,CAAC;AAED,2BAA2B,cAAc;AAElC,IAAM,qBAAqB,aAAAA,QAAM,KAAK,CAAC,UAAmC;AAC/E,SAAO,4CAAC,8BAA4B,GAAG,OAAO;AAChD,CAAC;AAED,mBAAmB,cAAc;","names":["React"]}
+{"version":3,"sources":["../../../../src/components/slack-connect-button/SlackConnectButton.tsx"],"sourcesContent":["import React, { useMemo } from 'react';\nimport { useNovu } from '../../hooks/NovuProvider';\nimport { NovuUI, NovuUIOptions } from '../NovuUI';\nimport { DefaultSlackConnectButton, DefaultSlackConnectButtonProps } from './DefaultSlackConnectButton';\n\nexport type SlackConnectButtonProps = DefaultSlackConnectButtonProps & Pick<NovuUIOptions, 'container' | 'appearance'>;\n\nconst SlackConnectButtonInternal = (props: SlackConnectButtonProps) => {\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      <DefaultSlackConnectButton {...defaultProps} />\n    </NovuUI>\n  );\n};\n\nSlackConnectButtonInternal.displayName = 'SlackConnectButtonInternal';\n\nexport const SlackConnectButton = React.memo((props: SlackConnectButtonProps) => {\n  return <SlackConnectButtonInternal {...props} />;\n});\n\nSlackConnectButton.displayName = 'SlackConnectButton';\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAA+B;AAC/B,0BAAwB;AACxB,oBAAsC;AACtC,uCAA0E;AAkBpE;AAdN,IAAM,6BAA6B,CAAC,UAAmC;AACrE,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,8DAA2B,GAAG,cAAc,GAC/C;AAEJ;AAEA,2BAA2B,cAAc;AAElC,IAAM,qBAAqB,aAAAA,QAAM,KAAK,CAAC,UAAmC;AAC/E,SAAO,4CAAC,8BAA4B,GAAG,OAAO;AAChD,CAAC;AAED,mBAAmB,cAAc;","names":["React"]}