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

package/dist/esm/components/Mounter.js

@@ -1,24 +1,29 @@
 // src/components/Mounter.tsx
-import { useEffect, useRef } from "react";
+import { useRef } from "react";
+import { useNovuUI } from "../context/NovuUIContext.js";
+import { useIsomorphicLayoutEffect } from "../hooks/internal/useIsomorphicLayoutEffect.js";
 import { jsx } from "react/jsx-runtime";
-function Mounter({ mount }) {
+function Mounter({ name, props, bare }) {
+  const { novuUI } = useNovuUI();
   const ref = useRef(null);
-  useEffect(() => {
-    let unmount;
+  const handleRef = useRef(null);
+  const latestProps = useRef(props);
+  latestProps.current = props;
+  useIsomorphicLayoutEffect(() => {
     const element = ref.current;
-    if (element && mount) {
-      const possibleUnmount = mount(element);
-      if (possibleUnmount) {
-        unmount = possibleUnmount;
-      }
+    if (!element) {
+      return;
     }
+    handleRef.current = novuUI.mountComponent({ name, element, props: latestProps.current, bare });
     return () => {
-      if (element && unmount) {
-        unmount(element);
-      }
+      handleRef.current?.unmount();
+      handleRef.current = null;
     };
-  }, [ref, mount]);
-  return /* @__PURE__ */ jsx("div", { ref });
+  }, [novuUI, name, bare]);
+  useIsomorphicLayoutEffect(() => {
+    handleRef.current?.update(props);
+  }, [props]);
+  return /* @__PURE__ */ jsx("div", { ref, style: bare ? { display: "contents" } : void 0 });
 }
 export {
   Mounter

package/dist/esm/components/Mounter.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/Mounter.tsx"],"sourcesContent":["import { useEffect, useRef } from 'react';\n\ntype MounterProps = {\n  mount: (node: HTMLElement) => ((node: HTMLElement) => void) | void;\n};\n\n/**\n * Mounter allows you to mount a component to a DOM node.\n */\nexport function Mounter({ mount }: MounterProps) {\n  const ref = useRef<HTMLDivElement>(null);\n\n  useEffect(() => {\n    let unmount: (node: HTMLDivElement) => void | undefined;\n    const element = ref.current;\n    if (element && mount) {\n      const possibleUnmount = mount(element);\n      if (possibleUnmount) {\n        unmount = possibleUnmount;\n      }\n    }\n\n    return () => {\n      if (element && unmount) {\n        unmount(element);\n      }\n    };\n  }, [ref, mount]);\n\n  return <div ref={ref} />;\n}\n"],"mappings":";AAAA,SAAS,WAAW,cAAc;AA6BzB;AApBF,SAAS,QAAQ,EAAE,MAAM,GAAiB;AAC/C,QAAM,MAAM,OAAuB,IAAI;AAEvC,YAAU,MAAM;AACd,QAAI;AACJ,UAAM,UAAU,IAAI;AACpB,QAAI,WAAW,OAAO;AACpB,YAAM,kBAAkB,MAAM,OAAO;AACrC,UAAI,iBAAiB;AACnB,kBAAU;AAAA,MACZ;AAAA,IACF;AAEA,WAAO,MAAM;AACX,UAAI,WAAW,SAAS;AACtB,gBAAQ,OAAO;AAAA,MACjB;AAAA,IACF;AAAA,EACF,GAAG,CAAC,KAAK,KAAK,CAAC;AAEf,SAAO,oBAAC,SAAI,KAAU;AACxB;","names":[]}
+{"version":3,"sources":["../../../src/components/Mounter.tsx"],"sourcesContent":["import type { MountHandle, NovuUI } from '@novu/js/ui';\nimport { useRef } from 'react';\nimport { useNovuUI } from '../context/NovuUIContext';\nimport { useIsomorphicLayoutEffect } from '../hooks/internal/useIsomorphicLayoutEffect';\n\ntype MountComponentParams = Parameters<NovuUI['mountComponent']>[0];\n\nexport type MounterProps = {\n  name: MountComponentParams['name'];\n  props?: MountComponentParams['props'];\n  /** Mount as an island: no `Root` wrapper, no layout box. For mount points inside DOM that already sits under an engine root. */\n  bare?: boolean;\n};\n\n/**\n * A mount point: a DOM node the host hands to the engine so the engine can render a component into it.\n *\n * Mounts before the browser paints, pushes later prop changes through the engine's handle instead of mounting\n * again, and unmounts when React removes it.\n */\nexport function Mounter({ name, props, bare }: MounterProps) {\n  const { novuUI } = useNovuUI();\n  const ref = useRef<HTMLDivElement>(null);\n  const handleRef = useRef<MountHandle<MountComponentParams['props']> | null>(null);\n  const latestProps = useRef(props);\n  latestProps.current = props;\n\n  useIsomorphicLayoutEffect(() => {\n    const element = ref.current;\n    if (!element) {\n      return;\n    }\n\n    handleRef.current = novuUI.mountComponent({ name, element, props: latestProps.current, bare });\n\n    return () => {\n      handleRef.current?.unmount();\n      handleRef.current = null;\n    };\n  }, [novuUI, name, bare]);\n\n  useIsomorphicLayoutEffect(() => {\n    handleRef.current?.update(props);\n  }, [props]);\n\n  return <div ref={ref} style={bare ? { display: 'contents' } : undefined} />;\n}\n"],"mappings":";AACA,SAAS,cAAc;AACvB,SAAS,iBAAiB;AAC1B,SAAS,iCAAiC;AA0CjC;AAzBF,SAAS,QAAQ,EAAE,MAAM,OAAO,KAAK,GAAiB;AAC3D,QAAM,EAAE,OAAO,IAAI,UAAU;AAC7B,QAAM,MAAM,OAAuB,IAAI;AACvC,QAAM,YAAY,OAA0D,IAAI;AAChF,QAAM,cAAc,OAAO,KAAK;AAChC,cAAY,UAAU;AAEtB,4BAA0B,MAAM;AAC9B,UAAM,UAAU,IAAI;AACpB,QAAI,CAAC,SAAS;AACZ;AAAA,IACF;AAEA,cAAU,UAAU,OAAO,eAAe,EAAE,MAAM,SAAS,OAAO,YAAY,SAAS,KAAK,CAAC;AAE7F,WAAO,MAAM;AACX,gBAAU,SAAS,QAAQ;AAC3B,gBAAU,UAAU;AAAA,IACtB;AAAA,EACF,GAAG,CAAC,QAAQ,MAAM,IAAI,CAAC;AAEvB,4BAA0B,MAAM;AAC9B,cAAU,SAAS,OAAO,KAAK;AAAA,EACjC,GAAG,CAAC,KAAK,CAAC;AAEV,SAAO,oBAAC,SAAI,KAAU,OAAO,OAAO,EAAE,SAAS,WAAW,IAAI,QAAW;AAC3E;","names":[]}

package/dist/esm/components/Notifications.d.ts

@@ -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.js';
@@ -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/esm/components/Notifications.js

@@ -1,68 +1,18 @@
 // src/components/Notifications.tsx
-import React from "react";
-import { useNovuUI } from "../context/NovuUIContext.js";
-import { useRenderer } from "../context/RendererContext.js";
+import React, { useMemo } from "react";
+import { useNotificationOutlets } from "../hooks/internal/useNotificationOutlets.js";
 import { Mounter } from "./Mounter.js";
-import { withRenderer } from "./Renderer.js";
 import { jsx } from "react/jsx-runtime";
-var _Notifications = React.memo((props) => {
-  const {
-    renderNotification,
-    renderAvatar,
-    renderSubject,
-    renderBody,
-    renderDefaultActions,
-    renderCustomActions,
-    onNotificationClick,
-    onPrimaryActionClick,
-    onSecondaryActionClick
-  } = props;
-  const { novuUI } = useNovuUI();
-  const { mountElement } = useRenderer();
-  const mount = React.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 = React.memo((props) => {
+  const { onNotificationClick, onPrimaryActionClick, onSecondaryActionClick } = props;
+  const outlets = useNotificationOutlets(props);
+  const mountProps = useMemo(
+    () => ({ ...outlets, onNotificationClick, onPrimaryActionClick, onSecondaryActionClick }),
+    [outlets, onNotificationClick, onPrimaryActionClick, onSecondaryActionClick]
   );
-  return /* @__PURE__ */ jsx(Mounter, { mount });
+  return /* @__PURE__ */ jsx(Mounter, { name: "Notifications", props: mountProps });
 });
-var Notifications = withRenderer(_Notifications);
+Notifications.displayName = "Notifications";
 export {
   Notifications
 };

package/dist/esm/components/Notifications.js.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":";AACA,OAAO,WAAW;AAClB,SAAS,iBAAiB;AAC1B,SAAS,mBAAmB;AAE5B,SAAS,eAAe;AACxB,SAAS,oBAAoB;AA0EpB;AAlET,IAAM,iBAAiB,MAAM,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,IAAI,UAAU;AAC7B,QAAM,EAAE,aAAa,IAAI,YAAY;AAErC,QAAM,QAAQ,MAAM;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,oBAAC,WAAQ,OAAc;AAChC,CAAC;AAEM,IAAM,gBAAgB,aAAa,cAAc;","names":[]}
+{"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":";AACA,OAAO,SAAS,eAAe;AAC/B,SAAS,8BAA8B;AAEvC,SAAS,eAAe;AAiBf;AATF,IAAM,gBAAgB,MAAM,KAAK,CAAC,UAA6B;AACpE,QAAM,EAAE,qBAAqB,sBAAsB,uBAAuB,IAAI;AAC9E,QAAM,UAAU,uBAAuB,KAAK;AAE5C,QAAM,aAAa;AAAA,IACjB,OAAO,EAAE,GAAG,SAAS,qBAAqB,sBAAsB,uBAAuB;AAAA,IACvF,CAAC,SAAS,qBAAqB,sBAAsB,sBAAsB;AAAA,EAC7E;AAEA,SAAO,oBAAC,WAAQ,MAAK,iBAAgB,OAAO,YAAY;AAC1D,CAAC;AAED,cAAc,cAAc;","names":[]}

package/dist/esm/components/NovuUI.d.ts

@@ -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/esm/components/NovuUI.js

@@ -2,9 +2,11 @@
 import { NovuUI as NovuUIClass } from "@novu/js/ui";
 import { useEffect, useMemo, useRef, useState } from "react";
 import { NovuUIProvider } from "../context/NovuUIContext.js";
-import { useRenderer } from "../context/RendererContext.js";
+import { OutletStore } from "../context/OutletStore.js";
 import { useDataRef } from "../hooks/internal/useDataRef.js";
+import { useIsomorphicLayoutEffect } from "../hooks/internal/useIsomorphicLayoutEffect.js";
 import { adaptAppearanceForJs } from "../utils/appearance.js";
+import { OutletHost } from "./OutletHost.js";
 import { ShadowRootDetector } from "./ShadowRootDetector.js";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 var findParentShadowRoot = (child) => {
@@ -28,10 +30,10 @@ var findParentShadowRoot = (child) => {
 };
 var NovuUI = ({ options, novu, children }) => {
   const shadowRootDetector = useRef(null);
-  const { mountElement } = useRenderer();
+  const outlets = useMemo(() => new OutletStore(), []);
   const adaptedAppearanceForUpdate = useMemo(
-    () => adaptAppearanceForJs(options.appearance || {}, mountElement),
-    [options.appearance, mountElement]
+    () => adaptAppearanceForJs(options.appearance || {}, outlets),
+    [options.appearance, outlets]
   );
   const adaptedOptions = useMemo(() => {
     return {
@@ -42,7 +44,7 @@ var NovuUI = ({ options, novu, children }) => {
   }, [options, novu, adaptedAppearanceForUpdate]);
   const optionsRef = useDataRef(adaptedOptions);
   const [novuUI, setNovuUI] = useState();
-  useEffect(() => {
+  useIsomorphicLayoutEffect(() => {
     const parentShadowRoot = findParentShadowRoot(shadowRootDetector.current);
     const instance = new NovuUIClass({
       ...optionsRef.current,
@@ -75,9 +77,17 @@ var NovuUI = ({ options, novu, children }) => {
     options.routerPush,
     novu
   ]);
+  const icons = options.appearance?.icons;
+  const contextValue = useMemo(
+    () => novuUI ? { novuUI, outlets, icons: icons ?? {} } : void 0,
+    [novuUI, outlets, icons]
+  );
   return /* @__PURE__ */ jsxs(Fragment, { children: [
     /* @__PURE__ */ jsx(ShadowRootDetector, { ref: shadowRootDetector }),
-    novuUI && /* @__PURE__ */ jsx(NovuUIProvider, { value: { novuUI }, children })
+    contextValue && /* @__PURE__ */ jsxs(NovuUIProvider, { value: contextValue, children: [
+      children,
+      /* @__PURE__ */ jsx(OutletHost, { store: outlets })
+    ] })
   ] });
 };
 export {

package/dist/esm/components/NovuUI.js.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":";AAEA,SAAS,UAAU,mBAAmB;AACtC,SAAgB,WAAW,SAAS,QAAQ,gBAAgB;AAC5D,SAAS,sBAAsB;AAC/B,SAAS,mBAAmB;AAC5B,SAAS,kBAAkB;AAC3B,SAAS,4BAA4B;AAErC,SAAS,0BAA0B;AA+F/B,mBACE,KADF;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,qBAAqB,OAAuB,IAAI;AACtD,QAAM,EAAE,aAAa,IAAI,YAAY;AAErC,QAAM,6BAA6B;AAAA,IACjC,MAAM,qBAAqB,QAAQ,cAAc,CAAC,GAAG,YAAY;AAAA,IACjE,CAAC,QAAQ,YAAY,YAAY;AAAA,EACnC;AAEA,QAAM,iBAAiB,QAAQ,MAAM;AACnC,WAAO;AAAA,MACL,GAAG;AAAA,MACH,YAAY;AAAA,MACZ;AAAA,IACF;AAAA,EACF,GAAG,CAAC,SAAS,MAAM,0BAA0B,CAAC;AAE9C,QAAM,aAAa,WAAW,cAAc;AAC5C,QAAM,CAAC,QAAQ,SAAS,IAAI,SAAkC;AAE9D,YAAU,MAAM;AACd,UAAM,mBAAmB,qBAAqB,mBAAmB,OAAO;AACxE,UAAM,WAAW,IAAI,YAAY;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,YAAU,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,iCACE;AAAA,wBAAC,sBAAmB,KAAK,oBAAoB;AAAA,IAC5C,UAAU,oBAAC,kBAAe,OAAO,EAAE,OAAO,GAAI,UAAS;AAAA,KAC1D;AAEJ;","names":[]}
+{"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":";AAEA,SAAS,UAAU,mBAAmB;AACtC,SAAgB,WAAW,SAAS,QAAQ,gBAAgB;AAC5D,SAAS,sBAAsB;AAC/B,SAAS,mBAAmB;AAC5B,SAAS,kBAAkB;AAC3B,SAAS,iCAAiC;AAC1C,SAAS,4BAA4B;AAOrC,SAAS,kBAAkB;AAC3B,SAAS,0BAA0B;AAyG/B,mBACE,KAEE,YAHJ;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;AAClE,QAAM,qBAAqB,OAAuB,IAAI;AACtD,QAAM,UAAU,QAAQ,MAAM,IAAI,YAAY,GAAG,CAAC,CAAC;AAEnD,QAAM,6BAA6B;AAAA,IACjC,MAAM,qBAAqB,QAAQ,cAAc,CAAC,GAAG,OAAO;AAAA,IAC5D,CAAC,QAAQ,YAAY,OAAO;AAAA,EAC9B;AAEA,QAAM,iBAAiB,QAAQ,MAAM;AACnC,WAAO;AAAA,MACL,GAAG;AAAA,MACH,YAAY;AAAA,MACZ;AAAA,IACF;AAAA,EACF,GAAG,CAAC,SAAS,MAAM,0BAA0B,CAAC;AAE9C,QAAM,aAAa,WAAW,cAAc;AAC5C,QAAM,CAAC,QAAQ,SAAS,IAAI,SAAkC;AAE9D,4BAA0B,MAAM;AAC9B,UAAM,mBAAmB,qBAAqB,mBAAmB,OAAO;AACxE,UAAM,WAAW,IAAI,YAAY;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,YAAU,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,QAAQ,QAAQ,YAAY;AAClC,QAAM,eAAe;AAAA,IACnB,MAAO,SAAS,EAAE,QAAQ,SAAS,OAAQ,SAAS,CAAC,EAA4B,IAAI;AAAA,IACrF,CAAC,QAAQ,SAAS,KAAK;AAAA,EACzB;AAEA,SACE,iCACE;AAAA,wBAAC,sBAAmB,KAAK,oBAAoB;AAAA,IAC5C,gBACC,qBAAC,kBAAe,OAAO,cACpB;AAAA;AAAA,MAED,oBAAC,cAAW,OAAO,SAAS;AAAA,OAC9B;AAAA,KAEJ;AAEJ;","names":[]}

package/dist/esm/components/OutletHost.d.ts

@@ -0,0 +1,14 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { OutletStore } from '../context/OutletStore.js';
+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/esm/components/OutletHost.js

@@ -0,0 +1,15 @@
+// src/components/OutletHost.tsx
+import { useSyncExternalStore } from "react";
+import { createPortal } from "react-dom";
+import { Fragment, jsx } from "react/jsx-runtime";
+var OutletContent = ({ entry }) => {
+  return /* @__PURE__ */ jsx(Fragment, { children: entry.render(...entry.args) });
+};
+var OutletHost = ({ store }) => {
+  const { entries } = useSyncExternalStore(store.subscribe, store.getSnapshot, store.getSnapshot);
+  return /* @__PURE__ */ jsx(Fragment, { children: Array.from(entries.values(), (entry) => createPortal(/* @__PURE__ */ jsx(OutletContent, { entry }), entry.el, entry.id)) });
+};
+export {
+  OutletHost
+};
+//# sourceMappingURL=OutletHost.js.map

package/dist/esm/components/OutletHost.js.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,SAAgB,4BAA4B;AAC5C,SAAS,oBAAoB;AAIpB;AADT,IAAM,gBAAgB,CAAC,EAAE,MAAM,MAA8B;AAC3D,SAAO,gCAAG,gBAAM,OAAO,GAAG,MAAM,IAAI,GAAE;AACxC;AAMO,IAAM,aAAa,CAAC,EAAE,MAAM,MAA8B;AAC/D,QAAM,EAAE,QAAQ,IAAI,qBAAqB,MAAM,WAAW,MAAM,aAAa,MAAM,WAAW;AAE9F,SACE,gCAAG,gBAAM,KAAK,QAAQ,OAAO,GAAG,CAAC,UAAU,aAAa,oBAAC,iBAAc,OAAc,GAAI,MAAM,IAAI,MAAM,EAAE,CAAC,GAAE;AAElH;","names":[]}

package/dist/esm/components/Preferences.js

@@ -1,17 +1,8 @@
 // src/components/Preferences.tsx
-import React from "react";
-import { useNovuUI } from "../context/NovuUIContext.js";
 import { Mounter } from "./Mounter.js";
 import { jsx } from "react/jsx-runtime";
 var Preferences = () => {
-  const { novuUI } = useNovuUI();
-  const mount = React.useCallback((element) => {
-    return novuUI.mountComponent({
-      name: "Preferences",
-      element
-    });
-  }, []);
-  return /* @__PURE__ */ jsx(Mounter, { mount });
+  return /* @__PURE__ */ jsx(Mounter, { name: "Preferences" });
 };
 export {
   Preferences

package/dist/esm/components/Preferences.js.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,OAAO,WAAW;AAClB,SAAS,iBAAiB;AAC1B,SAAS,eAAe;AAYf;AAVF,IAAM,cAAc,MAAM;AAC/B,QAAM,EAAE,OAAO,IAAI,UAAU;AAE7B,QAAM,QAAQ,MAAM,YAAY,CAAC,YAAyB;AACxD,WAAO,OAAO,eAAe;AAAA,MAC3B,MAAM;AAAA,MACN;AAAA,IACF,CAAC;AAAA,EACH,GAAG,CAAC,CAAC;AAEL,SAAO,oBAAC,WAAQ,OAAc;AAChC;","names":[]}
+{"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":";AACA,SAAS,eAAe;AAGf;AADF,IAAM,cAAc,MAAM;AAC/B,SAAO,oBAAC,WAAQ,MAAK,eAAc;AACrC;","names":[]}

package/dist/esm/components/connect-chat/ConnectChat.js

@@ -2,10 +2,9 @@
 import React, { useMemo } from "react";
 import { useNovu } from "../../hooks/NovuProvider.js";
 import { NovuUI } from "../NovuUI.js";
-import { withRenderer } from "../Renderer.js";
 import { DefaultConnectChat } from "./DefaultConnectChat.js";
 import { jsx } from "react/jsx-runtime";
-var ConnectChatInternal = withRenderer((props) => {
+var ConnectChatInternal = (props) => {
   const { container, appearance, ...defaultProps } = props;
   const novu = useNovu();
   const options = useMemo(() => {
@@ -16,7 +15,7 @@ var ConnectChatInternal = withRenderer((props) => {
     };
   }, [container, appearance, novu.options]);
   return /* @__PURE__ */ jsx(NovuUI, { options, novu, children: /* @__PURE__ */ jsx(DefaultConnectChat, { ...defaultProps }) });
-});
+};
 ConnectChatInternal.displayName = "ConnectChatInternal";
 var ConnectChat = React.memo((props) => {
   return /* @__PURE__ */ jsx(ConnectChatInternal, { ...props });

package/dist/esm/components/connect-chat/ConnectChat.js.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,OAAO,SAAS,eAAe;AAC/B,SAAS,eAAe;AACxB,SAAS,cAA6B;AACtC,SAAS,oBAAoB;AAC7B,SAAS,0BAAmD;AAkBtD;AAdN,IAAM,sBAAsB,aAA+B,CAAC,UAAU;AACpE,QAAM,EAAE,WAAW,YAAY,GAAG,aAAa,IAAI;AACnD,QAAM,OAAO,QAAQ;AAErB,QAAM,UAAyB,QAAQ,MAAM;AAC3C,WAAO;AAAA,MACL;AAAA,MACA;AAAA,MACA,SAAS,KAAK;AAAA,IAChB;AAAA,EACF,GAAG,CAAC,WAAW,YAAY,KAAK,OAAO,CAAC;AAExC,SACE,oBAAC,UAAO,SAAkB,MACxB,8BAAC,sBAAoB,GAAG,cAAc,GACxC;AAEJ,CAAC;AAED,oBAAoB,cAAc;AAE3B,IAAM,cAAc,MAAM,KAAK,CAAC,UAA4B;AACjE,SAAO,oBAAC,uBAAqB,GAAG,OAAO;AACzC,CAAC;AAED,YAAY,cAAc;","names":[]}
+{"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,OAAO,SAAS,eAAe;AAC/B,SAAS,eAAe;AACxB,SAAS,cAA6B;AACtC,SAAS,0BAAmD;AAkBtD;AAdN,IAAM,sBAAsB,CAAC,UAA4B;AACvD,QAAM,EAAE,WAAW,YAAY,GAAG,aAAa,IAAI;AACnD,QAAM,OAAO,QAAQ;AAErB,QAAM,UAAyB,QAAQ,MAAM;AAC3C,WAAO;AAAA,MACL;AAAA,MACA;AAAA,MACA,SAAS,KAAK;AAAA,IAChB;AAAA,EACF,GAAG,CAAC,WAAW,YAAY,KAAK,OAAO,CAAC;AAExC,SACE,oBAAC,UAAO,SAAkB,MACxB,8BAAC,sBAAoB,GAAG,cAAc,GACxC;AAEJ;AAEA,oBAAoB,cAAc;AAE3B,IAAM,cAAc,MAAM,KAAK,CAAC,UAA4B;AACjE,SAAO,oBAAC,uBAAqB,GAAG,OAAO;AACzC,CAAC;AAED,YAAY,cAAc;","names":[]}

package/dist/esm/components/connect-chat/DefaultConnectChat.js

@@ -1,6 +1,5 @@
 // src/components/connect-chat/DefaultConnectChat.tsx
-import { useCallback } from "react";
-import { useNovuUI } from "../../context/NovuUIContext.js";
+import { useMemo } from "react";
 import { Mounter } from "../Mounter.js";
 import { jsx } from "react/jsx-runtime";
 var DefaultConnectChat = (props) => {
@@ -16,28 +15,20 @@ var DefaultConnectChat = (props) => {
     onDisconnectSuccess,
     onDisconnectError
   } = props;
-  const { novuUI } = useNovuUI();
-  const mount = useCallback(
-    (element) => {
-      return novuUI.mountComponent({
-        name: "ConnectChat",
-        props: {
-          integrationIdentifier,
-          connectionIdentifier,
-          subscriberId,
-          context,
-          scope,
-          connectionMode,
-          onConnectSuccess,
-          onConnectError,
-          onDisconnectSuccess,
-          onDisconnectError
-        },
-        element
-      });
-    },
+  const mountProps = useMemo(
+    () => ({
+      integrationIdentifier,
+      connectionIdentifier,
+      subscriberId,
+      context,
+      scope,
+      connectionMode,
+      onConnectSuccess,
+      onConnectError,
+      onDisconnectSuccess,
+      onDisconnectError
+    }),
     [
-      novuUI,
       integrationIdentifier,
       connectionIdentifier,
       subscriberId,
@@ -50,7 +41,7 @@ var DefaultConnectChat = (props) => {
       onDisconnectError
     ]
   );
-  return /* @__PURE__ */ jsx(Mounter, { mount });
+  return /* @__PURE__ */ jsx(Mounter, { name: "ConnectChat", props: mountProps });
 };
 export {
   DefaultConnectChat

package/dist/esm/components/connect-chat/DefaultConnectChat.js.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":";AACA,SAAS,mBAAmB;AAC5B,SAAS,iBAAiB;AAC1B,SAAS,eAAe;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,IAAI,UAAU;AAE7B,QAAM,QAAQ;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,oBAAC,WAAQ,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":";AACA,SAAS,eAAe;AACxB,SAAS,eAAe;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,aAAa;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,oBAAC,WAAQ,MAAK,eAAc,OAAO,YAAY;AACxD;","names":[]}

package/dist/esm/components/index.d.ts

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

package/dist/esm/components/index.js

@@ -6,6 +6,7 @@ export * from "./InboxContent.js";
 export * from "./msteams-connect-button/MsTeamsConnectButton.js";
 export * from "./msteams-link-user/MsTeamsLinkUser.js";
 export * from "./Notifications.js";
+export * from "./notification-item/NotificationItem.js";
 export * from "./Preferences.js";
 export * from "./slack-connect-button/SlackConnectButton.js";
 export * from "./slack-link-user/SlackLinkUser.js";

package/dist/esm/components/index.js.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,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;","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,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;","names":[]}

package/dist/esm/components/msteams-connect-button/DefaultMsTeamsConnectButton.js

@@ -1,6 +1,5 @@
 // src/components/msteams-connect-button/DefaultMsTeamsConnectButton.tsx
-import { useCallback } from "react";
-import { useNovuUI } from "../../context/NovuUIContext.js";
+import { useMemo } from "react";
 import { Mounter } from "../Mounter.js";
 import { jsx } from "react/jsx-runtime";
 var DefaultMsTeamsConnectButton = (props) => {
@@ -19,31 +18,23 @@ var DefaultMsTeamsConnectButton = (props) => {
     connectLabel,
     connectedLabel
   } = props;
-  const { novuUI } = useNovuUI();
-  const mount = useCallback(
-    (element) => {
-      return novuUI.mountComponent({
-        name: "MsTeamsConnectButton",
-        props: {
-          integrationIdentifier,
-          connectionIdentifier,
-          subscriberId,
-          context,
-          scope,
-          connectionMode,
-          autoLinkUser,
-          onConnectSuccess,
-          onConnectError,
-          onDisconnectSuccess,
-          onDisconnectError,
-          connectLabel,
-          connectedLabel
-        },
-        element
-      });
-    },
+  const mountProps = useMemo(
+    () => ({
+      integrationIdentifier,
+      connectionIdentifier,
+      subscriberId,
+      context,
+      scope,
+      connectionMode,
+      autoLinkUser,
+      onConnectSuccess,
+      onConnectError,
+      onDisconnectSuccess,
+      onDisconnectError,
+      connectLabel,
+      connectedLabel
+    }),
     [
-      novuUI,
       integrationIdentifier,
       connectionIdentifier,
       subscriberId,
@@ -59,7 +50,7 @@ var DefaultMsTeamsConnectButton = (props) => {
       connectedLabel
     ]
   );
-  return /* @__PURE__ */ jsx(Mounter, { mount });
+  return /* @__PURE__ */ jsx(Mounter, { name: "MsTeamsConnectButton", props: mountProps });
 };
 export {
   DefaultMsTeamsConnectButton

package/dist/esm/components/msteams-connect-button/DefaultMsTeamsConnectButton.js.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":";AACA,SAAS,mBAAmB;AAC5B,SAAS,iBAAiB;AAC1B,SAAS,eAAe;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,IAAI,UAAU;AAE7B,QAAM,QAAQ;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,oBAAC,WAAQ,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":";AACA,SAAS,eAAe;AACxB,SAAS,eAAe;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,aAAa;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,oBAAC,WAAQ,MAAK,wBAAuB,OAAO,YAAY;AACjE;","names":[]}

package/dist/esm/components/msteams-connect-button/MsTeamsConnectButton.js

@@ -2,10 +2,9 @@
 import React, { useMemo } from "react";
 import { useNovu } from "../../hooks/NovuProvider.js";
 import { NovuUI } from "../NovuUI.js";
-import { withRenderer } from "../Renderer.js";
 import { DefaultMsTeamsConnectButton } from "./DefaultMsTeamsConnectButton.js";
 import { jsx } from "react/jsx-runtime";
-var MsTeamsConnectButtonInternal = withRenderer((props) => {
+var MsTeamsConnectButtonInternal = (props) => {
   const { container, appearance, ...defaultProps } = props;
   const novu = useNovu();
   const options = useMemo(() => {
@@ -16,7 +15,7 @@ var MsTeamsConnectButtonInternal = withRenderer((props) => {
     };
   }, [container, appearance, novu.options]);
   return /* @__PURE__ */ jsx(NovuUI, { options, novu, children: /* @__PURE__ */ jsx(DefaultMsTeamsConnectButton, { ...defaultProps }) });
-});
+};
 MsTeamsConnectButtonInternal.displayName = "MsTeamsConnectButtonInternal";
 var MsTeamsConnectButton = React.memo((props) => {
   return /* @__PURE__ */ jsx(MsTeamsConnectButtonInternal, { ...props });

package/dist/esm/components/msteams-connect-button/MsTeamsConnectButton.js.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,OAAO,SAAS,eAAe;AAC/B,SAAS,eAAe;AACxB,SAAS,cAA6B;AACtC,SAAS,oBAAoB;AAC7B,SAAS,mCAAqE;AAmBxE;AAdN,IAAM,+BAA+B,aAAwC,CAAC,UAAU;AACtF,QAAM,EAAE,WAAW,YAAY,GAAG,aAAa,IAAI;AACnD,QAAM,OAAO,QAAQ;AAErB,QAAM,UAAyB,QAAQ,MAAM;AAC3C,WAAO;AAAA,MACL;AAAA,MACA;AAAA,MACA,SAAS,KAAK;AAAA,IAChB;AAAA,EACF,GAAG,CAAC,WAAW,YAAY,KAAK,OAAO,CAAC;AAExC,SACE,oBAAC,UAAO,SAAkB,MACxB,8BAAC,+BAA6B,GAAG,cAAc,GACjD;AAEJ,CAAC;AAED,6BAA6B,cAAc;AAEpC,IAAM,uBAAuB,MAAM,KAAK,CAAC,UAAqC;AACnF,SAAO,oBAAC,gCAA8B,GAAG,OAAO;AAClD,CAAC;AAED,qBAAqB,cAAc;","names":[]}
+{"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,OAAO,SAAS,eAAe;AAC/B,SAAS,eAAe;AACxB,SAAS,cAA6B;AACtC,SAAS,mCAAqE;AAmBxE;AAdN,IAAM,+BAA+B,CAAC,UAAqC;AACzE,QAAM,EAAE,WAAW,YAAY,GAAG,aAAa,IAAI;AACnD,QAAM,OAAO,QAAQ;AAErB,QAAM,UAAyB,QAAQ,MAAM;AAC3C,WAAO;AAAA,MACL;AAAA,MACA;AAAA,MACA,SAAS,KAAK;AAAA,IAChB;AAAA,EACF,GAAG,CAAC,WAAW,YAAY,KAAK,OAAO,CAAC;AAExC,SACE,oBAAC,UAAO,SAAkB,MACxB,8BAAC,+BAA6B,GAAG,cAAc,GACjD;AAEJ;AAEA,6BAA6B,cAAc;AAEpC,IAAM,uBAAuB,MAAM,KAAK,CAAC,UAAqC;AACnF,SAAO,oBAAC,gCAA8B,GAAG,OAAO;AAClD,CAAC;AAED,qBAAqB,cAAc;","names":[]}