Rename Expo and React packages

docs/_partials/billing/add-new-payment-method.mdx

@@ -87,8 +87,8 @@ The following example demonstrates how to create a billing page where a user can
 <If sdk="react">
   <CodeBlockTabs options={["<UserBillingPage />", "<AddPaymentMethodForm />"]}>
     ```tsx {{ filename: 'src/pages/user/billing/page.tsx' }}
-    import { ClerkLoaded } from '@clerk/clerk-react'
-    import { PaymentElementProvider } from '@clerk/clerk-react/experimental'
+    import { ClerkLoaded } from '@clerk/react'
+    import { PaymentElementProvider } from '@clerk/react/experimental'
     import { AddPaymentMethodForm } from './AddPaymentMethodForm'
 
     export default function Page() {
@@ -107,8 +107,8 @@ The following example demonstrates how to create a billing page where a user can
     ```
 
     ```tsx {{ filename: 'src/pages/user/billing/AddPaymentMethodForm.tsx', collapsible: true }}
-    import { useUser } from '@clerk/clerk-react'
-    import { usePaymentElement, PaymentElement } from '@clerk/clerk-react/experimental'
+    import { useUser } from '@clerk/react'
+    import { usePaymentElement, PaymentElement } from '@clerk/react/experimental'
     import { useState } from 'react'
 
     export function AddPaymentMethodForm() {

docs/_partials/billing/checking-feature-using-has-function.mdx

@@ -120,7 +120,7 @@
 
 <If sdk="react">
   ```tsx {{ filename: 'src/pages/premium-content.tsx' }}
-  import { useAuth } from '@clerk/clerk-react'
+  import { useAuth } from '@clerk/react'
 
   export default function PremiumContentPage() {
     const { isLoaded, has } = useAuth()
@@ -214,7 +214,7 @@
 
 <If sdk="expo">
   ```tsx {{ filename: 'app/(home)/premium-content.tsx' }}
-  import { useAuth } from '@clerk/clerk-expo'
+  import { useAuth } from '@clerk/expo'
   import { Text } from 'react-native'
 
   export default function PremiumContentPage() {

docs/_partials/billing/checking-feature-using-protect.mdx

@@ -84,7 +84,7 @@
 
 <If sdk="react">
   ```tsx {{ filename: 'src/pages/protected-premium-content.tsx' }}
-  import { Protect } from '@clerk/clerk-react'
+  import { Protect } from '@clerk/react'
 
   export default function ProtectedPremiumContentPage() {
     return (
@@ -166,7 +166,7 @@
 
 <If sdk="expo">
   ```tsx {{ filename: 'app/(home)/protected-premium-content.tsx' }}
-  import { Protect } from '@clerk/clerk-expo'
+  import { Protect } from '@clerk/expo'
   import { Text, View } from 'react-native'
 
   export default function ProtectedPremiumContentPage() {

docs/_partials/billing/checking-permission-using-has-function.mdx

@@ -132,7 +132,7 @@
 
 <If sdk="react">
   ```tsx {{ filename: 'src/pages/manage-premium-content.tsx' }}
-  import { useAuth } from '@clerk/clerk-react'
+  import { useAuth } from '@clerk/react'
 
   export default function ManagePremiumContentPage() {
     const { has, isLoaded } = useAuth()
@@ -236,7 +236,7 @@
 
 <If sdk="expo">
   ```tsx {{ filename: 'app/(home)/manage-premium-content.tsx' }}
-  import { useAuth } from '@clerk/clerk-expo'
+  import { useAuth } from '@clerk/expo'
   import { Text } from 'react-native'
 
   export default function ManagePremiumContentPage() {

docs/_partials/billing/checking-permission-using-protect.mdx

@@ -88,7 +88,7 @@
 
 <If sdk="react">
   ```tsx {{ filename: 'src/pages/protected-manage-content.tsx' }}
-  import { Protect } from '@clerk/clerk-react'
+  import { Protect } from '@clerk/react'
 
   export default function ProtectedManageContentPage() {
     return (
@@ -178,7 +178,7 @@
 
 <If sdk="expo">
   ```tsx {{ filename: 'app/(home)/protected-manage-content.tsx' }}
-  import { Protect } from '@clerk/clerk-expo'
+  import { Protect } from '@clerk/expo'
   import { Text, View } from 'react-native'
 
   export default function ProtectedManageContentPage() {

docs/_partials/billing/checking-plan-using-has-function.mdx

@@ -116,7 +116,7 @@
 
 <If sdk="react">
   ```tsx {{ filename: 'src/pages/bronze-content.tsx' }}
-  import { useAuth } from '@clerk/clerk-react'
+  import { useAuth } from '@clerk/react'
 
   export default function BronzeContentPage() {
     const { has, isLoaded } = useAuth()
@@ -206,7 +206,7 @@
 
 <If sdk="expo">
   ```tsx {{ filename: 'app/(home)/bronze-content.tsx' }}
-  import { useAuth } from '@clerk/clerk-expo'
+  import { useAuth } from '@clerk/expo'
   import { Text } from 'react-native'
 
   export default function BronzeContentPage() {

docs/_partials/billing/checking-plan-using-protect.mdx

@@ -78,7 +78,7 @@
 
 <If sdk="react">
   ```tsx {{ filename: 'src/pages/protected-content.tsx' }}
-  import { Protect } from '@clerk/clerk-react'
+  import { Protect } from '@clerk/react'
 
   export default function ProtectedContentPage() {
     return (
@@ -160,7 +160,7 @@
 
 <If sdk="expo">
   ```tsx {{ filename: 'app/(home)/protected-content.tsx' }}
-  import { Protect } from '@clerk/clerk-expo'
+  import { Protect } from '@clerk/expo'
   import { Text } from 'react-native'
 
   export default function ProtectedContentPage() {

docs/_partials/billing/create-a-pricing-table.mdx

@@ -77,7 +77,7 @@
 
 <If sdk="react">
   ```tsx {{ filename: 'src/screens/pricing.tsx' }}
-  import { PricingTable } from '@clerk/clerk-react'
+  import { PricingTable } from '@clerk/react'
 
   export default function PricingScreen() {
     return (
@@ -146,7 +146,7 @@
   > Expo only supports the `<PricingTable />` component on the **web**.
 
   ```tsx {{ filename: 'app/(home)/pricing.tsx' }}
-  import { PricingTable } from '@clerk/clerk-expo/web'
+  import { PricingTable } from '@clerk/expo/web'
   import { View } from 'react-native'
 
   export default function PricingPage() {

docs/_partials/billing/create-an-organization-pricing-table.mdx

@@ -77,7 +77,7 @@
 
 <If sdk="react">
   ```tsx {{ filename: 'src/screens/pricing.tsx' }}
-  import { PricingTable } from '@clerk/clerk-react'
+  import { PricingTable } from '@clerk/react'
 
   export default function PricingScreen() {
     return (
@@ -146,7 +146,7 @@
   > Expo only supports the `<PricingTable />` component on the **web**.
 
   ```tsx {{ filename: 'app/(home)/pricing.tsx' }}
-  import { PricingTable } from '@clerk/clerk-expo/web'
+  import { PricingTable } from '@clerk/expo/web'
   import { View } from 'react-native'
 
   export default function PricingPage() {

docs/_partials/control-components-with-clerkdegraded.mdx

@@ -52,7 +52,7 @@
 
 <If sdk="react">
   ```tsx {{ filename: 'src/App.tsx' }}
-  import { ClerkLoaded, ClerkLoading, ClerkDegraded, ClerkFailed } from '@clerk/clerk-react'
+  import { ClerkLoaded, ClerkLoading, ClerkDegraded, ClerkFailed } from '@clerk/react'
 
   export default function App() {
     return (

docs/_partials/expo/sign-out-custom-flow.mdx

@@ -1,5 +1,5 @@
 ```tsx {{ filename: 'app/components/SignOutButton.tsx', collapsible: true }}
-import { useClerk } from '@clerk/clerk-expo'
+import { useClerk } from '@clerk/expo'
 import { useRouter } from 'expo-router'
 import { Text, TouchableOpacity } from 'react-native'
 

docs/_partials/expo/use-sign-in-with-apple-example.mdx

@@ -1,7 +1,7 @@
 The following example demonstrates how to use the [`useSignInWithApple()`](/docs/reference/expo/use-sign-in-with-apple) hook to manage the Apple authentication flow. Because the `useSignInWithApple()` hook automatically manages the [transfer flow](!transfer-flow) between sign-up and sign-in, you can use this component for both your sign-up and sign-in pages.
 
 ```tsx {{ filename: 'components/AppleSignInButton.tsx', collapsible: true }}
-import { useSignInWithApple } from '@clerk/clerk-expo'
+import { useSignInWithApple } from '@clerk/expo'
 import { useRouter } from 'expo-router'
 import { Alert, Platform, StyleSheet, Text, TouchableOpacity, View } from 'react-native'
 

docs/_partials/reverification-callout.mdx

@@ -1,3 +1,8 @@
 > [!WARNING]
 >
-> Depending on the SDK you're using, this feature requires `@clerk/[email protected]` or later, `@clerk/[email protected]` or later, `@clerk/[email protected]` or later and `@clerk/[email protected]` or later.
+> This feature requires one of the following SDKS:
+>
+> - `@clerk/[email protected]` or later
+> - `@clerk/react`, or `@clerk/[email protected]` or later
+> - `@clerk/[email protected]` or later
+> - `@clerk/[email protected]` or later

docs/getting-started/quickstart.expo.mdx

@@ -30,14 +30,14 @@ sdk: expo
 
   <Include src="_partials/native-api-callout" />
 
-  ## Install `@clerk/clerk-expo`
+  ## Install `@clerk/expo`
 
   The [Clerk Expo SDK](/docs/reference/expo/overview) gives you access to prebuilt components, hooks, and helpers to make user authentication easier.
 
   Run the following command to install the SDK:
 
   ```npm
-  npm install @clerk/clerk-expo
+  npm install @clerk/expo
   ```
 
   ## Set your Clerk API keys
@@ -71,7 +71,7 @@ sdk: expo
   Add the component to your root layout as shown in the following example:
 
   ```tsx {{ filename: 'app/_layout.tsx', mark: [1, 6, 8] }}
-  import { ClerkProvider } from '@clerk/clerk-expo'
+  import { ClerkProvider } from '@clerk/expo'
   import { Slot } from 'expo-router'
 
   export default function RootLayout() {
@@ -97,8 +97,8 @@ sdk: expo
 
   1. Update your root layout to use the secure token cache:
      ```tsx {{ filename: 'app/_layout.tsx', mark: [2, 7] }}
-     import { ClerkProvider } from '@clerk/clerk-expo'
-     import { tokenCache } from '@clerk/clerk-expo/token-cache'
+     import { ClerkProvider } from '@clerk/expo'
+     import { tokenCache } from '@clerk/expo/token-cache'
      import { Slot } from 'expo-router'
 
      export default function RootLayout() {
@@ -126,7 +126,7 @@ sdk: expo
 
   ```tsx {{ filename: 'app/(auth)/_layout.tsx' }}
   import { Redirect, Stack } from 'expo-router'
-  import { useAuth } from '@clerk/clerk-expo'
+  import { useAuth } from '@clerk/expo'
 
   export default function AuthRoutesLayout() {
     const { isSignedIn } = useAuth()
@@ -146,7 +146,7 @@ sdk: expo
   ```tsx {{ filename: 'app/(auth)/sign-up.tsx', collapsible: true }}
   import * as React from 'react'
   import { Text, TextInput, TouchableOpacity, View } from 'react-native'
-  import { useSignUp } from '@clerk/clerk-expo'
+  import { useSignUp } from '@clerk/expo'
   import { Link, useRouter } from 'expo-router'
 
   export default function SignUpScreen() {
@@ -263,7 +263,7 @@ sdk: expo
   In the `(auth)` group, create a `sign-in.tsx` file with the following code. The [`useSignIn()`](/docs/reference/hooks/use-sign-in) hook is used to create a sign-in flow. The user can sign in using email address and password, or navigate to the sign-up page.
 
   ```tsx {{ filename: 'app/(auth)/sign-in.tsx', collapsible: true }}
-  import { useSignIn } from '@clerk/clerk-expo'
+  import { useSignIn } from '@clerk/expo'
   import { Link, useRouter } from 'expo-router'
   import { Text, TextInput, TouchableOpacity, View } from 'react-native'
   import React from 'react'
@@ -365,7 +365,7 @@ sdk: expo
   Then, in the same folder, create an `index.tsx` file with the following code. If the user is signed in, it displays their email and a sign-out button. If they're not signed in, it displays sign-in and sign-up links.
 
   ```tsx {{ filename: 'app/(home)/index.tsx' }}
-  import { SignedIn, SignedOut, useUser } from '@clerk/clerk-expo'
+  import { SignedIn, SignedOut, useUser } from '@clerk/expo'
   import { Link } from 'expo-router'
   import { Text, View } from 'react-native'
   import { SignOutButton } from '@/app/components/SignOutButton'

docs/getting-started/quickstart.react.mdx

@@ -20,14 +20,14 @@ This tutorial will demonstrate how to create a new React app using Vite and add
   npm run dev
   ```
 
-  ## Install `@clerk/clerk-react`
+  ## Install `@clerk/react`
 
   The [Clerk React SDK](/docs/reference/react/overview) gives you access to prebuilt components, hooks, and helpers to make user authentication easier.
 
   Run the following command to install the SDK:
 
   ```npm
-  npm install @clerk/clerk-react
+  npm install @clerk/react
   ```
 
   ## Set your Clerk API keys
@@ -89,7 +89,7 @@ This tutorial will demonstrate how to create a new React app using Vite and add
   import { createRoot } from 'react-dom/client'
   import './index.css'
   import App from './App.tsx'
-  import { ClerkProvider } from '@clerk/clerk-react'
+  import { ClerkProvider } from '@clerk/react'
 
   // Import your Publishable Key
   const PUBLISHABLE_KEY = import.meta.env.VITE_CLERK_PUBLISHABLE_KEY
@@ -117,7 +117,7 @@ This tutorial will demonstrate how to create a new React app using Vite and add
   - [`<SignInButton />`](/docs/reference/components/unstyled/sign-in-button): An unstyled component that links to the sign-in page. In this example, since no props or [environment variables](/docs/guides/development/clerk-environment-variables) are set for the sign-in URL, this component links to the [Account Portal sign-in page](/docs/guides/customizing-clerk/account-portal#sign-in).
 
   ```tsx {{ filename: 'src/App.tsx', mark: [1, [5, 12]] }}
-  import { SignedIn, SignedOut, SignInButton, UserButton } from '@clerk/clerk-react'
+  import { SignedIn, SignedOut, SignInButton, UserButton } from '@clerk/react'
 
   export default function App() {
     return (

docs/guides/customizing-clerk/appearance-prop/captcha.mdx

@@ -79,7 +79,7 @@ The `captcha` property can be used to change the appearance of the CAPTCHA widge
     ```tsx {{ filename: 'app.tsx', mark: [[13, 18]] }}
     import React from 'react'
     import './App.css'
-    import { ClerkProvider } from '@clerk/clerk-react'
+    import { ClerkProvider } from '@clerk/react'
 
     if (!process.env.REACT_APP_CLERK_PUBLISHABLE_KEY) {
       throw new Error('Missing Publishable Key')

docs/guides/customizing-clerk/appearance-prop/themes.mdx

@@ -145,7 +145,7 @@ In the following example, the "Dark" theme is applied to all Clerk components.
     import React from 'react'
     import './App.css'
     import { dark } from '@clerk/themes'
-    import { ClerkProvider } from '@clerk/clerk-react'
+    import { ClerkProvider } from '@clerk/react'
 
     if (!process.env.REACT_APP_CLERK_PUBLISHABLE_KEY) {
       throw new Error('Missing Publishable Key')
@@ -318,7 +318,7 @@ In the following example, the "Dark" theme is applied first, then the "Neobrutal
     import React from 'react'
     import './App.css'
     import { dark, neobrutalism } from '@clerk/themes'
-    import { ClerkProvider } from '@clerk/clerk-react'
+    import { ClerkProvider } from '@clerk/react'
 
     if (!process.env.REACT_APP_CLERK_PUBLISHABLE_KEY) {
       throw new Error('Missing Publishable Key')
@@ -493,7 +493,7 @@ In the following example, the "Neobrutalism" theme is applied to all instances o
     import React from 'react'
     import './App.css'
     import { dark } from '@clerk/themes'
-    import { ClerkProvider } from '@clerk/clerk-react'
+    import { ClerkProvider } from '@clerk/react'
 
     if (!process.env.REACT_APP_CLERK_PUBLISHABLE_KEY) {
       throw new Error('Missing Publishable Key')
@@ -657,7 +657,7 @@ To apply a theme to a single Clerk component, pass the `appearance` prop to the
 
   <Tab>
     ```tsx {{ filename: '/src/sign-in/[[...index]].tsx', mark: [2, [6, 8]] }}
-    import { SignIn } from '@clerk/clerk-react'
+    import { SignIn } from '@clerk/react'
     import { dark } from '@clerk/themes'
 
     const SignInPage = () => (
@@ -802,7 +802,7 @@ In the following example, the primary color of the themes are customized.
     import React from 'react'
     import './App.css'
     import { dark, neobrutalism, shadesOfPurple } from '@clerk/themes'
-    import { ClerkProvider } from '@clerk/clerk-react'
+    import { ClerkProvider } from '@clerk/react'
 
     if (!process.env.REACT_APP_CLERK_PUBLISHABLE_KEY) {
       throw new Error('Missing Publishable Key')

docs/guides/customizing-clerk/appearance-prop/variables.mdx

@@ -299,7 +299,7 @@ In the following example, the primary color is set to blue and the text color is
     ```tsx {{ filename: 'app.tsx', mark: [[13, 18]] }}
     import React from 'react'
     import './App.css'
-    import { ClerkProvider } from '@clerk/clerk-react'
+    import { ClerkProvider } from '@clerk/react'
 
     if (!process.env.REACT_APP_CLERK_PUBLISHABLE_KEY) {
       throw new Error('Missing Publishable Key')
@@ -489,7 +489,7 @@ In the following example, the primary color is set to blue and the text color is
     ```tsx {{ filename: 'app.tsx', mark: [[13, 20]] }}
     import React from 'react'
     import './App.css'
-    import { ClerkProvider } from '@clerk/clerk-react'
+    import { ClerkProvider } from '@clerk/react'
 
     if (!process.env.REACT_APP_CLERK_PUBLISHABLE_KEY) {
       throw new Error('Missing Publishable Key')
@@ -674,7 +674,7 @@ The following example shows how to customize the [`<SignIn />`](/docs/reference/
 
   <Tab>
     ```tsx {{ filename: '/src/sign-in/[[...index]].tsx', mark: [[5, 10]] }}
-    import { SignIn } from '@clerk/clerk-react'
+    import { SignIn } from '@clerk/react'
 
     const SignInPage = () => (
       <SignIn