npm - @clerk/ui - Versions diffs - 1.0.0-snapshot.v20251211120550 → 1.0.0-snapshot.v20251215210631 - Mend

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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (221) hide show

package/dist/Components.js.map CHANGED Viewed

	@@ -1 +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 } 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';\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 nodes: Map<HTMLDivElement, HtmlNodeOptions>;\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: async (opts?: { preloadHint: ClerkComponentName }) => {\n const { preloadHint } = opts \|\| {};\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 if (preloadHint) {\n void preloadComponent(preloadHint);\n }\n componentsControlsResolver = import('./lazyModules/common').then(({ createRoot }) => {\n createRoot(clerkRoot).render(\n <Components\n getClerk={getClerk}\n getEnvironment={getEnvironment}\n options={options}\n onComponentsMounted={deferredPromise.resolve}\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 nodes: new Map(),\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 nodes,\n } = state;\n\n const { urlStateParam, clearUrlStateParam, decodedRedirectParams } = useClerkModalStateParams();\n\n useSafeLayoutEffect(() => {\n if (decodedRedirectParams) {\n setState(s => ({\n ...s,\n [componentNodes[decodedRedirectParams.componentName]]: true,\n }));\n }\n\n componentsControls.mountComponent = params => {\n const { node, name, props, appearanceKey } = params;\n assertDOMElement(node);\n setState(s => {\n s.nodes.set(node, { key: `p${++portalCt}`, name, props, appearanceKey });\n return { ...s, nodes };\n });\n };\n\n componentsControls.unmountComponent = params => {\n const { node } = params;\n setState(s => {\n s.nodes.delete(node);\n return { ...s, nodes };\n });\n };\n\n componentsControls.updateProps = ({ node, props, ...restProps }) => {\n if (node && props && typeof props === 'object') {\n const nodeOptions = state.nodes.get(node);\n if (nodeOptions) {\n nodeOptions.props = { ...props };\n setState(s => ({ ...s }));\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 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 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 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 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 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 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 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 {[...nodes].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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"}
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 } 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';\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 nodes: Map<HTMLDivElement, HtmlNodeOptions>;\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: async (opts?: { preloadHint: ClerkComponentName }) => {\n const { preloadHint } = opts \|\| {};\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 if (preloadHint) {\n void preloadComponent(preloadHint);\n }\n componentsControlsResolver = import('./lazyModules/common').then(({ createRoot }) => {\n createRoot(clerkRoot).render(\n <Components\n getClerk={getClerk}\n getEnvironment={getEnvironment}\n options={options}\n onComponentsMounted={deferredPromise.resolve}\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 nodes: new Map(),\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 nodes,\n } = state;\n\n const { urlStateParam, clearUrlStateParam, decodedRedirectParams } = useClerkModalStateParams();\n\n useSafeLayoutEffect(() => {\n if (decodedRedirectParams) {\n setState(s => ({\n ...s,\n [componentNodes[decodedRedirectParams.componentName]]: true,\n }));\n }\n\n componentsControls.mountComponent = params => {\n const { node, name, props, appearanceKey } = params;\n assertDOMElement(node);\n setState(s => {\n s.nodes.set(node, { key: `p${++portalCt}`, name, props, appearanceKey });\n return { ...s, nodes };\n });\n };\n\n componentsControls.unmountComponent = params => {\n const { node } = params;\n setState(s => {\n s.nodes.delete(node);\n return { ...s, nodes };\n });\n };\n\n componentsControls.updateProps = ({ node, props, ...restProps }) => {\n if (node && props && typeof props === 'object') {\n const nodeOptions = state.nodes.get(node);\n if (nodeOptions) {\n nodeOptions.props = { ...props };\n setState(s => ({ ...s }));\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 {[...nodes].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":";;;;;;;;;;;;;;;;AA8DA,MAAM,sBAAsB,OAAO,WAAW,cAAc,MAAM,kBAAkB,MAAM;AAE1F,MAAa,kBAAkB;AA4H/B,IAAI,WAAW;AAEf,SAAS,iBAAiB,SAAuC;AAC/D,KAAI,CAAC,QACH,iCAAgC;;AAIpC,MAAa,0BACX,UACA,gBACA,UACA,kBACG;CACH,MAAM,UAAU,EAAE,GAAG,UAAU;AAE/B,KAAI,QAAQ,WACV,SAAQ,aAAa,kCAAkC,QAAQ,WAAW;CAK5E,IAAI,YAAY,SAAS,eAAe,gBAAgB;AAExD,KAAI,CAAC,WAAW;AACd,cAAY,SAAS,cAAc,MAAM;AACzC,YAAU,aAAa,MAAM,mBAAmB;AAChD,WAAS,KAAK,YAAY,UAAU;;CAGtC,IAAIA;AAEJ,QAAO,EACL,eAAe,OAAO,SAA+C;EACnE,MAAM,EAAE,gBAAgB,QAAQ,EAAE;AAKlC,MAAI,CAAC,4BAA4B;GAC/B,MAAM,kBAAkB,uBAAuB;AAC/C,OAAI,YACF,CAAK,iBAAiB,YAAY;AAEpC,gCAA6B,OAAO,2BAAwB,MAAM,EAAE,iBAAiB;AACnF,eAAW,UAAU,CAAC,OACpB,oBAAC;KACW;KACM;KACP;KACT,qBAAqB,gBAAgB;KACtB;MACf,CACH;AACD,WAAO,gBAAgB,QAAQ,WAAW,mBAAmB;KAC7D;;AAEJ,SAAO,2BAA2B,MAAK,aAAY,SAAS;IAE/D;;AAKH,MAAM,qBAAqB,EAAE;AAE7B,MAAM,iBAAiB,OAAO,OAAO;CACnC,QAAQ;CACR,QAAQ;CACR,aAAa;CACb,qBAAqB;CACrB,oBAAoB;CACpB,UAAU;CACX,CAAC;AAEF,MAAM,cAAc,UAA2B;CAC7C,MAAM,CAAC,OAAO,YAAY,MAAM,SAA0B;EACxD,YAAY,MAAM,QAAQ;EAC1B,SAAS,MAAM;EACf,mBAAmB;EACnB,aAAa;EACb,aAAa;EACb,kBAAkB;EAClB,uBAAuB;EACvB,0BAA0B;EAC1B,yBAAyB;EACzB,gCAAgC;EAChC,8BAA8B;EAC9B,eAAe;EACf,mBAAmB;EACnB,gBAAgB;GACd,MAAM;GACN,OAAO;GACR;EACD,mBAAmB;GACjB,MAAM;GACN,OAAO;GACR;EACD,2BAA2B;GACzB,MAAM;GACN,OAAO;GACR;EACD,uBAAO,IAAI,KAAK;EAChB,kBAAkB;EACnB,CAAC;CAEF,MAAM,EACJ,mBACA,aACA,aACA,kBACA,uBACA,0BACA,yBACA,eACA,mBACA,gBACA,mBACA,2BACA,UACE;CAEJ,MAAM,EAAE,eAAe,oBAAoB,0BAA0B,0BAA0B;AAE/F,2BAA0B;AACxB,MAAI,sBACF,WAAS,OAAM;GACb,GAAG;IACF,eAAe,sBAAsB,iBAAiB;GACxD,EAAE;AAGL,qBAAmB,kBAAiB,WAAU;GAC5C,MAAM,EAAE,MAAM,MAAM,gBAAO,kBAAkB;AAC7C,oBAAiB,KAAK;AACtB,aAAS,MAAK;AACZ,MAAE,MAAM,IAAI,MAAM;KAAE,KAAK,IAAI,EAAE;KAAY;KAAM;KAAO;KAAe,CAAC;AACxE,WAAO;KAAE,GAAG;KAAG;KAAO;KACtB;;AAGJ,qBAAmB,oBAAmB,WAAU;GAC9C,MAAM,EAAE,SAAS;AACjB,aAAS,MAAK;AACZ,MAAE,MAAM,OAAO,KAAK;AACpB,WAAO;KAAE,GAAG;KAAG;KAAO;KACtB;;AAGJ,qBAAmB,eAAe,EAAE,MAAM,eAAO,GAAG,gBAAgB;AAClE,OAAI,QAAQC,WAAS,OAAOA,YAAU,UAAU;IAC9C,MAAM,cAAc,MAAM,MAAM,IAAI,KAAK;AACzC,QAAI,aAAa;AACf,iBAAY,QAAQ,EAAE,GAAGA,SAAO;AAChC,eAAS,OAAM,EAAE,GAAG,GAAG,EAAE;AACzB;;;AAIJ,aAAS,OAAM;IAAE,GAAG;IAAG,GAAG;IAAW,SAAS;KAAE,GAAG,EAAE;KAAS,GAAG,UAAU;KAAS;IAAE,EAAE;;AAG1F,qBAAmB,cAAc,MAAM,UAAU,EAAE,KAAK;GACtD,MAAM,EAAE,SAAS,SAAS;AAC1B,uBAAoB;AACpB,aAAS,MAAK;IACZ,SAAS,kDAAkD;KACzD,MAAM,QAAQ,EAAE,GAAG,KAAK;AACxB,SAAI,SAAS,OAAO,UAAU,YAAY,gCAAgC,SAAS,OAEjF,CAAC,MAAsD,8BAA8B;;;;;;AAQzF,qDAAiD;AAEjD,WAAO;KAAE,GAAG;MAAI,GAAG,KAAK,SAAS;KAAM;KACvC;;AAGJ,qBAAmB,aAAa,MAAM,YAAU;AAG9C,OAAI,SAAS,6BAA6B;AACxC,cAAS,SAAQ;AAEf,SAAI,KAAK,+BACP,QAAO;AAGT,YAAO;MAAE,GAAG;OAAO,GAAG,KAAK,SAASA;MAAO;MAC3C;AACF;;GAGF,SAAS,kDAAkD;AACzD,QAAI,EAAE,gCAAgCA,SACpC;AAGF,cAAS,OAAM;KACb,GAAG;MACF,GAAG,KAAK,SAAS;MAChB,GAAGA;MAIH,oBAAoB;AAClB,eAAM,qBAAqB;AAC3B,0BAAmB,WAAW,MAAM,EAAE,QAAQ,OAAO,CAAC;;MAEzD;KACF,EAAE;;AAGL,OAAI,gCAAgCA,QAClC,kDAAiD;OAEjD,WAAS,OAAM;IAAE,GAAG;KAAI,GAAG,KAAK,SAASA;IAAO,EAAE;;AAItD,qBAAmB,8BAA8B;AAC/C,aAAS,OAAM;IAAE,GAAG;IAAG,kBAAkB;IAAM,EAAE;;AAGnD,qBAAmB,cAAc,MAAM,YAAU;AAC/C,aAAS,OAAM;IACb,GAAG;KACF,GAAG,KAAK,UAAU;KACjB,MAAM;KACN;KACD;IACF,EAAE;;AAGL,qBAAmB,eAAc,SAAQ;AACvC,aAAS,MAAK;AAGZ,IAFoB,EAAE,GAAG,KAAK,UAEjB,OAAO,WAAW;AAC/B,WAAO;KACL,GAAG;MACF,GAAG,KAAK,UAAU;MACjB,GAAG,EAAE,GAAG,KAAK;MACb,MAAM;MACP;KACF;KACD;;AAGJ,qBAAmB,YAAW,cAAa;AACzC,aAAS,OAAM;IAAE,GAAG;KAAI,GAAG,UAAU,YAAY;IAAM,EAAE;;AAG3D,QAAM,qBAAqB;IAC1B,EAAE,CAAC;CAEN,MAAM,qBACJ,oBAAC;EACC,gBAAgB;EAChB,kBAAkB,MAAM;EACxB,qBAAqB,mBAAmB;EACxC,WAAW,sBAAsB;GAAE,MAAM;GAAY,MAAM;GAAI,CAAC;GAChE;CAGJ,MAAM,qBACJ,qBAAC;EACC,kBAAkB,MAAM;EACxB,eAAe;EACf,qBAAqB,aAAa;EAClC,UAAU;EACV,eAAe,mBAAmB,WAAW,SAAS;EACtD,0BAA0B,mBAAmB,WAAW,SAAS;EACjE,WAAW,sBAAsB;GAAE,MAAM;GAAY,MAAM,eAAe;GAAM,CAAC;EACjF,cAAc,aAAa;EAC3B,eAAe;;GAEf,oBAAC,eAAY,GAAI,cAAe;GAChC,oBAAC,eAAY,GAAI,4BAA4B,aAAa,SAAS,GAAI;GACvE,oBAAC,iBAAc,GAAI,gBAAiB;;GAClB;CAGtB,MAAM,qBACJ,qBAAC;EACC,kBAAkB,MAAM;EACxB,eAAe;EACf,qBAAqB,aAAa;EAClC,UAAU;EACV,eAAe,mBAAmB,WAAW,SAAS;EACtD,0BAA0B,mBAAmB,WAAW,SAAS;EACjE,WAAW,sBAAsB;GAAE,MAAM;GAAY,MAAM,eAAe;GAAM,CAAC;EACjF,cAAc,aAAa;EAC3B,eAAe;;GAEf,oBAAC,eAAY,GAAI,4BAA4B,aAAa,SAAS,GAAI;GACvE,oBAAC,eAAY,GAAI,cAAe;GAChC,oBAAC,iBAAc,GAAI,gBAAiB;;GAClB;CAGtB,MAAM,0BACJ,oBAAC;EACC,kBAAkB,MAAM;EACxB,eAAe;EACf,qBAAqB,kBAAkB;EACvC,UAAU;EACV,eAAe,mBAAmB,WAAW,cAAc;EAC3D,0BAA0B,mBAAmB,WAAW,cAAc;EACtE,WAAW,sBAAsB;GAC/B,MAAM;GACN,MAAM,kBAAkB,4BAA4B,eAAe;GACpE,CAAC;EACF,cAAc,kBAAkB;EAChC,eAAe;EACf,kBAAkB,EAAE,YAAY,UAAU;EAC1C,iBAAgB,OAAM;GAAE,QAAQ,OAAO,EAAE,MAAM,KAAK,gBAAgB,EAAE,MAAM,IAAI;GAAK,QAAQ;GAAG;YAEhG,oBAAC,oBAAiB,GAAI,mBAAoB;GACxB;CAGtB,MAAM,+BACJ,oBAAC;EACC,kBAAkB,MAAM;EACxB,eAAe;EACf,qBAAqB,uBAAuB;EAC5C,UAAU;EACV,eAAe,mBAAmB,WAAW,mBAAmB;EAChE,0BAA0B,mBAAmB,WAAW,mBAAmB;EAC3E,WAAW,sBAAsB;GAAE,MAAM;GAAsB,MAAM,eAAe;GAAM,CAAC;EAC3F,cAAc,uBAAuB;EACrC,eAAe;EACf,kBAAkB,EAAE,YAAY,UAAU;YAE1C,oBAAC,yBAAsB,GAAI,wBAAyB;GAClC;CAGtB,MAAM,kCACJ,oBAAC;EACC,kBAAkB,MAAM;EACxB,eAAe;EACf,qBAAqB,0BAA0B;EAC/C,UAAU;EACV,eAAe,mBAAmB,WAAW,sBAAsB;EACnE,0BAA0B,mBAAmB,WAAW,sBAAsB;EAC9E,WAAW,sBAAsB;GAC/B,MAAM;GACN,MAAM,0BAA0B,4BAA4B,eAAe;GAC5E,CAAC;EACF,cAAc,0BAA0B;EACxC,eAAe;EACf,kBAAkB,EAAE,YAAY,UAAU;EAC1C,iBAAgB,OAAM;GAAE,QAAQ,OAAO,EAAE,MAAM,KAAK,gBAAgB,EAAE,MAAM,IAAI;GAAK,QAAQ;GAAG;YAEhG,oBAAC,4BAAyB,GAAI,2BAA4B;GACxC;CAGtB,MAAM,iCACJ,oBAAC;EACC,kBAAkB,MAAM;EACxB,eAAe;EACf,qBAAqB,yBAAyB;EAC9C,UAAU;EACV,eAAe,mBAAmB,WAAW,qBAAqB;EAClE,0BAA0B,mBAAmB,WAAW,qBAAqB;EAC7E,WAAW,sBAAsB;GAAE,MAAM;GAAuB,MAAM,eAAe;GAAM,CAAC;EAC5F,cAAc,yBAAyB;EACvC,eAAe;EACf,kBAAkB,EAAE,YAAY,UAAU;EAC1C,iBAAgB,OAAM;GAAE,QAAQ,OAAO,EAAE,MAAM,KAAK,gBAAgB,EAAE,MAAM,IAAI;GAAK,QAAQ;GAAG;YAEhG,oBAAC,2BAAwB,GAAI,0BAA2B;GACtC;CAGtB,MAAM,uBACJ,qBAAC;EACC,kBAAkB,MAAM;EACxB,eAAe;EACf,qBAAqB,eAAe;EACpC,UAAU;EACV,eAAe,mBAAmB,WAAW,WAAW;EACxD,0BAA0B,mBAAmB,WAAW,WAAW;EACnE,WAAW,sBAAsB;GAAE,MAAM;GAAa,MAAM,eAAe;GAAM,CAAC;EAClF,cAAc,eAAe;EAC7B,eAAe;aAEf,oBAAC,iBAAc,GAAI,gBAAiB,EACpC,oBAAC,eAAY,GAAI,gBAAiB;GAChB;CAGtB,MAAM,2BAIJ,oBAAC;EACC,kBAAkB,MAAM;EACxB,eAAe;EACf,qBAAqB,EAAE;EACvB,UAAU;EACV,eAAe,mBAAmB,WAAW,eAAe;EAC5D,WAAW,sBAAsB;GAAE,MAAM;GAAkB,MAAM,eAAe;GAAM,CAAC;EACvF,eAAe;EACf,eAAe;EACf,SAAS;EACT,YAAY;GAAE,YAAY;GAAU,eAAe;GAAQ;YAE3D,oBAAC,sBAAoB;GACH;AAGtB,QACE,oBAAC;EAAS,UAAU;YAClB,qBAAC;GACC,OAAO,MAAM,UAAU;GACvB,aAAa,MAAM,gBAAgB;GACnC,SAAS,MAAM;GACf,eAAe,MAAM;;IAEpB,CAAC,GAAG,MAAM,CAAC,KAAK,CAAC,MAAM,eAAe;AACrC,YACE,oBAAC;MAEO;MACN,kBAAkB,MAAM;MACxB,eAAe,UAAU;MACzB,qBAAqB,UAAU,OAAO;MACtC,eAAe,UAAU;MACzB,gBAAgB,UAAU;QANrB,UAAU,IAOf;MAEJ;IAED,qBAAqB;IACrB,eAAe;IACf,eAAe;IACf,oBAAoB;IACpB,yBAAyB;IACzB,4BAA4B;IAC5B,2BAA2B;IAC3B,iBAAiB;IACjB,qBAAqB;IAEtB,oBAAC;KACC,YAAY,MAAM;KACF;KAChB,oBAAoB,mBAAmB,YAAY,WAAW;MAC9D;IAEF,oBAAC;KACC,YAAY,MAAM;KACC;KACnB,oBAAoB,mBAAmB,YAAY,cAAc;MACjE;IAEF,oBAAC;KACC,YAAY,MAAM;KACS;KAC3B,oBAAoB,mBAAmB,YAAY,sBAAsB;MACzE;IAED,MAAM,oBACL,oBAAC;KAA6B,kBAAkB,MAAM;eACpD,oBAAC,qBAAmB;MACS;IAGhC,MAAM,kCACL,oBAAC;KAAsC,kBAAkB,MAAM;eAC7D,oBAAC,6BAA0B,GAAI,MAAM,iCAAkC;MACjC;IAGzC,MAAM,SAAS,iDACd,MAAM,SAAS,0CACb,oBAAC;KAA6B,kBAAkB,MAAM;eACpD,oBAAC;MACC,UAAU,MAAM,QAAQ;MACxB,aAAa,MAAM,QAAQ;MAC3B,WAAW,MAAM,QAAQ;OACzB;MAC2B;IAGnC,oBAAC,sBAAU,MAAM,gCAAgC,oBAAC,iCAA+B,GAAY;;IAC/E;GACP"}

package/dist/{apiKeys_ui_a492c4_1.0.0-snapshot.v20251211120550.js → apiKeys_ui_01c6bf_1.0.0-snapshot.v20251215210631.js} RENAMED Viewed

	@@ -1 +1 @@
1	- "use strict";(globalThis.webpackChunk_clerk_ui=globalThis.webpackChunk_clerk_ui\|\|[]).push([["326"],{4875:function(e,t,i){i.r(t),i.d(t,{APIKeys:()=>N,APIKeysPage:()=>M});var a=i(4518),r=i(3610),n=i(6739),o=i(~~5543~~),l=i(5074),s=i(7477),d=i(8188),c=i(3264),p=i(78),u=i(8272),m=i(8920),h=i(2861),y=i(4607),_=i(3453),x=i(3269),f=i(5013),g=i(8819),K=i(4317),D=i(4439),Y=i(7591),v=i(8080),F=i(7198);let b=({rows:e,isLoading:t,onRevoke:i,elementDescriptor:r,canManageAPIKeys:n})=>(0,a.Y)(u.so,{sx:e=>({width:"100%",[Y.g.sm]:{overflowX:"auto",padding:e.space.$0x25}}),children:(0,a.FD)(u.XI,{sx:e=>({background:e.colors.$colorBackground}),elementDescriptor:r,children:[(0,a.Y)(u.d8,{children:(0,a.FD)(u.Tr,{children:[(0,a.Y)(u.Th,{children:"Name"}),(0,a.Y)(u.Th,{children:"Last used"}),n&&(0,a.Y)(u.Th,{children:"Actions"})]})}),(0,a.Y)(u.NN,{children:t?(0,a.Y)(u.Tr,{children:(0,a.Y)(u.Td,{colSpan:3,children:(0,a.Y)(u.y$,{colorScheme:"primary",sx:{margin:"auto",display:"block"},elementDescriptor:m.$z.spinner})})}):e.length?e.map(e=>(0,a.FD)(u.Tr,{children:[(0,a.Y)(u.Td,{children:(0,a.FD)(u.so,{direction:"col",sx:{minWidth:"25ch"},children:[(0,a.Y)(u.EY,{variant:"subtitle",truncate:!0,children:e.name}),(0,a.Y)(u.EY,{variant:"caption",colorScheme:"secondary",localizationKey:e.expiration?(0,h.G)("apiKeys.createdAndExpirationStatus__expiresOn",{createdDate:e.createdAt,expiresDate:e.expiration}):(0,h.G)("apiKeys.createdAndExpirationStatus__never",{createdDate:e.createdAt})})]})}),(0,a.Y)(u.Td,{children:(0,a.Y)(u.az,{sx:{minWidth:"10ch"},children:(0,a.Y)(u.EY,{localizationKey:e.lastUsedAt?(0,F.f)(e.lastUsedAt):"-"})})}),n&&(0,a.Y)(u.Td,{children:(0,a.Y)(v.o,{actions:[{label:(0,h.G)("apiKeys.menuAction__revoke"),isDestructive:!0,onClick:()=>i(e.id,e.name)}]})})]},e.id)):(0,a.Y)(C,{})})]})}),C=()=>(0,a.Y)(u.Tr,{children:(0,a.Y)(u.Td,{colSpan:4,children:(0,a.Y)(u.EY,{localizationKey:(0,h.G)("apiKeys.detailsTitle__emptyRow"),sx:{margin:"auto",display:"block",width:"fit-content"}})})});var $=i(2513),w=i(2454),I=i(1475),z=i(3549),S=i(1586),T=i(8023),k=i(8640);let E=["never","1d","7d","30d","60d","90d","180d","1y"],A={"1d":e=>e.setDate(e.getDate()+1),"7d":e=>e.setDate(e.getDate()+7),"30d":e=>e.setDate(e.getDate()+30),"60d":e=>e.setDate(e.getDate()+60),"90d":e=>e.setDate(e.getDate()+90),"180d":e=>e.setDate(e.getDate()+180),"1y":e=>e.setFullYear(e.getFullYear()+1)},G=e=>{if("never"===e\|\|!e)return;let t=new Date,i=new Date(t);return A[e](i),Math.floor((i.getTime()-t.getTime())/1e3)},P=({selectedExpiration:e,setSelectedExpiration:t})=>{let i=(0,l.useRef)(null),{t:r}=(0,p._)(),n=E.map(e=>({value:e,label:r((0,h.G)((e=>{switch(e){case"never":return"apiKeys.formFieldOption__expiration__never";case"1d":return"apiKeys.formFieldOption__expiration__1d";case"7d":return"apiKeys.formFieldOption__expiration__7d";case"30d":return"apiKeys.formFieldOption__expiration__30d";case"60d":return"apiKeys.formFieldOption__expiration__60d";case"90d":return"apiKeys.formFieldOption__expiration__90d";case"180d":return"apiKeys.formFieldOption__expiration__180d";case"1y":return"apiKeys.formFieldOption__expiration__1y"}})(e)))}));return(0,a.FD)(S.l6,{elementId:"apiKeyExpiration",options:n,value:e?.value??"",onChange:t,placeholder:r((0,h.G)("formFieldInputPlaceholder__apiKeyExpirationDate")),referenceElement:i,children:[(0,a.Y)(S.JC,{ref:i,icon:T.A,sx:e=>({justifyContent:"space-between",backgroundColor:e.colors.$colorBackground}),"aria-labelledby":"expiration-field",id:"expiration-field"}),(0,a.Y)(S.UL,{sx:e=>({paddingBlock:e.space.$1,color:e.colors.$colorForeground})})]})},R=({onCreate:e})=>{let[t,i]=(0,l.useState)(null),{close:r}=(0,$.D5)(),{showDescription:n=!1}=(0,d.l)(),o=(0,x.f0)(),{t:s}=(0,p._)(),c=(0,k.tJ)("name","",{type:"text",label:(0,h.G)("formFieldLabel__apiKeyName"),placeholder:(0,h.G)("formFieldInputPlaceholder__apiKeyName"),isRequired:!0}),y=(0,k.tJ)("apiKeyDescription","",{type:"text",label:(0,h.G)("formFieldLabel__apiKeyDescription"),placeholder:(0,h.G)("formFieldInputPlaceholder__apiKeyDescription"),isRequired:!1}),_=c.value.length>2,f=(0,l.useMemo)(()=>{let e=G(t?.value);if(!t?.value\|\|!e)return s((0,h.G)("apiKeys.formFieldCaption__expiration__never"));let i=new Date(Date.now()+1e3e);return s((0,h.G)("apiKeys.formFieldCaption__expiration__expiresOn",{date:i.toLocaleString(void 0,{year:"numeric",month:"long",day:"2-digit",hour:"numeric",minute:"2-digit",second:"2-digit",hour12:!0,timeZoneName:"short"})}))},[t?.value]);return(0,a.Y)(z.M,{headerTitle:(0,h.G)("apiKeys.formTitle"),headerSubtitle:(0,h.G)("apiKeys.formHint"),elementDescriptor:m.$z.apiKeysCreateForm,children:(0,a.FD)(w.l.Root,{onSubmit:i=>{i.preventDefault(),e({name:c.value,description:y.value\|\|void 0,secondsUntilExpiration:G(t?.value)})},children:[(0,a.FD)(u.az,{sx:e=>({gap:e.space.$4,display:"flex",flexDirection:"row",[Y.g.sm]:{flexDirection:"column"}}),children:[(0,a.Y)(w.l.ControlRow,{sx:{flex:1},elementId:c.id,elementDescriptor:m.$z.apiKeysCreateFormNameInput,children:(0,a.Y)(w.l.PlainInput,{...c.props})}),(0,a.FD)(u.fv,{sx:{flex:1,width:"100%"},gap:2,elementDescriptor:m.$z.apiKeysCreateFormExpirationInput,children:[(0,a.FD)(u.lR,{sx:{display:"flex",alignItems:"center",justifyContent:"space-between",flexDirection:"row"},htmlFor:"expiration-field",children:[(0,a.Y)(u.EY,{as:"span",variant:"subtitle",localizationKey:(0,h.G)("formFieldLabel__apiKeyExpiration")}),(0,a.Y)(u.EY,{variant:"caption",colorScheme:"secondary",localizationKey:(0,h.G)("formFieldHintText__optional")})]}),(0,a.Y)(P,{selectedExpiration:t,setSelectedExpiration:i}),(0,a.Y)(u.EY,{variant:"caption",colorScheme:"secondary",localizationKey:f,elementDescriptor:m.$z.apiKeysCreateFormExpirationCaption})]})]}),n&&(0,a.Y)(u.fv,{sx:e=>({borderTopWidth:e.borderWidths.$normal,borderTopStyle:e.borderStyles.$solid,borderTopColor:e.colors.$borderAlpha100,paddingTop:e.space.$4,paddingBottom:e.space.$4}),children:(0,a.Y)(w.l.ControlRow,{elementId:y.id,elementDescriptor:m.$z.apiKeysCreateFormDescriptionInput,children:(0,a.Y)(w.l.PlainInput,{...y.props})})}),(0,a.Y)(I.G,{submitLabel:(0,h.G)("apiKeys.formButtonPrimary__add"),isDisabled:!_,onReset:r,isLoading:o.isLoading,elementDescriptor:m.$z.apiKeysCreateFormSubmitButton})]})})},O=(0,l.lazy)(()=>i.e("505").then(i.bind(i,8195)).then(e=>({default:e.RevokeAPIKeyConfirmationModal}))),L=(0,l.lazy)(()=>Promise.all([i.e("545"),i.e("666"),i.e("394")]).then(i.bind(i,8169)).then(e=>({default:e.CopyAPIKeyModal}))),M=({subject:e,perPage:t,revokeModalRoot:i})=>{let d=(0,n.n)(e),c=(0,s.Fd)({permission:"org:sys_api_keys:read"}),y=(0,s.Fd)({permission:"org:sys_api_keys:manage"}),[v,F]=(0,l.useState)(""),C=(0,K.d)(v,500).trim(),{data:$,isLoading:w,isFetching:I,page:z,fetchPage:S,pageCount:T,count:k,revalidate:E}=(0,o.hZ)({subject:e,pageSize:t??10,query:C,keepPreviousData:!0,enabled:!d\|\|c});(({query:e,page:t,pageCount:i,isFetching:a,fetchPage:r})=>{let n=(0,l.useRef)(e);(0,l.useEffect)(()=>{n.current!==e&&(n.current=e,r(1))},[e,r]),(0,l.useEffect)(()=>{!a&&i>0&&t>i&&r(Math.max(1,i))},[i,t,a,r])})({query:C,page:z,pageCount:T,isFetching:I,fetchPage:S});let A=k>0?Math.max(0,(z-1)(t??10))+1:0,G=Math.min(z*(t??10),k),P=(0,x.f0)(),M=(0,o.ho)(),[N,B]=(0,l.useState)(null),{t:W}=(0,p._)(),[j,J]=(0,l.useState)(!1),[U,H]=(0,l.useState)(""),[q,X]=(0,l.useState)(""),[Z,Q]=(0,l.useState)(!1),V=async t=>{try{P.setLoading();let i=await M.apiKeys.create({...t,subject:e});E(),P.setError(void 0),Q(!0),B(i)}catch(e){(0,r.$R)(e)&&409===e.status&&P.setError("API Key name already exists")}finally{P.setIdle()}};return(0,a.FD)(u.fv,{gap:4,sx:{width:"100%"},elementDescriptor:m.$z.apiKeys,children:[(0,a.FD)(_.r.Root,{children:[(0,a.FD)(u.so,{justify:"between",align:"center",gap:4,sx:{[Y.g.sm]:{flexDirection:"column",alignItems:"stretch"}},elementDescriptor:m.$z.apiKeysHeader,children:[(0,a.Y)(u.az,{elementDescriptor:m.$z.apiKeysSearchBox,children:(0,a.Y)(f.e,{placeholder:W((0,h.G)("apiKeys.action__search")),leftIcon:(0,a.Y)(u.In,{icon:D.A,sx:e=>({color:e.colors.$colorMutedForeground})}),value:v,type:"search",autoCapitalize:"none",spellCheck:!1,onChange:e=>F(e.target.value),elementDescriptor:m.$z.apiKeysSearchInput})}),(d&&y\|\|!d)&&(0,a.Y)(_.r.Trigger,{value:"add-api-key",hideOnActive:!1,children:(0,a.Y)(u.$n,{variant:"solid",localizationKey:(0,h.G)("apiKeys.action__add"),elementDescriptor:m.$z.apiKeysAddButton})})]}),(0,a.Y)(_.r.Open,{value:"add-api-key",children:(0,a.Y)(u.so,{sx:e=>({paddingTop:e.space.$6,paddingBottom:e.space.$6}),children:(0,a.Y)(_.r.Card,{sx:{width:"100%"},children:(0,a.Y)(R,{onCreate:V})})})}),(0,a.Y)(L,{isOpen:Z,onOpen:()=>Q(!0),onClose:()=>Q(!1),apiKeyName:N?.name\|\|"",apiKeySecret:N?.secret\|\|"",modalRoot:i})]}),(0,a.Y)(b,{rows:$,isLoading:w,onRevoke:(e,t)=>{H(e),X(t),J(!0)},elementDescriptor:m.$z.apiKeysTable,canManageAPIKeys:d&&y\|\|!d}),T>1&&(0,a.Y)(g.d,{count:T,page:Math.min(z,T),onChange:e=>{S(e)},siblingCount:1,rowInfo:{allRowsCount:k,startingRow:A,endingRow:G}}),(0,a.Y)(O,{isOpen:j,onOpen:()=>J(!0),onClose:()=>{H(""),X(""),J(!1)},apiKeyID:U,apiKeyName:q,onRevokeSuccess:E,modalRoot:i})]})},N=(0,c.G)((0,x.dm)(()=>{let e=(0,d.l)(),{user:t}=(0,o.Jd)(),i=(0,o.Wf)(),r=i?.organization?.id??t?.id??"";return(0,a.Y)(y.n.Root,{flow:"apiKeys",sx:{width:"100%"},children:(0,a.Y)(M,{subject:r,perPage:e.perPage})})}))},8188:function(e,t,i){i.d(t,{l:()=>n,w:()=>r});var a=i(5074);let r=(0,a.createContext)(null),n=()=>{let e=(0,a.useContext)(r);if(!e\|\|"APIKeys"!==e.componentName)throw Error("Clerk: useAPIKeysContext called outside APIKeys.");let{componentName:t,...i}=e;return{...i,componentName:t}}}}]);
1	+ "use strict";(globalThis.webpackChunk_clerk_ui=globalThis.webpackChunk_clerk_ui\|\|[]).push([["326"],{4875:function(e,t,i){i.r(t),i.d(t,{APIKeys:()=>N,APIKeysPage:()=>M});var a=i(4518),r=i(3610),n=i(6739),o=i(9361),l=i(5074),s=i(7477),d=i(8188),c=i(3264),p=i(78),u=i(8272),m=i(8920),h=i(2861),y=i(4607),_=i(3453),x=i(3269),f=i(5013),g=i(8819),K=i(4317),D=i(4439),Y=i(7591),v=i(8080),F=i(7198);let b=({rows:e,isLoading:t,onRevoke:i,elementDescriptor:r,canManageAPIKeys:n})=>(0,a.Y)(u.so,{sx:e=>({width:"100%",[Y.g.sm]:{overflowX:"auto",padding:e.space.$0x25}}),children:(0,a.FD)(u.XI,{sx:e=>({background:e.colors.$colorBackground}),elementDescriptor:r,children:[(0,a.Y)(u.d8,{children:(0,a.FD)(u.Tr,{children:[(0,a.Y)(u.Th,{children:"Name"}),(0,a.Y)(u.Th,{children:"Last used"}),n&&(0,a.Y)(u.Th,{children:"Actions"})]})}),(0,a.Y)(u.NN,{children:t?(0,a.Y)(u.Tr,{children:(0,a.Y)(u.Td,{colSpan:3,children:(0,a.Y)(u.y$,{colorScheme:"primary",sx:{margin:"auto",display:"block"},elementDescriptor:m.$z.spinner})})}):e.length?e.map(e=>(0,a.FD)(u.Tr,{children:[(0,a.Y)(u.Td,{children:(0,a.FD)(u.so,{direction:"col",sx:{minWidth:"25ch"},children:[(0,a.Y)(u.EY,{variant:"subtitle",truncate:!0,children:e.name}),(0,a.Y)(u.EY,{variant:"caption",colorScheme:"secondary",localizationKey:e.expiration?(0,h.G)("apiKeys.createdAndExpirationStatus__expiresOn",{createdDate:e.createdAt,expiresDate:e.expiration}):(0,h.G)("apiKeys.createdAndExpirationStatus__never",{createdDate:e.createdAt})})]})}),(0,a.Y)(u.Td,{children:(0,a.Y)(u.az,{sx:{minWidth:"10ch"},children:(0,a.Y)(u.EY,{localizationKey:e.lastUsedAt?(0,F.f)(e.lastUsedAt):"-"})})}),n&&(0,a.Y)(u.Td,{children:(0,a.Y)(v.o,{actions:[{label:(0,h.G)("apiKeys.menuAction__revoke"),isDestructive:!0,onClick:()=>i(e.id,e.name)}]})})]},e.id)):(0,a.Y)(C,{})})]})}),C=()=>(0,a.Y)(u.Tr,{children:(0,a.Y)(u.Td,{colSpan:4,children:(0,a.Y)(u.EY,{localizationKey:(0,h.G)("apiKeys.detailsTitle__emptyRow"),sx:{margin:"auto",display:"block",width:"fit-content"}})})});var $=i(2513),w=i(2454),I=i(1475),z=i(3549),S=i(1586),T=i(8023),k=i(8640);let E=["never","1d","7d","30d","60d","90d","180d","1y"],A={"1d":e=>e.setDate(e.getDate()+1),"7d":e=>e.setDate(e.getDate()+7),"30d":e=>e.setDate(e.getDate()+30),"60d":e=>e.setDate(e.getDate()+60),"90d":e=>e.setDate(e.getDate()+90),"180d":e=>e.setDate(e.getDate()+180),"1y":e=>e.setFullYear(e.getFullYear()+1)},G=e=>{if("never"===e\|\|!e)return;let t=new Date,i=new Date(t);return A[e](i),Math.floor((i.getTime()-t.getTime())/1e3)},P=({selectedExpiration:e,setSelectedExpiration:t})=>{let i=(0,l.useRef)(null),{t:r}=(0,p._)(),n=E.map(e=>({value:e,label:r((0,h.G)((e=>{switch(e){case"never":return"apiKeys.formFieldOption__expiration__never";case"1d":return"apiKeys.formFieldOption__expiration__1d";case"7d":return"apiKeys.formFieldOption__expiration__7d";case"30d":return"apiKeys.formFieldOption__expiration__30d";case"60d":return"apiKeys.formFieldOption__expiration__60d";case"90d":return"apiKeys.formFieldOption__expiration__90d";case"180d":return"apiKeys.formFieldOption__expiration__180d";case"1y":return"apiKeys.formFieldOption__expiration__1y"}})(e)))}));return(0,a.FD)(S.l6,{elementId:"apiKeyExpiration",options:n,value:e?.value??"",onChange:t,placeholder:r((0,h.G)("formFieldInputPlaceholder__apiKeyExpirationDate")),referenceElement:i,children:[(0,a.Y)(S.JC,{ref:i,icon:T.A,sx:e=>({justifyContent:"space-between",backgroundColor:e.colors.$colorBackground}),"aria-labelledby":"expiration-field",id:"expiration-field"}),(0,a.Y)(S.UL,{sx:e=>({paddingBlock:e.space.$1,color:e.colors.$colorForeground})})]})},R=({onCreate:e})=>{let[t,i]=(0,l.useState)(null),{close:r}=(0,$.D5)(),{showDescription:n=!1}=(0,d.l)(),o=(0,x.f0)(),{t:s}=(0,p._)(),c=(0,k.tJ)("name","",{type:"text",label:(0,h.G)("formFieldLabel__apiKeyName"),placeholder:(0,h.G)("formFieldInputPlaceholder__apiKeyName"),isRequired:!0}),y=(0,k.tJ)("apiKeyDescription","",{type:"text",label:(0,h.G)("formFieldLabel__apiKeyDescription"),placeholder:(0,h.G)("formFieldInputPlaceholder__apiKeyDescription"),isRequired:!1}),_=c.value.length>2,f=(0,l.useMemo)(()=>{let e=G(t?.value);if(!t?.value\|\|!e)return s((0,h.G)("apiKeys.formFieldCaption__expiration__never"));let i=new Date(Date.now()+1e3e);return s((0,h.G)("apiKeys.formFieldCaption__expiration__expiresOn",{date:i.toLocaleString(void 0,{year:"numeric",month:"long",day:"2-digit",hour:"numeric",minute:"2-digit",second:"2-digit",hour12:!0,timeZoneName:"short"})}))},[t?.value]);return(0,a.Y)(z.M,{headerTitle:(0,h.G)("apiKeys.formTitle"),headerSubtitle:(0,h.G)("apiKeys.formHint"),elementDescriptor:m.$z.apiKeysCreateForm,children:(0,a.FD)(w.l.Root,{onSubmit:i=>{i.preventDefault(),e({name:c.value,description:y.value\|\|void 0,secondsUntilExpiration:G(t?.value)})},children:[(0,a.FD)(u.az,{sx:e=>({gap:e.space.$4,display:"flex",flexDirection:"row",[Y.g.sm]:{flexDirection:"column"}}),children:[(0,a.Y)(w.l.ControlRow,{sx:{flex:1},elementId:c.id,elementDescriptor:m.$z.apiKeysCreateFormNameInput,children:(0,a.Y)(w.l.PlainInput,{...c.props})}),(0,a.FD)(u.fv,{sx:{flex:1,width:"100%"},gap:2,elementDescriptor:m.$z.apiKeysCreateFormExpirationInput,children:[(0,a.FD)(u.lR,{sx:{display:"flex",alignItems:"center",justifyContent:"space-between",flexDirection:"row"},htmlFor:"expiration-field",children:[(0,a.Y)(u.EY,{as:"span",variant:"subtitle",localizationKey:(0,h.G)("formFieldLabel__apiKeyExpiration")}),(0,a.Y)(u.EY,{variant:"caption",colorScheme:"secondary",localizationKey:(0,h.G)("formFieldHintText__optional")})]}),(0,a.Y)(P,{selectedExpiration:t,setSelectedExpiration:i}),(0,a.Y)(u.EY,{variant:"caption",colorScheme:"secondary",localizationKey:f,elementDescriptor:m.$z.apiKeysCreateFormExpirationCaption})]})]}),n&&(0,a.Y)(u.fv,{sx:e=>({borderTopWidth:e.borderWidths.$normal,borderTopStyle:e.borderStyles.$solid,borderTopColor:e.colors.$borderAlpha100,paddingTop:e.space.$4,paddingBottom:e.space.$4}),children:(0,a.Y)(w.l.ControlRow,{elementId:y.id,elementDescriptor:m.$z.apiKeysCreateFormDescriptionInput,children:(0,a.Y)(w.l.PlainInput,{...y.props})})}),(0,a.Y)(I.G,{submitLabel:(0,h.G)("apiKeys.formButtonPrimary__add"),isDisabled:!_,onReset:r,isLoading:o.isLoading,elementDescriptor:m.$z.apiKeysCreateFormSubmitButton})]})})},O=(0,l.lazy)(()=>i.e("505").then(i.bind(i,8195)).then(e=>({default:e.RevokeAPIKeyConfirmationModal}))),L=(0,l.lazy)(()=>Promise.all([i.e("545"),i.e("666"),i.e("394")]).then(i.bind(i,8169)).then(e=>({default:e.CopyAPIKeyModal}))),M=({subject:e,perPage:t,revokeModalRoot:i})=>{let d=(0,n.n)(e),c=(0,s.Fd)({permission:"org:sys_api_keys:read"}),y=(0,s.Fd)({permission:"org:sys_api_keys:manage"}),[v,F]=(0,l.useState)(""),C=(0,K.d)(v,500).trim(),{data:$,isLoading:w,isFetching:I,page:z,fetchPage:S,pageCount:T,count:k,revalidate:E}=(0,o.hZ)({subject:e,pageSize:t??10,query:C,keepPreviousData:!0,enabled:!d\|\|c});(({query:e,page:t,pageCount:i,isFetching:a,fetchPage:r})=>{let n=(0,l.useRef)(e);(0,l.useEffect)(()=>{n.current!==e&&(n.current=e,r(1))},[e,r]),(0,l.useEffect)(()=>{!a&&i>0&&t>i&&r(Math.max(1,i))},[i,t,a,r])})({query:C,page:z,pageCount:T,isFetching:I,fetchPage:S});let A=k>0?Math.max(0,(z-1)(t??10))+1:0,G=Math.min(z*(t??10),k),P=(0,x.f0)(),M=(0,o.ho)(),[N,B]=(0,l.useState)(null),{t:W}=(0,p._)(),[j,J]=(0,l.useState)(!1),[U,H]=(0,l.useState)(""),[q,X]=(0,l.useState)(""),[Z,Q]=(0,l.useState)(!1),V=async t=>{try{P.setLoading();let i=await M.apiKeys.create({...t,subject:e});E(),P.setError(void 0),Q(!0),B(i)}catch(e){(0,r.$R)(e)&&409===e.status&&P.setError("API Key name already exists")}finally{P.setIdle()}};return(0,a.FD)(u.fv,{gap:4,sx:{width:"100%"},elementDescriptor:m.$z.apiKeys,children:[(0,a.FD)(_.r.Root,{children:[(0,a.FD)(u.so,{justify:"between",align:"center",gap:4,sx:{[Y.g.sm]:{flexDirection:"column",alignItems:"stretch"}},elementDescriptor:m.$z.apiKeysHeader,children:[(0,a.Y)(u.az,{elementDescriptor:m.$z.apiKeysSearchBox,children:(0,a.Y)(f.e,{placeholder:W((0,h.G)("apiKeys.action__search")),leftIcon:(0,a.Y)(u.In,{icon:D.A,sx:e=>({color:e.colors.$colorMutedForeground})}),value:v,type:"search",autoCapitalize:"none",spellCheck:!1,onChange:e=>F(e.target.value),elementDescriptor:m.$z.apiKeysSearchInput})}),(d&&y\|\|!d)&&(0,a.Y)(_.r.Trigger,{value:"add-api-key",hideOnActive:!1,children:(0,a.Y)(u.$n,{variant:"solid",localizationKey:(0,h.G)("apiKeys.action__add"),elementDescriptor:m.$z.apiKeysAddButton})})]}),(0,a.Y)(_.r.Open,{value:"add-api-key",children:(0,a.Y)(u.so,{sx:e=>({paddingTop:e.space.$6,paddingBottom:e.space.$6}),children:(0,a.Y)(_.r.Card,{sx:{width:"100%"},children:(0,a.Y)(R,{onCreate:V})})})}),(0,a.Y)(L,{isOpen:Z,onOpen:()=>Q(!0),onClose:()=>Q(!1),apiKeyName:N?.name\|\|"",apiKeySecret:N?.secret\|\|"",modalRoot:i})]}),(0,a.Y)(b,{rows:$,isLoading:w,onRevoke:(e,t)=>{H(e),X(t),J(!0)},elementDescriptor:m.$z.apiKeysTable,canManageAPIKeys:d&&y\|\|!d}),T>1&&(0,a.Y)(g.d,{count:T,page:Math.min(z,T),onChange:e=>{S(e)},siblingCount:1,rowInfo:{allRowsCount:k,startingRow:A,endingRow:G}}),(0,a.Y)(O,{isOpen:j,onOpen:()=>J(!0),onClose:()=>{H(""),X(""),J(!1)},apiKeyID:U,apiKeyName:q,onRevokeSuccess:E,modalRoot:i})]})},N=(0,c.G)((0,x.dm)(()=>{let e=(0,d.l)(),{user:t}=(0,o.Jd)(),i=(0,o.Wf)(),r=i?.organization?.id??t?.id??"";return(0,a.Y)(y.n.Root,{flow:"apiKeys",sx:{width:"100%"},children:(0,a.Y)(M,{subject:r,perPage:e.perPage})})}))},8188:function(e,t,i){i.d(t,{l:()=>n,w:()=>r});var a=i(5074);let r=(0,a.createContext)(null),n=()=>{let e=(0,a.useContext)(r);if(!e\|\|"APIKeys"!==e.componentName)throw Error("Clerk: useAPIKeysContext called outside APIKeys.");let{componentName:t,...i}=e;return{...i,componentName:t}}}}]);

package/dist/{checkout_ui_a492c4_1.0.0-snapshot.v20251211120550.js → checkout_ui_01c6bf_1.0.0-snapshot.v20251215210631.js} RENAMED Viewed

@@ -1,4 +1,4 @@
-"use strict";(globalThis.webpackChunk_clerk_ui=globalThis.webpackChunk_clerk_ui||[]).push([["256"],{2677:function(e,t,r){r.r(t),r.d(t,{Checkout:()=>ec});var i=r(4518),o=r(8532),n=r(6256),a=r(4173),l=r(5543),c=r(5074),s=r(2366);let d=(0,c.createContext)(null),u=()=>{let e=(0,c.useContext)(d),t=(0,l.ho)(),r=(0,s.II)();if(!e||"Checkout"!==e.componentName)throw Error("Clerk: useCheckoutContext called outside Checkout.");let i=(0,c.useMemo)(()=>{if(e.portalRoot)return;let i=e.newSubscriptionRedirectUrl||t.buildNewSubscriptionRedirectUrl?.();return(0,a.vU)(r?.allowedRedirectOrigins,window.location.origin)(i)?i:void 0},[e.portalRoot,e.newSubscriptionRedirectUrl,t,r?.allowedRedirectOrigins]),{componentName:o,...n}=e;return{...n,componentName:o,newSubscriptionRedirectUrl:i}};var p=r(4607),h=r(2861),m=r(8272),g=r(9436),y=r(137),f=r(8920),$=r(6580),b=r(4091),Y=r(359),D=r(4964);let x=e=>e[0].toUpperCase()+e.slice(1),w=(e,t,r)=>e+(t-e)*r,k=({positionX:e,positionY:t})=>{let r=(0,c.useRef)(null),[o,n]=(0,c.useState)({x:256,y:256}),a="undefined"==typeof window||window.matchMedia("(hover: hover) and (pointer: fine)").matches;(0,c.useEffect)(()=>{if(!a)return;let i=()=>{n(r=>({x:w(r.x,e,.15),y:w(r.y,t,.15)})),r.current=requestAnimationFrame(i)};return r.current=requestAnimationFrame(i),()=>{r.current&&cancelAnimationFrame(r.current)}},[e,t,a]);let l=(0,c.useId)(),s=(0,c.useId)(),d=(0,c.useId)();return(0,i.FD)(m.az,{elementDescriptor:f.$z.checkoutSuccessRings,as:"svg",viewBox:"0 0 512 512",sx:{position:"absolute",inset:0,pointerEvents:"none"},"aria-hidden":!0,children:[(0,i.FD)("defs",{children:[(0,i.FD)("radialGradient",{id:"clerk-checkout-success-gradient",children:[(0,i.Y)("stop",{offset:"0%",style:{stopColor:"var(--ring-highlight)"}}),(0,i.Y)("stop",{offset:"100%",stopOpacity:"0",style:{stopColor:"var(--ring-highlight)"}})]}),(0,i.Y)("filter",{id:"clerk-checkout-success-blur-effect",children:(0,i.Y)("feGaussianBlur",{stdDeviation:"10"})}),[{r:225,maskStart:10,maskEnd:90,id:l},{r:162.5,maskStart:15,maskEnd:85,id:s},{r:100,maskStart:20,maskEnd:80,id:d}].map(({maskStart:e,maskEnd:t,id:r})=>(0,i.FD)("linearGradient",{id:`gradient-${r}`,x1:"0%",y1:"0%",x2:"0%",y2:"100%",children:[(0,i.Y)("stop",{offset:`${e+5}%`,stopColor:"white",stopOpacity:"0"}),(0,i.Y)("stop",{offset:`${e+35}%`,stopColor:"white",stopOpacity:"1"}),(0,i.Y)("stop",{offset:`${t-35}%`,stopColor:"white",stopOpacity:"1"}),(0,i.Y)("stop",{offset:`${t-5}%`,stopColor:"white",stopOpacity:"0"})]},r)),(0,i.Y)("mask",{id:"clerk-checkout-success-mask",children:[{r:225,id:l},{r:162.5,id:s},{r:100,id:d}].map(({r:e,id:t})=>(0,i.Y)("circle",{cx:"256",cy:"256",r:e,stroke:`url(#gradient-${t})`,fill:"none",strokeWidth:"1"},t))})]}),(0,i.FD)("g",{mask:"url(#clerk-checkout-success-mask)",children:[(0,i.Y)("rect",{width:"512",height:"512",style:{fill:"var(--ring-fill)"}}),a&&(0,i.Y)("rect",{id:"movingGradientHighlight",width:"256",height:"256",x:o.x-128,y:o.y-128,fill:"url(#clerk-checkout-success-gradient)",filter:"url(#clerk-checkout-success-blur-effect)"})]})]})},v=()=>{let e=(0,D.r)(),{setIsOpen:t}=(0,o.g)(),{newSubscriptionRedirectUrl:r}=u(),{checkout:n}=(0,l.v$)(),{totals:a,paymentMethod:s,planPeriodStart:d,freeTrialEndsAt:p}=n,[w,v]=(0,c.useState)({x:256,y:256}),F=(0,Y.j)(),{animations:_}=(0,$.K)().parsedOptions,S=!F&&!0===_,z=(0,c.useRef)(null),G="undefined"==typeof window||window.matchMedia("(hover: hover) and (pointer: fine)").matches;return a?(0,i.FD)(i.FK,{children:[(0,i.Y)(o.Drawer.Body,{children:(0,i.FD)(m.L9,{elementDescriptor:f.$z.checkoutSuccessRoot,sx:e=>({"--ring-fill":e.colors.$neutralAlpha200,"--ring-highlight":e.colors.$success500,margin:"auto",position:"relative",aspectRatio:"1/1",display:"grid",width:"100%",flexShrink:0,transformOrigin:"bottom center",animationName:"scaleIn",animationDuration:`${b.wz.slowest}ms`,animationTimingFunction:b._8.bezier,animationFillMode:"forwards",opacity:0,overflow:"hidden",backgroundColor:e.colors.$colorBackground,"@keyframes scaleIn":{"0%":{filter:"blur(10px)",transform:"scale(0.85)",opacity:0},"100%":{filter:"blur(0px)",transform:"scale(1)",opacity:1}},...!S&&{animation:"none",opacity:1}}),ref:z,onMouseMove:e=>{if(G&&z.current){let t=z.current.getBoundingClientRect(),r=e.clientX-t.left,i=e.clientY-t.top,o=t.width;o>0?v({x:r/o*512,y:i/o*512}):v({x:256,y:256})}},children:[(0,i.Y)(k,{positionX:w.x,positionY:w.y}),(0,i.FD)(m.az,{elementDescriptor:f.$z.checkoutSuccessBadge,sx:e=>({margin:"auto",gridArea:"1/1",display:"flex",position:"relative",width:e.sizes.$16,height:e.sizes.$16,borderRadius:e.radii.$circle,backgroundImage:"linear-gradient(180deg, rgba(255, 255, 255, 0.30) 0%, rgba(0, 0, 0, 0.12) 50%, rgba(0, 0, 0, 0.30) 95.31%)",boxShadow:"0px 4px 12px 0px rgba(0, 0, 0, 0.35), 0px 1px 0px 0px rgba(255, 255, 255, 0.05) inset",color:G?e.colors.$success500:e.colors.$colorForeground,":before":{content:'""',position:"absolute",inset:e.space.$1,borderRadius:e.radii.$circle,backgroundColor:e.colors.$colorBackground}}),children:[(0,i.Y)("svg",{fill:"none",viewBox:"0 0 10 10","aria-hidden":"true",style:{position:"relative",margin:"auto",width:"1rem",height:"1rem"},children:(0,i.Y)("path",{d:"m1 6 3 3 5-8",stroke:"currentColor",strokeWidth:"1.25",strokeLinecap:"round",strokeLinejoin:"round",strokeDasharray:"1",pathLength:"1",style:{strokeDashoffset:"1",animation:S?`check ${b.wz.drawer}ms ${b._8.bezier} forwards ${b.wz.slow}ms`:"none",...!S&&{strokeDashoffset:"0"}}})}),(0,i.Y)("style",{children:`
+"use strict";(globalThis.webpackChunk_clerk_ui=globalThis.webpackChunk_clerk_ui||[]).push([["256"],{2677:function(e,t,r){r.r(t),r.d(t,{Checkout:()=>ec});var i=r(4518),o=r(8532),n=r(6256),a=r(4173),l=r(9361),c=r(5074),s=r(2366);let d=(0,c.createContext)(null),u=()=>{let e=(0,c.useContext)(d),t=(0,l.ho)(),r=(0,s.II)();if(!e||"Checkout"!==e.componentName)throw Error("Clerk: useCheckoutContext called outside Checkout.");let i=(0,c.useMemo)(()=>{if(e.portalRoot)return;let i=e.newSubscriptionRedirectUrl||t.buildNewSubscriptionRedirectUrl?.();return(0,a.vU)(r?.allowedRedirectOrigins,window.location.origin)(i)?i:void 0},[e.portalRoot,e.newSubscriptionRedirectUrl,t,r?.allowedRedirectOrigins]),{componentName:o,...n}=e;return{...n,componentName:o,newSubscriptionRedirectUrl:i}};var p=r(4607),h=r(2861),m=r(8272),g=r(9436),y=r(137),f=r(8920),$=r(6580),b=r(4091),Y=r(359),D=r(4964);let x=e=>e[0].toUpperCase()+e.slice(1),w=(e,t,r)=>e+(t-e)*r,k=({positionX:e,positionY:t})=>{let r=(0,c.useRef)(null),[o,n]=(0,c.useState)({x:256,y:256}),a="undefined"==typeof window||window.matchMedia("(hover: hover) and (pointer: fine)").matches;(0,c.useEffect)(()=>{if(!a)return;let i=()=>{n(r=>({x:w(r.x,e,.15),y:w(r.y,t,.15)})),r.current=requestAnimationFrame(i)};return r.current=requestAnimationFrame(i),()=>{r.current&&cancelAnimationFrame(r.current)}},[e,t,a]);let l=(0,c.useId)(),s=(0,c.useId)(),d=(0,c.useId)();return(0,i.FD)(m.az,{elementDescriptor:f.$z.checkoutSuccessRings,as:"svg",viewBox:"0 0 512 512",sx:{position:"absolute",inset:0,pointerEvents:"none"},"aria-hidden":!0,children:[(0,i.FD)("defs",{children:[(0,i.FD)("radialGradient",{id:"clerk-checkout-success-gradient",children:[(0,i.Y)("stop",{offset:"0%",style:{stopColor:"var(--ring-highlight)"}}),(0,i.Y)("stop",{offset:"100%",stopOpacity:"0",style:{stopColor:"var(--ring-highlight)"}})]}),(0,i.Y)("filter",{id:"clerk-checkout-success-blur-effect",children:(0,i.Y)("feGaussianBlur",{stdDeviation:"10"})}),[{r:225,maskStart:10,maskEnd:90,id:l},{r:162.5,maskStart:15,maskEnd:85,id:s},{r:100,maskStart:20,maskEnd:80,id:d}].map(({maskStart:e,maskEnd:t,id:r})=>(0,i.FD)("linearGradient",{id:`gradient-${r}`,x1:"0%",y1:"0%",x2:"0%",y2:"100%",children:[(0,i.Y)("stop",{offset:`${e+5}%`,stopColor:"white",stopOpacity:"0"}),(0,i.Y)("stop",{offset:`${e+35}%`,stopColor:"white",stopOpacity:"1"}),(0,i.Y)("stop",{offset:`${t-35}%`,stopColor:"white",stopOpacity:"1"}),(0,i.Y)("stop",{offset:`${t-5}%`,stopColor:"white",stopOpacity:"0"})]},r)),(0,i.Y)("mask",{id:"clerk-checkout-success-mask",children:[{r:225,id:l},{r:162.5,id:s},{r:100,id:d}].map(({r:e,id:t})=>(0,i.Y)("circle",{cx:"256",cy:"256",r:e,stroke:`url(#gradient-${t})`,fill:"none",strokeWidth:"1"},t))})]}),(0,i.FD)("g",{mask:"url(#clerk-checkout-success-mask)",children:[(0,i.Y)("rect",{width:"512",height:"512",style:{fill:"var(--ring-fill)"}}),a&&(0,i.Y)("rect",{id:"movingGradientHighlight",width:"256",height:"256",x:o.x-128,y:o.y-128,fill:"url(#clerk-checkout-success-gradient)",filter:"url(#clerk-checkout-success-blur-effect)"})]})]})},v=()=>{let e=(0,D.r)(),{setIsOpen:t}=(0,o.g)(),{newSubscriptionRedirectUrl:r}=u(),{checkout:n}=(0,l.v$)(),{totals:a,paymentMethod:s,planPeriodStart:d,freeTrialEndsAt:p}=n,[w,v]=(0,c.useState)({x:256,y:256}),F=(0,Y.j)(),{animations:_}=(0,$.K)().parsedOptions,S=!F&&!0===_,z=(0,c.useRef)(null),G="undefined"==typeof window||window.matchMedia("(hover: hover) and (pointer: fine)").matches;return a?(0,i.FD)(i.FK,{children:[(0,i.Y)(o.Drawer.Body,{children:(0,i.FD)(m.L9,{elementDescriptor:f.$z.checkoutSuccessRoot,sx:e=>({"--ring-fill":e.colors.$neutralAlpha200,"--ring-highlight":e.colors.$success500,margin:"auto",position:"relative",aspectRatio:"1/1",display:"grid",width:"100%",flexShrink:0,transformOrigin:"bottom center",animationName:"scaleIn",animationDuration:`${b.wz.slowest}ms`,animationTimingFunction:b._8.bezier,animationFillMode:"forwards",opacity:0,overflow:"hidden",backgroundColor:e.colors.$colorBackground,"@keyframes scaleIn":{"0%":{filter:"blur(10px)",transform:"scale(0.85)",opacity:0},"100%":{filter:"blur(0px)",transform:"scale(1)",opacity:1}},...!S&&{animation:"none",opacity:1}}),ref:z,onMouseMove:e=>{if(G&&z.current){let t=z.current.getBoundingClientRect(),r=e.clientX-t.left,i=e.clientY-t.top,o=t.width;o>0?v({x:r/o*512,y:i/o*512}):v({x:256,y:256})}},children:[(0,i.Y)(k,{positionX:w.x,positionY:w.y}),(0,i.FD)(m.az,{elementDescriptor:f.$z.checkoutSuccessBadge,sx:e=>({margin:"auto",gridArea:"1/1",display:"flex",position:"relative",width:e.sizes.$16,height:e.sizes.$16,borderRadius:e.radii.$circle,backgroundImage:"linear-gradient(180deg, rgba(255, 255, 255, 0.30) 0%, rgba(0, 0, 0, 0.12) 50%, rgba(0, 0, 0, 0.30) 95.31%)",boxShadow:"0px 4px 12px 0px rgba(0, 0, 0, 0.35), 0px 1px 0px 0px rgba(255, 255, 255, 0.05) inset",color:G?e.colors.$success500:e.colors.$colorForeground,":before":{content:'""',position:"absolute",inset:e.space.$1,borderRadius:e.radii.$circle,backgroundColor:e.colors.$colorBackground}}),children:[(0,i.Y)("svg",{fill:"none",viewBox:"0 0 10 10","aria-hidden":"true",style:{position:"relative",margin:"auto",width:"1rem",height:"1rem"},children:(0,i.Y)("path",{d:"m1 6 3 3 5-8",stroke:"currentColor",strokeWidth:"1.25",strokeLinecap:"round",strokeLinejoin:"round",strokeDasharray:"1",pathLength:"1",style:{strokeDashoffset:"1",animation:S?`check ${b.wz.drawer}ms ${b._8.bezier} forwards ${b.wz.slow}ms`:"none",...!S&&{strokeDashoffset:"0"}}})}),(0,i.Y)("style",{children:`
               @keyframes check {
                 0% {
                   stroke-dashoffset: 1;
@@ -6,4 +6,4 @@
                 100% {
                   stroke-dashoffset: 0;
                 }
-            `})]}),(0,i.FD)(m.L9,{sx:e=>({margin:"auto",gridArea:"1/1",position:"relative",textAlign:"center",transform:`translateY(${e.space.$20})`}),children:[(0,i.Y)(m.DZ,{elementDescriptor:f.$z.checkoutSuccessTitle,as:"h2",textVariant:"h2",localizationKey:p?(0,h.G)("billing.checkout.title__trialSuccess"):a.totalDueNow.amount>0?(0,h.G)("billing.checkout.title__paymentSuccessful"):(0,h.G)("billing.checkout.title__subscriptionSuccessful"),sx:e=>({opacity:0,animationName:"slideUp",animationDuration:`${b.wz.slowest}ms`,animationTimingFunction:b._8.bezier,animationFillMode:"forwards",color:e.colors.$colorForeground,"@keyframes slideUp":{"0%":{transform:"translateY(30px)",opacity:0},"100%":{transform:"translateY(0)",opacity:1}},...!S&&{opacity:1,animation:"none"}})}),(0,i.Y)(m.EY,{elementDescriptor:f.$z.checkoutSuccessDescription,colorScheme:"secondary",sx:e=>({textAlign:"center",paddingInline:e.space.$8,marginBlockStart:e.space.$2,opacity:0,animationName:"slideUp",animationDuration:`${1.5*b.wz.slowest}ms`,animationTimingFunction:b._8.bezier,animationFillMode:"forwards","@keyframes slideUp":{"0%":{transform:"translateY(30px)",opacity:0},"100%":{transform:"translateY(0)",opacity:1}},...!S&&{opacity:1,animation:"none"}}),localizationKey:a.totalDueNow.amount>0?(0,h.G)("billing.checkout.description__paymentSuccessful"):(0,h.G)("billing.checkout.description__subscriptionSuccessful")})]})]})}),(0,i.FD)(o.Drawer.Footer,{sx:e=>({rowGap:e.space.$4,animationName:"footerSlideInUp",animationDuration:`${b.wz.drawer}ms`,animationTimingFunction:b._8.bezier,"@keyframes footerSlideInUp":{"0%":{transform:"translateY(100%)",opacity:0},"100%":{transform:"translateY(0)",opacity:1}},...!S&&{animation:"none"}}),children:[(0,i.FD)(g.p.Root,{children:[(0,i.FD)(g.p.Group,{variant:"secondary",children:[(0,i.Y)(g.p.Title,{title:(0,h.G)("billing.checkout.lineItems.title__totalPaid")}),(0,i.Y)(g.p.Description,{text:`${a.totalDueNow.currencySymbol}${a.totalDueNow.amountFormatted}`})]}),p?(0,i.FD)(g.p.Group,{variant:"secondary",children:[(0,i.Y)(g.p.Title,{title:(0,h.G)("billing.checkout.lineItems.title__freeTrialEndsAt")}),(0,i.Y)(g.p.Description,{text:(0,y.Y)(p)})]}):null,(0,i.FD)(g.p.Group,{variant:"secondary",children:[(0,i.Y)(g.p.Title,{title:a.totalDueNow.amount>0||null!==p?(0,h.G)("billing.checkout.lineItems.title__paymentMethod"):(0,h.G)("billing.checkout.lineItems.title__subscriptionBegins")}),(0,i.Y)(g.p.Description,{text:a.totalDueNow.amount>0||null!==p?s?"card"!==s.paymentType?s.paymentType?`${x(s.paymentType)}`:"–":s.cardType?`${x(s.cardType)} ⋯ ${s.last4}`:"–":"–":d?(0,y.Y)(new Date(d)):"–"})]})]}),(0,i.Y)(m.$n,{onClick:()=>{r&&e.navigate(r),t&&t(!1)},localizationKey:(0,h.G)("formButtonPrimary")})]})]}):null};var F=r(6088),_=r(3269),S=r(6839),z=r(1586),G=r(6455),T=r(4468),M=r(625),R=r(7288),C=r(9068),B=r(8023),A=r(3450),I=r(3369),E=r(3679);let P=e=>e[0].toUpperCase()+e.slice(1),N="payment_method_id",L=(0,_.dm)(()=>{let{checkout:e}=(0,l.v$)(),{plan:t,totals:r,isImmediatePlanChange:n,planPeriod:a,freeTrialEndsAt:c}=e;if(!t)return null;let s=!!r.credit?.amount&&r.credit.amount>0,d=!!r.pastDue?.amount&&r.pastDue.amount>0,u="month"===a?t.fee:t.annualMonthlyFee;return(0,i.FD)(o.Drawer.Body,{children:[(0,i.Y)(m.az,{elementDescriptor:f.$z.checkoutFormLineItemsRoot,sx:e=>({padding:e.space.$4,borderBottomWidth:e.borderWidths.$normal,borderBottomStyle:e.borderStyles.$solid,borderBottomColor:e.colors.$borderAlpha100}),children:(0,i.FD)(g.p.Root,{children:[(0,i.FD)(g.p.Group,{children:[(0,i.Y)(g.p.Title,{title:t.name,description:"annual"===a?(0,h.G)("billing.billedAnnually"):void 0,badge:t.freeTrialEnabled&&c?(0,i.Y)(E.V,{subscription:{status:"free_trial"}}):null}),(0,i.Y)(g.p.Description,{prefix:"annual"===a?"x12":void 0,text:`${u.currencySymbol}${u.amountFormatted}`,suffix:(0,h.G)("billing.checkout.perMonth")})]}),(0,i.FD)(g.p.Group,{borderTop:!0,variant:"tertiary",children:[(0,i.Y)(g.p.Title,{title:(0,h.G)("billing.subtotal")}),(0,i.Y)(g.p.Description,{text:`${r.subtotal.currencySymbol}${r.subtotal.amountFormatted}`})]}),s&&(0,i.FD)(g.p.Group,{variant:"tertiary",children:[(0,i.Y)(g.p.Title,{title:(0,h.G)("billing.creditRemainder")}),(0,i.Y)(g.p.Description,{text:`- ${r.credit?.currencySymbol}${r.credit?.amountFormatted}`})]}),d&&(0,i.FD)(g.p.Group,{variant:"tertiary",children:[(0,i.FD)(G.m_.Root,{children:[(0,i.Y)(G.m_.Trigger,{children:(0,i.Y)(g.p.Title,{title:(0,h.G)("billing.pastDue"),icon:C.A})}),(0,i.Y)(G.m_.Content,{text:(0,h.G)("billing.checkout.pastDueNotice")})]}),(0,i.Y)(g.p.Description,{text:`${r.pastDue?.currencySymbol}${r.pastDue?.amountFormatted}`})]}),!!c&&!!t.freeTrialDays&&r.totalDueAfterFreeTrial&&(0,i.FD)(g.p.Group,{variant:"tertiary",children:[(0,i.Y)(g.p.Title,{title:(0,h.G)("billing.checkout.totalDueAfterTrial",{days:t.freeTrialDays})}),(0,i.Y)(g.p.Description,{text:`${r.totalDueAfterFreeTrial.currencySymbol}${r.totalDueAfterFreeTrial.amountFormatted}`})]}),(0,i.FD)(g.p.Group,{borderTop:!0,children:[(0,i.Y)(g.p.Title,{title:(0,h.G)("billing.totalDueToday")}),(0,i.Y)(g.p.Description,{text:`${r.totalDueNow.currencySymbol}${r.totalDueNow.amountFormatted}`})]})]})}),!n&&(0,i.Y)(m.az,{elementDescriptor:f.$z.checkoutFormLineItemsRoot,sx:e=>({paddingBlockStart:e.space.$4,paddingInline:e.space.$4}),children:(0,i.Y)(m.EY,{localizationKey:(0,h.G)("billing.checkout.downgradeNotice"),variant:"caption",colorScheme:"secondary"})}),(0,i.Y)(K,{})]})}),W=()=>{let{onSubscriptionComplete:e}=u(),{checkout:t}=(0,l.v$)(),r=(0,_.f0)();if("needs_confirmation"!==t.status)throw Error("Checkout not found");let i=async i=>{r.setLoading(),r.setError(void 0);let{error:o}=await t.confirm(i);o?(0,T.H4)(o,[],r.setError):e?.(),r.setIdle()};return{payWithExistingPaymentMethod:e=>(e.preventDefault(),i({paymentMethodId:new FormData(e.currentTarget).get(N)})),addPaymentMethodAndPay:e=>i(e),payWithTestCard:()=>i({gateway:"stripe",useTestCard:!0}),payWithoutPaymentMethod:e=>(e.preventDefault(),i({}))}},K=()=>{let{checkout:e}=(0,l.v$)(),{plan:t}=e,{isLoading:r}=(0,R.mu)();return t?r?(0,i.Y)(m.y$,{sx:{margin:"auto"}}):(0,i.Y)(U,{}):null},U=()=>{let{checkout:e}=(0,l.v$)(),{plan:t,isImmediatePlanChange:r,needsPaymentMethod:o}=e,{data:n}=(0,R.mu)(),[a,s]=(0,c.useState)(()=>n.length>0?"existing":"new");return t?(0,i.FD)(m.fv,{elementDescriptor:f.$z.checkoutFormElementsRoot,gap:4,sx:e=>({padding:e.space.$4}),children:[(0,i.Y)(i.FK,{children:n.length>0&&r&&o&&(0,i.FD)(S.I.Root,{"aria-label":"Payment method source",value:a,onChange:e=>s(e),size:"lg",fullWidth:!0,children:[(0,i.Y)(S.I.Button,{value:"existing",text:(0,h.G)("billing.paymentMethods__label")}),(0,i.Y)(S.I.Button,{value:"new",text:(0,h.G)("billing.addPaymentMethod__label")})]})}),o?"existing"===a?(0,i.Y)(Z,{paymentMethods:n}):"new"===a&&(0,i.Y)(j,{}):(0,i.Y)(V,{})]}):null},J=()=>{let{isLoading:e}=(0,_.f0)(),{payWithTestCard:t}=W();return(0,i.FD)(m.az,{sx:e=>({background:e.colors.$neutralAlpha50,padding:e.space.$2x5,borderRadius:e.radii.$md,borderWidth:e.borderWidths.$normal,borderStyle:e.borderStyles.$solid,borderColor:e.colors.$borderAlpha100,display:"flex",flexDirection:"column",rowGap:e.space.$2,position:"relative"}),children:[(0,i.Y)(m.az,{sx:e=>({position:"absolute",inset:0,background:`repeating-linear-gradient(-45deg,${e.colors.$warningAlpha100},${e.colors.$warningAlpha100} 6px,${e.colors.$warningAlpha150} 6px,${e.colors.$warningAlpha150} 12px)`,maskImage:"linear-gradient(transparent 20%, black)",pointerEvents:"none"})}),(0,i.FD)(m.so,{sx:e=>({alignItems:"center",justifyContent:"center",flexDirection:"column",rowGap:e.space.$2}),children:[(0,i.Y)(m.EY,{sx:e=>({color:e.colors.$warning500,fontWeight:e.fontWeights.$semibold}),localizationKey:(0,h.G)("billing.paymentMethod.dev.developmentMode")}),(0,i.Y)(m.$n,{type:"button",block:!0,variant:"bordered",localizationKey:(0,h.G)("userProfile.billingPage.paymentMethodsSection.payWithTestCardButton"),colorScheme:"secondary",isLoading:e,onClick:t})]})]})},O=()=>{let{checkout:e}=(0,l.v$)(),{status:t,freeTrialEndsAt:r,totals:i}=e;if("needs_initialization"===t)throw Error("Clerk: Invalid state");return r?(0,h.G)("billing.startFreeTrial"):i.totalDueNow.amount>0?(0,h.G)("billing.pay",{amount:`${i.totalDueNow.currencySymbol}${i.totalDueNow.amountFormatted}`}):(0,h.G)("billing.subscribe")},V=(0,_.dm)(()=>{let{for:e}=u(),{payWithoutPaymentMethod:t}=W(),r=(0,_.f0)();return(0,i.FD)(m.lV,{onSubmit:t,sx:X,children:[(0,i.Y)(F.Z.Alert,{children:r.error}),(0,i.Y)(H,{})]})}),j=(0,_.dm)(()=>{let{addPaymentMethodAndPay:e}=W(),t=O(),{checkout:r}=(0,l.v$)();return(0,i.FD)(A.bL,{onSuccess:e,checkout:r,children:[(0,i.Y)(M.W,{children:(0,i.Y)(J,{})}),(0,i.Y)(A.pr,{text:t})]})}),H=e=>{let t=(0,_.f0)(),r=O();return(0,i.Y)(m.$n,{type:"submit",colorScheme:"primary",size:"sm",textVariant:"buttonLarge",sx:{width:"100%"},isLoading:t.isLoading,localizationKey:r,...e})},X=e=>({display:"flex",flexDirection:"column",rowGap:e.space.$4}),Z=(0,_.dm)(({paymentMethods:e})=>{let{checkout:t}=(0,l.v$)(),{paymentMethod:r,isImmediatePlanChange:o,needsPaymentMethod:n}=t,{payWithExistingPaymentMethod:a}=W(),s=(0,_.f0)(),[d,u]=(0,c.useState)(r||e.find(e=>e.isDefault)),p=(0,c.useMemo)(()=>e.map(e=>{let t="card"!==e.paymentType?e.paymentType?`${P(e.paymentType)}`:"–":e.cardType?`${P(e.cardType)} ⋯ ${e.last4}`:"–";return{value:e.id,label:t}}),[e]);return(0,i.FD)(m.lV,{onSubmit:a,sx:X,children:[o&&n?(0,i.FD)(z.l6,{elementId:"paymentMethod",options:p,value:d?.id||null,onChange:t=>{u(e.find(e=>e.id===t.value))},portal:!0,children:[(0,i.Y)("input",{name:N,type:"hidden",value:d?.id}),(0,i.Y)(z.JC,{icon:B.A,sx:e=>({justifyContent:"space-between",backgroundColor:e.colors.$colorBackground}),children:d&&(0,i.Y)(I.O,{paymentMethod:d})}),(0,i.Y)(z.UL,{sx:e=>({paddingBlock:e.space.$1,color:e.colors.$colorForeground})})]}):(0,i.Y)("input",{name:N,type:"hidden",value:d?.id}),(0,i.Y)(F.Z.Alert,{children:s.error}),(0,i.Y)(H,{})]})}),q=()=>{let{checkout:e}=(0,l.v$)();return(0,c.useEffect)(()=>{e.start()},[]),null},Q=({children:e})=>{let{planId:t,planPeriod:r,for:o}=u();return(0,i.FD)(l.Rx,{for:o,planId:t,planPeriod:r,children:[(0,i.Y)(q,{}),e]})},ee=({children:e,name:t})=>{let{checkout:r}=(0,l.v$)();return r.status!==t?null:e},et=({children:e,status:t})=>{let{errors:r,fetchStatus:i}=(0,l.v$)();return(0,c.useMemo)(()=>{if(r.global){let e=r.global.flatMap(e=>{if(e.isClerkApiResponseError())return e.errors.map(e=>e.code)});return e.includes("missing_payer_email")?"missing_payer_email":e.includes("invalid_plan_change")?"invalid_plan_change":"generic_error"}return i},[i])!==t?null:e};var er=r(8036),ei=r(78),eo=r(2336);let en=()=>{let{errors:e}=(0,l.v$)(),{translateError:t}=(0,ei._)(),{t:r}=(0,ei._)();return(0,i.Y)(o.Drawer.Body,{children:(0,i.Y)(m.so,{align:"center",justify:"center",sx:e=>({height:"100%",padding:e.space.$4,fontSize:e.fontSizes.$md}),children:(0,i.Y)(er.F,{variant:"danger",colorScheme:"danger",children:e.global?t(e.global[0]):r((0,h.G)("unstable__errors.form_param_value_invalid"))})})})},ea=()=>{let{planPeriod:e}=u(),{errors:t}=(0,l.v$)(),r=t?.global?.filter(e=>e.isClerkApiResponseError()).flatMap(e=>e.errors).find(e=>"invalid_plan_change"===e.code);if(!r)return null;let{plan:n,isPlanUpgradePossible:a}=r?.meta||{};return(0,i.Y)(o.Drawer.Body,{children:(0,i.FD)(m.so,{gap:4,direction:"col",children:[(0,i.Y)(m.az,{elementDescriptor:f.$z.checkoutFormLineItemsRoot,sx:e=>({padding:e.space.$4,borderBottomWidth:e.borderWidths.$normal,borderBottomStyle:e.borderStyles.$solid,borderBottomColor:e.colors.$borderAlpha100}),children:(0,i.Y)(g.p.Root,{children:(0,i.FD)(g.p.Group,{children:[(0,i.Y)(g.p.Title,{title:n.name,description:"annual"===e?(0,h.G)("billing.billedAnnually"):void 0}),(0,i.Y)(g.p.Description,{prefix:"annual"===e?"x12":void 0,text:`${n.currency_symbol}${"month"===e?n.amount_formatted:n.annual_monthly_amount_formatted}`,suffix:(0,h.G)("billing.checkout.perMonth")})]})})}),(0,i.Y)(m.az,{sx:e=>({padding:e.space.$4}),children:(0,i.Y)(er.F,{variant:"info",colorScheme:"info",title:a?(0,h.G)("billing.cannotSubscribeMonthly"):(0,h.G)("billing.cannotSubscribeUnrecoverable")})})]})})},el=()=>{let{checkout:e}=(0,l.v$)(),{setIsOpen:t}=(0,o.g)();return(0,i.Y)(o.Drawer.Body,{children:(0,i.Y)(m.az,{sx:e=>({padding:e.space.$4}),children:(0,i.Y)(eo.v,{title:(0,h.G)("billing.checkout.emailForm.title"),subtitle:(0,h.G)("billing.checkout.emailForm.subtitle"),onSuccess:()=>void e.start(),onReset:()=>t(!1),disableAutoFocus:!0})})})},ec=e=>(0,i.Y)(p.n.Root,{flow:"checkout",children:(0,i.Y)(p.n.Part,{children:(0,i.Y)(n.m$.Provider,{value:e.for||"user",children:(0,i.Y)(d.Provider,{value:{componentName:"Checkout",...e},children:(0,i.FD)(o.Drawer.Content,{children:[(0,i.Y)(o.Drawer.Header,{title:(0,h.G)("billing.checkout.title")}),(0,i.FD)(Q,{children:[(0,i.FD)(ee,{name:"needs_initialization",children:[(0,i.Y)(et,{status:"fetching",children:(0,i.Y)(m.y$,{sx:{margin:"auto"}})}),(0,i.Y)(et,{status:"invalid_plan_change",children:(0,i.Y)(ea,{})}),(0,i.Y)(et,{status:"missing_payer_email",children:(0,i.Y)(el,{})}),(0,i.Y)(et,{status:"generic_error",children:(0,i.Y)(en,{})})]}),(0,i.Y)(ee,{name:"completed",children:(0,i.Y)(v,{})}),(0,i.Y)(ee,{name:"needs_confirmation",children:(0,i.Y)(L,{})})]})]})})})})})},3450:function(e,t,r){r.d(t,{pr:()=>M,L6:()=>T,Mo:()=>G,bL:()=>S});var i=r(4518),o=r(5543),n=r(5074),a=r(6088),l=r(3269),c=r(2454),s=r(1475),d=r(3549),u=r(8930),p=r(4468),h=r(6256),m=r(6580),g=r(78),y=r(2861),f=r(8272),$=r(8920);let b=e=>(0,i.Y)(f.az,{sx:[e=>({height:e.space.$2,width:"100%",borderRadius:e.radii.$md,background:e.colors.$neutralAlpha100}),e.sx]}),Y=()=>(0,i.Y)(b,{sx:e=>({height:e.space.$10,width:"100%"})}),D=e=>(0,i.Y)(f.so,{direction:"col",gap:2,children:e.children}),x=()=>(0,i.Y)(f.az,{"aria-label":"Loading...",sx:{position:"relative",minHeight:0,flex:1,overflowY:"auto"},children:(0,i.FD)(f.so,{direction:"col",gap:5,children:[(0,i.FD)(D,{children:[(0,i.Y)(b,{sx:e=>({height:e.space.$3,width:e.sizes.$24})}),(0,i.Y)(Y,{})]}),(0,i.FD)(f.xA,{columns:2,gap:4,children:[(0,i.FD)(D,{children:[(0,i.Y)(b,{sx:e=>({height:e.space.$3,width:e.sizes.$20})}),(0,i.Y)(Y,{})]}),(0,i.FD)(D,{children:[(0,i.Y)(b,{sx:e=>({height:e.space.$3,width:e.sizes.$24})}),(0,i.Y)(Y,{})]})]}),(0,i.FD)(D,{children:[(0,i.Y)(b,{sx:e=>({height:e.space.$3,width:e.sizes.$16})}),(0,i.Y)(Y,{})]}),(0,i.FD)(D,{children:[(0,i.Y)(b,{}),(0,i.Y)(b,{}),(0,i.Y)(b,{sx:{width:"66.666667%"}})]})]})}),[w,k]=(0,o.e3)("AddPaymentMethodRoot"),v=({children:e,checkout:t,...r})=>{var a;let l,c=(0,h.XX)(),s=(0,n.useRef)(null),{t:d}=(0,g._)(),[p,f]=(0,n.useState)(void 0),[$,b]=(0,n.useState)(void 0),[Y,D]=(0,n.useState)(void 0),x=(a=s.current,l=(0,m.K)().parsedInternalTheme,(0,n.useMemo)(()=>{if(!a)return;let{colors:e,fontWeights:t,fontSizes:r,radii:i,space:o}=l;return{colorPrimary:(0,u.G3)(a,e.$primary500,e.$colorBackground),colorBackground:(0,u.G3)(a,e.$colorInput,e.$colorBackground),colorText:(0,u.G3)(a,e.$colorForeground,e.$colorBackground),colorTextSecondary:(0,u.G3)(a,e.$colorMutedForeground,e.$colorBackground),colorSuccess:(0,u.G3)(a,e.$success500,e.$colorBackground),colorDanger:(0,u.G3)(a,e.$danger500,e.$colorBackground),colorWarning:(0,u.G3)(a,e.$warning500,e.$colorBackground),fontWeightNormal:(0,u.yJ)(a,"font-weight",t.$normal.toString()),fontWeightMedium:(0,u.yJ)(a,"font-weight",t.$medium.toString()),fontWeightBold:(0,u.yJ)(a,"font-weight",t.$bold.toString()),fontSizeXl:(0,u.yJ)(a,"font-size",r.$xl),fontSizeLg:(0,u.yJ)(a,"font-size",r.$lg),fontSizeSm:(0,u.yJ)(a,"font-size",r.$md),fontSizeXs:(0,u.yJ)(a,"font-size",r.$sm),borderRadius:(0,u.yJ)(a,"border-radius",i.$lg),spacingUnit:(0,u.yJ)(a,"padding",o.$1)}},[l,a]));return(0,i.FD)(w.Provider,{value:{value:{headerTitle:p,headerSubtitle:$,submitLabel:Y,setHeaderTitle:f,setHeaderSubtitle:b,setSubmitLabel:D,checkout:t,...r}},children:[(0,i.Y)("div",{ref:s,style:{display:"none"}}),(0,i.Y)(o.Tn,{checkout:t,for:c,stripeAppearance:x,paymentDescription:d((0,y.G)(t?.planPeriod==="month"?"billing.paymentMethod.applePayDescription.monthly":"billing.paymentMethod.applePayDescription.annual")),children:e})]})},F=e=>{let{isProviderReady:t}=(0,o.Jl)();return t?null:e.children},_=e=>{let{isProviderReady:t}=(0,o.Jl)();return t?(0,i.Y)(i.FK,{children:e.children}):null},S=e=>{let{children:t,...r}=e;return(0,i.FD)(v,{...r,children:[(0,i.Y)(F,{children:(0,i.Y)(f.so,{direction:"row",align:"center",justify:"center",sx:e=>({width:"100%",minHeight:e.sizes.$60}),children:(0,i.Y)(f.y$,{size:"lg",colorScheme:"primary",elementDescriptor:$.$z.spinner})})}),(0,i.Y)(_,{children:(0,i.Y)(R,{children:t})})]})},z=(e,t)=>{(0,n.useRef)(()=>{t(e)}),(0,n.useEffect)(()=>{t(e)},[e,t])},G=({text:e})=>{let{setHeaderTitle:t}=k();return z(e,t),null},T=({text:e})=>{let{setHeaderSubtitle:t}=k();return z(e,t),null},M=({text:e})=>{let{setSubmitLabel:t}=k();return z(e,t),null},R=({children:e})=>{let{headerTitle:t,headerSubtitle:r,submitLabel:n,checkout:u,onSuccess:m,cancelAction:g}=k(),f=(0,l.f0)(),$=(0,h.N7)(),{isFormReady:b,submit:Y,reset:D}=(0,o.Jl)(),w=async e=>{e.preventDefault(),f.setLoading(),f.setError(void 0);let{data:t,error:r}=await Y();if(!r)try{await m(t)}catch(e){(0,p.H4)(e,[],f.setError)}finally{f.setIdle(),D()}};return(0,i.Y)(d.M,{headerTitle:t,headerSubtitle:r,children:(0,i.FD)(c.l.Root,{onSubmit:w,sx:e=>({display:"flex",flexDirection:"column",rowGap:e.space.$3}),children:[e,(0,i.Y)(o.cl,{fallback:(0,i.Y)(x,{})}),(0,i.Y)(a.Z.Alert,{children:f.error}),(0,i.Y)(s.G,{isDisabled:!b,submitLabel:n??(0,y.G)(`${$}.billingPage.paymentMethodsSection.formButtonPrimary__add`),onReset:g,hideReset:!g,sx:{flex:u?1:void 0}})]})})}},3369:function(e,t,r){r.d(t,{O:()=>s});var i=r(4518),o=r(8272),n=r(8920),a=r(2861),l=r(4967),c=r(5203);let s=({paymentMethod:e})=>(0,i.FD)(o.so,{sx:{overflow:"hidden"},gap:2,align:"baseline",elementDescriptor:n.$z.paymentMethodRow,children:[(0,i.Y)(o.In,{icon:"card"===e.paymentType?l.A:c.A,sx:e=>({alignSelf:"center",color:e.colors.$colorMutedForeground}),elementDescriptor:n.$z.paymentMethodRowIcon}),(0,i.Y)(o.EY,{sx:e=>({color:e.colors.$colorForeground,textTransform:"capitalize"}),truncate:!0,elementDescriptor:n.$z.paymentMethodRowType,children:"card"===e.paymentType?e.cardType:e.paymentType}),(0,i.Y)(o.EY,{sx:e=>({color:e.colors.$colorMutedForeground}),variant:"caption",truncate:!0,elementDescriptor:n.$z.paymentMethodRowValue,children:"card"===e.paymentType?`⋯ ${e.last4}`:null}),e.isDefault&&(0,i.Y)(o.Ex,{elementDescriptor:n.$z.paymentMethodRowBadge,elementId:n.$z.paymentMethodRowBadge.setId("default"),localizationKey:(0,a.G)("badge__default")}),"expired"===e.status&&(0,i.Y)(o.Ex,{elementDescriptor:n.$z.paymentMethodRowBadge,elementId:n.$z.paymentMethodRowBadge.setId("expired"),colorScheme:"danger",localizationKey:(0,a.G)("badge__expired")})]})},3679:function(e,t,r){r.d(t,{V:()=>c});var i=r(4518),o=r(8272),n=r(2861);let a={active:"badge__activePlan",upcoming:"badge__upcomingPlan",past_due:"badge__pastDuePlan",free_trial:"badge__freeTrial"},l={active:"secondary",upcoming:"primary",past_due:"warning",free_trial:"secondary"},c=({subscription:e,elementDescriptor:t})=>(0,i.Y)(o.Ex,{elementDescriptor:t,colorScheme:l[e.status],localizationKey:(0,n.G)(a[e.status])})}}]);
+            `})]}),(0,i.FD)(m.L9,{sx:e=>({margin:"auto",gridArea:"1/1",position:"relative",textAlign:"center",transform:`translateY(${e.space.$20})`}),children:[(0,i.Y)(m.DZ,{elementDescriptor:f.$z.checkoutSuccessTitle,as:"h2",textVariant:"h2",localizationKey:p?(0,h.G)("billing.checkout.title__trialSuccess"):a.totalDueNow.amount>0?(0,h.G)("billing.checkout.title__paymentSuccessful"):(0,h.G)("billing.checkout.title__subscriptionSuccessful"),sx:e=>({opacity:0,animationName:"slideUp",animationDuration:`${b.wz.slowest}ms`,animationTimingFunction:b._8.bezier,animationFillMode:"forwards",color:e.colors.$colorForeground,"@keyframes slideUp":{"0%":{transform:"translateY(30px)",opacity:0},"100%":{transform:"translateY(0)",opacity:1}},...!S&&{opacity:1,animation:"none"}})}),(0,i.Y)(m.EY,{elementDescriptor:f.$z.checkoutSuccessDescription,colorScheme:"secondary",sx:e=>({textAlign:"center",paddingInline:e.space.$8,marginBlockStart:e.space.$2,opacity:0,animationName:"slideUp",animationDuration:`${1.5*b.wz.slowest}ms`,animationTimingFunction:b._8.bezier,animationFillMode:"forwards","@keyframes slideUp":{"0%":{transform:"translateY(30px)",opacity:0},"100%":{transform:"translateY(0)",opacity:1}},...!S&&{opacity:1,animation:"none"}}),localizationKey:a.totalDueNow.amount>0?(0,h.G)("billing.checkout.description__paymentSuccessful"):(0,h.G)("billing.checkout.description__subscriptionSuccessful")})]})]})}),(0,i.FD)(o.Drawer.Footer,{sx:e=>({rowGap:e.space.$4,animationName:"footerSlideInUp",animationDuration:`${b.wz.drawer}ms`,animationTimingFunction:b._8.bezier,"@keyframes footerSlideInUp":{"0%":{transform:"translateY(100%)",opacity:0},"100%":{transform:"translateY(0)",opacity:1}},...!S&&{animation:"none"}}),children:[(0,i.FD)(g.p.Root,{children:[(0,i.FD)(g.p.Group,{variant:"secondary",children:[(0,i.Y)(g.p.Title,{title:(0,h.G)("billing.checkout.lineItems.title__totalPaid")}),(0,i.Y)(g.p.Description,{text:`${a.totalDueNow.currencySymbol}${a.totalDueNow.amountFormatted}`})]}),p?(0,i.FD)(g.p.Group,{variant:"secondary",children:[(0,i.Y)(g.p.Title,{title:(0,h.G)("billing.checkout.lineItems.title__freeTrialEndsAt")}),(0,i.Y)(g.p.Description,{text:(0,y.Y)(p)})]}):null,(0,i.FD)(g.p.Group,{variant:"secondary",children:[(0,i.Y)(g.p.Title,{title:a.totalDueNow.amount>0||null!==p?(0,h.G)("billing.checkout.lineItems.title__paymentMethod"):(0,h.G)("billing.checkout.lineItems.title__subscriptionBegins")}),(0,i.Y)(g.p.Description,{text:a.totalDueNow.amount>0||null!==p?s?"card"!==s.paymentType?s.paymentType?`${x(s.paymentType)}`:"–":s.cardType?`${x(s.cardType)} ⋯ ${s.last4}`:"–":"–":d?(0,y.Y)(new Date(d)):"–"})]})]}),(0,i.Y)(m.$n,{onClick:()=>{r&&e.navigate(r),t&&t(!1)},localizationKey:(0,h.G)("formButtonPrimary")})]})]}):null};var F=r(6088),_=r(3269),S=r(6839),z=r(1586),G=r(6455),T=r(4468),M=r(625),R=r(7288),C=r(9068),B=r(8023),A=r(3450),I=r(3369),E=r(3679);let P=e=>e[0].toUpperCase()+e.slice(1),N="payment_method_id",L=(0,_.dm)(()=>{let{checkout:e}=(0,l.v$)(),{plan:t,totals:r,isImmediatePlanChange:n,planPeriod:a,freeTrialEndsAt:c}=e;if(!t)return null;let s=!!r.credit?.amount&&r.credit.amount>0,d=!!r.pastDue?.amount&&r.pastDue.amount>0,u="month"===a?t.fee:t.annualMonthlyFee;return(0,i.FD)(o.Drawer.Body,{children:[(0,i.Y)(m.az,{elementDescriptor:f.$z.checkoutFormLineItemsRoot,sx:e=>({padding:e.space.$4,borderBottomWidth:e.borderWidths.$normal,borderBottomStyle:e.borderStyles.$solid,borderBottomColor:e.colors.$borderAlpha100}),children:(0,i.FD)(g.p.Root,{children:[(0,i.FD)(g.p.Group,{children:[(0,i.Y)(g.p.Title,{title:t.name,description:"annual"===a?(0,h.G)("billing.billedAnnually"):void 0,badge:t.freeTrialEnabled&&c?(0,i.Y)(E.V,{subscription:{status:"free_trial"}}):null}),(0,i.Y)(g.p.Description,{prefix:"annual"===a?"x12":void 0,text:`${u.currencySymbol}${u.amountFormatted}`,suffix:(0,h.G)("billing.checkout.perMonth")})]}),(0,i.FD)(g.p.Group,{borderTop:!0,variant:"tertiary",children:[(0,i.Y)(g.p.Title,{title:(0,h.G)("billing.subtotal")}),(0,i.Y)(g.p.Description,{text:`${r.subtotal.currencySymbol}${r.subtotal.amountFormatted}`})]}),s&&(0,i.FD)(g.p.Group,{variant:"tertiary",children:[(0,i.Y)(g.p.Title,{title:(0,h.G)("billing.creditRemainder")}),(0,i.Y)(g.p.Description,{text:`- ${r.credit?.currencySymbol}${r.credit?.amountFormatted}`})]}),d&&(0,i.FD)(g.p.Group,{variant:"tertiary",children:[(0,i.FD)(G.m_.Root,{children:[(0,i.Y)(G.m_.Trigger,{children:(0,i.Y)(g.p.Title,{title:(0,h.G)("billing.pastDue"),icon:C.A})}),(0,i.Y)(G.m_.Content,{text:(0,h.G)("billing.checkout.pastDueNotice")})]}),(0,i.Y)(g.p.Description,{text:`${r.pastDue?.currencySymbol}${r.pastDue?.amountFormatted}`})]}),!!c&&!!t.freeTrialDays&&r.totalDueAfterFreeTrial&&(0,i.FD)(g.p.Group,{variant:"tertiary",children:[(0,i.Y)(g.p.Title,{title:(0,h.G)("billing.checkout.totalDueAfterTrial",{days:t.freeTrialDays})}),(0,i.Y)(g.p.Description,{text:`${r.totalDueAfterFreeTrial.currencySymbol}${r.totalDueAfterFreeTrial.amountFormatted}`})]}),(0,i.FD)(g.p.Group,{borderTop:!0,children:[(0,i.Y)(g.p.Title,{title:(0,h.G)("billing.totalDueToday")}),(0,i.Y)(g.p.Description,{text:`${r.totalDueNow.currencySymbol}${r.totalDueNow.amountFormatted}`})]})]})}),!n&&(0,i.Y)(m.az,{elementDescriptor:f.$z.checkoutFormLineItemsRoot,sx:e=>({paddingBlockStart:e.space.$4,paddingInline:e.space.$4}),children:(0,i.Y)(m.EY,{localizationKey:(0,h.G)("billing.checkout.downgradeNotice"),variant:"caption",colorScheme:"secondary"})}),(0,i.Y)(K,{})]})}),W=()=>{let{onSubscriptionComplete:e}=u(),{checkout:t}=(0,l.v$)(),r=(0,_.f0)();if("needs_confirmation"!==t.status)throw Error("Checkout not found");let i=async i=>{r.setLoading(),r.setError(void 0);let{error:o}=await t.confirm(i);o?(0,T.H4)(o,[],r.setError):e?.(),r.setIdle()};return{payWithExistingPaymentMethod:e=>(e.preventDefault(),i({paymentMethodId:new FormData(e.currentTarget).get(N)})),addPaymentMethodAndPay:e=>i(e),payWithTestCard:()=>i({gateway:"stripe",useTestCard:!0}),payWithoutPaymentMethod:e=>(e.preventDefault(),i({}))}},K=()=>{let{checkout:e}=(0,l.v$)(),{plan:t}=e,{isLoading:r}=(0,R.mu)();return t?r?(0,i.Y)(m.y$,{sx:{margin:"auto"}}):(0,i.Y)(U,{}):null},U=()=>{let{checkout:e}=(0,l.v$)(),{plan:t,isImmediatePlanChange:r,needsPaymentMethod:o}=e,{data:n}=(0,R.mu)(),[a,s]=(0,c.useState)(()=>n.length>0?"existing":"new");return t?(0,i.FD)(m.fv,{elementDescriptor:f.$z.checkoutFormElementsRoot,gap:4,sx:e=>({padding:e.space.$4}),children:[(0,i.Y)(i.FK,{children:n.length>0&&r&&o&&(0,i.FD)(S.I.Root,{"aria-label":"Payment method source",value:a,onChange:e=>s(e),size:"lg",fullWidth:!0,children:[(0,i.Y)(S.I.Button,{value:"existing",text:(0,h.G)("billing.paymentMethods__label")}),(0,i.Y)(S.I.Button,{value:"new",text:(0,h.G)("billing.addPaymentMethod__label")})]})}),o?"existing"===a?(0,i.Y)(Z,{paymentMethods:n}):"new"===a&&(0,i.Y)(j,{}):(0,i.Y)(V,{})]}):null},J=()=>{let{isLoading:e}=(0,_.f0)(),{payWithTestCard:t}=W();return(0,i.FD)(m.az,{sx:e=>({background:e.colors.$neutralAlpha50,padding:e.space.$2x5,borderRadius:e.radii.$md,borderWidth:e.borderWidths.$normal,borderStyle:e.borderStyles.$solid,borderColor:e.colors.$borderAlpha100,display:"flex",flexDirection:"column",rowGap:e.space.$2,position:"relative"}),children:[(0,i.Y)(m.az,{sx:e=>({position:"absolute",inset:0,background:`repeating-linear-gradient(-45deg,${e.colors.$warningAlpha100},${e.colors.$warningAlpha100} 6px,${e.colors.$warningAlpha150} 6px,${e.colors.$warningAlpha150} 12px)`,maskImage:"linear-gradient(transparent 20%, black)",pointerEvents:"none"})}),(0,i.FD)(m.so,{sx:e=>({alignItems:"center",justifyContent:"center",flexDirection:"column",rowGap:e.space.$2}),children:[(0,i.Y)(m.EY,{sx:e=>({color:e.colors.$warning500,fontWeight:e.fontWeights.$semibold}),localizationKey:(0,h.G)("billing.paymentMethod.dev.developmentMode")}),(0,i.Y)(m.$n,{type:"button",block:!0,variant:"bordered",localizationKey:(0,h.G)("userProfile.billingPage.paymentMethodsSection.payWithTestCardButton"),colorScheme:"secondary",isLoading:e,onClick:t})]})]})},O=()=>{let{checkout:e}=(0,l.v$)(),{status:t,freeTrialEndsAt:r,totals:i}=e;if("needs_initialization"===t)throw Error("Clerk: Invalid state");return r?(0,h.G)("billing.startFreeTrial"):i.totalDueNow.amount>0?(0,h.G)("billing.pay",{amount:`${i.totalDueNow.currencySymbol}${i.totalDueNow.amountFormatted}`}):(0,h.G)("billing.subscribe")},V=(0,_.dm)(()=>{let{for:e}=u(),{payWithoutPaymentMethod:t}=W(),r=(0,_.f0)();return(0,i.FD)(m.lV,{onSubmit:t,sx:X,children:[(0,i.Y)(F.Z.Alert,{children:r.error}),(0,i.Y)(H,{})]})}),j=(0,_.dm)(()=>{let{addPaymentMethodAndPay:e}=W(),t=O(),{checkout:r}=(0,l.v$)();return(0,i.FD)(A.bL,{onSuccess:e,checkout:r,children:[(0,i.Y)(M.W,{children:(0,i.Y)(J,{})}),(0,i.Y)(A.pr,{text:t})]})}),H=e=>{let t=(0,_.f0)(),r=O();return(0,i.Y)(m.$n,{type:"submit",colorScheme:"primary",size:"sm",textVariant:"buttonLarge",sx:{width:"100%"},isLoading:t.isLoading,localizationKey:r,...e})},X=e=>({display:"flex",flexDirection:"column",rowGap:e.space.$4}),Z=(0,_.dm)(({paymentMethods:e})=>{let{checkout:t}=(0,l.v$)(),{paymentMethod:r,isImmediatePlanChange:o,needsPaymentMethod:n}=t,{payWithExistingPaymentMethod:a}=W(),s=(0,_.f0)(),[d,u]=(0,c.useState)(r||e.find(e=>e.isDefault)),p=(0,c.useMemo)(()=>e.map(e=>{let t="card"!==e.paymentType?e.paymentType?`${P(e.paymentType)}`:"–":e.cardType?`${P(e.cardType)} ⋯ ${e.last4}`:"–";return{value:e.id,label:t}}),[e]);return(0,i.FD)(m.lV,{onSubmit:a,sx:X,children:[o&&n?(0,i.FD)(z.l6,{elementId:"paymentMethod",options:p,value:d?.id||null,onChange:t=>{u(e.find(e=>e.id===t.value))},portal:!0,children:[(0,i.Y)("input",{name:N,type:"hidden",value:d?.id}),(0,i.Y)(z.JC,{icon:B.A,sx:e=>({justifyContent:"space-between",backgroundColor:e.colors.$colorBackground}),children:d&&(0,i.Y)(I.O,{paymentMethod:d})}),(0,i.Y)(z.UL,{sx:e=>({paddingBlock:e.space.$1,color:e.colors.$colorForeground})})]}):(0,i.Y)("input",{name:N,type:"hidden",value:d?.id}),(0,i.Y)(F.Z.Alert,{children:s.error}),(0,i.Y)(H,{})]})}),q=()=>{let{checkout:e}=(0,l.v$)();return(0,c.useEffect)(()=>{e.start()},[]),null},Q=({children:e})=>{let{planId:t,planPeriod:r,for:o}=u();return(0,i.FD)(l.Rx,{for:o,planId:t,planPeriod:r,children:[(0,i.Y)(q,{}),e]})},ee=({children:e,name:t})=>{let{checkout:r}=(0,l.v$)();return r.status!==t?null:e},et=({children:e,status:t})=>{let{errors:r,fetchStatus:i}=(0,l.v$)();return(0,c.useMemo)(()=>{if(r.global){let e=r.global.flatMap(e=>{if(e.isClerkApiResponseError())return e.errors.map(e=>e.code)});return e.includes("missing_payer_email")?"missing_payer_email":e.includes("invalid_plan_change")?"invalid_plan_change":"generic_error"}return i},[i])!==t?null:e};var er=r(8036),ei=r(78),eo=r(2336);let en=()=>{let{errors:e}=(0,l.v$)(),{translateError:t}=(0,ei._)(),{t:r}=(0,ei._)();return(0,i.Y)(o.Drawer.Body,{children:(0,i.Y)(m.so,{align:"center",justify:"center",sx:e=>({height:"100%",padding:e.space.$4,fontSize:e.fontSizes.$md}),children:(0,i.Y)(er.F,{variant:"danger",colorScheme:"danger",children:e.global?t(e.global[0]):r((0,h.G)("unstable__errors.form_param_value_invalid"))})})})},ea=()=>{let{planPeriod:e}=u(),{errors:t}=(0,l.v$)(),r=t?.global?.filter(e=>e.isClerkApiResponseError()).flatMap(e=>e.errors).find(e=>"invalid_plan_change"===e.code);if(!r)return null;let{plan:n,isPlanUpgradePossible:a}=r?.meta||{};return(0,i.Y)(o.Drawer.Body,{children:(0,i.FD)(m.so,{gap:4,direction:"col",children:[(0,i.Y)(m.az,{elementDescriptor:f.$z.checkoutFormLineItemsRoot,sx:e=>({padding:e.space.$4,borderBottomWidth:e.borderWidths.$normal,borderBottomStyle:e.borderStyles.$solid,borderBottomColor:e.colors.$borderAlpha100}),children:(0,i.Y)(g.p.Root,{children:(0,i.FD)(g.p.Group,{children:[(0,i.Y)(g.p.Title,{title:n.name,description:"annual"===e?(0,h.G)("billing.billedAnnually"):void 0}),(0,i.Y)(g.p.Description,{prefix:"annual"===e?"x12":void 0,text:`${n.currency_symbol}${"month"===e?n.amount_formatted:n.annual_monthly_amount_formatted}`,suffix:(0,h.G)("billing.checkout.perMonth")})]})})}),(0,i.Y)(m.az,{sx:e=>({padding:e.space.$4}),children:(0,i.Y)(er.F,{variant:"info",colorScheme:"info",title:a?(0,h.G)("billing.cannotSubscribeMonthly"):(0,h.G)("billing.cannotSubscribeUnrecoverable")})})]})})},el=()=>{let{checkout:e}=(0,l.v$)(),{setIsOpen:t}=(0,o.g)();return(0,i.Y)(o.Drawer.Body,{children:(0,i.Y)(m.az,{sx:e=>({padding:e.space.$4}),children:(0,i.Y)(eo.v,{title:(0,h.G)("billing.checkout.emailForm.title"),subtitle:(0,h.G)("billing.checkout.emailForm.subtitle"),onSuccess:()=>void e.start(),onReset:()=>t(!1),disableAutoFocus:!0})})})},ec=e=>(0,i.Y)(p.n.Root,{flow:"checkout",children:(0,i.Y)(p.n.Part,{children:(0,i.Y)(n.m$.Provider,{value:e.for||"user",children:(0,i.Y)(d.Provider,{value:{componentName:"Checkout",...e},children:(0,i.FD)(o.Drawer.Content,{children:[(0,i.Y)(o.Drawer.Header,{title:(0,h.G)("billing.checkout.title")}),(0,i.FD)(Q,{children:[(0,i.FD)(ee,{name:"needs_initialization",children:[(0,i.Y)(et,{status:"fetching",children:(0,i.Y)(m.y$,{sx:{margin:"auto"}})}),(0,i.Y)(et,{status:"invalid_plan_change",children:(0,i.Y)(ea,{})}),(0,i.Y)(et,{status:"missing_payer_email",children:(0,i.Y)(el,{})}),(0,i.Y)(et,{status:"generic_error",children:(0,i.Y)(en,{})})]}),(0,i.Y)(ee,{name:"completed",children:(0,i.Y)(v,{})}),(0,i.Y)(ee,{name:"needs_confirmation",children:(0,i.Y)(L,{})})]})]})})})})})},3450:function(e,t,r){r.d(t,{pr:()=>M,L6:()=>T,Mo:()=>G,bL:()=>S});var i=r(4518),o=r(9361),n=r(5074),a=r(6088),l=r(3269),c=r(2454),s=r(1475),d=r(3549),u=r(8930),p=r(4468),h=r(6256),m=r(6580),g=r(78),y=r(2861),f=r(8272),$=r(8920);let b=e=>(0,i.Y)(f.az,{sx:[e=>({height:e.space.$2,width:"100%",borderRadius:e.radii.$md,background:e.colors.$neutralAlpha100}),e.sx]}),Y=()=>(0,i.Y)(b,{sx:e=>({height:e.space.$10,width:"100%"})}),D=e=>(0,i.Y)(f.so,{direction:"col",gap:2,children:e.children}),x=()=>(0,i.Y)(f.az,{"aria-label":"Loading...",sx:{position:"relative",minHeight:0,flex:1,overflowY:"auto"},children:(0,i.FD)(f.so,{direction:"col",gap:5,children:[(0,i.FD)(D,{children:[(0,i.Y)(b,{sx:e=>({height:e.space.$3,width:e.sizes.$24})}),(0,i.Y)(Y,{})]}),(0,i.FD)(f.xA,{columns:2,gap:4,children:[(0,i.FD)(D,{children:[(0,i.Y)(b,{sx:e=>({height:e.space.$3,width:e.sizes.$20})}),(0,i.Y)(Y,{})]}),(0,i.FD)(D,{children:[(0,i.Y)(b,{sx:e=>({height:e.space.$3,width:e.sizes.$24})}),(0,i.Y)(Y,{})]})]}),(0,i.FD)(D,{children:[(0,i.Y)(b,{sx:e=>({height:e.space.$3,width:e.sizes.$16})}),(0,i.Y)(Y,{})]}),(0,i.FD)(D,{children:[(0,i.Y)(b,{}),(0,i.Y)(b,{}),(0,i.Y)(b,{sx:{width:"66.666667%"}})]})]})}),[w,k]=(0,o.e3)("AddPaymentMethodRoot"),v=({children:e,checkout:t,...r})=>{var a;let l,c=(0,h.XX)(),s=(0,n.useRef)(null),{t:d}=(0,g._)(),[p,f]=(0,n.useState)(void 0),[$,b]=(0,n.useState)(void 0),[Y,D]=(0,n.useState)(void 0),x=(a=s.current,l=(0,m.K)().parsedInternalTheme,(0,n.useMemo)(()=>{if(!a)return;let{colors:e,fontWeights:t,fontSizes:r,radii:i,space:o}=l;return{colorPrimary:(0,u.G3)(a,e.$primary500,e.$colorBackground),colorBackground:(0,u.G3)(a,e.$colorInput,e.$colorBackground),colorText:(0,u.G3)(a,e.$colorForeground,e.$colorBackground),colorTextSecondary:(0,u.G3)(a,e.$colorMutedForeground,e.$colorBackground),colorSuccess:(0,u.G3)(a,e.$success500,e.$colorBackground),colorDanger:(0,u.G3)(a,e.$danger500,e.$colorBackground),colorWarning:(0,u.G3)(a,e.$warning500,e.$colorBackground),fontWeightNormal:(0,u.yJ)(a,"font-weight",t.$normal.toString()),fontWeightMedium:(0,u.yJ)(a,"font-weight",t.$medium.toString()),fontWeightBold:(0,u.yJ)(a,"font-weight",t.$bold.toString()),fontSizeXl:(0,u.yJ)(a,"font-size",r.$xl),fontSizeLg:(0,u.yJ)(a,"font-size",r.$lg),fontSizeSm:(0,u.yJ)(a,"font-size",r.$md),fontSizeXs:(0,u.yJ)(a,"font-size",r.$sm),borderRadius:(0,u.yJ)(a,"border-radius",i.$lg),spacingUnit:(0,u.yJ)(a,"padding",o.$1)}},[l,a]));return(0,i.FD)(w.Provider,{value:{value:{headerTitle:p,headerSubtitle:$,submitLabel:Y,setHeaderTitle:f,setHeaderSubtitle:b,setSubmitLabel:D,checkout:t,...r}},children:[(0,i.Y)("div",{ref:s,style:{display:"none"}}),(0,i.Y)(o.Tn,{checkout:t,for:c,stripeAppearance:x,paymentDescription:d((0,y.G)(t?.planPeriod==="month"?"billing.paymentMethod.applePayDescription.monthly":"billing.paymentMethod.applePayDescription.annual")),children:e})]})},F=e=>{let{isProviderReady:t}=(0,o.Jl)();return t?null:e.children},_=e=>{let{isProviderReady:t}=(0,o.Jl)();return t?(0,i.Y)(i.FK,{children:e.children}):null},S=e=>{let{children:t,...r}=e;return(0,i.FD)(v,{...r,children:[(0,i.Y)(F,{children:(0,i.Y)(f.so,{direction:"row",align:"center",justify:"center",sx:e=>({width:"100%",minHeight:e.sizes.$60}),children:(0,i.Y)(f.y$,{size:"lg",colorScheme:"primary",elementDescriptor:$.$z.spinner})})}),(0,i.Y)(_,{children:(0,i.Y)(R,{children:t})})]})},z=(e,t)=>{(0,n.useRef)(()=>{t(e)}),(0,n.useEffect)(()=>{t(e)},[e,t])},G=({text:e})=>{let{setHeaderTitle:t}=k();return z(e,t),null},T=({text:e})=>{let{setHeaderSubtitle:t}=k();return z(e,t),null},M=({text:e})=>{let{setSubmitLabel:t}=k();return z(e,t),null},R=({children:e})=>{let{headerTitle:t,headerSubtitle:r,submitLabel:n,checkout:u,onSuccess:m,cancelAction:g}=k(),f=(0,l.f0)(),$=(0,h.N7)(),{isFormReady:b,submit:Y,reset:D}=(0,o.Jl)(),w=async e=>{e.preventDefault(),f.setLoading(),f.setError(void 0);let{data:t,error:r}=await Y();if(!r)try{await m(t)}catch(e){(0,p.H4)(e,[],f.setError)}finally{f.setIdle(),D()}};return(0,i.Y)(d.M,{headerTitle:t,headerSubtitle:r,children:(0,i.FD)(c.l.Root,{onSubmit:w,sx:e=>({display:"flex",flexDirection:"column",rowGap:e.space.$3}),children:[e,(0,i.Y)(o.cl,{fallback:(0,i.Y)(x,{})}),(0,i.Y)(a.Z.Alert,{children:f.error}),(0,i.Y)(s.G,{isDisabled:!b,submitLabel:n??(0,y.G)(`${$}.billingPage.paymentMethodsSection.formButtonPrimary__add`),onReset:g,hideReset:!g,sx:{flex:u?1:void 0}})]})})}},3369:function(e,t,r){r.d(t,{O:()=>s});var i=r(4518),o=r(8272),n=r(8920),a=r(2861),l=r(4967),c=r(5203);let s=({paymentMethod:e})=>(0,i.FD)(o.so,{sx:{overflow:"hidden"},gap:2,align:"baseline",elementDescriptor:n.$z.paymentMethodRow,children:[(0,i.Y)(o.In,{icon:"card"===e.paymentType?l.A:c.A,sx:e=>({alignSelf:"center",color:e.colors.$colorMutedForeground}),elementDescriptor:n.$z.paymentMethodRowIcon}),(0,i.Y)(o.EY,{sx:e=>({color:e.colors.$colorForeground,textTransform:"capitalize"}),truncate:!0,elementDescriptor:n.$z.paymentMethodRowType,children:"card"===e.paymentType?e.cardType:e.paymentType}),(0,i.Y)(o.EY,{sx:e=>({color:e.colors.$colorMutedForeground}),variant:"caption",truncate:!0,elementDescriptor:n.$z.paymentMethodRowValue,children:"card"===e.paymentType?`⋯ ${e.last4}`:null}),e.isDefault&&(0,i.Y)(o.Ex,{elementDescriptor:n.$z.paymentMethodRowBadge,elementId:n.$z.paymentMethodRowBadge.setId("default"),localizationKey:(0,a.G)("badge__default")}),"expired"===e.status&&(0,i.Y)(o.Ex,{elementDescriptor:n.$z.paymentMethodRowBadge,elementId:n.$z.paymentMethodRowBadge.setId("expired"),colorScheme:"danger",localizationKey:(0,a.G)("badge__expired")})]})},3679:function(e,t,r){r.d(t,{V:()=>c});var i=r(4518),o=r(8272),n=r(2861);let a={active:"badge__activePlan",upcoming:"badge__upcomingPlan",past_due:"badge__pastDuePlan",free_trial:"badge__freeTrial"},l={active:"secondary",upcoming:"primary",past_due:"warning",free_trial:"secondary"},c=({subscription:e,elementDescriptor:t})=>(0,i.Y)(o.Ex,{elementDescriptor:t,colorScheme:l[e.status],localizationKey:(0,n.G)(a[e.status])})}}]);

package/dist/common/EmailLinkVerify.js CHANGED Viewed

@@ -3,9 +3,9 @@ import { useCoreSignUp } from "../contexts/CoreClientContext.js";
 import { EmailLinkStatusCard } from "./EmailLinkStatusCard.js";
 import { sleep } from "../utils/sleep.js";
 import React from "react";
+import { useClerk } from "@clerk/shared/react";
 import { jsx } from "@emotion/react/jsx-runtime";
 import { EmailLinkErrorCodeStatus, isEmailLinkError } from "@clerk/shared/error";
-import { useClerk } from "@clerk/shared/react";
 import { completeSignUpFlow } from "@clerk/shared/internal/clerk-js/completeSignUpFlow";
 //#region src/common/EmailLinkVerify.tsx

package/dist/common/Gate.js CHANGED Viewed

@@ -1,7 +1,7 @@
 import { useRouter } from "../router/RouteContext.js";
 import React, { useEffect } from "react";
-import { Fragment as Fragment$1, jsx } from "@emotion/react/jsx-runtime";
 import { useSession } from "@clerk/shared/react";
+import { Fragment as Fragment$1, jsx } from "@emotion/react/jsx-runtime";
 //#region src/common/Gate.tsx
 /**

package/dist/common/RemoveResourceForm.js CHANGED Viewed

@@ -5,8 +5,8 @@ import { handleError } from "../utils/errorHandler.js";
 import { Form } from "../elements/Form.js";
 import { FormButtons } from "../elements/FormButtons.js";
 import { FormContainer } from "../elements/FormContainer.js";
-import { jsx, jsxs } from "@emotion/react/jsx-runtime";
 import { useReverification } from "@clerk/shared/react";
+import { jsx, jsxs } from "@emotion/react/jsx-runtime";
 //#region src/common/RemoveResourceForm.tsx
 const RemoveResourceForm = withCardStateProvider((props) => {

package/dist/common/SSOCallback.js CHANGED Viewed

@@ -6,8 +6,8 @@ import { handleError } from "../utils/errorHandler.js";
 import { CaptchaElement } from "../elements/CaptchaElement.js";
 import { LoadingCardContainer } from "../elements/LoadingCard.js";
 import React from "react";
-import { jsx, jsxs } from "@emotion/react/jsx-runtime";
 import { useClerk } from "@clerk/shared/react";
+import { jsx, jsxs } from "@emotion/react/jsx-runtime";
 //#region src/common/SSOCallback.tsx
 const SSOCallback = withCardStateProvider((props) => {

package/dist/common/withRedirect.js CHANGED Viewed

@@ -4,8 +4,8 @@ import { useEnvironment } from "../contexts/EnvironmentContext.js";
 import { useSignInContext } from "../contexts/components/SignIn.js";
 import { useSignUpContext } from "../contexts/components/SignUp.js";
 import React from "react";
-import { jsx } from "@emotion/react/jsx-runtime";
 import { useClerk } from "@clerk/shared/react";
+import { jsx } from "@emotion/react/jsx-runtime";
 import { isSignedInAndSingleSessionModeEnabled } from "@clerk/shared/internal/clerk-js/componentGuards";
 import { warnings } from "@clerk/shared/internal/clerk-js/warnings";
 import { isDevelopmentFromPublishableKey } from "@clerk/shared/keys";

package/dist/components/APIKeys/APIKeys.js CHANGED Viewed

@@ -17,10 +17,10 @@ import { APIKeysTable } from "./ApiKeysTable.js";
 import { CreateAPIKeyForm } from "./CreateAPIKeyForm.js";
 import { useAPIKeysPagination } from "./utils.js";
 import { lazy, useState } from "react";
+import { __experimental_useAPIKeys, useClerk, useOrganizationContext, useUser } from "@clerk/shared/react";
 import { jsx, jsxs } from "@emotion/react/jsx-runtime";
 import { isClerkAPIResponseError } from "@clerk/shared/error";
 import { isOrganizationId } from "@clerk/shared/internal/clerk-js/organization";
-import { __experimental_useAPIKeys, useClerk, useOrganizationContext, useUser } from "@clerk/shared/react";
 //#region src/components/APIKeys/APIKeys.tsx
 const RevokeAPIKeyConfirmationModal = lazy(() => import(

package/dist/components/APIKeys/RevokeAPIKeyConfirmationModal.js CHANGED Viewed

@@ -7,8 +7,8 @@ import { Form } from "../../elements/Form.js";
 import { FormButtons } from "../../elements/FormButtons.js";
 import { FormContainer } from "../../elements/FormContainer.js";
 import { APIKeyModal } from "./APIKeyModal.js";
-import { jsx, jsxs } from "@emotion/react/jsx-runtime";
 import { useClerk } from "@clerk/shared/react";
+import { jsx, jsxs } from "@emotion/react/jsx-runtime";
 //#region src/components/APIKeys/RevokeAPIKeyConfirmationModal.tsx
 const RevokeAPIKeyConfirmationModal = ({ isOpen, onOpen, onClose, apiKeyID, apiKeyName, onRevokeSuccess, modalRoot }) => {

package/dist/components/Checkout/CheckoutComplete.js CHANGED Viewed

@@ -10,8 +10,8 @@ import { Drawer, useDrawerContext } from "../../elements/Drawer.js";
 import { LineItems } from "../../elements/LineItems.js";
 import { formatDate } from "../../utils/formatDate.js";
 import { useEffect, useId, useRef, useState } from "react";
-import { Fragment as Fragment$1, jsx, jsxs } from "@emotion/react/jsx-runtime";
 import { __experimental_useCheckout } from "@clerk/shared/react";
+import { Fragment as Fragment$1, jsx, jsxs } from "@emotion/react/jsx-runtime";
 //#region src/components/Checkout/CheckoutComplete.tsx
 const capitalize = (name) => name[0].toUpperCase() + name.slice(1);

package/dist/components/Checkout/CheckoutForm.js CHANGED Viewed

@@ -18,8 +18,8 @@ import { FormButton, Root } from "../PaymentMethods/AddPaymentMethod.js";
 import { PaymentMethodRow } from "../PaymentMethods/PaymentMethodRow.js";
 import { SubscriptionBadge } from "../Subscriptions/badge.js";
 import { useMemo, useState } from "react";
-import { Fragment as Fragment$1, jsx, jsxs } from "@emotion/react/jsx-runtime";
 import { __experimental_useCheckout } from "@clerk/shared/react";
+import { Fragment as Fragment$1, jsx, jsxs } from "@emotion/react/jsx-runtime";
 //#region src/components/Checkout/CheckoutForm.tsx
 const capitalize = (name) => name[0].toUpperCase() + name.slice(1);

package/dist/components/Checkout/CheckoutPage.js CHANGED Viewed

@@ -1,7 +1,7 @@
 import { useCheckoutContext } from "../../contexts/components/Checkout.js";
 import { useEffect, useMemo } from "react";
-import { jsx, jsxs } from "@emotion/react/jsx-runtime";
 import { __experimental_CheckoutProvider, __experimental_useCheckout } from "@clerk/shared/react";
+import { jsx, jsxs } from "@emotion/react/jsx-runtime";
 //#region src/components/Checkout/CheckoutPage.tsx
 const Initiator = () => {

package/dist/components/Checkout/parts.js CHANGED Viewed

@@ -7,8 +7,8 @@ import { Alert } from "../../elements/Alert.js";
 import { Drawer, useDrawerContext } from "../../elements/Drawer.js";
 import { LineItems } from "../../elements/LineItems.js";
 import { EmailForm } from "../UserProfile/EmailForm.js";
-import { jsx, jsxs } from "@emotion/react/jsx-runtime";
 import { __experimental_useCheckout } from "@clerk/shared/react";
+import { jsx, jsxs } from "@emotion/react/jsx-runtime";
 //#region src/components/Checkout/parts.tsx
 const GenericError = () => {

package/dist/components/CreateOrganization/CreateOrganizationForm.js CHANGED Viewed

@@ -18,8 +18,8 @@ import { InvitationsSentMessage } from "../OrganizationProfile/InviteMembersScre
 import { OrganizationProfileAvatarUploader } from "../OrganizationProfile/OrganizationProfileAvatarUploader.js";
 import { organizationListParams } from "../OrganizationSwitcher/utils.js";
 import React from "react";
-import { jsx, jsxs } from "@emotion/react/jsx-runtime";
 import { useOrganization, useOrganizationList } from "@clerk/shared/react";
+import { jsx, jsxs } from "@emotion/react/jsx-runtime";
 //#region src/components/CreateOrganization/CreateOrganizationForm.tsx
 const CreateOrganizationForm = withCardStateProvider((props) => {

package/dist/components/CreateOrganization/CreateOrganizationPage.js CHANGED Viewed

@@ -4,8 +4,8 @@ import { useCardState, withCardStateProvider } from "../../elements/contexts/ind
 import { useDevMode } from "../../hooks/useDevMode.js";
 import { Card } from "../../elements/Card/index.js";
 import { CreateOrganizationForm } from "./CreateOrganizationForm.js";
-import { jsx, jsxs } from "@emotion/react/jsx-runtime";
 import { useClerk } from "@clerk/shared/react";
+import { jsx, jsxs } from "@emotion/react/jsx-runtime";
 //#region src/components/CreateOrganization/CreateOrganizationPage.tsx
 const CreateOrganizationPage = withCardStateProvider(() => {

package/dist/components/ImpersonationFab/index.js CHANGED Viewed

@@ -11,8 +11,8 @@ import { Col, Flex, Icon, Link, Text } from "../../customizables/index.js";
 import { Portal } from "../../elements/Portal.js";
 import { useMultipleSessions } from "../../hooks/useMultipleSessions.js";
 import React, { useEffect, useRef } from "react";
-import { jsx, jsxs } from "@emotion/react/jsx-runtime";
 import { useClerk, useSession, useUser } from "@clerk/shared/react";
+import { jsx, jsxs } from "@emotion/react/jsx-runtime";
 import { getFullName, getIdentifier } from "@clerk/shared/internal/clerk-js/user";
 //#region src/components/ImpersonationFab/index.tsx

package/dist/components/OAuthConsent/OAuthConsent.js CHANGED Viewed

@@ -14,8 +14,8 @@ import { Card } from "../../elements/Card/index.js";
 import { Header } from "../../elements/Header.js";
 import { Tooltip } from "../../elements/Tooltip.js";
 import { useState } from "react";
-import { jsx, jsxs } from "@emotion/react/jsx-runtime";
 import { useUser } from "@clerk/shared/react";
+import { jsx, jsxs } from "@emotion/react/jsx-runtime";
 //#region src/components/OAuthConsent/OAuthConsent.tsx
 function OAuthConsentInternal() {

package/dist/components/OrganizationList/UserInvitationList.js CHANGED Viewed

@@ -6,8 +6,8 @@ import { PreviewListItem, PreviewListItemButton } from "./shared.js";
 import { MembershipPreview } from "./UserMembershipList.js";
 import { organizationListParams } from "./utils.js";
 import { useState } from "react";
-import { jsx } from "@emotion/react/jsx-runtime";
 import { useClerk, useOrganizationList } from "@clerk/shared/react";
+import { jsx } from "@emotion/react/jsx-runtime";
 //#region src/components/OrganizationList/UserInvitationList.tsx
 const AcceptRejectInvitationButtons = (props) => {

package/dist/components/OrganizationList/UserMembershipList.js CHANGED Viewed

@@ -7,9 +7,9 @@ import { OrganizationPreview } from "../../elements/OrganizationPreview.js";
 import { sharedMainIdentifierSx } from "../../common/organizations/OrganizationPreview.js";
 import { OrganizationListPreviewButton } from "./shared.js";
 import { PersonalWorkspacePreview } from "../../elements/PersonalWorkspacePreview.js";
+import { useOrganizationList, useUser } from "@clerk/shared/react";
 import { jsx } from "@emotion/react/jsx-runtime";
 import { isClerkAPIResponseError } from "@clerk/shared/error";
-import { useOrganizationList, useUser } from "@clerk/shared/react";
 //#region src/components/OrganizationList/UserMembershipList.tsx
 const MembershipPreview = (props) => {

package/dist/components/OrganizationList/UserSuggestionList.js CHANGED Viewed

@@ -5,8 +5,8 @@ import { handleError } from "../../utils/errorHandler.js";
 import { populateCacheUpdateItem } from "../OrganizationSwitcher/utils.js";
 import { PreviewListItem, PreviewListItemButton } from "./shared.js";
 import { organizationListParams } from "./utils.js";
-import { jsx } from "@emotion/react/jsx-runtime";
 import { useOrganizationList } from "@clerk/shared/react";
+import { jsx } from "@emotion/react/jsx-runtime";
 //#region src/components/OrganizationList/UserSuggestionList.tsx
 const AcceptRejectInvitationButtons = (props) => {

package/dist/components/OrganizationProfile/ActionConfirmationPage.js CHANGED Viewed

@@ -10,8 +10,8 @@ import { FormContainer } from "../../elements/FormContainer.js";
 import { Wizard, useWizard } from "../../common/Wizard.js";
 import { SuccessPage } from "../../elements/SuccessPage.js";
 import { organizationListParams } from "../OrganizationSwitcher/utils.js";
-import { jsx, jsxs } from "@emotion/react/jsx-runtime";
 import { useOrganization, useOrganizationList, useUser } from "@clerk/shared/react";
+import { jsx, jsxs } from "@emotion/react/jsx-runtime";
 //#region src/components/OrganizationProfile/ActionConfirmationPage.tsx
 const useLeaveWithRevalidations = (leavePromise) => {

package/dist/components/OrganizationProfile/ActiveMembersList.js CHANGED Viewed

@@ -8,8 +8,8 @@ import { ThreeDotsMenu } from "../../elements/ThreeDotsMenu.js";
 import { useFetchRoles, useLocalizeCustomRoles } from "../../hooks/useFetchRoles.js";
 import { DataTable, RoleSelect, RowContainer } from "./MemberListTable.js";
 import { UserPreview } from "../../elements/UserPreview.js";
-import { jsx, jsxs } from "@emotion/react/jsx-runtime";
 import { useOrganization, useUser } from "@clerk/shared/react";
+import { jsx, jsxs } from "@emotion/react/jsx-runtime";
 //#region src/components/OrganizationProfile/ActiveMembersList.tsx
 const ActiveMembersList = ({ memberships, pageSize }) => {

package/dist/components/OrganizationProfile/AddDomainForm.js CHANGED Viewed

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