@stytch/react 20.0.0-next.2 → 20.0.0-next.4

package/dist/esm-dev/packages/web/src/ui/b2b/screens/SsoAndOAuthButtons.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"SsoAndOAuthButtons.mjs","sources":["../../../../../../../../../web/src/ui/b2b/screens/SsoAndOAuthButtons.tsx"],"sourcesContent":["import React from 'react';\nimport { B2BOAuthProviders, AuthFlowType } from '@stytch/core/public';\nimport { arrayUtils } from '@stytch/core';\nimport { useLingui } from '@lingui/react/macro';\n\nimport { useConfig, useGlobalReducer } from '../GlobalContextProvider';\nimport { AppScreens, ButtonComponent, MainScreenComponent } from '../types/AppScreens';\nimport { OauthProviderParams, useEffectiveAuthConfig } from '../hooks/useEffectiveAuthConfig';\nimport { useProductComponents } from '../utils';\nimport { assertUnreachable } from '../../../utils/assertUnreachable';\nimport { AuthButton as AuthButtonType, getButtonId, getSsoMethodKey } from '../types/authMethodKeys';\nimport { useLastUsedAuthMethod } from '../hooks/useLastUsedAuthMethod';\nimport Button from '../../components/atoms/Button';\nimport LastUsed from '../../components/molecules/LastUsed';\nimport ButtonColumn from '../../components/molecules/ButtonColumn';\n\n// OAuth helper functions\nexport const getCustomScopesForProvider = (\n  oauthProvider: {\n    type: B2BOAuthProviders;\n    one_tap: boolean;\n    customScopes: string[];\n    providerParams: Record<string, string>;\n    cancel_on_tap_outside?: boolean;\n  },\n  oauthOptionsCustomScopes: string[] | undefined,\n) => {\n  let currentCustomScopes = oauthProvider.customScopes;\n  if (Object.keys(currentCustomScopes).length == 0) {\n    currentCustomScopes = oauthOptionsCustomScopes as string[];\n  }\n  return currentCustomScopes;\n};\n\nexport const getProviderParamsForProvider = (\n  oauthProvider: {\n    type: B2BOAuthProviders;\n    one_tap: boolean;\n    customScopes: string[];\n    providerParams: Record<string, string>;\n    cancel_on_tap_outside?: boolean;\n  },\n  oauthOptionsProviderParams: Record<string, string> | undefined,\n  email: string | undefined,\n) => {\n  let currentProviderParams = oauthProvider.providerParams;\n  if (Object.keys(currentProviderParams).length == 0) {\n    currentProviderParams = oauthOptionsProviderParams ?? {};\n  }\n\n  if (\n    email &&\n    (oauthProvider.type === B2BOAuthProviders.Google || oauthProvider.type === B2BOAuthProviders.Microsoft) &&\n    !('login_hint' in currentProviderParams)\n  ) {\n    currentProviderParams = {\n      ...currentProviderParams,\n      login_hint: email,\n    };\n  }\n\n  return currentProviderParams;\n};\n\nexport const SsoAndOAuthButtons = ({ buttons }: { buttons: ButtonComponent[] }) => {\n  const { t } = useLingui();\n  const [state, dispatch] = useGlobalReducer();\n  const { oauthProviderSettings = [] } = useEffectiveAuthConfig();\n\n  const [lastUsedMethod, setLastUsedMethod] = useLastUsedAuthMethod();\n\n  const config = useConfig();\n  const { loginRedirectURL, signupRedirectURL, discoveryRedirectURL, customScopes, providerParams } =\n    config.oauthOptions ?? {};\n\n  const { B2BGoogleOneTap, OAuthB2BButton, SSOButton } = useProductComponents(config, 'ssoAndOAuthButtons')!;\n\n  // Determine which buttons need to be displayed\n  const isDiscoveryFlow = state.flowState.type === AuthFlowType.Discovery;\n  const authButtons = buttons.flatMap<AuthButtonType>((button) => {\n    if (button === MainScreenComponent.OAuthButtons) {\n      return oauthProviderSettings.map((provider) => ({ type: 'oauth', provider }));\n    } else if (button === MainScreenComponent.SSOButtons) {\n      return isDiscoveryFlow\n        ? { type: 'sso-discovery' }\n        : (state.flowState.organization?.sso_active_connections?.map((connection) => ({ type: 'sso', connection })) ??\n            []);\n    } else {\n      assertUnreachable(button);\n    }\n  });\n\n  if (authButtons.length === 0) {\n    return null;\n  }\n\n  // Reorder providers based on last used\n  const [reorderedButtons, foundLastUsedOAuth] = arrayUtils.moveToFront(\n    authButtons,\n    (button) => getButtonId(button) === lastUsedMethod,\n  );\n\n  // Helper function to create OAuth button component\n  const createOAuthButton = (oauthProvider: OauthProviderParams) => {\n    const providerProps = {\n      customScopes: getCustomScopesForProvider(oauthProvider, customScopes),\n      providerParams: getProviderParamsForProvider(oauthProvider, providerParams, state.primary.email),\n    };\n\n    if (oauthProvider.one_tap) {\n      return (\n        <B2BGoogleOneTap\n          key={oauthProvider.type}\n          {...providerProps}\n          cancelOnTapOutside={oauthProvider.cancel_on_tap_outside}\n        />\n      );\n    }\n\n    return (\n      <OAuthB2BButton\n        key={oauthProvider.type}\n        providerType={oauthProvider.type}\n        loginRedirectUrl={loginRedirectURL}\n        signupRedirectUrl={signupRedirectURL}\n        discoveryRedirectUrl={discoveryRedirectURL}\n        onSuccess={() => setLastUsedMethod(oauthProvider.type)}\n        {...providerProps}\n      />\n    );\n  };\n\n  return (\n    <ButtonColumn>\n      {reorderedButtons.map((button, index) => {\n        const buttonComponent = (() => {\n          switch (button.type) {\n            case 'oauth':\n              return createOAuthButton(button.provider);\n\n            case 'sso':\n              return (\n                <SSOButton\n                  key={button.connection.display_name}\n                  connection={button.connection}\n                  onStart={() => setLastUsedMethod(getSsoMethodKey(button.connection))}\n                />\n              );\n\n            case 'sso-discovery':\n              return (\n                <Button\n                  key=\"sso-discovery\"\n                  variant=\"outline\"\n                  onClick={() => {\n                    dispatch({ type: 'transition', screen: AppScreens.SSODiscoveryEmail, history: 'push' });\n                  }}\n                >\n                  {t({ id: 'provider.continueWithSSO', message: 'Use single sign-on' })}\n                </Button>\n              );\n\n            default:\n              assertUnreachable(button);\n          }\n        })();\n\n        return foundLastUsedOAuth && index === 0 ? (\n          <LastUsed key={getButtonId(button)}>{buttonComponent}</LastUsed>\n        ) : (\n          buttonComponent\n        );\n      })}\n    </ButtonColumn>\n  );\n};\n"],"names":["getCustomScopesForProvider","oauthProvider","oauthOptionsCustomScopes","currentCustomScopes","customScopes","Object","keys","length","getProviderParamsForProvider","oauthOptionsProviderParams","email","currentProviderParams","providerParams","type","B2BOAuthProviders","Google","Microsoft","login_hint","SsoAndOAuthButtons","buttons","useLingui","state","dispatch","useGlobalReducer","oauthProviderSettings","useEffectiveAuthConfig","lastUsedMethod","setLastUsedMethod","useLastUsedAuthMethod","config","useConfig","loginRedirectURL","signupRedirectURL","discoveryRedirectURL","oauthOptions","B2BGoogleOneTap","OAuthB2BButton","SSOButton","useProductComponents","isDiscoveryFlow","flowState","AuthFlowType","Discovery","authButtons","flatMap","button","MainScreenComponent","OAuthButtons","map","provider","SSOButtons","organization","sso_active_connections","connection","assertUnreachable","reorderedButtons","foundLastUsedOAuth","arrayUtils","moveToFront","getButtonId","createOAuthButton","providerProps","primary","one_tap","React","key","cancelOnTapOutside","cancel_on_tap_outside","providerType","loginRedirectUrl","signupRedirectUrl","discoveryRedirectUrl","onSuccess","ButtonColumn","index","buttonComponent","display_name","onStart","getSsoMethodKey","Button","variant","onClick","screen","AppScreens","SSODiscoveryEmail","history","LastUsed"],"mappings":"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"}
+{"version":3,"file":"SsoAndOAuthButtons.mjs","sources":["../../../../../../../../../web/src/ui/b2b/screens/SsoAndOAuthButtons.tsx"],"sourcesContent":["import React from 'react';\nimport { B2BOAuthProviders, AuthFlowType } from '@stytch/core/public';\nimport { arrayUtils } from '@stytch/core';\nimport { useLingui } from '@lingui/react/macro';\n\nimport { useConfig, useGlobalReducer } from '../GlobalContextProvider';\nimport { AppScreens, ButtonComponent, MainScreenComponent } from '../types/AppScreens';\nimport { OauthProviderParams, useEffectiveAuthConfig } from '../hooks/useEffectiveAuthConfig';\nimport { useProductComponents } from '../utils';\nimport { assertUnreachable } from '../../../utils/assertUnreachable';\nimport { AuthButton as AuthButtonType, getButtonKey, getSsoMethodKey } from '../types/authMethodKeys';\nimport { useLastUsedAuthMethod } from '../hooks/useLastUsedAuthMethod';\nimport Button from '../../components/atoms/Button';\nimport LastUsed from '../../components/molecules/LastUsed';\nimport ButtonColumn from '../../components/molecules/ButtonColumn';\nimport { getButtonId, usePresentation } from '../../components/PresentationConfig';\n\n// OAuth helper functions\nexport const getCustomScopesForProvider = (\n  oauthProvider: {\n    type: B2BOAuthProviders;\n    one_tap: boolean;\n    customScopes: string[];\n    providerParams: Record<string, string>;\n    cancel_on_tap_outside?: boolean;\n  },\n  oauthOptionsCustomScopes: string[] | undefined,\n) => {\n  let currentCustomScopes = oauthProvider.customScopes;\n  if (Object.keys(currentCustomScopes).length == 0) {\n    currentCustomScopes = oauthOptionsCustomScopes as string[];\n  }\n  return currentCustomScopes;\n};\n\nexport const getProviderParamsForProvider = (\n  oauthProvider: {\n    type: B2BOAuthProviders;\n    one_tap: boolean;\n    customScopes: string[];\n    providerParams: Record<string, string>;\n    cancel_on_tap_outside?: boolean;\n  },\n  oauthOptionsProviderParams: Record<string, string> | undefined,\n  email: string | undefined,\n) => {\n  let currentProviderParams = oauthProvider.providerParams;\n  if (Object.keys(currentProviderParams).length == 0) {\n    currentProviderParams = oauthOptionsProviderParams ?? {};\n  }\n\n  if (\n    email &&\n    (oauthProvider.type === B2BOAuthProviders.Google || oauthProvider.type === B2BOAuthProviders.Microsoft) &&\n    !('login_hint' in currentProviderParams)\n  ) {\n    currentProviderParams = {\n      ...currentProviderParams,\n      login_hint: email,\n    };\n  }\n\n  return currentProviderParams;\n};\n\nexport const SsoAndOAuthButtons = ({ buttons }: { buttons: ButtonComponent[] }) => {\n  const { t } = useLingui();\n  const [state, dispatch] = useGlobalReducer();\n  const { oauthProviderSettings = [] } = useEffectiveAuthConfig();\n  const presentation = usePresentation();\n\n  const [lastUsedMethod, setLastUsedMethod] = useLastUsedAuthMethod();\n\n  const config = useConfig();\n  const { loginRedirectURL, signupRedirectURL, discoveryRedirectURL, customScopes, providerParams } =\n    config.oauthOptions ?? {};\n\n  const { B2BGoogleOneTap, OAuthB2BButton, SSOButton } = useProductComponents(config, 'ssoAndOAuthButtons')!;\n\n  // Determine which buttons need to be displayed\n  const isDiscoveryFlow = state.flowState.type === AuthFlowType.Discovery;\n  const authButtons = buttons.flatMap<AuthButtonType>((button) => {\n    if (button === MainScreenComponent.OAuthButtons) {\n      return oauthProviderSettings.map((provider) => ({ type: 'oauth', provider }));\n    } else if (button === MainScreenComponent.SSOButtons) {\n      return isDiscoveryFlow\n        ? { type: 'sso-discovery' }\n        : (state.flowState.organization?.sso_active_connections?.map((connection) => ({ type: 'sso', connection })) ??\n            []);\n    } else {\n      assertUnreachable(button);\n    }\n  });\n\n  if (authButtons.length === 0) {\n    return null;\n  }\n\n  // Reorder providers based on last used\n  const [reorderedButtons, foundLastUsedOAuth] = arrayUtils.moveToFront(\n    authButtons,\n    (button) => getButtonKey(button) === lastUsedMethod,\n  );\n\n  // Helper function to create OAuth button component\n  const createOAuthButton = (oauthProvider: OauthProviderParams) => {\n    const providerProps = {\n      customScopes: getCustomScopesForProvider(oauthProvider, customScopes),\n      providerParams: getProviderParamsForProvider(oauthProvider, providerParams, state.primary.email),\n    };\n\n    if (oauthProvider.one_tap) {\n      return (\n        <B2BGoogleOneTap\n          key={oauthProvider.type}\n          {...providerProps}\n          cancelOnTapOutside={oauthProvider.cancel_on_tap_outside}\n        />\n      );\n    }\n\n    return (\n      <OAuthB2BButton\n        key={oauthProvider.type}\n        providerType={oauthProvider.type}\n        loginRedirectUrl={loginRedirectURL}\n        signupRedirectUrl={signupRedirectURL}\n        discoveryRedirectUrl={discoveryRedirectURL}\n        onSuccess={() => setLastUsedMethod(oauthProvider.type)}\n        {...providerProps}\n      />\n    );\n  };\n\n  return (\n    <ButtonColumn>\n      {reorderedButtons.map((button, index) => {\n        const buttonComponent = (() => {\n          switch (button.type) {\n            case 'oauth':\n              return createOAuthButton(button.provider);\n\n            case 'sso':\n              return (\n                <SSOButton\n                  key={button.connection.display_name}\n                  connection={button.connection}\n                  onStart={() => setLastUsedMethod(getSsoMethodKey(button.connection))}\n                />\n              );\n\n            case 'sso-discovery':\n              return (\n                <Button\n                  key=\"sso-discovery\"\n                  variant=\"outline\"\n                  id={getButtonId('sso-discovery', presentation.options)}\n                  onClick={() => {\n                    dispatch({ type: 'transition', screen: AppScreens.SSODiscoveryEmail, history: 'push' });\n                  }}\n                >\n                  {t({ id: 'provider.continueWithSSO', message: 'Use single sign-on' })}\n                </Button>\n              );\n\n            default:\n              assertUnreachable(button);\n          }\n        })();\n\n        return foundLastUsedOAuth && index === 0 ? (\n          <LastUsed key={getButtonKey(button)}>{buttonComponent}</LastUsed>\n        ) : (\n          buttonComponent\n        );\n      })}\n    </ButtonColumn>\n  );\n};\n"],"names":["getCustomScopesForProvider","oauthProvider","oauthOptionsCustomScopes","currentCustomScopes","customScopes","Object","keys","length","getProviderParamsForProvider","oauthOptionsProviderParams","email","currentProviderParams","providerParams","type","B2BOAuthProviders","Google","Microsoft","login_hint","SsoAndOAuthButtons","buttons","useLingui","state","dispatch","useGlobalReducer","oauthProviderSettings","useEffectiveAuthConfig","presentation","usePresentation","lastUsedMethod","setLastUsedMethod","useLastUsedAuthMethod","config","useConfig","loginRedirectURL","signupRedirectURL","discoveryRedirectURL","oauthOptions","B2BGoogleOneTap","OAuthB2BButton","SSOButton","useProductComponents","isDiscoveryFlow","flowState","AuthFlowType","Discovery","authButtons","flatMap","button","MainScreenComponent","OAuthButtons","map","provider","SSOButtons","organization","sso_active_connections","connection","assertUnreachable","reorderedButtons","foundLastUsedOAuth","arrayUtils","moveToFront","getButtonKey","createOAuthButton","providerProps","primary","one_tap","React","key","cancelOnTapOutside","cancel_on_tap_outside","providerType","loginRedirectUrl","signupRedirectUrl","discoveryRedirectUrl","onSuccess","ButtonColumn","index","buttonComponent","display_name","onStart","getSsoMethodKey","Button","variant","id","getButtonId","options","onClick","screen","AppScreens","SSODiscoveryEmail","history","LastUsed"],"mappings":"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"}

package/dist/esm-dev/packages/web/src/ui/b2b/types/authMethodKeys.mjs

@@ -4,7 +4,7 @@
 function extractConnectionId(method) {
     return method?.startsWith('sso:') ? method.slice(4) : undefined;
 }
-function getButtonId(button) {
+function getButtonKey(button) {
     if (button.type === 'oauth') {
         return button.provider.type;
     } else if (button.type === 'sso') {
@@ -14,5 +14,5 @@ function getButtonId(button) {
     }
 }
 
-export { extractConnectionId, getButtonId, getSsoMethodKey };
+export { extractConnectionId, getButtonKey, getSsoMethodKey };
 //# sourceMappingURL=authMethodKeys.mjs.map

package/dist/esm-dev/packages/web/src/ui/b2b/types/authMethodKeys.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"authMethodKeys.mjs","sources":["../../../../../../../../../web/src/ui/b2b/types/authMethodKeys.ts"],"sourcesContent":["import { B2BOAuthProviders, SSOActiveConnection } from '@stytch/core/public';\nimport { OauthProviderParams } from '../hooks/useEffectiveAuthConfig';\n\n// This file contains a combined type to identify OAuth providers and SSO connections,\n// used to help with rendering these buttons and storing the last used method.\n// Extracting the logic for generating the key helps make it more consistent\n\nexport type LastUsedMethod = B2BOAuthProviders | `sso:${string}`;\n\n/* eslint-disable lingui/no-unlocalized-strings */\n\nexport function getSsoMethodKey(method: SSOActiveConnection): LastUsedMethod {\n  return `sso:${method.connection_id}`;\n}\n\nexport function extractConnectionId(method: string | null): string | undefined {\n  return method?.startsWith('sso:') ? method.slice(4) : undefined;\n}\n\nexport type AuthButton =\n  | { type: 'oauth'; provider: OauthProviderParams }\n  | { type: 'sso'; connection: SSOActiveConnection }\n  | { type: 'sso-discovery' };\n\nexport function getButtonId(button: AuthButton) {\n  if (button.type === 'oauth') {\n    return button.provider.type;\n  } else if (button.type === 'sso') {\n    return getSsoMethodKey(button.connection);\n  } else {\n    return 'sso-discovery';\n  }\n}\n"],"names":["getSsoMethodKey","method","connection_id","extractConnectionId","startsWith","slice","undefined","getButtonId","button","type","provider","connection"],"mappings":"AASA,mDAEO,SAASA,eAAAA,CAAgBC,MAA2B,EAAA;AACzD,IAAA,OAAO,CAAC,IAAI,EAAEA,MAAAA,CAAOC,aAAa,CAAA,CAAE;AACtC;AAEO,SAASC,oBAAoBF,MAAqB,EAAA;AACvD,IAAA,OAAOA,QAAQG,UAAAA,CAAW,MAAA,CAAA,GAAUH,MAAAA,CAAOI,KAAK,CAAC,CAAA,CAAA,GAAKC,SAAAA;AACxD;AAOO,SAASC,YAAYC,MAAkB,EAAA;IAC5C,IAAIA,MAAAA,CAAOC,IAAI,KAAK,OAAA,EAAS;QAC3B,OAAOD,MAAAA,CAAOE,QAAQ,CAACD,IAAI;AAC7B,IAAA,CAAA,MAAO,IAAID,MAAAA,CAAOC,IAAI,KAAK,KAAA,EAAO;QAChC,OAAOT,eAAAA,CAAgBQ,OAAOG,UAAU,CAAA;IAC1C,CAAA,MAAO;QACL,OAAO,eAAA;AACT,IAAA;AACF;;;;"}
+{"version":3,"file":"authMethodKeys.mjs","sources":["../../../../../../../../../web/src/ui/b2b/types/authMethodKeys.ts"],"sourcesContent":["import { B2BOAuthProviders, SSOActiveConnection } from '@stytch/core/public';\nimport { OauthProviderParams } from '../hooks/useEffectiveAuthConfig';\n\n// This file contains a combined type to identify OAuth providers and SSO connections,\n// used to help with rendering these buttons and storing the last used method.\n// Extracting the logic for generating the key helps make it more consistent\n\nexport type LastUsedMethod = B2BOAuthProviders | `sso:${string}`;\n\n/* eslint-disable lingui/no-unlocalized-strings */\n\nexport function getSsoMethodKey(method: SSOActiveConnection): LastUsedMethod {\n  return `sso:${method.connection_id}`;\n}\n\nexport function extractConnectionId(method: string | null): string | undefined {\n  return method?.startsWith('sso:') ? method.slice(4) : undefined;\n}\n\nexport type AuthButton =\n  | { type: 'oauth'; provider: OauthProviderParams }\n  | { type: 'sso'; connection: SSOActiveConnection }\n  | { type: 'sso-discovery' };\n\nexport function getButtonKey(button: AuthButton) {\n  if (button.type === 'oauth') {\n    return button.provider.type;\n  } else if (button.type === 'sso') {\n    return getSsoMethodKey(button.connection);\n  } else {\n    return 'sso-discovery';\n  }\n}\n"],"names":["getSsoMethodKey","method","connection_id","extractConnectionId","startsWith","slice","undefined","getButtonKey","button","type","provider","connection"],"mappings":"AASA,mDAEO,SAASA,eAAAA,CAAgBC,MAA2B,EAAA;AACzD,IAAA,OAAO,CAAC,IAAI,EAAEA,MAAAA,CAAOC,aAAa,CAAA,CAAE;AACtC;AAEO,SAASC,oBAAoBF,MAAqB,EAAA;AACvD,IAAA,OAAOA,QAAQG,UAAAA,CAAW,MAAA,CAAA,GAAUH,MAAAA,CAAOI,KAAK,CAAC,CAAA,CAAA,GAAKC,SAAAA;AACxD;AAOO,SAASC,aAAaC,MAAkB,EAAA;IAC7C,IAAIA,MAAAA,CAAOC,IAAI,KAAK,OAAA,EAAS;QAC3B,OAAOD,MAAAA,CAAOE,QAAQ,CAACD,IAAI;AAC7B,IAAA,CAAA,MAAO,IAAID,MAAAA,CAAOC,IAAI,KAAK,KAAA,EAAO;QAChC,OAAOT,eAAAA,CAAgBQ,OAAOG,UAAU,CAAA;IAC1C,CAAA,MAAO;QACL,OAAO,eAAA;AACT,IAAA;AACF;;;;"}

package/dist/esm-dev/packages/web/src/ui/b2c/AppContainer.mjs

@@ -5,8 +5,10 @@ import { GlobalContextProvider } from './GlobalContextProvider.mjs';
 import AppContainer$1 from './Container.mjs';
 import { readB2CInternals } from '../../utils/internal.mjs';
 import { usePresentationWithDefault, PresentationContext } from '../components/PresentationConfig.mjs';
+import { RUN_IN_DEV } from '../../../../core/src/utils/dev.mjs';
+import { logger } from '../../../../core/src/utils/logger.mjs';
 
-const AppContainer = ({ client, config, presentation, callbacks, strings })=>{
+const AppContainer = ({ client, config, presentation, callbacks, strings, styles })=>{
     // Read the watermark out of sync storage, then read it out of async storage
     const [displayWatermark, setDisplayWatermark] = useState(()=>{
         const { displayWatermark } = readB2CInternals(client).bootstrap.getSync();
@@ -27,6 +29,11 @@ const AppContainer = ({ client, config, presentation, callbacks, strings })=>{
     }, [
         client
     ]);
+    RUN_IN_DEV(()=>{
+        if (styles) {
+            logger.error('styles is deprecated and has no effect. Use the presentation prop instead.\n' + 'See https://stytch.com/docs/api-reference/consumer/frontend-sdks/react/upgrade-guide#step-by-step-guide');
+        }
+    });
     const presentationValue = usePresentationWithDefault(presentation, displayWatermark, config.products, 'Products');
     return /*#__PURE__*/ React__default.createElement(GlobalContextProvider, {
         client: client,

package/dist/esm-dev/packages/web/src/ui/b2c/AppContainer.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"AppContainer.mjs","sources":["../../../../../../../../web/src/ui/b2c/AppContainer.tsx"],"sourcesContent":["import React, { useState, useEffect } from 'react';\nimport { StytchProjectConfigurationInput } from '@stytch/core/public';\nimport { messages } from '../../messages/en';\nimport { I18nProviderWrapper } from '../components/atoms/I18nProviderWrapper';\nimport { GlobalContextProvider } from './GlobalContextProvider';\nimport Container from './Container';\nimport { SDKConfig } from '../../types';\nimport { readB2CInternals } from '../../utils/internal';\nimport { usePresentationWithDefault, PresentationContext } from '../components/PresentationConfig';\n\nexport const AppContainer = <TProjectConfiguration extends StytchProjectConfigurationInput>({\n  client,\n  config,\n  presentation,\n  callbacks,\n  strings,\n}: SDKConfig<TProjectConfiguration>) => {\n  // Read the watermark out of sync storage, then read it out of async storage\n  const [displayWatermark, setDisplayWatermark] = useState(() => {\n    const { displayWatermark } = readB2CInternals(client).bootstrap.getSync();\n    return displayWatermark;\n  });\n  useEffect(() => {\n    readB2CInternals(client)\n      .bootstrap.getAsync()\n      .then((data) => {\n        readB2CInternals(client).networkClient.logEvent({\n          name: 'render_login_screen',\n          details: { options: config, bootstrap: data },\n        });\n        setDisplayWatermark(data.displayWatermark);\n      });\n    // eslint-disable-next-line react-hooks/exhaustive-deps -- SDK-1354\n  }, [client]);\n\n  const presentationValue = usePresentationWithDefault(presentation, displayWatermark, config.products, 'Products');\n\n  return (\n    <GlobalContextProvider client={client} config={config} callbacks={callbacks}>\n      <PresentationContext.Provider value={presentationValue}>\n        <I18nProviderWrapper messages={messages} overrides={strings}>\n          <Container />\n        </I18nProviderWrapper>\n      </PresentationContext.Provider>\n    </GlobalContextProvider>\n  );\n};\n"],"names":["AppContainer","client","config","presentation","callbacks","strings","displayWatermark","setDisplayWatermark","useState","readB2CInternals","bootstrap","getSync","useEffect","getAsync","then","data","networkClient","logEvent","name","details","options","presentationValue","usePresentationWithDefault","products","React","GlobalContextProvider","PresentationContext","Provider","value","I18nProviderWrapper","messages","overrides","Container"],"mappings":";;;;;;;;AAUO,MAAMA,YAAAA,GAAe,CAAgE,EAC1FC,MAAM,EACNC,MAAM,EACNC,YAAY,EACZC,SAAS,EACTC,OAAO,EAC0B,GAAA;;AAEjC,IAAA,MAAM,CAACC,gBAAAA,EAAkBC,mBAAAA,CAAoB,GAAGC,QAAAA,CAAS,IAAA;QACvD,MAAM,EAAEF,gBAAgB,EAAE,GAAGG,iBAAiBR,MAAAA,CAAAA,CAAQS,SAAS,CAACC,OAAO,EAAA;QACvE,OAAOL,gBAAAA;AACT,IAAA,CAAA,CAAA;IACAM,SAAAA,CAAU,IAAA;AACRH,QAAAA,gBAAAA,CAAiBR,QACdS,SAAS,CAACG,QAAQ,EAAA,CAClBC,IAAI,CAAC,CAACC,IAAAA,GAAAA;AACLN,YAAAA,gBAAAA,CAAiBR,MAAAA,CAAAA,CAAQe,aAAa,CAACC,QAAQ,CAAC;gBAC9CC,IAAAA,EAAM,qBAAA;gBACNC,OAAAA,EAAS;oBAAEC,OAAAA,EAASlB,MAAAA;oBAAQQ,SAAAA,EAAWK;AAAK;AAC9C,aAAA,CAAA;AACAR,YAAAA,mBAAAA,CAAoBQ,KAAKT,gBAAgB,CAAA;AAC3C,QAAA,CAAA,CAAA;;IAEJ,CAAA,EAAG;AAACL,QAAAA;AAAO,KAAA,CAAA;AAEX,IAAA,MAAMoB,oBAAoBC,0BAAAA,CAA2BnB,YAAAA,EAAcG,gBAAAA,EAAkBJ,MAAAA,CAAOqB,QAAQ,EAAE,UAAA,CAAA;AAEtG,IAAA,qBACEC,cAAA,CAAA,aAAA,CAACC,qBAAAA,EAAAA;QAAsBxB,MAAAA,EAAQA,MAAAA;QAAQC,MAAAA,EAAQA,MAAAA;QAAQE,SAAAA,EAAWA;AAChE,KAAA,gBAAAoB,cAAA,CAAA,aAAA,CAACE,oBAAoBC,QAAQ,EAAA;QAACC,KAAAA,EAAOP;qBACnCG,cAAA,CAAA,aAAA,CAACK,mBAAAA,EAAAA;QAAoBC,QAAAA,EAAUA,QAAAA;QAAUC,SAAAA,EAAW1B;qBAClDmB,cAAA,CAAA,aAAA,CAACQ,cAAAA,EAAAA,IAAAA,CAAAA,CAAAA,CAAAA,CAAAA;AAKX;;;;"}
+{"version":3,"file":"AppContainer.mjs","sources":["../../../../../../../../web/src/ui/b2c/AppContainer.tsx"],"sourcesContent":["import React, { useState, useEffect } from 'react';\nimport { StytchProjectConfigurationInput } from '@stytch/core/public';\nimport { messages } from '../../messages/en';\nimport { I18nProviderWrapper } from '../components/atoms/I18nProviderWrapper';\nimport { GlobalContextProvider } from './GlobalContextProvider';\nimport Container from './Container';\nimport { DeprecatedSDKConfig, SDKConfig } from '../../types';\nimport { readB2CInternals } from '../../utils/internal';\nimport { usePresentationWithDefault, PresentationContext } from '../components/PresentationConfig';\nimport { logger, RUN_IN_DEV } from '@stytch/core';\n\nexport const AppContainer = <TProjectConfiguration extends StytchProjectConfigurationInput>({\n  client,\n  config,\n  presentation,\n  callbacks,\n  strings,\n  styles,\n}: SDKConfig<TProjectConfiguration> & DeprecatedSDKConfig) => {\n  // Read the watermark out of sync storage, then read it out of async storage\n  const [displayWatermark, setDisplayWatermark] = useState(() => {\n    const { displayWatermark } = readB2CInternals(client).bootstrap.getSync();\n    return displayWatermark;\n  });\n\n  useEffect(() => {\n    readB2CInternals(client)\n      .bootstrap.getAsync()\n      .then((data) => {\n        readB2CInternals(client).networkClient.logEvent({\n          name: 'render_login_screen',\n          details: { options: config, bootstrap: data },\n        });\n        setDisplayWatermark(data.displayWatermark);\n      });\n    // eslint-disable-next-line react-hooks/exhaustive-deps -- SDK-1354\n  }, [client]);\n\n  RUN_IN_DEV(() => {\n    if (styles) {\n      logger.error(\n        'styles is deprecated and has no effect. Use the presentation prop instead.\\n' +\n          'See https://stytch.com/docs/api-reference/consumer/frontend-sdks/react/upgrade-guide#step-by-step-guide',\n      );\n    }\n  });\n\n  const presentationValue = usePresentationWithDefault(presentation, displayWatermark, config.products, 'Products');\n\n  return (\n    <GlobalContextProvider client={client} config={config} callbacks={callbacks}>\n      <PresentationContext.Provider value={presentationValue}>\n        <I18nProviderWrapper messages={messages} overrides={strings}>\n          <Container />\n        </I18nProviderWrapper>\n      </PresentationContext.Provider>\n    </GlobalContextProvider>\n  );\n};\n"],"names":["AppContainer","client","config","presentation","callbacks","strings","styles","displayWatermark","setDisplayWatermark","useState","readB2CInternals","bootstrap","getSync","useEffect","getAsync","then","data","networkClient","logEvent","name","details","options","RUN_IN_DEV","logger","error","presentationValue","usePresentationWithDefault","products","React","GlobalContextProvider","PresentationContext","Provider","value","I18nProviderWrapper","messages","overrides","Container"],"mappings":";;;;;;;;;;AAWO,MAAMA,YAAAA,GAAe,CAAgE,EAC1FC,MAAM,EACNC,MAAM,EACNC,YAAY,EACZC,SAAS,EACTC,OAAO,EACPC,MAAM,EACiD,GAAA;;AAEvD,IAAA,MAAM,CAACC,gBAAAA,EAAkBC,mBAAAA,CAAoB,GAAGC,QAAAA,CAAS,IAAA;QACvD,MAAM,EAAEF,gBAAgB,EAAE,GAAGG,iBAAiBT,MAAAA,CAAAA,CAAQU,SAAS,CAACC,OAAO,EAAA;QACvE,OAAOL,gBAAAA;AACT,IAAA,CAAA,CAAA;IAEAM,SAAAA,CAAU,IAAA;AACRH,QAAAA,gBAAAA,CAAiBT,QACdU,SAAS,CAACG,QAAQ,EAAA,CAClBC,IAAI,CAAC,CAACC,IAAAA,GAAAA;AACLN,YAAAA,gBAAAA,CAAiBT,MAAAA,CAAAA,CAAQgB,aAAa,CAACC,QAAQ,CAAC;gBAC9CC,IAAAA,EAAM,qBAAA;gBACNC,OAAAA,EAAS;oBAAEC,OAAAA,EAASnB,MAAAA;oBAAQS,SAAAA,EAAWK;AAAK;AAC9C,aAAA,CAAA;AACAR,YAAAA,mBAAAA,CAAoBQ,KAAKT,gBAAgB,CAAA;AAC3C,QAAA,CAAA,CAAA;;IAEJ,CAAA,EAAG;AAACN,QAAAA;AAAO,KAAA,CAAA;IAEXqB,UAAAA,CAAW,IAAA;AACT,QAAA,IAAIhB,MAAAA,EAAQ;YACViB,MAAAA,CAAOC,KAAK,CACV,8EAAA,GACE,yGAAA,CAAA;AAEN,QAAA;AACF,IAAA,CAAA,CAAA;AAEA,IAAA,MAAMC,oBAAoBC,0BAAAA,CAA2BvB,YAAAA,EAAcI,gBAAAA,EAAkBL,MAAAA,CAAOyB,QAAQ,EAAE,UAAA,CAAA;AAEtG,IAAA,qBACEC,cAAA,CAAA,aAAA,CAACC,qBAAAA,EAAAA;QAAsB5B,MAAAA,EAAQA,MAAAA;QAAQC,MAAAA,EAAQA,MAAAA;QAAQE,SAAAA,EAAWA;AAChE,KAAA,gBAAAwB,cAAA,CAAA,aAAA,CAACE,oBAAoBC,QAAQ,EAAA;QAACC,KAAAA,EAAOP;qBACnCG,cAAA,CAAA,aAAA,CAACK,mBAAAA,EAAAA;QAAoBC,QAAAA,EAAUA,QAAAA;QAAUC,SAAAA,EAAW9B;qBAClDuB,cAAA,CAAA,aAAA,CAACQ,cAAAA,EAAAA,IAAAA,CAAAA,CAAAA,CAAAA,CAAAA;AAKX;;;;"}

package/dist/esm-dev/packages/web/src/ui/b2c/IDPContainer.mjs

@@ -6,8 +6,10 @@ import { readB2CInternals } from '../../utils/internal.mjs';
 import { IDPContextProvider } from '../components/organisms/IDPContextProvider.mjs';
 import { usePresentationWithDefault, PresentationContext } from '../components/PresentationConfig.mjs';
 import { IDPConsentScreen } from './screens/IdentityProvider/IDPConsent.mjs';
+import { RUN_IN_DEV } from '../../../../core/src/utils/dev.mjs';
+import { logger } from '../../../../core/src/utils/logger.mjs';
 
-const IDPContainer = ({ client, presentation, callbacks, strings, getIDPConsentManifest, authTokenParams })=>{
+const IDPContainer = ({ client, presentation, callbacks, strings, styles, getIDPConsentManifest, authTokenParams })=>{
     const presentationValue = usePresentationWithDefault(presentation, false, []);
     useEffect(()=>{
         readB2CInternals(client).bootstrap.getAsync().then((data)=>{
@@ -21,6 +23,11 @@ const IDPContainer = ({ client, presentation, callbacks, strings, getIDPConsentM
     }, [
         client
     ]);
+    RUN_IN_DEV(()=>{
+        if (styles) {
+            logger.error('styles is deprecated and has no effect. Use the presentation prop instead.\n' + 'See https://stytch.com/docs/api-reference/consumer/frontend-sdks/react/upgrade-guide#step-by-step-guide');
+        }
+    });
     return /*#__PURE__*/ React__default.createElement(GlobalContextProvider, {
         client: client,
         config: {},

package/dist/esm-dev/packages/web/src/ui/b2c/IDPContainer.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"IDPContainer.mjs","sources":["../../../../../../../../web/src/ui/b2c/IDPContainer.tsx"],"sourcesContent":["import React, { useEffect } from 'react';\nimport { StytchProjectConfigurationInput } from '@stytch/core/public';\nimport { messages } from '../../messages/en';\nimport { I18nProviderWrapper } from '../components/atoms/I18nProviderWrapper';\nimport { GlobalContextProvider, DEFAULT_STATE } from './GlobalContextProvider';\nimport { IDPSDKConfig, StytchLoginConfig } from '../../types';\nimport { readB2CInternals } from '../../utils/internal';\nimport { IDPContextProvider } from '../components/organisms/IDPContextProvider';\nimport { usePresentationWithDefault, PresentationContext } from '../components/PresentationConfig';\nimport { IDPConsentScreen } from './screens/IdentityProvider/IDPConsent';\n\nexport const IDPContainer = <TProjectConfiguration extends StytchProjectConfigurationInput>({\n  client,\n  presentation,\n  callbacks,\n  strings,\n  getIDPConsentManifest,\n  authTokenParams,\n}: IDPSDKConfig<TProjectConfiguration>) => {\n  const presentationValue = usePresentationWithDefault(presentation, false, []);\n\n  useEffect(() => {\n    readB2CInternals(client)\n      .bootstrap.getAsync()\n      .then((data) => {\n        readB2CInternals(client).networkClient.logEvent({\n          name: 'render_idp_screen',\n          details: { bootstrap: data },\n        });\n      });\n  }, [client]);\n\n  return (\n    <GlobalContextProvider\n      client={client}\n      config={{} as StytchLoginConfig}\n      callbacks={callbacks}\n      initialState={DEFAULT_STATE}\n    >\n      <IDPContextProvider consentManifestGenerator={getIDPConsentManifest} authTokenParams={authTokenParams}>\n        <PresentationContext.Provider value={presentationValue}>\n          <I18nProviderWrapper messages={messages} overrides={strings}>\n            <IDPConsentScreen />\n          </I18nProviderWrapper>\n        </PresentationContext.Provider>\n      </IDPContextProvider>\n    </GlobalContextProvider>\n  );\n};\n"],"names":["IDPContainer","client","presentation","callbacks","strings","getIDPConsentManifest","authTokenParams","presentationValue","usePresentationWithDefault","useEffect","readB2CInternals","bootstrap","getAsync","then","data","networkClient","logEvent","name","details","React","GlobalContextProvider","config","initialState","DEFAULT_STATE","IDPContextProvider","consentManifestGenerator","PresentationContext","Provider","value","I18nProviderWrapper","messages","overrides","IDPConsentScreen"],"mappings":";;;;;;;;;AAWO,MAAMA,YAAAA,GAAe,CAAgE,EAC1FC,MAAM,EACNC,YAAY,EACZC,SAAS,EACTC,OAAO,EACPC,qBAAqB,EACrBC,eAAe,EACqB,GAAA;AACpC,IAAA,MAAMC,iBAAAA,GAAoBC,0BAAAA,CAA2BN,YAAAA,EAAc,KAAA,EAAO,EAAE,CAAA;IAE5EO,SAAAA,CAAU,IAAA;AACRC,QAAAA,gBAAAA,CAAiBT,QACdU,SAAS,CAACC,QAAQ,EAAA,CAClBC,IAAI,CAAC,CAACC,IAAAA,GAAAA;AACLJ,YAAAA,gBAAAA,CAAiBT,MAAAA,CAAAA,CAAQc,aAAa,CAACC,QAAQ,CAAC;gBAC9CC,IAAAA,EAAM,mBAAA;gBACNC,OAAAA,EAAS;oBAAEP,SAAAA,EAAWG;AAAK;AAC7B,aAAA,CAAA;AACF,QAAA,CAAA,CAAA;IACJ,CAAA,EAAG;AAACb,QAAAA;AAAO,KAAA,CAAA;AAEX,IAAA,qBACEkB,cAAA,CAAA,aAAA,CAACC,qBAAAA,EAAAA;QACCnB,MAAAA,EAAQA,MAAAA;AACRoB,QAAAA,MAAAA,EAAQ,EAAC;QACTlB,SAAAA,EAAWA,SAAAA;QACXmB,YAAAA,EAAcC;qBAEdJ,cAAA,CAAA,aAAA,CAACK,kBAAAA,EAAAA;QAAmBC,wBAAAA,EAA0BpB,qBAAAA;QAAuBC,eAAAA,EAAiBA;AACpF,KAAA,gBAAAa,cAAA,CAAA,aAAA,CAACO,oBAAoBC,QAAQ,EAAA;QAACC,KAAAA,EAAOrB;qBACnCY,cAAA,CAAA,aAAA,CAACU,mBAAAA,EAAAA;QAAoBC,QAAAA,EAAUA,QAAAA;QAAUC,SAAAA,EAAW3B;qBAClDe,cAAA,CAAA,aAAA,CAACa,gBAAAA,EAAAA,IAAAA,CAAAA,CAAAA,CAAAA,CAAAA,CAAAA;AAMb;;;;"}
+{"version":3,"file":"IDPContainer.mjs","sources":["../../../../../../../../web/src/ui/b2c/IDPContainer.tsx"],"sourcesContent":["import React, { useEffect } from 'react';\nimport { StytchProjectConfigurationInput } from '@stytch/core/public';\nimport { messages } from '../../messages/en';\nimport { I18nProviderWrapper } from '../components/atoms/I18nProviderWrapper';\nimport { GlobalContextProvider, DEFAULT_STATE } from './GlobalContextProvider';\nimport { IDPSDKConfig, StytchLoginConfig, DeprecatedSDKConfig } from '../../types';\nimport { readB2CInternals } from '../../utils/internal';\nimport { IDPContextProvider } from '../components/organisms/IDPContextProvider';\nimport { usePresentationWithDefault, PresentationContext } from '../components/PresentationConfig';\nimport { IDPConsentScreen } from './screens/IdentityProvider/IDPConsent';\nimport { logger, RUN_IN_DEV } from '@stytch/core';\n\nexport const IDPContainer = <TProjectConfiguration extends StytchProjectConfigurationInput>({\n  client,\n  presentation,\n  callbacks,\n  strings,\n  styles,\n  getIDPConsentManifest,\n  authTokenParams,\n}: IDPSDKConfig<TProjectConfiguration> & DeprecatedSDKConfig) => {\n  const presentationValue = usePresentationWithDefault(presentation, false, []);\n\n  useEffect(() => {\n    readB2CInternals(client)\n      .bootstrap.getAsync()\n      .then((data) => {\n        readB2CInternals(client).networkClient.logEvent({\n          name: 'render_idp_screen',\n          details: { bootstrap: data },\n        });\n      });\n  }, [client]);\n\n  RUN_IN_DEV(() => {\n    if (styles) {\n      logger.error(\n        'styles is deprecated and has no effect. Use the presentation prop instead.\\n' +\n          'See https://stytch.com/docs/api-reference/consumer/frontend-sdks/react/upgrade-guide#step-by-step-guide',\n      );\n    }\n  });\n\n  return (\n    <GlobalContextProvider\n      client={client}\n      config={{} as StytchLoginConfig}\n      callbacks={callbacks}\n      initialState={DEFAULT_STATE}\n    >\n      <IDPContextProvider consentManifestGenerator={getIDPConsentManifest} authTokenParams={authTokenParams}>\n        <PresentationContext.Provider value={presentationValue}>\n          <I18nProviderWrapper messages={messages} overrides={strings}>\n            <IDPConsentScreen />\n          </I18nProviderWrapper>\n        </PresentationContext.Provider>\n      </IDPContextProvider>\n    </GlobalContextProvider>\n  );\n};\n"],"names":["IDPContainer","client","presentation","callbacks","strings","styles","getIDPConsentManifest","authTokenParams","presentationValue","usePresentationWithDefault","useEffect","readB2CInternals","bootstrap","getAsync","then","data","networkClient","logEvent","name","details","RUN_IN_DEV","logger","error","React","GlobalContextProvider","config","initialState","DEFAULT_STATE","IDPContextProvider","consentManifestGenerator","PresentationContext","Provider","value","I18nProviderWrapper","messages","overrides","IDPConsentScreen"],"mappings":";;;;;;;;;;;MAYaA,YAAAA,GAAe,CAAgE,EAC1FC,MAAM,EACNC,YAAY,EACZC,SAAS,EACTC,OAAO,EACPC,MAAM,EACNC,qBAAqB,EACrBC,eAAe,EAC2C,GAAA;AAC1D,IAAA,MAAMC,iBAAAA,GAAoBC,0BAAAA,CAA2BP,YAAAA,EAAc,KAAA,EAAO,EAAE,CAAA;IAE5EQ,SAAAA,CAAU,IAAA;AACRC,QAAAA,gBAAAA,CAAiBV,QACdW,SAAS,CAACC,QAAQ,EAAA,CAClBC,IAAI,CAAC,CAACC,IAAAA,GAAAA;AACLJ,YAAAA,gBAAAA,CAAiBV,MAAAA,CAAAA,CAAQe,aAAa,CAACC,QAAQ,CAAC;gBAC9CC,IAAAA,EAAM,mBAAA;gBACNC,OAAAA,EAAS;oBAAEP,SAAAA,EAAWG;AAAK;AAC7B,aAAA,CAAA;AACF,QAAA,CAAA,CAAA;IACJ,CAAA,EAAG;AAACd,QAAAA;AAAO,KAAA,CAAA;IAEXmB,UAAAA,CAAW,IAAA;AACT,QAAA,IAAIf,MAAAA,EAAQ;YACVgB,MAAAA,CAAOC,KAAK,CACV,8EAAA,GACE,yGAAA,CAAA;AAEN,QAAA;AACF,IAAA,CAAA,CAAA;AAEA,IAAA,qBACEC,cAAA,CAAA,aAAA,CAACC,qBAAAA,EAAAA;QACCvB,MAAAA,EAAQA,MAAAA;AACRwB,QAAAA,MAAAA,EAAQ,EAAC;QACTtB,SAAAA,EAAWA,SAAAA;QACXuB,YAAAA,EAAcC;qBAEdJ,cAAA,CAAA,aAAA,CAACK,kBAAAA,EAAAA;QAAmBC,wBAAAA,EAA0BvB,qBAAAA;QAAuBC,eAAAA,EAAiBA;AACpF,KAAA,gBAAAgB,cAAA,CAAA,aAAA,CAACO,oBAAoBC,QAAQ,EAAA;QAACC,KAAAA,EAAOxB;qBACnCe,cAAA,CAAA,aAAA,CAACU,mBAAAA,EAAAA;QAAoBC,QAAAA,EAAUA,QAAAA;QAAUC,SAAAA,EAAW/B;qBAClDmB,cAAA,CAAA,aAAA,CAACa,gBAAAA,EAAAA,IAAAA,CAAAA,CAAAA,CAAAA,CAAAA,CAAAA;AAMb;;;;"}

package/dist/esm-dev/packages/web/src/ui/b2c/PasskeyRegistrationContainer.mjs

@@ -7,8 +7,10 @@ import { readB2CInternals } from '../../utils/internal.mjs';
 import { usePresentationWithDefault, PresentationContext } from '../components/PresentationConfig.mjs';
 import { passkeyRegistration } from './Products.mjs';
 import { addProduct } from './utils.mjs';
+import { RUN_IN_DEV } from '../../../../core/src/utils/dev.mjs';
+import { logger } from '../../../../core/src/utils/logger.mjs';
 
-const PasskeyRegistrationContainer = ({ client, config: rawConfig, presentation, callbacks, strings })=>{
+const PasskeyRegistrationContainer = ({ client, config: rawConfig, presentation, callbacks, strings, styles })=>{
     const config = addProduct(rawConfig, passkeyRegistration);
     /**
    * Read the watermark out of sync storage, then read it out of async storage
@@ -23,6 +25,11 @@ const PasskeyRegistrationContainer = ({ client, config: rawConfig, presentation,
     }, [
         client
     ]);
+    RUN_IN_DEV(()=>{
+        if (styles) {
+            logger.error('styles is deprecated and has no effect. Use the presentation prop instead.\n' + 'See https://stytch.com/docs/api-reference/consumer/frontend-sdks/react/upgrade-guide#step-by-step-guide');
+        }
+    });
     const initialState = {
         ...DEFAULT_STATE,
         screen: AppScreens.PasskeyRegistrationStart,

package/dist/esm-dev/packages/web/src/ui/b2c/PasskeyRegistrationContainer.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"PasskeyRegistrationContainer.mjs","sources":["../../../../../../../../web/src/ui/b2c/PasskeyRegistrationContainer.tsx"],"sourcesContent":["import React, { useState, useEffect } from 'react';\nimport { StytchProjectConfigurationInput } from '@stytch/core/public';\nimport { messages } from '../../messages/en';\nimport { I18nProviderWrapper } from '../components/atoms/I18nProviderWrapper';\nimport { GlobalContextProvider, DEFAULT_STATE, AppState, AppScreens } from './GlobalContextProvider';\nimport Container from './Container';\nimport { SDKConfig } from '../../types';\nimport { readB2CInternals } from '../../utils/internal';\nimport { usePresentationWithDefault, PresentationContext } from '../components/PresentationConfig';\nimport { passkeyRegistration } from './Products';\nimport { addProduct } from './utils';\n\nexport const PasskeyRegistrationContainer = <TProjectConfiguration extends StytchProjectConfigurationInput>({\n  client,\n  config: rawConfig,\n  presentation,\n  callbacks,\n  strings,\n}: SDKConfig<TProjectConfiguration>) => {\n  const config = addProduct(rawConfig, passkeyRegistration);\n\n  /**\n   * Read the watermark out of sync storage, then read it out of async storage\n   */\n  const [displayWatermark, setDisplayWatermark] = useState(() => {\n    const { displayWatermark } = readB2CInternals(client).bootstrap.getSync();\n    return displayWatermark;\n  });\n\n  useEffect(() => {\n    readB2CInternals(client)\n      .bootstrap.getAsync()\n      .then(({ displayWatermark }) => {\n        setDisplayWatermark(displayWatermark);\n      });\n  }, [client]);\n\n  const initialState: AppState = {\n    ...DEFAULT_STATE,\n    screen: AppScreens.PasskeyRegistrationStart,\n    formState: {\n      ...DEFAULT_STATE.formState,\n    },\n  };\n\n  const presentationValue = usePresentationWithDefault(presentation, displayWatermark, config.products, 'Products');\n\n  return (\n    <GlobalContextProvider client={client} config={config} callbacks={callbacks} initialState={initialState}>\n      <PresentationContext.Provider value={presentationValue}>\n        <I18nProviderWrapper messages={messages} overrides={strings}>\n          <Container />\n        </I18nProviderWrapper>\n      </PresentationContext.Provider>\n    </GlobalContextProvider>\n  );\n};\n"],"names":["PasskeyRegistrationContainer","client","config","rawConfig","presentation","callbacks","strings","addProduct","passkeyRegistration","displayWatermark","setDisplayWatermark","useState","readB2CInternals","bootstrap","getSync","useEffect","getAsync","then","initialState","DEFAULT_STATE","screen","AppScreens","PasskeyRegistrationStart","formState","presentationValue","usePresentationWithDefault","products","React","GlobalContextProvider","PresentationContext","Provider","value","I18nProviderWrapper","messages","overrides","Container"],"mappings":";;;;;;;;;;AAYO,MAAMA,4BAAAA,GAA+B,CAAgE,EAC1GC,MAAM,EACNC,MAAAA,EAAQC,SAAS,EACjBC,YAAY,EACZC,SAAS,EACTC,OAAO,EAC0B,GAAA;IACjC,MAAMJ,MAAAA,GAASK,WAAWJ,SAAAA,EAAWK,mBAAAA,CAAAA;AAErC;;AAEC,MACD,MAAM,CAACC,gBAAAA,EAAkBC,mBAAAA,CAAoB,GAAGC,QAAAA,CAAS,IAAA;QACvD,MAAM,EAAEF,gBAAgB,EAAE,GAAGG,iBAAiBX,MAAAA,CAAAA,CAAQY,SAAS,CAACC,OAAO,EAAA;QACvE,OAAOL,gBAAAA;AACT,IAAA,CAAA,CAAA;IAEAM,SAAAA,CAAU,IAAA;QACRH,gBAAAA,CAAiBX,MAAAA,CAAAA,CACdY,SAAS,CAACG,QAAQ,EAAA,CAClBC,IAAI,CAAC,CAAC,EAAER,gBAAgB,EAAE,GAAA;YACzBC,mBAAAA,CAAoBD,gBAAAA,CAAAA;AACtB,QAAA,CAAA,CAAA;IACJ,CAAA,EAAG;AAACR,QAAAA;AAAO,KAAA,CAAA;AAEX,IAAA,MAAMiB,YAAAA,GAAyB;AAC7B,QAAA,GAAGC,aAAa;AAChBC,QAAAA,MAAAA,EAAQC,WAAWC,wBAAwB;QAC3CC,SAAAA,EAAW;AACT,YAAA,GAAGJ,cAAcI;AACnB;AACF,KAAA;AAEA,IAAA,MAAMC,oBAAoBC,0BAAAA,CAA2BrB,YAAAA,EAAcK,gBAAAA,EAAkBP,MAAAA,CAAOwB,QAAQ,EAAE,UAAA,CAAA;AAEtG,IAAA,qBACEC,cAAA,CAAA,aAAA,CAACC,qBAAAA,EAAAA;QAAsB3B,MAAAA,EAAQA,MAAAA;QAAQC,MAAAA,EAAQA,MAAAA;QAAQG,SAAAA,EAAWA,SAAAA;QAAWa,YAAAA,EAAcA;AACzF,KAAA,gBAAAS,cAAA,CAAA,aAAA,CAACE,oBAAoBC,QAAQ,EAAA;QAACC,KAAAA,EAAOP;qBACnCG,cAAA,CAAA,aAAA,CAACK,mBAAAA,EAAAA;QAAoBC,QAAAA,EAAUA,QAAAA;QAAUC,SAAAA,EAAW5B;qBAClDqB,cAAA,CAAA,aAAA,CAACQ,YAAAA,EAAAA,IAAAA,CAAAA,CAAAA,CAAAA,CAAAA;AAKX;;;;"}
+{"version":3,"file":"PasskeyRegistrationContainer.mjs","sources":["../../../../../../../../web/src/ui/b2c/PasskeyRegistrationContainer.tsx"],"sourcesContent":["import React, { useState, useEffect } from 'react';\nimport { StytchProjectConfigurationInput } from '@stytch/core/public';\nimport { messages } from '../../messages/en';\nimport { I18nProviderWrapper } from '../components/atoms/I18nProviderWrapper';\nimport { GlobalContextProvider, DEFAULT_STATE, AppState, AppScreens } from './GlobalContextProvider';\nimport Container from './Container';\nimport { SDKConfig, DeprecatedSDKConfig } from '../../types';\nimport { readB2CInternals } from '../../utils/internal';\nimport { usePresentationWithDefault, PresentationContext } from '../components/PresentationConfig';\nimport { passkeyRegistration } from './Products';\nimport { addProduct } from './utils';\nimport { logger, RUN_IN_DEV } from '@stytch/core';\n\nexport const PasskeyRegistrationContainer = <TProjectConfiguration extends StytchProjectConfigurationInput>({\n  client,\n  config: rawConfig,\n  presentation,\n  callbacks,\n  strings,\n  styles,\n}: SDKConfig<TProjectConfiguration> & DeprecatedSDKConfig) => {\n  const config = addProduct(rawConfig, passkeyRegistration);\n\n  /**\n   * Read the watermark out of sync storage, then read it out of async storage\n   */\n  const [displayWatermark, setDisplayWatermark] = useState(() => {\n    const { displayWatermark } = readB2CInternals(client).bootstrap.getSync();\n    return displayWatermark;\n  });\n\n  useEffect(() => {\n    readB2CInternals(client)\n      .bootstrap.getAsync()\n      .then(({ displayWatermark }) => {\n        setDisplayWatermark(displayWatermark);\n      });\n  }, [client]);\n\n  RUN_IN_DEV(() => {\n    if (styles) {\n      logger.error(\n        'styles is deprecated and has no effect. Use the presentation prop instead.\\n' +\n          'See https://stytch.com/docs/api-reference/consumer/frontend-sdks/react/upgrade-guide#step-by-step-guide',\n      );\n    }\n  });\n\n  const initialState: AppState = {\n    ...DEFAULT_STATE,\n    screen: AppScreens.PasskeyRegistrationStart,\n    formState: {\n      ...DEFAULT_STATE.formState,\n    },\n  };\n\n  const presentationValue = usePresentationWithDefault(presentation, displayWatermark, config.products, 'Products');\n\n  return (\n    <GlobalContextProvider client={client} config={config} callbacks={callbacks} initialState={initialState}>\n      <PresentationContext.Provider value={presentationValue}>\n        <I18nProviderWrapper messages={messages} overrides={strings}>\n          <Container />\n        </I18nProviderWrapper>\n      </PresentationContext.Provider>\n    </GlobalContextProvider>\n  );\n};\n"],"names":["PasskeyRegistrationContainer","client","config","rawConfig","presentation","callbacks","strings","styles","addProduct","passkeyRegistration","displayWatermark","setDisplayWatermark","useState","readB2CInternals","bootstrap","getSync","useEffect","getAsync","then","RUN_IN_DEV","logger","error","initialState","DEFAULT_STATE","screen","AppScreens","PasskeyRegistrationStart","formState","presentationValue","usePresentationWithDefault","products","React","GlobalContextProvider","PresentationContext","Provider","value","I18nProviderWrapper","messages","overrides","Container"],"mappings":";;;;;;;;;;;;MAaaA,4BAAAA,GAA+B,CAAgE,EAC1GC,MAAM,EACNC,MAAAA,EAAQC,SAAS,EACjBC,YAAY,EACZC,SAAS,EACTC,OAAO,EACPC,MAAM,EACiD,GAAA;IACvD,MAAML,MAAAA,GAASM,WAAWL,SAAAA,EAAWM,mBAAAA,CAAAA;AAErC;;AAEC,MACD,MAAM,CAACC,gBAAAA,EAAkBC,mBAAAA,CAAoB,GAAGC,QAAAA,CAAS,IAAA;QACvD,MAAM,EAAEF,gBAAgB,EAAE,GAAGG,iBAAiBZ,MAAAA,CAAAA,CAAQa,SAAS,CAACC,OAAO,EAAA;QACvE,OAAOL,gBAAAA;AACT,IAAA,CAAA,CAAA;IAEAM,SAAAA,CAAU,IAAA;QACRH,gBAAAA,CAAiBZ,MAAAA,CAAAA,CACda,SAAS,CAACG,QAAQ,EAAA,CAClBC,IAAI,CAAC,CAAC,EAAER,gBAAgB,EAAE,GAAA;YACzBC,mBAAAA,CAAoBD,gBAAAA,CAAAA;AACtB,QAAA,CAAA,CAAA;IACJ,CAAA,EAAG;AAACT,QAAAA;AAAO,KAAA,CAAA;IAEXkB,UAAAA,CAAW,IAAA;AACT,QAAA,IAAIZ,MAAAA,EAAQ;YACVa,MAAAA,CAAOC,KAAK,CACV,8EAAA,GACE,yGAAA,CAAA;AAEN,QAAA;AACF,IAAA,CAAA,CAAA;AAEA,IAAA,MAAMC,YAAAA,GAAyB;AAC7B,QAAA,GAAGC,aAAa;AAChBC,QAAAA,MAAAA,EAAQC,WAAWC,wBAAwB;QAC3CC,SAAAA,EAAW;AACT,YAAA,GAAGJ,cAAcI;AACnB;AACF,KAAA;AAEA,IAAA,MAAMC,oBAAoBC,0BAAAA,CAA2BzB,YAAAA,EAAcM,gBAAAA,EAAkBR,MAAAA,CAAO4B,QAAQ,EAAE,UAAA,CAAA;AAEtG,IAAA,qBACEC,cAAA,CAAA,aAAA,CAACC,qBAAAA,EAAAA;QAAsB/B,MAAAA,EAAQA,MAAAA;QAAQC,MAAAA,EAAQA,MAAAA;QAAQG,SAAAA,EAAWA,SAAAA;QAAWiB,YAAAA,EAAcA;AACzF,KAAA,gBAAAS,cAAA,CAAA,aAAA,CAACE,oBAAoBC,QAAQ,EAAA;QAACC,KAAAA,EAAOP;qBACnCG,cAAA,CAAA,aAAA,CAACK,mBAAAA,EAAAA;QAAoBC,QAAAA,EAAUA,QAAAA;QAAUC,SAAAA,EAAWhC;qBAClDyB,cAAA,CAAA,aAAA,CAACQ,YAAAA,EAAAA,IAAAA,CAAAA,CAAAA,CAAAA,CAAAA;AAKX;;;;"}

package/dist/esm-dev/packages/web/src/ui/b2c/ResetPasswordContainer.mjs

@@ -7,8 +7,10 @@ import { readB2CInternals } from '../../utils/internal.mjs';
 import { usePresentationWithDefault, PresentationContext } from '../components/PresentationConfig.mjs';
 import { passwords } from './Products.mjs';
 import { addProduct } from './utils.mjs';
+import { RUN_IN_DEV } from '../../../../core/src/utils/dev.mjs';
+import { logger } from '../../../../core/src/utils/logger.mjs';
 
-const ResetPasswordContainer = ({ client, config: rawConfig, presentation, callbacks, strings, passwordResetToken: rawToken })=>{
+const ResetPasswordContainer = ({ client, config: rawConfig, presentation, callbacks, strings, styles, passwordResetToken: rawToken })=>{
     const config = addProduct(rawConfig, passwords);
     // Default to reading token from URL if not provided
     let token = rawToken;
@@ -30,6 +32,11 @@ const ResetPasswordContainer = ({ client, config: rawConfig, presentation, callb
     }, [
         client
     ]);
+    RUN_IN_DEV(()=>{
+        if (styles) {
+            logger.error('styles is deprecated and has no effect. Use the presentation prop instead.\n' + 'See https://stytch.com/docs/api-reference/consumer/frontend-sdks/react/upgrade-guide#step-by-step-guide');
+        }
+    });
     const initialState = {
         ...DEFAULT_STATE,
         screen: AppScreens.PasswordResetForm,

package/dist/esm-dev/packages/web/src/ui/b2c/ResetPasswordContainer.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"ResetPasswordContainer.mjs","sources":["../../../../../../../../web/src/ui/b2c/ResetPasswordContainer.tsx"],"sourcesContent":["import React, { useState, useEffect } from 'react';\nimport { StytchProjectConfigurationInput } from '@stytch/core/public';\nimport { messages } from '../../messages/en';\nimport { I18nProviderWrapper } from '../components/atoms/I18nProviderWrapper';\nimport { GlobalContextProvider, DEFAULT_STATE, AppState, AppScreens } from './GlobalContextProvider';\nimport Container from './Container';\nimport { ResetPasswordSDKConfig } from '../../types';\nimport { readB2CInternals } from '../../utils/internal';\nimport { usePresentationWithDefault, PresentationContext } from '../components/PresentationConfig';\nimport { passwords } from './Products';\nimport { addProduct } from './utils';\n\nexport const ResetPasswordContainer = <TProjectConfiguration extends StytchProjectConfigurationInput>({\n  client,\n  config: rawConfig,\n  presentation,\n  callbacks,\n  strings,\n  passwordResetToken: rawToken,\n}: ResetPasswordSDKConfig<TProjectConfiguration>) => {\n  const config = addProduct(rawConfig, passwords);\n\n  // Default to reading token from URL if not provided\n  let token = rawToken;\n  if (!token) {\n    const result = client.parseAuthenticateUrl();\n    if (result?.tokenType === 'reset_password' || result?.tokenType === 'login') {\n      token = result.token;\n    }\n  }\n\n  // Read the watermark out of sync storage, then read it out of async storage\n  const [displayWatermark, setDisplayWatermark] = useState(() => {\n    const { displayWatermark } = readB2CInternals(client).bootstrap.getSync();\n    return displayWatermark;\n  });\n  useEffect(() => {\n    readB2CInternals(client)\n      .bootstrap.getAsync()\n      .then(({ displayWatermark }) => {\n        setDisplayWatermark(displayWatermark);\n      });\n  }, [client]);\n\n  const initialState: AppState = {\n    ...DEFAULT_STATE,\n    screen: AppScreens.PasswordResetForm,\n    formState: {\n      ...DEFAULT_STATE.formState,\n      resetPasswordState: {\n        token: token!,\n      },\n    },\n  };\n\n  const presentationValue = usePresentationWithDefault(presentation, displayWatermark, config.products, 'Products');\n\n  return (\n    <GlobalContextProvider client={client} config={config} callbacks={callbacks} initialState={initialState}>\n      <PresentationContext.Provider value={presentationValue}>\n        <I18nProviderWrapper messages={messages} overrides={strings}>\n          <Container />\n        </I18nProviderWrapper>\n      </PresentationContext.Provider>\n    </GlobalContextProvider>\n  );\n};\n"],"names":["ResetPasswordContainer","client","config","rawConfig","presentation","callbacks","strings","passwordResetToken","rawToken","addProduct","passwords","token","result","parseAuthenticateUrl","tokenType","displayWatermark","setDisplayWatermark","useState","readB2CInternals","bootstrap","getSync","useEffect","getAsync","then","initialState","DEFAULT_STATE","screen","AppScreens","PasswordResetForm","formState","resetPasswordState","presentationValue","usePresentationWithDefault","products","React","GlobalContextProvider","PresentationContext","Provider","value","I18nProviderWrapper","messages","overrides","Container"],"mappings":";;;;;;;;;;MAYaA,sBAAAA,GAAyB,CAAgE,EACpGC,MAAM,EACNC,MAAAA,EAAQC,SAAS,EACjBC,YAAY,EACZC,SAAS,EACTC,OAAO,EACPC,kBAAAA,EAAoBC,QAAQ,EACkB,GAAA;IAC9C,MAAMN,MAAAA,GAASO,WAAWN,SAAAA,EAAWO,SAAAA,CAAAA;;AAGrC,IAAA,IAAIC,KAAAA,GAAQH,QAAAA;AACZ,IAAA,IAAI,CAACG,KAAAA,EAAO;QACV,MAAMC,MAAAA,GAASX,OAAOY,oBAAoB,EAAA;AAC1C,QAAA,IAAID,MAAAA,EAAQE,SAAAA,KAAc,gBAAA,IAAoBF,MAAAA,EAAQE,cAAc,OAAA,EAAS;AAC3EH,YAAAA,KAAAA,GAAQC,OAAOD,KAAK;AACtB,QAAA;AACF,IAAA;;AAGA,IAAA,MAAM,CAACI,gBAAAA,EAAkBC,mBAAAA,CAAoB,GAAGC,QAAAA,CAAS,IAAA;QACvD,MAAM,EAAEF,gBAAgB,EAAE,GAAGG,iBAAiBjB,MAAAA,CAAAA,CAAQkB,SAAS,CAACC,OAAO,EAAA;QACvE,OAAOL,gBAAAA;AACT,IAAA,CAAA,CAAA;IACAM,SAAAA,CAAU,IAAA;QACRH,gBAAAA,CAAiBjB,MAAAA,CAAAA,CACdkB,SAAS,CAACG,QAAQ,EAAA,CAClBC,IAAI,CAAC,CAAC,EAAER,gBAAgB,EAAE,GAAA;YACzBC,mBAAAA,CAAoBD,gBAAAA,CAAAA;AACtB,QAAA,CAAA,CAAA;IACJ,CAAA,EAAG;AAACd,QAAAA;AAAO,KAAA,CAAA;AAEX,IAAA,MAAMuB,YAAAA,GAAyB;AAC7B,QAAA,GAAGC,aAAa;AAChBC,QAAAA,MAAAA,EAAQC,WAAWC,iBAAiB;QACpCC,SAAAA,EAAW;AACT,YAAA,GAAGJ,cAAcI,SAAS;YAC1BC,kBAAAA,EAAoB;gBAClBnB,KAAAA,EAAOA;AACT;AACF;AACF,KAAA;AAEA,IAAA,MAAMoB,oBAAoBC,0BAAAA,CAA2B5B,YAAAA,EAAcW,gBAAAA,EAAkBb,MAAAA,CAAO+B,QAAQ,EAAE,UAAA,CAAA;AAEtG,IAAA,qBACEC,cAAA,CAAA,aAAA,CAACC,qBAAAA,EAAAA;QAAsBlC,MAAAA,EAAQA,MAAAA;QAAQC,MAAAA,EAAQA,MAAAA;QAAQG,SAAAA,EAAWA,SAAAA;QAAWmB,YAAAA,EAAcA;AACzF,KAAA,gBAAAU,cAAA,CAAA,aAAA,CAACE,oBAAoBC,QAAQ,EAAA;QAACC,KAAAA,EAAOP;qBACnCG,cAAA,CAAA,aAAA,CAACK,mBAAAA,EAAAA;QAAoBC,QAAAA,EAAUA,QAAAA;QAAUC,SAAAA,EAAWnC;qBAClD4B,cAAA,CAAA,aAAA,CAACQ,YAAAA,EAAAA,IAAAA,CAAAA,CAAAA,CAAAA,CAAAA;AAKX;;;;"}
+{"version":3,"file":"ResetPasswordContainer.mjs","sources":["../../../../../../../../web/src/ui/b2c/ResetPasswordContainer.tsx"],"sourcesContent":["import React, { useState, useEffect } from 'react';\nimport { StytchProjectConfigurationInput } from '@stytch/core/public';\nimport { messages } from '../../messages/en';\nimport { I18nProviderWrapper } from '../components/atoms/I18nProviderWrapper';\nimport { GlobalContextProvider, DEFAULT_STATE, AppState, AppScreens } from './GlobalContextProvider';\nimport Container from './Container';\nimport { ResetPasswordSDKConfig, DeprecatedSDKConfig } from '../../types';\nimport { readB2CInternals } from '../../utils/internal';\nimport { usePresentationWithDefault, PresentationContext } from '../components/PresentationConfig';\nimport { passwords } from './Products';\nimport { addProduct } from './utils';\nimport { logger, RUN_IN_DEV } from '@stytch/core';\n\nexport const ResetPasswordContainer = <TProjectConfiguration extends StytchProjectConfigurationInput>({\n  client,\n  config: rawConfig,\n  presentation,\n  callbacks,\n  strings,\n  styles,\n  passwordResetToken: rawToken,\n}: ResetPasswordSDKConfig<TProjectConfiguration> & DeprecatedSDKConfig) => {\n  const config = addProduct(rawConfig, passwords);\n\n  // Default to reading token from URL if not provided\n  let token = rawToken;\n  if (!token) {\n    const result = client.parseAuthenticateUrl();\n    if (result?.tokenType === 'reset_password' || result?.tokenType === 'login') {\n      token = result.token;\n    }\n  }\n\n  // Read the watermark out of sync storage, then read it out of async storage\n  const [displayWatermark, setDisplayWatermark] = useState(() => {\n    const { displayWatermark } = readB2CInternals(client).bootstrap.getSync();\n    return displayWatermark;\n  });\n  useEffect(() => {\n    readB2CInternals(client)\n      .bootstrap.getAsync()\n      .then(({ displayWatermark }) => {\n        setDisplayWatermark(displayWatermark);\n      });\n  }, [client]);\n\n  RUN_IN_DEV(() => {\n    if (styles) {\n      logger.error(\n        'styles is deprecated and has no effect. Use the presentation prop instead.\\n' +\n          'See https://stytch.com/docs/api-reference/consumer/frontend-sdks/react/upgrade-guide#step-by-step-guide',\n      );\n    }\n  });\n\n  const initialState: AppState = {\n    ...DEFAULT_STATE,\n    screen: AppScreens.PasswordResetForm,\n    formState: {\n      ...DEFAULT_STATE.formState,\n      resetPasswordState: {\n        token: token!,\n      },\n    },\n  };\n\n  const presentationValue = usePresentationWithDefault(presentation, displayWatermark, config.products, 'Products');\n\n  return (\n    <GlobalContextProvider client={client} config={config} callbacks={callbacks} initialState={initialState}>\n      <PresentationContext.Provider value={presentationValue}>\n        <I18nProviderWrapper messages={messages} overrides={strings}>\n          <Container />\n        </I18nProviderWrapper>\n      </PresentationContext.Provider>\n    </GlobalContextProvider>\n  );\n};\n"],"names":["ResetPasswordContainer","client","config","rawConfig","presentation","callbacks","strings","styles","passwordResetToken","rawToken","addProduct","passwords","token","result","parseAuthenticateUrl","tokenType","displayWatermark","setDisplayWatermark","useState","readB2CInternals","bootstrap","getSync","useEffect","getAsync","then","RUN_IN_DEV","logger","error","initialState","DEFAULT_STATE","screen","AppScreens","PasswordResetForm","formState","resetPasswordState","presentationValue","usePresentationWithDefault","products","React","GlobalContextProvider","PresentationContext","Provider","value","I18nProviderWrapper","messages","overrides","Container"],"mappings":";;;;;;;;;;;;MAaaA,sBAAAA,GAAyB,CAAgE,EACpGC,MAAM,EACNC,QAAQC,SAAS,EACjBC,YAAY,EACZC,SAAS,EACTC,OAAO,EACPC,MAAM,EACNC,kBAAAA,EAAoBC,QAAQ,EACwC,GAAA;IACpE,MAAMP,MAAAA,GAASQ,WAAWP,SAAAA,EAAWQ,SAAAA,CAAAA;;AAGrC,IAAA,IAAIC,KAAAA,GAAQH,QAAAA;AACZ,IAAA,IAAI,CAACG,KAAAA,EAAO;QACV,MAAMC,MAAAA,GAASZ,OAAOa,oBAAoB,EAAA;AAC1C,QAAA,IAAID,MAAAA,EAAQE,SAAAA,KAAc,gBAAA,IAAoBF,MAAAA,EAAQE,cAAc,OAAA,EAAS;AAC3EH,YAAAA,KAAAA,GAAQC,OAAOD,KAAK;AACtB,QAAA;AACF,IAAA;;AAGA,IAAA,MAAM,CAACI,gBAAAA,EAAkBC,mBAAAA,CAAoB,GAAGC,QAAAA,CAAS,IAAA;QACvD,MAAM,EAAEF,gBAAgB,EAAE,GAAGG,iBAAiBlB,MAAAA,CAAAA,CAAQmB,SAAS,CAACC,OAAO,EAAA;QACvE,OAAOL,gBAAAA;AACT,IAAA,CAAA,CAAA;IACAM,SAAAA,CAAU,IAAA;QACRH,gBAAAA,CAAiBlB,MAAAA,CAAAA,CACdmB,SAAS,CAACG,QAAQ,EAAA,CAClBC,IAAI,CAAC,CAAC,EAAER,gBAAgB,EAAE,GAAA;YACzBC,mBAAAA,CAAoBD,gBAAAA,CAAAA;AACtB,QAAA,CAAA,CAAA;IACJ,CAAA,EAAG;AAACf,QAAAA;AAAO,KAAA,CAAA;IAEXwB,UAAAA,CAAW,IAAA;AACT,QAAA,IAAIlB,MAAAA,EAAQ;YACVmB,MAAAA,CAAOC,KAAK,CACV,8EAAA,GACE,yGAAA,CAAA;AAEN,QAAA;AACF,IAAA,CAAA,CAAA;AAEA,IAAA,MAAMC,YAAAA,GAAyB;AAC7B,QAAA,GAAGC,aAAa;AAChBC,QAAAA,MAAAA,EAAQC,WAAWC,iBAAiB;QACpCC,SAAAA,EAAW;AACT,YAAA,GAAGJ,cAAcI,SAAS;YAC1BC,kBAAAA,EAAoB;gBAClBtB,KAAAA,EAAOA;AACT;AACF;AACF,KAAA;AAEA,IAAA,MAAMuB,oBAAoBC,0BAAAA,CAA2BhC,YAAAA,EAAcY,gBAAAA,EAAkBd,MAAAA,CAAOmC,QAAQ,EAAE,UAAA,CAAA;AAEtG,IAAA,qBACEC,cAAA,CAAA,aAAA,CAACC,qBAAAA,EAAAA;QAAsBtC,MAAAA,EAAQA,MAAAA;QAAQC,MAAAA,EAAQA,MAAAA;QAAQG,SAAAA,EAAWA,SAAAA;QAAWuB,YAAAA,EAAcA;AACzF,KAAA,gBAAAU,cAAA,CAAA,aAAA,CAACE,oBAAoBC,QAAQ,EAAA;QAACC,KAAAA,EAAOP;qBACnCG,cAAA,CAAA,aAAA,CAACK,mBAAAA,EAAAA;QAAoBC,QAAAA,EAAUA,QAAAA;QAAUC,SAAAA,EAAWvC;qBAClDgC,cAAA,CAAA,aAAA,CAACQ,YAAAA,EAAAA,IAAAA,CAAAA,CAAAA,CAAAA,CAAAA;AAKX;;;;"}

package/dist/esm-dev/packages/web/src/ui/b2c/components/OAuthButton.mjs

@@ -2,7 +2,7 @@ import React__default from 'react';
 import { useLingui } from '../../../../../../node_modules/@lingui/react/dist/index.mjs';
 import { useStytch } from '../GlobalContextProvider.mjs';
 import Button from '../../components/atoms/Button.mjs';
-import { usePresentation } from '../../components/PresentationConfig.mjs';
+import { usePresentation, getButtonId } from '../../components/PresentationConfig.mjs';
 import { OAuthProviders } from '../../../../../core/src/public/ui.mjs';
 
 const providerInfo = {
@@ -124,7 +124,9 @@ const providerInfo = {
 const OAuthButton = ({ providerType, loginRedirectUrl, signupRedirectUrl, customScopes, providerParams, onSuccess })=>{
     const { i18n: $__i18n, _: $__ } = useLingui();
     const stytchClient = useStytch();
-    const iconRegistry = usePresentation().iconRegistry;
+    const presentation = usePresentation();
+    const iconRegistry = presentation.iconRegistry;
+    const id = getButtonId(`oauth-${providerType}`, presentation.options);
     const provider = providerInfo[providerType];
     let label = providerType;
     let icon = null;
@@ -147,7 +149,8 @@ const OAuthButton = ({ providerType, loginRedirectUrl, signupRedirectUrl, custom
     return /*#__PURE__*/ React__default.createElement(Button, {
         onClick: onButtonClick,
         variant: "outline",
-        icon: icon
+        icon: icon,
+        id: id
     }, label);
 };
 

package/dist/esm-dev/packages/web/src/ui/b2c/components/OAuthButton.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"OAuthButton.mjs","sources":["../../../../../../../../../web/src/ui/b2c/components/OAuthButton.tsx"],"sourcesContent":["import React from 'react';\nimport { MessageDescriptor } from '@lingui/core';\nimport { msg } from '@lingui/core/macro';\nimport { useLingui } from '@lingui/react/macro';\nimport { StringLiteralFromEnum } from '@stytch/core';\nimport { OAuthProviders } from '@stytch/core/public';\nimport { useStytch } from '../GlobalContextProvider';\nimport Button from '../../components/atoms/Button';\nimport { usePresentation } from '../../components/PresentationConfig';\nimport type { oauthIcons } from './Icons';\nimport { IconRegistry } from '../../components/IconRegistry';\n\ninterface ProviderInfo {\n  messageDescriptor: MessageDescriptor;\n}\n\nconst providerInfo = {\n  [OAuthProviders.Google]: {\n    messageDescriptor: msg({ id: 'oauth.continueWithGoogle', message: 'Continue with Google' }),\n  },\n  [OAuthProviders.Microsoft]: {\n    messageDescriptor: msg({ id: 'oauth.continueWithMicrosoft', message: 'Continue with Microsoft' }),\n  },\n  [OAuthProviders.Apple]: {\n    messageDescriptor: msg({ id: 'oauth.continueWithApple', message: 'Continue with Apple' }),\n  },\n  [OAuthProviders.Github]: {\n    messageDescriptor: msg({ id: 'oauth.continueWithGitHub', message: 'Continue with GitHub' }),\n  },\n  [OAuthProviders.GitLab]: {\n    messageDescriptor: msg({ id: 'oauth.continueWithGitLab', message: 'Continue with GitLab' }),\n  },\n  [OAuthProviders.Facebook]: {\n    messageDescriptor: msg({ id: 'oauth.continueWithFacebook', message: 'Continue with Facebook' }),\n  },\n  [OAuthProviders.Discord]: {\n    messageDescriptor: msg({ id: 'oauth.continueWithDiscord', message: 'Continue with Discord' }),\n  },\n  [OAuthProviders.Salesforce]: {\n    messageDescriptor: msg({ id: 'oauth.continueWithSalesforce', message: 'Continue with Salesforce' }),\n  },\n  [OAuthProviders.Slack]: {\n    messageDescriptor: msg({ id: 'oauth.continueWithSlack', message: 'Continue with Slack' }),\n  },\n  [OAuthProviders.Amazon]: {\n    messageDescriptor: msg({ id: 'oauth.continueWithAmazon', message: 'Continue with Amazon' }),\n  },\n  [OAuthProviders.Bitbucket]: {\n    messageDescriptor: msg({ id: 'oauth.continueWithBitbucket', message: 'Continue with Bitbucket' }),\n  },\n  [OAuthProviders.LinkedIn]: {\n    messageDescriptor: msg({ id: 'oauth.continueWithLinkedIn', message: 'Continue with LinkedIn' }),\n  },\n  [OAuthProviders.Coinbase]: {\n    messageDescriptor: msg({ id: 'oauth.continueWithCoinbase', message: 'Continue with Coinbase' }),\n  },\n  [OAuthProviders.Twitch]: {\n    messageDescriptor: msg({ id: 'oauth.continueWithTwitch', message: 'Continue with Twitch' }),\n  },\n  [OAuthProviders.Twitter]: {\n    messageDescriptor: msg({ id: 'oauth.continueWithX', message: 'Continue with X' }),\n  },\n  [OAuthProviders.TikTok]: {\n    messageDescriptor: msg({ id: 'oauth.continueWithTikTok', message: 'Continue with TikTok' }),\n  },\n  [OAuthProviders.Snapchat]: {\n    messageDescriptor: msg({ id: 'oauth.continueWithSnapchat', message: 'Continue with Snapchat' }),\n  },\n  [OAuthProviders.Figma]: {\n    messageDescriptor: msg({ id: 'oauth.continueWithFigma', message: 'Continue with Figma' }),\n  },\n  [OAuthProviders.Yahoo]: {\n    messageDescriptor: msg({ id: 'oauth.continueWithYahoo', message: 'Continue with Yahoo' }),\n  },\n} satisfies Record<OAuthProviders, ProviderInfo>;\n\ntype Props = {\n  providerType: StringLiteralFromEnum<OAuthProviders>;\n  loginRedirectUrl?: string;\n  signupRedirectUrl?: string;\n  customScopes?: string[];\n  providerParams?: Record<string, string>;\n  onSuccess?: () => void;\n};\n\nexport const OAuthButton = ({\n  providerType,\n  loginRedirectUrl,\n  signupRedirectUrl,\n  customScopes,\n  providerParams,\n  onSuccess,\n}: Props) => {\n  const { t } = useLingui();\n  const stytchClient = useStytch();\n  const iconRegistry: IconRegistry<keyof typeof oauthIcons> = usePresentation().iconRegistry;\n\n  const provider = providerInfo[providerType];\n  let label: string = providerType;\n  let icon = null;\n  if (provider) {\n    const { messageDescriptor } = provider;\n\n    const iconName = providerType === 'twitter' ? 'xTwitter' : providerType;\n    const Icon = iconRegistry[iconName];\n\n    label = t(messageDescriptor);\n    icon = <Icon />;\n  }\n\n  const onButtonClick = async () => {\n    await stytchClient.oauth[providerType].start({\n      login_redirect_url: loginRedirectUrl,\n      signup_redirect_url: signupRedirectUrl,\n      custom_scopes: customScopes,\n      provider_params: providerParams,\n    });\n    onSuccess?.();\n  };\n\n  return (\n    <Button onClick={onButtonClick} variant=\"outline\" icon={icon}>\n      {label}\n    </Button>\n  );\n};\n"],"names":["providerInfo","OAuthProviders","Google","messageDescriptor","Microsoft","Apple","Github","GitLab","Facebook","Discord","Salesforce","Slack","Amazon","Bitbucket","LinkedIn","Coinbase","Twitch","Twitter","TikTok","Snapchat","Figma","Yahoo","OAuthButton","providerType","loginRedirectUrl","signupRedirectUrl","customScopes","providerParams","onSuccess","useLingui","stytchClient","useStytch","iconRegistry","usePresentation","provider","label","icon","iconName","Icon","React","onButtonClick","oauth","start","login_redirect_url","signup_redirect_url","custom_scopes","provider_params","Button","onClick","variant"],"mappings":"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"}
+{"version":3,"file":"OAuthButton.mjs","sources":["../../../../../../../../../web/src/ui/b2c/components/OAuthButton.tsx"],"sourcesContent":["import React from 'react';\nimport { MessageDescriptor } from '@lingui/core';\nimport { msg } from '@lingui/core/macro';\nimport { useLingui } from '@lingui/react/macro';\nimport { StringLiteralFromEnum } from '@stytch/core';\nimport { OAuthProviders } from '@stytch/core/public';\nimport { useStytch } from '../GlobalContextProvider';\nimport Button from '../../components/atoms/Button';\nimport { getButtonId, usePresentation } from '../../components/PresentationConfig';\nimport type { oauthIcons } from './Icons';\nimport { IconRegistry } from '../../components/IconRegistry';\n\ninterface ProviderInfo {\n  messageDescriptor: MessageDescriptor;\n}\n\nconst providerInfo = {\n  [OAuthProviders.Google]: {\n    messageDescriptor: msg({ id: 'oauth.continueWithGoogle', message: 'Continue with Google' }),\n  },\n  [OAuthProviders.Microsoft]: {\n    messageDescriptor: msg({ id: 'oauth.continueWithMicrosoft', message: 'Continue with Microsoft' }),\n  },\n  [OAuthProviders.Apple]: {\n    messageDescriptor: msg({ id: 'oauth.continueWithApple', message: 'Continue with Apple' }),\n  },\n  [OAuthProviders.Github]: {\n    messageDescriptor: msg({ id: 'oauth.continueWithGitHub', message: 'Continue with GitHub' }),\n  },\n  [OAuthProviders.GitLab]: {\n    messageDescriptor: msg({ id: 'oauth.continueWithGitLab', message: 'Continue with GitLab' }),\n  },\n  [OAuthProviders.Facebook]: {\n    messageDescriptor: msg({ id: 'oauth.continueWithFacebook', message: 'Continue with Facebook' }),\n  },\n  [OAuthProviders.Discord]: {\n    messageDescriptor: msg({ id: 'oauth.continueWithDiscord', message: 'Continue with Discord' }),\n  },\n  [OAuthProviders.Salesforce]: {\n    messageDescriptor: msg({ id: 'oauth.continueWithSalesforce', message: 'Continue with Salesforce' }),\n  },\n  [OAuthProviders.Slack]: {\n    messageDescriptor: msg({ id: 'oauth.continueWithSlack', message: 'Continue with Slack' }),\n  },\n  [OAuthProviders.Amazon]: {\n    messageDescriptor: msg({ id: 'oauth.continueWithAmazon', message: 'Continue with Amazon' }),\n  },\n  [OAuthProviders.Bitbucket]: {\n    messageDescriptor: msg({ id: 'oauth.continueWithBitbucket', message: 'Continue with Bitbucket' }),\n  },\n  [OAuthProviders.LinkedIn]: {\n    messageDescriptor: msg({ id: 'oauth.continueWithLinkedIn', message: 'Continue with LinkedIn' }),\n  },\n  [OAuthProviders.Coinbase]: {\n    messageDescriptor: msg({ id: 'oauth.continueWithCoinbase', message: 'Continue with Coinbase' }),\n  },\n  [OAuthProviders.Twitch]: {\n    messageDescriptor: msg({ id: 'oauth.continueWithTwitch', message: 'Continue with Twitch' }),\n  },\n  [OAuthProviders.Twitter]: {\n    messageDescriptor: msg({ id: 'oauth.continueWithX', message: 'Continue with X' }),\n  },\n  [OAuthProviders.TikTok]: {\n    messageDescriptor: msg({ id: 'oauth.continueWithTikTok', message: 'Continue with TikTok' }),\n  },\n  [OAuthProviders.Snapchat]: {\n    messageDescriptor: msg({ id: 'oauth.continueWithSnapchat', message: 'Continue with Snapchat' }),\n  },\n  [OAuthProviders.Figma]: {\n    messageDescriptor: msg({ id: 'oauth.continueWithFigma', message: 'Continue with Figma' }),\n  },\n  [OAuthProviders.Yahoo]: {\n    messageDescriptor: msg({ id: 'oauth.continueWithYahoo', message: 'Continue with Yahoo' }),\n  },\n} satisfies Record<OAuthProviders, ProviderInfo>;\n\ntype Props = {\n  providerType: StringLiteralFromEnum<OAuthProviders>;\n  loginRedirectUrl?: string;\n  signupRedirectUrl?: string;\n  customScopes?: string[];\n  providerParams?: Record<string, string>;\n  onSuccess?: () => void;\n};\n\nexport const OAuthButton = ({\n  providerType,\n  loginRedirectUrl,\n  signupRedirectUrl,\n  customScopes,\n  providerParams,\n  onSuccess,\n}: Props) => {\n  const { t } = useLingui();\n  const stytchClient = useStytch();\n  const presentation = usePresentation();\n  const iconRegistry: IconRegistry<keyof typeof oauthIcons> = presentation.iconRegistry;\n  const id = getButtonId(`oauth-${providerType}`, presentation.options);\n\n  const provider = providerInfo[providerType];\n  let label: string = providerType;\n  let icon = null;\n  if (provider) {\n    const { messageDescriptor } = provider;\n\n    const iconName = providerType === 'twitter' ? 'xTwitter' : providerType;\n    const Icon = iconRegistry[iconName];\n\n    label = t(messageDescriptor);\n    icon = <Icon />;\n  }\n\n  const onButtonClick = async () => {\n    await stytchClient.oauth[providerType].start({\n      login_redirect_url: loginRedirectUrl,\n      signup_redirect_url: signupRedirectUrl,\n      custom_scopes: customScopes,\n      provider_params: providerParams,\n    });\n    onSuccess?.();\n  };\n\n  return (\n    <Button onClick={onButtonClick} variant=\"outline\" icon={icon} id={id}>\n      {label}\n    </Button>\n  );\n};\n"],"names":["providerInfo","OAuthProviders","Google","messageDescriptor","Microsoft","Apple","Github","GitLab","Facebook","Discord","Salesforce","Slack","Amazon","Bitbucket","LinkedIn","Coinbase","Twitch","Twitter","TikTok","Snapchat","Figma","Yahoo","OAuthButton","providerType","loginRedirectUrl","signupRedirectUrl","customScopes","providerParams","onSuccess","useLingui","stytchClient","useStytch","presentation","usePresentation","iconRegistry","id","getButtonId","options","provider","label","icon","iconName","Icon","React","onButtonClick","oauth","start","login_redirect_url","signup_redirect_url","custom_scopes","provider_params","Button","onClick","variant"],"mappings":"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"}

package/dist/esm-dev/packages/web/src/ui/b2c/screens/Crypto/SetupNewWallet.mjs

@@ -1,25 +1,23 @@
 import React__default from 'react';
 import { useLingui } from '../../../../../../../node_modules/@lingui/react/dist/index.mjs';
 import { useGlobalReducer, AppScreens } from '../../GlobalContextProvider.mjs';
-import { WalletToIcon } from '../../../../utils/crypto.mjs';
 import Column from '../../../components/atoms/Column.mjs';
 import TextColumn from '../../../components/molecules/TextColumn.mjs';
 import Button, { ButtonAnchor } from '../../../components/atoms/Button.mjs';
 import ButtonColumn from '../../../components/molecules/ButtonColumn.mjs';
+import { useCryptoButtonProps, WalletToText } from '../../../../utils/crypto.mjs';
 import { Wallets } from '../../../../../../core/src/public/ui.mjs';
 
-const commonButtonProps = {
-    variant: 'outline',
-    target: '_blank',
-    rel: 'noreferrer'
-};
-const walletIcon = (wallet)=>{
-    const Icon = WalletToIcon[wallet];
-    return /*#__PURE__*/ React__default.createElement(Icon, null);
-};
 const SetupNewWallet = ()=>{
     const { i18n: $__i18n, _: $__ } = useLingui();
     const [, dispatch] = useGlobalReducer();
+    const { getIcon, getId } = useCryptoButtonProps();
+    const walletsToRender = [
+        Wallets.Metamask,
+        Wallets.Phantom,
+        Wallets.Coinbase,
+        Wallets.Binance
+    ];
     return /*#__PURE__*/ React__default.createElement(Column, {
         gap: 6
     }, /*#__PURE__*/ React__default.createElement(TextColumn, {
@@ -35,35 +33,18 @@ const SetupNewWallet = ()=>{
             id: "crypto.setupNewWallet.instruction",
             message: "We’ve included a few examples of wallet extensions you can find below. Once you’ve set up your wallet, click “Go back” to use it and sign in."
         })
-    }), /*#__PURE__*/ React__default.createElement(ButtonColumn, null, /*#__PURE__*/ React__default.createElement(ButtonAnchor, {
-        ...commonButtonProps,
-        icon: walletIcon(Wallets.Metamask),
-        href: "https://metamask.io/"
-    }, $__i18n._({
-        id: "crypto.wallet.metamask",
-        message: "Metamask"
-    })), /*#__PURE__*/ React__default.createElement(ButtonAnchor, {
-        ...commonButtonProps,
-        icon: walletIcon(Wallets.Phantom),
-        href: "https://phantom.app/"
-    }, $__i18n._({
-        id: "crypto.wallet.phantom",
-        message: "Phantom"
-    })), /*#__PURE__*/ React__default.createElement(ButtonAnchor, {
-        ...commonButtonProps,
-        icon: walletIcon(Wallets.Coinbase),
-        href: "https://www.coinbase.com/wallet"
-    }, $__i18n._({
-        id: "crypto.wallet.coinbase",
-        message: "Coinbase"
-    })), /*#__PURE__*/ React__default.createElement(ButtonAnchor, {
-        ...commonButtonProps,
-        icon: walletIcon(Wallets.Binance),
-        href: "https://www.bnbchain.world/en/binance-wallet"
-    }, $__i18n._({
-        id: "crypto.wallet.binance",
-        message: "Binance"
-    })), /*#__PURE__*/ React__default.createElement(Button, {
+    }), /*#__PURE__*/ React__default.createElement(ButtonColumn, null, walletsToRender.map((wallet)=>{
+        const Icon = getIcon(wallet);
+        return /*#__PURE__*/ React__default.createElement(ButtonAnchor, {
+            key: wallet,
+            variant: "outline",
+            target: "_blank",
+            rel: "noreferrer",
+            icon: /*#__PURE__*/ React__default.createElement(Icon, null),
+            href: "https://metamask.io/",
+            id: getId(wallet)
+        }, $__i18n._(WalletToText[wallet]));
+    }), /*#__PURE__*/ React__default.createElement(Button, {
         variant: "primary",
         onClick: ()=>dispatch({
                 type: 'transition',

package/dist/esm-dev/packages/web/src/ui/b2c/screens/Crypto/SetupNewWallet.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"SetupNewWallet.mjs","sources":["../../../../../../../../../../web/src/ui/b2c/screens/Crypto/SetupNewWallet.tsx"],"sourcesContent":["import React from 'react';\nimport { useLingui } from '@lingui/react/macro';\nimport { Wallets } from '@stytch/core/public';\nimport { AppScreens, useGlobalReducer } from '../../GlobalContextProvider';\nimport { WalletToIcon } from '../../../../utils/crypto';\nimport Column from '../../../components/atoms/Column';\nimport TextColumn from '../../../components/molecules/TextColumn';\nimport Button, { ButtonAnchor } from '../../../components/atoms/Button';\nimport ButtonColumn from '../../../components/molecules/ButtonColumn';\n\nconst commonButtonProps = {\n  variant: 'outline',\n  target: '_blank',\n  rel: 'noreferrer',\n} as const;\n\nconst walletIcon = (wallet: Wallets) => {\n  const Icon = WalletToIcon[wallet];\n  return <Icon />;\n};\n\nexport const SetupNewWallet = () => {\n  const { t } = useLingui();\n  const [, dispatch] = useGlobalReducer();\n\n  return (\n    <Column gap={6}>\n      <TextColumn\n        header={t({ id: 'crypto.setupNewWallet.title', message: 'Set up a new crypto wallet' })}\n        body={t({\n          id: 'crypto.setupNewWallet.content',\n          message: 'Get started by downloading any Ethereum or Solana wallet.',\n        })}\n        helper={t({\n          id: 'crypto.setupNewWallet.instruction',\n          message:\n            'We’ve included a few examples of wallet extensions you can find below. Once you’ve set up your wallet, click “Go back” to use it and sign in.',\n        })}\n      />\n\n      <ButtonColumn>\n        <ButtonAnchor {...commonButtonProps} icon={walletIcon(Wallets.Metamask)} href=\"https://metamask.io/\">\n          {t({ id: 'crypto.wallet.metamask', message: 'Metamask' })}\n        </ButtonAnchor>\n        <ButtonAnchor {...commonButtonProps} icon={walletIcon(Wallets.Phantom)} href=\"https://phantom.app/\">\n          {t({ id: 'crypto.wallet.phantom', message: 'Phantom' })}\n        </ButtonAnchor>\n\n        <ButtonAnchor {...commonButtonProps} icon={walletIcon(Wallets.Coinbase)} href=\"https://www.coinbase.com/wallet\">\n          {t({ id: 'crypto.wallet.coinbase', message: 'Coinbase' })}\n        </ButtonAnchor>\n\n        <ButtonAnchor\n          {...commonButtonProps}\n          icon={walletIcon(Wallets.Binance)}\n          href=\"https://www.bnbchain.world/en/binance-wallet\"\n        >\n          {t({ id: 'crypto.wallet.binance', message: 'Binance' })}\n        </ButtonAnchor>\n\n        <Button variant=\"primary\" onClick={() => dispatch({ type: 'transition', screen: AppScreens.Main })}>\n          {t({ id: 'button.goBack', message: 'Go back' })}\n        </Button>\n      </ButtonColumn>\n    </Column>\n  );\n};\n"],"names":["commonButtonProps","variant","target","rel","walletIcon","wallet","Icon","WalletToIcon","React","SetupNewWallet","useLingui","dispatch","useGlobalReducer","Column","gap","TextColumn","header","body","helper","ButtonColumn","ButtonAnchor","icon","Wallets","Metamask","href","Phantom","Coinbase","Binance","Button","onClick","type","screen","AppScreens","Main"],"mappings":";;;;;;;;;;AAUA,MAAMA,iBAAAA,GAAoB;IACxBC,OAAAA,EAAS,SAAA;IACTC,MAAAA,EAAQ,QAAA;IACRC,GAAAA,EAAK;AACP,CAAA;AAEA,MAAMC,aAAa,CAACC,MAAAA,GAAAA;IAClB,MAAMC,IAAAA,GAAOC,YAAY,CAACF,MAAAA,CAAO;AACjC,IAAA,qBAAOG,cAAA,CAAA,aAAA,CAACF,IAAAA,EAAAA,IAAAA,CAAAA;AACV,CAAA;MAEaG,cAAAA,GAAiB,IAAA;AAC5B,IAAA,MAAM,EAAA,IAAA,EAAA,OAAA,EAAA,CAAA,EAAA,GAAA,EAAA,GAAQC,SAAAA,EAAAA;IACd,MAAM,GAAGC,SAAS,GAAGC,gBAAAA,EAAAA;AAErB,IAAA,qBACEJ,cAAA,CAAA,aAAA,CAACK,MAAAA,EAAAA;QAAOC,GAAAA,EAAK;qBACXN,cAAA,CAAA,aAAA,CAACO,UAAAA,EAAAA;QACCC,MAAM,EAAA,OAAA,CAAA,CAAA,CAAA;;;;QACNC,IAAI,EAAA,OAAA,CAAA,CAAA,CAAA;;;;QAIJC,MAAM,EAAA,OAAA,CAAA,CAAA,CAAA;;;;AAOR,KAAA,CAAA,gBAAAV,cAAA,CAAA,aAAA,CAACW,kCACCX,cAAA,CAAA,aAAA,CAACY,YAAAA,EAAAA;AAAc,QAAA,GAAGpB,iBAAiB;QAAEqB,IAAAA,EAAMjB,UAAAA,CAAWkB,QAAQC,QAAQ,CAAA;QAAGC,IAAAA,EAAK;;;;uBAG9EhB,cAAA,CAAA,aAAA,CAACY,YAAAA,EAAAA;AAAc,QAAA,GAAGpB,iBAAiB;QAAEqB,IAAAA,EAAMjB,UAAAA,CAAWkB,QAAQG,OAAO,CAAA;QAAGD,IAAAA,EAAK;;;;uBAI7EhB,cAAA,CAAA,aAAA,CAACY,YAAAA,EAAAA;AAAc,QAAA,GAAGpB,iBAAiB;QAAEqB,IAAAA,EAAMjB,UAAAA,CAAWkB,QAAQI,QAAQ,CAAA;QAAGF,IAAAA,EAAK;;;;uBAI9EhB,cAAA,CAAA,aAAA,CAACY,YAAAA,EAAAA;AACE,QAAA,GAAGpB,iBAAiB;QACrBqB,IAAAA,EAAMjB,UAAAA,CAAWkB,QAAQK,OAAO,CAAA;QAChCH,IAAAA,EAAK;;;;uBAKPhB,cAAA,CAAA,aAAA,CAACoB,MAAAA,EAAAA;QAAO3B,OAAAA,EAAQ,SAAA;AAAU4B,QAAAA,OAAAA,EAAS,IAAMlB,QAAAA,CAAS;gBAAEmB,IAAAA,EAAM,YAAA;AAAcC,gBAAAA,MAAAA,EAAQC,WAAWC;AAAK,aAAA;;;;;AAMxG;;;;"}
+{"version":3,"file":"SetupNewWallet.mjs","sources":["../../../../../../../../../../web/src/ui/b2c/screens/Crypto/SetupNewWallet.tsx"],"sourcesContent":["import React from 'react';\nimport { useLingui } from '@lingui/react/macro';\nimport { Wallets } from '@stytch/core/public';\nimport { AppScreens, useGlobalReducer } from '../../GlobalContextProvider';\nimport Column from '../../../components/atoms/Column';\nimport TextColumn from '../../../components/molecules/TextColumn';\nimport Button, { ButtonAnchor } from '../../../components/atoms/Button';\nimport ButtonColumn from '../../../components/molecules/ButtonColumn';\nimport { useCryptoButtonProps, WalletToText } from '../../../../utils/crypto';\n\nexport const SetupNewWallet = () => {\n  const { t } = useLingui();\n  const [, dispatch] = useGlobalReducer();\n\n  const { getIcon, getId } = useCryptoButtonProps();\n  const walletsToRender = [Wallets.Metamask, Wallets.Phantom, Wallets.Coinbase, Wallets.Binance];\n\n  return (\n    <Column gap={6}>\n      <TextColumn\n        header={t({ id: 'crypto.setupNewWallet.title', message: 'Set up a new crypto wallet' })}\n        body={t({\n          id: 'crypto.setupNewWallet.content',\n          message: 'Get started by downloading any Ethereum or Solana wallet.',\n        })}\n        helper={t({\n          id: 'crypto.setupNewWallet.instruction',\n          message:\n            'We’ve included a few examples of wallet extensions you can find below. Once you’ve set up your wallet, click “Go back” to use it and sign in.',\n        })}\n      />\n\n      <ButtonColumn>\n        {walletsToRender.map((wallet) => {\n          const Icon = getIcon(wallet);\n          return (\n            <ButtonAnchor\n              key={wallet}\n              variant=\"outline\"\n              target=\"_blank\"\n              rel=\"noreferrer\"\n              icon={<Icon />}\n              href=\"https://metamask.io/\"\n              id={getId(wallet)}\n            >\n              {t(WalletToText[wallet])}\n            </ButtonAnchor>\n          );\n        })}\n\n        <Button variant=\"primary\" onClick={() => dispatch({ type: 'transition', screen: AppScreens.Main })}>\n          {t({ id: 'button.goBack', message: 'Go back' })}\n        </Button>\n      </ButtonColumn>\n    </Column>\n  );\n};\n"],"names":["SetupNewWallet","useLingui","dispatch","useGlobalReducer","getIcon","getId","useCryptoButtonProps","walletsToRender","Wallets","Metamask","Phantom","Coinbase","Binance","React","Column","gap","TextColumn","header","body","helper","ButtonColumn","map","wallet","Icon","ButtonAnchor","key","variant","target","rel","icon","href","id","WalletToText","Button","onClick","type","screen","AppScreens","Main"],"mappings":";;;;;;;;;;MAUaA,cAAAA,GAAiB,IAAA;AAC5B,IAAA,MAAM,EAAA,IAAA,EAAA,OAAA,EAAA,CAAA,EAAA,GAAA,EAAA,GAAQC,SAAAA,EAAAA;IACd,MAAM,GAAGC,SAAS,GAAGC,gBAAAA,EAAAA;AAErB,IAAA,MAAM,EAAEC,OAAO,EAAEC,KAAK,EAAE,GAAGC,oBAAAA,EAAAA;AAC3B,IAAA,MAAMC,eAAAA,GAAkB;AAACC,QAAAA,OAAAA,CAAQC,QAAQ;AAAED,QAAAA,OAAAA,CAAQE,OAAO;AAAEF,QAAAA,OAAAA,CAAQG,QAAQ;AAAEH,QAAAA,OAAAA,CAAQI;AAAQ,KAAA;AAE9F,IAAA,qBACEC,cAAA,CAAA,aAAA,CAACC,MAAAA,EAAAA;QAAOC,GAAAA,EAAK;qBACXF,cAAA,CAAA,aAAA,CAACG,UAAAA,EAAAA;QACCC,MAAM,EAAA,OAAA,CAAA,CAAA,CAAA;;;;QACNC,IAAI,EAAA,OAAA,CAAA,CAAA,CAAA;;;;QAIJC,MAAM,EAAA,OAAA,CAAA,CAAA,CAAA;;;;AAOR,KAAA,CAAA,gBAAAN,cAAA,CAAA,aAAA,CAACO,YAAAA,EAAAA,IAAAA,EACEb,eAAAA,CAAgBc,GAAG,CAAC,CAACC,MAAAA,GAAAA;AACpB,QAAA,MAAMC,OAAOnB,OAAAA,CAAQkB,MAAAA,CAAAA;AACrB,QAAA,qBACET,cAAA,CAAA,aAAA,CAACW,YAAAA,EAAAA;YACCC,GAAAA,EAAKH,MAAAA;YACLI,OAAAA,EAAQ,SAAA;YACRC,MAAAA,EAAO,QAAA;YACPC,GAAAA,EAAI,YAAA;AACJC,YAAAA,IAAAA,gBAAMhB,cAAA,CAAA,aAAA,CAACU,IAAAA,EAAAA,IAAAA,CAAAA;YACPO,IAAAA,EAAK,sBAAA;AACLC,YAAAA,EAAAA,EAAI1B,KAAAA,CAAMiB,MAAAA;AAEPU,SAAAA,EAAAA,OAAAA,CAAAA,CAAAA,CAAAA,YAAY,CAACV,MAAAA,CAAO,CAAA,CAAA;AAG7B,IAAA,CAAA,CAAA,gBAEAT,cAAA,CAAA,aAAA,CAACoB,MAAAA,EAAAA;QAAOP,OAAAA,EAAQ,SAAA;AAAUQ,QAAAA,OAAAA,EAAS,IAAMhC,QAAAA,CAAS;gBAAEiC,IAAAA,EAAM,YAAA;AAAcC,gBAAAA,MAAAA,EAAQC,WAAWC;AAAK,aAAA;;;;;AAMxG;;;;"}

package/dist/esm-dev/packages/web/src/ui/b2c/screens/Crypto/WalletButtons.mjs

@@ -1,16 +1,13 @@
 import * as React from 'react';
 import { useLingui } from '../../../../../../../node_modules/@lingui/react/dist/index.mjs';
 import { useGlobalReducer, useConfig, AppScreens } from '../../GlobalContextProvider.mjs';
-import { isWalletVisible, WalletToText, WalletToIcon } from '../../../../utils/crypto.mjs';
+import { useCryptoButtonProps, isWalletVisible, WalletToText } from '../../../../utils/crypto.mjs';
 import ButtonColumn from '../../../components/molecules/ButtonColumn.mjs';
 import Button from '../../../components/atoms/Button.mjs';
+import { GenericWalletIcon } from '../../../../assets/genericWallet.mjs';
 import { Wallets } from '../../../../../../core/src/public/ui.mjs';
 
 const MAX_BUTTONS = 6;
-const WalletIconComponent = ({ wallet })=>{
-    const Icon = WalletToIcon[wallet];
-    return /*#__PURE__*/ React.createElement(Icon, null);
-};
 const walletMessages = {
     [Wallets.Phantom]: {
         id: "crypto.wallet.continueWithPhantom",
@@ -41,6 +38,7 @@ const CryptoWalletButtons = ({ type })=>{
     const { i18n: $__i18n, _: $__ } = useLingui();
     const [state, dispatch] = useGlobalReducer();
     const config = useConfig();
+    const { getIcon, getId } = useCryptoButtonProps();
     const oAuthOptions = config.oauthOptions?.providers.length ?? 0;
     // Crypto Buttons on screen = Maximum Buttons - OAuth Buttons - 1 (Other crypto or set up new wallet)
     const cryptoButtonsOnMainScreen = MAX_BUTTONS - oAuthOptions - 1;
@@ -62,22 +60,24 @@ const CryptoWalletButtons = ({ type })=>{
     const mainWallets = allDetectedWallets.slice(0, cryptoButtonsOnMainScreen);
     const otherWallet = allDetectedWallets.slice(cryptoButtonsOnMainScreen);
     const walletsToRender = type === 'main' ? mainWallets : otherWallet;
-    return /*#__PURE__*/ React.createElement(ButtonColumn, null, walletsToRender.map((wallet)=>/*#__PURE__*/ React.createElement(Button, {
+    return /*#__PURE__*/ React.createElement(ButtonColumn, null, walletsToRender.map((wallet)=>{
+        const walletEnum = Wallets[wallet];
+        const Icon = getIcon(walletEnum);
+        return /*#__PURE__*/ React.createElement(Button, {
             key: wallet,
             variant: "outline",
-            icon: /*#__PURE__*/ React.createElement(WalletIconComponent, {
-                wallet: Wallets[wallet]
-            }),
-            onClick: ()=>onWalletStart(Wallets[wallet])
-        }, type === 'main' ? $__i18n._(walletMessages[Wallets[wallet]]) : $__i18n._(WalletToText[Wallets[wallet]]))), renderOtherScreenButton && type === 'main' ? /*#__PURE__*/ React.createElement(Button, {
+            icon: /*#__PURE__*/ React.createElement(Icon, null),
+            onClick: ()=>onWalletStart(walletEnum),
+            id: getId(walletEnum)
+        }, type === 'main' ? $__i18n._(walletMessages[walletEnum]) : $__i18n._(WalletToText[walletEnum]));
+    }), renderOtherScreenButton && type === 'main' ? /*#__PURE__*/ React.createElement(Button, {
         variant: "outline",
-        icon: /*#__PURE__*/ React.createElement(WalletIconComponent, {
-            wallet: Wallets.GenericEthereumWallet
-        }),
+        icon: /*#__PURE__*/ React.createElement(GenericWalletIcon, null),
         onClick: ()=>dispatch({
                 type: 'transition',
                 screen: AppScreens.CryptoOtherScreen
-            })
+            }),
+        id: getId(Wallets.GenericEthereumWallet)
     }, $__i18n._({
         id: "crypto.wallet.continueWithOtherWallet",
         message: "Continue with other Crypto Wallet"