(chore): /app/ --> app/ for file names (#1783)

docs/components/organization/create-organization.mdx

@@ -59,7 +59,7 @@ The following example includes a basic implementation of the `<CreateOrganizatio
 
 <Tabs items={["Next.js", "React", "Remix", "Astro"]}>
   <Tab>
-    ```jsx {{ filename: '/app/create-organization/[[...create-organization]]/page.tsx' }}
+    ```jsx {{ filename: 'app/create-organization/[[...create-organization]]/page.tsx' }}
     import { CreateOrganization } from '@clerk/nextjs'
 
     export default function CreateOrganizationPage() {

docs/components/organization/organization-list.mdx

@@ -64,7 +64,7 @@ All props are optional.
 
 <Tabs items={["Next.js", "React", "Remix", "Astro"]}>
   <Tab>
-    ```jsx {{ filename: '/app/discover/page.tsx' }}
+    ```jsx {{ filename: 'app/discover/page.tsx' }}
     import { OrganizationList } from '@clerk/nextjs'
 
     export default function OrganizationListPage() {

docs/components/organization/organization-profile.mdx

@@ -56,7 +56,7 @@ All props are optional.
   <Tab>
     You can embed the `<OrganizationProfile />` component using the [Next.js optional catch-all route](https://nextjs.org/docs/pages/building-your-application/routing/dynamic-routes#optional-catch-all-routes). This allows you to redirect the user inside your application.
 
-    ```jsx {{ filename: '/app/organization-profile/[[...organization-profile]]/page.tsx' }}
+    ```jsx {{ filename: 'app/organization-profile/[[...organization-profile]]/page.tsx' }}
     import { OrganizationProfile } from '@clerk/nextjs'
 
     export default function OrganizationProfilePage() {

docs/components/organization/organization-switcher.mdx

@@ -103,7 +103,7 @@ All props below are optional.
 
 <Tabs items={["Next.js", "React", "Remix", "Astro"]}>
   <Tab>
-    ```jsx {{ filename: '/app/organization-switcher/[[...organization-switcher]]/page.tsx' }}
+    ```jsx {{ filename: 'app/organization-switcher/[[...organization-switcher]]/page.tsx' }}
     import { OrganizationSwitcher } from '@clerk/nextjs'
 
     export default function OrganizationSwitcherPage() {

docs/components/protect.mdx

@@ -158,7 +158,7 @@ The following example uses `<Protect>`'s `condition` prop to conditionally rende
 
 <Tabs items={["Next.js", "Astro"]}>
   <Tab>
-    ```tsx {{ filename: '/app/dashboard/settings/layout.tsx' }}
+    ```tsx {{ filename: 'app/dashboard/settings/layout.tsx' }}
     import type { PropsWithChildren } from 'react'
     import { Protect } from '@clerk/nextjs'
 

docs/components/user/user-profile.mdx

@@ -53,7 +53,7 @@ All props are optional.
     You can embed the `<UserProfile />` component using the [Next.js optional catch-all route](https://nextjs.org/docs/pages/building-your-application/routing/dynamic-routes#optional-catch-all-routes). This allows you to redirect the user inside your application.
 
     <CodeBlockTabs options={["App Router", "Pages Router"]}>
-      ```jsx {{ filename: '/app/user-profile/[[...user-profile]]/page.tsx' }}
+      ```jsx {{ filename: 'app/user-profile/[[...user-profile]]/page.tsx' }}
       import { UserProfile } from '@clerk/nextjs'
 
       const UserProfilePage = () => <UserProfile path="/user-profile" />

docs/components/waitlist.mdx

@@ -53,7 +53,7 @@ The following example includes a basic implementation of the `<Waitlist />` comp
 
 <Tabs items={["Next.js", "React"]}>
   <Tab>
-    ```jsx {{ filename: '/app/waitlist/[[...waitlist]]/page.tsx' }}
+    ```jsx {{ filename: 'app/waitlist/[[...waitlist]]/page.tsx' }}
     import { Waitlist } from '@clerk/nextjs'
 
     export default function WaitlistPage() {

docs/custom-flows/email-password.mdx

@@ -34,7 +34,7 @@ This guide will walk you through how to build a custom email/password sign-up an
     <Tab>
       This example is written for Next.js App Router but it can be adapted for any React meta framework, such as Remix.
 
-      ```tsx {{ filename: '/app/sign-up/[[...sign-up]]/page.tsx', collapsible: true }}
+      ```tsx {{ filename: 'app/sign-up/[[...sign-up]]/page.tsx', collapsible: true }}
       'use client'
 
       import * as React from 'react'
@@ -478,7 +478,7 @@ This guide will walk you through how to build a custom email/password sign-up an
     <Tab>
       This example is written for Next.js App Router but it can be adapted for any React meta framework, such as Remix.
 
-      ```tsx {{ filename: '/app/sign-in/[[...sign-in]]/page.tsx', collapsible: true }}
+      ```tsx {{ filename: 'app/sign-in/[[...sign-in]]/page.tsx', collapsible: true }}
       'use client'
 
       import * as React from 'react'

docs/custom-flows/manage-sms-based-mfa.mdx

@@ -33,7 +33,7 @@ One of the options that Clerk supports for MFA is **SMS verification codes**. Th
 
   <Tabs items={["Manage MFA page", "Add phone number page"]}>
     <Tab>
-      ```tsx {{ filename: '/app/account/manage-mfa/page.tsx', collapsible: true }}
+      ```tsx {{ filename: 'app/account/manage-mfa/page.tsx', collapsible: true }}
       'use client'
 
       import * as React from 'react'
@@ -222,7 +222,7 @@ One of the options that Clerk supports for MFA is **SMS verification codes**. Th
     </Tab>
 
     <Tab>
-      ```tsx {{ filename: '/app/account/add-phone/page.tsx', collapsible: true }}
+      ```tsx {{ filename: 'app/account/add-phone/page.tsx', collapsible: true }}
       'use client'
 
       import * as React from 'react'

docs/custom-flows/manage-totp-based-mfa.mdx

@@ -36,7 +36,7 @@ One of the options that Clerk supports for MFA is **Authenticator applications (
 
       <Tabs items={["Manage MFA page", "Add TOTP page"]}>
         <Tab>
-          ```tsx {{ filename: '/app/account/manage-mfa/page.tsx', collapsible: true }}
+          ```tsx {{ filename: 'app/account/manage-mfa/page.tsx', collapsible: true }}
           'use client'
 
           import * as React from 'react'
@@ -158,7 +158,7 @@ One of the options that Clerk supports for MFA is **Authenticator applications (
         </Tab>
 
         <Tab>
-          ```tsx {{ filename: '/app/account/manage-mfa/add/page.tsx', collapsible: true }}
+          ```tsx {{ filename: 'app/account/manage-mfa/add/page.tsx', collapsible: true }}
           'use client'
 
           import { useUser } from '@clerk/nextjs'

docs/custom-flows/sign-out.mdx

@@ -20,7 +20,7 @@ The `signOut()` function signs a user out of all sessions in a [multi-session ap
 
     This example is written for Next.js App Router but can be adapted for any React meta framework, such as Remix.
 
-    ```jsx {{ filename: '/app/components/SignOutButton.tsx' }}
+    ```jsx {{ filename: 'app/components/SignOutButton.tsx' }}
     'use client'
 
     import { useClerk } from '@clerk/nextjs'

docs/customization/elements/examples/shadcn-ui.mdx

@@ -55,7 +55,7 @@ You must also configure the appropriate settings in Clerk:
   },
 ]}
 >
-  ```tsx {{ filename: '/app/sign-up/[[...sign-up]]/page.tsx', collapsible: true }}
+  ```tsx {{ filename: 'app/sign-up/[[...sign-up]]/page.tsx', collapsible: true }}
   'use client'
   import * as Clerk from '@clerk/elements/common'
   import * as SignUp from '@clerk/elements/sign-up'
@@ -321,7 +321,7 @@ You must also configure the appropriate settings in Clerk:
   },
 ]}
 >
-  ```tsx {{ filename: '/app/sign-in/[[...sign-in]]/page.tsx', collapsible: true }}
+  ```tsx {{ filename: 'app/sign-in/[[...sign-in]]/page.tsx', collapsible: true }}
   'use client'
   import * as Clerk from '@clerk/elements/common'
   import * as SignIn from '@clerk/elements/sign-in'

docs/customization/elements/examples/sign-in.mdx

@@ -26,7 +26,7 @@ Before you build your sign-in flow, you need to configure the appropriate settin
   }
 ]}
 >
-  ```tsx {{ filename: '/app/sign-in/[[...sign-in]]/page.tsx', collapsible: true }}
+  ```tsx {{ filename: 'app/sign-in/[[...sign-in]]/page.tsx', collapsible: true }}
   'use client'
 
   import * as Clerk from '@clerk/elements/common'
@@ -127,7 +127,7 @@ Before you build your sign-in flow, you need to configure the appropriate settin
   }
 ]}
 >
-  ```tsx {{ filename: '/app/sign-in/[[...sign-in]]/page.tsx', collapsible: true }}
+  ```tsx {{ filename: 'app/sign-in/[[...sign-in]]/page.tsx', collapsible: true }}
   'use client'
 
   import * as Clerk from '@clerk/elements/common'
@@ -222,7 +222,7 @@ Before you build your sign-in flow, you need to configure the appropriate settin
   }
 ]}
 >
-  ```tsx {{ filename: '/app/sign-in/[[...sign-in]]/page.tsx', collapsible: true }}
+  ```tsx {{ filename: 'app/sign-in/[[...sign-in]]/page.tsx', collapsible: true }}
   'use client'
 
   import * as Clerk from '@clerk/elements/common'
@@ -382,7 +382,7 @@ Before you build your sign-in flow, you need to configure the appropriate settin
   }
 ]}
 >
-  ```tsx {{ filename: '/app/sign-in/[[...sign-in]]/page.tsx', collapsible: true }}
+  ```tsx {{ filename: 'app/sign-in/[[...sign-in]]/page.tsx', collapsible: true }}
   'use client'
 
   import * as Clerk from '@clerk/elements/common'

docs/customization/elements/examples/sign-up.mdx

@@ -25,7 +25,7 @@ Before you build your sign-up flow, you need to configure the appropriate settin
   }
 ]}
 >
-  ```tsx {{ filename: '/app/sign-up/[[...sign-up]]/page.tsx', collapsible: true }}
+  ```tsx {{ filename: 'app/sign-up/[[...sign-up]]/page.tsx', collapsible: true }}
   'use client'
 
   import * as Clerk from '@clerk/elements/common'
@@ -175,7 +175,7 @@ Before you build your sign-up flow, you need to configure the appropriate settin
   }
 ]}
 >
-  ```tsx {{ filename: '/app/sign-up/[[...sign-up]]/page.tsx', collapsible: true }}
+  ```tsx {{ filename: 'app/sign-up/[[...sign-up]]/page.tsx', collapsible: true }}
   'use client'
 
   import * as Clerk from '@clerk/elements/common'

docs/customization/elements/guides/sign-in.mdx

@@ -38,7 +38,7 @@ description: Learn how to build a complete sign-in form with Clerk Elements.
 
   Create a new route in your Next.js application. The route needs to be an [optional catch-all route](https://nextjs.org/docs/pages/building-your-application/routing/dynamic-routes#optional-catch-all-segments) so the sign-in flow can handled nested paths, as shown in the following example:
 
-  ```tsx {{ filename: '/app/sign-in/[[...sign-in]]/page.tsx' }}
+  ```tsx {{ filename: 'app/sign-in/[[...sign-in]]/page.tsx' }}
   'use client'
 
   import * as Clerk from '@clerk/elements/common'
@@ -58,7 +58,7 @@ description: Learn how to build a complete sign-in form with Clerk Elements.
 
   The Clerk authentication flows are made up of **steps**. Steps handle rendering the UI for each part of the flow. To allow users to create a sign-in attempt, the `start` step needs to be rendered. The following example does so with the `<SignIn.Step>` component:
 
-  ```tsx {{ filename: '/app/sign-in/[[...sign-in]]/page.tsx', mark: [[9, 11]] }}
+  ```tsx {{ filename: 'app/sign-in/[[...sign-in]]/page.tsx', mark: [[9, 11]] }}
   'use client'
 
   import * as Clerk from '@clerk/elements/common'
@@ -79,7 +79,7 @@ description: Learn how to build a complete sign-in form with Clerk Elements.
 
   Make it functional by adding input fields. The following example uses the `<Clerk.Field>` component to render an `identifier` field, as well as the `<Connection>` component to allow users to sign in with a social connection, like Google:
 
-  ```tsx {{ filename: '/app/sign-in/[[...sign-in]]/page.tsx', mark: [[12, 20]] }}
+  ```tsx {{ filename: 'app/sign-in/[[...sign-in]]/page.tsx', mark: [[12, 20]] }}
   'use client'
 
   import * as Clerk from '@clerk/elements/common'
@@ -117,7 +117,7 @@ description: Learn how to build a complete sign-in form with Clerk Elements.
 
   The following example demonstrates how to conditionally render a form for the `email_code` strategy:
 
-  ```tsx {{ filename: '/app/sign-in/[[...sign-in]]/page.tsx', mark: [[23, 38]] }}
+  ```tsx {{ filename: 'app/sign-in/[[...sign-in]]/page.tsx', mark: [[23, 38]] }}
   'use client'
 
   import * as Clerk from '@clerk/elements/common'
@@ -167,7 +167,7 @@ description: Learn how to build a complete sign-in form with Clerk Elements.
 
   If your instance is configured to support authenticating with passwords, you must add a few additional steps and verification strategies. You can choose if you want to support providing a password in the `start` step with an additional field, or as an additional verification strategy. For this guide, add it as a standalone verification strategy.
 
-  ```tsx {{ filename: '/app/sign-in/[[...sign-in]]/page.tsx', mark: [[39, 65], [68, 94]] }}
+  ```tsx {{ filename: 'app/sign-in/[[...sign-in]]/page.tsx', mark: [[39, 65], [68, 94]] }}
   'use client'
 
   import * as Clerk from '@clerk/elements/common'

docs/customization/elements/guides/sign-up.mdx

@@ -38,7 +38,7 @@ description: Learn how to build a complete sign-up form with Clerk Elements.
 
   Create a new route in your Next.js application. The route needs to be an [optional catch-all route](https://nextjs.org/docs/pages/building-your-application/routing/dynamic-routes#optional-catch-all-segments) so the sign-up flow can handled nested paths, as shown in the following example:
 
-  ```tsx {{ filename: '/app/sign-up/[[...sign-up]]/page.tsx' }}
+  ```tsx {{ filename: 'app/sign-up/[[...sign-up]]/page.tsx' }}
   'use client'
 
   import * as Clerk from '@clerk/elements/common'
@@ -58,7 +58,7 @@ description: Learn how to build a complete sign-up form with Clerk Elements.
 
   The Clerk authentication flows are made up of **steps**. Steps handle rendering the UI for each part of the flow. To allow users to create a sign-up attempt, the `start` step needs to be rendered. The following example does so with the `<SignUp.Step>` component:
 
-  ```tsx {{ filename: '/app/sign-up/[[...sign-up]]/page.tsx', mark: [[9, 11]] }}
+  ```tsx {{ filename: 'app/sign-up/[[...sign-up]]/page.tsx', mark: [[9, 11]] }}
   'use client'
 
   import * as Clerk from '@clerk/elements/common'
@@ -79,7 +79,7 @@ description: Learn how to build a complete sign-up form with Clerk Elements.
 
   Make it functional by adding input fields. The following example uses the `<Clerk.Field>` component to render the `emailAddress` and `username` fields, as well as the `<Connection>` component to allow users to sign up with a social connection, like Google:
 
-  ```tsx {{ filename: '/app/sign-up/[[...sign-up]]/page.tsx', mark: [[12, 34]] }}
+  ```tsx {{ filename: 'app/sign-up/[[...sign-up]]/page.tsx', mark: [[12, 34]] }}
   'use client'
 
   import * as Clerk from '@clerk/elements/common'
@@ -128,7 +128,7 @@ description: Learn how to build a complete sign-up form with Clerk Elements.
 
   The following example demonstrates how to conditionally render a form for the `phone_code` and `email_code` strategies:
 
-  ```tsx {{ filename: '/app/sign-up/[[...sign-up]]/page.tsx', mark: [[35, 59]] }}
+  ```tsx {{ filename: 'app/sign-up/[[...sign-up]]/page.tsx', mark: [[35, 59]] }}
   'use client'
 
   import * as Clerk from '@clerk/elements/common'
@@ -199,7 +199,7 @@ description: Learn how to build a complete sign-up form with Clerk Elements.
 
   Should a user attempt to sign up via Google while a username is a required field, the `continue` step will be necessary to accept the username. The `<SignUp.Step>` component will display any additional required fields.
 
-  ```tsx {{ filename: '/app/sign-up/[[...sign-up]]/page.tsx', mark: [[35, 45]] }}
+  ```tsx {{ filename: 'app/sign-up/[[...sign-up]]/page.tsx', mark: [[35, 45]] }}
   'use client'
 
   import * as Clerk from '@clerk/elements/common'

docs/customization/elements/guides/styling.mdx

@@ -13,7 +13,7 @@ You can style Clerk Elements components with the following props:
 
 This guide will demonstrate multiple different styling approaches using the following basic sign-in flow as a starting point:
 
-```tsx {{ filename: '/app/sign-in/[[...sign-in]]/page.tsx' }}
+```tsx {{ filename: 'app/sign-in/[[...sign-in]]/page.tsx' }}
 'use client'
 
 import * as Clerk from '@clerk/elements/common'
@@ -50,7 +50,7 @@ export default function SignInPage() {
 
 If you are already using [Tailwind CSS](https://tailwindcss.com/), no additional setup is required. Classes from Tailwind can be applied to most Clerk Elements components. Use your editor's IntelliSense to see if `className` is a valid prop on a component you want to style.
 
-```tsx {{ filename: '/app/sign-in/[[...sign-in]]/page.tsx' }}
+```tsx {{ filename: 'app/sign-in/[[...sign-in]]/page.tsx' }}
 'use client'
 
 import * as Clerk from '@clerk/elements/common'
@@ -97,7 +97,7 @@ export default function SignInPage() {
 
 Many of the Clerk Elements components accept an `asChild` prop that allows you to swap out the rendered element. This is useful if you have an existing design system or component library that you wish to use with Clerk Elements.
 
-```tsx {{ filename: '/app/sign-in/[[...sign-in]]/page.tsx' }}
+```tsx {{ filename: 'app/sign-in/[[...sign-in]]/page.tsx' }}
 'use client'
 
 import * as Clerk from '@clerk/elements/common'
@@ -161,7 +161,7 @@ const CustomInput = forwardRef(function CustomInput(props, forwardedRef) {
 
 Classes from an imported CSS module can be applied to most Clerk Elements components with `className`.
 
-```tsx {{ filename: '/app/sign-in/[[...sign-in]]/page.tsx' }}
+```tsx {{ filename: 'app/sign-in/[[...sign-in]]/page.tsx' }}
 'use client'
 
 import * as Clerk from '@clerk/elements/common'
@@ -205,7 +205,7 @@ export default function SignInPage() {
 
 You can also use inline styles with Clerk Elements. This is useful when you need to apply styles conditionally or  avoid creating a separate CSS file.
 
-```tsx {{ filename: '/app/sign-in/[[...sign-in]]/page.tsx' }}
+```tsx {{ filename: 'app/sign-in/[[...sign-in]]/page.tsx' }}
 'use client'
 
 import * as Clerk from '@clerk/elements/common'

docs/customization/organization-profile.mdx

@@ -65,7 +65,7 @@ To add a custom page to the `<OrganizationProfile />` component, use the `<Organ
 The following example demonstrates two ways that you can render content in the `<OrganizationSwitcher.OrganizationProfilePage />` or `<OrganizationProfile.Page />` component: as a component or as a direct child.
 
 <CodeBlockTabs options={["<OrganizationSwitcher />", "Dedicated page"]}>
-  ```tsx {{ filename: '/app/components/Header.tsx' }}
+  ```tsx {{ filename: 'app/components/Header.tsx' }}
   'use client'
 
   import { OrganizationSwitcher } from '@clerk/nextjs'
@@ -117,7 +117,7 @@ The following example demonstrates two ways that you can render content in the `
   export default Header
   ```
 
-  ```tsx {{ filename: '/app/organization-profile/[[...organization-profile]]/page.tsx' }}
+  ```tsx {{ filename: 'app/organization-profile/[[...organization-profile]]/page.tsx' }}
   'use client'
 
   import { OrganizationProfile } from '@clerk/nextjs'
@@ -247,7 +247,7 @@ You can add external links to the `<OrganizationProfile />` navigation sidebar u
 The following example adds a link to the homepage in the navigation sidebar of the `<OrganizationProfile />` component.
 
 <CodeBlockTabs options={["<OrganizationSwitcher />", "Dedicated page"]}>
-  ```tsx {{ filename: '/app/components/Header.tsx' }}
+  ```tsx {{ filename: 'app/components/Header.tsx' }}
   'use client'
 
   import { OrganizationSwitcher } from '@clerk/nextjs'
@@ -275,7 +275,7 @@ The following example adds a link to the homepage in the navigation sidebar of t
   export default Header
   ```
 
-  ```tsx {{ filename: '/app/organization-profile/[[...organization-profile]]/page.tsx' }}
+  ```tsx {{ filename: 'app/organization-profile/[[...organization-profile]]/page.tsx' }}
   'use client'
 
   import { OrganizationProfile } from '@clerk/nextjs'
@@ -306,7 +306,7 @@ Note that when reordering default routes, the first item in the navigation sideb
 
 <Tabs items={["<OrganizationSwitcher />", "Dedicated Page"]}>
   <Tab>
-    ```tsx {{ filename: '/app/components/Header.tsx' }}
+    ```tsx {{ filename: 'app/components/Header.tsx' }}
     'use client'
 
     import { OrganizationSwitcher } from '@clerk/nextjs'
@@ -358,7 +358,7 @@ Note that when reordering default routes, the first item in the navigation sideb
 
     In the following example, `path` is set to `/organization-profile`, so the `<CustomPage />` is rendered under the `/organization-profile` path.
 
-    ```tsx {{ filename: '/app/organization-profile/[[...organization-profile]]/page.tsx' }}
+    ```tsx {{ filename: 'app/organization-profile/[[...organization-profile]]/page.tsx' }}
     'use client'
 
     import { OrganizationProfile } from '@clerk/nextjs'

docs/customization/themes.mdx

@@ -490,7 +490,7 @@ To apply a theme to a single Clerk component, pass the `appearance` prop to the
 <Tabs items={["Next.js", "React", "Remix", "Astro"]}>
   <Tab>
     <CodeBlockTabs options={["App Router", "Pages Router"]}>
-      ```tsx {{ filename: '/app/sign-in/[[...sign-in]]/page.tsx', mark: [2, [7, 9]] }}
+      ```tsx {{ filename: 'app/sign-in/[[...sign-in]]/page.tsx', mark: [2, [7, 9]] }}
       import { SignIn } from '@clerk/nextjs'
       import { dark } from '@clerk/themes'