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

package/dist/cjs/index.cjs

@@ -4,7 +4,7 @@ var index_headless = require('./index.headless.cjs');
 var React = require('react');
 var passwordManagerDisableAutofillProps = require('./passwordManagerDisableAutofillProps-DV31RTL_.js');
 var StytchSSRProxy = require('./StytchSSRProxy-Bz6LNYdq.js');
-var shadcn = require('./shadcn-Z4AvHriT.js');
+var shadcn = require('./shadcn-aVU6Lm9q.js');
 var idpHelpers = require('./idpHelpers-Bj_7pbfW.js');
 var ReactDOM = require('react-dom');
 var jsxRuntime = require('react/jsx-runtime');
@@ -1907,11 +1907,15 @@ const walletIcons = {
     [StytchSSRProxy.Wallets.Coinbase]: 'coinbase',
     [StytchSSRProxy.Wallets.Metamask]: 'metamask'
 };
-const useCryptoIcon = ()=>{
-    const iconRegistry = shadcn.usePresentation().iconRegistry;
-    return (wallet)=>{
-        const iconName = walletIcons[wallet];
-        return iconName ? iconRegistry[iconName] : GenericWalletIcon;
+const useCryptoButtonProps = ()=>{
+    const presentation = shadcn.usePresentation();
+    const iconRegistry = presentation.iconRegistry;
+    return {
+        getIcon: (wallet)=>{
+            const iconName = walletIcons[wallet];
+            return iconName ? iconRegistry[iconName] : GenericWalletIcon;
+        },
+        getId: (wallet)=>shadcn.getButtonId(`wallet-${wallet}`, presentation.options)
     };
 };
 const WalletToText = {
@@ -2089,7 +2093,7 @@ const CryptoWalletButtons = ({ type })=>{
     const { i18n: $__i18n, _: $__ } = passwordManagerDisableAutofillProps.useLingui();
     const [state, dispatch] = useGlobalReducer();
     const config = useConfig();
-    const getCryptoIcon = useCryptoIcon();
+    const { getIcon, getId } = useCryptoButtonProps();
     const oAuthOptions = config.oauthOptions?.providers.length ?? 0;
     // Crypto Buttons on screen = Maximum Buttons - OAuth Buttons - 1 (Other crypto or set up new wallet)
     const cryptoButtonsOnMainScreen = MAX_BUTTONS - oAuthOptions - 1;
@@ -2113,12 +2117,13 @@ const CryptoWalletButtons = ({ type })=>{
     const walletsToRender = type === 'main' ? mainWallets : otherWallet;
     return /*#__PURE__*/ React__namespace.createElement(shadcn.ButtonColumn, null, walletsToRender.map((wallet)=>{
         const walletEnum = StytchSSRProxy.Wallets[wallet];
-        const Icon = getCryptoIcon(walletEnum);
+        const Icon = getIcon(walletEnum);
         return /*#__PURE__*/ React__namespace.createElement(shadcn.Button, {
             key: wallet,
             variant: "outline",
             icon: /*#__PURE__*/ React__namespace.createElement(Icon, null),
-            onClick: ()=>onWalletStart(walletEnum)
+            onClick: ()=>onWalletStart(walletEnum),
+            id: getId(walletEnum)
         }, type === 'main' ? $__i18n._(walletMessages[walletEnum]) : $__i18n._(WalletToText[walletEnum]));
     }), renderOtherScreenButton && type === 'main' ? /*#__PURE__*/ React__namespace.createElement(shadcn.Button, {
         variant: "outline",
@@ -2126,7 +2131,8 @@ const CryptoWalletButtons = ({ type })=>{
         onClick: ()=>dispatch({
                 type: 'transition',
                 screen: AppScreens.CryptoOtherScreen
-            })
+            }),
+        id: getId(StytchSSRProxy.Wallets.GenericEthereumWallet)
     }, $__i18n._({
         id: "crypto.wallet.continueWithOtherWallet",
         message: "Continue with other Crypto Wallet"
@@ -3465,7 +3471,9 @@ const providerInfo = {
 const OAuthButton = ({ providerType, loginRedirectUrl, signupRedirectUrl, customScopes, providerParams, onSuccess })=>{
     const { i18n: $__i18n, _: $__ } = passwordManagerDisableAutofillProps.useLingui();
     const stytchClient = useStytch();
-    const iconRegistry = shadcn.usePresentation().iconRegistry;
+    const presentation = shadcn.usePresentation();
+    const iconRegistry = presentation.iconRegistry;
+    const id = shadcn.getButtonId(`oauth-${providerType}`, presentation.options);
     const provider = providerInfo[providerType];
     let label = providerType;
     let icon = null;
@@ -3488,7 +3496,8 @@ const OAuthButton = ({ providerType, loginRedirectUrl, signupRedirectUrl, custom
     return /*#__PURE__*/ React__namespace.default.createElement(shadcn.Button, {
         onClick: onButtonClick,
         variant: "outline",
-        icon: icon
+        icon: icon,
+        id: id
     }, label);
 };
 
@@ -4750,7 +4759,7 @@ var css$1 = ".EditableRow_module_row__4e3b092b{align-items:center;display:flex;g
 shadcn.collectCss(css$1);
 var modules_20f268b7 = {"row":"EditableRow_module_row__4e3b092b","input":"EditableRow_module_input__4e3b092b","actions":"EditableRow_module_actions__4e3b092b"};
 
-const commonButtonProps$1 = {
+const commonButtonProps = {
     block: false,
     variant: 'ghost'
 };
@@ -4804,7 +4813,7 @@ const EditableRow = ({ id, name, className, state, updateState, handleEdit })=>{
             }, /*#__PURE__*/ React__namespace.default.createElement(shadcn.Button, {
                 key: "submit",
                 type: "submit",
-                ...commonButtonProps$1
+                ...commonButtonProps
             }, $__i18n._({
                 id: "button.save",
                 message: "Save"
@@ -4812,7 +4821,7 @@ const EditableRow = ({ id, name, className, state, updateState, handleEdit })=>{
                 onClick: ()=>updateState({
                         type: 'viewing'
                     }),
-                ...commonButtonProps$1
+                ...commonButtonProps
             }, $__i18n._({
                 id: "button.cancel",
                 message: "Cancel"
@@ -4830,7 +4839,7 @@ const EditableRow = ({ id, name, className, state, updateState, handleEdit })=>{
                         newName: name
                     }),
                 disabled: othersEditing,
-                ...commonButtonProps$1
+                ...commonButtonProps
             }, $__i18n._({
                 id: "button.edit",
                 message: "Edit"
@@ -4840,7 +4849,7 @@ const EditableRow = ({ id, name, className, state, updateState, handleEdit })=>{
                         id
                     }),
                 disabled: othersEditing,
-                ...commonButtonProps$1
+                ...commonButtonProps
             }, $__i18n._({
                 id: "button.delete",
                 message: "Delete"
@@ -5184,19 +5193,16 @@ const OtherCryptoWallets = ()=>{
     }))));
 };
 
-const commonButtonProps = {
-    variant: 'outline',
-    target: '_blank',
-    rel: 'noreferrer'
-};
 const SetupNewWallet = ()=>{
     const { i18n: $__i18n, _: $__ } = passwordManagerDisableAutofillProps.useLingui();
     const [, dispatch] = useGlobalReducer();
-    const getCryptoIcon = useCryptoIcon();
-    const MetamaskIcon = getCryptoIcon(StytchSSRProxy.Wallets.Metamask);
-    const PhantomIcon = getCryptoIcon(StytchSSRProxy.Wallets.Phantom);
-    const CoinbaseIcon = getCryptoIcon(StytchSSRProxy.Wallets.Coinbase);
-    const BinanceIcon = getCryptoIcon(StytchSSRProxy.Wallets.Binance);
+    const { getIcon, getId } = useCryptoButtonProps();
+    const walletsToRender = [
+        StytchSSRProxy.Wallets.Metamask,
+        StytchSSRProxy.Wallets.Phantom,
+        StytchSSRProxy.Wallets.Coinbase,
+        StytchSSRProxy.Wallets.Binance
+    ];
     return /*#__PURE__*/ React__namespace.default.createElement(shadcn.Column, {
         gap: 6
     }, /*#__PURE__*/ React__namespace.default.createElement(shadcn.TextColumn, {
@@ -5212,35 +5218,18 @@ const SetupNewWallet = ()=>{
             id: "crypto.setupNewWallet.instruction",
             message: "We’ve included a few examples of wallet extensions you can find below. Once you’ve set up your wallet, click “Go back” to use it and sign in."
         })
-    }), /*#__PURE__*/ React__namespace.default.createElement(shadcn.ButtonColumn, null, /*#__PURE__*/ React__namespace.default.createElement(shadcn.ButtonAnchor, {
-        ...commonButtonProps,
-        icon: /*#__PURE__*/ React__namespace.default.createElement(MetamaskIcon, null),
-        href: "https://metamask.io/"
-    }, $__i18n._({
-        id: "crypto.wallet.metamask",
-        message: "Metamask"
-    })), /*#__PURE__*/ React__namespace.default.createElement(shadcn.ButtonAnchor, {
-        ...commonButtonProps,
-        icon: /*#__PURE__*/ React__namespace.default.createElement(PhantomIcon, null),
-        href: "https://phantom.com/"
-    }, $__i18n._({
-        id: "crypto.wallet.phantom",
-        message: "Phantom"
-    })), /*#__PURE__*/ React__namespace.default.createElement(shadcn.ButtonAnchor, {
-        ...commonButtonProps,
-        icon: /*#__PURE__*/ React__namespace.default.createElement(CoinbaseIcon, null),
-        href: "https://www.coinbase.com/wallet"
-    }, $__i18n._({
-        id: "crypto.wallet.coinbase",
-        message: "Coinbase"
-    })), /*#__PURE__*/ React__namespace.default.createElement(shadcn.ButtonAnchor, {
-        ...commonButtonProps,
-        icon: /*#__PURE__*/ React__namespace.default.createElement(BinanceIcon, null),
-        href: "https://web3.binance.com/en/about"
-    }, $__i18n._({
-        id: "crypto.wallet.binance",
-        message: "Binance"
-    })), /*#__PURE__*/ React__namespace.default.createElement(shadcn.Button, {
+    }), /*#__PURE__*/ React__namespace.default.createElement(shadcn.ButtonColumn, null, walletsToRender.map((wallet)=>{
+        const Icon = getIcon(wallet);
+        return /*#__PURE__*/ React__namespace.default.createElement(shadcn.ButtonAnchor, {
+            key: wallet,
+            variant: "outline",
+            target: "_blank",
+            rel: "noreferrer",
+            icon: /*#__PURE__*/ React__namespace.default.createElement(Icon, null),
+            href: "https://metamask.io/",
+            id: getId(wallet)
+        }, $__i18n._(WalletToText[wallet]));
+    }), /*#__PURE__*/ React__namespace.default.createElement(shadcn.Button, {
         variant: "primary",
         onClick: ()=>dispatch({
                 type: 'transition',