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

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

@@ -8,7 +8,9 @@ import { usePresentationWithDefault, PresentationContext } from '../components/P
 import { IDPConsentScreen } from './screens/IdentityProvider/IDPConsent.mjs';
 
 const IDPContainer = ({ client, presentation, callbacks, strings, styles, getIDPConsentManifest, authTokenParams })=>{
-    const presentationValue = usePresentationWithDefault(presentation, false, []);
+    const presentationValue = usePresentationWithDefault(presentation, false, {
+        products: []
+    });
     useEffect(()=>{
         readB2CInternals(client).bootstrap.getAsync().then((data)=>{
             readB2CInternals(client).networkClient.logEvent({

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

@@ -1 +1 @@
-{"version":3,"file":"IDPContainer.mjs","sources":["../../../../../../../../web/src/ui/b2c/IDPContainer.tsx"],"sourcesContent":["import React, { useEffect } from 'react';\nimport { StytchProjectConfigurationInput } from '@stytch/core/public';\nimport { messages } from '../../messages/en';\nimport { I18nProviderWrapper } from '../components/atoms/I18nProviderWrapper';\nimport { GlobalContextProvider, DEFAULT_STATE } from './GlobalContextProvider';\nimport { IDPSDKConfig, StytchLoginConfig, DeprecatedSDKConfig } from '../../types';\nimport { readB2CInternals } from '../../utils/internal';\nimport { IDPContextProvider } from '../components/organisms/IDPContextProvider';\nimport { usePresentationWithDefault, PresentationContext } from '../components/PresentationConfig';\nimport { IDPConsentScreen } from './screens/IdentityProvider/IDPConsent';\nimport { logger, RUN_IN_DEV } from '@stytch/core';\n\nexport const IDPContainer = <TProjectConfiguration extends StytchProjectConfigurationInput>({\n  client,\n  presentation,\n  callbacks,\n  strings,\n  styles,\n  getIDPConsentManifest,\n  authTokenParams,\n}: IDPSDKConfig<TProjectConfiguration> & DeprecatedSDKConfig) => {\n  const presentationValue = usePresentationWithDefault(presentation, false, []);\n\n  useEffect(() => {\n    readB2CInternals(client)\n      .bootstrap.getAsync()\n      .then((data) => {\n        readB2CInternals(client).networkClient.logEvent({\n          name: 'render_idp_screen',\n          details: { bootstrap: data },\n        });\n      });\n  }, [client]);\n\n  RUN_IN_DEV(() => {\n    if (styles) {\n      logger.error(\n        'styles is deprecated and has no effect. Use the presentation prop instead.\\n' +\n          'See https://stytch.com/docs/api-reference/consumer/frontend-sdks/react/upgrade-guide#step-by-step-guide',\n      );\n    }\n  });\n\n  return (\n    <GlobalContextProvider\n      client={client}\n      config={{} as StytchLoginConfig}\n      callbacks={callbacks}\n      initialState={DEFAULT_STATE}\n    >\n      <IDPContextProvider consentManifestGenerator={getIDPConsentManifest} authTokenParams={authTokenParams}>\n        <PresentationContext.Provider value={presentationValue}>\n          <I18nProviderWrapper messages={messages} overrides={strings}>\n            <IDPConsentScreen />\n          </I18nProviderWrapper>\n        </PresentationContext.Provider>\n      </IDPContextProvider>\n    </GlobalContextProvider>\n  );\n};\n"],"names":["IDPContainer","client","presentation","callbacks","strings","styles","getIDPConsentManifest","authTokenParams","presentationValue","usePresentationWithDefault","useEffect","readB2CInternals","bootstrap","getAsync","then","data","networkClient","logEvent","name","details","React","GlobalContextProvider","config","initialState","DEFAULT_STATE","IDPContextProvider","consentManifestGenerator","PresentationContext","Provider","value","I18nProviderWrapper","messages","overrides","IDPConsentScreen"],"mappings":";;;;;;;;;MAYaA,YAAAA,GAAe,CAAgE,EAC1FC,MAAM,EACNC,YAAY,EACZC,SAAS,EACTC,OAAO,EACPC,MAAM,EACNC,qBAAqB,EACrBC,eAAe,EAC2C,GAAA;AAC1D,IAAA,MAAMC,iBAAAA,GAAoBC,0BAAAA,CAA2BP,YAAAA,EAAc,KAAA,EAAO,EAAE,CAAA;IAE5EQ,SAAAA,CAAU,IAAA;AACRC,QAAAA,gBAAAA,CAAiBV,QACdW,SAAS,CAACC,QAAQ,EAAA,CAClBC,IAAI,CAAC,CAACC,IAAAA,GAAAA;AACLJ,YAAAA,gBAAAA,CAAiBV,MAAAA,CAAAA,CAAQe,aAAa,CAACC,QAAQ,CAAC;gBAC9CC,IAAAA,EAAM,mBAAA;gBACNC,OAAAA,EAAS;oBAAEP,SAAAA,EAAWG;AAAK;AAC7B,aAAA,CAAA;AACF,QAAA,CAAA,CAAA;KACJ,EAAG;AAACd,QAAAA;AAAO,KAAA,CAAA;AAWX,IAAA,qBACEmB,cAAA,CAAA,aAAA,CAACC,qBAAAA,EAAAA;QACCpB,MAAAA,EAAQA,MAAAA;AACRqB,QAAAA,MAAAA,EAAQ,EAAC;QACTnB,SAAAA,EAAWA,SAAAA;QACXoB,YAAAA,EAAcC;qBAEdJ,cAAA,CAAA,aAAA,CAACK,kBAAAA,EAAAA;QAAmBC,wBAAAA,EAA0BpB,qBAAAA;QAAuBC,eAAAA,EAAiBA;AACpF,KAAA,gBAAAa,cAAA,CAAA,aAAA,CAACO,oBAAoBC,QAAQ,EAAA;QAACC,KAAAA,EAAOrB;qBACnCY,cAAA,CAAA,aAAA,CAACU,mBAAAA,EAAAA;QAAoBC,QAAAA,EAAUA,QAAAA;QAAUC,SAAAA,EAAW5B;qBAClDgB,cAAA,CAAA,aAAA,CAACa,gBAAAA,EAAAA,IAAAA,CAAAA,CAAAA,CAAAA,CAAAA,CAAAA;AAMb;;;;"}
+{"version":3,"file":"IDPContainer.mjs","sources":["../../../../../../../../web/src/ui/b2c/IDPContainer.tsx"],"sourcesContent":["import React, { useEffect } from 'react';\nimport { StytchProjectConfigurationInput } from '@stytch/core/public';\nimport { messages } from '../../messages/en';\nimport { I18nProviderWrapper } from '../components/atoms/I18nProviderWrapper';\nimport { GlobalContextProvider, DEFAULT_STATE } from './GlobalContextProvider';\nimport { IDPSDKConfig, StytchLoginConfig, DeprecatedSDKConfig } from '../../types';\nimport { readB2CInternals } from '../../utils/internal';\nimport { IDPContextProvider } from '../components/organisms/IDPContextProvider';\nimport { usePresentationWithDefault, PresentationContext } from '../components/PresentationConfig';\nimport { IDPConsentScreen } from './screens/IdentityProvider/IDPConsent';\nimport { logger, RUN_IN_DEV } from '@stytch/core';\n\nexport const IDPContainer = <TProjectConfiguration extends StytchProjectConfigurationInput>({\n  client,\n  presentation,\n  callbacks,\n  strings,\n  styles,\n  getIDPConsentManifest,\n  authTokenParams,\n}: IDPSDKConfig<TProjectConfiguration> & DeprecatedSDKConfig) => {\n  const presentationValue = usePresentationWithDefault(presentation, false, { products: [] });\n\n  useEffect(() => {\n    readB2CInternals(client)\n      .bootstrap.getAsync()\n      .then((data) => {\n        readB2CInternals(client).networkClient.logEvent({\n          name: 'render_idp_screen',\n          details: { bootstrap: data },\n        });\n      });\n  }, [client]);\n\n  RUN_IN_DEV(() => {\n    if (styles) {\n      logger.error(\n        'styles is deprecated and has no effect. Use the presentation prop instead.\\n' +\n          'See https://stytch.com/docs/api-reference/consumer/frontend-sdks/react/upgrade-guide#step-by-step-guide',\n      );\n    }\n  });\n\n  return (\n    <GlobalContextProvider\n      client={client}\n      config={{} as StytchLoginConfig}\n      callbacks={callbacks}\n      initialState={DEFAULT_STATE}\n    >\n      <IDPContextProvider consentManifestGenerator={getIDPConsentManifest} authTokenParams={authTokenParams}>\n        <PresentationContext.Provider value={presentationValue}>\n          <I18nProviderWrapper messages={messages} overrides={strings}>\n            <IDPConsentScreen />\n          </I18nProviderWrapper>\n        </PresentationContext.Provider>\n      </IDPContextProvider>\n    </GlobalContextProvider>\n  );\n};\n"],"names":["IDPContainer","client","presentation","callbacks","strings","styles","getIDPConsentManifest","authTokenParams","presentationValue","usePresentationWithDefault","products","useEffect","readB2CInternals","bootstrap","getAsync","then","data","networkClient","logEvent","name","details","React","GlobalContextProvider","config","initialState","DEFAULT_STATE","IDPContextProvider","consentManifestGenerator","PresentationContext","Provider","value","I18nProviderWrapper","messages","overrides","IDPConsentScreen"],"mappings":";;;;;;;;;MAYaA,YAAAA,GAAe,CAAgE,EAC1FC,MAAM,EACNC,YAAY,EACZC,SAAS,EACTC,OAAO,EACPC,MAAM,EACNC,qBAAqB,EACrBC,eAAe,EAC2C,GAAA;IAC1D,MAAMC,iBAAAA,GAAoBC,0BAAAA,CAA2BP,YAAAA,EAAc,KAAA,EAAO;AAAEQ,QAAAA,QAAAA,EAAU;AAAG,KAAA,CAAA;IAEzFC,SAAAA,CAAU,IAAA;AACRC,QAAAA,gBAAAA,CAAiBX,QACdY,SAAS,CAACC,QAAQ,EAAA,CAClBC,IAAI,CAAC,CAACC,IAAAA,GAAAA;AACLJ,YAAAA,gBAAAA,CAAiBX,MAAAA,CAAAA,CAAQgB,aAAa,CAACC,QAAQ,CAAC;gBAC9CC,IAAAA,EAAM,mBAAA;gBACNC,OAAAA,EAAS;oBAAEP,SAAAA,EAAWG;AAAK;AAC7B,aAAA,CAAA;AACF,QAAA,CAAA,CAAA;KACJ,EAAG;AAACf,QAAAA;AAAO,KAAA,CAAA;AAWX,IAAA,qBACEoB,cAAA,CAAA,aAAA,CAACC,qBAAAA,EAAAA;QACCrB,MAAAA,EAAQA,MAAAA;AACRsB,QAAAA,MAAAA,EAAQ,EAAC;QACTpB,SAAAA,EAAWA,SAAAA;QACXqB,YAAAA,EAAcC;qBAEdJ,cAAA,CAAA,aAAA,CAACK,kBAAAA,EAAAA;QAAmBC,wBAAAA,EAA0BrB,qBAAAA;QAAuBC,eAAAA,EAAiBA;AACpF,KAAA,gBAAAc,cAAA,CAAA,aAAA,CAACO,oBAAoBC,QAAQ,EAAA;QAACC,KAAAA,EAAOtB;qBACnCa,cAAA,CAAA,aAAA,CAACU,mBAAAA,EAAAA;QAAoBC,QAAAA,EAAUA,QAAAA;QAAUC,SAAAA,EAAW7B;qBAClDiB,cAAA,CAAA,aAAA,CAACa,gBAAAA,EAAAA,IAAAA,CAAAA,CAAAA,CAAAA,CAAAA,CAAAA;AAMb;;;;"}

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

@@ -30,7 +30,7 @@ const PasskeyRegistrationContainer = ({ client, config: rawConfig, presentation,
             ...DEFAULT_STATE.formState
         }
     };
-    const presentationValue = usePresentationWithDefault(presentation, displayWatermark, config.products);
+    const presentationValue = usePresentationWithDefault(presentation, displayWatermark, config);
     return /*#__PURE__*/ React__default.createElement(GlobalContextProvider, {
         client: client,
         config: config,

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, 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;;;;"}
+{"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');\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","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,iBAAAA,GAAoBC,0BAAAA,CAA2BtB,YAAAA,EAAcM,gBAAAA,EAAkBR,MAAQ,CAAA;AAE7F,IAAA,qBACEyB,cAAA,CAAA,aAAA,CAACC,qBAAAA,EAAAA;QAAsB3B,MAAAA,EAAQA,MAAAA;QAAQC,MAAAA,EAAQA,MAAAA;QAAQG,SAAAA,EAAWA,SAAAA;QAAWc,YAAAA,EAAcA;AACzF,KAAA,gBAAAQ,cAAA,CAAA,aAAA,CAACE,oBAAoBC,QAAQ,EAAA;QAACC,KAAAA,EAAON;qBACnCE,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;;;;"}

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

@@ -40,7 +40,7 @@ const ResetPasswordContainer = ({ client, config: rawConfig, presentation, callb
             }
         }
     };
-    const presentationValue = usePresentationWithDefault(presentation, displayWatermark, config.products);
+    const presentationValue = usePresentationWithDefault(presentation, displayWatermark, config);
     return /*#__PURE__*/ React__default.createElement(GlobalContextProvider, {
         client: client,
         config: config,

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, 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;;;;"}
+{"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');\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","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,iBAAAA,GAAoBC,0BAAAA,CAA2B7B,YAAAA,EAAcY,gBAAAA,EAAkBd,MAAQ,CAAA;AAE7F,IAAA,qBACEgC,cAAA,CAAA,aAAA,CAACC,qBAAAA,EAAAA;QAAsBlC,MAAAA,EAAQA,MAAAA;QAAQC,MAAAA,EAAQA,MAAAA;QAAQG,SAAAA,EAAWA,SAAAA;QAAWoB,YAAAA,EAAcA;AACzF,KAAA,gBAAAS,cAAA,CAAA,aAAA,CAACE,oBAAoBC,QAAQ,EAAA;QAACC,KAAAA,EAAON;qBACnCE,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;;;;"}

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

@@ -12,6 +12,7 @@ import { getRenderedOneTapMode } from '../../../oneTap/positionModes.mjs';
 import modules_f4506a56 from './GoogleOneTap.module.css.mjs';
 import LastUsed from '../../components/molecules/LastUsed.mjs';
 import { useLastUsedOAuth } from '../screens/Main/useLastUsedOAuth.mjs';
+import { usePresentation } from '../../components/PresentationConfig.mjs';
 import { logger } from '../../../../../core/src/utils/logger.mjs';
 import { OAuthProviders } from '../../../../../core/src/public/ui.mjs';
 
@@ -39,6 +40,7 @@ const GoogleOneTap = ({ position, customScopes, providerParams, cancelOnTapOutsi
     const timeout = useRef();
     const isUnmounted = useIsUnmounted();
     const [lastUsedMethod, setLastUsedOAuth] = useLastUsedOAuth();
+    const { options } = usePresentation();
     /*
    * Begin One Tap Render Smoothing Logic
    */ // Gets height of rendered one-tap UI, and sets the container height to that.
@@ -185,7 +187,7 @@ const GoogleOneTap = ({ position, customScopes, providerParams, cancelOnTapOutsi
     const fallbackWithLastUsed = lastUsedMethod === OAuthProviders.Google ? /*#__PURE__*/ React__default.createElement(LastUsed, null, fallbackButton) : fallbackButton;
     if (isOnlyFloatingOneTap) {
         return /*#__PURE__*/ React__default.createElement(OneTapMountNode, {
-            enableShadowDOM: Boolean(config.enableShadowDOM)
+            enableShadowDOM: options.enableShadowDOM
         });
     }
     if (oneTapError) {
@@ -202,7 +204,7 @@ const GoogleOneTap = ({ position, customScopes, providerParams, cancelOnTapOutsi
         }, pending && /*#__PURE__*/ React__default.createElement(CircularProgress, {
             size: 25
         }), canDisplayOneTap ? /*#__PURE__*/ React__default.createElement(OneTapMountNode, {
-            enableShadowDOM: Boolean(config.enableShadowDOM)
+            enableShadowDOM: options.enableShadowDOM
         }) : fallbackButton);
     }
     return fallbackWithLastUsed;

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

@@ -1 +1 @@
-{"version":3,"file":"GoogleOneTap.mjs","sources":["../../../../../../../../../web/src/ui/b2c/components/GoogleOneTap.tsx"],"sourcesContent":["import React, { useCallback, useEffect, useRef, useState } from 'react';\nimport { OAuthProviders, OneTapPositions } from '@stytch/core/public';\nimport { DEV, logger, StringLiteralFromEnum } from '@stytch/core';\nimport classNames from 'classnames';\nimport { OAuthButton } from './OAuthButton';\nimport { useConfig, useStytch } from '../GlobalContextProvider';\nimport { readB2CInternals } from '../../../utils/internal';\nimport { useIsUnmounted } from '../../hooks/useIsMounted';\nimport { ErrorMessages, OneTapErrors } from '../../components/organisms/OneTapError';\nimport { OneTapProvider } from '../../../oneTap/OneTapProvider';\nimport { CircularProgress } from '../../components/atoms/CircularProgress';\nimport { useIsOnlyFloatingOneTap } from '../../hooks/useIsOnlyFloatingOneTap';\nimport { GoogleOneTapClient } from '../../../oneTap/GoogleOneTapClient';\nimport { getRenderedOneTapMode } from '../../../oneTap/positionModes';\nimport styles from './GoogleOneTap.module.css';\nimport LastUsed from '../../components/molecules/LastUsed';\nimport { useLastUsedOAuth } from '../screens/Main/useLastUsedOAuth';\n\ntype Props = {\n  position?: StringLiteralFromEnum<OneTapPositions>;\n  customScopes?: string[];\n  providerParams?: Record<string, string>;\n  cancelOnTapOutside?: boolean;\n};\n\nconst OAUTH_BUTTON_HEIGHT = 38;\n\n// See WebComponents.tsx - when using shadow DOM, the Google script cannot see the\n// mount point, so we render it outside and use slot to bring it back in\nconst OneTapMountNode = ({ enableShadowDOM }: { enableShadowDOM: boolean }) =>\n  enableShadowDOM ? (\n    <slot name=\"one-tap\"></slot>\n  ) : (\n    <div data-prompt_parent_id=\"g_id_onload\" id=\"google-parent-prompt\" />\n  );\n\nexport const GoogleOneTap = ({ position, customScopes, providerParams, cancelOnTapOutside }: Props) => {\n  const oneTapRenderMode = getRenderedOneTapMode(position);\n  const shouldRenderEmbeddedOneTap = oneTapRenderMode === 'embedded';\n  const shouldRenderOneTap = !!oneTapRenderMode;\n\n  const config = useConfig();\n  const stytch = useStytch();\n  const isOnlyFloatingOneTap = useIsOnlyFloatingOneTap(config);\n  const [pending, setPending] = useState(shouldRenderEmbeddedOneTap);\n  const [canDisplayOneTap, setCanDisplayOneTap] = useState(true);\n  const [height, setHeight] = useState(OAUTH_BUTTON_HEIGHT);\n  const [oneTapError, setOneTapError] = useState<OneTapErrors>();\n  const resizeCount = useRef(0);\n  const timeout = useRef<number>();\n  const isUnmounted = useIsUnmounted();\n  const [lastUsedMethod, setLastUsedOAuth] = useLastUsedOAuth();\n\n  /*\n   * Begin One Tap Render Smoothing Logic\n   */\n  // Gets height of rendered one-tap UI, and sets the container height to that.\n  // Animation is added for a smoother transition,\n  const onResize = useCallback<ResizeObserverCallback>(([el]) => {\n    if (timeout.current != null) {\n      clearTimeout(timeout.current);\n    }\n    // On initial load, the one-tap ui rapidly changes heights 3 times. Checking\n    // the resizeCount lets us debounce the first 2 resizes, so they will get\n    // cancelled, but if they don't, it will resize after the short delay.\n    if (resizeCount.current > 1) {\n      // While setting the height, if the contentRect height is 0, it could also mean that the\n      // oauthOptions props are being changed, and in that scenario if we can continue to display\n      // one tap, we are setting the container height to the current height. If one tap cannot display\n      // one tap, we will set the container height to the height of the button component.\n      // Else we will set the height to the contentRect height.\n      setHeight((currentHeight) =>\n        el.contentRect.height === 0 ? (canDisplayOneTap ? currentHeight : OAUTH_BUTTON_HEIGHT) : el.contentRect.height,\n      );\n    } else {\n      timeout.current = window.setTimeout(\n        () =>\n          setHeight((currentHeight) =>\n            el.contentRect.height === 0\n              ? canDisplayOneTap\n                ? currentHeight\n                : OAUTH_BUTTON_HEIGHT\n              : el.contentRect.height,\n          ),\n        100,\n      );\n    }\n    resizeCount.current++;\n    // eslint-disable-next-line react-hooks/exhaustive-deps -- SDK-1354\n  }, []);\n\n  // If we are in embedded mode, initialize the resize observer and bind it to the React callback\n  useEffect(() => {\n    if (shouldRenderEmbeddedOneTap) {\n      const el = document.getElementById('google-parent-prompt');\n      if (el) {\n        const resizeObserver = new ResizeObserver(onResize);\n        resizeObserver.observe(el);\n        return () => resizeObserver.disconnect();\n      }\n    }\n  }, [onResize, shouldRenderEmbeddedOneTap]);\n  /*\n   * End One Tap Render Smoothing Logic\n   */\n\n  /*\n   * Begin One Tap Loading / Initialization Logic\n   */\n  //\n  const attemptToLoadOneTap = useCallback(async () => {\n    if (!shouldRenderOneTap) {\n      return;\n    }\n\n    const { oneTap } = readB2CInternals(stytch);\n    const clientResult = await oneTap.createOneTapClient();\n    if (!clientResult.success) {\n      if (clientResult.reason === 'oauth_config_not_found') {\n        setOneTapError(OneTapErrors.NoConfiguredOAuthClient);\n      } else if (clientResult.reason === 'no_signup_redirect_urls_set') {\n        setOneTapError(OneTapErrors.NoConfiguredSignupRedirectUrls);\n      } else if (clientResult.reason === 'no_login_redirect_urls_set') {\n        setOneTapError(OneTapErrors.NoConfiguredLoginRedirectUrls);\n      } else {\n        logger.error('Unable to load One Tap settings for project', clientResult);\n      }\n      return;\n    }\n    const { client } = clientResult;\n\n    const onOneTapCancelled = (showError?: boolean) => {\n      setCanDisplayOneTap(false);\n      setHeight(OAUTH_BUTTON_HEIGHT);\n      if (showError) {\n        setOneTapError(OneTapErrors.OriginNotAllowedForClient);\n      }\n    };\n\n    /**\n     * One Tap is composed of two calls, an init() call and a prompt() call.\n     * The init() call takes in a parent_id where One Tap should be shown\n     * prompt() does the actual showing.\n     * If the element does not exist, we show One Tap in the upper right corner.\n     * If the element does exist, One Tap's lifecycle is tied to the lifecycle of said element.\n     * Here, we call init() then prompt() in the useEffect. If the component unmounts before\n     * prompt() is called, One Tap falls back to the element-does-not-exist behavior.\n     * Fix: add a check for whether the component is still rendered immediately before we\n     * call prompt, preventing this race condition\n     */\n    if (isUnmounted.current) {\n      return;\n    }\n\n    const renderResult = await client.render({\n      callback: oneTap.createOnSuccessHandler({\n        loginRedirectUrl: config.oauthOptions?.loginRedirectURL,\n        signupRedirectUrl: config.oauthOptions?.signupRedirectURL,\n        onSuccess: oneTap.redirectOnSuccess,\n      }),\n      onOneTapCancelled,\n      style: { position },\n      cancelOnTapOutside,\n    });\n\n    // Check if the component has become unmounted during the async OT render process\n    // Kill the rest of the logic if so\n    if (isUnmounted.current) {\n      client.cancel();\n      return;\n    }\n\n    setCanDisplayOneTap(renderResult.success);\n    setPending(false);\n\n    if (!renderResult.success) {\n      if (renderResult.reason === 'unregistered_origin') {\n        setOneTapError(OneTapErrors.OriginNotAllowedForClient);\n      }\n      if (renderResult.reason === 'invalid_client') {\n        setOneTapError(OneTapErrors.InvalidOAuthClient);\n      }\n      logger.error('Unable to render One Tap prompt', renderResult);\n    }\n    return client;\n  }, [\n    shouldRenderOneTap,\n    stytch,\n    isUnmounted,\n    config.oauthOptions?.loginRedirectURL,\n    config.oauthOptions?.signupRedirectURL,\n    position,\n    cancelOnTapOutside,\n  ]);\n\n  useEffect(() => {\n    let client: GoogleOneTapClient | undefined;\n    attemptToLoadOneTap()\n      .then(($client) => (client = $client))\n      .catch((err) => {\n        logger.error('Unable to render One Tap prompt', err);\n        setCanDisplayOneTap(false);\n        setPending(false);\n      });\n    return () => client?.cancel();\n  }, [attemptToLoadOneTap]);\n  /*\n   * End One Tap Loading / Initialization Logic\n   */\n\n  // Fallback Google auth button in case One Tap cannot be displayed\n  const fallbackButton = (\n    <OAuthButton\n      providerType={OAuthProviders.Google}\n      loginRedirectUrl={config.oauthOptions?.loginRedirectURL}\n      signupRedirectUrl={config.oauthOptions?.signupRedirectURL}\n      customScopes={customScopes}\n      providerParams={providerParams}\n      onSuccess={() => setLastUsedOAuth(OAuthProviders.Google)}\n    />\n  );\n\n  const fallbackWithLastUsed =\n    lastUsedMethod === OAuthProviders.Google ? <LastUsed>{fallbackButton}</LastUsed> : fallbackButton;\n\n  if (isOnlyFloatingOneTap) {\n    return <OneTapMountNode enableShadowDOM={Boolean(config.enableShadowDOM)} />;\n  }\n\n  if (oneTapError) {\n    return (\n      <>\n        {DEV(<ErrorMessages error={oneTapError} />)}\n        {fallbackWithLastUsed}\n      </>\n    );\n  }\n\n  if (shouldRenderEmbeddedOneTap && OneTapProvider.willGoogleOneTapShowEmbedded()) {\n    return (\n      <div className={classNames(styles.container, { [styles.pending]: pending })} style={{ height: height + 'px' }}>\n        {pending && <CircularProgress size={25} />}\n        {canDisplayOneTap ? <OneTapMountNode enableShadowDOM={Boolean(config.enableShadowDOM)} /> : fallbackButton}\n      </div>\n    );\n  }\n\n  return fallbackWithLastUsed;\n};\n"],"names":["OAUTH_BUTTON_HEIGHT","OneTapMountNode","enableShadowDOM","React","slot","name","div","data-prompt_parent_id","id","GoogleOneTap","position","customScopes","providerParams","cancelOnTapOutside","oneTapRenderMode","getRenderedOneTapMode","shouldRenderEmbeddedOneTap","shouldRenderOneTap","config","useConfig","stytch","useStytch","isOnlyFloatingOneTap","useIsOnlyFloatingOneTap","pending","setPending","useState","canDisplayOneTap","setCanDisplayOneTap","height","setHeight","oneTapError","setOneTapError","resizeCount","useRef","timeout","isUnmounted","useIsUnmounted","lastUsedMethod","setLastUsedOAuth","useLastUsedOAuth","onResize","useCallback","el","current","clearTimeout","currentHeight","contentRect","window","setTimeout","useEffect","document","getElementById","resizeObserver","ResizeObserver","observe","disconnect","attemptToLoadOneTap","oneTap","readB2CInternals","clientResult","createOneTapClient","success","reason","OneTapErrors","NoConfiguredOAuthClient","NoConfiguredSignupRedirectUrls","NoConfiguredLoginRedirectUrls","logger","error","client","onOneTapCancelled","showError","OriginNotAllowedForClient","renderResult","render","callback","createOnSuccessHandler","loginRedirectUrl","oauthOptions","loginRedirectURL","signupRedirectUrl","signupRedirectURL","onSuccess","redirectOnSuccess","style","cancel","InvalidOAuthClient","then","$client","catch","err","fallbackButton","OAuthButton","providerType","OAuthProviders","Google","fallbackWithLastUsed","LastUsed","Boolean","DEV","OneTapProvider","willGoogleOneTapShowEmbedded","className","classNames","styles","container","CircularProgress","size"],"mappings":"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"}
+{"version":3,"file":"GoogleOneTap.mjs","sources":["../../../../../../../../../web/src/ui/b2c/components/GoogleOneTap.tsx"],"sourcesContent":["import React, { useCallback, useEffect, useRef, useState } from 'react';\nimport { OAuthProviders, OneTapPositions } from '@stytch/core/public';\nimport { DEV, logger, StringLiteralFromEnum } from '@stytch/core';\nimport classNames from 'classnames';\nimport { OAuthButton } from './OAuthButton';\nimport { useConfig, useStytch } from '../GlobalContextProvider';\nimport { readB2CInternals } from '../../../utils/internal';\nimport { useIsUnmounted } from '../../hooks/useIsMounted';\nimport { ErrorMessages, OneTapErrors } from '../../components/organisms/OneTapError';\nimport { OneTapProvider } from '../../../oneTap/OneTapProvider';\nimport { CircularProgress } from '../../components/atoms/CircularProgress';\nimport { useIsOnlyFloatingOneTap } from '../../hooks/useIsOnlyFloatingOneTap';\nimport { GoogleOneTapClient } from '../../../oneTap/GoogleOneTapClient';\nimport { getRenderedOneTapMode } from '../../../oneTap/positionModes';\nimport styles from './GoogleOneTap.module.css';\nimport LastUsed from '../../components/molecules/LastUsed';\nimport { useLastUsedOAuth } from '../screens/Main/useLastUsedOAuth';\nimport { usePresentation } from '../../components/PresentationConfig';\n\ntype Props = {\n  position?: StringLiteralFromEnum<OneTapPositions>;\n  customScopes?: string[];\n  providerParams?: Record<string, string>;\n  cancelOnTapOutside?: boolean;\n};\n\nconst OAUTH_BUTTON_HEIGHT = 38;\n\n// See WebComponents.tsx - when using shadow DOM, the Google script cannot see the\n// mount point, so we render it outside and use slot to bring it back in\nconst OneTapMountNode = ({ enableShadowDOM }: { enableShadowDOM: boolean | undefined }) =>\n  enableShadowDOM ? (\n    <slot name=\"one-tap\"></slot>\n  ) : (\n    <div data-prompt_parent_id=\"g_id_onload\" id=\"google-parent-prompt\" />\n  );\n\nexport const GoogleOneTap = ({ position, customScopes, providerParams, cancelOnTapOutside }: Props) => {\n  const oneTapRenderMode = getRenderedOneTapMode(position);\n  const shouldRenderEmbeddedOneTap = oneTapRenderMode === 'embedded';\n  const shouldRenderOneTap = !!oneTapRenderMode;\n\n  const config = useConfig();\n  const stytch = useStytch();\n  const isOnlyFloatingOneTap = useIsOnlyFloatingOneTap(config);\n  const [pending, setPending] = useState(shouldRenderEmbeddedOneTap);\n  const [canDisplayOneTap, setCanDisplayOneTap] = useState(true);\n  const [height, setHeight] = useState(OAUTH_BUTTON_HEIGHT);\n  const [oneTapError, setOneTapError] = useState<OneTapErrors>();\n  const resizeCount = useRef(0);\n  const timeout = useRef<number>();\n  const isUnmounted = useIsUnmounted();\n  const [lastUsedMethod, setLastUsedOAuth] = useLastUsedOAuth();\n  const { options } = usePresentation();\n\n  /*\n   * Begin One Tap Render Smoothing Logic\n   */\n  // Gets height of rendered one-tap UI, and sets the container height to that.\n  // Animation is added for a smoother transition,\n  const onResize = useCallback<ResizeObserverCallback>(([el]) => {\n    if (timeout.current != null) {\n      clearTimeout(timeout.current);\n    }\n    // On initial load, the one-tap ui rapidly changes heights 3 times. Checking\n    // the resizeCount lets us debounce the first 2 resizes, so they will get\n    // cancelled, but if they don't, it will resize after the short delay.\n    if (resizeCount.current > 1) {\n      // While setting the height, if the contentRect height is 0, it could also mean that the\n      // oauthOptions props are being changed, and in that scenario if we can continue to display\n      // one tap, we are setting the container height to the current height. If one tap cannot display\n      // one tap, we will set the container height to the height of the button component.\n      // Else we will set the height to the contentRect height.\n      setHeight((currentHeight) =>\n        el.contentRect.height === 0 ? (canDisplayOneTap ? currentHeight : OAUTH_BUTTON_HEIGHT) : el.contentRect.height,\n      );\n    } else {\n      timeout.current = window.setTimeout(\n        () =>\n          setHeight((currentHeight) =>\n            el.contentRect.height === 0\n              ? canDisplayOneTap\n                ? currentHeight\n                : OAUTH_BUTTON_HEIGHT\n              : el.contentRect.height,\n          ),\n        100,\n      );\n    }\n    resizeCount.current++;\n    // eslint-disable-next-line react-hooks/exhaustive-deps -- SDK-1354\n  }, []);\n\n  // If we are in embedded mode, initialize the resize observer and bind it to the React callback\n  useEffect(() => {\n    if (shouldRenderEmbeddedOneTap) {\n      const el = document.getElementById('google-parent-prompt');\n      if (el) {\n        const resizeObserver = new ResizeObserver(onResize);\n        resizeObserver.observe(el);\n        return () => resizeObserver.disconnect();\n      }\n    }\n  }, [onResize, shouldRenderEmbeddedOneTap]);\n  /*\n   * End One Tap Render Smoothing Logic\n   */\n\n  /*\n   * Begin One Tap Loading / Initialization Logic\n   */\n  //\n  const attemptToLoadOneTap = useCallback(async () => {\n    if (!shouldRenderOneTap) {\n      return;\n    }\n\n    const { oneTap } = readB2CInternals(stytch);\n    const clientResult = await oneTap.createOneTapClient();\n    if (!clientResult.success) {\n      if (clientResult.reason === 'oauth_config_not_found') {\n        setOneTapError(OneTapErrors.NoConfiguredOAuthClient);\n      } else if (clientResult.reason === 'no_signup_redirect_urls_set') {\n        setOneTapError(OneTapErrors.NoConfiguredSignupRedirectUrls);\n      } else if (clientResult.reason === 'no_login_redirect_urls_set') {\n        setOneTapError(OneTapErrors.NoConfiguredLoginRedirectUrls);\n      } else {\n        logger.error('Unable to load One Tap settings for project', clientResult);\n      }\n      return;\n    }\n    const { client } = clientResult;\n\n    const onOneTapCancelled = (showError?: boolean) => {\n      setCanDisplayOneTap(false);\n      setHeight(OAUTH_BUTTON_HEIGHT);\n      if (showError) {\n        setOneTapError(OneTapErrors.OriginNotAllowedForClient);\n      }\n    };\n\n    /**\n     * One Tap is composed of two calls, an init() call and a prompt() call.\n     * The init() call takes in a parent_id where One Tap should be shown\n     * prompt() does the actual showing.\n     * If the element does not exist, we show One Tap in the upper right corner.\n     * If the element does exist, One Tap's lifecycle is tied to the lifecycle of said element.\n     * Here, we call init() then prompt() in the useEffect. If the component unmounts before\n     * prompt() is called, One Tap falls back to the element-does-not-exist behavior.\n     * Fix: add a check for whether the component is still rendered immediately before we\n     * call prompt, preventing this race condition\n     */\n    if (isUnmounted.current) {\n      return;\n    }\n\n    const renderResult = await client.render({\n      callback: oneTap.createOnSuccessHandler({\n        loginRedirectUrl: config.oauthOptions?.loginRedirectURL,\n        signupRedirectUrl: config.oauthOptions?.signupRedirectURL,\n        onSuccess: oneTap.redirectOnSuccess,\n      }),\n      onOneTapCancelled,\n      style: { position },\n      cancelOnTapOutside,\n    });\n\n    // Check if the component has become unmounted during the async OT render process\n    // Kill the rest of the logic if so\n    if (isUnmounted.current) {\n      client.cancel();\n      return;\n    }\n\n    setCanDisplayOneTap(renderResult.success);\n    setPending(false);\n\n    if (!renderResult.success) {\n      if (renderResult.reason === 'unregistered_origin') {\n        setOneTapError(OneTapErrors.OriginNotAllowedForClient);\n      }\n      if (renderResult.reason === 'invalid_client') {\n        setOneTapError(OneTapErrors.InvalidOAuthClient);\n      }\n      logger.error('Unable to render One Tap prompt', renderResult);\n    }\n    return client;\n  }, [\n    shouldRenderOneTap,\n    stytch,\n    isUnmounted,\n    config.oauthOptions?.loginRedirectURL,\n    config.oauthOptions?.signupRedirectURL,\n    position,\n    cancelOnTapOutside,\n  ]);\n\n  useEffect(() => {\n    let client: GoogleOneTapClient | undefined;\n    attemptToLoadOneTap()\n      .then(($client) => (client = $client))\n      .catch((err) => {\n        logger.error('Unable to render One Tap prompt', err);\n        setCanDisplayOneTap(false);\n        setPending(false);\n      });\n    return () => client?.cancel();\n  }, [attemptToLoadOneTap]);\n  /*\n   * End One Tap Loading / Initialization Logic\n   */\n\n  // Fallback Google auth button in case One Tap cannot be displayed\n  const fallbackButton = (\n    <OAuthButton\n      providerType={OAuthProviders.Google}\n      loginRedirectUrl={config.oauthOptions?.loginRedirectURL}\n      signupRedirectUrl={config.oauthOptions?.signupRedirectURL}\n      customScopes={customScopes}\n      providerParams={providerParams}\n      onSuccess={() => setLastUsedOAuth(OAuthProviders.Google)}\n    />\n  );\n\n  const fallbackWithLastUsed =\n    lastUsedMethod === OAuthProviders.Google ? <LastUsed>{fallbackButton}</LastUsed> : fallbackButton;\n\n  if (isOnlyFloatingOneTap) {\n    return <OneTapMountNode enableShadowDOM={options.enableShadowDOM} />;\n  }\n\n  if (oneTapError) {\n    return (\n      <>\n        {DEV(<ErrorMessages error={oneTapError} />)}\n        {fallbackWithLastUsed}\n      </>\n    );\n  }\n\n  if (shouldRenderEmbeddedOneTap && OneTapProvider.willGoogleOneTapShowEmbedded()) {\n    return (\n      <div className={classNames(styles.container, { [styles.pending]: pending })} style={{ height: height + 'px' }}>\n        {pending && <CircularProgress size={25} />}\n        {canDisplayOneTap ? <OneTapMountNode enableShadowDOM={options.enableShadowDOM} /> : fallbackButton}\n      </div>\n    );\n  }\n\n  return fallbackWithLastUsed;\n};\n"],"names":["OAUTH_BUTTON_HEIGHT","OneTapMountNode","enableShadowDOM","React","slot","name","div","data-prompt_parent_id","id","GoogleOneTap","position","customScopes","providerParams","cancelOnTapOutside","oneTapRenderMode","getRenderedOneTapMode","shouldRenderEmbeddedOneTap","shouldRenderOneTap","config","useConfig","stytch","useStytch","isOnlyFloatingOneTap","useIsOnlyFloatingOneTap","pending","setPending","useState","canDisplayOneTap","setCanDisplayOneTap","height","setHeight","oneTapError","setOneTapError","resizeCount","useRef","timeout","isUnmounted","useIsUnmounted","lastUsedMethod","setLastUsedOAuth","useLastUsedOAuth","options","usePresentation","onResize","useCallback","el","current","clearTimeout","currentHeight","contentRect","window","setTimeout","useEffect","document","getElementById","resizeObserver","ResizeObserver","observe","disconnect","attemptToLoadOneTap","oneTap","readB2CInternals","clientResult","createOneTapClient","success","reason","OneTapErrors","NoConfiguredOAuthClient","NoConfiguredSignupRedirectUrls","NoConfiguredLoginRedirectUrls","logger","error","client","onOneTapCancelled","showError","OriginNotAllowedForClient","renderResult","render","callback","createOnSuccessHandler","loginRedirectUrl","oauthOptions","loginRedirectURL","signupRedirectUrl","signupRedirectURL","onSuccess","redirectOnSuccess","style","cancel","InvalidOAuthClient","then","$client","catch","err","fallbackButton","OAuthButton","providerType","OAuthProviders","Google","fallbackWithLastUsed","LastUsed","DEV","OneTapProvider","willGoogleOneTapShowEmbedded","className","classNames","styles","container","CircularProgress","size"],"mappings":"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"}

package/dist/esm/packages/web/src/ui/b2c/screens/Main/index.mjs

@@ -21,7 +21,8 @@ const MainScreen = ()=>{
     const hasPasskeys = hasProduct(products, 'passkeys');
     const hasInput = hasProduct(products, 'emailMagicLinks') || hasProduct(products, 'otp') || hasProduct(products, 'passwords');
     const [startPasskeyAuth, passkeyError] = usePromptPasskey({
-        canAutofill: hasInput
+        canAutofill: hasInput,
+        shadowDOM: Boolean(options.enableShadowDOM)
     });
     const productComponents = useProductComponents(products, 'mainScreen');
     useEffect(()=>{

package/dist/esm/packages/web/src/ui/b2c/screens/Main/index.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.mjs","sources":["../../../../../../../../../../web/src/ui/b2c/screens/Main/index.tsx"],"sourcesContent":["import React, { useEffect, useState } from 'react';\nimport { useLingui } from '@lingui/react/macro';\nimport { usePresentation } from '../../../components/PresentationConfig';\nimport { useConfig, useStytch } from '../../GlobalContextProvider';\nimport Typography from '../../../components/atoms/Typography';\nimport { isTruthy } from '../../../../utils/isTruthy';\nimport { usePromptPasskey } from '../../../hooks/usePromptPasskey';\nimport Column from '../../../components/atoms/Column';\nimport ErrorText from '../../../components/molecules/ErrorText';\nimport { MainScreenGroup, MainScreenKey } from '../../StytchProduct';\nimport { hasProduct, useProductComponents } from '../../utils';\nimport Divider from '../../../components/molecules/Divider';\nimport { DEV } from '@stytch/core';\n\nexport const MainScreen = () => {\n  const stytchClient = useStytch();\n  const config = useConfig();\n\n  const { options } = usePresentation();\n  const { t } = useLingui();\n  const [mainScreenGroups, setMainScreenGroups] = useState<MainScreenGroup[]>([]);\n\n  const { products, oauthOptions } = config;\n  const hasButtons = (hasProduct(products, 'oauth') && oauthOptions) || hasProduct(products, 'crypto');\n  const hasPasskeys = hasProduct(products, 'passkeys');\n  const hasInput =\n    hasProduct(products, 'emailMagicLinks') || hasProduct(products, 'otp') || hasProduct(products, 'passwords');\n\n  const [startPasskeyAuth, passkeyError] = usePromptPasskey({ canAutofill: hasInput });\n  const productComponents = useProductComponents(products, 'mainScreen')!;\n\n  useEffect(() => {\n    const loadProductComponents = async () => {\n      // Deduplicate components mapped from products\n      const keys = Array.from(\n        new Set<MainScreenKey>(\n          products\n            .map((product) => {\n              switch (product.id) {\n                case 'oauth':\n                case 'crypto':\n                  return product.id;\n                case 'emailMagicLinks':\n                case 'otp':\n                case 'passwords':\n                  return 'login-form';\n              }\n            })\n            .filter(isTruthy),\n        ),\n      );\n\n      const showDivider = hasButtons && hasInput;\n      if (keys.length > 1 && showDivider) {\n        keys.splice(-1, 0, 'divider');\n      }\n\n      // Add a passkey button if the user has configured passkeys, don't have a login form,\n      // or the browser does not support autofill\n      if (hasPasskeys && (!hasInput || !(await stytchClient.webauthn.browserSupportsAutofill()))) {\n        keys.unshift('passkey-button');\n      }\n\n      // Group Wallet and Oauth buttons (basically going from [Password, Wallet, OAuth] to [Password, [Wallet, OAuth]])\n      // This reassignment is only there to make TS happy - .splice mutates, and groups === keys\n      // so it is not really needed\n      const groups: MainScreenGroup[] = keys;\n      const walletIndex = keys.indexOf('crypto');\n      const oauthIndex = keys.indexOf('oauth');\n      if (walletIndex !== -1 && oauthIndex !== -1 && Math.abs(walletIndex - oauthIndex) === 1) {\n        const index = Math.min(walletIndex, oauthIndex);\n        groups.splice(index, 0, keys.splice(index, 2));\n      }\n\n      setMainScreenGroups(groups);\n    };\n\n    loadProductComponents();\n    // eslint-disable-next-line react-hooks/exhaustive-deps -- SDK-1354\n  }, []);\n\n  if (hasPasskeys && products.length === 1)\n    return (\n      <Typography variant=\"helper\" color=\"destructive\">\n        {DEV('Error: Cannot use Passkeys by itself, please add another product to the config.')}\n      </Typography>\n    );\n\n  const props = { startPasskeyAuth };\n  const renderComponent = (key: MainScreenGroup, index: number) => {\n    if (Array.isArray(key)) {\n      return (\n        <Column gap={2} key={index}>\n          {key.map(renderComponent)}\n        </Column>\n      );\n    }\n\n    if (key === 'divider') {\n      return <Divider key={index} />;\n    }\n\n    const Component = productComponents[key];\n    return <Component key={key} {...props} />;\n  };\n\n  return (\n    <Column gap={6}>\n      {!options.hideHeaderText && (\n        <Typography variant=\"header\" align=\"center\">\n          {t({ id: 'login.title', message: 'Sign up or log in' })}\n        </Typography>\n      )}\n\n      {passkeyError && <ErrorText>{passkeyError}</ErrorText>}\n\n      {mainScreenGroups.map(renderComponent)}\n    </Column>\n  );\n};\n"],"names":["MainScreen","stytchClient","useStytch","config","useConfig","options","usePresentation","useLingui","mainScreenGroups","setMainScreenGroups","useState","products","oauthOptions","hasButtons","hasProduct","hasPasskeys","hasInput","startPasskeyAuth","passkeyError","usePromptPasskey","canAutofill","productComponents","useProductComponents","useEffect","loadProductComponents","keys","Array","from","Set","map","product","id","filter","isTruthy","showDivider","length","splice","webauthn","browserSupportsAutofill","unshift","groups","walletIndex","indexOf","oauthIndex","Math","abs","index","min","React","Typography","variant","color","props","renderComponent","key","isArray","Column","gap","Divider","Component","hideHeaderText","align","ErrorText"],"mappings":"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"}
+{"version":3,"file":"index.mjs","sources":["../../../../../../../../../../web/src/ui/b2c/screens/Main/index.tsx"],"sourcesContent":["import React, { useEffect, useState } from 'react';\nimport { useLingui } from '@lingui/react/macro';\nimport { usePresentation } from '../../../components/PresentationConfig';\nimport { useConfig, useStytch } from '../../GlobalContextProvider';\nimport Typography from '../../../components/atoms/Typography';\nimport { isTruthy } from '../../../../utils/isTruthy';\nimport { usePromptPasskey } from '../../../hooks/usePromptPasskey';\nimport Column from '../../../components/atoms/Column';\nimport ErrorText from '../../../components/molecules/ErrorText';\nimport { MainScreenGroup, MainScreenKey } from '../../StytchProduct';\nimport { hasProduct, useProductComponents } from '../../utils';\nimport Divider from '../../../components/molecules/Divider';\nimport { DEV } from '@stytch/core';\n\nexport const MainScreen = () => {\n  const stytchClient = useStytch();\n  const config = useConfig();\n\n  const { options } = usePresentation();\n  const { t } = useLingui();\n  const [mainScreenGroups, setMainScreenGroups] = useState<MainScreenGroup[]>([]);\n\n  const { products, oauthOptions } = config;\n  const hasButtons = (hasProduct(products, 'oauth') && oauthOptions) || hasProduct(products, 'crypto');\n  const hasPasskeys = hasProduct(products, 'passkeys');\n  const hasInput =\n    hasProduct(products, 'emailMagicLinks') || hasProduct(products, 'otp') || hasProduct(products, 'passwords');\n\n  const [startPasskeyAuth, passkeyError] = usePromptPasskey({\n    canAutofill: hasInput,\n    shadowDOM: Boolean(options.enableShadowDOM),\n  });\n  const productComponents = useProductComponents(products, 'mainScreen')!;\n\n  useEffect(() => {\n    const loadProductComponents = async () => {\n      // Deduplicate components mapped from products\n      const keys = Array.from(\n        new Set<MainScreenKey>(\n          products\n            .map((product) => {\n              switch (product.id) {\n                case 'oauth':\n                case 'crypto':\n                  return product.id;\n                case 'emailMagicLinks':\n                case 'otp':\n                case 'passwords':\n                  return 'login-form';\n              }\n            })\n            .filter(isTruthy),\n        ),\n      );\n\n      const showDivider = hasButtons && hasInput;\n      if (keys.length > 1 && showDivider) {\n        keys.splice(-1, 0, 'divider');\n      }\n\n      // Add a passkey button if the user has configured passkeys, don't have a login form,\n      // or the browser does not support autofill\n      if (hasPasskeys && (!hasInput || !(await stytchClient.webauthn.browserSupportsAutofill()))) {\n        keys.unshift('passkey-button');\n      }\n\n      // Group Wallet and Oauth buttons (basically going from [Password, Wallet, OAuth] to [Password, [Wallet, OAuth]])\n      // This reassignment is only there to make TS happy - .splice mutates, and groups === keys\n      // so it is not really needed\n      const groups: MainScreenGroup[] = keys;\n      const walletIndex = keys.indexOf('crypto');\n      const oauthIndex = keys.indexOf('oauth');\n      if (walletIndex !== -1 && oauthIndex !== -1 && Math.abs(walletIndex - oauthIndex) === 1) {\n        const index = Math.min(walletIndex, oauthIndex);\n        groups.splice(index, 0, keys.splice(index, 2));\n      }\n\n      setMainScreenGroups(groups);\n    };\n\n    loadProductComponents();\n    // eslint-disable-next-line react-hooks/exhaustive-deps -- SDK-1354\n  }, []);\n\n  if (hasPasskeys && products.length === 1)\n    return (\n      <Typography variant=\"helper\" color=\"destructive\">\n        {DEV('Error: Cannot use Passkeys by itself, please add another product to the config.')}\n      </Typography>\n    );\n\n  const props = { startPasskeyAuth };\n  const renderComponent = (key: MainScreenGroup, index: number) => {\n    if (Array.isArray(key)) {\n      return (\n        <Column gap={2} key={index}>\n          {key.map(renderComponent)}\n        </Column>\n      );\n    }\n\n    if (key === 'divider') {\n      return <Divider key={index} />;\n    }\n\n    const Component = productComponents[key];\n    return <Component key={key} {...props} />;\n  };\n\n  return (\n    <Column gap={6}>\n      {!options.hideHeaderText && (\n        <Typography variant=\"header\" align=\"center\">\n          {t({ id: 'login.title', message: 'Sign up or log in' })}\n        </Typography>\n      )}\n\n      {passkeyError && <ErrorText>{passkeyError}</ErrorText>}\n\n      {mainScreenGroups.map(renderComponent)}\n    </Column>\n  );\n};\n"],"names":["MainScreen","stytchClient","useStytch","config","useConfig","options","usePresentation","useLingui","mainScreenGroups","setMainScreenGroups","useState","products","oauthOptions","hasButtons","hasProduct","hasPasskeys","hasInput","startPasskeyAuth","passkeyError","usePromptPasskey","canAutofill","shadowDOM","Boolean","enableShadowDOM","productComponents","useProductComponents","useEffect","loadProductComponents","keys","Array","from","Set","map","product","id","filter","isTruthy","showDivider","length","splice","webauthn","browserSupportsAutofill","unshift","groups","walletIndex","indexOf","oauthIndex","Math","abs","index","min","React","Typography","variant","color","props","renderComponent","key","isArray","Column","gap","Divider","Component","hideHeaderText","align","ErrorText"],"mappings":"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"}

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

@@ -5,7 +5,7 @@ import { useMediaQuery } from '../hooks/useMediaQuery.mjs';
 const defaultOptions = {
     hideHeaderText: false
 };
-function usePresentationWithDefault(maybeConfig, displayWatermark, products, productsName) {
+function usePresentationWithDefault(maybeConfig, displayWatermark, { products, enableShadowDOM }, productsName) {
     const { theme, options } = maybeConfig ?? {};
     // Switch theme automatically depending on color scheme
     const isDynamic = isDynamicTheme(theme);
@@ -34,6 +34,7 @@ function usePresentationWithDefault(maybeConfig, displayWatermark, products, pro
             ...effectiveTheme
         },
         options: {
+            enableShadowDOM,
             ...defaultOptions,
             ...options
         },

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, 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;;;;"}
+{"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   * Wraps the Stytch UI components to be contained in a shadow DOM. Use this to enable style isolation.\n   * @default false\n   */\n  enableShadowDOM?: 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  {\n    products,\n    enableShadowDOM,\n  }: {\n    products: { id: string; icons?: Partial<IconRegistry<IconNames>> }[];\n    enableShadowDOM?: boolean;\n  },\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      enableShadowDOM,\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","enableShadowDOM","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":";;;;AAmFA,MAAMA,cAAAA,GAAsC;IAC1CC,cAAAA,EAAgB;AAClB,CAAA;AAeO,SAASC,0BAAAA,CACdC,WAA2C,EAC3CC,gBAAyB,EACzB,EACEC,QAAQ,EACRC,eAAe,EAIhB,EACDC,YAAqB,EAAA;AAErB,IAAA,MAAM,EAAEC,KAAK,EAAEC,OAAO,EAAE,GAAGN,eAAe,EAAC;;AAiB3C,IAAA,MAAMO,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,WAAWd,QAAAA,CAAU;AAC9Be,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;AAACb,QAAAA,QAAAA;AAAUI,QAAAA;AAAQ,KAAA,CAAA;IAEtB,OAAO;QACLD,KAAAA,EAAO;AACL,YAAA,GAAGe,YAAY;AACf,YAAA,GAAGR;AACL,SAAA;QACAN,OAAAA,EAAS;AACPH,YAAAA,eAAAA;AACA,YAAA,GAAGN,cAAc;AACjB,YAAA,GAAGS;AACL,SAAA;AACAL,QAAAA,gBAAAA;AACAY,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/mixins/Root.module.css.mjs

@@ -1,6 +1,6 @@
 import { collectCss } from '../../../../../../internal/style-injector/src/index.mjs';
 
-var css = ".Root_module_root__942a6873{color-scheme:var(--st-color-scheme);font-family:var(--st-font-family);isolation:isolate}:where(.Root_module_root__942a6873),:where(.Root_module_root__942a6873) *{box-sizing:border-box;margin:0;padding:0}:where(.Root_module_root__942a6873) a{-webkit-text-decoration:none;text-decoration:none}:where(.Root_module_root__942a6873) :is(b,strong){font-weight:var(--st-font-weight-bold)}:where(.Root_module_root__942a6873) :is(img,svg){display:block}.Root_module_root__942a6873{--st-font-weight-normal:400;--st-font-weight-medium:500;--st-font-weight-semibold:600;--st-font-weight-bold:700;--st-rounded-md:calc(var(--st-rounded-base)*2);--st-rounded-2xl:calc(var(--st-rounded-base)*6);--st-rounded-full:calc(var(--st-rounded-base)*9999);--st-text-xs:calc(var(--st-text-base)*0.75);--st-text-sm:calc(var(--st-text-base)*0.875);--st-text-2xl:calc(var(--st-text-base)*1.5);--st-line-height-xs:1.33333;--st-line-height-sm:1.42857;--st-line-height-base:1.5;--st-line-height-2xl:1.33333;--st-spacing-0_5:calc(var(--st-spacing)*0.5);--st-spacing-2:calc(var(--st-spacing)*2);--st-spacing-3:calc(var(--st-spacing)*3);--st-spacing-4:calc(var(--st-spacing)*4);--st-spacing-5:calc(var(--st-spacing)*5);--st-spacing-6:calc(var(--st-spacing)*6);--st-spacing-7:calc(var(--st-spacing)*7);--st-spacing-8:calc(var(--st-spacing)*8);--st-spacing-9:calc(var(--st-spacing)*9);--st-spacing-10:calc(var(--st-spacing)*10);--st-tab-background:color-mix(in oklab,var(--st-accent) 80%,transparent);--st-primary-button-hover:color-mix(in oklab,var(--st-primary) 90%,transparent);--st-secondary-button-hover:color-mix(in oklab,var(--st-secondary) 80%,transparent);--st-destructive-button-hover:color-mix(in oklab,var(--st-destructive) 80%,transparent);--st-divider-color:color-mix(in oklab,var(--st-border) 50%,transparent);--st-focus-ring-shadow:0 0 0 3px color-mix(in oklab,var(--st-ring) 50%,transparent);--st-shadow:0 0;--st-shadow-input:var(--st-shadow);--st-shadow-button:var(--st-shadow);--st-button-radius:var(--st-rounded-md);--st-input-radius:var(--st-rounded-md);--st-container-radius:var(--st-rounded-2xl);--st-container-border:var(--st-border);--st-header-font:var(--st-font-family)}";
+var css = ".Root_module_root__5a8e6e98{color-scheme:var(--st-color-scheme);font-family:var(--st-font-family);isolation:isolate}:where(.Root_module_root__5a8e6e98),:where(.Root_module_root__5a8e6e98) *{box-sizing:border-box;margin:0;padding:0}.Root_module_root__5a8e6e98 a{-webkit-text-decoration:none;text-decoration:none}.Root_module_root__5a8e6e98 :is(span,strong,em,p,a){font-feature-settings:inherit;font-size:inherit;font-variant:inherit;line-height:inherit}.Root_module_root__5a8e6e98 :is(span,strong,em,p){color:inherit}.Root_module_root__5a8e6e98 :is(span,em,p){font-weight:inherit}:where(.Root_module_root__5a8e6e98) :is(b,strong){font-weight:var(--st-font-weight-bold)}:where(.Root_module_root__5a8e6e98) :is(img,svg){display:block}.Root_module_root__5a8e6e98{--st-font-weight-normal:400;--st-font-weight-medium:500;--st-font-weight-semibold:600;--st-font-weight-bold:700;--st-rounded-md:calc(var(--st-rounded-base)*2);--st-rounded-2xl:calc(var(--st-rounded-base)*6);--st-rounded-full:calc(var(--st-rounded-base)*9999);--st-text-xs:calc(var(--st-text-base)*0.75);--st-text-sm:calc(var(--st-text-base)*0.875);--st-text-2xl:calc(var(--st-text-base)*1.5);--st-line-height-xs:1.33333;--st-line-height-sm:1.42857;--st-line-height-base:1.5;--st-line-height-2xl:1.33333;--st-spacing-0_5:calc(var(--st-spacing)*0.5);--st-spacing-2:calc(var(--st-spacing)*2);--st-spacing-3:calc(var(--st-spacing)*3);--st-spacing-4:calc(var(--st-spacing)*4);--st-spacing-5:calc(var(--st-spacing)*5);--st-spacing-6:calc(var(--st-spacing)*6);--st-spacing-7:calc(var(--st-spacing)*7);--st-spacing-8:calc(var(--st-spacing)*8);--st-spacing-9:calc(var(--st-spacing)*9);--st-spacing-10:calc(var(--st-spacing)*10);--st-tab-background:color-mix(in oklab,var(--st-accent) 80%,transparent);--st-primary-button-hover:color-mix(in oklab,var(--st-primary) 90%,transparent);--st-secondary-button-hover:color-mix(in oklab,var(--st-secondary) 80%,transparent);--st-destructive-button-hover:color-mix(in oklab,var(--st-destructive) 80%,transparent);--st-divider-color:color-mix(in oklab,var(--st-border) 50%,transparent);--st-focus-ring-shadow:0 0 0 3px color-mix(in oklab,var(--st-ring) 50%,transparent);--st-shadow:0 0;--st-shadow-input:var(--st-shadow);--st-shadow-button:var(--st-shadow);--st-button-radius:var(--st-rounded-md);--st-input-radius:var(--st-rounded-md);--st-container-radius:var(--st-rounded-2xl);--st-container-border:var(--st-border);--st-header-font:var(--st-font-family)}";
 collectCss(css);
 
 export { css };

package/dist/esm/packages/web/src/ui/components/molecules/MainContainer.module.css.mjs

@@ -2,7 +2,7 @@ import { collectCss } from '../../../../../../internal/style-injector/src/index.
 
 var css = ".MainContainer_module_container__d1278a0c{background-color:var(--st-background);border:1px solid var(--st-container-border);border-radius:var(--st-container-radius);color:var(--st-foreground);max-width:var(--st-container-width);padding:var(--st-spacing-10) var(--st-spacing-9);width:100%}.MainContainer_module_watermarkContainer__d1278a0c{display:flex;justify-content:center}";
 collectCss(css);
-var modules_852c89cd = {"container":"MainContainer_module_container__d1278a0c Root_module_root__942a6873","watermarkContainer":"MainContainer_module_watermarkContainer__d1278a0c"};
+var modules_852c89cd = {"container":"MainContainer_module_container__d1278a0c Root_module_root__5a8e6e98","watermarkContainer":"MainContainer_module_watermarkContainer__d1278a0c"};
 
 export { css, modules_852c89cd as default };
 //# sourceMappingURL=MainContainer.module.css.mjs.map

package/dist/esm/packages/web/src/ui/hooks/usePromptPasskey.mjs

@@ -8,7 +8,7 @@ import { DEFAULT_SESSION_DURATION_MINUTES } from '../../../../core/src/constants
 import { StytchEventType } from '../../../../core/src/public/ui.mjs';
 
 const MAX_ATTEMPTS = 5;
-const usePromptPasskey = ({ canAutofill })=>{
+const usePromptPasskey = ({ canAutofill, shadowDOM })=>{
     const { i18n: $__i18n, _: $__ } = useLingui();
     const stytchClient = useStytch();
     const config = useConfig();
@@ -25,7 +25,7 @@ const usePromptPasskey = ({ canAutofill })=>{
                 conditional_mediation: conditionalMediation,
                 is_passkey: true,
                 signal: abortController?.signal,
-                disable_input_check: config.enableShadowDOM
+                disable_input_check: shadowDOM
             });
             if (!resp) {
                 throw new Error('Empty response');
@@ -60,7 +60,7 @@ const usePromptPasskey = ({ canAutofill })=>{
             throw e;
         }
     }, [
-        config.enableShadowDOM,
+        shadowDOM,
         config.passkeyOptions?.domain,
         config.sessionOptions?.sessionDurationMinutes,
         dispatch,

package/dist/esm/packages/web/src/ui/hooks/usePromptPasskey.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"usePromptPasskey.mjs","sources":["../../../../../../../../web/src/ui/hooks/usePromptPasskey.ts"],"sourcesContent":["import { useCallback, useEffect, useState } from 'react';\nimport { StytchEventType, StytchProjectConfigurationInput, WebAuthnAuthenticateResponse } from '@stytch/core/public';\nimport { DEFAULT_SESSION_DURATION_MINUTES } from '@stytch/core';\nimport { useLingui } from '@lingui/react/macro';\nimport {\n  AppScreens,\n  useConfig,\n  useErrorCallback,\n  useEventCallback,\n  useGlobalReducer,\n  useStytch,\n} from '../b2c/GlobalContextProvider';\nimport { extractErrorType } from '../../utils/extractErrorType';\nimport { extractErrorMessage } from '../../utils/extractErrorMessage';\nimport { hasProduct } from '../b2c/utils';\n\nconst MAX_ATTEMPTS = 5;\n\nexport type StartPasskeyAuth = () => Promise<WebAuthnAuthenticateResponse<StytchProjectConfigurationInput>>;\n\nexport const usePromptPasskey = ({\n  canAutofill,\n}: {\n  canAutofill: boolean;\n}): [startPasskeyAuth: StartPasskeyAuth, error: string | undefined] => {\n  const { t } = useLingui();\n  const stytchClient = useStytch();\n  const config = useConfig();\n  const hasPasskeys = hasProduct(config.products, 'passkeys');\n\n  const onEvent = useEventCallback();\n  const onError = useErrorCallback();\n  const [, dispatch] = useGlobalReducer();\n\n  const [error, setError] = useState<string>();\n\n  const startPasskeyAuth = useCallback(\n    async ({\n      conditionalMediation = false,\n      abortController,\n    }: {\n      conditionalMediation?: boolean;\n      abortController?: AbortController;\n    } = {}) => {\n      try {\n        const resp = await stytchClient.webauthn.authenticate({\n          domain: config.passkeyOptions?.domain,\n          session_duration_minutes: config.sessionOptions?.sessionDurationMinutes ?? DEFAULT_SESSION_DURATION_MINUTES,\n          conditional_mediation: conditionalMediation,\n          is_passkey: true,\n          signal: abortController?.signal,\n          disable_input_check: config.enableShadowDOM,\n        });\n\n        if (!resp) {\n          throw new Error('Empty response');\n        }\n\n        onEvent({ type: StytchEventType.PasskeyAuthenticate, data: resp });\n        dispatch({ type: 'transition', screen: AppScreens.PasskeyConfirmation });\n        return resp;\n      } catch (e) {\n        if (extractErrorType(e) === 'webauthn_registration_not_found') {\n          setError(\n            t({\n              id: 'error.passkeyRegistrationNotFound',\n              message:\n                'Passkey registration not found. You may have deleted the passkey from your account but not password manager. Please try again.',\n            }),\n          );\n        } else if (e instanceof Error && e.name === 'StytchAPIError') {\n          setError(\n            t({\n              id: 'error.passkeyUnknown',\n              message: 'Unknown error occurred during passkey authentication. Please try again.',\n            }),\n          );\n        }\n\n        const message = extractErrorMessage(e);\n        if (message) {\n          onError({ message });\n        }\n\n        throw e;\n      }\n    },\n    [\n      config.enableShadowDOM,\n      config.passkeyOptions?.domain,\n      config.sessionOptions?.sessionDurationMinutes,\n      dispatch,\n      onError,\n      onEvent,\n      stytchClient.webauthn,\n      t,\n    ],\n  );\n\n  useEffect(() => {\n    if (!hasPasskeys || !canAutofill) {\n      return;\n    }\n\n    // Skip passkey authentication in Storybook environment\n    if (process.env.STORYBOOK) {\n      return;\n    }\n\n    const abortController = new AbortController();\n    (async () => {\n      if (!(await stytchClient.webauthn.browserSupportsAutofill())) {\n        return;\n      }\n\n      for (let i = 0; i < MAX_ATTEMPTS; ++i) {\n        if (abortController.signal.aborted) {\n          return;\n        }\n\n        try {\n          await startPasskeyAuth({ abortController, conditionalMediation: true });\n          return;\n        } catch (e) {\n          // User denied permission\n          if (e instanceof DOMException && e.name === 'NotAllowedError') {\n            return;\n          }\n\n          // Otherwise swallow error\n        }\n      }\n    })();\n\n    return () => {\n      abortController.abort();\n    };\n  }, [canAutofill, hasPasskeys, startPasskeyAuth, stytchClient.webauthn]);\n\n  return [startPasskeyAuth, error];\n};\n"],"names":["MAX_ATTEMPTS","usePromptPasskey","canAutofill","useLingui","stytchClient","useStytch","config","useConfig","hasPasskeys","hasProduct","products","onEvent","useEventCallback","onError","useErrorCallback","dispatch","useGlobalReducer","error","setError","useState","startPasskeyAuth","useCallback","conditionalMediation","abortController","resp","webauthn","authenticate","domain","passkeyOptions","session_duration_minutes","sessionOptions","sessionDurationMinutes","DEFAULT_SESSION_DURATION_MINUTES","conditional_mediation","is_passkey","signal","disable_input_check","enableShadowDOM","Error","type","StytchEventType","PasskeyAuthenticate","data","screen","AppScreens","PasskeyConfirmation","e","extractErrorType","name","message","extractErrorMessage","useEffect","AbortController","browserSupportsAutofill","i","aborted","DOMException","abort"],"mappings":"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"}
+{"version":3,"file":"usePromptPasskey.mjs","sources":["../../../../../../../../web/src/ui/hooks/usePromptPasskey.ts"],"sourcesContent":["import { useCallback, useEffect, useState } from 'react';\nimport { StytchEventType, StytchProjectConfigurationInput, WebAuthnAuthenticateResponse } from '@stytch/core/public';\nimport { DEFAULT_SESSION_DURATION_MINUTES } from '@stytch/core';\nimport { useLingui } from '@lingui/react/macro';\nimport {\n  AppScreens,\n  useConfig,\n  useErrorCallback,\n  useEventCallback,\n  useGlobalReducer,\n  useStytch,\n} from '../b2c/GlobalContextProvider';\nimport { extractErrorType } from '../../utils/extractErrorType';\nimport { extractErrorMessage } from '../../utils/extractErrorMessage';\nimport { hasProduct } from '../b2c/utils';\n\nconst MAX_ATTEMPTS = 5;\n\nexport type StartPasskeyAuth = () => Promise<WebAuthnAuthenticateResponse<StytchProjectConfigurationInput>>;\n\nexport const usePromptPasskey = ({\n  canAutofill,\n  shadowDOM,\n}: {\n  canAutofill: boolean;\n  shadowDOM: boolean;\n}): [startPasskeyAuth: StartPasskeyAuth, error: string | undefined] => {\n  const { t } = useLingui();\n  const stytchClient = useStytch();\n  const config = useConfig();\n  const hasPasskeys = hasProduct(config.products, 'passkeys');\n\n  const onEvent = useEventCallback();\n  const onError = useErrorCallback();\n  const [, dispatch] = useGlobalReducer();\n\n  const [error, setError] = useState<string>();\n\n  const startPasskeyAuth = useCallback(\n    async ({\n      conditionalMediation = false,\n      abortController,\n    }: {\n      conditionalMediation?: boolean;\n      abortController?: AbortController;\n    } = {}) => {\n      try {\n        const resp = await stytchClient.webauthn.authenticate({\n          domain: config.passkeyOptions?.domain,\n          session_duration_minutes: config.sessionOptions?.sessionDurationMinutes ?? DEFAULT_SESSION_DURATION_MINUTES,\n          conditional_mediation: conditionalMediation,\n          is_passkey: true,\n          signal: abortController?.signal,\n          disable_input_check: shadowDOM,\n        });\n\n        if (!resp) {\n          throw new Error('Empty response');\n        }\n\n        onEvent({ type: StytchEventType.PasskeyAuthenticate, data: resp });\n        dispatch({ type: 'transition', screen: AppScreens.PasskeyConfirmation });\n        return resp;\n      } catch (e) {\n        if (extractErrorType(e) === 'webauthn_registration_not_found') {\n          setError(\n            t({\n              id: 'error.passkeyRegistrationNotFound',\n              message:\n                'Passkey registration not found. You may have deleted the passkey from your account but not password manager. Please try again.',\n            }),\n          );\n        } else if (e instanceof Error && e.name === 'StytchAPIError') {\n          setError(\n            t({\n              id: 'error.passkeyUnknown',\n              message: 'Unknown error occurred during passkey authentication. Please try again.',\n            }),\n          );\n        }\n\n        const message = extractErrorMessage(e);\n        if (message) {\n          onError({ message });\n        }\n\n        throw e;\n      }\n    },\n    [\n      shadowDOM,\n      config.passkeyOptions?.domain,\n      config.sessionOptions?.sessionDurationMinutes,\n      dispatch,\n      onError,\n      onEvent,\n      stytchClient.webauthn,\n      t,\n    ],\n  );\n\n  useEffect(() => {\n    if (!hasPasskeys || !canAutofill) {\n      return;\n    }\n\n    // Skip passkey authentication in Storybook environment\n    if (process.env.STORYBOOK) {\n      return;\n    }\n\n    const abortController = new AbortController();\n    (async () => {\n      if (!(await stytchClient.webauthn.browserSupportsAutofill())) {\n        return;\n      }\n\n      for (let i = 0; i < MAX_ATTEMPTS; ++i) {\n        if (abortController.signal.aborted) {\n          return;\n        }\n\n        try {\n          await startPasskeyAuth({ abortController, conditionalMediation: true });\n          return;\n        } catch (e) {\n          // User denied permission\n          if (e instanceof DOMException && e.name === 'NotAllowedError') {\n            return;\n          }\n\n          // Otherwise swallow error\n        }\n      }\n    })();\n\n    return () => {\n      abortController.abort();\n    };\n  }, [canAutofill, hasPasskeys, startPasskeyAuth, stytchClient.webauthn]);\n\n  return [startPasskeyAuth, error];\n};\n"],"names":["MAX_ATTEMPTS","usePromptPasskey","canAutofill","shadowDOM","useLingui","stytchClient","useStytch","config","useConfig","hasPasskeys","hasProduct","products","onEvent","useEventCallback","onError","useErrorCallback","dispatch","useGlobalReducer","error","setError","useState","startPasskeyAuth","useCallback","conditionalMediation","abortController","resp","webauthn","authenticate","domain","passkeyOptions","session_duration_minutes","sessionOptions","sessionDurationMinutes","DEFAULT_SESSION_DURATION_MINUTES","conditional_mediation","is_passkey","signal","disable_input_check","Error","type","StytchEventType","PasskeyAuthenticate","data","screen","AppScreens","PasskeyConfirmation","e","extractErrorType","name","message","extractErrorMessage","useEffect","AbortController","browserSupportsAutofill","i","aborted","DOMException","abort"],"mappings":"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"}

package/dist/esm/packages/web/src/ui/react/bindings/createB2BComponent.mjs

@@ -1,16 +1,16 @@
 import React__default, { useRef, useState, useLayoutEffect } from 'react';
+import { createPortal } from 'react-dom';
 import { injectCssIntoNode, injectGlobalStyle } from '../../../../../../internal/style-injector/src/index.mjs';
 import { invariant } from '../utils/invariant.mjs';
 import { useIsMounted__INTERNAL, useStytchB2BClient } from '../b2b/StytchB2BContext.mjs';
 import { noProviderError } from '../utils/errors.mjs';
-import { createPortal } from 'react-dom';
 
 // Mirrors createB2CComponent and createWebComponent
 function createB2BComponent(name, Component) {
     const Wrapped = (props)=>{
         invariant(useIsMounted__INTERNAL(), noProviderError(`<${name} />`));
         const client = useStytchB2BClient();
-        const shadow = props.config?.enableShadowDOM;
+        const shadow = props.presentation?.options?.enableShadowDOM ?? props.config?.enableShadowDOM;
         const root = useRef(null);
         const [mountPoint, setMountPoint] = useState();
         useLayoutEffect(()=>{

package/dist/esm/packages/web/src/ui/react/bindings/createB2BComponent.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"createB2BComponent.mjs","sources":["../../../../../../../../../web/src/ui/react/bindings/createB2BComponent.tsx"],"sourcesContent":["import React, { useLayoutEffect, useRef, useState } from 'react';\nimport { StytchProjectConfigurationInput } from '@stytch/core/public';\nimport { injectCssIntoNode, injectGlobalStyle } from '@stytch/internal-style-injector';\nimport { ComponentType } from 'react';\nimport { invariant } from '../utils/invariant';\nimport { useStytchB2BClient, useIsMounted__INTERNAL } from '../b2b/StytchB2BContext';\nimport { noProviderError, serverRenderError } from '../utils/errors';\nimport { StytchB2BClient } from '../../../b2b/StytchB2BClient';\nimport { StytchB2BUIConfig } from '../../../types';\nimport { createPortal } from 'react-dom';\n\n// Mirrors createB2CComponent and createWebComponent\nexport function createB2BComponent<\n  Props extends {\n    client: StytchB2BClient<TProjectConfiguration>;\n    config?: StytchB2BUIConfig;\n  },\n  TProjectConfiguration extends StytchProjectConfigurationInput = Stytch.DefaultProjectConfiguration,\n>(name: string, Component: ComponentType<Props>) {\n  const Wrapped: ComponentType<Omit<Props, 'client'>> = (props) => {\n    serverRenderError(name);\n    invariant(useIsMounted__INTERNAL(), noProviderError(`<${name} />`));\n\n    const client = useStytchB2BClient<TProjectConfiguration>();\n\n    const shadow = props.config?.enableShadowDOM;\n    const root = useRef<HTMLDivElement>(null);\n    const [mountPoint, setMountPoint] = useState<HTMLDivElement>();\n\n    useLayoutEffect(() => {\n      if (shadow) {\n        if (!root.current || root.current.shadowRoot) return;\n        const shadowRoot = root.current.attachShadow({ mode: 'open' });\n        const mountPoint = document.createElement('div');\n\n        shadowRoot.appendChild(injectCssIntoNode());\n        shadowRoot.appendChild(mountPoint);\n\n        setMountPoint(mountPoint);\n      } else {\n        injectGlobalStyle();\n      }\n    }, [shadow]);\n\n    const element = <Component {...(props as Props)} client={client} />;\n    if (shadow) {\n      return <div ref={root}>{mountPoint && createPortal(element, mountPoint)}</div>;\n    } else {\n      return element;\n    }\n  };\n\n  Wrapped.displayName = name;\n  return Wrapped;\n}\n"],"names":["createB2BComponent","name","Component","Wrapped","props","invariant","useIsMounted__INTERNAL","noProviderError","client","useStytchB2BClient","shadow","config","enableShadowDOM","root","useRef","mountPoint","setMountPoint","useState","useLayoutEffect","current","shadowRoot","attachShadow","mode","document","createElement","appendChild","injectCssIntoNode","injectGlobalStyle","element","React","div","ref","createPortal","displayName"],"mappings":";;;;;;;AAWA;AACO,SAASA,kBAAAA,CAMdC,IAAY,EAAEC,SAA+B,EAAA;AAC7C,IAAA,MAAMC,UAAgD,CAACC,KAAAA,GAAAA;AAErDC,QAAAA,SAAAA,CAAUC,0BAA0BC,eAAAA,CAAgB,CAAC,CAAC,EAAEN,IAAAA,CAAK,GAAG,CAAC,CAAA,CAAA;AAEjE,QAAA,MAAMO,MAAAA,GAASC,kBAAAA,EAAAA;QAEf,MAAMC,MAAAA,GAASN,KAAAA,CAAMO,MAAM,EAAEC,eAAAA;AAC7B,QAAA,MAAMC,OAAOC,MAAAA,CAAuB,IAAA,CAAA;QACpC,MAAM,CAACC,UAAAA,EAAYC,aAAAA,CAAc,GAAGC,QAAAA,EAAAA;QAEpCC,eAAAA,CAAgB,IAAA;AACd,YAAA,IAAIR,MAAAA,EAAQ;gBACV,IAAI,CAACG,KAAKM,OAAO,IAAIN,KAAKM,OAAO,CAACC,UAAU,EAAE;AAC9C,gBAAA,MAAMA,UAAAA,GAAaP,IAAAA,CAAKM,OAAO,CAACE,YAAY,CAAC;oBAAEC,IAAAA,EAAM;AAAO,iBAAA,CAAA;gBAC5D,MAAMP,UAAAA,GAAaQ,QAAAA,CAASC,aAAa,CAAC,KAAA,CAAA;AAE1CJ,gBAAAA,UAAAA,CAAWK,WAAW,CAACC,iBAAAA,EAAAA,CAAAA;AACvBN,gBAAAA,UAAAA,CAAWK,WAAW,CAACV,UAAAA,CAAAA;gBAEvBC,aAAAA,CAAcD,UAAAA,CAAAA;YAChB,CAAA,MAAO;AACLY,gBAAAA,iBAAAA,EAAAA;AACF,YAAA;QACF,CAAA,EAAG;AAACjB,YAAAA;AAAO,SAAA,CAAA;AAEX,QAAA,MAAMkB,wBAAUC,cAAA,CAAA,aAAA,CAAC3B,SAAAA,EAAAA;AAAW,YAAA,GAAIE,KAAK;YAAYI,MAAAA,EAAQA;;AACzD,QAAA,IAAIE,MAAAA,EAAQ;AACV,YAAA,qBAAOmB,cAAA,CAAA,aAAA,CAACC,KAAAA,EAAAA;gBAAIC,GAAAA,EAAKlB;AAAOE,aAAAA,EAAAA,UAAAA,kBAAciB,aAAaJ,OAAAA,EAASb,UAAAA,CAAAA,CAAAA;QAC9D,CAAA,MAAO;YACL,OAAOa,OAAAA;AACT,QAAA;AACF,IAAA,CAAA;AAEAzB,IAAAA,OAAAA,CAAQ8B,WAAW,GAAGhC,IAAAA;IACtB,OAAOE,OAAAA;AACT;;;;"}
+{"version":3,"file":"createB2BComponent.mjs","sources":["../../../../../../../../../web/src/ui/react/bindings/createB2BComponent.tsx"],"sourcesContent":["import React, { useLayoutEffect, useRef, useState, ComponentType } from 'react';\nimport { createPortal } from 'react-dom';\nimport { StytchProjectConfigurationInput } from '@stytch/core/public';\nimport { injectCssIntoNode, injectGlobalStyle } from '@stytch/internal-style-injector';\nimport { invariant } from '../utils/invariant';\nimport { useStytchB2BClient, useIsMounted__INTERNAL } from '../b2b/StytchB2BContext';\nimport { noProviderError, serverRenderError } from '../utils/errors';\nimport { StytchB2BClient } from '../../../b2b/StytchB2BClient';\nimport { PresentationConfig, StytchB2BUIConfig } from '../../../types';\n\n// Mirrors createB2CComponent and createWebComponent\nexport function createB2BComponent<\n  Props extends {\n    client: StytchB2BClient<TProjectConfiguration>;\n    config?: StytchB2BUIConfig;\n    presentation?: PresentationConfig;\n  },\n  TProjectConfiguration extends StytchProjectConfigurationInput = Stytch.DefaultProjectConfiguration,\n>(name: string, Component: ComponentType<Props>) {\n  const Wrapped: ComponentType<Omit<Props, 'client'>> = (props) => {\n    serverRenderError(name);\n    invariant(useIsMounted__INTERNAL(), noProviderError(`<${name} />`));\n\n    const client = useStytchB2BClient<TProjectConfiguration>();\n\n    const shadow = props.presentation?.options?.enableShadowDOM ?? props.config?.enableShadowDOM;\n    const root = useRef<HTMLDivElement>(null);\n    const [mountPoint, setMountPoint] = useState<HTMLDivElement>();\n\n    useLayoutEffect(() => {\n      if (shadow) {\n        if (!root.current || root.current.shadowRoot) return;\n        const shadowRoot = root.current.attachShadow({ mode: 'open' });\n        const mountPoint = document.createElement('div');\n\n        shadowRoot.appendChild(injectCssIntoNode());\n        shadowRoot.appendChild(mountPoint);\n\n        setMountPoint(mountPoint);\n      } else {\n        injectGlobalStyle();\n      }\n    }, [shadow]);\n\n    const element = <Component {...(props as Props)} client={client} />;\n    if (shadow) {\n      return <div ref={root}>{mountPoint && createPortal(element, mountPoint)}</div>;\n    } else {\n      return element;\n    }\n  };\n\n  Wrapped.displayName = name;\n  return Wrapped;\n}\n"],"names":["createB2BComponent","name","Component","Wrapped","props","invariant","useIsMounted__INTERNAL","noProviderError","client","useStytchB2BClient","shadow","presentation","options","enableShadowDOM","config","root","useRef","mountPoint","setMountPoint","useState","useLayoutEffect","current","shadowRoot","attachShadow","mode","document","createElement","appendChild","injectCssIntoNode","injectGlobalStyle","element","React","div","ref","createPortal","displayName"],"mappings":";;;;;;;AAUA;AACO,SAASA,kBAAAA,CAOdC,IAAY,EAAEC,SAA+B,EAAA;AAC7C,IAAA,MAAMC,UAAgD,CAACC,KAAAA,GAAAA;AAErDC,QAAAA,SAAAA,CAAUC,0BAA0BC,eAAAA,CAAgB,CAAC,CAAC,EAAEN,IAAAA,CAAK,GAAG,CAAC,CAAA,CAAA;AAEjE,QAAA,MAAMO,MAAAA,GAASC,kBAAAA,EAAAA;QAEf,MAAMC,MAAAA,GAASN,MAAMO,YAAY,EAAEC,SAASC,eAAAA,IAAmBT,KAAAA,CAAMU,MAAM,EAAED,eAAAA;AAC7E,QAAA,MAAME,OAAOC,MAAAA,CAAuB,IAAA,CAAA;QACpC,MAAM,CAACC,UAAAA,EAAYC,aAAAA,CAAc,GAAGC,QAAAA,EAAAA;QAEpCC,eAAAA,CAAgB,IAAA;AACd,YAAA,IAAIV,MAAAA,EAAQ;gBACV,IAAI,CAACK,KAAKM,OAAO,IAAIN,KAAKM,OAAO,CAACC,UAAU,EAAE;AAC9C,gBAAA,MAAMA,UAAAA,GAAaP,IAAAA,CAAKM,OAAO,CAACE,YAAY,CAAC;oBAAEC,IAAAA,EAAM;AAAO,iBAAA,CAAA;gBAC5D,MAAMP,UAAAA,GAAaQ,QAAAA,CAASC,aAAa,CAAC,KAAA,CAAA;AAE1CJ,gBAAAA,UAAAA,CAAWK,WAAW,CAACC,iBAAAA,EAAAA,CAAAA;AACvBN,gBAAAA,UAAAA,CAAWK,WAAW,CAACV,UAAAA,CAAAA;gBAEvBC,aAAAA,CAAcD,UAAAA,CAAAA;YAChB,CAAA,MAAO;AACLY,gBAAAA,iBAAAA,EAAAA;AACF,YAAA;QACF,CAAA,EAAG;AAACnB,YAAAA;AAAO,SAAA,CAAA;AAEX,QAAA,MAAMoB,wBAAUC,cAAA,CAAA,aAAA,CAAC7B,SAAAA,EAAAA;AAAW,YAAA,GAAIE,KAAK;YAAYI,MAAAA,EAAQA;;AACzD,QAAA,IAAIE,MAAAA,EAAQ;AACV,YAAA,qBAAOqB,cAAA,CAAA,aAAA,CAACC,KAAAA,EAAAA;gBAAIC,GAAAA,EAAKlB;AAAOE,aAAAA,EAAAA,UAAAA,kBAAciB,aAAaJ,OAAAA,EAASb,UAAAA,CAAAA,CAAAA;QAC9D,CAAA,MAAO;YACL,OAAOa,OAAAA;AACT,QAAA;AACF,IAAA,CAAA;AAEA3B,IAAAA,OAAAA,CAAQgC,WAAW,GAAGlC,IAAAA;IACtB,OAAOE,OAAAA;AACT;;;;"}

package/dist/esm/packages/web/src/ui/react/bindings/createB2CComponent.mjs

@@ -1,16 +1,16 @@
 import React__default, { useRef, useState, useLayoutEffect } from 'react';
+import { createPortal } from 'react-dom';
 import { injectCssIntoNode, injectGlobalStyle } from '../../../../../../internal/style-injector/src/index.mjs';
 import { invariant } from '../utils/invariant.mjs';
 import { useIsMounted__INTERNAL, useStytch } from '../b2c/StytchContext.mjs';
 import { noProviderError } from '../utils/errors.mjs';
-import { createPortal } from 'react-dom';
 
 // Mirrors createB2BComponent and createWebComponent
 function createB2CComponent(name, Component) {
     const Wrapped = (props)=>{
         invariant(useIsMounted__INTERNAL(), noProviderError(`<${name} />`));
         const client = useStytch();
-        const shadow = props.config?.enableShadowDOM;
+        const shadow = props.presentation?.options?.enableShadowDOM ?? props.config?.enableShadowDOM;
         const root = useRef(null);
         const [mountPoint, setMountPoint] = useState();
         useLayoutEffect(()=>{

package/dist/esm/packages/web/src/ui/react/bindings/createB2CComponent.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"createB2CComponent.mjs","sources":["../../../../../../../../../web/src/ui/react/bindings/createB2CComponent.tsx"],"sourcesContent":["import React, { useLayoutEffect, useRef, useState } from 'react';\nimport { StytchProjectConfigurationInput } from '@stytch/core/public';\nimport { injectCssIntoNode, injectGlobalStyle } from '@stytch/internal-style-injector';\nimport { ComponentType } from 'react';\nimport { invariant } from '../utils/invariant';\nimport { useStytch, useIsMounted__INTERNAL } from '../b2c/StytchContext';\nimport { noProviderError, serverRenderError } from '../utils/errors';\nimport { StytchClient } from '../../../StytchClient';\nimport { StytchLoginConfig } from '../../../types';\nimport { createPortal } from 'react-dom';\n\n// Mirrors createB2BComponent and createWebComponent\nexport function createB2CComponent<\n  Props extends {\n    client: StytchClient<TProjectConfiguration>;\n    config?: StytchLoginConfig;\n  },\n  TProjectConfiguration extends StytchProjectConfigurationInput = Stytch.DefaultProjectConfiguration,\n>(name: string, Component: ComponentType<Props>) {\n  const Wrapped: ComponentType<Omit<Props, 'client'>> = (props) => {\n    serverRenderError(name);\n    invariant(useIsMounted__INTERNAL(), noProviderError(`<${name} />`));\n\n    const client = useStytch<TProjectConfiguration>();\n\n    const shadow = props.config?.enableShadowDOM;\n    const root = useRef<HTMLDivElement>(null);\n    const [mountPoint, setMountPoint] = useState<HTMLDivElement>();\n\n    useLayoutEffect(() => {\n      if (shadow) {\n        if (!root.current || root.current.shadowRoot) return;\n        const shadowRoot = root.current.attachShadow({ mode: 'open' });\n        const mountPoint = document.createElement('div');\n\n        shadowRoot.appendChild(injectCssIntoNode());\n        shadowRoot.appendChild(mountPoint);\n\n        setMountPoint(mountPoint);\n      } else {\n        injectGlobalStyle();\n      }\n    }, [shadow]);\n\n    const element = <Component {...(props as Props)} client={client} />;\n    if (shadow) {\n      return <div ref={root}>{mountPoint && createPortal(element, mountPoint)}</div>;\n    } else {\n      return element;\n    }\n  };\n\n  Wrapped.displayName = name;\n  return Wrapped;\n}\n"],"names":["createB2CComponent","name","Component","Wrapped","props","invariant","useIsMounted__INTERNAL","noProviderError","client","useStytch","shadow","config","enableShadowDOM","root","useRef","mountPoint","setMountPoint","useState","useLayoutEffect","current","shadowRoot","attachShadow","mode","document","createElement","appendChild","injectCssIntoNode","injectGlobalStyle","element","React","div","ref","createPortal","displayName"],"mappings":";;;;;;;AAWA;AACO,SAASA,kBAAAA,CAMdC,IAAY,EAAEC,SAA+B,EAAA;AAC7C,IAAA,MAAMC,UAAgD,CAACC,KAAAA,GAAAA;AAErDC,QAAAA,SAAAA,CAAUC,0BAA0BC,eAAAA,CAAgB,CAAC,CAAC,EAAEN,IAAAA,CAAK,GAAG,CAAC,CAAA,CAAA;AAEjE,QAAA,MAAMO,MAAAA,GAASC,SAAAA,EAAAA;QAEf,MAAMC,MAAAA,GAASN,KAAAA,CAAMO,MAAM,EAAEC,eAAAA;AAC7B,QAAA,MAAMC,OAAOC,MAAAA,CAAuB,IAAA,CAAA;QACpC,MAAM,CAACC,UAAAA,EAAYC,aAAAA,CAAc,GAAGC,QAAAA,EAAAA;QAEpCC,eAAAA,CAAgB,IAAA;AACd,YAAA,IAAIR,MAAAA,EAAQ;gBACV,IAAI,CAACG,KAAKM,OAAO,IAAIN,KAAKM,OAAO,CAACC,UAAU,EAAE;AAC9C,gBAAA,MAAMA,UAAAA,GAAaP,IAAAA,CAAKM,OAAO,CAACE,YAAY,CAAC;oBAAEC,IAAAA,EAAM;AAAO,iBAAA,CAAA;gBAC5D,MAAMP,UAAAA,GAAaQ,QAAAA,CAASC,aAAa,CAAC,KAAA,CAAA;AAE1CJ,gBAAAA,UAAAA,CAAWK,WAAW,CAACC,iBAAAA,EAAAA,CAAAA;AACvBN,gBAAAA,UAAAA,CAAWK,WAAW,CAACV,UAAAA,CAAAA;gBAEvBC,aAAAA,CAAcD,UAAAA,CAAAA;YAChB,CAAA,MAAO;AACLY,gBAAAA,iBAAAA,EAAAA;AACF,YAAA;QACF,CAAA,EAAG;AAACjB,YAAAA;AAAO,SAAA,CAAA;AAEX,QAAA,MAAMkB,wBAAUC,cAAA,CAAA,aAAA,CAAC3B,SAAAA,EAAAA;AAAW,YAAA,GAAIE,KAAK;YAAYI,MAAAA,EAAQA;;AACzD,QAAA,IAAIE,MAAAA,EAAQ;AACV,YAAA,qBAAOmB,cAAA,CAAA,aAAA,CAACC,KAAAA,EAAAA;gBAAIC,GAAAA,EAAKlB;AAAOE,aAAAA,EAAAA,UAAAA,kBAAciB,aAAaJ,OAAAA,EAASb,UAAAA,CAAAA,CAAAA;QAC9D,CAAA,MAAO;YACL,OAAOa,OAAAA;AACT,QAAA;AACF,IAAA,CAAA;AAEAzB,IAAAA,OAAAA,CAAQ8B,WAAW,GAAGhC,IAAAA;IACtB,OAAOE,OAAAA;AACT;;;;"}
+{"version":3,"file":"createB2CComponent.mjs","sources":["../../../../../../../../../web/src/ui/react/bindings/createB2CComponent.tsx"],"sourcesContent":["import React, { useLayoutEffect, useRef, useState } from 'react';\nimport { createPortal } from 'react-dom';\nimport { StytchProjectConfigurationInput } from '@stytch/core/public';\nimport { injectCssIntoNode, injectGlobalStyle } from '@stytch/internal-style-injector';\nimport { ComponentType } from 'react';\nimport { invariant } from '../utils/invariant';\nimport { useStytch, useIsMounted__INTERNAL } from '../b2c/StytchContext';\nimport { noProviderError, serverRenderError } from '../utils/errors';\nimport { StytchClient } from '../../../StytchClient';\nimport { PresentationConfig, StytchLoginConfig } from '../../../types';\n\n// Mirrors createB2BComponent and createWebComponent\nexport function createB2CComponent<\n  Props extends {\n    client: StytchClient<TProjectConfiguration>;\n    config?: StytchLoginConfig;\n    presentation?: PresentationConfig;\n  },\n  TProjectConfiguration extends StytchProjectConfigurationInput = Stytch.DefaultProjectConfiguration,\n>(name: string, Component: ComponentType<Props>) {\n  const Wrapped: ComponentType<Omit<Props, 'client'>> = (props) => {\n    serverRenderError(name);\n    invariant(useIsMounted__INTERNAL(), noProviderError(`<${name} />`));\n\n    const client = useStytch<TProjectConfiguration>();\n\n    const shadow = props.presentation?.options?.enableShadowDOM ?? props.config?.enableShadowDOM;\n    const root = useRef<HTMLDivElement>(null);\n    const [mountPoint, setMountPoint] = useState<HTMLDivElement>();\n\n    useLayoutEffect(() => {\n      if (shadow) {\n        if (!root.current || root.current.shadowRoot) return;\n        const shadowRoot = root.current.attachShadow({ mode: 'open' });\n        const mountPoint = document.createElement('div');\n\n        shadowRoot.appendChild(injectCssIntoNode());\n        shadowRoot.appendChild(mountPoint);\n\n        setMountPoint(mountPoint);\n      } else {\n        injectGlobalStyle();\n      }\n    }, [shadow]);\n\n    const element = <Component {...(props as Props)} client={client} />;\n    if (shadow) {\n      return <div ref={root}>{mountPoint && createPortal(element, mountPoint)}</div>;\n    } else {\n      return element;\n    }\n  };\n\n  Wrapped.displayName = name;\n  return Wrapped;\n}\n"],"names":["createB2CComponent","name","Component","Wrapped","props","invariant","useIsMounted__INTERNAL","noProviderError","client","useStytch","shadow","presentation","options","enableShadowDOM","config","root","useRef","mountPoint","setMountPoint","useState","useLayoutEffect","current","shadowRoot","attachShadow","mode","document","createElement","appendChild","injectCssIntoNode","injectGlobalStyle","element","React","div","ref","createPortal","displayName"],"mappings":";;;;;;;AAWA;AACO,SAASA,kBAAAA,CAOdC,IAAY,EAAEC,SAA+B,EAAA;AAC7C,IAAA,MAAMC,UAAgD,CAACC,KAAAA,GAAAA;AAErDC,QAAAA,SAAAA,CAAUC,0BAA0BC,eAAAA,CAAgB,CAAC,CAAC,EAAEN,IAAAA,CAAK,GAAG,CAAC,CAAA,CAAA;AAEjE,QAAA,MAAMO,MAAAA,GAASC,SAAAA,EAAAA;QAEf,MAAMC,MAAAA,GAASN,MAAMO,YAAY,EAAEC,SAASC,eAAAA,IAAmBT,KAAAA,CAAMU,MAAM,EAAED,eAAAA;AAC7E,QAAA,MAAME,OAAOC,MAAAA,CAAuB,IAAA,CAAA;QACpC,MAAM,CAACC,UAAAA,EAAYC,aAAAA,CAAc,GAAGC,QAAAA,EAAAA;QAEpCC,eAAAA,CAAgB,IAAA;AACd,YAAA,IAAIV,MAAAA,EAAQ;gBACV,IAAI,CAACK,KAAKM,OAAO,IAAIN,KAAKM,OAAO,CAACC,UAAU,EAAE;AAC9C,gBAAA,MAAMA,UAAAA,GAAaP,IAAAA,CAAKM,OAAO,CAACE,YAAY,CAAC;oBAAEC,IAAAA,EAAM;AAAO,iBAAA,CAAA;gBAC5D,MAAMP,UAAAA,GAAaQ,QAAAA,CAASC,aAAa,CAAC,KAAA,CAAA;AAE1CJ,gBAAAA,UAAAA,CAAWK,WAAW,CAACC,iBAAAA,EAAAA,CAAAA;AACvBN,gBAAAA,UAAAA,CAAWK,WAAW,CAACV,UAAAA,CAAAA;gBAEvBC,aAAAA,CAAcD,UAAAA,CAAAA;YAChB,CAAA,MAAO;AACLY,gBAAAA,iBAAAA,EAAAA;AACF,YAAA;QACF,CAAA,EAAG;AAACnB,YAAAA;AAAO,SAAA,CAAA;AAEX,QAAA,MAAMoB,wBAAUC,cAAA,CAAA,aAAA,CAAC7B,SAAAA,EAAAA;AAAW,YAAA,GAAIE,KAAK;YAAYI,MAAAA,EAAQA;;AACzD,QAAA,IAAIE,MAAAA,EAAQ;AACV,YAAA,qBAAOqB,cAAA,CAAA,aAAA,CAACC,KAAAA,EAAAA;gBAAIC,GAAAA,EAAKlB;AAAOE,aAAAA,EAAAA,UAAAA,kBAAciB,aAAaJ,OAAAA,EAASb,UAAAA,CAAAA,CAAAA;QAC9D,CAAA,MAAO;YACL,OAAOa,OAAAA;AACT,QAAA;AACF,IAAA,CAAA;AAEA3B,IAAAA,OAAAA,CAAQgC,WAAW,GAAGlC,IAAAA;IACtB,OAAOE,OAAAA;AACT;;;;"}

package/dist/esm/packages/web/src/utils/crypto.mjs

@@ -1,4 +1,4 @@
-import { b as bs58Exports } from '../../../../_virtual/index4.mjs';
+import { b as bs58Exports } from '../../../../_virtual/index3.mjs';
 import 'react';
 import { GenericWalletIcon } from '../assets/genericWallet.mjs';
 import { usePresentation, getButtonId } from '../ui/components/PresentationConfig.mjs';

package/dist/esm-dev/_virtual/index.mjs

@@ -1,8 +1,6 @@
-import { getDefaultExportFromCjs } from './_commonjsHelpers.mjs';
-import { __require as requireClassnames } from '../node_modules/classnames/index.mjs';
+import { __require as requireShim } from '../node_modules/use-sync-external-store/shim/index.mjs';
 
-var classnamesExports = requireClassnames();
-var classNames = /*@__PURE__*/getDefaultExportFromCjs(classnamesExports);
+var shimExports = requireShim();
 
-export { classNames as default };
+export { shimExports as s };
 //# sourceMappingURL=index.mjs.map

package/dist/esm-dev/_virtual/index.mjs.map

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