@stytch/vanilla-js 4.12.2 → 4.13.0

package/CHANGELOG.md

@@ -1,5 +1,15 @@
 # @stytch/vanilla-js
 
+## 4.13.0
+
+### Minor Changes
+
+- a99f21b8: Add Admin Portal SSO UI. The Admin Portal SSO UI can be rendered using the `mountAdminPortalSSO` function from `@stytch/vanilla-js/b2b/adminPortal`.
+
+### Patch Changes
+
+- 0f448e7e: Improve error messages when entering phone number.
+
 ## 4.12.2
 
 ### Patch Changes

package/b2b/adminPortal/package.json

@@ -0,0 +1,6 @@
+{
+  "internal": true,
+  "main": "../../dist/adminPortal/index.js",
+  "module": "../../dist/adminPortal/index.esm.js",
+  "types": "../../dist/adminPortal/index.d.ts"
+}

package/dist/APINetworkClient.d.ts

@@ -0,0 +1,6 @@
+import { NetworkClient } from './NetworkClient';
+import { B2BSubscriptionDataLayer, ConsumerSubscriptionDataLayer } from './SubscriptionService';
+import { AdditionalTelemetryData } from '@stytch/core';
+export declare class APINetworkClient extends NetworkClient {
+    constructor(_publicToken: string, _subscriptionDataLayer: ConsumerSubscriptionDataLayer | B2BSubscriptionDataLayer, _liveAPIURL: string, _testAPIURL: string, _additionalTelemetryDataFn: () => AdditionalTelemetryData);
+}

package/dist/BootstrapDataManager.d.ts

@@ -0,0 +1,38 @@
+import { BootstrapData, RBACPolicyRaw, DFPProtectedAuthMode, INetworkClient } from '@stytch/core';
+import { B2BSubscriptionDataLayer, ConsumerSubscriptionDataLayer } from './SubscriptionService';
+export interface IBootstrapData {
+    getSync: () => BootstrapData;
+    getAsync: () => Promise<BootstrapData>;
+}
+interface RawBootstrapData {
+    request_id: string;
+    status_code: number;
+    disable_sdk_watermark: boolean;
+    cname_domain: string | null;
+    email_domains: string[];
+    captcha_settings: BootstrapData['captchaSettings'];
+    pkce_required_for_email_magic_links: boolean;
+    pkce_required_for_password_resets: boolean;
+    pkce_required_for_oauth: boolean;
+    pkce_required_for_sso: boolean;
+    slug_pattern: string | null;
+    create_organization_enabled: boolean;
+    password_config: {
+        luds_complexity: number;
+        luds_minimum_count: number;
+    } | null;
+    dfp_protected_auth_enabled?: boolean;
+    dfp_protected_auth_mode?: DFPProtectedAuthMode;
+    rbac_policy?: RBACPolicyRaw;
+}
+export declare class BootstrapDataManager implements IBootstrapData {
+    private _publicToken;
+    private _networkClient;
+    private _dataLayer;
+    private readonly _bootstrapDataPromise;
+    constructor(_publicToken: string, _networkClient: INetworkClient, _dataLayer: ConsumerSubscriptionDataLayer | B2BSubscriptionDataLayer);
+    static mapBootstrapData(response: RawBootstrapData): BootstrapData;
+    getSync(): BootstrapData;
+    getAsync(): Promise<BootstrapData>;
+}
+export {};

package/dist/CaptchaProvider.d.ts

@@ -0,0 +1,7 @@
+import { BootstrapData } from '@stytch/core';
+export declare class CaptchaProvider {
+    private bootstrapPromise;
+    private state;
+    constructor(bootstrapPromise: Promise<BootstrapData>);
+    executeRecaptcha: () => Promise<string | undefined>;
+}

package/dist/ClientsideServicesProvider.d.ts

@@ -0,0 +1,16 @@
+import { RPCManifest } from '@stytch/core';
+export declare class ClientsideServicesProvider implements RPCManifest {
+    private iframeURL;
+    private _frameClient;
+    constructor(iframeURL: string);
+    /**
+     * The frameClient is lazily initialized - we don't want to force users
+     * that don't use any of its features to still download the bundle!
+     * @private
+     */
+    private get frameClient();
+    private call;
+    oneTapStart: RPCManifest['oneTapStart'];
+    oneTapSubmit: RPCManifest['oneTapSubmit'];
+    parsedPhoneNumber: RPCManifest['parsedPhoneNumber'];
+}

package/dist/HeadlessOAuthClient.d.ts

@@ -0,0 +1,68 @@
+import { IHeadlessOAuthClient } from '@stytch/core/public';
+import { HeadlessOAuthClient as BaseHeadlessOAuthClient, INetworkClient, IPKCEManager, IConsumerSubscriptionService } from '@stytch/core';
+import { OneTapProvider } from './oneTap/OneTapProvider';
+import { OneTapRenderResult } from './oneTap/OneTapClient';
+export type GoogleOneTapOAuthOptions = {
+    /**
+     * The URL that Stytch redirects to after the OAuth flow is completed for a user that already exists.
+     * This URL should be an endpoint in the backend server that verifies the request by querying Stytch's /oauth/authenticate endpoint and finishes the login.
+     * The URL should be configured as a Login URL in the Stytch Dashboard's Redirect URL page.
+     * If the field is not specified, the default in the Dashboard is used.
+     */
+    login_redirect_url?: string;
+    /**
+     * The URL that Stytch redirects to after the OAuth flow is completed for a user that does not yet exist.
+     * This URL should be an endpoint in the backend server that verifies the request by querying Stytch's /oauth/authenticate endpoint and finishes the login.
+     * The URL should be configured as a Sign Up URL in the Stytch Dashboard's Redirect URL page.
+     * If the field is not specified, the default in the Dashboard is used.
+     */
+    signup_redirect_url?: string;
+    /**
+     * An optional callback function that runs when a user explicitly cancels out of the one tap flow.
+     * This callback may not be invoked immediately or at all depending on the behavior of the browser and Google's SDK.
+     */
+    onOneTapCancelled?: () => void;
+};
+interface IGoogleOneTapOAuthProvider {
+    /**
+     * 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({
+     *     login_redirect_url: 'https://example.com/oauth/callback',
+     *     signup_redirect_url: 'https://example.com/oauth/callback',
+     *   })
+     * }, [stytch]);
+     * return (
+     *   <Button onClick={showGoogleOneTap}> Show Google one tap </Button>
+     * );
+     *
+     * @param options - An {@link GoogleOneTapOAuthOptions} 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?: GoogleOneTapOAuthOptions): Promise<OneTapRenderResult>;
+}
+type DynamicConfig = Promise<{
+    cnameDomain: null | string;
+    pkceRequiredForOAuth: boolean;
+}>;
+type Config = {
+    publicToken: string;
+    testAPIURL: string;
+    liveAPIURL: string;
+};
+export interface IWebOAuthClient extends IHeadlessOAuthClient {
+    googleOneTap: IGoogleOneTapOAuthProvider;
+}
+export declare class HeadlessOAuthClient extends BaseHeadlessOAuthClient implements IWebOAuthClient {
+    private _oneTap;
+    constructor(_networkClient: INetworkClient, _subscriptionService: IConsumerSubscriptionService, _pkceManager: IPKCEManager, _dynamicConfig: DynamicConfig, _config: Config, _oneTap: OneTapProvider);
+    private startOneTap;
+    googleOneTap: IGoogleOneTapOAuthProvider;
+}
+export {};

package/dist/NetworkClient.d.ts

@@ -0,0 +1,25 @@
+import { AdditionalTelemetryData, INetworkClient, RetriableSDKRequestInfo, SDKRequestInfo, SDKTelemetry } from '@stytch/core';
+import { ResponseCommon } from '@stytch/core/public';
+import { B2BSubscriptionDataLayer, ConsumerSubscriptionDataLayer } from './SubscriptionService';
+export declare class NetworkClient implements INetworkClient {
+    private _publicToken;
+    private _subscriptionDataLayer;
+    private baseURL;
+    private additionalTelemetryDataFn;
+    private eventLogger;
+    constructor(_publicToken: string, _subscriptionDataLayer: ConsumerSubscriptionDataLayer | B2BSubscriptionDataLayer, baseURL: string, additionalTelemetryDataFn: () => AdditionalTelemetryData);
+    updateSessionToken: () => null;
+    logEvent({ name, details, error, }: {
+        name: string;
+        details: Record<string, unknown>;
+        error?: {
+            error_code?: string;
+            error_description?: string;
+            http_status_code?: string;
+        };
+    }): void;
+    createTelemetryBlob(): SDKTelemetry;
+    fetchSDK<T extends ResponseCommon>({ url, body, errorMessage, method }: SDKRequestInfo): Promise<T>;
+    retriableFetchSDK<T extends ResponseCommon>({ url, body, errorMessage, method, retryCallback, }: RetriableSDKRequestInfo): Promise<T>;
+    buildSDKUrl(url: string): string;
+}

package/dist/PKCEManager.d.ts

@@ -0,0 +1,12 @@
+import { ISyncPKCEManager, ProofkeyPair } from '@stytch/core';
+import { B2BSubscriptionDataLayer, ConsumerSubscriptionDataLayer } from './SubscriptionService';
+export declare class PKCEManager implements ISyncPKCEManager {
+    private _dataLayer;
+    private namespace;
+    constructor(_dataLayer: ConsumerSubscriptionDataLayer | B2BSubscriptionDataLayer, namespace: string);
+    private key;
+    startPKCETransaction(): Promise<ProofkeyPair>;
+    getPKPair(): ProofkeyPair | undefined;
+    clearPKPair(): void;
+    static createProofkeyPair(): Promise<ProofkeyPair>;
+}

package/dist/StytchHeadlessClient.d.ts

@@ -0,0 +1,45 @@
+import { StateChangeRegisterFunction } from '@stytch/core';
+import { ConsumerState, IHeadlessCryptoWalletClient, IHeadlessMagicLinksClient, IHeadlessOTPsClient, IHeadlessPasswordClient, IHeadlessSessionClient, IHeadlessTOTPClient, IHeadlessUserClient, IHeadlessWebAuthnClient, StytchClientOptions } from '@stytch/core/public';
+import { IWebOAuthClient } from './HeadlessOAuthClient';
+/**
+ * A headless client used for invoking the Stytch API.
+ * 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/sdks/javascript-sdk online}.
+ * @example
+ * const stytch = new StytchHeadlessClient('public-token-<find yours in the stytch dashboard>');
+ * stytch.magicLinks.email.loginOrCreate('sandbox@stytch.com', {
+ *   login_magic_link_url: 'https://example.com/authenticate',
+ *   login_expiration_minutes: 60,
+ *   signup_magic_link_url: 'https://example.com/authenticate',
+ *   signup_expiration_minutes: 60,
+ * });
+ */
+export declare class StytchHeadlessClient {
+    private readonly _subscriptionService;
+    private readonly _sessionManager;
+    private readonly _networkClient;
+    private readonly _dataLayer;
+    private readonly _stateChangeClient;
+    user: IHeadlessUserClient;
+    magicLinks: IHeadlessMagicLinksClient;
+    session: IHeadlessSessionClient;
+    otps: IHeadlessOTPsClient;
+    oauth: IWebOAuthClient;
+    cryptoWallets: IHeadlessCryptoWalletClient;
+    totps: IHeadlessTOTPClient;
+    webauthn: IHeadlessWebAuthnClient;
+    passwords: IHeadlessPasswordClient;
+    /**
+     * Register a callback function to be invoked whenever certain state changes
+     * occur, like a user or session object being updated.
+     *
+     * This is an alternative to more specific methods like `user.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 `user.onChange` and `session.onChange` instead.
+     */
+    onStateChange: StateChangeRegisterFunction<ConsumerState>;
+    constructor(_PUBLIC_TOKEN: string, options?: StytchClientOptions);
+}

package/dist/StytchUIClient.d.ts

@@ -0,0 +1,86 @@
+import { StytchHeadlessClient } from './StytchHeadlessClient';
+import { Callbacks, StytchLoginConfig, StyleConfig } from '@stytch/core/public';
+/**
+ * A client used for invoking the Stytch API an.
+ * 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/sdks/javascript-sdk online.}
+ * @example
+ * const stytch = new StytchUIClient('public-token-<find yours in the stytch dashboard>');
+ * stytch.magicLinks.email.loginOrCreate('sandbox@stytch.com', {
+ *   login_magic_link_url: 'https://example.com/authenticate',
+ *   login_expiration_minutes: 60,
+ *   signup_magic_link_url: 'https://example.com/authenticate',
+ *   signup_expiration_minutes: 60,
+ * });
+ */
+export declare class StytchUIClient extends StytchHeadlessClient {
+    constructor(...args: ConstructorParameters<typeof StytchHeadlessClient>);
+    /**
+     * 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.mountLogin({
+     *   elementId: '#login-container',
+     *   config: {...}
+     * });
+     *
+     * @param elementId - A string containing the id of the element that should contain the login screen.
+     * @param config - A {@link StytchLoginConfig} 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.
+     */
+    mountLogin({ elementId, config, styles, callbacks, }: {
+        elementId: string;
+        config: StytchLoginConfig;
+        styles?: StyleConfig;
+        callbacks?: Callbacks;
+    }): void;
+    /**
+     * Mounts a reset password screen inside the element provided.
+     * If a reset password 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.mountResetPassword({
+     *   elementId: '#login-container',
+     *   config: {...}
+     * });
+     *
+     * @param elementId - A string containing the id of the element that should contain the login screen.
+     * @param config - A {@link StytchLoginConfig} 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.
+     */
+    mountResetPassword({ elementId, config, styles, callbacks, passwordResetToken, }: {
+        elementId: string;
+        config: StytchLoginConfig;
+        styles?: StyleConfig;
+        callbacks?: Callbacks;
+        passwordResetToken: string;
+    }): void;
+    /**
+     * Mounts a Passkey registration screen inside the element provided.
+     * If a passkey registration 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.mountPasskeyRegistration({
+     *   elementId: '#login-container',
+     *   config: {...}
+     * });
+     *
+     * @param elementId - A string containing the id of the element that should contain the login screen.
+     * @param config - A {@link StytchLoginConfig} 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.
+     */
+    mountPasskeyRegistration({ elementId, config, styles, callbacks, }: {
+        elementId: string;
+        config: StytchLoginConfig;
+        styles?: StyleConfig;
+        callbacks?: Callbacks;
+    }): void;
+}

package/dist/SubscriptionService.d.ts

@@ -0,0 +1,111 @@
+import { StytchClientOptions, SessionTokens, UnsubscribeFunction, ConsumerState, B2BState, User, Member, SessionTokensUpdate, Organization } from '@stytch/core/public';
+import { IConsumerSubscriptionService, IB2BSubscriptionService, ISubscriptionService } from '@stytch/core';
+import Cookies from 'js-cookie';
+type SubscriberFunction<T> = (value: T | null) => void;
+type Subscribers<T> = Record<string, SubscriberFunction<T>>;
+export declare const getLocalStorageKey: (publicToken: string, key?: string) => string;
+export declare class SubscriptionDataLayer<T extends ConsumerState | B2BState> {
+    publicToken: string;
+    state: T | null;
+    private readonly stateKeysUpdated;
+    private readonly _opaqueTokenCookieName;
+    private readonly _jwtCookieName;
+    private readonly _cookiePath;
+    private readonly _domain;
+    private readonly _cookieAvailableToSubdomains;
+    private readonly _istCookieName;
+    subscriptions: Subscribers<T>;
+    constructor(publicToken: string, options?: StytchClientOptions);
+    protected get opaqueTokenCookieName(): string;
+    protected get jwtCookieName(): string;
+    protected get istCookieName(): string;
+    readSessionCookie(): {
+        session_token: string | undefined;
+        session_jwt: string | undefined;
+    };
+    readIntermediateSessionTokenCookie(): string | undefined;
+    writeSessionCookie(stateDiff: StateWithTokensLoggedIn<T>): void;
+    writeIntermediateSessionTokenCookie(IST: string): void;
+    removeSessionCookie(): void;
+    removeISTCookie(): void;
+    removeCookies(cookiesToRemove: string[]): void;
+    syncToLocalStorage(): void;
+    getItem(key: string): string | null;
+    setItem(key: string, value: string): void;
+    removeItem(key: string): void;
+    browserSessionStorage: {
+        getItem: (key: string) => string | null;
+        setItem: (key: string, value: string) => void;
+        removeItem: (key: string) => void;
+    };
+    static generateCookieOpts({ path, domain, availableToSubdomains, expiresAt, }: {
+        path: string | null;
+        domain: string | null;
+        availableToSubdomains: boolean;
+        expiresAt: string;
+    }): Cookies.CookieAttributes;
+}
+export declare class ConsumerSubscriptionDataLayer extends SubscriptionDataLayer<ConsumerState> {
+}
+export declare class B2BSubscriptionDataLayer extends SubscriptionDataLayer<B2BState> {
+}
+export declare const __clearConsumerDataLayerCache: () => void;
+export declare const __clearB2BDataLayerCache: () => void;
+export declare const getConsumerDataLayer: (publicToken: string, options?: StytchClientOptions) => ConsumerSubscriptionDataLayer;
+export declare const getB2BDataLayer: (publicToken: string, options?: StytchClientOptions) => B2BSubscriptionDataLayer;
+type StateWithTokensLoggedIn<T> = {
+    state: T | null;
+    session_token: string;
+    session_jwt: string;
+    intermediate_session_token: null;
+};
+type StateWithTokensLoggedOut = {
+    state: null;
+    session_token: null;
+    session_jwt: null;
+    intermediate_session_token: null;
+};
+type StateWithIntermediateSessionToken = {
+    state: null;
+    session_token: null;
+    session_jwt: null;
+    intermediate_session_token: string;
+};
+type StateWithTokensDiff<T> = StateWithTokensLoggedIn<T> | StateWithTokensLoggedOut | StateWithIntermediateSessionToken;
+export declare class BaseSubscriptionService<T extends ConsumerState | B2BState> implements ISubscriptionService<T> {
+    private _publicToken;
+    private _datalayer;
+    /**
+     * Whether the state was retrieved from the cache and is awaiting a refresh
+     */
+    private fromCache;
+    constructor(_publicToken: string, _datalayer: SubscriptionDataLayer<T>);
+    private _listen;
+    getTokens(): SessionTokens | null;
+    getIntermediateSessionToken(): string | null;
+    destroyState(): void;
+    destroySession(): void;
+    _updateStateAndTokensInternal(stateDiff: StateWithTokensDiff<T>): void;
+    updateStateAndTokens(stateDiff: StateWithTokensDiff<T>): void;
+    updateState(state: T | null, fromExternalSource?: boolean): void;
+    updateTokens(tokens: SessionTokensUpdate): void;
+    subscribeToState(callback: SubscriberFunction<T>): UnsubscribeFunction;
+    getState(): T | null;
+    destroy(): void;
+    syncFromDeviceStorage(): null;
+    getFromCache(): boolean;
+    setCacheRefreshed(): void;
+}
+export declare class ConsumerSubscriptionService extends BaseSubscriptionService<ConsumerState> implements IConsumerSubscriptionService {
+    updateUser: (user: User) => void;
+    getUser: () => User | null;
+    getSession: () => import("@stytch/core/public").Session | null;
+}
+export declare class B2BSubscriptionService extends BaseSubscriptionService<B2BState> implements IB2BSubscriptionService {
+    updateMember: (member: Member) => void;
+    getMember: () => Member | null;
+    updateOrganization: (organization: Organization) => void;
+    getOrganization: () => Organization | null;
+    getSession: () => import("@stytch/core/public").MemberSession | null;
+}
+export {};

package/dist/adminPortal/AdminPortalStyleConfig.d.ts

@@ -0,0 +1,166 @@
+/**
+ * The style configuration allows you to customize the look of the Admin Portal.
+ * You can specify some of them or none at all.
+ */
+export 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 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;
+}

package/dist/adminPortal/AdminPortalWrapper.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+import { AdminPortalComponentMountOptions } from './makeAdminPortalComponentMountFn';
+export declare const AdminPortalWrapper: ({ children, options, }: {
+    children?: React.ReactNode;
+    options: AdminPortalComponentMountOptions;
+}) => React.JSX.Element;

package/dist/adminPortal/MainContainer.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+export declare const MainContainer: ({ children }: {
+    children: React.ReactNode;
+}) => React.JSX.Element;

package/dist/adminPortal/Router.d.ts

@@ -0,0 +1,44 @@
+import React from 'react';
+export type RouterStateEntry<TScreenMap> = {
+    [K in keyof TScreenMap]: TScreenMap[K] extends never ? {
+        screen: K;
+        params?: undefined;
+    } : {
+        screen: K;
+        params: TScreenMap[K];
+    };
+}[keyof TScreenMap];
+export type MappedPropsFromRouteMap<TRouteMap extends Record<string, React.ComponentType<any>>> = {
+    [K in keyof TRouteMap]: unknown extends React.ComponentProps<TRouteMap[K]> ? never : React.ComponentProps<TRouteMap[K]>;
+};
+interface RouterState<TScreenMap> {
+    currentRoute: RouterStateEntry<TScreenMap>;
+    pendingRoute?: RouterStateEntry<TScreenMap> | undefined;
+    blockersActive: Set<EnableBlock>;
+}
+type RouterContextState<TScreenMap> = Pick<RouterState<TScreenMap>, 'currentRoute'>;
+type EnableBlock = boolean | (() => boolean);
+export type UseBlockNavigation = (enableBlock: EnableBlock) => {
+    blocked: boolean;
+    allowNavigation: () => void;
+    cancelNavigation: () => void;
+};
+export interface RouterController<TScreenMap> {
+    navigate: (destination: RouterStateEntry<TScreenMap>) => void;
+    useBlockNavigation: UseBlockNavigation;
+}
+type RouteMap<TScreenMap> = {
+    [K in keyof TScreenMap]: React.ComponentType<TScreenMap[K]>;
+};
+export declare const createRouter: <TScreenMap extends Record<string, object>>() => {
+    RouterProvider: ({ children, initialRoute, }: {
+        children: React.ReactNode;
+        initialRoute: RouterStateEntry<TScreenMap>;
+    }) => React.JSX.Element;
+    Router: ({ routeMap }: {
+        routeMap: RouteMap<TScreenMap>;
+    }) => React.JSX.Element | null;
+    useRouterController: () => RouterController<TScreenMap>;
+    useRouterState: () => RouterContextState<TScreenMap>;
+};
+export {};