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

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

@@ -1 +1 @@
-{"version":3,"file":"Watermark.mjs","sources":["../../../../../../../../../web/src/ui/components/atoms/Watermark.tsx"],"sourcesContent":["import React from 'react';\nimport styles from './Watermark.module.css';\n\nconst Watermark = ({ label, twilio }: { label: string; twilio: string }) => (\n  <a className={styles.watermark} href=\"https://stytch.com/\" target=\"_blank\" rel=\"noreferrer\">\n    <svg\n      className={styles.stytch}\n      width=\"20\"\n      height=\"20\"\n      viewBox=\"0 0 20 20\"\n      fill=\"none\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n    >\n      <path d=\"M9.28889 9.32076V1H5.97576V4.84842C5.97576 5.55095 5.37953 6.12046 4.64404 6.12046H2V9.32076H9.28889Z\" />\n      <path d=\"M10.7111 9.32076V1H14.0242V4.84842C14.0242 5.55095 14.6205 6.12046 15.356 6.12046H18V9.32076H10.7111Z\" />\n      <path d=\"M9.28889 10.6792V19H5.97576V15.1516C5.97576 14.449 5.37953 13.8795 4.64404 13.8795H2V10.6792H9.28889Z\" />\n      <path d=\"M10.7111 10.6792V19H14.0242V15.1516C14.0242 14.449 14.6205 13.8795 15.356 13.8795H18V10.6792H10.7111Z\" />\n    </svg>\n\n    <span>{label}</span>\n\n    <span>+</span>\n\n    <svg\n      className={styles.twilio}\n      xmlns=\"http://www.w3.org/2000/svg\"\n      width=\"68\"\n      height=\"20\"\n      fill=\"none\"\n      aria-label={twilio}\n    >\n      <g clipPath=\"url(#a)\">\n        <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\" />\n      </g>\n      <defs>\n        <clipPath id=\"a\">\n          <path fill=\"#fff\" d=\"M0 1.88h53.7v16.24H0z\" />\n        </clipPath>\n      </defs>\n    </svg>\n  </a>\n);\n\nexport default Watermark;\n"],"names":["Watermark","label","twilio","React","a","className","styles","watermark","href","target","rel","svg","stytch","width","height","viewBox","fill","xmlns","path","d","span","aria-label","g","clipPath","defs","id"],"mappings":";;;AAGA,MAAMA,SAAAA,GAAY,CAAC,EAAEC,KAAK,EAAEC,MAAM,EAAqC,iBACrEC,cAAA,CAAA,aAAA,CAACC,GAAAA,EAAAA;AAAEC,QAAAA,SAAAA,EAAWC,iBAAOC,SAAS;QAAEC,IAAAA,EAAK,qBAAA;QAAsBC,MAAAA,EAAO,QAAA;QAASC,GAAAA,EAAI;qBAC7EP,cAAA,CAAA,aAAA,CAACQ,KAAAA,EAAAA;AACCN,QAAAA,SAAAA,EAAWC,iBAAOM,MAAM;QACxBC,KAAAA,EAAM,IAAA;QACNC,MAAAA,EAAO,IAAA;QACPC,OAAAA,EAAQ,WAAA;QACRC,IAAAA,EAAK,MAAA;QACLC,KAAAA,EAAM;qBAENd,cAAA,CAAA,aAAA,CAACe,MAAAA,EAAAA;QAAKC,CAAAA,EAAE;sBACRhB,cAAA,CAAA,aAAA,CAACe,MAAAA,EAAAA;QAAKC,CAAAA,EAAE;sBACRhB,cAAA,CAAA,aAAA,CAACe,MAAAA,EAAAA;QAAKC,CAAAA,EAAE;sBACRhB,cAAA,CAAA,aAAA,CAACe,MAAAA,EAAAA;QAAKC,CAAAA,EAAE;AAGV,KAAA,CAAA,CAAA,gBAAAhB,cAAA,CAAA,aAAA,CAACiB,MAAAA,EAAAA,IAAAA,EAAMnB,KAAAA,CAAAA,gBAEPE,cAAA,CAAA,aAAA,CAACiB,MAAAA,EAAAA,IAAAA,EAAK,oBAENjB,cAAA,CAAA,aAAA,CAACQ,KAAAA,EAAAA;AACCN,QAAAA,SAAAA,EAAWC,iBAAOJ,MAAM;QACxBe,KAAAA,EAAM,4BAAA;QACNJ,KAAAA,EAAM,IAAA;QACNC,MAAAA,EAAO,IAAA;QACPE,IAAAA,EAAK,MAAA;QACLK,YAAAA,EAAYnB;qBAEZC,cAAA,CAAA,aAAA,CAACmB,GAAAA,EAAAA;QAAEC,QAAAA,EAAS;qBACVpB,cAAA,CAAA,aAAA,CAACe,MAAAA,EAAAA;QAAKC,CAAAA,EAAE;AAEV,KAAA,CAAA,CAAA,gBAAAhB,cAAA,CAAA,aAAA,CAACqB,4BACCrB,cAAA,CAAA,aAAA,CAACoB,UAAAA,EAAAA;QAASE,EAAAA,EAAG;qBACXtB,cAAA,CAAA,aAAA,CAACe,MAAAA,EAAAA;QAAKF,IAAAA,EAAK,MAAA;QAAOG,CAAAA,EAAE;;;;;"}
+{"version":3,"file":"Watermark.mjs","sources":["../../../../../../../../../web/src/ui/components/atoms/Watermark.tsx"],"sourcesContent":["import React from 'react';\nimport styles from './Watermark.module.css';\n\nconst Watermark = ({ label, logoText }: { label: string; logoText: string }) => (\n  <a className={styles.watermark} href=\"https://stytch.com/\" target=\"_blank\" rel=\"noreferrer\">\n    <span>{label} </span>\n    <svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 261 40\" aria-label={logoText} height=\"25px\">\n      <path\n        className={styles.stytch}\n        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\"\n      />\n      <path fill=\"currentColor\" d=\"M112.37 25.42v-4.1h-4.1V19h4.1v-4.12h2.47V19h4.07v2.3h-4.07v4.11h-2.47Z\" />\n      <g clipPath=\"url(#a)\">\n        <path\n          className={styles.twilio}\n          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\"\n        />\n      </g>\n      <defs>\n        <clipPath id=\"a\">\n          <path fill=\"#fff\" d=\"M135.18 2.54h115.44v34.91H135.18z\" />\n        </clipPath>\n      </defs>\n    </svg>\n  </a>\n);\n\nexport default Watermark;\n"],"names":["Watermark","label","logoText","React","a","className","styles","watermark","href","target","rel","span","svg","xmlns","fill","viewBox","aria-label","height","path","stytch","d","g","clipPath","twilio","defs","id"],"mappings":";;;AAGA,MAAMA,SAAAA,GAAY,CAAC,EAAEC,KAAK,EAAEC,QAAQ,EAAuC,iBACzEC,cAAA,CAAA,aAAA,CAACC,GAAAA,EAAAA;AAAEC,QAAAA,SAAAA,EAAWC,iBAAOC,SAAS;QAAEC,IAAAA,EAAK,qBAAA;QAAsBC,MAAAA,EAAO,QAAA;QAASC,GAAAA,EAAI;qBAC7EP,cAAA,CAAA,aAAA,CAACQ,MAAAA,EAAAA,IAAAA,EAAMV,KAAAA,EAAM,GAAA,CAAA,gBACbE,cAAA,CAAA,aAAA,CAACS,KAAAA,EAAAA;QAAIC,KAAAA,EAAM,4BAAA;QAA6BC,IAAAA,EAAK,MAAA;QAAOC,OAAAA,EAAQ,YAAA;QAAaC,YAAAA,EAAYd,QAAAA;QAAUe,MAAAA,EAAO;qBACpGd,cAAA,CAAA,aAAA,CAACe,MAAAA,EAAAA;AACCb,QAAAA,SAAAA,EAAWC,iBAAOa,MAAM;QACxBC,CAAAA,EAAE;sBAEJjB,cAAA,CAAA,aAAA,CAACe,MAAAA,EAAAA;QAAKJ,IAAAA,EAAK,cAAA;QAAeM,CAAAA,EAAE;sBAC5BjB,cAAA,CAAA,aAAA,CAACkB,GAAAA,EAAAA;QAAEC,QAAAA,EAAS;qBACVnB,cAAA,CAAA,aAAA,CAACe,MAAAA,EAAAA;AACCb,QAAAA,SAAAA,EAAWC,iBAAOiB,MAAM;QACxBH,CAAAA,EAAE;AAGN,KAAA,CAAA,CAAA,gBAAAjB,cAAA,CAAA,aAAA,CAACqB,4BACCrB,cAAA,CAAA,aAAA,CAACmB,UAAAA,EAAAA;QAASG,EAAAA,EAAG;qBACXtB,cAAA,CAAA,aAAA,CAACe,MAAAA,EAAAA;QAAKJ,IAAAA,EAAK,MAAA;QAAOM,CAAAA,EAAE;;;;;"}

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

@@ -1,8 +1,8 @@
 import { collectCss } from '../../../../../../internal/style-injector/src/index.mjs';
 
-var css = ".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 = ".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);
-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"};
 
 export { css, modules_b8928cee as default };
 //# sourceMappingURL=Watermark.module.css.mjs.map

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

@@ -1,7 +1,7 @@
 import React__default from 'react';
 import Typography from '../atoms/Typography.mjs';
 import modules_35eb8564 from './Badge.module.css.mjs';
-import classNames from '../../../../../../_virtual/index3.mjs';
+import classNames from '../../../../../../_virtual/index.mjs';
 
 const Badge = ({ className, children })=>/*#__PURE__*/ React__default.createElement("div", {
         className: classNames(modules_35eb8564.badge, className)

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

@@ -16,7 +16,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,

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

@@ -1 +1 @@
-{"version":3,"file":"EmailInput.mjs","sources":["../../../../../../../../../web/src/ui/components/molecules/EmailInput.tsx"],"sourcesContent":["import React from 'react';\nimport { useLingui } from '@lingui/react/macro';\nimport { passwordManagerDisableAutofillProps } from '../../../utils/passwordManagerDisableAutofillProps';\nimport Input from './Input';\n\nconst EmailInput = ({\n  email,\n  setEmail,\n  hasPasskeys = false,\n  ...additionalProps\n}: {\n  email: string;\n  setEmail: (email: string) => void;\n  hasPasskeys?: boolean;\n\n  // Passed through\n  hideLabel?: boolean;\n  disabled?: boolean;\n  error?: string;\n}) => {\n  const { t } = useLingui();\n  return (\n    <Input\n      id=\"email\"\n      label={t({ id: 'formField.email.label', message: 'Email' })}\n      placeholder={t({ id: 'formField.email.placeholder', message: 'example@email.com' })}\n      type=\"email\"\n      autoComplete={hasPasskeys ? 'username webauthn' : 'email username'}\n      value={email}\n      onChange={(e) => setEmail(e.target.value)}\n      required\n      // We want to block 1PW's autofill when passkeys is enabled for now\n      // (it is breaking to our integration)\n      {...(hasPasskeys ? passwordManagerDisableAutofillProps : {})}\n      {...additionalProps}\n    />\n  );\n};\n\nexport default EmailInput;\n"],"names":["EmailInput","email","setEmail","hasPasskeys","additionalProps","useLingui","React","Input","id","label","placeholder","type","autoComplete","value","onChange","e","target","required","passwordManagerDisableAutofillProps"],"mappings":";;;;;AAKA,MAAMA,UAAAA,GAAa,CAAC,EAClBC,KAAK,EACLC,QAAQ,EACRC,WAAAA,GAAc,KAAK,EACnB,GAAGC,eAAAA,EAUJ,GAAA;AACC,IAAA,MAAM,EAAA,IAAA,EAAA,OAAA,EAAA,CAAA,EAAA,GAAA,EAAA,GAAQC,SAAAA,EAAAA;AACd,IAAA,qBACEC,cAAA,CAAA,aAAA,CAACC,KAAAA,EAAAA;QACCC,EAAAA,EAAG,OAAA;QACHC,KAAK,EAAA,OAAA,CAAA,CAAA,CAAA;;;;QACLC,WAAW,EAAA,OAAA,CAAA,CAAA,CAAA;;;;QACXC,IAAAA,EAAK,OAAA;AACLC,QAAAA,YAAAA,EAAcT,cAAc,mBAAA,GAAsB,gBAAA;QAClDU,KAAAA,EAAOZ,KAAAA;AACPa,QAAAA,QAAAA,EAAU,CAACC,CAAAA,GAAMb,QAAAA,CAASa,CAAAA,CAAEC,MAAM,CAACH,KAAK,CAAA;QACxCI,QAAAA,EAAAA,IAAAA;QAGC,GAAId,WAAAA,GAAce,mCAAAA,GAAsC,EAAE;AAC1D,QAAA,GAAGd;;AAGV;;;;"}
+{"version":3,"file":"EmailInput.mjs","sources":["../../../../../../../../../web/src/ui/components/molecules/EmailInput.tsx"],"sourcesContent":["import React from 'react';\nimport { useLingui } from '@lingui/react/macro';\nimport { passwordManagerDisableAutofillProps } from '../../../utils/passwordManagerDisableAutofillProps';\nimport Input from './Input';\n\nconst EmailInput = ({\n  email,\n  setEmail,\n  hasPasskeys = false,\n  ...additionalProps\n}: {\n  email: string;\n  setEmail: (email: string) => void;\n  hasPasskeys?: boolean;\n\n  // Passed through\n  hideLabel?: boolean;\n  disabled?: boolean;\n  error?: string;\n}) => {\n  const { t } = useLingui();\n  return (\n    <Input\n      id=\"email\"\n      label={t({ id: 'formField.email.label', message: 'Email' })}\n      placeholder={t({ id: 'formField.email.placeholder', message: 'example@email.com' })}\n      type=\"email\"\n      autoComplete={hasPasskeys ? 'username webauthn' : 'email'}\n      value={email}\n      onChange={(e) => setEmail(e.target.value)}\n      required\n      // We want to block 1PW's autofill when passkeys is enabled for now\n      // (it is breaking to our integration)\n      {...(hasPasskeys ? passwordManagerDisableAutofillProps : {})}\n      {...additionalProps}\n    />\n  );\n};\n\nexport default EmailInput;\n"],"names":["EmailInput","email","setEmail","hasPasskeys","additionalProps","useLingui","React","Input","id","label","placeholder","type","autoComplete","value","onChange","e","target","required","passwordManagerDisableAutofillProps"],"mappings":";;;;;AAKA,MAAMA,UAAAA,GAAa,CAAC,EAClBC,KAAK,EACLC,QAAQ,EACRC,WAAAA,GAAc,KAAK,EACnB,GAAGC,eAAAA,EAUJ,GAAA;AACC,IAAA,MAAM,EAAA,IAAA,EAAA,OAAA,EAAA,CAAA,EAAA,GAAA,EAAA,GAAQC,SAAAA,EAAAA;AACd,IAAA,qBACEC,cAAA,CAAA,aAAA,CAACC,KAAAA,EAAAA;QACCC,EAAAA,EAAG,OAAA;QACHC,KAAK,EAAA,OAAA,CAAA,CAAA,CAAA;;;;QACLC,WAAW,EAAA,OAAA,CAAA,CAAA,CAAA;;;;QACXC,IAAAA,EAAK,OAAA;AACLC,QAAAA,YAAAA,EAAcT,cAAc,mBAAA,GAAsB,OAAA;QAClDU,KAAAA,EAAOZ,KAAAA;AACPa,QAAAA,QAAAA,EAAU,CAACC,CAAAA,GAAMb,QAAAA,CAASa,CAAAA,CAAEC,MAAM,CAACH,KAAK,CAAA;QACxCI,QAAAA,EAAAA,IAAAA;QAGC,GAAId,WAAAA,GAAce,mCAAAA,GAAsC,EAAE;AAC1D,QAAA,GAAGd;;AAGV;;;;"}

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

@@ -1,5 +1,6 @@
-import React__default, { useMemo } from 'react';
+import React__default, { useMemo, useState } from 'react';
 import Typography from '../atoms/Typography.mjs';
+import { useMountEffect } from '../../hooks/useMountEffect.mjs';
 
 const DASHBOARD_REGEX = /https:\/\/stytch\.com\/[#a-zA-Z0-9/-]+/g;
 const mapURLsToLinks = (str)=>{
@@ -26,11 +27,18 @@ const ErrorText = ({ children, ...props })=>{
     const tokens = useMemo(()=>mapURLsToLinks(children), [
         children
     ]);
-    return /*#__PURE__*/ React__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] = useState(false);
+    useMountEffect(()=>setRender(true));
+    return /*#__PURE__*/ React__default.createElement("div", {
+        "aria-live": "polite"
+    }, render && /*#__PURE__*/ React__default.createElement(Typography, {
         ...props,
         variant: "helper",
-        color: "destructive"
-    }, tokens);
+        color: "destructive",
+        key: children
+    }, tokens));
 };
 
 export { ErrorText as default };

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

@@ -1 +1 @@
-{"version":3,"file":"ErrorText.mjs","sources":["../../../../../../../../../web/src/ui/components/molecules/ErrorText.tsx"],"sourcesContent":["import React, { HTMLAttributes, ReactNode, useMemo } from 'react';\nimport Typography from '../atoms/Typography';\n\nconst DASHBOARD_REGEX = /https:\\/\\/stytch\\.com\\/[#a-zA-Z0-9/-]+/g;\n\nconst mapURLsToLinks = (str: string) => {\n  const nonLinkChunks = str.split(DASHBOARD_REGEX);\n  const linkChunks = Array.from(str.matchAll(DASHBOARD_REGEX)).map((el) => el[0]);\n\n  const chunkResults: ReactNode[] = [];\n\n  while (nonLinkChunks.length || linkChunks.length) {\n    if (nonLinkChunks.length) {\n      chunkResults.push(nonLinkChunks.shift());\n    }\n    if (linkChunks.length) {\n      const chunk = linkChunks.shift();\n\n      chunkResults.push(\n        <a key={chunk + '__' + String(linkChunks.length)} href={chunk} target=\"_blank\" rel=\"noreferrer\">\n          {chunk}\n        </a>,\n      );\n    }\n  }\n\n  return chunkResults;\n};\n\ntype ErrorTextProps = Omit<HTMLAttributes<HTMLDivElement>, 'children'> & { children: string };\n\nconst ErrorText = ({ children, ...props }: ErrorTextProps) => {\n  const tokens = useMemo(() => mapURLsToLinks(children), [children]);\n  return (\n    <Typography {...props} variant=\"helper\" color=\"destructive\">\n      {tokens}\n    </Typography>\n  );\n};\n\nexport default ErrorText;\n"],"names":["DASHBOARD_REGEX","mapURLsToLinks","str","nonLinkChunks","split","linkChunks","Array","from","matchAll","map","el","chunkResults","length","push","shift","chunk","React","a","key","String","href","target","rel","ErrorText","children","props","tokens","useMemo","Typography","variant","color"],"mappings":";;;AAGA,MAAMA,eAAAA,GAAkB,yCAAA;AAExB,MAAMC,iBAAiB,CAACC,GAAAA,GAAAA;IACtB,MAAMC,aAAAA,GAAgBD,GAAAA,CAAIE,KAAK,CAACJ,eAAAA,CAAAA;AAChC,IAAA,MAAMK,UAAAA,GAAaC,KAAAA,CAAMC,IAAI,CAACL,IAAIM,QAAQ,CAACR,eAAAA,CAAAA,CAAAA,CAAkBS,GAAG,CAAC,CAACC,EAAAA,GAAOA,EAAE,CAAC,CAAA,CAAE,CAAA;AAE9E,IAAA,MAAMC,eAA4B,EAAE;AAEpC,IAAA,MAAOR,aAAAA,CAAcS,MAAM,IAAIP,UAAAA,CAAWO,MAAM,CAAE;QAChD,IAAIT,aAAAA,CAAcS,MAAM,EAAE;YACxBD,YAAAA,CAAaE,IAAI,CAACV,aAAAA,CAAcW,KAAK,EAAA,CAAA;AACvC,QAAA;QACA,IAAIT,UAAAA,CAAWO,MAAM,EAAE;YACrB,MAAMG,KAAAA,GAAQV,WAAWS,KAAK,EAAA;YAE9BH,YAAAA,CAAaE,IAAI,eACfG,cAAA,CAAA,aAAA,CAACC,GAAAA,EAAAA;AAAEC,gBAAAA,GAAAA,EAAKH,KAAAA,GAAQ,IAAA,GAAOI,MAAAA,CAAOd,UAAAA,CAAWO,MAAM,CAAA;gBAAGQ,IAAAA,EAAML,KAAAA;gBAAOM,MAAAA,EAAO,QAAA;gBAASC,GAAAA,EAAI;AAChFP,aAAAA,EAAAA,KAAAA,CAAAA,CAAAA;AAGP,QAAA;AACF,IAAA;IAEA,OAAOJ,YAAAA;AACT,CAAA;AAIA,MAAMY,YAAY,CAAC,EAAEC,QAAQ,EAAE,GAAGC,KAAAA,EAAuB,GAAA;AACvD,IAAA,MAAMC,MAAAA,GAASC,OAAAA,CAAQ,IAAM1B,cAAAA,CAAeuB,QAAAA,CAAAA,EAAW;AAACA,QAAAA;AAAS,KAAA,CAAA;AACjE,IAAA,qBACER,cAAA,CAAA,aAAA,CAACY,UAAAA,EAAAA;AAAY,QAAA,GAAGH,KAAK;QAAEI,OAAAA,EAAQ,QAAA;QAASC,KAAAA,EAAM;AAC3CJ,KAAAA,EAAAA,MAAAA,CAAAA;AAGP;;;;"}
+{"version":3,"file":"ErrorText.mjs","sources":["../../../../../../../../../web/src/ui/components/molecules/ErrorText.tsx"],"sourcesContent":["import React, { HTMLAttributes, ReactNode, useMemo, useState } from 'react';\nimport Typography from '../atoms/Typography';\nimport { useMountEffect } from '../../hooks/useMountEffect';\n\nconst DASHBOARD_REGEX = /https:\\/\\/stytch\\.com\\/[#a-zA-Z0-9/-]+/g;\n\nconst mapURLsToLinks = (str: string) => {\n  const nonLinkChunks = str.split(DASHBOARD_REGEX);\n  const linkChunks = Array.from(str.matchAll(DASHBOARD_REGEX)).map((el) => el[0]);\n\n  const chunkResults: ReactNode[] = [];\n\n  while (nonLinkChunks.length || linkChunks.length) {\n    if (nonLinkChunks.length) {\n      chunkResults.push(nonLinkChunks.shift());\n    }\n    if (linkChunks.length) {\n      const chunk = linkChunks.shift();\n\n      chunkResults.push(\n        <a key={chunk + '__' + String(linkChunks.length)} href={chunk} target=\"_blank\" rel=\"noreferrer\">\n          {chunk}\n        </a>,\n      );\n    }\n  }\n\n  return chunkResults;\n};\n\ntype ErrorTextProps = Omit<HTMLAttributes<HTMLDivElement>, 'children'> & { children: string };\n\nconst ErrorText = ({ children, ...props }: ErrorTextProps) => {\n  const tokens = useMemo(() => mapURLsToLinks(children), [children]);\n\n  // HACK: Screen readers only read elements in aria-live regions if they are new or changed. We first render the\n  // aria-live div, then render the inner children second so the error message is \"new\" and therefore read out\n  const [render, setRender] = useState(false);\n  useMountEffect(() => setRender(true));\n\n  return (\n    <div aria-live=\"polite\">\n      {render && (\n        <Typography {...props} variant=\"helper\" color=\"destructive\" key={children}>\n          {tokens}\n        </Typography>\n      )}\n    </div>\n  );\n};\n\nexport default ErrorText;\n"],"names":["DASHBOARD_REGEX","mapURLsToLinks","str","nonLinkChunks","split","linkChunks","Array","from","matchAll","map","el","chunkResults","length","push","shift","chunk","React","a","key","String","href","target","rel","ErrorText","children","props","tokens","useMemo","render","setRender","useState","useMountEffect","div","aria-live","Typography","variant","color"],"mappings":";;;;AAIA,MAAMA,eAAAA,GAAkB,yCAAA;AAExB,MAAMC,iBAAiB,CAACC,GAAAA,GAAAA;IACtB,MAAMC,aAAAA,GAAgBD,GAAAA,CAAIE,KAAK,CAACJ,eAAAA,CAAAA;AAChC,IAAA,MAAMK,UAAAA,GAAaC,KAAAA,CAAMC,IAAI,CAACL,IAAIM,QAAQ,CAACR,eAAAA,CAAAA,CAAAA,CAAkBS,GAAG,CAAC,CAACC,EAAAA,GAAOA,EAAE,CAAC,CAAA,CAAE,CAAA;AAE9E,IAAA,MAAMC,eAA4B,EAAE;AAEpC,IAAA,MAAOR,aAAAA,CAAcS,MAAM,IAAIP,UAAAA,CAAWO,MAAM,CAAE;QAChD,IAAIT,aAAAA,CAAcS,MAAM,EAAE;YACxBD,YAAAA,CAAaE,IAAI,CAACV,aAAAA,CAAcW,KAAK,EAAA,CAAA;AACvC,QAAA;QACA,IAAIT,UAAAA,CAAWO,MAAM,EAAE;YACrB,MAAMG,KAAAA,GAAQV,WAAWS,KAAK,EAAA;YAE9BH,YAAAA,CAAaE,IAAI,eACfG,cAAA,CAAA,aAAA,CAACC,GAAAA,EAAAA;AAAEC,gBAAAA,GAAAA,EAAKH,KAAAA,GAAQ,IAAA,GAAOI,MAAAA,CAAOd,UAAAA,CAAWO,MAAM,CAAA;gBAAGQ,IAAAA,EAAML,KAAAA;gBAAOM,MAAAA,EAAO,QAAA;gBAASC,GAAAA,EAAI;AAChFP,aAAAA,EAAAA,KAAAA,CAAAA,CAAAA;AAGP,QAAA;AACF,IAAA;IAEA,OAAOJ,YAAAA;AACT,CAAA;AAIA,MAAMY,YAAY,CAAC,EAAEC,QAAQ,EAAE,GAAGC,KAAAA,EAAuB,GAAA;AACvD,IAAA,MAAMC,MAAAA,GAASC,OAAAA,CAAQ,IAAM1B,cAAAA,CAAeuB,QAAAA,CAAAA,EAAW;AAACA,QAAAA;AAAS,KAAA,CAAA;;;AAIjE,IAAA,MAAM,CAACI,MAAAA,EAAQC,SAAAA,CAAU,GAAGC,QAAAA,CAAS,KAAA,CAAA;AACrCC,IAAAA,cAAAA,CAAe,IAAMF,SAAAA,CAAU,IAAA,CAAA,CAAA;AAE/B,IAAA,qBACEb,cAAA,CAAA,aAAA,CAACgB,KAAAA,EAAAA;QAAIC,WAAAA,EAAU;AACZL,KAAAA,EAAAA,MAAAA,kBACCZ,cAAA,CAAA,aAAA,CAACkB,UAAAA,EAAAA;AAAY,QAAA,GAAGT,KAAK;QAAEU,OAAAA,EAAQ,QAAA;QAASC,KAAAA,EAAM,aAAA;QAAclB,GAAAA,EAAKM;AAC9DE,KAAAA,EAAAA,MAAAA,CAAAA,CAAAA;AAKX;;;;"}

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

@@ -1,5 +1,5 @@
 import React__default, { forwardRef, useRef, useState, useLayoutEffect } from 'react';
-import classNames from '../../../../../../_virtual/index3.mjs';
+import classNames from '../../../../../../_virtual/index.mjs';
 import { useUniqueId } from '../../../utils/uniqueId.mjs';
 import ErrorText from './ErrorText.mjs';
 import VisuallyHidden from '../atoms/VisuallyHidden.mjs';
@@ -52,7 +52,8 @@ import { usePresentation } from '../PresentationConfig.mjs';
         className: modules_d963aab3.action
     }, action)), error && /*#__PURE__*/ React__default.createElement(ErrorText, {
         id: errorId,
-        className: modules_d963aab3.error
+        className: modules_d963aab3.error,
+        "aria-live": "polite"
     }, error));
 });
 

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

@@ -1 +1 @@
-{"version":3,"file":"Input.mjs","sources":["../../../../../../../../../web/src/ui/components/molecules/Input.tsx"],"sourcesContent":["import React, { forwardRef, InputHTMLAttributes, ReactNode, useLayoutEffect, useRef, useState } from 'react';\nimport classNames from 'classnames';\nimport { useUniqueId } from '../../../utils/uniqueId';\nimport ErrorText from './ErrorText';\nimport VisuallyHidden from '../atoms/VisuallyHidden';\nimport styles from './Input.module.css';\nimport { usePresentation } from '../PresentationConfig';\n\nexport type InputProps = InputHTMLAttributes<HTMLInputElement> & {\n  label: string;\n  id: string;\n  containerClassName?: string;\n  hideLabel?: boolean;\n  action?: ReactNode;\n  error?: string;\n};\n\n/**\n * Generic low level text Input element\n * A label must be provided for accessibility, but can be hidden using the `hideLabel` prop\n * You may want to use a more specific component in /molecules instead like {@link EmailInput}, {@link PasswordInput}\n */\nconst Input = forwardRef<HTMLInputElement, InputProps>(\n  ({ className, label: labelText, hideLabel, action, id: idProp, containerClassName, error, ...props }, ref) => {\n    const presentation = usePresentation();\n    const id = idProp + (presentation.options?.inputIdSuffix || '');\n\n    const errorId = useUniqueId();\n\n    // Calculate the width of the action element and add it to the input padding so the input content\n    // cannot go behind the action\n    const actionRef = useRef<HTMLDivElement>(null);\n    const [actionWidth, setActionWidth] = useState<number>();\n    useLayoutEffect(() => {\n      if (actionRef.current) {\n        // getBoundingClientRect accounts for transformations while clientWidth does not\n        setActionWidth(actionRef.current.getBoundingClientRect().width);\n      }\n    }, [action]);\n\n    const label = (\n      <label className={styles.label} htmlFor={id}>\n        {labelText}\n      </label>\n    );\n\n    if (error) {\n      props['aria-invalid'] = true;\n      props['aria-errormessage'] = errorId;\n    }\n\n    return (\n      <div className={classNames(containerClassName, styles.container)}>\n        {hideLabel ? <VisuallyHidden>{label}</VisuallyHidden> : label}\n\n        <div className={styles.inputWrapper}>\n          <input\n            ref={ref}\n            id={id}\n            className={classNames(className, styles.input)}\n            style={\n              actionWidth\n                ? {\n                    // spacing-4 because action has a 2 unit horizontal margin\n                    paddingInlineEnd: `calc(${actionWidth}px + var(--st-spacing-4))`,\n                  }\n                : undefined\n            }\n            {...props}\n          />\n          {action && (\n            <div ref={actionRef} className={styles.action}>\n              {action}\n            </div>\n          )}\n        </div>\n\n        {error && (\n          <ErrorText id={errorId} className={styles.error}>\n            {error}\n          </ErrorText>\n        )}\n      </div>\n    );\n  },\n);\n\nexport default Input;\n"],"names":["Input","forwardRef","className","label","labelText","hideLabel","action","id","idProp","containerClassName","error","props","ref","presentation","usePresentation","options","inputIdSuffix","errorId","useUniqueId","actionRef","useRef","actionWidth","setActionWidth","useState","useLayoutEffect","current","getBoundingClientRect","width","React","styles","htmlFor","div","classNames","container","VisuallyHidden","inputWrapper","input","style","paddingInlineEnd","undefined","ErrorText"],"mappings":";;;;;;;;AAiBA;;;;IAKA,MAAMA,sBAAQC,UAAAA,CACZ,CAAC,EAAEC,SAAS,EAAEC,KAAAA,EAAOC,SAAS,EAAEC,SAAS,EAAEC,MAAM,EAAEC,EAAAA,EAAIC,MAAM,EAAEC,kBAAkB,EAAEC,KAAK,EAAE,GAAGC,KAAAA,EAAO,EAAEC,GAAAA,GAAAA;AACpG,IAAA,MAAMC,YAAAA,GAAeC,eAAAA,EAAAA;AACrB,IAAA,MAAMP,KAAKC,MAAAA,IAAUK,aAAaE,OAAO,EAAEC,iBAAiB,EAAC,CAAA;AAE7D,IAAA,MAAMC,OAAAA,GAAUC,WAAAA,EAAAA;;;AAIhB,IAAA,MAAMC,YAAYC,MAAAA,CAAuB,IAAA,CAAA;IACzC,MAAM,CAACC,WAAAA,EAAaC,cAAAA,CAAe,GAAGC,QAAAA,EAAAA;IACtCC,eAAAA,CAAgB,IAAA;QACd,IAAIL,SAAAA,CAAUM,OAAO,EAAE;;AAErBH,YAAAA,cAAAA,CAAeH,SAAAA,CAAUM,OAAO,CAACC,qBAAqB,GAAGC,KAAK,CAAA;AAChE,QAAA;IACF,CAAA,EAAG;AAACrB,QAAAA;AAAO,KAAA,CAAA;AAEX,IAAA,MAAMH,sBACJyB,cAAA,CAAA,aAAA,CAACzB,OAAAA,EAAAA;AAAMD,QAAAA,SAAAA,EAAW2B,iBAAO1B,KAAK;QAAE2B,OAAAA,EAASvB;AACtCH,KAAAA,EAAAA,SAAAA,CAAAA;AAIL,IAAA,IAAIM,KAAAA,EAAO;QACTC,KAAK,CAAC,eAAe,GAAG,IAAA;QACxBA,KAAK,CAAC,oBAAoB,GAAGM,OAAAA;AAC/B,IAAA;AAEA,IAAA,qBACEW,cAAA,CAAA,aAAA,CAACG,KAAAA,EAAAA;QAAI7B,SAAAA,EAAW8B,UAAAA,CAAWvB,kBAAAA,EAAoBoB,gBAAAA,CAAOI,SAAS;AAC5D5B,KAAAA,EAAAA,SAAAA,iBAAYuB,cAAA,CAAA,aAAA,CAACM,cAAAA,EAAAA,IAAAA,EAAgB/B,KAAAA,CAAAA,GAA0BA,KAAAA,gBAExDyB,cAAA,CAAA,aAAA,CAACG,KAAAA,EAAAA;AAAI7B,QAAAA,SAAAA,EAAW2B,iBAAOM;qBACrBP,cAAA,CAAA,aAAA,CAACQ,OAAAA,EAAAA;QACCxB,GAAAA,EAAKA,GAAAA;QACLL,EAAAA,EAAIA,EAAAA;QACJL,SAAAA,EAAW8B,UAAAA,CAAW9B,SAAAA,EAAW2B,gBAAAA,CAAOO,KAAK,CAAA;AAC7CC,QAAAA,KAAAA,EACEhB,WAAAA,GACI;;AAEEiB,YAAAA,gBAAAA,EAAkB,CAAC,KAAK,EAAEjB,WAAAA,CAAY,yBAAyB;SACjE,GACAkB,SAAAA;AAEL,QAAA,GAAG5B;AAELL,KAAAA,CAAAA,EAAAA,MAAAA,kBACCsB,cAAA,CAAA,aAAA,CAACG,KAAAA,EAAAA;QAAInB,GAAAA,EAAKO,SAAAA;AAAWjB,QAAAA,SAAAA,EAAW2B,iBAAOvB;AACpCA,KAAAA,EAAAA,MAAAA,CAAAA,CAAAA,EAKNI,uBACCkB,cAAA,CAAA,aAAA,CAACY,SAAAA,EAAAA;QAAUjC,EAAAA,EAAIU,OAAAA;AAASf,QAAAA,SAAAA,EAAW2B,iBAAOnB;AACvCA,KAAAA,EAAAA,KAAAA,CAAAA,CAAAA;AAKX,CAAA;;;;"}
+{"version":3,"file":"Input.mjs","sources":["../../../../../../../../../web/src/ui/components/molecules/Input.tsx"],"sourcesContent":["import React, { forwardRef, InputHTMLAttributes, ReactNode, useLayoutEffect, useRef, useState } from 'react';\nimport classNames from 'classnames';\nimport { useUniqueId } from '../../../utils/uniqueId';\nimport ErrorText from './ErrorText';\nimport VisuallyHidden from '../atoms/VisuallyHidden';\nimport styles from './Input.module.css';\nimport { usePresentation } from '../PresentationConfig';\n\nexport type InputProps = InputHTMLAttributes<HTMLInputElement> & {\n  label: string;\n  id: string;\n  containerClassName?: string;\n  hideLabel?: boolean;\n  action?: ReactNode;\n  error?: string;\n};\n\n/**\n * Generic low level text Input element\n * A label must be provided for accessibility, but can be hidden using the `hideLabel` prop\n * You may want to use a more specific component in /molecules instead like {@link EmailInput}, {@link PasswordInput}\n */\nconst Input = forwardRef<HTMLInputElement, InputProps>(\n  ({ className, label: labelText, hideLabel, action, id: idProp, containerClassName, error, ...props }, ref) => {\n    const presentation = usePresentation();\n    const id = idProp + (presentation.options?.inputIdSuffix || '');\n\n    const errorId = useUniqueId();\n\n    // Calculate the width of the action element and add it to the input padding so the input content\n    // cannot go behind the action\n    const actionRef = useRef<HTMLDivElement>(null);\n    const [actionWidth, setActionWidth] = useState<number>();\n    useLayoutEffect(() => {\n      if (actionRef.current) {\n        // getBoundingClientRect accounts for transformations while clientWidth does not\n        setActionWidth(actionRef.current.getBoundingClientRect().width);\n      }\n    }, [action]);\n\n    const label = (\n      <label className={styles.label} htmlFor={id}>\n        {labelText}\n      </label>\n    );\n\n    if (error) {\n      props['aria-invalid'] = true;\n      props['aria-errormessage'] = errorId;\n    }\n\n    return (\n      <div className={classNames(containerClassName, styles.container)}>\n        {hideLabel ? <VisuallyHidden>{label}</VisuallyHidden> : label}\n\n        <div className={styles.inputWrapper}>\n          <input\n            ref={ref}\n            id={id}\n            className={classNames(className, styles.input)}\n            style={\n              actionWidth\n                ? {\n                    // spacing-4 because action has a 2 unit horizontal margin\n                    paddingInlineEnd: `calc(${actionWidth}px + var(--st-spacing-4))`,\n                  }\n                : undefined\n            }\n            {...props}\n          />\n          {action && (\n            <div ref={actionRef} className={styles.action}>\n              {action}\n            </div>\n          )}\n        </div>\n\n        {error && (\n          <ErrorText id={errorId} className={styles.error} aria-live=\"polite\">\n            {error}\n          </ErrorText>\n        )}\n      </div>\n    );\n  },\n);\n\nexport default Input;\n"],"names":["Input","forwardRef","className","label","labelText","hideLabel","action","id","idProp","containerClassName","error","props","ref","presentation","usePresentation","options","inputIdSuffix","errorId","useUniqueId","actionRef","useRef","actionWidth","setActionWidth","useState","useLayoutEffect","current","getBoundingClientRect","width","React","styles","htmlFor","div","classNames","container","VisuallyHidden","inputWrapper","input","style","paddingInlineEnd","undefined","ErrorText","aria-live"],"mappings":";;;;;;;;AAiBA;;;;IAKA,MAAMA,sBAAQC,UAAAA,CACZ,CAAC,EAAEC,SAAS,EAAEC,KAAAA,EAAOC,SAAS,EAAEC,SAAS,EAAEC,MAAM,EAAEC,EAAAA,EAAIC,MAAM,EAAEC,kBAAkB,EAAEC,KAAK,EAAE,GAAGC,KAAAA,EAAO,EAAEC,GAAAA,GAAAA;AACpG,IAAA,MAAMC,YAAAA,GAAeC,eAAAA,EAAAA;AACrB,IAAA,MAAMP,KAAKC,MAAAA,IAAUK,aAAaE,OAAO,EAAEC,iBAAiB,EAAC,CAAA;AAE7D,IAAA,MAAMC,OAAAA,GAAUC,WAAAA,EAAAA;;;AAIhB,IAAA,MAAMC,YAAYC,MAAAA,CAAuB,IAAA,CAAA;IACzC,MAAM,CAACC,WAAAA,EAAaC,cAAAA,CAAe,GAAGC,QAAAA,EAAAA;IACtCC,eAAAA,CAAgB,IAAA;QACd,IAAIL,SAAAA,CAAUM,OAAO,EAAE;;AAErBH,YAAAA,cAAAA,CAAeH,SAAAA,CAAUM,OAAO,CAACC,qBAAqB,GAAGC,KAAK,CAAA;AAChE,QAAA;IACF,CAAA,EAAG;AAACrB,QAAAA;AAAO,KAAA,CAAA;AAEX,IAAA,MAAMH,sBACJyB,cAAA,CAAA,aAAA,CAACzB,OAAAA,EAAAA;AAAMD,QAAAA,SAAAA,EAAW2B,iBAAO1B,KAAK;QAAE2B,OAAAA,EAASvB;AACtCH,KAAAA,EAAAA,SAAAA,CAAAA;AAIL,IAAA,IAAIM,KAAAA,EAAO;QACTC,KAAK,CAAC,eAAe,GAAG,IAAA;QACxBA,KAAK,CAAC,oBAAoB,GAAGM,OAAAA;AAC/B,IAAA;AAEA,IAAA,qBACEW,cAAA,CAAA,aAAA,CAACG,KAAAA,EAAAA;QAAI7B,SAAAA,EAAW8B,UAAAA,CAAWvB,kBAAAA,EAAoBoB,gBAAAA,CAAOI,SAAS;AAC5D5B,KAAAA,EAAAA,SAAAA,iBAAYuB,cAAA,CAAA,aAAA,CAACM,cAAAA,EAAAA,IAAAA,EAAgB/B,KAAAA,CAAAA,GAA0BA,KAAAA,gBAExDyB,cAAA,CAAA,aAAA,CAACG,KAAAA,EAAAA;AAAI7B,QAAAA,SAAAA,EAAW2B,iBAAOM;qBACrBP,cAAA,CAAA,aAAA,CAACQ,OAAAA,EAAAA;QACCxB,GAAAA,EAAKA,GAAAA;QACLL,EAAAA,EAAIA,EAAAA;QACJL,SAAAA,EAAW8B,UAAAA,CAAW9B,SAAAA,EAAW2B,gBAAAA,CAAOO,KAAK,CAAA;AAC7CC,QAAAA,KAAAA,EACEhB,WAAAA,GACI;;AAEEiB,YAAAA,gBAAAA,EAAkB,CAAC,KAAK,EAAEjB,WAAAA,CAAY,yBAAyB;SACjE,GACAkB,SAAAA;AAEL,QAAA,GAAG5B;AAELL,KAAAA,CAAAA,EAAAA,MAAAA,kBACCsB,cAAA,CAAA,aAAA,CAACG,KAAAA,EAAAA;QAAInB,GAAAA,EAAKO,SAAAA;AAAWjB,QAAAA,SAAAA,EAAW2B,iBAAOvB;AACpCA,KAAAA,EAAAA,MAAAA,CAAAA,CAAAA,EAKNI,uBACCkB,cAAA,CAAA,aAAA,CAACY,SAAAA,EAAAA;QAAUjC,EAAAA,EAAIU,OAAAA;AAASf,QAAAA,SAAAA,EAAW2B,iBAAOnB,KAAK;QAAE+B,WAAAA,EAAU;AACxD/B,KAAAA,EAAAA,KAAAA,CAAAA,CAAAA;AAKX,CAAA;;;;"}

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

@@ -1,6 +1,6 @@
 import React__default, { useRef, useState, useEffect, useMemo } from 'react';
 import { useLingui } from '../../../../../../node_modules/@lingui/react/dist/index.mjs';
-import classNames from '../../../../../../_virtual/index3.mjs';
+import classNames from '../../../../../../_virtual/index.mjs';
 import Watermark from '../atoms/Watermark.mjs';
 import Column from '../atoms/Column.mjs';
 import { ToastContainer } from '../atoms/Toast.mjs';
@@ -23,12 +23,12 @@ const MainContainer = ({ children, displayWatermark, theme })=>{
         className: modules_852c89cd.watermarkContainer
     }, /*#__PURE__*/ React__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__default.createElement(ToastContainer, null));
 };

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

@@ -1 +1 @@
-{"version":3,"file":"MainContainer.mjs","sources":["../../../../../../../../../web/src/ui/components/molecules/MainContainer.tsx"],"sourcesContent":["import React, { CSSProperties, ReactNode, RefObject, useEffect, useMemo, useRef, useState } from 'react';\nimport { useLingui } from '@lingui/react/macro';\nimport classNames from 'classnames';\n\nimport Watermark from '../atoms/Watermark';\nimport Column from '../atoms/Column';\nimport { Theme } from '../themes/ThemeConfig';\nimport { ToastContainer } from '../atoms/Toast';\nimport { useMediaQuery } from '../../hooks/useMediaQuery';\n\n// This order is important - we need mixins to appear first so later styles can override them\nimport '../mixins';\nimport styles from './MainContainer.module.css';\n\nexport type MainContainerProps = {\n  children: ReactNode;\n  displayWatermark: boolean;\n  theme: Theme;\n};\n\nconst MainContainer = ({ children, displayWatermark, theme }: MainContainerProps) => {\n  const { t } = useLingui();\n\n  const ref = useRef<HTMLDivElement>(null);\n  const { className, style } = useRootStyles(theme, ref);\n\n  return (\n    <Column gap={6} style={style} className={classNames(styles.container, className)} ref={ref}>\n      {children}\n\n      {displayWatermark && (\n        <div className={styles.watermarkContainer}>\n          <Watermark\n            label={t({ id: 'watermark.altText', message: 'Powered by Stytch' })}\n            twilio={t({ id: 'watermark.twilio', message: 'Twilio' })}\n          />\n        </div>\n      )}\n\n      <ToastContainer />\n    </Column>\n  );\n};\n\nexport function useRootStyles(theme: Theme, ref: RefObject<HTMLDivElement>) {\n  const rawBreakpoint = theme['mobile-breakpoint'];\n\n  // Media queries don't play well with CSS custom properties, so as a workaround we parse var() expressions out of the\n  // breakpoint string and replace them with values resolved using getComputedStyle().\n  const [breakpoint, setBreakpoint] = useState(rawBreakpoint);\n  useEffect(() => {\n    setBreakpoint(parseCssVar(rawBreakpoint, ref.current));\n  }, [rawBreakpoint, ref]);\n\n  const isMobile = useMediaQuery(`(max-width: ${breakpoint})`);\n  const themeVariables = useMemo(() => themeToCssVariables(theme), [theme]);\n\n  return {\n    style: themeVariables,\n    className: classNames({ '-st-mobile': isMobile }),\n  };\n}\n\nexport function themeToCssVariables(theme: Theme) {\n  const { 'color-scheme': colorScheme, ...themeVariables } = theme;\n  const variables = Object.fromEntries(\n    // eslint-disable-next-line lingui/no-unlocalized-strings\n    Object.entries(themeVariables).map(([key, value]) => [`--st-${key}`, value]),\n  );\n\n  if (theme['color-scheme'] === 'shadcn') {\n    variables['--st-color-scheme'] = 'inherit';\n  } else {\n    variables['--st-color-scheme'] = colorScheme;\n    variables['--st-dark-mode'] = theme['color-scheme'] === 'dark' ? '1' : '0';\n  }\n\n  return variables as CSSProperties;\n}\n\nexport function parseCssVar(value: string, element: HTMLElement | null): string {\n  if (!element) return value;\n\n  // Ideally we would use CSSStyleValue.parse() instead of regex, but that's not currently well supported\n  // https://caniuse.com/mdn-api_cssstylevalue_parse_static\n  const replaced = value.replace(/var\\s*\\([^)]+\\)/gi, (r) => {\n    // r is going to be var(..., ...), so we use a similar regex with a capture group to match the stuff in the brackets\n    // variable should always exist but defaultValue may not\n    const [variable, defaultValue] = r\n      .match(/\\(([^)]+)\\)/)![1]\n      .split(',')\n      .map((s) => s.trim());\n    const propertyValue = window.getComputedStyle(element).getPropertyValue(variable);\n    return propertyValue || defaultValue || r;\n  });\n\n  return replaced === value ? replaced : parseCssVar(replaced, element);\n}\n\nexport default MainContainer;\n"],"names":["MainContainer","children","displayWatermark","theme","useLingui","ref","useRef","className","style","useRootStyles","React","Column","gap","classNames","styles","container","div","watermarkContainer","Watermark","label","twilio","ToastContainer","rawBreakpoint","breakpoint","setBreakpoint","useState","useEffect","parseCssVar","current","isMobile","useMediaQuery","themeVariables","useMemo","themeToCssVariables","colorScheme","variables","Object","fromEntries","entries","map","key","value","element","replaced","replace","r","variable","defaultValue","match","split","s","trim","propertyValue","window","getComputedStyle","getPropertyValue"],"mappings":"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"}
+{"version":3,"file":"MainContainer.mjs","sources":["../../../../../../../../../web/src/ui/components/molecules/MainContainer.tsx"],"sourcesContent":["import React, { CSSProperties, ReactNode, RefObject, useEffect, useMemo, useRef, useState } from 'react';\nimport { useLingui } from '@lingui/react/macro';\nimport classNames from 'classnames';\n\nimport Watermark from '../atoms/Watermark';\nimport Column from '../atoms/Column';\nimport { Theme } from '../themes/ThemeConfig';\nimport { ToastContainer } from '../atoms/Toast';\nimport { useMediaQuery } from '../../hooks/useMediaQuery';\n\n// This order is important - we need mixins to appear first so later styles can override them\nimport '../mixins';\nimport styles from './MainContainer.module.css';\n\nexport type MainContainerProps = {\n  children: ReactNode;\n  displayWatermark: boolean;\n  theme: Theme;\n};\n\nconst MainContainer = ({ children, displayWatermark, theme }: MainContainerProps) => {\n  const { t } = useLingui();\n\n  const ref = useRef<HTMLDivElement>(null);\n  const { className, style } = useRootStyles(theme, ref);\n\n  return (\n    <Column gap={6} style={style} className={classNames(styles.container, className)} ref={ref}>\n      {children}\n\n      {displayWatermark && (\n        <div className={styles.watermarkContainer}>\n          <Watermark\n            label={t({ id: 'watermark.poweredBy', message: 'Powered by' })}\n            logoText={t({ id: 'watermark.altText', message: 'Stytch + Twilio' })}\n          />\n        </div>\n      )}\n\n      <ToastContainer />\n    </Column>\n  );\n};\n\nexport function useRootStyles(theme: Theme, ref: RefObject<HTMLDivElement>) {\n  const rawBreakpoint = theme['mobile-breakpoint'];\n\n  // Media queries don't play well with CSS custom properties, so as a workaround we parse var() expressions out of the\n  // breakpoint string and replace them with values resolved using getComputedStyle().\n  const [breakpoint, setBreakpoint] = useState(rawBreakpoint);\n  useEffect(() => {\n    setBreakpoint(parseCssVar(rawBreakpoint, ref.current));\n  }, [rawBreakpoint, ref]);\n\n  const isMobile = useMediaQuery(`(max-width: ${breakpoint})`);\n  const themeVariables = useMemo(() => themeToCssVariables(theme), [theme]);\n\n  return {\n    style: themeVariables,\n    className: classNames({ '-st-mobile': isMobile }),\n  };\n}\n\nexport function themeToCssVariables(theme: Theme) {\n  const { 'color-scheme': colorScheme, ...themeVariables } = theme;\n  const variables = Object.fromEntries(\n    // eslint-disable-next-line lingui/no-unlocalized-strings\n    Object.entries(themeVariables).map(([key, value]) => [`--st-${key}`, value]),\n  );\n\n  if (theme['color-scheme'] === 'shadcn') {\n    variables['--st-color-scheme'] = 'inherit';\n  } else {\n    variables['--st-color-scheme'] = colorScheme;\n    variables['--st-dark-mode'] = theme['color-scheme'] === 'dark' ? '1' : '0';\n  }\n\n  return variables as CSSProperties;\n}\n\nexport function parseCssVar(value: string, element: HTMLElement | null): string {\n  if (!element) return value;\n\n  // Ideally we would use CSSStyleValue.parse() instead of regex, but that's not currently well supported\n  // https://caniuse.com/mdn-api_cssstylevalue_parse_static\n  const replaced = value.replace(/var\\s*\\([^)]+\\)/gi, (r) => {\n    // r is going to be var(..., ...), so we use a similar regex with a capture group to match the stuff in the brackets\n    // variable should always exist but defaultValue may not\n    const [variable, defaultValue] = r\n      .match(/\\(([^)]+)\\)/)![1]\n      .split(',')\n      .map((s) => s.trim());\n    const propertyValue = window.getComputedStyle(element).getPropertyValue(variable);\n    return propertyValue || defaultValue || r;\n  });\n\n  return replaced === value ? replaced : parseCssVar(replaced, element);\n}\n\nexport default MainContainer;\n"],"names":["MainContainer","children","displayWatermark","theme","useLingui","ref","useRef","className","style","useRootStyles","React","Column","gap","classNames","styles","container","div","watermarkContainer","Watermark","label","logoText","ToastContainer","rawBreakpoint","breakpoint","setBreakpoint","useState","useEffect","parseCssVar","current","isMobile","useMediaQuery","themeVariables","useMemo","themeToCssVariables","colorScheme","variables","Object","fromEntries","entries","map","key","value","element","replaced","replace","r","variable","defaultValue","match","split","s","trim","propertyValue","window","getComputedStyle","getPropertyValue"],"mappings":"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"}

package/dist/esm-dev/packages/web/src/ui/components/molecules/MainContainer.module.css.mjs

@@ -1,8 +1,8 @@
 import { collectCss } from '../../../../../../internal/style-injector/src/index.mjs';
 
-var css = ".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 = ".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);
-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"};
 
 export { css, modules_852c89cd as default };
 //# sourceMappingURL=MainContainer.module.css.mjs.map

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

@@ -1,6 +1,6 @@
 import React__default, { useState, useMemo } from 'react';
 import { useLingui } from '../../../../../../node_modules/@lingui/react/dist/index.mjs';
-import classNames from '../../../../../../_virtual/index3.mjs';
+import classNames from '../../../../../../_virtual/index.mjs';
 import { OTPInput as Lt } from '../../../../../../node_modules/input-otp/dist/index.mjs';
 import modules_6ff17004 from './OtpInput.module.css.mjs';
 

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

@@ -1,5 +1,5 @@
 import React__default from 'react';
-import classNames from '../../../../../../_virtual/index3.mjs';
+import classNames from '../../../../../../_virtual/index.mjs';
 import { useLingui } from '../../../../../../node_modules/@lingui/react/dist/index.mjs';
 import VisuallyHidden from '../atoms/VisuallyHidden.mjs';
 import modules_8479f250 from './PasswordStrengthCheck.module.css.mjs';

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

@@ -92,10 +92,9 @@ error, ...additionalProps })=>{
         ...inputProps.input,
         ...hasPasskeys ? passwordManagerDisableAutofillProps : {},
         ...additionalProps
-    }), error && /*#__PURE__*/ React__default.createElement(ErrorText, {
-        className: modules_2f821ae3.error,
-        ...inputProps.error
-    }, error));
+    }), error && /*#__PURE__*/ React__default.createElement("div", {
+        className: modules_2f821ae3.error
+    }, /*#__PURE__*/ React__default.createElement(ErrorText, inputProps.error, error)));
 };
 
 export { PhoneInput as default, getPhoneNumberProps };

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

@@ -1 +1 @@
-{"version":3,"file":"PhoneInput.mjs","sources":["../../../../../../../../../web/src/ui/components/molecules/PhoneInput.tsx"],"sourcesContent":["import React, { useRef, useState } from 'react';\nimport { useLingui } from '@lingui/react/macro';\nimport { COUNTRIES_LIST, CountryCode, ParsedPhoneNumberResponse } from '@stytch/core';\nimport Input from './Input';\nimport { formatNumber } from '../../../utils/handleParsePhoneNumber';\nimport { passwordManagerDisableAutofillProps } from '../../../utils/passwordManagerDisableAutofillProps';\nimport ErrorText from './ErrorText';\nimport { useErrorProps } from '../../../utils/accessibility';\nimport { Chevron } from '../../../assets';\nimport { ClientsideServicesProvider } from '../../../ClientsideServicesProvider';\nimport styles from './PhoneInput.module.css';\n\n// What the library returns by default for the US\nconst DEFAULT_TEL_PLACEHOLDER = '(201) 555-0123';\n\nexport const getPhoneNumberProps = (\n  clientsideServices: ClientsideServicesProvider,\n): Pick<PhoneInputProps, 'getExampleNumber' | 'parsePhoneNumber'> => ({\n  getExampleNumber: (countryCode: CountryCode) =>\n    clientsideServices.getExamplePhoneNumber({ regionCode: countryCode }).then((res) => res.phoneNumber),\n\n  parsePhoneNumber: (phoneNumber: string, countryCode?: CountryCode) =>\n    clientsideServices.parsedPhoneNumber({\n      phoneNumber,\n      regionCode: countryCode,\n    }),\n});\n\nexport type PhoneInputProps = {\n  phone: string;\n  setPhone: (phone: string) => void;\n  country: CountryCode;\n  setCountry: (country: CountryCode) => void;\n  parsePhoneNumber: (phoneNumber: string, countryCode?: CountryCode) => Promise<ParsedPhoneNumberResponse>;\n  getExampleNumber: (countryCode: CountryCode) => Promise<string | undefined>;\n  hasPasskeys?: boolean;\n  error?: string;\n};\n\nconst PhoneInput = ({\n  phone,\n  setPhone,\n  country,\n  setCountry,\n  parsePhoneNumber,\n  getExampleNumber,\n  hasPasskeys,\n  // Handle error ourselves instead of delegating down to <Input>\n  // since the layout would be wrong in that case (it would appear to the right of the <select>)\n  error,\n  ...additionalProps\n}: PhoneInputProps) => {\n  const { t } = useLingui();\n\n  const inputProps = useErrorProps(error);\n  const countryFormatter = new Intl.DisplayNames(['en'], { type: 'region' });\n  const [placeholder, setPlaceholder] = useState(DEFAULT_TEL_PLACEHOLDER);\n  const inputRef = useRef<HTMLInputElement>(null);\n  const [phoneValue, setPhoneValue] = useState(phone);\n\n  return (\n    <div className={styles.container}>\n      <select\n        aria-label={t({ id: 'formField.countryCode.label', message: 'Country code' })}\n        className={styles.select}\n        autoComplete=\"tel-country-code\"\n        value={country}\n        onChange={async (e) => {\n          const userInput = e.target.value as CountryCode;\n          setCountry(userInput);\n          inputRef.current?.focus();\n\n          const newPlaceholder = await Promise.race([\n            getExampleNumber(country), //\n            new Promise<undefined>((resolve) => setTimeout(() => resolve(undefined), 100)),\n          ]);\n\n          if (userInput !== e.target.value) return;\n          setPlaceholder(newPlaceholder ?? DEFAULT_TEL_PLACEHOLDER);\n        }}\n      >\n        {Object.entries(COUNTRIES_LIST).map(([code, number]) => (\n          <option key={code} value={code}>\n            {/* Hide the name of the selected country so it doesn't show up in the <select> */}\n            {code !== country ? `+${number} ${countryFormatter.of(code)}` : `+${number}`}\n          </option>\n        ))}\n      </select>\n\n      <Chevron className={styles.chevron} role=\"presentation\" />\n\n      <Input\n        id=\"phone-input\"\n        label={t({ id: 'formField.phone.label', message: 'Phone number' })}\n        hideLabel\n        ref={inputRef}\n        type=\"tel\"\n        autoComplete={hasPasskeys ? 'username webauthn' : 'tel-national'}\n        containerClassName={styles.phone}\n        value={phoneValue}\n        placeholder={placeholder}\n        onChange={async (e) => {\n          const userInput = e.target.value;\n          setPhoneValue(userInput);\n\n          const national = await formatNumber({\n            parsePhoneNumber,\n            phoneNumber: userInput,\n            country,\n          });\n\n          // Disregard stale results\n          if (userInput !== e.target.value) {\n            return;\n          }\n\n          setPhone(national);\n          setPhoneValue(national);\n        }}\n        required\n        {...inputProps.input}\n        // We want to block 1PW's autofill when passkeys is enabled for now\n        // (it is breaking to our integration)\n        {...(hasPasskeys ? passwordManagerDisableAutofillProps : {})}\n        {...additionalProps}\n      />\n\n      {error && (\n        <ErrorText className={styles.error} {...inputProps.error}>\n          {error}\n        </ErrorText>\n      )}\n    </div>\n  );\n};\n\nexport default PhoneInput;\n"],"names":["DEFAULT_TEL_PLACEHOLDER","getPhoneNumberProps","clientsideServices","getExampleNumber","countryCode","getExamplePhoneNumber","regionCode","then","res","phoneNumber","parsePhoneNumber","parsedPhoneNumber","PhoneInput","phone","setPhone","country","setCountry","hasPasskeys","error","additionalProps","useLingui","inputProps","useErrorProps","countryFormatter","Intl","DisplayNames","type","placeholder","setPlaceholder","useState","inputRef","useRef","phoneValue","setPhoneValue","React","div","className","styles","container","select","aria-label","autoComplete","value","onChange","e","userInput","target","current","focus","newPlaceholder","Promise","race","resolve","setTimeout","undefined","Object","entries","COUNTRIES_LIST","map","code","number","option","key","of","Chevron","chevron","role","Input","id","label","hideLabel","ref","containerClassName","national","formatNumber","required","input","passwordManagerDisableAutofillProps","ErrorText"],"mappings":"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"}
+{"version":3,"file":"PhoneInput.mjs","sources":["../../../../../../../../../web/src/ui/components/molecules/PhoneInput.tsx"],"sourcesContent":["import React, { useRef, useState } from 'react';\nimport { useLingui } from '@lingui/react/macro';\nimport { COUNTRIES_LIST, CountryCode, ParsedPhoneNumberResponse } from '@stytch/core';\nimport Input from './Input';\nimport { formatNumber } from '../../../utils/handleParsePhoneNumber';\nimport { passwordManagerDisableAutofillProps } from '../../../utils/passwordManagerDisableAutofillProps';\nimport ErrorText from './ErrorText';\nimport { useErrorProps } from '../../../utils/accessibility';\nimport { Chevron } from '../../../assets';\nimport { ClientsideServicesProvider } from '../../../ClientsideServicesProvider';\nimport styles from './PhoneInput.module.css';\n\n// What the library returns by default for the US\nconst DEFAULT_TEL_PLACEHOLDER = '(201) 555-0123';\n\nexport const getPhoneNumberProps = (\n  clientsideServices: ClientsideServicesProvider,\n): Pick<PhoneInputProps, 'getExampleNumber' | 'parsePhoneNumber'> => ({\n  getExampleNumber: (countryCode: CountryCode) =>\n    clientsideServices.getExamplePhoneNumber({ regionCode: countryCode }).then((res) => res.phoneNumber),\n\n  parsePhoneNumber: (phoneNumber: string, countryCode?: CountryCode) =>\n    clientsideServices.parsedPhoneNumber({\n      phoneNumber,\n      regionCode: countryCode,\n    }),\n});\n\nexport type PhoneInputProps = {\n  phone: string;\n  setPhone: (phone: string) => void;\n  country: CountryCode;\n  setCountry: (country: CountryCode) => void;\n  parsePhoneNumber: (phoneNumber: string, countryCode?: CountryCode) => Promise<ParsedPhoneNumberResponse>;\n  getExampleNumber: (countryCode: CountryCode) => Promise<string | undefined>;\n  hasPasskeys?: boolean;\n  error?: string;\n};\n\nconst PhoneInput = ({\n  phone,\n  setPhone,\n  country,\n  setCountry,\n  parsePhoneNumber,\n  getExampleNumber,\n  hasPasskeys,\n  // Handle error ourselves instead of delegating down to <Input>\n  // since the layout would be wrong in that case (it would appear to the right of the <select>)\n  error,\n  ...additionalProps\n}: PhoneInputProps) => {\n  const { t } = useLingui();\n\n  const inputProps = useErrorProps(error);\n  const countryFormatter = new Intl.DisplayNames(['en'], { type: 'region' });\n  const [placeholder, setPlaceholder] = useState(DEFAULT_TEL_PLACEHOLDER);\n  const inputRef = useRef<HTMLInputElement>(null);\n  const [phoneValue, setPhoneValue] = useState(phone);\n\n  return (\n    <div className={styles.container}>\n      <select\n        aria-label={t({ id: 'formField.countryCode.label', message: 'Country code' })}\n        className={styles.select}\n        autoComplete=\"tel-country-code\"\n        value={country}\n        onChange={async (e) => {\n          const userInput = e.target.value as CountryCode;\n          setCountry(userInput);\n          inputRef.current?.focus();\n\n          const newPlaceholder = await Promise.race([\n            getExampleNumber(country), //\n            new Promise<undefined>((resolve) => setTimeout(() => resolve(undefined), 100)),\n          ]);\n\n          if (userInput !== e.target.value) return;\n          setPlaceholder(newPlaceholder ?? DEFAULT_TEL_PLACEHOLDER);\n        }}\n      >\n        {Object.entries(COUNTRIES_LIST).map(([code, number]) => (\n          <option key={code} value={code}>\n            {/* Hide the name of the selected country so it doesn't show up in the <select> */}\n            {code !== country ? `+${number} ${countryFormatter.of(code)}` : `+${number}`}\n          </option>\n        ))}\n      </select>\n\n      <Chevron className={styles.chevron} role=\"presentation\" />\n\n      <Input\n        id=\"phone-input\"\n        label={t({ id: 'formField.phone.label', message: 'Phone number' })}\n        hideLabel\n        ref={inputRef}\n        type=\"tel\"\n        autoComplete={hasPasskeys ? 'username webauthn' : 'tel-national'}\n        containerClassName={styles.phone}\n        value={phoneValue}\n        placeholder={placeholder}\n        onChange={async (e) => {\n          const userInput = e.target.value;\n          setPhoneValue(userInput);\n\n          const national = await formatNumber({\n            parsePhoneNumber,\n            phoneNumber: userInput,\n            country,\n          });\n\n          // Disregard stale results\n          if (userInput !== e.target.value) {\n            return;\n          }\n\n          setPhone(national);\n          setPhoneValue(national);\n        }}\n        required\n        {...inputProps.input}\n        // We want to block 1PW's autofill when passkeys is enabled for now\n        // (it is breaking to our integration)\n        {...(hasPasskeys ? passwordManagerDisableAutofillProps : {})}\n        {...additionalProps}\n      />\n\n      {error && (\n        <div className={styles.error}>\n          <ErrorText {...inputProps.error}>{error}</ErrorText>\n        </div>\n      )}\n    </div>\n  );\n};\n\nexport default PhoneInput;\n"],"names":["DEFAULT_TEL_PLACEHOLDER","getPhoneNumberProps","clientsideServices","getExampleNumber","countryCode","getExamplePhoneNumber","regionCode","then","res","phoneNumber","parsePhoneNumber","parsedPhoneNumber","PhoneInput","phone","setPhone","country","setCountry","hasPasskeys","error","additionalProps","useLingui","inputProps","useErrorProps","countryFormatter","Intl","DisplayNames","type","placeholder","setPlaceholder","useState","inputRef","useRef","phoneValue","setPhoneValue","React","div","className","styles","container","select","aria-label","autoComplete","value","onChange","e","userInput","target","current","focus","newPlaceholder","Promise","race","resolve","setTimeout","undefined","Object","entries","COUNTRIES_LIST","map","code","number","option","key","of","Chevron","chevron","role","Input","id","label","hideLabel","ref","containerClassName","national","formatNumber","required","input","passwordManagerDisableAutofillProps","ErrorText"],"mappings":"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"}

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

@@ -3,12 +3,15 @@ import { useLingui, Trans } from '../../../../../../node_modules/@lingui/react/d
 import EmailActionLayout from '../molecules/EmailActionLayout.mjs';
 import { EmailProviderLink, emailProviderInfo } from '../molecules/EmailProviderLink.mjs';
 import Button from '../atoms/Button.mjs';
+import { useTimeRemaining } from '../atoms/Countdown.mjs';
+import VerticalTransition from '../atoms/VerticalTransition.mjs';
 
 /**
  * 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, _: $__ } = useLingui();
+    const [timeRemaining, active] = useTimeRemaining(countdown?.expiration ?? 0);
     return /*#__PURE__*/ React__default.createElement(EmailActionLayout, {
         header: $__i18n._({
             id: "emailConfirmation.title",
@@ -33,9 +36,29 @@ import Button from '../atoms/Button.mjs';
         }), /*#__PURE__*/ React__default.createElement(EmailProviderLink, {
             emailDomain: emailDomain,
             providerInfo: emailProviderInfo.outlook
-        }), showGoBack && /*#__PURE__*/ React__default.createElement(Button, {
+        }), resend && countdown && /*#__PURE__*/ React__default.createElement(Button, {
+            variant: "outline",
+            disabled: isSubmitting || active,
+            onClick: ()=>{
+                countdown.start(15);
+                resend().catch(()=>countdown.clear());
+            }
+        }, /*#__PURE__*/ React__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__default.createElement(Button, {
             variant: "ghost",
-            onClick: reset
+            onClick: goBack
         }, $__i18n._({
             id: "button.goBack",
             message: "Go back"

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

@@ -1 +1 @@
-{"version":3,"file":"EmailConfirmationView.mjs","sources":["../../../../../../../../../web/src/ui/components/organisms/EmailConfirmationView.tsx"],"sourcesContent":["import React from 'react';\nimport { Trans } from '@lingui/react';\nimport { useLingui } from '@lingui/react/macro';\nimport EmailActionLayout from '../molecules/EmailActionLayout';\nimport { EmailProviderLink, emailProviderInfo } from '../molecules/EmailProviderLink';\nimport Button from '../atoms/Button';\n\n/**\n * Base component for the two EmailConfirmation in B2B and B2C. This component controls the presentation\n * and do not have any of the B2C/B2B specific code\n */\nexport const EmailConfirmationView = ({\n  emailDomain,\n  reset,\n  email,\n  showGoBack = true,\n}: {\n  emailDomain: string | null;\n  reset: () => void;\n  email: string;\n  showGoBack?: boolean;\n}) => {\n  const { t } = useLingui();\n  return (\n    <EmailActionLayout\n      header={t({ id: 'emailConfirmation.title', message: 'Check your email' })}\n      description={\n        <Trans\n          id=\"emailConfirmation.content\"\n          message=\"An email was sent to <bold>{email}</bold>.\"\n          components={{ bold: <b /> }}\n          values={{ email }}\n        />\n      }\n      additionalActions={\n        <>\n          <EmailProviderLink emailDomain={emailDomain} providerInfo={emailProviderInfo.gmail} />\n          <EmailProviderLink emailDomain={emailDomain} providerInfo={emailProviderInfo.yahoo} />\n          <EmailProviderLink emailDomain={emailDomain} providerInfo={emailProviderInfo.outlook} />\n\n          {showGoBack && (\n            <Button variant=\"ghost\" onClick={reset}>\n              {t({ id: 'button.goBack', message: 'Go back' })}\n            </Button>\n          )}\n        </>\n      }\n    />\n  );\n};\n"],"names":["EmailConfirmationView","emailDomain","reset","email","showGoBack","useLingui","React","EmailActionLayout","header","description","Trans","id","message","components","bold","b","values","additionalActions","EmailProviderLink","providerInfo","emailProviderInfo","gmail","yahoo","outlook","Button","variant","onClick"],"mappings":";;;;;;AAOA;;;AAGC,IACM,MAAMA,qBAAAA,GAAwB,CAAC,EACpCC,WAAW,EACXC,KAAK,EACLC,KAAK,EACLC,UAAAA,GAAa,IAAI,EAMlB,GAAA;AACC,IAAA,MAAM,EAAA,IAAA,EAAA,OAAA,EAAA,CAAA,EAAA,GAAA,EAAA,GAAQC,SAAAA,EAAAA;AACd,IAAA,qBACEC,cAAA,CAAA,aAAA,CAACC,iBAAAA,EAAAA;QACCC,MAAM,EAAA,OAAA,CAAA,CAAA,CAAA;;;;AACNC,QAAAA,WAAAA,gBACEH,cAAA,CAAA,aAAA,CAACI,KAAAA,EAAAA;YACCC,EAAAA,EAAG,2BAAA;YACHC,OAAAA,EAAQ,4CAAA;YACRC,UAAAA,EAAY;AAAEC,gBAAAA,IAAAA,gBAAMR,cAAA,CAAA,aAAA,CAACS,GAAAA,EAAAA,IAAAA;AAAK,aAAA;YAC1BC,MAAAA,EAAQ;AAAEb,gBAAAA;AAAM;;AAGpBc,QAAAA,iBAAAA,gBACEX,0EACEA,cAAA,CAAA,aAAA,CAACY,iBAAAA,EAAAA;YAAkBjB,WAAAA,EAAaA,WAAAA;AAAakB,YAAAA,YAAAA,EAAcC,kBAAkBC;0BAC7Ef,cAAA,CAAA,aAAA,CAACY,iBAAAA,EAAAA;YAAkBjB,WAAAA,EAAaA,WAAAA;AAAakB,YAAAA,YAAAA,EAAcC,kBAAkBE;0BAC7EhB,cAAA,CAAA,aAAA,CAACY,iBAAAA,EAAAA;YAAkBjB,WAAAA,EAAaA,WAAAA;AAAakB,YAAAA,YAAAA,EAAcC,kBAAkBG;AAE5EnB,SAAAA,CAAAA,EAAAA,UAAAA,kBACCE,cAAA,CAAA,aAAA,CAACkB,MAAAA,EAAAA;YAAOC,OAAAA,EAAQ,OAAA;YAAQC,OAAAA,EAASxB;;;;;;AAQ7C;;;;"}
+{"version":3,"file":"EmailConfirmationView.mjs","sources":["../../../../../../../../../web/src/ui/components/organisms/EmailConfirmationView.tsx"],"sourcesContent":["import React from 'react';\nimport { Trans } from '@lingui/react';\nimport { useLingui } from '@lingui/react/macro';\nimport EmailActionLayout from '../molecules/EmailActionLayout';\nimport { EmailProviderLink, emailProviderInfo } from '../molecules/EmailProviderLink';\nimport Button from '../atoms/Button';\nimport { Countdown, useTimeRemaining } from '../atoms/Countdown';\nimport VerticalTransition from '../atoms/VerticalTransition';\n\n/**\n * Base component for the two EmailConfirmation in B2B and B2C. This component controls the presentation\n * and do not have any of the B2C/B2B specific code\n */\nexport const EmailConfirmationView = ({\n  emailDomain,\n  email,\n  goBack,\n  resend,\n  countdown,\n  isSubmitting,\n}: {\n  emailDomain: string | null;\n  email: string;\n  goBack?: () => void;\n  resend?: () => Promise<void>;\n  countdown?: Countdown;\n  isSubmitting?: boolean;\n}) => {\n  const { t } = useLingui();\n  const [timeRemaining, active] = useTimeRemaining(countdown?.expiration ?? 0);\n\n  return (\n    <EmailActionLayout\n      header={t({ id: 'emailConfirmation.title', message: 'Check your email' })}\n      description={\n        <Trans\n          id=\"emailConfirmation.content\"\n          message=\"An email was sent to <bold>{email}</bold>.\"\n          components={{ bold: <b /> }}\n          values={{ email }}\n        />\n      }\n      additionalActions={\n        <>\n          <EmailProviderLink emailDomain={emailDomain} providerInfo={emailProviderInfo.gmail} />\n          <EmailProviderLink emailDomain={emailDomain} providerInfo={emailProviderInfo.yahoo} />\n          <EmailProviderLink emailDomain={emailDomain} providerInfo={emailProviderInfo.outlook} />\n\n          {resend && countdown && (\n            <Button\n              variant=\"outline\"\n              disabled={isSubmitting || active}\n              onClick={() => {\n                countdown.start(15);\n                resend().catch(() => countdown.clear());\n              }}\n            >\n              <VerticalTransition\n                primary={t({ id: 'button.resendEmail', message: 'Resend email' })}\n                secondary={t({\n                  id: 'emailConfirmation.emailSent',\n                  message: `Email sent! Try again in ${timeRemaining}s`,\n                })}\n                triggered={active}\n              />\n            </Button>\n          )}\n\n          {goBack && (\n            <Button variant=\"ghost\" onClick={goBack}>\n              {t({ id: 'button.goBack', message: 'Go back' })}\n            </Button>\n          )}\n        </>\n      }\n    />\n  );\n};\n"],"names":["EmailConfirmationView","emailDomain","email","goBack","resend","countdown","isSubmitting","useLingui","timeRemaining","active","useTimeRemaining","expiration","React","EmailActionLayout","header","description","Trans","id","message","components","bold","b","values","additionalActions","EmailProviderLink","providerInfo","emailProviderInfo","gmail","yahoo","outlook","Button","variant","disabled","onClick","start","catch","clear","VerticalTransition","primary","secondary","triggered"],"mappings":";;;;;;;;AASA;;;AAGC,IACM,MAAMA,qBAAAA,GAAwB,CAAC,EACpCC,WAAW,EACXC,KAAK,EACLC,MAAM,EACNC,MAAM,EACNC,SAAS,EACTC,YAAY,EAQb,GAAA;AACC,IAAA,MAAM,EAAA,IAAA,EAAA,OAAA,EAAA,CAAA,EAAA,GAAA,EAAA,GAAQC,SAAAA,EAAAA;AACd,IAAA,MAAM,CAACC,aAAAA,EAAeC,MAAAA,CAAO,GAAGC,gBAAAA,CAAiBL,WAAWM,UAAAA,IAAc,CAAA,CAAA;AAE1E,IAAA,qBACEC,cAAA,CAAA,aAAA,CAACC,iBAAAA,EAAAA;QACCC,MAAM,EAAA,OAAA,CAAA,CAAA,CAAA;;;;AACNC,QAAAA,WAAAA,gBACEH,cAAA,CAAA,aAAA,CAACI,KAAAA,EAAAA;YACCC,EAAAA,EAAG,2BAAA;YACHC,OAAAA,EAAQ,4CAAA;YACRC,UAAAA,EAAY;AAAEC,gBAAAA,IAAAA,gBAAMR,cAAA,CAAA,aAAA,CAACS,GAAAA,EAAAA,IAAAA;AAAK,aAAA;YAC1BC,MAAAA,EAAQ;AAAEpB,gBAAAA;AAAM;;AAGpBqB,QAAAA,iBAAAA,gBACEX,0EACEA,cAAA,CAAA,aAAA,CAACY,iBAAAA,EAAAA;YAAkBvB,WAAAA,EAAaA,WAAAA;AAAawB,YAAAA,YAAAA,EAAcC,kBAAkBC;0BAC7Ef,cAAA,CAAA,aAAA,CAACY,iBAAAA,EAAAA;YAAkBvB,WAAAA,EAAaA,WAAAA;AAAawB,YAAAA,YAAAA,EAAcC,kBAAkBE;0BAC7EhB,cAAA,CAAA,aAAA,CAACY,iBAAAA,EAAAA;YAAkBvB,WAAAA,EAAaA,WAAAA;AAAawB,YAAAA,YAAAA,EAAcC,kBAAkBG;AAE5EzB,SAAAA,CAAAA,EAAAA,MAAAA,IAAUC,2BACTO,cAAA,CAAA,aAAA,CAACkB,MAAAA,EAAAA;YACCC,OAAAA,EAAQ,SAAA;AACRC,YAAAA,QAAAA,EAAU1B,YAAAA,IAAgBG,MAAAA;YAC1BwB,OAAAA,EAAS,IAAA;AACP5B,gBAAAA,SAAAA,CAAU6B,KAAK,CAAC,EAAA,CAAA;AAChB9B,gBAAAA,MAAAA,EAAAA,CAAS+B,KAAK,CAAC,IAAM9B,SAAAA,CAAU+B,KAAK,EAAA,CAAA;AACtC,YAAA;yBAEAxB,cAAA,CAAA,aAAA,CAACyB,kBAAAA,EAAAA;YACCC,OAAO,EAAA,OAAA,CAAA,CAAA,CAAA;;;;YACPC,SAAS,EAAA,OAAA,CAAA,CAAA,CAAA;;;;AAE8B/B,oBAAAA,aAAAA,EAAAA;;;YAEvCgC,SAAAA,EAAW/B;AAKhBN,SAAAA,CAAAA,CAAAA,EAAAA,MAAAA,kBACCS,cAAA,CAAA,aAAA,CAACkB,MAAAA,EAAAA;YAAOC,OAAAA,EAAQ,OAAA;YAAQE,OAAAA,EAAS9B;;;;;;AAQ7C;;;;"}

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

@@ -1,6 +1,6 @@
 import React__default from 'react';
 import { useLingui } from '../../../../../../node_modules/@lingui/react/dist/index.mjs';
-import classNames from '../../../../../../_virtual/index3.mjs';
+import classNames from '../../../../../../_virtual/index.mjs';
 import Typography from '../atoms/Typography.mjs';
 import Column from '../atoms/Column.mjs';
 import { Chevron } from '../../../assets/chevron.mjs';

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

@@ -15,10 +15,10 @@ const ResendOTPButton = ({ isSubmitting, resendOTP, countdown })=>{
             resendOTP().catch(()=>countdown.clear());
         }
     }, /*#__PURE__*/ React__default.createElement(VerticalTransition, {
-        primary: /*#__PURE__*/ React__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",

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

@@ -1 +1 @@
-{"version":3,"file":"ResendOTPButton.mjs","sources":["../../../../../../../../../web/src/ui/components/organisms/ResendOTPButton.tsx"],"sourcesContent":["import React from 'react';\nimport { Countdown, useTimeRemaining } from '../atoms/Countdown';\nimport { useLingui } from '@lingui/react/macro';\nimport Button from '../atoms/Button';\nimport VerticalTransition from '../atoms/VerticalTransition';\n\nexport type ResendOTPButtonProps = {\n  isSubmitting: boolean;\n  resendOTP: () => Promise<void>;\n  countdown: Countdown;\n};\n\nexport const ResendOTPButton = ({ isSubmitting, resendOTP, countdown }: ResendOTPButtonProps) => {\n  const { t } = useLingui();\n\n  const [timeRemaining, active] = useTimeRemaining(countdown.expiration);\n\n  return (\n    <Button\n      variant=\"outline\"\n      disabled={isSubmitting || active}\n      onClick={() => {\n        countdown.start(15);\n        resendOTP().catch(() => countdown.clear());\n      }}\n    >\n      <VerticalTransition\n        primary={<span>{t({ id: 'passcode.resendCode', message: 'Resend code' })}</span>}\n        secondary={t({ id: 'passcode.codeSent', message: `Code sent! Try again in ${timeRemaining}s` })}\n        triggered={active}\n      />\n    </Button>\n  );\n};\n"],"names":["ResendOTPButton","isSubmitting","resendOTP","countdown","useLingui","timeRemaining","active","useTimeRemaining","expiration","React","Button","variant","disabled","onClick","start","catch","clear","VerticalTransition","primary","span","secondary","triggered"],"mappings":";;;;;;AAYO,MAAMA,kBAAkB,CAAC,EAAEC,YAAY,EAAEC,SAAS,EAAEC,SAAS,EAAwB,GAAA;AAC1F,IAAA,MAAM,EAAA,IAAA,EAAA,OAAA,EAAA,CAAA,EAAA,GAAA,EAAA,GAAQC,SAAAA,EAAAA;AAEd,IAAA,MAAM,CAACC,aAAAA,EAAeC,MAAAA,CAAO,GAAGC,gBAAAA,CAAiBJ,UAAUK,UAAU,CAAA;AAErE,IAAA,qBACEC,cAAA,CAAA,aAAA,CAACC,MAAAA,EAAAA;QACCC,OAAAA,EAAQ,SAAA;AACRC,QAAAA,QAAAA,EAAUX,YAAAA,IAAgBK,MAAAA;QAC1BO,OAAAA,EAAS,IAAA;AACPV,YAAAA,SAAAA,CAAUW,KAAK,CAAC,EAAA,CAAA;AAChBZ,YAAAA,SAAAA,EAAAA,CAAYa,KAAK,CAAC,IAAMZ,SAAAA,CAAUa,KAAK,EAAA,CAAA;AACzC,QAAA;qBAEAP,cAAA,CAAA,aAAA,CAACQ,kBAAAA,EAAAA;AACCC,QAAAA,OAAAA,gBAAST,cAAA,CAAA,aAAA,CAACU,MAAAA,EAAAA,IAAAA,EAAAA,OAAAA,CAAAA,CAAAA,CAAAA;;;;QACVC,SAAS,EAAA,OAAA,CAAA,CAAA,CAAA;;;;AAAmEf,gBAAAA,aAAAA,EAAAA;;;QAC5EgB,SAAAA,EAAWf;;AAInB;;;;"}
+{"version":3,"file":"ResendOTPButton.mjs","sources":["../../../../../../../../../web/src/ui/components/organisms/ResendOTPButton.tsx"],"sourcesContent":["import React from 'react';\nimport { Countdown, useTimeRemaining } from '../atoms/Countdown';\nimport { useLingui } from '@lingui/react/macro';\nimport Button from '../atoms/Button';\nimport VerticalTransition from '../atoms/VerticalTransition';\n\nexport type ResendOTPButtonProps = {\n  isSubmitting: boolean;\n  resendOTP: () => Promise<void>;\n  countdown: Countdown;\n};\n\nexport const ResendOTPButton = ({ isSubmitting, resendOTP, countdown }: ResendOTPButtonProps) => {\n  const { t } = useLingui();\n\n  const [timeRemaining, active] = useTimeRemaining(countdown.expiration);\n\n  return (\n    <Button\n      variant=\"outline\"\n      disabled={isSubmitting || active}\n      onClick={() => {\n        countdown.start(15);\n        resendOTP().catch(() => countdown.clear());\n      }}\n    >\n      <VerticalTransition\n        primary={t({ id: 'passcode.resendCode', message: 'Resend code' })}\n        secondary={t({ id: 'passcode.codeSent', message: `Code sent! Try again in ${timeRemaining}s` })}\n        triggered={active}\n      />\n    </Button>\n  );\n};\n"],"names":["ResendOTPButton","isSubmitting","resendOTP","countdown","useLingui","timeRemaining","active","useTimeRemaining","expiration","React","Button","variant","disabled","onClick","start","catch","clear","VerticalTransition","primary","secondary","triggered"],"mappings":";;;;;;AAYO,MAAMA,kBAAkB,CAAC,EAAEC,YAAY,EAAEC,SAAS,EAAEC,SAAS,EAAwB,GAAA;AAC1F,IAAA,MAAM,EAAA,IAAA,EAAA,OAAA,EAAA,CAAA,EAAA,GAAA,EAAA,GAAQC,SAAAA,EAAAA;AAEd,IAAA,MAAM,CAACC,aAAAA,EAAeC,MAAAA,CAAO,GAAGC,gBAAAA,CAAiBJ,UAAUK,UAAU,CAAA;AAErE,IAAA,qBACEC,cAAA,CAAA,aAAA,CAACC,MAAAA,EAAAA;QACCC,OAAAA,EAAQ,SAAA;AACRC,QAAAA,QAAAA,EAAUX,YAAAA,IAAgBK,MAAAA;QAC1BO,OAAAA,EAAS,IAAA;AACPV,YAAAA,SAAAA,CAAUW,KAAK,CAAC,EAAA,CAAA;AAChBZ,YAAAA,SAAAA,EAAAA,CAAYa,KAAK,CAAC,IAAMZ,SAAAA,CAAUa,KAAK,EAAA,CAAA;AACzC,QAAA;qBAEAP,cAAA,CAAA,aAAA,CAACQ,kBAAAA,EAAAA;QACCC,OAAO,EAAA,OAAA,CAAA,CAAA,CAAA;;;;QACPC,SAAS,EAAA,OAAA,CAAA,CAAA,CAAA;;;;AAAmEd,gBAAAA,aAAAA,EAAAA;;;QAC5Ee,SAAAA,EAAWd;;AAInB;;;;"}

package/dist/esm-dev/packages/web/src/ui/react/adminPortal/AdminPortalMemberManagement.mjs

@@ -2,49 +2,7 @@ import React__default from 'react';
 import { invariant } from '../utils/invariant.mjs';
 import { useIsMounted__INTERNAL, useStytchB2BClient } from '../b2b/StytchB2BContext.mjs';
 import { noProviderError } from '../utils/errors.mjs';
-import '../../../adminPortal/MuiClassNameSetup.mjs';
-import '../../../adminPortal/MainContainer.mjs';
-import '../../../adminPortal/StytchClientContext.mjs';
-import '../../../adminPortal/shared/components/Toast.mjs';
-import '../../../adminPortal/shared/components/Typography.mjs';
-import '../../../../../../_virtual/index.mjs';
-import '../../../../../../_virtual/index2.mjs';
-import '../../../../../../node_modules/swr/_internal/dist/index.mjs';
-import '../../../adminPortal/components/Button.mjs';
-import '../../../adminPortal/components/Modal.mjs';
-import '../../../adminPortal/components/PageLoadingIndicator.mjs';
-import '../../../adminPortal/components/Tag.mjs';
-import '../../../utils/deepEqual.mjs';
-import '../../../adminPortal/shared/components/CopyableText.mjs';
-import '../../../adminPortal/shared/utils/clickToCopyUtils.mjs';
-import '../../../adminPortal/components/Code.mjs';
-import '../../../adminPortal/shared/components/Label.mjs';
-import '../../../adminPortal/shared/components/Input.mjs';
-import '../../../adminPortal/shared/components/EmbeddedTable.mjs';
-import '../../../adminPortal/shared/components/TableActions.mjs';
-import '../../../adminPortal/shared/components/Select.mjs';
-import '../../../adminPortal/shared/components/MenuItem.mjs';
-import '../../../adminPortal/components/SettingsContainer.mjs';
-import '../../../adminPortal/shared/components/InfoIcon.mjs';
-import '../../../adminPortal/shared/components/Tooltip.mjs';
-import '../../../adminPortal/sso/AttributeMappingTable.mjs';
-import '../../../adminPortal/sso/IdpSelect.mjs';
-import '../../../adminPortal/components/PaddedContainer.mjs';
-import '../../../adminPortal/shared/components/Screenshot.mjs';
-import '../../../adminPortal/components/Switch.mjs';
-import '../../../adminPortal/components/Autocomplete.mjs';
-import '../../../adminPortal/components/Table.mjs';
-import '../../../adminPortal/components/ActionMenu.mjs';
-import '../../../adminPortal/components/Alert.mjs';
-import '../../../adminPortal/components/PaginatedTable.mjs';
-import '../../../adminPortal/shared/components/SearchBar.mjs';
-import '../../../adminPortal/components/Checkbox.mjs';
-import '../../../adminPortal/components/PaddingLeft.mjs';
-import '../../../adminPortal/components/Divider.mjs';
-import '../../../adminPortal/shared/components/RowItem.mjs';
-import '../../../adminPortal/components/Radio.mjs';
 import { AdminPortalMemberManagementContainer } from '../../../adminPortal/memberManagement/AdminPortalMemberManagementContainer.mjs';
-import '../../../adminPortal/scim/SCIMNewConnectionScreen.mjs';
 
 /**
  * The Admin Portal member management UI component.

package/dist/esm-dev/packages/web/src/ui/react/adminPortal/AdminPortalMemberManagement.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"AdminPortalMemberManagement.mjs","sources":["../../../../../../../../../web/src/ui/react/adminPortal/AdminPortalMemberManagement.tsx"],"sourcesContent":["import React from 'react';\nimport { StytchProjectConfigurationInput } from '@stytch/core/public';\nimport { invariant } from '../utils/invariant';\nimport { useIsMounted__INTERNAL, useStytchB2BClient } from '../b2b/StytchB2BContext';\nimport { noProviderError } from '../utils/errors';\nimport { ExcludeInjectedOptions } from './makeAdminPortalComponent';\nimport { AdminPortalMemberManagementContainer as AdminPortalMemberManagementContainer } from '../../../adminPortal';\nimport { AdminPortalMemberManagementMountOptions } from '../../../adminPortal/memberManagement/AdminPortalMemberManagementContainer';\n\nexport type AdminPortalMemberManagementProps<\n  TProjectConfiguration extends StytchProjectConfigurationInput = Stytch.DefaultProjectConfiguration,\n> = ExcludeInjectedOptions<AdminPortalMemberManagementMountOptions<TProjectConfiguration>>;\n\n/**\n * The Admin Portal member management UI component.\n * This component must be rendered within a {@link StytchB2BProvider}.\n *\n * See the {@link https://stytch.com/docs/b2b/sdks/javascript-sdk online reference}\n */\nexport const AdminPortalMemberManagement = <TProjectConfiguration extends StytchProjectConfigurationInput>(\n  props: AdminPortalMemberManagementProps<TProjectConfiguration>,\n) => {\n  invariant(useIsMounted__INTERNAL(), noProviderError('<AdminPortalMemberManagement />', 'StytchB2BProvider'));\n  const stytchClient = useStytchB2BClient<TProjectConfiguration>();\n\n  return <AdminPortalMemberManagementContainer client={stytchClient} {...props} />;\n};\n"],"names":["AdminPortalMemberManagement","props","invariant","useIsMounted__INTERNAL","noProviderError","stytchClient","useStytchB2BClient","React","AdminPortalMemberManagementContainer","client"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAaA;;;;;IAMO,MAAMA,2BAAAA,GAA8B,CACzCC,KAAAA,GAAAA;IAEAC,SAAAA,CAAUC,sBAAAA,EAAAA,EAA0BC,gBAAgB,iCAAA,EAAmC,mBAAA,CAAA,CAAA;AACvF,IAAA,MAAMC,YAAAA,GAAeC,kBAAAA,EAAAA;AAErB,IAAA,qBAAOC,cAAA,CAAA,aAAA,CAACC,oCAAAA,EAAAA;QAAqCC,MAAAA,EAAQJ,YAAAA;AAAe,QAAA,GAAGJ;;AACzE;;;;"}
+{"version":3,"file":"AdminPortalMemberManagement.mjs","sources":["../../../../../../../../../web/src/ui/react/adminPortal/AdminPortalMemberManagement.tsx"],"sourcesContent":["import React from 'react';\nimport { StytchProjectConfigurationInput } from '@stytch/core/public';\nimport { invariant } from '../utils/invariant';\nimport { useIsMounted__INTERNAL, useStytchB2BClient } from '../b2b/StytchB2BContext';\nimport { noProviderError } from '../utils/errors';\nimport { ExcludeInjectedOptions } from './makeAdminPortalComponent';\nimport { AdminPortalMemberManagementContainer as AdminPortalMemberManagementContainer } from '../../../adminPortal';\nimport { AdminPortalMemberManagementMountOptions } from '../../../adminPortal/memberManagement/AdminPortalMemberManagementContainer';\n\nexport type AdminPortalMemberManagementProps<\n  TProjectConfiguration extends StytchProjectConfigurationInput = Stytch.DefaultProjectConfiguration,\n> = ExcludeInjectedOptions<AdminPortalMemberManagementMountOptions<TProjectConfiguration>>;\n\n/**\n * The Admin Portal member management UI component.\n * This component must be rendered within a {@link StytchB2BProvider}.\n *\n * See the {@link https://stytch.com/docs/b2b/sdks/javascript-sdk online reference}\n */\nexport const AdminPortalMemberManagement = <TProjectConfiguration extends StytchProjectConfigurationInput>(\n  props: AdminPortalMemberManagementProps<TProjectConfiguration>,\n) => {\n  invariant(useIsMounted__INTERNAL(), noProviderError('<AdminPortalMemberManagement />', 'StytchB2BProvider'));\n  const stytchClient = useStytchB2BClient<TProjectConfiguration>();\n\n  return <AdminPortalMemberManagementContainer client={stytchClient} {...props} />;\n};\n"],"names":["AdminPortalMemberManagement","props","invariant","useIsMounted__INTERNAL","noProviderError","stytchClient","useStytchB2BClient","React","AdminPortalMemberManagementContainer","client"],"mappings":";;;;;;AAaA;;;;;IAMO,MAAMA,2BAAAA,GAA8B,CACzCC,KAAAA,GAAAA;IAEAC,SAAAA,CAAUC,sBAAAA,EAAAA,EAA0BC,gBAAgB,iCAAA,EAAmC,mBAAA,CAAA,CAAA;AACvF,IAAA,MAAMC,YAAAA,GAAeC,kBAAAA,EAAAA;AAErB,IAAA,qBAAOC,cAAA,CAAA,aAAA,CAACC,oCAAAA,EAAAA;QAAqCC,MAAAA,EAAQJ,YAAAA;AAAe,QAAA,GAAGJ;;AACzE;;;;"}