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

package/dist/esm/_virtual/index3.mjs

@@ -1,6 +1,8 @@
-import { __require as requireBs58 } from '../node_modules/bs58/index.mjs';
+import { getDefaultExportFromCjs } from './_commonjsHelpers.mjs';
+import { __require as requireLodash_merge } from '../node_modules/lodash.merge/index.mjs';
 
-var bs58Exports = requireBs58();
+var lodash_mergeExports = requireLodash_merge();
+var merge = /*@__PURE__*/getDefaultExportFromCjs(lodash_mergeExports);
 
-export { bs58Exports as b };
+export { merge as default };
 //# sourceMappingURL=index3.mjs.map

package/dist/esm/_virtual/index3.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"index3.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;"}
+{"version":3,"file":"index3.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;"}

package/dist/esm/_virtual/index4.mjs

@@ -1,8 +1,6 @@
-import { getDefaultExportFromCjs } from './_commonjsHelpers.mjs';
-import { __require as requireLodash_merge } from '../node_modules/lodash.merge/index.mjs';
+import { __require as requireBs58 } from '../node_modules/bs58/index.mjs';
 
-var lodash_mergeExports = requireLodash_merge();
-var merge = /*@__PURE__*/getDefaultExportFromCjs(lodash_mergeExports);
+var bs58Exports = requireBs58();
 
-export { merge as default };
+export { bs58Exports as b };
 //# sourceMappingURL=index4.mjs.map

package/dist/esm/_virtual/index4.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"index4.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;"}
+{"version":3,"file":"index4.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;"}

package/dist/esm/b2b/StytchB2BContext.mjs

@@ -10,7 +10,7 @@ export { useStytchB2BClient, withStytchB2BClient, withStytchPermissions } from '
  * @example
  * const {member, isInitialized, fromCache} = useStytchMember();
  * if (!isInitialized) {
- *     return <p>Loading...</p>;
+ *   return <p>Loading...</p>;
  * }
  * return (<h1>Welcome, {member.name}</h1>);
  */ const useStytchMember = useStytchMember$1;
@@ -26,7 +26,7 @@ export { useStytchB2BClient, withStytchB2BClient, withStytchPermissions } from '
  *     return;
  *   }
  *   if (!session) {
- *     router.replace('/login')
+ *     router.replace('/login');
  *   }
  * }, [session, isInitialized]);
  */ const useStytchMemberSession = useStytchMemberSession$1;
@@ -38,9 +38,9 @@ export { useStytchB2BClient, withStytchB2BClient, withStytchPermissions } from '
  * @example
  * const {organization, isInitialized, fromCache} = useStytchOrganization();
  * if (!isInitialized) {
- *     return <p>Loading...</p>;
+ *   return <p>Loading...</p>;
  * }
- * return (<p>Welcome to {organization.organization_name}</p>);
+ * return <p>Welcome to {organization.organization_name}</p>;
  */ const useStytchOrganization = useStytchOrganization$1;
 /**
  * Determines whether the logged-in member is allowed to perform the specified action on the specified resource.
@@ -51,7 +51,7 @@ export { useStytchB2BClient, withStytchB2BClient, withStytchPermissions } from '
  *
  * Remember - authorization checks for sensitive actions should always occur on the backend as well.
  * @example
- * const { isAuthorized } = useStytchIsAuthorized<Permissions>('documents', 'edit');
+ * const { isAuthorized } = useStytchIsAuthorized('documents', 'edit');
  * return <button disabled={!isAuthorized}>Edit</button>
  */ const useStytchIsAuthorized = useStytchIsAuthorized$1;
 const withStytchMember = withStytchMember$1;

package/dist/esm/b2b/StytchB2BContext.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"StytchB2BContext.mjs","sources":["../../../src/b2b/StytchB2BContext.tsx"],"sourcesContent":["'use client';\n\nimport React, { ComponentType, ReactNode } from 'react';\n\nimport type { Member, MemberSession, Organization, StytchProjectConfigurationInput } from '@stytch/web/b2b';\nimport { StytchB2BClient } from '@stytch/web/b2b/headless';\n\nexport { useStytchB2BClient, withStytchB2BClient, withStytchPermissions } from '@stytch/web/react/b2b';\n\nimport {\n  StytchB2BProvider as StytchB2BProviderShared,\n  useStytchIsAuthorized as useStytchIsAuthorizedShared,\n  useStytchMemberSession as useStytchMemberSessionShared,\n  useStytchMember as useStytchMemberShared,\n  useStytchOrganization as useStytchOrganizationShared,\n  withStytchMemberSession as withStytchMemberSessionShared,\n  withStytchMember as withStytchMemberShared,\n  withStytchOrganization as withStytchOrganizationShared,\n} from '@stytch/web/react/b2b';\n\n/**\n * Returns the active Member.\n * The Stytch SDKs are used for client-side authentication and session management.\n * Check the isInitialized property to determine if the SDK has completed initialization.\n * Check the fromCache property to determine if the member data is from persistent storage.\n * @example\n * const {member, isInitialized, fromCache} = useStytchMember();\n * if (!isInitialized) {\n *     return <p>Loading...</p>;\n * }\n * return (<h1>Welcome, {member.name}</h1>);\n */\nexport const useStytchMember = useStytchMemberShared as <TAssumeHydrated extends boolean = true>() => ReturnType<\n  typeof useStytchMemberShared<TAssumeHydrated>\n>;\n\n/**\n * Returns the active member's Stytch member session.\n * The Stytch SDKs are used for client-side authentication and session management.\n * Check the isInitialized property to determine if the SDK has completed initialization.\n * Check the fromCache property to determine if the session data is from persistent storage.\n * @example\n * const {session, isInitialized, fromCache} = useStytchMemberSession();\n * useEffect(() => {\n *   if (!isInitialized) {\n *     return;\n *   }\n *   if (!session) {\n *     router.replace('/login')\n *   }\n * }, [session, isInitialized]);\n */\nexport const useStytchMemberSession = useStytchMemberSessionShared as <\n  TAssumeHydrated extends boolean = true,\n>() => ReturnType<typeof useStytchMemberSessionShared<TAssumeHydrated>>;\n\n/**\n * Returns the active Stytch organization.\n * The Stytch SDKs are used for client-side authentication and session management.\n * Check the isInitialized property to determine if the SDK has completed initialization.\n * Check the fromCache property to determine if the organization data is from persistent storage.\n * @example\n * const {organization, isInitialized, fromCache} = useStytchOrganization();\n * if (!isInitialized) {\n *     return <p>Loading...</p>;\n * }\n * return (<p>Welcome to {organization.organization_name}</p>);\n */\nexport const useStytchOrganization = useStytchOrganizationShared as <\n  TAssumeHydrated extends boolean = true,\n>() => ReturnType<typeof useStytchOrganizationShared<TAssumeHydrated>>;\n\n/**\n * Determines whether the logged-in member is allowed to perform the specified action on the specified resource.\n * Returns `true` if the member can perform the action, `false` otherwise.\n *\n * If the member is not logged in, this method will always return false.\n * If the resource or action provided are not valid for the configured RBAC policy, this method will return false.\n *\n * Remember - authorization checks for sensitive actions should always occur on the backend as well.\n * @example\n * const { isAuthorized } = useStytchIsAuthorized<Permissions>('documents', 'edit');\n * return <button disabled={!isAuthorized}>Edit</button>\n */\nexport const useStytchIsAuthorized = useStytchIsAuthorizedShared as <TAssumeHydrated extends boolean = false>(\n  resourceId: string,\n  action: string,\n) => ReturnType<typeof useStytchIsAuthorizedShared<TAssumeHydrated>>;\n\nexport const withStytchMember = withStytchMemberShared as <T extends object, TAssumeHydrated extends boolean = false>(\n  Component: ComponentType<\n    T & { stytchMember: Member | null; stytchMemberIsInitialized: boolean; stytchMemberIsFromCache: boolean }\n  >,\n) => ReturnType<typeof withStytchMemberShared<T, TAssumeHydrated>>;\n\nexport const withStytchMemberSession = withStytchMemberSessionShared as <\n  T extends object,\n  TAssumeHydrated extends boolean = false,\n>(\n  Component: ComponentType<\n    T & {\n      stytchMemberSession: MemberSession | null;\n      stytchMemberSessionIsInitialized: boolean;\n      stytchMemberSessionIsFromCache: boolean;\n    }\n  >,\n) => ReturnType<typeof withStytchMemberSessionShared<T, TAssumeHydrated>>;\n\nexport const withStytchOrganization = withStytchOrganizationShared as <\n  T extends object,\n  TAssumeHydrated extends boolean = false,\n>(\n  Component: ComponentType<\n    T & {\n      stytchOrganization: Organization | null;\n      stytchOrganizationIsInitialized: boolean;\n      stytchOrganizationIsFromCache: boolean;\n    }\n  >,\n) => ReturnType<typeof withStytchOrganizationShared<T, TAssumeHydrated>>;\n\nexport interface StytchB2BProviderProps<\n  TProjectConfiguration extends StytchProjectConfigurationInput = Stytch.DefaultProjectConfiguration,\n> {\n  /**\n   * A Stytch client instance, a {@link StytchB2BClient}\n   */\n  stytch: StytchB2BClient<TProjectConfiguration>;\n  /**\n   * When true, the provider will assume that the component will only be\n   * rendered in a browser environment, either in a single-page application or\n   * after completing hydration of a server-rendered application. This allows\n   * cached values to be retrieved from the browser on the first render, meaning\n   * that the `isInitialized` value returned from Stytch hooks will be `true`\n   * starting from the first render.\n   *\n   * When `false`, the provider will defer initialization until after the first\n   * render, and `isInitialized` will initially be `false`.\n   *\n   * If you encounter hydration errors relating to the use of this component,\n   * set this to `false`.\n   *\n   * This value defaults to `true` in `@stytch/react`.\n   */\n  assumeHydrated?: boolean;\n  children?: ReactNode;\n}\n\n/**\n * The Stytch Context Provider.\n * Wrap your application with this component in order to use Stytch everywhere in your app.\n * @example\n * const stytch = createStytchB2BClient('public-token-<find yours in the stytch dashboard>')\n *\n * ReactDOM.render(\n *   <StytchB2BProvider stytch={stytch}>\n *     <App />\n *   </StytchProvider>,\n *   document.getElementById('root'),\n * )\n */\nexport const StytchB2BProvider = <\n  TProjectConfiguration extends StytchProjectConfigurationInput = Stytch.DefaultProjectConfiguration,\n>({\n  stytch,\n  children,\n  assumeHydrated = true,\n}: StytchB2BProviderProps<TProjectConfiguration>): JSX.Element => (\n  <StytchB2BProviderShared stytch={stytch} assumeHydrated={assumeHydrated}>\n    {children}\n  </StytchB2BProviderShared>\n);\n"],"names":["useStytchMember","useStytchMemberShared","useStytchMemberSession","useStytchMemberSessionShared","useStytchOrganization","useStytchOrganizationShared","useStytchIsAuthorized","useStytchIsAuthorizedShared","withStytchMember","withStytchMemberShared","withStytchMemberSession","withStytchMemberSessionShared","withStytchOrganization","withStytchOrganizationShared","StytchB2BProvider","stytch","children","assumeHydrated","React","StytchB2BProviderShared"],"mappings":";;;;AAoBA;;;;;;;;;;;IAYO,MAAMA,eAAAA,GAAkBC;AAI/B;;;;;;;;;;;;;;;IAgBO,MAAMC,sBAAAA,GAAyBC;AAItC;;;;;;;;;;;IAYO,MAAMC,qBAAAA,GAAwBC;AAIrC;;;;;;;;;;;IAYO,MAAMC,qBAAAA,GAAwBC;AAK9B,MAAMC,mBAAmBC;AAMzB,MAAMC,0BAA0BC;AAahC,MAAMC,yBAAyBC;AAwCtC;;;;;;;;;;;;AAYC,IACM,MAAMC,iBAAAA,GAAoB,CAE/B,EACAC,MAAM,EACNC,QAAQ,EACRC,cAAAA,GAAiB,IAAI,EACyB,iBAC9CC,cAAA,CAAA,aAAA,CAACC,mBAAAA,EAAAA;QAAwBJ,MAAAA,EAAQA,MAAAA;QAAQE,cAAAA,EAAgBA;OACtDD,QAAAA;;;;"}
+{"version":3,"file":"StytchB2BContext.mjs","sources":["../../../src/b2b/StytchB2BContext.tsx"],"sourcesContent":["'use client';\n\nimport React, { ComponentType, ReactNode } from 'react';\n\nimport type { Member, MemberSession, Organization, StytchProjectConfigurationInput } from '@stytch/web/b2b';\nimport { StytchB2BClient } from '@stytch/web/b2b/headless';\n\nexport { useStytchB2BClient, withStytchB2BClient, withStytchPermissions } from '@stytch/web/react/b2b';\n\nimport {\n  StytchB2BProvider as StytchB2BProviderShared,\n  useStytchIsAuthorized as useStytchIsAuthorizedShared,\n  useStytchMemberSession as useStytchMemberSessionShared,\n  useStytchMember as useStytchMemberShared,\n  useStytchOrganization as useStytchOrganizationShared,\n  withStytchMemberSession as withStytchMemberSessionShared,\n  withStytchMember as withStytchMemberShared,\n  withStytchOrganization as withStytchOrganizationShared,\n} from '@stytch/web/react/b2b';\n\n/**\n * Returns the active Member.\n * The Stytch SDKs are used for client-side authentication and session management.\n * Check the isInitialized property to determine if the SDK has completed initialization.\n * Check the fromCache property to determine if the member data is from persistent storage.\n * @example\n * const {member, isInitialized, fromCache} = useStytchMember();\n * if (!isInitialized) {\n *   return <p>Loading...</p>;\n * }\n * return (<h1>Welcome, {member.name}</h1>);\n */\nexport const useStytchMember = useStytchMemberShared as <TAssumeHydrated extends boolean = true>() => ReturnType<\n  typeof useStytchMemberShared<TAssumeHydrated>\n>;\n\n/**\n * Returns the active member's Stytch member session.\n * The Stytch SDKs are used for client-side authentication and session management.\n * Check the isInitialized property to determine if the SDK has completed initialization.\n * Check the fromCache property to determine if the session data is from persistent storage.\n * @example\n * const {session, isInitialized, fromCache} = useStytchMemberSession();\n * useEffect(() => {\n *   if (!isInitialized) {\n *     return;\n *   }\n *   if (!session) {\n *     router.replace('/login');\n *   }\n * }, [session, isInitialized]);\n */\nexport const useStytchMemberSession = useStytchMemberSessionShared as <\n  TAssumeHydrated extends boolean = true,\n>() => ReturnType<typeof useStytchMemberSessionShared<TAssumeHydrated>>;\n\n/**\n * Returns the active Stytch organization.\n * The Stytch SDKs are used for client-side authentication and session management.\n * Check the isInitialized property to determine if the SDK has completed initialization.\n * Check the fromCache property to determine if the organization data is from persistent storage.\n * @example\n * const {organization, isInitialized, fromCache} = useStytchOrganization();\n * if (!isInitialized) {\n *   return <p>Loading...</p>;\n * }\n * return <p>Welcome to {organization.organization_name}</p>;\n */\nexport const useStytchOrganization = useStytchOrganizationShared as <\n  TAssumeHydrated extends boolean = true,\n>() => ReturnType<typeof useStytchOrganizationShared<TAssumeHydrated>>;\n\n/**\n * Determines whether the logged-in member is allowed to perform the specified action on the specified resource.\n * Returns `true` if the member can perform the action, `false` otherwise.\n *\n * If the member is not logged in, this method will always return false.\n * If the resource or action provided are not valid for the configured RBAC policy, this method will return false.\n *\n * Remember - authorization checks for sensitive actions should always occur on the backend as well.\n * @example\n * const { isAuthorized } = useStytchIsAuthorized('documents', 'edit');\n * return <button disabled={!isAuthorized}>Edit</button>\n */\nexport const useStytchIsAuthorized = useStytchIsAuthorizedShared as <TAssumeHydrated extends boolean = false>(\n  resourceId: string,\n  action: string,\n) => ReturnType<typeof useStytchIsAuthorizedShared<TAssumeHydrated>>;\n\nexport const withStytchMember = withStytchMemberShared as <T extends object, TAssumeHydrated extends boolean = false>(\n  Component: ComponentType<\n    T & { stytchMember: Member | null; stytchMemberIsInitialized: boolean; stytchMemberIsFromCache: boolean }\n  >,\n) => ReturnType<typeof withStytchMemberShared<T, TAssumeHydrated>>;\n\nexport const withStytchMemberSession = withStytchMemberSessionShared as <\n  T extends object,\n  TAssumeHydrated extends boolean = false,\n>(\n  Component: ComponentType<\n    T & {\n      stytchMemberSession: MemberSession | null;\n      stytchMemberSessionIsInitialized: boolean;\n      stytchMemberSessionIsFromCache: boolean;\n    }\n  >,\n) => ReturnType<typeof withStytchMemberSessionShared<T, TAssumeHydrated>>;\n\nexport const withStytchOrganization = withStytchOrganizationShared as <\n  T extends object,\n  TAssumeHydrated extends boolean = false,\n>(\n  Component: ComponentType<\n    T & {\n      stytchOrganization: Organization | null;\n      stytchOrganizationIsInitialized: boolean;\n      stytchOrganizationIsFromCache: boolean;\n    }\n  >,\n) => ReturnType<typeof withStytchOrganizationShared<T, TAssumeHydrated>>;\n\nexport interface StytchB2BProviderProps<\n  TProjectConfiguration extends StytchProjectConfigurationInput = Stytch.DefaultProjectConfiguration,\n> {\n  /**\n   * A Stytch client instance, a {@link StytchB2BClient}\n   */\n  stytch: StytchB2BClient<TProjectConfiguration>;\n  /**\n   * When true, the provider will assume that the component will only be\n   * rendered in a browser environment, either in a single-page application or\n   * after completing hydration of a server-rendered application. This allows\n   * cached values to be retrieved from the browser on the first render, meaning\n   * that the `isInitialized` value returned from Stytch hooks will be `true`\n   * starting from the first render.\n   *\n   * When `false`, the provider will defer initialization until after the first\n   * render, and `isInitialized` will initially be `false`.\n   *\n   * If you encounter hydration errors relating to the use of this component,\n   * set this to `false`.\n   *\n   * This value defaults to `true` in `@stytch/react`.\n   */\n  assumeHydrated?: boolean;\n  children?: ReactNode;\n}\n\n/**\n * The Stytch Context Provider.\n * Wrap your application with this component in order to use Stytch everywhere in your app.\n * @example\n * const stytch = createStytchB2BClient('public-token-<find yours in the stytch dashboard>')\n *\n * ReactDOM.render(\n *   <StytchB2BProvider stytch={stytch}>\n *     <App />\n *   </StytchProvider>,\n *   document.getElementById('root'),\n * )\n */\nexport const StytchB2BProvider = <\n  TProjectConfiguration extends StytchProjectConfigurationInput = Stytch.DefaultProjectConfiguration,\n>({\n  stytch,\n  children,\n  assumeHydrated = true,\n}: StytchB2BProviderProps<TProjectConfiguration>): JSX.Element => (\n  <StytchB2BProviderShared stytch={stytch} assumeHydrated={assumeHydrated}>\n    {children}\n  </StytchB2BProviderShared>\n);\n"],"names":["useStytchMember","useStytchMemberShared","useStytchMemberSession","useStytchMemberSessionShared","useStytchOrganization","useStytchOrganizationShared","useStytchIsAuthorized","useStytchIsAuthorizedShared","withStytchMember","withStytchMemberShared","withStytchMemberSession","withStytchMemberSessionShared","withStytchOrganization","withStytchOrganizationShared","StytchB2BProvider","stytch","children","assumeHydrated","React","StytchB2BProviderShared"],"mappings":";;;;AAoBA;;;;;;;;;;;IAYO,MAAMA,eAAAA,GAAkBC;AAI/B;;;;;;;;;;;;;;;IAgBO,MAAMC,sBAAAA,GAAyBC;AAItC;;;;;;;;;;;IAYO,MAAMC,qBAAAA,GAAwBC;AAIrC;;;;;;;;;;;IAYO,MAAMC,qBAAAA,GAAwBC;AAK9B,MAAMC,mBAAmBC;AAMzB,MAAMC,0BAA0BC;AAahC,MAAMC,yBAAyBC;AAwCtC;;;;;;;;;;;;AAYC,IACM,MAAMC,iBAAAA,GAAoB,CAE/B,EACAC,MAAM,EACNC,QAAQ,EACRC,cAAAA,GAAiB,IAAI,EACyB,iBAC9CC,cAAA,CAAA,aAAA,CAACC,mBAAAA,EAAAA;QAAwBJ,MAAAA,EAAQA,MAAAA;QAAQE,cAAAA,EAAgBA;OACtDD,QAAAA;;;;"}

package/dist/esm/packages/core/src/public/b2b/ui.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"ui.mjs","sources":["../../../../../../../../core/src/public/b2b/ui.ts"],"sourcesContent":["import { Values } from '../../utils';\n\n/**\n * The authentication methods we support through our UI.\n * Currently we support `emailMagicLinks`, `emailOtp`, `sso`, `passwords`, and `oauth`.\n */\n\nexport const AuthFlowType = {\n  Discovery: 'Discovery',\n  Organization: 'Organization',\n  PasswordReset: 'PasswordReset',\n} as const;\n\nexport type AuthFlowType = Values<typeof AuthFlowType>;\n\nexport const RedirectURLType = {\n  ResetPassword: 'reset_password',\n} as const;\n\nexport type RedirectURLType = Values<typeof RedirectURLType>;\n\n/**\n * The OAuth providers we support in our B2B OAuth product.\n */\nexport const B2BOAuthProviders = {\n  Google: 'google',\n  Microsoft: 'microsoft',\n  HubSpot: 'hubspot',\n  Slack: 'slack',\n  GitHub: 'github',\n} as const;\nexport type B2BOAuthProviders = Values<typeof B2BOAuthProviders>;\n\n/**\n * The options for email magic links. This is used if you've enabled the `emailMagicLinks` product\n * in your configuration.\n */\n\nexport type B2BEmailMagicLinksOptions = {\n  loginRedirectURL?: string;\n  signupRedirectURL?: string;\n  discoveryRedirectURL?: string;\n  loginTemplateId?: string;\n  signupTemplateId?: string;\n  /**\n   * @param domainHint - An optional hint indicating what domain the email will be sent from.\n   * This field is only required if your project uses more than one custom domain to send emails.\n   */\n  domainHint?: string;\n  locale?: string;\n};\n\n/**\n * The options for SSO. This is used if you've enabled the `sso` product\n * in your configuration.\n */\n\nexport type B2BSSOOptions = {\n  loginRedirectURL?: string;\n  signupRedirectURL?: string;\n};\n\n/**\n * The options for OAuth. This is required if you've enabled the `oauth` product\n * in your configuration.\n */\n\nexport type B2BOAuthOptions = {\n  loginRedirectURL?: string;\n  signupRedirectURL?: string;\n  discoveryRedirectURL?: string;\n  /** @deprecated Use customScopes in B2BOAuthProviderConfig instead */\n  customScopes?: string[];\n  providers: B2BOAuthProviderConfig[];\n  /** @deprecated Use providerParams in B2BOAuthProviderConfig instead */\n  providerParams?: Record<string, string>;\n  locale?: string;\n};\n\n/**\n * Details about the OAuth provider you wish to use. Each B2BOAuthProviderConfig object can be either a plain\n * B2BOAuthProviders string (e.g. 'google'), or  an object with a type key that determines the type of provider. For\n * Google OAuth, you can optionally specify the one_tap property to display Google One Tap.\n */\nexport type B2BOAuthProviderConfig =\n  | B2BOAuthProviders\n  | {\n      type: typeof B2BOAuthProviders.Google;\n      customScopes?: string[];\n      providerParams?: Record<string, string>;\n\n      one_tap: boolean;\n      /**\n       * Whether to cancel the One Tap prompt when the user taps outside of it.\n       * This is only applicable if one_tap is true.\n       */\n      cancel_on_tap_outside?: boolean;\n    }\n  | {\n      type: Exclude<B2BOAuthProviders, typeof B2BOAuthProviders.Google>;\n      customScopes?: string[];\n      providerParams?: Record<string, string>;\n    };\n\n/**\n * The options for Passwords. This is used if you've enabled the `passwords` product\n * in your configuration.\n */\n\nexport type B2BPasswordOptions = {\n  loginRedirectURL?: string;\n  resetPasswordRedirectURL?: string;\n  resetPasswordExpirationMinutes?: number;\n  resetPasswordTemplateId?: string;\n  discoveryRedirectURL?: string;\n  verifyEmailTemplateId?: string;\n  locale?: string;\n};\n\nexport type B2BEmailOTPOptions = {\n  loginTemplateId?: string;\n  signupTemplateId?: string;\n  locale?: string;\n};\n\nexport type B2BSMSOTPOptions = {\n  locale?: string;\n};\n\nexport type DirectLoginForSingleMembershipConfig = {\n  /**\n   * Whether or not direct login for single membership is enabled.\n   */\n  status: boolean;\n  /**\n   * If enabled, logs user in directly even if they have pending invite to a different organization\n   */\n  ignoreInvites: boolean;\n  /**\n   * If enabled, logs user in directly even if they have organizations they could join via JIT provisioning\n   */\n  ignoreJitProvisioning: boolean;\n};\n\nexport const B2BMFAProducts = {\n  smsOtp: 'smsOtp',\n  totp: 'totp',\n} as const;\nexport type B2BMFAProducts = Values<typeof B2BMFAProducts>;\n"],"names":["AuthFlowType","Discovery","Organization","PasswordReset","RedirectURLType","ResetPassword","B2BOAuthProviders","Google","Microsoft","HubSpot","Slack","GitHub","B2BMFAProducts","smsOtp","totp"],"mappings":"AAEA;;;UAKaA,YAAAA,GAAe;IAC1BC,SAAAA,EAAW,WAAA;IACXC,YAAAA,EAAc,cAAA;IACdC,aAAAA,EAAe;AACjB;MAIaC,eAAAA,GAAkB;IAC7BC,aAAAA,EAAe;AACjB;AAIA;;UAGaC,iBAAAA,GAAoB;IAC/BC,MAAAA,EAAQ,QAAA;IACRC,SAAAA,EAAW,WAAA;IACXC,OAAAA,EAAS,SAAA;IACTC,KAAAA,EAAO,OAAA;IACPC,MAAAA,EAAQ;AACV;MAkHaC,cAAAA,GAAiB;IAC5BC,MAAAA,EAAQ,QAAA;IACRC,IAAAA,EAAM;AACR;;;;"}
+{"version":3,"file":"ui.mjs","sources":["../../../../../../../../core/src/public/b2b/ui.ts"],"sourcesContent":["import { Values } from '../../utils';\n\n/**\n * The authentication methods we support through our UI.\n * Currently we support `emailMagicLinks`, `emailOtp`, `sso`, `passwords`, and `oauth`.\n */\n\nexport const AuthFlowType = {\n  Discovery: 'Discovery',\n  Organization: 'Organization',\n  PasswordReset: 'PasswordReset',\n} as const;\n\nexport type AuthFlowType = Values<typeof AuthFlowType>;\n\nexport const RedirectURLType = {\n  ResetPassword: 'reset_password',\n} as const;\n\nexport type RedirectURLType = Values<typeof RedirectURLType>;\n\n/**\n * The OAuth providers we support in our B2B OAuth product.\n */\nexport const B2BOAuthProviders = {\n  Google: 'google',\n  Microsoft: 'microsoft',\n  HubSpot: 'hubspot',\n  Slack: 'slack',\n  GitHub: 'github',\n} as const;\nexport type B2BOAuthProviders = Values<typeof B2BOAuthProviders>;\n\n/**\n * The options for email magic links. This is used if you've enabled the `emailMagicLinks` product\n * in your configuration.\n */\n\nexport type B2BEmailMagicLinksOptions = {\n  loginRedirectURL?: string;\n  signupRedirectURL?: string;\n  discoveryRedirectURL?: string;\n  loginTemplateId?: string;\n  signupTemplateId?: string;\n  /**\n   * @param domainHint - An optional hint indicating what domain the email will be sent from.\n   * This field is only required if your project uses more than one custom domain to send emails.\n   */\n  domainHint?: string;\n  locale?: string;\n};\n\n/**\n * The options for SSO. This is used if you've enabled the `sso` product\n * in your configuration.\n */\n\nexport type B2BSSOOptions = {\n  loginRedirectURL?: string;\n  signupRedirectURL?: string;\n};\n\n/**\n * The options for OAuth. This is required if you've enabled the `oauth` product\n * in your configuration.\n */\n\nexport type B2BOAuthOptions = {\n  loginRedirectURL?: string;\n  signupRedirectURL?: string;\n  discoveryRedirectURL?: string;\n  /** @deprecated Use customScopes in B2BOAuthProviderConfig instead */\n  customScopes?: string[];\n  providers: B2BOAuthProviderConfig[];\n  /** @deprecated Use providerParams in B2BOAuthProviderConfig instead */\n  providerParams?: Record<string, string>;\n  locale?: string;\n};\n\n/**\n * Details about the OAuth provider you wish to use. Each B2BOAuthProviderConfig object can be either a plain\n * B2BOAuthProviders string (e.g. 'google'), or  an object with a type key that determines the type of provider. For\n * Google OAuth, you can optionally specify the one_tap property to display Google One Tap.\n */\nexport type B2BOAuthProviderConfig =\n  | B2BOAuthProviders\n  | {\n      type: typeof B2BOAuthProviders.Google;\n      customScopes?: string[];\n      providerParams?: Record<string, string>;\n\n      one_tap?: boolean;\n      /**\n       * Whether to cancel the One Tap prompt when the user taps outside of it.\n       * This is only applicable if one_tap is true.\n       */\n      cancel_on_tap_outside?: boolean;\n    }\n  | {\n      type: Exclude<B2BOAuthProviders, typeof B2BOAuthProviders.Google>;\n      customScopes?: string[];\n      providerParams?: Record<string, string>;\n    };\n\n/**\n * The options for Passwords. This is used if you've enabled the `passwords` product\n * in your configuration.\n */\n\nexport type B2BPasswordOptions = {\n  loginRedirectURL?: string;\n  resetPasswordRedirectURL?: string;\n  resetPasswordExpirationMinutes?: number;\n  resetPasswordTemplateId?: string;\n  discoveryRedirectURL?: string;\n  verifyEmailTemplateId?: string;\n  locale?: string;\n};\n\nexport type B2BEmailOTPOptions = {\n  loginTemplateId?: string;\n  signupTemplateId?: string;\n  locale?: string;\n};\n\nexport type B2BSMSOTPOptions = {\n  locale?: string;\n};\n\nexport type DirectLoginForSingleMembershipConfig = {\n  /**\n   * Whether or not direct login for single membership is enabled.\n   */\n  status: boolean;\n  /**\n   * If enabled, logs user in directly even if they have pending invite to a different organization\n   */\n  ignoreInvites: boolean;\n  /**\n   * If enabled, logs user in directly even if they have organizations they could join via JIT provisioning\n   */\n  ignoreJitProvisioning: boolean;\n};\n\nexport const B2BMFAProducts = {\n  smsOtp: 'smsOtp',\n  totp: 'totp',\n} as const;\nexport type B2BMFAProducts = Values<typeof B2BMFAProducts>;\n"],"names":["AuthFlowType","Discovery","Organization","PasswordReset","RedirectURLType","ResetPassword","B2BOAuthProviders","Google","Microsoft","HubSpot","Slack","GitHub","B2BMFAProducts","smsOtp","totp"],"mappings":"AAEA;;;UAKaA,YAAAA,GAAe;IAC1BC,SAAAA,EAAW,WAAA;IACXC,YAAAA,EAAc,cAAA;IACdC,aAAAA,EAAe;AACjB;MAIaC,eAAAA,GAAkB;IAC7BC,aAAAA,EAAe;AACjB;AAIA;;UAGaC,iBAAAA,GAAoB;IAC/BC,MAAAA,EAAQ,QAAA;IACRC,SAAAA,EAAW,WAAA;IACXC,OAAAA,EAAS,SAAA;IACTC,KAAAA,EAAO,OAAA;IACPC,MAAAA,EAAQ;AACV;MAkHaC,cAAAA,GAAiB;IAC5BC,MAAAA,EAAQ,QAAA;IACRC,IAAAA,EAAM;AACR;;;;"}

package/dist/esm/packages/web/src/adminPortal/utils/theme.mjs

@@ -1,4 +1,4 @@
-import merge from '../../../../../_virtual/index4.mjs';
+import merge from '../../../../../_virtual/index3.mjs';
 import 'react';
 import createTheme from '../../../../../node_modules/@mui/material/styles/createTheme.mjs';
 import selectClasses from '../../../../../node_modules/@mui/material/Select/selectClasses.mjs';

package/dist/esm/packages/web/src/ui/b2b/App.mjs

@@ -13,7 +13,7 @@ import { IDPConsentScreen } from './screens/IDPConsent.mjs';
  * Wrapper to add default organizationProducts value. This is done to preserve the ability for a future
  * component that doesn't do this, allowing B2B products to be properly tree-shaken (which is also why this is currently
  * in a completely different file)
- */ const AppContainer = ({ config, ...props })=>{
+ */ const AppContainer = ({ config, styles, ...props })=>{
     const internalConfig = {
         ...config,
         organizationProducts: Object.values(B2BProducts)
@@ -23,7 +23,7 @@ import { IDPConsentScreen } from './screens/IDPConsent.mjs';
         ...props
     });
 };
-const B2BIDPContainer = ({ client, presentation, callbacks, strings, getIDPConsentManifest, trustedAuthTokenParams })=>{
+const B2BIDPContainer = ({ client, presentation, callbacks, strings, getIDPConsentManifest, trustedAuthTokenParams, styles })=>{
     const presentationValue = usePresentationWithDefault(presentation, false, []);
     useEffect(()=>{
         readB2BInternals(client).bootstrap.getAsync().then((data)=>{

package/dist/esm/packages/web/src/ui/b2b/App.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"App.mjs","sources":["../../../../../../../../web/src/ui/b2b/App.tsx"],"sourcesContent":["import React, { useEffect } from 'react';\nimport { StytchProjectConfigurationInput } from '@stytch/core/public';\nimport { B2BIDPSDKConfig, B2BSDKConfig, StytchB2BExtendedLoginConfig } from '../../types';\nimport { InternalAppContainer } from './InternalAppContainer';\nimport * as B2BProducts from './B2BProducts';\nimport { PresentationContext, usePresentationWithDefault } from '../components/PresentationConfig';\nimport { readB2BInternals } from '../../utils/internal';\nimport { DEFAULT_STATE, GlobalContextProvider } from './GlobalContextProvider';\nimport { IDPContextProvider } from '../components/organisms/IDPContextProvider';\nimport { I18nProviderWrapper } from '../components/atoms/I18nProviderWrapper';\nimport { messages } from '../../messages/b2b/en';\nimport { IDPConsentScreen } from './screens/IDPConsent';\n\n/**\n * Wrapper to add default organizationProducts value. This is done to preserve the ability for a future\n * component that doesn't do this, allowing B2B products to be properly tree-shaken (which is also why this is currently\n * in a completely different file)\n */\nexport const AppContainer = ({ config, ...props }: B2BSDKConfig<StytchProjectConfigurationInput>) => {\n  const internalConfig = {\n    ...config,\n    organizationProducts: Object.values(B2BProducts),\n  };\n\n  return <InternalAppContainer config={internalConfig} {...props}></InternalAppContainer>;\n};\n\nexport const B2BIDPContainer = <TProjectConfiguration extends StytchProjectConfigurationInput>({\n  client,\n  presentation,\n  callbacks,\n  strings,\n  getIDPConsentManifest,\n  trustedAuthTokenParams,\n}: B2BIDPSDKConfig<TProjectConfiguration>) => {\n  const presentationValue = usePresentationWithDefault(presentation, false, []);\n\n  useEffect(() => {\n    readB2BInternals(client)\n      .bootstrap.getAsync()\n      .then((data) => {\n        readB2BInternals(client).networkClient.logEvent({\n          name: 'render_b2b_idp_screen',\n          details: { bootstrap: data },\n        });\n      });\n  }, [client]);\n\n  return (\n    <GlobalContextProvider\n      client={client}\n      config={{} as StytchB2BExtendedLoginConfig}\n      callbacks={callbacks}\n      initialState={DEFAULT_STATE}\n    >\n      <IDPContextProvider consentManifestGenerator={getIDPConsentManifest} authTokenParams={trustedAuthTokenParams}>\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":["AppContainer","config","props","internalConfig","organizationProducts","Object","values","B2BProducts","React","InternalAppContainer","B2BIDPContainer","client","presentation","callbacks","strings","getIDPConsentManifest","trustedAuthTokenParams","presentationValue","usePresentationWithDefault","useEffect","readB2BInternals","bootstrap","getAsync","then","data","networkClient","logEvent","name","details","GlobalContextProvider","initialState","DEFAULT_STATE","IDPContextProvider","consentManifestGenerator","authTokenParams","PresentationContext","Provider","value","I18nProviderWrapper","messages","overrides","IDPConsentScreen"],"mappings":";;;;;;;;;;;AAaA;;;;UAKaA,YAAAA,GAAe,CAAC,EAAEC,MAAM,EAAE,GAAGC,KAAAA,EAAsD,GAAA;AAC9F,IAAA,MAAMC,cAAAA,GAAiB;AACrB,QAAA,GAAGF,MAAM;QACTG,oBAAAA,EAAsBC,MAAAA,CAAOC,MAAM,CAACC,WAAAA;AACtC,KAAA;AAEA,IAAA,qBAAOC,cAAA,CAAA,aAAA,CAACC,oBAAAA,EAAAA;QAAqBR,MAAAA,EAAQE,cAAAA;AAAiB,QAAA,GAAGD;;AAC3D;AAEO,MAAMQ,eAAAA,GAAkB,CAAgE,EAC7FC,MAAM,EACNC,YAAY,EACZC,SAAS,EACTC,OAAO,EACPC,qBAAqB,EACrBC,sBAAsB,EACiB,GAAA;AACvC,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,uBAAA;gBACNC,OAAAA,EAAS;oBAAEP,SAAAA,EAAWG;AAAK;AAC7B,aAAA,CAAA;AACF,QAAA,CAAA,CAAA;IACJ,CAAA,EAAG;AAACb,QAAAA;AAAO,KAAA,CAAA;AAEX,IAAA,qBACEH,cAAA,CAAA,aAAA,CAACqB,qBAAAA,EAAAA;QACClB,MAAAA,EAAQA,MAAAA;AACRV,QAAAA,MAAAA,EAAQ,EAAC;QACTY,SAAAA,EAAWA,SAAAA;QACXiB,YAAAA,EAAcC;qBAEdvB,cAAA,CAAA,aAAA,CAACwB,kBAAAA,EAAAA;QAAmBC,wBAAAA,EAA0BlB,qBAAAA;QAAuBmB,eAAAA,EAAiBlB;AACpF,KAAA,gBAAAR,cAAA,CAAA,aAAA,CAAC2B,oBAAoBC,QAAQ,EAAA;QAACC,KAAAA,EAAOpB;qBACnCT,cAAA,CAAA,aAAA,CAAC8B,mBAAAA,EAAAA;QAAoBC,QAAAA,EAAUA,QAAAA;QAAUC,SAAAA,EAAW1B;qBAClDN,cAAA,CAAA,aAAA,CAACiC,gBAAAA,EAAAA,IAAAA,CAAAA,CAAAA,CAAAA,CAAAA,CAAAA;AAMb;;;;"}
+{"version":3,"file":"App.mjs","sources":["../../../../../../../../web/src/ui/b2b/App.tsx"],"sourcesContent":["import React, { useEffect } from 'react';\nimport { StytchProjectConfigurationInput } from '@stytch/core/public';\nimport { B2BIDPSDKConfig, B2BSDKConfig, DeprecatedSDKConfig, StytchB2BExtendedLoginConfig } from '../../types';\nimport { InternalAppContainer } from './InternalAppContainer';\nimport * as B2BProducts from './B2BProducts';\nimport { PresentationContext, usePresentationWithDefault } from '../components/PresentationConfig';\nimport { readB2BInternals } from '../../utils/internal';\nimport { DEFAULT_STATE, GlobalContextProvider } from './GlobalContextProvider';\nimport { IDPContextProvider } from '../components/organisms/IDPContextProvider';\nimport { I18nProviderWrapper } from '../components/atoms/I18nProviderWrapper';\nimport { messages } from '../../messages/b2b/en';\nimport { IDPConsentScreen } from './screens/IDPConsent';\nimport { logger, RUN_IN_DEV } from '@stytch/core';\n\n/**\n * Wrapper to add default organizationProducts value. This is done to preserve the ability for a future\n * component that doesn't do this, allowing B2B products to be properly tree-shaken (which is also why this is currently\n * in a completely different file)\n */\nexport const AppContainer = ({\n  config,\n  styles,\n  ...props\n}: B2BSDKConfig<StytchProjectConfigurationInput> & DeprecatedSDKConfig) => {\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://staging.stytch.com/docs/api-reference/b2b/frontend-sdks/react/upgrade-guide',\n      );\n    }\n  });\n\n  const internalConfig = {\n    ...config,\n    organizationProducts: Object.values(B2BProducts),\n  };\n\n  return <InternalAppContainer config={internalConfig} {...props}></InternalAppContainer>;\n};\n\nexport const B2BIDPContainer = <TProjectConfiguration extends StytchProjectConfigurationInput>({\n  client,\n  presentation,\n  callbacks,\n  strings,\n  getIDPConsentManifest,\n  trustedAuthTokenParams,\n  styles,\n}: B2BIDPSDKConfig<TProjectConfiguration> & DeprecatedSDKConfig) => {\n  const presentationValue = usePresentationWithDefault(presentation, false, []);\n\n  useEffect(() => {\n    readB2BInternals(client)\n      .bootstrap.getAsync()\n      .then((data) => {\n        readB2BInternals(client).networkClient.logEvent({\n          name: 'render_b2b_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://staging.stytch.com/docs/api-reference/b2b/frontend-sdks/react/upgrade-guide',\n      );\n    }\n  });\n\n  return (\n    <GlobalContextProvider\n      client={client}\n      config={{} as StytchB2BExtendedLoginConfig}\n      callbacks={callbacks}\n      initialState={DEFAULT_STATE}\n    >\n      <IDPContextProvider consentManifestGenerator={getIDPConsentManifest} authTokenParams={trustedAuthTokenParams}>\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":["AppContainer","config","styles","props","internalConfig","organizationProducts","Object","values","B2BProducts","React","InternalAppContainer","B2BIDPContainer","client","presentation","callbacks","strings","getIDPConsentManifest","trustedAuthTokenParams","presentationValue","usePresentationWithDefault","useEffect","readB2BInternals","bootstrap","getAsync","then","data","networkClient","logEvent","name","details","GlobalContextProvider","initialState","DEFAULT_STATE","IDPContextProvider","consentManifestGenerator","authTokenParams","PresentationContext","Provider","value","I18nProviderWrapper","messages","overrides","IDPConsentScreen"],"mappings":";;;;;;;;;;;AAcA;;;;IAKO,MAAMA,YAAAA,GAAe,CAAC,EAC3BC,MAAM,EACNC,MAAM,EACN,GAAGC,KAAAA,EACiE,GAAA;AAUpE,IAAA,MAAMC,cAAAA,GAAiB;AACrB,QAAA,GAAGH,MAAM;QACTI,oBAAAA,EAAsBC,MAAAA,CAAOC,MAAM,CAACC,WAAAA;AACtC,KAAA;AAEA,IAAA,qBAAOC,cAAA,CAAA,aAAA,CAACC,oBAAAA,EAAAA;QAAqBT,MAAAA,EAAQG,cAAAA;AAAiB,QAAA,GAAGD;;AAC3D;MAEaQ,eAAAA,GAAkB,CAAgE,EAC7FC,MAAM,EACNC,YAAY,EACZC,SAAS,EACTC,OAAO,EACPC,qBAAqB,EACrBC,sBAAsB,EACtBf,MAAM,EACuD,GAAA;AAC7D,IAAA,MAAMgB,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,uBAAA;gBACNC,OAAAA,EAAS;oBAAEP,SAAAA,EAAWG;AAAK;AAC7B,aAAA,CAAA;AACF,QAAA,CAAA,CAAA;KACJ,EAAG;AAACb,QAAAA;AAAO,KAAA,CAAA;AAWX,IAAA,qBACEH,cAAA,CAAA,aAAA,CAACqB,qBAAAA,EAAAA;QACClB,MAAAA,EAAQA,MAAAA;AACRX,QAAAA,MAAAA,EAAQ,EAAC;QACTa,SAAAA,EAAWA,SAAAA;QACXiB,YAAAA,EAAcC;qBAEdvB,cAAA,CAAA,aAAA,CAACwB,kBAAAA,EAAAA;QAAmBC,wBAAAA,EAA0BlB,qBAAAA;QAAuBmB,eAAAA,EAAiBlB;AACpF,KAAA,gBAAAR,cAAA,CAAA,aAAA,CAAC2B,oBAAoBC,QAAQ,EAAA;QAACC,KAAAA,EAAOpB;qBACnCT,cAAA,CAAA,aAAA,CAAC8B,mBAAAA,EAAAA;QAAoBC,QAAAA,EAAUA,QAAAA;QAAUC,SAAAA,EAAW1B;qBAClDN,cAAA,CAAA,aAAA,CAACiC,gBAAAA,EAAAA,IAAAA,CAAAA,CAAAA,CAAAA,CAAAA,CAAAA;AAMb;;;;"}

package/dist/esm/packages/web/src/ui/b2b/components/Icons.mjs

@@ -8,6 +8,7 @@ import { MicrosoftIcon } from '../../../assets/logo-color/Microsoft.mjs';
 import { OktaIcon } from '../../../assets/logo-color/Okta.mjs';
 import { OutlookIcon } from '../../../assets/logo-color/Outlook.mjs';
 import { SlackIcon } from '../../../assets/logo-color/Slack.mjs';
+import { YahooIcon } from '../../../assets/logo-color/Yahoo.mjs';
 
 const oauthIcons = {
     google: GoogleIcon,
@@ -23,7 +24,8 @@ const ssoIcons = {
 };
 const emailIcons = {
     gmail: GmailIcon,
-    outlook: OutlookIcon
+    outlook: OutlookIcon,
+    yahoo: YahooIcon
 };
 
 export { emailIcons, oauthIcons, ssoIcons };

package/dist/esm/packages/web/src/ui/b2b/components/Icons.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Icons.mjs","sources":["../../../../../../../../../web/src/ui/b2b/components/Icons.ts"],"sourcesContent":["import {\n  GithubIcon,\n  HubspotIcon,\n  SlackIcon,\n  GmailIcon,\n  GoogleIcon,\n  MicrosoftIcon,\n  OktaIcon,\n  OutlookIcon,\n} from '../../../assets/logo-color';\n\nexport const oauthIcons = {\n  google: GoogleIcon,\n  microsoft: MicrosoftIcon,\n  hubspot: HubspotIcon,\n  slack: SlackIcon,\n  github: GithubIcon,\n};\n\nexport const ssoIcons = {\n  google: GoogleIcon,\n  microsoft: MicrosoftIcon,\n  okta: OktaIcon,\n};\n\nexport const emailIcons = {\n  gmail: GmailIcon,\n  outlook: OutlookIcon,\n};\n\nexport type IconNames =\n  | keyof typeof oauthIcons //\n  | keyof typeof ssoIcons\n  | keyof typeof emailIcons;\n"],"names":["oauthIcons","google","GoogleIcon","microsoft","MicrosoftIcon","hubspot","HubspotIcon","slack","SlackIcon","github","GithubIcon","ssoIcons","okta","OktaIcon","emailIcons","gmail","GmailIcon","outlook","OutlookIcon"],"mappings":";;;;;;;;;;;MAWaA,UAAAA,GAAa;IACxBC,MAAAA,EAAQC,UAAAA;IACRC,SAAAA,EAAWC,aAAAA;IACXC,OAAAA,EAASC,WAAAA;IACTC,KAAAA,EAAOC,SAAAA;IACPC,MAAAA,EAAQC;AACV;MAEaC,QAAAA,GAAW;IACtBV,MAAAA,EAAQC,UAAAA;IACRC,SAAAA,EAAWC,aAAAA;IACXQ,IAAAA,EAAMC;AACR;MAEaC,UAAAA,GAAa;IACxBC,KAAAA,EAAOC,SAAAA;IACPC,OAAAA,EAASC;AACX;;;;"}
+{"version":3,"file":"Icons.mjs","sources":["../../../../../../../../../web/src/ui/b2b/components/Icons.ts"],"sourcesContent":["import {\n  GithubIcon,\n  HubspotIcon,\n  SlackIcon,\n  GmailIcon,\n  GoogleIcon,\n  MicrosoftIcon,\n  OktaIcon,\n  OutlookIcon,\n  YahooIcon,\n} from '../../../assets/logo-color';\n\nexport const oauthIcons = {\n  google: GoogleIcon,\n  microsoft: MicrosoftIcon,\n  hubspot: HubspotIcon,\n  slack: SlackIcon,\n  github: GithubIcon,\n};\n\nexport const ssoIcons = {\n  google: GoogleIcon,\n  microsoft: MicrosoftIcon,\n  okta: OktaIcon,\n};\n\nexport const emailIcons = {\n  gmail: GmailIcon,\n  outlook: OutlookIcon,\n  yahoo: YahooIcon,\n};\n\nexport type IconNames =\n  | keyof typeof oauthIcons //\n  | keyof typeof ssoIcons\n  | keyof typeof emailIcons;\n"],"names":["oauthIcons","google","GoogleIcon","microsoft","MicrosoftIcon","hubspot","HubspotIcon","slack","SlackIcon","github","GithubIcon","ssoIcons","okta","OktaIcon","emailIcons","gmail","GmailIcon","outlook","OutlookIcon","yahoo","YahooIcon"],"mappings":";;;;;;;;;;;;MAYaA,UAAAA,GAAa;IACxBC,MAAAA,EAAQC,UAAAA;IACRC,SAAAA,EAAWC,aAAAA;IACXC,OAAAA,EAASC,WAAAA;IACTC,KAAAA,EAAOC,SAAAA;IACPC,MAAAA,EAAQC;AACV;MAEaC,QAAAA,GAAW;IACtBV,MAAAA,EAAQC,UAAAA;IACRC,SAAAA,EAAWC,aAAAA;IACXQ,IAAAA,EAAMC;AACR;MAEaC,UAAAA,GAAa;IACxBC,KAAAA,EAAOC,SAAAA;IACPC,OAAAA,EAASC,WAAAA;IACTC,KAAAA,EAAOC;AACT;;;;"}

package/dist/esm/packages/web/src/ui/b2b/components/OAuthB2BButton.mjs

@@ -2,7 +2,7 @@ import React__default from 'react';
 import { useLingui } from '../../../../../../node_modules/@lingui/react/dist/index.mjs';
 import { useStytch, useGlobalReducer } from '../GlobalContextProvider.mjs';
 import Button from '../../components/atoms/Button.mjs';
-import { usePresentation } from '../../components/PresentationConfig.mjs';
+import { usePresentation, getButtonId } from '../../components/PresentationConfig.mjs';
 import { B2BOAuthProviders } from '../../../../../core/src/public/b2b/ui.mjs';
 
 const providerInfo = {
@@ -41,7 +41,9 @@ const OAuthB2BButton = ({ providerType, loginRedirectUrl, signupRedirectUrl, dis
     const { i18n: $__i18n, _: $__ } = useLingui();
     const stytchClient = useStytch();
     const [state] = useGlobalReducer();
-    const iconRegistry = usePresentation().iconRegistry;
+    const presentation = usePresentation();
+    const iconRegistry = presentation.iconRegistry;
+    const id = getButtonId(`sso-${providerType}`, presentation.options);
     const provider = providerInfo[providerType];
     let label = providerType;
     let icon = null;
@@ -73,7 +75,8 @@ const OAuthB2BButton = ({ providerType, loginRedirectUrl, signupRedirectUrl, dis
     return /*#__PURE__*/ React__default.createElement(Button, {
         onClick: onButtonClick,
         variant: "outline",
-        icon: icon
+        icon: icon,
+        id: id
     }, label);
 };
 

package/dist/esm/packages/web/src/ui/b2b/components/OAuthB2BButton.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"OAuthB2BButton.mjs","sources":["../../../../../../../../../web/src/ui/b2b/components/OAuthB2BButton.tsx"],"sourcesContent":["import React from 'react';\nimport { B2BOAuthProviders } from '@stytch/core/public';\nimport { msg } from '@lingui/core/macro';\nimport { useLingui } from '@lingui/react/macro';\nimport { MessageDescriptor } from '@lingui/core';\nimport { useGlobalReducer, useStytch } from '../GlobalContextProvider';\nimport Button from '../../components/atoms/Button';\nimport { usePresentation } from '../../components/PresentationConfig';\nimport { IconRegistry } from '../../components/IconRegistry';\nimport type { oauthIcons } from './Icons';\n\ntype OauthIconName = keyof typeof oauthIcons;\n\ninterface OAuthProviderInfo {\n  messageDescriptor: MessageDescriptor;\n}\n\nconst providerInfo: Record<B2BOAuthProviders, OAuthProviderInfo> = {\n  [B2BOAuthProviders.Google]: {\n    messageDescriptor: msg({ id: 'oauth.continueWithGoogle', message: 'Continue with Google' }),\n  },\n  [B2BOAuthProviders.Microsoft]: {\n    messageDescriptor: msg({ id: 'oauth.continueWithMicrosoft', message: 'Continue with Microsoft' }),\n  },\n  [B2BOAuthProviders.HubSpot]: {\n    messageDescriptor: msg({ id: 'oauth.continueWithHubSpot', message: 'Continue with HubSpot' }),\n  },\n  [B2BOAuthProviders.Slack]: {\n    messageDescriptor: msg({ id: 'oauth.continueWithSlack', message: 'Continue with Slack' }),\n  },\n  [B2BOAuthProviders.GitHub]: {\n    messageDescriptor: msg({ id: 'oauth.continueWithGitHub', message: 'Continue with GitHub' }),\n  },\n};\n\nexport type OauthB2BButtonProps = {\n  providerType: B2BOAuthProviders;\n  loginRedirectUrl?: string;\n  signupRedirectUrl?: string;\n  discoveryRedirectUrl?: string;\n  customScopes?: string[];\n  providerParams?: Record<string, string>;\n  onSuccess?: () => void;\n};\n\nexport const OAuthB2BButton = ({\n  providerType,\n  loginRedirectUrl,\n  signupRedirectUrl,\n  discoveryRedirectUrl,\n  customScopes,\n  providerParams,\n  onSuccess,\n}: OauthB2BButtonProps) => {\n  const { t } = useLingui();\n  const stytchClient = useStytch();\n  const [state] = useGlobalReducer();\n  const iconRegistry: IconRegistry<OauthIconName> = 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    const Icon = iconRegistry[providerType];\n    label = t(messageDescriptor);\n    icon = <Icon />;\n  }\n\n  const onButtonClick = async () => {\n    const providerClient = stytchClient.oauth[providerType];\n\n    if (state.flowState.organization) {\n      await providerClient.start({\n        login_redirect_url: loginRedirectUrl,\n        signup_redirect_url: signupRedirectUrl,\n        custom_scopes: customScopes,\n        organization_id: state.flowState.organization.organization_id,\n        provider_params: providerParams,\n      });\n    } else {\n      await providerClient.discovery.start({\n        discovery_redirect_url: discoveryRedirectUrl,\n        custom_scopes: customScopes,\n        provider_params: providerParams,\n      });\n    }\n\n    onSuccess?.();\n  };\n\n  return (\n    <Button onClick={onButtonClick} variant=\"outline\" icon={icon}>\n      {label}\n    </Button>\n  );\n};\n"],"names":["providerInfo","B2BOAuthProviders","Google","messageDescriptor","Microsoft","HubSpot","Slack","GitHub","OAuthB2BButton","providerType","loginRedirectUrl","signupRedirectUrl","discoveryRedirectUrl","customScopes","providerParams","onSuccess","useLingui","stytchClient","useStytch","state","useGlobalReducer","iconRegistry","usePresentation","provider","label","icon","Icon","React","onButtonClick","providerClient","oauth","flowState","organization","start","login_redirect_url","signup_redirect_url","custom_scopes","organization_id","provider_params","discovery","discovery_redirect_url","Button","onClick","variant"],"mappings":";;;;;;;AAiBA,MAAMA,YAAAA,GAA6D;IACjE,CAACC,iBAAAA,CAAkBC,MAAM,GAAG;QAC1BC,iBAAiB,EAAA;;;;AACnB,KAAA;IACA,CAACF,iBAAAA,CAAkBG,SAAS,GAAG;QAC7BD,iBAAiB,EAAA;;;;AACnB,KAAA;IACA,CAACF,iBAAAA,CAAkBI,OAAO,GAAG;QAC3BF,iBAAiB,EAAA;;;;AACnB,KAAA;IACA,CAACF,iBAAAA,CAAkBK,KAAK,GAAG;QACzBH,iBAAiB,EAAA;;;;AACnB,KAAA;IACA,CAACF,iBAAAA,CAAkBM,MAAM,GAAG;QAC1BJ,iBAAiB,EAAA;;;;AACnB;AACF,CAAA;MAYaK,cAAAA,GAAiB,CAAC,EAC7BC,YAAY,EACZC,gBAAgB,EAChBC,iBAAiB,EACjBC,oBAAoB,EACpBC,YAAY,EACZC,cAAc,EACdC,SAAS,EACW,GAAA;AACpB,IAAA,MAAM,EAAA,IAAA,EAAA,OAAA,EAAA,CAAA,EAAA,GAAA,EAAA,GAAQC,SAAAA,EAAAA;AACd,IAAA,MAAMC,YAAAA,GAAeC,SAAAA,EAAAA;IACrB,MAAM,CAACC,MAAM,GAAGC,gBAAAA,EAAAA;IAChB,MAAMC,YAAAA,GAA4CC,kBAAkBD,YAAY;IAEhF,MAAME,QAAAA,GAAWvB,YAAY,CAACS,YAAAA,CAAa;AAC3C,IAAA,IAAIe,KAAAA,GAAgBf,YAAAA;AACpB,IAAA,IAAIgB,IAAAA,GAAO,IAAA;AACX,IAAA,IAAIF,QAAAA,EAAU;QACZ,MAAM,EAAEpB,iBAAiB,EAAE,GAAGoB,QAAAA;QAC9B,MAAMG,IAAAA,GAAOL,YAAY,CAACZ,YAAAA,CAAa;QACvCe,KAAAA,GAAAA,OAAAA,CAAAA,CAAAA,CAAUrB,iBAAAA,CAAAA;AACVsB,QAAAA,IAAAA,iBAAOE,cAAA,CAAA,aAAA,CAACD,IAAAA,EAAAA,IAAAA,CAAAA;AACV,IAAA;AAEA,IAAA,MAAME,aAAAA,GAAgB,UAAA;AACpB,QAAA,MAAMC,cAAAA,GAAiBZ,YAAAA,CAAaa,KAAK,CAACrB,YAAAA,CAAa;AAEvD,QAAA,IAAIU,KAAAA,CAAMY,SAAS,CAACC,YAAY,EAAE;YAChC,MAAMH,cAAAA,CAAeI,KAAK,CAAC;gBACzBC,kBAAAA,EAAoBxB,gBAAAA;gBACpByB,mBAAAA,EAAqBxB,iBAAAA;gBACrByB,aAAAA,EAAevB,YAAAA;AACfwB,gBAAAA,eAAAA,EAAiBlB,KAAAA,CAAMY,SAAS,CAACC,YAAY,CAACK,eAAe;gBAC7DC,eAAAA,EAAiBxB;AACnB,aAAA,CAAA;QACF,CAAA,MAAO;AACL,YAAA,MAAMe,cAAAA,CAAeU,SAAS,CAACN,KAAK,CAAC;gBACnCO,sBAAAA,EAAwB5B,oBAAAA;gBACxBwB,aAAAA,EAAevB,YAAAA;gBACfyB,eAAAA,EAAiBxB;AACnB,aAAA,CAAA;AACF,QAAA;AAEAC,QAAAA,SAAAA,IAAAA;AACF,IAAA,CAAA;AAEA,IAAA,qBACEY,cAAA,CAAA,aAAA,CAACc,MAAAA,EAAAA;QAAOC,OAAAA,EAASd,aAAAA;QAAee,OAAAA,EAAQ,SAAA;QAAUlB,IAAAA,EAAMA;AACrDD,KAAAA,EAAAA,KAAAA,CAAAA;AAGP;;;;"}
+{"version":3,"file":"OAuthB2BButton.mjs","sources":["../../../../../../../../../web/src/ui/b2b/components/OAuthB2BButton.tsx"],"sourcesContent":["import React from 'react';\nimport { B2BOAuthProviders } from '@stytch/core/public';\nimport { msg } from '@lingui/core/macro';\nimport { useLingui } from '@lingui/react/macro';\nimport { MessageDescriptor } from '@lingui/core';\nimport { useGlobalReducer, useStytch } from '../GlobalContextProvider';\nimport Button from '../../components/atoms/Button';\nimport { getButtonId, usePresentation } from '../../components/PresentationConfig';\nimport { IconRegistry } from '../../components/IconRegistry';\nimport type { oauthIcons } from './Icons';\n\ntype OauthIconName = keyof typeof oauthIcons;\n\ninterface OAuthProviderInfo {\n  messageDescriptor: MessageDescriptor;\n}\n\nconst providerInfo: Record<B2BOAuthProviders, OAuthProviderInfo> = {\n  [B2BOAuthProviders.Google]: {\n    messageDescriptor: msg({ id: 'oauth.continueWithGoogle', message: 'Continue with Google' }),\n  },\n  [B2BOAuthProviders.Microsoft]: {\n    messageDescriptor: msg({ id: 'oauth.continueWithMicrosoft', message: 'Continue with Microsoft' }),\n  },\n  [B2BOAuthProviders.HubSpot]: {\n    messageDescriptor: msg({ id: 'oauth.continueWithHubSpot', message: 'Continue with HubSpot' }),\n  },\n  [B2BOAuthProviders.Slack]: {\n    messageDescriptor: msg({ id: 'oauth.continueWithSlack', message: 'Continue with Slack' }),\n  },\n  [B2BOAuthProviders.GitHub]: {\n    messageDescriptor: msg({ id: 'oauth.continueWithGitHub', message: 'Continue with GitHub' }),\n  },\n};\n\nexport type OauthB2BButtonProps = {\n  providerType: B2BOAuthProviders;\n  loginRedirectUrl?: string;\n  signupRedirectUrl?: string;\n  discoveryRedirectUrl?: string;\n  customScopes?: string[];\n  providerParams?: Record<string, string>;\n  onSuccess?: () => void;\n};\n\nexport const OAuthB2BButton = ({\n  providerType,\n  loginRedirectUrl,\n  signupRedirectUrl,\n  discoveryRedirectUrl,\n  customScopes,\n  providerParams,\n  onSuccess,\n}: OauthB2BButtonProps) => {\n  const { t } = useLingui();\n  const stytchClient = useStytch();\n  const [state] = useGlobalReducer();\n\n  const presentation = usePresentation();\n  const iconRegistry: IconRegistry<OauthIconName> = presentation.iconRegistry;\n  const id = getButtonId(`sso-${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    const Icon = iconRegistry[providerType];\n    label = t(messageDescriptor);\n    icon = <Icon />;\n  }\n\n  const onButtonClick = async () => {\n    const providerClient = stytchClient.oauth[providerType];\n\n    if (state.flowState.organization) {\n      await providerClient.start({\n        login_redirect_url: loginRedirectUrl,\n        signup_redirect_url: signupRedirectUrl,\n        custom_scopes: customScopes,\n        organization_id: state.flowState.organization.organization_id,\n        provider_params: providerParams,\n      });\n    } else {\n      await providerClient.discovery.start({\n        discovery_redirect_url: discoveryRedirectUrl,\n        custom_scopes: customScopes,\n        provider_params: providerParams,\n      });\n    }\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","B2BOAuthProviders","Google","messageDescriptor","Microsoft","HubSpot","Slack","GitHub","OAuthB2BButton","providerType","loginRedirectUrl","signupRedirectUrl","discoveryRedirectUrl","customScopes","providerParams","onSuccess","useLingui","stytchClient","useStytch","state","useGlobalReducer","presentation","usePresentation","iconRegistry","id","getButtonId","options","provider","label","icon","Icon","React","onButtonClick","providerClient","oauth","flowState","organization","start","login_redirect_url","signup_redirect_url","custom_scopes","organization_id","provider_params","discovery","discovery_redirect_url","Button","onClick","variant"],"mappings":";;;;;;;AAiBA,MAAMA,YAAAA,GAA6D;IACjE,CAACC,iBAAAA,CAAkBC,MAAM,GAAG;QAC1BC,iBAAiB,EAAA;;;;AACnB,KAAA;IACA,CAACF,iBAAAA,CAAkBG,SAAS,GAAG;QAC7BD,iBAAiB,EAAA;;;;AACnB,KAAA;IACA,CAACF,iBAAAA,CAAkBI,OAAO,GAAG;QAC3BF,iBAAiB,EAAA;;;;AACnB,KAAA;IACA,CAACF,iBAAAA,CAAkBK,KAAK,GAAG;QACzBH,iBAAiB,EAAA;;;;AACnB,KAAA;IACA,CAACF,iBAAAA,CAAkBM,MAAM,GAAG;QAC1BJ,iBAAiB,EAAA;;;;AACnB;AACF,CAAA;MAYaK,cAAAA,GAAiB,CAAC,EAC7BC,YAAY,EACZC,gBAAgB,EAChBC,iBAAiB,EACjBC,oBAAoB,EACpBC,YAAY,EACZC,cAAc,EACdC,SAAS,EACW,GAAA;AACpB,IAAA,MAAM,EAAA,IAAA,EAAA,OAAA,EAAA,CAAA,EAAA,GAAA,EAAA,GAAQC,SAAAA,EAAAA;AACd,IAAA,MAAMC,YAAAA,GAAeC,SAAAA,EAAAA;IACrB,MAAM,CAACC,MAAM,GAAGC,gBAAAA,EAAAA;AAEhB,IAAA,MAAMC,YAAAA,GAAeC,eAAAA,EAAAA;IACrB,MAAMC,YAAAA,GAA4CF,aAAaE,YAAY;IAC3E,MAAMC,EAAAA,GAAKC,YAAY,CAAC,IAAI,EAAEhB,YAAAA,CAAAA,CAAc,EAAEY,aAAaK,OAAO,CAAA;IAElE,MAAMC,QAAAA,GAAW3B,YAAY,CAACS,YAAAA,CAAa;AAC3C,IAAA,IAAImB,KAAAA,GAAgBnB,YAAAA;AACpB,IAAA,IAAIoB,IAAAA,GAAO,IAAA;AACX,IAAA,IAAIF,QAAAA,EAAU;QACZ,MAAM,EAAExB,iBAAiB,EAAE,GAAGwB,QAAAA;QAC9B,MAAMG,IAAAA,GAAOP,YAAY,CAACd,YAAAA,CAAa;QACvCmB,KAAAA,GAAAA,OAAAA,CAAAA,CAAAA,CAAUzB,iBAAAA,CAAAA;AACV0B,QAAAA,IAAAA,iBAAOE,cAAA,CAAA,aAAA,CAACD,IAAAA,EAAAA,IAAAA,CAAAA;AACV,IAAA;AAEA,IAAA,MAAME,aAAAA,GAAgB,UAAA;AACpB,QAAA,MAAMC,cAAAA,GAAiBhB,YAAAA,CAAaiB,KAAK,CAACzB,YAAAA,CAAa;AAEvD,QAAA,IAAIU,KAAAA,CAAMgB,SAAS,CAACC,YAAY,EAAE;YAChC,MAAMH,cAAAA,CAAeI,KAAK,CAAC;gBACzBC,kBAAAA,EAAoB5B,gBAAAA;gBACpB6B,mBAAAA,EAAqB5B,iBAAAA;gBACrB6B,aAAAA,EAAe3B,YAAAA;AACf4B,gBAAAA,eAAAA,EAAiBtB,KAAAA,CAAMgB,SAAS,CAACC,YAAY,CAACK,eAAe;gBAC7DC,eAAAA,EAAiB5B;AACnB,aAAA,CAAA;QACF,CAAA,MAAO;AACL,YAAA,MAAMmB,cAAAA,CAAeU,SAAS,CAACN,KAAK,CAAC;gBACnCO,sBAAAA,EAAwBhC,oBAAAA;gBACxB4B,aAAAA,EAAe3B,YAAAA;gBACf6B,eAAAA,EAAiB5B;AACnB,aAAA,CAAA;AACF,QAAA;AAEAC,QAAAA,SAAAA,IAAAA;AACF,IAAA,CAAA;AAEA,IAAA,qBACEgB,cAAA,CAAA,aAAA,CAACc,MAAAA,EAAAA;QAAOC,OAAAA,EAASd,aAAAA;QAAee,OAAAA,EAAQ,SAAA;QAAUlB,IAAAA,EAAMA,IAAAA;QAAML,EAAAA,EAAIA;AAC/DI,KAAAA,EAAAA,KAAAA,CAAAA;AAGP;;;;"}

package/dist/esm/packages/web/src/ui/b2b/components/SSOButton.mjs

@@ -3,7 +3,7 @@ import { useLingui } from '../../../../../../node_modules/@lingui/react/dist/ind
 import { useStytch, useConfig } from '../GlobalContextProvider.mjs';
 import { SSOIcon } from '../../../assets/sso.mjs';
 import Button from '../../components/atoms/Button.mjs';
-import { usePresentation } from '../../components/PresentationConfig.mjs';
+import { usePresentation, getButtonId } from '../../components/PresentationConfig.mjs';
 
 const iconMap = {
     'google-workspace': 'google',
@@ -14,8 +14,9 @@ const SSOButton = ({ connection, onStart })=>{
     const { i18n: $__i18n, _: $__ } = useLingui();
     const stytchClient = useStytch();
     const { ssoOptions } = useConfig();
-    const { iconRegistry } = usePresentation();
+    const { iconRegistry, options } = usePresentation();
     const { connection_id, display_name, identity_provider } = connection;
+    const id = getButtonId(`sso-${display_name}`, options);
     const onButtonClick = ()=>stytchClient.sso.start({
             connection_id,
             signup_redirect_url: ssoOptions?.signupRedirectURL,
@@ -28,7 +29,8 @@ const SSOButton = ({ connection, onStart })=>{
     return /*#__PURE__*/ React__default.createElement(Button, {
         variant: "outline",
         onClick: onButtonClick,
-        icon: /*#__PURE__*/ React__default.createElement(Icon, null)
+        icon: /*#__PURE__*/ React__default.createElement(Icon, null),
+        id: id
     }, $__i18n._({
         id: "provider.continueWith",
         message: "Continue with {display_name}",

package/dist/esm/packages/web/src/ui/b2b/components/SSOButton.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"SSOButton.mjs","sources":["../../../../../../../../../web/src/ui/b2b/components/SSOButton.tsx"],"sourcesContent":["import React from 'react';\nimport { SSOActiveConnection } from '@stytch/core/public';\nimport { useLingui } from '@lingui/react/macro';\nimport { useConfig, useStytch } from '../GlobalContextProvider';\nimport { SsoKnownIdp } from '../../../utils/KnownIdp';\n\nimport { SSOIcon } from '../../../assets';\nimport Button from '../../components/atoms/Button';\nimport { usePresentation } from '../../components/PresentationConfig';\nimport type { ssoIcons } from './Icons';\n\ntype SsoIconNames = keyof typeof ssoIcons;\n\nconst iconMap: Record<string, SsoIconNames> = {\n  'google-workspace': 'google',\n  'microsoft-entra': 'microsoft',\n  okta: 'okta',\n} satisfies Record<Exclude<SsoKnownIdp, 'generic'>, SsoIconNames>;\n\nexport interface SSOButtonProps {\n  connection: SSOActiveConnection;\n  onStart?: (connection: SSOActiveConnection) => void;\n}\n\nexport const SSOButton = ({ connection, onStart }: SSOButtonProps) => {\n  const { t } = useLingui();\n  const stytchClient = useStytch();\n  const { ssoOptions } = useConfig();\n  const { iconRegistry } = usePresentation();\n\n  const { connection_id, display_name, identity_provider } = connection;\n\n  const onButtonClick = () =>\n    stytchClient.sso\n      .start({\n        connection_id,\n        signup_redirect_url: ssoOptions?.signupRedirectURL,\n        login_redirect_url: ssoOptions?.loginRedirectURL,\n      })\n      .then(() => {\n        onStart?.(connection);\n      });\n\n  const iconName = iconMap[identity_provider];\n  const Icon = iconRegistry[iconName] ?? SSOIcon;\n\n  return (\n    <Button variant=\"outline\" onClick={onButtonClick} icon={<Icon />}>\n      {t({ id: 'provider.continueWith', message: `Continue with ${display_name}` })}\n    </Button>\n  );\n};\n"],"names":["iconMap","okta","SSOButton","connection","onStart","useLingui","stytchClient","useStytch","ssoOptions","useConfig","iconRegistry","usePresentation","connection_id","display_name","identity_provider","onButtonClick","sso","start","signup_redirect_url","signupRedirectURL","login_redirect_url","loginRedirectURL","then","iconName","Icon","SSOIcon","React","Button","variant","onClick","icon"],"mappings":";;;;;;;AAaA,MAAMA,OAAAA,GAAwC;IAC5C,kBAAA,EAAoB,QAAA;IACpB,iBAAA,EAAmB,WAAA;IACnBC,IAAAA,EAAM;AACR,CAAA;MAOaC,SAAAA,GAAY,CAAC,EAAEC,UAAU,EAAEC,OAAO,EAAkB,GAAA;AAC/D,IAAA,MAAM,EAAA,IAAA,EAAA,OAAA,EAAA,CAAA,EAAA,GAAA,EAAA,GAAQC,SAAAA,EAAAA;AACd,IAAA,MAAMC,YAAAA,GAAeC,SAAAA,EAAAA;IACrB,MAAM,EAAEC,UAAU,EAAE,GAAGC,SAAAA,EAAAA;IACvB,MAAM,EAAEC,YAAY,EAAE,GAAGC,eAAAA,EAAAA;AAEzB,IAAA,MAAM,EAAEC,aAAa,EAAEC,YAAY,EAAEC,iBAAiB,EAAE,GAAGX,UAAAA;AAE3D,IAAA,MAAMY,gBAAgB,IACpBT,YAAAA,CAAaU,GAAG,CACbC,KAAK,CAAC;AACLL,YAAAA,aAAAA;AACAM,YAAAA,mBAAAA,EAAqBV,UAAAA,EAAYW,iBAAAA;AACjCC,YAAAA,kBAAAA,EAAoBZ,UAAAA,EAAYa;AAClC,SAAA,CAAA,CACCC,IAAI,CAAC,IAAA;YACJlB,OAAAA,GAAUD,UAAAA,CAAAA;AACZ,QAAA,CAAA,CAAA;IAEJ,MAAMoB,QAAAA,GAAWvB,OAAO,CAACc,iBAAAA,CAAkB;AAC3C,IAAA,MAAMU,IAAAA,GAAOd,YAAY,CAACa,QAAAA,CAAS,IAAIE,OAAAA;AAEvC,IAAA,qBACEC,cAAA,CAAA,aAAA,CAACC,MAAAA,EAAAA;QAAOC,OAAAA,EAAQ,SAAA;QAAUC,OAAAA,EAASd,aAAAA;AAAee,QAAAA,IAAAA,gBAAMJ,cAAA,CAAA,aAAA,CAACF,IAAAA,EAAAA,IAAAA;;;;;AACKX,YAAAA,YAAAA,EAAAA;;;AAGlE;;;;"}
+{"version":3,"file":"SSOButton.mjs","sources":["../../../../../../../../../web/src/ui/b2b/components/SSOButton.tsx"],"sourcesContent":["import React from 'react';\nimport { SSOActiveConnection } from '@stytch/core/public';\nimport { useLingui } from '@lingui/react/macro';\nimport { useConfig, useStytch } from '../GlobalContextProvider';\nimport { SsoKnownIdp } from '../../../utils/KnownIdp';\n\nimport { SSOIcon } from '../../../assets';\nimport Button from '../../components/atoms/Button';\nimport { getButtonId, usePresentation } from '../../components/PresentationConfig';\nimport type { ssoIcons } from './Icons';\n\ntype SsoIconNames = keyof typeof ssoIcons;\n\nconst iconMap: Record<string, SsoIconNames> = {\n  'google-workspace': 'google',\n  'microsoft-entra': 'microsoft',\n  okta: 'okta',\n} satisfies Record<Exclude<SsoKnownIdp, 'generic'>, SsoIconNames>;\n\nexport interface SSOButtonProps {\n  connection: SSOActiveConnection;\n  onStart?: (connection: SSOActiveConnection) => void;\n}\n\nexport const SSOButton = ({ connection, onStart }: SSOButtonProps) => {\n  const { t } = useLingui();\n  const stytchClient = useStytch();\n  const { ssoOptions } = useConfig();\n  const { iconRegistry, options } = usePresentation();\n\n  const { connection_id, display_name, identity_provider } = connection;\n\n  const id = getButtonId(`sso-${display_name}`, options);\n\n  const onButtonClick = () =>\n    stytchClient.sso\n      .start({\n        connection_id,\n        signup_redirect_url: ssoOptions?.signupRedirectURL,\n        login_redirect_url: ssoOptions?.loginRedirectURL,\n      })\n      .then(() => {\n        onStart?.(connection);\n      });\n\n  const iconName = iconMap[identity_provider];\n  const Icon = iconRegistry[iconName] ?? SSOIcon;\n\n  return (\n    <Button variant=\"outline\" onClick={onButtonClick} icon={<Icon />} id={id}>\n      {t({ id: 'provider.continueWith', message: `Continue with ${display_name}` })}\n    </Button>\n  );\n};\n"],"names":["iconMap","okta","SSOButton","connection","onStart","useLingui","stytchClient","useStytch","ssoOptions","useConfig","iconRegistry","options","usePresentation","connection_id","display_name","identity_provider","id","getButtonId","onButtonClick","sso","start","signup_redirect_url","signupRedirectURL","login_redirect_url","loginRedirectURL","then","iconName","Icon","SSOIcon","React","Button","variant","onClick","icon"],"mappings":";;;;;;;AAaA,MAAMA,OAAAA,GAAwC;IAC5C,kBAAA,EAAoB,QAAA;IACpB,iBAAA,EAAmB,WAAA;IACnBC,IAAAA,EAAM;AACR,CAAA;MAOaC,SAAAA,GAAY,CAAC,EAAEC,UAAU,EAAEC,OAAO,EAAkB,GAAA;AAC/D,IAAA,MAAM,EAAA,IAAA,EAAA,OAAA,EAAA,CAAA,EAAA,GAAA,EAAA,GAAQC,SAAAA,EAAAA;AACd,IAAA,MAAMC,YAAAA,GAAeC,SAAAA,EAAAA;IACrB,MAAM,EAAEC,UAAU,EAAE,GAAGC,SAAAA,EAAAA;AACvB,IAAA,MAAM,EAAEC,YAAY,EAAEC,OAAO,EAAE,GAAGC,eAAAA,EAAAA;AAElC,IAAA,MAAM,EAAEC,aAAa,EAAEC,YAAY,EAAEC,iBAAiB,EAAE,GAAGZ,UAAAA;AAE3D,IAAA,MAAMa,KAAKC,WAAAA,CAAY,CAAC,IAAI,EAAEH,cAAc,EAAEH,OAAAA,CAAAA;AAE9C,IAAA,MAAMO,gBAAgB,IACpBZ,YAAAA,CAAaa,GAAG,CACbC,KAAK,CAAC;AACLP,YAAAA,aAAAA;AACAQ,YAAAA,mBAAAA,EAAqBb,UAAAA,EAAYc,iBAAAA;AACjCC,YAAAA,kBAAAA,EAAoBf,UAAAA,EAAYgB;AAClC,SAAA,CAAA,CACCC,IAAI,CAAC,IAAA;YACJrB,OAAAA,GAAUD,UAAAA,CAAAA;AACZ,QAAA,CAAA,CAAA;IAEJ,MAAMuB,QAAAA,GAAW1B,OAAO,CAACe,iBAAAA,CAAkB;AAC3C,IAAA,MAAMY,IAAAA,GAAOjB,YAAY,CAACgB,QAAAA,CAAS,IAAIE,OAAAA;AAEvC,IAAA,qBACEC,cAAA,CAAA,aAAA,CAACC,MAAAA,EAAAA;QAAOC,OAAAA,EAAQ,SAAA;QAAUC,OAAAA,EAASd,aAAAA;AAAee,QAAAA,IAAAA,gBAAMJ,cAAA,CAAA,aAAA,CAACF,IAAAA,EAAAA,IAAAA,CAAAA;QAASX,EAAAA,EAAIA;;;;;AACRF,YAAAA,YAAAA,EAAAA;;;AAGlE;;;;"}

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

@@ -5,11 +5,12 @@ import { MainScreenComponent, AppScreens } from '../types/AppScreens.mjs';
 import { useEffectiveAuthConfig } from '../hooks/useEffectiveAuthConfig.mjs';
 import { useProductComponents } from '../utils.mjs';
 import { assertUnreachable } from '../../../utils/assertUnreachable.mjs';
-import { getButtonId, getSsoMethodKey } from '../types/authMethodKeys.mjs';
+import { getButtonKey, getSsoMethodKey } from '../types/authMethodKeys.mjs';
 import { useLastUsedAuthMethod } from '../hooks/useLastUsedAuthMethod.mjs';
 import Button from '../../components/atoms/Button.mjs';
 import LastUsed from '../../components/molecules/LastUsed.mjs';
 import ButtonColumn from '../../components/molecules/ButtonColumn.mjs';
+import { usePresentation, getButtonId } from '../../components/PresentationConfig.mjs';
 import { AuthFlowType, B2BOAuthProviders } from '../../../../../core/src/public/b2b/ui.mjs';
 import { arrayUtils } from '../../../../../core/src/utils/arrayUtils.mjs';
 
@@ -38,6 +39,7 @@ const SsoAndOAuthButtons = ({ buttons })=>{
     const { i18n: $__i18n, _: $__ } = useLingui();
     const [state, dispatch] = useGlobalReducer();
     const { oauthProviderSettings = [] } = useEffectiveAuthConfig();
+    const presentation = usePresentation();
     const [lastUsedMethod, setLastUsedMethod] = useLastUsedAuthMethod();
     const config = useConfig();
     const { loginRedirectURL, signupRedirectURL, discoveryRedirectURL, customScopes, providerParams } = config.oauthOptions ?? {};
@@ -65,7 +67,7 @@ const SsoAndOAuthButtons = ({ buttons })=>{
         return null;
     }
     // Reorder providers based on last used
-    const [reorderedButtons, foundLastUsedOAuth] = arrayUtils.moveToFront(authButtons, (button)=>getButtonId(button) === lastUsedMethod);
+    const [reorderedButtons, foundLastUsedOAuth] = arrayUtils.moveToFront(authButtons, (button)=>getButtonKey(button) === lastUsedMethod);
     // Helper function to create OAuth button component
     const createOAuthButton = (oauthProvider)=>{
         const providerProps = {
@@ -104,6 +106,7 @@ const SsoAndOAuthButtons = ({ buttons })=>{
                     return /*#__PURE__*/ React__default.createElement(Button, {
                         key: "sso-discovery",
                         variant: "outline",
+                        id: getButtonId('sso-discovery', presentation.options),
                         onClick: ()=>{
                             dispatch({
                                 type: 'transition',
@@ -120,7 +123,7 @@ const SsoAndOAuthButtons = ({ buttons })=>{
             }
         })();
         return foundLastUsedOAuth && index === 0 ? /*#__PURE__*/ React__default.createElement(LastUsed, {
-            key: getButtonId(button)
+            key: getButtonKey(button)
         }, buttonComponent) : buttonComponent;
     }));
 };

package/dist/esm/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/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/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/packages/web/src/ui/b2c/AppContainer.mjs

@@ -6,7 +6,7 @@ import AppContainer$1 from './Container.mjs';
 import { readB2CInternals } from '../../utils/internal.mjs';
 import { usePresentationWithDefault, PresentationContext } from '../components/PresentationConfig.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();

package/dist/esm/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,QAAU,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","presentationValue","usePresentationWithDefault","products","React","GlobalContextProvider","PresentationContext","Provider","value","I18nProviderWrapper","messages","overrides","Container"],"mappings":";;;;;;;;MAWaA,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;;KAEJ,EAAG;AAACN,QAAAA;AAAO,KAAA,CAAA;AAWX,IAAA,MAAMqB,oBAAoBC,0BAAAA,CAA2BpB,YAAAA,EAAcI,gBAAAA,EAAkBL,MAAAA,CAAOsB,QAAU,CAAA;AAEtG,IAAA,qBACEC,cAAA,CAAA,aAAA,CAACC,qBAAAA,EAAAA;QAAsBzB,MAAAA,EAAQA,MAAAA;QAAQC,MAAAA,EAAQA,MAAAA;QAAQE,SAAAA,EAAWA;AAChE,KAAA,gBAAAqB,cAAA,CAAA,aAAA,CAACE,oBAAoBC,QAAQ,EAAA;QAACC,KAAAA,EAAOP;qBACnCG,cAAA,CAAA,aAAA,CAACK,mBAAAA,EAAAA;QAAoBC,QAAAA,EAAUA,QAAAA;QAAUC,SAAAA,EAAW3B;qBAClDoB,cAAA,CAAA,aAAA,CAACQ,cAAAA,EAAAA,IAAAA,CAAAA,CAAAA,CAAAA,CAAAA;AAKX;;;;"}

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

@@ -7,7 +7,7 @@ import { IDPContextProvider } from '../components/organisms/IDPContextProvider.m
 import { usePresentationWithDefault, PresentationContext } from '../components/PresentationConfig.mjs';
 import { IDPConsentScreen } from './screens/IdentityProvider/IDPConsent.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)=>{

package/dist/esm/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","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;KACJ,EAAG;AAACd,QAAAA;AAAO,KAAA,CAAA;AAWX,IAAA,qBACEmB,cAAA,CAAA,aAAA,CAACC,qBAAAA,EAAAA;QACCpB,MAAAA,EAAQA,MAAAA;AACRqB,QAAAA,MAAAA,EAAQ,EAAC;QACTnB,SAAAA,EAAWA,SAAAA;QACXoB,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,EAAW5B;qBAClDgB,cAAA,CAAA,aAAA,CAACa,gBAAAA,EAAAA,IAAAA,CAAAA,CAAAA,CAAAA,CAAAA,CAAAA;AAMb;;;;"}

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

@@ -8,7 +8,7 @@ import { usePresentationWithDefault, PresentationContext } from '../components/P
 import { passkeyRegistration } from './Products.mjs';
 import { addProduct } from './utils.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