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

package/dist/cjs/components/Notifications.cjs

@@ -34,69 +34,19 @@ __export(Notifications_exports, {
 });
 module.exports = __toCommonJS(Notifications_exports);
 var import_react = __toESM(require("react"), 1);
-var import_NovuUIContext = require("../context/NovuUIContext.cjs");
-var import_RendererContext = require("../context/RendererContext.cjs");
+var import_useNotificationOutlets = require("../hooks/internal/useNotificationOutlets.cjs");
 var import_Mounter = require("./Mounter.cjs");
-var import_Renderer = require("./Renderer.cjs");
 var import_jsx_runtime = require("react/jsx-runtime");
-var _Notifications = import_react.default.memo((props) => {
-  const {
-    renderNotification,
-    renderAvatar,
-    renderSubject,
-    renderBody,
-    renderDefaultActions,
-    renderCustomActions,
-    onNotificationClick,
-    onPrimaryActionClick,
-    onSecondaryActionClick
-  } = props;
-  const { novuUI } = (0, import_NovuUIContext.useNovuUI)();
-  const { mountElement } = (0, import_RendererContext.useRenderer)();
-  const mount = import_react.default.useCallback(
-    (element) => {
-      if (renderNotification) {
-        return novuUI.mountComponent({
-          name: "Notifications",
-          element,
-          props: {
-            renderNotification: renderNotification ? (el, notification) => mountElement(el, renderNotification(notification)) : void 0,
-            onNotificationClick,
-            onPrimaryActionClick,
-            onSecondaryActionClick
-          }
-        });
-      }
-      return novuUI.mountComponent({
-        name: "Notifications",
-        element,
-        props: {
-          renderAvatar: renderAvatar ? (el, notification) => mountElement(el, renderAvatar(notification)) : void 0,
-          renderSubject: renderSubject ? (el, notification) => mountElement(el, renderSubject(notification)) : void 0,
-          renderBody: renderBody ? (el, notification) => mountElement(el, renderBody(notification)) : void 0,
-          renderDefaultActions: renderDefaultActions ? (el, notification) => mountElement(el, renderDefaultActions(notification)) : void 0,
-          renderCustomActions: renderCustomActions ? (el, notification) => mountElement(el, renderCustomActions(notification)) : void 0,
-          onNotificationClick,
-          onPrimaryActionClick,
-          onSecondaryActionClick
-        }
-      });
-    },
-    [
-      renderNotification,
-      renderAvatar,
-      renderSubject,
-      renderBody,
-      renderDefaultActions,
-      renderCustomActions,
-      onNotificationClick,
-      onPrimaryActionClick,
-      onSecondaryActionClick
-    ]
+var Notifications = import_react.default.memo((props) => {
+  const { onNotificationClick, onPrimaryActionClick, onSecondaryActionClick } = props;
+  const outlets = (0, import_useNotificationOutlets.useNotificationOutlets)(props);
+  const mountProps = (0, import_react.useMemo)(
+    () => ({ ...outlets, onNotificationClick, onPrimaryActionClick, onSecondaryActionClick }),
+    [outlets, onNotificationClick, onPrimaryActionClick, onSecondaryActionClick]
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Mounter.Mounter, { mount });
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Mounter.Mounter, { name: "Notifications", props: mountProps });
 });
-var Notifications = (0, import_Renderer.withRenderer)(_Notifications);
+Notifications.displayName = "Notifications";
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   Notifications

package/dist/cjs/components/Notifications.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/Notifications.tsx"],"sourcesContent":["import type { NotificationActionClickHandler, NotificationClickHandler } from '@novu/js/ui';\nimport React from 'react';\nimport { useNovuUI } from '../context/NovuUIContext';\nimport { useRenderer } from '../context/RendererContext';\nimport { NoRendererProps, NotificationRendererProps, SubjectBodyRendererProps } from '../utils/types';\nimport { Mounter } from './Mounter';\nimport { withRenderer } from './Renderer';\n\nexport type NotificationProps = {\n  onNotificationClick?: NotificationClickHandler;\n  onPrimaryActionClick?: NotificationActionClickHandler;\n  onSecondaryActionClick?: NotificationActionClickHandler;\n} & (NotificationRendererProps | SubjectBodyRendererProps | NoRendererProps);\n\nconst _Notifications = React.memo((props: NotificationProps) => {\n  const {\n    renderNotification,\n    renderAvatar,\n    renderSubject,\n    renderBody,\n    renderDefaultActions,\n    renderCustomActions,\n    onNotificationClick,\n    onPrimaryActionClick,\n    onSecondaryActionClick,\n  } = props;\n  const { novuUI } = useNovuUI();\n  const { mountElement } = useRenderer();\n\n  const mount = React.useCallback(\n    (element: HTMLElement) => {\n      if (renderNotification) {\n        return novuUI.mountComponent({\n          name: 'Notifications',\n          element,\n          props: {\n            renderNotification: renderNotification\n              ? (el, notification) => mountElement(el, renderNotification(notification))\n              : undefined,\n            onNotificationClick,\n            onPrimaryActionClick,\n            onSecondaryActionClick,\n          },\n        });\n      }\n\n      return novuUI.mountComponent({\n        name: 'Notifications',\n        element,\n        props: {\n          renderAvatar: renderAvatar ? (el, notification) => mountElement(el, renderAvatar(notification)) : undefined,\n          renderSubject: renderSubject\n            ? (el, notification) => mountElement(el, renderSubject(notification))\n            : undefined,\n          renderBody: renderBody ? (el, notification) => mountElement(el, renderBody(notification)) : undefined,\n          renderDefaultActions: renderDefaultActions\n            ? (el, notification) => mountElement(el, renderDefaultActions(notification))\n            : undefined,\n          renderCustomActions: renderCustomActions\n            ? (el, notification) => mountElement(el, renderCustomActions(notification))\n            : undefined,\n          onNotificationClick,\n          onPrimaryActionClick,\n          onSecondaryActionClick,\n        },\n      });\n    },\n    [\n      renderNotification,\n      renderAvatar,\n      renderSubject,\n      renderBody,\n      renderDefaultActions,\n      renderCustomActions,\n      onNotificationClick,\n      onPrimaryActionClick,\n      onSecondaryActionClick,\n    ]\n  );\n\n  return <Mounter mount={mount} />;\n});\n\nexport const Notifications = withRenderer(_Notifications);\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AACA,mBAAkB;AAClB,2BAA0B;AAC1B,6BAA4B;AAE5B,qBAAwB;AACxB,sBAA6B;AA0EpB;AAlET,IAAM,iBAAiB,aAAAA,QAAM,KAAK,CAAC,UAA6B;AAC9D,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;AAC7B,QAAM,EAAE,aAAa,QAAI,oCAAY;AAErC,QAAM,QAAQ,aAAAA,QAAM;AAAA,IAClB,CAAC,YAAyB;AACxB,UAAI,oBAAoB;AACtB,eAAO,OAAO,eAAe;AAAA,UAC3B,MAAM;AAAA,UACN;AAAA,UACA,OAAO;AAAA,YACL,oBAAoB,qBAChB,CAAC,IAAI,iBAAiB,aAAa,IAAI,mBAAmB,YAAY,CAAC,IACvE;AAAA,YACJ;AAAA,YACA;AAAA,YACA;AAAA,UACF;AAAA,QACF,CAAC;AAAA,MACH;AAEA,aAAO,OAAO,eAAe;AAAA,QAC3B,MAAM;AAAA,QACN;AAAA,QACA,OAAO;AAAA,UACL,cAAc,eAAe,CAAC,IAAI,iBAAiB,aAAa,IAAI,aAAa,YAAY,CAAC,IAAI;AAAA,UAClG,eAAe,gBACX,CAAC,IAAI,iBAAiB,aAAa,IAAI,cAAc,YAAY,CAAC,IAClE;AAAA,UACJ,YAAY,aAAa,CAAC,IAAI,iBAAiB,aAAa,IAAI,WAAW,YAAY,CAAC,IAAI;AAAA,UAC5F,sBAAsB,uBAClB,CAAC,IAAI,iBAAiB,aAAa,IAAI,qBAAqB,YAAY,CAAC,IACzE;AAAA,UACJ,qBAAqB,sBACjB,CAAC,IAAI,iBAAiB,aAAa,IAAI,oBAAoB,YAAY,CAAC,IACxE;AAAA,UACJ;AAAA,UACA;AAAA,UACA;AAAA,QACF;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,IACF;AAAA,EACF;AAEA,SAAO,4CAAC,0BAAQ,OAAc;AAChC,CAAC;AAEM,IAAM,oBAAgB,8BAAa,cAAc;","names":["React"]}
+{"version":3,"sources":["../../../src/components/Notifications.tsx"],"sourcesContent":["import type { NotificationActionClickHandler, NotificationClickHandler } from '@novu/js/ui';\nimport React, { useMemo } from 'react';\nimport { useNotificationOutlets } from '../hooks/internal/useNotificationOutlets';\nimport { NoRendererProps, NotificationRendererProps, SubjectBodyRendererProps } from '../utils/types';\nimport { Mounter } from './Mounter';\n\nexport type NotificationProps = {\n  onNotificationClick?: NotificationClickHandler;\n  onPrimaryActionClick?: NotificationActionClickHandler;\n  onSecondaryActionClick?: NotificationActionClickHandler;\n} & (NotificationRendererProps | SubjectBodyRendererProps | NoRendererProps);\n\nexport const Notifications = React.memo((props: NotificationProps) => {\n  const { onNotificationClick, onPrimaryActionClick, onSecondaryActionClick } = props;\n  const outlets = useNotificationOutlets(props);\n\n  const mountProps = useMemo(\n    () => ({ ...outlets, onNotificationClick, onPrimaryActionClick, onSecondaryActionClick }),\n    [outlets, onNotificationClick, onPrimaryActionClick, onSecondaryActionClick]\n  );\n\n  return <Mounter name=\"Notifications\" props={mountProps} />;\n});\n\nNotifications.displayName = 'Notifications';\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AACA,mBAA+B;AAC/B,oCAAuC;AAEvC,qBAAwB;AAiBf;AATF,IAAM,gBAAgB,aAAAA,QAAM,KAAK,CAAC,UAA6B;AACpE,QAAM,EAAE,qBAAqB,sBAAsB,uBAAuB,IAAI;AAC9E,QAAM,cAAU,sDAAuB,KAAK;AAE5C,QAAM,iBAAa;AAAA,IACjB,OAAO,EAAE,GAAG,SAAS,qBAAqB,sBAAsB,uBAAuB;AAAA,IACvF,CAAC,SAAS,qBAAqB,sBAAsB,sBAAsB;AAAA,EAC7E;AAEA,SAAO,4CAAC,0BAAQ,MAAK,iBAAgB,OAAO,YAAY;AAC1D,CAAC;AAED,cAAc,cAAc;","names":["React"]}

package/dist/cjs/components/Notifications.d.cts

@@ -1,3 +1,4 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
 import { NotificationClickHandler, NotificationActionClickHandler } from '@novu/js/ui';
 import React__default from 'react';
 import { NotificationRendererProps, SubjectBodyRendererProps, NoRendererProps } from '../utils/types.cjs';
@@ -8,8 +9,6 @@ type NotificationProps = {
     onPrimaryActionClick?: NotificationActionClickHandler;
     onSecondaryActionClick?: NotificationActionClickHandler;
 } & (NotificationRendererProps | SubjectBodyRendererProps | NoRendererProps);
-declare const Notifications: React__default.ComponentType<NotificationProps & {
-    children?: React__default.ReactNode | undefined;
-}>;
+declare const Notifications: React__default.MemoExoticComponent<(props: NotificationProps) => react_jsx_runtime.JSX.Element>;
 
 export { type NotificationProps, Notifications };

package/dist/cjs/components/NovuUI.cjs

@@ -26,9 +26,11 @@ module.exports = __toCommonJS(NovuUI_exports);
 var import_ui = require("@novu/js/ui");
 var import_react = require("react");
 var import_NovuUIContext = require("../context/NovuUIContext.cjs");
-var import_RendererContext = require("../context/RendererContext.cjs");
+var import_OutletStore = require("../context/OutletStore.cjs");
 var import_useDataRef = require("../hooks/internal/useDataRef.cjs");
+var import_useIsomorphicLayoutEffect = require("../hooks/internal/useIsomorphicLayoutEffect.cjs");
 var import_appearance = require("../utils/appearance.cjs");
+var import_OutletHost = require("./OutletHost.cjs");
 var import_ShadowRootDetector = require("./ShadowRootDetector.cjs");
 var import_jsx_runtime = require("react/jsx-runtime");
 var findParentShadowRoot = (child) => {
@@ -51,11 +53,12 @@ var findParentShadowRoot = (child) => {
   return null;
 };
 var NovuUI = ({ options, novu, children }) => {
+  var _a;
   const shadowRootDetector = (0, import_react.useRef)(null);
-  const { mountElement } = (0, import_RendererContext.useRenderer)();
+  const outlets = (0, import_react.useMemo)(() => new import_OutletStore.OutletStore(), []);
   const adaptedAppearanceForUpdate = (0, import_react.useMemo)(
-    () => (0, import_appearance.adaptAppearanceForJs)(options.appearance || {}, mountElement),
-    [options.appearance, mountElement]
+    () => (0, import_appearance.adaptAppearanceForJs)(options.appearance || {}, outlets),
+    [options.appearance, outlets]
   );
   const adaptedOptions = (0, import_react.useMemo)(() => {
     return {
@@ -66,7 +69,7 @@ var NovuUI = ({ options, novu, children }) => {
   }, [options, novu, adaptedAppearanceForUpdate]);
   const optionsRef = (0, import_useDataRef.useDataRef)(adaptedOptions);
   const [novuUI, setNovuUI] = (0, import_react.useState)();
-  (0, import_react.useEffect)(() => {
+  (0, import_useIsomorphicLayoutEffect.useIsomorphicLayoutEffect)(() => {
     const parentShadowRoot = findParentShadowRoot(shadowRootDetector.current);
     const instance = new import_ui.NovuUI({
       ...optionsRef.current,
@@ -99,9 +102,17 @@ var NovuUI = ({ options, novu, children }) => {
     options.routerPush,
     novu
   ]);
+  const icons = (_a = options.appearance) == null ? void 0 : _a.icons;
+  const contextValue = (0, import_react.useMemo)(
+    () => novuUI ? { novuUI, outlets, icons: icons ?? {} } : void 0,
+    [novuUI, outlets, icons]
+  );
   return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
     /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ShadowRootDetector.ShadowRootDetector, { ref: shadowRootDetector }),
-    novuUI && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_NovuUIContext.NovuUIProvider, { value: { novuUI }, children })
+    contextValue && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_NovuUIContext.NovuUIProvider, { value: contextValue, children: [
+      children,
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_OutletHost.OutletHost, { store: outlets })
+    ] })
   ] });
 };
 // Annotate the CommonJS export names for ESM import in node:

package/dist/cjs/components/NovuUI.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/NovuUI.tsx"],"sourcesContent":["import { Novu } from '@novu/js';\nimport type { NovuUIOptions as JsNovuUIOptions } from '@novu/js/ui';\nimport { NovuUI as NovuUIClass } from '@novu/js/ui';\nimport React, { useEffect, useMemo, useRef, useState } from 'react';\nimport { NovuUIProvider } from '../context/NovuUIContext';\nimport { useRenderer } from '../context/RendererContext';\nimport { useDataRef } from '../hooks/internal/useDataRef';\nimport { adaptAppearanceForJs } from '../utils/appearance';\nimport type { ReactAllAppearance, ReactInboxAppearance, ReactSubscriptionAppearance } from '../utils/types';\nimport { ShadowRootDetector } from './ShadowRootDetector';\n\nexport type NovuUIOptions = Omit<JsNovuUIOptions, 'appearance'> & {\n  appearance?: ReactInboxAppearance | ReactSubscriptionAppearance | ReactAllAppearance;\n};\n\ntype NovuUIProps = React.PropsWithChildren<{\n  options: NovuUIOptions;\n  novu: Novu;\n}>;\n\nconst findParentShadowRoot = (child?: HTMLDivElement | null): Node | null => {\n  if (!child) {\n    return null;\n  }\n\n  let node: Node | null = child;\n\n  while (node) {\n    if (node instanceof Element && node.shadowRoot) {\n      return node.shadowRoot;\n    }\n\n    if (node instanceof ShadowRoot) {\n      return node;\n    }\n\n    node = node.parentNode;\n\n    if (!node || node === document) {\n      break;\n    }\n  }\n\n  return null;\n};\n\nexport const NovuUI = ({ options, novu, children }: NovuUIProps) => {\n  const shadowRootDetector = useRef<HTMLDivElement>(null);\n  const { mountElement } = useRenderer();\n\n  const adaptedAppearanceForUpdate = useMemo(\n    () => adaptAppearanceForJs(options.appearance || {}, mountElement),\n    [options.appearance, mountElement]\n  );\n\n  const adaptedOptions = useMemo(() => {\n    return {\n      ...options,\n      appearance: adaptedAppearanceForUpdate,\n      novu,\n    };\n  }, [options, novu, adaptedAppearanceForUpdate]);\n\n  const optionsRef = useDataRef(adaptedOptions);\n  const [novuUI, setNovuUI] = useState<NovuUIClass | undefined>();\n\n  useEffect(() => {\n    const parentShadowRoot = findParentShadowRoot(shadowRootDetector.current);\n    const instance = new NovuUIClass({\n      ...optionsRef.current,\n      container: optionsRef.current.container ?? parentShadowRoot,\n    });\n    setNovuUI(instance);\n\n    return () => {\n      instance.unmount();\n    };\n  }, []);\n\n  useEffect(() => {\n    if (!novuUI) {\n      return;\n    }\n\n    const parentShadowRoot = findParentShadowRoot(shadowRootDetector.current);\n    novuUI.updateContainer(options.container ?? parentShadowRoot);\n    novuUI.updateAppearance(adaptedAppearanceForUpdate);\n    novuUI.updateLocalization(options.localization);\n    novuUI.updateTabs(options.tabs);\n    novuUI.updateOptions(options.options);\n    novuUI.updateRouterPush(options.routerPush);\n    novuUI.updateNovu(novu);\n  }, [\n    shadowRootDetector,\n    novuUI,\n    adaptedAppearanceForUpdate,\n    options.localization,\n    options.tabs,\n    options.options,\n    options.routerPush,\n    novu,\n  ]);\n\n  return (\n    <>\n      <ShadowRootDetector ref={shadowRootDetector} />\n      {novuUI && <NovuUIProvider value={{ novuUI }}>{children}</NovuUIProvider>}\n    </>\n  );\n};\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAEA,gBAAsC;AACtC,mBAA4D;AAC5D,2BAA+B;AAC/B,6BAA4B;AAC5B,wBAA2B;AAC3B,wBAAqC;AAErC,gCAAmC;AA+F/B;AApFJ,IAAM,uBAAuB,CAAC,UAA+C;AAC3E,MAAI,CAAC,OAAO;AACV,WAAO;AAAA,EACT;AAEA,MAAI,OAAoB;AAExB,SAAO,MAAM;AACX,QAAI,gBAAgB,WAAW,KAAK,YAAY;AAC9C,aAAO,KAAK;AAAA,IACd;AAEA,QAAI,gBAAgB,YAAY;AAC9B,aAAO;AAAA,IACT;AAEA,WAAO,KAAK;AAEZ,QAAI,CAAC,QAAQ,SAAS,UAAU;AAC9B;AAAA,IACF;AAAA,EACF;AAEA,SAAO;AACT;AAEO,IAAM,SAAS,CAAC,EAAE,SAAS,MAAM,SAAS,MAAmB;AAClE,QAAM,yBAAqB,qBAAuB,IAAI;AACtD,QAAM,EAAE,aAAa,QAAI,oCAAY;AAErC,QAAM,iCAA6B;AAAA,IACjC,UAAM,wCAAqB,QAAQ,cAAc,CAAC,GAAG,YAAY;AAAA,IACjE,CAAC,QAAQ,YAAY,YAAY;AAAA,EACnC;AAEA,QAAM,qBAAiB,sBAAQ,MAAM;AACnC,WAAO;AAAA,MACL,GAAG;AAAA,MACH,YAAY;AAAA,MACZ;AAAA,IACF;AAAA,EACF,GAAG,CAAC,SAAS,MAAM,0BAA0B,CAAC;AAE9C,QAAM,iBAAa,8BAAW,cAAc;AAC5C,QAAM,CAAC,QAAQ,SAAS,QAAI,uBAAkC;AAE9D,8BAAU,MAAM;AACd,UAAM,mBAAmB,qBAAqB,mBAAmB,OAAO;AACxE,UAAM,WAAW,IAAI,UAAAA,OAAY;AAAA,MAC/B,GAAG,WAAW;AAAA,MACd,WAAW,WAAW,QAAQ,aAAa;AAAA,IAC7C,CAAC;AACD,cAAU,QAAQ;AAElB,WAAO,MAAM;AACX,eAAS,QAAQ;AAAA,IACnB;AAAA,EACF,GAAG,CAAC,CAAC;AAEL,8BAAU,MAAM;AACd,QAAI,CAAC,QAAQ;AACX;AAAA,IACF;AAEA,UAAM,mBAAmB,qBAAqB,mBAAmB,OAAO;AACxE,WAAO,gBAAgB,QAAQ,aAAa,gBAAgB;AAC5D,WAAO,iBAAiB,0BAA0B;AAClD,WAAO,mBAAmB,QAAQ,YAAY;AAC9C,WAAO,WAAW,QAAQ,IAAI;AAC9B,WAAO,cAAc,QAAQ,OAAO;AACpC,WAAO,iBAAiB,QAAQ,UAAU;AAC1C,WAAO,WAAW,IAAI;AAAA,EACxB,GAAG;AAAA,IACD;AAAA,IACA;AAAA,IACA;AAAA,IACA,QAAQ;AAAA,IACR,QAAQ;AAAA,IACR,QAAQ;AAAA,IACR,QAAQ;AAAA,IACR;AAAA,EACF,CAAC;AAED,SACE,4EACE;AAAA,gDAAC,gDAAmB,KAAK,oBAAoB;AAAA,IAC5C,UAAU,4CAAC,uCAAe,OAAO,EAAE,OAAO,GAAI,UAAS;AAAA,KAC1D;AAEJ;","names":["NovuUIClass"]}
+{"version":3,"sources":["../../../src/components/NovuUI.tsx"],"sourcesContent":["import { Novu } from '@novu/js';\nimport type { NovuUIOptions as JsNovuUIOptions } from '@novu/js/ui';\nimport { NovuUI as NovuUIClass } from '@novu/js/ui';\nimport React, { useEffect, useMemo, useRef, useState } from 'react';\nimport { NovuUIProvider } from '../context/NovuUIContext';\nimport { OutletStore } from '../context/OutletStore';\nimport { useDataRef } from '../hooks/internal/useDataRef';\nimport { useIsomorphicLayoutEffect } from '../hooks/internal/useIsomorphicLayoutEffect';\nimport { adaptAppearanceForJs } from '../utils/appearance';\nimport type {\n  ReactAllAppearance,\n  ReactAllIconOverrides,\n  ReactInboxAppearance,\n  ReactSubscriptionAppearance,\n} from '../utils/types';\nimport { OutletHost } from './OutletHost';\nimport { ShadowRootDetector } from './ShadowRootDetector';\n\nexport type NovuUIOptions = Omit<JsNovuUIOptions, 'appearance'> & {\n  appearance?: ReactInboxAppearance | ReactSubscriptionAppearance | ReactAllAppearance;\n};\n\ntype NovuUIProps = React.PropsWithChildren<{\n  options: NovuUIOptions;\n  novu: Novu;\n}>;\n\nconst findParentShadowRoot = (child?: HTMLDivElement | null): Node | null => {\n  if (!child) {\n    return null;\n  }\n\n  let node: Node | null = child;\n\n  while (node) {\n    if (node instanceof Element && node.shadowRoot) {\n      return node.shadowRoot;\n    }\n\n    if (node instanceof ShadowRoot) {\n      return node;\n    }\n\n    node = node.parentNode;\n\n    if (!node || node === document) {\n      break;\n    }\n  }\n\n  return null;\n};\n\n/**\n * Owns one engine instance and the outlet store that goes with it. Everything rendered below, portals into\n * outlets included, can reach both through `useNovuUI()`.\n */\nexport const NovuUI = ({ options, novu, children }: NovuUIProps) => {\n  const shadowRootDetector = useRef<HTMLDivElement>(null);\n  const outlets = useMemo(() => new OutletStore(), []);\n\n  const adaptedAppearanceForUpdate = useMemo(\n    () => adaptAppearanceForJs(options.appearance || {}, outlets),\n    [options.appearance, outlets]\n  );\n\n  const adaptedOptions = useMemo(() => {\n    return {\n      ...options,\n      appearance: adaptedAppearanceForUpdate,\n      novu,\n    };\n  }, [options, novu, adaptedAppearanceForUpdate]);\n\n  const optionsRef = useDataRef(adaptedOptions);\n  const [novuUI, setNovuUI] = useState<NovuUIClass | undefined>();\n\n  useIsomorphicLayoutEffect(() => {\n    const parentShadowRoot = findParentShadowRoot(shadowRootDetector.current);\n    const instance = new NovuUIClass({\n      ...optionsRef.current,\n      container: optionsRef.current.container ?? parentShadowRoot,\n    });\n    setNovuUI(instance);\n\n    return () => {\n      instance.unmount();\n    };\n  }, []);\n\n  useEffect(() => {\n    if (!novuUI) {\n      return;\n    }\n\n    const parentShadowRoot = findParentShadowRoot(shadowRootDetector.current);\n    novuUI.updateContainer(options.container ?? parentShadowRoot);\n    novuUI.updateAppearance(adaptedAppearanceForUpdate);\n    novuUI.updateLocalization(options.localization);\n    novuUI.updateTabs(options.tabs);\n    novuUI.updateOptions(options.options);\n    novuUI.updateRouterPush(options.routerPush);\n    novuUI.updateNovu(novu);\n  }, [\n    shadowRootDetector,\n    novuUI,\n    adaptedAppearanceForUpdate,\n    options.localization,\n    options.tabs,\n    options.options,\n    options.routerPush,\n    novu,\n  ]);\n\n  const icons = options.appearance?.icons;\n  const contextValue = useMemo(\n    () => (novuUI ? { novuUI, outlets, icons: (icons ?? {}) as ReactAllIconOverrides } : undefined),\n    [novuUI, outlets, icons]\n  );\n\n  return (\n    <>\n      <ShadowRootDetector ref={shadowRootDetector} />\n      {contextValue && (\n        <NovuUIProvider value={contextValue}>\n          {children}\n          {/* after the children on purpose: their render props update refs during render, the outlets read them */}\n          <OutletHost store={outlets} />\n        </NovuUIProvider>\n      )}\n    </>\n  );\n};\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAEA,gBAAsC;AACtC,mBAA4D;AAC5D,2BAA+B;AAC/B,yBAA4B;AAC5B,wBAA2B;AAC3B,uCAA0C;AAC1C,wBAAqC;AAOrC,wBAA2B;AAC3B,gCAAmC;AAyG/B;AA9FJ,IAAM,uBAAuB,CAAC,UAA+C;AAC3E,MAAI,CAAC,OAAO;AACV,WAAO;AAAA,EACT;AAEA,MAAI,OAAoB;AAExB,SAAO,MAAM;AACX,QAAI,gBAAgB,WAAW,KAAK,YAAY;AAC9C,aAAO,KAAK;AAAA,IACd;AAEA,QAAI,gBAAgB,YAAY;AAC9B,aAAO;AAAA,IACT;AAEA,WAAO,KAAK;AAEZ,QAAI,CAAC,QAAQ,SAAS,UAAU;AAC9B;AAAA,IACF;AAAA,EACF;AAEA,SAAO;AACT;AAMO,IAAM,SAAS,CAAC,EAAE,SAAS,MAAM,SAAS,MAAmB;AAzDpE;AA0DE,QAAM,yBAAqB,qBAAuB,IAAI;AACtD,QAAM,cAAU,sBAAQ,MAAM,IAAI,+BAAY,GAAG,CAAC,CAAC;AAEnD,QAAM,iCAA6B;AAAA,IACjC,UAAM,wCAAqB,QAAQ,cAAc,CAAC,GAAG,OAAO;AAAA,IAC5D,CAAC,QAAQ,YAAY,OAAO;AAAA,EAC9B;AAEA,QAAM,qBAAiB,sBAAQ,MAAM;AACnC,WAAO;AAAA,MACL,GAAG;AAAA,MACH,YAAY;AAAA,MACZ;AAAA,IACF;AAAA,EACF,GAAG,CAAC,SAAS,MAAM,0BAA0B,CAAC;AAE9C,QAAM,iBAAa,8BAAW,cAAc;AAC5C,QAAM,CAAC,QAAQ,SAAS,QAAI,uBAAkC;AAE9D,kEAA0B,MAAM;AAC9B,UAAM,mBAAmB,qBAAqB,mBAAmB,OAAO;AACxE,UAAM,WAAW,IAAI,UAAAA,OAAY;AAAA,MAC/B,GAAG,WAAW;AAAA,MACd,WAAW,WAAW,QAAQ,aAAa;AAAA,IAC7C,CAAC;AACD,cAAU,QAAQ;AAElB,WAAO,MAAM;AACX,eAAS,QAAQ;AAAA,IACnB;AAAA,EACF,GAAG,CAAC,CAAC;AAEL,8BAAU,MAAM;AACd,QAAI,CAAC,QAAQ;AACX;AAAA,IACF;AAEA,UAAM,mBAAmB,qBAAqB,mBAAmB,OAAO;AACxE,WAAO,gBAAgB,QAAQ,aAAa,gBAAgB;AAC5D,WAAO,iBAAiB,0BAA0B;AAClD,WAAO,mBAAmB,QAAQ,YAAY;AAC9C,WAAO,WAAW,QAAQ,IAAI;AAC9B,WAAO,cAAc,QAAQ,OAAO;AACpC,WAAO,iBAAiB,QAAQ,UAAU;AAC1C,WAAO,WAAW,IAAI;AAAA,EACxB,GAAG;AAAA,IACD;AAAA,IACA;AAAA,IACA;AAAA,IACA,QAAQ;AAAA,IACR,QAAQ;AAAA,IACR,QAAQ;AAAA,IACR,QAAQ;AAAA,IACR;AAAA,EACF,CAAC;AAED,QAAM,SAAQ,aAAQ,eAAR,mBAAoB;AAClC,QAAM,mBAAe;AAAA,IACnB,MAAO,SAAS,EAAE,QAAQ,SAAS,OAAQ,SAAS,CAAC,EAA4B,IAAI;AAAA,IACrF,CAAC,QAAQ,SAAS,KAAK;AAAA,EACzB;AAEA,SACE,4EACE;AAAA,gDAAC,gDAAmB,KAAK,oBAAoB;AAAA,IAC5C,gBACC,6CAAC,uCAAe,OAAO,cACpB;AAAA;AAAA,MAED,4CAAC,gCAAW,OAAO,SAAS;AAAA,OAC9B;AAAA,KAEJ;AAEJ;","names":["NovuUIClass"]}

package/dist/cjs/components/NovuUI.d.cts

@@ -11,6 +11,10 @@ type NovuUIProps = React__default.PropsWithChildren<{
     options: NovuUIOptions;
     novu: Novu;
 }>;
+/**
+ * Owns one engine instance and the outlet store that goes with it. Everything rendered below, portals into
+ * outlets included, can reach both through `useNovuUI()`.
+ */
 declare const NovuUI: ({ options, novu, children }: NovuUIProps) => react_jsx_runtime.JSX.Element;
 
 export { NovuUI, type NovuUIOptions };

package/dist/cjs/{context/RendererContext.cjs → components/OutletHost.cjs}

@@ -17,24 +17,24 @@ var __copyProps = (to, from, except, desc) => {
 };
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 
-// src/context/RendererContext.tsx
-var RendererContext_exports = {};
-__export(RendererContext_exports, {
-  RendererProvider: () => RendererProvider,
-  useRenderer: () => useRendererContext,
-  useUnsafeRenderer: () => useUnsafeRendererContext
+// src/components/OutletHost.tsx
+var OutletHost_exports = {};
+__export(OutletHost_exports, {
+  OutletHost: () => OutletHost
 });
-module.exports = __toCommonJS(RendererContext_exports);
-var import_createContextAndHook = require("../utils/createContextAndHook.cjs");
+module.exports = __toCommonJS(OutletHost_exports);
+var import_react = require("react");
+var import_react_dom = require("react-dom");
 var import_jsx_runtime = require("react/jsx-runtime");
-var [RendererContext, useRendererContext, useUnsafeRendererContext] = (0, import_createContextAndHook.createContextAndHook)("RendererContext");
-var RendererProvider = (props) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(RendererContext.Provider, { value: { value: props.value }, children: props.children });
+var OutletContent = ({ entry }) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_jsx_runtime.Fragment, { children: entry.render(...entry.args) });
+};
+var OutletHost = ({ store }) => {
+  const { entries } = (0, import_react.useSyncExternalStore)(store.subscribe, store.getSnapshot, store.getSnapshot);
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_jsx_runtime.Fragment, { children: Array.from(entries.values(), (entry) => (0, import_react_dom.createPortal)(/* @__PURE__ */ (0, import_jsx_runtime.jsx)(OutletContent, { entry }), entry.el, entry.id)) });
 };
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
-  RendererProvider,
-  useRenderer,
-  useUnsafeRenderer
+  OutletHost
 });
-//# sourceMappingURL=RendererContext.cjs.map
+//# sourceMappingURL=OutletHost.cjs.map

package/dist/cjs/components/OutletHost.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/OutletHost.tsx"],"sourcesContent":["import React, { useSyncExternalStore } from 'react';\nimport { createPortal } from 'react-dom';\nimport type { OutletEntry, OutletStore } from '../context/OutletStore';\n\nconst OutletContent = ({ entry }: { entry: OutletEntry }) => {\n  return <>{entry.render(...entry.args)}</>;\n};\n\n/**\n * Renders every outlet of one engine instance as a keyed portal. Keys are outlet ids, so removing one outlet\n * never shifts the others onto a different container, and a data change re-renders the content in place.\n */\nexport const OutletHost = ({ store }: { store: OutletStore }) => {\n  const { entries } = useSyncExternalStore(store.subscribe, store.getSnapshot, store.getSnapshot);\n\n  return (\n    <>{Array.from(entries.values(), (entry) => createPortal(<OutletContent entry={entry} />, entry.el, entry.id))}</>\n  );\n};\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAA4C;AAC5C,uBAA6B;AAIpB;AADT,IAAM,gBAAgB,CAAC,EAAE,MAAM,MAA8B;AAC3D,SAAO,2EAAG,gBAAM,OAAO,GAAG,MAAM,IAAI,GAAE;AACxC;AAMO,IAAM,aAAa,CAAC,EAAE,MAAM,MAA8B;AAC/D,QAAM,EAAE,QAAQ,QAAI,mCAAqB,MAAM,WAAW,MAAM,aAAa,MAAM,WAAW;AAE9F,SACE,2EAAG,gBAAM,KAAK,QAAQ,OAAO,GAAG,CAAC,cAAU,+BAAa,4CAAC,iBAAc,OAAc,GAAI,MAAM,IAAI,MAAM,EAAE,CAAC,GAAE;AAElH;","names":[]}

package/dist/cjs/components/OutletHost.d.cts

@@ -0,0 +1,14 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { OutletStore } from '../context/OutletStore.cjs';
+import '@novu/js/ui';
+import 'react';
+
+/**
+ * Renders every outlet of one engine instance as a keyed portal. Keys are outlet ids, so removing one outlet
+ * never shifts the others onto a different container, and a data change re-renders the content in place.
+ */
+declare const OutletHost: ({ store }: {
+    store: OutletStore;
+}) => react_jsx_runtime.JSX.Element;
+
+export { OutletHost };

package/dist/cjs/components/Preferences.cjs

@@ -1,9 +1,7 @@
 "use strict";
-var __create = Object.create;
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __getOwnPropNames = Object.getOwnPropertyNames;
-var __getProtoOf = Object.getPrototypeOf;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
 var __export = (target, all) => {
   for (var name in all)
@@ -17,14 +15,6 @@ var __copyProps = (to, from, except, desc) => {
   }
   return to;
 };
-var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
-  // If the importer is in node compatibility mode or this is not an ESM
-  // file that has been converted to a CommonJS file using a Babel-
-  // compatible transform (i.e. "__esModule" has not been set), then set
-  // "default" to the CommonJS "module.exports" for node compatibility.
-  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
-  mod
-));
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 
 // src/components/Preferences.tsx
@@ -33,19 +23,10 @@ __export(Preferences_exports, {
   Preferences: () => Preferences
 });
 module.exports = __toCommonJS(Preferences_exports);
-var import_react = __toESM(require("react"), 1);
-var import_NovuUIContext = require("../context/NovuUIContext.cjs");
 var import_Mounter = require("./Mounter.cjs");
 var import_jsx_runtime = require("react/jsx-runtime");
 var Preferences = () => {
-  const { novuUI } = (0, import_NovuUIContext.useNovuUI)();
-  const mount = import_react.default.useCallback((element) => {
-    return novuUI.mountComponent({
-      name: "Preferences",
-      element
-    });
-  }, []);
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Mounter.Mounter, { mount });
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Mounter.Mounter, { name: "Preferences" });
 };
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {

package/dist/cjs/components/Preferences.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/Preferences.tsx"],"sourcesContent":["import React from 'react';\nimport { useNovuUI } from '../context/NovuUIContext';\nimport { Mounter } from './Mounter';\n\nexport const Preferences = () => {\n  const { novuUI } = useNovuUI();\n\n  const mount = React.useCallback((element: HTMLElement) => {\n    return novuUI.mountComponent({\n      name: 'Preferences',\n      element,\n    });\n  }, []);\n\n  return <Mounter mount={mount} />;\n};\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAAkB;AAClB,2BAA0B;AAC1B,qBAAwB;AAYf;AAVF,IAAM,cAAc,MAAM;AAC/B,QAAM,EAAE,OAAO,QAAI,gCAAU;AAE7B,QAAM,QAAQ,aAAAA,QAAM,YAAY,CAAC,YAAyB;AACxD,WAAO,OAAO,eAAe;AAAA,MAC3B,MAAM;AAAA,MACN;AAAA,IACF,CAAC;AAAA,EACH,GAAG,CAAC,CAAC;AAEL,SAAO,4CAAC,0BAAQ,OAAc;AAChC;","names":["React"]}
+{"version":3,"sources":["../../../src/components/Preferences.tsx"],"sourcesContent":["import React from 'react';\nimport { Mounter } from './Mounter';\n\nexport const Preferences = () => {\n  return <Mounter name=\"Preferences\" />;\n};\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AACA,qBAAwB;AAGf;AADF,IAAM,cAAc,MAAM;AAC/B,SAAO,4CAAC,0BAAQ,MAAK,eAAc;AACrC;","names":[]}

package/dist/cjs/components/connect-chat/ConnectChat.cjs

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

package/dist/cjs/components/connect-chat/ConnectChat.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/connect-chat/ConnectChat.tsx"],"sourcesContent":["import React, { useMemo } from 'react';\nimport { useNovu } from '../../hooks/NovuProvider';\nimport { NovuUI, NovuUIOptions } from '../NovuUI';\nimport { withRenderer } from '../Renderer';\nimport { DefaultConnectChat, DefaultConnectChatProps } from './DefaultConnectChat';\n\nexport type ConnectChatProps = DefaultConnectChatProps & Pick<NovuUIOptions, 'container' | 'appearance'>;\n\nconst ConnectChatInternal = withRenderer<ConnectChatProps>((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      <DefaultConnectChat {...defaultProps} />\n    </NovuUI>\n  );\n});\n\nConnectChatInternal.displayName = 'ConnectChatInternal';\n\nexport const ConnectChat = React.memo((props: ConnectChatProps) => {\n  return <ConnectChatInternal {...props} />;\n});\n\nConnectChat.displayName = 'ConnectChat';\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAA+B;AAC/B,0BAAwB;AACxB,oBAAsC;AACtC,sBAA6B;AAC7B,gCAA4D;AAkBtD;AAdN,IAAM,0BAAsB,8BAA+B,CAAC,UAAU;AACpE,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,gDAAoB,GAAG,cAAc,GACxC;AAEJ,CAAC;AAED,oBAAoB,cAAc;AAE3B,IAAM,cAAc,aAAAA,QAAM,KAAK,CAAC,UAA4B;AACjE,SAAO,4CAAC,uBAAqB,GAAG,OAAO;AACzC,CAAC;AAED,YAAY,cAAc;","names":["React"]}
+{"version":3,"sources":["../../../../src/components/connect-chat/ConnectChat.tsx"],"sourcesContent":["import React, { useMemo } from 'react';\nimport { useNovu } from '../../hooks/NovuProvider';\nimport { NovuUI, NovuUIOptions } from '../NovuUI';\nimport { DefaultConnectChat, DefaultConnectChatProps } from './DefaultConnectChat';\n\nexport type ConnectChatProps = DefaultConnectChatProps & Pick<NovuUIOptions, 'container' | 'appearance'>;\n\nconst ConnectChatInternal = (props: ConnectChatProps) => {\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      <DefaultConnectChat {...defaultProps} />\n    </NovuUI>\n  );\n};\n\nConnectChatInternal.displayName = 'ConnectChatInternal';\n\nexport const ConnectChat = React.memo((props: ConnectChatProps) => {\n  return <ConnectChatInternal {...props} />;\n});\n\nConnectChat.displayName = 'ConnectChat';\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAA+B;AAC/B,0BAAwB;AACxB,oBAAsC;AACtC,gCAA4D;AAkBtD;AAdN,IAAM,sBAAsB,CAAC,UAA4B;AACvD,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,gDAAoB,GAAG,cAAc,GACxC;AAEJ;AAEA,oBAAoB,cAAc;AAE3B,IAAM,cAAc,aAAAA,QAAM,KAAK,CAAC,UAA4B;AACjE,SAAO,4CAAC,uBAAqB,GAAG,OAAO;AACzC,CAAC;AAED,YAAY,cAAc;","names":["React"]}

package/dist/cjs/components/connect-chat/DefaultConnectChat.cjs

@@ -24,7 +24,6 @@ __export(DefaultConnectChat_exports, {
 });
 module.exports = __toCommonJS(DefaultConnectChat_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 DefaultConnectChat = (props) => {
@@ -40,28 +39,20 @@ var DefaultConnectChat = (props) => {
     onDisconnectSuccess,
     onDisconnectError
   } = props;
-  const { novuUI } = (0, import_NovuUIContext.useNovuUI)();
-  const mount = (0, import_react.useCallback)(
-    (element) => {
-      return novuUI.mountComponent({
-        name: "ConnectChat",
-        props: {
-          integrationIdentifier,
-          connectionIdentifier,
-          subscriberId,
-          context,
-          scope,
-          connectionMode,
-          onConnectSuccess,
-          onConnectError,
-          onDisconnectSuccess,
-          onDisconnectError
-        },
-        element
-      });
-    },
+  const mountProps = (0, import_react.useMemo)(
+    () => ({
+      integrationIdentifier,
+      connectionIdentifier,
+      subscriberId,
+      context,
+      scope,
+      connectionMode,
+      onConnectSuccess,
+      onConnectError,
+      onDisconnectSuccess,
+      onDisconnectError
+    }),
     [
-      novuUI,
       integrationIdentifier,
       connectionIdentifier,
       subscriberId,
@@ -74,7 +65,7 @@ var DefaultConnectChat = (props) => {
       onDisconnectError
     ]
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Mounter.Mounter, { mount });
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Mounter.Mounter, { name: "ConnectChat", props: mountProps });
 };
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {

package/dist/cjs/components/connect-chat/DefaultConnectChat.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/connect-chat/DefaultConnectChat.tsx"],"sourcesContent":["import { ConnectChatProps } from '@novu/js/ui';\nimport { useCallback } from 'react';\nimport { useNovuUI } from '../../context/NovuUIContext';\nimport { Mounter } from '../Mounter';\n\nexport type DefaultConnectChatProps = Pick<\n  ConnectChatProps,\n  | 'integrationIdentifier'\n  | 'connectionIdentifier'\n  | 'subscriberId'\n  | 'context'\n  | 'scope'\n  | 'connectionMode'\n  | 'onConnectSuccess'\n  | 'onConnectError'\n  | 'onDisconnectSuccess'\n  | 'onDisconnectError'\n>;\n\nexport const DefaultConnectChat = (props: DefaultConnectChatProps) => {\n  const {\n    integrationIdentifier,\n    connectionIdentifier,\n    subscriberId,\n    context,\n    scope,\n    connectionMode,\n    onConnectSuccess,\n    onConnectError,\n    onDisconnectSuccess,\n    onDisconnectError,\n  } = props;\n  const { novuUI } = useNovuUI();\n\n  const mount = useCallback(\n    (element: HTMLElement) => {\n      return novuUI.mountComponent({\n        name: 'ConnectChat',\n        props: {\n          integrationIdentifier,\n          connectionIdentifier,\n          subscriberId,\n          context,\n          scope,\n          connectionMode,\n          onConnectSuccess,\n          onConnectError,\n          onDisconnectSuccess,\n          onDisconnectError,\n        },\n        element,\n      });\n    },\n    [\n      novuUI,\n      integrationIdentifier,\n      connectionIdentifier,\n      subscriberId,\n      context,\n      scope,\n      connectionMode,\n      onConnectSuccess,\n      onConnectError,\n      onDisconnectSuccess,\n      onDisconnectError,\n    ]\n  );\n\n  return <Mounter mount={mount} />;\n};\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AACA,mBAA4B;AAC5B,2BAA0B;AAC1B,qBAAwB;AAiEf;AAjDF,IAAM,qBAAqB,CAAC,UAAmC;AACpE,QAAM;AAAA,IACJ;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,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,IACF;AAAA,EACF;AAEA,SAAO,4CAAC,0BAAQ,OAAc;AAChC;","names":[]}
+{"version":3,"sources":["../../../../src/components/connect-chat/DefaultConnectChat.tsx"],"sourcesContent":["import { ConnectChatProps } from '@novu/js/ui';\nimport { useMemo } from 'react';\nimport { Mounter } from '../Mounter';\n\nexport type DefaultConnectChatProps = Pick<\n  ConnectChatProps,\n  | 'integrationIdentifier'\n  | 'connectionIdentifier'\n  | 'subscriberId'\n  | 'context'\n  | 'scope'\n  | 'connectionMode'\n  | 'onConnectSuccess'\n  | 'onConnectError'\n  | 'onDisconnectSuccess'\n  | 'onDisconnectError'\n>;\n\nexport const DefaultConnectChat = (props: DefaultConnectChatProps) => {\n  const {\n    integrationIdentifier,\n    connectionIdentifier,\n    subscriberId,\n    context,\n    scope,\n    connectionMode,\n    onConnectSuccess,\n    onConnectError,\n    onDisconnectSuccess,\n    onDisconnectError,\n  } = props;\n\n  const mountProps = useMemo(\n    () => ({\n      integrationIdentifier,\n      connectionIdentifier,\n      subscriberId,\n      context,\n      scope,\n      connectionMode,\n      onConnectSuccess,\n      onConnectError,\n      onDisconnectSuccess,\n      onDisconnectError,\n    }),\n    [\n      integrationIdentifier,\n      connectionIdentifier,\n      subscriberId,\n      context,\n      scope,\n      connectionMode,\n      onConnectSuccess,\n      onConnectError,\n      onDisconnectSuccess,\n      onDisconnectError,\n    ]\n  );\n\n  return <Mounter name=\"ConnectChat\" props={mountProps} />;\n};\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AACA,mBAAwB;AACxB,qBAAwB;AAyDf;AAzCF,IAAM,qBAAqB,CAAC,UAAmC;AACpE,QAAM;AAAA,IACJ;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,IACF;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,MAAK,eAAc,OAAO,YAAY;AACxD;","names":[]}

package/dist/cjs/components/index.cjs

@@ -24,6 +24,7 @@ __reExport(components_exports, require("./InboxContent.cjs"), module.exports);
 __reExport(components_exports, require("./msteams-connect-button/MsTeamsConnectButton.cjs"), module.exports);
 __reExport(components_exports, require("./msteams-link-user/MsTeamsLinkUser.cjs"), module.exports);
 __reExport(components_exports, require("./Notifications.cjs"), module.exports);
+__reExport(components_exports, require("./notification-item/NotificationItem.cjs"), module.exports);
 __reExport(components_exports, require("./Preferences.cjs"), module.exports);
 __reExport(components_exports, require("./slack-connect-button/SlackConnectButton.cjs"), module.exports);
 __reExport(components_exports, require("./slack-link-user/SlackLinkUser.cjs"), module.exports);
@@ -40,6 +41,7 @@ __reExport(components_exports, require("./telegram-connect-button/TelegramConnec
   ...require("./msteams-connect-button/MsTeamsConnectButton.cjs"),
   ...require("./msteams-link-user/MsTeamsLinkUser.cjs"),
   ...require("./Notifications.cjs"),
+  ...require("./notification-item/NotificationItem.cjs"),
   ...require("./Preferences.cjs"),
   ...require("./slack-connect-button/SlackConnectButton.cjs"),
   ...require("./slack-link-user/SlackLinkUser.cjs"),

package/dist/cjs/components/index.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/index.ts"],"sourcesContent":["export * from '../hooks/NovuProvider';\nexport * from './Bell';\nexport * from './Inbox';\nexport * from './InboxContent';\nexport * from './msteams-connect-button/MsTeamsConnectButton';\nexport * from './msteams-link-user/MsTeamsLinkUser';\nexport * from './Notifications';\nexport * from './Preferences';\nexport * from './slack-connect-button/SlackConnectButton';\nexport * from './slack-link-user/SlackLinkUser';\nexport * from './subscription/Subscription';\nexport * from './subscription/SubscriptionButton';\nexport * from './subscription/SubscriptionPreferences';\nexport * from './telegram-connect-button/TelegramConnectButton';\n"],"mappings":";;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA,+BAAc,sCAAd;AACA,+BAAc,uBADd;AAEA,+BAAc,wBAFd;AAGA,+BAAc,+BAHd;AAIA,+BAAc,8DAJd;AAKA,+BAAc,oDALd;AAMA,+BAAc,gCANd;AAOA,+BAAc,8BAPd;AAQA,+BAAc,0DARd;AASA,+BAAc,gDATd;AAUA,+BAAc,4CAVd;AAWA,+BAAc,kDAXd;AAYA,+BAAc,uDAZd;AAaA,+BAAc,gEAbd;","names":[]}
+{"version":3,"sources":["../../../src/components/index.ts"],"sourcesContent":["export * from '../hooks/NovuProvider';\nexport * from './Bell';\nexport * from './Inbox';\nexport * from './InboxContent';\nexport * from './msteams-connect-button/MsTeamsConnectButton';\nexport * from './msteams-link-user/MsTeamsLinkUser';\nexport * from './Notifications';\nexport * from './notification-item/NotificationItem';\nexport * from './Preferences';\nexport * from './slack-connect-button/SlackConnectButton';\nexport * from './slack-link-user/SlackLinkUser';\nexport * from './subscription/Subscription';\nexport * from './subscription/SubscriptionButton';\nexport * from './subscription/SubscriptionPreferences';\nexport * from './telegram-connect-button/TelegramConnectButton';\n"],"mappings":";;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA,+BAAc,sCAAd;AACA,+BAAc,uBADd;AAEA,+BAAc,wBAFd;AAGA,+BAAc,+BAHd;AAIA,+BAAc,8DAJd;AAKA,+BAAc,oDALd;AAMA,+BAAc,gCANd;AAOA,+BAAc,qDAPd;AAQA,+BAAc,8BARd;AASA,+BAAc,0DATd;AAUA,+BAAc,gDAVd;AAWA,+BAAc,4CAXd;AAYA,+BAAc,kDAZd;AAaA,+BAAc,uDAbd;AAcA,+BAAc,gEAdd;","names":[]}

package/dist/cjs/components/index.d.cts

@@ -5,6 +5,7 @@ export { InboxContent, InboxContentProps } from './InboxContent.cjs';
 export { MsTeamsConnectButton, MsTeamsConnectButtonProps } from './msteams-connect-button/MsTeamsConnectButton.cjs';
 export { MsTeamsLinkUser, MsTeamsLinkUserProps } from './msteams-link-user/MsTeamsLinkUser.cjs';
 export { NotificationProps, Notifications } from './Notifications.cjs';
+export { NotificationItem, NotificationItemProps } from './notification-item/NotificationItem.cjs';
 export { Preferences } from './Preferences.cjs';
 export { SlackConnectButton, SlackConnectButtonProps } from './slack-connect-button/SlackConnectButton.cjs';
 export { SlackLinkUser, SlackLinkUserProps } from './slack-link-user/SlackLinkUser.cjs';
@@ -20,6 +21,11 @@ import '@novu/js/ui';
 import './NovuUI.cjs';
 import './msteams-connect-button/DefaultMsTeamsConnectButton.cjs';
 import './msteams-link-user/DefaultMsTeamsLinkUser.cjs';
+import './notification-item/parts/Dot.cjs';
+import './notification-item/parts/Date.cjs';
+import './notification-item/parts/Subject.cjs';
+import './notification-item/parts/Content.cjs';
+import './notification-item/parts/Avatar.cjs';
 import './slack-connect-button/DefaultSlackConnectButton.cjs';
 import './slack-link-user/DefaultSlackLinkUser.cjs';
 import './subscription/DefaultSubscription.cjs';

package/dist/cjs/components/msteams-connect-button/DefaultMsTeamsConnectButton.cjs

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

package/dist/cjs/components/msteams-connect-button/DefaultMsTeamsConnectButton.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/msteams-connect-button/DefaultMsTeamsConnectButton.tsx"],"sourcesContent":["import { MsTeamsConnectButtonProps } from '@novu/js/ui';\nimport { useCallback } from 'react';\nimport { useNovuUI } from '../../context/NovuUIContext';\nimport { Mounter } from '../Mounter';\n\nexport type DefaultMsTeamsConnectButtonProps = Pick<\n  MsTeamsConnectButtonProps,\n  | 'integrationIdentifier'\n  | 'connectionIdentifier'\n  | 'subscriberId'\n  | 'context'\n  | 'scope'\n  | 'connectionMode'\n  | 'autoLinkUser'\n  | 'onConnectSuccess'\n  | 'onConnectError'\n  | 'onDisconnectSuccess'\n  | 'onDisconnectError'\n  | 'connectLabel'\n  | 'connectedLabel'\n>;\n\nexport const DefaultMsTeamsConnectButton = (props: DefaultMsTeamsConnectButtonProps) => {\n  const {\n    integrationIdentifier,\n    connectionIdentifier,\n    subscriberId,\n    context,\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: 'MsTeamsConnectButton',\n        props: {\n          integrationIdentifier,\n          connectionIdentifier,\n          subscriberId,\n          context,\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      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;AA6Ef;AA1DF,IAAM,8BAA8B,CAAC,UAA4C;AACtF,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,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,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,IACF;AAAA,EACF;AAEA,SAAO,4CAAC,0BAAQ,OAAc;AAChC;","names":[]}
+{"version":3,"sources":["../../../../src/components/msteams-connect-button/DefaultMsTeamsConnectButton.tsx"],"sourcesContent":["import { MsTeamsConnectButtonProps } from '@novu/js/ui';\nimport { useMemo } from 'react';\nimport { Mounter } from '../Mounter';\n\nexport type DefaultMsTeamsConnectButtonProps = Pick<\n  MsTeamsConnectButtonProps,\n  | 'integrationIdentifier'\n  | 'connectionIdentifier'\n  | 'subscriberId'\n  | 'context'\n  | 'scope'\n  | 'connectionMode'\n  | 'autoLinkUser'\n  | 'onConnectSuccess'\n  | 'onConnectError'\n  | 'onDisconnectSuccess'\n  | 'onDisconnectError'\n  | 'connectLabel'\n  | 'connectedLabel'\n>;\n\nexport const DefaultMsTeamsConnectButton = (props: DefaultMsTeamsConnectButtonProps) => {\n  const {\n    integrationIdentifier,\n    connectionIdentifier,\n    subscriberId,\n    context,\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      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      scope,\n      connectionMode,\n      autoLinkUser,\n      onConnectSuccess,\n      onConnectError,\n      onDisconnectSuccess,\n      onDisconnectError,\n      connectLabel,\n      connectedLabel,\n    ]\n  );\n\n  return <Mounter name=\"MsTeamsConnectButton\" props={mountProps} />;\n};\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AACA,mBAAwB;AACxB,qBAAwB;AAqEf;AAlDF,IAAM,8BAA8B,CAAC,UAA4C;AACtF,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,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,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,IACF;AAAA,EACF;AAEA,SAAO,4CAAC,0BAAQ,MAAK,wBAAuB,OAAO,YAAY;AACjE;","names":[]}

package/dist/cjs/components/msteams-connect-button/MsTeamsConnectButton.cjs

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

package/dist/cjs/components/msteams-connect-button/MsTeamsConnectButton.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/msteams-connect-button/MsTeamsConnectButton.tsx"],"sourcesContent":["import React, { useMemo } from 'react';\nimport { useNovu } from '../../hooks/NovuProvider';\nimport { NovuUI, NovuUIOptions } from '../NovuUI';\nimport { withRenderer } from '../Renderer';\nimport { DefaultMsTeamsConnectButton, DefaultMsTeamsConnectButtonProps } from './DefaultMsTeamsConnectButton';\n\nexport type MsTeamsConnectButtonProps = DefaultMsTeamsConnectButtonProps &\n  Pick<NovuUIOptions, 'container' | 'appearance'>;\n\nconst MsTeamsConnectButtonInternal = withRenderer<MsTeamsConnectButtonProps>((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      <DefaultMsTeamsConnectButton {...defaultProps} />\n    </NovuUI>\n  );\n});\n\nMsTeamsConnectButtonInternal.displayName = 'MsTeamsConnectButtonInternal';\n\nexport const MsTeamsConnectButton = React.memo((props: MsTeamsConnectButtonProps) => {\n  return <MsTeamsConnectButtonInternal {...props} />;\n});\n\nMsTeamsConnectButton.displayName = 'MsTeamsConnectButton';\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAA+B;AAC/B,0BAAwB;AACxB,oBAAsC;AACtC,sBAA6B;AAC7B,yCAA8E;AAmBxE;AAdN,IAAM,mCAA+B,8BAAwC,CAAC,UAAU;AACtF,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,kEAA6B,GAAG,cAAc,GACjD;AAEJ,CAAC;AAED,6BAA6B,cAAc;AAEpC,IAAM,uBAAuB,aAAAA,QAAM,KAAK,CAAC,UAAqC;AACnF,SAAO,4CAAC,gCAA8B,GAAG,OAAO;AAClD,CAAC;AAED,qBAAqB,cAAc;","names":["React"]}
+{"version":3,"sources":["../../../../src/components/msteams-connect-button/MsTeamsConnectButton.tsx"],"sourcesContent":["import React, { useMemo } from 'react';\nimport { useNovu } from '../../hooks/NovuProvider';\nimport { NovuUI, NovuUIOptions } from '../NovuUI';\nimport { DefaultMsTeamsConnectButton, DefaultMsTeamsConnectButtonProps } from './DefaultMsTeamsConnectButton';\n\nexport type MsTeamsConnectButtonProps = DefaultMsTeamsConnectButtonProps &\n  Pick<NovuUIOptions, 'container' | 'appearance'>;\n\nconst MsTeamsConnectButtonInternal = (props: MsTeamsConnectButtonProps) => {\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      <DefaultMsTeamsConnectButton {...defaultProps} />\n    </NovuUI>\n  );\n};\n\nMsTeamsConnectButtonInternal.displayName = 'MsTeamsConnectButtonInternal';\n\nexport const MsTeamsConnectButton = React.memo((props: MsTeamsConnectButtonProps) => {\n  return <MsTeamsConnectButtonInternal {...props} />;\n});\n\nMsTeamsConnectButton.displayName = 'MsTeamsConnectButton';\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAA+B;AAC/B,0BAAwB;AACxB,oBAAsC;AACtC,yCAA8E;AAmBxE;AAdN,IAAM,+BAA+B,CAAC,UAAqC;AACzE,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,kEAA6B,GAAG,cAAc,GACjD;AAEJ;AAEA,6BAA6B,cAAc;AAEpC,IAAM,uBAAuB,aAAAA,QAAM,KAAK,CAAC,UAAqC;AACnF,SAAO,4CAAC,gCAA8B,GAAG,OAAO;AAClD,CAAC;AAED,qBAAqB,cAAc;","names":["React"]}