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

package/dist/components/OrganizationProfile/DomainList.js

@@ -12,8 +12,8 @@ import { RemoveDomainScreen } from "./RemoveDomainScreen.js";
 import { VerifiedDomainScreen } from "./VerifiedDomainScreen.js";
 import { VerifyDomainScreen } from "./VerifyDomainScreen.js";
 import React, { useMemo } from "react";
-import { jsx, jsxs } from "@emotion/react/jsx-runtime";
 import { useOrganization } from "@clerk/shared/react";
+import { jsx, jsxs } from "@emotion/react/jsx-runtime";
 
 //#region src/components/OrganizationProfile/DomainList.tsx
 const useMenuActions = (domain) => {

package/dist/components/OrganizationProfile/InviteMembersForm.js

@@ -13,9 +13,9 @@ import { TagInput } from "../../elements/TagInput.js";
 import { useFetchRoles } from "../../hooks/useFetchRoles.js";
 import { RoleSelect } from "./MemberListTable.js";
 import { useEffect, useState } from "react";
+import { useOrganization } from "@clerk/shared/react";
 import { jsx, jsxs } from "@emotion/react/jsx-runtime";
 import { isClerkAPIResponseError } from "@clerk/shared/error";
-import { useOrganization } from "@clerk/shared/react";
 
 //#region src/components/OrganizationProfile/InviteMembersForm.tsx
 const isEmail = (str) => /^\S+@\S+\.\S+$/.test(str);

package/dist/components/OrganizationProfile/InviteMembersScreen.js

@@ -9,8 +9,8 @@ import { useActionContext } from "../../elements/Action/ActionRoot.js";
 import { SuccessPage } from "../../elements/SuccessPage.js";
 import { InviteMembersForm } from "./InviteMembersForm.js";
 import { IconCircle } from "../../elements/IconCircle.js";
-import { jsx, jsxs } from "@emotion/react/jsx-runtime";
 import { useOrganization } from "@clerk/shared/react";
+import { jsx, jsxs } from "@emotion/react/jsx-runtime";
 
 //#region src/components/OrganizationProfile/InviteMembersScreen.tsx
 const InviteMembersScreen = withCardStateProvider((props) => {

package/dist/components/OrganizationProfile/InvitedMembersList.js

@@ -7,8 +7,8 @@ import { ThreeDotsMenu } from "../../elements/ThreeDotsMenu.js";
 import { useFetchRoles, useLocalizeCustomRoles } from "../../hooks/useFetchRoles.js";
 import { DataTable, RowContainer } from "./MemberListTable.js";
 import { UserPreview } from "../../elements/UserPreview.js";
-import { jsx, jsxs } from "@emotion/react/jsx-runtime";
 import { useOrganization } from "@clerk/shared/react";
+import { jsx, jsxs } from "@emotion/react/jsx-runtime";
 
 //#region src/components/OrganizationProfile/InvitedMembersList.tsx
 const invitationsParams = { invitations: {

package/dist/components/OrganizationProfile/OrganizationAPIKeysPage.js

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

package/dist/components/OrganizationProfile/OrganizationGeneralPage.js

@@ -12,8 +12,8 @@ import { DeleteOrganizationForm, LeaveOrganizationForm } from "./ActionConfirmat
 import { AddDomainForm } from "./AddDomainForm.js";
 import { DomainList } from "./DomainList.js";
 import { ProfileForm } from "./ProfileForm.js";
-import { jsx, jsxs } from "@emotion/react/jsx-runtime";
 import { useOrganization } from "@clerk/shared/react";
+import { jsx, jsxs } from "@emotion/react/jsx-runtime";
 
 //#region src/components/OrganizationProfile/OrganizationGeneralPage.tsx
 const ProfileScreen = () => {

package/dist/components/OrganizationProfile/OrganizationMembers.js

@@ -17,8 +17,8 @@ import { MembersSearch } from "./MembersSearch.js";
 import { OrganizationMembersTabInvitations } from "./OrganizationMembersTabInvitations.js";
 import { OrganizationMembersTabRequests } from "./OrganizationMembersTabRequests.js";
 import { useState } from "react";
-import { jsx, jsxs } from "@emotion/react/jsx-runtime";
 import { useOrganization } from "@clerk/shared/react";
+import { jsx, jsxs } from "@emotion/react/jsx-runtime";
 
 //#region src/components/OrganizationProfile/OrganizationMembers.tsx
 const ACTIVE_MEMBERS_PAGE_SIZE = 10;

package/dist/components/OrganizationProfile/OrganizationProfileNavbar.js

@@ -4,8 +4,8 @@ import { useProtect } from "../../common/Gate.js";
 import { useOrganizationProfileContext } from "../../contexts/components/OrganizationProfile.js";
 import { NavBar, NavbarContextProvider } from "../../elements/Navbar.js";
 import React from "react";
-import { jsx, jsxs } from "@emotion/react/jsx-runtime";
 import { useOrganization } from "@clerk/shared/react";
+import { jsx, jsxs } from "@emotion/react/jsx-runtime";
 
 //#region src/components/OrganizationProfile/OrganizationProfileNavbar.tsx
 const OrganizationProfileNavbar = (props) => {

package/dist/components/OrganizationProfile/ProfileForm.js

@@ -9,8 +9,8 @@ import { FormContainer } from "../../elements/FormContainer.js";
 import { OrganizationProfileAvatarUploader } from "./OrganizationProfileAvatarUploader.js";
 import { isDefaultImage } from "../../utils/image.js";
 import React from "react";
-import { jsx, jsxs } from "@emotion/react/jsx-runtime";
 import { useOrganization } from "@clerk/shared/react";
+import { jsx, jsxs } from "@emotion/react/jsx-runtime";
 
 //#region src/components/OrganizationProfile/ProfileForm.tsx
 const ProfileForm = withCardStateProvider((props) => {

package/dist/components/OrganizationProfile/RemoveDomainForm.js

@@ -5,8 +5,8 @@ import { descriptors } from "../../customizables/elementDescriptors.js";
 import { Flex, Spinner } from "../../customizables/index.js";
 import { RemoveResourceForm } from "../../common/RemoveResourceForm.js";
 import React from "react";
-import { jsx } from "@emotion/react/jsx-runtime";
 import { useOrganization } from "@clerk/shared/react";
+import { jsx } from "@emotion/react/jsx-runtime";
 
 //#region src/components/OrganizationProfile/RemoveDomainForm.tsx
 const RemoveDomainForm = (props) => {

package/dist/components/OrganizationProfile/RequestToJoinList.js

@@ -5,8 +5,8 @@ import { Box, Button, Flex, Td } from "../../customizables/index.js";
 import { handleError } from "../../utils/errorHandler.js";
 import { DataTable, RowContainer } from "./MemberListTable.js";
 import { UserPreview } from "../../elements/UserPreview.js";
-import { jsx, jsxs } from "@emotion/react/jsx-runtime";
 import { useOrganization } from "@clerk/shared/react";
+import { jsx, jsxs } from "@emotion/react/jsx-runtime";
 
 //#region src/components/OrganizationProfile/RequestToJoinList.tsx
 const membershipRequestsParams = { membershipRequests: {

package/dist/components/OrganizationProfile/VerifiedDomainForm.js

@@ -13,8 +13,8 @@ import { Form } from "../../elements/Form.js";
 import { FormButtons } from "../../elements/FormButtons.js";
 import { FormContainer } from "../../elements/FormContainer.js";
 import { useEffect } from "react";
-import { jsx, jsxs } from "@emotion/react/jsx-runtime";
 import { useOrganization } from "@clerk/shared/react";
+import { jsx, jsxs } from "@emotion/react/jsx-runtime";
 
 //#region src/components/OrganizationProfile/VerifiedDomainForm.tsx
 const useCalloutLabel = (domain, { infoLabel: infoLabelKey }) => {

package/dist/components/OrganizationProfile/VerifyDomainForm.js

@@ -13,8 +13,8 @@ import { FormContainer } from "../../elements/FormContainer.js";
 import { Wizard, useWizard } from "../../common/Wizard.js";
 import { VerifiedDomainForm } from "./VerifiedDomainForm.js";
 import React, { useRef } from "react";
-import { jsx, jsxs } from "@emotion/react/jsx-runtime";
 import { useOrganization } from "@clerk/shared/react";
+import { jsx, jsxs } from "@emotion/react/jsx-runtime";
 
 //#region src/components/OrganizationProfile/VerifyDomainForm.tsx
 const VerifyDomainForm = withCardStateProvider((props) => {

package/dist/components/OrganizationProfile/index.js

@@ -12,8 +12,8 @@ import { ProfileCard } from "../../elements/ProfileCard/index.js";
 import { OrganizationProfileNavbar } from "./OrganizationProfileNavbar.js";
 import { OrganizationProfileRoutes } from "./OrganizationProfileRoutes.js";
 import React from "react";
-import { jsx, jsxs } from "@emotion/react/jsx-runtime";
 import { useOrganization } from "@clerk/shared/react";
+import { jsx, jsxs } from "@emotion/react/jsx-runtime";
 
 //#region src/components/OrganizationProfile/index.tsx
 const _OrganizationProfile = (_) => {

package/dist/components/OrganizationSwitcher/OrganizationSwitcherPopover.js

@@ -14,8 +14,8 @@ import { PopoverCard } from "../../elements/PopoverCard.js";
 import { RootBox } from "../../elements/RootBox.js";
 import { OrganizationActionList } from "./OtherOrganizationActions.js";
 import React from "react";
+import { useClerk, useOrganization, useOrganizationList, usePortalRoot, useUser } from "@clerk/shared/react";
 import { jsx, jsxs } from "@emotion/react/jsx-runtime";
-import { useClerk, useOrganization, useOrganizationList, useUser } from "@clerk/shared/react";
 
 //#region src/components/OrganizationSwitcher/OrganizationSwitcherPopover.tsx
 const OrganizationSwitcherPopover = React.forwardRef((props, ref) => {
@@ -24,6 +24,7 @@ const OrganizationSwitcherPopover = React.forwardRef((props, ref) => {
 	const card = useCardState();
 	const { __experimental_asStandalone } = useOrganizationSwitcherContext();
 	const { openOrganizationProfile, openCreateOrganization } = useClerk();
+	const getContainer = usePortalRoot();
 	const { organization: currentOrg } = useOrganization();
 	const { isLoaded, setActive } = useOrganizationList();
 	const { hidePersonal, createOrganizationMode, organizationProfileMode, afterLeaveOrganizationUrl, afterCreateOrganizationUrl, navigateCreateOrganization, navigateOrganizationProfile, afterSelectOrganizationUrl, afterSelectPersonalUrl, organizationProfileProps, skipInvitationScreen } = useOrganizationSwitcherContext();
@@ -48,7 +49,8 @@ const OrganizationSwitcherPopover = React.forwardRef((props, ref) => {
 		if (createOrganizationMode === "navigation") return navigateCreateOrganization();
 		return openCreateOrganization({
 			afterCreateOrganizationUrl,
-			skipInvitationScreen
+			skipInvitationScreen,
+			getContainer
 		});
 	};
 	const handleItemClick = () => {
@@ -56,7 +58,8 @@ const OrganizationSwitcherPopover = React.forwardRef((props, ref) => {
 		if (organizationProfileMode === "navigation") return navigateOrganizationProfile();
 		return openOrganizationProfile({
 			...organizationProfileProps,
-			afterLeaveOrganizationUrl
+			afterLeaveOrganizationUrl,
+			getContainer
 		});
 	};
 	const manageOrganizationButton = /* @__PURE__ */ jsx(SmallAction, {

package/dist/components/OrganizationSwitcher/OrganizationSwitcherPopover.js.map

@@ -1 +1 @@
-{"version":3,"file":"OrganizationSwitcherPopover.js","names":["CogFilled","currentOrg"],"sources":["../../../src/components/OrganizationSwitcher/OrganizationSwitcherPopover.tsx"],"sourcesContent":["import { useClerk, useOrganization, useOrganizationList, useUser } from '@clerk/shared/react';\nimport type { OrganizationResource } from '@clerk/shared/types';\nimport React from 'react';\n\nimport { Actions, SmallAction } from '@/ui/elements/Actions';\nimport { useCardState } from '@/ui/elements/contexts';\nimport { OrganizationPreview } from '@/ui/elements/OrganizationPreview';\nimport { PersonalWorkspacePreview } from '@/ui/elements/PersonalWorkspacePreview';\nimport { PopoverCard } from '@/ui/elements/PopoverCard';\n\nimport { NotificationCountBadge, withProtect } from '../../common';\nimport { useEnvironment, useOrganizationSwitcherContext } from '../../contexts';\nimport { descriptors, Flex, localizationKeys } from '../../customizables';\nimport { RootBox } from '../../elements/RootBox';\nimport { CogFilled } from '../../icons';\nimport type { PropsOfComponent, ThemableCssProp } from '../../styledSystem';\nimport { OrganizationActionList } from './OtherOrganizationActions';\n\ntype OrganizationSwitcherPopoverProps = { close?: (open: boolean) => void } & PropsOfComponent<typeof PopoverCard.Root>;\n\nexport const OrganizationSwitcherPopover = React.forwardRef<HTMLDivElement, OrganizationSwitcherPopoverProps>(\n  (props, ref) => {\n    const { close: unsafeClose, ...rest } = props;\n    const close = () => unsafeClose?.(false);\n    const card = useCardState();\n    const { __experimental_asStandalone } = useOrganizationSwitcherContext();\n    const { openOrganizationProfile, openCreateOrganization } = useClerk();\n    const { organization: currentOrg } = useOrganization();\n    const { isLoaded, setActive } = useOrganizationList();\n    const {\n      hidePersonal,\n      createOrganizationMode,\n      organizationProfileMode,\n      afterLeaveOrganizationUrl,\n      afterCreateOrganizationUrl,\n      navigateCreateOrganization,\n      navigateOrganizationProfile,\n      afterSelectOrganizationUrl,\n      afterSelectPersonalUrl,\n\n      organizationProfileProps,\n      skipInvitationScreen,\n    } = useOrganizationSwitcherContext();\n\n    const { user } = useUser();\n\n    if (!user) {\n      return null;\n    }\n\n    const { username, primaryEmailAddress, primaryPhoneNumber, ...userWithoutIdentifiers } = user;\n\n    if (!isLoaded) {\n      return null;\n    }\n\n    const handleOrganizationClicked = (organization: OrganizationResource) => {\n      return card\n        .runAsync(() =>\n          setActive({\n            organization,\n            redirectUrl: afterSelectOrganizationUrl(organization),\n          }),\n        )\n        .then(close);\n    };\n\n    const handlePersonalWorkspaceClicked = () => {\n      return card\n        .runAsync(() => setActive({ organization: null, redirectUrl: afterSelectPersonalUrl(user) }))\n        .then(close);\n    };\n\n    const handleCreateOrganizationClicked = () => {\n      close();\n      if (createOrganizationMode === 'navigation') {\n        return navigateCreateOrganization();\n      }\n      return openCreateOrganization({ afterCreateOrganizationUrl, skipInvitationScreen });\n    };\n\n    const handleItemClick = () => {\n      close();\n      if (organizationProfileMode === 'navigation') {\n        return navigateOrganizationProfile();\n      }\n\n      return openOrganizationProfile({\n        ...organizationProfileProps,\n        afterLeaveOrganizationUrl,\n      });\n    };\n\n    const manageOrganizationButton = (\n      <SmallAction\n        elementDescriptor={descriptors.organizationSwitcherPopoverActionButton}\n        elementId={descriptors.organizationSwitcherPopoverActionButton.setId('manageOrganization')}\n        iconBoxElementDescriptor={descriptors.organizationSwitcherPopoverActionButtonIconBox}\n        iconBoxElementId={descriptors.organizationSwitcherPopoverActionButtonIconBox.setId('manageOrganization')}\n        iconElementDescriptor={descriptors.organizationSwitcherPopoverActionButtonIcon}\n        iconElementId={descriptors.organizationSwitcherPopoverActionButtonIcon.setId('manageOrganization')}\n        icon={CogFilled}\n        label={localizationKeys('organizationSwitcher.action__manageOrganization')}\n        onClick={() => handleItemClick()}\n        trailing={<NotificationCountBadgeManageButton />}\n        focusRing\n      />\n    );\n\n    const selectedOrganizationPreview = (currentOrg: OrganizationResource) => (\n      <Flex\n        justify='between'\n        align='center'\n        sx={t => ({\n          width: '100%',\n          paddingRight: t.space.$5,\n        })}\n      >\n        <OrganizationPreview\n          elementId={'organizationSwitcherActiveOrganization'}\n          organization={currentOrg}\n          user={user}\n          mainIdentifierVariant='buttonLarge'\n          sx={t => ({\n            padding: `${t.space.$4} ${t.space.$5}`,\n          })}\n        />\n        <Actions role='menu'>{manageOrganizationButton}</Actions>\n      </Flex>\n    );\n\n    return (\n      <RootBox elementDescriptor={descriptors.organizationSwitcherPopoverRootBox}>\n        <PopoverCard.Root\n          elementDescriptor={descriptors.organizationSwitcherPopoverCard}\n          ref={ref}\n          role='dialog'\n          aria-label={`${currentOrg?.name} is active`}\n          shouldEntryAnimate={!__experimental_asStandalone}\n          {...rest}\n        >\n          <PopoverCard.Content elementDescriptor={descriptors.organizationSwitcherPopoverMain}>\n            <Actions\n              elementDescriptor={descriptors.organizationSwitcherPopoverActions}\n              role='menu'\n            >\n              {currentOrg\n                ? selectedOrganizationPreview(currentOrg)\n                : !hidePersonal && (\n                    <PersonalWorkspacePreview\n                      user={userWithoutIdentifiers}\n                      sx={t => ({\n                        padding: `${t.space.$4} ${t.space.$5}`,\n                        width: '100%',\n                      })}\n                      title={localizationKeys('organizationSwitcher.personalWorkspace')}\n                    />\n                  )}\n              <OrganizationActionList\n                onCreateOrganizationClick={handleCreateOrganizationClicked}\n                onPersonalWorkspaceClick={handlePersonalWorkspaceClicked}\n                onOrganizationClick={handleOrganizationClicked}\n              />\n            </Actions>\n          </PopoverCard.Content>\n          <PopoverCard.Footer elementDescriptor={descriptors.organizationSwitcherPopoverFooter} />\n        </PopoverCard.Root>\n      </RootBox>\n    );\n  },\n);\n\nconst NotificationCountBadgeManageButton = withProtect(\n  ({ sx }: { sx?: ThemableCssProp }) => {\n    const { organizationSettings } = useEnvironment();\n\n    const isDomainsEnabled = organizationSettings?.domains?.enabled;\n\n    const { membershipRequests } = useOrganization({\n      membershipRequests: isDomainsEnabled || undefined,\n    });\n\n    if (!membershipRequests?.count) {\n      return null;\n    }\n\n    return (\n      <NotificationCountBadge\n        notificationCount={membershipRequests.count}\n        containerSx={sx}\n      />\n    );\n  },\n  {\n    // if the user is not able to accept a request we should not notify them\n    permission: 'org:sys_memberships:manage',\n  },\n);\n"],"mappings":"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"}
+{"version":3,"file":"OrganizationSwitcherPopover.js","names":["CogFilled","currentOrg"],"sources":["../../../src/components/OrganizationSwitcher/OrganizationSwitcherPopover.tsx"],"sourcesContent":["import { useClerk, useOrganization, useOrganizationList, usePortalRoot, useUser } from '@clerk/shared/react';\nimport type { OrganizationResource } from '@clerk/shared/types';\nimport React from 'react';\n\nimport { Actions, SmallAction } from '@/ui/elements/Actions';\nimport { useCardState } from '@/ui/elements/contexts';\nimport { OrganizationPreview } from '@/ui/elements/OrganizationPreview';\nimport { PersonalWorkspacePreview } from '@/ui/elements/PersonalWorkspacePreview';\nimport { PopoverCard } from '@/ui/elements/PopoverCard';\n\nimport { NotificationCountBadge, withProtect } from '../../common';\nimport { useEnvironment, useOrganizationSwitcherContext } from '../../contexts';\nimport { descriptors, Flex, localizationKeys } from '../../customizables';\nimport { RootBox } from '../../elements/RootBox';\nimport { CogFilled } from '../../icons';\nimport type { PropsOfComponent, ThemableCssProp } from '../../styledSystem';\nimport { OrganizationActionList } from './OtherOrganizationActions';\n\ntype OrganizationSwitcherPopoverProps = { close?: (open: boolean) => void } & PropsOfComponent<typeof PopoverCard.Root>;\n\nexport const OrganizationSwitcherPopover = React.forwardRef<HTMLDivElement, OrganizationSwitcherPopoverProps>(\n  (props, ref) => {\n    const { close: unsafeClose, ...rest } = props;\n    const close = () => unsafeClose?.(false);\n    const card = useCardState();\n    const { __experimental_asStandalone } = useOrganizationSwitcherContext();\n    const { openOrganizationProfile, openCreateOrganization } = useClerk();\n    const getContainer = usePortalRoot();\n    const { organization: currentOrg } = useOrganization();\n    const { isLoaded, setActive } = useOrganizationList();\n    const {\n      hidePersonal,\n      createOrganizationMode,\n      organizationProfileMode,\n      afterLeaveOrganizationUrl,\n      afterCreateOrganizationUrl,\n      navigateCreateOrganization,\n      navigateOrganizationProfile,\n      afterSelectOrganizationUrl,\n      afterSelectPersonalUrl,\n\n      organizationProfileProps,\n      skipInvitationScreen,\n    } = useOrganizationSwitcherContext();\n\n    const { user } = useUser();\n\n    if (!user) {\n      return null;\n    }\n\n    const { username, primaryEmailAddress, primaryPhoneNumber, ...userWithoutIdentifiers } = user;\n\n    if (!isLoaded) {\n      return null;\n    }\n\n    const handleOrganizationClicked = (organization: OrganizationResource) => {\n      return card\n        .runAsync(() =>\n          setActive({\n            organization,\n            redirectUrl: afterSelectOrganizationUrl(organization),\n          }),\n        )\n        .then(close);\n    };\n\n    const handlePersonalWorkspaceClicked = () => {\n      return card\n        .runAsync(() => setActive({ organization: null, redirectUrl: afterSelectPersonalUrl(user) }))\n        .then(close);\n    };\n\n    const handleCreateOrganizationClicked = () => {\n      close();\n      if (createOrganizationMode === 'navigation') {\n        return navigateCreateOrganization();\n      }\n      return openCreateOrganization({ afterCreateOrganizationUrl, skipInvitationScreen, getContainer });\n    };\n\n    const handleItemClick = () => {\n      close();\n      if (organizationProfileMode === 'navigation') {\n        return navigateOrganizationProfile();\n      }\n\n      return openOrganizationProfile({\n        ...organizationProfileProps,\n        afterLeaveOrganizationUrl,\n        getContainer,\n      });\n    };\n\n    const manageOrganizationButton = (\n      <SmallAction\n        elementDescriptor={descriptors.organizationSwitcherPopoverActionButton}\n        elementId={descriptors.organizationSwitcherPopoverActionButton.setId('manageOrganization')}\n        iconBoxElementDescriptor={descriptors.organizationSwitcherPopoverActionButtonIconBox}\n        iconBoxElementId={descriptors.organizationSwitcherPopoverActionButtonIconBox.setId('manageOrganization')}\n        iconElementDescriptor={descriptors.organizationSwitcherPopoverActionButtonIcon}\n        iconElementId={descriptors.organizationSwitcherPopoverActionButtonIcon.setId('manageOrganization')}\n        icon={CogFilled}\n        label={localizationKeys('organizationSwitcher.action__manageOrganization')}\n        onClick={() => handleItemClick()}\n        trailing={<NotificationCountBadgeManageButton />}\n        focusRing\n      />\n    );\n\n    const selectedOrganizationPreview = (currentOrg: OrganizationResource) => (\n      <Flex\n        justify='between'\n        align='center'\n        sx={t => ({\n          width: '100%',\n          paddingRight: t.space.$5,\n        })}\n      >\n        <OrganizationPreview\n          elementId={'organizationSwitcherActiveOrganization'}\n          organization={currentOrg}\n          user={user}\n          mainIdentifierVariant='buttonLarge'\n          sx={t => ({\n            padding: `${t.space.$4} ${t.space.$5}`,\n          })}\n        />\n        <Actions role='menu'>{manageOrganizationButton}</Actions>\n      </Flex>\n    );\n\n    return (\n      <RootBox elementDescriptor={descriptors.organizationSwitcherPopoverRootBox}>\n        <PopoverCard.Root\n          elementDescriptor={descriptors.organizationSwitcherPopoverCard}\n          ref={ref}\n          role='dialog'\n          aria-label={`${currentOrg?.name} is active`}\n          shouldEntryAnimate={!__experimental_asStandalone}\n          {...rest}\n        >\n          <PopoverCard.Content elementDescriptor={descriptors.organizationSwitcherPopoverMain}>\n            <Actions\n              elementDescriptor={descriptors.organizationSwitcherPopoverActions}\n              role='menu'\n            >\n              {currentOrg\n                ? selectedOrganizationPreview(currentOrg)\n                : !hidePersonal && (\n                    <PersonalWorkspacePreview\n                      user={userWithoutIdentifiers}\n                      sx={t => ({\n                        padding: `${t.space.$4} ${t.space.$5}`,\n                        width: '100%',\n                      })}\n                      title={localizationKeys('organizationSwitcher.personalWorkspace')}\n                    />\n                  )}\n              <OrganizationActionList\n                onCreateOrganizationClick={handleCreateOrganizationClicked}\n                onPersonalWorkspaceClick={handlePersonalWorkspaceClicked}\n                onOrganizationClick={handleOrganizationClicked}\n              />\n            </Actions>\n          </PopoverCard.Content>\n          <PopoverCard.Footer elementDescriptor={descriptors.organizationSwitcherPopoverFooter} />\n        </PopoverCard.Root>\n      </RootBox>\n    );\n  },\n);\n\nconst NotificationCountBadgeManageButton = withProtect(\n  ({ sx }: { sx?: ThemableCssProp }) => {\n    const { organizationSettings } = useEnvironment();\n\n    const isDomainsEnabled = organizationSettings?.domains?.enabled;\n\n    const { membershipRequests } = useOrganization({\n      membershipRequests: isDomainsEnabled || undefined,\n    });\n\n    if (!membershipRequests?.count) {\n      return null;\n    }\n\n    return (\n      <NotificationCountBadge\n        notificationCount={membershipRequests.count}\n        containerSx={sx}\n      />\n    );\n  },\n  {\n    // if the user is not able to accept a request we should not notify them\n    permission: 'org:sys_memberships:manage',\n  },\n);\n"],"mappings":"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"}

package/dist/components/OrganizationSwitcher/OrganizationSwitcherTrigger.js

@@ -12,8 +12,8 @@ import { OrganizationPreview } from "../../elements/OrganizationPreview.js";
 import { PersonalWorkspacePreview } from "../../elements/PersonalWorkspacePreview.js";
 import { withAvatarShimmer } from "../../elements/withAvatarShimmer.js";
 import { forwardRef } from "react";
-import { jsx, jsxs } from "@emotion/react/jsx-runtime";
 import { useOrganization, useOrganizationList, useUser } from "@clerk/shared/react";
+import { jsx, jsxs } from "@emotion/react/jsx-runtime";
 
 //#region src/components/OrganizationSwitcher/OrganizationSwitcherTrigger.tsx
 const OrganizationSwitcherTrigger = withAvatarShimmer(forwardRef((props, ref) => {

package/dist/components/OrganizationSwitcher/UserInvitationSuggestionList.js

@@ -12,8 +12,8 @@ import { organizationListParams, populateCacheUpdateItem } from "./utils.js";
 import { Actions } from "../../elements/Actions.js";
 import { OrganizationPreview } from "../../elements/OrganizationPreview.js";
 import { PreviewButton } from "../../elements/PreviewButton.js";
-import { jsx, jsxs } from "@emotion/react/jsx-runtime";
 import { useClerk, useOrganization, useOrganizationList } from "@clerk/shared/react";
+import { jsx, jsxs } from "@emotion/react/jsx-runtime";
 
 //#region src/components/OrganizationSwitcher/UserInvitationSuggestionList.tsx
 const useFetchInvitations = () => {

package/dist/components/OrganizationSwitcher/UserMembershipList.js

@@ -11,8 +11,8 @@ import { OrganizationPreview } from "../../elements/OrganizationPreview.js";
 import { PreviewButton } from "../../elements/PreviewButton.js";
 import { PersonalWorkspacePreview } from "../../elements/PersonalWorkspacePreview.js";
 import React from "react";
-import { jsx, jsxs } from "@emotion/react/jsx-runtime";
 import { useOrganization, useOrganizationList, useUser } from "@clerk/shared/react";
+import { jsx, jsxs } from "@emotion/react/jsx-runtime";
 
 //#region src/components/OrganizationSwitcher/UserMembershipList.tsx
 const useFetchMemberships = () => {

package/dist/components/PaymentMethods/AddPaymentMethod.js

@@ -13,8 +13,8 @@ import { FormButtons } from "../../elements/FormButtons.js";
 import { FormContainer } from "../../elements/FormContainer.js";
 import { PaymentElementSkeleton } from "./PaymentElementSkeleton.js";
 import { useEffect, useMemo, useRef, useState } from "react";
-import { Fragment as Fragment$1, jsx, jsxs } from "@emotion/react/jsx-runtime";
 import { __experimental_PaymentElement, __experimental_PaymentElementProvider, __experimental_usePaymentElement, createContextAndHook } from "@clerk/shared/react";
+import { Fragment as Fragment$1, jsx, jsxs } from "@emotion/react/jsx-runtime";
 
 //#region src/components/PaymentMethods/AddPaymentMethod.tsx
 const useStripeAppearance = (node) => {

package/dist/components/PaymentMethods/PaymentMethods.js

@@ -14,8 +14,8 @@ import { FullHeightLoader } from "../../elements/FullHeightLoader.js";
 import { ProfileSection } from "../../elements/Section.js";
 import { TestPaymentMethod } from "./TestPaymentMethod.js";
 import { Fragment, useMemo, useRef } from "react";
-import { Fragment as Fragment$1, jsx, jsxs } from "@emotion/react/jsx-runtime";
 import { useClerk, useOrganizationContext } from "@clerk/shared/react";
+import { Fragment as Fragment$1, jsx, jsxs } from "@emotion/react/jsx-runtime";
 
 //#region src/components/PaymentMethods/PaymentMethods.tsx
 const AddScreen = withCardStateProvider(({ onSuccess }) => {

package/dist/components/PricingTable/PricingTable.js

@@ -4,12 +4,13 @@ import { Flow } from "../../customizables/Flow.js";
 import { PricingTableDefault } from "./PricingTableDefault.js";
 import { PricingTableMatrix } from "./PricingTableMatrix.js";
 import { useEffect, useMemo, useState } from "react";
+import { useClerk, usePortalRoot } from "@clerk/shared/react";
 import { jsx } from "@emotion/react/jsx-runtime";
-import { useClerk } from "@clerk/shared/react";
 
 //#region src/components/PricingTable/PricingTable.tsx
 const PricingTableRoot = (props) => {
 	const clerk = useClerk();
+	const getContainer = usePortalRoot();
 	const { mode = "mounted", signInMode = "redirect" } = usePricingTableContext();
 	const isCompact = mode === "modal";
 	const { data: subscription, subscriptionItems } = useSubscription();
@@ -37,7 +38,7 @@ const PricingTableRoot = (props) => {
 	}, [defaultPlanPeriod]);
 	const selectPlan = (plan, event) => {
 		if (!clerk.isSignedIn) {
-			if (signInMode === "modal") return clerk.openSignIn();
+			if (signInMode === "modal") return clerk.openSignIn({ getContainer });
 			return clerk.redirectToSignIn();
 		}
 		handleSelectPlan({

package/dist/components/PricingTable/PricingTable.js.map

@@ -1 +1 @@
-{"version":3,"file":"PricingTable.js","names":[],"sources":["../../../src/components/PricingTable/PricingTable.tsx"],"sourcesContent":["import { useClerk } from '@clerk/shared/react';\nimport type { BillingPlanResource, BillingSubscriptionPlanPeriod, PricingTableProps } from '@clerk/shared/types';\nimport { useEffect, useMemo, useState } from 'react';\n\nimport { Flow } from '@/ui/customizables/Flow';\n\nimport { usePaymentMethods, usePlans, usePlansContext, usePricingTableContext, useSubscription } from '../../contexts';\nimport { PricingTableDefault } from './PricingTableDefault';\nimport { PricingTableMatrix } from './PricingTableMatrix';\n\nconst PricingTableRoot = (props: PricingTableProps) => {\n  const clerk = useClerk();\n  const { mode = 'mounted', signInMode = 'redirect' } = usePricingTableContext();\n  const isCompact = mode === 'modal';\n  const { data: subscription, subscriptionItems } = useSubscription();\n  const { data: plans } = usePlans();\n  const { handleSelectPlan } = usePlansContext();\n\n  const plansToRender = useMemo(() => {\n    return clerk.isSignedIn\n      ? subscription // All users in billing-enabled applications have a subscription\n        ? plans\n        : []\n      : plans;\n  }, [clerk.isSignedIn, plans, subscription]);\n\n  const defaultPlanPeriod = useMemo(() => {\n    if (isCompact) {\n      const upcomingSubscription = subscriptionItems?.find(sub => sub.status === 'upcoming');\n      if (upcomingSubscription) {\n        return upcomingSubscription.planPeriod;\n      }\n\n      // don't pay attention to the default plan\n      const activeSubscription = subscriptionItems?.find(\n        sub => !sub.canceledAt && sub.status === 'active' && !sub.plan.isDefault,\n      );\n      if (activeSubscription) {\n        return activeSubscription.planPeriod;\n      }\n    }\n\n    return 'annual';\n  }, [isCompact, subscriptionItems]);\n\n  const [planPeriod, setPlanPeriod] = useState<BillingSubscriptionPlanPeriod>(defaultPlanPeriod);\n\n  useEffect(() => {\n    setPlanPeriod(defaultPlanPeriod);\n  }, [defaultPlanPeriod]);\n\n  const selectPlan = (plan: BillingPlanResource, event?: React.MouseEvent<HTMLElement>) => {\n    if (!clerk.isSignedIn) {\n      if (signInMode === 'modal') {\n        return clerk.openSignIn();\n      }\n      return clerk.redirectToSignIn();\n    }\n\n    handleSelectPlan({\n      mode,\n      plan,\n      planPeriod,\n      event,\n      appearance: props.checkoutProps?.appearance,\n      newSubscriptionRedirectUrl: props.newSubscriptionRedirectUrl,\n    });\n    return;\n  };\n\n  // Pre-fetch payment methods\n  usePaymentMethods();\n\n  return (\n    <Flow.Root\n      flow='pricingTable'\n      isFlowReady={clerk.isSignedIn ? !!subscription : plans.length > 0}\n      sx={{\n        width: '100%',\n      }}\n    >\n      {mode !== 'modal' && (props as any).layout === 'matrix' ? (\n        <PricingTableMatrix\n          plans={plansToRender}\n          planPeriod={planPeriod}\n          setPlanPeriod={setPlanPeriod}\n          onSelect={selectPlan}\n          highlightedPlan={(props as any).highlightPlan}\n        />\n      ) : (\n        <PricingTableDefault\n          plans={plansToRender}\n          planPeriod={planPeriod}\n          setPlanPeriod={setPlanPeriod}\n          onSelect={selectPlan}\n          isCompact={isCompact}\n          props={props}\n        />\n      )}\n    </Flow.Root>\n  );\n};\n\n// When used in a modal, we need to wrap the root in a div to avoid layout issues\n// within UserProfile and OrganizationProfile.\nconst PricingTableModal = (props: PricingTableProps) => {\n  return (\n    // TODO: Used by InvisibleRootBox, can we simplify?\n    <div>\n      <PricingTableRoot {...props} />\n    </div>\n  );\n};\n\nexport const PricingTable = (props: PricingTableProps) => {\n  const { mode = 'mounted' } = usePricingTableContext();\n\n  return mode === 'modal' ? <PricingTableModal {...props} /> : <PricingTableRoot {...props} />;\n};\n"],"mappings":";;;;;;;;;;AAUA,MAAM,oBAAoB,UAA6B;CACrD,MAAM,QAAQ,UAAU;CACxB,MAAM,EAAE,OAAO,WAAW,aAAa,eAAe,wBAAwB;CAC9E,MAAM,YAAY,SAAS;CAC3B,MAAM,EAAE,MAAM,cAAc,sBAAsB,iBAAiB;CACnE,MAAM,EAAE,MAAM,UAAU,UAAU;CAClC,MAAM,EAAE,qBAAqB,iBAAiB;CAE9C,MAAM,gBAAgB,cAAc;AAClC,SAAO,MAAM,aACT,eACE,QACA,EAAE,GACJ;IACH;EAAC,MAAM;EAAY;EAAO;EAAa,CAAC;CAE3C,MAAM,oBAAoB,cAAc;AACtC,MAAI,WAAW;GACb,MAAM,uBAAuB,mBAAmB,MAAK,QAAO,IAAI,WAAW,WAAW;AACtF,OAAI,qBACF,QAAO,qBAAqB;GAI9B,MAAM,qBAAqB,mBAAmB,MAC5C,QAAO,CAAC,IAAI,cAAc,IAAI,WAAW,YAAY,CAAC,IAAI,KAAK,UAChE;AACD,OAAI,mBACF,QAAO,mBAAmB;;AAI9B,SAAO;IACN,CAAC,WAAW,kBAAkB,CAAC;CAElC,MAAM,CAAC,YAAY,iBAAiB,SAAwC,kBAAkB;AAE9F,iBAAgB;AACd,gBAAc,kBAAkB;IAC/B,CAAC,kBAAkB,CAAC;CAEvB,MAAM,cAAc,MAA2B,UAA0C;AACvF,MAAI,CAAC,MAAM,YAAY;AACrB,OAAI,eAAe,QACjB,QAAO,MAAM,YAAY;AAE3B,UAAO,MAAM,kBAAkB;;AAGjC,mBAAiB;GACf;GACA;GACA;GACA;GACA,YAAY,MAAM,eAAe;GACjC,4BAA4B,MAAM;GACnC,CAAC;;AAKJ,oBAAmB;AAEnB,QACE,oBAAC,KAAK;EACJ,MAAK;EACL,aAAa,MAAM,aAAa,CAAC,CAAC,eAAe,MAAM,SAAS;EAChE,IAAI,EACF,OAAO,QACR;YAEA,SAAS,WAAY,MAAc,WAAW,WAC7C,oBAAC;GACC,OAAO;GACK;GACG;GACf,UAAU;GACV,iBAAkB,MAAc;IAChC,GAEF,oBAAC;GACC,OAAO;GACK;GACG;GACf,UAAU;GACC;GACJ;IACP;GAEM;;AAMhB,MAAM,qBAAqB,UAA6B;AACtD,QAEE,oBAAC,mBACC,oBAAC,oBAAiB,GAAI,QAAS,GAC3B;;AAIV,MAAa,gBAAgB,UAA6B;CACxD,MAAM,EAAE,OAAO,cAAc,wBAAwB;AAErD,QAAO,SAAS,UAAU,oBAAC,qBAAkB,GAAI,QAAS,GAAG,oBAAC,oBAAiB,GAAI,QAAS"}
+{"version":3,"file":"PricingTable.js","names":[],"sources":["../../../src/components/PricingTable/PricingTable.tsx"],"sourcesContent":["import { useClerk, usePortalRoot } from '@clerk/shared/react';\nimport type { BillingPlanResource, BillingSubscriptionPlanPeriod, PricingTableProps } from '@clerk/shared/types';\nimport { useEffect, useMemo, useState } from 'react';\n\nimport { Flow } from '@/ui/customizables/Flow';\n\nimport { usePaymentMethods, usePlans, usePlansContext, usePricingTableContext, useSubscription } from '../../contexts';\nimport { PricingTableDefault } from './PricingTableDefault';\nimport { PricingTableMatrix } from './PricingTableMatrix';\n\nconst PricingTableRoot = (props: PricingTableProps) => {\n  const clerk = useClerk();\n  const getContainer = usePortalRoot();\n  const { mode = 'mounted', signInMode = 'redirect' } = usePricingTableContext();\n  const isCompact = mode === 'modal';\n  const { data: subscription, subscriptionItems } = useSubscription();\n  const { data: plans } = usePlans();\n  const { handleSelectPlan } = usePlansContext();\n\n  const plansToRender = useMemo(() => {\n    return clerk.isSignedIn\n      ? subscription // All users in billing-enabled applications have a subscription\n        ? plans\n        : []\n      : plans;\n  }, [clerk.isSignedIn, plans, subscription]);\n\n  const defaultPlanPeriod = useMemo(() => {\n    if (isCompact) {\n      const upcomingSubscription = subscriptionItems?.find(sub => sub.status === 'upcoming');\n      if (upcomingSubscription) {\n        return upcomingSubscription.planPeriod;\n      }\n\n      // don't pay attention to the default plan\n      const activeSubscription = subscriptionItems?.find(\n        sub => !sub.canceledAt && sub.status === 'active' && !sub.plan.isDefault,\n      );\n      if (activeSubscription) {\n        return activeSubscription.planPeriod;\n      }\n    }\n\n    return 'annual';\n  }, [isCompact, subscriptionItems]);\n\n  const [planPeriod, setPlanPeriod] = useState<BillingSubscriptionPlanPeriod>(defaultPlanPeriod);\n\n  useEffect(() => {\n    setPlanPeriod(defaultPlanPeriod);\n  }, [defaultPlanPeriod]);\n\n  const selectPlan = (plan: BillingPlanResource, event?: React.MouseEvent<HTMLElement>) => {\n    if (!clerk.isSignedIn) {\n      if (signInMode === 'modal') {\n        return clerk.openSignIn({ getContainer });\n      }\n      return clerk.redirectToSignIn();\n    }\n\n    handleSelectPlan({\n      mode,\n      plan,\n      planPeriod,\n      event,\n      appearance: props.checkoutProps?.appearance,\n      newSubscriptionRedirectUrl: props.newSubscriptionRedirectUrl,\n    });\n    return;\n  };\n\n  // Pre-fetch payment methods\n  usePaymentMethods();\n\n  return (\n    <Flow.Root\n      flow='pricingTable'\n      isFlowReady={clerk.isSignedIn ? !!subscription : plans.length > 0}\n      sx={{\n        width: '100%',\n      }}\n    >\n      {mode !== 'modal' && (props as any).layout === 'matrix' ? (\n        <PricingTableMatrix\n          plans={plansToRender}\n          planPeriod={planPeriod}\n          setPlanPeriod={setPlanPeriod}\n          onSelect={selectPlan}\n          highlightedPlan={(props as any).highlightPlan}\n        />\n      ) : (\n        <PricingTableDefault\n          plans={plansToRender}\n          planPeriod={planPeriod}\n          setPlanPeriod={setPlanPeriod}\n          onSelect={selectPlan}\n          isCompact={isCompact}\n          props={props}\n        />\n      )}\n    </Flow.Root>\n  );\n};\n\n// When used in a modal, we need to wrap the root in a div to avoid layout issues\n// within UserProfile and OrganizationProfile.\nconst PricingTableModal = (props: PricingTableProps) => {\n  return (\n    // TODO: Used by InvisibleRootBox, can we simplify?\n    <div>\n      <PricingTableRoot {...props} />\n    </div>\n  );\n};\n\nexport const PricingTable = (props: PricingTableProps) => {\n  const { mode = 'mounted' } = usePricingTableContext();\n\n  return mode === 'modal' ? <PricingTableModal {...props} /> : <PricingTableRoot {...props} />;\n};\n"],"mappings":";;;;;;;;;;AAUA,MAAM,oBAAoB,UAA6B;CACrD,MAAM,QAAQ,UAAU;CACxB,MAAM,eAAe,eAAe;CACpC,MAAM,EAAE,OAAO,WAAW,aAAa,eAAe,wBAAwB;CAC9E,MAAM,YAAY,SAAS;CAC3B,MAAM,EAAE,MAAM,cAAc,sBAAsB,iBAAiB;CACnE,MAAM,EAAE,MAAM,UAAU,UAAU;CAClC,MAAM,EAAE,qBAAqB,iBAAiB;CAE9C,MAAM,gBAAgB,cAAc;AAClC,SAAO,MAAM,aACT,eACE,QACA,EAAE,GACJ;IACH;EAAC,MAAM;EAAY;EAAO;EAAa,CAAC;CAE3C,MAAM,oBAAoB,cAAc;AACtC,MAAI,WAAW;GACb,MAAM,uBAAuB,mBAAmB,MAAK,QAAO,IAAI,WAAW,WAAW;AACtF,OAAI,qBACF,QAAO,qBAAqB;GAI9B,MAAM,qBAAqB,mBAAmB,MAC5C,QAAO,CAAC,IAAI,cAAc,IAAI,WAAW,YAAY,CAAC,IAAI,KAAK,UAChE;AACD,OAAI,mBACF,QAAO,mBAAmB;;AAI9B,SAAO;IACN,CAAC,WAAW,kBAAkB,CAAC;CAElC,MAAM,CAAC,YAAY,iBAAiB,SAAwC,kBAAkB;AAE9F,iBAAgB;AACd,gBAAc,kBAAkB;IAC/B,CAAC,kBAAkB,CAAC;CAEvB,MAAM,cAAc,MAA2B,UAA0C;AACvF,MAAI,CAAC,MAAM,YAAY;AACrB,OAAI,eAAe,QACjB,QAAO,MAAM,WAAW,EAAE,cAAc,CAAC;AAE3C,UAAO,MAAM,kBAAkB;;AAGjC,mBAAiB;GACf;GACA;GACA;GACA;GACA,YAAY,MAAM,eAAe;GACjC,4BAA4B,MAAM;GACnC,CAAC;;AAKJ,oBAAmB;AAEnB,QACE,oBAAC,KAAK;EACJ,MAAK;EACL,aAAa,MAAM,aAAa,CAAC,CAAC,eAAe,MAAM,SAAS;EAChE,IAAI,EACF,OAAO,QACR;YAEA,SAAS,WAAY,MAAc,WAAW,WAC7C,oBAAC;GACC,OAAO;GACK;GACG;GACf,UAAU;GACV,iBAAkB,MAAc;IAChC,GAEF,oBAAC;GACC,OAAO;GACK;GACG;GACf,UAAU;GACC;GACJ;IACP;GAEM;;AAMhB,MAAM,qBAAqB,UAA6B;AACtD,QAEE,oBAAC,mBACC,oBAAC,oBAAiB,GAAI,QAAS,GAC3B;;AAIV,MAAa,gBAAgB,UAA6B;CACxD,MAAM,EAAE,OAAO,cAAc,wBAAwB;AAErD,QAAO,SAAS,UAAU,oBAAC,qBAAkB,GAAI,QAAS,GAAG,oBAAC,oBAAiB,GAAI,QAAS"}

package/dist/components/PricingTable/PricingTableDefault.js

@@ -15,8 +15,8 @@ import { SubscriptionBadge } from "../Subscriptions/badge.js";
 import { Switch } from "../../elements/Switch.js";
 import { getPricingFooterState } from "./utils/pricing-footer-state.js";
 import * as React$1 from "react";
-import { jsx, jsxs } from "@emotion/react/jsx-runtime";
 import { useClerk, useOrganizationContext, useSession } from "@clerk/shared/react";
+import { jsx, jsxs } from "@emotion/react/jsx-runtime";
 
 //#region src/components/PricingTable/PricingTableDefault.tsx
 function PricingTableDefault({ plans, planPeriod, setPlanPeriod, onSelect, isCompact, props }) {

package/dist/components/SessionTasks/index.js

@@ -9,8 +9,8 @@ import { LoadingCardContainer } from "../../elements/LoadingCard.js";
 import { TaskChooseOrganization } from "./tasks/TaskChooseOrganization/index.js";
 import { TaskResetPassword } from "./tasks/TaskResetPassword/index.js";
 import { useEffect, useRef } from "react";
-import { jsx, jsxs } from "@emotion/react/jsx-runtime";
 import { useClerk } from "@clerk/shared/react";
+import { jsx, jsxs } from "@emotion/react/jsx-runtime";
 import { INTERNAL_SESSION_TASK_ROUTE_BY_KEY } from "@clerk/shared/internal/clerk-js/sessionTasks";
 import { eventComponentMounted } from "@clerk/shared/telemetry";
 

package/dist/components/SessionTasks/tasks/TaskChooseOrganization/ChooseOrganizationScreen.js

@@ -14,9 +14,9 @@ import { OrganizationPreview } from "../../../../elements/OrganizationPreview.js
 import { OrganizationPreviewButton, OrganizationPreviewListItem, OrganizationPreviewListItemButton, OrganizationPreviewListItems, OrganizationPreviewSpinner, sharedMainIdentifierSx } from "../../../../common/organizations/OrganizationPreview.js";
 import { useOrganizationListInView } from "../../../../hooks/useOrganizationListInView.js";
 import React, { useState } from "react";
+import { useClerk, useOrganizationList, useUser } from "@clerk/shared/react";
 import { Fragment as Fragment$1, jsx, jsxs } from "@emotion/react/jsx-runtime";
 import { isClerkAPIResponseError } from "@clerk/shared/error";
-import { useClerk, useOrganizationList, useUser } from "@clerk/shared/react";
 
 //#region src/components/SessionTasks/tasks/TaskChooseOrganization/ChooseOrganizationScreen.tsx
 const ChooseOrganizationScreen = (props) => {

package/dist/components/SessionTasks/tasks/TaskChooseOrganization/CreateOrganizationScreen.js

@@ -10,8 +10,8 @@ import { FormButtonContainer } from "../../../../elements/FormButtons.js";
 import { FormContainer } from "../../../../elements/FormContainer.js";
 import { createSlug } from "../../../../utils/createSlug.js";
 import { organizationListParams } from "../../../OrganizationSwitcher/utils.js";
-import { Fragment, jsx, jsxs } from "@emotion/react/jsx-runtime";
 import { useOrganizationList } from "@clerk/shared/react";
+import { Fragment, jsx, jsxs } from "@emotion/react/jsx-runtime";
 
 //#region src/components/SessionTasks/tasks/TaskChooseOrganization/CreateOrganizationScreen.tsx
 const CreateOrganizationScreen = (props) => {

package/dist/components/SessionTasks/tasks/TaskChooseOrganization/index.js

@@ -12,8 +12,8 @@ import { withTaskGuard } from "../shared/withTaskGuard.js";
 import { ChooseOrganizationScreen } from "./ChooseOrganizationScreen.js";
 import { CreateOrganizationScreen } from "./CreateOrganizationScreen.js";
 import { useState } from "react";
-import { jsx, jsxs } from "@emotion/react/jsx-runtime";
 import { useClerk, useSession, useUser } from "@clerk/shared/react";
+import { jsx, jsxs } from "@emotion/react/jsx-runtime";
 
 //#region src/components/SessionTasks/tasks/TaskChooseOrganization/index.tsx
 const TaskChooseOrganizationInternal = () => {

package/dist/components/SessionTasks/tasks/TaskResetPassword/index.js

@@ -17,8 +17,8 @@ import { handleError } from "../../../../utils/errorHandler.js";
 import { Form } from "../../../../elements/Form.js";
 import { useMultipleSessions } from "../../../../hooks/useMultipleSessions.js";
 import { withTaskGuard } from "../shared/withTaskGuard.js";
-import { jsx, jsxs } from "@emotion/react/jsx-runtime";
 import { useClerk, useReverification } from "@clerk/shared/react";
+import { jsx, jsxs } from "@emotion/react/jsx-runtime";
 
 //#region src/components/SessionTasks/tasks/TaskResetPassword/index.tsx
 const TaskResetPasswordInternal = () => {

package/dist/components/SignIn/SignInClientTrust.js

@@ -0,0 +1,49 @@
+import { useCoreSignIn } from "../../contexts/CoreClientContext.js";
+import { withCardStateProvider } from "../../elements/contexts/index.js";
+import { LoadingCard } from "../../elements/LoadingCard.js";
+import { withRedirectToAfterSignIn, withRedirectToSignInTask } from "../../common/withRedirect.js";
+import { SignInFactorTwoAlternativeMethods } from "./SignInFactorTwoAlternativeMethods.js";
+import { SignInFactorTwoEmailCodeCard } from "./SignInFactorTwoEmailCodeCard.js";
+import { SignInFactorTwoEmailLinkCard } from "./SignInFactorTwoEmailLinkCard.js";
+import { SignInFactorTwoPhoneCodeCard } from "./SignInFactorTwoPhoneCodeCard.js";
+import { useSecondFactorSelection } from "./useSecondFactorSelection.js";
+import { jsx } from "@emotion/react/jsx-runtime";
+
+//#region src/components/SignIn/SignInClientTrust.tsx
+function SignInClientTrustInternal() {
+	const { currentFactor, factorAlreadyPrepared, handleFactorPrepare, selectFactor, showAllStrategies, toggleAllStrategies } = useSecondFactorSelection(useCoreSignIn().supportedSecondFactors);
+	if (!currentFactor) return /* @__PURE__ */ jsx(LoadingCard, {});
+	if (showAllStrategies) return /* @__PURE__ */ jsx(SignInFactorTwoAlternativeMethods, {
+		onBackLinkClick: toggleAllStrategies,
+		onFactorSelected: selectFactor
+	});
+	switch (currentFactor?.strategy) {
+		case "phone_code": return /* @__PURE__ */ jsx(SignInFactorTwoPhoneCodeCard, {
+			showClientTrustNotice: true,
+			factorAlreadyPrepared,
+			onFactorPrepare: handleFactorPrepare,
+			factor: currentFactor,
+			onShowAlternativeMethodsClicked: toggleAllStrategies
+		});
+		case "email_code": return /* @__PURE__ */ jsx(SignInFactorTwoEmailCodeCard, {
+			showClientTrustNotice: true,
+			factorAlreadyPrepared,
+			onFactorPrepare: handleFactorPrepare,
+			factor: currentFactor,
+			onShowAlternativeMethodsClicked: toggleAllStrategies
+		});
+		case "email_link": return /* @__PURE__ */ jsx(SignInFactorTwoEmailLinkCard, {
+			showClientTrustNotice: true,
+			factorAlreadyPrepared,
+			onFactorPrepare: handleFactorPrepare,
+			factor: currentFactor,
+			onShowAlternativeMethodsClicked: toggleAllStrategies
+		});
+		default: return /* @__PURE__ */ jsx(LoadingCard, {});
+	}
+}
+const SignInClientTrust = withRedirectToSignInTask(withRedirectToAfterSignIn(withCardStateProvider(SignInClientTrustInternal)));
+
+//#endregion
+export { SignInClientTrust };
+//# sourceMappingURL=SignInClientTrust.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"SignInClientTrust.js","names":[],"sources":["../../../src/components/SignIn/SignInClientTrust.tsx"],"sourcesContent":["import { withCardStateProvider } from '@/ui/elements/contexts';\nimport { LoadingCard } from '@/ui/elements/LoadingCard';\n\nimport { withRedirectToAfterSignIn, withRedirectToSignInTask } from '../../common';\nimport { useCoreSignIn } from '../../contexts';\nimport { SignInFactorTwoAlternativeMethods } from './SignInFactorTwoAlternativeMethods';\nimport { SignInFactorTwoEmailCodeCard } from './SignInFactorTwoEmailCodeCard';\nimport { SignInFactorTwoEmailLinkCard } from './SignInFactorTwoEmailLinkCard';\nimport { SignInFactorTwoPhoneCodeCard } from './SignInFactorTwoPhoneCodeCard';\nimport { useSecondFactorSelection } from './useSecondFactorSelection';\n\nfunction SignInClientTrustInternal(): JSX.Element {\n  const signIn = useCoreSignIn();\n  const {\n    currentFactor,\n    factorAlreadyPrepared,\n    handleFactorPrepare,\n    selectFactor,\n    showAllStrategies,\n    toggleAllStrategies,\n  } = useSecondFactorSelection(signIn.supportedSecondFactors);\n\n  if (!currentFactor) {\n    return <LoadingCard />;\n  }\n\n  if (showAllStrategies) {\n    return (\n      <SignInFactorTwoAlternativeMethods\n        onBackLinkClick={toggleAllStrategies}\n        onFactorSelected={selectFactor}\n      />\n    );\n  }\n\n  switch (currentFactor?.strategy) {\n    case 'phone_code':\n      return (\n        <SignInFactorTwoPhoneCodeCard\n          showClientTrustNotice\n          factorAlreadyPrepared={factorAlreadyPrepared}\n          onFactorPrepare={handleFactorPrepare}\n          factor={currentFactor}\n          onShowAlternativeMethodsClicked={toggleAllStrategies}\n        />\n      );\n    case 'email_code':\n      return (\n        <SignInFactorTwoEmailCodeCard\n          showClientTrustNotice\n          factorAlreadyPrepared={factorAlreadyPrepared}\n          onFactorPrepare={handleFactorPrepare}\n          factor={currentFactor}\n          onShowAlternativeMethodsClicked={toggleAllStrategies}\n        />\n      );\n    case 'email_link':\n      return (\n        <SignInFactorTwoEmailLinkCard\n          showClientTrustNotice\n          factorAlreadyPrepared={factorAlreadyPrepared}\n          onFactorPrepare={handleFactorPrepare}\n          factor={currentFactor}\n          onShowAlternativeMethodsClicked={toggleAllStrategies}\n        />\n      );\n    default:\n      return <LoadingCard />;\n  }\n}\n\nexport const SignInClientTrust = withRedirectToSignInTask(\n  withRedirectToAfterSignIn(withCardStateProvider(SignInClientTrustInternal)),\n);\n"],"mappings":";;;;;;;;;;;;AAWA,SAAS,4BAAyC;CAEhD,MAAM,EACJ,eACA,uBACA,qBACA,cACA,mBACA,wBACE,yBARW,eAAe,CAQM,uBAAuB;AAE3D,KAAI,CAAC,cACH,QAAO,oBAAC,gBAAc;AAGxB,KAAI,kBACF,QACE,oBAAC;EACC,iBAAiB;EACjB,kBAAkB;GAClB;AAIN,SAAQ,eAAe,UAAvB;EACE,KAAK,aACH,QACE,oBAAC;GACC;GACuB;GACvB,iBAAiB;GACjB,QAAQ;GACR,iCAAiC;IACjC;EAEN,KAAK,aACH,QACE,oBAAC;GACC;GACuB;GACvB,iBAAiB;GACjB,QAAQ;GACR,iCAAiC;IACjC;EAEN,KAAK,aACH,QACE,oBAAC;GACC;GACuB;GACvB,iBAAiB;GACjB,QAAQ;GACR,iCAAiC;IACjC;EAEN,QACE,QAAO,oBAAC,gBAAc;;;AAI5B,MAAa,oBAAoB,yBAC/B,0BAA0B,sBAAsB,0BAA0B,CAAC,CAC5E"}

package/dist/components/SignIn/SignInFactorOne.js

@@ -20,8 +20,8 @@ import { SignInFactorOnePasskey } from "./SignInFactorOnePasskey.js";
 import { SignInFactorOnePasswordCard } from "./SignInFactorOnePasswordCard.js";
 import { SignInFactorOnePhoneCodeCard } from "./SignInFactorOnePhoneCodeCard.js";
 import React from "react";
-import { jsx } from "@emotion/react/jsx-runtime";
 import { useClerk } from "@clerk/shared/react";
+import { jsx } from "@emotion/react/jsx-runtime";
 
 //#region src/components/SignIn/SignInFactorOne.tsx
 const factorKey = (factor) => {

package/dist/components/SignIn/SignInFactorOneAlternativeChannelCodeForm.js

@@ -7,9 +7,9 @@ import { handleError } from "../../utils/errorHandler.js";
 import { useSupportEmail } from "../../hooks/useSupportEmail.js";
 import { VerificationCodeCard } from "../../elements/VerificationCodeCard.js";
 import { clerkInvalidFAPIResponse } from "@clerk/shared/internal/clerk-js/errors";
+import { useClerk } from "@clerk/shared/react";
 import { jsx } from "@emotion/react/jsx-runtime";
 import { isUserLockedError } from "@clerk/shared/error";
-import { useClerk } from "@clerk/shared/react";
 
 //#region src/components/SignIn/SignInFactorOneAlternativeChannelCodeForm.tsx
 const SignInFactorOneAlternativeChannelCodeForm = (props) => {

package/dist/components/SignIn/SignInFactorOneCodeForm.js

@@ -8,9 +8,9 @@ import { useSupportEmail } from "../../hooks/useSupportEmail.js";
 import { VerificationCodeCard } from "../../elements/VerificationCodeCard.js";
 import { clerkInvalidFAPIResponse } from "@clerk/shared/internal/clerk-js/errors";
 import { useMemo } from "react";
+import { useClerk } from "@clerk/shared/react";
 import { jsx } from "@emotion/react/jsx-runtime";
 import { isUserLockedError } from "@clerk/shared/error";
-import { useClerk } from "@clerk/shared/react";
 
 //#region src/components/SignIn/SignInFactorOneCodeForm.tsx
 const SignInFactorOneCodeForm = (props) => {

package/dist/components/SignIn/SignInFactorOneEmailLinkCard.js

@@ -11,9 +11,9 @@ import { EmailLinkStatusCard } from "../../common/EmailLinkStatusCard.js";
 import { handleError } from "../../utils/errorHandler.js";
 import { VerificationLinkCard } from "../../elements/VerificationLinkCard.js";
 import React from "react";
+import { useClerk } from "@clerk/shared/react";
 import { jsx } from "@emotion/react/jsx-runtime";
 import { isUserLockedError } from "@clerk/shared/error";
-import { useClerk } from "@clerk/shared/react";
 
 //#region src/components/SignIn/SignInFactorOneEmailLinkCard.tsx
 const SignInFactorOneEmailLinkCard = (props) => {

package/dist/components/SignIn/SignInFactorOnePasswordCard.js

@@ -13,13 +13,13 @@ import { handleError } from "../../utils/errorHandler.js";
 import { Form } from "../../elements/Form.js";
 import { IdentityPreview } from "../../elements/IdentityPreview.js";
 import { useSupportEmail } from "../../hooks/useSupportEmail.js";
-import { useResetPasswordFactor } from "./useResetPasswordFactor.js";
 import { HavingTrouble } from "./HavingTrouble.js";
+import { useResetPasswordFactor } from "./useResetPasswordFactor.js";
 import { clerkInvalidFAPIResponse } from "@clerk/shared/internal/clerk-js/errors";
 import React from "react";
+import { useClerk } from "@clerk/shared/react";
 import { jsx, jsxs } from "@emotion/react/jsx-runtime";
 import { isPasswordCompromisedError, isPasswordPwnedError, isUserLockedError } from "@clerk/shared/error";
-import { useClerk } from "@clerk/shared/react";
 
 //#region src/components/SignIn/SignInFactorOnePasswordCard.tsx
 const usePasswordControl = (props) => {
@@ -65,13 +65,14 @@ const SignInFactorOnePasswordCard = (props) => {
 				case "complete": return setActive({
 					session: res.createdSessionId,
 					navigate: ({ session }) => {
-						navigateOnSetActive({
+						return navigateOnSetActive({
 							session,
 							redirectUrl: afterSignInUrl
 						});
 					}
 				});
 				case "needs_second_factor": return navigate("../factor-two");
+				case "needs_client_trust": return navigate("../client-trust");
 				default: return console.error(clerkInvalidFAPIResponse(res.status, supportEmail));
 			}
 		}).catch((err) => {