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

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

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

Files changed (270) hide show

package/dist/esm-dev/packages/web/src/ui/b2c/screens/Secondary/PasswordlessAuthenticate.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"PasswordlessAuthenticate.mjs","sources":["../../../../../../../../../../web/src/ui/b2c/screens/Secondary/PasswordlessAuthenticate.tsx"],"sourcesContent":["import React, { useState } from 'react';\nimport { DEFAULT_OTP_EXPIRATION_MINUTES } from '@stytch/core';\nimport { OTPMethods, StytchAPIError, StytchEventType, StytchSDKAPIError } from '@stytch/core/public';\nimport { EmailConfirmation } from './EmailConfirmation';\nimport { OTPAuthenticate } from './OTPAuthenticate';\nimport Divider from '../../../components/molecules/Divider';\nimport { convertMagicLinkOptions, convertPasswordResetOptions } from '../../../../utils';\nimport {\n AppScreens,\n useConfig,\n useErrorCallback,\n useEventCallback,\n useGlobalReducer,\n useStytch,\n} from '../../GlobalContextProvider';\nimport { useMountEffect } from '../../../hooks/useMountEffect';\nimport Button from '../../../components/atoms/Button';\nimport ErrorText from '../../../components/molecules/ErrorText';\nimport { getTranslatedError } from '../../../../utils/getTranslatedError';\nimport { useLingui } from '@lingui/react/macro';\nimport Column from '../../../components/atoms/Column';\n\ntype PasswordlessAuthenticateProps = {\n secondaryType: 'eml' \| 'otp' \| undefined;\n};\n\nexport const PasswordlessAuthenticate = ({ secondaryType }: PasswordlessAuthenticateProps) => {\n const { t } = useLingui();\n const stytchClient = useStytch();\n const config = useConfig();\n const [state, dispatch] = useGlobalReducer();\n const onEvent = useEventCallback();\n const onError = useErrorCallback();\n\n const [errorMessage, setErrorMessage] = useState('');\n\n const { sendLink, sendCode } = usePasswordlessAuthenticate();\n const passwordOptions = config.passwordOptions;\n\n const email = state.formState.passwordState.email;\n\n const resetPassword = () => {\n stytchClient.passwords\n .resetByEmailStart(convertPasswordResetOptions(email, passwordOptions))\n .then((data) => {\n onEvent({ type: StytchEventType.PasswordResetByEmailStart, data });\n dispatch({ type: 'transition', screen: AppScreens.PasswordSetNew });\n })\n .catch((e: StytchAPIError) => {\n onError(e);\n setErrorMessage(getTranslatedError(e, t));\n });\n };\n\n useMountEffect(() => {\n switch (secondaryType) {\n case 'eml':\n sendLink();\n return;\n\n case 'otp':\n sendCode();\n return;\n\n default:\n stytchClient.passwords\n .resetByEmailStart(convertPasswordResetOptions(email, passwordOptions))\n .then((data) => {\n onEvent({ type: StytchEventType.PasswordResetByEmailStart, data });\n dispatch({ type: 'transition', screen: AppScreens.PasswordSetNew });\n })\n .catch((e: StytchAPIError) => {\n onError(e);\n });\n return;\n }\n });\n\n if (!secondaryType) {\n return null;\n }\n\n return (\n <>\n {secondaryType === 'eml' ? (\n <EmailConfirmation showGoBack={false} /> //\n ) : (\n <OTPAuthenticate hideBackButton />\n )}\n\n <Divider />\n\n <Column gap={2}>\n <Button onClick={resetPassword} variant=\"outline\">\n {t({ id: 'button.createPasswordInstead', message: 'Create a password instead' })}\n </Button>\n {errorMessage && <ErrorText>{errorMessage}</ErrorText>}\n </Column>\n </>\n );\n};\n\nexport function usePasswordlessAuthenticate() {\n const stytchClient = useStytch();\n const { emailMagicLinksOptions, otpOptions } = useConfig();\n const [state, dispatch] = useGlobalReducer();\n const onEvent = useEventCallback();\n const onError = useErrorCallback();\n\n const [isSubmitting, setIsSubmitting] = useState(false);\n\n const email = state.formState.passwordState.email;\n\n const sendLink = async () => {\n setIsSubmitting(true);\n\n try {\n const data = await stytchClient.magicLinks.email.loginOrCreate(\n email,\n convertMagicLinkOptions(emailMagicLinksOptions),\n );\n onEvent({ type: StytchEventType.MagicLinkLoginOrCreateEvent, data: { ...data, email } });\n dispatch({ type: 'set_magic_link_email', email: email });\n } catch (e) {\n onError(e as StytchSDKAPIError);\n throw e;\n } finally {\n setIsSubmitting(false);\n }\n };\n\n const sendCode = async () => {\n setIsSubmitting(true);\n\n try {\n const data = await stytchClient.otps.email.loginOrCreate(email, {\n expiration_minutes: otpOptions?.expirationMinutes ?? DEFAULT_OTP_EXPIRATION_MINUTES,\n locale: otpOptions?.locale,\n });\n onEvent({ type: StytchEventType.OTPsLoginOrCreateEvent, data });\n dispatch({\n type: 'update_otp_state',\n otpState: {\n type: OTPMethods.Email,\n methodId: data.method_id,\n otpDestination: email,\n },\n });\n } catch (e) {\n onError(e as StytchSDKAPIError);\n throw e;\n } finally {\n setIsSubmitting(false);\n }\n };\n\n return {\n sendLink,\n sendCode,\n isSubmitting,\n };\n}\n"],"names":["PasswordlessAuthenticate","secondaryType","useLingui","stytchClient","useStytch","config","useConfig","state","dispatch","useGlobalReducer","onEvent","useEventCallback","onError","useErrorCallback","errorMessage","setErrorMessage","useState","sendLink","sendCode","usePasswordlessAuthenticate","passwordOptions","email","formState","passwordState","resetPassword","passwords","resetByEmailStart","convertPasswordResetOptions","then","data","type","StytchEventType","PasswordResetByEmailStart","screen","AppScreens","PasswordSetNew","catch","e","getTranslatedError","useMountEffect","React","EmailConfirmation","showGoBack","OTPAuthenticate","hideBackButton","Divider","Column","gap","Button","onClick","variant","ErrorText","emailMagicLinksOptions","otpOptions","isSubmitting","setIsSubmitting","magicLinks","loginOrCreate","convertMagicLinkOptions","MagicLinkLoginOrCreateEvent","otps","expiration_minutes","expirationMinutes","DEFAULT_OTP_EXPIRATION_MINUTES","locale","OTPsLoginOrCreateEvent","otpState","OTPMethods","Email","methodId","method_id","otpDestination"],"mappings":"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"}
1	+ {"version":3,"file":"PasswordlessAuthenticate.mjs","sources":["../../../../../../../../../../web/src/ui/b2c/screens/Secondary/PasswordlessAuthenticate.tsx"],"sourcesContent":["import React, { useState } from 'react';\nimport { StytchAPIError, StytchEventType } from '@stytch/core/public';\nimport { EmailConfirmation } from './EmailConfirmation';\nimport { OTPAuthenticate } from './OTPAuthenticate';\nimport Divider from '../../../components/molecules/Divider';\nimport { convertPasswordResetOptions } from '../../../../utils';\nimport {\n AppScreens,\n useConfig,\n useErrorCallback,\n useEventCallback,\n useGlobalReducer,\n useStytch,\n} from '../../GlobalContextProvider';\nimport { useMountEffect } from '../../../hooks/useMountEffect';\nimport Button from '../../../components/atoms/Button';\nimport ErrorText from '../../../components/molecules/ErrorText';\nimport { getTranslatedError } from '../../../../utils/getTranslatedError';\nimport { useLingui } from '@lingui/react/macro';\nimport Column from '../../../components/atoms/Column';\nimport { usePasswordlessAuthenticate } from './usePasswordlessAuthenticate';\n\ntype PasswordlessAuthenticateProps = {\n secondaryType: 'eml' \| 'otp' \| undefined;\n};\n\nexport const PasswordlessAuthenticate = ({ secondaryType }: PasswordlessAuthenticateProps) => {\n const { t } = useLingui();\n const stytchClient = useStytch();\n const config = useConfig();\n const [state, dispatch] = useGlobalReducer();\n const onEvent = useEventCallback();\n const onError = useErrorCallback();\n\n const [errorMessage, setErrorMessage] = useState('');\n\n const { sendLink, sendCode } = usePasswordlessAuthenticate();\n const passwordOptions = config.passwordOptions;\n\n const email = state.formState.passwordState.email;\n\n const resetPassword = () => {\n stytchClient.passwords\n .resetByEmailStart(convertPasswordResetOptions(email, passwordOptions))\n .then((data) => {\n onEvent({ type: StytchEventType.PasswordResetByEmailStart, data });\n dispatch({ type: 'transition', screen: AppScreens.PasswordSetNew });\n })\n .catch((e: StytchAPIError) => {\n onError(e);\n setErrorMessage(getTranslatedError(e, t));\n });\n };\n\n useMountEffect(() => {\n switch (secondaryType) {\n case 'eml':\n sendLink();\n return;\n\n case 'otp':\n sendCode();\n return;\n\n default:\n stytchClient.passwords\n .resetByEmailStart(convertPasswordResetOptions(email, passwordOptions))\n .then((data) => {\n onEvent({ type: StytchEventType.PasswordResetByEmailStart, data });\n dispatch({ type: 'transition', screen: AppScreens.PasswordSetNew });\n })\n .catch((e: StytchAPIError) => {\n onError(e);\n });\n return;\n }\n });\n\n if (!secondaryType) {\n return null;\n }\n\n return (\n <>\n {secondaryType === 'eml' ? <EmailConfirmation showGoBack={false} /> : <OTPAuthenticate hideBackButton />}\n\n <Divider />\n\n <Column gap={2}>\n <Button onClick={resetPassword} variant=\"outline\">\n {t({ id: 'button.createPasswordInstead', message: 'Create a password instead' })}\n </Button>\n {errorMessage && <ErrorText>{errorMessage}</ErrorText>}\n </Column>\n </>\n );\n};\n"],"names":["PasswordlessAuthenticate","secondaryType","useLingui","stytchClient","useStytch","config","useConfig","state","dispatch","useGlobalReducer","onEvent","useEventCallback","onError","useErrorCallback","errorMessage","setErrorMessage","useState","sendLink","sendCode","usePasswordlessAuthenticate","passwordOptions","email","formState","passwordState","resetPassword","passwords","resetByEmailStart","convertPasswordResetOptions","then","data","type","StytchEventType","PasswordResetByEmailStart","screen","AppScreens","PasswordSetNew","catch","e","getTranslatedError","useMountEffect","React","EmailConfirmation","showGoBack","OTPAuthenticate","hideBackButton","Divider","Column","gap","Button","onClick","variant","ErrorText"],"mappings":"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"}

package/dist/esm-dev/packages/web/src/ui/b2c/screens/Secondary/usePasswordlessAuthenticate.mjs ADDED Viewed

@@ -0,0 +1,71 @@
+import { useState } from 'react';
+import { useStytch, useConfig, useGlobalReducer, useEventCallback, useErrorCallback } from '../../GlobalContextProvider.mjs';
+import { convertMagicLinkOptions } from '../../../../utils/index.mjs';
+import { DEFAULT_OTP_EXPIRATION_MINUTES } from '../../../../../../core/src/constants.mjs';
+import { StytchEventType, OTPMethods } from '../../../../../../core/src/public/ui.mjs';
+function usePasswordlessAuthenticate() {
+    const stytchClient = useStytch();
+    const { emailMagicLinksOptions, otpOptions } = useConfig();
+    const [state, dispatch] = useGlobalReducer();
+    const onEvent = useEventCallback();
+    const onError = useErrorCallback();
+    const [isSubmitting, setIsSubmitting] = useState(false);
+    const email = state.formState.passwordState.email;
+    const sendLink = async ()=>{
+        setIsSubmitting(true);
+        try {
+            const data = await stytchClient.magicLinks.email.loginOrCreate(email, convertMagicLinkOptions(emailMagicLinksOptions));
+            onEvent({
+                type: StytchEventType.MagicLinkLoginOrCreateEvent,
+                data: {
+                    ...data,
+                    email
+                }
+            });
+            dispatch({
+                type: 'set_magic_link_email',
+                email: email
+            });
+        } catch (e) {
+            onError(e);
+            throw e;
+        } finally{
+            setIsSubmitting(false);
+        }
+    };
+    const sendCode = async ()=>{
+        setIsSubmitting(true);
+        try {
+            const data = await stytchClient.otps.email.loginOrCreate(email, {
+                expiration_minutes: otpOptions?.expirationMinutes ?? DEFAULT_OTP_EXPIRATION_MINUTES,
+                locale: otpOptions?.locale
+            });
+            onEvent({
+                type: StytchEventType.OTPsLoginOrCreateEvent,
+                data
+            });
+            dispatch({
+                type: 'update_otp_state',
+                otpState: {
+                    type: OTPMethods.Email,
+                    methodId: data.method_id,
+                    otpDestination: email
+                }
+            });
+        } catch (e) {
+            onError(e);
+            throw e;
+        } finally{
+            setIsSubmitting(false);
+        }
+    };
+    return {
+        sendLink,
+        sendCode,
+        isSubmitting
+    };
+}
+export { usePasswordlessAuthenticate };
+//# sourceMappingURL=usePasswordlessAuthenticate.mjs.map

package/dist/esm-dev/packages/web/src/ui/b2c/screens/Secondary/usePasswordlessAuthenticate.mjs.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"usePasswordlessAuthenticate.mjs","sources":["../../../../../../../../../../web/src/ui/b2c/screens/Secondary/usePasswordlessAuthenticate.ts"],"sourcesContent":["import { useState } from 'react';\nimport { DEFAULT_OTP_EXPIRATION_MINUTES } from '@stytch/core';\nimport { OTPMethods, StytchEventType, StytchSDKAPIError } from '@stytch/core/public';\nimport {\n useConfig,\n useErrorCallback,\n useEventCallback,\n useGlobalReducer,\n useStytch,\n} from '../../GlobalContextProvider';\nimport { convertMagicLinkOptions } from '../../../../utils';\n\nexport function usePasswordlessAuthenticate() {\n const stytchClient = useStytch();\n const { emailMagicLinksOptions, otpOptions } = useConfig();\n const [state, dispatch] = useGlobalReducer();\n const onEvent = useEventCallback();\n const onError = useErrorCallback();\n\n const [isSubmitting, setIsSubmitting] = useState(false);\n\n const email = state.formState.passwordState.email;\n\n const sendLink = async () => {\n setIsSubmitting(true);\n\n try {\n const data = await stytchClient.magicLinks.email.loginOrCreate(\n email,\n convertMagicLinkOptions(emailMagicLinksOptions),\n );\n onEvent({ type: StytchEventType.MagicLinkLoginOrCreateEvent, data: { ...data, email } });\n dispatch({ type: 'set_magic_link_email', email: email });\n } catch (e) {\n onError(e as StytchSDKAPIError);\n throw e;\n } finally {\n setIsSubmitting(false);\n }\n };\n\n const sendCode = async () => {\n setIsSubmitting(true);\n\n try {\n const data = await stytchClient.otps.email.loginOrCreate(email, {\n expiration_minutes: otpOptions?.expirationMinutes ?? DEFAULT_OTP_EXPIRATION_MINUTES,\n locale: otpOptions?.locale,\n });\n onEvent({ type: StytchEventType.OTPsLoginOrCreateEvent, data });\n dispatch({\n type: 'update_otp_state',\n otpState: {\n type: OTPMethods.Email,\n methodId: data.method_id,\n otpDestination: email,\n },\n });\n } catch (e) {\n onError(e as StytchSDKAPIError);\n throw e;\n } finally {\n setIsSubmitting(false);\n }\n };\n\n return {\n sendLink,\n sendCode,\n isSubmitting,\n };\n}\n"],"names":["usePasswordlessAuthenticate","stytchClient","useStytch","emailMagicLinksOptions","otpOptions","useConfig","state","dispatch","useGlobalReducer","onEvent","useEventCallback","onError","useErrorCallback","isSubmitting","setIsSubmitting","useState","email","formState","passwordState","sendLink","data","magicLinks","loginOrCreate","convertMagicLinkOptions","type","StytchEventType","MagicLinkLoginOrCreateEvent","e","sendCode","otps","expiration_minutes","expirationMinutes","DEFAULT_OTP_EXPIRATION_MINUTES","locale","OTPsLoginOrCreateEvent","otpState","OTPMethods","Email","methodId","method_id","otpDestination"],"mappings":";;;;;;AAYO,SAASA,2BAAAA,GAAAA;AACd,IAAA,MAAMC,YAAAA,GAAeC,SAAAA,EAAAA;AACrB,IAAA,MAAM,EAAEC,sBAAsB,EAAEC,UAAU,EAAE,GAAGC,SAAAA,EAAAA;IAC/C,MAAM,CAACC,KAAAA,EAAOC,QAAAA,CAAS,GAAGC,gBAAAA,EAAAA;AAC1B,IAAA,MAAMC,OAAAA,GAAUC,gBAAAA,EAAAA;AAChB,IAAA,MAAMC,OAAAA,GAAUC,gBAAAA,EAAAA;AAEhB,IAAA,MAAM,CAACC,YAAAA,EAAcC,eAAAA,CAAgB,GAAGC,QAAAA,CAAS,KAAA,CAAA;AAEjD,IAAA,MAAMC,QAAQV,KAAAA,CAAMW,SAAS,CAACC,aAAa,CAACF,KAAK;AAEjD,IAAA,MAAMG,QAAAA,GAAW,UAAA;QACfL,eAAAA,CAAgB,IAAA,CAAA;QAEhB,IAAI;YACF,MAAMM,IAAAA,GAAO,MAAMnB,YAAAA,CAAaoB,UAAU,CAACL,KAAK,CAACM,aAAa,CAC5DN,KAAAA,EACAO,uBAAAA,CAAwBpB,sBAAAA,CAAAA,CAAAA;YAE1BM,OAAAA,CAAQ;AAAEe,gBAAAA,IAAAA,EAAMC,gBAAgBC,2BAA2B;gBAAEN,IAAAA,EAAM;AAAE,oBAAA,GAAGA,IAAI;AAAEJ,oBAAAA;AAAM;AAAE,aAAA,CAAA;YACtFT,QAAAA,CAAS;gBAAEiB,IAAAA,EAAM,sBAAA;gBAAwBR,KAAAA,EAAOA;AAAM,aAAA,CAAA;AACxD,QAAA,CAAA,CAAE,OAAOW,CAAAA,EAAG;YACVhB,OAAAA,CAAQgB,CAAAA,CAAAA;YACR,MAAMA,CAAAA;QACR,CAAA,QAAU;YACRb,eAAAA,CAAgB,KAAA,CAAA;AAClB,QAAA;AACF,IAAA,CAAA;AAEA,IAAA,MAAMc,QAAAA,GAAW,UAAA;QACfd,eAAAA,CAAgB,IAAA,CAAA;QAEhB,IAAI;YACF,MAAMM,IAAAA,GAAO,MAAMnB,YAAAA,CAAa4B,IAAI,CAACb,KAAK,CAACM,aAAa,CAACN,KAAAA,EAAO;AAC9Dc,gBAAAA,kBAAAA,EAAoB1B,YAAY2B,iBAAAA,IAAqBC,8BAAAA;AACrDC,gBAAAA,MAAAA,EAAQ7B,UAAAA,EAAY6B;AACtB,aAAA,CAAA;YACAxB,OAAAA,CAAQ;AAAEe,gBAAAA,IAAAA,EAAMC,gBAAgBS,sBAAsB;AAAEd,gBAAAA;AAAK,aAAA,CAAA;YAC7Db,QAAAA,CAAS;gBACPiB,IAAAA,EAAM,kBAAA;gBACNW,QAAAA,EAAU;AACRX,oBAAAA,IAAAA,EAAMY,WAAWC,KAAK;AACtBC,oBAAAA,QAAAA,EAAUlB,KAAKmB,SAAS;oBACxBC,cAAAA,EAAgBxB;AAClB;AACF,aAAA,CAAA;AACF,QAAA,CAAA,CAAE,OAAOW,CAAAA,EAAG;YACVhB,OAAAA,CAAQgB,CAAAA,CAAAA;YACR,MAAMA,CAAAA;QACR,CAAA,QAAU;YACRb,eAAAA,CAAgB,KAAA,CAAA;AAClB,QAAA;AACF,IAAA,CAAA;IAEA,OAAO;AACLK,QAAAA,QAAAA;AACAS,QAAAA,QAAAA;AACAf,QAAAA;AACF,KAAA;AACF;;;;"}

package/dist/esm-dev/packages/web/src/ui/components/atoms/AnimatedContainer.mjs CHANGED Viewed

@@ -1,5 +1,5 @@
 import React__default from 'react';
-import classNames from '../../../../../../_virtual/index3.mjs';
+import classNames from '../../../../../../_virtual/index.mjs';
 import modules_d098bf60 from './AnimatedContainer.module.css.mjs';
 const AnimatedContainer = ({ isOpen, children })=>/*#__PURE__*/ React__default.createElement("div", {

package/dist/esm-dev/packages/web/src/ui/components/atoms/Button.mjs CHANGED Viewed

@@ -1,5 +1,5 @@
 import React__default from 'react';
-import classNames from '../../../../../../_virtual/index3.mjs';
+import classNames from '../../../../../../_virtual/index.mjs';
 import { CircularProgress } from './CircularProgress.mjs';
 import modules_b0070f27 from './Button.module.css.mjs';

package/dist/esm-dev/packages/web/src/ui/components/atoms/CircularProgress.mjs CHANGED Viewed

@@ -14,15 +14,14 @@ const BASE_SIZE = 44;
         style: {
             width: size,
             height: size
-        },
+        }
+    }, /*#__PURE__*/ React__default.createElement("svg", {
+        className: modules_eaa8372d.svg,
+        viewBox: `${BASE_SIZE / 2} ${BASE_SIZE / 2} ${BASE_SIZE} ${BASE_SIZE}`,
         "aria-label": label ?? $__i18n._({
             id: "loading.label",
             message: "Loading"
         })
-    }, /*#__PURE__*/ React__default.createElement("svg", {
-        className: modules_eaa8372d.svg,
-        viewBox: `${BASE_SIZE / 2} ${BASE_SIZE / 2} ${BASE_SIZE} ${BASE_SIZE}`,
-        role: "presentation"
     }, /*#__PURE__*/ React__default.createElement("circle", {
         className: modules_eaa8372d.animatedCircle,
         cx: BASE_SIZE,

package/dist/esm-dev/packages/web/src/ui/components/atoms/CircularProgress.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"CircularProgress.mjs","sources":["../../../../../../../../../web/src/ui/components/atoms/CircularProgress.tsx"],"sourcesContent":["import React from 'react';\nimport { useLingui } from '@lingui/react/macro';\nimport styles from './CircularProgress.module.css';\n\nconst BASE_SIZE = 44;\n\nexport type CircularProgressProps = {\n size: number;\n thickness?: number;\n label?: string;\n};\n\n/*\n A lightweight spinning circle loading animation heavily inspired by the\n * MUI CircularProgress component\n * https://github.com/mui/material-ui/blob/master/packages/mui-material/src/CircularProgress/CircularProgress.js\n */\nexport const CircularProgress = ({ size, label, thickness = 3.6 }: CircularProgressProps) => {\n const { t } = useLingui();\n return (\n <div\n className={styles.root}\n style={{ width: size, height: size }}~~\n aria-label={label ?? t({ id: 'loading.label', message: 'Loading' })}\n~~ >\n <svg\n className={styles.svg}\n viewBox={`${BASE_SIZE / 2} ${BASE_SIZE / 2} ${BASE_SIZE} ${BASE_SIZE}`}\n ~~role=\"presentation~~\"\n >\n <circle\n className={styles.animatedCircle}\n cx={BASE_SIZE}\n cy={BASE_SIZE}\n r={(BASE_SIZE - thickness) / 2}\n fill=\"none\"\n strokeWidth={thickness}\n />\n </svg>\n </div>\n );\n};\n"],"names":["BASE_SIZE","CircularProgress","size","label","thickness","useLingui","React","div","className","styles","root","style","width","height","~~aria-label","~~svg","viewBox","~~role~~","circle","animatedCircle","cx","cy","r","fill","strokeWidth"],"mappings":";;;;AAIA,MAAMA,SAAAA,GAAY,EAAA;AAQlB;;;;IAKO,MAAMC,gBAAAA,GAAmB,CAAC,EAAEC,IAAI,EAAEC,KAAK,EAAEC,SAAAA,GAAY,GAAG,EAAyB,GAAA;AACtF,IAAA,MAAM,EAAA,IAAA,EAAA,OAAA,EAAA,CAAA,EAAA,GAAA,EAAA,GAAQC,SAAAA,EAAAA;AACd,IAAA,qBACEC,cAAA,CAAA,aAAA,CAACC,KAAAA,EAAAA;~~AACCC~~,QAAAA,SAAAA,EAAWC,iBAAOC,IAAI;~~QACtBC~~,KAAAA,EAAO;YAAEC,KAAAA,EAAOV,IAAAA;YAAMW,MAAAA,EAAQX;AAAK~~,SAAA~~;~~QACnCY~~,~~YAAAA,EAAYX,KAAAA,IAAAA,OAAAA,CAAAA,CAAAA,CAAAA;;;;qBAEZG,~~cAAA,CAAA,aAAA,~~CAACS~~,KAAAA,EAAAA;~~AACCP~~,QAAAA,SAAAA,EAAWC,~~iBAAOM~~,GAAG;AACrBC,QAAAA,OAAAA,EAAS,CAAA,~~EAAGhB~~,SAAAA,GAAY,CAAA,CAAE,CAAC,EAAEA,SAAAA,GAAY,CAAA,CAAE,CAAC,EAAEA,SAAAA,CAAU,CAAC,EAAEA,SAAAA,CAAAA,CAAW;~~QACtEiB~~,IAAAA,~~EAAK;qBAELX~~,cAAA,CAAA,aAAA,~~CAACY~~,QAAAA,EAAAA;~~AACCV~~,QAAAA,SAAAA,EAAWC,~~iBAAOU~~,cAAc;QAChCC,EAAAA,~~EAAIpB~~,SAAAA;~~QACJqB~~,EAAAA,~~EAAIrB~~,SAAAA;~~AACJsB~~,QAAAA,CAAAA,EAAG,~~CAACtB~~,SAAAA,GAAYI,SAAQ,IAAK,CAAA;~~QAC7BmB~~,IAAAA,EAAK,MAAA;QACLC,WAAAA,~~EAAapB~~;;AAKvB;;;;"}
1	+ {"version":3,"file":"CircularProgress.mjs","sources":["../../../../../../../../../web/src/ui/components/atoms/CircularProgress.tsx"],"sourcesContent":["import React from 'react';\nimport { useLingui } from '@lingui/react/macro';\nimport styles from './CircularProgress.module.css';\n\nconst BASE_SIZE = 44;\n\nexport type CircularProgressProps = {\n size: number;\n thickness?: number;\n label?: string;\n};\n\n/*\n A lightweight spinning circle loading animation heavily inspired by the\n * MUI CircularProgress component\n * https://github.com/mui/material-ui/blob/master/packages/mui-material/src/CircularProgress/CircularProgress.js\n */\nexport const CircularProgress = ({ size, label, thickness = 3.6 }: CircularProgressProps) => {\n const { t } = useLingui();\n return (\n <div className={styles.root} style={{ width: size, height: size }}>\n <svg\n className={styles.svg}\n viewBox={`${BASE_SIZE / 2} ${BASE_SIZE / 2} ${BASE_SIZE} ${BASE_SIZE}`}\n aria-label={label ?? t({ id: 'loading.label', message: 'Loading' })}\n >\n <circle\n className={styles.animatedCircle}\n cx={BASE_SIZE}\n cy={BASE_SIZE}\n r={(BASE_SIZE - thickness) / 2}\n fill=\"none\"\n strokeWidth={thickness}\n />\n </svg>\n </div>\n );\n};\n"],"names":["BASE_SIZE","CircularProgress","size","label","thickness","useLingui","React","div","className","styles","root","style","width","height","svg","viewBox","aria-label","circle","animatedCircle","cx","cy","r","fill","strokeWidth"],"mappings":";;;;AAIA,MAAMA,SAAAA,GAAY,EAAA;AAQlB;;;;IAKO,MAAMC,gBAAAA,GAAmB,CAAC,EAAEC,IAAI,EAAEC,KAAK,EAAEC,SAAAA,GAAY,GAAG,EAAyB,GAAA;AACtF,IAAA,MAAM,EAAA,IAAA,EAAA,OAAA,EAAA,CAAA,EAAA,GAAA,EAAA,GAAQC,SAAAA,EAAAA;AACd,IAAA,qBACEC,cAAA,CAAA,aAAA,CAACC,KAAAA,EAAAA;AAAIC,QAAAA,SAAAA,EAAWC,iBAAOC,IAAI;QAAEC,KAAAA,EAAO;YAAEC,KAAAA,EAAOV,IAAAA;YAAMW,MAAAA,EAAQX;AAAK;qBAC9DI,cAAA,CAAA,aAAA,CAACQ,KAAAA,EAAAA;AACCN,QAAAA,SAAAA,EAAWC,iBAAOK,GAAG;AACrBC,QAAAA,OAAAA,EAAS,CAAA,EAAGf,SAAAA,GAAY,CAAA,CAAE,CAAC,EAAEA,SAAAA,GAAY,CAAA,CAAE,CAAC,EAAEA,SAAAA,CAAU,CAAC,EAAEA,SAAAA,CAAAA,CAAW;QACtEgB,YAAAA,EAAYb,KAAAA,IAAAA,OAAAA,CAAAA,CAAAA,CAAAA;;;;qBAEZG,cAAA,CAAA,aAAA,CAACW,QAAAA,EAAAA;AACCT,QAAAA,SAAAA,EAAWC,iBAAOS,cAAc;QAChCC,EAAAA,EAAInB,SAAAA;QACJoB,EAAAA,EAAIpB,SAAAA;AACJqB,QAAAA,CAAAA,EAAG,CAACrB,SAAAA,GAAYI,SAAQ,IAAK,CAAA;QAC7BkB,IAAAA,EAAK,MAAA;QACLC,WAAAA,EAAanB;;AAKvB;;;;"}

package/dist/esm-dev/packages/web/src/ui/components/atoms/CodeContainer.mjs CHANGED Viewed

@@ -1,6 +1,6 @@
 import React__default from 'react';
 import modules_51b5745b from './CodeContainer.module.css.mjs';
-import classNames from '../../../../../../_virtual/index3.mjs';
+import classNames from '../../../../../../_virtual/index.mjs';
 const CodeContainer = ({ children, className, ...props })=>/*#__PURE__*/ React__default.createElement("div", {
         className: classNames(className, modules_51b5745b.container),

package/dist/esm-dev/packages/web/src/ui/components/atoms/Column.mjs CHANGED Viewed

@@ -1,5 +1,5 @@
 import React__default, { forwardRef } from 'react';
-import classNames from '../../../../../../_virtual/index3.mjs';
+import classNames from '../../../../../../_virtual/index.mjs';
 import modules_82bdfbfc from './Column.module.css.mjs';
 /**

package/dist/esm-dev/packages/web/src/ui/components/atoms/Typography.mjs CHANGED Viewed

@@ -1,5 +1,5 @@
 import React__default, { forwardRef } from 'react';
-import classNames from '../../../../../../_virtual/index3.mjs';
+import classNames from '../../../../../../_virtual/index.mjs';
 import modules_1d7499fc from './Typography.module.css.mjs';
 const Typography = /*#__PURE__*/ forwardRef(({ variant = 'body', as = 'div', weight, font, color, align, className, ...props }, ref)=>{

package/dist/esm-dev/packages/web/src/ui/components/atoms/VerticalTransition.mjs CHANGED Viewed

@@ -1,5 +1,5 @@
 import React__default, { useState, useEffect } from 'react';
-import classNames from '../../../../../../_virtual/index3.mjs';
+import classNames from '../../../../../../_virtual/index.mjs';
 import modules_654ad754 from './VerticalTransition.module.css.mjs';
 /**

package/dist/esm-dev/packages/web/src/ui/components/atoms/VisuallyHidden.mjs CHANGED Viewed

@@ -1,5 +1,5 @@
 import React__default from 'react';
-import classNames from '../../../../../../_virtual/index3.mjs';
+import classNames from '../../../../../../_virtual/index.mjs';
 import modules_b0018d5a from './VisuallyHidden.module.css.mjs';
 const VisuallyHidden = ({ children, focusable })=>/*#__PURE__*/ React__default.createElement("div", {

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

@@ -1,42 +1,33 @@
 import React__default from 'react';
 import modules_b8928cee from './Watermark.module.css.mjs';
-const Watermark = ({ label, twilio })=>/*#__PURE__*/ React__default.createElement("a", {
+const Watermark = ({ label, logoText })=>/*#__PURE__*/ React__default.createElement("a", {
         className: modules_b8928cee.watermark,
         href: "https://stytch.com/",
         target: "_blank",
         rel: "noreferrer"
-    }, /*#__PURE__*/ React__default.createElement("svg", {
-        className: modules_b8928cee.stytch,
-        width: "20",
-        height: "20",
-        viewBox: "0 0 20 20",
+    }, /*#__PURE__*/ React__default.createElement("span", null, label, " "), /*#__PURE__*/ React__default.createElement("svg", {
+        xmlns: "http://www.w3.org/2000/svg",
         fill: "none",
-        xmlns: "http://www.w3.org/2000/svg"
+        viewBox: "0 0 261 40",
+        "aria-label": logoText,
+        height: "25px"
     }, /*#__PURE__*/ React__default.createElement("path", {
-        d: "M9.28889 9.32076V1H5.97576V4.84842C5.97576 5.55095 5.37953 6.12046 4.64404 6.12046H2V9.32076H9.28889Z"
-    }), /*#__PURE__*/ React__default.createElement("path", {
-        d: "M10.7111 9.32076V1H14.0242V4.84842C14.0242 5.55095 14.6205 6.12046 15.356 6.12046H18V9.32076H10.7111Z"
-    }), /*#__PURE__*/ React__default.createElement("path", {
-        d: "M9.28889 10.6792V19H5.97576V15.1516C5.97576 14.449 5.37953 13.8795 4.64404 13.8795H2V10.6792H9.28889Z"
+        className: modules_b8928cee.stytch,
+        d: "M29.7 12.82c0 .8.65 1.44 1.45 1.44h4.72c1.36 0 2.59.8 3.14 2.05l3.64 8.16 3.4-8.1a3.44 3.44 0 0 1 3.18-2.1h3.28v-5.3h3.94v3.85c0 .8.65 1.44 1.45 1.44h2.7v3.22h-4.15v7.61c0 1.55.4 1.95 1.94 1.95h2.06v3.3H56.6c-2.67 0-4.09-1.42-4.09-4.1v-8.76h-1.99c-.44 0-.77.19-.93.52L44.5 29l-.02 1.33c0 2.9-1.57 4.7-4.09 4.7h-6.55v-3.36h4.95c1.51 0 1.95-.07 1.95-1.65v-.83L35.44 18c-.16-.32-.49-.5-.93-.5h-4.8v7.6c0 1.55.39 1.95 1.93 1.95h1.95v3.3h-3.74c-2.68 0-4.1-1.42-4.1-4.1V8.98h3.95v3.84ZM16.72 8.98c4.47 0 6.79 1.78 7.07 5.43h-4.14c-.2-1.61-1.17-2.4-2.98-2.4-1.69 0-2.86 1.01-2.86 2.6s.67 2.32 2.56 2.77l2.47.6c3.63.9 5.26 2.69 5.26 5.8 0 4.17-2.84 6.57-7.43 6.57-4.6 0-7.2-2.11-7.55-6.12h3.98c.25 2.01 1.5 3.03 3.57 3.03 2.06 0 3.4-1.12 3.4-2.85 0-1.63-.83-2.45-2.94-2.93l-2.5-.57c-2.21-.53-4.85-1.97-4.85-5.83 0-3.65 2.8-6.1 6.94-6.1Zm64.68 0v7.4l.26-.32c.92-1.13 1.86-1.78 3.93-1.78 3.51 0 5.53 2.21 5.53 6.07v10h-3.94v-9.51c0-1.2-.34-2.14-.98-2.75a2.62 2.62 0 0 0-2.02-.67c-1.9.12-2.78 1.6-2.78 4.66v8.26h-3.94V8.98h3.94Zm-12.66 5.3c4.23 0 6.74 1.96 7.1 5.52h-3.9c-.3-1.51-1.28-2.22-3.07-2.22h-.26c-2.34 0-3.86 1.86-3.86 4.73s1.51 4.73 3.86 4.73h.26c1.79 0 2.76-.71 3.06-2.22h3.91c-.36 3.56-2.87 5.52-7.1 5.52-4.47 0-7.59-3.3-7.59-8.03 0-4.73 3.12-8.03 7.6-8.03Z"
     }), /*#__PURE__*/ React__default.createElement("path", {
-        d: "M10.7111 10.6792V19H14.0242V15.1516C14.0242 14.449 14.6205 13.8795 15.356 13.8795H18V10.6792H10.7111Z"
-    })), /*#__PURE__*/ React__default.createElement("span", null, label), /*#__PURE__*/ React__default.createElement("span", null, "+"), /*#__PURE__*/ React__default.createElement("svg", {
-        className: modules_b8928cee.twilio,
-        xmlns: "http://www.w3.org/2000/svg",
-        width: "68",
-        height: "20",
-        fill: "none",
-        "aria-label": twilio
-    }, /*#__PURE__*/ React__default.createElement("g", {
+        fill: "currentColor",
+        d: "M112.37 25.42v-4.1h-4.1V19h4.1v-4.12h2.47V19h4.07v2.3h-4.07v4.11h-2.47Z"
+    }), /*#__PURE__*/ React__default.createElement("g", {
         clipPath: "url(#a)"
     }, /*#__PURE__*/ React__default.createElement("path", {
-        d: "M48.55 11.23v-.1c0-1.01.42-1.42 1.01-1.42.6 0 1.02.41 1.02 1.42v.1c0 1-.42 1.4-1.02 1.4-.59 0-1-.4-1-1.4Zm-3.09.04c0 2.2 1.63 3.74 4.1 3.74 2.47 0 4.1-1.54 4.1-3.74v-.18c0-2.2-1.63-3.73-4.1-3.73-2.47 0-4.1 1.53-4.1 3.73v.18ZM42 6.84c0 .1.06.16.16.16h2.74c.09 0 .16-.07.16-.16V5.22c0-.1-.07-.16-.16-.16h-2.74c-.1 0-.16.06-.16.16v1.62Zm-.02 7.9c0 .1.07.16.16.16h2.74c.1 0 .16-.07.16-.16v-7.1c0-.09-.06-.15-.16-.15h-2.74c-.09 0-.16.06-.16.16v7.09Zm-3.6 0c0 .1.07.16.16.16h2.74c.1 0 .16-.07.16-.16V5.22c0-.1-.06-.16-.16-.16h-2.74c-.1 0-.16.06-.16.16v9.52Zm-3.6-7.9c0 .1.06.16.16.16h2.74c.1 0 .16-.07.16-.16V5.22c0-.1-.07-.16-.16-.16h-2.74c-.1 0-.16.06-.16.16v1.62Zm-9.34 8.06h2.65c.1 0 .13-.04.16-.13l.86-3.12.84 3.12c.03.09.07.13.16.13h2.69c.1 0 .17-.04.2-.13L34.78 8v6.74c0 .1.07.16.16.16h2.74c.1 0 .16-.07.16-.16v-7.1c0-.09-.07-.15-.16-.15h-5.55c-.09 0-.14.04-.17.15l-.63 3.05-.65-3.05c-.02-.1-.08-.15-.18-.15h-2.59c-.1 0-.16.05-.17.15l-.65 3.07-.6-3.07c-.03-.11-.09-.15-.18-.15h-4.44V5.18c0-.12-.08-.18-.22-.14L19 5.91a.2.2 0 0 0-.15.2v1.01c0 .29-.15.4-.44.4h-.58c-.09 0-.16.07-.16.17v1.99c0 .09.07.16.16.16h.98v2.5c0 1.74.63 2.67 2.72 2.67.81 0 1.45-.13 1.8-.3.1-.05.13-.12.13-.23v-1.94c0-.11-.1-.16-.23-.1-.17.08-.35.13-.55.13-.54 0-.81-.2-.81-.88V9.84h1.42c.09 0 .16-.07.16-.16V7.95l1.8 6.82c.02.1.09.13.2.13M8.44 8c0-.94.78-1.72 1.7-1.72.91 0 1.68.78 1.68 1.72 0 .93-.74 1.67-1.69 1.67-.94 0-1.68-.76-1.68-1.67Zm0 4.03a1.69 1.69 0 1 1 3.38 0 1.69 1.69 0 0 1-3.37 0ZM4.42 8c0-.94.74-1.72 1.69-1.72.94 0 1.7.78 1.7 1.72 0 .93-.77 1.67-1.7 1.67-.93 0-1.69-.76-1.69-1.67Zm0 4.03c0-.94.74-1.68 1.69-1.68.94 0 1.7.74 1.7 1.68a1.7 1.7 0 0 1-3.39 0ZM2.13 9.98a6 6 0 1 1 12 .03 6 6 0 0 1-12-.03Zm6-8.1a8.11 8.11 0 1 0 0 16.25 8.13 8.13 0 0 0 0-16.25Z"
+        className: modules_b8928cee.twilio,
+        d: "M239.55 22.64v-.2c0-2.18.9-3.05 2.18-3.05 1.28 0 2.17.87 2.17 3.05v.2c0 2.15-.9 3.02-2.17 3.02-1.28 0-2.18-.87-2.18-3.02Zm-6.64.09c0 4.73 3.51 8.04 8.82 8.04 5.3 0 8.81-3.31 8.81-8.04v-.38c0-4.73-3.5-8.02-8.81-8.02-5.3 0-8.82 3.29-8.82 8.02v.38Zm-7.45-9.53c0 .2.14.35.35.35h5.88c.2 0 .35-.14.35-.35V9.72c0-.2-.14-.35-.34-.35h-5.9c-.2 0-.34.14-.34.35v3.48Zm-.03 16.99c0 .2.14.35.35.35h5.88c.2 0 .35-.15.35-.35V14.94c0-.2-.14-.35-.34-.35h-5.9c-.2 0-.34.15-.34.35V30.2Zm-7.74 0c0 .2.14.35.34.35h5.9c.2 0 .34-.15.34-.35V9.72c0-.2-.14-.35-.35-.35h-5.89c-.2 0-.34.14-.34.35v20.47Zm-7.75-16.99c0 .2.15.35.35.35h5.89c.2 0 .35-.14.35-.35V9.72c0-.2-.15-.35-.35-.35h-5.89c-.2 0-.35.14-.35.35v3.48Zm-20.07 17.34h5.69c.2 0 .29-.1.35-.3l1.85-6.7 1.8 6.7c.06.2.15.3.35.3h5.77c.23 0 .38-.1.44-.3l3.82-14.54v14.49c0 .2.15.35.35.35h5.89c.2 0 .35-.15.35-.35V14.94c0-.2-.15-.34-.35-.34h-11.92c-.2 0-.32.08-.38.32l-1.36 6.56-1.4-6.56c-.02-.2-.16-.32-.37-.32h-5.57c-.2 0-.34.11-.37.32l-1.4 6.62-1.3-6.62c-.06-.24-.18-.32-.38-.32h-9.54V9.63c0-.26-.17-.38-.46-.29L176 11.2a.44.44 0 0 0-.32.43v2.18c0 .61-.32.87-.93.87h-1.24c-.2 0-.35.15-.35.35v4.27c0 .2.15.35.35.35h2.09v5.37c0 3.75 1.36 5.75 5.85 5.75 1.75 0 3.1-.29 3.86-.64.23-.12.3-.26.3-.5v-4.17c0-.24-.21-.35-.5-.2a2.8 2.8 0 0 1-1.19.26c-1.16 0-1.74-.44-1.74-1.9v-3.97h3.05c.2 0 .34-.15.34-.35v-3.72l3.86 14.67c.06.2.2.29.44.29m-36.52-14.87c0-2 1.65-3.69 3.63-3.69a3.7 3.7 0 0 1 3.62 3.69c0 2-1.6 3.6-3.62 3.6a3.6 3.6 0 0 1-3.63-3.6Zm0 8.68a3.63 3.63 0 1 1 7.26 0 3.63 3.63 0 0 1-7.26 0Zm-8.7-8.68c0-2 1.6-3.69 3.63-3.69a3.68 3.68 0 0 1 3.65 3.69c0 2-1.65 3.6-3.66 3.6-2 0-3.62-1.63-3.62-3.6Zm0 8.68a3.6 3.6 0 0 1 3.63-3.63 3.63 3.63 0 1 1-3.62 3.63Zm-4.9-4.38a12.9 12.9 0 0 1 12.9-12.87 12.9 12.9 0 0 1 0 25.78c-7.1 0-12.9-5.83-12.9-12.91Zm12.9-17.43a17.44 17.44 0 0 0-17.48 17.43 17.47 17.47 0 1 0 17.49-17.42Z"
     })), /*#__PURE__*/ React__default.createElement("defs", null, /*#__PURE__*/ React__default.createElement("clipPath", {
         id: "a"
     }, /*#__PURE__*/ React__default.createElement("path", {
         fill: "#fff",
-        d: "M0 1.88h53.7v16.24H0z"
+        d: "M135.18 2.54h115.44v34.91H135.18z"
     })))));
 export { Watermark as default };

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

	@@ -1 +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;;;;;"}
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, 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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

	@@ -1 +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;;;;"}
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'}\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 CHANGED Viewed

@@ -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 CHANGED Viewed

	@@ -1 +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~~;;;;"}
1	+ {"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 CHANGED Viewed

@@ -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 CHANGED Viewed

	@@ -1 +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;;;;"}
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} 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 CHANGED Viewed

@@ -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 CHANGED Viewed

	@@ -1 +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":";;;;;;;;;;;;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,~~MAAM~~,EAAA,OAAA,CAAA,CAAA,CAAA;;;;~~uBAKZV~~,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;;;;"}
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.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 CHANGED Viewed

@@ -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