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

package/dist/esm/packages/web/src/ui/b2c/screens/Secondary/PasswordlessAuthenticate.mjs.map

@@ -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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"}
+{"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().catch(() => {\n          // Swallow error to avoid unhandled promise errors, sendLink() will already show error toast\n        });\n        return;\n\n      case 'otp':\n        sendCode().catch(() => {\n          // Swallow error to avoid unhandled promise errors, sendLink() will already show error toast\n        });\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/packages/web/src/ui/b2c/screens/Secondary/usePasswordlessAuthenticate.mjs

@@ -0,0 +1,81 @@
+import { useLingui } from '../../../../../../../node_modules/@lingui/react/dist/index.mjs';
+import { useState } from 'react';
+import { useStytch, useConfig, useGlobalReducer, useEventCallback, useErrorCallback } from '../../GlobalContextProvider.mjs';
+import { convertMagicLinkOptions } from '../../../../utils/index.mjs';
+import { errorToast } from '../../../components/atoms/Toast.mjs';
+import { getTranslatedError } from '../../../../utils/getTranslatedError.mjs';
+import { DEFAULT_OTP_EXPIRATION_MINUTES } from '../../../../../../core/src/constants.mjs';
+import { StytchEventType, OTPMethods } from '../../../../../../core/src/public/ui.mjs';
+
+function usePasswordlessAuthenticate() {
+    const { i18n: $__i18n, _: $__ } = useLingui();
+    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);
+            errorToast({
+                message: getTranslatedError(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);
+            errorToast({
+                message: getTranslatedError(e, $__)
+            });
+            throw e;
+        } finally{
+            setIsSubmitting(false);
+        }
+    };
+    return {
+        sendLink,
+        sendCode,
+        isSubmitting
+    };
+}
+
+export { usePasswordlessAuthenticate };
+//# sourceMappingURL=usePasswordlessAuthenticate.mjs.map

package/dist/esm/packages/web/src/ui/b2c/screens/Secondary/usePasswordlessAuthenticate.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"usePasswordlessAuthenticate.mjs","sources":["../../../../../../../../../../web/src/ui/b2c/screens/Secondary/usePasswordlessAuthenticate.ts"],"sourcesContent":["import { useLingui } from '@lingui/react/macro';\nimport { 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';\nimport { errorToast } from '../../../components/atoms/Toast';\nimport { getTranslatedError } from '../../../../utils/getTranslatedError';\n\nexport function usePasswordlessAuthenticate() {\n  const { t } = useLingui();\n\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      errorToast({ message: getTranslatedError(e as StytchSDKAPIError, t) });\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      errorToast({ message: getTranslatedError(e as StytchSDKAPIError, t) });\n      throw e;\n    } finally {\n      setIsSubmitting(false);\n    }\n  };\n\n  return {\n    sendLink,\n    sendCode,\n    isSubmitting,\n  };\n}\n"],"names":["usePasswordlessAuthenticate","useLingui","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","errorToast","message","getTranslatedError","sendCode","otps","expiration_minutes","expirationMinutes","DEFAULT_OTP_EXPIRATION_MINUTES","locale","OTPsLoginOrCreateEvent","otpState","OTPMethods","Email","methodId","method_id","otpDestination"],"mappings":"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"}

package/dist/esm/packages/web/src/ui/compat/generateColorFallback.mjs

@@ -0,0 +1,63 @@
+import '../../../../../node_modules/chroma-js/index.mjs';
+import chroma from '../../../../../node_modules/chroma-js/src/chroma.mjs';
+
+/* eslint-disable lingui/no-unlocalized-strings */ function rgba(color) {
+    if (color.alpha() === 1) return `rgb(${color.rgb().join(',')})`;
+    return `rgba(${color.rgba().join(',')})`;
+}
+/**
+ * Takes a theme and dynamically generate the styles that uses color-mix,
+ * as a fallback for browsers that do not support color-mix()
+ */ function generateColorFallback(theme) {
+    // Don't use chroma.colorMix since chroma.js treats transparent as rgba(0, 0, 0, 0)
+    // which means our color is mixed with black rather than the original color
+    // with alpha 0, which is what browsers so instead
+    return {
+        // --tab-background: color-mix(in oklab, var(--accent) 80%, transparent);
+        'tab-background': rgba(chroma(theme.accent).alpha(0.8)),
+        // --primary-button-hover: color-mix(in oklab, var(--primary) 90%, transparent);
+        'primary-button-hover': rgba(chroma(theme.primary).alpha(0.9)),
+        // --secondary-button-hover: color-mix(in oklab, var(--secondary) 80%, transparent);
+        'secondary-button-hover': rgba(chroma(theme.secondary).alpha(0.8)),
+        // --destructive-button-hover: color-mix(in oklab, var(--destructive) 80%, transparent);
+        'destructive-button-hover': rgba(chroma(theme.destructive).alpha(0.8)),
+        // --divider-color: color-mix(in oklab, var(--border) 50%, transparent);
+        'divider-color': rgba(chroma(theme.border).alpha(0.5)),
+        // --focus-ring-shadow: 0 0 0 3px color-mix(in oklab, var(--ring) 50%, transparent);
+        'focus-ring-shadow': `0 0 0 3px ${rgba(chroma(theme.ring).alpha(0.5))}`
+    };
+}
+const colors = [
+    'background',
+    'foreground',
+    'primary',
+    'primary-foreground',
+    'secondary',
+    'secondary-foreground',
+    'muted',
+    'muted-foreground',
+    'accent',
+    'accent-foreground',
+    'border',
+    'input',
+    'ring',
+    'destructive',
+    'warning',
+    'success'
+];
+function addColorFallback(theme) {
+    const updatedTheme = {
+        ...theme,
+        ...generateColorFallback(theme)
+    };
+    // RGB fallbacks for all Theme colors that use oklch, if the customer's browsers
+    // don't support them
+    for (const property of colors){
+        if (!chroma.valid(theme[property])) continue;
+        updatedTheme[property] = rgba(chroma(theme[property]));
+    }
+    return updatedTheme;
+}
+
+export { addColorFallback, generateColorFallback };
+//# sourceMappingURL=generateColorFallback.mjs.map

package/dist/esm/packages/web/src/ui/compat/generateColorFallback.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"generateColorFallback.mjs","sources":["../../../../../../../../web/src/ui/compat/generateColorFallback.ts"],"sourcesContent":["import chroma from 'chroma-js';\n\nimport type { ColorMixFallback, Theme } from '../components/themes/ThemeConfig';\n\n/* eslint-disable lingui/no-unlocalized-strings */\n\nfunction rgba(color: chroma.Color) {\n  if (color.alpha() === 1) return `rgb(${color.rgb().join(',')})`;\n  return `rgba(${color.rgba().join(',')})`;\n}\n\n/**\n * Takes a theme and dynamically generate the styles that uses color-mix,\n * as a fallback for browsers that do not support color-mix()\n */\nexport function generateColorFallback(theme: Theme): ColorMixFallback {\n  // Don't use chroma.colorMix since chroma.js treats transparent as rgba(0, 0, 0, 0)\n  // which means our color is mixed with black rather than the original color\n  // with alpha 0, which is what browsers so instead\n  return {\n    // --tab-background: color-mix(in oklab, var(--accent) 80%, transparent);\n    'tab-background': rgba(chroma(theme.accent).alpha(0.8)),\n    // --primary-button-hover: color-mix(in oklab, var(--primary) 90%, transparent);\n    'primary-button-hover': rgba(chroma(theme.primary).alpha(0.9)),\n    // --secondary-button-hover: color-mix(in oklab, var(--secondary) 80%, transparent);\n    'secondary-button-hover': rgba(chroma(theme.secondary).alpha(0.8)),\n    // --destructive-button-hover: color-mix(in oklab, var(--destructive) 80%, transparent);\n    'destructive-button-hover': rgba(chroma(theme.destructive).alpha(0.8)),\n    // --divider-color: color-mix(in oklab, var(--border) 50%, transparent);\n    'divider-color': rgba(chroma(theme.border).alpha(0.5)),\n    // --focus-ring-shadow: 0 0 0 3px color-mix(in oklab, var(--ring) 50%, transparent);\n    'focus-ring-shadow': `0 0 0 3px ${rgba(chroma(theme.ring).alpha(0.5))}`,\n  };\n}\n\nconst colors = [\n  'background',\n  'foreground',\n  'primary',\n  'primary-foreground',\n  'secondary',\n  'secondary-foreground',\n  'muted',\n  'muted-foreground',\n  'accent',\n  'accent-foreground',\n  'border',\n  'input',\n  'ring',\n  'destructive',\n  'warning',\n  'success',\n] as const satisfies (keyof Theme)[];\n\nexport function addColorFallback(theme: Theme): Theme {\n  const updatedTheme = { ...theme, ...generateColorFallback(theme) };\n\n  // RGB fallbacks for all Theme colors that use oklch, if the customer's browsers\n  // don't support them\n  for (const property of colors) {\n    if (!chroma.valid(theme[property])) continue;\n    updatedTheme[property] = rgba(chroma(theme[property]!));\n  }\n\n  return updatedTheme;\n}\n"],"names":["rgba","color","alpha","rgb","join","generateColorFallback","theme","chroma","accent","primary","secondary","destructive","border","ring","colors","addColorFallback","updatedTheme","property","valid"],"mappings":";;;AAIA,mDAEA,SAASA,IAAAA,CAAKC,KAAmB,EAAA;AAC/B,IAAA,IAAIA,KAAAA,CAAMC,KAAK,EAAA,KAAO,CAAA,EAAG,OAAO,CAAC,IAAI,EAAED,KAAAA,CAAME,GAAG,EAAA,CAAGC,IAAI,CAAC,GAAA,CAAA,CAAK,CAAC,CAAC;IAC/D,OAAO,CAAC,KAAK,EAAEH,KAAAA,CAAMD,IAAI,GAAGI,IAAI,CAAC,GAAA,CAAA,CAAK,CAAC,CAAC;AAC1C;AAEA;;;IAIO,SAASC,qBAAAA,CAAsBC,KAAY,EAAA;;;;IAIhD,OAAO;;AAEL,QAAA,gBAAA,EAAkBN,KAAKO,MAAAA,CAAOD,KAAAA,CAAME,MAAM,CAAA,CAAEN,KAAK,CAAC,GAAA,CAAA,CAAA;;AAElD,QAAA,sBAAA,EAAwBF,KAAKO,MAAAA,CAAOD,KAAAA,CAAMG,OAAO,CAAA,CAAEP,KAAK,CAAC,GAAA,CAAA,CAAA;;AAEzD,QAAA,wBAAA,EAA0BF,KAAKO,MAAAA,CAAOD,KAAAA,CAAMI,SAAS,CAAA,CAAER,KAAK,CAAC,GAAA,CAAA,CAAA;;AAE7D,QAAA,0BAAA,EAA4BF,KAAKO,MAAAA,CAAOD,KAAAA,CAAMK,WAAW,CAAA,CAAET,KAAK,CAAC,GAAA,CAAA,CAAA;;AAEjE,QAAA,eAAA,EAAiBF,KAAKO,MAAAA,CAAOD,KAAAA,CAAMM,MAAM,CAAA,CAAEV,KAAK,CAAC,GAAA,CAAA,CAAA;;QAEjD,mBAAA,EAAqB,CAAC,UAAU,EAAEF,IAAAA,CAAKO,MAAAA,CAAOD,MAAMO,IAAI,CAAA,CAAEX,KAAK,CAAC,GAAA,CAAA,CAAA,CAAA;AAClE,KAAA;AACF;AAEA,MAAMY,MAAAA,GAAS;AACb,IAAA,YAAA;AACA,IAAA,YAAA;AACA,IAAA,SAAA;AACA,IAAA,oBAAA;AACA,IAAA,WAAA;AACA,IAAA,sBAAA;AACA,IAAA,OAAA;AACA,IAAA,kBAAA;AACA,IAAA,QAAA;AACA,IAAA,mBAAA;AACA,IAAA,QAAA;AACA,IAAA,OAAA;AACA,IAAA,MAAA;AACA,IAAA,aAAA;AACA,IAAA,SAAA;AACA,IAAA;AACD,CAAA;AAEM,SAASC,iBAAiBT,KAAY,EAAA;AAC3C,IAAA,MAAMU,YAAAA,GAAe;AAAE,QAAA,GAAGV,KAAK;AAAE,QAAA,GAAGD,sBAAsBC,KAAAA;AAAO,KAAA;;;IAIjE,KAAK,MAAMW,YAAYH,MAAAA,CAAQ;AAC7B,QAAA,IAAI,CAACP,MAAAA,CAAOW,KAAK,CAACZ,KAAK,CAACW,SAAS,CAAA,EAAG;AACpCD,QAAAA,YAAY,CAACC,QAAAA,CAAS,GAAGjB,KAAKO,MAAAA,CAAOD,KAAK,CAACW,QAAAA,CAAS,CAAA,CAAA;AACtD,IAAA;IAEA,OAAOD,YAAAA;AACT;;;;"}

package/dist/esm/packages/web/src/ui/compat/styleToTheme.mjs

@@ -0,0 +1,117 @@
+/* eslint-disable lingui/no-unlocalized-strings */ /**
+ * Maps a legacy StyleConfig to the new Theme format.
+ *
+ * This is a best-effort mapping - some StyleConfig properties don't have
+ * direct equivalents in Theme, and some Theme properties don't have
+ * StyleConfig equivalents.
+ *
+ * StyleConfig properties that don't have good mappings to Theme:
+ *  - inputs.placeholderColor - No equivalent (could potentially map to muted-foreground)
+ *  - inputs.textColor - Mapped to foreground as approximation, but is input-specific
+ *  - buttons.primary.borderColor - No specific mapping (could use border but loses specificity)
+ *  - buttons.primary.borderRadius - Mapped to button-radius but loses primary-specific control
+ *  - buttons.secondary.borderColor - No specific mapping (could use border but loses specificity)
+ *  - buttons.secondary.borderRadius - Mapped to button-radius but loses secondary-specific control
+ *  - buttons.disabled.* - No equivalents (disabled state styling not in Theme)
+ *
+ * Theme properties that don't have StyleConfig equivalents:
+ *  - 'transition-duration' - defaulted to 0 instead of 0.15s in our new default theme
+ *  - 'font-family-mono' - defaults to theme default which is system UI monospace
+ *  - 'text-base' - defaults to 1rem which is close to the old font sizes
+ *  - spacing - defaults to new theme default which is close but not equivalent to old spacing
+ *  - shadow, 'shadow-button', 'shadow-input' - no default in new theme
+ *  - foreground - Approximated from inputs.textColor but not exact
+ *  - muted, 'muted-foreground'
+ *  - 'accent-foreground'
+ *  - ring - previously defaults to OS default focus outline color
+ */ function styleToTheme(styleConfig, { silent } = {}) {
+    const theme = {};
+    const options = {};
+    const { colors, container, inputs, hideHeaderText, buttons, logo, fontFamily, ...outerEmpty } = styleConfig;
+    theme['font-family'] = fontFamily;
+    if (colors) {
+        const { primary, secondary, success, warning, accent, error, ...expectEmpty } = colors;
+        Object.assign(theme, {
+            primary,
+            secondary,
+            success,
+            warning,
+            accent,
+            destructive: error
+        });
+    }
+    if (container) {
+        const { backgroundColor, borderColor, width, borderRadius, ...expectEmpty } = container;
+        Object.assign(theme, {
+            background: backgroundColor,
+            border: borderColor,
+            'container-width': width,
+            // 1/4 because the new base is quite small and most components use a 2x or 4x multiplier
+            'rounded-base': updateLength(borderRadius, 0.25)
+        });
+    }
+    if (buttons) {
+        const { primary, secondary, disabled, ...expectEmpty } = buttons;
+        // Set background and text colors
+        Object.assign(theme, {
+            primary: primary?.backgroundColor,
+            'primary-foreground': primary?.textColor,
+            secondary: secondary?.backgroundColor,
+            'secondary-foreground': secondary?.textColor
+        });
+        // Set border radius
+        if (primary?.borderRadius || secondary?.borderRadius) {
+            // Conflicts between primary and secondary border radius is handled above
+            const baseRadius = updateLength(primary?.borderRadius, 0.5) ?? updateLength(secondary?.borderRadius, 0.5);
+            if (theme['rounded-base']) {
+                if (theme['rounded-base'] !== baseRadius) {
+                    theme['button-radius'] = primary?.borderRadius;
+                }
+            } else {
+                theme['rounded-base'] = baseRadius;
+            }
+        }
+    }
+    if (inputs) {
+        const { backgroundColor, textColor, placeholderColor, borderColor, borderRadius, ...expectEmpty } = inputs;
+        Object.assign(theme, {
+            foreground: textColor,
+            input: borderColor,
+            'muted-foreground': placeholderColor
+        });
+        // Set border radius
+        if (theme['rounded-base']) {
+            if (theme['rounded-base'] !== borderRadius) {
+                theme['input-radius'] = borderRadius;
+            }
+        } else {
+            theme['rounded-base'] = borderRadius;
+        }
+    }
+    // presentation.options mapping
+    // ------------------------------------------------
+    options.hideHeaderText = hideHeaderText;
+    if (logo?.logoImageUrl) {
+        options.logo = {
+            url: logo.logoImageUrl,
+            alt: ''
+        };
+    }
+    return {
+        theme: removeEmptyValues(theme),
+        options: removeEmptyValues(options)
+    };
+}
+function removeEmptyValues(obj) {
+    return Object.fromEntries(Object.entries(obj).filter(([, value])=>value != null && value !== ''));
+}
+function updateLength(length, factor) {
+    if (!length) return length;
+    // Loose check that this is a numeric and not keyword value
+    const value = parseFloat(length);
+    if (Number.isNaN(value)) return length;
+    return `calc(${length} * ${factor})`;
+}
+
+export { styleToTheme };
+//# sourceMappingURL=styleToTheme.mjs.map

package/dist/esm/packages/web/src/ui/compat/styleToTheme.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"styleToTheme.mjs","sources":["../../../../../../../../web/src/ui/compat/styleToTheme.ts"],"sourcesContent":["import type { StyleConfig } from '@stytch/core/public';\nimport type { Theme } from '../components/themes/ThemeConfig';\nimport type { PresentationOptions } from '../components/PresentationConfig';\nimport { logger } from '@stytch/core';\n\n/* eslint-disable lingui/no-unlocalized-strings */\n\n/**\n * Maps a legacy StyleConfig to the new Theme format.\n *\n * This is a best-effort mapping - some StyleConfig properties don't have\n * direct equivalents in Theme, and some Theme properties don't have\n * StyleConfig equivalents.\n *\n * StyleConfig properties that don't have good mappings to Theme:\n *  - inputs.placeholderColor - No equivalent (could potentially map to muted-foreground)\n *  - inputs.textColor - Mapped to foreground as approximation, but is input-specific\n *  - buttons.primary.borderColor - No specific mapping (could use border but loses specificity)\n *  - buttons.primary.borderRadius - Mapped to button-radius but loses primary-specific control\n *  - buttons.secondary.borderColor - No specific mapping (could use border but loses specificity)\n *  - buttons.secondary.borderRadius - Mapped to button-radius but loses secondary-specific control\n *  - buttons.disabled.* - No equivalents (disabled state styling not in Theme)\n *\n * Theme properties that don't have StyleConfig equivalents:\n *  - 'transition-duration' - defaulted to 0 instead of 0.15s in our new default theme\n *  - 'font-family-mono' - defaults to theme default which is system UI monospace\n *  - 'text-base' - defaults to 1rem which is close to the old font sizes\n *  - spacing - defaults to new theme default which is close but not equivalent to old spacing\n *  - shadow, 'shadow-button', 'shadow-input' - no default in new theme\n *  - foreground - Approximated from inputs.textColor but not exact\n *  - muted, 'muted-foreground'\n *  - 'accent-foreground'\n *  - ring - previously defaults to OS default focus outline color\n */\nexport function styleToTheme(\n  styleConfig: StyleConfig,\n  { silent }: { silent?: boolean } = {},\n): {\n  theme: Partial<Theme>;\n  options: Partial<PresentationOptions>;\n} {\n  const warn = silent\n    ? () => {\n        // noop\n      }\n    : logger.warn;\n  const error = silent\n    ? () => {\n        // noop\n      }\n    : logger.error;\n\n  const theme: Partial<Theme> = {};\n  const options: Partial<PresentationOptions> = {};\n\n  const { colors, container, inputs, hideHeaderText, buttons, logo, fontFamily, ...outerEmpty } = styleConfig;\n\n  // presentation.theme mapping\n  // ------------------------------------------------\n  if (process.env.NODE_ENV !== 'production') {\n    warn(\n      \"styleToTheme: We recommend setting theme['color-scheme'] to either 'light' or 'dark' explicitly depending on whether this is a light or dark theme. This enables icons to automatically automatically apply contrasting colors.\",\n    );\n\n    if (Object.keys(outerEmpty).length > 0) warn('styleToTheme: Unrecognized style properties', outerEmpty);\n  }\n\n  theme['font-family'] = fontFamily;\n\n  if (colors) {\n    const { primary, secondary, success, warning, accent, error, ...expectEmpty } = colors;\n    if (process.env.NODE_ENV !== 'production') {\n      if (Object.keys(expectEmpty).length > 0) warn('styleToTheme: Unrecognized style.colors properties', expectEmpty);\n    }\n\n    Object.assign(theme, {\n      primary,\n      secondary,\n      success,\n      warning,\n      accent,\n      destructive: error,\n    } satisfies Partial<Theme>);\n  }\n\n  if (container) {\n    const { backgroundColor, borderColor, width, borderRadius, ...expectEmpty } = container;\n\n    if (process.env.NODE_ENV !== 'production') {\n      if (Object.keys(expectEmpty).length > 0)\n        warn('styleToTheme: Unrecognized style.container properties', expectEmpty);\n    }\n\n    Object.assign(theme, {\n      background: backgroundColor,\n      border: borderColor,\n      'container-width': width,\n      // 1/4 because the new base is quite small and most components use a 2x or 4x multiplier\n      'rounded-base': updateLength(borderRadius, 0.25),\n    } satisfies Partial<Theme>);\n  }\n\n  if (buttons) {\n    const { primary, secondary, disabled, ...expectEmpty } = buttons;\n\n    if (process.env.NODE_ENV !== 'production') {\n      if (Object.keys(expectEmpty).length > 0) warn('styleToTheme: Unrecognized style.buttons properties', expectEmpty);\n\n      if (disabled && Object.keys(disabled).length > 0)\n        warn('styleToTheme: buttons.disabled is no longer supported', { disabled });\n\n      if (primary?.borderColor && primary?.backgroundColor && primary.borderColor !== primary.backgroundColor)\n        error(\n          \"styleToTheme: primary button's border color is now always equal to background color, having distinct colors is no longer supported\",\n          {\n            borderColor: primary.borderColor,\n            backgroundColor: primary.backgroundColor,\n          },\n        );\n\n      if (secondary?.borderColor && secondary.textColor && secondary.borderColor !== secondary.textColor)\n        error(\"styleToTheme: secondary button's border color is now always equal to text color\", {\n          borderColor: secondary.borderColor,\n          textColor: secondary.textColor,\n        });\n\n      if (primary?.borderRadius !== secondary?.borderRadius)\n        error('styleToTheme: All buttons must use the same border-radius', {\n          primaryRadius: primary?.borderRadius,\n          secondaryRadius: secondary?.borderRadius,\n        });\n    }\n\n    // Set background and text colors\n    Object.assign(theme, {\n      primary: primary?.backgroundColor,\n      'primary-foreground': primary?.textColor,\n\n      secondary: secondary?.backgroundColor,\n      'secondary-foreground': secondary?.textColor,\n    } satisfies Partial<Theme>);\n\n    // Set border radius\n    if (primary?.borderRadius || secondary?.borderRadius) {\n      // Conflicts between primary and secondary border radius is handled above\n      const baseRadius = updateLength(primary?.borderRadius, 0.5) ?? updateLength(secondary?.borderRadius, 0.5);\n\n      if (theme['rounded-base']) {\n        if (theme['rounded-base'] !== baseRadius) {\n          theme['button-radius'] = primary?.borderRadius;\n        }\n      } else {\n        theme['rounded-base'] = baseRadius;\n      }\n    }\n  }\n\n  if (inputs) {\n    const { backgroundColor, textColor, placeholderColor, borderColor, borderRadius, ...expectEmpty } = inputs;\n    if (process.env.NODE_ENV !== 'production') {\n      if (Object.keys(expectEmpty).length > 0) warn('styleToTheme: Unrecognized style.buttons properties', expectEmpty);\n\n      if (backgroundColor && theme.background && theme.background !== backgroundColor)\n        error('styleToTheme: Input now always use the container background', {\n          inputBackground: backgroundColor,\n          containerBackground: theme.background,\n        });\n    }\n\n    Object.assign(theme, {\n      foreground: textColor,\n      input: borderColor,\n      'muted-foreground': placeholderColor,\n    } satisfies Partial<Theme>);\n\n    // Set border radius\n    if (theme['rounded-base']) {\n      if (theme['rounded-base'] !== borderRadius) {\n        theme['input-radius'] = borderRadius;\n      }\n    } else {\n      theme['rounded-base'] = borderRadius;\n    }\n  }\n\n  // presentation.options mapping\n  // ------------------------------------------------\n\n  options.hideHeaderText = hideHeaderText;\n  if (logo?.logoImageUrl) {\n    options.logo = {\n      url: logo.logoImageUrl,\n      alt: '',\n    };\n\n    if (process.env.NODE_ENV !== 'production') {\n      logger.warn('styleToTheme: Please set options.logo.alt for the logo alt text for accessibility');\n    }\n  }\n\n  return { theme: removeEmptyValues(theme), options: removeEmptyValues(options) };\n}\n\nfunction removeEmptyValues<T extends Record<string, unknown>>(obj: T): T {\n  return Object.fromEntries(Object.entries(obj).filter(([, value]) => value != null && value !== '')) as T;\n}\n\nfunction updateLength(length: string | undefined, factor: number): string | undefined {\n  if (!length) return length;\n\n  // Loose check that this is a numeric and not keyword value\n  const value = parseFloat(length);\n  if (Number.isNaN(value)) return length;\n\n  return `calc(${length} * ${factor})`;\n}\n"],"names":["styleToTheme","styleConfig","silent","theme","options","colors","container","inputs","hideHeaderText","buttons","logo","fontFamily","outerEmpty","primary","secondary","success","warning","accent","error","expectEmpty","Object","assign","destructive","backgroundColor","borderColor","width","borderRadius","background","border","updateLength","disabled","textColor","baseRadius","placeholderColor","foreground","input","logoImageUrl","url","alt","removeEmptyValues","obj","fromEntries","entries","filter","value","length","factor","parseFloat","Number","isNaN"],"mappings":"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"}

package/dist/esm/packages/web/src/ui/components/atoms/AnimatedContainer.mjs

@@ -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/packages/web/src/ui/components/atoms/Button.mjs

@@ -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/packages/web/src/ui/components/atoms/CircularProgress.mjs

@@ -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/packages/web/src/ui/components/atoms/CircularProgress.mjs.map

@@ -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;;;;"}
+{"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/packages/web/src/ui/components/atoms/CodeContainer.mjs

@@ -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/packages/web/src/ui/components/atoms/Column.mjs

@@ -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/packages/web/src/ui/components/atoms/Typography.mjs

@@ -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/packages/web/src/ui/components/atoms/VerticalTransition.mjs

@@ -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/packages/web/src/ui/components/atoms/VisuallyHidden.mjs

@@ -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/packages/web/src/ui/components/atoms/Watermark.mjs

@@ -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/packages/web/src/ui/components/atoms/Watermark.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Watermark.mjs","sources":["../../../../../../../../../web/src/ui/components/atoms/Watermark.tsx"],"sourcesContent":["import React from 'react';\nimport styles from './Watermark.module.css';\n\nconst Watermark = ({ label, twilio }: { label: string; twilio: string }) => (\n  <a className={styles.watermark} href=\"https://stytch.com/\" target=\"_blank\" rel=\"noreferrer\">\n    <svg\n      className={styles.stytch}\n      width=\"20\"\n      height=\"20\"\n      viewBox=\"0 0 20 20\"\n      fill=\"none\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n    >\n      <path d=\"M9.28889 9.32076V1H5.97576V4.84842C5.97576 5.55095 5.37953 6.12046 4.64404 6.12046H2V9.32076H9.28889Z\" />\n      <path d=\"M10.7111 9.32076V1H14.0242V4.84842C14.0242 5.55095 14.6205 6.12046 15.356 6.12046H18V9.32076H10.7111Z\" />\n      <path d=\"M9.28889 10.6792V19H5.97576V15.1516C5.97576 14.449 5.37953 13.8795 4.64404 13.8795H2V10.6792H9.28889Z\" />\n      <path d=\"M10.7111 10.6792V19H14.0242V15.1516C14.0242 14.449 14.6205 13.8795 15.356 13.8795H18V10.6792H10.7111Z\" />\n    </svg>\n\n    <span>{label}</span>\n\n    <span>+</span>\n\n    <svg\n      className={styles.twilio}\n      xmlns=\"http://www.w3.org/2000/svg\"\n      width=\"68\"\n      height=\"20\"\n      fill=\"none\"\n      aria-label={twilio}\n    >\n      <g clipPath=\"url(#a)\">\n        <path d=\"M48.55 11.23v-.1c0-1.01.42-1.42 1.01-1.42.6 0 1.02.41 1.02 1.42v.1c0 1-.42 1.4-1.02 1.4-.59 0-1-.4-1-1.4Zm-3.09.04c0 2.2 1.63 3.74 4.1 3.74 2.47 0 4.1-1.54 4.1-3.74v-.18c0-2.2-1.63-3.73-4.1-3.73-2.47 0-4.1 1.53-4.1 3.73v.18ZM42 6.84c0 .1.06.16.16.16h2.74c.09 0 .16-.07.16-.16V5.22c0-.1-.07-.16-.16-.16h-2.74c-.1 0-.16.06-.16.16v1.62Zm-.02 7.9c0 .1.07.16.16.16h2.74c.1 0 .16-.07.16-.16v-7.1c0-.09-.06-.15-.16-.15h-2.74c-.09 0-.16.06-.16.16v7.09Zm-3.6 0c0 .1.07.16.16.16h2.74c.1 0 .16-.07.16-.16V5.22c0-.1-.06-.16-.16-.16h-2.74c-.1 0-.16.06-.16.16v9.52Zm-3.6-7.9c0 .1.06.16.16.16h2.74c.1 0 .16-.07.16-.16V5.22c0-.1-.07-.16-.16-.16h-2.74c-.1 0-.16.06-.16.16v1.62Zm-9.34 8.06h2.65c.1 0 .13-.04.16-.13l.86-3.12.84 3.12c.03.09.07.13.16.13h2.69c.1 0 .17-.04.2-.13L34.78 8v6.74c0 .1.07.16.16.16h2.74c.1 0 .16-.07.16-.16v-7.1c0-.09-.07-.15-.16-.15h-5.55c-.09 0-.14.04-.17.15l-.63 3.05-.65-3.05c-.02-.1-.08-.15-.18-.15h-2.59c-.1 0-.16.05-.17.15l-.65 3.07-.6-3.07c-.03-.11-.09-.15-.18-.15h-4.44V5.18c0-.12-.08-.18-.22-.14L19 5.91a.2.2 0 0 0-.15.2v1.01c0 .29-.15.4-.44.4h-.58c-.09 0-.16.07-.16.17v1.99c0 .09.07.16.16.16h.98v2.5c0 1.74.63 2.67 2.72 2.67.81 0 1.45-.13 1.8-.3.1-.05.13-.12.13-.23v-1.94c0-.11-.1-.16-.23-.1-.17.08-.35.13-.55.13-.54 0-.81-.2-.81-.88V9.84h1.42c.09 0 .16-.07.16-.16V7.95l1.8 6.82c.02.1.09.13.2.13M8.44 8c0-.94.78-1.72 1.7-1.72.91 0 1.68.78 1.68 1.72 0 .93-.74 1.67-1.69 1.67-.94 0-1.68-.76-1.68-1.67Zm0 4.03a1.69 1.69 0 1 1 3.38 0 1.69 1.69 0 0 1-3.37 0ZM4.42 8c0-.94.74-1.72 1.69-1.72.94 0 1.7.78 1.7 1.72 0 .93-.77 1.67-1.7 1.67-.93 0-1.69-.76-1.69-1.67Zm0 4.03c0-.94.74-1.68 1.69-1.68.94 0 1.7.74 1.7 1.68a1.7 1.7 0 0 1-3.39 0ZM2.13 9.98a6 6 0 1 1 12 .03 6 6 0 0 1-12-.03Zm6-8.1a8.11 8.11 0 1 0 0 16.25 8.13 8.13 0 0 0 0-16.25Z\" />\n      </g>\n      <defs>\n        <clipPath id=\"a\">\n          <path fill=\"#fff\" d=\"M0 1.88h53.7v16.24H0z\" />\n        </clipPath>\n      </defs>\n    </svg>\n  </a>\n);\n\nexport default Watermark;\n"],"names":["Watermark","label","twilio","React","a","className","styles","watermark","href","target","rel","svg","stytch","width","height","viewBox","fill","xmlns","path","d","span","aria-label","g","clipPath","defs","id"],"mappings":";;;AAGA,MAAMA,SAAAA,GAAY,CAAC,EAAEC,KAAK,EAAEC,MAAM,EAAqC,iBACrEC,cAAA,CAAA,aAAA,CAACC,GAAAA,EAAAA;AAAEC,QAAAA,SAAAA,EAAWC,iBAAOC,SAAS;QAAEC,IAAAA,EAAK,qBAAA;QAAsBC,MAAAA,EAAO,QAAA;QAASC,GAAAA,EAAI;qBAC7EP,cAAA,CAAA,aAAA,CAACQ,KAAAA,EAAAA;AACCN,QAAAA,SAAAA,EAAWC,iBAAOM,MAAM;QACxBC,KAAAA,EAAM,IAAA;QACNC,MAAAA,EAAO,IAAA;QACPC,OAAAA,EAAQ,WAAA;QACRC,IAAAA,EAAK,MAAA;QACLC,KAAAA,EAAM;qBAENd,cAAA,CAAA,aAAA,CAACe,MAAAA,EAAAA;QAAKC,CAAAA,EAAE;sBACRhB,cAAA,CAAA,aAAA,CAACe,MAAAA,EAAAA;QAAKC,CAAAA,EAAE;sBACRhB,cAAA,CAAA,aAAA,CAACe,MAAAA,EAAAA;QAAKC,CAAAA,EAAE;sBACRhB,cAAA,CAAA,aAAA,CAACe,MAAAA,EAAAA;QAAKC,CAAAA,EAAE;AAGV,KAAA,CAAA,CAAA,gBAAAhB,cAAA,CAAA,aAAA,CAACiB,MAAAA,EAAAA,IAAAA,EAAMnB,KAAAA,CAAAA,gBAEPE,cAAA,CAAA,aAAA,CAACiB,MAAAA,EAAAA,IAAAA,EAAK,oBAENjB,cAAA,CAAA,aAAA,CAACQ,KAAAA,EAAAA;AACCN,QAAAA,SAAAA,EAAWC,iBAAOJ,MAAM;QACxBe,KAAAA,EAAM,4BAAA;QACNJ,KAAAA,EAAM,IAAA;QACNC,MAAAA,EAAO,IAAA;QACPE,IAAAA,EAAK,MAAA;QACLK,YAAAA,EAAYnB;qBAEZC,cAAA,CAAA,aAAA,CAACmB,GAAAA,EAAAA;QAAEC,QAAAA,EAAS;qBACVpB,cAAA,CAAA,aAAA,CAACe,MAAAA,EAAAA;QAAKC,CAAAA,EAAE;AAEV,KAAA,CAAA,CAAA,gBAAAhB,cAAA,CAAA,aAAA,CAACqB,4BACCrB,cAAA,CAAA,aAAA,CAACoB,UAAAA,EAAAA;QAASE,EAAAA,EAAG;qBACXtB,cAAA,CAAA,aAAA,CAACe,MAAAA,EAAAA;QAAKF,IAAAA,EAAK,MAAA;QAAOG,CAAAA,EAAE;;;;;"}
+{"version":3,"file":"Watermark.mjs","sources":["../../../../../../../../../web/src/ui/components/atoms/Watermark.tsx"],"sourcesContent":["import React from 'react';\nimport styles from './Watermark.module.css';\n\nconst Watermark = ({ label, logoText }: { label: string; logoText: string }) => (\n  <a className={styles.watermark} href=\"https://stytch.com/\" target=\"_blank\" rel=\"noreferrer\">\n    <span>{label} </span>\n    <svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 261 40\" aria-label={logoText} height=\"25px\">\n      <path\n        className={styles.stytch}\n        d=\"M29.7 12.82c0 .8.65 1.44 1.45 1.44h4.72c1.36 0 2.59.8 3.14 2.05l3.64 8.16 3.4-8.1a3.44 3.44 0 0 1 3.18-2.1h3.28v-5.3h3.94v3.85c0 .8.65 1.44 1.45 1.44h2.7v3.22h-4.15v7.61c0 1.55.4 1.95 1.94 1.95h2.06v3.3H56.6c-2.67 0-4.09-1.42-4.09-4.1v-8.76h-1.99c-.44 0-.77.19-.93.52L44.5 29l-.02 1.33c0 2.9-1.57 4.7-4.09 4.7h-6.55v-3.36h4.95c1.51 0 1.95-.07 1.95-1.65v-.83L35.44 18c-.16-.32-.49-.5-.93-.5h-4.8v7.6c0 1.55.39 1.95 1.93 1.95h1.95v3.3h-3.74c-2.68 0-4.1-1.42-4.1-4.1V8.98h3.95v3.84ZM16.72 8.98c4.47 0 6.79 1.78 7.07 5.43h-4.14c-.2-1.61-1.17-2.4-2.98-2.4-1.69 0-2.86 1.01-2.86 2.6s.67 2.32 2.56 2.77l2.47.6c3.63.9 5.26 2.69 5.26 5.8 0 4.17-2.84 6.57-7.43 6.57-4.6 0-7.2-2.11-7.55-6.12h3.98c.25 2.01 1.5 3.03 3.57 3.03 2.06 0 3.4-1.12 3.4-2.85 0-1.63-.83-2.45-2.94-2.93l-2.5-.57c-2.21-.53-4.85-1.97-4.85-5.83 0-3.65 2.8-6.1 6.94-6.1Zm64.68 0v7.4l.26-.32c.92-1.13 1.86-1.78 3.93-1.78 3.51 0 5.53 2.21 5.53 6.07v10h-3.94v-9.51c0-1.2-.34-2.14-.98-2.75a2.62 2.62 0 0 0-2.02-.67c-1.9.12-2.78 1.6-2.78 4.66v8.26h-3.94V8.98h3.94Zm-12.66 5.3c4.23 0 6.74 1.96 7.1 5.52h-3.9c-.3-1.51-1.28-2.22-3.07-2.22h-.26c-2.34 0-3.86 1.86-3.86 4.73s1.51 4.73 3.86 4.73h.26c1.79 0 2.76-.71 3.06-2.22h3.91c-.36 3.56-2.87 5.52-7.1 5.52-4.47 0-7.59-3.3-7.59-8.03 0-4.73 3.12-8.03 7.6-8.03Z\"\n      />\n      <path fill=\"currentColor\" d=\"M112.37 25.42v-4.1h-4.1V19h4.1v-4.12h2.47V19h4.07v2.3h-4.07v4.11h-2.47Z\" />\n      <g clipPath=\"url(#a)\">\n        <path\n          className={styles.twilio}\n          d=\"M239.55 22.64v-.2c0-2.18.9-3.05 2.18-3.05 1.28 0 2.17.87 2.17 3.05v.2c0 2.15-.9 3.02-2.17 3.02-1.28 0-2.18-.87-2.18-3.02Zm-6.64.09c0 4.73 3.51 8.04 8.82 8.04 5.3 0 8.81-3.31 8.81-8.04v-.38c0-4.73-3.5-8.02-8.81-8.02-5.3 0-8.82 3.29-8.82 8.02v.38Zm-7.45-9.53c0 .2.14.35.35.35h5.88c.2 0 .35-.14.35-.35V9.72c0-.2-.14-.35-.34-.35h-5.9c-.2 0-.34.14-.34.35v3.48Zm-.03 16.99c0 .2.14.35.35.35h5.88c.2 0 .35-.15.35-.35V14.94c0-.2-.14-.35-.34-.35h-5.9c-.2 0-.34.15-.34.35V30.2Zm-7.74 0c0 .2.14.35.34.35h5.9c.2 0 .34-.15.34-.35V9.72c0-.2-.14-.35-.35-.35h-5.89c-.2 0-.34.14-.34.35v20.47Zm-7.75-16.99c0 .2.15.35.35.35h5.89c.2 0 .35-.14.35-.35V9.72c0-.2-.15-.35-.35-.35h-5.89c-.2 0-.35.14-.35.35v3.48Zm-20.07 17.34h5.69c.2 0 .29-.1.35-.3l1.85-6.7 1.8 6.7c.06.2.15.3.35.3h5.77c.23 0 .38-.1.44-.3l3.82-14.54v14.49c0 .2.15.35.35.35h5.89c.2 0 .35-.15.35-.35V14.94c0-.2-.15-.34-.35-.34h-11.92c-.2 0-.32.08-.38.32l-1.36 6.56-1.4-6.56c-.02-.2-.16-.32-.37-.32h-5.57c-.2 0-.34.11-.37.32l-1.4 6.62-1.3-6.62c-.06-.24-.18-.32-.38-.32h-9.54V9.63c0-.26-.17-.38-.46-.29L176 11.2a.44.44 0 0 0-.32.43v2.18c0 .61-.32.87-.93.87h-1.24c-.2 0-.35.15-.35.35v4.27c0 .2.15.35.35.35h2.09v5.37c0 3.75 1.36 5.75 5.85 5.75 1.75 0 3.1-.29 3.86-.64.23-.12.3-.26.3-.5v-4.17c0-.24-.21-.35-.5-.2a2.8 2.8 0 0 1-1.19.26c-1.16 0-1.74-.44-1.74-1.9v-3.97h3.05c.2 0 .34-.15.34-.35v-3.72l3.86 14.67c.06.2.2.29.44.29m-36.52-14.87c0-2 1.65-3.69 3.63-3.69a3.7 3.7 0 0 1 3.62 3.69c0 2-1.6 3.6-3.62 3.6a3.6 3.6 0 0 1-3.63-3.6Zm0 8.68a3.63 3.63 0 1 1 7.26 0 3.63 3.63 0 0 1-7.26 0Zm-8.7-8.68c0-2 1.6-3.69 3.63-3.69a3.68 3.68 0 0 1 3.65 3.69c0 2-1.65 3.6-3.66 3.6-2 0-3.62-1.63-3.62-3.6Zm0 8.68a3.6 3.6 0 0 1 3.63-3.63 3.63 3.63 0 1 1-3.62 3.63Zm-4.9-4.38a12.9 12.9 0 0 1 12.9-12.87 12.9 12.9 0 0 1 0 25.78c-7.1 0-12.9-5.83-12.9-12.91Zm12.9-17.43a17.44 17.44 0 0 0-17.48 17.43 17.47 17.47 0 1 0 17.49-17.42Z\"\n        />\n      </g>\n      <defs>\n        <clipPath id=\"a\">\n          <path fill=\"#fff\" d=\"M135.18 2.54h115.44v34.91H135.18z\" />\n        </clipPath>\n      </defs>\n    </svg>\n  </a>\n);\n\nexport default Watermark;\n"],"names":["Watermark","label","logoText","React","a","className","styles","watermark","href","target","rel","span","svg","xmlns","fill","viewBox","aria-label","height","path","stytch","d","g","clipPath","twilio","defs","id"],"mappings":";;;AAGA,MAAMA,SAAAA,GAAY,CAAC,EAAEC,KAAK,EAAEC,QAAQ,EAAuC,iBACzEC,cAAA,CAAA,aAAA,CAACC,GAAAA,EAAAA;AAAEC,QAAAA,SAAAA,EAAWC,iBAAOC,SAAS;QAAEC,IAAAA,EAAK,qBAAA;QAAsBC,MAAAA,EAAO,QAAA;QAASC,GAAAA,EAAI;qBAC7EP,cAAA,CAAA,aAAA,CAACQ,MAAAA,EAAAA,IAAAA,EAAMV,KAAAA,EAAM,GAAA,CAAA,gBACbE,cAAA,CAAA,aAAA,CAACS,KAAAA,EAAAA;QAAIC,KAAAA,EAAM,4BAAA;QAA6BC,IAAAA,EAAK,MAAA;QAAOC,OAAAA,EAAQ,YAAA;QAAaC,YAAAA,EAAYd,QAAAA;QAAUe,MAAAA,EAAO;qBACpGd,cAAA,CAAA,aAAA,CAACe,MAAAA,EAAAA;AACCb,QAAAA,SAAAA,EAAWC,iBAAOa,MAAM;QACxBC,CAAAA,EAAE;sBAEJjB,cAAA,CAAA,aAAA,CAACe,MAAAA,EAAAA;QAAKJ,IAAAA,EAAK,cAAA;QAAeM,CAAAA,EAAE;sBAC5BjB,cAAA,CAAA,aAAA,CAACkB,GAAAA,EAAAA;QAAEC,QAAAA,EAAS;qBACVnB,cAAA,CAAA,aAAA,CAACe,MAAAA,EAAAA;AACCb,QAAAA,SAAAA,EAAWC,iBAAOiB,MAAM;QACxBH,CAAAA,EAAE;AAGN,KAAA,CAAA,CAAA,gBAAAjB,cAAA,CAAA,aAAA,CAACqB,4BACCrB,cAAA,CAAA,aAAA,CAACmB,UAAAA,EAAAA;QAASG,EAAAA,EAAG;qBACXtB,cAAA,CAAA,aAAA,CAACe,MAAAA,EAAAA;QAAKJ,IAAAA,EAAK,MAAA;QAAOM,CAAAA,EAAE;;;;;"}

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

@@ -1,8 +1,8 @@
 import { collectCss } from '../../../../../../internal/style-injector/src/index.mjs';
 
-var css = ".Watermark_module_watermark__a805ba24{align-items:center;border-radius:var(--st-rounded-md);color:var(--st-muted-foreground);display:flex;gap:var(--st-spacing-2);padding:var(--st-spacing-2) var(--st-spacing-3);transition:background var(--st-transition-duration),color var(--st-transition-duration)}.Watermark_module_watermark__a805ba24 span{font-size:var(--st-text-sm);line-height:var(--st-line-height-sm)}.Watermark_module_watermark__a805ba24:hover{background:var(--st-accent);color:var(--st-accent-foreground)}.Watermark_module_stytch__a805ba24 path{fill:currentColor}.Watermark_module_twilio__a805ba24 path{fill:hsl(353,84.7%,calc(56.5%*(1 + var(--st-dark-mode, 0))))}";
+var css = ".Watermark_module_watermark__f06cda63{align-items:center;border-radius:var(--st-rounded-md);color:var(--st-muted-foreground);display:flex;gap:var(--st-spacing-2);padding:var(--st-spacing-2) var(--st-spacing-3);transition:background var(--st-transition-duration),color var(--st-transition-duration)}.Watermark_module_watermark__f06cda63 span{font-size:var(--st-text-sm);line-height:var(--st-line-height-sm);margin-right:-6px}.Watermark_module_watermark__f06cda63:hover{background:var(--st-accent);color:var(--st-accent-foreground)}.Watermark_module_stytch__f06cda63{fill:var(--st-foreground)}.Watermark_module_twilio__f06cda63{fill:hsl(353,84.7%,calc(56.5%*(1 + var(--st-dark-mode, 0))))}";
 collectCss(css);
-var modules_b8928cee = {"watermark":"Watermark_module_watermark__a805ba24 inputBase_module_focusRing__06c14ae4","stytch":"Watermark_module_stytch__a805ba24","twilio":"Watermark_module_twilio__a805ba24"};
+var modules_b8928cee = {"watermark":"Watermark_module_watermark__f06cda63 inputBase_module_focusRing__06c14ae4","stytch":"Watermark_module_stytch__f06cda63","twilio":"Watermark_module_twilio__f06cda63"};
 
 export { css, modules_b8928cee as default };
 //# sourceMappingURL=Watermark.module.css.mjs.map