clerk · dstaley · Mar 13, 2026 · Mar 13, 2026 · Mar 13, 2026 · Mar 13, 2026
diff --git a/.changeset/clean-views-admire.md b/.changeset/clean-views-admire.md
@@ -0,0 +1,5 @@
+---
+'@clerk/ui': patch
+---
+
+Fix minor internal issues with TypeScript types.
diff --git a/packages/ui/package.json b/packages/ui/package.json
@@ -69,7 +69,7 @@
     "register"
   ],
   "scripts": {
-    "build": "pnpm build:umd && pnpm build:esm && pnpm check:no-rhc",
+    "build": "pnpm build:umd && pnpm build:esm && pnpm check:no-rhc && pnpm type-check",
     "build:analyze": "rspack build --config rspack.config.js --env production --env analyze --analyze",
     "build:esm": "tsdown",
     "build:rsdoctor": "RSDOCTOR=true rspack build --config rspack.config.js --env production",

diff --git a/packages/ui/src/Components.tsx b/packages/ui/src/Components.tsx
@@ -8,14 +8,18 @@ import type {
   __internal_UserVerificationProps,
   Clerk,
   ClerkOptions,
-  CreateOrganizationProps,
+  CreateOrganizationModalProps,
   EnvironmentResource,
   GoogleOneTapProps,
-  OrganizationProfileProps,
+  OrganizationProfileModalProps,
   SignInProps,
+  SignInModalProps,
   SignUpProps,
+  SignUpModalProps,
+  UserProfileModalProps,
   UserProfileProps,
   WaitlistProps,
+  WaitlistModalProps,
 } from '@clerk/shared/types';
 import { createDeferredPromise } from '@clerk/shared/utils';
 import React, { Suspense, useCallback, useRef, useSyncExternalStore } from 'react';
@@ -161,16 +165,16 @@ interface ComponentsState {
   appearance: Appearance | undefined;
   options: ClerkOptions | undefined;
   googleOneTapModal: null | GoogleOneTapProps;
-  signInModal: null | SignInProps;
-  signUpModal: null | SignUpProps;
-  userProfileModal: null | UserProfileProps;
+  signInModal: null | SignInModalProps;
+  signUpModal: null | SignUpModalProps;
+  userProfileModal: null | UserProfileModalProps;
   userVerificationModal: null | __internal_UserVerificationProps;
-  organizationProfileModal: null | OrganizationProfileProps;
-  createOrganizationModal: null | CreateOrganizationProps;
+  organizationProfileModal: null | OrganizationProfileModalProps;
+  createOrganizationModal: null | CreateOrganizationModalProps;
   enableOrganizationsPromptModal: null | __internal_EnableOrganizationsPromptProps;
   blankCaptchaModal: null;
   organizationSwitcherPrefetch: boolean;
-  waitlistModal: null | WaitlistProps;
+  waitlistModal: null | WaitlistModalProps;
   checkoutDrawer: {
     open: false;
     props: null | __internal_CheckoutProps;
@@ -502,7 +506,7 @@ const Components = (props: ComponentsProps) => {
       onClose={() => componentsControls.closeModal('signIn')}
       onExternalNavigate={() => componentsControls.closeModal('signIn')}
       startPath={buildVirtualRouterUrl({ base: '/sign-in', path: urlStateParam?.path })}
-      getContainer={signInModal?.getContainer}
+      getContainer={signInModal?.getContainer ?? (() => null)}
       componentName={'SignInModal'}
     >
       <SignInModal {...signInModal} />
@@ -520,7 +524,7 @@ const Components = (props: ComponentsProps) => {
       onClose={() => componentsControls.closeModal('signUp')}
       onExternalNavigate={() => componentsControls.closeModal('signUp')}
       startPath={buildVirtualRouterUrl({ base: '/sign-up', path: urlStateParam?.path })}
-      getContainer={signUpModal?.getContainer}
+      getContainer={signUpModal?.getContainer ?? (() => null)}
       componentName={'SignUpModal'}
     >
       <SignInModal {...disambiguateRedirectOptions(signUpModal, 'signup')} />
@@ -541,7 +545,7 @@ const Components = (props: ComponentsProps) => {
         base: '/user',
         path: userProfileModal?.__experimental_startPath || urlStateParam?.path,
       })}
-      getContainer={userProfileModal?.getContainer}
+      getContainer={userProfileModal?.getContainer ?? (() => null)}
       componentName={'UserProfileModal'}
       modalContainerSx={{ alignItems: 'center' }}
       modalContentSx={t => ({ height: `min(${t.sizes.$176}, calc(100% - ${t.sizes.$12}))`, margin: 0 })}
@@ -559,7 +563,7 @@ const Components = (props: ComponentsProps) => {
       onClose={() => componentsControls.closeModal('userVerification')}
       onExternalNavigate={() => componentsControls.closeModal('userVerification')}
       startPath={buildVirtualRouterUrl({ base: '/user-verification', path: urlStateParam?.path })}
-      getContainer={userVerificationModal?.getContainer}
+      getContainer={userVerificationModal?.getContainer ?? (() => null)}
       componentName={'UserVerificationModal'}
       modalContainerSx={{ alignItems: 'center' }}
     >
@@ -579,7 +583,7 @@ const Components = (props: ComponentsProps) => {
         base: '/organizationProfile',
         path: organizationProfileModal?.__experimental_startPath || urlStateParam?.path,
       })}
-      getContainer={organizationProfileModal?.getContainer}
+      getContainer={organizationProfileModal?.getContainer ?? (() => null)}
       componentName={'OrganizationProfileModal'}
       modalContainerSx={{ alignItems: 'center' }}
       modalContentSx={t => ({ height: `min(${t.sizes.$176}, calc(100% - ${t.sizes.$12}))`, margin: 0 })}
@@ -597,7 +601,7 @@ const Components = (props: ComponentsProps) => {
       onClose={() => componentsControls.closeModal('createOrganization')}
       onExternalNavigate={() => componentsControls.closeModal('createOrganization')}
       startPath={buildVirtualRouterUrl({ base: '/createOrganization', path: urlStateParam?.path })}
-      getContainer={createOrganizationModal?.getContainer}
+      getContainer={createOrganizationModal?.getContainer ?? (() => null)}
       componentName={'CreateOrganizationModal'}
       modalContainerSx={{ alignItems: 'center' }}
       modalContentSx={t => ({ height: `min(${t.sizes.$120}, calc(100% - ${t.sizes.$12}))`, margin: 0 })}
@@ -615,7 +619,7 @@ const Components = (props: ComponentsProps) => {
       onClose={() => componentsControls.closeModal('waitlist')}
       onExternalNavigate={() => componentsControls.closeModal('waitlist')}
       startPath={buildVirtualRouterUrl({ base: '/waitlist', path: urlStateParam?.path })}
-      getContainer={waitlistModal?.getContainer}
+      getContainer={waitlistModal?.getContainer ?? (() => null)}
       componentName={'WaitlistModal'}
     >
       <WaitlistModal {...waitlistModal} />
@@ -638,6 +642,7 @@ const Components = (props: ComponentsProps) => {
       canCloseModal={false}
       modalId={'cl-modal-captcha-wrapper'}
       modalStyle={{ visibility: 'hidden', pointerEvents: 'none' }}
+      getContainer={() => null}
     >
       <BlankCaptchaModal />
     </LazyModalRenderer>

diff --git a/packages/ui/src/components/Checkout/CheckoutForm.tsx b/packages/ui/src/components/Checkout/CheckoutForm.tsx
@@ -42,7 +42,8 @@ export const CheckoutForm = withCardStateProvider(() => {
 
   const fee =
     planPeriod === 'month'
-      ? plan.fee
+      ? // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+        plan.fee!
       : // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
         plan.annualMonthlyFee!;
 

diff --git a/packages/ui/src/components/PaymentAttempts/PaymentAttemptPage.tsx b/packages/ui/src/components/PaymentAttempts/PaymentAttemptPage.tsx
@@ -205,7 +205,8 @@ function PaymentAttemptBody({ subscriptionItem }: { subscriptionItem: BillingSub
 
   const fee =
     subscriptionItem.planPeriod === 'month'
-      ? subscriptionItem.plan.fee
+      ? // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+        subscriptionItem.plan.fee!
       : // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
         subscriptionItem.plan.annualMonthlyFee!;
 

diff --git a/packages/ui/src/components/PricingTable/PricingTableMatrix.tsx b/packages/ui/src/components/PricingTable/PricingTableMatrix.tsx
@@ -157,10 +157,12 @@ export function PricingTableMatrix({
               {plans.map(plan => {
                 const highlight = plan.slug === highlightedPlan;
                 const planFee = !plan.annualMonthlyFee
-                  ? plan.fee
+                  ? // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+                    plan.fee!
                   : planPeriod === 'annual'
                     ? plan.annualMonthlyFee
-                    : plan.fee;
+                    : // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+                      plan.fee!;
 
                 return (
                   <Box

diff --git a/.../ui/src/components/SessionTasks/tasks/TaskChooseOrganization/CreateOrganizationScreen.tsx b/.../ui/src/components/SessionTasks/tasks/TaskChooseOrganization/CreateOrganizationScreen.tsx
@@ -26,7 +26,7 @@ import { OrganizationCreationDefaultsAlert } from './OrganizationCreationDefault
 
 type CreateOrganizationScreenProps = {
   onCancel?: () => void;
-  organizationCreationDefaults?: OrganizationCreationDefaultsResource;
+  organizationCreationDefaults?: OrganizationCreationDefaultsResource | null;
 };
 
 export const CreateOrganizationScreen = (props: CreateOrganizationScreenProps) => {

diff --git a/...omponents/SessionTasks/tasks/TaskChooseOrganization/OrganizationCreationDefaultsAlert.tsx b/...omponents/SessionTasks/tasks/TaskChooseOrganization/OrganizationCreationDefaultsAlert.tsx
@@ -6,7 +6,7 @@ import { localizationKeys } from '@/localization';
 export function OrganizationCreationDefaultsAlert({
   organizationCreationDefaults,
 }: {
-  organizationCreationDefaults?: OrganizationCreationDefaultsResource;
+  organizationCreationDefaults?: OrganizationCreationDefaultsResource | null;
 }) {
   const localizationKey = advisoryToLocalizationKey(organizationCreationDefaults?.advisory);
   if (!localizationKey) {

diff --git a/packages/ui/src/components/SessionTasks/tasks/TaskSetupMfa/SetupMfaStartScreen.tsx b/packages/ui/src/components/SessionTasks/tasks/TaskSetupMfa/SetupMfaStartScreen.tsx
@@ -60,7 +60,7 @@ export const SetupMfaStartScreen = withCardStateProvider((props: SetupMfaStartSc
           })}
         >
           {availableMethods.map(method => {
-            const methodConfig = METHOD_CONFIG[method] ?? null;
+            const methodConfig = METHOD_CONFIG[method as keyof typeof METHOD_CONFIG] ?? null;
 
             if (!methodConfig) {
               return null;

diff --git a/packages/ui/src/components/SubscriptionDetails/index.tsx b/packages/ui/src/components/SubscriptionDetails/index.tsx
@@ -415,8 +415,10 @@ const SubscriptionCardActions = ({ subscription }: { subscription: BillingSubscr
                     currency: subscription.plan.annualFee!.currencySymbol,
                   })
                 : localizationKeys('billing.switchToMonthlyWithPrice', {
-                    price: normalizeFormatted(subscription.plan.fee.amountFormatted),
-                    currency: subscription.plan.fee.currencySymbol,
+                    // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+                    price: normalizeFormatted(subscription.plan.fee!.amountFormatted),
+                    // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+                    currency: subscription.plan.fee!.currencySymbol,
                   }),
             onClick: () => {
               openCheckout({
@@ -508,7 +510,8 @@ const SubscriptionCard = ({ subscription }: { subscription: BillingSubscriptionI
 
   const fee =
     subscription.planPeriod === 'month'
-      ? subscription.plan.fee
+      ? // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+        subscription.plan.fee!
       : // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
         subscription.plan.annualFee!;
 

diff --git a/packages/ui/src/components/Subscriptions/SubscriptionsList.tsx b/packages/ui/src/components/Subscriptions/SubscriptionsList.tsx
@@ -154,7 +154,7 @@ export function SubscriptionsList({
 
 function SubscriptionRow({ subscription, length }: { subscription: BillingSubscriptionItemResource; length: number }) {
   // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-  const fee = subscription.planPeriod === 'annual' ? subscription.plan.annualFee! : subscription.plan.fee;
+  const fee = subscription.planPeriod === 'annual' ? subscription.plan.annualFee! : subscription.plan.fee!;
   const { captionForSubscription } = usePlansContext();
 
   const feeFormatted = useMemo(() => {

diff --git a/packages/ui/src/internal/index.ts b/packages/ui/src/internal/index.ts
@@ -1,7 +1,5 @@
 import type { ClerkUIConstructor } from '@clerk/shared/ui';
 
-import type { Appearance } from './appearance';
-
 export type { ComponentControls, MountComponentRenderer } from '../Components';
 export type { WithInternalRouting } from './routing';
 

diff --git a/packages/ui/tsconfig.json b/packages/ui/tsconfig.json
@@ -29,6 +29,14 @@
       "@/ui*": ["./src/*"]
     }
   },
-  "exclude": ["node_modules", "**/*.test.ts", "**/*.test.tsx", "**/*.spec.ts", "**/*.spec.tsx", "**/__tests__/**"],
+  "exclude": [
+    "node_modules",
+    "**/*.test.ts",
+    "**/*.test.tsx",
+    "**/*.spec.ts",
+    "**/*.spec.tsx",
+    "**/__tests__/**",
+    "./src/test/**"
+  ],
   "include": ["src", "src/global.d.ts"]
 }