@stytch/react 19.4.2 → 19.4.4

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("core/dist/public").StytchProjectConfiguration> = Stytch.DefaultProjectConfiguration>({ config, styles, callbacks }: StytchProps<TProjectConfiguration>) => React.JSX.Element;
+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)
  *   }}
  * />
+ */
+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',
+ *     },
+ *    }
  *
- * @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
+ * <StytchPasskeyRegistration
+ *   styles={styles}
+ *   callbacks={{
+ *     onEvent: (event) => console.log(event)
+ *   }}
+ * />
  */
-declare const StytchPasswordReset: <TProjectConfiguration extends Partial<import("core/dist/public").StytchProjectConfiguration> = Stytch.DefaultProjectConfiguration>({ config, styles, callbacks, passwordResetToken }: StytchResetPasswordProps<TProjectConfiguration>) => React.JSX.Element;
-declare const StytchPasskeyRegistration: <TProjectConfiguration extends Partial<import("core/dist/public").StytchProjectConfiguration> = Stytch.DefaultProjectConfiguration>({ config, styles, callbacks }: StytchProps<TProjectConfiguration>) => React.JSX.Element;
+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;
 /**
@@ -226,8 +245,8 @@ declare const useStytchSession: () => SWRSession;
  *   stytch.magicLinks.authenticate('...')
  * }, [stytch]);
  */
-declare const useStytch: <TProjectConfiguration extends Partial<import("core/dist/public").StytchProjectConfiguration> = Stytch.DefaultProjectConfiguration>() => StytchClient<TProjectConfiguration>;
-declare const withStytch: <T extends object, TProjectConfiguration extends Partial<import("core/dist/public").StytchProjectConfiguration> = Stytch.DefaultProjectConfiguration>(Component: React.ComponentType<T & {
+declare const useStytch: <TProjectConfiguration extends Partial<import("@stytch/core/public").StytchProjectConfiguration> = Stytch.DefaultProjectConfiguration>() => StytchClient<TProjectConfiguration>;
+declare const withStytch: <T extends object, TProjectConfiguration extends Partial<import("@stytch/core/public").StytchProjectConfiguration> = Stytch.DefaultProjectConfiguration>(Component: React.ComponentType<T & {
     stytch: StytchClient<TProjectConfiguration>;
 }>) => React.ComponentType<T>;
 declare const withStytchUser: <T extends object>(Component: React.ComponentType<T & {
@@ -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>')
  *
@@ -258,6 +277,6 @@ type StytchProviderProps<TProjectConfiguration extends StytchProjectConfiguratio
  *   document.getElementById('root'),
  * )
  */
-declare const StytchProvider: <TProjectConfiguration extends Partial<import("core/dist/public").StytchProjectConfiguration> = Stytch.DefaultProjectConfiguration>({ stytch, children }: StytchProviderProps<TProjectConfiguration>) => JSX.Element;
+declare const StytchProvider: <TProjectConfiguration extends Partial<import("@stytch/core/public").StytchProjectConfiguration> = Stytch.DefaultProjectConfiguration>({ stytch, children }: StytchProviderProps<TProjectConfiguration>) => JSX.Element;
 export { StytchLogin, StytchPasswordReset, StytchPasskeyRegistration, IdentityProvider, StytchProvider, useStytch, useStytchSession, useStytchUser, withStytch, withStytchSession, withStytchUser };
 export type { StytchProviderProps };

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("core/dist/public").StytchProjectConfiguration> = Stytch.DefaultProjectConfiguration>({ config, styles, callbacks }: StytchProps<TProjectConfiguration>) => React.JSX.Element;
+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)
  *   }}
  * />
+ */
+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',
+ *     },
+ *    }
  *
- * @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
+ * <StytchPasskeyRegistration
+ *   styles={styles}
+ *   callbacks={{
+ *     onEvent: (event) => console.log(event)
+ *   }}
+ * />
  */
-declare const StytchPasswordReset: <TProjectConfiguration extends Partial<import("core/dist/public").StytchProjectConfiguration> = Stytch.DefaultProjectConfiguration>({ config, styles, callbacks, passwordResetToken }: StytchResetPasswordProps<TProjectConfiguration>) => React.JSX.Element;
-declare const StytchPasskeyRegistration: <TProjectConfiguration extends Partial<import("core/dist/public").StytchProjectConfiguration> = Stytch.DefaultProjectConfiguration>({ config, styles, callbacks }: StytchProps<TProjectConfiguration>) => React.JSX.Element;
+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;
 /**
@@ -226,8 +245,8 @@ declare const useStytchSession: () => SWRSession;
  *   stytch.magicLinks.authenticate('...')
  * }, [stytch]);
  */
-declare const useStytch: <TProjectConfiguration extends Partial<import("core/dist/public").StytchProjectConfiguration> = Stytch.DefaultProjectConfiguration>() => StytchClient<TProjectConfiguration>;
-declare const withStytch: <T extends object, TProjectConfiguration extends Partial<import("core/dist/public").StytchProjectConfiguration> = Stytch.DefaultProjectConfiguration>(Component: React.ComponentType<T & {
+declare const useStytch: <TProjectConfiguration extends Partial<import("@stytch/core/public").StytchProjectConfiguration> = Stytch.DefaultProjectConfiguration>() => StytchClient<TProjectConfiguration>;
+declare const withStytch: <T extends object, TProjectConfiguration extends Partial<import("@stytch/core/public").StytchProjectConfiguration> = Stytch.DefaultProjectConfiguration>(Component: React.ComponentType<T & {
     stytch: StytchClient<TProjectConfiguration>;
 }>) => React.ComponentType<T>;
 declare const withStytchUser: <T extends object>(Component: React.ComponentType<T & {
@@ -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>')
  *
@@ -258,6 +277,6 @@ type StytchProviderProps<TProjectConfiguration extends StytchProjectConfiguratio
  *   document.getElementById('root'),
  * )
  */
-declare const StytchProvider: <TProjectConfiguration extends Partial<import("core/dist/public").StytchProjectConfiguration> = Stytch.DefaultProjectConfiguration>({ stytch, children }: StytchProviderProps<TProjectConfiguration>) => JSX.Element;
+declare const StytchProvider: <TProjectConfiguration extends Partial<import("@stytch/core/public").StytchProjectConfiguration> = Stytch.DefaultProjectConfiguration>({ stytch, children }: StytchProviderProps<TProjectConfiguration>) => JSX.Element;
 export { StytchLogin, StytchPasswordReset, StytchPasskeyRegistration, IdentityProvider, StytchProvider, useStytch, useStytchSession, useStytchUser, withStytch, withStytchSession, withStytchUser };
 export type { StytchProviderProps };

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 />'));