@stytch/react 18.0.0 → 18.2.0

package/dist/b2b/index.d.ts

@@ -1,166 +1,6 @@
 /// <reference types="react" />
 import React from "react";
-import { ReactNode } from "react";
-import { Member, MemberSession, Organization, StytchB2BUIClient } from "@stytch/vanilla-js/b2b";
-import { StytchB2BHeadlessClient } from "@stytch/vanilla-js/b2b/headless";
-import { PermissionsMap } from "@stytch/core/public";
 import { Callbacks, StyleConfig, StytchB2BUIConfig } from "@stytch/vanilla-js";
-/**
- * The Stytch Client object passed in to <StytchProvider /> in your application root.
- */
-type StytchB2BClient = StytchB2BHeadlessClient | StytchB2BUIClient;
-type SWRMember = {
-    /**
-     * Either the active {@link Member} object, or null if the member is not logged in.
-     */
-    member: Member | null;
-    /**
-     * If true, indicates that the value returned is from the application cache and a state refresh is in progress.
-     */
-    fromCache: boolean;
-};
-type SWRMemberSession = {
-    /**
-     * Either the active {@link MemberSession} object, or null if the member is not logged in.
-     */
-    session: MemberSession | null;
-    /**
-     * If true, indicates that the value returned is from the application cache and a state refresh is in progress.
-     */
-    fromCache: boolean;
-};
-type SWROrganization = {
-    /**
-     * Either the active {@link Organization} object, or null if the member is not logged in.
-     */
-    organization: Organization | null;
-    /**
-     * If true, indicates that the value returned is from the application cache and a state refresh is in progress.
-     */
-    fromCache: boolean;
-};
-/**
- * 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}
- */
-declare const useStytchMember: () => SWRMember;
-/**
- * Returns the active member's Stytch member session.
- * @example
- * const { session } = useStytchMemberSession();
- * useEffect(() => {
- *   if (!session) {
- *     router.replace('/login')
- *   }
- * }, [session]);
- * @returns A {@link SWRMemberSession}
- */
-declare const useStytchMemberSession: () => SWRMemberSession;
-/**
- * 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}
- */
-declare const useStytchOrganization: () => SWROrganization;
-type SWRIsAuthorized = {
-    /**
-     * Whether the logged-in member is allowed to perform the specified action on the specified resource.
-     */
-    isAuthorized: boolean;
-    /**
-     * If true, indicates that the value returned is from the application cache and a state refresh is in progress.
-     */
-    fromCache: boolean;
-};
-/**
- * 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>
- */
-declare const useStytchIsAuthorized: (resourceId: string, action: string) => SWRIsAuthorized;
-/**
- * Returns the Stytch B2B client stored in the Stytch context.
- *
- * @example
- * const stytch = useStytchB2BClient();
- * useEffect(() => {
- *   stytch.magicLinks.authenticate('...')
- * }, [stytch]);
- */
-declare const useStytchB2BClient: () => StytchB2BHeadlessClient;
-declare const withStytchB2BClient: <T extends object>(Component: React.ComponentType<T & {
-    stytch: StytchB2BHeadlessClient;
-}>) => React.ComponentType<T>;
-declare const withStytchMember: <T extends object>(Component: React.ComponentType<T & {
-    stytchMember: Member | null;
-    stytchMemberIsFromCache: boolean;
-}>) => React.ComponentType<T>;
-declare const withStytchMemberSession: <T extends object>(Component: React.ComponentType<T & {
-    stytchMemberSession: MemberSession | null;
-    stytchMemberSessionIsFromCache: boolean;
-}>) => React.ComponentType<T>;
-declare const withStytchOrganization: <T extends object>(Component: React.ComponentType<T & {
-    stytchOrganization: Organization | null;
-    stytchOrganizationIsFromCache: boolean;
-}>) => React.ComponentType<T>;
-/**
- * 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)
- */
-declare const withStytchPermissions: <Permissions_1 extends Record<string, string>, T extends object>(Component: React.ComponentType<T & {
-    stytchPermissions: PermissionsMap<Permissions_1>;
-}>) => React.ComponentType<T>;
-type StytchB2BProviderProps = {
-    /**
-     * A Stytch client instance {@link StytchB2BHeadlessClient}
-     */
-    stytch: StytchB2BClient;
-    children?: ReactNode;
-};
-/**
- * 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'),
- * )
- */
-declare const StytchB2BProvider: ({ stytch, children }: StytchB2BProviderProps) => JSX.Element;
 interface StytchB2BProps {
     /**
      * An optional {@link StyleConfig} to customize the look and feel of the screen.
@@ -263,5 +103,6 @@ interface StytchB2BProps {
  * @param props {@link StytchB2BProps}
  */
 declare const StytchB2B: ({ styles, callbacks, config }: StytchB2BProps) => React.JSX.Element;
-export { StytchB2BProvider, useStytchB2BClient, useStytchMemberSession, useStytchMember, useStytchIsAuthorized, useStytchOrganization, withStytchB2BClient, withStytchMemberSession, withStytchMember, withStytchOrganization, withStytchPermissions, StytchB2B };
-export type { StytchB2BProviderProps };
+export { StytchB2BProvider, useStytchB2BClient, useStytchMemberSession, useStytchMember, useStytchIsAuthorized, useStytchOrganization, withStytchB2BClient, withStytchMemberSession, withStytchMember, withStytchOrganization, withStytchPermissions } from "../StytchB2BContext-ce9e254c.js";
+export { StytchB2B };
+export type { StytchB2BProviderProps } from "../StytchB2BContext-ce9e254c.js";

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

@@ -1,166 +1,6 @@
 /// <reference types="react" />
 import React from "react";
-import { ReactNode } from "react";
-import { Member, MemberSession, Organization, StytchB2BUIClient } from "@stytch/vanilla-js/b2b";
-import { StytchB2BHeadlessClient } from "@stytch/vanilla-js/b2b/headless";
-import { PermissionsMap } from "@stytch/core/public";
 import { Callbacks, StyleConfig, StytchB2BUIConfig } from "@stytch/vanilla-js";
-/**
- * The Stytch Client object passed in to <StytchProvider /> in your application root.
- */
-type StytchB2BClient = StytchB2BHeadlessClient | StytchB2BUIClient;
-type SWRMember = {
-    /**
-     * Either the active {@link Member} object, or null if the member is not logged in.
-     */
-    member: Member | null;
-    /**
-     * If true, indicates that the value returned is from the application cache and a state refresh is in progress.
-     */
-    fromCache: boolean;
-};
-type SWRMemberSession = {
-    /**
-     * Either the active {@link MemberSession} object, or null if the member is not logged in.
-     */
-    session: MemberSession | null;
-    /**
-     * If true, indicates that the value returned is from the application cache and a state refresh is in progress.
-     */
-    fromCache: boolean;
-};
-type SWROrganization = {
-    /**
-     * Either the active {@link Organization} object, or null if the member is not logged in.
-     */
-    organization: Organization | null;
-    /**
-     * If true, indicates that the value returned is from the application cache and a state refresh is in progress.
-     */
-    fromCache: boolean;
-};
-/**
- * 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}
- */
-declare const useStytchMember: () => SWRMember;
-/**
- * Returns the active member's Stytch member session.
- * @example
- * const { session } = useStytchMemberSession();
- * useEffect(() => {
- *   if (!session) {
- *     router.replace('/login')
- *   }
- * }, [session]);
- * @returns A {@link SWRMemberSession}
- */
-declare const useStytchMemberSession: () => SWRMemberSession;
-/**
- * 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}
- */
-declare const useStytchOrganization: () => SWROrganization;
-type SWRIsAuthorized = {
-    /**
-     * Whether the logged-in member is allowed to perform the specified action on the specified resource.
-     */
-    isAuthorized: boolean;
-    /**
-     * If true, indicates that the value returned is from the application cache and a state refresh is in progress.
-     */
-    fromCache: boolean;
-};
-/**
- * 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>
- */
-declare const useStytchIsAuthorized: (resourceId: string, action: string) => SWRIsAuthorized;
-/**
- * Returns the Stytch B2B client stored in the Stytch context.
- *
- * @example
- * const stytch = useStytchB2BClient();
- * useEffect(() => {
- *   stytch.magicLinks.authenticate('...')
- * }, [stytch]);
- */
-declare const useStytchB2BClient: () => StytchB2BHeadlessClient;
-declare const withStytchB2BClient: <T extends object>(Component: React.ComponentType<T & {
-    stytch: StytchB2BHeadlessClient;
-}>) => React.ComponentType<T>;
-declare const withStytchMember: <T extends object>(Component: React.ComponentType<T & {
-    stytchMember: Member | null;
-    stytchMemberIsFromCache: boolean;
-}>) => React.ComponentType<T>;
-declare const withStytchMemberSession: <T extends object>(Component: React.ComponentType<T & {
-    stytchMemberSession: MemberSession | null;
-    stytchMemberSessionIsFromCache: boolean;
-}>) => React.ComponentType<T>;
-declare const withStytchOrganization: <T extends object>(Component: React.ComponentType<T & {
-    stytchOrganization: Organization | null;
-    stytchOrganizationIsFromCache: boolean;
-}>) => React.ComponentType<T>;
-/**
- * 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)
- */
-declare const withStytchPermissions: <Permissions_1 extends Record<string, string>, T extends object>(Component: React.ComponentType<T & {
-    stytchPermissions: PermissionsMap<Permissions_1>;
-}>) => React.ComponentType<T>;
-type StytchB2BProviderProps = {
-    /**
-     * A Stytch client instance {@link StytchB2BHeadlessClient}
-     */
-    stytch: StytchB2BClient;
-    children?: ReactNode;
-};
-/**
- * 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'),
- * )
- */
-declare const StytchB2BProvider: ({ stytch, children }: StytchB2BProviderProps) => JSX.Element;
 interface StytchB2BProps {
     /**
      * An optional {@link StyleConfig} to customize the look and feel of the screen.
@@ -263,5 +103,6 @@ interface StytchB2BProps {
  * @param props {@link StytchB2BProps}
  */
 declare const StytchB2B: ({ styles, callbacks, config }: StytchB2BProps) => React.JSX.Element;
-export { StytchB2BProvider, useStytchB2BClient, useStytchMemberSession, useStytchMember, useStytchIsAuthorized, useStytchOrganization, withStytchB2BClient, withStytchMemberSession, withStytchMember, withStytchOrganization, withStytchPermissions, StytchB2B };
-export type { StytchB2BProviderProps };
+export { StytchB2BProvider, useStytchB2BClient, useStytchMemberSession, useStytchMember, useStytchIsAuthorized, useStytchOrganization, withStytchB2BClient, withStytchMemberSession, withStytchMember, withStytchOrganization, withStytchPermissions } from "../StytchB2BContext-8acafb28.js";
+export { StytchB2B };
+export type { StytchB2BProviderProps } from "../StytchB2BContext-8acafb28.js";

package/dist/b2b/index.esm.js

@@ -1,301 +1,7 @@
-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));
-};
-
-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 = 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 initialMember = {
-    member: null,
-    fromCache: false,
-};
-const initialMemberSession = {
-    session: null,
-    fromCache: false,
-};
-const initialOrganization = {
-    organization: null,
-    fromCache: false,
-};
-const StytchB2BContext = createContext({ isMounted: false });
-const StytchMemberContext = createContext(initialMember);
-const StytchMemberSessionContext = createContext(initialMemberSession);
-const StytchOrganizationContext = createContext(initialOrganization);
-const useIsMounted__INTERNAL = () => 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 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 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 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),
-    });
-    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 = 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.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.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.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.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 });
-        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.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 = useMemo(() => ({ client: stytch, isMounted: true }), [stytch]);
-    const [{ member, session, organization }, setClientState] = useAsyncState({
-        session: stytch.session.getInfo(),
-        member: stytch.self.getInfo(),
-        organization: stytch.organization.getInfo(),
-    });
-    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.createElement(StytchB2BContext.Provider, { value: ctx },
-        React.createElement(StytchOrganizationContext.Provider, { value: organization },
-            React.createElement(StytchMemberContext.Provider, { value: member },
-                React.createElement(StytchMemberSessionContext.Provider, { value: session }, children)))));
-};
+import { u as useIsMounted__INTERNAL, a as useStytchB2BClient, i as isUIClient } from '../StytchB2BContext-8acafb28.js';
+export { S as StytchB2BProvider, a as useStytchB2BClient, d as useStytchIsAuthorized, c as useStytchMember, b as useStytchMemberSession, e as useStytchOrganization, w as withStytchB2BClient, g as withStytchMember, f as withStytchMemberSession, h as withStytchOrganization, j as withStytchPermissions } from '../StytchB2BContext-8acafb28.js';
+import React, { useRef, useLayoutEffect } from 'react';
+import { i as invariant, b as noHeadlessClientError, n as noProviderError } from '../invariant-568a7633.js';
 
 /**
  * The Stytch B2B UI component.
@@ -357,4 +63,4 @@ const StytchB2B = ({ styles, callbacks, config }) => {
     return React.createElement("div", { ref: containerEl });
 };
 
-export { StytchB2B, StytchB2BProvider, useStytchB2BClient, useStytchIsAuthorized, useStytchMember, useStytchMemberSession, useStytchOrganization, withStytchB2BClient, withStytchMember, withStytchMemberSession, withStytchOrganization, withStytchPermissions };
+export { StytchB2B };