@clerk/ui 1.0.0-snapshot.v20251208202852 → 1.0.0-snapshot.v20251215203425

package/dist/components/UserProfile/EmailForm.js

@@ -11,8 +11,8 @@ import { VerifyWithCode } from "./VerifyWithCode.js";
 import { VerifyWithEnterpriseConnection } from "./VerifyWithEnterpriseConnection.js";
 import { VerifyWithLink } from "./VerifyWithLink.js";
 import React from "react";
-import { jsx, jsxs } from "@emotion/react/jsx-runtime";
 import { useReverification, useUser } from "@clerk/shared/react";
+import { jsx, jsxs } from "@emotion/react/jsx-runtime";
 
 //#region src/components/UserProfile/EmailForm.tsx
 const EmailForm = withCardStateProvider((props) => {

package/dist/components/UserProfile/EmailsSection.js

@@ -10,8 +10,8 @@ import { ProfileSection } from "../../elements/Section.js";
 import { RemoveEmailForm } from "./RemoveResourceForm.js";
 import { sortIdentificationBasedOnVerification } from "./utils.js";
 import { Fragment } from "react";
-import { Fragment as Fragment$1, jsx, jsxs } from "@emotion/react/jsx-runtime";
 import { useReverification, useUser } from "@clerk/shared/react";
+import { Fragment as Fragment$1, jsx, jsxs } from "@emotion/react/jsx-runtime";
 
 //#region src/components/UserProfile/EmailsSection.tsx
 const RemoveEmailScreen = (props) => {

package/dist/components/UserProfile/EnterpriseAccountsSection.js

@@ -3,8 +3,8 @@ import { descriptors } from "../../customizables/elementDescriptors.js";
 import { Badge, Box, Flex, Image, Text } from "../../customizables/index.js";
 import { ProviderInitialIcon } from "../../common/ProviderInitialIcon.js";
 import { ProfileSection } from "../../elements/Section.js";
-import { jsx, jsxs } from "@emotion/react/jsx-runtime";
 import { useUser } from "@clerk/shared/react";
+import { jsx, jsxs } from "@emotion/react/jsx-runtime";
 
 //#region src/components/UserProfile/EnterpriseAccountsSection.tsx
 const EnterpriseAccountsSection = () => {

package/dist/components/UserProfile/MfaBackupCodeCreateForm.js

@@ -8,9 +8,9 @@ import { FormContainer } from "../../elements/FormContainer.js";
 import { FullHeightLoader } from "../../elements/FullHeightLoader.js";
 import { MfaBackupCodeList } from "./MfaBackupCodeList.js";
 import React from "react";
+import { useReverification, useUser } from "@clerk/shared/react";
 import { Fragment as Fragment$1, jsx, jsxs } from "@emotion/react/jsx-runtime";
 import { isReverificationCancelledError } from "@clerk/shared/error";
-import { useReverification, useUser } from "@clerk/shared/react";
 
 //#region src/components/UserProfile/MfaBackupCodeCreateForm.tsx
 const MfaBackupCodeCreateForm = withCardStateProvider((props) => {

package/dist/components/UserProfile/MfaBackupCodeList.js

@@ -8,8 +8,8 @@ import print_default from "../../icons/print.js";
 import { Box, Button, Col, Grid, Heading, Icon, Text } from "../../customizables/index.js";
 import { PrintableComponent, usePrintable } from "../../common/PrintableComponent.js";
 import { MfaBackupCodeTile } from "./MfaBackupCodeTile.js";
-import { Fragment, jsx, jsxs } from "@emotion/react/jsx-runtime";
 import { useUser } from "@clerk/shared/react";
+import { Fragment, jsx, jsxs } from "@emotion/react/jsx-runtime";
 import { getIdentifier } from "@clerk/shared/internal/clerk-js/user";
 
 //#region src/components/UserProfile/MfaBackupCodeList.tsx

package/dist/components/UserProfile/MfaForm.js

@@ -7,8 +7,8 @@ import { MfaBackupCodeScreen } from "./MfaBackupCodeScreen.js";
 import { MfaPhoneCodeScreen } from "./MfaPhoneCodeScreen.js";
 import { MfaTOTPScreen } from "./MfaTOTPScreen.js";
 import React from "react";
-import { jsx } from "@emotion/react/jsx-runtime";
 import { useUser } from "@clerk/shared/react";
+import { jsx } from "@emotion/react/jsx-runtime";
 
 //#region src/components/UserProfile/MfaForm.tsx
 const MfaForm = withCardStateProvider((props) => {

package/dist/components/UserProfile/MfaPhoneCodeScreen.js

@@ -14,8 +14,8 @@ import { SuccessPage } from "../../elements/SuccessPage.js";
 import { AddPhone } from "./PhoneForm.js";
 import { MfaBackupCodeList } from "./MfaBackupCodeList.js";
 import React from "react";
-import { jsx, jsxs } from "@emotion/react/jsx-runtime";
 import { useReverification, useUser } from "@clerk/shared/react";
+import { jsx, jsxs } from "@emotion/react/jsx-runtime";
 
 //#region src/components/UserProfile/MfaPhoneCodeScreen.tsx
 const MfaPhoneCodeScreen = withCardStateProvider((props) => {

package/dist/components/UserProfile/MfaSection.js

@@ -14,8 +14,8 @@ import { defaultFirst, getSecondFactors, getSecondFactorsAvailableToAdd } from "
 import { FormattedPhoneNumberText } from "../../elements/FormattedPhoneNumber.js";
 import { MfaBackupCodeCreateScreen, MfaScreen, RemoveMfaPhoneCodeScreen, RemoveMfaTOTPScreen } from "./MfaScreens.js";
 import React, { Fragment, useState } from "react";
-import { Fragment as Fragment$1, jsx, jsxs } from "@emotion/react/jsx-runtime";
 import { useUser } from "@clerk/shared/react";
+import { Fragment as Fragment$1, jsx, jsxs } from "@emotion/react/jsx-runtime";
 
 //#region src/components/UserProfile/MfaSection.tsx
 const MfaSection = () => {

package/dist/components/UserProfile/PasskeySection.js

@@ -15,8 +15,8 @@ import { ProfileSection } from "../../elements/Section.js";
 import { RemovePasskeyForm } from "./RemoveResourceForm.js";
 import { getRelativeToNowDateKey } from "../../utils/getRelativeToNowDateKey.js";
 import React, { Fragment, useState } from "react";
-import { jsx, jsxs } from "@emotion/react/jsx-runtime";
 import { useClerk, useReverification, useUser } from "@clerk/shared/react";
+import { jsx, jsxs } from "@emotion/react/jsx-runtime";
 
 //#region src/components/UserProfile/PasskeySection.tsx
 const RemovePasskeyScreen = (props) => {

package/dist/components/UserProfile/PasswordForm.js

@@ -11,8 +11,8 @@ import { FormButtonContainer, FormButtons } from "../../elements/FormButtons.js"
 import { FormContainer } from "../../elements/FormContainer.js";
 import { InformationBox } from "../../elements/InformationBox.js";
 import { useRef } from "react";
-import { jsx, jsxs } from "@emotion/react/jsx-runtime";
 import { useReverification, useSession, useUser } from "@clerk/shared/react";
+import { jsx, jsxs } from "@emotion/react/jsx-runtime";
 
 //#region src/components/UserProfile/PasswordForm.tsx
 const generateSuccessPageText = (userHasPassword, sessionSignOut) => {
@@ -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":"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"}
+{"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":"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"}

package/dist/components/UserProfile/PasswordSection.js

@@ -4,8 +4,8 @@ import { useActionContext } from "../../elements/Action/ActionRoot.js";
 import { Action } from "../../elements/Action/index.js";
 import { ProfileSection } from "../../elements/Section.js";
 import { PasswordForm } from "./PasswordForm.js";
-import { jsx, jsxs } from "@emotion/react/jsx-runtime";
 import { useUser } from "@clerk/shared/react";
+import { jsx, jsxs } from "@emotion/react/jsx-runtime";
 
 //#region src/components/UserProfile/PasswordSection.tsx
 const PasswordScreen = () => {

package/dist/components/UserProfile/PhoneForm.js

@@ -9,8 +9,8 @@ import { FormContainer } from "../../elements/FormContainer.js";
 import { Wizard, useWizard } from "../../common/Wizard.js";
 import { VerifyWithCode } from "./VerifyWithCode.js";
 import React from "react";
-import { jsx, jsxs } from "@emotion/react/jsx-runtime";
 import { useReverification, useUser } from "@clerk/shared/react";
+import { jsx, jsxs } from "@emotion/react/jsx-runtime";
 
 //#region src/components/UserProfile/PhoneForm.tsx
 const PhoneForm = withCardStateProvider((props) => {

package/dist/components/UserProfile/PhoneSection.js

@@ -11,8 +11,8 @@ import { RemovePhoneForm } from "./RemoveResourceForm.js";
 import { sortIdentificationBasedOnVerification } from "./utils.js";
 import { PhoneForm } from "./PhoneForm.js";
 import { Fragment } from "react";
-import { Fragment as Fragment$1, jsx, jsxs } from "@emotion/react/jsx-runtime";
 import { useReverification, useUser } from "@clerk/shared/react";
+import { Fragment as Fragment$1, jsx, jsxs } from "@emotion/react/jsx-runtime";
 
 //#region src/components/UserProfile/PhoneSection.tsx
 const RemovePhoneScreen = (props) => {

package/dist/components/UserProfile/ProfileForm.js

@@ -10,8 +10,8 @@ import { isDefaultImage } from "../../utils/image.js";
 import { InformationBox } from "../../elements/InformationBox.js";
 import { UserProfileAvatarUploader } from "./UserProfileAvatarUploader.js";
 import React from "react";
-import { jsx, jsxs } from "@emotion/react/jsx-runtime";
 import { useUser } from "@clerk/shared/react";
+import { jsx, jsxs } from "@emotion/react/jsx-runtime";
 
 //#region src/components/UserProfile/ProfileForm.tsx
 const ProfileForm = withCardStateProvider((props) => {

package/dist/components/UserProfile/RemoveResourceForm.js

@@ -2,8 +2,8 @@ import { useEnabledThirdPartyProviders } from "../../hooks/useEnabledThirdPartyP
 import { localizationKeys } from "../../localization/localizationKeys.js";
 import { RemoveResourceForm } from "../../common/RemoveResourceForm.js";
 import React from "react";
-import { jsx } from "@emotion/react/jsx-runtime";
 import { useUser } from "@clerk/shared/react";
+import { jsx } from "@emotion/react/jsx-runtime";
 
 //#region src/components/UserProfile/RemoveResourceForm.tsx
 const RemoveEmailForm = (props) => {

package/dist/components/UserProfile/SecurityPage.js

@@ -12,8 +12,8 @@ import { DeleteSection } from "./DeleteSection.js";
 import { MfaSection } from "./MfaSection.js";
 import { PasskeySection } from "./PasskeySection.js";
 import { PasswordSection } from "./PasswordSection.js";
-import { jsx, jsxs } from "@emotion/react/jsx-runtime";
 import { useUser } from "@clerk/shared/react";
+import { jsx, jsxs } from "@emotion/react/jsx-runtime";
 
 //#region src/components/UserProfile/SecurityPage.tsx
 const SecurityPage = withCardStateProvider(() => {

package/dist/components/UserProfile/UserProfileSection.js

@@ -5,8 +5,8 @@ import { Action } from "../../elements/Action/index.js";
 import { UserPreview } from "../../elements/UserPreview.js";
 import { ProfileSection } from "../../elements/Section.js";
 import { ProfileForm } from "./ProfileForm.js";
-import { jsx, jsxs } from "@emotion/react/jsx-runtime";
 import { useUser } from "@clerk/shared/react";
+import { jsx, jsxs } from "@emotion/react/jsx-runtime";
 
 //#region src/components/UserProfile/UserProfileSection.tsx
 const ProfileScreen = () => {

package/dist/components/UserProfile/UsernameForm.js

@@ -8,8 +8,8 @@ import { Form } from "../../elements/Form.js";
 import { FormButtons } from "../../elements/FormButtons.js";
 import { FormContainer } from "../../elements/FormContainer.js";
 import { createUsernameError } from "../../utils/usernameUtils.js";
-import { jsx, jsxs } from "@emotion/react/jsx-runtime";
 import { useReverification, useUser } from "@clerk/shared/react";
+import { jsx, jsxs } from "@emotion/react/jsx-runtime";
 
 //#region src/components/UserProfile/UsernameForm.tsx
 const UsernameForm = withCardStateProvider((props) => {

package/dist/components/UserProfile/UsernameSection.js

@@ -5,8 +5,8 @@ import { useActionContext } from "../../elements/Action/ActionRoot.js";
 import { Action } from "../../elements/Action/index.js";
 import { ProfileSection } from "../../elements/Section.js";
 import { UsernameForm } from "./UsernameForm.js";
-import { jsx, jsxs } from "@emotion/react/jsx-runtime";
 import { useUser } from "@clerk/shared/react";
+import { jsx, jsxs } from "@emotion/react/jsx-runtime";
 
 //#region src/components/UserProfile/UsernameSection.tsx
 const UsernameScreen = () => {

package/dist/components/UserProfile/VerifyTOTP.js

@@ -7,8 +7,8 @@ import { Form } from "../../elements/Form.js";
 import { FormButtonContainer } from "../../elements/FormButtons.js";
 import { FormContainer } from "../../elements/FormContainer.js";
 import React from "react";
-import { jsx, jsxs } from "@emotion/react/jsx-runtime";
 import { useUser } from "@clerk/shared/react";
+import { jsx, jsxs } from "@emotion/react/jsx-runtime";
 
 //#region src/components/UserProfile/VerifyTOTP.tsx
 const VerifyTOTP = withCardStateProvider((props) => {

package/dist/components/UserProfile/Web3Form.js

@@ -6,8 +6,8 @@ import { useCardState, withCardStateProvider } from "../../elements/contexts/ind
 import { Image, Text } from "../../customizables/index.js";
 import { getFieldError, handleError } from "../../utils/errorHandler.js";
 import { ProfileSection } from "../../elements/Section.js";
-import { Fragment, jsx, jsxs } from "@emotion/react/jsx-runtime";
 import { useReverification, useUser } from "@clerk/shared/react";
+import { Fragment, jsx, jsxs } from "@emotion/react/jsx-runtime";
 import { createWeb3 } from "@clerk/shared/internal/clerk-js/web3";
 
 //#region src/components/UserProfile/Web3Form.tsx

package/dist/components/UserProfile/Web3Section.js

@@ -12,8 +12,8 @@ import { RemoveWeb3WalletForm } from "./RemoveResourceForm.js";
 import { sortIdentificationBasedOnVerification } from "./utils.js";
 import { AddWeb3WalletActionMenu } from "./Web3Form.js";
 import { Fragment, useState } from "react";
-import { jsx, jsxs } from "@emotion/react/jsx-runtime";
 import { useReverification, useUser } from "@clerk/shared/react";
+import { jsx, jsxs } from "@emotion/react/jsx-runtime";
 
 //#region src/components/UserProfile/Web3Section.tsx
 const RemoveWeb3WalletScreen = (props) => {

package/dist/components/UserVerification/UVFactorOneCodeForm.js

@@ -3,8 +3,8 @@ import { handleError } from "../../utils/errorHandler.js";
 import { VerificationCodeCard } from "../../elements/VerificationCodeCard.js";
 import { useAfterVerification } from "./use-after-verification.js";
 import React from "react";
-import { jsx } from "@emotion/react/jsx-runtime";
 import { useSession } from "@clerk/shared/react";
+import { jsx } from "@emotion/react/jsx-runtime";
 
 //#region src/components/UserVerification/UVFactorOneCodeForm.tsx
 const UVFactorOneCodeForm = (props) => {

package/dist/components/UserVerification/UVFactorOnePasskeysCard.js

@@ -8,8 +8,8 @@ import { handleError } from "../../utils/errorHandler.js";
 import { Form } from "../../elements/Form.js";
 import { useAfterVerification } from "./use-after-verification.js";
 import React from "react";
-import { jsx, jsxs } from "@emotion/react/jsx-runtime";
 import { useClerk, useSession } from "@clerk/shared/react";
+import { jsx, jsxs } from "@emotion/react/jsx-runtime";
 
 //#region src/components/UserVerification/UVFactorOnePasskeysCard.tsx
 const UVFactorOnePasskeysCard = (props) => {

package/dist/components/UserVerification/UVFactorTwoBackupCodeCard.js

@@ -9,8 +9,8 @@ import { handleError } from "../../utils/errorHandler.js";
 import { Form } from "../../elements/Form.js";
 import { useAfterVerification } from "./use-after-verification.js";
 import React from "react";
-import { jsx, jsxs } from "@emotion/react/jsx-runtime";
 import { useSession } from "@clerk/shared/react";
+import { jsx, jsxs } from "@emotion/react/jsx-runtime";
 
 //#region src/components/UserVerification/UVFactorTwoBackupCodeCard.tsx
 const UVFactorTwoBackupCodeCard = (props) => {

package/dist/components/UserVerification/UVFactorTwoCodeForm.js

@@ -3,8 +3,8 @@ import { handleError } from "../../utils/errorHandler.js";
 import { VerificationCodeCard } from "../../elements/VerificationCodeCard.js";
 import { useAfterVerification } from "./use-after-verification.js";
 import React from "react";
-import { jsx } from "@emotion/react/jsx-runtime";
 import { useSession } from "@clerk/shared/react";
+import { jsx } from "@emotion/react/jsx-runtime";
 
 //#region src/components/UserVerification/UVFactorTwoCodeForm.tsx
 const UVFactorTwoCodeForm = (props) => {

package/dist/components/UserVerification/UVFactorTwoPhoneCodeCard.js

@@ -1,8 +1,8 @@
 import { localizationKeys } from "../../localization/localizationKeys.js";
 import { Flow } from "../../customizables/Flow.js";
 import { UVFactorTwoCodeForm } from "./UVFactorTwoCodeForm.js";
-import { jsx } from "@emotion/react/jsx-runtime";
 import { useSession } from "@clerk/shared/react";
+import { jsx } from "@emotion/react/jsx-runtime";
 
 //#region src/components/UserVerification/UVFactorTwoPhoneCodeCard.tsx
 const UVFactorTwoPhoneCodeCard = (props) => {

package/dist/components/UserVerification/UserVerificationFactorOnePassword.js

@@ -11,8 +11,8 @@ import { Form } from "../../elements/Form.js";
 import { HavingTrouble } from "../SignIn/HavingTrouble.js";
 import { useAfterVerification } from "./use-after-verification.js";
 import React from "react";
-import { jsx, jsxs } from "@emotion/react/jsx-runtime";
 import { useSession } from "@clerk/shared/react";
+import { jsx, jsxs } from "@emotion/react/jsx-runtime";
 
 //#region src/components/UserVerification/UserVerificationFactorOnePassword.tsx
 function UserVerificationFactorOnePasswordCard(props) {

package/dist/components/UserVerification/UserVerificationFactorTwo.js

@@ -1,7 +1,7 @@
 import { useRouter } from "../../router/RouteContext.js";
 import { withCardStateProvider } from "../../elements/contexts/index.js";
 import { LoadingCard } from "../../elements/LoadingCard.js";
-import { determineStartingSignInSecondFactor } from "../SignIn/utils.js";
+import { useSecondFactorSelection } from "../SignIn/useSecondFactorSelection.js";
 import { secondFactorsAreEqual } from "./useReverificationAlternativeStrategies.js";
 import { useUserVerificationSession, withUserVerificationSessionGuard } from "./useUserVerificationSession.js";
 import { sortByPrimaryFactor } from "./utils.js";
@@ -13,12 +13,6 @@ import React, { useEffect, useMemo } from "react";
 import { jsx } from "@emotion/react/jsx-runtime";
 
 //#region src/components/UserVerification/UserVerificationFactorTwo.tsx
-const factorKey = (factor) => {
-	if (!factor) return "";
-	let key = factor.strategy;
-	if ("phoneNumberId" in factor) key += factor.phoneNumberId;
-	return key;
-};
 const SUPPORTED_STRATEGIES = [
 	"phone_code",
 	"totp",
@@ -31,18 +25,8 @@ function UserVerificationFactorTwoComponent() {
 	const availableFactors = useMemo(() => {
 		return sessionVerification.supportedSecondFactors?.filter((factor) => SUPPORTED_STRATEGIES.includes(factor.strategy))?.sort(sortByPrimaryFactor) || null;
 	}, [sessionVerification.supportedSecondFactors]);
-	const lastPreparedFactorKeyRef = React.useRef("");
-	const [currentFactor, setCurrentFactor] = React.useState(() => determineStartingSignInSecondFactor(availableFactors));
-	const [showAllStrategies, setShowAllStrategies] = React.useState(!currentFactor);
-	const toggleAllStrategies = () => setShowAllStrategies((s) => !s);
+	const { currentFactor, factorAlreadyPrepared, handleFactorPrepare, selectFactor, showAllStrategies, toggleAllStrategies } = useSecondFactorSelection(availableFactors);
 	const secondFactorsExcludingCurrent = useMemo(() => availableFactors?.filter((factor) => !secondFactorsAreEqual(factor, currentFactor)), [availableFactors, currentFactor]);
-	const handleFactorPrepare = () => {
-		lastPreparedFactorKeyRef.current = factorKey(currentFactor);
-	};
-	const selectFactor = (factor) => {
-		setCurrentFactor(factor);
-		toggleAllStrategies();
-	};
 	const hasAlternativeStrategies = useMemo(() => secondFactorsExcludingCurrent && secondFactorsExcludingCurrent.length > 0 || false, [secondFactorsExcludingCurrent]);
 	useEffect(() => {
 		if (sessionVerification.status === "needs_first_factor") navigate("../");
@@ -55,14 +39,14 @@ function UserVerificationFactorTwoComponent() {
 	});
 	switch (currentFactor?.strategy) {
 		case "phone_code": return /* @__PURE__ */ jsx(UVFactorTwoPhoneCodeCard, {
-			factorAlreadyPrepared: lastPreparedFactorKeyRef.current === factorKey(currentFactor),
+			factorAlreadyPrepared,
 			onFactorPrepare: handleFactorPrepare,
 			factor: currentFactor,
 			onShowAlternativeMethodsClicked: toggleAllStrategies,
 			showAlternativeMethods: hasAlternativeStrategies
 		});
 		case "totp": return /* @__PURE__ */ jsx(UserVerificationFactorTwoTOTP, {
-			factorAlreadyPrepared: lastPreparedFactorKeyRef.current === factorKey(currentFactor),
+			factorAlreadyPrepared,
 			onFactorPrepare: handleFactorPrepare,
 			factor: currentFactor,
 			onShowAlternativeMethodsClicked: toggleAllStrategies,

package/dist/components/UserVerification/UserVerificationFactorTwo.js.map

@@ -1 +1 @@
-{"version":3,"file":"UserVerificationFactorTwo.js","names":["SUPPORTED_STRATEGIES: SessionVerificationSecondFactor['strategy'][]"],"sources":["../../../src/components/UserVerification/UserVerificationFactorTwo.tsx"],"sourcesContent":["import type { SessionVerificationResource, SessionVerificationSecondFactor, SignInFactor } from '@clerk/shared/types';\nimport React, { useEffect, useMemo } from 'react';\n\nimport { withCardStateProvider } from '@/ui/elements/contexts';\nimport { LoadingCard } from '@/ui/elements/LoadingCard';\n\nimport { useRouter } from '../../router';\nimport { determineStartingSignInSecondFactor } from '../SignIn/utils';\nimport { secondFactorsAreEqual } from './useReverificationAlternativeStrategies';\nimport { UserVerificationFactorTwoTOTP } from './UserVerificationFactorTwoTOTP';\nimport { useUserVerificationSession, withUserVerificationSessionGuard } from './useUserVerificationSession';\nimport { sortByPrimaryFactor } from './utils';\nimport { UVFactorTwoAlternativeMethods } from './UVFactorTwoAlternativeMethods';\nimport { UVFactorTwoBackupCodeCard } from './UVFactorTwoBackupCodeCard';\nimport { UVFactorTwoPhoneCodeCard } from './UVFactorTwoPhoneCodeCard';\n\nconst factorKey = (factor: SignInFactor | null | undefined) => {\n  if (!factor) {\n    return '';\n  }\n  let key = factor.strategy;\n  if ('phoneNumberId' in factor) {\n    key += factor.phoneNumberId;\n  }\n  return key;\n};\n\nconst SUPPORTED_STRATEGIES: SessionVerificationSecondFactor['strategy'][] = [\n  'phone_code',\n  'totp',\n  'backup_code',\n] as const;\n\nexport function UserVerificationFactorTwoComponent(): JSX.Element {\n  const { navigate } = useRouter();\n  const { data } = useUserVerificationSession();\n  const sessionVerification = data as SessionVerificationResource;\n\n  const availableFactors = useMemo(() => {\n    return (\n      sessionVerification.supportedSecondFactors\n        ?.filter(factor => SUPPORTED_STRATEGIES.includes(factor.strategy))\n        ?.sort(sortByPrimaryFactor) || null\n    );\n  }, [sessionVerification.supportedSecondFactors]);\n\n  const lastPreparedFactorKeyRef = React.useRef('');\n  const [currentFactor, setCurrentFactor] = React.useState<SessionVerificationSecondFactor | null>(\n    () => determineStartingSignInSecondFactor(availableFactors) as SessionVerificationSecondFactor,\n  );\n  const [showAllStrategies, setShowAllStrategies] = React.useState<boolean>(!currentFactor);\n  const toggleAllStrategies = () => setShowAllStrategies(s => !s);\n\n  const secondFactorsExcludingCurrent = useMemo(\n    () => availableFactors?.filter(factor => !secondFactorsAreEqual(factor, currentFactor)),\n    [availableFactors, currentFactor],\n  );\n\n  const handleFactorPrepare = () => {\n    lastPreparedFactorKeyRef.current = factorKey(currentFactor);\n  };\n\n  const selectFactor = (factor: SessionVerificationSecondFactor) => {\n    setCurrentFactor(factor);\n    toggleAllStrategies();\n  };\n\n  const hasAlternativeStrategies = useMemo(\n    () => (secondFactorsExcludingCurrent && secondFactorsExcludingCurrent.length > 0) || false,\n    [secondFactorsExcludingCurrent],\n  );\n\n  useEffect(() => {\n    if (sessionVerification.status === 'needs_first_factor') {\n      void navigate('../');\n    }\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, []);\n\n  if (!currentFactor) {\n    return <LoadingCard />;\n  }\n\n  if (showAllStrategies && hasAlternativeStrategies) {\n    return (\n      <UVFactorTwoAlternativeMethods\n        supportedSecondFactors={secondFactorsExcludingCurrent || null}\n        onBackLinkClick={toggleAllStrategies}\n        onFactorSelected={selectFactor}\n      />\n    );\n  }\n\n  switch (currentFactor?.strategy) {\n    case 'phone_code':\n      return (\n        <UVFactorTwoPhoneCodeCard\n          factorAlreadyPrepared={lastPreparedFactorKeyRef.current === factorKey(currentFactor)}\n          onFactorPrepare={handleFactorPrepare}\n          factor={currentFactor}\n          onShowAlternativeMethodsClicked={toggleAllStrategies}\n          showAlternativeMethods={hasAlternativeStrategies}\n        />\n      );\n    case 'totp':\n      return (\n        <UserVerificationFactorTwoTOTP\n          factorAlreadyPrepared={lastPreparedFactorKeyRef.current === factorKey(currentFactor)}\n          onFactorPrepare={handleFactorPrepare}\n          factor={currentFactor}\n          onShowAlternativeMethodsClicked={toggleAllStrategies}\n          showAlternativeMethods={hasAlternativeStrategies}\n        />\n      );\n    case 'backup_code':\n      return <UVFactorTwoBackupCodeCard onShowAlternativeMethodsClicked={toggleAllStrategies} />;\n    default:\n      return <LoadingCard />;\n  }\n}\n\nexport const UserVerificationFactorTwo = withUserVerificationSessionGuard(\n  withCardStateProvider(UserVerificationFactorTwoComponent),\n);\n"],"mappings":";;;;;;;;;;;;;;;AAgBA,MAAM,aAAa,WAA4C;AAC7D,KAAI,CAAC,OACH,QAAO;CAET,IAAI,MAAM,OAAO;AACjB,KAAI,mBAAmB,OACrB,QAAO,OAAO;AAEhB,QAAO;;AAGT,MAAMA,uBAAsE;CAC1E;CACA;CACA;CACD;AAED,SAAgB,qCAAkD;CAChE,MAAM,EAAE,aAAa,WAAW;CAChC,MAAM,EAAE,SAAS,4BAA4B;CAC7C,MAAM,sBAAsB;CAE5B,MAAM,mBAAmB,cAAc;AACrC,SACE,oBAAoB,wBAChB,QAAO,WAAU,qBAAqB,SAAS,OAAO,SAAS,CAAC,EAChE,KAAK,oBAAoB,IAAI;IAElC,CAAC,oBAAoB,uBAAuB,CAAC;CAEhD,MAAM,2BAA2B,MAAM,OAAO,GAAG;CACjD,MAAM,CAAC,eAAe,oBAAoB,MAAM,eACxC,oCAAoC,iBAAiB,CAC5D;CACD,MAAM,CAAC,mBAAmB,wBAAwB,MAAM,SAAkB,CAAC,cAAc;CACzF,MAAM,4BAA4B,sBAAqB,MAAK,CAAC,EAAE;CAE/D,MAAM,gCAAgC,cAC9B,kBAAkB,QAAO,WAAU,CAAC,sBAAsB,QAAQ,cAAc,CAAC,EACvF,CAAC,kBAAkB,cAAc,CAClC;CAED,MAAM,4BAA4B;AAChC,2BAAyB,UAAU,UAAU,cAAc;;CAG7D,MAAM,gBAAgB,WAA4C;AAChE,mBAAiB,OAAO;AACxB,uBAAqB;;CAGvB,MAAM,2BAA2B,cACxB,iCAAiC,8BAA8B,SAAS,KAAM,OACrF,CAAC,8BAA8B,CAChC;AAED,iBAAgB;AACd,MAAI,oBAAoB,WAAW,qBACjC,CAAK,SAAS,MAAM;IAGrB,EAAE,CAAC;AAEN,KAAI,CAAC,cACH,QAAO,oBAAC,gBAAc;AAGxB,KAAI,qBAAqB,yBACvB,QACE,oBAAC;EACC,wBAAwB,iCAAiC;EACzD,iBAAiB;EACjB,kBAAkB;GAClB;AAIN,SAAQ,eAAe,UAAvB;EACE,KAAK,aACH,QACE,oBAAC;GACC,uBAAuB,yBAAyB,YAAY,UAAU,cAAc;GACpF,iBAAiB;GACjB,QAAQ;GACR,iCAAiC;GACjC,wBAAwB;IACxB;EAEN,KAAK,OACH,QACE,oBAAC;GACC,uBAAuB,yBAAyB,YAAY,UAAU,cAAc;GACpF,iBAAiB;GACjB,QAAQ;GACR,iCAAiC;GACjC,wBAAwB;IACxB;EAEN,KAAK,cACH,QAAO,oBAAC,6BAA0B,iCAAiC,sBAAuB;EAC5F,QACE,QAAO,oBAAC,gBAAc;;;AAI5B,MAAa,4BAA4B,iCACvC,sBAAsB,mCAAmC,CAC1D"}
+{"version":3,"file":"UserVerificationFactorTwo.js","names":["SUPPORTED_STRATEGIES: SessionVerificationSecondFactor['strategy'][]"],"sources":["../../../src/components/UserVerification/UserVerificationFactorTwo.tsx"],"sourcesContent":["import type { SessionVerificationResource, SessionVerificationSecondFactor } from '@clerk/shared/types';\nimport React, { useEffect, useMemo } from 'react';\n\nimport { withCardStateProvider } from '@/ui/elements/contexts';\nimport { LoadingCard } from '@/ui/elements/LoadingCard';\n\nimport { useRouter } from '../../router';\nimport { useSecondFactorSelection } from '../SignIn/useSecondFactorSelection';\nimport { secondFactorsAreEqual } from './useReverificationAlternativeStrategies';\nimport { UserVerificationFactorTwoTOTP } from './UserVerificationFactorTwoTOTP';\nimport { useUserVerificationSession, withUserVerificationSessionGuard } from './useUserVerificationSession';\nimport { sortByPrimaryFactor } from './utils';\nimport { UVFactorTwoAlternativeMethods } from './UVFactorTwoAlternativeMethods';\nimport { UVFactorTwoBackupCodeCard } from './UVFactorTwoBackupCodeCard';\nimport { UVFactorTwoPhoneCodeCard } from './UVFactorTwoPhoneCodeCard';\n\nconst SUPPORTED_STRATEGIES: SessionVerificationSecondFactor['strategy'][] = [\n  'phone_code',\n  'totp',\n  'backup_code',\n] as const;\n\nexport function UserVerificationFactorTwoComponent(): JSX.Element {\n  const { navigate } = useRouter();\n  const { data } = useUserVerificationSession();\n  const sessionVerification = data as SessionVerificationResource;\n\n  const availableFactors = useMemo(() => {\n    return (\n      sessionVerification.supportedSecondFactors\n        ?.filter(factor => SUPPORTED_STRATEGIES.includes(factor.strategy))\n        ?.sort(sortByPrimaryFactor) || null\n    );\n  }, [sessionVerification.supportedSecondFactors]);\n\n  const {\n    currentFactor,\n    factorAlreadyPrepared,\n    handleFactorPrepare,\n    selectFactor,\n    showAllStrategies,\n    toggleAllStrategies,\n  } = useSecondFactorSelection<SessionVerificationSecondFactor>(availableFactors);\n\n  const secondFactorsExcludingCurrent = useMemo(\n    () => availableFactors?.filter(factor => !secondFactorsAreEqual(factor, currentFactor)),\n    [availableFactors, currentFactor],\n  );\n\n  const hasAlternativeStrategies = useMemo(\n    () => (secondFactorsExcludingCurrent && secondFactorsExcludingCurrent.length > 0) || false,\n    [secondFactorsExcludingCurrent],\n  );\n\n  useEffect(() => {\n    if (sessionVerification.status === 'needs_first_factor') {\n      void navigate('../');\n    }\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, []);\n\n  if (!currentFactor) {\n    return <LoadingCard />;\n  }\n\n  if (showAllStrategies && hasAlternativeStrategies) {\n    return (\n      <UVFactorTwoAlternativeMethods\n        supportedSecondFactors={secondFactorsExcludingCurrent || null}\n        onBackLinkClick={toggleAllStrategies}\n        onFactorSelected={selectFactor}\n      />\n    );\n  }\n\n  switch (currentFactor?.strategy) {\n    case 'phone_code':\n      return (\n        <UVFactorTwoPhoneCodeCard\n          factorAlreadyPrepared={factorAlreadyPrepared}\n          onFactorPrepare={handleFactorPrepare}\n          factor={currentFactor}\n          onShowAlternativeMethodsClicked={toggleAllStrategies}\n          showAlternativeMethods={hasAlternativeStrategies}\n        />\n      );\n    case 'totp':\n      return (\n        <UserVerificationFactorTwoTOTP\n          factorAlreadyPrepared={factorAlreadyPrepared}\n          onFactorPrepare={handleFactorPrepare}\n          factor={currentFactor}\n          onShowAlternativeMethodsClicked={toggleAllStrategies}\n          showAlternativeMethods={hasAlternativeStrategies}\n        />\n      );\n    case 'backup_code':\n      return <UVFactorTwoBackupCodeCard onShowAlternativeMethodsClicked={toggleAllStrategies} />;\n    default:\n      return <LoadingCard />;\n  }\n}\n\nexport const UserVerificationFactorTwo = withUserVerificationSessionGuard(\n  withCardStateProvider(UserVerificationFactorTwoComponent),\n);\n"],"mappings":";;;;;;;;;;;;;;;AAgBA,MAAMA,uBAAsE;CAC1E;CACA;CACA;CACD;AAED,SAAgB,qCAAkD;CAChE,MAAM,EAAE,aAAa,WAAW;CAChC,MAAM,EAAE,SAAS,4BAA4B;CAC7C,MAAM,sBAAsB;CAE5B,MAAM,mBAAmB,cAAc;AACrC,SACE,oBAAoB,wBAChB,QAAO,WAAU,qBAAqB,SAAS,OAAO,SAAS,CAAC,EAChE,KAAK,oBAAoB,IAAI;IAElC,CAAC,oBAAoB,uBAAuB,CAAC;CAEhD,MAAM,EACJ,eACA,uBACA,qBACA,cACA,mBACA,wBACE,yBAA0D,iBAAiB;CAE/E,MAAM,gCAAgC,cAC9B,kBAAkB,QAAO,WAAU,CAAC,sBAAsB,QAAQ,cAAc,CAAC,EACvF,CAAC,kBAAkB,cAAc,CAClC;CAED,MAAM,2BAA2B,cACxB,iCAAiC,8BAA8B,SAAS,KAAM,OACrF,CAAC,8BAA8B,CAChC;AAED,iBAAgB;AACd,MAAI,oBAAoB,WAAW,qBACjC,CAAK,SAAS,MAAM;IAGrB,EAAE,CAAC;AAEN,KAAI,CAAC,cACH,QAAO,oBAAC,gBAAc;AAGxB,KAAI,qBAAqB,yBACvB,QACE,oBAAC;EACC,wBAAwB,iCAAiC;EACzD,iBAAiB;EACjB,kBAAkB;GAClB;AAIN,SAAQ,eAAe,UAAvB;EACE,KAAK,aACH,QACE,oBAAC;GACwB;GACvB,iBAAiB;GACjB,QAAQ;GACR,iCAAiC;GACjC,wBAAwB;IACxB;EAEN,KAAK,OACH,QACE,oBAAC;GACwB;GACvB,iBAAiB;GACjB,QAAQ;GACR,iCAAiC;GACjC,wBAAwB;IACxB;EAEN,KAAK,cACH,QAAO,oBAAC,6BAA0B,iCAAiC,sBAAuB;EAC5F,QACE,QAAO,oBAAC,gBAAc;;;AAI5B,MAAa,4BAA4B,iCACvC,sBAAsB,mCAAmC,CAC1D"}

package/dist/components/UserVerification/useUserVerificationSession.js

@@ -2,8 +2,8 @@ import { useFetch } from "../../hooks/useFetch.js";
 import { useUserVerification } from "../../contexts/components/UserVerification.js";
 import { LoadingCard } from "../../elements/LoadingCard.js";
 import { useMemo } from "react";
-import { jsx } from "@emotion/react/jsx-runtime";
 import { useSession } from "@clerk/shared/react";
+import { jsx } from "@emotion/react/jsx-runtime";
 
 //#region src/components/UserVerification/useUserVerificationSession.tsx
 const useUserVerificationSessionKey = () => {

package/dist/components/Waitlist/WaitlistForm.js

@@ -12,8 +12,8 @@ import { Header } from "../../elements/Header.js";
 import { handleError } from "../../utils/errorHandler.js";
 import { Form } from "../../elements/Form.js";
 import { Wizard, useWizard } from "../../common/Wizard.js";
-import { jsx, jsxs } from "@emotion/react/jsx-runtime";
 import { useClerk } from "@clerk/shared/react";
+import { jsx, jsxs } from "@emotion/react/jsx-runtime";
 
 //#region src/components/Waitlist/WaitlistForm.tsx
 const WaitlistForm = (props) => {

package/dist/components/Waitlist/index.js

@@ -7,8 +7,8 @@ import { withCardStateProvider } from "../../elements/contexts/index.js";
 import { Flow } from "../../customizables/Flow.js";
 import { Card } from "../../elements/Card/index.js";
 import { WaitlistForm } from "./WaitlistForm.js";
-import { jsx, jsxs } from "@emotion/react/jsx-runtime";
 import { useClerk } from "@clerk/shared/react";
+import { jsx, jsxs } from "@emotion/react/jsx-runtime";
 
 //#region src/components/Waitlist/index.tsx
 const _Waitlist = () => {

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

@@ -6,8 +6,8 @@ import { Modal } from "../../../elements/Modal.js";
 import { Portal } from "../../../elements/Portal.js";
 import { ClerkLogoIcon, PromptContainer, PromptSuccessIcon, basePromptElementStyles } from "../shared.js";
 import { forwardRef, useId, useLayoutEffect, useRef, useState } from "react";
-import { Fragment as Fragment$1, jsx, jsxs } from "@emotion/react/jsx-runtime";
 import { useClerk } from "@clerk/shared/react";
+import { Fragment as Fragment$1, jsx, jsxs } from "@emotion/react/jsx-runtime";
 import { css } from "@emotion/react";
 
 //#region src/components/devPrompts/EnableOrganizationsPrompt/index.tsx

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

@@ -5,8 +5,8 @@ import { ClerkLogoIcon, PromptContainer, PromptSuccessIcon, basePromptElementSty
 import { KeySlashIcon } from "./KeySlashIcon.js";
 import { useRevalidateEnvironment } from "./use-revalidate-environment.js";
 import { useEffect, useMemo, useState } from "react";
-import { Fragment as Fragment$1, jsx, jsxs } from "@emotion/react/jsx-runtime";
 import { useUser } from "@clerk/shared/react";
+import { Fragment as Fragment$1, jsx, jsxs } from "@emotion/react/jsx-runtime";
 import { css } from "@emotion/react";
 import { createPortal } from "react-dom";
 

package/dist/contexts/CoreClerkContextWrapper.js

@@ -1,7 +1,7 @@
 import { assertClerkSingletonExists } from "./utils.js";
 import React from "react";
-import { jsx } from "@emotion/react/jsx-runtime";
 import { ClerkInstanceContext, ClientContext, OrganizationProvider, SessionContext, UserContext, __experimental_CheckoutProvider } from "@clerk/shared/react";
+import { jsx } from "@emotion/react/jsx-runtime";
 
 //#region src/contexts/CoreClerkContextWrapper.tsx
 function CoreClerkContextWrapper(props) {

package/dist/contexts/CoreSessionContext.js

@@ -1,6 +1,6 @@
 import React from "react";
-import { jsx } from "@emotion/react/jsx-runtime";
 import { useSessionContext } from "@clerk/shared/react";
+import { jsx } from "@emotion/react/jsx-runtime";
 
 //#region src/contexts/CoreSessionContext.tsx
 function withCoreSessionSwitchGuard(Component) {

package/dist/contexts/CoreUserContext.js

@@ -1,6 +1,6 @@
 import React from "react";
-import { jsx } from "@emotion/react/jsx-runtime";
 import { useUserContext } from "@clerk/shared/react";
+import { jsx } from "@emotion/react/jsx-runtime";
 
 //#region src/contexts/CoreUserContext.tsx
 function withCoreUserGuard(Component) {

package/dist/{createorganization_ui_03abd0_1.0.0-snapshot.v20251208202852.js → createorganization_ui_e1841e_1.0.0-snapshot.v20251215203425.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(9361),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(9361),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

@@ -1,7 +1,7 @@
 import { parseAppearance } from "./parseAppearance.js";
 import React from "react";
-import { jsx } from "@emotion/react/jsx-runtime";
 import { createContextAndHook, useDeepEqualMemo } from "@clerk/shared/react";
+import { jsx } from "@emotion/react/jsx-runtime";
 
 //#region src/customizables/AppearanceContext.tsx
 const [AppearanceContext, useAppearance] = createContextAndHook("AppearanceContext");