@methodfi/opal-react 0.0.1 → 1.1.0

package/dist/index.js

@@ -1,478 +1,22 @@
-'use strict';
-
-var require$$0 = require('react');
-
-var jsxRuntime = {exports: {}};
-
-var reactJsxRuntime_production = {};
-
-/**
- * @license React
- * react-jsx-runtime.production.js
- *
- * Copyright (c) Meta Platforms, Inc. and affiliates.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- */
-
-var hasRequiredReactJsxRuntime_production;
-
-function requireReactJsxRuntime_production () {
-	if (hasRequiredReactJsxRuntime_production) return reactJsxRuntime_production;
-	hasRequiredReactJsxRuntime_production = 1;
-	var REACT_ELEMENT_TYPE = Symbol.for("react.transitional.element"),
-	  REACT_FRAGMENT_TYPE = Symbol.for("react.fragment");
-	function jsxProd(type, config, maybeKey) {
-	  var key = null;
-	  void 0 !== maybeKey && (key = "" + maybeKey);
-	  void 0 !== config.key && (key = "" + config.key);
-	  if ("key" in config) {
-	    maybeKey = {};
-	    for (var propName in config)
-	      "key" !== propName && (maybeKey[propName] = config[propName]);
-	  } else maybeKey = config;
-	  config = maybeKey.ref;
-	  return {
-	    $$typeof: REACT_ELEMENT_TYPE,
-	    type: type,
-	    key: key,
-	    ref: void 0 !== config ? config : null,
-	    props: maybeKey
-	  };
-	}
-	reactJsxRuntime_production.Fragment = REACT_FRAGMENT_TYPE;
-	reactJsxRuntime_production.jsx = jsxProd;
-	reactJsxRuntime_production.jsxs = jsxProd;
-	return reactJsxRuntime_production;
-}
-
-var reactJsxRuntime_development = {};
-
-/**
- * @license React
- * react-jsx-runtime.development.js
- *
- * Copyright (c) Meta Platforms, Inc. and affiliates.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- */
-
-var hasRequiredReactJsxRuntime_development;
-
-function requireReactJsxRuntime_development () {
-	if (hasRequiredReactJsxRuntime_development) return reactJsxRuntime_development;
-	hasRequiredReactJsxRuntime_development = 1;
-	"production" !== process.env.NODE_ENV &&
-	  (function () {
-	    function getComponentNameFromType(type) {
-	      if (null == type) return null;
-	      if ("function" === typeof type)
-	        return type.$$typeof === REACT_CLIENT_REFERENCE
-	          ? null
-	          : type.displayName || type.name || null;
-	      if ("string" === typeof type) return type;
-	      switch (type) {
-	        case REACT_FRAGMENT_TYPE:
-	          return "Fragment";
-	        case REACT_PROFILER_TYPE:
-	          return "Profiler";
-	        case REACT_STRICT_MODE_TYPE:
-	          return "StrictMode";
-	        case REACT_SUSPENSE_TYPE:
-	          return "Suspense";
-	        case REACT_SUSPENSE_LIST_TYPE:
-	          return "SuspenseList";
-	        case REACT_ACTIVITY_TYPE:
-	          return "Activity";
-	      }
-	      if ("object" === typeof type)
-	        switch (
-	          ("number" === typeof type.tag &&
-	            console.error(
-	              "Received an unexpected object in getComponentNameFromType(). This is likely a bug in React. Please file an issue."
-	            ),
-	          type.$$typeof)
-	        ) {
-	          case REACT_PORTAL_TYPE:
-	            return "Portal";
-	          case REACT_CONTEXT_TYPE:
-	            return (type.displayName || "Context") + ".Provider";
-	          case REACT_CONSUMER_TYPE:
-	            return (type._context.displayName || "Context") + ".Consumer";
-	          case REACT_FORWARD_REF_TYPE:
-	            var innerType = type.render;
-	            type = type.displayName;
-	            type ||
-	              ((type = innerType.displayName || innerType.name || ""),
-	              (type = "" !== type ? "ForwardRef(" + type + ")" : "ForwardRef"));
-	            return type;
-	          case REACT_MEMO_TYPE:
-	            return (
-	              (innerType = type.displayName || null),
-	              null !== innerType
-	                ? innerType
-	                : getComponentNameFromType(type.type) || "Memo"
-	            );
-	          case REACT_LAZY_TYPE:
-	            innerType = type._payload;
-	            type = type._init;
-	            try {
-	              return getComponentNameFromType(type(innerType));
-	            } catch (x) {}
-	        }
-	      return null;
-	    }
-	    function testStringCoercion(value) {
-	      return "" + value;
-	    }
-	    function checkKeyStringCoercion(value) {
-	      try {
-	        testStringCoercion(value);
-	        var JSCompiler_inline_result = !1;
-	      } catch (e) {
-	        JSCompiler_inline_result = true;
-	      }
-	      if (JSCompiler_inline_result) {
-	        JSCompiler_inline_result = console;
-	        var JSCompiler_temp_const = JSCompiler_inline_result.error;
-	        var JSCompiler_inline_result$jscomp$0 =
-	          ("function" === typeof Symbol &&
-	            Symbol.toStringTag &&
-	            value[Symbol.toStringTag]) ||
-	          value.constructor.name ||
-	          "Object";
-	        JSCompiler_temp_const.call(
-	          JSCompiler_inline_result,
-	          "The provided key is an unsupported type %s. This value must be coerced to a string before using it here.",
-	          JSCompiler_inline_result$jscomp$0
-	        );
-	        return testStringCoercion(value);
-	      }
-	    }
-	    function getTaskName(type) {
-	      if (type === REACT_FRAGMENT_TYPE) return "<>";
-	      if (
-	        "object" === typeof type &&
-	        null !== type &&
-	        type.$$typeof === REACT_LAZY_TYPE
-	      )
-	        return "<...>";
-	      try {
-	        var name = getComponentNameFromType(type);
-	        return name ? "<" + name + ">" : "<...>";
-	      } catch (x) {
-	        return "<...>";
-	      }
-	    }
-	    function getOwner() {
-	      var dispatcher = ReactSharedInternals.A;
-	      return null === dispatcher ? null : dispatcher.getOwner();
-	    }
-	    function UnknownOwner() {
-	      return Error("react-stack-top-frame");
-	    }
-	    function hasValidKey(config) {
-	      if (hasOwnProperty.call(config, "key")) {
-	        var getter = Object.getOwnPropertyDescriptor(config, "key").get;
-	        if (getter && getter.isReactWarning) return false;
-	      }
-	      return void 0 !== config.key;
-	    }
-	    function defineKeyPropWarningGetter(props, displayName) {
-	      function warnAboutAccessingKey() {
-	        specialPropKeyWarningShown ||
-	          ((specialPropKeyWarningShown = true),
-	          console.error(
-	            "%s: `key` is not a prop. Trying to access it will result in `undefined` being returned. If you need to access the same value within the child component, you should pass it as a different prop. (https://react.dev/link/special-props)",
-	            displayName
-	          ));
-	      }
-	      warnAboutAccessingKey.isReactWarning = true;
-	      Object.defineProperty(props, "key", {
-	        get: warnAboutAccessingKey,
-	        configurable: true
-	      });
-	    }
-	    function elementRefGetterWithDeprecationWarning() {
-	      var componentName = getComponentNameFromType(this.type);
-	      didWarnAboutElementRef[componentName] ||
-	        ((didWarnAboutElementRef[componentName] = true),
-	        console.error(
-	          "Accessing element.ref was removed in React 19. ref is now a regular prop. It will be removed from the JSX Element type in a future release."
-	        ));
-	      componentName = this.props.ref;
-	      return void 0 !== componentName ? componentName : null;
-	    }
-	    function ReactElement(
-	      type,
-	      key,
-	      self,
-	      source,
-	      owner,
-	      props,
-	      debugStack,
-	      debugTask
-	    ) {
-	      self = props.ref;
-	      type = {
-	        $$typeof: REACT_ELEMENT_TYPE,
-	        type: type,
-	        key: key,
-	        props: props,
-	        _owner: owner
-	      };
-	      null !== (void 0 !== self ? self : null)
-	        ? Object.defineProperty(type, "ref", {
-	            enumerable: false,
-	            get: elementRefGetterWithDeprecationWarning
-	          })
-	        : Object.defineProperty(type, "ref", { enumerable: false, value: null });
-	      type._store = {};
-	      Object.defineProperty(type._store, "validated", {
-	        configurable: false,
-	        enumerable: false,
-	        writable: true,
-	        value: 0
-	      });
-	      Object.defineProperty(type, "_debugInfo", {
-	        configurable: false,
-	        enumerable: false,
-	        writable: true,
-	        value: null
-	      });
-	      Object.defineProperty(type, "_debugStack", {
-	        configurable: false,
-	        enumerable: false,
-	        writable: true,
-	        value: debugStack
-	      });
-	      Object.defineProperty(type, "_debugTask", {
-	        configurable: false,
-	        enumerable: false,
-	        writable: true,
-	        value: debugTask
-	      });
-	      Object.freeze && (Object.freeze(type.props), Object.freeze(type));
-	      return type;
-	    }
-	    function jsxDEVImpl(
-	      type,
-	      config,
-	      maybeKey,
-	      isStaticChildren,
-	      source,
-	      self,
-	      debugStack,
-	      debugTask
-	    ) {
-	      var children = config.children;
-	      if (void 0 !== children)
-	        if (isStaticChildren)
-	          if (isArrayImpl(children)) {
-	            for (
-	              isStaticChildren = 0;
-	              isStaticChildren < children.length;
-	              isStaticChildren++
-	            )
-	              validateChildKeys(children[isStaticChildren]);
-	            Object.freeze && Object.freeze(children);
-	          } else
-	            console.error(
-	              "React.jsx: Static children should always be an array. You are likely explicitly calling React.jsxs or React.jsxDEV. Use the Babel transform instead."
-	            );
-	        else validateChildKeys(children);
-	      if (hasOwnProperty.call(config, "key")) {
-	        children = getComponentNameFromType(type);
-	        var keys = Object.keys(config).filter(function (k) {
-	          return "key" !== k;
-	        });
-	        isStaticChildren =
-	          0 < keys.length
-	            ? "{key: someKey, " + keys.join(": ..., ") + ": ...}"
-	            : "{key: someKey}";
-	        didWarnAboutKeySpread[children + isStaticChildren] ||
-	          ((keys =
-	            0 < keys.length ? "{" + keys.join(": ..., ") + ": ...}" : "{}"),
-	          console.error(
-	            'A props object containing a "key" prop is being spread into JSX:\n  let props = %s;\n  <%s {...props} />\nReact keys must be passed directly to JSX without using spread:\n  let props = %s;\n  <%s key={someKey} {...props} />',
-	            isStaticChildren,
-	            children,
-	            keys,
-	            children
-	          ),
-	          (didWarnAboutKeySpread[children + isStaticChildren] = true));
-	      }
-	      children = null;
-	      void 0 !== maybeKey &&
-	        (checkKeyStringCoercion(maybeKey), (children = "" + maybeKey));
-	      hasValidKey(config) &&
-	        (checkKeyStringCoercion(config.key), (children = "" + config.key));
-	      if ("key" in config) {
-	        maybeKey = {};
-	        for (var propName in config)
-	          "key" !== propName && (maybeKey[propName] = config[propName]);
-	      } else maybeKey = config;
-	      children &&
-	        defineKeyPropWarningGetter(
-	          maybeKey,
-	          "function" === typeof type
-	            ? type.displayName || type.name || "Unknown"
-	            : type
-	        );
-	      return ReactElement(
-	        type,
-	        children,
-	        self,
-	        source,
-	        getOwner(),
-	        maybeKey,
-	        debugStack,
-	        debugTask
-	      );
-	    }
-	    function validateChildKeys(node) {
-	      "object" === typeof node &&
-	        null !== node &&
-	        node.$$typeof === REACT_ELEMENT_TYPE &&
-	        node._store &&
-	        (node._store.validated = 1);
-	    }
-	    var React = require$$0,
-	      REACT_ELEMENT_TYPE = Symbol.for("react.transitional.element"),
-	      REACT_PORTAL_TYPE = Symbol.for("react.portal"),
-	      REACT_FRAGMENT_TYPE = Symbol.for("react.fragment"),
-	      REACT_STRICT_MODE_TYPE = Symbol.for("react.strict_mode"),
-	      REACT_PROFILER_TYPE = Symbol.for("react.profiler");
-	    var REACT_CONSUMER_TYPE = Symbol.for("react.consumer"),
-	      REACT_CONTEXT_TYPE = Symbol.for("react.context"),
-	      REACT_FORWARD_REF_TYPE = Symbol.for("react.forward_ref"),
-	      REACT_SUSPENSE_TYPE = Symbol.for("react.suspense"),
-	      REACT_SUSPENSE_LIST_TYPE = Symbol.for("react.suspense_list"),
-	      REACT_MEMO_TYPE = Symbol.for("react.memo"),
-	      REACT_LAZY_TYPE = Symbol.for("react.lazy"),
-	      REACT_ACTIVITY_TYPE = Symbol.for("react.activity"),
-	      REACT_CLIENT_REFERENCE = Symbol.for("react.client.reference"),
-	      ReactSharedInternals =
-	        React.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE,
-	      hasOwnProperty = Object.prototype.hasOwnProperty,
-	      isArrayImpl = Array.isArray,
-	      createTask = console.createTask
-	        ? console.createTask
-	        : function () {
-	            return null;
-	          };
-	    React = {
-	      "react-stack-bottom-frame": function (callStackForError) {
-	        return callStackForError();
-	      }
-	    };
-	    var specialPropKeyWarningShown;
-	    var didWarnAboutElementRef = {};
-	    var unknownOwnerDebugStack = React["react-stack-bottom-frame"].bind(
-	      React,
-	      UnknownOwner
-	    )();
-	    var unknownOwnerDebugTask = createTask(getTaskName(UnknownOwner));
-	    var didWarnAboutKeySpread = {};
-	    reactJsxRuntime_development.Fragment = REACT_FRAGMENT_TYPE;
-	    reactJsxRuntime_development.jsx = function (type, config, maybeKey, source, self) {
-	      var trackActualOwner =
-	        1e4 > ReactSharedInternals.recentlyCreatedOwnerStacks++;
-	      return jsxDEVImpl(
-	        type,
-	        config,
-	        maybeKey,
-	        false,
-	        source,
-	        self,
-	        trackActualOwner
-	          ? Error("react-stack-top-frame")
-	          : unknownOwnerDebugStack,
-	        trackActualOwner ? createTask(getTaskName(type)) : unknownOwnerDebugTask
-	      );
-	    };
-	    reactJsxRuntime_development.jsxs = function (type, config, maybeKey, source, self) {
-	      var trackActualOwner =
-	        1e4 > ReactSharedInternals.recentlyCreatedOwnerStacks++;
-	      return jsxDEVImpl(
-	        type,
-	        config,
-	        maybeKey,
-	        true,
-	        source,
-	        self,
-	        trackActualOwner
-	          ? Error("react-stack-top-frame")
-	          : unknownOwnerDebugStack,
-	        trackActualOwner ? createTask(getTaskName(type)) : unknownOwnerDebugTask
-	      );
-	    };
-	  })();
-	return reactJsxRuntime_development;
-}
-
-if (process.env.NODE_ENV === 'production') {
-  jsxRuntime.exports = requireReactJsxRuntime_production();
-} else {
-  jsxRuntime.exports = requireReactJsxRuntime_development();
-}
-
-var jsxRuntimeExports = jsxRuntime.exports;
-
-function OpalIframe({ token, opalUrl, onMessage, style, }) {
-    const iframeRef = require$$0.useRef(null);
-    const handleMessage = require$$0.useCallback((event) => {
-        var _a;
-        // Check if the event is from an allowed origin
-        const allowedOrigins = [
-            'https://opal.production.methodfi.com',
-            'https://opal.sandbox.methodfi.com',
-            'https://opal.dev.methodfi.com',
-            'http://localhost:3000'
-        ];
-        if (!allowedOrigins.includes(event.origin)) {
-            return;
-        }
-        try {
-            // Forward the properly structured event
-            if ((_a = event.data) === null || _a === void 0 ? void 0 : _a.type) {
-                onMessage(event.data);
-            }
-        }
-        catch (error) {
-            onMessage({
-                type: 'opal.session.errored',
-                mode: 'opal',
-                object: 'session',
-                action: 'errored',
-                timestamp: new Date().toISOString(),
-                data: null,
-            });
-        }
-    }, [onMessage]);
-    require$$0.useEffect(() => {
-        // Add event listener for iframe messages
-        window.addEventListener('message', handleMessage);
-        return () => {
-            window.removeEventListener('message', handleMessage);
-        };
-    }, [handleMessage]);
-    if (!token || !opalUrl) {
-        return null;
-    }
-    return (jsxRuntimeExports.jsx("iframe", { ref: iframeRef, src: opalUrl, style: style, sandbox: "allow-scripts allow-same-origin allow-forms allow-popups allow-top-navigation", title: "Opal" }));
-}
+'use client';
+import React, { useState, createContext, useEffect, useRef, useCallback, useContext } from 'react';
+
+// Common Opal event types - supports card_connect and account_verification modes
+const OpalEventType = {
+    SESSION_STARTED: 'opal.session.started',
+    SESSION_ERRORED: 'opal.session.errored',
+    SESSION_EXITED: 'opal.session.exited',
+    SESSION_COMPLETED: 'opal.session.completed'
+};
 
 const OPAL_URLS = {
     local: 'http://localhost:3000',
     dev: 'https://opal.dev.methodfi.com',
     sandbox: 'https://opal.sandbox.methodfi.com',
-    production: 'https://opal.production.methodfi.com',
+    production: 'https://opal.production.methodfi.com'
 };
 
-const OpalContext = require$$0.createContext(null);
+const OpalContext = /*#__PURE__*/ createContext(null);
 /**
  * Provider component that wraps your app to enable Opal functionality.
  * This component manages the Opal iframe state and provides context to child components.
@@ -489,86 +33,78 @@ const OpalContext = require$$0.createContext(null);
  *   );
  * }
  * ```
- */
-function OpalProvider({ children }) {
-    const [isOpen, setIsOpen] = require$$0.useState(false);
-    const [isReady, setIsReady] = require$$0.useState(false);
-    const [error, setError] = require$$0.useState(null);
-    const [currentToken, setCurrentToken] = require$$0.useState(null);
-    const [currentConfig, setCurrentConfig] = require$$0.useState({});
+ */ function OpalProvider({ children }) {
+    const [isOpen, setIsOpen] = useState(false);
+    const [error, setError] = useState(null);
+    const [currentToken, setCurrentToken] = useState(null);
+    const [currentConfig, setCurrentConfig] = useState({});
     const environment = currentConfig.env || 'production';
     const baseUrl = OPAL_URLS[environment];
-    const opalUrl = currentToken
-        ? `${baseUrl}/?token=${currentToken}`
-        : '';
-    const handleMessage = (event) => {
-        var _a, _b;
+    const opalUrl = currentToken ? `${baseUrl}/?token=${currentToken}` : '';
+    const handleMessage = (event)=>{
         // Always call onEvent if provided with properly typed event
-        (_a = currentConfig.onEvent) === null || _a === void 0 ? void 0 : _a.call(currentConfig, event);
+        currentConfig.onEvent == null ? void 0 : currentConfig.onEvent.call(currentConfig, event);
         // Handle structured event format
         const { action, data } = event;
         // Legacy support for action-based handling
-        switch (action) {
-            case 'started':
-                if (!isReady)
-                    setIsReady(true);
-                break;
+        switch(action){
             case 'exited':
                 close();
                 break;
             case 'errored':
                 if (!error && data) {
                     setError(data);
-                    (_b = currentConfig.onError) === null || _b === void 0 ? void 0 : _b.call(currentConfig, data);
                 }
                 break;
         }
     };
-    const open = (options) => {
-        var _a;
+    const open = (options)=>{
         setCurrentToken(options.token);
         setIsOpen(true);
         setError(null);
-        setIsReady(false);
-        (_a = currentConfig.onOpen) === null || _a === void 0 ? void 0 : _a.call(currentConfig);
+        currentConfig.onOpen == null ? void 0 : currentConfig.onOpen.call(currentConfig);
     };
-    const close = () => {
-        setTimeout(() => {
-            var _a;
+    const close = ()=>{
+        setTimeout(()=>{
             setIsOpen(false);
-            setIsReady(false);
             setCurrentToken(null);
-            (_a = currentConfig.onExit) === null || _a === void 0 ? void 0 : _a.call(currentConfig);
+            currentConfig.onExit == null ? void 0 : currentConfig.onExit.call(currentConfig);
         }, 500);
     };
-    const updateConfig = (config) => {
+    const updateConfig = (config)=>{
         setCurrentConfig(config);
     };
     const contextValue = {
         isOpen,
-        isReady,
         error,
         open,
         close,
-        updateConfig,
+        updateConfig
     };
-    return (jsxRuntimeExports.jsxs(OpalContext.Provider, { value: contextValue, children: [children, isOpen && currentToken && (jsxRuntimeExports.jsx(OpalIframe, { token: currentToken, opalUrl: opalUrl, onMessage: handleMessage, onClose: close, style: {
-                    position: 'fixed',
-                    inset: 0,
-                    width: '100%',
-                    height: '100%',
-                    border: 'none',
-                    zIndex: 1000,
-                } }))] }));
+    return /*#__PURE__*/ React.createElement(OpalContext.Provider, {
+        value: contextValue
+    }, children, isOpen && currentToken && /*#__PURE__*/ React.createElement(OpalIframe, {
+        token: currentToken,
+        opalUrl: opalUrl,
+        onMessage: handleMessage,
+        onClose: close,
+        style: {
+            position: 'fixed',
+            inset: 0,
+            width: '100%',
+            height: '100%',
+            border: 'none',
+            zIndex: 1000
+        }
+    }));
 }
 function useOpalContext() {
-    const context = require$$0.useContext(OpalContext);
+    const context = useContext(OpalContext);
     if (!context) {
         throw new Error('useOpalContext must be used within an OpalProvider');
     }
     return context;
 }
-
 /**
  * Hook for interacting with Opal within an OpalProvider context.
  * This hook allows you to configure event handlers and open/close Opal sessions.
@@ -576,21 +112,26 @@ function useOpalContext() {
  *
  * @example
  * ```tsx
- * const { open, close, isReady, isOpen, error } = useOpal({
+ * const { open, close, isOpen, error } = useOpal({
  *   env: 'dev',
  *   onOpen: () => console.log('Opal opened'),
  *   onExit: () => console.log('Opal closed'),
  *   onEvent: (event) => {
  *     switch (event.type) {
- *       case 'opal.session.started':
+ *       case OpalEventType.SESSION_STARTED:
  *         console.log('Session started');
  *         break;
- *       case 'card_connect.card.verified':
- *         console.log('Card verified:', event.data);
+ *       case OpalEventType.SESSION_COMPLETED:
+ *         console.log('Session completed:', event.data);
+ *         break;
+ *       case OpalEventType.SESSION_EXITED:
+ *         console.log('Session exited:', event.data);
+ *         break;
+ *       case OpalEventType.SESSION_ERRORED:
+ *         console.log('Session errored:', event.data);
  *         break;
  *     }
  *   },
- *   onError: (error) => console.error('Opal error:', error),
  * });
  *
  * // Open Opal with a token
@@ -602,23 +143,70 @@ function useOpalContext() {
  *
  * @param config Configuration object with event handlers and environment settings
  * @returns Object with open function and current state
- */
-function useOpal(config = {}) {
+ */ function useOpal(config = {}) {
     const context = useOpalContext();
     // Update the provider's config when this hook's config changes
-    require$$0.useEffect(() => {
+    useEffect(()=>{
         context.updateConfig(config);
     }, []);
     return {
         open: context.open,
         close: context.close,
-        isReady: context.isReady,
         isOpen: context.isOpen,
-        error: context.error,
+        error: context.error
     };
 }
+function OpalIframe({ token, opalUrl, onMessage, style }) {
+    const iframeRef = useRef(null);
+    const handleMessage = useCallback((event)=>{
+        // Check if the event is from an allowed origin
+        const allowedOrigins = [
+            'https://opal.production.methodfi.com',
+            'https://opal.sandbox.methodfi.com',
+            'https://opal.dev.methodfi.com',
+            'http://localhost:3000'
+        ];
+        if (!allowedOrigins.includes(event.origin)) {
+            return;
+        }
+        try {
+            var _event_data;
+            // Forward the properly structured event
+            if ((_event_data = event.data) == null ? void 0 : _event_data.type) {
+                onMessage(event.data);
+            }
+        } catch (error) {
+            onMessage({
+                type: 'opal.session.errored',
+                mode: 'opal',
+                object: 'session',
+                action: 'errored',
+                timestamp: new Date().toISOString(),
+                data: null
+            });
+        }
+    }, [
+        onMessage
+    ]);
+    useEffect(()=>{
+        // Add event listener for iframe messages
+        window.addEventListener('message', handleMessage);
+        return ()=>{
+            window.removeEventListener('message', handleMessage);
+        };
+    }, [
+        handleMessage
+    ]);
+    if (!token || !opalUrl) {
+        return null;
+    }
+    return /*#__PURE__*/ React.createElement("iframe", {
+        ref: iframeRef,
+        src: opalUrl,
+        style: style,
+        sandbox: "allow-scripts allow-same-origin allow-forms allow-popups allow-top-navigation",
+        title: "Opal"
+    });
+}
 
-exports.OpalIframe = OpalIframe;
-exports.OpalProvider = OpalProvider;
-exports.useOpal = useOpal;
-//# sourceMappingURL=index.js.map
+export { OpalEventType, OpalProvider, useOpal };