@quiltt/react 4.5.1 → 5.0.1

package/CHANGELOG.md

@@ -1,5 +1,37 @@
 # @quiltt/react
 
+## 5.0.1
+
+### Patch Changes
+
+- [#403](https://github.com/quiltt/quiltt-js/pull/403) [`b714ff3`](https://github.com/quiltt/quiltt-js/commit/b714ff3b3ee878445ca8e09903153ac0b43d693b) Thanks [@zubairaziz](https://github.com/zubairaziz)! - Prevent Infinite Re-Renders in QuilttProvider
+
+- [#399](https://github.com/quiltt/quiltt-js/pull/399) [`77d11b6`](https://github.com/quiltt/quiltt-js/commit/77d11b69ceb950da9ca500aa73bae7a3abdfb3a2) Thanks [@CarltonHowell](https://github.com/CarltonHowell)! - Output commonJS
+
+- [#402](https://github.com/quiltt/quiltt-js/pull/402) [`97eccbe`](https://github.com/quiltt/quiltt-js/commit/97eccbe6df42843307a11d28a0a8b5a36e43f3d9) Thanks [@zubairaziz](https://github.com/zubairaziz)! - Remove Node.js Dependencies in React Native Builds
+
+- [#401](https://github.com/quiltt/quiltt-js/pull/401) [`2bf07c3`](https://github.com/quiltt/quiltt-js/commit/2bf07c36bf8dc573f01db8f4c69a48e05d313b8b) Thanks [@zubairaziz](https://github.com/zubairaziz)! - Improve expired auth token detection and clearing
+
+- [#404](https://github.com/quiltt/quiltt-js/pull/404) [`45eb8c9`](https://github.com/quiltt/quiltt-js/commit/45eb8c907f51c0c8c5a3c069c35e0f301a4c374f) Thanks [@zubairaziz](https://github.com/zubairaziz)! - Add Subpath Exports and Reorganize Core Modules
+
+- Updated dependencies [[`b714ff3`](https://github.com/quiltt/quiltt-js/commit/b714ff3b3ee878445ca8e09903153ac0b43d693b), [`77d11b6`](https://github.com/quiltt/quiltt-js/commit/77d11b69ceb950da9ca500aa73bae7a3abdfb3a2), [`97eccbe`](https://github.com/quiltt/quiltt-js/commit/97eccbe6df42843307a11d28a0a8b5a36e43f3d9), [`2bf07c3`](https://github.com/quiltt/quiltt-js/commit/2bf07c36bf8dc573f01db8f4c69a48e05d313b8b), [`45eb8c9`](https://github.com/quiltt/quiltt-js/commit/45eb8c907f51c0c8c5a3c069c35e0f301a4c374f)]:
+  - @quiltt/core@5.0.1
+
+## 5.0.0
+
+### Major Changes
+
+- [#394](https://github.com/quiltt/quiltt-js/pull/394) [`2ba646a`](https://github.com/quiltt/quiltt-js/commit/2ba646a2efcb7bef7949dab74778ab1c3babdb84) Thanks [@zubairaziz](https://github.com/zubairaziz)! - Migrate Apollo Client to v4
+
+### Minor Changes
+
+- [#395](https://github.com/quiltt/quiltt-js/pull/395) [`f635500`](https://github.com/quiltt/quiltt-js/commit/f635500f17ab8a76aa0fb87ed7f4971e63a93f12) Thanks [@zubairaziz](https://github.com/zubairaziz)! - Enhanced SDK telemetry with standardized User-Agent headers
+
+### Patch Changes
+
+- Updated dependencies [[`f635500`](https://github.com/quiltt/quiltt-js/commit/f635500f17ab8a76aa0fb87ed7f4971e63a93f12), [`2ba646a`](https://github.com/quiltt/quiltt-js/commit/2ba646a2efcb7bef7949dab74778ab1c3babdb84)]:
+  - @quiltt/core@5.0.0
+
 ## 4.5.1
 
 ### Patch Changes

package/README.md

@@ -37,6 +37,12 @@ The `@quiltt/react` library ships with `@quiltt/core`, which provides an API cli
 
 All components automatically handle Session token management under the hood, using the `useQuilttSession` hook.
 
+For better tree-shaking, you can import components from subpaths:
+
+```tsx
+import { QuilttButton } from '@quiltt/react/components'
+```
+
 To pre-authenticate the Connector for one of your user profiles, make sure to set your token using the `QuilttProvider` provider or the `useQuilttSession` hook. See the [Authentication guides](https://www.quiltt.dev/authentication) for how to generate a Session.
 
 ### QuilttButton
@@ -63,7 +69,7 @@ export const App = () => {
       connectorId="<CONNECTOR_ID>"
       onExitSuccess={handleExitSuccess}
       className="my-css-class"
-      styles={{ borderWidth: '2px' }}
+      style={{ borderWidth: '2px' }}
       // ... other props to pass through to the button
     >
       Add Account
@@ -97,7 +103,7 @@ export const App = () => {
       connectorId="<CONNECTOR_ID>"
       onExitSuccess={handleExitSuccess}
       className="my-css-class"
-      styles={{ height: '100%' }}
+      style={{ height: '100%' }}
       // ... other props to pass through to the container
     />
   )
@@ -128,6 +134,12 @@ export default Layout
 
 For maximum control over the lifecycle of Quiltt Connector and Quiltt Sessions, you can also use hooks directly.
 
+For better tree-shaking, you can import hooks from subpaths:
+
+```tsx
+import { useQuilttSession } from '@quiltt/react/hooks'
+```
+
 ### useQuilttConnector
 
 A hook to manage the lifecycle of [Quiltt Connector](https://www.quiltt.dev/connector).
@@ -139,7 +151,7 @@ import { useQuilttConnector } from '@quiltt/react'
 
 const App = () => {
   const { open } = useQuilttConnector('<CONNECTOR_ID>', {
-    onEvent: (type) => console.log(`Received Quiltt Event: ${type}`)
+    onEvent: (type) => console.log(`Received Quiltt Event: ${type}`),
     onExitSuccess: (metadata) => console.log("Connector onExitSuccess", metadata.connectionId),
   })
 

package/dist/components/QuilttProviderRender-12s-pvnc98Lj.cjs

@@ -0,0 +1,6 @@
+'use client';
+var react = require('react');
+
+const QuilttProviderRender = react.createContext({});
+
+exports.QuilttProviderRender = QuilttProviderRender;

package/dist/components/QuilttSettings-12s-cLPT_GLC.cjs

@@ -0,0 +1,6 @@
+'use client';
+var react = require('react');
+
+const QuilttSettings = react.createContext({});
+
+exports.QuilttSettings = QuilttSettings;

package/dist/components/index.cjs

@@ -0,0 +1,211 @@
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('react/jsx-runtime');
+var react = require('react');
+var useQuilttConnector12s = require('./useQuilttConnector-12s-BLTzI3gE.cjs');
+var useQuilttRenderGuard12s = require('./useQuilttRenderGuard-12s-D9WbRzZO.cjs');
+
+/**
+ * Performs a deep equality comparison between two values
+ *
+ * This function recursively compares all properties to determine if they are equal.
+ *
+ * @example
+ * ```ts
+ * isDeepEqual({ a: 1, b: { c: 2 } }, { a: 1, b: { c: 2 } }) // true
+ * isDeepEqual({ a: 1, b: { c: 2 } }, { a: 1, b: { c: 3 } }) // false
+ * ```
+ */ const isDeepEqual = (obj1, obj2)=>{
+    // Handle primitive types and null/undefined
+    if (obj1 === obj2) return true;
+    if (obj1 === null || obj2 === null || typeof obj1 !== 'object' || typeof obj2 !== 'object') return false;
+    // Handle special object types
+    if (obj1 instanceof Date && obj2 instanceof Date) {
+        return obj1.getTime() === obj2.getTime();
+    }
+    if (obj1 instanceof RegExp && obj2 instanceof RegExp) {
+        return obj1.toString() === obj2.toString();
+    }
+    if (obj1 instanceof Map && obj2 instanceof Map) {
+        if (obj1.size !== obj2.size) return false;
+        for (const [key, value] of obj1){
+            if (!obj2.has(key) || !isDeepEqual(value, obj2.get(key))) return false;
+        }
+        return true;
+    }
+    if (obj1 instanceof Set && obj2 instanceof Set) {
+        if (obj1.size !== obj2.size) return false;
+        const arr2 = Array.from(obj2);
+        for (const item of obj1){
+            if (!arr2.some((value)=>isDeepEqual(item, value))) return false;
+        }
+        return true;
+    }
+    // Handle arrays
+    if (Array.isArray(obj1) && Array.isArray(obj2)) {
+        if (obj1.length !== obj2.length) return false;
+        return obj1.every((value, index)=>isDeepEqual(value, obj2[index]));
+    }
+    // If one is array and other isn't, they're not equal
+    if (Array.isArray(obj1) || Array.isArray(obj2)) return false;
+    const keys1 = Object.keys(obj1);
+    const keys2 = Object.keys(obj2);
+    if (keys1.length !== keys2.length) return false;
+    return keys1.every((key)=>{
+        return Object.hasOwn(obj2, key) && isDeepEqual(obj1[key], obj2[key]);
+    });
+};
+
+/**
+ * QuilttButton provides a clickable interface to open Quiltt connectors.
+ *
+ * When connectionId changes, the button will automatically update the existing
+ * connector instance with the new connection details. If you need to force a
+ * complete remount instead, set forceRemountOnConnectionChange to true.
+ */ const QuilttButton = ({ as, connectorId, connectionId, institution, forceRemountOnConnectionChange = false, onEvent, onOpen, onLoad, onExit, onExitSuccess, onExitAbort, onExitError, onClick, onHtmlLoad, children, ...props })=>{
+    // Check flag to warn about potential anti-pattern (may produce false positives for valid nested patterns)
+    useQuilttRenderGuard12s.useQuilttRenderGuard('QuilttButton');
+    // Keep track of previous connectionId for change detection
+    const prevConnectionIdRef = react.useRef(connectionId);
+    const prevCallbacksRef = react.useRef({
+        onEvent,
+        onOpen,
+        onLoad,
+        onExit,
+        onExitSuccess,
+        onExitAbort,
+        onExitError
+    });
+    // Track if callbacks have changed to help with debugging
+    const currentCallbacks = {
+        onEvent,
+        onOpen,
+        onLoad,
+        onExit,
+        onExitSuccess,
+        onExitAbort,
+        onExitError
+    };
+    const callbacksChanged = !isDeepEqual(prevCallbacksRef.current, currentCallbacks);
+    react.useEffect(()=>{
+        prevCallbacksRef.current = currentCallbacks;
+    });
+    // Warning for potential callback reference issues
+    react.useEffect(()=>{
+        if (callbacksChanged && prevConnectionIdRef.current !== undefined) {
+            console.warn('[Quiltt] Callback functions changed after initial render. ' + 'This may cause unexpected behavior. Consider memoizing callback functions ' + 'with useCallback to maintain stable references.');
+        }
+    }, [
+        callbacksChanged
+    ]);
+    const { open } = useQuilttConnector12s.useQuilttConnector(connectorId, {
+        connectionId,
+        institution,
+        nonce: props?.nonce,
+        onEvent,
+        onOpen,
+        onLoad,
+        onExit,
+        onExitSuccess,
+        onExitAbort,
+        onExitError
+    });
+    // Update previous connectionId reference
+    react.useEffect(()=>{
+        prevConnectionIdRef.current = connectionId;
+    }, [
+        connectionId
+    ]);
+    const Button = as || 'button';
+    const handleClick = (event)=>{
+        // Call the user's onClick handler first to allow for:
+        // 1. Pre-open validation
+        // 2. Preventing opening via event.preventDefault()
+        // 3. Setting up state before connector opens
+        onClick?.(event);
+        // Only open if event wasn't prevented
+        if (!event.defaultPrevented) {
+            open();
+        }
+    };
+    // Generate key for forced remounting if enabled, but respect user-provided key
+    const buttonKey = props.key ?? (forceRemountOnConnectionChange ? `${connectorId}-${connectionId || 'no-connection'}` : undefined);
+    return /*#__PURE__*/ jsxRuntime.jsx(Button, {
+        onClick: handleClick,
+        onLoad: onHtmlLoad,
+        "quiltt-connection": connectionId,
+        ...props,
+        children: children
+    }, buttonKey);
+};
+
+/**
+ * QuilttContainer uses globally shared callbacks. It's recommended you only use
+ * one Container at a time.
+ *
+ * When connectionId changes, the container will automatically update the existing
+ * connector instance with the new connection details. If you need to force a
+ * complete remount instead, set forceRemountOnConnectionChange to true.
+ */ const QuilttContainer = ({ as, connectorId, connectionId, forceRemountOnConnectionChange = false, onEvent, onLoad, onExit, onExitSuccess, onExitAbort, onExitError, children, ...props })=>{
+    // Check flag to warn about potential anti-pattern (may produce false positives for valid nested patterns)
+    useQuilttRenderGuard12s.useQuilttRenderGuard('QuilttContainer');
+    // Keep track of previous connectionId for change detection
+    const prevConnectionIdRef = react.useRef(connectionId);
+    const prevCallbacksRef = react.useRef({
+        onEvent,
+        onLoad,
+        onExit,
+        onExitSuccess,
+        onExitAbort,
+        onExitError
+    });
+    // Track if callbacks have changed to help with debugging
+    const currentCallbacks = {
+        onEvent,
+        onLoad,
+        onExit,
+        onExitSuccess,
+        onExitAbort,
+        onExitError
+    };
+    const callbacksChanged = !isDeepEqual(prevCallbacksRef.current, currentCallbacks);
+    react.useEffect(()=>{
+        prevCallbacksRef.current = currentCallbacks;
+    });
+    // Warning for potential callback reference issues
+    react.useEffect(()=>{
+        if (callbacksChanged && prevConnectionIdRef.current !== undefined) {
+            console.warn('[Quiltt] Callback functions changed after initial render. ' + 'This may cause unexpected behavior. Consider memoizing callback functions ' + 'with useCallback to maintain stable references.');
+        }
+    }, [
+        callbacksChanged
+    ]);
+    useQuilttConnector12s.useQuilttConnector(connectorId, {
+        connectionId,
+        nonce: props?.nonce,
+        onEvent,
+        onLoad,
+        onExit,
+        onExitSuccess,
+        onExitAbort,
+        onExitError
+    });
+    // Update previous connectionId reference
+    react.useEffect(()=>{
+        prevConnectionIdRef.current = connectionId;
+    }, [
+        connectionId
+    ]);
+    const Container = as || 'div';
+    // Generate key for forced remounting if enabled, but respect user-provided key
+    const containerKey = props.key ?? (forceRemountOnConnectionChange ? `${connectorId}-${connectionId || 'no-connection'}` : undefined);
+    return /*#__PURE__*/ jsxRuntime.jsx(Container, {
+        "quiltt-container": connectorId,
+        "quiltt-connection": connectionId,
+        ...props,
+        children: children
+    }, containerKey);
+};
+
+exports.QuilttButton = QuilttButton;
+exports.QuilttContainer = QuilttContainer;

package/dist/components/index.d.ts

@@ -0,0 +1,55 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { JSX, ComponentType, ElementType, PropsWithChildren, MouseEvent } from 'react';
+import { ConnectorSDKCallbacks } from '@quiltt/core';
+
+type PropsOf<Tag> = Tag extends keyof JSX.IntrinsicElements ? JSX.IntrinsicElements[Tag] : Tag extends ComponentType<infer Props> ? Props & JSX.IntrinsicAttributes : never;
+
+type BaseQuilttButtonProps<T extends ElementType> = {
+    as?: T;
+    connectorId: string;
+    connectionId?: string;
+    institution?: string;
+    /**
+     * Forces complete remount when connectionId changes.
+     * Useful as a fallback for ensuring clean state.
+     * @default false
+     */
+    forceRemountOnConnectionChange?: boolean;
+    onClick?: (event: MouseEvent<HTMLElement>) => void;
+};
+type QuilttCallbackProps = Omit<ConnectorSDKCallbacks, 'onLoad'> & {
+    onLoad?: ConnectorSDKCallbacks['onLoad'];
+    onHtmlLoad?: React.ReactEventHandler<HTMLElement>;
+};
+type QuilttButtonProps<T extends ElementType> = PropsWithChildren<BaseQuilttButtonProps<T> & QuilttCallbackProps>;
+/**
+ * QuilttButton provides a clickable interface to open Quiltt connectors.
+ *
+ * When connectionId changes, the button will automatically update the existing
+ * connector instance with the new connection details. If you need to force a
+ * complete remount instead, set forceRemountOnConnectionChange to true.
+ */
+declare const QuilttButton: <T extends ElementType = "button">({ as, connectorId, connectionId, institution, forceRemountOnConnectionChange, onEvent, onOpen, onLoad, onExit, onExitSuccess, onExitAbort, onExitError, onClick, onHtmlLoad, children, ...props }: QuilttButtonProps<T> & PropsOf<T>) => react_jsx_runtime.JSX.Element;
+
+type QuilttContainerProps<T extends ElementType> = PropsWithChildren<{
+    as?: T;
+    connectorId: string;
+    connectionId?: string;
+    /**
+     * Forces complete remount when connectionId changes.
+     * Useful as a fallback for ensuring clean state.
+     * @default false
+     */
+    forceRemountOnConnectionChange?: boolean;
+} & ConnectorSDKCallbacks>;
+/**
+ * QuilttContainer uses globally shared callbacks. It's recommended you only use
+ * one Container at a time.
+ *
+ * When connectionId changes, the container will automatically update the existing
+ * connector instance with the new connection details. If you need to force a
+ * complete remount instead, set forceRemountOnConnectionChange to true.
+ */
+declare const QuilttContainer: <T extends ElementType = "div">({ as, connectorId, connectionId, forceRemountOnConnectionChange, onEvent, onLoad, onExit, onExitSuccess, onExitAbort, onExitError, children, ...props }: QuilttContainerProps<T> & PropsOf<T>) => react_jsx_runtime.JSX.Element;
+
+export { QuilttButton, QuilttContainer };

package/dist/components/index.js

@@ -0,0 +1,208 @@
+import { jsx } from 'react/jsx-runtime';
+import { useRef, useEffect } from 'react';
+import { u as useQuilttConnector } from './useQuilttConnector-12s-UQQcvQrO.js';
+import { u as useQuilttRenderGuard } from './useQuilttRenderGuard-12s-CsS2Ma6Q.js';
+
+/**
+ * Performs a deep equality comparison between two values
+ *
+ * This function recursively compares all properties to determine if they are equal.
+ *
+ * @example
+ * ```ts
+ * isDeepEqual({ a: 1, b: { c: 2 } }, { a: 1, b: { c: 2 } }) // true
+ * isDeepEqual({ a: 1, b: { c: 2 } }, { a: 1, b: { c: 3 } }) // false
+ * ```
+ */ const isDeepEqual = (obj1, obj2)=>{
+    // Handle primitive types and null/undefined
+    if (obj1 === obj2) return true;
+    if (obj1 === null || obj2 === null || typeof obj1 !== 'object' || typeof obj2 !== 'object') return false;
+    // Handle special object types
+    if (obj1 instanceof Date && obj2 instanceof Date) {
+        return obj1.getTime() === obj2.getTime();
+    }
+    if (obj1 instanceof RegExp && obj2 instanceof RegExp) {
+        return obj1.toString() === obj2.toString();
+    }
+    if (obj1 instanceof Map && obj2 instanceof Map) {
+        if (obj1.size !== obj2.size) return false;
+        for (const [key, value] of obj1){
+            if (!obj2.has(key) || !isDeepEqual(value, obj2.get(key))) return false;
+        }
+        return true;
+    }
+    if (obj1 instanceof Set && obj2 instanceof Set) {
+        if (obj1.size !== obj2.size) return false;
+        const arr2 = Array.from(obj2);
+        for (const item of obj1){
+            if (!arr2.some((value)=>isDeepEqual(item, value))) return false;
+        }
+        return true;
+    }
+    // Handle arrays
+    if (Array.isArray(obj1) && Array.isArray(obj2)) {
+        if (obj1.length !== obj2.length) return false;
+        return obj1.every((value, index)=>isDeepEqual(value, obj2[index]));
+    }
+    // If one is array and other isn't, they're not equal
+    if (Array.isArray(obj1) || Array.isArray(obj2)) return false;
+    const keys1 = Object.keys(obj1);
+    const keys2 = Object.keys(obj2);
+    if (keys1.length !== keys2.length) return false;
+    return keys1.every((key)=>{
+        return Object.hasOwn(obj2, key) && isDeepEqual(obj1[key], obj2[key]);
+    });
+};
+
+/**
+ * QuilttButton provides a clickable interface to open Quiltt connectors.
+ *
+ * When connectionId changes, the button will automatically update the existing
+ * connector instance with the new connection details. If you need to force a
+ * complete remount instead, set forceRemountOnConnectionChange to true.
+ */ const QuilttButton = ({ as, connectorId, connectionId, institution, forceRemountOnConnectionChange = false, onEvent, onOpen, onLoad, onExit, onExitSuccess, onExitAbort, onExitError, onClick, onHtmlLoad, children, ...props })=>{
+    // Check flag to warn about potential anti-pattern (may produce false positives for valid nested patterns)
+    useQuilttRenderGuard('QuilttButton');
+    // Keep track of previous connectionId for change detection
+    const prevConnectionIdRef = useRef(connectionId);
+    const prevCallbacksRef = useRef({
+        onEvent,
+        onOpen,
+        onLoad,
+        onExit,
+        onExitSuccess,
+        onExitAbort,
+        onExitError
+    });
+    // Track if callbacks have changed to help with debugging
+    const currentCallbacks = {
+        onEvent,
+        onOpen,
+        onLoad,
+        onExit,
+        onExitSuccess,
+        onExitAbort,
+        onExitError
+    };
+    const callbacksChanged = !isDeepEqual(prevCallbacksRef.current, currentCallbacks);
+    useEffect(()=>{
+        prevCallbacksRef.current = currentCallbacks;
+    });
+    // Warning for potential callback reference issues
+    useEffect(()=>{
+        if (callbacksChanged && prevConnectionIdRef.current !== undefined) {
+            console.warn('[Quiltt] Callback functions changed after initial render. ' + 'This may cause unexpected behavior. Consider memoizing callback functions ' + 'with useCallback to maintain stable references.');
+        }
+    }, [
+        callbacksChanged
+    ]);
+    const { open } = useQuilttConnector(connectorId, {
+        connectionId,
+        institution,
+        nonce: props?.nonce,
+        onEvent,
+        onOpen,
+        onLoad,
+        onExit,
+        onExitSuccess,
+        onExitAbort,
+        onExitError
+    });
+    // Update previous connectionId reference
+    useEffect(()=>{
+        prevConnectionIdRef.current = connectionId;
+    }, [
+        connectionId
+    ]);
+    const Button = as || 'button';
+    const handleClick = (event)=>{
+        // Call the user's onClick handler first to allow for:
+        // 1. Pre-open validation
+        // 2. Preventing opening via event.preventDefault()
+        // 3. Setting up state before connector opens
+        onClick?.(event);
+        // Only open if event wasn't prevented
+        if (!event.defaultPrevented) {
+            open();
+        }
+    };
+    // Generate key for forced remounting if enabled, but respect user-provided key
+    const buttonKey = props.key ?? (forceRemountOnConnectionChange ? `${connectorId}-${connectionId || 'no-connection'}` : undefined);
+    return /*#__PURE__*/ jsx(Button, {
+        onClick: handleClick,
+        onLoad: onHtmlLoad,
+        "quiltt-connection": connectionId,
+        ...props,
+        children: children
+    }, buttonKey);
+};
+
+/**
+ * QuilttContainer uses globally shared callbacks. It's recommended you only use
+ * one Container at a time.
+ *
+ * When connectionId changes, the container will automatically update the existing
+ * connector instance with the new connection details. If you need to force a
+ * complete remount instead, set forceRemountOnConnectionChange to true.
+ */ const QuilttContainer = ({ as, connectorId, connectionId, forceRemountOnConnectionChange = false, onEvent, onLoad, onExit, onExitSuccess, onExitAbort, onExitError, children, ...props })=>{
+    // Check flag to warn about potential anti-pattern (may produce false positives for valid nested patterns)
+    useQuilttRenderGuard('QuilttContainer');
+    // Keep track of previous connectionId for change detection
+    const prevConnectionIdRef = useRef(connectionId);
+    const prevCallbacksRef = useRef({
+        onEvent,
+        onLoad,
+        onExit,
+        onExitSuccess,
+        onExitAbort,
+        onExitError
+    });
+    // Track if callbacks have changed to help with debugging
+    const currentCallbacks = {
+        onEvent,
+        onLoad,
+        onExit,
+        onExitSuccess,
+        onExitAbort,
+        onExitError
+    };
+    const callbacksChanged = !isDeepEqual(prevCallbacksRef.current, currentCallbacks);
+    useEffect(()=>{
+        prevCallbacksRef.current = currentCallbacks;
+    });
+    // Warning for potential callback reference issues
+    useEffect(()=>{
+        if (callbacksChanged && prevConnectionIdRef.current !== undefined) {
+            console.warn('[Quiltt] Callback functions changed after initial render. ' + 'This may cause unexpected behavior. Consider memoizing callback functions ' + 'with useCallback to maintain stable references.');
+        }
+    }, [
+        callbacksChanged
+    ]);
+    useQuilttConnector(connectorId, {
+        connectionId,
+        nonce: props?.nonce,
+        onEvent,
+        onLoad,
+        onExit,
+        onExitSuccess,
+        onExitAbort,
+        onExitError
+    });
+    // Update previous connectionId reference
+    useEffect(()=>{
+        prevConnectionIdRef.current = connectionId;
+    }, [
+        connectionId
+    ]);
+    const Container = as || 'div';
+    // Generate key for forced remounting if enabled, but respect user-provided key
+    const containerKey = props.key ?? (forceRemountOnConnectionChange ? `${connectorId}-${connectionId || 'no-connection'}` : undefined);
+    return /*#__PURE__*/ jsx(Container, {
+        "quiltt-container": connectorId,
+        "quiltt-connection": connectionId,
+        ...props,
+        children: children
+    }, containerKey);
+};
+
+export { QuilttButton, QuilttContainer };