add small feature flag

Co-authored-by: Matti Nannt <mail@matthiasnannt.com>

.env.example

@@ -88,7 +88,7 @@ PASSWORD_RESET_DISABLED=1
 # Email login. Disable the ability for users to login with email.
 # EMAIL_AUTH_DISABLED=1
 
-# Team Invite. Disable the ability for invited users to create an account.
+# Organization Invite. Disable the ability for invited users to create an account.
 # INVITE_DISABLED=1
 
 ##########
@@ -154,11 +154,11 @@ SLACK_CLIENT_SECRET=
 # Enterprise License Key
 ENTERPRISE_LICENSE_KEY=
 
-# Automatically assign new users to a specific team and role within that team
-# Insert an existing team id or generate a valid CUID for a new one at https://www.getuniqueid.com/cuid (e.g. cjld2cjxh0000qzrmn831i7rn)
+# Automatically assign new users to a specific organization and role within that organization
+# Insert an existing organization id or generate a valid CUID for a new one at https://www.getuniqueid.com/cuid (e.g. cjld2cjxh0000qzrmn831i7rn)
 # (Role Management is an Enterprise feature)
-# DEFAULT_TEAM_ID=
-# DEFAULT_TEAM_ROLE=admin
+# DEFAULT_ORGANIZATION_ID=
+# DEFAULT_ORGANIZATION_ROLE=admin
 
 # set to 1 to skip onboarding for new users
 # ONBOARDING_DISABLED=1

.github/workflows/build-formbricks-com.yml

@@ -1,26 +0,0 @@
-name: Build formbricks-com
-on:
-  workflow_call:
-jobs:
-  build:
-    name: Build Formbricks-com
-    runs-on: ubuntu-latest
-    timeout-minutes: 30
-
-    steps:
-      - name: Checkout repo
-        uses: actions/checkout@v3
-
-      - name: Setup Node.js 20.x
-        uses: actions/setup-node@v3
-        with:
-          node-version: 20.x
-
-      - name: Install pnpm
-        uses: pnpm/action-setup@v2
-
-      - name: Install dependencies
-        run: pnpm install --config.platform=linux --config.architecture=x64
-
-      - name: Build Formbricks-com
-        run: pnpm build --filter=formbricks-com...

.github/workflows/kamal-deploy.yml

@@ -56,7 +56,7 @@ jobs:
       GOOGLE_SHEETS_REDIRECT_URL: ${{ secrets.GOOGLE_SHEETS_REDIRECT_URL }}
       AIRTABLE_CLIENT_ID: ${{ secrets.AIRTABLE_CLIENT_ID }}
       ENTERPRISE_LICENSE_KEY: ${{ secrets.ENTERPRISE_LICENSE_KEY }}
-      DEFAULT_TEAM_ID: ${{ vars.DEFAULT_TEAM_ID }}
+      DEFAULT_ORGANIZATION_ID: ${{ vars.DEFAULT_ORGANIZATION_ID }}
       ONBOARDING_DISABLED: ${{ vars.ONBOARDING_DISABLED }}
       CUSTOMER_IO_API_KEY: ${{ secrets.CUSTOMER_IO_API_KEY }}
       CUSTOMER_IO_SITE_ID: ${{ secrets.CUSTOMER_IO_SITE_ID }}

.github/workflows/kamal-setup.yml

@@ -53,7 +53,7 @@ jobs:
       GOOGLE_SHEETS_REDIRECT_URL: ${{ secrets.GOOGLE_SHEETS_REDIRECT_URL }}
       AIRTABLE_CLIENT_ID: ${{ secrets.AIRTABLE_CLIENT_ID }}
       ENTERPRISE_LICENSE_KEY: ${{ secrets.ENTERPRISE_LICENSE_KEY }}
-      DEFAULT_TEAM_ID: ${{ vars.DEFAULT_TEAM_ID }}
+      DEFAULT_ORGANIZATION_ID: ${{ vars.DEFAULT_ORGANIZATION_ID }}
       ONBOARDING_DISABLED: ${{ vars.ONBOARDING_DISABLED }}
       CUSTOMER_IO_API_KEY: ${{ secrets.CUSTOMER_IO_API_KEY }}
       CUSTOMER_IO_SITE_ID: ${{ secrets.CUSTOMER_IO_SITE_ID }}

.github/workflows/release-docker-github.yml

@@ -1,4 +1,4 @@
-name: Docker
+name: Docker Release to Github
 
 # This workflow uses actions that are not certified by GitHub.
 # They are provided by a third-party and are governed by

README.md

@@ -82,7 +82,7 @@ Formbricks is both a free and open source survey platform - and a privacy-first
 
 - 🔗 Create shareable **link surveys**.
 
-- 👨‍👩‍👦 Invite your team members to **collaborate** on your surveys.
+- 👨‍👩‍👦 Invite your organization members to **collaborate** on your surveys.
 
 - 🔌 Integrate Formbricks with **Slack, Notion, Zapier, n8n and more**.
 

apps/demo/components/LayoutApp.tsx

@@ -1,6 +1,6 @@
-import Sidebar from "./Sidebar";
+import { Sidebar } from "./Sidebar";
 
-export default function LayoutApp({ children }: { children: React.ReactNode }) {
+export const LayoutApp = ({ children }: { children: React.ReactNode }) => {
   return (
     <div className="min-h-full">
       {/* Static sidebar for desktop */}
@@ -10,4 +10,4 @@ export default function LayoutApp({ children }: { children: React.ReactNode }) {
       <div className="flex flex-1 flex-col lg:pl-64">{children}</div>
     </div>
   );
-}
+};

apps/demo/components/Sidebar.tsx

@@ -26,7 +26,7 @@ const secondaryNavigation = [
   { name: "Privacy", href: "#", icon: ShieldCheckIcon },
 ];
 
-export default function Sidebar({}) {
+export const Sidebar = () => {
   return (
     <div className="flex flex-grow flex-col overflow-y-auto bg-cyan-700 pb-4 pt-5">
       <nav
@@ -63,4 +63,4 @@ export default function Sidebar({}) {
       </nav>
     </div>
   );
-}
+};

apps/demo/components/SurveySwitch.tsx

@@ -1,5 +1,3 @@
-import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@formbricks/ui/Select";
-
 interface SurveySwitchProps {
   value: "website" | "app";
   formbricks: any;
@@ -7,23 +5,18 @@ interface SurveySwitchProps {
 
 export const SurveySwitch = ({ value, formbricks }: SurveySwitchProps) => {
   return (
-    <Select
+    <select
       value={value}
-      onValueChange={(v) => {
+      onChange={(v) => {
         formbricks.logout();
-        window.location.href = `/${v}`;
+        window.location.href = `/${v.target.value}`;
       }}>
-      <SelectTrigger className="w-[180px] px-4">
-        <SelectValue placeholder="Theme" />
-      </SelectTrigger>
-      <SelectContent>
-        <SelectItem value="website" className="h-10 px-4 hover:bg-slate-100">
-          Website Surveys
-        </SelectItem>
-        <SelectItem value="app" className="hover:bg-slate-10 h-10 px-4">
-          App Surveys
-        </SelectItem>
-      </SelectContent>
-    </Select>
+      <option value="website" className="h-10 px-4 hover:bg-slate-100">
+        Website Surveys
+      </option>
+      <option value="app" className="hover:bg-slate-10 h-10 px-4">
+        App Surveys
+      </option>
+    </select>
   );
 };

apps/demo/lib/utils.ts

@@ -1,3 +1,3 @@
-export function classNames(...classes: any) {
+export const classNames = (...classes: any) => {
   return classes.filter(Boolean).join(" ");
-}
+};

apps/demo/next.config.mjs

@@ -1,7 +1,6 @@
 /** @type {import('next').NextConfig} */
 const nextConfig = {
   reactStrictMode: true,
-  transpilePackages: ["@formbricks/ui"],
   async redirects() {
     return [
       {
@@ -25,4 +24,4 @@ const nextConfig = {
   },
 };
 
-module.exports = nextConfig;
+export default nextConfig;

apps/demo/package.json

@@ -13,7 +13,7 @@
   "dependencies": {
     "@formbricks/js": "workspace:*",
     "@formbricks/ui": "workspace:*",
-    "lucide-react": "^0.378.0",
+    "lucide-react": "^0.379.0",
     "next": "14.2.3",
     "react": "18.3.1",
     "react-dom": "18.3.1"

apps/demo/pages/_app.tsx

@@ -3,7 +3,7 @@ import Head from "next/head";
 
 import "../styles/globals.css";
 
-export default function App({ Component, pageProps }: AppProps) {
+const App = ({ Component, pageProps }: AppProps) => {
   return (
     <>
       <Head>
@@ -18,4 +18,6 @@ export default function App({ Component, pageProps }: AppProps) {
       <Component {...pageProps} />
     </>
   );
-}
+};
+
+export default App;

apps/demo/pages/_document.tsx

@@ -1,6 +1,6 @@
 import { Head, Html, Main, NextScript } from "next/document";
 
-export default function Document() {
+const Document = () => {
   return (
     <Html lang="en" className="h-full bg-slate-50">
       <Head />
@@ -10,4 +10,6 @@ export default function Document() {
       </body>
     </Html>
   );
-}
+};
+
+export default Document;

apps/demo/pages/app/index.tsx

@@ -9,7 +9,7 @@ import fbsetup from "../../public/fb-setup.png";
 
 declare const window: any;
 
-export default function AppPage({}) {
+const AppPage = ({}) => {
   const [darkMode, setDarkMode] = useState(false);
   const router = useRouter();
 
@@ -36,7 +36,11 @@ export default function AppPage({}) {
 
     if (process.env.NEXT_PUBLIC_FORMBRICKS_ENVIRONMENT_ID && process.env.NEXT_PUBLIC_FORMBRICKS_API_HOST) {
       const userId = "THIS-IS-A-VERY-LONG-USER-ID-FOR-TESTING";
-      const userInitAttributes = { language: "de", "Init Attribute 1": "eight", "Init Attribute 2": "two" };
+      const userInitAttributes = {
+        language: "de",
+        "Init Attribute 1": "eight",
+        "Init Attribute 2": "two",
+      };
 
       formbricks.init({
         environmentId: process.env.NEXT_PUBLIC_FORMBRICKS_ENVIRONMENT_ID,
@@ -234,4 +238,6 @@ export default function AppPage({}) {
       </div>
     </div>
   );
-}
+};
+
+export default AppPage;

apps/demo/pages/website/index.tsx

@@ -9,7 +9,7 @@ import fbsetup from "../../public/fb-setup.png";
 
 declare const window: any;
 
-export default function AppPage({}) {
+const AppPage = ({}) => {
   const [darkMode, setDarkMode] = useState(false);
   const router = useRouter();
 
@@ -139,4 +139,6 @@ export default function AppPage({}) {
       </div>
     </div>
   );
-}
+};
+
+export default AppPage;

apps/docs/app/app-surveys/actions/page.mdx

@@ -6,7 +6,7 @@ import I2 from "./images/I2.webp";
 export const metadata = {
   title: "Using Actions in Formbricks | Fine-tuning User Moments",
   description:
-    "Dive deep into how actions in Formbricks help products and teams to engage users at precise moments in their journey. Discover the power of actions, from coding to no-code setups, to refine user targeting and generate richer, more detailed user insights.",
+    "Dive deep into how actions in Formbricks help products and organizations to engage users at precise moments in their journey. Discover the power of actions, from coding to no-code setups, to refine user targeting and generate richer, more detailed user insights.",
 };
 
 #### App Surveys

apps/docs/app/app-surveys/framework-guides/components/Libraries.tsx

@@ -33,7 +33,7 @@ const libraries = [
   },
 ];
 
-export function Libraries() {
+export const Libraries = () => {
   return (
     <div className="my-16 xl:max-w-none">
       <div className="not-prose mt-4 grid grid-cols-1 gap-x-6 gap-y-10 border-slate-900/5 sm:grid-cols-2 xl:max-w-none xl:grid-cols-3 dark:border-white/5">
@@ -57,4 +57,4 @@ export function Libraries() {
       </div>
     </div>
   );
-}
+};

apps/docs/app/app-surveys/user-identification/page.mdx

@@ -80,6 +80,11 @@ formbricks.init({
 
 You can use the setAttribute function to set any custom attribute for the user (e.g. name, plan, etc.):
 
+<Note>
+  Please note that the number of different attribute classes (e.g., "Plan," "First Name," etc.) is currently
+  limited to 150 attributes per environment.
+</Note>
+
 <Col>
 <CodeGroup title="Setting Custom Attributes">
 
@@ -115,4 +120,4 @@ formbricks.logout();
 ```
 
 </CodeGroup>
-</Col>
+</Col>

apps/docs/app/best-practices/docs-feedback/page.mdx

@@ -135,7 +135,7 @@ import { Popover, PopoverContent, PopoverTrigger } from "@formbricks/ui/Popover"
 
 import { handleFeedbackSubmit, updateFeedback } from "../../lib/handleFeedbackSubmit";
 
-export default function DocsFeedback() {
+export const DocsFeedback = () => {
   const router = useRouter();
   const [isOpen, setIsOpen] = useState(false);
   const [sharedFeedback, setSharedFeedback] = useState(false);
@@ -199,7 +199,7 @@ export default function DocsFeedback() {
       )}
     </div>
   );
-}
+};
 ```
 
 </CodeGroup>

apps/docs/app/best-practices/pmf-survey/page.mdx

@@ -85,7 +85,7 @@ To run this survey properly, you should pre-segment your user base. As touched u
 
 - Check the time passed since sign-up (e.g. signed up 4 weeks ago)
 - User has performed a specific action a certain number of times or (e.g. created 5 reports)
-- User has performed a combination of actions (e.g. created a report **and** invited a team member)
+- User has performed a combination of actions (e.g. created a report **and** invited a organization member)
 
 This way you make sure that you separate potentially misleading opinions from valuable insights.
 

apps/docs/app/developer-docs/contributing/components/FAQ.tsx

@@ -1,6 +1,6 @@
 import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from "@formbricks/ui/Accordion";
 
-import FaqJsonLdComponent from "./FAQPageJsonLd";
+import { FaqJsonLdComponent } from "./FAQPageJsonLd";
 
 const FAQ_DATA = [
   {
@@ -62,7 +62,7 @@ export const faqJsonLdData = FAQ_DATA.map((faq) => ({
   acceptedAnswerText: faq.answer(),
 }));
 
-export default function FAQ() {
+export const FAQ = () => {
   return (
     <>
       <FaqJsonLdComponent data={faqJsonLdData} />
@@ -76,4 +76,4 @@ export default function FAQ() {
       </Accordion>
     </>
   );
-}
+};

apps/docs/app/developer-docs/contributing/components/FAQPageJsonLd.tsx

@@ -2,11 +2,11 @@
 
 import { FAQPageJsonLd } from "next-seo";
 
-export default function FaqJsonLdComponent({ data }) {
+export const FaqJsonLdComponent = ({ data }) => {
   const faqEntities = data.map(({ question, answer }) => ({
     questionName: question,
     acceptedAnswerText: answer,
   }));
 
   return <FAQPageJsonLd mainEntity={faqEntities} />;
-}
+};

apps/docs/app/developer-docs/integrations/airtable/page.mdx

@@ -24,8 +24,7 @@ export const metadata = {
 The Airtable integration allows you to automatically send responses to an Airtable of your choice.
 
 <Note>
-  This feature is enabled by default in Formbricks Cloud but needs to be self-configured when running a
-  self-hosted version of Formbricks.
+    If you are on a self-hosted instance, you will need to configure this integration separately. Please follow the guides [here](/self-hosting/integrations) to configure integrations on your self-hosted instance.
 </Note>
 
 ## Formbricks Cloud

apps/docs/app/developer-docs/integrations/google-sheets/page.mdx

@@ -21,9 +21,8 @@ export const metadata = {
 The Google Sheets integration allows you to automatically send responses to a Google Sheet of your choice.
 
 <Note>
-  This feature is enabled by default in Formbricks Cloud but needs to be self-configured when running a
-  self-hosted version of Formbricks. For self-configuration, see additional setup
-  [below](#setup-in-self-hosted-formbricks).
+  If you are on a self-hosted instance, you will need to configure this integration separately. Please follow
+  the guides [here](/self-hosting/integrations) to configure integrations on your self-hosted instance.
 </Note>
 
 ## Connect Google Sheets
@@ -72,7 +71,7 @@ Before the next step, make sure that you have a Formbricks Survey with at least
   className="max-w-full rounded-lg sm:max-w-3xl"
 />
 
-6. Select the Google Sheet you want to link with Formbricks and the Survey. On doing so, you will be asked with what questions' responses you want to feed in the Google Sheet. Select the questions and click on the "Link Sheet" button.
+6. Enter the spreadsheet URL for the Google Sheet you want to link with Formbricks and the Survey. On doing so, you will be asked with what questions' responses you want to feed in the Google Sheet. Select the questions and click on the "Link Sheet" button.
 
 <MdxImage
   src={LinkWithQuestions}
@@ -117,7 +116,6 @@ To remove the integration with Google Account,
 For the above, we ask for:
 
 1. **User Email**: To identify you (that's it, nothing else, we're opensource, see this in our codebase [here](https://github.com/formbricks/formbricks/blob/main/apps/web/app/api/google-sheet/callback/route.ts#L47C17-L47C25))
-1. **Google Drive API**: To list all your google sheets (that's it, nothing else, we're opensource, see this method in our codebase [here](https://github.com/formbricks/formbricks/blob/main/packages/lib/googleSheet/service.ts#L13))
 1. **Google Spreadsheet API**: To write to the spreadsheet you select (that's it, nothing else, we're opensource, see this method in our codebase [here](https://github.com/formbricks/formbricks/blob/main/packages/lib/googleSheet/service.ts#L70))
 
 <Note>We store as little personal information as possible.</Note>

apps/docs/app/developer-docs/integrations/make/page.mdx

@@ -27,7 +27,7 @@ export const metadata = {
 Make is a powerful tool to send information between Formbricks and thousands of apps. Here's how to set it up.
 
 <Note>
-  ### Nail down your survey first ? Any changes in the survey cause additional work in the _Scenario_. It
+Nailed down your survey?? Any changes in the survey cause additional work in the _Scenario_. It
   makes sense to first settle on the survey you want to run and then get to setting up Make.
 </Note>
 

apps/docs/app/developer-docs/integrations/n8n/page.mdx

@@ -29,7 +29,7 @@ export const metadata = {
 n8n allows you to build flexible workflows focused on deep data integration. And with sharable templates and a user-friendly UI, the less technical people on your team can collaborate on them too. Unlike other tools, complexity is not a limitation. So you can build whatever you want — without stressing over budget. Hook up Formbricks with n8n and you can send your data to 350+ other apps. Here is how to do it.
 
 <Note>
-  ### Nail down your survey first Any changes in the survey cause additional work in the n8n node. It makes
+  Nail down your survey? Any changes in the survey cause additional work in the n8n node. It makes
   sense to first settle on the survey you want to run and then get to setting up n8n.
 </Note>
 

apps/docs/app/developer-docs/integrations/notion/page.mdx

@@ -21,8 +21,7 @@ export const metadata = {
 The notion integration allows you to automatically send responses to a Notion database of your choice.
 
 <Note>
-  This feature is enabled by default in Formbricks Cloud but needs to be self-configured when running a
-  self-hosted version of Formbricks.
+    If you are on a self-hosted instance, you will need to configure this integration separately. Please follow the guides [here](/self-hosting/integrations) to configure integrations on your self-hosted instance.
 </Note>
 
 ## Formbricks Cloud

apps/docs/app/developer-docs/integrations/overview/page.mdx

@@ -10,7 +10,7 @@ export const metadata = {
 At Formbricks, we understand the importance of integrating with third-party applications. We have step-by-step guides to configure our third-party integrations with a your Formbricks instance. We currently support the below integrations, click on them to see their individual guides:
 
 <Note>
-    If you are on a self-hosted instance, you will need to configure these integrations manually. Please follow the guides [here](/self-hosting/integrations) to configure them.
+    If you are on a self-hosted instance, you will need to configure these integrations manually. Please follow the guides [here](/self-hosting/integrations) to configure integrations on your self-hosted instance.
 </Note>
 
 - [Airtable](/developer-docs/integrations/airtable): Automatically send responses to an Airtable of your choice.

apps/docs/app/developer-docs/integrations/slack/page.mdx

@@ -22,8 +22,7 @@ export const metadata = {
 The slack integration allows you to automatically send responses to a Slack channel of your choice.
 
 <Note>
-  This feature is enabled by default in Formbricks Cloud but needs to be self-configured when running a
-  self-hosted version of Formbricks.
+    If you are on a self-hosted instance, you will need to configure this integration separately. Please follow the guides [here](/self-hosting/integrations) to configure integrations on your self-hosted instance.
 </Note>
 
 ## Formbricks Cloud

apps/docs/app/global/access-roles/page.mdx

@@ -0,0 +1,100 @@
+import { MdxImage } from "@/components/MdxImage";
+import AddMember from "./images/add-member.webp";
+import BulkInvite from "./images/bulk-invite.webp";
+import IndvInvite from "./images/individual-invite.webp";
+import MenuItem from "./images/team-settings-menu.webp";
+
+export const metadata = {
+  title: "Team Access Roles",
+  description:
+    "Assign different roles to team members to grant them specific rights like creating surveys, viewing responses, or managing team members.",
+};
+
+# Team Access Roles
+
+Assign different roles to team members to grant them specific rights like creating surveys, viewing responses, or managing team members.
+
+<Note>Access Roles is a feature of the **Enterprise Edition**. In the **Community Edition** and on the **Free** and **Startup** plan in the Cloud you can invite unlimited team members as `Admins`.</Note>
+
+
+| Role | Rights |
+| --- | --- |
+| Owner | Full rights; there can only one owner per team. Ownership can be transferred. |
+| Admin | Full access rights incl. managing team members |
+| Developer | Full product access to setup and run surveys incl. global styling, actions and attribute management, etc |
+| Editor | Create and edit surveys. No access to features related to setting up or maintaining Formbricks. |
+| Viewer | View survey results only. |
+
+## Inviting team members
+
+There are two ways to invite team members: One by one or in bulk.
+
+### Invite team members one by one
+
+1. Go to the `Team Settings` page via the menu in the lower right corner:
+
+<MdxImage 
+src={MenuItem}
+  alt="Where to find the Menu Item for Team Settings"
+  quality="100"
+  className="max-w-full rounded-lg sm:max-w-3xl "
+/>
+
+2. Click on the `Add Member` button:
+
+<MdxImage
+  src={AddMember}
+  alt="Add Member Button Position"
+  quality="100"
+  className="max-w-full rounded-lg sm:max-w-3xl "
+/>
+
+3. In the modal, add the Name, Email and Role of the team member you want to invite:
+
+<MdxImage
+  src={IndvInvite}
+  alt="Individual Invite Modal Tab"
+  quality="100"
+  className="max-w-full rounded-lg sm:max-w-3xl "
+/>
+
+<Note>Access Roles is a feature of the **Enterprise Edition**. In the **Community Edition** and on the **Free** and **Startup** plan in the Cloud you can invite unlimited team members as `Admins`.</Note>
+
+
+Formbricks sends an email to the team member with an invitation link. The team member can accept the invitation or create a new account by clicking on the link.
+
+
+### Invite team members in bulk
+
+1. Go to the `Team Settings` page via the menu in the lower right corner:
+
+<MdxImage
+  src={MenuItem}
+  alt="Where to find the Menu Item for Team Settings"
+  quality="100"
+  className="max-w-full rounded-lg sm:max-w-3xl "
+/>
+
+2. Click on the `Add Member` button:
+
+<MdxImage
+  src={AddMember}
+  alt="Add Member Button Position"
+  quality="100"
+  className="max-w-full rounded-lg sm:max-w-3xl "
+/>
+
+3. In the modal, switch to `Bulk Invite`. You can download an example .CSV file to fill in the Name, Email and Role of the team members you want to invite:
+
+<MdxImage
+  src={BulkInvite}
+  alt="Individual Invite Modal Tab"
+  quality="100"
+  className="max-w-full rounded-lg sm:max-w-3xl "
+/>
+
+4. Upload the filled .CSV file and invite the team members in bulk ✅
+
+Formbricks sends an email to each team member in the CSV. The member can accept the invitation or create a new account by clicking on the link.
+
+---

apps/docs/app/global/custom-styling/page.mdx

@@ -1,260 +0,0 @@
-import { MdxImage } from "@/components/MdxImage";
-
-import PreRequisiteImage from "./images/Pre-requisite.webp";
-import StepEight from "./images/StepEight.webp";
-import StepEleven from "./images/StepEleven.webp";
-import StepFive from "./images/StepFive.webp";
-import StepFour from "./images/StepFour.webp";
-import StepNine from "./images/StepNine.webp";
-import StepOne from "./images/StepOne.webp";
-import StepSeven from "./images/StepSeven.webp";
-import StepSix from "./images/StepSix.webp";
-import StepTen from "./images/StepTen.webp";
-import StepThree from "./images/StepThree.webp";
-import StepTwo from "./images/StepTwo.webp";
-
-import Doggo from "./images/Doggo.jpg";
-import HipsterLiving from "./images/HipsterLiving.jpg";
-import Mario from "./images/Mario.webp";
-import WindowsXp from "./images/WindowsXp.jpg";
-
-export const metadata = {
-  title: "Custom Styling in Formbricks Surveys",
-  description:
-    "Style your surveys effortlessly with Formbricks to match your brand's unique aesthetic, from Super Mario themes to the minimalist Windows XP style. Customize everything from color schemes to adding your logo, all without needing any coding skills.",
-};
-
-# Custom Styling
-
-Style your surveys effortlessly with Formbricks to match your brand's unique aesthetic, from Super Mario themes to the minimalist Windows XP style. Customize everything from color schemes to adding your logo, all without needing any coding skills. Don’t miss out some of our standout design surveys at the end!
-
-### Product Styling
-
-Easily apply a consistent style across all your current & future surveys:
-
-**Pre-requisites:**
-
-1. Navigate to the **Settings** tab on the Formbricks Dashboard.
-2. Select **Look & Feel** under the **Product** section in the left navbar
-
-<MdxImage
-  src={PreRequisiteImage}
-  alt="Choose a link survey template"
-  quality="100"
-  className="max-w-full rounded-lg sm:max-w-3xl "
-/>
-
-**Switch between Link Survey & App Survey** to preview different styles
-
-### **Styling Options**
-
-1. **Form Styling:** Customize the survey card using the following settings
-
-<MdxImage
-  src={StepOne}
-  alt="Choose a link survey template"
-  quality="100"
-  className="max-w-full rounded-lg sm:max-w-3xl "
-/>
-
-- **Brand Color**: Sets the primary color tone of the survey.
-- **Text Color**: This is a single color scheme that will be used across to display all the text on your survey. Ensures all text is readable against the background.
-- **Input Color:** Alters the border color of input fields.
-- **Input Border Color**: This is the color of the border of the form input field.
-
-2. **Card Styling:** Adjust the look of the survey card
-
-<MdxImage
-  src={StepTwo}
-  alt="Choose a link survey template"
-  quality="100"
-  className="max-w-full rounded-lg sm:max-w-3xl "
-/>
-
-- **Roundness**: Adjusts the corner roundness of the survey card and its components (including input boxes, buttons).
-- **Card Background Color**: Sets the card's main background color.
-- **Card Border Color**: Changes the border color of the card
-- **Card Shadow Color**: Adds a shadow effect for depth
-- **Hide Progress Bar**: Optionally remove the progress bar to simplify the survey experience
-- **Add Highlight Border**: Adds a distinct border for emphasis.
-
-3. **Background Styling**: Customize the survey background with static colors, animations, or images (upload your own or get from Unsplash)
-
-<Note>This is only available for Link Surveys</Note>
-
-<MdxImage
-  src={StepThree}
-  alt="Choose a link survey template"
-  quality="100"
-  className="max-w-full rounded-lg sm:max-w-3xl "
-/>
-
-- **Color**: Pick any color for the background
-- **Animation**: Add dynamic animations to enhance user experience..
-- **Upload**: Use a custom uploaded image for a personalized touch
-- Image: Choose from Unsplash's extensive gallery. Note that these images will have a link and mention of the author & Unsplash on the bottom right to give them the credit for their awesome work!
-- **Background Overlay**: Adjust the background's opacity
-
-### Add Brand Logo:
-
-Customize your survey with your brand's logo.
-
-<Note>only available for link survyes</Note>
-
-1. In the Look & Feel page itself in Product settings, scroll down to see the Logo Upload box.
-
-<MdxImage
-  src={StepFour}
-  alt="Choose a link survey template"
-  quality="100"
-  className="max-w-full rounded-lg sm:max-w-3xl "
-/>
-
-2. Upload your logo
-
-<MdxImage
-  src={StepFive}
-  alt="Choose a link survey template"
-  quality="100"
-  className="max-w-full rounded-lg sm:max-w-3xl "
-/>
-
-3. Add a background color: If you’ve uploaded a transparent image and want to add background to it, enable this toggle and select the color of your choice.
-
-<MdxImage
-  src={StepSix}
-  alt="Choose a link survey template"
-  quality="100"
-  className="max-w-full rounded-lg sm:max-w-3xl "
-/>
-
-4. Remember to save your changes!
-
-<MdxImage
-  src={StepSeven}
-  alt="Choose a link survey template"
-  quality="100"
-  className="max-w-full rounded-lg sm:max-w-3xl "
-/>
-
-<Note>The logo setting applies across all link surveys</Note>
-
-### Overwrite Product Styling
-
-Create surveys with specific styles that differ from your general product style.
-
-**Pre-requisites**:
-
-- Enable the **Custom Styling** toggle in the **Look & Feel** settings
-
-<MdxImage
-  src={StepEight}
-  alt="Choose a link survey template"
-  quality="100"
-  className="max-w-full rounded-lg sm:max-w-3xl"
-/>
-
-**Steps:**
-
-1. Open the survey editor you want to change the styling of and switch to the Styling tab.
-
-<MdxImage
-  src={StepNine}
-  alt="Choose a link survey template"
-  quality="100"
-  className="max-w-full rounded-lg sm:max-w-3xl "
-/>
-
-2. Activate the **Add Custom Styles** toggle to override the default product styling.
-
-<MdxImage
-  src={StepTen}
-  alt="Choose a link survey template"
-  quality="100"
-  className="max-w-full rounded-lg sm:max-w-3xl "
-/>
-
-3. Customize your survey's style as needed!
-
-<MdxImage
-  src={StepEleven}
-  alt="Choose a link survey template"
-  quality="100"
-  className="max-w-full rounded-lg sm:max-w-3xl "
-/>
-
-Voila! just hit the save button to apply your changes. Your survey is now ready to impress with its unique look!
-
-## Overwrite CSS Styles for App & Website Surveys
-
-You can overwrite the default CSS styles for the app & website surveys by adding the following CSS to your global CSS file (eg. `globals.css`):
-
-Make sure that you do not change the CSS variable names as they are used by Formbricks to identify the CSS variables. You can change the values to your liking. We have filled in some sample values for you to change according to your desired appearance.
-
-<Col>
-<CodeGroup title="Overwrite Formbricks CSS">
-
-```css
-/* Formbricks CSS */
---fb-brand-color: red;
---fb-brand-text-color: white;
---fb-border-color: green;
---fb-border-color-highlight: rgb(13, 13, 12);
---fb-focus-color: red;
---fb-heading-color: yellow;
---fb-subheading-color: green;
---fb-info-text-color: orange;
---fb-signature-text-color: blue;
---fb-survey-background-color: black;
---fb-accent-background-color: rgb(13, 13, 12);
---fb-accent-background-color-selected: red;
---fb-placeholder-color: white;
---fb-shadow-color: var(--fb-brand-color);
---fb-rating-fill: rgb(13, 13, 12);
---fb-rating-hover: green;
---fb-back-btn-border: blue;
---fb-submit-btn-border: transparent;
---fb-rating-selected: black;
-```
-
-</CodeGroup>
-</Col>
-
-We have an example of this in our [Demo project](https://github.com/formbricks/formbricks/blob/main/apps/demo/styles/globals.css) here.
-
-### Funky Survey Examples
-
-- **Super Mario:** I guess he won't let himself be limited by radio buttons and do all three things
-
-<MdxImage
-  src={Mario}
-  alt="Choose a link survey template"
-  quality="100"
-  className="max-w-full rounded-lg sm:max-w-3xl "
-/>
-
-- **Hipster Living**: Does your monstera get enough water?
-
-<MdxImage
-  src={HipsterLiving}
-  alt="Choose a link survey template"
-  quality="100"
-  className="max-w-full rounded-lg sm:max-w-3xl "
-/>
-
-- **Windows XP**: Hach, nostalgia. Made us wanna play Mafia.
-  <MdxImage
-    src={WindowsXp}
-    alt="Choose a link survey template"
-    quality="100"
-    className="max-w-full rounded-lg sm:max-w-3xl "
-  />
-- **Whosagooooodbooooy**: Things you've likely said to your dog.
-  <MdxImage
-    src={Doggo}
-    alt="Choose a link survey template"
-    quality="100"
-    className="max-w-full rounded-lg sm:max-w-3xl "
-  />
-
----

apps/docs/app/global/overwrite-styling/page.mdx

@@ -0,0 +1,131 @@
+import { MdxImage } from "@/components/MdxImage";
+
+import StepEleven from "./images/StepEleven.webp";
+import StepNine from "./images/StepNine.webp";
+import StepTen from "./images/StepTen.webp";
+
+import Doggo from "./images/Doggo.jpg";
+import HipsterLiving from "./images/HipsterLiving.jpg";
+import Mario from "./images/Mario.webp";
+import WindowsXp from "./images/WindowsXp.jpg";
+
+export const metadata = {
+  title: "Overwrite Styling Theme on Individual Surveys",
+  description:
+    "Overwrite the global styling theme for individual surveys to create unique styles for each survey.",
+};
+
+# Overwrite Styling Theme on Individual Surveys
+
+Overwrite the global styling theme for individual surveys to create unique styles for each survey.
+
+<Note>To set a styling theme for all surveys, please see the [Styling Theme](/global/styling-theme) manual. </Note>
+
+
+### Overwrite Styling Theme
+
+1. In the Survey Editor of the survey you want to style, navigate to the **Styling** tab:
+
+<MdxImage
+  src={StepNine}
+  alt="Choose a link survey template"
+  quality="100"
+  className="max-w-full rounded-lg sm:max-w-3xl "
+/>
+
+2. Activate the **Add Custom Styles** toggle to override the default product styling:
+
+<MdxImage
+  src={StepTen}
+  alt="Choose a link survey template"
+  quality="100"
+  className="max-w-full rounded-lg sm:max-w-3xl "
+/>
+
+3. Customize your survey's style as needed:
+
+<MdxImage
+  src={StepEleven}
+  alt="Choose a link survey template"
+  quality="100"
+  className="max-w-full rounded-lg sm:max-w-3xl "
+/>
+
+Voila! just hit the save button to apply your changes. Your survey is now ready to impress with its unique look!
+
+## Overwrite CSS Styles for App & Website Surveys
+
+You can overwrite the default CSS styles for the app & website surveys by adding the following CSS to your global CSS file (eg. `globals.css`):
+
+Make sure that you do not change the CSS variable names as they are used by Formbricks to identify the CSS variables. You can change the values to your liking. We have filled in some sample values for you to change according to your desired appearance.
+
+<Col>
+<CodeGroup title="Overwrite Formbricks CSS">
+
+```css
+/* Formbricks CSS */
+--fb-brand-color: red;
+--fb-brand-text-color: white;
+--fb-border-color: green;
+--fb-border-color-highlight: rgb(13, 13, 12);
+--fb-focus-color: red;
+--fb-heading-color: yellow;
+--fb-subheading-color: green;
+--fb-info-text-color: orange;
+--fb-signature-text-color: blue;
+--fb-survey-background-color: black;
+--fb-accent-background-color: rgb(13, 13, 12);
+--fb-accent-background-color-selected: red;
+--fb-placeholder-color: white;
+--fb-shadow-color: var(--fb-brand-color);
+--fb-rating-fill: rgb(13, 13, 12);
+--fb-rating-hover: green;
+--fb-back-btn-border: blue;
+--fb-submit-btn-border: transparent;
+--fb-rating-selected: black;
+```
+
+</CodeGroup>
+</Col>
+
+We have an example of this in our [Demo project](https://github.com/formbricks/formbricks/blob/main/apps/demo/styles/globals.css) here.
+
+## Funky Survey Examples
+
+- **Super Mario:** I guess he won't let himself be limited by radio buttons and do all three things
+
+<MdxImage
+  src={Mario}
+  alt="Choose a link survey template"
+  quality="100"
+  className="max-w-full rounded-lg sm:max-w-3xl "
+/>
+
+- **Hipster Living**: Does your monstera get enough water?
+
+<MdxImage
+  src={HipsterLiving}
+  alt="Choose a link survey template"
+  quality="100"
+  className="max-w-full rounded-lg sm:max-w-3xl "
+/>
+
+- **Windows XP**: Hach, nostalgia. Made us wanna play Mafia.
+
+<MdxImage
+  src={WindowsXp}
+  alt="Choose a link survey template"
+  quality="100"
+  className="max-w-full rounded-lg sm:max-w-3xl "
+/>
+
+- **Whosagooooodbooooy**: Things you've likely said to your dog.
+
+<MdxImage
+  src={Doggo}
+  alt="Choose a link survey template"
+  quality="100"
+  className="max-w-full rounded-lg sm:max-w-3xl "
+/>
+
+---

apps/docs/app/global/styling-theme/page.mdx

@@ -0,0 +1,149 @@
+import { MdxImage } from "@/components/MdxImage";
+
+import StepEight from "./images/StepEight.webp";
+import StepEleven from "./images/StepEleven.webp";
+import StepFive from "./images/StepFive.webp";
+import StepFour from "./images/StepFour.webp";
+import StepNine from "./images/StepNine.webp";
+import StepSeven from "./images/StepSeven.webp";
+import StepSix from "./images/StepSix.webp";
+import StepTen from "./images/StepTen.webp";
+import AllowOverwrite from "./images/allow-overwrite.webp";
+import BackgroundSettings from "./images/background-settings.webp";
+import CardSettings from "./images/card-settings.webp";
+import FormSettings from "./images/form-settings.webp";
+import LookAndFeelSettings from "./images/look-and-feel.webp";
+
+import Doggo from "./images/Doggo.jpg";
+import HipsterLiving from "./images/HipsterLiving.jpg";
+import Mario from "./images/Mario.webp";
+import WindowsXp from "./images/WindowsXp.jpg";
+
+export const metadata = {
+  title: "Styling Theme",
+  description:
+    "Keep the survey styling consistent over all surveys with a Styling Theme. Customize the colors, fonts, and other styling options to match your brand's aesthetic.",
+};
+
+# Styling Theme
+
+Keep the survey styling consistent over all surveys with a Styling Theme. Customize the colors, fonts, and other styling options to match your brand's aesthetic.
+
+## Configuration
+
+In the left side bar, you find the `Configuration` page. On this page you find the `Look & Feel` section:
+
+<MdxImage
+  src={LookAndFeelSettings}
+  alt="Choose a link survey template"
+  quality="100"
+  className="max-w-full rounded-lg sm:max-w-3xl"
+/>
+
+## **Styling Options**
+
+1. **Form Styling:** Customize the survey card using the following settings
+
+<MdxImage
+  src={FormSettings}
+  alt="Form styling options UI"
+  quality="100"
+  className="max-w-full rounded-lg sm:max-w-3xl "
+/>
+
+- **Brand Color**: Sets the primary color tone of the survey.
+- **Text Color**: This is a single color scheme that will be used across to display all the text on your survey. Ensures all text is readable against the background.
+- **Input Color:** Alters the border color of input fields.
+- **Input Border Color**: This is the color of the border of the form input field.
+
+2. **Card Styling:** Adjust the look of the survey card
+
+<MdxImage
+  src={CardSettings}
+  alt="Card styling options UI"
+  quality="100"
+  className="max-w-full rounded-lg sm:max-w-3xl "
+/>
+
+- **Roundness**: Adjusts the corner roundness of the survey card and its components (including input boxes, buttons).
+- **Card Background Color**: Sets the card's main background color.
+- **Card Border Color**: Changes the border color of the card
+- **Card Shadow Color**: Adds a shadow effect for depth
+- **Hide Progress Bar**: Optionally remove the progress bar to simplify the survey experience
+- **Add Highlight Border**: Adds a distinct border for emphasis.
+
+3. **Background Styling**: Customize the survey background with static colors, animations, or images (upload your own or get from Unsplash)
+
+<Note>This is only available for Link Surveys</Note>
+
+<MdxImage
+  src={BackgroundSettings}
+  alt="Background styling options UI"
+  quality="100"
+  className="max-w-full rounded-lg sm:max-w-3xl "
+/>
+
+- **Color**: Pick any color for the background
+- **Animation**: Add dynamic animations to enhance user experience..
+- **Upload**: Use a custom uploaded image for a personalized touch
+- Image: Choose from Unsplash's extensive gallery. Note that these images will have a link and mention of the author & Unsplash on the bottom right to give them the credit for their awesome work!
+- **Background Overlay**: Adjust the background's opacity
+
+## Add Brand Logo
+
+Customize your survey with your brand's logo.
+
+<Note>Brand logos are only visible on Link Survey pages.</Note>
+
+1. In the Look & Feel page itself in Product settings, scroll down to see the Logo Upload box.
+
+<MdxImage
+  src={StepFour}
+  alt="Choose a link survey template"
+  quality="100"
+  className="max-w-full rounded-lg sm:max-w-3xl "
+/>
+
+2. Upload your logo
+
+<MdxImage
+  src={StepFive}
+  alt="Choose a link survey template"
+  quality="100"
+  className="max-w-full rounded-lg sm:max-w-3xl "
+/>
+
+3. Add a background color: If you’ve uploaded a transparent image and want to add background to it, enable this toggle and select the color of your choice.
+
+<MdxImage
+  src={StepSix}
+  alt="Choose a link survey template"
+  quality="100"
+  className="max-w-full rounded-lg sm:max-w-3xl "
+/>
+
+4. Remember to save your changes!
+
+<MdxImage
+  src={StepSeven}
+  alt="Choose a link survey template"
+  quality="100"
+  className="max-w-full rounded-lg sm:max-w-3xl "
+/>
+
+<Note>The logo settings apply across all Link Surveys pages.</Note>
+
+## Overwrite Styling Theme
+
+You can allow to overwrite the styling theme for individual surveys to create unique styles for each survey:
+
+<MdxImage
+  src={AllowOverwrite}
+  alt="Choose a link survey template"
+  quality="100"
+  className="max-w-full rounded-lg sm:max-w-3xl"
+/>
+
+In the survey editor, a tab called `Styling` will appear. Here you can overwrite the default styling theme.
+
+---

apps/docs/app/introduction/what-is-formbricks/components/GettingStarted.tsx

@@ -26,7 +26,7 @@ const gettingStarted = [
   },
 ];
 
-export function GettingStarted() {
+export const GettingStarted = () => {
   return (
     <div className="my-16 xl:max-w-none">
       <Heading level={2} id="getting-started">
@@ -47,4 +47,4 @@ export function GettingStarted() {
       </div>
     </div>
   );
-}
+};

apps/docs/app/layout.tsx

@@ -15,7 +15,7 @@ export const metadata: Metadata = {
 
 const jost = Jost({ subsets: ["latin"] });
 
-export default async function RootLayout({ children }: { children: React.ReactNode }) {
+const RootLayout = async ({ children }: { children: React.ReactNode }) => {
   let pages = await glob("**/*.mdx", { cwd: "src/app" });
   let allSectionsEntries = (await Promise.all(
     pages.map(async (filename) => [
@@ -36,4 +36,6 @@ export default async function RootLayout({ children }: { children: React.ReactNo
       </body>
     </html>
   );
-}
+};
+
+export default RootLayout;

apps/docs/app/not-found.tsx

@@ -1,7 +1,7 @@
 import { Button } from "@/components/Button";
 import { HeroPattern } from "@/components/HeroPattern";
 
-export default function NotFound() {
+const NotFound = () => {
   return (
     <>
       <HeroPattern />
@@ -17,4 +17,6 @@ export default function NotFound() {
       </div>
     </>
   );
-}
+};
+
+export default NotFound;

apps/docs/app/providers.tsx

@@ -3,18 +3,18 @@
 import { ThemeProvider, useTheme } from "next-themes";
 import { useEffect } from "react";
 
-function ThemeWatcher() {
+const ThemeWatcher = () => {
   let { resolvedTheme, setTheme } = useTheme();
 
   useEffect(() => {
     let media = window.matchMedia("(prefers-color-scheme: dark)");
 
-    function onMediaChange() {
+    const onMediaChange = () => {
       let systemTheme = media.matches ? "dark" : "light";
       if (resolvedTheme === systemTheme) {
         setTheme("system");
       }
-    }
+    };
 
     onMediaChange();
     media.addEventListener("change", onMediaChange);
@@ -25,13 +25,13 @@ function ThemeWatcher() {
   }, [resolvedTheme, setTheme]);
 
   return null;
-}
+};
 
-export function Providers({ children }: { children: React.ReactNode }) {
+export const Providers = ({ children }: { children: React.ReactNode }) => {
   return (
     <ThemeProvider attribute="class" disableTransitionOnChange>
       <ThemeWatcher />
       {children}
     </ThemeProvider>
   );
-}
+};

apps/docs/app/self-hosting/configuration/page.mdx

@@ -51,8 +51,8 @@ These variables are present inside your machine’s docker-compose file. Restart
 | INSTANCE_ID                 | Instance ID for Formbricks Cloud to be sent to Telemetry.                                  | optional                                                |                           |
 | INTERNAL_SECRET             | Internal Secret (Currently we overwrite the value with a random value).                    | optional                                                |                           |
 | DEFAULT_BRAND_COLOR         | Default brand color for your app (Can be overwritten from the UI as well).                 | optional                                                | #64748b                   |
-| DEFAULT_TEAM_ID             | Automatically assign new users to a specific team when joining                             | optional                                                |                           |
-| DEFAULT_TEAM_ROLE           | Role of the user in the default team.                                                      | optional                                                | admin                     |
+| DEFAULT_ORGANIZATION_ID     | Automatically assign new users to a specific organization when joining                     | optional                                                |                           |
+| DEFAULT_ORGANIZATION_ROLE   | Role of the user in the default organization.                                              | optional                                                | admin                     |
 | ONBOARDING_DISABLED         | Disables onboarding for new users if set to 1                                              | optional                                                |                           |
 | OIDC_DISPLAY_NAME           | Display name for Custom OpenID Connect Provider                                            | optional                                                |                           |
 | OIDC_CLIENT_ID              | Client ID for Custom OpenID Connect Provider                                               | optional (required if OIDC auth is enabled)             |                           |

apps/docs/app/self-hosting/docker/page.mdx

@@ -8,7 +8,7 @@ export const metadata = {
 
 # Advanced Setup
 
-Quickly set up and start using Formbricks with our [official Docker image](https://github.com/formbricks/formbricks/pkgs/container/formbricks) that we've already built for you. 
+Quickly set up and start using Formbricks with our [official Docker image](https://github.com/formbricks/formbricks/pkgs/container/formbricks) that we've already built for you.
 
 The pre-built image is ready-to-run, and it only requires minimal configuration on your part. It's as easy as downloading the Docker image and firing up the container.
 
@@ -104,20 +104,12 @@ You're now ready to start the Formbricks Docker setup. The following command wil
 
 ## Update
 
-1.  Stop the Formbricks stack
+<Note>
+  Please take a look at our [migration guide](/self-hosting/migration-guide) for version specific steps to
+  update Formbricks.
+</Note>
 
-<Col>
-   <CodeGroup title="Stop the docker instance">
-
-    ```bash
-    docker compose down
-    ```
-
-    </CodeGroup>
-
-</Col>
-
-2.  Pull the latest changes
+1.  Pull the latest Formbricks image
 
 <Col>
    <CodeGroup title="Pull the changes into docker">
@@ -130,8 +122,20 @@ You're now ready to start the Formbricks Docker setup. The following command wil
 
 </Col>
 
-3.  Update env vars as necessary in the docker-compose file.
-4.  Re-start the Formbricks stack
+2.  Stop the Formbricks stack
+
+<Col>
+   <CodeGroup title="Stop the docker instance">
+
+    ```bash
+    docker compose down
+    ```
+
+    </CodeGroup>
+
+</Col>
+
+3.  Re-start the Formbricks stack with the updated image
 
 <Col>
    <CodeGroup title="Relaunch the Docker Instance">

apps/docs/app/self-hosting/integrations/page.mdx

@@ -39,10 +39,10 @@ We have step-by-step guides to configure our third-party integrations with a sel
 - [Airtable](#airtable)
 - [Google Sheets](#google-sheets)
 - [Notion](#notion)
-- Make: We do not support [Make.com](http://Make.com) for Self-hosted instances yet! Please follow our Cloud guide [here](/integrations#make)
+- Make: We do not support for self-hosted instances yet.
 - [n8n](#n8n)
 - [Slack](#slack)
-- [Wordpress]: Wordpress setup is similar to steps mentioned in Cloud [here](/integrations#wordpress), just change the API Host to your self-hosted URL.
+- Wordpress: Wordpress setup is similar to the [Cloud setup](/developer-docs/integrations/wordpress), just change the API Host to your self-hosted URL.
 - [Zapier](#zapier)
 
 <Note>
@@ -116,7 +116,7 @@ Integrating Google Sheets with a self-hosted Formbricks instance requires config
 1. Go to the **[Google Cloud Console](https://console.cloud.google.com/)** and **create a new project**.
 2. Enable necessary APIs:
    - Now select the project you just created and go to the **APIs & Services** section.
-   - Click on the **Enable APIs and Services** button and search for **Google Sheets API** & **Google Drive API** and enable it.
+   - Click on the **Enable APIs and Services** button and search for **Google Sheets API** and enable it.
 3. Configure OAuth Consent Screen:
    - Go to **OAuth Consent screen** and select the appropriate User Type (External or Internal). Select **Internal** if you want only the users of your Google Workspace to be able to use the integration.
    - Fill the required details:
@@ -128,12 +128,11 @@ Integrating Google Sheets with a self-hosted Formbricks instance requires config
 - Click on the **Add or Remove Scopes** button and add the scopes:
   - `https://www.googleapis.com/auth/userinfo.email`
   - `https://www.googleapis.com/auth/spreadsheets`
-  - `https://www.googleapis.com/auth/drive`
 - Click on the **Update** button. Verify the scopes and click on the **Save and Continue** button.
 - Skip the **Test Users** section and click on the **Save and Continue** button.
 
-1. View the OAuth Consent Screen summary and click on the **Back to Dashboard** button.
-2. Register OAuth Client:
+5. View the OAuth Consent Screen summary and click on the **Back to Dashboard** button.
+6. Register OAuth Client:
 
 - Navigate to **Credentials** > **Create Credentials** > **OAuth Client ID**.
 - Select **Web Application** and set:
@@ -142,13 +141,10 @@ Integrating Google Sheets with a self-hosted Formbricks instance requires config
   - Authorized redirect URIs: `https://<your-public-facing-url>/api/google-sheet/callback`
 - Save and note the Client ID and Client Secret.
 
-1. Copy the Client ID and Client Secret and set them as environment variables in your Formbricks instance:
+7. Copy the Client ID and Client Secret and set them as environment variables in your Formbricks instance:
    - `GOOGLE_SHEETS_CLIENT_ID`
    - `GOOGLE_SHEETS_CLIENT_SECRET`
    - `GOOGLE_SHEETS_REDIRECT_URL`
-2. Enable Google Drive API:
-   - Go to the **APIs & Services** section and click on the **Enable APIs and Services** button.
-   - Search for **Google Drive API** and enable it.
 
 Now just copy **GOOGLE_SHEETS_CLIENT_ID**, **GOOGLE_SHEETS_CLIENT_SECRET** and **GOOGLE_SHEETS_REDIRECT_URL** for your integration & add it to your **Formbricks environment variables** as in the docker compose file:
 

apps/docs/app/self-hosting/license/page.mdx

@@ -9,30 +9,40 @@ export const metadata = {
 
 ## Overview
 
-Formbricks core source code is under AGPL license on GitHub. Additionally, we also have additional features for bigger teams & enterprises under the Enterprise license for Self Hosting customers. Let’s understand both in depth below:
+The Formbricks Core source code is licensed under AGPLv3 and available on GitHub. Additionally, we offer features for bigger organisations & enterprises for self-hostesr under a separate Enterprise License.
+
+<Note>
+  Want to present a proof of concept? Request a free 30-day Enterprise Edition trial by [filling out the form
+  below.](#30-day-trial-license-request) No call needed or strings attached: Just give us 24h to set up the
+  key and send it over 🤙
+</Note>
 
 ## Enterprise Edition License
 
-Additional to the AGPL licensed Formbricks core, the Formbricks repository contains code licensed under an **[Enterprise license](https://github.com/formbricks/formbricks/blob/main/packages/ee/LICENSE)**. This additional functionality is not part of the AGPLv3 licensed Formbricks core and is designed to meet the needs of larger teams and enterprises. This advanced functionality is already included in the Docker images, but you need an **Enterprise License Key** to unlock it. For the pricing, please refer to [Formbricks Pricing](https://formbricks.com/pricing).
+Additional to the AGPLv3 licensed Formbricks core, the Formbricks repository contains code licensed under our **[Enterprise License](https://github.com/formbricks/formbricks/blob/main/packages/ee/LICENSE)**. This additional functionality is not part of the AGPLv3 licensed Formbricks core and is designed to meet the needs of larger teams and enterprises. This advanced functionality is already included in the Docker images, but you need an **Enterprise License Key** to unlock it. For the pricing, please refer to [Formbricks Pricing](https://formbricks.com/pricing).
 
 ### When do I need an Enterprise License?
 
-|                                                          | Community Edition | Enterprise License   |
-| -------------------------------------------------------- | ----------------- | -------------------- |
-| Self-host for commercial purposes                        | ✅                | No EE license needed |
-| To make changes to the code base (happy to publish them) | ✅                | No EE license needed |
-| Unlimited responses                                      | ✅                | No EE license needed |
-| Unlimited surveys                                        | ✅                | No EE license needed |
-| Remove branding                                          | ✅                | No EE license needed |
-| SSO                                                      | ✅                | No EE license needed |
-| Use any of the other 100 features                        | ✅                | No EE license needed |
-| Team roles                                               | ❌                | ✅                   |
-| Multi-language surveys                                   | ❌                | ✅                   |
-| Advanced targeting / Segments                            | ❌                | ✅                   |
-| Make code changes and keep private                       | ❌                | ✅                   |
+|                                                             | Community Edition | Enterprise License   |
+| ----------------------------------------------------------- | ----------------- | -------------------- |
+| Self-host for commercial purposes                           | ✅                | No EE license needed |
+| Make changes to the code base (have to publish all changes) | ✅                | No EE license needed |
+| Unlimited responses                                         | ✅                | No EE license needed |
+| Unlimited surveys                                           | ✅                | No EE license needed |
+| Remove branding                                             | ✅                | No EE license needed |
+| SSO                                                         | ✅                | No EE license needed |
+| Use any of the other 100 features                           | ✅                | No EE license needed |
+| Organization access roles                                   | ❌                | ✅                   |
+| Multi-language surveys                                      | ❌                | ✅                   |
+| Advanced targeting / Segments                               | ❌                | ✅                   |
+| Make code changes and **keep private**                      | ❌                | ✅                   |
 
 Ready to get started with the Enterprise Edition? Fill out our form below and we'll reach out to you.
 
+## 30-day Trial License Request
+
+Many organisations want to do an internal test run with the Enterprise Edition. To make that really easy, we now offer a 30-day trial license. Just fill out the form below and we'll send you a license key within 24 hours (business days):
+
 <div
   style={{
     position: "relative",
@@ -50,11 +60,11 @@ Ready to get started with the Enterprise Edition? Fill out our form below and we
 
 ### The AGPL Formbricks Core
 
-The Formbricks core application is licensed under the **[AGPLv3 Open Source License](https://github.com/formbricks/formbricks/blob/main/LICENSE)**. The core application is fully functional and includes everything you need to design & run link surveys, website surveys and in-app surveys. You can use the software for free for personal and commercial use. You're also allowed to create and distribute modified versions as long as you document the changes you make incl. date. The AGPL license requires you to publish your modified version under the AGPLv3 license as well.
+The Formbricks core application is licensed under the **[AGPLv3 Open Source License](https://github.com/formbricks/formbricks/blob/main/LICENSE)**. The core application is fully functional and includes everything you need to design & run link surveys, website surveys and in-app surveys. You can use the software for free for personal and commercial use. You're also allowed to create and distribute modified versions as long as you document the changes you make incl. date and **publish your complete code under the AGPLv3 license as well.**
 
 ### The Enterprise Edition
 
-Additional to the AGPL licensed Formbricks core, this repository contains code licensed under an Enterprise license. The **[code](https://github.com/formbricks/formbricks/tree/main/packages/ee)** and **[license](https://github.com/formbricks/formbricks/blob/main/packages/ee/LICENSE)** for the enterprise functionality can be found in the `/packages/ee` folder of this repository. This additional functionality is not part of the AGPLv3 licensed Formbricks core and is designed to meet the needs of larger teams and enterprises. This advanced functionality is already included in the Docker images, but you need an **Enterprise License Key** to unlock it.
+Additional to the AGPL licensed Formbricks core, this repository contains code licensed under an Enterprise License. The **[code](https://github.com/formbricks/formbricks/tree/main/packages/ee)** and **[license](https://github.com/formbricks/formbricks/blob/main/packages/ee/LICENSE)** for the enterprise functionality can be found in the `/packages/ee` folder of this repository. This additional functionality is not part of the AGPLv3 licensed Formbricks core and is designed to meet the needs of larger teams and enterprises. This advanced functionality is already included in the Docker images, but you need an **Enterprise License Key** to unlock it.
 
 ## White-Labeling Formbricks and Other Licensing Needs
 
@@ -62,6 +72,6 @@ We currently do not offer Formbricks white-labeled. Any other needs? [Send us an
 
 ## Why charge for Enterprise Features?
 
-The Enterprise Edition and White-Label Licenses allow us to fund the development of Formbricks sustainably. It guarantees that the open-source surveying infrastructure we're building will be around for decades to come.
+The Enterprise Edition allows us to fund the development of Formbricks sustainably. It guarantees that the open-source surveying infrastructure we're building will be around for decades to come.
 
-**Having more questions?**: [Join our Discord!](https://formbricks.com/discord)
+**Any more questions?**: [Send us an email](mailto:johannes@formbricks.com) or [book a call with us.](https://cal.com/johannes/license)

apps/docs/app/self-hosting/migration-guide/page.mdx

@@ -17,6 +17,18 @@ Formbricks v2.0 comes with huge features such as Multi-Language Surveys and Adva
   the upgrade. Follow the below steps thoroughly to upgrade your Formbricks instance to v2.0.
 </Note>
 
+<Note>
+  If you've used the Formbricks Enterprise Edition with a free beta license key, your instance will be
+  downgraded to the Community Edition 2.0. You find all license details on the [license
+  page.](/self-hosting/license/)
+</Note>
+
+<Note>
+  We are moving from DockerHub to Github Packages for our images. If you are still pulling the images from
+  DockerHub please change `image: formbricks/formbricks:latest` to
+  `image:ghcr.io/formbricks/formbricks:latest` in your `docker-compose.yml` file.
+</Note>
+
 ### Steps to Migrate
 
 This guide is for users who are self-hosting Formbricks using our one-click setup. If you are using a different setup, you might adjust the commands accordingly.
@@ -29,7 +41,7 @@ To run all these steps, please navigate to the `formbricks` folder where your `d
 <CodeGroup title="Backup Postgres">
 
 ```bash
-docker exec formbricks-quickstart-postgres-1 pg_dump -Fc -U postgres -d formbricks > formbricks_pre_v2.0_$(date +%Y%m%d_%H%M%S).dump
+docker exec formbricks-postgres-1 pg_dump -Fc -U postgres -d formbricks > formbricks_pre_v2.0_$(date +%Y%m%d_%H%M%S).dump
 ```
 
 </CodeGroup>
@@ -45,7 +57,19 @@ docker exec formbricks-quickstart-postgres-1 pg_dump -Fc -U postgres -d formbric
   restore scenario you will need to use `psql` then with an empty `formbricks` database.
 </Note>
 
-2. Stop the running Formbricks instance & remove the related containers:
+2. Pull the latest version of Formbricks:
+
+<Col>
+<CodeGroup title="Stop the containers">
+
+```bash
+docker-compose pull
+```
+
+</CodeGroup>
+</Col>
+
+3. Stop the running Formbricks instance & remove the related containers:
 
 <Col>
 <CodeGroup title="Stop the containers">
@@ -57,7 +81,7 @@ docker-compose down
 </CodeGroup>
 </Col>
 
-3. Restarting the containers will automatically pull the latest version of Formbricks:
+4. Restarting the containers with the latest version of Formbricks:
 
 <Col>
 <CodeGroup title="Restart the containers">
@@ -69,7 +93,7 @@ docker-compose up -d
 </CodeGroup>
 </Col>
 
-4. Now let's migrate the data to the latest schema:
+5. Now let's migrate the data to the latest schema:
 
 <Note>To find your Docker Network name for your Postgres Database, find it using `docker network ls`</Note>
 
@@ -77,6 +101,7 @@ docker-compose up -d
 <CodeGroup title="Migrate the data">
 
 ```bash
+docker pull ghcr.io/formbricks/data-migrations:latest && \
 docker run --rm \
   --network=formbricks_default \
   -e DATABASE_URL="postgresql://postgres:postgres@postgres:5432/formbricks?schema=public" \
@@ -89,7 +114,7 @@ docker run --rm \
 
 The above command will migrate your data to the latest schema. This is a crucial step to migrate your existing data to the new structure. Only if the script runs successful, changes are made to the database. The script can safely run multiple times.
 
-5. That's it! Once the migration is complete, you can **now access your Formbricks instance** at the same URL as before.
+6. That's it! Once the migration is complete, you can **now access your Formbricks instance** at the same URL as before.
 
 ### App Surveys with @formbricks/js
 

apps/docs/app/website-surveys/actions-and-targeting/page.mdx

@@ -6,7 +6,7 @@ import StepTwo from "./images/StepTwo.webp";
 export const metadata = {
   title: "Using Actions in Formbricks | Fine-tuning Session Moments",
   description:
-    "Dive deep into how actions in Formbricks help products and teams to engage active sessions at precise moments in their journey. Discover the power of actions, from coding to no-code setups, to refine public facing websites' targeting and generate richer, more detailed insights.",
+    "Dive deep into how actions in Formbricks help products and organizations to engage active sessions at precise moments in their journey. Discover the power of actions, from coding to no-code setups, to refine public facing websites' targeting and generate richer, more detailed insights.",
 };
 
 #### Website Surveys

apps/docs/app/website-surveys/framework-guides/components/Libraries.tsx

@@ -33,7 +33,7 @@ const libraries = [
   },
 ];
 
-export function Libraries() {
+export const Libraries = () => {
   return (
     <div className="my-16 xl:max-w-none">
       <div className="not-prose mt-4 grid grid-cols-1 gap-x-6 gap-y-10 border-slate-900/5 sm:grid-cols-2 xl:max-w-none xl:grid-cols-3 dark:border-white/5">
@@ -57,4 +57,4 @@ export function Libraries() {
       </div>
     </div>
   );
-}
+};

apps/docs/components/Button.tsx

@@ -1,7 +1,7 @@
 import clsx from "clsx";
 import Link from "next/link";
 
-function ArrowIcon(props: React.ComponentPropsWithoutRef<"svg">) {
+const ArrowIcon = (props: React.ComponentPropsWithoutRef<"svg">) => {
   return (
     <svg viewBox="0 0 20 20" fill="none" aria-hidden="true" {...props}>
       <path
@@ -12,7 +12,7 @@ function ArrowIcon(props: React.ComponentPropsWithoutRef<"svg">) {
       />
     </svg>
   );
-}
+};
 
 const variantStyles = {
   primary:
@@ -34,7 +34,7 @@ type ButtonProps = {
   | (React.ComponentPropsWithoutRef<"button"> & { href?: undefined })
 );
 
-export function Button({ variant = "primary", className, children, arrow, ...props }: ButtonProps) {
+export const Button = ({ variant = "primary", className, children, arrow, ...props }: ButtonProps) => {
   className = clsx(
     "inline-flex gap-0.5 justify-center items-center overflow-hidden font-medium transition text-center",
     variantStyles[variant],
@@ -74,4 +74,4 @@ export function Button({ variant = "primary", className, children, arrow, ...pro
       {inner}
     </Link>
   );
-}
+};

apps/docs/components/Code.tsx

@@ -17,7 +17,7 @@ const languageNames: Record<string, string> = {
   go: "Go",
 };
 
-function getPanelTitle({ title, language }: { title?: string; language?: string }) {
+const getPanelTitle = ({ title, language }: { title?: string; language?: string }) => {
   if (title) {
     return title;
   }
@@ -25,9 +25,9 @@ function getPanelTitle({ title, language }: { title?: string; language?: string
     return languageNames[language];
   }
   return "Code";
-}
+};
 
-function ClipboardIcon(props: React.ComponentPropsWithoutRef<"svg">) {
+const ClipboardIcon = (props: React.ComponentPropsWithoutRef<"svg">) => {
   return (
     <svg viewBox="0 0 20 20" aria-hidden="true" {...props}>
       <path
@@ -41,9 +41,9 @@ function ClipboardIcon(props: React.ComponentPropsWithoutRef<"svg">) {
       />
     </svg>
   );
-}
+};
 
-function CopyButton({ code }: { code: string }) {
+const CopyButton = ({ code }: { code: string }) => {
   let [copyCount, setCopyCount] = useState(0);
   let copied = copyCount > 0;
 
@@ -89,9 +89,9 @@ function CopyButton({ code }: { code: string }) {
       </span>
     </button>
   );
-}
+};
 
-function CodePanelHeader({ tag, label }: { tag?: string; label?: string }) {
+const CodePanelHeader = ({ tag, label }: { tag?: string; label?: string }) => {
   if (!tag && !label) {
     return null;
   }
@@ -107,9 +107,9 @@ function CodePanelHeader({ tag, label }: { tag?: string; label?: string }) {
       {label && <span className="font-mono text-xs text-slate-400">{label}</span>}
     </div>
   );
-}
+};
 
-function CodePanel({
+const CodePanel = ({
   children,
   tag,
   label,
@@ -119,7 +119,7 @@ function CodePanel({
   tag?: string;
   label?: string;
   code?: string;
-}) {
+}) => {
   let child = Children.only(children);
 
   if (isValidElement(child)) {
@@ -141,9 +141,9 @@ function CodePanel({
       </div>
     </div>
   );
-}
+};
 
-function CodeGroupHeader({
+const CodeGroupHeader = ({
   title,
   children,
   selectedIndex,
@@ -151,7 +151,7 @@ function CodeGroupHeader({
   title: string;
   children: React.ReactNode;
   selectedIndex: number;
-}) {
+}) => {
   let hasTabs = Children.count(children) >= 1;
 
   if (!title && !hasTabs) {
@@ -178,9 +178,9 @@ function CodeGroupHeader({
       )}
     </div>
   );
-}
+};
 
-function CodeGroupPanels({ children, ...props }: React.ComponentPropsWithoutRef<typeof CodePanel>) {
+const CodeGroupPanels = ({ children, ...props }: React.ComponentPropsWithoutRef<typeof CodePanel>) => {
   let hasTabs = Children.count(children) >= 1;
 
   if (hasTabs) {
@@ -196,9 +196,9 @@ function CodeGroupPanels({ children, ...props }: React.ComponentPropsWithoutRef<
   }
 
   return <CodePanel {...props}>{children}</CodePanel>;
-}
+};
 
-function usePreventLayoutShift() {
+const usePreventLayoutShift = () => {
   let positionRef = useRef<HTMLElement>(null);
   let rafRef = useRef<number>();
 
@@ -227,7 +227,7 @@ function usePreventLayoutShift() {
       });
     },
   };
-}
+};
 
 const usePreferredLanguageStore = create<{
   preferredLanguages: Array<string>;
@@ -243,7 +243,7 @@ const usePreferredLanguageStore = create<{
     })),
 }));
 
-function useTabGroupProps(availableLanguages: Array<string>) {
+const useTabGroupProps = (availableLanguages: Array<string>) => {
   let { preferredLanguages, addPreferredLanguage } = usePreferredLanguageStore();
   let [selectedIndex, setSelectedIndex] = useState(0);
   let activeLanguage = [...availableLanguages].sort(
@@ -265,15 +265,15 @@ function useTabGroupProps(availableLanguages: Array<string>) {
       preventLayoutShift(() => addPreferredLanguage(availableLanguages[newSelectedIndex]));
     },
   };
-}
+};
 
 const CodeGroupContext = createContext(false);
 
-export function CodeGroup({
+export const CodeGroup = ({
   children,
   title,
   ...props
-}: React.ComponentPropsWithoutRef<typeof CodeGroupPanels> & { title: string }) {
+}: React.ComponentPropsWithoutRef<typeof CodeGroupPanels> & { title: string }) => {
   let languages =
     Children.map(children, (child) => getPanelTitle(isValidElement(child) ? child.props : {})) ?? [];
   let tabGroupProps = useTabGroupProps(languages);
@@ -303,9 +303,9 @@ export function CodeGroup({
       )}
     </CodeGroupContext.Provider>
   );
-}
+};
 
-export function Code({ children, ...props }: React.ComponentPropsWithoutRef<"code">) {
+export const Code = ({ children, ...props }: React.ComponentPropsWithoutRef<"code">) => {
   let isGrouped = useContext(CodeGroupContext);
 
   if (isGrouped) {
@@ -316,9 +316,9 @@ export function Code({ children, ...props }: React.ComponentPropsWithoutRef<"cod
   }
 
   return <code {...props}>{children}</code>;
-}
+};
 
-export function Pre({ children, ...props }: React.ComponentPropsWithoutRef<typeof CodeGroup>) {
+export const Pre = ({ children, ...props }: React.ComponentPropsWithoutRef<typeof CodeGroup>) => {
   let isGrouped = useContext(CodeGroupContext);
 
   if (isGrouped) {
@@ -326,4 +326,4 @@ export function Pre({ children, ...props }: React.ComponentPropsWithoutRef<typeo
   }
 
   return <CodeGroup {...props}>{children}</CodeGroup>;
-}
+};

apps/docs/components/Feedback.tsx

@@ -3,7 +3,7 @@
 import { Transition } from "@headlessui/react";
 import { Fragment, forwardRef, useState } from "react";
 
-function CheckIcon(props: React.ComponentPropsWithoutRef<"svg">) {
+const CheckIcon = (props: React.ComponentPropsWithoutRef<"svg">) => {
   return (
     <svg viewBox="0 0 20 20" aria-hidden="true" {...props}>
       <circle cx="10" cy="10" r="10" strokeWidth="0" />
@@ -16,9 +16,9 @@ function CheckIcon(props: React.ComponentPropsWithoutRef<"svg">) {
       />
     </svg>
   );
-}
+};
 
-function FeedbackButton(props: Omit<React.ComponentPropsWithoutRef<"button">, "type" | "className">) {
+const FeedbackButton = (props: Omit<React.ComponentPropsWithoutRef<"button">, "type" | "className">) => {
   return (
     <button
       type="submit"
@@ -26,12 +26,12 @@ function FeedbackButton(props: Omit<React.ComponentPropsWithoutRef<"button">, "t
       {...props}
     />
   );
-}
+};
 
 const FeedbackForm = forwardRef<
   React.ElementRef<"form">,
   Pick<React.ComponentPropsWithoutRef<"form">, "onSubmit">
->(function FeedbackForm({ onSubmit }, ref) {
+>(({ onSubmit }, ref) => {
   return (
     <form
       ref={ref}
@@ -47,7 +47,9 @@ const FeedbackForm = forwardRef<
   );
 });
 
-const FeedbackThanks = forwardRef<React.ElementRef<"div">>(function FeedbackThanks(_props, ref) {
+FeedbackForm.displayName = "FeedbackForm";
+
+const FeedbackThanks = forwardRef<React.ElementRef<"div">>((_props, ref) => {
   return (
     <div ref={ref} className="absolute inset-0 flex justify-center md:justify-start">
       <div className="flex items-center gap-3 rounded-full bg-teal-50/50 py-1 pl-1.5 pr-3 text-sm text-teal-900 ring-1 ring-inset ring-teal-500/20 dark:bg-teal-500/5 dark:text-teal-200 dark:ring-teal-500/30">
@@ -58,17 +60,19 @@ const FeedbackThanks = forwardRef<React.ElementRef<"div">>(function FeedbackThan
   );
 });
 
-export function Feedback() {
+FeedbackThanks.displayName = "FeedbackThanks";
+
+export const Feedback = () => {
   let [submitted, setSubmitted] = useState(false);
 
-  function onSubmit(event: React.FormEvent<HTMLFormElement>) {
+  const onSubmit = (event: React.FormEvent<HTMLFormElement>) => {
     event.preventDefault();
 
     // event.nativeEvent.submitter.dataset.response
     // => "yes" or "no"
 
     setSubmitted(true);
-  }
+  };
 
   return (
     <div className="relative h-8">
@@ -90,4 +94,4 @@ export function Feedback() {
       </Transition>
     </div>
   );
-}
+};

apps/docs/components/Footer.tsx

@@ -9,7 +9,7 @@ import { DiscordIcon } from "./icons/DiscordIcon";
 import { GithubIcon } from "./icons/GithubIcon";
 import { TwitterIcon } from "./icons/TwitterIcon";
 
-function PageLink({
+const PageLink = ({
   label,
   page,
   previous = false,
@@ -17,7 +17,7 @@ function PageLink({
   label: string;
   page: { href: string; title: string };
   previous?: boolean;
-}) {
+}) => {
   return (
     <>
       <Button
@@ -36,9 +36,9 @@ function PageLink({
       </Link>
     </>
   );
-}
+};
 
-function PageNavigation() {
+const PageNavigation = () => {
   let pathname = usePathname();
   let allPages = navigation.flatMap((group) => {
     return group.links.flatMap((link) => {
@@ -72,9 +72,9 @@ function PageNavigation() {
       )}
     </div>
   );
-}
+};
 
-function SocialLink({
+const SocialLink = ({
   href,
   icon: Icon,
   children,
@@ -82,16 +82,16 @@ function SocialLink({
   href: string;
   icon: React.ComponentType<{ className?: string }>;
   children: React.ReactNode;
-}) {
+}) => {
   return (
     <Link href={href} className="group">
       <span className="sr-only">{children}</span>
       <Icon className="h-5 w-5 fill-slate-700 transition group-hover:fill-slate-900 dark:group-hover:fill-slate-500" />
     </Link>
   );
-}
+};
 
-function SmallPrint() {
+const SmallPrint = () => {
   const currentYear = new Date().getFullYear();
 
   return (
@@ -112,13 +112,13 @@ function SmallPrint() {
       </div>
     </div>
   );
-}
+};
 
-export function Footer() {
+export const Footer = () => {
   return (
     <footer className="mx-auto w-full max-w-2xl space-y-10 pb-16 lg:max-w-5xl">
       <PageNavigation />
       <SmallPrint />
     </footer>
   );
-}
+};

apps/docs/components/GridPattern.tsx

@@ -1,6 +1,6 @@
 import { useId } from "react";
 
-export function GridPattern({
+export const GridPattern = ({
   width,
   height,
   x,
@@ -13,7 +13,7 @@ export function GridPattern({
   x: string | number;
   y: string | number;
   squares: Array<[x: number, y: number]>;
-}) {
+}) => {
   let patternId = useId();
 
   return (
@@ -40,4 +40,4 @@ export function GridPattern({
       )}
     </svg>
   );
-}
+};

apps/docs/components/Guides.tsx

@@ -24,7 +24,7 @@ const guides = [
   },
 ];
 
-export function Guides() {
+export const Guides = () => {
   return (
     <div className="my-16 xl:max-w-none">
       <Heading level={2} id="guides">
@@ -45,4 +45,4 @@ export function Guides() {
       </div>
     </div>
   );
-}
+};

apps/docs/components/Header.tsx

@@ -11,7 +11,7 @@ import { Button } from "./Button";
 import { MobileNavigation, useIsInsideMobileNavigation, useMobileNavigationStore } from "./MobileNavigation";
 import { ThemeToggle } from "./ThemeToggle";
 
-function TopLevelNavItem({ href, children }: { href: string; children: React.ReactNode }) {
+const TopLevelNavItem = ({ href, children }: { href: string; children: React.ReactNode }) => {
   return (
     <li>
       <Link
@@ -21,12 +21,9 @@ function TopLevelNavItem({ href, children }: { href: string; children: React.Rea
       </Link>
     </li>
   );
-}
+};
 
-export const Header = forwardRef<React.ElementRef<"div">, { className?: string }>(function Header(
-  { className },
-  ref
-) {
+export const Header = forwardRef<React.ElementRef<"div">, { className?: string }>(({ className }, ref) => {
   let { isOpen: mobileNavIsOpen } = useMobileNavigationStore();
   let isInsideMobileNavigation = useIsInsideMobileNavigation();
 
@@ -91,3 +88,5 @@ export const Header = forwardRef<React.ElementRef<"div">, { className?: string }
     </motion.div>
   );
 });
+
+Header.displayName = "Header";

apps/docs/components/Heading.tsx

@@ -7,15 +7,15 @@ import { useInView } from "framer-motion";
 import Link from "next/link";
 import { useEffect, useRef } from "react";
 
-function AnchorIcon(props: React.ComponentPropsWithoutRef<"svg">) {
+const AnchorIcon = (props: React.ComponentPropsWithoutRef<"svg">) => {
   return (
     <svg viewBox="0 0 20 20" fill="none" strokeLinecap="round" aria-hidden="true" {...props}>
       <path d="m6.5 11.5-.964-.964a3.535 3.535 0 1 1 5-5l.964.964m2 2 .964.964a3.536 3.536 0 0 1-5 5L8.5 13.5m0-5 3 3" />
     </svg>
   );
-}
+};
 
-function Eyebrow({ tag, label }: { tag?: string; label?: string }) {
+const Eyebrow = ({ tag, label }: { tag?: string; label?: string }) => {
   if (!tag && !label) {
     return null;
   }
@@ -27,9 +27,9 @@ function Eyebrow({ tag, label }: { tag?: string; label?: string }) {
       {label && <span className="font-mono text-xs text-zinc-400">{label}</span>}
     </div>
   );
-}
+};
 
-function Anchor({ id, inView, children }: { id: string; inView: boolean; children: React.ReactNode }) {
+const Anchor = ({ id, inView, children }: { id: string; inView: boolean; children: React.ReactNode }) => {
   return (
     <Link href={`#${id}`} className="group text-inherit no-underline hover:text-inherit">
       {inView && (
@@ -42,9 +42,9 @@ function Anchor({ id, inView, children }: { id: string; inView: boolean; childre
       {children}
     </Link>
   );
-}
+};
 
-export function Heading<Level extends 2 | 3>({
+export const Heading = <Level extends 2 | 3>({
   children,
   tag,
   label,
@@ -57,7 +57,7 @@ export function Heading<Level extends 2 | 3>({
   label?: string;
   level?: Level;
   anchor?: boolean;
-}) {
+}) => {
   level = level ?? (2 as Level);
   let Component = `h${level}` as "h2" | "h3";
   let ref = useRef<HTMLHeadingElement>(null);
@@ -88,4 +88,4 @@ export function Heading<Level extends 2 | 3>({
       </Component>
     </>
   );
-}
+};

apps/docs/components/HeroPattern.tsx

@@ -1,6 +1,6 @@
 import { GridPattern } from "./GridPattern";
 
-export function HeroPattern() {
+export const HeroPattern = () => {
   return (
     <div className="absolute inset-0 -z-10 mx-0 max-w-none overflow-hidden">
       <div className="absolute left-1/2 top-0 ml-[-38rem] h-[25rem] w-[81.25rem] dark:[mask-image:linear-gradient(white,transparent)]">
@@ -28,4 +28,4 @@ export function HeroPattern() {
       </div>
     </div>
   );
-}
+};

apps/docs/components/Layout.tsx

@@ -10,13 +10,13 @@ import { Footer } from "./Footer";
 import { Header } from "./Header";
 import { type Section, SectionProvider } from "./SectionProvider";
 
-export function Layout({
+export const Layout = ({
   children,
   allSections,
 }: {
   children: React.ReactNode;
   allSections: Record<string, Array<Section>>;
-}) {
+}) => {
   let pathname = usePathname();
 
   return (
@@ -32,7 +32,7 @@ export function Layout({
               </Link>
             </div>
             <Header />
-            <Navigation className="hidden lg:mt-10 lg:block" />
+            <Navigation className="hidden lg:mt-10 lg:block" isMobile={false} />
           </div>
         </motion.header>
         <div className="relative flex h-full flex-col px-4 pt-14 sm:px-6 lg:px-8">
@@ -42,4 +42,4 @@ export function Layout({
       </div>
     </SectionProvider>
   );
-}
+};

apps/docs/components/Logo.tsx

@@ -2,7 +2,7 @@ import logoDark from "@/images/logo/logo-dark.svg";
 import logoLight from "@/images/logo/logo-light.svg";
 import Image from "next/image";
 
-export function Logo({ className }: { className?: string }) {
+export const Logo = ({ className }: { className?: string }) => {
   return (
     <div>
       <div className="block dark:hidden">
@@ -13,4 +13,4 @@ export function Logo({ className }: { className?: string }) {
       </div>
     </div>
   );
-}
+};

apps/docs/components/MdxImage.tsx

@@ -1,6 +1,6 @@
 import Image, { ImageProps } from "next/image";
 import React from "react";
 
-export function MdxImage(props: ImageProps) {
+export const MdxImage = (props: ImageProps) => {
   return <Image {...props} alt={props.alt} />;
-}
+};