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

package/dist/components/SignUp/SignUpStart.js.map

@@ -1 +1 @@
-{"version":3,"file":"SignUpStart.js","names":["signUp","signUpAttempt: Promise<SignUpResource>"],"sources":["../../../src/components/SignUp/SignUpStart.tsx"],"sourcesContent":["import { getAlternativePhoneCodeProviderData } from '@clerk/shared/alternativePhoneCode';\nimport { isClerkAPIResponseError } from '@clerk/shared/error';\nimport { ERROR_CODES, SIGN_UP_MODES } from '@clerk/shared/internal/clerk-js/constants';\nimport { getClerkQueryParam, removeClerkQueryParam } from '@clerk/shared/internal/clerk-js/queryParams';\nimport { useClerk } from '@clerk/shared/react';\nimport type { PhoneCodeChannel, PhoneCodeChannelData, SignUpResource } from '@clerk/shared/types';\nimport React from 'react';\n\nimport { Card } from '@/ui/elements/Card';\nimport { useCardState, withCardStateProvider } from '@/ui/elements/contexts';\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 { createPasswordError } from '@/ui/utils/passwordUtils';\nimport type { FormControlState } from '@/ui/utils/useFormControl';\nimport { buildRequest, useFormControl } from '@/ui/utils/useFormControl';\nimport { createUsernameError } from '@/ui/utils/usernameUtils';\n\nimport { withRedirectToAfterSignUp, withRedirectToSignUpTask } from '../../common';\nimport { SignInContext, useCoreSignUp, useEnvironment, useSignUpContext } from '../../contexts';\nimport { descriptors, Flex, Flow, localizationKeys, useAppearance, useLocalizations } from '../../customizables';\nimport { CaptchaElement } from '../../elements/CaptchaElement';\nimport { useLoadingStatus } from '../../hooks';\nimport { useRouter } from '../../router';\nimport { getPreferredAlternativePhoneChannel } from '../SignIn/utils';\nimport { SignUpForm } from './SignUpForm';\nimport type { ActiveIdentifier } from './signUpFormHelpers';\nimport { determineActiveFields, emailOrPhone, getInitialActiveIdentifier, showFormFields } from './signUpFormHelpers';\nimport { SignUpRestrictedAccess } from './SignUpRestrictedAccess';\nimport { SignUpSocialButtons } from './SignUpSocialButtons';\nimport { SignUpStartAlternativePhoneCodePhoneNumberCard } from './SignUpStartAlternativePhoneCodePhoneNumberCard';\nimport { completeSignUpFlow } from './util';\n\nfunction SignUpStartInternal(): JSX.Element {\n  const card = useCardState();\n  const clerk = useClerk();\n  const status = useLoadingStatus();\n  const signUp = useCoreSignUp();\n  const { showOptionalFields } = useAppearance().parsedLayout;\n  const { userSettings, authConfig } = useEnvironment();\n  const { navigate } = useRouter();\n  const { attributes } = userSettings;\n  const { setActive } = useClerk();\n  const ctx = useSignUpContext();\n  const isWithinSignInContext = !!React.useContext(SignInContext);\n  const { afterSignUpUrl, signInUrl, unsafeMetadata, navigateOnSetActive } = ctx;\n  const isCombinedFlow = !!(ctx.isCombinedFlow && !!isWithinSignInContext);\n  const [activeCommIdentifierType, setActiveCommIdentifierType] = React.useState<ActiveIdentifier>(() =>\n    getInitialActiveIdentifier(attributes, userSettings.signUp.progressive, {\n      phoneNumber: ctx.initialValues?.phoneNumber === null ? undefined : ctx.initialValues?.phoneNumber,\n      emailAddress: ctx.initialValues?.emailAddress === null ? undefined : ctx.initialValues?.emailAddress,\n      ...(isCombinedFlow\n        ? {\n            emailAddress: signUp.emailAddress,\n            phoneNumber: signUp.phoneNumber,\n          }\n        : {}),\n    }),\n  );\n  const { t, locale } = useLocalizations();\n  const initialValues = ctx.initialValues || {};\n  const [alternativePhoneCodeProvider, setAlternativePhoneCodeProvider] = React.useState<PhoneCodeChannelData | null>(\n    null,\n  );\n\n  const [missingRequirementsWithTicket, setMissingRequirementsWithTicket] = React.useState(false);\n\n  const {\n    userSettings: { passwordSettings, usernameSettings },\n  } = useEnvironment();\n\n  const { mode } = userSettings.signUp;\n\n  const formState = {\n    firstName: useFormControl('firstName', signUp.firstName || initialValues.firstName || '', {\n      type: 'text',\n      label: localizationKeys('formFieldLabel__firstName'),\n      placeholder: localizationKeys('formFieldInputPlaceholder__firstName'),\n    }),\n    lastName: useFormControl('lastName', signUp.lastName || initialValues.lastName || '', {\n      type: 'text',\n      label: localizationKeys('formFieldLabel__lastName'),\n      placeholder: localizationKeys('formFieldInputPlaceholder__lastName'),\n    }),\n    emailAddress: useFormControl('emailAddress', signUp.emailAddress || initialValues.emailAddress || '', {\n      type: 'email',\n      label: localizationKeys('formFieldLabel__emailAddress'),\n      placeholder: localizationKeys('formFieldInputPlaceholder__emailAddress'),\n    }),\n    username: useFormControl('username', signUp.username || initialValues.username || '', {\n      type: 'text',\n      label: localizationKeys('formFieldLabel__username'),\n      placeholder: localizationKeys('formFieldInputPlaceholder__username'),\n      transformer: value => value.trim(),\n      buildErrorMessage: errors => createUsernameError(errors, { t, locale, usernameSettings }),\n    }),\n    phoneNumber: useFormControl('phoneNumber', signUp.phoneNumber || initialValues.phoneNumber || '', {\n      type: 'tel',\n      label: localizationKeys('formFieldLabel__phoneNumber'),\n      placeholder: localizationKeys('formFieldInputPlaceholder__phoneNumber'),\n    }),\n    legalAccepted: useFormControl('legalAccepted', '', {\n      type: 'checkbox',\n      label: '',\n      defaultChecked: false,\n      isRequired: userSettings.signUp.legal_consent_enabled || false,\n    }),\n    password: useFormControl('password', '', {\n      type: 'password',\n      label: localizationKeys('formFieldLabel__password'),\n      placeholder: localizationKeys('formFieldInputPlaceholder__password'),\n      validatePassword: true,\n      buildErrorMessage: errors => createPasswordError(errors, { t, locale, passwordSettings }),\n    }),\n    ticket: useFormControl(\n      'ticket',\n      getClerkQueryParam('__clerk_ticket') || getClerkQueryParam('__clerk_invitation_token') || '',\n    ),\n  } as const;\n\n  const hasTicket = !!formState.ticket.value;\n  const hasExistingSignUpWithTicket = !!(\n    signUp.id &&\n    signUp.status !== null &&\n    (getClerkQueryParam('__clerk_ticket') || getClerkQueryParam('__clerk_invitation_token'))\n  );\n  const hasEmail = !!formState.emailAddress.value;\n  const isProgressiveSignUp = userSettings.signUp.progressive;\n  const isLegalConsentEnabled = userSettings.signUp.legal_consent_enabled;\n  const oidcPrompt = ctx.oidcPrompt;\n\n  const fields = determineActiveFields({\n    attributes,\n    hasTicket: hasTicket || hasExistingSignUpWithTicket,\n    hasEmail,\n    activeCommIdentifierType,\n    isProgressiveSignUp,\n    legalConsentRequired: isLegalConsentEnabled,\n  });\n\n  const handleTokenFlow = () => {\n    if (!formState.ticket.value) {\n      return;\n    }\n    status.setLoading();\n    card.setLoading();\n    signUp\n      .create({ strategy: 'ticket', ticket: formState.ticket.value })\n      .then(signUp => {\n        formState.emailAddress.setValue(signUp.emailAddress || '');\n        // In case we are in a Ticket flow and the sign up is not complete yet, update the state\n        // to render properly the SignUp form with other available options to complete it (e.g. OAuth)\n        if (signUp.status === 'missing_requirements') {\n          setMissingRequirementsWithTicket(true);\n        }\n\n        const redirectUrl = ctx.ssoCallbackUrl;\n        const redirectUrlComplete = ctx.afterSignUpUrl || '/';\n\n        return completeSignUpFlow({\n          signUp,\n          redirectUrl,\n          redirectUrlComplete,\n          verifyEmailPath: 'verify-email-address',\n          verifyPhonePath: 'verify-phone-number',\n          continuePath: 'continue',\n          handleComplete: () => {\n            removeClerkQueryParam('__clerk_ticket');\n            removeClerkQueryParam('__clerk_invitation_token');\n            return setActive({\n              session: signUp.createdSessionId,\n              navigate: async ({ session }) => {\n                await navigateOnSetActive({ session, redirectUrl: afterSignUpUrl });\n              },\n            });\n          },\n          navigate,\n          oidcPrompt,\n        });\n      })\n      .catch(err => {\n        /* Clear ticket values when an error occurs in the initial sign up attempt */\n        formState.ticket.setValue('');\n        handleError(err, [], card.setError);\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 = signUp.missingFields.some(mf => mf === 'enterprise_sso');\n        if (isRedirectingToSSOProvider) {\n          return;\n        }\n\n        status.setIdle();\n        card.setIdle();\n      });\n  };\n\n  React.useLayoutEffect(() => {\n    void handleTokenFlow();\n  }, []);\n\n  React.useEffect(() => {\n    async function handleOauthError() {\n      const error = signUp.verifications.externalAccount.error;\n\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.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            // 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        // TODO: This is a hack to reset the sign in attempt so that the oauth error\n        // does not persist on full page reloads.\n        // We will revise this strategy as part of the Clerk DX epic.\n        void (await signUp.create({}));\n      }\n    }\n\n    void handleOauthError();\n  }, []);\n\n  const handleChangeActive = (type: ActiveIdentifier) => {\n    if (!emailOrPhone(attributes, isProgressiveSignUp)) {\n      return;\n    }\n    setActiveCommIdentifierType(type);\n  };\n\n  const handleSubmit = async (e: React.FormEvent<HTMLFormElement>) => {\n    e.preventDefault();\n\n    type FormStateKey = keyof typeof formState;\n    const fieldsToSubmit = Object.entries(fields).reduce((acc, [k, v]) => {\n      acc.push(...(v && formState[k as FormStateKey] ? [formState[k as FormStateKey]] : []));\n      return acc;\n    }, [] as Array<FormControlState>);\n\n    if (unsafeMetadata) {\n      fieldsToSubmit.push({ id: 'unsafeMetadata', value: unsafeMetadata } as any);\n    }\n\n    if (fields.ticket || hasExistingSignUpWithTicket) {\n      const noop = () => {};\n      // fieldsToSubmit: Constructing a fake fields object for strategy.\n      fieldsToSubmit.push({\n        id: 'strategy',\n        value: 'ticket',\n        clearFeedback: noop,\n        setValue: noop,\n        onChange: noop,\n        setError: noop,\n      } as any);\n\n      // Get ticket value from query params if it exists\n      if (!formState.ticket.value && hasExistingSignUpWithTicket) {\n        const ticketValue = getClerkQueryParam('__clerk_ticket') || getClerkQueryParam('__clerk_invitation_token');\n        if (ticketValue) {\n          fieldsToSubmit.push({\n            id: 'ticket',\n            value: ticketValue,\n            clearFeedback: noop,\n            setValue: noop,\n            onChange: noop,\n            setError: noop,\n          } as any);\n        }\n      }\n    }\n\n    // If the user has already selected an alternative phone code provider, we use that.\n    const preferredAlternativePhoneChannel =\n      alternativePhoneCodeProvider?.channel ||\n      getPreferredAlternativePhoneChannel(fieldsToSubmit, authConfig.preferredChannels, 'phoneNumber');\n    if (preferredAlternativePhoneChannel) {\n      // We need to send the alternative phone code provider channel in the sign up request\n      // together with the phone_code strategy, in order for FAPI to create a Verification upon this first request.\n      const noop = () => {};\n      fieldsToSubmit.push({\n        id: 'strategy',\n        value: 'phone_code',\n        clearFeedback: noop,\n        setValue: noop,\n        onChange: noop,\n        setError: noop,\n      } as any);\n      fieldsToSubmit.push({\n        id: 'channel',\n        value: preferredAlternativePhoneChannel,\n        clearFeedback: noop,\n        setValue: noop,\n        onChange: noop,\n        setError: noop,\n      } as any);\n    }\n\n    // In case of emailOrPhone (both email & phone are optional) and neither of them is provided,\n    // add both to the submitted fields to trigger and render an error for both respective inputs\n    const emailAddressProvided = !!(fieldsToSubmit.find(f => f.id === 'emailAddress')?.value || '');\n    const phoneNumberProvided = !!(fieldsToSubmit.find(f => f.id === 'phoneNumber')?.value || '');\n\n    if (!emailAddressProvided && !phoneNumberProvided && emailOrPhone(attributes, isProgressiveSignUp)) {\n      fieldsToSubmit.push(formState.emailAddress);\n      fieldsToSubmit.push(formState.phoneNumber);\n    }\n\n    card.setLoading();\n    card.setError(undefined);\n\n    const redirectUrl = ctx.ssoCallbackUrl;\n    const redirectUrlComplete = ctx.afterSignUpUrl || '/';\n\n    let signUpAttempt: Promise<SignUpResource>;\n    if (!fields.ticket && !hasExistingSignUpWithTicket) {\n      signUpAttempt = signUp.create(buildRequest(fieldsToSubmit));\n    } else {\n      signUpAttempt = signUp.upsert(buildRequest(fieldsToSubmit));\n    }\n\n    return signUpAttempt\n      .then(res =>\n        completeSignUpFlow({\n          signUp: res,\n          verifyEmailPath: 'verify-email-address',\n          verifyPhonePath: 'verify-phone-number',\n          handleComplete: () =>\n            setActive({\n              session: res.createdSessionId,\n              navigate: async ({ session }) => {\n                await navigateOnSetActive({ session, redirectUrl: afterSignUpUrl });\n              },\n            }),\n          navigate,\n          redirectUrl,\n          redirectUrlComplete,\n          oidcPrompt,\n        }),\n      )\n      .catch(err => {\n        /**\n         * @experimental\n         */\n        if (\n          isClerkAPIResponseError(err) &&\n          err.errors?.[0]?.code === 'enterprise_connection_id_is_required_with_multiple_connections'\n        ) {\n          return navigate('./enterprise-connections');\n        }\n\n        return handleError(err, fieldsToSubmit, card.setError);\n      })\n      .finally(() => card.setIdle());\n  };\n\n  if (status.isLoading) {\n    return <LoadingCard />;\n  }\n\n  const canToggleEmailPhone = emailOrPhone(attributes, isProgressiveSignUp);\n  const visibleFields = Object.entries(fields).filter(([_, opts]) => showOptionalFields || opts?.required);\n  const shouldShowForm = showFormFields(userSettings) && visibleFields.length > 0;\n\n  const showOauthProviders =\n    (!(hasTicket || hasExistingSignUpWithTicket) || missingRequirementsWithTicket) &&\n    userSettings.authenticatableSocialStrategies.length > 0;\n  const showWeb3Providers = !(hasTicket || hasExistingSignUpWithTicket) && userSettings.web3FirstFactors.length > 0;\n  const showAlternativePhoneCodeProviders =\n    !(hasTicket || hasExistingSignUpWithTicket) && userSettings.alternativePhoneCodeChannels.length > 0;\n\n  const onAlternativePhoneCodeUseAnotherMethod = () => {\n    setAlternativePhoneCodeProvider(null);\n  };\n  const onAlternativePhoneCodeProviderClick = (phoneCodeChannel: PhoneCodeChannel) => {\n    const phoneCodeProvider: PhoneCodeChannelData | null =\n      getAlternativePhoneCodeProviderData(phoneCodeChannel) || null;\n    setAlternativePhoneCodeProvider(phoneCodeProvider);\n  };\n\n  if (mode !== SIGN_UP_MODES.PUBLIC && !(hasTicket || hasExistingSignUpWithTicket)) {\n    return <SignUpRestrictedAccess />;\n  }\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('signUp.start.titleCombined')\n                    : localizationKeys('signUp.start.title')\n                }\n              />\n              <Header.Subtitle\n                localizationKey={\n                  isCombinedFlow\n                    ? localizationKeys('signUp.start.subtitleCombined')\n                    : localizationKeys('signUp.start.subtitle')\n                }\n              />\n            </Header.Root>\n            <Card.Alert>{card.error}</Card.Alert>\n            <Flex\n              direction='col'\n              elementDescriptor={descriptors.main}\n              gap={6}\n            >\n              <SocialButtonsReversibleContainerWithDivider>\n                {(showOauthProviders || showWeb3Providers || showAlternativePhoneCodeProviders) && (\n                  <SignUpSocialButtons\n                    enableOAuthProviders={showOauthProviders}\n                    enableWeb3Providers={showWeb3Providers}\n                    enableAlternativePhoneCodeProviders={showAlternativePhoneCodeProviders}\n                    onAlternativePhoneCodeProviderClick={onAlternativePhoneCodeProviderClick}\n                    continueSignUp={missingRequirementsWithTicket}\n                    legalAccepted={Boolean(formState.legalAccepted.checked) || undefined}\n                  />\n                )}\n                {shouldShowForm && (\n                  <SignUpForm\n                    handleSubmit={handleSubmit}\n                    fields={fields}\n                    formState={formState}\n                    canToggleEmailPhone={canToggleEmailPhone}\n                    handleEmailPhoneToggle={handleChangeActive}\n                  />\n                )}\n              </SocialButtonsReversibleContainerWithDivider>\n              {!shouldShowForm && <CaptchaElement />}\n            </Flex>\n          </Card.Content>\n\n          <Card.Footer>\n            <Card.Action elementId='signUp'>\n              <Card.ActionText localizationKey={localizationKeys('signUp.start.actionText')} />\n              <Card.ActionLink\n                localizationKey={localizationKeys('signUp.start.actionLink')}\n                to={isCombinedFlow ? '../' : clerk.buildUrlWithAuth(signInUrl)}\n              />\n            </Card.Action>\n          </Card.Footer>\n        </Card.Root>\n      ) : (\n        <SignUpStartAlternativePhoneCodePhoneNumberCard\n          handleSubmit={handleSubmit}\n          fields={fields}\n          formState={formState}\n          onUseAnotherMethod={onAlternativePhoneCodeUseAnotherMethod}\n          phoneCodeProvider={alternativePhoneCodeProvider}\n        />\n      )}\n    </Flow.Part>\n  );\n}\n\nexport const SignUpStart = withRedirectToSignUpTask(\n  withRedirectToAfterSignUp(withCardStateProvider(SignUpStartInternal)),\n);\n"],"mappings":"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"}
+{"version":3,"file":"SignUpStart.js","names":["signUp","signUpAttempt: Promise<SignUpResource>"],"sources":["../../../src/components/SignUp/SignUpStart.tsx"],"sourcesContent":["import { getAlternativePhoneCodeProviderData } from '@clerk/shared/alternativePhoneCode';\nimport { isClerkAPIResponseError } from '@clerk/shared/error';\nimport { ERROR_CODES, SIGN_UP_MODES } from '@clerk/shared/internal/clerk-js/constants';\nimport { getClerkQueryParam, removeClerkQueryParam } from '@clerk/shared/internal/clerk-js/queryParams';\nimport { useClerk } from '@clerk/shared/react';\nimport type { PhoneCodeChannel, PhoneCodeChannelData, SignUpResource } from '@clerk/shared/types';\nimport React from 'react';\n\nimport { Card } from '@/ui/elements/Card';\nimport { useCardState, withCardStateProvider } from '@/ui/elements/contexts';\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 { createPasswordError } from '@/ui/utils/passwordUtils';\nimport type { FormControlState } from '@/ui/utils/useFormControl';\nimport { buildRequest, useFormControl } from '@/ui/utils/useFormControl';\nimport { createUsernameError } from '@/ui/utils/usernameUtils';\n\nimport { withRedirectToAfterSignUp, withRedirectToSignUpTask } from '../../common';\nimport { SignInContext, useCoreSignUp, useEnvironment, useSignUpContext } from '../../contexts';\nimport { descriptors, Flex, Flow, localizationKeys, useAppearance, useLocalizations } from '../../customizables';\nimport { CaptchaElement } from '../../elements/CaptchaElement';\nimport { useLoadingStatus } from '../../hooks';\nimport { useRouter } from '../../router';\nimport { getPreferredAlternativePhoneChannel } from '../SignIn/utils';\nimport { SignUpForm } from './SignUpForm';\nimport type { ActiveIdentifier } from './signUpFormHelpers';\nimport { determineActiveFields, emailOrPhone, getInitialActiveIdentifier, showFormFields } from './signUpFormHelpers';\nimport { SignUpRestrictedAccess } from './SignUpRestrictedAccess';\nimport { SignUpSocialButtons } from './SignUpSocialButtons';\nimport { SignUpStartAlternativePhoneCodePhoneNumberCard } from './SignUpStartAlternativePhoneCodePhoneNumberCard';\nimport { completeSignUpFlow } from './util';\n\nfunction SignUpStartInternal(): JSX.Element {\n  const card = useCardState();\n  const clerk = useClerk();\n  const status = useLoadingStatus();\n  const signUp = useCoreSignUp();\n  const { showOptionalFields } = useAppearance().parsedOptions;\n  const { userSettings, authConfig } = useEnvironment();\n  const { navigate } = useRouter();\n  const { attributes } = userSettings;\n  const { setActive } = useClerk();\n  const ctx = useSignUpContext();\n  const isWithinSignInContext = !!React.useContext(SignInContext);\n  const { afterSignUpUrl, signInUrl, unsafeMetadata, navigateOnSetActive } = ctx;\n  const isCombinedFlow = !!(ctx.isCombinedFlow && !!isWithinSignInContext);\n  const [activeCommIdentifierType, setActiveCommIdentifierType] = React.useState<ActiveIdentifier>(() =>\n    getInitialActiveIdentifier(attributes, userSettings.signUp.progressive, {\n      phoneNumber: ctx.initialValues?.phoneNumber === null ? undefined : ctx.initialValues?.phoneNumber,\n      emailAddress: ctx.initialValues?.emailAddress === null ? undefined : ctx.initialValues?.emailAddress,\n      ...(isCombinedFlow\n        ? {\n            emailAddress: signUp.emailAddress,\n            phoneNumber: signUp.phoneNumber,\n          }\n        : {}),\n    }),\n  );\n  const { t, locale } = useLocalizations();\n  const initialValues = ctx.initialValues || {};\n  const [alternativePhoneCodeProvider, setAlternativePhoneCodeProvider] = React.useState<PhoneCodeChannelData | null>(\n    null,\n  );\n\n  const [missingRequirementsWithTicket, setMissingRequirementsWithTicket] = React.useState(false);\n\n  const {\n    userSettings: { passwordSettings, usernameSettings },\n  } = useEnvironment();\n\n  const { mode } = userSettings.signUp;\n\n  const formState = {\n    firstName: useFormControl('firstName', signUp.firstName || initialValues.firstName || '', {\n      type: 'text',\n      label: localizationKeys('formFieldLabel__firstName'),\n      placeholder: localizationKeys('formFieldInputPlaceholder__firstName'),\n    }),\n    lastName: useFormControl('lastName', signUp.lastName || initialValues.lastName || '', {\n      type: 'text',\n      label: localizationKeys('formFieldLabel__lastName'),\n      placeholder: localizationKeys('formFieldInputPlaceholder__lastName'),\n    }),\n    emailAddress: useFormControl('emailAddress', signUp.emailAddress || initialValues.emailAddress || '', {\n      type: 'email',\n      label: localizationKeys('formFieldLabel__emailAddress'),\n      placeholder: localizationKeys('formFieldInputPlaceholder__emailAddress'),\n    }),\n    username: useFormControl('username', signUp.username || initialValues.username || '', {\n      type: 'text',\n      label: localizationKeys('formFieldLabel__username'),\n      placeholder: localizationKeys('formFieldInputPlaceholder__username'),\n      transformer: value => value.trim(),\n      buildErrorMessage: errors => createUsernameError(errors, { t, locale, usernameSettings }),\n    }),\n    phoneNumber: useFormControl('phoneNumber', signUp.phoneNumber || initialValues.phoneNumber || '', {\n      type: 'tel',\n      label: localizationKeys('formFieldLabel__phoneNumber'),\n      placeholder: localizationKeys('formFieldInputPlaceholder__phoneNumber'),\n    }),\n    legalAccepted: useFormControl('legalAccepted', '', {\n      type: 'checkbox',\n      label: '',\n      defaultChecked: false,\n      isRequired: userSettings.signUp.legal_consent_enabled || false,\n    }),\n    password: useFormControl('password', '', {\n      type: 'password',\n      label: localizationKeys('formFieldLabel__password'),\n      placeholder: localizationKeys('formFieldInputPlaceholder__password'),\n      validatePassword: true,\n      buildErrorMessage: errors => createPasswordError(errors, { t, locale, passwordSettings }),\n    }),\n    ticket: useFormControl(\n      'ticket',\n      getClerkQueryParam('__clerk_ticket') || getClerkQueryParam('__clerk_invitation_token') || '',\n    ),\n  } as const;\n\n  const hasTicket = !!formState.ticket.value;\n  const hasExistingSignUpWithTicket = !!(\n    signUp.id &&\n    signUp.status !== null &&\n    (getClerkQueryParam('__clerk_ticket') || getClerkQueryParam('__clerk_invitation_token'))\n  );\n  const hasEmail = !!formState.emailAddress.value;\n  const isProgressiveSignUp = userSettings.signUp.progressive;\n  const isLegalConsentEnabled = userSettings.signUp.legal_consent_enabled;\n  const oidcPrompt = ctx.oidcPrompt;\n\n  const fields = determineActiveFields({\n    attributes,\n    hasTicket: hasTicket || hasExistingSignUpWithTicket,\n    hasEmail,\n    activeCommIdentifierType,\n    isProgressiveSignUp,\n    legalConsentRequired: isLegalConsentEnabled,\n  });\n\n  const handleTokenFlow = () => {\n    if (!formState.ticket.value) {\n      return;\n    }\n    status.setLoading();\n    card.setLoading();\n    signUp\n      .create({ strategy: 'ticket', ticket: formState.ticket.value })\n      .then(signUp => {\n        formState.emailAddress.setValue(signUp.emailAddress || '');\n        // In case we are in a Ticket flow and the sign up is not complete yet, update the state\n        // to render properly the SignUp form with other available options to complete it (e.g. OAuth)\n        if (signUp.status === 'missing_requirements') {\n          setMissingRequirementsWithTicket(true);\n        }\n\n        const redirectUrl = ctx.ssoCallbackUrl;\n        const redirectUrlComplete = ctx.afterSignUpUrl || '/';\n\n        return completeSignUpFlow({\n          signUp,\n          redirectUrl,\n          redirectUrlComplete,\n          verifyEmailPath: 'verify-email-address',\n          verifyPhonePath: 'verify-phone-number',\n          continuePath: 'continue',\n          handleComplete: () => {\n            removeClerkQueryParam('__clerk_ticket');\n            removeClerkQueryParam('__clerk_invitation_token');\n            return setActive({\n              session: signUp.createdSessionId,\n              navigate: async ({ session }) => {\n                await navigateOnSetActive({ session, redirectUrl: afterSignUpUrl });\n              },\n            });\n          },\n          navigate,\n          oidcPrompt,\n        });\n      })\n      .catch(err => {\n        /* Clear ticket values when an error occurs in the initial sign up attempt */\n        formState.ticket.setValue('');\n        handleError(err, [], card.setError);\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 = signUp.missingFields.some(mf => mf === 'enterprise_sso');\n        if (isRedirectingToSSOProvider) {\n          return;\n        }\n\n        status.setIdle();\n        card.setIdle();\n      });\n  };\n\n  React.useLayoutEffect(() => {\n    void handleTokenFlow();\n  }, []);\n\n  React.useEffect(() => {\n    async function handleOauthError() {\n      const error = signUp.verifications.externalAccount.error;\n\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.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            // 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        // TODO: This is a hack to reset the sign in attempt so that the oauth error\n        // does not persist on full page reloads.\n        // We will revise this strategy as part of the Clerk DX epic.\n        void (await signUp.create({}));\n      }\n    }\n\n    void handleOauthError();\n  }, []);\n\n  const handleChangeActive = (type: ActiveIdentifier) => {\n    if (!emailOrPhone(attributes, isProgressiveSignUp)) {\n      return;\n    }\n    setActiveCommIdentifierType(type);\n  };\n\n  const handleSubmit = async (e: React.FormEvent<HTMLFormElement>) => {\n    e.preventDefault();\n\n    type FormStateKey = keyof typeof formState;\n    const fieldsToSubmit = Object.entries(fields).reduce((acc, [k, v]) => {\n      acc.push(...(v && formState[k as FormStateKey] ? [formState[k as FormStateKey]] : []));\n      return acc;\n    }, [] as Array<FormControlState>);\n\n    if (unsafeMetadata) {\n      fieldsToSubmit.push({ id: 'unsafeMetadata', value: unsafeMetadata } as any);\n    }\n\n    if (fields.ticket || hasExistingSignUpWithTicket) {\n      const noop = () => {};\n      // fieldsToSubmit: Constructing a fake fields object for strategy.\n      fieldsToSubmit.push({\n        id: 'strategy',\n        value: 'ticket',\n        clearFeedback: noop,\n        setValue: noop,\n        onChange: noop,\n        setError: noop,\n      } as any);\n\n      // Get ticket value from query params if it exists\n      if (!formState.ticket.value && hasExistingSignUpWithTicket) {\n        const ticketValue = getClerkQueryParam('__clerk_ticket') || getClerkQueryParam('__clerk_invitation_token');\n        if (ticketValue) {\n          fieldsToSubmit.push({\n            id: 'ticket',\n            value: ticketValue,\n            clearFeedback: noop,\n            setValue: noop,\n            onChange: noop,\n            setError: noop,\n          } as any);\n        }\n      }\n    }\n\n    // If the user has already selected an alternative phone code provider, we use that.\n    const preferredAlternativePhoneChannel =\n      alternativePhoneCodeProvider?.channel ||\n      getPreferredAlternativePhoneChannel(fieldsToSubmit, authConfig.preferredChannels, 'phoneNumber');\n    if (preferredAlternativePhoneChannel) {\n      // We need to send the alternative phone code provider channel in the sign up request\n      // together with the phone_code strategy, in order for FAPI to create a Verification upon this first request.\n      const noop = () => {};\n      fieldsToSubmit.push({\n        id: 'strategy',\n        value: 'phone_code',\n        clearFeedback: noop,\n        setValue: noop,\n        onChange: noop,\n        setError: noop,\n      } as any);\n      fieldsToSubmit.push({\n        id: 'channel',\n        value: preferredAlternativePhoneChannel,\n        clearFeedback: noop,\n        setValue: noop,\n        onChange: noop,\n        setError: noop,\n      } as any);\n    }\n\n    // In case of emailOrPhone (both email & phone are optional) and neither of them is provided,\n    // add both to the submitted fields to trigger and render an error for both respective inputs\n    const emailAddressProvided = !!(fieldsToSubmit.find(f => f.id === 'emailAddress')?.value || '');\n    const phoneNumberProvided = !!(fieldsToSubmit.find(f => f.id === 'phoneNumber')?.value || '');\n\n    if (!emailAddressProvided && !phoneNumberProvided && emailOrPhone(attributes, isProgressiveSignUp)) {\n      fieldsToSubmit.push(formState.emailAddress);\n      fieldsToSubmit.push(formState.phoneNumber);\n    }\n\n    card.setLoading();\n    card.setError(undefined);\n\n    const redirectUrl = ctx.ssoCallbackUrl;\n    const redirectUrlComplete = ctx.afterSignUpUrl || '/';\n\n    let signUpAttempt: Promise<SignUpResource>;\n    if (!fields.ticket && !hasExistingSignUpWithTicket) {\n      signUpAttempt = signUp.create(buildRequest(fieldsToSubmit));\n    } else {\n      signUpAttempt = signUp.upsert(buildRequest(fieldsToSubmit));\n    }\n\n    return signUpAttempt\n      .then(res =>\n        completeSignUpFlow({\n          signUp: res,\n          verifyEmailPath: 'verify-email-address',\n          verifyPhonePath: 'verify-phone-number',\n          handleComplete: () =>\n            setActive({\n              session: res.createdSessionId,\n              navigate: async ({ session }) => {\n                await navigateOnSetActive({ session, redirectUrl: afterSignUpUrl });\n              },\n            }),\n          navigate,\n          redirectUrl,\n          redirectUrlComplete,\n          oidcPrompt,\n        }),\n      )\n      .catch(err => {\n        /**\n         * @experimental\n         */\n        if (\n          isClerkAPIResponseError(err) &&\n          err.errors?.[0]?.code === 'enterprise_connection_id_is_required_with_multiple_connections'\n        ) {\n          return navigate('./enterprise-connections');\n        }\n\n        return handleError(err, fieldsToSubmit, card.setError);\n      })\n      .finally(() => card.setIdle());\n  };\n\n  if (status.isLoading) {\n    return <LoadingCard />;\n  }\n\n  const canToggleEmailPhone = emailOrPhone(attributes, isProgressiveSignUp);\n  const visibleFields = Object.entries(fields).filter(([_, opts]) => showOptionalFields || opts?.required);\n  const shouldShowForm = showFormFields(userSettings) && visibleFields.length > 0;\n\n  const showOauthProviders =\n    (!(hasTicket || hasExistingSignUpWithTicket) || missingRequirementsWithTicket) &&\n    userSettings.authenticatableSocialStrategies.length > 0;\n  const showWeb3Providers = !(hasTicket || hasExistingSignUpWithTicket) && userSettings.web3FirstFactors.length > 0;\n  const showAlternativePhoneCodeProviders =\n    !(hasTicket || hasExistingSignUpWithTicket) && userSettings.alternativePhoneCodeChannels.length > 0;\n\n  const onAlternativePhoneCodeUseAnotherMethod = () => {\n    setAlternativePhoneCodeProvider(null);\n  };\n  const onAlternativePhoneCodeProviderClick = (phoneCodeChannel: PhoneCodeChannel) => {\n    const phoneCodeProvider: PhoneCodeChannelData | null =\n      getAlternativePhoneCodeProviderData(phoneCodeChannel) || null;\n    setAlternativePhoneCodeProvider(phoneCodeProvider);\n  };\n\n  if (mode !== SIGN_UP_MODES.PUBLIC && !(hasTicket || hasExistingSignUpWithTicket)) {\n    return <SignUpRestrictedAccess />;\n  }\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('signUp.start.titleCombined')\n                    : localizationKeys('signUp.start.title')\n                }\n              />\n              <Header.Subtitle\n                localizationKey={\n                  isCombinedFlow\n                    ? localizationKeys('signUp.start.subtitleCombined')\n                    : localizationKeys('signUp.start.subtitle')\n                }\n              />\n            </Header.Root>\n            <Card.Alert>{card.error}</Card.Alert>\n            <Flex\n              direction='col'\n              elementDescriptor={descriptors.main}\n              gap={6}\n            >\n              <SocialButtonsReversibleContainerWithDivider>\n                {(showOauthProviders || showWeb3Providers || showAlternativePhoneCodeProviders) && (\n                  <SignUpSocialButtons\n                    enableOAuthProviders={showOauthProviders}\n                    enableWeb3Providers={showWeb3Providers}\n                    enableAlternativePhoneCodeProviders={showAlternativePhoneCodeProviders}\n                    onAlternativePhoneCodeProviderClick={onAlternativePhoneCodeProviderClick}\n                    continueSignUp={missingRequirementsWithTicket}\n                    legalAccepted={Boolean(formState.legalAccepted.checked) || undefined}\n                  />\n                )}\n                {shouldShowForm && (\n                  <SignUpForm\n                    handleSubmit={handleSubmit}\n                    fields={fields}\n                    formState={formState}\n                    canToggleEmailPhone={canToggleEmailPhone}\n                    handleEmailPhoneToggle={handleChangeActive}\n                  />\n                )}\n              </SocialButtonsReversibleContainerWithDivider>\n              {!shouldShowForm && <CaptchaElement />}\n            </Flex>\n          </Card.Content>\n\n          <Card.Footer>\n            <Card.Action elementId='signUp'>\n              <Card.ActionText localizationKey={localizationKeys('signUp.start.actionText')} />\n              <Card.ActionLink\n                localizationKey={localizationKeys('signUp.start.actionLink')}\n                to={isCombinedFlow ? '../' : clerk.buildUrlWithAuth(signInUrl)}\n              />\n            </Card.Action>\n          </Card.Footer>\n        </Card.Root>\n      ) : (\n        <SignUpStartAlternativePhoneCodePhoneNumberCard\n          handleSubmit={handleSubmit}\n          fields={fields}\n          formState={formState}\n          onUseAnotherMethod={onAlternativePhoneCodeUseAnotherMethod}\n          phoneCodeProvider={alternativePhoneCodeProvider}\n        />\n      )}\n    </Flow.Part>\n  );\n}\n\nexport const SignUpStart = withRedirectToSignUpTask(\n  withRedirectToAfterSignUp(withCardStateProvider(SignUpStartInternal)),\n);\n"],"mappings":"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"}

package/dist/components/UserProfile/PasswordForm.js

@@ -70,6 +70,7 @@ const PasswordForm = withCardStateProvider((props) => {
 		if (passwordField.value) setConfirmPasswordFeedback(confirmField.value);
 	};
 	const updatePassword = async () => {
+		if (!canSubmit) return;
 		try {
 			successPagePropsRef.current = {
 				title: user.passwordEnabled ? localizationKeys("userProfile.passwordPage.title__update") : localizationKeys("userProfile.passwordPage.title__set"),

package/dist/components/UserProfile/PasswordForm.js.map

@@ -1 +1 @@
-{"version":3,"file":"PasswordForm.js","names":["user","e: any"],"sources":["../../../src/components/UserProfile/PasswordForm.tsx"],"sourcesContent":["import { useReverification, useSession, useUser } from '@clerk/shared/react';\nimport type { UserResource } from '@clerk/shared/types';\nimport { useRef } from 'react';\n\nimport { useCardState, withCardStateProvider } from '@/ui/elements/contexts';\nimport { Form } from '@/ui/elements/Form';\nimport { FormButtonContainer, FormButtons } from '@/ui/elements/FormButtons';\nimport type { FormProps } from '@/ui/elements/FormContainer';\nimport { FormContainer } from '@/ui/elements/FormContainer';\nimport { InformationBox } from '@/ui/elements/InformationBox';\nimport type { SuccessPage } from '@/ui/elements/SuccessPage';\nimport { handleError } from '@/ui/utils/errorHandler';\nimport { createPasswordError } from '@/ui/utils/passwordUtils';\nimport { useFormControl } from '@/ui/utils/useFormControl';\n\nimport { useEnvironment } from '../../contexts';\nimport { localizationKeys, useLocalizations } from '../../customizables';\nimport { useConfirmPassword } from '../../hooks';\n\nconst generateSuccessPageText = (userHasPassword: boolean, sessionSignOut: boolean) => {\n  const localizedTexts = [];\n\n  if (userHasPassword) {\n    localizedTexts.push(localizationKeys('userProfile.passwordPage.successMessage__update'));\n  } else {\n    localizedTexts.push(localizationKeys('userProfile.passwordPage.successMessage__set'));\n  }\n\n  if (sessionSignOut) {\n    localizedTexts.push(localizationKeys('userProfile.passwordPage.successMessage__signOutOfOtherSessions'));\n  }\n\n  return localizedTexts;\n};\n\ntype PasswordFormProps = FormProps;\nexport const PasswordForm = withCardStateProvider((props: PasswordFormProps) => {\n  const { t, locale } = useLocalizations();\n  const { onSuccess, onReset } = props;\n  const { user } = useUser();\n  const updatePasswordWithReverification = useReverification(\n    (user: UserResource, opts: Parameters<UserResource['updatePassword']>) => user.updatePassword(...opts),\n  );\n\n  if (!user) {\n    return null;\n  }\n\n  const {\n    userSettings: { passwordSettings },\n    authConfig: { reverification },\n  } = useEnvironment();\n\n  const { session } = useSession();\n  const title = user.passwordEnabled\n    ? localizationKeys('userProfile.passwordPage.title__update')\n    : localizationKeys('userProfile.passwordPage.title__set');\n  const card = useCardState();\n\n  const passwordEditDisabled = user.enterpriseAccounts.some(ea => ea.active);\n  const currentPasswordRequired = user.passwordEnabled && !reverification;\n\n  // Ensure that messages will not use the updated state of User after a password has been set or changed\n  const successPagePropsRef = useRef<Parameters<typeof SuccessPage>[0]>({\n    title: localizationKeys('userProfile.passwordPage.title__set'),\n  });\n\n  const currentPasswordField = useFormControl('currentPassword', '', {\n    type: 'password',\n    label: localizationKeys('formFieldLabel__currentPassword'),\n    isRequired: true,\n  });\n\n  const passwordField = useFormControl('newPassword', '', {\n    type: 'password',\n    label: localizationKeys('formFieldLabel__newPassword'),\n    isRequired: true,\n    validatePassword: true,\n    buildErrorMessage: errors => createPasswordError(errors, { t, locale, passwordSettings }),\n  });\n\n  const confirmField = useFormControl('confirmPassword', '', {\n    type: 'password',\n    label: localizationKeys('formFieldLabel__confirmPassword'),\n    isRequired: true,\n  });\n\n  const sessionsField = useFormControl('signOutOfOtherSessions', '', {\n    type: 'checkbox',\n    label: localizationKeys('formFieldLabel__signOutOfOtherSessions'),\n    defaultChecked: true,\n  });\n\n  const { setConfirmPasswordFeedback, isPasswordMatch } = useConfirmPassword({\n    passwordField,\n    confirmPasswordField: confirmField,\n  });\n\n  const canSubmit =\n    (currentPasswordRequired ? currentPasswordField.value && isPasswordMatch : isPasswordMatch) &&\n    passwordField.value &&\n    confirmField.value;\n\n  const validateForm = () => {\n    if (passwordField.value) {\n      setConfirmPasswordFeedback(confirmField.value);\n    }\n  };\n\n  const updatePassword = async () => {\n    try {\n      successPagePropsRef.current = {\n        title: user.passwordEnabled\n          ? localizationKeys('userProfile.passwordPage.title__update')\n          : localizationKeys('userProfile.passwordPage.title__set'),\n        text: generateSuccessPageText(user.passwordEnabled, !!sessionsField.checked),\n      };\n\n      const opts = {\n        newPassword: passwordField.value,\n        signOutOfOtherSessions: sessionsField.checked,\n        currentPassword: currentPasswordRequired ? currentPasswordField.value : undefined,\n      } satisfies Parameters<typeof user.updatePassword>[0];\n\n      await updatePasswordWithReverification(user, [opts]);\n      onSuccess();\n    } catch (e: any) {\n      handleError(e, [currentPasswordField, passwordField, confirmField], card.setError);\n    }\n  };\n\n  return (\n    <FormContainer headerTitle={title}>\n      {passwordEditDisabled && <InformationBox message={localizationKeys('userProfile.passwordPage.readonly')} />}\n\n      <Form.Root\n        onSubmit={updatePassword}\n        onBlur={validateForm}\n      >\n        {/* For password managers */}\n        <input\n          readOnly\n          data-testid='hidden-identifier'\n          id='identifier-field'\n          name='identifier'\n          value={session?.publicUserData.identifier || ''}\n          style={{ display: 'none' }}\n        />\n        {currentPasswordRequired && (\n          <Form.ControlRow elementId={currentPasswordField.id}>\n            <Form.PasswordInput\n              {...currentPasswordField.props}\n              minLength={6}\n              isRequired\n              autoFocus\n              isDisabled={passwordEditDisabled}\n            />\n          </Form.ControlRow>\n        )}\n        <Form.ControlRow elementId={passwordField.id}>\n          <Form.PasswordInput\n            {...passwordField.props}\n            minLength={6}\n            isRequired\n            autoFocus={!user.passwordEnabled}\n            isDisabled={passwordEditDisabled}\n          />\n        </Form.ControlRow>\n        <Form.ControlRow elementId={confirmField.id}>\n          <Form.PasswordInput\n            {...confirmField.props}\n            onChange={e => {\n              if (e.target.value) {\n                setConfirmPasswordFeedback(e.target.value);\n              }\n              return confirmField.props.onChange(e);\n            }}\n            isRequired\n            isDisabled={passwordEditDisabled}\n          />\n        </Form.ControlRow>\n        <Form.ControlRow elementId={sessionsField.id}>\n          <Form.Checkbox\n            {...sessionsField.props}\n            description={localizationKeys('userProfile.passwordPage.checkboxInfoText__signOutOfOtherSessions')}\n            isDisabled={passwordEditDisabled}\n          />\n        </Form.ControlRow>\n        {passwordEditDisabled ? (\n          <FormButtonContainer>\n            <Form.ResetButton\n              localizationKey={localizationKeys('userProfile.formButtonReset')}\n              block={false}\n              onClick={onReset}\n            />\n          </FormButtonContainer>\n        ) : (\n          <FormButtons\n            isDisabled={!canSubmit}\n            onReset={onReset}\n          />\n        )}\n      </Form.Root>\n    </FormContainer>\n  );\n});\n"],"mappings":";;;;;;;;;;;;;;;;;AAmBA,MAAM,2BAA2B,iBAA0B,mBAA4B;CACrF,MAAM,iBAAiB,EAAE;AAEzB,KAAI,gBACF,gBAAe,KAAK,iBAAiB,kDAAkD,CAAC;KAExF,gBAAe,KAAK,iBAAiB,+CAA+C,CAAC;AAGvF,KAAI,eACF,gBAAe,KAAK,iBAAiB,kEAAkE,CAAC;AAG1G,QAAO;;AAIT,MAAa,eAAe,uBAAuB,UAA6B;CAC9E,MAAM,EAAE,GAAG,WAAW,kBAAkB;CACxC,MAAM,EAAE,WAAW,YAAY;CAC/B,MAAM,EAAE,SAAS,SAAS;CAC1B,MAAM,mCAAmC,mBACtC,QAAoB,SAAqDA,OAAK,eAAe,GAAG,KAAK,CACvG;AAED,KAAI,CAAC,KACH,QAAO;CAGT,MAAM,EACJ,cAAc,EAAE,oBAChB,YAAY,EAAE,qBACZ,gBAAgB;CAEpB,MAAM,EAAE,YAAY,YAAY;CAChC,MAAM,QAAQ,KAAK,kBACf,iBAAiB,yCAAyC,GAC1D,iBAAiB,sCAAsC;CAC3D,MAAM,OAAO,cAAc;CAE3B,MAAM,uBAAuB,KAAK,mBAAmB,MAAK,OAAM,GAAG,OAAO;CAC1E,MAAM,0BAA0B,KAAK,mBAAmB,CAAC;CAGzD,MAAM,sBAAsB,OAA0C,EACpE,OAAO,iBAAiB,sCAAsC,EAC/D,CAAC;CAEF,MAAM,uBAAuB,eAAe,mBAAmB,IAAI;EACjE,MAAM;EACN,OAAO,iBAAiB,kCAAkC;EAC1D,YAAY;EACb,CAAC;CAEF,MAAM,gBAAgB,eAAe,eAAe,IAAI;EACtD,MAAM;EACN,OAAO,iBAAiB,8BAA8B;EACtD,YAAY;EACZ,kBAAkB;EAClB,oBAAmB,WAAU,oBAAoB,QAAQ;GAAE;GAAG;GAAQ;GAAkB,CAAC;EAC1F,CAAC;CAEF,MAAM,eAAe,eAAe,mBAAmB,IAAI;EACzD,MAAM;EACN,OAAO,iBAAiB,kCAAkC;EAC1D,YAAY;EACb,CAAC;CAEF,MAAM,gBAAgB,eAAe,0BAA0B,IAAI;EACjE,MAAM;EACN,OAAO,iBAAiB,yCAAyC;EACjE,gBAAgB;EACjB,CAAC;CAEF,MAAM,EAAE,4BAA4B,oBAAoB,mBAAmB;EACzE;EACA,sBAAsB;EACvB,CAAC;CAEF,MAAM,aACH,0BAA0B,qBAAqB,SAAS,kBAAkB,oBAC3E,cAAc,SACd,aAAa;CAEf,MAAM,qBAAqB;AACzB,MAAI,cAAc,MAChB,4BAA2B,aAAa,MAAM;;CAIlD,MAAM,iBAAiB,YAAY;AACjC,MAAI;AACF,uBAAoB,UAAU;IAC5B,OAAO,KAAK,kBACR,iBAAiB,yCAAyC,GAC1D,iBAAiB,sCAAsC;IAC3D,MAAM,wBAAwB,KAAK,iBAAiB,CAAC,CAAC,cAAc,QAAQ;IAC7E;AAQD,SAAM,iCAAiC,MAAM,CANhC;IACX,aAAa,cAAc;IAC3B,wBAAwB,cAAc;IACtC,iBAAiB,0BAA0B,qBAAqB,QAAQ;IACzE,CAEkD,CAAC;AACpD,cAAW;WACJC,GAAQ;AACf,eAAY,GAAG;IAAC;IAAsB;IAAe;IAAa,EAAE,KAAK,SAAS;;;AAItF,QACE,qBAAC;EAAc,aAAa;aACzB,wBAAwB,oBAAC,kBAAe,SAAS,iBAAiB,oCAAoC,GAAI,EAE3G,qBAAC,KAAK;GACJ,UAAU;GACV,QAAQ;;IAGR,oBAAC;KACC;KACA,eAAY;KACZ,IAAG;KACH,MAAK;KACL,OAAO,SAAS,eAAe,cAAc;KAC7C,OAAO,EAAE,SAAS,QAAQ;MAC1B;IACD,2BACC,oBAAC,KAAK;KAAW,WAAW,qBAAqB;eAC/C,oBAAC,KAAK;MACJ,GAAI,qBAAqB;MACzB,WAAW;MACX;MACA;MACA,YAAY;OACZ;MACc;IAEpB,oBAAC,KAAK;KAAW,WAAW,cAAc;eACxC,oBAAC,KAAK;MACJ,GAAI,cAAc;MAClB,WAAW;MACX;MACA,WAAW,CAAC,KAAK;MACjB,YAAY;OACZ;MACc;IAClB,oBAAC,KAAK;KAAW,WAAW,aAAa;eACvC,oBAAC,KAAK;MACJ,GAAI,aAAa;MACjB,WAAU,MAAK;AACb,WAAI,EAAE,OAAO,MACX,4BAA2B,EAAE,OAAO,MAAM;AAE5C,cAAO,aAAa,MAAM,SAAS,EAAE;;MAEvC;MACA,YAAY;OACZ;MACc;IAClB,oBAAC,KAAK;KAAW,WAAW,cAAc;eACxC,oBAAC,KAAK;MACJ,GAAI,cAAc;MAClB,aAAa,iBAAiB,oEAAoE;MAClG,YAAY;OACZ;MACc;IACjB,uBACC,oBAAC,iCACC,oBAAC,KAAK;KACJ,iBAAiB,iBAAiB,8BAA8B;KAChE,OAAO;KACP,SAAS;MACT,GACkB,GAEtB,oBAAC;KACC,YAAY,CAAC;KACJ;MACT;;IAEM;GACE;EAElB"}
+{"version":3,"file":"PasswordForm.js","names":["user","e: any"],"sources":["../../../src/components/UserProfile/PasswordForm.tsx"],"sourcesContent":["import { useReverification, useSession, useUser } from '@clerk/shared/react';\nimport type { UserResource } from '@clerk/shared/types';\nimport { useRef } from 'react';\n\nimport { useCardState, withCardStateProvider } from '@/ui/elements/contexts';\nimport { Form } from '@/ui/elements/Form';\nimport { FormButtonContainer, FormButtons } from '@/ui/elements/FormButtons';\nimport type { FormProps } from '@/ui/elements/FormContainer';\nimport { FormContainer } from '@/ui/elements/FormContainer';\nimport { InformationBox } from '@/ui/elements/InformationBox';\nimport type { SuccessPage } from '@/ui/elements/SuccessPage';\nimport { handleError } from '@/ui/utils/errorHandler';\nimport { createPasswordError } from '@/ui/utils/passwordUtils';\nimport { useFormControl } from '@/ui/utils/useFormControl';\n\nimport { useEnvironment } from '../../contexts';\nimport { localizationKeys, useLocalizations } from '../../customizables';\nimport { useConfirmPassword } from '../../hooks';\n\nconst generateSuccessPageText = (userHasPassword: boolean, sessionSignOut: boolean) => {\n  const localizedTexts = [];\n\n  if (userHasPassword) {\n    localizedTexts.push(localizationKeys('userProfile.passwordPage.successMessage__update'));\n  } else {\n    localizedTexts.push(localizationKeys('userProfile.passwordPage.successMessage__set'));\n  }\n\n  if (sessionSignOut) {\n    localizedTexts.push(localizationKeys('userProfile.passwordPage.successMessage__signOutOfOtherSessions'));\n  }\n\n  return localizedTexts;\n};\n\ntype PasswordFormProps = FormProps;\nexport const PasswordForm = withCardStateProvider((props: PasswordFormProps) => {\n  const { t, locale } = useLocalizations();\n  const { onSuccess, onReset } = props;\n  const { user } = useUser();\n  const updatePasswordWithReverification = useReverification(\n    (user: UserResource, opts: Parameters<UserResource['updatePassword']>) => user.updatePassword(...opts),\n  );\n\n  if (!user) {\n    return null;\n  }\n\n  const {\n    userSettings: { passwordSettings },\n    authConfig: { reverification },\n  } = useEnvironment();\n\n  const { session } = useSession();\n  const title = user.passwordEnabled\n    ? localizationKeys('userProfile.passwordPage.title__update')\n    : localizationKeys('userProfile.passwordPage.title__set');\n  const card = useCardState();\n\n  const passwordEditDisabled = user.enterpriseAccounts.some(ea => ea.active);\n  const currentPasswordRequired = user.passwordEnabled && !reverification;\n\n  // Ensure that messages will not use the updated state of User after a password has been set or changed\n  const successPagePropsRef = useRef<Parameters<typeof SuccessPage>[0]>({\n    title: localizationKeys('userProfile.passwordPage.title__set'),\n  });\n\n  const currentPasswordField = useFormControl('currentPassword', '', {\n    type: 'password',\n    label: localizationKeys('formFieldLabel__currentPassword'),\n    isRequired: true,\n  });\n\n  const passwordField = useFormControl('newPassword', '', {\n    type: 'password',\n    label: localizationKeys('formFieldLabel__newPassword'),\n    isRequired: true,\n    validatePassword: true,\n    buildErrorMessage: errors => createPasswordError(errors, { t, locale, passwordSettings }),\n  });\n\n  const confirmField = useFormControl('confirmPassword', '', {\n    type: 'password',\n    label: localizationKeys('formFieldLabel__confirmPassword'),\n    isRequired: true,\n  });\n\n  const sessionsField = useFormControl('signOutOfOtherSessions', '', {\n    type: 'checkbox',\n    label: localizationKeys('formFieldLabel__signOutOfOtherSessions'),\n    defaultChecked: true,\n  });\n\n  const { setConfirmPasswordFeedback, isPasswordMatch } = useConfirmPassword({\n    passwordField,\n    confirmPasswordField: confirmField,\n  });\n\n  const canSubmit =\n    (currentPasswordRequired ? currentPasswordField.value && isPasswordMatch : isPasswordMatch) &&\n    passwordField.value &&\n    confirmField.value;\n\n  const validateForm = () => {\n    if (passwordField.value) {\n      setConfirmPasswordFeedback(confirmField.value);\n    }\n  };\n\n  const updatePassword = async () => {\n    if (!canSubmit) {\n      return;\n    }\n\n    try {\n      successPagePropsRef.current = {\n        title: user.passwordEnabled\n          ? localizationKeys('userProfile.passwordPage.title__update')\n          : localizationKeys('userProfile.passwordPage.title__set'),\n        text: generateSuccessPageText(user.passwordEnabled, !!sessionsField.checked),\n      };\n\n      const opts = {\n        newPassword: passwordField.value,\n        signOutOfOtherSessions: sessionsField.checked,\n        currentPassword: currentPasswordRequired ? currentPasswordField.value : undefined,\n      } satisfies Parameters<typeof user.updatePassword>[0];\n\n      await updatePasswordWithReverification(user, [opts]);\n      onSuccess();\n    } catch (e: any) {\n      handleError(e, [currentPasswordField, passwordField, confirmField], card.setError);\n    }\n  };\n\n  return (\n    <FormContainer headerTitle={title}>\n      {passwordEditDisabled && <InformationBox message={localizationKeys('userProfile.passwordPage.readonly')} />}\n\n      <Form.Root\n        onSubmit={updatePassword}\n        onBlur={validateForm}\n      >\n        {/* For password managers */}\n        <input\n          readOnly\n          data-testid='hidden-identifier'\n          id='identifier-field'\n          name='identifier'\n          value={session?.publicUserData.identifier || ''}\n          style={{ display: 'none' }}\n        />\n        {currentPasswordRequired && (\n          <Form.ControlRow elementId={currentPasswordField.id}>\n            <Form.PasswordInput\n              {...currentPasswordField.props}\n              minLength={6}\n              isRequired\n              autoFocus\n              isDisabled={passwordEditDisabled}\n            />\n          </Form.ControlRow>\n        )}\n        <Form.ControlRow elementId={passwordField.id}>\n          <Form.PasswordInput\n            {...passwordField.props}\n            minLength={6}\n            isRequired\n            autoFocus={!user.passwordEnabled}\n            isDisabled={passwordEditDisabled}\n          />\n        </Form.ControlRow>\n        <Form.ControlRow elementId={confirmField.id}>\n          <Form.PasswordInput\n            {...confirmField.props}\n            onChange={e => {\n              if (e.target.value) {\n                setConfirmPasswordFeedback(e.target.value);\n              }\n              return confirmField.props.onChange(e);\n            }}\n            isRequired\n            isDisabled={passwordEditDisabled}\n          />\n        </Form.ControlRow>\n        <Form.ControlRow elementId={sessionsField.id}>\n          <Form.Checkbox\n            {...sessionsField.props}\n            description={localizationKeys('userProfile.passwordPage.checkboxInfoText__signOutOfOtherSessions')}\n            isDisabled={passwordEditDisabled}\n          />\n        </Form.ControlRow>\n        {passwordEditDisabled ? (\n          <FormButtonContainer>\n            <Form.ResetButton\n              localizationKey={localizationKeys('userProfile.formButtonReset')}\n              block={false}\n              onClick={onReset}\n            />\n          </FormButtonContainer>\n        ) : (\n          <FormButtons\n            isDisabled={!canSubmit}\n            onReset={onReset}\n          />\n        )}\n      </Form.Root>\n    </FormContainer>\n  );\n});\n"],"mappings":";;;;;;;;;;;;;;;;;AAmBA,MAAM,2BAA2B,iBAA0B,mBAA4B;CACrF,MAAM,iBAAiB,EAAE;AAEzB,KAAI,gBACF,gBAAe,KAAK,iBAAiB,kDAAkD,CAAC;KAExF,gBAAe,KAAK,iBAAiB,+CAA+C,CAAC;AAGvF,KAAI,eACF,gBAAe,KAAK,iBAAiB,kEAAkE,CAAC;AAG1G,QAAO;;AAIT,MAAa,eAAe,uBAAuB,UAA6B;CAC9E,MAAM,EAAE,GAAG,WAAW,kBAAkB;CACxC,MAAM,EAAE,WAAW,YAAY;CAC/B,MAAM,EAAE,SAAS,SAAS;CAC1B,MAAM,mCAAmC,mBACtC,QAAoB,SAAqDA,OAAK,eAAe,GAAG,KAAK,CACvG;AAED,KAAI,CAAC,KACH,QAAO;CAGT,MAAM,EACJ,cAAc,EAAE,oBAChB,YAAY,EAAE,qBACZ,gBAAgB;CAEpB,MAAM,EAAE,YAAY,YAAY;CAChC,MAAM,QAAQ,KAAK,kBACf,iBAAiB,yCAAyC,GAC1D,iBAAiB,sCAAsC;CAC3D,MAAM,OAAO,cAAc;CAE3B,MAAM,uBAAuB,KAAK,mBAAmB,MAAK,OAAM,GAAG,OAAO;CAC1E,MAAM,0BAA0B,KAAK,mBAAmB,CAAC;CAGzD,MAAM,sBAAsB,OAA0C,EACpE,OAAO,iBAAiB,sCAAsC,EAC/D,CAAC;CAEF,MAAM,uBAAuB,eAAe,mBAAmB,IAAI;EACjE,MAAM;EACN,OAAO,iBAAiB,kCAAkC;EAC1D,YAAY;EACb,CAAC;CAEF,MAAM,gBAAgB,eAAe,eAAe,IAAI;EACtD,MAAM;EACN,OAAO,iBAAiB,8BAA8B;EACtD,YAAY;EACZ,kBAAkB;EAClB,oBAAmB,WAAU,oBAAoB,QAAQ;GAAE;GAAG;GAAQ;GAAkB,CAAC;EAC1F,CAAC;CAEF,MAAM,eAAe,eAAe,mBAAmB,IAAI;EACzD,MAAM;EACN,OAAO,iBAAiB,kCAAkC;EAC1D,YAAY;EACb,CAAC;CAEF,MAAM,gBAAgB,eAAe,0BAA0B,IAAI;EACjE,MAAM;EACN,OAAO,iBAAiB,yCAAyC;EACjE,gBAAgB;EACjB,CAAC;CAEF,MAAM,EAAE,4BAA4B,oBAAoB,mBAAmB;EACzE;EACA,sBAAsB;EACvB,CAAC;CAEF,MAAM,aACH,0BAA0B,qBAAqB,SAAS,kBAAkB,oBAC3E,cAAc,SACd,aAAa;CAEf,MAAM,qBAAqB;AACzB,MAAI,cAAc,MAChB,4BAA2B,aAAa,MAAM;;CAIlD,MAAM,iBAAiB,YAAY;AACjC,MAAI,CAAC,UACH;AAGF,MAAI;AACF,uBAAoB,UAAU;IAC5B,OAAO,KAAK,kBACR,iBAAiB,yCAAyC,GAC1D,iBAAiB,sCAAsC;IAC3D,MAAM,wBAAwB,KAAK,iBAAiB,CAAC,CAAC,cAAc,QAAQ;IAC7E;AAQD,SAAM,iCAAiC,MAAM,CANhC;IACX,aAAa,cAAc;IAC3B,wBAAwB,cAAc;IACtC,iBAAiB,0BAA0B,qBAAqB,QAAQ;IACzE,CAEkD,CAAC;AACpD,cAAW;WACJC,GAAQ;AACf,eAAY,GAAG;IAAC;IAAsB;IAAe;IAAa,EAAE,KAAK,SAAS;;;AAItF,QACE,qBAAC;EAAc,aAAa;aACzB,wBAAwB,oBAAC,kBAAe,SAAS,iBAAiB,oCAAoC,GAAI,EAE3G,qBAAC,KAAK;GACJ,UAAU;GACV,QAAQ;;IAGR,oBAAC;KACC;KACA,eAAY;KACZ,IAAG;KACH,MAAK;KACL,OAAO,SAAS,eAAe,cAAc;KAC7C,OAAO,EAAE,SAAS,QAAQ;MAC1B;IACD,2BACC,oBAAC,KAAK;KAAW,WAAW,qBAAqB;eAC/C,oBAAC,KAAK;MACJ,GAAI,qBAAqB;MACzB,WAAW;MACX;MACA;MACA,YAAY;OACZ;MACc;IAEpB,oBAAC,KAAK;KAAW,WAAW,cAAc;eACxC,oBAAC,KAAK;MACJ,GAAI,cAAc;MAClB,WAAW;MACX;MACA,WAAW,CAAC,KAAK;MACjB,YAAY;OACZ;MACc;IAClB,oBAAC,KAAK;KAAW,WAAW,aAAa;eACvC,oBAAC,KAAK;MACJ,GAAI,aAAa;MACjB,WAAU,MAAK;AACb,WAAI,EAAE,OAAO,MACX,4BAA2B,EAAE,OAAO,MAAM;AAE5C,cAAO,aAAa,MAAM,SAAS,EAAE;;MAEvC;MACA,YAAY;OACZ;MACc;IAClB,oBAAC,KAAK;KAAW,WAAW,cAAc;eACxC,oBAAC,KAAK;MACJ,GAAI,cAAc;MAClB,aAAa,iBAAiB,oEAAoE;MAClG,YAAY;OACZ;MACc;IACjB,uBACC,oBAAC,iCACC,oBAAC,KAAK;KACJ,iBAAiB,iBAAiB,8BAA8B;KAChE,OAAO;KACP,SAAS;MACT,GACkB,GAEtB,oBAAC;KACC,YAAY,CAAC;KACJ;MACT;;IAEM;GACE;EAElB"}

package/dist/components/devPrompts/EnableOrganizationsPrompt/index.js

@@ -25,7 +25,7 @@ const EnableOrganizationsPromptInternal = ({ caller, onSuccess, onClose }) => {
 		setIsLoading(true);
 		const params = { enable_organizations: true };
 		if (hasPersonalAccountsEnabled) params.organization_allow_personal_accounts = allowPersonalAccount;
-		new DevTools().__internal_enableEnvironmentSetting(params).then(() => {
+		environment.__internal_enableEnvironmentSetting(params).then(() => {
 			setIsEnabled(true);
 			setIsLoading(false);
 		}).catch(() => {

package/dist/components/devPrompts/EnableOrganizationsPrompt/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["params: EnableEnvironmentSettingParams","frontFaceType: 'idle' | 'success'","backFaceType: 'warning' | 'success'"],"sources":["../../../../src/components/devPrompts/EnableOrganizationsPrompt/index.tsx"],"sourcesContent":["import { useClerk } from '@clerk/shared/react';\nimport type { __internal_EnableOrganizationsPromptProps, EnableEnvironmentSettingParams } from '@clerk/shared/types';\n// eslint-disable-next-line no-restricted-imports\nimport type { SerializedStyles } from '@emotion/react';\n// eslint-disable-next-line no-restricted-imports\nimport { css, type Theme } from '@emotion/react';\nimport { forwardRef, useId, useLayoutEffect, useRef, useState } from 'react';\n\nimport { useEnvironment } from '@/ui/contexts';\nimport { Modal } from '@/ui/elements/Modal';\nimport { common, InternalThemeProvider } from '@/ui/styledSystem';\n\nimport { Box, Flex, Span } from '../../../customizables';\nimport { Portal } from '../../../elements/Portal';\nimport { basePromptElementStyles, ClerkLogoIcon, PromptContainer, PromptSuccessIcon } from '../shared';\n\nconst organizationsDashboardUrl = 'https://dashboard.clerk.com/~/organizations-settings';\n\nconst EnableOrganizationsPromptInternal = ({\n  caller,\n  onSuccess,\n  onClose,\n}: __internal_EnableOrganizationsPromptProps) => {\n  const clerk = useClerk();\n  const [isLoading, setIsLoading] = useState(false);\n  const [isEnabled, setIsEnabled] = useState(false);\n  const [allowPersonalAccount, setAllowPersonalAccount] = useState(false);\n\n  const initialFocusRef = useRef<HTMLHeadingElement>(null);\n  const environment = useEnvironment();\n\n  const isComponent = !caller.startsWith('use');\n\n  // 'forceOrganizationSelection' is omitted from the environment settings object if the instance does not have it available as a feature\n  const hasPersonalAccountsEnabled =\n    typeof environment?.organizationSettings.forceOrganizationSelection !== 'undefined';\n\n  const handleEnableOrganizations = () => {\n    setIsLoading(true);\n\n    const params: EnableEnvironmentSettingParams = {\n      enable_organizations: true,\n    };\n\n    if (hasPersonalAccountsEnabled) {\n      params.organization_allow_personal_accounts = allowPersonalAccount;\n    }\n\n    void new DevTools()\n      .__internal_enableEnvironmentSetting(params)\n      .then(() => {\n        setIsEnabled(true);\n        setIsLoading(false);\n      })\n      .catch(() => {\n        setIsLoading(false);\n      });\n  };\n\n  return (\n    <Portal>\n      <Modal\n        canCloseModal={false}\n        containerSx={() => ({ alignItems: 'center' })}\n        initialFocusRef={initialFocusRef}\n      >\n        <PromptContainer\n          sx={() => ({\n            display: 'flex',\n            flexDirection: 'column',\n            width: '30rem',\n            maxWidth: 'calc(100vw - 2rem)',\n          })}\n        >\n          <Flex\n            direction='col'\n            sx={t => ({\n              padding: `${t.sizes.$4} ${t.sizes.$6}`,\n              paddingBottom: t.sizes.$4,\n              gap: t.sizes.$2,\n            })}\n          >\n            <Flex\n              as='header'\n              align='center'\n              sx={t => ({\n                gap: t.sizes.$2,\n              })}\n            >\n              <CoinFlip isEnabled={isEnabled} />\n\n              <h1\n                css={[\n                  basePromptElementStyles,\n                  css`\n                    color: white;\n                    font-size: 0.875rem;\n                    font-weight: 500;\n                    outline: none;\n                  `,\n                ]}\n                tabIndex={-1}\n                ref={initialFocusRef}\n              >\n                {isEnabled ? 'Organizations feature enabled' : 'Organizations feature required'}\n              </h1>\n            </Flex>\n\n            <Flex\n              direction='col'\n              align='start'\n              sx={t => ({\n                gap: t.sizes.$0x5,\n              })}\n            >\n              {isEnabled ? (\n                <p\n                  css={[\n                    basePromptElementStyles,\n                    css`\n                      color: #b4b4b4;\n                      font-size: 0.8125rem;\n                      font-weight: 400;\n                      line-height: 1.3;\n                    `,\n                  ]}\n                >\n                  {clerk.user\n                    ? `The Organizations feature has been enabled for your application. A default organization named \"My Organization\" was created automatically. You can manage or rename it in your`\n                    : `The Organizations feature has been enabled for your application. You can manage it in your`}{' '}\n                  <Link\n                    href={organizationsDashboardUrl}\n                    target='_blank'\n                    rel='noopener noreferrer'\n                  >\n                    dashboard\n                  </Link>\n                  .\n                </p>\n              ) : (\n                <>\n                  <p\n                    css={[\n                      basePromptElementStyles,\n                      css`\n                        color: #b4b4b4;\n                        font-size: 0.8125rem;\n                        font-weight: 400;\n                        line-height: 1.23;\n                      `,\n                    ]}\n                  >\n                    Enable Organizations to use{' '}\n                    <code\n                      css={[\n                        basePromptElementStyles,\n                        css`\n                          font-size: 0.75rem;\n                          color: white;\n                          font-family: monospace;\n                          line-height: 1.23;\n                        `,\n                      ]}\n                    >\n                      {isComponent ? `<${caller} />` : caller}\n                    </code>{' '}\n                  </p>\n\n                  <Link\n                    href='https://clerk.com/docs/guides/organizations/overview'\n                    target='_blank'\n                    rel='noopener noreferrer'\n                  >\n                    Learn more\n                  </Link>\n                </>\n              )}\n            </Flex>\n\n            {hasPersonalAccountsEnabled && (\n              <Box\n                sx={t => ({\n                  display: 'grid',\n                  gridTemplateRows: isEnabled ? '0fr' : '1fr',\n                  transition: `grid-template-rows ${t.transitionDuration.$slower} ${t.transitionTiming.$slowBezier}`,\n                  marginInline: '-0.5rem',\n                  overflow: 'hidden',\n                })}\n                {...(isEnabled && { inert: '' })}\n              >\n                <Flex\n                  sx={t => ({\n                    minHeight: 0,\n                    paddingInline: '0.5rem',\n                    opacity: isEnabled ? 0 : 1,\n                    transition: `opacity ${t.transitionDuration.$slower} ${t.transitionTiming.$slowBezier}`,\n                  })}\n                >\n                  <Flex sx={t => ({ marginTop: t.sizes.$2 })}>\n                    <Switch\n                      label='Allow personal account'\n                      description='Allow users to work outside of an organization by providing a personal account. We do not recommend for B2B SaaS apps.'\n                      checked={allowPersonalAccount}\n                      onChange={() => setAllowPersonalAccount(prev => !prev)}\n                    />\n                  </Flex>\n                </Flex>\n              </Box>\n            )}\n          </Flex>\n\n          <span\n            css={css`\n              height: 1px;\n              display: block;\n              width: calc(100% - 2px);\n              margin-inline: auto;\n              background-color: #151515;\n              box-shadow: 0px 1px 0px 0px #424242;\n            `}\n          />\n\n          <Flex\n            justify='center'\n            sx={t => ({\n              padding: `${t.sizes.$4} ${t.sizes.$6}`,\n              gap: t.sizes.$3,\n              justifyContent: 'flex-end',\n            })}\n          >\n            {isEnabled ? (\n              <PromptButton\n                variant='solid'\n                onClick={() => {\n                  if (!clerk.user) {\n                    void clerk.redirectToSignIn();\n                    clerk.__internal_closeEnableOrganizationsPrompt?.();\n                  } else {\n                    onSuccess?.();\n                  }\n                }}\n              >\n                {clerk.user ? 'Continue' : 'Sign in to continue'}\n              </PromptButton>\n            ) : (\n              <>\n                <PromptButton\n                  variant='outline'\n                  onClick={() => {\n                    clerk?.__internal_closeEnableOrganizationsPrompt?.();\n                    onClose?.();\n                  }}\n                >\n                  I&apos;ll remove it myself\n                </PromptButton>\n\n                <PromptButton\n                  variant='solid'\n                  onClick={handleEnableOrganizations}\n                  disabled={isLoading}\n                >\n                  Enable Organizations\n                </PromptButton>\n              </>\n            )}\n          </Flex>\n        </PromptContainer>\n      </Modal>\n    </Portal>\n  );\n};\n\n/**\n * A prompt that allows the user to enable the Organizations feature for their development instance\n * @internal\n */\nexport const EnableOrganizationsPrompt = (props: __internal_EnableOrganizationsPromptProps) => {\n  return (\n    <InternalThemeProvider>\n      <EnableOrganizationsPromptInternal {...props} />\n    </InternalThemeProvider>\n  );\n};\n\nconst baseButtonStyles = css`\n  ${basePromptElementStyles};\n  cursor: pointer;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  height: 1.75rem;\n  padding: 0.375rem 0.625rem;\n  border-radius: 0.375rem;\n  font-size: 0.75rem;\n  font-weight: 500;\n  letter-spacing: 0.12px;\n  color: white;\n  text-shadow: 0px 1px 2px rgba(0, 0, 0, 0.32);\n  white-space: nowrap;\n  user-select: none;\n  color: white;\n  outline: none;\n\n  &:not(:disabled) {\n    transition: 120ms ease-in-out;\n    transition-property: background-color, border-color, box-shadow, color;\n  }\n\n  &:disabled {\n    opacity: 0.6;\n    cursor: not-allowed;\n  }\n\n  &:focus-visible:not(:disabled) {\n    outline: 2px solid white;\n    outline-offset: 2px;\n  }\n`;\n\nconst buttonSolidStyles = css`\n  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 30.5%, rgba(0, 0, 0, 0.05) 100%), #454545;\n  box-shadow:\n    0 0 3px 0 rgba(253, 224, 71, 0) inset,\n    0 0 0 1px rgba(255, 255, 255, 0.04) inset,\n    0 1px 0 0 rgba(255, 255, 255, 0.04) inset,\n    0 0 0 1px rgba(0, 0, 0, 0.12),\n    0 1.5px 2px 0 rgba(0, 0, 0, 0.48);\n\n  &:hover:not(:disabled) {\n    background: linear-gradient(180deg, rgba(0, 0, 0, 0) 30.5%, rgba(0, 0, 0, 0.15) 100%), #5f5f5f;\n    box-shadow:\n      0 0 3px 0 rgba(253, 224, 71, 0) inset,\n      0 0 0 1px rgba(255, 255, 255, 0.04) inset,\n      0 1px 0 0 rgba(255, 255, 255, 0.04) inset,\n      0 0 0 1px rgba(0, 0, 0, 0.12),\n      0 1.5px 2px 0 rgba(0, 0, 0, 0.48);\n  }\n`;\n\nconst buttonOutlineStyles = css`\n  border: 1px solid rgba(118, 118, 132, 0.25);\n  background: rgba(69, 69, 69, 0.1);\n\n  &:hover:not(:disabled) {\n    border-color: rgba(118, 118, 132, 0.5);\n  }\n`;\n\nconst buttonVariantStyles = {\n  solid: buttonSolidStyles,\n  outline: buttonOutlineStyles,\n} as const;\n\ntype PromptButtonVariant = keyof typeof buttonVariantStyles;\n\ntype PromptButtonProps = Pick<React.ComponentProps<'button'>, 'onClick' | 'children' | 'disabled'> & {\n  variant?: PromptButtonVariant;\n};\n\nconst PromptButton = forwardRef<HTMLButtonElement, PromptButtonProps>(({ variant = 'solid', ...props }, ref) => {\n  return (\n    <button\n      ref={ref}\n      type='button'\n      css={[baseButtonStyles, buttonVariantStyles[variant]]}\n      {...props}\n    />\n  );\n});\n\ntype SwitchProps = React.ComponentProps<'input'> & {\n  label: string;\n  description?: string;\n};\n\nconst TRACK_PADDING = '2px';\nconst TRACK_INNER_WIDTH = (t: Theme) => t.sizes.$6;\nconst TRACK_HEIGHT = (t: Theme) => t.sizes.$4;\nconst THUMB_WIDTH = (t: Theme) => t.sizes.$3;\n\nconst Switch = forwardRef<HTMLInputElement, SwitchProps>(\n  ({ label, description, checked: controlledChecked, defaultChecked, onChange, ...props }, ref) => {\n    const descriptionId = useId();\n\n    const isControlled = controlledChecked !== undefined;\n    const [internalChecked, setInternalChecked] = useState(!!defaultChecked);\n    const checked = isControlled ? controlledChecked : internalChecked;\n\n    const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {\n      if (!isControlled) {\n        setInternalChecked(e.target.checked);\n      }\n      onChange?.(e);\n    };\n\n    return (\n      <Flex\n        direction='col'\n        gap={1}\n      >\n        <Flex\n          as='label'\n          gap={2}\n          align='center'\n          sx={{\n            isolation: 'isolate',\n            userSelect: 'none',\n            '&:has(input:focus-visible) > input + span': {\n              outline: '2px solid white',\n              outlineOffset: '2px',\n            },\n            '&:has(input:disabled) > input + span': {\n              opacity: 0.6,\n              cursor: 'not-allowed',\n              pointerEvents: 'none',\n            },\n          }}\n        >\n          <input\n            type='checkbox'\n            {...props}\n            ref={ref}\n            role='switch'\n            {...(isControlled ? { checked } : { defaultChecked })}\n            onChange={handleChange}\n            css={{ ...common.visuallyHidden() }}\n            aria-describedby={description ? descriptionId : undefined}\n          />\n          <Span\n            sx={t => {\n              const trackWidth = `calc(${TRACK_INNER_WIDTH(t)} + ${TRACK_PADDING} + ${TRACK_PADDING})`;\n              const trackHeight = `calc(${TRACK_HEIGHT(t)} + ${TRACK_PADDING})`;\n              return {\n                display: 'flex',\n                alignItems: 'center',\n                paddingInline: TRACK_PADDING,\n                width: trackWidth,\n                height: trackHeight,\n                border: '1px solid rgba(255, 255, 255, 0.2)',\n                backgroundColor: checked ? '#6C47FF' : 'rgba(0, 0, 0, 0.2)',\n                borderRadius: 999,\n                transition: 'background-color 0.2s ease-in-out',\n              };\n            }}\n          >\n            <Span\n              sx={t => {\n                const size = THUMB_WIDTH(t);\n                const maxTranslateX = `calc(${TRACK_INNER_WIDTH(t)} - ${size} - ${TRACK_PADDING})`;\n                return {\n                  width: size,\n                  height: size,\n                  borderRadius: 9999,\n                  backgroundColor: 'white',\n                  boxShadow: '0px 0px 0px 1px rgba(0, 0, 0, 0.1)',\n                  transform: `translateX(${checked ? maxTranslateX : '0'})`,\n                  transition: 'transform 0.2s ease-in-out',\n                  '@media (prefers-reduced-motion: reduce)': {\n                    transition: 'none',\n                  },\n                };\n              }}\n            />\n          </Span>\n          <span\n            css={[\n              basePromptElementStyles,\n              css`\n                font-size: 0.875rem;\n                font-weight: 500;\n                line-height: 1.25;\n                color: white;\n              `,\n            ]}\n          >\n            {label}\n          </span>\n        </Flex>\n        {description ? (\n          <Span\n            id={descriptionId}\n            sx={t => [\n              basePromptElementStyles,\n              {\n                display: 'block',\n                paddingInlineStart: `calc(${TRACK_INNER_WIDTH(t)} + ${TRACK_PADDING} + ${TRACK_PADDING} + ${t.sizes.$2})`,\n                fontSize: '0.75rem',\n                lineHeight: '1.3333333333',\n                color: '#c3c3c6',\n                textWrap: 'pretty',\n              },\n            ]}\n          >\n            {description}\n          </Span>\n        ) : null}\n      </Flex>\n    );\n  },\n);\n\nconst Link = forwardRef<HTMLAnchorElement, React.ComponentProps<'a'> & { css?: SerializedStyles }>(\n  ({ children, css: cssProp, ...props }, ref) => {\n    return (\n      <a\n        ref={ref}\n        {...props}\n        css={[\n          basePromptElementStyles,\n          css`\n            color: #a8a8ff;\n            font-size: inherit;\n            font-weight: 500;\n            line-height: 1.3;\n            font-size: 0.8125rem;\n            min-width: 0;\n          `,\n          cssProp,\n        ]}\n      >\n        {children}\n      </a>\n    );\n  },\n);\n\nconst CoinFlip = ({ isEnabled }: { isEnabled: boolean }) => {\n  const [rotation, setRotation] = useState(0);\n\n  useLayoutEffect(() => {\n    if (isEnabled) {\n      setRotation(r => (r === 0 ? 180 : 0));\n      return;\n    }\n\n    const interval = setInterval(() => {\n      setRotation(r => (r === 0 ? 180 : 0));\n    }, 2000);\n\n    return () => clearInterval(interval);\n  }, [isEnabled]);\n\n  let frontFaceType: 'idle' | 'success' = 'idle';\n  let backFaceType: 'warning' | 'success' = 'warning';\n\n  if (isEnabled) {\n    if (rotation === 0) {\n      frontFaceType = 'success';\n      backFaceType = 'warning';\n    } else {\n      backFaceType = 'success';\n      frontFaceType = 'idle';\n    }\n  }\n\n  const renderContent = (type: 'idle' | 'warning' | 'success') => {\n    switch (type) {\n      case 'idle':\n        return <ClerkLogoIcon />;\n      case 'success':\n        return (\n          <PromptSuccessIcon\n            css={css`\n              width: 1.25rem;\n              height: 1.25rem;\n            `}\n          />\n        );\n      case 'warning':\n        return (\n          <svg\n            css={css`\n              width: 1.25rem;\n              height: 1.25rem;\n            `}\n            viewBox='0 0 20 20'\n            fill='none'\n            xmlns='http://www.w3.org/2000/svg'\n          >\n            <path\n              opacity='0.2'\n              d='M17.25 10C17.25 14.0041 14.0041 17.25 10 17.25C5.99594 17.25 2.75 14.0041 2.75 10C2.75 5.99594 5.99594 2.75 10 2.75C14.0041 2.75 17.25 5.99594 17.25 10Z'\n              fill='#EAB308'\n            />\n            <path\n              fillRule='evenodd'\n              clipRule='evenodd'\n              d='M10 3.5C6.41015 3.5 3.5 6.41015 3.5 10C3.5 13.5899 6.41015 16.5 10 16.5C13.5899 16.5 16.5 13.5899 16.5 10C16.5 6.41015 13.5899 3.5 10 3.5ZM2 10C2 5.58172 5.58172 2 10 2C14.4183 2 18 5.58172 18 10C18 14.4183 14.4183 18 10 18C5.58172 18 2 14.4183 2 10Z'\n              fill='#EAB308'\n            />\n            <path\n              fillRule='evenodd'\n              clipRule='evenodd'\n              d='M10 6C10.5523 6 11 6.44772 11 7V9C11 9.55228 10.5523 10 10 10C9.44772 10 9 9.55228 9 9V7C9 6.44772 9.44772 6 10 6Z'\n              fill='#EAB308'\n            />\n            <path\n              fillRule='evenodd'\n              clipRule='evenodd'\n              d='M10 12C10.5523 12 11 12.4477 11 13V13.01C11 13.5623 10.5523 14.01 10 14.01C9.44772 14.01 9 13.5623 9 13.01V13C9 12.4477 9.44772 12 10 12Z'\n              fill='#EAB308'\n            />\n          </svg>\n        );\n    }\n  };\n\n  return (\n    <div\n      css={css`\n        perspective: 1000px;\n        width: 1.25rem;\n        height: 1.25rem;\n      `}\n    >\n      <div\n        css={css`\n          position: relative;\n          width: 100%;\n          height: 100%;\n          transform-style: preserve-3d;\n          transition: transform 0.6s ease-in-out;\n          transform: rotateY(${rotation}deg);\n\n          @media (prefers-reduced-motion: reduce) {\n            transition: none;\n          }\n        `}\n      >\n        <span\n          aria-hidden\n          css={css`\n            position: absolute;\n            width: 100%;\n            height: 100%;\n            backface-visibility: hidden;\n            display: flex;\n            align-items: center;\n            justify-content: center;\n            -webkit-font-smoothing: antialiased;\n            transform: rotateY(0deg);\n          `}\n        >\n          {renderContent(frontFaceType)}\n        </span>\n\n        <span\n          aria-hidden\n          css={css`\n            position: absolute;\n            width: 100%;\n            height: 100%;\n            backface-visibility: hidden;\n            transform: rotateY(180deg);\n            display: flex;\n            align-items: center;\n            justify-content: center;\n            -webkit-font-smoothing: antialiased;\n          `}\n        >\n          {renderContent(backFaceType)}\n        </span>\n      </div>\n    </div>\n  );\n};\n"],"mappings":"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"}
+{"version":3,"file":"index.js","names":["params: EnableEnvironmentSettingParams","frontFaceType: 'idle' | 'success'","backFaceType: 'warning' | 'success'"],"sources":["../../../../src/components/devPrompts/EnableOrganizationsPrompt/index.tsx"],"sourcesContent":["import { useClerk } from '@clerk/shared/react';\nimport type { __internal_EnableOrganizationsPromptProps, EnableEnvironmentSettingParams } from '@clerk/shared/types';\n// eslint-disable-next-line no-restricted-imports\nimport type { SerializedStyles } from '@emotion/react';\n// eslint-disable-next-line no-restricted-imports\nimport { css, type Theme } from '@emotion/react';\nimport { forwardRef, useId, useLayoutEffect, useRef, useState } from 'react';\n\nimport { useEnvironment } from '@/ui/contexts';\nimport { Modal } from '@/ui/elements/Modal';\nimport { common, InternalThemeProvider } from '@/ui/styledSystem';\n\nimport { Box, Flex, Span } from '../../../customizables';\nimport { Portal } from '../../../elements/Portal';\nimport { basePromptElementStyles, ClerkLogoIcon, PromptContainer, PromptSuccessIcon } from '../shared';\n\nconst organizationsDashboardUrl = 'https://dashboard.clerk.com/~/organizations-settings';\n\nconst EnableOrganizationsPromptInternal = ({\n  caller,\n  onSuccess,\n  onClose,\n}: __internal_EnableOrganizationsPromptProps) => {\n  const clerk = useClerk();\n  const [isLoading, setIsLoading] = useState(false);\n  const [isEnabled, setIsEnabled] = useState(false);\n  const [allowPersonalAccount, setAllowPersonalAccount] = useState(false);\n\n  const initialFocusRef = useRef<HTMLHeadingElement>(null);\n  const environment = useEnvironment();\n\n  const isComponent = !caller.startsWith('use');\n\n  // 'forceOrganizationSelection' is omitted from the environment settings object if the instance does not have it available as a feature\n  const hasPersonalAccountsEnabled =\n    typeof environment?.organizationSettings.forceOrganizationSelection !== 'undefined';\n\n  const handleEnableOrganizations = () => {\n    setIsLoading(true);\n\n    const params: EnableEnvironmentSettingParams = {\n      enable_organizations: true,\n    };\n\n    if (hasPersonalAccountsEnabled) {\n      params.organization_allow_personal_accounts = allowPersonalAccount;\n    }\n\n    void environment\n      .__internal_enableEnvironmentSetting(params)\n      .then(() => {\n        setIsEnabled(true);\n        setIsLoading(false);\n      })\n      .catch(() => {\n        setIsLoading(false);\n      });\n  };\n\n  return (\n    <Portal>\n      <Modal\n        canCloseModal={false}\n        containerSx={() => ({ alignItems: 'center' })}\n        initialFocusRef={initialFocusRef}\n      >\n        <PromptContainer\n          sx={() => ({\n            display: 'flex',\n            flexDirection: 'column',\n            width: '30rem',\n            maxWidth: 'calc(100vw - 2rem)',\n          })}\n        >\n          <Flex\n            direction='col'\n            sx={t => ({\n              padding: `${t.sizes.$4} ${t.sizes.$6}`,\n              paddingBottom: t.sizes.$4,\n              gap: t.sizes.$2,\n            })}\n          >\n            <Flex\n              as='header'\n              align='center'\n              sx={t => ({\n                gap: t.sizes.$2,\n              })}\n            >\n              <CoinFlip isEnabled={isEnabled} />\n\n              <h1\n                css={[\n                  basePromptElementStyles,\n                  css`\n                    color: white;\n                    font-size: 0.875rem;\n                    font-weight: 500;\n                    outline: none;\n                  `,\n                ]}\n                tabIndex={-1}\n                ref={initialFocusRef}\n              >\n                {isEnabled ? 'Organizations feature enabled' : 'Organizations feature required'}\n              </h1>\n            </Flex>\n\n            <Flex\n              direction='col'\n              align='start'\n              sx={t => ({\n                gap: t.sizes.$0x5,\n              })}\n            >\n              {isEnabled ? (\n                <p\n                  css={[\n                    basePromptElementStyles,\n                    css`\n                      color: #b4b4b4;\n                      font-size: 0.8125rem;\n                      font-weight: 400;\n                      line-height: 1.3;\n                    `,\n                  ]}\n                >\n                  {clerk.user\n                    ? `The Organizations feature has been enabled for your application. A default organization named \"My Organization\" was created automatically. You can manage or rename it in your`\n                    : `The Organizations feature has been enabled for your application. You can manage it in your`}{' '}\n                  <Link\n                    href={organizationsDashboardUrl}\n                    target='_blank'\n                    rel='noopener noreferrer'\n                  >\n                    dashboard\n                  </Link>\n                  .\n                </p>\n              ) : (\n                <>\n                  <p\n                    css={[\n                      basePromptElementStyles,\n                      css`\n                        color: #b4b4b4;\n                        font-size: 0.8125rem;\n                        font-weight: 400;\n                        line-height: 1.23;\n                      `,\n                    ]}\n                  >\n                    Enable Organizations to use{' '}\n                    <code\n                      css={[\n                        basePromptElementStyles,\n                        css`\n                          font-size: 0.75rem;\n                          color: white;\n                          font-family: monospace;\n                          line-height: 1.23;\n                        `,\n                      ]}\n                    >\n                      {isComponent ? `<${caller} />` : caller}\n                    </code>{' '}\n                  </p>\n\n                  <Link\n                    href='https://clerk.com/docs/guides/organizations/overview'\n                    target='_blank'\n                    rel='noopener noreferrer'\n                  >\n                    Learn more\n                  </Link>\n                </>\n              )}\n            </Flex>\n\n            {hasPersonalAccountsEnabled && (\n              <Box\n                sx={t => ({\n                  display: 'grid',\n                  gridTemplateRows: isEnabled ? '0fr' : '1fr',\n                  transition: `grid-template-rows ${t.transitionDuration.$slower} ${t.transitionTiming.$slowBezier}`,\n                  marginInline: '-0.5rem',\n                  overflow: 'hidden',\n                })}\n                {...(isEnabled && { inert: '' })}\n              >\n                <Flex\n                  sx={t => ({\n                    minHeight: 0,\n                    paddingInline: '0.5rem',\n                    opacity: isEnabled ? 0 : 1,\n                    transition: `opacity ${t.transitionDuration.$slower} ${t.transitionTiming.$slowBezier}`,\n                  })}\n                >\n                  <Flex sx={t => ({ marginTop: t.sizes.$2 })}>\n                    <Switch\n                      label='Allow personal account'\n                      description='Allow users to work outside of an organization by providing a personal account. We do not recommend for B2B SaaS apps.'\n                      checked={allowPersonalAccount}\n                      onChange={() => setAllowPersonalAccount(prev => !prev)}\n                    />\n                  </Flex>\n                </Flex>\n              </Box>\n            )}\n          </Flex>\n\n          <span\n            css={css`\n              height: 1px;\n              display: block;\n              width: calc(100% - 2px);\n              margin-inline: auto;\n              background-color: #151515;\n              box-shadow: 0px 1px 0px 0px #424242;\n            `}\n          />\n\n          <Flex\n            justify='center'\n            sx={t => ({\n              padding: `${t.sizes.$4} ${t.sizes.$6}`,\n              gap: t.sizes.$3,\n              justifyContent: 'flex-end',\n            })}\n          >\n            {isEnabled ? (\n              <PromptButton\n                variant='solid'\n                onClick={() => {\n                  if (!clerk.user) {\n                    void clerk.redirectToSignIn();\n                    clerk.__internal_closeEnableOrganizationsPrompt?.();\n                  } else {\n                    onSuccess?.();\n                  }\n                }}\n              >\n                {clerk.user ? 'Continue' : 'Sign in to continue'}\n              </PromptButton>\n            ) : (\n              <>\n                <PromptButton\n                  variant='outline'\n                  onClick={() => {\n                    clerk?.__internal_closeEnableOrganizationsPrompt?.();\n                    onClose?.();\n                  }}\n                >\n                  I&apos;ll remove it myself\n                </PromptButton>\n\n                <PromptButton\n                  variant='solid'\n                  onClick={handleEnableOrganizations}\n                  disabled={isLoading}\n                >\n                  Enable Organizations\n                </PromptButton>\n              </>\n            )}\n          </Flex>\n        </PromptContainer>\n      </Modal>\n    </Portal>\n  );\n};\n\n/**\n * A prompt that allows the user to enable the Organizations feature for their development instance\n * @internal\n */\nexport const EnableOrganizationsPrompt = (props: __internal_EnableOrganizationsPromptProps) => {\n  return (\n    <InternalThemeProvider>\n      <EnableOrganizationsPromptInternal {...props} />\n    </InternalThemeProvider>\n  );\n};\n\nconst baseButtonStyles = css`\n  ${basePromptElementStyles};\n  cursor: pointer;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  height: 1.75rem;\n  padding: 0.375rem 0.625rem;\n  border-radius: 0.375rem;\n  font-size: 0.75rem;\n  font-weight: 500;\n  letter-spacing: 0.12px;\n  color: white;\n  text-shadow: 0px 1px 2px rgba(0, 0, 0, 0.32);\n  white-space: nowrap;\n  user-select: none;\n  color: white;\n  outline: none;\n\n  &:not(:disabled) {\n    transition: 120ms ease-in-out;\n    transition-property: background-color, border-color, box-shadow, color;\n  }\n\n  &:disabled {\n    opacity: 0.6;\n    cursor: not-allowed;\n  }\n\n  &:focus-visible:not(:disabled) {\n    outline: 2px solid white;\n    outline-offset: 2px;\n  }\n`;\n\nconst buttonSolidStyles = css`\n  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 30.5%, rgba(0, 0, 0, 0.05) 100%), #454545;\n  box-shadow:\n    0 0 3px 0 rgba(253, 224, 71, 0) inset,\n    0 0 0 1px rgba(255, 255, 255, 0.04) inset,\n    0 1px 0 0 rgba(255, 255, 255, 0.04) inset,\n    0 0 0 1px rgba(0, 0, 0, 0.12),\n    0 1.5px 2px 0 rgba(0, 0, 0, 0.48);\n\n  &:hover:not(:disabled) {\n    background: linear-gradient(180deg, rgba(0, 0, 0, 0) 30.5%, rgba(0, 0, 0, 0.15) 100%), #5f5f5f;\n    box-shadow:\n      0 0 3px 0 rgba(253, 224, 71, 0) inset,\n      0 0 0 1px rgba(255, 255, 255, 0.04) inset,\n      0 1px 0 0 rgba(255, 255, 255, 0.04) inset,\n      0 0 0 1px rgba(0, 0, 0, 0.12),\n      0 1.5px 2px 0 rgba(0, 0, 0, 0.48);\n  }\n`;\n\nconst buttonOutlineStyles = css`\n  border: 1px solid rgba(118, 118, 132, 0.25);\n  background: rgba(69, 69, 69, 0.1);\n\n  &:hover:not(:disabled) {\n    border-color: rgba(118, 118, 132, 0.5);\n  }\n`;\n\nconst buttonVariantStyles = {\n  solid: buttonSolidStyles,\n  outline: buttonOutlineStyles,\n} as const;\n\ntype PromptButtonVariant = keyof typeof buttonVariantStyles;\n\ntype PromptButtonProps = Pick<React.ComponentProps<'button'>, 'onClick' | 'children' | 'disabled'> & {\n  variant?: PromptButtonVariant;\n};\n\nconst PromptButton = forwardRef<HTMLButtonElement, PromptButtonProps>(({ variant = 'solid', ...props }, ref) => {\n  return (\n    <button\n      ref={ref}\n      type='button'\n      css={[baseButtonStyles, buttonVariantStyles[variant]]}\n      {...props}\n    />\n  );\n});\n\ntype SwitchProps = React.ComponentProps<'input'> & {\n  label: string;\n  description?: string;\n};\n\nconst TRACK_PADDING = '2px';\nconst TRACK_INNER_WIDTH = (t: Theme) => t.sizes.$6;\nconst TRACK_HEIGHT = (t: Theme) => t.sizes.$4;\nconst THUMB_WIDTH = (t: Theme) => t.sizes.$3;\n\nconst Switch = forwardRef<HTMLInputElement, SwitchProps>(\n  ({ label, description, checked: controlledChecked, defaultChecked, onChange, ...props }, ref) => {\n    const descriptionId = useId();\n\n    const isControlled = controlledChecked !== undefined;\n    const [internalChecked, setInternalChecked] = useState(!!defaultChecked);\n    const checked = isControlled ? controlledChecked : internalChecked;\n\n    const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {\n      if (!isControlled) {\n        setInternalChecked(e.target.checked);\n      }\n      onChange?.(e);\n    };\n\n    return (\n      <Flex\n        direction='col'\n        gap={1}\n      >\n        <Flex\n          as='label'\n          gap={2}\n          align='center'\n          sx={{\n            isolation: 'isolate',\n            userSelect: 'none',\n            '&:has(input:focus-visible) > input + span': {\n              outline: '2px solid white',\n              outlineOffset: '2px',\n            },\n            '&:has(input:disabled) > input + span': {\n              opacity: 0.6,\n              cursor: 'not-allowed',\n              pointerEvents: 'none',\n            },\n          }}\n        >\n          <input\n            type='checkbox'\n            {...props}\n            ref={ref}\n            role='switch'\n            {...(isControlled ? { checked } : { defaultChecked })}\n            onChange={handleChange}\n            css={{ ...common.visuallyHidden() }}\n            aria-describedby={description ? descriptionId : undefined}\n          />\n          <Span\n            sx={t => {\n              const trackWidth = `calc(${TRACK_INNER_WIDTH(t)} + ${TRACK_PADDING} + ${TRACK_PADDING})`;\n              const trackHeight = `calc(${TRACK_HEIGHT(t)} + ${TRACK_PADDING})`;\n              return {\n                display: 'flex',\n                alignItems: 'center',\n                paddingInline: TRACK_PADDING,\n                width: trackWidth,\n                height: trackHeight,\n                border: '1px solid rgba(255, 255, 255, 0.2)',\n                backgroundColor: checked ? '#6C47FF' : 'rgba(0, 0, 0, 0.2)',\n                borderRadius: 999,\n                transition: 'background-color 0.2s ease-in-out',\n              };\n            }}\n          >\n            <Span\n              sx={t => {\n                const size = THUMB_WIDTH(t);\n                const maxTranslateX = `calc(${TRACK_INNER_WIDTH(t)} - ${size} - ${TRACK_PADDING})`;\n                return {\n                  width: size,\n                  height: size,\n                  borderRadius: 9999,\n                  backgroundColor: 'white',\n                  boxShadow: '0px 0px 0px 1px rgba(0, 0, 0, 0.1)',\n                  transform: `translateX(${checked ? maxTranslateX : '0'})`,\n                  transition: 'transform 0.2s ease-in-out',\n                  '@media (prefers-reduced-motion: reduce)': {\n                    transition: 'none',\n                  },\n                };\n              }}\n            />\n          </Span>\n          <span\n            css={[\n              basePromptElementStyles,\n              css`\n                font-size: 0.875rem;\n                font-weight: 500;\n                line-height: 1.25;\n                color: white;\n              `,\n            ]}\n          >\n            {label}\n          </span>\n        </Flex>\n        {description ? (\n          <Span\n            id={descriptionId}\n            sx={t => [\n              basePromptElementStyles,\n              {\n                display: 'block',\n                paddingInlineStart: `calc(${TRACK_INNER_WIDTH(t)} + ${TRACK_PADDING} + ${TRACK_PADDING} + ${t.sizes.$2})`,\n                fontSize: '0.75rem',\n                lineHeight: '1.3333333333',\n                color: '#c3c3c6',\n                textWrap: 'pretty',\n              },\n            ]}\n          >\n            {description}\n          </Span>\n        ) : null}\n      </Flex>\n    );\n  },\n);\n\nconst Link = forwardRef<HTMLAnchorElement, React.ComponentProps<'a'> & { css?: SerializedStyles }>(\n  ({ children, css: cssProp, ...props }, ref) => {\n    return (\n      <a\n        ref={ref}\n        {...props}\n        css={[\n          basePromptElementStyles,\n          css`\n            color: #a8a8ff;\n            font-size: inherit;\n            font-weight: 500;\n            line-height: 1.3;\n            font-size: 0.8125rem;\n            min-width: 0;\n          `,\n          cssProp,\n        ]}\n      >\n        {children}\n      </a>\n    );\n  },\n);\n\nconst CoinFlip = ({ isEnabled }: { isEnabled: boolean }) => {\n  const [rotation, setRotation] = useState(0);\n\n  useLayoutEffect(() => {\n    if (isEnabled) {\n      setRotation(r => (r === 0 ? 180 : 0));\n      return;\n    }\n\n    const interval = setInterval(() => {\n      setRotation(r => (r === 0 ? 180 : 0));\n    }, 2000);\n\n    return () => clearInterval(interval);\n  }, [isEnabled]);\n\n  let frontFaceType: 'idle' | 'success' = 'idle';\n  let backFaceType: 'warning' | 'success' = 'warning';\n\n  if (isEnabled) {\n    if (rotation === 0) {\n      frontFaceType = 'success';\n      backFaceType = 'warning';\n    } else {\n      backFaceType = 'success';\n      frontFaceType = 'idle';\n    }\n  }\n\n  const renderContent = (type: 'idle' | 'warning' | 'success') => {\n    switch (type) {\n      case 'idle':\n        return <ClerkLogoIcon />;\n      case 'success':\n        return (\n          <PromptSuccessIcon\n            css={css`\n              width: 1.25rem;\n              height: 1.25rem;\n            `}\n          />\n        );\n      case 'warning':\n        return (\n          <svg\n            css={css`\n              width: 1.25rem;\n              height: 1.25rem;\n            `}\n            viewBox='0 0 20 20'\n            fill='none'\n            xmlns='http://www.w3.org/2000/svg'\n          >\n            <path\n              opacity='0.2'\n              d='M17.25 10C17.25 14.0041 14.0041 17.25 10 17.25C5.99594 17.25 2.75 14.0041 2.75 10C2.75 5.99594 5.99594 2.75 10 2.75C14.0041 2.75 17.25 5.99594 17.25 10Z'\n              fill='#EAB308'\n            />\n            <path\n              fillRule='evenodd'\n              clipRule='evenodd'\n              d='M10 3.5C6.41015 3.5 3.5 6.41015 3.5 10C3.5 13.5899 6.41015 16.5 10 16.5C13.5899 16.5 16.5 13.5899 16.5 10C16.5 6.41015 13.5899 3.5 10 3.5ZM2 10C2 5.58172 5.58172 2 10 2C14.4183 2 18 5.58172 18 10C18 14.4183 14.4183 18 10 18C5.58172 18 2 14.4183 2 10Z'\n              fill='#EAB308'\n            />\n            <path\n              fillRule='evenodd'\n              clipRule='evenodd'\n              d='M10 6C10.5523 6 11 6.44772 11 7V9C11 9.55228 10.5523 10 10 10C9.44772 10 9 9.55228 9 9V7C9 6.44772 9.44772 6 10 6Z'\n              fill='#EAB308'\n            />\n            <path\n              fillRule='evenodd'\n              clipRule='evenodd'\n              d='M10 12C10.5523 12 11 12.4477 11 13V13.01C11 13.5623 10.5523 14.01 10 14.01C9.44772 14.01 9 13.5623 9 13.01V13C9 12.4477 9.44772 12 10 12Z'\n              fill='#EAB308'\n            />\n          </svg>\n        );\n    }\n  };\n\n  return (\n    <div\n      css={css`\n        perspective: 1000px;\n        width: 1.25rem;\n        height: 1.25rem;\n      `}\n    >\n      <div\n        css={css`\n          position: relative;\n          width: 100%;\n          height: 100%;\n          transform-style: preserve-3d;\n          transition: transform 0.6s ease-in-out;\n          transform: rotateY(${rotation}deg);\n\n          @media (prefers-reduced-motion: reduce) {\n            transition: none;\n          }\n        `}\n      >\n        <span\n          aria-hidden\n          css={css`\n            position: absolute;\n            width: 100%;\n            height: 100%;\n            backface-visibility: hidden;\n            display: flex;\n            align-items: center;\n            justify-content: center;\n            -webkit-font-smoothing: antialiased;\n            transform: rotateY(0deg);\n          `}\n        >\n          {renderContent(frontFaceType)}\n        </span>\n\n        <span\n          aria-hidden\n          css={css`\n            position: absolute;\n            width: 100%;\n            height: 100%;\n            backface-visibility: hidden;\n            transform: rotateY(180deg);\n            display: flex;\n            align-items: center;\n            justify-content: center;\n            -webkit-font-smoothing: antialiased;\n          `}\n        >\n          {renderContent(backFaceType)}\n        </span>\n      </div>\n    </div>\n  );\n};\n"],"mappings":"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"}

package/dist/{createorganization_ui_30c3ec_1.0.0-snapshot.v20251204175016.js → createorganization_ui_a492c4_1.0.0-snapshot.v20251211120550.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(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}}}}]);
+"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(5543),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(5543),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/AppearanceContext.js

@@ -8,7 +8,11 @@ const [AppearanceContext, useAppearance] = createContextAndHook("AppearanceConte
 const AppearanceProvider = (props) => {
 	const ctxValue = useDeepEqualMemo(() => {
 		return { value: parseAppearance(props) };
-	}, [props.appearance, props.globalAppearance]);
+	}, [
+		props.appearance,
+		props.globalAppearance,
+		props.appearanceKey
+	]);
 	return /* @__PURE__ */ jsx(AppearanceContext.Provider, {
 		value: ctxValue,
 		children: props.children

package/dist/customizables/AppearanceContext.js.map

@@ -1 +1 @@
-{"version":3,"file":"AppearanceContext.js","names":[],"sources":["../../src/customizables/AppearanceContext.tsx"],"sourcesContent":["import { createContextAndHook, useDeepEqualMemo } from '@clerk/shared/react';\nimport React from 'react';\n\nimport type { AppearanceCascade, ParsedAppearance } from './parseAppearance';\nimport { parseAppearance } from './parseAppearance';\n\ntype AppearanceContextValue = ParsedAppearance;\n\nconst [AppearanceContext, useAppearance] = createContextAndHook<AppearanceContextValue>('AppearanceContext');\n\ntype AppearanceProviderProps = React.PropsWithChildren<AppearanceCascade>;\n\nconst AppearanceProvider = (props: AppearanceProviderProps) => {\n  const ctxValue = useDeepEqualMemo(() => {\n    const value = parseAppearance(props);\n\n    return { value };\n  }, [props.appearance, props.globalAppearance]);\n\n  return <AppearanceContext.Provider value={ctxValue}>{props.children}</AppearanceContext.Provider>;\n};\n\nexport { AppearanceProvider, useAppearance };\n"],"mappings":";;;;;;AAQA,MAAM,CAAC,mBAAmB,iBAAiB,qBAA6C,oBAAoB;AAI5G,MAAM,sBAAsB,UAAmC;CAC7D,MAAM,WAAW,uBAAuB;AAGtC,SAAO,EAAE,OAFK,gBAAgB,MAAM,EAEpB;IACf,CAAC,MAAM,YAAY,MAAM,iBAAiB,CAAC;AAE9C,QAAO,oBAAC,kBAAkB;EAAS,OAAO;YAAW,MAAM;GAAsC"}
+{"version":3,"file":"AppearanceContext.js","names":[],"sources":["../../src/customizables/AppearanceContext.tsx"],"sourcesContent":["import { createContextAndHook, useDeepEqualMemo } from '@clerk/shared/react';\nimport React from 'react';\n\nimport type { AppearanceCascade, ParsedAppearance } from './parseAppearance';\nimport { parseAppearance } from './parseAppearance';\n\ntype AppearanceContextValue = ParsedAppearance;\n\nconst [AppearanceContext, useAppearance] = createContextAndHook<AppearanceContextValue>('AppearanceContext');\n\ntype AppearanceProviderProps = React.PropsWithChildren<AppearanceCascade>;\n\nconst AppearanceProvider = (props: AppearanceProviderProps) => {\n  const ctxValue = useDeepEqualMemo(() => {\n    const value = parseAppearance(props);\n    return { value };\n  }, [props.appearance, props.globalAppearance, props.appearanceKey]);\n\n  return <AppearanceContext.Provider value={ctxValue}>{props.children}</AppearanceContext.Provider>;\n};\n\nexport { AppearanceProvider, useAppearance };\n"],"mappings":";;;;;;AAQA,MAAM,CAAC,mBAAmB,iBAAiB,qBAA6C,oBAAoB;AAI5G,MAAM,sBAAsB,UAAmC;CAC7D,MAAM,WAAW,uBAAuB;AAEtC,SAAO,EAAE,OADK,gBAAgB,MAAM,EACpB;IACf;EAAC,MAAM;EAAY,MAAM;EAAkB,MAAM;EAAc,CAAC;AAEnE,QAAO,oBAAC,kBAAkB;EAAS,OAAO;YAAW,MAAM;GAAsC"}

package/dist/customizables/parseAppearance.js

@@ -5,7 +5,7 @@ import { createColorScales, createFontSizeScale, createFontWeightScale, createFo
 import { fastDeepMergeAndReplace } from "@clerk/shared/utils";
 
 //#region src/customizables/parseAppearance.ts
-const defaultLayout = {
+const defaultOptions = {
 	logoPlacement: "inside",
 	socialButtonsPlacement: "top",
 	socialButtonsVariant: "auto",
@@ -40,7 +40,7 @@ const parseAppearance = (cascade) => {
 		componentAppearance
 	].forEach((a) => expand(a, appearanceList));
 	const parsedInternalTheme = parseVariables(appearanceList);
-	const parsedLayout = parseLayout(appearanceList);
+	const parsedOptions = parseOptions(appearanceList);
 	const parsedCaptcha = parseCaptcha(appearanceList);
 	if (!appearanceList.find((a) => {
 		return !!a.simpleStyles;
@@ -53,7 +53,7 @@ const parseAppearance = (cascade) => {
 			return res;
 		})),
 		parsedInternalTheme,
-		parsedLayout,
+		parsedOptions,
 		parsedCaptcha
 	};
 };
@@ -69,12 +69,12 @@ const expand = (theme, cascade) => {
 const parseElements = (appearances) => {
 	return appearances.map((appearance) => ({ ...appearance?.elements }));
 };
-const parseLayout = (appearanceList) => {
+const parseOptions = (appearanceList) => {
 	return {
-		...defaultLayout,
+		...defaultOptions,
 		...appearanceList.reduce((acc, appearance) => ({
 			...acc,
-			...appearance.layout
+			...appearance.options
 		}), {})
 	};
 };

package/dist/customizables/parseAppearance.js.map

@@ -1 +1 @@
-{"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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"}
+{"version":3,"file":"parseAppearance.js","names":["defaultOptions: ParsedOptions","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, Options, 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 ParsedOptions = Required<Options>;\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  parsedOptions: ParsedOptions;\n  parsedCaptcha: ParsedCaptcha;\n};\n\nconst defaultOptions: ParsedOptions = {\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 parsedOptions = parseOptions(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, parsedOptions, 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 parseOptions = (appearanceList: Appearance[]) => {\n  return { ...defaultOptions, ...appearanceList.reduce((acc, appearance) => ({ ...acc, ...appearance.options }), {}) };\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/elements/Animated.js

@@ -6,7 +6,7 @@ import { useAutoAnimate } from "@formkit/auto-animate/react";
 //#region src/elements/Animated.tsx
 const Animated = (props) => {
 	const { children, asChild } = props;
-	const { animations } = useAppearance().parsedLayout;
+	const { animations } = useAppearance().parsedOptions;
 	const [parent] = useAutoAnimate();
 	if (asChild) return cloneElement(children, { ref: animations ? parent : null });
 	return /* @__PURE__ */ jsx("div", {

package/dist/elements/Animated.js.map

@@ -1 +1 @@
-{"version":3,"file":"Animated.js","names":[],"sources":["../../src/elements/Animated.tsx"],"sourcesContent":["import { useAutoAnimate } from '@formkit/auto-animate/react';\nimport { cloneElement, type PropsWithChildren } from 'react';\n\nimport { useAppearance } from '@/customizables';\n\ntype AnimatedProps = PropsWithChildren<{ asChild?: boolean }>;\n\nexport const Animated = (props: AnimatedProps) => {\n  const { children, asChild } = props;\n  const { animations } = useAppearance().parsedLayout;\n  const [parent] = useAutoAnimate();\n\n  if (asChild) {\n    return cloneElement(children as any, { ref: animations ? parent : null });\n  }\n\n  return <div ref={animations ? parent : null}>{children}</div>;\n};\n"],"mappings":";;;;;;AAOA,MAAa,YAAY,UAAyB;CAChD,MAAM,EAAE,UAAU,YAAY;CAC9B,MAAM,EAAE,eAAe,eAAe,CAAC;CACvC,MAAM,CAAC,UAAU,gBAAgB;AAEjC,KAAI,QACF,QAAO,aAAa,UAAiB,EAAE,KAAK,aAAa,SAAS,MAAM,CAAC;AAG3E,QAAO,oBAAC;EAAI,KAAK,aAAa,SAAS;EAAO;GAAe"}
+{"version":3,"file":"Animated.js","names":[],"sources":["../../src/elements/Animated.tsx"],"sourcesContent":["import { useAutoAnimate } from '@formkit/auto-animate/react';\nimport { cloneElement, type PropsWithChildren } from 'react';\n\nimport { useAppearance } from '@/customizables';\n\ntype AnimatedProps = PropsWithChildren<{ asChild?: boolean }>;\n\nexport const Animated = (props: AnimatedProps) => {\n  const { children, asChild } = props;\n  const { animations } = useAppearance().parsedOptions;\n  const [parent] = useAutoAnimate();\n\n  if (asChild) {\n    return cloneElement(children as any, { ref: animations ? parent : null });\n  }\n\n  return <div ref={animations ? parent : null}>{children}</div>;\n};\n"],"mappings":";;;;;;AAOA,MAAa,YAAY,UAAyB;CAChD,MAAM,EAAE,UAAU,YAAY;CAC9B,MAAM,EAAE,eAAe,eAAe,CAAC;CACvC,MAAM,CAAC,UAAU,gBAAgB;AAEjC,KAAI,QACF,QAAO,aAAa,UAAiB,EAAE,KAAK,aAAa,SAAS,MAAM,CAAC;AAG3E,QAAO,oBAAC;EAAI,KAAK,aAAa,SAAS;EAAO;GAAe"}

package/dist/elements/ApplicationLogo.js

@@ -20,10 +20,10 @@ const ApplicationLogo = (props) => {
 	const imageRef = React.useRef(null);
 	const [loaded, setLoaded] = React.useState(false);
 	const { logoImageUrl, applicationName, homeUrl } = useEnvironment().displayConfig;
-	const { parsedLayout } = useAppearance();
-	const imageSrc = src || parsedLayout.logoImageUrl || logoImageUrl;
+	const { parsedOptions } = useAppearance();
+	const imageSrc = src || parsedOptions.logoImageUrl || logoImageUrl;
 	const imageAlt = alt || applicationName;
-	const logoUrl = href || parsedLayout.logoLinkUrl || homeUrl;
+	const logoUrl = href || parsedOptions.logoLinkUrl || homeUrl;
 	if (!imageSrc) return null;
 	const image = /* @__PURE__ */ jsx(Image, {
 		ref: imageRef,

package/dist/elements/ApplicationLogo.js.map

@@ -1 +1 @@
-{"version":3,"file":"ApplicationLogo.js","names":["ApplicationLogo: React.FC<ApplicationLogoProps>"],"sources":["../../src/elements/ApplicationLogo.tsx"],"sourcesContent":["import React from 'react';\n\nimport { useEnvironment } from '../contexts';\nimport { descriptors, Flex, Image, useAppearance } from '../customizables';\nimport { Link } from '../primitives';\nimport type { PropsOfComponent } from '../styledSystem';\nimport { RouterLink } from './RouterLink';\n\nconst getContainerHeightForImageRatio = (imageRef: React.RefObject<HTMLImageElement>, width: string) => {\n  if (!imageRef.current) {\n    return `calc(${width} * 2)`;\n  }\n  const ratio = imageRef.current.naturalWidth / imageRef.current.naturalHeight;\n\n  if (ratio <= 1) {\n    // logo is taller than it is wide\n    return `calc(${width} * 2)`;\n  } else if (ratio > 1 && ratio <= 2) {\n    // logo is up to 2x wider than it is tall\n    return `calc((${width} * 2) / ${ratio})`;\n  }\n  return width;\n};\n\nexport type ApplicationLogoProps = PropsOfComponent<typeof Flex> & {\n  /**\n   * The URL of the image to display.\n   */\n  src?: string;\n  /**\n   * The alt text for the image.\n   */\n  alt?: string;\n  /**\n   * The URL to navigate to when the logo is clicked.\n   */\n  href?: string;\n  /**\n   * Whether the href should be treated as an external link.\n   * When true, uses a Link component with target=\"_blank\" and proper security attributes.\n   * When false or undefined, uses RouterLink for internal navigation.\n   */\n  isExternal?: boolean;\n};\n\nexport const ApplicationLogo: React.FC<ApplicationLogoProps> = (props: ApplicationLogoProps): JSX.Element | null => {\n  const { src, alt, href, isExternal, sx, ...rest } = props;\n  const imageRef = React.useRef<HTMLImageElement>(null);\n  const [loaded, setLoaded] = React.useState(false);\n  const { logoImageUrl, applicationName, homeUrl } = useEnvironment().displayConfig;\n  const { parsedLayout } = useAppearance();\n  const imageSrc = src || parsedLayout.logoImageUrl || logoImageUrl;\n  const imageAlt = alt || applicationName;\n  const logoUrl = href || parsedLayout.logoLinkUrl || homeUrl;\n\n  if (!imageSrc) {\n    return null;\n  }\n\n  const image = (\n    <Image\n      ref={imageRef}\n      elementDescriptor={descriptors.logoImage}\n      alt={imageAlt}\n      src={imageSrc}\n      size={200}\n      onLoad={() => setLoaded(true)}\n      sx={{\n        display: loaded ? 'inline-block' : 'none',\n        height: '100%',\n        width: '100%',\n        objectFit: 'contain',\n      }}\n    />\n  );\n\n  return (\n    <Flex\n      elementDescriptor={descriptors.logoBox}\n      {...rest}\n      sx={[\n        theme => ({\n          height: getContainerHeightForImageRatio(imageRef, theme.sizes.$6),\n          justifyContent: 'center',\n        }),\n        sx,\n      ]}\n    >\n      {logoUrl ? (\n        isExternal ? (\n          <Link\n            focusRing\n            href={logoUrl}\n            isExternal\n          >\n            {image}\n          </Link>\n        ) : (\n          <RouterLink\n            focusRing\n            to={logoUrl}\n          >\n            {image}\n          </RouterLink>\n        )\n      ) : (\n        image\n      )}\n    </Flex>\n  );\n};\n"],"mappings":";;;;;;;;;;AAQA,MAAM,mCAAmC,UAA6C,UAAkB;AACtG,KAAI,CAAC,SAAS,QACZ,QAAO,QAAQ,MAAM;CAEvB,MAAM,QAAQ,SAAS,QAAQ,eAAe,SAAS,QAAQ;AAE/D,KAAI,SAAS,EAEX,QAAO,QAAQ,MAAM;UACZ,QAAQ,KAAK,SAAS,EAE/B,QAAO,SAAS,MAAM,UAAU,MAAM;AAExC,QAAO;;AAwBT,MAAaA,mBAAmD,UAAoD;CAClH,MAAM,EAAE,KAAK,KAAK,MAAM,YAAY,GAAI,GAAG,SAAS;CACpD,MAAM,WAAW,MAAM,OAAyB,KAAK;CACrD,MAAM,CAAC,QAAQ,aAAa,MAAM,SAAS,MAAM;CACjD,MAAM,EAAE,cAAc,iBAAiB,YAAY,gBAAgB,CAAC;CACpE,MAAM,EAAE,iBAAiB,eAAe;CACxC,MAAM,WAAW,OAAO,aAAa,gBAAgB;CACrD,MAAM,WAAW,OAAO;CACxB,MAAM,UAAU,QAAQ,aAAa,eAAe;AAEpD,KAAI,CAAC,SACH,QAAO;CAGT,MAAM,QACJ,oBAAC;EACC,KAAK;EACL,mBAAmB,YAAY;EAC/B,KAAK;EACL,KAAK;EACL,MAAM;EACN,cAAc,UAAU,KAAK;EAC7B,IAAI;GACF,SAAS,SAAS,iBAAiB;GACnC,QAAQ;GACR,OAAO;GACP,WAAW;GACZ;GACD;AAGJ,QACE,oBAAC;EACC,mBAAmB,YAAY;EAC/B,GAAI;EACJ,IAAI,EACF,WAAU;GACR,QAAQ,gCAAgC,UAAU,MAAM,MAAM,GAAG;GACjE,gBAAgB;GACjB,GACD,GACD;YAEA,UACC,aACE,oBAAC;GACC;GACA,MAAM;GACN;aAEC;IACI,GAEP,oBAAC;GACC;GACA,IAAI;aAEH;IACU,GAGf;GAEG"}
+{"version":3,"file":"ApplicationLogo.js","names":["ApplicationLogo: React.FC<ApplicationLogoProps>"],"sources":["../../src/elements/ApplicationLogo.tsx"],"sourcesContent":["import React from 'react';\n\nimport { useEnvironment } from '../contexts';\nimport { descriptors, Flex, Image, useAppearance } from '../customizables';\nimport { Link } from '../primitives';\nimport type { PropsOfComponent } from '../styledSystem';\nimport { RouterLink } from './RouterLink';\n\nconst getContainerHeightForImageRatio = (imageRef: React.RefObject<HTMLImageElement>, width: string) => {\n  if (!imageRef.current) {\n    return `calc(${width} * 2)`;\n  }\n  const ratio = imageRef.current.naturalWidth / imageRef.current.naturalHeight;\n\n  if (ratio <= 1) {\n    // logo is taller than it is wide\n    return `calc(${width} * 2)`;\n  } else if (ratio > 1 && ratio <= 2) {\n    // logo is up to 2x wider than it is tall\n    return `calc((${width} * 2) / ${ratio})`;\n  }\n  return width;\n};\n\nexport type ApplicationLogoProps = PropsOfComponent<typeof Flex> & {\n  /**\n   * The URL of the image to display.\n   */\n  src?: string;\n  /**\n   * The alt text for the image.\n   */\n  alt?: string;\n  /**\n   * The URL to navigate to when the logo is clicked.\n   */\n  href?: string;\n  /**\n   * Whether the href should be treated as an external link.\n   * When true, uses a Link component with target=\"_blank\" and proper security attributes.\n   * When false or undefined, uses RouterLink for internal navigation.\n   */\n  isExternal?: boolean;\n};\n\nexport const ApplicationLogo: React.FC<ApplicationLogoProps> = (props: ApplicationLogoProps): JSX.Element | null => {\n  const { src, alt, href, isExternal, sx, ...rest } = props;\n  const imageRef = React.useRef<HTMLImageElement>(null);\n  const [loaded, setLoaded] = React.useState(false);\n  const { logoImageUrl, applicationName, homeUrl } = useEnvironment().displayConfig;\n  const { parsedOptions } = useAppearance();\n  const imageSrc = src || parsedOptions.logoImageUrl || logoImageUrl;\n  const imageAlt = alt || applicationName;\n  const logoUrl = href || parsedOptions.logoLinkUrl || homeUrl;\n\n  if (!imageSrc) {\n    return null;\n  }\n\n  const image = (\n    <Image\n      ref={imageRef}\n      elementDescriptor={descriptors.logoImage}\n      alt={imageAlt}\n      src={imageSrc}\n      size={200}\n      onLoad={() => setLoaded(true)}\n      sx={{\n        display: loaded ? 'inline-block' : 'none',\n        height: '100%',\n        width: '100%',\n        objectFit: 'contain',\n      }}\n    />\n  );\n\n  return (\n    <Flex\n      elementDescriptor={descriptors.logoBox}\n      {...rest}\n      sx={[\n        theme => ({\n          height: getContainerHeightForImageRatio(imageRef, theme.sizes.$6),\n          justifyContent: 'center',\n        }),\n        sx,\n      ]}\n    >\n      {logoUrl ? (\n        isExternal ? (\n          <Link\n            focusRing\n            href={logoUrl}\n            isExternal\n          >\n            {image}\n          </Link>\n        ) : (\n          <RouterLink\n            focusRing\n            to={logoUrl}\n          >\n            {image}\n          </RouterLink>\n        )\n      ) : (\n        image\n      )}\n    </Flex>\n  );\n};\n"],"mappings":";;;;;;;;;;AAQA,MAAM,mCAAmC,UAA6C,UAAkB;AACtG,KAAI,CAAC,SAAS,QACZ,QAAO,QAAQ,MAAM;CAEvB,MAAM,QAAQ,SAAS,QAAQ,eAAe,SAAS,QAAQ;AAE/D,KAAI,SAAS,EAEX,QAAO,QAAQ,MAAM;UACZ,QAAQ,KAAK,SAAS,EAE/B,QAAO,SAAS,MAAM,UAAU,MAAM;AAExC,QAAO;;AAwBT,MAAaA,mBAAmD,UAAoD;CAClH,MAAM,EAAE,KAAK,KAAK,MAAM,YAAY,GAAI,GAAG,SAAS;CACpD,MAAM,WAAW,MAAM,OAAyB,KAAK;CACrD,MAAM,CAAC,QAAQ,aAAa,MAAM,SAAS,MAAM;CACjD,MAAM,EAAE,cAAc,iBAAiB,YAAY,gBAAgB,CAAC;CACpE,MAAM,EAAE,kBAAkB,eAAe;CACzC,MAAM,WAAW,OAAO,cAAc,gBAAgB;CACtD,MAAM,WAAW,OAAO;CACxB,MAAM,UAAU,QAAQ,cAAc,eAAe;AAErD,KAAI,CAAC,SACH,QAAO;CAGT,MAAM,QACJ,oBAAC;EACC,KAAK;EACL,mBAAmB,YAAY;EAC/B,KAAK;EACL,KAAK;EACL,MAAM;EACN,cAAc,UAAU,KAAK;EAC7B,IAAI;GACF,SAAS,SAAS,iBAAiB;GACnC,QAAQ;GACR,OAAO;GACP,WAAW;GACZ;GACD;AAGJ,QACE,oBAAC;EACC,mBAAmB,YAAY;EAC/B,GAAI;EACJ,IAAI,EACF,WAAU;GACR,QAAQ,gCAAgC,UAAU,MAAM,MAAM,GAAG;GACjE,gBAAgB;GACjB,GACD,GACD;YAEA,UACC,aACE,oBAAC;GACC;GACA,MAAM;GACN;aAEC;IACI,GAEP,oBAAC;GACC;GACA,IAAI;aAEH;IACU,GAGf;GAEG"}

package/dist/elements/AvatarUploader.js

@@ -1,4 +1,5 @@
 import { localizationKeys } from "../localization/localizationKeys.js";
+import { useLocalizations } from "../localization/makeLocalizable.js";
 import { descriptors } from "../customizables/elementDescriptors.js";
 import { useCardState } from "./contexts/index.js";
 import { Button, Col, Flex, SimpleButton, Text } from "../customizables/index.js";
@@ -24,8 +25,8 @@ const SUPPORTED_MIME_TYPES = Object.freeze([
 ]);
 const validType = (f) => SUPPORTED_MIME_TYPES.includes(f.type);
 const validSize = (f) => f.size <= MAX_SIZE_BYTES;
-const validFile = (f) => validType(f) && validSize(f);
 const AvatarUploader = (props) => {
+	const { t } = useLocalizations();
 	const [showUpload, setShowUpload] = React.useState(false);
 	const [objectUrl, setObjectUrl] = React.useState();
 	const card = useCardState();
@@ -50,7 +51,16 @@ const AvatarUploader = (props) => {
 		return onAvatarRemove?.();
 	};
 	const upload = async (f) => {
-		if (f && validFile(f)) await handleFileDrop(f);
+		if (!f) return;
+		if (!validType(f)) {
+			card.setError(t(localizationKeys("unstable__errors.avatar_file_type_invalid")));
+			return;
+		}
+		if (!validSize(f)) {
+			card.setError(t(localizationKeys("unstable__errors.avatar_file_size_exceeded")));
+			return;
+		}
+		await handleFileDrop(f);
 	};
 	const previewElement = objectUrl ? React.cloneElement(avatarPreview, { imageUrl: objectUrl }) : avatarPreviewPlaceholder ? React.cloneElement(avatarPreviewPlaceholder, { onClick: openDialog }) : avatarPreview;
 	return /* @__PURE__ */ jsxs(Col, {
@@ -81,7 +91,7 @@ const AvatarUploader = (props) => {
 						elementDescriptor: descriptors.avatarImageActionsRemove,
 						localizationKey: localizationKeys("userProfile.profilePage.imageFormDestructiveActionSubtitle"),
 						isDisabled: card.isLoading,
-						sx: (t) => ({ color: t.colors.$danger500 }),
+						sx: (t$1) => ({ color: t$1.colors.$danger500 }),
 						variant: "ghost",
 						colorScheme: "danger",
 						onClick: handleRemove,
@@ -89,7 +99,7 @@ const AvatarUploader = (props) => {
 					})]
 				}), /* @__PURE__ */ jsx(Text, {
 					colorScheme: "secondary",
-					sx: (t) => ({ fontSize: t.fontSizes.$sm }),
+					sx: (t$1) => ({ fontSize: t$1.fontSizes.$sm }),
 					localizationKey: localizationKeys("userProfile.profilePage.fileDropAreaHint")
 				})]
 			})]