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

package/dist/esm/components/subscription/SubscriptionButton.js

@@ -1,6 +1,5 @@
 // src/components/subscription/SubscriptionButton.tsx
-import React from "react";
-import { useNovuUI } from "../../context/NovuUIContext.js";
+import React, { useMemo } from "react";
 import { Mounter } from "../Mounter.js";
 import { jsx } from "react/jsx-runtime";
 var SubscriptionButton = React.memo(
@@ -14,29 +13,8 @@ var SubscriptionButton = React.memo(
     onCreateError,
     onCreateSuccess
   }) => {
-    const { novuUI } = useNovuUI();
-    const mount = React.useCallback(
-      (element) => {
-        if (!topicKey) {
-          return;
-        }
-        return novuUI.mountComponent({
-          name: "SubscriptionButton",
-          element,
-          props: {
-            topicKey,
-            identifier,
-            preferences,
-            onClick,
-            onDeleteError,
-            onDeleteSuccess,
-            onCreateError,
-            onCreateSuccess
-          }
-        });
-      },
-      [
-        novuUI,
+    const mountProps = useMemo(
+      () => topicKey ? {
         topicKey,
         identifier,
         preferences,
@@ -45,11 +23,16 @@ var SubscriptionButton = React.memo(
         onDeleteSuccess,
         onCreateError,
         onCreateSuccess
-      ]
+      } : void 0,
+      [topicKey, identifier, preferences, onClick, onDeleteError, onDeleteSuccess, onCreateError, onCreateSuccess]
     );
-    return /* @__PURE__ */ jsx(Mounter, { mount });
+    if (!mountProps) {
+      return null;
+    }
+    return /* @__PURE__ */ jsx(Mounter, { name: "SubscriptionButton", props: mountProps });
   }
 );
+SubscriptionButton.displayName = "SubscriptionButton";
 export {
   SubscriptionButton
 };

package/dist/esm/components/subscription/SubscriptionButton.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/subscription/SubscriptionButton.tsx"],"sourcesContent":["import type { SubscriptionButtonWrapperProps } from '@novu/js/ui';\nimport React from 'react';\nimport { useNovuUI } from '../../context/NovuUIContext';\nimport { Mounter } from '../Mounter';\n\nexport type SubscriptionButtonProps = Partial<SubscriptionButtonWrapperProps>;\n\nexport const SubscriptionButton = React.memo(\n  ({\n    topicKey,\n    identifier,\n    preferences,\n    onClick,\n    onDeleteError,\n    onDeleteSuccess,\n    onCreateError,\n    onCreateSuccess,\n  }: SubscriptionButtonProps) => {\n    const { novuUI } = useNovuUI();\n\n    const mount = React.useCallback(\n      (element: HTMLElement) => {\n        if (!topicKey) {\n          return;\n        }\n\n        return novuUI.mountComponent({\n          name: 'SubscriptionButton',\n          element,\n          props: {\n            topicKey,\n            identifier,\n            preferences,\n            onClick,\n            onDeleteError,\n            onDeleteSuccess,\n            onCreateError,\n            onCreateSuccess,\n          },\n        });\n      },\n      [\n        novuUI,\n        topicKey,\n        identifier,\n        preferences,\n        onClick,\n        onDeleteError,\n        onDeleteSuccess,\n        onCreateError,\n        onCreateSuccess,\n      ]\n    );\n\n    return <Mounter mount={mount} />;\n  }\n);\n"],"mappings":";AACA,OAAO,WAAW;AAClB,SAAS,iBAAiB;AAC1B,SAAS,eAAe;AAmDb;AA/CJ,IAAM,qBAAqB,MAAM;AAAA,EACtC,CAAC;AAAA,IACC;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,MAA+B;AAC7B,UAAM,EAAE,OAAO,IAAI,UAAU;AAE7B,UAAM,QAAQ,MAAM;AAAA,MAClB,CAAC,YAAyB;AACxB,YAAI,CAAC,UAAU;AACb;AAAA,QACF;AAEA,eAAO,OAAO,eAAe;AAAA,UAC3B,MAAM;AAAA,UACN;AAAA,UACA,OAAO;AAAA,YACL;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,UACF;AAAA,QACF,CAAC;AAAA,MACH;AAAA,MACA;AAAA,QACE;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,MACF;AAAA,IACF;AAEA,WAAO,oBAAC,WAAQ,OAAc;AAAA,EAChC;AACF;","names":[]}
+{"version":3,"sources":["../../../../src/components/subscription/SubscriptionButton.tsx"],"sourcesContent":["import type { SubscriptionButtonWrapperProps } from '@novu/js/ui';\nimport React, { useMemo } from 'react';\nimport { Mounter } from '../Mounter';\n\nexport type SubscriptionButtonProps = Partial<SubscriptionButtonWrapperProps>;\n\nexport const SubscriptionButton = React.memo(\n  ({\n    topicKey,\n    identifier,\n    preferences,\n    onClick,\n    onDeleteError,\n    onDeleteSuccess,\n    onCreateError,\n    onCreateSuccess,\n  }: SubscriptionButtonProps) => {\n    const mountProps = useMemo(\n      () =>\n        topicKey\n          ? {\n              topicKey,\n              identifier,\n              preferences,\n              onClick,\n              onDeleteError,\n              onDeleteSuccess,\n              onCreateError,\n              onCreateSuccess,\n            }\n          : undefined,\n      [topicKey, identifier, preferences, onClick, onDeleteError, onDeleteSuccess, onCreateError, onCreateSuccess]\n    );\n\n    if (!mountProps) {\n      return null;\n    }\n\n    return <Mounter name=\"SubscriptionButton\" props={mountProps} />;\n  }\n);\n\nSubscriptionButton.displayName = 'SubscriptionButton';\n"],"mappings":";AACA,OAAO,SAAS,eAAe;AAC/B,SAAS,eAAe;AAoCb;AAhCJ,IAAM,qBAAqB,MAAM;AAAA,EACtC,CAAC;AAAA,IACC;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,MAA+B;AAC7B,UAAM,aAAa;AAAA,MACjB,MACE,WACI;AAAA,QACE;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,MACF,IACA;AAAA,MACN,CAAC,UAAU,YAAY,aAAa,SAAS,eAAe,iBAAiB,eAAe,eAAe;AAAA,IAC7G;AAEA,QAAI,CAAC,YAAY;AACf,aAAO;AAAA,IACT;AAEA,WAAO,oBAAC,WAAQ,MAAK,sBAAqB,OAAO,YAAY;AAAA,EAC/D;AACF;AAEA,mBAAmB,cAAc;","names":[]}

package/dist/esm/components/subscription/SubscriptionPreferences.d.ts

@@ -3,6 +3,6 @@ import { SubscriptionPreferencesWrapperProps } from '@novu/js/ui';
 import React__default from 'react';
 
 type SubscriptionPreferencesProps = Partial<SubscriptionPreferencesWrapperProps>;
-declare const SubscriptionPreferences: React__default.MemoExoticComponent<({ topicKey, identifier, preferences, onClick, onDeleteError, onDeleteSuccess, onCreateError, onCreateSuccess, }: SubscriptionPreferencesProps) => react_jsx_runtime.JSX.Element>;
+declare const SubscriptionPreferences: React__default.MemoExoticComponent<({ topicKey, identifier, preferences, onClick, onDeleteError, onDeleteSuccess, onCreateError, onCreateSuccess, }: SubscriptionPreferencesProps) => react_jsx_runtime.JSX.Element | null>;
 
 export { SubscriptionPreferences, type SubscriptionPreferencesProps };

package/dist/esm/components/subscription/SubscriptionPreferences.js

@@ -1,6 +1,5 @@
 // src/components/subscription/SubscriptionPreferences.tsx
-import React from "react";
-import { useNovuUI } from "../../context/NovuUIContext.js";
+import React, { useMemo } from "react";
 import { Mounter } from "../Mounter.js";
 import { jsx } from "react/jsx-runtime";
 var SubscriptionPreferences = React.memo(
@@ -14,29 +13,8 @@ var SubscriptionPreferences = React.memo(
     onCreateError,
     onCreateSuccess
   }) => {
-    const { novuUI } = useNovuUI();
-    const mount = React.useCallback(
-      (element) => {
-        if (!topicKey) {
-          return;
-        }
-        return novuUI.mountComponent({
-          name: "SubscriptionPreferences",
-          element,
-          props: {
-            topicKey,
-            identifier,
-            preferences,
-            onClick,
-            onDeleteError,
-            onDeleteSuccess,
-            onCreateError,
-            onCreateSuccess
-          }
-        });
-      },
-      [
-        novuUI,
+    const mountProps = useMemo(
+      () => topicKey ? {
         topicKey,
         identifier,
         preferences,
@@ -45,11 +23,16 @@ var SubscriptionPreferences = React.memo(
         onDeleteSuccess,
         onCreateError,
         onCreateSuccess
-      ]
+      } : void 0,
+      [topicKey, identifier, preferences, onClick, onDeleteError, onDeleteSuccess, onCreateError, onCreateSuccess]
     );
-    return /* @__PURE__ */ jsx(Mounter, { mount });
+    if (!mountProps) {
+      return null;
+    }
+    return /* @__PURE__ */ jsx(Mounter, { name: "SubscriptionPreferences", props: mountProps });
   }
 );
+SubscriptionPreferences.displayName = "SubscriptionPreferences";
 export {
   SubscriptionPreferences
 };

package/dist/esm/components/subscription/SubscriptionPreferences.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/subscription/SubscriptionPreferences.tsx"],"sourcesContent":["import type { SubscriptionPreferencesWrapperProps } from '@novu/js/ui';\nimport React from 'react';\nimport { useNovuUI } from '../../context/NovuUIContext';\nimport { Mounter } from '../Mounter';\n\nexport type SubscriptionPreferencesProps = Partial<SubscriptionPreferencesWrapperProps>;\n\nexport const SubscriptionPreferences = React.memo(\n  ({\n    topicKey,\n    identifier,\n    preferences,\n    onClick,\n    onDeleteError,\n    onDeleteSuccess,\n    onCreateError,\n    onCreateSuccess,\n  }: SubscriptionPreferencesProps) => {\n    const { novuUI } = useNovuUI();\n\n    const mount = React.useCallback(\n      (element: HTMLElement) => {\n        if (!topicKey) {\n          return;\n        }\n\n        return novuUI.mountComponent({\n          name: 'SubscriptionPreferences',\n          element,\n          props: {\n            topicKey,\n            identifier,\n            preferences,\n            onClick,\n            onDeleteError,\n            onDeleteSuccess,\n            onCreateError,\n            onCreateSuccess,\n          },\n        });\n      },\n      [\n        novuUI,\n        topicKey,\n        identifier,\n        preferences,\n        onClick,\n        onDeleteError,\n        onDeleteSuccess,\n        onCreateError,\n        onCreateSuccess,\n      ]\n    );\n\n    return <Mounter mount={mount} />;\n  }\n);\n"],"mappings":";AACA,OAAO,WAAW;AAClB,SAAS,iBAAiB;AAC1B,SAAS,eAAe;AAmDb;AA/CJ,IAAM,0BAA0B,MAAM;AAAA,EAC3C,CAAC;AAAA,IACC;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,MAAoC;AAClC,UAAM,EAAE,OAAO,IAAI,UAAU;AAE7B,UAAM,QAAQ,MAAM;AAAA,MAClB,CAAC,YAAyB;AACxB,YAAI,CAAC,UAAU;AACb;AAAA,QACF;AAEA,eAAO,OAAO,eAAe;AAAA,UAC3B,MAAM;AAAA,UACN;AAAA,UACA,OAAO;AAAA,YACL;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,UACF;AAAA,QACF,CAAC;AAAA,MACH;AAAA,MACA;AAAA,QACE;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,MACF;AAAA,IACF;AAEA,WAAO,oBAAC,WAAQ,OAAc;AAAA,EAChC;AACF;","names":[]}
+{"version":3,"sources":["../../../../src/components/subscription/SubscriptionPreferences.tsx"],"sourcesContent":["import type { SubscriptionPreferencesWrapperProps } from '@novu/js/ui';\nimport React, { useMemo } from 'react';\nimport { Mounter } from '../Mounter';\n\nexport type SubscriptionPreferencesProps = Partial<SubscriptionPreferencesWrapperProps>;\n\nexport const SubscriptionPreferences = React.memo(\n  ({\n    topicKey,\n    identifier,\n    preferences,\n    onClick,\n    onDeleteError,\n    onDeleteSuccess,\n    onCreateError,\n    onCreateSuccess,\n  }: SubscriptionPreferencesProps) => {\n    const mountProps = useMemo(\n      () =>\n        topicKey\n          ? {\n              topicKey,\n              identifier,\n              preferences,\n              onClick,\n              onDeleteError,\n              onDeleteSuccess,\n              onCreateError,\n              onCreateSuccess,\n            }\n          : undefined,\n      [topicKey, identifier, preferences, onClick, onDeleteError, onDeleteSuccess, onCreateError, onCreateSuccess]\n    );\n\n    if (!mountProps) {\n      return null;\n    }\n\n    return <Mounter name=\"SubscriptionPreferences\" props={mountProps} />;\n  }\n);\n\nSubscriptionPreferences.displayName = 'SubscriptionPreferences';\n"],"mappings":";AACA,OAAO,SAAS,eAAe;AAC/B,SAAS,eAAe;AAoCb;AAhCJ,IAAM,0BAA0B,MAAM;AAAA,EAC3C,CAAC;AAAA,IACC;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,MAAoC;AAClC,UAAM,aAAa;AAAA,MACjB,MACE,WACI;AAAA,QACE;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,MACF,IACA;AAAA,MACN,CAAC,UAAU,YAAY,aAAa,SAAS,eAAe,iBAAiB,eAAe,eAAe;AAAA,IAC7G;AAEA,QAAI,CAAC,YAAY;AACf,aAAO;AAAA,IACT;AAEA,WAAO,oBAAC,WAAQ,MAAK,2BAA0B,OAAO,YAAY;AAAA,EACpE;AACF;AAEA,wBAAwB,cAAc;","names":[]}

package/dist/esm/components/telegram-connect-button/DefaultTelegramConnectButton.js

@@ -1,6 +1,5 @@
 // src/components/telegram-connect-button/DefaultTelegramConnectButton.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 DefaultTelegramConnectButton = (props) => {
@@ -16,28 +15,20 @@ var DefaultTelegramConnectButton = (props) => {
     connectLabel,
     connectedLabel
   } = props;
-  const { novuUI } = useNovuUI();
-  const mount = useCallback(
-    (element) => {
-      return novuUI.mountComponent({
-        name: "TelegramConnectButton",
-        props: {
-          integrationIdentifier,
-          subscriberId,
-          context,
-          contextHash,
-          onConnectSuccess,
-          onConnectError,
-          onDisconnectSuccess,
-          onDisconnectError,
-          connectLabel,
-          connectedLabel
-        },
-        element
-      });
-    },
+  const mountProps = useMemo(
+    () => ({
+      integrationIdentifier,
+      subscriberId,
+      context,
+      contextHash,
+      onConnectSuccess,
+      onConnectError,
+      onDisconnectSuccess,
+      onDisconnectError,
+      connectLabel,
+      connectedLabel
+    }),
     [
-      novuUI,
       integrationIdentifier,
       subscriberId,
       context,
@@ -50,7 +41,7 @@ var DefaultTelegramConnectButton = (props) => {
       connectedLabel
     ]
   );
-  return /* @__PURE__ */ jsx(Mounter, { mount });
+  return /* @__PURE__ */ jsx(Mounter, { name: "TelegramConnectButton", props: mountProps });
 };
 export {
   DefaultTelegramConnectButton

package/dist/esm/components/telegram-connect-button/DefaultTelegramConnectButton.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/telegram-connect-button/DefaultTelegramConnectButton.tsx"],"sourcesContent":["import { TelegramConnectButtonProps } from '@novu/js/ui';\nimport { useCallback } from 'react';\nimport { useNovuUI } from '../../context/NovuUIContext';\nimport { Mounter } from '../Mounter';\n\nexport type DefaultTelegramConnectButtonProps = Pick<\n  TelegramConnectButtonProps,\n  | 'integrationIdentifier'\n  | 'subscriberId'\n  | 'context'\n  | 'contextHash'\n  | 'onConnectSuccess'\n  | 'onConnectError'\n  | 'onDisconnectSuccess'\n  | 'onDisconnectError'\n  | 'connectLabel'\n  | 'connectedLabel'\n>;\n\nexport const DefaultTelegramConnectButton = (props: DefaultTelegramConnectButtonProps) => {\n  const {\n    integrationIdentifier,\n    subscriberId,\n    context,\n    contextHash,\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: 'TelegramConnectButton',\n        props: {\n          integrationIdentifier,\n          subscriberId,\n          context,\n          contextHash,\n          onConnectSuccess,\n          onConnectError,\n          onDisconnectSuccess,\n          onDisconnectError,\n          connectLabel,\n          connectedLabel,\n        },\n        element,\n      });\n    },\n    [\n      novuUI,\n      integrationIdentifier,\n      subscriberId,\n      context,\n      contextHash,\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;AAiEf;AAjDF,IAAM,+BAA+B,CAAC,UAA6C;AACxF,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/telegram-connect-button/DefaultTelegramConnectButton.tsx"],"sourcesContent":["import { TelegramConnectButtonProps } from '@novu/js/ui';\nimport { useMemo } from 'react';\nimport { Mounter } from '../Mounter';\n\nexport type DefaultTelegramConnectButtonProps = Pick<\n  TelegramConnectButtonProps,\n  | 'integrationIdentifier'\n  | 'subscriberId'\n  | 'context'\n  | 'contextHash'\n  | 'onConnectSuccess'\n  | 'onConnectError'\n  | 'onDisconnectSuccess'\n  | 'onDisconnectError'\n  | 'connectLabel'\n  | 'connectedLabel'\n>;\n\nexport const DefaultTelegramConnectButton = (props: DefaultTelegramConnectButtonProps) => {\n  const {\n    integrationIdentifier,\n    subscriberId,\n    context,\n    contextHash,\n    onConnectSuccess,\n    onConnectError,\n    onDisconnectSuccess,\n    onDisconnectError,\n    connectLabel,\n    connectedLabel,\n  } = props;\n\n  const mountProps = useMemo(\n    () => ({\n      integrationIdentifier,\n      subscriberId,\n      context,\n      contextHash,\n      onConnectSuccess,\n      onConnectError,\n      onDisconnectSuccess,\n      onDisconnectError,\n      connectLabel,\n      connectedLabel,\n    }),\n    [\n      integrationIdentifier,\n      subscriberId,\n      context,\n      contextHash,\n      onConnectSuccess,\n      onConnectError,\n      onDisconnectSuccess,\n      onDisconnectError,\n      connectLabel,\n      connectedLabel,\n    ]\n  );\n\n  return <Mounter name=\"TelegramConnectButton\" props={mountProps} />;\n};\n"],"mappings":";AACA,SAAS,eAAe;AACxB,SAAS,eAAe;AAyDf;AAzCF,IAAM,+BAA+B,CAAC,UAA6C;AACxF,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,yBAAwB,OAAO,YAAY;AAClE;","names":[]}

package/dist/esm/components/telegram-connect-button/TelegramConnectButton.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 { DefaultTelegramConnectButton } from "./DefaultTelegramConnectButton.js";
 import { jsx } from "react/jsx-runtime";
-var TelegramConnectButtonInternal = withRenderer((props) => {
+var TelegramConnectButtonInternal = (props) => {
   const { container, appearance, ...defaultProps } = props;
   const novu = useNovu();
   const options = useMemo(() => {
@@ -16,7 +15,7 @@ var TelegramConnectButtonInternal = withRenderer((props) => {
     };
   }, [container, appearance, novu.options]);
   return /* @__PURE__ */ jsx(NovuUI, { options, novu, children: /* @__PURE__ */ jsx(DefaultTelegramConnectButton, { ...defaultProps }) });
-});
+};
 TelegramConnectButtonInternal.displayName = "TelegramConnectButtonInternal";
 var TelegramConnectButton = React.memo((props) => {
   return /* @__PURE__ */ jsx(TelegramConnectButtonInternal, { ...props });

package/dist/esm/components/telegram-connect-button/TelegramConnectButton.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/telegram-connect-button/TelegramConnectButton.tsx"],"sourcesContent":["import React, { useMemo } from 'react';\nimport { useNovu } from '../../hooks/NovuProvider';\nimport { NovuUI, NovuUIOptions } from '../NovuUI';\nimport { withRenderer } from '../Renderer';\nimport { DefaultTelegramConnectButton, DefaultTelegramConnectButtonProps } from './DefaultTelegramConnectButton';\n\nexport type TelegramConnectButtonProps = DefaultTelegramConnectButtonProps &\n  Pick<NovuUIOptions, 'container' | 'appearance'>;\n\nconst TelegramConnectButtonInternal = withRenderer<TelegramConnectButtonProps>((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      <DefaultTelegramConnectButton {...defaultProps} />\n    </NovuUI>\n  );\n});\n\nTelegramConnectButtonInternal.displayName = 'TelegramConnectButtonInternal';\n\nexport const TelegramConnectButton = React.memo((props: TelegramConnectButtonProps) => {\n  return <TelegramConnectButtonInternal {...props} />;\n});\n\nTelegramConnectButton.displayName = 'TelegramConnectButton';\n"],"mappings":";AAAA,OAAO,SAAS,eAAe;AAC/B,SAAS,eAAe;AACxB,SAAS,cAA6B;AACtC,SAAS,oBAAoB;AAC7B,SAAS,oCAAuE;AAmB1E;AAdN,IAAM,gCAAgC,aAAyC,CAAC,UAAU;AACxF,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,gCAA8B,GAAG,cAAc,GAClD;AAEJ,CAAC;AAED,8BAA8B,cAAc;AAErC,IAAM,wBAAwB,MAAM,KAAK,CAAC,UAAsC;AACrF,SAAO,oBAAC,iCAA+B,GAAG,OAAO;AACnD,CAAC;AAED,sBAAsB,cAAc;","names":[]}
+{"version":3,"sources":["../../../../src/components/telegram-connect-button/TelegramConnectButton.tsx"],"sourcesContent":["import React, { useMemo } from 'react';\nimport { useNovu } from '../../hooks/NovuProvider';\nimport { NovuUI, NovuUIOptions } from '../NovuUI';\nimport { DefaultTelegramConnectButton, DefaultTelegramConnectButtonProps } from './DefaultTelegramConnectButton';\n\nexport type TelegramConnectButtonProps = DefaultTelegramConnectButtonProps &\n  Pick<NovuUIOptions, 'container' | 'appearance'>;\n\nconst TelegramConnectButtonInternal = (props: TelegramConnectButtonProps) => {\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      <DefaultTelegramConnectButton {...defaultProps} />\n    </NovuUI>\n  );\n};\n\nTelegramConnectButtonInternal.displayName = 'TelegramConnectButtonInternal';\n\nexport const TelegramConnectButton = React.memo((props: TelegramConnectButtonProps) => {\n  return <TelegramConnectButtonInternal {...props} />;\n});\n\nTelegramConnectButton.displayName = 'TelegramConnectButton';\n"],"mappings":";AAAA,OAAO,SAAS,eAAe;AAC/B,SAAS,eAAe;AACxB,SAAS,cAA6B;AACtC,SAAS,oCAAuE;AAmB1E;AAdN,IAAM,gCAAgC,CAAC,UAAsC;AAC3E,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,gCAA8B,GAAG,cAAc,GAClD;AAEJ;AAEA,8BAA8B,cAAc;AAErC,IAAM,wBAAwB,MAAM,KAAK,CAAC,UAAsC;AACrF,SAAO,oBAAC,iCAA+B,GAAG,OAAO;AACnD,CAAC;AAED,sBAAsB,cAAc;","names":[]}

package/dist/esm/context/NovuUIContext.d.ts

@@ -1,14 +1,21 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import { NovuUI } from '@novu/js/ui';
 import React__default from 'react';
+import { ReactAllIconOverrides } from '../utils/types.js';
+import { OutletStore } from './OutletStore.js';
+import '@novu/js';
 
 type NovuUIContextValue = {
     novuUI: NovuUI;
+    outlets: OutletStore;
+    /** The host's own icon overrides, so host-native blocks render them without a trip through the bridge. */
+    icons: ReactAllIconOverrides;
 };
 declare const useNovuUIContext: () => NovuUIContextValue;
 declare const useUnsafeNovuUIContext: () => NovuUIContextValue | Partial<NovuUIContextValue>;
 declare const NovuUIProvider: (props: React__default.PropsWithChildren<{
     value: NovuUIContextValue;
 }>) => react_jsx_runtime.JSX.Element;
+declare const useOutlets: () => OutletStore;
 
-export { NovuUIProvider, useNovuUIContext as useNovuUI, useUnsafeNovuUIContext as useUnsafeNovuUI };
+export { NovuUIProvider, useNovuUIContext as useNovuUI, useOutlets, useUnsafeNovuUIContext as useUnsafeNovuUI };

package/dist/esm/context/NovuUIContext.js

@@ -5,9 +5,11 @@ var [NovuUIContext, useNovuUIContext, useUnsafeNovuUIContext] = createContextAnd
 var NovuUIProvider = (props) => {
   return /* @__PURE__ */ jsx(NovuUIContext.Provider, { value: { value: props.value }, children: props.children });
 };
+var useOutlets = () => useNovuUIContext().outlets;
 export {
   NovuUIProvider,
   useNovuUIContext as useNovuUI,
+  useOutlets,
   useUnsafeNovuUIContext as useUnsafeNovuUI
 };
 //# sourceMappingURL=NovuUIContext.js.map

package/dist/esm/context/NovuUIContext.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/context/NovuUIContext.tsx"],"sourcesContent":["import type { NovuUI } from '@novu/js/ui';\nimport React from 'react';\nimport { createContextAndHook } from '../utils/createContextAndHook';\n\ntype NovuUIContextValue = {\n  novuUI: NovuUI;\n};\n\nconst [NovuUIContext, useNovuUIContext, useUnsafeNovuUIContext] =\n  createContextAndHook<NovuUIContextValue>('NovuUIContext');\n\nconst NovuUIProvider = (props: React.PropsWithChildren<{ value: NovuUIContextValue }>) => {\n  return <NovuUIContext.Provider value={{ value: props.value }}>{props.children}</NovuUIContext.Provider>;\n};\n\nexport { useNovuUIContext as useNovuUI, useUnsafeNovuUIContext as useUnsafeNovuUI, NovuUIProvider };\n"],"mappings":";AAEA,SAAS,4BAA4B;AAU5B;AAJT,IAAM,CAAC,eAAe,kBAAkB,sBAAsB,IAC5D,qBAAyC,eAAe;AAE1D,IAAM,iBAAiB,CAAC,UAAkE;AACxF,SAAO,oBAAC,cAAc,UAAd,EAAuB,OAAO,EAAE,OAAO,MAAM,MAAM,GAAI,gBAAM,UAAS;AAChF;","names":[]}
+{"version":3,"sources":["../../../src/context/NovuUIContext.tsx"],"sourcesContent":["import type { NovuUI } from '@novu/js/ui';\nimport React from 'react';\nimport { createContextAndHook } from '../utils/createContextAndHook';\nimport type { ReactAllIconOverrides } from '../utils/types';\nimport type { OutletStore } from './OutletStore';\n\ntype NovuUIContextValue = {\n  novuUI: NovuUI;\n  outlets: OutletStore;\n  /** The host's own icon overrides, so host-native blocks render them without a trip through the bridge. */\n  icons: ReactAllIconOverrides;\n};\n\nconst [NovuUIContext, useNovuUIContext, useUnsafeNovuUIContext] =\n  createContextAndHook<NovuUIContextValue>('NovuUIContext');\n\nconst NovuUIProvider = (props: React.PropsWithChildren<{ value: NovuUIContextValue }>) => {\n  return <NovuUIContext.Provider value={{ value: props.value }}>{props.children}</NovuUIContext.Provider>;\n};\n\nconst useOutlets = () => useNovuUIContext().outlets;\n\nexport { useNovuUIContext as useNovuUI, useUnsafeNovuUIContext as useUnsafeNovuUI, NovuUIProvider, useOutlets };\n"],"mappings":";AAEA,SAAS,4BAA4B;AAe5B;AAJT,IAAM,CAAC,eAAe,kBAAkB,sBAAsB,IAC5D,qBAAyC,eAAe;AAE1D,IAAM,iBAAiB,CAAC,UAAkE;AACxF,SAAO,oBAAC,cAAc,UAAd,EAAuB,OAAO,EAAE,OAAO,MAAM,MAAM,GAAI,gBAAM,UAAS;AAChF;AAEA,IAAM,aAAa,MAAM,iBAAiB,EAAE;","names":[]}

package/dist/esm/context/OutletStore.d.ts

@@ -0,0 +1,31 @@
+import { OutletHandle } from '@novu/js/ui';
+import { ReactNode } from 'react';
+
+type OutletRender = (...args: unknown[]) => ReactNode;
+type OutletEntry = {
+    id: string;
+    el: HTMLElement;
+    render: OutletRender;
+    args: unknown[];
+};
+type OutletSnapshot = {
+    entries: ReadonlyMap<string, OutletEntry>;
+    /** Bumped when a render prop changed identity, so outlets re-render with the latest one even if they rendered first. */
+    version: number;
+};
+/**
+ * The host side of the bridge for outlets: DOM nodes the engine hands to React so React can render into them.
+ *
+ * One store exists per engine instance. Every mutation replaces the map, so `useSyncExternalStore` sees a new
+ * snapshot only when something changed, and portals keyed by outlet id are reconciled in place.
+ */
+declare class OutletStore {
+    #private;
+    subscribe: (listener: () => void) => () => void;
+    getSnapshot: () => OutletSnapshot;
+    /** Re-renders every outlet. Called when a host render prop changed identity. */
+    invalidate(): void;
+    mount<TArgs extends unknown[]>(el: HTMLElement, render: (...args: TArgs) => ReactNode, args: TArgs): OutletHandle<TArgs>;
+}
+
+export { type OutletEntry, type OutletRender, type OutletSnapshot, OutletStore };

package/dist/esm/context/OutletStore.js

@@ -0,0 +1,61 @@
+// src/context/OutletStore.ts
+var fallbackOutletCounter = 0;
+var OutletStore = class {
+  constructor() {
+    this.#entries = /* @__PURE__ */ new Map();
+    this.#snapshot = { entries: this.#entries, version: 0 };
+    this.#listeners = /* @__PURE__ */ new Set();
+    this.subscribe = (listener) => {
+      this.#listeners.add(listener);
+      return () => {
+        this.#listeners.delete(listener);
+      };
+    };
+    this.getSnapshot = () => this.#snapshot;
+  }
+  #entries;
+  #snapshot;
+  #listeners;
+  /** Re-renders every outlet. Called when a host render prop changed identity. */
+  invalidate() {
+    this.#publish();
+  }
+  mount(el, render, args) {
+    const id = el.dataset.novuOutlet ?? `nv-host-outlet-${fallbackOutletCounter++}`;
+    this.#set({ id, el, render, args });
+    return {
+      update: (...nextArgs) => {
+        const current = this.#entries.get(id);
+        if (!current) {
+          return;
+        }
+        this.#set({ ...current, args: nextArgs });
+      },
+      unmount: () => {
+        if (!this.#entries.has(id)) {
+          return;
+        }
+        const next = new Map(this.#entries);
+        next.delete(id);
+        this.#entries = next;
+        this.#publish();
+      }
+    };
+  }
+  #set(entry) {
+    const next = new Map(this.#entries);
+    next.set(entry.id, entry);
+    this.#entries = next;
+    this.#publish();
+  }
+  #publish() {
+    this.#snapshot = { entries: this.#entries, version: this.#snapshot.version + 1 };
+    for (const listener of this.#listeners) {
+      listener();
+    }
+  }
+};
+export {
+  OutletStore
+};
+//# sourceMappingURL=OutletStore.js.map

package/dist/esm/context/OutletStore.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/context/OutletStore.ts"],"sourcesContent":["import type { OutletHandle } from '@novu/js/ui';\nimport type { ReactNode } from 'react';\n\nexport type OutletRender = (...args: unknown[]) => ReactNode;\n\nexport type OutletEntry = {\n  id: string;\n  el: HTMLElement;\n  render: OutletRender;\n  args: unknown[];\n};\n\nexport type OutletSnapshot = {\n  entries: ReadonlyMap<string, OutletEntry>;\n  /** Bumped when a render prop changed identity, so outlets re-render with the latest one even if they rendered first. */\n  version: number;\n};\n\nlet fallbackOutletCounter = 0;\n\n/**\n * The host side of the bridge for outlets: DOM nodes the engine hands to React so React can render into them.\n *\n * One store exists per engine instance. Every mutation replaces the map, so `useSyncExternalStore` sees a new\n * snapshot only when something changed, and portals keyed by outlet id are reconciled in place.\n */\nexport class OutletStore {\n  #entries: Map<string, OutletEntry> = new Map();\n  #snapshot: OutletSnapshot = { entries: this.#entries, version: 0 };\n  #listeners = new Set<() => void>();\n\n  subscribe = (listener: () => void) => {\n    this.#listeners.add(listener);\n\n    return () => {\n      this.#listeners.delete(listener);\n    };\n  };\n\n  getSnapshot = (): OutletSnapshot => this.#snapshot;\n\n  /** Re-renders every outlet. Called when a host render prop changed identity. */\n  invalidate() {\n    this.#publish();\n  }\n\n  mount<TArgs extends unknown[]>(\n    el: HTMLElement,\n    render: (...args: TArgs) => ReactNode,\n    args: TArgs\n  ): OutletHandle<TArgs> {\n    // engine outlets carry an id that is unique per outlet instance; anything else gets one from the host\n    const id = el.dataset.novuOutlet ?? `nv-host-outlet-${fallbackOutletCounter++}`;\n    this.#set({ id, el, render: render as OutletRender, args });\n\n    return {\n      update: (...nextArgs: TArgs) => {\n        const current = this.#entries.get(id);\n        if (!current) {\n          return;\n        }\n\n        this.#set({ ...current, args: nextArgs });\n      },\n      unmount: () => {\n        if (!this.#entries.has(id)) {\n          return;\n        }\n\n        const next = new Map(this.#entries);\n        next.delete(id);\n        this.#entries = next;\n        this.#publish();\n      },\n    };\n  }\n\n  #set(entry: OutletEntry) {\n    const next = new Map(this.#entries);\n    next.set(entry.id, entry);\n    this.#entries = next;\n    this.#publish();\n  }\n\n  #publish() {\n    this.#snapshot = { entries: this.#entries, version: this.#snapshot.version + 1 };\n    for (const listener of this.#listeners) {\n      listener();\n    }\n  }\n}\n"],"mappings":";AAkBA,IAAI,wBAAwB;AAQrB,IAAM,cAAN,MAAkB;AAAA,EAAlB;AACL,oBAAqC,oBAAI,IAAI;AAC7C,qBAA4B,EAAE,SAAS,KAAK,UAAU,SAAS,EAAE;AACjE,sBAAa,oBAAI,IAAgB;AAEjC,qBAAY,CAAC,aAAyB;AACpC,WAAK,WAAW,IAAI,QAAQ;AAE5B,aAAO,MAAM;AACX,aAAK,WAAW,OAAO,QAAQ;AAAA,MACjC;AAAA,IACF;AAEA,uBAAc,MAAsB,KAAK;AAAA;AAAA,EAZzC;AAAA,EACA;AAAA,EACA;AAAA;AAAA,EAaA,aAAa;AACX,SAAK,SAAS;AAAA,EAChB;AAAA,EAEA,MACE,IACA,QACA,MACqB;AAErB,UAAM,KAAK,GAAG,QAAQ,cAAc,kBAAkB,uBAAuB;AAC7E,SAAK,KAAK,EAAE,IAAI,IAAI,QAAgC,KAAK,CAAC;AAE1D,WAAO;AAAA,MACL,QAAQ,IAAI,aAAoB;AAC9B,cAAM,UAAU,KAAK,SAAS,IAAI,EAAE;AACpC,YAAI,CAAC,SAAS;AACZ;AAAA,QACF;AAEA,aAAK,KAAK,EAAE,GAAG,SAAS,MAAM,SAAS,CAAC;AAAA,MAC1C;AAAA,MACA,SAAS,MAAM;AACb,YAAI,CAAC,KAAK,SAAS,IAAI,EAAE,GAAG;AAC1B;AAAA,QACF;AAEA,cAAM,OAAO,IAAI,IAAI,KAAK,QAAQ;AAClC,aAAK,OAAO,EAAE;AACd,aAAK,WAAW;AAChB,aAAK,SAAS;AAAA,MAChB;AAAA,IACF;AAAA,EACF;AAAA,EAEA,KAAK,OAAoB;AACvB,UAAM,OAAO,IAAI,IAAI,KAAK,QAAQ;AAClC,SAAK,IAAI,MAAM,IAAI,KAAK;AACxB,SAAK,WAAW;AAChB,SAAK,SAAS;AAAA,EAChB;AAAA,EAEA,WAAW;AACT,SAAK,YAAY,EAAE,SAAS,KAAK,UAAU,SAAS,KAAK,UAAU,UAAU,EAAE;AAC/E,eAAW,YAAY,KAAK,YAAY;AACtC,eAAS;AAAA,IACX;AAAA,EACF;AACF;","names":[]}

package/dist/esm/hooks/internal/useEngineAccessor.d.ts

@@ -0,0 +1,4 @@
+/** Reads a core store accessor and re-renders when it changes. Accessors return stable references until they change. */
+declare function useEngineAccessor<T>(accessor: () => T): T;
+
+export { useEngineAccessor };

package/dist/esm/hooks/internal/useEngineAccessor.js

@@ -0,0 +1,11 @@
+// src/hooks/internal/useEngineAccessor.ts
+import { subscribeAccessor } from "@novu/js/ui-core";
+import { useCallback, useSyncExternalStore } from "react";
+function useEngineAccessor(accessor) {
+  const subscribe = useCallback((onChange) => subscribeAccessor(accessor, onChange), [accessor]);
+  return useSyncExternalStore(subscribe, accessor, accessor);
+}
+export {
+  useEngineAccessor
+};
+//# sourceMappingURL=useEngineAccessor.js.map

package/dist/esm/hooks/internal/useEngineAccessor.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/hooks/internal/useEngineAccessor.ts"],"sourcesContent":["import { subscribeAccessor } from '@novu/js/ui-core';\nimport { useCallback, useSyncExternalStore } from 'react';\n\n/** Reads a core store accessor and re-renders when it changes. Accessors return stable references until they change. */\nexport function useEngineAccessor<T>(accessor: () => T): T {\n  const subscribe = useCallback((onChange: () => void) => subscribeAccessor(accessor, onChange), [accessor]);\n\n  return useSyncExternalStore(subscribe, accessor, accessor);\n}\n"],"mappings":";AAAA,SAAS,yBAAyB;AAClC,SAAS,aAAa,4BAA4B;AAG3C,SAAS,kBAAqB,UAAsB;AACzD,QAAM,YAAY,YAAY,CAAC,aAAyB,kBAAkB,UAAU,QAAQ,GAAG,CAAC,QAAQ,CAAC;AAEzG,SAAO,qBAAqB,WAAW,UAAU,QAAQ;AAC3D;","names":[]}

package/dist/esm/hooks/internal/useEngineStores.d.ts

@@ -0,0 +1,13 @@
+import * as _novu_js_ui_core from '@novu/js/ui-core';
+import { ResolveStyleArgs } from '@novu/js/ui-core';
+import * as _novu_js_ui from '@novu/js/ui';
+
+declare const useEngineStores: () => _novu_js_ui.EngineStores;
+/** The React twin of the engine's `useStyle`: same appearance keys, same classes, same host overrides. */
+declare const useStyle: () => (args: ResolveStyleArgs) => string;
+declare const useLocalization: () => {
+    t: _novu_js_ui_core.TranslateFunction;
+    locale: string;
+};
+
+export { useEngineStores, useLocalization, useStyle };

package/dist/esm/hooks/internal/useEngineStores.js

@@ -0,0 +1,27 @@
+// src/hooks/internal/useEngineStores.ts
+import { resolveStyle } from "@novu/js/ui-core";
+import { useCallback } from "react";
+import { useNovuUI } from "../../context/NovuUIContext.js";
+import { useEngineAccessor } from "./useEngineAccessor.js";
+var useEngineStores = () => useNovuUI().novuUI.stores;
+var useStyle = () => {
+  const { appearance } = useEngineStores();
+  const elements = useEngineAccessor(appearance.elements);
+  const appearanceKeyToCssInJsClass = useEngineAccessor(appearance.appearanceKeyToCssInJsClass);
+  return useCallback(
+    (args) => resolveStyle(args, { elements, appearanceKeyToCssInJsClass }),
+    [elements, appearanceKeyToCssInJsClass]
+  );
+};
+var useLocalization = () => {
+  const { localization } = useEngineStores();
+  useEngineAccessor(localization.dictionary);
+  const locale = useEngineAccessor(localization.locale);
+  return { t: localization.t, locale };
+};
+export {
+  useEngineStores,
+  useLocalization,
+  useStyle
+};
+//# sourceMappingURL=useEngineStores.js.map

package/dist/esm/hooks/internal/useEngineStores.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/hooks/internal/useEngineStores.ts"],"sourcesContent":["import { type ResolveStyleArgs, resolveStyle } from '@novu/js/ui-core';\nimport { useCallback } from 'react';\nimport { useNovuUI } from '../../context/NovuUIContext';\nimport { useEngineAccessor } from './useEngineAccessor';\n\nexport const useEngineStores = () => useNovuUI().novuUI.stores;\n\n/** The React twin of the engine's `useStyle`: same appearance keys, same classes, same host overrides. */\nexport const useStyle = () => {\n  const { appearance } = useEngineStores();\n  const elements = useEngineAccessor(appearance.elements);\n  const appearanceKeyToCssInJsClass = useEngineAccessor(appearance.appearanceKeyToCssInJsClass);\n\n  return useCallback(\n    (args: ResolveStyleArgs) => resolveStyle(args, { elements, appearanceKeyToCssInJsClass }),\n    [elements, appearanceKeyToCssInJsClass]\n  );\n};\n\nexport const useLocalization = () => {\n  const { localization } = useEngineStores();\n  // subscribe to the dictionary so any string change re-renders, even when the locale stays the same\n  useEngineAccessor(localization.dictionary);\n  const locale = useEngineAccessor(localization.locale);\n\n  return { t: localization.t, locale };\n};\n"],"mappings":";AAAA,SAAgC,oBAAoB;AACpD,SAAS,mBAAmB;AAC5B,SAAS,iBAAiB;AAC1B,SAAS,yBAAyB;AAE3B,IAAM,kBAAkB,MAAM,UAAU,EAAE,OAAO;AAGjD,IAAM,WAAW,MAAM;AAC5B,QAAM,EAAE,WAAW,IAAI,gBAAgB;AACvC,QAAM,WAAW,kBAAkB,WAAW,QAAQ;AACtD,QAAM,8BAA8B,kBAAkB,WAAW,2BAA2B;AAE5F,SAAO;AAAA,IACL,CAAC,SAA2B,aAAa,MAAM,EAAE,UAAU,4BAA4B,CAAC;AAAA,IACxF,CAAC,UAAU,2BAA2B;AAAA,EACxC;AACF;AAEO,IAAM,kBAAkB,MAAM;AACnC,QAAM,EAAE,aAAa,IAAI,gBAAgB;AAEzC,oBAAkB,aAAa,UAAU;AACzC,QAAM,SAAS,kBAAkB,aAAa,MAAM;AAEpD,SAAO,EAAE,GAAG,aAAa,GAAG,OAAO;AACrC;","names":[]}

package/dist/esm/hooks/internal/useIsomorphicLayoutEffect.d.ts

@@ -0,0 +1,5 @@
+import { useLayoutEffect } from 'react';
+
+declare const useIsomorphicLayoutEffect: typeof useLayoutEffect;
+
+export { useIsomorphicLayoutEffect };

package/dist/esm/hooks/internal/useIsomorphicLayoutEffect.js

@@ -0,0 +1,7 @@
+// src/hooks/internal/useIsomorphicLayoutEffect.ts
+import { useEffect, useLayoutEffect } from "react";
+var useIsomorphicLayoutEffect = typeof window !== "undefined" ? useLayoutEffect : useEffect;
+export {
+  useIsomorphicLayoutEffect
+};
+//# sourceMappingURL=useIsomorphicLayoutEffect.js.map

package/dist/esm/hooks/internal/useIsomorphicLayoutEffect.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/hooks/internal/useIsomorphicLayoutEffect.ts"],"sourcesContent":["import { useEffect, useLayoutEffect } from 'react';\n\nexport const useIsomorphicLayoutEffect = typeof window !== 'undefined' ? useLayoutEffect : useEffect;\n"],"mappings":";AAAA,SAAS,WAAW,uBAAuB;AAEpC,IAAM,4BAA4B,OAAO,WAAW,cAAc,kBAAkB;","names":[]}

package/dist/esm/hooks/internal/useNotificationOutlets.d.ts

@@ -0,0 +1,33 @@
+import { NotificationRenderer, AvatarRenderer, SubjectRenderer, BodyRenderer, DefaultActionsRenderer, CustomActionsRenderer, NotificationClickHandler, NotificationActionClickHandler } from '@novu/js/ui';
+import { NotificationsRenderer, AvatarRenderer as AvatarRenderer$1, SubjectRenderer as SubjectRenderer$1, BodyRenderer as BodyRenderer$1, DefaultActionsRenderer as DefaultActionsRenderer$1, CustomActionsRenderer as CustomActionsRenderer$1 } from '../../utils/types.js';
+import '@novu/js';
+import 'react';
+
+type NotificationRenderProps = {
+    onNotificationClick?: NotificationClickHandler;
+    onPrimaryActionClick?: NotificationActionClickHandler;
+    onSecondaryActionClick?: NotificationActionClickHandler;
+    renderNotification?: NotificationsRenderer;
+    renderAvatar?: AvatarRenderer$1;
+    renderSubject?: SubjectRenderer$1;
+    renderBody?: BodyRenderer$1;
+    renderDefaultActions?: DefaultActionsRenderer$1;
+    renderCustomActions?: CustomActionsRenderer$1;
+};
+type NotificationOutlets = {
+    renderNotification: NotificationRenderer;
+} | {
+    renderAvatar?: AvatarRenderer;
+    renderSubject?: SubjectRenderer;
+    renderBody?: BodyRenderer;
+    renderDefaultActions?: DefaultActionsRenderer;
+    renderCustomActions?: CustomActionsRenderer;
+};
+/**
+ * Adapts the notification render props shared by `Inbox`, `Notifications` and `InboxContent` into engine outlets.
+ * `renderNotification` wins over the part renderers, exactly as the engine's prop types demand. Whatever it
+ * renders sees the component's click handlers, so a `NotificationItem` inside it inherits them.
+ */
+declare function useNotificationOutlets(props: NotificationRenderProps): NotificationOutlets;
+
+export { type NotificationOutlets, useNotificationOutlets };

package/dist/esm/hooks/internal/useNotificationOutlets.js

@@ -0,0 +1,32 @@
+// src/hooks/internal/useNotificationOutlets.tsx
+import { useMemo } from "react";
+import { NotificationHandlersProvider } from "../../components/notification-item/context.js";
+import { useOutletRenderer } from "./useOutletRenderer.js";
+import { jsx } from "react/jsx-runtime";
+function useNotificationOutlets(props) {
+  const { onNotificationClick, onPrimaryActionClick, onSecondaryActionClick, renderNotification: renderItem } = props;
+  const handlers = useMemo(
+    () => ({ onNotificationClick, onPrimaryActionClick, onSecondaryActionClick }),
+    [onNotificationClick, onPrimaryActionClick, onSecondaryActionClick]
+  );
+  const renderNotificationWithHandlers = useMemo(
+    () => renderItem ? (notification) => /* @__PURE__ */ jsx(NotificationHandlersProvider, { value: handlers, children: renderItem(notification) }) : void 0,
+    [renderItem, handlers]
+  );
+  const renderNotification = useOutletRenderer(renderNotificationWithHandlers);
+  const renderAvatar = useOutletRenderer(props.renderAvatar);
+  const renderSubject = useOutletRenderer(props.renderSubject);
+  const renderBody = useOutletRenderer(props.renderBody);
+  const renderDefaultActions = useOutletRenderer(props.renderDefaultActions);
+  const renderCustomActions = useOutletRenderer(props.renderCustomActions);
+  return useMemo(() => {
+    if (renderNotification) {
+      return { renderNotification };
+    }
+    return { renderAvatar, renderSubject, renderBody, renderDefaultActions, renderCustomActions };
+  }, [renderNotification, renderAvatar, renderSubject, renderBody, renderDefaultActions, renderCustomActions]);
+}
+export {
+  useNotificationOutlets
+};
+//# sourceMappingURL=useNotificationOutlets.js.map

package/dist/esm/hooks/internal/useNotificationOutlets.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/hooks/internal/useNotificationOutlets.tsx"],"sourcesContent":["import type {\n  AvatarRenderer as JsAvatarRenderer,\n  BodyRenderer as JsBodyRenderer,\n  CustomActionsRenderer as JsCustomActionsRenderer,\n  DefaultActionsRenderer as JsDefaultActionsRenderer,\n  NotificationRenderer as JsNotificationRenderer,\n  SubjectRenderer as JsSubjectRenderer,\n  NotificationActionClickHandler,\n  NotificationClickHandler,\n} from '@novu/js/ui';\nimport React, { useMemo } from 'react';\nimport { NotificationHandlersProvider } from '../../components/notification-item/context';\nimport type {\n  AvatarRenderer,\n  BodyRenderer,\n  CustomActionsRenderer,\n  DefaultActionsRenderer,\n  NotificationsRenderer,\n  SubjectRenderer,\n} from '../../utils/types';\nimport { useOutletRenderer } from './useOutletRenderer';\n\ntype NotificationRenderProps = {\n  onNotificationClick?: NotificationClickHandler;\n  onPrimaryActionClick?: NotificationActionClickHandler;\n  onSecondaryActionClick?: NotificationActionClickHandler;\n  renderNotification?: NotificationsRenderer;\n  renderAvatar?: AvatarRenderer;\n  renderSubject?: SubjectRenderer;\n  renderBody?: BodyRenderer;\n  renderDefaultActions?: DefaultActionsRenderer;\n  renderCustomActions?: CustomActionsRenderer;\n};\n\nexport type NotificationOutlets =\n  | { renderNotification: JsNotificationRenderer }\n  | {\n      renderAvatar?: JsAvatarRenderer;\n      renderSubject?: JsSubjectRenderer;\n      renderBody?: JsBodyRenderer;\n      renderDefaultActions?: JsDefaultActionsRenderer;\n      renderCustomActions?: JsCustomActionsRenderer;\n    };\n\n/**\n * Adapts the notification render props shared by `Inbox`, `Notifications` and `InboxContent` into engine outlets.\n * `renderNotification` wins over the part renderers, exactly as the engine's prop types demand. Whatever it\n * renders sees the component's click handlers, so a `NotificationItem` inside it inherits them.\n */\nexport function useNotificationOutlets(props: NotificationRenderProps): NotificationOutlets {\n  const { onNotificationClick, onPrimaryActionClick, onSecondaryActionClick, renderNotification: renderItem } = props;\n  const handlers = useMemo(\n    () => ({ onNotificationClick, onPrimaryActionClick, onSecondaryActionClick }),\n    [onNotificationClick, onPrimaryActionClick, onSecondaryActionClick]\n  );\n  const renderNotificationWithHandlers = useMemo<NotificationsRenderer | undefined>(\n    () =>\n      renderItem\n        ? (notification) => (\n            <NotificationHandlersProvider value={handlers}>{renderItem(notification)}</NotificationHandlersProvider>\n          )\n        : undefined,\n    [renderItem, handlers]\n  );\n  const renderNotification = useOutletRenderer(renderNotificationWithHandlers);\n  const renderAvatar = useOutletRenderer(props.renderAvatar);\n  const renderSubject = useOutletRenderer(props.renderSubject);\n  const renderBody = useOutletRenderer(props.renderBody);\n  const renderDefaultActions = useOutletRenderer(props.renderDefaultActions);\n  const renderCustomActions = useOutletRenderer(props.renderCustomActions);\n\n  return useMemo<NotificationOutlets>(() => {\n    if (renderNotification) {\n      return { renderNotification };\n    }\n\n    return { renderAvatar, renderSubject, renderBody, renderDefaultActions, renderCustomActions };\n  }, [renderNotification, renderAvatar, renderSubject, renderBody, renderDefaultActions, renderCustomActions]);\n}\n"],"mappings":";AAUA,SAAgB,eAAe;AAC/B,SAAS,oCAAoC;AAS7C,SAAS,yBAAyB;AAuCtB;AAVL,SAAS,uBAAuB,OAAqD;AAC1F,QAAM,EAAE,qBAAqB,sBAAsB,wBAAwB,oBAAoB,WAAW,IAAI;AAC9G,QAAM,WAAW;AAAA,IACf,OAAO,EAAE,qBAAqB,sBAAsB,uBAAuB;AAAA,IAC3E,CAAC,qBAAqB,sBAAsB,sBAAsB;AAAA,EACpE;AACA,QAAM,iCAAiC;AAAA,IACrC,MACE,aACI,CAAC,iBACC,oBAAC,gCAA6B,OAAO,UAAW,qBAAW,YAAY,GAAE,IAE3E;AAAA,IACN,CAAC,YAAY,QAAQ;AAAA,EACvB;AACA,QAAM,qBAAqB,kBAAkB,8BAA8B;AAC3E,QAAM,eAAe,kBAAkB,MAAM,YAAY;AACzD,QAAM,gBAAgB,kBAAkB,MAAM,aAAa;AAC3D,QAAM,aAAa,kBAAkB,MAAM,UAAU;AACrD,QAAM,uBAAuB,kBAAkB,MAAM,oBAAoB;AACzE,QAAM,sBAAsB,kBAAkB,MAAM,mBAAmB;AAEvE,SAAO,QAA6B,MAAM;AACxC,QAAI,oBAAoB;AACtB,aAAO,EAAE,mBAAmB;AAAA,IAC9B;AAEA,WAAO,EAAE,cAAc,eAAe,YAAY,sBAAsB,oBAAoB;AAAA,EAC9F,GAAG,CAAC,oBAAoB,cAAc,eAAe,YAAY,sBAAsB,mBAAmB,CAAC;AAC7G;","names":[]}

package/dist/esm/hooks/internal/useOutletRenderer.d.ts

@@ -0,0 +1,14 @@
+import { OutletHandle } from '@novu/js/ui';
+import { ReactNode } from 'react';
+
+type OutletRenderer<TArgs extends unknown[]> = (el: HTMLDivElement, ...args: TArgs) => OutletHandle<TArgs>;
+/**
+ * Turns a React render prop into the renderer the engine expects.
+ *
+ * The engine only ever sees one function per outlet kind, so a new inline arrow on the host side never remounts
+ * anything: the latest render prop is kept in a ref and called during the outlet's own render. A change of the
+ * render prop invalidates the outlet store after commit, so outlets that rendered earlier in the same pass catch up.
+ */
+declare function useOutletRenderer<TArgs extends unknown[]>(renderProp: ((...args: TArgs) => ReactNode) | undefined): OutletRenderer<TArgs> | undefined;
+
+export { type OutletRenderer, useOutletRenderer };

package/dist/esm/hooks/internal/useOutletRenderer.js

@@ -0,0 +1,25 @@
+// src/hooks/internal/useOutletRenderer.ts
+import { useMemo } from "react";
+import { useOutlets } from "../../context/NovuUIContext.js";
+import { useDataRef } from "./useDataRef.js";
+import { useIsomorphicLayoutEffect } from "./useIsomorphicLayoutEffect.js";
+function useOutletRenderer(renderProp) {
+  const outlets = useOutlets();
+  const latest = useDataRef(renderProp);
+  const hasRenderer = !!renderProp;
+  useIsomorphicLayoutEffect(() => {
+    if (hasRenderer) {
+      outlets.invalidate();
+    }
+  }, [outlets, hasRenderer, renderProp]);
+  return useMemo(() => {
+    if (!hasRenderer) {
+      return void 0;
+    }
+    return (el, ...args) => outlets.mount(el, (...renderArgs) => latest.current?.(...renderArgs), args);
+  }, [latest, outlets, hasRenderer]);
+}
+export {
+  useOutletRenderer
+};
+//# sourceMappingURL=useOutletRenderer.js.map