@stytch/vanilla-js 5.18.2 → 5.18.3

package/CHANGELOG.md

@@ -1,5 +1,13 @@
 # @stytch/vanilla-js
 
+## 5.18.3
+
+### Patch Changes
+
+- abac789: Bundle TypeScript declaration files
+- 6d2867a: Focus OTP input after code is rejected
+- eac826f: Fix ordering of auth methods within tabs to more closely respect configuration
+
 ## 5.18.2
 
 ### Patch Changes

package/dist/OneTapClient-zVI7LxJ6.d.ts

@@ -0,0 +1,11 @@
+import { PromptMomentNotification } from 'google-one-tap';
+
+type OneTapNotShownReason = ReturnType<PromptMomentNotification['getNotDisplayedReason']> | ReturnType<PromptMomentNotification['getSkippedReason']>;
+type OneTapRenderResult = {
+    success: true;
+} | {
+    success: false;
+    reason: OneTapNotShownReason;
+};
+
+export type { OneTapRenderResult as O };

package/dist/adminPortal/index.d.ts

@@ -1,11 +1,357 @@
-import './MuiClassNameSetup';
-export { mountAdminPortalSSO } from './sso/mountAdminPortalSSO';
-export { mountAdminPortalOrgSettings } from './settings/mountAdminPortalOrgSettings';
-export { mountAdminPortalMemberManagement } from './memberManagement/mountAdminPortalMemberManagement';
-export { mountAdminPortalSCIM } from './scim/mountAdminPortalSCIM';
-export type { AdminPortalSSOMountOptions } from './sso/mountAdminPortalSSO';
-export type { AdminPortalOrgSettingsMountOptions } from './settings/mountAdminPortalOrgSettings';
-export type { AdminPortalMemberManagementMountOptions } from './memberManagement/mountAdminPortalMemberManagement';
-export type { AdminPortalSCIMMountOptions } from './scim/mountAdminPortalSCIM';
-export { AdminPortalB2BProducts } from './AdminPortalB2BProducts';
-export type { AdminPortalStyleConfig } from './AdminPortalStyleConfig';
+import { StytchProjectConfigurationInput, B2BMFAProducts } from '@stytch/core/public';
+import { PartialDeep } from 'type-fest';
+import { StytchB2BHeadlessClient } from '../b2b/index.headless.js';
+import { RBACPolicyRole, EnumOrStringLiteral } from '@stytch/core';
+import * as _stytch_core_dist_public from '@stytch/core/dist/public';
+import '../OneTapClient-zVI7LxJ6.js';
+import 'google-one-tap';
+
+/**
+ * The style configuration allows you to customize the look of the Admin Portal.
+ * You can specify some of them or none at all.
+ */
+interface AdminPortalStyleConfig {
+    /**
+     * The configuration object for the Admin Portal container.
+     */
+    container: {
+        /**
+         * The background color of the Admin Portal container.
+         */
+        backgroundColor: string;
+        /**
+         * The border color of the Admin Portal container.
+         */
+        borderColor: string;
+        /**
+         * The border radius of the Admin Portal container.
+         */
+        borderRadius: string;
+        /**
+         * The width of the Admin Portal container.
+         */
+        width: string;
+        /**
+         * The border width of the Admin Portal container.
+         */
+        borderWidth: string | number;
+        /**
+         * The padding of the Admin Portal container.
+         */
+        padding: string | number;
+    };
+    /**
+     * The configuration object for colors used in the Admin Portal.
+     */
+    colors: {
+        /**
+         * Your primary brand color. This will be applied to most of the text in the
+         * Admin Portal.
+         */
+        primary: string;
+        /**
+         * Your secondary brand color. This will be applied to text disclaimers and
+         * other visual elements.
+         */
+        secondary: string;
+        /**
+         * A success color to be used in visual elements.
+         */
+        success: string;
+        /**
+         * An error color to be used in visual elements.
+         */
+        error: string;
+        /**
+         * The text color for accent elements. This will be used for tags and select
+         * chips in the Admin Portal.
+         */
+        accentText: string;
+        /**
+         * An accent color to be used in visual elements. This will be applied to
+         * the background of tags and select chips in the Admin Portal.
+         */
+        accent: string;
+        /**
+         * The color used for miscellaneous elements that don't require visual
+         * elements, like dividers and table, popover menu, and accordion borders.
+         */
+        subtle: string;
+    };
+    /**
+     * The configuration object for buttons in the Admin Portal.
+     */
+    buttons: {
+        /**
+         * The configuration object for primary buttons.
+         */
+        primary: {
+            /**
+             * The background color of the primary button.
+             */
+            backgroundColor: string;
+            /**
+             * The text color of the primary button.
+             */
+            textColor: string;
+            /**
+             * The border color of the primary button.
+             */
+            borderColor: string;
+            /**
+             * The border radius of the primary button.
+             */
+            borderRadius: string;
+        };
+        /**
+         * The configuration object for secondary buttons.
+         */
+        secondary: {
+            /**
+             * The background color of the secondary button.
+             */
+            backgroundColor: string;
+            /**
+             * The text color of the secondary button.
+             */
+            textColor: string;
+            /**
+             * The border color of the secondary button.
+             */
+            borderColor: string;
+            /**
+             * The border radius of the secondary button.
+             */
+            borderRadius: string;
+        };
+        /**
+         * The configuration object for disabled buttons.
+         */
+        disabled: {
+            /**
+             * The background color of the disabled button.
+             */
+            backgroundColor: string;
+            /**
+             * The text color of the disabled button.
+             */
+            textColor: string;
+            /**
+             * The border color of the disabled button.
+             */
+            borderColor: string;
+            /**
+             * The border radius of the disabled button.
+             */
+            borderRadius: string;
+        };
+    };
+    /**
+     * The configuration object for text inputs in the Admin Portal.
+     */
+    inputs: {
+        /**
+         * The background color of the text inputs.
+         */
+        backgroundColor: string;
+        /**
+         * The text color of the text inputs.
+         */
+        textColor: string;
+        /**
+         * The color of the placeholder text in the text inputs.
+         */
+        placeholderColor: string;
+        /**
+         * The border color of the text inputs.
+         */
+        borderColor: string;
+        /**
+         * The border radius of the text inputs.
+         */
+        borderRadius: string;
+    };
+    /**
+     * The font family that will apply to text in the Admin Portal.
+     */
+    fontFamily: string;
+    /**
+     * The default border radius for elements in the Admin Portal.
+     */
+    borderRadius: string;
+}
+
+interface AdminPortalComponentMountOptions<TProjectConfiguration extends StytchProjectConfigurationInput> {
+    /**
+     * The Stytch B2B client to use.
+     */
+    client: StytchB2BHeadlessClient<TProjectConfiguration>;
+    /**
+     * An HTML element or query selector string for the element that should contain the UI.
+     * @example '#container'
+     */
+    element: string | HTMLElement;
+    /**
+     * An {@link AdminPortalStyleConfig} object containing custom styling info.
+     */
+    styles?: PartialDeep<AdminPortalStyleConfig>;
+}
+
+interface AdminPortalUIConfigRoleDisplayProvider {
+    /**
+     * A function that returns the display name for a role. By default, the role's
+     * ID is used as the display name.
+     *
+     * @param role The role to get the display name for.
+     * @returns The display name for the role.
+     */
+    getRoleDisplayName?: (role: RBACPolicyRole) => string;
+    /**
+     * A function that returns the description for a role. By default, the
+     * description assigned to the role is used as is.
+     *
+     * @param role The role to get the description for.
+     * @returns The description for the role.
+     */
+    getRoleDescription?: (role: RBACPolicyRole) => string;
+    /**
+     * A function that returns the sorted order of roles based on a custom list of role IDs.
+     *
+     * @param roles The list of roles to be sorted. Each role is an object that includes the role ID.
+     * @returns An array of role IDs representing the desired sort order. The returned
+     * list may include a subset of role IDs from the input. Roles included in this array
+     * will be sorted first. Any roles not specified in the array will appear after the
+     * specified roles.
+     */
+    getRoleSortOrder?: (roles: RBACPolicyRole[]) => string[];
+}
+
+/**
+ * The UI configuration object for SSO configuration used in the Admin Portal.
+ */
+type AdminPortalSSOUIConfig = AdminPortalUIConfigRoleDisplayProvider;
+interface AdminPortalSSOMountOptions<TProjectConfiguration extends StytchProjectConfigurationInput = Stytch.DefaultProjectConfiguration> extends AdminPortalComponentMountOptions<TProjectConfiguration> {
+    /**
+     * An {@link AdminPortalSSOUIConfig} object containing custom configuration.
+     */
+    config?: AdminPortalSSOUIConfig;
+}
+
+/**
+ * Mounts the Admin Portal SSO Management component inside the element provided.
+ * If the component already been rendered inside the element, it will be updated
+ * to use the new options passed in.
+ * @example
+ * mountAdminPortalSSO({
+ *   client: stytchClient,
+ *   element: '#container',
+ *   styles: {...}
+ * });
+ *
+ * @throws An error when the element specified by elementId cannot be found.
+ */
+declare const mountAdminPortalSSO: (options: AdminPortalSSOMountOptions<Partial<_stytch_core_dist_public.StytchProjectConfiguration>>) => void;
+
+declare enum AdminPortalB2BProducts {
+    emailMagicLinks = "emailMagicLinks",
+    emailOtp = "emailOtp",
+    sso = "sso",
+    password = "password",
+    oauthGoogle = "oauthGoogle",
+    oauthMicrosoft = "oauthMicrosoft",
+    oauthHubspot = "oauthHubspot",
+    oauthSlack = "oauthSlack",
+    oauthGithub = "oauthGithub"
+}
+
+/**
+ * The UI configuration object for organization used in the Admin Portal.
+ */
+interface AdminPortalOrgUIConfig extends AdminPortalUIConfigRoleDisplayProvider {
+    /**
+     * Specify the auth methods that a member can choose to enable when restricting the organization's allowed auth methods.
+     * If not specified, all auth methods are shown.
+     */
+    allowedAuthMethods?: EnumOrStringLiteral<AdminPortalB2BProducts>[];
+    /**
+     * Specify the MFA auth methods that a member can choose to enable when restricting the organization's allowed auth methods.
+     * If not specified, all auth methods are shown.
+     */
+    allowedMfaAuthMethods?: EnumOrStringLiteral<B2BMFAProducts>[];
+}
+interface AdminPortalOrgSettingsMountOptions<TProjectConfiguration extends StytchProjectConfigurationInput = Stytch.DefaultProjectConfiguration> extends AdminPortalComponentMountOptions<TProjectConfiguration> {
+    /**
+     * An {@link AdminPortalOrgUIConfig} object containing custom configuration.
+     */
+    config?: AdminPortalOrgUIConfig;
+}
+
+/**
+ * Mounts the Admin Portal Organization Settings Management component inside the element provided.
+ * If the component already been rendered inside the element, it will be updated
+ * to use the new options passed in.
+ * @example
+ * mountAdminPortalOrgSettings{
+ *   client: stytchClient,
+ *   element: '#container',
+ *   styles: {...},
+ *   config: {...},
+ * });
+ *
+ * @throws An error when the element specified by element cannot be found.
+ */
+declare const mountAdminPortalOrgSettings: (options: AdminPortalOrgSettingsMountOptions<Partial<_stytch_core_dist_public.StytchProjectConfiguration>>) => void;
+
+/**
+ * The UI configuration object for member management used in the Admin Portal.
+ */
+type AdminPortalMemberManagementUIConfig = AdminPortalUIConfigRoleDisplayProvider;
+interface AdminPortalMemberManagementMountOptions<TProjectConfiguration extends StytchProjectConfigurationInput = Stytch.DefaultProjectConfiguration> extends AdminPortalComponentMountOptions<TProjectConfiguration> {
+    /**
+     * An {@link AdminPortalMemberManagementUIConfig} object containing custom configuration.
+     */
+    config?: AdminPortalMemberManagementUIConfig;
+}
+
+/**
+ * Mounts the Admin Portal Member Management component inside the element provided.
+ * If the component already been rendered inside the element, it will be updated
+ * to use the new options passed in.
+ * @example
+ * mountAdminPortalMemberManagement({
+ *   client: stytchClient,
+ *   element: '#container',
+ *   styles: {...}
+ * });
+ *
+ * @throws An error when the element specified cannot be found.
+ */
+declare const mountAdminPortalMemberManagement: (options: AdminPortalMemberManagementMountOptions<Partial<_stytch_core_dist_public.StytchProjectConfiguration>>) => void;
+
+/**
+ * The UI configuration object for SCIM used in the Admin Portal.
+ */
+type AdminPortalSCIMUIConfig = AdminPortalUIConfigRoleDisplayProvider;
+interface AdminPortalSCIMMountOptions<TProjectConfiguration extends StytchProjectConfigurationInput = Stytch.DefaultProjectConfiguration> extends AdminPortalComponentMountOptions<TProjectConfiguration> {
+    /**
+     * An {@link AdminPortalSCIMUIConfig} object containing custom configuration.
+     */
+    config?: AdminPortalSCIMUIConfig;
+}
+
+/**
+ * Mounts the Admin Portal SCIM Management component inside the element provided.
+ * If the component already been rendered inside the element, it will be updated
+ * to use the new options passed in.
+ * @example
+ * mountAdminPortalSCIM{
+ *   client: stytchClient,
+ *   element: '#container',
+ *   styles: {...},
+ * });
+ *
+ * @throws An error when the element specified by element cannot be found.
+ */
+declare const mountAdminPortalSCIM: (options: AdminPortalSCIMMountOptions<Partial<_stytch_core_dist_public.StytchProjectConfiguration>>) => void;
+
+export { AdminPortalB2BProducts, type AdminPortalMemberManagementMountOptions, type AdminPortalOrgSettingsMountOptions, type AdminPortalSCIMMountOptions, type AdminPortalSSOMountOptions, type AdminPortalStyleConfig, mountAdminPortalMemberManagement, mountAdminPortalOrgSettings, mountAdminPortalSCIM, mountAdminPortalSSO };

package/dist/b2b/index.d.ts

@@ -1,2 +1,74 @@
-export { StytchB2BUIClient } from './StytchB2BUIClient';
+import { StytchB2BHeadlessClient } from './index.headless.js';
+import { IDPConsentScreenManifest, StytchProjectConfigurationInput, StyleConfig, Callbacks, StytchB2BUIConfig } from '@stytch/core/public';
 export * from '@stytch/core/public';
+import '@stytch/core';
+import '../OneTapClient-zVI7LxJ6.js';
+import 'google-one-tap';
+
+type B2BIDPConsentManifestGenerator = (input: {
+    scopes: string[];
+    clientName: string;
+}) => IDPConsentScreenManifest;
+
+/**
+ * A client used for invoking Stytch's B2B APIs.
+ * The Stytch UI Client can be used as a drop-in solution for authentication and session management.
+ * The Stytch UI client also can be used to render various UI elements for managing users.
+ * Full documentation can be found {@link https://stytch.com/docs/b2b/sdks/javascript-sdk online}.
+ *
+ * @example
+ * const stytch = new StytchB2BUIClient('public-token-<find yours in the stytch dashboard>');
+ * stytch.magicLinks.email.loginOrCreate({
+ *   email: 'sandbox@stytch.com',
+ *   organization_id: 'organization-test-123',
+ * });
+ */
+declare class StytchB2BUIClient<TProjectConfiguration extends StytchProjectConfigurationInput = Stytch.DefaultProjectConfiguration> extends StytchB2BHeadlessClient<TProjectConfiguration> {
+    constructor(...args: ConstructorParameters<typeof StytchB2BHeadlessClient<TProjectConfiguration>>);
+    /**
+     * Mounts a login screen inside the element provided.
+     * If a login screen has already been rendered inside the element,
+     * it will be updated to use the new config, style, and callback options passed in.
+     * @example
+     * stytchClient.mount({
+     *   elementId: '#container',
+     *   config: {...}
+     * });
+     *
+     * @param elementId - A string containing the id of the element that should contain the login screen.
+     * @param config - A {@link StytchB2BUIConfig} object containing the products that should be registered
+     * @param styles - A {@link StyleConfig} object containing custom styling info
+     * @param callbacks - Optional {@link Callbacks} triggered by various events in the Stytch SDK.
+     * @throws An error when the element specified by elementId cannot be found.
+     */
+    mount({ elementId, styles, callbacks, config, }: {
+        elementId: string;
+        styles?: StyleConfig;
+        callbacks?: Callbacks<TProjectConfiguration>;
+        config: StytchB2BUIConfig;
+    }): void;
+    /**
+     * Mounts an IDP Consent screen inside the element provided.
+     * Parses OAuth Authorization params (client_id, scope, nonce, etc.) out of the page URL.
+     * Requires the user to be logged in.
+     * @example
+     * stytchClient.mountIdentityProvider({
+     *   elementId: '#idp-container',
+     *   config: {...}
+     * });
+     *
+     * @param elementId - A string containing the id of the element that should contain the consent screen.
+     * @param styles - A {@link StyleConfig} object containing custom styling info
+     * @param callbacks - Optional {@link Callbacks} triggered by various events in the Stytch SDK.
+     * @param getIDPConsentManifest - Optional {@link B2BIDPConsentManifestGenerator} to customize the consent screen.
+     * @throws An error when the element specified by elementId cannot be found.
+     */
+    mountIdentityProvider({ elementId, styles, callbacks, getIDPConsentManifest, }: {
+        elementId: string;
+        styles?: StyleConfig;
+        callbacks?: Callbacks<TProjectConfiguration>;
+        getIDPConsentManifest?: B2BIDPConsentManifestGenerator;
+    }): void;
+}
+
+export { StytchB2BUIClient };

package/dist/b2b/index.esm.js

@@ -4030,6 +4030,13 @@ var OTPInput = function OTPInput(_ref90) {
   var otp = _ref90.otp,
     setOtp = _ref90.setOtp,
     disabled = _ref90.disabled;
+  var ref = _$1(null);
+  p$1(function () {
+    var _a;
+    if (!disabled) {
+      (_a = ref.current) === null || _a === void 0 ? void 0 : _a.focus();
+    }
+  }, [disabled, ref]);
   var handleInput = function handleInput(e) {
     var target = e.target;
     var newValue = target.value.replace(/\D/g, '').slice(0, OTP_LENGTH);
@@ -4041,6 +4048,7 @@ var OTPInput = function OTPInput(_ref90) {
   return /*#__PURE__*/wn.createElement("div", {
     style: otpContainerStyles
   }, /*#__PURE__*/wn.createElement("input", Object.assign({
+    ref: ref,
     "aria-label": "One-time passcode",
     autoComplete: "one-time-code",
     autoFocus: true,

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

@@ -1,2 +1,135 @@
-export { StytchB2BHeadlessClient } from './StytchB2BHeadlessClient';
+import { StateChangeRegisterFunction } from '@stytch/core';
+import { StytchProjectConfigurationInput, IHeadlessB2BOAuthClient, IHeadlessB2BMagicLinksClient, IHeadlessB2BSessionClient, IHeadlessB2BMemberClient, IHeadlessB2BSelfClient, IHeadlessB2BOrganizationClient, IHeadlessB2BSSOClient, IHeadlessB2BDiscoveryClient, IHeadlessB2BPasswordClient, IHeadlessB2BOTPsClient, IHeadlessB2BTOTPsClient, IHeadlessB2BRecoveryCodesClient, IHeadlessB2BRBACClient, IHeadlessB2BSCIMClient, IHeadlessB2BImpersonationClient, B2BState, StytchClientOptions } from '@stytch/core/public';
 export * from '@stytch/core/public';
+import { O as OneTapRenderResult } from '../OneTapClient-zVI7LxJ6.js';
+import 'google-one-tap';
+
+type B2BGoogleOneTapDiscoveryOAuthOptions = {
+    /**
+     * The URL that Stytch redirects to after the Google One Tap discovery flow is completed.
+     * This should be a URL that verifies the request by querying Stytch's /oauth/discovery/authenticate endpoint.
+     * If this value is not passed, the default discovery redirect URL that you set in your Dashboard is used.
+     * If you have not set a default discovery redirect URL, an error is returned.
+     */
+    discovery_redirect_url?: string;
+};
+type B2BGoogleOneTapOAuthOptions = {
+    /**
+     * The ID of the organization that the end user is logging in to.
+     */
+    organization_id: string;
+    /**
+     * The URL that Stytch redirects to after the Google One Tap flow is completed for a member who already exists.
+     * This should be a URL that verifies the request by querying Stytch's /oauth/authenticate endpoint.
+     * If this value is not passed, the default login redirect URL that you set in your Dashboard is used.
+     * If you have not set a default login redirect URL, an error is returned.
+     */
+    login_redirect_url?: string;
+    /**
+     * The URL that Stytch redirects to after the Google One Tap flow is completed for a member who does not yet exist.
+     * This should be a URL that verifies the request by querying Stytch's /oauth/authenticate endpoint.
+     * If this value is not passed, the default signup redirect URL that you set in your Dashboard is used.
+     * If you have not set a default signup redirect URL, an error is returned.
+     */
+    signup_redirect_url?: string;
+};
+interface IB2BGoogleOneTapOAuthProvider {
+    discovery: {
+        /**
+         * Start a discovery OAuth flow by showing the Google one tap prompt in the top right corner of the user's browser.
+         * You can configure this to be started by a user action (i.e Button click) or on load/render.
+         * @example
+         * const showGoogleOneTap = useCallback(()=> {
+         *   stytch.oauth.googleOneTap.discovery.start({
+         *     discovery_redirect_url: 'https://example.com/oauth/callback',
+         *   })
+         * }, [stytch]);
+         * return (
+         *   <Button onClick={showGoogleOneTap}> Show Google one tap </Button>
+         * );
+         *
+         * @param options - A {@link B2BGoogleOneTapDiscoveryOAuthOptions} object
+         *
+         * @returns A {@link OneTapRenderResult} object. The result object includes if the one-tap prompt
+         * was rendered, and a reason if it couldn't be rendered.
+         *
+         * @throws An Error if the one tap client cannot be created.
+         */
+        start(options?: B2BGoogleOneTapDiscoveryOAuthOptions): Promise<OneTapRenderResult>;
+    };
+    /**
+     * Start an OAuth flow by showing the Google one tap prompt in the top right corner of the user's browser.
+     * You can configure this to be started by a user action (i.e Button click) or on load/render.
+     * @example
+     * const showGoogleOneTap = useCallback(()=> {
+     *   stytch.oauth.googleOneTap.start({
+     *     organization_id: 'organization-test-123',
+     *   })
+     * }, [stytch]);
+     * return (
+     *   <Button onClick={showGoogleOneTap}> Show Google one tap </Button>
+     * );
+     *
+     * @param options - A {@link B2BGoogleOneTapOAuthOptions} object
+     *
+     * @returns A {@link OneTapRenderResult} object. The result object includes if the one-tap prompt
+     * was rendered, and a reason if it couldn't be rendered.
+     *
+     * @throws An Error if the one tap client cannot be created.
+     */
+    start(options?: B2BGoogleOneTapOAuthOptions): Promise<OneTapRenderResult>;
+}
+interface IWebB2BOAuthClient<TProjectConfiguration extends StytchProjectConfigurationInput> extends IHeadlessB2BOAuthClient<TProjectConfiguration> {
+    googleOneTap: IB2BGoogleOneTapOAuthProvider;
+}
+
+/**
+ * A headless client used for invoking Stytch's B2B APIs.
+ * The Stytch Headless Client can be used as a drop-in solution for authentication and session management.
+ * Full documentation can be found {@link https://stytch.com/docs/b2b/sdks/javascript-sdk online}.
+ *
+ * @example
+ * const stytch = new StytchB2BHeadlessClient('public-token-<find yours in the stytch dashboard>');
+ * stytch.magicLinks.email.loginOrCreate({
+ *   email: 'sandbox@stytch.com',
+ *   organization_id: 'organization-test-123',
+ * });
+ */
+declare class StytchB2BHeadlessClient<TProjectConfiguration extends StytchProjectConfigurationInput = Stytch.DefaultProjectConfiguration> {
+    private readonly _subscriptionService;
+    private readonly _sessionManager;
+    private readonly _networkClient;
+    private readonly _dataLayer;
+    private readonly _stateChangeClient;
+    magicLinks: IHeadlessB2BMagicLinksClient<TProjectConfiguration>;
+    session: IHeadlessB2BSessionClient<TProjectConfiguration>;
+    /** @deprecated Please use client.self instead. This will be removed in a future release. */
+    member: IHeadlessB2BMemberClient;
+    self: IHeadlessB2BSelfClient;
+    organization: IHeadlessB2BOrganizationClient;
+    oauth: IWebB2BOAuthClient<TProjectConfiguration>;
+    sso: IHeadlessB2BSSOClient<TProjectConfiguration>;
+    discovery: IHeadlessB2BDiscoveryClient<TProjectConfiguration>;
+    passwords: IHeadlessB2BPasswordClient<TProjectConfiguration>;
+    otps: IHeadlessB2BOTPsClient<TProjectConfiguration>;
+    totp: IHeadlessB2BTOTPsClient<TProjectConfiguration>;
+    recoveryCodes: IHeadlessB2BRecoveryCodesClient<TProjectConfiguration>;
+    rbac: IHeadlessB2BRBACClient;
+    scim: IHeadlessB2BSCIMClient;
+    impersonation: IHeadlessB2BImpersonationClient;
+    /**
+     * Register a callback function to be invoked whenever certain state changes
+     * occur, like a member or session object being updated.
+     *
+     * This is an alternative to more specific methods like `self.onChange` and
+     * `session.onChange`. It can be helpful if you want to be notified of related
+     * changes to different parts of state at once.
+     *
+     * If you are only interested in specific state changes, consider using more
+     * specific methods like `self.onChange` and `session.onChange` instead.
+     */
+    onStateChange: StateChangeRegisterFunction<B2BState>;
+    constructor(_PUBLIC_TOKEN: string, options?: StytchClientOptions);
+}
+
+export { StytchB2BHeadlessClient };

package/dist/b2b/index.headless.esm.js

@@ -216,7 +216,7 @@ var ClientsideServicesProvider = /*#__PURE__*/function () {
   }]);
   return ClientsideServicesProvider;
 }();
-var version = "5.18.2";
+var version = "5.18.3";
 var NetworkClient = /*#__PURE__*/function () {
   function NetworkClient(_publicToken, _subscriptionDataLayer, _liveAPIURL, _testAPIURL, additionalTelemetryDataFn) {
     _classCallCheck(this, NetworkClient);

package/dist/b2b/index.headless.js

@@ -217,7 +217,7 @@ var ClientsideServicesProvider = /*#__PURE__*/function () {
   }]);
   return ClientsideServicesProvider;
 }();
-var version = "5.18.2";
+var version = "5.18.3";
 var NetworkClient = /*#__PURE__*/function () {
   function NetworkClient(_publicToken, _subscriptionDataLayer, _liveAPIURL, _testAPIURL, additionalTelemetryDataFn) {
     _classCallCheck(this, NetworkClient);

package/dist/b2b/index.js

@@ -4031,6 +4031,13 @@ var OTPInput = function OTPInput(_ref90) {
   var otp = _ref90.otp,
     setOtp = _ref90.setOtp,
     disabled = _ref90.disabled;
+  var ref = extractErrorMessage._(null);
+  extractErrorMessage.p(function () {
+    var _a;
+    if (!disabled) {
+      (_a = ref.current) === null || _a === void 0 ? void 0 : _a.focus();
+    }
+  }, [disabled, ref]);
   var handleInput = function handleInput(e) {
     var target = e.target;
     var newValue = target.value.replace(/\D/g, '').slice(0, OTP_LENGTH);
@@ -4042,6 +4049,7 @@ var OTPInput = function OTPInput(_ref90) {
   return /*#__PURE__*/extractErrorMessage.wn.createElement("div", {
     style: otpContainerStyles
   }, /*#__PURE__*/extractErrorMessage.wn.createElement("input", Object.assign({
+    ref: ref,
     "aria-label": "One-time passcode",
     autoComplete: "one-time-code",
     autoFocus: true,