fix(e2e): merge vincent and use correct appearance options prop

Author: nikosdouvlis

.changeset/odd-rice-swim.md

@@ -0,0 +1,9 @@
+---
+'@clerk/ui': major
+---
+
+Removes `simple` theme export from UI package in favor of using the `simple` theme via the appearance prop:
+
+```tsx
+<ClerkProvider appearance={{ theme: 'simple' }} />
+```

.changeset/rename-appearance-layout-to-options.md

@@ -0,0 +1,6 @@
+---
+'@clerk/ui': major
+---
+
+Renamed `appearance.layout` to `appearance.options` across all appearance configurations. This is a breaking change - update all instances of `appearance.layout` to `appearance.options` in your codebase.
+

integration/templates/astro-hybrid/astro.config.mjs

@@ -7,7 +7,7 @@ export default defineConfig({
   integrations: [
     clerk({
       appearance: {
-        layout: {
+        options: {
           showOptionalFields: true,
         },
       },

integration/templates/astro-node/astro.config.mjs

@@ -13,7 +13,7 @@ export default defineConfig({
   integrations: [
     clerk({
       appearance: {
-        layout: {
+        options: {
           showOptionalFields: true,
         },
       },

integration/templates/custom-flows-react-vite/src/main.tsx

@@ -24,7 +24,7 @@ createRoot(document.getElementById('root')!).render(
           clerkJSUrl={import.meta.env.VITE_CLERK_JS_URL as string}
           clerkUiUrl={import.meta.env.VITE_CLERK_UI_URL as string}
           appearance={{
-            layout: {
+            options: {
               showOptionalFields: true,
             },
           }}

integration/templates/expo-web/app/_layout.tsx

@@ -11,7 +11,7 @@ export default function RootLayout() {
       clerkJSUrl={process.env.EXPO_PUBLIC_CLERK_JS_URL}
       clerkUiUrl={process.env.EXPO_PUBLIC_CLERK_UI_URL}
       appearance={{
-        layout: {
+        options: {
           showOptionalFields: true,
         },
       }}

integration/templates/next-app-router-quickstart/src/app/layout.tsx

@@ -13,7 +13,7 @@ export default function RootLayout({ children }: { children: React.ReactNode })
   return (
     <ClerkProvider
       appearance={{
-        layout: {
+        options: {
           showOptionalFields: true,
         },
       }}

integration/templates/next-app-router/src/app/jwt-v2-organizations/(tests)/has-ssr/page.tsx

@@ -6,7 +6,7 @@ export default function Page() {
     <ClerkProvider
       dynamic
       appearance={{
-        layout: {
+        options: {
           showOptionalFields: true,
         },
       }}

integration/templates/next-app-router/src/app/layout.tsx

@@ -13,7 +13,7 @@ export default function RootLayout({ children }: { children: React.ReactNode })
   return (
     <ClerkProvider
       appearance={{
-        layout: {
+        options: {
           showOptionalFields: true,
           // Icon buttons only contain accessible labels when they use an icon; our generated letter icon does not have
           // an accessible label. Using the "blockButton" variant ensures that the button contains a visible label that

integration/templates/next-app-router/src/app/settings/useAuth-has/layout.tsx

@@ -5,7 +5,7 @@ export default function Layout({ children }: { children: React.ReactNode }) {
     <ClerkProvider
       dynamic
       appearance={{
-        layout: {
+        options: {
           showOptionalFields: true,
         },
       }}