@clerk/ui 1.0.0-snapshot.v20251215212157 → 1.0.0-snapshot.v20251216175437

package/dist/components/SignUp/SignUpRestrictedAccess.js

@@ -9,8 +9,8 @@ import { Card } from "../../elements/Card/index.js";
 import { Header } from "../../elements/Header.js";
 import { useSupportEmail } from "../../hooks/useSupportEmail.js";
 import { SIGN_UP_MODES } from "@clerk/shared/internal/clerk-js/constants";
-import { useClerk } from "@clerk/shared/react";
 import { jsx, jsxs } from "@emotion/react/jsx-runtime";
+import { useClerk } from "@clerk/shared/react";
 
 //#region src/components/SignUp/SignUpRestrictedAccess.tsx
 const SignUpRestrictedAccess = () => {

package/dist/components/SignUp/SignUpSocialButtons.js

@@ -7,8 +7,8 @@ import { originPrefersPopup } from "../../utils/originPrefersPopup.js";
 import { web3CallbackErrorHandler } from "../../utils/web3CallbackErrorHandler.js";
 import { SocialButtons } from "../../elements/SocialButtons.js";
 import React from "react";
-import { useClerk } from "@clerk/shared/react";
 import { jsx } from "@emotion/react/jsx-runtime";
+import { useClerk } from "@clerk/shared/react";
 
 //#region src/components/SignUp/SignUpSocialButtons.tsx
 const SignUpSocialButtons = React.memo((props) => {

package/dist/components/SignUp/SignUpStart.js

@@ -31,9 +31,9 @@ import { SignUpStartAlternativePhoneCodePhoneNumberCard } from "./SignUpStartAlt
 import React from "react";
 import { ERROR_CODES, SIGN_UP_MODES } from "@clerk/shared/internal/clerk-js/constants";
 import { getClerkQueryParam, removeClerkQueryParam } from "@clerk/shared/internal/clerk-js/queryParams";
-import { useClerk } from "@clerk/shared/react";
 import { jsx, jsxs } from "@emotion/react/jsx-runtime";
 import { isClerkAPIResponseError } from "@clerk/shared/error";
+import { useClerk } from "@clerk/shared/react";
 import { getAlternativePhoneCodeProviderData } from "@clerk/shared/alternativePhoneCode";
 
 //#region src/components/SignUp/SignUpStart.tsx

package/dist/components/SignUp/SignUpVerificationCodeForm.js

@@ -5,8 +5,8 @@ import { VerificationCodeCard } from "../../elements/VerificationCodeCard.js";
 import { completeSignUpFlow } from "./util.js";
 import React from "react";
 import { forwardClerkQueryParams } from "@clerk/shared/internal/clerk-js/queryParams";
-import { useClerk } from "@clerk/shared/react";
 import { jsx } from "@emotion/react/jsx-runtime";
+import { useClerk } from "@clerk/shared/react";
 
 //#region src/components/SignUp/SignUpVerificationCodeForm.tsx
 const SignUpVerificationCodeForm = (props) => {

package/dist/components/SignUp/index.js

@@ -14,8 +14,8 @@ import { SignUpStart } from "./SignUpStart.js";
 import { SignUpVerifyEmail } from "./SignUpVerifyEmail.js";
 import { SignUpVerifyPhone } from "./SignUpVerifyPhone.js";
 import React from "react";
-import { useClerk } from "@clerk/shared/react";
 import { jsx, jsxs } from "@emotion/react/jsx-runtime";
+import { useClerk } from "@clerk/shared/react";
 
 //#region src/components/SignUp/index.tsx
 function RedirectToSignUp() {

package/dist/components/SubscriptionDetails/index.js

@@ -17,8 +17,8 @@ import { SubscriptionBadge } from "../Subscriptions/badge.js";
 import { Avatar } from "../../elements/Avatar.js";
 import * as React$1 from "react";
 import { useCallback, useContext, useState } from "react";
-import { useClerk, useOrganizationContext } from "@clerk/shared/react";
 import { Fragment as Fragment$1, jsx, jsxs } from "@emotion/react/jsx-runtime";
+import { useClerk, useOrganizationContext } from "@clerk/shared/react";
 
 //#region src/components/SubscriptionDetails/index.tsx
 const isFreePlan = (plan) => !plan.hasBaseFee;

package/dist/components/UserButton/UserButtonPopover.js

@@ -7,8 +7,8 @@ import { RootBox } from "../../elements/RootBox.js";
 import { MultiSessionActions, SignOutAllActions, SingleSessionActions } from "./SessionActions.js";
 import { useMultisessionActions } from "./useMultisessionActions.js";
 import React from "react";
-import { useSession, useUser } from "@clerk/shared/react";
 import { jsx, jsxs } from "@emotion/react/jsx-runtime";
+import { useSession, useUser } from "@clerk/shared/react";
 
 //#region src/components/UserButton/UserButtonPopover.tsx
 const UserButtonPopover = React.forwardRef((props, ref) => {

package/dist/components/UserButton/UserButtonTopLevelIdentifier.js

@@ -1,7 +1,7 @@
 import { descriptors } from "../../customizables/elementDescriptors.js";
 import { Text } from "../../customizables/index.js";
-import { useUser } from "@clerk/shared/react";
 import { jsx } from "@emotion/react/jsx-runtime";
+import { useUser } from "@clerk/shared/react";
 import { getFullName, getIdentifier } from "@clerk/shared/internal/clerk-js/user";
 
 //#region src/components/UserButton/UserButtonTopLevelIdentifier.tsx

package/dist/components/UserButton/UserButtonTrigger.js

@@ -7,8 +7,8 @@ import { UserAvatar } from "../../elements/UserAvatar.js";
 import { withAvatarShimmer } from "../../elements/withAvatarShimmer.js";
 import { UserButtonTopLevelIdentifier } from "./UserButtonTopLevelIdentifier.js";
 import { forwardRef } from "react";
-import { useUser } from "@clerk/shared/react";
 import { jsx, jsxs } from "@emotion/react/jsx-runtime";
+import { useUser } from "@clerk/shared/react";
 
 //#region src/components/UserButton/UserButtonTrigger.tsx
 const UserButtonTrigger = withAvatarShimmer(forwardRef((props, ref) => {

package/dist/components/UserButton/useMultisessionActions.js

@@ -3,7 +3,7 @@ import { useEnvironment } from "../../contexts/EnvironmentContext.js";
 import { useCardState } from "../../elements/contexts/index.js";
 import { sleep } from "../../utils/sleep.js";
 import { useMultipleSessions } from "../../hooks/useMultipleSessions.js";
-import { useClerk, usePortalRoot } from "@clerk/shared/react";
+import { useClerk } from "@clerk/shared/react";
 import { navigateIfTaskExists } from "@clerk/shared/internal/clerk-js/sessionTasks";
 import { windowNavigate } from "@clerk/shared/internal/clerk-js/windowNavigate";
 
@@ -14,7 +14,6 @@ const useMultisessionActions = (opts) => {
 	const { signedInSessions, otherSessions } = useMultipleSessions({ user: opts.user });
 	const { navigate } = useRouter();
 	const { displayConfig } = useEnvironment();
-	const getContainer = usePortalRoot();
 	const handleSignOutSessionClicked = (session) => () => {
 		if (otherSessions.length === 0) return signOut(opts.navigateAfterSignOut);
 		return signOut(opts.navigateAfterMultiSessionSingleSignOut, { sessionId: session.id }).finally(() => card.setIdle());
@@ -26,10 +25,7 @@ const useMultisessionActions = (opts) => {
 				opts.actionCompleteCallback?.();
 			})();
 		});
-		openUserProfile({
-			getContainer,
-			...opts.userProfileProps
-		});
+		openUserProfile(opts.userProfileProps);
 		return opts.actionCompleteCallback?.();
 	};
 	const handleUserProfileActionClicked = (__experimental_startPath) => {
@@ -40,7 +36,6 @@ const useMultisessionActions = (opts) => {
 			})();
 		});
 		openUserProfile({
-			getContainer,
 			...opts.userProfileProps,
 			...__experimental_startPath && { __experimental_startPath }
 		});

package/dist/components/UserButton/useMultisessionActions.js.map

@@ -1 +1 @@
-{"version":3,"file":"useMultisessionActions.js","names":["session"],"sources":["../../../src/components/UserButton/useMultisessionActions.tsx"],"sourcesContent":["import { navigateIfTaskExists } from '@clerk/shared/internal/clerk-js/sessionTasks';\nimport { windowNavigate } from '@clerk/shared/internal/clerk-js/windowNavigate';\nimport { useClerk, usePortalRoot } from '@clerk/shared/react';\nimport type { SignedInSessionResource, UserButtonProps, UserResource } from '@clerk/shared/types';\n\nimport { useEnvironment } from '@/ui/contexts';\nimport { useCardState } from '@/ui/elements/contexts';\nimport { sleep } from '@/ui/utils/sleep';\n\nimport { useMultipleSessions } from '../../hooks/useMultipleSessions';\nimport { useRouter } from '../../router';\n\ntype UseMultisessionActionsParams = {\n  user: UserResource | null | undefined;\n  actionCompleteCallback?: () => void;\n  navigateAfterSignOut?: () => any;\n  navigateAfterMultiSessionSingleSignOut?: () => any;\n  afterSwitchSessionUrl?: string;\n  userProfileUrl?: string;\n  signInUrl?: string;\n  taskUrl?: string | null;\n} & Pick<UserButtonProps, 'userProfileMode' | 'appearance' | 'userProfileProps'>;\n\nexport const useMultisessionActions = (opts: UseMultisessionActionsParams) => {\n  const { setActive, signOut, openUserProfile } = useClerk();\n  const card = useCardState();\n  const { signedInSessions, otherSessions } = useMultipleSessions({ user: opts.user });\n  const { navigate } = useRouter();\n  const { displayConfig } = useEnvironment();\n  const getContainer = usePortalRoot();\n\n  const handleSignOutSessionClicked = (session: SignedInSessionResource) => () => {\n    if (otherSessions.length === 0) {\n      return signOut(opts.navigateAfterSignOut);\n    }\n    return signOut(opts.navigateAfterMultiSessionSingleSignOut, { sessionId: session.id }).finally(() =>\n      card.setIdle(),\n    );\n  };\n\n  const handleManageAccountClicked = () => {\n    if (opts.userProfileMode === 'navigation') {\n      return navigate(opts.userProfileUrl || '').finally(() => {\n        void (async () => {\n          await sleep(300);\n          opts.actionCompleteCallback?.();\n        })();\n      });\n    }\n    openUserProfile({ getContainer, ...opts.userProfileProps });\n    return opts.actionCompleteCallback?.();\n  };\n\n  const handleUserProfileActionClicked = (__experimental_startPath?: string) => {\n    if (opts.userProfileMode === 'navigation') {\n      return navigate(opts.userProfileUrl || '').finally(() => {\n        void (async () => {\n          await sleep(300);\n          opts.actionCompleteCallback?.();\n        })();\n      });\n    }\n    openUserProfile({\n      getContainer,\n      ...opts.userProfileProps,\n      ...(__experimental_startPath && { __experimental_startPath }),\n    });\n\n    return opts.actionCompleteCallback?.();\n  };\n\n  const handleSignOutAllClicked = () => {\n    return signOut(opts.navigateAfterSignOut);\n  };\n\n  const handleSessionClicked = (session: SignedInSessionResource) => async () => {\n    card.setLoading();\n\n    return setActive({\n      session,\n      navigate: async ({ session }) => {\n        if (!session.currentTask && opts.afterSwitchSessionUrl) {\n          await navigate(opts.afterSwitchSessionUrl);\n          return;\n        }\n\n        if (opts.taskUrl) {\n          await navigate(opts.taskUrl);\n          return;\n        }\n\n        await navigateIfTaskExists(session, {\n          baseUrl: opts.signInUrl ?? displayConfig.signInUrl,\n          navigate,\n        });\n      },\n    }).finally(() => {\n      card.setIdle();\n      opts.actionCompleteCallback?.();\n    });\n  };\n\n  const handleAddAccountClicked = () => {\n    windowNavigate(opts.signInUrl || window.location.href);\n    return sleep(2000);\n  };\n\n  return {\n    handleSignOutSessionClicked,\n    handleManageAccountClicked,\n    handleUserProfileActionClicked,\n    handleSignOutAllClicked,\n    handleSessionClicked,\n    handleAddAccountClicked,\n    otherSessions,\n    signedInSessions,\n  };\n};\n"],"mappings":";;;;;;;;;;AAuBA,MAAa,0BAA0B,SAAuC;CAC5E,MAAM,EAAE,WAAW,SAAS,oBAAoB,UAAU;CAC1D,MAAM,OAAO,cAAc;CAC3B,MAAM,EAAE,kBAAkB,kBAAkB,oBAAoB,EAAE,MAAM,KAAK,MAAM,CAAC;CACpF,MAAM,EAAE,aAAa,WAAW;CAChC,MAAM,EAAE,kBAAkB,gBAAgB;CAC1C,MAAM,eAAe,eAAe;CAEpC,MAAM,+BAA+B,kBAA2C;AAC9E,MAAI,cAAc,WAAW,EAC3B,QAAO,QAAQ,KAAK,qBAAqB;AAE3C,SAAO,QAAQ,KAAK,wCAAwC,EAAE,WAAW,QAAQ,IAAI,CAAC,CAAC,cACrF,KAAK,SAAS,CACf;;CAGH,MAAM,mCAAmC;AACvC,MAAI,KAAK,oBAAoB,aAC3B,QAAO,SAAS,KAAK,kBAAkB,GAAG,CAAC,cAAc;AACvD,IAAM,YAAY;AAChB,UAAM,MAAM,IAAI;AAChB,SAAK,0BAA0B;OAC7B;IACJ;AAEJ,kBAAgB;GAAE;GAAc,GAAG,KAAK;GAAkB,CAAC;AAC3D,SAAO,KAAK,0BAA0B;;CAGxC,MAAM,kCAAkC,6BAAsC;AAC5E,MAAI,KAAK,oBAAoB,aAC3B,QAAO,SAAS,KAAK,kBAAkB,GAAG,CAAC,cAAc;AACvD,IAAM,YAAY;AAChB,UAAM,MAAM,IAAI;AAChB,SAAK,0BAA0B;OAC7B;IACJ;AAEJ,kBAAgB;GACd;GACA,GAAG,KAAK;GACR,GAAI,4BAA4B,EAAE,0BAA0B;GAC7D,CAAC;AAEF,SAAO,KAAK,0BAA0B;;CAGxC,MAAM,gCAAgC;AACpC,SAAO,QAAQ,KAAK,qBAAqB;;CAG3C,MAAM,wBAAwB,YAAqC,YAAY;AAC7E,OAAK,YAAY;AAEjB,SAAO,UAAU;GACf;GACA,UAAU,OAAO,EAAE,yBAAc;AAC/B,QAAI,CAACA,UAAQ,eAAe,KAAK,uBAAuB;AACtD,WAAM,SAAS,KAAK,sBAAsB;AAC1C;;AAGF,QAAI,KAAK,SAAS;AAChB,WAAM,SAAS,KAAK,QAAQ;AAC5B;;AAGF,UAAM,qBAAqBA,WAAS;KAClC,SAAS,KAAK,aAAa,cAAc;KACzC;KACD,CAAC;;GAEL,CAAC,CAAC,cAAc;AACf,QAAK,SAAS;AACd,QAAK,0BAA0B;IAC/B;;CAGJ,MAAM,gCAAgC;AACpC,iBAAe,KAAK,aAAa,OAAO,SAAS,KAAK;AACtD,SAAO,MAAM,IAAK;;AAGpB,QAAO;EACL;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACD"}
+{"version":3,"file":"useMultisessionActions.js","names":["session"],"sources":["../../../src/components/UserButton/useMultisessionActions.tsx"],"sourcesContent":["import { navigateIfTaskExists } from '@clerk/shared/internal/clerk-js/sessionTasks';\nimport { windowNavigate } from '@clerk/shared/internal/clerk-js/windowNavigate';\nimport { useClerk } from '@clerk/shared/react';\nimport type { SignedInSessionResource, UserButtonProps, UserResource } from '@clerk/shared/types';\n\nimport { useEnvironment } from '@/ui/contexts';\nimport { useCardState } from '@/ui/elements/contexts';\nimport { sleep } from '@/ui/utils/sleep';\n\nimport { useMultipleSessions } from '../../hooks/useMultipleSessions';\nimport { useRouter } from '../../router';\n\ntype UseMultisessionActionsParams = {\n  user: UserResource | null | undefined;\n  actionCompleteCallback?: () => void;\n  navigateAfterSignOut?: () => any;\n  navigateAfterMultiSessionSingleSignOut?: () => any;\n  afterSwitchSessionUrl?: string;\n  userProfileUrl?: string;\n  signInUrl?: string;\n  taskUrl?: string | null;\n} & Pick<UserButtonProps, 'userProfileMode' | 'appearance' | 'userProfileProps'>;\n\nexport const useMultisessionActions = (opts: UseMultisessionActionsParams) => {\n  const { setActive, signOut, openUserProfile } = useClerk();\n  const card = useCardState();\n  const { signedInSessions, otherSessions } = useMultipleSessions({ user: opts.user });\n  const { navigate } = useRouter();\n  const { displayConfig } = useEnvironment();\n\n  const handleSignOutSessionClicked = (session: SignedInSessionResource) => () => {\n    if (otherSessions.length === 0) {\n      return signOut(opts.navigateAfterSignOut);\n    }\n    return signOut(opts.navigateAfterMultiSessionSingleSignOut, { sessionId: session.id }).finally(() =>\n      card.setIdle(),\n    );\n  };\n\n  const handleManageAccountClicked = () => {\n    if (opts.userProfileMode === 'navigation') {\n      return navigate(opts.userProfileUrl || '').finally(() => {\n        void (async () => {\n          await sleep(300);\n          opts.actionCompleteCallback?.();\n        })();\n      });\n    }\n    openUserProfile(opts.userProfileProps);\n    return opts.actionCompleteCallback?.();\n  };\n\n  const handleUserProfileActionClicked = (__experimental_startPath?: string) => {\n    if (opts.userProfileMode === 'navigation') {\n      return navigate(opts.userProfileUrl || '').finally(() => {\n        void (async () => {\n          await sleep(300);\n          opts.actionCompleteCallback?.();\n        })();\n      });\n    }\n    openUserProfile({\n      ...opts.userProfileProps,\n      ...(__experimental_startPath && { __experimental_startPath }),\n    });\n\n    return opts.actionCompleteCallback?.();\n  };\n\n  const handleSignOutAllClicked = () => {\n    return signOut(opts.navigateAfterSignOut);\n  };\n\n  const handleSessionClicked = (session: SignedInSessionResource) => async () => {\n    card.setLoading();\n\n    return setActive({\n      session,\n      navigate: async ({ session }) => {\n        if (!session.currentTask && opts.afterSwitchSessionUrl) {\n          await navigate(opts.afterSwitchSessionUrl);\n          return;\n        }\n\n        if (opts.taskUrl) {\n          await navigate(opts.taskUrl);\n          return;\n        }\n\n        await navigateIfTaskExists(session, {\n          baseUrl: opts.signInUrl ?? displayConfig.signInUrl,\n          navigate,\n        });\n      },\n    }).finally(() => {\n      card.setIdle();\n      opts.actionCompleteCallback?.();\n    });\n  };\n\n  const handleAddAccountClicked = () => {\n    windowNavigate(opts.signInUrl || window.location.href);\n    return sleep(2000);\n  };\n\n  return {\n    handleSignOutSessionClicked,\n    handleManageAccountClicked,\n    handleUserProfileActionClicked,\n    handleSignOutAllClicked,\n    handleSessionClicked,\n    handleAddAccountClicked,\n    otherSessions,\n    signedInSessions,\n  };\n};\n"],"mappings":";;;;;;;;;;AAuBA,MAAa,0BAA0B,SAAuC;CAC5E,MAAM,EAAE,WAAW,SAAS,oBAAoB,UAAU;CAC1D,MAAM,OAAO,cAAc;CAC3B,MAAM,EAAE,kBAAkB,kBAAkB,oBAAoB,EAAE,MAAM,KAAK,MAAM,CAAC;CACpF,MAAM,EAAE,aAAa,WAAW;CAChC,MAAM,EAAE,kBAAkB,gBAAgB;CAE1C,MAAM,+BAA+B,kBAA2C;AAC9E,MAAI,cAAc,WAAW,EAC3B,QAAO,QAAQ,KAAK,qBAAqB;AAE3C,SAAO,QAAQ,KAAK,wCAAwC,EAAE,WAAW,QAAQ,IAAI,CAAC,CAAC,cACrF,KAAK,SAAS,CACf;;CAGH,MAAM,mCAAmC;AACvC,MAAI,KAAK,oBAAoB,aAC3B,QAAO,SAAS,KAAK,kBAAkB,GAAG,CAAC,cAAc;AACvD,IAAM,YAAY;AAChB,UAAM,MAAM,IAAI;AAChB,SAAK,0BAA0B;OAC7B;IACJ;AAEJ,kBAAgB,KAAK,iBAAiB;AACtC,SAAO,KAAK,0BAA0B;;CAGxC,MAAM,kCAAkC,6BAAsC;AAC5E,MAAI,KAAK,oBAAoB,aAC3B,QAAO,SAAS,KAAK,kBAAkB,GAAG,CAAC,cAAc;AACvD,IAAM,YAAY;AAChB,UAAM,MAAM,IAAI;AAChB,SAAK,0BAA0B;OAC7B;IACJ;AAEJ,kBAAgB;GACd,GAAG,KAAK;GACR,GAAI,4BAA4B,EAAE,0BAA0B;GAC7D,CAAC;AAEF,SAAO,KAAK,0BAA0B;;CAGxC,MAAM,gCAAgC;AACpC,SAAO,QAAQ,KAAK,qBAAqB;;CAG3C,MAAM,wBAAwB,YAAqC,YAAY;AAC7E,OAAK,YAAY;AAEjB,SAAO,UAAU;GACf;GACA,UAAU,OAAO,EAAE,yBAAc;AAC/B,QAAI,CAACA,UAAQ,eAAe,KAAK,uBAAuB;AACtD,WAAM,SAAS,KAAK,sBAAsB;AAC1C;;AAGF,QAAI,KAAK,SAAS;AAChB,WAAM,SAAS,KAAK,QAAQ;AAC5B;;AAGF,UAAM,qBAAqBA,WAAS;KAClC,SAAS,KAAK,aAAa,cAAc;KACzC;KACD,CAAC;;GAEL,CAAC,CAAC,cAAc;AACf,QAAK,SAAS;AACd,QAAK,0BAA0B;IAC/B;;CAGJ,MAAM,gCAAgC;AACpC,iBAAe,KAAK,aAAa,OAAO,SAAS,KAAK;AACtD,SAAO,MAAM,IAAK;;AAGpB,QAAO;EACL;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACD"}

package/dist/components/UserProfile/APIKeysPage.js

@@ -6,8 +6,8 @@ import { Col } from "../../customizables/index.js";
 import { Header } from "../../elements/Header.js";
 import { APIKeysPage as APIKeysPage$1 } from "../APIKeys/APIKeys.js";
 import { useUnsafeNavbarContext } from "../../elements/Navbar.js";
-import { useUser } from "@clerk/shared/react";
 import { jsx, jsxs } from "@emotion/react/jsx-runtime";
+import { useUser } from "@clerk/shared/react";
 
 //#region src/components/UserProfile/APIKeysPage.tsx
 const APIKeysPage = () => {

package/dist/components/UserProfile/AccountPage.js

@@ -13,8 +13,8 @@ import { PhoneSection } from "./PhoneSection.js";
 import { UsernameSection } from "./UsernameSection.js";
 import { UserProfileSection } from "./UserProfileSection.js";
 import { Web3Section } from "./Web3Section.js";
-import { useUser } from "@clerk/shared/react";
 import { jsx, jsxs } from "@emotion/react/jsx-runtime";
+import { useUser } from "@clerk/shared/react";
 
 //#region src/components/UserProfile/AccountPage.tsx
 const AccountPage = withCardStateProvider(() => {

package/dist/components/UserProfile/ActiveDevicesSection.js

@@ -13,8 +13,8 @@ import { FullHeightLoader } from "../../elements/FullHeightLoader.js";
 import { ProfileSection } from "../../elements/Section.js";
 import { currentSessionFirst } from "./utils.js";
 import { getRelativeToNowDateKey } from "../../utils/getRelativeToNowDateKey.js";
-import { useReverification, useSession, useUser } from "@clerk/shared/react";
 import { Fragment, jsx, jsxs } from "@emotion/react/jsx-runtime";
+import { useReverification, useSession, useUser } from "@clerk/shared/react";
 
 //#region src/components/UserProfile/ActiveDevicesSection.tsx
 const ActiveDevicesSection = () => {

package/dist/components/UserProfile/AddAuthenticatorApp.js

@@ -10,9 +10,9 @@ import { useActionContext } from "../../elements/Action/ActionRoot.js";
 import { ClipboardInput } from "../../elements/ClipboardInput.js";
 import { FullHeightLoader } from "../../elements/FullHeightLoader.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 { isClerkRuntimeError } from "@clerk/shared/error";
+import { useReverification, useUser } from "@clerk/shared/react";
 
 //#region src/components/UserProfile/AddAuthenticatorApp.tsx
 const AddAuthenticatorApp = withCardStateProvider((props) => {

package/dist/components/UserProfile/ConnectedAccountsMenu.js

@@ -10,8 +10,8 @@ import { ProviderInitialIcon } from "../../common/ProviderInitialIcon.js";
 import { handleError } from "../../utils/errorHandler.js";
 import { ProfileSection } from "../../elements/Section.js";
 import { appendModalState } from "@clerk/shared/internal/clerk-js/queryStateParams";
-import { useReverification, useUser } from "@clerk/shared/react";
 import { jsx } from "@emotion/react/jsx-runtime";
+import { useReverification, useUser } from "@clerk/shared/react";
 
 //#region src/components/UserProfile/ConnectedAccountsMenu.tsx
 const ConnectMenuButton = (props) => {

package/dist/components/UserProfile/ConnectedAccountsSection.js

@@ -16,8 +16,8 @@ import { AddConnectedAccount } from "./ConnectedAccountsMenu.js";
 import { RemoveConnectedAccountForm } from "./RemoveResourceForm.js";
 import { Fragment, useState } from "react";
 import { appendModalState } from "@clerk/shared/internal/clerk-js/queryStateParams";
-import { useReverification, useUser } from "@clerk/shared/react";
 import { jsx, jsxs } from "@emotion/react/jsx-runtime";
+import { useReverification, useUser } from "@clerk/shared/react";
 
 //#region src/components/UserProfile/ConnectedAccountsSection.tsx
 const RemoveConnectedAccountScreen = (props) => {

package/dist/components/UserProfile/DeleteUserForm.js

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

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 { useReverification, useUser } from "@clerk/shared/react";
 import { jsx, jsxs } from "@emotion/react/jsx-runtime";
+import { useReverification, useUser } from "@clerk/shared/react";
 
 //#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 { useReverification, useUser } from "@clerk/shared/react";
 import { Fragment as Fragment$1, jsx, jsxs } from "@emotion/react/jsx-runtime";
+import { useReverification, useUser } from "@clerk/shared/react";
 
 //#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 { useUser } from "@clerk/shared/react";
 import { jsx, jsxs } from "@emotion/react/jsx-runtime";
+import { useUser } from "@clerk/shared/react";
 
 //#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 { useUser } from "@clerk/shared/react";
 import { Fragment, jsx, jsxs } from "@emotion/react/jsx-runtime";
+import { useUser } from "@clerk/shared/react";
 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 { useUser } from "@clerk/shared/react";
 import { jsx } from "@emotion/react/jsx-runtime";
+import { useUser } from "@clerk/shared/react";
 
 //#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 { useReverification, useUser } from "@clerk/shared/react";
 import { jsx, jsxs } from "@emotion/react/jsx-runtime";
+import { useReverification, useUser } from "@clerk/shared/react";
 
 //#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 { useUser } from "@clerk/shared/react";
 import { Fragment as Fragment$1, jsx, jsxs } from "@emotion/react/jsx-runtime";
+import { useUser } from "@clerk/shared/react";
 
 //#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 { useClerk, useReverification, useUser } from "@clerk/shared/react";
 import { jsx, jsxs } from "@emotion/react/jsx-runtime";
+import { useClerk, useReverification, useUser } from "@clerk/shared/react";
 
 //#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 { useReverification, useSession, useUser } from "@clerk/shared/react";
 import { jsx, jsxs } from "@emotion/react/jsx-runtime";
+import { useReverification, useSession, useUser } from "@clerk/shared/react";
 
 //#region src/components/UserProfile/PasswordForm.tsx
 const generateSuccessPageText = (userHasPassword, sessionSignOut) => {

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 { useUser } from "@clerk/shared/react";
 import { jsx, jsxs } from "@emotion/react/jsx-runtime";
+import { useUser } from "@clerk/shared/react";
 
 //#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 { useReverification, useUser } from "@clerk/shared/react";
 import { jsx, jsxs } from "@emotion/react/jsx-runtime";
+import { useReverification, useUser } from "@clerk/shared/react";
 
 //#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 { useReverification, useUser } from "@clerk/shared/react";
 import { Fragment as Fragment$1, jsx, jsxs } from "@emotion/react/jsx-runtime";
+import { useReverification, useUser } from "@clerk/shared/react";
 
 //#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 { useUser } from "@clerk/shared/react";
 import { jsx, jsxs } from "@emotion/react/jsx-runtime";
+import { useUser } from "@clerk/shared/react";
 
 //#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 { useUser } from "@clerk/shared/react";
 import { jsx } from "@emotion/react/jsx-runtime";
+import { useUser } from "@clerk/shared/react";
 
 //#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 { useUser } from "@clerk/shared/react";
 import { jsx, jsxs } from "@emotion/react/jsx-runtime";
+import { useUser } from "@clerk/shared/react";
 
 //#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 { useUser } from "@clerk/shared/react";
 import { jsx, jsxs } from "@emotion/react/jsx-runtime";
+import { useUser } from "@clerk/shared/react";
 
 //#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 { useReverification, useUser } from "@clerk/shared/react";
 import { jsx, jsxs } from "@emotion/react/jsx-runtime";
+import { useReverification, useUser } from "@clerk/shared/react";
 
 //#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 { useUser } from "@clerk/shared/react";
 import { jsx, jsxs } from "@emotion/react/jsx-runtime";
+import { useUser } from "@clerk/shared/react";
 
 //#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 { useUser } from "@clerk/shared/react";
 import { jsx, jsxs } from "@emotion/react/jsx-runtime";
+import { useUser } from "@clerk/shared/react";
 
 //#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 { useReverification, useUser } from "@clerk/shared/react";
 import { Fragment, jsx, jsxs } from "@emotion/react/jsx-runtime";
+import { useReverification, useUser } from "@clerk/shared/react";
 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 { useReverification, useUser } from "@clerk/shared/react";
 import { jsx, jsxs } from "@emotion/react/jsx-runtime";
+import { useReverification, useUser } from "@clerk/shared/react";
 
 //#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 { useSession } from "@clerk/shared/react";
 import { jsx } from "@emotion/react/jsx-runtime";
+import { useSession } from "@clerk/shared/react";
 
 //#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 { useClerk, useSession } from "@clerk/shared/react";
 import { jsx, jsxs } from "@emotion/react/jsx-runtime";
+import { useClerk, useSession } from "@clerk/shared/react";
 
 //#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 { useSession } from "@clerk/shared/react";
 import { jsx, jsxs } from "@emotion/react/jsx-runtime";
+import { useSession } from "@clerk/shared/react";
 
 //#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 { useSession } from "@clerk/shared/react";
 import { jsx } from "@emotion/react/jsx-runtime";
+import { useSession } from "@clerk/shared/react";
 
 //#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 { useSession } from "@clerk/shared/react";
 import { jsx } from "@emotion/react/jsx-runtime";
+import { useSession } from "@clerk/shared/react";
 
 //#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 { useSession } from "@clerk/shared/react";
 import { jsx, jsxs } from "@emotion/react/jsx-runtime";
+import { useSession } from "@clerk/shared/react";
 
 //#region src/components/UserVerification/UserVerificationFactorOnePassword.tsx
 function UserVerificationFactorOnePasswordCard(props) {

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 { useSession } from "@clerk/shared/react";
 import { jsx } from "@emotion/react/jsx-runtime";
+import { useSession } from "@clerk/shared/react";
 
 //#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 { useClerk } from "@clerk/shared/react";
 import { jsx, jsxs } from "@emotion/react/jsx-runtime";
+import { useClerk } from "@clerk/shared/react";
 
 //#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 { useClerk } from "@clerk/shared/react";
 import { jsx, jsxs } from "@emotion/react/jsx-runtime";
+import { useClerk } from "@clerk/shared/react";
 
 //#region src/components/Waitlist/index.tsx
 const _Waitlist = () => {