npm - @stytch/react - Versions diffs - 20.0.0-next.0 → 20.0.0-next.1 - Mend

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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (270) hide show

package/dist/cjs-dev/{shadcn-CdbmlhdF.js → shadcn-C4w3DtKK.js} RENAMED Viewed

@@ -1,9 +1,9 @@
 'use strict';
 var React = require('react');
-var passwordManagerDisableAutofillProps = require('./passwordManagerDisableAutofillProps-CnLBAXyr.js');
-var idpHelpers = require('./idpHelpers-DOOVv6dT.js');
-var StytchSSRProxy = require('./StytchSSRProxy-D0B5PuT0.js');
+var passwordManagerDisableAutofillProps = require('./passwordManagerDisableAutofillProps-D70WyvIu.js');
+var idpHelpers = require('./idpHelpers-Cf8Qq1B4.js');
+var StytchSSRProxy = require('./StytchSSRProxy-CxXsyme4.js');
 function _interopNamespace(e) {
   if (e && e.__esModule) return e;
@@ -482,46 +482,37 @@ function injectGlobalStyle() {
     }
 }
-var css$q = ".Watermark_module_watermark__a805ba24{align-items:center;border-radius:var(--st-rounded-md);color:var(--st-muted-foreground);display:flex;gap:var(--st-spacing-2);padding:var(--st-spacing-2) var(--st-spacing-3);transition:background var(--st-transition-duration),color var(--st-transition-duration)}.Watermark_module_watermark__a805ba24 span{font-size:var(--st-text-sm);line-height:var(--st-line-height-sm)}.Watermark_module_watermark__a805ba24:hover{background:var(--st-accent);color:var(--st-accent-foreground)}.Watermark_module_stytch__a805ba24 path{fill:currentColor}.Watermark_module_twilio__a805ba24 path{fill:hsl(353,84.7%,calc(56.5%*(1 + var(--st-dark-mode, 0))))}";
+var css$q = ".Watermark_module_watermark__f06cda63{align-items:center;border-radius:var(--st-rounded-md);color:var(--st-muted-foreground);display:flex;gap:var(--st-spacing-2);padding:var(--st-spacing-2) var(--st-spacing-3);transition:background var(--st-transition-duration),color var(--st-transition-duration)}.Watermark_module_watermark__f06cda63 span{font-size:var(--st-text-sm);line-height:var(--st-line-height-sm);margin-right:-6px}.Watermark_module_watermark__f06cda63:hover{background:var(--st-accent);color:var(--st-accent-foreground)}.Watermark_module_stytch__f06cda63{fill:var(--st-foreground)}.Watermark_module_twilio__f06cda63{fill:hsl(353,84.7%,calc(56.5%*(1 + var(--st-dark-mode, 0))))}";
 collectCss(css$q);
-var modules_b8928cee = {"watermark":"Watermark_module_watermark__a805ba24 inputBase_module_focusRing__06c14ae4","stytch":"Watermark_module_stytch__a805ba24","twilio":"Watermark_module_twilio__a805ba24"};
+var modules_b8928cee = {"watermark":"Watermark_module_watermark__f06cda63 inputBase_module_focusRing__06c14ae4","stytch":"Watermark_module_stytch__f06cda63","twilio":"Watermark_module_twilio__f06cda63"};
-const Watermark = ({ label, twilio })=>/*#__PURE__*/ React__namespace.default.createElement("a", {
+const Watermark = ({ label, logoText })=>/*#__PURE__*/ React__namespace.default.createElement("a", {
         className: modules_b8928cee.watermark,
         href: "https://stytch.com/",
         target: "_blank",
         rel: "noreferrer"
-    }, /*#__PURE__*/ React__namespace.default.createElement("svg", {
-        className: modules_b8928cee.stytch,
-        width: "20",
-        height: "20",
-        viewBox: "0 0 20 20",
+    }, /*#__PURE__*/ React__namespace.default.createElement("span", null, label, " "), /*#__PURE__*/ React__namespace.default.createElement("svg", {
+        xmlns: "http://www.w3.org/2000/svg",
         fill: "none",
-        xmlns: "http://www.w3.org/2000/svg"
+        viewBox: "0 0 261 40",
+        "aria-label": logoText,
+        height: "25px"
     }, /*#__PURE__*/ React__namespace.default.createElement("path", {
-        d: "M9.28889 9.32076V1H5.97576V4.84842C5.97576 5.55095 5.37953 6.12046 4.64404 6.12046H2V9.32076H9.28889Z"
-    }), /*#__PURE__*/ React__namespace.default.createElement("path", {
-        d: "M10.7111 9.32076V1H14.0242V4.84842C14.0242 5.55095 14.6205 6.12046 15.356 6.12046H18V9.32076H10.7111Z"
-    }), /*#__PURE__*/ React__namespace.default.createElement("path", {
-        d: "M9.28889 10.6792V19H5.97576V15.1516C5.97576 14.449 5.37953 13.8795 4.64404 13.8795H2V10.6792H9.28889Z"
+        className: modules_b8928cee.stytch,
+        d: "M29.7 12.82c0 .8.65 1.44 1.45 1.44h4.72c1.36 0 2.59.8 3.14 2.05l3.64 8.16 3.4-8.1a3.44 3.44 0 0 1 3.18-2.1h3.28v-5.3h3.94v3.85c0 .8.65 1.44 1.45 1.44h2.7v3.22h-4.15v7.61c0 1.55.4 1.95 1.94 1.95h2.06v3.3H56.6c-2.67 0-4.09-1.42-4.09-4.1v-8.76h-1.99c-.44 0-.77.19-.93.52L44.5 29l-.02 1.33c0 2.9-1.57 4.7-4.09 4.7h-6.55v-3.36h4.95c1.51 0 1.95-.07 1.95-1.65v-.83L35.44 18c-.16-.32-.49-.5-.93-.5h-4.8v7.6c0 1.55.39 1.95 1.93 1.95h1.95v3.3h-3.74c-2.68 0-4.1-1.42-4.1-4.1V8.98h3.95v3.84ZM16.72 8.98c4.47 0 6.79 1.78 7.07 5.43h-4.14c-.2-1.61-1.17-2.4-2.98-2.4-1.69 0-2.86 1.01-2.86 2.6s.67 2.32 2.56 2.77l2.47.6c3.63.9 5.26 2.69 5.26 5.8 0 4.17-2.84 6.57-7.43 6.57-4.6 0-7.2-2.11-7.55-6.12h3.98c.25 2.01 1.5 3.03 3.57 3.03 2.06 0 3.4-1.12 3.4-2.85 0-1.63-.83-2.45-2.94-2.93l-2.5-.57c-2.21-.53-4.85-1.97-4.85-5.83 0-3.65 2.8-6.1 6.94-6.1Zm64.68 0v7.4l.26-.32c.92-1.13 1.86-1.78 3.93-1.78 3.51 0 5.53 2.21 5.53 6.07v10h-3.94v-9.51c0-1.2-.34-2.14-.98-2.75a2.62 2.62 0 0 0-2.02-.67c-1.9.12-2.78 1.6-2.78 4.66v8.26h-3.94V8.98h3.94Zm-12.66 5.3c4.23 0 6.74 1.96 7.1 5.52h-3.9c-.3-1.51-1.28-2.22-3.07-2.22h-.26c-2.34 0-3.86 1.86-3.86 4.73s1.51 4.73 3.86 4.73h.26c1.79 0 2.76-.71 3.06-2.22h3.91c-.36 3.56-2.87 5.52-7.1 5.52-4.47 0-7.59-3.3-7.59-8.03 0-4.73 3.12-8.03 7.6-8.03Z"
     }), /*#__PURE__*/ React__namespace.default.createElement("path", {
-        d: "M10.7111 10.6792V19H14.0242V15.1516C14.0242 14.449 14.6205 13.8795 15.356 13.8795H18V10.6792H10.7111Z"
-    })), /*#__PURE__*/ React__namespace.default.createElement("span", null, label), /*#__PURE__*/ React__namespace.default.createElement("span", null, "+"), /*#__PURE__*/ React__namespace.default.createElement("svg", {
-        className: modules_b8928cee.twilio,
-        xmlns: "http://www.w3.org/2000/svg",
-        width: "68",
-        height: "20",
-        fill: "none",
-        "aria-label": twilio
-    }, /*#__PURE__*/ React__namespace.default.createElement("g", {
+        fill: "currentColor",
+        d: "M112.37 25.42v-4.1h-4.1V19h4.1v-4.12h2.47V19h4.07v2.3h-4.07v4.11h-2.47Z"
+    }), /*#__PURE__*/ React__namespace.default.createElement("g", {
         clipPath: "url(#a)"
     }, /*#__PURE__*/ React__namespace.default.createElement("path", {
-        d: "M48.55 11.23v-.1c0-1.01.42-1.42 1.01-1.42.6 0 1.02.41 1.02 1.42v.1c0 1-.42 1.4-1.02 1.4-.59 0-1-.4-1-1.4Zm-3.09.04c0 2.2 1.63 3.74 4.1 3.74 2.47 0 4.1-1.54 4.1-3.74v-.18c0-2.2-1.63-3.73-4.1-3.73-2.47 0-4.1 1.53-4.1 3.73v.18ZM42 6.84c0 .1.06.16.16.16h2.74c.09 0 .16-.07.16-.16V5.22c0-.1-.07-.16-.16-.16h-2.74c-.1 0-.16.06-.16.16v1.62Zm-.02 7.9c0 .1.07.16.16.16h2.74c.1 0 .16-.07.16-.16v-7.1c0-.09-.06-.15-.16-.15h-2.74c-.09 0-.16.06-.16.16v7.09Zm-3.6 0c0 .1.07.16.16.16h2.74c.1 0 .16-.07.16-.16V5.22c0-.1-.06-.16-.16-.16h-2.74c-.1 0-.16.06-.16.16v9.52Zm-3.6-7.9c0 .1.06.16.16.16h2.74c.1 0 .16-.07.16-.16V5.22c0-.1-.07-.16-.16-.16h-2.74c-.1 0-.16.06-.16.16v1.62Zm-9.34 8.06h2.65c.1 0 .13-.04.16-.13l.86-3.12.84 3.12c.03.09.07.13.16.13h2.69c.1 0 .17-.04.2-.13L34.78 8v6.74c0 .1.07.16.16.16h2.74c.1 0 .16-.07.16-.16v-7.1c0-.09-.07-.15-.16-.15h-5.55c-.09 0-.14.04-.17.15l-.63 3.05-.65-3.05c-.02-.1-.08-.15-.18-.15h-2.59c-.1 0-.16.05-.17.15l-.65 3.07-.6-3.07c-.03-.11-.09-.15-.18-.15h-4.44V5.18c0-.12-.08-.18-.22-.14L19 5.91a.2.2 0 0 0-.15.2v1.01c0 .29-.15.4-.44.4h-.58c-.09 0-.16.07-.16.17v1.99c0 .09.07.16.16.16h.98v2.5c0 1.74.63 2.67 2.72 2.67.81 0 1.45-.13 1.8-.3.1-.05.13-.12.13-.23v-1.94c0-.11-.1-.16-.23-.1-.17.08-.35.13-.55.13-.54 0-.81-.2-.81-.88V9.84h1.42c.09 0 .16-.07.16-.16V7.95l1.8 6.82c.02.1.09.13.2.13M8.44 8c0-.94.78-1.72 1.7-1.72.91 0 1.68.78 1.68 1.72 0 .93-.74 1.67-1.69 1.67-.94 0-1.68-.76-1.68-1.67Zm0 4.03a1.69 1.69 0 1 1 3.38 0 1.69 1.69 0 0 1-3.37 0ZM4.42 8c0-.94.74-1.72 1.69-1.72.94 0 1.7.78 1.7 1.72 0 .93-.77 1.67-1.7 1.67-.93 0-1.69-.76-1.69-1.67Zm0 4.03c0-.94.74-1.68 1.69-1.68.94 0 1.7.74 1.7 1.68a1.7 1.7 0 0 1-3.39 0ZM2.13 9.98a6 6 0 1 1 12 .03 6 6 0 0 1-12-.03Zm6-8.1a8.11 8.11 0 1 0 0 16.25 8.13 8.13 0 0 0 0-16.25Z"
+        className: modules_b8928cee.twilio,
+        d: "M239.55 22.64v-.2c0-2.18.9-3.05 2.18-3.05 1.28 0 2.17.87 2.17 3.05v.2c0 2.15-.9 3.02-2.17 3.02-1.28 0-2.18-.87-2.18-3.02Zm-6.64.09c0 4.73 3.51 8.04 8.82 8.04 5.3 0 8.81-3.31 8.81-8.04v-.38c0-4.73-3.5-8.02-8.81-8.02-5.3 0-8.82 3.29-8.82 8.02v.38Zm-7.45-9.53c0 .2.14.35.35.35h5.88c.2 0 .35-.14.35-.35V9.72c0-.2-.14-.35-.34-.35h-5.9c-.2 0-.34.14-.34.35v3.48Zm-.03 16.99c0 .2.14.35.35.35h5.88c.2 0 .35-.15.35-.35V14.94c0-.2-.14-.35-.34-.35h-5.9c-.2 0-.34.15-.34.35V30.2Zm-7.74 0c0 .2.14.35.34.35h5.9c.2 0 .34-.15.34-.35V9.72c0-.2-.14-.35-.35-.35h-5.89c-.2 0-.34.14-.34.35v20.47Zm-7.75-16.99c0 .2.15.35.35.35h5.89c.2 0 .35-.14.35-.35V9.72c0-.2-.15-.35-.35-.35h-5.89c-.2 0-.35.14-.35.35v3.48Zm-20.07 17.34h5.69c.2 0 .29-.1.35-.3l1.85-6.7 1.8 6.7c.06.2.15.3.35.3h5.77c.23 0 .38-.1.44-.3l3.82-14.54v14.49c0 .2.15.35.35.35h5.89c.2 0 .35-.15.35-.35V14.94c0-.2-.15-.34-.35-.34h-11.92c-.2 0-.32.08-.38.32l-1.36 6.56-1.4-6.56c-.02-.2-.16-.32-.37-.32h-5.57c-.2 0-.34.11-.37.32l-1.4 6.62-1.3-6.62c-.06-.24-.18-.32-.38-.32h-9.54V9.63c0-.26-.17-.38-.46-.29L176 11.2a.44.44 0 0 0-.32.43v2.18c0 .61-.32.87-.93.87h-1.24c-.2 0-.35.15-.35.35v4.27c0 .2.15.35.35.35h2.09v5.37c0 3.75 1.36 5.75 5.85 5.75 1.75 0 3.1-.29 3.86-.64.23-.12.3-.26.3-.5v-4.17c0-.24-.21-.35-.5-.2a2.8 2.8 0 0 1-1.19.26c-1.16 0-1.74-.44-1.74-1.9v-3.97h3.05c.2 0 .34-.15.34-.35v-3.72l3.86 14.67c.06.2.2.29.44.29m-36.52-14.87c0-2 1.65-3.69 3.63-3.69a3.7 3.7 0 0 1 3.62 3.69c0 2-1.6 3.6-3.62 3.6a3.6 3.6 0 0 1-3.63-3.6Zm0 8.68a3.63 3.63 0 1 1 7.26 0 3.63 3.63 0 0 1-7.26 0Zm-8.7-8.68c0-2 1.6-3.69 3.63-3.69a3.68 3.68 0 0 1 3.65 3.69c0 2-1.65 3.6-3.66 3.6-2 0-3.62-1.63-3.62-3.6Zm0 8.68a3.6 3.6 0 0 1 3.63-3.63 3.63 3.63 0 1 1-3.62 3.63Zm-4.9-4.38a12.9 12.9 0 0 1 12.9-12.87 12.9 12.9 0 0 1 0 25.78c-7.1 0-12.9-5.83-12.9-12.91Zm12.9-17.43a17.44 17.44 0 0 0-17.48 17.43 17.47 17.47 0 1 0 17.49-17.42Z"
     })), /*#__PURE__*/ React__namespace.default.createElement("defs", null, /*#__PURE__*/ React__namespace.default.createElement("clipPath", {
         id: "a"
     }, /*#__PURE__*/ React__namespace.default.createElement("path", {
         fill: "#fff",
-        d: "M0 1.88h53.7v16.24H0z"
+        d: "M135.18 2.54h115.44v34.91H135.18z"
     })))));
 var css$p = ".Column_module_column__efe9ce44{display:flex;flex-direction:column}";
@@ -645,9 +636,9 @@ collectCss(css$m);
 var css$l = "[dir=rtl] .i18n_module_rtlIcon__278ecfc9{scale:-1 1}.i18n_module_rtlIcon__278ecfc9:dir(rtl){scale:-1 1}";
 collectCss(css$l);
-var css$k = ".MainContainer_module_container__11af03ef{background-color:var(--st-background);border:1px solid var(--st-container-border);border-radius:var(--st-container-radius);color:var(--st-foreground);max-width:var(--st-container-width);padding:var(--st-spacing-10) var(--st-spacing-9)}.MainContainer_module_watermarkContainer__11af03ef{display:flex;justify-content:center}";
+var css$k = ".MainContainer_module_container__d1278a0c{background-color:var(--st-background);border:1px solid var(--st-container-border);border-radius:var(--st-container-radius);color:var(--st-foreground);max-width:var(--st-container-width);padding:var(--st-spacing-10) var(--st-spacing-9);width:100%}.MainContainer_module_watermarkContainer__d1278a0c{display:flex;justify-content:center}";
 collectCss(css$k);
-var modules_852c89cd = {"container":"MainContainer_module_container__11af03ef Root_module_root__942a6873","watermarkContainer":"MainContainer_module_watermarkContainer__11af03ef"};
+var modules_852c89cd = {"container":"MainContainer_module_container__d1278a0c Root_module_root__942a6873","watermarkContainer":"MainContainer_module_watermarkContainer__d1278a0c"};
 const MainContainer = ({ children, displayWatermark, theme })=>{
     const { i18n: $__i18n, _: $__ } = passwordManagerDisableAutofillProps.useLingui();
@@ -662,12 +653,12 @@ const MainContainer = ({ children, displayWatermark, theme })=>{
         className: modules_852c89cd.watermarkContainer
     }, /*#__PURE__*/ React__namespace.default.createElement(Watermark, {
         label: $__i18n._({
-            id: "watermark.altText",
-            message: "Powered by Stytch"
+            id: "watermark.poweredBy",
+            message: "Powered by"
         }),
-        twilio: $__i18n._({
-            id: "watermark.twilio",
-            message: "Twilio"
+        logoText: $__i18n._({
+            id: "watermark.altText",
+            message: "Stytch + Twilio"
         })
     })), /*#__PURE__*/ React__namespace.default.createElement(ToastContainer, null));
 };
@@ -763,6 +754,14 @@ const extractErrorType = (error)=>{
     }
 };
+/**
+ * Run an effect only once, on mount
+ * @param effect An effect to run only once, on mount
+ */ const useMountEffect = (effect)=>{
+    const effectRef = React.useRef(effect);
+    React.useEffect(()=>effectRef.current(), []);
+};
 const DASHBOARD_REGEX = /https:\/\/stytch\.com\/[#a-zA-Z0-9/-]+/g;
 const mapURLsToLinks = (str)=>{
     const nonLinkChunks = str.split(DASHBOARD_REGEX);
@@ -788,11 +787,18 @@ const ErrorText = ({ children, ...props })=>{
     const tokens = React.useMemo(()=>mapURLsToLinks(children), [
         children
     ]);
-    return /*#__PURE__*/ React__namespace.default.createElement(Typography, {
+    // HACK: Screen readers only read elements in aria-live regions if they are new or changed. We first render the
+    // aria-live div, then render the inner children second so the error message is "new" and therefore read out
+    const [render, setRender] = React.useState(false);
+    useMountEffect(()=>setRender(true));
+    return /*#__PURE__*/ React__namespace.default.createElement("div", {
+        "aria-live": "polite"
+    }, render && /*#__PURE__*/ React__namespace.default.createElement(Typography, {
         ...props,
         variant: "helper",
-        color: "destructive"
-    }, tokens);
+        color: "destructive",
+        key: children
+    }, tokens));
 };
 var css$h = ".Divider_module_container__1fb7194e{align-items:center;display:flex;gap:var(--st-spacing-2);line-height:var(--st-line-height-xs)}.Divider_module_bar__1fb7194e{border-bottom:1px solid var(--st-divider-color);flex:1 1 auto}";
@@ -874,7 +880,8 @@ var modules_d963aab3 = {"container":"Input_module_container__a0aad2f4","label":"
         className: modules_d963aab3.action
     }, action)), error && /*#__PURE__*/ React__namespace.default.createElement(ErrorText, {
         id: errorId,
-        className: modules_d963aab3.error
+        className: modules_d963aab3.error,
+        "aria-live": "polite"
     }, error));
 });
@@ -1062,10 +1069,9 @@ error, ...additionalProps })=>{
         ...inputProps.input,
         ...hasPasskeys ? passwordManagerDisableAutofillProps.passwordManagerDisableAutofillProps : {},
         ...additionalProps
-    }), error && /*#__PURE__*/ React__namespace.default.createElement(ErrorText, {
-        className: modules_2f821ae3.error,
-        ...inputProps.error
-    }, error));
+    }), error && /*#__PURE__*/ React__namespace.default.createElement("div", {
+        className: modules_2f821ae3.error
+    }, /*#__PURE__*/ React__namespace.default.createElement(ErrorText, inputProps.error, error)));
 };
 const EmailInput = ({ email, setEmail, hasPasskeys = false, ...additionalProps })=>{
@@ -1081,7 +1087,7 @@ const EmailInput = ({ email, setEmail, hasPasskeys = false, ...additionalProps }
             message: "example@email.com"
         }),
         type: "email",
-        autoComplete: hasPasskeys ? 'username webauthn' : 'email username',
+        autoComplete: hasPasskeys ? 'username webauthn' : 'email',
         value: email,
         onChange: (e)=>setEmail(e.target.value),
         required: true,
@@ -1106,15 +1112,14 @@ const BASE_SIZE = 44;
         style: {
             width: size,
             height: size
-        },
+        }
+    }, /*#__PURE__*/ React__namespace.default.createElement("svg", {
+        className: modules_eaa8372d.svg,
+        viewBox: `${BASE_SIZE / 2} ${BASE_SIZE / 2} ${BASE_SIZE} ${BASE_SIZE}`,
         "aria-label": label ?? $__i18n._({
             id: "loading.label",
             message: "Loading"
         })
-    }, /*#__PURE__*/ React__namespace.default.createElement("svg", {
-        className: modules_eaa8372d.svg,
-        viewBox: `${BASE_SIZE / 2} ${BASE_SIZE / 2} ${BASE_SIZE} ${BASE_SIZE}`,
-        role: "presentation"
     }, /*#__PURE__*/ React__namespace.default.createElement("circle", {
         className: modules_eaa8372d.animatedCircle,
         cx: BASE_SIZE,
@@ -1702,8 +1707,9 @@ const EmailProviderLink = ({ providerInfo: { icon, messageDescriptor, getUrl },
 /**
  * Base component for the two EmailConfirmation in B2B and B2C. This component controls the presentation
  * and do not have any of the B2C/B2B specific code
- */ const EmailConfirmationView = ({ emailDomain, reset, email, showGoBack = true })=>{
+ */ const EmailConfirmationView = ({ emailDomain, email, goBack, resend, countdown, isSubmitting })=>{
     const { i18n: $__i18n, _: $__ } = passwordManagerDisableAutofillProps.useLingui();
+    const [timeRemaining, active] = useTimeRemaining(countdown?.expiration ?? 0);
     return /*#__PURE__*/ React__namespace.default.createElement(EmailActionLayout, {
         header: $__i18n._({
             id: "emailConfirmation.title",
@@ -1728,9 +1734,29 @@ const EmailProviderLink = ({ providerInfo: { icon, messageDescriptor, getUrl },
         }), /*#__PURE__*/ React__namespace.default.createElement(EmailProviderLink, {
             emailDomain: emailDomain,
             providerInfo: emailProviderInfo.outlook
-        }), showGoBack && /*#__PURE__*/ React__namespace.default.createElement(Button, {
+        }), resend && countdown && /*#__PURE__*/ React__namespace.default.createElement(Button, {
+            variant: "outline",
+            disabled: isSubmitting || active,
+            onClick: ()=>{
+                countdown.start(15);
+                resend().catch(()=>countdown.clear());
+            }
+        }, /*#__PURE__*/ React__namespace.default.createElement(VerticalTransition, {
+            primary: $__i18n._({
+                id: "button.resendEmail",
+                message: "Resend email"
+            }),
+            secondary: $__i18n._({
+                id: "emailConfirmation.emailSent",
+                message: "Email sent! Try again in {timeRemaining}s",
+                values: {
+                    timeRemaining: timeRemaining
+                }
+            }),
+            triggered: active
+        })), goBack && /*#__PURE__*/ React__namespace.default.createElement(Button, {
             variant: "ghost",
-            onClick: reset
+            onClick: goBack
         }, $__i18n._({
             id: "button.goBack",
             message: "Go back"
@@ -2022,10 +2048,10 @@ const ResendOTPButton = ({ isSubmitting, resendOTP, countdown })=>{
             resendOTP().catch(()=>countdown.clear());
         }
     }, /*#__PURE__*/ React__namespace.default.createElement(VerticalTransition, {
-        primary: /*#__PURE__*/ React__namespace.default.createElement("span", null, $__i18n._({
+        primary: $__i18n._({
             id: "passcode.resendCode",
             message: "Resend code"
-        })),
+        }),
         secondary: $__i18n._({
             id: "passcode.codeSent",
             message: "Code sent! Try again in {timeRemaining}s",
@@ -2037,14 +2063,6 @@ const ResendOTPButton = ({ isSubmitting, resendOTP, countdown })=>{
     }));
 };
-/**
- * Run an effect only once, on mount
- * @param effect An effect to run only once, on mount
- */ const useMountEffect = (effect)=>{
-    const effectRef = React.useRef(effect);
-    React.useEffect(()=>effectRef.current(), []);
-};
 const Confirmation = ({ header, text })=>{
     const { i18n: $__i18n, _: $__ } = passwordManagerDisableAutofillProps.useLingui();
     const defaultHeader = $__i18n._({
@@ -2525,9 +2543,9 @@ const DEFAULT_SMS_OTP_EXPIRATION_MS = 1000 * 60 * 2; // 2 minutes
 function apiMfaMethodToProduct(method) {
     switch(method){
         case 'totp':
-            return idpHelpers.B2BMFAProducts.totp;
+            return StytchSSRProxy.B2BMFAProducts.totp;
         case 'sms_otp':
-            return idpHelpers.B2BMFAProducts.smsOtp;
+            return StytchSSRProxy.B2BMFAProducts.smsOtp;
         default:
             return undefined;
     }
@@ -2535,10 +2553,10 @@ function apiMfaMethodToProduct(method) {
 function getNextEnrollmentScreen(enabledMethods) {
     // If there is only one possible method, use it
     if (enabledMethods.size === 1) {
-        if (enabledMethods.has(idpHelpers.B2BMFAProducts.totp)) {
+        if (enabledMethods.has(StytchSSRProxy.B2BMFAProducts.totp)) {
             return AppScreens.TOTPEnrollmentQRCode;
         }
-        if (enabledMethods.has(idpHelpers.B2BMFAProducts.smsOtp)) {
+        if (enabledMethods.has(StytchSSRProxy.B2BMFAProducts.smsOtp)) {
             return AppScreens.SMSOTPEnrollment;
         }
     }
@@ -2546,8 +2564,8 @@ function getNextEnrollmentScreen(enabledMethods) {
 }
 const getSmsOtpCodeExpiration = ()=>new Date(Date.now() + DEFAULT_SMS_OTP_EXPIRATION_MS);
 const B2B_MFA_METHODS = [
-    idpHelpers.B2BMFAProducts.totp,
-    idpHelpers.B2BMFAProducts.smsOtp
+    StytchSSRProxy.B2BMFAProducts.totp,
+    StytchSSRProxy.B2BMFAProducts.smsOtp
 ];
 const mfaReducer = (state, action)=>{
     switch(action.type){
@@ -2570,7 +2588,7 @@ const mfaReducer = (state, action)=>{
                     const newBaseState = {
                         ...state,
                         flowState: {
-                            type: idpHelpers.AuthFlowType.Organization,
+                            type: StytchSSRProxy.AuthFlowType.Organization,
                             organization: action.response.organization
                         },
                         formState: {
@@ -2601,8 +2619,8 @@ const mfaReducer = (state, action)=>{
                 const memberEnrolledInTotp = !!action.response.member.totp_registration_id;
                 const primaryInfo = {
                     enrolledMfaMethods: [
-                        memberEnrolledInTotp && idpHelpers.B2BMFAProducts.totp,
-                        memberEnrolledInSmsOtp && idpHelpers.B2BMFAProducts.smsOtp
+                        memberEnrolledInTotp && StytchSSRProxy.B2BMFAProducts.totp,
+                        memberEnrolledInSmsOtp && StytchSSRProxy.B2BMFAProducts.smsOtp
                     ].filter(passwordManagerDisableAutofillProps.isTruthy),
                     memberId: action.response.member_id,
                     memberPhoneNumber: action.response.member.mfa_phone_number,
@@ -2623,14 +2641,14 @@ const mfaReducer = (state, action)=>{
                 // SMS was automatically sent, we should proceed directly to SMS OTP
                 // entry (even if the member's phone number is not yet verified).
                 const smsImplicitlySent = action.response.mfa_required?.secondary_auth_initiated === 'sms_otp';
-                const entryMethod = smsImplicitlySent ? idpHelpers.B2BMFAProducts.smsOtp : getDefaultMethod() ?? primaryInfo.enrolledMfaMethods.find(organizationSupportsMethod);
+                const entryMethod = smsImplicitlySent ? StytchSSRProxy.B2BMFAProducts.smsOtp : getDefaultMethod() ?? primaryInfo.enrolledMfaMethods.find(organizationSupportsMethod);
                 if (entryMethod) {
                     const mfaState = {
                         ...DEFAULT_MFA_STATE,
                         primaryInfo
                     };
                     switch(entryMethod){
-                        case idpHelpers.B2BMFAProducts.totp:
+                        case StytchSSRProxy.B2BMFAProducts.totp:
                             {
                                 return replaceHistory(AppScreens.TOTPEntry, {
                                     ...state,
@@ -2638,7 +2656,7 @@ const mfaReducer = (state, action)=>{
                                     primary: {}
                                 });
                             }
-                        case idpHelpers.B2BMFAProducts.smsOtp:
+                        case StytchSSRProxy.B2BMFAProducts.smsOtp:
                             {
                                 const nextState = {
                                     ...state,
@@ -2881,7 +2899,7 @@ const reducer = (state, action)=>{
                 return {
                     ...state,
                     flowState: {
-                        type: idpHelpers.AuthFlowType.Organization,
+                        type: StytchSSRProxy.AuthFlowType.Organization,
                         organization: action.organization
                     }
                 };
@@ -2909,7 +2927,7 @@ const reducer = (state, action)=>{
                 const newBaseState = {
                     ...state,
                     flowState: {
-                        type: idpHelpers.AuthFlowType.Organization,
+                        type: StytchSSRProxy.AuthFlowType.Organization,
                         organization
                     },
                     formState: {
@@ -3016,7 +3034,7 @@ const DEFAULT_STATE = {
         }
     },
     flowState: {
-        type: idpHelpers.AuthFlowType.Organization,
+        type: StytchSSRProxy.AuthFlowType.Organization,
         organization: null
     },
     mfa: DEFAULT_MFA_STATE,
@@ -3341,12 +3359,12 @@ const useIDPState = ({ initialError, initialParams, oauthAuthorizeStart, oauthAu
                 type: 'CONSENT_DENIED'
             });
             onEvent({
-                type: idpHelpers.StytchEventType.OAuthAuthorizeFlowConsentDenied,
+                type: StytchSSRProxy.StytchEventType.OAuthAuthorizeFlowConsentDenied,
                 data: {}
             });
         } else {
             onEvent({
-                type: idpHelpers.StytchEventType.OAuthAuthorizeFlowComplete,
+                type: StytchSSRProxy.StytchEventType.OAuthAuthorizeFlowComplete,
                 data: {}
             });
         }
@@ -3366,7 +3384,7 @@ const useIDPState = ({ initialError, initialParams, oauthAuthorizeStart, oauthAu
             type: 'START_PREFLIGHT'
         });
         onEvent({
-            type: idpHelpers.StytchEventType.OAuthAuthorizeFlowStart,
+            type: StytchSSRProxy.StytchEventType.OAuthAuthorizeFlowStart,
             data: {
                 client_id: initialParams['client_id'],
                 redirect_uri: initialParams['redirect_uri'],
@@ -4545,4 +4563,4 @@ exports.usePresentationWithDefault = usePresentationWithDefault;
 exports.useStytch = useStytch;
 exports.useTimedBoolean = useTimedBoolean;
 exports.useTrustedAuthTokenParams = useTrustedAuthTokenParams;
-//# sourceMappingURL=shadcn-CdbmlhdF.js.map
+//# sourceMappingURL=shadcn-C4w3DtKK.js.map