npm - @stytch/react - Versions diffs - 20.0.0-next.2 → 20.0.0-next.3 - Mend

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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (149) hide show

package/dist/esm/b2b/StytchB2BContext.mjs CHANGED Viewed

@@ -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 CHANGED Viewed

	@@ -1 +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;;;;"}
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('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 CHANGED Viewed

	@@ -1 +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;;;;"}
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;;;;"}

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

@@ -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 CHANGED Viewed

	@@ -1 +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;;;;"}
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, 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 CHANGED Viewed

@@ -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 CHANGED Viewed

	@@ -1 +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~~;;;;"}
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 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/b2c/AppContainer.mjs CHANGED Viewed

@@ -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 CHANGED Viewed

	@@ -1 +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;;;;"}
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 { 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 CHANGED Viewed

@@ -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 CHANGED Viewed

	@@ -1 +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;;;;"}
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, 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 CHANGED Viewed

@@ -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

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

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

package/dist/esm/packages/web/src/ui/b2c/ResetPasswordContainer.mjs CHANGED Viewed

@@ -8,7 +8,7 @@ import { usePresentationWithDefault, PresentationContext } from '../components/P
 import { passwords } from './Products.mjs';
 import { addProduct } from './utils.mjs';
-const ResetPasswordContainer = ({ client, config: rawConfig, presentation, callbacks, strings, passwordResetToken: rawToken })=>{
+const ResetPasswordContainer = ({ client, config: rawConfig, presentation, callbacks, strings, styles, passwordResetToken: rawToken })=>{
     const config = addProduct(rawConfig, passwords);
     // Default to reading token from URL if not provided
     let token = rawToken;

package/dist/esm/packages/web/src/ui/b2c/ResetPasswordContainer.mjs.map CHANGED Viewed

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

package/dist/esm/packages/web/src/ui/b2c/screens/Crypto/SetupNewWallet.mjs CHANGED Viewed

@@ -1,11 +1,11 @@
 import React__default from 'react';
 import { useLingui } from '../../../../../../../node_modules/@lingui/react/dist/index.mjs';
 import { useGlobalReducer, AppScreens } from '../../GlobalContextProvider.mjs';
-import { WalletToIcon } from '../../../../utils/crypto.mjs';
 import Column from '../../../components/atoms/Column.mjs';
 import TextColumn from '../../../components/molecules/TextColumn.mjs';
 import Button, { ButtonAnchor } from '../../../components/atoms/Button.mjs';
 import ButtonColumn from '../../../components/molecules/ButtonColumn.mjs';
+import { useCryptoIcon } from '../../../../utils/crypto.mjs';
 import { Wallets } from '../../../../../../core/src/public/ui.mjs';
 const commonButtonProps = {
@@ -13,13 +13,14 @@ const commonButtonProps = {
     target: '_blank',
     rel: 'noreferrer'
 };
-const walletIcon = (wallet)=>{
-    const Icon = WalletToIcon[wallet];
-    return /*#__PURE__*/ React__default.createElement(Icon, null);
-};
 const SetupNewWallet = ()=>{
     const { i18n: $__i18n, _: $__ } = useLingui();
     const [, dispatch] = useGlobalReducer();
+    const getCryptoIcon = useCryptoIcon();
+    const MetamaskIcon = getCryptoIcon(Wallets.Metamask);
+    const PhantomIcon = getCryptoIcon(Wallets.Phantom);
+    const CoinbaseIcon = getCryptoIcon(Wallets.Coinbase);
+    const BinanceIcon = getCryptoIcon(Wallets.Binance);
     return /*#__PURE__*/ React__default.createElement(Column, {
         gap: 6
     }, /*#__PURE__*/ React__default.createElement(TextColumn, {
@@ -37,29 +38,29 @@ const SetupNewWallet = ()=>{
         })
     }), /*#__PURE__*/ React__default.createElement(ButtonColumn, null, /*#__PURE__*/ React__default.createElement(ButtonAnchor, {
         ...commonButtonProps,
-        icon: walletIcon(Wallets.Metamask),
+        icon: /*#__PURE__*/ React__default.createElement(MetamaskIcon, null),
         href: "https://metamask.io/"
     }, $__i18n._({
         id: "crypto.wallet.metamask",
         message: "Metamask"
     })), /*#__PURE__*/ React__default.createElement(ButtonAnchor, {
         ...commonButtonProps,
-        icon: walletIcon(Wallets.Phantom),
-        href: "https://phantom.app/"
+        icon: /*#__PURE__*/ React__default.createElement(PhantomIcon, null),
+        href: "https://phantom.com/"
     }, $__i18n._({
         id: "crypto.wallet.phantom",
         message: "Phantom"
     })), /*#__PURE__*/ React__default.createElement(ButtonAnchor, {
         ...commonButtonProps,
-        icon: walletIcon(Wallets.Coinbase),
+        icon: /*#__PURE__*/ React__default.createElement(CoinbaseIcon, null),
         href: "https://www.coinbase.com/wallet"
     }, $__i18n._({
         id: "crypto.wallet.coinbase",
         message: "Coinbase"
     })), /*#__PURE__*/ React__default.createElement(ButtonAnchor, {
         ...commonButtonProps,
-        icon: walletIcon(Wallets.Binance),
-        href: "https://www.bnbchain.world/en/binance-wallet"
+        icon: /*#__PURE__*/ React__default.createElement(BinanceIcon, null),
+        href: "https://web3.binance.com/en/about"
     }, $__i18n._({
         id: "crypto.wallet.binance",
         message: "Binance"

package/dist/esm/packages/web/src/ui/b2c/screens/Crypto/SetupNewWallet.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"SetupNewWallet.mjs","sources":["../../../../../../../../../../web/src/ui/b2c/screens/Crypto/SetupNewWallet.tsx"],"sourcesContent":["import React from 'react';\nimport { useLingui } from '@lingui/react/macro';\nimport { Wallets } from '@stytch/core/public';\nimport { AppScreens, useGlobalReducer } from '../../GlobalContextProvider';\nimport ~~{ WalletToIcon } from '../../../../utils/crypto';\nimport~~ Column from '../../../components/atoms/Column';\nimport TextColumn from '../../../components/molecules/TextColumn';\nimport Button, { ButtonAnchor } from '../../../components/atoms/Button';\nimport ButtonColumn from '../../../components/molecules/ButtonColumn';\n\nconst commonButtonProps = {\n variant: 'outline',\n target: '_blank',\n rel: 'noreferrer',\n} as const;\n\~~nconst~~ ~~walletIcon~~ = (~~wallet: Wallets~~) => {\n const ~~Icon~~ = ~~WalletToIcon[wallet]~~;\n ~~return~~ ~~<Icon~~ ~~/>;\n}~~;\n\~~nexport~~ const ~~SetupNewWallet~~ = () => {\n const { t } = ~~useLingui~~();\n const [, ~~dispatch]~~ = ~~useGlobalReducer~~();\n\n return (\n <Column gap={6}>\n <TextColumn\n header={t({ id: 'crypto.setupNewWallet.title', message: 'Set up a new crypto wallet' })}\n body={t({\n id: 'crypto.setupNewWallet.content',\n message: 'Get started by downloading any Ethereum or Solana wallet.',\n })}\n helper={t({\n id: 'crypto.setupNewWallet.instruction',\n message:\n 'We’ve included a few examples of wallet extensions you can find below. Once you’ve set up your wallet, click “Go back” to use it and sign in.',\n })}\n />\n\n <ButtonColumn>\n <ButtonAnchor {...commonButtonProps} icon={~~walletIcon(Wallets.Metamask)~~} href=\"https://metamask.io/\">\n {t({ id: 'crypto.wallet.metamask', message: 'Metamask' })}\n </ButtonAnchor>\n <ButtonAnchor {...commonButtonProps} icon={~~walletIcon(Wallets.Phantom)~~} href=\"https://phantom.~~app~~/\">\n {t({ id: 'crypto.wallet.phantom', message: 'Phantom' })}\n </ButtonAnchor>\n\n <ButtonAnchor {...commonButtonProps} icon={~~walletIcon(Wallets.Coinbase)~~} href=\"https://www.coinbase.com/wallet\">\n {t({ id: 'crypto.wallet.coinbase', message: 'Coinbase' })}\n </ButtonAnchor>\n\n <ButtonAnchor\n {...commonButtonProps}\n icon={~~walletIcon(Wallets.Binance)~~}\n href=\"https://~~www~~.~~bnbchain~~.~~world~~/en/~~binance-wallet~~\"\n >\n {t({ id: 'crypto.wallet.binance', message: 'Binance' })}\n </ButtonAnchor>\n\n <Button variant=\"primary\" onClick={() => dispatch({ type: 'transition', screen: AppScreens.Main })}>\n {t({ id: 'button.goBack', message: 'Go back' })}\n </Button>\n </ButtonColumn>\n </Column>\n );\n};\n"],"names":["commonButtonProps","variant","target","rel","~~walletIcon~~","~~wallet~~","~~Icon~~","~~WalletToIcon~~","~~React~~","~~SetupNewWallet~~","~~useLingui~~","~~dispatch~~","~~useGlobalReducer~~","~~Column~~","~~gap~~","~~TextColumn~~","~~header~~","~~body~~","~~helper~~","~~ButtonColumn~~","~~ButtonAnchor~~","~~icon~~","~~Wallets~~","~~Metamask~~","~~href~~","~~Phantom~~","~~Coinbase~~","~~Binance~~","Button","onClick","type","screen","AppScreens","Main"],"mappings":";;;;;;;;;;AAUA,MAAMA,iBAAAA,GAAoB;IACxBC,OAAAA,EAAS,SAAA;IACTC,MAAAA,EAAQ,QAAA;IACRC,GAAAA,EAAK;AACP,CAAA;~~AAEA~~,~~MAAMC,aAAa,CAACC,MAAAA,GAAAA;IAClB,MAAMC,IAAAA,GAAOC,YAAY,CAACF,MAAAA,CAAO;AACjC,IAAA,qBAAOG,cAAA,CAAA,aAAA,CAACF,IAAAA,EAAAA,IAAAA,CAAAA;AACV,CAAA;MAEaG,~~cAAAA,GAAiB,IAAA;AAC5B,IAAA,MAAM,EAAA,IAAA,EAAA,OAAA,EAAA,CAAA,EAAA,GAAA,EAAA,GAAQC,SAAAA,EAAAA;IACd,MAAM,GAAGC,SAAS,GAAGC,gBAAAA,EAAAA;AAErB,IAAA,~~qBACEJ~~,cAAA,CAAA,aAAA,~~CAACK~~,MAAAA,EAAAA;QAAOC,GAAAA,EAAK;~~qBACXN~~,cAAA,CAAA,aAAA,~~CAACO~~,UAAAA,EAAAA;QACCC,MAAM,EAAA,OAAA,CAAA,CAAA,CAAA;;;;QACNC,IAAI,EAAA,OAAA,CAAA,CAAA,CAAA;;;;QAIJC,MAAM,EAAA,OAAA,CAAA,CAAA,CAAA;;;;AAOR,KAAA,CAAA,~~gBAAAV~~,cAAA,CAAA,aAAA,~~CAACW~~,~~kCACCX~~,cAAA,CAAA,aAAA,~~CAACY~~,YAAAA,EAAAA;AAAc,QAAA,~~GAAGpB~~,iBAAiB;~~QAAEqB~~,IAAAA,~~EAAMjB~~,~~UAAAA~~,~~CAAWkB~~,~~QAAQC~~,~~QAAQ~~,~~CAAA~~;~~QAAGC~~,IAAAA,EAAK;;;;~~uBAG9EhB~~,cAAA,CAAA,aAAA,~~CAACY~~,YAAAA,EAAAA;AAAc,QAAA,~~GAAGpB~~,iBAAiB;~~QAAEqB~~,IAAAA,~~EAAMjB~~,~~UAAAA~~,~~CAAWkB~~,~~QAAQG~~,~~OAAO~~,~~CAAA~~;~~QAAGD~~,IAAAA,EAAK;;;;~~uBAI7EhB~~,cAAA,CAAA,aAAA,~~CAACY~~,YAAAA,EAAAA;AAAc,QAAA,~~GAAGpB~~,iBAAiB;~~QAAEqB~~,IAAAA,~~EAAMjB~~,~~UAAAA~~,~~CAAWkB~~,~~QAAQI~~,~~QAAQ~~,~~CAAA~~;~~QAAGF~~,IAAAA,EAAK;;;;~~uBAI9EhB~~,cAAA,CAAA,aAAA,~~CAACY~~,YAAAA,EAAAA;~~AACE~~,QAAA,~~GAAGpB~~,iBAAiB;~~QACrBqB~~,IAAAA,~~EAAMjB~~,~~UAAAA~~,~~CAAWkB~~,~~QAAQK~~,~~OAAO~~,~~CAAA~~;~~QAChCH~~,IAAAA,EAAK;;;;~~uBAKPhB~~,cAAA,CAAA,aAAA,~~CAACoB~~,MAAAA,EAAAA;~~QAAO3B~~,OAAAA,EAAQ,SAAA;~~AAAU4B~~,QAAAA,OAAAA,EAAS,~~IAAMlB~~,QAAAA,CAAS;~~gBAAEmB~~,IAAAA,EAAM,YAAA;AAAcC,gBAAAA,MAAAA,EAAQC,WAAWC;AAAK,aAAA;;;;;AAMxG;;;;"}
1	+ {"version":3,"file":"SetupNewWallet.mjs","sources":["../../../../../../../../../../web/src/ui/b2c/screens/Crypto/SetupNewWallet.tsx"],"sourcesContent":["import React from 'react';\nimport { useLingui } from '@lingui/react/macro';\nimport { Wallets } from '@stytch/core/public';\nimport { AppScreens, useGlobalReducer } from '../../GlobalContextProvider';\nimport Column from '../../../components/atoms/Column';\nimport TextColumn from '../../../components/molecules/TextColumn';\nimport Button, { ButtonAnchor } from '../../../components/atoms/Button';\nimport ButtonColumn from '../../../components/molecules/ButtonColumn';\nimport { useCryptoIcon } from '../../../../utils/crypto';\n\nconst commonButtonProps = {\n variant: 'outline',\n target: '_blank',\n rel: 'noreferrer',\n} as const;\n\nexport const SetupNewWallet = () => {\n const { t } = useLingui();\n const [, dispatch] = useGlobalReducer();\n\n const getCryptoIcon = useCryptoIcon();\n const MetamaskIcon = getCryptoIcon(Wallets.Metamask);\n const PhantomIcon = getCryptoIcon(Wallets.Phantom);\n const CoinbaseIcon = getCryptoIcon(Wallets.Coinbase);\n const BinanceIcon = getCryptoIcon(Wallets.Binance);\n\n return (\n <Column gap={6}>\n <TextColumn\n header={t({ id: 'crypto.setupNewWallet.title', message: 'Set up a new crypto wallet' })}\n body={t({\n id: 'crypto.setupNewWallet.content',\n message: 'Get started by downloading any Ethereum or Solana wallet.',\n })}\n helper={t({\n id: 'crypto.setupNewWallet.instruction',\n message:\n 'We’ve included a few examples of wallet extensions you can find below. Once you’ve set up your wallet, click “Go back” to use it and sign in.',\n })}\n />\n\n <ButtonColumn>\n <ButtonAnchor {...commonButtonProps} icon={<MetamaskIcon />} href=\"https://metamask.io/\">\n {t({ id: 'crypto.wallet.metamask', message: 'Metamask' })}\n </ButtonAnchor>\n <ButtonAnchor {...commonButtonProps} icon={<PhantomIcon />} href=\"https://phantom.com/\">\n {t({ id: 'crypto.wallet.phantom', message: 'Phantom' })}\n </ButtonAnchor>\n\n <ButtonAnchor {...commonButtonProps} icon={<CoinbaseIcon />} href=\"https://www.coinbase.com/wallet\">\n {t({ id: 'crypto.wallet.coinbase', message: 'Coinbase' })}\n </ButtonAnchor>\n\n <ButtonAnchor {...commonButtonProps} icon={<BinanceIcon />} href=\"https://web3.binance.com/en/about\">\n {t({ id: 'crypto.wallet.binance', message: 'Binance' })}\n </ButtonAnchor>\n\n <Button variant=\"primary\" onClick={() => dispatch({ type: 'transition', screen: AppScreens.Main })}>\n {t({ id: 'button.goBack', message: 'Go back' })}\n </Button>\n </ButtonColumn>\n </Column>\n );\n};\n"],"names":["commonButtonProps","variant","target","rel","SetupNewWallet","useLingui","dispatch","useGlobalReducer","getCryptoIcon","useCryptoIcon","MetamaskIcon","Wallets","Metamask","PhantomIcon","Phantom","CoinbaseIcon","Coinbase","BinanceIcon","Binance","React","Column","gap","TextColumn","header","body","helper","ButtonColumn","ButtonAnchor","icon","href","Button","onClick","type","screen","AppScreens","Main"],"mappings":";;;;;;;;;;AAUA,MAAMA,iBAAAA,GAAoB;IACxBC,OAAAA,EAAS,SAAA;IACTC,MAAAA,EAAQ,QAAA;IACRC,GAAAA,EAAK;AACP,CAAA;MAEaC,cAAAA,GAAiB,IAAA;AAC5B,IAAA,MAAM,EAAA,IAAA,EAAA,OAAA,EAAA,CAAA,EAAA,GAAA,EAAA,GAAQC,SAAAA,EAAAA;IACd,MAAM,GAAGC,SAAS,GAAGC,gBAAAA,EAAAA;AAErB,IAAA,MAAMC,aAAAA,GAAgBC,aAAAA,EAAAA;IACtB,MAAMC,YAAAA,GAAeF,aAAAA,CAAcG,OAAAA,CAAQC,QAAQ,CAAA;IACnD,MAAMC,WAAAA,GAAcL,aAAAA,CAAcG,OAAAA,CAAQG,OAAO,CAAA;IACjD,MAAMC,YAAAA,GAAeP,aAAAA,CAAcG,OAAAA,CAAQK,QAAQ,CAAA;IACnD,MAAMC,WAAAA,GAAcT,aAAAA,CAAcG,OAAAA,CAAQO,OAAO,CAAA;AAEjD,IAAA,qBACEC,cAAA,CAAA,aAAA,CAACC,MAAAA,EAAAA;QAAOC,GAAAA,EAAK;qBACXF,cAAA,CAAA,aAAA,CAACG,UAAAA,EAAAA;QACCC,MAAM,EAAA,OAAA,CAAA,CAAA,CAAA;;;;QACNC,IAAI,EAAA,OAAA,CAAA,CAAA,CAAA;;;;QAIJC,MAAM,EAAA,OAAA,CAAA,CAAA,CAAA;;;;AAOR,KAAA,CAAA,gBAAAN,cAAA,CAAA,aAAA,CAACO,kCACCP,cAAA,CAAA,aAAA,CAACQ,YAAAA,EAAAA;AAAc,QAAA,GAAG3B,iBAAiB;AAAE4B,QAAAA,IAAAA,gBAAMT,cAAA,CAAA,aAAA,CAACT,YAAAA,EAAAA,IAAAA,CAAAA;QAAiBmB,IAAAA,EAAK;;;;uBAGlEV,cAAA,CAAA,aAAA,CAACQ,YAAAA,EAAAA;AAAc,QAAA,GAAG3B,iBAAiB;AAAE4B,QAAAA,IAAAA,gBAAMT,cAAA,CAAA,aAAA,CAACN,WAAAA,EAAAA,IAAAA,CAAAA;QAAgBgB,IAAAA,EAAK;;;;uBAIjEV,cAAA,CAAA,aAAA,CAACQ,YAAAA,EAAAA;AAAc,QAAA,GAAG3B,iBAAiB;AAAE4B,QAAAA,IAAAA,gBAAMT,cAAA,CAAA,aAAA,CAACJ,YAAAA,EAAAA,IAAAA,CAAAA;QAAiBc,IAAAA,EAAK;;;;uBAIlEV,cAAA,CAAA,aAAA,CAACQ,YAAAA,EAAAA;AAAc,QAAA,GAAG3B,iBAAiB;AAAE4B,QAAAA,IAAAA,gBAAMT,cAAA,CAAA,aAAA,CAACF,WAAAA,EAAAA,IAAAA,CAAAA;QAAgBY,IAAAA,EAAK;;;;uBAIjEV,cAAA,CAAA,aAAA,CAACW,MAAAA,EAAAA;QAAO7B,OAAAA,EAAQ,SAAA;AAAU8B,QAAAA,OAAAA,EAAS,IAAMzB,QAAAA,CAAS;gBAAE0B,IAAAA,EAAM,YAAA;AAAcC,gBAAAA,MAAAA,EAAQC,WAAWC;AAAK,aAAA;;;;;AAMxG;;;;"}

package/dist/esm/packages/web/src/ui/b2c/screens/Crypto/WalletButtons.mjs CHANGED Viewed

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

package/dist/esm/packages/web/src/ui/b2c/screens/Crypto/WalletButtons.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"WalletButtons.mjs","sources":["../../../../../../../../../../web/src/ui/b2c/screens/Crypto/WalletButtons.tsx"],"sourcesContent":["import * as React from 'react';\nimport { MessageDescriptor } from '@lingui/core';\nimport { msg } from '@lingui/core/macro';\nimport { useLingui } from '@lingui/react/macro';\nimport { Wallets } from '@stytch/core/public';\n\nimport { useConfig, useGlobalReducer, AppScreens } from '../../GlobalContextProvider';\nimport { ~~WalletToIcon,~~ WalletToText, isWalletVisible } from '../../../../utils/crypto';\nimport ButtonColumn from '../../../components/molecules/ButtonColumn';\nimport Button from '../../../components/atoms/Button';\~~n\nconst~~ ~~MAX_BUTTONS = 6;\n\nconst WalletIconComponent = (~~{ ~~wallet~~ }: { ~~wallet: Wallets }) => {~~\~~n const~~ ~~Icon~~ = ~~WalletToIcon[wallet]~~;\n ~~return <Icon />;\n};\n~~\nconst walletMessages = {\n [Wallets.Phantom]: msg({ id: 'crypto.wallet.continueWithPhantom', message: 'Continue with Phantom' }),\n [Wallets.Binance]: msg({ id: 'crypto.wallet.continueWithBinance', message: 'Continue with Binance' }),\n [Wallets.Coinbase]: msg({ id: 'crypto.wallet.continueWithCoinbase', message: 'Continue with Coinbase' }),\n [Wallets.Metamask]: msg({ id: 'crypto.wallet.continueWithMetamask', message: 'Continue with Metamask' }),\n [Wallets.GenericEthereumWallet]: msg({\n id: 'crypto.wallet.continueWithEthereum',\n message: 'Continue with Other Ethereum Wallet',\n }),\n [Wallets.GenericSolanaWallet]: msg({\n id: 'crypto.wallet.continueWithSolana',\n message: 'Continue with Other Solana Wallet',\n }),\n} satisfies Record<Wallets, MessageDescriptor>;\n\nexport const CryptoWalletButtons = ({ type }: { type: 'main' \| 'other' }) => {\n const { t } = useLingui();\n const [state, dispatch] = useGlobalReducer();\n const config = useConfig();\n const oAuthOptions = config.oauthOptions?.providers.length ?? 0;\n\n // Crypto Buttons on screen = Maximum Buttons - OAuth Buttons - 1 (Other crypto or set up new wallet)\n const cryptoButtonsOnMainScreen = MAX_BUTTONS - oAuthOptions - 1;\n const onWalletStart = (wallet: Wallets) => {\n dispatch({\n type: 'update_crypto_state',\n cryptoState: {\n ...state.formState.cryptoState,\n walletOption: wallet,\n },\n });\n dispatch({ type: 'transition', screen: AppScreens.CryptoConnect });\n };\n\n const allDetectedWallets = (Object.keys(Wallets) as (keyof typeof Wallets)[]).filter((wallet) =>\n isWalletVisible(Wallets[wallet]),\n );\n\n const renderOtherScreenButton = allDetectedWallets.length > cryptoButtonsOnMainScreen;\n\n const mainWallets = allDetectedWallets.slice(0, cryptoButtonsOnMainScreen);\n const otherWallet = allDetectedWallets.slice(cryptoButtonsOnMainScreen);\n\n const walletsToRender = type === 'main' ? mainWallets : otherWallet;\n\n return (\n <ButtonColumn>\n {walletsToRender.map((wallet) => (\n ~~<Button~~\n key={wallet}\n variant=\"outline\"\n icon={<~~WalletIconComponent~~ ~~wallet={Wallets[wallet]~~} ~~/>}\n~~ onClick={() => onWalletStart(~~Wallets[wallet]~~)}\n >\n {type === 'main' ? t(walletMessages[~~Wallets[wallet~~]]) : t(WalletToText[~~Wallets[wallet~~]])}\n </Button>\n ))}\n {renderOtherScreenButton && type === 'main' ? (\n <Button\n variant=\"outline\"\n icon={<~~WalletIconComponent~~ ~~wallet={Wallets.GenericEthereumWallet}~~ />}\n onClick={() => dispatch({ type: 'transition', screen: AppScreens.CryptoOtherScreen })}\n >\n {t(msg({ id: 'crypto.wallet.continueWithOtherWallet', message: 'Continue with other Crypto Wallet' }))}\n </Button>\n ) : (\n <Button\n variant=\"outline\"\n onClick={() => dispatch({ type: 'transition', screen: AppScreens.CryptoSetupWallet })}\n >\n {t(msg({ id: 'crypto.wallet.setupNewWallet', message: 'Set up a new crypto wallet' }))}\n </Button>\n )}\n </ButtonColumn>\n );\n};\n"],"names":["MAX_BUTTONS","~~WalletIconComponent","wallet","Icon","WalletToIcon","~~walletMessages","Wallets","Phantom","Binance","Coinbase","Metamask","GenericEthereumWallet","GenericSolanaWallet","CryptoWalletButtons","type","useLingui","state","dispatch","useGlobalReducer","config","useConfig","oAuthOptions","oauthOptions","providers","length","cryptoButtonsOnMainScreen","onWalletStart","cryptoState","formState","walletOption","screen","AppScreens","CryptoConnect","allDetectedWallets","Object","keys","filter","isWalletVisible","renderOtherScreenButton","mainWallets","slice","otherWallet","walletsToRender","ButtonColumn","map","Button","key","variant","icon","onClick","WalletToText","CryptoOtherScreen","CryptoSetupWallet"],"mappings":"~~;;;;;;;;AAWA~~,MAAMA,WAAAA,GAAc,CAAA;AAEpB,MAAMC,~~mBAAAA,GAAsB,CAAC,EAAEC,MAAM,EAAuB,GAAA;IAC1D,MAAMC,IAAAA,GAAOC,YAAY,CAACF,MAAAA,CAAO;AACjC,IAAA,qBAAO,KAAA,CAAA,aAAA,CAACC,IAAAA,EAAAA,IAAAA,CAAAA;AACV,CAAA;AAEA,MAAME,~~cAAAA,GAAiB;IACrB,CAACC,OAAAA,CAAQC,OAAO,GAAC;;;;IACjB,CAACD,OAAAA,CAAQE,OAAO,GAAC;;;;IACjB,CAACF,OAAAA,CAAQG,QAAQ,GAAC;;;;IAClB,CAACH,OAAAA,CAAQI,QAAQ,GAAC;;;;IAClB,CAACJ,OAAAA,CAAQK,qBAAqB,GAAC;;;;IAI/B,CAACL,OAAAA,CAAQM,mBAAmB,GAAC;;;;AAI/B,CAAA;AAEO,MAAMC,mBAAAA,GAAsB,CAAC,EAAEC,IAAI,EAA8B,GAAA;AACtE,IAAA,MAAM,EAAA,IAAA,EAAA,OAAA,EAAA,CAAA,EAAA,GAAA,EAAA,GAAQC,SAAAA,EAAAA;IACd,MAAM,CAACC,KAAAA,EAAOC,QAAAA,CAAS,GAAGC,gBAAAA,EAAAA;AAC1B,IAAA,MAAMC,MAAAA,GAASC,SAAAA,EAAAA;~~AACf~~,IAAA,MAAMC,YAAAA,~~GAAeF~~,MAAAA,~~CAAOG~~,YAAY,EAAEC,UAAUC,MAAAA,IAAU,CAAA;;IAG9D,MAAMC,yBAAAA,~~GAA4BzB~~,~~cAAcqB~~,YAAAA,GAAe,CAAA;AAC/D,IAAA,MAAMK,gBAAgB,~~CAACxB~~,MAAAA,GAAAA;~~QACrBe~~,QAAAA,CAAS;YACPH,IAAAA,EAAM,qBAAA;~~YACNa~~,WAAAA,EAAa;gBACX,~~GAAGX~~,KAAAA,~~CAAMY~~,SAAS,CAACD,WAAW;gBAC9BE,YAAAA,~~EAAc3B~~;AAChB;AACF,SAAA,CAAA;~~QACAe~~,QAAAA,CAAS;YAAEH,IAAAA,EAAM,YAAA;~~AAAcgB~~,YAAAA,MAAAA,EAAQC,WAAWC;AAAc,SAAA,CAAA;AAClE,IAAA,CAAA;AAEA,IAAA,MAAMC,kBAAAA,GAAsBC,MAAAA,CAAOC,IAAI,~~CAAC7B~~,OAAAA,CAAAA,~~CAAsC8B~~,MAAM,CAAC,~~CAAClC~~,MAAAA,~~GACpFmC~~,eAAAA,~~CAAgB/B~~,OAAO,~~CAACJ~~,MAAAA,CAAO,CAAA,CAAA;IAGjC,~~MAAMoC~~,uBAAAA,GAA0BL,kBAAAA,~~CAAmBT~~,MAAM,GAAGC,yBAAAA;AAE5D,IAAA,~~MAAMc~~,WAAAA,GAAcN,kBAAAA,CAAmBO,KAAK,CAAC,CAAA,~~EAAGf~~,yBAAAA,CAAAA;IAChD,~~MAAMgB~~,WAAAA,GAAcR,kBAAAA,CAAmBO,KAAK,~~CAACf~~,yBAAAA,CAAAA;IAE7C,~~MAAMiB~~,eAAAA,~~GAAkB5B~~,IAAAA,KAAS,MAAA,~~GAASyB~~,WAAAA,GAAcE,WAAAA;AAExD,IAAA,qBACE,~~oBAACE~~,YAAAA,EAAAA,IAAAA,EACED,eAAAA,CAAgBE,GAAG,CAAC,~~CAAC1C~~,~~uBACpB~~,KAAA,CAAA,aAAA,~~CAAC2C~~,MAAAA,EAAAA;~~YACCC~~,GAAAA,~~EAAK5C~~,MAAAA;~~YACL6C~~,OAAAA,EAAQ,SAAA;~~AACRC~~,YAAAA,IAAAA,gBAAM,KAAA,CAAA,aAAA,~~CAAC/C~~,~~mBAAAA~~,EAAAA~~;gBAAoBC~~,~~MAAAA~~,~~EAAQI~~,~~OAAO,CAACJ,MAAAA;;AAC3C+C,~~YAAAA,OAAAA,EAAS,~~IAAMvB~~,aAAAA,~~CAAcpB~~,~~OAAO,CAACJ,MAAAA,CAAO~~;~~AAE3CY~~,SAAAA,EAAAA,IAAAA,KAAS,mBAAWT,cAAc,~~CAACC~~,~~OAAO~~,~~CAACJ,MAAAA,CAAO,CAAC,~~CAAA,GAAA,OAAA,CAAA,CAAA,~~CAAMgD~~,YAAY,~~CAAC5C~~,~~OAAO~~,~~CAACJ~~,~~MAAAA~~,~~CAAO~~,~~CAAC~~,~~KAG1FoC~~,uBAAAA,~~IAA2BxB~~,IAAAA,KAAS,~~uBACnC~~,KAAA,CAAA,aAAA,~~CAAC+B~~,MAAAA,EAAAA;QACCE,OAAAA,EAAQ,SAAA;AACRC,QAAAA,IAAAA,gBAAM,KAAA,CAAA,aAAA,~~CAAC/C~~,~~mBAAAA~~,EAAAA~~;AAAoBC~~,~~YAAAA~~,~~MAAAA~~,~~EAAQI,QAAQK;;AAC3CsC,~~QAAAA,OAAAA,EAAS,~~IAAMhC~~,QAAAA,CAAS;gBAAEH,IAAAA,EAAM,YAAA;~~AAAcgB~~,gBAAAA,MAAAA,EAAQC,~~WAAWoB~~;AAAkB,aAAA;;;;wBAKrF,KAAA,CAAA,aAAA,~~CAACN~~,MAAAA,EAAAA;QACCE,OAAAA,EAAQ,SAAA;AACRE,QAAAA,OAAAA,EAAS,~~IAAMhC~~,QAAAA,CAAS;gBAAEH,IAAAA,EAAM,YAAA;~~AAAcgB~~,gBAAAA,MAAAA,EAAQC,~~WAAWqB~~;AAAkB,aAAA;;;;;AAO7F;;;;"}
1	+ {"version":3,"file":"WalletButtons.mjs","sources":["../../../../../../../../../../web/src/ui/b2c/screens/Crypto/WalletButtons.tsx"],"sourcesContent":["import * as React from 'react';\nimport { MessageDescriptor } from '@lingui/core';\nimport { msg } from '@lingui/core/macro';\nimport { useLingui } from '@lingui/react/macro';\nimport { Wallets } from '@stytch/core/public';\n\nimport { useConfig, useGlobalReducer, AppScreens } from '../../GlobalContextProvider';\nimport { WalletToText, isWalletVisible, useCryptoIcon } from '../../../../utils/crypto';\nimport ButtonColumn from '../../../components/molecules/ButtonColumn';\nimport Button from '../../../components/atoms/Button';\nimport { GenericWalletIcon } from '../../../../assets';\n\nconst MAX_BUTTONS = 6;\n\nconst walletMessages = {\n [Wallets.Phantom]: msg({ id: 'crypto.wallet.continueWithPhantom', message: 'Continue with Phantom' }),\n [Wallets.Binance]: msg({ id: 'crypto.wallet.continueWithBinance', message: 'Continue with Binance' }),\n [Wallets.Coinbase]: msg({ id: 'crypto.wallet.continueWithCoinbase', message: 'Continue with Coinbase' }),\n [Wallets.Metamask]: msg({ id: 'crypto.wallet.continueWithMetamask', message: 'Continue with Metamask' }),\n [Wallets.GenericEthereumWallet]: msg({\n id: 'crypto.wallet.continueWithEthereum',\n message: 'Continue with Other Ethereum Wallet',\n }),\n [Wallets.GenericSolanaWallet]: msg({\n id: 'crypto.wallet.continueWithSolana',\n message: 'Continue with Other Solana Wallet',\n }),\n} satisfies Record<Wallets, MessageDescriptor>;\n\nexport const CryptoWalletButtons = ({ type }: { type: 'main' \| 'other' }) => {\n const { t } = useLingui();\n const [state, dispatch] = useGlobalReducer();\n const config = useConfig();\n\n const getCryptoIcon = useCryptoIcon();\n\n const oAuthOptions = config.oauthOptions?.providers.length ?? 0;\n\n // Crypto Buttons on screen = Maximum Buttons - OAuth Buttons - 1 (Other crypto or set up new wallet)\n const cryptoButtonsOnMainScreen = MAX_BUTTONS - oAuthOptions - 1;\n const onWalletStart = (wallet: Wallets) => {\n dispatch({\n type: 'update_crypto_state',\n cryptoState: {\n ...state.formState.cryptoState,\n walletOption: wallet,\n },\n });\n dispatch({ type: 'transition', screen: AppScreens.CryptoConnect });\n };\n\n const allDetectedWallets = (Object.keys(Wallets) as (keyof typeof Wallets)[]).filter((wallet) =>\n isWalletVisible(Wallets[wallet]),\n );\n\n const renderOtherScreenButton = allDetectedWallets.length > cryptoButtonsOnMainScreen;\n\n const mainWallets = allDetectedWallets.slice(0, cryptoButtonsOnMainScreen);\n const otherWallet = allDetectedWallets.slice(cryptoButtonsOnMainScreen);\n\n const walletsToRender = type === 'main' ? mainWallets : otherWallet;\n\n return (\n <ButtonColumn>\n {walletsToRender.map((wallet) => {\n const walletEnum = Wallets[wallet];\n const Icon = getCryptoIcon(walletEnum);\n return (\n <Button key={wallet} variant=\"outline\" icon={<Icon />} onClick={() => onWalletStart(walletEnum)}>\n {type === 'main' ? t(walletMessages[walletEnum]) : t(WalletToText[walletEnum])}\n </Button>\n );\n })}\n\n {renderOtherScreenButton && type === 'main' ? (\n <Button\n variant=\"outline\"\n icon={<GenericWalletIcon />}\n onClick={() => dispatch({ type: 'transition', screen: AppScreens.CryptoOtherScreen })}\n >\n {t(msg({ id: 'crypto.wallet.continueWithOtherWallet', message: 'Continue with other Crypto Wallet' }))}\n </Button>\n ) : (\n <Button\n variant=\"outline\"\n onClick={() => dispatch({ type: 'transition', screen: AppScreens.CryptoSetupWallet })}\n >\n {t(msg({ id: 'crypto.wallet.setupNewWallet', message: 'Set up a new crypto wallet' }))}\n </Button>\n )}\n </ButtonColumn>\n );\n};\n"],"names":["MAX_BUTTONS","walletMessages","Wallets","Phantom","Binance","Coinbase","Metamask","GenericEthereumWallet","GenericSolanaWallet","CryptoWalletButtons","type","useLingui","state","dispatch","useGlobalReducer","config","useConfig","getCryptoIcon","useCryptoIcon","oAuthOptions","oauthOptions","providers","length","cryptoButtonsOnMainScreen","onWalletStart","wallet","cryptoState","formState","walletOption","screen","AppScreens","CryptoConnect","allDetectedWallets","Object","keys","filter","isWalletVisible","renderOtherScreenButton","mainWallets","slice","otherWallet","walletsToRender","ButtonColumn","map","walletEnum","Icon","Button","key","variant","icon","onClick","WalletToText","GenericWalletIcon","CryptoOtherScreen","CryptoSetupWallet"],"mappings":";;;;;;;;;AAYA,MAAMA,WAAAA,GAAc,CAAA;AAEpB,MAAMC,cAAAA,GAAiB;IACrB,CAACC,OAAAA,CAAQC,OAAO,GAAC;;;;IACjB,CAACD,OAAAA,CAAQE,OAAO,GAAC;;;;IACjB,CAACF,OAAAA,CAAQG,QAAQ,GAAC;;;;IAClB,CAACH,OAAAA,CAAQI,QAAQ,GAAC;;;;IAClB,CAACJ,OAAAA,CAAQK,qBAAqB,GAAC;;;;IAI/B,CAACL,OAAAA,CAAQM,mBAAmB,GAAC;;;;AAI/B,CAAA;AAEO,MAAMC,mBAAAA,GAAsB,CAAC,EAAEC,IAAI,EAA8B,GAAA;AACtE,IAAA,MAAM,EAAA,IAAA,EAAA,OAAA,EAAA,CAAA,EAAA,GAAA,EAAA,GAAQC,SAAAA,EAAAA;IACd,MAAM,CAACC,KAAAA,EAAOC,QAAAA,CAAS,GAAGC,gBAAAA,EAAAA;AAC1B,IAAA,MAAMC,MAAAA,GAASC,SAAAA,EAAAA;AAEf,IAAA,MAAMC,aAAAA,GAAgBC,aAAAA,EAAAA;AAEtB,IAAA,MAAMC,YAAAA,GAAeJ,MAAAA,CAAOK,YAAY,EAAEC,UAAUC,MAAAA,IAAU,CAAA;;IAG9D,MAAMC,yBAAAA,GAA4BvB,cAAcmB,YAAAA,GAAe,CAAA;AAC/D,IAAA,MAAMK,gBAAgB,CAACC,MAAAA,GAAAA;QACrBZ,QAAAA,CAAS;YACPH,IAAAA,EAAM,qBAAA;YACNgB,WAAAA,EAAa;gBACX,GAAGd,KAAAA,CAAMe,SAAS,CAACD,WAAW;gBAC9BE,YAAAA,EAAcH;AAChB;AACF,SAAA,CAAA;QACAZ,QAAAA,CAAS;YAAEH,IAAAA,EAAM,YAAA;AAAcmB,YAAAA,MAAAA,EAAQC,WAAWC;AAAc,SAAA,CAAA;AAClE,IAAA,CAAA;AAEA,IAAA,MAAMC,kBAAAA,GAAsBC,MAAAA,CAAOC,IAAI,CAAChC,OAAAA,CAAAA,CAAsCiC,MAAM,CAAC,CAACV,MAAAA,GACpFW,eAAAA,CAAgBlC,OAAO,CAACuB,MAAAA,CAAO,CAAA,CAAA;IAGjC,MAAMY,uBAAAA,GAA0BL,kBAAAA,CAAmBV,MAAM,GAAGC,yBAAAA;AAE5D,IAAA,MAAMe,WAAAA,GAAcN,kBAAAA,CAAmBO,KAAK,CAAC,CAAA,EAAGhB,yBAAAA,CAAAA;IAChD,MAAMiB,WAAAA,GAAcR,kBAAAA,CAAmBO,KAAK,CAAChB,yBAAAA,CAAAA;IAE7C,MAAMkB,eAAAA,GAAkB/B,IAAAA,KAAS,MAAA,GAAS4B,WAAAA,GAAcE,WAAAA;AAExD,IAAA,qBACE,KAAA,CAAA,aAAA,CAACE,YAAAA,EAAAA,IAAAA,EACED,eAAAA,CAAgBE,GAAG,CAAC,CAAClB,MAAAA,GAAAA;QACpB,MAAMmB,UAAAA,GAAa1C,OAAO,CAACuB,MAAAA,CAAO;AAClC,QAAA,MAAMoB,OAAO5B,aAAAA,CAAc2B,UAAAA,CAAAA;AAC3B,QAAA,qBACE,KAAA,CAAA,aAAA,CAACE,MAAAA,EAAAA;YAAOC,GAAAA,EAAKtB,MAAAA;YAAQuB,OAAAA,EAAQ,SAAA;AAAUC,YAAAA,IAAAA,gBAAM,KAAA,CAAA,aAAA,CAACJ,IAAAA,EAAAA,IAAAA,CAAAA;AAASK,YAAAA,OAAAA,EAAS,IAAM1B,aAAAA,CAAcoB,UAAAA;AACjFlC,SAAAA,EAAAA,IAAAA,KAAS,mBAAWT,cAAc,CAAC2C,WAAW,CAAA,GAAA,OAAA,CAAA,CAAA,CAAMO,YAAY,CAACP,UAAAA,CAAW,CAAA,CAAA;IAGnF,CAAA,CAAA,EAECP,uBAAAA,IAA2B3B,IAAAA,KAAS,MAAA,iBACnC,KAAA,CAAA,aAAA,CAACoC,MAAAA,EAAAA;QACCE,OAAAA,EAAQ,SAAA;AACRC,QAAAA,IAAAA,gBAAM,KAAA,CAAA,aAAA,CAACG,iBAAAA,EAAAA,IAAAA,CAAAA;AACPF,QAAAA,OAAAA,EAAS,IAAMrC,QAAAA,CAAS;gBAAEH,IAAAA,EAAM,YAAA;AAAcmB,gBAAAA,MAAAA,EAAQC,WAAWuB;AAAkB,aAAA;;;;wBAKrF,KAAA,CAAA,aAAA,CAACP,MAAAA,EAAAA;QACCE,OAAAA,EAAQ,SAAA;AACRE,QAAAA,OAAAA,EAAS,IAAMrC,QAAAA,CAAS;gBAAEH,IAAAA,EAAM,YAAA;AAAcmB,gBAAAA,MAAAA,EAAQC,WAAWwB;AAAkB,aAAA;;;;;AAO7F;;;;"}

package/dist/esm/packages/web/src/ui/compat/styleToTheme.mjs CHANGED Viewed

@@ -28,6 +28,8 @@
     const theme = {};
     const options = {};
     const { colors, container, inputs, hideHeaderText, buttons, logo, fontFamily, ...outerEmpty } = styleConfig;
+    // presentation.theme mapping
+    // ------------------------------------------------
     theme['font-family'] = fontFamily;
     if (colors) {
         const { primary, secondary, success, warning, accent, error, ...expectEmpty } = colors;