@clerk/ui 1.0.0-snapshot.v20251203203405 → 1.0.0-snapshot.v20251204175016

package/dist/components/SignIn/SignInSocialButtons.js.map

@@ -1 +1 @@
-{"version":3,"file":"SignInSocialButtons.js","names":[],"sources":["../../../src/components/SignIn/SignInSocialButtons.tsx"],"sourcesContent":["import { useClerk } from '@clerk/shared/react';\nimport type { PhoneCodeChannel } from '@clerk/shared/types';\nimport React from 'react';\n\nimport { handleError } from '@/ui/utils/errorHandler';\nimport { originPrefersPopup } from '@/ui/utils/originPrefersPopup';\nimport { web3CallbackErrorHandler } from '@/ui/utils/web3CallbackErrorHandler';\n\nimport { buildSSOCallbackURL } from '../../common/redirects';\nimport { useCoreSignIn, useSignInContext } from '../../contexts';\nimport { useEnvironment } from '../../contexts/EnvironmentContext';\nimport { useCardState } from '../../elements/contexts';\nimport type { SocialButtonsProps } from '../../elements/SocialButtons';\nimport { SocialButtons } from '../../elements/SocialButtons';\nimport { useRouter } from '../../router';\n\nexport type SignInSocialButtonsProps = SocialButtonsProps & {\n  onAlternativePhoneCodeProviderClick?: (channel: PhoneCodeChannel) => void;\n};\n\nexport const SignInSocialButtons = React.memo((props: SignInSocialButtonsProps) => {\n  const clerk = useClerk();\n  const { navigate } = useRouter();\n  const card = useCardState();\n  const { displayConfig } = useEnvironment();\n  const ctx = useSignInContext();\n  const signIn = useCoreSignIn();\n  const redirectUrl = buildSSOCallbackURL(ctx, displayConfig.signInUrl);\n  const redirectUrlComplete = ctx.afterSignInUrl || '/';\n  const shouldUsePopup = ctx.oauthFlow === 'popup' || (ctx.oauthFlow === 'auto' && originPrefersPopup());\n  const { onAlternativePhoneCodeProviderClick, ...rest } = props;\n\n  return (\n    <SocialButtons\n      {...rest}\n      showLastAuthenticationStrategy\n      idleAfterDelay={!shouldUsePopup}\n      oauthCallback={strategy => {\n        if (shouldUsePopup) {\n          // We create the popup window here with the `about:blank` URL since some browsers will block popups that are\n          // opened within async functions. The `signInWithPopup` method handles setting the URL of the popup.\n          const popup = window.open('about:blank', '', 'width=600,height=800');\n          // Unfortunately, there's no good way to detect when the popup is closed, so we simply poll and check if it's closed.\n          const interval = setInterval(() => {\n            if (!popup || popup.closed) {\n              clearInterval(interval);\n              card.setIdle();\n            }\n          }, 500);\n\n          return signIn\n            .authenticateWithPopup({ strategy, redirectUrl, redirectUrlComplete, popup, oidcPrompt: ctx.oidcPrompt })\n            .catch(err => handleError(err, [], card.setError));\n        }\n\n        return signIn\n          .authenticateWithRedirect({ strategy, redirectUrl, redirectUrlComplete, oidcPrompt: ctx.oidcPrompt })\n          .catch(err => handleError(err, [], card.setError));\n      }}\n      web3Callback={strategy => {\n        return clerk\n          .authenticateWithWeb3({\n            customNavigate: navigate,\n            redirectUrl: redirectUrlComplete,\n            signUpContinueUrl: ctx.isCombinedFlow ? 'create/continue' : ctx.signUpContinueUrl,\n            strategy,\n            secondFactorUrl: 'factor-two',\n          })\n          .catch(err => web3CallbackErrorHandler(err, card.setError));\n      }}\n      alternativePhoneCodeCallback={channel => {\n        onAlternativePhoneCodeProviderClick?.(channel);\n      }}\n    />\n  );\n});\n"],"mappings":";;;;;;;;;;;;;;;AAoBA,MAAa,sBAAsB,MAAM,MAAM,UAAoC;CACjF,MAAM,QAAQ,UAAU;CACxB,MAAM,EAAE,aAAa,WAAW;CAChC,MAAM,OAAO,cAAc;CAC3B,MAAM,EAAE,kBAAkB,gBAAgB;CAC1C,MAAM,MAAM,kBAAkB;CAC9B,MAAM,SAAS,eAAe;CAC9B,MAAM,cAAc,oBAAoB,KAAK,cAAc,UAAU;CACrE,MAAM,sBAAsB,IAAI,kBAAkB;CAClD,MAAM,iBAAiB,IAAI,cAAc,WAAY,IAAI,cAAc,UAAU,oBAAoB;CACrG,MAAM,EAAE,oCAAqC,GAAG,SAAS;AAEzD,QACE,oBAAC;EACC,GAAI;EACJ;EACA,gBAAgB,CAAC;EACjB,gBAAe,aAAY;AACzB,OAAI,gBAAgB;IAGlB,MAAM,QAAQ,OAAO,KAAK,eAAe,IAAI,uBAAuB;IAEpE,MAAM,WAAW,kBAAkB;AACjC,SAAI,CAAC,SAAS,MAAM,QAAQ;AAC1B,oBAAc,SAAS;AACvB,WAAK,SAAS;;OAEf,IAAI;AAEP,WAAO,OACJ,sBAAsB;KAAE;KAAU;KAAa;KAAqB;KAAO,YAAY,IAAI;KAAY,CAAC,CACxG,OAAM,QAAO,YAAY,KAAK,EAAE,EAAE,KAAK,SAAS,CAAC;;AAGtD,UAAO,OACJ,yBAAyB;IAAE;IAAU;IAAa;IAAqB,YAAY,IAAI;IAAY,CAAC,CACpG,OAAM,QAAO,YAAY,KAAK,EAAE,EAAE,KAAK,SAAS,CAAC;;EAEtD,eAAc,aAAY;AACxB,UAAO,MACJ,qBAAqB;IACpB,gBAAgB;IAChB,aAAa;IACb,mBAAmB,IAAI,iBAAiB,oBAAoB,IAAI;IAChE;IACA,iBAAiB;IAClB,CAAC,CACD,OAAM,QAAO,yBAAyB,KAAK,KAAK,SAAS,CAAC;;EAE/D,+BAA8B,YAAW;AACvC,yCAAsC,QAAQ;;GAEhD;EAEJ"}
+{"version":3,"file":"SignInSocialButtons.js","names":["handleError","_handleError"],"sources":["../../../src/components/SignIn/SignInSocialButtons.tsx"],"sourcesContent":["import type { ClerkAPIError } from '@clerk/shared/error';\nimport { isClerkAPIResponseError } from '@clerk/shared/error';\nimport { ERROR_CODES } from '@clerk/shared/internal/clerk-js/constants';\nimport { useClerk } from '@clerk/shared/react';\nimport type { PhoneCodeChannel } from '@clerk/shared/types';\nimport React from 'react';\n\nimport { handleError as _handleError } from '@/ui/utils/errorHandler';\nimport { originPrefersPopup } from '@/ui/utils/originPrefersPopup';\nimport { web3CallbackErrorHandler } from '@/ui/utils/web3CallbackErrorHandler';\n\nimport { buildSSOCallbackURL } from '../../common/redirects';\nimport { useCoreSignIn, useSignInContext } from '../../contexts';\nimport { useEnvironment } from '../../contexts/EnvironmentContext';\nimport { useCardState } from '../../elements/contexts';\nimport type { SocialButtonsProps } from '../../elements/SocialButtons';\nimport { SocialButtons } from '../../elements/SocialButtons';\nimport { useRouter } from '../../router';\n\nexport type SignInSocialButtonsProps = SocialButtonsProps & {\n  onAlternativePhoneCodeProviderClick?: (channel: PhoneCodeChannel) => void;\n};\n\nexport const SignInSocialButtons = React.memo((props: SignInSocialButtonsProps) => {\n  const clerk = useClerk();\n  const { navigate } = useRouter();\n  const card = useCardState();\n  const { displayConfig } = useEnvironment();\n  const ctx = useSignInContext();\n  const signIn = useCoreSignIn();\n  const redirectUrl = buildSSOCallbackURL(ctx, displayConfig.signInUrl);\n  const redirectUrlComplete = ctx.afterSignInUrl || '/';\n  const shouldUsePopup = ctx.oauthFlow === 'popup' || (ctx.oauthFlow === 'auto' && originPrefersPopup());\n  const { onAlternativePhoneCodeProviderClick, ...rest } = props;\n\n  const handleError = (err: any) => {\n    if (isClerkAPIResponseError(err)) {\n      const sessionAlreadyExistsError: ClerkAPIError | undefined = err.errors.find(\n        (e: ClerkAPIError) => e.code === ERROR_CODES.SESSION_EXISTS,\n      );\n\n      if (sessionAlreadyExistsError) {\n        return clerk.setActive({\n          session: clerk.client.lastActiveSessionId,\n          navigate: async ({ session }) => {\n            await ctx.navigateOnSetActive({ session, redirectUrl: ctx.afterSignInUrl });\n          },\n        });\n      }\n    }\n\n    return _handleError(err, [], card.setError);\n  };\n\n  return (\n    <SocialButtons\n      {...rest}\n      showLastAuthenticationStrategy\n      idleAfterDelay={!shouldUsePopup}\n      oauthCallback={strategy => {\n        if (shouldUsePopup) {\n          // We create the popup window here with the `about:blank` URL since some browsers will block popups that are\n          // opened within async functions. The `signInWithPopup` method handles setting the URL of the popup.\n          const popup = window.open('about:blank', '', 'width=600,height=800');\n          // Unfortunately, there's no good way to detect when the popup is closed, so we simply poll and check if it's closed.\n          const interval = setInterval(() => {\n            if (!popup || popup.closed) {\n              clearInterval(interval);\n              card.setIdle();\n            }\n          }, 500);\n\n          return signIn\n            .authenticateWithPopup({ strategy, redirectUrl, redirectUrlComplete, popup, oidcPrompt: ctx.oidcPrompt })\n            .catch(err => handleError(err));\n        }\n\n        return signIn\n          .authenticateWithRedirect({ strategy, redirectUrl, redirectUrlComplete, oidcPrompt: ctx.oidcPrompt })\n          .catch(err => handleError(err));\n      }}\n      web3Callback={strategy => {\n        return clerk\n          .authenticateWithWeb3({\n            customNavigate: navigate,\n            redirectUrl: redirectUrlComplete,\n            signUpContinueUrl: ctx.isCombinedFlow ? 'create/continue' : ctx.signUpContinueUrl,\n            strategy,\n            secondFactorUrl: 'factor-two',\n          })\n          .catch(err => web3CallbackErrorHandler(err, card.setError));\n      }}\n      alternativePhoneCodeCallback={channel => {\n        onAlternativePhoneCodeProviderClick?.(channel);\n      }}\n    />\n  );\n});\n"],"mappings":";;;;;;;;;;;;;;;;;AAuBA,MAAa,sBAAsB,MAAM,MAAM,UAAoC;CACjF,MAAM,QAAQ,UAAU;CACxB,MAAM,EAAE,aAAa,WAAW;CAChC,MAAM,OAAO,cAAc;CAC3B,MAAM,EAAE,kBAAkB,gBAAgB;CAC1C,MAAM,MAAM,kBAAkB;CAC9B,MAAM,SAAS,eAAe;CAC9B,MAAM,cAAc,oBAAoB,KAAK,cAAc,UAAU;CACrE,MAAM,sBAAsB,IAAI,kBAAkB;CAClD,MAAM,iBAAiB,IAAI,cAAc,WAAY,IAAI,cAAc,UAAU,oBAAoB;CACrG,MAAM,EAAE,oCAAqC,GAAG,SAAS;CAEzD,MAAMA,iBAAe,QAAa;AAChC,MAAI,wBAAwB,IAAI,EAK9B;OAJ6D,IAAI,OAAO,MACrE,MAAqB,EAAE,SAAS,YAAY,eAC9C,CAGC,QAAO,MAAM,UAAU;IACrB,SAAS,MAAM,OAAO;IACtB,UAAU,OAAO,EAAE,cAAc;AAC/B,WAAM,IAAI,oBAAoB;MAAE;MAAS,aAAa,IAAI;MAAgB,CAAC;;IAE9E,CAAC;;AAIN,SAAOC,YAAa,KAAK,EAAE,EAAE,KAAK,SAAS;;AAG7C,QACE,oBAAC;EACC,GAAI;EACJ;EACA,gBAAgB,CAAC;EACjB,gBAAe,aAAY;AACzB,OAAI,gBAAgB;IAGlB,MAAM,QAAQ,OAAO,KAAK,eAAe,IAAI,uBAAuB;IAEpE,MAAM,WAAW,kBAAkB;AACjC,SAAI,CAAC,SAAS,MAAM,QAAQ;AAC1B,oBAAc,SAAS;AACvB,WAAK,SAAS;;OAEf,IAAI;AAEP,WAAO,OACJ,sBAAsB;KAAE;KAAU;KAAa;KAAqB;KAAO,YAAY,IAAI;KAAY,CAAC,CACxG,OAAM,QAAOD,cAAY,IAAI,CAAC;;AAGnC,UAAO,OACJ,yBAAyB;IAAE;IAAU;IAAa;IAAqB,YAAY,IAAI;IAAY,CAAC,CACpG,OAAM,QAAOA,cAAY,IAAI,CAAC;;EAEnC,eAAc,aAAY;AACxB,UAAO,MACJ,qBAAqB;IACpB,gBAAgB;IAChB,aAAa;IACb,mBAAmB,IAAI,iBAAiB,oBAAoB,IAAI;IAChE;IACA,iBAAiB;IAClB,CAAC,CACD,OAAM,QAAO,yBAAyB,KAAK,KAAK,SAAS,CAAC;;EAE/D,+BAA8B,YAAW;AACvC,yCAAsC,QAAQ;;GAEhD;EAEJ"}

package/dist/components/SignIn/SignInStart.js

@@ -299,9 +299,19 @@ function SignInStartInternal() {
 	const attemptToRecoverFromSignInError = async (e) => {
 		if (!e.errors) return;
 		const instantPasswordError = e.errors.find((e$1) => e$1.code === ERROR_CODES.INVALID_STRATEGY_FOR_USER || e$1.code === ERROR_CODES.FORM_PASSWORD_INCORRECT || e$1.code === ERROR_CODES.FORM_PASSWORD_PWNED);
+		const sessionAlreadyExistsError = e.errors.find((e$1) => e$1.code === ERROR_CODES.SESSION_EXISTS);
 		const alreadySignedInError = e.errors.find((e$1) => e$1.code === "identifier_already_signed_in");
 		const accountDoesNotExistError = e.errors.find((e$1) => e$1.code === ERROR_CODES.INVITATION_ACCOUNT_NOT_EXISTS || e$1.code === ERROR_CODES.FORM_IDENTIFIER_NOT_FOUND);
 		if (instantPasswordError) await signInWithFields(identifierField);
+		else if (sessionAlreadyExistsError) await clerk.setActive({
+			session: clerk.client.lastActiveSessionId,
+			navigate: async ({ session }) => {
+				await navigateOnSetActive({
+					session,
+					redirectUrl: afterSignInUrl
+				});
+			}
+		});
 		else if (alreadySignedInError) {
 			const sid = alreadySignedInError.meta.sessionId;
 			await clerk.setActive({

package/dist/components/SignIn/SignInStart.js.map

@@ -1 +1 @@
-{"version":3,"file":"SignInStart.js","names":["initialValues: Record<SignInStartIdentifier, string | undefined>","e: any","instantPasswordError: ClerkAPIError","e","alreadySignedInError: ClerkAPIError","accountDoesNotExistError: ClerkAPIError","isWebAuthnAutofillSupported","autofilled"],"sources":["../../../src/components/SignIn/SignInStart.tsx"],"sourcesContent":["import { getAlternativePhoneCodeProviderData } from '@clerk/shared/alternativePhoneCode';\nimport { ERROR_CODES, SIGN_UP_MODES } from '@clerk/shared/internal/clerk-js/constants';\nimport { clerkInvalidFAPIResponse } from '@clerk/shared/internal/clerk-js/errors';\nimport { getClerkQueryParam, removeClerkQueryParam } from '@clerk/shared/internal/clerk-js/queryParams';\nimport { useClerk } from '@clerk/shared/react';\nimport type {\n  ClerkAPIError,\n  PhoneCodeChannel,\n  PhoneCodeChannelData,\n  SignInCreateParams,\n  SignInResource,\n} from '@clerk/shared/types';\nimport { isWebAuthnAutofillSupported, isWebAuthnSupported } from '@clerk/shared/webauthn';\nimport { useEffect, useLayoutEffect, useMemo, useRef, useState } from 'react';\n\nimport { Card } from '@/ui/elements/Card';\nimport { useCardState, withCardStateProvider } from '@/ui/elements/contexts';\nimport { Form } from '@/ui/elements/Form';\nimport { Header } from '@/ui/elements/Header';\nimport { LoadingCard } from '@/ui/elements/LoadingCard';\nimport { SocialButtonsReversibleContainerWithDivider } from '@/ui/elements/ReversibleContainer';\nimport { handleError } from '@/ui/utils/errorHandler';\nimport { isMobileDevice } from '@/ui/utils/isMobileDevice';\nimport type { FormControlState } from '@/ui/utils/useFormControl';\nimport { buildRequest, useFormControl } from '@/ui/utils/useFormControl';\n\nimport type { SignInStartIdentifier } from '../../common';\nimport {\n  buildSSOCallbackURL,\n  getIdentifierControlDisplayValues,\n  groupIdentifiers,\n  withRedirectToAfterSignIn,\n  withRedirectToSignInTask,\n} from '../../common';\nimport { useCoreSignIn, useEnvironment, useSignInContext } from '../../contexts';\nimport { Col, descriptors, Flow, localizationKeys } from '../../customizables';\nimport { CaptchaElement } from '../../elements/CaptchaElement';\nimport { useLoadingStatus } from '../../hooks';\nimport { useSupportEmail } from '../../hooks/useSupportEmail';\nimport { useTotalEnabledAuthMethods } from '../../hooks/useTotalEnabledAuthMethods';\nimport { useRouter } from '../../router';\nimport { handleCombinedFlowTransfer } from './handleCombinedFlowTransfer';\nimport { hasMultipleEnterpriseConnections, useHandleAuthenticateWithPasskey } from './shared';\nimport { SignInAlternativePhoneCodePhoneNumberCard } from './SignInAlternativePhoneCodePhoneNumberCard';\nimport { SignInSocialButtons } from './SignInSocialButtons';\nimport {\n  getPreferredAlternativePhoneChannel,\n  getPreferredAlternativePhoneChannelForCombinedFlow,\n  getSignUpAttributeFromIdentifier,\n} from './utils';\n\nconst useAutoFillPasskey = () => {\n  const [isSupported, setIsSupported] = useState(false);\n  const { navigate } = useRouter();\n  const onSecondFactor = () => navigate('factor-two');\n  const authenticateWithPasskey = useHandleAuthenticateWithPasskey(onSecondFactor);\n  const { userSettings } = useEnvironment();\n  const { passkeySettings, attributes } = userSettings;\n\n  useEffect(() => {\n    async function runAutofillPasskey() {\n      const _isSupported = await isWebAuthnAutofillSupported();\n      setIsSupported(_isSupported);\n      if (!_isSupported) {\n        return;\n      }\n\n      await authenticateWithPasskey({ flow: 'autofill' });\n    }\n\n    if (passkeySettings.allow_autofill && attributes.passkey?.enabled) {\n      runAutofillPasskey();\n    }\n  }, []);\n\n  return {\n    isWebAuthnAutofillSupported: isSupported,\n  };\n};\n\nfunction SignInStartInternal(): JSX.Element {\n  const card = useCardState();\n  const clerk = useClerk();\n  const status = useLoadingStatus();\n  const { displayConfig, userSettings, authConfig } = useEnvironment();\n  const signIn = useCoreSignIn();\n  const { navigate } = useRouter();\n  const ctx = useSignInContext();\n  const { afterSignInUrl, signUpUrl, waitlistUrl, isCombinedFlow, navigateOnSetActive } = ctx;\n  const supportEmail = useSupportEmail();\n  const totalEnabledAuthMethods = useTotalEnabledAuthMethods();\n  const identifierAttributes = useMemo<SignInStartIdentifier[]>(\n    () => groupIdentifiers(userSettings.enabledFirstFactorIdentifiers),\n    [userSettings.enabledFirstFactorIdentifiers],\n  );\n  const alternativePhoneCodeChannels = userSettings.alternativePhoneCodeChannels;\n\n  /**\n   * Passkeys\n   */\n  const { isWebAuthnAutofillSupported } = useAutoFillPasskey();\n  const onSecondFactor = () => navigate('factor-two');\n  const authenticateWithPasskey = useHandleAuthenticateWithPasskey(onSecondFactor);\n  const isWebSupported = isWebAuthnSupported();\n\n  const onlyPhoneNumberInitialValueExists =\n    !!ctx.initialValues?.phoneNumber && !(ctx.initialValues.emailAddress || ctx.initialValues.username);\n  const shouldStartWithPhoneNumberIdentifier =\n    onlyPhoneNumberInitialValueExists && identifierAttributes.includes('phone_number');\n  const [identifierAttribute, setIdentifierAttribute] = useState<SignInStartIdentifier>(\n    shouldStartWithPhoneNumberIdentifier ? 'phone_number' : identifierAttributes[0] || '',\n  );\n  const [hasSwitchedByAutofill, setHasSwitchedByAutofill] = useState(false);\n\n  const organizationTicket = getClerkQueryParam('__clerk_ticket') || '';\n  const clerkStatus = getClerkQueryParam('__clerk_status') || '';\n\n  const standardFormAttributes = userSettings.enabledFirstFactorIdentifiers;\n  const web3FirstFactors = userSettings.web3FirstFactors;\n  const authenticatableSocialStrategies = userSettings.authenticatableSocialStrategies;\n  const passwordBasedInstance = userSettings.instanceIsPasswordBased;\n  const { currentIdentifier, nextIdentifier } = getIdentifierControlDisplayValues(\n    identifierAttributes,\n    identifierAttribute,\n  );\n  const instantPasswordField = useFormControl('password', '', {\n    type: 'password',\n    label: localizationKeys('formFieldLabel__password'),\n    placeholder: localizationKeys('formFieldInputPlaceholder__password') as any,\n  });\n\n  const [alternativePhoneCodeProvider, setAlternativePhoneCodeProvider] = useState<PhoneCodeChannelData | null>(null);\n\n  const showAlternativePhoneCodeProviders = userSettings.alternativePhoneCodeChannels.length > 0;\n\n  const onAlternativePhoneCodeUseAnotherMethod = () => {\n    setAlternativePhoneCodeProvider(null);\n  };\n  const onAlternativePhoneCodeProviderClick = (phoneCodeChannel: PhoneCodeChannel) => {\n    const provider: PhoneCodeChannelData | null = getAlternativePhoneCodeProviderData(phoneCodeChannel) || null;\n    setAlternativePhoneCodeProvider(provider);\n  };\n\n  const ctxInitialValues = ctx.initialValues || {};\n  const initialValues: Record<SignInStartIdentifier, string | undefined> = useMemo(\n    () => ({\n      email_address: ctxInitialValues.emailAddress,\n      email_address_username: ctxInitialValues.emailAddress || ctxInitialValues.username,\n      username: ctxInitialValues.username,\n      phone_number: ctxInitialValues.phoneNumber,\n    }),\n    [ctx.initialValues],\n  );\n\n  const hasSocialOrWeb3Buttons =\n    !!authenticatableSocialStrategies.length || !!web3FirstFactors.length || !!alternativePhoneCodeChannels.length;\n  const [shouldAutofocus, setShouldAutofocus] = useState(!isMobileDevice() && !hasSocialOrWeb3Buttons);\n  const textIdentifierField = useFormControl('identifier', initialValues[identifierAttribute] || '', {\n    ...currentIdentifier,\n    isRequired: true,\n    transformer: value => value.trim(),\n  });\n\n  const phoneIdentifierField = useFormControl('identifier', initialValues['phone_number'] || '', {\n    ...currentIdentifier,\n    isRequired: true,\n  });\n\n  const identifierField = identifierAttribute === 'phone_number' ? phoneIdentifierField : textIdentifierField;\n\n  const switchToNextIdentifier = () => {\n    setIdentifierAttribute(\n      i => identifierAttributes[(identifierAttributes.indexOf(i) + 1) % identifierAttributes.length],\n    );\n    setShouldAutofocus(true);\n    setHasSwitchedByAutofill(false);\n  };\n\n  const handlePhoneNumberPaste = (value: string) => {\n    textIdentifierField.setValue(initialValues[identifierAttribute] || '');\n    phoneIdentifierField.setValue(value);\n    setIdentifierAttribute('phone_number');\n    setShouldAutofocus(true);\n  };\n\n  // switch to the phone input (if available) if a \"+\" is entered\n  // (either by the browser or the user)\n  // this does not work in chrome as it does not fire the change event and the value is\n  // not available via js\n  useLayoutEffect(() => {\n    if (\n      identifierField.value.startsWith('+') &&\n      identifierAttributes.includes('phone_number') &&\n      identifierAttribute !== 'phone_number' &&\n      !hasSwitchedByAutofill\n    ) {\n      handlePhoneNumberPaste(identifierField.value);\n      // do not switch automatically on subsequent autofills\n      // by the browser to avoid a switch loop\n      setHasSwitchedByAutofill(true);\n    }\n  }, [identifierField.value, identifierAttributes]);\n\n  useEffect(() => {\n    if (!organizationTicket) {\n      return;\n    }\n\n    if (clerkStatus === 'sign_up') {\n      const paramsToForward = new URLSearchParams();\n      if (organizationTicket) {\n        paramsToForward.set('__clerk_ticket', organizationTicket);\n      }\n      // We explicitly navigate to 'create' in the combined flow to trigger a client-side navigation. Navigating to\n      // signUpUrl triggers a full page reload when used with the hash router.\n      void navigate(isCombinedFlow ? `create` : signUpUrl, { searchParams: paramsToForward });\n      return;\n    }\n\n    status.setLoading();\n    card.setLoading();\n    signIn\n      .create({\n        strategy: 'ticket',\n        ticket: organizationTicket,\n      })\n      .then(res => {\n        switch (res.status) {\n          case 'needs_first_factor': {\n            if (!hasOnlyEnterpriseSSOFirstFactors(res) || hasMultipleEnterpriseConnections(res.supportedFirstFactors)) {\n              return navigate('factor-one');\n            }\n\n            return authenticateWithEnterpriseSSO();\n          }\n          case 'needs_second_factor':\n            return navigate('factor-two');\n          case 'complete':\n            removeClerkQueryParam('__clerk_ticket');\n            return clerk.setActive({\n              session: res.createdSessionId,\n              navigate: async ({ session }) => {\n                await navigateOnSetActive({ session, redirectUrl: afterSignInUrl });\n              },\n            });\n          default: {\n            console.error(clerkInvalidFAPIResponse(res.status, supportEmail));\n            return;\n          }\n        }\n      })\n      .catch(err => {\n        return attemptToRecoverFromSignInError(err);\n      })\n      .finally(() => {\n        // Keep the card in loading state during SSO redirect to prevent UI flicker\n        // This is necessary because there's a brief delay between initiating the SSO flow\n        // and the actual redirect to the external Identity Provider\n        const isRedirectingToSSOProvider = !!hasOnlyEnterpriseSSOFirstFactors(signIn);\n        if (isRedirectingToSSOProvider) {\n          return;\n        }\n\n        status.setIdle();\n        card.setIdle();\n      });\n  }, []);\n\n  useEffect(() => {\n    async function handleOauthError() {\n      const defaultErrorHandler = () => {\n        // Error from server may be too much information for the end user, so set a generic error\n        card.setError('Unable to complete action at this time. If the problem persists please contact support.');\n      };\n\n      const error = signIn?.firstFactorVerification?.error;\n      if (error) {\n        switch (error.code) {\n          case ERROR_CODES.NOT_ALLOWED_TO_SIGN_UP:\n          case ERROR_CODES.OAUTH_ACCESS_DENIED:\n          case ERROR_CODES.NOT_ALLOWED_ACCESS:\n          case ERROR_CODES.SAML_USER_ATTRIBUTE_MISSING:\n          case ERROR_CODES.OAUTH_EMAIL_DOMAIN_RESERVED_BY_SAML:\n          case ERROR_CODES.USER_LOCKED:\n          case ERROR_CODES.EXTERNAL_ACCOUNT_NOT_FOUND:\n          case ERROR_CODES.SIGN_UP_MODE_RESTRICTED:\n          case ERROR_CODES.SIGN_UP_MODE_RESTRICTED_WAITLIST:\n          case ERROR_CODES.ENTERPRISE_SSO_USER_ATTRIBUTE_MISSING:\n          case ERROR_CODES.ENTERPRISE_SSO_EMAIL_ADDRESS_DOMAIN_MISMATCH:\n          case ERROR_CODES.ENTERPRISE_SSO_HOSTED_DOMAIN_MISMATCH:\n          case ERROR_CODES.SAML_EMAIL_ADDRESS_DOMAIN_MISMATCH:\n          case ERROR_CODES.ORGANIZATION_MEMBERSHIP_QUOTA_EXCEEDED_FOR_SSO:\n          case ERROR_CODES.CAPTCHA_INVALID:\n          case ERROR_CODES.FRAUD_DEVICE_BLOCKED:\n          case ERROR_CODES.FRAUD_ACTION_BLOCKED:\n          case ERROR_CODES.SIGNUP_RATE_LIMIT_EXCEEDED:\n          case ERROR_CODES.USER_BANNED:\n            card.setError(error);\n            break;\n          default:\n            defaultErrorHandler();\n        }\n\n        // TODO: This is a workaround in order to reset the sign in attempt\n        // so that the oauth error does not persist on full page reloads.\n        void (await signIn.create({}));\n      }\n    }\n\n    void handleOauthError();\n  }, []);\n\n  const buildSignInParams = (fields: Array<FormControlState<string>>): SignInCreateParams => {\n    const hasPassword = fields.some(f => f.name === 'password' && !!f.value);\n\n    /**\n     * FAPI will return an error when password is submitted but the user's email matches requires enterprise sso authentication.\n     * We need to strip password from the create request, and reconstruct it later.\n     */\n    if (!hasPassword || userSettings.enterpriseSSO.enabled) {\n      fields = fields.filter(f => f.name !== 'password');\n    }\n    return {\n      ...buildRequest(fields),\n      ...(hasPassword && !userSettings.enterpriseSSO.enabled && { strategy: 'password' }),\n    } as SignInCreateParams;\n  };\n\n  const safePasswordSignInForEnterpriseSSOInstance = (\n    signInCreatePromise: Promise<SignInResource>,\n    fields: Array<FormControlState<string>>,\n  ) => {\n    return signInCreatePromise.then(signInResource => {\n      if (!userSettings.enterpriseSSO.enabled) {\n        return signInResource;\n      }\n      /**\n       * For instances with Enterprise SSO enabled, perform sign in with password only when it is allowed for the identified user.\n       */\n      const passwordField = fields.find(f => f.name === 'password')?.value;\n      if (!passwordField || signInResource.supportedFirstFactors?.some(ff => ff.strategy === 'enterprise_sso')) {\n        return signInResource;\n      }\n      return signInResource.attemptFirstFactor({ strategy: 'password', password: passwordField });\n    });\n  };\n\n  const signInWithFields = async (...fields: Array<FormControlState<string>>) => {\n    // If the user has already selected an alternative phone code provider, we use that.\n    const preferredAlternativePhoneChannel =\n      alternativePhoneCodeProvider?.channel ||\n      getPreferredAlternativePhoneChannel(fields, authConfig.preferredChannels, 'identifier');\n    if (preferredAlternativePhoneChannel) {\n      // We need to send the alternative phone code provider channel in the sign in request\n      // together with the phone_code strategy, in order for FAPI to create a Verification upon this first request.\n      const noop = () => {};\n      fields.push({\n        id: 'strategy',\n        value: 'phone_code',\n        clearFeedback: noop,\n        setValue: noop,\n        onChange: noop,\n        setError: noop,\n      } as any);\n      fields.push({\n        id: 'channel',\n        value: preferredAlternativePhoneChannel,\n        clearFeedback: noop,\n        setValue: noop,\n        onChange: noop,\n        setError: noop,\n      } as any);\n    }\n    try {\n      const res = await safePasswordSignInForEnterpriseSSOInstance(signIn.create(buildSignInParams(fields)), fields);\n\n      switch (res.status) {\n        case 'needs_identifier':\n          // Check if we need to initiate an enterprise sso flow\n          if (res.supportedFirstFactors?.some(ff => ff.strategy === 'enterprise_sso')) {\n            await authenticateWithEnterpriseSSO();\n          }\n          break;\n        case 'needs_first_factor': {\n          if (!hasOnlyEnterpriseSSOFirstFactors(res) || hasMultipleEnterpriseConnections(res.supportedFirstFactors)) {\n            return navigate('factor-one');\n          }\n\n          return authenticateWithEnterpriseSSO();\n        }\n        case 'needs_second_factor':\n          return navigate('factor-two');\n        case 'complete':\n          return clerk.setActive({\n            session: res.createdSessionId,\n            navigate: async ({ session }) => {\n              await navigateOnSetActive({ session, redirectUrl: afterSignInUrl });\n            },\n          });\n        default: {\n          console.error(clerkInvalidFAPIResponse(res.status, supportEmail));\n          return;\n        }\n      }\n    } catch (e: any) {\n      return attemptToRecoverFromSignInError(e);\n    }\n  };\n\n  const authenticateWithEnterpriseSSO = async () => {\n    const redirectUrl = buildSSOCallbackURL(ctx, displayConfig.signInUrl);\n    const redirectUrlComplete = ctx.afterSignInUrl || '/';\n\n    return signIn.authenticateWithRedirect({\n      strategy: 'enterprise_sso',\n      redirectUrl,\n      redirectUrlComplete,\n      oidcPrompt: ctx.oidcPrompt,\n      continueSignIn: true,\n    });\n  };\n\n  const attemptToRecoverFromSignInError = async (e: any) => {\n    if (!e.errors) {\n      return;\n    }\n    const instantPasswordError: ClerkAPIError = e.errors.find(\n      (e: ClerkAPIError) =>\n        e.code === ERROR_CODES.INVALID_STRATEGY_FOR_USER ||\n        e.code === ERROR_CODES.FORM_PASSWORD_INCORRECT ||\n        e.code === ERROR_CODES.FORM_PASSWORD_PWNED,\n    );\n\n    const alreadySignedInError: ClerkAPIError = e.errors.find(\n      (e: ClerkAPIError) => e.code === 'identifier_already_signed_in',\n    );\n    const accountDoesNotExistError: ClerkAPIError = e.errors.find(\n      (e: ClerkAPIError) =>\n        e.code === ERROR_CODES.INVITATION_ACCOUNT_NOT_EXISTS || e.code === ERROR_CODES.FORM_IDENTIFIER_NOT_FOUND,\n    );\n\n    if (instantPasswordError) {\n      await signInWithFields(identifierField);\n    } else if (alreadySignedInError) {\n      // eslint-disable-next-line @typescript-eslint/no-non-null-assertion\n      const sid = alreadySignedInError.meta!.sessionId!;\n      await clerk.setActive({\n        session: sid,\n        navigate: async ({ session }) => {\n          await navigateOnSetActive({ session, redirectUrl: afterSignInUrl });\n        },\n      });\n    } else if (isCombinedFlow && accountDoesNotExistError) {\n      const attribute = getSignUpAttributeFromIdentifier(identifierField);\n\n      if (userSettings.signUp.mode === SIGN_UP_MODES.WAITLIST) {\n        const waitlistUrl = clerk.buildWaitlistUrl(\n          attribute === 'emailAddress'\n            ? {\n                initialValues: {\n                  [attribute]: identifierField.value,\n                },\n              }\n            : {},\n        );\n        return navigate(waitlistUrl);\n      }\n\n      clerk.client.signUp[attribute] = identifierField.value;\n\n      const redirectUrl = buildSSOCallbackURL(ctx, displayConfig.signUpUrl);\n      const redirectUrlComplete = ctx.afterSignUpUrl || '/';\n\n      return handleCombinedFlowTransfer({\n        afterSignUpUrl: ctx.afterSignUpUrl || '/',\n        clerk,\n        handleError: e => handleError(e, [identifierField, instantPasswordField], card.setError),\n        identifierAttribute: attribute,\n        identifierValue: identifierField.value,\n        navigate,\n        organizationTicket,\n        signUpMode: userSettings.signUp.mode,\n        redirectUrl,\n        redirectUrlComplete,\n        navigateOnSetActive,\n        passwordEnabled: userSettings.attributes.password?.required ?? false,\n        alternativePhoneCodeChannel:\n          alternativePhoneCodeProvider?.channel ||\n          getPreferredAlternativePhoneChannelForCombinedFlow(\n            authConfig.preferredChannels,\n            attribute,\n            identifierField.value,\n          ),\n      });\n    } else {\n      handleError(e, [identifierField, instantPasswordField], card.setError);\n    }\n  };\n\n  const handleFirstPartySubmit = async (e: React.FormEvent<HTMLFormElement>) => {\n    e.preventDefault();\n    return signInWithFields(identifierField, instantPasswordField);\n  };\n\n  const DynamicField = useMemo(() => {\n    const components = {\n      tel: Form.PhoneInput,\n      password: Form.PasswordInput,\n      text: Form.PlainInput,\n      email: Form.PlainInput,\n    };\n\n    return components[identifierField.type as keyof typeof components];\n  }, [identifierField.type]);\n\n  if (status.isLoading || clerkStatus === 'sign_up') {\n    // clerkStatus being sign_up will trigger a navigation to the sign up flow, so show a loading card instead of\n    // rendering the sign in flow.\n    return <LoadingCard />;\n  }\n\n  // @ts-expect-error `action` is not typed\n  const { action, validLastAuthenticationStrategies, ...identifierFieldProps } = identifierField.props;\n\n  const lastAuthenticationStrategy = clerk.client?.lastAuthenticationStrategy;\n  const isIdentifierLastAuthenticationStrategy =\n    lastAuthenticationStrategy && totalEnabledAuthMethods > 1\n      ? validLastAuthenticationStrategies?.has(lastAuthenticationStrategy)\n      : false;\n\n  return (\n    <Flow.Part part='start'>\n      {!alternativePhoneCodeProvider ? (\n        <Card.Root>\n          <Card.Content>\n            <Header.Root showLogo>\n              <Header.Title\n                localizationKey={\n                  isCombinedFlow\n                    ? localizationKeys('signIn.start.titleCombined')\n                    : localizationKeys('signIn.start.title')\n                }\n              />\n              <Header.Subtitle\n                localizationKey={\n                  isCombinedFlow\n                    ? localizationKeys('signIn.start.subtitleCombined')\n                    : localizationKeys('signIn.start.subtitle')\n                }\n                sx={{\n                  '&:empty': {\n                    display: 'none',\n                  },\n                }}\n              />\n            </Header.Root>\n            <Card.Alert>{card.error}</Card.Alert>\n            {/*TODO: extract main in its own component */}\n            <Col\n              elementDescriptor={descriptors.main}\n              gap={6}\n            >\n              <SocialButtonsReversibleContainerWithDivider>\n                {hasSocialOrWeb3Buttons && (\n                  <SignInSocialButtons\n                    enableWeb3Providers\n                    enableOAuthProviders\n                    enableAlternativePhoneCodeProviders={showAlternativePhoneCodeProviders}\n                    onAlternativePhoneCodeProviderClick={onAlternativePhoneCodeProviderClick}\n                  />\n                )}\n                {standardFormAttributes.length ? (\n                  <Form.Root\n                    onSubmit={handleFirstPartySubmit}\n                    gap={8}\n                  >\n                    <Col gap={6}>\n                      <Form.ControlRow elementId={identifierField.id}>\n                        <DynamicField\n                          actionLabel={nextIdentifier?.action}\n                          onActionClicked={switchToNextIdentifier}\n                          {...identifierFieldProps}\n                          autoFocus={shouldAutofocus}\n                          autoComplete={isWebAuthnAutofillSupported ? 'webauthn' : undefined}\n                          isLastAuthenticationStrategy={isIdentifierLastAuthenticationStrategy}\n                        />\n                      </Form.ControlRow>\n                      <InstantPasswordRow field={passwordBasedInstance ? instantPasswordField : undefined} />\n                    </Col>\n                    <Col center>\n                      <CaptchaElement />\n                      <Form.SubmitButton hasArrow />\n                    </Col>\n                  </Form.Root>\n                ) : null}\n              </SocialButtonsReversibleContainerWithDivider>\n              {!standardFormAttributes.length && <CaptchaElement />}\n              {userSettings.attributes.passkey?.enabled &&\n                userSettings.passkeySettings.show_sign_in_button &&\n                isWebSupported && (\n                  <Card.Action elementId={'usePasskey'}>\n                    <Card.ActionLink\n                      localizationKey={localizationKeys('signIn.start.actionLink__use_passkey')}\n                      onClick={() => authenticateWithPasskey({ flow: 'discoverable' })}\n                    />\n                  </Card.Action>\n                )}\n            </Col>\n          </Card.Content>\n          <Card.Footer>\n            {userSettings.signUp.mode === SIGN_UP_MODES.PUBLIC && !isCombinedFlow && (\n              <Card.Action elementId='signIn'>\n                <Card.ActionText localizationKey={localizationKeys('signIn.start.actionText')} />\n                <Card.ActionLink\n                  localizationKey={localizationKeys('signIn.start.actionLink')}\n                  to={clerk.buildUrlWithAuth(signUpUrl)}\n                />\n              </Card.Action>\n            )}\n            {userSettings.signUp.mode === SIGN_UP_MODES.WAITLIST && (\n              <Card.Action elementId='signIn'>\n                <Card.ActionText localizationKey={localizationKeys('signIn.start.actionText__join_waitlist')} />\n                <Card.ActionLink\n                  localizationKey={localizationKeys('signIn.start.actionLink__join_waitlist')}\n                  to={clerk.buildUrlWithAuth(waitlistUrl)}\n                />\n              </Card.Action>\n            )}\n          </Card.Footer>\n        </Card.Root>\n      ) : (\n        <SignInAlternativePhoneCodePhoneNumberCard\n          handleSubmit={handleFirstPartySubmit}\n          phoneNumberFormState={phoneIdentifierField}\n          onUseAnotherMethod={onAlternativePhoneCodeUseAnotherMethod}\n          phoneCodeProvider={alternativePhoneCodeProvider}\n        />\n      )}\n    </Flow.Part>\n  );\n}\n\nconst hasOnlyEnterpriseSSOFirstFactors = (signIn: SignInResource): boolean => {\n  if (!signIn.supportedFirstFactors?.length) {\n    return false;\n  }\n\n  return signIn.supportedFirstFactors.every(ff => ff.strategy === 'enterprise_sso');\n};\n\nconst InstantPasswordRow = ({ field }: { field?: FormControlState<'password'> }) => {\n  const [autofilled, setAutofilled] = useState(false);\n  const ref = useRef<HTMLInputElement>(null);\n  const show = !!(autofilled || field?.value);\n\n  // show password if it's autofilled by the browser\n  useLayoutEffect(() => {\n    const intervalId = setInterval(() => {\n      if (ref?.current) {\n        const autofilled =\n          window.getComputedStyle(ref.current, ':autofill').animationName === 'onAutoFillStart' ||\n          // https://github.com/facebook/react/issues/1159#issuecomment-1025423604\n          !!ref.current?.matches('*:-webkit-autofill');\n        if (autofilled) {\n          setAutofilled(autofilled);\n          clearInterval(intervalId);\n        }\n      }\n    }, 500);\n\n    return () => {\n      clearInterval(intervalId);\n    };\n  }, []);\n\n  useEffect(() => {\n    //if the field receives a value, we default to normal behaviour\n    if (field?.value && field.value !== '') {\n      setAutofilled(false);\n    }\n  }, [field?.value]);\n\n  if (!field) {\n    return null;\n  }\n\n  return (\n    <Form.ControlRow\n      elementId={field.id}\n      sx={show ? undefined : { position: 'absolute', opacity: 0, height: 0, pointerEvents: 'none', marginTop: '-1rem' }}\n    >\n      <Form.PasswordInput\n        {...field.props}\n        ref={ref}\n        tabIndex={show ? undefined : -1}\n      />\n    </Form.ControlRow>\n  );\n};\n\nexport const SignInStart = withRedirectToSignInTask(\n  withRedirectToAfterSignIn(withCardStateProvider(SignInStartInternal)),\n);\n"],"mappings":"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"}
+{"version":3,"file":"SignInStart.js","names":["initialValues: Record<SignInStartIdentifier, string | undefined>","e: any","instantPasswordError: ClerkAPIError","e","sessionAlreadyExistsError: ClerkAPIError","alreadySignedInError: ClerkAPIError","accountDoesNotExistError: ClerkAPIError","isWebAuthnAutofillSupported","autofilled"],"sources":["../../../src/components/SignIn/SignInStart.tsx"],"sourcesContent":["import { getAlternativePhoneCodeProviderData } from '@clerk/shared/alternativePhoneCode';\nimport { ERROR_CODES, SIGN_UP_MODES } from '@clerk/shared/internal/clerk-js/constants';\nimport { clerkInvalidFAPIResponse } from '@clerk/shared/internal/clerk-js/errors';\nimport { getClerkQueryParam, removeClerkQueryParam } from '@clerk/shared/internal/clerk-js/queryParams';\nimport { useClerk } from '@clerk/shared/react';\nimport type {\n  ClerkAPIError,\n  PhoneCodeChannel,\n  PhoneCodeChannelData,\n  SignInCreateParams,\n  SignInResource,\n} from '@clerk/shared/types';\nimport { isWebAuthnAutofillSupported, isWebAuthnSupported } from '@clerk/shared/webauthn';\nimport { useEffect, useLayoutEffect, useMemo, useRef, useState } from 'react';\n\nimport { Card } from '@/ui/elements/Card';\nimport { useCardState, withCardStateProvider } from '@/ui/elements/contexts';\nimport { Form } from '@/ui/elements/Form';\nimport { Header } from '@/ui/elements/Header';\nimport { LoadingCard } from '@/ui/elements/LoadingCard';\nimport { SocialButtonsReversibleContainerWithDivider } from '@/ui/elements/ReversibleContainer';\nimport { handleError } from '@/ui/utils/errorHandler';\nimport { isMobileDevice } from '@/ui/utils/isMobileDevice';\nimport type { FormControlState } from '@/ui/utils/useFormControl';\nimport { buildRequest, useFormControl } from '@/ui/utils/useFormControl';\n\nimport type { SignInStartIdentifier } from '../../common';\nimport {\n  buildSSOCallbackURL,\n  getIdentifierControlDisplayValues,\n  groupIdentifiers,\n  withRedirectToAfterSignIn,\n  withRedirectToSignInTask,\n} from '../../common';\nimport { useCoreSignIn, useEnvironment, useSignInContext } from '../../contexts';\nimport { Col, descriptors, Flow, localizationKeys } from '../../customizables';\nimport { CaptchaElement } from '../../elements/CaptchaElement';\nimport { useLoadingStatus } from '../../hooks';\nimport { useSupportEmail } from '../../hooks/useSupportEmail';\nimport { useTotalEnabledAuthMethods } from '../../hooks/useTotalEnabledAuthMethods';\nimport { useRouter } from '../../router';\nimport { handleCombinedFlowTransfer } from './handleCombinedFlowTransfer';\nimport { hasMultipleEnterpriseConnections, useHandleAuthenticateWithPasskey } from './shared';\nimport { SignInAlternativePhoneCodePhoneNumberCard } from './SignInAlternativePhoneCodePhoneNumberCard';\nimport { SignInSocialButtons } from './SignInSocialButtons';\nimport {\n  getPreferredAlternativePhoneChannel,\n  getPreferredAlternativePhoneChannelForCombinedFlow,\n  getSignUpAttributeFromIdentifier,\n} from './utils';\n\nconst useAutoFillPasskey = () => {\n  const [isSupported, setIsSupported] = useState(false);\n  const { navigate } = useRouter();\n  const onSecondFactor = () => navigate('factor-two');\n  const authenticateWithPasskey = useHandleAuthenticateWithPasskey(onSecondFactor);\n  const { userSettings } = useEnvironment();\n  const { passkeySettings, attributes } = userSettings;\n\n  useEffect(() => {\n    async function runAutofillPasskey() {\n      const _isSupported = await isWebAuthnAutofillSupported();\n      setIsSupported(_isSupported);\n      if (!_isSupported) {\n        return;\n      }\n\n      await authenticateWithPasskey({ flow: 'autofill' });\n    }\n\n    if (passkeySettings.allow_autofill && attributes.passkey?.enabled) {\n      runAutofillPasskey();\n    }\n  }, []);\n\n  return {\n    isWebAuthnAutofillSupported: isSupported,\n  };\n};\n\nfunction SignInStartInternal(): JSX.Element {\n  const card = useCardState();\n  const clerk = useClerk();\n  const status = useLoadingStatus();\n  const { displayConfig, userSettings, authConfig } = useEnvironment();\n  const signIn = useCoreSignIn();\n  const { navigate } = useRouter();\n  const ctx = useSignInContext();\n  const { afterSignInUrl, signUpUrl, waitlistUrl, isCombinedFlow, navigateOnSetActive } = ctx;\n  const supportEmail = useSupportEmail();\n  const totalEnabledAuthMethods = useTotalEnabledAuthMethods();\n  const identifierAttributes = useMemo<SignInStartIdentifier[]>(\n    () => groupIdentifiers(userSettings.enabledFirstFactorIdentifiers),\n    [userSettings.enabledFirstFactorIdentifiers],\n  );\n  const alternativePhoneCodeChannels = userSettings.alternativePhoneCodeChannels;\n\n  /**\n   * Passkeys\n   */\n  const { isWebAuthnAutofillSupported } = useAutoFillPasskey();\n  const onSecondFactor = () => navigate('factor-two');\n  const authenticateWithPasskey = useHandleAuthenticateWithPasskey(onSecondFactor);\n  const isWebSupported = isWebAuthnSupported();\n\n  const onlyPhoneNumberInitialValueExists =\n    !!ctx.initialValues?.phoneNumber && !(ctx.initialValues.emailAddress || ctx.initialValues.username);\n  const shouldStartWithPhoneNumberIdentifier =\n    onlyPhoneNumberInitialValueExists && identifierAttributes.includes('phone_number');\n  const [identifierAttribute, setIdentifierAttribute] = useState<SignInStartIdentifier>(\n    shouldStartWithPhoneNumberIdentifier ? 'phone_number' : identifierAttributes[0] || '',\n  );\n  const [hasSwitchedByAutofill, setHasSwitchedByAutofill] = useState(false);\n\n  const organizationTicket = getClerkQueryParam('__clerk_ticket') || '';\n  const clerkStatus = getClerkQueryParam('__clerk_status') || '';\n\n  const standardFormAttributes = userSettings.enabledFirstFactorIdentifiers;\n  const web3FirstFactors = userSettings.web3FirstFactors;\n  const authenticatableSocialStrategies = userSettings.authenticatableSocialStrategies;\n  const passwordBasedInstance = userSettings.instanceIsPasswordBased;\n  const { currentIdentifier, nextIdentifier } = getIdentifierControlDisplayValues(\n    identifierAttributes,\n    identifierAttribute,\n  );\n  const instantPasswordField = useFormControl('password', '', {\n    type: 'password',\n    label: localizationKeys('formFieldLabel__password'),\n    placeholder: localizationKeys('formFieldInputPlaceholder__password') as any,\n  });\n\n  const [alternativePhoneCodeProvider, setAlternativePhoneCodeProvider] = useState<PhoneCodeChannelData | null>(null);\n\n  const showAlternativePhoneCodeProviders = userSettings.alternativePhoneCodeChannels.length > 0;\n\n  const onAlternativePhoneCodeUseAnotherMethod = () => {\n    setAlternativePhoneCodeProvider(null);\n  };\n  const onAlternativePhoneCodeProviderClick = (phoneCodeChannel: PhoneCodeChannel) => {\n    const provider: PhoneCodeChannelData | null = getAlternativePhoneCodeProviderData(phoneCodeChannel) || null;\n    setAlternativePhoneCodeProvider(provider);\n  };\n\n  const ctxInitialValues = ctx.initialValues || {};\n  const initialValues: Record<SignInStartIdentifier, string | undefined> = useMemo(\n    () => ({\n      email_address: ctxInitialValues.emailAddress,\n      email_address_username: ctxInitialValues.emailAddress || ctxInitialValues.username,\n      username: ctxInitialValues.username,\n      phone_number: ctxInitialValues.phoneNumber,\n    }),\n    [ctx.initialValues],\n  );\n\n  const hasSocialOrWeb3Buttons =\n    !!authenticatableSocialStrategies.length || !!web3FirstFactors.length || !!alternativePhoneCodeChannels.length;\n  const [shouldAutofocus, setShouldAutofocus] = useState(!isMobileDevice() && !hasSocialOrWeb3Buttons);\n  const textIdentifierField = useFormControl('identifier', initialValues[identifierAttribute] || '', {\n    ...currentIdentifier,\n    isRequired: true,\n    transformer: value => value.trim(),\n  });\n\n  const phoneIdentifierField = useFormControl('identifier', initialValues['phone_number'] || '', {\n    ...currentIdentifier,\n    isRequired: true,\n  });\n\n  const identifierField = identifierAttribute === 'phone_number' ? phoneIdentifierField : textIdentifierField;\n\n  const switchToNextIdentifier = () => {\n    setIdentifierAttribute(\n      i => identifierAttributes[(identifierAttributes.indexOf(i) + 1) % identifierAttributes.length],\n    );\n    setShouldAutofocus(true);\n    setHasSwitchedByAutofill(false);\n  };\n\n  const handlePhoneNumberPaste = (value: string) => {\n    textIdentifierField.setValue(initialValues[identifierAttribute] || '');\n    phoneIdentifierField.setValue(value);\n    setIdentifierAttribute('phone_number');\n    setShouldAutofocus(true);\n  };\n\n  // switch to the phone input (if available) if a \"+\" is entered\n  // (either by the browser or the user)\n  // this does not work in chrome as it does not fire the change event and the value is\n  // not available via js\n  useLayoutEffect(() => {\n    if (\n      identifierField.value.startsWith('+') &&\n      identifierAttributes.includes('phone_number') &&\n      identifierAttribute !== 'phone_number' &&\n      !hasSwitchedByAutofill\n    ) {\n      handlePhoneNumberPaste(identifierField.value);\n      // do not switch automatically on subsequent autofills\n      // by the browser to avoid a switch loop\n      setHasSwitchedByAutofill(true);\n    }\n  }, [identifierField.value, identifierAttributes]);\n\n  useEffect(() => {\n    if (!organizationTicket) {\n      return;\n    }\n\n    if (clerkStatus === 'sign_up') {\n      const paramsToForward = new URLSearchParams();\n      if (organizationTicket) {\n        paramsToForward.set('__clerk_ticket', organizationTicket);\n      }\n      // We explicitly navigate to 'create' in the combined flow to trigger a client-side navigation. Navigating to\n      // signUpUrl triggers a full page reload when used with the hash router.\n      void navigate(isCombinedFlow ? `create` : signUpUrl, { searchParams: paramsToForward });\n      return;\n    }\n\n    status.setLoading();\n    card.setLoading();\n    signIn\n      .create({\n        strategy: 'ticket',\n        ticket: organizationTicket,\n      })\n      .then(res => {\n        switch (res.status) {\n          case 'needs_first_factor': {\n            if (!hasOnlyEnterpriseSSOFirstFactors(res) || hasMultipleEnterpriseConnections(res.supportedFirstFactors)) {\n              return navigate('factor-one');\n            }\n\n            return authenticateWithEnterpriseSSO();\n          }\n          case 'needs_second_factor':\n            return navigate('factor-two');\n          case 'complete':\n            removeClerkQueryParam('__clerk_ticket');\n            return clerk.setActive({\n              session: res.createdSessionId,\n              navigate: async ({ session }) => {\n                await navigateOnSetActive({ session, redirectUrl: afterSignInUrl });\n              },\n            });\n          default: {\n            console.error(clerkInvalidFAPIResponse(res.status, supportEmail));\n            return;\n          }\n        }\n      })\n      .catch(err => {\n        return attemptToRecoverFromSignInError(err);\n      })\n      .finally(() => {\n        // Keep the card in loading state during SSO redirect to prevent UI flicker\n        // This is necessary because there's a brief delay between initiating the SSO flow\n        // and the actual redirect to the external Identity Provider\n        const isRedirectingToSSOProvider = !!hasOnlyEnterpriseSSOFirstFactors(signIn);\n        if (isRedirectingToSSOProvider) {\n          return;\n        }\n\n        status.setIdle();\n        card.setIdle();\n      });\n  }, []);\n\n  useEffect(() => {\n    async function handleOauthError() {\n      const defaultErrorHandler = () => {\n        // Error from server may be too much information for the end user, so set a generic error\n        card.setError('Unable to complete action at this time. If the problem persists please contact support.');\n      };\n\n      const error = signIn?.firstFactorVerification?.error;\n      if (error) {\n        switch (error.code) {\n          case ERROR_CODES.NOT_ALLOWED_TO_SIGN_UP:\n          case ERROR_CODES.OAUTH_ACCESS_DENIED:\n          case ERROR_CODES.NOT_ALLOWED_ACCESS:\n          case ERROR_CODES.SAML_USER_ATTRIBUTE_MISSING:\n          case ERROR_CODES.OAUTH_EMAIL_DOMAIN_RESERVED_BY_SAML:\n          case ERROR_CODES.USER_LOCKED:\n          case ERROR_CODES.EXTERNAL_ACCOUNT_NOT_FOUND:\n          case ERROR_CODES.SIGN_UP_MODE_RESTRICTED:\n          case ERROR_CODES.SIGN_UP_MODE_RESTRICTED_WAITLIST:\n          case ERROR_CODES.ENTERPRISE_SSO_USER_ATTRIBUTE_MISSING:\n          case ERROR_CODES.ENTERPRISE_SSO_EMAIL_ADDRESS_DOMAIN_MISMATCH:\n          case ERROR_CODES.ENTERPRISE_SSO_HOSTED_DOMAIN_MISMATCH:\n          case ERROR_CODES.SAML_EMAIL_ADDRESS_DOMAIN_MISMATCH:\n          case ERROR_CODES.ORGANIZATION_MEMBERSHIP_QUOTA_EXCEEDED_FOR_SSO:\n          case ERROR_CODES.CAPTCHA_INVALID:\n          case ERROR_CODES.FRAUD_DEVICE_BLOCKED:\n          case ERROR_CODES.FRAUD_ACTION_BLOCKED:\n          case ERROR_CODES.SIGNUP_RATE_LIMIT_EXCEEDED:\n          case ERROR_CODES.USER_BANNED:\n            card.setError(error);\n            break;\n          default:\n            defaultErrorHandler();\n        }\n\n        // TODO: This is a workaround in order to reset the sign in attempt\n        // so that the oauth error does not persist on full page reloads.\n        void (await signIn.create({}));\n      }\n    }\n\n    void handleOauthError();\n  }, []);\n\n  const buildSignInParams = (fields: Array<FormControlState<string>>): SignInCreateParams => {\n    const hasPassword = fields.some(f => f.name === 'password' && !!f.value);\n\n    /**\n     * FAPI will return an error when password is submitted but the user's email matches requires enterprise sso authentication.\n     * We need to strip password from the create request, and reconstruct it later.\n     */\n    if (!hasPassword || userSettings.enterpriseSSO.enabled) {\n      fields = fields.filter(f => f.name !== 'password');\n    }\n    return {\n      ...buildRequest(fields),\n      ...(hasPassword && !userSettings.enterpriseSSO.enabled && { strategy: 'password' }),\n    } as SignInCreateParams;\n  };\n\n  const safePasswordSignInForEnterpriseSSOInstance = (\n    signInCreatePromise: Promise<SignInResource>,\n    fields: Array<FormControlState<string>>,\n  ) => {\n    return signInCreatePromise.then(signInResource => {\n      if (!userSettings.enterpriseSSO.enabled) {\n        return signInResource;\n      }\n      /**\n       * For instances with Enterprise SSO enabled, perform sign in with password only when it is allowed for the identified user.\n       */\n      const passwordField = fields.find(f => f.name === 'password')?.value;\n      if (!passwordField || signInResource.supportedFirstFactors?.some(ff => ff.strategy === 'enterprise_sso')) {\n        return signInResource;\n      }\n      return signInResource.attemptFirstFactor({ strategy: 'password', password: passwordField });\n    });\n  };\n\n  const signInWithFields = async (...fields: Array<FormControlState<string>>) => {\n    // If the user has already selected an alternative phone code provider, we use that.\n    const preferredAlternativePhoneChannel =\n      alternativePhoneCodeProvider?.channel ||\n      getPreferredAlternativePhoneChannel(fields, authConfig.preferredChannels, 'identifier');\n    if (preferredAlternativePhoneChannel) {\n      // We need to send the alternative phone code provider channel in the sign in request\n      // together with the phone_code strategy, in order for FAPI to create a Verification upon this first request.\n      const noop = () => {};\n      fields.push({\n        id: 'strategy',\n        value: 'phone_code',\n        clearFeedback: noop,\n        setValue: noop,\n        onChange: noop,\n        setError: noop,\n      } as any);\n      fields.push({\n        id: 'channel',\n        value: preferredAlternativePhoneChannel,\n        clearFeedback: noop,\n        setValue: noop,\n        onChange: noop,\n        setError: noop,\n      } as any);\n    }\n    try {\n      const res = await safePasswordSignInForEnterpriseSSOInstance(signIn.create(buildSignInParams(fields)), fields);\n\n      switch (res.status) {\n        case 'needs_identifier':\n          // Check if we need to initiate an enterprise sso flow\n          if (res.supportedFirstFactors?.some(ff => ff.strategy === 'enterprise_sso')) {\n            await authenticateWithEnterpriseSSO();\n          }\n          break;\n        case 'needs_first_factor': {\n          if (!hasOnlyEnterpriseSSOFirstFactors(res) || hasMultipleEnterpriseConnections(res.supportedFirstFactors)) {\n            return navigate('factor-one');\n          }\n\n          return authenticateWithEnterpriseSSO();\n        }\n        case 'needs_second_factor':\n          return navigate('factor-two');\n        case 'complete':\n          return clerk.setActive({\n            session: res.createdSessionId,\n            navigate: async ({ session }) => {\n              await navigateOnSetActive({ session, redirectUrl: afterSignInUrl });\n            },\n          });\n        default: {\n          console.error(clerkInvalidFAPIResponse(res.status, supportEmail));\n          return;\n        }\n      }\n    } catch (e: any) {\n      return attemptToRecoverFromSignInError(e);\n    }\n  };\n\n  const authenticateWithEnterpriseSSO = async () => {\n    const redirectUrl = buildSSOCallbackURL(ctx, displayConfig.signInUrl);\n    const redirectUrlComplete = ctx.afterSignInUrl || '/';\n\n    return signIn.authenticateWithRedirect({\n      strategy: 'enterprise_sso',\n      redirectUrl,\n      redirectUrlComplete,\n      oidcPrompt: ctx.oidcPrompt,\n      continueSignIn: true,\n    });\n  };\n\n  const attemptToRecoverFromSignInError = async (e: any) => {\n    if (!e.errors) {\n      return;\n    }\n    const instantPasswordError: ClerkAPIError = e.errors.find(\n      (e: ClerkAPIError) =>\n        e.code === ERROR_CODES.INVALID_STRATEGY_FOR_USER ||\n        e.code === ERROR_CODES.FORM_PASSWORD_INCORRECT ||\n        e.code === ERROR_CODES.FORM_PASSWORD_PWNED,\n    );\n\n    const sessionAlreadyExistsError: ClerkAPIError = e.errors.find(\n      (e: ClerkAPIError) => e.code === ERROR_CODES.SESSION_EXISTS,\n    );\n    const alreadySignedInError: ClerkAPIError = e.errors.find(\n      (e: ClerkAPIError) => e.code === 'identifier_already_signed_in',\n    );\n    const accountDoesNotExistError: ClerkAPIError = e.errors.find(\n      (e: ClerkAPIError) =>\n        e.code === ERROR_CODES.INVITATION_ACCOUNT_NOT_EXISTS || e.code === ERROR_CODES.FORM_IDENTIFIER_NOT_FOUND,\n    );\n\n    if (instantPasswordError) {\n      await signInWithFields(identifierField);\n    } else if (sessionAlreadyExistsError) {\n      await clerk.setActive({\n        session: clerk.client.lastActiveSessionId,\n        navigate: async ({ session }) => {\n          await navigateOnSetActive({ session, redirectUrl: afterSignInUrl });\n        },\n      });\n    } else if (alreadySignedInError) {\n      // eslint-disable-next-line @typescript-eslint/no-non-null-assertion\n      const sid = alreadySignedInError.meta!.sessionId!;\n      await clerk.setActive({\n        session: sid,\n        navigate: async ({ session }) => {\n          await navigateOnSetActive({ session, redirectUrl: afterSignInUrl });\n        },\n      });\n    } else if (isCombinedFlow && accountDoesNotExistError) {\n      const attribute = getSignUpAttributeFromIdentifier(identifierField);\n\n      if (userSettings.signUp.mode === SIGN_UP_MODES.WAITLIST) {\n        const waitlistUrl = clerk.buildWaitlistUrl(\n          attribute === 'emailAddress'\n            ? {\n                initialValues: {\n                  [attribute]: identifierField.value,\n                },\n              }\n            : {},\n        );\n        return navigate(waitlistUrl);\n      }\n\n      clerk.client.signUp[attribute] = identifierField.value;\n\n      const redirectUrl = buildSSOCallbackURL(ctx, displayConfig.signUpUrl);\n      const redirectUrlComplete = ctx.afterSignUpUrl || '/';\n\n      return handleCombinedFlowTransfer({\n        afterSignUpUrl: ctx.afterSignUpUrl || '/',\n        clerk,\n        handleError: e => handleError(e, [identifierField, instantPasswordField], card.setError),\n        identifierAttribute: attribute,\n        identifierValue: identifierField.value,\n        navigate,\n        organizationTicket,\n        signUpMode: userSettings.signUp.mode,\n        redirectUrl,\n        redirectUrlComplete,\n        navigateOnSetActive,\n        passwordEnabled: userSettings.attributes.password?.required ?? false,\n        alternativePhoneCodeChannel:\n          alternativePhoneCodeProvider?.channel ||\n          getPreferredAlternativePhoneChannelForCombinedFlow(\n            authConfig.preferredChannels,\n            attribute,\n            identifierField.value,\n          ),\n      });\n    } else {\n      handleError(e, [identifierField, instantPasswordField], card.setError);\n    }\n  };\n\n  const handleFirstPartySubmit = async (e: React.FormEvent<HTMLFormElement>) => {\n    e.preventDefault();\n    return signInWithFields(identifierField, instantPasswordField);\n  };\n\n  const DynamicField = useMemo(() => {\n    const components = {\n      tel: Form.PhoneInput,\n      password: Form.PasswordInput,\n      text: Form.PlainInput,\n      email: Form.PlainInput,\n    };\n\n    return components[identifierField.type as keyof typeof components];\n  }, [identifierField.type]);\n\n  if (status.isLoading || clerkStatus === 'sign_up') {\n    // clerkStatus being sign_up will trigger a navigation to the sign up flow, so show a loading card instead of\n    // rendering the sign in flow.\n    return <LoadingCard />;\n  }\n\n  // @ts-expect-error `action` is not typed\n  const { action, validLastAuthenticationStrategies, ...identifierFieldProps } = identifierField.props;\n\n  const lastAuthenticationStrategy = clerk.client?.lastAuthenticationStrategy;\n  const isIdentifierLastAuthenticationStrategy =\n    lastAuthenticationStrategy && totalEnabledAuthMethods > 1\n      ? validLastAuthenticationStrategies?.has(lastAuthenticationStrategy)\n      : false;\n\n  return (\n    <Flow.Part part='start'>\n      {!alternativePhoneCodeProvider ? (\n        <Card.Root>\n          <Card.Content>\n            <Header.Root showLogo>\n              <Header.Title\n                localizationKey={\n                  isCombinedFlow\n                    ? localizationKeys('signIn.start.titleCombined')\n                    : localizationKeys('signIn.start.title')\n                }\n              />\n              <Header.Subtitle\n                localizationKey={\n                  isCombinedFlow\n                    ? localizationKeys('signIn.start.subtitleCombined')\n                    : localizationKeys('signIn.start.subtitle')\n                }\n                sx={{\n                  '&:empty': {\n                    display: 'none',\n                  },\n                }}\n              />\n            </Header.Root>\n            <Card.Alert>{card.error}</Card.Alert>\n            {/*TODO: extract main in its own component */}\n            <Col\n              elementDescriptor={descriptors.main}\n              gap={6}\n            >\n              <SocialButtonsReversibleContainerWithDivider>\n                {hasSocialOrWeb3Buttons && (\n                  <SignInSocialButtons\n                    enableWeb3Providers\n                    enableOAuthProviders\n                    enableAlternativePhoneCodeProviders={showAlternativePhoneCodeProviders}\n                    onAlternativePhoneCodeProviderClick={onAlternativePhoneCodeProviderClick}\n                  />\n                )}\n                {standardFormAttributes.length ? (\n                  <Form.Root\n                    onSubmit={handleFirstPartySubmit}\n                    gap={8}\n                  >\n                    <Col gap={6}>\n                      <Form.ControlRow elementId={identifierField.id}>\n                        <DynamicField\n                          actionLabel={nextIdentifier?.action}\n                          onActionClicked={switchToNextIdentifier}\n                          {...identifierFieldProps}\n                          autoFocus={shouldAutofocus}\n                          autoComplete={isWebAuthnAutofillSupported ? 'webauthn' : undefined}\n                          isLastAuthenticationStrategy={isIdentifierLastAuthenticationStrategy}\n                        />\n                      </Form.ControlRow>\n                      <InstantPasswordRow field={passwordBasedInstance ? instantPasswordField : undefined} />\n                    </Col>\n                    <Col center>\n                      <CaptchaElement />\n                      <Form.SubmitButton hasArrow />\n                    </Col>\n                  </Form.Root>\n                ) : null}\n              </SocialButtonsReversibleContainerWithDivider>\n              {!standardFormAttributes.length && <CaptchaElement />}\n              {userSettings.attributes.passkey?.enabled &&\n                userSettings.passkeySettings.show_sign_in_button &&\n                isWebSupported && (\n                  <Card.Action elementId={'usePasskey'}>\n                    <Card.ActionLink\n                      localizationKey={localizationKeys('signIn.start.actionLink__use_passkey')}\n                      onClick={() => authenticateWithPasskey({ flow: 'discoverable' })}\n                    />\n                  </Card.Action>\n                )}\n            </Col>\n          </Card.Content>\n          <Card.Footer>\n            {userSettings.signUp.mode === SIGN_UP_MODES.PUBLIC && !isCombinedFlow && (\n              <Card.Action elementId='signIn'>\n                <Card.ActionText localizationKey={localizationKeys('signIn.start.actionText')} />\n                <Card.ActionLink\n                  localizationKey={localizationKeys('signIn.start.actionLink')}\n                  to={clerk.buildUrlWithAuth(signUpUrl)}\n                />\n              </Card.Action>\n            )}\n            {userSettings.signUp.mode === SIGN_UP_MODES.WAITLIST && (\n              <Card.Action elementId='signIn'>\n                <Card.ActionText localizationKey={localizationKeys('signIn.start.actionText__join_waitlist')} />\n                <Card.ActionLink\n                  localizationKey={localizationKeys('signIn.start.actionLink__join_waitlist')}\n                  to={clerk.buildUrlWithAuth(waitlistUrl)}\n                />\n              </Card.Action>\n            )}\n          </Card.Footer>\n        </Card.Root>\n      ) : (\n        <SignInAlternativePhoneCodePhoneNumberCard\n          handleSubmit={handleFirstPartySubmit}\n          phoneNumberFormState={phoneIdentifierField}\n          onUseAnotherMethod={onAlternativePhoneCodeUseAnotherMethod}\n          phoneCodeProvider={alternativePhoneCodeProvider}\n        />\n      )}\n    </Flow.Part>\n  );\n}\n\nconst hasOnlyEnterpriseSSOFirstFactors = (signIn: SignInResource): boolean => {\n  if (!signIn.supportedFirstFactors?.length) {\n    return false;\n  }\n\n  return signIn.supportedFirstFactors.every(ff => ff.strategy === 'enterprise_sso');\n};\n\nconst InstantPasswordRow = ({ field }: { field?: FormControlState<'password'> }) => {\n  const [autofilled, setAutofilled] = useState(false);\n  const ref = useRef<HTMLInputElement>(null);\n  const show = !!(autofilled || field?.value);\n\n  // show password if it's autofilled by the browser\n  useLayoutEffect(() => {\n    const intervalId = setInterval(() => {\n      if (ref?.current) {\n        const autofilled =\n          window.getComputedStyle(ref.current, ':autofill').animationName === 'onAutoFillStart' ||\n          // https://github.com/facebook/react/issues/1159#issuecomment-1025423604\n          !!ref.current?.matches('*:-webkit-autofill');\n        if (autofilled) {\n          setAutofilled(autofilled);\n          clearInterval(intervalId);\n        }\n      }\n    }, 500);\n\n    return () => {\n      clearInterval(intervalId);\n    };\n  }, []);\n\n  useEffect(() => {\n    //if the field receives a value, we default to normal behaviour\n    if (field?.value && field.value !== '') {\n      setAutofilled(false);\n    }\n  }, [field?.value]);\n\n  if (!field) {\n    return null;\n  }\n\n  return (\n    <Form.ControlRow\n      elementId={field.id}\n      sx={show ? undefined : { position: 'absolute', opacity: 0, height: 0, pointerEvents: 'none', marginTop: '-1rem' }}\n    >\n      <Form.PasswordInput\n        {...field.props}\n        ref={ref}\n        tabIndex={show ? undefined : -1}\n      />\n    </Form.ControlRow>\n  );\n};\n\nexport const SignInStart = withRedirectToSignInTask(\n  withRedirectToAfterSignIn(withCardStateProvider(SignInStartInternal)),\n);\n"],"mappings":"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"}

package/dist/components/devPrompts/KeylessPrompt/use-revalidate-environment.js

@@ -15,7 +15,7 @@ function useRevalidateEnvironment() {
 	useEffect(() => {
 		const controller = new AbortController();
 		window.addEventListener("focus", async () => {
-			const environment = clerk.__unstable__environment;
+			const environment = clerk.__internal_environment;
 			if (!environment) return;
 			if (environment.authConfig.claimedAt !== null) return controller.abort();
 			if (Date.now() < lastTouchTimestamp.current + THROTTLE_DURATION_MS) return;

package/dist/components/devPrompts/KeylessPrompt/use-revalidate-environment.js.map

@@ -1 +1 @@
-{"version":3,"file":"use-revalidate-environment.js","names":[],"sources":["../../../../src/components/devPrompts/KeylessPrompt/use-revalidate-environment.ts"],"sourcesContent":["import { useClerk } from '@clerk/shared/react';\nimport { useEffect, useReducer, useRef } from 'react';\n\nimport type { Clerk } from '../../../../core/clerk';\nimport { useEnvironment } from '../../../contexts';\n\nconst THROTTLE_DURATION_MS = 10 * 1000;\n\n/**\n * Revalidates environment on focus, highly optimized for Keyless mode.\n * Attention: this is not a generic solution, and should not be used for revalidating environment inside UI components that are end-user facing (e.g. SignIn)\n */\nfunction useRevalidateEnvironment() {\n  const clerk = useClerk();\n  const lastTouchTimestamp = useRef(Date.now());\n  const [, forceUpdate] = useReducer(v => v + 1, 0);\n\n  useEffect(() => {\n    const controller = new AbortController();\n    window.addEventListener(\n      'focus',\n\n      async () => {\n        const environment = (clerk as Clerk).__unstable__environment;\n\n        if (!environment) {\n          return;\n        }\n\n        if (environment.authConfig.claimedAt !== null) {\n          return controller.abort();\n        }\n\n        // Re-fetch at most every 10 seconds\n        if (Date.now() < lastTouchTimestamp.current + THROTTLE_DURATION_MS) {\n          return;\n        }\n\n        if (document.visibilityState !== 'visible') {\n          return;\n        }\n\n        const maxRetries = 2;\n\n        for (let i = 0; i < maxRetries; i++) {\n          const {\n            authConfig: { claimedAt },\n          } = await environment.fetch();\n          lastTouchTimestamp.current = Date.now();\n\n          if (claimedAt !== null) {\n            forceUpdate();\n            break;\n          }\n        }\n      },\n      {\n        signal: controller.signal,\n      },\n    );\n\n    return () => {\n      controller.abort();\n    };\n  }, []);\n\n  return useEnvironment();\n}\n\nexport { useRevalidateEnvironment };\n"],"mappings":";;;;;AAMA,MAAM,uBAAuB,KAAK;;;;;AAMlC,SAAS,2BAA2B;CAClC,MAAM,QAAQ,UAAU;CACxB,MAAM,qBAAqB,OAAO,KAAK,KAAK,CAAC;CAC7C,MAAM,GAAG,eAAe,YAAW,MAAK,IAAI,GAAG,EAAE;AAEjD,iBAAgB;EACd,MAAM,aAAa,IAAI,iBAAiB;AACxC,SAAO,iBACL,SAEA,YAAY;GACV,MAAM,cAAe,MAAgB;AAErC,OAAI,CAAC,YACH;AAGF,OAAI,YAAY,WAAW,cAAc,KACvC,QAAO,WAAW,OAAO;AAI3B,OAAI,KAAK,KAAK,GAAG,mBAAmB,UAAU,qBAC5C;AAGF,OAAI,SAAS,oBAAoB,UAC/B;GAGF,MAAM,aAAa;AAEnB,QAAK,IAAI,IAAI,GAAG,IAAI,YAAY,KAAK;IACnC,MAAM,EACJ,YAAY,EAAE,gBACZ,MAAM,YAAY,OAAO;AAC7B,uBAAmB,UAAU,KAAK,KAAK;AAEvC,QAAI,cAAc,MAAM;AACtB,kBAAa;AACb;;;KAIN,EACE,QAAQ,WAAW,QACpB,CACF;AAED,eAAa;AACX,cAAW,OAAO;;IAEnB,EAAE,CAAC;AAEN,QAAO,gBAAgB"}
+{"version":3,"file":"use-revalidate-environment.js","names":[],"sources":["../../../../src/components/devPrompts/KeylessPrompt/use-revalidate-environment.ts"],"sourcesContent":["import { useClerk } from '@clerk/shared/react';\nimport type { Clerk } from '@clerk/shared/types';\nimport { useEffect, useReducer, useRef } from 'react';\n\nimport { useEnvironment } from '../../../contexts';\n\nconst THROTTLE_DURATION_MS = 10 * 1000;\n\n/**\n * Revalidates environment on focus, highly optimized for Keyless mode.\n * Attention: this is not a generic solution, and should not be used for revalidating environment inside UI components that are end-user facing (e.g. SignIn)\n */\nfunction useRevalidateEnvironment() {\n  const clerk = useClerk();\n  const lastTouchTimestamp = useRef(Date.now());\n  const [, forceUpdate] = useReducer(v => v + 1, 0);\n\n  useEffect(() => {\n    const controller = new AbortController();\n    window.addEventListener(\n      'focus',\n\n      async () => {\n        // @ts-expect-error -- private method for the time being\n        const environment = (clerk as Clerk).__internal_environment;\n\n        if (!environment) {\n          return;\n        }\n\n        if (environment.authConfig.claimedAt !== null) {\n          return controller.abort();\n        }\n\n        // Re-fetch at most every 10 seconds\n        if (Date.now() < lastTouchTimestamp.current + THROTTLE_DURATION_MS) {\n          return;\n        }\n\n        if (document.visibilityState !== 'visible') {\n          return;\n        }\n\n        const maxRetries = 2;\n\n        for (let i = 0; i < maxRetries; i++) {\n          const {\n            authConfig: { claimedAt },\n          } = await environment.fetch();\n          lastTouchTimestamp.current = Date.now();\n\n          if (claimedAt !== null) {\n            forceUpdate();\n            break;\n          }\n        }\n      },\n      {\n        signal: controller.signal,\n      },\n    );\n\n    return () => {\n      controller.abort();\n    };\n  }, []);\n\n  return useEnvironment();\n}\n\nexport { useRevalidateEnvironment };\n"],"mappings":";;;;;AAMA,MAAM,uBAAuB,KAAK;;;;;AAMlC,SAAS,2BAA2B;CAClC,MAAM,QAAQ,UAAU;CACxB,MAAM,qBAAqB,OAAO,KAAK,KAAK,CAAC;CAC7C,MAAM,GAAG,eAAe,YAAW,MAAK,IAAI,GAAG,EAAE;AAEjD,iBAAgB;EACd,MAAM,aAAa,IAAI,iBAAiB;AACxC,SAAO,iBACL,SAEA,YAAY;GAEV,MAAM,cAAe,MAAgB;AAErC,OAAI,CAAC,YACH;AAGF,OAAI,YAAY,WAAW,cAAc,KACvC,QAAO,WAAW,OAAO;AAI3B,OAAI,KAAK,KAAK,GAAG,mBAAmB,UAAU,qBAC5C;AAGF,OAAI,SAAS,oBAAoB,UAC/B;GAGF,MAAM,aAAa;AAEnB,QAAK,IAAI,IAAI,GAAG,IAAI,YAAY,KAAK;IACnC,MAAM,EACJ,YAAY,EAAE,gBACZ,MAAM,YAAY,OAAO;AAC7B,uBAAmB,UAAU,KAAK,KAAK;AAEvC,QAAI,cAAc,MAAM;AACtB,kBAAa;AACb;;;KAIN,EACE,QAAQ,WAAW,QACpB,CACF;AAED,eAAa;AACX,cAAW,OAAO;;IAEnB,EAAE,CAAC;AAEN,QAAO,gBAAgB"}

package/dist/{browser/createorganization_ui_9c3cc3_1.0.0-snapshot.v20251203203405.js → createorganization_ui_30c3ec_1.0.0-snapshot.v20251204175016.js}

@@ -1 +1 @@
-"use strict";(globalThis.webpackChunk_clerk_ui=globalThis.webpackChunk_clerk_ui||[]).push([["243"],{9302:function(e,t,a){a.d(t,{A:()=>P});var r=a(4518),i=a(8909),n=a(5074),o=a(7697),l=a(3269),s=a(2454),d=a(1475),c=a(3549),u=a(6153),g=a(155),h=a(6370),p=a(5485),m=a(4468),f=a(8640),z=a(6245),v=a(8272),b=a(7068),C=a(2861),Y=a(3934),$=a(2717),x=a(5377),O=a(3689);let P=(0,l.dm)(e=>{let t=(0,l.f0)(),a=(0,z.X)({onNextStep:()=>t.setError(void 0)}),P=n.useRef(null),{createOrganization:S,isLoaded:w,setActive:k,userMemberships:A}=(0,i.D_)({userMemberships:O.mu.userMemberships}),{organization:R}=(0,i.Z5)(),{organizationSettings:F}=(0,o.O)(),[T,_]=n.useState(),y=(0,f.tJ)("name","",{type:"text",label:(0,C.G)("formFieldLabel__organizationName"),placeholder:(0,C.G)("formFieldInputPlaceholder__organizationName")}),I=(0,f.tJ)("slug","",{type:"text",label:(0,C.G)("formFieldLabel__organizationSlug"),placeholder:(0,C.G)("formFieldInputPlaceholder__organizationSlug")}),D=!!y.value,G=!F.slug.disabled,M=async r=>{if((r.preventDefault(),D)&&w)try{let t={name:y.value};G&&(t.slug=I.value);let r=await S(t);if(T&&await r.setLogo({file:T}),P.current=r,await k({organization:r}),A.revalidate?.(),e.skipInvitationScreen??1===r.maxAllowedMemberships)return B();a.nextStep()}catch(e){(0,m.H4)(e,[y,I],t.setError)}},B=()=>{e.navigateAfterCreateOrganization?.(P.current),e.onComplete?.()},U=e=>{I.setValue(e)},V="organizationList"===e.flow?"subtitle":void 0;return(0,r.FD)(z.s,{...a.props,children:[(0,r.Y)(c.M,{headerTitle:e?.startPage?.headerTitle,headerSubtitle:e?.startPage?.headerSubtitle,headerTitleTextVariant:"h2",headerSubtitleTextVariant:V,sx:e=>({minHeight:e.sizes.$60,gap:e.space.$6,textAlign:"left"}),children:(0,r.FD)(s.l.Root,{onSubmit:M,sx:e=>({gap:e.space.$6}),children:[(0,r.Y)(v.fv,{children:(0,r.Y)(x.i,{organization:{name:y.value},onAvatarChange:async e=>await _(e),onAvatarRemove:T?()=>(t.setIdle(),_(null)):null,avatarPreviewPlaceholder:(0,r.Y)(g.K,{variant:"ghost","aria-label":"Upload organization logo",icon:(0,r.Y)(v.In,{size:"md",icon:b.A,sx:e=>({color:e.colors.$colorMutedForeground,transitionDuration:e.transitionDuration.$controls})}),sx:e=>({width:e.sizes.$16,height:e.sizes.$16,borderRadius:e.radii.$md,borderWidth:e.borderWidths.$normal,borderStyle:e.borderStyles.$dashed,borderColor:e.colors.$borderAlpha200,backgroundColor:e.colors.$neutralAlpha50,":hover":{backgroundColor:e.colors.$neutralAlpha50,svg:{transform:"scale(1.2)"}}})})})}),(0,r.Y)(s.l.ControlRow,{elementId:y.id,children:(0,r.Y)(s.l.PlainInput,{...y.props,onChange:e=>{y.setValue(e.target.value),U((0,p.e)(e.target.value))},isRequired:!0,autoFocus:!0,ignorePasswordManager:!0})}),G&&(0,r.Y)(s.l.ControlRow,{elementId:I.id,children:(0,r.Y)(s.l.PlainInput,{...I.props,onChange:e=>{U(e.target.value)},isRequired:!0,pattern:"^(?=.*[a-z0-9])[a-z0-9\\-]+$",ignorePasswordManager:!0})}),(0,r.FD)(d.c,{sx:e=>({marginTop:e.space.$none}),children:[(0,r.Y)(s.l.SubmitButton,{block:!1,isDisabled:!D,localizationKey:(0,C.G)("createOrganization.formButtonSubmit")}),e.onCancel&&(0,r.Y)(s.l.ResetButton,{localizationKey:(0,C.G)("userProfile.formButtonReset"),block:!1,onClick:e.onCancel})]})]})}),(0,r.Y)(c.M,{headerTitle:(0,C.G)("organizationProfile.invitePage.title"),headerTitleTextVariant:"h2",headerSubtitleTextVariant:V,sx:e=>({minHeight:e.sizes.$60,textAlign:"left"}),children:R&&(0,r.Y)(Y.B,{resetButtonLabel:(0,C.G)("createOrganization.invitePage.formButtonReset"),onSuccess:a.nextStep,onReset:B})}),(0,r.FD)(v.fv,{children:[(0,r.Y)(u.Y.Root,{children:(0,r.Y)(u.Y.Title,{localizationKey:(0,C.G)("organizationProfile.invitePage.title"),sx:{textAlign:"left"}})}),(0,r.Y)(h.B,{contents:(0,r.Y)($.k,{}),sx:e=>({minHeight:e.sizes.$60}),onFinish:B})]})]})})},4472:function(e,t,a){a.r(t),a.d(t,{CreateOrganization:()=>z,CreateOrganizationModal:()=>v});var r=a(4518),i=a(3269),n=a(3264),o=a(1),l=a(4607),s=a(7831),d=a(2265),c=a(8909),u=a(6088),g=a(2861),h=a(180),p=a(9302);let m=(0,i.dm)(()=>{let{closeCreateOrganization:e}=(0,c.ho)(),{mode:t,navigateAfterCreateOrganization:a,skipInvitationScreen:n}=(0,o.W)(),l=(0,i.f0)(),{showDevModeNotice:s}=(0,h.Q)();return(0,r.FD)(u.Z.Root,{sx:e=>({width:e.sizes.$108}),children:[(0,r.FD)(u.Z.Content,{sx:e=>({padding:`${e.space.$4} ${e.space.$5} ${s?e.space.$12:e.space.$6}`}),children:[(0,r.Y)(u.Z.Alert,{children:l.error}),(0,r.Y)(p.A,{skipInvitationScreen:n,startPage:{headerTitle:(0,g.G)("createOrganization.title")},navigateAfterCreateOrganization:a,flow:"default",onComplete:()=>{"modal"===t&&e()}})]}),(0,r.Y)(u.Z.Footer,{})]})}),f=(0,n.G)(()=>(0,r.Y)(m,{})),z=(0,i.dm)(()=>(0,r.Y)(l.n.Root,{flow:"createOrganization",children:(0,r.Y)(l.n.Part,{children:(0,r.Y)(s.d,{children:(0,r.Y)(d.q,{children:(0,r.Y)(f,{})})})})})),v=e=>{let t={...e,routing:"virtual",componentName:"CreateOrganization",mode:"modal"};return(0,r.Y)(d.q,{path:"createOrganization",children:(0,r.Y)(o.$.Provider,{value:t,children:(0,r.Y)("div",{children:(0,r.Y)(z,{})})})})}},1:function(e,t,a){a.d(t,{$:()=>l,W:()=>s});var r=a(5074),i=a(7697),n=a(4964),o=a(2117);let l=(0,r.createContext)(null),s=()=>{let e=(0,r.useContext)(l),{navigate:t}=(0,n.r)(),{displayConfig:a}=(0,i.O)();if(!e||"CreateOrganization"!==e.componentName)throw Error("Clerk: useCreateOrganizationContext called outside CreateOrganization.");let{componentName:s,...d}=e;return{...d,skipInvitationScreen:d.skipInvitationScreen||!1,navigateAfterCreateOrganization:e=>"function"==typeof d.afterCreateOrganizationUrl?t(d.afterCreateOrganizationUrl(e)):d.afterCreateOrganizationUrl?t((0,o.tR)({urlWithParam:d.afterCreateOrganizationUrl,entity:e})):t(a.afterCreateOrganizationUrl),componentName:s}}}}]);
+"use strict";(globalThis.webpackChunk_clerk_ui=globalThis.webpackChunk_clerk_ui||[]).push([["243"],{9302:function(e,t,a){a.d(t,{A:()=>P});var r=a(4518),i=a(8909),n=a(5074),o=a(7697),l=a(3269),s=a(2454),d=a(1475),c=a(3549),u=a(6153),g=a(155),h=a(6370),p=a(5485),m=a(4468),f=a(8640),z=a(6245),v=a(8272),b=a(7068),C=a(2861),Y=a(3934),$=a(3100),x=a(5377),O=a(3689);let P=(0,l.dm)(e=>{let t=(0,l.f0)(),a=(0,z.X)({onNextStep:()=>t.setError(void 0)}),P=n.useRef(null),{createOrganization:S,isLoaded:w,setActive:k,userMemberships:A}=(0,i.D_)({userMemberships:O.mu.userMemberships}),{organization:R}=(0,i.Z5)(),{organizationSettings:F}=(0,o.O)(),[T,_]=n.useState(),y=(0,f.tJ)("name","",{type:"text",label:(0,C.G)("formFieldLabel__organizationName"),placeholder:(0,C.G)("formFieldInputPlaceholder__organizationName")}),I=(0,f.tJ)("slug","",{type:"text",label:(0,C.G)("formFieldLabel__organizationSlug"),placeholder:(0,C.G)("formFieldInputPlaceholder__organizationSlug")}),D=!!y.value,G=!F.slug.disabled,M=async r=>{if((r.preventDefault(),D)&&w)try{let t={name:y.value};G&&(t.slug=I.value);let r=await S(t);if(T&&await r.setLogo({file:T}),P.current=r,await k({organization:r}),A.revalidate?.(),e.skipInvitationScreen??1===r.maxAllowedMemberships)return B();a.nextStep()}catch(e){(0,m.H4)(e,[y,I],t.setError)}},B=()=>{e.navigateAfterCreateOrganization?.(P.current),e.onComplete?.()},U=e=>{I.setValue(e)},V="organizationList"===e.flow?"subtitle":void 0;return(0,r.FD)(z.s,{...a.props,children:[(0,r.Y)(c.M,{headerTitle:e?.startPage?.headerTitle,headerSubtitle:e?.startPage?.headerSubtitle,headerTitleTextVariant:"h2",headerSubtitleTextVariant:V,sx:e=>({minHeight:e.sizes.$60,gap:e.space.$6,textAlign:"left"}),children:(0,r.FD)(s.l.Root,{onSubmit:M,sx:e=>({gap:e.space.$6}),children:[(0,r.Y)(v.fv,{children:(0,r.Y)(x.i,{organization:{name:y.value},onAvatarChange:async e=>await _(e),onAvatarRemove:T?()=>(t.setIdle(),_(null)):null,avatarPreviewPlaceholder:(0,r.Y)(g.K,{variant:"ghost","aria-label":"Upload organization logo",icon:(0,r.Y)(v.In,{size:"md",icon:b.A,sx:e=>({color:e.colors.$colorMutedForeground,transitionDuration:e.transitionDuration.$controls})}),sx:e=>({width:e.sizes.$16,height:e.sizes.$16,borderRadius:e.radii.$md,borderWidth:e.borderWidths.$normal,borderStyle:e.borderStyles.$dashed,borderColor:e.colors.$borderAlpha200,backgroundColor:e.colors.$neutralAlpha50,":hover":{backgroundColor:e.colors.$neutralAlpha50,svg:{transform:"scale(1.2)"}}})})})}),(0,r.Y)(s.l.ControlRow,{elementId:y.id,children:(0,r.Y)(s.l.PlainInput,{...y.props,onChange:e=>{y.setValue(e.target.value),U((0,p.e)(e.target.value))},isRequired:!0,autoFocus:!0,ignorePasswordManager:!0})}),G&&(0,r.Y)(s.l.ControlRow,{elementId:I.id,children:(0,r.Y)(s.l.PlainInput,{...I.props,onChange:e=>{U(e.target.value)},isRequired:!0,pattern:"^(?=.*[a-z0-9])[a-z0-9\\-]+$",ignorePasswordManager:!0})}),(0,r.FD)(d.c,{sx:e=>({marginTop:e.space.$none}),children:[(0,r.Y)(s.l.SubmitButton,{block:!1,isDisabled:!D,localizationKey:(0,C.G)("createOrganization.formButtonSubmit")}),e.onCancel&&(0,r.Y)(s.l.ResetButton,{localizationKey:(0,C.G)("userProfile.formButtonReset"),block:!1,onClick:e.onCancel})]})]})}),(0,r.Y)(c.M,{headerTitle:(0,C.G)("organizationProfile.invitePage.title"),headerTitleTextVariant:"h2",headerSubtitleTextVariant:V,sx:e=>({minHeight:e.sizes.$60,textAlign:"left"}),children:R&&(0,r.Y)(Y.B,{resetButtonLabel:(0,C.G)("createOrganization.invitePage.formButtonReset"),onSuccess:a.nextStep,onReset:B})}),(0,r.FD)(v.fv,{children:[(0,r.Y)(u.Y.Root,{children:(0,r.Y)(u.Y.Title,{localizationKey:(0,C.G)("organizationProfile.invitePage.title"),sx:{textAlign:"left"}})}),(0,r.Y)(h.B,{contents:(0,r.Y)($.k,{}),sx:e=>({minHeight:e.sizes.$60}),onFinish:B})]})]})})},4472:function(e,t,a){a.r(t),a.d(t,{CreateOrganization:()=>z,CreateOrganizationModal:()=>v});var r=a(4518),i=a(3269),n=a(3264),o=a(1),l=a(4607),s=a(7831),d=a(2265),c=a(8909),u=a(6088),g=a(2861),h=a(180),p=a(9302);let m=(0,i.dm)(()=>{let{closeCreateOrganization:e}=(0,c.ho)(),{mode:t,navigateAfterCreateOrganization:a,skipInvitationScreen:n}=(0,o.W)(),l=(0,i.f0)(),{showDevModeNotice:s}=(0,h.Q)();return(0,r.FD)(u.Z.Root,{sx:e=>({width:e.sizes.$108}),children:[(0,r.FD)(u.Z.Content,{sx:e=>({padding:`${e.space.$4} ${e.space.$5} ${s?e.space.$12:e.space.$6}`}),children:[(0,r.Y)(u.Z.Alert,{children:l.error}),(0,r.Y)(p.A,{skipInvitationScreen:n,startPage:{headerTitle:(0,g.G)("createOrganization.title")},navigateAfterCreateOrganization:a,flow:"default",onComplete:()=>{"modal"===t&&e()}})]}),(0,r.Y)(u.Z.Footer,{})]})}),f=(0,n.G)(()=>(0,r.Y)(m,{})),z=(0,i.dm)(()=>(0,r.Y)(l.n.Root,{flow:"createOrganization",children:(0,r.Y)(l.n.Part,{children:(0,r.Y)(s.d,{children:(0,r.Y)(d.q,{children:(0,r.Y)(f,{})})})})})),v=e=>{let t={...e,routing:"virtual",componentName:"CreateOrganization",mode:"modal"};return(0,r.Y)(d.q,{path:"createOrganization",children:(0,r.Y)(o.$.Provider,{value:t,children:(0,r.Y)("div",{children:(0,r.Y)(z,{})})})})}},1:function(e,t,a){a.d(t,{$:()=>l,W:()=>s});var r=a(5074),i=a(7697),n=a(4964),o=a(2117);let l=(0,r.createContext)(null),s=()=>{let e=(0,r.useContext)(l),{navigate:t}=(0,n.r)(),{displayConfig:a}=(0,i.O)();if(!e||"CreateOrganization"!==e.componentName)throw Error("Clerk: useCreateOrganizationContext called outside CreateOrganization.");let{componentName:s,...d}=e;return{...d,skipInvitationScreen:d.skipInvitationScreen||!1,navigateAfterCreateOrganization:e=>"function"==typeof d.afterCreateOrganizationUrl?t(d.afterCreateOrganizationUrl(e)):d.afterCreateOrganizationUrl?t((0,o.tR)({urlWithParam:d.afterCreateOrganizationUrl,entity:e})):t(a.afterCreateOrganizationUrl),componentName:s}}}}]);

package/dist/customizables/parseAppearance.d.ts

@@ -2,7 +2,7 @@ import { Appearance } from "../internal/appearance.js";
 
 //#region src/customizables/parseAppearance.d.ts
 
-type PublicAppearanceTopLevelKey = keyof Omit<Appearance, 'baseTheme' | 'theme' | 'elements' | 'layout' | 'variables' | 'captcha' | 'cssLayerName'>;
+type PublicAppearanceTopLevelKey = keyof Omit<Appearance, 'theme' | 'elements' | 'layout' | 'variables' | 'captcha' | 'cssLayerName'>;
 type AppearanceCascade = {
   globalAppearance?: Appearance;
   appearance?: Appearance;

package/dist/customizables/parseAppearance.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"parseAppearance.d.ts","names":[],"sources":["../../src/customizables/parseAppearance.ts"],"sourcesContent":[],"mappings":";;;;KAsBK,2BAAA,GAOU,MAP0B,IAO1B,CANb,UAMa,EAAA,WAAA,GAAA,OAAA,GAAA,UAAA,GAAA,QAAA,GAAA,WAAA,GAAA,SAAA,GAAA,cAAA,CAAA;AACE,KAHL,iBAAA,GAGK;EAA2B,gBAAA,CAAA,EAFvB,UAEuB;eAD7B;iBACE"}
+{"version":3,"file":"parseAppearance.d.ts","names":[],"sources":["../../src/customizables/parseAppearance.ts"],"sourcesContent":[],"mappings":";;;;KAsBK,2BAAA,GAOU,MAP0B,IAO1B,CANb,UAMa,EAAA,OAAA,GAAA,UAAA,GAAA,QAAA,GAAA,WAAA,GAAA,SAAA,GAAA,cAAA,CAAA;AACE,KAHL,iBAAA,GAGK;EAA2B,gBAAA,CAAA,EAFvB,UAEuB;eAD7B;iBACE"}

package/dist/customizables/parseAppearance.js

@@ -11,7 +11,7 @@ const defaultLayout = {
 	socialButtonsVariant: "auto",
 	logoImageUrl: "",
 	logoLinkUrl: "",
-	showOptionalFields: true,
+	showOptionalFields: false,
 	helpPageUrl: "",
 	privacyPageUrl: "",
 	termsPageUrl: "",
@@ -59,10 +59,10 @@ const parseAppearance = (cascade) => {
 };
 const expand = (theme, cascade) => {
 	if (!theme) return;
-	const themeProperty = theme.theme !== void 0 ? theme.theme : theme.baseTheme;
-	if (themeProperty !== void 0) (Array.isArray(themeProperty) ? themeProperty : [themeProperty]).forEach((baseTheme$1) => {
-		if (typeof baseTheme$1 === "string") expand(getBaseTheme(baseTheme$1), cascade);
-		else expand(baseTheme$1, cascade);
+	const themeProperty = theme.theme;
+	if (themeProperty !== void 0) (Array.isArray(themeProperty) ? themeProperty : [themeProperty]).forEach((t) => {
+		if (typeof t === "string") expand(getBaseTheme(t), cascade);
+		else expand(t, cascade);
 	});
 	cascade.push(theme);
 };

package/dist/customizables/parseAppearance.js.map

@@ -1 +1 @@
-{"version":3,"file":"parseAppearance.js","names":["defaultLayout: ParsedLayout","defaultCaptchaOptions: ParsedCaptcha","appearanceList: Appearance[]","baseTheme"],"sources":["../../src/customizables/parseAppearance.ts"],"sourcesContent":["import type { DeepPartial } from '@clerk/shared/types';\nimport { fastDeepMergeAndReplace } from '@clerk/shared/utils';\n\nimport { baseTheme, getBaseTheme } from '../baseTheme';\nimport { createInternalTheme, defaultInternalTheme } from '../foundations';\nimport type { Appearance, CaptchaAppearanceOptions, Elements, Layout, Theme } from '../internal/appearance';\nimport type { InternalTheme } from '../styledSystem';\nimport {\n  createColorScales,\n  createFonts,\n  createFontSizeScale,\n  createFontWeightScale,\n  createRadiiUnits,\n  createShadowsUnits,\n  createSpaceScale,\n} from './parseVariables';\n\nexport type ParsedElements = Elements[];\nexport type ParsedInternalTheme = InternalTheme;\nexport type ParsedLayout = Required<Layout>;\nexport type ParsedCaptcha = Required<CaptchaAppearanceOptions>;\n\ntype PublicAppearanceTopLevelKey = keyof Omit<\n  Appearance,\n  'baseTheme' | 'theme' | 'elements' | 'layout' | 'variables' | 'captcha' | 'cssLayerName'\n>;\n\nexport type AppearanceCascade = {\n  globalAppearance?: Appearance;\n  appearance?: Appearance;\n  appearanceKey: PublicAppearanceTopLevelKey | 'impersonationFab' | 'enableOrganizationsPrompt';\n};\n\nexport type ParsedAppearance = {\n  parsedElements: ParsedElements;\n  parsedInternalTheme: ParsedInternalTheme;\n  parsedLayout: ParsedLayout;\n  parsedCaptcha: ParsedCaptcha;\n};\n\nconst defaultLayout: ParsedLayout = {\n  logoPlacement: 'inside',\n  socialButtonsPlacement: 'top',\n  socialButtonsVariant: 'auto',\n  logoImageUrl: '',\n  logoLinkUrl: '',\n  showOptionalFields: true,\n  helpPageUrl: '',\n  privacyPageUrl: '',\n  termsPageUrl: '',\n  shimmer: true,\n  animations: true,\n  unsafe_disableDevelopmentModeWarnings: false,\n};\n\nconst defaultCaptchaOptions: ParsedCaptcha = {\n  theme: 'auto',\n  size: 'normal',\n  language: '',\n};\n\n/**\n * Parses the public appearance object.\n * It splits the resulting styles into 2 objects: parsedElements, parsedInternalTheme\n * parsedElements is used by the makeCustomizables HOC to handle per-element styling\n * parsedInternalTheme is used by FlowCard/InternalThemeProvider for generic theming\n * Both are injected by the AppearanceContext\n */\nexport const parseAppearance = (cascade: AppearanceCascade): ParsedAppearance => {\n  const { globalAppearance, appearance: componentAppearance, appearanceKey } = cascade;\n\n  const appearanceList: Appearance[] = [];\n  [globalAppearance, globalAppearance?.[appearanceKey as PublicAppearanceTopLevelKey], componentAppearance].forEach(a =>\n    expand(a, appearanceList),\n  );\n\n  const parsedInternalTheme = parseVariables(appearanceList);\n  const parsedLayout = parseLayout(appearanceList);\n  const parsedCaptcha = parseCaptcha(appearanceList);\n\n  if (\n    !appearanceList.find(a => {\n      //@ts-expect-error not public api\n      return !!a.simpleStyles;\n    })\n  ) {\n    appearanceList.unshift(baseTheme);\n  }\n\n  const parsedElements = parseElements(\n    appearanceList.map(appearance => {\n      if (!appearance.elements || typeof appearance.elements !== 'function') {\n        return appearance;\n      }\n      const res = { ...appearance };\n      res.elements = appearance.elements({ theme: parsedInternalTheme });\n      return res;\n    }),\n  );\n  return { parsedElements, parsedInternalTheme, parsedLayout, parsedCaptcha };\n};\n\nconst expand = (theme: Theme | undefined, cascade: any[]) => {\n  if (!theme) {\n    return;\n  }\n\n  // Use new 'theme' property if available, otherwise fall back to deprecated 'baseTheme'\n  const themeProperty = theme.theme !== undefined ? theme.theme : theme.baseTheme;\n\n  if (themeProperty !== undefined) {\n    (Array.isArray(themeProperty) ? themeProperty : [themeProperty]).forEach(baseTheme => {\n      if (typeof baseTheme === 'string') {\n        expand(getBaseTheme(baseTheme), cascade);\n      } else {\n        expand(baseTheme as Theme, cascade);\n      }\n    });\n  }\n\n  cascade.push(theme);\n};\n\nconst parseElements = (appearances: Appearance[]) => {\n  return appearances.map(appearance => ({ ...appearance?.elements }));\n};\n\nconst parseLayout = (appearanceList: Appearance[]) => {\n  return { ...defaultLayout, ...appearanceList.reduce((acc, appearance) => ({ ...acc, ...appearance.layout }), {}) };\n};\n\nconst parseCaptcha = (appearanceList: Appearance[]) => {\n  return {\n    ...defaultCaptchaOptions,\n    ...appearanceList.reduce((acc, appearance) => {\n      if (appearance.captcha) {\n        const { theme: captchaTheme, size, language } = appearance.captcha;\n        return {\n          ...acc,\n          ...(captchaTheme && { theme: captchaTheme }),\n          ...(size && { size }),\n          ...(language && { language }),\n        };\n      }\n      return acc;\n    }, {} as Partial<CaptchaAppearanceOptions>),\n  };\n};\n\nconst parseVariables = (appearances: Appearance[]) => {\n  const res = {} as DeepPartial<InternalTheme>;\n  fastDeepMergeAndReplace({ ...defaultInternalTheme }, res);\n  appearances.forEach(appearance => {\n    fastDeepMergeAndReplace(createInternalThemeFromVariables(appearance), res);\n  });\n  return res as ParsedInternalTheme;\n};\n\nconst createInternalThemeFromVariables = (theme: Theme | undefined): DeepPartial<InternalTheme> => {\n  if (!theme) {\n    return {};\n  }\n  const colors = { ...createColorScales(theme) };\n  const radii = { ...createRadiiUnits(theme) };\n  const space = { ...createSpaceScale(theme) };\n  const fontSizes = { ...createFontSizeScale(theme) };\n  const fontWeights = { ...createFontWeightScale(theme) };\n  const fonts = { ...createFonts(theme) };\n  const shadows = { ...createShadowsUnits(theme) };\n  return createInternalTheme({ colors, radii, space, fontSizes, fontWeights, fonts, shadows } as any);\n};\n"],"mappings":"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"}
+{"version":3,"file":"parseAppearance.js","names":["defaultLayout: ParsedLayout","defaultCaptchaOptions: ParsedCaptcha","appearanceList: Appearance[]"],"sources":["../../src/customizables/parseAppearance.ts"],"sourcesContent":["import type { DeepPartial } from '@clerk/shared/types';\nimport { fastDeepMergeAndReplace } from '@clerk/shared/utils';\n\nimport { baseTheme, getBaseTheme } from '../baseTheme';\nimport { createInternalTheme, defaultInternalTheme } from '../foundations';\nimport type { Appearance, CaptchaAppearanceOptions, Elements, Layout, Theme } from '../internal/appearance';\nimport type { InternalTheme } from '../styledSystem';\nimport {\n  createColorScales,\n  createFonts,\n  createFontSizeScale,\n  createFontWeightScale,\n  createRadiiUnits,\n  createShadowsUnits,\n  createSpaceScale,\n} from './parseVariables';\n\nexport type ParsedElements = Elements[];\nexport type ParsedInternalTheme = InternalTheme;\nexport type ParsedLayout = Required<Layout>;\nexport type ParsedCaptcha = Required<CaptchaAppearanceOptions>;\n\ntype PublicAppearanceTopLevelKey = keyof Omit<\n  Appearance,\n  'theme' | 'elements' | 'layout' | 'variables' | 'captcha' | 'cssLayerName'\n>;\n\nexport type AppearanceCascade = {\n  globalAppearance?: Appearance;\n  appearance?: Appearance;\n  appearanceKey: PublicAppearanceTopLevelKey | 'impersonationFab' | 'enableOrganizationsPrompt';\n};\n\nexport type ParsedAppearance = {\n  parsedElements: ParsedElements;\n  parsedInternalTheme: ParsedInternalTheme;\n  parsedLayout: ParsedLayout;\n  parsedCaptcha: ParsedCaptcha;\n};\n\nconst defaultLayout: ParsedLayout = {\n  logoPlacement: 'inside',\n  socialButtonsPlacement: 'top',\n  socialButtonsVariant: 'auto',\n  logoImageUrl: '',\n  logoLinkUrl: '',\n  showOptionalFields: false,\n  helpPageUrl: '',\n  privacyPageUrl: '',\n  termsPageUrl: '',\n  shimmer: true,\n  animations: true,\n  unsafe_disableDevelopmentModeWarnings: false,\n};\n\nconst defaultCaptchaOptions: ParsedCaptcha = {\n  theme: 'auto',\n  size: 'normal',\n  language: '',\n};\n\n/**\n * Parses the public appearance object.\n * It splits the resulting styles into 2 objects: parsedElements, parsedInternalTheme\n * parsedElements is used by the makeCustomizables HOC to handle per-element styling\n * parsedInternalTheme is used by FlowCard/InternalThemeProvider for generic theming\n * Both are injected by the AppearanceContext\n */\nexport const parseAppearance = (cascade: AppearanceCascade): ParsedAppearance => {\n  const { globalAppearance, appearance: componentAppearance, appearanceKey } = cascade;\n\n  const appearanceList: Appearance[] = [];\n  [globalAppearance, globalAppearance?.[appearanceKey as PublicAppearanceTopLevelKey], componentAppearance].forEach(a =>\n    expand(a, appearanceList),\n  );\n\n  const parsedInternalTheme = parseVariables(appearanceList);\n  const parsedLayout = parseLayout(appearanceList);\n  const parsedCaptcha = parseCaptcha(appearanceList);\n\n  if (\n    !appearanceList.find(a => {\n      //@ts-expect-error not public api\n      return !!a.simpleStyles;\n    })\n  ) {\n    appearanceList.unshift(baseTheme);\n  }\n\n  const parsedElements = parseElements(\n    appearanceList.map(appearance => {\n      if (!appearance.elements || typeof appearance.elements !== 'function') {\n        return appearance;\n      }\n      const res = { ...appearance };\n      res.elements = appearance.elements({ theme: parsedInternalTheme });\n      return res;\n    }),\n  );\n  return { parsedElements, parsedInternalTheme, parsedLayout, parsedCaptcha };\n};\n\nconst expand = (theme: Theme | undefined, cascade: any[]) => {\n  if (!theme) {\n    return;\n  }\n\n  const themeProperty = theme.theme;\n\n  if (themeProperty !== undefined) {\n    (Array.isArray(themeProperty) ? themeProperty : [themeProperty]).forEach(t => {\n      if (typeof t === 'string') {\n        expand(getBaseTheme(t), cascade);\n      } else {\n        expand(t as Theme, cascade);\n      }\n    });\n  }\n\n  cascade.push(theme);\n};\n\nconst parseElements = (appearances: Appearance[]) => {\n  return appearances.map(appearance => ({ ...appearance?.elements }));\n};\n\nconst parseLayout = (appearanceList: Appearance[]) => {\n  return { ...defaultLayout, ...appearanceList.reduce((acc, appearance) => ({ ...acc, ...appearance.layout }), {}) };\n};\n\nconst parseCaptcha = (appearanceList: Appearance[]) => {\n  return {\n    ...defaultCaptchaOptions,\n    ...appearanceList.reduce((acc, appearance) => {\n      if (appearance.captcha) {\n        const { theme: captchaTheme, size, language } = appearance.captcha;\n        return {\n          ...acc,\n          ...(captchaTheme && { theme: captchaTheme }),\n          ...(size && { size }),\n          ...(language && { language }),\n        };\n      }\n      return acc;\n    }, {} as Partial<CaptchaAppearanceOptions>),\n  };\n};\n\nconst parseVariables = (appearances: Appearance[]) => {\n  const res = {} as DeepPartial<InternalTheme>;\n  fastDeepMergeAndReplace({ ...defaultInternalTheme }, res);\n  appearances.forEach(appearance => {\n    fastDeepMergeAndReplace(createInternalThemeFromVariables(appearance), res);\n  });\n  return res as ParsedInternalTheme;\n};\n\nconst createInternalThemeFromVariables = (theme: Theme | undefined): DeepPartial<InternalTheme> => {\n  if (!theme) {\n    return {};\n  }\n  const colors = { ...createColorScales(theme) };\n  const radii = { ...createRadiiUnits(theme) };\n  const space = { ...createSpaceScale(theme) };\n  const fontSizes = { ...createFontSizeScale(theme) };\n  const fontWeights = { ...createFontWeightScale(theme) };\n  const fonts = { ...createFonts(theme) };\n  const shadows = { ...createShadowsUnits(theme) };\n  return createInternalTheme({ colors, radii, space, fontSizes, fontWeights, fonts, shadows } as any);\n};\n"],"mappings":"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"}

package/dist/customizables/parseVariables.js

@@ -11,9 +11,7 @@ import { removeUndefinedProps } from "../utils/removeUndefinedProps.js";
 //#region src/customizables/parseVariables.ts
 const createMutedForegroundColor = (variables) => {
 	if (variables.colorMutedForeground) return colors.toHslaString(variables.colorMutedForeground);
-	if (variables.colorTextSecondary) return colors.toHslaString(variables.colorTextSecondary);
-	if (variables.colorForeground) return colors.makeTransparent(variables.colorForeground, .35);
-	return colors.makeTransparent(variables.colorText, .35);
+	return colors.makeTransparent(variables.colorForeground, .35);
 };
 const createColorScales = (theme) => {
 	const variables = removeInvalidValues(theme.variables || {});
@@ -39,17 +37,17 @@ const createColorScales = (theme) => {
 		...warningAlphaScale,
 		...borderAlphaScale,
 		primaryHover: colors.adjustForLightness(primaryScale?.primary500),
-		colorPrimaryForeground: variables.colorPrimaryForeground ? colors.toHslaString(variables.colorPrimaryForeground) : variables.colorTextOnPrimaryBackground ? colors.toHslaString(variables.colorTextOnPrimaryBackground) : void 0,
-		colorForeground: variables.colorForeground ? colors.toHslaString(variables.colorForeground) : colors.toHslaString(variables.colorText),
+		colorPrimaryForeground: variables.colorPrimaryForeground ? colors.toHslaString(variables.colorPrimaryForeground) : void 0,
+		colorForeground: colors.toHslaString(variables.colorForeground),
 		colorMutedForeground: createMutedForegroundColor(variables),
-		colorInputForeground: variables.colorInputForeground ? colors.toHslaString(variables.colorInputForeground) : colors.toHslaString(variables.colorInputText),
+		colorInputForeground: colors.toHslaString(variables.colorInputForeground),
 		colorBackground: colors.toHslaString(variables.colorBackground),
-		colorInput: variables.colorInput ? colors.toHslaString(variables.colorInput) : colors.toHslaString(variables.colorInputBackground),
+		colorInput: colors.toHslaString(variables.colorInput),
 		colorShimmer: colors.toHslaString(variables.colorShimmer),
 		colorMuted: variables.colorMuted ? colors.toHslaString(variables.colorMuted) : void 0,
-		colorRing: variables.colorRing ? colors.makeTransparent(colors.toHslaString(variables.colorRing), .85) : void 0,
+		colorRing: variables.colorRing ? colors.toHslaString(variables.colorRing) : void 0,
 		colorShadow: variables.colorShadow ? colors.toHslaString(variables.colorShadow) : void 0,
-		colorModalBackdrop: variables.colorModalBackdrop ? colors.makeTransparent(colors.toHslaString(variables.colorModalBackdrop), .27) : void 0,
+		colorModalBackdrop: variables.colorModalBackdrop ? colors.toHslaString(variables.colorModalBackdrop) : void 0,
 		avatarBackground: neutralAlphaScale?.neutralAlpha400 ? colors.toHslaString(neutralAlphaScale.neutralAlpha400) : void 0,
 		avatarBorder: neutralAlphaScale?.neutralAlpha200 ? colors.toHslaString(neutralAlphaScale.neutralAlpha200) : void 0
 	});
@@ -83,11 +81,10 @@ const createRadiiUnits = (theme) => {
 	};
 };
 const createSpaceScale = (theme) => {
-	const { spacing, spacingUnit } = theme.variables || {};
-	const spacingValue = spacing ?? spacingUnit;
-	if (spacingValue === void 0) return;
+	const { spacing } = theme.variables || {};
+	if (spacing === void 0) return;
 	return fromEntries(spaceScaleKeys.map((k) => {
-		return [k, `calc(${spacingValue} * ${Number.parseFloat(k.replace("x", ".")) / .5 * .125})`];
+		return [k, `calc(${spacing} * ${Number.parseFloat(k.replace("x", ".")) / .5 * .125})`];
 	}));
 };
 const createFontSizeScale = (theme) => {

package/dist/customizables/parseVariables.js.map

@@ -1 +1 @@
-{"version":3,"file":"parseVariables.js","names":["key","value"],"sources":["../../src/customizables/parseVariables.ts"],"sourcesContent":["import { createShadowSet, generateShadow } from '../foundations/shadows';\nimport { BORDER_RADIUS_SCALE_RATIOS, spaceScaleKeys } from '../foundations/sizes';\nimport { FONT_SIZE_SCALE_RATIOS, type FontSizeKey, type fontWeights } from '../foundations/typography';\nimport type { Theme } from '../internal/appearance';\nimport { colors } from '../utils/colors';\nimport { colorOptionToThemedAlphaScale, colorOptionToThemedLightnessScale } from '../utils/colors/scales';\nimport { createAlphaColorMixString } from '../utils/colors/utils';\nimport { cssSupports } from '../utils/cssSupports';\nimport { fromEntries } from '../utils/fromEntries';\nimport { removeUndefinedProps } from '../utils/removeUndefinedProps';\n\nconst createMutedForegroundColor = (variables: NonNullable<Theme['variables']>) => {\n  if (variables.colorMutedForeground) {\n    return colors.toHslaString(variables.colorMutedForeground);\n  }\n\n  if (variables.colorTextSecondary) {\n    return colors.toHslaString(variables.colorTextSecondary);\n  }\n\n  if (variables.colorForeground) {\n    return colors.makeTransparent(variables.colorForeground, 0.35);\n  }\n\n  return colors.makeTransparent(variables.colorText, 0.35);\n};\n\nexport const createColorScales = (theme: Theme) => {\n  const variables = removeInvalidValues(theme.variables || {});\n\n  const dangerScale = colorOptionToThemedLightnessScale(variables.colorDanger, 'danger');\n  const primaryScale = colorOptionToThemedLightnessScale(variables.colorPrimary, 'primary');\n  const successScale = colorOptionToThemedLightnessScale(variables.colorSuccess, 'success');\n  const warningScale = colorOptionToThemedLightnessScale(variables.colorWarning, 'warning');\n\n  const dangerAlphaScale = colorOptionToThemedAlphaScale(dangerScale?.danger500, 'dangerAlpha');\n  const neutralAlphaScale = colorOptionToThemedAlphaScale(variables.colorNeutral, 'neutralAlpha');\n  const primaryAlphaScale = colorOptionToThemedAlphaScale(primaryScale?.primary500, 'primaryAlpha');\n  const successAlphaScale = colorOptionToThemedAlphaScale(successScale?.success500, 'successAlpha');\n  const warningAlphaScale = colorOptionToThemedAlphaScale(warningScale?.warning500, 'warningAlpha');\n  const borderAlphaScale = colorOptionToThemedAlphaScale(\n    variables.colorBorder || variables.colorNeutral,\n    'borderAlpha',\n  );\n\n  return removeUndefinedProps({\n    ...dangerScale,\n    ...primaryScale,\n    ...successScale,\n    ...warningScale,\n    ...dangerAlphaScale,\n    ...neutralAlphaScale,\n    ...primaryAlphaScale,\n    ...successAlphaScale,\n    ...warningAlphaScale,\n    ...borderAlphaScale,\n    primaryHover: colors.adjustForLightness(primaryScale?.primary500),\n    colorPrimaryForeground: variables.colorPrimaryForeground\n      ? colors.toHslaString(variables.colorPrimaryForeground)\n      : variables.colorTextOnPrimaryBackground\n        ? colors.toHslaString(variables.colorTextOnPrimaryBackground)\n        : undefined,\n    colorForeground: variables.colorForeground\n      ? colors.toHslaString(variables.colorForeground)\n      : colors.toHslaString(variables.colorText),\n    colorMutedForeground: createMutedForegroundColor(variables),\n    colorInputForeground: variables.colorInputForeground\n      ? colors.toHslaString(variables.colorInputForeground)\n      : colors.toHslaString(variables.colorInputText),\n    colorBackground: colors.toHslaString(variables.colorBackground),\n    colorInput: variables.colorInput\n      ? colors.toHslaString(variables.colorInput)\n      : colors.toHslaString(variables.colorInputBackground),\n    colorShimmer: colors.toHslaString(variables.colorShimmer),\n    colorMuted: variables.colorMuted ? colors.toHslaString(variables.colorMuted) : undefined,\n    colorRing: variables.colorRing ? colors.makeTransparent(colors.toHslaString(variables.colorRing), 0.85) : undefined,\n    colorShadow: variables.colorShadow ? colors.toHslaString(variables.colorShadow) : undefined,\n    colorModalBackdrop: variables.colorModalBackdrop\n      ? colors.makeTransparent(colors.toHslaString(variables.colorModalBackdrop), 0.27)\n      : undefined,\n    avatarBackground: neutralAlphaScale?.neutralAlpha400\n      ? colors.toHslaString(neutralAlphaScale.neutralAlpha400)\n      : undefined,\n    avatarBorder: neutralAlphaScale?.neutralAlpha200\n      ? colors.toHslaString(neutralAlphaScale.neutralAlpha200)\n      : undefined,\n  });\n};\n\nexport const removeInvalidValues = (variables: NonNullable<Theme['variables']>): NonNullable<Theme['variables']> => {\n  // Check for modern color support. If present, we can simply return the variables as-is since we support everything\n  // CSS supports.\n  if (cssSupports.modernColor()) {\n    return variables;\n  }\n\n  // If not, we need to remove any values that are specified with CSS variables, as our color scale generation only\n  // supports CSS variables using modern CSS functionality.\n  const validVariables: Theme['variables'] = Object.fromEntries(\n    Object.entries(variables).filter(([key, value]) => {\n      if (typeof value === 'string') {\n        const isValid = !value.startsWith('var(');\n        if (!isValid) {\n          console.warn(\n            `Invalid color value: ${value} for key: ${key}, using default value instead. Using CSS variables is not supported in this browser.`,\n          );\n        }\n        return isValid;\n      }\n\n      if (typeof value === 'object') {\n        return Object.entries(value).every(([key, value]) => {\n          if (typeof value !== 'string') {\n            return true;\n          }\n\n          const isValid = !value.startsWith('var(');\n          if (!isValid) {\n            console.warn(\n              `Invalid color value: ${value} for key: ${key}, using default value instead. Using CSS variables is not supported in this browser.`,\n            );\n          }\n\n          return isValid;\n        });\n      }\n\n      return false;\n    }),\n  );\n\n  return validVariables;\n};\n\nexport const createRadiiUnits = (theme: Theme) => {\n  const { borderRadius } = theme.variables || {};\n  if (borderRadius === undefined) {\n    return;\n  }\n\n  const md = borderRadius === 'none' ? '0' : borderRadius;\n  return {\n    sm: `calc(${md} * ${BORDER_RADIUS_SCALE_RATIOS.sm})`,\n    md,\n    lg: `calc(${md} * ${BORDER_RADIUS_SCALE_RATIOS.lg})`,\n    xl: `calc(${md} * ${BORDER_RADIUS_SCALE_RATIOS.xl})`,\n  };\n};\n\nexport const createSpaceScale = (theme: Theme) => {\n  const { spacing, spacingUnit } = theme.variables || {};\n  const spacingValue = spacing ?? spacingUnit;\n  if (spacingValue === undefined) {\n    return;\n  }\n  return fromEntries(\n    spaceScaleKeys.map(k => {\n      const num = Number.parseFloat(k.replace('x', '.'));\n      const percentage = (num / 0.5) * 0.125;\n      return [k, `calc(${spacingValue} * ${percentage})`];\n    }),\n  );\n};\n\n// We want to keep the same ratio between the font sizes we have for the default theme\n// This is directly related to the fontSizes object in the theme default foundations\n// ref: src/ui/foundations/typography.ts\nexport const createFontSizeScale = (theme: Theme): Partial<Record<FontSizeKey, string>> | undefined => {\n  const { fontSize } = theme.variables || {};\n  if (fontSize === undefined) {\n    return;\n  }\n\n  if (typeof fontSize === 'object') {\n    // When fontSize is an object, filter out undefined values and return only defined properties\n    return removeUndefinedProps(\n      Object.fromEntries(\n        Object.entries(FONT_SIZE_SCALE_RATIOS).map(([key, _ratio]) => [key, fontSize[key as FontSizeKey] ?? undefined]),\n      ) as Record<FontSizeKey, string | undefined>,\n    );\n  }\n\n  // When fontSize is a string, calculate all sizes based on the base value and fractions for precision\n  // Using fractions instead of decimal ratios to avoid floating-point precision issues\n  return Object.fromEntries(\n    Object.entries(FONT_SIZE_SCALE_RATIOS).map(([key, fraction]) => [\n      key,\n      fraction === '1' ? fontSize : `calc(${fontSize} * ${fraction})`,\n    ]),\n  ) as Record<FontSizeKey, string>;\n};\n\nexport const createFontWeightScale = (theme: Theme): Partial<Record<keyof typeof fontWeights, string | number>> => {\n  const { fontWeight } = theme.variables || {};\n  return removeUndefinedProps({ ...fontWeight });\n};\n\nexport const createFonts = (theme: Theme) => {\n  const { fontFamily, fontFamilyButtons } = theme.variables || {};\n  return removeUndefinedProps({ main: fontFamily, buttons: fontFamilyButtons });\n};\n\nexport const createShadowsUnits = (theme: Theme) => {\n  const { colorShadow } = theme.variables || {};\n  if (!colorShadow) {\n    return;\n  }\n\n  const shadowColor = colors.toHslaString(colorShadow);\n  if (!shadowColor) {\n    return;\n  }\n\n  return createShadowSet(\n    shadowColor,\n    generateShadow((color, alpha) => createAlphaColorMixString(color, alpha * 100)),\n  );\n};\n"],"mappings":"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"}
+{"version":3,"file":"parseVariables.js","names":["key","value"],"sources":["../../src/customizables/parseVariables.ts"],"sourcesContent":["import { createShadowSet, generateShadow } from '../foundations/shadows';\nimport { BORDER_RADIUS_SCALE_RATIOS, spaceScaleKeys } from '../foundations/sizes';\nimport { FONT_SIZE_SCALE_RATIOS, type FontSizeKey, type fontWeights } from '../foundations/typography';\nimport type { Theme } from '../internal/appearance';\nimport { colors } from '../utils/colors';\nimport { colorOptionToThemedAlphaScale, colorOptionToThemedLightnessScale } from '../utils/colors/scales';\nimport { createAlphaColorMixString } from '../utils/colors/utils';\nimport { cssSupports } from '../utils/cssSupports';\nimport { fromEntries } from '../utils/fromEntries';\nimport { removeUndefinedProps } from '../utils/removeUndefinedProps';\n\nconst createMutedForegroundColor = (variables: NonNullable<Theme['variables']>) => {\n  if (variables.colorMutedForeground) {\n    return colors.toHslaString(variables.colorMutedForeground);\n  }\n\n  return colors.makeTransparent(variables.colorForeground, 0.35);\n};\n\nexport const createColorScales = (theme: Theme) => {\n  const variables = removeInvalidValues(theme.variables || {});\n\n  const dangerScale = colorOptionToThemedLightnessScale(variables.colorDanger, 'danger');\n  const primaryScale = colorOptionToThemedLightnessScale(variables.colorPrimary, 'primary');\n  const successScale = colorOptionToThemedLightnessScale(variables.colorSuccess, 'success');\n  const warningScale = colorOptionToThemedLightnessScale(variables.colorWarning, 'warning');\n\n  const dangerAlphaScale = colorOptionToThemedAlphaScale(dangerScale?.danger500, 'dangerAlpha');\n  const neutralAlphaScale = colorOptionToThemedAlphaScale(variables.colorNeutral, 'neutralAlpha');\n  const primaryAlphaScale = colorOptionToThemedAlphaScale(primaryScale?.primary500, 'primaryAlpha');\n  const successAlphaScale = colorOptionToThemedAlphaScale(successScale?.success500, 'successAlpha');\n  const warningAlphaScale = colorOptionToThemedAlphaScale(warningScale?.warning500, 'warningAlpha');\n  const borderAlphaScale = colorOptionToThemedAlphaScale(\n    variables.colorBorder || variables.colorNeutral,\n    'borderAlpha',\n  );\n\n  return removeUndefinedProps({\n    ...dangerScale,\n    ...primaryScale,\n    ...successScale,\n    ...warningScale,\n    ...dangerAlphaScale,\n    ...neutralAlphaScale,\n    ...primaryAlphaScale,\n    ...successAlphaScale,\n    ...warningAlphaScale,\n    ...borderAlphaScale,\n    primaryHover: colors.adjustForLightness(primaryScale?.primary500),\n    colorPrimaryForeground: variables.colorPrimaryForeground\n      ? colors.toHslaString(variables.colorPrimaryForeground)\n      : undefined,\n    colorForeground: colors.toHslaString(variables.colorForeground),\n    colorMutedForeground: createMutedForegroundColor(variables),\n    colorInputForeground: colors.toHslaString(variables.colorInputForeground),\n    colorBackground: colors.toHslaString(variables.colorBackground),\n    colorInput: colors.toHslaString(variables.colorInput),\n    colorShimmer: colors.toHslaString(variables.colorShimmer),\n    colorMuted: variables.colorMuted ? colors.toHslaString(variables.colorMuted) : undefined,\n    colorRing: variables.colorRing ? colors.toHslaString(variables.colorRing) : undefined,\n    colorShadow: variables.colorShadow ? colors.toHslaString(variables.colorShadow) : undefined,\n    colorModalBackdrop: variables.colorModalBackdrop ? colors.toHslaString(variables.colorModalBackdrop) : undefined,\n    avatarBackground: neutralAlphaScale?.neutralAlpha400\n      ? colors.toHslaString(neutralAlphaScale.neutralAlpha400)\n      : undefined,\n    avatarBorder: neutralAlphaScale?.neutralAlpha200\n      ? colors.toHslaString(neutralAlphaScale.neutralAlpha200)\n      : undefined,\n  });\n};\n\nexport const removeInvalidValues = (variables: NonNullable<Theme['variables']>): NonNullable<Theme['variables']> => {\n  // Check for modern color support. If present, we can simply return the variables as-is since we support everything\n  // CSS supports.\n  if (cssSupports.modernColor()) {\n    return variables;\n  }\n\n  // If not, we need to remove any values that are specified with CSS variables, as our color scale generation only\n  // supports CSS variables using modern CSS functionality.\n  const validVariables: Theme['variables'] = Object.fromEntries(\n    Object.entries(variables).filter(([key, value]) => {\n      if (typeof value === 'string') {\n        const isValid = !value.startsWith('var(');\n        if (!isValid) {\n          console.warn(\n            `Invalid color value: ${value} for key: ${key}, using default value instead. Using CSS variables is not supported in this browser.`,\n          );\n        }\n        return isValid;\n      }\n\n      if (typeof value === 'object') {\n        return Object.entries(value).every(([key, value]) => {\n          if (typeof value !== 'string') {\n            return true;\n          }\n\n          const isValid = !value.startsWith('var(');\n          if (!isValid) {\n            console.warn(\n              `Invalid color value: ${value} for key: ${key}, using default value instead. Using CSS variables is not supported in this browser.`,\n            );\n          }\n\n          return isValid;\n        });\n      }\n\n      return false;\n    }),\n  );\n\n  return validVariables;\n};\n\nexport const createRadiiUnits = (theme: Theme) => {\n  const { borderRadius } = theme.variables || {};\n  if (borderRadius === undefined) {\n    return;\n  }\n\n  const md = borderRadius === 'none' ? '0' : borderRadius;\n  return {\n    sm: `calc(${md} * ${BORDER_RADIUS_SCALE_RATIOS.sm})`,\n    md,\n    lg: `calc(${md} * ${BORDER_RADIUS_SCALE_RATIOS.lg})`,\n    xl: `calc(${md} * ${BORDER_RADIUS_SCALE_RATIOS.xl})`,\n  };\n};\n\nexport const createSpaceScale = (theme: Theme) => {\n  const { spacing } = theme.variables || {};\n  if (spacing === undefined) {\n    return;\n  }\n  return fromEntries(\n    spaceScaleKeys.map(k => {\n      const num = Number.parseFloat(k.replace('x', '.'));\n      const percentage = (num / 0.5) * 0.125;\n      return [k, `calc(${spacing} * ${percentage})`];\n    }),\n  );\n};\n\n// We want to keep the same ratio between the font sizes we have for the default theme\n// This is directly related to the fontSizes object in the theme default foundations\n// ref: src/ui/foundations/typography.ts\nexport const createFontSizeScale = (theme: Theme): Partial<Record<FontSizeKey, string>> | undefined => {\n  const { fontSize } = theme.variables || {};\n  if (fontSize === undefined) {\n    return;\n  }\n\n  if (typeof fontSize === 'object') {\n    // When fontSize is an object, filter out undefined values and return only defined properties\n    return removeUndefinedProps(\n      Object.fromEntries(\n        Object.entries(FONT_SIZE_SCALE_RATIOS).map(([key, _ratio]) => [key, fontSize[key as FontSizeKey] ?? undefined]),\n      ) as Record<FontSizeKey, string | undefined>,\n    );\n  }\n\n  // When fontSize is a string, calculate all sizes based on the base value and fractions for precision\n  // Using fractions instead of decimal ratios to avoid floating-point precision issues\n  return Object.fromEntries(\n    Object.entries(FONT_SIZE_SCALE_RATIOS).map(([key, fraction]) => [\n      key,\n      fraction === '1' ? fontSize : `calc(${fontSize} * ${fraction})`,\n    ]),\n  ) as Record<FontSizeKey, string>;\n};\n\nexport const createFontWeightScale = (theme: Theme): Partial<Record<keyof typeof fontWeights, string | number>> => {\n  const { fontWeight } = theme.variables || {};\n  return removeUndefinedProps({ ...fontWeight });\n};\n\nexport const createFonts = (theme: Theme) => {\n  const { fontFamily, fontFamilyButtons } = theme.variables || {};\n  return removeUndefinedProps({ main: fontFamily, buttons: fontFamilyButtons });\n};\n\nexport const createShadowsUnits = (theme: Theme) => {\n  const { colorShadow } = theme.variables || {};\n  if (!colorShadow) {\n    return;\n  }\n\n  const shadowColor = colors.toHslaString(colorShadow);\n  if (!shadowColor) {\n    return;\n  }\n\n  return createShadowSet(\n    shadowColor,\n    generateShadow((color, alpha) => createAlphaColorMixString(color, alpha * 100)),\n  );\n};\n"],"mappings":"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"}

package/dist/elements/ClipboardInput.js

@@ -21,7 +21,6 @@ const ClipboardInput = (props) => {
 		}), /* @__PURE__ */ jsx(Button, {
 			elementDescriptor: descriptors.formFieldInputCopyToClipboardButton,
 			variant: "ghost",
-			tabIndex: -1,
 			onClick: onCopy,
 			sx: {
 				position: "absolute",

package/dist/elements/ClipboardInput.js.map

@@ -1 +1 @@
-{"version":3,"file":"ClipboardInput.js","names":["Clipboard","TickShield"],"sources":["../../src/elements/ClipboardInput.tsx"],"sourcesContent":["import type { ComponentType } from 'react';\n\nimport { Button, descriptors, Flex, Icon, Input } from '../customizables';\nimport { useClipboard } from '../hooks';\nimport { Clipboard, TickShield } from '../icons';\nimport type { PropsOfComponent } from '../styledSystem';\n\ntype ClipboardInputProps = PropsOfComponent<typeof Input> & {\n  copyIcon?: ComponentType;\n  copiedIcon?: ComponentType;\n};\n\nexport const ClipboardInput = (props: ClipboardInputProps) => {\n  const { id, value, copyIcon = Clipboard, copiedIcon = TickShield, sx, ...rest } = props;\n  const { onCopy, hasCopied } = useClipboard(value as string);\n\n  return (\n    <Flex\n      direction='col'\n      justify='center'\n      sx={[{ position: 'relative' }, sx]}\n    >\n      <Input\n        {...rest}\n        value={value}\n        isDisabled\n        sx={theme => ({ paddingRight: theme.space.$8 })}\n      />\n\n      <Button\n        elementDescriptor={descriptors.formFieldInputCopyToClipboardButton}\n        variant='ghost'\n        tabIndex={-1}\n        onClick={onCopy}\n        sx={{\n          position: 'absolute',\n          right: 0,\n        }}\n      >\n        <Icon\n          elementDescriptor={descriptors.formFieldInputCopyToClipboardIcon}\n          icon={hasCopied ? copiedIcon : copyIcon}\n          size='sm'\n        />\n      </Button>\n    </Flex>\n  );\n};\n"],"mappings":";;;;;;;;AAYA,MAAa,kBAAkB,UAA+B;CAC5D,MAAM,EAAE,IAAI,OAAO,WAAWA,mBAAW,aAAaC,qBAAY,GAAI,GAAG,SAAS;CAClF,MAAM,EAAE,QAAQ,cAAc,aAAa,MAAgB;AAE3D,QACE,qBAAC;EACC,WAAU;EACV,SAAQ;EACR,IAAI,CAAC,EAAE,UAAU,YAAY,EAAE,GAAG;aAElC,oBAAC;GACC,GAAI;GACG;GACP;GACA,KAAI,WAAU,EAAE,cAAc,MAAM,MAAM,IAAI;IAC9C,EAEF,oBAAC;GACC,mBAAmB,YAAY;GAC/B,SAAQ;GACR,UAAU;GACV,SAAS;GACT,IAAI;IACF,UAAU;IACV,OAAO;IACR;aAED,oBAAC;IACC,mBAAmB,YAAY;IAC/B,MAAM,YAAY,aAAa;IAC/B,MAAK;KACL;IACK;GACJ"}
+{"version":3,"file":"ClipboardInput.js","names":["Clipboard","TickShield"],"sources":["../../src/elements/ClipboardInput.tsx"],"sourcesContent":["import type { ComponentType } from 'react';\n\nimport { Button, descriptors, Flex, Icon, Input } from '../customizables';\nimport { useClipboard } from '../hooks';\nimport { Clipboard, TickShield } from '../icons';\nimport type { PropsOfComponent } from '../styledSystem';\n\ntype ClipboardInputProps = PropsOfComponent<typeof Input> & {\n  copyIcon?: ComponentType;\n  copiedIcon?: ComponentType;\n};\n\nexport const ClipboardInput = (props: ClipboardInputProps) => {\n  const { id, value, copyIcon = Clipboard, copiedIcon = TickShield, sx, ...rest } = props;\n  const { onCopy, hasCopied } = useClipboard(value as string);\n\n  return (\n    <Flex\n      direction='col'\n      justify='center'\n      sx={[{ position: 'relative' }, sx]}\n    >\n      <Input\n        {...rest}\n        value={value}\n        isDisabled\n        sx={theme => ({ paddingRight: theme.space.$8 })}\n      />\n\n      <Button\n        elementDescriptor={descriptors.formFieldInputCopyToClipboardButton}\n        variant='ghost'\n        onClick={onCopy}\n        sx={{\n          position: 'absolute',\n          right: 0,\n        }}\n      >\n        <Icon\n          elementDescriptor={descriptors.formFieldInputCopyToClipboardIcon}\n          icon={hasCopied ? copiedIcon : copyIcon}\n          size='sm'\n        />\n      </Button>\n    </Flex>\n  );\n};\n"],"mappings":";;;;;;;;AAYA,MAAa,kBAAkB,UAA+B;CAC5D,MAAM,EAAE,IAAI,OAAO,WAAWA,mBAAW,aAAaC,qBAAY,GAAI,GAAG,SAAS;CAClF,MAAM,EAAE,QAAQ,cAAc,aAAa,MAAgB;AAE3D,QACE,qBAAC;EACC,WAAU;EACV,SAAQ;EACR,IAAI,CAAC,EAAE,UAAU,YAAY,EAAE,GAAG;aAElC,oBAAC;GACC,GAAI;GACG;GACP;GACA,KAAI,WAAU,EAAE,cAAc,MAAM,MAAM,IAAI;IAC9C,EAEF,oBAAC;GACC,mBAAmB,YAAY;GAC/B,SAAQ;GACR,SAAS;GACT,IAAI;IACF,UAAU;IACV,OAAO;IACR;aAED,oBAAC;IACC,mBAAmB,YAAY;IAC/B,MAAM,YAAY,aAAa;IAC/B,MAAK;KACL;IACK;GACJ"}

package/dist/elements/PasswordInput.js

@@ -15,7 +15,7 @@ import { jsx, jsxs } from "@emotion/react/jsx-runtime";
 //#region src/elements/PasswordInput.tsx
 const PasswordInput = forwardRef((props, ref) => {
 	const [hidden, setHidden] = React.useState(true);
-	const { id, onChange: onChangeProp, validatePassword: validatePasswordProp = false, setInfo, setSuccess, setWarning, setError, setHasPassedComplexity,...rest } = props;
+	const { id, onChange: onChangeProp, validatePassword: validatePasswordProp = false, setInfo, setSuccess, setWarning, setError, setHasPassedComplexity, tabIndex,...rest } = props;
 	const inputRef = useRef(null);
 	const [timeoutState, setTimeoutState] = useState(null);
 	const { userSettings: { passwordSettings } } = useEnvironment();
@@ -48,6 +48,7 @@ const PasswordInput = forwardRef((props, ref) => {
 		sx: { position: "relative" },
 		children: [/* @__PURE__ */ jsx(Input, {
 			...rest,
+			tabIndex,
 			onChange,
 			onBlur: (e) => {
 				rest.onBlur?.(e);
@@ -66,7 +67,7 @@ const PasswordInput = forwardRef((props, ref) => {
 			"aria-label": `${hidden ? "Show" : "Hide"} password`,
 			variant: "ghost",
 			size: "xs",
-			tabIndex: -1,
+			tabIndex,
 			onClick: () => setHidden((s) => !s),
 			sx: (theme) => ({
 				position: "absolute",

package/dist/elements/PasswordInput.js.map

@@ -1 +1 @@
-{"version":3,"file":"PasswordInput.js","names":["Eye","EyeSlash"],"sources":["../../src/elements/PasswordInput.tsx"],"sourcesContent":["import { DEBOUNCE_MS } from '@clerk/shared/internal/clerk-js/constants';\nimport type { ClerkAPIError } from '@clerk/shared/types';\nimport type { ChangeEvent } from 'react';\nimport React, { forwardRef, useRef, useState } from 'react';\n\nimport { useEnvironment } from '../contexts';\nimport { descriptors, Flex, Input, localizationKeys, useLocalizations } from '../customizables';\nimport { usePassword } from '../hooks/usePassword';\nimport { Eye, EyeSlash } from '../icons';\nimport type { PropsOfComponent } from '../styledSystem';\nimport { mergeRefs } from '../utils/mergeRefs';\nimport { IconButton } from './IconButton';\n\ntype PasswordInputProps = PropsOfComponent<typeof Input> & {\n  validatePassword?: boolean;\n  setError: (error: string | ClerkAPIError | undefined) => void;\n  setWarning: (warning: string) => void;\n  setSuccess: (message: string) => void;\n  setInfo: (info: string) => void;\n  setHasPassedComplexity: (b: boolean) => void;\n};\n\nexport const PasswordInput = forwardRef<HTMLInputElement, PasswordInputProps>((props, ref) => {\n  const [hidden, setHidden] = React.useState(true);\n  const {\n    id,\n    onChange: onChangeProp,\n    validatePassword: validatePasswordProp = false,\n    setInfo,\n    setSuccess,\n    setWarning,\n    setError,\n    setHasPassedComplexity,\n    ...rest\n  } = props;\n  const inputRef = useRef<HTMLInputElement>(null);\n  const [timeoutState, setTimeoutState] = useState<ReturnType<typeof setTimeout> | null>(null);\n\n  const {\n    userSettings: { passwordSettings },\n  } = useEnvironment();\n\n  const { t } = useLocalizations();\n\n  const { validatePassword } = usePassword(\n    { ...passwordSettings, validatePassword: validatePasswordProp },\n    {\n      onValidationSuccess: () => setSuccess(t(localizationKeys('unstable__errors.zxcvbn.goodPassword'))),\n      onValidationError: message => setError(message),\n      onValidationWarning: message => setWarning(message),\n      onValidationInfo: message => {\n        // ref will be null when onFocus is triggered due to `autoFocus=true`\n        if (!inputRef.current) {\n          return;\n        }\n        const isElementFocused = inputRef.current === document.activeElement;\n        if (isElementFocused) {\n          setInfo(message);\n        } else {\n          // Turn the suggestion into an error if not focused.\n          setError(message);\n        }\n      },\n      onValidationComplexity: hasPassed => setHasPassedComplexity(hasPassed),\n    },\n  );\n\n  const onChange = (e: ChangeEvent<HTMLInputElement>) => {\n    if (timeoutState) {\n      clearTimeout(timeoutState);\n    }\n    setTimeoutState(\n      setTimeout(() => {\n        validatePassword(e.target.value);\n      }, DEBOUNCE_MS),\n    );\n    return onChangeProp?.(e);\n  };\n\n  return (\n    <Flex\n      elementDescriptor={descriptors.formFieldInputGroup}\n      direction='col'\n      justify='center'\n      sx={{ position: 'relative' }}\n    >\n      <Input\n        {...rest}\n        onChange={onChange}\n        onBlur={e => {\n          rest.onBlur?.(e);\n          // Call validate password because to calculate the new feedbackType as the element is now blurred\n          validatePassword(e.target.value);\n        }}\n        onFocus={e => {\n          rest.onFocus?.(e);\n          // Call validate password because to calculate the new feedbackType as the element is now focused\n          validatePassword(e.target.value);\n        }}\n        //@ts-expect-error Type mismatch between ForwardRef and RefObject due to null\n        ref={mergeRefs(ref, inputRef)}\n        type={hidden ? 'password' : 'text'}\n        sx={theme => ({ paddingRight: theme.space.$10 })}\n      />\n      <IconButton\n        elementDescriptor={descriptors.formFieldInputShowPasswordButton}\n        iconElementDescriptor={descriptors.formFieldInputShowPasswordIcon}\n        aria-label={`${hidden ? 'Show' : 'Hide'} password`}\n        variant='ghost'\n        size='xs'\n        tabIndex={-1}\n        onClick={() => setHidden(s => !s)}\n        sx={theme => ({\n          position: 'absolute',\n          right: 0,\n          marginRight: theme.space.$1,\n          color: theme.colors.$neutralAlpha400,\n        })}\n        icon={hidden ? Eye : EyeSlash}\n      />\n    </Flex>\n  );\n});\n"],"mappings":";;;;;;;;;;;;;;;AAsBA,MAAa,gBAAgB,YAAkD,OAAO,QAAQ;CAC5F,MAAM,CAAC,QAAQ,aAAa,MAAM,SAAS,KAAK;CAChD,MAAM,EACJ,IACA,UAAU,cACV,kBAAkB,uBAAuB,OACzC,SACA,YACA,YACA,UACA,uBACA,GAAG,SACD;CACJ,MAAM,WAAW,OAAyB,KAAK;CAC/C,MAAM,CAAC,cAAc,mBAAmB,SAA+C,KAAK;CAE5F,MAAM,EACJ,cAAc,EAAE,uBACd,gBAAgB;CAEpB,MAAM,EAAE,MAAM,kBAAkB;CAEhC,MAAM,EAAE,qBAAqB,YAC3B;EAAE,GAAG;EAAkB,kBAAkB;EAAsB,EAC/D;EACE,2BAA2B,WAAW,EAAE,iBAAiB,uCAAuC,CAAC,CAAC;EAClG,oBAAmB,YAAW,SAAS,QAAQ;EAC/C,sBAAqB,YAAW,WAAW,QAAQ;EACnD,mBAAkB,YAAW;AAE3B,OAAI,CAAC,SAAS,QACZ;AAGF,OADyB,SAAS,YAAY,SAAS,cAErD,SAAQ,QAAQ;OAGhB,UAAS,QAAQ;;EAGrB,yBAAwB,cAAa,uBAAuB,UAAU;EACvE,CACF;CAED,MAAM,YAAY,MAAqC;AACrD,MAAI,aACF,cAAa,aAAa;AAE5B,kBACE,iBAAiB;AACf,oBAAiB,EAAE,OAAO,MAAM;KAC/B,YAAY,CAChB;AACD,SAAO,eAAe,EAAE;;AAG1B,QACE,qBAAC;EACC,mBAAmB,YAAY;EAC/B,WAAU;EACV,SAAQ;EACR,IAAI,EAAE,UAAU,YAAY;aAE5B,oBAAC;GACC,GAAI;GACM;GACV,SAAQ,MAAK;AACX,SAAK,SAAS,EAAE;AAEhB,qBAAiB,EAAE,OAAO,MAAM;;GAElC,UAAS,MAAK;AACZ,SAAK,UAAU,EAAE;AAEjB,qBAAiB,EAAE,OAAO,MAAM;;GAGlC,KAAK,UAAU,KAAK,SAAS;GAC7B,MAAM,SAAS,aAAa;GAC5B,KAAI,WAAU,EAAE,cAAc,MAAM,MAAM,KAAK;IAC/C,EACF,oBAAC;GACC,mBAAmB,YAAY;GAC/B,uBAAuB,YAAY;GACnC,cAAY,GAAG,SAAS,SAAS,OAAO;GACxC,SAAQ;GACR,MAAK;GACL,UAAU;GACV,eAAe,WAAU,MAAK,CAAC,EAAE;GACjC,KAAI,WAAU;IACZ,UAAU;IACV,OAAO;IACP,aAAa,MAAM,MAAM;IACzB,OAAO,MAAM,OAAO;IACrB;GACD,MAAM,SAASA,cAAMC;IACrB;GACG;EAET"}
+{"version":3,"file":"PasswordInput.js","names":["Eye","EyeSlash"],"sources":["../../src/elements/PasswordInput.tsx"],"sourcesContent":["import { DEBOUNCE_MS } from '@clerk/shared/internal/clerk-js/constants';\nimport type { ClerkAPIError } from '@clerk/shared/types';\nimport type { ChangeEvent } from 'react';\nimport React, { forwardRef, useRef, useState } from 'react';\n\nimport { useEnvironment } from '../contexts';\nimport { descriptors, Flex, Input, localizationKeys, useLocalizations } from '../customizables';\nimport { usePassword } from '../hooks/usePassword';\nimport { Eye, EyeSlash } from '../icons';\nimport type { PropsOfComponent } from '../styledSystem';\nimport { mergeRefs } from '../utils/mergeRefs';\nimport { IconButton } from './IconButton';\n\ntype PasswordInputProps = PropsOfComponent<typeof Input> & {\n  validatePassword?: boolean;\n  setError: (error: string | ClerkAPIError | undefined) => void;\n  setWarning: (warning: string) => void;\n  setSuccess: (message: string) => void;\n  setInfo: (info: string) => void;\n  setHasPassedComplexity: (b: boolean) => void;\n};\n\nexport const PasswordInput = forwardRef<HTMLInputElement, PasswordInputProps>((props, ref) => {\n  const [hidden, setHidden] = React.useState(true);\n  const {\n    id,\n    onChange: onChangeProp,\n    validatePassword: validatePasswordProp = false,\n    setInfo,\n    setSuccess,\n    setWarning,\n    setError,\n    setHasPassedComplexity,\n    tabIndex,\n    ...rest\n  } = props;\n  const inputRef = useRef<HTMLInputElement>(null);\n  const [timeoutState, setTimeoutState] = useState<ReturnType<typeof setTimeout> | null>(null);\n\n  const {\n    userSettings: { passwordSettings },\n  } = useEnvironment();\n\n  const { t } = useLocalizations();\n\n  const { validatePassword } = usePassword(\n    { ...passwordSettings, validatePassword: validatePasswordProp },\n    {\n      onValidationSuccess: () => setSuccess(t(localizationKeys('unstable__errors.zxcvbn.goodPassword'))),\n      onValidationError: message => setError(message),\n      onValidationWarning: message => setWarning(message),\n      onValidationInfo: message => {\n        // ref will be null when onFocus is triggered due to `autoFocus=true`\n        if (!inputRef.current) {\n          return;\n        }\n        const isElementFocused = inputRef.current === document.activeElement;\n        if (isElementFocused) {\n          setInfo(message);\n        } else {\n          // Turn the suggestion into an error if not focused.\n          setError(message);\n        }\n      },\n      onValidationComplexity: hasPassed => setHasPassedComplexity(hasPassed),\n    },\n  );\n\n  const onChange = (e: ChangeEvent<HTMLInputElement>) => {\n    if (timeoutState) {\n      clearTimeout(timeoutState);\n    }\n    setTimeoutState(\n      setTimeout(() => {\n        validatePassword(e.target.value);\n      }, DEBOUNCE_MS),\n    );\n    return onChangeProp?.(e);\n  };\n\n  return (\n    <Flex\n      elementDescriptor={descriptors.formFieldInputGroup}\n      direction='col'\n      justify='center'\n      sx={{ position: 'relative' }}\n    >\n      <Input\n        {...rest}\n        tabIndex={tabIndex}\n        onChange={onChange}\n        onBlur={e => {\n          rest.onBlur?.(e);\n          // Call validate password because to calculate the new feedbackType as the element is now blurred\n          validatePassword(e.target.value);\n        }}\n        onFocus={e => {\n          rest.onFocus?.(e);\n          // Call validate password because to calculate the new feedbackType as the element is now focused\n          validatePassword(e.target.value);\n        }}\n        //@ts-expect-error Type mismatch between ForwardRef and RefObject due to null\n        ref={mergeRefs(ref, inputRef)}\n        type={hidden ? 'password' : 'text'}\n        sx={theme => ({ paddingRight: theme.space.$10 })}\n      />\n      <IconButton\n        elementDescriptor={descriptors.formFieldInputShowPasswordButton}\n        iconElementDescriptor={descriptors.formFieldInputShowPasswordIcon}\n        aria-label={`${hidden ? 'Show' : 'Hide'} password`}\n        variant='ghost'\n        size='xs'\n        tabIndex={tabIndex}\n        onClick={() => setHidden(s => !s)}\n        sx={theme => ({\n          position: 'absolute',\n          right: 0,\n          marginRight: theme.space.$1,\n          color: theme.colors.$neutralAlpha400,\n        })}\n        icon={hidden ? Eye : EyeSlash}\n      />\n    </Flex>\n  );\n});\n"],"mappings":";;;;;;;;;;;;;;;AAsBA,MAAa,gBAAgB,YAAkD,OAAO,QAAQ;CAC5F,MAAM,CAAC,QAAQ,aAAa,MAAM,SAAS,KAAK;CAChD,MAAM,EACJ,IACA,UAAU,cACV,kBAAkB,uBAAuB,OACzC,SACA,YACA,YACA,UACA,wBACA,SACA,GAAG,SACD;CACJ,MAAM,WAAW,OAAyB,KAAK;CAC/C,MAAM,CAAC,cAAc,mBAAmB,SAA+C,KAAK;CAE5F,MAAM,EACJ,cAAc,EAAE,uBACd,gBAAgB;CAEpB,MAAM,EAAE,MAAM,kBAAkB;CAEhC,MAAM,EAAE,qBAAqB,YAC3B;EAAE,GAAG;EAAkB,kBAAkB;EAAsB,EAC/D;EACE,2BAA2B,WAAW,EAAE,iBAAiB,uCAAuC,CAAC,CAAC;EAClG,oBAAmB,YAAW,SAAS,QAAQ;EAC/C,sBAAqB,YAAW,WAAW,QAAQ;EACnD,mBAAkB,YAAW;AAE3B,OAAI,CAAC,SAAS,QACZ;AAGF,OADyB,SAAS,YAAY,SAAS,cAErD,SAAQ,QAAQ;OAGhB,UAAS,QAAQ;;EAGrB,yBAAwB,cAAa,uBAAuB,UAAU;EACvE,CACF;CAED,MAAM,YAAY,MAAqC;AACrD,MAAI,aACF,cAAa,aAAa;AAE5B,kBACE,iBAAiB;AACf,oBAAiB,EAAE,OAAO,MAAM;KAC/B,YAAY,CAChB;AACD,SAAO,eAAe,EAAE;;AAG1B,QACE,qBAAC;EACC,mBAAmB,YAAY;EAC/B,WAAU;EACV,SAAQ;EACR,IAAI,EAAE,UAAU,YAAY;aAE5B,oBAAC;GACC,GAAI;GACM;GACA;GACV,SAAQ,MAAK;AACX,SAAK,SAAS,EAAE;AAEhB,qBAAiB,EAAE,OAAO,MAAM;;GAElC,UAAS,MAAK;AACZ,SAAK,UAAU,EAAE;AAEjB,qBAAiB,EAAE,OAAO,MAAM;;GAGlC,KAAK,UAAU,KAAK,SAAS;GAC7B,MAAM,SAAS,aAAa;GAC5B,KAAI,WAAU,EAAE,cAAc,MAAM,MAAM,KAAK;IAC/C,EACF,oBAAC;GACC,mBAAmB,YAAY;GAC/B,uBAAuB,YAAY;GACnC,cAAY,GAAG,SAAS,SAAS,OAAO;GACxC,SAAQ;GACR,MAAK;GACK;GACV,eAAe,WAAU,MAAK,CAAC,EAAE;GACjC,KAAI,WAAU;IACZ,UAAU;IACV,OAAO;IACP,aAAa,MAAM,MAAM;IACzB,OAAO,MAAM,OAAO;IACrB;GACD,MAAM,SAASA,cAAMC;IACrB;GACG;EAET"}