@crossmint/client-sdk-react-ui 1.10.2 → 1.10.4

package/dist/{chunk-ZOHRCGGI.cjs → chunk-4DICVJSP.cjs}

@@ -1,13 +1,13 @@
 "use strict";Object.defineProperty(exports, "__esModule", {value: true});
 
-var _chunkRTC2AZ6Acjs = require('./chunk-RTC2AZ6A.cjs');
+var _chunkITCHCRGXcjs = require('./chunk-ITCHCRGX.cjs');
 
 // src/components/CrossmintNFTCollectionView.tsx
 var _clientsdkbase = require('@crossmint/client-sdk-base');
 var _jsxruntime = require('react/jsx-runtime');
 function CrossmintNFTCollectionView(props) {
   _clientsdkbase.assertValidNFTCollectionViewProps.call(void 0, props);
-  const src = _clientsdkbase.getNFTCollectionViewSrc.call(void 0, props, _chunkRTC2AZ6Acjs.LIB_VERSION);
+  const src = _clientsdkbase.getNFTCollectionViewSrc.call(void 0, props, _chunkITCHCRGXcjs.LIB_VERSION);
   return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
     "iframe",
     {
@@ -28,4 +28,4 @@ function CrossmintNFTCollectionView(props) {
 
 
 exports.CrossmintNFTCollectionView = CrossmintNFTCollectionView;
-//# sourceMappingURL=chunk-ZOHRCGGI.cjs.map
+//# sourceMappingURL=chunk-4DICVJSP.cjs.map

package/dist/{chunk-NX473NO2.cjs → chunk-6NPGETRZ.cjs}

@@ -1,6 +1,6 @@
 "use strict";Object.defineProperty(exports, "__esModule", {value: true});
 
-var _chunkMDV3M7FDcjs = require('./chunk-MDV3M7FD.cjs');
+var _chunkTK2JDIUNcjs = require('./chunk-TK2JDIUN.cjs');
 
 
 var _chunk4DAZAO6Ycjs = require('./chunk-4DAZAO6Y.cjs');
@@ -8,10 +8,10 @@ var _chunk4DAZAO6Ycjs = require('./chunk-4DAZAO6Y.cjs');
 // src/components/embed/v3/CrossmintEmbeddedCheckoutV3.tsx
 var _jsxruntime = require('react/jsx-runtime');
 function CrossmintEmbeddedCheckout_Alpha(props) {
-  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkMDV3M7FDcjs.EmbeddedCheckoutV3IFrame, _chunk4DAZAO6Ycjs.__spreadValues.call(void 0, {}, props));
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkTK2JDIUNcjs.EmbeddedCheckoutV3IFrame, _chunk4DAZAO6Ycjs.__spreadValues.call(void 0, {}, props));
 }
 
 
 
 exports.CrossmintEmbeddedCheckout_Alpha = CrossmintEmbeddedCheckout_Alpha;
-//# sourceMappingURL=chunk-NX473NO2.cjs.map
+//# sourceMappingURL=chunk-6NPGETRZ.cjs.map

package/dist/{chunk-MWRMO6JC.js → chunk-6PCSAKDU.js}

@@ -1,5 +1,5 @@
 // package.json
-var version = "1.10.2";
+var version = "1.10.4";
 
 // src/consts/version.ts
 var LIB_VERSION = version;
@@ -7,4 +7,4 @@ var LIB_VERSION = version;
 export {
   LIB_VERSION
 };
-//# sourceMappingURL=chunk-MWRMO6JC.js.map
+//# sourceMappingURL=chunk-6PCSAKDU.js.map

package/dist/{chunk-MWRMO6JC.js.map → chunk-6PCSAKDU.js.map}

@@ -1 +1 @@
-{"version":3,"sources":["../package.json","../src/consts/version.ts"],"sourcesContent":["{\n    \"name\": \"@crossmint/client-sdk-react-ui\",\n    \"version\": \"1.10.2\",\n    \"repository\": \"https://github.com/Crossmint/crossmint-sdk\",\n    \"license\": \"Apache-2.0\",\n    \"author\": \"Paella Labs Inc\",\n    \"sideEffects\": false,\n    \"type\": \"module\",\n    \"exports\": {\n        \"import\": \"./dist/index.js\",\n        \"require\": \"./dist/index.cjs\"\n    },\n    \"main\": \"./dist/index.cjs\",\n    \"module\": \"./dist/index.js\",\n    \"types\": \"./dist/index.d.ts\",\n    \"files\": [\"dist\", \"src\", \"LICENSE\"],\n    \"scripts\": {\n        \"build\": \"cross-env NODE_OPTIONS='--max-old-space-size=8192' tsup\",\n        \"dev\": \"cross-env NODE_OPTIONS='--max-old-space-size=8192' tsup --watch\",\n        \"test:vitest\": \"vitest run\"\n    },\n    \"dependencies\": {\n        \"@crossmint/client-sdk-auth\": \"workspace:*\",\n        \"@crossmint/client-sdk-base\": \"workspace:*\",\n        \"@crossmint/client-sdk-smart-wallet\": \"workspace:*\",\n        \"@crossmint/client-sdk-window\": \"workspace:*\",\n        \"@crossmint/common-sdk-auth\": \"workspace:*\",\n        \"@crossmint/common-sdk-base\": \"workspace:*\",\n        \"@dynamic-labs/ethereum\": \"2.6.3\",\n        \"@dynamic-labs/sdk-react-core\": \"2.6.3\",\n        \"@dynamic-labs/solana\": \"2.6.3\",\n        \"@ethersproject/transactions\": \"5.7.0\",\n        \"@farcaster/auth-kit\": \"0.6.0\",\n        \"@headlessui/react\": \"2.1.5\",\n        \"@radix-ui/react-dialog\": \"1.1.2\",\n        \"@radix-ui/react-visually-hidden\": \"1.1.0\",\n        \"@solana/web3.js\": \"1.95.1\",\n        \"@tanstack/react-query\": \"5.51.18\",\n        \"@twind/core\": \"1.1.3\",\n        \"@twind/preset-tailwind\": \"1.1.4\",\n        \"@wagmi/connectors\": \"5.3.3\",\n        \"bs58\": \"5.0.0\",\n        \"clsx\": \"2.1.1\",\n        \"color\": \"4.2.3\",\n        \"input-otp\": \"1.2.4\",\n        \"lodash.isequal\": \"4.5.0\",\n        \"react-jss\": \"10.10.0\",\n        \"tailwind-merge\": \"2.4.0\",\n        \"tailwindcss\": \"3.4.10\",\n        \"viem\": \"2.17.5\",\n        \"wagmi\": \"2.12.25\",\n        \"zod\": \"3.22.4\"\n    },\n    \"devDependencies\": {\n        \"@testing-library/react\": \"^16.0.1\",\n        \"@types/color\": \"4.2.0\",\n        \"@types/lodash.isequal\": \"4.5.6\",\n        \"@types/react\": \"^18.3.0\",\n        \"@types/react-dom\": \"^18.3.0\",\n        \"react\": \"^18.3.0\",\n        \"react-dom\": \"^18.3.0\"\n    },\n    \"peerDependencies\": {\n        \"react\": \">=17.0.2\",\n        \"react-dom\": \">=17.0.2\"\n    }\n}\n","import { version } from \"../../package.json\";\n\nexport const LIB_VERSION = version;\n"],"mappings":";AAEI,cAAW;;;ACAR,IAAM,cAAc;","names":[]}
+{"version":3,"sources":["../package.json","../src/consts/version.ts"],"sourcesContent":["{\n    \"name\": \"@crossmint/client-sdk-react-ui\",\n    \"version\": \"1.10.4\",\n    \"repository\": \"https://github.com/Crossmint/crossmint-sdk\",\n    \"license\": \"Apache-2.0\",\n    \"author\": \"Paella Labs Inc\",\n    \"sideEffects\": false,\n    \"type\": \"module\",\n    \"exports\": {\n        \"import\": \"./dist/index.js\",\n        \"require\": \"./dist/index.cjs\"\n    },\n    \"main\": \"./dist/index.cjs\",\n    \"module\": \"./dist/index.js\",\n    \"types\": \"./dist/index.d.ts\",\n    \"files\": [\"dist\", \"src\", \"LICENSE\"],\n    \"scripts\": {\n        \"build\": \"cross-env NODE_OPTIONS='--max-old-space-size=8192' tsup\",\n        \"dev\": \"cross-env NODE_OPTIONS='--max-old-space-size=8192' tsup --watch\",\n        \"test:vitest\": \"vitest run\"\n    },\n    \"dependencies\": {\n        \"@crossmint/client-sdk-auth\": \"workspace:*\",\n        \"@crossmint/client-sdk-base\": \"workspace:*\",\n        \"@crossmint/client-sdk-smart-wallet\": \"workspace:*\",\n        \"@crossmint/client-sdk-window\": \"workspace:*\",\n        \"@crossmint/common-sdk-auth\": \"workspace:*\",\n        \"@crossmint/common-sdk-base\": \"workspace:*\",\n        \"@dynamic-labs/ethereum\": \"2.6.3\",\n        \"@dynamic-labs/sdk-react-core\": \"2.6.3\",\n        \"@dynamic-labs/solana\": \"2.6.3\",\n        \"@ethersproject/transactions\": \"5.7.0\",\n        \"@farcaster/auth-kit\": \"0.6.0\",\n        \"@headlessui/react\": \"2.1.5\",\n        \"@radix-ui/react-dialog\": \"1.1.2\",\n        \"@radix-ui/react-visually-hidden\": \"1.1.0\",\n        \"@solana/web3.js\": \"1.95.1\",\n        \"@tanstack/react-query\": \"5.51.18\",\n        \"@twind/core\": \"1.1.3\",\n        \"@twind/preset-tailwind\": \"1.1.4\",\n        \"@wagmi/connectors\": \"5.3.3\",\n        \"bs58\": \"5.0.0\",\n        \"clsx\": \"2.1.1\",\n        \"color\": \"4.2.3\",\n        \"input-otp\": \"1.2.4\",\n        \"lodash.isequal\": \"4.5.0\",\n        \"react-jss\": \"10.10.0\",\n        \"tailwind-merge\": \"2.4.0\",\n        \"tailwindcss\": \"3.4.10\",\n        \"viem\": \"2.17.5\",\n        \"wagmi\": \"2.12.25\",\n        \"zod\": \"3.22.4\"\n    },\n    \"devDependencies\": {\n        \"@testing-library/react\": \"^16.0.1\",\n        \"@types/color\": \"4.2.0\",\n        \"@types/lodash.isequal\": \"4.5.6\",\n        \"@types/react\": \"^18.3.0\",\n        \"@types/react-dom\": \"^18.3.0\",\n        \"react\": \"^18.3.0\",\n        \"react-dom\": \"^18.3.0\"\n    },\n    \"peerDependencies\": {\n        \"react\": \">=17.0.2\",\n        \"react-dom\": \">=17.0.2\"\n    }\n}\n","import { version } from \"../../package.json\";\n\nexport const LIB_VERSION = version;\n"],"mappings":";AAEI,cAAW;;;ACAR,IAAM,cAAc;","names":[]}

package/dist/{chunk-67AB7TWG.cjs → chunk-AQELE4DZ.cjs}

@@ -1,6 +1,6 @@
 "use strict";Object.defineProperty(exports, "__esModule", {value: true});
 
-var _chunkCOLJFFZFcjs = require('./chunk-COLJFFZF.cjs');
+var _chunkRYB3MSFQcjs = require('./chunk-RYB3MSFQ.cjs');
 
 
 var _chunkKEKBOJCFcjs = require('./chunk-KEKBOJCF.cjs');
@@ -13,7 +13,7 @@ function CrossmintCheckoutProvider({ children }) {
   const [order, setOrder] = _react.useState.call(void 0, void 0);
   const [orderClientSecret, setOrderClientSecret] = _react.useState.call(void 0, void 0);
   const { crossmint } = _chunkKEKBOJCFcjs.useCrossmint.call(void 0, );
-  const apiClient = _chunkCOLJFFZFcjs.createCrossmintApiClient.call(void 0, crossmint, {
+  const apiClient = _chunkRYB3MSFQcjs.createCrossmintApiClient.call(void 0, crossmint, {
     usageOrigin: "client"
   });
   _react.useEffect.call(void 0, () => {
@@ -47,4 +47,4 @@ function useCrossmintCheckout() {
 
 
 exports.CrossmintCheckoutProvider = CrossmintCheckoutProvider; exports.useCrossmintCheckout = useCrossmintCheckout;
-//# sourceMappingURL=chunk-67AB7TWG.cjs.map
+//# sourceMappingURL=chunk-AQELE4DZ.cjs.map

package/dist/{chunk-SMCUFLHP.cjs → chunk-CY2PXN5Y.cjs}

@@ -7,7 +7,7 @@ var _chunkQ3M4UH5Ucjs = require('./chunk-Q3M4UH5U.cjs');
 var _chunkKLWDDALZcjs = require('./chunk-KLWDDALZ.cjs');
 
 
-var _chunkRTC2AZ6Acjs = require('./chunk-RTC2AZ6A.cjs');
+var _chunkITCHCRGXcjs = require('./chunk-ITCHCRGX.cjs');
 
 
 
@@ -91,7 +91,7 @@ function CrossmintPayButton(buttonProps) {
     showOverlay,
     dismissOverlayOnClick,
     setConnecting,
-    libVersion: _chunkRTC2AZ6Acjs.LIB_VERSION,
+    libVersion: _chunkITCHCRGXcjs.LIB_VERSION,
     environment,
     clientName: _clientsdkbase.clientNames.reactUi,
     locale,
@@ -150,4 +150,4 @@ function CrossmintPayButton(buttonProps) {
 
 
 exports.CrossmintPayButton = CrossmintPayButton;
-//# sourceMappingURL=chunk-SMCUFLHP.cjs.map
+//# sourceMappingURL=chunk-CY2PXN5Y.cjs.map

package/dist/{chunk-FOCUIKYH.cjs → chunk-EBMORHG3.cjs}

@@ -1,9 +1,9 @@
 "use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-var _chunkDJ32OEWGcjs = require('./chunk-DJ32OEWG.cjs');
+var _chunkHSLAH2PNcjs = require('./chunk-HSLAH2PN.cjs');
 
 
-var _chunkZCYU7QA6cjs = require('./chunk-ZCYU7QA6.cjs');
+var _chunkQ3UM7UCMcjs = require('./chunk-Q3UM7UCM.cjs');
 
 
 var _chunk5S4VO6RBcjs = require('./chunk-5S4VO6RB.cjs');
@@ -35,10 +35,10 @@ var _chunkB7LYPQ4Kcjs = require('./chunk-B7LYPQ4K.cjs');
 var _chunkBE2ZLB3Lcjs = require('./chunk-BE2ZLB3L.cjs');
 
 
-var _chunkGY6G3ZC2cjs = require('./chunk-GY6G3ZC2.cjs');
+var _chunk5RX5WFEWcjs = require('./chunk-5RX5WFEW.cjs');
 
 
-var _chunk5RX5WFEWcjs = require('./chunk-5RX5WFEW.cjs');
+var _chunkHCW4RO2Ocjs = require('./chunk-HCW4RO2O.cjs');
 
 
 var _chunkKNOUJZN5cjs = require('./chunk-KNOUJZN5.cjs');
@@ -134,6 +134,7 @@ var AuthFormProvider = ({
 }) => {
   const { crossmintAuth } = useCrossmintAuth();
   const [step, setStep] = _react.useState.call(void 0, "initial");
+  const [error, setError] = _react.useState.call(void 0, null);
   const [oauthUrlMap, setOauthUrlMap] = _react.useState.call(void 0, initialOAuthUrlMap);
   const [isLoadingOauthUrlMap, setIsLoadingOauthUrlMap] = _react.useState.call(void 0, true);
   const { loginMethods, baseUrl, setDialogOpen, appearance, embeddedWallets } = initialState;
@@ -152,8 +153,9 @@ var AuthFormProvider = ({
       }));
       const oauthUrlMap2 = Object.assign({}, ...yield Promise.all(oauthPromiseList));
       setOauthUrlMap(oauthUrlMap2);
-    } catch (error) {
-      console.error("Error fetching OAuth URLs:", error);
+    } catch (error2) {
+      console.error("Error fetching OAuth URLs:", error2);
+      setError("Unable to load oauth providers. Please try again later.");
     } finally {
       setIsLoadingOauthUrlMap(false);
     }
@@ -169,12 +171,14 @@ var AuthFormProvider = ({
   };
   const value = {
     step,
+    error,
     baseUrl,
     appearance,
     loginMethods,
     oauthUrlMap,
     isLoadingOauthUrlMap,
     setDialogOpen: handleToggleDialog,
+    setError,
     setStep
   };
   return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, AuthFormContext.Provider, { value, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunk5S4VO6RBcjs.WagmiAuthProvider, { children }) });
@@ -186,6 +190,40 @@ var AuthFormProvider = ({
 // src/components/auth/methods/email/EmailOTPInput.tsx
 
 
+// src/components/auth/AuthFormBackButton.tsx
+
+var AuthFormBackButton = (_a) => {
+  var _b = _a, {
+    className,
+    iconColor,
+    ringColor,
+    onClick
+  } = _b, props = _chunk4DAZAO6Ycjs.__objRest.call(void 0, _b, [
+    "className",
+    "iconColor",
+    "ringColor",
+    "onClick"
+  ]);
+  const { setError } = useAuthForm();
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+    "button",
+    _chunk4DAZAO6Ycjs.__spreadProps.call(void 0, _chunk4DAZAO6Ycjs.__spreadValues.call(void 0, {
+      className: _chunk5RX5WFEWcjs.classNames.call(void 0, 
+        "absolute left-4 top-4 min-[480px]:!left-6 min-[480px]:!top-6 rounded-full opacity-70 ring-offset-background text-cm-text-primary transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-cm-accent focus:ring-offset-2 disabled:pointer-events-none",
+        className
+      ),
+      onClick: (event) => {
+        setError(null);
+        onClick == null ? void 0 : onClick(event);
+      }
+    }, props), {
+      children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkHCW4RO2Ocjs.LeftArrowIcon, { className: "w-6 h-6", style: { color: iconColor } })
+    })
+  );
+};
+
+// src/components/auth/methods/email/EmailOTPInput.tsx
+
 var EMAIL_VERIFICATION_TOKEN_LENGTH = 6;
 function EmailOTPInput({
   otpEmailData,
@@ -193,7 +231,7 @@ function EmailOTPInput({
 }) {
   var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m, _n, _o, _p, _q, _r, _s, _t, _u;
   const { crossmintAuth } = useCrossmintAuth();
-  const { appearance, setDialogOpen, setStep } = useAuthForm();
+  const { appearance, setDialogOpen, setStep, setError } = useAuthForm();
   const [token, setToken] = _react.useState.call(void 0, "");
   const [hasError, setHasError] = _react.useState.call(void 0, false);
   const [loading, setLoading] = _react.useState.call(void 0, false);
@@ -209,8 +247,9 @@ function EmailOTPInput({
       yield crossmintAuth == null ? void 0 : crossmintAuth.handleRefreshAuthMaterial(oneTimeSecret);
       setDialogOpen(false);
       setStep("initial");
-    } catch (e) {
-      console.error("Error signing in via email ", e);
+    } catch (error) {
+      console.error("Error confirming email OTP", error);
+      setError("Invalid code. Please try again.");
       setHasError(true);
     } finally {
       setLoading(false);
@@ -222,7 +261,7 @@ function EmailOTPInput({
   };
   return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { children: [
     /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-      _chunkGY6G3ZC2cjs.AuthFormBackButton,
+      AuthFormBackButton,
       {
         onClick: handleOnBack,
         iconColor: (_a = appearance == null ? void 0 : appearance.colors) == null ? void 0 : _a.textPrimary,
@@ -262,6 +301,7 @@ function EmailOTPInput({
           onChange: (val) => {
             setToken(val);
             setHasError(false);
+            setError(null);
           },
           onComplete: handleOnSubmit,
           disabled: loading,
@@ -310,7 +350,7 @@ var _color = require('color'); var _color2 = _interopRequireDefault(_color);
 function EmailSignIn({ setOtpEmailData }) {
   var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j;
   const { crossmintAuth } = useCrossmintAuth();
-  const { appearance, setStep } = useAuthForm();
+  const { appearance, setStep, setError } = useAuthForm();
   const [emailInput, setEmailInput] = _react.useState.call(void 0, "");
   const [emailError, setEmailError] = _react.useState.call(void 0, "");
   const [isLoading, setIsLoading] = _react.useState.call(void 0, false);
@@ -329,7 +369,7 @@ function EmailSignIn({ setOtpEmailData }) {
         setStep("otp");
       } catch (_e2) {
         setIsLoading(false);
-        setEmailError("Failed to send email. Please try again or contact support.");
+        setError("Failed to send email. Please try again or contact support.");
       }
     });
   }
@@ -367,6 +407,7 @@ function EmailSignIn({ setOtpEmailData }) {
               onChange: (e) => {
                 setEmailInput(e.target.value);
                 setEmailError("");
+                setError(null);
               },
               readOnly: isLoading,
               "aria-describedby": "emailError"
@@ -443,14 +484,13 @@ var _clientsdkwindow = require('@crossmint/client-sdk-window');
 var _zod = require('zod');
 var useOAuthWindowListener = (provider) => {
   const { crossmintAuth } = useCrossmintAuth();
-  const { oauthUrlMap } = useAuthForm();
+  const { oauthUrlMap, setError } = useAuthForm();
   const [isLoading, setIsLoading] = _react.useState.call(void 0, false);
   const childRef = _react.useRef.call(void 0, null);
   _react.useEffect.call(void 0, () => {
     if (childRef.current == null) {
       childRef.current = new (0, _clientsdkwindow.ChildWindow)(window.opener || window.parent, "*", {
-        incomingEvents,
-        outgoingEvents
+        incomingEvents
       });
     }
     return () => {
@@ -464,6 +504,7 @@ var useOAuthWindowListener = (provider) => {
       throw new Error("Child window not initialized");
     }
     setIsLoading(true);
+    setError(null);
     const popup = yield _clientsdkwindow.PopupWindow.init(oauthUrlMap[provider], {
       awaitToLoad: false,
       crossOrigin: true,
@@ -477,7 +518,15 @@ var useOAuthWindowListener = (provider) => {
       popup.window.close();
       setIsLoading(false);
     });
+    const handleError = (data) => {
+      var _a;
+      setError(data.error);
+      (_a = childRef.current) == null ? void 0 : _a.off("errorFromPopupCallback");
+      popup.window.close();
+      setIsLoading(false);
+    };
     childRef.current.on("authMaterialFromPopupCallback", handleAuthMaterial);
+    childRef.current.on("errorFromPopupCallback", handleError);
     const checkWindowClosure = setInterval(() => {
       var _a;
       if (popup.window.closed) {
@@ -493,10 +542,8 @@ var useOAuthWindowListener = (provider) => {
   };
 };
 var incomingEvents = {
-  authMaterialFromPopupCallback: _zod.z.object({ oneTimeSecret: _zod.z.string() })
-};
-var outgoingEvents = {
-  authMaterialFromAuthFrame: _zod.z.object({ oneTimeSecret: _zod.z.string() })
+  authMaterialFromPopupCallback: _zod.z.object({ oneTimeSecret: _zod.z.string() }),
+  errorFromPopupCallback: _zod.z.object({ error: _zod.z.string() })
 };
 
 // src/components/auth/methods/google/GoogleSignIn.tsx
@@ -557,7 +604,7 @@ var _authkit = require('@farcaster/auth-kit');
 
 function FarcasterSignIn() {
   var _a, _b;
-  const { step, appearance, setStep } = useAuthForm();
+  const { step, appearance, setStep, setError } = useAuthForm();
   if (step === "initial") {
     return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
       "button",
@@ -573,6 +620,7 @@ function FarcasterSignIn() {
         },
         onClick: () => {
           setStep("qrCode");
+          setError(null);
         },
         children: [
           /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkHPOZ6I54cjs.FarcasterIcon, { className: "h-[25px] w-[25px] absolute left-[18px]" }),
@@ -597,7 +645,7 @@ function FarcasterSignIn() {
 function FarcasterQRCode() {
   var _a, _b, _c, _d, _e, _f, _g, _h, _i;
   const { crossmintAuth } = useCrossmintAuth();
-  const { appearance, setStep, setDialogOpen } = useAuthForm();
+  const { appearance, setStep, setDialogOpen, setError } = useAuthForm();
   const [farcasterData, setFarcasterData] = _react.useState.call(void 0, null);
   const farcasterProps = _react.useMemo.call(void 0, 
     () => ({
@@ -609,6 +657,7 @@ function FarcasterQRCode() {
   );
   const { signIn, url: qrCodeUrl, connect, signOut, isConnected } = _authkit.useSignIn.call(void 0, farcasterProps);
   const handleFarcasterSignIn = (data) => _chunk4DAZAO6Ycjs.__async.call(void 0, this, null, function* () {
+    setError(null);
     try {
       const oneTimeSecret = yield crossmintAuth == null ? void 0 : crossmintAuth.signInWithFarcaster(data);
       yield crossmintAuth == null ? void 0 : crossmintAuth.handleRefreshAuthMaterial(oneTimeSecret);
@@ -616,6 +665,7 @@ function FarcasterQRCode() {
       setStep("initial");
     } catch (error) {
       console.error("Error during Farcaster sign-in:", error);
+      setError("Failed to sign in with Farcaster");
     }
   });
   _react.useEffect.call(void 0, () => {
@@ -633,7 +683,7 @@ function FarcasterQRCode() {
   }, []);
   return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { children: [
     /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-      _chunkGY6G3ZC2cjs.AuthFormBackButton,
+      AuthFormBackButton,
       {
         onClick: () => {
           signOut();
@@ -706,11 +756,11 @@ function FarcasterQRCode() {
   ] });
 }
 
-// src/components/auth/methods/web3/Web3SignIn.tsx
+// src/components/auth/methods/web3/Web3AuthFlowButton.tsx
 
-function Web3SignIn() {
+function Web3AuthFlowButton() {
   var _a, _b, _c, _d, _e;
-  const { step, appearance, setStep } = useAuthForm();
+  const { step, appearance, setStep, setError } = useAuthForm();
   if (step !== "initial") {
     return null;
   }
@@ -727,7 +777,10 @@ function Web3SignIn() {
         borderColor: (_a = appearance == null ? void 0 : appearance.colors) == null ? void 0 : _a.border,
         backgroundColor: (_b = appearance == null ? void 0 : appearance.colors) == null ? void 0 : _b.buttonBackground
       },
-      onClick: () => setStep("web3"),
+      onClick: () => {
+        setStep("web3");
+        setError(null);
+      },
       children: [
         /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
           _chunkKNOUJZN5cjs.WalletIcon,
@@ -750,16 +803,15 @@ function Web3SignIn() {
   );
 }
 
-// src/components/auth/methods/web3/Web3AuthWrapper.tsx
+// src/components/auth/methods/web3/Web3ConnectorContainer.tsx
 
 var _wagmi = require('wagmi');
 
-function Web3AuthWrapper({ providerType, flag, icon }) {
+function Web3ConnectorContainer({ providerType, flag, icon }) {
   var _a, _b;
   const { crossmintAuth } = useCrossmintAuth();
-  const { appearance } = useAuthForm();
+  const { appearance, error, setError } = useAuthForm();
   const [isLoading, setIsLoading] = _react.useState.call(void 0, false);
-  const [error, setError] = _react.useState.call(void 0, null);
   const chainId = _wagmi.useChainId.call(void 0, );
   const { address, status: accountStatus } = _wagmi.useAccount.call(void 0, );
   const { signMessageAsync, status: signMessageStatus } = _wagmi.useSignMessage.call(void 0, );
@@ -783,6 +835,7 @@ function Web3AuthWrapper({ providerType, flag, icon }) {
       return;
     }
     setIsLoading(true);
+    setError(null);
     try {
       const res = yield crossmintAuth == null ? void 0 : crossmintAuth.signInWithSmartWallet(address);
       const signature = yield signMessageAsync({ message: res.challenge });
@@ -798,7 +851,7 @@ function Web3AuthWrapper({ providerType, flag, icon }) {
   });
   const isLoadingOrPending = isLoading || accountStatus === "connecting" || accountStatus === "reconnecting" || signMessageStatus === "pending";
   return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-    _chunkZCYU7QA6cjs.Web3ConnectButton,
+    _chunkQ3UM7UCMcjs.Web3Connector,
     {
       icon,
       appearance,
@@ -827,7 +880,7 @@ function Web3Connectors() {
   if (step === "web3") {
     return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _jsxruntime.Fragment, { children: [
       /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-        _chunkGY6G3ZC2cjs.AuthFormBackButton,
+        AuthFormBackButton,
         {
           onClick: () => setStep("initial"),
           iconColor: (_a = appearance == null ? void 0 : appearance.colors) == null ? void 0 : _a.textPrimary,
@@ -845,7 +898,7 @@ function Web3Connectors() {
         ) }),
         /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "flex flex-col gap-[10px] w-full", children: [
           /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-            _chunkDJ32OEWGcjs.Web3ProviderButton,
+            _chunkHSLAH2PNcjs.Web3ConnectorButton,
             {
               title: "Metamask",
               appearance,
@@ -861,7 +914,7 @@ function Web3Connectors() {
             }
           ),
           /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-            _chunkDJ32OEWGcjs.Web3ProviderButton,
+            _chunkHSLAH2PNcjs.Web3ConnectorButton,
             {
               title: "WalletConnect",
               appearance,
@@ -883,27 +936,31 @@ function Web3Connectors() {
   if (step === "web3/metamask") {
     return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _jsxruntime.Fragment, { children: [
       /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-        _chunkGY6G3ZC2cjs.AuthFormBackButton,
+        AuthFormBackButton,
         {
-          onClick: () => setStep("web3"),
+          onClick: () => {
+            setStep("web3");
+          },
           iconColor: (_d = appearance == null ? void 0 : appearance.colors) == null ? void 0 : _d.textPrimary,
           ringColor: (_e = appearance == null ? void 0 : appearance.colors) == null ? void 0 : _e.accent
         }
       ),
-      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Web3AuthWrapper, { providerType: "metaMaskSDK", flag: "isMetaMask", icon: _chunkQK5J7FD3cjs.metamaskIcon })
+      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Web3ConnectorContainer, { providerType: "metaMaskSDK", flag: "isMetaMask", icon: _chunkQK5J7FD3cjs.metamaskIcon })
     ] });
   }
   if (step === "web3/walletconnect") {
     return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _jsxruntime.Fragment, { children: [
       /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-        _chunkGY6G3ZC2cjs.AuthFormBackButton,
+        AuthFormBackButton,
         {
-          onClick: () => setStep("web3"),
+          onClick: () => {
+            setStep("web3");
+          },
           iconColor: (_f = appearance == null ? void 0 : appearance.colors) == null ? void 0 : _f.textPrimary,
           ringColor: (_g = appearance == null ? void 0 : appearance.colors) == null ? void 0 : _g.accent
         }
       ),
-      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Web3AuthWrapper, { providerType: "walletConnect", icon: _chunkQK5J7FD3cjs.walletConnectIcon })
+      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Web3ConnectorContainer, { providerType: "walletConnect", icon: _chunkQK5J7FD3cjs.walletConnectIcon })
     ] });
   }
   return null;
@@ -917,50 +974,73 @@ function Web3AuthFlow() {
     return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Web3Connectors, {});
   }
   if (step === "initial") {
-    return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Web3SignIn, {});
+    return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Web3AuthFlowButton, {});
   }
   return null;
 }
 
 // src/components/auth/AuthForm.tsx
 
+
 function AuthForm({ className }) {
-  var _a, _b, _c, _d;
-  const { step, appearance, loginMethods, baseUrl } = useAuthForm();
-  return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: _chunk5RX5WFEWcjs.classNames.call(void 0, "flex flex-col gap-[10px] antialiased animate-none", className), children: [
-    step === "initial" ? /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { children: [
-      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-        "h1",
-        {
-          className: "text-2xl font-bold text-cm-text-primary",
-          style: { color: (_a = appearance == null ? void 0 : appearance.colors) == null ? void 0 : _a.textPrimary },
-          children: "Sign In"
-        }
+  var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j;
+  const { step, appearance, loginMethods, baseUrl, error } = useAuthForm();
+  return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
+    "div",
+    {
+      className: _chunk5RX5WFEWcjs.classNames.call(void 0, 
+        "relative p-6 pb-4 !min-[480px]:p-10 !min-[480px]:pb-8 flex flex-col gap-[10px] antialiased animate-none",
+        className
       ),
-      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-        "p",
-        {
-          className: "text-base font-normal mb-3 text-cm-text-secondary",
-          style: { color: (_b = appearance == null ? void 0 : appearance.colors) == null ? void 0 : _b.textSecondary },
-          children: "Sign in using one of the options below"
-        }
-      )
-    ] }) : null,
-    loginMethods.includes("email") ? /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _jsxruntime.Fragment, { children: [
-      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, EmailAuthFlow, {}),
-      loginMethods.length > 1 ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Divider, { appearance, text: "OR" }) : null
-    ] }) : null,
-    loginMethods.includes("google") ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, GoogleSignIn, {}) : null,
-    loginMethods.includes("farcaster") ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkQQXBYOKAcjs.FarcasterProvider, { baseUrl, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, FarcasterSignIn, {}) }) : null,
-    loginMethods.includes("web3") ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Web3AuthFlow, {}) : null,
-    step === "initial" || step === "otp" ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-      _chunkPBSL6JOFcjs.PoweredByCrossmint,
-      {
-        className: "mt-4 justify-center",
-        color: (_d = (_c = appearance == null ? void 0 : appearance.colors) == null ? void 0 : _c.textSecondary) != null ? _d : "#A4AFB2"
-      }
-    ) : null
-  ] });
+      children: [
+        error ? /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
+          "div",
+          {
+            className: "flex items-start justify-start w-full rounded-lg p-2 mt-4 bg-cm-danger-muted",
+            style: {
+              backgroundColor: new (0, _color2.default)((_b = (_a = appearance == null ? void 0 : appearance.colors) == null ? void 0 : _a.danger) != null ? _b : "#f44336").alpha(0.12).toString()
+            },
+            children: [
+              /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkZMSST6ZZcjs.AlertIcon, { customColor: (_d = (_c = appearance == null ? void 0 : appearance.colors) == null ? void 0 : _c.danger) != null ? _d : "#f44336" }),
+              /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "p", { className: "ml-2 text-sm", style: { color: (_f = (_e = appearance == null ? void 0 : appearance.colors) == null ? void 0 : _e.danger) != null ? _f : "#f44336" }, children: error })
+            ]
+          }
+        ) : null,
+        step === "initial" ? /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { children: [
+          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+            "h1",
+            {
+              className: "text-2xl font-bold text-cm-text-primary",
+              style: { color: (_g = appearance == null ? void 0 : appearance.colors) == null ? void 0 : _g.textPrimary },
+              children: "Sign In"
+            }
+          ),
+          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+            "p",
+            {
+              className: "text-base font-normal mb-3 text-cm-text-secondary",
+              style: { color: (_h = appearance == null ? void 0 : appearance.colors) == null ? void 0 : _h.textSecondary },
+              children: "Sign in using one of the options below"
+            }
+          )
+        ] }) : null,
+        loginMethods.includes("email") ? /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _jsxruntime.Fragment, { children: [
+          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, EmailAuthFlow, {}),
+          loginMethods.length > 1 ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Divider, { appearance, text: "OR" }) : null
+        ] }) : null,
+        loginMethods.includes("google") ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, GoogleSignIn, {}) : null,
+        loginMethods.includes("farcaster") ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkQQXBYOKAcjs.FarcasterProvider, { baseUrl, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, FarcasterSignIn, {}) }) : null,
+        loginMethods.includes("web3") ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Web3AuthFlow, {}) : null,
+        step === "initial" || step === "otp" ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+          _chunkPBSL6JOFcjs.PoweredByCrossmint,
+          {
+            className: "mt-4 justify-center",
+            color: (_j = (_i = appearance == null ? void 0 : appearance.colors) == null ? void 0 : _i.textSecondary) != null ? _j : "#A4AFB2"
+          }
+        ) : null
+      ]
+    }
+  );
 }
 
 // src/components/auth/AuthFormDialog.tsx
@@ -979,7 +1059,7 @@ function AuthFormDialog({ open }) {
       onOpenAutoFocus: (e) => e.preventDefault(),
       closeButtonColor: (_a = appearance == null ? void 0 : appearance.colors) == null ? void 0 : _a.textPrimary,
       closeButtonRingColor: (_b = appearance == null ? void 0 : appearance.colors) == null ? void 0 : _b.accent,
-      className: "cm-responsive-border-radius-auth-dialog",
+      className: "cm-responsive-border-radius-auth-dialog !p-0 !min-[480px]:p-0",
       style: {
         borderRadius: appearance == null ? void 0 : appearance.borderRadius,
         backgroundColor: (_c = appearance == null ? void 0 : appearance.colors) == null ? void 0 : _c.background
@@ -1261,5 +1341,6 @@ function deriveErrorState(error) {
 
 
 
-exports.WalletContext = WalletContext; exports.CrossmintWalletProvider = CrossmintWalletProvider; exports.useWallet = useWallet; exports.useCrossmintAuth = useCrossmintAuth; exports.useAuthForm = useAuthForm; exports.AuthFormProvider = AuthFormProvider; exports.EMAIL_VERIFICATION_TOKEN_LENGTH = EMAIL_VERIFICATION_TOKEN_LENGTH; exports.EmailOTPInput = EmailOTPInput; exports.EmailSignIn = EmailSignIn; exports.EmailAuthFlow = EmailAuthFlow; exports.Divider = Divider; exports.useOAuthWindowListener = useOAuthWindowListener; exports.GoogleSignIn = GoogleSignIn; exports.FarcasterSignIn = FarcasterSignIn; exports.Web3SignIn = Web3SignIn; exports.Web3AuthWrapper = Web3AuthWrapper; exports.Web3Connectors = Web3Connectors; exports.Web3AuthFlow = Web3AuthFlow; exports.AuthForm = AuthForm; exports.AuthFormDialog = AuthFormDialog; exports.AuthContext = AuthContext; exports.CrossmintAuthProvider = CrossmintAuthProvider; exports.useAuth = useAuth;
-//# sourceMappingURL=chunk-FOCUIKYH.cjs.map
+
+exports.WalletContext = WalletContext; exports.CrossmintWalletProvider = CrossmintWalletProvider; exports.useWallet = useWallet; exports.useCrossmintAuth = useCrossmintAuth; exports.useAuthForm = useAuthForm; exports.AuthFormProvider = AuthFormProvider; exports.AuthFormBackButton = AuthFormBackButton; exports.EMAIL_VERIFICATION_TOKEN_LENGTH = EMAIL_VERIFICATION_TOKEN_LENGTH; exports.EmailOTPInput = EmailOTPInput; exports.EmailSignIn = EmailSignIn; exports.EmailAuthFlow = EmailAuthFlow; exports.Divider = Divider; exports.useOAuthWindowListener = useOAuthWindowListener; exports.GoogleSignIn = GoogleSignIn; exports.FarcasterSignIn = FarcasterSignIn; exports.Web3AuthFlowButton = Web3AuthFlowButton; exports.Web3ConnectorContainer = Web3ConnectorContainer; exports.Web3Connectors = Web3Connectors; exports.Web3AuthFlow = Web3AuthFlow; exports.AuthForm = AuthForm; exports.AuthFormDialog = AuthFormDialog; exports.AuthContext = AuthContext; exports.CrossmintAuthProvider = CrossmintAuthProvider; exports.useAuth = useAuth;
+//# sourceMappingURL=chunk-EBMORHG3.cjs.map