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

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/UserProfile/index.js

@@ -15,7 +15,7 @@ import React from "react";
 import { jsx, jsxs } from "@emotion/react/jsx-runtime";
 
 //#region src/components/UserProfile/index.tsx
-const _UserProfile = (_) => {
+const _UserProfile = () => {
 	return /* @__PURE__ */ jsx(Flow.Root, {
 		flow: "userProfile",
 		children: /* @__PURE__ */ jsx(Flow.Part, { children: /* @__PURE__ */ jsxs(Switch, { children: [/* @__PURE__ */ jsx(Route, {
@@ -36,6 +36,7 @@ const AuthenticatedRoutes = withCoreUserGuard(() => {
 	}) });
 });
 const UserProfile = withCardStateProvider(_UserProfile);
+const InternalUserProfile = withCardStateProvider(_UserProfile);
 const UserProfileModal = (props) => {
 	const userProfileProps = {
 		...props,
@@ -47,7 +48,7 @@ const UserProfileModal = (props) => {
 		path: "user",
 		children: /* @__PURE__ */ jsx(UserProfileContext.Provider, {
 			value: userProfileProps,
-			children: /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(UserProfile, { ...userProfileProps }) })
+			children: /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(InternalUserProfile, { ...userProfileProps }) })
 		})
 	});
 };

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["userProfileProps: UserProfileCtx"],"sources":["../../../src/components/UserProfile/index.tsx"],"sourcesContent":["import type { UserProfileModalProps, UserProfileProps } from '@clerk/shared/types';\nimport React from 'react';\n\nimport { withCardStateProvider } from '@/ui/elements/contexts';\nimport { NavbarMenuButtonRow } from '@/ui/elements/Navbar';\nimport { ProfileCard } from '@/ui/elements/ProfileCard';\n\nimport { USER_PROFILE_CARD_SCROLLBOX_ID } from '../../constants';\nimport { UserProfileContext, withCoreUserGuard } from '../../contexts';\nimport { Flow, localizationKeys } from '../../customizables';\nimport { Route, Switch } from '../../router';\nimport type { UserProfileCtx } from '../../types';\nimport { UserProfileNavbar } from './UserProfileNavbar';\nimport { UserProfileRoutes } from './UserProfileRoutes';\nimport { VerificationSuccessPage } from './VerifyWithLink';\n\nconst _UserProfile = (_: UserProfileProps) => {\n  return (\n    <Flow.Root flow='userProfile'>\n      <Flow.Part>\n        <Switch>\n          {/* PublicRoutes */}\n          <Route path='verify'>\n            <VerificationSuccessPage />\n          </Route>\n          <Route>\n            <AuthenticatedRoutes />\n          </Route>\n        </Switch>\n      </Flow.Part>\n    </Flow.Root>\n  );\n};\n\nconst AuthenticatedRoutes = withCoreUserGuard(() => {\n  const contentRef = React.useRef<HTMLDivElement>(null);\n  return (\n    <ProfileCard.Root>\n      <UserProfileNavbar contentRef={contentRef}>\n        <NavbarMenuButtonRow navbarTitleLocalizationKey={localizationKeys('userProfile.navbar.title')} />\n        <ProfileCard.Content\n          contentRef={contentRef}\n          scrollBoxId={USER_PROFILE_CARD_SCROLLBOX_ID}\n        >\n          <UserProfileRoutes />\n        </ProfileCard.Content>\n      </UserProfileNavbar>\n    </ProfileCard.Root>\n  );\n});\n\nexport const UserProfile = withCardStateProvider(_UserProfile);\n\nexport const UserProfileModal = (props: UserProfileModalProps): JSX.Element => {\n  const userProfileProps: UserProfileCtx = {\n    ...props,\n    routing: 'virtual',\n    componentName: 'UserProfile',\n    mode: 'modal',\n  };\n\n  return (\n    <Route path='user'>\n      <UserProfileContext.Provider value={userProfileProps}>\n        {/*TODO: Used by InvisibleRootBox, can we simplify? */}\n        <div>\n          <UserProfile {...userProfileProps} />\n        </div>\n      </UserProfileContext.Provider>\n    </Route>\n  );\n};\n"],"mappings":";;;;;;;;;;;;;;;;;AAgBA,MAAM,gBAAgB,MAAwB;AAC5C,QACE,oBAAC,KAAK;EAAK,MAAK;YACd,oBAAC,KAAK,kBACJ,qBAAC,qBAEC,oBAAC;GAAM,MAAK;aACV,oBAAC,4BAA0B;IACrB,EACR,oBAAC,mBACC,oBAAC,wBAAsB,GACjB,IACD,GACC;GACF;;AAIhB,MAAM,sBAAsB,wBAAwB;CAClD,MAAM,aAAa,MAAM,OAAuB,KAAK;AACrD,QACE,oBAAC,YAAY,kBACX,qBAAC;EAA8B;aAC7B,oBAAC,uBAAoB,4BAA4B,iBAAiB,2BAA2B,GAAI,EACjG,oBAAC,YAAY;GACC;GACZ,aAAa;aAEb,oBAAC,sBAAoB;IACD;GACJ,GACH;EAErB;AAEF,MAAa,cAAc,sBAAsB,aAAa;AAE9D,MAAa,oBAAoB,UAA8C;CAC7E,MAAMA,mBAAmC;EACvC,GAAG;EACH,SAAS;EACT,eAAe;EACf,MAAM;EACP;AAED,QACE,oBAAC;EAAM,MAAK;YACV,oBAAC,mBAAmB;GAAS,OAAO;aAElC,oBAAC,mBACC,oBAAC,eAAY,GAAI,mBAAoB,GACjC;IACsB;GACxB"}
+{"version":3,"file":"index.js","names":["UserProfile: React.ComponentType<UserProfileProps>","InternalUserProfile: React.ComponentType<WithInternalRouting<UserProfileProps>>","userProfileProps: UserProfileCtx"],"sources":["../../../src/components/UserProfile/index.tsx"],"sourcesContent":["import type { UserProfileModalProps, UserProfileProps } from '@clerk/shared/types';\nimport React from 'react';\n\nimport { USER_PROFILE_CARD_SCROLLBOX_ID } from '@/constants';\nimport { UserProfileContext, withCoreUserGuard } from '@/contexts';\nimport { Flow, localizationKeys } from '@/customizables';\nimport { withCardStateProvider } from '@/elements/contexts';\nimport { NavbarMenuButtonRow } from '@/elements/Navbar';\nimport { ProfileCard } from '@/elements/ProfileCard';\nimport type { WithInternalRouting } from '@/internal';\nimport { Route, Switch } from '@/router';\nimport type { UserProfileCtx } from '@/types';\n\nimport { UserProfileNavbar } from './UserProfileNavbar';\nimport { UserProfileRoutes } from './UserProfileRoutes';\nimport { VerificationSuccessPage } from './VerifyWithLink';\n\nconst _UserProfile = () => {\n  return (\n    <Flow.Root flow='userProfile'>\n      <Flow.Part>\n        <Switch>\n          {/* PublicRoutes */}\n          <Route path='verify'>\n            <VerificationSuccessPage />\n          </Route>\n          <Route>\n            <AuthenticatedRoutes />\n          </Route>\n        </Switch>\n      </Flow.Part>\n    </Flow.Root>\n  );\n};\n\nconst AuthenticatedRoutes = withCoreUserGuard(() => {\n  const contentRef = React.useRef<HTMLDivElement>(null);\n  return (\n    <ProfileCard.Root>\n      <UserProfileNavbar contentRef={contentRef}>\n        <NavbarMenuButtonRow navbarTitleLocalizationKey={localizationKeys('userProfile.navbar.title')} />\n        <ProfileCard.Content\n          contentRef={contentRef}\n          scrollBoxId={USER_PROFILE_CARD_SCROLLBOX_ID}\n        >\n          <UserProfileRoutes />\n        </ProfileCard.Content>\n      </UserProfileNavbar>\n    </ProfileCard.Root>\n  );\n});\n\nexport const UserProfile: React.ComponentType<UserProfileProps> = withCardStateProvider(_UserProfile);\n\nconst InternalUserProfile: React.ComponentType<WithInternalRouting<UserProfileProps>> =\n  withCardStateProvider(_UserProfile);\n\nexport const UserProfileModal = (props: UserProfileModalProps): JSX.Element => {\n  const userProfileProps: UserProfileCtx = {\n    ...props,\n    routing: 'virtual',\n    componentName: 'UserProfile',\n    mode: 'modal',\n  };\n\n  return (\n    <Route path='user'>\n      <UserProfileContext.Provider value={userProfileProps}>\n        {/*TODO: Used by InvisibleRootBox, can we simplify? */}\n        <div>\n          <InternalUserProfile {...userProfileProps} />\n        </div>\n      </UserProfileContext.Provider>\n    </Route>\n  );\n};\n"],"mappings":";;;;;;;;;;;;;;;;;AAiBA,MAAM,qBAAqB;AACzB,QACE,oBAAC,KAAK;EAAK,MAAK;YACd,oBAAC,KAAK,kBACJ,qBAAC,qBAEC,oBAAC;GAAM,MAAK;aACV,oBAAC,4BAA0B;IACrB,EACR,oBAAC,mBACC,oBAAC,wBAAsB,GACjB,IACD,GACC;GACF;;AAIhB,MAAM,sBAAsB,wBAAwB;CAClD,MAAM,aAAa,MAAM,OAAuB,KAAK;AACrD,QACE,oBAAC,YAAY,kBACX,qBAAC;EAA8B;aAC7B,oBAAC,uBAAoB,4BAA4B,iBAAiB,2BAA2B,GAAI,EACjG,oBAAC,YAAY;GACC;GACZ,aAAa;aAEb,oBAAC,sBAAoB;IACD;GACJ,GACH;EAErB;AAEF,MAAaA,cAAqD,sBAAsB,aAAa;AAErG,MAAMC,sBACJ,sBAAsB,aAAa;AAErC,MAAa,oBAAoB,UAA8C;CAC7E,MAAMC,mBAAmC;EACvC,GAAG;EACH,SAAS;EACT,eAAe;EACf,MAAM;EACP;AAED,QACE,oBAAC;EAAM,MAAK;YACV,oBAAC,mBAAmB;GAAS,OAAO;aAElC,oBAAC,mBACC,oBAAC,uBAAoB,GAAI,mBAAoB,GACzC;IACsB;GACxB"}

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/UserVerificationFactorTwo.js

@@ -9,7 +9,7 @@ import { UserVerificationFactorTwoTOTP } from "./UserVerificationFactorTwoTOTP.j
 import { UVFactorTwoAlternativeMethods } from "./UVFactorTwoAlternativeMethods.js";
 import { UVFactorTwoBackupCodeCard } from "./UVFactorTwoBackupCodeCard.js";
 import { UVFactorTwoPhoneCodeCard } from "./UVFactorTwoPhoneCodeCard.js";
-import React, { useEffect, useMemo } from "react";
+import { useEffect, useMemo } from "react";
 import { jsx } from "@emotion/react/jsx-runtime";
 
 //#region src/components/UserVerification/UserVerificationFactorTwo.tsx

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

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

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["UserVerification: React.ComponentType<__internal_UserVerificationProps>"],"sources":["../../../src/components/UserVerification/index.tsx"],"sourcesContent":["import type { __internal_UserVerificationModalProps, __internal_UserVerificationProps } from '@clerk/shared/types';\nimport React, { useEffect } from 'react';\n\nimport { UserVerificationContext, withCoreSessionSwitchGuard } from '../../contexts';\nimport { Flow } from '../../customizables';\nimport { Route, Switch } from '../../router';\nimport { UserVerificationFactorOne } from './UserVerificationFactorOne';\nimport { UserVerificationFactorTwo } from './UserVerificationFactorTwo';\nimport { useUserVerificationSession } from './useUserVerificationSession';\n\nfunction UserVerificationRoutes(): JSX.Element {\n  const { invalidate } = useUserVerificationSession();\n  useEffect(() => {\n    return () => {\n      invalidate();\n    };\n  }, []);\n  return (\n    <Flow.Root flow='userVerification'>\n      <Switch>\n        <Route path='factor-two'>\n          <UserVerificationFactorTwo />\n        </Route>\n        <Route index>\n          <UserVerificationFactorOne />\n        </Route>\n      </Switch>\n    </Flow.Root>\n  );\n}\n\nUserVerificationRoutes.displayName = 'UserVerification';\n\nconst UserVerification: React.ComponentType<__internal_UserVerificationProps> =\n  withCoreSessionSwitchGuard(UserVerificationRoutes);\n\nconst UserVerificationModal = (props: __internal_UserVerificationModalProps): JSX.Element => {\n  return (\n    <Route path='user-verification'>\n      <UserVerificationContext.Provider\n        value={{\n          componentName: 'UserVerification',\n          ...props,\n          routing: 'virtual',\n        }}\n      >\n        {/*TODO: Used by InvisibleRootBox, can we simplify? */}\n        <div>\n          <UserVerification\n            {...props}\n            routing='virtual'\n          />\n        </div>\n      </UserVerificationContext.Provider>\n    </Route>\n  );\n};\n\nexport { UserVerification, UserVerificationModal };\n"],"mappings":";;;;;;;;;;;;AAUA,SAAS,yBAAsC;CAC7C,MAAM,EAAE,eAAe,4BAA4B;AACnD,iBAAgB;AACd,eAAa;AACX,eAAY;;IAEb,EAAE,CAAC;AACN,QACE,oBAAC,KAAK;EAAK,MAAK;YACd,qBAAC,qBACC,oBAAC;GAAM,MAAK;aACV,oBAAC,8BAA4B;IACvB,EACR,oBAAC;GAAM;aACL,oBAAC,8BAA4B;IACvB,IACD;GACC;;AAIhB,uBAAuB,cAAc;AAErC,MAAMA,mBACJ,2BAA2B,uBAAuB;AAEpD,MAAM,yBAAyB,UAA8D;AAC3F,QACE,oBAAC;EAAM,MAAK;YACV,oBAAC,wBAAwB;GACvB,OAAO;IACL,eAAe;IACf,GAAG;IACH,SAAS;IACV;aAGD,oBAAC,mBACC,oBAAC;IACC,GAAI;IACJ,SAAQ;KACR,GACE;IAC2B;GAC7B"}
+{"version":3,"file":"index.js","names":["UserVerification: React.ComponentType<WithInternalRouting<__internal_UserVerificationProps>>"],"sources":["../../../src/components/UserVerification/index.tsx"],"sourcesContent":["import type { __internal_UserVerificationModalProps, __internal_UserVerificationProps } from '@clerk/shared/types';\nimport React, { useEffect } from 'react';\n\nimport { UserVerificationContext, withCoreSessionSwitchGuard } from '@/contexts';\nimport { Flow } from '@/customizables';\nimport type { WithInternalRouting } from '@/internal';\nimport { Route, Switch } from '@/router';\n\nimport { UserVerificationFactorOne } from './UserVerificationFactorOne';\nimport { UserVerificationFactorTwo } from './UserVerificationFactorTwo';\nimport { useUserVerificationSession } from './useUserVerificationSession';\n\nfunction UserVerificationRoutes(): JSX.Element {\n  const { invalidate } = useUserVerificationSession();\n  useEffect(() => {\n    return () => {\n      invalidate();\n    };\n  }, []);\n  return (\n    <Flow.Root flow='userVerification'>\n      <Switch>\n        <Route path='factor-two'>\n          <UserVerificationFactorTwo />\n        </Route>\n        <Route index>\n          <UserVerificationFactorOne />\n        </Route>\n      </Switch>\n    </Flow.Root>\n  );\n}\n\nUserVerificationRoutes.displayName = 'UserVerification';\n\nconst UserVerification: React.ComponentType<WithInternalRouting<__internal_UserVerificationProps>> =\n  withCoreSessionSwitchGuard(UserVerificationRoutes);\n\nconst UserVerificationModal = (props: __internal_UserVerificationModalProps): JSX.Element => {\n  return (\n    <Route path='user-verification'>\n      <UserVerificationContext.Provider\n        value={{\n          componentName: 'UserVerification',\n          ...props,\n          routing: 'virtual',\n        }}\n      >\n        {/*TODO: Used by InvisibleRootBox, can we simplify? */}\n        <div>\n          <UserVerification\n            {...props}\n            routing='virtual'\n          />\n        </div>\n      </UserVerificationContext.Provider>\n    </Route>\n  );\n};\n\nexport { UserVerification, UserVerificationModal };\n"],"mappings":";;;;;;;;;;;;AAYA,SAAS,yBAAsC;CAC7C,MAAM,EAAE,eAAe,4BAA4B;AACnD,iBAAgB;AACd,eAAa;AACX,eAAY;;IAEb,EAAE,CAAC;AACN,QACE,oBAAC,KAAK;EAAK,MAAK;YACd,qBAAC,qBACC,oBAAC;GAAM,MAAK;aACV,oBAAC,8BAA4B;IACvB,EACR,oBAAC;GAAM;aACL,oBAAC,8BAA4B;IACvB,IACD;GACC;;AAIhB,uBAAuB,cAAc;AAErC,MAAMA,mBACJ,2BAA2B,uBAAuB;AAEpD,MAAM,yBAAyB,UAA8D;AAC3F,QACE,oBAAC;EAAM,MAAK;YACV,oBAAC,wBAAwB;GACvB,OAAO;IACL,eAAe;IACf,GAAG;IACH,SAAS;IACV;aAGD,oBAAC,mBACC,oBAAC;IACC,GAAI;IACJ,SAAQ;KACR,GACE;IAC2B;GAC7B"}

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 = () => {

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

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

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

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

package/dist/contexts/CoreClerkContextWrapper.js

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

package/dist/contexts/CoreSessionContext.js

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

package/dist/contexts/CoreUserContext.js

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

package/dist/{createorganization_ui_3321de_1.0.0-snapshot.v20251215212157.js → createorganization_ui_d63654_1.0.0-snapshot.v20251217162523.js}

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

package/dist/customizables/AppearanceContext.js

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

package/dist/customizables/parseAppearance.d.ts

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

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

@@ -1 +1 @@
-{"version":3,"file":"parseAppearance.d.ts","names":[],"sources":["../../src/customizables/parseAppearance.ts"],"sourcesContent":[],"mappings":";;;;KAsBK,2BAAA,GAOU,MAP0B,IAO1B,CANb,UAMa,EAAA,OAAA,GAAA,UAAA,GAAA,QAAA,GAAA,WAAA,GAAA,SAAA,GAAA,cAAA,CAAA;AACE,KAHL,iBAAA,GAGK;EAA2B,gBAAA,CAAA,EAFvB,UAEuB;eAD7B;iBACE"}
+{"version":3,"file":"parseAppearance.d.ts","names":[],"sources":["../../src/customizables/parseAppearance.ts"],"sourcesContent":[],"mappings":";;;;KAsBK,2BAAA,GAA8B,OAAA,CAAA,MAC3B,UAD2B,EAAA,MAE3B,KAF2B,GAAA,SAAA,GAAA,cAAA,GAAA,UAAA,GAAA,QAAA,GAAA,OAAA,GAAA,WAAA,CAAA;AAAO,KAK9B,iBAAA,GAL8B;EAK9B,gBAAA,CAAA,EACS,UADQ;EACR,UAAA,CAAA,EACN,UADM;EACN,aAAA,EACE,2BADF,GAAA,kBAAA,GAAA,2BAAA;CACE"}

package/dist/customizables/parseAppearance.js.map

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

package/dist/elements/Action/ActionRoot.js

@@ -1,7 +1,7 @@
 import { Animated } from "../Animated.js";
 import { useCallback, useState } from "react";
-import { createContextAndHook } from "@clerk/shared/react";
 import { jsx } from "@emotion/react/jsx-runtime";
+import { createContextAndHook } from "@clerk/shared/react";
 
 //#region src/elements/Action/ActionRoot.tsx
 const [ActionContext, useActionContext, _] = createContextAndHook("ActionContext");

package/dist/elements/CodeControl.js

@@ -9,8 +9,8 @@ import { sleep } from "../utils/sleep.js";
 import { handleError } from "../utils/errorHandler.js";
 import { TimerButton } from "./TimerButton.js";
 import React, { useCallback } from "react";
-import { createContextAndHook } from "@clerk/shared/react";
 import { Fragment as Fragment$1, jsx, jsxs } from "@emotion/react/jsx-runtime";
+import { createContextAndHook } from "@clerk/shared/react";
 import { OTPInput, REGEXP_ONLY_DIGITS } from "input-otp";
 
 //#region src/elements/CodeControl.tsx

package/dist/elements/Drawer.js

@@ -12,7 +12,7 @@ import { IconButton } from "./IconButton.js";
 import * as React$1 from "react";
 import { Fragment as Fragment$1, jsx, jsxs } from "@emotion/react/jsx-runtime";
 import { FloatingFocusManager, FloatingPortal, useClick, useDismiss, useFloating, useInteractions, useMergeRefs, useRole, useTransitionStyles } from "@floating-ui/react";
-import { usePortalRoot, useSafeLayoutEffect } from "@clerk/shared/react/index";
+import { useSafeLayoutEffect } from "@clerk/shared/react/index";
 
 //#region src/elements/Drawer.tsx
 const DrawerContext = React$1.createContext(null);
@@ -23,8 +23,6 @@ const useDrawerContext = () => {
 };
 function Root({ children, open, onOpenChange, strategy = "fixed", floatingProps, portalProps, dismissProps }) {
 	const direction = useDirection();
-	const portalRoot = usePortalRoot();
-	const effectivePortalRoot = portalProps?.root ?? portalRoot?.() ?? void 0;
 	const { refs, context } = useFloating({
 		open,
 		onOpenChange,
@@ -43,10 +41,7 @@ function Root({ children, open, onOpenChange, strategy = "fixed", floatingProps,
 			isOpen: open,
 			setIsOpen: onOpenChange,
 			strategy,
-			portalProps: {
-				...portalProps,
-				root: effectivePortalRoot
-			},
+			portalProps: portalProps || {},
 			refs,
 			context,
 			getFloatingProps,
@@ -54,7 +49,6 @@ function Root({ children, open, onOpenChange, strategy = "fixed", floatingProps,
 		},
 		children: /* @__PURE__ */ jsx(FloatingPortal, {
 			...portalProps,
-			root: effectivePortalRoot,
 			children
 		})
 	});