From 27d156b5560e351868fceda46e8d97bf4d336791 Mon Sep 17 00:00:00 2001
From: Laura Beatris <48022589+LauraBeatris@users.noreply.github.com>
Date: Mon, 3 Nov 2025 11:13:19 -0300
Subject: [PATCH 01/30] Run `pnpm dedupe`

---
 playground/app-router/src/app/layout.tsx |   6 +-
 pnpm-lock.yaml                           | 218 ++++++++++++++++++++++-
 2 files changed, 216 insertions(+), 8 deletions(-)

diff --git a/playground/app-router/src/app/layout.tsx b/playground/app-router/src/app/layout.tsx
index c90b61270fd..ce2b6af9f26 100644
--- a/playground/app-router/src/app/layout.tsx
+++ b/playground/app-router/src/app/layout.tsx
@@ -1,7 +1,7 @@
-import './globals.css';
-import { Inter } from 'next/font/google';
-import { ClerkProvider } from '@clerk/nextjs';
 import { Links } from '@/common/Links';
+import { ClerkProvider } from '@clerk/nextjs';
+import { Inter } from 'next/font/google';
+import './globals.css';
 
 const inter = Inter({ subsets: ['latin'] });
 
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 6f65b6e000b..6ceafdd1ea7 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -4258,24 +4258,64 @@ packages:
     cpu: [arm64]
     os: [darwin]
 
+  '@rolldown/binding-darwin-arm64@1.0.0-beta.9-commit.d91dfb5':
+    resolution: {integrity: sha512-Mp0/gqiPdepHjjVm7e0yL1acWvI0rJVVFQEADSezvAjon9sjQ7CEg9JnXICD4B1YrPmN9qV/e7cQZCp87tTV4w==}
+    cpu: [arm64]
+    os: [darwin]
+
+  '@rolldown/binding-darwin-arm64@1.0.0-beta.9-commit.d91dfb5':
+    resolution: {integrity: sha512-Mp0/gqiPdepHjjVm7e0yL1acWvI0rJVVFQEADSezvAjon9sjQ7CEg9JnXICD4B1YrPmN9qV/e7cQZCp87tTV4w==}
+    cpu: [arm64]
+    os: [darwin]
+
   '@rolldown/binding-darwin-x64@1.0.0-beta.43':
     resolution: {integrity: sha512-u9Ps4sh6lcmJ3vgLtyEg/x4jlhI64U0mM93Ew+tlfFdLDe7yKyA+Fe80cpr2n1mNCeZXrvTSbZluKpXQ0GxLjw==}
     engines: {node: ^20.19.0 || >=22.12.0}
     cpu: [x64]
     os: [darwin]
 
+  '@rolldown/binding-darwin-x64@1.0.0-beta.9-commit.d91dfb5':
+    resolution: {integrity: sha512-40re4rMNrsi57oavRzIOpRGmg3QRlW6Ea8Q3znaqgOuJuKVrrm2bIQInTfkZJG7a4/5YMX7T951d0+toGLTdCA==}
+    cpu: [x64]
+    os: [darwin]
+
+  '@rolldown/binding-darwin-x64@1.0.0-beta.9-commit.d91dfb5':
+    resolution: {integrity: sha512-40re4rMNrsi57oavRzIOpRGmg3QRlW6Ea8Q3znaqgOuJuKVrrm2bIQInTfkZJG7a4/5YMX7T951d0+toGLTdCA==}
+    cpu: [x64]
+    os: [darwin]
+
   '@rolldown/binding-freebsd-x64@1.0.0-beta.43':
     resolution: {integrity: sha512-h9lUtVtXgfbk/tnicMpbFfZ3DJvk5Zn2IvmlC1/e0+nUfwoc/TFqpfrRRqcNBXk/e+xiWMSKv6b0MF8N+Rtvlg==}
     engines: {node: ^20.19.0 || >=22.12.0}
     cpu: [x64]
     os: [freebsd]
 
+  '@rolldown/binding-freebsd-x64@1.0.0-beta.9-commit.d91dfb5':
+    resolution: {integrity: sha512-8BDM939bbMariZupiHp3OmP5N+LXPT4mULA0hZjDaq970PCxv4krZOSMG+HkWUUwmuQROtV+/00xw39EO0P+8g==}
+    cpu: [x64]
+    os: [freebsd]
+
+  '@rolldown/binding-freebsd-x64@1.0.0-beta.9-commit.d91dfb5':
+    resolution: {integrity: sha512-8BDM939bbMariZupiHp3OmP5N+LXPT4mULA0hZjDaq970PCxv4krZOSMG+HkWUUwmuQROtV+/00xw39EO0P+8g==}
+    cpu: [x64]
+    os: [freebsd]
+
   '@rolldown/binding-linux-arm-gnueabihf@1.0.0-beta.43':
     resolution: {integrity: sha512-IX2C6bA6wM2rX/RvD75ko+ix9yxPKjKGGq7pOhB8wGI4Z4fqX5B1nDHga/qMDmAdCAR1m9ymzxkmqhm/AFYf7A==}
     engines: {node: ^20.19.0 || >=22.12.0}
     cpu: [arm]
     os: [linux]
 
+  '@rolldown/binding-linux-arm-gnueabihf@1.0.0-beta.9-commit.d91dfb5':
+    resolution: {integrity: sha512-sntsPaPgrECpBB/+2xrQzVUt0r493TMPI+4kWRMhvMsmrxOqH1Ep5lM0Wua/ZdbfZNwm1aVa5pcESQfNfM4Fhw==}
+    cpu: [arm]
+    os: [linux]
+
+  '@rolldown/binding-linux-arm-gnueabihf@1.0.0-beta.9-commit.d91dfb5':
+    resolution: {integrity: sha512-sntsPaPgrECpBB/+2xrQzVUt0r493TMPI+4kWRMhvMsmrxOqH1Ep5lM0Wua/ZdbfZNwm1aVa5pcESQfNfM4Fhw==}
+    cpu: [arm]
+    os: [linux]
+
   '@rolldown/binding-linux-arm64-gnu@1.0.0-beta.43':
     resolution: {integrity: sha512-mcjd57vEj+CEQbZAzUiaxNzNgwwgOpFtZBWcINm8DNscvkXl5b/s622Z1dqGNWSdrZmdjdC6LWMvu8iHM6v9sQ==}
     engines: {node: ^20.19.0 || >=22.12.0}
@@ -4283,6 +4323,18 @@ packages:
     os: [linux]
     libc: [glibc]
 
+  '@rolldown/binding-linux-arm64-gnu@1.0.0-beta.9-commit.d91dfb5':
+    resolution: {integrity: sha512-5clBW/I+er9F2uM1OFjJFWX86y7Lcy0M+NqsN4s3o07W+8467Zk8oQa4B45vdaXoNUF/yqIAgKkA/OEdQDxZqA==}
+    cpu: [arm64]
+    os: [linux]
+    libc: [glibc]
+
+  '@rolldown/binding-linux-arm64-gnu@1.0.0-beta.9-commit.d91dfb5':
+    resolution: {integrity: sha512-5clBW/I+er9F2uM1OFjJFWX86y7Lcy0M+NqsN4s3o07W+8467Zk8oQa4B45vdaXoNUF/yqIAgKkA/OEdQDxZqA==}
+    cpu: [arm64]
+    os: [linux]
+    libc: [glibc]
+
   '@rolldown/binding-linux-arm64-musl@1.0.0-beta.43':
     resolution: {integrity: sha512-Pa8QMwlkrztTo/1mVjZmPIQ44tCSci10TBqxzVBvXVA5CFh5EpiEi99fPSll2dHG2uT4dCOMeC6fIhyDdb0zXA==}
     engines: {node: ^20.19.0 || >=22.12.0}
@@ -4290,6 +4342,18 @@ packages:
     os: [linux]
     libc: [musl]
 
+  '@rolldown/binding-linux-arm64-musl@1.0.0-beta.9-commit.d91dfb5':
+    resolution: {integrity: sha512-wv+rnAfQDk9p/CheX8/Kmqk2o1WaFa4xhWI9gOyDMk/ljvOX0u0ubeM8nI1Qfox7Tnh71eV5AjzSePXUhFOyOg==}
+    cpu: [arm64]
+    os: [linux]
+    libc: [musl]
+
+  '@rolldown/binding-linux-arm64-musl@1.0.0-beta.9-commit.d91dfb5':
+    resolution: {integrity: sha512-wv+rnAfQDk9p/CheX8/Kmqk2o1WaFa4xhWI9gOyDMk/ljvOX0u0ubeM8nI1Qfox7Tnh71eV5AjzSePXUhFOyOg==}
+    cpu: [arm64]
+    os: [linux]
+    libc: [musl]
+
   '@rolldown/binding-linux-x64-gnu@1.0.0-beta.43':
     resolution: {integrity: sha512-BgynXKMjeaX4AfWLARhOKDetBOOghnSiVRjAHVvhiAaDXgdQN8e65mSmXRiVoVtD3cHXx/cfU8Gw0p0K+qYKVQ==}
     engines: {node: ^20.19.0 || >=22.12.0}
@@ -4297,6 +4361,18 @@ packages:
     os: [linux]
     libc: [glibc]
 
+  '@rolldown/binding-linux-x64-gnu@1.0.0-beta.9-commit.d91dfb5':
+    resolution: {integrity: sha512-gxD0/xhU4Py47IH3bKZbWtvB99tMkUPGPJFRfSc5UB9Osoje0l0j1PPbxpUtXIELurYCqwLBKXIMTQGifox1BQ==}
+    cpu: [x64]
+    os: [linux]
+    libc: [glibc]
+
+  '@rolldown/binding-linux-x64-gnu@1.0.0-beta.9-commit.d91dfb5':
+    resolution: {integrity: sha512-gxD0/xhU4Py47IH3bKZbWtvB99tMkUPGPJFRfSc5UB9Osoje0l0j1PPbxpUtXIELurYCqwLBKXIMTQGifox1BQ==}
+    cpu: [x64]
+    os: [linux]
+    libc: [glibc]
+
   '@rolldown/binding-linux-x64-musl@1.0.0-beta.43':
     resolution: {integrity: sha512-VIsoPlOB/tDSAw9CySckBYysoIBqLeps1/umNSYUD8pMtalJyzMTneAVI1HrUdf4ceFmQ5vARoLIXSsPwVFxNg==}
     engines: {node: ^20.19.0 || >=22.12.0}
@@ -4304,6 +4380,18 @@ packages:
     os: [linux]
     libc: [musl]
 
+  '@rolldown/binding-linux-x64-musl@1.0.0-beta.9-commit.d91dfb5':
+    resolution: {integrity: sha512-HotuVe3XUjDwqqEMbm3o3IRkP9gdm8raY/btd/6KE3JGLF/cv4+3ff1l6nOhAZI8wulWDPEXPtE7v+HQEaTXnA==}
+    cpu: [x64]
+    os: [linux]
+    libc: [musl]
+
+  '@rolldown/binding-linux-x64-musl@1.0.0-beta.9-commit.d91dfb5':
+    resolution: {integrity: sha512-HotuVe3XUjDwqqEMbm3o3IRkP9gdm8raY/btd/6KE3JGLF/cv4+3ff1l6nOhAZI8wulWDPEXPtE7v+HQEaTXnA==}
+    cpu: [x64]
+    os: [linux]
+    libc: [musl]
+
   '@rolldown/binding-openharmony-arm64@1.0.0-beta.43':
     resolution: {integrity: sha512-YDXTxVJG67PqTQMKyjVJSddoPbSWJ4yRz/E3xzTLHqNrTDGY0UuhG8EMr8zsYnfH/0cPFJ3wjQd/hJWHuR6nkA==}
     engines: {node: ^20.19.0 || >=22.12.0}
@@ -4315,24 +4403,64 @@ packages:
     engines: {node: '>=14.0.0'}
     cpu: [wasm32]
 
+  '@rolldown/binding-wasm32-wasi@1.0.0-beta.9-commit.d91dfb5':
+    resolution: {integrity: sha512-8Cx+ucbd8n2dIr21FqBh6rUvTVL0uTgEtKR7l+MUZ5BgY4dFh1e4mPVX8oqmoYwOxBiXrsD2JIOCz4AyKLKxWA==}
+    engines: {node: '>=14.21.3'}
+    cpu: [wasm32]
+
+  '@rolldown/binding-wasm32-wasi@1.0.0-beta.9-commit.d91dfb5':
+    resolution: {integrity: sha512-8Cx+ucbd8n2dIr21FqBh6rUvTVL0uTgEtKR7l+MUZ5BgY4dFh1e4mPVX8oqmoYwOxBiXrsD2JIOCz4AyKLKxWA==}
+    engines: {node: '>=14.21.3'}
+    cpu: [wasm32]
+
   '@rolldown/binding-win32-arm64-msvc@1.0.0-beta.43':
     resolution: {integrity: sha512-/B1j1pJs33y9ywtslOMxryUPHq8zIGu/OGEc2gyed0slimJ8fX2uR/SaJVhB4+NEgCFIeYDR4CX6jynAkeRuCA==}
     engines: {node: ^20.19.0 || >=22.12.0}
     cpu: [arm64]
     os: [win32]
 
+  '@rolldown/binding-win32-arm64-msvc@1.0.0-beta.9-commit.d91dfb5':
+    resolution: {integrity: sha512-Vhq5vikrVDxAa75fxsyqj0c0Y/uti/TwshXI71Xb8IeUQJOBnmLUsn5dgYf5ljpYYkNa0z9BPAvUDIDMmyDi+w==}
+    cpu: [arm64]
+    os: [win32]
+
+  '@rolldown/binding-win32-arm64-msvc@1.0.0-beta.9-commit.d91dfb5':
+    resolution: {integrity: sha512-Vhq5vikrVDxAa75fxsyqj0c0Y/uti/TwshXI71Xb8IeUQJOBnmLUsn5dgYf5ljpYYkNa0z9BPAvUDIDMmyDi+w==}
+    cpu: [arm64]
+    os: [win32]
+
   '@rolldown/binding-win32-ia32-msvc@1.0.0-beta.43':
     resolution: {integrity: sha512-29oG1swCz7hNP+CQYrsM4EtylsKwuYzM8ljqbqC5TsQwmKat7P8ouDpImsqg/GZxFSXcPP9ezQm0Q0wQwGM3JA==}
     engines: {node: ^20.19.0 || >=22.12.0}
     cpu: [ia32]
     os: [win32]
 
+  '@rolldown/binding-win32-ia32-msvc@1.0.0-beta.9-commit.d91dfb5':
+    resolution: {integrity: sha512-lN7RIg9Iugn08zP2aZN9y/MIdG8iOOCE93M1UrFlrxMTqPf8X+fDzmR/OKhTSd1A2pYNipZHjyTcb5H8kyQSow==}
+    cpu: [ia32]
+    os: [win32]
+
+  '@rolldown/binding-win32-ia32-msvc@1.0.0-beta.9-commit.d91dfb5':
+    resolution: {integrity: sha512-lN7RIg9Iugn08zP2aZN9y/MIdG8iOOCE93M1UrFlrxMTqPf8X+fDzmR/OKhTSd1A2pYNipZHjyTcb5H8kyQSow==}
+    cpu: [ia32]
+    os: [win32]
+
   '@rolldown/binding-win32-x64-msvc@1.0.0-beta.43':
     resolution: {integrity: sha512-eWBV1Ef3gfGNehxVGCyXs7wLayRIgCmyItuCZwYYXW5bsk4EvR4n2GP5m3ohjnx7wdiY3nLmwQfH2Knb5gbNZw==}
     engines: {node: ^20.19.0 || >=22.12.0}
     cpu: [x64]
     os: [win32]
 
+  '@rolldown/binding-win32-x64-msvc@1.0.0-beta.9-commit.d91dfb5':
+    resolution: {integrity: sha512-7/7cLIn48Y+EpQ4CePvf8reFl63F15yPUlg4ZAhl+RXJIfydkdak1WD8Ir3AwAO+bJBXzrfNL+XQbxm0mcQZmw==}
+    cpu: [x64]
+    os: [win32]
+
+  '@rolldown/binding-win32-x64-msvc@1.0.0-beta.9-commit.d91dfb5':
+    resolution: {integrity: sha512-7/7cLIn48Y+EpQ4CePvf8reFl63F15yPUlg4ZAhl+RXJIfydkdak1WD8Ir3AwAO+bJBXzrfNL+XQbxm0mcQZmw==}
+    cpu: [x64]
+    os: [win32]
+
   '@rolldown/pluginutils@1.0.0-beta.11':
     resolution: {integrity: sha512-L/gAA/hyCSuzTF1ftlzUSI/IKr2POHsv1Dd78GfqkR83KMNuswWD61JxGV2L7nRwBBBSDr6R1gCkdTmoN7W4ag==}
 
@@ -4345,6 +4473,9 @@ packages:
   '@rolldown/pluginutils@1.0.0-beta.50':
     resolution: {integrity: sha512-5e76wQiQVeL1ICOZVUg4LSOVYg9jyhGCin+icYozhsUzM+fHE7kddi1bdiE0jwVqTfkjba3jUFbEkoC9WkdvyA==}
 
+  '@rolldown/pluginutils@1.0.0-beta.9-commit.d91dfb5':
+    resolution: {integrity: sha512-8sExkWRK+zVybw3+2/kBkYBFeLnEUWz1fT7BLHplpzmtqkOfTbAQ9gkt4pzwGIIZmg4Qn5US5ACjUBenrhezwQ==}
+
   '@rollup/plugin-alias@5.1.1':
     resolution: {integrity: sha512-PR9zDb+rOzkRb2VD+EuKB7UC41vU5DIwZ5qqCpk0KJudcWAyi8rvYOhS7+L5aZCspw1stTViLgN5v6FF1p5cgQ==}
     engines: {node: '>=14.0.0'}
@@ -12881,6 +13012,14 @@ packages:
     engines: {node: ^20.19.0 || >=22.12.0}
     hasBin: true
 
+  rolldown@1.0.0-beta.9-commit.d91dfb5:
+    resolution: {integrity: sha512-FHkj6gGEiEgmAXQchglofvUUdwj2Oiw603Rs+zgFAnn9Cb7T7z3fiaEc0DbN3ja4wYkW6sF2rzMEtC1V4BGx/g==}
+    hasBin: true
+
+  rolldown@1.0.0-beta.9-commit.d91dfb5:
+    resolution: {integrity: sha512-FHkj6gGEiEgmAXQchglofvUUdwj2Oiw603Rs+zgFAnn9Cb7T7z3fiaEc0DbN3ja4wYkW6sF2rzMEtC1V4BGx/g==}
+    hasBin: true
+
   rollup-plugin-visualizer@6.0.3:
     resolution: {integrity: sha512-ZU41GwrkDcCpVoffviuM9Clwjy5fcUxlz0oMoTXTYsK+tcIFzbdacnrr2n8TXcHxbGKKXtOdjxM2HUS4HjkwIw==}
     engines: {node: '>=18'}
@@ -18968,6 +19107,10 @@ snapshots:
   '@oxc-parser/binding-win32-x64-msvc@0.87.0':
     optional: true
 
+  '@oxc-project/runtime@0.71.0': {}
+
+  '@oxc-project/types@0.71.0': {}
+
   '@oxc-project/types@0.87.0': {}
 
   '@oxc-project/types@0.94.0': {}
@@ -19582,27 +19725,51 @@ snapshots:
   '@rolldown/binding-darwin-arm64@1.0.0-beta.43':
     optional: true
 
+  '@rolldown/binding-darwin-arm64@1.0.0-beta.9-commit.d91dfb5':
+    optional: true
+
   '@rolldown/binding-darwin-x64@1.0.0-beta.43':
     optional: true
 
+  '@rolldown/binding-darwin-x64@1.0.0-beta.9-commit.d91dfb5':
+    optional: true
+
   '@rolldown/binding-freebsd-x64@1.0.0-beta.43':
     optional: true
 
+  '@rolldown/binding-freebsd-x64@1.0.0-beta.9-commit.d91dfb5':
+    optional: true
+
   '@rolldown/binding-linux-arm-gnueabihf@1.0.0-beta.43':
     optional: true
 
+  '@rolldown/binding-linux-arm-gnueabihf@1.0.0-beta.9-commit.d91dfb5':
+    optional: true
+
   '@rolldown/binding-linux-arm64-gnu@1.0.0-beta.43':
     optional: true
 
+  '@rolldown/binding-linux-arm64-gnu@1.0.0-beta.9-commit.d91dfb5':
+    optional: true
+
   '@rolldown/binding-linux-arm64-musl@1.0.0-beta.43':
     optional: true
 
+  '@rolldown/binding-linux-arm64-musl@1.0.0-beta.9-commit.d91dfb5':
+    optional: true
+
   '@rolldown/binding-linux-x64-gnu@1.0.0-beta.43':
     optional: true
 
+  '@rolldown/binding-linux-x64-gnu@1.0.0-beta.9-commit.d91dfb5':
+    optional: true
+
   '@rolldown/binding-linux-x64-musl@1.0.0-beta.43':
     optional: true
 
+  '@rolldown/binding-linux-x64-musl@1.0.0-beta.9-commit.d91dfb5':
+    optional: true
+
   '@rolldown/binding-openharmony-arm64@1.0.0-beta.43':
     optional: true
 
@@ -19611,15 +19778,34 @@ snapshots:
       '@napi-rs/wasm-runtime': 1.0.7
     optional: true
 
+  '@rolldown/binding-wasm32-wasi@1.0.0-beta.9-commit.d91dfb5':
+    dependencies:
+      '@napi-rs/wasm-runtime': 0.2.12
+    optional: true
+
+  '@rolldown/binding-wasm32-wasi@1.0.0-beta.9-commit.d91dfb5':
+    dependencies:
+      '@napi-rs/wasm-runtime': 0.2.12
+    optional: true
+
   '@rolldown/binding-win32-arm64-msvc@1.0.0-beta.43':
     optional: true
 
+  '@rolldown/binding-win32-arm64-msvc@1.0.0-beta.9-commit.d91dfb5':
+    optional: true
+
   '@rolldown/binding-win32-ia32-msvc@1.0.0-beta.43':
     optional: true
 
+  '@rolldown/binding-win32-ia32-msvc@1.0.0-beta.9-commit.d91dfb5':
+    optional: true
+
   '@rolldown/binding-win32-x64-msvc@1.0.0-beta.43':
     optional: true
 
+  '@rolldown/binding-win32-x64-msvc@1.0.0-beta.9-commit.d91dfb5':
+    optional: true
+
   '@rolldown/pluginutils@1.0.0-beta.11': {}
 
   '@rolldown/pluginutils@1.0.0-beta.29': {}
@@ -19628,6 +19814,8 @@ snapshots:
 
   '@rolldown/pluginutils@1.0.0-beta.50': {}
 
+  '@rolldown/pluginutils@1.0.0-beta.9-commit.d91dfb5': {}
+
   '@rollup/plugin-alias@5.1.1(rollup@4.52.4)':
     optionalDependencies:
       rollup: 4.52.4
@@ -30120,7 +30308,7 @@ snapshots:
       glob: 11.0.0
       package-json-from-dist: 1.0.0
 
-  rolldown-plugin-dts@0.16.12(rolldown@1.0.0-beta.43)(typescript@5.8.3):
+  rolldown-plugin-dts@0.16.12(rolldown@1.0.0-beta.9-commit.d91dfb5)(typescript@5.8.3):
     dependencies:
       '@babel/generator': 7.28.3
       '@babel/parser': 7.28.4
@@ -30131,7 +30319,7 @@ snapshots:
       dts-resolver: 2.1.2
       get-tsconfig: 4.13.0
       magic-string: 0.30.19
-      rolldown: 1.0.0-beta.43
+      rolldown: 1.0.0-beta.9-commit.d91dfb5
     optionalDependencies:
       typescript: 5.8.3
     transitivePeerDependencies:
@@ -30159,7 +30347,27 @@ snapshots:
       '@rolldown/binding-win32-ia32-msvc': 1.0.0-beta.43
       '@rolldown/binding-win32-x64-msvc': 1.0.0-beta.43
 
-  rollup-plugin-visualizer@6.0.3(rolldown@1.0.0-beta.43)(rollup@4.52.4):
+  rolldown@1.0.0-beta.9-commit.d91dfb5:
+    dependencies:
+      '@oxc-project/runtime': 0.71.0
+      '@oxc-project/types': 0.71.0
+      '@rolldown/pluginutils': 1.0.0-beta.9-commit.d91dfb5
+      ansis: 4.2.0
+    optionalDependencies:
+      '@rolldown/binding-darwin-arm64': 1.0.0-beta.9-commit.d91dfb5
+      '@rolldown/binding-darwin-x64': 1.0.0-beta.9-commit.d91dfb5
+      '@rolldown/binding-freebsd-x64': 1.0.0-beta.9-commit.d91dfb5
+      '@rolldown/binding-linux-arm-gnueabihf': 1.0.0-beta.9-commit.d91dfb5
+      '@rolldown/binding-linux-arm64-gnu': 1.0.0-beta.9-commit.d91dfb5
+      '@rolldown/binding-linux-arm64-musl': 1.0.0-beta.9-commit.d91dfb5
+      '@rolldown/binding-linux-x64-gnu': 1.0.0-beta.9-commit.d91dfb5
+      '@rolldown/binding-linux-x64-musl': 1.0.0-beta.9-commit.d91dfb5
+      '@rolldown/binding-wasm32-wasi': 1.0.0-beta.9-commit.d91dfb5
+      '@rolldown/binding-win32-arm64-msvc': 1.0.0-beta.9-commit.d91dfb5
+      '@rolldown/binding-win32-ia32-msvc': 1.0.0-beta.9-commit.d91dfb5
+      '@rolldown/binding-win32-x64-msvc': 1.0.0-beta.9-commit.d91dfb5
+
+  rollup-plugin-visualizer@6.0.3(rolldown@1.0.0-beta.9-commit.d91dfb5)(rollup@4.52.4):
     dependencies:
       open: 8.4.2
       picomatch: 4.0.3
@@ -31405,8 +31613,8 @@ snapshots:
       diff: 8.0.2
       empathic: 2.0.0
       hookable: 5.5.3
-      rolldown: 1.0.0-beta.43
-      rolldown-plugin-dts: 0.16.12(rolldown@1.0.0-beta.43)(typescript@5.8.3)
+      rolldown: 1.0.0-beta.9-commit.d91dfb5
+      rolldown-plugin-dts: 0.16.12(rolldown@1.0.0-beta.9-commit.d91dfb5)(typescript@5.8.3)
       semver: 7.7.3
       tinyexec: 1.0.1
       tinyglobby: 0.2.15

From 6a9808eeb42872a7d49cb05fa0c16bd583519114 Mon Sep 17 00:00:00 2001
From: Laura Beatris <48022589+LauraBeatris@users.noreply.github.com>
Date: Wed, 5 Nov 2025 11:42:40 -0300
Subject: [PATCH 02/30] Add HOC to open modal based on org settings

---
 packages/clerk-js/src/core/clerk.ts           | 15 ++++-
 packages/clerk-js/src/ui/Components.tsx       | 37 +++++++++--
 .../components/EnableOrganizations/index.tsx  | 63 +++++++++++++++++++
 .../components/EnableOrganizations.tsx        | 24 +++++++
 .../src/ui/elements/contexts/index.tsx        |  3 +-
 .../clerk-js/src/ui/lazyModules/components.ts | 11 ++++
 packages/clerk-js/src/ui/types.ts             |  6 ++
 packages/react/src/isomorphicClerk.ts         | 22 +++++++
 packages/shared/src/organization.ts           | 36 ++++++++++-
 .../src/react/hooks/useOrganization.tsx       |  7 ++-
 .../src/react/hooks/useOrganizationList.tsx   |  6 +-
 packages/shared/src/types/appearance.ts       |  6 ++
 packages/shared/src/types/clerk.ts            | 19 ++++++
 .../vue/src/composables/useOrganization.ts    | 12 +++-
 14 files changed, 253 insertions(+), 14 deletions(-)
 create mode 100644 packages/clerk-js/src/ui/components/EnableOrganizations/index.tsx
 create mode 100644 packages/clerk-js/src/ui/contexts/components/EnableOrganizations.tsx

diff --git a/packages/clerk-js/src/core/clerk.ts b/packages/clerk-js/src/core/clerk.ts
index 6353d4c09d3..4b2c07fb6d8 100644
--- a/packages/clerk-js/src/core/clerk.ts
+++ b/packages/clerk-js/src/core/clerk.ts
@@ -23,6 +23,7 @@ import type {
   __experimental_CheckoutInstance,
   __experimental_CheckoutOptions,
   __internal_CheckoutProps,
+  __internal_EnableOrganizationsModalProps,
   __internal_OAuthConsentProps,
   __internal_PlanDetailsProps,
   __internal_SubscriptionDetailsProps,
@@ -35,9 +36,9 @@ import type {
   AuthenticateWithMetamaskParams,
   AuthenticateWithOKXWalletParams,
   BillingNamespace,
-  Clerk as ClerkInterface,
   ClerkAPIError,
   ClerkAuthenticateWithWeb3Params,
+  Clerk as ClerkInterface,
   ClerkOptions,
   ClientJSONSnapshot,
   ClientResource,
@@ -745,6 +746,18 @@ export class Clerk implements ClerkInterface {
     void this.#componentControls.ensureMounted().then(controls => controls.closeModal('userVerification'));
   };
 
+  public __internal_openEnableOrganizations = (props?: __internal_EnableOrganizationsModalProps): void => {
+    this.assertComponentsReady(this.#componentControls);
+    void this.#componentControls
+      .ensureMounted({ preloadHint: 'EnableOrganizations' })
+      .then(controls => controls.openModal('enableOrganizations', props || {}));
+  };
+
+  public __internal_closeEnableOrganizations = (): void => {
+    this.assertComponentsReady(this.#componentControls);
+    void this.#componentControls.ensureMounted().then(controls => controls.closeModal('enableOrganizations'));
+  };
+
   public __internal_openBlankCaptchaModal = (): Promise<unknown> => {
     this.assertComponentsReady(this.#componentControls);
     return this.#componentControls
diff --git a/packages/clerk-js/src/ui/Components.tsx b/packages/clerk-js/src/ui/Components.tsx
index 148736665ce..9ae84de9bc9 100644
--- a/packages/clerk-js/src/ui/Components.tsx
+++ b/packages/clerk-js/src/ui/Components.tsx
@@ -1,5 +1,6 @@
 import type {
   __internal_CheckoutProps,
+  __internal_EnableOrganizationsProps,
   __internal_PlanDetailsProps,
   __internal_SubscriptionDetailsProps,
   __internal_UserVerificationProps,
@@ -27,6 +28,7 @@ import type { ClerkComponentName } from './lazyModules/components';
 import {
   BlankCaptchaModal,
   CreateOrganizationModal,
+  EnableOrganizationsModal,
   ImpersonationFab,
   KeylessPrompt,
   OrganizationProfileModal,
@@ -79,7 +81,8 @@ export type ComponentControls = {
       | 'createOrganization'
       | 'userVerification'
       | 'waitlist'
-      | 'blankCaptcha',
+      | 'blankCaptcha'
+      | 'enableOrganizations',
   >(
     modal: T,
     props: T extends 'signIn'
@@ -90,7 +93,9 @@ export type ComponentControls = {
           ? __internal_UserVerificationProps
           : T extends 'waitlist'
             ? WaitlistProps
-            : UserProfileProps,
+            : T extends 'enableOrganizations'
+              ? __internal_EnableOrganizationsProps
+              : UserProfileProps,
   ) => void;
   closeModal: (
     modal:
@@ -102,7 +107,8 @@ export type ComponentControls = {
       | 'createOrganization'
       | 'userVerification'
       | 'waitlist'
-      | 'blankCaptcha',
+      | 'blankCaptcha'
+      | 'enableOrganizations',
     options?: {
       notify?: boolean;
     },
@@ -152,6 +158,7 @@ interface ComponentsState {
   userVerificationModal: null | __internal_UserVerificationProps;
   organizationProfileModal: null | OrganizationProfileProps;
   createOrganizationModal: null | CreateOrganizationProps;
+  enableOrganizationsModal: null | __internal_EnableOrganizationsProps;
   blankCaptchaModal: null;
   organizationSwitcherPrefetch: boolean;
   waitlistModal: null | WaitlistProps;
@@ -245,6 +252,7 @@ const Components = (props: ComponentsProps) => {
     userVerificationModal: null,
     organizationProfileModal: null,
     createOrganizationModal: null,
+    enableOrganizationsModal: null,
     organizationSwitcherPrefetch: false,
     waitlistModal: null,
     blankCaptchaModal: null,
@@ -274,6 +282,7 @@ const Components = (props: ComponentsProps) => {
     createOrganizationModal,
     waitlistModal,
     blankCaptchaModal,
+    enableOrganizationsModal,
     checkoutDrawer,
     planDetailsDrawer,
     subscriptionDetailsDrawer,
@@ -325,9 +334,10 @@ const Components = (props: ComponentsProps) => {
       clearUrlStateParam();
       setState(s => {
         function handleCloseModalForExperimentalUserVerification() {
-          const modal = s[`${name}Modal`] || {};
+          const modal = s[`${name}Modal`];
           if (modal && typeof modal === 'object' && 'afterVerificationCancelled' in modal && notify) {
-            modal.afterVerificationCancelled?.();
+            // TypeScript doesn't narrow properly with template literal access and 'in' operator
+            (modal as { afterVerificationCancelled?: () => void }).afterVerificationCancelled?.();
           }
         }
 
@@ -484,6 +494,22 @@ const Components = (props: ComponentsProps) => {
     </LazyModalRenderer>
   );
 
+  const mountedEnableOrganizationsModal = (
+    <LazyModalRenderer
+      globalAppearance={state.appearance}
+      appearanceKey={'enableOrganizations'}
+      componentAppearance={enableOrganizationsModal?.appearance}
+      flowName={'enableOrganizations'}
+      onClose={() => componentsControls.closeModal('enableOrganizations')}
+      onExternalNavigate={() => componentsControls.closeModal('enableOrganizations')}
+      startPath={buildVirtualRouterUrl({ base: '/enable-organizations', path: urlStateParam?.path })}
+      componentName={'EnableOrganizationsModal'}
+      modalContainerSx={{ alignItems: 'center' }}
+    >
+      <EnableOrganizationsModal {...enableOrganizationsModal} />
+    </LazyModalRenderer>
+  );
+
   const mountedOrganizationProfileModal = (
     <LazyModalRenderer
       globalAppearance={state.appearance}
@@ -587,6 +613,7 @@ const Components = (props: ComponentsProps) => {
         {createOrganizationModal && mountedCreateOrganizationModal}
         {waitlistModal && mountedWaitlistModal}
         {blankCaptchaModal && mountedBlankCaptchaModal}
+        {enableOrganizationsModal && mountedEnableOrganizationsModal}
 
         <MountedCheckoutDrawer
           appearance={state.appearance}
diff --git a/packages/clerk-js/src/ui/components/EnableOrganizations/index.tsx b/packages/clerk-js/src/ui/components/EnableOrganizations/index.tsx
new file mode 100644
index 00000000000..031c4f51f71
--- /dev/null
+++ b/packages/clerk-js/src/ui/components/EnableOrganizations/index.tsx
@@ -0,0 +1,63 @@
+import type {
+  __internal_EnableOrganizationsModalProps,
+  __internal_EnableOrganizationsProps,
+} from '@clerk/shared/types';
+import React from 'react';
+
+import { EnableOrganizationsContext } from '@/ui/contexts/components/EnableOrganizations';
+import { Card } from '@/ui/elements/Card';
+import { withCardStateProvider } from '@/ui/elements/contexts';
+import { Header } from '@/ui/elements/Header';
+
+import { withCoreSessionSwitchGuard } from '../../contexts';
+import { Flow } from '../../customizables';
+import { Route, Switch } from '../../router';
+
+const EnableOrganizationsContent = withCardStateProvider(() => (
+  <Card.Root>
+    <Card.Content>
+      <Header.Root>
+        <Header.Title>Enable organizations</Header.Title>
+      </Header.Root>
+    </Card.Content>
+    <Card.Footer />
+  </Card.Root>
+));
+
+function EnableOrganizationsRoutes(): JSX.Element {
+  return (
+    <Flow.Root flow='enableOrganizations'>
+      <Switch>
+        <Route index>
+          <EnableOrganizationsContent />
+        </Route>
+      </Switch>
+    </Flow.Root>
+  );
+}
+
+EnableOrganizationsRoutes.displayName = 'EnableOrganizations';
+
+const EnableOrganizations: React.ComponentType<__internal_EnableOrganizationsProps> =
+  withCoreSessionSwitchGuard(EnableOrganizationsRoutes);
+
+// TODO -> Maybe move this to a inner folder for all in-app modals
+const EnableOrganizationsModal = (props: __internal_EnableOrganizationsModalProps): JSX.Element => {
+  return (
+    <Route path='enable-organizations'>
+      <EnableOrganizationsContext.Provider
+        value={{
+          componentName: 'EnableOrganizations',
+          routing: 'virtual',
+          ...props,
+        }}
+      >
+        <div>
+          <EnableOrganizations routing='virtual' />
+        </div>
+      </EnableOrganizationsContext.Provider>
+    </Route>
+  );
+};
+
+export { EnableOrganizations, EnableOrganizationsModal };
diff --git a/packages/clerk-js/src/ui/contexts/components/EnableOrganizations.tsx b/packages/clerk-js/src/ui/contexts/components/EnableOrganizations.tsx
new file mode 100644
index 00000000000..e6dbc52d294
--- /dev/null
+++ b/packages/clerk-js/src/ui/contexts/components/EnableOrganizations.tsx
@@ -0,0 +1,24 @@
+import { createContext, useContext } from 'react';
+
+import type { EnableOrganizationsCtx } from '../../types';
+
+export type EnableOrganizationsContextType = EnableOrganizationsCtx;
+
+export const EnableOrganizationsContext = createContext<EnableOrganizationsCtx | null>(null);
+
+export const useEnableOrganizations = (): EnableOrganizationsContextType => {
+  const context = useContext(EnableOrganizationsContext);
+
+  if (!context || context.componentName !== 'EnableOrganizations') {
+    throw new Error(
+      'Clerk: useEnableOrganizationsContext called outside of the mounted EnableOrganizations component.',
+    );
+  }
+
+  const { componentName, ...ctx } = context;
+
+  return {
+    ...ctx,
+    componentName,
+  };
+};
diff --git a/packages/clerk-js/src/ui/elements/contexts/index.tsx b/packages/clerk-js/src/ui/elements/contexts/index.tsx
index f14986eedd2..fb38f0bb4ed 100644
--- a/packages/clerk-js/src/ui/elements/contexts/index.tsx
+++ b/packages/clerk-js/src/ui/elements/contexts/index.tsx
@@ -101,7 +101,8 @@ export type FlowMetadata = {
     | 'oauthConsent'
     | 'subscriptionDetails'
     | 'tasks'
-    | 'taskChooseOrganization';
+    | 'taskChooseOrganization'
+    | 'enableOrganizations';
   part?:
     | 'start'
     | 'emailCode'
diff --git a/packages/clerk-js/src/ui/lazyModules/components.ts b/packages/clerk-js/src/ui/lazyModules/components.ts
index 3a5ecee7a9c..40010045b32 100644
--- a/packages/clerk-js/src/ui/lazyModules/components.ts
+++ b/packages/clerk-js/src/ui/lazyModules/components.ts
@@ -27,6 +27,7 @@ const componentImportPaths = {
   SubscriptionDetails: () => import(/* webpackChunkName: "subscriptionDetails" */ '../components/SubscriptionDetails'),
   APIKeys: () => import(/* webpackChunkName: "apiKeys" */ '../components/APIKeys/APIKeys'),
   OAuthConsent: () => import(/* webpackChunkName: "oauthConsent" */ '../components/OAuthConsent/OAuthConsent'),
+  EnableOrganizations: () => import(/* webpackChunkName: "enableOrganizations" */ '../components/EnableOrganizations'),
 } as const;
 
 export const SignIn = lazy(() => componentImportPaths.SignIn().then(module => ({ default: module.SignIn })));
@@ -44,6 +45,14 @@ export const UserVerificationModal = lazy(() =>
   componentImportPaths.UserVerification().then(module => ({ default: module.UserVerificationModal })),
 );
 
+export const EnableOrganizations = lazy(() =>
+  componentImportPaths.EnableOrganizations().then(module => ({ default: module.EnableOrganizations })),
+);
+
+export const EnableOrganizationsModal = lazy(() =>
+  componentImportPaths.EnableOrganizations().then(module => ({ default: module.EnableOrganizationsModal })),
+);
+
 export const SignUp = lazy(() => componentImportPaths.SignUp().then(module => ({ default: module.SignUp })));
 
 export const SignUpModal = lazy(() => componentImportPaths.SignUp().then(module => ({ default: module.SignUpModal })));
@@ -144,6 +153,7 @@ export const ClerkComponents = {
   UserButton,
   UserProfile,
   UserVerification,
+  EnableOrganizations,
   OrganizationSwitcher,
   OrganizationList,
   OrganizationProfile,
@@ -154,6 +164,7 @@ export const ClerkComponents = {
   OrganizationProfileModal,
   CreateOrganizationModal,
   UserVerificationModal,
+  EnableOrganizationsModal,
   GoogleOneTap,
   Waitlist,
   WaitlistModal,
diff --git a/packages/clerk-js/src/ui/types.ts b/packages/clerk-js/src/ui/types.ts
index 3f9fe2a27ef..a7ff6e665c9 100644
--- a/packages/clerk-js/src/ui/types.ts
+++ b/packages/clerk-js/src/ui/types.ts
@@ -1,5 +1,6 @@
 import type {
   __internal_CheckoutProps,
+  __internal_EnableOrganizationsProps,
   __internal_OAuthConsentProps,
   __internal_PlanDetailsProps,
   __internal_SubscriptionDetailsProps,
@@ -75,6 +76,11 @@ export type UserVerificationCtx = __internal_UserVerificationProps & {
   mode?: ComponentMode;
 };
 
+export type EnableOrganizationsCtx = __internal_EnableOrganizationsProps & {
+  componentName: 'EnableOrganizations';
+  mode?: ComponentMode;
+};
+
 export type UserProfileCtx = UserProfileProps & {
   componentName: 'UserProfile';
   mode?: ComponentMode;
diff --git a/packages/react/src/isomorphicClerk.ts b/packages/react/src/isomorphicClerk.ts
index bb0ffd1633c..c88fa45c3cf 100644
--- a/packages/react/src/isomorphicClerk.ts
+++ b/packages/react/src/isomorphicClerk.ts
@@ -3,6 +3,7 @@ import { clerkEvents, createClerkEventBus } from '@clerk/shared/clerkEventBus';
 import { loadClerkJsScript } from '@clerk/shared/loadClerkJsScript';
 import type {
   __internal_CheckoutProps,
+  __internal_EnableOrganizationsModalProps,
   __internal_OAuthConsentProps,
   __internal_PlanDetailsProps,
   __internal_SubscriptionDetailsProps,
@@ -131,6 +132,7 @@ export class IsomorphicClerk implements IsomorphicLoadedClerk {
   private preopenOrganizationProfile?: null | OrganizationProfileProps = null;
   private preopenCreateOrganization?: null | CreateOrganizationProps = null;
   private preOpenWaitlist?: null | WaitlistProps = null;
+  private preopenEnableOrganizations?: null | __internal_EnableOrganizationsModalProps = null;
   private premountSignInNodes = new Map<HTMLDivElement, SignInProps | undefined>();
   private premountSignUpNodes = new Map<HTMLDivElement, SignUpProps | undefined>();
   private premountUserAvatarNodes = new Map<HTMLDivElement, UserAvatarProps | undefined>();
@@ -624,6 +626,10 @@ export class IsomorphicClerk implements IsomorphicLoadedClerk {
       clerkjs.openWaitlist(this.preOpenWaitlist);
     }
 
+    if (this.preopenEnableOrganizations !== null) {
+      clerkjs.__internal_openEnableOrganizations(this.preopenEnableOrganizations);
+    }
+
     this.premountSignInNodes.forEach((props, node) => {
       clerkjs.mountSignIn(node, props);
     });
@@ -865,6 +871,22 @@ export class IsomorphicClerk implements IsomorphicLoadedClerk {
     }
   };
 
+  __internal_openEnableOrganizations = (props?: __internal_EnableOrganizationsModalProps) => {
+    if (this.clerkjs && this.loaded) {
+      this.clerkjs.__internal_openEnableOrganizations(props);
+    } else {
+      this.preopenEnableOrganizations = props;
+    }
+  };
+
+  __internal_closeEnableOrganizations = () => {
+    if (this.clerkjs && this.loaded) {
+      this.clerkjs.__internal_closeEnableOrganizations();
+    } else {
+      this.preopenEnableOrganizations = null;
+    }
+  };
+
   openGoogleOneTap = (props?: GoogleOneTapProps) => {
     if (this.clerkjs && this.loaded) {
       this.clerkjs.openGoogleOneTap(props);
diff --git a/packages/shared/src/organization.ts b/packages/shared/src/organization.ts
index 12d8ea0689e..1d22d1ff498 100644
--- a/packages/shared/src/organization.ts
+++ b/packages/shared/src/organization.ts
@@ -1,7 +1,8 @@
-import type { OrganizationMembershipResource } from './types';
+import type { EnvironmentResource, LoadedClerk, OrganizationMembershipResource } from './types';
 
 /**
  * Finds the organization membership for a given organization ID from a list of memberships
+ *
  * @param organizationMemberships - Array of organization memberships to search through
  * @param organizationId - ID of the organization to find the membership for
  * @returns The matching organization membership or undefined if not found
@@ -14,3 +15,36 @@ export function getCurrentOrganizationMembership(
     organizationMembership => organizationMembership.organization.id === organizationId,
   );
 }
+
+/**
+ * Clerk instance with unstable environment access
+ *
+ * @internal
+ */
+export type ClerkWithEnvironment = {
+  __unstable__environment?: EnvironmentResource | null;
+};
+
+/**
+ * Wraps a hook function in a check to see if organization settings is enabled
+ *
+ * If not enabled, it will open a dialog with a prompt to enable organizations
+ *
+ * @internal
+ */
+export const withOrganizationSettingsEnabled =
+  <TParams extends any[], TReturn>(
+    hook: (...args: TParams) => TReturn,
+    getLoadedClerk: () => LoadedClerk | null | undefined,
+  ) =>
+  (...args: TParams): TReturn => {
+    const clerk = getLoadedClerk();
+    // @ts-expect-error - __unstable__environment is not typed
+    const environment = clerk?.__unstable__environment;
+
+    if (!environment?.organizationSettings.enabled) {
+      clerk?.__internal_openEnableOrganizations({});
+    }
+
+    return hook(...args);
+  };
diff --git a/packages/shared/src/react/hooks/useOrganization.tsx b/packages/shared/src/react/hooks/useOrganization.tsx
index b6e716324bd..10e007031b3 100644
--- a/packages/shared/src/react/hooks/useOrganization.tsx
+++ b/packages/shared/src/react/hooks/useOrganization.tsx
@@ -1,4 +1,4 @@
-import { getCurrentOrganizationMembership } from '../../organization';
+import { getCurrentOrganizationMembership, withOrganizationSettingsEnabled } from '../../organization';
 import { eventMethodCalled } from '../../telemetry/events/method-called';
 import type {
   GetDomainsParams,
@@ -20,6 +20,7 @@ import {
 import { STABLE_KEYS } from '../stable-keys';
 import type { PaginatedHookConfig, PaginatedResources, PaginatedResourcesWithDefault } from '../types';
 import { createCacheKeys } from './createCacheKeys';
+import { useClerk } from './useClerk';
 import { usePagesOrInfinite, useWithSafeValues } from './usePagesOrInfinite';
 
 /**
@@ -271,7 +272,7 @@ const undefinedPaginatedResource = {
  * }
  * ```
  */
-export function useOrganization<T extends UseOrganizationParams>(params?: T): UseOrganizationReturn<T> {
+function useOrganizationInternal<T extends UseOrganizationParams>(params?: T): UseOrganizationReturn<T> {
   const {
     domains: domainListParams,
     membershipRequests: membershipRequestsListParams,
@@ -494,3 +495,5 @@ export function useOrganization<T extends UseOrganizationParams>(params?: T): Us
     invitations,
   };
 }
+
+export const useOrganization = withOrganizationSettingsEnabled(useOrganizationInternal, () => useClerk());
diff --git a/packages/shared/src/react/hooks/useOrganizationList.tsx b/packages/shared/src/react/hooks/useOrganizationList.tsx
index 280e9b18363..853b7c4f82b 100644
--- a/packages/shared/src/react/hooks/useOrganizationList.tsx
+++ b/packages/shared/src/react/hooks/useOrganizationList.tsx
@@ -1,3 +1,4 @@
+import { withOrganizationSettingsEnabled } from '../../organization';
 import { eventMethodCalled } from '../../telemetry/events/method-called';
 import type {
   CreateOrganizationParams,
@@ -14,6 +15,7 @@ import { useAssertWrappedByClerkProvider, useClerkInstanceContext, useUserContex
 import { STABLE_KEYS } from '../stable-keys';
 import type { PaginatedHookConfig, PaginatedResources, PaginatedResourcesWithDefault } from '../types';
 import { createCacheKeys } from './createCacheKeys';
+import { useClerk } from './useClerk';
 import { usePagesOrInfinite, useWithSafeValues } from './usePagesOrInfinite';
 
 /**
@@ -247,7 +249,7 @@ export type UseOrganizationListReturn<T extends UseOrganizationListParams> =
  * export default UserInvitationsTable
  * ```
  */
-export function useOrganizationList<T extends UseOrganizationListParams>(params?: T): UseOrganizationListReturn<T> {
+function useOrganizationListInternal<T extends UseOrganizationListParams>(params?: T): UseOrganizationListReturn<T> {
   const { userMemberships, userInvitations, userSuggestions } = params || {};
 
   useAssertWrappedByClerkProvider('useOrganizationList');
@@ -396,3 +398,5 @@ export function useOrganizationList<T extends UseOrganizationListParams>(params?
     userSuggestions: suggestions,
   };
 }
+
+export const useOrganizationList = withOrganizationSettingsEnabled(useOrganizationListInternal, () => useClerk());
diff --git a/packages/shared/src/types/appearance.ts b/packages/shared/src/types/appearance.ts
index 7f0cb4f32fd..5c636b2a70f 100644
--- a/packages/shared/src/types/appearance.ts
+++ b/packages/shared/src/types/appearance.ts
@@ -1033,6 +1033,7 @@ export type OrganizationListTheme = Theme;
 export type OrganizationProfileTheme = Theme;
 export type CreateOrganizationTheme = Theme;
 export type UserVerificationTheme = Theme;
+export type EnableOrganizationsTheme = Theme;
 export type WaitlistTheme = Theme;
 export type PricingTableTheme = Theme;
 export type CheckoutTheme = Theme;
@@ -1121,4 +1122,9 @@ export type Appearance<T = Theme> = T &
      * Theme overrides that only apply to the `<TaskChooseOrganization />` component
      */
     taskChooseOrganization?: T;
+    /**
+     * Theme overrides that only apply to the `<EnableOrganizations/>` component
+     * TODO -> Change to __internal
+     */
+    enableOrganizations?: T;
   };
diff --git a/packages/shared/src/types/clerk.ts b/packages/shared/src/types/clerk.ts
index b37e7d0a8a8..38ce631f988 100644
--- a/packages/shared/src/types/clerk.ts
+++ b/packages/shared/src/types/clerk.ts
@@ -4,6 +4,7 @@ import type {
   Appearance,
   CheckoutTheme,
   CreateOrganizationTheme,
+  EnableOrganizationsTheme,
   OAuthConsentTheme,
   OrganizationListTheme,
   OrganizationProfileTheme,
@@ -320,6 +321,18 @@ export interface Clerk {
    */
   __internal_closeReverification: () => void;
 
+  /**
+   * Opens the Clerk Enable Organizations component in a modal.
+   *
+   * @param props - Optional user verification configuration parameters.
+   */
+  __internal_openEnableOrganizations: (props?: __internal_EnableOrganizationsModalProps) => void;
+
+  /**
+   * Closes the Clerk Enable Organizations modal.
+   */
+  __internal_closeEnableOrganizations: () => void;
+
   /**
    * Opens the Google One Tap component.
    *
@@ -1429,6 +1442,12 @@ export type __internal_UserVerificationProps = RoutingOptions & {
 
 export type __internal_UserVerificationModalProps = WithoutRouting<__internal_UserVerificationProps>;
 
+export type __internal_EnableOrganizationsProps = RoutingOptions & {
+  appearance?: EnableOrganizationsTheme;
+};
+
+export type __internal_EnableOrganizationsModalProps = WithoutRouting<__internal_EnableOrganizationsProps>;
+
 export type __internal_ComponentNavigationContext = {
   /**
    * The `navigate` reference within the component router context
diff --git a/packages/vue/src/composables/useOrganization.ts b/packages/vue/src/composables/useOrganization.ts
index 409d31396e2..25166cc5b4b 100644
--- a/packages/vue/src/composables/useOrganization.ts
+++ b/packages/vue/src/composables/useOrganization.ts
@@ -1,9 +1,10 @@
-import { getCurrentOrganizationMembership } from '@clerk/shared/organization';
-import type { OrganizationMembershipResource, OrganizationResource } from '@clerk/shared/types';
+import { getCurrentOrganizationMembership, withOrganizationSettingsEnabled } from '@clerk/shared/organization';
+import type { LoadedClerk, OrganizationMembershipResource, OrganizationResource } from '@clerk/shared/types';
 import { computed } from 'vue';
 
 import type { ToComputedRefs } from '../utils';
 import { toComputedRefs } from '../utils';
+import { useClerk } from './useClerk';
 import { useClerkContext } from './useClerkContext';
 import { useSession } from './useSession';
 
@@ -52,7 +53,7 @@ type UseOrganization = () => ToComputedRefs<UseOrganizationReturn>;
  *   </div>
  * </template>
  */
-export const useOrganization: UseOrganization = () => {
+const useOrganizationInternal: UseOrganization = () => {
   const { clerk, organizationCtx } = useClerkContext('useOrganization');
   const { session } = useSession();
 
@@ -87,3 +88,8 @@ export const useOrganization: UseOrganization = () => {
 
   return toComputedRefs(result);
 };
+
+export const useOrganization = withOrganizationSettingsEnabled(
+  useOrganizationInternal,
+  () => useClerk().value as LoadedClerk,
+);

From 30e9e47909e1057067b9a7723dcc8dd8f0f80630 Mon Sep 17 00:00:00 2001
From: Laura Beatris <48022589+LauraBeatris@users.noreply.github.com>
Date: Wed, 5 Nov 2025 14:53:18 -0300
Subject: [PATCH 03/30] Replace throwing error with opening modal

---
 packages/clerk-js/src/core/clerk.ts           |  39 ++-
 packages/clerk-js/src/core/warnings.ts        |  13 -
 packages/clerk-js/src/ui/Components.tsx       |  55 +++--
 .../components/EnableOrganizations/index.tsx  |  63 -----
 .../EnableOrganizationsPrompt/index.tsx       | 232 ++++++++++++++++++
 .../components/EnableOrganizations.tsx        |  24 --
 .../clerk-js/src/ui/lazyModules/components.ts |  14 +-
 packages/clerk-js/src/ui/types.ts             |   4 +-
 packages/react/src/isomorphicClerk.ts         |  15 +-
 packages/shared/src/organization.ts           |  16 +-
 .../src/react/hooks/useOrganization.tsx       |   6 +-
 .../src/react/hooks/useOrganizationList.tsx   |   6 +-
 packages/shared/src/types/appearance.ts       |   1 -
 packages/shared/src/types/clerk.ts            |  34 +--
 .../vue/src/composables/useOrganization.ts    |   1 +
 playground/app-router/src/app/test.tsx        |   9 +
 16 files changed, 319 insertions(+), 213 deletions(-)
 delete mode 100644 packages/clerk-js/src/ui/components/EnableOrganizations/index.tsx
 create mode 100644 packages/clerk-js/src/ui/components/EnableOrganizationsPrompt/index.tsx
 delete mode 100644 packages/clerk-js/src/ui/contexts/components/EnableOrganizations.tsx
 create mode 100644 playground/app-router/src/app/test.tsx

diff --git a/packages/clerk-js/src/core/clerk.ts b/packages/clerk-js/src/core/clerk.ts
index 4b2c07fb6d8..5133eed55e8 100644
--- a/packages/clerk-js/src/core/clerk.ts
+++ b/packages/clerk-js/src/core/clerk.ts
@@ -23,7 +23,7 @@ import type {
   __experimental_CheckoutInstance,
   __experimental_CheckoutOptions,
   __internal_CheckoutProps,
-  __internal_EnableOrganizationsModalProps,
+  __internal_EnableOrganizationsPromptProps,
   __internal_OAuthConsentProps,
   __internal_PlanDetailsProps,
   __internal_SubscriptionDetailsProps,
@@ -178,7 +178,6 @@ declare global {
 
 const CANNOT_RENDER_BILLING_DISABLED_ERROR_CODE = 'cannot_render_billing_disabled';
 const CANNOT_RENDER_USER_MISSING_ERROR_CODE = 'cannot_render_user_missing';
-const CANNOT_RENDER_ORGANIZATIONS_DISABLED_ERROR_CODE = 'cannot_render_organizations_disabled';
 const CANNOT_RENDER_ORGANIZATION_MISSING_ERROR_CODE = 'cannot_render_organization_missing';
 const CANNOT_RENDER_SINGLE_SESSION_ENABLED_ERROR_CODE = 'cannot_render_single_session_enabled';
 const CANNOT_RENDER_API_KEYS_DISABLED_ERROR_CODE = 'cannot_render_api_keys_disabled';
@@ -746,16 +745,16 @@ export class Clerk implements ClerkInterface {
     void this.#componentControls.ensureMounted().then(controls => controls.closeModal('userVerification'));
   };
 
-  public __internal_openEnableOrganizations = (props?: __internal_EnableOrganizationsModalProps): void => {
+  public __internal_openEnableOrganizationsPrompt = (props?: __internal_EnableOrganizationsPromptProps): void => {
     this.assertComponentsReady(this.#componentControls);
     void this.#componentControls
-      .ensureMounted({ preloadHint: 'EnableOrganizations' })
-      .then(controls => controls.openModal('enableOrganizations', props || {}));
+      .ensureMounted({ preloadHint: 'EnableOrganizationsPrompt' })
+      .then(controls => controls.openModal('enableOrganizationsPrompt', props || {}));
   };
 
   public __internal_closeEnableOrganizations = (): void => {
     this.assertComponentsReady(this.#componentControls);
-    void this.#componentControls.ensureMounted().then(controls => controls.closeModal('enableOrganizations'));
+    void this.#componentControls.ensureMounted().then(controls => controls.closeModal('enableOrganizationsPrompt'));
   };
 
   public __internal_openBlankCaptchaModal = (): Promise<unknown> => {
@@ -831,8 +830,8 @@ export class Clerk implements ClerkInterface {
     this.assertComponentsReady(this.#componentControls);
     if (disabledOrganizationsFeature(this, this.environment)) {
       if (this.#instanceType === 'development') {
-        throw new ClerkRuntimeError(warnings.cannotRenderAnyOrganizationComponent('OrganizationProfile'), {
-          code: CANNOT_RENDER_ORGANIZATIONS_DISABLED_ERROR_CODE,
+        this.__internal_openEnableOrganizationsPrompt({
+          callerName: 'OrganizationSwitcher',
         });
       }
       return;
@@ -861,8 +860,8 @@ export class Clerk implements ClerkInterface {
     this.assertComponentsReady(this.#componentControls);
     if (disabledOrganizationsFeature(this, this.environment)) {
       if (this.#instanceType === 'development') {
-        throw new ClerkRuntimeError(warnings.cannotRenderAnyOrganizationComponent('CreateOrganization'), {
-          code: CANNOT_RENDER_ORGANIZATIONS_DISABLED_ERROR_CODE,
+        this.__internal_openEnableOrganizationsPrompt({
+          callerName: 'OrganizationSwitcher',
         });
       }
       return;
@@ -1003,8 +1002,8 @@ export class Clerk implements ClerkInterface {
     this.assertComponentsReady(this.#componentControls);
     if (disabledOrganizationsFeature(this, this.environment)) {
       if (this.#instanceType === 'development') {
-        throw new ClerkRuntimeError(warnings.cannotRenderAnyOrganizationComponent('OrganizationProfile'), {
-          code: CANNOT_RENDER_ORGANIZATIONS_DISABLED_ERROR_CODE,
+        this.__internal_openEnableOrganizationsPrompt({
+          callerName: 'OrganizationProfile',
         });
       }
       return;
@@ -1043,8 +1042,8 @@ export class Clerk implements ClerkInterface {
     this.assertComponentsReady(this.#componentControls);
     if (disabledOrganizationsFeature(this, this.environment)) {
       if (this.#instanceType === 'development') {
-        throw new ClerkRuntimeError(warnings.cannotRenderAnyOrganizationComponent('CreateOrganization'), {
-          code: CANNOT_RENDER_ORGANIZATIONS_DISABLED_ERROR_CODE,
+        this.__internal_openEnableOrganizationsPrompt({
+          callerName: 'OrganizationSwitcher',
         });
       }
       return;
@@ -1074,8 +1073,8 @@ export class Clerk implements ClerkInterface {
     this.assertComponentsReady(this.#componentControls);
     if (disabledOrganizationsFeature(this, this.environment)) {
       if (this.#instanceType === 'development') {
-        throw new ClerkRuntimeError(warnings.cannotRenderAnyOrganizationComponent('OrganizationSwitcher'), {
-          code: CANNOT_RENDER_ORGANIZATIONS_DISABLED_ERROR_CODE,
+        this.__internal_openEnableOrganizationsPrompt({
+          callerName: 'OrganizationSwitcher',
         });
       }
       return;
@@ -1113,8 +1112,8 @@ export class Clerk implements ClerkInterface {
     this.assertComponentsReady(this.#componentControls);
     if (disabledOrganizationsFeature(this, this.environment)) {
       if (this.#instanceType === 'development') {
-        throw new ClerkRuntimeError(warnings.cannotRenderAnyOrganizationComponent('OrganizationList'), {
-          code: CANNOT_RENDER_ORGANIZATIONS_DISABLED_ERROR_CODE,
+        this.__internal_openEnableOrganizationsPrompt({
+          callerName: 'OrganizationList',
         });
       }
       return;
@@ -1309,8 +1308,8 @@ export class Clerk implements ClerkInterface {
 
     if (disabledOrganizationsFeature(this, this.environment)) {
       if (this.#instanceType === 'development') {
-        throw new ClerkRuntimeError(warnings.cannotRenderAnyOrganizationComponent('TaskChooseOrganization'), {
-          code: CANNOT_RENDER_ORGANIZATIONS_DISABLED_ERROR_CODE,
+        this.__internal_openEnableOrganizationsPrompt({
+          callerName: 'OrganizationSwitcher',
         });
       }
       return;
diff --git a/packages/clerk-js/src/core/warnings.ts b/packages/clerk-js/src/core/warnings.ts
index ac0621a4160..b53fee0884d 100644
--- a/packages/clerk-js/src/core/warnings.ts
+++ b/packages/clerk-js/src/core/warnings.ts
@@ -4,18 +4,6 @@ const formatWarning = (msg: string) => {
   return `🔒 Clerk:\n${msg.trim()}\n(This notice only appears in development)`;
 };
 
-const createMessageForDisabledOrganizations = (
-  componentName:
-    | 'OrganizationProfile'
-    | 'OrganizationSwitcher'
-    | 'OrganizationList'
-    | 'CreateOrganization'
-    | 'TaskChooseOrganization',
-) => {
-  return formatWarning(
-    `The <${componentName}/> cannot be rendered when the feature is turned off. Visit 'dashboard.clerk.com' to enable the feature. Since the feature is turned off, this is no-op.`,
-  );
-};
 const createMessageForDisabledBilling = (componentName: 'PricingTable' | 'Checkout' | 'PlanDetails') => {
   return formatWarning(
     `The <${componentName}/> component cannot be rendered when billing is disabled. Visit 'https://dashboard.clerk.com/last-active?path=billing/settings' to follow the necessary steps to enable billing. Since billing is disabled, this is no-op.`,
@@ -37,7 +25,6 @@ const warnings = {
   cannotRenderComponentWhenUserDoesNotExist:
     '<UserProfile/> cannot render unless a user is signed in. Since no user is signed in, this is no-op.',
   cannotRenderComponentWhenOrgDoesNotExist: `<OrganizationProfile/> cannot render unless an organization is active. Since no organization is currently active, this is no-op.`,
-  cannotRenderAnyOrganizationComponent: createMessageForDisabledOrganizations,
   cannotRenderAnyBillingComponent: createMessageForDisabledBilling,
   cannotOpenUserProfile:
     'The UserProfile modal cannot render unless a user is signed in. Since no user is signed in, this is no-op.',
diff --git a/packages/clerk-js/src/ui/Components.tsx b/packages/clerk-js/src/ui/Components.tsx
index 9ae84de9bc9..d103aa86eb5 100644
--- a/packages/clerk-js/src/ui/Components.tsx
+++ b/packages/clerk-js/src/ui/Components.tsx
@@ -1,6 +1,6 @@
 import type {
   __internal_CheckoutProps,
-  __internal_EnableOrganizationsProps,
+  __internal_EnableOrganizationsPromptProps,
   __internal_PlanDetailsProps,
   __internal_SubscriptionDetailsProps,
   __internal_UserVerificationProps,
@@ -28,7 +28,7 @@ import type { ClerkComponentName } from './lazyModules/components';
 import {
   BlankCaptchaModal,
   CreateOrganizationModal,
-  EnableOrganizationsModal,
+  EnableOrganizationsPrompt,
   ImpersonationFab,
   KeylessPrompt,
   OrganizationProfileModal,
@@ -82,7 +82,7 @@ export type ComponentControls = {
       | 'userVerification'
       | 'waitlist'
       | 'blankCaptcha'
-      | 'enableOrganizations',
+      | 'enableOrganizationsPrompt',
   >(
     modal: T,
     props: T extends 'signIn'
@@ -93,8 +93,8 @@ export type ComponentControls = {
           ? __internal_UserVerificationProps
           : T extends 'waitlist'
             ? WaitlistProps
-            : T extends 'enableOrganizations'
-              ? __internal_EnableOrganizationsProps
+            : T extends 'enableOrganizationsPrompt'
+              ? __internal_EnableOrganizationsPromptProps
               : UserProfileProps,
   ) => void;
   closeModal: (
@@ -108,7 +108,7 @@ export type ComponentControls = {
       | 'userVerification'
       | 'waitlist'
       | 'blankCaptcha'
-      | 'enableOrganizations',
+      | 'enableOrganizationsPrompt',
     options?: {
       notify?: boolean;
     },
@@ -158,7 +158,7 @@ interface ComponentsState {
   userVerificationModal: null | __internal_UserVerificationProps;
   organizationProfileModal: null | OrganizationProfileProps;
   createOrganizationModal: null | CreateOrganizationProps;
-  enableOrganizationsModal: null | __internal_EnableOrganizationsProps;
+  enableOrganizationsPromptModal: null | __internal_EnableOrganizationsPromptProps;
   blankCaptchaModal: null;
   organizationSwitcherPrefetch: boolean;
   waitlistModal: null | WaitlistProps;
@@ -252,7 +252,7 @@ const Components = (props: ComponentsProps) => {
     userVerificationModal: null,
     organizationProfileModal: null,
     createOrganizationModal: null,
-    enableOrganizationsModal: null,
+    enableOrganizationsPromptModal: null,
     organizationSwitcherPrefetch: false,
     waitlistModal: null,
     blankCaptchaModal: null,
@@ -282,7 +282,6 @@ const Components = (props: ComponentsProps) => {
     createOrganizationModal,
     waitlistModal,
     blankCaptchaModal,
-    enableOrganizationsModal,
     checkoutDrawer,
     planDetailsDrawer,
     subscriptionDetailsDrawer,
@@ -352,6 +351,18 @@ const Components = (props: ComponentsProps) => {
     };
 
     componentsControls.openModal = (name, props) => {
+      // Prevent opening enableOrganizations modal if it's already open
+      // to avoid duplicate mounting when component is called multiple times
+      if (name === 'enableOrganizationsPrompt') {
+        setState(s => {
+          if (s.enableOrganizationsPromptModal) {
+            return s; // Modal is already open, don't update state
+          }
+          return { ...s, [`${name}Modal`]: props };
+        });
+        return;
+      }
+
       function handleCloseModalForExperimentalUserVerification() {
         if (!('afterVerificationCancelled' in props)) {
           return;
@@ -494,22 +505,6 @@ const Components = (props: ComponentsProps) => {
     </LazyModalRenderer>
   );
 
-  const mountedEnableOrganizationsModal = (
-    <LazyModalRenderer
-      globalAppearance={state.appearance}
-      appearanceKey={'enableOrganizations'}
-      componentAppearance={enableOrganizationsModal?.appearance}
-      flowName={'enableOrganizations'}
-      onClose={() => componentsControls.closeModal('enableOrganizations')}
-      onExternalNavigate={() => componentsControls.closeModal('enableOrganizations')}
-      startPath={buildVirtualRouterUrl({ base: '/enable-organizations', path: urlStateParam?.path })}
-      componentName={'EnableOrganizationsModal'}
-      modalContainerSx={{ alignItems: 'center' }}
-    >
-      <EnableOrganizationsModal {...enableOrganizationsModal} />
-    </LazyModalRenderer>
-  );
-
   const mountedOrganizationProfileModal = (
     <LazyModalRenderer
       globalAppearance={state.appearance}
@@ -613,7 +608,6 @@ const Components = (props: ComponentsProps) => {
         {createOrganizationModal && mountedCreateOrganizationModal}
         {waitlistModal && mountedWaitlistModal}
         {blankCaptchaModal && mountedBlankCaptchaModal}
-        {enableOrganizationsModal && mountedEnableOrganizationsModal}
 
         <MountedCheckoutDrawer
           appearance={state.appearance}
@@ -639,6 +633,15 @@ const Components = (props: ComponentsProps) => {
           </LazyImpersonationFabProvider>
         )}
 
+        {state.enableOrganizationsPromptModal && (
+          <LazyImpersonationFabProvider globalAppearance={state.appearance}>
+            <EnableOrganizationsPrompt
+              callerString='useOrganization'
+              {...state.enableOrganizationsPromptModal}
+            />
+          </LazyImpersonationFabProvider>
+        )}
+
         {state.options?.__internal_keyless_claimKeylessApplicationUrl &&
           state.options?.__internal_keyless_copyInstanceKeysUrl && (
             <LazyImpersonationFabProvider globalAppearance={state.appearance}>
diff --git a/packages/clerk-js/src/ui/components/EnableOrganizations/index.tsx b/packages/clerk-js/src/ui/components/EnableOrganizations/index.tsx
deleted file mode 100644
index 031c4f51f71..00000000000
--- a/packages/clerk-js/src/ui/components/EnableOrganizations/index.tsx
+++ /dev/null
@@ -1,63 +0,0 @@
-import type {
-  __internal_EnableOrganizationsModalProps,
-  __internal_EnableOrganizationsProps,
-} from '@clerk/shared/types';
-import React from 'react';
-
-import { EnableOrganizationsContext } from '@/ui/contexts/components/EnableOrganizations';
-import { Card } from '@/ui/elements/Card';
-import { withCardStateProvider } from '@/ui/elements/contexts';
-import { Header } from '@/ui/elements/Header';
-
-import { withCoreSessionSwitchGuard } from '../../contexts';
-import { Flow } from '../../customizables';
-import { Route, Switch } from '../../router';
-
-const EnableOrganizationsContent = withCardStateProvider(() => (
-  <Card.Root>
-    <Card.Content>
-      <Header.Root>
-        <Header.Title>Enable organizations</Header.Title>
-      </Header.Root>
-    </Card.Content>
-    <Card.Footer />
-  </Card.Root>
-));
-
-function EnableOrganizationsRoutes(): JSX.Element {
-  return (
-    <Flow.Root flow='enableOrganizations'>
-      <Switch>
-        <Route index>
-          <EnableOrganizationsContent />
-        </Route>
-      </Switch>
-    </Flow.Root>
-  );
-}
-
-EnableOrganizationsRoutes.displayName = 'EnableOrganizations';
-
-const EnableOrganizations: React.ComponentType<__internal_EnableOrganizationsProps> =
-  withCoreSessionSwitchGuard(EnableOrganizationsRoutes);
-
-// TODO -> Maybe move this to a inner folder for all in-app modals
-const EnableOrganizationsModal = (props: __internal_EnableOrganizationsModalProps): JSX.Element => {
-  return (
-    <Route path='enable-organizations'>
-      <EnableOrganizationsContext.Provider
-        value={{
-          componentName: 'EnableOrganizations',
-          routing: 'virtual',
-          ...props,
-        }}
-      >
-        <div>
-          <EnableOrganizations routing='virtual' />
-        </div>
-      </EnableOrganizationsContext.Provider>
-    </Route>
-  );
-};
-
-export { EnableOrganizations, EnableOrganizationsModal };
diff --git a/packages/clerk-js/src/ui/components/EnableOrganizationsPrompt/index.tsx b/packages/clerk-js/src/ui/components/EnableOrganizationsPrompt/index.tsx
new file mode 100644
index 00000000000..7e3c6b7be88
--- /dev/null
+++ b/packages/clerk-js/src/ui/components/EnableOrganizationsPrompt/index.tsx
@@ -0,0 +1,232 @@
+import { css } from '@emotion/react';
+
+import { Modal } from '@/ui/elements/Modal';
+import { InternalThemeProvider } from '@/ui/styledSystem';
+
+import { Button, Flex } from '../../customizables';
+import { Portal } from '../../elements/Portal';
+
+const baseElementStyles = css`
+  box-sizing: border-box;
+  padding: 0;
+  margin: 0;
+  background: none;
+  border: none;
+  line-height: 1.5;
+  font-family:
+    -apple-system,
+    BlinkMacSystemFont,
+    avenir next,
+    avenir,
+    segoe ui,
+    helvetica neue,
+    helvetica,
+    Cantarell,
+    Ubuntu,
+    roboto,
+    noto,
+    arial,
+    sans-serif;
+  text-decoration: none;
+`;
+
+const mainCTAStyles = css`
+  ${baseElementStyles};
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  height: 1.75rem;
+  max-width: 14.625rem;
+  padding: 0.25rem 0.625rem;
+  border-radius: 0.375rem;
+  font-size: 0.75rem;
+  font-weight: 500;
+  letter-spacing: 0.12px;
+  color: 'white';
+  text-shadow: 0px 1px 2px rgba(0, 0, 0, 0.32);
+  white-space: nowrap;
+  user-select: none;
+  cursor: pointer;
+  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 30.5%, rgba(0, 0, 0, 0.05) 100%), #454545;
+  box-shadow:
+    0px 0px 0px 1px rgba(255, 255, 255, 0.04) inset,
+    0px 1px 0px 0px rgba(255, 255, 255, 0.04) inset,
+    0px 0px 0px 1px rgba(0, 0, 0, 0.12),
+    0px 1.5px 2px 0px rgba(0, 0, 0, 0.48),
+    0px 0px 4px 0px rgba(243, 107, 22, 0) inset;
+`;
+
+type EnableOrganizationsPromptProps = {
+  callerString: string;
+};
+
+const EnableOrganizationsPromptInternal = (_props: EnableOrganizationsPromptProps) => {
+  return (
+    <Portal>
+      <Modal
+        canCloseModal={false}
+        contentSx={() => ({ animation: 'unset' })}
+      >
+        <Flex
+          sx={t => ({
+            position: 'fixed',
+            top: '50%',
+            left: '50%',
+            transform: 'translate(-50%, -50%)',
+            flexDirection: 'column',
+            gap: t.space.$1,
+            width: 'fit-content',
+            maxWidth: '25rem',
+            borderRadius: '1.25rem',
+            overflow: 'hidden',
+            fontFamily: t.fonts.$main,
+            background: 'linear-gradient(180deg, rgba(255, 255, 255, 0.16) 0%, rgba(255, 255, 255, 0) 100%), #1f1f1f',
+            boxShadow:
+              '0px 0px 0px 0.5px #2F3037 inset, 0px 1px 0px 0px rgba(255, 255, 255, 0.08) inset, 0px 0px 0.8px 0.8px rgba(255, 255, 255, 0.20) inset, 0px 0px 0px 0px rgba(255, 255, 255, 0.72), 0px 16px 36px -6px rgba(0, 0, 0, 0.36), 0px 6px 16px -2px rgba(0, 0, 0, 0.20);',
+            transition: 'all 195ms cubic-bezier(0.2, 0.61, 0.1, 1)',
+          })}
+        >
+          <Flex
+            sx={t => ({
+              display: 'flex',
+              flexDirection: 'column',
+              padding: `${t.space.$3} ${t.space.$4}`,
+              gap: t.space.$2,
+            })}
+          >
+            <Flex
+              as='header'
+              sx={t => ({
+                display: 'flex',
+                alignItems: 'center',
+                gap: t.space.$2,
+              })}
+            >
+              <svg
+                width='20'
+                height='20'
+                viewBox='0 0 20 20'
+                fill='none'
+                xmlns='http://www.w3.org/2000/svg'
+              >
+                <path
+                  opacity='0.2'
+                  d='M17.25 10C17.25 14.0041 14.0041 17.25 10 17.25C5.99594 17.25 2.75 14.0041 2.75 10C2.75 5.99594 5.99594 2.75 10 2.75C14.0041 2.75 17.25 5.99594 17.25 10Z'
+                  fill='#EAB308'
+                />
+                <path
+                  fillRule='evenodd'
+                  clipRule='evenodd'
+                  d='M10 3.5C6.41015 3.5 3.5 6.41015 3.5 10C3.5 13.5899 6.41015 16.5 10 16.5C13.5899 16.5 16.5 13.5899 16.5 10C16.5 6.41015 13.5899 3.5 10 3.5ZM2 10C2 5.58172 5.58172 2 10 2C14.4183 2 18 5.58172 18 10C18 14.4183 14.4183 18 10 18C5.58172 18 2 14.4183 2 10Z'
+                  fill='#EAB308'
+                />
+                <path
+                  fillRule='evenodd'
+                  clipRule='evenodd'
+                  d='M10 6C10.5523 6 11 6.44772 11 7V9C11 9.55228 10.5523 10 10 10C9.44772 10 9 9.55228 9 9V7C9 6.44772 9.44772 6 10 6Z'
+                  fill='#EAB308'
+                />
+                <path
+                  fillRule='evenodd'
+                  clipRule='evenodd'
+                  d='M10 12C10.5523 12 11 12.4477 11 13V13.01C11 13.5623 10.5523 14.01 10 14.01C9.44772 14.01 9 13.5623 9 13.01V13C9 12.4477 9.44772 12 10 12Z'
+                  fill='#EAB308'
+                />
+              </svg>
+
+              <h1
+                css={css`
+                  ${baseElementStyles};
+                  color: white;
+                  font-size: 0.9rem;
+                  font-weight: 500;
+                `}
+              >
+                Organizations feature required
+              </h1>
+            </Flex>
+
+            <p
+              css={css`
+                ${baseElementStyles};
+                color: #c3c3c6;
+                font-size: 0.88rem;
+                font-weight: 400;
+                line-height: 1.125rem;
+              `}
+            >
+              To use the{' '}
+              <code
+                css={css`
+                  ${baseElementStyles};
+                  color: white;
+                `}
+              >
+                useOrganization
+              </code>{' '}
+              hook,
+              <br />
+              you’ll need to enable the Organizations feature
+              <br />
+              for your app first.
+              <br />
+              <a
+                css={css`
+                  ${baseElementStyles};
+                  color: #a8a8ff;
+                  font-size: inherit;
+                  font-weight: 500;
+                  line-height: 1rem;
+                `}
+                href='https://clerk.com/docs/guides/organizations'
+                target='_blank'
+                rel='noopener noreferrer'
+              >
+                Learn more about this add-on.
+              </a>
+            </p>
+          </Flex>
+
+          <Flex
+            sx={() => ({
+              borderBottom: '1px solid rgba(255, 255, 255, 0.10)',
+              background: 'rgba(0, 0, 0, 0.80)',
+              overflow: 'hidden',
+              width: '100%',
+              height: '1px',
+            })}
+          />
+
+          <Flex
+            sx={t => ({
+              paddingLeft: `${t.space.$4}`,
+              paddingRight: `${t.space.$4}`,
+              paddingTop: `${t.space.$3}`,
+              paddingBottom: `${t.space.$5}`,
+              flexDirection: 'column',
+              gap: t.space.$3,
+              justifyContent: 'center',
+            })}
+          >
+            <Button variant='solid'>Enable Organizations</Button>
+            <Button
+              variant='bordered'
+              sx={t => ({ color: t.colors.$white })}
+            >
+              I&apos;ll remove it myself
+            </Button>
+          </Flex>
+        </Flex>
+      </Modal>
+    </Portal>
+  );
+};
+
+export const EnableOrganizationsPrompt = (props: EnableOrganizationsPromptProps) => {
+  return (
+    <InternalThemeProvider>
+      <EnableOrganizationsPromptInternal {...props} />
+    </InternalThemeProvider>
+  );
+};
diff --git a/packages/clerk-js/src/ui/contexts/components/EnableOrganizations.tsx b/packages/clerk-js/src/ui/contexts/components/EnableOrganizations.tsx
deleted file mode 100644
index e6dbc52d294..00000000000
--- a/packages/clerk-js/src/ui/contexts/components/EnableOrganizations.tsx
+++ /dev/null
@@ -1,24 +0,0 @@
-import { createContext, useContext } from 'react';
-
-import type { EnableOrganizationsCtx } from '../../types';
-
-export type EnableOrganizationsContextType = EnableOrganizationsCtx;
-
-export const EnableOrganizationsContext = createContext<EnableOrganizationsCtx | null>(null);
-
-export const useEnableOrganizations = (): EnableOrganizationsContextType => {
-  const context = useContext(EnableOrganizationsContext);
-
-  if (!context || context.componentName !== 'EnableOrganizations') {
-    throw new Error(
-      'Clerk: useEnableOrganizationsContext called outside of the mounted EnableOrganizations component.',
-    );
-  }
-
-  const { componentName, ...ctx } = context;
-
-  return {
-    ...ctx,
-    componentName,
-  };
-};
diff --git a/packages/clerk-js/src/ui/lazyModules/components.ts b/packages/clerk-js/src/ui/lazyModules/components.ts
index 40010045b32..98c2f7769e3 100644
--- a/packages/clerk-js/src/ui/lazyModules/components.ts
+++ b/packages/clerk-js/src/ui/lazyModules/components.ts
@@ -27,7 +27,8 @@ const componentImportPaths = {
   SubscriptionDetails: () => import(/* webpackChunkName: "subscriptionDetails" */ '../components/SubscriptionDetails'),
   APIKeys: () => import(/* webpackChunkName: "apiKeys" */ '../components/APIKeys/APIKeys'),
   OAuthConsent: () => import(/* webpackChunkName: "oauthConsent" */ '../components/OAuthConsent/OAuthConsent'),
-  EnableOrganizations: () => import(/* webpackChunkName: "enableOrganizations" */ '../components/EnableOrganizations'),
+  EnableOrganizationsPrompt: () =>
+    import(/* webpackChunkName: "enableOrganizationsPrompt" */ '../components/EnableOrganizationsPrompt'),
 } as const;
 
 export const SignIn = lazy(() => componentImportPaths.SignIn().then(module => ({ default: module.SignIn })));
@@ -45,12 +46,8 @@ export const UserVerificationModal = lazy(() =>
   componentImportPaths.UserVerification().then(module => ({ default: module.UserVerificationModal })),
 );
 
-export const EnableOrganizations = lazy(() =>
-  componentImportPaths.EnableOrganizations().then(module => ({ default: module.EnableOrganizations })),
-);
-
-export const EnableOrganizationsModal = lazy(() =>
-  componentImportPaths.EnableOrganizations().then(module => ({ default: module.EnableOrganizationsModal })),
+export const EnableOrganizationsPrompt = lazy(() =>
+  componentImportPaths.EnableOrganizationsPrompt().then(module => ({ default: module.EnableOrganizationsPrompt })),
 );
 
 export const SignUp = lazy(() => componentImportPaths.SignUp().then(module => ({ default: module.SignUp })));
@@ -153,7 +150,7 @@ export const ClerkComponents = {
   UserButton,
   UserProfile,
   UserVerification,
-  EnableOrganizations,
+  EnableOrganizationsPrompt,
   OrganizationSwitcher,
   OrganizationList,
   OrganizationProfile,
@@ -164,7 +161,6 @@ export const ClerkComponents = {
   OrganizationProfileModal,
   CreateOrganizationModal,
   UserVerificationModal,
-  EnableOrganizationsModal,
   GoogleOneTap,
   Waitlist,
   WaitlistModal,
diff --git a/packages/clerk-js/src/ui/types.ts b/packages/clerk-js/src/ui/types.ts
index a7ff6e665c9..053a7f0abd5 100644
--- a/packages/clerk-js/src/ui/types.ts
+++ b/packages/clerk-js/src/ui/types.ts
@@ -1,6 +1,6 @@
 import type {
   __internal_CheckoutProps,
-  __internal_EnableOrganizationsProps,
+  __internal_EnableOrganizationsPromptProps,
   __internal_OAuthConsentProps,
   __internal_PlanDetailsProps,
   __internal_SubscriptionDetailsProps,
@@ -76,7 +76,7 @@ export type UserVerificationCtx = __internal_UserVerificationProps & {
   mode?: ComponentMode;
 };
 
-export type EnableOrganizationsCtx = __internal_EnableOrganizationsProps & {
+export type EnableOrganizationsCtx = __internal_EnableOrganizationsPromptProps & {
   componentName: 'EnableOrganizations';
   mode?: ComponentMode;
 };
diff --git a/packages/react/src/isomorphicClerk.ts b/packages/react/src/isomorphicClerk.ts
index c88fa45c3cf..17aec8cc4b6 100644
--- a/packages/react/src/isomorphicClerk.ts
+++ b/packages/react/src/isomorphicClerk.ts
@@ -3,7 +3,7 @@ import { clerkEvents, createClerkEventBus } from '@clerk/shared/clerkEventBus';
 import { loadClerkJsScript } from '@clerk/shared/loadClerkJsScript';
 import type {
   __internal_CheckoutProps,
-  __internal_EnableOrganizationsModalProps,
+  __internal_EnableOrganizationsPromptProps,
   __internal_OAuthConsentProps,
   __internal_PlanDetailsProps,
   __internal_SubscriptionDetailsProps,
@@ -132,7 +132,6 @@ export class IsomorphicClerk implements IsomorphicLoadedClerk {
   private preopenOrganizationProfile?: null | OrganizationProfileProps = null;
   private preopenCreateOrganization?: null | CreateOrganizationProps = null;
   private preOpenWaitlist?: null | WaitlistProps = null;
-  private preopenEnableOrganizations?: null | __internal_EnableOrganizationsModalProps = null;
   private premountSignInNodes = new Map<HTMLDivElement, SignInProps | undefined>();
   private premountSignUpNodes = new Map<HTMLDivElement, SignUpProps | undefined>();
   private premountUserAvatarNodes = new Map<HTMLDivElement, UserAvatarProps | undefined>();
@@ -626,10 +625,6 @@ export class IsomorphicClerk implements IsomorphicLoadedClerk {
       clerkjs.openWaitlist(this.preOpenWaitlist);
     }
 
-    if (this.preopenEnableOrganizations !== null) {
-      clerkjs.__internal_openEnableOrganizations(this.preopenEnableOrganizations);
-    }
-
     this.premountSignInNodes.forEach((props, node) => {
       clerkjs.mountSignIn(node, props);
     });
@@ -871,19 +866,15 @@ export class IsomorphicClerk implements IsomorphicLoadedClerk {
     }
   };
 
-  __internal_openEnableOrganizations = (props?: __internal_EnableOrganizationsModalProps) => {
+  __internal_openEnableOrganizationsPrompt = (props?: __internal_EnableOrganizationsPromptProps) => {
     if (this.clerkjs && this.loaded) {
-      this.clerkjs.__internal_openEnableOrganizations(props);
-    } else {
-      this.preopenEnableOrganizations = props;
+      this.clerkjs.__internal_openEnableOrganizationsPrompt(props);
     }
   };
 
   __internal_closeEnableOrganizations = () => {
     if (this.clerkjs && this.loaded) {
       this.clerkjs.__internal_closeEnableOrganizations();
-    } else {
-      this.preopenEnableOrganizations = null;
     }
   };
 
diff --git a/packages/shared/src/organization.ts b/packages/shared/src/organization.ts
index 1d22d1ff498..ba31ec5d564 100644
--- a/packages/shared/src/organization.ts
+++ b/packages/shared/src/organization.ts
@@ -1,4 +1,4 @@
-import type { EnvironmentResource, LoadedClerk, OrganizationMembershipResource } from './types';
+import type { LoadedClerk, OrganizationMembershipResource } from './types';
 
 /**
  * Finds the organization membership for a given organization ID from a list of memberships
@@ -16,15 +16,6 @@ export function getCurrentOrganizationMembership(
   );
 }
 
-/**
- * Clerk instance with unstable environment access
- *
- * @internal
- */
-export type ClerkWithEnvironment = {
-  __unstable__environment?: EnvironmentResource | null;
-};
-
 /**
  * Wraps a hook function in a check to see if organization settings is enabled
  *
@@ -36,6 +27,7 @@ export const withOrganizationSettingsEnabled =
   <TParams extends any[], TReturn>(
     hook: (...args: TParams) => TReturn,
     getLoadedClerk: () => LoadedClerk | null | undefined,
+    callerName?: string,
   ) =>
   (...args: TParams): TReturn => {
     const clerk = getLoadedClerk();
@@ -43,7 +35,9 @@ export const withOrganizationSettingsEnabled =
     const environment = clerk?.__unstable__environment;
 
     if (!environment?.organizationSettings.enabled) {
-      clerk?.__internal_openEnableOrganizations({});
+      clerk?.__internal_openEnableOrganizationsPrompt({
+        callerName,
+      });
     }
 
     return hook(...args);
diff --git a/packages/shared/src/react/hooks/useOrganization.tsx b/packages/shared/src/react/hooks/useOrganization.tsx
index 10e007031b3..a1918317096 100644
--- a/packages/shared/src/react/hooks/useOrganization.tsx
+++ b/packages/shared/src/react/hooks/useOrganization.tsx
@@ -496,4 +496,8 @@ function useOrganizationInternal<T extends UseOrganizationParams>(params?: T): U
   };
 }
 
-export const useOrganization = withOrganizationSettingsEnabled(useOrganizationInternal, () => useClerk());
+export const useOrganization = withOrganizationSettingsEnabled(
+  useOrganizationInternal,
+  () => useClerk(),
+  'useOrganization',
+);
diff --git a/packages/shared/src/react/hooks/useOrganizationList.tsx b/packages/shared/src/react/hooks/useOrganizationList.tsx
index 853b7c4f82b..9c1261692d7 100644
--- a/packages/shared/src/react/hooks/useOrganizationList.tsx
+++ b/packages/shared/src/react/hooks/useOrganizationList.tsx
@@ -399,4 +399,8 @@ function useOrganizationListInternal<T extends UseOrganizationListParams>(params
   };
 }
 
-export const useOrganizationList = withOrganizationSettingsEnabled(useOrganizationListInternal, () => useClerk());
+export const useOrganizationList = withOrganizationSettingsEnabled(
+  useOrganizationListInternal,
+  () => useClerk(),
+  'useOrganizationList',
+);
diff --git a/packages/shared/src/types/appearance.ts b/packages/shared/src/types/appearance.ts
index 5c636b2a70f..fffcbca3e4e 100644
--- a/packages/shared/src/types/appearance.ts
+++ b/packages/shared/src/types/appearance.ts
@@ -1124,7 +1124,6 @@ export type Appearance<T = Theme> = T &
     taskChooseOrganization?: T;
     /**
      * Theme overrides that only apply to the `<EnableOrganizations/>` component
-     * TODO -> Change to __internal
      */
     enableOrganizations?: T;
   };
diff --git a/packages/shared/src/types/clerk.ts b/packages/shared/src/types/clerk.ts
index 38ce631f988..0c314558111 100644
--- a/packages/shared/src/types/clerk.ts
+++ b/packages/shared/src/types/clerk.ts
@@ -4,7 +4,6 @@ import type {
   Appearance,
   CheckoutTheme,
   CreateOrganizationTheme,
-  EnableOrganizationsTheme,
   OAuthConsentTheme,
   OrganizationListTheme,
   OrganizationProfileTheme,
@@ -322,11 +321,9 @@ export interface Clerk {
   __internal_closeReverification: () => void;
 
   /**
-   * Opens the Clerk Enable Organizations component in a modal.
-   *
-   * @param props - Optional user verification configuration parameters.
+   * Opens the Clerk Enable Organizations prompt for development environments
    */
-  __internal_openEnableOrganizations: (props?: __internal_EnableOrganizationsModalProps) => void;
+  __internal_openEnableOrganizationsPrompt: (props?: __internal_EnableOrganizationsPromptProps) => void;
 
   /**
    * Closes the Clerk Enable Organizations modal.
@@ -1442,31 +1439,8 @@ export type __internal_UserVerificationProps = RoutingOptions & {
 
 export type __internal_UserVerificationModalProps = WithoutRouting<__internal_UserVerificationProps>;
 
-export type __internal_EnableOrganizationsProps = RoutingOptions & {
-  appearance?: EnableOrganizationsTheme;
-};
-
-export type __internal_EnableOrganizationsModalProps = WithoutRouting<__internal_EnableOrganizationsProps>;
-
-export type __internal_ComponentNavigationContext = {
-  /**
-   * The `navigate` reference within the component router context
-   */
-  navigate: (
-    to: string,
-    options?: {
-      searchParams?: URLSearchParams;
-    },
-  ) => Promise<unknown>;
-  /**
-   * This path represents the root route for a specific component type and is used
-   * for internal routing and navigation.
-   *
-   * @example
-   * indexPath: '/sign-in'  // When <SignIn path='/sign-in' />
-   * indexPath: '/sign-up'  // When <SignUp path='/sign-up' />
-   */
-  indexPath: string;
+export type __internal_EnableOrganizationsPromptProps = {
+  callerName?: string;
 };
 
 type GoogleOneTapRedirectUrlProps = SignInForceRedirectUrl & SignUpForceRedirectUrl;
diff --git a/packages/vue/src/composables/useOrganization.ts b/packages/vue/src/composables/useOrganization.ts
index 25166cc5b4b..5a20e432004 100644
--- a/packages/vue/src/composables/useOrganization.ts
+++ b/packages/vue/src/composables/useOrganization.ts
@@ -92,4 +92,5 @@ const useOrganizationInternal: UseOrganization = () => {
 export const useOrganization = withOrganizationSettingsEnabled(
   useOrganizationInternal,
   () => useClerk().value as LoadedClerk,
+  'useOrganization',
 );
diff --git a/playground/app-router/src/app/test.tsx b/playground/app-router/src/app/test.tsx
new file mode 100644
index 00000000000..5cb46ecb787
--- /dev/null
+++ b/playground/app-router/src/app/test.tsx
@@ -0,0 +1,9 @@
+"use client"
+
+import { OrganizationList } from "@clerk/clerk-react";
+
+
+export function Test() {
+
+  return <div><OrganizationList /></div>;
+}

From 0b4fa3f85110a702cf48f221389d9fe1b236a445 Mon Sep 17 00:00:00 2001
From: Laura Beatris <48022589+LauraBeatris@users.noreply.github.com>
Date: Fri, 7 Nov 2025 16:22:58 -0300
Subject: [PATCH 04/30] Move to shared styles

---
 packages/clerk-js/src/core/clerk.ts           |   2 +-
 packages/clerk-js/src/ui/Components.tsx       |  22 +-
 .../EnableOrganizationsPrompt/index.tsx       | 236 ++++++++++--------
 .../KeylessPrompt/ClerkLogoIcon.tsx           |   0
 .../KeylessPrompt/KeySlashIcon.tsx            |   0
 .../{ => devPrompts}/KeylessPrompt/index.tsx  |  58 +----
 .../use-revalidate-environment.ts             |   6 +-
 .../src/ui/components/devPrompts/shared.tsx   |  61 +++++
 .../src/ui/customizables/parseAppearance.ts   |   2 +-
 .../clerk-js/src/ui/lazyModules/components.ts |   4 +-
 .../clerk-js/src/ui/lazyModules/providers.tsx |  17 ++
 packages/clerk-js/src/ui/types.ts             |   6 -
 packages/shared/src/organization.ts           |   3 +-
 packages/shared/src/types/clerk.ts            |   4 +-
 playground/app-router/src/app/layout.tsx      |  14 +-
 playground/app-router/src/app/test.tsx        |   9 -
 pnpm-lock.yaml                                | 181 +++++++++++++-
 17 files changed, 413 insertions(+), 212 deletions(-)
 rename packages/clerk-js/src/ui/components/{ => devPrompts}/EnableOrganizationsPrompt/index.tsx (52%)
 rename packages/clerk-js/src/ui/components/{ => devPrompts}/KeylessPrompt/ClerkLogoIcon.tsx (100%)
 rename packages/clerk-js/src/ui/components/{ => devPrompts}/KeylessPrompt/KeySlashIcon.tsx (100%)
 rename packages/clerk-js/src/ui/components/{ => devPrompts}/KeylessPrompt/index.tsx (93%)
 rename packages/clerk-js/src/ui/components/{ => devPrompts}/KeylessPrompt/use-revalidate-environment.ts (91%)
 create mode 100644 packages/clerk-js/src/ui/components/devPrompts/shared.tsx
 delete mode 100644 playground/app-router/src/app/test.tsx

diff --git a/packages/clerk-js/src/core/clerk.ts b/packages/clerk-js/src/core/clerk.ts
index 5133eed55e8..be1254f14b3 100644
--- a/packages/clerk-js/src/core/clerk.ts
+++ b/packages/clerk-js/src/core/clerk.ts
@@ -745,7 +745,7 @@ export class Clerk implements ClerkInterface {
     void this.#componentControls.ensureMounted().then(controls => controls.closeModal('userVerification'));
   };
 
-  public __internal_openEnableOrganizationsPrompt = (props?: __internal_EnableOrganizationsPromptProps): void => {
+  public __internal_openEnableOrganizationsPrompt = (props: __internal_EnableOrganizationsPromptProps): void => {
     this.assertComponentsReady(this.#componentControls);
     void this.#componentControls
       .ensureMounted({ preloadHint: 'EnableOrganizationsPrompt' })
diff --git a/packages/clerk-js/src/ui/Components.tsx b/packages/clerk-js/src/ui/Components.tsx
index d103aa86eb5..757c681d351 100644
--- a/packages/clerk-js/src/ui/Components.tsx
+++ b/packages/clerk-js/src/ui/Components.tsx
@@ -42,6 +42,7 @@ import {
 import { MountedCheckoutDrawer, MountedPlanDetailDrawer, MountedSubscriptionDetailDrawer } from './lazyModules/drawers';
 import {
   LazyComponentRenderer,
+  LazyEnableOrganizationsPromptProvider,
   LazyImpersonationFabProvider,
   LazyModalRenderer,
   LazyOneTapRenderer,
@@ -351,14 +352,16 @@ const Components = (props: ComponentsProps) => {
     };
 
     componentsControls.openModal = (name, props) => {
-      // Prevent opening enableOrganizations modal if it's already open
+      // Prevent opening enableOrganizations prompt if it's already open
       // to avoid duplicate mounting when component is called multiple times
       if (name === 'enableOrganizationsPrompt') {
-        setState(s => {
-          if (s.enableOrganizationsPromptModal) {
-            return s; // Modal is already open, don't update state
+        setState(prev => {
+          // Modal is already open, don't update state
+          if (prev.enableOrganizationsPromptModal) {
+            return prev;
           }
-          return { ...s, [`${name}Modal`]: props };
+
+          return { ...prev, [`${name}Modal`]: props };
         });
         return;
       }
@@ -634,12 +637,9 @@ const Components = (props: ComponentsProps) => {
         )}
 
         {state.enableOrganizationsPromptModal && (
-          <LazyImpersonationFabProvider globalAppearance={state.appearance}>
-            <EnableOrganizationsPrompt
-              callerString='useOrganization'
-              {...state.enableOrganizationsPromptModal}
-            />
-          </LazyImpersonationFabProvider>
+          <LazyEnableOrganizationsPromptProvider globalAppearance={state.appearance}>
+            <EnableOrganizationsPrompt {...state.enableOrganizationsPromptModal} />
+          </LazyEnableOrganizationsPromptProvider>
         )}
 
         {state.options?.__internal_keyless_claimKeylessApplicationUrl &&
diff --git a/packages/clerk-js/src/ui/components/EnableOrganizationsPrompt/index.tsx b/packages/clerk-js/src/ui/components/devPrompts/EnableOrganizationsPrompt/index.tsx
similarity index 52%
rename from packages/clerk-js/src/ui/components/EnableOrganizationsPrompt/index.tsx
rename to packages/clerk-js/src/ui/components/devPrompts/EnableOrganizationsPrompt/index.tsx
index 7e3c6b7be88..c18019b4e27 100644
--- a/packages/clerk-js/src/ui/components/EnableOrganizationsPrompt/index.tsx
+++ b/packages/clerk-js/src/ui/components/devPrompts/EnableOrganizationsPrompt/index.tsx
@@ -3,62 +3,12 @@ import { css } from '@emotion/react';
 import { Modal } from '@/ui/elements/Modal';
 import { InternalThemeProvider } from '@/ui/styledSystem';
 
-import { Button, Flex } from '../../customizables';
-import { Portal } from '../../elements/Portal';
-
-const baseElementStyles = css`
-  box-sizing: border-box;
-  padding: 0;
-  margin: 0;
-  background: none;
-  border: none;
-  line-height: 1.5;
-  font-family:
-    -apple-system,
-    BlinkMacSystemFont,
-    avenir next,
-    avenir,
-    segoe ui,
-    helvetica neue,
-    helvetica,
-    Cantarell,
-    Ubuntu,
-    roboto,
-    noto,
-    arial,
-    sans-serif;
-  text-decoration: none;
-`;
-
-const mainCTAStyles = css`
-  ${baseElementStyles};
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 100%;
-  height: 1.75rem;
-  max-width: 14.625rem;
-  padding: 0.25rem 0.625rem;
-  border-radius: 0.375rem;
-  font-size: 0.75rem;
-  font-weight: 500;
-  letter-spacing: 0.12px;
-  color: 'white';
-  text-shadow: 0px 1px 2px rgba(0, 0, 0, 0.32);
-  white-space: nowrap;
-  user-select: none;
-  cursor: pointer;
-  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 30.5%, rgba(0, 0, 0, 0.05) 100%), #454545;
-  box-shadow:
-    0px 0px 0px 1px rgba(255, 255, 255, 0.04) inset,
-    0px 1px 0px 0px rgba(255, 255, 255, 0.04) inset,
-    0px 0px 0px 1px rgba(0, 0, 0, 0.12),
-    0px 1.5px 2px 0px rgba(0, 0, 0, 0.48),
-    0px 0px 4px 0px rgba(243, 107, 22, 0) inset;
-`;
+import { Flex } from '../../../customizables';
+import { Portal } from '../../../elements/Portal';
+import { basePromptElementStyles, PromptContainer } from '../shared';
 
 type EnableOrganizationsPromptProps = {
-  callerString: string;
+  callerName: string;
 };
 
 const EnableOrganizationsPromptInternal = (_props: EnableOrganizationsPromptProps) => {
@@ -68,30 +18,24 @@ const EnableOrganizationsPromptInternal = (_props: EnableOrganizationsPromptProp
         canCloseModal={false}
         contentSx={() => ({ animation: 'unset' })}
       >
-        <Flex
-          sx={t => ({
-            position: 'fixed',
+        <PromptContainer
+          sx={() => ({
             top: '50%',
             left: '50%',
+            bottom: 'auto',
+            right: 'auto',
+            padding: 'unset',
             transform: 'translate(-50%, -50%)',
             flexDirection: 'column',
-            gap: t.space.$1,
-            width: 'fit-content',
-            maxWidth: '25rem',
-            borderRadius: '1.25rem',
-            overflow: 'hidden',
-            fontFamily: t.fonts.$main,
-            background: 'linear-gradient(180deg, rgba(255, 255, 255, 0.16) 0%, rgba(255, 255, 255, 0) 100%), #1f1f1f',
-            boxShadow:
-              '0px 0px 0px 0.5px #2F3037 inset, 0px 1px 0px 0px rgba(255, 255, 255, 0.08) inset, 0px 0px 0.8px 0.8px rgba(255, 255, 255, 0.20) inset, 0px 0px 0px 0px rgba(255, 255, 255, 0.72), 0px 16px 36px -6px rgba(0, 0, 0, 0.36), 0px 6px 16px -2px rgba(0, 0, 0, 0.20);',
-            transition: 'all 195ms cubic-bezier(0.2, 0.61, 0.1, 1)',
+            height: 'fit-content',
           })}
         >
           <Flex
             sx={t => ({
               display: 'flex',
               flexDirection: 'column',
-              padding: `${t.space.$3} ${t.space.$4}`,
+              padding: `${t.space.$5} ${t.space.$6}`,
+              paddingBottom: t.space.$4,
               gap: t.space.$2,
             })}
           >
@@ -137,9 +81,9 @@ const EnableOrganizationsPromptInternal = (_props: EnableOrganizationsPromptProp
 
               <h1
                 css={css`
-                  ${baseElementStyles};
+                  ${basePromptElementStyles};
                   color: white;
-                  font-size: 0.9rem;
+                  font-size: 0.875rem;
                   font-weight: 500;
                 `}
               >
@@ -147,82 +91,134 @@ const EnableOrganizationsPromptInternal = (_props: EnableOrganizationsPromptProp
               </h1>
             </Flex>
 
-            <p
-              css={css`
-                ${baseElementStyles};
-                color: #c3c3c6;
-                font-size: 0.88rem;
-                font-weight: 400;
-                line-height: 1.125rem;
-              `}
+            <Flex
+              sx={t => ({
+                display: 'flex',
+                flexDirection: 'column',
+                gap: t.space.$0x5,
+              })}
             >
-              To use the{' '}
-              <code
+              <span
                 css={css`
-                  ${baseElementStyles};
-                  color: white;
+                  ${basePromptElementStyles};
+                  color: #b4b4b4;
+                  font-size: 0.8125rem;
+                  font-weight: 400;
+                  line-height: 1rem;
                 `}
               >
-                useOrganization
-              </code>{' '}
-              hook,
-              <br />
-              you’ll need to enable the Organizations feature
-              <br />
-              for your app first.
-              <br />
+                To use the{' '}
+                <code
+                  css={css`
+                    ${basePromptElementStyles};
+                    color: white;
+                  `}
+                >
+                  useOrganization
+                </code>{' '}
+                hook,
+                <br />
+                you’ll need to enable the Organizations feature
+                <br />
+                for your app first.
+              </span>
+
               <a
                 css={css`
-                  ${baseElementStyles};
+                  ${basePromptElementStyles};
                   color: #a8a8ff;
                   font-size: inherit;
                   font-weight: 500;
                   line-height: 1rem;
+                  font-size: 0.8125rem;
                 `}
                 href='https://clerk.com/docs/guides/organizations'
                 target='_blank'
                 rel='noopener noreferrer'
+                tabIndex={-1}
               >
                 Learn more about this add-on.
               </a>
-            </p>
+            </Flex>
           </Flex>
 
-          <Flex
-            sx={() => ({
-              borderBottom: '1px solid rgba(255, 255, 255, 0.10)',
-              background: 'rgba(0, 0, 0, 0.80)',
-              overflow: 'hidden',
-              width: '100%',
-              height: '1px',
-            })}
+          <span
+            css={css`
+              height: 1px;
+              background-color: #151515;
+              width: 100%;
+              box-shadow: 0px 1px 0px 0px #424242;
+            `}
           />
 
+          {/* TODO -> Introduce FAPI mutation to enable organizations */}
           <Flex
             sx={t => ({
-              paddingLeft: `${t.space.$4}`,
-              paddingRight: `${t.space.$4}`,
-              paddingTop: `${t.space.$3}`,
-              paddingBottom: `${t.space.$5}`,
+              padding: `${t.space.$4} ${t.space.$6}`,
               flexDirection: 'column',
               gap: t.space.$3,
               justifyContent: 'center',
             })}
           >
-            <Button variant='solid'>Enable Organizations</Button>
-            <Button
-              variant='bordered'
-              sx={t => ({ color: t.colors.$white })}
+            <button
+              type='button'
+              css={css`
+                ${mainCTAStyles};
+                min-width: 100%;
+                color: white;
+                background: linear-gradient(180deg, rgba(0, 0, 0, 0) 30.5%, rgba(0, 0, 0, 0.05) 100%), #454545;
+                box-shadow:
+                  0px 0px 0px 1px rgba(255, 255, 255, 0.04) inset,
+                  0px 1px 0px 0px rgba(255, 255, 255, 0.04) inset,
+                  0px 0px 0px 1px rgba(0, 0, 0, 0.12),
+                  0px 1.5px 2px 0px rgba(0, 0, 0, 0.48),
+                  0px 0px 4px 0px rgba(243, 107, 22, 0) inset;
+
+                &:hover {
+                  box-shadow:
+                    0px 0px 6px 0px rgba(255, 255, 255, 0.04) inset,
+                    0px 0px 0px 1px rgba(255, 255, 255, 0.04) inset,
+                    0px 1px 0px 0px rgba(255, 255, 255, 0.04) inset,
+                    0px 0px 0px 1px rgba(0, 0, 0, 0.1),
+                    0px 1.5px 2px 0px rgba(0, 0, 0, 0.48);
+                }
+              `}
+            >
+              Enable Organizations
+            </button>
+
+            <button
+              type='button'
+              css={css`
+                ${mainCTAStyles};
+                min-width: 100%;
+                color: white;
+                background: rgba(69, 69, 69, 0.1);
+                border: 1px solid rgba(118, 118, 132, 0.25);
+
+                &:hover {
+                  box-shadow:
+                    0px 0px 6px 0px rgba(255, 255, 255, 0.04) inset,
+                    0px 0px 0px 1px rgba(255, 255, 255, 0.04) inset,
+                    0px 1px 0px 0px rgba(255, 255, 255, 0.04) inset,
+                    0px 0px 0px 1px rgba(0, 0, 0, 0.1),
+                    0px 1.5px 2px 0px rgba(0, 0, 0, 0.48);
+                }
+              `}
             >
               I&apos;ll remove it myself
-            </Button>
+            </button>
           </Flex>
-        </Flex>
+        </PromptContainer>
       </Modal>
     </Portal>
   );
 };
 
+/**
+ * A prompt that allows the user to enable the Organizations feature for their development instance
+ * @internal
+ */
 export const EnableOrganizationsPrompt = (props: EnableOrganizationsPromptProps) => {
   return (
     <InternalThemeProvider>
@@ -230,3 +226,23 @@ export const EnableOrganizationsPrompt = (props: EnableOrganizationsPromptProps)
     </InternalThemeProvider>
   );
 };
+
+const mainCTAStyles = css`
+  ${basePromptElementStyles};
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  height: 1.75rem;
+  max-width: 14.625rem;
+  padding: 0.25rem 0.625rem;
+  border-radius: 0.375rem;
+  font-size: 0.75rem;
+  font-weight: 500;
+  letter-spacing: 0.12px;
+  color: white;
+  text-shadow: 0px 1px 2px rgba(0, 0, 0, 0.32);
+  white-space: nowrap;
+  user-select: none;
+`;
diff --git a/packages/clerk-js/src/ui/components/KeylessPrompt/ClerkLogoIcon.tsx b/packages/clerk-js/src/ui/components/devPrompts/KeylessPrompt/ClerkLogoIcon.tsx
similarity index 100%
rename from packages/clerk-js/src/ui/components/KeylessPrompt/ClerkLogoIcon.tsx
rename to packages/clerk-js/src/ui/components/devPrompts/KeylessPrompt/ClerkLogoIcon.tsx
diff --git a/packages/clerk-js/src/ui/components/KeylessPrompt/KeySlashIcon.tsx b/packages/clerk-js/src/ui/components/devPrompts/KeylessPrompt/KeySlashIcon.tsx
similarity index 100%
rename from packages/clerk-js/src/ui/components/KeylessPrompt/KeySlashIcon.tsx
rename to packages/clerk-js/src/ui/components/devPrompts/KeylessPrompt/KeySlashIcon.tsx
diff --git a/packages/clerk-js/src/ui/components/KeylessPrompt/index.tsx b/packages/clerk-js/src/ui/components/devPrompts/KeylessPrompt/index.tsx
similarity index 93%
rename from packages/clerk-js/src/ui/components/KeylessPrompt/index.tsx
rename to packages/clerk-js/src/ui/components/devPrompts/KeylessPrompt/index.tsx
index 4e354ad4f44..d92f429d3c4 100644
--- a/packages/clerk-js/src/ui/components/KeylessPrompt/index.tsx
+++ b/packages/clerk-js/src/ui/components/devPrompts/KeylessPrompt/index.tsx
@@ -5,9 +5,10 @@ import type { PropsWithChildren } from 'react';
 import { useEffect, useMemo, useState } from 'react';
 import { createPortal } from 'react-dom';
 
-import { Flex, Link } from '../../customizables';
-import { Portal } from '../../elements/Portal';
-import { InternalThemeProvider } from '../../styledSystem';
+import { Flex, Link } from '../../../customizables';
+import { Portal } from '../../../elements/Portal';
+import { InternalThemeProvider } from '../../../styledSystem';
+import { basePromptElementStyles, PromptContainer } from '../shared';
 import { ClerkLogoIcon } from './ClerkLogoIcon';
 import { KeySlashIcon } from './KeySlashIcon';
 import { useRevalidateEnvironment } from './use-revalidate-environment';
@@ -22,30 +23,6 @@ const buttonIdentifierPrefix = `--clerk-keyless-prompt`;
 const buttonIdentifier = `${buttonIdentifierPrefix}-button`;
 const contentIdentifier = `${buttonIdentifierPrefix}-content`;
 
-const baseElementStyles = css`
-  box-sizing: border-box;
-  padding: 0;
-  margin: 0;
-  background: none;
-  border: none;
-  line-height: 1.5;
-  font-family:
-    -apple-system,
-    BlinkMacSystemFont,
-    avenir next,
-    avenir,
-    segoe ui,
-    helvetica neue,
-    helvetica,
-    Cantarell,
-    Ubuntu,
-    roboto,
-    noto,
-    arial,
-    sans-serif;
-  text-decoration: none;
-`;
-
 /**
  * If we cannot reconstruct the url properly, then simply fallback to Clerk Dashboard
  */
@@ -122,7 +99,7 @@ const KeylessPromptInternal = (_props: KeylessPromptProps) => {
   }, [_props.copyKeysUrl]);
 
   const mainCTAStyles = css`
-    ${baseElementStyles};
+    ${basePromptElementStyles};
     display: flex;
     align-items: center;
     justify-content: center;
@@ -150,22 +127,9 @@ const KeylessPromptInternal = (_props: KeylessPromptProps) => {
 
   return (
     <Portal>
-      <Flex
+      <PromptContainer
         data-expanded={isForcedExpanded}
         sx={t => ({
-          position: 'fixed',
-          bottom: '1.25rem',
-          right: '1.25rem',
-          height: `${t.sizes.$10}`,
-          minWidth: '13.4rem',
-          paddingLeft: `${t.space.$3}`,
-          borderRadius: '1.25rem',
-          fontFamily: t.fonts.$main,
-          background: 'linear-gradient(180deg, rgba(255, 255, 255, 0.16) 0%, rgba(255, 255, 255, 0) 100%), #1f1f1f',
-          boxShadow:
-            '0px 0px 0px 0.5px #2F3037 inset, 0px 1px 0px 0px rgba(255, 255, 255, 0.08) inset, 0px 0px 0.8px 0.8px rgba(255, 255, 255, 0.20) inset, 0px 0px 0px 0px rgba(255, 255, 255, 0.72), 0px 16px 36px -6px rgba(0, 0, 0, 0.36), 0px 6px 16px -2px rgba(0, 0, 0, 0.20);',
-          transition: 'all 195ms cubic-bezier(0.2, 0.61, 0.1, 1)',
-
           '&[data-expanded="false"]:hover': {
             background: 'linear-gradient(180deg, rgba(255, 255, 255, 0.20) 0%, rgba(255, 255, 255, 0) 100%), #1f1f1f',
           },
@@ -192,7 +156,7 @@ const KeylessPromptInternal = (_props: KeylessPromptProps) => {
           id={buttonIdentifier}
           onClick={() => !claimed && setIsExpanded(prev => !prev)}
           css={css`
-            ${baseElementStyles};
+            ${basePromptElementStyles};
             width: 100%;
             display: flex;
             justify-content: space-between;
@@ -315,7 +279,7 @@ const KeylessPromptInternal = (_props: KeylessPromptProps) => {
                 success ? 'Claim completed' : claimed ? 'Missing environment keys' : 'Clerk is in keyless mode'
               }
               css={css`
-                ${baseElementStyles};
+                ${basePromptElementStyles};
                 color: #d9d9d9;
                 font-size: 0.875rem;
                 font-weight: 500;
@@ -381,7 +345,7 @@ const KeylessPromptInternal = (_props: KeylessPromptProps) => {
           >
             <p
               css={css`
-                ${baseElementStyles};
+                ${basePromptElementStyles};
                 color: #b4b4b4;
                 font-size: 0.8125rem;
                 font-weight: 400;
@@ -532,7 +496,7 @@ const KeylessPromptInternal = (_props: KeylessPromptProps) => {
                       target='_blank'
                       rel='noopener noreferrer'
                       css={css`
-                        ${baseElementStyles};
+                        ${basePromptElementStyles};
                         color: #ffffff9e;
                         font-size: 0.75rem;
                         transition: color 120ms ease-out;
@@ -565,7 +529,7 @@ const KeylessPromptInternal = (_props: KeylessPromptProps) => {
               </Flex>
             ))}
         </Flex>
-      </Flex>
+      </PromptContainer>
       <BodyPortal>
         <a
           href={`#${buttonIdentifier}`}
diff --git a/packages/clerk-js/src/ui/components/KeylessPrompt/use-revalidate-environment.ts b/packages/clerk-js/src/ui/components/devPrompts/KeylessPrompt/use-revalidate-environment.ts
similarity index 91%
rename from packages/clerk-js/src/ui/components/KeylessPrompt/use-revalidate-environment.ts
rename to packages/clerk-js/src/ui/components/devPrompts/KeylessPrompt/use-revalidate-environment.ts
index fca17dc5c6f..937585eee90 100644
--- a/packages/clerk-js/src/ui/components/KeylessPrompt/use-revalidate-environment.ts
+++ b/packages/clerk-js/src/ui/components/devPrompts/KeylessPrompt/use-revalidate-environment.ts
@@ -1,9 +1,9 @@
 import { useClerk } from '@clerk/shared/react';
 import { useEffect, useReducer, useRef } from 'react';
 
-import type { Clerk } from '../../../core/clerk';
-import type { Environment } from '../../../core/resources';
-import { useEnvironment } from '../../contexts';
+import type { Clerk } from '../../../../core/clerk';
+import type { Environment } from '../../../../core/resources';
+import { useEnvironment } from '../../../contexts';
 
 const THROTTLE_DURATION_MS = 10 * 1000;
 
diff --git a/packages/clerk-js/src/ui/components/devPrompts/shared.tsx b/packages/clerk-js/src/ui/components/devPrompts/shared.tsx
new file mode 100644
index 00000000000..164753203a6
--- /dev/null
+++ b/packages/clerk-js/src/ui/components/devPrompts/shared.tsx
@@ -0,0 +1,61 @@
+import { css } from '@emotion/react';
+
+import { Flex } from '@/ui/customizables';
+
+/**
+ * A container for prompt components
+ * @internal
+ */
+export function PromptContainer({ children, sx, ...props }: React.ComponentProps<typeof Flex>) {
+  return (
+    <Flex
+      sx={t => [
+        {
+          position: 'fixed',
+          bottom: '1.25rem',
+          right: '1.25rem',
+          height: `${t.sizes.$10}`,
+          minWidth: '13.4rem',
+          paddingLeft: `${t.space.$3}`,
+          borderRadius: '1.25rem',
+          fontFamily: t.fonts.$main,
+          background: 'linear-gradient(180deg, rgba(255, 255, 255, 0.16) 0%, rgba(255, 255, 255, 0) 100%), #1f1f1f',
+          boxShadow:
+            '0px 0px 0px 0.5px #2F3037 inset, 0px 1px 0px 0px rgba(255, 255, 255, 0.08) inset, 0px 0px 0.8px 0.8px rgba(255, 255, 255, 0.20) inset, 0px 0px 0px 0px rgba(255, 255, 255, 0.72), 0px 16px 36px -6px rgba(0, 0, 0, 0.36), 0px 6px 16px -2px rgba(0, 0, 0, 0.20);',
+          transition: 'all 195ms cubic-bezier(0.2, 0.61, 0.1, 1)',
+        },
+        sx,
+      ]}
+      {...props}
+    >
+      {children}
+    </Flex>
+  );
+}
+
+/**
+ * @internal
+ */
+export const basePromptElementStyles = css`
+  box-sizing: border-box;
+  padding: 0;
+  margin: 0;
+  background: none;
+  border: none;
+  line-height: 1.5;
+  font-family:
+    -apple-system,
+    BlinkMacSystemFont,
+    avenir next,
+    avenir,
+    segoe ui,
+    helvetica neue,
+    helvetica,
+    Cantarell,
+    Ubuntu,
+    roboto,
+    noto,
+    arial,
+    sans-serif;
+  text-decoration: none;
+`;
diff --git a/packages/clerk-js/src/ui/customizables/parseAppearance.ts b/packages/clerk-js/src/ui/customizables/parseAppearance.ts
index 11348a8f29d..cc2c53bb0bc 100644
--- a/packages/clerk-js/src/ui/customizables/parseAppearance.ts
+++ b/packages/clerk-js/src/ui/customizables/parseAppearance.ts
@@ -27,7 +27,7 @@ type PublicAppearanceTopLevelKey = keyof Omit<
 export type AppearanceCascade = {
   globalAppearance?: Appearance;
   appearance?: Appearance;
-  appearanceKey: PublicAppearanceTopLevelKey | 'impersonationFab';
+  appearanceKey: PublicAppearanceTopLevelKey | 'impersonationFab' | 'enableOrganizationsPrompt';
 };
 
 export type ParsedAppearance = {
diff --git a/packages/clerk-js/src/ui/lazyModules/components.ts b/packages/clerk-js/src/ui/lazyModules/components.ts
index 98c2f7769e3..cd00ce8ee0b 100644
--- a/packages/clerk-js/src/ui/lazyModules/components.ts
+++ b/packages/clerk-js/src/ui/lazyModules/components.ts
@@ -17,7 +17,7 @@ const componentImportPaths = {
   BlankCaptchaModal: () => import(/* webpackChunkName: "blankcaptcha" */ './../components/BlankCaptchaModal'),
   UserVerification: () => import(/* webpackChunkName: "userverification" */ './../components/UserVerification'),
   Waitlist: () => import(/* webpackChunkName: "waitlist" */ './../components/Waitlist'),
-  KeylessPrompt: () => import(/* webpackChunkName: "keylessPrompt" */ '../components/KeylessPrompt'),
+  KeylessPrompt: () => import(/* webpackChunkName: "keylessPrompt" */ '../components/devPrompts/KeylessPrompt'),
   PricingTable: () => import(/* webpackChunkName: "pricingTable" */ '../components/PricingTable'),
   Checkout: () => import(/* webpackChunkName: "checkout" */ '../components/Checkout'),
   SessionTasks: () => import(/* webpackChunkName: "sessionTasks" */ '../components/SessionTasks'),
@@ -28,7 +28,7 @@ const componentImportPaths = {
   APIKeys: () => import(/* webpackChunkName: "apiKeys" */ '../components/APIKeys/APIKeys'),
   OAuthConsent: () => import(/* webpackChunkName: "oauthConsent" */ '../components/OAuthConsent/OAuthConsent'),
   EnableOrganizationsPrompt: () =>
-    import(/* webpackChunkName: "enableOrganizationsPrompt" */ '../components/EnableOrganizationsPrompt'),
+    import(/* webpackChunkName: "enableOrganizationsPrompt" */ '../components/devPrompts/EnableOrganizationsPrompt'),
 } as const;
 
 export const SignIn = lazy(() => componentImportPaths.SignIn().then(module => ({ default: module.SignIn })));
diff --git a/packages/clerk-js/src/ui/lazyModules/providers.tsx b/packages/clerk-js/src/ui/lazyModules/providers.tsx
index 9e2c871f23d..827d869a650 100644
--- a/packages/clerk-js/src/ui/lazyModules/providers.tsx
+++ b/packages/clerk-js/src/ui/lazyModules/providers.tsx
@@ -209,6 +209,23 @@ export const LazyImpersonationFabProvider = (
   );
 };
 
+export const LazyEnableOrganizationsPromptProvider = (
+  props: React.PropsWithChildren<{ globalAppearance: Appearance | undefined }>,
+) => {
+  return (
+    <Suspense>
+      <VirtualRouter startPath=''>
+        <AppearanceProvider
+          globalAppearance={props.globalAppearance}
+          appearanceKey={'enableOrganizationsPrompt'}
+        >
+          {props.children}
+        </AppearanceProvider>
+      </VirtualRouter>
+    </Suspense>
+  );
+};
+
 type LazyOneTapRendererProps = React.PropsWithChildren<
   {
     componentProps: any;
diff --git a/packages/clerk-js/src/ui/types.ts b/packages/clerk-js/src/ui/types.ts
index 053a7f0abd5..3f9fe2a27ef 100644
--- a/packages/clerk-js/src/ui/types.ts
+++ b/packages/clerk-js/src/ui/types.ts
@@ -1,6 +1,5 @@
 import type {
   __internal_CheckoutProps,
-  __internal_EnableOrganizationsPromptProps,
   __internal_OAuthConsentProps,
   __internal_PlanDetailsProps,
   __internal_SubscriptionDetailsProps,
@@ -76,11 +75,6 @@ export type UserVerificationCtx = __internal_UserVerificationProps & {
   mode?: ComponentMode;
 };
 
-export type EnableOrganizationsCtx = __internal_EnableOrganizationsPromptProps & {
-  componentName: 'EnableOrganizations';
-  mode?: ComponentMode;
-};
-
 export type UserProfileCtx = UserProfileProps & {
   componentName: 'UserProfile';
   mode?: ComponentMode;
diff --git a/packages/shared/src/organization.ts b/packages/shared/src/organization.ts
index ba31ec5d564..9aaa516f3ff 100644
--- a/packages/shared/src/organization.ts
+++ b/packages/shared/src/organization.ts
@@ -17,8 +17,7 @@ export function getCurrentOrganizationMembership(
 }
 
 /**
- * Wraps a hook function in a check to see if organization settings is enabled
- *
+ * Wraps a function in a check to see if organization settings is enabled
  * If not enabled, it will open a dialog with a prompt to enable organizations
  *
  * @internal
diff --git a/packages/shared/src/types/clerk.ts b/packages/shared/src/types/clerk.ts
index 0c314558111..859cc5bc567 100644
--- a/packages/shared/src/types/clerk.ts
+++ b/packages/shared/src/types/clerk.ts
@@ -323,7 +323,7 @@ export interface Clerk {
   /**
    * Opens the Clerk Enable Organizations prompt for development environments
    */
-  __internal_openEnableOrganizationsPrompt: (props?: __internal_EnableOrganizationsPromptProps) => void;
+  __internal_openEnableOrganizationsPrompt: (props: __internal_EnableOrganizationsPromptProps) => void;
 
   /**
    * Closes the Clerk Enable Organizations modal.
@@ -1440,7 +1440,7 @@ export type __internal_UserVerificationProps = RoutingOptions & {
 export type __internal_UserVerificationModalProps = WithoutRouting<__internal_UserVerificationProps>;
 
 export type __internal_EnableOrganizationsPromptProps = {
-  callerName?: string;
+  callerName: string;
 };
 
 type GoogleOneTapRedirectUrlProps = SignInForceRedirectUrl & SignUpForceRedirectUrl;
diff --git a/playground/app-router/src/app/layout.tsx b/playground/app-router/src/app/layout.tsx
index ce2b6af9f26..de072d2b2a5 100644
--- a/playground/app-router/src/app/layout.tsx
+++ b/playground/app-router/src/app/layout.tsx
@@ -15,13 +15,13 @@ export default function RootLayout({ children }: { children: React.ReactNode })
   return (
     <ClerkProvider clerkJSUrl={'https://js.lclclerk.com/npm/clerk.browser.js'}>
       <html lang='en'>
-        <body className={inter.className}>
-          <Links />
-          <div style={{ margin: '1rem', padding: '1rem', border: '1px solid green' }}>
-            <h2>Root layout</h2>
-            {children}
-          </div>
-        </body>
+      <body className={inter.className}>
+      <Links />
+      <div style={{ margin: '1rem', padding: '1rem', border: '1px solid green' }}>
+        <h2>Root layout</h2>
+        {children}
+      </div>
+      </body>
       </html>
     </ClerkProvider>
   );
diff --git a/playground/app-router/src/app/test.tsx b/playground/app-router/src/app/test.tsx
deleted file mode 100644
index 5cb46ecb787..00000000000
--- a/playground/app-router/src/app/test.tsx
+++ /dev/null
@@ -1,9 +0,0 @@
-"use client"
-
-import { OrganizationList } from "@clerk/clerk-react";
-
-
-export function Test() {
-
-  return <div><OrganizationList /></div>;
-}
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 6ceafdd1ea7..326e4de0b86 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -3784,6 +3784,9 @@ packages:
   '@oxc-project/types@0.94.0':
     resolution: {integrity: sha512-+UgQT/4o59cZfH6Cp7G0hwmqEQ0wE+AdIwhikdwnhWI9Dp8CgSY081+Q3O67/wq3VJu8mgUEB93J9EHHn70fOw==}
 
+  '@oxc-project/types@0.96.0':
+    resolution: {integrity: sha512-r/xkmoXA0xEpU6UGtn18CNVjXH6erU3KCpCDbpLmbVxBFor1U9MqN5Z2uMmCHJuXjJzlnDR+hWY+yPoLo8oHDw==}
+
   '@oxc-transform/binding-android-arm64@0.87.0':
     resolution: {integrity: sha512-B7W6J8T9cS054LUGLfYkYz8bz5+t+4yPftZ67Bn6MJ03okMLnbbEfm1bID1tqcP5tJwMurTILVy/dQfDYDcMgQ==}
     engines: {node: '>=14.0.0'}
@@ -4252,12 +4255,24 @@ packages:
     cpu: [arm64]
     os: [android]
 
+  '@rolldown/binding-android-arm64@1.0.0-beta.47':
+    resolution: {integrity: sha512-vPP9/MZzESh9QtmvQYojXP/midjgkkc1E4AdnPPAzQXo668ncHJcVLKjJKzoBdsQmaIvNjrMdsCwES8vTQHRQw==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [arm64]
+    os: [android]
+
   '@rolldown/binding-darwin-arm64@1.0.0-beta.43':
     resolution: {integrity: sha512-kuVWnZsE4vEjMF/10SbSUyzucIW2zmdsqFghYMqy+fsjXnRHg0luTU6qWF8IqJf4Cbpm9NEZRnjIEPpAbdiSNQ==}
     engines: {node: ^20.19.0 || >=22.12.0}
     cpu: [arm64]
     os: [darwin]
 
+  '@rolldown/binding-darwin-arm64@1.0.0-beta.47':
+    resolution: {integrity: sha512-Lc3nrkxeaDVCVl8qR3qoxh6ltDZfkQ98j5vwIr5ALPkgjZtDK4BGCrrBoLpGVMg+csWcaqUbwbKwH5yvVa0oOw==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [arm64]
+    os: [darwin]
+
   '@rolldown/binding-darwin-arm64@1.0.0-beta.9-commit.d91dfb5':
     resolution: {integrity: sha512-Mp0/gqiPdepHjjVm7e0yL1acWvI0rJVVFQEADSezvAjon9sjQ7CEg9JnXICD4B1YrPmN9qV/e7cQZCp87tTV4w==}
     cpu: [arm64]
@@ -4274,6 +4289,12 @@ packages:
     cpu: [x64]
     os: [darwin]
 
+  '@rolldown/binding-darwin-x64@1.0.0-beta.47':
+    resolution: {integrity: sha512-eBYxQDwP0O33plqNVqOtUHqRiSYVneAknviM5XMawke3mwMuVlAsohtOqEjbCEl/Loi/FWdVeks5WkqAkzkYWQ==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [x64]
+    os: [darwin]
+
   '@rolldown/binding-darwin-x64@1.0.0-beta.9-commit.d91dfb5':
     resolution: {integrity: sha512-40re4rMNrsi57oavRzIOpRGmg3QRlW6Ea8Q3znaqgOuJuKVrrm2bIQInTfkZJG7a4/5YMX7T951d0+toGLTdCA==}
     cpu: [x64]
@@ -4290,6 +4311,12 @@ packages:
     cpu: [x64]
     os: [freebsd]
 
+  '@rolldown/binding-freebsd-x64@1.0.0-beta.47':
+    resolution: {integrity: sha512-Ns+kgp2+1Iq/44bY/Z30DETUSiHY7ZuqaOgD5bHVW++8vme9rdiWsN4yG4rRPXkdgzjvQ9TDHmZZKfY4/G11AA==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [x64]
+    os: [freebsd]
+
   '@rolldown/binding-freebsd-x64@1.0.0-beta.9-commit.d91dfb5':
     resolution: {integrity: sha512-8BDM939bbMariZupiHp3OmP5N+LXPT4mULA0hZjDaq970PCxv4krZOSMG+HkWUUwmuQROtV+/00xw39EO0P+8g==}
     cpu: [x64]
@@ -4306,6 +4333,12 @@ packages:
     cpu: [arm]
     os: [linux]
 
+  '@rolldown/binding-linux-arm-gnueabihf@1.0.0-beta.47':
+    resolution: {integrity: sha512-4PecgWCJhTA2EFOlptYJiNyVP2MrVP4cWdndpOu3WmXqWqZUmSubhb4YUAIxAxnXATlGjC1WjxNPhV7ZllNgdA==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [arm]
+    os: [linux]
+
   '@rolldown/binding-linux-arm-gnueabihf@1.0.0-beta.9-commit.d91dfb5':
     resolution: {integrity: sha512-sntsPaPgrECpBB/+2xrQzVUt0r493TMPI+4kWRMhvMsmrxOqH1Ep5lM0Wua/ZdbfZNwm1aVa5pcESQfNfM4Fhw==}
     cpu: [arm]
@@ -4323,6 +4356,13 @@ packages:
     os: [linux]
     libc: [glibc]
 
+  '@rolldown/binding-linux-arm64-gnu@1.0.0-beta.47':
+    resolution: {integrity: sha512-CyIunZ6D9U9Xg94roQI1INt/bLkOpPsZjZZkiaAZ0r6uccQdICmC99M9RUPlMLw/qg4yEWLlQhG73W/mG437NA==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [arm64]
+    os: [linux]
+    libc: [glibc]
+
   '@rolldown/binding-linux-arm64-gnu@1.0.0-beta.9-commit.d91dfb5':
     resolution: {integrity: sha512-5clBW/I+er9F2uM1OFjJFWX86y7Lcy0M+NqsN4s3o07W+8467Zk8oQa4B45vdaXoNUF/yqIAgKkA/OEdQDxZqA==}
     cpu: [arm64]
@@ -4342,6 +4382,13 @@ packages:
     os: [linux]
     libc: [musl]
 
+  '@rolldown/binding-linux-arm64-musl@1.0.0-beta.47':
+    resolution: {integrity: sha512-doozc/Goe7qRCSnzfJbFINTHsMktqmZQmweull6hsZZ9sjNWQ6BWQnbvOlfZJe4xE5NxM1NhPnY5Giqnl3ZrYQ==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [arm64]
+    os: [linux]
+    libc: [musl]
+
   '@rolldown/binding-linux-arm64-musl@1.0.0-beta.9-commit.d91dfb5':
     resolution: {integrity: sha512-wv+rnAfQDk9p/CheX8/Kmqk2o1WaFa4xhWI9gOyDMk/ljvOX0u0ubeM8nI1Qfox7Tnh71eV5AjzSePXUhFOyOg==}
     cpu: [arm64]
@@ -4361,6 +4408,13 @@ packages:
     os: [linux]
     libc: [glibc]
 
+  '@rolldown/binding-linux-x64-gnu@1.0.0-beta.47':
+    resolution: {integrity: sha512-fodvSMf6Aqwa0wEUSTPewmmZOD44rc5Tpr5p9NkwQ6W1SSpUKzD3SwpJIgANDOhwiYhDuiIaYPGB7Ujkx1q0UQ==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [x64]
+    os: [linux]
+    libc: [glibc]
+
   '@rolldown/binding-linux-x64-gnu@1.0.0-beta.9-commit.d91dfb5':
     resolution: {integrity: sha512-gxD0/xhU4Py47IH3bKZbWtvB99tMkUPGPJFRfSc5UB9Osoje0l0j1PPbxpUtXIELurYCqwLBKXIMTQGifox1BQ==}
     cpu: [x64]
@@ -4380,6 +4434,13 @@ packages:
     os: [linux]
     libc: [musl]
 
+  '@rolldown/binding-linux-x64-musl@1.0.0-beta.47':
+    resolution: {integrity: sha512-Rxm5hYc0mGjwLh5sjlGmMygxAaV2gnsx7CNm2lsb47oyt5UQyPDZf3GP/ct8BEcwuikdqzsrrlIp8+kCSvMFNQ==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [x64]
+    os: [linux]
+    libc: [musl]
+
   '@rolldown/binding-linux-x64-musl@1.0.0-beta.9-commit.d91dfb5':
     resolution: {integrity: sha512-HotuVe3XUjDwqqEMbm3o3IRkP9gdm8raY/btd/6KE3JGLF/cv4+3ff1l6nOhAZI8wulWDPEXPtE7v+HQEaTXnA==}
     cpu: [x64]
@@ -4398,11 +4459,22 @@ packages:
     cpu: [arm64]
     os: [openharmony]
 
+  '@rolldown/binding-openharmony-arm64@1.0.0-beta.47':
+    resolution: {integrity: sha512-YakuVe+Gc87jjxazBL34hbr8RJpRuFBhun7NEqoChVDlH5FLhLXjAPHqZd990TVGVNkemourf817Z8u2fONS8w==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [arm64]
+    os: [openharmony]
+
   '@rolldown/binding-wasm32-wasi@1.0.0-beta.43':
     resolution: {integrity: sha512-3M+2DmorXvDuAIGYQ9Z93Oy1G9ETkejLwdXXb1uRTgKN9pMcu7N+KG2zDrJwqyxeeLIFE22AZGtSJm3PJbNu9Q==}
     engines: {node: '>=14.0.0'}
     cpu: [wasm32]
 
+  '@rolldown/binding-wasm32-wasi@1.0.0-beta.47':
+    resolution: {integrity: sha512-ak2GvTFQz3UAOw8cuQq8pWE+TNygQB6O47rMhvevvTzETh7VkHRFtRUwJynX5hwzFvQMP6G0az5JrBGuwaMwYQ==}
+    engines: {node: '>=14.0.0'}
+    cpu: [wasm32]
+
   '@rolldown/binding-wasm32-wasi@1.0.0-beta.9-commit.d91dfb5':
     resolution: {integrity: sha512-8Cx+ucbd8n2dIr21FqBh6rUvTVL0uTgEtKR7l+MUZ5BgY4dFh1e4mPVX8oqmoYwOxBiXrsD2JIOCz4AyKLKxWA==}
     engines: {node: '>=14.21.3'}
@@ -4419,6 +4491,12 @@ packages:
     cpu: [arm64]
     os: [win32]
 
+  '@rolldown/binding-win32-arm64-msvc@1.0.0-beta.47':
+    resolution: {integrity: sha512-o5BpmBnXU+Cj+9+ndMcdKjhZlPb79dVPBZnWwMnI4RlNSSq5yOvFZqvfPYbyacvnW03Na4n5XXQAPhu3RydZ0w==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [arm64]
+    os: [win32]
+
   '@rolldown/binding-win32-arm64-msvc@1.0.0-beta.9-commit.d91dfb5':
     resolution: {integrity: sha512-Vhq5vikrVDxAa75fxsyqj0c0Y/uti/TwshXI71Xb8IeUQJOBnmLUsn5dgYf5ljpYYkNa0z9BPAvUDIDMmyDi+w==}
     cpu: [arm64]
@@ -4435,6 +4513,12 @@ packages:
     cpu: [ia32]
     os: [win32]
 
+  '@rolldown/binding-win32-ia32-msvc@1.0.0-beta.47':
+    resolution: {integrity: sha512-FVOmfyYehNE92IfC9Kgs913UerDog2M1m+FADJypKz0gmRg3UyTt4o1cZMCAl7MiR89JpM9jegNO1nXuP1w1vw==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [ia32]
+    os: [win32]
+
   '@rolldown/binding-win32-ia32-msvc@1.0.0-beta.9-commit.d91dfb5':
     resolution: {integrity: sha512-lN7RIg9Iugn08zP2aZN9y/MIdG8iOOCE93M1UrFlrxMTqPf8X+fDzmR/OKhTSd1A2pYNipZHjyTcb5H8kyQSow==}
     cpu: [ia32]
@@ -4451,6 +4535,12 @@ packages:
     cpu: [x64]
     os: [win32]
 
+  '@rolldown/binding-win32-x64-msvc@1.0.0-beta.47':
+    resolution: {integrity: sha512-by/70F13IUE101Bat0oeH8miwWX5mhMFPk1yjCdxoTNHTyTdLgb0THNaebRM6AP7Kz+O3O2qx87sruYuF5UxHg==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [x64]
+    os: [win32]
+
   '@rolldown/binding-win32-x64-msvc@1.0.0-beta.9-commit.d91dfb5':
     resolution: {integrity: sha512-7/7cLIn48Y+EpQ4CePvf8reFl63F15yPUlg4ZAhl+RXJIfydkdak1WD8Ir3AwAO+bJBXzrfNL+XQbxm0mcQZmw==}
     cpu: [x64]
@@ -4473,9 +4563,6 @@ packages:
   '@rolldown/pluginutils@1.0.0-beta.50':
     resolution: {integrity: sha512-5e76wQiQVeL1ICOZVUg4LSOVYg9jyhGCin+icYozhsUzM+fHE7kddi1bdiE0jwVqTfkjba3jUFbEkoC9WkdvyA==}
 
-  '@rolldown/pluginutils@1.0.0-beta.9-commit.d91dfb5':
-    resolution: {integrity: sha512-8sExkWRK+zVybw3+2/kBkYBFeLnEUWz1fT7BLHplpzmtqkOfTbAQ9gkt4pzwGIIZmg4Qn5US5ACjUBenrhezwQ==}
-
   '@rollup/plugin-alias@5.1.1':
     resolution: {integrity: sha512-PR9zDb+rOzkRb2VD+EuKB7UC41vU5DIwZ5qqCpk0KJudcWAyi8rvYOhS7+L5aZCspw1stTViLgN5v6FF1p5cgQ==}
     engines: {node: '>=14.0.0'}
@@ -13012,6 +13099,11 @@ packages:
     engines: {node: ^20.19.0 || >=22.12.0}
     hasBin: true
 
+  rolldown@1.0.0-beta.47:
+    resolution: {integrity: sha512-Mid74GckX1OeFAOYz9KuXeWYhq3xkXbMziYIC+ULVdUzPTG9y70OBSBQDQn9hQP8u/AfhuYw1R0BSg15nBI4Dg==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    hasBin: true
+
   rolldown@1.0.0-beta.9-commit.d91dfb5:
     resolution: {integrity: sha512-FHkj6gGEiEgmAXQchglofvUUdwj2Oiw603Rs+zgFAnn9Cb7T7z3fiaEc0DbN3ja4wYkW6sF2rzMEtC1V4BGx/g==}
     hasBin: true
@@ -19107,14 +19199,18 @@ snapshots:
   '@oxc-parser/binding-win32-x64-msvc@0.87.0':
     optional: true
 
-  '@oxc-project/runtime@0.71.0': {}
+  '@oxc-project/runtime@0.71.0':
+    optional: true
 
-  '@oxc-project/types@0.71.0': {}
+  '@oxc-project/types@0.71.0':
+    optional: true
 
   '@oxc-project/types@0.87.0': {}
 
   '@oxc-project/types@0.94.0': {}
 
+  '@oxc-project/types@0.96.0': {}
+
   '@oxc-transform/binding-android-arm64@0.87.0':
     optional: true
 
@@ -19722,62 +19818,97 @@ snapshots:
   '@rolldown/binding-android-arm64@1.0.0-beta.43':
     optional: true
 
+  '@rolldown/binding-android-arm64@1.0.0-beta.47':
+    optional: true
+
   '@rolldown/binding-darwin-arm64@1.0.0-beta.43':
     optional: true
 
+  '@rolldown/binding-darwin-arm64@1.0.0-beta.47':
+    optional: true
+
   '@rolldown/binding-darwin-arm64@1.0.0-beta.9-commit.d91dfb5':
     optional: true
 
   '@rolldown/binding-darwin-x64@1.0.0-beta.43':
     optional: true
 
+  '@rolldown/binding-darwin-x64@1.0.0-beta.47':
+    optional: true
+
   '@rolldown/binding-darwin-x64@1.0.0-beta.9-commit.d91dfb5':
     optional: true
 
   '@rolldown/binding-freebsd-x64@1.0.0-beta.43':
     optional: true
 
+  '@rolldown/binding-freebsd-x64@1.0.0-beta.47':
+    optional: true
+
   '@rolldown/binding-freebsd-x64@1.0.0-beta.9-commit.d91dfb5':
     optional: true
 
   '@rolldown/binding-linux-arm-gnueabihf@1.0.0-beta.43':
     optional: true
 
+  '@rolldown/binding-linux-arm-gnueabihf@1.0.0-beta.47':
+    optional: true
+
   '@rolldown/binding-linux-arm-gnueabihf@1.0.0-beta.9-commit.d91dfb5':
     optional: true
 
   '@rolldown/binding-linux-arm64-gnu@1.0.0-beta.43':
     optional: true
 
+  '@rolldown/binding-linux-arm64-gnu@1.0.0-beta.47':
+    optional: true
+
   '@rolldown/binding-linux-arm64-gnu@1.0.0-beta.9-commit.d91dfb5':
     optional: true
 
   '@rolldown/binding-linux-arm64-musl@1.0.0-beta.43':
     optional: true
 
+  '@rolldown/binding-linux-arm64-musl@1.0.0-beta.47':
+    optional: true
+
   '@rolldown/binding-linux-arm64-musl@1.0.0-beta.9-commit.d91dfb5':
     optional: true
 
   '@rolldown/binding-linux-x64-gnu@1.0.0-beta.43':
     optional: true
 
+  '@rolldown/binding-linux-x64-gnu@1.0.0-beta.47':
+    optional: true
+
   '@rolldown/binding-linux-x64-gnu@1.0.0-beta.9-commit.d91dfb5':
     optional: true
 
   '@rolldown/binding-linux-x64-musl@1.0.0-beta.43':
     optional: true
 
+  '@rolldown/binding-linux-x64-musl@1.0.0-beta.47':
+    optional: true
+
   '@rolldown/binding-linux-x64-musl@1.0.0-beta.9-commit.d91dfb5':
     optional: true
 
   '@rolldown/binding-openharmony-arm64@1.0.0-beta.43':
     optional: true
 
+  '@rolldown/binding-openharmony-arm64@1.0.0-beta.47':
+    optional: true
+
   '@rolldown/binding-wasm32-wasi@1.0.0-beta.43':
     dependencies:
       '@napi-rs/wasm-runtime': 1.0.7
     optional: true
 
+  '@rolldown/binding-wasm32-wasi@1.0.0-beta.47':
+    dependencies:
+      '@napi-rs/wasm-runtime': 1.0.7
+    optional: true
+
   '@rolldown/binding-wasm32-wasi@1.0.0-beta.9-commit.d91dfb5':
     dependencies:
       '@napi-rs/wasm-runtime': 0.2.12
@@ -19791,18 +19922,27 @@ snapshots:
   '@rolldown/binding-win32-arm64-msvc@1.0.0-beta.43':
     optional: true
 
+  '@rolldown/binding-win32-arm64-msvc@1.0.0-beta.47':
+    optional: true
+
   '@rolldown/binding-win32-arm64-msvc@1.0.0-beta.9-commit.d91dfb5':
     optional: true
 
   '@rolldown/binding-win32-ia32-msvc@1.0.0-beta.43':
     optional: true
 
+  '@rolldown/binding-win32-ia32-msvc@1.0.0-beta.47':
+    optional: true
+
   '@rolldown/binding-win32-ia32-msvc@1.0.0-beta.9-commit.d91dfb5':
     optional: true
 
   '@rolldown/binding-win32-x64-msvc@1.0.0-beta.43':
     optional: true
 
+  '@rolldown/binding-win32-x64-msvc@1.0.0-beta.47':
+    optional: true
+
   '@rolldown/binding-win32-x64-msvc@1.0.0-beta.9-commit.d91dfb5':
     optional: true
 
@@ -19814,8 +19954,6 @@ snapshots:
 
   '@rolldown/pluginutils@1.0.0-beta.50': {}
 
-  '@rolldown/pluginutils@1.0.0-beta.9-commit.d91dfb5': {}
-
   '@rollup/plugin-alias@5.1.1(rollup@4.52.4)':
     optionalDependencies:
       rollup: 4.52.4
@@ -30308,7 +30446,7 @@ snapshots:
       glob: 11.0.0
       package-json-from-dist: 1.0.0
 
-  rolldown-plugin-dts@0.16.12(rolldown@1.0.0-beta.9-commit.d91dfb5)(typescript@5.8.3):
+  rolldown-plugin-dts@0.16.12(rolldown@1.0.0-beta.47)(typescript@5.8.3):
     dependencies:
       '@babel/generator': 7.28.3
       '@babel/parser': 7.28.4
@@ -30319,7 +30457,7 @@ snapshots:
       dts-resolver: 2.1.2
       get-tsconfig: 4.13.0
       magic-string: 0.30.19
-      rolldown: 1.0.0-beta.9-commit.d91dfb5
+      rolldown: 1.0.0-beta.47
     optionalDependencies:
       typescript: 5.8.3
     transitivePeerDependencies:
@@ -30347,6 +30485,26 @@ snapshots:
       '@rolldown/binding-win32-ia32-msvc': 1.0.0-beta.43
       '@rolldown/binding-win32-x64-msvc': 1.0.0-beta.43
 
+  rolldown@1.0.0-beta.47:
+    dependencies:
+      '@oxc-project/types': 0.96.0
+      '@rolldown/pluginutils': 1.0.0-beta.47
+    optionalDependencies:
+      '@rolldown/binding-android-arm64': 1.0.0-beta.47
+      '@rolldown/binding-darwin-arm64': 1.0.0-beta.47
+      '@rolldown/binding-darwin-x64': 1.0.0-beta.47
+      '@rolldown/binding-freebsd-x64': 1.0.0-beta.47
+      '@rolldown/binding-linux-arm-gnueabihf': 1.0.0-beta.47
+      '@rolldown/binding-linux-arm64-gnu': 1.0.0-beta.47
+      '@rolldown/binding-linux-arm64-musl': 1.0.0-beta.47
+      '@rolldown/binding-linux-x64-gnu': 1.0.0-beta.47
+      '@rolldown/binding-linux-x64-musl': 1.0.0-beta.47
+      '@rolldown/binding-openharmony-arm64': 1.0.0-beta.47
+      '@rolldown/binding-wasm32-wasi': 1.0.0-beta.47
+      '@rolldown/binding-win32-arm64-msvc': 1.0.0-beta.47
+      '@rolldown/binding-win32-ia32-msvc': 1.0.0-beta.47
+      '@rolldown/binding-win32-x64-msvc': 1.0.0-beta.47
+
   rolldown@1.0.0-beta.9-commit.d91dfb5:
     dependencies:
       '@oxc-project/runtime': 0.71.0
@@ -30366,6 +30524,7 @@ snapshots:
       '@rolldown/binding-win32-arm64-msvc': 1.0.0-beta.9-commit.d91dfb5
       '@rolldown/binding-win32-ia32-msvc': 1.0.0-beta.9-commit.d91dfb5
       '@rolldown/binding-win32-x64-msvc': 1.0.0-beta.9-commit.d91dfb5
+    optional: true
 
   rollup-plugin-visualizer@6.0.3(rolldown@1.0.0-beta.9-commit.d91dfb5)(rollup@4.52.4):
     dependencies:
@@ -31613,8 +31772,8 @@ snapshots:
       diff: 8.0.2
       empathic: 2.0.0
       hookable: 5.5.3
-      rolldown: 1.0.0-beta.9-commit.d91dfb5
-      rolldown-plugin-dts: 0.16.12(rolldown@1.0.0-beta.9-commit.d91dfb5)(typescript@5.8.3)
+      rolldown: 1.0.0-beta.47
+      rolldown-plugin-dts: 0.16.12(rolldown@1.0.0-beta.47)(typescript@5.8.3)
       semver: 7.7.3
       tinyexec: 1.0.1
       tinyglobby: 0.2.15

From ecc17a123f3b60aa975062c5e117541d301072ba Mon Sep 17 00:00:00 2001
From: Laura Beatris <48022589+LauraBeatris@users.noreply.github.com>
Date: Mon, 10 Nov 2025 12:41:26 -0300
Subject: [PATCH 05/30] Revert pnpm-lock.yaml changes

Revert pnpm-lock.yaml changes
---
 packages/clerk-js/src/core/clerk.ts           | 14 ++--
 .../EnableOrganizationsPrompt/index.tsx       | 11 ++-
 packages/shared/src/organization.ts           |  6 +-
 packages/shared/src/types/clerk.ts            | 10 ++-
 playground/app-router/src/app/layout.tsx      | 20 ++---
 pnpm-lock.yaml                                | 73 -------------------
 6 files changed, 32 insertions(+), 102 deletions(-)

diff --git a/packages/clerk-js/src/core/clerk.ts b/packages/clerk-js/src/core/clerk.ts
index be1254f14b3..c331ce42ffc 100644
--- a/packages/clerk-js/src/core/clerk.ts
+++ b/packages/clerk-js/src/core/clerk.ts
@@ -831,7 +831,7 @@ export class Clerk implements ClerkInterface {
     if (disabledOrganizationsFeature(this, this.environment)) {
       if (this.#instanceType === 'development') {
         this.__internal_openEnableOrganizationsPrompt({
-          callerName: 'OrganizationSwitcher',
+          componentName: 'OrganizationProfile',
         });
       }
       return;
@@ -861,7 +861,7 @@ export class Clerk implements ClerkInterface {
     if (disabledOrganizationsFeature(this, this.environment)) {
       if (this.#instanceType === 'development') {
         this.__internal_openEnableOrganizationsPrompt({
-          callerName: 'OrganizationSwitcher',
+          componentName: 'OrganizationSwitcher',
         });
       }
       return;
@@ -1003,7 +1003,7 @@ export class Clerk implements ClerkInterface {
     if (disabledOrganizationsFeature(this, this.environment)) {
       if (this.#instanceType === 'development') {
         this.__internal_openEnableOrganizationsPrompt({
-          callerName: 'OrganizationProfile',
+          componentName: 'OrganizationProfile',
         });
       }
       return;
@@ -1043,7 +1043,7 @@ export class Clerk implements ClerkInterface {
     if (disabledOrganizationsFeature(this, this.environment)) {
       if (this.#instanceType === 'development') {
         this.__internal_openEnableOrganizationsPrompt({
-          callerName: 'OrganizationSwitcher',
+          componentName: 'OrganizationSwitcher',
         });
       }
       return;
@@ -1074,7 +1074,7 @@ export class Clerk implements ClerkInterface {
     if (disabledOrganizationsFeature(this, this.environment)) {
       if (this.#instanceType === 'development') {
         this.__internal_openEnableOrganizationsPrompt({
-          callerName: 'OrganizationSwitcher',
+          componentName: 'OrganizationSwitcher',
         });
       }
       return;
@@ -1113,7 +1113,7 @@ export class Clerk implements ClerkInterface {
     if (disabledOrganizationsFeature(this, this.environment)) {
       if (this.#instanceType === 'development') {
         this.__internal_openEnableOrganizationsPrompt({
-          callerName: 'OrganizationList',
+          componentName: 'OrganizationList',
         });
       }
       return;
@@ -1309,7 +1309,7 @@ export class Clerk implements ClerkInterface {
     if (disabledOrganizationsFeature(this, this.environment)) {
       if (this.#instanceType === 'development') {
         this.__internal_openEnableOrganizationsPrompt({
-          callerName: 'OrganizationSwitcher',
+          componentName: 'OrganizationSwitcher',
         });
       }
       return;
diff --git a/packages/clerk-js/src/ui/components/devPrompts/EnableOrganizationsPrompt/index.tsx b/packages/clerk-js/src/ui/components/devPrompts/EnableOrganizationsPrompt/index.tsx
index c18019b4e27..d5091b1fd25 100644
--- a/packages/clerk-js/src/ui/components/devPrompts/EnableOrganizationsPrompt/index.tsx
+++ b/packages/clerk-js/src/ui/components/devPrompts/EnableOrganizationsPrompt/index.tsx
@@ -1,3 +1,4 @@
+import type { __internal_EnableOrganizationsPromptProps } from '@clerk/shared/types';
 import { css } from '@emotion/react';
 
 import { Modal } from '@/ui/elements/Modal';
@@ -7,11 +8,9 @@ import { Flex } from '../../../customizables';
 import { Portal } from '../../../elements/Portal';
 import { basePromptElementStyles, PromptContainer } from '../shared';
 
-type EnableOrganizationsPromptProps = {
-  callerName: string;
-};
+const EnableOrganizationsPromptInternal = (props: __internal_EnableOrganizationsPromptProps) => {
+  const ctaText = 'componentName' in props ? `<${props.componentName} /> component` : props.utilityName;
 
-const EnableOrganizationsPromptInternal = (_props: EnableOrganizationsPromptProps) => {
   return (
     <Portal>
       <Modal
@@ -114,7 +113,7 @@ const EnableOrganizationsPromptInternal = (_props: EnableOrganizationsPromptProp
                     color: white;
                   `}
                 >
-                  useOrganization
+                  {ctaText}
                 </code>{' '}
                 hook,
                 <br />
@@ -219,7 +218,7 @@ const EnableOrganizationsPromptInternal = (_props: EnableOrganizationsPromptProp
  * A prompt that allows the user to enable the Organizations feature for their development instance
  * @internal
  */
-export const EnableOrganizationsPrompt = (props: EnableOrganizationsPromptProps) => {
+export const EnableOrganizationsPrompt = (props: __internal_EnableOrganizationsPromptProps) => {
   return (
     <InternalThemeProvider>
       <EnableOrganizationsPromptInternal {...props} />
diff --git a/packages/shared/src/organization.ts b/packages/shared/src/organization.ts
index 9aaa516f3ff..2e81fe80619 100644
--- a/packages/shared/src/organization.ts
+++ b/packages/shared/src/organization.ts
@@ -1,4 +1,4 @@
-import type { LoadedClerk, OrganizationMembershipResource } from './types';
+import type { __internal_EnableOrganizationsPromptProps, LoadedClerk, OrganizationMembershipResource } from './types';
 
 /**
  * Finds the organization membership for a given organization ID from a list of memberships
@@ -26,7 +26,7 @@ export const withOrganizationSettingsEnabled =
   <TParams extends any[], TReturn>(
     hook: (...args: TParams) => TReturn,
     getLoadedClerk: () => LoadedClerk | null | undefined,
-    callerName?: string,
+    utilityName?: __internal_EnableOrganizationsPromptProps['utilityName'],
   ) =>
   (...args: TParams): TReturn => {
     const clerk = getLoadedClerk();
@@ -35,7 +35,7 @@ export const withOrganizationSettingsEnabled =
 
     if (!environment?.organizationSettings.enabled) {
       clerk?.__internal_openEnableOrganizationsPrompt({
-        callerName,
+        utilityName,
       });
     }
 
diff --git a/packages/shared/src/types/clerk.ts b/packages/shared/src/types/clerk.ts
index 859cc5bc567..59af9367c28 100644
--- a/packages/shared/src/types/clerk.ts
+++ b/packages/shared/src/types/clerk.ts
@@ -1439,9 +1439,13 @@ export type __internal_UserVerificationProps = RoutingOptions & {
 
 export type __internal_UserVerificationModalProps = WithoutRouting<__internal_UserVerificationProps>;
 
-export type __internal_EnableOrganizationsPromptProps = {
-  callerName: string;
-};
+export type __internal_EnableOrganizationsPromptProps =
+  | {
+      componentName: 'OrganizationSwitcher' | 'OrganizationProfile' | 'OrganizationList';
+    }
+  | {
+      utilityName: 'useOrganizationList' | 'useOrganization';
+    };
 
 type GoogleOneTapRedirectUrlProps = SignInForceRedirectUrl & SignUpForceRedirectUrl;
 
diff --git a/playground/app-router/src/app/layout.tsx b/playground/app-router/src/app/layout.tsx
index de072d2b2a5..c90b61270fd 100644
--- a/playground/app-router/src/app/layout.tsx
+++ b/playground/app-router/src/app/layout.tsx
@@ -1,7 +1,7 @@
-import { Links } from '@/common/Links';
-import { ClerkProvider } from '@clerk/nextjs';
-import { Inter } from 'next/font/google';
 import './globals.css';
+import { Inter } from 'next/font/google';
+import { ClerkProvider } from '@clerk/nextjs';
+import { Links } from '@/common/Links';
 
 const inter = Inter({ subsets: ['latin'] });
 
@@ -15,13 +15,13 @@ export default function RootLayout({ children }: { children: React.ReactNode })
   return (
     <ClerkProvider clerkJSUrl={'https://js.lclclerk.com/npm/clerk.browser.js'}>
       <html lang='en'>
-      <body className={inter.className}>
-      <Links />
-      <div style={{ margin: '1rem', padding: '1rem', border: '1px solid green' }}>
-        <h2>Root layout</h2>
-        {children}
-      </div>
-      </body>
+        <body className={inter.className}>
+          <Links />
+          <div style={{ margin: '1rem', padding: '1rem', border: '1px solid green' }}>
+            <h2>Root layout</h2>
+            {children}
+          </div>
+        </body>
       </html>
     </ClerkProvider>
   );
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 326e4de0b86..44854c5622a 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -4278,11 +4278,6 @@ packages:
     cpu: [arm64]
     os: [darwin]
 
-  '@rolldown/binding-darwin-arm64@1.0.0-beta.9-commit.d91dfb5':
-    resolution: {integrity: sha512-Mp0/gqiPdepHjjVm7e0yL1acWvI0rJVVFQEADSezvAjon9sjQ7CEg9JnXICD4B1YrPmN9qV/e7cQZCp87tTV4w==}
-    cpu: [arm64]
-    os: [darwin]
-
   '@rolldown/binding-darwin-x64@1.0.0-beta.43':
     resolution: {integrity: sha512-u9Ps4sh6lcmJ3vgLtyEg/x4jlhI64U0mM93Ew+tlfFdLDe7yKyA+Fe80cpr2n1mNCeZXrvTSbZluKpXQ0GxLjw==}
     engines: {node: ^20.19.0 || >=22.12.0}
@@ -4300,11 +4295,6 @@ packages:
     cpu: [x64]
     os: [darwin]
 
-  '@rolldown/binding-darwin-x64@1.0.0-beta.9-commit.d91dfb5':
-    resolution: {integrity: sha512-40re4rMNrsi57oavRzIOpRGmg3QRlW6Ea8Q3znaqgOuJuKVrrm2bIQInTfkZJG7a4/5YMX7T951d0+toGLTdCA==}
-    cpu: [x64]
-    os: [darwin]
-
   '@rolldown/binding-freebsd-x64@1.0.0-beta.43':
     resolution: {integrity: sha512-h9lUtVtXgfbk/tnicMpbFfZ3DJvk5Zn2IvmlC1/e0+nUfwoc/TFqpfrRRqcNBXk/e+xiWMSKv6b0MF8N+Rtvlg==}
     engines: {node: ^20.19.0 || >=22.12.0}
@@ -4322,11 +4312,6 @@ packages:
     cpu: [x64]
     os: [freebsd]
 
-  '@rolldown/binding-freebsd-x64@1.0.0-beta.9-commit.d91dfb5':
-    resolution: {integrity: sha512-8BDM939bbMariZupiHp3OmP5N+LXPT4mULA0hZjDaq970PCxv4krZOSMG+HkWUUwmuQROtV+/00xw39EO0P+8g==}
-    cpu: [x64]
-    os: [freebsd]
-
   '@rolldown/binding-linux-arm-gnueabihf@1.0.0-beta.43':
     resolution: {integrity: sha512-IX2C6bA6wM2rX/RvD75ko+ix9yxPKjKGGq7pOhB8wGI4Z4fqX5B1nDHga/qMDmAdCAR1m9ymzxkmqhm/AFYf7A==}
     engines: {node: ^20.19.0 || >=22.12.0}
@@ -4344,11 +4329,6 @@ packages:
     cpu: [arm]
     os: [linux]
 
-  '@rolldown/binding-linux-arm-gnueabihf@1.0.0-beta.9-commit.d91dfb5':
-    resolution: {integrity: sha512-sntsPaPgrECpBB/+2xrQzVUt0r493TMPI+4kWRMhvMsmrxOqH1Ep5lM0Wua/ZdbfZNwm1aVa5pcESQfNfM4Fhw==}
-    cpu: [arm]
-    os: [linux]
-
   '@rolldown/binding-linux-arm64-gnu@1.0.0-beta.43':
     resolution: {integrity: sha512-mcjd57vEj+CEQbZAzUiaxNzNgwwgOpFtZBWcINm8DNscvkXl5b/s622Z1dqGNWSdrZmdjdC6LWMvu8iHM6v9sQ==}
     engines: {node: ^20.19.0 || >=22.12.0}
@@ -4369,12 +4349,6 @@ packages:
     os: [linux]
     libc: [glibc]
 
-  '@rolldown/binding-linux-arm64-gnu@1.0.0-beta.9-commit.d91dfb5':
-    resolution: {integrity: sha512-5clBW/I+er9F2uM1OFjJFWX86y7Lcy0M+NqsN4s3o07W+8467Zk8oQa4B45vdaXoNUF/yqIAgKkA/OEdQDxZqA==}
-    cpu: [arm64]
-    os: [linux]
-    libc: [glibc]
-
   '@rolldown/binding-linux-arm64-musl@1.0.0-beta.43':
     resolution: {integrity: sha512-Pa8QMwlkrztTo/1mVjZmPIQ44tCSci10TBqxzVBvXVA5CFh5EpiEi99fPSll2dHG2uT4dCOMeC6fIhyDdb0zXA==}
     engines: {node: ^20.19.0 || >=22.12.0}
@@ -4395,12 +4369,6 @@ packages:
     os: [linux]
     libc: [musl]
 
-  '@rolldown/binding-linux-arm64-musl@1.0.0-beta.9-commit.d91dfb5':
-    resolution: {integrity: sha512-wv+rnAfQDk9p/CheX8/Kmqk2o1WaFa4xhWI9gOyDMk/ljvOX0u0ubeM8nI1Qfox7Tnh71eV5AjzSePXUhFOyOg==}
-    cpu: [arm64]
-    os: [linux]
-    libc: [musl]
-
   '@rolldown/binding-linux-x64-gnu@1.0.0-beta.43':
     resolution: {integrity: sha512-BgynXKMjeaX4AfWLARhOKDetBOOghnSiVRjAHVvhiAaDXgdQN8e65mSmXRiVoVtD3cHXx/cfU8Gw0p0K+qYKVQ==}
     engines: {node: ^20.19.0 || >=22.12.0}
@@ -4421,12 +4389,6 @@ packages:
     os: [linux]
     libc: [glibc]
 
-  '@rolldown/binding-linux-x64-gnu@1.0.0-beta.9-commit.d91dfb5':
-    resolution: {integrity: sha512-gxD0/xhU4Py47IH3bKZbWtvB99tMkUPGPJFRfSc5UB9Osoje0l0j1PPbxpUtXIELurYCqwLBKXIMTQGifox1BQ==}
-    cpu: [x64]
-    os: [linux]
-    libc: [glibc]
-
   '@rolldown/binding-linux-x64-musl@1.0.0-beta.43':
     resolution: {integrity: sha512-VIsoPlOB/tDSAw9CySckBYysoIBqLeps1/umNSYUD8pMtalJyzMTneAVI1HrUdf4ceFmQ5vARoLIXSsPwVFxNg==}
     engines: {node: ^20.19.0 || >=22.12.0}
@@ -4447,12 +4409,6 @@ packages:
     os: [linux]
     libc: [musl]
 
-  '@rolldown/binding-linux-x64-musl@1.0.0-beta.9-commit.d91dfb5':
-    resolution: {integrity: sha512-HotuVe3XUjDwqqEMbm3o3IRkP9gdm8raY/btd/6KE3JGLF/cv4+3ff1l6nOhAZI8wulWDPEXPtE7v+HQEaTXnA==}
-    cpu: [x64]
-    os: [linux]
-    libc: [musl]
-
   '@rolldown/binding-openharmony-arm64@1.0.0-beta.43':
     resolution: {integrity: sha512-YDXTxVJG67PqTQMKyjVJSddoPbSWJ4yRz/E3xzTLHqNrTDGY0UuhG8EMr8zsYnfH/0cPFJ3wjQd/hJWHuR6nkA==}
     engines: {node: ^20.19.0 || >=22.12.0}
@@ -4480,11 +4436,6 @@ packages:
     engines: {node: '>=14.21.3'}
     cpu: [wasm32]
 
-  '@rolldown/binding-wasm32-wasi@1.0.0-beta.9-commit.d91dfb5':
-    resolution: {integrity: sha512-8Cx+ucbd8n2dIr21FqBh6rUvTVL0uTgEtKR7l+MUZ5BgY4dFh1e4mPVX8oqmoYwOxBiXrsD2JIOCz4AyKLKxWA==}
-    engines: {node: '>=14.21.3'}
-    cpu: [wasm32]
-
   '@rolldown/binding-win32-arm64-msvc@1.0.0-beta.43':
     resolution: {integrity: sha512-/B1j1pJs33y9ywtslOMxryUPHq8zIGu/OGEc2gyed0slimJ8fX2uR/SaJVhB4+NEgCFIeYDR4CX6jynAkeRuCA==}
     engines: {node: ^20.19.0 || >=22.12.0}
@@ -4502,11 +4453,6 @@ packages:
     cpu: [arm64]
     os: [win32]
 
-  '@rolldown/binding-win32-arm64-msvc@1.0.0-beta.9-commit.d91dfb5':
-    resolution: {integrity: sha512-Vhq5vikrVDxAa75fxsyqj0c0Y/uti/TwshXI71Xb8IeUQJOBnmLUsn5dgYf5ljpYYkNa0z9BPAvUDIDMmyDi+w==}
-    cpu: [arm64]
-    os: [win32]
-
   '@rolldown/binding-win32-ia32-msvc@1.0.0-beta.43':
     resolution: {integrity: sha512-29oG1swCz7hNP+CQYrsM4EtylsKwuYzM8ljqbqC5TsQwmKat7P8ouDpImsqg/GZxFSXcPP9ezQm0Q0wQwGM3JA==}
     engines: {node: ^20.19.0 || >=22.12.0}
@@ -4524,11 +4470,6 @@ packages:
     cpu: [ia32]
     os: [win32]
 
-  '@rolldown/binding-win32-ia32-msvc@1.0.0-beta.9-commit.d91dfb5':
-    resolution: {integrity: sha512-lN7RIg9Iugn08zP2aZN9y/MIdG8iOOCE93M1UrFlrxMTqPf8X+fDzmR/OKhTSd1A2pYNipZHjyTcb5H8kyQSow==}
-    cpu: [ia32]
-    os: [win32]
-
   '@rolldown/binding-win32-x64-msvc@1.0.0-beta.43':
     resolution: {integrity: sha512-eWBV1Ef3gfGNehxVGCyXs7wLayRIgCmyItuCZwYYXW5bsk4EvR4n2GP5m3ohjnx7wdiY3nLmwQfH2Knb5gbNZw==}
     engines: {node: ^20.19.0 || >=22.12.0}
@@ -4546,11 +4487,6 @@ packages:
     cpu: [x64]
     os: [win32]
 
-  '@rolldown/binding-win32-x64-msvc@1.0.0-beta.9-commit.d91dfb5':
-    resolution: {integrity: sha512-7/7cLIn48Y+EpQ4CePvf8reFl63F15yPUlg4ZAhl+RXJIfydkdak1WD8Ir3AwAO+bJBXzrfNL+XQbxm0mcQZmw==}
-    cpu: [x64]
-    os: [win32]
-
   '@rolldown/pluginutils@1.0.0-beta.11':
     resolution: {integrity: sha512-L/gAA/hyCSuzTF1ftlzUSI/IKr2POHsv1Dd78GfqkR83KMNuswWD61JxGV2L7nRwBBBSDr6R1gCkdTmoN7W4ag==}
 
@@ -13108,10 +13044,6 @@ packages:
     resolution: {integrity: sha512-FHkj6gGEiEgmAXQchglofvUUdwj2Oiw603Rs+zgFAnn9Cb7T7z3fiaEc0DbN3ja4wYkW6sF2rzMEtC1V4BGx/g==}
     hasBin: true
 
-  rolldown@1.0.0-beta.9-commit.d91dfb5:
-    resolution: {integrity: sha512-FHkj6gGEiEgmAXQchglofvUUdwj2Oiw603Rs+zgFAnn9Cb7T7z3fiaEc0DbN3ja4wYkW6sF2rzMEtC1V4BGx/g==}
-    hasBin: true
-
   rollup-plugin-visualizer@6.0.3:
     resolution: {integrity: sha512-ZU41GwrkDcCpVoffviuM9Clwjy5fcUxlz0oMoTXTYsK+tcIFzbdacnrr2n8TXcHxbGKKXtOdjxM2HUS4HjkwIw==}
     engines: {node: '>=18'}
@@ -19914,11 +19846,6 @@ snapshots:
       '@napi-rs/wasm-runtime': 0.2.12
     optional: true
 
-  '@rolldown/binding-wasm32-wasi@1.0.0-beta.9-commit.d91dfb5':
-    dependencies:
-      '@napi-rs/wasm-runtime': 0.2.12
-    optional: true
-
   '@rolldown/binding-win32-arm64-msvc@1.0.0-beta.43':
     optional: true
 

From fce2cc2319de6b33b2d70b2d9b1f44d399beb3ff Mon Sep 17 00:00:00 2001
From: Laura Beatris <48022589+LauraBeatris@users.noreply.github.com>
Date: Tue, 11 Nov 2025 14:37:40 -0300
Subject: [PATCH 06/30] Update `PromptContainer` to exclude keyless styles

---
 .../EnableOrganizationsPrompt/index.tsx       | 105 +++++++++---------
 .../devPrompts/KeylessPrompt/index.tsx        |   8 ++
 .../src/ui/components/devPrompts/shared.tsx   |   6 -
 3 files changed, 61 insertions(+), 58 deletions(-)

diff --git a/packages/clerk-js/src/ui/components/devPrompts/EnableOrganizationsPrompt/index.tsx b/packages/clerk-js/src/ui/components/devPrompts/EnableOrganizationsPrompt/index.tsx
index d5091b1fd25..2ba565d377d 100644
--- a/packages/clerk-js/src/ui/components/devPrompts/EnableOrganizationsPrompt/index.tsx
+++ b/packages/clerk-js/src/ui/components/devPrompts/EnableOrganizationsPrompt/index.tsx
@@ -9,46 +9,40 @@ import { Portal } from '../../../elements/Portal';
 import { basePromptElementStyles, PromptContainer } from '../shared';
 
 const EnableOrganizationsPromptInternal = (props: __internal_EnableOrganizationsPromptProps) => {
-  const ctaText = 'componentName' in props ? `<${props.componentName} /> component` : props.utilityName;
+  const ctaText = 'componentName' in props ? `<${props.componentName} />` : props.utilityName;
 
   return (
     <Portal>
       <Modal
         canCloseModal={false}
-        contentSx={() => ({ animation: 'unset' })}
+        containerSx={() => ({ alignItems: 'center' })}
       >
         <PromptContainer
           sx={() => ({
-            top: '50%',
-            left: '50%',
-            bottom: 'auto',
-            right: 'auto',
-            padding: 'unset',
-            transform: 'translate(-50%, -50%)',
+            display: 'flex',
             flexDirection: 'column',
-            height: 'fit-content',
           })}
         >
           <Flex
+            direction='col'
             sx={t => ({
-              display: 'flex',
-              flexDirection: 'column',
-              padding: `${t.space.$5} ${t.space.$6}`,
-              paddingBottom: t.space.$4,
-              gap: t.space.$2,
+              padding: `${t.sizes.$4} ${t.sizes.$6}`,
+              paddingBottom: t.sizes.$4,
+              gap: t.sizes.$2,
             })}
           >
             <Flex
               as='header'
+              align='center'
               sx={t => ({
-                display: 'flex',
-                alignItems: 'center',
-                gap: t.space.$2,
+                gap: t.sizes.$2,
               })}
             >
               <svg
-                width='20'
-                height='20'
+                css={css`
+                  width: 1.25rem;
+                  height: 1.25rem;
+                `}
                 viewBox='0 0 20 20'
                 fill='none'
                 xmlns='http://www.w3.org/2000/svg'
@@ -79,43 +73,48 @@ const EnableOrganizationsPromptInternal = (props: __internal_EnableOrganizations
               </svg>
 
               <h1
-                css={css`
-                  ${basePromptElementStyles};
-                  color: white;
-                  font-size: 0.875rem;
-                  font-weight: 500;
-                `}
+                css={[
+                  basePromptElementStyles,
+                  css`
+                    color: white;
+                    font-size: 0.875rem;
+                    font-weight: 500;
+                  `,
+                ]}
               >
                 Organizations feature required
               </h1>
             </Flex>
 
             <Flex
+              direction='col'
               sx={t => ({
-                display: 'flex',
-                flexDirection: 'column',
-                gap: t.space.$0x5,
+                gap: t.sizes.$0x5,
               })}
             >
               <span
-                css={css`
-                  ${basePromptElementStyles};
-                  color: #b4b4b4;
-                  font-size: 0.8125rem;
-                  font-weight: 400;
-                  line-height: 1rem;
-                `}
+                css={[
+                  basePromptElementStyles,
+                  css`
+                    color: #b4b4b4;
+                    font-size: 0.8125rem;
+                    font-weight: 400;
+                    line-height: 1rem;
+                  `,
+                ]}
               >
                 To use the{' '}
                 <code
-                  css={css`
-                    ${basePromptElementStyles};
-                    color: white;
-                  `}
+                  css={[
+                    basePromptElementStyles,
+                    css`
+                      color: white;
+                    `,
+                  ]}
                 >
                   {ctaText}
                 </code>{' '}
-                hook,
+                {'componentName' in props ? 'component' : 'hook'},
                 <br />
                 you’ll need to enable the Organizations feature
                 <br />
@@ -123,14 +122,16 @@ const EnableOrganizationsPromptInternal = (props: __internal_EnableOrganizations
               </span>
 
               <a
-                css={css`
-                  ${basePromptElementStyles};
-                  color: #a8a8ff;
-                  font-size: inherit;
-                  font-weight: 500;
-                  line-height: 1rem;
-                  font-size: 0.8125rem;
-                `}
+                css={[
+                  basePromptElementStyles,
+                  css`
+                    color: #a8a8ff;
+                    font-size: inherit;
+                    font-weight: 500;
+                    line-height: 1rem;
+                    font-size: 0.8125rem;
+                  `,
+                ]}
                 href='https://clerk.com/docs/guides/organizations'
                 target='_blank'
                 rel='noopener noreferrer'
@@ -152,11 +153,11 @@ const EnableOrganizationsPromptInternal = (props: __internal_EnableOrganizations
 
           {/* TODO -> Introduce FAPI mutation to enable organizations */}
           <Flex
+            direction='col'
+            justify='center'
             sx={t => ({
-              padding: `${t.space.$4} ${t.space.$6}`,
-              flexDirection: 'column',
-              gap: t.space.$3,
-              justifyContent: 'center',
+              padding: `${t.sizes.$4} ${t.sizes.$6}`,
+              gap: t.sizes.$3,
             })}
           >
             <button
diff --git a/packages/clerk-js/src/ui/components/devPrompts/KeylessPrompt/index.tsx b/packages/clerk-js/src/ui/components/devPrompts/KeylessPrompt/index.tsx
index d92f429d3c4..3d24d08765e 100644
--- a/packages/clerk-js/src/ui/components/devPrompts/KeylessPrompt/index.tsx
+++ b/packages/clerk-js/src/ui/components/devPrompts/KeylessPrompt/index.tsx
@@ -130,6 +130,14 @@ const KeylessPromptInternal = (_props: KeylessPromptProps) => {
       <PromptContainer
         data-expanded={isForcedExpanded}
         sx={t => ({
+          position: 'fixed',
+          bottom: '1.25rem',
+          right: '1.25rem',
+          height: `${t.sizes.$10}`,
+          minWidth: '13.4rem',
+          paddingLeft: `${t.space.$3}`,
+          borderRadius: '1.25rem',
+
           '&[data-expanded="false"]:hover': {
             background: 'linear-gradient(180deg, rgba(255, 255, 255, 0.20) 0%, rgba(255, 255, 255, 0) 100%), #1f1f1f',
           },
diff --git a/packages/clerk-js/src/ui/components/devPrompts/shared.tsx b/packages/clerk-js/src/ui/components/devPrompts/shared.tsx
index 164753203a6..700a187dee0 100644
--- a/packages/clerk-js/src/ui/components/devPrompts/shared.tsx
+++ b/packages/clerk-js/src/ui/components/devPrompts/shared.tsx
@@ -11,12 +11,6 @@ export function PromptContainer({ children, sx, ...props }: React.ComponentProps
     <Flex
       sx={t => [
         {
-          position: 'fixed',
-          bottom: '1.25rem',
-          right: '1.25rem',
-          height: `${t.sizes.$10}`,
-          minWidth: '13.4rem',
-          paddingLeft: `${t.space.$3}`,
           borderRadius: '1.25rem',
           fontFamily: t.fonts.$main,
           background: 'linear-gradient(180deg, rgba(255, 255, 255, 0.16) 0%, rgba(255, 255, 255, 0) 100%), #1f1f1f',

From 737ccc6b5c6dcf1fe84e97a4f6201ccb099844ad Mon Sep 17 00:00:00 2001
From: Laura Beatris <48022589+LauraBeatris@users.noreply.github.com>
Date: Tue, 11 Nov 2025 14:49:31 -0300
Subject: [PATCH 07/30] Fix line height and use monospace font

---
 .../devPrompts/EnableOrganizationsPrompt/index.tsx  | 13 +++++++------
 .../src/ui/components/devPrompts/shared.tsx         |  1 +
 2 files changed, 8 insertions(+), 6 deletions(-)

diff --git a/packages/clerk-js/src/ui/components/devPrompts/EnableOrganizationsPrompt/index.tsx b/packages/clerk-js/src/ui/components/devPrompts/EnableOrganizationsPrompt/index.tsx
index 2ba565d377d..d3eb3b54a3b 100644
--- a/packages/clerk-js/src/ui/components/devPrompts/EnableOrganizationsPrompt/index.tsx
+++ b/packages/clerk-js/src/ui/components/devPrompts/EnableOrganizationsPrompt/index.tsx
@@ -1,4 +1,5 @@
 import type { __internal_EnableOrganizationsPromptProps } from '@clerk/shared/types';
+// eslint-disable-next-line no-restricted-imports
 import { css } from '@emotion/react';
 
 import { Modal } from '@/ui/elements/Modal';
@@ -90,6 +91,7 @@ const EnableOrganizationsPromptInternal = (props: __internal_EnableOrganizations
               direction='col'
               sx={t => ({
                 gap: t.sizes.$0x5,
+                maxWidth: '18.75rem',
               })}
             >
               <span
@@ -99,7 +101,7 @@ const EnableOrganizationsPromptInternal = (props: __internal_EnableOrganizations
                     color: #b4b4b4;
                     font-size: 0.8125rem;
                     font-weight: 400;
-                    line-height: 1rem;
+                    line-height: 1.23;
                   `,
                 ]}
               >
@@ -109,15 +111,14 @@ const EnableOrganizationsPromptInternal = (props: __internal_EnableOrganizations
                     basePromptElementStyles,
                     css`
                       color: white;
+                      font-family: monospace;
+                      line-height: 1.23;
                     `,
                   ]}
                 >
                   {ctaText}
                 </code>{' '}
-                {'componentName' in props ? 'component' : 'hook'},
-                <br />
-                you’ll need to enable the Organizations feature
-                <br />
+                {'componentName' in props ? 'component' : 'hook'}, you&apos;ll need to enable the Organizations feature
                 for your app first.
               </span>
 
@@ -128,7 +129,7 @@ const EnableOrganizationsPromptInternal = (props: __internal_EnableOrganizations
                     color: #a8a8ff;
                     font-size: inherit;
                     font-weight: 500;
-                    line-height: 1rem;
+                    line-height: 1.5;
                     font-size: 0.8125rem;
                   `,
                 ]}
diff --git a/packages/clerk-js/src/ui/components/devPrompts/shared.tsx b/packages/clerk-js/src/ui/components/devPrompts/shared.tsx
index 700a187dee0..125ff89ebe6 100644
--- a/packages/clerk-js/src/ui/components/devPrompts/shared.tsx
+++ b/packages/clerk-js/src/ui/components/devPrompts/shared.tsx
@@ -1,3 +1,4 @@
+// eslint-disable-next-line no-restricted-imports
 import { css } from '@emotion/react';
 
 import { Flex } from '@/ui/customizables';

From 9b862d6aa2c238535b8c862258bc52f138553080 Mon Sep 17 00:00:00 2001
From: Laura Beatris <48022589+LauraBeatris@users.noreply.github.com>
Date: Tue, 11 Nov 2025 15:46:11 -0300
Subject: [PATCH 08/30] Introduce mutation to enable organization settings

---
 packages/clerk-js/src/core/clerk.ts           |  4 +--
 packages/clerk-js/src/core/fapiClient.ts      |  2 +-
 .../clerk-js/src/core/resources/DevTools.ts   | 21 ++++++++++++
 .../EnableOrganizationsPrompt/index.tsx       | 34 +++++++++++++++++--
 packages/react/src/isomorphicClerk.ts         |  4 +--
 packages/shared/src/organization.ts           |  2 +-
 packages/shared/src/types/clerk.ts            |  2 +-
 packages/shared/src/types/devtools.ts         | 12 +++++++
 packages/shared/src/types/index.ts            |  1 +
 9 files changed, 73 insertions(+), 9 deletions(-)
 create mode 100644 packages/clerk-js/src/core/resources/DevTools.ts
 create mode 100644 packages/shared/src/types/devtools.ts

diff --git a/packages/clerk-js/src/core/clerk.ts b/packages/clerk-js/src/core/clerk.ts
index c331ce42ffc..9b1f0526d63 100644
--- a/packages/clerk-js/src/core/clerk.ts
+++ b/packages/clerk-js/src/core/clerk.ts
@@ -36,9 +36,9 @@ import type {
   AuthenticateWithMetamaskParams,
   AuthenticateWithOKXWalletParams,
   BillingNamespace,
+  Clerk as ClerkInterface,
   ClerkAPIError,
   ClerkAuthenticateWithWeb3Params,
-  Clerk as ClerkInterface,
   ClerkOptions,
   ClientJSONSnapshot,
   ClientResource,
@@ -752,7 +752,7 @@ export class Clerk implements ClerkInterface {
       .then(controls => controls.openModal('enableOrganizationsPrompt', props || {}));
   };
 
-  public __internal_closeEnableOrganizations = (): void => {
+  public __internal_closeEnableOrganizationsPrompt = (): void => {
     this.assertComponentsReady(this.#componentControls);
     void this.#componentControls.ensureMounted().then(controls => controls.closeModal('enableOrganizationsPrompt'));
   };
diff --git a/packages/clerk-js/src/core/fapiClient.ts b/packages/clerk-js/src/core/fapiClient.ts
index 7d03e620c27..42af60d0f61 100644
--- a/packages/clerk-js/src/core/fapiClient.ts
+++ b/packages/clerk-js/src/core/fapiClient.ts
@@ -66,7 +66,7 @@ export interface FapiClient {
 }
 
 // List of paths that should not receive the session ID parameter in the URL
-const unauthorizedPathPrefixes = ['/client', '/waitlist'];
+const unauthorizedPathPrefixes = ['/client', '/waitlist', '/dev_tools'];
 
 type FapiClientOptions = {
   frontendApi: string;
diff --git a/packages/clerk-js/src/core/resources/DevTools.ts b/packages/clerk-js/src/core/resources/DevTools.ts
new file mode 100644
index 00000000000..9a517858604
--- /dev/null
+++ b/packages/clerk-js/src/core/resources/DevTools.ts
@@ -0,0 +1,21 @@
+import type { ClerkResourceJSON, DevToolsResource, EnableEnvironmentSettingParams } from '@clerk/shared/types';
+
+import { BaseResource } from './Base';
+
+/**
+ * @internal
+ */
+export class DevTools extends BaseResource implements DevToolsResource {
+  pathRoot = '/dev_tools';
+
+  protected fromJSON(_data: ClerkResourceJSON | null): this {
+    return this;
+  }
+
+  async __internal_enableEnvironmentSetting(params: EnableEnvironmentSettingParams) {
+    await this._basePatch({
+      path: `${this.pathRoot}/enable_environment_setting`,
+      body: params,
+    });
+  }
+}
diff --git a/packages/clerk-js/src/ui/components/devPrompts/EnableOrganizationsPrompt/index.tsx b/packages/clerk-js/src/ui/components/devPrompts/EnableOrganizationsPrompt/index.tsx
index d3eb3b54a3b..29d4abedc93 100644
--- a/packages/clerk-js/src/ui/components/devPrompts/EnableOrganizationsPrompt/index.tsx
+++ b/packages/clerk-js/src/ui/components/devPrompts/EnableOrganizationsPrompt/index.tsx
@@ -1,16 +1,40 @@
+import { useClerk } from '@clerk/shared/react';
 import type { __internal_EnableOrganizationsPromptProps } from '@clerk/shared/types';
 // eslint-disable-next-line no-restricted-imports
 import { css } from '@emotion/react';
+import { useState } from 'react';
 
 import { Modal } from '@/ui/elements/Modal';
 import { InternalThemeProvider } from '@/ui/styledSystem';
 
+import { DevTools } from '../../../../core/resources/DevTools';
 import { Flex } from '../../../customizables';
 import { Portal } from '../../../elements/Portal';
 import { basePromptElementStyles, PromptContainer } from '../shared';
 
 const EnableOrganizationsPromptInternal = (props: __internal_EnableOrganizationsPromptProps) => {
   const ctaText = 'componentName' in props ? `<${props.componentName} />` : props.utilityName;
+  const clerk = useClerk();
+  const [isLoading, setIsLoading] = useState(false);
+
+  const handleEnableOrganizations = () => {
+    setIsLoading(true);
+
+    void new DevTools()
+      .__internal_enableEnvironmentSetting({
+        enable_organizations: true,
+      })
+      .then(() => {
+        // Re-fetch environment to get updated settings
+        // @ts-expect-error - __unstable__environment is not typed
+        const environment = clerk?.__unstable__environment;
+        environment.fetch?.();
+        clerk?.__internal_closeEnableOrganizationsPrompt?.();
+      })
+      .finally(() => {
+        setIsLoading(false);
+      });
+  };
 
   return (
     <Portal>
@@ -152,7 +176,6 @@ const EnableOrganizationsPromptInternal = (props: __internal_EnableOrganizations
             `}
           />
 
-          {/* TODO -> Introduce FAPI mutation to enable organizations */}
           <Flex
             direction='col'
             justify='center'
@@ -163,6 +186,8 @@ const EnableOrganizationsPromptInternal = (props: __internal_EnableOrganizations
           >
             <button
               type='button'
+              onClick={handleEnableOrganizations}
+              disabled={isLoading}
               css={css`
                 ${mainCTAStyles};
                 min-width: 100%;
@@ -175,7 +200,7 @@ const EnableOrganizationsPromptInternal = (props: __internal_EnableOrganizations
                   0px 1.5px 2px 0px rgba(0, 0, 0, 0.48),
                   0px 0px 4px 0px rgba(243, 107, 22, 0) inset;
 
-                &:hover {
+                &:hover:not(:disabled) {
                   box-shadow:
                     0px 0px 6px 0px rgba(255, 255, 255, 0.04) inset,
                     0px 0px 0px 1px rgba(255, 255, 255, 0.04) inset,
@@ -183,6 +208,11 @@ const EnableOrganizationsPromptInternal = (props: __internal_EnableOrganizations
                     0px 0px 0px 1px rgba(0, 0, 0, 0.1),
                     0px 1.5px 2px 0px rgba(0, 0, 0, 0.48);
                 }
+
+                &:disabled {
+                  opacity: 0.6;
+                  cursor: not-allowed;
+                }
               `}
             >
               Enable Organizations
diff --git a/packages/react/src/isomorphicClerk.ts b/packages/react/src/isomorphicClerk.ts
index 17aec8cc4b6..2cc1f79631e 100644
--- a/packages/react/src/isomorphicClerk.ts
+++ b/packages/react/src/isomorphicClerk.ts
@@ -872,9 +872,9 @@ export class IsomorphicClerk implements IsomorphicLoadedClerk {
     }
   };
 
-  __internal_closeEnableOrganizations = () => {
+  __internal_closeEnableOrganizationsPrompt = () => {
     if (this.clerkjs && this.loaded) {
-      this.clerkjs.__internal_closeEnableOrganizations();
+      this.clerkjs.__internal_closeEnableOrganizationsPrompt();
     }
   };
 
diff --git a/packages/shared/src/organization.ts b/packages/shared/src/organization.ts
index 2e81fe80619..db28e8f98b4 100644
--- a/packages/shared/src/organization.ts
+++ b/packages/shared/src/organization.ts
@@ -33,7 +33,7 @@ export const withOrganizationSettingsEnabled =
     // @ts-expect-error - __unstable__environment is not typed
     const environment = clerk?.__unstable__environment;
 
-    if (!environment?.organizationSettings.enabled) {
+    if (environment?.isDevelopment?.() && !environment?.organizationSettings.enabled) {
       clerk?.__internal_openEnableOrganizationsPrompt({
         utilityName,
       });
diff --git a/packages/shared/src/types/clerk.ts b/packages/shared/src/types/clerk.ts
index 59af9367c28..bc458306942 100644
--- a/packages/shared/src/types/clerk.ts
+++ b/packages/shared/src/types/clerk.ts
@@ -328,7 +328,7 @@ export interface Clerk {
   /**
    * Closes the Clerk Enable Organizations modal.
    */
-  __internal_closeEnableOrganizations: () => void;
+  __internal_closeEnableOrganizationsPrompt: () => void;
 
   /**
    * Opens the Google One Tap component.
diff --git a/packages/shared/src/types/devtools.ts b/packages/shared/src/types/devtools.ts
new file mode 100644
index 00000000000..e699bd7010e
--- /dev/null
+++ b/packages/shared/src/types/devtools.ts
@@ -0,0 +1,12 @@
+import type { ClerkResource } from './resource';
+
+export type EnableEnvironmentSettingParams = {
+  enable_organizations: boolean;
+};
+
+/**
+ * @internal
+ */
+export interface DevToolsResource extends ClerkResource {
+  __internal_enableEnvironmentSetting: (params: EnableEnvironmentSettingParams) => Promise<void>;
+}
diff --git a/packages/shared/src/types/index.ts b/packages/shared/src/types/index.ts
index 833538f382b..57123038f78 100644
--- a/packages/shared/src/types/index.ts
+++ b/packages/shared/src/types/index.ts
@@ -12,6 +12,7 @@ export type * from './commerceSettings';
 export type * from './customMenuItems';
 export type * from './customPages';
 export type * from './deletedObject';
+export type * from './devtools';
 export type * from './displayConfig';
 export type * from './elementIds';
 export type * from './emailAddress';

From 95ff6c0d3cc6b41a736b6b8c1d02bbc72ae0542d Mon Sep 17 00:00:00 2001
From: Laura Beatris <48022589+LauraBeatris@users.noreply.github.com>
Date: Tue, 11 Nov 2025 16:33:37 -0300
Subject: [PATCH 09/30] Mount components once mutation is resolved

---
 packages/clerk-js/src/core/clerk.ts           | 25 ++++++++++++++++++-
 .../EnableOrganizationsPrompt/index.tsx       |  5 ++--
 packages/shared/src/types/clerk.ts            |  7 ++++--
 3 files changed, 32 insertions(+), 5 deletions(-)

diff --git a/packages/clerk-js/src/core/clerk.ts b/packages/clerk-js/src/core/clerk.ts
index 9b1f0526d63..d915c9ddd7c 100644
--- a/packages/clerk-js/src/core/clerk.ts
+++ b/packages/clerk-js/src/core/clerk.ts
@@ -36,9 +36,9 @@ import type {
   AuthenticateWithMetamaskParams,
   AuthenticateWithOKXWalletParams,
   BillingNamespace,
-  Clerk as ClerkInterface,
   ClerkAPIError,
   ClerkAuthenticateWithWeb3Params,
+  Clerk as ClerkInterface,
   ClerkOptions,
   ClientJSONSnapshot,
   ClientResource,
@@ -832,6 +832,9 @@ export class Clerk implements ClerkInterface {
       if (this.#instanceType === 'development') {
         this.__internal_openEnableOrganizationsPrompt({
           componentName: 'OrganizationProfile',
+          onComplete: () => {
+            this.openOrganizationProfile();
+          },
         });
       }
       return;
@@ -862,6 +865,9 @@ export class Clerk implements ClerkInterface {
       if (this.#instanceType === 'development') {
         this.__internal_openEnableOrganizationsPrompt({
           componentName: 'OrganizationSwitcher',
+          onComplete: () => {
+            this.openCreateOrganization();
+          },
         });
       }
       return;
@@ -1004,6 +1010,9 @@ export class Clerk implements ClerkInterface {
       if (this.#instanceType === 'development') {
         this.__internal_openEnableOrganizationsPrompt({
           componentName: 'OrganizationProfile',
+          onComplete: () => {
+            this.mountOrganizationProfile(node, props);
+          },
         });
       }
       return;
@@ -1044,6 +1053,9 @@ export class Clerk implements ClerkInterface {
       if (this.#instanceType === 'development') {
         this.__internal_openEnableOrganizationsPrompt({
           componentName: 'OrganizationSwitcher',
+          onComplete: () => {
+            this.mountCreateOrganization();
+          },
         });
       }
       return;
@@ -1075,6 +1087,9 @@ export class Clerk implements ClerkInterface {
       if (this.#instanceType === 'development') {
         this.__internal_openEnableOrganizationsPrompt({
           componentName: 'OrganizationSwitcher',
+          onComplete: () => {
+            this.mountOrganizationSwitcher(node, props);
+          },
         });
       }
       return;
@@ -1111,9 +1126,14 @@ export class Clerk implements ClerkInterface {
   public mountOrganizationList = (node: HTMLDivElement, props?: OrganizationListProps) => {
     this.assertComponentsReady(this.#componentControls);
     if (disabledOrganizationsFeature(this, this.environment)) {
+      debugger;
       if (this.#instanceType === 'development') {
         this.__internal_openEnableOrganizationsPrompt({
           componentName: 'OrganizationList',
+          onComplete: () => {
+            debugger;
+            this.mountOrganizationList(node, props);
+          },
         });
       }
       return;
@@ -1310,6 +1330,9 @@ export class Clerk implements ClerkInterface {
       if (this.#instanceType === 'development') {
         this.__internal_openEnableOrganizationsPrompt({
           componentName: 'OrganizationSwitcher',
+          onComplete: () => {
+            this.mountTaskChooseOrganization(node, props);
+          },
         });
       }
       return;
diff --git a/packages/clerk-js/src/ui/components/devPrompts/EnableOrganizationsPrompt/index.tsx b/packages/clerk-js/src/ui/components/devPrompts/EnableOrganizationsPrompt/index.tsx
index 29d4abedc93..8719d4ec2a9 100644
--- a/packages/clerk-js/src/ui/components/devPrompts/EnableOrganizationsPrompt/index.tsx
+++ b/packages/clerk-js/src/ui/components/devPrompts/EnableOrganizationsPrompt/index.tsx
@@ -24,12 +24,13 @@ const EnableOrganizationsPromptInternal = (props: __internal_EnableOrganizations
       .__internal_enableEnvironmentSetting({
         enable_organizations: true,
       })
-      .then(() => {
+      .then(async () => {
         // Re-fetch environment to get updated settings
         // @ts-expect-error - __unstable__environment is not typed
         const environment = clerk?.__unstable__environment;
-        environment.fetch?.();
+        await environment.fetch?.();
         clerk?.__internal_closeEnableOrganizationsPrompt?.();
+        props.onComplete?.();
       })
       .finally(() => {
         setIsLoading(false);
diff --git a/packages/shared/src/types/clerk.ts b/packages/shared/src/types/clerk.ts
index bc458306942..50460d54e38 100644
--- a/packages/shared/src/types/clerk.ts
+++ b/packages/shared/src/types/clerk.ts
@@ -1439,13 +1439,16 @@ export type __internal_UserVerificationProps = RoutingOptions & {
 
 export type __internal_UserVerificationModalProps = WithoutRouting<__internal_UserVerificationProps>;
 
-export type __internal_EnableOrganizationsPromptProps =
+export type __internal_EnableOrganizationsPromptProps = {
+  onComplete?: () => void;
+} & (
   | {
       componentName: 'OrganizationSwitcher' | 'OrganizationProfile' | 'OrganizationList';
     }
   | {
       utilityName: 'useOrganizationList' | 'useOrganization';
-    };
+    }
+);
 
 type GoogleOneTapRedirectUrlProps = SignInForceRedirectUrl & SignUpForceRedirectUrl;
 

From 70308b2e6a524eb79c27c54d5b9b04db4cc27ab6 Mon Sep 17 00:00:00 2001
From: Laura Beatris <48022589+LauraBeatris@users.noreply.github.com>
Date: Wed, 12 Nov 2025 11:07:13 -0300
Subject: [PATCH 10/30] Introduce draft for enabled prompt state

---
 packages/clerk-js/src/core/clerk.ts           |   2 -
 .../core/resources/OrganizationSettings.ts    |   4 +
 .../EnableOrganizationsPrompt/index.tsx       | 340 +++++++++++-------
 .../devPrompts/KeylessPrompt/index.tsx        |  26 +-
 .../src/ui/components/devPrompts/shared.tsx   |  28 ++
 5 files changed, 246 insertions(+), 154 deletions(-)

diff --git a/packages/clerk-js/src/core/clerk.ts b/packages/clerk-js/src/core/clerk.ts
index d915c9ddd7c..d8c3d4d1c28 100644
--- a/packages/clerk-js/src/core/clerk.ts
+++ b/packages/clerk-js/src/core/clerk.ts
@@ -1126,12 +1126,10 @@ export class Clerk implements ClerkInterface {
   public mountOrganizationList = (node: HTMLDivElement, props?: OrganizationListProps) => {
     this.assertComponentsReady(this.#componentControls);
     if (disabledOrganizationsFeature(this, this.environment)) {
-      debugger;
       if (this.#instanceType === 'development') {
         this.__internal_openEnableOrganizationsPrompt({
           componentName: 'OrganizationList',
           onComplete: () => {
-            debugger;
             this.mountOrganizationList(node, props);
           },
         });
diff --git a/packages/clerk-js/src/core/resources/OrganizationSettings.ts b/packages/clerk-js/src/core/resources/OrganizationSettings.ts
index 8960b347d62..08c4cad9ba6 100644
--- a/packages/clerk-js/src/core/resources/OrganizationSettings.ts
+++ b/packages/clerk-js/src/core/resources/OrganizationSettings.ts
@@ -75,4 +75,8 @@ export class OrganizationSettings extends BaseResource implements OrganizationSe
       max_allowed_memberships: this.maxAllowedMemberships,
     } as unknown as OrganizationSettingsJSONSnapshot;
   }
+
+  public __internal_enableInMemory() {
+    this.enabled = true;
+  }
 }
diff --git a/packages/clerk-js/src/ui/components/devPrompts/EnableOrganizationsPrompt/index.tsx b/packages/clerk-js/src/ui/components/devPrompts/EnableOrganizationsPrompt/index.tsx
index 8719d4ec2a9..aad95df3444 100644
--- a/packages/clerk-js/src/ui/components/devPrompts/EnableOrganizationsPrompt/index.tsx
+++ b/packages/clerk-js/src/ui/components/devPrompts/EnableOrganizationsPrompt/index.tsx
@@ -10,13 +10,16 @@ import { InternalThemeProvider } from '@/ui/styledSystem';
 import { DevTools } from '../../../../core/resources/DevTools';
 import { Flex } from '../../../customizables';
 import { Portal } from '../../../elements/Portal';
-import { basePromptElementStyles, PromptContainer } from '../shared';
+import { basePromptElementStyles, PromptContainer, PromptSuccessIcon } from '../shared';
 
 const EnableOrganizationsPromptInternal = (props: __internal_EnableOrganizationsPromptProps) => {
   const ctaText = 'componentName' in props ? `<${props.componentName} />` : props.utilityName;
   const clerk = useClerk();
   const [isLoading, setIsLoading] = useState(false);
 
+  // @ts-expect-error - __unstable__environment is not typed
+  const environment = clerk?.__unstable__environment as EnvironmentResource;
+
   const handleEnableOrganizations = () => {
     setIsLoading(true);
 
@@ -24,12 +27,11 @@ const EnableOrganizationsPromptInternal = (props: __internal_EnableOrganizations
       .__internal_enableEnvironmentSetting({
         enable_organizations: true,
       })
-      .then(async () => {
-        // Re-fetch environment to get updated settings
-        // @ts-expect-error - __unstable__environment is not typed
-        const environment = clerk?.__unstable__environment;
-        await environment.fetch?.();
-        clerk?.__internal_closeEnableOrganizationsPrompt?.();
+      .then(() => {
+        // The above mutation doesn't return an environment due to API caching, so we need to enable it in memory
+        // as a persistent state
+        // By the time the user refreshes the page, the environment will be updated and the prompt will not be shown again
+        environment.organizationSettings.__internal_enableInMemory();
         props.onComplete?.();
       })
       .finally(() => {
@@ -37,6 +39,8 @@ const EnableOrganizationsPromptInternal = (props: __internal_EnableOrganizations
       });
   };
 
+  const isEnabled = !!environment?.organizationSettings.enabled;
+
   return (
     <Portal>
       <Modal
@@ -64,39 +68,43 @@ const EnableOrganizationsPromptInternal = (props: __internal_EnableOrganizations
                 gap: t.sizes.$2,
               })}
             >
-              <svg
-                css={css`
-                  width: 1.25rem;
-                  height: 1.25rem;
-                `}
-                viewBox='0 0 20 20'
-                fill='none'
-                xmlns='http://www.w3.org/2000/svg'
-              >
-                <path
-                  opacity='0.2'
-                  d='M17.25 10C17.25 14.0041 14.0041 17.25 10 17.25C5.99594 17.25 2.75 14.0041 2.75 10C2.75 5.99594 5.99594 2.75 10 2.75C14.0041 2.75 17.25 5.99594 17.25 10Z'
-                  fill='#EAB308'
-                />
-                <path
-                  fillRule='evenodd'
-                  clipRule='evenodd'
-                  d='M10 3.5C6.41015 3.5 3.5 6.41015 3.5 10C3.5 13.5899 6.41015 16.5 10 16.5C13.5899 16.5 16.5 13.5899 16.5 10C16.5 6.41015 13.5899 3.5 10 3.5ZM2 10C2 5.58172 5.58172 2 10 2C14.4183 2 18 5.58172 18 10C18 14.4183 14.4183 18 10 18C5.58172 18 2 14.4183 2 10Z'
-                  fill='#EAB308'
-                />
-                <path
-                  fillRule='evenodd'
-                  clipRule='evenodd'
-                  d='M10 6C10.5523 6 11 6.44772 11 7V9C11 9.55228 10.5523 10 10 10C9.44772 10 9 9.55228 9 9V7C9 6.44772 9.44772 6 10 6Z'
-                  fill='#EAB308'
-                />
-                <path
-                  fillRule='evenodd'
-                  clipRule='evenodd'
-                  d='M10 12C10.5523 12 11 12.4477 11 13V13.01C11 13.5623 10.5523 14.01 10 14.01C9.44772 14.01 9 13.5623 9 13.01V13C9 12.4477 9.44772 12 10 12Z'
-                  fill='#EAB308'
-                />
-              </svg>
+              {isEnabled ? (
+                <PromptSuccessIcon />
+              ) : (
+                <svg
+                  css={css`
+                    width: 1.25rem;
+                    height: 1.25rem;
+                  `}
+                  viewBox='0 0 20 20'
+                  fill='none'
+                  xmlns='http://www.w3.org/2000/svg'
+                >
+                  <path
+                    opacity='0.2'
+                    d='M17.25 10C17.25 14.0041 14.0041 17.25 10 17.25C5.99594 17.25 2.75 14.0041 2.75 10C2.75 5.99594 5.99594 2.75 10 2.75C14.0041 2.75 17.25 5.99594 17.25 10Z'
+                    fill='#EAB308'
+                  />
+                  <path
+                    fillRule='evenodd'
+                    clipRule='evenodd'
+                    d='M10 3.5C6.41015 3.5 3.5 6.41015 3.5 10C3.5 13.5899 6.41015 16.5 10 16.5C13.5899 16.5 16.5 13.5899 16.5 10C16.5 6.41015 13.5899 3.5 10 3.5ZM2 10C2 5.58172 5.58172 2 10 2C14.4183 2 18 5.58172 18 10C18 14.4183 14.4183 18 10 18C5.58172 18 2 14.4183 2 10Z'
+                    fill='#EAB308'
+                  />
+                  <path
+                    fillRule='evenodd'
+                    clipRule='evenodd'
+                    d='M10 6C10.5523 6 11 6.44772 11 7V9C11 9.55228 10.5523 10 10 10C9.44772 10 9 9.55228 9 9V7C9 6.44772 9.44772 6 10 6Z'
+                    fill='#EAB308'
+                  />
+                  <path
+                    fillRule='evenodd'
+                    clipRule='evenodd'
+                    d='M10 12C10.5523 12 11 12.4477 11 13V13.01C11 13.5623 10.5523 14.01 10 14.01C9.44772 14.01 9 13.5623 9 13.01V13C9 12.4477 9.44772 12 10 12Z'
+                    fill='#EAB308'
+                  />
+                </svg>
+              )}
 
               <h1
                 css={[
@@ -108,7 +116,7 @@ const EnableOrganizationsPromptInternal = (props: __internal_EnableOrganizations
                   `,
                 ]}
               >
-                Organizations feature required
+                {isEnabled ? 'Organizations feature enabled' : 'Organizations feature required'}
               </h1>
             </Flex>
 
@@ -119,52 +127,90 @@ const EnableOrganizationsPromptInternal = (props: __internal_EnableOrganizations
                 maxWidth: '18.75rem',
               })}
             >
-              <span
-                css={[
-                  basePromptElementStyles,
-                  css`
-                    color: #b4b4b4;
-                    font-size: 0.8125rem;
-                    font-weight: 400;
-                    line-height: 1.23;
-                  `,
-                ]}
-              >
-                To use the{' '}
-                <code
+              {isEnabled ? (
+                <span
                   css={[
                     basePromptElementStyles,
                     css`
-                      color: white;
-                      font-family: monospace;
+                      color: #b4b4b4;
+                      font-size: 0.8125rem;
+                      font-weight: 400;
                       line-height: 1.23;
                     `,
                   ]}
                 >
-                  {ctaText}
-                </code>{' '}
-                {'componentName' in props ? 'component' : 'hook'}, you&apos;ll need to enable the Organizations feature
-                for your app first.
-              </span>
+                  The Organizations feature has been enabled for your application. You can manage or rename it in your{' '}
+                  <a
+                    css={[
+                      basePromptElementStyles,
+                      css`
+                        color: #a8a8ff;
+                        font-size: inherit;
+                        font-weight: 500;
+                        line-height: 1.5;
+                        font-size: 0.8125rem;
+                      `,
+                    ]}
+                    /* TODO - Generate URL to Dashboard */
+                    href='https://clerk.com/docs/guides/organizations'
+                    target='_blank'
+                    rel='noopener noreferrer'
+                    tabIndex={-1}
+                  >
+                    dashboard
+                  </a>
+                  .
+                </span>
+              ) : (
+                <>
+                  <span
+                    css={[
+                      basePromptElementStyles,
+                      css`
+                        color: #b4b4b4;
+                        font-size: 0.8125rem;
+                        font-weight: 400;
+                        line-height: 1.23;
+                      `,
+                    ]}
+                  >
+                    To use the{' '}
+                    <code
+                      css={[
+                        basePromptElementStyles,
+                        css`
+                          color: white;
+                          font-family: monospace;
+                          line-height: 1.23;
+                        `,
+                      ]}
+                    >
+                      {ctaText}
+                    </code>{' '}
+                    {'componentName' in props ? 'component' : 'hook'}, you&apos;ll need to enable the Organizations
+                    feature for your app first.
+                  </span>
 
-              <a
-                css={[
-                  basePromptElementStyles,
-                  css`
-                    color: #a8a8ff;
-                    font-size: inherit;
-                    font-weight: 500;
-                    line-height: 1.5;
-                    font-size: 0.8125rem;
-                  `,
-                ]}
-                href='https://clerk.com/docs/guides/organizations'
-                target='_blank'
-                rel='noopener noreferrer'
-                tabIndex={-1}
-              >
-                Learn more about this add-on.
-              </a>
+                  <a
+                    css={[
+                      basePromptElementStyles,
+                      css`
+                        color: #a8a8ff;
+                        font-size: inherit;
+                        font-weight: 500;
+                        line-height: 1.5;
+                        font-size: 0.8125rem;
+                      `,
+                    ]}
+                    href='https://clerk.com/docs/guides/organizations'
+                    target='_blank'
+                    rel='noopener noreferrer'
+                    tabIndex={-1}
+                  >
+                    Learn more about this add-on.
+                  </a>
+                </>
+              )}
             </Flex>
           </Flex>
 
@@ -185,61 +231,99 @@ const EnableOrganizationsPromptInternal = (props: __internal_EnableOrganizations
               gap: t.sizes.$3,
             })}
           >
-            <button
-              type='button'
-              onClick={handleEnableOrganizations}
-              disabled={isLoading}
-              css={css`
-                ${mainCTAStyles};
-                min-width: 100%;
-                color: white;
-                background: linear-gradient(180deg, rgba(0, 0, 0, 0) 30.5%, rgba(0, 0, 0, 0.05) 100%), #454545;
-                box-shadow:
-                  0px 0px 0px 1px rgba(255, 255, 255, 0.04) inset,
-                  0px 1px 0px 0px rgba(255, 255, 255, 0.04) inset,
-                  0px 0px 0px 1px rgba(0, 0, 0, 0.12),
-                  0px 1.5px 2px 0px rgba(0, 0, 0, 0.48),
-                  0px 0px 4px 0px rgba(243, 107, 22, 0) inset;
-
-                &:hover:not(:disabled) {
+            {isEnabled ? (
+              <button
+                type='button'
+                onClick={() => clerk?.__internal_closeEnableOrganizationsPrompt?.()}
+                css={css`
+                  ${mainCTAStyles};
+                  min-width: 100%;
+                  color: white;
+                  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 30.5%, rgba(0, 0, 0, 0.05) 100%), #454545;
                   box-shadow:
-                    0px 0px 6px 0px rgba(255, 255, 255, 0.04) inset,
                     0px 0px 0px 1px rgba(255, 255, 255, 0.04) inset,
                     0px 1px 0px 0px rgba(255, 255, 255, 0.04) inset,
-                    0px 0px 0px 1px rgba(0, 0, 0, 0.1),
-                    0px 1.5px 2px 0px rgba(0, 0, 0, 0.48);
-                }
+                    0px 0px 0px 1px rgba(0, 0, 0, 0.12),
+                    0px 1.5px 2px 0px rgba(0, 0, 0, 0.48),
+                    0px 0px 4px 0px rgba(243, 107, 22, 0) inset;
 
-                &:disabled {
-                  opacity: 0.6;
-                  cursor: not-allowed;
-                }
-              `}
-            >
-              Enable Organizations
-            </button>
+                  &:hover:not(:disabled) {
+                    box-shadow:
+                      0px 0px 6px 0px rgba(255, 255, 255, 0.04) inset,
+                      0px 0px 0px 1px rgba(255, 255, 255, 0.04) inset,
+                      0px 1px 0px 0px rgba(255, 255, 255, 0.04) inset,
+                      0px 0px 0px 1px rgba(0, 0, 0, 0.1),
+                      0px 1.5px 2px 0px rgba(0, 0, 0, 0.48);
+                  }
 
-            <button
-              type='button'
-              css={css`
-                ${mainCTAStyles};
-                min-width: 100%;
-                color: white;
-                background: rgba(69, 69, 69, 0.1);
-                border: 1px solid rgba(118, 118, 132, 0.25);
+                  &:disabled {
+                    opacity: 0.6;
+                    cursor: not-allowed;
+                  }
+                `}
+              >
+                Continue
+              </button>
+            ) : (
+              <>
+                <button
+                  type='button'
+                  onClick={handleEnableOrganizations}
+                  disabled={isLoading}
+                  css={css`
+                    ${mainCTAStyles};
+                    min-width: 100%;
+                    color: white;
+                    background: linear-gradient(180deg, rgba(0, 0, 0, 0) 30.5%, rgba(0, 0, 0, 0.05) 100%), #454545;
+                    box-shadow:
+                      0px 0px 0px 1px rgba(255, 255, 255, 0.04) inset,
+                      0px 1px 0px 0px rgba(255, 255, 255, 0.04) inset,
+                      0px 0px 0px 1px rgba(0, 0, 0, 0.12),
+                      0px 1.5px 2px 0px rgba(0, 0, 0, 0.48),
+                      0px 0px 4px 0px rgba(243, 107, 22, 0) inset;
 
-                &:hover {
-                  box-shadow:
-                    0px 0px 6px 0px rgba(255, 255, 255, 0.04) inset,
-                    0px 0px 0px 1px rgba(255, 255, 255, 0.04) inset,
-                    0px 1px 0px 0px rgba(255, 255, 255, 0.04) inset,
-                    0px 0px 0px 1px rgba(0, 0, 0, 0.1),
-                    0px 1.5px 2px 0px rgba(0, 0, 0, 0.48);
-                }
-              `}
-            >
-              I&apos;ll remove it myself
-            </button>
+                    &:hover:not(:disabled) {
+                      box-shadow:
+                        0px 0px 6px 0px rgba(255, 255, 255, 0.04) inset,
+                        0px 0px 0px 1px rgba(255, 255, 255, 0.04) inset,
+                        0px 1px 0px 0px rgba(255, 255, 255, 0.04) inset,
+                        0px 0px 0px 1px rgba(0, 0, 0, 0.1),
+                        0px 1.5px 2px 0px rgba(0, 0, 0, 0.48);
+                    }
+
+                    &:disabled {
+                      opacity: 0.6;
+                      cursor: not-allowed;
+                    }
+                  `}
+                >
+                  Enable Organizations
+                </button>
+
+                <button
+                  type='button'
+                  onClick={() => clerk?.__internal_closeEnableOrganizationsPrompt?.()}
+                  css={css`
+                    ${mainCTAStyles};
+                    min-width: 100%;
+                    color: white;
+                    background: rgba(69, 69, 69, 0.1);
+                    border: 1px solid rgba(118, 118, 132, 0.25);
+
+                    &:hover {
+                      box-shadow:
+                        0px 0px 6px 0px rgba(255, 255, 255, 0.04) inset,
+                        0px 0px 0px 1px rgba(255, 255, 255, 0.04) inset,
+                        0px 1px 0px 0px rgba(255, 255, 255, 0.04) inset,
+                        0px 0px 0px 1px rgba(0, 0, 0, 0.1),
+                        0px 1.5px 2px 0px rgba(0, 0, 0, 0.48);
+                    }
+                  `}
+                >
+                  I&apos;ll remove it myself
+                </button>
+              </>
+            )}
           </Flex>
         </PromptContainer>
       </Modal>
diff --git a/packages/clerk-js/src/ui/components/devPrompts/KeylessPrompt/index.tsx b/packages/clerk-js/src/ui/components/devPrompts/KeylessPrompt/index.tsx
index 3d24d08765e..04eee749bd9 100644
--- a/packages/clerk-js/src/ui/components/devPrompts/KeylessPrompt/index.tsx
+++ b/packages/clerk-js/src/ui/components/devPrompts/KeylessPrompt/index.tsx
@@ -8,7 +8,7 @@ import { createPortal } from 'react-dom';
 import { Flex, Link } from '../../../customizables';
 import { Portal } from '../../../elements/Portal';
 import { InternalThemeProvider } from '../../../styledSystem';
-import { basePromptElementStyles, PromptContainer } from '../shared';
+import { basePromptElementStyles, PromptContainer, PromptSuccessIcon } from '../shared';
 import { ClerkLogoIcon } from './ClerkLogoIcon';
 import { KeySlashIcon } from './KeySlashIcon';
 import { useRevalidateEnvironment } from './use-revalidate-environment';
@@ -178,29 +178,7 @@ const KeylessPromptInternal = (_props: KeylessPromptProps) => {
             })}
           >
             {success ? (
-              <svg
-                width='1rem'
-                height='1rem'
-                viewBox='0 0 16 17'
-                fill='none'
-                aria-hidden
-                xmlns='http://www.w3.org/2000/svg'
-              >
-                <g opacity='0.88'>
-                  <path
-                    d='M13.8002 8.20039C13.8002 8.96206 13.6502 9.71627 13.3587 10.42C13.0672 11.1236 12.64 11.763 12.1014 12.3016C11.5628 12.8402 10.9234 13.2674 10.2198 13.5589C9.51607 13.8504 8.76186 14.0004 8.0002 14.0004C7.23853 14.0004 6.48432 13.8504 5.78063 13.5589C5.07694 13.2674 4.43756 12.8402 3.89898 12.3016C3.3604 11.763 2.93317 11.1236 2.64169 10.42C2.35022 9.71627 2.2002 8.96206 2.2002 8.20039C2.2002 6.66214 2.81126 5.18688 3.89898 4.09917C4.98669 3.01146 6.46194 2.40039 8.0002 2.40039C9.53845 2.40039 11.0137 3.01146 12.1014 4.09917C13.1891 5.18688 13.8002 6.66214 13.8002 8.20039Z'
-                    fill='#22C543'
-                    fillOpacity='0.16'
-                  />
-                  <path
-                    d='M6.06686 8.68372L7.51686 10.1337L9.93353 6.75039M13.8002 8.20039C13.8002 8.96206 13.6502 9.71627 13.3587 10.42C13.0672 11.1236 12.64 11.763 12.1014 12.3016C11.5628 12.8402 10.9234 13.2674 10.2198 13.5589C9.51607 13.8504 8.76186 14.0004 8.0002 14.0004C7.23853 14.0004 6.48432 13.8504 5.78063 13.5589C5.07694 13.2674 4.43756 12.8402 3.89898 12.3016C3.3604 11.763 2.93317 11.1236 2.64169 10.42C2.35022 9.71627 2.2002 8.96206 2.2002 8.20039C2.2002 6.66214 2.81126 5.18688 3.89898 4.09917C4.98669 3.01146 6.46194 2.40039 8.0002 2.40039C9.53845 2.40039 11.0137 3.01146 12.1014 4.09917C13.1891 5.18688 13.8002 6.66214 13.8002 8.20039Z'
-                    stroke='#22C543'
-                    strokeWidth='1.2'
-                    strokeLinecap='round'
-                    strokeLinejoin='round'
-                  />
-                </g>
-              </svg>
+              <PromptSuccessIcon />
             ) : claimed ? (
               <svg
                 width='1rem'
diff --git a/packages/clerk-js/src/ui/components/devPrompts/shared.tsx b/packages/clerk-js/src/ui/components/devPrompts/shared.tsx
index 125ff89ebe6..6c25069288a 100644
--- a/packages/clerk-js/src/ui/components/devPrompts/shared.tsx
+++ b/packages/clerk-js/src/ui/components/devPrompts/shared.tsx
@@ -54,3 +54,31 @@ export const basePromptElementStyles = css`
     sans-serif;
   text-decoration: none;
 `;
+
+export function PromptSuccessIcon() {
+  return (
+    <svg
+      width='1rem'
+      height='1rem'
+      viewBox='0 0 16 17'
+      fill='none'
+      aria-hidden
+      xmlns='http://www.w3.org/2000/svg'
+    >
+      <g opacity='0.88'>
+        <path
+          d='M13.8002 8.20039C13.8002 8.96206 13.6502 9.71627 13.3587 10.42C13.0672 11.1236 12.64 11.763 12.1014 12.3016C11.5628 12.8402 10.9234 13.2674 10.2198 13.5589C9.51607 13.8504 8.76186 14.0004 8.0002 14.0004C7.23853 14.0004 6.48432 13.8504 5.78063 13.5589C5.07694 13.2674 4.43756 12.8402 3.89898 12.3016C3.3604 11.763 2.93317 11.1236 2.64169 10.42C2.35022 9.71627 2.2002 8.96206 2.2002 8.20039C2.2002 6.66214 2.81126 5.18688 3.89898 4.09917C4.98669 3.01146 6.46194 2.40039 8.0002 2.40039C9.53845 2.40039 11.0137 3.01146 12.1014 4.09917C13.1891 5.18688 13.8002 6.66214 13.8002 8.20039Z'
+          fill='#22C543'
+          fillOpacity='0.16'
+        />
+        <path
+          d='M6.06686 8.68372L7.51686 10.1337L9.93353 6.75039M13.8002 8.20039C13.8002 8.96206 13.6502 9.71627 13.3587 10.42C13.0672 11.1236 12.64 11.763 12.1014 12.3016C11.5628 12.8402 10.9234 13.2674 10.2198 13.5589C9.51607 13.8504 8.76186 14.0004 8.0002 14.0004C7.23853 14.0004 6.48432 13.8504 5.78063 13.5589C5.07694 13.2674 4.43756 12.8402 3.89898 12.3016C3.3604 11.763 2.93317 11.1236 2.64169 10.42C2.35022 9.71627 2.2002 8.96206 2.2002 8.20039C2.2002 6.66214 2.81126 5.18688 3.89898 4.09917C4.98669 3.01146 6.46194 2.40039 8.0002 2.40039C9.53845 2.40039 11.0137 3.01146 12.1014 4.09917C13.1891 5.18688 13.8002 6.66214 13.8002 8.20039Z'
+          stroke='#22C543'
+          strokeWidth='1.2'
+          strokeLinecap='round'
+          strokeLinejoin='round'
+        />
+      </g>
+    </svg>
+  );
+}

From 687e38721fbfda943a8fbbfaf34136ec9869a94d Mon Sep 17 00:00:00 2001
From: Laura Beatris <48022589+LauraBeatris@users.noreply.github.com>
Date: Wed, 12 Nov 2025 13:47:08 -0300
Subject: [PATCH 11/30] Extract button to generic component

---
 .../core/resources/OrganizationSettings.ts    |   4 +
 .../EnableOrganizationsPrompt/index.tsx       | 167 ++++++++++--------
 2 files changed, 94 insertions(+), 77 deletions(-)

diff --git a/packages/clerk-js/src/core/resources/OrganizationSettings.ts b/packages/clerk-js/src/core/resources/OrganizationSettings.ts
index 08c4cad9ba6..38deff7c404 100644
--- a/packages/clerk-js/src/core/resources/OrganizationSettings.ts
+++ b/packages/clerk-js/src/core/resources/OrganizationSettings.ts
@@ -76,6 +76,10 @@ export class OrganizationSettings extends BaseResource implements OrganizationSe
     } as unknown as OrganizationSettingsJSONSnapshot;
   }
 
+  /**
+   * Used to enable the Organizations feature in memory after it has been enabled in the backend
+   * from the devtools resource, since it cannot return the updated environment due to API caching
+   */
   public __internal_enableInMemory() {
     this.enabled = true;
   }
diff --git a/packages/clerk-js/src/ui/components/devPrompts/EnableOrganizationsPrompt/index.tsx b/packages/clerk-js/src/ui/components/devPrompts/EnableOrganizationsPrompt/index.tsx
index aad95df3444..d12fbdd723d 100644
--- a/packages/clerk-js/src/ui/components/devPrompts/EnableOrganizationsPrompt/index.tsx
+++ b/packages/clerk-js/src/ui/components/devPrompts/EnableOrganizationsPrompt/index.tsx
@@ -232,96 +232,28 @@ const EnableOrganizationsPromptInternal = (props: __internal_EnableOrganizations
             })}
           >
             {isEnabled ? (
-              <button
-                type='button'
+              <PromptButton
+                variant='outline'
                 onClick={() => clerk?.__internal_closeEnableOrganizationsPrompt?.()}
-                css={css`
-                  ${mainCTAStyles};
-                  min-width: 100%;
-                  color: white;
-                  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 30.5%, rgba(0, 0, 0, 0.05) 100%), #454545;
-                  box-shadow:
-                    0px 0px 0px 1px rgba(255, 255, 255, 0.04) inset,
-                    0px 1px 0px 0px rgba(255, 255, 255, 0.04) inset,
-                    0px 0px 0px 1px rgba(0, 0, 0, 0.12),
-                    0px 1.5px 2px 0px rgba(0, 0, 0, 0.48),
-                    0px 0px 4px 0px rgba(243, 107, 22, 0) inset;
-
-                  &:hover:not(:disabled) {
-                    box-shadow:
-                      0px 0px 6px 0px rgba(255, 255, 255, 0.04) inset,
-                      0px 0px 0px 1px rgba(255, 255, 255, 0.04) inset,
-                      0px 1px 0px 0px rgba(255, 255, 255, 0.04) inset,
-                      0px 0px 0px 1px rgba(0, 0, 0, 0.1),
-                      0px 1.5px 2px 0px rgba(0, 0, 0, 0.48);
-                  }
-
-                  &:disabled {
-                    opacity: 0.6;
-                    cursor: not-allowed;
-                  }
-                `}
               >
                 Continue
-              </button>
+              </PromptButton>
             ) : (
               <>
-                <button
-                  type='button'
+                <PromptButton
+                  variant='solid'
                   onClick={handleEnableOrganizations}
                   disabled={isLoading}
-                  css={css`
-                    ${mainCTAStyles};
-                    min-width: 100%;
-                    color: white;
-                    background: linear-gradient(180deg, rgba(0, 0, 0, 0) 30.5%, rgba(0, 0, 0, 0.05) 100%), #454545;
-                    box-shadow:
-                      0px 0px 0px 1px rgba(255, 255, 255, 0.04) inset,
-                      0px 1px 0px 0px rgba(255, 255, 255, 0.04) inset,
-                      0px 0px 0px 1px rgba(0, 0, 0, 0.12),
-                      0px 1.5px 2px 0px rgba(0, 0, 0, 0.48),
-                      0px 0px 4px 0px rgba(243, 107, 22, 0) inset;
-
-                    &:hover:not(:disabled) {
-                      box-shadow:
-                        0px 0px 6px 0px rgba(255, 255, 255, 0.04) inset,
-                        0px 0px 0px 1px rgba(255, 255, 255, 0.04) inset,
-                        0px 1px 0px 0px rgba(255, 255, 255, 0.04) inset,
-                        0px 0px 0px 1px rgba(0, 0, 0, 0.1),
-                        0px 1.5px 2px 0px rgba(0, 0, 0, 0.48);
-                    }
-
-                    &:disabled {
-                      opacity: 0.6;
-                      cursor: not-allowed;
-                    }
-                  `}
                 >
                   Enable Organizations
-                </button>
+                </PromptButton>
 
-                <button
-                  type='button'
+                <PromptButton
+                  variant='outline'
                   onClick={() => clerk?.__internal_closeEnableOrganizationsPrompt?.()}
-                  css={css`
-                    ${mainCTAStyles};
-                    min-width: 100%;
-                    color: white;
-                    background: rgba(69, 69, 69, 0.1);
-                    border: 1px solid rgba(118, 118, 132, 0.25);
-
-                    &:hover {
-                      box-shadow:
-                        0px 0px 6px 0px rgba(255, 255, 255, 0.04) inset,
-                        0px 0px 0px 1px rgba(255, 255, 255, 0.04) inset,
-                        0px 1px 0px 0px rgba(255, 255, 255, 0.04) inset,
-                        0px 0px 0px 1px rgba(0, 0, 0, 0.1),
-                        0px 1.5px 2px 0px rgba(0, 0, 0, 0.48);
-                    }
-                  `}
                 >
                   I&apos;ll remove it myself
-                </button>
+                </PromptButton>
               </>
             )}
           </Flex>
@@ -361,4 +293,85 @@ const mainCTAStyles = css`
   text-shadow: 0px 1px 2px rgba(0, 0, 0, 0.32);
   white-space: nowrap;
   user-select: none;
+  min-width: 100%;
+  color: white;
+  transition:
+    background 150ms cubic-bezier(0.2, 0.61, 0.1, 1),
+    box-shadow 150ms cubic-bezier(0.2, 0.61, 0.1, 1),
+    border-color 150ms cubic-bezier(0.2, 0.61, 0.1, 1);
+
+  &:disabled {
+    opacity: 0.6;
+    cursor: not-allowed;
+  }
 `;
+
+type PromptButtonVariant = 'solid' | 'outline';
+
+type PromptButtonProps = Pick<React.ComponentProps<'button'>, 'onClick' | 'children' | 'disabled'> & {
+  variant?: PromptButtonVariant;
+};
+
+const PromptButton = ({ variant = 'solid', ...props }: PromptButtonProps) => {
+  const solidStyles = css`
+    background: linear-gradient(180deg, rgba(0, 0, 0, 0) 30.5%, rgba(0, 0, 0, 0.05) 100%), #454545;
+    box-shadow:
+      0px 0px 0px 1px rgba(255, 255, 255, 0.04) inset,
+      0px 1px 0px 0px rgba(255, 255, 255, 0.04) inset,
+      0px 0px 0px 1px rgba(0, 0, 0, 0.12),
+      0px 1.5px 2px 0px rgba(0, 0, 0, 0.48),
+      0px 0px 4px 0px rgba(243, 107, 22, 0) inset;
+
+    &:hover:not(:disabled) {
+      background: linear-gradient(180deg, rgba(0, 0, 0, 0) 30.5%, rgba(0, 0, 0, 0.15) 100%), #5f5f5f;
+      box-shadow:
+        0 0 3px 0 rgba(253, 224, 71, 0) inset,
+        0 0 0 1px rgba(255, 255, 255, 0.04) inset,
+        0 1px 0 0 rgba(255, 255, 255, 0.04) inset,
+        0 0 0 1px rgba(0, 0, 0, 0.12),
+        0 1.5px 2px 0 rgba(0, 0, 0, 0.48);
+    }
+
+    &:focus:not(:disabled) {
+      background: linear-gradient(180deg, rgba(0, 0, 0, 0) 30.5%, rgba(0, 0, 0, 0.15) 100%), #5f5f5f;
+      box-shadow:
+        0 0 3px 0 rgba(253, 224, 71, 0) inset,
+        0 0 0 1px rgba(255, 255, 255, 0.04) inset,
+        0 1px 0 0 rgba(255, 255, 255, 0.04) inset,
+        0 0 0 1px rgba(0, 0, 0, 0.12),
+        0 1.5px 2px 0 rgba(0, 0, 0, 0.48);
+    }
+  `;
+
+  const outlineStyles = css`
+    background: rgba(69, 69, 69, 0.1);
+    border: 1px solid rgba(118, 118, 132, 0.25);
+
+    &:hover:not(:disabled) {
+      box-shadow:
+        0px 0px 6px 0px rgba(255, 255, 255, 0.04) inset,
+        0px 0px 0px 1px rgba(255, 255, 255, 0.04) inset,
+        0px 1px 0px 0px rgba(255, 255, 255, 0.04) inset,
+        0px 0px 0px 1px rgba(0, 0, 0, 0.1),
+        0px 1.5px 2px 0px rgba(0, 0, 0, 0.48);
+    }
+
+    &:focus:not(:disabled) {
+      box-shadow:
+        0px 0px 6px 0px rgba(255, 255, 255, 0.04) inset,
+        0px 0px 0px 1px rgba(255, 255, 255, 0.04) inset,
+        0px 1px 0px 0px rgba(255, 255, 255, 0.04) inset,
+        0px 0px 0px 1px rgba(0, 0, 0, 0.1),
+        0px 1.5px 2px 0px rgba(0, 0, 0, 0.48);
+      border-color: rgba(118, 118, 132, 0.4);
+    }
+  `;
+
+  return (
+    <button
+      type='button'
+      css={[mainCTAStyles, variant === 'solid' ? solidStyles : outlineStyles]}
+      {...props}
+    />
+  );
+};

From d22f039eb4220fd952786d6429f34dbf0ca33f32 Mon Sep 17 00:00:00 2001
From: Laura Beatris <48022589+LauraBeatris@users.noreply.github.com>
Date: Wed, 12 Nov 2025 16:04:25 -0300
Subject: [PATCH 12/30] Extract button to generic component

---
 packages/clerk-js/src/core/clerk.ts           | 219 +++++++++++++-----
 packages/clerk-js/src/core/warnings.ts        |  13 ++
 .../EnableOrganizationsPrompt/index.tsx       |  28 ++-
 packages/clerk-js/src/utils/sessionStorage.ts |  81 +++++++
 packages/shared/src/organization.ts           |  39 ++--
 .../src/react/hooks/useOrganization.tsx       |  12 +-
 .../src/react/hooks/useOrganizationList.tsx   |  12 +-
 packages/shared/src/types/clerk.ts            |  41 +++-
 .../vue/src/composables/useOrganization.ts    |  30 ++-
 9 files changed, 342 insertions(+), 133 deletions(-)
 create mode 100644 packages/clerk-js/src/utils/sessionStorage.ts

diff --git a/packages/clerk-js/src/core/clerk.ts b/packages/clerk-js/src/core/clerk.ts
index d8c3d4d1c28..b493bef16f5 100644
--- a/packages/clerk-js/src/core/clerk.ts
+++ b/packages/clerk-js/src/core/clerk.ts
@@ -22,6 +22,7 @@ import {
 import type {
   __experimental_CheckoutInstance,
   __experimental_CheckoutOptions,
+  __internal_AttemptToEnableEnvironmentSettingParams,
   __internal_CheckoutProps,
   __internal_EnableOrganizationsPromptProps,
   __internal_OAuthConsentProps,
@@ -98,6 +99,7 @@ import { allSettled, handleValueOrFn, noop } from '@clerk/shared/utils';
 import type { QueryClient } from '@tanstack/query-core';
 
 import { debugLogger, initDebugLogger } from '@/utils/debug';
+import { CLERK_ENVIRONMENT_SETTING_PROMPT_REJECTED_KEY, SafeSessionStorage } from '@/utils/sessionStorage';
 
 import type { MountComponentRenderer } from '../ui/Components';
 import {
@@ -178,6 +180,7 @@ declare global {
 
 const CANNOT_RENDER_BILLING_DISABLED_ERROR_CODE = 'cannot_render_billing_disabled';
 const CANNOT_RENDER_USER_MISSING_ERROR_CODE = 'cannot_render_user_missing';
+const CANNOT_RENDER_ORGANIZATIONS_DISABLED_ERROR_CODE = 'cannot_render_organizations_disabled';
 const CANNOT_RENDER_ORGANIZATION_MISSING_ERROR_CODE = 'cannot_render_organization_missing';
 const CANNOT_RENDER_SINGLE_SESSION_ENABLED_ERROR_CODE = 'cannot_render_single_session_enabled';
 const CANNOT_RENDER_API_KEYS_DISABLED_ERROR_CODE = 'cannot_render_api_keys_disabled';
@@ -745,6 +748,42 @@ export class Clerk implements ClerkInterface {
     void this.#componentControls.ensureMounted().then(controls => controls.closeModal('userVerification'));
   };
 
+  public __internal_attemptToEnableEnvironmentSetting = (
+    params: __internal_AttemptToEnableEnvironmentSettingParams,
+  ): { status: 'enabled' | 'prompt-shown' | 'rejected' } => {
+    const { for: setting, caller, onSuccess } = params;
+
+    // If not in development instance, return enabled status in order to not open the in-app prompt
+    if (this.#instanceType !== 'development') {
+      return { status: 'enabled' };
+    }
+
+    const rejectedCallers = SafeSessionStorage.getItem<string[]>(CLERK_ENVIRONMENT_SETTING_PROMPT_REJECTED_KEY, []);
+
+    switch (setting) {
+      case 'organizations':
+        if (!disabledOrganizationsFeature(this, this.environment)) {
+          return { status: 'enabled' };
+        }
+
+        if (rejectedCallers.includes(caller)) {
+          return { status: 'rejected' };
+        }
+
+        this.__internal_openEnableOrganizationsPrompt({
+          caller,
+          onSuccess: () => window.location.reload(),
+          onClose: () => {
+            SafeSessionStorage.setItem(CLERK_ENVIRONMENT_SETTING_PROMPT_REJECTED_KEY, [caller]);
+          },
+        } as __internal_EnableOrganizationsPromptProps);
+
+        return { status: 'prompt-shown' };
+      default:
+        return { status: 'enabled' };
+    }
+  };
+
   public __internal_openEnableOrganizationsPrompt = (props: __internal_EnableOrganizationsPromptProps): void => {
     this.assertComponentsReady(this.#componentControls);
     void this.#componentControls
@@ -828,17 +867,25 @@ export class Clerk implements ClerkInterface {
 
   public openOrganizationProfile = (props?: OrganizationProfileProps): void => {
     this.assertComponentsReady(this.#componentControls);
-    if (disabledOrganizationsFeature(this, this.environment)) {
-      if (this.#instanceType === 'development') {
-        this.__internal_openEnableOrganizationsPrompt({
-          componentName: 'OrganizationProfile',
-          onComplete: () => {
-            this.openOrganizationProfile();
-          },
-        });
-      }
+
+    const { status } = this.__internal_attemptToEnableEnvironmentSetting({
+      for: 'organizations',
+      caller: 'OrganizationProfile',
+      onSuccess: () => {
+        this.openOrganizationProfile(props);
+      },
+    });
+
+    if (status === 'rejected') {
+      throw new ClerkRuntimeError(warnings.cannotRenderAnyOrganizationComponent('OrganizationProfile'), {
+        code: CANNOT_RENDER_ORGANIZATIONS_DISABLED_ERROR_CODE,
+      });
+    }
+
+    if (status === 'prompt-shown') {
       return;
     }
+
     if (noOrganizationExists(this)) {
       if (this.#instanceType === 'development') {
         throw new ClerkRuntimeError(warnings.cannotRenderComponentWhenOrgDoesNotExist, {
@@ -861,17 +908,25 @@ export class Clerk implements ClerkInterface {
 
   public openCreateOrganization = (props?: CreateOrganizationProps): void => {
     this.assertComponentsReady(this.#componentControls);
-    if (disabledOrganizationsFeature(this, this.environment)) {
-      if (this.#instanceType === 'development') {
-        this.__internal_openEnableOrganizationsPrompt({
-          componentName: 'OrganizationSwitcher',
-          onComplete: () => {
-            this.openCreateOrganization();
-          },
-        });
-      }
+
+    const { status } = this.__internal_attemptToEnableEnvironmentSetting({
+      for: 'organizations',
+      caller: 'CreateOrganization',
+      onSuccess: () => {
+        this.openCreateOrganization(props);
+      },
+    });
+
+    if (status === 'rejected') {
+      throw new ClerkRuntimeError(warnings.cannotRenderAnyOrganizationComponent('CreateOrganization'), {
+        code: CANNOT_RENDER_ORGANIZATIONS_DISABLED_ERROR_CODE,
+      });
+    }
+
+    if (status === 'prompt-shown') {
       return;
     }
+
     void this.#componentControls
       .ensureMounted({ preloadHint: 'CreateOrganization' })
       .then(controls => controls.openModal('createOrganization', props || {}));
@@ -1006,17 +1061,25 @@ export class Clerk implements ClerkInterface {
 
   public mountOrganizationProfile = (node: HTMLDivElement, props?: OrganizationProfileProps) => {
     this.assertComponentsReady(this.#componentControls);
-    if (disabledOrganizationsFeature(this, this.environment)) {
-      if (this.#instanceType === 'development') {
-        this.__internal_openEnableOrganizationsPrompt({
-          componentName: 'OrganizationProfile',
-          onComplete: () => {
-            this.mountOrganizationProfile(node, props);
-          },
-        });
-      }
+
+    const { status } = this.__internal_attemptToEnableEnvironmentSetting({
+      for: 'organizations',
+      caller: 'OrganizationProfile',
+      onSuccess: () => {
+        this.mountOrganizationProfile(node, props);
+      },
+    });
+
+    if (status === 'rejected') {
+      throw new ClerkRuntimeError(warnings.cannotRenderAnyOrganizationComponent('OrganizationProfile'), {
+        code: CANNOT_RENDER_ORGANIZATIONS_DISABLED_ERROR_CODE,
+      });
+    }
+
+    if (status === 'prompt-shown') {
       return;
     }
+
     const userExists = !noUserExists(this);
     if (noOrganizationExists(this) && userExists) {
       if (this.#instanceType === 'development') {
@@ -1049,17 +1112,25 @@ export class Clerk implements ClerkInterface {
 
   public mountCreateOrganization = (node: HTMLDivElement, props?: CreateOrganizationProps) => {
     this.assertComponentsReady(this.#componentControls);
-    if (disabledOrganizationsFeature(this, this.environment)) {
-      if (this.#instanceType === 'development') {
-        this.__internal_openEnableOrganizationsPrompt({
-          componentName: 'OrganizationSwitcher',
-          onComplete: () => {
-            this.mountCreateOrganization();
-          },
-        });
-      }
+
+    const { status } = this.__internal_attemptToEnableEnvironmentSetting({
+      for: 'organizations',
+      caller: 'CreateOrganization',
+      onSuccess: () => {
+        this.mountCreateOrganization(node, props);
+      },
+    });
+
+    if (status === 'rejected') {
+      throw new ClerkRuntimeError(warnings.cannotRenderAnyOrganizationComponent('CreateOrganization'), {
+        code: CANNOT_RENDER_ORGANIZATIONS_DISABLED_ERROR_CODE,
+      });
+    }
+
+    if (status === 'prompt-shown') {
       return;
     }
+
     void this.#componentControls?.ensureMounted({ preloadHint: 'CreateOrganization' }).then(controls =>
       controls.mountComponent({
         name: 'CreateOrganization',
@@ -1083,17 +1154,25 @@ export class Clerk implements ClerkInterface {
 
   public mountOrganizationSwitcher = (node: HTMLDivElement, props?: OrganizationSwitcherProps) => {
     this.assertComponentsReady(this.#componentControls);
-    if (disabledOrganizationsFeature(this, this.environment)) {
-      if (this.#instanceType === 'development') {
-        this.__internal_openEnableOrganizationsPrompt({
-          componentName: 'OrganizationSwitcher',
-          onComplete: () => {
-            this.mountOrganizationSwitcher(node, props);
-          },
-        });
-      }
+
+    const { status } = this.__internal_attemptToEnableEnvironmentSetting({
+      for: 'organizations',
+      caller: 'OrganizationSwitcher',
+      onSuccess: () => {
+        this.mountOrganizationSwitcher(node, props);
+      },
+    });
+
+    if (status === 'rejected') {
+      throw new ClerkRuntimeError(warnings.cannotRenderAnyOrganizationComponent('OrganizationSwitcher'), {
+        code: CANNOT_RENDER_ORGANIZATIONS_DISABLED_ERROR_CODE,
+      });
+    }
+
+    if (status === 'prompt-shown') {
       return;
     }
+
     void this.#componentControls?.ensureMounted({ preloadHint: 'OrganizationSwitcher' }).then(controls =>
       controls.mountComponent({
         name: 'OrganizationSwitcher',
@@ -1125,17 +1204,25 @@ export class Clerk implements ClerkInterface {
 
   public mountOrganizationList = (node: HTMLDivElement, props?: OrganizationListProps) => {
     this.assertComponentsReady(this.#componentControls);
-    if (disabledOrganizationsFeature(this, this.environment)) {
-      if (this.#instanceType === 'development') {
-        this.__internal_openEnableOrganizationsPrompt({
-          componentName: 'OrganizationList',
-          onComplete: () => {
-            this.mountOrganizationList(node, props);
-          },
-        });
-      }
+
+    const { status } = this.__internal_attemptToEnableEnvironmentSetting({
+      for: 'organizations',
+      caller: 'OrganizationList',
+      onSuccess: () => {
+        this.mountOrganizationList(node, props);
+      },
+    });
+
+    if (status === 'rejected') {
+      throw new ClerkRuntimeError(warnings.cannotRenderAnyOrganizationComponent('OrganizationList'), {
+        code: CANNOT_RENDER_ORGANIZATIONS_DISABLED_ERROR_CODE,
+      });
+    }
+
+    if (status === 'prompt-shown') {
       return;
     }
+
     void this.#componentControls?.ensureMounted({ preloadHint: 'OrganizationList' }).then(controls =>
       controls.mountComponent({
         name: 'OrganizationList',
@@ -1324,15 +1411,21 @@ export class Clerk implements ClerkInterface {
   public mountTaskChooseOrganization = (node: HTMLDivElement, props?: TaskChooseOrganizationProps) => {
     this.assertComponentsReady(this.#componentControls);
 
-    if (disabledOrganizationsFeature(this, this.environment)) {
-      if (this.#instanceType === 'development') {
-        this.__internal_openEnableOrganizationsPrompt({
-          componentName: 'OrganizationSwitcher',
-          onComplete: () => {
-            this.mountTaskChooseOrganization(node, props);
-          },
-        });
-      }
+    const { status } = this.__internal_attemptToEnableEnvironmentSetting({
+      for: 'organizations',
+      caller: 'TaskChooseOrganization',
+      onSuccess: () => {
+        this.mountTaskChooseOrganization(node, props);
+      },
+    });
+
+    if (status === 'rejected') {
+      throw new ClerkRuntimeError(warnings.cannotRenderAnyOrganizationComponent('TaskChooseOrganization'), {
+        code: CANNOT_RENDER_ORGANIZATIONS_DISABLED_ERROR_CODE,
+      });
+    }
+
+    if (status === 'prompt-shown') {
       return;
     }
 
diff --git a/packages/clerk-js/src/core/warnings.ts b/packages/clerk-js/src/core/warnings.ts
index b53fee0884d..ac0621a4160 100644
--- a/packages/clerk-js/src/core/warnings.ts
+++ b/packages/clerk-js/src/core/warnings.ts
@@ -4,6 +4,18 @@ const formatWarning = (msg: string) => {
   return `🔒 Clerk:\n${msg.trim()}\n(This notice only appears in development)`;
 };
 
+const createMessageForDisabledOrganizations = (
+  componentName:
+    | 'OrganizationProfile'
+    | 'OrganizationSwitcher'
+    | 'OrganizationList'
+    | 'CreateOrganization'
+    | 'TaskChooseOrganization',
+) => {
+  return formatWarning(
+    `The <${componentName}/> cannot be rendered when the feature is turned off. Visit 'dashboard.clerk.com' to enable the feature. Since the feature is turned off, this is no-op.`,
+  );
+};
 const createMessageForDisabledBilling = (componentName: 'PricingTable' | 'Checkout' | 'PlanDetails') => {
   return formatWarning(
     `The <${componentName}/> component cannot be rendered when billing is disabled. Visit 'https://dashboard.clerk.com/last-active?path=billing/settings' to follow the necessary steps to enable billing. Since billing is disabled, this is no-op.`,
@@ -25,6 +37,7 @@ const warnings = {
   cannotRenderComponentWhenUserDoesNotExist:
     '<UserProfile/> cannot render unless a user is signed in. Since no user is signed in, this is no-op.',
   cannotRenderComponentWhenOrgDoesNotExist: `<OrganizationProfile/> cannot render unless an organization is active. Since no organization is currently active, this is no-op.`,
+  cannotRenderAnyOrganizationComponent: createMessageForDisabledOrganizations,
   cannotRenderAnyBillingComponent: createMessageForDisabledBilling,
   cannotOpenUserProfile:
     'The UserProfile modal cannot render unless a user is signed in. Since no user is signed in, this is no-op.',
diff --git a/packages/clerk-js/src/ui/components/devPrompts/EnableOrganizationsPrompt/index.tsx b/packages/clerk-js/src/ui/components/devPrompts/EnableOrganizationsPrompt/index.tsx
index d12fbdd723d..f4a1ff18c16 100644
--- a/packages/clerk-js/src/ui/components/devPrompts/EnableOrganizationsPrompt/index.tsx
+++ b/packages/clerk-js/src/ui/components/devPrompts/EnableOrganizationsPrompt/index.tsx
@@ -12,8 +12,11 @@ import { Flex } from '../../../customizables';
 import { Portal } from '../../../elements/Portal';
 import { basePromptElementStyles, PromptContainer, PromptSuccessIcon } from '../shared';
 
-const EnableOrganizationsPromptInternal = (props: __internal_EnableOrganizationsPromptProps) => {
-  const ctaText = 'componentName' in props ? `<${props.componentName} />` : props.utilityName;
+const EnableOrganizationsPromptInternal = ({
+  caller,
+  onSuccess,
+  onClose,
+}: __internal_EnableOrganizationsPromptProps) => {
   const clerk = useClerk();
   const [isLoading, setIsLoading] = useState(false);
 
@@ -32,7 +35,6 @@ const EnableOrganizationsPromptInternal = (props: __internal_EnableOrganizations
         // as a persistent state
         // By the time the user refreshes the page, the environment will be updated and the prompt will not be shown again
         environment.organizationSettings.__internal_enableInMemory();
-        props.onComplete?.();
       })
       .finally(() => {
         setIsLoading(false);
@@ -174,7 +176,7 @@ const EnableOrganizationsPromptInternal = (props: __internal_EnableOrganizations
                       `,
                     ]}
                   >
-                    To use the{' '}
+                    To use{' '}
                     <code
                       css={[
                         basePromptElementStyles,
@@ -185,10 +187,9 @@ const EnableOrganizationsPromptInternal = (props: __internal_EnableOrganizations
                         `,
                       ]}
                     >
-                      {ctaText}
-                    </code>{' '}
-                    {'componentName' in props ? 'component' : 'hook'}, you&apos;ll need to enable the Organizations
-                    feature for your app first.
+                      {caller}
+                    </code>
+                    , you&apos;ll need to enable the Organizations feature for your app first.
                   </span>
 
                   <a
@@ -202,12 +203,12 @@ const EnableOrganizationsPromptInternal = (props: __internal_EnableOrganizations
                         font-size: 0.8125rem;
                       `,
                     ]}
-                    href='https://clerk.com/docs/guides/organizations'
+                    href='https://clerk.com/docs/guides/organizations/overview'
                     target='_blank'
                     rel='noopener noreferrer'
                     tabIndex={-1}
                   >
-                    Learn more about this add-on.
+                    Learn more about Organizations.
                   </a>
                 </>
               )}
@@ -234,7 +235,7 @@ const EnableOrganizationsPromptInternal = (props: __internal_EnableOrganizations
             {isEnabled ? (
               <PromptButton
                 variant='outline'
-                onClick={() => clerk?.__internal_closeEnableOrganizationsPrompt?.()}
+                onClick={() => onSuccess?.()}
               >
                 Continue
               </PromptButton>
@@ -250,7 +251,10 @@ const EnableOrganizationsPromptInternal = (props: __internal_EnableOrganizations
 
                 <PromptButton
                   variant='outline'
-                  onClick={() => clerk?.__internal_closeEnableOrganizationsPrompt?.()}
+                  onClick={() => {
+                    clerk?.__internal_closeEnableOrganizationsPrompt?.();
+                    onClose?.();
+                  }}
                 >
                   I&apos;ll remove it myself
                 </PromptButton>
diff --git a/packages/clerk-js/src/utils/sessionStorage.ts b/packages/clerk-js/src/utils/sessionStorage.ts
new file mode 100644
index 00000000000..3c13e8413fb
--- /dev/null
+++ b/packages/clerk-js/src/utils/sessionStorage.ts
@@ -0,0 +1,81 @@
+const CLERK_PREFIX = '__clerk_';
+
+export const CLERK_ENVIRONMENT_SETTING_PROMPT_REJECTED_KEY = 'environment_setting_prompt_rejected';
+
+interface StorageEntry<T> {
+  value: T;
+  exp?: number;
+}
+
+const serialize = JSON.stringify;
+const parse = JSON.parse;
+
+/**
+ * Safe wrapper around sessionStorage that automatically prefixes keys with 'clerk_'
+ * and handles potential errors and entry expiration
+ */
+export class SafeSessionStorage {
+  private static _key(key: string): string {
+    return `${CLERK_PREFIX}${key}`;
+  }
+
+  private static isExpired(entry: StorageEntry<unknown>): boolean {
+    return !!entry.exp && Date.now() > entry.exp;
+  }
+
+  static setItem(key: string, value: unknown, expiresInMs?: number): void {
+    try {
+      if (typeof window === 'undefined' || !window.sessionStorage) {
+        return;
+      }
+      const entry: StorageEntry<unknown> = {
+        value,
+        ...(expiresInMs && { exp: Date.now() + expiresInMs }),
+      };
+      window.sessionStorage.setItem(this._key(key), serialize(entry));
+    } catch {
+      // noop
+    }
+  }
+
+  static getItem<T>(key: string, defaultValue: T): T {
+    try {
+      if (typeof window === 'undefined' || !window.sessionStorage) {
+        return defaultValue;
+      }
+      const item = window.sessionStorage.getItem(this._key(key));
+      if (!item) {
+        return defaultValue;
+      }
+      const entry = parse(item) as unknown as StorageEntry<T> | undefined | null;
+
+      if (!entry) {
+        return defaultValue;
+      }
+
+      if (this.isExpired(entry)) {
+        this.removeItem(key);
+        return defaultValue;
+      }
+
+      return entry?.value ?? defaultValue;
+    } catch {
+      return defaultValue;
+    }
+  }
+
+  static removeItem(key: string): void {
+    try {
+      if (typeof window === 'undefined' || !window.sessionStorage) {
+        return;
+      }
+      window.sessionStorage.removeItem(this._key(key));
+    } catch {
+      // noop
+    }
+  }
+
+  static isSupported(): boolean {
+    return typeof window !== 'undefined' && !!window.sessionStorage;
+  }
+}
diff --git a/packages/shared/src/organization.ts b/packages/shared/src/organization.ts
index db28e8f98b4..61667ac9a36 100644
--- a/packages/shared/src/organization.ts
+++ b/packages/shared/src/organization.ts
@@ -1,4 +1,7 @@
-import type { __internal_EnableOrganizationsPromptProps, LoadedClerk, OrganizationMembershipResource } from './types';
+import { useEffect, useRef } from 'react';
+
+import { useClerk } from './react';
+import type { OrganizationMembershipResource } from './types';
 
 /**
  * Finds the organization membership for a given organization ID from a list of memberships
@@ -17,27 +20,25 @@ export function getCurrentOrganizationMembership(
 }
 
 /**
- * Wraps a function in a check to see if organization settings is enabled
- * If not enabled, it will open a dialog with a prompt to enable organizations
+ * Attempts to enable the organizations environment setting for a given caller
  *
  * @internal
  */
-export const withOrganizationSettingsEnabled =
-  <TParams extends any[], TReturn>(
-    hook: (...args: TParams) => TReturn,
-    getLoadedClerk: () => LoadedClerk | null | undefined,
-    utilityName?: __internal_EnableOrganizationsPromptProps['utilityName'],
-  ) =>
-  (...args: TParams): TReturn => {
-    const clerk = getLoadedClerk();
-    // @ts-expect-error - __unstable__environment is not typed
-    const environment = clerk?.__unstable__environment;
+export function useAttemptToEnableOrganizations(caller: 'useOrganization' | 'useOrganizationList') {
+  const clerk = useClerk();
+  const hasAttempted = useRef(false);
 
-    if (environment?.isDevelopment?.() && !environment?.organizationSettings.enabled) {
-      clerk?.__internal_openEnableOrganizationsPrompt({
-        utilityName,
-      });
+  useEffect(() => {
+    // Guard to not run this effect twice on Clerk resource update
+    if (hasAttempted.current) {
+      return;
     }
 
-    return hook(...args);
-  };
+    hasAttempted.current = true;
+    clerk.__internal_attemptToEnableEnvironmentSetting({
+      for: 'organizations',
+      caller,
+      onSuccess: () => {},
+    });
+  }, [clerk, caller]);
+}
diff --git a/packages/shared/src/react/hooks/useOrganization.tsx b/packages/shared/src/react/hooks/useOrganization.tsx
index a1918317096..28ee4b9bee8 100644
--- a/packages/shared/src/react/hooks/useOrganization.tsx
+++ b/packages/shared/src/react/hooks/useOrganization.tsx
@@ -1,4 +1,4 @@
-import { getCurrentOrganizationMembership, withOrganizationSettingsEnabled } from '../../organization';
+import { getCurrentOrganizationMembership, useAttemptToEnableOrganizations } from '../../organization';
 import { eventMethodCalled } from '../../telemetry/events/method-called';
 import type {
   GetDomainsParams,
@@ -20,7 +20,6 @@ import {
 import { STABLE_KEYS } from '../stable-keys';
 import type { PaginatedHookConfig, PaginatedResources, PaginatedResourcesWithDefault } from '../types';
 import { createCacheKeys } from './createCacheKeys';
-import { useClerk } from './useClerk';
 import { usePagesOrInfinite, useWithSafeValues } from './usePagesOrInfinite';
 
 /**
@@ -272,7 +271,7 @@ const undefinedPaginatedResource = {
  * }
  * ```
  */
-function useOrganizationInternal<T extends UseOrganizationParams>(params?: T): UseOrganizationReturn<T> {
+export function useOrganization<T extends UseOrganizationParams>(params?: T): UseOrganizationReturn<T> {
   const {
     domains: domainListParams,
     membershipRequests: membershipRequestsListParams,
@@ -281,6 +280,7 @@ function useOrganizationInternal<T extends UseOrganizationParams>(params?: T): U
   } = params || {};
 
   useAssertWrappedByClerkProvider('useOrganization');
+  useAttemptToEnableOrganizations('useOrganization');
 
   const { organization } = useOrganizationContext();
   const session = useSessionContext();
@@ -495,9 +495,3 @@ function useOrganizationInternal<T extends UseOrganizationParams>(params?: T): U
     invitations,
   };
 }
-
-export const useOrganization = withOrganizationSettingsEnabled(
-  useOrganizationInternal,
-  () => useClerk(),
-  'useOrganization',
-);
diff --git a/packages/shared/src/react/hooks/useOrganizationList.tsx b/packages/shared/src/react/hooks/useOrganizationList.tsx
index 9c1261692d7..a75f124307d 100644
--- a/packages/shared/src/react/hooks/useOrganizationList.tsx
+++ b/packages/shared/src/react/hooks/useOrganizationList.tsx
@@ -1,4 +1,4 @@
-import { withOrganizationSettingsEnabled } from '../../organization';
+import { useAttemptToEnableOrganizations } from '../../organization';
 import { eventMethodCalled } from '../../telemetry/events/method-called';
 import type {
   CreateOrganizationParams,
@@ -15,7 +15,6 @@ import { useAssertWrappedByClerkProvider, useClerkInstanceContext, useUserContex
 import { STABLE_KEYS } from '../stable-keys';
 import type { PaginatedHookConfig, PaginatedResources, PaginatedResourcesWithDefault } from '../types';
 import { createCacheKeys } from './createCacheKeys';
-import { useClerk } from './useClerk';
 import { usePagesOrInfinite, useWithSafeValues } from './usePagesOrInfinite';
 
 /**
@@ -249,10 +248,11 @@ export type UseOrganizationListReturn<T extends UseOrganizationListParams> =
  * export default UserInvitationsTable
  * ```
  */
-function useOrganizationListInternal<T extends UseOrganizationListParams>(params?: T): UseOrganizationListReturn<T> {
+export function useOrganizationList<T extends UseOrganizationListParams>(params?: T): UseOrganizationListReturn<T> {
   const { userMemberships, userInvitations, userSuggestions } = params || {};
 
   useAssertWrappedByClerkProvider('useOrganizationList');
+  useAttemptToEnableOrganizations('useOrganizationList');
 
   const userMembershipsSafeValues = useWithSafeValues(userMemberships, {
     initialPage: 1,
@@ -398,9 +398,3 @@ function useOrganizationListInternal<T extends UseOrganizationListParams>(params
     userSuggestions: suggestions,
   };
 }
-
-export const useOrganizationList = withOrganizationSettingsEnabled(
-  useOrganizationListInternal,
-  () => useClerk(),
-  'useOrganizationList',
-);
diff --git a/packages/shared/src/types/clerk.ts b/packages/shared/src/types/clerk.ts
index 50460d54e38..348f135fd3c 100644
--- a/packages/shared/src/types/clerk.ts
+++ b/packages/shared/src/types/clerk.ts
@@ -321,7 +321,14 @@ export interface Clerk {
   __internal_closeReverification: () => void;
 
   /**
-   * Opens the Clerk Enable Organizations prompt for development environments
+   * Attempts to enable a environment setting from a development instance, prompting if disabled.
+   */
+  __internal_attemptToEnableEnvironmentSetting: (options: __internal_AttemptToEnableEnvironmentSettingParams) => {
+    status: 'enabled' | 'prompt-shown' | 'rejected';
+  };
+
+  /**
+   * Opens the Clerk Enable Organizations prompt for development instance
    */
   __internal_openEnableOrganizationsPrompt: (props: __internal_EnableOrganizationsPromptProps) => void;
 
@@ -1440,15 +1447,29 @@ export type __internal_UserVerificationProps = RoutingOptions & {
 export type __internal_UserVerificationModalProps = WithoutRouting<__internal_UserVerificationProps>;
 
 export type __internal_EnableOrganizationsPromptProps = {
-  onComplete?: () => void;
-} & (
-  | {
-      componentName: 'OrganizationSwitcher' | 'OrganizationProfile' | 'OrganizationList';
-    }
-  | {
-      utilityName: 'useOrganizationList' | 'useOrganization';
-    }
-);
+  onSuccess?: () => void;
+  onClose?: () => void;
+} & {
+  caller:
+    | 'OrganizationSwitcher'
+    | 'OrganizationProfile'
+    | 'OrganizationList'
+    | 'useOrganizationList'
+    | 'useOrganization';
+};
+
+export type __internal_AttemptToEnableEnvironmentSettingParams = {
+  for: 'organizations';
+  caller:
+    | 'OrganizationSwitcher'
+    | 'OrganizationProfile'
+    | 'OrganizationList'
+    | 'CreateOrganization'
+    | 'TaskChooseOrganization'
+    | 'useOrganizationList'
+    | 'useOrganization';
+  onSuccess: () => void;
+};
 
 type GoogleOneTapRedirectUrlProps = SignInForceRedirectUrl & SignUpForceRedirectUrl;
 
diff --git a/packages/vue/src/composables/useOrganization.ts b/packages/vue/src/composables/useOrganization.ts
index 5a20e432004..4a84b3fef75 100644
--- a/packages/vue/src/composables/useOrganization.ts
+++ b/packages/vue/src/composables/useOrganization.ts
@@ -1,10 +1,9 @@
-import { getCurrentOrganizationMembership, withOrganizationSettingsEnabled } from '@clerk/shared/organization';
-import type { LoadedClerk, OrganizationMembershipResource, OrganizationResource } from '@clerk/shared/types';
-import { computed } from 'vue';
+import { getCurrentOrganizationMembership } from '@clerk/shared/organization';
+import type { OrganizationMembershipResource, OrganizationResource } from '@clerk/shared/types';
+import { computed, watch } from 'vue';
 
 import type { ToComputedRefs } from '../utils';
 import { toComputedRefs } from '../utils';
-import { useClerk } from './useClerk';
 import { useClerkContext } from './useClerkContext';
 import { useSession } from './useSession';
 
@@ -53,10 +52,25 @@ type UseOrganization = () => ToComputedRefs<UseOrganizationReturn>;
  *   </div>
  * </template>
  */
-const useOrganizationInternal: UseOrganization = () => {
+export const useOrganization: UseOrganization = () => {
   const { clerk, organizationCtx } = useClerkContext('useOrganization');
   const { session } = useSession();
 
+  const unwatch = watch(
+    clerk,
+    value => {
+      if (value) {
+        value.__internal_attemptToEnableEnvironmentSetting({
+          for: 'organizations',
+          caller: 'useOrganization',
+          onSuccess: () => {},
+        });
+        unwatch();
+      }
+    },
+    { immediate: true },
+  );
+
   const result = computed<UseOrganizationReturn>(() => {
     if (organizationCtx.value === undefined) {
       return { isLoaded: false, organization: undefined, membership: undefined };
@@ -88,9 +102,3 @@ const useOrganizationInternal: UseOrganization = () => {
 
   return toComputedRefs(result);
 };
-
-export const useOrganization = withOrganizationSettingsEnabled(
-  useOrganizationInternal,
-  () => useClerk().value as LoadedClerk,
-  'useOrganization',
-);

From ed4cce570d5745059498c2ce93a2bc6270cf8d1f Mon Sep 17 00:00:00 2001
From: Laura Beatris <48022589+LauraBeatris@users.noreply.github.com>
Date: Wed, 12 Nov 2025 16:29:46 -0300
Subject: [PATCH 13/30] Always throw error when rejecting prompt

---
 packages/clerk-js/src/core/clerk.ts           | 101 ++++++------------
 .../core/resources/OrganizationSettings.ts    |   8 --
 .../EnableOrganizationsPrompt/index.tsx       |  11 +-
 packages/clerk-js/src/utils/sessionStorage.ts |  81 --------------
 packages/shared/src/types/clerk.ts            |   2 +-
 .../vue/src/composables/useOrganization.ts    |   1 -
 6 files changed, 36 insertions(+), 168 deletions(-)
 delete mode 100644 packages/clerk-js/src/utils/sessionStorage.ts

diff --git a/packages/clerk-js/src/core/clerk.ts b/packages/clerk-js/src/core/clerk.ts
index b493bef16f5..84d8a3c586c 100644
--- a/packages/clerk-js/src/core/clerk.ts
+++ b/packages/clerk-js/src/core/clerk.ts
@@ -99,7 +99,6 @@ import { allSettled, handleValueOrFn, noop } from '@clerk/shared/utils';
 import type { QueryClient } from '@tanstack/query-core';
 
 import { debugLogger, initDebugLogger } from '@/utils/debug';
-import { CLERK_ENVIRONMENT_SETTING_PROMPT_REJECTED_KEY, SafeSessionStorage } from '@/utils/sessionStorage';
 
 import type { MountComponentRenderer } from '../ui/Components';
 import {
@@ -750,32 +749,26 @@ export class Clerk implements ClerkInterface {
 
   public __internal_attemptToEnableEnvironmentSetting = (
     params: __internal_AttemptToEnableEnvironmentSettingParams,
-  ): { status: 'enabled' | 'prompt-shown' | 'rejected' } => {
-    const { for: setting, caller, onSuccess } = params;
+  ): { status: 'enabled' | 'prompt-shown' } => {
+    const { for: setting, caller } = params;
 
     // If not in development instance, return enabled status in order to not open the in-app prompt
     if (this.#instanceType !== 'development') {
       return { status: 'enabled' };
     }
 
-    const rejectedCallers = SafeSessionStorage.getItem<string[]>(CLERK_ENVIRONMENT_SETTING_PROMPT_REJECTED_KEY, []);
-
     switch (setting) {
       case 'organizations':
         if (!disabledOrganizationsFeature(this, this.environment)) {
           return { status: 'enabled' };
         }
 
-        if (rejectedCallers.includes(caller)) {
-          return { status: 'rejected' };
-        }
-
         this.__internal_openEnableOrganizationsPrompt({
           caller,
+          // Reload current window to all invalidate all resources
+          // related to organizations, eg: roles
           onSuccess: () => window.location.reload(),
-          onClose: () => {
-            SafeSessionStorage.setItem(CLERK_ENVIRONMENT_SETTING_PROMPT_REJECTED_KEY, [caller]);
-          },
+          onClose: params.onClose,
         } as __internal_EnableOrganizationsPromptProps);
 
         return { status: 'prompt-shown' };
@@ -871,17 +864,13 @@ export class Clerk implements ClerkInterface {
     const { status } = this.__internal_attemptToEnableEnvironmentSetting({
       for: 'organizations',
       caller: 'OrganizationProfile',
-      onSuccess: () => {
-        this.openOrganizationProfile(props);
+      onClose: () => {
+        throw new ClerkRuntimeError(warnings.cannotRenderAnyOrganizationComponent('OrganizationProfile'), {
+          code: CANNOT_RENDER_ORGANIZATIONS_DISABLED_ERROR_CODE,
+        });
       },
     });
 
-    if (status === 'rejected') {
-      throw new ClerkRuntimeError(warnings.cannotRenderAnyOrganizationComponent('OrganizationProfile'), {
-        code: CANNOT_RENDER_ORGANIZATIONS_DISABLED_ERROR_CODE,
-      });
-    }
-
     if (status === 'prompt-shown') {
       return;
     }
@@ -912,17 +901,13 @@ export class Clerk implements ClerkInterface {
     const { status } = this.__internal_attemptToEnableEnvironmentSetting({
       for: 'organizations',
       caller: 'CreateOrganization',
-      onSuccess: () => {
-        this.openCreateOrganization(props);
+      onClose: () => {
+        throw new ClerkRuntimeError(warnings.cannotRenderAnyOrganizationComponent('CreateOrganization'), {
+          code: CANNOT_RENDER_ORGANIZATIONS_DISABLED_ERROR_CODE,
+        });
       },
     });
 
-    if (status === 'rejected') {
-      throw new ClerkRuntimeError(warnings.cannotRenderAnyOrganizationComponent('CreateOrganization'), {
-        code: CANNOT_RENDER_ORGANIZATIONS_DISABLED_ERROR_CODE,
-      });
-    }
-
     if (status === 'prompt-shown') {
       return;
     }
@@ -1065,17 +1050,13 @@ export class Clerk implements ClerkInterface {
     const { status } = this.__internal_attemptToEnableEnvironmentSetting({
       for: 'organizations',
       caller: 'OrganizationProfile',
-      onSuccess: () => {
-        this.mountOrganizationProfile(node, props);
+      onClose: () => {
+        throw new ClerkRuntimeError(warnings.cannotRenderAnyOrganizationComponent('OrganizationProfile'), {
+          code: CANNOT_RENDER_ORGANIZATIONS_DISABLED_ERROR_CODE,
+        });
       },
     });
 
-    if (status === 'rejected') {
-      throw new ClerkRuntimeError(warnings.cannotRenderAnyOrganizationComponent('OrganizationProfile'), {
-        code: CANNOT_RENDER_ORGANIZATIONS_DISABLED_ERROR_CODE,
-      });
-    }
-
     if (status === 'prompt-shown') {
       return;
     }
@@ -1116,17 +1097,13 @@ export class Clerk implements ClerkInterface {
     const { status } = this.__internal_attemptToEnableEnvironmentSetting({
       for: 'organizations',
       caller: 'CreateOrganization',
-      onSuccess: () => {
-        this.mountCreateOrganization(node, props);
+      onClose: () => {
+        throw new ClerkRuntimeError(warnings.cannotRenderAnyOrganizationComponent('CreateOrganization'), {
+          code: CANNOT_RENDER_ORGANIZATIONS_DISABLED_ERROR_CODE,
+        });
       },
     });
 
-    if (status === 'rejected') {
-      throw new ClerkRuntimeError(warnings.cannotRenderAnyOrganizationComponent('CreateOrganization'), {
-        code: CANNOT_RENDER_ORGANIZATIONS_DISABLED_ERROR_CODE,
-      });
-    }
-
     if (status === 'prompt-shown') {
       return;
     }
@@ -1158,17 +1135,13 @@ export class Clerk implements ClerkInterface {
     const { status } = this.__internal_attemptToEnableEnvironmentSetting({
       for: 'organizations',
       caller: 'OrganizationSwitcher',
-      onSuccess: () => {
-        this.mountOrganizationSwitcher(node, props);
+      onClose: () => {
+        throw new ClerkRuntimeError(warnings.cannotRenderAnyOrganizationComponent('OrganizationSwitcher'), {
+          code: CANNOT_RENDER_ORGANIZATIONS_DISABLED_ERROR_CODE,
+        });
       },
     });
 
-    if (status === 'rejected') {
-      throw new ClerkRuntimeError(warnings.cannotRenderAnyOrganizationComponent('OrganizationSwitcher'), {
-        code: CANNOT_RENDER_ORGANIZATIONS_DISABLED_ERROR_CODE,
-      });
-    }
-
     if (status === 'prompt-shown') {
       return;
     }
@@ -1208,17 +1181,13 @@ export class Clerk implements ClerkInterface {
     const { status } = this.__internal_attemptToEnableEnvironmentSetting({
       for: 'organizations',
       caller: 'OrganizationList',
-      onSuccess: () => {
-        this.mountOrganizationList(node, props);
+      onClose: () => {
+        throw new ClerkRuntimeError(warnings.cannotRenderAnyOrganizationComponent('OrganizationList'), {
+          code: CANNOT_RENDER_ORGANIZATIONS_DISABLED_ERROR_CODE,
+        });
       },
     });
 
-    if (status === 'rejected') {
-      throw new ClerkRuntimeError(warnings.cannotRenderAnyOrganizationComponent('OrganizationList'), {
-        code: CANNOT_RENDER_ORGANIZATIONS_DISABLED_ERROR_CODE,
-      });
-    }
-
     if (status === 'prompt-shown') {
       return;
     }
@@ -1414,17 +1383,13 @@ export class Clerk implements ClerkInterface {
     const { status } = this.__internal_attemptToEnableEnvironmentSetting({
       for: 'organizations',
       caller: 'TaskChooseOrganization',
-      onSuccess: () => {
-        this.mountTaskChooseOrganization(node, props);
+      onClose: () => {
+        throw new ClerkRuntimeError(warnings.cannotRenderAnyOrganizationComponent('TaskChooseOrganization'), {
+          code: CANNOT_RENDER_ORGANIZATIONS_DISABLED_ERROR_CODE,
+        });
       },
     });
 
-    if (status === 'rejected') {
-      throw new ClerkRuntimeError(warnings.cannotRenderAnyOrganizationComponent('TaskChooseOrganization'), {
-        code: CANNOT_RENDER_ORGANIZATIONS_DISABLED_ERROR_CODE,
-      });
-    }
-
     if (status === 'prompt-shown') {
       return;
     }
diff --git a/packages/clerk-js/src/core/resources/OrganizationSettings.ts b/packages/clerk-js/src/core/resources/OrganizationSettings.ts
index 38deff7c404..8960b347d62 100644
--- a/packages/clerk-js/src/core/resources/OrganizationSettings.ts
+++ b/packages/clerk-js/src/core/resources/OrganizationSettings.ts
@@ -75,12 +75,4 @@ export class OrganizationSettings extends BaseResource implements OrganizationSe
       max_allowed_memberships: this.maxAllowedMemberships,
     } as unknown as OrganizationSettingsJSONSnapshot;
   }
-
-  /**
-   * Used to enable the Organizations feature in memory after it has been enabled in the backend
-   * from the devtools resource, since it cannot return the updated environment due to API caching
-   */
-  public __internal_enableInMemory() {
-    this.enabled = true;
-  }
 }
diff --git a/packages/clerk-js/src/ui/components/devPrompts/EnableOrganizationsPrompt/index.tsx b/packages/clerk-js/src/ui/components/devPrompts/EnableOrganizationsPrompt/index.tsx
index f4a1ff18c16..c02bc9772b3 100644
--- a/packages/clerk-js/src/ui/components/devPrompts/EnableOrganizationsPrompt/index.tsx
+++ b/packages/clerk-js/src/ui/components/devPrompts/EnableOrganizationsPrompt/index.tsx
@@ -19,9 +19,7 @@ const EnableOrganizationsPromptInternal = ({
 }: __internal_EnableOrganizationsPromptProps) => {
   const clerk = useClerk();
   const [isLoading, setIsLoading] = useState(false);
-
-  // @ts-expect-error - __unstable__environment is not typed
-  const environment = clerk?.__unstable__environment as EnvironmentResource;
+  const [isEnabled, setIsEnabled] = useState(false);
 
   const handleEnableOrganizations = () => {
     setIsLoading(true);
@@ -31,18 +29,13 @@ const EnableOrganizationsPromptInternal = ({
         enable_organizations: true,
       })
       .then(() => {
-        // The above mutation doesn't return an environment due to API caching, so we need to enable it in memory
-        // as a persistent state
-        // By the time the user refreshes the page, the environment will be updated and the prompt will not be shown again
-        environment.organizationSettings.__internal_enableInMemory();
+        setIsEnabled(true);
       })
       .finally(() => {
         setIsLoading(false);
       });
   };
 
-  const isEnabled = !!environment?.organizationSettings.enabled;
-
   return (
     <Portal>
       <Modal
diff --git a/packages/clerk-js/src/utils/sessionStorage.ts b/packages/clerk-js/src/utils/sessionStorage.ts
deleted file mode 100644
index 3c13e8413fb..00000000000
--- a/packages/clerk-js/src/utils/sessionStorage.ts
+++ /dev/null
@@ -1,81 +0,0 @@
-const CLERK_PREFIX = '__clerk_';
-
-export const CLERK_ENVIRONMENT_SETTING_PROMPT_REJECTED_KEY = 'environment_setting_prompt_rejected';
-
-interface StorageEntry<T> {
-  value: T;
-  exp?: number;
-}
-
-const serialize = JSON.stringify;
-const parse = JSON.parse;
-
-/**
- * Safe wrapper around sessionStorage that automatically prefixes keys with 'clerk_'
- * and handles potential errors and entry expiration
- */
-export class SafeSessionStorage {
-  private static _key(key: string): string {
-    return `${CLERK_PREFIX}${key}`;
-  }
-
-  private static isExpired(entry: StorageEntry<unknown>): boolean {
-    return !!entry.exp && Date.now() > entry.exp;
-  }
-
-  static setItem(key: string, value: unknown, expiresInMs?: number): void {
-    try {
-      if (typeof window === 'undefined' || !window.sessionStorage) {
-        return;
-      }
-      const entry: StorageEntry<unknown> = {
-        value,
-        ...(expiresInMs && { exp: Date.now() + expiresInMs }),
-      };
-      window.sessionStorage.setItem(this._key(key), serialize(entry));
-    } catch {
-      // noop
-    }
-  }
-
-  static getItem<T>(key: string, defaultValue: T): T {
-    try {
-      if (typeof window === 'undefined' || !window.sessionStorage) {
-        return defaultValue;
-      }
-      const item = window.sessionStorage.getItem(this._key(key));
-      if (!item) {
-        return defaultValue;
-      }
-      const entry = parse(item) as unknown as StorageEntry<T> | undefined | null;
-
-      if (!entry) {
-        return defaultValue;
-      }
-
-      if (this.isExpired(entry)) {
-        this.removeItem(key);
-        return defaultValue;
-      }
-
-      return entry?.value ?? defaultValue;
-    } catch {
-      return defaultValue;
-    }
-  }
-
-  static removeItem(key: string): void {
-    try {
-      if (typeof window === 'undefined' || !window.sessionStorage) {
-        return;
-      }
-      window.sessionStorage.removeItem(this._key(key));
-    } catch {
-      // noop
-    }
-  }
-
-  static isSupported(): boolean {
-    return typeof window !== 'undefined' && !!window.sessionStorage;
-  }
-}
diff --git a/packages/shared/src/types/clerk.ts b/packages/shared/src/types/clerk.ts
index 348f135fd3c..df4e026d99f 100644
--- a/packages/shared/src/types/clerk.ts
+++ b/packages/shared/src/types/clerk.ts
@@ -1468,7 +1468,7 @@ export type __internal_AttemptToEnableEnvironmentSettingParams = {
     | 'TaskChooseOrganization'
     | 'useOrganizationList'
     | 'useOrganization';
-  onSuccess: () => void;
+  onClose?: () => void;
 };
 
 type GoogleOneTapRedirectUrlProps = SignInForceRedirectUrl & SignUpForceRedirectUrl;
diff --git a/packages/vue/src/composables/useOrganization.ts b/packages/vue/src/composables/useOrganization.ts
index 4a84b3fef75..a67fb17469f 100644
--- a/packages/vue/src/composables/useOrganization.ts
+++ b/packages/vue/src/composables/useOrganization.ts
@@ -63,7 +63,6 @@ export const useOrganization: UseOrganization = () => {
         value.__internal_attemptToEnableEnvironmentSetting({
           for: 'organizations',
           caller: 'useOrganization',
-          onSuccess: () => {},
         });
         unwatch();
       }

From 8b1f8480e8f68aa4b1421463b3f6568b8bf70551 Mon Sep 17 00:00:00 2001
From: Laura Beatris <48022589+LauraBeatris@users.noreply.github.com>
Date: Wed, 12 Nov 2025 19:23:19 -0300
Subject: [PATCH 14/30] Adjust focus and hover styles

---
 .../EnableOrganizationsPrompt/index.tsx       | 146 ++++++++++++------
 .../devPrompts/KeylessPrompt/index.tsx        |   7 +-
 .../src/ui/components/devPrompts/shared.tsx   |   5 +-
 3 files changed, 106 insertions(+), 52 deletions(-)

diff --git a/packages/clerk-js/src/ui/components/devPrompts/EnableOrganizationsPrompt/index.tsx b/packages/clerk-js/src/ui/components/devPrompts/EnableOrganizationsPrompt/index.tsx
index c02bc9772b3..028382a805f 100644
--- a/packages/clerk-js/src/ui/components/devPrompts/EnableOrganizationsPrompt/index.tsx
+++ b/packages/clerk-js/src/ui/components/devPrompts/EnableOrganizationsPrompt/index.tsx
@@ -63,43 +63,90 @@ const EnableOrganizationsPromptInternal = ({
                 gap: t.sizes.$2,
               })}
             >
-              {isEnabled ? (
-                <PromptSuccessIcon />
-              ) : (
-                <svg
+              <div
+                css={css`
+                  perspective: 1000px;
+                  position: relative;
+                  width: 1.25rem;
+                  height: 1.25rem;
+                  transform-style: preserve-3d;
+                  transition: transform 0.6s ease-in-out;
+                  transform: ${isEnabled ? 'rotateY(180deg)' : 'rotateY(0)'};
+
+                  @media (prefers-reduced-motion: reduce) {
+                    transition: none;
+                    transform: ${isEnabled ? 'rotateY(180deg)' : 'rotateY(0)'};
+                  }
+                `}
+              >
+                <span
+                  aria-hidden
                   css={css`
-                    width: 1.25rem;
-                    height: 1.25rem;
+                    position: absolute;
+                    width: 100%;
+                    height: 100%;
+                    backface-visibility: hidden;
+                    display: flex;
+                    align-items: center;
+                    justify-content: center;
                   `}
-                  viewBox='0 0 20 20'
-                  fill='none'
-                  xmlns='http://www.w3.org/2000/svg'
                 >
-                  <path
-                    opacity='0.2'
-                    d='M17.25 10C17.25 14.0041 14.0041 17.25 10 17.25C5.99594 17.25 2.75 14.0041 2.75 10C2.75 5.99594 5.99594 2.75 10 2.75C14.0041 2.75 17.25 5.99594 17.25 10Z'
-                    fill='#EAB308'
-                  />
-                  <path
-                    fillRule='evenodd'
-                    clipRule='evenodd'
-                    d='M10 3.5C6.41015 3.5 3.5 6.41015 3.5 10C3.5 13.5899 6.41015 16.5 10 16.5C13.5899 16.5 16.5 13.5899 16.5 10C16.5 6.41015 13.5899 3.5 10 3.5ZM2 10C2 5.58172 5.58172 2 10 2C14.4183 2 18 5.58172 18 10C18 14.4183 14.4183 18 10 18C5.58172 18 2 14.4183 2 10Z'
-                    fill='#EAB308'
-                  />
-                  <path
-                    fillRule='evenodd'
-                    clipRule='evenodd'
-                    d='M10 6C10.5523 6 11 6.44772 11 7V9C11 9.55228 10.5523 10 10 10C9.44772 10 9 9.55228 9 9V7C9 6.44772 9.44772 6 10 6Z'
-                    fill='#EAB308'
-                  />
-                  <path
-                    fillRule='evenodd'
-                    clipRule='evenodd'
-                    d='M10 12C10.5523 12 11 12.4477 11 13V13.01C11 13.5623 10.5523 14.01 10 14.01C9.44772 14.01 9 13.5623 9 13.01V13C9 12.4477 9.44772 12 10 12Z'
-                    fill='#EAB308'
+                  <svg
+                    css={css`
+                      width: 1.25rem;
+                      height: 1.25rem;
+                    `}
+                    viewBox='0 0 20 20'
+                    fill='none'
+                    xmlns='http://www.w3.org/2000/svg'
+                  >
+                    <path
+                      opacity='0.2'
+                      d='M17.25 10C17.25 14.0041 14.0041 17.25 10 17.25C5.99594 17.25 2.75 14.0041 2.75 10C2.75 5.99594 5.99594 2.75 10 2.75C14.0041 2.75 17.25 5.99594 17.25 10Z'
+                      fill='#EAB308'
+                    />
+                    <path
+                      fillRule='evenodd'
+                      clipRule='evenodd'
+                      d='M10 3.5C6.41015 3.5 3.5 6.41015 3.5 10C3.5 13.5899 6.41015 16.5 10 16.5C13.5899 16.5 16.5 13.5899 16.5 10C16.5 6.41015 13.5899 3.5 10 3.5ZM2 10C2 5.58172 5.58172 2 10 2C14.4183 2 18 5.58172 18 10C18 14.4183 14.4183 18 10 18C5.58172 18 2 14.4183 2 10Z'
+                      fill='#EAB308'
+                    />
+                    <path
+                      fillRule='evenodd'
+                      clipRule='evenodd'
+                      d='M10 6C10.5523 6 11 6.44772 11 7V9C11 9.55228 10.5523 10 10 10C9.44772 10 9 9.55228 9 9V7C9 6.44772 9.44772 6 10 6Z'
+                      fill='#EAB308'
+                    />
+                    <path
+                      fillRule='evenodd'
+                      clipRule='evenodd'
+                      d='M10 12C10.5523 12 11 12.4477 11 13V13.01C11 13.5623 10.5523 14.01 10 14.01C9.44772 14.01 9 13.5623 9 13.01V13C9 12.4477 9.44772 12 10 12Z'
+                      fill='#EAB308'
+                    />
+                  </svg>
+                </span>
+
+                <span
+                  aria-hidden
+                  css={css`
+                    position: absolute;
+                    width: 100%;
+                    height: 100%;
+                    backface-visibility: hidden;
+                    transform: rotateY(180deg);
+                    display: flex;
+                    align-items: center;
+                    justify-content: center;
+                  `}
+                >
+                  <PromptSuccessIcon
+                    css={css`
+                      width: 1.25rem;
+                      height: 1.25rem;
+                    `}
                   />
-                </svg>
-              )}
+                </span>
+              </div>
 
               <h1
                 css={[
@@ -281,7 +328,7 @@ const mainCTAStyles = css`
   width: 100%;
   height: 1.75rem;
   max-width: 14.625rem;
-  padding: 0.25rem 0.625rem;
+  padding: 0.375rem 0.625rem;
   border-radius: 0.375rem;
   font-size: 0.75rem;
   font-weight: 500;
@@ -292,15 +339,16 @@ const mainCTAStyles = css`
   user-select: none;
   min-width: 100%;
   color: white;
-  transition:
-    background 150ms cubic-bezier(0.2, 0.61, 0.1, 1),
-    box-shadow 150ms cubic-bezier(0.2, 0.61, 0.1, 1),
-    border-color 150ms cubic-bezier(0.2, 0.61, 0.1, 1);
+  transition: all 120ms ease-in-out;
 
   &:disabled {
     opacity: 0.6;
     cursor: not-allowed;
   }
+
+  &:focus-visible {
+    outline: none;
+  }
 `;
 
 type PromptButtonVariant = 'solid' | 'outline';
@@ -330,10 +378,12 @@ const PromptButton = ({ variant = 'solid', ...props }: PromptButtonProps) => {
     }
 
     &:focus:not(:disabled) {
-      background: linear-gradient(180deg, rgba(0, 0, 0, 0) 30.5%, rgba(0, 0, 0, 0.15) 100%), #5f5f5f;
+      border: 1px solid rgba(115, 115, 115);
+      background: linear-gradient(180deg, rgba(0, 0, 0, 0) 30.5%, rgba(0, 0, 0, 0.05) 100%), #454545;
       box-shadow:
-        0 0 3px 0 rgba(253, 224, 71, 0) inset,
-        0 0 0 1px rgba(255, 255, 255, 0.04) inset,
+        0 0 0 4px rgba(255, 255, 255, 0.05),
+        0 0 3px 0 rgba(255, 255, 255, 0) inset,
+        0 0 0 1px rgba(255, 255, 255, 0.25) inset,
         0 1px 0 0 rgba(255, 255, 255, 0.04) inset,
         0 0 0 1px rgba(0, 0, 0, 0.12),
         0 1.5px 2px 0 rgba(0, 0, 0, 0.48);
@@ -353,14 +403,14 @@ const PromptButton = ({ variant = 'solid', ...props }: PromptButtonProps) => {
         0px 1.5px 2px 0px rgba(0, 0, 0, 0.48);
     }
 
+    &:hover:not(:disabled) {
+      border: 1px solid rgba(115, 115, 115);
+    }
+
     &:focus:not(:disabled) {
-      box-shadow:
-        0px 0px 6px 0px rgba(255, 255, 255, 0.04) inset,
-        0px 0px 0px 1px rgba(255, 255, 255, 0.04) inset,
-        0px 1px 0px 0px rgba(255, 255, 255, 0.04) inset,
-        0px 0px 0px 1px rgba(0, 0, 0, 0.1),
-        0px 1.5px 2px 0px rgba(0, 0, 0, 0.48);
-      border-color: rgba(118, 118, 132, 0.4);
+      border: 1px solid rgba(115, 115, 115);
+
+      box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.05);
     }
   `;
 
diff --git a/packages/clerk-js/src/ui/components/devPrompts/KeylessPrompt/index.tsx b/packages/clerk-js/src/ui/components/devPrompts/KeylessPrompt/index.tsx
index 04eee749bd9..eaa764f2529 100644
--- a/packages/clerk-js/src/ui/components/devPrompts/KeylessPrompt/index.tsx
+++ b/packages/clerk-js/src/ui/components/devPrompts/KeylessPrompt/index.tsx
@@ -178,7 +178,12 @@ const KeylessPromptInternal = (_props: KeylessPromptProps) => {
             })}
           >
             {success ? (
-              <PromptSuccessIcon />
+              <PromptSuccessIcon
+                css={css`
+                  width: 1rem;
+                  height: 1rem;
+                `}
+              />
             ) : claimed ? (
               <svg
                 width='1rem'
diff --git a/packages/clerk-js/src/ui/components/devPrompts/shared.tsx b/packages/clerk-js/src/ui/components/devPrompts/shared.tsx
index 6c25069288a..9aa207029e0 100644
--- a/packages/clerk-js/src/ui/components/devPrompts/shared.tsx
+++ b/packages/clerk-js/src/ui/components/devPrompts/shared.tsx
@@ -55,11 +55,10 @@ export const basePromptElementStyles = css`
   text-decoration: none;
 `;
 
-export function PromptSuccessIcon() {
+export function PromptSuccessIcon(props: React.ComponentProps<'svg'>) {
   return (
     <svg
-      width='1rem'
-      height='1rem'
+      {...props}
       viewBox='0 0 16 17'
       fill='none'
       aria-hidden

From 21cfefff5474bf0a199b3f41cc8e3220b4ed40bd Mon Sep 17 00:00:00 2001
From: Laura Beatris <48022589+LauraBeatris@users.noreply.github.com>
Date: Wed, 12 Nov 2025 19:41:23 -0300
Subject: [PATCH 15/30] Extract Dashboard URL to display within anchor tag

---
 packages/clerk-js/src/core/clerk.ts           |  2 +-
 packages/clerk-js/src/ui/Components.tsx       |  2 +-
 .../EnableOrganizationsPrompt/index.tsx       | 44 ++++++++++++++++---
 .../devPrompts/KeylessPrompt/index.tsx        | 21 +--------
 .../src/ui/components/devPrompts/shared.tsx   | 18 ++++++++
 packages/shared/src/organization.ts           |  1 -
 6 files changed, 60 insertions(+), 28 deletions(-)

diff --git a/packages/clerk-js/src/core/clerk.ts b/packages/clerk-js/src/core/clerk.ts
index 84d8a3c586c..a17c1289ce0 100644
--- a/packages/clerk-js/src/core/clerk.ts
+++ b/packages/clerk-js/src/core/clerk.ts
@@ -752,7 +752,7 @@ export class Clerk implements ClerkInterface {
   ): { status: 'enabled' | 'prompt-shown' } => {
     const { for: setting, caller } = params;
 
-    // If not in development instance, return enabled status in order to not open the in-app prompt
+    // If not in development instance, return enabled status in order to not open the prompt
     if (this.#instanceType !== 'development') {
       return { status: 'enabled' };
     }
diff --git a/packages/clerk-js/src/ui/Components.tsx b/packages/clerk-js/src/ui/Components.tsx
index 757c681d351..6f3be02ea95 100644
--- a/packages/clerk-js/src/ui/Components.tsx
+++ b/packages/clerk-js/src/ui/Components.tsx
@@ -353,7 +353,7 @@ const Components = (props: ComponentsProps) => {
 
     componentsControls.openModal = (name, props) => {
       // Prevent opening enableOrganizations prompt if it's already open
-      // to avoid duplicate mounting when component is called multiple times
+      // It should open the first call and ignore the subsequent calls
       if (name === 'enableOrganizationsPrompt') {
         setState(prev => {
           // Modal is already open, don't update state
diff --git a/packages/clerk-js/src/ui/components/devPrompts/EnableOrganizationsPrompt/index.tsx b/packages/clerk-js/src/ui/components/devPrompts/EnableOrganizationsPrompt/index.tsx
index 028382a805f..47331040fbd 100644
--- a/packages/clerk-js/src/ui/components/devPrompts/EnableOrganizationsPrompt/index.tsx
+++ b/packages/clerk-js/src/ui/components/devPrompts/EnableOrganizationsPrompt/index.tsx
@@ -2,15 +2,27 @@ import { useClerk } from '@clerk/shared/react';
 import type { __internal_EnableOrganizationsPromptProps } from '@clerk/shared/types';
 // eslint-disable-next-line no-restricted-imports
 import { css } from '@emotion/react';
-import { useState } from 'react';
+import { useMemo, useState } from 'react';
 
 import { Modal } from '@/ui/elements/Modal';
 import { InternalThemeProvider } from '@/ui/styledSystem';
 
 import { DevTools } from '../../../../core/resources/DevTools';
+import type { Environment } from '../../../../core/resources/Environment';
 import { Flex } from '../../../customizables';
 import { Portal } from '../../../elements/Portal';
-import { basePromptElementStyles, PromptContainer, PromptSuccessIcon } from '../shared';
+import { basePromptElementStyles, handleDashboardUrlParsing, PromptContainer, PromptSuccessIcon } from '../shared';
+
+/**
+ * If we cannot reconstruct the url properly, then simply fallback to Clerk Dashboard
+ */
+function withLastActiveFallback(cb: () => string): string {
+  try {
+    return cb();
+  } catch {
+    return 'https://dashboard.clerk.com/last-active?path=organization-settings';
+  }
+}
 
 const EnableOrganizationsPromptInternal = ({
   caller,
@@ -21,6 +33,28 @@ const EnableOrganizationsPromptInternal = ({
   const [isLoading, setIsLoading] = useState(false);
   const [isEnabled, setIsEnabled] = useState(false);
 
+  // @ts-expect-error - __unstable__environment is not typed
+  const environment = clerk?.__unstable__environment as Environment | undefined;
+
+  const organizationsDashboardUrl = useMemo(() => {
+    return withLastActiveFallback(() => {
+      const currentUrl = window.location.href;
+      try {
+        const redirectUrlParts = handleDashboardUrlParsing(currentUrl);
+        const url = new URL(
+          `${redirectUrlParts.baseDomain}/apps/${redirectUrlParts.appId}/instances/${redirectUrlParts.instanceId}/organizations`,
+        );
+        return url.href;
+      } catch {
+        if (!environment?.id) {
+          throw new Error('Cannot construct dashboard URL');
+        }
+
+        return 'https://dashboard.clerk.com/last-active?path=organization-settings';
+      }
+    });
+  }, [environment?.id]);
+
   const handleEnableOrganizations = () => {
     setIsLoading(true);
 
@@ -181,7 +215,8 @@ const EnableOrganizationsPromptInternal = ({
                     `,
                   ]}
                 >
-                  The Organizations feature has been enabled for your application. You can manage or rename it in your{' '}
+                  The Organizations feature has been enabled for your application. A default organization named &quot;My
+                  Organization&quot; was created automatically. You can manage or rename it in your{' '}
                   <a
                     css={[
                       basePromptElementStyles,
@@ -193,8 +228,7 @@ const EnableOrganizationsPromptInternal = ({
                         font-size: 0.8125rem;
                       `,
                     ]}
-                    /* TODO - Generate URL to Dashboard */
-                    href='https://clerk.com/docs/guides/organizations'
+                    href={organizationsDashboardUrl}
                     target='_blank'
                     rel='noopener noreferrer'
                     tabIndex={-1}
diff --git a/packages/clerk-js/src/ui/components/devPrompts/KeylessPrompt/index.tsx b/packages/clerk-js/src/ui/components/devPrompts/KeylessPrompt/index.tsx
index eaa764f2529..97c4734609f 100644
--- a/packages/clerk-js/src/ui/components/devPrompts/KeylessPrompt/index.tsx
+++ b/packages/clerk-js/src/ui/components/devPrompts/KeylessPrompt/index.tsx
@@ -8,7 +8,7 @@ import { createPortal } from 'react-dom';
 import { Flex, Link } from '../../../customizables';
 import { Portal } from '../../../elements/Portal';
 import { InternalThemeProvider } from '../../../styledSystem';
-import { basePromptElementStyles, PromptContainer, PromptSuccessIcon } from '../shared';
+import { basePromptElementStyles, handleDashboardUrlParsing, PromptContainer, PromptSuccessIcon } from '../shared';
 import { ClerkLogoIcon } from './ClerkLogoIcon';
 import { KeySlashIcon } from './KeySlashIcon';
 import { useRevalidateEnvironment } from './use-revalidate-environment';
@@ -34,25 +34,6 @@ function withLastActiveFallback(cb: () => string): string {
   }
 }
 
-function handleDashboardUrlParsing(url: string) {
-  // make sure this is a valid url
-  const __url = new URL(url);
-  const regex = /^https?:\/\/(.*?)\/apps\/app_(.+?)\/instances\/ins_(.+?)(?:\/.*)?$/;
-
-  const match = __url.href.match(regex);
-
-  if (!match) {
-    throw new Error('invalid value dashboard url structure');
-  }
-
-  // Extracting base domain, app ID with prefix, and instanceId with prefix
-  return {
-    baseDomain: `https://${match[1]}`,
-    appId: `app_${match[2]}`,
-    instanceId: `ins_${match[3]}`,
-  };
-}
-
 const KeylessPromptInternal = (_props: KeylessPromptProps) => {
   const { isSignedIn } = useUser();
   const [isExpanded, setIsExpanded] = useState(false);
diff --git a/packages/clerk-js/src/ui/components/devPrompts/shared.tsx b/packages/clerk-js/src/ui/components/devPrompts/shared.tsx
index 9aa207029e0..42618e60646 100644
--- a/packages/clerk-js/src/ui/components/devPrompts/shared.tsx
+++ b/packages/clerk-js/src/ui/components/devPrompts/shared.tsx
@@ -81,3 +81,21 @@ export function PromptSuccessIcon(props: React.ComponentProps<'svg'>) {
     </svg>
   );
 }
+
+export function handleDashboardUrlParsing(url: string) {
+  const __url = new URL(url);
+  const regex = /^https?:\/\/(.*?)\/apps\/app_(.+?)\/instances\/ins_(.+?)(?:\/.*)?$/;
+
+  const match = __url.href.match(regex);
+
+  if (!match) {
+    throw new Error('Invalid value Dashboard URL structure');
+  }
+
+  // Extracting base domain, app ID with prefix, and instanceId with prefix
+  return {
+    baseDomain: `https://${match[1]}`,
+    appId: `app_${match[2]}`,
+    instanceId: `ins_${match[3]}`,
+  };
+}
diff --git a/packages/shared/src/organization.ts b/packages/shared/src/organization.ts
index 61667ac9a36..ee2b58f0603 100644
--- a/packages/shared/src/organization.ts
+++ b/packages/shared/src/organization.ts
@@ -38,7 +38,6 @@ export function useAttemptToEnableOrganizations(caller: 'useOrganization' | 'use
     clerk.__internal_attemptToEnableEnvironmentSetting({
       for: 'organizations',
       caller,
-      onSuccess: () => {},
     });
   }, [clerk, caller]);
 }

From 5ec67b0ebd13fb5f65e53bc681f4d2bcbb75b677 Mon Sep 17 00:00:00 2001
From: Laura Beatris <48022589+LauraBeatris@users.noreply.github.com>
Date: Thu, 13 Nov 2025 11:36:07 -0300
Subject: [PATCH 16/30] Bump bundlewatch

---
 packages/clerk-js/bundlewatch.config.json | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/packages/clerk-js/bundlewatch.config.json b/packages/clerk-js/bundlewatch.config.json
index 4b3ceae4b8c..4ff3d5c3ca7 100644
--- a/packages/clerk-js/bundlewatch.config.json
+++ b/packages/clerk-js/bundlewatch.config.json
@@ -1,10 +1,10 @@
 {
   "files": [
     { "path": "./dist/clerk.js", "maxSize": "840KB" },
-    { "path": "./dist/clerk.browser.js", "maxSize": "81KB" },
-    { "path": "./dist/clerk.channel.browser.js", "maxSize": "81KB" },
-    { "path": "./dist/clerk.legacy.browser.js", "maxSize": "123KB" },
-    { "path": "./dist/clerk.headless*.js", "maxSize": "65KB" },
+    { "path": "./dist/clerk.browser.js", "maxSize": "82KB" },
+    { "path": "./dist/clerk.channel.browser.js", "maxSize": "82KB" },
+    { "path": "./dist/clerk.legacy.browser.js", "maxSize": "124KB" },
+    { "path": "./dist/clerk.headless*.js", "maxSize": "64KB" },
     { "path": "./dist/ui-common*.js", "maxSize": "117.1KB" },
     { "path": "./dist/ui-common*.legacy.*.js", "maxSize": "120.1KB" },
     { "path": "./dist/vendors*.js", "maxSize": "47KB" },

From 4ec5e29875f818e53fb1c4589f2bd077c675d7b0 Mon Sep 17 00:00:00 2001
From: Laura Beatris <48022589+LauraBeatris@users.noreply.github.com>
Date: Thu, 13 Nov 2025 13:44:18 -0300
Subject: [PATCH 17/30] Add separate chunk on bundlwatch

---
 packages/clerk-js/bundlewatch.config.json | 9 +++++----
 1 file changed, 5 insertions(+), 4 deletions(-)

diff --git a/packages/clerk-js/bundlewatch.config.json b/packages/clerk-js/bundlewatch.config.json
index 4ff3d5c3ca7..f3d49dcf059 100644
--- a/packages/clerk-js/bundlewatch.config.json
+++ b/packages/clerk-js/bundlewatch.config.json
@@ -1,10 +1,10 @@
 {
   "files": [
     { "path": "./dist/clerk.js", "maxSize": "840KB" },
-    { "path": "./dist/clerk.browser.js", "maxSize": "82KB" },
-    { "path": "./dist/clerk.channel.browser.js", "maxSize": "82KB" },
-    { "path": "./dist/clerk.legacy.browser.js", "maxSize": "124KB" },
-    { "path": "./dist/clerk.headless*.js", "maxSize": "64KB" },
+    { "path": "./dist/clerk.browser.js", "maxSize": "81KB" },
+    { "path": "./dist/clerk.channel.browser.js", "maxSize": "81KB" },
+    { "path": "./dist/clerk.legacy.browser.js", "maxSize": "123KB" },
+    { "path": "./dist/clerk.headless*.js", "maxSize": "63KB" },
     { "path": "./dist/ui-common*.js", "maxSize": "117.1KB" },
     { "path": "./dist/ui-common*.legacy.*.js", "maxSize": "120.1KB" },
     { "path": "./dist/vendors*.js", "maxSize": "47KB" },
@@ -23,6 +23,7 @@
     { "path": "./dist/onetap*.js", "maxSize": "1KB" },
     { "path": "./dist/waitlist*.js", "maxSize": "1.5KB" },
     { "path": "./dist/keylessPrompt*.js", "maxSize": "6.5KB" },
+    { "path": "./dist/enableOrganizationsPrompt*.js", "maxSize": "6.5KB" },
     { "path": "./dist/pricingTable*.js", "maxSize": "4.02KB" },
     { "path": "./dist/checkout*.js", "maxSize": "8.82KB" },
     { "path": "./dist/up-billing-page*.js", "maxSize": "3.0KB" },

From 3537f0b881b2b923786454b8e482e36b48443e24 Mon Sep 17 00:00:00 2001
From: Laura Beatris <48022589+LauraBeatris@users.noreply.github.com>
Date: Thu, 13 Nov 2025 16:26:52 -0300
Subject: [PATCH 18/30] Refactor UI to include personal account toogle

---
 .../EnableOrganizationsPrompt/index.tsx       | 174 +++++++++++++++---
 1 file changed, 152 insertions(+), 22 deletions(-)

diff --git a/packages/clerk-js/src/ui/components/devPrompts/EnableOrganizationsPrompt/index.tsx b/packages/clerk-js/src/ui/components/devPrompts/EnableOrganizationsPrompt/index.tsx
index 47331040fbd..9124ae39526 100644
--- a/packages/clerk-js/src/ui/components/devPrompts/EnableOrganizationsPrompt/index.tsx
+++ b/packages/clerk-js/src/ui/components/devPrompts/EnableOrganizationsPrompt/index.tsx
@@ -2,10 +2,10 @@ import { useClerk } from '@clerk/shared/react';
 import type { __internal_EnableOrganizationsPromptProps } from '@clerk/shared/types';
 // eslint-disable-next-line no-restricted-imports
 import { css } from '@emotion/react';
-import { useMemo, useState } from 'react';
+import { forwardRef, useMemo, useState } from 'react';
 
 import { Modal } from '@/ui/elements/Modal';
-import { InternalThemeProvider } from '@/ui/styledSystem';
+import { common, InternalThemeProvider } from '@/ui/styledSystem';
 
 import { DevTools } from '../../../../core/resources/DevTools';
 import type { Environment } from '../../../../core/resources/Environment';
@@ -32,6 +32,7 @@ const EnableOrganizationsPromptInternal = ({
   const clerk = useClerk();
   const [isLoading, setIsLoading] = useState(false);
   const [isEnabled, setIsEnabled] = useState(false);
+  const [allowPersonalAccount, setAllowPersonalAccount] = useState(false);
 
   // @ts-expect-error - __unstable__environment is not typed
   const environment = clerk?.__unstable__environment as Environment | undefined;
@@ -70,6 +71,8 @@ const EnableOrganizationsPromptInternal = ({
       });
   };
 
+  const isComponent = !caller.startsWith('use');
+
   return (
     <Portal>
       <Modal
@@ -80,6 +83,7 @@ const EnableOrganizationsPromptInternal = ({
           sx={() => ({
             display: 'flex',
             flexDirection: 'column',
+            maxWidth: '30rem',
           })}
         >
           <Flex
@@ -200,7 +204,6 @@ const EnableOrganizationsPromptInternal = ({
               direction='col'
               sx={t => ({
                 gap: t.sizes.$0x5,
-                maxWidth: '18.75rem',
               })}
             >
               {isEnabled ? (
@@ -211,7 +214,7 @@ const EnableOrganizationsPromptInternal = ({
                       color: #b4b4b4;
                       font-size: 0.8125rem;
                       font-weight: 400;
-                      line-height: 1.23;
+                      line-height: 1.3;
                     `,
                   ]}
                 >
@@ -224,7 +227,7 @@ const EnableOrganizationsPromptInternal = ({
                         color: #a8a8ff;
                         font-size: inherit;
                         font-weight: 500;
-                        line-height: 1.5;
+                        line-height: 1.3;
                         font-size: 0.8125rem;
                       `,
                     ]}
@@ -250,20 +253,22 @@ const EnableOrganizationsPromptInternal = ({
                       `,
                     ]}
                   >
-                    To use{' '}
+                    To use the{' '}
                     <code
                       css={[
                         basePromptElementStyles,
                         css`
+                          font-size: 0.75rem;
                           color: white;
                           font-family: monospace;
                           line-height: 1.23;
                         `,
                       ]}
                     >
-                      {caller}
-                    </code>
-                    , you&apos;ll need to enable the Organizations feature for your app first.
+                      {isComponent ? `<${caller} />` : caller}
+                    </code>{' '}
+                    {isComponent ? 'component' : 'hook'}, you&apos;ll need to enable the Organizations feature for your
+                    app first.
                   </span>
 
                   <a
@@ -287,6 +292,16 @@ const EnableOrganizationsPromptInternal = ({
                 </>
               )}
             </Flex>
+
+            {!isEnabled && (
+              <Flex sx={t => ({ marginTop: t.sizes.$3 })}>
+                <AllowPersonalAccountSwitch
+                  checked={allowPersonalAccount}
+                  onChange={() => setAllowPersonalAccount(!allowPersonalAccount)}
+                  isDisabled={false}
+                />
+              </Flex>
+            )}
           </Flex>
 
           <span
@@ -299,30 +314,22 @@ const EnableOrganizationsPromptInternal = ({
           />
 
           <Flex
-            direction='col'
             justify='center'
             sx={t => ({
               padding: `${t.sizes.$4} ${t.sizes.$6}`,
               gap: t.sizes.$3,
+              justifyContent: 'flex-end',
             })}
           >
             {isEnabled ? (
               <PromptButton
-                variant='outline'
+                variant='solid'
                 onClick={() => onSuccess?.()}
               >
                 Continue
               </PromptButton>
             ) : (
               <>
-                <PromptButton
-                  variant='solid'
-                  onClick={handleEnableOrganizations}
-                  disabled={isLoading}
-                >
-                  Enable Organizations
-                </PromptButton>
-
                 <PromptButton
                   variant='outline'
                   onClick={() => {
@@ -332,6 +339,14 @@ const EnableOrganizationsPromptInternal = ({
                 >
                   I&apos;ll remove it myself
                 </PromptButton>
+
+                <PromptButton
+                  variant='solid'
+                  onClick={handleEnableOrganizations}
+                  disabled={isLoading}
+                >
+                  Enable Organizations
+                </PromptButton>
               </>
             )}
           </Flex>
@@ -359,9 +374,7 @@ const mainCTAStyles = css`
   display: flex;
   align-items: center;
   justify-content: center;
-  width: 100%;
   height: 1.75rem;
-  max-width: 14.625rem;
   padding: 0.375rem 0.625rem;
   border-radius: 0.375rem;
   font-size: 0.75rem;
@@ -371,7 +384,6 @@ const mainCTAStyles = css`
   text-shadow: 0px 1px 2px rgba(0, 0, 0, 0.32);
   white-space: nowrap;
   user-select: none;
-  min-width: 100%;
   color: white;
   transition: all 120ms ease-in-out;
 
@@ -456,3 +468,121 @@ const PromptButton = ({ variant = 'solid', ...props }: PromptButtonProps) => {
     />
   );
 };
+
+type AllowPersonalAccountSwitchProps = {
+  checked: boolean;
+  isDisabled: boolean;
+  onChange: (checked: boolean) => void;
+};
+
+const AllowPersonalAccountSwitch = forwardRef<HTMLDivElement, AllowPersonalAccountSwitchProps>(
+  ({ checked, onChange, isDisabled = false }, ref) => {
+    const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+      if (isDisabled) {
+        return;
+      }
+
+      onChange?.(e.target.checked);
+    };
+
+    return (
+      <Flex
+        ref={ref}
+        direction='row'
+        align='center'
+        as='label'
+        gap={2}
+        sx={t => ({
+          isolation: 'isolate',
+          width: 'fit-content',
+          '&:has(input:focus-visible) > input + span': {
+            ...common.focusRingStyles(t),
+          },
+        })}
+      >
+        {/* The order of the elements is important here for the focus ring to work. The input is visually hidden, so the focus ring is applied to the span. */}
+        <input
+          type='checkbox'
+          role='switch'
+          disabled={isDisabled}
+          checked={checked}
+          onChange={handleChange}
+          tabIndex={-1}
+          style={{
+            ...common.visuallyHidden(),
+          }}
+        />
+        <Flex
+          as='span'
+          data-checked={checked}
+          sx={t => ({
+            minWidth: t.sizes.$7,
+            alignSelf: 'flex-start',
+            height: t.sizes.$4,
+            alignItems: 'center',
+            position: 'relative',
+            borderColor: '#DBDBE0',
+            backgroundColor: checked ? '#DBDBE0' : t.colors.$primary500,
+            borderRadius: 999,
+            transition: 'background-color 0.2s',
+            opacity: isDisabled ? 0.6 : 1,
+            cursor: isDisabled ? 'not-allowed' : 'pointer',
+            outline: 'none',
+            boxSizing: 'border-box',
+            boxShadow:
+              '0px 0px 6px 0px rgba(255, 255, 255, 0.04) inset, 0px 0px 0px 1px rgba(255, 255, 255, 0.04) inset, 0px 1px 0px 0px rgba(255, 255, 255, 0.04) inset, 0px 0px 0px 1px rgba(0, 0, 0, 0.1)',
+          })}
+        >
+          <Flex
+            sx={t => ({
+              position: 'absolute',
+              left: t.sizes.$0x5,
+              width: t.sizes.$3,
+              height: t.sizes.$3,
+              borderRadius: '50%',
+              backgroundColor: 'white',
+              boxShadow: t.shadows.$switchControl,
+              transform: `translateX(${checked ? t.sizes.$3 : 0})`,
+              transition: 'transform 0.2s',
+              zIndex: 1,
+            })}
+          />
+        </Flex>
+
+        <Flex
+          direction='col'
+          gap={1}
+        >
+          <p
+            css={[
+              basePromptElementStyles,
+              css`
+                font-size: 0.875rem;
+                font-weight: 400;
+                line-height: 1.23;
+                color: white;
+              `,
+            ]}
+          >
+            Allow personal account
+          </p>
+
+          <span
+            css={[
+              basePromptElementStyles,
+              css`
+                color: #b4b4b4;
+                font-size: 0.8125rem;
+                font-weight: 400;
+                line-height: 1.23;
+              `,
+            ]}
+          >
+            This is an uncommon setting, meant for applications that sell to both organizations and individual users.
+            Most B2B applications require users to be part of an organization, and should keep this setting disabled.
+          </span>
+        </Flex>
+      </Flex>
+    );
+  },
+);

From 6fdbd5713c38ff558a582d668c3c25a1b0dfdef4 Mon Sep 17 00:00:00 2001
From: Laura Beatris <48022589+LauraBeatris@users.noreply.github.com>
Date: Thu, 13 Nov 2025 16:33:27 -0300
Subject: [PATCH 19/30] Add changeset

---
 .changeset/flat-ravens-call.md      | 10 ++++++++++
 packages/clerk-js/src/core/clerk.ts |  2 ++
 2 files changed, 12 insertions(+)
 create mode 100644 .changeset/flat-ravens-call.md

diff --git a/.changeset/flat-ravens-call.md b/.changeset/flat-ravens-call.md
new file mode 100644
index 00000000000..4182328bd63
--- /dev/null
+++ b/.changeset/flat-ravens-call.md
@@ -0,0 +1,10 @@
+---
+'@clerk/clerk-js': minor
+'@clerk/shared': minor
+'@clerk/clerk-react': minor
+'@clerk/vue': minor
+---
+
+Introduce in-app development prompt to enable the Organizations feature
+
+In development instances, when using organization components or hooks for the first time, developers will see a prompt to enable the Organizations feature directly in their app, eliminating the need to visit the Clerk Dashboard.
diff --git a/packages/clerk-js/src/core/clerk.ts b/packages/clerk-js/src/core/clerk.ts
index a17c1289ce0..0ad3c338c54 100644
--- a/packages/clerk-js/src/core/clerk.ts
+++ b/packages/clerk-js/src/core/clerk.ts
@@ -782,6 +782,8 @@ export class Clerk implements ClerkInterface {
     void this.#componentControls
       .ensureMounted({ preloadHint: 'EnableOrganizationsPrompt' })
       .then(controls => controls.openModal('enableOrganizationsPrompt', props || {}));
+
+    this.telemetry?.record(eventPrebuiltComponentMounted('EnableOrganizationsPrompt', props));
   };
 
   public __internal_closeEnableOrganizationsPrompt = (): void => {

From 4433e018afe38ec8c9e058cce83bf2f5f5c3a00c Mon Sep 17 00:00:00 2001
From: Laura Beatris <48022589+LauraBeatris@users.noreply.github.com>
Date: Mon, 17 Nov 2025 19:23:19 -0300
Subject: [PATCH 20/30] Send default value for `allow_personal_account` option

---
 .../components/devPrompts/EnableOrganizationsPrompt/index.tsx | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/packages/clerk-js/src/ui/components/devPrompts/EnableOrganizationsPrompt/index.tsx b/packages/clerk-js/src/ui/components/devPrompts/EnableOrganizationsPrompt/index.tsx
index 9124ae39526..1fc9931be65 100644
--- a/packages/clerk-js/src/ui/components/devPrompts/EnableOrganizationsPrompt/index.tsx
+++ b/packages/clerk-js/src/ui/components/devPrompts/EnableOrganizationsPrompt/index.tsx
@@ -62,11 +62,13 @@ const EnableOrganizationsPromptInternal = ({
     void new DevTools()
       .__internal_enableEnvironmentSetting({
         enable_organizations: true,
+        allow_personal_account: allowPersonalAccount,
       })
       .then(() => {
         setIsEnabled(true);
+        setIsLoading(false);
       })
-      .finally(() => {
+      .catch(() => {
         setIsLoading(false);
       });
   };

From c9eb8932b20e86e79b85e48eb27c89a7af80c58f Mon Sep 17 00:00:00 2001
From: Laura Beatris <48022589+LauraBeatris@users.noreply.github.com>
Date: Mon, 17 Nov 2025 19:23:35 -0300
Subject: [PATCH 21/30] Adjust bundlwatch

---
 packages/clerk-js/bundlewatch.config.json |   8 +-
 packages/shared/src/types/devtools.ts     |   1 +
 pnpm-lock.yaml                            | 304 +---------------------
 3 files changed, 10 insertions(+), 303 deletions(-)

diff --git a/packages/clerk-js/bundlewatch.config.json b/packages/clerk-js/bundlewatch.config.json
index f3d49dcf059..e477bfe90cd 100644
--- a/packages/clerk-js/bundlewatch.config.json
+++ b/packages/clerk-js/bundlewatch.config.json
@@ -1,10 +1,10 @@
 {
   "files": [
     { "path": "./dist/clerk.js", "maxSize": "840KB" },
-    { "path": "./dist/clerk.browser.js", "maxSize": "81KB" },
-    { "path": "./dist/clerk.channel.browser.js", "maxSize": "81KB" },
-    { "path": "./dist/clerk.legacy.browser.js", "maxSize": "123KB" },
-    { "path": "./dist/clerk.headless*.js", "maxSize": "63KB" },
+    { "path": "./dist/clerk.browser.js", "maxSize": "83KB" },
+    { "path": "./dist/clerk.channel.browser.js", "maxSize": "83KB" },
+    { "path": "./dist/clerk.legacy.browser.js", "maxSize": "124KB" },
+    { "path": "./dist/clerk.headless*.js", "maxSize": "65KB" },
     { "path": "./dist/ui-common*.js", "maxSize": "117.1KB" },
     { "path": "./dist/ui-common*.legacy.*.js", "maxSize": "120.1KB" },
     { "path": "./dist/vendors*.js", "maxSize": "47KB" },
diff --git a/packages/shared/src/types/devtools.ts b/packages/shared/src/types/devtools.ts
index e699bd7010e..9489daa0588 100644
--- a/packages/shared/src/types/devtools.ts
+++ b/packages/shared/src/types/devtools.ts
@@ -2,6 +2,7 @@ import type { ClerkResource } from './resource';
 
 export type EnableEnvironmentSettingParams = {
   enable_organizations: boolean;
+  allow_personal_account: boolean;
 };
 
 /**
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 44854c5622a..6f65b6e000b 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -3784,9 +3784,6 @@ packages:
   '@oxc-project/types@0.94.0':
     resolution: {integrity: sha512-+UgQT/4o59cZfH6Cp7G0hwmqEQ0wE+AdIwhikdwnhWI9Dp8CgSY081+Q3O67/wq3VJu8mgUEB93J9EHHn70fOw==}
 
-  '@oxc-project/types@0.96.0':
-    resolution: {integrity: sha512-r/xkmoXA0xEpU6UGtn18CNVjXH6erU3KCpCDbpLmbVxBFor1U9MqN5Z2uMmCHJuXjJzlnDR+hWY+yPoLo8oHDw==}
-
   '@oxc-transform/binding-android-arm64@0.87.0':
     resolution: {integrity: sha512-B7W6J8T9cS054LUGLfYkYz8bz5+t+4yPftZ67Bn6MJ03okMLnbbEfm1bID1tqcP5tJwMurTILVy/dQfDYDcMgQ==}
     engines: {node: '>=14.0.0'}
@@ -4255,80 +4252,30 @@ packages:
     cpu: [arm64]
     os: [android]
 
-  '@rolldown/binding-android-arm64@1.0.0-beta.47':
-    resolution: {integrity: sha512-vPP9/MZzESh9QtmvQYojXP/midjgkkc1E4AdnPPAzQXo668ncHJcVLKjJKzoBdsQmaIvNjrMdsCwES8vTQHRQw==}
-    engines: {node: ^20.19.0 || >=22.12.0}
-    cpu: [arm64]
-    os: [android]
-
   '@rolldown/binding-darwin-arm64@1.0.0-beta.43':
     resolution: {integrity: sha512-kuVWnZsE4vEjMF/10SbSUyzucIW2zmdsqFghYMqy+fsjXnRHg0luTU6qWF8IqJf4Cbpm9NEZRnjIEPpAbdiSNQ==}
     engines: {node: ^20.19.0 || >=22.12.0}
     cpu: [arm64]
     os: [darwin]
 
-  '@rolldown/binding-darwin-arm64@1.0.0-beta.47':
-    resolution: {integrity: sha512-Lc3nrkxeaDVCVl8qR3qoxh6ltDZfkQ98j5vwIr5ALPkgjZtDK4BGCrrBoLpGVMg+csWcaqUbwbKwH5yvVa0oOw==}
-    engines: {node: ^20.19.0 || >=22.12.0}
-    cpu: [arm64]
-    os: [darwin]
-
-  '@rolldown/binding-darwin-arm64@1.0.0-beta.9-commit.d91dfb5':
-    resolution: {integrity: sha512-Mp0/gqiPdepHjjVm7e0yL1acWvI0rJVVFQEADSezvAjon9sjQ7CEg9JnXICD4B1YrPmN9qV/e7cQZCp87tTV4w==}
-    cpu: [arm64]
-    os: [darwin]
-
   '@rolldown/binding-darwin-x64@1.0.0-beta.43':
     resolution: {integrity: sha512-u9Ps4sh6lcmJ3vgLtyEg/x4jlhI64U0mM93Ew+tlfFdLDe7yKyA+Fe80cpr2n1mNCeZXrvTSbZluKpXQ0GxLjw==}
     engines: {node: ^20.19.0 || >=22.12.0}
     cpu: [x64]
     os: [darwin]
 
-  '@rolldown/binding-darwin-x64@1.0.0-beta.47':
-    resolution: {integrity: sha512-eBYxQDwP0O33plqNVqOtUHqRiSYVneAknviM5XMawke3mwMuVlAsohtOqEjbCEl/Loi/FWdVeks5WkqAkzkYWQ==}
-    engines: {node: ^20.19.0 || >=22.12.0}
-    cpu: [x64]
-    os: [darwin]
-
-  '@rolldown/binding-darwin-x64@1.0.0-beta.9-commit.d91dfb5':
-    resolution: {integrity: sha512-40re4rMNrsi57oavRzIOpRGmg3QRlW6Ea8Q3znaqgOuJuKVrrm2bIQInTfkZJG7a4/5YMX7T951d0+toGLTdCA==}
-    cpu: [x64]
-    os: [darwin]
-
   '@rolldown/binding-freebsd-x64@1.0.0-beta.43':
     resolution: {integrity: sha512-h9lUtVtXgfbk/tnicMpbFfZ3DJvk5Zn2IvmlC1/e0+nUfwoc/TFqpfrRRqcNBXk/e+xiWMSKv6b0MF8N+Rtvlg==}
     engines: {node: ^20.19.0 || >=22.12.0}
     cpu: [x64]
     os: [freebsd]
 
-  '@rolldown/binding-freebsd-x64@1.0.0-beta.47':
-    resolution: {integrity: sha512-Ns+kgp2+1Iq/44bY/Z30DETUSiHY7ZuqaOgD5bHVW++8vme9rdiWsN4yG4rRPXkdgzjvQ9TDHmZZKfY4/G11AA==}
-    engines: {node: ^20.19.0 || >=22.12.0}
-    cpu: [x64]
-    os: [freebsd]
-
-  '@rolldown/binding-freebsd-x64@1.0.0-beta.9-commit.d91dfb5':
-    resolution: {integrity: sha512-8BDM939bbMariZupiHp3OmP5N+LXPT4mULA0hZjDaq970PCxv4krZOSMG+HkWUUwmuQROtV+/00xw39EO0P+8g==}
-    cpu: [x64]
-    os: [freebsd]
-
   '@rolldown/binding-linux-arm-gnueabihf@1.0.0-beta.43':
     resolution: {integrity: sha512-IX2C6bA6wM2rX/RvD75ko+ix9yxPKjKGGq7pOhB8wGI4Z4fqX5B1nDHga/qMDmAdCAR1m9ymzxkmqhm/AFYf7A==}
     engines: {node: ^20.19.0 || >=22.12.0}
     cpu: [arm]
     os: [linux]
 
-  '@rolldown/binding-linux-arm-gnueabihf@1.0.0-beta.47':
-    resolution: {integrity: sha512-4PecgWCJhTA2EFOlptYJiNyVP2MrVP4cWdndpOu3WmXqWqZUmSubhb4YUAIxAxnXATlGjC1WjxNPhV7ZllNgdA==}
-    engines: {node: ^20.19.0 || >=22.12.0}
-    cpu: [arm]
-    os: [linux]
-
-  '@rolldown/binding-linux-arm-gnueabihf@1.0.0-beta.9-commit.d91dfb5':
-    resolution: {integrity: sha512-sntsPaPgrECpBB/+2xrQzVUt0r493TMPI+4kWRMhvMsmrxOqH1Ep5lM0Wua/ZdbfZNwm1aVa5pcESQfNfM4Fhw==}
-    cpu: [arm]
-    os: [linux]
-
   '@rolldown/binding-linux-arm64-gnu@1.0.0-beta.43':
     resolution: {integrity: sha512-mcjd57vEj+CEQbZAzUiaxNzNgwwgOpFtZBWcINm8DNscvkXl5b/s622Z1dqGNWSdrZmdjdC6LWMvu8iHM6v9sQ==}
     engines: {node: ^20.19.0 || >=22.12.0}
@@ -4336,19 +4283,6 @@ packages:
     os: [linux]
     libc: [glibc]
 
-  '@rolldown/binding-linux-arm64-gnu@1.0.0-beta.47':
-    resolution: {integrity: sha512-CyIunZ6D9U9Xg94roQI1INt/bLkOpPsZjZZkiaAZ0r6uccQdICmC99M9RUPlMLw/qg4yEWLlQhG73W/mG437NA==}
-    engines: {node: ^20.19.0 || >=22.12.0}
-    cpu: [arm64]
-    os: [linux]
-    libc: [glibc]
-
-  '@rolldown/binding-linux-arm64-gnu@1.0.0-beta.9-commit.d91dfb5':
-    resolution: {integrity: sha512-5clBW/I+er9F2uM1OFjJFWX86y7Lcy0M+NqsN4s3o07W+8467Zk8oQa4B45vdaXoNUF/yqIAgKkA/OEdQDxZqA==}
-    cpu: [arm64]
-    os: [linux]
-    libc: [glibc]
-
   '@rolldown/binding-linux-arm64-musl@1.0.0-beta.43':
     resolution: {integrity: sha512-Pa8QMwlkrztTo/1mVjZmPIQ44tCSci10TBqxzVBvXVA5CFh5EpiEi99fPSll2dHG2uT4dCOMeC6fIhyDdb0zXA==}
     engines: {node: ^20.19.0 || >=22.12.0}
@@ -4356,19 +4290,6 @@ packages:
     os: [linux]
     libc: [musl]
 
-  '@rolldown/binding-linux-arm64-musl@1.0.0-beta.47':
-    resolution: {integrity: sha512-doozc/Goe7qRCSnzfJbFINTHsMktqmZQmweull6hsZZ9sjNWQ6BWQnbvOlfZJe4xE5NxM1NhPnY5Giqnl3ZrYQ==}
-    engines: {node: ^20.19.0 || >=22.12.0}
-    cpu: [arm64]
-    os: [linux]
-    libc: [musl]
-
-  '@rolldown/binding-linux-arm64-musl@1.0.0-beta.9-commit.d91dfb5':
-    resolution: {integrity: sha512-wv+rnAfQDk9p/CheX8/Kmqk2o1WaFa4xhWI9gOyDMk/ljvOX0u0ubeM8nI1Qfox7Tnh71eV5AjzSePXUhFOyOg==}
-    cpu: [arm64]
-    os: [linux]
-    libc: [musl]
-
   '@rolldown/binding-linux-x64-gnu@1.0.0-beta.43':
     resolution: {integrity: sha512-BgynXKMjeaX4AfWLARhOKDetBOOghnSiVRjAHVvhiAaDXgdQN8e65mSmXRiVoVtD3cHXx/cfU8Gw0p0K+qYKVQ==}
     engines: {node: ^20.19.0 || >=22.12.0}
@@ -4376,19 +4297,6 @@ packages:
     os: [linux]
     libc: [glibc]
 
-  '@rolldown/binding-linux-x64-gnu@1.0.0-beta.47':
-    resolution: {integrity: sha512-fodvSMf6Aqwa0wEUSTPewmmZOD44rc5Tpr5p9NkwQ6W1SSpUKzD3SwpJIgANDOhwiYhDuiIaYPGB7Ujkx1q0UQ==}
-    engines: {node: ^20.19.0 || >=22.12.0}
-    cpu: [x64]
-    os: [linux]
-    libc: [glibc]
-
-  '@rolldown/binding-linux-x64-gnu@1.0.0-beta.9-commit.d91dfb5':
-    resolution: {integrity: sha512-gxD0/xhU4Py47IH3bKZbWtvB99tMkUPGPJFRfSc5UB9Osoje0l0j1PPbxpUtXIELurYCqwLBKXIMTQGifox1BQ==}
-    cpu: [x64]
-    os: [linux]
-    libc: [glibc]
-
   '@rolldown/binding-linux-x64-musl@1.0.0-beta.43':
     resolution: {integrity: sha512-VIsoPlOB/tDSAw9CySckBYysoIBqLeps1/umNSYUD8pMtalJyzMTneAVI1HrUdf4ceFmQ5vARoLIXSsPwVFxNg==}
     engines: {node: ^20.19.0 || >=22.12.0}
@@ -4396,97 +4304,35 @@ packages:
     os: [linux]
     libc: [musl]
 
-  '@rolldown/binding-linux-x64-musl@1.0.0-beta.47':
-    resolution: {integrity: sha512-Rxm5hYc0mGjwLh5sjlGmMygxAaV2gnsx7CNm2lsb47oyt5UQyPDZf3GP/ct8BEcwuikdqzsrrlIp8+kCSvMFNQ==}
-    engines: {node: ^20.19.0 || >=22.12.0}
-    cpu: [x64]
-    os: [linux]
-    libc: [musl]
-
-  '@rolldown/binding-linux-x64-musl@1.0.0-beta.9-commit.d91dfb5':
-    resolution: {integrity: sha512-HotuVe3XUjDwqqEMbm3o3IRkP9gdm8raY/btd/6KE3JGLF/cv4+3ff1l6nOhAZI8wulWDPEXPtE7v+HQEaTXnA==}
-    cpu: [x64]
-    os: [linux]
-    libc: [musl]
-
   '@rolldown/binding-openharmony-arm64@1.0.0-beta.43':
     resolution: {integrity: sha512-YDXTxVJG67PqTQMKyjVJSddoPbSWJ4yRz/E3xzTLHqNrTDGY0UuhG8EMr8zsYnfH/0cPFJ3wjQd/hJWHuR6nkA==}
     engines: {node: ^20.19.0 || >=22.12.0}
     cpu: [arm64]
     os: [openharmony]
 
-  '@rolldown/binding-openharmony-arm64@1.0.0-beta.47':
-    resolution: {integrity: sha512-YakuVe+Gc87jjxazBL34hbr8RJpRuFBhun7NEqoChVDlH5FLhLXjAPHqZd990TVGVNkemourf817Z8u2fONS8w==}
-    engines: {node: ^20.19.0 || >=22.12.0}
-    cpu: [arm64]
-    os: [openharmony]
-
   '@rolldown/binding-wasm32-wasi@1.0.0-beta.43':
     resolution: {integrity: sha512-3M+2DmorXvDuAIGYQ9Z93Oy1G9ETkejLwdXXb1uRTgKN9pMcu7N+KG2zDrJwqyxeeLIFE22AZGtSJm3PJbNu9Q==}
     engines: {node: '>=14.0.0'}
     cpu: [wasm32]
 
-  '@rolldown/binding-wasm32-wasi@1.0.0-beta.47':
-    resolution: {integrity: sha512-ak2GvTFQz3UAOw8cuQq8pWE+TNygQB6O47rMhvevvTzETh7VkHRFtRUwJynX5hwzFvQMP6G0az5JrBGuwaMwYQ==}
-    engines: {node: '>=14.0.0'}
-    cpu: [wasm32]
-
-  '@rolldown/binding-wasm32-wasi@1.0.0-beta.9-commit.d91dfb5':
-    resolution: {integrity: sha512-8Cx+ucbd8n2dIr21FqBh6rUvTVL0uTgEtKR7l+MUZ5BgY4dFh1e4mPVX8oqmoYwOxBiXrsD2JIOCz4AyKLKxWA==}
-    engines: {node: '>=14.21.3'}
-    cpu: [wasm32]
-
   '@rolldown/binding-win32-arm64-msvc@1.0.0-beta.43':
     resolution: {integrity: sha512-/B1j1pJs33y9ywtslOMxryUPHq8zIGu/OGEc2gyed0slimJ8fX2uR/SaJVhB4+NEgCFIeYDR4CX6jynAkeRuCA==}
     engines: {node: ^20.19.0 || >=22.12.0}
     cpu: [arm64]
     os: [win32]
 
-  '@rolldown/binding-win32-arm64-msvc@1.0.0-beta.47':
-    resolution: {integrity: sha512-o5BpmBnXU+Cj+9+ndMcdKjhZlPb79dVPBZnWwMnI4RlNSSq5yOvFZqvfPYbyacvnW03Na4n5XXQAPhu3RydZ0w==}
-    engines: {node: ^20.19.0 || >=22.12.0}
-    cpu: [arm64]
-    os: [win32]
-
-  '@rolldown/binding-win32-arm64-msvc@1.0.0-beta.9-commit.d91dfb5':
-    resolution: {integrity: sha512-Vhq5vikrVDxAa75fxsyqj0c0Y/uti/TwshXI71Xb8IeUQJOBnmLUsn5dgYf5ljpYYkNa0z9BPAvUDIDMmyDi+w==}
-    cpu: [arm64]
-    os: [win32]
-
   '@rolldown/binding-win32-ia32-msvc@1.0.0-beta.43':
     resolution: {integrity: sha512-29oG1swCz7hNP+CQYrsM4EtylsKwuYzM8ljqbqC5TsQwmKat7P8ouDpImsqg/GZxFSXcPP9ezQm0Q0wQwGM3JA==}
     engines: {node: ^20.19.0 || >=22.12.0}
     cpu: [ia32]
     os: [win32]
 
-  '@rolldown/binding-win32-ia32-msvc@1.0.0-beta.47':
-    resolution: {integrity: sha512-FVOmfyYehNE92IfC9Kgs913UerDog2M1m+FADJypKz0gmRg3UyTt4o1cZMCAl7MiR89JpM9jegNO1nXuP1w1vw==}
-    engines: {node: ^20.19.0 || >=22.12.0}
-    cpu: [ia32]
-    os: [win32]
-
-  '@rolldown/binding-win32-ia32-msvc@1.0.0-beta.9-commit.d91dfb5':
-    resolution: {integrity: sha512-lN7RIg9Iugn08zP2aZN9y/MIdG8iOOCE93M1UrFlrxMTqPf8X+fDzmR/OKhTSd1A2pYNipZHjyTcb5H8kyQSow==}
-    cpu: [ia32]
-    os: [win32]
-
   '@rolldown/binding-win32-x64-msvc@1.0.0-beta.43':
     resolution: {integrity: sha512-eWBV1Ef3gfGNehxVGCyXs7wLayRIgCmyItuCZwYYXW5bsk4EvR4n2GP5m3ohjnx7wdiY3nLmwQfH2Knb5gbNZw==}
     engines: {node: ^20.19.0 || >=22.12.0}
     cpu: [x64]
     os: [win32]
 
-  '@rolldown/binding-win32-x64-msvc@1.0.0-beta.47':
-    resolution: {integrity: sha512-by/70F13IUE101Bat0oeH8miwWX5mhMFPk1yjCdxoTNHTyTdLgb0THNaebRM6AP7Kz+O3O2qx87sruYuF5UxHg==}
-    engines: {node: ^20.19.0 || >=22.12.0}
-    cpu: [x64]
-    os: [win32]
-
-  '@rolldown/binding-win32-x64-msvc@1.0.0-beta.9-commit.d91dfb5':
-    resolution: {integrity: sha512-7/7cLIn48Y+EpQ4CePvf8reFl63F15yPUlg4ZAhl+RXJIfydkdak1WD8Ir3AwAO+bJBXzrfNL+XQbxm0mcQZmw==}
-    cpu: [x64]
-    os: [win32]
-
   '@rolldown/pluginutils@1.0.0-beta.11':
     resolution: {integrity: sha512-L/gAA/hyCSuzTF1ftlzUSI/IKr2POHsv1Dd78GfqkR83KMNuswWD61JxGV2L7nRwBBBSDr6R1gCkdTmoN7W4ag==}
 
@@ -13035,15 +12881,6 @@ packages:
     engines: {node: ^20.19.0 || >=22.12.0}
     hasBin: true
 
-  rolldown@1.0.0-beta.47:
-    resolution: {integrity: sha512-Mid74GckX1OeFAOYz9KuXeWYhq3xkXbMziYIC+ULVdUzPTG9y70OBSBQDQn9hQP8u/AfhuYw1R0BSg15nBI4Dg==}
-    engines: {node: ^20.19.0 || >=22.12.0}
-    hasBin: true
-
-  rolldown@1.0.0-beta.9-commit.d91dfb5:
-    resolution: {integrity: sha512-FHkj6gGEiEgmAXQchglofvUUdwj2Oiw603Rs+zgFAnn9Cb7T7z3fiaEc0DbN3ja4wYkW6sF2rzMEtC1V4BGx/g==}
-    hasBin: true
-
   rollup-plugin-visualizer@6.0.3:
     resolution: {integrity: sha512-ZU41GwrkDcCpVoffviuM9Clwjy5fcUxlz0oMoTXTYsK+tcIFzbdacnrr2n8TXcHxbGKKXtOdjxM2HUS4HjkwIw==}
     engines: {node: '>=18'}
@@ -19131,18 +18968,10 @@ snapshots:
   '@oxc-parser/binding-win32-x64-msvc@0.87.0':
     optional: true
 
-  '@oxc-project/runtime@0.71.0':
-    optional: true
-
-  '@oxc-project/types@0.71.0':
-    optional: true
-
   '@oxc-project/types@0.87.0': {}
 
   '@oxc-project/types@0.94.0': {}
 
-  '@oxc-project/types@0.96.0': {}
-
   '@oxc-transform/binding-android-arm64@0.87.0':
     optional: true
 
@@ -19750,129 +19579,47 @@ snapshots:
   '@rolldown/binding-android-arm64@1.0.0-beta.43':
     optional: true
 
-  '@rolldown/binding-android-arm64@1.0.0-beta.47':
-    optional: true
-
   '@rolldown/binding-darwin-arm64@1.0.0-beta.43':
     optional: true
 
-  '@rolldown/binding-darwin-arm64@1.0.0-beta.47':
-    optional: true
-
-  '@rolldown/binding-darwin-arm64@1.0.0-beta.9-commit.d91dfb5':
-    optional: true
-
   '@rolldown/binding-darwin-x64@1.0.0-beta.43':
     optional: true
 
-  '@rolldown/binding-darwin-x64@1.0.0-beta.47':
-    optional: true
-
-  '@rolldown/binding-darwin-x64@1.0.0-beta.9-commit.d91dfb5':
-    optional: true
-
   '@rolldown/binding-freebsd-x64@1.0.0-beta.43':
     optional: true
 
-  '@rolldown/binding-freebsd-x64@1.0.0-beta.47':
-    optional: true
-
-  '@rolldown/binding-freebsd-x64@1.0.0-beta.9-commit.d91dfb5':
-    optional: true
-
   '@rolldown/binding-linux-arm-gnueabihf@1.0.0-beta.43':
     optional: true
 
-  '@rolldown/binding-linux-arm-gnueabihf@1.0.0-beta.47':
-    optional: true
-
-  '@rolldown/binding-linux-arm-gnueabihf@1.0.0-beta.9-commit.d91dfb5':
-    optional: true
-
   '@rolldown/binding-linux-arm64-gnu@1.0.0-beta.43':
     optional: true
 
-  '@rolldown/binding-linux-arm64-gnu@1.0.0-beta.47':
-    optional: true
-
-  '@rolldown/binding-linux-arm64-gnu@1.0.0-beta.9-commit.d91dfb5':
-    optional: true
-
   '@rolldown/binding-linux-arm64-musl@1.0.0-beta.43':
     optional: true
 
-  '@rolldown/binding-linux-arm64-musl@1.0.0-beta.47':
-    optional: true
-
-  '@rolldown/binding-linux-arm64-musl@1.0.0-beta.9-commit.d91dfb5':
-    optional: true
-
   '@rolldown/binding-linux-x64-gnu@1.0.0-beta.43':
     optional: true
 
-  '@rolldown/binding-linux-x64-gnu@1.0.0-beta.47':
-    optional: true
-
-  '@rolldown/binding-linux-x64-gnu@1.0.0-beta.9-commit.d91dfb5':
-    optional: true
-
   '@rolldown/binding-linux-x64-musl@1.0.0-beta.43':
     optional: true
 
-  '@rolldown/binding-linux-x64-musl@1.0.0-beta.47':
-    optional: true
-
-  '@rolldown/binding-linux-x64-musl@1.0.0-beta.9-commit.d91dfb5':
-    optional: true
-
   '@rolldown/binding-openharmony-arm64@1.0.0-beta.43':
     optional: true
 
-  '@rolldown/binding-openharmony-arm64@1.0.0-beta.47':
-    optional: true
-
   '@rolldown/binding-wasm32-wasi@1.0.0-beta.43':
     dependencies:
       '@napi-rs/wasm-runtime': 1.0.7
     optional: true
 
-  '@rolldown/binding-wasm32-wasi@1.0.0-beta.47':
-    dependencies:
-      '@napi-rs/wasm-runtime': 1.0.7
-    optional: true
-
-  '@rolldown/binding-wasm32-wasi@1.0.0-beta.9-commit.d91dfb5':
-    dependencies:
-      '@napi-rs/wasm-runtime': 0.2.12
-    optional: true
-
   '@rolldown/binding-win32-arm64-msvc@1.0.0-beta.43':
     optional: true
 
-  '@rolldown/binding-win32-arm64-msvc@1.0.0-beta.47':
-    optional: true
-
-  '@rolldown/binding-win32-arm64-msvc@1.0.0-beta.9-commit.d91dfb5':
-    optional: true
-
   '@rolldown/binding-win32-ia32-msvc@1.0.0-beta.43':
     optional: true
 
-  '@rolldown/binding-win32-ia32-msvc@1.0.0-beta.47':
-    optional: true
-
-  '@rolldown/binding-win32-ia32-msvc@1.0.0-beta.9-commit.d91dfb5':
-    optional: true
-
   '@rolldown/binding-win32-x64-msvc@1.0.0-beta.43':
     optional: true
 
-  '@rolldown/binding-win32-x64-msvc@1.0.0-beta.47':
-    optional: true
-
-  '@rolldown/binding-win32-x64-msvc@1.0.0-beta.9-commit.d91dfb5':
-    optional: true
-
   '@rolldown/pluginutils@1.0.0-beta.11': {}
 
   '@rolldown/pluginutils@1.0.0-beta.29': {}
@@ -30373,7 +30120,7 @@ snapshots:
       glob: 11.0.0
       package-json-from-dist: 1.0.0
 
-  rolldown-plugin-dts@0.16.12(rolldown@1.0.0-beta.47)(typescript@5.8.3):
+  rolldown-plugin-dts@0.16.12(rolldown@1.0.0-beta.43)(typescript@5.8.3):
     dependencies:
       '@babel/generator': 7.28.3
       '@babel/parser': 7.28.4
@@ -30384,7 +30131,7 @@ snapshots:
       dts-resolver: 2.1.2
       get-tsconfig: 4.13.0
       magic-string: 0.30.19
-      rolldown: 1.0.0-beta.47
+      rolldown: 1.0.0-beta.43
     optionalDependencies:
       typescript: 5.8.3
     transitivePeerDependencies:
@@ -30412,48 +30159,7 @@ snapshots:
       '@rolldown/binding-win32-ia32-msvc': 1.0.0-beta.43
       '@rolldown/binding-win32-x64-msvc': 1.0.0-beta.43
 
-  rolldown@1.0.0-beta.47:
-    dependencies:
-      '@oxc-project/types': 0.96.0
-      '@rolldown/pluginutils': 1.0.0-beta.47
-    optionalDependencies:
-      '@rolldown/binding-android-arm64': 1.0.0-beta.47
-      '@rolldown/binding-darwin-arm64': 1.0.0-beta.47
-      '@rolldown/binding-darwin-x64': 1.0.0-beta.47
-      '@rolldown/binding-freebsd-x64': 1.0.0-beta.47
-      '@rolldown/binding-linux-arm-gnueabihf': 1.0.0-beta.47
-      '@rolldown/binding-linux-arm64-gnu': 1.0.0-beta.47
-      '@rolldown/binding-linux-arm64-musl': 1.0.0-beta.47
-      '@rolldown/binding-linux-x64-gnu': 1.0.0-beta.47
-      '@rolldown/binding-linux-x64-musl': 1.0.0-beta.47
-      '@rolldown/binding-openharmony-arm64': 1.0.0-beta.47
-      '@rolldown/binding-wasm32-wasi': 1.0.0-beta.47
-      '@rolldown/binding-win32-arm64-msvc': 1.0.0-beta.47
-      '@rolldown/binding-win32-ia32-msvc': 1.0.0-beta.47
-      '@rolldown/binding-win32-x64-msvc': 1.0.0-beta.47
-
-  rolldown@1.0.0-beta.9-commit.d91dfb5:
-    dependencies:
-      '@oxc-project/runtime': 0.71.0
-      '@oxc-project/types': 0.71.0
-      '@rolldown/pluginutils': 1.0.0-beta.9-commit.d91dfb5
-      ansis: 4.2.0
-    optionalDependencies:
-      '@rolldown/binding-darwin-arm64': 1.0.0-beta.9-commit.d91dfb5
-      '@rolldown/binding-darwin-x64': 1.0.0-beta.9-commit.d91dfb5
-      '@rolldown/binding-freebsd-x64': 1.0.0-beta.9-commit.d91dfb5
-      '@rolldown/binding-linux-arm-gnueabihf': 1.0.0-beta.9-commit.d91dfb5
-      '@rolldown/binding-linux-arm64-gnu': 1.0.0-beta.9-commit.d91dfb5
-      '@rolldown/binding-linux-arm64-musl': 1.0.0-beta.9-commit.d91dfb5
-      '@rolldown/binding-linux-x64-gnu': 1.0.0-beta.9-commit.d91dfb5
-      '@rolldown/binding-linux-x64-musl': 1.0.0-beta.9-commit.d91dfb5
-      '@rolldown/binding-wasm32-wasi': 1.0.0-beta.9-commit.d91dfb5
-      '@rolldown/binding-win32-arm64-msvc': 1.0.0-beta.9-commit.d91dfb5
-      '@rolldown/binding-win32-ia32-msvc': 1.0.0-beta.9-commit.d91dfb5
-      '@rolldown/binding-win32-x64-msvc': 1.0.0-beta.9-commit.d91dfb5
-    optional: true
-
-  rollup-plugin-visualizer@6.0.3(rolldown@1.0.0-beta.9-commit.d91dfb5)(rollup@4.52.4):
+  rollup-plugin-visualizer@6.0.3(rolldown@1.0.0-beta.43)(rollup@4.52.4):
     dependencies:
       open: 8.4.2
       picomatch: 4.0.3
@@ -31699,8 +31405,8 @@ snapshots:
       diff: 8.0.2
       empathic: 2.0.0
       hookable: 5.5.3
-      rolldown: 1.0.0-beta.47
-      rolldown-plugin-dts: 0.16.12(rolldown@1.0.0-beta.47)(typescript@5.8.3)
+      rolldown: 1.0.0-beta.43
+      rolldown-plugin-dts: 0.16.12(rolldown@1.0.0-beta.43)(typescript@5.8.3)
       semver: 7.7.3
       tinyexec: 1.0.1
       tinyglobby: 0.2.15

From bc148589864810d932ad056eaf66224a5e2e6b60 Mon Sep 17 00:00:00 2001
From: Laura Beatris <48022589+LauraBeatris@users.noreply.github.com>
Date: Tue, 18 Nov 2025 08:55:48 -0300
Subject: [PATCH 22/30] Show warning if there is not an active session

---
 packages/clerk-js/src/core/clerk.ts              | 16 ++++++++++++++--
 packages/clerk-js/src/core/resources/DevTools.ts |  2 +-
 .../EnableOrganizationsPrompt/index.tsx          |  2 +-
 3 files changed, 16 insertions(+), 4 deletions(-)

diff --git a/packages/clerk-js/src/core/clerk.ts b/packages/clerk-js/src/core/clerk.ts
index 0ad3c338c54..6af0e410091 100644
--- a/packages/clerk-js/src/core/clerk.ts
+++ b/packages/clerk-js/src/core/clerk.ts
@@ -752,8 +752,20 @@ export class Clerk implements ClerkInterface {
   ): { status: 'enabled' | 'prompt-shown' } => {
     const { for: setting, caller } = params;
 
-    // If not in development instance, return enabled status in order to not open the prompt
-    if (this.#instanceType !== 'development') {
+    if (!this.user) {
+      console.warn(
+        `Clerk: "${caller}" requires an active user session. Ensure a user is signed in before executing ${caller}.`,
+      );
+    }
+
+    if (
+      // Do not open the prompt if the user is not loaded, since the endpoint
+      // relies on the session
+      // Organization components already don't render if the session is not active
+      !this.user ||
+      // If not in development instance, return enabled status in order to not open the prompt
+      this.#instanceType !== 'development'
+    ) {
       return { status: 'enabled' };
     }
 
diff --git a/packages/clerk-js/src/core/resources/DevTools.ts b/packages/clerk-js/src/core/resources/DevTools.ts
index 9a517858604..bccd33c44d9 100644
--- a/packages/clerk-js/src/core/resources/DevTools.ts
+++ b/packages/clerk-js/src/core/resources/DevTools.ts
@@ -14,7 +14,7 @@ export class DevTools extends BaseResource implements DevToolsResource {
 
   async __internal_enableEnvironmentSetting(params: EnableEnvironmentSettingParams) {
     await this._basePatch({
-      path: `${this.pathRoot}/enable_environment_setting`,
+      path: `${this.pathRoot}/${BaseResource.clerk.session?.id}/enable_environment_setting`,
       body: params,
     });
   }
diff --git a/packages/clerk-js/src/ui/components/devPrompts/EnableOrganizationsPrompt/index.tsx b/packages/clerk-js/src/ui/components/devPrompts/EnableOrganizationsPrompt/index.tsx
index 1fc9931be65..ec97c5858f7 100644
--- a/packages/clerk-js/src/ui/components/devPrompts/EnableOrganizationsPrompt/index.tsx
+++ b/packages/clerk-js/src/ui/components/devPrompts/EnableOrganizationsPrompt/index.tsx
@@ -62,7 +62,7 @@ const EnableOrganizationsPromptInternal = ({
     void new DevTools()
       .__internal_enableEnvironmentSetting({
         enable_organizations: true,
-        allow_personal_account: allowPersonalAccount,
+        organization_allow_personal_accounts: allowPersonalAccount,
       })
       .then(() => {
         setIsEnabled(true);

From 5f913b03211aa3ab0da8cee17f9cf141d171c87e Mon Sep 17 00:00:00 2001
From: Alex Carpenter <alex.carpenter@clerk.dev>
Date: Tue, 18 Nov 2025 10:19:40 -0500
Subject: [PATCH 23/30] feat: Add support for `initialFocusRef` (#7247)

Co-authored-by: Laura Beatris <48022589+LauraBeatris@users.noreply.github.com>
---
 .../devPrompts/EnableOrganizationsPrompt/index.tsx | 14 ++++++++------
 packages/clerk-js/src/ui/elements/Modal.tsx        |  5 ++++-
 2 files changed, 12 insertions(+), 7 deletions(-)

diff --git a/packages/clerk-js/src/ui/components/devPrompts/EnableOrganizationsPrompt/index.tsx b/packages/clerk-js/src/ui/components/devPrompts/EnableOrganizationsPrompt/index.tsx
index ec97c5858f7..d9619c5b957 100644
--- a/packages/clerk-js/src/ui/components/devPrompts/EnableOrganizationsPrompt/index.tsx
+++ b/packages/clerk-js/src/ui/components/devPrompts/EnableOrganizationsPrompt/index.tsx
@@ -2,7 +2,7 @@ import { useClerk } from '@clerk/shared/react';
 import type { __internal_EnableOrganizationsPromptProps } from '@clerk/shared/types';
 // eslint-disable-next-line no-restricted-imports
 import { css } from '@emotion/react';
-import { forwardRef, useMemo, useState } from 'react';
+import { forwardRef, useMemo, useRef, useState } from 'react';
 
 import { Modal } from '@/ui/elements/Modal';
 import { common, InternalThemeProvider } from '@/ui/styledSystem';
@@ -34,6 +34,8 @@ const EnableOrganizationsPromptInternal = ({
   const [isEnabled, setIsEnabled] = useState(false);
   const [allowPersonalAccount, setAllowPersonalAccount] = useState(false);
 
+  const initialFocusRef = useRef<HTMLButtonElement>(null);
+
   // @ts-expect-error - __unstable__environment is not typed
   const environment = clerk?.__unstable__environment as Environment | undefined;
 
@@ -80,6 +82,7 @@ const EnableOrganizationsPromptInternal = ({
       <Modal
         canCloseModal={false}
         containerSx={() => ({ alignItems: 'center' })}
+        initialFocusRef={initialFocusRef}
       >
         <PromptContainer
           sx={() => ({
@@ -236,7 +239,6 @@ const EnableOrganizationsPromptInternal = ({
                     href={organizationsDashboardUrl}
                     target='_blank'
                     rel='noopener noreferrer'
-                    tabIndex={-1}
                   >
                     dashboard
                   </a>
@@ -287,7 +289,6 @@ const EnableOrganizationsPromptInternal = ({
                     href='https://clerk.com/docs/guides/organizations/overview'
                     target='_blank'
                     rel='noopener noreferrer'
-                    tabIndex={-1}
                   >
                     Learn more about Organizations.
                   </a>
@@ -346,6 +347,7 @@ const EnableOrganizationsPromptInternal = ({
                   variant='solid'
                   onClick={handleEnableOrganizations}
                   disabled={isLoading}
+                  ref={initialFocusRef}
                 >
                   Enable Organizations
                 </PromptButton>
@@ -405,7 +407,7 @@ type PromptButtonProps = Pick<React.ComponentProps<'button'>, 'onClick' | 'child
   variant?: PromptButtonVariant;
 };
 
-const PromptButton = ({ variant = 'solid', ...props }: PromptButtonProps) => {
+const PromptButton = forwardRef<HTMLButtonElement, PromptButtonProps>(({ variant = 'solid', ...props }, ref) => {
   const solidStyles = css`
     background: linear-gradient(180deg, rgba(0, 0, 0, 0) 30.5%, rgba(0, 0, 0, 0.05) 100%), #454545;
     box-shadow:
@@ -464,12 +466,13 @@ const PromptButton = ({ variant = 'solid', ...props }: PromptButtonProps) => {
 
   return (
     <button
+      ref={ref}
       type='button'
       css={[mainCTAStyles, variant === 'solid' ? solidStyles : outlineStyles]}
       {...props}
     />
   );
-};
+});
 
 type AllowPersonalAccountSwitchProps = {
   checked: boolean;
@@ -509,7 +512,6 @@ const AllowPersonalAccountSwitch = forwardRef<HTMLDivElement, AllowPersonalAccou
           disabled={isDisabled}
           checked={checked}
           onChange={handleChange}
-          tabIndex={-1}
           style={{
             ...common.visuallyHidden(),
           }}
diff --git a/packages/clerk-js/src/ui/elements/Modal.tsx b/packages/clerk-js/src/ui/elements/Modal.tsx
index 193bf40d4f3..46934f2a5d8 100644
--- a/packages/clerk-js/src/ui/elements/Modal.tsx
+++ b/packages/clerk-js/src/ui/elements/Modal.tsx
@@ -20,11 +20,13 @@ type ModalProps = React.PropsWithChildren<{
   canCloseModal?: boolean;
   style?: React.CSSProperties;
   portalRoot?: HTMLElement | React.MutableRefObject<HTMLElement | null>;
+  initialFocusRef?: number | React.MutableRefObject<HTMLElement | null>;
 }>;
 
 export const Modal = withFloatingTree((props: ModalProps) => {
   const { disableScrollLock, enableScrollLock } = useScrollLock();
-  const { handleClose, handleOpen, contentSx, containerSx, canCloseModal, id, style, portalRoot } = props;
+  const { handleClose, handleOpen, contentSx, containerSx, canCloseModal, id, style, portalRoot, initialFocusRef } =
+    props;
   const overlayRef = useRef<HTMLDivElement>(null);
   const { floating, isOpen, context, nodeId, toggle } = usePopover({
     defaultOpen: true,
@@ -57,6 +59,7 @@ export const Modal = withFloatingTree((props: ModalProps) => {
       isOpen={isOpen}
       outsideElementsInert
       root={portalRoot}
+      initialFocus={initialFocusRef}
     >
       <ModalContext.Provider value={modalCtx}>
         <Flex

From 5c5f7db58db661a66b83d070bf36cd32ece4bf18 Mon Sep 17 00:00:00 2001
From: Alex Carpenter <alex.carpenter@clerk.dev>
Date: Tue, 18 Nov 2025 11:48:22 -0500
Subject: [PATCH 24/30] refactor: Button variant improvements (#7249)

---
 .../EnableOrganizationsPrompt/index.tsx       | 118 ++++++++----------
 1 file changed, 52 insertions(+), 66 deletions(-)

diff --git a/packages/clerk-js/src/ui/components/devPrompts/EnableOrganizationsPrompt/index.tsx b/packages/clerk-js/src/ui/components/devPrompts/EnableOrganizationsPrompt/index.tsx
index d9619c5b957..7867cb18a86 100644
--- a/packages/clerk-js/src/ui/components/devPrompts/EnableOrganizationsPrompt/index.tsx
+++ b/packages/clerk-js/src/ui/components/devPrompts/EnableOrganizationsPrompt/index.tsx
@@ -34,7 +34,7 @@ const EnableOrganizationsPromptInternal = ({
   const [isEnabled, setIsEnabled] = useState(false);
   const [allowPersonalAccount, setAllowPersonalAccount] = useState(false);
 
-  const initialFocusRef = useRef<HTMLButtonElement>(null);
+  const initialFocusRef = useRef<HTMLHeadingElement>(null);
 
   // @ts-expect-error - __unstable__environment is not typed
   const environment = clerk?.__unstable__environment as Environment | undefined;
@@ -198,8 +198,11 @@ const EnableOrganizationsPromptInternal = ({
                     color: white;
                     font-size: 0.875rem;
                     font-weight: 500;
+                    outline: none;
                   `,
                 ]}
+                tabIndex={-1}
+                ref={initialFocusRef}
               >
                 {isEnabled ? 'Organizations feature enabled' : 'Organizations feature required'}
               </h1>
@@ -347,7 +350,6 @@ const EnableOrganizationsPromptInternal = ({
                   variant='solid'
                   onClick={handleEnableOrganizations}
                   disabled={isLoading}
-                  ref={initialFocusRef}
                 >
                   Enable Organizations
                 </PromptButton>
@@ -372,7 +374,7 @@ export const EnableOrganizationsPrompt = (props: __internal_EnableOrganizationsP
   );
 };
 
-const mainCTAStyles = css`
+const baseButtonStyles = css`
   ${basePromptElementStyles};
   cursor: pointer;
   display: flex;
@@ -389,86 +391,70 @@ const mainCTAStyles = css`
   white-space: nowrap;
   user-select: none;
   color: white;
-  transition: all 120ms ease-in-out;
+  outline: none;
+
+  &:not(:disabled) {
+    transition: 120ms ease-in-out;
+    transition-property: background-color, border-color, box-shadow, color;
+  }
 
   &:disabled {
     opacity: 0.6;
     cursor: not-allowed;
   }
 
-  &:focus-visible {
-    outline: none;
+  &:focus-visible:not(:disabled) {
+    outline: 2px solid white;
+    outline-offset: 2px;
+  }
+`;
+
+const buttonSolidStyles = css`
+  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 30.5%, rgba(0, 0, 0, 0.05) 100%), #454545;
+  box-shadow:
+    0 0 3px 0 rgba(253, 224, 71, 0) inset,
+    0 0 0 1px rgba(255, 255, 255, 0.04) inset,
+    0 1px 0 0 rgba(255, 255, 255, 0.04) inset,
+    0 0 0 1px rgba(0, 0, 0, 0.12),
+    0 1.5px 2px 0 rgba(0, 0, 0, 0.48);
+
+  &:hover:not(:disabled) {
+    background: linear-gradient(180deg, rgba(0, 0, 0, 0) 30.5%, rgba(0, 0, 0, 0.15) 100%), #5f5f5f;
+    box-shadow:
+      0 0 3px 0 rgba(253, 224, 71, 0) inset,
+      0 0 0 1px rgba(255, 255, 255, 0.04) inset,
+      0 1px 0 0 rgba(255, 255, 255, 0.04) inset,
+      0 0 0 1px rgba(0, 0, 0, 0.12),
+      0 1.5px 2px 0 rgba(0, 0, 0, 0.48);
   }
 `;
 
-type PromptButtonVariant = 'solid' | 'outline';
+const buttonOutlineStyles = css`
+  border: 1px solid rgba(118, 118, 132, 0.25);
+  background: rgba(69, 69, 69, 0.1);
+
+  &:hover:not(:disabled) {
+    border-color: rgba(118, 118, 132, 0.5);
+  }
+`;
+
+const buttonVariantStyles = {
+  solid: buttonSolidStyles,
+  outline: buttonOutlineStyles,
+} as const;
+
+type PromptButtonVariant = keyof typeof buttonVariantStyles;
 
 type PromptButtonProps = Pick<React.ComponentProps<'button'>, 'onClick' | 'children' | 'disabled'> & {
   variant?: PromptButtonVariant;
 };
 
 const PromptButton = forwardRef<HTMLButtonElement, PromptButtonProps>(({ variant = 'solid', ...props }, ref) => {
-  const solidStyles = css`
-    background: linear-gradient(180deg, rgba(0, 0, 0, 0) 30.5%, rgba(0, 0, 0, 0.05) 100%), #454545;
-    box-shadow:
-      0px 0px 0px 1px rgba(255, 255, 255, 0.04) inset,
-      0px 1px 0px 0px rgba(255, 255, 255, 0.04) inset,
-      0px 0px 0px 1px rgba(0, 0, 0, 0.12),
-      0px 1.5px 2px 0px rgba(0, 0, 0, 0.48),
-      0px 0px 4px 0px rgba(243, 107, 22, 0) inset;
-
-    &:hover:not(:disabled) {
-      background: linear-gradient(180deg, rgba(0, 0, 0, 0) 30.5%, rgba(0, 0, 0, 0.15) 100%), #5f5f5f;
-      box-shadow:
-        0 0 3px 0 rgba(253, 224, 71, 0) inset,
-        0 0 0 1px rgba(255, 255, 255, 0.04) inset,
-        0 1px 0 0 rgba(255, 255, 255, 0.04) inset,
-        0 0 0 1px rgba(0, 0, 0, 0.12),
-        0 1.5px 2px 0 rgba(0, 0, 0, 0.48);
-    }
-
-    &:focus:not(:disabled) {
-      border: 1px solid rgba(115, 115, 115);
-      background: linear-gradient(180deg, rgba(0, 0, 0, 0) 30.5%, rgba(0, 0, 0, 0.05) 100%), #454545;
-      box-shadow:
-        0 0 0 4px rgba(255, 255, 255, 0.05),
-        0 0 3px 0 rgba(255, 255, 255, 0) inset,
-        0 0 0 1px rgba(255, 255, 255, 0.25) inset,
-        0 1px 0 0 rgba(255, 255, 255, 0.04) inset,
-        0 0 0 1px rgba(0, 0, 0, 0.12),
-        0 1.5px 2px 0 rgba(0, 0, 0, 0.48);
-    }
-  `;
-
-  const outlineStyles = css`
-    background: rgba(69, 69, 69, 0.1);
-    border: 1px solid rgba(118, 118, 132, 0.25);
-
-    &:hover:not(:disabled) {
-      box-shadow:
-        0px 0px 6px 0px rgba(255, 255, 255, 0.04) inset,
-        0px 0px 0px 1px rgba(255, 255, 255, 0.04) inset,
-        0px 1px 0px 0px rgba(255, 255, 255, 0.04) inset,
-        0px 0px 0px 1px rgba(0, 0, 0, 0.1),
-        0px 1.5px 2px 0px rgba(0, 0, 0, 0.48);
-    }
-
-    &:hover:not(:disabled) {
-      border: 1px solid rgba(115, 115, 115);
-    }
-
-    &:focus:not(:disabled) {
-      border: 1px solid rgba(115, 115, 115);
-
-      box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.05);
-    }
-  `;
-
   return (
     <button
       ref={ref}
       type='button'
-      css={[mainCTAStyles, variant === 'solid' ? solidStyles : outlineStyles]}
+      css={[baseButtonStyles, buttonVariantStyles[variant]]}
       {...props}
     />
   );
@@ -557,7 +543,7 @@ const AllowPersonalAccountSwitch = forwardRef<HTMLDivElement, AllowPersonalAccou
           direction='col'
           gap={1}
         >
-          <p
+          <span
             css={[
               basePromptElementStyles,
               css`
@@ -569,7 +555,7 @@ const AllowPersonalAccountSwitch = forwardRef<HTMLDivElement, AllowPersonalAccou
             ]}
           >
             Allow personal account
-          </p>
+          </span>
 
           <span
             css={[

From bc350b860f6b92bfe708686d14c89909d58d3420 Mon Sep 17 00:00:00 2001
From: Laura Beatris <48022589+LauraBeatris@users.noreply.github.com>
Date: Tue, 18 Nov 2025 14:02:02 -0300
Subject: [PATCH 25/30] Fix `dev_tools` endpoint

---
 packages/clerk-js/src/core/fapiClient.ts         | 2 +-
 packages/clerk-js/src/core/resources/DevTools.ts | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/clerk-js/src/core/fapiClient.ts b/packages/clerk-js/src/core/fapiClient.ts
index 42af60d0f61..7d03e620c27 100644
--- a/packages/clerk-js/src/core/fapiClient.ts
+++ b/packages/clerk-js/src/core/fapiClient.ts
@@ -66,7 +66,7 @@ export interface FapiClient {
 }
 
 // List of paths that should not receive the session ID parameter in the URL
-const unauthorizedPathPrefixes = ['/client', '/waitlist', '/dev_tools'];
+const unauthorizedPathPrefixes = ['/client', '/waitlist'];
 
 type FapiClientOptions = {
   frontendApi: string;
diff --git a/packages/clerk-js/src/core/resources/DevTools.ts b/packages/clerk-js/src/core/resources/DevTools.ts
index bccd33c44d9..9a517858604 100644
--- a/packages/clerk-js/src/core/resources/DevTools.ts
+++ b/packages/clerk-js/src/core/resources/DevTools.ts
@@ -14,7 +14,7 @@ export class DevTools extends BaseResource implements DevToolsResource {
 
   async __internal_enableEnvironmentSetting(params: EnableEnvironmentSettingParams) {
     await this._basePatch({
-      path: `${this.pathRoot}/${BaseResource.clerk.session?.id}/enable_environment_setting`,
+      path: `${this.pathRoot}/enable_environment_setting`,
       body: params,
     });
   }

From db1beb27829071766c47653432f5d71074feeadb Mon Sep 17 00:00:00 2001
From: Laura Beatris <48022589+LauraBeatris@users.noreply.github.com>
Date: Tue, 18 Nov 2025 17:05:22 -0300
Subject: [PATCH 26/30] Display prompt even without session

---
 packages/clerk-js/src/core/clerk.ts                        | 4 ----
 .../devPrompts/EnableOrganizationsPrompt/index.tsx         | 7 ++++---
 2 files changed, 4 insertions(+), 7 deletions(-)

diff --git a/packages/clerk-js/src/core/clerk.ts b/packages/clerk-js/src/core/clerk.ts
index 6af0e410091..82141677c6d 100644
--- a/packages/clerk-js/src/core/clerk.ts
+++ b/packages/clerk-js/src/core/clerk.ts
@@ -759,10 +759,6 @@ export class Clerk implements ClerkInterface {
     }
 
     if (
-      // Do not open the prompt if the user is not loaded, since the endpoint
-      // relies on the session
-      // Organization components already don't render if the session is not active
-      !this.user ||
       // If not in development instance, return enabled status in order to not open the prompt
       this.#instanceType !== 'development'
     ) {
diff --git a/packages/clerk-js/src/ui/components/devPrompts/EnableOrganizationsPrompt/index.tsx b/packages/clerk-js/src/ui/components/devPrompts/EnableOrganizationsPrompt/index.tsx
index 7867cb18a86..0b53555f857 100644
--- a/packages/clerk-js/src/ui/components/devPrompts/EnableOrganizationsPrompt/index.tsx
+++ b/packages/clerk-js/src/ui/components/devPrompts/EnableOrganizationsPrompt/index.tsx
@@ -226,8 +226,9 @@ const EnableOrganizationsPromptInternal = ({
                     `,
                   ]}
                 >
-                  The Organizations feature has been enabled for your application. A default organization named &quot;My
-                  Organization&quot; was created automatically. You can manage or rename it in your{' '}
+                  {clerk.user
+                    ? `The Organizations feature has been enabled for your application. A default organization named "My Organization" was created automatically. You can manage or rename it in your`
+                    : `The Organizations feature has been enabled for your application. You can manage it in your`}{' '}
                   <a
                     css={[
                       basePromptElementStyles,
@@ -299,7 +300,7 @@ const EnableOrganizationsPromptInternal = ({
               )}
             </Flex>
 
-            {!isEnabled && (
+            {!isEnabled && clerk?.user && (
               <Flex sx={t => ({ marginTop: t.sizes.$3 })}>
                 <AllowPersonalAccountSwitch
                   checked={allowPersonalAccount}

From 290d85c06240b59d08594ce5658fc88231165da9 Mon Sep 17 00:00:00 2001
From: Alex Carpenter <alex.carpenter@clerk.dev>
Date: Tue, 18 Nov 2025 17:18:14 -0500
Subject: [PATCH 27/30] refactor: Switch improvements (#7253)

---
 .../EnableOrganizationsPrompt/index.tsx       | 210 ++++++++++--------
 .../devPrompts/KeylessPrompt/index.tsx        |   1 +
 .../src/ui/components/devPrompts/shared.tsx   |   1 -
 3 files changed, 116 insertions(+), 96 deletions(-)

diff --git a/packages/clerk-js/src/ui/components/devPrompts/EnableOrganizationsPrompt/index.tsx b/packages/clerk-js/src/ui/components/devPrompts/EnableOrganizationsPrompt/index.tsx
index 0b53555f857..dda7cd40a0d 100644
--- a/packages/clerk-js/src/ui/components/devPrompts/EnableOrganizationsPrompt/index.tsx
+++ b/packages/clerk-js/src/ui/components/devPrompts/EnableOrganizationsPrompt/index.tsx
@@ -1,15 +1,15 @@
 import { useClerk } from '@clerk/shared/react';
 import type { __internal_EnableOrganizationsPromptProps } from '@clerk/shared/types';
 // eslint-disable-next-line no-restricted-imports
-import { css } from '@emotion/react';
-import { forwardRef, useMemo, useRef, useState } from 'react';
+import { css, type Theme } from '@emotion/react';
+import { forwardRef, useId, useMemo, useRef, useState } from 'react';
 
 import { Modal } from '@/ui/elements/Modal';
 import { common, InternalThemeProvider } from '@/ui/styledSystem';
 
 import { DevTools } from '../../../../core/resources/DevTools';
 import type { Environment } from '../../../../core/resources/Environment';
-import { Flex } from '../../../customizables';
+import { Flex, Span } from '../../../customizables';
 import { Portal } from '../../../elements/Portal';
 import { basePromptElementStyles, handleDashboardUrlParsing, PromptContainer, PromptSuccessIcon } from '../shared';
 
@@ -88,7 +88,8 @@ const EnableOrganizationsPromptInternal = ({
           sx={() => ({
             display: 'flex',
             flexDirection: 'column',
-            maxWidth: '30rem',
+            width: '30rem',
+            maxWidth: 'calc(100vw - 2rem)',
           })}
         >
           <Flex
@@ -302,10 +303,11 @@ const EnableOrganizationsPromptInternal = ({
 
             {!isEnabled && clerk?.user && (
               <Flex sx={t => ({ marginTop: t.sizes.$3 })}>
-                <AllowPersonalAccountSwitch
+                <Switch
+                  label='Allow personal account'
+                  description='This is an uncommon setting, meant for applications that sell to both organizations and individual users. Most B2B applications require users to be part of an organization, and should keep this setting disabled.'
                   checked={allowPersonalAccount}
-                  onChange={() => setAllowPersonalAccount(!allowPersonalAccount)}
-                  isDisabled={false}
+                  onChange={() => setAllowPersonalAccount(prev => !prev)}
                 />
               </Flex>
             )}
@@ -314,8 +316,10 @@ const EnableOrganizationsPromptInternal = ({
           <span
             css={css`
               height: 1px;
+              display: block;
+              width: calc(100% - 2px);
+              margin-inline: auto;
               background-color: #151515;
-              width: 100%;
               box-shadow: 0px 1px 0px 0px #424242;
             `}
           />
@@ -461,118 +465,134 @@ const PromptButton = forwardRef<HTMLButtonElement, PromptButtonProps>(({ variant
   );
 });
 
-type AllowPersonalAccountSwitchProps = {
-  checked: boolean;
-  isDisabled: boolean;
-  onChange: (checked: boolean) => void;
+type SwitchProps = React.ComponentProps<'input'> & {
+  label: string;
+  description?: string;
 };
 
-const AllowPersonalAccountSwitch = forwardRef<HTMLDivElement, AllowPersonalAccountSwitchProps>(
-  ({ checked, onChange, isDisabled = false }, ref) => {
+const TRACK_PADDING = '2px';
+const TRACK_INNER_WIDTH = (t: Theme) => t.sizes.$6;
+const TRACK_HEIGHT = (t: Theme) => t.sizes.$4;
+const THUMB_WIDTH = (t: Theme) => t.sizes.$3;
+
+const Switch = forwardRef<HTMLInputElement, SwitchProps>(
+  ({ label, description, checked: controlledChecked, defaultChecked, onChange, ...props }, ref) => {
+    const descriptionId = useId();
+
+    const isControlled = controlledChecked !== undefined;
+    const [internalChecked, setInternalChecked] = useState(!!defaultChecked);
+    const checked = isControlled ? controlledChecked : internalChecked;
+
     const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-      if (isDisabled) {
-        return;
+      if (!isControlled) {
+        setInternalChecked(e.target.checked);
       }
-
-      onChange?.(e.target.checked);
+      onChange?.(e);
     };
 
     return (
       <Flex
-        ref={ref}
-        direction='row'
-        align='center'
-        as='label'
-        gap={2}
-        sx={t => ({
-          isolation: 'isolate',
-          width: 'fit-content',
-          '&:has(input:focus-visible) > input + span': {
-            ...common.focusRingStyles(t),
-          },
-        })}
+        direction='col'
+        gap={1}
       >
-        {/* The order of the elements is important here for the focus ring to work. The input is visually hidden, so the focus ring is applied to the span. */}
-        <input
-          type='checkbox'
-          role='switch'
-          disabled={isDisabled}
-          checked={checked}
-          onChange={handleChange}
-          style={{
-            ...common.visuallyHidden(),
-          }}
-        />
         <Flex
-          as='span'
-          data-checked={checked}
-          sx={t => ({
-            minWidth: t.sizes.$7,
-            alignSelf: 'flex-start',
-            height: t.sizes.$4,
-            alignItems: 'center',
-            position: 'relative',
-            borderColor: '#DBDBE0',
-            backgroundColor: checked ? '#DBDBE0' : t.colors.$primary500,
-            borderRadius: 999,
-            transition: 'background-color 0.2s',
-            opacity: isDisabled ? 0.6 : 1,
-            cursor: isDisabled ? 'not-allowed' : 'pointer',
-            outline: 'none',
-            boxSizing: 'border-box',
-            boxShadow:
-              '0px 0px 6px 0px rgba(255, 255, 255, 0.04) inset, 0px 0px 0px 1px rgba(255, 255, 255, 0.04) inset, 0px 1px 0px 0px rgba(255, 255, 255, 0.04) inset, 0px 0px 0px 1px rgba(0, 0, 0, 0.1)',
-          })}
+          as='label'
+          gap={2}
+          align='center'
+          sx={{
+            isolation: 'isolate',
+            userSelect: 'none',
+            '&:has(input:focus-visible) > input + span': {
+              outline: '2px solid white',
+              outlineOffset: '2px',
+            },
+            '&:has(input:disabled) > input + span': {
+              opacity: 0.6,
+              cursor: 'not-allowed',
+              pointerEvents: 'none',
+            },
+          }}
         >
-          <Flex
-            sx={t => ({
-              position: 'absolute',
-              left: t.sizes.$0x5,
-              width: t.sizes.$3,
-              height: t.sizes.$3,
-              borderRadius: '50%',
-              backgroundColor: 'white',
-              boxShadow: t.shadows.$switchControl,
-              transform: `translateX(${checked ? t.sizes.$3 : 0})`,
-              transition: 'transform 0.2s',
-              zIndex: 1,
-            })}
+          <input
+            type='checkbox'
+            {...props}
+            ref={ref}
+            role='switch'
+            {...(isControlled ? { checked } : { defaultChecked })}
+            onChange={handleChange}
+            css={{ ...common.visuallyHidden() }}
+            aria-describedby={description ? descriptionId : undefined}
           />
-        </Flex>
-
-        <Flex
-          direction='col'
-          gap={1}
-        >
+          <Span
+            sx={t => {
+              const trackWidth = `calc(${TRACK_INNER_WIDTH(t)} + ${TRACK_PADDING} + ${TRACK_PADDING})`;
+              const trackHeight = `calc(${TRACK_HEIGHT(t)} + ${TRACK_PADDING})`;
+              return {
+                display: 'flex',
+                alignItems: 'center',
+                paddingInline: TRACK_PADDING,
+                width: trackWidth,
+                height: trackHeight,
+                border: `1px solid rgba(118, 118, 132, 0.25)`,
+                backgroundColor: checked ? 'rgba(255, 255, 255, 0.75)' : `rgba(255, 255, 255, 0.1)`,
+                borderRadius: 999,
+                transition: 'background-color 0.2s ease-in-out',
+                '&:hover': {
+                  borderColor: `rgba(118, 118, 132, 0.5)`,
+                },
+              };
+            }}
+          >
+            <Span
+              sx={t => {
+                const size = THUMB_WIDTH(t);
+                const maxTranslateX = `calc(${TRACK_INNER_WIDTH(t)} - ${size} - ${TRACK_PADDING})`;
+                return {
+                  width: size,
+                  height: size,
+                  borderRadius: 9999,
+                  backgroundColor: 'white',
+                  transform: `translateX(${checked ? maxTranslateX : '0'})`,
+                  transition: 'transform 0.2s ease-in-out',
+                  '@media (prefers-reduced-motion: reduce)': {
+                    transition: 'none',
+                  },
+                };
+              }}
+            />
+          </Span>
           <span
             css={[
               basePromptElementStyles,
               css`
                 font-size: 0.875rem;
-                font-weight: 400;
-                line-height: 1.23;
+                font-weight: 500;
+                line-height: 1.25;
                 color: white;
               `,
             ]}
           >
-            Allow personal account
+            {label}
           </span>
-
-          <span
-            css={[
+        </Flex>
+        {description ? (
+          <Span
+            id={descriptionId}
+            sx={t => [
               basePromptElementStyles,
-              css`
-                color: #b4b4b4;
-                font-size: 0.8125rem;
-                font-weight: 400;
-                line-height: 1.23;
-              `,
+              {
+                display: 'block',
+                paddingInlineStart: `calc(${TRACK_INNER_WIDTH(t)} + ${TRACK_PADDING} + ${TRACK_PADDING} + ${t.sizes.$2})`,
+                fontSize: '0.75rem',
+                lineHeight: '1.3333333333',
+                color: '#c3c3c6',
+                textWrap: 'pretty',
+              },
             ]}
           >
-            This is an uncommon setting, meant for applications that sell to both organizations and individual users.
-            Most B2B applications require users to be part of an organization, and should keep this setting disabled.
-          </span>
-        </Flex>
+            {description}
+          </Span>
+        ) : null}
       </Flex>
     );
   },
diff --git a/packages/clerk-js/src/ui/components/devPrompts/KeylessPrompt/index.tsx b/packages/clerk-js/src/ui/components/devPrompts/KeylessPrompt/index.tsx
index 97c4734609f..1eccd1b856b 100644
--- a/packages/clerk-js/src/ui/components/devPrompts/KeylessPrompt/index.tsx
+++ b/packages/clerk-js/src/ui/components/devPrompts/KeylessPrompt/index.tsx
@@ -118,6 +118,7 @@ const KeylessPromptInternal = (_props: KeylessPromptProps) => {
           minWidth: '13.4rem',
           paddingLeft: `${t.space.$3}`,
           borderRadius: '1.25rem',
+          transition: 'all 195ms cubic-bezier(0.2, 0.61, 0.1, 1)',
 
           '&[data-expanded="false"]:hover': {
             background: 'linear-gradient(180deg, rgba(255, 255, 255, 0.20) 0%, rgba(255, 255, 255, 0) 100%), #1f1f1f',
diff --git a/packages/clerk-js/src/ui/components/devPrompts/shared.tsx b/packages/clerk-js/src/ui/components/devPrompts/shared.tsx
index 42618e60646..c959d76ef9c 100644
--- a/packages/clerk-js/src/ui/components/devPrompts/shared.tsx
+++ b/packages/clerk-js/src/ui/components/devPrompts/shared.tsx
@@ -17,7 +17,6 @@ export function PromptContainer({ children, sx, ...props }: React.ComponentProps
           background: 'linear-gradient(180deg, rgba(255, 255, 255, 0.16) 0%, rgba(255, 255, 255, 0) 100%), #1f1f1f',
           boxShadow:
             '0px 0px 0px 0.5px #2F3037 inset, 0px 1px 0px 0px rgba(255, 255, 255, 0.08) inset, 0px 0px 0.8px 0.8px rgba(255, 255, 255, 0.20) inset, 0px 0px 0px 0px rgba(255, 255, 255, 0.72), 0px 16px 36px -6px rgba(0, 0, 0, 0.36), 0px 6px 16px -2px rgba(0, 0, 0, 0.20);',
-          transition: 'all 195ms cubic-bezier(0.2, 0.61, 0.1, 1)',
         },
         sx,
       ]}

From 8fbc59cf50082ca40c6457bcc9c46812e48a77d5 Mon Sep 17 00:00:00 2001
From: Laura Beatris <48022589+LauraBeatris@users.noreply.github.com>
Date: Tue, 18 Nov 2025 19:42:57 -0300
Subject: [PATCH 28/30] Fix `EnableEnvironmentSettingParams`

---
 packages/shared/src/types/devtools.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/shared/src/types/devtools.ts b/packages/shared/src/types/devtools.ts
index 9489daa0588..4a3abea65f2 100644
--- a/packages/shared/src/types/devtools.ts
+++ b/packages/shared/src/types/devtools.ts
@@ -2,7 +2,7 @@ import type { ClerkResource } from './resource';
 
 export type EnableEnvironmentSettingParams = {
   enable_organizations: boolean;
-  allow_personal_account: boolean;
+  organizations_allow_personal_account: boolean;
 };
 
 /**

From 380976c0d0d35d2c3f2c3b691e1501ba7394c98c Mon Sep 17 00:00:00 2001
From: Laura Beatris <48022589+LauraBeatris@users.noreply.github.com>
Date: Tue, 18 Nov 2025 19:59:18 -0300
Subject: [PATCH 29/30] Add a "sign-in to continue" button when unauthenticated

---
 .../devPrompts/EnableOrganizationsPrompt/index.tsx    | 11 +++++++++--
 packages/shared/src/types/devtools.ts                 |  2 +-
 2 files changed, 10 insertions(+), 3 deletions(-)

diff --git a/packages/clerk-js/src/ui/components/devPrompts/EnableOrganizationsPrompt/index.tsx b/packages/clerk-js/src/ui/components/devPrompts/EnableOrganizationsPrompt/index.tsx
index dda7cd40a0d..fc1d98e784e 100644
--- a/packages/clerk-js/src/ui/components/devPrompts/EnableOrganizationsPrompt/index.tsx
+++ b/packages/clerk-js/src/ui/components/devPrompts/EnableOrganizationsPrompt/index.tsx
@@ -335,9 +335,16 @@ const EnableOrganizationsPromptInternal = ({
             {isEnabled ? (
               <PromptButton
                 variant='solid'
-                onClick={() => onSuccess?.()}
+                onClick={() => {
+                  if (!clerk.user) {
+                    void clerk.redirectToSignIn();
+                    clerk.__internal_closeEnableOrganizationsPrompt?.();
+                  } else {
+                    onSuccess?.();
+                  }
+                }}
               >
-                Continue
+                {clerk.user ? 'Continue' : 'Sign in to continue'}
               </PromptButton>
             ) : (
               <>
diff --git a/packages/shared/src/types/devtools.ts b/packages/shared/src/types/devtools.ts
index 4a3abea65f2..7fd63d4299e 100644
--- a/packages/shared/src/types/devtools.ts
+++ b/packages/shared/src/types/devtools.ts
@@ -2,7 +2,7 @@ import type { ClerkResource } from './resource';
 
 export type EnableEnvironmentSettingParams = {
   enable_organizations: boolean;
-  organizations_allow_personal_account: boolean;
+  organization_allow_personal_accounts: boolean;
 };
 
 /**

From 11ba92bf73604772310f507ccaa26c72fb684249 Mon Sep 17 00:00:00 2001
From: Laura Beatris <48022589+LauraBeatris@users.noreply.github.com>
Date: Tue, 18 Nov 2025 20:19:20 -0300
Subject: [PATCH 30/30] Fix isomorphic clerk types

---
 packages/clerk-js/bundlewatch.config.json |  4 ++--
 packages/react/src/isomorphicClerk.ts     | 13 +++++++++++++
 packages/shared/src/types/clerk.ts        | 10 +++++++---
 3 files changed, 22 insertions(+), 5 deletions(-)

diff --git a/packages/clerk-js/bundlewatch.config.json b/packages/clerk-js/bundlewatch.config.json
index e477bfe90cd..4aba9f8b08f 100644
--- a/packages/clerk-js/bundlewatch.config.json
+++ b/packages/clerk-js/bundlewatch.config.json
@@ -3,10 +3,10 @@
     { "path": "./dist/clerk.js", "maxSize": "840KB" },
     { "path": "./dist/clerk.browser.js", "maxSize": "83KB" },
     { "path": "./dist/clerk.channel.browser.js", "maxSize": "83KB" },
-    { "path": "./dist/clerk.legacy.browser.js", "maxSize": "124KB" },
+    { "path": "./dist/clerk.legacy.browser.js", "maxSize": "125KB" },
     { "path": "./dist/clerk.headless*.js", "maxSize": "65KB" },
     { "path": "./dist/ui-common*.js", "maxSize": "117.1KB" },
-    { "path": "./dist/ui-common*.legacy.*.js", "maxSize": "120.1KB" },
+    { "path": "./dist/ui-common*.legacy.*.js", "maxSize": "122KB" },
     { "path": "./dist/vendors*.js", "maxSize": "47KB" },
     { "path": "./dist/coinbase*.js", "maxSize": "38KB" },
     { "path": "./dist/stripe-vendors*.js", "maxSize": "1KB" },
diff --git a/packages/react/src/isomorphicClerk.ts b/packages/react/src/isomorphicClerk.ts
index 2cc1f79631e..b5a318af1a7 100644
--- a/packages/react/src/isomorphicClerk.ts
+++ b/packages/react/src/isomorphicClerk.ts
@@ -2,6 +2,8 @@ import { inBrowser } from '@clerk/shared/browser';
 import { clerkEvents, createClerkEventBus } from '@clerk/shared/clerkEventBus';
 import { loadClerkJsScript } from '@clerk/shared/loadClerkJsScript';
 import type {
+  __internal_AttemptToEnableEnvironmentSettingParams,
+  __internal_AttemptToEnableEnvironmentSettingResult,
   __internal_CheckoutProps,
   __internal_EnableOrganizationsPromptProps,
   __internal_OAuthConsentProps,
@@ -1475,4 +1477,15 @@ export class IsomorphicClerk implements IsomorphicLoadedClerk {
       this.premountMethodCalls.set('signOut', callback);
     }
   };
+
+  __internal_attemptToEnableEnvironmentSetting = (
+    options: __internal_AttemptToEnableEnvironmentSettingParams,
+  ): __internal_AttemptToEnableEnvironmentSettingResult | void => {
+    const callback = () => this.clerkjs?.__internal_attemptToEnableEnvironmentSetting(options);
+    if (this.clerkjs && this.loaded) {
+      return callback() as __internal_AttemptToEnableEnvironmentSettingResult;
+    } else {
+      this.premountMethodCalls.set('__internal_attemptToEnableEnvironmentSetting', callback);
+    }
+  };
 }
diff --git a/packages/shared/src/types/clerk.ts b/packages/shared/src/types/clerk.ts
index df4e026d99f..ad9038f2b41 100644
--- a/packages/shared/src/types/clerk.ts
+++ b/packages/shared/src/types/clerk.ts
@@ -323,9 +323,9 @@ export interface Clerk {
   /**
    * Attempts to enable a environment setting from a development instance, prompting if disabled.
    */
-  __internal_attemptToEnableEnvironmentSetting: (options: __internal_AttemptToEnableEnvironmentSettingParams) => {
-    status: 'enabled' | 'prompt-shown' | 'rejected';
-  };
+  __internal_attemptToEnableEnvironmentSetting: (
+    options: __internal_AttemptToEnableEnvironmentSettingParams,
+  ) => __internal_AttemptToEnableEnvironmentSettingResult;
 
   /**
    * Opens the Clerk Enable Organizations prompt for development instance
@@ -1471,6 +1471,10 @@ export type __internal_AttemptToEnableEnvironmentSettingParams = {
   onClose?: () => void;
 };
 
+export type __internal_AttemptToEnableEnvironmentSettingResult = {
+  status: 'enabled' | 'prompt-shown' | 'rejected';
+};
+
 type GoogleOneTapRedirectUrlProps = SignInForceRedirectUrl & SignUpForceRedirectUrl;
 
 export type GoogleOneTapProps = GoogleOneTapRedirectUrlProps & {