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

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

@@ -1 +1 @@
-{"version":3,"file":"PasskeyRegistrationContainer.mjs","sources":["../../../../../../../../web/src/ui/b2c/PasskeyRegistrationContainer.tsx"],"sourcesContent":["import React, { useState, useEffect } from 'react';\nimport { StytchProjectConfigurationInput } from '@stytch/core/public';\nimport { messages } from '../../messages/en';\nimport { I18nProviderWrapper } from '../components/atoms/I18nProviderWrapper';\nimport { GlobalContextProvider, DEFAULT_STATE, AppState, AppScreens } from './GlobalContextProvider';\nimport Container from './Container';\nimport { SDKConfig } from '../../types';\nimport { readB2CInternals } from '../../utils/internal';\nimport { usePresentationWithDefault, PresentationContext } from '../components/PresentationConfig';\nimport { passkeyRegistration } from './Products';\nimport { addProduct } from './utils';\n\nexport const PasskeyRegistrationContainer = <TProjectConfiguration extends StytchProjectConfigurationInput>({\n  client,\n  config: rawConfig,\n  presentation,\n  callbacks,\n  strings,\n}: SDKConfig<TProjectConfiguration>) => {\n  const config = addProduct(rawConfig, passkeyRegistration);\n\n  /**\n   * Read the watermark out of sync storage, then read it out of async storage\n   */\n  const [displayWatermark, setDisplayWatermark] = useState(() => {\n    const { displayWatermark } = readB2CInternals(client).bootstrap.getSync();\n    return displayWatermark;\n  });\n\n  useEffect(() => {\n    readB2CInternals(client)\n      .bootstrap.getAsync()\n      .then(({ displayWatermark }) => {\n        setDisplayWatermark(displayWatermark);\n      });\n  }, [client]);\n\n  const initialState: AppState = {\n    ...DEFAULT_STATE,\n    screen: AppScreens.PasskeyRegistrationStart,\n    formState: {\n      ...DEFAULT_STATE.formState,\n    },\n  };\n\n  const presentationValue = usePresentationWithDefault(presentation, displayWatermark, config.products, 'Products');\n\n  return (\n    <GlobalContextProvider client={client} config={config} callbacks={callbacks} initialState={initialState}>\n      <PresentationContext.Provider value={presentationValue}>\n        <I18nProviderWrapper messages={messages} overrides={strings}>\n          <Container />\n        </I18nProviderWrapper>\n      </PresentationContext.Provider>\n    </GlobalContextProvider>\n  );\n};\n"],"names":["PasskeyRegistrationContainer","client","config","rawConfig","presentation","callbacks","strings","addProduct","passkeyRegistration","displayWatermark","setDisplayWatermark","useState","readB2CInternals","bootstrap","getSync","useEffect","getAsync","then","initialState","DEFAULT_STATE","screen","AppScreens","PasskeyRegistrationStart","formState","presentationValue","usePresentationWithDefault","products","React","GlobalContextProvider","PresentationContext","Provider","value","I18nProviderWrapper","messages","overrides","Container"],"mappings":";;;;;;;;;;AAYO,MAAMA,4BAAAA,GAA+B,CAAgE,EAC1GC,MAAM,EACNC,MAAAA,EAAQC,SAAS,EACjBC,YAAY,EACZC,SAAS,EACTC,OAAO,EAC0B,GAAA;IACjC,MAAMJ,MAAAA,GAASK,WAAWJ,SAAAA,EAAWK,mBAAAA,CAAAA;AAErC;;AAEC,MACD,MAAM,CAACC,gBAAAA,EAAkBC,mBAAAA,CAAoB,GAAGC,QAAAA,CAAS,IAAA;QACvD,MAAM,EAAEF,gBAAgB,EAAE,GAAGG,iBAAiBX,MAAAA,CAAAA,CAAQY,SAAS,CAACC,OAAO,EAAA;QACvE,OAAOL,gBAAAA;AACT,IAAA,CAAA,CAAA;IAEAM,SAAAA,CAAU,IAAA;QACRH,gBAAAA,CAAiBX,MAAAA,CAAAA,CACdY,SAAS,CAACG,QAAQ,EAAA,CAClBC,IAAI,CAAC,CAAC,EAAER,gBAAgB,EAAE,GAAA;YACzBC,mBAAAA,CAAoBD,gBAAAA,CAAAA;AACtB,QAAA,CAAA,CAAA;IACJ,CAAA,EAAG;AAACR,QAAAA;AAAO,KAAA,CAAA;AAEX,IAAA,MAAMiB,YAAAA,GAAyB;AAC7B,QAAA,GAAGC,aAAa;AAChBC,QAAAA,MAAAA,EAAQC,WAAWC,wBAAwB;QAC3CC,SAAAA,EAAW;AACT,YAAA,GAAGJ,cAAcI;AACnB;AACF,KAAA;AAEA,IAAA,MAAMC,oBAAoBC,0BAAAA,CAA2BrB,YAAAA,EAAcK,gBAAAA,EAAkBP,MAAAA,CAAOwB,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;;;;"}
+{"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

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

@@ -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;;;;"}
+{"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/components/OAuthButton.mjs

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

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

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

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

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

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

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

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

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

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

@@ -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":"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"}
+{"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, useCryptoButtonProps } 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 { getIcon, getId } = useCryptoButtonProps();\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 = getIcon(walletEnum);\n        return (\n          <Button\n            key={wallet}\n            variant=\"outline\"\n            icon={<Icon />}\n            onClick={() => onWalletStart(walletEnum)}\n            id={getId(walletEnum)}\n          >\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          id={getId(Wallets.GenericEthereumWallet)}\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","getIcon","getId","useCryptoButtonProps","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","id","WalletToText","GenericWalletIcon","CryptoOtherScreen","CryptoSetupWallet"],"mappings":"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"}

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

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

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

@@ -1 +1 @@
-{"version":3,"file":"styleToTheme.mjs","sources":["../../../../../../../../web/src/ui/compat/styleToTheme.ts"],"sourcesContent":["import type { StyleConfig } from '@stytch/core/public';\nimport type { Theme } from '../components/themes/ThemeConfig';\nimport type { PresentationOptions } from '../components/PresentationConfig';\nimport { logger } from '@stytch/core';\n\n/* eslint-disable lingui/no-unlocalized-strings */\n\n/**\n * Maps a legacy StyleConfig to the new Theme format.\n *\n * This is a best-effort mapping - some StyleConfig properties don't have\n * direct equivalents in Theme, and some Theme properties don't have\n * StyleConfig equivalents.\n *\n * StyleConfig properties that don't have good mappings to Theme:\n *  - inputs.placeholderColor - No equivalent (could potentially map to muted-foreground)\n *  - inputs.textColor - Mapped to foreground as approximation, but is input-specific\n *  - buttons.primary.borderColor - No specific mapping (could use border but loses specificity)\n *  - buttons.primary.borderRadius - Mapped to button-radius but loses primary-specific control\n *  - buttons.secondary.borderColor - No specific mapping (could use border but loses specificity)\n *  - buttons.secondary.borderRadius - Mapped to button-radius but loses secondary-specific control\n *  - buttons.disabled.* - No equivalents (disabled state styling not in Theme)\n *\n * Theme properties that don't have StyleConfig equivalents:\n *  - 'transition-duration' - defaulted to 0 instead of 0.15s in our new default theme\n *  - 'font-family-mono' - defaults to theme default which is system UI monospace\n *  - 'text-base' - defaults to 1rem which is close to the old font sizes\n *  - spacing - defaults to new theme default which is close but not equivalent to old spacing\n *  - shadow, 'shadow-button', 'shadow-input' - no default in new theme\n *  - foreground - Approximated from inputs.textColor but not exact\n *  - muted, 'muted-foreground'\n *  - 'accent-foreground'\n *  - ring - previously defaults to OS default focus outline color\n */\nexport function styleToTheme(\n  styleConfig: StyleConfig,\n  { silent }: { silent?: boolean } = {},\n): {\n  theme: Partial<Theme>;\n  options: Partial<PresentationOptions>;\n} {\n  const warn = silent\n    ? () => {\n        // noop\n      }\n    : logger.warn;\n  const error = silent\n    ? () => {\n        // noop\n      }\n    : logger.error;\n\n  const theme: Partial<Theme> = {};\n  const options: Partial<PresentationOptions> = {};\n\n  const { colors, container, inputs, hideHeaderText, buttons, logo, fontFamily, ...outerEmpty } = styleConfig;\n\n  // presentation.theme mapping\n  // ------------------------------------------------\n  if (process.env.NODE_ENV !== 'production') {\n    warn(\n      \"styleToTheme: We recommend setting theme['color-scheme'] to either 'light' or 'dark' explicitly depending on whether this is a light or dark theme. This enables icons to automatically automatically apply contrasting colors.\",\n    );\n\n    if (Object.keys(outerEmpty).length > 0) warn('styleToTheme: Unrecognized style properties', outerEmpty);\n  }\n\n  theme['font-family'] = fontFamily;\n\n  if (colors) {\n    const { primary, secondary, success, warning, accent, error, ...expectEmpty } = colors;\n    if (process.env.NODE_ENV !== 'production') {\n      if (Object.keys(expectEmpty).length > 0) warn('styleToTheme: Unrecognized style.colors properties', expectEmpty);\n    }\n\n    Object.assign(theme, {\n      primary,\n      secondary,\n      success,\n      warning,\n      accent,\n      destructive: error,\n    } satisfies Partial<Theme>);\n  }\n\n  if (container) {\n    const { backgroundColor, borderColor, width, borderRadius, ...expectEmpty } = container;\n\n    if (process.env.NODE_ENV !== 'production') {\n      if (Object.keys(expectEmpty).length > 0)\n        warn('styleToTheme: Unrecognized style.container properties', expectEmpty);\n    }\n\n    Object.assign(theme, {\n      background: backgroundColor,\n      border: borderColor,\n      'container-width': width,\n      // 1/4 because the new base is quite small and most components use a 2x or 4x multiplier\n      'rounded-base': updateLength(borderRadius, 0.25),\n    } satisfies Partial<Theme>);\n  }\n\n  if (buttons) {\n    const { primary, secondary, disabled, ...expectEmpty } = buttons;\n\n    if (process.env.NODE_ENV !== 'production') {\n      if (Object.keys(expectEmpty).length > 0) warn('styleToTheme: Unrecognized style.buttons properties', expectEmpty);\n\n      if (disabled && Object.keys(disabled).length > 0)\n        warn('styleToTheme: buttons.disabled is no longer supported', { disabled });\n\n      if (primary?.borderColor && primary?.backgroundColor && primary.borderColor !== primary.backgroundColor)\n        error(\n          \"styleToTheme: primary button's border color is now always equal to background color, having distinct colors is no longer supported\",\n          {\n            borderColor: primary.borderColor,\n            backgroundColor: primary.backgroundColor,\n          },\n        );\n\n      if (secondary?.borderColor && secondary.textColor && secondary.borderColor !== secondary.textColor)\n        error(\"styleToTheme: secondary button's border color is now always equal to text color\", {\n          borderColor: secondary.borderColor,\n          textColor: secondary.textColor,\n        });\n\n      if (primary?.borderRadius !== secondary?.borderRadius)\n        error('styleToTheme: All buttons must use the same border-radius', {\n          primaryRadius: primary?.borderRadius,\n          secondaryRadius: secondary?.borderRadius,\n        });\n    }\n\n    // Set background and text colors\n    Object.assign(theme, {\n      primary: primary?.backgroundColor,\n      'primary-foreground': primary?.textColor,\n\n      secondary: secondary?.backgroundColor,\n      'secondary-foreground': secondary?.textColor,\n    } satisfies Partial<Theme>);\n\n    // Set border radius\n    if (primary?.borderRadius || secondary?.borderRadius) {\n      // Conflicts between primary and secondary border radius is handled above\n      const baseRadius = updateLength(primary?.borderRadius, 0.5) ?? updateLength(secondary?.borderRadius, 0.5);\n\n      if (theme['rounded-base']) {\n        if (theme['rounded-base'] !== baseRadius) {\n          theme['button-radius'] = primary?.borderRadius;\n        }\n      } else {\n        theme['rounded-base'] = baseRadius;\n      }\n    }\n  }\n\n  if (inputs) {\n    const { backgroundColor, textColor, placeholderColor, borderColor, borderRadius, ...expectEmpty } = inputs;\n    if (process.env.NODE_ENV !== 'production') {\n      if (Object.keys(expectEmpty).length > 0) warn('styleToTheme: Unrecognized style.buttons properties', expectEmpty);\n\n      if (backgroundColor && theme.background && theme.background !== backgroundColor)\n        error('styleToTheme: Input now always use the container background', {\n          inputBackground: backgroundColor,\n          containerBackground: theme.background,\n        });\n    }\n\n    Object.assign(theme, {\n      foreground: textColor,\n      input: borderColor,\n      'muted-foreground': placeholderColor,\n    } satisfies Partial<Theme>);\n\n    // Set border radius\n    if (theme['rounded-base']) {\n      if (theme['rounded-base'] !== borderRadius) {\n        theme['input-radius'] = borderRadius;\n      }\n    } else {\n      theme['rounded-base'] = borderRadius;\n    }\n  }\n\n  // presentation.options mapping\n  // ------------------------------------------------\n\n  options.hideHeaderText = hideHeaderText;\n  if (logo?.logoImageUrl) {\n    options.logo = {\n      url: logo.logoImageUrl,\n      alt: '',\n    };\n\n    if (process.env.NODE_ENV !== 'production') {\n      logger.warn('styleToTheme: Please set options.logo.alt for the logo alt text for accessibility');\n    }\n  }\n\n  return { theme: removeEmptyValues(theme), options: removeEmptyValues(options) };\n}\n\nfunction removeEmptyValues<T extends Record<string, unknown>>(obj: T): T {\n  return Object.fromEntries(Object.entries(obj).filter(([, value]) => value != null && value !== '')) as T;\n}\n\nfunction updateLength(length: string | undefined, factor: number): string | undefined {\n  if (!length) return length;\n\n  // Loose check that this is a numeric and not keyword value\n  const value = parseFloat(length);\n  if (Number.isNaN(value)) return length;\n\n  return `calc(${length} * ${factor})`;\n}\n"],"names":["styleToTheme","styleConfig","silent","theme","options","colors","container","inputs","hideHeaderText","buttons","logo","fontFamily","outerEmpty","primary","secondary","success","warning","accent","error","expectEmpty","Object","assign","destructive","backgroundColor","borderColor","width","borderRadius","background","border","updateLength","disabled","textColor","baseRadius","placeholderColor","foreground","input","logoImageUrl","url","alt","removeEmptyValues","obj","fromEntries","entries","filter","value","length","factor","parseFloat","Number","isNaN"],"mappings":"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"}
+{"version":3,"file":"styleToTheme.mjs","sources":["../../../../../../../../web/src/ui/compat/styleToTheme.ts"],"sourcesContent":["import type { StyleConfig } from '@stytch/core/public';\nimport type { Theme } from '../components/themes/ThemeConfig';\nimport type { PresentationOptions } from '../components/PresentationConfig';\nimport { logger, RUN_IN_DEV } from '@stytch/core';\n\n/* eslint-disable lingui/no-unlocalized-strings */\n\n/**\n * Maps a legacy StyleConfig to the new Theme format.\n *\n * This is a best-effort mapping - some StyleConfig properties don't have\n * direct equivalents in Theme, and some Theme properties don't have\n * StyleConfig equivalents.\n *\n * StyleConfig properties that don't have good mappings to Theme:\n *  - inputs.placeholderColor - No equivalent (could potentially map to muted-foreground)\n *  - inputs.textColor - Mapped to foreground as approximation, but is input-specific\n *  - buttons.primary.borderColor - No specific mapping (could use border but loses specificity)\n *  - buttons.primary.borderRadius - Mapped to button-radius but loses primary-specific control\n *  - buttons.secondary.borderColor - No specific mapping (could use border but loses specificity)\n *  - buttons.secondary.borderRadius - Mapped to button-radius but loses secondary-specific control\n *  - buttons.disabled.* - No equivalents (disabled state styling not in Theme)\n *\n * Theme properties that don't have StyleConfig equivalents:\n *  - 'transition-duration' - defaulted to 0 instead of 0.15s in our new default theme\n *  - 'font-family-mono' - defaults to theme default which is system UI monospace\n *  - 'text-base' - defaults to 1rem which is close to the old font sizes\n *  - spacing - defaults to new theme default which is close but not equivalent to old spacing\n *  - shadow, 'shadow-button', 'shadow-input' - no default in new theme\n *  - foreground - Approximated from inputs.textColor but not exact\n *  - muted, 'muted-foreground'\n *  - 'accent-foreground'\n *  - ring - previously defaults to OS default focus outline color\n */\nexport function styleToTheme(\n  styleConfig: StyleConfig,\n  { silent }: { silent?: boolean } = {},\n): {\n  theme: Partial<Theme>;\n  options: Partial<PresentationOptions>;\n} {\n  const warn = silent\n    ? () => {\n        // noop\n      }\n    : logger.warn;\n  const error = silent\n    ? () => {\n        // noop\n      }\n    : logger.error;\n\n  const theme: Partial<Theme> = {};\n  const options: Partial<PresentationOptions> = {};\n\n  const { colors, container, inputs, hideHeaderText, buttons, logo, fontFamily, ...outerEmpty } = styleConfig;\n\n  // presentation.theme mapping\n  // ------------------------------------------------\n  RUN_IN_DEV(() => {\n    warn(\n      \"styleToTheme: We recommend setting theme['color-scheme'] to either 'light' or 'dark' explicitly \" +\n        'depending on whether this is a light or dark theme. This enables icons to automatically automatically ' +\n        'apply contrasting colors.',\n    );\n\n    if (Object.keys(outerEmpty).length > 0) warn('styleToTheme: Unrecognized style properties', outerEmpty);\n  });\n\n  theme['font-family'] = fontFamily;\n\n  if (colors) {\n    const { primary, secondary, success, warning, accent, error, ...expectEmpty } = colors;\n    RUN_IN_DEV(() => {\n      if (Object.keys(expectEmpty).length > 0) warn('styleToTheme: Unrecognized style.colors properties', expectEmpty);\n    });\n\n    Object.assign(theme, {\n      primary,\n      secondary,\n      success,\n      warning,\n      accent,\n      destructive: error,\n    } satisfies Partial<Theme>);\n  }\n\n  if (container) {\n    const { backgroundColor, borderColor, width, borderRadius, ...expectEmpty } = container;\n\n    RUN_IN_DEV(() => {\n      if (Object.keys(expectEmpty).length > 0)\n        warn('styleToTheme: Unrecognized style.container properties', expectEmpty);\n    });\n\n    Object.assign(theme, {\n      background: backgroundColor,\n      border: borderColor,\n      'container-width': width,\n      // 1/4 because the new base is quite small and most components use a 2x or 4x multiplier\n      'rounded-base': updateLength(borderRadius, 0.25),\n    } satisfies Partial<Theme>);\n  }\n\n  if (buttons) {\n    const { primary, secondary, disabled, ...expectEmpty } = buttons;\n\n    RUN_IN_DEV(() => {\n      if (Object.keys(expectEmpty).length > 0) warn('styleToTheme: Unrecognized style.buttons properties', expectEmpty);\n\n      if (disabled && Object.keys(disabled).length > 0)\n        warn('styleToTheme: buttons.disabled is no longer supported', { disabled });\n\n      if (primary?.borderColor && primary?.backgroundColor && primary.borderColor !== primary.backgroundColor)\n        error(\n          \"styleToTheme: primary button's border color is now always equal to background color; \" +\n            'having distinct colors is no longer supported',\n          {\n            borderColor: primary.borderColor,\n            backgroundColor: primary.backgroundColor,\n          },\n        );\n\n      if (secondary?.borderColor && secondary.textColor && secondary.borderColor !== secondary.textColor)\n        error(\"styleToTheme: secondary button's border color is now always equal to text color\", {\n          borderColor: secondary.borderColor,\n          textColor: secondary.textColor,\n        });\n\n      if (primary?.borderRadius !== secondary?.borderRadius)\n        error('styleToTheme: All buttons must use the same border-radius', {\n          primaryRadius: primary?.borderRadius,\n          secondaryRadius: secondary?.borderRadius,\n        });\n    });\n\n    // Set background and text colors\n    Object.assign(theme, {\n      primary: primary?.backgroundColor,\n      'primary-foreground': primary?.textColor,\n\n      secondary: secondary?.backgroundColor,\n      'secondary-foreground': secondary?.textColor,\n    } satisfies Partial<Theme>);\n\n    // Set border radius\n    if (primary?.borderRadius || secondary?.borderRadius) {\n      // Conflicts between primary and secondary border radius is handled above\n      const baseRadius = updateLength(primary?.borderRadius, 0.5) ?? updateLength(secondary?.borderRadius, 0.5);\n\n      if (theme['rounded-base']) {\n        if (theme['rounded-base'] !== baseRadius) {\n          theme['button-radius'] = primary?.borderRadius;\n        }\n      } else {\n        theme['rounded-base'] = baseRadius;\n      }\n    }\n  }\n\n  if (inputs) {\n    const { backgroundColor, textColor, placeholderColor, borderColor, borderRadius, ...expectEmpty } = inputs;\n    RUN_IN_DEV(() => {\n      if (Object.keys(expectEmpty).length > 0) warn('styleToTheme: Unrecognized style.buttons properties', expectEmpty);\n\n      if (backgroundColor && theme.background && theme.background !== backgroundColor)\n        error('styleToTheme: Input now always use the container background', {\n          inputBackground: backgroundColor,\n          containerBackground: theme.background,\n        });\n    });\n\n    Object.assign(theme, {\n      foreground: textColor,\n      input: borderColor,\n      'muted-foreground': placeholderColor,\n    } satisfies Partial<Theme>);\n\n    // Set border radius\n    if (theme['rounded-base']) {\n      if (theme['rounded-base'] !== borderRadius) {\n        theme['input-radius'] = borderRadius;\n      }\n    } else {\n      theme['rounded-base'] = borderRadius;\n    }\n  }\n\n  // presentation.options mapping\n  // ------------------------------------------------\n\n  options.hideHeaderText = hideHeaderText;\n  if (logo?.logoImageUrl) {\n    options.logo = {\n      url: logo.logoImageUrl,\n      alt: '',\n    };\n\n    RUN_IN_DEV(() => {\n      logger.warn('styleToTheme: Please set options.logo.alt for the logo alt text for accessibility');\n    });\n  }\n\n  return { theme: removeEmptyValues(theme), options: removeEmptyValues(options) };\n}\n\nfunction removeEmptyValues<T extends Record<string, unknown>>(obj: T): T {\n  return Object.fromEntries(Object.entries(obj).filter(([, value]) => value != null && value !== '')) as T;\n}\n\nfunction updateLength(length: string | undefined, factor: number): string | undefined {\n  if (!length) return length;\n\n  // Loose check that this is a numeric and not keyword value\n  const value = parseFloat(length);\n  if (Number.isNaN(value)) return length;\n\n  return `calc(${length} * ${factor})`;\n}\n"],"names":["styleToTheme","styleConfig","silent","theme","options","colors","container","inputs","hideHeaderText","buttons","logo","fontFamily","outerEmpty","primary","secondary","success","warning","accent","error","expectEmpty","Object","assign","destructive","backgroundColor","borderColor","width","borderRadius","background","border","updateLength","disabled","textColor","baseRadius","placeholderColor","foreground","input","logoImageUrl","url","alt","removeEmptyValues","obj","fromEntries","entries","filter","value","length","factor","parseFloat","Number","isNaN"],"mappings":"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"}

package/dist/esm/packages/web/src/ui/components/PresentationConfig.mjs

@@ -46,6 +46,11 @@ function isDynamicTheme(theme) {
 }
 const PresentationContext = createContext(undefined);
 const usePresentation = ()=>useContext(PresentationContext);
+function getButtonId(base, options) {
+    if (options.buttonId == null || options.buttonId === false) return undefined;
+    if (typeof options.buttonId === 'string') return base + options.buttonId;
+    return base;
+}
 
-export { PresentationContext, isDynamicTheme, usePresentation, usePresentationWithDefault };
+export { PresentationContext, getButtonId, isDynamicTheme, usePresentation, usePresentationWithDefault };
 //# sourceMappingURL=PresentationConfig.mjs.map

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

@@ -1 +1 @@
-{"version":3,"file":"PresentationConfig.mjs","sources":["../../../../../../../../web/src/ui/components/PresentationConfig.ts"],"sourcesContent":["import { defaultTheme } from './themes/themes';\nimport { createContext, useContext, useMemo } from 'react';\nimport { PresentationConfig } from '../../types';\nimport { Theme } from './themes/ThemeConfig';\nimport { useMediaQuery } from '../hooks/useMediaQuery';\nimport { IconRegistry } from './IconRegistry';\nimport { IconNames } from '../b2c/components/Icons';\nimport { logger } from '@stytch/core';\n\nexport type PresentationOptions = {\n  /**\n   * When this value is false, the title and description text will not show in the SDK.\n   */\n  hideHeaderText: boolean;\n\n  /**\n   * Optional suffix for <input> id attribute so input IDs are unique.\n   */\n  inputIdSuffix?: string;\n\n  /**\n   * The configuration object for your custom logo.\n   */\n  logo?: {\n    /**\n     * The URL of your custom logo.\n     */\n    url: string;\n\n    /**\n     * Alt text for the logo. This would usually be the name of the website or your company,\n     * unless this is already repeated nearby in which case this should be left empty.\n     */\n    alt: string;\n  };\n\n  /**\n   * Override our icons. Currently, this only supports logos, such as those that appear in Oauth buttons.\n   * This should be an object where the key is the icon name and the value is a React component\n   * (not React element) with a size prop and the rest spread onto the root element.\n   *\n   * Note that custom logos not imported from our packages is not yet available in @stytch/vanilla-js.\n   * We are looking at provide alternatives in the future.\n   *\n   * @example\n   *\n   * // Using a solid black or white icon\n   * import { whiteIcons } from '@stytch/react';\n   *\n   * const presentation = {\n   *   options: {\n   *     icons: {\n   *       outlook: whiteIcons.outlook,\n   *     },\n   *   },\n   * };\n   *\n   * // Using a custom icon\n   * const presentation = {\n   *  icons: {\n   *    outlook: ({ size, ...props }) => (\n   *      <svg width={size} height={size} {...props}>...</svg>\n   *    ),\n   *  },\n   * };\n   */\n  icons?: IconRegistry<string>;\n};\n\nconst defaultOptions: PresentationOptions = {\n  hideHeaderText: false,\n};\n\n/**\n * Internal type -\n * @see {PresentationConfig} is the public one\n */\nexport type Presentation = {\n  theme: Theme;\n  options: PresentationOptions;\n\n  // Internal properties\n  displayWatermark: boolean;\n  iconRegistry: IconRegistry<string>;\n};\n\nexport function usePresentationWithDefault(\n  maybeConfig: PresentationConfig | undefined,\n  displayWatermark: boolean,\n  products: { id: string; icons?: Partial<IconRegistry<IconNames>> }[],\n  productsName?: string,\n): Presentation {\n  const { theme, options } = maybeConfig ?? {};\n\n  if (process.env.NODE_ENV !== 'production') {\n    const stringProducts = products.filter((p) => typeof p === 'string');\n    if (stringProducts.length > 0) {\n      logger.error(\n        `Please add an import for ${productsName} and update config.products to\\n` +\n          'products: [' +\n          products.map((p) => `${productsName}.${typeof p === 'string' ? p : p.id}`).join(', ') +\n          ']',\n      );\n\n      throw new Error(\"'config.products' should not include strings anymore\");\n    }\n  }\n\n  // Switch theme automatically depending on color scheme\n  const isDynamic = isDynamicTheme(theme);\n  const darkMode = useMediaQuery(isDynamic ? '(prefers-color-scheme: dark)' : undefined);\n\n  let effectiveTheme: Partial<Theme> | undefined;\n  if (isDynamic) {\n    effectiveTheme = darkMode ? theme[1] : theme[0];\n  } else {\n    effectiveTheme = theme;\n  }\n\n  // Memoize the icon registry so it only need to be constructed once\n  const iconRegistry = useMemo(() => {\n    const registry: IconRegistry<string> = {};\n    for (const product of products) {\n      Object.assign(registry, product.icons);\n    }\n    Object.assign(registry, options?.icons);\n    return registry;\n  }, [products, options]);\n\n  return {\n    theme: {\n      ...defaultTheme,\n      ...effectiveTheme,\n    },\n    options: {\n      ...defaultOptions,\n      ...options,\n    },\n    displayWatermark,\n    iconRegistry,\n  };\n}\n\nexport function isDynamicTheme(\n  theme: PresentationConfig['theme'],\n): theme is readonly [light: Partial<Theme>, dark: Partial<Theme>] {\n  return Array.isArray(theme);\n}\n\nexport const PresentationContext = createContext<Presentation>(undefined!);\nexport const usePresentation = () => useContext(PresentationContext);\n"],"names":["defaultOptions","hideHeaderText","usePresentationWithDefault","maybeConfig","displayWatermark","products","productsName","theme","options","isDynamic","isDynamicTheme","darkMode","useMediaQuery","undefined","effectiveTheme","iconRegistry","useMemo","registry","product","Object","assign","icons","defaultTheme","Array","isArray","PresentationContext","createContext","usePresentation","useContext"],"mappings":";;;;AAqEA,MAAMA,cAAAA,GAAsC;IAC1CC,cAAAA,EAAgB;AAClB,CAAA;AAeO,SAASC,2BACdC,WAA2C,EAC3CC,gBAAyB,EACzBC,QAAoE,EACpEC,YAAqB,EAAA;AAErB,IAAA,MAAM,EAAEC,KAAK,EAAEC,OAAO,EAAE,GAAGL,eAAe,EAAC;;AAiB3C,IAAA,MAAMM,YAAYC,cAAAA,CAAeH,KAAAA,CAAAA;IACjC,MAAMI,QAAAA,GAAWC,aAAAA,CAAcH,SAAAA,GAAY,8BAAA,GAAiCI,SAAAA,CAAAA;IAE5E,IAAIC,cAAAA;AACJ,IAAA,IAAIL,SAAAA,EAAW;AACbK,QAAAA,cAAAA,GAAiBH,WAAWJ,KAAK,CAAC,EAAE,GAAGA,KAAK,CAAC,CAAA,CAAE;IACjD,CAAA,MAAO;QACLO,cAAAA,GAAiBP,KAAAA;AACnB,IAAA;;AAGA,IAAA,MAAMQ,eAAeC,OAAAA,CAAQ,IAAA;AAC3B,QAAA,MAAMC,WAAiC,EAAC;QACxC,KAAK,MAAMC,WAAWb,QAAAA,CAAU;AAC9Bc,YAAAA,MAAAA,CAAOC,MAAM,CAACH,QAAAA,EAAUC,OAAAA,CAAQG,KAAK,CAAA;AACvC,QAAA;QACAF,MAAAA,CAAOC,MAAM,CAACH,QAAAA,EAAUT,OAAAA,EAASa,KAAAA,CAAAA;QACjC,OAAOJ,QAAAA;IACT,CAAA,EAAG;AAACZ,QAAAA,QAAAA;AAAUG,QAAAA;AAAQ,KAAA,CAAA;IAEtB,OAAO;QACLD,KAAAA,EAAO;AACL,YAAA,GAAGe,YAAY;AACf,YAAA,GAAGR;AACL,SAAA;QACAN,OAAAA,EAAS;AACP,YAAA,GAAGR,cAAc;AACjB,YAAA,GAAGQ;AACL,SAAA;AACAJ,QAAAA,gBAAAA;AACAW,QAAAA;AACF,KAAA;AACF;AAEO,SAASL,eACdH,KAAkC,EAAA;IAElC,OAAOgB,KAAAA,CAAMC,OAAO,CAACjB,KAAAA,CAAAA;AACvB;AAEO,MAAMkB,mBAAAA,GAAsBC,aAAAA,CAA4Bb,SAAAA;AACxD,MAAMc,eAAAA,GAAkB,IAAMC,UAAAA,CAAWH,mBAAAA;;;;"}
+{"version":3,"file":"PresentationConfig.mjs","sources":["../../../../../../../../web/src/ui/components/PresentationConfig.ts"],"sourcesContent":["import { defaultTheme } from './themes/themes';\nimport { createContext, useContext, useMemo } from 'react';\nimport { PresentationConfig } from '../../types';\nimport { Theme } from './themes/ThemeConfig';\nimport { useMediaQuery } from '../hooks/useMediaQuery';\nimport { IconRegistry } from './IconRegistry';\nimport { IconNames } from '../b2c/components/Icons';\nimport { logger, RUN_IN_DEV } from '@stytch/core';\n\nexport type PresentationOptions = {\n  /**\n   * When this value is false, the header title and description text will be hidden.\n   * This is useful if you prefer to display and style the title outside the Stytch component.\n   */\n  hideHeaderText: boolean;\n\n  /**\n   * Optional suffix for <input> id attribute so input IDs are unique.\n   */\n  inputIdSuffix?: string;\n\n  /**\n   * The configuration object for your custom logo.\n   */\n  logo?: {\n    /**\n     * The URL of your custom logo.\n     */\n    url: string;\n\n    /**\n     * Alt text for the logo. This would usually be the name of the website or your company,\n     * unless this is already repeated nearby in which case this should be left empty.\n     */\n    alt: string;\n  };\n\n  /**\n   * Set to true to add id like 'oauth-google' to buttons, or a string to add a suffix to button ids to make\n   * them more unique. This exists for backwards compatibility. We do not recommend using this to style or\n   * modify elements in Stytch UI.\n   */\n  buttonId?: string | boolean;\n\n  /**\n   * Override our icons. Currently, this only supports logos, such as those that appear in Oauth buttons.\n   * This should be an object where the key is the icon name and the value is a React component\n   * (not React element) with a size prop and the rest spread onto the root element.\n   *\n   * Note that custom logos not imported from our packages is not yet available in @stytch/vanilla-js.\n   * We are looking at provide alternatives in the future.\n   *\n   * @example\n   *\n   * // Using a solid black or white icon\n   * import { whiteIcons } from '@stytch/react';\n   *\n   * const presentation = {\n   *   options: {\n   *     icons: {\n   *       outlook: whiteIcons.outlook,\n   *     },\n   *   },\n   * };\n   *\n   * // Using a custom icon\n   * const presentation = {\n   *  icons: {\n   *    outlook: ({ size, ...props }) => (\n   *      <svg width={size} height={size} {...props}>...</svg>\n   *    ),\n   *  },\n   * };\n   */\n  icons?: IconRegistry<string>;\n};\n\nconst defaultOptions: PresentationOptions = {\n  hideHeaderText: false,\n};\n\n/**\n * Internal type -\n * @see {PresentationConfig} is the public one\n */\nexport type Presentation = {\n  theme: Theme;\n  options: PresentationOptions;\n\n  // Internal properties\n  displayWatermark: boolean;\n  iconRegistry: IconRegistry<string>;\n};\n\nexport function usePresentationWithDefault(\n  maybeConfig: PresentationConfig | undefined,\n  displayWatermark: boolean,\n  products: { id: string; icons?: Partial<IconRegistry<IconNames>> }[],\n  productsName?: string,\n): Presentation {\n  const { theme, options } = maybeConfig ?? {};\n\n  RUN_IN_DEV(() => {\n    const stringProducts = products.filter((p) => typeof p === 'string');\n    if (stringProducts.length > 0) {\n      logger.error(\n        `Please add an import for ${productsName} and update config.products to\\n` +\n          'products: [' +\n          products.map((p) => `${productsName}.${typeof p === 'string' ? p : p.id}`).join(', ') +\n          ']',\n      );\n\n      throw new Error(\"'config.products' should not include strings anymore\");\n    }\n  });\n\n  // Switch theme automatically depending on color scheme\n  const isDynamic = isDynamicTheme(theme);\n  const darkMode = useMediaQuery(isDynamic ? '(prefers-color-scheme: dark)' : undefined);\n\n  let effectiveTheme: Partial<Theme> | undefined;\n  if (isDynamic) {\n    effectiveTheme = darkMode ? theme[1] : theme[0];\n  } else {\n    effectiveTheme = theme;\n  }\n\n  // Memoize the icon registry so it only need to be constructed once\n  const iconRegistry = useMemo(() => {\n    const registry: IconRegistry<string> = {};\n    for (const product of products) {\n      Object.assign(registry, product.icons);\n    }\n    Object.assign(registry, options?.icons);\n    return registry;\n  }, [products, options]);\n\n  return {\n    theme: {\n      ...defaultTheme,\n      ...effectiveTheme,\n    },\n    options: {\n      ...defaultOptions,\n      ...options,\n    },\n    displayWatermark,\n    iconRegistry,\n  };\n}\n\nexport function isDynamicTheme(\n  theme: PresentationConfig['theme'],\n): theme is readonly [light: Partial<Theme>, dark: Partial<Theme>] {\n  return Array.isArray(theme);\n}\n\nexport const PresentationContext = createContext<Presentation>(undefined!);\nexport const usePresentation = () => useContext(PresentationContext);\n\nexport function getButtonId(base: string, options: PresentationOptions) {\n  if (options.buttonId == null || options.buttonId === false) return undefined;\n  if (typeof options.buttonId === 'string') return base + options.buttonId;\n  return base;\n}\n"],"names":["defaultOptions","hideHeaderText","usePresentationWithDefault","maybeConfig","displayWatermark","products","productsName","theme","options","isDynamic","isDynamicTheme","darkMode","useMediaQuery","undefined","effectiveTheme","iconRegistry","useMemo","registry","product","Object","assign","icons","defaultTheme","Array","isArray","PresentationContext","createContext","usePresentation","useContext","getButtonId","base","buttonId"],"mappings":";;;;AA6EA,MAAMA,cAAAA,GAAsC;IAC1CC,cAAAA,EAAgB;AAClB,CAAA;AAeO,SAASC,2BACdC,WAA2C,EAC3CC,gBAAyB,EACzBC,QAAoE,EACpEC,YAAqB,EAAA;AAErB,IAAA,MAAM,EAAEC,KAAK,EAAEC,OAAO,EAAE,GAAGL,eAAe,EAAC;;AAiB3C,IAAA,MAAMM,YAAYC,cAAAA,CAAeH,KAAAA,CAAAA;IACjC,MAAMI,QAAAA,GAAWC,aAAAA,CAAcH,SAAAA,GAAY,8BAAA,GAAiCI,SAAAA,CAAAA;IAE5E,IAAIC,cAAAA;AACJ,IAAA,IAAIL,SAAAA,EAAW;AACbK,QAAAA,cAAAA,GAAiBH,WAAWJ,KAAK,CAAC,EAAE,GAAGA,KAAK,CAAC,CAAA,CAAE;KACjD,MAAO;QACLO,cAAAA,GAAiBP,KAAAA;AACnB,IAAA;;AAGA,IAAA,MAAMQ,eAAeC,OAAAA,CAAQ,IAAA;AAC3B,QAAA,MAAMC,WAAiC,EAAC;QACxC,KAAK,MAAMC,WAAWb,QAAAA,CAAU;AAC9Bc,YAAAA,MAAAA,CAAOC,MAAM,CAACH,QAAAA,EAAUC,OAAAA,CAAQG,KAAK,CAAA;AACvC,QAAA;QACAF,MAAAA,CAAOC,MAAM,CAACH,QAAAA,EAAUT,OAAAA,EAASa,KAAAA,CAAAA;QACjC,OAAOJ,QAAAA;KACT,EAAG;AAACZ,QAAAA,QAAAA;AAAUG,QAAAA;AAAQ,KAAA,CAAA;IAEtB,OAAO;QACLD,KAAAA,EAAO;AACL,YAAA,GAAGe,YAAY;AACf,YAAA,GAAGR;AACL,SAAA;QACAN,OAAAA,EAAS;AACP,YAAA,GAAGR,cAAc;AACjB,YAAA,GAAGQ;AACL,SAAA;AACAJ,QAAAA,gBAAAA;AACAW,QAAAA;AACF,KAAA;AACF;AAEO,SAASL,eACdH,KAAkC,EAAA;IAElC,OAAOgB,KAAAA,CAAMC,OAAO,CAACjB,KAAAA,CAAAA;AACvB;MAEakB,mBAAAA,GAAsBC,aAAAA,CAA4Bb,SAAAA;MAClDc,eAAAA,GAAkB,IAAMC,UAAAA,CAAWH,mBAAAA;AAEzC,SAASI,WAAAA,CAAYC,IAAY,EAAEtB,OAA4B,EAAA;IACpE,IAAIA,OAAAA,CAAQuB,QAAQ,IAAI,IAAA,IAAQvB,QAAQuB,QAAQ,KAAK,OAAO,OAAOlB,SAAAA;IACnE,IAAI,OAAOL,QAAQuB,QAAQ,KAAK,UAAU,OAAOD,IAAAA,GAAOtB,QAAQuB,QAAQ;IACxE,OAAOD,IAAAA;AACT;;;;"}

package/dist/esm/packages/web/src/ui/components/atoms/Button.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Button.mjs","sources":["../../../../../../../../../web/src/ui/components/atoms/Button.tsx"],"sourcesContent":["import React, { ReactNode, KeyboardEventHandler } from 'react';\nimport classNames from 'classnames';\nimport { CircularProgress } from './CircularProgress';\nimport styles from './Button.module.css';\n\nexport type ButtonProps = {\n  variant: 'primary' | 'secondary' | 'outline' | 'ghost' | 'destructive';\n  children: ReactNode;\n\n  /**\n   * Button is full width and content is centered\n   * @default true\n   */\n  block?: boolean;\n\n  icon?: ReactNode;\n\n  /** If true, display a spinner and disables the button */\n  loading?: boolean;\n  disabled?: boolean;\n\n  /**\n   * Unlike HTML <button> we deliberately set the default to button to\n   * avoid bugs where buttons inadvertently submit forms\n   * @default 'button'\n   **/\n  type?: 'button' | 'submit' | 'reset';\n  onClick?: () => void;\n  onKeyDown?: KeyboardEventHandler<HTMLElement>;\n};\n\nexport function buttonClassNames({ variant, block = true }: Pick<ButtonProps, 'variant' | 'block'>) {\n  return classNames(styles.button, styles[variant], {\n    [styles.block]: block,\n  });\n}\n\n// Base renderer for both <a> and <button> based <Button>s\nconst baseButton = (props: ButtonProps & { as?: string }) => {\n  const { as, children, icon, onClick, loading, disabled = loading, block, variant, ...otherProps } = props;\n  const Element = as as 'button';\n\n  let buttonContent = (\n    <>\n      {icon}\n      <span>{children}</span>\n    </>\n  );\n\n  if (loading) {\n    buttonContent = <CircularProgress size={20} />;\n  }\n\n  return (\n    <Element className={buttonClassNames(props)} onClick={onClick} disabled={disabled} {...otherProps}>\n      {buttonContent}\n    </Element>\n  );\n};\n\nconst Button = (props: ButtonProps) =>\n  baseButton({\n    type: 'button',\n    as: 'button',\n    ...props,\n  });\n\nexport default Button;\n\n// Deriving this from ButtonProps is not very neat, but ButtonAnchor is not frequently used\nexport type ButtonAnchorProps = Omit<ButtonProps, 'type' | 'as'> & {\n  href: string;\n  download?: string;\n  target?: string;\n  rel?: string;\n};\n\nexport const ButtonAnchor = (props: ButtonAnchorProps) =>\n  baseButton({\n    ...props,\n    // Links don't fire click event on space while buttons do, so we implement that ourselves for these\n    // https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Reference/Roles/button_role#accessibility_concerns\n    onKeyDown: (evt) => {\n      props.onKeyDown?.(evt);\n      if (evt.defaultPrevented) return;\n      if (evt.key === ' ') evt.currentTarget.click();\n    },\n    as: 'a',\n  });\n"],"names":["buttonClassNames","variant","block","classNames","styles","button","baseButton","props","as","children","icon","onClick","loading","disabled","otherProps","Element","buttonContent","React","span","CircularProgress","size","className","Button","type","ButtonAnchor","onKeyDown","evt","defaultPrevented","key","currentTarget","click"],"mappings":";;;;;AA+BO,SAASA,gBAAAA,CAAiB,EAAEC,OAAO,EAAEC,KAAAA,GAAQ,IAAI,EAA0C,EAAA;AAChG,IAAA,OAAOC,WAAWC,gBAAAA,CAAOC,MAAM,EAAED,gBAAM,CAACH,QAAQ,EAAE;QAChD,CAACG,gBAAAA,CAAOF,KAAK,GAAGA;AAClB,KAAA,CAAA;AACF;AAEA;AACA,MAAMI,aAAa,CAACC,KAAAA,GAAAA;IAClB,MAAM,EAAEC,EAAE,EAAEC,QAAQ,EAAEC,IAAI,EAAEC,OAAO,EAAEC,OAAO,EAAEC,QAAAA,GAAWD,OAAO,EAAEV,KAAK,EAAED,OAAO,EAAE,GAAGa,YAAY,GAAGP,KAAAA;AACpG,IAAA,MAAMQ,OAAAA,GAAUP,EAAAA;AAEhB,IAAA,IAAIQ,aAAAA,iBACFC,cAAA,CAAA,aAAA,CAAAA,cAAA,CAAA,QAAA,EAAA,IAAA,EACGP,IAAAA,gBACDO,cAAA,CAAA,aAAA,CAACC,MAAAA,EAAAA,IAAAA,EAAMT,QAAAA,CAAAA,CAAAA;AAIX,IAAA,IAAIG,OAAAA,EAAS;AACXI,QAAAA,aAAAA,iBAAgBC,cAAA,CAAA,aAAA,CAACE,gBAAAA,EAAAA;YAAiBC,IAAAA,EAAM;;AAC1C,IAAA;AAEA,IAAA,qBACEH,cAAA,CAAA,aAAA,CAACF,OAAAA,EAAAA;AAAQM,QAAAA,SAAAA,EAAWrB,gBAAAA,CAAiBO,KAAAA,CAAAA;QAAQI,OAAAA,EAASA,OAAAA;QAASE,QAAAA,EAAUA,QAAAA;AAAW,QAAA,GAAGC;AACpFE,KAAAA,EAAAA,aAAAA,CAAAA;AAGP,CAAA;AAEA,MAAMM,MAAAA,GAAS,CAACf,KAAAA,GACdD,UAAAA,CAAW;QACTiB,IAAAA,EAAM,QAAA;QACNf,EAAAA,EAAI,QAAA;AACJ,QAAA,GAAGD;AACL,KAAA;AAYK,MAAMiB,YAAAA,GAAe,CAACjB,KAAAA,GAC3BD,UAAAA,CAAW;AACT,QAAA,GAAGC,KAAK;;;AAGRkB,QAAAA,SAAAA,EAAW,CAACC,GAAAA,GAAAA;AACVnB,YAAAA,KAAAA,CAAMkB,SAAS,GAAGC,GAAAA,CAAAA;YAClB,IAAIA,GAAAA,CAAIC,gBAAgB,EAAE;AAC1B,YAAA,IAAID,IAAIE,GAAG,KAAK,KAAKF,GAAAA,CAAIG,aAAa,CAACC,KAAK,EAAA;AAC9C,QAAA,CAAA;QACAtB,EAAAA,EAAI;KACN;;;;"}
+{"version":3,"file":"Button.mjs","sources":["../../../../../../../../../web/src/ui/components/atoms/Button.tsx"],"sourcesContent":["import React, { ReactNode, KeyboardEventHandler } from 'react';\nimport classNames from 'classnames';\nimport { CircularProgress } from './CircularProgress';\nimport styles from './Button.module.css';\n\nexport type ButtonProps = {\n  variant: 'primary' | 'secondary' | 'outline' | 'ghost' | 'destructive';\n  children: ReactNode;\n\n  /**\n   * Button is full width and content is centered\n   * @default true\n   */\n  block?: boolean;\n\n  icon?: ReactNode;\n\n  /** If true, display a spinner and disables the button */\n  loading?: boolean;\n  disabled?: boolean;\n\n  /**\n   * Unlike HTML <button> we deliberately set the default to button to\n   * avoid bugs where buttons inadvertently submit forms\n   * @default 'button'\n   **/\n  type?: 'button' | 'submit' | 'reset';\n  onClick?: () => void;\n  onKeyDown?: KeyboardEventHandler<HTMLElement>;\n  id?: string;\n};\n\nexport function buttonClassNames({ variant, block = true }: Pick<ButtonProps, 'variant' | 'block'>) {\n  return classNames(styles.button, styles[variant], {\n    [styles.block]: block,\n  });\n}\n\n// Base renderer for both <a> and <button> based <Button>s\nconst baseButton = (props: ButtonProps & { as?: string }) => {\n  const { as, children, icon, onClick, loading, disabled = loading, block, variant, ...otherProps } = props;\n  const Element = as as 'button';\n\n  let buttonContent = (\n    <>\n      {icon}\n      <span>{children}</span>\n    </>\n  );\n\n  if (loading) {\n    buttonContent = <CircularProgress size={20} />;\n  }\n\n  return (\n    <Element className={buttonClassNames(props)} onClick={onClick} disabled={disabled} {...otherProps}>\n      {buttonContent}\n    </Element>\n  );\n};\n\nconst Button = (props: ButtonProps) =>\n  baseButton({\n    type: 'button',\n    as: 'button',\n    ...props,\n  });\n\nexport default Button;\n\n// Deriving this from ButtonProps is not very neat, but ButtonAnchor is not frequently used\nexport type ButtonAnchorProps = Omit<ButtonProps, 'type' | 'as'> & {\n  href: string;\n  download?: string;\n  target?: string;\n  rel?: string;\n};\n\nexport const ButtonAnchor = (props: ButtonAnchorProps) =>\n  baseButton({\n    ...props,\n    // Links don't fire click event on space while buttons do, so we implement that ourselves for these\n    // https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Reference/Roles/button_role#accessibility_concerns\n    onKeyDown: (evt) => {\n      props.onKeyDown?.(evt);\n      if (evt.defaultPrevented) return;\n      if (evt.key === ' ') evt.currentTarget.click();\n    },\n    as: 'a',\n  });\n"],"names":["buttonClassNames","variant","block","classNames","styles","button","baseButton","props","as","children","icon","onClick","loading","disabled","otherProps","Element","buttonContent","React","span","CircularProgress","size","className","Button","type","ButtonAnchor","onKeyDown","evt","defaultPrevented","key","currentTarget","click"],"mappings":";;;;;AAgCO,SAASA,gBAAAA,CAAiB,EAAEC,OAAO,EAAEC,KAAAA,GAAQ,IAAI,EAA0C,EAAA;AAChG,IAAA,OAAOC,WAAWC,gBAAAA,CAAOC,MAAM,EAAED,gBAAM,CAACH,QAAQ,EAAE;QAChD,CAACG,gBAAAA,CAAOF,KAAK,GAAGA;AAClB,KAAA,CAAA;AACF;AAEA;AACA,MAAMI,aAAa,CAACC,KAAAA,GAAAA;IAClB,MAAM,EAAEC,EAAE,EAAEC,QAAQ,EAAEC,IAAI,EAAEC,OAAO,EAAEC,OAAO,EAAEC,QAAAA,GAAWD,OAAO,EAAEV,KAAK,EAAED,OAAO,EAAE,GAAGa,YAAY,GAAGP,KAAAA;AACpG,IAAA,MAAMQ,OAAAA,GAAUP,EAAAA;AAEhB,IAAA,IAAIQ,aAAAA,iBACFC,cAAA,CAAA,aAAA,CAAAA,cAAA,CAAA,QAAA,EAAA,IAAA,EACGP,IAAAA,gBACDO,cAAA,CAAA,aAAA,CAACC,MAAAA,EAAAA,IAAAA,EAAMT,QAAAA,CAAAA,CAAAA;AAIX,IAAA,IAAIG,OAAAA,EAAS;AACXI,QAAAA,aAAAA,iBAAgBC,cAAA,CAAA,aAAA,CAACE,gBAAAA,EAAAA;YAAiBC,IAAAA,EAAM;;AAC1C,IAAA;AAEA,IAAA,qBACEH,cAAA,CAAA,aAAA,CAACF,OAAAA,EAAAA;AAAQM,QAAAA,SAAAA,EAAWrB,gBAAAA,CAAiBO,KAAAA,CAAAA;QAAQI,OAAAA,EAASA,OAAAA;QAASE,QAAAA,EAAUA,QAAAA;AAAW,QAAA,GAAGC;AACpFE,KAAAA,EAAAA,aAAAA,CAAAA;AAGP,CAAA;AAEA,MAAMM,MAAAA,GAAS,CAACf,KAAAA,GACdD,UAAAA,CAAW;QACTiB,IAAAA,EAAM,QAAA;QACNf,EAAAA,EAAI,QAAA;AACJ,QAAA,GAAGD;AACL,KAAA;AAYK,MAAMiB,YAAAA,GAAe,CAACjB,KAAAA,GAC3BD,UAAAA,CAAW;AACT,QAAA,GAAGC,KAAK;;;AAGRkB,QAAAA,SAAAA,EAAW,CAACC,GAAAA,GAAAA;AACVnB,YAAAA,KAAAA,CAAMkB,SAAS,GAAGC,GAAAA,CAAAA;YAClB,IAAIA,GAAAA,CAAIC,gBAAgB,EAAE;AAC1B,YAAA,IAAID,IAAIE,GAAG,KAAK,KAAKF,GAAAA,CAAIG,aAAa,CAACC,KAAK,EAAA;AAC9C,QAAA,CAAA;QACAtB,EAAAA,EAAI;KACN;;;;"}

package/dist/esm/packages/web/src/ui/components/atoms/Typography.module.css.mjs

@@ -1,8 +1,8 @@
 import { collectCss } from '../../../../../../internal/style-injector/src/index.mjs';
 
-var css = ".Typography_module_typography__d307cb57{font-family:var(--st-font-family)}.Typography_module_header__d307cb57{color:var(--st-foreground);font-size:var(--st-text-2xl);font-weight:var(--st-font-weight-semibold);line-height:var(--st-line-height-2xl)}.Typography_module_body__d307cb57{color:var(--st-foreground);font-size:var(--st-text-base)}.Typography_module_body__d307cb57,.Typography_module_helper__d307cb57{font-weight:var(--st-font-weight-normal);line-height:var(--st-line-height-base)}.Typography_module_helper__d307cb57{color:var(--st-muted-foreground);font-size:var(--st-text-xs)}.Typography_module_start__d307cb57{text-align:start}.Typography_module_center__d307cb57{text-align:center}.Typography_module_end__d307cb57{text-align:end}.Typography_module_foreground__d307cb57{color:var(--st-foreground)}.Typography_module_muted__d307cb57{color:var(--st-muted-foreground)}.Typography_module_destructive__d307cb57{color:var(--st-destructive)}.Typography_module_warning__d307cb57{color:var(--st-warning)}.Typography_module_success__d307cb57{color:var(--st-success)}.Typography_module_regular__d307cb57{font-weight:var(--st-font-weight-normal)}.Typography_module_medium__d307cb57{font-weight:var(--st-font-weight-medium)}.Typography_module_semibold__d307cb57{font-weight:var(--st-font-weight-semibold)}.Typography_module_bold__d307cb57{font-weight:var(--st-font-weight-bold)}.Typography_module_defaultFont__d307cb57{font-family:var(--st-font-family)}.Typography_module_monoFont__d307cb57{font-family:var(--st-font-family-mono)}";
+var css = ".Typography_module_typography__74817c74{font-family:var(--st-font-family)}.Typography_module_header__74817c74{color:var(--st-foreground);font-family:var(--st-header-font);font-size:var(--st-text-2xl);font-weight:var(--st-font-weight-semibold);line-height:var(--st-line-height-2xl)}.Typography_module_body__74817c74{color:var(--st-foreground);font-size:var(--st-text-base)}.Typography_module_body__74817c74,.Typography_module_helper__74817c74{font-weight:var(--st-font-weight-normal);line-height:var(--st-line-height-base)}.Typography_module_helper__74817c74{color:var(--st-muted-foreground);font-size:var(--st-text-xs)}.Typography_module_start__74817c74{text-align:start}.Typography_module_center__74817c74{text-align:center}.Typography_module_end__74817c74{text-align:end}.Typography_module_foreground__74817c74{color:var(--st-foreground)}.Typography_module_muted__74817c74{color:var(--st-muted-foreground)}.Typography_module_destructive__74817c74{color:var(--st-destructive)}.Typography_module_warning__74817c74{color:var(--st-warning)}.Typography_module_success__74817c74{color:var(--st-success)}.Typography_module_regular__74817c74{font-weight:var(--st-font-weight-normal)}.Typography_module_medium__74817c74{font-weight:var(--st-font-weight-medium)}.Typography_module_semibold__74817c74{font-weight:var(--st-font-weight-semibold)}.Typography_module_bold__74817c74{font-weight:var(--st-font-weight-bold)}.Typography_module_defaultFont__74817c74{font-family:var(--st-font-family)}.Typography_module_monoFont__74817c74{font-family:var(--st-font-family-mono)}";
 collectCss(css);
-var modules_1d7499fc = {"typography":"Typography_module_typography__d307cb57","header":"Typography_module_header__d307cb57","body":"Typography_module_body__d307cb57","helper":"Typography_module_helper__d307cb57","start":"Typography_module_start__d307cb57","center":"Typography_module_center__d307cb57","end":"Typography_module_end__d307cb57","foreground":"Typography_module_foreground__d307cb57","muted":"Typography_module_muted__d307cb57","destructive":"Typography_module_destructive__d307cb57","warning":"Typography_module_warning__d307cb57","success":"Typography_module_success__d307cb57","regular":"Typography_module_regular__d307cb57","medium":"Typography_module_medium__d307cb57","semibold":"Typography_module_semibold__d307cb57","bold":"Typography_module_bold__d307cb57","defaultFont":"Typography_module_defaultFont__d307cb57","monoFont":"Typography_module_monoFont__d307cb57"};
+var modules_1d7499fc = {"typography":"Typography_module_typography__74817c74","header":"Typography_module_header__74817c74","body":"Typography_module_body__74817c74","helper":"Typography_module_helper__74817c74","start":"Typography_module_start__74817c74","center":"Typography_module_center__74817c74","end":"Typography_module_end__74817c74","foreground":"Typography_module_foreground__74817c74","muted":"Typography_module_muted__74817c74","destructive":"Typography_module_destructive__74817c74","warning":"Typography_module_warning__74817c74","success":"Typography_module_success__74817c74","regular":"Typography_module_regular__74817c74","medium":"Typography_module_medium__74817c74","semibold":"Typography_module_semibold__74817c74","bold":"Typography_module_bold__74817c74","defaultFont":"Typography_module_defaultFont__74817c74","monoFont":"Typography_module_monoFont__74817c74"};
 
 export { css, modules_1d7499fc as default };
 //# sourceMappingURL=Typography.module.css.mjs.map

package/dist/esm/packages/web/src/ui/components/molecules/EmailInput.mjs

@@ -6,7 +6,7 @@ import Input from './Input.mjs';
 const EmailInput = ({ email, setEmail, hasPasskeys = false, ...additionalProps })=>{
     const { i18n: $__i18n, _: $__ } = useLingui();
     return /*#__PURE__*/ React__default.createElement(Input, {
-        id: "email",
+        id: "email-input",
         label: $__i18n._({
             id: "formField.email.label",
             message: "Email"

package/dist/esm/packages/web/src/ui/components/molecules/EmailInput.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"EmailInput.mjs","sources":["../../../../../../../../../web/src/ui/components/molecules/EmailInput.tsx"],"sourcesContent":["import React from 'react';\nimport { useLingui } from '@lingui/react/macro';\nimport { passwordManagerDisableAutofillProps } from '../../../utils/passwordManagerDisableAutofillProps';\nimport Input from './Input';\n\nconst EmailInput = ({\n  email,\n  setEmail,\n  hasPasskeys = false,\n  ...additionalProps\n}: {\n  email: string;\n  setEmail: (email: string) => void;\n  hasPasskeys?: boolean;\n\n  // Passed through\n  hideLabel?: boolean;\n  disabled?: boolean;\n  error?: string;\n}) => {\n  const { t } = useLingui();\n  return (\n    <Input\n      id=\"email\"\n      label={t({ id: 'formField.email.label', message: 'Email' })}\n      placeholder={t({ id: 'formField.email.placeholder', message: 'example@email.com' })}\n      type=\"email\"\n      autoComplete={hasPasskeys ? 'username webauthn' : 'email'}\n      value={email}\n      onChange={(e) => setEmail(e.target.value)}\n      required\n      // We want to block 1PW's autofill when passkeys is enabled for now\n      // (it is breaking to our integration)\n      {...(hasPasskeys ? passwordManagerDisableAutofillProps : {})}\n      {...additionalProps}\n    />\n  );\n};\n\nexport default EmailInput;\n"],"names":["EmailInput","email","setEmail","hasPasskeys","additionalProps","useLingui","React","Input","id","label","placeholder","type","autoComplete","value","onChange","e","target","required","passwordManagerDisableAutofillProps"],"mappings":";;;;;AAKA,MAAMA,UAAAA,GAAa,CAAC,EAClBC,KAAK,EACLC,QAAQ,EACRC,WAAAA,GAAc,KAAK,EACnB,GAAGC,eAAAA,EAUJ,GAAA;AACC,IAAA,MAAM,EAAA,IAAA,EAAA,OAAA,EAAA,CAAA,EAAA,GAAA,EAAA,GAAQC,SAAAA,EAAAA;AACd,IAAA,qBACEC,cAAA,CAAA,aAAA,CAACC,KAAAA,EAAAA;QACCC,EAAAA,EAAG,OAAA;QACHC,KAAK,EAAA,OAAA,CAAA,CAAA,CAAA;;;;QACLC,WAAW,EAAA,OAAA,CAAA,CAAA,CAAA;;;;QACXC,IAAAA,EAAK,OAAA;AACLC,QAAAA,YAAAA,EAAcT,cAAc,mBAAA,GAAsB,OAAA;QAClDU,KAAAA,EAAOZ,KAAAA;AACPa,QAAAA,QAAAA,EAAU,CAACC,CAAAA,GAAMb,QAAAA,CAASa,CAAAA,CAAEC,MAAM,CAACH,KAAK,CAAA;QACxCI,QAAAA,EAAAA,IAAAA;QAGC,GAAId,WAAAA,GAAce,mCAAAA,GAAsC,EAAE;AAC1D,QAAA,GAAGd;;AAGV;;;;"}
+{"version":3,"file":"EmailInput.mjs","sources":["../../../../../../../../../web/src/ui/components/molecules/EmailInput.tsx"],"sourcesContent":["import React from 'react';\nimport { useLingui } from '@lingui/react/macro';\nimport { passwordManagerDisableAutofillProps } from '../../../utils/passwordManagerDisableAutofillProps';\nimport Input from './Input';\n\nconst EmailInput = ({\n  email,\n  setEmail,\n  hasPasskeys = false,\n  ...additionalProps\n}: {\n  email: string;\n  setEmail: (email: string) => void;\n  hasPasskeys?: boolean;\n\n  // Passed through\n  hideLabel?: boolean;\n  disabled?: boolean;\n  error?: string;\n}) => {\n  const { t } = useLingui();\n  return (\n    <Input\n      id=\"email-input\"\n      label={t({ id: 'formField.email.label', message: 'Email' })}\n      placeholder={t({ id: 'formField.email.placeholder', message: 'example@email.com' })}\n      type=\"email\"\n      autoComplete={hasPasskeys ? 'username webauthn' : 'email'}\n      value={email}\n      onChange={(e) => setEmail(e.target.value)}\n      required\n      // We want to block 1PW's autofill when passkeys is enabled for now\n      // (it is breaking to our integration)\n      {...(hasPasskeys ? passwordManagerDisableAutofillProps : {})}\n      {...additionalProps}\n    />\n  );\n};\n\nexport default EmailInput;\n"],"names":["EmailInput","email","setEmail","hasPasskeys","additionalProps","useLingui","React","Input","id","label","placeholder","type","autoComplete","value","onChange","e","target","required","passwordManagerDisableAutofillProps"],"mappings":";;;;;AAKA,MAAMA,UAAAA,GAAa,CAAC,EAClBC,KAAK,EACLC,QAAQ,EACRC,WAAAA,GAAc,KAAK,EACnB,GAAGC,eAAAA,EAUJ,GAAA;AACC,IAAA,MAAM,EAAA,IAAA,EAAA,OAAA,EAAA,CAAA,EAAA,GAAA,EAAA,GAAQC,SAAAA,EAAAA;AACd,IAAA,qBACEC,cAAA,CAAA,aAAA,CAACC,KAAAA,EAAAA;QACCC,EAAAA,EAAG,aAAA;QACHC,KAAK,EAAA,OAAA,CAAA,CAAA,CAAA;;;;QACLC,WAAW,EAAA,OAAA,CAAA,CAAA,CAAA;;;;QACXC,IAAAA,EAAK,OAAA;AACLC,QAAAA,YAAAA,EAAcT,cAAc,mBAAA,GAAsB,OAAA;QAClDU,KAAAA,EAAOZ,KAAAA;AACPa,QAAAA,QAAAA,EAAU,CAACC,CAAAA,GAAMb,QAAAA,CAASa,CAAAA,CAAEC,MAAM,CAACH,KAAK,CAAA;QACxCI,QAAAA,EAAAA,IAAAA;QAGC,GAAId,WAAAA,GAAce,mCAAAA,GAAsC,EAAE;AAC1D,QAAA,GAAGd;;AAGV;;;;"}

package/dist/esm/packages/web/src/ui/components/molecules/Input.mjs

@@ -12,7 +12,7 @@ import { usePresentation } from '../PresentationConfig.mjs';
  * You may want to use a more specific component in /molecules instead like {@link EmailInput}, {@link PasswordInput}
  */ const Input = /*#__PURE__*/ forwardRef(({ className, label: labelText, hideLabel, action, id: idProp, containerClassName, error, ...props }, ref)=>{
     const presentation = usePresentation();
-    const id = idProp + (presentation.options?.inputIdSuffix || '');
+    const id = idProp + (presentation.options?.inputIdSuffix ?? '');
     const errorId = useUniqueId();
     // Calculate the width of the action element and add it to the input padding so the input content
     // cannot go behind the action