@membranehq/sdk 0.13.1 → 0.15.0

package/dist/bundle.js

@@ -20776,6 +20776,160 @@
 	var urlJoinExports = requireUrlJoin();
 	var urljoin = /*@__PURE__*/getDefaultExportFromCjs(urlJoinExports);
 
+	const POPUP_ELEMENT_ID = '__integration-app-popup';
+	const CONTAINER_ELEMENT_ID = '__integration-app-container';
+	const CONTAINER_ELEMENT_CLASS = '__integration-app-container';
+	const CONTAINER_ELEMENT_CLASS__LOADER = '__integration-app-container__loader';
+	const BODY_CLASS = '__integration-app-open';
+	const STYLES_ELEMENT_ID = '__integration-app-embed-styles';
+	const TIMEOUT_MESSAGE_ELEMENT_ID = '__integration-app-timeout-message';
+	const LOADER_SVG_ELEMENT_ID = '__integration-app-loader-svg';
+	const SLOW_CONNECTION_TIMEOUT = 5000;
+	const CONNECTION_FAILED_TIMEOUT = 30000;
+	const HANDSHAKE_AFTER_LOAD_TIMEOUT = 3000;
+	const IFRAME_SHOW_LOADER_MINIMAL_TIME = 500;
+	const IFRAME_LAYOUT_SHIFT_TIME = 300;
+
+	function injectStyles(mountTargetSelector) {
+	    const hasCustomMountTarget = Boolean(mountTargetSelector && document.querySelector(mountTargetSelector));
+	    const styles = [
+	        `.${CONTAINER_ELEMENT_CLASS}:empty { display: none; }`,
+	        hasCustomMountTarget
+	            ? `.${CONTAINER_ELEMENT_CLASS} {
+          inset: 0;
+          background: rgba(0, 0, 0, 0);
+          transition: background 0.2s ease-out;
+          display: flex;
+          justify-content: center;
+          align-items: center;
+          width: 100%;
+          height: 100%;
+        }`
+	            : `.${CONTAINER_ELEMENT_CLASS} {
+          position: fixed;
+          inset: 0;
+          z-index: 2147483647;
+          display: flex;
+          justify-content: center;
+          align-items: center;
+          pointer-events: auto;
+          background: rgba(0, 0, 0, 0);
+          transition: background 0.2s ease-out;
+        }`,
+	        `.${CONTAINER_ELEMENT_CLASS}.${CONTAINER_ELEMENT_CLASS__LOADER} {
+      background: transparent;
+      backdrop-filter: blur(8px);
+      -webkit-backdrop-filter: blur(8px);
+    }`,
+	        `.${CONTAINER_ELEMENT_CLASS} iframe {
+      ${hasCustomMountTarget ? '' : 'position: absolute; inset: 0;'}
+      width: 100%;
+      height: 100%;
+      border-width: 0;
+      color-scheme: light;
+    }`,
+	        `.${CONTAINER_ELEMENT_CLASS}.${CONTAINER_ELEMENT_CLASS__LOADER} iframe {
+      visibility: hidden;
+    }`,
+	        !hasCustomMountTarget ? `body.${BODY_CLASS} { overflow: hidden; }` : '',
+	        `#${LOADER_SVG_ELEMENT_ID} {
+      position: absolute;
+      top: 50%;
+      left: 50%;
+      transform: translate(-50%, -50%);
+      width: 4rem;
+      height: 4rem;
+      color: black;
+    }`,
+	        `#${TIMEOUT_MESSAGE_ELEMENT_ID} {
+      position: absolute;
+      top: calc(50% + 3rem);
+      left: 50%;
+      transform: translateX(-50%);
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      gap: 0.75rem;
+      font-family: system-ui, -apple-system, sans-serif;
+    }`,
+	        `#${TIMEOUT_MESSAGE_ELEMENT_ID} p {
+      margin: 0;
+      font-size: 0.875rem;
+      font-weight: 500;
+      color: #52525b;
+      text-align: center;
+    }`,
+	        `#${TIMEOUT_MESSAGE_ELEMENT_ID}.error p {
+      color: #dc2626;
+    }`,
+	        `#${TIMEOUT_MESSAGE_ELEMENT_ID} button {
+      padding: 0.5rem 1rem;
+      font-size: 0.875rem;
+      font-weight: 500;
+      color: white;
+      background: #18181b;
+      border: none;
+      border-radius: 0.375rem;
+      cursor: pointer;
+      transition: background 0.15s;
+    }`,
+	        `#${TIMEOUT_MESSAGE_ELEMENT_ID} button:hover {
+      background: #27272a;
+    }`,
+	    ];
+	    let styleElement = document.getElementById(STYLES_ELEMENT_ID);
+	    if (!styleElement) {
+	        styleElement = document.createElement('style');
+	        styleElement.id = STYLES_ELEMENT_ID;
+	        styleElement.type = 'text/css';
+	        document.head.appendChild(styleElement);
+	    }
+	    styleElement.textContent = styles.join('\n');
+	}
+	function removeInjectedStyles() {
+	    var _a;
+	    (_a = document.getElementById(STYLES_ELEMENT_ID)) === null || _a === void 0 ? void 0 : _a.remove();
+	}
+
+	function getContainer() {
+	    return document.getElementById(CONTAINER_ELEMENT_ID);
+	}
+	function createContainer() {
+	    const container = document.createElement('div');
+	    container.id = CONTAINER_ELEMENT_ID;
+	    container.classList.add(CONTAINER_ELEMENT_CLASS);
+	    return container;
+	}
+	function appendToContainer(el) {
+	    var _a;
+	    (_a = getContainer()) === null || _a === void 0 ? void 0 : _a.appendChild(el);
+	}
+	function deleteContainer() {
+	    var _a;
+	    (_a = getContainer()) === null || _a === void 0 ? void 0 : _a.remove();
+	    removeInjectedStyles();
+	}
+	function handleIframeUnmount(iframe) {
+	    const observer = new MutationObserver((mutationsList) => {
+	        for (const mutation of mutationsList) {
+	            for (const removedNode of mutation.removedNodes) {
+	                if (removedNode instanceof HTMLElement && removedNode.id === POPUP_ELEMENT_ID) {
+	                    observer.disconnect();
+	                    deleteContainer();
+	                    return;
+	                }
+	            }
+	        }
+	    });
+	    const parent = iframe.parentNode;
+	    if (parent) {
+	        observer.observe(parent, { childList: true });
+	    }
+	    else {
+	        console.warn(`iframe with ID "${POPUP_ELEMENT_ID}" has no parent node`);
+	    }
+	}
+
 	var MessageType;
 	(function (MessageType) {
 	    MessageType["Call"] = "call";
@@ -21306,87 +21460,260 @@
 	    };
 	};
 
-	const POPUP_ELEMENT_ID = '__integration-app-popup';
-	const CONTAINER_ELEMENT_ID = '__integration-app-container';
-	const CONTAINER_ELEMENT_CLASS = '__integration-app-container';
-	const CONTAINER_ELEMENT_CLASS__LOADER = '__integration-app-container__loader';
-	const BODY_CLASS = '__integration-app-open';
-	const STYLES_ELEMENT_ID = '__integration-app-embed-styles';
-	let IFRAME_START_SHOW_LOADER_TIME = 0;
-	let IFRAME_SHOW_LOADER_TIMEOUT_ID;
-	const IFRAME_SHOW_LOADER_MINIMAL_TIME = 500;
-	const IFRAME_LAYOUT_SHIFT_TIME = 300;
+	let loaderStartTime = 0;
+	let loaderTimeoutId;
+	function createLoaderSvg() {
+	    const svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
+	    svg.id = LOADER_SVG_ELEMENT_ID;
+	    svg.setAttribute('viewBox', '0 0 120 120');
+	    svg.setAttribute('fill', 'currentColor');
+	    svg.innerHTML = `
+    <defs>
+      <mask id="__membrane-mask-2">
+        <rect x="0" y="0" width="120" height="120" fill="#fff" />
+        <path
+          d="M43.48 22.8008C43.48 21.8386 44.5223 21.2378 45.3549 21.72L89.7526 47.4331C90.2346 47.7123 90.5314 48.2271 90.5314 48.7841V120H88.6565H44.103C44.103 120 43.48 119.721 43.48 119.377V22.8008Z"
+          fill="#000"
+        >
+          <animateTransform
+            attributeName="transform"
+            type="translate"
+            values="0 0; 0 -12; 0 0"
+            dur="1.1s"
+            repeatCount="indefinite"
+            calcMode="spline"
+            keySplines="0.42 0 0.58 1; 0.42 0 0.58 1"
+            begin="0.15s"
+          />
+        </path>
+      </mask>
+      <mask id="__membrane-mask-1">
+        <rect x="0" y="0" width="120" height="120" fill="#fff" />
+        <path
+          d="M23.5 36.4509C23.5 35.4886 24.5423 34.8878 25.3749 35.3701L69.7726 61.0832C70.2546 61.3623 70.5514 61.8771 70.5514 62.4341L70.55 120H68.6764H37.5H23.5V36.4509Z"
+          fill="#000"
+        >
+          <animateTransform
+            attributeName="transform"
+            type="translate"
+            values="0 0; 0 -12; 0 0"
+            dur="1.1s"
+            repeatCount="indefinite"
+            calcMode="spline"
+            keySplines="0.42 0 0.58 1; 0.42 0 0.58 1"
+            begin="0s"
+          />
+        </path>
+      </mask>
+    </defs>
+    <g mask="url(#__membrane-mask-2)">
+      <path
+        d="M56.45 13.1708C56.45 12.2086 57.4923 11.6078 58.3249 12.09L102.723 37.8031C103.205 38.0823 103.501 38.5971 103.501 39.1541V90.5875C103.501 91.5497 102.459 92.1505 101.626 91.6683L57.073 65.865C56.6874 65.6417 56.45 65.2298 56.45 64.7842V13.1708Z"
+        fill="currentColor"
+      >
+        <animateTransform
+          attributeName="transform"
+          type="translate"
+          values="0 0; 0 -12; 0 0"
+          dur="1.1s"
+          repeatCount="indefinite"
+          calcMode="spline"
+          keySplines="0.42 0 0.58 1; 0.42 0 0.58 1"
+          begin="0.3s"
+        />
+      </path>
+    </g>
+    <g mask="url(#__membrane-mask-1)">
+      <path
+        d="M36.48 26.8008C36.48 25.8386 37.5223 25.2378 38.3549 25.72L82.7526 51.4331C83.2346 51.7123 83.5314 52.2271 83.5314 52.7841V104.218C83.5314 105.18 82.4891 105.781 81.6565 105.298L37.103 79.495C36.7174 79.2717 36.48 78.8598 36.48 78.4142V26.8008Z"
+        fill="currentColor"
+      >
+        <animateTransform
+          attributeName="transform"
+          type="translate"
+          values="0 0; 0 -12; 0 0"
+          dur="1.1s"
+          repeatCount="indefinite"
+          calcMode="spline"
+          keySplines="0.42 0 0.58 1; 0.42 0 0.58 1"
+          begin="0.15s"
+        />
+      </path>
+    </g>
+    <path
+      d="M16.5 40.4509C16.5 39.4886 17.5423 38.8878 18.3749 39.3701L62.7726 65.0832C63.2546 65.3623 63.5514 65.8771 63.5514 66.4341V117.868C63.5514 118.83 62.5091 119.431 61.6764 118.948L17.123 93.145C16.7374 92.9217 16.5 92.5098 16.5 92.0642V40.4509Z"
+      fill="currentColor"
+    >
+      <animateTransform
+        attributeName="transform"
+        type="translate"
+        values="0 0; 0 -12; 0 0"
+        dur="1.1s"
+        repeatCount="indefinite"
+        calcMode="spline"
+        keySplines="0.42 0 0.58 1; 0.42 0 0.58 1"
+        begin="0s"
+      />
+    </path>
+  `;
+	    return svg;
+	}
 	function showIframeLoader() {
 	    const container = getContainer();
 	    container === null || container === void 0 ? void 0 : container.classList.add(CONTAINER_ELEMENT_CLASS__LOADER);
-	    IFRAME_START_SHOW_LOADER_TIME = Date.now();
+	    if (container && !document.getElementById(LOADER_SVG_ELEMENT_ID)) {
+	        container.appendChild(createLoaderSvg());
+	    }
+	    loaderStartTime = Date.now();
 	}
 	function hideIframeLoader(waitLayoutShift = IFRAME_LAYOUT_SHIFT_TIME) {
-	    if (IFRAME_SHOW_LOADER_TIMEOUT_ID) {
-	        clearTimeout(IFRAME_SHOW_LOADER_TIMEOUT_ID);
+	    if (loaderTimeoutId) {
+	        clearTimeout(loaderTimeoutId);
 	    }
-	    const delta = Date.now() - IFRAME_START_SHOW_LOADER_TIME;
+	    const delta = Date.now() - loaderStartTime;
 	    if (delta >= IFRAME_SHOW_LOADER_MINIMAL_TIME) {
 	        setTimeout(() => {
+	            var _a;
 	            const container = getContainer();
 	            container === null || container === void 0 ? void 0 : container.classList.remove(CONTAINER_ELEMENT_CLASS__LOADER);
-	            IFRAME_START_SHOW_LOADER_TIME = 0;
+	            (_a = document.getElementById(LOADER_SVG_ELEMENT_ID)) === null || _a === void 0 ? void 0 : _a.remove();
+	            loaderStartTime = 0;
 	        }, waitLayoutShift);
-	        return;
 	    }
 	    else {
-	        const waitLayoutShift = delta >= IFRAME_LAYOUT_SHIFT_TIME ? 0 : IFRAME_LAYOUT_SHIFT_TIME - delta;
+	        const adjustedWait = delta >= IFRAME_LAYOUT_SHIFT_TIME ? 0 : IFRAME_LAYOUT_SHIFT_TIME - delta;
 	        const timeoutTime = IFRAME_SHOW_LOADER_MINIMAL_TIME - delta;
-	        IFRAME_SHOW_LOADER_TIMEOUT_ID = setTimeout(() => {
-	            hideIframeLoader(waitLayoutShift);
+	        loaderTimeoutId = setTimeout(() => {
+	            hideIframeLoader(adjustedWait);
 	        }, timeoutTime);
+	    }
+	}
+
+	function removeTimeoutMessage() {
+	    var _a;
+	    (_a = document.getElementById(TIMEOUT_MESSAGE_ELEMENT_ID)) === null || _a === void 0 ? void 0 : _a.remove();
+	}
+	function showTimeoutMessage(message, onClose, isError = false) {
+	    removeTimeoutMessage();
+	    const container = getContainer();
+	    if (!container)
+	        return;
+	    const messageEl = document.createElement('div');
+	    messageEl.id = TIMEOUT_MESSAGE_ELEMENT_ID;
+	    if (isError) {
+	        messageEl.classList.add('error');
+	    }
+	    const textEl = document.createElement('p');
+	    textEl.textContent = message;
+	    messageEl.appendChild(textEl);
+	    const button = document.createElement('button');
+	    button.textContent = 'Close';
+	    button.addEventListener('click', onClose);
+	    messageEl.appendChild(button);
+	    container.appendChild(messageEl);
+	}
+
+	function setupIframeConnection({ iframe, callbacks, childOrigin, onComplete, close }) {
+	    let slowTimeoutId = null;
+	    let failedTimeoutId = null;
+	    let handshakeTimeoutId = null;
+	    let handshakeReceived = false;
+	    function clearTimeouts() {
+	        if (slowTimeoutId)
+	            clearTimeout(slowTimeoutId);
+	        if (failedTimeoutId)
+	            clearTimeout(failedTimeoutId);
+	        if (handshakeTimeoutId)
+	            clearTimeout(handshakeTimeoutId);
+	        slowTimeoutId = null;
+	        failedTimeoutId = null;
+	        handshakeTimeoutId = null;
+	        removeTimeoutMessage();
+	    }
+	    function complete(callback) {
+	        clearTimeouts();
+	        close(callback);
+	        onComplete();
+	    }
+	    function handleError() {
+	        clearTimeouts();
+	        showTimeoutMessage('Unable to connect', () => complete(callbacks.onClose), true);
+	    }
+	    iframe.onerror = handleError;
+	    iframe.onload = () => {
+	        if (!handshakeReceived) {
+	            handshakeTimeoutId = setTimeout(() => {
+	                if (!handshakeReceived)
+	                    handleError();
+	            }, HANDSHAKE_AFTER_LOAD_TIMEOUT);
+	        }
+	    };
+	    slowTimeoutId = setTimeout(() => {
+	        showTimeoutMessage('Taking longer than expected', () => complete(callbacks.onClose));
+	    }, SLOW_CONNECTION_TIMEOUT);
+	    failedTimeoutId = setTimeout(() => {
+	        showTimeoutMessage('Unable to connect', () => complete(callbacks.onClose), true);
+	    }, CONNECTION_FAILED_TIMEOUT);
+	    const connection = connectToChild({
+	        iframe,
+	        ...(childOrigin && { childOrigin }),
+	        methods: {
+	            ...callbacks,
+	            handshake: (...args) => {
+	                var _a;
+	                handshakeReceived = true;
+	                clearTimeouts();
+	                hideIframeLoader();
+	                (_a = callbacks === null || callbacks === void 0 ? void 0 : callbacks.handshake) === null || _a === void 0 ? void 0 : _a.call(callbacks, ...args);
+	            },
+	            close: () => complete(callbacks.onClose),
+	        },
+	    });
+	    connection.promise.catch(handleError);
+	}
+
+	function init(mountTargetSelector) {
+	    var _a;
+	    injectStyles(mountTargetSelector);
+	    if (getContainer())
 	        return;
+	    const container = createContainer();
+	    if (mountTargetSelector && document.querySelector(mountTargetSelector)) {
+	        (_a = document.querySelector(mountTargetSelector)) === null || _a === void 0 ? void 0 : _a.appendChild(container);
+	    }
+	    else {
+	        document.body.appendChild(container);
+	    }
+	}
+	function close(callback) {
+	    document.body.classList.remove(BODY_CLASS);
+	    if (getContainer()) {
+	        deleteContainer();
+	        callback === null || callback === void 0 ? void 0 : callback();
 	    }
 	}
 	async function openIframe(uri, callbacks = {}, { mountTargetSelector } = {}) {
 	    close();
 	    init(mountTargetSelector);
 	    return new Promise((resolve) => {
-	        function complete(callback) {
-	            close(callback);
-	            resolve();
-	        }
 	        function doOpen() {
-	            const iframe = document.createElement('iframe');
-	            iframe.src = uri;
-	            iframe.id = POPUP_ELEMENT_ID;
-	            iframe.onload = () => {
-	                hideIframeLoader();
-	            };
-	            if (!!getContainer()) {
-	                document.body.classList.add(BODY_CLASS);
-	                showIframeLoader();
-	                appendToContainer(iframe);
-	                handleIframeUnmount(iframe);
-	                connectToChild({
-	                    iframe,
-	                    methods: {
-	                        ...callbacks,
-	                        handshake: (...args) => {
-	                            var _a;
-	                            hideIframeLoader();
-	                            (_a = callbacks === null || callbacks === void 0 ? void 0 : callbacks.handshake) === null || _a === void 0 ? void 0 : _a.call(callbacks, ...args);
-	                        },
-	                        close: () => complete(callbacks.onClose),
-	                    },
-	                });
-	            }
-	            else {
+	            if (!getContainer()) {
 	                throw Error('Membrane container element not found. Was it manually removed?');
 	            }
+	            const iframe = document.createElement('iframe');
+	            iframe.id = POPUP_ELEMENT_ID;
+	            iframe.src = uri;
+	            document.body.classList.add(BODY_CLASS);
+	            showIframeLoader();
+	            appendToContainer(iframe);
+	            handleIframeUnmount(iframe);
+	            setupIframeConnection({ iframe, callbacks, onComplete: resolve, close });
 	        }
 	        if (document.readyState === 'complete' || document.readyState === 'interactive') {
 	            doOpen();
 	        }
 	        else {
-	            document.addEventListener('DOMContentLoaded', () => {
-	                doOpen();
-	            });
+	            document.addEventListener('DOMContentLoaded', doOpen);
 	        }
 	    });
 	}
@@ -21394,18 +21721,14 @@
 	    close();
 	    init(mountTargetSelector);
 	    return new Promise((resolve) => {
-	        function complete(callback) {
-	            close(callback);
-	            resolve();
-	        }
 	        function doOpen() {
+	            if (!getContainer()) {
+	                throw Error('Membrane container element not found. Was it manually removed?');
+	            }
 	            const iframeName = `${POPUP_ELEMENT_ID}-${Date.now()}`;
 	            const iframe = document.createElement('iframe');
 	            iframe.id = POPUP_ELEMENT_ID;
 	            iframe.name = iframeName;
-	            iframe.onload = () => {
-	                hideIframeLoader();
-	            };
 	            const form = document.createElement('form');
 	            form.method = 'POST';
 	            form.action = url;
@@ -21420,185 +21743,23 @@
 	                    form.appendChild(input);
 	                }
 	            }
-	            if (!!getContainer()) {
-	                document.body.classList.add(BODY_CLASS);
-	                showIframeLoader();
-	                appendToContainer(iframe);
-	                handleIframeUnmount(iframe);
-	                document.body.appendChild(form);
-	                form.submit();
-	                form.remove();
-	                const childOrigin = new URL(url).origin;
-	                connectToChild({
-	                    iframe,
-	                    childOrigin,
-	                    methods: {
-	                        ...callbacks,
-	                        handshake: (...args) => {
-	                            var _a;
-	                            hideIframeLoader();
-	                            (_a = callbacks === null || callbacks === void 0 ? void 0 : callbacks.handshake) === null || _a === void 0 ? void 0 : _a.call(callbacks, ...args);
-	                        },
-	                        close: () => complete(callbacks.onClose),
-	                    },
-	                });
-	            }
-	            else {
-	                throw Error('Membrane container element not found. Was it manually removed?');
-	            }
+	            document.body.classList.add(BODY_CLASS);
+	            showIframeLoader();
+	            appendToContainer(iframe);
+	            handleIframeUnmount(iframe);
+	            document.body.appendChild(form);
+	            form.submit();
+	            form.remove();
+	            const childOrigin = new URL(url).origin;
+	            setupIframeConnection({ iframe, callbacks, childOrigin, onComplete: resolve, close });
 	        }
 	        if (document.readyState === 'complete' || document.readyState === 'interactive') {
 	            doOpen();
 	        }
 	        else {
-	            document.addEventListener('DOMContentLoaded', () => {
-	                doOpen();
-	            });
-	        }
-	    });
-	}
-	function close(callback) {
-	    document.body.classList.remove(BODY_CLASS);
-	    if (!!getContainer()) {
-	        deleteContainer();
-	        if (callback) {
-	            callback();
-	        }
-	    }
-	}
-	function init(mountTargetSelector) {
-	    var _a;
-	    injectStyles(mountTargetSelector);
-	    if (!!getContainer()) {
-	        return;
-	    }
-	    const container = createContainer();
-	    if (mountTargetSelector && document.querySelector(mountTargetSelector)) {
-	        (_a = document.querySelector(mountTargetSelector)) === null || _a === void 0 ? void 0 : _a.appendChild(container);
-	    }
-	    else {
-	        document.body.appendChild(container);
-	    }
-	}
-	function injectStyles(mountTargetSelector) {
-	    const hasCustomMountTarget = Boolean(mountTargetSelector && document.querySelector(mountTargetSelector));
-	    const styles = [
-	        `.${CONTAINER_ELEMENT_CLASS}:empty {
-      display: none;
-    }`,
-	        hasCustomMountTarget
-	            ? `.${CONTAINER_ELEMENT_CLASS} {
-        inset: 0;
-        background: rgba(0, 0, 0, 0);
-        transition: background 0.2s ease-out;
-        display: flex;
-        justify-content: center;
-        align-items: center;
-        width: 100%;
-        height: 100%;
-      }`
-	            : `.${CONTAINER_ELEMENT_CLASS} {
-        position: fixed;
-        inset: 0;
-        z-index: 2147483647;
-        display: flex;
-        justify-content: center;
-        align-items: center;
-        pointer-events: auto;
-        background: rgba(0, 0, 0, 0);
-        transition: background 0.2s ease-out;
-      }`,
-	        `.${CONTAINER_ELEMENT_CLASS}.${CONTAINER_ELEMENT_CLASS__LOADER} {
-      background: transparent;
-      backdrop-filter: blur(8px);
-      -webkit-backdrop-filter: blur(8px);
-    }`,
-	        `.${CONTAINER_ELEMENT_CLASS}.${CONTAINER_ELEMENT_CLASS__LOADER}::before {
-      ${hasCustomMountTarget ? 'position: absolute;' : ''}
-      content: "";
-      width: 6rem;
-      height: 6rem;
-      padding: 1rem;
-      border-radius: 1rem;
-      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 120' fill='black' %3E%3Cpath d='M56.45 13.17c0-.96 1.04-1.56 1.88-1.08l44.4 25.71c.47.28.77.8.77 1.35V90.6c0 .96-1.04 1.56-1.87 1.08l-11.1-6.43V48.78c0-.55-.3-1.07-.78-1.35l-33.3-19.28z' /%3E%3Cpath d='M36.48 26.8c0-.96 1.04-1.56 1.87-1.08l44.4 25.71c.48.28.78.8.78 1.35v51.44c0 .96-1.04 1.56-1.87 1.08l-11.11-6.43V62.43c0-.55-.3-1.07-.78-1.35L36.48 41.8z' /%3E%3Cpath d='M16.5 40.45c0-.96 1.04-1.56 1.87-1.08l44.4 25.71c.48.28.78.8.78 1.35v51.44c0 .96-1.04 1.56-1.87 1.08l-44.56-25.8a1.3 1.3 0 0 1-.62-1.09z' /%3E%3C/svg%3E");
-      background-size: 4rem 4rem;
-      background-repeat: no-repeat;
-      background-position: center;
-    }`,
-	        `.${CONTAINER_ELEMENT_CLASS} iframe {
-      ${hasCustomMountTarget ? '' : 'position: absolute;'}
-      width: 100%;
-      height: 100%;
-      border-width: 0;
-
-      /* fix transparent bg, because iframe document has light scheme */
-      color-scheme: light;
-    }`,
-	        `.${CONTAINER_ELEMENT_CLASS}.${CONTAINER_ELEMENT_CLASS__LOADER} iframe {
-      visibility: hidden;
-    }`,
-	        !hasCustomMountTarget
-	            ? `body.${BODY_CLASS} {
-          overflow: hidden;
-        }`
-	            : '',
-	    ];
-	    let styleElement = document.getElementById(STYLES_ELEMENT_ID);
-	    if (!styleElement) {
-	        styleElement = document.createElement('style');
-	        styleElement.id = STYLES_ELEMENT_ID;
-	        styleElement.type = 'text/css';
-	        document.head.appendChild(styleElement);
-	    }
-	    styleElement.textContent = styles.join('\n');
-	}
-	function removeInjectedStyles() {
-	    const stylesElement = document.getElementById(STYLES_ELEMENT_ID);
-	    if (stylesElement) {
-	        stylesElement.remove();
-	    }
-	}
-	function createContainer() {
-	    const container = document.createElement('div');
-	    container.id = CONTAINER_ELEMENT_ID;
-	    container.classList.add(CONTAINER_ELEMENT_CLASS);
-	    return container;
-	}
-	function getContainer() {
-	    return document.getElementById(CONTAINER_ELEMENT_ID);
-	}
-	function appendToContainer(el) {
-	    const container = getContainer();
-	    container === null || container === void 0 ? void 0 : container.appendChild(el);
-	}
-	function deleteContainer() {
-	    const container = getContainer();
-	    if (container) {
-	        container.remove();
-	    }
-	    removeInjectedStyles();
-	}
-	function handleIframeUnmount(iframe) {
-	    const observer = new MutationObserver((mutationsList) => {
-	        for (const mutation of mutationsList) {
-	            for (const removedNode of mutation.removedNodes) {
-	                if (removedNode instanceof HTMLElement && removedNode.id === POPUP_ELEMENT_ID) {
-	                    observer.disconnect();
-	                    deleteContainer();
-	                    return;
-	                }
-	            }
+	            document.addEventListener('DOMContentLoaded', doOpen);
 	        }
 	    });
-	    const parent = iframe.parentNode;
-	    if (parent) {
-	        observer.observe(parent, {
-	            childList: true,
-	        });
-	    }
-	    else {
-	        console.warn(`iframe with ID "${POPUP_ELEMENT_ID}" has no parent node`);
-	    }
 	}
 
 	class DataSourcesAccessor extends ElementListAccessor {
@@ -22584,10 +22745,9 @@
 	    }
 	    async reconnect({ parameters, authOptionKey, connectorParameters, onPopupClosed, } = {}) {
 	        const connection = await this.get();
-	        const connectorSpec = await this.client.get(`/integrations/${connection.integrationId}/connector-spec`);
 	        return createOrUpdateConnection({
+	            client: this.client,
 	            connectionId: connection.id,
-	            connectorSpec,
 	            input: parameters,
 	            authOptionKey,
 	            connectorParameters,
@@ -22682,12 +22842,11 @@
 	    }
 	}
 	async function createOrUpdateConnection(options) {
-	    const { connectionId, integrationKey, integrationId, connectorId, connectorVersion, name, input, connectorParameters, allowMultipleConnections, authOptionKey, connectorSpec, apiUri, token, redirectUri, onPopupClosed, } = options !== null && options !== void 0 ? options : {};
-	    const connectionType = getConnectionType({
-	        connectorSpec,
-	        authOptionKey,
-	        redirectUri,
-	    });
+	    const { connectionId, integrationKey, integrationId, connectorId, connectorVersion, name, input, connectorParameters, allowMultipleConnections, authOptionKey, apiUri, token, redirectUri, onPopupClosed, } = options !== null && options !== void 0 ? options : {};
+	    let connectionType = await detectConnectionType(options);
+	    if (redirectUri) {
+	        connectionType = ConnectionType.REDIRECT;
+	    }
 	    const connectPath = 'connect';
 	    return new Promise((resolve, reject) => {
 	        const requestId = simpleUniqueId() + simpleUniqueId();
@@ -22793,17 +22952,20 @@
 	        }
 	    });
 	}
-	const getConnectionType = ({ connectorSpec, authOptionKey, redirectUri, }) => {
-	    var _a, _b;
-	    const authSpec = authOptionKey ? (_b = (_a = connectorSpec === null || connectorSpec === void 0 ? void 0 : connectorSpec.auth) === null || _a === void 0 ? void 0 : _a.options) === null || _b === void 0 ? void 0 : _b[authOptionKey] : connectorSpec === null || connectorSpec === void 0 ? void 0 : connectorSpec.auth;
-	    if ((authSpec === null || authSpec === void 0 ? void 0 : authSpec.type) === 'client-credentials') {
+	async function detectConnectionType({ client, authOptionKey, connectorId, connectionId, integrationKey, integrationId, connectorParameters, }) {
+	    const connectionOptions = await client.post('/connection-options', {
+	        connectorId,
+	        connectionId,
+	        integrationId,
+	        integrationKey,
+	        connectorParameters,
+	    });
+	    const option = connectionOptions.find((option) => option.key == authOptionKey);
+	    if ((option === null || option === void 0 ? void 0 : option.type) === 'client-credentials') {
 	        return ConnectionType.IFRAME;
 	    }
-	    if (redirectUri) {
-	        return ConnectionType.REDIRECT;
-	    }
 	    return ConnectionType.POPUP;
-	};
+	}
 	const createConnectionEventHandler = (requestId, onResolve, onReject, onFinally) => {
 	    return (event) => {
 	        var _a;
@@ -23011,10 +23173,9 @@
 	    }
 	    async connect({ name, input, parameters, connectorParameters, authOptionKey, allowMultipleConnections, redirectUri, sameWindow, onPopupClosed, } = {}) {
 	        const integration = await this.get();
-	        const connectorSpec = await this.getConnectorSpec();
 	        return createOrUpdateConnection({
+	            client: this.client,
 	            integrationId: integration.id,
-	            connectorSpec,
 	            name,
 	            input: input !== null && input !== void 0 ? input : parameters,
 	            connectorParameters,
@@ -24410,7 +24571,9 @@
 	]);
 	object({
 	    integrationId: string$1().optional(),
+	    integrationKey: string$1().optional(),
 	    connectorId: string$1().optional(),
+	    connectionId: string$1().optional(),
 	    connectorParameters: any().optional(),
 	    connectorVersion: string$1().optional(),
 	});
@@ -28931,6 +29094,7 @@
 	    async connect(options) {
 	        return createOrUpdateConnection({
 	            ...options,
+	            client: this,
 	            apiUri: this.apiUri,
 	            token: await this.getToken(),
 	            redirectUri: options.sameWindow ? options.redirectUri : undefined,