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

package/dist/esm/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/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/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/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":";;;;;;;;AAWA,MAAMA,WAAAA,GAAc,CAAA;AAEpB,MAAMC,mBAAAA,GAAsB,CAAC,EAAEC,MAAM,EAAuB,GAAA;IAC1D,MAAMC,IAAAA,GAAOC,YAAY,CAACF,MAAAA,CAAO;AACjC,IAAA,qBAAO,KAAA,CAAA,aAAA,CAACC,IAAAA,EAAAA,IAAAA,CAAAA;AACV,CAAA;AAEA,MAAME,cAAAA,GAAiB;IACrB,CAACC,OAAAA,CAAQC,OAAO,GAAC;;;;IACjB,CAACD,OAAAA,CAAQE,OAAO,GAAC;;;;IACjB,CAACF,OAAAA,CAAQG,QAAQ,GAAC;;;;IAClB,CAACH,OAAAA,CAAQI,QAAQ,GAAC;;;;IAClB,CAACJ,OAAAA,CAAQK,qBAAqB,GAAC;;;;IAI/B,CAACL,OAAAA,CAAQM,mBAAmB,GAAC;;;;AAI/B,CAAA;AAEO,MAAMC,mBAAAA,GAAsB,CAAC,EAAEC,IAAI,EAA8B,GAAA;AACtE,IAAA,MAAM,EAAA,IAAA,EAAA,OAAA,EAAA,CAAA,EAAA,GAAA,EAAA,GAAQC,SAAAA,EAAAA;IACd,MAAM,CAACC,KAAAA,EAAOC,QAAAA,CAAS,GAAGC,gBAAAA,EAAAA;AAC1B,IAAA,MAAMC,MAAAA,GAASC,SAAAA,EAAAA;AACf,IAAA,MAAMC,YAAAA,GAAeF,MAAAA,CAAOG,YAAY,EAAEC,UAAUC,MAAAA,IAAU,CAAA;;IAG9D,MAAMC,yBAAAA,GAA4BzB,cAAcqB,YAAAA,GAAe,CAAA;AAC/D,IAAA,MAAMK,gBAAgB,CAACxB,MAAAA,GAAAA;QACrBe,QAAAA,CAAS;YACPH,IAAAA,EAAM,qBAAA;YACNa,WAAAA,EAAa;gBACX,GAAGX,KAAAA,CAAMY,SAAS,CAACD,WAAW;gBAC9BE,YAAAA,EAAc3B;AAChB;AACF,SAAA,CAAA;QACAe,QAAAA,CAAS;YAAEH,IAAAA,EAAM,YAAA;AAAcgB,YAAAA,MAAAA,EAAQC,WAAWC;AAAc,SAAA,CAAA;AAClE,IAAA,CAAA;AAEA,IAAA,MAAMC,kBAAAA,GAAsBC,MAAAA,CAAOC,IAAI,CAAC7B,OAAAA,CAAAA,CAAsC8B,MAAM,CAAC,CAAClC,MAAAA,GACpFmC,eAAAA,CAAgB/B,OAAO,CAACJ,MAAAA,CAAO,CAAA,CAAA;IAGjC,MAAMoC,uBAAAA,GAA0BL,kBAAAA,CAAmBT,MAAM,GAAGC,yBAAAA;AAE5D,IAAA,MAAMc,WAAAA,GAAcN,kBAAAA,CAAmBO,KAAK,CAAC,CAAA,EAAGf,yBAAAA,CAAAA;IAChD,MAAMgB,WAAAA,GAAcR,kBAAAA,CAAmBO,KAAK,CAACf,yBAAAA,CAAAA;IAE7C,MAAMiB,eAAAA,GAAkB5B,IAAAA,KAAS,MAAA,GAASyB,WAAAA,GAAcE,WAAAA;AAExD,IAAA,qBACE,oBAACE,YAAAA,EAAAA,IAAAA,EACED,eAAAA,CAAgBE,GAAG,CAAC,CAAC1C,uBACpB,KAAA,CAAA,aAAA,CAAC2C,MAAAA,EAAAA;YACCC,GAAAA,EAAK5C,MAAAA;YACL6C,OAAAA,EAAQ,SAAA;AACRC,YAAAA,IAAAA,gBAAM,KAAA,CAAA,aAAA,CAAC/C,mBAAAA,EAAAA;gBAAoBC,MAAAA,EAAQI,OAAO,CAACJ,MAAAA;;AAC3C+C,YAAAA,OAAAA,EAAS,IAAMvB,aAAAA,CAAcpB,OAAO,CAACJ,MAAAA,CAAO;AAE3CY,SAAAA,EAAAA,IAAAA,KAAS,mBAAWT,cAAc,CAACC,OAAO,CAACJ,MAAAA,CAAO,CAAC,CAAA,GAAA,OAAA,CAAA,CAAA,CAAMgD,YAAY,CAAC5C,OAAO,CAACJ,MAAAA,CAAO,CAAC,KAG1FoC,uBAAAA,IAA2BxB,IAAAA,KAAS,uBACnC,KAAA,CAAA,aAAA,CAAC+B,MAAAA,EAAAA;QACCE,OAAAA,EAAQ,SAAA;AACRC,QAAAA,IAAAA,gBAAM,KAAA,CAAA,aAAA,CAAC/C,mBAAAA,EAAAA;AAAoBC,YAAAA,MAAAA,EAAQI,QAAQK;;AAC3CsC,QAAAA,OAAAA,EAAS,IAAMhC,QAAAA,CAAS;gBAAEH,IAAAA,EAAM,YAAA;AAAcgB,gBAAAA,MAAAA,EAAQC,WAAWoB;AAAkB,aAAA;;;;wBAKrF,KAAA,CAAA,aAAA,CAACN,MAAAA,EAAAA;QACCE,OAAAA,EAAQ,SAAA;AACRE,QAAAA,OAAAA,EAAS,IAAMhC,QAAAA,CAAS;gBAAEH,IAAAA,EAAM,YAAA;AAAcgB,gBAAAA,MAAAA,EAAQC,WAAWqB;AAAkB,aAAA;;;;;AAO7F;;;;"}
+{"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/packages/web/src/ui/b2c/screens/Secondary/PasswordlessAuthenticate.mjs

@@ -42,10 +42,14 @@ const PasswordlessAuthenticate = ({ secondaryType })=>{
     useMountEffect(()=>{
         switch(secondaryType){
             case 'eml':
-                sendLink();
+                sendLink().catch(()=>{
+                // Swallow error to avoid unhandled promise errors, sendLink() will already show error toast
+                });
                 return;
             case 'otp':
-                sendCode();
+                sendCode().catch(()=>{
+                // Swallow error to avoid unhandled promise errors, sendLink() will already show error toast
+                });
                 return;
             default:
                 stytchClient.passwords.resetByEmailStart(convertPasswordResetOptions(email, passwordOptions)).then((data)=>{

package/dist/esm/packages/web/src/ui/b2c/screens/Secondary/PasswordlessAuthenticate.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"PasswordlessAuthenticate.mjs","sources":["../../../../../../../../../../web/src/ui/b2c/screens/Secondary/PasswordlessAuthenticate.tsx"],"sourcesContent":["import React, { useState } from 'react';\nimport { StytchAPIError, StytchEventType } from '@stytch/core/public';\nimport { EmailConfirmation } from './EmailConfirmation';\nimport { OTPAuthenticate } from './OTPAuthenticate';\nimport Divider from '../../../components/molecules/Divider';\nimport { convertPasswordResetOptions } from '../../../../utils';\nimport {\n  AppScreens,\n  useConfig,\n  useErrorCallback,\n  useEventCallback,\n  useGlobalReducer,\n  useStytch,\n} from '../../GlobalContextProvider';\nimport { useMountEffect } from '../../../hooks/useMountEffect';\nimport Button from '../../../components/atoms/Button';\nimport ErrorText from '../../../components/molecules/ErrorText';\nimport { getTranslatedError } from '../../../../utils/getTranslatedError';\nimport { useLingui } from '@lingui/react/macro';\nimport Column from '../../../components/atoms/Column';\nimport { usePasswordlessAuthenticate } from './usePasswordlessAuthenticate';\n\ntype PasswordlessAuthenticateProps = {\n  secondaryType: 'eml' | 'otp' | undefined;\n};\n\nexport const PasswordlessAuthenticate = ({ secondaryType }: PasswordlessAuthenticateProps) => {\n  const { t } = useLingui();\n  const stytchClient = useStytch();\n  const config = useConfig();\n  const [state, dispatch] = useGlobalReducer();\n  const onEvent = useEventCallback();\n  const onError = useErrorCallback();\n\n  const [errorMessage, setErrorMessage] = useState('');\n\n  const { sendLink, sendCode } = usePasswordlessAuthenticate();\n  const passwordOptions = config.passwordOptions;\n\n  const email = state.formState.passwordState.email;\n\n  const resetPassword = () => {\n    stytchClient.passwords\n      .resetByEmailStart(convertPasswordResetOptions(email, passwordOptions))\n      .then((data) => {\n        onEvent({ type: StytchEventType.PasswordResetByEmailStart, data });\n        dispatch({ type: 'transition', screen: AppScreens.PasswordSetNew });\n      })\n      .catch((e: StytchAPIError) => {\n        onError(e);\n        setErrorMessage(getTranslatedError(e, t));\n      });\n  };\n\n  useMountEffect(() => {\n    switch (secondaryType) {\n      case 'eml':\n        sendLink();\n        return;\n\n      case 'otp':\n        sendCode();\n        return;\n\n      default:\n        stytchClient.passwords\n          .resetByEmailStart(convertPasswordResetOptions(email, passwordOptions))\n          .then((data) => {\n            onEvent({ type: StytchEventType.PasswordResetByEmailStart, data });\n            dispatch({ type: 'transition', screen: AppScreens.PasswordSetNew });\n          })\n          .catch((e: StytchAPIError) => {\n            onError(e);\n          });\n        return;\n    }\n  });\n\n  if (!secondaryType) {\n    return null;\n  }\n\n  return (\n    <>\n      {secondaryType === 'eml' ? <EmailConfirmation showGoBack={false} /> : <OTPAuthenticate hideBackButton />}\n\n      <Divider />\n\n      <Column gap={2}>\n        <Button onClick={resetPassword} variant=\"outline\">\n          {t({ id: 'button.createPasswordInstead', message: 'Create a password instead' })}\n        </Button>\n        {errorMessage && <ErrorText>{errorMessage}</ErrorText>}\n      </Column>\n    </>\n  );\n};\n"],"names":["PasswordlessAuthenticate","secondaryType","useLingui","stytchClient","useStytch","config","useConfig","state","dispatch","useGlobalReducer","onEvent","useEventCallback","onError","useErrorCallback","errorMessage","setErrorMessage","useState","sendLink","sendCode","usePasswordlessAuthenticate","passwordOptions","email","formState","passwordState","resetPassword","passwords","resetByEmailStart","convertPasswordResetOptions","then","data","type","StytchEventType","PasswordResetByEmailStart","screen","AppScreens","PasswordSetNew","catch","e","getTranslatedError","useMountEffect","React","EmailConfirmation","showGoBack","OTPAuthenticate","hideBackButton","Divider","Column","gap","Button","onClick","variant","ErrorText"],"mappings":"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"}
+{"version":3,"file":"PasswordlessAuthenticate.mjs","sources":["../../../../../../../../../../web/src/ui/b2c/screens/Secondary/PasswordlessAuthenticate.tsx"],"sourcesContent":["import React, { useState } from 'react';\nimport { StytchAPIError, StytchEventType } from '@stytch/core/public';\nimport { EmailConfirmation } from './EmailConfirmation';\nimport { OTPAuthenticate } from './OTPAuthenticate';\nimport Divider from '../../../components/molecules/Divider';\nimport { convertPasswordResetOptions } from '../../../../utils';\nimport {\n  AppScreens,\n  useConfig,\n  useErrorCallback,\n  useEventCallback,\n  useGlobalReducer,\n  useStytch,\n} from '../../GlobalContextProvider';\nimport { useMountEffect } from '../../../hooks/useMountEffect';\nimport Button from '../../../components/atoms/Button';\nimport ErrorText from '../../../components/molecules/ErrorText';\nimport { getTranslatedError } from '../../../../utils/getTranslatedError';\nimport { useLingui } from '@lingui/react/macro';\nimport Column from '../../../components/atoms/Column';\nimport { usePasswordlessAuthenticate } from './usePasswordlessAuthenticate';\n\ntype PasswordlessAuthenticateProps = {\n  secondaryType: 'eml' | 'otp' | undefined;\n};\n\nexport const PasswordlessAuthenticate = ({ secondaryType }: PasswordlessAuthenticateProps) => {\n  const { t } = useLingui();\n  const stytchClient = useStytch();\n  const config = useConfig();\n  const [state, dispatch] = useGlobalReducer();\n  const onEvent = useEventCallback();\n  const onError = useErrorCallback();\n\n  const [errorMessage, setErrorMessage] = useState('');\n\n  const { sendLink, sendCode } = usePasswordlessAuthenticate();\n  const passwordOptions = config.passwordOptions;\n\n  const email = state.formState.passwordState.email;\n\n  const resetPassword = () => {\n    stytchClient.passwords\n      .resetByEmailStart(convertPasswordResetOptions(email, passwordOptions))\n      .then((data) => {\n        onEvent({ type: StytchEventType.PasswordResetByEmailStart, data });\n        dispatch({ type: 'transition', screen: AppScreens.PasswordSetNew });\n      })\n      .catch((e: StytchAPIError) => {\n        onError(e);\n        setErrorMessage(getTranslatedError(e, t));\n      });\n  };\n\n  useMountEffect(() => {\n    switch (secondaryType) {\n      case 'eml':\n        sendLink().catch(() => {\n          // Swallow error to avoid unhandled promise errors, sendLink() will already show error toast\n        });\n        return;\n\n      case 'otp':\n        sendCode().catch(() => {\n          // Swallow error to avoid unhandled promise errors, sendLink() will already show error toast\n        });\n        return;\n\n      default:\n        stytchClient.passwords\n          .resetByEmailStart(convertPasswordResetOptions(email, passwordOptions))\n          .then((data) => {\n            onEvent({ type: StytchEventType.PasswordResetByEmailStart, data });\n            dispatch({ type: 'transition', screen: AppScreens.PasswordSetNew });\n          })\n          .catch((e: StytchAPIError) => {\n            onError(e);\n          });\n        return;\n    }\n  });\n\n  if (!secondaryType) {\n    return null;\n  }\n\n  return (\n    <>\n      {secondaryType === 'eml' ? <EmailConfirmation showGoBack={false} /> : <OTPAuthenticate hideBackButton />}\n\n      <Divider />\n\n      <Column gap={2}>\n        <Button onClick={resetPassword} variant=\"outline\">\n          {t({ id: 'button.createPasswordInstead', message: 'Create a password instead' })}\n        </Button>\n        {errorMessage && <ErrorText>{errorMessage}</ErrorText>}\n      </Column>\n    </>\n  );\n};\n"],"names":["PasswordlessAuthenticate","secondaryType","useLingui","stytchClient","useStytch","config","useConfig","state","dispatch","useGlobalReducer","onEvent","useEventCallback","onError","useErrorCallback","errorMessage","setErrorMessage","useState","sendLink","sendCode","usePasswordlessAuthenticate","passwordOptions","email","formState","passwordState","resetPassword","passwords","resetByEmailStart","convertPasswordResetOptions","then","data","type","StytchEventType","PasswordResetByEmailStart","screen","AppScreens","PasswordSetNew","catch","e","getTranslatedError","useMountEffect","React","EmailConfirmation","showGoBack","OTPAuthenticate","hideBackButton","Divider","Column","gap","Button","onClick","variant","ErrorText"],"mappings":"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"}

package/dist/esm/packages/web/src/ui/b2c/screens/Secondary/usePasswordlessAuthenticate.mjs

@@ -1,10 +1,14 @@
+import { useLingui } from '../../../../../../../node_modules/@lingui/react/dist/index.mjs';
 import { useState } from 'react';
 import { useStytch, useConfig, useGlobalReducer, useEventCallback, useErrorCallback } from '../../GlobalContextProvider.mjs';
 import { convertMagicLinkOptions } from '../../../../utils/index.mjs';
+import { errorToast } from '../../../components/atoms/Toast.mjs';
+import { getTranslatedError } from '../../../../utils/getTranslatedError.mjs';
 import { DEFAULT_OTP_EXPIRATION_MINUTES } from '../../../../../../core/src/constants.mjs';
 import { StytchEventType, OTPMethods } from '../../../../../../core/src/public/ui.mjs';
 
 function usePasswordlessAuthenticate() {
+    const { i18n: $__i18n, _: $__ } = useLingui();
     const stytchClient = useStytch();
     const { emailMagicLinksOptions, otpOptions } = useConfig();
     const [state, dispatch] = useGlobalReducer();
@@ -29,6 +33,9 @@ function usePasswordlessAuthenticate() {
             });
         } catch (e) {
             onError(e);
+            errorToast({
+                message: getTranslatedError(e, $__)
+            });
             throw e;
         } finally{
             setIsSubmitting(false);
@@ -55,6 +62,9 @@ function usePasswordlessAuthenticate() {
             });
         } catch (e) {
             onError(e);
+            errorToast({
+                message: getTranslatedError(e, $__)
+            });
             throw e;
         } finally{
             setIsSubmitting(false);

package/dist/esm/packages/web/src/ui/b2c/screens/Secondary/usePasswordlessAuthenticate.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"usePasswordlessAuthenticate.mjs","sources":["../../../../../../../../../../web/src/ui/b2c/screens/Secondary/usePasswordlessAuthenticate.ts"],"sourcesContent":["import { useState } from 'react';\nimport { DEFAULT_OTP_EXPIRATION_MINUTES } from '@stytch/core';\nimport { OTPMethods, StytchEventType, StytchSDKAPIError } from '@stytch/core/public';\nimport {\n  useConfig,\n  useErrorCallback,\n  useEventCallback,\n  useGlobalReducer,\n  useStytch,\n} from '../../GlobalContextProvider';\nimport { convertMagicLinkOptions } from '../../../../utils';\n\nexport function usePasswordlessAuthenticate() {\n  const stytchClient = useStytch();\n  const { emailMagicLinksOptions, otpOptions } = useConfig();\n  const [state, dispatch] = useGlobalReducer();\n  const onEvent = useEventCallback();\n  const onError = useErrorCallback();\n\n  const [isSubmitting, setIsSubmitting] = useState(false);\n\n  const email = state.formState.passwordState.email;\n\n  const sendLink = async () => {\n    setIsSubmitting(true);\n\n    try {\n      const data = await stytchClient.magicLinks.email.loginOrCreate(\n        email,\n        convertMagicLinkOptions(emailMagicLinksOptions),\n      );\n      onEvent({ type: StytchEventType.MagicLinkLoginOrCreateEvent, data: { ...data, email } });\n      dispatch({ type: 'set_magic_link_email', email: email });\n    } catch (e) {\n      onError(e as StytchSDKAPIError);\n      throw e;\n    } finally {\n      setIsSubmitting(false);\n    }\n  };\n\n  const sendCode = async () => {\n    setIsSubmitting(true);\n\n    try {\n      const data = await stytchClient.otps.email.loginOrCreate(email, {\n        expiration_minutes: otpOptions?.expirationMinutes ?? DEFAULT_OTP_EXPIRATION_MINUTES,\n        locale: otpOptions?.locale,\n      });\n      onEvent({ type: StytchEventType.OTPsLoginOrCreateEvent, data });\n      dispatch({\n        type: 'update_otp_state',\n        otpState: {\n          type: OTPMethods.Email,\n          methodId: data.method_id,\n          otpDestination: email,\n        },\n      });\n    } catch (e) {\n      onError(e as StytchSDKAPIError);\n      throw e;\n    } finally {\n      setIsSubmitting(false);\n    }\n  };\n\n  return {\n    sendLink,\n    sendCode,\n    isSubmitting,\n  };\n}\n"],"names":["usePasswordlessAuthenticate","stytchClient","useStytch","emailMagicLinksOptions","otpOptions","useConfig","state","dispatch","useGlobalReducer","onEvent","useEventCallback","onError","useErrorCallback","isSubmitting","setIsSubmitting","useState","email","formState","passwordState","sendLink","data","magicLinks","loginOrCreate","convertMagicLinkOptions","type","StytchEventType","MagicLinkLoginOrCreateEvent","e","sendCode","otps","expiration_minutes","expirationMinutes","DEFAULT_OTP_EXPIRATION_MINUTES","locale","OTPsLoginOrCreateEvent","otpState","OTPMethods","Email","methodId","method_id","otpDestination"],"mappings":";;;;;;AAYO,SAASA,2BAAAA,GAAAA;AACd,IAAA,MAAMC,YAAAA,GAAeC,SAAAA,EAAAA;AACrB,IAAA,MAAM,EAAEC,sBAAsB,EAAEC,UAAU,EAAE,GAAGC,SAAAA,EAAAA;IAC/C,MAAM,CAACC,KAAAA,EAAOC,QAAAA,CAAS,GAAGC,gBAAAA,EAAAA;AAC1B,IAAA,MAAMC,OAAAA,GAAUC,gBAAAA,EAAAA;AAChB,IAAA,MAAMC,OAAAA,GAAUC,gBAAAA,EAAAA;AAEhB,IAAA,MAAM,CAACC,YAAAA,EAAcC,eAAAA,CAAgB,GAAGC,QAAAA,CAAS,KAAA,CAAA;AAEjD,IAAA,MAAMC,QAAQV,KAAAA,CAAMW,SAAS,CAACC,aAAa,CAACF,KAAK;AAEjD,IAAA,MAAMG,QAAAA,GAAW,UAAA;QACfL,eAAAA,CAAgB,IAAA,CAAA;QAEhB,IAAI;YACF,MAAMM,IAAAA,GAAO,MAAMnB,YAAAA,CAAaoB,UAAU,CAACL,KAAK,CAACM,aAAa,CAC5DN,KAAAA,EACAO,uBAAAA,CAAwBpB,sBAAAA,CAAAA,CAAAA;YAE1BM,OAAAA,CAAQ;AAAEe,gBAAAA,IAAAA,EAAMC,gBAAgBC,2BAA2B;gBAAEN,IAAAA,EAAM;AAAE,oBAAA,GAAGA,IAAI;AAAEJ,oBAAAA;AAAM;AAAE,aAAA,CAAA;YACtFT,QAAAA,CAAS;gBAAEiB,IAAAA,EAAM,sBAAA;gBAAwBR,KAAAA,EAAOA;AAAM,aAAA,CAAA;AACxD,QAAA,CAAA,CAAE,OAAOW,CAAAA,EAAG;YACVhB,OAAAA,CAAQgB,CAAAA,CAAAA;YACR,MAAMA,CAAAA;QACR,CAAA,QAAU;YACRb,eAAAA,CAAgB,KAAA,CAAA;AAClB,QAAA;AACF,IAAA,CAAA;AAEA,IAAA,MAAMc,QAAAA,GAAW,UAAA;QACfd,eAAAA,CAAgB,IAAA,CAAA;QAEhB,IAAI;YACF,MAAMM,IAAAA,GAAO,MAAMnB,YAAAA,CAAa4B,IAAI,CAACb,KAAK,CAACM,aAAa,CAACN,KAAAA,EAAO;AAC9Dc,gBAAAA,kBAAAA,EAAoB1B,YAAY2B,iBAAAA,IAAqBC,8BAAAA;AACrDC,gBAAAA,MAAAA,EAAQ7B,UAAAA,EAAY6B;AACtB,aAAA,CAAA;YACAxB,OAAAA,CAAQ;AAAEe,gBAAAA,IAAAA,EAAMC,gBAAgBS,sBAAsB;AAAEd,gBAAAA;AAAK,aAAA,CAAA;YAC7Db,QAAAA,CAAS;gBACPiB,IAAAA,EAAM,kBAAA;gBACNW,QAAAA,EAAU;AACRX,oBAAAA,IAAAA,EAAMY,WAAWC,KAAK;AACtBC,oBAAAA,QAAAA,EAAUlB,KAAKmB,SAAS;oBACxBC,cAAAA,EAAgBxB;AAClB;AACF,aAAA,CAAA;AACF,QAAA,CAAA,CAAE,OAAOW,CAAAA,EAAG;YACVhB,OAAAA,CAAQgB,CAAAA,CAAAA;YACR,MAAMA,CAAAA;QACR,CAAA,QAAU;YACRb,eAAAA,CAAgB,KAAA,CAAA;AAClB,QAAA;AACF,IAAA,CAAA;IAEA,OAAO;AACLK,QAAAA,QAAAA;AACAS,QAAAA,QAAAA;AACAf,QAAAA;AACF,KAAA;AACF;;;;"}
+{"version":3,"file":"usePasswordlessAuthenticate.mjs","sources":["../../../../../../../../../../web/src/ui/b2c/screens/Secondary/usePasswordlessAuthenticate.ts"],"sourcesContent":["import { useLingui } from '@lingui/react/macro';\nimport { useState } from 'react';\nimport { DEFAULT_OTP_EXPIRATION_MINUTES } from '@stytch/core';\nimport { OTPMethods, StytchEventType, StytchSDKAPIError } from '@stytch/core/public';\nimport {\n  useConfig,\n  useErrorCallback,\n  useEventCallback,\n  useGlobalReducer,\n  useStytch,\n} from '../../GlobalContextProvider';\nimport { convertMagicLinkOptions } from '../../../../utils';\nimport { errorToast } from '../../../components/atoms/Toast';\nimport { getTranslatedError } from '../../../../utils/getTranslatedError';\n\nexport function usePasswordlessAuthenticate() {\n  const { t } = useLingui();\n\n  const stytchClient = useStytch();\n  const { emailMagicLinksOptions, otpOptions } = useConfig();\n  const [state, dispatch] = useGlobalReducer();\n  const onEvent = useEventCallback();\n  const onError = useErrorCallback();\n\n  const [isSubmitting, setIsSubmitting] = useState(false);\n\n  const email = state.formState.passwordState.email;\n\n  const sendLink = async () => {\n    setIsSubmitting(true);\n\n    try {\n      const data = await stytchClient.magicLinks.email.loginOrCreate(\n        email,\n        convertMagicLinkOptions(emailMagicLinksOptions),\n      );\n      onEvent({ type: StytchEventType.MagicLinkLoginOrCreateEvent, data: { ...data, email } });\n      dispatch({ type: 'set_magic_link_email', email: email });\n    } catch (e) {\n      onError(e as StytchSDKAPIError);\n      errorToast({ message: getTranslatedError(e as StytchSDKAPIError, t) });\n      throw e;\n    } finally {\n      setIsSubmitting(false);\n    }\n  };\n\n  const sendCode = async () => {\n    setIsSubmitting(true);\n\n    try {\n      const data = await stytchClient.otps.email.loginOrCreate(email, {\n        expiration_minutes: otpOptions?.expirationMinutes ?? DEFAULT_OTP_EXPIRATION_MINUTES,\n        locale: otpOptions?.locale,\n      });\n      onEvent({ type: StytchEventType.OTPsLoginOrCreateEvent, data });\n      dispatch({\n        type: 'update_otp_state',\n        otpState: {\n          type: OTPMethods.Email,\n          methodId: data.method_id,\n          otpDestination: email,\n        },\n      });\n    } catch (e) {\n      onError(e as StytchSDKAPIError);\n      errorToast({ message: getTranslatedError(e as StytchSDKAPIError, t) });\n      throw e;\n    } finally {\n      setIsSubmitting(false);\n    }\n  };\n\n  return {\n    sendLink,\n    sendCode,\n    isSubmitting,\n  };\n}\n"],"names":["usePasswordlessAuthenticate","useLingui","stytchClient","useStytch","emailMagicLinksOptions","otpOptions","useConfig","state","dispatch","useGlobalReducer","onEvent","useEventCallback","onError","useErrorCallback","isSubmitting","setIsSubmitting","useState","email","formState","passwordState","sendLink","data","magicLinks","loginOrCreate","convertMagicLinkOptions","type","StytchEventType","MagicLinkLoginOrCreateEvent","e","errorToast","message","getTranslatedError","sendCode","otps","expiration_minutes","expirationMinutes","DEFAULT_OTP_EXPIRATION_MINUTES","locale","OTPsLoginOrCreateEvent","otpState","OTPMethods","Email","methodId","method_id","otpDestination"],"mappings":"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"}

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

@@ -0,0 +1,63 @@
+import '../../../../../node_modules/chroma-js/index.mjs';
+import chroma from '../../../../../node_modules/chroma-js/src/chroma.mjs';
+
+/* eslint-disable lingui/no-unlocalized-strings */ function rgba(color) {
+    if (color.alpha() === 1) return `rgb(${color.rgb().join(',')})`;
+    return `rgba(${color.rgba().join(',')})`;
+}
+/**
+ * Takes a theme and dynamically generate the styles that uses color-mix,
+ * as a fallback for browsers that do not support color-mix()
+ */ function generateColorFallback(theme) {
+    // Don't use chroma.colorMix since chroma.js treats transparent as rgba(0, 0, 0, 0)
+    // which means our color is mixed with black rather than the original color
+    // with alpha 0, which is what browsers so instead
+    return {
+        // --tab-background: color-mix(in oklab, var(--accent) 80%, transparent);
+        'tab-background': rgba(chroma(theme.accent).alpha(0.8)),
+        // --primary-button-hover: color-mix(in oklab, var(--primary) 90%, transparent);
+        'primary-button-hover': rgba(chroma(theme.primary).alpha(0.9)),
+        // --secondary-button-hover: color-mix(in oklab, var(--secondary) 80%, transparent);
+        'secondary-button-hover': rgba(chroma(theme.secondary).alpha(0.8)),
+        // --destructive-button-hover: color-mix(in oklab, var(--destructive) 80%, transparent);
+        'destructive-button-hover': rgba(chroma(theme.destructive).alpha(0.8)),
+        // --divider-color: color-mix(in oklab, var(--border) 50%, transparent);
+        'divider-color': rgba(chroma(theme.border).alpha(0.5)),
+        // --focus-ring-shadow: 0 0 0 3px color-mix(in oklab, var(--ring) 50%, transparent);
+        'focus-ring-shadow': `0 0 0 3px ${rgba(chroma(theme.ring).alpha(0.5))}`
+    };
+}
+const colors = [
+    'background',
+    'foreground',
+    'primary',
+    'primary-foreground',
+    'secondary',
+    'secondary-foreground',
+    'muted',
+    'muted-foreground',
+    'accent',
+    'accent-foreground',
+    'border',
+    'input',
+    'ring',
+    'destructive',
+    'warning',
+    'success'
+];
+function addColorFallback(theme) {
+    const updatedTheme = {
+        ...theme,
+        ...generateColorFallback(theme)
+    };
+    // RGB fallbacks for all Theme colors that use oklch, if the customer's browsers
+    // don't support them
+    for (const property of colors){
+        if (!chroma.valid(theme[property])) continue;
+        updatedTheme[property] = rgba(chroma(theme[property]));
+    }
+    return updatedTheme;
+}
+
+export { addColorFallback, generateColorFallback };
+//# sourceMappingURL=generateColorFallback.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"generateColorFallback.mjs","sources":["../../../../../../../../web/src/ui/compat/generateColorFallback.ts"],"sourcesContent":["import chroma from 'chroma-js';\n\nimport type { ColorMixFallback, Theme } from '../components/themes/ThemeConfig';\n\n/* eslint-disable lingui/no-unlocalized-strings */\n\nfunction rgba(color: chroma.Color) {\n  if (color.alpha() === 1) return `rgb(${color.rgb().join(',')})`;\n  return `rgba(${color.rgba().join(',')})`;\n}\n\n/**\n * Takes a theme and dynamically generate the styles that uses color-mix,\n * as a fallback for browsers that do not support color-mix()\n */\nexport function generateColorFallback(theme: Theme): ColorMixFallback {\n  // Don't use chroma.colorMix since chroma.js treats transparent as rgba(0, 0, 0, 0)\n  // which means our color is mixed with black rather than the original color\n  // with alpha 0, which is what browsers so instead\n  return {\n    // --tab-background: color-mix(in oklab, var(--accent) 80%, transparent);\n    'tab-background': rgba(chroma(theme.accent).alpha(0.8)),\n    // --primary-button-hover: color-mix(in oklab, var(--primary) 90%, transparent);\n    'primary-button-hover': rgba(chroma(theme.primary).alpha(0.9)),\n    // --secondary-button-hover: color-mix(in oklab, var(--secondary) 80%, transparent);\n    'secondary-button-hover': rgba(chroma(theme.secondary).alpha(0.8)),\n    // --destructive-button-hover: color-mix(in oklab, var(--destructive) 80%, transparent);\n    'destructive-button-hover': rgba(chroma(theme.destructive).alpha(0.8)),\n    // --divider-color: color-mix(in oklab, var(--border) 50%, transparent);\n    'divider-color': rgba(chroma(theme.border).alpha(0.5)),\n    // --focus-ring-shadow: 0 0 0 3px color-mix(in oklab, var(--ring) 50%, transparent);\n    'focus-ring-shadow': `0 0 0 3px ${rgba(chroma(theme.ring).alpha(0.5))}`,\n  };\n}\n\nconst colors = [\n  'background',\n  'foreground',\n  'primary',\n  'primary-foreground',\n  'secondary',\n  'secondary-foreground',\n  'muted',\n  'muted-foreground',\n  'accent',\n  'accent-foreground',\n  'border',\n  'input',\n  'ring',\n  'destructive',\n  'warning',\n  'success',\n] as const satisfies (keyof Theme)[];\n\nexport function addColorFallback(theme: Theme): Theme {\n  const updatedTheme = { ...theme, ...generateColorFallback(theme) };\n\n  // RGB fallbacks for all Theme colors that use oklch, if the customer's browsers\n  // don't support them\n  for (const property of colors) {\n    if (!chroma.valid(theme[property])) continue;\n    updatedTheme[property] = rgba(chroma(theme[property]!));\n  }\n\n  return updatedTheme;\n}\n"],"names":["rgba","color","alpha","rgb","join","generateColorFallback","theme","chroma","accent","primary","secondary","destructive","border","ring","colors","addColorFallback","updatedTheme","property","valid"],"mappings":";;;AAIA,mDAEA,SAASA,IAAAA,CAAKC,KAAmB,EAAA;AAC/B,IAAA,IAAIA,KAAAA,CAAMC,KAAK,EAAA,KAAO,CAAA,EAAG,OAAO,CAAC,IAAI,EAAED,KAAAA,CAAME,GAAG,EAAA,CAAGC,IAAI,CAAC,GAAA,CAAA,CAAK,CAAC,CAAC;IAC/D,OAAO,CAAC,KAAK,EAAEH,KAAAA,CAAMD,IAAI,GAAGI,IAAI,CAAC,GAAA,CAAA,CAAK,CAAC,CAAC;AAC1C;AAEA;;;IAIO,SAASC,qBAAAA,CAAsBC,KAAY,EAAA;;;;IAIhD,OAAO;;AAEL,QAAA,gBAAA,EAAkBN,KAAKO,MAAAA,CAAOD,KAAAA,CAAME,MAAM,CAAA,CAAEN,KAAK,CAAC,GAAA,CAAA,CAAA;;AAElD,QAAA,sBAAA,EAAwBF,KAAKO,MAAAA,CAAOD,KAAAA,CAAMG,OAAO,CAAA,CAAEP,KAAK,CAAC,GAAA,CAAA,CAAA;;AAEzD,QAAA,wBAAA,EAA0BF,KAAKO,MAAAA,CAAOD,KAAAA,CAAMI,SAAS,CAAA,CAAER,KAAK,CAAC,GAAA,CAAA,CAAA;;AAE7D,QAAA,0BAAA,EAA4BF,KAAKO,MAAAA,CAAOD,KAAAA,CAAMK,WAAW,CAAA,CAAET,KAAK,CAAC,GAAA,CAAA,CAAA;;AAEjE,QAAA,eAAA,EAAiBF,KAAKO,MAAAA,CAAOD,KAAAA,CAAMM,MAAM,CAAA,CAAEV,KAAK,CAAC,GAAA,CAAA,CAAA;;QAEjD,mBAAA,EAAqB,CAAC,UAAU,EAAEF,IAAAA,CAAKO,MAAAA,CAAOD,MAAMO,IAAI,CAAA,CAAEX,KAAK,CAAC,GAAA,CAAA,CAAA,CAAA;AAClE,KAAA;AACF;AAEA,MAAMY,MAAAA,GAAS;AACb,IAAA,YAAA;AACA,IAAA,YAAA;AACA,IAAA,SAAA;AACA,IAAA,oBAAA;AACA,IAAA,WAAA;AACA,IAAA,sBAAA;AACA,IAAA,OAAA;AACA,IAAA,kBAAA;AACA,IAAA,QAAA;AACA,IAAA,mBAAA;AACA,IAAA,QAAA;AACA,IAAA,OAAA;AACA,IAAA,MAAA;AACA,IAAA,aAAA;AACA,IAAA,SAAA;AACA,IAAA;AACD,CAAA;AAEM,SAASC,iBAAiBT,KAAY,EAAA;AAC3C,IAAA,MAAMU,YAAAA,GAAe;AAAE,QAAA,GAAGV,KAAK;AAAE,QAAA,GAAGD,sBAAsBC,KAAAA;AAAO,KAAA;;;IAIjE,KAAK,MAAMW,YAAYH,MAAAA,CAAQ;AAC7B,QAAA,IAAI,CAACP,MAAAA,CAAOW,KAAK,CAACZ,KAAK,CAACW,SAAS,CAAA,EAAG;AACpCD,QAAAA,YAAY,CAACC,QAAAA,CAAS,GAAGjB,KAAKO,MAAAA,CAAOD,KAAK,CAACW,QAAAA,CAAS,CAAA,CAAA;AACtD,IAAA;IAEA,OAAOD,YAAAA;AACT;;;;"}

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

@@ -0,0 +1,119 @@
+/* eslint-disable lingui/no-unlocalized-strings */ /**
+ * Maps a legacy StyleConfig to the new Theme format.
+ *
+ * This is a best-effort mapping - some StyleConfig properties don't have
+ * direct equivalents in Theme, and some Theme properties don't have
+ * StyleConfig equivalents.
+ *
+ * StyleConfig properties that don't have good mappings to Theme:
+ *  - inputs.placeholderColor - No equivalent (could potentially map to muted-foreground)
+ *  - inputs.textColor - Mapped to foreground as approximation, but is input-specific
+ *  - buttons.primary.borderColor - No specific mapping (could use border but loses specificity)
+ *  - buttons.primary.borderRadius - Mapped to button-radius but loses primary-specific control
+ *  - buttons.secondary.borderColor - No specific mapping (could use border but loses specificity)
+ *  - buttons.secondary.borderRadius - Mapped to button-radius but loses secondary-specific control
+ *  - buttons.disabled.* - No equivalents (disabled state styling not in Theme)
+ *
+ * Theme properties that don't have StyleConfig equivalents:
+ *  - 'transition-duration' - defaulted to 0 instead of 0.15s in our new default theme
+ *  - 'font-family-mono' - defaults to theme default which is system UI monospace
+ *  - 'text-base' - defaults to 1rem which is close to the old font sizes
+ *  - spacing - defaults to new theme default which is close but not equivalent to old spacing
+ *  - shadow, 'shadow-button', 'shadow-input' - no default in new theme
+ *  - foreground - Approximated from inputs.textColor but not exact
+ *  - muted, 'muted-foreground'
+ *  - 'accent-foreground'
+ *  - ring - previously defaults to OS default focus outline color
+ */ function styleToTheme(styleConfig, { silent } = {}) {
+    const theme = {};
+    const options = {};
+    const { colors, container, inputs, hideHeaderText, buttons, logo, fontFamily, ...outerEmpty } = styleConfig;
+    // presentation.theme mapping
+    // ------------------------------------------------
+    theme['font-family'] = fontFamily;
+    if (colors) {
+        const { primary, secondary, success, warning, accent, error, ...expectEmpty } = colors;
+        Object.assign(theme, {
+            primary,
+            secondary,
+            success,
+            warning,
+            accent,
+            destructive: error
+        });
+    }
+    if (container) {
+        const { backgroundColor, borderColor, width, borderRadius, ...expectEmpty } = container;
+        Object.assign(theme, {
+            background: backgroundColor,
+            border: borderColor,
+            'container-width': width,
+            // 1/4 because the new base is quite small and most components use a 2x or 4x multiplier
+            'rounded-base': updateLength(borderRadius, 0.25)
+        });
+    }
+    if (buttons) {
+        const { primary, secondary, disabled, ...expectEmpty } = buttons;
+        // Set background and text colors
+        Object.assign(theme, {
+            primary: primary?.backgroundColor,
+            'primary-foreground': primary?.textColor,
+            secondary: secondary?.backgroundColor,
+            'secondary-foreground': secondary?.textColor
+        });
+        // Set border radius
+        if (primary?.borderRadius || secondary?.borderRadius) {
+            // Conflicts between primary and secondary border radius is handled above
+            const baseRadius = updateLength(primary?.borderRadius, 0.5) ?? updateLength(secondary?.borderRadius, 0.5);
+            if (theme['rounded-base']) {
+                if (theme['rounded-base'] !== baseRadius) {
+                    theme['button-radius'] = primary?.borderRadius;
+                }
+            } else {
+                theme['rounded-base'] = baseRadius;
+            }
+        }
+    }
+    if (inputs) {
+        const { backgroundColor, textColor, placeholderColor, borderColor, borderRadius, ...expectEmpty } = inputs;
+        Object.assign(theme, {
+            foreground: textColor,
+            input: borderColor,
+            'muted-foreground': placeholderColor
+        });
+        // Set border radius
+        if (theme['rounded-base']) {
+            if (theme['rounded-base'] !== borderRadius) {
+                theme['input-radius'] = borderRadius;
+            }
+        } else {
+            theme['rounded-base'] = borderRadius;
+        }
+    }
+    // presentation.options mapping
+    // ------------------------------------------------
+    options.hideHeaderText = hideHeaderText;
+    if (logo?.logoImageUrl) {
+        options.logo = {
+            url: logo.logoImageUrl,
+            alt: ''
+        };
+    }
+    return {
+        theme: removeEmptyValues(theme),
+        options: removeEmptyValues(options)
+    };
+}
+function removeEmptyValues(obj) {
+    return Object.fromEntries(Object.entries(obj).filter(([, value])=>value != null && value !== ''));
+}
+function updateLength(length, factor) {
+    if (!length) return length;
+    // Loose check that this is a numeric and not keyword value
+    const value = parseFloat(length);
+    if (Number.isNaN(value)) return length;
+    return `calc(${length} * ${factor})`;
+}
+
+export { styleToTheme };
+//# sourceMappingURL=styleToTheme.mjs.map

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

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

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

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

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

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