fix: German translations

feat: email package for client side email components (#6986 )
feat: configure @formbricks/survey-ui for external publishing (#6991 )
2025-12-23 14:40:44 -06:00 · 2025-12-22 16:32:31 +01:00 · 2025-12-22 14:13:06 +00:00 · 2025-12-22 12:39:54 +00:00 · 2025-12-22 08:35:08 +00:00 · 2025-12-22 08:13:45 +00:00
111 changed files with 5172 additions and 3377 deletions
--- a/.github/workflows/chromatic.yml
+++ b/.github/workflows/chromatic.yml
@@ -13,13 +13,12 @@ jobs:
  chromatic:
    name: Run Chromatic
    runs-on: ubuntu-latest
+    timeout-minutes: 30
    permissions:
-      packages: write
-      id-token: write
-      actions: read
+      contents: read
    steps:
      - name: Harden the runner (Audit all outbound calls)
-        uses: step-security/harden-runner@0634a2670c59f64b4a01f0f96f84700a4088b9f0 # v2.12.0
+        uses: step-security/harden-runner@ec9f2d5744a09debf3a187a3f4f675c53b671911 # v2.13.0
        with:
          egress-policy: audit

@@ -27,16 +26,34 @@ jobs:
        uses: actions/checkout@11bd71901bbe5b1630ceea73d27597364c9af683 # v4.2.2
        with:
          fetch-depth: 0
-      - uses: actions/setup-node@1d0ff469b7ec7b3cb9d8673fde0c81c44821de2a # v4.2.0
+
+      - name: Setup Node.js
+        uses: actions/setup-node@49933ea5288caeca8642d1e84afbd3f7d6820020 # v4.4.0
        with:
          node-version: 20
+
      - name: Install pnpm
        uses: pnpm/action-setup@a7487c7e89a18df4991f7f222e4898a00d66ddda # v4.1.0
+
+      - name: Get pnpm store directory
+        shell: bash
+        run: |
+          echo "STORE_PATH=$(pnpm store path --silent)" >> $GITHUB_ENV
+
+      - name: Setup pnpm cache
+        uses: actions/cache@5a3ec84eff668545956fd18022155c47e93e2684 # v4.2.3
+        with:
+          path: ${{ env.STORE_PATH }}
+          key: ${{ runner.os }}-pnpm-store-${{ hashFiles('**/pnpm-lock.yaml') }}
+          restore-keys: |
+            ${{ runner.os }}-pnpm-store-
+
      - name: Install dependencies
        run: pnpm install --config.platform=linux --config.architecture=x64
+
      - name: Run Chromatic
-        uses: chromaui/action@c93e0bc3a63aa176e14a75b61a31847cbfdd341c # latest
+        uses: chromaui/action@4c20b95e9d3209ecfdf9cd6aace6bbde71ba1694 # v13.3.4
        with:
-          # ⚠️ Make sure to configure a `CHROMATIC_PROJECT_TOKEN` repository secret
          projectToken: ${{ secrets.CHROMATIC_PROJECT_TOKEN }}
          workingDir: apps/storybook
+          zip: true
--- a/apps/web/app/(app)/(onboarding)/organizations/[organizationId]/projects/new/settings/components/ProjectSettings.tsx
+++ b/apps/web/app/(app)/(onboarding)/organizations/[organizationId]/projects/new/settings/components/ProjectSettings.tsx
@@ -227,7 +227,7 @@ export const ProjectSettings = ({
            alt="Logo"
            width={256}
            height={56}
-            className="absolute left-2 top-2 -mb-6 h-20 w-auto max-w-64 rounded-lg border object-contain p-1"
+            className="absolute top-2 left-2 -mb-6 h-20 w-auto max-w-64 rounded-lg border object-contain p-1"
          />
        )}
        <p className="text-sm text-slate-400">{t("common.preview")}</p>
--- a/apps/web/app/(app)/(onboarding)/organizations/[organizationId]/projects/new/settings/page.tsx
+++ b/apps/web/app/(app)/(onboarding)/organizations/[organizationId]/projects/new/settings/page.tsx
@@ -69,7 +69,7 @@ const Page = async (props: ProjectSettingsPageProps) => {
      />
      {projects.length >= 1 && (
        <Button
-          className="absolute right-5 top-5 !mt-0 text-slate-500 hover:text-slate-700"
+          className="absolute top-5 right-5 !mt-0 text-slate-500 hover:text-slate-700"
          variant="ghost"
          asChild>
          <Link href={"/"}>
--- a/apps/web/app/(app)/environments/[environmentId]/components/MainNavigation.tsx
+++ b/apps/web/app/(app)/environments/[environmentId]/components/MainNavigation.tsx
@@ -185,7 +185,7 @@ export const MainNavigation = ({
                size="icon"
                onClick={toggleSidebar}
                className={cn(
-                  "rounded-xl bg-slate-50 p-1 text-slate-600 transition-all hover:bg-slate-100 focus:outline-none focus:ring-0 focus:ring-transparent"
+                  "rounded-xl bg-slate-50 p-1 text-slate-600 transition-all hover:bg-slate-100 focus:ring-0 focus:ring-transparent focus:outline-none"
                )}>
                {isCollapsed ? (
                  <PanelLeftOpenIcon strokeWidth={1.5} />
--- a/apps/web/lib/utils/video-upload.test.ts
+++ b/apps/web/lib/utils/video-upload.test.ts
@@ -61,6 +61,9 @@ describe("convertToEmbedUrl", () => {
    expect(convertToEmbedUrl("https://www.vimeo.com/123456789")).toBe(
      "https://player.vimeo.com/video/123456789"
    );
+    expect(convertToEmbedUrl("https://player.vimeo.com/video/123456789")).toBe(
+      "https://player.vimeo.com/video/123456789"
+    );
  });

  test("converts Loom URL to embed URL", () => {
@@ -70,6 +73,9 @@ describe("convertToEmbedUrl", () => {
    expect(convertToEmbedUrl("https://loom.com/share/abcdef123456")).toBe(
      "https://www.loom.com/embed/abcdef123456"
    );
+    expect(convertToEmbedUrl("https://www.loom.com/embed/abcdef123456")).toBe(
+      "https://www.loom.com/embed/abcdef123456"
+    );
  });

  test("returns undefined for unsupported URLs", () => {
@@ -109,6 +115,7 @@ describe("extractVimeoId", () => {
  test("extracts video ID from Vimeo URLs", () => {
    expect(extractVimeoId("https://vimeo.com/123456789")).toBe("123456789");
    expect(extractVimeoId("https://www.vimeo.com/123456789")).toBe("123456789");
+    expect(extractVimeoId("https://player.vimeo.com/video/123456789")).toBe("123456789");
  });

  test("returns null for invalid Vimeo URLs", () => {
@@ -121,6 +128,7 @@ describe("extractLoomId", () => {
  test("extracts video ID from Loom URLs", () => {
    expect(extractLoomId("https://loom.com/share/abcdef123456")).toBe("abcdef123456");
    expect(extractLoomId("https://www.loom.com/share/abcdef123456")).toBe("abcdef123456");
+    expect(extractLoomId("https://www.loom.com/embed/abcdef123456")).toBe("abcdef123456");
  });

  test("returns null for invalid Loom URLs", async () => {
--- a/apps/web/lib/utils/video-upload.ts
+++ b/apps/web/lib/utils/video-upload.ts
@@ -26,7 +26,7 @@ export const checkForVimeoUrl = (url: string): boolean => {

    if (vimeoUrl.protocol !== "https:") return false;

-    const vimeoDomains = ["www.vimeo.com", "vimeo.com"];
+    const vimeoDomains = ["www.vimeo.com", "vimeo.com", "player.vimeo.com"];
    const hostname = vimeoUrl.hostname;

    return vimeoDomains.includes(hostname);
@@ -74,7 +74,7 @@ export const extractYoutubeId = (url: string): string | null => {
 };

 export const extractVimeoId = (url: string): string | null => {
-  const regExp = /vimeo\.com\/(\d+)/;
+  const regExp = /vimeo\.com\/(?:video\/)?(\d+)/;
  const match = regExp.exec(url);

  if (match?.[1]) {
@@ -85,7 +85,7 @@ export const extractVimeoId = (url: string): string | null => {
 };

 export const extractLoomId = (url: string): string | null => {
-  const regExp = /loom\.com\/share\/([a-zA-Z0-9]+)/;
+  const regExp = /loom\.com\/(?:share|embed)\/([a-zA-Z0-9]+)/;
  const match = regExp.exec(url);

  if (match?.[1]) {
--- a/apps/web/locales/de-DE.json
+++ b/apps/web/locales/de-DE.json
@@ -171,8 +171,8 @@
    "copy": "Kopieren",
    "copy_code": "Code kopieren",
    "copy_link": "Link kopieren",
-    "count_contacts": "{value, plural, other {'{'value, plural,\none '{{#}' Kontakt'}'\nother '{{#}' Kontakte'}'\n'}'}}",
-    "count_responses": "{value, plural, other {{count} Antworten}}",
+    "count_contacts": "{value, plural, one {{value} Kontakt} other {{value} Kontakte}}",
+    "count_responses": "{value, plural, one {{value} Antwort} other {{value} Antworten}}",
    "create_new_organization": "Neue Organisation erstellen",
    "create_project": "Projekt erstellen",
    "create_segment": "Segment erstellen",
@@ -606,7 +606,7 @@
      "contacts_table_refresh": "Kontakte aktualisieren",
      "contacts_table_refresh_success": "Kontakte erfolgreich aktualisiert",
      "delete_contact_confirmation": "Dies wird alle Umfrageantworten und Kontaktattribute löschen, die mit diesem Kontakt verbunden sind. Jegliche zielgerichtete Kommunikation und Personalisierung basierend auf den Daten dieses Kontakts gehen verloren.",
-      "delete_contact_confirmation_with_quotas": "{value, plural, other {Dies wird alle Umfrageantworten und Kontaktattribute löschen, die mit diesem Kontakt verbunden sind. Jegliche zielgerichtete Kommunikation und Personalisierung basierend auf den Daten dieses Kontakts gehen verloren. Wenn dieser Kontakt Antworten hat, die zu den Umfragequoten zählen, werden die Quotenstände reduziert, aber die Quotenlimits bleiben unverändert.}}",
+      "delete_contact_confirmation_with_quotas": "{value, plural, one {Dies wird alle Umfrageantworten und Kontaktattribute löschen, die mit diesem Kontakt verbunden sind. Jegliche zielgerichtete Kommunikation und Personalisierung basierend auf den Daten dieses Kontakts gehen verloren. Wenn dieser Kontakt Antworten hat, die zu den Umfragequoten zählen, werden die Quotenstände reduziert, aber die Quotenlimits bleiben unverändert.} other {Dies wird alle Umfrageantworten und Kontaktattribute löschen, die mit diesen Kontakten verbunden sind. Jegliche zielgerichtete Kommunikation und Personalisierung basierend auf den Daten dieses Kontakts gehen verloren. Wenn diesen Kontakten Antworten haben, die zu den Umfragequoten zählen, werden die Quotenstände reduziert, aber die Quotenlimits bleiben unverändert.}}",
      "generate_personal_link": "Persönlichen Link generieren",
      "generate_personal_link_description": "Wähle eine veröffentlichte Umfrage aus, um einen personalisierten Link für diesen Kontakt zu generieren.",
      "no_published_link_surveys_available": "Keine veröffentlichten Link-Umfragen verfügbar. Bitte veröffentliche zuerst eine Link-Umfrage.",
@@ -1568,7 +1568,7 @@
          "edit_quota": "Bearbeite Quote",
          "end_survey_for_matching_participants": "Umfrage für passende Teilnehmer beenden",
          "inclusion_criteria": "Einschlusskriterien",
-          "limit_must_be_greater_than_or_equal_to_the_number_of_responses": "{value, plural, other {Limit muss größer oder gleich der Anzahl der Antworten sein}}",
+          "limit_must_be_greater_than_or_equal_to_the_number_of_responses": "{value, plural, one {Sie haben bereits {value} Antwort für dieses Kontingent, daher muss das Limit größer als {value} sein.} other {Sie haben bereits {value} Antworten für dieses Kontingent, daher muss das Limit größer als {value} sein.}}",
          "limited_to_x_responses": "Begrenzt auf {limit}",
          "new_quota": "Neues Kontingent",
          "quota_created_successfull_toast": "Kontingent erfolgreich erstellt",
--- a/apps/web/locales/fr-FR.json
+++ b/apps/web/locales/fr-FR.json
@@ -474,7 +474,7 @@
    "forgot_password_email_subject": "Réinitialise ton mot de passe Formbricks",
    "forgot_password_email_text": "Vous avez demandé un lien pour changer votre mot de passe. Vous pouvez le faire en cliquant sur le lien ci-dessous :",
    "hidden_field": "Champ caché",
-    "imprint": "Impressum",
+    "imprint": "Empreinte",
    "invite_accepted_email_heading": "Salut",
    "invite_accepted_email_subject": "Vous avez un nouveau membre dans votre organisation !",
    "invite_accepted_email_text_par1": "Je te fais savoir que",
--- a/apps/web/locales/pt-BR.json
+++ b/apps/web/locales/pt-BR.json
@@ -474,7 +474,7 @@
    "forgot_password_email_subject": "Redefinir sua senha Formbricks",
    "forgot_password_email_text": "Você pediu um link pra trocar sua senha. Você pode fazer isso clicando no link abaixo:",
    "hidden_field": "Campo oculto",
-    "imprint": "Impressum",
+    "imprint": "impressão",
    "invite_accepted_email_heading": "E aí",
    "invite_accepted_email_subject": "Você tem um novo membro na sua organização!",
    "invite_accepted_email_text_par1": "Só pra te avisar que",
--- a/apps/web/modules/email/components/preview-email-template.tsx
+++ b/apps/web/modules/email/components/preview-email-template.tsx
@@ -1,6 +1,10 @@
+import { TFunction } from "i18next";
+import { CalendarDaysIcon, ExternalLinkIcon, UploadIcon } from "lucide-react";
+import React from "react";
 import {
  Column,
  Container,
+  ElementHeader,
  Button as EmailButton,
  Img,
  Link,
@@ -8,11 +12,8 @@ import {
  Section,
  Tailwind,
  Text,
-} from "@react-email/components";
-import { render } from "@react-email/render";
-import { TFunction } from "i18next";
-import { CalendarDaysIcon, ExternalLinkIcon, UploadIcon } from "lucide-react";
-import React from "react";
+  render,
+} from "@formbricks/email";
 import { TSurveyCTAElement, TSurveyElementTypeEnum } from "@formbricks/types/surveys/elements";
 import { type TSurvey, type TSurveyStyling } from "@formbricks/types/surveys/types";
 import { cn } from "@/lib/cn";
@@ -24,7 +25,6 @@ import { isLight, mixColor } from "@/lib/utils/colors";
 import { parseRecallInfo } from "@/lib/utils/recall";
 import { RatingSmiley } from "@/modules/analysis/components/RatingSmiley";
 import { getNPSOptionColor, getRatingNumberOptionColor } from "../lib/utils";
-import { ElementHeader } from "./email-element-header";

 interface PreviewEmailTemplateProps {
  survey: TSurvey;
--- a/apps/web/modules/email/emails/auth/forgot-password-email.tsx
+++ b/apps/web/modules/email/emails/auth/forgot-password-email.tsx
@@ -1,30 +0,0 @@
-import { Container, Heading, Text } from "@react-email/components";
-import React from "react";
-import { getTranslate } from "@/lingodotdev/server";
-import { EmailButton } from "../../components/email-button";
-import { EmailFooter } from "../../components/email-footer";
-import { EmailTemplate } from "../../components/email-template";
-
-interface ForgotPasswordEmailProps {
-  verifyLink: string;
-}
-
-export async function ForgotPasswordEmail({
-  verifyLink,
-}: ForgotPasswordEmailProps): Promise<React.JSX.Element> {
-  const t = await getTranslate();
-  return (
-    <EmailTemplate t={t}>
-      <Container>
-        <Heading>{t("emails.forgot_password_email_heading")}</Heading>
-        <Text className="text-sm">{t("emails.forgot_password_email_text")}</Text>
-        <EmailButton href={verifyLink} label={t("emails.forgot_password_email_change_password")} />
-        <Text className="text-sm font-bold">{t("emails.forgot_password_email_link_valid_for_24_hours")}</Text>
-        <Text className="mb-0 text-sm">{t("emails.forgot_password_email_did_not_request")}</Text>
-        <EmailFooter t={t} />
-      </Container>
-    </EmailTemplate>
-  );
-}
-
-export default ForgotPasswordEmail;
--- a/apps/web/modules/email/emails/auth/new-email-verification.tsx
+++ b/apps/web/modules/email/emails/auth/new-email-verification.tsx
@@ -1,34 +0,0 @@
-import { Container, Heading, Link, Text } from "@react-email/components";
-import React from "react";
-import { getTranslate } from "@/lingodotdev/server";
-import { EmailButton } from "../../components/email-button";
-import { EmailFooter } from "../../components/email-footer";
-import { EmailTemplate } from "../../components/email-template";
-
-interface VerificationEmailProps {
-  readonly verifyLink: string;
-}
-
-export async function NewEmailVerification({
-  verifyLink,
-}: VerificationEmailProps): Promise<React.JSX.Element> {
-  const t = await getTranslate();
-  return (
-    <EmailTemplate t={t}>
-      <Container>
-        <Heading>{t("emails.verification_email_heading")}</Heading>
-        <Text className="text-sm">{t("emails.new_email_verification_text")}</Text>
-        <Text className="text-sm">{t("emails.verification_security_notice")}</Text>
-        <EmailButton href={verifyLink} label={t("emails.verification_email_verify_email")} />
-        <Text className="text-sm">{t("emails.verification_email_click_on_this_link")}</Text>
-        <Link className="break-all text-sm text-black" href={verifyLink}>
-          {verifyLink}
-        </Link>
-        <Text className="text-sm font-bold">{t("emails.verification_email_link_valid_for_24_hours")}</Text>
-        <EmailFooter t={t} />
-      </Container>
-    </EmailTemplate>
-  );
-}
-
-export default NewEmailVerification;
--- a/apps/web/modules/email/emails/auth/password-reset-notify-email.tsx
+++ b/apps/web/modules/email/emails/auth/password-reset-notify-email.tsx
@@ -1,20 +0,0 @@
-import { Container, Heading, Text } from "@react-email/components";
-import React from "react";
-import { getTranslate } from "@/lingodotdev/server";
-import { EmailFooter } from "../../components/email-footer";
-import { EmailTemplate } from "../../components/email-template";
-
-export async function PasswordResetNotifyEmail(): Promise<React.JSX.Element> {
-  const t = await getTranslate();
-  return (
-    <EmailTemplate t={t}>
-      <Container>
-        <Heading>{t("emails.password_changed_email_heading")}</Heading>
-        <Text className="text-sm">{t("emails.password_changed_email_text")}</Text>
-        <EmailFooter t={t} />
-      </Container>
-    </EmailTemplate>
-  );
-}
-
-export default PasswordResetNotifyEmail;
--- a/apps/web/modules/email/emails/general/email-customization-preview-email.tsx
+++ b/apps/web/modules/email/emails/general/email-customization-preview-email.tsx
@@ -1,26 +0,0 @@
-import { Container, Heading, Text } from "@react-email/components";
-import React from "react";
-import { getTranslate } from "@/lingodotdev/server";
-import { EmailTemplate } from "../../components/email-template";
-
-interface EmailCustomizationPreviewEmailProps {
-  userName: string;
-  logoUrl?: string;
-}
-
-export async function EmailCustomizationPreviewEmail({
-  userName,
-  logoUrl,
-}: EmailCustomizationPreviewEmailProps): Promise<React.JSX.Element> {
-  const t = await getTranslate();
-  return (
-    <EmailTemplate logoUrl={logoUrl} t={t}>
-      <Container>
-        <Heading>{t("emails.email_customization_preview_email_heading", { userName })}</Heading>
-        <Text className="text-sm">{t("emails.email_customization_preview_email_text")}</Text>
-      </Container>
-    </EmailTemplate>
-  );
-}
-
-export default EmailCustomizationPreviewEmail;
--- a/apps/web/modules/email/emails/invite/invite-accepted-email.tsx
+++ b/apps/web/modules/email/emails/invite/invite-accepted-email.tsx
@@ -1,33 +0,0 @@
-import { Container, Heading, Text } from "@react-email/components";
-import React from "react";
-import { getTranslate } from "@/lingodotdev/server";
-import { EmailFooter } from "../../components/email-footer";
-import { EmailTemplate } from "../../components/email-template";
-
-interface InviteAcceptedEmailProps {
-  inviterName: string;
-  inviteeName: string;
-}
-
-export async function InviteAcceptedEmail({
-  inviterName,
-  inviteeName,
-}: InviteAcceptedEmailProps): Promise<React.JSX.Element> {
-  const t = await getTranslate();
-  return (
-    <EmailTemplate t={t}>
-      <Container>
-        <Heading>
-          {t("emails.invite_accepted_email_heading", { inviterName })} {inviterName}
-        </Heading>
-        <Text className="text-sm">
-          {t("emails.invite_accepted_email_text_par1", { inviteeName })} {inviteeName}{" "}
-          {t("emails.invite_accepted_email_text_par2")}
-        </Text>
-        <EmailFooter t={t} />
-      </Container>
-    </EmailTemplate>
-  );
-}
-
-export default InviteAcceptedEmail;
--- a/apps/web/modules/email/emails/invite/invite-email.tsx
+++ b/apps/web/modules/email/emails/invite/invite-email.tsx
@@ -1,37 +0,0 @@
-import { Container, Heading, Text } from "@react-email/components";
-import React from "react";
-import { getTranslate } from "@/lingodotdev/server";
-import { EmailButton } from "../../components/email-button";
-import { EmailFooter } from "../../components/email-footer";
-import { EmailTemplate } from "../../components/email-template";
-
-interface InviteEmailProps {
-  inviteeName: string;
-  inviterName: string;
-  verifyLink: string;
-}
-
-export async function InviteEmail({
-  inviteeName,
-  inviterName,
-  verifyLink,
-}: InviteEmailProps): Promise<React.JSX.Element> {
-  const t = await getTranslate();
-  return (
-    <EmailTemplate t={t}>
-      <Container>
-        <Heading>
-          {t("emails.invite_email_heading", { inviteeName })} {inviteeName}
-        </Heading>
-        <Text className="text-sm">
-          {t("emails.invite_email_text_par1", { inviterName })} {inviterName}{" "}
-          {t("emails.invite_email_text_par2")}
-        </Text>
-        <EmailButton href={verifyLink} label={t("emails.invite_email_button_label")} />
-        <EmailFooter t={t} />
-      </Container>
-    </EmailTemplate>
-  );
-}
-
-export default InviteEmail;
--- a/apps/web/modules/email/emails/survey/embed-survey-preview-email.tsx
+++ b/apps/web/modules/email/emails/survey/embed-survey-preview-email.tsx
@@ -1,36 +0,0 @@
-import { Container, Heading, Text } from "@react-email/components";
-import React from "react";
-import { getTranslate } from "@/lingodotdev/server";
-import { EmailTemplate } from "../../components/email-template";
-
-interface EmbedSurveyPreviewEmailProps {
-  html: string;
-  environmentId: string;
-  logoUrl?: string;
-}
-
-export async function EmbedSurveyPreviewEmail({
-  html,
-  environmentId,
-  logoUrl,
-}: EmbedSurveyPreviewEmailProps): Promise<React.JSX.Element> {
-  const t = await getTranslate();
-  return (
-    <EmailTemplate logoUrl={logoUrl} t={t}>
-      <Container>
-        <Heading>{t("emails.embed_survey_preview_email_heading")}</Heading>
-        <Text className="text-sm">{t("emails.embed_survey_preview_email_text")}</Text>
-        <Text className="text-sm">
-          <b>{t("emails.embed_survey_preview_email_didnt_request")}</b>{" "}
-          {t("emails.embed_survey_preview_email_fight_spam")}
-        </Text>
-        <div className="text-sm" dangerouslySetInnerHTML={{ __html: html }} />
-        <Text className="text-center text-sm text-slate-700">
-          {t("emails.embed_survey_preview_email_environment_id")}: {environmentId}
-        </Text>
-      </Container>
-    </EmailTemplate>
-  );
-}
-
-export default EmbedSurveyPreviewEmail;
--- a/apps/web/modules/email/emails/survey/link-survey-email.tsx
+++ b/apps/web/modules/email/emails/survey/link-survey-email.tsx
@@ -1,36 +0,0 @@
-import { Container, Heading, Text } from "@react-email/components";
-import React from "react";
-import { getTranslate } from "@/lingodotdev/server";
-import { EmailButton } from "../../components/email-button";
-import { EmailFooter } from "../../components/email-footer";
-import { EmailTemplate } from "../../components/email-template";
-
-interface LinkSurveyEmailProps {
-  surveyName: string;
-  surveyLink: string;
-  logoUrl: string;
-}
-
-export async function LinkSurveyEmail({
-  surveyName,
-  surveyLink,
-  logoUrl,
-}: LinkSurveyEmailProps): Promise<React.JSX.Element> {
-  const t = await getTranslate();
-  return (
-    <EmailTemplate logoUrl={logoUrl} t={t}>
-      <Container>
-        <Heading>{t("emails.verification_email_hey")}</Heading>
-        <Text className="text-sm">{t("emails.verification_email_thanks")}</Text>
-        <Text className="text-sm">{t("emails.verification_email_to_fill_survey")}</Text>
-        <EmailButton href={surveyLink} label={t("emails.verification_email_take_survey")} />
-        <Text className="text-sm text-slate-400">
-          {t("emails.verification_email_survey_name")}: {surveyName}
-        </Text>
-        <EmailFooter t={t} />
-      </Container>
-    </EmailTemplate>
-  );
-}
-
-export default LinkSurveyEmail;
--- a/apps/web/modules/email/index.tsx
+++ b/apps/web/modules/email/index.tsx
@@ -1,6 +1,18 @@
-import { render } from "@react-email/render";
 import { createTransport } from "nodemailer";
 import type SMTPTransport from "nodemailer/lib/smtp-transport";
+import {
+  renderEmailCustomizationPreviewEmail,
+  renderEmbedSurveyPreviewEmail,
+  renderForgotPasswordEmail,
+  renderInviteAcceptedEmail,
+  renderInviteEmail,
+  renderLinkSurveyEmail,
+  renderNewEmailVerification,
+  renderPasswordResetNotifyEmail,
+  renderResponseFinishedEmail,
+  renderVerificationEmail,
+} from "@formbricks/email";
+import { TEmailTemplateLegalProps } from "@formbricks/email/src/types/email";
 import { logger } from "@formbricks/logger";
 import type { TLinkSurveyEmailData } from "@formbricks/types/email";
 import { InvalidInputError } from "@formbricks/types/errors";
@@ -9,8 +21,11 @@ import type { TSurvey } from "@formbricks/types/surveys/types";
 import { TUserEmail, TUserLocale } from "@formbricks/types/user";
 import {
  DEBUG,
+  IMPRINT_ADDRESS,
+  IMPRINT_URL,
  MAIL_FROM,
  MAIL_FROM_NAME,
+  PRIVACY_URL,
  SMTP_AUTHENTICATED,
  SMTP_HOST,
  SMTP_PASSWORD,
@@ -18,25 +33,24 @@ import {
  SMTP_REJECT_UNAUTHORIZED_TLS,
  SMTP_SECURE_ENABLED,
  SMTP_USER,
+  TERMS_URL,
  WEBAPP_URL,
 } from "@/lib/constants";
 import { getPublicDomain } from "@/lib/getPublicUrl";
 import { createEmailChangeToken, createInviteToken, createToken, createTokenForLinkSurvey } from "@/lib/jwt";
 import { getOrganizationByEnvironmentId } from "@/lib/organization/service";
+import { getElementResponseMapping } from "@/lib/responses";
 import { getTranslate } from "@/lingodotdev/server";
-import NewEmailVerification from "@/modules/email/emails/auth/new-email-verification";
-import { EmailCustomizationPreviewEmail } from "@/modules/email/emails/general/email-customization-preview-email";
-import { ForgotPasswordEmail } from "./emails/auth/forgot-password-email";
-import { PasswordResetNotifyEmail } from "./emails/auth/password-reset-notify-email";
-import { VerificationEmail } from "./emails/auth/verification-email";
-import { InviteAcceptedEmail } from "./emails/invite/invite-accepted-email";
-import { InviteEmail } from "./emails/invite/invite-email";
-import { EmbedSurveyPreviewEmail } from "./emails/survey/embed-survey-preview-email";
-import { LinkSurveyEmail } from "./emails/survey/link-survey-email";
-import { ResponseFinishedEmail } from "./emails/survey/response-finished-email";

 export const IS_SMTP_CONFIGURED = Boolean(SMTP_HOST && SMTP_PORT);

+const legalProps: TEmailTemplateLegalProps = {
+  privacyUrl: PRIVACY_URL || undefined,
+  termsUrl: TERMS_URL || undefined,
+  imprintUrl: IMPRINT_URL || undefined,
+  imprintAddress: IMPRINT_ADDRESS || undefined,
+};
+
 interface SendEmailDataProps {
  to: string;
  replyTo?: string;
@@ -89,7 +103,7 @@ export const sendVerificationNewEmail = async (id: string, email: string): Promi
    const token = createEmailChangeToken(id, email);
    const verifyLink = `${WEBAPP_URL}/verify-email-change?token=${encodeURIComponent(token)}`;

-    const html = await render(await NewEmailVerification({ verifyLink }));
+    const html = await renderNewEmailVerification({ verifyLink, t, ...legalProps });

    return await sendEmail({
      to: email,
@@ -117,7 +131,12 @@ export const sendVerificationEmail = async ({
    const verifyLink = `${WEBAPP_URL}/auth/verify?token=${encodeURIComponent(token)}`;
    const verificationRequestLink = `${WEBAPP_URL}/auth/verification-requested?token=${encodeURIComponent(token)}`;

-    const html = await render(await VerificationEmail({ verificationRequestLink, verifyLink }));
+    const html = await renderVerificationEmail({
+      verificationRequestLink,
+      verifyLink,
+      t,
+      ...legalProps,
+    });

    return await sendEmail({
      to: email,
@@ -140,7 +159,7 @@ export const sendForgotPasswordEmail = async (user: {
    expiresIn: "1d",
  });
  const verifyLink = `${WEBAPP_URL}/auth/forgot-password/reset?token=${encodeURIComponent(token)}`;
-  const html = await render(await ForgotPasswordEmail({ verifyLink }));
+  const html = await renderForgotPasswordEmail({ verifyLink, t, ...legalProps });
  return await sendEmail({
    to: user.email,
    subject: t("emails.forgot_password_email_subject"),
@@ -150,7 +169,7 @@ export const sendForgotPasswordEmail = async (user: {

 export const sendPasswordResetNotifyEmail = async (user: { email: string }): Promise<boolean> => {
  const t = await getTranslate();
-  const html = await render(await PasswordResetNotifyEmail());
+  const html = await renderPasswordResetNotifyEmail({ t, ...legalProps });
  return await sendEmail({
    to: user.email,
    subject: t("emails.password_reset_notify_email_subject"),
@@ -171,7 +190,7 @@ export const sendInviteMemberEmail = async (

  const verifyLink = `${WEBAPP_URL}/invite?token=${encodeURIComponent(token)}`;

-  const html = await render(await InviteEmail({ inviteeName, inviterName, verifyLink }));
+  const html = await renderInviteEmail({ inviteeName, inviterName, verifyLink, t, ...legalProps });
  return await sendEmail({
    to: email,
    subject: t("emails.invite_member_email_subject"),
@@ -185,7 +204,7 @@ export const sendInviteAcceptedEmail = async (
  email: string
 ): Promise<void> => {
  const t = await getTranslate();
-  const html = await render(await InviteAcceptedEmail({ inviteeName, inviterName }));
+  const html = await renderInviteAcceptedEmail({ inviteeName, inviterName, t, ...legalProps });
  await sendEmail({
    to: email,
    subject: t("emails.invite_accepted_email_subject"),
@@ -208,16 +227,20 @@ export const sendResponseFinishedEmail = async (
    throw new Error("Organization not found");
  }

-  const html = await render(
-    await ResponseFinishedEmail({
-      survey,
-      responseCount,
-      response,
-      WEBAPP_URL,
-      environmentId,
-      organization,
-    })
-  );
+  // Pre-process the element response mapping before passing to email
+  const elements = getElementResponseMapping(survey, response);
+
+  const html = await renderResponseFinishedEmail({
+    survey,
+    responseCount,
+    response,
+    WEBAPP_URL,
+    environmentId,
+    organization,
+    elements,
+    t,
+    ...legalProps,
+  });

  await sendEmail({
    to: email,
@@ -241,7 +264,13 @@ export const sendEmbedSurveyPreviewEmail = async (
  logoUrl?: string
 ): Promise<boolean> => {
  const t = await getTranslate();
-  const html = await render(await EmbedSurveyPreviewEmail({ html: innerHtml, environmentId, logoUrl }));
+  const html = await renderEmbedSurveyPreviewEmail({
+    html: innerHtml,
+    environmentId,
+    logoUrl,
+    t,
+    ...legalProps,
+  });
  return await sendEmail({
    to,
    subject: t("emails.embed_survey_preview_email_subject"),
@@ -255,7 +284,12 @@ export const sendEmailCustomizationPreviewEmail = async (
  logoUrl?: string
 ): Promise<boolean> => {
  const t = await getTranslate();
-  const emailHtmlBody = await render(await EmailCustomizationPreviewEmail({ userName, logoUrl }));
+  const emailHtmlBody = await renderEmailCustomizationPreviewEmail({
+    userName,
+    logoUrl,
+    t,
+    ...legalProps,
+  });

  return await sendEmail({
    to,
@@ -280,7 +314,7 @@ export const sendLinkSurveyToVerifiedEmail = async (data: TLinkSurveyEmailData):
  };
  const surveyLink = getSurveyLink();

-  const html = await render(await LinkSurveyEmail({ surveyName, surveyLink, logoUrl }));
+  const html = await renderLinkSurveyEmail({ surveyName, surveyLink, logoUrl, t, ...legalProps });
  return await sendEmail({
    to: data.email,
    subject: t("emails.verified_link_survey_email_subject"),
--- a/apps/web/modules/survey/follow-ups/components/follow-up-email.tsx
+++ b/apps/web/modules/survey/follow-ups/components/follow-up-email.tsx
@@ -1,120 +0,0 @@
-import { Column, Hr, Row, Text } from "@react-email/components";
-import dompurify from "isomorphic-dompurify";
-import React from "react";
-import { TSurveyFollowUp } from "@formbricks/database/types/survey-follow-up";
-import { TResponse } from "@formbricks/types/responses";
-import { TSurvey } from "@formbricks/types/surveys/types";
-import { getElementResponseMapping } from "@/lib/responses";
-import { parseRecallInfo } from "@/lib/utils/recall";
-import { getTranslate } from "@/lingodotdev/server";
-import { EmailTemplate } from "@/modules/email/components/email-template";
-import { renderEmailResponseValue } from "@/modules/email/emails/lib/utils";
-
-interface FollowUpEmailProps {
-  readonly followUp: TSurveyFollowUp;
-  readonly logoUrl?: string;
-  readonly attachResponseData: boolean;
-  readonly includeVariables: boolean;
-  readonly includeHiddenFields: boolean;
-  readonly survey: TSurvey;
-  readonly response: TResponse;
-}
-
-export async function FollowUpEmail(props: FollowUpEmailProps): Promise<React.JSX.Element> {
-  const { properties } = props.followUp.action;
-  let { body } = properties;
-
-  // Parse recall tags and replace with actual response values
-  body = parseRecallInfo(body, props.response.data, props.response.variables);
-
-  const elements = props.attachResponseData ? getElementResponseMapping(props.survey, props.response) : [];
-  const t = await getTranslate();
-
-  return (
-    <EmailTemplate logoUrl={props.logoUrl} t={t}>
-      <>
-        <div
-          dangerouslySetInnerHTML={{
-            __html: dompurify.sanitize(body, {
-              ALLOWED_TAGS: ["p", "span", "b", "strong", "i", "em", "a", "br"],
-              ALLOWED_ATTR: ["href", "rel", "dir", "class"],
-              ALLOWED_URI_REGEXP: /^https?:\/\//, // Only allow safe URLs starting with http or https
-              ADD_ATTR: ["target"], // Optional: Allow 'target' attribute for links (e.g., _blank)
-            }),
-          }}
-        />
-
-        {elements.length > 0 ? (
-          <>
-            <Hr />
-            <Text className="mb-4 text-base font-semibold text-slate-900">{t("emails.response_data")}</Text>
-          </>
-        ) : null}
-
-        {elements.map((e) => {
-          if (!e.response) return;
-          return (
-            <Row key={e.element}>
-              <Column className="w-full">
-                <Text className="mb-2 text-sm font-semibold text-slate-900">{e.element}</Text>
-                {renderEmailResponseValue(e.response, e.type, t, true)}
-              </Column>
-            </Row>
-          );
-        })}
-
-        {props.attachResponseData &&
-          props.includeVariables &&
-          props.survey.variables
-            .filter((variable) => {
-              const variableResponse = props.response.variables[variable.id];
-              if (typeof variableResponse !== "string" && typeof variableResponse !== "number") {
-                return false;
-              }
-
-              return variableResponse !== undefined;
-            })
-            .map((variable) => {
-              const variableResponse = props.response.variables[variable.id];
-              return (
-                <Row key={variable.id}>
-                  <Column className="w-full">
-                    <Text className="mb-2 text-sm font-semibold text-slate-900">
-                      {variable.type === "number"
-                        ? `${t("emails.number_variable")}: ${variable.name}`
-                        : `${t("emails.text_variable")}: ${variable.name}`}
-                    </Text>
-                    <Text className="mt-0 text-sm break-words whitespace-pre-wrap text-slate-700">
-                      {variableResponse}
-                    </Text>
-                  </Column>
-                </Row>
-              );
-            })}
-
-        {props.attachResponseData &&
-          props.includeHiddenFields &&
-          props.survey.hiddenFields.fieldIds
-            ?.filter((hiddenFieldId) => {
-              const hiddenFieldResponse = props.response.data[hiddenFieldId];
-              return hiddenFieldResponse && typeof hiddenFieldResponse === "string";
-            })
-            .map((hiddenFieldId) => {
-              const hiddenFieldResponse = props.response.data[hiddenFieldId] as string;
-              return (
-                <Row key={hiddenFieldId}>
-                  <Column className="w-full">
-                    <Text className="mb-2 text-sm font-semibold text-slate-900">
-                      {t("emails.hidden_field")}: {hiddenFieldId}
-                    </Text>
-                    <Text className="mt-0 text-sm break-words whitespace-pre-wrap text-slate-700">
-                      {hiddenFieldResponse}
-                    </Text>
-                  </Column>
-                </Row>
-              );
-            })}
-      </>
-    </EmailTemplate>
-  );
-}
--- a/apps/web/modules/survey/follow-ups/lib/email.ts
+++ b/apps/web/modules/survey/follow-ups/lib/email.ts
@@ -1,9 +1,18 @@
-import { render } from "@react-email/components";
+import sanitizeHtml from "sanitize-html";
 import { TSurveyFollowUp } from "@formbricks/database/types/survey-follow-up";
+import {
+  ProcessedHiddenField,
+  ProcessedResponseElement,
+  ProcessedVariable,
+  renderFollowUpEmail,
+} from "@formbricks/email";
 import { TResponse } from "@formbricks/types/responses";
 import { TSurvey } from "@formbricks/types/surveys/types";
+import { IMPRINT_ADDRESS, IMPRINT_URL, PRIVACY_URL, TERMS_URL } from "@/lib/constants";
+import { getElementResponseMapping } from "@/lib/responses";
+import { parseRecallInfo } from "@/lib/utils/recall";
+import { getTranslate } from "@/lingodotdev/server";
 import { sendEmail } from "@/modules/email";
-import { FollowUpEmail } from "@/modules/survey/follow-ups/components/follow-up-email";

 export const sendFollowUpEmail = async ({
  followUp,
@@ -28,21 +37,79 @@ export const sendFollowUpEmail = async ({
 }): Promise<void> => {
  const {
    action: {
-      properties: { subject },
+      properties: { subject, body },
    },
  } = followUp;

-  const emailHtmlBody = await render(
-    await FollowUpEmail({
-      followUp,
-      logoUrl,
-      attachResponseData,
-      includeVariables,
-      includeHiddenFields,
-      survey,
-      response,
-    })
-  );
+  const t = await getTranslate();
+
+  // Process body: parse recall tags and sanitize HTML
+  const processedBody = sanitizeHtml(parseRecallInfo(body, response.data, response.variables), {
+    allowedTags: ["p", "span", "b", "strong", "i", "em", "a", "br"],
+    allowedAttributes: {
+      a: ["href", "rel", "target"],
+      "*": ["dir", "class"],
+    },
+    allowedSchemes: ["http", "https"],
+    allowedSchemesByTag: {
+      a: ["http", "https"],
+    },
+  });
+
+  // Process response data
+  const responseData: ProcessedResponseElement[] = attachResponseData
+    ? getElementResponseMapping(survey, response).map((e) => ({
+        element: e.element,
+        response: e.response,
+        type: e.type,
+      }))
+    : [];
+
+  // Process variables
+  const variables: ProcessedVariable[] =
+    attachResponseData && includeVariables
+      ? survey.variables
+          .filter((variable) => {
+            const variableResponse = response.variables[variable.id];
+            return (
+              (typeof variableResponse === "string" || typeof variableResponse === "number") &&
+              variableResponse !== undefined
+            );
+          })
+          .map((variable) => ({
+            id: variable.id,
+            name: variable.name,
+            type: variable.type,
+            value: response.variables[variable.id],
+          }))
+      : [];
+
+  // Process hidden fields
+  const hiddenFields: ProcessedHiddenField[] =
+    attachResponseData && includeHiddenFields
+      ? (survey.hiddenFields.fieldIds
+          ?.filter((hiddenFieldId) => {
+            const hiddenFieldResponse = response.data[hiddenFieldId];
+            return hiddenFieldResponse && typeof hiddenFieldResponse === "string";
+          })
+          .map((hiddenFieldId) => ({
+            id: hiddenFieldId,
+            value: response.data[hiddenFieldId] as string,
+          })) ?? [])
+      : [];
+
+  const emailHtmlBody = await renderFollowUpEmail({
+    body: processedBody,
+    responseData,
+    variables,
+    hiddenFields,
+    logoUrl,
+    t,
+    privacyUrl: PRIVACY_URL || undefined,
+    termsUrl: TERMS_URL || undefined,
+    imprintUrl: IMPRINT_URL || undefined,
+    imprintAddress: IMPRINT_ADDRESS || undefined,
+  });

  await sendEmail({
    to,
--- a/apps/web/modules/survey/templates/components/template-container.tsx
+++ b/apps/web/modules/survey/templates/components/template-container.tsx
@@ -39,7 +39,7 @@ export const TemplateContainerWithPreview = ({
      {isTemplatePage && <MenuBar />}
      <div className="relative z-0 flex flex-1 overflow-hidden">
        <div className="flex-1 flex-col overflow-auto bg-slate-50">
-          <div className="mb-3 ml-6 mt-6 flex flex-col items-center justify-between md:flex-row md:items-end">
+          <div className="mt-6 mb-3 ml-6 flex flex-col items-center justify-between md:flex-row md:items-end">
            <h1 className="text-2xl font-bold text-slate-800">
              {isTemplatePage
                ? t("environments.surveys.templates.create_a_new_survey")
--- a/apps/web/modules/ui/components/file-input/lib/utils.test.ts
+++ b/apps/web/modules/ui/components/file-input/lib/utils.test.ts
@@ -138,5 +138,15 @@ describe("File Input Utils", () => {
    test("returns false for non-YouTube URLs", () => {
      expect(checkForYoutubePrivacyMode("https://www.example.com")).toBe(false);
    });
+
+    test("should return false for empty or whitespace-only string", () => {
+      expect(checkForYoutubePrivacyMode("")).toBe(false);
+      expect(checkForYoutubePrivacyMode("   ")).toBe(false);
+    });
+
+    test("should return false for non-string types", () => {
+      expect(checkForYoutubePrivacyMode(null as any)).toBe(false);
+      expect(checkForYoutubePrivacyMode(123 as any)).toBe(false);
+    });
  });
 });
--- a/apps/web/modules/ui/components/file-input/lib/utils.ts
+++ b/apps/web/modules/ui/components/file-input/lib/utils.ts
@@ -86,6 +86,10 @@ export const getAllowedFiles = async (
 };

 export const checkForYoutubePrivacyMode = (url: string): boolean => {
+  if (!url || typeof url !== "string" || url.trim() === "") {
+    return false;
+  }
+
  try {
    const parsedUrl = new URL(url);
    return parsedUrl.host === "www.youtube-nocookie.com";
--- a/apps/web/modules/ui/components/preview-survey/index.tsx
+++ b/apps/web/modules/ui/components/preview-survey/index.tsx
@@ -225,10 +225,10 @@ export const PreviewSurvey = ({
        )}>
        {previewMode === "mobile" && (
          <>
-            <p className="absolute left-0 top-0 m-2 rounded bg-slate-100 px-2 py-1 text-xs text-slate-400">
+            <p className="absolute top-0 left-0 m-2 rounded bg-slate-100 px-2 py-1 text-xs text-slate-400">
              Preview
            </p>
-            <div className="absolute right-0 top-0 m-2">
+            <div className="absolute top-0 right-0 m-2">
              <ResetProgressButton onClick={resetProgress} />
            </div>
            <MediaBackground
@@ -264,7 +264,7 @@ export const PreviewSurvey = ({
                </Modal>
              ) : (
                <div className="flex h-full w-full flex-col justify-center px-1">
-                  <div className="absolute left-5 top-5">
+                  <div className="absolute top-5 left-5">
                    {!styling.isLogoHidden && (
                      <ClientLogo
                        environmentId={environment.id}
@@ -371,7 +371,7 @@ export const PreviewSurvey = ({
                styling={styling}
                ContentRef={ContentRef as React.RefObject<HTMLDivElement>}
                isEditorView>
-                <div className="absolute left-5 top-5">
+                <div className="absolute top-5 left-5">
                  {!styling.isLogoHidden && (
                    <ClientLogo
                      environmentId={environment.id}
--- a/apps/web/modules/ui/components/theme-styling-preview-survey/index.tsx
+++ b/apps/web/modules/ui/components/theme-styling-preview-survey/index.tsx
@@ -187,7 +187,7 @@ export const ThemeStylingPreviewSurvey = ({
              ContentRef={ContentRef as React.MutableRefObject<HTMLDivElement> | null}
              isEditorView>
              {!project.styling?.isLogoHidden && (
-                <button className="absolute left-5 top-5" onClick={scrollToEditLogoSection}>
+                <button className="absolute top-5 left-5" onClick={scrollToEditLogoSection}>
                  <ClientLogo projectLogo={project.logo} previewSurvey />
                </button>
              )}
--- a/apps/web/package.json
+++ b/apps/web/package.json
@@ -29,6 +29,7 @@
    "@dnd-kit/utilities": "3.2.2",
    "@formbricks/cache": "workspace:*",
    "@formbricks/database": "workspace:*",
+    "@formbricks/email": "workspace:*",
    "@formbricks/i18n-utils": "workspace:*",
    "@formbricks/js-core": "workspace:*",
    "@formbricks/logger": "workspace:*",
@@ -70,10 +71,9 @@
    "@radix-ui/react-toggle": "1.1.8",
    "@radix-ui/react-toggle-group": "1.1.9",
    "@radix-ui/react-tooltip": "1.2.6",
-    "@react-email/components": "0.0.38",
    "@sentry/nextjs": "10.5.0",
-    "@tailwindcss/forms": "0.5.10",
    "@t3-oss/env-nextjs": "0.13.4",
+    "@tailwindcss/forms": "0.5.10",
    "@tailwindcss/typography": "0.5.16",
    "@tanstack/react-table": "8.21.3",
    "@ungap/structured-clone": "1.3.0",
@@ -111,16 +111,17 @@
    "prismjs": "1.30.0",
    "qr-code-styling": "1.9.2",
    "qrcode": "1.5.4",
+    "react-calendar": "5.1.0",
    "react-colorful": "5.6.1",
    "react-confetti": "6.4.0",
    "react-day-picker": "9.6.7",
    "react-hook-form": "7.56.2",
    "react-hot-toast": "2.5.2",
-    "react-calendar": "5.1.0",
    "react-i18next": "15.7.3",
    "react-turnstile": "1.1.4",
    "react-use": "17.6.0",
    "redis": "4.7.0",
+    "sanitize-html": "2.17.0",
    "server-only": "0.0.1",
    "sharp": "0.34.1",
    "stripe": "16.12.0",
@@ -148,6 +149,7 @@
    "@types/nodemailer": "7.0.2",
    "@types/papaparse": "5.3.15",
    "@types/qrcode": "1.5.5",
+    "@types/sanitize-html": "2.16.0",
    "@types/testing-library__react": "10.2.0",
    "@types/ungap__structured-clone": "1.2.0",
    "@vitest/coverage-v8": "3.1.3",
--- a/docs/docs.json
+++ b/docs/docs.json
@@ -186,25 +186,21 @@
            ]
          },
          {
-            "group": "XM",
+            "group": "Best Practices",
            "pages": [
-              {
-                "group": "Best Practices",
-                "icon": "lightbulb",
-                "pages": [
-                  "xm-and-surveys/xm/best-practices/contact-form",
-                  "xm-and-surveys/xm/best-practices/headless-surveys",
-                  "xm-and-surveys/xm/best-practices/docs-feedback",
-                  "xm-and-surveys/xm/best-practices/feature-chaser",
-                  "xm-and-surveys/xm/best-practices/feedback-box",
-                  "xm-and-surveys/xm/best-practices/improve-email-content",
-                  "xm-and-surveys/xm/best-practices/interview-prompt",
-                  "xm-and-surveys/xm/best-practices/cancel-subscription",
-                  "xm-and-surveys/xm/best-practices/pmf-survey",
-                  "xm-and-surveys/xm/best-practices/quiz-time",
-                  "xm-and-surveys/xm/best-practices/improve-trial-cr"
-                ]
-              }
+              "xm-and-surveys/xm/best-practices/understanding-survey-types",
+              "xm-and-surveys/xm/best-practices/contact-form",
+              "xm-and-surveys/xm/best-practices/headless-surveys",
+              "xm-and-surveys/xm/best-practices/docs-feedback",
+              "xm-and-surveys/xm/best-practices/feature-chaser",
+              "xm-and-surveys/xm/best-practices/feedback-box",
+              "xm-and-surveys/xm/best-practices/improve-email-content",
+              "xm-and-surveys/xm/best-practices/interview-prompt",
+              "xm-and-surveys/xm/best-practices/cancel-subscription",
+              "xm-and-surveys/xm/best-practices/pmf-survey",
+              "xm-and-surveys/xm/best-practices/quiz-time",
+              "xm-and-surveys/xm/best-practices/improve-trial-cr",
+              "xm-and-surveys/xm/best-practices/research-panel"
            ]
          }
        ],
--- a/docs/images/xm-and-surveys/xm/best-practices/link-surveys-vs-in-app-surveys/in-app-surveys.webp
+++ b/docs/images/xm-and-surveys/xm/best-practices/link-surveys-vs-in-app-surveys/in-app-surveys.webp
--- a/docs/images/xm-and-surveys/xm/best-practices/link-surveys-vs-in-app-surveys/link-surveys-example.webp
+++ b/docs/images/xm-and-surveys/xm/best-practices/link-surveys-vs-in-app-surveys/link-surveys-example.webp
--- a/docs/images/xm-and-surveys/xm/best-practices/panel-management/download-example-contacts.webp
+++ b/docs/images/xm-and-surveys/xm/best-practices/panel-management/download-example-contacts.webp
--- a/docs/images/xm-and-surveys/xm/best-practices/panel-management/download-responses.webp
+++ b/docs/images/xm-and-surveys/xm/best-practices/panel-management/download-responses.webp
--- a/docs/images/xm-and-surveys/xm/best-practices/panel-management/personal-links.webp
+++ b/docs/images/xm-and-surveys/xm/best-practices/panel-management/personal-links.webp
--- a/docs/xm-and-surveys/surveys/website-app-surveys/actions.mdx
+++ b/docs/xm-and-surveys/surveys/website-app-surveys/actions.mdx
@@ -40,12 +40,9 @@ icon: "code"
 </Tip>

 <Note>
-  **Important**: Any changes to actions, surveys, or environment configuration will take about 1 minute to
-  reflect in your app/website running the formbricks sdk with debug mode enabled due to server-side caching.
-  This includes new actions, modified action configurations, and survey trigger updates. For quick updates
-  during development and testing, you can enable [Debug
-  Mode](/xm-and-surveys/surveys/website-app-surveys/framework-guides#activate-debug-mode) in your SDK
-  configuration.
+  **Important**: Any changes to actions, surveys, or environment configuration will take **up to 1 minute** to
+  reflect in your app/website due to server-side caching. This includes new actions, modified action 
+  configurations, and survey trigger updates.
 </Note>

 ## **Setting Up No-Code Actions**
--- a/docs/xm-and-surveys/surveys/website-app-surveys/quickstart.mdx
+++ b/docs/xm-and-surveys/surveys/website-app-surveys/quickstart.mdx
@@ -59,18 +59,36 @@ sidebarTitle: "Quickstart"

  </Step>

-  <Step title="Publish the survey">
-  Publish the survey to make it available for the SDK to pull into the website or app where you want to show it.
-  </Step>
+<Step title="Publish the survey">
+  Publish the survey to make it available for the SDK to pull into the website or app where you want to show
+  it.
+</Step>
+
+<Step title="Understand caching behavior">
+  For better scalability, we cache the request the SDK makes to the server. This allows you to use Formbricks
+  on websites with millions of visitors without high hosting cost.
+  <Note>
+    **Important**: Any changes to surveys, action classes, project settings, or environment configuration will
+    take **up to 1 minute** to reflect in your app/website due to server-side caching. This includes survey
+    modifications, new triggers, styling changes, and other updates.
+  </Note>
+  For troubleshooting, you can enable [Debug
+  Mode](/xm-and-surveys/surveys/website-app-surveys/framework-guides#activate-debug-mode) to see detailed logs
+  in your browser console.
+</Step>
+
+  <Step title="Check browser compatibility">
+    Formbricks is designed to work with all modern browsers. Please ensure your users are using a supported version:
+
+    | Browser | Minimum Version | Release Date |
+    | :--- | :--- | :--- |
+    | **Chrome** | 111+ | March 2023 |
+    | **Edge** | 111+ | March 2023 |
+    | **Firefox** | 128+ | July 2024 |
+    | **Safari** | 16.4+ | March 2023 |
+
+    *Internet Explorer is not supported.*

-  <Step title="Enable debug mode in website / app">
-    For better scalability, we cache the request the SDK makes to the server. This allows you to use Formbricks on websites with millions of visitors without high hosting cost. On the downside, there can be **up to a 5 minute delay** until the SDK pulls the newest surveys from the server.
-  
-    <Note>
-      **Important**: Any changes to surveys, action classes, project settings, or environment configuration will take up to 5 minutes to reflect in debug mode in your app/website due to server-side caching. This includes survey modifications, new triggers, styling changes, and other updates.
-    </Note>
-  
-    To avoid the delay during development and testing, please switch on the [Debug Mode.](/xm-and-surveys/surveys/website-app-surveys/framework-guides#activate-debug-mode)
  </Step>
 </Steps>

--- a/docs/xm-and-surveys/xm/best-practices/research-panel.mdx
+++ b/docs/xm-and-surveys/xm/best-practices/research-panel.mdx
@@ -0,0 +1,198 @@
+---
+title: "Panel Management"
+description: "Build and manage your own research panel using Formbricks to collect profiling data, create targeted segments, and distribute personalized survey links to panel members."
+icon: "users-rectangle"
+---
+
+## Purpose
+
+A research panel is a pre-recruited group of participants who have agreed to take part in multiple surveys over time. Building your own panel enables you to:
+
+- Conduct research with a well-understood audience
+- Target specific demographics or user profiles
+- Distribute surveys quickly without recruiting new participants each time
+- Track participant engagement and responses over time
+
+## Formbricks Approach
+
+Formbricks provides all the tools you need to build and manage a research panel:
+
+- **Profiling surveys** to collect participant demographics and preferences
+- **Contact management** to store and organize panel member data
+- **Segments** to group participants by attributes for targeted research
+- **Personal links** to distribute unique survey links to specific panel members
+
+## Overview
+
+Building a research panel with Formbricks involves these key steps:
+
+1. Create a profiling survey to collect panel member information
+2. Export responses and prepare contact data
+3. Upload contacts into Formbricks
+4. Create segments to group panel members
+5. Create research surveys and distribute personal links
+
+## Step-by-step guide
+
+<Steps>
+  <Step title="Create a profiling survey">
+    Start by creating a survey to collect essential information about your panel members. This profiling survey should gather:
+    
+    - **Contact information**: Email, name, and any identifiers you need
+    - **Demographics**: Age, location, occupation, etc.
+    - **Preferences**: Product usage, interests, or other relevant attributes
+    
+    To create your profiling survey:
+    
+    1. Go to [app.formbricks.com](https://app.formbricks.com) and click **Create Survey**
+    2. Choose a blank survey or start from a template
+    3. Add questions to collect the data you need for segmentation
+    4. Include a **Contact Info** question type to capture email addresses
+    
+    ![Contact Info question type](/images/xm-and-surveys/core-features/question-type/contact-info.webp)
+    
+
+  </Step>
+
+  <Step title="Collect profiling responses">
+    Distribute your profiling survey and collect responses from potential panel members. You can share the survey via:
+    
+    - Direct link
+    - Email
+    - Social media
+    - Your website
+    
+    Wait until you have collected a sufficient number of responses to build your panel.
+  </Step>
+
+  <Step title="Download the responses CSV">
+    Once you have collected responses, export them for processing:
+    
+    1. Navigate to your profiling survey's **Summary** page
+    2. Click the **Download** button
+    3. Select **CSV** format
+    4. Save the file to your computer
+    
+    ![Download responses CSV](/images/xm-and-surveys/xm/best-practices/panel-management/download-responses.webp)
+    
+    This CSV contains all the profiling data from your respondents.
+  </Step>
+
+  <Step title="Download the example contact upload CSV">
+    To understand the required format for uploading contacts, download the example CSV:
+    
+    1. Go to the **Contacts** section in your project
+    2. Click **Upload Contacts**
+    3. Download the **Example CSV** to see the required column structure
+    
+    ![Download example contacts CSV](/images/xm-and-surveys/xm/best-practices/panel-management/download-example-contacts.webp)
+    
+    The example CSV shows you the format Formbricks expects for contact uploads, including required fields like email and optional attribute columns.
+  </Step>
+
+  <Step title="Map profiling responses to contact attributes">
+    Transform your profiling survey responses into the contact upload format:
+    
+    1. Open both CSV files (responses and example template)
+    2. Create a new spreadsheet matching the upload template structure
+    3. Map each profiling survey question to a contact attribute column:
+       - Email → `email` column
+       - Name → `firstName`, `lastName` columns
+       - Other answers → Custom attribute columns
+    
+    Example mapping:
+    
+    | Survey Question | Contact Attribute |
+    |----------------|-------------------|
+    | "What is your email?" | `email` |
+    | "What is your name?" | `firstName`, `lastName` |
+    | "What industry do you work in?" | `industry` |
+    | "How large is your company?" | `companySize` |
+    | "What is your job title?" | `jobTitle` |
+  </Step>
+
+  <Step title="Upload contacts to Formbricks">
+    Import your panel members into Formbricks:
+    
+    1. Go to the **Contacts** section
+    2. Click **Upload Contacts**
+    3. Select your prepared CSV file
+    4. Review the attribute mapping
+    5. Complete the upload
+    
+    Your panel members are now stored in Formbricks with their profiling attributes.
+  </Step>
+
+  <Step title="Create segments for targeting">
+    Group your panel members into segments based on their attributes:
+    
+    1. Go to the **Contacts** tab
+    2. Click **Create Segment**
+    
+    ![Create a new segment](/images/xm-and-surveys/surveys/website-app-surveys/targeting/contacts.webp)
+    
+    3. Define filter conditions based on the attributes you collected:
+       - Example: `industry` equals "Technology" AND `companySize` equals "50-200"
+    
+    ![Attribute filter](/images/xm-and-surveys/surveys/website-app-surveys/targeting/attribute-filter.webp)
+    
+    4. Name your segment descriptively (e.g., "Tech SMB Professionals")
+    5. Save the segment
+    
+    Create multiple segments for different research needs. Learn more about [Advanced Targeting](/xm-and-surveys/surveys/website-app-surveys/advanced-targeting) for detailed segmentation options.
+    
+  </Step>
+
+  <Step title="Create a research survey">
+    Now create the survey you want to distribute to your panel:
+    
+    1. Click **Create Survey**
+    2. Design your research survey with the questions you need
+    3. Configure survey settings as needed
+    4. Publish the survey
+  </Step>
+
+  <Step title="Generate personal links for your segment">
+    Distribute unique survey links to your panel segment:
+    
+    1. Navigate to your research survey's **Summary** page
+    2. Click **Share survey**
+    3. Select the **Personal Links** tab
+    4. Choose the segment you want to survey from the dropdown
+    5. Optionally set an expiry date for the links
+    6. Click **Generate & download links**
+    
+    ![Personal Links](/images/xm-and-surveys/xm/best-practices/panel-management/personal-links.webp)
+    
+    You'll receive a CSV file containing unique survey links for each panel member in the segment. Learn more about [Personal Links](/xm-and-surveys/surveys/link-surveys/personal-links).
+  </Step>
+
+  <Step title="Distribute your survey">
+    Send the personal links to your panel members using your preferred method:
+    
+    - Email marketing platform
+    - Direct email
+    - SMS
+    - Any other communication channel
+    
+    Each panel member receives their unique link, and their responses will be automatically attributed to their contact record.
+  </Step>
+</Steps>
+
+## Benefits of this approach
+
+| Benefit | Description |
+|---------|-------------|
+| **Response attribution** | Know exactly who responded to each survey |
+| **Targeted research** | Survey specific segments without bothering others |
+| **Panel management** | Maintain a centralized database of research participants |
+| **Reusability** | Use the same panel for multiple research projects |
+| **Data enrichment** | Build up participant profiles over time with each survey |
+
+
+## Next steps
+
+- [Personal Links](/xm-and-surveys/surveys/link-surveys/personal-links) - Learn more about generating and managing personal survey links
+- [Advanced Targeting](/xm-and-surveys/surveys/website-app-surveys/advanced-targeting) - Explore detailed segmentation options
+- [Hidden Fields](/xm-and-surveys/surveys/general-features/hidden-fields) - Pass additional data into surveys via URL parameters
+
--- a/docs/xm-and-surveys/xm/best-practices/understanding-survey-types.mdx
+++ b/docs/xm-and-surveys/xm/best-practices/understanding-survey-types.mdx
@@ -0,0 +1,134 @@
+---
+title: "Understanding Formbricks Survey Types"
+sidebarTitle: "Survey Types 101"
+description: "This guide explains the differences between Formbricks Link Surveys and Website & App Surveys to help you choose the right option."
+icon: "road-circle-check"
+---
+
+## Quick comparison
+
+| Feature | Link Surveys | Website & App Surveys |
+|---------|--------------|----------------------|
+| **Best for** | Known touchpoints | Behavior-based intercepts |
+| **SDK required** | No | Yes |
+| **Delivery** | Email, SMS, push, or webview | Triggered in-app by SDK |
+| **Segmentation** | You control externally | Built-in via Formbricks |
+| **Survey fatigue prevention** | You control externally | Automatic |
+| **User identification** | [Personal Links](/xm-and-surveys/surveys/link-surveys/personal-links) | [SDK user attributes](/xm-and-surveys/surveys/website-app-surveys/user-identification) |
+
+## Link Surveys
+
+Also known as **invitation-based surveys**. No SDK needed. You control when and who receives the survey, often through CRMs, marketing tools, or similar platforms.
+
+![Link survey example](/images/xm-and-surveys/xm/best-practices/link-surveys-vs-in-app-surveys/link-surveys-example.webp)
+
+### Delivery channels
+
+- Email
+- SMS
+- Push notification
+- In-app webview
+
+
+### URL features
+
+- **[Hidden Fields](/xm-and-surveys/surveys/general-features/hidden-fields)**: Pass user ID, order ID, or any identifier
+- **[Data prefilling](/xm-and-surveys/surveys/link-surveys/data-prefilling)**: Pre-populate answers and optionally skip prefilled questions
+- **[Personal Links](/xm-and-surveys/surveys/link-surveys/personal-links)**: Generate unique survey links for individual contacts
+
+### Webview with Embed mode
+
+For mobile apps, you can display Link Surveys in a webview with full control over when the survey appears. Your app decides the timing—open the webview when the moment is right.
+
+**Enable Embed mode** by appending `?embed=true` to the survey URL:
+
+```
+https://app.formbricks.com/s/<surveyId>?embed=true&userId=123
+```
+
+**Listen for events** to close the webview automatically:
+
+```javascript
+window.addEventListener("message", (event) => {
+  if (event.data === "formbricksSurveyCompleted") {
+    closeWebView();
+  }
+});
+```
+
+This approach gives you full control:
+- **When**: Your app opens the webview at the right moment (after purchase, case closed, etc.)
+- **Who**: Personal links allow you to have unique links for identified contacts.
+- **Display**: Survey renders inside your app
+- **Dismissal**: Close the webview on completion or user exit
+
+Learn more in the [Embed Surveys guide](/xm-and-surveys/surveys/link-surveys/embed-surveys).
+
+### When to use
+
+- You already decide externally who should receive which survey
+- Survey timing is tied to a known event such as a click on a link or button and in **each case**, you want to show the survey
+- You want fastest approach to production
+- Your platform doesn't have a supported SDK
+- You don't need Formbricks attribute-based targeting & survey fatigue controls
+
+
+## Website & App Surveys (SDK)
+
+Also known as **intercept surveys**. Requires SDK integration. Formbricks handles targeting, triggering, and survey fatigue.
+
+![In-app survey example](/images/xm-and-surveys/xm/best-practices/link-surveys-vs-in-app-surveys/in-app-surveys.webp)
+
+### In-app features
+
+**[Action tracking](/xm-and-surveys/surveys/website-app-surveys/actions)**
+
+Track in-app events and trigger surveys based on them:
+
+```javascript
+formbricks.track("action_name");
+```
+
+**Built-in survey cooldown**
+
+- Global waiting time (e.g., show max 1 survey every 7 days per user)
+- Per-survey overrides for high-priority surveys
+
+**[Segment-based targeting](/xm-and-surveys/surveys/website-app-surveys/advanced-targeting)**
+
+Target surveys based on user attributes (plan type, language, feature flags).
+
+**In-app display**
+
+Surveys appear inside your app as modals or slide-ins.
+
+### When to use
+
+- You want Formbricks to handle who sees which survey
+- Surveys should trigger based on user behavior (page views, clicks, custom events)
+- You want automatic survey fatigue prevention
+- You need percentage-based sampling (e.g., show to 10% of users)
+
+## Decision guide
+
+<AccordionGroup>
+  <Accordion title="Do you control survey triggering externally?">
+    Use **Link-based Surveys**. Send the URL when the moment is right, even for in-app surveys.Pass context via Hidden Fields.
+  </Accordion>
+
+  <Accordion title="Should surveys trigger based on in-app behavior?">
+    Use **Website & App Surveys**. The SDK tracks actions and triggers surveys automatically.
+  </Accordion>
+
+  <Accordion title="Do you want automatic survey fatigue prevention?">
+    Use **Website & App Surveys**. Built-in cooldown prevents over-surveying.
+  </Accordion>
+
+  <Accordion title="Need the fastest path to production?">
+    Start with **Link Surveys**. No SDK integration needed. Add SDK later if you need behavior-based triggers.
+  </Accordion>
+</AccordionGroup>
+
+---
+
+**Need help?** [Join us in GitHub Discussions](https://github.com/formbricks/formbricks/discussions)
--- a/packages/email/.eslintrc.cjs
+++ b/packages/email/.eslintrc.cjs
@@ -0,0 +1,4 @@
+module.exports = {
+  extends: ["@formbricks/eslint-config/legacy-react.js"],
+  parser: "@typescript-eslint/parser",
+};
--- a/packages/email/README.md
+++ b/packages/email/README.md
@@ -0,0 +1,86 @@
+# @formbricks/emails
+
+Email templates for Formbricks with React Email preview server.
+
+## Purpose
+
+This package provides email templates for visual QA and preview. It includes:
+
+- Email templates (auth, invite, survey, general)
+- Shared email UI components
+- Mock translation utilities for preview
+- Example data for template rendering
+- Tailwind CSS for styling with full intellisense support
+
+## Development
+
+### Preview Server
+
+Run the React Email preview server:
+
+```bash
+pnpm dev
+```
+
+Visit `localhost:3456` to preview all email templates with mock data.
+
+### Styling
+
+The package uses Tailwind CSS via `@react-email/components`. Tailwind intellisense is configured and should work automatically in your IDE. The config files are:
+
+- `tailwind.config.js` - Tailwind configuration for intellisense
+- `postcss.config.js` - PostCSS configuration
+
+### Path Aliases
+
+Use `@/` prefix for clean imports:
+
+```typescript
+import { FollowUpEmail } from "@/emails/survey/follow-up-email";
+import { EmailTemplate } from "@/src/components/email-template";
+import { mockT } from "@/src/lib/mock-translate";
+```
+
+## Usage in Production
+
+The web app imports render helper functions from this package:
+
+```typescript
+import { renderVerificationEmail } from "@formbricks/email";
+
+// Pass real translation function and data
+const html = await renderVerificationEmail({
+  verifyLink,
+  verificationRequestLink,
+  t, // Real i18n function from getTranslate()
+});
+```
+
+For complex emails with pre-processing:
+
+```typescript
+import { renderResponseFinishedEmail } from "@formbricks/email";
+import { getElementResponseMapping } from "@/lib/responses";
+
+// Pre-process data before rendering
+const elements = getElementResponseMapping(survey, response);
+
+const html = await renderResponseFinishedEmail({
+  survey,
+  responseCount,
+  response,
+  WEBAPP_URL,
+  environmentId,
+  organization,
+  elements, // Pre-processed data
+  t,
+});
+```
+
+## Architecture
+
+- **Preview Mode**: Templates use mock `t()` function and example data for visual QA
+- **Production Mode**: Web app passes real `t()` function and pre-processed data
+- **Render Functions**: Typed helper functions abstract `@react-email/render` from web app
+- **No Business Logic**: SMTP, i18n, JWT, database queries, and data processing stay in web app
+- **Clean Separation**: Web app processes data → Email package renders HTML
--- a/packages/email/emails/auth/forgot-password-email.tsx
+++ b/packages/email/emails/auth/forgot-password-email.tsx
@@ -0,0 +1,36 @@
+import { Container, Heading, Text } from "@react-email/components";
+import { EmailButton } from "../../src/components/email-button";
+import { EmailFooter } from "../../src/components/email-footer";
+import { EmailTemplate } from "../../src/components/email-template";
+import { exampleData } from "../../src/lib/example-data";
+import { t as mockT } from "../../src/lib/mock-translate";
+import { TEmailTemplateLegalProps } from "../../src/types/email";
+import { TFunction } from "../../src/types/translations";
+
+interface ForgotPasswordEmailProps extends TEmailTemplateLegalProps {
+  readonly verifyLink: string;
+  readonly t?: TFunction;
+}
+
+export function ForgotPasswordEmail({
+  verifyLink,
+  t = mockT,
+  ...legalProps
+}: ForgotPasswordEmailProps): React.JSX.Element {
+  return (
+    <EmailTemplate t={t} {...legalProps}>
+      <Container>
+        <Heading>{t("emails.forgot_password_email_heading")}</Heading>
+        <Text className="text-sm">{t("emails.forgot_password_email_text")}</Text>
+        <EmailButton href={verifyLink} label={t("emails.forgot_password_email_change_password")} />
+        <Text className="text-sm font-bold">{t("emails.forgot_password_email_link_valid_for_24_hours")}</Text>
+        <Text className="mb-0 text-sm">{t("emails.forgot_password_email_did_not_request")}</Text>
+        <EmailFooter t={t} />
+      </Container>
+    </EmailTemplate>
+  );
+}
+
+export default function ForgotPasswordEmailPreview(): React.JSX.Element {
+  return <ForgotPasswordEmail {...exampleData.forgotPasswordEmail} />;
+}
--- a/packages/email/emails/auth/new-email-verification.tsx
+++ b/packages/email/emails/auth/new-email-verification.tsx
@@ -0,0 +1,40 @@
+import { Container, Heading, Link, Text } from "@react-email/components";
+import { EmailButton } from "../../src/components/email-button";
+import { EmailFooter } from "../../src/components/email-footer";
+import { EmailTemplate } from "../../src/components/email-template";
+import { exampleData } from "../../src/lib/example-data";
+import { t as mockT } from "../../src/lib/mock-translate";
+import { TEmailTemplateLegalProps } from "../../src/types/email";
+import { TFunction } from "../../src/types/translations";
+
+interface NewEmailVerificationProps extends TEmailTemplateLegalProps {
+  readonly verifyLink: string;
+  readonly t?: TFunction;
+}
+
+export function NewEmailVerification({
+  verifyLink,
+  t = mockT,
+  ...legalProps
+}: NewEmailVerificationProps): React.JSX.Element {
+  return (
+    <EmailTemplate t={t} {...legalProps}>
+      <Container>
+        <Heading>{t("emails.verification_email_heading")}</Heading>
+        <Text className="text-sm">{t("emails.new_email_verification_text")}</Text>
+        <Text className="text-sm">{t("emails.verification_security_notice")}</Text>
+        <EmailButton href={verifyLink} label={t("emails.verification_email_verify_email")} />
+        <Text className="text-sm">{t("emails.verification_email_click_on_this_link")}</Text>
+        <Link className="text-sm break-all text-black" href={verifyLink}>
+          {verifyLink}
+        </Link>
+        <Text className="text-sm font-bold">{t("emails.verification_email_link_valid_for_24_hours")}</Text>
+        <EmailFooter t={t} />
+      </Container>
+    </EmailTemplate>
+  );
+}
+
+export default function NewEmailVerificationPreview(): React.JSX.Element {
+  return <NewEmailVerification {...exampleData.newEmailVerification} />;
+}
--- a/packages/email/emails/auth/password-reset-notify-email.tsx
+++ b/packages/email/emails/auth/password-reset-notify-email.tsx
@@ -0,0 +1,30 @@
+import { Container, Heading, Text } from "@react-email/components";
+import { EmailFooter } from "../../src/components/email-footer";
+import { EmailTemplate } from "../../src/components/email-template";
+import { exampleData } from "../../src/lib/example-data";
+import { t as mockT } from "../../src/lib/mock-translate";
+import { TEmailTemplateLegalProps } from "../../src/types/email";
+import { TFunction } from "../../src/types/translations";
+
+interface PasswordResetNotifyEmailProps extends TEmailTemplateLegalProps {
+  readonly t?: TFunction;
+}
+
+export function PasswordResetNotifyEmail({
+  t = mockT,
+  ...legalProps
+}: PasswordResetNotifyEmailProps = {}): React.JSX.Element {
+  return (
+    <EmailTemplate t={t} {...legalProps}>
+      <Container>
+        <Heading>{t("emails.password_changed_email_heading")}</Heading>
+        <Text className="text-sm">{t("emails.password_changed_email_text")}</Text>
+        <EmailFooter t={t} />
+      </Container>
+    </EmailTemplate>
+  );
+}
+
+export default function PasswordResetNotifyEmailPreview(): React.JSX.Element {
+  return <PasswordResetNotifyEmail {...exampleData.passwordResetNotifyEmail} />;
+}
--- a/apps/web/modules/email/emails/auth/verification-email.tsx
+++ b/apps/web/modules/email/emails/auth/verification-email.tsx
@@ -1,28 +1,32 @@
 import { Container, Heading, Link, Text } from "@react-email/components";
-import React from "react";
-import { getTranslate } from "@/lingodotdev/server";
-import { EmailButton } from "../../components/email-button";
-import { EmailFooter } from "../../components/email-footer";
-import { EmailTemplate } from "../../components/email-template";
+import { EmailButton } from "../../src/components/email-button";
+import { EmailFooter } from "../../src/components/email-footer";
+import { EmailTemplate } from "../../src/components/email-template";
+import { exampleData } from "../../src/lib/example-data";
+import { t as mockT } from "../../src/lib/mock-translate";
+import { TEmailTemplateLegalProps } from "../../src/types/email";
+import { TFunction } from "../../src/types/translations";

-interface VerificationEmailProps {
-  verifyLink: string;
-  verificationRequestLink: string;
+interface VerificationEmailProps extends TEmailTemplateLegalProps {
+  readonly verifyLink: string;
+  readonly verificationRequestLink: string;
+  readonly t?: TFunction;
 }

-export async function VerificationEmail({
+export function VerificationEmail({
  verifyLink,
  verificationRequestLink,
-}: VerificationEmailProps): Promise<React.JSX.Element> {
-  const t = await getTranslate();
+  t = mockT,
+  ...legalProps
+}: VerificationEmailProps): React.JSX.Element {
  return (
-    <EmailTemplate t={t}>
+    <EmailTemplate t={t} {...legalProps}>
      <Container>
        <Heading>{t("emails.verification_email_heading")}</Heading>
        <Text className="text-sm">{t("emails.verification_email_text")}</Text>
        <EmailButton href={verifyLink} label={t("emails.verification_email_verify_email")} />
        <Text className="text-sm">{t("emails.verification_email_click_on_this_link")}</Text>
-        <Link className="break-all text-sm text-black" href={verifyLink}>
+        <Link className="text-sm break-all text-black" href={verifyLink}>
          {verifyLink}
        </Link>
        <Text className="text-sm font-bold">{t("emails.verification_email_link_valid_for_24_hours")}</Text>
@@ -38,4 +42,6 @@ export async function VerificationEmail({
  );
 }

-export default VerificationEmail;
+export default function VerificationEmailPreview(): React.JSX.Element {
+  return <VerificationEmail {...exampleData.verificationEmail} />;
+}
--- a/packages/email/emails/general/email-customization-preview-email.tsx
+++ b/packages/email/emails/general/email-customization-preview-email.tsx
@@ -0,0 +1,32 @@
+import { Container, Heading, Text } from "@react-email/components";
+import { EmailTemplate } from "../../src/components/email-template";
+import { exampleData } from "../../src/lib/example-data";
+import { t as mockT } from "../../src/lib/mock-translate";
+import { TEmailTemplateLegalProps } from "../../src/types/email";
+import { TFunction } from "../../src/types/translations";
+
+interface EmailCustomizationPreviewEmailProps extends TEmailTemplateLegalProps {
+  readonly userName: string;
+  readonly logoUrl?: string;
+  readonly t?: TFunction;
+}
+
+export function EmailCustomizationPreviewEmail({
+  userName,
+  logoUrl,
+  t = mockT,
+  ...legalProps
+}: EmailCustomizationPreviewEmailProps): React.JSX.Element {
+  return (
+    <EmailTemplate logoUrl={logoUrl} t={t} {...legalProps}>
+      <Container>
+        <Heading>{t("emails.email_customization_preview_email_heading", { userName })}</Heading>
+        <Text className="text-sm">{t("emails.email_customization_preview_email_text")}</Text>
+      </Container>
+    </EmailTemplate>
+  );
+}
+
+export default function EmailCustomizationPreviewEmailPreview(): React.JSX.Element {
+  return <EmailCustomizationPreviewEmail {...exampleData.emailCustomizationPreviewEmail} />;
+}
--- a/packages/email/emails/invite/invite-accepted-email.tsx
+++ b/packages/email/emails/invite/invite-accepted-email.tsx
@@ -0,0 +1,39 @@
+import { Container, Heading, Text } from "@react-email/components";
+import { EmailFooter } from "../../src/components/email-footer";
+import { EmailTemplate } from "../../src/components/email-template";
+import { exampleData } from "../../src/lib/example-data";
+import { t as mockT } from "../../src/lib/mock-translate";
+import { TEmailTemplateLegalProps } from "../../src/types/email";
+import { TFunction } from "../../src/types/translations";
+
+interface InviteAcceptedEmailProps extends TEmailTemplateLegalProps {
+  readonly inviterName: string;
+  readonly inviteeName: string;
+  readonly t?: TFunction;
+}
+
+export function InviteAcceptedEmail({
+  inviterName,
+  inviteeName,
+  t = mockT,
+  ...legalProps
+}: InviteAcceptedEmailProps): React.JSX.Element {
+  return (
+    <EmailTemplate t={t} {...legalProps}>
+      <Container>
+        <Heading>
+          {t("emails.invite_accepted_email_heading", { inviterName })} {inviterName}
+        </Heading>
+        <Text className="text-sm">
+          {t("emails.invite_accepted_email_text_par1", { inviteeName })} {inviteeName}{" "}
+          {t("emails.invite_accepted_email_text_par2")}
+        </Text>
+        <EmailFooter t={t} />
+      </Container>
+    </EmailTemplate>
+  );
+}
+
+export default function InviteAcceptedEmailPreview(): React.JSX.Element {
+  return <InviteAcceptedEmail {...exampleData.inviteAcceptedEmail} />;
+}
--- a/packages/email/emails/invite/invite-email.tsx
+++ b/packages/email/emails/invite/invite-email.tsx
@@ -0,0 +1,43 @@
+import { Container, Heading, Text } from "@react-email/components";
+import { EmailButton } from "../../src/components/email-button";
+import { EmailFooter } from "../../src/components/email-footer";
+import { EmailTemplate } from "../../src/components/email-template";
+import { exampleData } from "../../src/lib/example-data";
+import { t as mockT } from "../../src/lib/mock-translate";
+import { TEmailTemplateLegalProps } from "../../src/types/email";
+import { TFunction } from "../../src/types/translations";
+
+interface InviteEmailProps extends TEmailTemplateLegalProps {
+  readonly inviteeName: string;
+  readonly inviterName: string;
+  readonly verifyLink: string;
+  readonly t?: TFunction;
+}
+
+export function InviteEmail({
+  inviteeName,
+  inviterName,
+  verifyLink,
+  t = mockT,
+  ...legalProps
+}: InviteEmailProps): React.JSX.Element {
+  return (
+    <EmailTemplate t={t} {...legalProps}>
+      <Container>
+        <Heading>
+          {t("emails.invite_email_heading", { inviteeName })} {inviteeName}
+        </Heading>
+        <Text className="text-sm">
+          {t("emails.invite_email_text_par1", { inviterName })} {inviterName}{" "}
+          {t("emails.invite_email_text_par2")}
+        </Text>
+        <EmailButton href={verifyLink} label={t("emails.invite_email_button_label")} />
+        <EmailFooter t={t} />
+      </Container>
+    </EmailTemplate>
+  );
+}
+
+export default function InviteEmailPreview(): React.JSX.Element {
+  return <InviteEmail {...exampleData.inviteEmail} />;
+}
--- a/packages/email/emails/survey/embed-survey-preview-email.tsx
+++ b/packages/email/emails/survey/embed-survey-preview-email.tsx
@@ -0,0 +1,42 @@
+import { Container, Heading, Text } from "@react-email/components";
+import { EmailTemplate } from "../../src/components/email-template";
+import { exampleData } from "../../src/lib/example-data";
+import { t as mockT } from "../../src/lib/mock-translate";
+import { TEmailTemplateLegalProps } from "../../src/types/email";
+import { TFunction } from "../../src/types/translations";
+
+interface EmbedSurveyPreviewEmailProps extends TEmailTemplateLegalProps {
+  readonly html: string;
+  readonly environmentId: string;
+  readonly logoUrl?: string;
+  readonly t?: TFunction;
+}
+
+export function EmbedSurveyPreviewEmail({
+  html,
+  environmentId,
+  logoUrl,
+  t = mockT,
+  ...legalProps
+}: EmbedSurveyPreviewEmailProps): React.JSX.Element {
+  return (
+    <EmailTemplate logoUrl={logoUrl} t={t} {...legalProps}>
+      <Container>
+        <Heading>{t("emails.embed_survey_preview_email_heading")}</Heading>
+        <Text className="text-sm">{t("emails.embed_survey_preview_email_text")}</Text>
+        <Text className="text-sm">
+          <b>{t("emails.embed_survey_preview_email_didnt_request")}</b>{" "}
+          {t("emails.embed_survey_preview_email_fight_spam")}
+        </Text>
+        <div className="text-sm" dangerouslySetInnerHTML={{ __html: html }} />
+        <Text className="text-center text-sm text-slate-700">
+          {t("emails.embed_survey_preview_email_environment_id")}: {environmentId}
+        </Text>
+      </Container>
+    </EmailTemplate>
+  );
+}
+
+export default function EmbedSurveyPreviewEmailPreview(): React.JSX.Element {
+  return <EmbedSurveyPreviewEmail {...exampleData.embedSurveyPreviewEmail} />;
+}
--- a/packages/email/emails/survey/follow-up-email.tsx
+++ b/packages/email/emails/survey/follow-up-email.tsx
@@ -0,0 +1,86 @@
+import { Column, Hr, Row, Text } from "@react-email/components";
+import { EmailTemplate } from "../../src/components/email-template";
+import { renderEmailResponseValue } from "../../src/lib/email-utils";
+import { exampleData } from "../../src/lib/example-data";
+import { t as mockT } from "../../src/lib/mock-translate";
+import { TEmailTemplateLegalProps } from "../../src/types/email";
+import { ProcessedHiddenField, ProcessedResponseElement, ProcessedVariable } from "../../src/types/follow-up";
+import { TFunction } from "../../src/types/translations";
+
+export interface FollowUpEmailProps extends TEmailTemplateLegalProps {
+  readonly body: string; // Already processed HTML with recall tags replaced
+  readonly responseData?: ProcessedResponseElement[]; // Already mapped elements
+  readonly variables?: ProcessedVariable[]; // Already filtered variables
+  readonly hiddenFields?: ProcessedHiddenField[]; // Already filtered hidden fields
+  readonly logoUrl?: string;
+  readonly t?: TFunction;
+}
+
+export function FollowUpEmail({
+  body,
+  responseData = [],
+  variables = [],
+  hiddenFields = [],
+  logoUrl,
+  t = mockT,
+  ...legalProps
+}: FollowUpEmailProps): React.JSX.Element {
+  return (
+    <EmailTemplate logoUrl={logoUrl} t={t} {...legalProps}>
+      <>
+        <div dangerouslySetInnerHTML={{ __html: body }} />
+
+        {responseData.length > 0 ? (
+          <>
+            <Hr />
+            <Text className="mb-4 text-base font-semibold text-slate-900">{t("emails.response_data")}</Text>
+          </>
+        ) : null}
+
+        {responseData.map((e) => {
+          if (!e.response) return null;
+          return (
+            <Row key={e.element}>
+              <Column className="w-full">
+                <Text className="mb-2 text-sm font-semibold text-slate-900">{e.element}</Text>
+                {renderEmailResponseValue(e.response, e.type, t, true)}
+              </Column>
+            </Row>
+          );
+        })}
+
+        {variables.map((variable) => (
+          <Row key={variable.id}>
+            <Column className="w-full">
+              <Text className="mb-2 text-sm font-semibold text-slate-900">
+                {variable.type === "number"
+                  ? `${t("emails.number_variable")}: ${variable.name}`
+                  : `${t("emails.text_variable")}: ${variable.name}`}
+              </Text>
+              <Text className="mt-0 text-sm break-words whitespace-pre-wrap text-slate-700">
+                {variable.value}
+              </Text>
+            </Column>
+          </Row>
+        ))}
+
+        {hiddenFields.map((hiddenField) => (
+          <Row key={hiddenField.id}>
+            <Column className="w-full">
+              <Text className="mb-2 text-sm font-semibold text-slate-900">
+                {t("emails.hidden_field")}: {hiddenField.id}
+              </Text>
+              <Text className="mt-0 text-sm break-words whitespace-pre-wrap text-slate-700">
+                {hiddenField.value}
+              </Text>
+            </Column>
+          </Row>
+        ))}
+      </>
+    </EmailTemplate>
+  );
+}
+
+export default function FollowUpEmailPreview(): React.JSX.Element {
+  return <FollowUpEmail {...(exampleData.followUpEmail as unknown as FollowUpEmailProps)} />;
+}
--- a/packages/email/emails/survey/link-survey-email.tsx
+++ b/packages/email/emails/survey/link-survey-email.tsx
@@ -0,0 +1,43 @@
+import { Container, Heading, Text } from "@react-email/components";
+import { EmailButton } from "../../src/components/email-button";
+import { EmailFooter } from "../../src/components/email-footer";
+import { EmailTemplate } from "../../src/components/email-template";
+import { exampleData } from "../../src/lib/example-data";
+import { t as mockT } from "../../src/lib/mock-translate";
+import { TEmailTemplateLegalProps } from "../../src/types/email";
+import { TFunction } from "../../src/types/translations";
+
+interface LinkSurveyEmailProps extends TEmailTemplateLegalProps {
+  readonly surveyName: string;
+  readonly surveyLink: string;
+  readonly logoUrl?: string;
+  readonly t?: TFunction;
+}
+
+export function LinkSurveyEmail({
+  surveyName,
+  surveyLink,
+  logoUrl,
+  t = mockT,
+  ...legalProps
+}: LinkSurveyEmailProps): React.JSX.Element {
+  return (
+    <EmailTemplate logoUrl={logoUrl} t={t} {...legalProps}>
+      <Container>
+        <Heading>{t("emails.verification_email_hey")}</Heading>
+        <Text className="text-sm">{t("emails.verification_email_thanks")}</Text>
+        <Text className="text-sm">{t("emails.verification_email_to_fill_survey")}</Text>
+        <EmailButton href={surveyLink} label={t("emails.verification_email_take_survey")} />
+        <Text className="text-sm text-slate-400">
+          {t("emails.verification_email_survey_name")}: {surveyName}
+        </Text>
+        <EmailFooter t={t} />
+      </Container>
+    </EmailTemplate>
+  );
+}
+
+// Default export for preview server
+export default function LinkSurveyEmailPreview(): React.JSX.Element {
+  return <LinkSurveyEmail {...exampleData.linkSurveyEmail} />;
+}
--- a/apps/web/modules/email/emails/survey/response-finished-email.tsx
+++ b/apps/web/modules/email/emails/survey/response-finished-email.tsx
@@ -2,35 +2,52 @@ import { Column, Container, Heading, Hr, Link, Row, Section, Text } from "@react
 import { FileDigitIcon, FileType2Icon } from "lucide-react";
 import type { TOrganization } from "@formbricks/types/organizations";
 import type { TResponse } from "@formbricks/types/responses";
-import { type TSurvey } from "@formbricks/types/surveys/types";
-import { getElementResponseMapping } from "@/lib/responses";
-import { getTranslate } from "@/lingodotdev/server";
-import { renderEmailResponseValue } from "@/modules/email/emails/lib/utils";
-import { EmailButton } from "../../components/email-button";
-import { EmailTemplate } from "../../components/email-template";
+import { TSurveyElementTypeEnum } from "@formbricks/types/surveys/elements";
+import type { TSurvey } from "@formbricks/types/surveys/types";
+import { EmailButton } from "../../src/components/email-button";
+import { EmailTemplate } from "../../src/components/email-template";
+import { renderEmailResponseValue } from "../../src/lib/email-utils";
+import { exampleData } from "../../src/lib/example-data";
+import { t as mockT } from "../../src/lib/mock-translate";
+import { TEmailTemplateLegalProps } from "../../src/types/email";
+import { ProcessedResponseElement } from "../../src/types/follow-up";
+import { TFunction } from "../../src/types/translations";

-interface ResponseFinishedEmailProps {
-  survey: TSurvey;
-  responseCount: number;
-  response: TResponse;
-  WEBAPP_URL: string;
-  environmentId: string;
-  organization: TOrganization;
+export interface ResponseFinishedEmailProps extends TEmailTemplateLegalProps {
+  readonly survey: TSurvey;
+  readonly responseCount: number;
+  readonly response: TResponse;
+  readonly WEBAPP_URL: string;
+  readonly environmentId: string;
+  readonly organization: TOrganization;
+  readonly elements: ProcessedResponseElement[]; // Pre-processed data, not a function
+  readonly t?: TFunction;
 }

-export async function ResponseFinishedEmail({
+const mockGetElementResponseMapping = (survey: TSurvey, response: TResponse) => {
+  // For preview, just return the response data as elements
+  return Object.entries(response.data)
+    .filter(([key]) => !survey.hiddenFields.fieldIds?.includes(key))
+    .map(([key, value]) => ({
+      element: key,
+      response: value as string | string[],
+      type: TSurveyElementTypeEnum.OpenText, // Default type for preview
+    }));
+};
+
+export function ResponseFinishedEmail({
  survey,
  responseCount,
  response,
  WEBAPP_URL,
  environmentId,
  organization,
-}: ResponseFinishedEmailProps): Promise<React.JSX.Element> {
-  const elements = getElementResponseMapping(survey, response);
-  const t = await getTranslate();
-
+  elements,
+  t = mockT,
+  ...legalProps
+}: ResponseFinishedEmailProps): React.JSX.Element {
  return (
-    <EmailTemplate t={t}>
+    <EmailTemplate t={t} {...legalProps}>
      <Container>
        <Row>
          <Column>
@@ -42,7 +59,7 @@ export async function ResponseFinishedEmail({
            </Text>
            <Hr />
            {elements.map((e) => {
-              if (!e.response) return;
+              if (!e.response) return null;
              return (
                <Row key={e.element}>
                  <Column className="w-full font-medium">
@@ -58,7 +75,6 @@ export async function ResponseFinishedEmail({
                if (typeof variableResponse !== "string" && typeof variableResponse !== "number") {
                  return false;
                }
-
                return variableResponse !== undefined;
              })
              .map((variable) => {
@@ -158,3 +174,11 @@ function EyeOffIcon(): React.JSX.Element {
    </svg>
  );
 }
+
+// Default export for preview server
+export default function ResponseFinishedEmailPreview(): React.JSX.Element {
+  const { survey, response, ...rest } = exampleData.responseFinishedEmail;
+  const elements = mockGetElementResponseMapping(survey, response);
+
+  return <ResponseFinishedEmail {...rest} survey={survey} response={response} elements={elements} />;
+}
--- a/packages/email/package.json
+++ b/packages/email/package.json
@@ -0,0 +1,30 @@
+{
+  "name": "@formbricks/email",
+  "version": "1.0.0",
+  "private": true,
+  "description": "Email templates for Formbricks with React Email preview server",
+  "type": "module",
+  "main": "src/index.ts",
+  "types": "src/index.ts",
+  "scripts": {
+    "dev": "email dev --port 3456",
+    "build": "tsc --noEmit",
+    "lint": "eslint src --fix --ext .ts,.tsx",
+    "clean": "rimraf .turbo node_modules dist"
+  },
+  "dependencies": {
+    "@react-email/components": "1.0.1",
+    "react-email": "5.0.8"
+  },
+  "devDependencies": {
+    "@formbricks/config-typescript": "workspace:*",
+    "@formbricks/eslint-config": "workspace:*",
+    "@formbricks/types": "workspace:*",
+    "@react-email/preview-server": "5.0.8",
+    "autoprefixer": "10.4.21",
+    "clsx": "2.1.1",
+    "postcss": "8.5.3",
+    "tailwind-merge": "3.2.0",
+    "tailwindcss": "3.4.17"
+  }
+}
--- a/apps/web/modules/email/components/email-button.tsx
+++ b/apps/web/modules/email/components/email-button.tsx
@@ -1,9 +1,8 @@
 import { Button } from "@react-email/components";
-import React from "react";

 interface EmailButtonProps {
-  label: string;
-  href: string;
+  readonly label: string;
+  readonly href: string;
 }

 export function EmailButton({ label, href }: EmailButtonProps): React.JSX.Element {
--- a/apps/web/modules/email/components/email-element-header.tsx
+++ b/apps/web/modules/email/components/email-element-header.tsx
@@ -1,10 +1,10 @@
 import { Container } from "@react-email/components";
-import { cn } from "@/lib/cn";
+import { cn } from "../../src/lib/cn";

 interface ElementHeaderProps {
-  headline: string;
-  subheader?: string;
-  className?: string;
+  readonly headline: string;
+  readonly subheader?: string;
+  readonly className?: string;
 }

 export function ElementHeader({ headline, subheader, className }: ElementHeaderProps): React.JSX.Element {
@@ -21,3 +21,5 @@ export function ElementHeader({ headline, subheader, className }: ElementHeaderP
    </>
  );
 }
+
+export default ElementHeader;
--- a/apps/web/modules/email/components/email-footer.tsx
+++ b/apps/web/modules/email/components/email-footer.tsx
@@ -1,6 +1,5 @@
 import { Text } from "@react-email/components";
-import { TFunction } from "i18next";
-import React from "react";
+import { TFunction } from "../types/translations";

 export function EmailFooter({ t }: { t: TFunction }): React.JSX.Element {
  return (
--- a/apps/web/modules/email/components/email-template.tsx
+++ b/apps/web/modules/email/components/email-template.tsx
@@ -1,22 +1,24 @@
 import { Body, Container, Html, Img, Link, Section, Tailwind, Text } from "@react-email/components";
-import { TFunction } from "i18next";
-import React from "react";
-import { FB_LOGO_URL, IMPRINT_ADDRESS, IMPRINT_URL, PRIVACY_URL } from "@/lib/constants";
+import { TEmailTemplateLegalProps } from "../types/email";
+import { TFunction } from "../types/translations";

-const fbLogoUrl = FB_LOGO_URL;
+const fbLogoUrl = "https://app.formbricks.com/logo-transparent.png";
 const logoLink = "https://formbricks.com?utm_source=email_header&utm_medium=email";

-interface EmailTemplateProps {
+interface EmailTemplateProps extends TEmailTemplateLegalProps {
  readonly children: React.ReactNode;
  readonly logoUrl?: string;
  readonly t: TFunction;
 }

-export async function EmailTemplate({
+export function EmailTemplate({
  children,
  logoUrl,
  t,
-}: EmailTemplateProps): Promise<React.JSX.Element> {
+  privacyUrl,
+  imprintUrl,
+  imprintAddress,
+}: EmailTemplateProps): React.JSX.Element {
  const isDefaultLogo = !logoUrl || logoUrl === fbLogoUrl;

  return (
@@ -53,23 +55,23 @@ export async function EmailTemplate({
              rel="noopener noreferrer">
              {t("emails.email_template_text_1")}
            </Link>
-            {IMPRINT_ADDRESS && (
-              <Text className="m-0 text-sm font-normal text-slate-500 opacity-50">{IMPRINT_ADDRESS}</Text>
+            {imprintAddress && (
+              <Text className="m-0 text-sm font-normal text-slate-500 opacity-50">{imprintAddress}</Text>
            )}
            <Text className="m-0 text-sm font-normal text-slate-500 opacity-50">
-              {IMPRINT_URL && (
+              {imprintUrl && (
                <Link
-                  href={IMPRINT_URL}
+                  href={imprintUrl}
                  target="_blank"
                  rel="noopener noreferrer"
                  className="text-sm text-slate-500">
                  {t("emails.imprint")}
                </Link>
              )}
-              {IMPRINT_URL && PRIVACY_URL && " • "}
-              {PRIVACY_URL && (
+              {imprintUrl && privacyUrl && " • "}
+              {privacyUrl && (
                <Link
-                  href={PRIVACY_URL}
+                  href={privacyUrl}
                  target="_blank"
                  rel="noopener noreferrer"
                  className="text-sm text-slate-500">
@@ -83,3 +85,5 @@ export async function EmailTemplate({
    </Html>
  );
 }
+
+export default EmailTemplate;
--- a/packages/email/src/index.ts
+++ b/packages/email/src/index.ts
@@ -0,0 +1,52 @@
+export { VerificationEmail } from "../emails/auth/verification-email";
+export { ForgotPasswordEmail } from "../emails/auth/forgot-password-email";
+export { NewEmailVerification } from "../emails/auth/new-email-verification";
+export { PasswordResetNotifyEmail } from "../emails/auth/password-reset-notify-email";
+export { InviteEmail } from "../emails/invite/invite-email";
+export { InviteAcceptedEmail } from "../emails/invite/invite-accepted-email";
+export { LinkSurveyEmail } from "../emails/survey/link-survey-email";
+export { EmbedSurveyPreviewEmail } from "../emails/survey/embed-survey-preview-email";
+export { ResponseFinishedEmail } from "../emails/survey/response-finished-email";
+export { EmailCustomizationPreviewEmail } from "../emails/general/email-customization-preview-email";
+export { FollowUpEmail } from "../emails/survey/follow-up-email";
+
+export { EmailButton } from "./components/email-button";
+export { EmailFooter } from "./components/email-footer";
+export { EmailTemplate } from "./components/email-template";
+export { ElementHeader } from "./components/email-element-header";
+
+export {
+  renderVerificationEmail,
+  renderForgotPasswordEmail,
+  renderNewEmailVerification,
+  renderPasswordResetNotifyEmail,
+  renderInviteEmail,
+  renderInviteAcceptedEmail,
+  renderLinkSurveyEmail,
+  renderEmbedSurveyPreviewEmail,
+  renderResponseFinishedEmail,
+  renderEmailCustomizationPreviewEmail,
+  renderFollowUpEmail,
+} from "./lib/render";
+
+export { render } from "@react-email/render";
+
+export {
+  Body,
+  Button,
+  Column,
+  Container,
+  Head,
+  Heading,
+  Hr,
+  Html,
+  Img,
+  Link,
+  Preview,
+  Row,
+  Section,
+  Tailwind,
+  Text,
+} from "@react-email/components";
+
+export type { ProcessedHiddenField, ProcessedResponseElement, ProcessedVariable } from "./types/follow-up";
--- a/packages/email/src/lib/cn.ts
+++ b/packages/email/src/lib/cn.ts
@@ -0,0 +1,6 @@
+import { ClassValue, clsx } from "clsx";
+import { twMerge } from "tailwind-merge";
+
+export const cn = (...inputs: ClassValue[]) => {
+  return twMerge(clsx(inputs));
+};
--- a/apps/web/modules/email/emails/lib/utils.tsx
+++ b/apps/web/modules/email/emails/lib/utils.tsx
@@ -1,15 +1,26 @@
 import { Column, Container, Img, Link, Row, Text } from "@react-email/components";
-import { TFunction } from "i18next";
 import { FileIcon } from "lucide-react";
 import { TSurveyElementTypeEnum } from "@formbricks/types/surveys/elements";
-import { getOriginalFileNameFromUrl } from "@/modules/storage/utils";
+import { TFunction } from "../types/translations";

-export const renderEmailResponseValue = async (
+// Simplified version - just get the filename from URL
+const getOriginalFileNameFromUrl = (url: string): string => {
+  try {
+    const urlObj = new URL(url);
+    const pathname = urlObj.pathname;
+    const filename = pathname.split("/").pop() || "file";
+    return decodeURIComponent(filename);
+  } catch {
+    return url.split("/").pop() || "file";
+  }
+};
+
+export const renderEmailResponseValue = (
  response: string | string[],
  questionType: TSurveyElementTypeEnum,
  t: TFunction,
  overrideFileUploadResponse = false
-): Promise<React.JSX.Element> => {
+): React.JSX.Element => {
  switch (questionType) {
    case TSurveyElementTypeEnum.FileUpload:
      return (
@@ -65,6 +76,6 @@ export const renderEmailResponseValue = async (
      );

    default:
-      return <Text className="mt-0 text-sm break-words whitespace-pre-wrap">{response}</Text>;
+      return <Text className="mt-0 text-sm break-words whitespace-pre-wrap">{response as string}</Text>;
  }
 };
--- a/packages/email/src/lib/example-data.ts
+++ b/packages/email/src/lib/example-data.ts
@@ -0,0 +1,184 @@
+// Mock data for email templates to use in React Email preview server
+import { TOrganization } from "@formbricks/types/organizations";
+import { TResponse } from "@formbricks/types/responses";
+import { TSurveyElementTypeEnum } from "@formbricks/types/surveys/elements";
+import { TSurvey } from "@formbricks/types/surveys/types";
+
+export const exampleData = {
+  verificationEmail: {
+    verifyLink: "https://app.formbricks.com/auth/verify?token=example-verification-token",
+    verificationRequestLink: "https://app.formbricks.com/auth/verification-requested",
+  },
+
+  forgotPasswordEmail: {
+    verifyLink: "https://app.formbricks.com/auth/forgot-password/reset?token=example-reset-token",
+  },
+
+  newEmailVerification: {
+    verifyLink: "https://app.formbricks.com/verify-email-change?token=example-email-change-token",
+  },
+
+  passwordResetNotifyEmail: {
+    // No props needed
+  },
+
+  inviteEmail: {
+    inviteeName: "Jane Smith",
+    inviterName: "John Doe",
+    verifyLink: "https://app.formbricks.com/invite?token=example-invite-token",
+  },
+
+  inviteAcceptedEmail: {
+    inviterName: "John Doe",
+    inviteeName: "Jane Smith",
+  },
+
+  linkSurveyEmail: {
+    surveyName: "Customer Satisfaction Survey",
+    surveyLink:
+      "https://app.formbricks.com/s/example-survey-id?verify=example-token&suId=example-single-use-id",
+  },
+
+  embedSurveyPreviewEmail: {
+    html: '<div style="padding: 20px; background-color: #f3f4f6; border-radius: 8px;"><h3 style="margin-top: 0;">Example Survey Embed</h3><p>This is a preview of how your survey will look when embedded in an email.</p></div>',
+    environmentId: "clxyz123456789",
+  },
+
+  responseFinishedEmail: {
+    survey: {
+      id: "survey-123",
+      name: "Customer Feedback Survey",
+      variables: [
+        {
+          id: "var-1",
+          name: "Customer ID",
+          type: "text" as const,
+        },
+      ],
+      hiddenFields: {
+        enabled: true,
+        fieldIds: ["userId"],
+      },
+      welcomeCard: {
+        enabled: false,
+      },
+      questions: [
+        {
+          id: "q1",
+          type: "openText" as const,
+          headline: { default: "What did you like most?" },
+          required: true,
+          inputType: "text" as const,
+        },
+        {
+          id: "q2",
+          type: "rating" as const,
+          headline: { default: "How would you rate your experience?" },
+          required: true,
+          scale: "number" as const,
+          range: 5,
+        },
+      ],
+      endings: [],
+      styling: {},
+      createdBy: null,
+    } as unknown as TSurvey,
+    responseCount: 15,
+    response: {
+      id: "response-123",
+      createdAt: new Date(),
+      updatedAt: new Date(),
+      surveyId: "survey-123",
+      finished: true,
+      data: {
+        q1: "The customer service was excellent!",
+        q2: 5,
+        userId: "user-abc-123",
+      },
+      variables: {
+        "var-1": "CUST-456",
+      },
+      contactAttributes: {
+        email: "customer@example.com",
+      },
+      meta: {
+        userAgent: {},
+        url: "https://example.com",
+      },
+      tags: [],
+      notes: [],
+      ttc: {},
+      singleUseId: null,
+      language: "default",
+      displayId: null,
+    } as unknown as TResponse,
+    WEBAPP_URL: "https://app.formbricks.com",
+    environmentId: "env-123",
+    organization: {
+      id: "org-123",
+      name: "Acme Corporation",
+      createdAt: new Date(),
+      updatedAt: new Date(),
+      billing: {
+        stripeCustomerId: null,
+        subscriptionStatus: null,
+        features: {
+          inAppSurvey: { status: "active" as const, unlimited: true },
+          linkSurvey: { status: "active" as const, unlimited: true },
+          userTargeting: { status: "active" as const, unlimited: true },
+        },
+        limits: {
+          monthly: {
+            responses: 1000,
+            miu: 10000,
+          },
+        },
+      },
+      isAIEnabled: false,
+    } as unknown as TOrganization,
+  },
+
+  followUpEmail: {
+    body: "<p>Thank you for your feedback! We've received your response and will review it shortly.</p><p>Here's a summary of what you submitted:</p>",
+    responseData: [
+      {
+        element: "What did you like most?",
+        response: "The customer service was excellent!",
+        type: TSurveyElementTypeEnum.OpenText,
+      },
+      {
+        element: "How would you rate your experience?",
+        response: "5",
+        type: TSurveyElementTypeEnum.Rating,
+      },
+    ],
+    variables: [
+      {
+        id: "var-1",
+        name: "Customer ID",
+        type: "text",
+        value: "CUST-456",
+      },
+    ],
+    hiddenFields: [
+      {
+        id: "userId",
+        value: "user-abc-123",
+      },
+    ],
+  },
+
+  emailCustomizationPreviewEmail: {
+    userName: "Alex Johnson",
+  },
+
+  legalProps: {
+    privacyUrl: "https://formbricks.com/privacy",
+    termsUrl: "https://formbricks.com/terms",
+    imprintUrl: "https://formbricks.com/imprint",
+    imprintAddress: "Formbricks GmbH, Example Street 123, 12345 Berlin, Germany",
+  },
+};
+
+export type ExampleDataKeys = keyof typeof exampleData;
+export type ExampleData<K extends ExampleDataKeys> = (typeof exampleData)[K];
--- a/packages/email/src/lib/mock-translate.ts
+++ b/packages/email/src/lib/mock-translate.ts
@@ -0,0 +1,108 @@
+// Mock translation function for React Email preview server
+// Returns English strings extracted from apps/web/locales/en-US.json
+
+type TranslationKey = string;
+type TranslationValue = string;
+
+const translations: Record<TranslationKey, TranslationValue> = {
+  "emails.accept": "Accept",
+  "emails.click_or_drag_to_upload_files": "Click or drag to upload files.",
+  "emails.email_customization_preview_email_heading": "Hey {userName}",
+  "emails.email_customization_preview_email_subject": "Formbricks Email Customization Preview",
+  "emails.email_customization_preview_email_text":
+    "This is an email preview to show you which logo will be rendered in the emails.",
+  "emails.email_footer_text_1": "Have a great day!",
+  "emails.email_footer_text_2": "The Formbricks Team",
+  "emails.email_template_text_1": "This email was sent via Formbricks.",
+  "emails.embed_survey_preview_email_didnt_request": "Didn't request this?",
+  "emails.embed_survey_preview_email_environment_id": "Environment ID",
+  "emails.embed_survey_preview_email_fight_spam":
+    "Help us fight spam and forward this mail to hola@formbricks.com",
+  "emails.embed_survey_preview_email_heading": "Preview Email Embed",
+  "emails.embed_survey_preview_email_subject": "Formbricks Email Survey Preview",
+  "emails.embed_survey_preview_email_text": "This is how the code snippet looks embedded into an email:",
+  "emails.forgot_password_email_change_password": "Change password",
+  "emails.forgot_password_email_did_not_request": "If you didn't request this, please ignore this email.",
+  "emails.forgot_password_email_heading": "Change password",
+  "emails.forgot_password_email_link_valid_for_24_hours": "The link is valid for 24 hours.",
+  "emails.forgot_password_email_subject": "Reset your Formbricks password",
+  "emails.forgot_password_email_text":
+    "You have requested a link to change your password. You can do this by clicking the link below:",
+  "emails.hidden_field": "Hidden field",
+  "emails.invite_accepted_email_heading": "Hey",
+  "emails.invite_accepted_email_subject": "You've got a new organization member!",
+  "emails.invite_accepted_email_text_par1": "Just letting you know that",
+  "emails.invite_accepted_email_text_par2": "accepted your invitation. Have fun collaborating!",
+  "emails.invite_email_button_label": "Join organization",
+  "emails.invite_email_heading": "Hey",
+  "emails.invite_email_text_par1": "Your colleague",
+  "emails.invite_email_text_par2":
+    "invited you to join them at Formbricks. To accept the invitation, please click the link below:",
+  "emails.invite_member_email_subject": "You're invited to collaborate on Formbricks!",
+  "emails.new_email_verification_text": "To verify your new email address, please click the button below:",
+  "emails.number_variable": "Number variable",
+  "emails.password_changed_email_heading": "Password changed",
+  "emails.password_changed_email_text": "Your password has been changed successfully.",
+  "emails.password_reset_notify_email_subject": "Your Formbricks password has been changed",
+  "emails.reject": "Reject",
+  "emails.render_email_response_value_file_upload_response_link_not_included":
+    "Link to uploaded file is not included for data privacy reasons",
+  "emails.response_data": "Response data",
+  "emails.response_finished_email_subject": "A response for {surveyName} was completed ✅",
+  "emails.response_finished_email_subject_with_email":
+    "{personEmail} just completed your {surveyName} survey ✅",
+  "emails.schedule_your_meeting": "Schedule your meeting",
+  "emails.select_a_date": "Select a date",
+  "emails.survey_response_finished_email_congrats":
+    "Congrats, you received a new response to your survey! Someone just completed your survey: {surveyName}",
+  "emails.survey_response_finished_email_dont_want_notifications": "Don't want to get these notifications?",
+  "emails.survey_response_finished_email_hey": "Hey 👋",
+  "emails.survey_response_finished_email_turn_off_notifications_for_all_new_forms":
+    "Turn off notifications for all newly created forms",
+  "emails.survey_response_finished_email_turn_off_notifications_for_this_form":
+    "Turn off notifications for this form",
+  "emails.survey_response_finished_email_view_more_responses": "View {responseCount} more responses",
+  "emails.survey_response_finished_email_view_survey_summary": "View survey summary",
+  "emails.text_variable": "Text variable",
+  "emails.verification_email_click_on_this_link": "You can also click on this link:",
+  "emails.verification_email_heading": "Almost there!",
+  "emails.verification_email_hey": "Hey 👋",
+  "emails.verification_email_if_expired_request_new_token":
+    "If it has expired please request a new token here:",
+  "emails.verification_email_link_valid_for_24_hours": "The link is valid for 24 hours.",
+  "emails.verification_email_request_new_verification": "Request new verification",
+  "emails.verification_email_subject": "Please verify your email to use Formbricks",
+  "emails.verification_email_survey_name": "Survey name",
+  "emails.verification_email_take_survey": "Take survey",
+  "emails.verification_email_text": "To start using Formbricks please verify your email below:",
+  "emails.verification_email_thanks": "Thanks for validating your email!",
+  "emails.verification_email_to_fill_survey": "To fill out the survey please click on the button below:",
+  "emails.verification_email_verify_email": "Verify email",
+  "emails.verification_new_email_subject": "Email change verification",
+  "emails.verification_security_notice":
+    "If you did not request this email change, please ignore this email or contact support immediately.",
+  "emails.verified_link_survey_email_subject": "Your survey is ready to be filled out.",
+};
+
+// Simple string replacement for placeholders like {userName}, {surveyName}, etc.
+const replacePlaceholders = (text: string, replacements?: Record<string, string>): string => {
+  if (!replacements) return text;
+
+  let result = text;
+  Object.entries(replacements).forEach(([key, value]) => {
+    result = result.replace(new RegExp(`\\{${key}\\}`, "g"), value);
+  });
+
+  return result;
+};
+
+/**
+ * Mock translation function for preview server
+ * @param key - Translation key (e.g., "emails.forgot_password_email_heading")
+ * @param replacements - Optional object with placeholder replacements
+ * @returns Translated string with placeholders replaced
+ */
+export const t = (key: string, replacements?: Record<string, string>): string => {
+  const translation = translations[key] || key;
+  return replacePlaceholders(translation, replacements);
+};
--- a/packages/email/src/lib/render.ts
+++ b/packages/email/src/lib/render.ts
@@ -0,0 +1,116 @@
+import { render } from "@react-email/render";
+import { ForgotPasswordEmail } from "../../emails/auth/forgot-password-email";
+import { NewEmailVerification } from "../../emails/auth/new-email-verification";
+import { PasswordResetNotifyEmail } from "../../emails/auth/password-reset-notify-email";
+import { VerificationEmail } from "../../emails/auth/verification-email";
+import { EmailCustomizationPreviewEmail } from "../../emails/general/email-customization-preview-email";
+import { InviteAcceptedEmail } from "../../emails/invite/invite-accepted-email";
+import { InviteEmail } from "../../emails/invite/invite-email";
+import { EmbedSurveyPreviewEmail } from "../../emails/survey/embed-survey-preview-email";
+import { FollowUpEmail, FollowUpEmailProps } from "../../emails/survey/follow-up-email";
+import { LinkSurveyEmail } from "../../emails/survey/link-survey-email";
+import {
+  ResponseFinishedEmail,
+  ResponseFinishedEmailProps,
+} from "../../emails/survey/response-finished-email";
+import { TEmailTemplateLegalProps } from "../types/email";
+import { TFunction } from "../types/translations";
+
+export async function renderVerificationEmail(
+  props: {
+    verifyLink: string;
+    verificationRequestLink: string;
+    t: TFunction;
+  } & TEmailTemplateLegalProps
+): Promise<string> {
+  return await render(VerificationEmail(props));
+}
+
+export async function renderForgotPasswordEmail(
+  props: {
+    verifyLink: string;
+    t: TFunction;
+  } & TEmailTemplateLegalProps
+): Promise<string> {
+  return await render(ForgotPasswordEmail(props));
+}
+
+export async function renderNewEmailVerification(
+  props: {
+    verifyLink: string;
+    t: TFunction;
+  } & TEmailTemplateLegalProps
+): Promise<string> {
+  return await render(NewEmailVerification(props));
+}
+
+export async function renderPasswordResetNotifyEmail(
+  props: { t: TFunction } & TEmailTemplateLegalProps
+): Promise<string> {
+  return await render(PasswordResetNotifyEmail(props));
+}
+
+export async function renderInviteEmail(
+  props: {
+    inviteeName: string;
+    inviterName: string;
+    verifyLink: string;
+    t: TFunction;
+  } & TEmailTemplateLegalProps
+): Promise<string> {
+  return await render(InviteEmail(props));
+}
+
+export async function renderInviteAcceptedEmail(
+  props: {
+    inviterName: string;
+    inviteeName: string;
+    t: TFunction;
+  } & TEmailTemplateLegalProps
+): Promise<string> {
+  return await render(InviteAcceptedEmail(props));
+}
+
+export async function renderLinkSurveyEmail(
+  props: {
+    surveyName: string;
+    surveyLink: string;
+    logoUrl: string;
+    t: TFunction;
+  } & TEmailTemplateLegalProps
+): Promise<string> {
+  return await render(LinkSurveyEmail(props));
+}
+
+export async function renderEmbedSurveyPreviewEmail(
+  props: {
+    html: string;
+    environmentId: string;
+    logoUrl?: string;
+    t: TFunction;
+  } & TEmailTemplateLegalProps
+): Promise<string> {
+  return await render(EmbedSurveyPreviewEmail(props));
+}
+
+export async function renderResponseFinishedEmail(
+  props: ResponseFinishedEmailProps & TEmailTemplateLegalProps
+): Promise<string> {
+  return await render(ResponseFinishedEmail(props));
+}
+
+export async function renderEmailCustomizationPreviewEmail(
+  props: {
+    userName: string;
+    logoUrl?: string;
+    t: TFunction;
+  } & TEmailTemplateLegalProps
+): Promise<string> {
+  return await render(EmailCustomizationPreviewEmail(props));
+}
+
+export async function renderFollowUpEmail(
+  props: FollowUpEmailProps & TEmailTemplateLegalProps
+): Promise<string> {
+  return await render(FollowUpEmail(props));
+}
--- a/packages/email/src/types/email.ts
+++ b/packages/email/src/types/email.ts
@@ -0,0 +1,6 @@
+export interface TEmailTemplateLegalProps {
+  privacyUrl?: string;
+  termsUrl?: string;
+  imprintUrl?: string;
+  imprintAddress?: string;
+}
--- a/packages/email/src/types/follow-up.ts
+++ b/packages/email/src/types/follow-up.ts
@@ -0,0 +1,19 @@
+import { TSurveyElementTypeEnum } from "@formbricks/types/surveys/elements";
+
+export interface ProcessedResponseElement {
+  element: string;
+  response: string | string[];
+  type: TSurveyElementTypeEnum;
+}
+
+export interface ProcessedVariable {
+  id: string;
+  name: string;
+  type: "text" | "number";
+  value: string | number;
+}
+
+export interface ProcessedHiddenField {
+  id: string;
+  value: string;
+}
--- a/packages/email/src/types/translations.ts
+++ b/packages/email/src/types/translations.ts
@@ -0,0 +1 @@
+export type TFunction = (key: string, replacements?: Record<string, string>) => string;
--- a/packages/email/tailwind.config.js
+++ b/packages/email/tailwind.config.js
@@ -0,0 +1,5 @@
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+  content: ["./src/**/*.{ts,tsx}", "./emails/**/*.{ts,tsx}"],
+  plugins: [],
+};
--- a/packages/email/tsconfig.json
+++ b/packages/email/tsconfig.json
@@ -0,0 +1,10 @@
+{
+  "compilerOptions": {
+    "baseUrl": ".",
+    "outDir": "dist",
+    "rootDir": "."
+  },
+  "exclude": ["node_modules", "dist"],
+  "extends": "@formbricks/config-typescript/react-library.json",
+  "include": ["src/**/*", "emails/**/*"]
+}
--- a/packages/i18n-utils/src/scan-translations.ts
+++ b/packages/i18n-utils/src/scan-translations.ts
@@ -25,6 +25,7 @@ const __dirname = dirname(__filename);

 // Configuration for Web App
 const WEB_APP_DIR = path.join(__dirname, "..", "..", "..", "apps", "web");
+const EMAIL_PKG_DIR = path.join(__dirname, "..", "..", "..", "packages", "email");
 const WEB_APP_LOCALES_DIR = path.join(WEB_APP_DIR, "locales");
 const WEB_APP_DEFAULT_LOCALE = "en-US";

@@ -139,27 +140,32 @@ export function extractKeysFromContent(content: string): string[] {
 /**
 * Scan source files for translation keys
 */
-async function scanSourceFiles(sourceDir: string, packageName: string): Promise<Set<string>> {
+async function scanSourceFiles(sourceDirs: string | string[], packageName: string): Promise<Set<string>> {
  console.log(`🔍 Scanning ${packageName} source files for translation keys...`);

  const usedKeys = new Set<string>();
+  const dirs = Array.isArray(sourceDirs) ? sourceDirs : [sourceDirs];

-  // Find all TypeScript and TypeScript React files
-  const files = await glob("**/*.{ts,tsx}", {
-    cwd: sourceDir,
-    ignore: EXCLUDE_DIRS,
-    absolute: true,
-  });
+  for (const dir of dirs) {
+    // Find all TypeScript and TypeScript React files
+    const files = await glob("**/*.{ts,tsx}", {
+      cwd: dir,
+      ignore: EXCLUDE_DIRS,
+      absolute: true,
+    });

-  console.log(`   Found ${files.length.toString()} files to scan`);
+    console.log(
+      `   Found ${files.length.toString()} files to scan in ${path.relative(path.join(__dirname, "..", "..", ".."), dir)}`
+    );

-  for (const file of files) {
-    try {
-      const content = await fs.promises.readFile(file, "utf-8");
-      const keys = extractKeysFromContent(content);
-      keys.forEach((key) => usedKeys.add(key));
-    } catch (error) {
-      console.error(`❌ Error: Could not read file ${file}:`, error);
+    for (const file of files) {
+      try {
+        const content = await fs.promises.readFile(file, "utf-8");
+        const keys = extractKeysFromContent(content);
+        keys.forEach((key) => usedKeys.add(key));
+      } catch (error) {
+        console.error(`❌ Error: Could not read file ${file}:`, error);
+      }
    }
  }

@@ -423,13 +429,13 @@ function displayResults(results: ScanResults, packageName: string, defaultLocale
 * Validate translations for a single package
 */
 async function validatePackage(
-  sourceDir: string,
+  sourceDirs: string | string[],
  localesDir: string,
  defaultLocale: string,
  packageName: string
 ): Promise<ScanResults> {
  // Scan source files for used keys
-  const usedKeys = await scanSourceFiles(sourceDir, packageName);
+  const usedKeys = await scanSourceFiles(sourceDirs, packageName);

  // Load translation keys from all locale files
  const translationsByLocale = await loadAllTranslationKeys(localesDir, defaultLocale, packageName);
@@ -461,7 +467,7 @@ async function main(): Promise<void> {
  try {
    // Validate Web App
    const webAppResults = await validatePackage(
-      WEB_APP_DIR,
+      [WEB_APP_DIR, EMAIL_PKG_DIR],
      WEB_APP_LOCALES_DIR,
      WEB_APP_DEFAULT_LOCALE,
      "Web App"
--- a/packages/survey-ui/README.md
+++ b/packages/survey-ui/README.md
@@ -1,101 +1,218 @@
 # @formbricks/survey-ui

-Reusable UI components package for Formbricks applications.
+React UI components for building surveys and forms. Includes NPS, rating scales, multi-select, file upload, and more.
+
+![Survey UI Preview](https://cdn.jsdelivr.net/gh/formbricks/formbricks@main/packages/survey-ui/images/survey-preview.png)

 ## Installation

-This package is part of the Formbricks monorepo and is available as a workspace dependency.
+```bash
+npm install @formbricks/survey-ui
+```

-## Usage
+**Requirements:** React 19 (`react@^19.0.0`)
+
+## Quick Start

 ```tsx
-import { Button } from "@formbricks/survey-ui";
+import { OpenText, Rating } from "@formbricks/survey-ui";
+import "@formbricks/survey-ui/styles";

-function MyComponent() {
+function Survey() {
  return (
-    <Button variant="default" size="default">
-      Click me
-    </Button>
+    <div id="fbjs">
+      <OpenText
+        elementId="name"
+        headline="What's your name?"
+        inputId="name-field"
+        placeholder="Enter your name"
+        onChange={(value) => console.log(value)}
+      />
+
+      <Rating
+        elementId="rating"
+        headline="Rate your experience"
+        inputId="rating-field"
+        scale="star"
+        range={5}
+        onChange={(value) => console.log(value)}
+      />
+    </div>
  );
 }
 ```

-## Development
+> **Important:** Components must be wrapped in `<div id="fbjs">` for styles to work.

-```bash
-# Build the package
-pnpm build
+## Components

-# Watch mode for development
-pnpm dev
+### Survey Elements

+| Component | Description |
+|-----------|-------------|
+| `OpenText` | Text input (single or multi-line) |
+| `SingleSelect` | Radio button selection |
+| `MultiSelect` | Checkbox selection |
+| `Rating` | Star, number, or smiley rating |
+| `NPS` | Net Promoter Score (0-10) |
+| `Matrix` | Table/grid selection |
+| `Ranking` | Drag-and-drop ranking |
+| `DateElement` | Date picker |
+| `FileUpload` | File upload with preview |
+| `PictureSelect` | Image-based selection |
+| `Consent` | Checkbox with label |
+| `CTA` | Call-to-action button |
+| `FormField` | Generic form field wrapper |

-# Lint
-pnpm lint
-```
+### General Components

-## Structure
-
-```text
-src/
-├── components/     # React components
-├── lib/           # Utility functions
-└── index.ts       # Main entry point
-```
-
-## Adding New Components
-
-### Using shadcn CLI (Recommended)
-
-This package is configured to work with shadcn/ui CLI. You can add components using:
-
-```bash
-cd packages/survey-ui
-pnpm ui:add <component-name>
-```
-
-**Important**: After adding a component, reorganize it into a folder structure:
-
-For example:
-```bash
-pnpm ui:add button
-pnpm ui:organize button
-```
-
-Then export the component from `src/components/index.ts`.
-
-### Manual Component Creation
-
-1. Create a new component directory under `src/components/<component-name>/`
-2. Create `index.tsx` inside that directory
-3. Export the component from `src/components/index.ts`
-4. The component will be available from the main package export
-
-## Component Structure
-
-Components follow this folder structure:
-
-```text
-src/components/
-├── button.tsx
-├── button.stories.tsx
-```
+| Component | Description |
+|-----------|-------------|
+| `Button` | Button with variants: `default`, `outline`, `ghost`, `destructive` |
+| `Input` | Text input |
+| `DropdownMenu` | Dropdown menu (Radix UI) |
+| `ElementHeader` | Question headline + description |
+| `ElementMedia` | Image/video display |

 ## Theming

-This package uses CSS variables for theming. The theme can be customized by modifying `src/styles/globals.css`.
+Customize the appearance by overriding CSS variables inside `#fbjs`:

-Both light and dark modes are supported out of the box.
+```css
+#fbjs {
+  /* Brand color - affects focus rings, selections */
+  --fb-survey-brand-color: #3b82f6;

-## CSS Scoping
+  /* Buttons */
+  --fb-button-bg-color: #3b82f6;
+  --fb-button-text-color: #ffffff;
+  --fb-button-border-radius: 8px;

-By default, this package builds CSS scoped to `#fbjs` for use in the surveys package. This ensures proper specificity and prevents conflicts with preflight CSS.
+  /* Inputs & Options */
+  --fb-input-bg-color: #ffffff;
+  --fb-input-border-radius: 8px;
+  --fb-input-height: 44px;

-To build unscoped CSS (e.g., for standalone usage or Storybook), set the `SURVEY_UI_UNSCOPED` environment variable:
-
-```bash
-SURVEY_UI_UNSCOPED=true pnpm build
+  /* Typography */
+  --fb-element-headline-font-size: 18px;
+  --fb-element-headline-font-weight: 600;
+  --fb-element-headline-color: #111827;
+}
 ```

-**Note:** Storybook imports the source CSS directly and compiles it with its own Tailwind config, so it's not affected by this scoping setting.
+### All CSS Variables

+<details>
+<summary>Click to expand full variable reference</summary>
+
+#### Brand & Accent
+
+| Variable | Default | Description |
+|----------|---------|-------------|
+| `--fb-survey-brand-color` | `#64748b` | Primary accent color |
+| `--fb-accent-background-color` | `#e2e8f0` | Accent background |
+| `--fb-accent-background-color-selected` | `#f1f5f9` | Selected accent background |
+
+#### Buttons
+
+| Variable | Default | Description |
+|----------|---------|-------------|
+| `--fb-button-bg-color` | `#1e293b` | Button background |
+| `--fb-button-text-color` | `#f8fafc` | Button text |
+| `--fb-button-border-radius` | `10px` | Button corners |
+| `--fb-button-height` | `36px` | Button height |
+| `--fb-button-font-size` | `14px` | Button text size |
+| `--fb-button-font-weight` | `500` | Button text weight |
+| `--fb-button-padding-x` | `16px` | Horizontal padding |
+| `--fb-button-padding-y` | `8px` | Vertical padding |
+
+#### Inputs
+
+| Variable | Default | Description |
+|----------|---------|-------------|
+| `--fb-input-bg-color` | `#f8fafc` | Input background |
+| `--fb-input-border-color` | `#64748b` | Input border (uses brand color) |
+| `--fb-input-border-radius` | `10px` | Input corners |
+| `--fb-input-height` | `40px` | Input height |
+| `--fb-input-color` | `#0a0a0a` | Input text color |
+| `--fb-input-font-size` | `14px` | Input text size |
+| `--fb-input-placeholder-opacity` | `0.5` | Placeholder opacity |
+| `--fb-input-padding-x` | `16px` | Horizontal padding |
+| `--fb-input-padding-y` | `16px` | Vertical padding |
+| `--fb-input-shadow` | `0 1px 2px rgba(0,0,0,0.05)` | Input shadow |
+
+#### Options (Radio/Checkbox)
+
+| Variable | Default | Description |
+|----------|---------|-------------|
+| `--fb-option-bg-color` | `#f8fafc` | Option background |
+| `--fb-option-label-color` | `#0a0a0a` | Option text color |
+| `--fb-option-border-radius` | `10px` | Option corners |
+| `--fb-option-padding-x` | `16px` | Horizontal padding |
+| `--fb-option-padding-y` | `16px` | Vertical padding |
+| `--fb-option-font-size` | `14px` | Option text size |
+
+#### Headlines & Descriptions
+
+| Variable | Default | Description |
+|----------|---------|-------------|
+| `--fb-element-headline-font-size` | `16px` | Headline size |
+| `--fb-element-headline-font-weight` | `400` | Headline weight |
+| `--fb-element-headline-color` | `#000000` | Headline color |
+| `--fb-element-description-font-size` | `14px` | Description size |
+| `--fb-element-description-color` | `#000000` | Description color |
+
+#### Progress Bar
+
+| Variable | Default | Description |
+|----------|---------|-------------|
+| `--fb-progress-track-height` | `8px` | Track height |
+| `--fb-progress-track-bg-color` | `rgba(30,41,59,0.2)` | Track background |
+| `--fb-progress-indicator-bg-color` | `#1e293b` | Indicator background |
+
+</details>
+
+### Theme Examples
+
+**Blue Theme:**
+```css
+#fbjs {
+  --fb-survey-brand-color: #2563eb;
+  --fb-button-bg-color: #2563eb;
+  --fb-button-text-color: #ffffff;
+}
+```
+
+**Green Theme:**
+```css
+#fbjs {
+  --fb-survey-brand-color: #16a34a;
+  --fb-button-bg-color: #16a34a;
+  --fb-button-text-color: #ffffff;
+}
+```
+
+**Rounded Theme:**
+```css
+#fbjs {
+  --fb-input-border-radius: 9999px;
+  --fb-button-border-radius: 9999px;
+  --fb-option-border-radius: 16px;
+}
+```
+
+## TypeScript
+
+All components export their prop types:
+
+```tsx
+import { 
+  OpenText, type OpenTextProps,
+  Rating, type RatingProps,
+  SingleSelect, type SingleSelectProps, type SingleSelectOption 
+} from "@formbricks/survey-ui";
+```
+
+## License
+
+MIT — [Formbricks](https://formbricks.com)
--- a/packages/survey-ui/images/survey-preview.png
+++ b/packages/survey-ui/images/survey-preview.png
--- a/packages/survey-ui/package.json
+++ b/packages/survey-ui/package.json
@@ -1,22 +1,47 @@
 {
  "name": "@formbricks/survey-ui",
  "license": "MIT",
-  "version": "1.0.0",
-  "private": true,
-  "description": "Reusable UI components for Formbricks applications",
+  "version": "1.0.4",
+  "description": "React UI components for building surveys and forms - includes NPS, rating scales, multi-select, file upload, and more. Built with Radix UI and Tailwind CSS.",
  "homepage": "https://formbricks.com",
  "type": "module",
+  "keywords": [
+    "react",
+    "survey",
+    "form",
+    "ui",
+    "components",
+    "nps",
+    "rating",
+    "questionnaire",
+    "feedback",
+    "formbricks",
+    "tailwindcss",
+    "typescript",
+    "accessible"
+  ],
+  "author": {
+    "name": "Formbricks",
+    "url": "https://formbricks.com"
+  },
  "repository": {
    "type": "git",
-    "url": "https://github.com/formbricks/formbricks"
+    "url": "https://github.com/formbricks/formbricks",
+    "directory": "packages/survey-ui"
  },
-  "sideEffects": false,
+  "bugs": {
+    "url": "https://github.com/formbricks/formbricks/issues"
+  },
+  "sideEffects": [
+    "**/*.css"
+  ],
  "source": "src/index.ts",
  "main": "dist/index.js",
  "module": "dist/index.js",
  "types": "dist/index.d.ts",
  "files": [
-    "dist"
+    "dist",
+    "README.md"
  ],
  "exports": {
    ".": {
--- a/packages/survey-ui/src/components/elements/consent.tsx
+++ b/packages/survey-ui/src/components/elements/consent.tsx
@@ -30,6 +30,10 @@ export interface ConsentProps {
  dir?: "ltr" | "rtl" | "auto";
  /** Whether the checkbox is disabled */
  disabled?: boolean;
+  /** Image URL to display above the headline */
+  imageUrl?: string;
+  /** Video URL to display above the headline */
+  videoUrl?: string;
 }

 function Consent({
@@ -44,6 +48,8 @@ function Consent({
  errorMessage,
  dir = "auto",
  disabled = false,
+  imageUrl,
+  videoUrl,
 }: Readonly<ConsentProps>): React.JSX.Element {
  const handleCheckboxChange = (checked: boolean): void => {
    if (disabled) return;
@@ -53,7 +59,14 @@ function Consent({
  return (
    <div className="w-full space-y-4" id={elementId} dir={dir}>
      {/* Headline */}
-      <ElementHeader headline={headline} description={description} required={required} htmlFor={inputId} />
+      <ElementHeader
+        headline={headline}
+        description={description}
+        required={required}
+        htmlFor={inputId}
+        imageUrl={imageUrl}
+        videoUrl={videoUrl}
+      />

      {/* Consent Checkbox */}
      <div className="relative space-y-2">
@@ -74,7 +87,7 @@ function Consent({
            onCheckedChange={handleCheckboxChange}
            disabled={disabled}
            aria-invalid={Boolean(errorMessage)}
-            aria-required={required}
+            required={required}
          />
          {/* need to use style here because tailwind is not able to use css variables for font size and weight */}
          <span
--- a/packages/survey-ui/src/components/elements/cta.tsx
+++ b/packages/survey-ui/src/components/elements/cta.tsx
@@ -34,6 +34,10 @@ export interface CTAProps {
  disabled?: boolean;
  /** Variant for the button */
  buttonVariant?: "default" | "destructive" | "outline" | "secondary" | "ghost" | "link" | "custom";
+  /** Image URL to display above the headline */
+  imageUrl?: string;
+  /** Video URL to display above the headline */
+  videoUrl?: string;
 }

 function CTA({
@@ -50,6 +54,8 @@ function CTA({
  dir = "auto",
  disabled = false,
  buttonVariant = "default",
+  imageUrl,
+  videoUrl,
 }: Readonly<CTAProps>): React.JSX.Element {
  const handleButtonClick = (): void => {
    if (disabled) return;
@@ -63,24 +69,33 @@ function CTA({
  return (
    <div className="w-full space-y-4" id={elementId} dir={dir}>
      {/* Headline */}
-      <ElementHeader headline={headline} description={description} required={required} htmlFor={inputId} />
+      <ElementHeader
+        headline={headline}
+        description={description}
+        required={required}
+        htmlFor={inputId}
+        imageUrl={imageUrl}
+        videoUrl={videoUrl}
+      />

      {/* CTA Button */}
      <div className="relative space-y-2">
        <ElementError errorMessage={errorMessage} dir={dir} />

-        <div className="flex w-full justify-start">
-          <Button
-            id={inputId}
-            type="button"
-            onClick={handleButtonClick}
-            disabled={disabled}
-            className="flex items-center gap-2"
-            variant={buttonVariant}>
-            {buttonLabel}
-            {buttonExternal ? <SquareArrowOutUpRightIcon className="size-4" /> : null}
-          </Button>
-        </div>
+        {buttonExternal && (
+          <div className="flex w-full justify-start">
+            <Button
+              id={inputId}
+              type="button"
+              onClick={handleButtonClick}
+              disabled={disabled}
+              className="flex items-center gap-2"
+              variant={buttonVariant}>
+              {buttonLabel}
+              <SquareArrowOutUpRightIcon className="size-4" />
+            </Button>
+          </div>
+        )}
      </div>
    </div>
  );
--- a/packages/survey-ui/src/components/elements/date.tsx
+++ b/packages/survey-ui/src/components/elements/date.tsx
@@ -1,5 +1,6 @@
 import * as React from "react";
 import { Calendar } from "@/components/general/calendar";
+import { ElementError } from "@/components/general/element-error";
 import { ElementHeader } from "@/components/general/element-header";
 import { getDateFnsLocale } from "@/lib/locale";

@@ -30,6 +31,10 @@ interface DateElementProps {
  disabled?: boolean;
  /** Locale code for date formatting (e.g., "en-US", "de-DE", "fr-FR"). Defaults to browser locale or "en-US" */
  locale?: string;
+  /** Image URL to display above the headline */
+  imageUrl?: string;
+  /** Video URL to display above the headline */
+  videoUrl?: string;
 }

 function DateElement({
@@ -45,6 +50,9 @@ function DateElement({
  dir = "auto",
  disabled = false,
  locale = "en-US",
+  errorMessage,
+  imageUrl,
+  videoUrl,
 }: Readonly<DateElementProps>): React.JSX.Element {
  // Initialize date from value string, parsing as local time to avoid timezone issues
  const [date, setDate] = React.useState<Date | undefined>(() => {
@@ -87,58 +95,86 @@ function DateElement({
    }
  };

-  // Convert minDate/maxDate strings to Date objects
-  const minDateObj = minDate ? new Date(minDate) : undefined;
-  const maxDateObj = maxDate ? new Date(maxDate) : undefined;
-
-  // Create disabled function for date restrictions
-  const isDateDisabled = React.useCallback(
-    (dateToCheck: Date): boolean => {
-      if (disabled) return true;
-      if (minDateObj) {
-        const minAtMidnight = new Date(minDateObj.getFullYear(), minDateObj.getMonth(), minDateObj.getDate());
-        const checkAtMidnight = new Date(
-          dateToCheck.getFullYear(),
-          dateToCheck.getMonth(),
-          dateToCheck.getDate()
-        );
-        if (checkAtMidnight < minAtMidnight) return true;
-      }
-      if (maxDateObj) {
-        const maxAtMidnight = new Date(maxDateObj.getFullYear(), maxDateObj.getMonth(), maxDateObj.getDate());
-        const checkAtMidnight = new Date(
-          dateToCheck.getFullYear(),
-          dateToCheck.getMonth(),
-          dateToCheck.getDate()
-        );
-        if (checkAtMidnight > maxAtMidnight) return true;
-      }
-      return false;
-    },
-    [disabled, minDateObj, maxDateObj]
-  );
-
  // Get locale for date formatting
  const dateLocale = React.useMemo(() => {
    return locale ? getDateFnsLocale(locale) : undefined;
  }, [locale]);

+  const startMonth = React.useMemo(() => {
+    if (!minDate) return undefined;
+    try {
+      const [year, month, day] = minDate.split("-").map(Number);
+      return new Date(year, month - 1, day);
+    } catch {
+      return undefined;
+    }
+  }, [minDate]);
+
+  const endMonth = React.useMemo(() => {
+    if (!maxDate) return undefined;
+    try {
+      const [year, month, day] = maxDate.split("-").map(Number);
+      return new Date(year, month - 1, day);
+    } catch {
+      return undefined;
+    }
+  }, [maxDate]);
+
+  // Create disabled function for date restrictions
+  const isDateDisabled = React.useCallback(
+    (dateToCheck: Date): boolean => {
+      if (disabled) return true;
+
+      const checkAtMidnight = new Date(
+        dateToCheck.getFullYear(),
+        dateToCheck.getMonth(),
+        dateToCheck.getDate()
+      );
+
+      if (startMonth) {
+        const minAtMidnight = new Date(startMonth.getFullYear(), startMonth.getMonth(), startMonth.getDate());
+        if (checkAtMidnight < minAtMidnight) return true;
+      }
+
+      if (endMonth) {
+        const maxAtMidnight = new Date(endMonth.getFullYear(), endMonth.getMonth(), endMonth.getDate());
+        if (checkAtMidnight > maxAtMidnight) return true;
+      }
+      return false;
+    },
+    [disabled, endMonth, startMonth]
+  );
+
  return (
    <div className="w-full space-y-4" id={elementId} dir={dir}>
      {/* Headline */}
-      <ElementHeader headline={headline} description={description} required={required} htmlFor={inputId} />
+      <ElementHeader
+        headline={headline}
+        description={description}
+        required={required}
+        htmlFor={inputId}
+        imageUrl={imageUrl}
+        videoUrl={videoUrl}
+      />

-      {/* Calendar - Always visible */}
-      <div className="w-full">
-        <Calendar
-          mode="single"
-          selected={date}
-          captionLayout="dropdown"
-          disabled={isDateDisabled}
-          onSelect={handleDateSelect}
-          locale={dateLocale}
-          className="rounded-input border-input-border bg-input-bg text-input-text shadow-input mx-auto w-full max-w-[25rem] border"
-        />
+      <div className="relative">
+        <ElementError errorMessage={errorMessage} dir={dir} />
+        {/* Calendar - Always visible */}
+        <div className="w-full">
+          <Calendar
+            mode="single"
+            selected={date}
+            defaultMonth={date}
+            captionLayout="dropdown"
+            startMonth={startMonth}
+            endMonth={endMonth}
+            disabled={isDateDisabled}
+            onSelect={handleDateSelect}
+            locale={dateLocale}
+            required={required}
+            className="rounded-input border-input-border bg-input-bg text-input-text shadow-input mx-auto w-full max-w-[25rem] border"
+          />
+        </div>
      </div>
    </div>
  );
--- a/packages/survey-ui/src/components/elements/file-upload.stories.tsx
+++ b/packages/survey-ui/src/components/elements/file-upload.stories.tsx
@@ -236,7 +236,6 @@ export const MultipleElements: Story = {
        description="You can upload multiple images"
        allowMultiple
        allowedFileExtensions={[".jpg", ".png", ".gif"]}
-        maxSizeInMB={5}
        onChange={() => {}}
      />
    </div>
--- a/packages/survey-ui/src/components/elements/file-upload.tsx
+++ b/packages/survey-ui/src/components/elements/file-upload.tsx
@@ -2,7 +2,6 @@ import { Upload, UploadIcon, X } from "lucide-react";
 import * as React from "react";
 import { ElementError } from "@/components/general/element-error";
 import { ElementHeader } from "@/components/general/element-header";
-import { Input } from "@/components/general/input";
 import { cn } from "@/lib/utils";

 /**
@@ -193,11 +192,11 @@ function UploadArea({
          id={`${inputId}-label`}>
          {placeholderText}
        </span>
-        <Input
+        <input
          ref={fileInputRef}
          type="file"
          id={inputId}
-          className="hidden"
+          className="sr-only"
          multiple={allowMultiple}
          accept={acceptAttribute}
          onChange={onFileChange}
--- a/packages/survey-ui/src/components/elements/form-field.tsx
+++ b/packages/survey-ui/src/components/elements/form-field.tsx
@@ -43,6 +43,10 @@ interface FormFieldProps {
  dir?: "ltr" | "rtl" | "auto";
  /** Whether the controls are disabled */
  disabled?: boolean;
+  /** Image URL to display above the headline */
+  imageUrl?: string;
+  /** Video URL to display above the headline */
+  videoUrl?: string;
 }

 function FormField({
@@ -56,6 +60,8 @@ function FormField({
  errorMessage,
  dir = "auto",
  disabled = false,
+  imageUrl,
+  videoUrl,
 }: Readonly<FormFieldProps>): React.JSX.Element {
  // Ensure value is always an object
  const currentValues = React.useMemo(() => {
@@ -93,7 +99,13 @@ function FormField({
  return (
    <div className="w-full space-y-4" id={elementId} dir={dir}>
      {/* Headline */}
-      <ElementHeader headline={headline} description={description} required={required} />
+      <ElementHeader
+        headline={headline}
+        description={description}
+        required={required}
+        imageUrl={imageUrl}
+        videoUrl={videoUrl}
+      />

      {/* Form Fields */}
      <div className="relative space-y-3">
--- a/packages/survey-ui/src/components/elements/matrix.tsx
+++ b/packages/survey-ui/src/components/elements/matrix.tsx
@@ -41,6 +41,10 @@ interface MatrixProps {
  dir?: "ltr" | "rtl" | "auto";
  /** Whether the options are disabled */
  disabled?: boolean;
+  /** Image URL to display above the headline */
+  imageUrl?: string;
+  /** Video URL to display above the headline */
+  videoUrl?: string;
 }

 function Matrix({
@@ -56,6 +60,8 @@ function Matrix({
  errorMessage,
  dir = "auto",
  disabled = false,
+  imageUrl,
+  videoUrl,
 }: Readonly<MatrixProps>): React.JSX.Element {
  // Ensure value is always an object (value already has default of {})
  const selectedValues = value;
@@ -78,7 +84,14 @@ function Matrix({
  return (
    <div className="w-full space-y-4" id={elementId} dir={dir}>
      {/* Headline */}
-      <ElementHeader headline={headline} description={description} required={required} htmlFor={inputId} />
+      <ElementHeader
+        headline={headline}
+        description={description}
+        required={required}
+        htmlFor={inputId}
+        imageUrl={imageUrl}
+        videoUrl={videoUrl}
+      />

      {/* Matrix Table */}
      <div className="relative">
@@ -114,6 +127,7 @@ function Matrix({
                    onValueChange={(newColumnId) => {
                      handleRowChange(row.id, newColumnId);
                    }}
+                    name={rowGroupId}
                    disabled={disabled}
                    required={required}
                    aria-invalid={Boolean(errorMessage)}>
@@ -142,6 +156,7 @@ function Matrix({
                            <Label htmlFor={cellId} className="flex cursor-pointer justify-center">
                              <RadioGroupItem
                                value={column.id}
+                                required={required}
                                id={cellId}
                                disabled={disabled}
                                aria-label={`${row.label}-${column.label}`}
--- a/packages/survey-ui/src/components/elements/multi-select.tsx
+++ b/packages/survey-ui/src/components/elements/multi-select.tsx
@@ -67,6 +67,10 @@ interface MultiSelectProps {
  onOtherValueChange?: (value: string) => void;
  /** IDs of options that should be exclusive (selecting them deselects all others) */
  exclusiveOptionIds?: string[];
+  /** Image URL to display above the headline */
+  imageUrl?: string;
+  /** Video URL to display above the headline */
+  videoUrl?: string;
 }

 // Shared className for option labels
@@ -137,7 +141,7 @@ function DropdownVariant({

  const isRequired = getIsRequired();

-  const handleOptionToggle = (optionId: string) => {
+  const handleOptionToggle = (optionId: string): void => {
    if (selectedValues.includes(optionId)) {
      handleOptionRemove(optionId);
    } else {
@@ -440,6 +444,8 @@ function MultiSelect({
  otherValue = "",
  onOtherValueChange,
  exclusiveOptionIds = [],
+  imageUrl,
+  videoUrl,
 }: Readonly<MultiSelectProps>): React.JSX.Element {
  // Ensure value is always an array
  const selectedValues = Array.isArray(value) ? value : [];
@@ -491,7 +497,14 @@ function MultiSelect({
  return (
    <div className="w-full space-y-4" id={elementId} dir={dir}>
      {/* Headline */}
-      <ElementHeader headline={headline} description={description} required={required} htmlFor={inputId} />
+      <ElementHeader
+        headline={headline}
+        description={description}
+        required={required}
+        htmlFor={inputId}
+        imageUrl={imageUrl}
+        videoUrl={videoUrl}
+      />

      {/* Options */}
      <div className="relative">
--- a/packages/survey-ui/src/components/elements/nps.tsx
+++ b/packages/survey-ui/src/components/elements/nps.tsx
@@ -31,6 +31,10 @@ interface NPSProps {
  dir?: "ltr" | "rtl" | "auto";
  /** Whether the controls are disabled */
  disabled?: boolean;
+  /** Image URL to display above the headline */
+  imageUrl?: string;
+  /** Video URL to display above the headline */
+  videoUrl?: string;
 }

 function NPS({
@@ -47,6 +51,8 @@ function NPS({
  errorMessage,
  dir = "auto",
  disabled = false,
+  imageUrl,
+  videoUrl,
 }: Readonly<NPSProps>): React.JSX.Element {
  const [hoveredValue, setHoveredValue] = React.useState<number | null>(null);

@@ -162,7 +168,14 @@ function NPS({
  return (
    <div className="w-full space-y-4" id={elementId} dir={dir}>
      {/* Headline */}
-      <ElementHeader headline={headline} description={description} required={required} htmlFor={inputId} />
+      <ElementHeader
+        headline={headline}
+        description={description}
+        required={required}
+        htmlFor={inputId}
+        imageUrl={imageUrl}
+        videoUrl={videoUrl}
+      />

      {/* NPS Options */}
      <div className="relative space-y-2">
--- a/packages/survey-ui/src/components/elements/open-text.tsx
+++ b/packages/survey-ui/src/components/elements/open-text.tsx
@@ -24,6 +24,8 @@ interface OpenTextProps {
  dir?: "ltr" | "rtl" | "auto";
  rows?: number;
  disabled?: boolean;
+  imageUrl?: string;
+  videoUrl?: string;
 }

 function OpenText({
@@ -42,6 +44,8 @@ function OpenText({
  dir = "auto",
  rows = 3,
  disabled = false,
+  imageUrl,
+  videoUrl,
 }: Readonly<OpenTextProps>): React.JSX.Element {
  const [currentLength, setCurrentLength] = useState(value.length);

@@ -64,7 +68,14 @@ function OpenText({
  return (
    <div className="w-full space-y-4" id={elementId} dir={dir}>
      {/* Headline */}
-      <ElementHeader headline={headline} description={description} required={required} htmlFor={inputId} />
+      <ElementHeader
+        headline={headline}
+        description={description}
+        required={required}
+        htmlFor={inputId}
+        imageUrl={imageUrl}
+        videoUrl={videoUrl}
+      />

      {/* Input or Textarea */}
      <div className="relative space-y-2">
--- a/packages/survey-ui/src/components/elements/picture-select.tsx
+++ b/packages/survey-ui/src/components/elements/picture-select.tsx
@@ -43,6 +43,10 @@ interface PictureSelectProps {
  dir?: "ltr" | "rtl" | "auto";
  /** Whether the options are disabled */
  disabled?: boolean;
+  /** Image URL to display above the headline */
+  imageUrl?: string;
+  /** Video URL to display above the headline */
+  videoUrl?: string;
 }

 function PictureSelect({
@@ -58,6 +62,8 @@ function PictureSelect({
  errorMessage,
  dir = "auto",
  disabled = false,
+  imageUrl,
+  videoUrl,
 }: Readonly<PictureSelectProps>): React.JSX.Element {
  // Ensure value is always the correct type
  let selectedValues: string[] | string | undefined;
@@ -86,7 +92,14 @@ function PictureSelect({
  return (
    <div className="w-full space-y-4" id={elementId} dir={dir}>
      {/* Headline */}
-      <ElementHeader headline={headline} description={description} required={required} htmlFor={inputId} />
+      <ElementHeader
+        headline={headline}
+        description={description}
+        required={required}
+        htmlFor={inputId}
+        imageUrl={imageUrl}
+        videoUrl={videoUrl}
+      />

      {/* Picture Grid - 2 columns */}
      <div className="relative">
--- a/packages/survey-ui/src/components/elements/ranking.tsx
+++ b/packages/survey-ui/src/components/elements/ranking.tsx
@@ -43,6 +43,10 @@ interface RankingProps {
  dir?: TextDirection;
  /** Whether the controls are disabled */
  disabled?: boolean;
+  /** Image URL to display above the headline */
+  imageUrl?: string;
+  /** Video URL to display above the headline */
+  videoUrl?: string;
 }

 interface RankingItemProps {
@@ -74,7 +78,14 @@ function getBottomButtonRadiusClass(isLast: boolean, dir?: TextDirection): strin
  return "rounded-br-md";
 }

-function RankingItem({ item, rankedIds, onItemClick, onMove, disabled, dir }: Readonly<RankingItemProps>) {
+function RankingItem({
+  item,
+  rankedIds,
+  onItemClick,
+  onMove,
+  disabled,
+  dir,
+}: Readonly<RankingItemProps>): React.ReactNode {
  const isRanked = rankedIds.includes(item.id);
  const rankIndex = rankedIds.indexOf(item.id);
  const isFirst = isRanked && rankIndex === 0;
@@ -183,6 +194,8 @@ function Ranking({
  errorMessage,
  dir = "auto",
  disabled = false,
+  imageUrl,
+  videoUrl,
 }: Readonly<RankingProps>): React.JSX.Element {
  // Ensure value is always an array
  const rankedIds = React.useMemo(() => (Array.isArray(value) ? value : []), [value]);
@@ -232,7 +245,14 @@ function Ranking({
  return (
    <div className="w-full space-y-4" id={elementId} dir={dir}>
      {/* Headline */}
-      <ElementHeader headline={headline} description={description} required={required} htmlFor={inputId} />
+      <ElementHeader
+        headline={headline}
+        description={description}
+        required={required}
+        htmlFor={inputId}
+        imageUrl={imageUrl}
+        videoUrl={videoUrl}
+      />

      {/* Ranking Options */}
      <div className="relative">
--- a/packages/survey-ui/src/components/elements/rating.tsx
+++ b/packages/survey-ui/src/components/elements/rating.tsx
@@ -143,6 +143,10 @@ interface RatingProps {
  dir?: "ltr" | "rtl" | "auto";
  /** Whether the controls are disabled */
  disabled?: boolean;
+  /** Image URL to display above the headline */
+  imageUrl?: string;
+  /** Video URL to display above the headline */
+  videoUrl?: string;
 }

 function Rating({
@@ -161,6 +165,8 @@ function Rating({
  errorMessage,
  dir = "auto",
  disabled = false,
+  imageUrl,
+  videoUrl,
 }: Readonly<RatingProps>): React.JSX.Element {
  const [hoveredValue, setHoveredValue] = React.useState<number | null>(null);

@@ -399,7 +405,14 @@ function Rating({
  return (
    <div className="w-full space-y-4" id={elementId} dir={dir}>
      {/* Headline */}
-      <ElementHeader headline={headline} description={description} required={required} htmlFor={inputId} />
+      <ElementHeader
+        headline={headline}
+        description={description}
+        required={required}
+        htmlFor={inputId}
+        imageUrl={imageUrl}
+        videoUrl={videoUrl}
+      />

      {/* Rating Options */}
      <div className="relative space-y-2">
--- a/packages/survey-ui/src/components/elements/single-select.tsx
+++ b/packages/survey-ui/src/components/elements/single-select.tsx
@@ -61,6 +61,10 @@ interface SingleSelectProps {
  otherValue?: string;
  /** Callback when the 'other' input value changes */
  onOtherValueChange?: (value: string) => void;
+  /** Image URL to display above the headline */
+  imageUrl?: string;
+  /** Video URL to display above the headline */
+  videoUrl?: string;
 }

 function SingleSelect({
@@ -82,6 +86,8 @@ function SingleSelect({
  otherOptionPlaceholder = "Please specify",
  otherValue = "",
  onOtherValueChange,
+  imageUrl,
+  videoUrl,
 }: Readonly<SingleSelectProps>): React.JSX.Element {
  // Ensure value is always a string or undefined
  const selectedValue = value ?? undefined;
@@ -131,7 +137,14 @@ function SingleSelect({
  return (
    <div className="w-full space-y-4" id={elementId} dir={dir}>
      {/* Headline */}
-      <ElementHeader headline={headline} description={description} required={required} htmlFor={inputId} />
+      <ElementHeader
+        headline={headline}
+        description={description}
+        required={required}
+        htmlFor={inputId}
+        imageUrl={imageUrl}
+        videoUrl={videoUrl}
+      />

      {/* Options */}
      <div className="space-y-3">
--- a/packages/survey-ui/src/components/general/button.tsx
+++ b/packages/survey-ui/src/components/general/button.tsx
@@ -4,7 +4,7 @@ import * as React from "react";
 import { cn } from "@/lib/utils";

 const buttonVariants = cva(
-  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
+  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-button text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
  {
    variants: {
      variant: {
--- a/packages/survey-ui/src/components/general/calendar.tsx
+++ b/packages/survey-ui/src/components/general/calendar.tsx
@@ -60,6 +60,8 @@ function Calendar({
  formatters,
  components,
  locale,
+  startMonth,
+  endMonth,
  ...props
 }: Readonly<
  React.ComponentProps<typeof DayPicker> & {
@@ -78,6 +80,22 @@ function Calendar({
    return locale;
  }, [locale]);

+  const resolvedStartMonth = React.useMemo(() => {
+    if (startMonth) return startMonth;
+    if (captionLayout === "dropdown") {
+      return new Date(new Date().getFullYear() - 100, 0);
+    }
+    return undefined;
+  }, [startMonth, captionLayout]);
+
+  const resolvedEndMonth = React.useMemo(() => {
+    if (endMonth) return endMonth;
+    if (captionLayout === "dropdown") {
+      return new Date(new Date().getFullYear() + 100, 11);
+    }
+    return undefined;
+  }, [endMonth, captionLayout]);
+
  return (
    <DayPicker
      showOutsideDays={showOutsideDays}
@@ -89,6 +107,8 @@ function Calendar({
      )}
      captionLayout={captionLayout}
      locale={resolvedLocale}
+      startMonth={resolvedStartMonth}
+      endMonth={resolvedEndMonth}
      formatters={{
        formatMonthDropdown: (date) => {
          if (resolvedLocale) {
@@ -156,7 +176,7 @@ function Calendar({
        range_middle: cn("rounded-none", defaultClassNames.range_middle),
        range_end: cn("rounded-r-md bg-accent", defaultClassNames.range_end),
        today: cn(
-          "bg-accent text-accent-foreground rounded-md data-[selected=true]:rounded-none bg-brand opacity-50",
+          "bg-accent text-brand-foreground rounded-md data-[selected=true]:rounded-none bg-brand opacity-50",
          defaultClassNames.today
        ),
        outside: cn(
--- a/packages/survey-ui/src/components/general/element-media.tsx
+++ b/packages/survey-ui/src/components/general/element-media.tsx
@@ -3,30 +3,18 @@ import * as React from "react";
 import { cn } from "@/lib/utils";
 import { checkForLoomUrl, checkForVimeoUrl, checkForYoutubeUrl, convertToEmbedUrl } from "@/lib/video";

-// Function to add extra params to videoUrls in order to reduce video controls
-const getVideoUrlWithParams = (videoUrl: string): string | undefined => {
-  // First convert to embed URL
-  const embedUrl = convertToEmbedUrl(videoUrl);
-  if (!embedUrl) return undefined;
-
+//Function to add extra params to videoUrls in order to reduce video controls
+const getVideoUrlWithParams = (videoUrl: string): string => {
  const isYoutubeVideo = checkForYoutubeUrl(videoUrl);
  const isVimeoUrl = checkForVimeoUrl(videoUrl);
  const isLoomUrl = checkForLoomUrl(videoUrl);
-
-  if (isYoutubeVideo) {
-    // For YouTube, add parameters to embed URL
-    const separator = embedUrl.includes("?") ? "&" : "?";
-    return `${embedUrl}${separator}controls=0`;
-  } else if (isVimeoUrl) {
-    // For Vimeo, add parameters to embed URL
-    const separator = embedUrl.includes("?") ? "&" : "?";
-    return `${embedUrl}${separator}title=false&transcript=false&speed=false&quality_selector=false&progress_bar=false&pip=false&fullscreen=false&cc=false&chromecast=false`;
-  } else if (isLoomUrl) {
-    // For Loom, add parameters to embed URL
-    const separator = embedUrl.includes("?") ? "&" : "?";
-    return `${embedUrl}${separator}hide_share=true&hideEmbedTopBar=true&hide_title=true`;
-  }
-  return embedUrl;
+  if (isYoutubeVideo) return videoUrl.concat("?controls=0");
+  else if (isVimeoUrl)
+    return videoUrl.concat(
+      "?title=false&transcript=false&speed=false&quality_selector=false&progress_bar=false&pip=false&fullscreen=false&cc=false&chromecast=false"
+    );
+  else if (isLoomUrl) return videoUrl.concat("?hide_share=true&hideEmbedTopBar=true&hide_title=true");
+  return videoUrl;
 };

 interface ElementMediaProps {
@@ -35,16 +23,12 @@ interface ElementMediaProps {
  altText?: string;
 }

-function ElementMedia({
-  imgUrl,
-  videoUrl,
-  altText = "Image",
-}: Readonly<ElementMediaProps>): React.JSX.Element {
+function ElementMedia({ imgUrl, videoUrl, altText = "Image" }: Readonly<ElementMediaProps>): React.ReactNode {
  const videoUrlWithParams = videoUrl ? getVideoUrlWithParams(videoUrl) : undefined;
  const [isLoading, setIsLoading] = React.useState(true);

  if (!imgUrl && !videoUrl) {
-    return <></>;
+    return null;
  }

  return (
--- a/packages/survey-ui/src/lib/video.test.ts
+++ b/packages/survey-ui/src/lib/video.test.ts
@@ -117,6 +117,16 @@ describe("convertToEmbedUrl", () => {
      expect(result).toBe("https://player.vimeo.com/video/987654321");
    });

+    test("handles already-embedded Vimeo URLs", () => {
+      const result = convertToEmbedUrl("https://player.vimeo.com/video/123456789");
+      expect(result).toBe("https://player.vimeo.com/video/123456789");
+    });
+
+    test("handles Vimeo URLs with query parameters", () => {
+      const result = convertToEmbedUrl("https://vimeo.com/123456789?some=param");
+      expect(result).toBe("https://player.vimeo.com/video/123456789");
+    });
+
    test("returns undefined for invalid Vimeo URLs", () => {
      const result = convertToEmbedUrl("https://www.vimeo.com/invalid");
      expect(result).toBeUndefined();
@@ -134,6 +144,16 @@ describe("convertToEmbedUrl", () => {
      expect(result).toBe("https://www.loom.com/embed/xyz789");
    });

+    test("handles already-embedded Loom URLs", () => {
+      const result = convertToEmbedUrl("https://www.loom.com/embed/abc123def456");
+      expect(result).toBe("https://www.loom.com/embed/abc123def456");
+    });
+
+    test("handles Loom URLs with query parameters", () => {
+      const result = convertToEmbedUrl("https://www.loom.com/share/abc123def456?some=param");
+      expect(result).toBe("https://www.loom.com/embed/abc123def456");
+    });
+
    test("returns undefined for invalid Loom URLs", () => {
      const result = convertToEmbedUrl("https://www.loom.com/invalid");
      expect(result).toBeUndefined();
--- a/packages/survey-ui/src/lib/video.ts
+++ b/packages/survey-ui/src/lib/video.ts
@@ -27,7 +27,7 @@ export const checkForVimeoUrl = (url: string): boolean => {

    if (vimeoUrl.protocol !== "https:") return false;

-    const vimeoDomains = ["www.vimeo.com", "vimeo.com"];
+    const vimeoDomains = ["www.vimeo.com", "vimeo.com", "player.vimeo.com"];
    const hostname = vimeoUrl.hostname;

    return vimeoDomains.includes(hostname);
@@ -77,14 +77,14 @@ const extractYoutubeId = (url: string): string | null => {
 };

 const extractVimeoId = (url: string): string | null => {
-  const regExp = /vimeo\.com\/(?<videoId>\d+)/;
+  const regExp = /vimeo\.com\/(?:video\/)?(?<videoId>\d+)/;
  const match = regExp.exec(url);

  return match?.groups?.videoId ?? null;
 };

 const extractLoomId = (url: string): string | null => {
-  const regExp = /loom\.com\/share\/(?<videoId>[a-zA-Z0-9]+)/;
+  const regExp = /loom\.com\/(?:share|embed)\/(?<videoId>[a-zA-Z0-9]+)/;
  const match = regExp.exec(url);

  return match?.groups?.videoId ?? null;
--- a/packages/survey-ui/vite.config.mts
+++ b/packages/survey-ui/vite.config.mts
@@ -47,7 +47,10 @@ export default defineConfig({
  },
  plugins: [
    tsconfigPaths(),
-    dts({ include: ["src"] }),
+    dts({
+      include: ["src"],
+      exclude: ["**/*.stories.tsx", "**/*.test.ts", "**/story-helpers.ts"],
+    }),
    tailwindcss(),
  ],
  test: {
--- a/packages/surveys/src/components/elements/address-element.tsx
+++ b/packages/surveys/src/components/elements/address-element.tsx
@@ -119,6 +119,8 @@ export function AddressElement({
        onChange={handleChange}
        required={element.required}
        dir={dir}
+        imageUrl={element.imageUrl}
+        videoUrl={element.videoUrl}
      />
    </form>
  );
--- a/packages/surveys/src/components/elements/consent-element.tsx
+++ b/packages/surveys/src/components/elements/consent-element.tsx
@@ -53,6 +53,8 @@ export function ConsentElement({
        onChange={handleChange}
        required={element.required}
        dir={dir}
+        imageUrl={element.imageUrl}
+        videoUrl={element.videoUrl}
      />
    </form>
  );
--- a/packages/surveys/src/components/elements/contact-info-element.tsx
+++ b/packages/surveys/src/components/elements/contact-info-element.tsx
@@ -115,6 +115,8 @@ export function ContactInfoElement({
        onChange={handleChange}
        required={element.required}
        dir={dir}
+        imageUrl={element.imageUrl}
+        videoUrl={element.videoUrl}
      />
    </form>
  );
--- a/packages/surveys/src/components/elements/cta-element.tsx
+++ b/packages/surveys/src/components/elements/cta-element.tsx
@@ -65,6 +65,8 @@ export function CTAElement({
        onClick={handleClick}
        // CTA cannot be required
        required={false}
+        imageUrl={element.imageUrl}
+        videoUrl={element.videoUrl}
      />
    </form>
  );
--- a/packages/surveys/src/components/elements/date-element.tsx
+++ b/packages/surveys/src/components/elements/date-element.tsx
@@ -56,13 +56,12 @@ export function DateElement({
    setTtc(updatedTtcObj);
  };

-  // Use default date range (100 years ago to year 3000)
  const getMinDate = (): string | undefined => {
    return new Date(new Date().getFullYear() - 100, 0, 1).toISOString().split("T")[0];
  };

  const getMaxDate = (): string | undefined => {
-    return "3000-12-31";
+    return new Date(new Date().getFullYear() + 100, 0, 1).toISOString().split("T")[0];
  };

  return (
@@ -79,6 +78,8 @@ export function DateElement({
        required={element.required}
        errorMessage={errorMessage}
        locale={languageCode}
+        imageUrl={element.imageUrl}
+        videoUrl={element.videoUrl}
      />
    </form>
  );
--- a/packages/surveys/src/components/elements/matrix-element.tsx
+++ b/packages/surveys/src/components/elements/matrix-element.tsx
@@ -134,6 +134,8 @@ export function MatrixElement({
        value={convertValueToIds(value)}
        onChange={handleChange}
        required={element.required}
+        imageUrl={element.imageUrl}
+        videoUrl={element.videoUrl}
      />
    </form>
  );
--- a/packages/surveys/src/components/elements/multiple-choice-multi-element.tsx
+++ b/packages/surveys/src/components/elements/multiple-choice-multi-element.tsx
@@ -258,6 +258,8 @@ export function MultipleChoiceMultiElement({
        otherValue={otherValue}
        onOtherValueChange={handleOtherValueChange}
        exclusiveOptionIds={noneOption ? [noneOption.id] : []}
+        imageUrl={element.imageUrl}
+        videoUrl={element.videoUrl}
      />
    </form>
  );
--- a/packages/surveys/src/components/elements/multiple-choice-single-element.tsx
+++ b/packages/surveys/src/components/elements/multiple-choice-single-element.tsx
@@ -175,6 +175,8 @@ export function MultipleChoiceSingleElement({
        }
        otherValue={otherValue}
        onOtherValueChange={handleOtherValueChange}
+        imageUrl={element.imageUrl}
+        videoUrl={element.videoUrl}
      />
    </form>
  );
--- a/packages/surveys/src/components/elements/nps-element.tsx
+++ b/packages/surveys/src/components/elements/nps-element.tsx
@@ -58,6 +58,8 @@ export function NPSElement({
        colorCoding={element.isColorCodingEnabled}
        required={element.required}
        dir={dir}
+        imageUrl={element.imageUrl}
+        videoUrl={element.videoUrl}
      />
    </form>
  );
--- a/packages/surveys/src/components/elements/open-text-element.tsx
+++ b/packages/surveys/src/components/elements/open-text-element.tsx
@@ -129,6 +129,8 @@ export function OpenTextElement({
        errorMessage={errorMessage}
        dir={dir}
        rows={3}
+        imageUrl={element.imageUrl}
+        videoUrl={element.videoUrl}
      />
    </form>
  );
--- a/Show More
+++ b/Show More
Author	SHA1	Message	Date
Balázs Úr	ee449dbab2	fix: German translations	2025-12-22 16:32:31 +01:00
Anshuman Pandey	acd5cff534	feat: email package for client side email components (#6986 )	2025-12-22 14:13:06 +00:00
Matti Nannt	834929e766	feat: configure @formbricks/survey-ui for external publishing (#6991 )	2025-12-22 12:39:54 +00:00
Dhruwang Jariwala	09f40ad816	fix: required cta issue (#7022 )	2025-12-22 08:35:08 +00:00
Harsh Bhat	689b6491b3	docs: Link vs In app surveys (#7006 ) Co-authored-by: Johannes <johannes@formbricks.com>	2025-12-22 08:13:45 +00:00
Johannes	b70b2eef95	fix: vimeo + loom embed (#7018 ) Co-authored-by: Dhruwang <dhruwangjariwala18@gmail.com>	2025-12-20 08:08:48 +00:00
Harsh Bhat	392a95834b	docs: Best practices Panel Management (#7011 )	2025-12-20 06:32:57 +00:00
Anshuman Pandey	66d9cc8eac	chore: adds docs for min browser version support (#7014 )	2025-12-19 10:02:01 +00:00
Johannes	befdc078f1	fix: replace isomorphic-dompurify with sanitize-html in server component (#7002 )	2025-12-19 07:34:56 +00:00
Dhruwang Jariwala	13b983b3b2	fix: missing question media (#6997 ) Co-authored-by: Johannes <johannes@formbricks.com> Co-authored-by: pandeymangg <anshuman.pandey9999@gmail.com>	2025-12-19 07:29:06 +00:00
Harsh Bhat	1e285ebe4e	docs: Remove references of delay removal with debug mode (#7009 )	2025-12-19 07:03:02 +00:00
Dhruwang Jariwala	a7c4971952	fix: replaced bg-white with survey-bg color in surveys package (#7004 ) Co-authored-by: Luis Gustavo S. Barreto <gustavo@ossystems.com.br>	2025-12-19 06:50:33 +00:00
Dhruwang Jariwala	c8689d91d5	fix: empty button in cta question (#6995 )	2025-12-18 21:18:48 +00:00
Dhruwang Jariwala	73a2ff7421	fix: border radius for inputs (#6996 )	2025-12-18 20:56:47 +00:00
Dhruwang Jariwala	0c28e89b41	fix: missing required question warning (#6998 )	2025-12-18 19:12:47 +00:00
				`@@ -0,0 +1 @@`
				`export type TFunction = (key: string, replacements?: Record<string, string>) => string;`