@stytch/react 19.4.3 → 19.4.4

package/CHANGELOG.md

@@ -1,5 +1,12 @@
 # @stytch/react
 
+## 19.4.4
+
+### Patch Changes
+
+- 54275c2: Make some minor improvements to JSDoc comments
+- 54275c2: Add missing default generic type parameters
+
 ## 19.4.3
 
 ### Patch Changes

package/dist/{StytchB2BContext-081081ee.d.ts → StytchB2BContext-09d376ba.d.ts}

@@ -5,7 +5,8 @@ import { Member, MemberSession, Organization, StytchB2BUIClient } from '@stytch/
 import { StytchB2BHeadlessClient, StytchProjectConfigurationInput } from '@stytch/vanilla-js/b2b/headless';
 import { PermissionsMap } from '@stytch/core/public';
 /**
- * The Stytch Client object passed in to <StytchProvider /> in your application root.
+ * The Stytch Client object passed in to <StytchB2BProvider /> in your application root.
+ * Either a StytchB2BUIClient or StytchB2BHeadlessClient.
  */
 type StytchB2BClient<TProjectConfiguration extends StytchProjectConfigurationInput> = StytchB2BHeadlessClient<TProjectConfiguration> | StytchB2BUIClient<TProjectConfiguration>;
 type SWRMember = {
@@ -42,15 +43,17 @@ declare const useIsMounted__INTERNAL: () => boolean;
 declare const isUIClient: <TProjectConfiguration extends Partial<import("@stytch/core/public").StytchProjectConfiguration>>(client: StytchB2BClient<TProjectConfiguration>) => client is StytchB2BUIClient<TProjectConfiguration>;
 /**
  * Returns the active Member.
+ * The Stytch SDKs are used for client-side authentication and session management.
  * 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.
+ * The Stytch SDKs are used for client-side authentication and session management.
+ * Check the fromCache property to determine if the session data is from persistent storage.
  * @example
  * const { session } = useStytchMemberSession();
  * useEffect(() => {
@@ -58,15 +61,15 @@ declare const useStytchMember: () => SWRMember;
  *     router.replace('/login')
  *   }
  * }, [session]);
- * @returns A {@link SWRMemberSession}
  */
 declare const useStytchMemberSession: () => SWRMemberSession;
 /**
  * Returns the active Stytch organization.
+ * The Stytch SDKs are used for client-side authentication and session management.
+ * Check the fromCache property to determine if the organization data is from persistent storage.
  * @example
  * const { organization } = useStytchOrganization();
- * return organization ? <p>Welcome to {organization.organization_name}</p> : <p>Log in to continue!</p>;
- * @returns A {@link SWROrganization}
+ * return (<p>Welcome to {organization.organization_name}</p>);
  */
 declare const useStytchOrganization: () => SWROrganization;
 type SWRIsAuthorized = {
@@ -141,16 +144,16 @@ declare const withStytchOrganization: <T extends object>(Component: React.Compon
 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<TProjectConfiguration extends StytchProjectConfigurationInput = Stytch.DefaultProjectConfiguration> = {
+interface StytchB2BProviderProps<TProjectConfiguration extends StytchProjectConfigurationInput = Stytch.DefaultProjectConfiguration> {
     /**
-     * A Stytch client instance {@link StytchB2BHeadlessClient}
+     * A Stytch client instance, either a {@link StytchB2BUIClient} or {@link StytchB2BHeadlessClient}
      */
     stytch: StytchB2BClient<TProjectConfiguration>;
     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.
+ * Wrap your application with this component in order to use Stytch everywhere in your app.
  * @example
  * const stytch = new StytchB2BHeadlessClient('public-token-<find yours in the stytch dashboard>')
  *

package/dist/{StytchB2BContext-081081ee.js → StytchB2BContext-09d376ba.js}

@@ -23,11 +23,11 @@ const isUIClient = (client) => {
 };
 /**
  * Returns the active Member.
+ * The Stytch SDKs are used for client-side authentication and session management.
  * 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'));
@@ -35,6 +35,8 @@ const useStytchMember = () => {
 };
 /**
  * Returns the active member's Stytch member session.
+ * The Stytch SDKs are used for client-side authentication and session management.
+ * Check the fromCache property to determine if the session data is from persistent storage.
  * @example
  * const { session } = useStytchMemberSession();
  * useEffect(() => {
@@ -42,7 +44,6 @@ const useStytchMember = () => {
  *     router.replace('/login')
  *   }
  * }, [session]);
- * @returns A {@link SWRMemberSession}
  */
 const useStytchMemberSession = () => {
     invariant(useIsMounted__INTERNAL(), noProviderError('useStytchMemberSession', 'StytchB2BProvider'));
@@ -50,10 +51,11 @@ const useStytchMemberSession = () => {
 };
 /**
  * Returns the active Stytch organization.
+ * The Stytch SDKs are used for client-side authentication and session management.
+ * Check the fromCache property to determine if the organization data is from persistent storage.
  * @example
  * const { organization } = useStytchOrganization();
- * return organization ? <p>Welcome to {organization.organization_name}</p> : <p>Log in to continue!</p>;
- * @returns A {@link SWROrganization}
+ * return (<p>Welcome to {organization.organization_name}</p>);
  */
 const useStytchOrganization = () => {
     invariant(useIsMounted__INTERNAL(), noProviderError('useStytchOrganization', 'StytchB2BProvider'));
@@ -115,7 +117,7 @@ const withStytchMember = (Component) => {
         const { member, fromCache } = useStytchMember();
         return React.createElement(Component, Object.assign({}, props, { stytchMember: member, stytchMemberIsFromCache: fromCache }));
     };
-    WithStytchUser.displayName = `withStytchUser(${Component.displayName || Component.name || 'Component'})`;
+    WithStytchUser.displayName = `withStytchMember(${Component.displayName || Component.name || 'Component'})`;
     return WithStytchUser;
 };
 const withStytchMemberSession = (Component) => {
@@ -124,7 +126,7 @@ const withStytchMemberSession = (Component) => {
         const { session, fromCache } = useStytchMemberSession();
         return React.createElement(Component, Object.assign({}, props, { stytchMemberSession: session, stytchMemberSessionIsFromCache: fromCache }));
     };
-    WithStytchSession.displayName = `withStytchSession(${Component.displayName || Component.name || 'Component'})`;
+    WithStytchSession.displayName = `withStytchMemberSession(${Component.displayName || Component.name || 'Component'})`;
     return WithStytchSession;
 };
 const withStytchOrganization = (Component) => {
@@ -178,7 +180,7 @@ const withStytchPermissions = (Component) => {
 };
 /**
  * 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 StytchB2BHeadlessClient('public-token-<find yours in the stytch dashboard>')
  *

package/dist/{StytchB2BContext-865b6947.d.ts → StytchB2BContext-a8d57249.d.ts}

@@ -5,7 +5,8 @@ import { Member, MemberSession, Organization, StytchB2BUIClient } from '@stytch/
 import { StytchB2BHeadlessClient, StytchProjectConfigurationInput } from '@stytch/vanilla-js/b2b/headless';
 import { PermissionsMap } from '@stytch/core/public';
 /**
- * The Stytch Client object passed in to <StytchProvider /> in your application root.
+ * The Stytch Client object passed in to <StytchB2BProvider /> in your application root.
+ * Either a StytchB2BUIClient or StytchB2BHeadlessClient.
  */
 type StytchB2BClient<TProjectConfiguration extends StytchProjectConfigurationInput> = StytchB2BHeadlessClient<TProjectConfiguration> | StytchB2BUIClient<TProjectConfiguration>;
 type SWRMember = {
@@ -42,15 +43,17 @@ declare const useIsMounted__INTERNAL: () => boolean;
 declare const isUIClient: <TProjectConfiguration extends Partial<import("@stytch/core/public").StytchProjectConfiguration>>(client: StytchB2BClient<TProjectConfiguration>) => client is StytchB2BUIClient<TProjectConfiguration>;
 /**
  * Returns the active Member.
+ * The Stytch SDKs are used for client-side authentication and session management.
  * 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.
+ * The Stytch SDKs are used for client-side authentication and session management.
+ * Check the fromCache property to determine if the session data is from persistent storage.
  * @example
  * const { session } = useStytchMemberSession();
  * useEffect(() => {
@@ -58,15 +61,15 @@ declare const useStytchMember: () => SWRMember;
  *     router.replace('/login')
  *   }
  * }, [session]);
- * @returns A {@link SWRMemberSession}
  */
 declare const useStytchMemberSession: () => SWRMemberSession;
 /**
  * Returns the active Stytch organization.
+ * The Stytch SDKs are used for client-side authentication and session management.
+ * Check the fromCache property to determine if the organization data is from persistent storage.
  * @example
  * const { organization } = useStytchOrganization();
- * return organization ? <p>Welcome to {organization.organization_name}</p> : <p>Log in to continue!</p>;
- * @returns A {@link SWROrganization}
+ * return (<p>Welcome to {organization.organization_name}</p>);
  */
 declare const useStytchOrganization: () => SWROrganization;
 type SWRIsAuthorized = {
@@ -141,16 +144,16 @@ declare const withStytchOrganization: <T extends object>(Component: React.Compon
 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<TProjectConfiguration extends StytchProjectConfigurationInput = Stytch.DefaultProjectConfiguration> = {
+interface StytchB2BProviderProps<TProjectConfiguration extends StytchProjectConfigurationInput = Stytch.DefaultProjectConfiguration> {
     /**
-     * A Stytch client instance {@link StytchB2BHeadlessClient}
+     * A Stytch client instance, either a {@link StytchB2BUIClient} or {@link StytchB2BHeadlessClient}
      */
     stytch: StytchB2BClient<TProjectConfiguration>;
     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.
+ * Wrap your application with this component in order to use Stytch everywhere in your app.
  * @example
  * const stytch = new StytchB2BHeadlessClient('public-token-<find yours in the stytch dashboard>')
  *

package/dist/{StytchB2BContext-865b6947.js → StytchB2BContext-a8d57249.js}

@@ -29,11 +29,11 @@ const isUIClient = (client) => {
 };
 /**
  * Returns the active Member.
+ * The Stytch SDKs are used for client-side authentication and session management.
  * 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.invariant(useIsMounted__INTERNAL(), invariant.noProviderError('useStytchMember', 'StytchB2BProvider'));
@@ -41,6 +41,8 @@ const useStytchMember = () => {
 };
 /**
  * Returns the active member's Stytch member session.
+ * The Stytch SDKs are used for client-side authentication and session management.
+ * Check the fromCache property to determine if the session data is from persistent storage.
  * @example
  * const { session } = useStytchMemberSession();
  * useEffect(() => {
@@ -48,7 +50,6 @@ const useStytchMember = () => {
  *     router.replace('/login')
  *   }
  * }, [session]);
- * @returns A {@link SWRMemberSession}
  */
 const useStytchMemberSession = () => {
     invariant.invariant(useIsMounted__INTERNAL(), invariant.noProviderError('useStytchMemberSession', 'StytchB2BProvider'));
@@ -56,10 +57,11 @@ const useStytchMemberSession = () => {
 };
 /**
  * Returns the active Stytch organization.
+ * The Stytch SDKs are used for client-side authentication and session management.
+ * Check the fromCache property to determine if the organization data is from persistent storage.
  * @example
  * const { organization } = useStytchOrganization();
- * return organization ? <p>Welcome to {organization.organization_name}</p> : <p>Log in to continue!</p>;
- * @returns A {@link SWROrganization}
+ * return (<p>Welcome to {organization.organization_name}</p>);
  */
 const useStytchOrganization = () => {
     invariant.invariant(useIsMounted__INTERNAL(), invariant.noProviderError('useStytchOrganization', 'StytchB2BProvider'));
@@ -121,7 +123,7 @@ const withStytchMember = (Component) => {
         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'})`;
+    WithStytchUser.displayName = `withStytchMember(${Component.displayName || Component.name || 'Component'})`;
     return WithStytchUser;
 };
 const withStytchMemberSession = (Component) => {
@@ -130,7 +132,7 @@ const withStytchMemberSession = (Component) => {
         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'})`;
+    WithStytchSession.displayName = `withStytchMemberSession(${Component.displayName || Component.name || 'Component'})`;
     return WithStytchSession;
 };
 const withStytchOrganization = (Component) => {
@@ -184,7 +186,7 @@ const withStytchPermissions = (Component) => {
 };
 /**
  * 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 StytchB2BHeadlessClient('public-token-<find yours in the stytch dashboard>')
  *

package/dist/adminPortal/index.esm.js

@@ -1,7 +1,7 @@
 import { mountAdminPortalSSO, mountAdminPortalOrgSettings, mountAdminPortalMemberManagement, mountAdminPortalSCIM } from '@stytch/vanilla-js/b2b/adminPortal';
 export { AdminPortalB2BProducts } from '@stytch/vanilla-js/b2b/adminPortal';
 import React, { useRef, useLayoutEffect } from 'react';
-import { u as useIsMounted__INTERNAL, a as useStytchB2BClient } from '../StytchB2BContext-081081ee.js';
+import { u as useIsMounted__INTERNAL, a as useStytchB2BClient } from '../StytchB2BContext-09d376ba.js';
 import { i as invariant, n as noProviderError } from '../invariant-568a7633.js';
 
 const makeAdminPortalComponent = (mountFn, componentName) => {

package/dist/adminPortal/index.js

@@ -4,7 +4,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var adminPortal = require('@stytch/vanilla-js/b2b/adminPortal');
 var React = require('react');
-var StytchB2BContext = require('../StytchB2BContext-865b6947.js');
+var StytchB2BContext = require('../StytchB2BContext-a8d57249.js');
 var invariant = require('../invariant-ae5a5bce.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }

package/dist/b2b/index.d.ts

@@ -1,8 +1,6 @@
 /// <reference types="react" />
 import React from "react";
 import { Callbacks, StyleConfig, StytchB2BUIConfig, StytchProjectConfigurationInput } from "@stytch/vanilla-js";
-// We need to import the StytchB2BUIClient type to give the TSDoc parser a hint as to where it is from
-// eslint-disable-next-line @typescript-eslint/no-unused-vars
 import { IDPConsentScreenManifest } from "@stytch/vanilla-js/b2b";
 interface StytchB2BProps<TProjectConfiguration extends StytchProjectConfigurationInput = Stytch.DefaultProjectConfiguration> {
     /**
@@ -76,14 +74,17 @@ type B2BIDPConsentManifestGenerator = (input: {
     clientName: string;
 }) => IDPConsentScreenManifest;
 type B2BIdentityProviderProps = Omit<StytchB2BProps, "config"> & {
+    /**
+     * Optional {@link B2BIDPConsentManifestGenerator} to customize the consent screen.
+     */
     getIDPConsentManifest?: B2BIDPConsentManifestGenerator;
 };
 /**
  * The Stytch B2B UI component.
- * This component can only be used with a {@link StytchB2BUIClient} client constructor
- * passed into the {@link StytchB2BProvider}
+ * This component can only be used with a Stytch B2B UI Client
+ * passed into the StytchB2BProvider.
  *
- * See the {@link https://stytch.com/docs/b2b/sdks/javascript-sdk online reference}
+ * See the {@link https://stytch.com/docs/b2b/sdks online reference}
  *
  * @example
  * <StytchB2B
@@ -110,17 +111,16 @@ type B2BIdentityProviderProps = Omit<StytchB2BProps, "config"> & {
  *     onEvent: (event) => console.log(event)
  *   }}
  * />
- * @param props {@link StytchB2BProps}
  */
-declare const StytchB2B: <TProjectConfiguration extends Partial<import("@stytch/core/public").StytchProjectConfiguration>>({ styles, callbacks, config }: StytchB2BProps<TProjectConfiguration>) => React.JSX.Element;
+declare const StytchB2B: <TProjectConfiguration extends Partial<import("@stytch/core/public").StytchProjectConfiguration> = Stytch.DefaultProjectConfiguration>({ styles, callbacks, config }: StytchB2BProps<TProjectConfiguration>) => React.JSX.Element;
 /**
  * The Stytch B2B 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 StytchB2BUIClient} client constructor
- * passed into the {@link StytchB2BProvider}
+ * This component can only be used with a Stytch B2B UI Client
+ * passed into the StytchB2BProvider.
  *
- * See the {@link https://stytch.com/docs/sdks/javascript-sdk online reference}
+ * See the {@link https://stytch.com/docs/b2b/sdks online reference}
  *
  * @example
  * const styles = {
@@ -139,11 +139,8 @@ declare const StytchB2B: <TProjectConfiguration extends Partial<import("@stytch/
  *     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
- * @param getIDPConsentManifest - Optional {@link B2BIDPConsentManifestGenerator} to customize the consent screen.
  */
 declare const B2BIdentityProvider: ({ styles, callbacks, getIDPConsentManifest }: B2BIdentityProviderProps) => React.JSX.Element;
-export { StytchB2BProvider, useStytchB2BClient, useStytchMemberSession, useStytchMember, useStytchIsAuthorized, useStytchOrganization, withStytchB2BClient, withStytchMemberSession, withStytchMember, withStytchOrganization, withStytchPermissions } from "../StytchB2BContext-865b6947.js";
+export { StytchB2BProvider, useStytchB2BClient, useStytchMemberSession, useStytchMember, useStytchIsAuthorized, useStytchOrganization, withStytchB2BClient, withStytchMemberSession, withStytchMember, withStytchOrganization, withStytchPermissions } from "../StytchB2BContext-a8d57249.js";
 export { StytchB2B, B2BIdentityProvider };
-export type { StytchB2BProviderProps } from "../StytchB2BContext-865b6947.js";
+export type { StytchB2BProviderProps } from "../StytchB2BContext-a8d57249.js";

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

@@ -1,8 +1,6 @@
 /// <reference types="react" />
 import React from "react";
 import { Callbacks, StyleConfig, StytchB2BUIConfig, StytchProjectConfigurationInput } from "@stytch/vanilla-js";
-// We need to import the StytchB2BUIClient type to give the TSDoc parser a hint as to where it is from
-// eslint-disable-next-line @typescript-eslint/no-unused-vars
 import { IDPConsentScreenManifest } from "@stytch/vanilla-js/b2b";
 interface StytchB2BProps<TProjectConfiguration extends StytchProjectConfigurationInput = Stytch.DefaultProjectConfiguration> {
     /**
@@ -76,14 +74,17 @@ type B2BIDPConsentManifestGenerator = (input: {
     clientName: string;
 }) => IDPConsentScreenManifest;
 type B2BIdentityProviderProps = Omit<StytchB2BProps, "config"> & {
+    /**
+     * Optional {@link B2BIDPConsentManifestGenerator} to customize the consent screen.
+     */
     getIDPConsentManifest?: B2BIDPConsentManifestGenerator;
 };
 /**
  * The Stytch B2B UI component.
- * This component can only be used with a {@link StytchB2BUIClient} client constructor
- * passed into the {@link StytchB2BProvider}
+ * This component can only be used with a Stytch B2B UI Client
+ * passed into the StytchB2BProvider.
  *
- * See the {@link https://stytch.com/docs/b2b/sdks/javascript-sdk online reference}
+ * See the {@link https://stytch.com/docs/b2b/sdks online reference}
  *
  * @example
  * <StytchB2B
@@ -110,17 +111,16 @@ type B2BIdentityProviderProps = Omit<StytchB2BProps, "config"> & {
  *     onEvent: (event) => console.log(event)
  *   }}
  * />
- * @param props {@link StytchB2BProps}
  */
-declare const StytchB2B: <TProjectConfiguration extends Partial<import("@stytch/core/public").StytchProjectConfiguration>>({ styles, callbacks, config }: StytchB2BProps<TProjectConfiguration>) => React.JSX.Element;
+declare const StytchB2B: <TProjectConfiguration extends Partial<import("@stytch/core/public").StytchProjectConfiguration> = Stytch.DefaultProjectConfiguration>({ styles, callbacks, config }: StytchB2BProps<TProjectConfiguration>) => React.JSX.Element;
 /**
  * The Stytch B2B 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 StytchB2BUIClient} client constructor
- * passed into the {@link StytchB2BProvider}
+ * This component can only be used with a Stytch B2B UI Client
+ * passed into the StytchB2BProvider.
  *
- * See the {@link https://stytch.com/docs/sdks/javascript-sdk online reference}
+ * See the {@link https://stytch.com/docs/b2b/sdks online reference}
  *
  * @example
  * const styles = {
@@ -139,11 +139,8 @@ declare const StytchB2B: <TProjectConfiguration extends Partial<import("@stytch/
  *     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
- * @param getIDPConsentManifest - Optional {@link B2BIDPConsentManifestGenerator} to customize the consent screen.
  */
 declare const B2BIdentityProvider: ({ styles, callbacks, getIDPConsentManifest }: B2BIdentityProviderProps) => React.JSX.Element;
-export { StytchB2BProvider, useStytchB2BClient, useStytchMemberSession, useStytchMember, useStytchIsAuthorized, useStytchOrganization, withStytchB2BClient, withStytchMemberSession, withStytchMember, withStytchOrganization, withStytchPermissions } from "../StytchB2BContext-081081ee.js";
+export { StytchB2BProvider, useStytchB2BClient, useStytchMemberSession, useStytchMember, useStytchIsAuthorized, useStytchOrganization, withStytchB2BClient, withStytchMemberSession, withStytchMember, withStytchOrganization, withStytchPermissions } from "../StytchB2BContext-09d376ba.js";
 export { StytchB2B, B2BIdentityProvider };
-export type { StytchB2BProviderProps } from "../StytchB2BContext-081081ee.js";
+export type { StytchB2BProviderProps } from "../StytchB2BContext-09d376ba.js";

package/dist/b2b/index.esm.js

@@ -1,14 +1,14 @@
-import { u as useIsMounted__INTERNAL, a as useStytchB2BClient, i as isUIClient, b as useStytchMember } from '../StytchB2BContext-081081ee.js';
-export { S as StytchB2BProvider, a as useStytchB2BClient, d as useStytchIsAuthorized, b as useStytchMember, c as useStytchMemberSession, e as useStytchOrganization, w as withStytchB2BClient, g as withStytchMember, f as withStytchMemberSession, h as withStytchOrganization, j as withStytchPermissions } from '../StytchB2BContext-081081ee.js';
+import { u as useIsMounted__INTERNAL, a as useStytchB2BClient, i as isUIClient, b as useStytchMember } from '../StytchB2BContext-09d376ba.js';
+export { S as StytchB2BProvider, a as useStytchB2BClient, d as useStytchIsAuthorized, b as useStytchMember, c as useStytchMemberSession, e as useStytchOrganization, w as withStytchB2BClient, g as withStytchMember, f as withStytchMemberSession, h as withStytchOrganization, j as withStytchPermissions } from '../StytchB2BContext-09d376ba.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.
- * This component can only be used with a {@link StytchB2BUIClient} client constructor
- * passed into the {@link StytchB2BProvider}
+ * This component can only be used with a Stytch B2B UI Client
+ * passed into the StytchB2BProvider.
  *
- * See the {@link https://stytch.com/docs/b2b/sdks/javascript-sdk online reference}
+ * See the {@link https://stytch.com/docs/b2b/sdks online reference}
  *
  * @example
  * <StytchB2B
@@ -35,7 +35,6 @@ import { i as invariant, b as noHeadlessClientError, n as noProviderError } from
  *     onEvent: (event) => console.log(event)
  *   }}
  * />
- * @param props {@link StytchB2BProps}
  */
 const StytchB2B = ({ styles, callbacks, config, }) => {
     invariant(useIsMounted__INTERNAL(), noProviderError('<StytchB2B />', 'StytchB2BProvider'));
@@ -66,10 +65,10 @@ const StytchB2B = ({ styles, callbacks, config, }) => {
  * The Stytch B2B 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 StytchB2BUIClient} client constructor
- * passed into the {@link StytchB2BProvider}
+ * This component can only be used with a Stytch B2B UI Client
+ * passed into the StytchB2BProvider.
  *
- * See the {@link https://stytch.com/docs/sdks/javascript-sdk online reference}
+ * See the {@link https://stytch.com/docs/b2b/sdks online reference}
  *
  * @example
  * const styles = {
@@ -88,9 +87,6 @@ const StytchB2B = ({ styles, callbacks, config, }) => {
  *     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
- * @param getIDPConsentManifest - Optional {@link B2BIDPConsentManifestGenerator} to customize the consent screen.
  */
 const B2BIdentityProvider = ({ styles, callbacks, getIDPConsentManifest }) => {
     invariant(useIsMounted__INTERNAL(), noProviderError('<IdentityProvider />'));

package/dist/b2b/index.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var StytchB2BContext = require('../StytchB2BContext-865b6947.js');
+var StytchB2BContext = require('../StytchB2BContext-a8d57249.js');
 var React = require('react');
 var invariant = require('../invariant-ae5a5bce.js');
 
@@ -12,10 +12,10 @@ var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 
 /**
  * The Stytch B2B UI component.
- * This component can only be used with a {@link StytchB2BUIClient} client constructor
- * passed into the {@link StytchB2BProvider}
+ * This component can only be used with a Stytch B2B UI Client
+ * passed into the StytchB2BProvider.
  *
- * See the {@link https://stytch.com/docs/b2b/sdks/javascript-sdk online reference}
+ * See the {@link https://stytch.com/docs/b2b/sdks online reference}
  *
  * @example
  * <StytchB2B
@@ -42,7 +42,6 @@ var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
  *     onEvent: (event) => console.log(event)
  *   }}
  * />
- * @param props {@link StytchB2BProps}
  */
 const StytchB2B = ({ styles, callbacks, config, }) => {
     invariant.invariant(StytchB2BContext.useIsMounted__INTERNAL(), invariant.noProviderError('<StytchB2B />', 'StytchB2BProvider'));
@@ -73,10 +72,10 @@ const StytchB2B = ({ styles, callbacks, config, }) => {
  * The Stytch B2B 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 StytchB2BUIClient} client constructor
- * passed into the {@link StytchB2BProvider}
+ * This component can only be used with a Stytch B2B UI Client
+ * passed into the StytchB2BProvider.
  *
- * See the {@link https://stytch.com/docs/sdks/javascript-sdk online reference}
+ * See the {@link https://stytch.com/docs/b2b/sdks online reference}
  *
  * @example
  * const styles = {
@@ -95,9 +94,6 @@ const StytchB2B = ({ styles, callbacks, config, }) => {
  *     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
- * @param getIDPConsentManifest - Optional {@link B2BIDPConsentManifestGenerator} to customize the consent screen.
  */
 const B2BIdentityProvider = ({ styles, callbacks, getIDPConsentManifest }) => {
     invariant.invariant(StytchB2BContext.useIsMounted__INTERNAL(), invariant.noProviderError('<IdentityProvider />'));

package/dist/index.d.ts

@@ -1,7 +1,6 @@
 /// <reference types="react" />
 import React from "react";
 import { ReactNode } from "react";
-// We need to import the StytchUIClient type to give the TSDoc parser a hint as to where it is from
 import { Callbacks, StytchLoginConfig, StyleConfig, StytchProjectConfigurationInput, Session, StytchUIClient, User } from "@stytch/vanilla-js";
 import { StytchHeadlessClient } from "@stytch/vanilla-js/headless";
 interface StytchProps<TProjectConfiguration extends StytchProjectConfigurationInput = Stytch.DefaultProjectConfiguration> {
@@ -70,10 +69,10 @@ interface StytchProps<TProjectConfiguration extends StytchProjectConfigurationIn
 }
 /**
  * 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
@@ -96,19 +95,21 @@ interface StytchProps<TProjectConfiguration extends StytchProjectConfigurationIn
  *     onEvent: (event) => console.log(event)
  *   }}
  * />
- * @param props {@link StytchProps}
  */
 declare const StytchLogin: <TProjectConfiguration extends Partial<import("@stytch/core/public").StytchProjectConfiguration> = Stytch.DefaultProjectConfiguration>({ config, styles, callbacks }: StytchProps<TProjectConfiguration>) => React.JSX.Element;
 interface StytchResetPasswordProps<TProjectConfiguration extends StytchProjectConfigurationInput = Stytch.DefaultProjectConfiguration> extends StytchProps<TProjectConfiguration> {
+    /**
+     * A Stytch password reset token.
+     */
     passwordResetToken: string;
 }
 type IdentityProviderProps = Omit<StytchProps, "config">;
 /**
  * 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
@@ -132,23 +133,42 @@ type IdentityProviderProps = Omit<StytchProps, "config">;
  *     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
  */
 declare const StytchPasswordReset: <TProjectConfiguration extends Partial<import("@stytch/core/public").StytchProjectConfiguration> = Stytch.DefaultProjectConfiguration>({ config, styles, callbacks, passwordResetToken }: StytchResetPasswordProps<TProjectConfiguration>) => React.JSX.Element;
+/**
+ * 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)
+ *   }}
+ * />
+ */
 declare const StytchPasskeyRegistration: <TProjectConfiguration extends Partial<import("@stytch/core/public").StytchProjectConfiguration> = Stytch.DefaultProjectConfiguration>({ config, styles, callbacks }: StytchProps<TProjectConfiguration>) => React.JSX.Element;
 /**
  * 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 = {
@@ -167,8 +187,6 @@ declare const StytchPasskeyRegistration: <TProjectConfiguration extends Partial<
  *     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
  */
 declare const IdentityProvider: ({ styles, callbacks }: IdentityProviderProps) => React.JSX.Element;
 /**
@@ -198,15 +216,17 @@ type SWRSession = {
 };
 /**
  * Returns the active User.
+ * The Stytch SDKs are used for client-side authentication and session management.
  * Check the fromCache property to determine if the user data is from persistent storage.
  * @example
  * const {user} = useStytchUser();
  * return (<h1>Welcome, {user.name.first_name}</h1>);
- * @returns A {@link SWRUser}
  */
 declare const useStytchUser: () => SWRUser;
 /**
  * Returns the active user's Stytch session.
+ * The Stytch SDKs are used for client-side authentication and session management.
+ * Check the fromCache property to determine if the session data is from persistent storage.
  * @example
  * const {session} = useStytchSession();
  * useEffect(() => {
@@ -214,7 +234,6 @@ declare const useStytchUser: () => SWRUser;
  *     router.replace('/login')
  *   }
  * }, [session]);
- * @returns A {@link SWRSession}
  */
 declare const useStytchSession: () => SWRSession;
 /**
@@ -238,16 +257,16 @@ declare const withStytchSession: <T extends object>(Component: React.ComponentTy
     stytchSession: Session | null;
     stytchSessionIsFromCache: boolean;
 }>) => React.ComponentType<T>;
-type StytchProviderProps<TProjectConfiguration extends StytchProjectConfigurationInput = Stytch.DefaultProjectConfiguration> = {
+interface StytchProviderProps<TProjectConfiguration extends StytchProjectConfigurationInput = Stytch.DefaultProjectConfiguration> {
     /**
      * A Stytch client instance, either a {@link StytchUIClient} or {@link StytchHeadlessClient}
      */
     stytch: StytchClient<TProjectConfiguration>;
     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.
+ * 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>')
  *

package/dist/index.esm.d.ts

@@ -1,7 +1,6 @@
 /// <reference types="react" />
 import React from "react";
 import { ReactNode } from "react";
-// We need to import the StytchUIClient type to give the TSDoc parser a hint as to where it is from
 import { Callbacks, StytchLoginConfig, StyleConfig, StytchProjectConfigurationInput, Session, StytchUIClient, User } from "@stytch/vanilla-js";
 import { StytchHeadlessClient } from "@stytch/vanilla-js/headless";
 interface StytchProps<TProjectConfiguration extends StytchProjectConfigurationInput = Stytch.DefaultProjectConfiguration> {
@@ -70,10 +69,10 @@ interface StytchProps<TProjectConfiguration extends StytchProjectConfigurationIn
 }
 /**
  * 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
@@ -96,19 +95,21 @@ interface StytchProps<TProjectConfiguration extends StytchProjectConfigurationIn
  *     onEvent: (event) => console.log(event)
  *   }}
  * />
- * @param props {@link StytchProps}
  */
 declare const StytchLogin: <TProjectConfiguration extends Partial<import("@stytch/core/public").StytchProjectConfiguration> = Stytch.DefaultProjectConfiguration>({ config, styles, callbacks }: StytchProps<TProjectConfiguration>) => React.JSX.Element;
 interface StytchResetPasswordProps<TProjectConfiguration extends StytchProjectConfigurationInput = Stytch.DefaultProjectConfiguration> extends StytchProps<TProjectConfiguration> {
+    /**
+     * A Stytch password reset token.
+     */
     passwordResetToken: string;
 }
 type IdentityProviderProps = Omit<StytchProps, "config">;
 /**
  * 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
@@ -132,23 +133,42 @@ type IdentityProviderProps = Omit<StytchProps, "config">;
  *     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
  */
 declare const StytchPasswordReset: <TProjectConfiguration extends Partial<import("@stytch/core/public").StytchProjectConfiguration> = Stytch.DefaultProjectConfiguration>({ config, styles, callbacks, passwordResetToken }: StytchResetPasswordProps<TProjectConfiguration>) => React.JSX.Element;
+/**
+ * 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)
+ *   }}
+ * />
+ */
 declare const StytchPasskeyRegistration: <TProjectConfiguration extends Partial<import("@stytch/core/public").StytchProjectConfiguration> = Stytch.DefaultProjectConfiguration>({ config, styles, callbacks }: StytchProps<TProjectConfiguration>) => React.JSX.Element;
 /**
  * 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 = {
@@ -167,8 +187,6 @@ declare const StytchPasskeyRegistration: <TProjectConfiguration extends Partial<
  *     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
  */
 declare const IdentityProvider: ({ styles, callbacks }: IdentityProviderProps) => React.JSX.Element;
 /**
@@ -198,15 +216,17 @@ type SWRSession = {
 };
 /**
  * Returns the active User.
+ * The Stytch SDKs are used for client-side authentication and session management.
  * Check the fromCache property to determine if the user data is from persistent storage.
  * @example
  * const {user} = useStytchUser();
  * return (<h1>Welcome, {user.name.first_name}</h1>);
- * @returns A {@link SWRUser}
  */
 declare const useStytchUser: () => SWRUser;
 /**
  * Returns the active user's Stytch session.
+ * The Stytch SDKs are used for client-side authentication and session management.
+ * Check the fromCache property to determine if the session data is from persistent storage.
  * @example
  * const {session} = useStytchSession();
  * useEffect(() => {
@@ -214,7 +234,6 @@ declare const useStytchUser: () => SWRUser;
  *     router.replace('/login')
  *   }
  * }, [session]);
- * @returns A {@link SWRSession}
  */
 declare const useStytchSession: () => SWRSession;
 /**
@@ -238,16 +257,16 @@ declare const withStytchSession: <T extends object>(Component: React.ComponentTy
     stytchSession: Session | null;
     stytchSessionIsFromCache: boolean;
 }>) => React.ComponentType<T>;
-type StytchProviderProps<TProjectConfiguration extends StytchProjectConfigurationInput = Stytch.DefaultProjectConfiguration> = {
+interface StytchProviderProps<TProjectConfiguration extends StytchProjectConfigurationInput = Stytch.DefaultProjectConfiguration> {
     /**
      * A Stytch client instance, either a {@link StytchUIClient} or {@link StytchHeadlessClient}
      */
     stytch: StytchClient<TProjectConfiguration>;
     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.
+ * 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>')
  *

package/dist/index.esm.js

@@ -18,11 +18,11 @@ const isUIClient = (client) => {
 };
 /**
  * Returns the active User.
+ * The Stytch SDKs are used for client-side authentication and session management.
  * Check the fromCache property to determine if the user data is from persistent storage.
  * @example
  * const {user} = useStytchUser();
  * return (<h1>Welcome, {user.name.first_name}</h1>);
- * @returns A {@link SWRUser}
  */
 const useStytchUser = () => {
     invariant(useIsMounted__INTERNAL(), noProviderError('useStytchUser'));
@@ -30,6 +30,8 @@ const useStytchUser = () => {
 };
 /**
  * Returns the active user's Stytch session.
+ * The Stytch SDKs are used for client-side authentication and session management.
+ * Check the fromCache property to determine if the session data is from persistent storage.
  * @example
  * const {session} = useStytchSession();
  * useEffect(() => {
@@ -37,7 +39,6 @@ const useStytchUser = () => {
  *     router.replace('/login')
  *   }
  * }, [session]);
- * @returns A {@link SWRSession}
  */
 const useStytchSession = () => {
     invariant(useIsMounted__INTERNAL(), noProviderError('useStytchSession'));
@@ -85,7 +86,7 @@ const withStytchSession = (Component) => {
 };
 /**
  * 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>')
  *
@@ -120,10 +121,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
@@ -146,7 +147,6 @@ const StytchProvider = ({ stytch, children, }) => {
  *     onEvent: (event) => console.log(event)
  *   }}
  * />
- * @param props {@link StytchProps}
  */
 const StytchLogin = ({ config, styles, callbacks, }) => {
     invariant(useIsMounted__INTERNAL(), noProviderError('<StytchLogin />'));
@@ -164,7 +164,7 @@ const StytchLogin = ({ config, styles, callbacks, }) => {
             containerEl.current.id = `stytch-magic-link-${randId}`;
         }
         stytchClient.mountLogin({
-            config: config,
+            config,
             callbacks,
             elementId: `#${containerEl.current.id}`,
             styles,
@@ -174,10 +174,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
@@ -201,11 +201,6 @@ 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(useIsMounted__INTERNAL(), noProviderError('<StytchResetPassword />'));
@@ -224,7 +219,7 @@ const StytchPasswordReset = ({ config, styles, callbacks, passwordResetToken, })
         }
         if (passwordResetToken) {
             stytchClient.mountResetPassword({
-                config: config,
+                config,
                 callbacks,
                 elementId: `#${containerEl.current.id}`,
                 styles,
@@ -234,39 +229,32 @@ const StytchPasswordReset = ({ config, styles, callbacks, passwordResetToken, })
     }, [stytchClient, config, styles, callbacks, passwordResetToken]);
     return React.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(useIsMounted__INTERNAL(), noProviderError('<StytchPasskeyRegistration />'));
     const stytchClient = useStytch();
     const user = useStytchUser();
@@ -280,7 +268,7 @@ const StytchPasskeyRegistration = ({ config, styles, callbacks, }) => {
         }
         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,
@@ -295,11 +283,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 = {
@@ -318,8 +305,6 @@ 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(useIsMounted__INTERNAL(), noProviderError('<IdentityProvider />'));

package/dist/index.js

@@ -26,11 +26,11 @@ const isUIClient = (client) => {
 };
 /**
  * Returns the active User.
+ * The Stytch SDKs are used for client-side authentication and session management.
  * Check the fromCache property to determine if the user data is from persistent storage.
  * @example
  * const {user} = useStytchUser();
  * return (<h1>Welcome, {user.name.first_name}</h1>);
- * @returns A {@link SWRUser}
  */
 const useStytchUser = () => {
     invariant.invariant(useIsMounted__INTERNAL(), invariant.noProviderError('useStytchUser'));
@@ -38,6 +38,8 @@ const useStytchUser = () => {
 };
 /**
  * Returns the active user's Stytch session.
+ * The Stytch SDKs are used for client-side authentication and session management.
+ * Check the fromCache property to determine if the session data is from persistent storage.
  * @example
  * const {session} = useStytchSession();
  * useEffect(() => {
@@ -45,7 +47,6 @@ const useStytchUser = () => {
  *     router.replace('/login')
  *   }
  * }, [session]);
- * @returns A {@link SWRSession}
  */
 const useStytchSession = () => {
     invariant.invariant(useIsMounted__INTERNAL(), invariant.noProviderError('useStytchSession'));
@@ -93,7 +94,7 @@ const withStytchSession = (Component) => {
 };
 /**
  * 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>')
  *
@@ -128,10 +129,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,7 +155,6 @@ 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 />'));
@@ -172,7 +172,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 +182,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,11 +209,6 @@ 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 />'));
@@ -232,7 +227,7 @@ const StytchPasswordReset = ({ config, styles, callbacks, passwordResetToken, })
         }
         if (passwordResetToken) {
             stytchClient.mountResetPassword({
-                config: config,
+                config,
                 callbacks,
                 elementId: `#${containerEl.current.id}`,
                 styles,
@@ -242,39 +237,32 @@ 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 />'));
     const stytchClient = useStytch();
     const user = useStytchUser();
@@ -288,7 +276,7 @@ const StytchPasskeyRegistration = ({ config, styles, callbacks, }) => {
         }
         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 +291,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,8 +313,6 @@ 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 />'));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@stytch/react",
-  "version": "19.4.3",
+  "version": "19.4.4",
   "description": "Stytch's official React Library",
   "main": "./dist/index.js",
   "module": "./dist/index.esm.js",
@@ -33,9 +33,10 @@
   ],
   "devDependencies": {
     "@babel/runtime": "7.26.10",
+    "@stytch/internal-test-utils": "0.0.0",
     "@stytch/internal-tsconfigs": "0.0.0",
     "@stytch/js-utils": "0.0.1",
-    "@stytch/vanilla-js": "5.22.1",
+    "@stytch/vanilla-js": "5.22.3",
     "@testing-library/react": "14.0.0",
     "@types/jest": "29.5.14",
     "eslint-config-custom": "0.0.1",