@stytch/react 19.4.3 → 19.5.0

package/dist/index.js

@@ -3,7 +3,8 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var React = require('react');
-var invariant = require('./invariant-ae5a5bce.js');
+var useIsomorphicLayoutEffect = require('./useIsomorphicLayoutEffect-65746ef3.js');
+var StytchSSRProxy = require('./StytchSSRProxy-86bc42b3.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -12,10 +13,12 @@ var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 const initialUser = {
     user: null,
     fromCache: false,
+    isInitialized: false,
 };
 const initialSession = {
     session: null,
     fromCache: false,
+    isInitialized: false,
 };
 const StytchContext = React.createContext({ isMounted: false });
 const StytchUserContext = React.createContext(initialUser);
@@ -26,29 +29,38 @@ const isUIClient = (client) => {
 };
 /**
  * Returns the active User.
+ * The Stytch SDKs are used for client-side authentication and session management.
+ * Check the isInitialized property to determine if the SDK has completed initialization.
  * Check the fromCache property to determine if the user data is from persistent storage.
  * @example
- * const {user} = useStytchUser();
+ * const {user, isInitialized, fromCache} = useStytchUser();
+ * if (!isInitialized) {
+ *     return <p>Loading...</p>;
+ * }
  * return (<h1>Welcome, {user.name.first_name}</h1>);
- * @returns A {@link SWRUser}
  */
-const useStytchUser = () => {
-    invariant.invariant(useIsMounted__INTERNAL(), invariant.noProviderError('useStytchUser'));
+const useStytchUser$1 = () => {
+    useIsomorphicLayoutEffect.invariant(useIsMounted__INTERNAL(), StytchSSRProxy.noProviderError('useStytchUser'));
     return React.useContext(StytchUserContext);
 };
 /**
  * Returns the active user's Stytch session.
+ * The Stytch SDKs are used for client-side authentication and session management.
+ * Check the isInitialized property to determine if the SDK has completed initialization.
+ * Check the fromCache property to determine if the session data is from persistent storage.
  * @example
- * const {session} = useStytchSession();
+ * const {session, isInitialized, fromCache} = useStytchSession();
  * useEffect(() => {
+ *   if (!isInitialized) {
+ *     return;
+ *   }
  *   if (!session) {
  *     router.replace('/login')
  *   }
- * }, [session]);
- * @returns A {@link SWRSession}
+ * }, [session, isInitialized]);
  */
-const useStytchSession = () => {
-    invariant.invariant(useIsMounted__INTERNAL(), invariant.noProviderError('useStytchSession'));
+const useStytchSession$1 = () => {
+    useIsomorphicLayoutEffect.invariant(useIsMounted__INTERNAL(), StytchSSRProxy.noProviderError('useStytchSession'));
     return React.useContext(StytchSessionContext);
 };
 /**
@@ -62,65 +74,79 @@ const useStytchSession = () => {
  */
 const useStytch = () => {
     const ctx = React.useContext(StytchContext);
-    invariant.invariant(ctx.isMounted, invariant.noProviderError('useStytch'));
+    useIsomorphicLayoutEffect.invariant(ctx.isMounted, StytchSSRProxy.noProviderError('useStytch'));
     return ctx.client;
 };
 const withStytch = (Component) => {
     const WithStytch = (props) => {
-        invariant.invariant(useIsMounted__INTERNAL(), invariant.noProviderError('withStytch'));
+        useIsomorphicLayoutEffect.invariant(useIsMounted__INTERNAL(), StytchSSRProxy.noProviderError('withStytch'));
         return React__default["default"].createElement(Component, Object.assign({}, props, { stytch: useStytch() }));
     };
     WithStytch.displayName = `withStytch(${Component.displayName || Component.name || 'Component'})`;
     return WithStytch;
 };
-const withStytchUser = (Component) => {
+const withStytchUser$1 = (Component) => {
     const WithStytchUser = (props) => {
-        invariant.invariant(useIsMounted__INTERNAL(), invariant.noProviderError('withStytchUser'));
-        const { user, fromCache } = useStytchUser();
-        return React__default["default"].createElement(Component, Object.assign({}, props, { stytchUser: user, stytchUserIsFromCache: fromCache }));
+        useIsomorphicLayoutEffect.invariant(useIsMounted__INTERNAL(), StytchSSRProxy.noProviderError('withStytchUser'));
+        const { user, isInitialized, fromCache } = useStytchUser$1();
+        return (React__default["default"].createElement(Component, Object.assign({}, props, { stytchUser: user, stytchUserIsInitialized: isInitialized, stytchUserIsFromCache: fromCache })));
     };
     WithStytchUser.displayName = `withStytchUser(${Component.displayName || Component.name || 'Component'})`;
     return WithStytchUser;
 };
-const withStytchSession = (Component) => {
+const withStytchSession$1 = (Component) => {
     const WithStytchSession = (props) => {
-        invariant.invariant(useIsMounted__INTERNAL(), invariant.noProviderError('withStytchSession'));
-        const { session, fromCache } = useStytchSession();
-        return React__default["default"].createElement(Component, Object.assign({}, props, { stytchSession: session, stytchSessionIsFromCache: fromCache }));
+        useIsomorphicLayoutEffect.invariant(useIsMounted__INTERNAL(), StytchSSRProxy.noProviderError('withStytchSession'));
+        const { session, isInitialized, fromCache } = useStytchSession$1();
+        return (React__default["default"].createElement(Component, Object.assign({}, props, { stytchSession: session, stytchSessionIsInitialized: isInitialized, stytchSessionIsFromCache: fromCache })));
     };
     WithStytchSession.displayName = `withStytchSession(${Component.displayName || Component.name || 'Component'})`;
     return WithStytchSession;
 };
 /**
  * The Stytch Context Provider.
- * Wrap your application with this component in the root file in order to use Stytch everywhere in your app.
+ * Wrap your application with this component in order to use Stytch everywhere in your app.
  * @example
- * const stytch = new StytchHeadlessClient('public-token-<find yours in the stytch dashboard>')
+ * const stytch = createStytchHeadlessClient('public-token-<find yours in the stytch dashboard>')
  *
- * ReactDOM.render(
+ * return (
  *   <StytchProvider stytch={stytch}>
  *     <App />
- *   </StytchProvider>,
- *   document.getElementById('root'),
+ *   </StytchProvider>
  * )
  */
-const StytchProvider = ({ stytch, children, }) => {
-    invariant.invariant(!useIsMounted__INTERNAL(), invariant.providerMustBeUniqueError);
-    invariant.invariant(typeof window !== 'undefined', invariant.noSSRError);
+const StytchProvider$1 = ({ stytch, children, assumeHydrated = false, }) => {
+    useIsomorphicLayoutEffect.invariant(!useIsMounted__INTERNAL(), StytchSSRProxy.providerMustBeUniqueError);
+    useIsomorphicLayoutEffect.invariant(!assumeHydrated || typeof window !== 'undefined', 'The `assumeHydrated` prop must be set to `false` when using StytchProvider in a server environment.');
     const ctx = React.useMemo(() => ({ client: stytch, isMounted: true }), [stytch]);
-    const [{ user, session }, setClientState] = invariant.useAsyncState({
-        session: stytch.session.getInfo(),
-        user: stytch.user.getInfo(),
-    });
-    React.useEffect(() => stytch.onStateChange(() => {
-        setClientState((oldState) => {
-            const newState = {
-                session: stytch.session.getInfo(),
-                user: stytch.user.getInfo(),
-            };
-            return invariant.mergeWithStableProps(oldState, newState);
-        });
-    }), [setClientState, stytch]);
+    const getHydratedState = React.useCallback(() => {
+        return {
+            session: Object.assign(Object.assign({}, stytch.session.getInfo()), { isInitialized: true }),
+            user: Object.assign(Object.assign({}, stytch.user.getInfo()), { isInitialized: true }),
+        };
+    }, [stytch]);
+    const getInitialState = () => {
+        return {
+            session: initialSession,
+            user: initialUser,
+        };
+    };
+    const [{ user, session }, setClientState] = useIsomorphicLayoutEffect.useAsyncState(() => assumeHydrated ? getHydratedState() : getInitialState());
+    // Store the initial value of `assumeHydrated` in a ref, because it is
+    // logically only relevant for the first render
+    const assumeHydratedRef = React.useRef(assumeHydrated);
+    React.useEffect(() => {
+        if (StytchSSRProxy.isStytchSSRProxy(stytch)) {
+            return;
+        }
+        const updateState = () => {
+            setClientState((oldState) => useIsomorphicLayoutEffect.mergeWithStableProps(oldState, getHydratedState()));
+        };
+        if (!assumeHydratedRef.current) {
+            updateState();
+        }
+        return stytch.onStateChange(updateState);
+    }, [getHydratedState, setClientState, stytch]);
     return (React__default["default"].createElement(StytchContext.Provider, { value: ctx },
         React__default["default"].createElement(StytchUserContext.Provider, { value: user },
             React__default["default"].createElement(StytchSessionContext.Provider, { value: session }, children))));
@@ -128,10 +154,10 @@ const StytchProvider = ({ stytch, children, }) => {
 
 /**
  * The Stytch Login Screen component.
- * This component can only be used with a {@link StytchUIClient} client constructor
- * passed into the {@link StytchProvider}
+ * This component can only be used with a Stytch UI Client
+ * passed into the StytchProvider.
  *
- * See the {@link https://stytch.com/docs/sdks/javascript-sdk online reference}
+ * See the {@link https://stytch.com/docs/sdks online reference}
  *
  * @example
  * <StytchLogin
@@ -154,15 +180,14 @@ const StytchProvider = ({ stytch, children, }) => {
  *     onEvent: (event) => console.log(event)
  *   }}
  * />
- * @param props {@link StytchProps}
  */
 const StytchLogin = ({ config, styles, callbacks, }) => {
-    invariant.invariant(useIsMounted__INTERNAL(), invariant.noProviderError('<StytchLogin />'));
+    useIsomorphicLayoutEffect.invariant(useIsMounted__INTERNAL(), StytchSSRProxy.noProviderError('<StytchLogin />'));
     const stytchClient = useStytch();
     const containerEl = React.useRef(null);
-    React.useLayoutEffect(() => {
+    useIsomorphicLayoutEffect.useIsomorphicLayoutEffect(() => {
         if (!isUIClient(stytchClient)) {
-            throw Error(invariant.noHeadlessClientError);
+            throw Error(StytchSSRProxy.noHeadlessClientError);
         }
         if (!containerEl.current) {
             return;
@@ -172,7 +197,7 @@ const StytchLogin = ({ config, styles, callbacks, }) => {
             containerEl.current.id = `stytch-magic-link-${randId}`;
         }
         stytchClient.mountLogin({
-            config: config,
+            config,
             callbacks,
             elementId: `#${containerEl.current.id}`,
             styles,
@@ -182,10 +207,10 @@ const StytchLogin = ({ config, styles, callbacks, }) => {
 };
 /**
  * The Stytch Reset Password component.
- * This component can only be used with a {@link StytchUIClient} client constructor
- * passed into the {@link StytchProvider}
+ * This component can only be used with a Stytch UI Client
+ * passed into the StytchProvider.
  *
- * See the {@link https://stytch.com/docs/sdks/javascript-sdk online reference}
+ * See the {@link https://stytch.com/docs/sdks online reference}
  *
  * @example
  * <StytchPasswordReset
@@ -209,19 +234,14 @@ const StytchLogin = ({ config, styles, callbacks, }) => {
  *     onEvent: (event) => console.log(event)
  *   }}
  * />
- *
- * @param config - A {@link StytchLoginConfig} object
- * @param passwordResetToken - A Stytch password reset token
- * @param styles - An optional {@link StyleConfig} to customize the look and feel of the screen.
- * @param callbacks - An optional {@link Callbacks} object
  */
 const StytchPasswordReset = ({ config, styles, callbacks, passwordResetToken, }) => {
-    invariant.invariant(useIsMounted__INTERNAL(), invariant.noProviderError('<StytchResetPassword />'));
+    useIsomorphicLayoutEffect.invariant(useIsMounted__INTERNAL(), StytchSSRProxy.noProviderError('<StytchResetPassword />'));
     const stytchClient = useStytch();
     const containerEl = React.useRef(null);
-    React.useLayoutEffect(() => {
+    useIsomorphicLayoutEffect.useIsomorphicLayoutEffect(() => {
         if (!isUIClient(stytchClient)) {
-            throw Error(invariant.noHeadlessClientError);
+            throw Error(StytchSSRProxy.noHeadlessClientError);
         }
         if (!containerEl.current) {
             return;
@@ -232,7 +252,7 @@ const StytchPasswordReset = ({ config, styles, callbacks, passwordResetToken, })
         }
         if (passwordResetToken) {
             stytchClient.mountResetPassword({
-                config: config,
+                config,
                 callbacks,
                 elementId: `#${containerEl.current.id}`,
                 styles,
@@ -242,53 +262,46 @@ const StytchPasswordReset = ({ config, styles, callbacks, passwordResetToken, })
     }, [stytchClient, config, styles, callbacks, passwordResetToken]);
     return React__default["default"].createElement("div", { ref: containerEl });
 };
+/**
+ * The Stytch Passkey Registration component.
+ * This component can only be used with a Stytch UI Client
+ * passed into the StytchProvider.
+ *
+ * See the {@link https://stytch.com/docs/sdks online reference}
+ *
+ * @example
+ * const styles = {
+ *     container: {
+ *       backgroundColor: '#e11e1e',
+ *     },
+ *     colors: {
+ *       primary: '#ff00f7',
+ *       secondary: '#5C727D',
+ *     },
+ *    }
+ *
+ * <StytchPasskeyRegistration
+ *   styles={styles}
+ *   callbacks={{
+ *     onEvent: (event) => console.log(event)
+ *   }}
+ * />
+ */
 const StytchPasskeyRegistration = ({ config, styles, callbacks, }) => {
-    /**
-     * The Stytch Passkey Registration component.
-     * This component can only be used with a {@link StytchUIClient} client constructor
-     * passed into the {@link StytchProvider}
-     *
-     * See the {@link https://stytch.com/docs/sdks/javascript-sdk online reference}
-     *
-     *
-     * @example
-     * const styles = {
-     *     container: {
-     *       backgroundColor: '#e11e1e',
-     *     },
-     *     colors: {
-     *       primary: '#ff00f7',
-     *       secondary: '#5C727D',
-     *     },
-     *    }
-     *
-     * <StytchPasskeyRegistration
-     *   config={{
-     *      products: ['passkey'],
-     *    }}
-     *   styles={styles}
-     *   callbacks={{
-     *     onEvent: (event) => console.log(event)
-     *   }}
-     * />
-     * @param config - A {@link StytchLoginConfig} object
-     * @param styles - An optional {@link StyleConfig} to customize the look and feel of the screen.
-     * @param callbacks - An optional {@link Callbacks} object
-     */
-    invariant.invariant(useIsMounted__INTERNAL(), invariant.noProviderError('<StytchPasskeyRegistration />'));
+    useIsomorphicLayoutEffect.invariant(useIsMounted__INTERNAL(), StytchSSRProxy.noProviderError('<StytchPasskeyRegistration />'));
     const stytchClient = useStytch();
-    const user = useStytchUser();
+    const user = useStytchUser$1();
     const containerEl = React.useRef(null);
-    React.useLayoutEffect(() => {
+    useIsomorphicLayoutEffect.useIsomorphicLayoutEffect(() => {
         if (!isUIClient(stytchClient)) {
-            throw Error(invariant.noHeadlessClientError);
+            throw Error(StytchSSRProxy.noHeadlessClientError);
         }
         if (!containerEl.current) {
             return;
         }
         if (!containerEl.current.id) {
             const randId = Math.floor(Math.random() * 1e6);
-            containerEl.current.id = `stytch-reset-passkey-${randId}`;
+            containerEl.current.id = `stytch-passkey-registration-${randId}`;
         }
         stytchClient.mountPasskeyRegistration({
             config,
@@ -303,11 +316,10 @@ const StytchPasskeyRegistration = ({ config, styles, callbacks, }) => {
  * The Stytch IDP component.
  * Parses OAuth Authorization params (client_id, scope, nonce, etc.) out of the page URL.
  * Requires the user to be logged in.
- * This component can only be used with a {@link StytchUIClient} client constructor
- * passed into the {@link StytchProvider}
- *
- * See the {@link https://stytch.com/docs/sdks/javascript-sdk online reference}
+ * This component can only be used with a Stytch UI Client
+ * passed into the StytchProvider.
  *
+ * See the {@link https://stytch.com/docs/sdks online reference}
  *
  * @example
  * const styles = {
@@ -326,17 +338,15 @@ const StytchPasskeyRegistration = ({ config, styles, callbacks, }) => {
  *     onEvent: (event) => console.log(event)
  *   }}
  * />
- * @param styles - An optional {@link StyleConfig} to customize the look and feel of the screen.
- * @param callbacks - An optional {@link Callbacks} object
  */
 const IdentityProvider = ({ styles, callbacks }) => {
-    invariant.invariant(useIsMounted__INTERNAL(), invariant.noProviderError('<IdentityProvider />'));
+    useIsomorphicLayoutEffect.invariant(useIsMounted__INTERNAL(), StytchSSRProxy.noProviderError('<IdentityProvider />'));
     const stytchClient = useStytch();
-    const user = useStytchUser();
+    const user = useStytchUser$1();
     const containerEl = React.useRef(null);
-    React.useLayoutEffect(() => {
+    useIsomorphicLayoutEffect.useIsomorphicLayoutEffect(() => {
         if (!isUIClient(stytchClient)) {
-            throw Error(invariant.noHeadlessClientError);
+            throw Error(StytchSSRProxy.noHeadlessClientError);
         }
         if (!containerEl.current) {
             return;
@@ -354,6 +364,55 @@ const IdentityProvider = ({ styles, callbacks }) => {
     return React__default["default"].createElement("div", { ref: containerEl });
 };
 
+/**
+ * Returns the active User.
+ * The Stytch SDKs are used for client-side authentication and session management.
+ * Check the isInitialized property to determine if the SDK has completed initialization.
+ * Check the fromCache property to determine if the user data is from persistent storage.
+ * @example
+ * const {user, isInitialized, fromCache} = useStytchUser();
+ * if (!isInitialized) {
+ *     return <p>Loading...</p>;
+ * }
+ * return (<h1>Welcome, {user.name.first_name}</h1>);
+ */
+const useStytchUser = useStytchUser$1;
+/**
+ * Returns the active user's Stytch session.
+ * The Stytch SDKs are used for client-side authentication and session management.
+ * Check the isInitialized property to determine if the SDK has completed initialization.
+ * Check the fromCache property to determine if the session data is from persistent storage.
+ * @example
+ * const {session, isInitialized, fromCache} = useStytchSession();
+ * useEffect(() => {
+ *   if (!isInitialized) {
+ *     return;
+ *   }
+ *   if (!session) {
+ *     router.replace('/login')
+ *   }
+ * }, [session, isInitialized]);
+ */
+const useStytchSession = useStytchSession$1;
+const withStytchUser = withStytchUser$1;
+const withStytchSession = withStytchSession$1;
+/**
+ * The Stytch Context Provider.
+ * Wrap your application with this component in order to use Stytch everywhere in your app.
+ * @example
+ * const stytch = createStytchHeadlessClient('public-token-<find yours in the stytch dashboard>')
+ *
+ * ReactDOM.render(
+ *   <StytchProvider stytch={stytch}>
+ *     <App />
+ *   </StytchProvider>,
+ *   document.getElementById('root'),
+ * )
+ */
+const StytchProvider = ({ stytch, children, assumeHydrated = true, }) => {
+    return (React__default["default"].createElement(StytchProvider$1, { stytch: stytch, assumeHydrated: assumeHydrated }, children));
+};
+
 exports.IdentityProvider = IdentityProvider;
 exports.StytchLogin = StytchLogin;
 exports.StytchPasskeyRegistration = StytchPasskeyRegistration;

package/dist/index.ui.d.ts

@@ -0,0 +1,17 @@
+import { StytchUIClient } from "@stytch/vanilla-js";
+/**
+ * Creates a Stytch UI client object to call the Stytch APIs and render Stytch UI components.
+ * The Stytch client is not available serverside.
+ * If you do not use Stytch UI components, use {@link createStytchHeadlessClient} to reduce your bundle size.
+ * @example
+ * const stytch = createStytchUIClient('public-token-<find yours in the stytch dashboard>')
+ *
+ * return (
+ *   <StytchProvider stytch={stytch}>
+ *     <App />
+ *   </StytchProvider>
+ * )
+ * @returns A {@link StytchUIClient}
+ */
+declare const createStytchUIClient: <TProjectConfiguration extends Partial<import("@stytch/core/public").StytchProjectConfiguration> = Stytch.DefaultProjectConfiguration>(_PUBLIC_TOKEN: string, options?: import("@stytch/core/public").StytchClientOptions | undefined) => StytchUIClient<TProjectConfiguration>;
+export { createStytchUIClient };

package/dist/index.ui.esm.d.ts

@@ -0,0 +1,17 @@
+import { StytchUIClient } from "@stytch/vanilla-js";
+/**
+ * Creates a Stytch UI client object to call the Stytch APIs and render Stytch UI components.
+ * The Stytch client is not available serverside.
+ * If you do not use Stytch UI components, use {@link createStytchHeadlessClient} to reduce your bundle size.
+ * @example
+ * const stytch = createStytchUIClient('public-token-<find yours in the stytch dashboard>')
+ *
+ * return (
+ *   <StytchProvider stytch={stytch}>
+ *     <App />
+ *   </StytchProvider>
+ * )
+ * @returns A {@link StytchUIClient}
+ */
+declare const createStytchUIClient: <TProjectConfiguration extends Partial<import("@stytch/core/public").StytchProjectConfiguration> = Stytch.DefaultProjectConfiguration>(_PUBLIC_TOKEN: string, options?: import("@stytch/core/public").StytchClientOptions | undefined) => StytchUIClient<TProjectConfiguration>;
+export { createStytchUIClient };

package/dist/index.ui.esm.js

@@ -0,0 +1,25 @@
+import { StytchUIClient } from '@stytch/vanilla-js';
+import { c as createStytchSSRProxy } from './StytchSSRProxy-34c789b5.js';
+
+/**
+ * Creates a Stytch UI client object to call the Stytch APIs and render Stytch UI components.
+ * The Stytch client is not available serverside.
+ * If you do not use Stytch UI components, use {@link createStytchHeadlessClient} to reduce your bundle size.
+ * @example
+ * const stytch = createStytchUIClient('public-token-<find yours in the stytch dashboard>')
+ *
+ * return (
+ *   <StytchProvider stytch={stytch}>
+ *     <App />
+ *   </StytchProvider>
+ * )
+ * @returns A {@link StytchUIClient}
+ */
+const createStytchUIClient = (...args) => {
+    if (typeof window === 'undefined') {
+        return createStytchSSRProxy();
+    }
+    return new StytchUIClient(...args);
+};
+
+export { createStytchUIClient };

package/dist/index.ui.js

@@ -0,0 +1,29 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var vanillaJs = require('@stytch/vanilla-js');
+var StytchSSRProxy = require('./StytchSSRProxy-86bc42b3.js');
+
+/**
+ * Creates a Stytch UI client object to call the Stytch APIs and render Stytch UI components.
+ * The Stytch client is not available serverside.
+ * If you do not use Stytch UI components, use {@link createStytchHeadlessClient} to reduce your bundle size.
+ * @example
+ * const stytch = createStytchUIClient('public-token-<find yours in the stytch dashboard>')
+ *
+ * return (
+ *   <StytchProvider stytch={stytch}>
+ *     <App />
+ *   </StytchProvider>
+ * )
+ * @returns A {@link StytchUIClient}
+ */
+const createStytchUIClient = (...args) => {
+    if (typeof window === 'undefined') {
+        return StytchSSRProxy.createStytchSSRProxy();
+    }
+    return new vanillaJs.StytchUIClient(...args);
+};
+
+exports.createStytchUIClient = createStytchUIClient;

package/dist/useIsomorphicLayoutEffect-1babb81e.d.ts

@@ -0,0 +1,24 @@
+import { Dispatch, SetStateAction, useEffect } from "react";
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+declare function invariant(cond: any, message: string): asserts cond;
+// useState can cause memory leaks if it is set after the component unmounted. For example, if it is
+// set after `await`, or in a `then`, `catch`, or `finally`, or in a setTimout/setInterval.
+declare const useAsyncState: <T>(initialState: T | (() => T)) => [
+    T,
+    Dispatch<SetStateAction<T>>
+];
+/**
+ * Returns a version of `newValue` whose properties that are deeply equal to
+ * those in `oldValue` are replaced with those from `oldValue`. This provides a
+ * limited form of "structural sharing" that provides a stable reference for
+ * unchanged slices of the object.
+ *
+ * If `oldValue` and `newValue` are referentially equal, the same value is
+ * returned.
+ *
+ * @param oldValue The old value
+ * @param newValue The new value
+ */
+declare const mergeWithStableProps: <T extends Record<string, unknown>, U extends Record<string, unknown> = T>(oldValue: U, newValue: T) => T;
+declare const useIsomorphicLayoutEffect: typeof useEffect;
+export { useIsomorphicLayoutEffect as default, invariant, useAsyncState, mergeWithStableProps };

package/dist/{invariant-568a7633.js → useIsomorphicLayoutEffect-1babb81e.js}

@@ -1,4 +1,4 @@
-import { useRef, useState, useEffect, useCallback } from 'react';
+import { useRef, useState, useEffect, useCallback, useLayoutEffect } from 'react';
 
 const createDeepEqual = ({ KEYS_TO_EXCLUDE = [] } = {}) => {
     // If comparing functions, this may need some work. Not sure the
@@ -68,21 +68,13 @@ const useAsyncState = (initialState) => {
     return [state, setStateAction];
 };
 
-const noProviderError = (item, provider = 'StytchProvider') => `${item} can only be used inside <${provider}>.`;
-const providerMustBeUniqueError = 'You cannot render a <StytchProvider> inside another <StytchProvider>.';
-const B2BProviderMustBeUniqueError = 'You cannot render a <StytchB2BProvider> inside another <StytchB2BProvider>.';
-const noSSRError = `The @stytch/react library is not meant for use with serverside environments like NextJS.
-Use the @stytch/nextjs library instead - 
-npm remove @stytch/react && npm install @stytch/nextjs
-`;
-const noHeadlessClientError = `Tried to create a Stytch Login UI element using the Stytch Headless SDK.
-You must use the UI SDK to use UI elements.
-Please make sure you are importing from @stytch/vanilla-js and not from the @stytch/vanilla-js/headless.`;
-
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 function invariant(cond, message) {
     if (!cond)
         throw new Error(message);
 }
 
-export { B2BProviderMustBeUniqueError as B, noSSRError as a, noHeadlessClientError as b, invariant as i, mergeWithStableProps as m, noProviderError as n, providerMustBeUniqueError as p, useAsyncState as u };
+// cc https://medium.com/@alexandereardon/uselayouteffect-and-ssr-192986cdcf7a
+const useIsomorphicLayoutEffect = typeof window !== 'undefined' ? useLayoutEffect : useEffect;
+
+export { useIsomorphicLayoutEffect as a, invariant as i, mergeWithStableProps as m, useAsyncState as u };

package/dist/useIsomorphicLayoutEffect-65746ef3.d.ts

@@ -0,0 +1,24 @@
+import { Dispatch, SetStateAction, useEffect } from "react";
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+declare function invariant(cond: any, message: string): asserts cond;
+// useState can cause memory leaks if it is set after the component unmounted. For example, if it is
+// set after `await`, or in a `then`, `catch`, or `finally`, or in a setTimout/setInterval.
+declare const useAsyncState: <T>(initialState: T | (() => T)) => [
+    T,
+    Dispatch<SetStateAction<T>>
+];
+/**
+ * Returns a version of `newValue` whose properties that are deeply equal to
+ * those in `oldValue` are replaced with those from `oldValue`. This provides a
+ * limited form of "structural sharing" that provides a stable reference for
+ * unchanged slices of the object.
+ *
+ * If `oldValue` and `newValue` are referentially equal, the same value is
+ * returned.
+ *
+ * @param oldValue The old value
+ * @param newValue The new value
+ */
+declare const mergeWithStableProps: <T extends Record<string, unknown>, U extends Record<string, unknown> = T>(oldValue: U, newValue: T) => T;
+declare const useIsomorphicLayoutEffect: typeof useEffect;
+export { useIsomorphicLayoutEffect as default, invariant, useAsyncState, mergeWithStableProps };

package/dist/{invariant-ae5a5bce.js → useIsomorphicLayoutEffect-65746ef3.js}

@@ -70,28 +70,16 @@ const useAsyncState = (initialState) => {
     return [state, setStateAction];
 };
 
-const noProviderError = (item, provider = 'StytchProvider') => `${item} can only be used inside <${provider}>.`;
-const providerMustBeUniqueError = 'You cannot render a <StytchProvider> inside another <StytchProvider>.';
-const B2BProviderMustBeUniqueError = 'You cannot render a <StytchB2BProvider> inside another <StytchB2BProvider>.';
-const noSSRError = `The @stytch/react library is not meant for use with serverside environments like NextJS.
-Use the @stytch/nextjs library instead - 
-npm remove @stytch/react && npm install @stytch/nextjs
-`;
-const noHeadlessClientError = `Tried to create a Stytch Login UI element using the Stytch Headless SDK.
-You must use the UI SDK to use UI elements.
-Please make sure you are importing from @stytch/vanilla-js and not from the @stytch/vanilla-js/headless.`;
-
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 function invariant(cond, message) {
     if (!cond)
         throw new Error(message);
 }
 
-exports.B2BProviderMustBeUniqueError = B2BProviderMustBeUniqueError;
+// cc https://medium.com/@alexandereardon/uselayouteffect-and-ssr-192986cdcf7a
+const useIsomorphicLayoutEffect = typeof window !== 'undefined' ? React.useLayoutEffect : React.useEffect;
+
 exports.invariant = invariant;
 exports.mergeWithStableProps = mergeWithStableProps;
-exports.noHeadlessClientError = noHeadlessClientError;
-exports.noProviderError = noProviderError;
-exports.noSSRError = noSSRError;
-exports.providerMustBeUniqueError = providerMustBeUniqueError;
 exports.useAsyncState = useAsyncState;
+exports.useIsomorphicLayoutEffect = useIsomorphicLayoutEffect;