@kontextso/sdk-react-native 2.0.2 → 2.1.0

package/dist/index.js

@@ -36,9 +36,8 @@ __export(index_exports, {
 module.exports = __toCommonJS(index_exports);
 
 // src/formats/Format.tsx
-var import_react = require("react");
+var import_react2 = require("react");
 var import_sdk_react = require("@kontextso/sdk-react");
-var import_react_native_webview = require("react-native-webview");
 var import_react_native = require("react-native");
 
 // ../sdk-common/dist/index.mjs
@@ -59,8 +58,44 @@ function handleIframeMessage(handler, opts) {
   };
 }
 
-// src/formats/Format.tsx
+// src/frame-webview.tsx
+var import_react = require("react");
+var import_react_native_webview = require("react-native-webview");
 var import_jsx_runtime = require("react/jsx-runtime");
+var FrameWebView = (0, import_react.forwardRef)(
+  ({ iframeUrl, onMessage, style, onError, onLoad }, forwardedRef) => {
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      import_react_native_webview.WebView,
+      {
+        ref: forwardedRef,
+        source: {
+          uri: iframeUrl
+        },
+        onMessage,
+        style,
+        allowsInlineMediaPlayback: true,
+        mediaPlaybackRequiresUserAction: false,
+        javaScriptEnabled: true,
+        domStorageEnabled: true,
+        allowsFullscreenVideo: false,
+        injectedJavaScript: `
+          window.addEventListener("message", function(event) {
+            if (window.ReactNativeWebView && event.data) {
+              // ReactNativeWebView.postMessage only supports string data
+              window.ReactNativeWebView.postMessage(JSON.stringify(event.data));
+            }
+          }, false);
+      `,
+        onError,
+        onLoad
+      }
+    );
+  }
+);
+var frame_webview_default = FrameWebView;
+
+// src/formats/Format.tsx
+var import_jsx_runtime2 = require("react/jsx-runtime");
 var sendMessage = (webViewRef, type, code, data) => {
   const message = makeIframeMessage(type, {
     data,
@@ -73,16 +108,22 @@ var sendMessage = (webViewRef, type, code, data) => {
   `);
 };
 var Format = ({ code, messageId, wrapper, ...otherParams }) => {
-  const context = (0, import_react.useContext)(import_sdk_react.AdsContext);
+  const context = (0, import_react2.useContext)(import_sdk_react.AdsContext);
   const bid = (0, import_sdk_react.useBid)({ code, messageId });
-  const [height, setHeight] = (0, import_react.useState)(0);
-  const iframeUrl = (0, import_sdk_react.useIframeUrl)(context, bid, code, messageId);
-  const [showIframe, setShowIframe] = (0, import_react.useState)(false);
-  const [iframeLoaded, setIframeLoaded] = (0, import_react.useState)(false);
-  const [containerStyles, setContainerStyles] = (0, import_react.useState)({});
-  const [iframeStyles, setIframeStyles] = (0, import_react.useState)({});
-  const containerRef = (0, import_react.useRef)(null);
-  const webViewRef = (0, import_react.useRef)(null);
+  const [height, setHeight] = (0, import_react2.useState)(0);
+  const iframeUrl = (0, import_sdk_react.useIframeUrl)(context, bid, code, messageId, "sdk-react-native", otherParams.theme);
+  const modalUrl = iframeUrl.replace("/api/frame/", "/api/modal/");
+  const [showIframe, setShowIframe] = (0, import_react2.useState)(false);
+  const [iframeLoaded, setIframeLoaded] = (0, import_react2.useState)(false);
+  const [modalOpen, setModalOpen] = (0, import_react2.useState)(false);
+  const [modalShown, setModalShown] = (0, import_react2.useState)(false);
+  const [modalLoaded, setModalLoaded] = (0, import_react2.useState)(false);
+  const [containerStyles, setContainerStyles] = (0, import_react2.useState)({});
+  const [iframeStyles, setIframeStyles] = (0, import_react2.useState)({});
+  const containerRef = (0, import_react2.useRef)(null);
+  const webViewRef = (0, import_react2.useRef)(null);
+  const modalWebViewRef = (0, import_react2.useRef)(null);
+  const modalInitTimeoutRef = (0, import_react2.useRef)(null);
   const { height: windowHeight, width: windowWidth } = (0, import_react_native.useWindowDimensions)();
   const reset = () => {
     setHeight(0);
@@ -90,9 +131,19 @@ var Format = ({ code, messageId, wrapper, ...otherParams }) => {
     setContainerStyles({});
     setIframeStyles({});
     setIframeLoaded(false);
+    resetModal();
     context?.resetAll();
     context?.captureError(new Error("Processing iframe error"));
   };
+  const resetModal = () => {
+    if (modalInitTimeoutRef.current) {
+      clearTimeout(modalInitTimeoutRef.current);
+      modalInitTimeoutRef.current = null;
+    }
+    setModalOpen(false);
+    setModalLoaded(false);
+    setModalShown(false);
+  };
   const debug = (name, data = {}) => {
     context?.onDebugEventInternal?.(name, {
       code,
@@ -108,6 +159,19 @@ var Format = ({ code, messageId, wrapper, ...otherParams }) => {
       ...data
     });
   };
+  const debugModal = (name, data = {}) => {
+    context?.onDebugEventInternal?.(name, {
+      code,
+      messageId,
+      otherParams,
+      bid,
+      modalUrl,
+      modalOpen,
+      modalShown,
+      modalLoaded,
+      ...data
+    });
+  };
   debug("format-update-state");
   const onMessage = (event) => {
     try {
@@ -155,6 +219,10 @@ var Format = ({ code, messageId, wrapper, ...otherParams }) => {
               setContainerStyles(message.data.containerStyles);
               setIframeStyles(message.data.iframeStyles);
               break;
+            case "open-component-iframe":
+              setModalOpen(true);
+              modalInitTimeoutRef.current = setTimeout(resetModal, message.data.timeout ?? 5e3);
+              break;
           }
         },
         {
@@ -170,8 +238,55 @@ var Format = ({ code, messageId, wrapper, ...otherParams }) => {
       reset();
     }
   };
+  const onModalMessage = (event) => {
+    try {
+      const data = JSON.parse(event.nativeEvent.data);
+      debugModal("modal-iframe-message", {
+        message: data
+      });
+      const messageHandler = handleIframeMessage(
+        (message) => {
+          switch (message.type) {
+            case "close-component-iframe":
+              resetModal();
+              break;
+            case "init-component-iframe":
+              if (modalInitTimeoutRef.current) {
+                clearTimeout(modalInitTimeoutRef.current);
+                modalInitTimeoutRef.current = null;
+              }
+              setModalShown(true);
+              break;
+            case "error-component-iframe":
+            case "error-iframe":
+              resetModal();
+              break;
+            case "click-iframe":
+              if (message.data.url) {
+                import_react_native.Linking.openURL(`${context?.adServerUrl}${message.data.url}`).catch(
+                  (err) => console.error("error opening url", err)
+                );
+              }
+              context?.onAdClickInternal(message.data);
+              break;
+          }
+        },
+        {
+          code,
+          component: "modal"
+        }
+      );
+      messageHandler({ data });
+    } catch (e) {
+      debugModal("modal-iframe-message-error", {
+        error: e
+      });
+      console.error("error parsing message from webview", e);
+      resetModal();
+    }
+  };
   const paramsString = (0, import_sdk_react.convertParamsToString)(otherParams);
-  (0, import_react.useEffect)(() => {
+  (0, import_react2.useEffect)(() => {
     if (!iframeLoaded || !context?.adServerUrl || !bid || !webViewRef.current) {
       return;
     }
@@ -194,7 +309,7 @@ var Format = ({ code, messageId, wrapper, ...otherParams }) => {
       });
     });
   };
-  (0, import_react.useEffect)(() => {
+  (0, import_react2.useEffect)(() => {
     const interval = setInterval(() => {
       checkIfInViewport();
     }, 250);
@@ -215,57 +330,71 @@ var Format = ({ code, messageId, wrapper, ...otherParams }) => {
     }
     return 0;
   };
-  const content = /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_native.View, { style: containerStyles, ref: containerRef, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-    import_react_native_webview.WebView,
-    {
-      ref: webViewRef,
-      source: {
-        uri: iframeUrl
-      },
-      onMessage,
-      style: {
-        height: getHeight(),
-        width: getWidth(),
-        ...iframeStyles
-      },
-      allowsInlineMediaPlayback: true,
-      mediaPlaybackRequiresUserAction: false,
-      javaScriptEnabled: true,
-      domStorageEnabled: true,
-      allowsFullscreenVideo: false,
-      injectedJavaScript: `
-          function sendToLog(data) {
-            window.ReactNativeWebView.postMessage(JSON.stringify({
-              type: 'log-iframe',
-              data: data
-            }));
-          }
-
-          window.addEventListener("message", function(event) {
-            if (window.ReactNativeWebView && event.data) {
-              // ReactNativeWebView.postMessage only supports string data
-              window.ReactNativeWebView.postMessage(JSON.stringify(event.data));
+  const content = /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_jsx_runtime2.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_react_native.Modal, { visible: modalOpen, transparent: true, onRequestClose: resetModal, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+      import_react_native.View,
+      {
+        style: {
+          flex: 1,
+          // Don't show the modal until the modal page is loaded and sends 'init-component-iframe' message back to SDK
+          ...modalShown ? { opacity: 1, pointerEvents: "auto" } : { opacity: 0, pointerEvents: "none" }
+        },
+        children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+          frame_webview_default,
+          {
+            ref: modalWebViewRef,
+            iframeUrl: modalUrl,
+            onMessage: onModalMessage,
+            style: {
+              backgroundColor: "transparent",
+              height: "100%",
+              width: "100%",
+              borderWidth: 0
+            },
+            onError: () => {
+              debug("modal-error");
+              resetModal();
+            },
+            onLoad: () => {
+              debug("modal-load");
+              setModalLoaded(true);
             }
-          }, false);
-      `,
-      onError: () => {
-        debug("iframe-error");
-        reset();
-      },
-      onLoad: () => {
-        debug("iframe-load");
+          }
+        )
       }
-    }
-  ) });
+    ) }),
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_react_native.View, { style: containerStyles, ref: containerRef, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+      frame_webview_default,
+      {
+        ref: webViewRef,
+        iframeUrl,
+        onMessage,
+        style: {
+          height: getHeight(),
+          width: getWidth(),
+          background: "transparent",
+          borderWidth: 0,
+          ...iframeStyles
+        },
+        onError: () => {
+          debug("iframe-error");
+          reset();
+        },
+        onLoad: () => {
+          debug("iframe-load");
+        }
+      }
+    ) })
+  ] });
   return wrapper ? wrapper(content) : content;
 };
-var FormatWithErrorBoundary = (props) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_sdk_react.ErrorBoundary, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Format, { ...props }) });
+var FormatWithErrorBoundary = (props) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_sdk_react.ErrorBoundary, { children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Format, { ...props }) });
 var Format_default = FormatWithErrorBoundary;
 
 // src/formats/InlineAd.tsx
-var import_jsx_runtime2 = require("react/jsx-runtime");
+var import_jsx_runtime3 = require("react/jsx-runtime");
 var InlineAd = ({ code, messageId, wrapper, ...props }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Format_default, { code, messageId, wrapper, ...props });
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Format_default, { code, messageId, wrapper, ...props });
 };
 var InlineAd_default = InlineAd;
 
@@ -273,7 +402,7 @@ var InlineAd_default = InlineAd;
 var import_sdk_react2 = require("@kontextso/sdk-react");
 var import_react_native2 = require("react-native");
 var import_react_native_device_info = __toESM(require("react-native-device-info"));
-var import_jsx_runtime3 = require("react/jsx-runtime");
+var import_jsx_runtime4 = require("react/jsx-runtime");
 ErrorUtils.setGlobalHandler((error, isFatal) => {
   if (!isFatal) {
     import_sdk_react2.log.warn(error);
@@ -310,7 +439,7 @@ var getDevice = () => {
   return {};
 };
 var AdsProvider = (props) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_sdk_react2.AdsProviderInternal, { ...props, getDevice });
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_sdk_react2.AdsProviderInternal, { ...props, getDevice });
 };
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {

package/dist/index.mjs

@@ -7,8 +7,7 @@ import {
   useBid,
   useIframeUrl
 } from "@kontextso/sdk-react";
-import { WebView } from "react-native-webview";
-import { Linking, View, useWindowDimensions } from "react-native";
+import { Linking, Modal, View, useWindowDimensions } from "react-native";
 
 // ../sdk-common/dist/index.mjs
 function makeIframeMessage(type, opts) {
@@ -28,8 +27,44 @@ function handleIframeMessage(handler, opts) {
   };
 }
 
-// src/formats/Format.tsx
+// src/frame-webview.tsx
+import { forwardRef } from "react";
+import { WebView } from "react-native-webview";
 import { jsx } from "react/jsx-runtime";
+var FrameWebView = forwardRef(
+  ({ iframeUrl, onMessage, style, onError, onLoad }, forwardedRef) => {
+    return /* @__PURE__ */ jsx(
+      WebView,
+      {
+        ref: forwardedRef,
+        source: {
+          uri: iframeUrl
+        },
+        onMessage,
+        style,
+        allowsInlineMediaPlayback: true,
+        mediaPlaybackRequiresUserAction: false,
+        javaScriptEnabled: true,
+        domStorageEnabled: true,
+        allowsFullscreenVideo: false,
+        injectedJavaScript: `
+          window.addEventListener("message", function(event) {
+            if (window.ReactNativeWebView && event.data) {
+              // ReactNativeWebView.postMessage only supports string data
+              window.ReactNativeWebView.postMessage(JSON.stringify(event.data));
+            }
+          }, false);
+      `,
+        onError,
+        onLoad
+      }
+    );
+  }
+);
+var frame_webview_default = FrameWebView;
+
+// src/formats/Format.tsx
+import { Fragment, jsx as jsx2, jsxs } from "react/jsx-runtime";
 var sendMessage = (webViewRef, type, code, data) => {
   const message = makeIframeMessage(type, {
     data,
@@ -45,13 +80,19 @@ var Format = ({ code, messageId, wrapper, ...otherParams }) => {
   const context = useContext(AdsContext);
   const bid = useBid({ code, messageId });
   const [height, setHeight] = useState(0);
-  const iframeUrl = useIframeUrl(context, bid, code, messageId);
+  const iframeUrl = useIframeUrl(context, bid, code, messageId, "sdk-react-native", otherParams.theme);
+  const modalUrl = iframeUrl.replace("/api/frame/", "/api/modal/");
   const [showIframe, setShowIframe] = useState(false);
   const [iframeLoaded, setIframeLoaded] = useState(false);
+  const [modalOpen, setModalOpen] = useState(false);
+  const [modalShown, setModalShown] = useState(false);
+  const [modalLoaded, setModalLoaded] = useState(false);
   const [containerStyles, setContainerStyles] = useState({});
   const [iframeStyles, setIframeStyles] = useState({});
   const containerRef = useRef(null);
   const webViewRef = useRef(null);
+  const modalWebViewRef = useRef(null);
+  const modalInitTimeoutRef = useRef(null);
   const { height: windowHeight, width: windowWidth } = useWindowDimensions();
   const reset = () => {
     setHeight(0);
@@ -59,9 +100,19 @@ var Format = ({ code, messageId, wrapper, ...otherParams }) => {
     setContainerStyles({});
     setIframeStyles({});
     setIframeLoaded(false);
+    resetModal();
     context?.resetAll();
     context?.captureError(new Error("Processing iframe error"));
   };
+  const resetModal = () => {
+    if (modalInitTimeoutRef.current) {
+      clearTimeout(modalInitTimeoutRef.current);
+      modalInitTimeoutRef.current = null;
+    }
+    setModalOpen(false);
+    setModalLoaded(false);
+    setModalShown(false);
+  };
   const debug = (name, data = {}) => {
     context?.onDebugEventInternal?.(name, {
       code,
@@ -77,6 +128,19 @@ var Format = ({ code, messageId, wrapper, ...otherParams }) => {
       ...data
     });
   };
+  const debugModal = (name, data = {}) => {
+    context?.onDebugEventInternal?.(name, {
+      code,
+      messageId,
+      otherParams,
+      bid,
+      modalUrl,
+      modalOpen,
+      modalShown,
+      modalLoaded,
+      ...data
+    });
+  };
   debug("format-update-state");
   const onMessage = (event) => {
     try {
@@ -124,6 +188,10 @@ var Format = ({ code, messageId, wrapper, ...otherParams }) => {
               setContainerStyles(message.data.containerStyles);
               setIframeStyles(message.data.iframeStyles);
               break;
+            case "open-component-iframe":
+              setModalOpen(true);
+              modalInitTimeoutRef.current = setTimeout(resetModal, message.data.timeout ?? 5e3);
+              break;
           }
         },
         {
@@ -139,6 +207,53 @@ var Format = ({ code, messageId, wrapper, ...otherParams }) => {
       reset();
     }
   };
+  const onModalMessage = (event) => {
+    try {
+      const data = JSON.parse(event.nativeEvent.data);
+      debugModal("modal-iframe-message", {
+        message: data
+      });
+      const messageHandler = handleIframeMessage(
+        (message) => {
+          switch (message.type) {
+            case "close-component-iframe":
+              resetModal();
+              break;
+            case "init-component-iframe":
+              if (modalInitTimeoutRef.current) {
+                clearTimeout(modalInitTimeoutRef.current);
+                modalInitTimeoutRef.current = null;
+              }
+              setModalShown(true);
+              break;
+            case "error-component-iframe":
+            case "error-iframe":
+              resetModal();
+              break;
+            case "click-iframe":
+              if (message.data.url) {
+                Linking.openURL(`${context?.adServerUrl}${message.data.url}`).catch(
+                  (err) => console.error("error opening url", err)
+                );
+              }
+              context?.onAdClickInternal(message.data);
+              break;
+          }
+        },
+        {
+          code,
+          component: "modal"
+        }
+      );
+      messageHandler({ data });
+    } catch (e) {
+      debugModal("modal-iframe-message-error", {
+        error: e
+      });
+      console.error("error parsing message from webview", e);
+      resetModal();
+    }
+  };
   const paramsString = convertParamsToString(otherParams);
   useEffect(() => {
     if (!iframeLoaded || !context?.adServerUrl || !bid || !webViewRef.current) {
@@ -184,57 +299,71 @@ var Format = ({ code, messageId, wrapper, ...otherParams }) => {
     }
     return 0;
   };
-  const content = /* @__PURE__ */ jsx(View, { style: containerStyles, ref: containerRef, children: /* @__PURE__ */ jsx(
-    WebView,
-    {
-      ref: webViewRef,
-      source: {
-        uri: iframeUrl
-      },
-      onMessage,
-      style: {
-        height: getHeight(),
-        width: getWidth(),
-        ...iframeStyles
-      },
-      allowsInlineMediaPlayback: true,
-      mediaPlaybackRequiresUserAction: false,
-      javaScriptEnabled: true,
-      domStorageEnabled: true,
-      allowsFullscreenVideo: false,
-      injectedJavaScript: `
-          function sendToLog(data) {
-            window.ReactNativeWebView.postMessage(JSON.stringify({
-              type: 'log-iframe',
-              data: data
-            }));
-          }
-
-          window.addEventListener("message", function(event) {
-            if (window.ReactNativeWebView && event.data) {
-              // ReactNativeWebView.postMessage only supports string data
-              window.ReactNativeWebView.postMessage(JSON.stringify(event.data));
+  const content = /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx2(Modal, { visible: modalOpen, transparent: true, onRequestClose: resetModal, children: /* @__PURE__ */ jsx2(
+      View,
+      {
+        style: {
+          flex: 1,
+          // Don't show the modal until the modal page is loaded and sends 'init-component-iframe' message back to SDK
+          ...modalShown ? { opacity: 1, pointerEvents: "auto" } : { opacity: 0, pointerEvents: "none" }
+        },
+        children: /* @__PURE__ */ jsx2(
+          frame_webview_default,
+          {
+            ref: modalWebViewRef,
+            iframeUrl: modalUrl,
+            onMessage: onModalMessage,
+            style: {
+              backgroundColor: "transparent",
+              height: "100%",
+              width: "100%",
+              borderWidth: 0
+            },
+            onError: () => {
+              debug("modal-error");
+              resetModal();
+            },
+            onLoad: () => {
+              debug("modal-load");
+              setModalLoaded(true);
             }
-          }, false);
-      `,
-      onError: () => {
-        debug("iframe-error");
-        reset();
-      },
-      onLoad: () => {
-        debug("iframe-load");
+          }
+        )
       }
-    }
-  ) });
+    ) }),
+    /* @__PURE__ */ jsx2(View, { style: containerStyles, ref: containerRef, children: /* @__PURE__ */ jsx2(
+      frame_webview_default,
+      {
+        ref: webViewRef,
+        iframeUrl,
+        onMessage,
+        style: {
+          height: getHeight(),
+          width: getWidth(),
+          background: "transparent",
+          borderWidth: 0,
+          ...iframeStyles
+        },
+        onError: () => {
+          debug("iframe-error");
+          reset();
+        },
+        onLoad: () => {
+          debug("iframe-load");
+        }
+      }
+    ) })
+  ] });
   return wrapper ? wrapper(content) : content;
 };
-var FormatWithErrorBoundary = (props) => /* @__PURE__ */ jsx(ErrorBoundary, { children: /* @__PURE__ */ jsx(Format, { ...props }) });
+var FormatWithErrorBoundary = (props) => /* @__PURE__ */ jsx2(ErrorBoundary, { children: /* @__PURE__ */ jsx2(Format, { ...props }) });
 var Format_default = FormatWithErrorBoundary;
 
 // src/formats/InlineAd.tsx
-import { jsx as jsx2 } from "react/jsx-runtime";
+import { jsx as jsx3 } from "react/jsx-runtime";
 var InlineAd = ({ code, messageId, wrapper, ...props }) => {
-  return /* @__PURE__ */ jsx2(Format_default, { code, messageId, wrapper, ...props });
+  return /* @__PURE__ */ jsx3(Format_default, { code, messageId, wrapper, ...props });
 };
 var InlineAd_default = InlineAd;
 
@@ -242,7 +371,7 @@ var InlineAd_default = InlineAd;
 import { AdsProviderInternal, log } from "@kontextso/sdk-react";
 import { Platform } from "react-native";
 import DeviceInfo from "react-native-device-info";
-import { jsx as jsx3 } from "react/jsx-runtime";
+import { jsx as jsx4 } from "react/jsx-runtime";
 ErrorUtils.setGlobalHandler((error, isFatal) => {
   if (!isFatal) {
     log.warn(error);
@@ -279,7 +408,7 @@ var getDevice = () => {
   return {};
 };
 var AdsProvider = (props) => {
-  return /* @__PURE__ */ jsx3(AdsProviderInternal, { ...props, getDevice });
+  return /* @__PURE__ */ jsx4(AdsProviderInternal, { ...props, getDevice });
 };
 export {
   AdsProvider,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kontextso/sdk-react-native",
-  "version": "2.0.2",
+  "version": "2.1.0",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",
   "types": "./dist/index.d.ts",
@@ -52,7 +52,7 @@
     "react-native-webview": "^13.15.0"
   },
   "dependencies": {
-    "@kontextso/sdk-react": "^1.2.3"
+    "@kontextso/sdk-react": "^1.2.4"
   },
   "files": [
     "dist/*",