@stytch/react 18.0.0 → 18.2.0

package/dist/b2b/index.js

@@ -2,309 +2,14 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
+var StytchB2BContext = require('../StytchB2BContext-ce9e254c.js');
 var React = require('react');
+var invariant = require('../invariant-ae5a5bce.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 
-const createDeepEqual = ({ KEYS_TO_EXCLUDE = [] } = {}) => {
-    // If comparing functions, this may need some work. Not sure the
-    // best path for this: compare instance (what it currently does),
-    // stringify and compare, etc.
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    const deepEqual = (a, b) => {
-        // Ensures type is the same
-        if (typeof a !== typeof b)
-            return false;
-        // arrays, null, and objects all have type 'object'
-        if (a === null || b === null)
-            return a === b;
-        if (typeof a === 'object') {
-            if (Object.keys(a).length !== Object.keys(b).length || Object.keys(a).some((k) => !(k in b)))
-                return false;
-            return Object.entries(a)
-                .filter(([k]) => !KEYS_TO_EXCLUDE.includes(k))
-                .every(([k, v]) => deepEqual(v, b[k]));
-        }
-        // boolean, string, number, undefined
-        return a === b;
-    };
-    return deepEqual;
-};
-
-const deepEqual = createDeepEqual();
-/**
- * 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
- */
-const mergeWithStableProps = (oldValue, newValue) => {
-    // If the values are already referentially the same, just return the new value
-    if (oldValue === newValue) {
-        return newValue;
-    }
-    return Object.keys(oldValue).reduce((acc, key) => {
-        if (key in newValue && deepEqual(oldValue[key], newValue[key])) {
-            acc[key] = oldValue[key];
-        }
-        return acc;
-    }, Object.assign({}, newValue));
-};
-
-const noProviderError = (item, provider = 'StytchProvider') => `${item} can only be used inside <${provider}>.`;
-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);
-}
-
-// 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.
-const useAsyncState = (initialState) => {
-    const isMounted = React.useRef(true);
-    const [state, setState] = React.useState(initialState);
-    React.useEffect(() => {
-        isMounted.current = true;
-        return () => {
-            isMounted.current = false;
-        };
-    }, []);
-    const setStateAction = React.useCallback((newState) => {
-        isMounted.current && setState(newState);
-    }, []);
-    return [state, setStateAction];
-};
-
-const initialMember = {
-    member: null,
-    fromCache: false,
-};
-const initialMemberSession = {
-    session: null,
-    fromCache: false,
-};
-const initialOrganization = {
-    organization: null,
-    fromCache: false,
-};
-const StytchB2BContext = React.createContext({ isMounted: false });
-const StytchMemberContext = React.createContext(initialMember);
-const StytchMemberSessionContext = React.createContext(initialMemberSession);
-const StytchOrganizationContext = React.createContext(initialOrganization);
-const useIsMounted__INTERNAL = () => React.useContext(StytchB2BContext).isMounted;
-const isUIClient = (client) => {
-    return client.mount !== undefined;
-};
-/**
- * Returns the active Member.
- * Check the fromCache property to determine if the member data is from persistent storage.
- * @example
- * const {member} = useStytchMember();
- * return (<h1>Welcome, {member.name}</h1>);
- * @returns A {@link SWRUser}
- */
-const useStytchMember = () => {
-    invariant(useIsMounted__INTERNAL(), noProviderError('useStytchMember', 'StytchB2BProvider'));
-    return React.useContext(StytchMemberContext);
-};
-/**
- * Returns the active member's Stytch member session.
- * @example
- * const { session } = useStytchMemberSession();
- * useEffect(() => {
- *   if (!session) {
- *     router.replace('/login')
- *   }
- * }, [session]);
- * @returns A {@link SWRMemberSession}
- */
-const useStytchMemberSession = () => {
-    invariant(useIsMounted__INTERNAL(), noProviderError('useStytchMemberSession', 'StytchB2BProvider'));
-    return React.useContext(StytchMemberSessionContext);
-};
-/**
- * Returns the active Stytch organization.
- * @example
- * const { organization } = useStytchOrganization();
- * return organization ? <p>Welcome to {organization.organization_name}</p> : <p>Log in to continue!</p>;
- * @returns A {@link SWROrganization}
- */
-const useStytchOrganization = () => {
-    invariant(useIsMounted__INTERNAL(), noProviderError('useStytchOrganization', 'StytchB2BProvider'));
-    return React.useContext(StytchOrganizationContext);
-};
-/**
- * Determines whether the logged-in member is allowed to perform the specified action on the specified resource.
- * Returns `true` if the member can perform the action, `false` otherwise.
- *
- * If the member is not logged in, this method will always return false.
- * If the resource or action provided are not valid for the configured RBAC policy, this method will return false.
- *
- * Remember - authorization checks for sensitive actions should always occur on the backend as well.
- * @example
- * const isAuthorized = useStytchIsAuthorized<Permissions>('documents', 'edit');
- * return <button disabled={!isAuthorized}>Edit</button>
- */
-const useStytchIsAuthorized = (resourceId, action) => {
-    invariant(useIsMounted__INTERNAL(), noProviderError('useStytchIsAuthorized', 'StytchB2BProvider'));
-    const client = useStytchB2BClient();
-    const { session } = useStytchMemberSession();
-    const [isAuthorized, setIsAuthorized] = useAsyncState({
-        fromCache: true,
-        isAuthorized: client.rbac.isAuthorizedSync(resourceId, action),
-    });
-    React.useEffect(() => {
-        client.rbac.isAuthorized(resourceId, action).then((isAuthorized) => setIsAuthorized({
-            fromCache: false,
-            isAuthorized,
-        }));
-    }, [client, session === null || session === void 0 ? void 0 : session.roles, resourceId, action, setIsAuthorized]);
-    return isAuthorized;
-};
-/**
- * Returns the Stytch B2B client stored in the Stytch context.
- *
- * @example
- * const stytch = useStytchB2BClient();
- * useEffect(() => {
- *   stytch.magicLinks.authenticate('...')
- * }, [stytch]);
- */
-const useStytchB2BClient = () => {
-    const ctx = React.useContext(StytchB2BContext);
-    invariant(ctx.isMounted, noProviderError('useStytchB2BClient', 'StytchB2BProvider'));
-    return ctx.client;
-};
-const withStytchB2BClient = (Component) => {
-    const WithStytch = (props) => {
-        invariant(useIsMounted__INTERNAL(), noProviderError('withStytchB2BClient', 'StytchB2BProvider'));
-        return React__default['default'].createElement(Component, Object.assign({}, props, { stytch: useStytchB2BClient() }));
-    };
-    WithStytch.displayName = `withStytch(${Component.displayName || Component.name || 'Component'})`;
-    return WithStytch;
-};
-const withStytchMember = (Component) => {
-    const WithStytchUser = (props) => {
-        invariant(useIsMounted__INTERNAL(), noProviderError('withStytchMember', 'StytchB2BProvider'));
-        const { member, fromCache } = useStytchMember();
-        return React__default['default'].createElement(Component, Object.assign({}, props, { stytchMember: member, stytchMemberIsFromCache: fromCache }));
-    };
-    WithStytchUser.displayName = `withStytchUser(${Component.displayName || Component.name || 'Component'})`;
-    return WithStytchUser;
-};
-const withStytchMemberSession = (Component) => {
-    const WithStytchSession = (props) => {
-        invariant(useIsMounted__INTERNAL(), noProviderError('withStytchMemberSession', 'StytchB2BProvider'));
-        const { session, fromCache } = useStytchMemberSession();
-        return React__default['default'].createElement(Component, Object.assign({}, props, { stytchMemberSession: session, stytchMemberSessionIsFromCache: fromCache }));
-    };
-    WithStytchSession.displayName = `withStytchSession(${Component.displayName || Component.name || 'Component'})`;
-    return WithStytchSession;
-};
-const withStytchOrganization = (Component) => {
-    const WithStytchOrganization = (props) => {
-        invariant(useIsMounted__INTERNAL(), noProviderError('withStytchOrganization', 'StytchB2BProvider'));
-        const { organization, fromCache } = useStytchOrganization();
-        return React__default['default'].createElement(Component, Object.assign({}, props, { stytchOrganization: organization, stytchOrganizationIsFromCache: fromCache }));
-    };
-    WithStytchOrganization.displayName = `withStytchOrganization(${Component.displayName || Component.name || 'Component'})`;
-    return WithStytchOrganization;
-};
-/**
- * Wrap your component with this HOC in order to receive the permissions for the logged-in member.
- * Evaluates all permissions granted to the logged-in member.
- * Returns a Record<RoleId, Record<Action, boolean>> response indicating the member's permissions.
- * Each boolean will be `true` if the member can perform the action, `false` otherwise.
- *
- * If the member is not logged in, all values will be false.
- *
- * Remember - authorization checks for sensitive actions should always occur on the backend as well.
- * @example
- * type Permissions = {
- *   document: 'create' | 'read' | 'write
- *   image: 'create' | 'read'
- * }
- *
- * const MyComponent = (props) => {
- *   const canEditDocuments = props.stytchPermissions.document.edit;
- *   const canReadImages = props.stytchPermissions.image.read;
- * }
- * return withStytchPermissions<Permissions>(MyComponent)
- */
-const withStytchPermissions = (Component) => {
-    const WithStytchPermissions = (props) => {
-        invariant(useIsMounted__INTERNAL(), noProviderError('useRBACPermissions', 'StytchB2BProvider'));
-        const client = useStytchB2BClient();
-        const { session } = useStytchMemberSession();
-        const [permissions, setPermissions] = useAsyncState({ loaded: false, value: null });
-        React.useEffect(() => {
-            client.rbac
-                .allPermissions()
-                .then((permissions) => setPermissions({ loaded: true, value: permissions }));
-        }, [client, session === null || session === void 0 ? void 0 : session.roles, setPermissions]);
-        if (!permissions.loaded) {
-            return null;
-        }
-        return React__default['default'].createElement(Component, Object.assign({}, props, { stytchPermissions: permissions.value }));
-    };
-    WithStytchPermissions.displayName = `withStytchPermissions(${Component.displayName || Component.name || 'Component'})`;
-    return WithStytchPermissions;
-};
-/**
- * The Stytch Context Provider.
- * Wrap your application with this component in the root file in order to use Stytch everywhere in your app.
- * @example
- * const stytch = new StytchB2BHeadlessClient('public-token-<find yours in the stytch dashboard>')
- *
- * ReactDOM.render(
- *   <StytchB2BProvider stytch={stytch}>
- *     <App />
- *   </StytchProvider>,
- *   document.getElementById('root'),
- * )
- */
-const StytchB2BProvider = ({ stytch, children }) => {
-    invariant(!useIsMounted__INTERNAL(), B2BProviderMustBeUniqueError);
-    invariant(typeof window !== 'undefined', noSSRError);
-    const ctx = React.useMemo(() => ({ client: stytch, isMounted: true }), [stytch]);
-    const [{ member, session, organization }, setClientState] = useAsyncState({
-        session: stytch.session.getInfo(),
-        member: stytch.self.getInfo(),
-        organization: stytch.organization.getInfo(),
-    });
-    React.useEffect(() => stytch.onStateChange(() => {
-        setClientState((oldState) => {
-            const newState = {
-                session: stytch.session.getInfo(),
-                member: stytch.self.getInfo(),
-                organization: stytch.organization.getInfo(),
-            };
-            return mergeWithStableProps(oldState, newState);
-        });
-    }), [setClientState, stytch]);
-    return (React__default['default'].createElement(StytchB2BContext.Provider, { value: ctx },
-        React__default['default'].createElement(StytchOrganizationContext.Provider, { value: organization },
-            React__default['default'].createElement(StytchMemberContext.Provider, { value: member },
-                React__default['default'].createElement(StytchMemberSessionContext.Provider, { value: session }, children)))));
-};
-
 /**
  * The Stytch B2B UI component.
  * This component can only be used with a {@link StytchB2BUIClient} client constructor
@@ -340,12 +45,12 @@ const StytchB2BProvider = ({ stytch, children }) => {
  * @param props {@link StytchB2BProps}
  */
 const StytchB2B = ({ styles, callbacks, config }) => {
-    invariant(useIsMounted__INTERNAL(), noProviderError('<StytchB2B />'));
-    const stytchClient = useStytchB2BClient();
+    invariant.invariant(StytchB2BContext.useIsMounted__INTERNAL(), invariant.noProviderError('<StytchB2B />'));
+    const stytchClient = StytchB2BContext.useStytchB2BClient();
     const containerEl = React.useRef(null);
     React.useLayoutEffect(() => {
-        if (!isUIClient(stytchClient)) {
-            throw Error(noHeadlessClientError);
+        if (!StytchB2BContext.isUIClient(stytchClient)) {
+            throw Error(invariant.noHeadlessClientError);
         }
         if (!containerEl.current) {
             return;
@@ -365,15 +70,15 @@ const StytchB2B = ({ styles, callbacks, config }) => {
     return React__default['default'].createElement("div", { ref: containerEl });
 };
 
+exports.StytchB2BProvider = StytchB2BContext.StytchB2BProvider;
+exports.useStytchB2BClient = StytchB2BContext.useStytchB2BClient;
+exports.useStytchIsAuthorized = StytchB2BContext.useStytchIsAuthorized;
+exports.useStytchMember = StytchB2BContext.useStytchMember;
+exports.useStytchMemberSession = StytchB2BContext.useStytchMemberSession;
+exports.useStytchOrganization = StytchB2BContext.useStytchOrganization;
+exports.withStytchB2BClient = StytchB2BContext.withStytchB2BClient;
+exports.withStytchMember = StytchB2BContext.withStytchMember;
+exports.withStytchMemberSession = StytchB2BContext.withStytchMemberSession;
+exports.withStytchOrganization = StytchB2BContext.withStytchOrganization;
+exports.withStytchPermissions = StytchB2BContext.withStytchPermissions;
 exports.StytchB2B = StytchB2B;
-exports.StytchB2BProvider = StytchB2BProvider;
-exports.useStytchB2BClient = useStytchB2BClient;
-exports.useStytchIsAuthorized = useStytchIsAuthorized;
-exports.useStytchMember = useStytchMember;
-exports.useStytchMemberSession = useStytchMemberSession;
-exports.useStytchOrganization = useStytchOrganization;
-exports.withStytchB2BClient = withStytchB2BClient;
-exports.withStytchMember = withStytchMember;
-exports.withStytchMemberSession = withStytchMemberSession;
-exports.withStytchOrganization = withStytchOrganization;
-exports.withStytchPermissions = withStytchPermissions;

package/dist/createDeepEqual-5555f2e1.d.ts

@@ -0,0 +1,5 @@
+type DeepEqualOpts = {
+    KEYS_TO_EXCLUDE?: string[];
+};
+declare const createDeepEqual: ({ KEYS_TO_EXCLUDE }?: DeepEqualOpts) => (a: any, b: any) => boolean;
+export { createDeepEqual };

package/dist/index-b14d4efe.d.ts

@@ -0,0 +1,2 @@
+export { createDeepEqual } from "./createDeepEqual-5555f2e1.js";
+export { mergeWithStableProps } from "./invariant-568a7633.js";

package/dist/index.esm.js

@@ -1,88 +1,5 @@
-import React, { useRef, useState, useEffect, useCallback, createContext, useContext, useMemo, useLayoutEffect } from 'react';
-
-const createDeepEqual = ({ KEYS_TO_EXCLUDE = [] } = {}) => {
-    // If comparing functions, this may need some work. Not sure the
-    // best path for this: compare instance (what it currently does),
-    // stringify and compare, etc.
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    const deepEqual = (a, b) => {
-        // Ensures type is the same
-        if (typeof a !== typeof b)
-            return false;
-        // arrays, null, and objects all have type 'object'
-        if (a === null || b === null)
-            return a === b;
-        if (typeof a === 'object') {
-            if (Object.keys(a).length !== Object.keys(b).length || Object.keys(a).some((k) => !(k in b)))
-                return false;
-            return Object.entries(a)
-                .filter(([k]) => !KEYS_TO_EXCLUDE.includes(k))
-                .every(([k, v]) => deepEqual(v, b[k]));
-        }
-        // boolean, string, number, undefined
-        return a === b;
-    };
-    return deepEqual;
-};
-
-const deepEqual = createDeepEqual();
-/**
- * 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
- */
-const mergeWithStableProps = (oldValue, newValue) => {
-    // If the values are already referentially the same, just return the new value
-    if (oldValue === newValue) {
-        return newValue;
-    }
-    return Object.keys(oldValue).reduce((acc, key) => {
-        if (key in newValue && deepEqual(oldValue[key], newValue[key])) {
-            acc[key] = oldValue[key];
-        }
-        return acc;
-    }, Object.assign({}, newValue));
-};
-
-// 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.
-const useAsyncState = (initialState) => {
-    const isMounted = useRef(true);
-    const [state, setState] = useState(initialState);
-    useEffect(() => {
-        isMounted.current = true;
-        return () => {
-            isMounted.current = false;
-        };
-    }, []);
-    const setStateAction = useCallback((newState) => {
-        isMounted.current && setState(newState);
-    }, []);
-    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 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);
-}
+import React, { createContext, useContext, useMemo, useEffect, useRef, useLayoutEffect } from 'react';
+import { i as invariant, u as useAsyncState, m as mergeWithStableProps, n as noProviderError, p as providerMustBeUniqueError, a as noSSRError, b as noHeadlessClientError } from './invariant-568a7633.js';
 
 const initialUser = {
     user: null,

package/dist/index.js

@@ -3,95 +3,12 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var React = require('react');
+var invariant = require('./invariant-ae5a5bce.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 
-const createDeepEqual = ({ KEYS_TO_EXCLUDE = [] } = {}) => {
-    // If comparing functions, this may need some work. Not sure the
-    // best path for this: compare instance (what it currently does),
-    // stringify and compare, etc.
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    const deepEqual = (a, b) => {
-        // Ensures type is the same
-        if (typeof a !== typeof b)
-            return false;
-        // arrays, null, and objects all have type 'object'
-        if (a === null || b === null)
-            return a === b;
-        if (typeof a === 'object') {
-            if (Object.keys(a).length !== Object.keys(b).length || Object.keys(a).some((k) => !(k in b)))
-                return false;
-            return Object.entries(a)
-                .filter(([k]) => !KEYS_TO_EXCLUDE.includes(k))
-                .every(([k, v]) => deepEqual(v, b[k]));
-        }
-        // boolean, string, number, undefined
-        return a === b;
-    };
-    return deepEqual;
-};
-
-const deepEqual = createDeepEqual();
-/**
- * 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
- */
-const mergeWithStableProps = (oldValue, newValue) => {
-    // If the values are already referentially the same, just return the new value
-    if (oldValue === newValue) {
-        return newValue;
-    }
-    return Object.keys(oldValue).reduce((acc, key) => {
-        if (key in newValue && deepEqual(oldValue[key], newValue[key])) {
-            acc[key] = oldValue[key];
-        }
-        return acc;
-    }, Object.assign({}, newValue));
-};
-
-// 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.
-const useAsyncState = (initialState) => {
-    const isMounted = React.useRef(true);
-    const [state, setState] = React.useState(initialState);
-    React.useEffect(() => {
-        isMounted.current = true;
-        return () => {
-            isMounted.current = false;
-        };
-    }, []);
-    const setStateAction = React.useCallback((newState) => {
-        isMounted.current && setState(newState);
-    }, []);
-    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 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);
-}
-
 const initialUser = {
     user: null,
     fromCache: false,
@@ -116,7 +33,7 @@ const isUIClient = (client) => {
  * @returns A {@link SWRUser}
  */
 const useStytchUser = () => {
-    invariant(useIsMounted__INTERNAL(), noProviderError('useStytchUser'));
+    invariant.invariant(useIsMounted__INTERNAL(), invariant.noProviderError('useStytchUser'));
     return React.useContext(StytchUserContext);
 };
 /**
@@ -131,7 +48,7 @@ const useStytchUser = () => {
  * @returns A {@link SWRSession}
  */
 const useStytchSession = () => {
-    invariant(useIsMounted__INTERNAL(), noProviderError('useStytchSession'));
+    invariant.invariant(useIsMounted__INTERNAL(), invariant.noProviderError('useStytchSession'));
     return React.useContext(StytchSessionContext);
 };
 /**
@@ -145,12 +62,12 @@ const useStytchSession = () => {
  */
 const useStytch = () => {
     const ctx = React.useContext(StytchContext);
-    invariant(ctx.isMounted, noProviderError('useStytch'));
+    invariant.invariant(ctx.isMounted, invariant.noProviderError('useStytch'));
     return ctx.client;
 };
 const withStytch = (Component) => {
     const WithStytch = (props) => {
-        invariant(useIsMounted__INTERNAL(), noProviderError('withStytch'));
+        invariant.invariant(useIsMounted__INTERNAL(), invariant.noProviderError('withStytch'));
         return React__default['default'].createElement(Component, Object.assign({}, props, { stytch: useStytch() }));
     };
     WithStytch.displayName = `withStytch(${Component.displayName || Component.name || 'Component'})`;
@@ -158,7 +75,7 @@ const withStytch = (Component) => {
 };
 const withStytchUser = (Component) => {
     const WithStytchUser = (props) => {
-        invariant(useIsMounted__INTERNAL(), noProviderError('withStytchUser'));
+        invariant.invariant(useIsMounted__INTERNAL(), invariant.noProviderError('withStytchUser'));
         const { user, fromCache } = useStytchUser();
         return React__default['default'].createElement(Component, Object.assign({}, props, { stytchUser: user, stytchUserIsFromCache: fromCache }));
     };
@@ -167,7 +84,7 @@ const withStytchUser = (Component) => {
 };
 const withStytchSession = (Component) => {
     const WithStytchSession = (props) => {
-        invariant(useIsMounted__INTERNAL(), noProviderError('withStytchSession'));
+        invariant.invariant(useIsMounted__INTERNAL(), invariant.noProviderError('withStytchSession'));
         const { session, fromCache } = useStytchSession();
         return React__default['default'].createElement(Component, Object.assign({}, props, { stytchSession: session, stytchSessionIsFromCache: fromCache }));
     };
@@ -188,10 +105,10 @@ const withStytchSession = (Component) => {
  * )
  */
 const StytchProvider = ({ stytch, children }) => {
-    invariant(!useIsMounted__INTERNAL(), providerMustBeUniqueError);
-    invariant(typeof window !== 'undefined', noSSRError);
+    invariant.invariant(!useIsMounted__INTERNAL(), invariant.providerMustBeUniqueError);
+    invariant.invariant(typeof window !== 'undefined', invariant.noSSRError);
     const ctx = React.useMemo(() => ({ client: stytch, isMounted: true }), [stytch]);
-    const [{ user, session }, setClientState] = useAsyncState({
+    const [{ user, session }, setClientState] = invariant.useAsyncState({
         session: stytch.session.getInfo(),
         user: stytch.user.getInfo(),
     });
@@ -201,7 +118,7 @@ const StytchProvider = ({ stytch, children }) => {
                 session: stytch.session.getInfo(),
                 user: stytch.user.getInfo(),
             };
-            return mergeWithStableProps(oldState, newState);
+            return invariant.mergeWithStableProps(oldState, newState);
         });
     }), [setClientState, stytch]);
     return (React__default['default'].createElement(StytchContext.Provider, { value: ctx },
@@ -241,12 +158,12 @@ const StytchProvider = ({ stytch, children }) => {
  * @param props {@link StytchProps}
  */
 const StytchLogin = ({ config, styles, callbacks }) => {
-    invariant(useIsMounted__INTERNAL(), noProviderError('<StytchLogin />'));
+    invariant.invariant(useIsMounted__INTERNAL(), invariant.noProviderError('<StytchLogin />'));
     const stytchClient = useStytch();
     const containerEl = React.useRef(null);
     React.useLayoutEffect(() => {
         if (!isUIClient(stytchClient)) {
-            throw Error(noHeadlessClientError);
+            throw Error(invariant.noHeadlessClientError);
         }
         if (!containerEl.current) {
             return;
@@ -301,12 +218,12 @@ const StytchLogin = ({ config, styles, callbacks }) => {
  * @param callbacks - An optional {@link Callbacks} object
  */
 const StytchPasswordReset = ({ config, styles, callbacks, passwordResetToken }) => {
-    invariant(useIsMounted__INTERNAL(), noProviderError('<StytchResetPassword />'));
+    invariant.invariant(useIsMounted__INTERNAL(), invariant.noProviderError('<StytchResetPassword />'));
     const stytchClient = useStytch();
     const containerEl = React.useRef(null);
     React.useLayoutEffect(() => {
         if (!isUIClient(stytchClient)) {
-            throw Error(noHeadlessClientError);
+            throw Error(invariant.noHeadlessClientError);
         }
         if (!containerEl.current) {
             return;
@@ -360,13 +277,13 @@ const StytchPasskeyRegistration = ({ config, styles, callbacks }) => {
      * @param styles - An optional {@link StyleConfig} to customize the look and feel of the screen.
      * @param callbacks - An optional {@link Callbacks} object
      */
-    invariant(useIsMounted__INTERNAL(), noProviderError('<StytchPasskeyRegistration />'));
+    invariant.invariant(useIsMounted__INTERNAL(), invariant.noProviderError('<StytchPasskeyRegistration />'));
     const stytchClient = useStytch();
     const user = useStytchUser();
     const containerEl = React.useRef(null);
     React.useLayoutEffect(() => {
         if (!isUIClient(stytchClient)) {
-            throw Error(noHeadlessClientError);
+            throw Error(invariant.noHeadlessClientError);
         }
         if (!containerEl.current) {
             return;