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

package/dist/esm/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/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/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/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/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/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/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/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/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":";;;;;;;;;;;;AAoBA,MAAMA,aAAAA,GAAgB,CAAC,EAAEC,QAAQ,EAAEC,gBAAgB,EAAEC,KAAK,EAAsB,GAAA;AAC9E,IAAA,MAAM,EAAA,IAAA,EAAA,OAAA,EAAA,CAAA,EAAA,GAAA,EAAA,GAAQC,SAAAA,EAAAA;AAEd,IAAA,MAAMC,MAAMC,MAAAA,CAAuB,IAAA,CAAA;AACnC,IAAA,MAAM,EAAEC,SAAS,EAAEC,KAAK,EAAE,GAAGC,cAAcN,KAAAA,EAAOE,GAAAA,CAAAA;AAElD,IAAA,qBACEK,cAAA,CAAA,aAAA,CAACC,MAAAA,EAAAA;QAAOC,GAAAA,EAAK,CAAA;QAAGJ,KAAAA,EAAOA,KAAAA;QAAOD,SAAAA,EAAWM,UAAAA,CAAWC,gBAAAA,CAAOC,SAAS,EAAER,SAAAA,CAAAA;QAAYF,GAAAA,EAAKA;AACpFJ,KAAAA,EAAAA,QAAAA,EAEAC,kCACCQ,cAAA,CAAA,aAAA,CAACM,KAAAA,EAAAA;AAAIT,QAAAA,SAAAA,EAAWO,iBAAOG;qBACrBP,cAAA,CAAA,aAAA,CAACQ,SAAAA,EAAAA;QACCC,KAAK,EAAA,OAAA,CAAA,CAAA,CAAA;;;;QACLC,QAAQ,EAAA,OAAA,CAAA,CAAA,CAAA;;;;uBAKdV,cAAA,CAAA,aAAA,CAACW,cAAAA,EAAAA,IAAAA,CAAAA,CAAAA;AAGP;AAEO,SAASZ,aAAAA,CAAcN,KAAY,EAAEE,GAA8B,EAAA;IACxE,MAAMiB,aAAAA,GAAgBnB,KAAK,CAAC,mBAAA,CAAoB;;;AAIhD,IAAA,MAAM,CAACoB,UAAAA,EAAYC,aAAAA,CAAc,GAAGC,QAAAA,CAASH,aAAAA,CAAAA;IAC7CI,SAAAA,CAAU,IAAA;QACRF,aAAAA,CAAcG,WAAAA,CAAYL,aAAAA,EAAejB,GAAAA,CAAIuB,OAAO,CAAA,CAAA;IACtD,CAAA,EAAG;AAACN,QAAAA,aAAAA;AAAejB,QAAAA;AAAI,KAAA,CAAA;AAEvB,IAAA,MAAMwB,WAAWC,aAAAA,CAAc,CAAC,YAAY,EAAEP,UAAAA,CAAW,CAAC,CAAC,CAAA;AAC3D,IAAA,MAAMQ,cAAAA,GAAiBC,OAAAA,CAAQ,IAAMC,mBAAAA,CAAoB9B,KAAAA,CAAAA,EAAQ;AAACA,QAAAA;AAAM,KAAA,CAAA;IAExE,OAAO;QACLK,KAAAA,EAAOuB,cAAAA;AACPxB,QAAAA,SAAAA,EAAWM,UAAAA,CAAW;YAAE,YAAA,EAAcgB;AAAS,SAAA;AACjD,KAAA;AACF;AAEO,SAASI,oBAAoB9B,KAAY,EAAA;AAC9C,IAAA,MAAM,EAAE,cAAA,EAAgB+B,WAAW,EAAE,GAAGH,gBAAgB,GAAG5B,KAAAA;AAC3D,IAAA,MAAMgC,SAAAA,GAAYC,MAAAA,CAAOC,WAAW;IAElCD,MAAAA,CAAOE,OAAO,CAACP,cAAAA,CAAAA,CAAgBQ,GAAG,CAAC,CAAC,CAACC,GAAAA,EAAKC,KAAAA,CAAM,GAAK;YAAC,CAAC,KAAK,EAAED,GAAAA,CAAAA,CAAK;AAAEC,YAAAA;AAAM,SAAA,CAAA,CAAA;AAG7E,IAAA,IAAItC,KAAK,CAAC,cAAA,CAAe,KAAK,QAAA,EAAU;QACtCgC,SAAS,CAAC,oBAAoB,GAAG,SAAA;IACnC,CAAA,MAAO;QACLA,SAAS,CAAC,oBAAoB,GAAGD,WAAAA;QACjCC,SAAS,CAAC,iBAAiB,GAAGhC,KAAK,CAAC,cAAA,CAAe,KAAK,SAAS,GAAA,GAAM,GAAA;AACzE,IAAA;IAEA,OAAOgC,SAAAA;AACT;AAEO,SAASR,WAAAA,CAAYc,KAAa,EAAEC,OAA2B,EAAA;IACpE,IAAI,CAACA,SAAS,OAAOD,KAAAA;;;AAIrB,IAAA,MAAME,QAAAA,GAAWF,KAAAA,CAAMG,OAAO,CAAC,qBAAqB,CAACC,CAAAA,GAAAA;;;AAGnD,QAAA,MAAM,CAACC,QAAAA,EAAUC,YAAAA,CAAa,GAAGF,CAAAA,CAC9BG,KAAK,CAAC,aAAA,CAAe,CAAC,EAAE,CACxBC,KAAK,CAAC,GAAA,CAAA,CACNV,GAAG,CAAC,CAACW,CAAAA,GAAMA,EAAEC,IAAI,EAAA,CAAA;AACpB,QAAA,MAAMC,gBAAgBC,MAAAA,CAAOC,gBAAgB,CAACZ,OAAAA,CAAAA,CAASa,gBAAgB,CAACT,QAAAA,CAAAA;AACxE,QAAA,OAAOM,iBAAiBL,YAAAA,IAAgBF,CAAAA;AAC1C,IAAA,CAAA,CAAA;AAEA,IAAA,OAAOF,QAAAA,KAAaF,KAAAA,GAAQE,QAAAA,GAAWhB,WAAAA,CAAYgB,QAAAA,EAAUD,OAAAA,CAAAA;AAC/D;;;;"}

package/dist/esm/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/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/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/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/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":";;;;;;;;;;;AAYA;AACA,MAAMA,uBAAAA,GAA0B,gBAAA;AAEzB,MAAMC,mBAAAA,GAAsB,CACjCC,kBAAAA,IACoE;AACpEC,QAAAA,gBAAAA,EAAkB,CAACC,WAAAA,GACjBF,kBAAAA,CAAmBG,qBAAqB,CAAC;gBAAEC,UAAAA,EAAYF;AAAY,aAAA,CAAA,CAAGG,IAAI,CAAC,CAACC,GAAAA,GAAQA,IAAIC,WAAW,CAAA;AAErGC,QAAAA,gBAAAA,EAAkB,CAACD,WAAAA,EAAqBL,WAAAA,GACtCF,kBAAAA,CAAmBS,iBAAiB,CAAC;AACnCF,gBAAAA,WAAAA;gBACAH,UAAAA,EAAYF;AACd,aAAA;AACJ,KAAA;AAaA,MAAMQ,aAAa,CAAC,EAClBC,KAAK,EACLC,QAAQ,EACRC,OAAO,EACPC,UAAU,EACVN,gBAAgB,EAChBP,gBAAgB,EAChBc,WAAW;AAEX;AACAC,KAAK,EACL,GAAGC,eAAAA,EACa,GAAA;AAChB,IAAA,MAAM,EAAA,IAAA,EAAA,OAAA,EAAA,CAAA,EAAA,GAAA,EAAA,GAAQC,SAAAA,EAAAA;AAEd,IAAA,MAAMC,aAAaC,aAAAA,CAAcJ,KAAAA,CAAAA;AACjC,IAAA,MAAMK,gBAAAA,GAAmB,IAAIC,IAAAA,CAAKC,YAAY,CAAC;AAAC,QAAA;KAAK,EAAE;QAAEC,IAAAA,EAAM;AAAS,KAAA,CAAA;AACxE,IAAA,MAAM,CAACC,WAAAA,EAAaC,cAAAA,CAAe,GAAGC,QAAAA,CAAS7B,uBAAAA,CAAAA;AAC/C,IAAA,MAAM8B,WAAWC,MAAAA,CAAyB,IAAA,CAAA;AAC1C,IAAA,MAAM,CAACC,UAAAA,EAAYC,aAAAA,CAAc,GAAGJ,QAAAA,CAAShB,KAAAA,CAAAA;AAE7C,IAAA,qBACEqB,cAAA,CAAA,aAAA,CAACC,KAAAA,EAAAA;AAAIC,QAAAA,SAAAA,EAAWC,iBAAOC;qBACrBJ,cAAA,CAAA,aAAA,CAACK,QAAAA,EAAAA;QACCC,YAAU,EAAA,OAAA,CAAA,CAAA,CAAA;;;;AACVJ,QAAAA,SAAAA,EAAWC,iBAAOE,MAAM;QACxBE,YAAAA,EAAa,kBAAA;QACbC,KAAAA,EAAO3B,OAAAA;AACP4B,QAAAA,QAAAA,EAAU,OAAOC,CAAAA,GAAAA;AACf,YAAA,MAAMC,SAAAA,GAAYD,CAAAA,CAAEE,MAAM,CAACJ,KAAK;YAChC1B,UAAAA,CAAW6B,SAAAA,CAAAA;AACXf,YAAAA,QAAAA,CAASiB,OAAO,EAAEC,KAAAA,EAAAA;AAElB,YAAA,MAAMC,cAAAA,GAAiB,MAAMC,OAAAA,CAAQC,IAAI,CAAC;gBACxChD,gBAAAA,CAAiBY,OAAAA,CAAAA;AACjB,gBAAA,IAAImC,QAAmB,CAACE,OAAAA,GAAYC,UAAAA,CAAW,IAAMD,QAAQE,SAAAA,CAAAA,EAAY,GAAA,CAAA;AAC1E,aAAA,CAAA;AAED,YAAA,IAAIT,SAAAA,KAAcD,CAAAA,CAAEE,MAAM,CAACJ,KAAK,EAAE;AAClCd,YAAAA,cAAAA,CAAeqB,cAAAA,IAAkBjD,uBAAAA,CAAAA;AACnC,QAAA;OAECuD,MAAAA,CAAOC,OAAO,CAACC,cAAAA,CAAAA,CAAgBC,GAAG,CAAC,CAAC,CAACC,IAAAA,EAAMC,MAAAA,CAAO,iBACjD1B,cAAA,CAAA,aAAA,CAAC2B,QAAAA,EAAAA;YAAOC,GAAAA,EAAKH,IAAAA;YAAMjB,KAAAA,EAAOiB;AAEvBA,SAAAA,EAAAA,IAAAA,KAAS5C,UAAU,CAAC,CAAC,EAAE6C,MAAAA,CAAO,CAAC,EAAErC,gBAAAA,CAAiBwC,EAAE,CAACJ,OAAO,GAAG,CAAC,CAAC,EAAEC,MAAAA,CAAAA,CAAQ,mBAKlF1B,cAAA,CAAA,aAAA,CAAC8B,OAAAA,EAAAA;AAAQ5B,QAAAA,SAAAA,EAAWC,iBAAO4B,OAAO;QAAEC,IAAAA,EAAK;sBAEzChC,cAAA,CAAA,aAAA,CAACiC,KAAAA,EAAAA;QACCC,EAAAA,EAAG,aAAA;QACHC,KAAK,EAAA,OAAA,CAAA,CAAA,CAAA;;;;QACLC,SAAAA,EAAAA,IAAAA;QACAC,GAAAA,EAAKzC,QAAAA;QACLJ,IAAAA,EAAK,KAAA;AACLe,QAAAA,YAAAA,EAAcxB,cAAc,mBAAA,GAAsB,cAAA;AAClDuD,QAAAA,kBAAAA,EAAoBnC,iBAAOxB,KAAK;QAChC6B,KAAAA,EAAOV,UAAAA;QACPL,WAAAA,EAAaA,WAAAA;AACbgB,QAAAA,QAAAA,EAAU,OAAOC,CAAAA,GAAAA;AACf,YAAA,MAAMC,SAAAA,GAAYD,CAAAA,CAAEE,MAAM,CAACJ,KAAK;YAChCT,aAAAA,CAAcY,SAAAA,CAAAA;YAEd,MAAM4B,QAAAA,GAAW,MAAMC,YAAAA,CAAa;AAClChE,gBAAAA,gBAAAA;gBACAD,WAAAA,EAAaoC,SAAAA;AACb9B,gBAAAA;AACF,aAAA,CAAA;;AAGA,YAAA,IAAI8B,SAAAA,KAAcD,CAAAA,CAAEE,MAAM,CAACJ,KAAK,EAAE;AAChC,gBAAA;AACF,YAAA;YAEA5B,QAAAA,CAAS2D,QAAAA,CAAAA;YACTxC,aAAAA,CAAcwC,QAAAA,CAAAA;AAChB,QAAA,CAAA;QACAE,QAAAA,EAAAA,IAAAA;AACC,QAAA,GAAGtD,WAAWuD,KAAK;QAGnB,GAAI3D,WAAAA,GAAc4D,mCAAAA,GAAsC,EAAE;AAC1D,QAAA,GAAG1D;AAGLD,KAAAA,CAAAA,EAAAA,KAAAA,kBACCgB,cAAA,CAAA,aAAA,CAACC,KAAAA,EAAAA;AAAIC,QAAAA,SAAAA,EAAWC,iBAAOnB;qBACrBgB,cAAA,CAAA,aAAA,CAAC4C,SAAAA,EAAczD,UAAAA,CAAWH,KAAK,EAAGA,KAAAA,CAAAA,CAAAA,CAAAA;AAK5C;;;;"}

package/dist/esm/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/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/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/packages/web/src/ui/components/organisms/OneTapError.mjs

@@ -1,5 +1,5 @@
 import 'react';
-import '../../../../../../_virtual/index3.mjs';
+import '../../../../../../_virtual/index.mjs';
 import '../atoms/Typography.module.css.mjs';
 
 const OneTapErrors = {

package/dist/esm/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/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/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/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;;;;"}

package/dist/esm/packages/web/src/ui/react/adminPortal/AdminPortalOrgSettings.mjs

@@ -2,47 +2,7 @@ import React__default from 'react';
 import { invariant } from '../utils/invariant.mjs';
 import { noProviderError } from '../utils/errors.mjs';
 import { useIsMounted__INTERNAL, useStytchB2BClient } from '../b2b/StytchB2BContext.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 { AdminPortalOrgSettingsContainer } from '../../../adminPortal/settings/AdminPortalOrgSettingsContainer.mjs';
-import '../../../adminPortal/components/Checkbox.mjs';
-import '../../../adminPortal/memberManagement/MemberStatus.mjs';
-import '../../../adminPortal/memberManagement/MemberListScreen.mjs';
-import '../../../adminPortal/scim/SCIMNewConnectionScreen.mjs';
 
 /**
  * The Admin Portal Organization Settings UI component.

package/dist/esm/packages/web/src/ui/react/adminPortal/AdminPortalOrgSettings.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"AdminPortalOrgSettings.mjs","sources":["../../../../../../../../../web/src/ui/react/adminPortal/AdminPortalOrgSettings.tsx"],"sourcesContent":["import React from 'react';\nimport { StytchProjectConfigurationInput } from '@stytch/core/public';\nimport { ExcludeInjectedOptions } from './makeAdminPortalComponent';\nimport { invariant } from '../utils/invariant';\nimport { noProviderError } from '../utils/errors';\nimport { useStytchB2BClient } from '../b2b';\nimport { useIsMounted__INTERNAL } from '../b2b/StytchB2BContext';\nimport { AdminPortalOrgSettingsContainer as AdminPortalOrgSettingsContainer } from '../../../adminPortal';\nimport { AdminPortalOrgSettingsMountOptions } from '../../../adminPortal/settings/AdminPortalOrgSettingsContainer';\n\nexport type AdminPortalOrgSettingsProps<\n  TProjectConfiguration extends StytchProjectConfigurationInput = Stytch.DefaultProjectConfiguration,\n> = ExcludeInjectedOptions<AdminPortalOrgSettingsMountOptions<TProjectConfiguration>>;\n\n/**\n * The Admin Portal Organization Settings 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 AdminPortalOrgSettings = <TProjectConfiguration extends StytchProjectConfigurationInput>(\n  props: AdminPortalOrgSettingsProps<TProjectConfiguration>,\n) => {\n  invariant(useIsMounted__INTERNAL(), noProviderError('<AdminPortalMemberManagement />', 'StytchB2BProvider'));\n  const stytchClient = useStytchB2BClient<TProjectConfiguration>();\n\n  return <AdminPortalOrgSettingsContainer client={stytchClient} {...props} />;\n};\n"],"names":["AdminPortalOrgSettings","props","invariant","useIsMounted__INTERNAL","noProviderError","stytchClient","useStytchB2BClient","React","AdminPortalOrgSettingsContainer","client"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAcA;;;;;IAMO,MAAMA,sBAAAA,GAAyB,CACpCC,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,+BAAAA,EAAAA;QAAgCC,MAAAA,EAAQJ,YAAAA;AAAe,QAAA,GAAGJ;;AACpE;;;;"}
+{"version":3,"file":"AdminPortalOrgSettings.mjs","sources":["../../../../../../../../../web/src/ui/react/adminPortal/AdminPortalOrgSettings.tsx"],"sourcesContent":["import React from 'react';\nimport { StytchProjectConfigurationInput } from '@stytch/core/public';\nimport { ExcludeInjectedOptions } from './makeAdminPortalComponent';\nimport { invariant } from '../utils/invariant';\nimport { noProviderError } from '../utils/errors';\nimport { useStytchB2BClient } from '../b2b';\nimport { useIsMounted__INTERNAL } from '../b2b/StytchB2BContext';\nimport { AdminPortalOrgSettingsContainer as AdminPortalOrgSettingsContainer } from '../../../adminPortal';\nimport { AdminPortalOrgSettingsMountOptions } from '../../../adminPortal/settings/AdminPortalOrgSettingsContainer';\n\nexport type AdminPortalOrgSettingsProps<\n  TProjectConfiguration extends StytchProjectConfigurationInput = Stytch.DefaultProjectConfiguration,\n> = ExcludeInjectedOptions<AdminPortalOrgSettingsMountOptions<TProjectConfiguration>>;\n\n/**\n * The Admin Portal Organization Settings 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 AdminPortalOrgSettings = <TProjectConfiguration extends StytchProjectConfigurationInput>(\n  props: AdminPortalOrgSettingsProps<TProjectConfiguration>,\n) => {\n  invariant(useIsMounted__INTERNAL(), noProviderError('<AdminPortalMemberManagement />', 'StytchB2BProvider'));\n  const stytchClient = useStytchB2BClient<TProjectConfiguration>();\n\n  return <AdminPortalOrgSettingsContainer client={stytchClient} {...props} />;\n};\n"],"names":["AdminPortalOrgSettings","props","invariant","useIsMounted__INTERNAL","noProviderError","stytchClient","useStytchB2BClient","React","AdminPortalOrgSettingsContainer","client"],"mappings":";;;;;;AAcA;;;;;IAMO,MAAMA,sBAAAA,GAAyB,CACpCC,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,+BAAAA,EAAAA;QAAgCC,MAAAA,EAAQJ,YAAAA;AAAe,QAAA,GAAGJ;;AACpE;;;;"}