@clerk/ui 1.2.4-snapshot.v20260325163812 → 1.2.4

package/dist/ClerkUI.js

@@ -23,8 +23,8 @@ import { isVersionAtLeast, parseVersion } from "@clerk/shared/versionCheck";
 * @public
 */
 var ClerkUI = class ClerkUI {
-	static version = "1.2.4-snapshot.v20260325163812";
-	version = "1.2.4-snapshot.v20260325163812";
+	static version = "1.2.4";
+	version = "1.2.4";
 	#componentRenderer;
 	/**
 	* Creates a new `ClerkUI` instance and mounts the internal component renderer.

package/dist/Components.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Components.d.ts","names":[],"sources":["../src/Components.tsx"],"sourcesContent":[],"mappings":";;;;;;;;;AAqEgC,KAFpB,iBAAA,GAEoB;EAAb,cAAA,EAAA,CAAA,MAAA,EAAA;IACT,aAAA,EADS,YACT,CADsB,iBACtB,CAAA,eAAA,CAAA,CAAA;IACA,IAAA,EADA,kBACA;IACE,IAAA,EADF,cACE;IAEyB,KAAA,CAAA,EAFzB,uBAEyB;EAEpB,CAAA,EAAA,GAAA,IAAA;EACH,gBAAA,EAAA,CAAA,MAAA,EAAA;IACH,IAAA,EAJ0B,cAI1B;EAgBA,CAAA,EAAA,GAAA,IAAA;EACA,WAAA,EAAA,CAAA,MAAA,EAAA;IACH,UAAA,CAAA,EApBS,UAoBT,GAAA,SAAA;IACA,OAAA,CAAA,EApBM,YAoBN,GAAA,SAAA;IACE,IAAA,CAAA,EApBC,cAoBD;IACA,KAAA,CAAA,EAAA,OAAA;EACE,CAAA,EAAA,GAAA,IAAA;EACA,SAAA,EAAA,CAAA,UAAA,cAAA,GAAA,QAAA,GAAA,QAAA,GAAA,aAAA,GAAA,qBAAA,GAAA,oBAAA,GAAA,kBAAA,GAAA,UAAA,GAAA,cAAA,GAAA,2BAAA,CAAA,CAAA,KAAA,EAPD,CAOC,EAAA,KAAA,EAND,CAMC,SAAA,QAAA,GALJ,WAKI,GAJJ,CAII,SAAA,QAAA,GAHF,WAGE,GAFF,CAEE,SAAA,kBAAA,GADA,gCACA,GAAA,CAAA,SAAA,UAAA,GACE,aADF,GAEE,CAFF,SAAA,2BAAA,GAGI,yCAHJ,GAII,gBAJJ,EAAA,GAAA,IAAA;EACE,UAAA,EAAA,CAAA,KAAA,EAAA,cAAA,GAAA,QAAA,GAAA,QAAA,GAAA,aAAA,GAAA,qBAAA,GAAA,oBAAA,GAAA,kBAAA,GAAA,UAAA,GAAA,cAAA,GAAA,2BAAA,EAAA,OAEE,CAFF,EAAA;IACA,MAAA,CAAA,EAAA,OAAA;EACE,CAAA,EAAA,GAAA,IAAA;EACA,UAAA,EAAA,CAAA,UAAA,UAAA,GAAA,aAAA,GAAA,qBAAA,CAAA,CAAA,MAAA,EAmBJ,CAnBI,EAAA,KAAA,EAoBL,CApBK,SAAA,UAAA,GAqBR,wBArBQ,GAsBR,CAtBQ,SAAA,aAAA,GAuBN,2BAvBM,GAwBN,CAxBM,SAAA,qBAAA,GAyBJ,mCAzBI,GAAA,KAAA,EAAA,GAAA,IAAA;EAmBJ,WAAA,EAAA,CAAA,MAAA,EAAA,UAAA,GAAA,aAAA,GAAA,qBAAA,EAAA,OAEJ,CAFI,EAAA;IACD,MAAA,CAAA,EAAA,OAAA;EACH,CAAA,EAAA,GAAA,IAAA;EACA,QAAA,EAAA,CAAA,SAAA,EAAA,sBAAA,EAAA,GAAA,IAAA;EACE,qBAAA,EAAA,GAAA,GAAA,IAAA;CACA;AACE,cAkEC,sBAlED,EAAA,CAAA,QAAA,EAAA,GAAA,GAmEM,KAnEN,EAAA,cAAA,EAAA,GAAA,GAoEY,mBApEZ,GAAA,IAAA,GAAA,SAAA,EAAA,QAAA,EAqEA,YArEA,EAAA,aAAA,EAsEK,aAtEL,EAAA,GAAA;EAAmC,aAAA,EAAA,CAAA,IAmE7B,CAnE6B,EAAA;IAkElC,WAAA,EAyB6B,kBAwCzC;EAhEiB,CAAA,EAAA,GAwB4C,OAxB5C,CAwB4C,iBAxB5C,CAAA;CACM;AACZ,KAgEA,sBAAA,GAhEA,OAgEgC,sBAhEhC"}
+{"version":3,"file":"Components.d.ts","names":[],"sources":["../src/Components.tsx"],"sourcesContent":[],"mappings":";;;;;;;;;AAyEgC,KAFpB,iBAAA,GAEoB;EAAb,cAAA,EAAA,CAAA,MAAA,EAAA;IACT,aAAA,EADS,YACT,CADsB,iBACtB,CAAA,eAAA,CAAA,CAAA;IACA,IAAA,EADA,kBACA;IACE,IAAA,EADF,cACE;IAEyB,KAAA,CAAA,EAFzB,uBAEyB;EAEpB,CAAA,EAAA,GAAA,IAAA;EACH,gBAAA,EAAA,CAAA,MAAA,EAAA;IACH,IAAA,EAJ0B,cAI1B;EAgBA,CAAA,EAAA,GAAA,IAAA;EACA,WAAA,EAAA,CAAA,MAAA,EAAA;IACH,UAAA,CAAA,EApBS,UAoBT,GAAA,SAAA;IACA,OAAA,CAAA,EApBM,YAoBN,GAAA,SAAA;IACE,IAAA,CAAA,EApBC,cAoBD;IACA,KAAA,CAAA,EAAA,OAAA;EACE,CAAA,EAAA,GAAA,IAAA;EACA,SAAA,EAAA,CAAA,UAAA,cAAA,GAAA,QAAA,GAAA,QAAA,GAAA,aAAA,GAAA,qBAAA,GAAA,oBAAA,GAAA,kBAAA,GAAA,UAAA,GAAA,cAAA,GAAA,2BAAA,CAAA,CAAA,KAAA,EAPD,CAOC,EAAA,KAAA,EAND,CAMC,SAAA,QAAA,GALJ,WAKI,GAJJ,CAII,SAAA,QAAA,GAHF,WAGE,GAFF,CAEE,SAAA,kBAAA,GADA,gCACA,GAAA,CAAA,SAAA,UAAA,GACE,aADF,GAEE,CAFF,SAAA,2BAAA,GAGI,yCAHJ,GAII,gBAJJ,EAAA,GAAA,IAAA;EACE,UAAA,EAAA,CAAA,KAAA,EAAA,cAAA,GAAA,QAAA,GAAA,QAAA,GAAA,aAAA,GAAA,qBAAA,GAAA,oBAAA,GAAA,kBAAA,GAAA,UAAA,GAAA,cAAA,GAAA,2BAAA,EAAA,OAEE,CAFF,EAAA;IACA,MAAA,CAAA,EAAA,OAAA;EACE,CAAA,EAAA,GAAA,IAAA;EACA,UAAA,EAAA,CAAA,UAAA,UAAA,GAAA,aAAA,GAAA,qBAAA,CAAA,CAAA,MAAA,EAmBJ,CAnBI,EAAA,KAAA,EAoBL,CApBK,SAAA,UAAA,GAqBR,wBArBQ,GAsBR,CAtBQ,SAAA,aAAA,GAuBN,2BAvBM,GAwBN,CAxBM,SAAA,qBAAA,GAyBJ,mCAzBI,GAAA,KAAA,EAAA,GAAA,IAAA;EAmBJ,WAAA,EAAA,CAAA,MAAA,EAAA,UAAA,GAAA,aAAA,GAAA,qBAAA,EAAA,OAEJ,CAFI,EAAA;IACD,MAAA,CAAA,EAAA,OAAA;EACH,CAAA,EAAA,GAAA,IAAA;EACA,QAAA,EAAA,CAAA,SAAA,EAAA,sBAAA,EAAA,GAAA,IAAA;EACE,qBAAA,EAAA,GAAA,GAAA,IAAA;CACA;AACE,cAkEC,sBAlED,EAAA,CAAA,QAAA,EAAA,GAAA,GAmEM,KAnEN,EAAA,cAAA,EAAA,GAAA,GAoEY,mBApEZ,GAAA,IAAA,GAAA,SAAA,EAAA,QAAA,EAqEA,YArEA,EAAA,aAAA,EAsEK,aAtEL,EAAA,GAAA;EAAmC,aAAA,EAAA,CAAA,IAmE7B,CAnE6B,EAAA;IAkElC,WAAA,EAyB6B,kBAwCzC;EAhEiB,CAAA,EAAA,GAwB4C,OAxB5C,CAwB4C,iBAxB5C,CAAA;CACM;AACZ,KAgEA,sBAAA,GAhEA,OAgEgC,sBAhEhC"}

package/dist/Components.js

@@ -246,7 +246,7 @@ const Components = (props) => {
 			base: "/sign-in",
 			path: urlStateParam?.path
 		}),
-		getContainer: signInModal?.getContainer,
+		getContainer: signInModal?.getContainer ?? (() => null),
 		componentName: "SignInModal",
 		children: [
 			/* @__PURE__ */ jsx(SignInModal, { ...signInModal }),
@@ -265,7 +265,7 @@ const Components = (props) => {
 			base: "/sign-up",
 			path: urlStateParam?.path
 		}),
-		getContainer: signUpModal?.getContainer,
+		getContainer: signUpModal?.getContainer ?? (() => null),
 		componentName: "SignUpModal",
 		children: [
 			/* @__PURE__ */ jsx(SignInModal, { ...disambiguateRedirectOptions(signUpModal, "signup") }),
@@ -284,7 +284,7 @@ const Components = (props) => {
 			base: "/user",
 			path: userProfileModal?.__experimental_startPath || urlStateParam?.path
 		}),
-		getContainer: userProfileModal?.getContainer,
+		getContainer: userProfileModal?.getContainer ?? (() => null),
 		componentName: "UserProfileModal",
 		modalContainerSx: { alignItems: "center" },
 		modalContentSx: (t) => ({
@@ -304,7 +304,7 @@ const Components = (props) => {
 			base: "/user-verification",
 			path: urlStateParam?.path
 		}),
-		getContainer: userVerificationModal?.getContainer,
+		getContainer: userVerificationModal?.getContainer ?? (() => null),
 		componentName: "UserVerificationModal",
 		modalContainerSx: { alignItems: "center" },
 		children: /* @__PURE__ */ jsx(UserVerificationModal, { ...userVerificationModal })
@@ -320,7 +320,7 @@ const Components = (props) => {
 			base: "/organizationProfile",
 			path: organizationProfileModal?.__experimental_startPath || urlStateParam?.path
 		}),
-		getContainer: organizationProfileModal?.getContainer,
+		getContainer: organizationProfileModal?.getContainer ?? (() => null),
 		componentName: "OrganizationProfileModal",
 		modalContainerSx: { alignItems: "center" },
 		modalContentSx: (t) => ({
@@ -340,7 +340,7 @@ const Components = (props) => {
 			base: "/createOrganization",
 			path: urlStateParam?.path
 		}),
-		getContainer: createOrganizationModal?.getContainer,
+		getContainer: createOrganizationModal?.getContainer ?? (() => null),
 		componentName: "CreateOrganizationModal",
 		modalContainerSx: { alignItems: "center" },
 		modalContentSx: (t) => ({
@@ -360,7 +360,7 @@ const Components = (props) => {
 			base: "/waitlist",
 			path: urlStateParam?.path
 		}),
-		getContainer: waitlistModal?.getContainer,
+		getContainer: waitlistModal?.getContainer ?? (() => null),
 		componentName: "WaitlistModal",
 		children: [/* @__PURE__ */ jsx(WaitlistModal, { ...waitlistModal }), /* @__PURE__ */ jsx(SignInModal, { ...waitlistModal })]
 	});
@@ -381,6 +381,7 @@ const Components = (props) => {
 			visibility: "hidden",
 			pointerEvents: "none"
 		},
+		getContainer: () => null,
 		children: /* @__PURE__ */ jsx(BlankCaptchaModal, {})
 	});
 	return /* @__PURE__ */ jsx(Suspense, {

package/dist/Components.js.map

@@ -1 +1 @@
-{"version":3,"file":"Components.js","names":["componentsControlsResolver: Promise<ComponentControls> | undefined","props"],"sources":["../src/Components.tsx"],"sourcesContent":["import { clerkUIErrorDOMElementNotFound } from '@clerk/shared/internal/clerk-js/errors';\nimport type { ModuleManager } from '@clerk/shared/moduleManager';\nimport type {\n  __internal_CheckoutProps,\n  __internal_EnableOrganizationsPromptProps,\n  __internal_PlanDetailsProps,\n  __internal_SubscriptionDetailsProps,\n  __internal_UserVerificationProps,\n  Clerk,\n  ClerkOptions,\n  CreateOrganizationProps,\n  EnvironmentResource,\n  GoogleOneTapProps,\n  OrganizationProfileProps,\n  SignInProps,\n  SignUpProps,\n  UserProfileProps,\n  WaitlistProps,\n} from '@clerk/shared/types';\nimport { createDeferredPromise } from '@clerk/shared/utils';\nimport React, { Suspense, useCallback, useRef, useSyncExternalStore } from 'react';\n\nimport type { AppearanceCascade } from './customizables/parseAppearance';\n// NOTE: Using `./hooks` instead of `./hooks/useClerkModalStateParams` will increase the bundle size\nimport { useClerkModalStateParams } from './hooks/useClerkModalStateParams';\nimport type { Appearance } from './internal/appearance';\nimport type { ClerkComponentName } from './lazyModules/components';\nimport {\n  BlankCaptchaModal,\n  CreateOrganizationModal,\n  EnableOrganizationsPrompt,\n  ImpersonationFab,\n  KeylessPrompt,\n  OrganizationProfileModal,\n  preloadComponent,\n  SignInModal,\n  SignUpModal,\n  UserProfileModal,\n  UserVerificationModal,\n  WaitlistModal,\n} from './lazyModules/components';\nimport { MountedCheckoutDrawer, MountedPlanDetailDrawer, MountedSubscriptionDetailDrawer } from './lazyModules/drawers';\nimport {\n  LazyComponentRenderer,\n  LazyEnableOrganizationsPromptProvider,\n  LazyImpersonationFabProvider,\n  LazyModalRenderer,\n  LazyOneTapRenderer,\n  LazyProviders,\n  OrganizationSwitcherPrefetch,\n} from './lazyModules/providers';\nimport type { AvailableComponentProps } from './types';\nimport { buildVirtualRouterUrl } from './utils/buildVirtualRouterUrl';\nimport { disambiguateRedirectOptions } from './utils/disambiguateRedirectOptions';\nimport { extractCssLayerNameFromAppearance } from './utils/extractCssLayerNameFromAppearance';\nimport { warnAboutCustomizationWithoutPinning } from './utils/warnAboutCustomizationWithoutPinning';\n\n// Re-export for ClerkUI\nexport { extractCssLayerNameFromAppearance };\n\n/**\n * Avoid importing from `@clerk/shared/react` to prevent extra dependencies being added to the bundle.\n */\nconst useSafeLayoutEffect = typeof window !== 'undefined' ? React.useLayoutEffect : React.useEffect;\n\nexport const ROOT_ELEMENT_ID = 'clerk-components';\n\nexport type ComponentControls = {\n  mountComponent: (params: {\n    appearanceKey: Uncapitalize<AppearanceCascade['appearanceKey']>;\n    name: ClerkComponentName;\n    node: HTMLDivElement;\n    props?: AvailableComponentProps;\n  }) => void;\n  unmountComponent: (params: { node: HTMLDivElement }) => void;\n  updateProps: (params: {\n    appearance?: Appearance | undefined;\n    options?: ClerkOptions | undefined;\n    node?: HTMLDivElement;\n    props?: unknown;\n  }) => void;\n  openModal: <\n    T extends\n      | 'googleOneTap'\n      | 'signIn'\n      | 'signUp'\n      | 'userProfile'\n      | 'organizationProfile'\n      | 'createOrganization'\n      | 'userVerification'\n      | 'waitlist'\n      | 'blankCaptcha'\n      | 'enableOrganizationsPrompt',\n  >(\n    modal: T,\n    props: T extends 'signIn'\n      ? SignInProps\n      : T extends 'signUp'\n        ? SignUpProps\n        : T extends 'userVerification'\n          ? __internal_UserVerificationProps\n          : T extends 'waitlist'\n            ? WaitlistProps\n            : T extends 'enableOrganizationsPrompt'\n              ? __internal_EnableOrganizationsPromptProps\n              : UserProfileProps,\n  ) => void;\n  closeModal: (\n    modal:\n      | 'googleOneTap'\n      | 'signIn'\n      | 'signUp'\n      | 'userProfile'\n      | 'organizationProfile'\n      | 'createOrganization'\n      | 'userVerification'\n      | 'waitlist'\n      | 'blankCaptcha'\n      | 'enableOrganizationsPrompt',\n    options?: {\n      notify?: boolean;\n    },\n  ) => void;\n  openDrawer: <T extends 'checkout' | 'planDetails' | 'subscriptionDetails'>(\n    drawer: T,\n    props: T extends 'checkout'\n      ? __internal_CheckoutProps\n      : T extends 'planDetails'\n        ? __internal_PlanDetailsProps\n        : T extends 'subscriptionDetails'\n          ? __internal_SubscriptionDetailsProps\n          : never,\n  ) => void;\n  closeDrawer: (\n    drawer: 'checkout' | 'planDetails' | 'subscriptionDetails',\n    options?: {\n      notify?: boolean;\n    },\n  ) => void;\n  prefetch: (component: 'organizationSwitcher') => void;\n  // Special case, as the impersonation fab mounts automatically\n  mountImpersonationFab: () => void;\n};\n\ninterface HtmlNodeOptions {\n  key: string;\n  name: ClerkComponentName;\n  appearanceKey: Uncapitalize<AppearanceCascade['appearanceKey']>;\n  props?: AvailableComponentProps;\n}\n\ninterface ComponentsProps {\n  getClerk: () => Clerk;\n  getEnvironment: () => EnvironmentResource | null | undefined;\n  options: ClerkOptions;\n  onComponentsMounted: () => void;\n  moduleManager: ModuleManager;\n}\n\ninterface ComponentsState {\n  appearance: Appearance | undefined;\n  options: ClerkOptions | undefined;\n  googleOneTapModal: null | GoogleOneTapProps;\n  signInModal: null | SignInProps;\n  signUpModal: null | SignUpProps;\n  userProfileModal: null | UserProfileProps;\n  userVerificationModal: null | __internal_UserVerificationProps;\n  organizationProfileModal: null | OrganizationProfileProps;\n  createOrganizationModal: null | CreateOrganizationProps;\n  enableOrganizationsPromptModal: null | __internal_EnableOrganizationsPromptProps;\n  blankCaptchaModal: null;\n  organizationSwitcherPrefetch: boolean;\n  waitlistModal: null | WaitlistProps;\n  checkoutDrawer: {\n    open: false;\n    props: null | __internal_CheckoutProps;\n  };\n  planDetailsDrawer: {\n    open: false;\n    props: null | __internal_PlanDetailsProps;\n  };\n  subscriptionDetailsDrawer: {\n    open: false;\n    props: null | __internal_SubscriptionDetailsProps;\n  };\n  impersonationFab: boolean;\n}\n\nlet portalCt = 0;\n\nfunction assertDOMElement(element: HTMLElement): asserts element {\n  if (!element) {\n    clerkUIErrorDOMElementNotFound();\n  }\n}\n\nexport const mountComponentRenderer = (\n  getClerk: () => Clerk,\n  getEnvironment: () => EnvironmentResource | null | undefined,\n  _options: ClerkOptions,\n  moduleManager: ModuleManager,\n) => {\n  const options = { ..._options };\n  // Extract cssLayerName from theme if present and move it to appearance level\n  if (options.appearance) {\n    options.appearance = extractCssLayerNameFromAppearance(options.appearance);\n  }\n\n  // TODO: Init of components should start\n  // before /env and /client requests\n  let clerkRoot = document.getElementById(ROOT_ELEMENT_ID);\n\n  if (!clerkRoot) {\n    clerkRoot = document.createElement('div');\n    clerkRoot.setAttribute('id', 'clerk-components');\n    document.body.appendChild(clerkRoot);\n  }\n\n  let componentsControlsResolver: Promise<ComponentControls> | undefined;\n\n  return {\n    ensureMounted: (opts?: { preloadHint: ClerkComponentName }) => {\n      const { preloadHint } = opts || {};\n      // Always preload, even if ensureMounted was already called.\n      // preloadComponent is idempotent (returns cached promise on subsequent calls).\n      if (preloadHint) {\n        void preloadComponent(preloadHint).catch(() => {});\n      }\n      // This mechanism ensures that mountComponentControls will only be called once\n      // and any calls to .mount before mountComponentControls resolves will fire in order.\n      // Otherwise, we risk having components rendered multiple times, or having\n      // .unmountComponent incorrectly called before the component is rendered\n      if (!componentsControlsResolver) {\n        const deferredPromise = createDeferredPromise();\n        componentsControlsResolver = import('./lazyModules/common').then(({ createRoot }) => {\n          createRoot(clerkRoot).render(\n            <Components\n              getClerk={getClerk}\n              getEnvironment={getEnvironment}\n              options={options}\n              onComponentsMounted={() => {\n                // Defer warning check to avoid blocking component mount\n                // Only check in development mode (based on publishable key, not NODE_ENV)\n                if (getClerk().instanceType === 'development') {\n                  const scheduleWarningCheck =\n                    typeof requestIdleCallback === 'function'\n                      ? requestIdleCallback\n                      : (cb: () => void) => setTimeout(cb, 0);\n                  scheduleWarningCheck(() => warnAboutCustomizationWithoutPinning(options));\n                }\n                deferredPromise.resolve();\n              }}\n              moduleManager={moduleManager}\n            />,\n          );\n          return deferredPromise.promise.then(() => componentsControls);\n        });\n      }\n      return componentsControlsResolver.then(controls => controls);\n    },\n  };\n};\n\nexport type MountComponentRenderer = typeof mountComponentRenderer;\n\nconst componentsControls = {} as ComponentControls;\n\nconst componentNodes = Object.freeze({\n  SignUp: 'signUpModal',\n  SignIn: 'signInModal',\n  UserProfile: 'userProfileModal',\n  OrganizationProfile: 'organizationProfileModal',\n  CreateOrganization: 'createOrganizationModal',\n  Waitlist: 'waitlistModal',\n}) as any;\n\nconst Components = (props: ComponentsProps) => {\n  const [state, setState] = React.useState<ComponentsState>({\n    appearance: props.options.appearance,\n    options: props.options,\n    googleOneTapModal: null,\n    signInModal: null,\n    signUpModal: null,\n    userProfileModal: null,\n    userVerificationModal: null,\n    organizationProfileModal: null,\n    createOrganizationModal: null,\n    enableOrganizationsPromptModal: null,\n    organizationSwitcherPrefetch: false,\n    waitlistModal: null,\n    blankCaptchaModal: null,\n    checkoutDrawer: {\n      open: false,\n      props: null,\n    },\n    planDetailsDrawer: {\n      open: false,\n      props: null,\n    },\n    subscriptionDetailsDrawer: {\n      open: false,\n      props: null,\n    },\n    impersonationFab: false,\n  });\n\n  const {\n    googleOneTapModal,\n    signInModal,\n    signUpModal,\n    userProfileModal,\n    userVerificationModal,\n    organizationProfileModal,\n    createOrganizationModal,\n    waitlistModal,\n    blankCaptchaModal,\n    checkoutDrawer,\n    planDetailsDrawer,\n    subscriptionDetailsDrawer,\n  } = state;\n  const clerk = props.getClerk();\n\n  // We do this to ensure this component re-renders before any children listening to this state does.\n  // This is necessary since `unmountComponent` uses `setState` to trigger re-renders, but this can\n  // happen _after_ `useSyncExternalStore` triggers a re-render. This can cause the Clerk components to\n  // re-render and even run effects when they should have already been unmounted.\n  // Forcing this to re-render first to remove the children is a workaround for this issue.\n  // Note that this does not fix the issue at its root, which is that it's possible for Clerk components\n  // to stay mounted even after their node has been removed.\n  useSyncExternalStore(\n    useCallback(callback => clerk.addListener(callback, { skipInitialEmit: true }), [clerk]),\n    useCallback(() => {\n      return clerk.__internal_lastEmittedResources;\n    }, [clerk]),\n    // This is not a correct implementation of getServerSnapshot, but should be fine since we don't use the\n    // return state anyway.\n    // We currently do not server render the Clerk components, so leaving it out entirely would also be fine,\n    // but this is a workaround to avoid a hard error when we want to experiment with server rendering.\n    // A fully correct implementation would require passing in the initialState to the <Components> component.\n    useCallback(() => {\n      return clerk.__internal_lastEmittedResources;\n    }, [clerk]),\n  );\n\n  // See above comment on useSyncExternalStore for why we use a ref to store the nodes instead of state\n  const nodesRef = useRef<Map<HTMLDivElement, HtmlNodeOptions>>(new Map());\n\n  const { urlStateParam, clearUrlStateParam, decodedRedirectParams } = useClerkModalStateParams();\n  useSafeLayoutEffect(() => {\n    if (decodedRedirectParams) {\n      setState(s => ({\n        ...s,\n        [componentNodes[decodedRedirectParams.componentName]]: true,\n      }));\n    }\n\n    const triggerRender = () => {\n      setState(s => ({ ...s }));\n    };\n\n    componentsControls.mountComponent = params => {\n      const { node, name, props, appearanceKey } = params;\n      assertDOMElement(node);\n      nodesRef.current.set(node, { key: `p${++portalCt}`, name, props, appearanceKey });\n      triggerRender();\n    };\n\n    componentsControls.unmountComponent = params => {\n      const { node } = params;\n      nodesRef.current.delete(node);\n      triggerRender();\n    };\n\n    componentsControls.updateProps = ({ node, props, ...restProps }) => {\n      if (node && props && typeof props === 'object') {\n        const nodeOptions = nodesRef.current.get(node);\n        if (nodeOptions) {\n          nodeOptions.props = { ...props };\n          triggerRender();\n          return;\n        }\n      }\n\n      setState(s => ({ ...s, ...restProps, options: { ...s.options, ...restProps.options } }));\n    };\n\n    componentsControls.closeModal = (name, options = {}) => {\n      const { notify = true } = options;\n      clearUrlStateParam();\n      setState(s => {\n        function handleCloseModalForExperimentalUserVerification() {\n          const modal = s[`${name}Modal`];\n          if (modal && typeof modal === 'object' && 'afterVerificationCancelled' in modal && notify) {\n            // TypeScript doesn't narrow properly with template literal access and 'in' operator\n            (modal as { afterVerificationCancelled?: () => void }).afterVerificationCancelled?.();\n          }\n        }\n\n        /**\n         * We need this in order for `Clerk.__experimental_closeUserVerification()`\n         * to properly trigger the previously defined `afterVerificationCancelled` callback\n         */\n        handleCloseModalForExperimentalUserVerification();\n\n        return { ...s, [`${name}Modal`]: null };\n      });\n    };\n\n    componentsControls.openModal = (name, props) => {\n      // Prevent opening enableOrganizations prompt if it's already open\n      // It should open the first call and ignore the subsequent calls\n      if (name === 'enableOrganizationsPrompt') {\n        setState(prev => {\n          // Modal is already open, don't update state\n          if (prev.enableOrganizationsPromptModal) {\n            return prev;\n          }\n\n          return { ...prev, [`${name}Modal`]: props };\n        });\n        return;\n      }\n\n      function handleCloseModalForExperimentalUserVerification() {\n        if (!('afterVerificationCancelled' in props)) {\n          return;\n        }\n\n        setState(s => ({\n          ...s,\n          [`${name}Modal`]: {\n            ...props,\n            /**\n             * When a UserVerification flow is completed, we need to close the modal without trigger a cancellation callback\n             */\n            afterVerification() {\n              props.afterVerification?.();\n              componentsControls.closeModal(name, { notify: false });\n            },\n          },\n        }));\n      }\n\n      if ('afterVerificationCancelled' in props) {\n        handleCloseModalForExperimentalUserVerification();\n      } else {\n        setState(s => ({ ...s, [`${name}Modal`]: props }));\n      }\n    };\n\n    componentsControls.mountImpersonationFab = () => {\n      setState(s => ({ ...s, impersonationFab: true }));\n    };\n\n    componentsControls.openDrawer = (name, props) => {\n      setState(s => ({\n        ...s,\n        [`${name}Drawer`]: {\n          open: true,\n          props,\n        },\n      }));\n    };\n\n    componentsControls.closeDrawer = name => {\n      setState(s => {\n        const currentItem = s[`${name}Drawer`];\n        // @ts-expect-error `__internal_PlanDetailsProps` does not accept `onClose`\n        currentItem?.props?.onClose?.();\n        return {\n          ...s,\n          [`${name}Drawer`]: {\n            ...s[`${name}Drawer`],\n            open: false,\n          },\n        };\n      });\n    };\n\n    componentsControls.prefetch = component => {\n      setState(s => ({ ...s, [`${component}Prefetch`]: true }));\n    };\n\n    props.onComponentsMounted();\n  }, []);\n\n  const mountedOneTapModal = (\n    <LazyOneTapRenderer\n      componentProps={googleOneTapModal}\n      globalAppearance={state.appearance}\n      componentAppearance={googleOneTapModal?.appearance}\n      startPath={buildVirtualRouterUrl({ base: '/one-tap', path: '' })}\n    />\n  );\n\n  const mountedSignInModal = (\n    <LazyModalRenderer\n      globalAppearance={state.appearance}\n      appearanceKey={'signIn'}\n      componentAppearance={signInModal?.appearance}\n      flowName={'signIn'}\n      onClose={() => componentsControls.closeModal('signIn')}\n      onExternalNavigate={() => componentsControls.closeModal('signIn')}\n      startPath={buildVirtualRouterUrl({ base: '/sign-in', path: urlStateParam?.path })}\n      getContainer={signInModal?.getContainer}\n      componentName={'SignInModal'}\n    >\n      <SignInModal {...signInModal} />\n      <SignUpModal {...disambiguateRedirectOptions(signInModal, 'signin')} />\n      <WaitlistModal {...waitlistModal} />\n    </LazyModalRenderer>\n  );\n\n  const mountedSignUpModal = (\n    <LazyModalRenderer\n      globalAppearance={state.appearance}\n      appearanceKey={'signUp'}\n      componentAppearance={signUpModal?.appearance}\n      flowName={'signUp'}\n      onClose={() => componentsControls.closeModal('signUp')}\n      onExternalNavigate={() => componentsControls.closeModal('signUp')}\n      startPath={buildVirtualRouterUrl({ base: '/sign-up', path: urlStateParam?.path })}\n      getContainer={signUpModal?.getContainer}\n      componentName={'SignUpModal'}\n    >\n      <SignInModal {...disambiguateRedirectOptions(signUpModal, 'signup')} />\n      <SignUpModal {...signUpModal} />\n      <WaitlistModal {...waitlistModal} />\n    </LazyModalRenderer>\n  );\n\n  const mountedUserProfileModal = (\n    <LazyModalRenderer\n      globalAppearance={state.appearance}\n      appearanceKey={'userProfile'}\n      componentAppearance={userProfileModal?.appearance}\n      flowName={'userProfile'}\n      onClose={() => componentsControls.closeModal('userProfile')}\n      onExternalNavigate={() => componentsControls.closeModal('userProfile')}\n      startPath={buildVirtualRouterUrl({\n        base: '/user',\n        path: userProfileModal?.__experimental_startPath || urlStateParam?.path,\n      })}\n      getContainer={userProfileModal?.getContainer}\n      componentName={'UserProfileModal'}\n      modalContainerSx={{ alignItems: 'center' }}\n      modalContentSx={t => ({ height: `min(${t.sizes.$176}, calc(100% - ${t.sizes.$12}))`, margin: 0 })}\n    >\n      <UserProfileModal {...userProfileModal} />\n    </LazyModalRenderer>\n  );\n\n  const mountedUserVerificationModal = (\n    <LazyModalRenderer\n      globalAppearance={state.appearance}\n      appearanceKey={'userVerification'}\n      componentAppearance={userVerificationModal?.appearance}\n      flowName={'userVerification'}\n      onClose={() => componentsControls.closeModal('userVerification')}\n      onExternalNavigate={() => componentsControls.closeModal('userVerification')}\n      startPath={buildVirtualRouterUrl({ base: '/user-verification', path: urlStateParam?.path })}\n      getContainer={userVerificationModal?.getContainer}\n      componentName={'UserVerificationModal'}\n      modalContainerSx={{ alignItems: 'center' }}\n    >\n      <UserVerificationModal {...userVerificationModal} />\n    </LazyModalRenderer>\n  );\n\n  const mountedOrganizationProfileModal = (\n    <LazyModalRenderer\n      globalAppearance={state.appearance}\n      appearanceKey={'organizationProfile'}\n      componentAppearance={organizationProfileModal?.appearance}\n      flowName={'organizationProfile'}\n      onClose={() => componentsControls.closeModal('organizationProfile')}\n      onExternalNavigate={() => componentsControls.closeModal('organizationProfile')}\n      startPath={buildVirtualRouterUrl({\n        base: '/organizationProfile',\n        path: organizationProfileModal?.__experimental_startPath || urlStateParam?.path,\n      })}\n      getContainer={organizationProfileModal?.getContainer}\n      componentName={'OrganizationProfileModal'}\n      modalContainerSx={{ alignItems: 'center' }}\n      modalContentSx={t => ({ height: `min(${t.sizes.$176}, calc(100% - ${t.sizes.$12}))`, margin: 0 })}\n    >\n      <OrganizationProfileModal {...organizationProfileModal} />\n    </LazyModalRenderer>\n  );\n\n  const mountedCreateOrganizationModal = (\n    <LazyModalRenderer\n      globalAppearance={state.appearance}\n      appearanceKey={'createOrganization'}\n      componentAppearance={createOrganizationModal?.appearance}\n      flowName={'createOrganization'}\n      onClose={() => componentsControls.closeModal('createOrganization')}\n      onExternalNavigate={() => componentsControls.closeModal('createOrganization')}\n      startPath={buildVirtualRouterUrl({ base: '/createOrganization', path: urlStateParam?.path })}\n      getContainer={createOrganizationModal?.getContainer}\n      componentName={'CreateOrganizationModal'}\n      modalContainerSx={{ alignItems: 'center' }}\n      modalContentSx={t => ({ height: `min(${t.sizes.$120}, calc(100% - ${t.sizes.$12}))`, margin: 0 })}\n    >\n      <CreateOrganizationModal {...createOrganizationModal} />\n    </LazyModalRenderer>\n  );\n\n  const mountedWaitlistModal = (\n    <LazyModalRenderer\n      globalAppearance={state.appearance}\n      appearanceKey={'waitlist'}\n      componentAppearance={waitlistModal?.appearance}\n      flowName={'waitlist'}\n      onClose={() => componentsControls.closeModal('waitlist')}\n      onExternalNavigate={() => componentsControls.closeModal('waitlist')}\n      startPath={buildVirtualRouterUrl({ base: '/waitlist', path: urlStateParam?.path })}\n      getContainer={waitlistModal?.getContainer}\n      componentName={'WaitlistModal'}\n    >\n      <WaitlistModal {...waitlistModal} />\n      <SignInModal {...waitlistModal} />\n    </LazyModalRenderer>\n  );\n\n  const mountedBlankCaptchaModal = (\n    /**\n     * Captcha modal should not close on `Clerk.navigate()`, hence we are not passing `onExternalNavigate`.\n     */\n    <LazyModalRenderer\n      globalAppearance={state.appearance}\n      appearanceKey={'blankCaptcha' as any}\n      componentAppearance={{}}\n      flowName={'blankCaptcha'}\n      onClose={() => componentsControls.closeModal('blankCaptcha')}\n      startPath={buildVirtualRouterUrl({ base: '/blank-captcha', path: urlStateParam?.path })}\n      componentName={'BlankCaptchaModal'}\n      canCloseModal={false}\n      modalId={'cl-modal-captcha-wrapper'}\n      modalStyle={{ visibility: 'hidden', pointerEvents: 'none' }}\n    >\n      <BlankCaptchaModal />\n    </LazyModalRenderer>\n  );\n\n  return (\n    <Suspense fallback={''}>\n      <LazyProviders\n        clerk={props.getClerk()}\n        environment={props.getEnvironment()}\n        options={state.options}\n        moduleManager={props.moduleManager}\n      >\n        {[...nodesRef.current].map(([node, component]) => {\n          return (\n            <LazyComponentRenderer\n              key={component.key}\n              node={node}\n              globalAppearance={state.appearance}\n              appearanceKey={component.appearanceKey}\n              componentAppearance={component.props?.appearance}\n              componentName={component.name}\n              componentProps={component.props}\n            />\n          );\n        })}\n\n        {googleOneTapModal && mountedOneTapModal}\n        {signInModal && mountedSignInModal}\n        {signUpModal && mountedSignUpModal}\n        {userProfileModal && mountedUserProfileModal}\n        {userVerificationModal && mountedUserVerificationModal}\n        {organizationProfileModal && mountedOrganizationProfileModal}\n        {createOrganizationModal && mountedCreateOrganizationModal}\n        {waitlistModal && mountedWaitlistModal}\n        {blankCaptchaModal && mountedBlankCaptchaModal}\n\n        <MountedCheckoutDrawer\n          appearance={state.appearance}\n          checkoutDrawer={checkoutDrawer}\n          onOpenChange={() => componentsControls.closeDrawer('checkout')}\n        />\n\n        <MountedPlanDetailDrawer\n          appearance={state.appearance}\n          planDetailsDrawer={planDetailsDrawer}\n          onOpenChange={() => componentsControls.closeDrawer('planDetails')}\n        />\n\n        <MountedSubscriptionDetailDrawer\n          appearance={state.appearance}\n          subscriptionDetailsDrawer={subscriptionDetailsDrawer}\n          onOpenChange={() => componentsControls.closeDrawer('subscriptionDetails')}\n        />\n\n        {state.impersonationFab && (\n          <LazyImpersonationFabProvider globalAppearance={state.appearance}>\n            <ImpersonationFab />\n          </LazyImpersonationFabProvider>\n        )}\n\n        {state.enableOrganizationsPromptModal && (\n          <LazyEnableOrganizationsPromptProvider globalAppearance={state.appearance}>\n            <EnableOrganizationsPrompt {...state.enableOrganizationsPromptModal} />\n          </LazyEnableOrganizationsPromptProvider>\n        )}\n\n        {state.options?.__internal_keyless_claimKeylessApplicationUrl &&\n          state.options?.__internal_keyless_copyInstanceKeysUrl && (\n            <LazyImpersonationFabProvider globalAppearance={state.appearance}>\n              <KeylessPrompt\n                claimUrl={state.options.__internal_keyless_claimKeylessApplicationUrl}\n                copyKeysUrl={state.options.__internal_keyless_copyInstanceKeysUrl}\n                onDismiss={state.options.__internal_keyless_dismissPrompt}\n              />\n            </LazyImpersonationFabProvider>\n          )}\n\n        <Suspense>{state.organizationSwitcherPrefetch && <OrganizationSwitcherPrefetch />}</Suspense>\n      </LazyProviders>\n    </Suspense>\n  );\n};\n"],"mappings":"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"}
+{"version":3,"file":"Components.js","names":["componentsControlsResolver: Promise<ComponentControls> | undefined","props"],"sources":["../src/Components.tsx"],"sourcesContent":["import { clerkUIErrorDOMElementNotFound } from '@clerk/shared/internal/clerk-js/errors';\nimport type { ModuleManager } from '@clerk/shared/moduleManager';\nimport type {\n  __internal_CheckoutProps,\n  __internal_EnableOrganizationsPromptProps,\n  __internal_PlanDetailsProps,\n  __internal_SubscriptionDetailsProps,\n  __internal_UserVerificationProps,\n  Clerk,\n  ClerkOptions,\n  CreateOrganizationModalProps,\n  EnvironmentResource,\n  GoogleOneTapProps,\n  OrganizationProfileModalProps,\n  SignInProps,\n  SignInModalProps,\n  SignUpProps,\n  SignUpModalProps,\n  UserProfileModalProps,\n  UserProfileProps,\n  WaitlistProps,\n  WaitlistModalProps,\n} from '@clerk/shared/types';\nimport { createDeferredPromise } from '@clerk/shared/utils';\nimport React, { Suspense, useCallback, useRef, useSyncExternalStore } from 'react';\n\nimport type { AppearanceCascade } from './customizables/parseAppearance';\n// NOTE: Using `./hooks` instead of `./hooks/useClerkModalStateParams` will increase the bundle size\nimport { useClerkModalStateParams } from './hooks/useClerkModalStateParams';\nimport type { Appearance } from './internal/appearance';\nimport type { ClerkComponentName } from './lazyModules/components';\nimport {\n  BlankCaptchaModal,\n  CreateOrganizationModal,\n  EnableOrganizationsPrompt,\n  ImpersonationFab,\n  KeylessPrompt,\n  OrganizationProfileModal,\n  preloadComponent,\n  SignInModal,\n  SignUpModal,\n  UserProfileModal,\n  UserVerificationModal,\n  WaitlistModal,\n} from './lazyModules/components';\nimport { MountedCheckoutDrawer, MountedPlanDetailDrawer, MountedSubscriptionDetailDrawer } from './lazyModules/drawers';\nimport {\n  LazyComponentRenderer,\n  LazyEnableOrganizationsPromptProvider,\n  LazyImpersonationFabProvider,\n  LazyModalRenderer,\n  LazyOneTapRenderer,\n  LazyProviders,\n  OrganizationSwitcherPrefetch,\n} from './lazyModules/providers';\nimport type { AvailableComponentProps } from './types';\nimport { buildVirtualRouterUrl } from './utils/buildVirtualRouterUrl';\nimport { disambiguateRedirectOptions } from './utils/disambiguateRedirectOptions';\nimport { extractCssLayerNameFromAppearance } from './utils/extractCssLayerNameFromAppearance';\nimport { warnAboutCustomizationWithoutPinning } from './utils/warnAboutCustomizationWithoutPinning';\n\n// Re-export for ClerkUI\nexport { extractCssLayerNameFromAppearance };\n\n/**\n * Avoid importing from `@clerk/shared/react` to prevent extra dependencies being added to the bundle.\n */\nconst useSafeLayoutEffect = typeof window !== 'undefined' ? React.useLayoutEffect : React.useEffect;\n\nexport const ROOT_ELEMENT_ID = 'clerk-components';\n\nexport type ComponentControls = {\n  mountComponent: (params: {\n    appearanceKey: Uncapitalize<AppearanceCascade['appearanceKey']>;\n    name: ClerkComponentName;\n    node: HTMLDivElement;\n    props?: AvailableComponentProps;\n  }) => void;\n  unmountComponent: (params: { node: HTMLDivElement }) => void;\n  updateProps: (params: {\n    appearance?: Appearance | undefined;\n    options?: ClerkOptions | undefined;\n    node?: HTMLDivElement;\n    props?: unknown;\n  }) => void;\n  openModal: <\n    T extends\n      | 'googleOneTap'\n      | 'signIn'\n      | 'signUp'\n      | 'userProfile'\n      | 'organizationProfile'\n      | 'createOrganization'\n      | 'userVerification'\n      | 'waitlist'\n      | 'blankCaptcha'\n      | 'enableOrganizationsPrompt',\n  >(\n    modal: T,\n    props: T extends 'signIn'\n      ? SignInProps\n      : T extends 'signUp'\n        ? SignUpProps\n        : T extends 'userVerification'\n          ? __internal_UserVerificationProps\n          : T extends 'waitlist'\n            ? WaitlistProps\n            : T extends 'enableOrganizationsPrompt'\n              ? __internal_EnableOrganizationsPromptProps\n              : UserProfileProps,\n  ) => void;\n  closeModal: (\n    modal:\n      | 'googleOneTap'\n      | 'signIn'\n      | 'signUp'\n      | 'userProfile'\n      | 'organizationProfile'\n      | 'createOrganization'\n      | 'userVerification'\n      | 'waitlist'\n      | 'blankCaptcha'\n      | 'enableOrganizationsPrompt',\n    options?: {\n      notify?: boolean;\n    },\n  ) => void;\n  openDrawer: <T extends 'checkout' | 'planDetails' | 'subscriptionDetails'>(\n    drawer: T,\n    props: T extends 'checkout'\n      ? __internal_CheckoutProps\n      : T extends 'planDetails'\n        ? __internal_PlanDetailsProps\n        : T extends 'subscriptionDetails'\n          ? __internal_SubscriptionDetailsProps\n          : never,\n  ) => void;\n  closeDrawer: (\n    drawer: 'checkout' | 'planDetails' | 'subscriptionDetails',\n    options?: {\n      notify?: boolean;\n    },\n  ) => void;\n  prefetch: (component: 'organizationSwitcher') => void;\n  // Special case, as the impersonation fab mounts automatically\n  mountImpersonationFab: () => void;\n};\n\ninterface HtmlNodeOptions {\n  key: string;\n  name: ClerkComponentName;\n  appearanceKey: Uncapitalize<AppearanceCascade['appearanceKey']>;\n  props?: AvailableComponentProps;\n}\n\ninterface ComponentsProps {\n  getClerk: () => Clerk;\n  getEnvironment: () => EnvironmentResource | null | undefined;\n  options: ClerkOptions;\n  onComponentsMounted: () => void;\n  moduleManager: ModuleManager;\n}\n\ninterface ComponentsState {\n  appearance: Appearance | undefined;\n  options: ClerkOptions | undefined;\n  googleOneTapModal: null | GoogleOneTapProps;\n  signInModal: null | SignInModalProps;\n  signUpModal: null | SignUpModalProps;\n  userProfileModal: null | UserProfileModalProps;\n  userVerificationModal: null | __internal_UserVerificationProps;\n  organizationProfileModal: null | OrganizationProfileModalProps;\n  createOrganizationModal: null | CreateOrganizationModalProps;\n  enableOrganizationsPromptModal: null | __internal_EnableOrganizationsPromptProps;\n  blankCaptchaModal: null;\n  organizationSwitcherPrefetch: boolean;\n  waitlistModal: null | WaitlistModalProps;\n  checkoutDrawer: {\n    open: false;\n    props: null | __internal_CheckoutProps;\n  };\n  planDetailsDrawer: {\n    open: false;\n    props: null | __internal_PlanDetailsProps;\n  };\n  subscriptionDetailsDrawer: {\n    open: false;\n    props: null | __internal_SubscriptionDetailsProps;\n  };\n  impersonationFab: boolean;\n}\n\nlet portalCt = 0;\n\nfunction assertDOMElement(element: HTMLElement): asserts element {\n  if (!element) {\n    clerkUIErrorDOMElementNotFound();\n  }\n}\n\nexport const mountComponentRenderer = (\n  getClerk: () => Clerk,\n  getEnvironment: () => EnvironmentResource | null | undefined,\n  _options: ClerkOptions,\n  moduleManager: ModuleManager,\n) => {\n  const options = { ..._options };\n  // Extract cssLayerName from theme if present and move it to appearance level\n  if (options.appearance) {\n    options.appearance = extractCssLayerNameFromAppearance(options.appearance);\n  }\n\n  // TODO: Init of components should start\n  // before /env and /client requests\n  let clerkRoot = document.getElementById(ROOT_ELEMENT_ID);\n\n  if (!clerkRoot) {\n    clerkRoot = document.createElement('div');\n    clerkRoot.setAttribute('id', 'clerk-components');\n    document.body.appendChild(clerkRoot);\n  }\n\n  let componentsControlsResolver: Promise<ComponentControls> | undefined;\n\n  return {\n    ensureMounted: (opts?: { preloadHint: ClerkComponentName }) => {\n      const { preloadHint } = opts || {};\n      // Always preload, even if ensureMounted was already called.\n      // preloadComponent is idempotent (returns cached promise on subsequent calls).\n      if (preloadHint) {\n        void preloadComponent(preloadHint).catch(() => {});\n      }\n      // This mechanism ensures that mountComponentControls will only be called once\n      // and any calls to .mount before mountComponentControls resolves will fire in order.\n      // Otherwise, we risk having components rendered multiple times, or having\n      // .unmountComponent incorrectly called before the component is rendered\n      if (!componentsControlsResolver) {\n        const deferredPromise = createDeferredPromise();\n        componentsControlsResolver = import('./lazyModules/common').then(({ createRoot }) => {\n          createRoot(clerkRoot).render(\n            <Components\n              getClerk={getClerk}\n              getEnvironment={getEnvironment}\n              options={options}\n              onComponentsMounted={() => {\n                // Defer warning check to avoid blocking component mount\n                // Only check in development mode (based on publishable key, not NODE_ENV)\n                if (getClerk().instanceType === 'development') {\n                  const scheduleWarningCheck =\n                    typeof requestIdleCallback === 'function'\n                      ? requestIdleCallback\n                      : (cb: () => void) => setTimeout(cb, 0);\n                  scheduleWarningCheck(() => warnAboutCustomizationWithoutPinning(options));\n                }\n                deferredPromise.resolve();\n              }}\n              moduleManager={moduleManager}\n            />,\n          );\n          return deferredPromise.promise.then(() => componentsControls);\n        });\n      }\n      return componentsControlsResolver.then(controls => controls);\n    },\n  };\n};\n\nexport type MountComponentRenderer = typeof mountComponentRenderer;\n\nconst componentsControls = {} as ComponentControls;\n\nconst componentNodes = Object.freeze({\n  SignUp: 'signUpModal',\n  SignIn: 'signInModal',\n  UserProfile: 'userProfileModal',\n  OrganizationProfile: 'organizationProfileModal',\n  CreateOrganization: 'createOrganizationModal',\n  Waitlist: 'waitlistModal',\n}) as any;\n\nconst Components = (props: ComponentsProps) => {\n  const [state, setState] = React.useState<ComponentsState>({\n    appearance: props.options.appearance,\n    options: props.options,\n    googleOneTapModal: null,\n    signInModal: null,\n    signUpModal: null,\n    userProfileModal: null,\n    userVerificationModal: null,\n    organizationProfileModal: null,\n    createOrganizationModal: null,\n    enableOrganizationsPromptModal: null,\n    organizationSwitcherPrefetch: false,\n    waitlistModal: null,\n    blankCaptchaModal: null,\n    checkoutDrawer: {\n      open: false,\n      props: null,\n    },\n    planDetailsDrawer: {\n      open: false,\n      props: null,\n    },\n    subscriptionDetailsDrawer: {\n      open: false,\n      props: null,\n    },\n    impersonationFab: false,\n  });\n\n  const {\n    googleOneTapModal,\n    signInModal,\n    signUpModal,\n    userProfileModal,\n    userVerificationModal,\n    organizationProfileModal,\n    createOrganizationModal,\n    waitlistModal,\n    blankCaptchaModal,\n    checkoutDrawer,\n    planDetailsDrawer,\n    subscriptionDetailsDrawer,\n  } = state;\n  const clerk = props.getClerk();\n\n  // We do this to ensure this component re-renders before any children listening to this state does.\n  // This is necessary since `unmountComponent` uses `setState` to trigger re-renders, but this can\n  // happen _after_ `useSyncExternalStore` triggers a re-render. This can cause the Clerk components to\n  // re-render and even run effects when they should have already been unmounted.\n  // Forcing this to re-render first to remove the children is a workaround for this issue.\n  // Note that this does not fix the issue at its root, which is that it's possible for Clerk components\n  // to stay mounted even after their node has been removed.\n  useSyncExternalStore(\n    useCallback(callback => clerk.addListener(callback, { skipInitialEmit: true }), [clerk]),\n    useCallback(() => {\n      return clerk.__internal_lastEmittedResources;\n    }, [clerk]),\n    // This is not a correct implementation of getServerSnapshot, but should be fine since we don't use the\n    // return state anyway.\n    // We currently do not server render the Clerk components, so leaving it out entirely would also be fine,\n    // but this is a workaround to avoid a hard error when we want to experiment with server rendering.\n    // A fully correct implementation would require passing in the initialState to the <Components> component.\n    useCallback(() => {\n      return clerk.__internal_lastEmittedResources;\n    }, [clerk]),\n  );\n\n  // See above comment on useSyncExternalStore for why we use a ref to store the nodes instead of state\n  const nodesRef = useRef<Map<HTMLDivElement, HtmlNodeOptions>>(new Map());\n\n  const { urlStateParam, clearUrlStateParam, decodedRedirectParams } = useClerkModalStateParams();\n  useSafeLayoutEffect(() => {\n    if (decodedRedirectParams) {\n      setState(s => ({\n        ...s,\n        [componentNodes[decodedRedirectParams.componentName]]: true,\n      }));\n    }\n\n    const triggerRender = () => {\n      setState(s => ({ ...s }));\n    };\n\n    componentsControls.mountComponent = params => {\n      const { node, name, props, appearanceKey } = params;\n      assertDOMElement(node);\n      nodesRef.current.set(node, { key: `p${++portalCt}`, name, props, appearanceKey });\n      triggerRender();\n    };\n\n    componentsControls.unmountComponent = params => {\n      const { node } = params;\n      nodesRef.current.delete(node);\n      triggerRender();\n    };\n\n    componentsControls.updateProps = ({ node, props, ...restProps }) => {\n      if (node && props && typeof props === 'object') {\n        const nodeOptions = nodesRef.current.get(node);\n        if (nodeOptions) {\n          nodeOptions.props = { ...props };\n          triggerRender();\n          return;\n        }\n      }\n\n      setState(s => ({ ...s, ...restProps, options: { ...s.options, ...restProps.options } }));\n    };\n\n    componentsControls.closeModal = (name, options = {}) => {\n      const { notify = true } = options;\n      clearUrlStateParam();\n      setState(s => {\n        function handleCloseModalForExperimentalUserVerification() {\n          const modal = s[`${name}Modal`];\n          if (modal && typeof modal === 'object' && 'afterVerificationCancelled' in modal && notify) {\n            // TypeScript doesn't narrow properly with template literal access and 'in' operator\n            (modal as { afterVerificationCancelled?: () => void }).afterVerificationCancelled?.();\n          }\n        }\n\n        /**\n         * We need this in order for `Clerk.__experimental_closeUserVerification()`\n         * to properly trigger the previously defined `afterVerificationCancelled` callback\n         */\n        handleCloseModalForExperimentalUserVerification();\n\n        return { ...s, [`${name}Modal`]: null };\n      });\n    };\n\n    componentsControls.openModal = (name, props) => {\n      // Prevent opening enableOrganizations prompt if it's already open\n      // It should open the first call and ignore the subsequent calls\n      if (name === 'enableOrganizationsPrompt') {\n        setState(prev => {\n          // Modal is already open, don't update state\n          if (prev.enableOrganizationsPromptModal) {\n            return prev;\n          }\n\n          return { ...prev, [`${name}Modal`]: props };\n        });\n        return;\n      }\n\n      function handleCloseModalForExperimentalUserVerification() {\n        if (!('afterVerificationCancelled' in props)) {\n          return;\n        }\n\n        setState(s => ({\n          ...s,\n          [`${name}Modal`]: {\n            ...props,\n            /**\n             * When a UserVerification flow is completed, we need to close the modal without trigger a cancellation callback\n             */\n            afterVerification() {\n              props.afterVerification?.();\n              componentsControls.closeModal(name, { notify: false });\n            },\n          },\n        }));\n      }\n\n      if ('afterVerificationCancelled' in props) {\n        handleCloseModalForExperimentalUserVerification();\n      } else {\n        setState(s => ({ ...s, [`${name}Modal`]: props }));\n      }\n    };\n\n    componentsControls.mountImpersonationFab = () => {\n      setState(s => ({ ...s, impersonationFab: true }));\n    };\n\n    componentsControls.openDrawer = (name, props) => {\n      setState(s => ({\n        ...s,\n        [`${name}Drawer`]: {\n          open: true,\n          props,\n        },\n      }));\n    };\n\n    componentsControls.closeDrawer = name => {\n      setState(s => {\n        const currentItem = s[`${name}Drawer`];\n        // @ts-expect-error `__internal_PlanDetailsProps` does not accept `onClose`\n        currentItem?.props?.onClose?.();\n        return {\n          ...s,\n          [`${name}Drawer`]: {\n            ...s[`${name}Drawer`],\n            open: false,\n          },\n        };\n      });\n    };\n\n    componentsControls.prefetch = component => {\n      setState(s => ({ ...s, [`${component}Prefetch`]: true }));\n    };\n\n    props.onComponentsMounted();\n  }, []);\n\n  const mountedOneTapModal = (\n    <LazyOneTapRenderer\n      componentProps={googleOneTapModal}\n      globalAppearance={state.appearance}\n      componentAppearance={googleOneTapModal?.appearance}\n      startPath={buildVirtualRouterUrl({ base: '/one-tap', path: '' })}\n    />\n  );\n\n  const mountedSignInModal = (\n    <LazyModalRenderer\n      globalAppearance={state.appearance}\n      appearanceKey={'signIn'}\n      componentAppearance={signInModal?.appearance}\n      flowName={'signIn'}\n      onClose={() => componentsControls.closeModal('signIn')}\n      onExternalNavigate={() => componentsControls.closeModal('signIn')}\n      startPath={buildVirtualRouterUrl({ base: '/sign-in', path: urlStateParam?.path })}\n      getContainer={signInModal?.getContainer ?? (() => null)}\n      componentName={'SignInModal'}\n    >\n      <SignInModal {...signInModal} />\n      <SignUpModal {...disambiguateRedirectOptions(signInModal, 'signin')} />\n      <WaitlistModal {...waitlistModal} />\n    </LazyModalRenderer>\n  );\n\n  const mountedSignUpModal = (\n    <LazyModalRenderer\n      globalAppearance={state.appearance}\n      appearanceKey={'signUp'}\n      componentAppearance={signUpModal?.appearance}\n      flowName={'signUp'}\n      onClose={() => componentsControls.closeModal('signUp')}\n      onExternalNavigate={() => componentsControls.closeModal('signUp')}\n      startPath={buildVirtualRouterUrl({ base: '/sign-up', path: urlStateParam?.path })}\n      getContainer={signUpModal?.getContainer ?? (() => null)}\n      componentName={'SignUpModal'}\n    >\n      <SignInModal {...disambiguateRedirectOptions(signUpModal, 'signup')} />\n      <SignUpModal {...signUpModal} />\n      <WaitlistModal {...waitlistModal} />\n    </LazyModalRenderer>\n  );\n\n  const mountedUserProfileModal = (\n    <LazyModalRenderer\n      globalAppearance={state.appearance}\n      appearanceKey={'userProfile'}\n      componentAppearance={userProfileModal?.appearance}\n      flowName={'userProfile'}\n      onClose={() => componentsControls.closeModal('userProfile')}\n      onExternalNavigate={() => componentsControls.closeModal('userProfile')}\n      startPath={buildVirtualRouterUrl({\n        base: '/user',\n        path: userProfileModal?.__experimental_startPath || urlStateParam?.path,\n      })}\n      getContainer={userProfileModal?.getContainer ?? (() => null)}\n      componentName={'UserProfileModal'}\n      modalContainerSx={{ alignItems: 'center' }}\n      modalContentSx={t => ({ height: `min(${t.sizes.$176}, calc(100% - ${t.sizes.$12}))`, margin: 0 })}\n    >\n      <UserProfileModal {...userProfileModal} />\n    </LazyModalRenderer>\n  );\n\n  const mountedUserVerificationModal = (\n    <LazyModalRenderer\n      globalAppearance={state.appearance}\n      appearanceKey={'userVerification'}\n      componentAppearance={userVerificationModal?.appearance}\n      flowName={'userVerification'}\n      onClose={() => componentsControls.closeModal('userVerification')}\n      onExternalNavigate={() => componentsControls.closeModal('userVerification')}\n      startPath={buildVirtualRouterUrl({ base: '/user-verification', path: urlStateParam?.path })}\n      getContainer={userVerificationModal?.getContainer ?? (() => null)}\n      componentName={'UserVerificationModal'}\n      modalContainerSx={{ alignItems: 'center' }}\n    >\n      <UserVerificationModal {...userVerificationModal} />\n    </LazyModalRenderer>\n  );\n\n  const mountedOrganizationProfileModal = (\n    <LazyModalRenderer\n      globalAppearance={state.appearance}\n      appearanceKey={'organizationProfile'}\n      componentAppearance={organizationProfileModal?.appearance}\n      flowName={'organizationProfile'}\n      onClose={() => componentsControls.closeModal('organizationProfile')}\n      onExternalNavigate={() => componentsControls.closeModal('organizationProfile')}\n      startPath={buildVirtualRouterUrl({\n        base: '/organizationProfile',\n        path: organizationProfileModal?.__experimental_startPath || urlStateParam?.path,\n      })}\n      getContainer={organizationProfileModal?.getContainer ?? (() => null)}\n      componentName={'OrganizationProfileModal'}\n      modalContainerSx={{ alignItems: 'center' }}\n      modalContentSx={t => ({ height: `min(${t.sizes.$176}, calc(100% - ${t.sizes.$12}))`, margin: 0 })}\n    >\n      <OrganizationProfileModal {...organizationProfileModal} />\n    </LazyModalRenderer>\n  );\n\n  const mountedCreateOrganizationModal = (\n    <LazyModalRenderer\n      globalAppearance={state.appearance}\n      appearanceKey={'createOrganization'}\n      componentAppearance={createOrganizationModal?.appearance}\n      flowName={'createOrganization'}\n      onClose={() => componentsControls.closeModal('createOrganization')}\n      onExternalNavigate={() => componentsControls.closeModal('createOrganization')}\n      startPath={buildVirtualRouterUrl({ base: '/createOrganization', path: urlStateParam?.path })}\n      getContainer={createOrganizationModal?.getContainer ?? (() => null)}\n      componentName={'CreateOrganizationModal'}\n      modalContainerSx={{ alignItems: 'center' }}\n      modalContentSx={t => ({ height: `min(${t.sizes.$120}, calc(100% - ${t.sizes.$12}))`, margin: 0 })}\n    >\n      <CreateOrganizationModal {...createOrganizationModal} />\n    </LazyModalRenderer>\n  );\n\n  const mountedWaitlistModal = (\n    <LazyModalRenderer\n      globalAppearance={state.appearance}\n      appearanceKey={'waitlist'}\n      componentAppearance={waitlistModal?.appearance}\n      flowName={'waitlist'}\n      onClose={() => componentsControls.closeModal('waitlist')}\n      onExternalNavigate={() => componentsControls.closeModal('waitlist')}\n      startPath={buildVirtualRouterUrl({ base: '/waitlist', path: urlStateParam?.path })}\n      getContainer={waitlistModal?.getContainer ?? (() => null)}\n      componentName={'WaitlistModal'}\n    >\n      <WaitlistModal {...waitlistModal} />\n      <SignInModal {...waitlistModal} />\n    </LazyModalRenderer>\n  );\n\n  const mountedBlankCaptchaModal = (\n    /**\n     * Captcha modal should not close on `Clerk.navigate()`, hence we are not passing `onExternalNavigate`.\n     */\n    <LazyModalRenderer\n      globalAppearance={state.appearance}\n      appearanceKey={'blankCaptcha' as any}\n      componentAppearance={{}}\n      flowName={'blankCaptcha'}\n      onClose={() => componentsControls.closeModal('blankCaptcha')}\n      startPath={buildVirtualRouterUrl({ base: '/blank-captcha', path: urlStateParam?.path })}\n      componentName={'BlankCaptchaModal'}\n      canCloseModal={false}\n      modalId={'cl-modal-captcha-wrapper'}\n      modalStyle={{ visibility: 'hidden', pointerEvents: 'none' }}\n      getContainer={() => null}\n    >\n      <BlankCaptchaModal />\n    </LazyModalRenderer>\n  );\n\n  return (\n    <Suspense fallback={''}>\n      <LazyProviders\n        clerk={props.getClerk()}\n        environment={props.getEnvironment()}\n        options={state.options}\n        moduleManager={props.moduleManager}\n      >\n        {[...nodesRef.current].map(([node, component]) => {\n          return (\n            <LazyComponentRenderer\n              key={component.key}\n              node={node}\n              globalAppearance={state.appearance}\n              appearanceKey={component.appearanceKey}\n              componentAppearance={component.props?.appearance}\n              componentName={component.name}\n              componentProps={component.props}\n            />\n          );\n        })}\n\n        {googleOneTapModal && mountedOneTapModal}\n        {signInModal && mountedSignInModal}\n        {signUpModal && mountedSignUpModal}\n        {userProfileModal && mountedUserProfileModal}\n        {userVerificationModal && mountedUserVerificationModal}\n        {organizationProfileModal && mountedOrganizationProfileModal}\n        {createOrganizationModal && mountedCreateOrganizationModal}\n        {waitlistModal && mountedWaitlistModal}\n        {blankCaptchaModal && mountedBlankCaptchaModal}\n\n        <MountedCheckoutDrawer\n          appearance={state.appearance}\n          checkoutDrawer={checkoutDrawer}\n          onOpenChange={() => componentsControls.closeDrawer('checkout')}\n        />\n\n        <MountedPlanDetailDrawer\n          appearance={state.appearance}\n          planDetailsDrawer={planDetailsDrawer}\n          onOpenChange={() => componentsControls.closeDrawer('planDetails')}\n        />\n\n        <MountedSubscriptionDetailDrawer\n          appearance={state.appearance}\n          subscriptionDetailsDrawer={subscriptionDetailsDrawer}\n          onOpenChange={() => componentsControls.closeDrawer('subscriptionDetails')}\n        />\n\n        {state.impersonationFab && (\n          <LazyImpersonationFabProvider globalAppearance={state.appearance}>\n            <ImpersonationFab />\n          </LazyImpersonationFabProvider>\n        )}\n\n        {state.enableOrganizationsPromptModal && (\n          <LazyEnableOrganizationsPromptProvider globalAppearance={state.appearance}>\n            <EnableOrganizationsPrompt {...state.enableOrganizationsPromptModal} />\n          </LazyEnableOrganizationsPromptProvider>\n        )}\n\n        {state.options?.__internal_keyless_claimKeylessApplicationUrl &&\n          state.options?.__internal_keyless_copyInstanceKeysUrl && (\n            <LazyImpersonationFabProvider globalAppearance={state.appearance}>\n              <KeylessPrompt\n                claimUrl={state.options.__internal_keyless_claimKeylessApplicationUrl}\n                copyKeysUrl={state.options.__internal_keyless_copyInstanceKeysUrl}\n                onDismiss={state.options.__internal_keyless_dismissPrompt}\n              />\n            </LazyImpersonationFabProvider>\n          )}\n\n        <Suspense>{state.organizationSwitcherPrefetch && <OrganizationSwitcherPrefetch />}</Suspense>\n      </LazyProviders>\n    </Suspense>\n  );\n};\n"],"mappings":"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"}

package/dist/components/Checkout/CheckoutForm.js.map

@@ -1 +1 @@
-{"version":3,"file":"CheckoutForm.js","names":["useCheckout","InformationCircle","AddPaymentMethod.Root","AddPaymentMethod.FormButton","formProps: ThemableCssProp","ChevronUpDown"],"sources":["../../../src/components/Checkout/CheckoutForm.tsx"],"sourcesContent":["import { __experimental_useCheckout as useCheckout } from '@clerk/shared/react';\nimport type { BillingPaymentMethodResource, ConfirmCheckoutParams, RemoveFunctions } from '@clerk/shared/types';\nimport { useMemo, useState } from 'react';\n\nimport { Card } from '@/ui/elements/Card';\nimport { useCardState, withCardStateProvider } from '@/ui/elements/contexts';\nimport { Drawer } from '@/ui/elements/Drawer';\nimport { LineItems } from '@/ui/elements/LineItems';\nimport { SegmentedControl } from '@/ui/elements/SegmentedControl';\nimport { Select, SelectButton, SelectOptionList } from '@/ui/elements/Select';\nimport { Tooltip } from '@/ui/elements/Tooltip';\nimport { handleError } from '@/ui/utils/errorHandler';\n\nimport { DevOnly } from '../../common/DevOnly';\nimport { useCheckoutContext, usePaymentMethods } from '../../contexts';\nimport { Box, Button, Col, descriptors, Flex, Form, localizationKeys, Spinner, Text } from '../../customizables';\nimport { ChevronUpDown, InformationCircle } from '../../icons';\nimport type { PropsOfComponent, ThemableCssProp } from '../../styledSystem';\nimport * as AddPaymentMethod from '../PaymentMethods/AddPaymentMethod';\nimport { PaymentMethodRow } from '../PaymentMethods/PaymentMethodRow';\nimport { SubscriptionBadge } from '../Subscriptions/badge';\n\ntype PaymentMethodSource = 'existing' | 'new';\n\nconst capitalize = (name: string) => name[0].toUpperCase() + name.slice(1);\n\nconst HIDDEN_INPUT_NAME = 'payment_method_id';\n\nexport const CheckoutForm = withCardStateProvider(() => {\n  const { checkout } = useCheckout();\n\n  const { plan, totals, isImmediatePlanChange, planPeriod, freeTrialEndsAt } = checkout;\n\n  if (!plan) {\n    return null;\n  }\n\n  const showProratedCredit = !!totals.credits?.proration?.amount && totals.credits.proration.amount.amount > 0;\n  const showAccountCredits = !!totals.credits?.payer?.appliedAmount && totals.credits.payer.appliedAmount.amount > 0;\n  const showPastDue = !!totals.pastDue?.amount && totals.pastDue.amount > 0;\n  const showDowngradeInfo = !isImmediatePlanChange;\n\n  const fee =\n    planPeriod === 'month'\n      ? plan.fee\n      : // eslint-disable-next-line @typescript-eslint/no-non-null-assertion\n        plan.annualMonthlyFee!;\n\n  return (\n    <Drawer.Body>\n      <Box\n        elementDescriptor={descriptors.checkoutFormLineItemsRoot}\n        sx={t => ({\n          padding: t.space.$4,\n          borderBottomWidth: t.borderWidths.$normal,\n          borderBottomStyle: t.borderStyles.$solid,\n          borderBottomColor: t.colors.$borderAlpha100,\n        })}\n      >\n        <LineItems.Root>\n          <LineItems.Group>\n            <LineItems.Title\n              title={plan.name}\n              description={planPeriod === 'annual' ? localizationKeys('billing.billedAnnually') : undefined}\n              badge={\n                plan.freeTrialEnabled && freeTrialEndsAt ? (\n                  <SubscriptionBadge subscription={{ status: 'free_trial' }} />\n                ) : null\n              }\n            />\n            <LineItems.Description\n              prefix={planPeriod === 'annual' ? 'x12' : undefined}\n              text={`${fee.currencySymbol}${fee.amountFormatted}`}\n              suffix={localizationKeys('billing.checkout.perMonth')}\n            />\n          </LineItems.Group>\n          <LineItems.Group\n            borderTop\n            variant='tertiary'\n          >\n            <LineItems.Title title={localizationKeys('billing.subtotal')} />\n            <LineItems.Description text={`${totals.subtotal.currencySymbol}${totals.subtotal.amountFormatted}`} />\n          </LineItems.Group>\n          {showProratedCredit && (\n            <LineItems.Group variant='tertiary'>\n              <LineItems.Title title={localizationKeys('billing.creditRemainder')} />\n              <LineItems.Description\n                text={`- ${totals.credits?.proration?.amount.currencySymbol}${totals.credits?.proration?.amount.amountFormatted}`}\n              />\n            </LineItems.Group>\n          )}\n          {showAccountCredits && (\n            <LineItems.Group variant='tertiary'>\n              <LineItems.Title title={localizationKeys('billing.payerCreditRemainder')} />\n              <LineItems.Description\n                text={`- ${totals.credits?.payer?.appliedAmount?.currencySymbol}${totals.credits?.payer?.appliedAmount?.amountFormatted}`}\n              />\n            </LineItems.Group>\n          )}\n          {showPastDue && (\n            <LineItems.Group variant='tertiary'>\n              <Tooltip.Root>\n                <Tooltip.Trigger>\n                  <LineItems.Title\n                    title={localizationKeys('billing.pastDue')}\n                    icon={InformationCircle}\n                  />\n                </Tooltip.Trigger>\n                <Tooltip.Content text={localizationKeys('billing.checkout.pastDueNotice')} />\n              </Tooltip.Root>\n              <LineItems.Description text={`${totals.pastDue?.currencySymbol}${totals.pastDue?.amountFormatted}`} />\n            </LineItems.Group>\n          )}\n\n          {!!freeTrialEndsAt && !!plan.freeTrialDays && totals.totalDueAfterFreeTrial && (\n            <LineItems.Group variant='tertiary'>\n              <LineItems.Title\n                title={localizationKeys('billing.checkout.totalDueAfterTrial', {\n                  days: plan.freeTrialDays,\n                })}\n              />\n              <LineItems.Description\n                text={`${totals.totalDueAfterFreeTrial.currencySymbol}${totals.totalDueAfterFreeTrial.amountFormatted}`}\n              />\n            </LineItems.Group>\n          )}\n\n          <LineItems.Group borderTop>\n            <LineItems.Title title={localizationKeys('billing.totalDueToday')} />\n            <LineItems.Description text={`${totals.totalDueNow.currencySymbol}${totals.totalDueNow.amountFormatted}`} />\n          </LineItems.Group>\n        </LineItems.Root>\n      </Box>\n\n      {showDowngradeInfo && (\n        <Box\n          elementDescriptor={descriptors.checkoutFormLineItemsRoot}\n          sx={t => ({\n            paddingBlockStart: t.space.$4,\n            paddingInline: t.space.$4,\n          })}\n        >\n          <Text\n            localizationKey={localizationKeys('billing.checkout.downgradeNotice')}\n            variant='caption'\n            colorScheme='secondary'\n          />\n        </Box>\n      )}\n\n      <CheckoutFormElements />\n    </Drawer.Body>\n  );\n});\n\nconst useCheckoutMutations = () => {\n  const { onSubscriptionComplete } = useCheckoutContext();\n  const { checkout } = useCheckout();\n  const card = useCardState();\n\n  if (checkout.status !== 'needs_confirmation') {\n    throw new Error('Checkout not found');\n  }\n\n  const confirmCheckout = async (params: ConfirmCheckoutParams) => {\n    card.setLoading();\n    card.setError(undefined);\n\n    const { error } = await checkout.confirm(params);\n\n    if (error) {\n      handleError(error, [], card.setError);\n    } else {\n      onSubscriptionComplete?.();\n    }\n    card.setIdle();\n  };\n\n  const payWithExistingPaymentMethod = (e: React.FormEvent<HTMLFormElement>) => {\n    e.preventDefault();\n\n    const data = new FormData(e.currentTarget);\n    const paymentMethodId = data.get(HIDDEN_INPUT_NAME) as string;\n\n    return confirmCheckout({\n      paymentMethodId,\n    });\n  };\n\n  const payWithoutPaymentMethod = (e: React.FormEvent<HTMLFormElement>) => {\n    e.preventDefault();\n    return confirmCheckout({});\n  };\n\n  const addPaymentMethodAndPay = (ctx: { gateway: 'stripe'; paymentToken: string }) => confirmCheckout(ctx);\n\n  const payWithTestCard = () =>\n    confirmCheckout({\n      gateway: 'stripe',\n      useTestCard: true,\n    });\n\n  return {\n    payWithExistingPaymentMethod,\n    addPaymentMethodAndPay,\n    payWithTestCard,\n    payWithoutPaymentMethod,\n  };\n};\n\nconst CheckoutFormElements = () => {\n  const { checkout } = useCheckout();\n  const { plan } = checkout;\n\n  const { isLoading } = usePaymentMethods();\n\n  if (!plan) {\n    return null;\n  }\n\n  if (isLoading) {\n    return (\n      <Spinner\n        sx={{\n          margin: 'auto',\n        }}\n      />\n    );\n  }\n\n  return <CheckoutFormElementsInternal />;\n};\n\nconst CheckoutFormElementsInternal = () => {\n  const { checkout } = useCheckout();\n  const { plan, isImmediatePlanChange, needsPaymentMethod } = checkout;\n  const { data: paymentMethods } = usePaymentMethods();\n\n  const [paymentMethodSource, setPaymentMethodSource] = useState<PaymentMethodSource>(() =>\n    paymentMethods.length > 0 || __BUILD_DISABLE_RHC__ ? 'existing' : 'new',\n  );\n\n  const showTabs = isImmediatePlanChange && needsPaymentMethod;\n\n  if (!plan) {\n    return null;\n  }\n\n  return (\n    <Col\n      elementDescriptor={descriptors.checkoutFormElementsRoot}\n      gap={4}\n      sx={t => ({ padding: t.space.$4 })}\n    >\n      {__BUILD_DISABLE_RHC__ ? null : (\n        <>\n          {paymentMethods.length > 0 && showTabs && (\n            <SegmentedControl.Root\n              aria-label='Payment method source'\n              value={paymentMethodSource}\n              onChange={value => setPaymentMethodSource(value as PaymentMethodSource)}\n              size='lg'\n              fullWidth\n            >\n              <SegmentedControl.Button\n                value='existing'\n                text={localizationKeys('billing.paymentMethods__label')}\n              />\n              <SegmentedControl.Button\n                value='new'\n                text={localizationKeys('billing.addPaymentMethod__label')}\n              />\n            </SegmentedControl.Root>\n          )}\n        </>\n      )}\n\n      {!needsPaymentMethod ? (\n        <FreeTrialButton />\n      ) : paymentMethodSource === 'existing' ? (\n        <ExistingPaymentMethodForm paymentMethods={paymentMethods} />\n      ) : (\n        !__BUILD_DISABLE_RHC__ && paymentMethodSource === 'new' && <AddPaymentMethodForCheckout />\n      )}\n    </Col>\n  );\n};\n\nexport const PayWithTestPaymentMethod = () => {\n  const { isLoading } = useCardState();\n  const { payWithTestCard } = useCheckoutMutations();\n\n  return (\n    <Box\n      sx={t => ({\n        background: t.colors.$neutralAlpha50,\n        padding: t.space.$2x5,\n        borderRadius: t.radii.$md,\n        borderWidth: t.borderWidths.$normal,\n        borderStyle: t.borderStyles.$solid,\n        borderColor: t.colors.$borderAlpha100,\n        display: 'flex',\n        flexDirection: 'column',\n        rowGap: t.space.$2,\n        position: 'relative',\n      })}\n    >\n      <Box\n        sx={t => ({\n          position: 'absolute',\n          inset: 0,\n          background: `repeating-linear-gradient(-45deg,${t.colors.$warningAlpha100},${t.colors.$warningAlpha100} 6px,${t.colors.$warningAlpha150} 6px,${t.colors.$warningAlpha150} 12px)`,\n          maskImage: `linear-gradient(transparent 20%, black)`,\n          pointerEvents: 'none',\n        })}\n      />\n      <Flex\n        sx={t => ({\n          alignItems: 'center',\n          justifyContent: 'center',\n          flexDirection: 'column',\n          rowGap: t.space.$2,\n        })}\n      >\n        <Text\n          sx={t => ({\n            color: t.colors.$warning500,\n            fontWeight: t.fontWeights.$semibold,\n          })}\n          localizationKey={localizationKeys('billing.paymentMethod.dev.developmentMode')}\n        />\n        <Button\n          type='button'\n          block\n          variant='bordered'\n          localizationKey={localizationKeys('userProfile.billingPage.paymentMethodsSection.payWithTestCardButton')}\n          colorScheme='secondary'\n          isLoading={isLoading}\n          onClick={payWithTestCard}\n        />\n      </Flex>\n    </Box>\n  );\n};\n\nconst useSubmitLabel = () => {\n  const { checkout } = useCheckout();\n  const { status, freeTrialEndsAt, totals } = checkout;\n\n  if (status === 'needs_initialization') {\n    throw new Error('Clerk: Invalid state');\n  }\n\n  if (freeTrialEndsAt) {\n    return localizationKeys('billing.startFreeTrial');\n  }\n\n  if (totals.totalDueNow.amount > 0) {\n    return localizationKeys('billing.pay', {\n      amount: `${totals.totalDueNow.currencySymbol}${totals.totalDueNow.amountFormatted}`,\n    });\n  }\n\n  return localizationKeys('billing.subscribe');\n};\n\nconst FreeTrialButton = withCardStateProvider(() => {\n  const { for: _for } = useCheckoutContext();\n  const { payWithoutPaymentMethod } = useCheckoutMutations();\n  const card = useCardState();\n\n  return (\n    <Form\n      onSubmit={payWithoutPaymentMethod}\n      sx={formProps}\n    >\n      <Card.Alert>{card.error}</Card.Alert>\n      <CheckoutSubmitButton />\n    </Form>\n  );\n});\n\nconst AddPaymentMethodForCheckout = withCardStateProvider(() => {\n  const { addPaymentMethodAndPay } = useCheckoutMutations();\n  const submitLabel = useSubmitLabel();\n  const { checkout } = useCheckout();\n\n  return (\n    <AddPaymentMethod.Root\n      onSuccess={addPaymentMethodAndPay}\n      checkout={checkout}\n    >\n      <DevOnly>\n        <PayWithTestPaymentMethod />\n      </DevOnly>\n\n      <AddPaymentMethod.FormButton text={submitLabel} />\n    </AddPaymentMethod.Root>\n  );\n});\n\nconst CheckoutSubmitButton = (props: PropsOfComponent<typeof Button>) => {\n  const card = useCardState();\n  const submitLabel = useSubmitLabel();\n\n  return (\n    <Button\n      type='submit'\n      colorScheme='primary'\n      size='sm'\n      textVariant={'buttonLarge'}\n      sx={{\n        width: '100%',\n      }}\n      isLoading={card.isLoading}\n      localizationKey={submitLabel}\n      {...props}\n    />\n  );\n};\n\nconst formProps: ThemableCssProp = t => ({\n  display: 'flex',\n  flexDirection: 'column',\n  rowGap: t.space.$4,\n});\n\nconst ExistingPaymentMethodForm = withCardStateProvider(\n  ({ paymentMethods }: { paymentMethods: BillingPaymentMethodResource[] }) => {\n    const { checkout } = useCheckout();\n    const { paymentMethod, isImmediatePlanChange, needsPaymentMethod } = checkout;\n\n    const { payWithExistingPaymentMethod } = useCheckoutMutations();\n    const card = useCardState();\n    const [selectedPaymentMethod, setSelectedPaymentMethod] = useState<\n      RemoveFunctions<BillingPaymentMethodResource> | undefined\n    >(paymentMethod || paymentMethods.find(p => p.isDefault));\n\n    const options = useMemo(() => {\n      return paymentMethods.map(method => {\n        const label =\n          method.paymentType !== 'card'\n            ? method.paymentType\n              ? `${capitalize(method.paymentType)}`\n              : '–'\n            : method.cardType\n              ? `${capitalize(method.cardType)} ⋯ ${method.last4}`\n              : '–';\n\n        return {\n          value: method.id,\n          label,\n        };\n      });\n    }, [paymentMethods]);\n\n    const showPaymentMethods = isImmediatePlanChange && needsPaymentMethod;\n\n    return (\n      <Form\n        onSubmit={payWithExistingPaymentMethod}\n        sx={formProps}\n      >\n        {showPaymentMethods ? (\n          <Select\n            elementId='paymentMethod'\n            options={options}\n            value={selectedPaymentMethod?.id || null}\n            onChange={option => {\n              const paymentMethod = paymentMethods.find(source => source.id === option.value);\n              setSelectedPaymentMethod(paymentMethod);\n            }}\n            portal\n          >\n            {/*Store value inside an input in order to be accessible as form data*/}\n            <input\n              name={HIDDEN_INPUT_NAME}\n              type='hidden'\n              value={selectedPaymentMethod?.id}\n            />\n            <SelectButton\n              icon={ChevronUpDown}\n              sx={t => ({\n                justifyContent: 'space-between',\n                backgroundColor: t.colors.$colorBackground,\n              })}\n            >\n              {selectedPaymentMethod && <PaymentMethodRow paymentMethod={selectedPaymentMethod} />}\n            </SelectButton>\n            <SelectOptionList\n              sx={t => ({\n                paddingBlock: t.space.$1,\n                color: t.colors.$colorForeground,\n              })}\n            />\n          </Select>\n        ) : (\n          <input\n            name={HIDDEN_INPUT_NAME}\n            type='hidden'\n            value={selectedPaymentMethod?.id}\n          />\n        )}\n        <Card.Alert>{card.error}</Card.Alert>\n        <CheckoutSubmitButton />\n      </Form>\n    );\n  },\n);\n"],"mappings":"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"}
+{"version":3,"file":"CheckoutForm.js","names":["useCheckout","InformationCircle","AddPaymentMethod.Root","AddPaymentMethod.FormButton","formProps: ThemableCssProp","ChevronUpDown"],"sources":["../../../src/components/Checkout/CheckoutForm.tsx"],"sourcesContent":["import { __experimental_useCheckout as useCheckout } from '@clerk/shared/react';\nimport type { BillingPaymentMethodResource, ConfirmCheckoutParams, RemoveFunctions } from '@clerk/shared/types';\nimport { useMemo, useState } from 'react';\n\nimport { Card } from '@/ui/elements/Card';\nimport { useCardState, withCardStateProvider } from '@/ui/elements/contexts';\nimport { Drawer } from '@/ui/elements/Drawer';\nimport { LineItems } from '@/ui/elements/LineItems';\nimport { SegmentedControl } from '@/ui/elements/SegmentedControl';\nimport { Select, SelectButton, SelectOptionList } from '@/ui/elements/Select';\nimport { Tooltip } from '@/ui/elements/Tooltip';\nimport { handleError } from '@/ui/utils/errorHandler';\n\nimport { DevOnly } from '../../common/DevOnly';\nimport { useCheckoutContext, usePaymentMethods } from '../../contexts';\nimport { Box, Button, Col, descriptors, Flex, Form, localizationKeys, Spinner, Text } from '../../customizables';\nimport { ChevronUpDown, InformationCircle } from '../../icons';\nimport type { PropsOfComponent, ThemableCssProp } from '../../styledSystem';\nimport * as AddPaymentMethod from '../PaymentMethods/AddPaymentMethod';\nimport { PaymentMethodRow } from '../PaymentMethods/PaymentMethodRow';\nimport { SubscriptionBadge } from '../Subscriptions/badge';\n\ntype PaymentMethodSource = 'existing' | 'new';\n\nconst capitalize = (name: string) => name[0].toUpperCase() + name.slice(1);\n\nconst HIDDEN_INPUT_NAME = 'payment_method_id';\n\nexport const CheckoutForm = withCardStateProvider(() => {\n  const { checkout } = useCheckout();\n\n  const { plan, totals, isImmediatePlanChange, planPeriod, freeTrialEndsAt } = checkout;\n\n  if (!plan) {\n    return null;\n  }\n\n  const showProratedCredit = !!totals.credits?.proration?.amount && totals.credits.proration.amount.amount > 0;\n  const showAccountCredits = !!totals.credits?.payer?.appliedAmount && totals.credits.payer.appliedAmount.amount > 0;\n  const showPastDue = !!totals.pastDue?.amount && totals.pastDue.amount > 0;\n  const showDowngradeInfo = !isImmediatePlanChange;\n\n  const fee =\n    planPeriod === 'month'\n      ? // eslint-disable-next-line @typescript-eslint/no-non-null-assertion\n        plan.fee!\n      : // eslint-disable-next-line @typescript-eslint/no-non-null-assertion\n        plan.annualMonthlyFee!;\n\n  return (\n    <Drawer.Body>\n      <Box\n        elementDescriptor={descriptors.checkoutFormLineItemsRoot}\n        sx={t => ({\n          padding: t.space.$4,\n          borderBottomWidth: t.borderWidths.$normal,\n          borderBottomStyle: t.borderStyles.$solid,\n          borderBottomColor: t.colors.$borderAlpha100,\n        })}\n      >\n        <LineItems.Root>\n          <LineItems.Group>\n            <LineItems.Title\n              title={plan.name}\n              description={planPeriod === 'annual' ? localizationKeys('billing.billedAnnually') : undefined}\n              badge={\n                plan.freeTrialEnabled && freeTrialEndsAt ? (\n                  <SubscriptionBadge subscription={{ status: 'free_trial' }} />\n                ) : null\n              }\n            />\n            <LineItems.Description\n              prefix={planPeriod === 'annual' ? 'x12' : undefined}\n              text={`${fee.currencySymbol}${fee.amountFormatted}`}\n              suffix={localizationKeys('billing.checkout.perMonth')}\n            />\n          </LineItems.Group>\n          <LineItems.Group\n            borderTop\n            variant='tertiary'\n          >\n            <LineItems.Title title={localizationKeys('billing.subtotal')} />\n            <LineItems.Description text={`${totals.subtotal.currencySymbol}${totals.subtotal.amountFormatted}`} />\n          </LineItems.Group>\n          {showProratedCredit && (\n            <LineItems.Group variant='tertiary'>\n              <LineItems.Title title={localizationKeys('billing.creditRemainder')} />\n              <LineItems.Description\n                text={`- ${totals.credits?.proration?.amount.currencySymbol}${totals.credits?.proration?.amount.amountFormatted}`}\n              />\n            </LineItems.Group>\n          )}\n          {showAccountCredits && (\n            <LineItems.Group variant='tertiary'>\n              <LineItems.Title title={localizationKeys('billing.payerCreditRemainder')} />\n              <LineItems.Description\n                text={`- ${totals.credits?.payer?.appliedAmount?.currencySymbol}${totals.credits?.payer?.appliedAmount?.amountFormatted}`}\n              />\n            </LineItems.Group>\n          )}\n          {showPastDue && (\n            <LineItems.Group variant='tertiary'>\n              <Tooltip.Root>\n                <Tooltip.Trigger>\n                  <LineItems.Title\n                    title={localizationKeys('billing.pastDue')}\n                    icon={InformationCircle}\n                  />\n                </Tooltip.Trigger>\n                <Tooltip.Content text={localizationKeys('billing.checkout.pastDueNotice')} />\n              </Tooltip.Root>\n              <LineItems.Description text={`${totals.pastDue?.currencySymbol}${totals.pastDue?.amountFormatted}`} />\n            </LineItems.Group>\n          )}\n\n          {!!freeTrialEndsAt && !!plan.freeTrialDays && totals.totalDueAfterFreeTrial && (\n            <LineItems.Group variant='tertiary'>\n              <LineItems.Title\n                title={localizationKeys('billing.checkout.totalDueAfterTrial', {\n                  days: plan.freeTrialDays,\n                })}\n              />\n              <LineItems.Description\n                text={`${totals.totalDueAfterFreeTrial.currencySymbol}${totals.totalDueAfterFreeTrial.amountFormatted}`}\n              />\n            </LineItems.Group>\n          )}\n\n          <LineItems.Group borderTop>\n            <LineItems.Title title={localizationKeys('billing.totalDueToday')} />\n            <LineItems.Description text={`${totals.totalDueNow.currencySymbol}${totals.totalDueNow.amountFormatted}`} />\n          </LineItems.Group>\n        </LineItems.Root>\n      </Box>\n\n      {showDowngradeInfo && (\n        <Box\n          elementDescriptor={descriptors.checkoutFormLineItemsRoot}\n          sx={t => ({\n            paddingBlockStart: t.space.$4,\n            paddingInline: t.space.$4,\n          })}\n        >\n          <Text\n            localizationKey={localizationKeys('billing.checkout.downgradeNotice')}\n            variant='caption'\n            colorScheme='secondary'\n          />\n        </Box>\n      )}\n\n      <CheckoutFormElements />\n    </Drawer.Body>\n  );\n});\n\nconst useCheckoutMutations = () => {\n  const { onSubscriptionComplete } = useCheckoutContext();\n  const { checkout } = useCheckout();\n  const card = useCardState();\n\n  if (checkout.status !== 'needs_confirmation') {\n    throw new Error('Checkout not found');\n  }\n\n  const confirmCheckout = async (params: ConfirmCheckoutParams) => {\n    card.setLoading();\n    card.setError(undefined);\n\n    const { error } = await checkout.confirm(params);\n\n    if (error) {\n      handleError(error, [], card.setError);\n    } else {\n      onSubscriptionComplete?.();\n    }\n    card.setIdle();\n  };\n\n  const payWithExistingPaymentMethod = (e: React.FormEvent<HTMLFormElement>) => {\n    e.preventDefault();\n\n    const data = new FormData(e.currentTarget);\n    const paymentMethodId = data.get(HIDDEN_INPUT_NAME) as string;\n\n    return confirmCheckout({\n      paymentMethodId,\n    });\n  };\n\n  const payWithoutPaymentMethod = (e: React.FormEvent<HTMLFormElement>) => {\n    e.preventDefault();\n    return confirmCheckout({});\n  };\n\n  const addPaymentMethodAndPay = (ctx: { gateway: 'stripe'; paymentToken: string }) => confirmCheckout(ctx);\n\n  const payWithTestCard = () =>\n    confirmCheckout({\n      gateway: 'stripe',\n      useTestCard: true,\n    });\n\n  return {\n    payWithExistingPaymentMethod,\n    addPaymentMethodAndPay,\n    payWithTestCard,\n    payWithoutPaymentMethod,\n  };\n};\n\nconst CheckoutFormElements = () => {\n  const { checkout } = useCheckout();\n  const { plan } = checkout;\n\n  const { isLoading } = usePaymentMethods();\n\n  if (!plan) {\n    return null;\n  }\n\n  if (isLoading) {\n    return (\n      <Spinner\n        sx={{\n          margin: 'auto',\n        }}\n      />\n    );\n  }\n\n  return <CheckoutFormElementsInternal />;\n};\n\nconst CheckoutFormElementsInternal = () => {\n  const { checkout } = useCheckout();\n  const { plan, isImmediatePlanChange, needsPaymentMethod } = checkout;\n  const { data: paymentMethods } = usePaymentMethods();\n\n  const [paymentMethodSource, setPaymentMethodSource] = useState<PaymentMethodSource>(() =>\n    paymentMethods.length > 0 || __BUILD_DISABLE_RHC__ ? 'existing' : 'new',\n  );\n\n  const showTabs = isImmediatePlanChange && needsPaymentMethod;\n\n  if (!plan) {\n    return null;\n  }\n\n  return (\n    <Col\n      elementDescriptor={descriptors.checkoutFormElementsRoot}\n      gap={4}\n      sx={t => ({ padding: t.space.$4 })}\n    >\n      {__BUILD_DISABLE_RHC__ ? null : (\n        <>\n          {paymentMethods.length > 0 && showTabs && (\n            <SegmentedControl.Root\n              aria-label='Payment method source'\n              value={paymentMethodSource}\n              onChange={value => setPaymentMethodSource(value as PaymentMethodSource)}\n              size='lg'\n              fullWidth\n            >\n              <SegmentedControl.Button\n                value='existing'\n                text={localizationKeys('billing.paymentMethods__label')}\n              />\n              <SegmentedControl.Button\n                value='new'\n                text={localizationKeys('billing.addPaymentMethod__label')}\n              />\n            </SegmentedControl.Root>\n          )}\n        </>\n      )}\n\n      {!needsPaymentMethod ? (\n        <FreeTrialButton />\n      ) : paymentMethodSource === 'existing' ? (\n        <ExistingPaymentMethodForm paymentMethods={paymentMethods} />\n      ) : (\n        !__BUILD_DISABLE_RHC__ && paymentMethodSource === 'new' && <AddPaymentMethodForCheckout />\n      )}\n    </Col>\n  );\n};\n\nexport const PayWithTestPaymentMethod = () => {\n  const { isLoading } = useCardState();\n  const { payWithTestCard } = useCheckoutMutations();\n\n  return (\n    <Box\n      sx={t => ({\n        background: t.colors.$neutralAlpha50,\n        padding: t.space.$2x5,\n        borderRadius: t.radii.$md,\n        borderWidth: t.borderWidths.$normal,\n        borderStyle: t.borderStyles.$solid,\n        borderColor: t.colors.$borderAlpha100,\n        display: 'flex',\n        flexDirection: 'column',\n        rowGap: t.space.$2,\n        position: 'relative',\n      })}\n    >\n      <Box\n        sx={t => ({\n          position: 'absolute',\n          inset: 0,\n          background: `repeating-linear-gradient(-45deg,${t.colors.$warningAlpha100},${t.colors.$warningAlpha100} 6px,${t.colors.$warningAlpha150} 6px,${t.colors.$warningAlpha150} 12px)`,\n          maskImage: `linear-gradient(transparent 20%, black)`,\n          pointerEvents: 'none',\n        })}\n      />\n      <Flex\n        sx={t => ({\n          alignItems: 'center',\n          justifyContent: 'center',\n          flexDirection: 'column',\n          rowGap: t.space.$2,\n        })}\n      >\n        <Text\n          sx={t => ({\n            color: t.colors.$warning500,\n            fontWeight: t.fontWeights.$semibold,\n          })}\n          localizationKey={localizationKeys('billing.paymentMethod.dev.developmentMode')}\n        />\n        <Button\n          type='button'\n          block\n          variant='bordered'\n          localizationKey={localizationKeys('userProfile.billingPage.paymentMethodsSection.payWithTestCardButton')}\n          colorScheme='secondary'\n          isLoading={isLoading}\n          onClick={payWithTestCard}\n        />\n      </Flex>\n    </Box>\n  );\n};\n\nconst useSubmitLabel = () => {\n  const { checkout } = useCheckout();\n  const { status, freeTrialEndsAt, totals } = checkout;\n\n  if (status === 'needs_initialization') {\n    throw new Error('Clerk: Invalid state');\n  }\n\n  if (freeTrialEndsAt) {\n    return localizationKeys('billing.startFreeTrial');\n  }\n\n  if (totals.totalDueNow.amount > 0) {\n    return localizationKeys('billing.pay', {\n      amount: `${totals.totalDueNow.currencySymbol}${totals.totalDueNow.amountFormatted}`,\n    });\n  }\n\n  return localizationKeys('billing.subscribe');\n};\n\nconst FreeTrialButton = withCardStateProvider(() => {\n  const { for: _for } = useCheckoutContext();\n  const { payWithoutPaymentMethod } = useCheckoutMutations();\n  const card = useCardState();\n\n  return (\n    <Form\n      onSubmit={payWithoutPaymentMethod}\n      sx={formProps}\n    >\n      <Card.Alert>{card.error}</Card.Alert>\n      <CheckoutSubmitButton />\n    </Form>\n  );\n});\n\nconst AddPaymentMethodForCheckout = withCardStateProvider(() => {\n  const { addPaymentMethodAndPay } = useCheckoutMutations();\n  const submitLabel = useSubmitLabel();\n  const { checkout } = useCheckout();\n\n  return (\n    <AddPaymentMethod.Root\n      onSuccess={addPaymentMethodAndPay}\n      checkout={checkout}\n    >\n      <DevOnly>\n        <PayWithTestPaymentMethod />\n      </DevOnly>\n\n      <AddPaymentMethod.FormButton text={submitLabel} />\n    </AddPaymentMethod.Root>\n  );\n});\n\nconst CheckoutSubmitButton = (props: PropsOfComponent<typeof Button>) => {\n  const card = useCardState();\n  const submitLabel = useSubmitLabel();\n\n  return (\n    <Button\n      type='submit'\n      colorScheme='primary'\n      size='sm'\n      textVariant={'buttonLarge'}\n      sx={{\n        width: '100%',\n      }}\n      isLoading={card.isLoading}\n      localizationKey={submitLabel}\n      {...props}\n    />\n  );\n};\n\nconst formProps: ThemableCssProp = t => ({\n  display: 'flex',\n  flexDirection: 'column',\n  rowGap: t.space.$4,\n});\n\nconst ExistingPaymentMethodForm = withCardStateProvider(\n  ({ paymentMethods }: { paymentMethods: BillingPaymentMethodResource[] }) => {\n    const { checkout } = useCheckout();\n    const { paymentMethod, isImmediatePlanChange, needsPaymentMethod } = checkout;\n\n    const { payWithExistingPaymentMethod } = useCheckoutMutations();\n    const card = useCardState();\n    const [selectedPaymentMethod, setSelectedPaymentMethod] = useState<\n      RemoveFunctions<BillingPaymentMethodResource> | undefined\n    >(paymentMethod || paymentMethods.find(p => p.isDefault));\n\n    const options = useMemo(() => {\n      return paymentMethods.map(method => {\n        const label =\n          method.paymentType !== 'card'\n            ? method.paymentType\n              ? `${capitalize(method.paymentType)}`\n              : '–'\n            : method.cardType\n              ? `${capitalize(method.cardType)} ⋯ ${method.last4}`\n              : '–';\n\n        return {\n          value: method.id,\n          label,\n        };\n      });\n    }, [paymentMethods]);\n\n    const showPaymentMethods = isImmediatePlanChange && needsPaymentMethod;\n\n    return (\n      <Form\n        onSubmit={payWithExistingPaymentMethod}\n        sx={formProps}\n      >\n        {showPaymentMethods ? (\n          <Select\n            elementId='paymentMethod'\n            options={options}\n            value={selectedPaymentMethod?.id || null}\n            onChange={option => {\n              const paymentMethod = paymentMethods.find(source => source.id === option.value);\n              setSelectedPaymentMethod(paymentMethod);\n            }}\n            portal\n          >\n            {/*Store value inside an input in order to be accessible as form data*/}\n            <input\n              name={HIDDEN_INPUT_NAME}\n              type='hidden'\n              value={selectedPaymentMethod?.id}\n            />\n            <SelectButton\n              icon={ChevronUpDown}\n              sx={t => ({\n                justifyContent: 'space-between',\n                backgroundColor: t.colors.$colorBackground,\n              })}\n            >\n              {selectedPaymentMethod && <PaymentMethodRow paymentMethod={selectedPaymentMethod} />}\n            </SelectButton>\n            <SelectOptionList\n              sx={t => ({\n                paddingBlock: t.space.$1,\n                color: t.colors.$colorForeground,\n              })}\n            />\n          </Select>\n        ) : (\n          <input\n            name={HIDDEN_INPUT_NAME}\n            type='hidden'\n            value={selectedPaymentMethod?.id}\n          />\n        )}\n        <Card.Alert>{card.error}</Card.Alert>\n        <CheckoutSubmitButton />\n      </Form>\n    );\n  },\n);\n"],"mappings":"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"}

package/dist/components/PaymentAttempts/PaymentAttemptPage.js.map

@@ -1 +1 @@
-{"version":3,"file":"PaymentAttemptPage.js","names":["t","Check","Copy"],"sources":["../../../src/components/PaymentAttempts/PaymentAttemptPage.tsx"],"sourcesContent":["import { __internal_usePaymentAttemptQuery } from '@clerk/shared/react/index';\nimport type { BillingSubscriptionItemResource } from '@clerk/shared/types';\n\nimport { Alert } from '@/ui/elements/Alert';\nimport { Header } from '@/ui/elements/Header';\nimport { LineItems } from '@/ui/elements/LineItems';\nimport { formatDate } from '@/ui/utils/formatDate';\nimport { truncateWithEndVisible } from '@/ui/utils/truncateTextWithEndVisible';\n\nimport { useSubscriberTypeContext, useSubscriberTypeLocalizationRoot } from '../../contexts/components';\nimport {\n  Badge,\n  Box,\n  Button,\n  descriptors,\n  Heading,\n  Icon,\n  localizationKeys,\n  Span,\n  Spinner,\n  Text,\n  useLocalizations,\n} from '../../customizables';\nimport { useClipboard } from '../../hooks';\nimport { Check, Copy } from '../../icons';\nimport { useRouter } from '../../router';\n\nexport const PaymentAttemptPage = () => {\n  const { params, navigate } = useRouter();\n  const subscriberType = useSubscriberTypeContext();\n  const localizationRoot = useSubscriberTypeLocalizationRoot();\n  const { t, translateError } = useLocalizations();\n  const requesterType = subscriberType === 'organization' ? 'organization' : 'user';\n\n  const {\n    data: paymentAttempt,\n    isLoading,\n    error,\n  } = __internal_usePaymentAttemptQuery({\n    paymentAttemptId: params.paymentAttemptId,\n    for: requesterType,\n    enabled: Boolean(params.paymentAttemptId),\n  });\n\n  const subscriptionItem = paymentAttempt?.subscriptionItem;\n\n  if (isLoading) {\n    return (\n      <Box sx={{ display: 'flex', justifyContent: 'center', alignItems: 'center', height: '100%' }}>\n        <Spinner\n          colorScheme='primary'\n          sx={{ margin: 'auto', display: 'block' }}\n          elementDescriptor={descriptors.spinner}\n        />\n      </Box>\n    );\n  }\n\n  return (\n    <>\n      <Header.Root\n        sx={t => ({\n          borderBlockEndWidth: t.borderWidths.$normal,\n          borderBlockEndStyle: t.borderStyles.$solid,\n          borderBlockEndColor: t.colors.$borderAlpha100,\n          marginBlockEnd: t.space.$4,\n          paddingBlockEnd: t.space.$4,\n        })}\n      >\n        <Header.BackLink onClick={() => void navigate('../../', { searchParams: new URLSearchParams('tab=payments') })}>\n          <Header.Title\n            localizationKey={localizationKeys(`${localizationRoot}.billingPage.start.headerTitle__payments`)}\n            textVariant='h2'\n          />\n        </Header.BackLink>\n      </Header.Root>\n      {!paymentAttempt ? (\n        <Box sx={{ display: 'flex', justifyContent: 'center', alignItems: 'center', height: '100%' }}>\n          <Alert\n            variant='danger'\n            colorScheme='danger'\n          >\n            {error\n              ? translateError(error.errors[0])\n              : t(localizationKeys(`${localizationRoot}.billingPage.paymentHistorySection.notFound`))}\n          </Alert>\n        </Box>\n      ) : (\n        <Box\n          elementDescriptor={descriptors.paymentAttemptRoot}\n          as='article'\n          sx={t => ({\n            borderWidth: t.borderWidths.$normal,\n            borderStyle: t.borderStyles.$solid,\n            borderColor: t.colors.$borderAlpha100,\n            borderRadius: t.radii.$lg,\n            overflow: 'clip',\n          })}\n        >\n          <Box\n            elementDescriptor={descriptors.paymentAttemptHeader}\n            as='header'\n            sx={t => ({\n              padding: t.space.$4,\n              background: t.colors.$neutralAlpha25,\n              display: 'flex',\n              justifyContent: 'space-between',\n              alignItems: 'flex-start',\n            })}\n          >\n            <Span elementDescriptor={descriptors.paymentAttemptHeaderTitleContainer}>\n              <Heading\n                elementDescriptor={descriptors.paymentAttemptHeaderTitle}\n                textVariant='h2'\n                localizationKey={formatDate(\n                  paymentAttempt.paidAt || paymentAttempt.failedAt || paymentAttempt.updatedAt,\n                  'long',\n                )}\n              />\n              <Span\n                sx={t => ({\n                  display: 'flex',\n                  alignItems: 'center',\n                  gap: t.space.$0x25,\n                  color: t.colors.$colorMutedForeground,\n                })}\n              >\n                <CopyButton\n                  copyLabel='Copy payment attempt ID'\n                  text={paymentAttempt.id}\n                />\n                <Text\n                  colorScheme='secondary'\n                  variant='subtitle'\n                >\n                  {truncateWithEndVisible(paymentAttempt.id)}\n                </Text>\n              </Span>\n            </Span>\n            <Badge\n              elementDescriptor={descriptors.paymentAttemptHeaderBadge}\n              colorScheme={\n                paymentAttempt.status === 'paid' ? 'success' : paymentAttempt.status === 'failed' ? 'danger' : 'primary'\n              }\n              sx={{ textTransform: 'capitalize' }}\n            >\n              {paymentAttempt.status}\n            </Badge>\n          </Box>\n          <PaymentAttemptBody subscriptionItem={subscriptionItem} />\n          <Box\n            elementDescriptor={descriptors.paymentAttemptFooter}\n            as='footer'\n            sx={t => ({\n              paddingInline: t.space.$4,\n              paddingBlock: t.space.$3,\n              background: t.colors.$neutralAlpha25,\n              borderBlockStartWidth: t.borderWidths.$normal,\n              borderBlockStartStyle: t.borderStyles.$solid,\n              borderBlockStartColor: t.colors.$borderAlpha100,\n              display: 'flex',\n              justifyContent: 'space-between',\n            })}\n          >\n            <Text\n              variant='h3'\n              localizationKey={localizationKeys('billing.totalDue')}\n              elementDescriptor={descriptors.paymentAttemptFooterLabel}\n            />\n            <Span\n              elementDescriptor={descriptors.paymentAttemptFooterValueContainer}\n              sx={t => ({\n                display: 'flex',\n                alignItems: 'center',\n                gap: t.space.$2x5,\n              })}\n            >\n              <Text\n                variant='caption'\n                colorScheme='secondary'\n                elementDescriptor={descriptors.paymentAttemptFooterCurrency}\n                sx={{ textTransform: 'uppercase' }}\n              >\n                {paymentAttempt.amount.currency}\n              </Text>\n              <Text\n                variant='h3'\n                elementDescriptor={descriptors.paymentAttemptFooterValue}\n              >\n                {paymentAttempt.amount.currencySymbol}\n                {paymentAttempt.amount.amountFormatted}\n              </Text>\n            </Span>\n          </Box>\n        </Box>\n      )}\n    </>\n  );\n};\n\nfunction PaymentAttemptBody({ subscriptionItem }: { subscriptionItem: BillingSubscriptionItemResource | undefined }) {\n  if (!subscriptionItem) {\n    return null;\n  }\n\n  const fee =\n    subscriptionItem.planPeriod === 'month'\n      ? subscriptionItem.plan.fee\n      : // eslint-disable-next-line @typescript-eslint/no-non-null-assertion\n        subscriptionItem.plan.annualMonthlyFee!;\n\n  return (\n    <Box\n      elementDescriptor={descriptors.paymentAttemptBody}\n      sx={t => ({\n        padding: t.space.$4,\n      })}\n    >\n      <LineItems.Root>\n        <LineItems.Group>\n          <LineItems.Title title={subscriptionItem.plan.name} />\n          <LineItems.Description\n            prefix={subscriptionItem.planPeriod === 'annual' ? 'x12' : undefined}\n            text={`${fee.currencySymbol}${fee.amountFormatted}`}\n          />\n        </LineItems.Group>\n        <LineItems.Group\n          borderTop\n          variant='tertiary'\n        >\n          <LineItems.Title title={localizationKeys('billing.subtotal')} />\n          <LineItems.Description\n            text={`${subscriptionItem.amount?.currencySymbol}${subscriptionItem.amount?.amountFormatted}`}\n          />\n        </LineItems.Group>\n        {subscriptionItem.credits &&\n          subscriptionItem.credits.proration &&\n          subscriptionItem.credits.proration.amount.amount > 0 && (\n            <LineItems.Group variant='tertiary'>\n              <LineItems.Title title={localizationKeys('billing.prorationCredit')} />\n              <LineItems.Description\n                text={`- ${subscriptionItem.credits.proration.amount.currencySymbol}${subscriptionItem.credits.proration.amount.amountFormatted}`}\n              />\n            </LineItems.Group>\n          )}\n        {subscriptionItem.credits &&\n          subscriptionItem.credits.payer &&\n          subscriptionItem.credits.payer.appliedAmount.amount > 0 && (\n            <LineItems.Group variant='tertiary'>\n              <LineItems.Title title={localizationKeys('billing.accountCredit')} />\n              <LineItems.Description\n                text={`- ${subscriptionItem.credits.payer.appliedAmount.currencySymbol}${subscriptionItem.credits.payer.appliedAmount.amountFormatted}`}\n              />\n            </LineItems.Group>\n          )}\n      </LineItems.Root>\n    </Box>\n  );\n}\n\nfunction CopyButton({ text, copyLabel = 'Copy' }: { text: string; copyLabel?: string }) {\n  const { onCopy, hasCopied } = useClipboard(text);\n\n  return (\n    <Button\n      elementDescriptor={descriptors.paymentAttemptCopyButton}\n      variant='unstyled'\n      onClick={onCopy}\n      sx={t => ({\n        color: 'inherit',\n        width: t.sizes.$4,\n        height: t.sizes.$4,\n        padding: 0,\n        borderRadius: t.radii.$sm,\n        '&:focus-visible': {\n          outline: '2px solid',\n          outlineColor: t.colors.$colorRing,\n        },\n      })}\n      focusRing={false}\n      aria-label={hasCopied ? 'Copied' : copyLabel}\n    >\n      <Icon\n        size='sm'\n        icon={hasCopied ? Check : Copy}\n        aria-hidden\n      />\n    </Button>\n  );\n}\n"],"mappings":"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"}
+{"version":3,"file":"PaymentAttemptPage.js","names":["t","Check","Copy"],"sources":["../../../src/components/PaymentAttempts/PaymentAttemptPage.tsx"],"sourcesContent":["import { __internal_usePaymentAttemptQuery } from '@clerk/shared/react/index';\nimport type { BillingSubscriptionItemResource } from '@clerk/shared/types';\n\nimport { Alert } from '@/ui/elements/Alert';\nimport { Header } from '@/ui/elements/Header';\nimport { LineItems } from '@/ui/elements/LineItems';\nimport { formatDate } from '@/ui/utils/formatDate';\nimport { truncateWithEndVisible } from '@/ui/utils/truncateTextWithEndVisible';\n\nimport { useSubscriberTypeContext, useSubscriberTypeLocalizationRoot } from '../../contexts/components';\nimport {\n  Badge,\n  Box,\n  Button,\n  descriptors,\n  Heading,\n  Icon,\n  localizationKeys,\n  Span,\n  Spinner,\n  Text,\n  useLocalizations,\n} from '../../customizables';\nimport { useClipboard } from '../../hooks';\nimport { Check, Copy } from '../../icons';\nimport { useRouter } from '../../router';\n\nexport const PaymentAttemptPage = () => {\n  const { params, navigate } = useRouter();\n  const subscriberType = useSubscriberTypeContext();\n  const localizationRoot = useSubscriberTypeLocalizationRoot();\n  const { t, translateError } = useLocalizations();\n  const requesterType = subscriberType === 'organization' ? 'organization' : 'user';\n\n  const {\n    data: paymentAttempt,\n    isLoading,\n    error,\n  } = __internal_usePaymentAttemptQuery({\n    paymentAttemptId: params.paymentAttemptId,\n    for: requesterType,\n    enabled: Boolean(params.paymentAttemptId),\n  });\n\n  const subscriptionItem = paymentAttempt?.subscriptionItem;\n\n  if (isLoading) {\n    return (\n      <Box sx={{ display: 'flex', justifyContent: 'center', alignItems: 'center', height: '100%' }}>\n        <Spinner\n          colorScheme='primary'\n          sx={{ margin: 'auto', display: 'block' }}\n          elementDescriptor={descriptors.spinner}\n        />\n      </Box>\n    );\n  }\n\n  return (\n    <>\n      <Header.Root\n        sx={t => ({\n          borderBlockEndWidth: t.borderWidths.$normal,\n          borderBlockEndStyle: t.borderStyles.$solid,\n          borderBlockEndColor: t.colors.$borderAlpha100,\n          marginBlockEnd: t.space.$4,\n          paddingBlockEnd: t.space.$4,\n        })}\n      >\n        <Header.BackLink onClick={() => void navigate('../../', { searchParams: new URLSearchParams('tab=payments') })}>\n          <Header.Title\n            localizationKey={localizationKeys(`${localizationRoot}.billingPage.start.headerTitle__payments`)}\n            textVariant='h2'\n          />\n        </Header.BackLink>\n      </Header.Root>\n      {!paymentAttempt ? (\n        <Box sx={{ display: 'flex', justifyContent: 'center', alignItems: 'center', height: '100%' }}>\n          <Alert\n            variant='danger'\n            colorScheme='danger'\n          >\n            {error\n              ? translateError(error.errors[0])\n              : t(localizationKeys(`${localizationRoot}.billingPage.paymentHistorySection.notFound`))}\n          </Alert>\n        </Box>\n      ) : (\n        <Box\n          elementDescriptor={descriptors.paymentAttemptRoot}\n          as='article'\n          sx={t => ({\n            borderWidth: t.borderWidths.$normal,\n            borderStyle: t.borderStyles.$solid,\n            borderColor: t.colors.$borderAlpha100,\n            borderRadius: t.radii.$lg,\n            overflow: 'clip',\n          })}\n        >\n          <Box\n            elementDescriptor={descriptors.paymentAttemptHeader}\n            as='header'\n            sx={t => ({\n              padding: t.space.$4,\n              background: t.colors.$neutralAlpha25,\n              display: 'flex',\n              justifyContent: 'space-between',\n              alignItems: 'flex-start',\n            })}\n          >\n            <Span elementDescriptor={descriptors.paymentAttemptHeaderTitleContainer}>\n              <Heading\n                elementDescriptor={descriptors.paymentAttemptHeaderTitle}\n                textVariant='h2'\n                localizationKey={formatDate(\n                  paymentAttempt.paidAt || paymentAttempt.failedAt || paymentAttempt.updatedAt,\n                  'long',\n                )}\n              />\n              <Span\n                sx={t => ({\n                  display: 'flex',\n                  alignItems: 'center',\n                  gap: t.space.$0x25,\n                  color: t.colors.$colorMutedForeground,\n                })}\n              >\n                <CopyButton\n                  copyLabel='Copy payment attempt ID'\n                  text={paymentAttempt.id}\n                />\n                <Text\n                  colorScheme='secondary'\n                  variant='subtitle'\n                >\n                  {truncateWithEndVisible(paymentAttempt.id)}\n                </Text>\n              </Span>\n            </Span>\n            <Badge\n              elementDescriptor={descriptors.paymentAttemptHeaderBadge}\n              colorScheme={\n                paymentAttempt.status === 'paid' ? 'success' : paymentAttempt.status === 'failed' ? 'danger' : 'primary'\n              }\n              sx={{ textTransform: 'capitalize' }}\n            >\n              {paymentAttempt.status}\n            </Badge>\n          </Box>\n          <PaymentAttemptBody subscriptionItem={subscriptionItem} />\n          <Box\n            elementDescriptor={descriptors.paymentAttemptFooter}\n            as='footer'\n            sx={t => ({\n              paddingInline: t.space.$4,\n              paddingBlock: t.space.$3,\n              background: t.colors.$neutralAlpha25,\n              borderBlockStartWidth: t.borderWidths.$normal,\n              borderBlockStartStyle: t.borderStyles.$solid,\n              borderBlockStartColor: t.colors.$borderAlpha100,\n              display: 'flex',\n              justifyContent: 'space-between',\n            })}\n          >\n            <Text\n              variant='h3'\n              localizationKey={localizationKeys('billing.totalDue')}\n              elementDescriptor={descriptors.paymentAttemptFooterLabel}\n            />\n            <Span\n              elementDescriptor={descriptors.paymentAttemptFooterValueContainer}\n              sx={t => ({\n                display: 'flex',\n                alignItems: 'center',\n                gap: t.space.$2x5,\n              })}\n            >\n              <Text\n                variant='caption'\n                colorScheme='secondary'\n                elementDescriptor={descriptors.paymentAttemptFooterCurrency}\n                sx={{ textTransform: 'uppercase' }}\n              >\n                {paymentAttempt.amount.currency}\n              </Text>\n              <Text\n                variant='h3'\n                elementDescriptor={descriptors.paymentAttemptFooterValue}\n              >\n                {paymentAttempt.amount.currencySymbol}\n                {paymentAttempt.amount.amountFormatted}\n              </Text>\n            </Span>\n          </Box>\n        </Box>\n      )}\n    </>\n  );\n};\n\nfunction PaymentAttemptBody({ subscriptionItem }: { subscriptionItem: BillingSubscriptionItemResource | undefined }) {\n  if (!subscriptionItem) {\n    return null;\n  }\n\n  const fee =\n    subscriptionItem.planPeriod === 'month'\n      ? // eslint-disable-next-line @typescript-eslint/no-non-null-assertion\n        subscriptionItem.plan.fee!\n      : // eslint-disable-next-line @typescript-eslint/no-non-null-assertion\n        subscriptionItem.plan.annualMonthlyFee!;\n\n  return (\n    <Box\n      elementDescriptor={descriptors.paymentAttemptBody}\n      sx={t => ({\n        padding: t.space.$4,\n      })}\n    >\n      <LineItems.Root>\n        <LineItems.Group>\n          <LineItems.Title title={subscriptionItem.plan.name} />\n          <LineItems.Description\n            prefix={subscriptionItem.planPeriod === 'annual' ? 'x12' : undefined}\n            text={`${fee.currencySymbol}${fee.amountFormatted}`}\n          />\n        </LineItems.Group>\n        <LineItems.Group\n          borderTop\n          variant='tertiary'\n        >\n          <LineItems.Title title={localizationKeys('billing.subtotal')} />\n          <LineItems.Description\n            text={`${subscriptionItem.amount?.currencySymbol}${subscriptionItem.amount?.amountFormatted}`}\n          />\n        </LineItems.Group>\n        {subscriptionItem.credits &&\n          subscriptionItem.credits.proration &&\n          subscriptionItem.credits.proration.amount.amount > 0 && (\n            <LineItems.Group variant='tertiary'>\n              <LineItems.Title title={localizationKeys('billing.prorationCredit')} />\n              <LineItems.Description\n                text={`- ${subscriptionItem.credits.proration.amount.currencySymbol}${subscriptionItem.credits.proration.amount.amountFormatted}`}\n              />\n            </LineItems.Group>\n          )}\n        {subscriptionItem.credits &&\n          subscriptionItem.credits.payer &&\n          subscriptionItem.credits.payer.appliedAmount.amount > 0 && (\n            <LineItems.Group variant='tertiary'>\n              <LineItems.Title title={localizationKeys('billing.accountCredit')} />\n              <LineItems.Description\n                text={`- ${subscriptionItem.credits.payer.appliedAmount.currencySymbol}${subscriptionItem.credits.payer.appliedAmount.amountFormatted}`}\n              />\n            </LineItems.Group>\n          )}\n      </LineItems.Root>\n    </Box>\n  );\n}\n\nfunction CopyButton({ text, copyLabel = 'Copy' }: { text: string; copyLabel?: string }) {\n  const { onCopy, hasCopied } = useClipboard(text);\n\n  return (\n    <Button\n      elementDescriptor={descriptors.paymentAttemptCopyButton}\n      variant='unstyled'\n      onClick={onCopy}\n      sx={t => ({\n        color: 'inherit',\n        width: t.sizes.$4,\n        height: t.sizes.$4,\n        padding: 0,\n        borderRadius: t.radii.$sm,\n        '&:focus-visible': {\n          outline: '2px solid',\n          outlineColor: t.colors.$colorRing,\n        },\n      })}\n      focusRing={false}\n      aria-label={hasCopied ? 'Copied' : copyLabel}\n    >\n      <Icon\n        size='sm'\n        icon={hasCopied ? Check : Copy}\n        aria-hidden\n      />\n    </Button>\n  );\n}\n"],"mappings":"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"}

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

@@ -1 +1 @@
-{"version":3,"file":"PricingTableMatrix.js","names":["React","feePeriodNoticeAnimation: ThemableCssProp","t","highlightBackgroundColor: ThemableCssProp","InformationCircle","Check"],"sources":["../../../src/components/PricingTable/PricingTableMatrix.tsx"],"sourcesContent":["import type { BillingPlanResource, BillingSubscriptionPlanPeriod } from '@clerk/shared/types';\nimport * as React from 'react';\n\nimport { Avatar } from '@/ui/elements/Avatar';\nimport { SegmentedControl } from '@/ui/elements/SegmentedControl';\nimport { colors } from '@/ui/utils/colors';\n\nimport { usePlansContext } from '../../contexts';\nimport {\n  Badge,\n  Box,\n  Button,\n  descriptors,\n  Flex,\n  Heading,\n  Icon,\n  localizationKeys,\n  Span,\n  Text,\n  useAppearance,\n  useLocalizations,\n} from '../../customizables';\nimport { usePrefersReducedMotion } from '../../hooks';\nimport { Check, InformationCircle } from '../../icons';\nimport { common, InternalThemeProvider, mqu, type ThemableCssProp } from '../../styledSystem';\n\ninterface PricingTableMatrixProps {\n  plans: BillingPlanResource[] | undefined;\n  highlightedPlan?: BillingPlanResource['slug'];\n  planPeriod: BillingSubscriptionPlanPeriod;\n  setPlanPeriod: (val: BillingSubscriptionPlanPeriod) => void;\n  onSelect: (plan: BillingPlanResource, event?: React.MouseEvent<HTMLElement>) => void;\n}\n\nexport function PricingTableMatrix({\n  plans = [],\n  planPeriod,\n  setPlanPeriod,\n  onSelect,\n  highlightedPlan,\n}: PricingTableMatrixProps) {\n  const prefersReducedMotion = usePrefersReducedMotion();\n  const { animations: layoutAnimations } = useAppearance().parsedOptions;\n  const isMotionSafe = !prefersReducedMotion && layoutAnimations === true;\n  const pricingTableMatrixId = React.useId();\n  const segmentedControlId = `${pricingTableMatrixId}-segmented-control`;\n\n  const { buttonPropsForPlan } = usePlansContext();\n  const { t } = useLocalizations();\n\n  const feePeriodNoticeAnimation: ThemableCssProp = t => ({\n    transition: isMotionSafe\n      ? `grid-template-rows ${t.transitionDuration.$slower} ${t.transitionTiming.$slowBezier}`\n      : 'none',\n  });\n\n  const highlightBackgroundColor: ThemableCssProp = t => ({\n    background: common.mergedColorsBackground(colors.setAlpha(t.colors.$colorBackground, 1), t.colors.$neutralAlpha25),\n  });\n\n  const gridTemplateColumns = React.useMemo(() => `repeat(${plans.length + 1}, minmax(9.375rem,1fr))`, [plans.length]);\n\n  const renderBillingCycleControls = React.useMemo(() => plans.some(plan => Boolean(plan.annualMonthlyFee)), [plans]);\n\n  const getAllFeatures = React.useMemo(() => {\n    const featuresSet = new Set<string>();\n    plans.forEach(({ features }) => {\n      features.forEach(({ name }) => featuresSet.add(name));\n    });\n    return Array.from(featuresSet);\n  }, [plans]);\n\n  if (!plans.length) {\n    return null;\n  }\n\n  return (\n    <InternalThemeProvider>\n      <Box\n        elementDescriptor={descriptors.pricingTableMatrix}\n        sx={t => ({\n          position: 'relative',\n          minWidth: '100%',\n          display: 'grid',\n          isolation: 'isolate',\n          backgroundColor: t.colors.$colorBackground,\n          [mqu.md]: {\n            overflowX: 'auto',\n          },\n        })}\n      >\n        <Box\n          elementDescriptor={descriptors.pricingTableMatrixTable}\n          role='table'\n        >\n          <Box\n            elementDescriptor={[descriptors.pricingTableMatrixRowGroup, descriptors.pricingTableMatrixRowGroupHeader]}\n            role='rowgroup'\n            sx={t => ({\n              position: 'sticky',\n              top: 0,\n              backgroundColor: t.colors.$colorBackground,\n              borderBottomWidth: t.borderWidths.$normal,\n              borderBottomStyle: t.borderStyles.$solid,\n              borderBottomColor: t.colors.$borderAlpha100,\n              zIndex: 1,\n            })}\n          >\n            <Box\n              elementDescriptor={[descriptors.pricingTableMatrixRow, descriptors.pricingTableMatrixRowHeader]}\n              role='row'\n              sx={{\n                display: 'grid',\n                gridTemplateColumns,\n              }}\n            >\n              <Box\n                elementDescriptor={descriptors.pricingTableMatrixColumnHeader}\n                role='columnheader'\n                sx={t => ({\n                  display: 'flex',\n                  flexDirection: 'column',\n                  alignItems: 'flex-start',\n                  justifyContent: 'flex-end',\n                  rowGap: t.space.$3,\n                  paddingBlockEnd: t.space.$12,\n                  paddingInlineStart: t.space.$3,\n                })}\n              >\n                {renderBillingCycleControls ? (\n                  <>\n                    <Text\n                      id={segmentedControlId}\n                      colorScheme='secondary'\n                      variant='caption'\n                      localizationKey={localizationKeys('billing.pricingTable.billingCycle')}\n                    >\n                      Billing cycle\n                    </Text>\n                    <SegmentedControl.Root\n                      aria-labelledby={segmentedControlId}\n                      value={planPeriod}\n                      onChange={value => setPlanPeriod(value as BillingSubscriptionPlanPeriod)}\n                    >\n                      <SegmentedControl.Button\n                        value='month'\n                        text={localizationKeys('billing.monthly')}\n                      />\n                      <SegmentedControl.Button\n                        value='annual'\n                        text={localizationKeys('billing.annually')}\n                      />\n                    </SegmentedControl.Root>\n                  </>\n                ) : null}\n              </Box>\n              {plans.map(plan => {\n                const highlight = plan.slug === highlightedPlan;\n                const planFee = !plan.annualMonthlyFee\n                  ? plan.fee\n                  : planPeriod === 'annual'\n                    ? plan.annualMonthlyFee\n                    : plan.fee;\n\n                return (\n                  <Box\n                    elementDescriptor={descriptors.pricingTableMatrixColumnHeader}\n                    key={plan.slug}\n                    role='columnheader'\n                    sx={[\n                      t => ({\n                        display: 'flex',\n                        flexDirection: 'column',\n                        alignItems: 'flex-start',\n                        flex: 1,\n                        borderStartStartRadius: t.radii.$xl,\n                        borderStartEndRadius: t.radii.$xl,\n                      }),\n                      highlight && highlightBackgroundColor,\n                    ]}\n                    data-highlighted={highlight}\n                  >\n                    <Box\n                      sx={t => ({\n                        width: '100%',\n                        padding: t.space.$4,\n                      })}\n                    >\n                      {plan.avatarUrl || highlight ? (\n                        <Span\n                          sx={t => ({\n                            width: '100%',\n                            display: 'flex',\n                            alignItems: 'flex-start',\n                            justifyContent: 'space-between',\n                            marginBlockEnd: t.space.$3,\n                          })}\n                        >\n                          {plan.avatarUrl ? (\n                            <Avatar\n                              elementDescriptor={descriptors.pricingTableMatrixAvatar}\n                              size={_ => 40}\n                              title={plan.name}\n                              initials={plan.name[0]}\n                              rounded={false}\n                              imageUrl={plan.avatarUrl}\n                            />\n                          ) : null}\n                          {highlight ? (\n                            <Badge\n                              elementDescriptor={descriptors.pricingTableMatrixBadge}\n                              colorScheme='secondary'\n                              localizationKey={localizationKeys('billing.popular')}\n                            />\n                          ) : null}\n                        </Span>\n                      ) : null}\n                      <Heading\n                        elementDescriptor={descriptors.pricingTableMatrixPlanName}\n                        textVariant='h3'\n                      >\n                        {plan.name}\n                      </Heading>\n                      <Flex\n                        align='center'\n                        wrap='wrap'\n                        sx={t => ({\n                          marginTop: t.space.$2,\n                          columnGap: t.space.$1x5,\n                        })}\n                      >\n                        {plan.hasBaseFee ? (\n                          <>\n                            <Text\n                              elementDescriptor={descriptors.pricingTableMatrixFee}\n                              variant='h2'\n                              colorScheme='body'\n                            >\n                              {planFee.currencySymbol}\n                              {planFee.amountFormatted}\n                            </Text>\n                            <Text\n                              elementDescriptor={descriptors.pricingTableMatrixFeePeriod}\n                              variant='caption'\n                              colorScheme='secondary'\n                              sx={t => ({\n                                textTransform: 'lowercase',\n                                ':before': {\n                                  content: '\"/\"',\n                                  marginInlineEnd: t.space.$1,\n                                },\n                              })}\n                              localizationKey={localizationKeys('billing.month')}\n                            />\n                            {plan.annualMonthlyFee ? (\n                              <Box\n                                elementDescriptor={descriptors.pricingTableMatrixFeePeriodNotice}\n                                sx={[\n                                  _ => ({\n                                    width: '100%',\n                                    display: 'grid',\n                                    gridTemplateRows: planPeriod === 'annual' ? '1fr' : '0fr',\n                                  }),\n                                  feePeriodNoticeAnimation,\n                                ]}\n                                // @ts-ignore - Needed until React 19 support\n                                inert={planPeriod !== 'annual' ? 'true' : undefined}\n                              >\n                                <Box\n                                  elementDescriptor={descriptors.pricingTableMatrixFeePeriodNoticeInner}\n                                  sx={{\n                                    overflow: 'hidden',\n                                    minHeight: 0,\n                                  }}\n                                >\n                                  <Text\n                                    elementDescriptor={descriptors.pricingTableMatrixFeePeriodNoticeLabel}\n                                    variant='caption'\n                                    colorScheme='secondary'\n                                    sx={t => ({\n                                      width: '100%',\n                                      display: 'flex',\n                                      alignItems: 'center',\n                                      columnGap: t.space.$1,\n                                    })}\n                                  >\n                                    <Icon\n                                      icon={InformationCircle}\n                                      colorScheme='neutral'\n                                      size='sm'\n                                      aria-hidden\n                                    />{' '}\n                                    <Span localizationKey={localizationKeys('billing.billedAnnually')} />\n                                  </Text>\n                                </Box>\n                              </Box>\n                            ) : null}\n                          </>\n                        ) : (\n                          <Text\n                            elementDescriptor={descriptors.pricingTableMatrixFee}\n                            variant='h2'\n                            localizationKey={localizationKeys('billing.free')}\n                            colorScheme='body'\n                          />\n                        )}\n                      </Flex>\n                    </Box>\n                    {!plan.isDefault ? (\n                      <Box\n                        sx={t => ({\n                          width: '100%',\n                          marginBlockStart: 'auto',\n                          marginBlockEnd: t.space.$8,\n                          paddingBlockStart: t.space.$2,\n                          paddingBlockEnd: t.space.$4,\n                          paddingInline: t.space.$4,\n                        })}\n                      >\n                        <Button\n                          block\n                          textVariant='buttonSmall'\n                          size='xs'\n                          onClick={event => {\n                            onSelect(plan, event);\n                          }}\n                          {...buttonPropsForPlan({ plan, selectedPlanPeriod: planPeriod })}\n                          colorScheme={highlight ? 'primary' : 'secondary'}\n                        />\n                      </Box>\n                    ) : null}\n                  </Box>\n                );\n              })}\n            </Box>\n          </Box>\n          <Box\n            elementDescriptor={[descriptors.pricingTableMatrixRowGroup, descriptors.pricingTableMatrixRowGroupBody]}\n            role='rowgroup'\n          >\n            {getAllFeatures.map(feature => {\n              return (\n                <Box\n                  elementDescriptor={[descriptors.pricingTableMatrixRow, descriptors.pricingTableMatrixRowBody]}\n                  key={feature}\n                  role='row'\n                  sx={t => ({\n                    position: 'relative',\n                    display: 'grid',\n                    gridTemplateColumns,\n                    borderBottomWidth: t.borderWidths.$normal,\n                    borderBottomStyle: t.borderStyles.$solid,\n                    borderBottomColor: t.colors.$borderAlpha100,\n                    ':after': {\n                      content: '\"\"',\n                      position: 'absolute',\n                      inset: 0,\n                      pointerEvents: 'none',\n                      backgroundColor: t.colors.$neutralAlpha25,\n                      opacity: 0,\n                    },\n                    ':hover:after': {\n                      opacity: 1,\n                    },\n                  })}\n                >\n                  <Box\n                    elementDescriptor={descriptors.pricingTableMatrixCell}\n                    role='cell'\n                    sx={t => ({\n                      padding: t.space.$3,\n                    })}\n                  >\n                    <Text colorScheme='body'>{feature}</Text>\n                  </Box>\n                  {plans.map(plan => {\n                    const highlight = plan.slug === highlightedPlan;\n                    const hasFeature = plan.features.some(f => f.name === feature);\n                    return (\n                      <Box\n                        elementDescriptor={descriptors.pricingTableMatrixCell}\n                        key={plan.slug}\n                        role='cell'\n                        sx={[\n                          t => ({\n                            display: 'grid',\n                            placeContent: 'center',\n                            padding: t.space.$3,\n                          }),\n                          highlight && highlightBackgroundColor,\n                        ]}\n                        data-highlighted={highlight}\n                        data-checked={hasFeature}\n                      >\n                        {hasFeature && (\n                          <Icon\n                            icon={Check}\n                            colorScheme='neutral'\n                            size='sm'\n                            aria-label={t(localizationKeys('billing.pricingTable.included'))}\n                          />\n                        )}\n                      </Box>\n                    );\n                  })}\n                </Box>\n              );\n            })}\n            <Box\n              elementDescriptor={descriptors.pricingTableMatrixFooter}\n              sx={{\n                display: 'grid',\n                gridTemplateColumns,\n              }}\n            >\n              <Box elementDescriptor={[descriptors.pricingTableMatrixCell, descriptors.pricingTableMatrixCellFooter]} />\n              {plans.map(plan => {\n                const highlight = plan.slug === highlightedPlan;\n                return (\n                  <Box\n                    elementDescriptor={[descriptors.pricingTableMatrixCell, descriptors.pricingTableMatrixCellFooter]}\n                    key={plan.slug}\n                    sx={[\n                      t => ({\n                        height: t.space.$10,\n                        borderEndStartRadius: t.radii.$xl,\n                        borderEndEndRadius: t.radii.$xl,\n                      }),\n                      highlight && highlightBackgroundColor,\n                    ]}\n                    data-highlighted={highlight}\n                  />\n                );\n              })}\n            </Box>\n          </Box>\n        </Box>\n      </Box>\n    </InternalThemeProvider>\n  );\n}\n"],"mappings":"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"}
+{"version":3,"file":"PricingTableMatrix.js","names":["React","feePeriodNoticeAnimation: ThemableCssProp","t","highlightBackgroundColor: ThemableCssProp","InformationCircle","Check"],"sources":["../../../src/components/PricingTable/PricingTableMatrix.tsx"],"sourcesContent":["import type { BillingPlanResource, BillingSubscriptionPlanPeriod } from '@clerk/shared/types';\nimport * as React from 'react';\n\nimport { Avatar } from '@/ui/elements/Avatar';\nimport { SegmentedControl } from '@/ui/elements/SegmentedControl';\nimport { colors } from '@/ui/utils/colors';\n\nimport { usePlansContext } from '../../contexts';\nimport {\n  Badge,\n  Box,\n  Button,\n  descriptors,\n  Flex,\n  Heading,\n  Icon,\n  localizationKeys,\n  Span,\n  Text,\n  useAppearance,\n  useLocalizations,\n} from '../../customizables';\nimport { usePrefersReducedMotion } from '../../hooks';\nimport { Check, InformationCircle } from '../../icons';\nimport { common, InternalThemeProvider, mqu, type ThemableCssProp } from '../../styledSystem';\n\ninterface PricingTableMatrixProps {\n  plans: BillingPlanResource[] | undefined;\n  highlightedPlan?: BillingPlanResource['slug'];\n  planPeriod: BillingSubscriptionPlanPeriod;\n  setPlanPeriod: (val: BillingSubscriptionPlanPeriod) => void;\n  onSelect: (plan: BillingPlanResource, event?: React.MouseEvent<HTMLElement>) => void;\n}\n\nexport function PricingTableMatrix({\n  plans = [],\n  planPeriod,\n  setPlanPeriod,\n  onSelect,\n  highlightedPlan,\n}: PricingTableMatrixProps) {\n  const prefersReducedMotion = usePrefersReducedMotion();\n  const { animations: layoutAnimations } = useAppearance().parsedOptions;\n  const isMotionSafe = !prefersReducedMotion && layoutAnimations === true;\n  const pricingTableMatrixId = React.useId();\n  const segmentedControlId = `${pricingTableMatrixId}-segmented-control`;\n\n  const { buttonPropsForPlan } = usePlansContext();\n  const { t } = useLocalizations();\n\n  const feePeriodNoticeAnimation: ThemableCssProp = t => ({\n    transition: isMotionSafe\n      ? `grid-template-rows ${t.transitionDuration.$slower} ${t.transitionTiming.$slowBezier}`\n      : 'none',\n  });\n\n  const highlightBackgroundColor: ThemableCssProp = t => ({\n    background: common.mergedColorsBackground(colors.setAlpha(t.colors.$colorBackground, 1), t.colors.$neutralAlpha25),\n  });\n\n  const gridTemplateColumns = React.useMemo(() => `repeat(${plans.length + 1}, minmax(9.375rem,1fr))`, [plans.length]);\n\n  const renderBillingCycleControls = React.useMemo(() => plans.some(plan => Boolean(plan.annualMonthlyFee)), [plans]);\n\n  const getAllFeatures = React.useMemo(() => {\n    const featuresSet = new Set<string>();\n    plans.forEach(({ features }) => {\n      features.forEach(({ name }) => featuresSet.add(name));\n    });\n    return Array.from(featuresSet);\n  }, [plans]);\n\n  if (!plans.length) {\n    return null;\n  }\n\n  return (\n    <InternalThemeProvider>\n      <Box\n        elementDescriptor={descriptors.pricingTableMatrix}\n        sx={t => ({\n          position: 'relative',\n          minWidth: '100%',\n          display: 'grid',\n          isolation: 'isolate',\n          backgroundColor: t.colors.$colorBackground,\n          [mqu.md]: {\n            overflowX: 'auto',\n          },\n        })}\n      >\n        <Box\n          elementDescriptor={descriptors.pricingTableMatrixTable}\n          role='table'\n        >\n          <Box\n            elementDescriptor={[descriptors.pricingTableMatrixRowGroup, descriptors.pricingTableMatrixRowGroupHeader]}\n            role='rowgroup'\n            sx={t => ({\n              position: 'sticky',\n              top: 0,\n              backgroundColor: t.colors.$colorBackground,\n              borderBottomWidth: t.borderWidths.$normal,\n              borderBottomStyle: t.borderStyles.$solid,\n              borderBottomColor: t.colors.$borderAlpha100,\n              zIndex: 1,\n            })}\n          >\n            <Box\n              elementDescriptor={[descriptors.pricingTableMatrixRow, descriptors.pricingTableMatrixRowHeader]}\n              role='row'\n              sx={{\n                display: 'grid',\n                gridTemplateColumns,\n              }}\n            >\n              <Box\n                elementDescriptor={descriptors.pricingTableMatrixColumnHeader}\n                role='columnheader'\n                sx={t => ({\n                  display: 'flex',\n                  flexDirection: 'column',\n                  alignItems: 'flex-start',\n                  justifyContent: 'flex-end',\n                  rowGap: t.space.$3,\n                  paddingBlockEnd: t.space.$12,\n                  paddingInlineStart: t.space.$3,\n                })}\n              >\n                {renderBillingCycleControls ? (\n                  <>\n                    <Text\n                      id={segmentedControlId}\n                      colorScheme='secondary'\n                      variant='caption'\n                      localizationKey={localizationKeys('billing.pricingTable.billingCycle')}\n                    >\n                      Billing cycle\n                    </Text>\n                    <SegmentedControl.Root\n                      aria-labelledby={segmentedControlId}\n                      value={planPeriod}\n                      onChange={value => setPlanPeriod(value as BillingSubscriptionPlanPeriod)}\n                    >\n                      <SegmentedControl.Button\n                        value='month'\n                        text={localizationKeys('billing.monthly')}\n                      />\n                      <SegmentedControl.Button\n                        value='annual'\n                        text={localizationKeys('billing.annually')}\n                      />\n                    </SegmentedControl.Root>\n                  </>\n                ) : null}\n              </Box>\n              {plans.map(plan => {\n                const highlight = plan.slug === highlightedPlan;\n                const planFee = !plan.annualMonthlyFee\n                  ? // eslint-disable-next-line @typescript-eslint/no-non-null-assertion\n                    plan.fee!\n                  : planPeriod === 'annual'\n                    ? plan.annualMonthlyFee\n                    : // eslint-disable-next-line @typescript-eslint/no-non-null-assertion\n                      plan.fee!;\n\n                return (\n                  <Box\n                    elementDescriptor={descriptors.pricingTableMatrixColumnHeader}\n                    key={plan.slug}\n                    role='columnheader'\n                    sx={[\n                      t => ({\n                        display: 'flex',\n                        flexDirection: 'column',\n                        alignItems: 'flex-start',\n                        flex: 1,\n                        borderStartStartRadius: t.radii.$xl,\n                        borderStartEndRadius: t.radii.$xl,\n                      }),\n                      highlight && highlightBackgroundColor,\n                    ]}\n                    data-highlighted={highlight}\n                  >\n                    <Box\n                      sx={t => ({\n                        width: '100%',\n                        padding: t.space.$4,\n                      })}\n                    >\n                      {plan.avatarUrl || highlight ? (\n                        <Span\n                          sx={t => ({\n                            width: '100%',\n                            display: 'flex',\n                            alignItems: 'flex-start',\n                            justifyContent: 'space-between',\n                            marginBlockEnd: t.space.$3,\n                          })}\n                        >\n                          {plan.avatarUrl ? (\n                            <Avatar\n                              elementDescriptor={descriptors.pricingTableMatrixAvatar}\n                              size={_ => 40}\n                              title={plan.name}\n                              initials={plan.name[0]}\n                              rounded={false}\n                              imageUrl={plan.avatarUrl}\n                            />\n                          ) : null}\n                          {highlight ? (\n                            <Badge\n                              elementDescriptor={descriptors.pricingTableMatrixBadge}\n                              colorScheme='secondary'\n                              localizationKey={localizationKeys('billing.popular')}\n                            />\n                          ) : null}\n                        </Span>\n                      ) : null}\n                      <Heading\n                        elementDescriptor={descriptors.pricingTableMatrixPlanName}\n                        textVariant='h3'\n                      >\n                        {plan.name}\n                      </Heading>\n                      <Flex\n                        align='center'\n                        wrap='wrap'\n                        sx={t => ({\n                          marginTop: t.space.$2,\n                          columnGap: t.space.$1x5,\n                        })}\n                      >\n                        {plan.hasBaseFee ? (\n                          <>\n                            <Text\n                              elementDescriptor={descriptors.pricingTableMatrixFee}\n                              variant='h2'\n                              colorScheme='body'\n                            >\n                              {planFee.currencySymbol}\n                              {planFee.amountFormatted}\n                            </Text>\n                            <Text\n                              elementDescriptor={descriptors.pricingTableMatrixFeePeriod}\n                              variant='caption'\n                              colorScheme='secondary'\n                              sx={t => ({\n                                textTransform: 'lowercase',\n                                ':before': {\n                                  content: '\"/\"',\n                                  marginInlineEnd: t.space.$1,\n                                },\n                              })}\n                              localizationKey={localizationKeys('billing.month')}\n                            />\n                            {plan.annualMonthlyFee ? (\n                              <Box\n                                elementDescriptor={descriptors.pricingTableMatrixFeePeriodNotice}\n                                sx={[\n                                  _ => ({\n                                    width: '100%',\n                                    display: 'grid',\n                                    gridTemplateRows: planPeriod === 'annual' ? '1fr' : '0fr',\n                                  }),\n                                  feePeriodNoticeAnimation,\n                                ]}\n                                // @ts-ignore - Needed until React 19 support\n                                inert={planPeriod !== 'annual' ? 'true' : undefined}\n                              >\n                                <Box\n                                  elementDescriptor={descriptors.pricingTableMatrixFeePeriodNoticeInner}\n                                  sx={{\n                                    overflow: 'hidden',\n                                    minHeight: 0,\n                                  }}\n                                >\n                                  <Text\n                                    elementDescriptor={descriptors.pricingTableMatrixFeePeriodNoticeLabel}\n                                    variant='caption'\n                                    colorScheme='secondary'\n                                    sx={t => ({\n                                      width: '100%',\n                                      display: 'flex',\n                                      alignItems: 'center',\n                                      columnGap: t.space.$1,\n                                    })}\n                                  >\n                                    <Icon\n                                      icon={InformationCircle}\n                                      colorScheme='neutral'\n                                      size='sm'\n                                      aria-hidden\n                                    />{' '}\n                                    <Span localizationKey={localizationKeys('billing.billedAnnually')} />\n                                  </Text>\n                                </Box>\n                              </Box>\n                            ) : null}\n                          </>\n                        ) : (\n                          <Text\n                            elementDescriptor={descriptors.pricingTableMatrixFee}\n                            variant='h2'\n                            localizationKey={localizationKeys('billing.free')}\n                            colorScheme='body'\n                          />\n                        )}\n                      </Flex>\n                    </Box>\n                    {!plan.isDefault ? (\n                      <Box\n                        sx={t => ({\n                          width: '100%',\n                          marginBlockStart: 'auto',\n                          marginBlockEnd: t.space.$8,\n                          paddingBlockStart: t.space.$2,\n                          paddingBlockEnd: t.space.$4,\n                          paddingInline: t.space.$4,\n                        })}\n                      >\n                        <Button\n                          block\n                          textVariant='buttonSmall'\n                          size='xs'\n                          onClick={event => {\n                            onSelect(plan, event);\n                          }}\n                          {...buttonPropsForPlan({ plan, selectedPlanPeriod: planPeriod })}\n                          colorScheme={highlight ? 'primary' : 'secondary'}\n                        />\n                      </Box>\n                    ) : null}\n                  </Box>\n                );\n              })}\n            </Box>\n          </Box>\n          <Box\n            elementDescriptor={[descriptors.pricingTableMatrixRowGroup, descriptors.pricingTableMatrixRowGroupBody]}\n            role='rowgroup'\n          >\n            {getAllFeatures.map(feature => {\n              return (\n                <Box\n                  elementDescriptor={[descriptors.pricingTableMatrixRow, descriptors.pricingTableMatrixRowBody]}\n                  key={feature}\n                  role='row'\n                  sx={t => ({\n                    position: 'relative',\n                    display: 'grid',\n                    gridTemplateColumns,\n                    borderBottomWidth: t.borderWidths.$normal,\n                    borderBottomStyle: t.borderStyles.$solid,\n                    borderBottomColor: t.colors.$borderAlpha100,\n                    ':after': {\n                      content: '\"\"',\n                      position: 'absolute',\n                      inset: 0,\n                      pointerEvents: 'none',\n                      backgroundColor: t.colors.$neutralAlpha25,\n                      opacity: 0,\n                    },\n                    ':hover:after': {\n                      opacity: 1,\n                    },\n                  })}\n                >\n                  <Box\n                    elementDescriptor={descriptors.pricingTableMatrixCell}\n                    role='cell'\n                    sx={t => ({\n                      padding: t.space.$3,\n                    })}\n                  >\n                    <Text colorScheme='body'>{feature}</Text>\n                  </Box>\n                  {plans.map(plan => {\n                    const highlight = plan.slug === highlightedPlan;\n                    const hasFeature = plan.features.some(f => f.name === feature);\n                    return (\n                      <Box\n                        elementDescriptor={descriptors.pricingTableMatrixCell}\n                        key={plan.slug}\n                        role='cell'\n                        sx={[\n                          t => ({\n                            display: 'grid',\n                            placeContent: 'center',\n                            padding: t.space.$3,\n                          }),\n                          highlight && highlightBackgroundColor,\n                        ]}\n                        data-highlighted={highlight}\n                        data-checked={hasFeature}\n                      >\n                        {hasFeature && (\n                          <Icon\n                            icon={Check}\n                            colorScheme='neutral'\n                            size='sm'\n                            aria-label={t(localizationKeys('billing.pricingTable.included'))}\n                          />\n                        )}\n                      </Box>\n                    );\n                  })}\n                </Box>\n              );\n            })}\n            <Box\n              elementDescriptor={descriptors.pricingTableMatrixFooter}\n              sx={{\n                display: 'grid',\n                gridTemplateColumns,\n              }}\n            >\n              <Box elementDescriptor={[descriptors.pricingTableMatrixCell, descriptors.pricingTableMatrixCellFooter]} />\n              {plans.map(plan => {\n                const highlight = plan.slug === highlightedPlan;\n                return (\n                  <Box\n                    elementDescriptor={[descriptors.pricingTableMatrixCell, descriptors.pricingTableMatrixCellFooter]}\n                    key={plan.slug}\n                    sx={[\n                      t => ({\n                        height: t.space.$10,\n                        borderEndStartRadius: t.radii.$xl,\n                        borderEndEndRadius: t.radii.$xl,\n                      }),\n                      highlight && highlightBackgroundColor,\n                    ]}\n                    data-highlighted={highlight}\n                  />\n                );\n              })}\n            </Box>\n          </Box>\n        </Box>\n      </Box>\n    </InternalThemeProvider>\n  );\n}\n"],"mappings":"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"}