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

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

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

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

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

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

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

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

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

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

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

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

@@ -1 +1 @@
-{"version":3,"file":"WalletButtons.mjs","sources":["../../../../../../../../../../web/src/ui/b2c/screens/Crypto/WalletButtons.tsx"],"sourcesContent":["import * as React from 'react';\nimport { MessageDescriptor } from '@lingui/core';\nimport { msg } from '@lingui/core/macro';\nimport { useLingui } from '@lingui/react/macro';\nimport { Wallets } from '@stytch/core/public';\n\nimport { useConfig, useGlobalReducer, AppScreens } from '../../GlobalContextProvider';\nimport { WalletToIcon, WalletToText, isWalletVisible } from '../../../../utils/crypto';\nimport ButtonColumn from '../../../components/molecules/ButtonColumn';\nimport Button from '../../../components/atoms/Button';\n\nconst MAX_BUTTONS = 6;\n\nconst WalletIconComponent = ({ wallet }: { wallet: Wallets }) => {\n  const Icon = WalletToIcon[wallet];\n  return <Icon />;\n};\n\nconst walletMessages = {\n  [Wallets.Phantom]: msg({ id: 'crypto.wallet.continueWithPhantom', message: 'Continue with Phantom' }),\n  [Wallets.Binance]: msg({ id: 'crypto.wallet.continueWithBinance', message: 'Continue with Binance' }),\n  [Wallets.Coinbase]: msg({ id: 'crypto.wallet.continueWithCoinbase', message: 'Continue with Coinbase' }),\n  [Wallets.Metamask]: msg({ id: 'crypto.wallet.continueWithMetamask', message: 'Continue with Metamask' }),\n  [Wallets.GenericEthereumWallet]: msg({\n    id: 'crypto.wallet.continueWithEthereum',\n    message: 'Continue with Other Ethereum Wallet',\n  }),\n  [Wallets.GenericSolanaWallet]: msg({\n    id: 'crypto.wallet.continueWithSolana',\n    message: 'Continue with Other Solana Wallet',\n  }),\n} satisfies Record<Wallets, MessageDescriptor>;\n\nexport const CryptoWalletButtons = ({ type }: { type: 'main' | 'other' }) => {\n  const { t } = useLingui();\n  const [state, dispatch] = useGlobalReducer();\n  const config = useConfig();\n  const oAuthOptions = config.oauthOptions?.providers.length ?? 0;\n\n  // Crypto Buttons on screen = Maximum Buttons - OAuth Buttons - 1 (Other crypto or set up new wallet)\n  const cryptoButtonsOnMainScreen = MAX_BUTTONS - oAuthOptions - 1;\n  const onWalletStart = (wallet: Wallets) => {\n    dispatch({\n      type: 'update_crypto_state',\n      cryptoState: {\n        ...state.formState.cryptoState,\n        walletOption: wallet,\n      },\n    });\n    dispatch({ type: 'transition', screen: AppScreens.CryptoConnect });\n  };\n\n  const allDetectedWallets = (Object.keys(Wallets) as (keyof typeof Wallets)[]).filter((wallet) =>\n    isWalletVisible(Wallets[wallet]),\n  );\n\n  const renderOtherScreenButton = allDetectedWallets.length > cryptoButtonsOnMainScreen;\n\n  const mainWallets = allDetectedWallets.slice(0, cryptoButtonsOnMainScreen);\n  const otherWallet = allDetectedWallets.slice(cryptoButtonsOnMainScreen);\n\n  const walletsToRender = type === 'main' ? mainWallets : otherWallet;\n\n  return (\n    <ButtonColumn>\n      {walletsToRender.map((wallet) => (\n        <Button\n          key={wallet}\n          variant=\"outline\"\n          icon={<WalletIconComponent wallet={Wallets[wallet]} />}\n          onClick={() => onWalletStart(Wallets[wallet])}\n        >\n          {type === 'main' ? t(walletMessages[Wallets[wallet]]) : t(WalletToText[Wallets[wallet]])}\n        </Button>\n      ))}\n      {renderOtherScreenButton && type === 'main' ? (\n        <Button\n          variant=\"outline\"\n          icon={<WalletIconComponent wallet={Wallets.GenericEthereumWallet} />}\n          onClick={() => dispatch({ type: 'transition', screen: AppScreens.CryptoOtherScreen })}\n        >\n          {t(msg({ id: 'crypto.wallet.continueWithOtherWallet', message: 'Continue with other Crypto Wallet' }))}\n        </Button>\n      ) : (\n        <Button\n          variant=\"outline\"\n          onClick={() => dispatch({ type: 'transition', screen: AppScreens.CryptoSetupWallet })}\n        >\n          {t(msg({ id: 'crypto.wallet.setupNewWallet', message: 'Set up a new crypto wallet' }))}\n        </Button>\n      )}\n    </ButtonColumn>\n  );\n};\n"],"names":["MAX_BUTTONS","WalletIconComponent","wallet","Icon","WalletToIcon","walletMessages","Wallets","Phantom","Binance","Coinbase","Metamask","GenericEthereumWallet","GenericSolanaWallet","CryptoWalletButtons","type","useLingui","state","dispatch","useGlobalReducer","config","useConfig","oAuthOptions","oauthOptions","providers","length","cryptoButtonsOnMainScreen","onWalletStart","cryptoState","formState","walletOption","screen","AppScreens","CryptoConnect","allDetectedWallets","Object","keys","filter","isWalletVisible","renderOtherScreenButton","mainWallets","slice","otherWallet","walletsToRender","ButtonColumn","map","Button","key","variant","icon","onClick","WalletToText","CryptoOtherScreen","CryptoSetupWallet"],"mappings":"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"}
+{"version":3,"file":"WalletButtons.mjs","sources":["../../../../../../../../../../web/src/ui/b2c/screens/Crypto/WalletButtons.tsx"],"sourcesContent":["import * as React from 'react';\nimport { MessageDescriptor } from '@lingui/core';\nimport { msg } from '@lingui/core/macro';\nimport { useLingui } from '@lingui/react/macro';\nimport { Wallets } from '@stytch/core/public';\n\nimport { useConfig, useGlobalReducer, AppScreens } from '../../GlobalContextProvider';\nimport { WalletToText, isWalletVisible, useCryptoIcon } from '../../../../utils/crypto';\nimport ButtonColumn from '../../../components/molecules/ButtonColumn';\nimport Button from '../../../components/atoms/Button';\nimport { GenericWalletIcon } from '../../../../assets';\n\nconst MAX_BUTTONS = 6;\n\nconst walletMessages = {\n  [Wallets.Phantom]: msg({ id: 'crypto.wallet.continueWithPhantom', message: 'Continue with Phantom' }),\n  [Wallets.Binance]: msg({ id: 'crypto.wallet.continueWithBinance', message: 'Continue with Binance' }),\n  [Wallets.Coinbase]: msg({ id: 'crypto.wallet.continueWithCoinbase', message: 'Continue with Coinbase' }),\n  [Wallets.Metamask]: msg({ id: 'crypto.wallet.continueWithMetamask', message: 'Continue with Metamask' }),\n  [Wallets.GenericEthereumWallet]: msg({\n    id: 'crypto.wallet.continueWithEthereum',\n    message: 'Continue with Other Ethereum Wallet',\n  }),\n  [Wallets.GenericSolanaWallet]: msg({\n    id: 'crypto.wallet.continueWithSolana',\n    message: 'Continue with Other Solana Wallet',\n  }),\n} satisfies Record<Wallets, MessageDescriptor>;\n\nexport const CryptoWalletButtons = ({ type }: { type: 'main' | 'other' }) => {\n  const { t } = useLingui();\n  const [state, dispatch] = useGlobalReducer();\n  const config = useConfig();\n\n  const getCryptoIcon = useCryptoIcon();\n\n  const oAuthOptions = config.oauthOptions?.providers.length ?? 0;\n\n  // Crypto Buttons on screen = Maximum Buttons - OAuth Buttons - 1 (Other crypto or set up new wallet)\n  const cryptoButtonsOnMainScreen = MAX_BUTTONS - oAuthOptions - 1;\n  const onWalletStart = (wallet: Wallets) => {\n    dispatch({\n      type: 'update_crypto_state',\n      cryptoState: {\n        ...state.formState.cryptoState,\n        walletOption: wallet,\n      },\n    });\n    dispatch({ type: 'transition', screen: AppScreens.CryptoConnect });\n  };\n\n  const allDetectedWallets = (Object.keys(Wallets) as (keyof typeof Wallets)[]).filter((wallet) =>\n    isWalletVisible(Wallets[wallet]),\n  );\n\n  const renderOtherScreenButton = allDetectedWallets.length > cryptoButtonsOnMainScreen;\n\n  const mainWallets = allDetectedWallets.slice(0, cryptoButtonsOnMainScreen);\n  const otherWallet = allDetectedWallets.slice(cryptoButtonsOnMainScreen);\n\n  const walletsToRender = type === 'main' ? mainWallets : otherWallet;\n\n  return (\n    <ButtonColumn>\n      {walletsToRender.map((wallet) => {\n        const walletEnum = Wallets[wallet];\n        const Icon = getCryptoIcon(walletEnum);\n        return (\n          <Button key={wallet} variant=\"outline\" icon={<Icon />} onClick={() => onWalletStart(walletEnum)}>\n            {type === 'main' ? t(walletMessages[walletEnum]) : t(WalletToText[walletEnum])}\n          </Button>\n        );\n      })}\n\n      {renderOtherScreenButton && type === 'main' ? (\n        <Button\n          variant=\"outline\"\n          icon={<GenericWalletIcon />}\n          onClick={() => dispatch({ type: 'transition', screen: AppScreens.CryptoOtherScreen })}\n        >\n          {t(msg({ id: 'crypto.wallet.continueWithOtherWallet', message: 'Continue with other Crypto Wallet' }))}\n        </Button>\n      ) : (\n        <Button\n          variant=\"outline\"\n          onClick={() => dispatch({ type: 'transition', screen: AppScreens.CryptoSetupWallet })}\n        >\n          {t(msg({ id: 'crypto.wallet.setupNewWallet', message: 'Set up a new crypto wallet' }))}\n        </Button>\n      )}\n    </ButtonColumn>\n  );\n};\n"],"names":["MAX_BUTTONS","walletMessages","Wallets","Phantom","Binance","Coinbase","Metamask","GenericEthereumWallet","GenericSolanaWallet","CryptoWalletButtons","type","useLingui","state","dispatch","useGlobalReducer","config","useConfig","getCryptoIcon","useCryptoIcon","oAuthOptions","oauthOptions","providers","length","cryptoButtonsOnMainScreen","onWalletStart","wallet","cryptoState","formState","walletOption","screen","AppScreens","CryptoConnect","allDetectedWallets","Object","keys","filter","isWalletVisible","renderOtherScreenButton","mainWallets","slice","otherWallet","walletsToRender","ButtonColumn","map","walletEnum","Icon","Button","key","variant","icon","onClick","WalletToText","GenericWalletIcon","CryptoOtherScreen","CryptoSetupWallet"],"mappings":"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"}

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

@@ -1,3 +1,4 @@
+import { RUN_IN_DEV } from '../../../../core/src/utils/dev.mjs';
 import { logger } from '../../../../core/src/utils/logger.mjs';
 
 /* eslint-disable lingui/no-unlocalized-strings */ /**
@@ -38,16 +39,16 @@ import { logger } from '../../../../core/src/utils/logger.mjs';
     const { colors, container, inputs, hideHeaderText, buttons, logo, fontFamily, ...outerEmpty } = styleConfig;
     // presentation.theme mapping
     // ------------------------------------------------
-    {
-        warn("styleToTheme: We recommend setting theme['color-scheme'] to either 'light' or 'dark' explicitly depending on whether this is a light or dark theme. This enables icons to automatically automatically apply contrasting colors.");
+    RUN_IN_DEV(()=>{
+        warn("styleToTheme: We recommend setting theme['color-scheme'] to either 'light' or 'dark' explicitly " + 'depending on whether this is a light or dark theme. This enables icons to automatically automatically ' + 'apply contrasting colors.');
         if (Object.keys(outerEmpty).length > 0) warn('styleToTheme: Unrecognized style properties', outerEmpty);
-    }
+    });
     theme['font-family'] = fontFamily;
     if (colors) {
         const { primary, secondary, success, warning, accent, error, ...expectEmpty } = colors;
-        {
+        RUN_IN_DEV(()=>{
             if (Object.keys(expectEmpty).length > 0) warn('styleToTheme: Unrecognized style.colors properties', expectEmpty);
-        }
+        });
         Object.assign(theme, {
             primary,
             secondary,
@@ -59,9 +60,9 @@ import { logger } from '../../../../core/src/utils/logger.mjs';
     }
     if (container) {
         const { backgroundColor, borderColor, width, borderRadius, ...expectEmpty } = container;
-        {
+        RUN_IN_DEV(()=>{
             if (Object.keys(expectEmpty).length > 0) warn('styleToTheme: Unrecognized style.container properties', expectEmpty);
-        }
+        });
         Object.assign(theme, {
             background: backgroundColor,
             border: borderColor,
@@ -72,12 +73,12 @@ import { logger } from '../../../../core/src/utils/logger.mjs';
     }
     if (buttons) {
         const { primary, secondary, disabled, ...expectEmpty } = buttons;
-        {
+        RUN_IN_DEV(()=>{
             if (Object.keys(expectEmpty).length > 0) warn('styleToTheme: Unrecognized style.buttons properties', expectEmpty);
             if (disabled && Object.keys(disabled).length > 0) warn('styleToTheme: buttons.disabled is no longer supported', {
                 disabled
             });
-            if (primary?.borderColor && primary?.backgroundColor && primary.borderColor !== primary.backgroundColor) error("styleToTheme: primary button's border color is now always equal to background color, having distinct colors is no longer supported", {
+            if (primary?.borderColor && primary?.backgroundColor && primary.borderColor !== primary.backgroundColor) error("styleToTheme: primary button's border color is now always equal to background color; " + 'having distinct colors is no longer supported', {
                 borderColor: primary.borderColor,
                 backgroundColor: primary.backgroundColor
             });
@@ -89,7 +90,7 @@ import { logger } from '../../../../core/src/utils/logger.mjs';
                 primaryRadius: primary?.borderRadius,
                 secondaryRadius: secondary?.borderRadius
             });
-        }
+        });
         // Set background and text colors
         Object.assign(theme, {
             primary: primary?.backgroundColor,
@@ -112,13 +113,13 @@ import { logger } from '../../../../core/src/utils/logger.mjs';
     }
     if (inputs) {
         const { backgroundColor, textColor, placeholderColor, borderColor, borderRadius, ...expectEmpty } = inputs;
-        {
+        RUN_IN_DEV(()=>{
             if (Object.keys(expectEmpty).length > 0) warn('styleToTheme: Unrecognized style.buttons properties', expectEmpty);
             if (backgroundColor && theme.background && theme.background !== backgroundColor) error('styleToTheme: Input now always use the container background', {
                 inputBackground: backgroundColor,
                 containerBackground: theme.background
             });
-        }
+        });
         Object.assign(theme, {
             foreground: textColor,
             input: borderColor,
@@ -141,9 +142,9 @@ import { logger } from '../../../../core/src/utils/logger.mjs';
             url: logo.logoImageUrl,
             alt: ''
         };
-        {
+        RUN_IN_DEV(()=>{
             logger.warn('styleToTheme: Please set options.logo.alt for the logo alt text for accessibility');
-        }
+        });
     }
     return {
         theme: removeEmptyValues(theme),

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

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

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

@@ -1,6 +1,7 @@
 import { defaultTheme } from './themes/themes.mjs';
 import { useContext, createContext, useMemo } from 'react';
 import { useMediaQuery } from '../hooks/useMediaQuery.mjs';
+import { RUN_IN_DEV } from '../../../../core/src/utils/dev.mjs';
 import { logger } from '../../../../core/src/utils/logger.mjs';
 
 const defaultOptions = {
@@ -8,13 +9,13 @@ const defaultOptions = {
 };
 function usePresentationWithDefault(maybeConfig, displayWatermark, products, productsName) {
     const { theme, options } = maybeConfig ?? {};
-    {
+    RUN_IN_DEV(()=>{
         const stringProducts = products.filter((p)=>typeof p === 'string');
         if (stringProducts.length > 0) {
             logger.error(`Please add an import for ${productsName} and update config.products to\n` + 'products: [' + products.map((p)=>`${productsName}.${typeof p === 'string' ? p : p.id}`).join(', ') + ']');
             throw new Error("'config.products' should not include strings anymore");
         }
-    }
+    });
     // Switch theme automatically depending on color scheme
     const isDynamic = isDynamicTheme(theme);
     const darkMode = useMediaQuery(isDynamic ? '(prefers-color-scheme: dark)' : undefined);

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

@@ -1 +1 @@
-{"version":3,"file":"PresentationConfig.mjs","sources":["../../../../../../../../web/src/ui/components/PresentationConfig.ts"],"sourcesContent":["import { defaultTheme } from './themes/themes';\nimport { createContext, useContext, useMemo } from 'react';\nimport { PresentationConfig } from '../../types';\nimport { Theme } from './themes/ThemeConfig';\nimport { useMediaQuery } from '../hooks/useMediaQuery';\nimport { IconRegistry } from './IconRegistry';\nimport { IconNames } from '../b2c/components/Icons';\nimport { logger } from '@stytch/core';\n\nexport type PresentationOptions = {\n  /**\n   * When this value is false, the title and description text will not show in the SDK.\n   */\n  hideHeaderText: boolean;\n\n  /**\n   * Optional suffix for <input> id attribute so input IDs are unique.\n   */\n  inputIdSuffix?: string;\n\n  /**\n   * The configuration object for your custom logo.\n   */\n  logo?: {\n    /**\n     * The URL of your custom logo.\n     */\n    url: string;\n\n    /**\n     * Alt text for the logo. This would usually be the name of the website or your company,\n     * unless this is already repeated nearby in which case this should be left empty.\n     */\n    alt: string;\n  };\n\n  /**\n   * Override our icons. Currently, this only supports logos, such as those that appear in Oauth buttons.\n   * This should be an object where the key is the icon name and the value is a React component\n   * (not React element) with a size prop and the rest spread onto the root element.\n   *\n   * Note that custom logos not imported from our packages is not yet available in @stytch/vanilla-js.\n   * We are looking at provide alternatives in the future.\n   *\n   * @example\n   *\n   * // Using a solid black or white icon\n   * import { whiteIcons } from '@stytch/react';\n   *\n   * const presentation = {\n   *   options: {\n   *     icons: {\n   *       outlook: whiteIcons.outlook,\n   *     },\n   *   },\n   * };\n   *\n   * // Using a custom icon\n   * const presentation = {\n   *  icons: {\n   *    outlook: ({ size, ...props }) => (\n   *      <svg width={size} height={size} {...props}>...</svg>\n   *    ),\n   *  },\n   * };\n   */\n  icons?: IconRegistry<string>;\n};\n\nconst defaultOptions: PresentationOptions = {\n  hideHeaderText: false,\n};\n\n/**\n * Internal type -\n * @see {PresentationConfig} is the public one\n */\nexport type Presentation = {\n  theme: Theme;\n  options: PresentationOptions;\n\n  // Internal properties\n  displayWatermark: boolean;\n  iconRegistry: IconRegistry<string>;\n};\n\nexport function usePresentationWithDefault(\n  maybeConfig: PresentationConfig | undefined,\n  displayWatermark: boolean,\n  products: { id: string; icons?: Partial<IconRegistry<IconNames>> }[],\n  productsName?: string,\n): Presentation {\n  const { theme, options } = maybeConfig ?? {};\n\n  if (process.env.NODE_ENV !== 'production') {\n    const stringProducts = products.filter((p) => typeof p === 'string');\n    if (stringProducts.length > 0) {\n      logger.error(\n        `Please add an import for ${productsName} and update config.products to\\n` +\n          'products: [' +\n          products.map((p) => `${productsName}.${typeof p === 'string' ? p : p.id}`).join(', ') +\n          ']',\n      );\n\n      throw new Error(\"'config.products' should not include strings anymore\");\n    }\n  }\n\n  // Switch theme automatically depending on color scheme\n  const isDynamic = isDynamicTheme(theme);\n  const darkMode = useMediaQuery(isDynamic ? '(prefers-color-scheme: dark)' : undefined);\n\n  let effectiveTheme: Partial<Theme> | undefined;\n  if (isDynamic) {\n    effectiveTheme = darkMode ? theme[1] : theme[0];\n  } else {\n    effectiveTheme = theme;\n  }\n\n  // Memoize the icon registry so it only need to be constructed once\n  const iconRegistry = useMemo(() => {\n    const registry: IconRegistry<string> = {};\n    for (const product of products) {\n      Object.assign(registry, product.icons);\n    }\n    Object.assign(registry, options?.icons);\n    return registry;\n  }, [products, options]);\n\n  return {\n    theme: {\n      ...defaultTheme,\n      ...effectiveTheme,\n    },\n    options: {\n      ...defaultOptions,\n      ...options,\n    },\n    displayWatermark,\n    iconRegistry,\n  };\n}\n\nexport function isDynamicTheme(\n  theme: PresentationConfig['theme'],\n): theme is readonly [light: Partial<Theme>, dark: Partial<Theme>] {\n  return Array.isArray(theme);\n}\n\nexport const PresentationContext = createContext<Presentation>(undefined!);\nexport const usePresentation = () => useContext(PresentationContext);\n"],"names":["defaultOptions","hideHeaderText","usePresentationWithDefault","maybeConfig","displayWatermark","products","productsName","theme","options","stringProducts","filter","p","length","logger","error","map","id","join","Error","isDynamic","isDynamicTheme","darkMode","useMediaQuery","undefined","effectiveTheme","iconRegistry","useMemo","registry","product","Object","assign","icons","defaultTheme","Array","isArray","PresentationContext","createContext","usePresentation","useContext"],"mappings":";;;;;AAqEA,MAAMA,cAAAA,GAAsC;IAC1CC,cAAAA,EAAgB;AAClB,CAAA;AAeO,SAASC,2BACdC,WAA2C,EAC3CC,gBAAyB,EACzBC,QAAoE,EACpEC,YAAqB,EAAA;AAErB,IAAA,MAAM,EAAEC,KAAK,EAAEC,OAAO,EAAE,GAAGL,eAAe,EAAC;AAE3C,IAA2C;AACzC,QAAA,MAAMM,iBAAiBJ,QAAAA,CAASK,MAAM,CAAC,CAACC,CAAAA,GAAM,OAAOA,CAAAA,KAAM,QAAA,CAAA;QAC3D,IAAIF,cAAAA,CAAeG,MAAM,GAAG,CAAA,EAAG;AAC7BC,YAAAA,MAAAA,CAAOC,KAAK,CACV,CAAC,yBAAyB,EAAER,YAAAA,CAAa,gCAAgC,CAAC,GACxE,aAAA,GACAD,QAAAA,CAASU,GAAG,CAAC,CAACJ,CAAAA,GAAM,CAAA,EAAGL,YAAAA,CAAa,CAAC,EAAE,OAAOK,CAAAA,KAAM,QAAA,GAAWA,CAAAA,GAAIA,CAAAA,CAAEK,EAAE,CAAA,CAAE,CAAA,CAAEC,IAAI,CAAC,IAAA,CAAA,GAChF,GAAA,CAAA;AAGJ,YAAA,MAAM,IAAIC,KAAAA,CAAM,sDAAA,CAAA;AAClB,QAAA;AACF,IAAA;;AAGA,IAAA,MAAMC,YAAYC,cAAAA,CAAeb,KAAAA,CAAAA;IACjC,MAAMc,QAAAA,GAAWC,aAAAA,CAAcH,SAAAA,GAAY,8BAAA,GAAiCI,SAAAA,CAAAA;IAE5E,IAAIC,cAAAA;AACJ,IAAA,IAAIL,SAAAA,EAAW;AACbK,QAAAA,cAAAA,GAAiBH,WAAWd,KAAK,CAAC,EAAE,GAAGA,KAAK,CAAC,CAAA,CAAE;IACjD,CAAA,MAAO;QACLiB,cAAAA,GAAiBjB,KAAAA;AACnB,IAAA;;AAGA,IAAA,MAAMkB,eAAeC,OAAAA,CAAQ,IAAA;AAC3B,QAAA,MAAMC,WAAiC,EAAC;QACxC,KAAK,MAAMC,WAAWvB,QAAAA,CAAU;AAC9BwB,YAAAA,MAAAA,CAAOC,MAAM,CAACH,QAAAA,EAAUC,OAAAA,CAAQG,KAAK,CAAA;AACvC,QAAA;QACAF,MAAAA,CAAOC,MAAM,CAACH,QAAAA,EAAUnB,OAAAA,EAASuB,KAAAA,CAAAA;QACjC,OAAOJ,QAAAA;IACT,CAAA,EAAG;AAACtB,QAAAA,QAAAA;AAAUG,QAAAA;AAAQ,KAAA,CAAA;IAEtB,OAAO;QACLD,KAAAA,EAAO;AACL,YAAA,GAAGyB,YAAY;AACf,YAAA,GAAGR;AACL,SAAA;QACAhB,OAAAA,EAAS;AACP,YAAA,GAAGR,cAAc;AACjB,YAAA,GAAGQ;AACL,SAAA;AACAJ,QAAAA,gBAAAA;AACAqB,QAAAA;AACF,KAAA;AACF;AAEO,SAASL,eACdb,KAAkC,EAAA;IAElC,OAAO0B,KAAAA,CAAMC,OAAO,CAAC3B,KAAAA,CAAAA;AACvB;AAEO,MAAM4B,mBAAAA,GAAsBC,aAAAA,CAA4Bb,SAAAA;AACxD,MAAMc,eAAAA,GAAkB,IAAMC,UAAAA,CAAWH,mBAAAA;;;;"}
+{"version":3,"file":"PresentationConfig.mjs","sources":["../../../../../../../../web/src/ui/components/PresentationConfig.ts"],"sourcesContent":["import { defaultTheme } from './themes/themes';\nimport { createContext, useContext, useMemo } from 'react';\nimport { PresentationConfig } from '../../types';\nimport { Theme } from './themes/ThemeConfig';\nimport { useMediaQuery } from '../hooks/useMediaQuery';\nimport { IconRegistry } from './IconRegistry';\nimport { IconNames } from '../b2c/components/Icons';\nimport { logger, RUN_IN_DEV } from '@stytch/core';\n\nexport type PresentationOptions = {\n  /**\n   * When this value is false, the title and description text will not show in the SDK.\n   */\n  hideHeaderText: boolean;\n\n  /**\n   * Optional suffix for <input> id attribute so input IDs are unique.\n   */\n  inputIdSuffix?: string;\n\n  /**\n   * The configuration object for your custom logo.\n   */\n  logo?: {\n    /**\n     * The URL of your custom logo.\n     */\n    url: string;\n\n    /**\n     * Alt text for the logo. This would usually be the name of the website or your company,\n     * unless this is already repeated nearby in which case this should be left empty.\n     */\n    alt: string;\n  };\n\n  /**\n   * Override our icons. Currently, this only supports logos, such as those that appear in Oauth buttons.\n   * This should be an object where the key is the icon name and the value is a React component\n   * (not React element) with a size prop and the rest spread onto the root element.\n   *\n   * Note that custom logos not imported from our packages is not yet available in @stytch/vanilla-js.\n   * We are looking at provide alternatives in the future.\n   *\n   * @example\n   *\n   * // Using a solid black or white icon\n   * import { whiteIcons } from '@stytch/react';\n   *\n   * const presentation = {\n   *   options: {\n   *     icons: {\n   *       outlook: whiteIcons.outlook,\n   *     },\n   *   },\n   * };\n   *\n   * // Using a custom icon\n   * const presentation = {\n   *  icons: {\n   *    outlook: ({ size, ...props }) => (\n   *      <svg width={size} height={size} {...props}>...</svg>\n   *    ),\n   *  },\n   * };\n   */\n  icons?: IconRegistry<string>;\n};\n\nconst defaultOptions: PresentationOptions = {\n  hideHeaderText: false,\n};\n\n/**\n * Internal type -\n * @see {PresentationConfig} is the public one\n */\nexport type Presentation = {\n  theme: Theme;\n  options: PresentationOptions;\n\n  // Internal properties\n  displayWatermark: boolean;\n  iconRegistry: IconRegistry<string>;\n};\n\nexport function usePresentationWithDefault(\n  maybeConfig: PresentationConfig | undefined,\n  displayWatermark: boolean,\n  products: { id: string; icons?: Partial<IconRegistry<IconNames>> }[],\n  productsName?: string,\n): Presentation {\n  const { theme, options } = maybeConfig ?? {};\n\n  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"],"names":["defaultOptions","hideHeaderText","usePresentationWithDefault","maybeConfig","displayWatermark","products","productsName","theme","options","RUN_IN_DEV","stringProducts","filter","p","length","logger","error","map","id","join","Error","isDynamic","isDynamicTheme","darkMode","useMediaQuery","undefined","effectiveTheme","iconRegistry","useMemo","registry","product","Object","assign","icons","defaultTheme","Array","isArray","PresentationContext","createContext","usePresentation","useContext"],"mappings":";;;;;;AAqEA,MAAMA,cAAAA,GAAsC;IAC1CC,cAAAA,EAAgB;AAClB,CAAA;AAeO,SAASC,2BACdC,WAA2C,EAC3CC,gBAAyB,EACzBC,QAAoE,EACpEC,YAAqB,EAAA;AAErB,IAAA,MAAM,EAAEC,KAAK,EAAEC,OAAO,EAAE,GAAGL,eAAe,EAAC;IAE3CM,UAAAA,CAAW,IAAA;AACT,QAAA,MAAMC,iBAAiBL,QAAAA,CAASM,MAAM,CAAC,CAACC,CAAAA,GAAM,OAAOA,CAAAA,KAAM,QAAA,CAAA;QAC3D,IAAIF,cAAAA,CAAeG,MAAM,GAAG,CAAA,EAAG;AAC7BC,YAAAA,MAAAA,CAAOC,KAAK,CACV,CAAC,yBAAyB,EAAET,YAAAA,CAAa,gCAAgC,CAAC,GACxE,aAAA,GACAD,QAAAA,CAASW,GAAG,CAAC,CAACJ,CAAAA,GAAM,CAAA,EAAGN,YAAAA,CAAa,CAAC,EAAE,OAAOM,CAAAA,KAAM,QAAA,GAAWA,CAAAA,GAAIA,CAAAA,CAAEK,EAAE,CAAA,CAAE,CAAA,CAAEC,IAAI,CAAC,IAAA,CAAA,GAChF,GAAA,CAAA;AAGJ,YAAA,MAAM,IAAIC,KAAAA,CAAM,sDAAA,CAAA;AAClB,QAAA;AACF,IAAA,CAAA,CAAA;;AAGA,IAAA,MAAMC,YAAYC,cAAAA,CAAed,KAAAA,CAAAA;IACjC,MAAMe,QAAAA,GAAWC,aAAAA,CAAcH,SAAAA,GAAY,8BAAA,GAAiCI,SAAAA,CAAAA;IAE5E,IAAIC,cAAAA;AACJ,IAAA,IAAIL,SAAAA,EAAW;AACbK,QAAAA,cAAAA,GAAiBH,WAAWf,KAAK,CAAC,EAAE,GAAGA,KAAK,CAAC,CAAA,CAAE;IACjD,CAAA,MAAO;QACLkB,cAAAA,GAAiBlB,KAAAA;AACnB,IAAA;;AAGA,IAAA,MAAMmB,eAAeC,OAAAA,CAAQ,IAAA;AAC3B,QAAA,MAAMC,WAAiC,EAAC;QACxC,KAAK,MAAMC,WAAWxB,QAAAA,CAAU;AAC9ByB,YAAAA,MAAAA,CAAOC,MAAM,CAACH,QAAAA,EAAUC,OAAAA,CAAQG,KAAK,CAAA;AACvC,QAAA;QACAF,MAAAA,CAAOC,MAAM,CAACH,QAAAA,EAAUpB,OAAAA,EAASwB,KAAAA,CAAAA;QACjC,OAAOJ,QAAAA;IACT,CAAA,EAAG;AAACvB,QAAAA,QAAAA;AAAUG,QAAAA;AAAQ,KAAA,CAAA;IAEtB,OAAO;QACLD,KAAAA,EAAO;AACL,YAAA,GAAG0B,YAAY;AACf,YAAA,GAAGR;AACL,SAAA;QACAjB,OAAAA,EAAS;AACP,YAAA,GAAGR,cAAc;AACjB,YAAA,GAAGQ;AACL,SAAA;AACAJ,QAAAA,gBAAAA;AACAsB,QAAAA;AACF,KAAA;AACF;AAEO,SAASL,eACdd,KAAkC,EAAA;IAElC,OAAO2B,KAAAA,CAAMC,OAAO,CAAC5B,KAAAA,CAAAA;AACvB;AAEO,MAAM6B,mBAAAA,GAAsBC,aAAAA,CAA4Bb,SAAAA;AACxD,MAAMc,eAAAA,GAAkB,IAAMC,UAAAA,CAAWH,mBAAAA;;;;"}

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

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

package/dist/esm-dev/packages/web/src/ui/react/b2b/B2BIdentityProvider.mjs

@@ -20,7 +20,7 @@ import { createB2BComponent } from '../bindings/createB2BComponent.mjs';
  *     onEvent: (event) => console.log(event)
  *   }}
  * />
- */ const B2BIdentityProvider = createB2BComponent('B2BIdentityProvider', B2BIDPContainer);
+ */ const B2BIdentityProvider = /* @__PURE__ */ createB2BComponent('B2BIdentityProvider', B2BIDPContainer);
 
 export { B2BIdentityProvider };
 //# sourceMappingURL=B2BIdentityProvider.mjs.map

package/dist/esm-dev/packages/web/src/ui/react/b2b/B2BIdentityProvider.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"B2BIdentityProvider.mjs","sources":["../../../../../../../../../web/src/ui/react/b2b/B2BIdentityProvider.tsx"],"sourcesContent":["import { StytchB2BProps } from './Stytch';\nimport { B2BIDPContainer } from '../../b2b/App';\nimport { createB2BComponent } from '../bindings/createB2BComponent';\nimport { AuthTokenParams, B2BIDPConsentManifestGenerator } from '../../../types';\n\nexport type B2BIdentityProviderProps = Omit<StytchB2BProps, 'config'> & {\n  /**\n   * Optional {@link B2BIDPConsentManifestGenerator} to customize the consent screen.\n   */\n  getIDPConsentManifest?: B2BIDPConsentManifestGenerator;\n  /**\n   * Optional trusted auth token parameters to attest before the OAuth flow.\n   */\n  trustedAuthTokenParams?: AuthTokenParams;\n};\n\n/**\n * The Stytch B2B IDP component.\n * Parses OAuth Authorization params (client_id, scope, nonce, etc.) out of the page URL.\n * Requires the user to be logged in.\n * This component can only be used with a Stytch B2B UI Client\n * passed into the StytchB2BProvider.\n *\n * See the {@link https://stytch.com/docs/b2b/sdks online reference}\n *\n * @example\n * <B2BIdentityProvider\n *   presentation={{\n *     theme: { primary: '#ff00f7' },\n *     options: {},\n *   }}\n *   callbacks={{\n *     onEvent: (event) => console.log(event)\n *   }}\n * />\n */\nexport const B2BIdentityProvider = createB2BComponent('B2BIdentityProvider', B2BIDPContainer);\n"],"names":["B2BIdentityProvider","createB2BComponent","B2BIDPContainer"],"mappings":";;;AAgBA;;;;;;;;;;;;;;;;;;;AAmBC,IACM,MAAMA,mBAAAA,GAAsBC,kBAAAA,CAAmB,uBAAuBC,eAAAA;;;;"}
+{"version":3,"file":"B2BIdentityProvider.mjs","sources":["../../../../../../../../../web/src/ui/react/b2b/B2BIdentityProvider.tsx"],"sourcesContent":["import { StytchB2BProps } from './Stytch';\nimport { B2BIDPContainer } from '../../b2b/App';\nimport { createB2BComponent } from '../bindings/createB2BComponent';\nimport { AuthTokenParams, B2BIDPConsentManifestGenerator } from '../../../types';\n\nexport type B2BIdentityProviderProps = Omit<StytchB2BProps, 'config'> & {\n  /**\n   * Optional {@link B2BIDPConsentManifestGenerator} to customize the consent screen.\n   */\n  getIDPConsentManifest?: B2BIDPConsentManifestGenerator;\n  /**\n   * Optional trusted auth token parameters to attest before the OAuth flow.\n   */\n  trustedAuthTokenParams?: AuthTokenParams;\n};\n\n/**\n * The Stytch B2B IDP component.\n * Parses OAuth Authorization params (client_id, scope, nonce, etc.) out of the page URL.\n * Requires the user to be logged in.\n * This component can only be used with a Stytch B2B UI Client\n * passed into the StytchB2BProvider.\n *\n * See the {@link https://stytch.com/docs/b2b/sdks online reference}\n *\n * @example\n * <B2BIdentityProvider\n *   presentation={{\n *     theme: { primary: '#ff00f7' },\n *     options: {},\n *   }}\n *   callbacks={{\n *     onEvent: (event) => console.log(event)\n *   }}\n * />\n */\nexport const B2BIdentityProvider = /* @__PURE__ */ createB2BComponent('B2BIdentityProvider', B2BIDPContainer);\n"],"names":["B2BIdentityProvider","createB2BComponent","B2BIDPContainer"],"mappings":";;;AAgBA;;;;;;;;;;;;;;;;;;;AAmBC,IACM,MAAMA,mBAAAA,mBAAsCC,kBAAAA,CAAmB,uBAAuBC,eAAAA;;;;"}

package/dist/esm-dev/packages/web/src/ui/react/b2b/Stytch.mjs

@@ -32,7 +32,7 @@ import { createB2BComponent } from '../bindings/createB2BComponent.mjs';
  *     onEvent: (event) => console.log(event)
  *   }}
  * />
- */ const StytchB2B = createB2BComponent('StytchB2B', AppContainer);
+ */ const StytchB2B = /* @__PURE__ */ createB2BComponent('StytchB2B', AppContainer);
 
 export { StytchB2B };
 //# sourceMappingURL=Stytch.mjs.map

package/dist/esm-dev/packages/web/src/ui/react/b2b/Stytch.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Stytch.mjs","sources":["../../../../../../../../../web/src/ui/react/b2b/Stytch.tsx"],"sourcesContent":["import { Callbacks, StringsOptions, StytchProjectConfigurationInput } from '@stytch/core/public';\nimport { PresentationConfig, StytchB2BUIConfig } from '../../../types';\nimport { AppContainer } from '../../b2b/App';\nimport { createB2BComponent } from '../bindings/createB2BComponent';\n\nexport interface StytchB2BProps<\n  TProjectConfiguration extends StytchProjectConfigurationInput = Stytch.DefaultProjectConfiguration,\n> extends StringsOptions {\n  /**\n   * An optional {@link PresentationConfig} to customize the UI presentation.\n   */\n  presentation?: PresentationConfig;\n  /**\n   * An optional {@link Callbacks} object.\n   *\n   * @example\n   * {\n   *   onError: ({message}) => {\n   *      console.error('Stytch error', message)\n   *   }\n   * }\n   *\n   * @example\n   * {\n   *   onEvent: ({type, data}) => {\n   *     if(type === StytchEventType.B2BMagicLinkAuthenticate) {\n   *       console.log('Logged in with', data);\n   *     }\n   *   }\n   * }\n   */\n  callbacks?: Callbacks<TProjectConfiguration>;\n  /**\n   * A {@link StytchB2BUIConfig} object. Add products and product-specific config to this object to change the login methods shown.\n   *\n   *\n   * @example\n   * {\n   *   products: [B2BProducts.emailMagicLinks],\n   *   authFlowType: \"Discovery\",\n   *   emailMagicLinksOptions: {\n   *     discoveryRedirectURL: 'https://example.com/authenticate',\n   *   },\n   *   sessionOptions: {\n   *     sessionDurationMinutes: 60,\n   *   },\n   * }\n   *\n   * @example\n   * {\n   *   products: [B2BProducts.emailMagicLinks, B2BProducts.sso],\n   *   authFlowType: \"Organization\",\n   *   emailMagicLinksOptions: {\n   *     loginRedirectURL: 'https://example.com/authenticate',\n   *     signupRedirectURL: 'https://example.com/authenticate',\n   *   },\n   *   ssoOptions: {\n   *     loginRedirectURL: 'https://example.com/authenticate',\n   *     signupRedirectURL: 'https://example.com/authenticate',\n   *   },\n   *   sessionOptions: {\n   *     sessionDurationMinutes: 60,\n   *   },\n   * }\n   */\n  config: StytchB2BUIConfig;\n}\n\n/**\n * The Stytch B2B UI component.\n * This component can only be used with a Stytch B2B UI Client\n * passed into the StytchB2BProvider.\n *\n * See the {@link https://stytch.com/docs/b2b/sdks online reference}\n *\n * @example\n * <StytchB2B\n *   config={{\n *     authFlowType: \"Organization\",\n *     emailMagicLinksOptions: {\n *       loginRedirectURL: 'https://example.com/authenticate',\n *       signupRedirectURL: 'https://example.com/authenticate',\n *     },\n *     ssoOptions: {\n *       loginRedirectURL: 'https://example.com/authenticate',\n *       signupRedirectURL: 'https://example.com/authenticate',\n *     },\n *     sessionOptions: {\n *       sessionDurationMinutes: 60,\n *     }\n *   }}\n *   presentation={{\n *     theme: { primary: '#0577CA' },\n *     options: {},\n *   }}\n *   callbacks={{\n *     onEvent: (event) => console.log(event)\n *   }}\n * />\n */\nexport const StytchB2B = createB2BComponent('StytchB2B', AppContainer);\n"],"names":["StytchB2B","createB2BComponent","AppContainer"],"mappings":";;;AAoEA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA+BC,IACM,MAAMA,SAAAA,GAAYC,kBAAAA,CAAmB,aAAaC,YAAAA;;;;"}
+{"version":3,"file":"Stytch.mjs","sources":["../../../../../../../../../web/src/ui/react/b2b/Stytch.tsx"],"sourcesContent":["import { Callbacks, StringsOptions, StytchProjectConfigurationInput } from '@stytch/core/public';\nimport { PresentationConfig, StytchB2BUIConfig } from '../../../types';\nimport { AppContainer } from '../../b2b/App';\nimport { createB2BComponent } from '../bindings/createB2BComponent';\n\nexport interface StytchB2BProps<\n  TProjectConfiguration extends StytchProjectConfigurationInput = Stytch.DefaultProjectConfiguration,\n> extends StringsOptions {\n  /**\n   * An optional {@link PresentationConfig} to customize the UI presentation.\n   */\n  presentation?: PresentationConfig;\n  /**\n   * An optional {@link Callbacks} object.\n   *\n   * @example\n   * {\n   *   onError: ({message}) => {\n   *      console.error('Stytch error', message)\n   *   }\n   * }\n   *\n   * @example\n   * {\n   *   onEvent: ({type, data}) => {\n   *     if(type === StytchEventType.B2BMagicLinkAuthenticate) {\n   *       console.log('Logged in with', data);\n   *     }\n   *   }\n   * }\n   */\n  callbacks?: Callbacks<TProjectConfiguration>;\n  /**\n   * A {@link StytchB2BUIConfig} object. Add products and product-specific config to this object to change the login methods shown.\n   *\n   *\n   * @example\n   * {\n   *   products: [B2BProducts.emailMagicLinks],\n   *   authFlowType: \"Discovery\",\n   *   emailMagicLinksOptions: {\n   *     discoveryRedirectURL: 'https://example.com/authenticate',\n   *   },\n   *   sessionOptions: {\n   *     sessionDurationMinutes: 60,\n   *   },\n   * }\n   *\n   * @example\n   * {\n   *   products: [B2BProducts.emailMagicLinks, B2BProducts.sso],\n   *   authFlowType: \"Organization\",\n   *   emailMagicLinksOptions: {\n   *     loginRedirectURL: 'https://example.com/authenticate',\n   *     signupRedirectURL: 'https://example.com/authenticate',\n   *   },\n   *   ssoOptions: {\n   *     loginRedirectURL: 'https://example.com/authenticate',\n   *     signupRedirectURL: 'https://example.com/authenticate',\n   *   },\n   *   sessionOptions: {\n   *     sessionDurationMinutes: 60,\n   *   },\n   * }\n   */\n  config: StytchB2BUIConfig;\n}\n\n/**\n * The Stytch B2B UI component.\n * This component can only be used with a Stytch B2B UI Client\n * passed into the StytchB2BProvider.\n *\n * See the {@link https://stytch.com/docs/b2b/sdks online reference}\n *\n * @example\n * <StytchB2B\n *   config={{\n *     authFlowType: \"Organization\",\n *     emailMagicLinksOptions: {\n *       loginRedirectURL: 'https://example.com/authenticate',\n *       signupRedirectURL: 'https://example.com/authenticate',\n *     },\n *     ssoOptions: {\n *       loginRedirectURL: 'https://example.com/authenticate',\n *       signupRedirectURL: 'https://example.com/authenticate',\n *     },\n *     sessionOptions: {\n *       sessionDurationMinutes: 60,\n *     }\n *   }}\n *   presentation={{\n *     theme: { primary: '#0577CA' },\n *     options: {},\n *   }}\n *   callbacks={{\n *     onEvent: (event) => console.log(event)\n *   }}\n * />\n */\nexport const StytchB2B = /* @__PURE__ */ createB2BComponent('StytchB2B', AppContainer);\n"],"names":["StytchB2B","createB2BComponent","AppContainer"],"mappings":";;;AAoEA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA+BC,IACM,MAAMA,SAAAA,mBAA4BC,kBAAAA,CAAmB,aAAaC,YAAAA;;;;"}

package/dist/esm-dev/packages/web/src/ui/react/b2b/StytchB2BContext.mjs

@@ -85,7 +85,7 @@ const useIsMounted__INTERNAL = ()=>useContext(StytchB2BContext).isMounted;
  *
  * Remember - authorization checks for sensitive actions should always occur on the backend as well.
  * @example
- * const { isAuthorized } = useStytchIsAuthorized<Permissions>('documents', 'edit');
+ * const { isAuthorized } = useStytchIsAuthorized('documents', 'edit');
  * return <button disabled={!isAuthorized}>Edit</button>
  */ const useStytchIsAuthorized = (resourceId, action)=>{
     invariant(useIsMounted__INTERNAL(), noProviderError('useStytchIsAuthorized', 'StytchB2BProvider'));