removed duplicate name

- Remove 'fb-' prefix from Tailwind config in surveys package
- Update all TSX components to use standard Tailwind classes
- Update CSS files to remove fb- prefix from class names
- Update CSS variable references from --fb-* to --*
- Update test files to expect new variable names
- Update Storybook Tailwind config to include survey package content

This change simplifies development by using standard Tailwind classes
instead of prefixed ones, while maintaining style isolation through
the #fbjs container and important selector.

.github/workflows/formbricks-release.yml

@@ -89,7 +89,7 @@ jobs:
       - check-latest-release
     with:
       IS_PRERELEASE: ${{ github.event.release.prerelease }}
-      MAKE_LATEST: ${{ needs.check-latest-release.outputs.is_latest }}
+      MAKE_LATEST: ${{ needs.check-latest-release.outputs.is_latest == 'true' }}
 
   docker-build-cloud:
     name: Build & push Formbricks Cloud to ECR
@@ -101,7 +101,7 @@ jobs:
     with:
       image_tag: ${{ needs.docker-build-community.outputs.VERSION }}
       IS_PRERELEASE: ${{ github.event.release.prerelease }}
-      MAKE_LATEST: ${{ needs.check-latest-release.outputs.is_latest }}
+      MAKE_LATEST: ${{ needs.check-latest-release.outputs.is_latest == 'true' }}
     needs:
       - check-latest-release
       - docker-build-community
@@ -154,4 +154,4 @@ jobs:
       release_tag: ${{ github.event.release.tag_name }}
       commit_sha: ${{ github.sha }}
       is_prerelease: ${{ github.event.release.prerelease }}
-      make_latest: ${{ needs.check-latest-release.outputs.is_latest }}
+      make_latest: ${{ needs.check-latest-release.outputs.is_latest == 'true' }}

apps/storybook/tailwind.config.js

@@ -3,5 +3,10 @@ import base from "../web/tailwind.config";
 
 export default {
   ...base,
-  content: ["./index.html", "./src/**/*.{js,ts,jsx,tsx}", "../web/modules/ui/**/*.{js,ts,jsx,tsx}"],
+  content: [
+    "./index.html",
+    "./src/**/*.{js,ts,jsx,tsx}",
+    "../web/modules/ui/**/*.{js,ts,jsx,tsx}",
+    "../../packages/surveys/src/**/*.{js,ts,jsx,tsx}",
+  ],
 };

apps/web/Dockerfile

@@ -124,7 +124,7 @@ RUN chmod -R 755 ./node_modules/@noble/hashes
 COPY --from=installer /app/node_modules/zod ./node_modules/zod
 RUN chmod -R 755 ./node_modules/zod
 
-RUN npm install -g prisma
+RUN npm install -g prisma@6
 
 # Create a startup script to handle the conditional logic
 COPY --from=installer /app/apps/web/scripts/docker/next-start.sh /home/nextjs/start.sh

apps/web/app/(app)/environments/[environmentId]/surveys/[surveyId]/(analysis)/responses/components/ResponsePage.tsx

@@ -26,6 +26,7 @@ interface ResponsePageProps {
   isReadOnly: boolean;
   isQuotasAllowed: boolean;
   quotas: TSurveyQuota[];
+  initialResponses?: TResponseWithQuotas[];
 }
 
 export const ResponsePage = ({
@@ -39,11 +40,12 @@ export const ResponsePage = ({
   isReadOnly,
   isQuotasAllowed,
   quotas,
+  initialResponses = [],
 }: ResponsePageProps) => {
-  const [responses, setResponses] = useState<TResponseWithQuotas[]>([]);
-  const [page, setPage] = useState<number>(1);
-  const [hasMore, setHasMore] = useState<boolean>(true);
-  const [isFetchingFirstPage, setFetchingFirstPage] = useState<boolean>(true);
+  const [responses, setResponses] = useState<TResponseWithQuotas[]>(initialResponses);
+  const [page, setPage] = useState<number | null>(null);
+  const [hasMore, setHasMore] = useState<boolean>(initialResponses.length >= responsesPerPage);
+  const [isFetchingFirstPage, setIsFetchingFirstPage] = useState<boolean>(false);
   const { selectedFilter, dateRange, resetState } = useResponseFilter();
 
   const filters = useMemo(
@@ -56,6 +58,7 @@ export const ResponsePage = ({
   const searchParams = useSearchParams();
 
   const fetchNextPage = useCallback(async () => {
+    if (page === null) return;
     const newPage = page + 1;
 
     let newResponses: TResponseWithQuotas[] = [];
@@ -93,10 +96,22 @@ export const ResponsePage = ({
     }
   }, [searchParams, resetState]);
 
+  // Only fetch if filters are applied (not on initial mount with no filters)
+  const hasFilters =
+    selectedFilter?.responseStatus !== "all" ||
+    (selectedFilter?.filter && selectedFilter.filter.length > 0) ||
+    (dateRange.from && dateRange.to);
+
   useEffect(() => {
-    const fetchInitialResponses = async () => {
+    const fetchFilteredResponses = async () => {
       try {
-        setFetchingFirstPage(true);
+        // skip call for initial mount
+        if (page === null && !hasFilters) {
+          setPage(1);
+          return;
+        }
+        setPage(1);
+        setIsFetchingFirstPage(true);
         let responses: TResponseWithQuotas[] = [];
 
         const getResponsesActionResponse = await getResponsesAction({
@@ -110,19 +125,16 @@ export const ResponsePage = ({
 
         if (responses.length < responsesPerPage) {
           setHasMore(false);
+        } else {
+          setHasMore(true);
         }
         setResponses(responses);
       } finally {
-        setFetchingFirstPage(false);
+        setIsFetchingFirstPage(false);
       }
     };
-    fetchInitialResponses();
-  }, [surveyId, filters, responsesPerPage]);
-
-  useEffect(() => {
-    setPage(1);
-    setHasMore(true);
-  }, [filters]);
+    fetchFilteredResponses();
+  }, [filters, responsesPerPage, selectedFilter, dateRange, surveyId]);
 
   return (
     <>

apps/web/app/(app)/environments/[environmentId]/surveys/[surveyId]/(analysis)/responses/page.tsx

@@ -3,7 +3,7 @@ import { ResponsePage } from "@/app/(app)/environments/[environmentId]/surveys/[
 import { SurveyAnalysisCTA } from "@/app/(app)/environments/[environmentId]/surveys/[surveyId]/(analysis)/summary/components/SurveyAnalysisCTA";
 import { IS_FORMBRICKS_CLOUD, IS_STORAGE_CONFIGURED, RESPONSES_PER_PAGE } from "@/lib/constants";
 import { getPublicDomain } from "@/lib/getPublicUrl";
-import { getResponseCountBySurveyId } from "@/lib/response/service";
+import { getResponseCountBySurveyId, getResponses } from "@/lib/response/service";
 import { getSurvey } from "@/lib/survey/service";
 import { getTagsByEnvironmentId } from "@/lib/tag/service";
 import { getUser } from "@/lib/user/service";
@@ -56,6 +56,9 @@ const Page = async (props) => {
   const isQuotasAllowed = await getIsQuotasEnabled(organizationBilling.plan);
   const quotas = isQuotasAllowed ? await getQuotas(survey.id) : [];
 
+  // Fetch initial responses on the server to prevent duplicate client-side fetch
+  const initialResponses = await getResponses(params.surveyId, RESPONSES_PER_PAGE, 0);
+
   return (
     <PageContentWrapper>
       <PageHeader
@@ -87,6 +90,7 @@ const Page = async (props) => {
         isReadOnly={isReadOnly}
         isQuotasAllowed={isQuotasAllowed}
         quotas={quotas}
+        initialResponses={initialResponses}
       />
     </PageContentWrapper>
   );

apps/web/app/(app)/environments/[environmentId]/surveys/[surveyId]/components/QuestionFilterComboBox.tsx

@@ -4,7 +4,7 @@ import clsx from "clsx";
 import { ChevronDown, ChevronUp, X } from "lucide-react";
 import { useMemo, useRef, useState } from "react";
 import { useTranslation } from "react-i18next";
-import { TSurveyQuestionTypeEnum } from "@formbricks/types/surveys/types";
+import { TI18nString, TSurveyQuestionTypeEnum } from "@formbricks/types/surveys/types";
 import { OptionsType } from "@/app/(app)/environments/[environmentId]/surveys/[surveyId]/components/QuestionsComboBox";
 import { getLocalizedValue } from "@/lib/i18n/utils";
 import { useClickOutside } from "@/lib/utils/hooks/useClickOutside";
@@ -26,8 +26,8 @@ import {
 import { Input } from "@/modules/ui/components/input";
 
 type QuestionFilterComboBoxProps = {
-  filterOptions: string[] | undefined;
-  filterComboBoxOptions: string[] | undefined;
+  filterOptions: (string | TI18nString)[] | undefined;
+  filterComboBoxOptions: (string | TI18nString)[] | undefined;
   filterValue: string | undefined;
   filterComboBoxValue: string | string[] | undefined;
   onChangeFilterValue: (o: string) => void;
@@ -74,7 +74,7 @@ export const QuestionFilterComboBox = ({
     if (!isMultiple) return filterComboBoxOptions;
 
     return filterComboBoxOptions?.filter((o) => {
-      const optionValue = typeof o === "object" ? getLocalizedValue(o, defaultLanguageCode) : o;
+      const optionValue = typeof o === "object" && o !== null ? getLocalizedValue(o, defaultLanguageCode) : o;
       return !filterComboBoxValue?.includes(optionValue);
     });
   }, [isMultiple, filterComboBoxOptions, filterComboBoxValue, defaultLanguageCode]);
@@ -91,14 +91,15 @@ export const QuestionFilterComboBox = ({
   const filteredOptions = useMemo(
     () =>
       options?.filter((o) => {
-        const optionValue = typeof o === "object" ? getLocalizedValue(o, defaultLanguageCode) : o;
+        const optionValue =
+          typeof o === "object" && o !== null ? getLocalizedValue(o, defaultLanguageCode) : o;
         return optionValue.toLowerCase().includes(searchQuery.toLowerCase());
       }),
     [options, searchQuery, defaultLanguageCode]
   );
 
-  const handleCommandItemSelect = (o: string) => {
-    const value = typeof o === "object" ? getLocalizedValue(o, defaultLanguageCode) : o;
+  const handleCommandItemSelect = (o: string | TI18nString) => {
+    const value = typeof o === "object" && o !== null ? getLocalizedValue(o, defaultLanguageCode) : o;
 
     if (isMultiple) {
       const newValue = Array.isArray(filterComboBoxValue) ? [...filterComboBoxValue, value] : [value];
@@ -200,14 +201,18 @@ export const QuestionFilterComboBox = ({
             )}
           </DropdownMenuTrigger>
           <DropdownMenuContent className="bg-white">
-            {filterOptions?.map((o, index) => (
-              <DropdownMenuItem
-                key={`${o}-${index}`}
-                className="cursor-pointer"
-                onClick={() => onChangeFilterValue(o)}>
-                {o}
-              </DropdownMenuItem>
-            ))}
+            {filterOptions?.map((o, index) => {
+              const optionValue =
+                typeof o === "object" && o !== null ? getLocalizedValue(o, defaultLanguageCode) : o;
+              return (
+                <DropdownMenuItem
+                  key={`${optionValue}-${index}`}
+                  className="cursor-pointer"
+                  onClick={() => onChangeFilterValue(optionValue)}>
+                  {optionValue}
+                </DropdownMenuItem>
+              );
+            })}
           </DropdownMenuContent>
         </DropdownMenu>
       )}
@@ -269,7 +274,8 @@ export const QuestionFilterComboBox = ({
                 <CommandEmpty>{t("common.no_result_found")}</CommandEmpty>
                 <CommandGroup>
                   {filteredOptions?.map((o) => {
-                    const optionValue = typeof o === "object" ? getLocalizedValue(o, defaultLanguageCode) : o;
+                    const optionValue =
+                      typeof o === "object" && o !== null ? getLocalizedValue(o, defaultLanguageCode) : o;
                     return (
                       <CommandItem
                         key={optionValue}

apps/web/app/(app)/environments/[environmentId]/surveys/[surveyId]/components/ResponseFilter.tsx

@@ -4,7 +4,7 @@ import { useAutoAnimate } from "@formkit/auto-animate/react";
 import { ChevronDown, ChevronUp, Plus, TrashIcon } from "lucide-react";
 import React, { useEffect, useState } from "react";
 import { useTranslation } from "react-i18next";
-import { TSurvey, TSurveyQuestionTypeEnum } from "@formbricks/types/surveys/types";
+import { TI18nString, TSurvey, TSurveyQuestionTypeEnum } from "@formbricks/types/surveys/types";
 import {
   SelectedFilterValue,
   TResponseStatus,
@@ -13,6 +13,7 @@ import {
 import { getSurveyFilterDataAction } from "@/app/(app)/environments/[environmentId]/surveys/[surveyId]/actions";
 import { QuestionFilterComboBox } from "@/app/(app)/environments/[environmentId]/surveys/[surveyId]/components/QuestionFilterComboBox";
 import { generateQuestionAndFilterOptions } from "@/app/lib/surveys/surveys";
+import { getLocalizedValue } from "@/lib/i18n/utils";
 import { Button } from "@/modules/ui/components/button";
 import { Popover, PopoverContent, PopoverTrigger } from "@/modules/ui/components/popover";
 import {
@@ -25,9 +26,17 @@ import {
 import { OptionsType, QuestionOption, QuestionsComboBox } from "./QuestionsComboBox";
 
 export type QuestionFilterOptions = {
-  type: TSurveyQuestionTypeEnum | "Attributes" | "Tags" | "Languages" | "Quotas";
-  filterOptions: string[];
-  filterComboBoxOptions: string[];
+  type:
+    | TSurveyQuestionTypeEnum
+    | "Attributes"
+    | "Tags"
+    | "Languages"
+    | "Quotas"
+    | "Hidden Fields"
+    | "Meta"
+    | OptionsType.OTHERS;
+  filterOptions: (string | TI18nString)[];
+  filterComboBoxOptions: (string | TI18nString)[];
   id: string;
 };
 
@@ -69,6 +78,12 @@ export const ResponseFilter = ({ survey }: ResponseFilterProps) => {
   const [isOpen, setIsOpen] = useState<boolean>(false);
   const [filterValue, setFilterValue] = useState<SelectedFilterValue>(selectedFilter);
 
+  const getDefaultFilterValue = (option?: QuestionFilterOptions): string | undefined => {
+    if (!option || option.filterOptions.length === 0) return undefined;
+    const firstOption = option.filterOptions[0];
+    return typeof firstOption === "object" ? getLocalizedValue(firstOption, "default") : firstOption;
+  };
+
   useEffect(() => {
     // Fetch the initial data for the filter and load it into the state
     const handleInitialData = async () => {
@@ -94,15 +109,18 @@ export const ResponseFilter = ({ survey }: ResponseFilterProps) => {
   }, [isOpen, setSelectedOptions, survey]);
 
   const handleOnChangeQuestionComboBoxValue = (value: QuestionOption, index: number) => {
+    const matchingFilterOption = selectedOptions.questionFilterOptions.find(
+      (q) => q.type === value.type || q.type === value.questionType
+    );
+    const defaultFilterValue = getDefaultFilterValue(matchingFilterOption);
+
     if (filterValue.filter[index].questionType) {
       // Create a new array and copy existing values from SelectedFilter
       filterValue.filter[index] = {
         questionType: value,
         filterType: {
           filterComboBoxValue: undefined,
-          filterValue: selectedOptions.questionFilterOptions.find(
-            (q) => q.type === value.type || q.type === value.questionType
-          )?.filterOptions[0],
+          filterValue: defaultFilterValue,
         },
       };
       setFilterValue({ filter: [...filterValue.filter], responseStatus: filterValue.responseStatus });
@@ -111,9 +129,7 @@ export const ResponseFilter = ({ survey }: ResponseFilterProps) => {
       filterValue.filter[index].questionType = value;
       filterValue.filter[index].filterType = {
         filterComboBoxValue: undefined,
-        filterValue: selectedOptions.questionFilterOptions.find(
-          (q) => q.type === value.type || q.type === value.questionType
-        )?.filterOptions[0],
+        filterValue: defaultFilterValue,
       };
       setFilterValue({ ...filterValue });
     }

apps/web/app/lib/surveys/surveys.test.ts

@@ -213,8 +213,8 @@ describe("surveys", () => {
             id: "q8",
             type: TSurveyQuestionTypeEnum.Matrix,
             headline: { default: "Matrix" },
-            rows: [{ id: "r1", label: "Row 1" }],
-            columns: [{ id: "c1", label: "Column 1" }],
+            rows: [{ id: "r1", label: { default: "Row 1" } }],
+            columns: [{ id: "c1", label: { default: "Column 1" } }],
           } as unknown as TSurveyQuestion,
         ],
         createdAt: new Date(),

apps/web/app/lib/surveys/surveys.ts

@@ -76,9 +76,9 @@ export const generateQuestionAndFilterOptions = (
   questionFilterOptions: QuestionFilterOptions[];
 } => {
   let questionOptions: QuestionOptions[] = [];
-  let questionFilterOptions: any = [];
+  let questionFilterOptions: QuestionFilterOptions[] = [];
 
-  let questionsOptions: any = [];
+  let questionsOptions: QuestionOption[] = [];
 
   survey.questions.forEach((q) => {
     if (Object.keys(conditionOptions).includes(q.type)) {
@@ -121,8 +121,8 @@ export const generateQuestionAndFilterOptions = (
       } else if (q.type === TSurveyQuestionTypeEnum.Matrix) {
         questionFilterOptions.push({
           type: q.type,
-          filterOptions: q.rows.flatMap((row) => Object.values(row)),
-          filterComboBoxOptions: q.columns.flatMap((column) => Object.values(column)),
+          filterOptions: q.rows.map((row) => getLocalizedValue(row.label, "default")),
+          filterComboBoxOptions: q.columns.map((column) => getLocalizedValue(column.label, "default")),
           id: q.id,
         });
       } else {

apps/web/app/lib/templates.ts

@@ -1504,7 +1504,7 @@ const docsFeedback = (t: TFunction): TTemplate => {
         buildOpenTextQuestion({
           headline: t("templates.docs_feedback_question_2_headline"),
           required: false,
-          inputType: "text",
+          inputType: "url",
           t,
         }),
         buildOpenTextQuestion({

apps/web/i18n.lock

@@ -1252,7 +1252,7 @@ checksums:
     environments/surveys/edit/edit_link: 40ba9e15beac77a46c5baf30be84ac54
     environments/surveys/edit/edit_recall: 38a4a7378d02453e35d06f2532eef318
     environments/surveys/edit/edit_translations: 2b21bea4b53e88342559272701e9fbf3
-    environments/surveys/edit/enable_participants_to_switch_the_survey_language_at_any_point_during_the_survey: 71977f91ec151b61ee3528ac2618afed
+    environments/surveys/edit/enable_participants_to_switch_the_survey_language_at_any_point_during_the_survey: c70466147d49dcbb3686452f35c46428
     environments/surveys/edit/enable_recaptcha_to_protect_your_survey_from_spam: 4483a5763718d201ac97caa1e1216e13
     environments/surveys/edit/enable_spam_protection: e1fb0dd0723044bf040b92d8fc58015d
     environments/surveys/edit/end_screen_card: 6146c2bcb87291e25ecb03abd2d9a479

apps/web/locales/de-DE.json

@@ -1337,7 +1337,7 @@
         "edit_link": "Bearbeitungslink",
         "edit_recall": "Erinnerung bearbeiten",
         "edit_translations": "{lang} -Übersetzungen bearbeiten",
-        "enable_participants_to_switch_the_survey_language_at_any_point_during_the_survey": "Teilnehmer können die Umfragesprache jederzeit während der Umfrage ändern.",
+        "enable_participants_to_switch_the_survey_language_at_any_point_during_the_survey": "Befragten erlauben, die Sprache jederzeit zu wechseln. Benötigt mind. 2 aktive Sprachen.",
         "enable_recaptcha_to_protect_your_survey_from_spam": "Spamschutz verwendet reCAPTCHA v3, um Spam-Antworten herauszufiltern.",
         "enable_spam_protection": "Spamschutz",
         "end_screen_card": "Abschluss-Karte",

apps/web/locales/en-US.json

@@ -1337,7 +1337,7 @@
         "edit_link": "Edit link",
         "edit_recall": "Edit Recall",
         "edit_translations": "Edit {lang} translations",
-        "enable_participants_to_switch_the_survey_language_at_any_point_during_the_survey": "Enable participants to switch the survey language at any point during the survey.",
+        "enable_participants_to_switch_the_survey_language_at_any_point_during_the_survey": "Allow respondents to switch language at any time. Needs min. 2 active languages.",
         "enable_recaptcha_to_protect_your_survey_from_spam": "Spam protection uses reCAPTCHA v3 to filter out the spam responses.",
         "enable_spam_protection": "Spam protection",
         "end_screen_card": "End screen card",

apps/web/locales/fr-FR.json

@@ -1337,7 +1337,7 @@
         "edit_link": "Modifier le lien",
         "edit_recall": "Modifier le rappel",
         "edit_translations": "Modifier les traductions {lang}",
-        "enable_participants_to_switch_the_survey_language_at_any_point_during_the_survey": "Permettre aux participants de changer la langue de l'enquête à tout moment pendant celle-ci.",
+        "enable_participants_to_switch_the_survey_language_at_any_point_during_the_survey": "Permettre aux répondants de changer de langue à tout moment. Nécessite au moins 2 langues actives.",
         "enable_recaptcha_to_protect_your_survey_from_spam": "La protection contre le spam utilise reCAPTCHA v3 pour filtrer les réponses indésirables.",
         "enable_spam_protection": "Protection contre le spam",
         "end_screen_card": "Carte de fin d'écran",

apps/web/locales/ja-JP.json

@@ -1337,7 +1337,7 @@
         "edit_link": "編集 リンク",
         "edit_recall": "リコールを編集",
         "edit_translations": "{lang} 翻訳を編集",
-        "enable_participants_to_switch_the_survey_language_at_any_point_during_the_survey": "回答者がフォームの途中でいつでも言語を切り替えられるようにします。",
+        "enable_participants_to_switch_the_survey_language_at_any_point_during_the_survey": "回答者がいつでも言語を切り替えられるようにします。最低2つのアクティブな言語が必要です。",
         "enable_recaptcha_to_protect_your_survey_from_spam": "スパム対策はreCAPTCHA v3を使用してスパム回答をフィルタリングします。",
         "enable_spam_protection": "スパム対策",
         "end_screen_card": "終了画面カード",

apps/web/locales/nl-NL.json

@@ -1337,7 +1337,7 @@
         "edit_link": "Link bewerken",
         "edit_recall": "Bewerken Terugroepen",
         "edit_translations": "Bewerk {lang} vertalingen",
-        "enable_participants_to_switch_the_survey_language_at_any_point_during_the_survey": "Geef deelnemers de mogelijkheid om op elk moment tijdens de enquête van enquêtetaal te wisselen.",
+        "enable_participants_to_switch_the_survey_language_at_any_point_during_the_survey": "Sta respondenten toe om op elk moment van taal te wisselen. Vereist min. 2 actieve talen.",
         "enable_recaptcha_to_protect_your_survey_from_spam": "Spambeveiliging maakt gebruik van reCAPTCHA v3 om de spamreacties eruit te filteren.",
         "enable_spam_protection": "Spambescherming",
         "end_screen_card": "Eindschermkaart",

apps/web/locales/pt-BR.json

@@ -1337,7 +1337,7 @@
         "edit_link": "Editar link",
         "edit_recall": "Editar Lembrete",
         "edit_translations": "Editar traduções de {lang}",
-        "enable_participants_to_switch_the_survey_language_at_any_point_during_the_survey": "Permitir que os participantes mudem o idioma da pesquisa a qualquer momento durante a pesquisa.",
+        "enable_participants_to_switch_the_survey_language_at_any_point_during_the_survey": "Permitir que os respondentes alterem o idioma a qualquer momento. Necessita de no mínimo 2 idiomas ativos.",
         "enable_recaptcha_to_protect_your_survey_from_spam": "A proteção contra spam usa o reCAPTCHA v3 para filtrar as respostas de spam.",
         "enable_spam_protection": "Proteção contra spam",
         "end_screen_card": "cartão de tela final",

apps/web/locales/pt-PT.json

@@ -1337,7 +1337,7 @@
         "edit_link": "Editar link",
         "edit_recall": "Editar Lembrete",
         "edit_translations": "Editar traduções {lang}",
-        "enable_participants_to_switch_the_survey_language_at_any_point_during_the_survey": "Permitir aos participantes mudar a língua do inquérito a qualquer momento durante o inquérito.",
+        "enable_participants_to_switch_the_survey_language_at_any_point_during_the_survey": "Permitir que os inquiridos mudem de idioma a qualquer momento. Necessita de pelo menos 2 idiomas ativos.",
         "enable_recaptcha_to_protect_your_survey_from_spam": "A proteção contra spam usa o reCAPTCHA v3 para filtrar as respostas de spam.",
         "enable_spam_protection": "Proteção contra spam",
         "end_screen_card": "Cartão de ecrã final",

apps/web/locales/ro-RO.json

@@ -1337,7 +1337,7 @@
         "edit_link": "Editare legătură",
         "edit_recall": "Editează Referințele",
         "edit_translations": "Editează traducerile {lang}",
-        "enable_participants_to_switch_the_survey_language_at_any_point_during_the_survey": "Permite participanților să schimbe limba sondajului în orice moment în timpul sondajului.",
+        "enable_participants_to_switch_the_survey_language_at_any_point_during_the_survey": "Permite respondenților să schimbe limba în orice moment. Necesită minimum 2 limbi active.",
         "enable_recaptcha_to_protect_your_survey_from_spam": "Protecția împotriva spamului folosește reCAPTCHA v3 pentru a filtra răspunsurile de spam.",
         "enable_spam_protection": "Protecția împotriva spamului",
         "end_screen_card": "Ecran final card",

apps/web/locales/zh-Hans-CN.json

@@ -1337,7 +1337,7 @@
         "edit_link": "编辑 链接",
         "edit_recall": "编辑 调用",
         "edit_translations": "编辑 {lang} 翻译",
-        "enable_participants_to_switch_the_survey_language_at_any_point_during_the_survey": "启用 参与者 在 调查 过程中 的 任何 时间 点 切换 调查 语言。",
+        "enable_participants_to_switch_the_survey_language_at_any_point_during_the_survey": "允许受访者在调查过程中随时切换语言。需要至少启用两种语言。",
         "enable_recaptcha_to_protect_your_survey_from_spam": "垃圾 邮件 保护 使用 reCAPTCHA v3 来 过滤 掉 垃圾 响应 。",
         "enable_spam_protection": "垃圾 邮件 保护",
         "end_screen_card": "结束 屏幕 卡片",

apps/web/locales/zh-Hant-TW.json

@@ -1337,7 +1337,7 @@
         "edit_link": "編輯 連結",
         "edit_recall": "編輯回憶",
         "edit_translations": "編輯 '{'language'}' 翻譯",
-        "enable_participants_to_switch_the_survey_language_at_any_point_during_the_survey": "允許參與者在問卷中的任何時間點切換問卷語言。",
+        "enable_participants_to_switch_the_survey_language_at_any_point_during_the_survey": "允許受訪者隨時切換語言。需要至少啟用兩種語言。",
         "enable_recaptcha_to_protect_your_survey_from_spam": "垃圾郵件保護使用 reCAPTCHA v3 過濾垃圾回應。",
         "enable_spam_protection": "垃圾郵件保護",
         "end_screen_card": "結束畫面卡片",

apps/web/modules/ee/multi-language-surveys/components/multi-language-card.tsx

@@ -11,7 +11,7 @@ import { useTranslation } from "react-i18next";
 import type { TSurvey, TSurveyLanguage, TSurveyQuestionId } from "@formbricks/types/surveys/types";
 import { TUserLocale } from "@formbricks/types/user";
 import { cn } from "@/lib/cn";
-import { addMultiLanguageLabels, extractLanguageCodes } from "@/lib/i18n/utils";
+import { addMultiLanguageLabels, extractLanguageCodes, getEnabledLanguages } from "@/lib/i18n/utils";
 import { AdvancedOptionToggle } from "@/modules/ui/components/advanced-option-toggle";
 import { Button } from "@/modules/ui/components/button";
 import { ConfirmationModal } from "@/modules/ui/components/confirmation-modal";
@@ -177,6 +177,8 @@ export const MultiLanguageCard: FC<MultiLanguageCardProps> = ({
 
   const [parent] = useAutoAnimate();
 
+  const enabledLanguages = getEnabledLanguages(localSurvey.languages);
+
   return (
     <div
       className={cn(
@@ -300,6 +302,7 @@ export const MultiLanguageCard: FC<MultiLanguageCardProps> = ({
                   <AdvancedOptionToggle
                     customContainerClass="px-0 pt-0"
                     htmlId="languageSwitch"
+                    disabled={enabledLanguages.length <= 1}
                     isChecked={!!localSurvey.showLanguageSwitch}
                     onToggle={handleLanguageSwitchToggle}
                     title={t("environments.surveys.edit.show_language_switch")}

apps/web/modules/survey/hooks/useSingleUseId.tsx

@@ -1,4 +1,4 @@
-import { useCallback, useEffect, useState } from "react";
+import { useCallback, useState } from "react";
 import toast from "react-hot-toast";
 import type { TSurvey } from "@formbricks/types/surveys/types";
 import { getFormattedErrorMessage } from "@/lib/utils/helper";
@@ -30,10 +30,6 @@ export const useSingleUseId = (survey: TSurvey | TSurveyList, isReadOnly: boolea
     }
   }, [survey, isReadOnly]);
 
-  useEffect(() => {
-    refreshSingleUseId();
-  }, [refreshSingleUseId]);
-
   return {
     singleUseId: isReadOnly ? undefined : singleUseId,
     refreshSingleUseId: isReadOnly ? async () => undefined : refreshSingleUseId,

apps/web/modules/survey/lib/survey.ts

@@ -45,11 +45,11 @@ export const selectSurvey = {
       language: {
         select: {
           id: true,
-          code: true,
-          alias: true,
           createdAt: true,
           updatedAt: true,
+          code: true,
           projectId: true,
+          alias: true,
         },
       },
     },
@@ -72,7 +72,15 @@ export const selectSurvey = {
     },
   },
   segment: {
-    include: {
+    select: {
+      id: true,
+      createdAt: true,
+      updatedAt: true,
+      environmentId: true,
+      title: true,
+      description: true,
+      isPrivate: true,
+      filters: true,
       surveys: {
         select: {
           id: true,

apps/web/modules/survey/link/components/pin-screen.tsx

@@ -3,17 +3,17 @@
 import { Project, Response } from "@prisma/client";
 import { useCallback, useEffect, useState } from "react";
 import { useTranslation } from "react-i18next";
-import { TSurvey } from "@formbricks/types/surveys/types";
+import { TProjectStyling } from "@formbricks/types/project";
+import { TSurvey, TSurveyStyling } from "@formbricks/types/surveys/types";
 import { cn } from "@/lib/cn";
 import { getFormattedErrorMessage } from "@/lib/utils/helper";
 import { validateSurveyPinAction } from "@/modules/survey/link/actions";
-import { LinkSurvey } from "@/modules/survey/link/components/link-survey";
+import { SurveyClientWrapper } from "@/modules/survey/link/components/survey-client-wrapper";
 import { OTPInput } from "@/modules/ui/components/otp-input";
 
 interface PinScreenProps {
   surveyId: string;
   project: Pick<Project, "styling" | "logo" | "linkSurveyBranding">;
-  emailVerificationStatus?: string;
   singleUseId?: string;
   singleUseResponse?: Pick<Response, "id" | "finished">;
   publicDomain: string;
@@ -23,11 +23,12 @@ interface PinScreenProps {
   verifiedEmail?: string;
   languageCode: string;
   isEmbed: boolean;
-  locale: string;
   isPreview: boolean;
   contactId?: string;
   recaptchaSiteKey?: string;
   isSpamProtectionEnabled?: boolean;
+  responseCount?: number;
+  styling: TProjectStyling | TSurveyStyling;
 }
 
 export const PinScreen = (props: PinScreenProps) => {
@@ -35,7 +36,6 @@ export const PinScreen = (props: PinScreenProps) => {
     surveyId,
     project,
     publicDomain,
-    emailVerificationStatus,
     singleUseId,
     singleUseResponse,
     IMPRINT_URL,
@@ -44,11 +44,12 @@ export const PinScreen = (props: PinScreenProps) => {
     verifiedEmail,
     languageCode,
     isEmbed,
-    locale,
     isPreview,
     contactId,
     recaptchaSiteKey,
     isSpamProtectionEnabled = false,
+    responseCount,
+    styling,
   } = props;
 
   const [localPinEntry, setLocalPinEntry] = useState<string>("");
@@ -116,24 +117,24 @@ export const PinScreen = (props: PinScreenProps) => {
   }
 
   return (
-    <LinkSurvey
+    <SurveyClientWrapper
       survey={survey}
       project={project}
-      emailVerificationStatus={emailVerificationStatus}
-      singleUseId={singleUseId}
-      singleUseResponse={singleUseResponse}
+      styling={styling}
       publicDomain={publicDomain}
-      verifiedEmail={verifiedEmail}
+      responseCount={responseCount}
       languageCode={languageCode}
       isEmbed={isEmbed}
-      IMPRINT_URL={IMPRINT_URL}
-      PRIVACY_URL={PRIVACY_URL}
-      IS_FORMBRICKS_CLOUD={IS_FORMBRICKS_CLOUD}
-      locale={locale}
-      isPreview={isPreview}
+      singleUseId={singleUseId}
+      singleUseResponseId={singleUseResponse?.id}
       contactId={contactId}
       recaptchaSiteKey={recaptchaSiteKey}
       isSpamProtectionEnabled={isSpamProtectionEnabled}
+      isPreview={isPreview}
+      verifiedEmail={verifiedEmail}
+      IMPRINT_URL={IMPRINT_URL}
+      PRIVACY_URL={PRIVACY_URL}
+      IS_FORMBRICKS_CLOUD={IS_FORMBRICKS_CLOUD}
     />
   );
 };

apps/web/modules/survey/link/components/survey-client-wrapper.tsx

@@ -1,160 +1,110 @@
 "use client";
 
-import { Project, Response } from "@prisma/client";
+import { Project } from "@prisma/client";
 import { useSearchParams } from "next/navigation";
 import { useEffect, useMemo, useState } from "react";
-import { TResponseData, TResponseHiddenFieldValue } from "@formbricks/types/responses";
-import { TSurvey } from "@formbricks/types/surveys/types";
+import { TProjectStyling } from "@formbricks/types/project";
+import { TResponseData } from "@formbricks/types/responses";
+import { TSurvey, TSurveyStyling } from "@formbricks/types/surveys/types";
 import { LinkSurveyWrapper } from "@/modules/survey/link/components/link-survey-wrapper";
-import { SurveyLinkUsed } from "@/modules/survey/link/components/survey-link-used";
-import { VerifyEmail } from "@/modules/survey/link/components/verify-email";
 import { getPrefillValue } from "@/modules/survey/link/lib/utils";
 import { SurveyInline } from "@/modules/ui/components/survey";
 
-let setQuestionId = (_: string) => {};
-let setResponseData = (_: TResponseData) => {};
-
-interface LinkSurveyProps {
+interface SurveyClientWrapperProps {
   survey: TSurvey;
   project: Pick<Project, "styling" | "logo" | "linkSurveyBranding">;
-  emailVerificationStatus?: string;
-  singleUseId?: string;
-  singleUseResponse?: Pick<Response, "id" | "finished">;
+  styling: TProjectStyling | TSurveyStyling;
   publicDomain: string;
   responseCount?: number;
-  verifiedEmail?: string;
   languageCode: string;
   isEmbed: boolean;
+  singleUseId?: string;
+  singleUseResponseId?: string;
+  contactId?: string;
+  recaptchaSiteKey?: string;
+  isSpamProtectionEnabled: boolean;
+  isPreview: boolean;
+  verifiedEmail?: string;
   IMPRINT_URL?: string;
   PRIVACY_URL?: string;
   IS_FORMBRICKS_CLOUD: boolean;
-  locale: string;
-  isPreview: boolean;
-  contactId?: string;
-  recaptchaSiteKey?: string;
-  isSpamProtectionEnabled?: boolean;
 }
 
-export const LinkSurvey = ({
+// Module-level functions to allow SurveyInline to control survey state
+let setQuestionId = (_: string) => {};
+let setResponseData = (_: TResponseData) => {};
+
+export const SurveyClientWrapper = ({
   survey,
   project,
-  emailVerificationStatus,
-  singleUseId,
-  singleUseResponse,
+  styling,
   publicDomain,
   responseCount,
-  verifiedEmail,
   languageCode,
   isEmbed,
+  singleUseId,
+  singleUseResponseId,
+  contactId,
+  recaptchaSiteKey,
+  isSpamProtectionEnabled,
+  isPreview,
+  verifiedEmail,
   IMPRINT_URL,
   PRIVACY_URL,
   IS_FORMBRICKS_CLOUD,
-  locale,
-  isPreview,
-  contactId,
-  recaptchaSiteKey,
-  isSpamProtectionEnabled = false,
-}: LinkSurveyProps) => {
-  const responseId = singleUseResponse?.id;
+}: SurveyClientWrapperProps) => {
   const searchParams = useSearchParams();
   const skipPrefilled = searchParams.get("skipPrefilled") === "true";
-  const suId = searchParams.get("suId");
-
   const startAt = searchParams.get("startAt");
+
+  // Extract survey properties outside useMemo to create stable references
+  const welcomeCardEnabled = survey.welcomeCard.enabled;
+  const surveyQuestions = survey.questions;
+
+  // Validate startAt parameter against survey questions
   const isStartAtValid = useMemo(() => {
     if (!startAt) return false;
-    if (survey.welcomeCard.enabled && startAt === "start") return true;
+    if (welcomeCardEnabled && startAt === "start") return true;
+    const isValid = surveyQuestions.some((q) => q.id === startAt);
 
-    const isValid = survey.questions.some((question) => question.id === startAt);
-
-    // To remove startAt query param from URL if it is not valid:
-    if (!isValid && typeof window !== "undefined") {
-      const url = new URL(window.location.href);
+    // Clean up invalid startAt from URL to prevent confusion
+    if (!isValid && globalThis.window !== undefined) {
+      const url = new URL(globalThis.location.href);
       url.searchParams.delete("startAt");
-      window.history.replaceState({}, "", url.toString());
+      globalThis.history.replaceState({}, "", url.toString());
     }
 
     return isValid;
-  }, [survey, startAt]);
+  }, [welcomeCardEnabled, surveyQuestions, startAt]);
 
   const prefillValue = getPrefillValue(survey, searchParams, languageCode);
-
   const [autoFocus, setAutoFocus] = useState(false);
-  const hasFinishedSingleUseResponse = useMemo(() => {
-    if (singleUseResponse?.finished) {
-      return true;
-    }
-    return false;
-    // eslint-disable-next-line react-hooks/exhaustive-deps -- only run once
-  }, []);
 
-  // Not in an iframe, enable autofocus on input fields.
+  // Enable autofocus only when not in iframe
   useEffect(() => {
-    if (window.self === window.top) {
+    if (globalThis.self === globalThis.top) {
       setAutoFocus(true);
     }
-    // eslint-disable-next-line react-hooks/exhaustive-deps -- only run once
   }, []);
 
-  const hiddenFieldsRecord = useMemo<TResponseHiddenFieldValue>(() => {
-    const fieldsRecord: TResponseHiddenFieldValue = {};
-
-    survey.hiddenFields.fieldIds?.forEach((field) => {
+  // Extract hidden fields from URL parameters
+  const hiddenFieldsRecord = useMemo(() => {
+    const fieldsRecord: Record<string, string> = {};
+    for (const field of survey.hiddenFields.fieldIds || []) {
       const answer = searchParams.get(field);
-      if (answer) {
-        fieldsRecord[field] = answer;
-      }
-    });
-
+      if (answer) fieldsRecord[field] = answer;
+    }
     return fieldsRecord;
-  }, [searchParams, survey.hiddenFields.fieldIds]);
+  }, [searchParams, JSON.stringify(survey.hiddenFields.fieldIds || [])]);
 
+  // Include verified email in hidden fields if available
   const getVerifiedEmail = useMemo<Record<string, string> | null>(() => {
     if (survey.isVerifyEmailEnabled && verifiedEmail) {
       return { verifiedEmail: verifiedEmail };
-    } else {
-      return null;
     }
+    return null;
   }, [survey.isVerifyEmailEnabled, verifiedEmail]);
 
-  if (hasFinishedSingleUseResponse) {
-    return <SurveyLinkUsed singleUseMessage={survey.singleUse} project={project} />;
-  }
-
-  if (survey.isVerifyEmailEnabled && emailVerificationStatus !== "verified" && !isPreview) {
-    if (emailVerificationStatus === "fishy") {
-      return (
-        <VerifyEmail
-          survey={survey}
-          isErrorComponent={true}
-          languageCode={languageCode}
-          styling={project.styling}
-          locale={locale}
-        />
-      );
-    }
-    //emailVerificationStatus === "not-verified"
-    return (
-      <VerifyEmail
-        singleUseId={suId ?? ""}
-        survey={survey}
-        languageCode={languageCode}
-        styling={project.styling}
-        locale={locale}
-      />
-    );
-  }
-
-  const determineStyling = () => {
-    // Check if style overwrite is disabled at the project level
-    if (!project.styling.allowStyleOverwrite) {
-      return project.styling;
-    }
-
-    // Return survey styling if survey overwrites are enabled, otherwise return project styling
-    return survey.styling?.overwriteThemeStyling ? survey.styling : project.styling;
-  };
-
   const handleResetSurvey = () => {
     setQuestionId(survey.welcomeCard.enabled ? "start" : survey.questions[0].id);
     setResponseData({});
@@ -167,8 +117,8 @@ export const LinkSurvey = ({
       isWelcomeCardEnabled={survey.welcomeCard.enabled}
       isPreview={isPreview}
       surveyType={survey.type}
+      determineStyling={() => styling}
       handleResetSurvey={handleResetSurvey}
-      determineStyling={determineStyling}
       isEmbed={isEmbed}
       publicDomain={publicDomain}
       IS_FORMBRICKS_CLOUD={IS_FORMBRICKS_CLOUD}
@@ -180,11 +130,10 @@ export const LinkSurvey = ({
         environmentId={survey.environmentId}
         isPreviewMode={isPreview}
         survey={survey}
-        styling={determineStyling()}
+        styling={styling}
         languageCode={languageCode}
         isBrandingEnabled={project.linkSurveyBranding}
         shouldResetQuestionId={false}
-        // eslint-disable-next-line jsx-a11y/no-autofocus -- need it as focus behaviour is different in normal surveys and survey preview
         autoFocus={autoFocus}
         prefillResponseData={prefillValue}
         skipPrefilled={skipPrefilled}
@@ -202,7 +151,7 @@ export const LinkSurvey = ({
           ...getVerifiedEmail,
         }}
         singleUseId={singleUseId}
-        singleUseResponseId={responseId}
+        singleUseResponseId={singleUseResponseId}
         getSetIsResponseSendingFinished={(_f: (value: boolean) => void) => {}}
         contactId={contactId}
         recaptchaSiteKey={recaptchaSiteKey}

apps/web/modules/survey/link/components/survey-completed-message.tsx

@@ -1,22 +1,21 @@
-"use client";
-
 import { Project } from "@prisma/client";
 import { CheckCircle2Icon } from "lucide-react";
 import Image from "next/image";
 import Link from "next/link";
-import { useTranslation } from "react-i18next";
 import { TSurveySingleUse } from "@formbricks/types/surveys/types";
+import { getTranslate } from "@/lingodotdev/server";
 import footerLogo from "../lib/footerlogo.svg";
 
-interface SurveyLinkUsedProps {
+interface SurveyCompletedMessageProps {
   singleUseMessage: TSurveySingleUse | null;
   project?: Pick<Project, "linkSurveyBranding">;
 }
 
-export const SurveyLinkUsed = ({ singleUseMessage, project }: SurveyLinkUsedProps) => {
-  const { t } = useTranslation();
+export const SurveyCompletedMessage = async ({ singleUseMessage, project }: SurveyCompletedMessageProps) => {
+  const t = await getTranslate();
   const defaultHeading = t("s.survey_already_answered_heading");
   const defaultSubheading = t("s.survey_already_answered_subheading");
+
   return (
     <div className="flex min-h-screen flex-col items-center justify-between bg-gradient-to-tr from-slate-200 to-slate-50 py-8 text-center">
       <div className="my-auto flex flex-col items-center space-y-3 text-slate-300">

apps/web/modules/survey/link/components/survey-renderer.tsx

@@ -1,6 +1,8 @@
 import { type Response } from "@prisma/client";
 import { notFound } from "next/navigation";
-import { TSurvey } from "@formbricks/types/surveys/types";
+import { TProjectStyling } from "@formbricks/types/project";
+import { TSurvey, TSurveyStyling } from "@formbricks/types/surveys/types";
+import { TUserLocale } from "@formbricks/types/user";
 import {
   IMPRINT_URL,
   IS_FORMBRICKS_CLOUD,
@@ -9,16 +11,13 @@ import {
   RECAPTCHA_SITE_KEY,
 } from "@/lib/constants";
 import { getPublicDomain } from "@/lib/getPublicUrl";
-import { findMatchingLocale } from "@/lib/utils/locale";
-import { getMultiLanguagePermission } from "@/modules/ee/license-check/lib/utils";
-import { getOrganizationIdFromEnvironmentId } from "@/modules/survey/lib/organization";
-import { getResponseCountBySurveyId } from "@/modules/survey/lib/response";
-import { getOrganizationBilling } from "@/modules/survey/lib/survey";
-import { LinkSurvey } from "@/modules/survey/link/components/link-survey";
 import { PinScreen } from "@/modules/survey/link/components/pin-screen";
+import { SurveyClientWrapper } from "@/modules/survey/link/components/survey-client-wrapper";
+import { SurveyCompletedMessage } from "@/modules/survey/link/components/survey-completed-message";
 import { SurveyInactive } from "@/modules/survey/link/components/survey-inactive";
+import { VerifyEmail } from "@/modules/survey/link/components/verify-email";
+import { TEnvironmentContextForLinkSurvey } from "@/modules/survey/link/lib/environment";
 import { getEmailVerificationDetails } from "@/modules/survey/link/lib/helper";
-import { getProjectByEnvironmentId } from "@/modules/survey/link/lib/project";
 
 interface SurveyRendererProps {
   survey: TSurvey;
@@ -27,13 +26,31 @@ interface SurveyRendererProps {
     lang?: string;
     embed?: string;
     preview?: string;
+    suId?: string;
   };
   singleUseId?: string;
-  singleUseResponse?: Pick<Response, "id" | "finished"> | undefined;
+  singleUseResponse?: Pick<Response, "id" | "finished">;
   contactId?: string;
   isPreview: boolean;
+  // New props - pre-fetched in parent
+  environmentContext: TEnvironmentContextForLinkSurvey;
+  locale: TUserLocale;
+  isMultiLanguageAllowed: boolean;
+  responseCount?: number;
 }
 
+/**
+ * Renders link survey with pre-fetched data from parent.
+ *
+ * This function receives all necessary data as props to avoid additional
+ * database queries. The parent (page.tsx) fetches data in parallel stages
+ * to minimize latency for users geographically distant from servers.
+ *
+ * @param environmentContext - Pre-fetched project and organization data
+ * @param locale - User's locale from Accept-Language header
+ * @param isMultiLanguageAllowed - Calculated from organization billing plan
+ * @param responseCount - Conditionally fetched if showResponseCount is enabled
+ */
 export const renderSurvey = async ({
   survey,
   searchParams,
@@ -41,8 +58,11 @@ export const renderSurvey = async ({
   singleUseResponse,
   contactId,
   isPreview,
+  environmentContext,
+  locale,
+  isMultiLanguageAllowed,
+  responseCount,
 }: SurveyRendererProps) => {
-  const locale = await findMatchingLocale();
   const langParam = searchParams.lang;
   const isEmbed = searchParams.embed === "true";
 
@@ -50,27 +70,27 @@ export const renderSurvey = async ({
     notFound();
   }
 
-  const organizationId = await getOrganizationIdFromEnvironmentId(survey.environmentId);
-  const organizationBilling = await getOrganizationBilling(organizationId);
-  if (!organizationBilling) {
-    throw new Error("Organization not found");
-  }
-  const isMultiLanguageAllowed = await getMultiLanguagePermission(organizationBilling.plan);
+  // Extract project from pre-fetched context
+  const { project } = environmentContext;
 
   const isSpamProtectionEnabled = Boolean(IS_RECAPTCHA_CONFIGURED && survey.recaptcha?.enabled);
 
   if (survey.status !== "inProgress") {
-    const project = await getProjectByEnvironmentId(survey.environmentId);
     return (
       <SurveyInactive
         status={survey.status}
         surveyClosedMessage={survey.surveyClosedMessage}
-        project={project || undefined}
+        project={project}
       />
     );
   }
 
-  // verify email: Check if the survey requires email verification
+  // Check if single-use survey has already been completed
+  if (singleUseResponse?.finished) {
+    return <SurveyCompletedMessage singleUseMessage={survey.singleUse} project={project} />;
+  }
+
+  // Handle email verification flow if enabled
   let emailVerificationStatus = "";
   let verifiedEmail: string | undefined = undefined;
 
@@ -84,40 +104,42 @@ export const renderSurvey = async ({
     }
   }
 
-  // get project
-  const project = await getProjectByEnvironmentId(survey.environmentId);
-  if (!project) {
-    throw new Error("Project not found");
+  if (survey.isVerifyEmailEnabled && emailVerificationStatus !== "verified" && !isPreview) {
+    if (emailVerificationStatus === "fishy") {
+      return (
+        <VerifyEmail
+          survey={survey}
+          isErrorComponent={true}
+          languageCode={getLanguageCode(langParam, isMultiLanguageAllowed, survey)}
+          styling={project.styling}
+          locale={locale}
+        />
+      );
+    }
+    return (
+      <VerifyEmail
+        singleUseId={searchParams.suId ?? ""}
+        survey={survey}
+        languageCode={getLanguageCode(langParam, isMultiLanguageAllowed, survey)}
+        styling={project.styling}
+        locale={locale}
+      />
+    );
   }
 
-  const getLanguageCode = (): string => {
-    if (!langParam || !isMultiLanguageAllowed) return "default";
-    else {
-      const selectedLanguage = survey.languages.find((surveyLanguage) => {
-        return (
-          surveyLanguage.language.code === langParam.toLowerCase() ||
-          surveyLanguage.language.alias?.toLowerCase() === langParam.toLowerCase()
-        );
-      });
-      if (!selectedLanguage || selectedLanguage?.default || !selectedLanguage?.enabled) {
-        return "default";
-      }
-      return selectedLanguage.language.code;
-    }
-  };
-
-  const languageCode = getLanguageCode();
-  const isSurveyPinProtected = Boolean(survey.pin);
-  const responseCount = await getResponseCountBySurveyId(survey.id);
+  // Compute final styling based on project and survey settings
+  const styling = computeStyling(project.styling, survey.styling);
+  const languageCode = getLanguageCode(langParam, isMultiLanguageAllowed, survey);
   const publicDomain = getPublicDomain();
 
-  if (isSurveyPinProtected) {
+  // Handle PIN-protected surveys
+  if (survey.pin) {
     return (
       <PinScreen
         surveyId={survey.id}
+        styling={styling}
         publicDomain={publicDomain}
         project={project}
-        emailVerificationStatus={emailVerificationStatus}
         singleUseId={singleUseId}
         singleUseResponse={singleUseResponse}
         IMPRINT_URL={IMPRINT_URL}
@@ -126,35 +148,74 @@ export const renderSurvey = async ({
         verifiedEmail={verifiedEmail}
         languageCode={languageCode}
         isEmbed={isEmbed}
-        locale={locale}
         isPreview={isPreview}
         contactId={contactId}
         recaptchaSiteKey={RECAPTCHA_SITE_KEY}
         isSpamProtectionEnabled={isSpamProtectionEnabled}
+        responseCount={responseCount}
       />
     );
   }
 
+  // Render interactive survey with client component for interactivity
   return (
-    <LinkSurvey
+    <SurveyClientWrapper
       survey={survey}
       project={project}
+      styling={styling}
       publicDomain={publicDomain}
-      emailVerificationStatus={emailVerificationStatus}
-      singleUseId={singleUseId}
-      singleUseResponse={singleUseResponse}
-      responseCount={survey.welcomeCard.showResponseCount ? responseCount : undefined}
-      verifiedEmail={verifiedEmail}
+      responseCount={responseCount}
       languageCode={languageCode}
       isEmbed={isEmbed}
-      IMPRINT_URL={IMPRINT_URL}
-      PRIVACY_URL={PRIVACY_URL}
-      IS_FORMBRICKS_CLOUD={IS_FORMBRICKS_CLOUD}
-      locale={locale}
-      isPreview={isPreview}
+      singleUseId={singleUseId}
+      singleUseResponseId={singleUseResponse?.id}
       contactId={contactId}
       recaptchaSiteKey={RECAPTCHA_SITE_KEY}
       isSpamProtectionEnabled={isSpamProtectionEnabled}
+      isPreview={isPreview}
+      verifiedEmail={verifiedEmail}
+      IMPRINT_URL={IMPRINT_URL}
+      PRIVACY_URL={PRIVACY_URL}
+      IS_FORMBRICKS_CLOUD={IS_FORMBRICKS_CLOUD}
     />
   );
 };
+
+/**
+ * Determines which styling to use based on project and survey settings.
+ * Returns survey styling if theme overwriting is enabled, otherwise returns project styling.
+ */
+function computeStyling(
+  projectStyling: TProjectStyling,
+  surveyStyling?: TSurveyStyling | null
+): TProjectStyling | TSurveyStyling {
+  if (!projectStyling.allowStyleOverwrite) {
+    return projectStyling;
+  }
+  return surveyStyling?.overwriteThemeStyling ? surveyStyling : projectStyling;
+}
+
+/**
+ * Determines the language code to use for the survey.
+ * Checks URL parameter against available survey languages and returns
+ * "default" if multi-language is not allowed or language is not found.
+ */
+function getLanguageCode(
+  langParam: string | undefined,
+  isMultiLanguageAllowed: boolean,
+  survey: TSurvey
+): string {
+  if (!langParam || !isMultiLanguageAllowed) return "default";
+
+  const selectedLanguage = survey.languages.find((surveyLanguage) => {
+    return (
+      surveyLanguage.language.code === langParam.toLowerCase() ||
+      surveyLanguage.language.alias?.toLowerCase() === langParam.toLowerCase()
+    );
+  });
+
+  if (!selectedLanguage || selectedLanguage?.default || !selectedLanguage?.enabled) {
+    return "default";
+  }
+  return selectedLanguage.language.code;
+}

apps/web/modules/survey/link/contact-survey/page.tsx

@@ -1,11 +1,15 @@
 import type { Metadata } from "next";
 import { notFound } from "next/navigation";
+import { findMatchingLocale } from "@/lib/utils/locale";
 import { getTranslate } from "@/lingodotdev/server";
 import { verifyContactSurveyToken } from "@/modules/ee/contacts/lib/contact-survey-link";
+import { getMultiLanguagePermission } from "@/modules/ee/license-check/lib/utils";
+import { getResponseCountBySurveyId } from "@/modules/survey/lib/response";
 import { getSurvey } from "@/modules/survey/lib/survey";
 import { SurveyInactive } from "@/modules/survey/link/components/survey-inactive";
 import { renderSurvey } from "@/modules/survey/link/components/survey-renderer";
 import { getExistingContactResponse } from "@/modules/survey/link/lib/data";
+import { getEnvironmentContextForLinkSurvey } from "@/modules/survey/link/lib/environment";
 import { checkAndValidateSingleUseId } from "@/modules/survey/link/lib/helper";
 import { getBasicSurveyMetadata } from "@/modules/survey/link/lib/metadata-utils";
 import { getProjectByEnvironmentId } from "@/modules/survey/link/lib/project";
@@ -93,18 +97,41 @@ export const ContactSurveyPage = async (props: ContactSurveyPageProps) => {
   if (isSingleUseSurvey) {
     const validatedSingleUseId = checkAndValidateSingleUseId(suId, isSingleUseSurveyEncrypted);
     if (!validatedSingleUseId) {
-      const project = await getProjectByEnvironmentId(survey.environmentId);
-      return <SurveyInactive status="link invalid" project={project ?? undefined} />;
+      const environmentContext = await getEnvironmentContextForLinkSurvey(survey.environmentId);
+      return <SurveyInactive status="link invalid" project={environmentContext.project} />;
     }
 
     singleUseId = validatedSingleUseId;
   }
 
+  // Parallel fetch of environment context and locale
+  const [environmentContext, locale, singleUseResponse] = await Promise.all([
+    getEnvironmentContextForLinkSurvey(survey.environmentId),
+    findMatchingLocale(),
+    // Fetch existing response for this contact
+    getExistingContactResponse(survey.id, contactId)(),
+  ]);
+
+  // Get multi-language permission
+  const isMultiLanguageAllowed = await getMultiLanguagePermission(
+    environmentContext.organizationBilling.plan
+  );
+
+  // Fetch responseCount only if needed
+  const responseCount = survey.welcomeCard.showResponseCount
+    ? await getResponseCountBySurveyId(survey.id)
+    : undefined;
+
   return renderSurvey({
     survey,
     searchParams,
     contactId,
     isPreview,
     singleUseId,
+    singleUseResponse,
+    environmentContext,
+    locale,
+    isMultiLanguageAllowed,
+    responseCount,
   });
 };

apps/web/modules/survey/link/lib/data.test.ts

@@ -398,7 +398,7 @@ describe("data", () => {
       });
     });
 
-    test("should return null when contact response not found", async () => {
+    test("should return undefined when contact response not found", async () => {
       const surveyId = "survey-1";
       const contactId = "nonexistent-contact";
 
@@ -406,7 +406,7 @@ describe("data", () => {
 
       const result = await getExistingContactResponse(surveyId, contactId)();
 
-      expect(result).toBeNull();
+      expect(result).toBeUndefined();
     });
 
     test("should throw DatabaseError on Prisma error", async () => {

apps/web/modules/survey/link/lib/data.ts

@@ -57,6 +57,7 @@ export const getSurveyWithMetadata = reactCache(async (surveyId: string) => {
         surveyClosedMessage: true,
         showLanguageSwitch: true,
         recaptcha: true,
+        metadata: true,
 
         // Related data
         languages: {
@@ -66,11 +67,11 @@ export const getSurveyWithMetadata = reactCache(async (surveyId: string) => {
             language: {
               select: {
                 id: true,
-                code: true,
-                alias: true,
                 createdAt: true,
                 updatedAt: true,
+                code: true,
                 projectId: true,
+                alias: true,
               },
             },
           },
@@ -93,7 +94,15 @@ export const getSurveyWithMetadata = reactCache(async (surveyId: string) => {
           },
         },
         segment: {
-          include: {
+          select: {
+            id: true,
+            createdAt: true,
+            updatedAt: true,
+            environmentId: true,
+            title: true,
+            description: true,
+            isPrivate: true,
+            filters: true,
             surveys: {
               select: {
                 id: true,
@@ -208,7 +217,7 @@ export const getExistingContactResponse = reactCache((surveyId: string, contactI
       },
     });
 
-    return response;
+    return response ?? undefined;
   } catch (error) {
     if (error instanceof Prisma.PrismaClientKnownRequestError) {
       throw new DatabaseError(error.message);

apps/web/modules/survey/link/lib/environment.test.ts

@@ -0,0 +1,221 @@
+import { Prisma } from "@prisma/client";
+import "@testing-library/jest-dom/vitest";
+import { beforeEach, describe, expect, test, vi } from "vitest";
+import { prisma } from "@formbricks/database";
+import { DatabaseError, ResourceNotFoundError, ValidationError } from "@formbricks/types/errors";
+import { getEnvironmentContextForLinkSurvey } from "./environment";
+
+// Mock dependencies
+vi.mock("@formbricks/database", () => ({
+  prisma: {
+    environment: {
+      findUnique: vi.fn(),
+    },
+  },
+}));
+
+// Mock React cache
+vi.mock("react", () => ({
+  cache: vi.fn((fn) => fn),
+}));
+
+describe("getEnvironmentContextForLinkSurvey", () => {
+  beforeEach(() => {
+    vi.resetAllMocks();
+  });
+
+  test("should successfully fetch environment context with all required data", async () => {
+    const mockEnvironmentId = "clh1a2b3c4d5e6f7g8h9i";
+    const mockData = {
+      project: {
+        id: "clh1a2b3c4d5e6f7g8h9j",
+        name: "Test Project",
+        styling: { primaryColor: "#000000" },
+        logo: { url: "https://example.com/logo.png" },
+        linkSurveyBranding: true,
+        organizationId: "clh1a2b3c4d5e6f7g8h9k",
+        organization: {
+          id: "clh1a2b3c4d5e6f7g8h9k",
+          billing: {
+            plan: "free",
+            limits: {
+              monthly: {
+                responses: 100,
+                miu: 1000,
+              },
+            },
+            features: {
+              inAppSurvey: {
+                status: "active",
+              },
+              linkSurvey: {
+                status: "active",
+              },
+            },
+          },
+        },
+      },
+    };
+
+    vi.mocked(prisma.environment.findUnique).mockResolvedValue(mockData as any);
+
+    const result = await getEnvironmentContextForLinkSurvey(mockEnvironmentId);
+
+    expect(result).toEqual({
+      project: {
+        id: "clh1a2b3c4d5e6f7g8h9j",
+        name: "Test Project",
+        styling: { primaryColor: "#000000" },
+        logo: { url: "https://example.com/logo.png" },
+        linkSurveyBranding: true,
+      },
+      organizationId: "clh1a2b3c4d5e6f7g8h9k",
+      organizationBilling: mockData.project.organization.billing,
+    });
+
+    expect(prisma.environment.findUnique).toHaveBeenCalledWith({
+      where: { id: mockEnvironmentId },
+      select: {
+        project: {
+          select: {
+            id: true,
+            name: true,
+            styling: true,
+            logo: true,
+            linkSurveyBranding: true,
+            organizationId: true,
+            organization: {
+              select: {
+                id: true,
+                billing: true,
+              },
+            },
+          },
+        },
+      },
+    });
+  });
+
+  test("should throw ValidationError for invalid environment ID", async () => {
+    const invalidId = "invalid-id";
+
+    await expect(getEnvironmentContextForLinkSurvey(invalidId)).rejects.toThrow(ValidationError);
+  });
+
+  test("should throw ResourceNotFoundError when environment has no project", async () => {
+    const mockEnvironmentId = "clh1a2b3c4d5e6f7g8h9m";
+
+    vi.mocked(prisma.environment.findUnique).mockResolvedValue({
+      project: null,
+    } as any);
+
+    await expect(getEnvironmentContextForLinkSurvey(mockEnvironmentId)).rejects.toThrow(
+      ResourceNotFoundError
+    );
+    await expect(getEnvironmentContextForLinkSurvey(mockEnvironmentId)).rejects.toThrow("Project");
+  });
+
+  test("should throw ResourceNotFoundError when environment is not found", async () => {
+    const mockEnvironmentId = "cuid123456789012345";
+
+    vi.mocked(prisma.environment.findUnique).mockResolvedValue(null);
+
+    await expect(getEnvironmentContextForLinkSurvey(mockEnvironmentId)).rejects.toThrow(
+      ResourceNotFoundError
+    );
+  });
+
+  test("should throw ResourceNotFoundError when project has no organization", async () => {
+    const mockEnvironmentId = "clh1a2b3c4d5e6f7g8h9n";
+    const mockData = {
+      project: {
+        id: "clh1a2b3c4d5e6f7g8h9o",
+        name: "Test Project",
+        styling: {},
+        logo: null,
+        linkSurveyBranding: true,
+        organizationId: "clh1a2b3c4d5e6f7g8h9p",
+        organization: null,
+      },
+    };
+
+    vi.mocked(prisma.environment.findUnique).mockResolvedValue(mockData as any);
+
+    await expect(getEnvironmentContextForLinkSurvey(mockEnvironmentId)).rejects.toThrow(
+      ResourceNotFoundError
+    );
+    await expect(getEnvironmentContextForLinkSurvey(mockEnvironmentId)).rejects.toThrow("Organization");
+  });
+
+  test("should throw DatabaseError on Prisma error", async () => {
+    const mockEnvironmentId = "clh1a2b3c4d5e6f7g8h9q";
+    const prismaError = new Prisma.PrismaClientKnownRequestError("Database error", {
+      code: "P2025",
+      clientVersion: "5.0.0",
+    });
+
+    vi.mocked(prisma.environment.findUnique).mockRejectedValue(prismaError);
+
+    await expect(getEnvironmentContextForLinkSurvey(mockEnvironmentId)).rejects.toThrow(DatabaseError);
+    await expect(getEnvironmentContextForLinkSurvey(mockEnvironmentId)).rejects.toThrow("Database error");
+  });
+
+  test("should rethrow non-Prisma errors", async () => {
+    const mockEnvironmentId = "clh1a2b3c4d5e6f7g8h9r";
+    const genericError = new Error("Generic error");
+
+    vi.mocked(prisma.environment.findUnique).mockRejectedValue(genericError);
+
+    await expect(getEnvironmentContextForLinkSurvey(mockEnvironmentId)).rejects.toThrow(genericError);
+  });
+
+  test("should handle project with minimal data", async () => {
+    const mockEnvironmentId = "clh1a2b3c4d5e6f7g8h9s";
+    const mockData = {
+      project: {
+        id: "clh1a2b3c4d5e6f7g8h9t",
+        name: "Minimal Project",
+        styling: null,
+        logo: null,
+        linkSurveyBranding: false,
+        organizationId: "clh1a2b3c4d5e6f7g8h9u",
+        organization: {
+          id: "clh1a2b3c4d5e6f7g8h9u",
+          billing: {
+            plan: "free",
+            limits: {
+              monthly: {
+                responses: 100,
+                miu: 1000,
+              },
+            },
+            features: {
+              inAppSurvey: {
+                status: "inactive",
+              },
+              linkSurvey: {
+                status: "inactive",
+              },
+            },
+          },
+        },
+      },
+    };
+
+    vi.mocked(prisma.environment.findUnique).mockResolvedValue(mockData as any);
+
+    const result = await getEnvironmentContextForLinkSurvey(mockEnvironmentId);
+
+    expect(result).toEqual({
+      project: {
+        id: "clh1a2b3c4d5e6f7g8h9t",
+        name: "Minimal Project",
+        styling: null,
+        logo: null,
+        linkSurveyBranding: false,
+      },
+      organizationId: "clh1a2b3c4d5e6f7g8h9u",
+      organizationBilling: mockData.project.organization.billing,
+    });
+  });
+});

apps/web/modules/survey/link/lib/environment.ts

@@ -0,0 +1,103 @@
+import "server-only";
+import { Prisma, Project } from "@prisma/client";
+import { cache as reactCache } from "react";
+import { prisma } from "@formbricks/database";
+import { ZId } from "@formbricks/types/common";
+import { DatabaseError, ResourceNotFoundError } from "@formbricks/types/errors";
+import { TOrganizationBilling } from "@formbricks/types/organizations";
+import { validateInputs } from "@/lib/utils/validate";
+
+/**
+ * @file Data access layer for link surveys - optimized environment context fetching
+ * @module modules/survey/link/lib/environment
+ *
+ * This module provides optimized data fetching for link survey rendering by combining
+ * related queries into a single database call. Uses React cache for automatic request
+ * deduplication within the same render cycle.
+ */
+
+type TProjectForLinkSurvey = Pick<Project, "id" | "name" | "styling" | "logo" | "linkSurveyBranding">;
+
+export interface TEnvironmentContextForLinkSurvey {
+  project: TProjectForLinkSurvey;
+  organizationId: string;
+  organizationBilling: TOrganizationBilling;
+}
+
+/**
+ * Fetches all environment-related data needed for link surveys in a single optimized query.
+ * Combines project, organization, and billing data using Prisma relationships to minimize
+ * database round trips.
+ *
+ * This function is specifically optimized for link survey rendering and only fetches the
+ * fields required for that use case. Other parts of the application may need different
+ * field combinations and should use their own specialized functions.
+ *
+ * @param environmentId - The environment identifier
+ * @returns Object containing project styling data, organization ID, and billing information
+ * @throws ResourceNotFoundError if environment, project, or organization not found
+ * @throws DatabaseError if database query fails
+ *
+ * @example
+ * ```typescript
+ * // In server components, function is automatically cached per request
+ * const { project, organizationId, organizationBilling } =
+ *   await getEnvironmentContextForLinkSurvey(survey.environmentId);
+ * ```
+ */
+export const getEnvironmentContextForLinkSurvey = reactCache(
+  async (environmentId: string): Promise<TEnvironmentContextForLinkSurvey> => {
+    validateInputs([environmentId, ZId]);
+
+    try {
+      const environment = await prisma.environment.findUnique({
+        where: { id: environmentId },
+        select: {
+          project: {
+            select: {
+              id: true,
+              name: true,
+              styling: true,
+              logo: true,
+              linkSurveyBranding: true,
+              organizationId: true,
+              organization: {
+                select: {
+                  id: true,
+                  billing: true,
+                },
+              },
+            },
+          },
+        },
+      });
+
+      // Fail early pattern: validate data before proceeding
+      if (!environment?.project) {
+        throw new ResourceNotFoundError("Project", null);
+      }
+
+      if (!environment.project.organization) {
+        throw new ResourceNotFoundError("Organization", null);
+      }
+
+      // Return structured, typed data
+      return {
+        project: {
+          id: environment.project.id,
+          name: environment.project.name,
+          styling: environment.project.styling,
+          logo: environment.project.logo,
+          linkSurveyBranding: environment.project.linkSurveyBranding,
+        },
+        organizationId: environment.project.organizationId,
+        organizationBilling: environment.project.organization.billing as TOrganizationBilling,
+      };
+    } catch (error) {
+      if (error instanceof Prisma.PrismaClientKnownRequestError) {
+        throw new DatabaseError(error.message);
+      }
+      throw error;
+    }
+  }
+);

apps/web/modules/survey/link/lib/metadata-utils.ts

@@ -19,16 +19,21 @@ export const getNameForURL = (value: string) => encodeURIComponent(value);
 export const getBrandColorForURL = (value: string) => encodeURIComponent(value);
 
 /**
- * Get basic survey metadata (title and description) based on link metadata, welcome card or survey name
+ * Get basic survey metadata (title and description) based on link metadata, welcome card or survey name.
+ *
+ * @param surveyId - Survey identifier
+ * @param languageCode - Language code for localization (default: "default")
+ * @param survey - Optional survey data if already available (e.g., from generateMetadata)
  */
 export const getBasicSurveyMetadata = async (
   surveyId: string,
-  languageCode = "default"
+  languageCode = "default",
+  survey?: Awaited<ReturnType<typeof getSurvey>> | null
 ): Promise<TBasicSurveyMetadata> => {
-  const survey = await getSurvey(surveyId);
+  const surveyData = survey ?? (await getSurvey(surveyId));
 
   // If survey doesn't exist, return default metadata
-  if (!survey) {
+  if (!surveyData) {
     return {
       title: "Survey",
       description: "Please complete this survey.",
@@ -37,11 +42,11 @@ export const getBasicSurveyMetadata = async (
     };
   }
 
-  const metadata = survey.metadata;
-  const welcomeCard = survey.welcomeCard;
+  const metadata = surveyData.metadata;
+  const welcomeCard = surveyData.welcomeCard;
   const useDefaultLanguageCode =
     languageCode === "default" ||
-    survey.languages.find((lang) => lang.language.code === languageCode)?.default;
+    surveyData.languages.find((lang) => lang.language.code === languageCode)?.default;
 
   // Determine language code to use for metadata
   const langCode = useDefaultLanguageCode ? "default" : languageCode;
@@ -51,10 +56,10 @@ export const getBasicSurveyMetadata = async (
   const titleFromWelcome =
     welcomeCard?.enabled && welcomeCard.headline
       ? getTextContent(
-          getLocalizedValue(recallToHeadline(welcomeCard.headline, survey, false, langCode), langCode)
+          getLocalizedValue(recallToHeadline(welcomeCard.headline, surveyData, false, langCode), langCode)
         ) || ""
       : undefined;
-  let title = titleFromMetadata || titleFromWelcome || survey.name;
+  let title = titleFromMetadata || titleFromWelcome || surveyData.name;
 
   // Set description - priority: custom link metadata > default
   const descriptionFromMetadata = metadata?.description
@@ -63,7 +68,7 @@ export const getBasicSurveyMetadata = async (
   let description = descriptionFromMetadata || "Please complete this survey.";
 
   // Get OG image from link metadata if available
-  const { ogImage } = metadata;
+  const ogImage = metadata?.ogImage;
 
   if (!titleFromMetadata) {
     if (IS_FORMBRICKS_CLOUD) {
@@ -74,7 +79,7 @@ export const getBasicSurveyMetadata = async (
   return {
     title,
     description,
-    survey,
+    survey: surveyData,
     ogImage,
   };
 };

apps/web/modules/survey/link/metadata.test.ts

@@ -1,11 +1,11 @@
 import { notFound } from "next/navigation";
 import { beforeEach, describe, expect, test, vi } from "vitest";
-import { getSurveyMetadata } from "@/modules/survey/link/lib/data";
+import { getSurveyWithMetadata } from "@/modules/survey/link/lib/data";
 import { getBasicSurveyMetadata, getSurveyOpenGraphMetadata } from "./lib/metadata-utils";
 import { getMetadataForLinkSurvey } from "./metadata";
 
 vi.mock("@/modules/survey/link/lib/data", () => ({
-  getSurveyMetadata: vi.fn(),
+  getSurveyWithMetadata: vi.fn(),
 }));
 
 vi.mock("next/navigation", () => ({
@@ -54,12 +54,12 @@ describe("getMetadataForLinkSurvey", () => {
       status: "published",
     } as any;
 
-    vi.mocked(getSurveyMetadata).mockResolvedValue(mockSurvey);
+    vi.mocked(getSurveyWithMetadata).mockResolvedValue(mockSurvey);
 
     const result = await getMetadataForLinkSurvey(mockSurveyId);
 
-    expect(getSurveyMetadata).toHaveBeenCalledWith(mockSurveyId);
-    expect(getBasicSurveyMetadata).toHaveBeenCalledWith(mockSurveyId, undefined);
+    expect(getSurveyWithMetadata).toHaveBeenCalledWith(mockSurveyId);
+    expect(getBasicSurveyMetadata).toHaveBeenCalledWith(mockSurveyId, undefined, mockSurvey);
     expect(getSurveyOpenGraphMetadata).toHaveBeenCalledWith(mockSurveyId, mockSurveyName, undefined);
 
     expect(result).toEqual({
@@ -98,7 +98,7 @@ describe("getMetadataForLinkSurvey", () => {
       status: "published",
     } as any;
 
-    vi.mocked(getSurveyMetadata).mockResolvedValue(mockSurvey);
+    vi.mocked(getSurveyWithMetadata).mockResolvedValue(mockSurvey);
     vi.mocked(getBasicSurveyMetadata).mockResolvedValue({
       title: mockSurveyName,
       description: mockDescription,
@@ -120,7 +120,7 @@ describe("getMetadataForLinkSurvey", () => {
       status: "published",
     };
 
-    vi.mocked(getSurveyMetadata).mockResolvedValue(mockSurvey as any);
+    vi.mocked(getSurveyWithMetadata).mockResolvedValue(mockSurvey as any);
 
     await getMetadataForLinkSurvey(mockSurveyId);
 
@@ -135,7 +135,7 @@ describe("getMetadataForLinkSurvey", () => {
       status: "draft",
     } as any;
 
-    vi.mocked(getSurveyMetadata).mockResolvedValue(mockSurvey);
+    vi.mocked(getSurveyWithMetadata).mockResolvedValue(mockSurvey);
 
     await getMetadataForLinkSurvey(mockSurveyId);
 
@@ -150,7 +150,7 @@ describe("getMetadataForLinkSurvey", () => {
       status: "published",
     } as any;
 
-    vi.mocked(getSurveyMetadata).mockResolvedValue(mockSurvey);
+    vi.mocked(getSurveyWithMetadata).mockResolvedValue(mockSurvey);
     vi.mocked(getSurveyOpenGraphMetadata).mockReturnValue({
       twitter: {
         title: mockSurveyName,
@@ -192,7 +192,7 @@ describe("getMetadataForLinkSurvey", () => {
       status: "published",
     } as any;
 
-    vi.mocked(getSurveyMetadata).mockResolvedValue(mockSurvey);
+    vi.mocked(getSurveyWithMetadata).mockResolvedValue(mockSurvey);
     vi.mocked(getSurveyOpenGraphMetadata).mockReturnValue({
       openGraph: {
         title: mockSurveyName,

apps/web/modules/survey/link/metadata.ts

@@ -1,20 +1,19 @@
 import { Metadata } from "next";
 import { notFound } from "next/navigation";
-import { getSurveyMetadata } from "@/modules/survey/link/lib/data";
+import { getSurveyWithMetadata } from "@/modules/survey/link/lib/data";
 import { getBasicSurveyMetadata, getSurveyOpenGraphMetadata } from "./lib/metadata-utils";
 
 export const getMetadataForLinkSurvey = async (
   surveyId: string,
   languageCode?: string
 ): Promise<Metadata> => {
-  const survey = await getSurveyMetadata(surveyId);
+  const survey = await getSurveyWithMetadata(surveyId);
 
-  if (!survey || survey.type !== "link" || survey.status === "draft") {
+  if (!survey || survey?.type !== "link" || survey?.status === "draft") {
     notFound();
   }
 
-  // Get enhanced metadata that includes custom link metadata
-  const { title, description, ogImage } = await getBasicSurveyMetadata(surveyId, languageCode);
+  const { title, description, ogImage } = await getBasicSurveyMetadata(surveyId, languageCode, survey);
   const surveyBrandColor = survey.styling?.brandColor?.light;
 
   // Use the shared function for creating the base metadata but override with custom data

apps/web/modules/survey/link/page.tsx

@@ -3,11 +3,14 @@ import { notFound } from "next/navigation";
 import { logger } from "@formbricks/logger";
 import { ZId } from "@formbricks/types/common";
 import { TSurvey } from "@formbricks/types/surveys/types";
+import { findMatchingLocale } from "@/lib/utils/locale";
+import { getMultiLanguagePermission } from "@/modules/ee/license-check/lib/utils";
+import { getResponseCountBySurveyId } from "@/modules/survey/lib/response";
 import { SurveyInactive } from "@/modules/survey/link/components/survey-inactive";
 import { renderSurvey } from "@/modules/survey/link/components/survey-renderer";
 import { getResponseBySingleUseId, getSurveyWithMetadata } from "@/modules/survey/link/lib/data";
+import { getEnvironmentContextForLinkSurvey } from "@/modules/survey/link/lib/environment";
 import { checkAndValidateSingleUseId } from "@/modules/survey/link/lib/helper";
-import { getProjectByEnvironmentId } from "@/modules/survey/link/lib/project";
 import { getMetadataForLinkSurvey } from "@/modules/survey/link/metadata";
 
 interface LinkSurveyPageProps {
@@ -47,7 +50,29 @@ export const LinkSurveyPage = async (props: LinkSurveyPageProps) => {
 
   const isPreview = searchParams.preview === "true";
 
-  // Use optimized survey data fetcher (includes all necessary data)
+  /**
+   * Optimized data fetching strategy for link surveys
+   *
+   * PERFORMANCE OPTIMIZATION:
+   * We fetch data in carefully staged parallel operations to minimize latency.
+   * Each sequential database call adds ~100-300ms for users far from servers.
+   *
+   * Fetch stages:
+   * Stage 1: Survey (required first - provides config for all other fetches)
+   * Stage 2: Parallel fetch of environment context, locale, and conditional single-use response
+   * Stage 3: Multi-language permission (depends on billing from Stage 2)
+   *
+   * This reduces waterfall from 4-5 levels to 3 levels:
+   * - Before: ~400-1500ms added latency for distant users
+   * - After: ~200-600ms added latency for distant users
+   * - Improvement: 50-60% latency reduction
+   *
+   * CACHING NOTE:
+   * getSurveyWithMetadata is wrapped in React's cache(), so the call from
+   * generateMetadata and this page component are automatically deduplicated.
+   */
+
+  // Stage 1: Fetch survey first (required for all subsequent logic)
   let survey: TSurvey | null = null;
   try {
     survey = await getSurveyWithMetadata(params.surveyId);
@@ -56,40 +81,60 @@ export const LinkSurveyPage = async (props: LinkSurveyPageProps) => {
     return notFound();
   }
 
+  if (!survey) {
+    return notFound();
+  }
+
   const suId = searchParams.suId;
 
-  const isSingleUseSurvey = survey?.singleUse?.enabled;
-  const isSingleUseSurveyEncrypted = survey?.singleUse?.isEncrypted;
-
+  // Validate single-use ID early (no I/O, just validation)
+  const isSingleUseSurvey = survey.singleUse?.enabled;
+  const isSingleUseSurveyEncrypted = survey.singleUse?.isEncrypted;
   let singleUseId: string | undefined = undefined;
 
   if (isSingleUseSurvey) {
     const validatedSingleUseId = checkAndValidateSingleUseId(suId, isSingleUseSurveyEncrypted);
     if (!validatedSingleUseId) {
-      const project = await getProjectByEnvironmentId(survey.environmentId);
-      return <SurveyInactive status="link invalid" project={project ?? undefined} />;
+      // Need to fetch project for error page - fetch environmentContext for it
+      const environmentContext = await getEnvironmentContextForLinkSurvey(survey.environmentId);
+      return <SurveyInactive status="link invalid" project={environmentContext.project} />;
     }
-
     singleUseId = validatedSingleUseId;
   }
 
-  let singleUseResponse;
-  if (isSingleUseSurvey && singleUseId) {
-    try {
-      // Use optimized response fetcher with proper caching
-      const fetchResponseFn = getResponseBySingleUseId(survey.id, singleUseId);
-      singleUseResponse = await fetchResponseFn();
-    } catch (error) {
-      logger.error("Error fetching single use response:", error);
-      singleUseResponse = undefined;
-    }
-  }
+  // Stage 2: Parallel fetch of all remaining data
+  const [environmentContext, locale, singleUseResponse] = await Promise.all([
+    getEnvironmentContextForLinkSurvey(survey.environmentId),
+    findMatchingLocale(),
+    // Only fetch single-use response if we have a validated ID
+    isSingleUseSurvey && singleUseId
+      ? getResponseBySingleUseId(survey.id, singleUseId)()
+      : Promise.resolve(undefined),
+  ]);
 
+  // Stage 3: Get multi-language permission (depends on environmentContext)
+  // Future optimization: Consider caching getMultiLanguagePermission by plan tier
+  // since it's a pure computation based on billing plan. Could be memoized at
+  // the plan level rather than per-request.
+  const isMultiLanguageAllowed = await getMultiLanguagePermission(
+    environmentContext.organizationBilling.plan
+  );
+
+  // Fetch responseCount only if needed (depends on survey config)
+  const responseCount = survey.welcomeCard.showResponseCount
+    ? await getResponseCountBySurveyId(survey.id)
+    : undefined;
+
+  // Pass all pre-fetched data to renderer
   return renderSurvey({
     survey,
     searchParams,
     singleUseId,
-    singleUseResponse,
+    singleUseResponse: singleUseResponse ?? undefined,
     isPreview,
+    environmentContext,
+    locale,
+    isMultiLanguageAllowed,
+    responseCount,
   });
 };

apps/web/modules/survey/list/components/survey-card.tsx

@@ -6,7 +6,6 @@ import { useTranslation } from "react-i18next";
 import { TUserLocale } from "@formbricks/types/user";
 import { cn } from "@/lib/cn";
 import { convertDateString, timeSince } from "@/lib/time";
-import { useSingleUseId } from "@/modules/survey/hooks/useSingleUseId";
 import { SurveyTypeIndicator } from "@/modules/survey/list/components/survey-type-indicator";
 import { TSurvey } from "@/modules/survey/list/types/surveys";
 import { SurveyStatusIndicator } from "@/modules/ui/components/survey-status-indicator";
@@ -48,8 +47,6 @@ export const SurveyCard = ({
 
   const isSurveyCreationDeletionDisabled = isReadOnly;
 
-  const { refreshSingleUseId } = useSingleUseId(survey, isReadOnly);
-
   const linkHref = useMemo(() => {
     return survey.status === "draft"
       ? `/environments/${environmentId}/surveys/${survey.id}/edit`
@@ -101,7 +98,6 @@ export const SurveyCard = ({
           environmentId={environmentId}
           publicDomain={publicDomain}
           disabled={isDraftAndReadOnly}
-          refreshSingleUseId={refreshSingleUseId}
           isSurveyCreationDeletionDisabled={isSurveyCreationDeletionDisabled}
           deleteSurvey={deleteSurvey}
           onSurveysCopied={onSurveysCopied}

apps/web/modules/survey/list/components/survey-dropdown-menu.tsx

@@ -11,7 +11,7 @@ import {
 } from "lucide-react";
 import Link from "next/link";
 import { useRouter } from "next/navigation";
-import { useEffect, useMemo, useState } from "react";
+import { useMemo, useState } from "react";
 import toast from "react-hot-toast";
 import { useTranslation } from "react-i18next";
 import { logger } from "@formbricks/logger";
@@ -39,7 +39,6 @@ interface SurveyDropDownMenuProps {
   environmentId: string;
   survey: TSurvey;
   publicDomain: string;
-  refreshSingleUseId: () => Promise<string | undefined>;
   disabled?: boolean;
   isSurveyCreationDeletionDisabled?: boolean;
   deleteSurvey: (surveyId: string) => void;
@@ -50,7 +49,6 @@ export const SurveyDropDownMenu = ({
   environmentId,
   survey,
   publicDomain,
-  refreshSingleUseId,
   disabled,
   isSurveyCreationDeletionDisabled,
   deleteSurvey,
@@ -62,26 +60,11 @@ export const SurveyDropDownMenu = ({
   const [isDropDownOpen, setIsDropDownOpen] = useState(false);
   const [isCopyFormOpen, setIsCopyFormOpen] = useState(false);
   const [isCautionDialogOpen, setIsCautionDialogOpen] = useState(false);
-  const [newSingleUseId, setNewSingleUseId] = useState<string | undefined>(undefined);
 
   const router = useRouter();
 
   const surveyLink = useMemo(() => publicDomain + "/s/" + survey.id, [survey.id, publicDomain]);
-
-  // Pre-fetch single-use ID when dropdown opens to avoid async delay during clipboard operation
-  // This ensures Safari's clipboard API works by maintaining the user gesture context
-  useEffect(() => {
-    if (!isDropDownOpen) return;
-    const fetchNewId = async () => {
-      try {
-        const newId = await refreshSingleUseId();
-        setNewSingleUseId(newId ?? undefined);
-      } catch (error) {
-        logger.error(error);
-      }
-    };
-    fetchNewId();
-  }, [refreshSingleUseId, isDropDownOpen]);
+  const isSingleUseEnabled = survey.singleUse?.enabled ?? false;
 
   const handleDeleteSurvey = async (surveyId: string) => {
     setLoading(true);
@@ -100,7 +83,8 @@ export const SurveyDropDownMenu = ({
     try {
       e.preventDefault();
       setIsDropDownOpen(false);
-      const copiedLink = copySurveyLink(surveyLink, newSingleUseId);
+      // For single-use surveys, this button is disabled, so we just copy the base link
+      const copiedLink = copySurveyLink(surveyLink);
       navigator.clipboard.writeText(copiedLink);
       toast.success(t("common.copied_to_clipboard"));
     } catch (error) {
@@ -205,31 +189,36 @@ export const SurveyDropDownMenu = ({
               <>
                 <DropdownMenuItem>
                   <button
-                    className="flex w-full cursor-pointer items-center"
+                    type="button"
+                    className={cn(
+                      "flex w-full items-center",
+                      isSingleUseEnabled && "cursor-not-allowed opacity-50"
+                    )}
+                    disabled={isSingleUseEnabled}
                     onClick={async (e) => {
                       e.preventDefault();
                       setIsDropDownOpen(false);
-                      const newId = await refreshSingleUseId();
-                      const previewUrl =
-                        surveyLink + (newId ? `?suId=${newId}&preview=true` : "?preview=true");
+                      const previewUrl = surveyLink + "?preview=true";
                       window.open(previewUrl, "_blank");
                     }}>
                     <EyeIcon className="mr-2 h-4 w-4" />
                     {t("common.preview_survey")}
                   </button>
                 </DropdownMenuItem>
-                {!survey.singleUse?.enabled && (
-                  <DropdownMenuItem>
-                    <button
-                      type="button"
-                      data-testid="copy-link"
-                      className="flex w-full items-center"
-                      onClick={async (e) => handleCopyLink(e)}>
-                      <LinkIcon className="mr-2 h-4 w-4" />
-                      {t("common.copy_link")}
-                    </button>
-                  </DropdownMenuItem>
-                )}
+                <DropdownMenuItem>
+                  <button
+                    type="button"
+                    data-testid="copy-link"
+                    className={cn(
+                      "flex w-full items-center",
+                      isSingleUseEnabled && "cursor-not-allowed opacity-50"
+                    )}
+                    disabled={isSingleUseEnabled}
+                    onClick={async (e) => handleCopyLink(e)}>
+                    <LinkIcon className="mr-2 h-4 w-4" />
+                    {t("common.copy_link")}
+                  </button>
+                </DropdownMenuItem>
               </>
             )}
             {!isSurveyCreationDeletionDisabled && (

apps/web/modules/survey/list/components/survey-filters.tsx

@@ -7,8 +7,9 @@ import { useTranslation } from "react-i18next";
 import { useDebounce } from "react-use";
 import { TProjectConfigChannel } from "@formbricks/types/project";
 import { TFilterOption, TSortOption, TSurveyFilters } from "@formbricks/types/surveys/types";
+import { FORMBRICKS_SURVEYS_FILTERS_KEY_LS } from "@/lib/localStorage";
 import { SortOption } from "@/modules/survey/list/components/sort-option";
-import { initialFilters } from "@/modules/survey/list/components/survey-list";
+import { initialFilters } from "@/modules/survey/list/lib/constants";
 import { Button } from "@/modules/ui/components/button";
 import {
   DropdownMenu,
@@ -154,12 +155,13 @@ export const SurveyFilters = ({
           </div>
         )}
 
-        {(createdBy.length > 0 || status.length > 0 || type.length > 0) && (
+        {(createdBy.length > 0 || status.length > 0 || type.length > 0 || name) && (
           <Button
             size="sm"
             onClick={() => {
               setSurveyFilters(initialFilters);
-              localStorage.removeItem("surveyFilters");
+              setName(""); // Also clear the search input
+              localStorage.removeItem(FORMBRICKS_SURVEYS_FILTERS_KEY_LS);
             }}
             className="h-8">
             {t("common.clear_filters")}

apps/web/modules/survey/list/components/survey-list.tsx

@@ -10,6 +10,7 @@ import { TSurveyFilters } from "@formbricks/types/surveys/types";
 import { TUserLocale } from "@formbricks/types/user";
 import { FORMBRICKS_SURVEYS_FILTERS_KEY_LS } from "@/lib/localStorage";
 import { getSurveysAction } from "@/modules/survey/list/actions";
+import { initialFilters } from "@/modules/survey/list/lib/constants";
 import { getFormattedFilters } from "@/modules/survey/list/lib/utils";
 import { TSurvey } from "@/modules/survey/list/types/surveys";
 import { Button } from "@/modules/ui/components/button";
@@ -27,14 +28,6 @@ interface SurveysListProps {
   locale: TUserLocale;
 }
 
-export const initialFilters: TSurveyFilters = {
-  name: "",
-  createdBy: [],
-  status: [],
-  type: [],
-  sortBy: "relevance",
-};
-
 export const SurveysList = ({
   environmentId,
   isReadOnly,
@@ -46,14 +39,18 @@ export const SurveysList = ({
 }: SurveysListProps) => {
   const router = useRouter();
   const [surveys, setSurveys] = useState<TSurvey[]>([]);
-  const [isFetching, setIsFetching] = useState(true);
-  const [hasMore, setHasMore] = useState<boolean>(true);
+  const [isFetching, setIsFetching] = useState(false);
+  const [hasMore, setHasMore] = useState<boolean>(false);
   const [refreshTrigger, setRefreshTrigger] = useState(false);
   const { t } = useTranslation();
   const [surveyFilters, setSurveyFilters] = useState<TSurveyFilters>(initialFilters);
   const [isFilterInitialized, setIsFilterInitialized] = useState(false);
 
-  const filters = useMemo(() => getFormattedFilters(surveyFilters, userId), [surveyFilters, userId]);
+  const { name, createdBy, status, type, sortBy } = surveyFilters;
+  const filters = useMemo(
+    () => getFormattedFilters(surveyFilters, userId),
+    [name, JSON.stringify(createdBy), JSON.stringify(status), JSON.stringify(type), sortBy, userId]
+  );
   const [parent] = useAutoAnimate();
 
   useEffect(() => {
@@ -80,28 +77,30 @@ export const SurveysList = ({
   }, [surveyFilters, isFilterInitialized]);
 
   useEffect(() => {
-    if (isFilterInitialized) {
-      const fetchInitialSurveys = async () => {
-        setIsFetching(true);
-        const res = await getSurveysAction({
-          environmentId,
-          limit: surveysLimit,
-          offset: undefined,
-          filterCriteria: filters,
-        });
-        if (res?.data) {
-          if (res.data.length < surveysLimit) {
-            setHasMore(false);
-          } else {
-            setHasMore(true);
-          }
-          setSurveys(res.data);
-          setIsFetching(false);
+    // Wait for filters to be loaded from localStorage before fetching
+    if (!isFilterInitialized) return;
+
+    const fetchFilteredSurveys = async () => {
+      setIsFetching(true);
+      const res = await getSurveysAction({
+        environmentId,
+        limit: surveysLimit,
+        offset: undefined,
+        filterCriteria: filters,
+      });
+      if (res?.data) {
+        if (res.data.length < surveysLimit) {
+          setHasMore(false);
+        } else {
+          setHasMore(true);
         }
-      };
-      fetchInitialSurveys();
-    }
-  }, [environmentId, surveysLimit, filters, isFilterInitialized, refreshTrigger]);
+        setSurveys(res.data);
+        setIsFetching(false);
+      }
+    };
+    fetchFilteredSurveys();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [environmentId, surveysLimit, filters, refreshTrigger, isFilterInitialized]);
 
   const fetchNextPage = useCallback(async () => {
     setIsFetching(true);

apps/web/modules/survey/list/lib/constants.ts

@@ -0,0 +1,9 @@
+import { TSurveyFilters } from "@formbricks/types/surveys/types";
+
+export const initialFilters: TSurveyFilters = {
+  name: "",
+  createdBy: [],
+  status: [],
+  type: [],
+  sortBy: "relevance",
+};

apps/web/modules/ui/components/survey/index.tsx

@@ -1,8 +1,12 @@
-import { useCallback, useEffect, useMemo, useState } from "react";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { SurveyContainerProps } from "@formbricks/types/formbricks-surveys";
 import { executeRecaptcha, loadRecaptchaScript } from "@/modules/ui/components/survey/recaptcha";
 
 const createContainerId = () => `formbricks-survey-container`;
+
+// Module-level flag to prevent concurrent script loads across component instances
+let isLoadingScript = false;
+
 declare global {
   interface Window {
     formbricksSurveys: {
@@ -10,6 +14,7 @@ declare global {
       renderSurveyModal: (props: SurveyContainerProps) => void;
       renderSurvey: (props: SurveyContainerProps) => void;
       onFilePick: (files: { name: string; type: string; base64: string }[]) => void;
+      setNonce: (nonce: string | undefined) => void;
     };
   }
 }
@@ -26,8 +31,11 @@ export const SurveyInline = (props: Omit<SurveyContainerProps, "containerId">) =
     [containerId, props, getRecaptchaToken]
   );
   const [isScriptLoaded, setIsScriptLoaded] = useState(false);
+  const hasLoadedRef = useRef(false);
 
   const loadSurveyScript: () => Promise<void> = async () => {
+    // Set loading flag immediately to prevent concurrent loads
+    isLoadingScript = true;
     try {
       const response = await fetch("/js/surveys.umd.cjs");
 
@@ -42,12 +50,20 @@ export const SurveyInline = (props: Omit<SurveyContainerProps, "containerId">) =
 
       document.head.appendChild(scriptElement);
       setIsScriptLoaded(true);
+      hasLoadedRef.current = true;
     } catch (error) {
       throw error;
+    } finally {
+      isLoadingScript = false;
     }
   };
 
   useEffect(() => {
+    // Prevent duplicate loads across multiple renders or component instances
+    if (hasLoadedRef.current || isLoadingScript) {
+      return;
+    }
+
     const loadScript = async () => {
       if (!window.formbricksSurveys) {
         try {
@@ -64,7 +80,8 @@ export const SurveyInline = (props: Omit<SurveyContainerProps, "containerId">) =
     };
 
     loadScript();
-  }, [containerId, props, renderInline]);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [props]);
 
   useEffect(() => {
     if (isScriptLoaded) {

apps/web/modules/ui/components/theme-styling-preview-survey/index.tsx

@@ -110,6 +110,10 @@ export const ThemeStylingPreviewSurvey = ({
 
   const isAppSurvey = previewType === "app";
 
+  // Create a unique key that includes both timestamp and preview type
+  // This ensures the survey remounts when switching between app and link
+  const surveyKey = `${previewType}-${surveyFormKey}`;
+
   const scrollToEditLogoSection = () => {
     const editLogoSection = document.getElementById("edit-logo");
     if (editLogoSection) {
@@ -160,7 +164,7 @@ export const ThemeStylingPreviewSurvey = ({
               previewMode="desktop"
               background={project.styling.cardBackgroundColor?.light}
               borderRadius={project.styling.roundness ?? 8}>
-              <Fragment key={surveyFormKey}>
+              <Fragment key={surveyKey}>
                 <SurveyInline
                   isPreviewMode={true}
                   survey={{ ...survey, type: "app" }}
@@ -185,7 +189,7 @@ export const ThemeStylingPreviewSurvey = ({
                 </button>
               )}
               <div
-                key={surveyFormKey}
+                key={surveyKey}
                 className={`${project.logo?.url && !project.styling.isLogoHidden && !isFullScreenPreview ? "mt-12" : ""} z-0 w-full max-w-md rounded-lg p-4`}>
                 <SurveyInline
                   isPreviewMode={true}

packages/js-core/src/index.ts

@@ -76,6 +76,19 @@ const registerRouteChange = async (): Promise<void> => {
   await queue.add(checkPageUrl, CommandType.GeneralAction);
 };
 
+/**
+ * Set the CSP nonce for inline styles
+ * @param nonce - The CSP nonce value (without 'nonce-' prefix), or undefined to clear
+ */
+const setNonce = (nonce: string | undefined): void => {
+  // Store nonce on window for access when surveys package loads
+  globalThis.window.__formbricksNonce = nonce;
+
+  // Set nonce in surveys package if it's already loaded
+  // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition -- Runtime check for surveys package availability
+  globalThis.window.formbricksSurveys?.setNonce?.(nonce);
+};
+
 const formbricks = {
   /** @deprecated Use setup() instead. This method will be removed in a future version */
   init: (initConfig: TLegacyConfigInput) => setup(initConfig as unknown as TConfigInput),
@@ -88,6 +101,7 @@ const formbricks = {
   track,
   logout,
   registerRouteChange,
+  setNonce,
 };
 
 type TFormbricks = typeof formbricks;

packages/js-core/src/lib/survey/widget.ts

@@ -201,19 +201,24 @@ export const removeWidgetContainer = (): void => {
   document.getElementById(CONTAINER_ID)?.remove();
 };
 
-const loadFormbricksSurveysExternally = (): Promise<typeof window.formbricksSurveys> => {
+const loadFormbricksSurveysExternally = (): Promise<typeof globalThis.window.formbricksSurveys> => {
   const config = Config.getInstance();
 
   return new Promise((resolve, reject) => {
     // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition -- We need to check if the formbricksSurveys object exists
-    if (window.formbricksSurveys) {
-      resolve(window.formbricksSurveys);
+    if (globalThis.window.formbricksSurveys) {
+      resolve(globalThis.window.formbricksSurveys);
     } else {
       const script = document.createElement("script");
       script.src = `${config.get().appUrl}/js/surveys.umd.cjs`;
       script.async = true;
       script.onload = () => {
-        resolve(window.formbricksSurveys);
+        // Apply stored nonce if it was set before surveys package loaded
+        const storedNonce = globalThis.window.__formbricksNonce;
+        if (storedNonce) {
+          globalThis.window.formbricksSurveys.setNonce(storedNonce);
+        }
+        resolve(globalThis.window.formbricksSurveys);
       };
       script.onerror = (error) => {
         console.error("Failed to load Formbricks Surveys library:", error);

packages/surveys/src/components/buttons/back-button.tsx

@@ -15,7 +15,7 @@ export function BackButton({ onClick, backButtonLabel, tabIndex = 2 }: BackButto
       tabIndex={tabIndex}
       type="button"
       className={cn(
-        "fb-mb-1 hover:fb-bg-input-bg fb-text-heading focus:fb-ring-focus fb-rounded-custom fb-flex fb-items-center fb-px-3 fb-py-3 fb-text-base fb-font-medium fb-leading-4 focus:fb-outline-none focus:fb-ring-2 focus:fb-ring-offset-2"
+        "hover:bg-input-bg text-heading focus:ring-focus rounded-custom mb-1 flex items-center px-3 py-3 text-base font-medium leading-4 focus:outline-none focus:ring-2 focus:ring-offset-2"
       )}
       onClick={onClick}>
       {backButtonLabel || t("common.back")}

packages/surveys/src/components/buttons/submit-button.tsx

@@ -72,7 +72,7 @@ export function SubmitButton({
       type={type}
       tabIndex={tabIndex}
       autoFocus={focus}
-      className="fb-bg-brand fb-border-submit-button-border fb-text-on-brand focus:fb-ring-focus fb-rounded-custom fb-flex fb-items-center fb-border fb-px-3 fb-py-3 fb-text-base fb-font-medium fb-leading-4 fb-shadow-sm hover:fb-opacity-90 focus:fb-outline-none focus:fb-ring-2 focus:fb-ring-offset-2 fb-mb-1"
+      className="bg-brand border-submit-button-border text-on-brand focus:ring-focus rounded-custom mb-1 flex items-center border px-3 py-3 text-base font-medium leading-4 shadow-sm hover:opacity-90 focus:outline-none focus:ring-2 focus:ring-offset-2"
       onClick={onClick}
       disabled={disabled}>
       {buttonLabel || (isLastQuestion ? t("common.finish") : t("common.next"))}

packages/surveys/src/components/general/auto-close-progress-bar.tsx

@@ -4,10 +4,10 @@ interface AutoCloseProgressBarProps {
 
 export function AutoCloseProgressBar({ autoCloseTimeout }: AutoCloseProgressBarProps) {
   return (
-    <div className="fb-bg-accent-bg fb-h-2 fb-w-full fb-overflow-hidden">
+    <div className="bg-accent-bg h-2 w-full overflow-hidden">
       <div
         key={autoCloseTimeout}
-        className="fb-bg-brand fb-z-20 fb-h-2"
+        className="bg-brand z-20 h-2"
         style={{
           animation: `shrink-width-to-zero ${autoCloseTimeout.toString()}s linear forwards`,
           width: "100%",

packages/surveys/src/components/general/cal-embed.tsx

@@ -48,14 +48,14 @@ export function CalEmbed({ question, onSuccessfulBooking }: CalEmbedProps) {
     });
     cal("init", { calOrigin: question.calHost ? `https://${question.calHost}` : "https://cal.com" });
     cal("inline", {
-      elementOrSelector: "#fb-cal-embed",
+      elementOrSelector: "#cal-embed",
       calLink: question.calUserName,
     });
   }, [cal, question.calHost, question.calUserName]);
 
   return (
-    <div className="fb-relative fb-mt-4 fb-overflow-auto">
-      <div id="fb-cal-embed" className={cn("fb-border-border fb-rounded-lg fb-border")} />
+    <div className="relative mt-4 overflow-auto">
+      <div id="cal-embed" className={cn("border-border rounded-lg border")} />
     </div>
   );
 }

packages/surveys/src/components/general/ending-card.tsx

@@ -48,21 +48,21 @@ export function EndingCard({
     ) : null;
 
   const checkmark = (
-    <div className="fb-text-brand fb-flex fb-flex-col fb-items-center fb-justify-center">
+    <div className="text-brand flex flex-col items-center justify-center">
       <svg
         xmlns="http://www.w3.org/2000/svg"
         fill="none"
         viewBox="0 0 24 24"
         strokeWidth="1.5"
         stroke="currentColor"
-        className="fb-h-24 fb-w-24">
+        className="h-24 w-24">
         <path
           strokeLinecap="round"
           strokeLinejoin="round"
           d="M9 12.75L11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
         />
       </svg>
-      <span className="fb-bg-brand fb-mb-[10px] fb-inline-block fb-h-1 fb-w-16 fb-rounded-[100%]" />
+      <span className="bg-brand mb-[10px] inline-block h-1 w-16 rounded-[100%]" />
     </div>
   );
 
@@ -115,7 +115,7 @@ export function EndingCard({
 
   return (
     <ScrollableContainer fullSizeCards={fullSizeCards}>
-      <div className="fb-text-center">
+      <div className="text-center">
         {isResponseSendingFinished ? (
           <>
             {endingCard.type === "endScreen" && (
@@ -140,7 +140,7 @@ export function EndingCard({
                     questionId="EndingCard"
                   />
                   {endingCard.buttonLabel ? (
-                    <div className="fb-mt-6 fb-flex fb-w-full fb-flex-col fb-items-center fb-justify-center fb-space-y-4">
+                    <div className="mt-6 flex w-full flex-col items-center justify-center space-y-4">
                       <SubmitButton
                         buttonLabel={replaceRecallInfo(
                           getLocalizedValue(endingCard.buttonLabel, languageCode),
@@ -171,7 +171,7 @@ export function EndingCard({
                     />
                   </div>
                 ) : (
-                  <div className="fb-my-3">
+                  <div className="my-3">
                     <LoadingSpinner />
                   </div>
                 )}
@@ -180,10 +180,10 @@ export function EndingCard({
           </>
         ) : (
           <>
-            <div className="fb-my-3">
+            <div className="my-3">
               <LoadingSpinner />
             </div>
-            <h1 className="fb-text-brand">{t("common.sending_responses")}</h1>
+            <h1 className="text-brand">{t("common.sending_responses")}</h1>
           </>
         )}
       </div>

packages/surveys/src/components/general/error-component.tsx

@@ -21,14 +21,9 @@ export function ErrorComponent({ errorType }: ErrorComponentProps) {
   const error = errorData[errorType];
 
   return (
-    <div
-      className="fb-flex fb-flex-col fb-bg-white fb-p-8 fb-text-center fb-items-center"
-      role="alert"
-      aria-live="assertive">
-      <span className="fb-mb-1.5 fb-text-base fb-font-bold fb-leading-6 fb-text-slate-900">
-        {error.title}
-      </span>
-      <p className="fb-max-w-lg fb-text-sm fb-font-normal fb-leading-6 fb-text-slate-600">{error.message}</p>
+    <div className="flex flex-col items-center bg-white p-8 text-center" role="alert" aria-live="assertive">
+      <span className="mb-1.5 text-base font-bold leading-6 text-slate-900">{error.title}</span>
+      <p className="max-w-lg text-sm font-normal leading-6 text-slate-600">{error.message}</p>
     </div>
   );
 }

packages/surveys/src/components/general/file-input.tsx

@@ -327,7 +327,7 @@ export function FileInput({
   }, [allowedFileExtensions]);
 
   return (
-    <div className="fb-bg-input-bg hover:fb-bg-input-bg-selected fb-border-border fb-relative fb-mt-3 fb-flex fb-w-full fb-flex-col fb-justify-center fb-items-center fb-rounded-lg fb-border-2 fb-border-dashed dark:fb-border-slate-600 dark:fb-bg-slate-700 dark:hover:fb-border-slate-500 dark:hover:fb-bg-slate-800">
+    <div className="bg-input-bg hover:bg-input-bg-selected border-border relative mt-3 flex w-full flex-col items-center justify-center rounded-lg border-2 border-dashed dark:border-slate-600 dark:bg-slate-700 dark:hover:border-slate-500 dark:hover:bg-slate-800">
       <div ref={parent}>
         {fileUrls?.map((fileUrl, index) => {
           const fileName = getOriginalFileNameFromUrl(fileUrl);
@@ -336,19 +336,19 @@ export function FileInput({
               key={index}
               aria-label={t("common.you_have_successfully_uploaded_the_file", { fileName })}
               tabIndex={0}
-              className="fb-bg-input-bg-selected fb-border-border fb-relative fb-m-2 fb-rounded-md fb-border">
-              <div className="fb-absolute fb-right-0 fb-top-0 fb-m-2">
+              className="bg-input-bg-selected border-border relative m-2 rounded-md border">
+              <div className="absolute right-0 top-0 m-2">
                 <button
                   type="button"
                   aria-label={`${t("common.delete_file")} ${fileName}`}
-                  className="fb-bg-survey-bg fb-flex fb-h-5 fb-w-5 fb-cursor-pointer fb-items-center fb-justify-center fb-rounded-md">
+                  className="bg-survey-bg flex h-5 w-5 cursor-pointer items-center justify-center rounded-md">
                   <svg
                     xmlns="http://www.w3.org/2000/svg"
                     fill="none"
                     viewBox="0 0 26 26"
                     strokeWidth={1}
                     stroke="currentColor"
-                    className="fb-text-heading fb-h-5"
+                    className="text-heading h-5"
                     onClick={(e) => {
                       handleDeleteFile(index, e);
                     }}>
@@ -356,7 +356,7 @@ export function FileInput({
                   </svg>
                 </button>
               </div>
-              <div className="fb-flex fb-flex-col fb-items-center fb-justify-center fb-p-2">
+              <div className="flex flex-col items-center justify-center p-2">
                 <svg
                   xmlns="http://www.w3.org/2000/svg"
                   width="24"
@@ -367,12 +367,12 @@ export function FileInput({
                   strokeWidth="2"
                   strokeLinecap="round"
                   strokeLinejoin="round"
-                  className="fb-text-heading fb-h-6"
+                  className="text-heading h-6"
                   aria-hidden="true">
                   <path d="M14.5 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7.5L14.5 2z" />
                   <polyline points="14 2 14 8 20 8" />
                 </svg>
-                <p className="fb-text-heading fb-mt-1 fb-w-full fb-overflow-hidden fb-overflow-ellipsis fb-whitespace-nowrap fb-px-2 fb-text-center fb-text-sm">
+                <p className="text-heading mt-1 w-full overflow-hidden overflow-ellipsis whitespace-nowrap px-2 text-center text-sm">
                   {fileName}
                 </p>
               </div>
@@ -383,8 +383,8 @@ export function FileInput({
 
       <div>
         {isUploading ? (
-          <div className="fb-inset-0 fb-flex fb-animate-pulse fb-items-center fb-justify-center fb-rounded-lg fb-py-4">
-            <label htmlFor={uniqueHtmlFor} className="fb-text-subheading fb-text-sm fb-font-medium">
+          <div className="inset-0 flex animate-pulse items-center justify-center rounded-lg py-4">
+            <label htmlFor={uniqueHtmlFor} className="text-subheading text-sm font-medium">
               {t("common.uploading")}...
             </label>
           </div>
@@ -394,7 +394,7 @@ export function FileInput({
           {showUploader ? (
             <button
               type="button"
-              className="focus:fb-outline-brand fb-flex fb-flex-col fb-items-center fb-justify-center fb-py-6 hover:fb-cursor-pointer w-full"
+              className="focus:outline-brand flex w-full flex-col items-center justify-center py-6 hover:cursor-pointer"
               aria-label={t("common.upload_files_by_clicking_or_dragging_them_here")}
               onClick={() => document.getElementById(uniqueHtmlFor)?.click()}>
               <svg
@@ -403,7 +403,7 @@ export function FileInput({
                 viewBox="0 0 24 24"
                 strokeWidth={1.5}
                 stroke="currentColor"
-                className="fb-text-placeholder fb-h-6"
+                className="text-placeholder h-6"
                 aria-hidden="true">
                 <path
                   strokeLinecap="round"
@@ -412,7 +412,7 @@ export function FileInput({
                 />
               </svg>
               <span
-                className="fb-text-placeholder fb-mt-2 fb-text-sm dark:fb-text-slate-400"
+                className="text-placeholder mt-2 text-sm dark:text-slate-400"
                 id={`${uniqueHtmlFor}-label`}>
                 {t("common.click_or_drag_to_upload_files")}
               </span>
@@ -421,7 +421,7 @@ export function FileInput({
                 id={uniqueHtmlFor}
                 name={uniqueHtmlFor}
                 accept={mimeTypeForAllowedFileExtensions}
-                className="fb-hidden"
+                className="hidden"
                 onChange={async (e) => {
                   const inputElement = e.target as HTMLInputElement;
                   if (inputElement.files) {

packages/surveys/src/components/general/formbricks-branding.tsx

@@ -3,16 +3,16 @@ import { useTranslation } from "react-i18next";
 export function FormbricksBranding() {
   const { t } = useTranslation();
   return (
-    <span className="fb-flex fb-justify-center">
+    <span className="flex justify-center">
       <a
         href="https://formbricks.com?utm_source=survey_branding"
         target="_blank"
         tabIndex={-1}
         rel="noopener">
-        <p className="fb-text-signature fb-text-xs">
+        <p className="text-signature text-xs">
           {t("common.powered_by")}{" "}
           <b>
-            <span className="fb-text-branding-text hover:fb-text-signature">Formbricks</span>
+            <span className="text-branding-text hover:text-signature">Formbricks</span>
           </b>
         </p>
       </a>

packages/surveys/src/components/general/headline.tsx

@@ -1,7 +1,7 @@
 import DOMPurify from "isomorphic-dompurify";
 import { useTranslation } from "react-i18next";
 import { type TSurveyQuestionId } from "@formbricks/types/surveys/types";
-import { isValidHTML } from "@/lib/html-utils";
+import { isValidHTML, stripInlineStyles } from "@/lib/html-utils";
 
 interface HeadlineProps {
   headline: string;
@@ -12,30 +12,38 @@ interface HeadlineProps {
 
 export function Headline({ headline, questionId, required = true, alignTextCenter = false }: HeadlineProps) {
   const { t } = useTranslation();
-  const isHeadlineHtml = isValidHTML(headline);
-  const safeHtml = isHeadlineHtml && headline ? DOMPurify.sanitize(headline, { ADD_ATTR: ["target"] }) : "";
+  // Strip inline styles BEFORE parsing to avoid CSP violations
+  const strippedHeadline = stripInlineStyles(headline);
+  const isHeadlineHtml = isValidHTML(strippedHeadline);
+  const safeHtml =
+    isHeadlineHtml && strippedHeadline
+      ? DOMPurify.sanitize(strippedHeadline, {
+          ADD_ATTR: ["target"],
+          FORBID_ATTR: ["style"], // Additional safeguard to remove any remaining inline styles
+        })
+      : "";
 
   return (
-    <label htmlFor={questionId} className="fb-text-heading fb-mb-[3px] fb-flex fb-flex-col">
+    <label htmlFor={questionId} className="text-heading mb-[3px] flex flex-col">
       {!required && (
         <span
-          className="fb-text-xs fb-opacity-60 fb-font-normal fb-leading-6 fb-mb-[3px]"
+          className="mb-[3px] text-xs font-normal leading-6 opacity-60"
           tabIndex={-1}
           data-testid="fb__surveys__headline-optional-text-test">
           {t("common.optional")}
         </span>
       )}
       <div
-        className={`fb-flex fb-items-center ${alignTextCenter ? "fb-justify-center" : "fb-justify-between"}`}
+        className={`flex items-center ${alignTextCenter ? "justify-center" : "justify-between"}`}
         dir="auto">
         {isHeadlineHtml ? (
           <div
             data-testid="fb__surveys__headline-text-test"
-            className="fb-htmlbody fb-text-base"
+            className="htmlbody text-base"
             dangerouslySetInnerHTML={{ __html: safeHtml }}
           />
         ) : (
-          <p data-testid="fb__surveys__headline-text-test" className="fb-text-base fb-font-semibold">
+          <p data-testid="fb__surveys__headline-text-test" className="text-base font-semibold">
             {headline}
           </p>
         )}

packages/surveys/src/components/general/input.tsx

@@ -9,7 +9,7 @@ export const Input = forwardRef<HTMLInputElement, InputProps>(({ className, ...p
     <input
       ref={ref} // Forward the ref to the input element
       className={cn(
-        "focus:fb-border-brand fb-bg-input-bg fb-flex fb-w-full fb-border fb-border-border fb-rounded-custom fb-px-3 fb-py-2 fb-text-sm fb-text-subheading placeholder:fb-text-placeholder focus:fb-outline-none focus:fb-ring-2 focus:fb-ring-offset-2 disabled:fb-cursor-not-allowed disabled:fb-opacity-50 dark:fb-border-slate-500 dark:fb-text-slate-300",
+        "focus:border-brand bg-input-bg border-border rounded-custom text-subheading placeholder:text-placeholder flex w-full border px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 dark:border-slate-500 dark:text-slate-300",
         className ?? ""
       )}
       dir="auto"

packages/surveys/src/components/general/label.tsx

@@ -5,7 +5,7 @@ interface LabelProps {
 
 export function Label({ text, htmlForId }: Readonly<LabelProps>) {
   return (
-    <label htmlFor={htmlForId} className="fb-text-subheading fb-font-normal fb-text-sm fb-block" dir="auto">
+    <label htmlFor={htmlForId} className="text-subheading block text-sm font-normal" dir="auto">
       {text}
     </label>
   );

packages/surveys/src/components/general/language-switch.tsx

@@ -75,12 +75,12 @@ export function LanguageSwitch({
   });
 
   return (
-    <div className="fb-z-[1001] fb-flex fb-w-fit fb-items-center">
+    <div className="z-[1001] flex w-fit items-center">
       <button
         title={t("common.language_switch")}
         type="button"
         className={cn(
-          "fb-text-heading fb-relative fb-h-8 fb-w-8 fb-rounded-md focus:fb-outline-none focus:fb-ring-2 focus:fb-ring-offset-2 fb-justify-center fb-flex fb-items-center"
+          "text-heading relative flex h-8 w-8 items-center justify-center rounded-md focus:outline-none focus:ring-2 focus:ring-offset-2"
         )}
         style={{
           backgroundColor: isHovered ? hoverColorWithOpacity : "transparent",
@@ -99,8 +99,8 @@ export function LanguageSwitch({
       {showLanguageDropdown ? (
         <div
           className={cn(
-            "fb-bg-brand fb-text-on-brand fb-absolute fb-top-10 fb-space-y-2 fb-rounded-md fb-p-2 fb-text-xs",
-            dir === "rtl" ? "fb-left-8" : "fb-right-8"
+            "bg-brand text-on-brand absolute top-10 space-y-2 rounded-md p-2 text-xs",
+            dir === "rtl" ? "left-8" : "right-8"
           )}
           ref={languageDropdownRef}>
           {surveyLanguages.map((surveyLanguage) => {
@@ -109,7 +109,7 @@ export function LanguageSwitch({
               <button
                 key={surveyLanguage.language.id}
                 type="button"
-                className="fb-block fb-w-full fb-p-1.5 fb-text-left hover:fb-opacity-80"
+                className="block w-full p-1.5 text-left hover:opacity-80"
                 onClick={() => {
                   changeLanguage(surveyLanguage.language.code);
                 }}>

packages/surveys/src/components/general/loading-spinner.tsx

@@ -4,15 +4,15 @@ export function LoadingSpinner({ className }: { className?: string }) {
   return (
     <div
       data-testid="loading-spinner"
-      className={cn("fb-flex fb-h-full fb-w-full fb-items-center fb-justify-center", className ?? "")}>
+      className={cn("flex h-full w-full items-center justify-center", className ?? "")}>
       <svg
-        className="fb-m-2 fb-h-6 fb-w-6 fb-animate-spin fb-text-brand"
+        className="text-brand m-2 h-6 w-6 animate-spin"
         xmlns="http://www.w3.org/2000/svg"
         fill="none"
         viewBox="0 0 24 24">
-        <circle className="fb-opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4" />
+        <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4" />
         <path
-          className="fb-opacity-75"
+          className="opacity-75"
           fill="currentColor"
           d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
         />

packages/surveys/src/components/general/progress.tsx

@@ -1,8 +1,8 @@
 export function Progress({ progress }: { progress: number }) {
   return (
-    <div className="fb-bg-accent-bg fb-h-2 fb-w-full fb-rounded-none">
+    <div className="bg-accent-bg h-2 w-full rounded-none">
       <div
-        className="fb-transition-width fb-bg-brand fb-z-20 fb-h-2 fb-duration-500"
+        className="transition-width bg-brand z-20 h-2 duration-500"
         style={{ width: `${Math.floor(progress * 100).toString()}%` }}
       />
     </div>

packages/surveys/src/components/general/question-media.tsx

@@ -31,19 +31,16 @@ export function QuestionMedia({ imgUrl, videoUrl, altText = "Image" }: QuestionM
   const [isLoading, setIsLoading] = useState(true);
 
   return (
-    <div className="fb-group/image fb-relative fb-mb-6 fb-block fb-min-h-40 fb-rounded-md">
+    <div className="group/image relative mb-6 block min-h-40 rounded-md">
       {isLoading ? (
-        <div className="fb-absolute fb-inset-auto fb-flex fb-h-full fb-w-full fb-animate-pulse fb-items-center fb-justify-center fb-rounded-md fb-bg-slate-200" />
+        <div className="absolute inset-auto flex h-full w-full animate-pulse items-center justify-center rounded-md bg-slate-200" />
       ) : null}
       {imgUrl ? (
         <img
           key={imgUrl}
           src={imgUrl}
           alt={altText}
-          className={cn(
-            "fb-rounded-custom fb-max-h-[40dvh] fb-mx-auto fb-object-contain",
-            isLoading ? "fb-opacity-0" : ""
-          )}
+          className={cn("rounded-custom mx-auto max-h-[40dvh] object-contain", isLoading ? "opacity-0" : "")}
           onLoad={() => {
             setIsLoading(false);
           }}
@@ -53,13 +50,13 @@ export function QuestionMedia({ imgUrl, videoUrl, altText = "Image" }: QuestionM
         />
       ) : null}
       {videoUrlWithParams ? (
-        <div className="fb-relative">
-          <div className="fb-rounded-custom fb-bg-black">
+        <div className="relative">
+          <div className="rounded-custom bg-black">
             <iframe
               src={videoUrlWithParams}
               title={t("common.question_video")}
               frameBorder="0"
-              className={cn("fb-rounded-custom fb-aspect-video fb-w-full", isLoading ? "fb-opacity-0" : "")}
+              className={cn("rounded-custom aspect-video w-full", isLoading ? "opacity-0" : "")}
               onLoad={() => {
                 setIsLoading(false);
               }}
@@ -77,7 +74,7 @@ export function QuestionMedia({ imgUrl, videoUrl, altText = "Image" }: QuestionM
         target="_blank"
         rel="noreferrer"
         aria-label={t("common.open_in_new_tab")}
-        className="fb-absolute fb-bottom-2 fb-right-2 fb-flex fb-items-center fb-gap-2 fb-rounded-md fb-bg-slate-800 fb-bg-opacity-40 fb-p-1.5 fb-text-white fb-opacity-0 fb-backdrop-blur-lg fb-transition fb-duration-300 fb-ease-in-out hover:fb-bg-opacity-65 group-hover/image:fb-opacity-100">
+        className="absolute bottom-2 right-2 flex items-center gap-2 rounded-md bg-slate-800 bg-opacity-40 p-1.5 text-white opacity-0 backdrop-blur-lg transition duration-300 ease-in-out hover:bg-opacity-65 group-hover/image:opacity-100">
         {imgUrl ? <ImageDownIcon size={20} /> : <ExpandIcon size={20} />}
       </a>
     </div>

packages/surveys/src/components/general/recaptcha-branding.tsx

@@ -3,7 +3,7 @@ import { useTranslation } from "react-i18next";
 export function RecaptchaBranding() {
   const { t } = useTranslation();
   return (
-    <p className="fb-text-signature fb-text-xs fb-text-center fb-leading-6 fb-text-balance">
+    <p className="text-signature text-balance text-center text-xs leading-6">
       {t("common.protected_by_reCAPTCHA_and_the_Google")}{" "}
       <b>
         <a target="_blank" rel="noopener" href="https://policies.google.com/privacy">

packages/surveys/src/components/general/response-error-component.tsx

@@ -13,24 +13,24 @@ interface ResponseErrorComponentProps {
 export function ResponseErrorComponent({ questions, responseData, onRetry }: ResponseErrorComponentProps) {
   const { t } = useTranslation();
   return (
-    <div className="fb-flex fb-flex-col fb-bg-white fb-p-4">
-      <span className="fb-mb-1.5 fb-text-base fb-font-bold fb-leading-6 fb-text-slate-900">
+    <div className="flex flex-col bg-white p-4">
+      <span className="mb-1.5 text-base font-bold leading-6 text-slate-900">
         {t("common.your_feedback_is_stuck")}
       </span>
-      <p className="fb-max-w-md fb-text-sm fb-font-normal fb-leading-6 fb-text-slate-600">
+      <p className="max-w-md text-sm font-normal leading-6 text-slate-600">
         {t("common.the_servers_cannot_be_reached_at_the_moment")}
         <br />
         {t("common.please_retry_now_or_try_again_later")}
       </p>
-      <div className="fb-mt-4 fb-rounded-lg fb-border fb-border-slate-200 fb-bg-slate-100 fb-px-4 fb-py-5">
-        <div className="fb-flex fb-max-h-36 fb-flex-1 fb-flex-col fb-space-y-3 fb-overflow-y-scroll">
+      <div className="mt-4 rounded-lg border border-slate-200 bg-slate-100 px-4 py-5">
+        <div className="flex max-h-36 flex-1 flex-col space-y-3 overflow-y-scroll">
           {questions.map((question, index) => {
             const response = responseData[question.id];
             if (!response) return;
             return (
-              <div className="fb-flex fb-flex-col" key={`response-${index.toString()}`}>
-                <span className="fb-text-sm fb-leading-6 fb-text-slate-900">{`${t("common.question")} ${(index + 1).toString()}`}</span>
-                <span className="fb-mt-1 fb-text-sm fb-font-semibold fb-leading-6 fb-text-slate-900">
+              <div className="flex flex-col" key={`response-${index.toString()}`}>
+                <span className="text-sm leading-6 text-slate-900">{`${t("common.question")} ${(index + 1).toString()}`}</span>
+                <span className="mt-1 text-sm font-semibold leading-6 text-slate-900">
                   {processResponseData(response)}
                 </span>
               </div>
@@ -38,7 +38,7 @@ export function ResponseErrorComponent({ questions, responseData, onRetry }: Res
           })}
         </div>
       </div>
-      <div className="fb-mt-4 fb-flex fb-flex-1 fb-flex-row fb-items-center fb-justify-end fb-space-x-2">
+      <div className="mt-4 flex flex-1 flex-row items-center justify-end space-x-2">
         <SubmitButton
           buttonLabel={t("common.retry")}
           isLastQuestion={false}

packages/surveys/src/components/general/subheader.tsx

@@ -1,6 +1,6 @@
 import DOMPurify from "isomorphic-dompurify";
 import { type TSurveyQuestionId } from "@formbricks/types/surveys/types";
-import { isValidHTML } from "@/lib/html-utils";
+import { isValidHTML, stripInlineStyles } from "@/lib/html-utils";
 
 interface SubheaderProps {
   subheader?: string;
@@ -8,19 +8,27 @@ interface SubheaderProps {
 }
 
 export function Subheader({ subheader, questionId }: SubheaderProps) {
-  const isHtml = subheader ? isValidHTML(subheader) : false;
-  const safeHtml = isHtml && subheader ? DOMPurify.sanitize(subheader, { ADD_ATTR: ["target"] }) : "";
+  // Strip inline styles BEFORE parsing to avoid CSP violations
+  const strippedSubheader = subheader ? stripInlineStyles(subheader) : "";
+  const isHtml = strippedSubheader ? isValidHTML(strippedSubheader) : false;
+  const safeHtml =
+    isHtml && strippedSubheader
+      ? DOMPurify.sanitize(strippedSubheader, {
+          ADD_ATTR: ["target"],
+          FORBID_ATTR: ["style"], // Additional safeguard to remove any remaining inline styles
+        })
+      : "";
 
   if (!subheader) return null;
 
   return (
     <label
       htmlFor={questionId}
-      className="fb-text-subheading fb-block fb-break-words fb-text-sm fb-font-normal fb-leading-6"
+      className="text-subheading block break-words text-sm font-normal leading-6"
       data-testid="subheader"
       dir="auto">
       {isHtml ? (
-        <span className="fb-htmlbody" dangerouslySetInnerHTML={{ __html: safeHtml }} />
+        <span className="htmlbody" dangerouslySetInnerHTML={{ __html: safeHtml }} />
       ) : (
         <span>{subheader}</span>
       )}

packages/surveys/src/components/general/survey-close-button.tsx

@@ -16,7 +16,7 @@ export function SurveyCloseButton({ onClose, hoverColor, borderRadius }: Readonl
   const hoverColorWithOpacity = hoverColor ?? mixColor("#000000", "#ffffff", 0.8);
 
   return (
-    <div className="fb-z-[1001] fb-flex fb-w-fit fb-items-center">
+    <div className="z-[1001] flex w-fit items-center">
       <button
         type="button"
         onClick={onClose}
@@ -28,7 +28,7 @@ export function SurveyCloseButton({ onClose, hoverColor, borderRadius }: Readonl
         onMouseEnter={() => setIsHovered(true)}
         onMouseLeave={() => setIsHovered(false)}
         className={cn(
-          "fb-text-heading fb-relative focus:fb-outline-none focus:fb-ring-2 focus:fb-ring-offset-2 fb-p-2 fb-h-8 fb-w-8 flex items-center justify-center"
+          "text-heading relative flex h-8 w-8 items-center justify-center p-2 focus:outline-none focus:ring-2 focus:ring-offset-2"
         )}
         aria-label={t("common.close_survey")}>
         <CloseIcon />

packages/surveys/src/components/general/survey.tsx

@@ -203,8 +203,9 @@ export function Survey({
   const getShowSurveyCloseButton = (offset: number) => {
     return offset === 0 && localSurvey.type !== "link";
   };
+  const enabledLanguages = localSurvey.languages.filter((lang) => lang.enabled);
   const getShowLanguageSwitch = (offset: number) => {
-    return localSurvey.showLanguageSwitch && localSurvey.languages.length > 0 && offset <= 0;
+    return localSurvey.showLanguageSwitch && enabledLanguages.length > 1 && offset <= 0;
   };
 
   const onFileUpload = async (file: TJsFileUploadParams["file"], params?: TUploadFileConfig) => {
@@ -665,7 +666,7 @@ export function Survey({
           return (
             <>
               {localSurvey.type !== "link" ? (
-                <div className="fb-flex fb-h-6 fb-justify-end fb-pr-2 fb-pt-2 fb-bg-white">
+                <div className="flex h-6 justify-end bg-white pr-2 pt-2">
                   <SurveyCloseButton onClose={onClose} />
                 </div>
               ) : null}
@@ -762,19 +763,19 @@ export function Survey({
         setHasInteracted={setHasInteracted}>
         <div
           className={cn(
-            "fb-no-scrollbar fb-bg-survey-bg fb-flex fb-h-full fb-w-full fb-flex-col fb-justify-between fb-overflow-hidden fb-transition-all fb-duration-1000 fb-ease-in-out",
-            offset === 0 || cardArrangement === "simple" ? "fb-opacity-100" : "fb-opacity-0"
+            "no-scrollbar bg-survey-bg flex h-full w-full flex-col justify-between overflow-hidden transition-all duration-1000 ease-in-out",
+            offset === 0 || cardArrangement === "simple" ? "opacity-100" : "opacity-0"
           )}>
-          <div className={cn("fb-relative")}>
-            <div className="fb-flex fb-flex-col fb-w-full fb-items-end">
+          <div className={cn("relative")}>
+            <div className="flex w-full flex-col items-end">
               {showProgressBar ? <ProgressBar survey={localSurvey} questionId={questionId} /> : null}
 
               <div
                 className={cn(
-                  "fb-relative fb-w-full",
-                  isCloseButtonVisible || isLanguageSwitchVisible ? "fb-h-8" : "fb-h-5"
+                  "relative w-full",
+                  isCloseButtonVisible || isLanguageSwitchVisible ? "h-8" : "h-5"
                 )}>
-                <div className={cn("fb-flex fb-items-center fb-justify-end fb-w-full")}>
+                <div className={cn("flex w-full items-center justify-end")}>
                   {isLanguageSwitchVisible && (
                     <LanguageSwitch
                       survey={localSurvey}
@@ -787,7 +788,7 @@ export function Survey({
                     />
                   )}
                   {isLanguageSwitchVisible && isCloseButtonVisible && (
-                    <div aria-hidden="true" className="fb-h-5 fb-w-px fb-bg-slate-200 fb-z-[1001]" />
+                    <div aria-hidden="true" className="z-[1001] h-5 w-px bg-slate-200" />
                   )}
 
                   {isCloseButtonVisible && (
@@ -803,16 +804,16 @@ export function Survey({
             <div
               ref={contentRef}
               className={cn(
-                loadingElement ? "fb-animate-pulse fb-opacity-60" : "",
-                fullSizeCards ? "" : "fb-my-auto"
+                loadingElement ? "animate-pulse opacity-60" : "",
+                fullSizeCards ? "" : "my-auto"
               )}>
               {content()}
             </div>
 
             <div
               className={cn(
-                "fb-flex fb-flex-col fb-justify-center fb-gap-2",
-                isCloseButtonVisible || isLanguageSwitchVisible ? "fb-p-2" : "fb-p-3"
+                "flex flex-col justify-center gap-2",
+                isCloseButtonVisible || isLanguageSwitchVisible ? "p-2" : "p-3"
               )}>
               {isBrandingEnabled ? <FormbricksBranding /> : null}
               {isSpamProtectionEnabled ? <RecaptchaBranding /> : null}

packages/surveys/src/components/general/welcome-card.tsx

@@ -30,7 +30,7 @@ interface WelcomeCardProps {
 
 function TimerIcon() {
   return (
-    <div className="fb-mr-1">
+    <div className="mr-1">
       <svg
         xmlns="http://www.w3.org/2000/svg"
         width="16"
@@ -47,14 +47,14 @@ function TimerIcon() {
 
 function UsersIcon() {
   return (
-    <div className="fb-mr-1">
+    <div className="mr-1">
       <svg
         xmlns="http://www.w3.org/2000/svg"
         fill="none"
         viewBox="0 0 24 24"
         strokeWidth="1.5"
         stroke="currentColor"
-        className="fb-h-4 fb-w-4">
+        className="h-4 w-4">
         <path
           strokeLinecap="round"
           strokeLinejoin="round"
@@ -144,11 +144,7 @@ export function WelcomeCard({
     <ScrollableContainer fullSizeCards={fullSizeCards}>
       <div>
         {fileUrl ? (
-          <img
-            src={fileUrl}
-            className="fb-mb-8 fb-max-h-96 fb-w-1/4 fb-object-contain"
-            alt={t("common.company_logo")}
-          />
+          <img src={fileUrl} className="mb-8 max-h-96 w-1/4 object-contain" alt={t("common.company_logo")} />
         ) : null}
 
         <Headline
@@ -163,7 +159,7 @@ export function WelcomeCard({
           )}
           questionId="welcomeCard"
         />
-        <div className="fb-mt-4 fb-flex fb-gap-4 fb-pt-4">
+        <div className="mt-4 flex gap-4 pt-4">
           <SubmitButton
             buttonLabel={getLocalizedValue(buttonLabel, languageCode)}
             isLastQuestion={false}
@@ -180,10 +176,10 @@ export function WelcomeCard({
         </div>
         {timeToFinish && !showResponseCount ? (
           <div
-            className="fb-items-center fb-text-subheading fb-my-4 fb-flex"
+            className="text-subheading my-4 flex items-center"
             data-testid="fb__surveys__welcome-card__time-display">
             <TimerIcon />
-            <p className="fb-pt-1 fb-text-xs">
+            <p className="pt-1 text-xs">
               <span>
                 {t("common.takes")} {calculateTimeToComplete()}{" "}
               </span>
@@ -191,9 +187,9 @@ export function WelcomeCard({
           </div>
         ) : null}
         {showResponseCount && !timeToFinish && responseCount && responseCount > 3 ? (
-          <div className="fb-items-center fb-text-subheading fb-my-4 fb-flex">
+          <div className="text-subheading my-4 flex items-center">
             <UsersIcon />
-            <p className="fb-pt-1 fb-text-xs">
+            <p className="pt-1 text-xs">
               <span data-testid="fb__surveys__welcome-card__response-count">
                 {t("common.people_responded", { count: responseCount })}
               </span>
@@ -201,9 +197,9 @@ export function WelcomeCard({
           </div>
         ) : null}
         {timeToFinish && showResponseCount ? (
-          <div className="fb-items-center fb-text-subheading fb-my-4 fb-flex">
+          <div className="text-subheading my-4 flex items-center">
             <TimerIcon />
-            <p className="fb-pt-1 fb-text-xs" data-testid="fb__surveys__welcome-card__info-text-test">
+            <p className="pt-1 text-xs" data-testid="fb__surveys__welcome-card__info-text-test">
               <span>
                 {t("common.takes")} {calculateTimeToComplete()}{" "}
               </span>

packages/surveys/src/components/questions/address-question.tsx

@@ -125,7 +125,7 @@ export function AddressQuestion({
 
   return (
     <ScrollableContainer fullSizeCards={fullSizeCards}>
-      <form key={question.id} onSubmit={handleSubmit} className="fb-w-full" ref={formRef}>
+      <form key={question.id} onSubmit={handleSubmit} className="w-full" ref={formRef}>
         <div>
           {isMediaAvailable ? (
             <QuestionMedia imgUrl={question.imageUrl} videoUrl={question.videoUrl} />
@@ -140,7 +140,7 @@ export function AddressQuestion({
             questionId={question.id}
           />
 
-          <div className="fb-flex fb-flex-col fb-space-y-2 fb-mt-4 fb-w-full">
+          <div className="mt-4 flex w-full flex-col space-y-2">
             {fields.map((field, index) => {
               const isFieldRequired = () => {
                 if (field.required) {
@@ -160,7 +160,7 @@ export function AddressQuestion({
 
               return (
                 field.show && (
-                  <div className="fb-space-y-1">
+                  <div className="space-y-1">
                     <Label htmlForId={field.id} text={isFieldRequired() ? `${field.label}*` : field.label} />
                     <Input
                       id={field.id}
@@ -181,7 +181,7 @@ export function AddressQuestion({
               );
             })}
           </div>
-          <div className="fb-flex fb-flex-row-reverse fb-w-full fb-justify-between fb-pt-4">
+          <div className="flex w-full flex-row-reverse justify-between pt-4">
             <SubmitButton
               tabIndex={isCurrent ? 0 : -1}
               buttonLabel={getLocalizedValue(question.buttonLabel, languageCode)}

packages/surveys/src/components/questions/cal-question.tsx

@@ -84,7 +84,7 @@ export function CalQuestion({
           onChange({ [question.id]: value });
           onSubmit({ [question.id]: value }, updatedttc);
         }}
-        className="fb-w-full">
+        className="w-full">
         <div>
           {isMediaAvailable ? (
             <QuestionMedia imgUrl={question.imageUrl} videoUrl={question.videoUrl} />
@@ -99,9 +99,9 @@ export function CalQuestion({
             questionId={question.id}
           />
           <CalEmbed key={question.id} question={question} onSuccessfulBooking={onSuccessfulBooking} />
-          {errorMessage ? <span className="fb-text-red-500">{errorMessage}</span> : null}
+          {errorMessage ? <span className="text-red-500">{errorMessage}</span> : null}
         </div>
-        <div className="fb-flex fb-flex-row-reverse fb-w-full fb-justify-between fb-pt-4">
+        <div className="flex w-full flex-row-reverse justify-between pt-4">
           <SubmitButton
             buttonLabel={getLocalizedValue(question.buttonLabel, languageCode)}
             isLastQuestion={isLastQuestion}

packages/surveys/src/components/questions/consent-question.tsx

@@ -93,7 +93,7 @@ export function ConsentQuestion({
               document.getElementById(`${question.id}-label`)?.focus();
             }
           }}
-          className="fb-border-border fb-bg-input-bg fb-text-heading hover:fb-bg-input-bg-selected focus:fb-bg-input-bg-selected focus:fb-ring-brand fb-rounded-custom fb-relative fb-z-10 fb-my-2 fb-flex fb-w-full fb-cursor-pointer fb-items-center fb-border fb-p-4 fb-text-sm focus:fb-outline-none focus:fb-ring-2 focus:fb-ring-offset-2">
+          className="border-border bg-input-bg text-heading hover:bg-input-bg-selected focus:bg-input-bg-selected focus:ring-brand rounded-custom relative z-10 my-2 flex w-full cursor-pointer items-center border p-4 text-sm focus:outline-none focus:ring-2 focus:ring-offset-2">
           <input
             tabIndex={-1}
             type="checkbox"
@@ -109,15 +109,15 @@ export function ConsentQuestion({
               }
             }}
             checked={value === "accepted"}
-            className="fb-border-brand fb-text-brand fb-h-4 fb-w-4 fb-border focus:fb-ring-0 focus:fb-ring-offset-0"
+            className="border-brand text-brand h-4 w-4 border focus:ring-0 focus:ring-offset-0"
             aria-labelledby={`${question.id}-label`}
             required={question.required}
           />
-          <span id={`${question.id}-label`} className="fb-ml-3 fb-mr-3 fb-font-medium fb-flex-1" dir="auto">
+          <span id={`${question.id}-label`} className="ml-3 mr-3 flex-1 font-medium" dir="auto">
             {getLocalizedValue(question.label, languageCode)}
           </span>
         </label>
-        <div className="fb-flex fb-flex-row-reverse fb-w-full fb-justify-between fb-pt-4">
+        <div className="flex w-full flex-row-reverse justify-between pt-4">
           <SubmitButton
             tabIndex={isCurrent ? 0 : -1}
             buttonLabel={getLocalizedValue(question.buttonLabel, languageCode)}

packages/surveys/src/components/questions/contact-info-question.tsx

@@ -120,7 +120,7 @@ export function ContactInfoQuestion({
 
   return (
     <ScrollableContainer fullSizeCards={fullSizeCards}>
-      <form key={question.id} onSubmit={handleSubmit} className="fb-w-full" ref={formRef}>
+      <form key={question.id} onSubmit={handleSubmit} className="w-full" ref={formRef}>
         {isMediaAvailable ? <QuestionMedia imgUrl={question.imageUrl} videoUrl={question.videoUrl} /> : null}
         <Headline
           headline={getLocalizedValue(question.headline, languageCode)}
@@ -132,7 +132,7 @@ export function ContactInfoQuestion({
           questionId={question.id}
         />
 
-        <div className="fb-flex fb-flex-col fb-space-y-2 fb-mt-4 fb-w-full">
+        <div className="mt-4 flex w-full flex-col space-y-2">
           {fields.map((field, index) => {
             const isFieldRequired = () => {
               if (field.required) {
@@ -159,7 +159,7 @@ export function ContactInfoQuestion({
 
             return (
               field.show && (
-                <div className="fb-space-y-1">
+                <div className="space-y-1">
                   <Label htmlForId={field.id} text={isFieldRequired() ? `${field.label}*` : field.label} />
                   <Input
                     id={field.id}
@@ -180,7 +180,7 @@ export function ContactInfoQuestion({
             );
           })}
         </div>
-        <div className="fb-flex fb-flex-row-reverse fb-w-full fb-justify-between fb-pt-4">
+        <div className="flex w-full flex-row-reverse justify-between pt-4">
           <SubmitButton
             tabIndex={isCurrent ? 0 : -1}
             buttonLabel={getLocalizedValue(question.buttonLabel, languageCode)}

packages/surveys/src/components/questions/cta-question.tsx

@@ -65,8 +65,8 @@ export function CTAQuestion({
             subheader={question.subheader ? getLocalizedValue(question.subheader, languageCode) : ""}
             questionId={question.id}
           />
-          <div className="fb-flex fb-flex-row-reverse fb-w-full fb-justify-between fb-pt-4">
-            <div className="fb-flex fb-flex-row-reverse fb-w-full fb-justify-start">
+          <div className="flex w-full flex-row-reverse justify-between pt-4">
+            <div className="flex w-full flex-row-reverse justify-start">
               <SubmitButton
                 buttonLabel={getLocalizedValue(question.buttonLabel, languageCode)}
                 isLastQuestion={isLastQuestion}
@@ -98,7 +98,7 @@ export function CTAQuestion({
                     onSubmit({ [question.id]: "" }, updatedTtcObj);
                     onChange({ [question.id]: "" });
                   }}
-                  className="fb-text-heading focus:fb-ring-focus fb-mr-4 fb-flex fb-items-center fb-rounded-md fb-px-3 fb-py-3 fb-text-base fb-font-medium fb-leading-4 hover:fb-opacity-90 focus:fb-outline-none focus:fb-ring-2 focus:fb-ring-offset-2">
+                  className="text-heading focus:ring-focus mr-4 flex items-center rounded-md px-3 py-3 text-base font-medium leading-4 hover:opacity-90 focus:outline-none focus:ring-2 focus:ring-offset-2">
                   {getLocalizedValue(question.dismissButtonLabel, languageCode) || "Skip"}
                 </button>
               )}

packages/surveys/src/components/questions/date-question.tsx

@@ -151,7 +151,7 @@ export function DateQuestion({
           setTtc(updatedTtcObj);
           onSubmit({ [question.id]: value }, updatedTtcObj);
         }}
-        className="fb-w-full">
+        className="w-full">
         {isMediaAvailable ? <QuestionMedia imgUrl={question.imageUrl} videoUrl={question.videoUrl} /> : null}
         <Headline
           headline={getLocalizedValue(question.headline, languageCode)}
@@ -162,13 +162,13 @@ export function DateQuestion({
           subheader={question.subheader ? getLocalizedValue(question.subheader, languageCode) : ""}
           questionId={question.id}
         />
-        <div id="error-message" className="fb-text-red-600" aria-live="assertive">
+        <div id="error-message" className="text-red-600" aria-live="assertive">
           <span>{errorMessage}</span>
         </div>
         <div
-          className={cn("fb-mt-4 fb-w-full", errorMessage && "fb-rounded-lg fb-border-2 fb-border-red-500")}
+          className={cn("mt-4 w-full", errorMessage && "rounded-lg border-2 border-red-500")}
           id="date-picker-root">
-          <div className="fb-relative">
+          <div className="relative">
             {!datePickerOpen && (
               <button
                 onClick={() => {
@@ -185,14 +185,14 @@ export function DateQuestion({
                     : t("common.select_a_date")
                 }
                 aria-describedby={errorMessage ? "error-message" : undefined}
-                className="focus:fb-outline-brand fb-bg-input-bg hover:fb-bg-input-bg-selected fb-border-border fb-text-heading fb-rounded-custom fb-relative fb-flex fb-h-[12dvh] fb-w-full fb-cursor-pointer fb-appearance-none fb-items-center fb-justify-center fb-border fb-text-left fb-text-base fb-font-normal">
-                <div className="fb-flex fb-items-center fb-gap-2">
+                className="focus:outline-brand bg-input-bg hover:bg-input-bg-selected border-border text-heading rounded-custom relative flex h-[12dvh] w-full cursor-pointer appearance-none items-center justify-center border text-left text-base font-normal">
+                <div className="flex items-center gap-2">
                   {selectedDate ? (
-                    <div className="fb-flex fb-items-center fb-gap-2">
+                    <div className="flex items-center gap-2">
                       <CalendarCheckIcon /> <span>{formattedDate}</span>
                     </div>
                   ) : (
-                    <div className="fb-flex fb-items-center fb-gap-2">
+                    <div className="flex items-center gap-2">
                       <CalendarIcon /> <span>{t("common.select_a_date")}</span>
                     </div>
                   )}
@@ -225,13 +225,13 @@ export function DateQuestion({
               monthPlaceholder="MM"
               yearPlaceholder="YYYY"
               format={question.format ?? "M-d-y"}
-              className={`dp-input-root fb-rounded-custom wrapper-hide ${!datePickerOpen ? "" : "fb-h-[46dvh] sm:fb-h-[34dvh]"} ${hideInvalid ? "hide-invalid" : ""} `}
+              className={`dp-input-root rounded-custom wrapper-hide ${!datePickerOpen ? "" : "h-[46dvh] sm:h-[34dvh]"} ${hideInvalid ? "hide-invalid" : ""} `}
               calendarProps={{
                 className:
-                  "calendar-root !fb-text-heading !fb-bg-input-bg fb-border fb-border-border fb-rounded-custom fb-p-3 fb-h-[46dvh] sm:fb-h-[33dvh] fb-overflow-auto",
+                  "calendar-root !text-heading !bg-input-bg border border-border rounded-custom p-3 h-[46dvh] sm:h-[33dvh] overflow-auto",
                 tileClassName: ({ date }: { date: Date }) => {
                   const baseClass =
-                    "hover:fb-bg-input-bg-selected fb-rounded-custom fb-h-9 fb-p-0 fb-mt-1 fb-font-normal aria-selected:fb-opacity-100 focus:fb-ring-2 focus:fb-bg-slate-200";
+                    "hover:bg-input-bg-selected rounded-custom h-9 p-0 mt-1 font-normal aria-selected:opacity-100 focus:ring-2 focus:bg-slate-200";
                   // active date class (check first to take precedence over today's date)
                   if (
                     selectedDate &&
@@ -239,7 +239,7 @@ export function DateQuestion({
                     date.getMonth() === selectedDate.getMonth() &&
                     date.getFullYear() === selectedDate.getFullYear()
                   ) {
-                    return `${baseClass} !fb-bg-brand !fb-border-border-highlight !fb-text-calendar-tile`;
+                    return `${baseClass} !bg-brand !border-border-highlight !text-calendar-tile`;
                   }
                   // today's date class
                   if (
@@ -247,10 +247,10 @@ export function DateQuestion({
                     date.getMonth() === new Date().getMonth() &&
                     date.getFullYear() === new Date().getFullYear()
                   ) {
-                    return `${baseClass} !fb-bg-brand !fb-opacity-50 !fb-border-border-highlight !fb-text-calendar-tile focus:fb-ring-2 focus:fb-bg-slate-200`;
+                    return `${baseClass} !bg-brand !opacity-50 !border-border-highlight !text-calendar-tile focus:ring-2 focus:bg-slate-200`;
                   }
 
-                  return `${baseClass} !fb-text-heading`;
+                  return `${baseClass} !text-heading`;
                 },
                 formatShortWeekday: (_: any, date: Date) => {
                   return date.toLocaleDateString("en-US", { weekday: "short" }).slice(0, 2);
@@ -271,7 +271,7 @@ export function DateQuestion({
             />
           </div>
         </div>
-        <div className="fb-flex fb-flex-row-reverse fb-w-full fb-justify-between fb-pt-4">
+        <div className="flex w-full flex-row-reverse justify-between pt-4">
           <SubmitButton
             tabIndex={isCurrent ? 0 : -1}
             isLastQuestion={isLastQuestion}

packages/surveys/src/components/questions/file-upload-question.tsx

@@ -76,7 +76,7 @@ export function FileUploadQuestion({
             onSubmit({ [question.id]: "skipped" }, updatedTtcObj);
           }
         }}
-        className="fb-w-full">
+        className="w-full">
         {isMediaAvailable ? <QuestionMedia imgUrl={question.imageUrl} videoUrl={question.videoUrl} /> : null}
         <Headline
           headline={getLocalizedValue(question.headline, languageCode)}
@@ -105,7 +105,7 @@ export function FileUploadQuestion({
             : {})}
           {...(question.maxSizeInMB ? { maxSizeInMB: question.maxSizeInMB } : {})}
         />
-        <div className="fb-flex fb-flex-row-reverse fb-w-full fb-justify-between fb-pt-4">
+        <div className="flex w-full flex-row-reverse justify-between pt-4">
           <SubmitButton
             tabIndex={isCurrent ? 0 : -1}
             buttonLabel={getLocalizedValue(question.buttonLabel, languageCode)}

packages/surveys/src/components/questions/matrix-question.tsx

@@ -116,7 +116,7 @@ export function MatrixQuestion({
         <th
           key={index}
           scope="col"
-          className="fb-text-heading fb-max-w-40 fb-break-words fb-px-4 fb-py-2 fb-font-normal"
+          className="text-heading max-w-40 break-words px-4 py-2 font-normal"
           dir="auto">
           {getLocalizedValue(column.label, languageCode)}
         </th>
@@ -126,7 +126,7 @@ export function MatrixQuestion({
 
   return (
     <ScrollableContainer fullSizeCards={fullSizeCards}>
-      <form key={question.id} onSubmit={handleSubmit} className="fb-w-full">
+      <form key={question.id} onSubmit={handleSubmit} className="w-full">
         {isMediaAvailable ? <QuestionMedia imgUrl={question.imageUrl} videoUrl={question.videoUrl} /> : null}
         <Headline
           headline={getLocalizedValue(question.headline, languageCode)}
@@ -134,20 +134,20 @@ export function MatrixQuestion({
           required={question.required}
         />
         <Subheader subheader={getLocalizedValue(question.subheader, languageCode)} questionId={question.id} />
-        <div className="fb-overflow-x-auto fb-py-4">
-          <table className="fb-no-scrollbar fb-min-w-full fb-table-auto fb-border-collapse fb-text-sm">
+        <div className="overflow-x-auto py-4">
+          <table className="no-scrollbar min-w-full table-auto border-collapse text-sm">
             <thead>
               <tr>
-                <th className="fb-px-4 fb-py-2" />
+                <th className="px-4 py-2" />
                 {columnsHeaders}
               </tr>
             </thead>
             <tbody>
               {questionRows.map((row, rowIndex) => (
-                <tr key={`row-${rowIndex.toString()}`} className={rowIndex % 2 === 0 ? "fb-bg-input-bg" : ""}>
+                <tr key={`row-${rowIndex.toString()}`} className={rowIndex % 2 === 0 ? "bg-input-bg" : ""}>
                   <th
                     scope="row"
-                    className="fb-text-heading fb-rounded-l-custom fb-max-w-40 fb-break-words fb-pr-4 fb-pl-2 fb-py-2 fb-text-left fb-min-w-[20%] fb-font-semibold"
+                    className="text-heading rounded-l-custom min-w-[20%] max-w-40 break-words py-2 pl-2 pr-4 text-left font-semibold"
                     dir="auto">
                     {getLocalizedValue(row.label, languageCode)}
                   </th>
@@ -155,7 +155,7 @@ export function MatrixQuestion({
                     <td
                       key={`column-${columnIndex.toString()}`}
                       tabIndex={isCurrent ? 0 : -1}
-                      className={`fb-outline-brand fb-px-4 fb-py-2 fb-text-slate-800 ${columnIndex === question.columns.length - 1 ? "fb-rounded-r-custom" : ""}`}
+                      className={`outline-brand px-4 py-2 text-slate-800 ${columnIndex === question.columns.length - 1 ? "rounded-r-custom" : ""}`}
                       onClick={() => {
                         handleSelect(
                           getLocalizedValue(column.label, languageCode),
@@ -172,7 +172,7 @@ export function MatrixQuestion({
                         }
                       }}
                       dir="auto">
-                      <div className="fb-flex fb-items-center fb-justify-center fb-p-2">
+                      <div className="flex items-center justify-center p-2">
                         <input
                           dir="auto"
                           type="radio"
@@ -191,7 +191,7 @@ export function MatrixQuestion({
                             column.label,
                             languageCode
                           )}`}
-                          className="fb-border-brand fb-text-brand fb-h-5 fb-w-5 fb-border focus:fb-ring-0 focus:fb-ring-offset-0"
+                          className="border-brand text-brand h-5 w-5 border focus:ring-0 focus:ring-offset-0"
                         />
                       </div>
                     </td>
@@ -201,7 +201,7 @@ export function MatrixQuestion({
             </tbody>
           </table>
         </div>
-        <div className="fb-flex fb-flex-row-reverse fb-w-full fb-justify-between fb-pt-4">
+        <div className="flex w-full flex-row-reverse justify-between pt-4">
           <SubmitButton
             buttonLabel={getLocalizedValue(question.buttonLabel, languageCode)}
             isLastQuestion={isLastQuestion}

packages/surveys/src/components/questions/multiple-choice-multi-question.tsx

@@ -115,7 +115,7 @@ export function MultipleChoiceMultiQuestion({
 
   // Common label className for all choice types
   const baseLabelClassName =
-    "fb-text-heading focus-within:fb-border-brand fb-bg-input-bg focus-within:fb-bg-input-bg-selected hover:fb-bg-input-bg-selected fb-rounded-custom fb-relative fb-flex fb-cursor-pointer fb-flex-col fb-border fb-p-4 focus:fb-outline-none";
+    "text-heading focus-within:border-brand bg-input-bg focus-within:bg-input-bg-selected hover:bg-input-bg-selected rounded-custom relative flex cursor-pointer flex-col border p-4 focus:outline-none";
 
   useEffect(() => {
     // Scroll to the bottom of choices container and focus on 'otherSpecify' input when 'otherSelected' is true
@@ -177,7 +177,7 @@ export function MultipleChoiceMultiQuestion({
           setTtc(updatedTtcObj);
           onSubmit({ [question.id]: newValue }, updatedTtcObj);
         }}
-        className="fb-w-full">
+        className="w-full">
         {isMediaAvailable ? <QuestionMedia imgUrl={question.imageUrl} videoUrl={question.videoUrl} /> : null}
         <Headline
           headline={getLocalizedValue(question.headline, languageCode)}
@@ -188,10 +188,10 @@ export function MultipleChoiceMultiQuestion({
           subheader={question.subheader ? getLocalizedValue(question.subheader, languageCode) : ""}
           questionId={question.id}
         />
-        <div className="fb-mt-4">
+        <div className="mt-4">
           <fieldset>
-            <legend className="fb-sr-only">Options</legend>
-            <div className="fb-bg-survey-bg fb-relative fb-space-y-2" ref={choicesContainerRef}>
+            <legend className="sr-only">Options</legend>
+            <div className="bg-survey-bg relative space-y-2" ref={choicesContainerRef}>
               {questionChoices.map((choice, idx) => {
                 if (!choice || choice.id === "other" || choice.id === "none") return;
                 return (
@@ -200,9 +200,9 @@ export function MultipleChoiceMultiQuestion({
                     tabIndex={isCurrent ? 0 : -1}
                     className={cn(
                       value.includes(getLocalizedValue(choice.label, languageCode))
-                        ? "fb-border-brand fb-bg-input-bg-selected fb-z-10"
-                        : "fb-border-border fb-bg-input-bg",
-                      isNoneSelected ? "fb-opacity-50" : "",
+                        ? "border-brand bg-input-bg-selected z-10"
+                        : "border-border bg-input-bg",
+                      isNoneSelected ? "opacity-50" : "",
                       baseLabelClassName
                     )}
                     onKeyDown={(e) => {
@@ -213,7 +213,7 @@ export function MultipleChoiceMultiQuestion({
                       }
                     }}
                     autoFocus={idx === 0 && autoFocusEnabled}>
-                    <span className="fb-flex fb-items-center fb-text-sm">
+                    <span className="flex items-center text-sm">
                       <input
                         type="checkbox"
                         dir={dir}
@@ -221,7 +221,7 @@ export function MultipleChoiceMultiQuestion({
                         name={question.id}
                         tabIndex={-1}
                         value={getLocalizedValue(choice.label, languageCode)}
-                        className="fb-border-brand fb-text-brand fb-h-4 fb-w-4 fb-flex-shrink-0 fb-border focus:fb-ring-0 focus:fb-ring-offset-0"
+                        className="border-brand text-brand h-4 w-4 flex-shrink-0 border focus:ring-0 focus:ring-offset-0"
                         aria-labelledby={`${choice.id}-label`}
                         disabled={isNoneSelected}
                         onChange={(e) => {
@@ -237,7 +237,7 @@ export function MultipleChoiceMultiQuestion({
                         }
                         required={getIsRequired()}
                       />
-                      <span id={`${choice.id}-label`} className="fb-mx-3 fb-grow fb-font-medium" dir="auto">
+                      <span id={`${choice.id}-label`} className="mx-3 grow font-medium" dir="auto">
                         {getLocalizedValue(choice.label, languageCode)}
                       </span>
                     </span>
@@ -248,10 +248,8 @@ export function MultipleChoiceMultiQuestion({
                 <label
                   tabIndex={isCurrent ? 0 : -1}
                   className={cn(
-                    otherSelected
-                      ? "fb-border-brand fb-bg-input-bg-selected fb-z-10"
-                      : "fb-border-border fb-bg-input-bg",
-                    isNoneSelected ? "fb-opacity-50" : "",
+                    otherSelected ? "border-brand bg-input-bg-selected z-10" : "border-border bg-input-bg",
+                    isNoneSelected ? "opacity-50" : "",
                     baseLabelClassName
                   )}
                   onKeyDown={(e) => {
@@ -262,7 +260,7 @@ export function MultipleChoiceMultiQuestion({
                       document.getElementById(otherOption.id)?.click();
                     }
                   }}>
-                  <span className="fb-flex fb-items-center fb-text-sm">
+                  <span className="flex items-center text-sm">
                     <input
                       type="checkbox"
                       dir={dir}
@@ -270,7 +268,7 @@ export function MultipleChoiceMultiQuestion({
                       id={otherOption.id}
                       name={question.id}
                       value={getLocalizedValue(otherOption.label, languageCode)}
-                      className="fb-border-brand fb-text-brand fb-h-4 fb-w-4 fb-flex-shrink-0 fb-border focus:fb-ring-0 focus:fb-ring-offset-0"
+                      className="border-brand text-brand h-4 w-4 flex-shrink-0 border focus:ring-0 focus:ring-offset-0"
                       aria-labelledby={`${otherOption.id}-label`}
                       disabled={isNoneSelected}
                       onChange={() => {
@@ -286,10 +284,7 @@ export function MultipleChoiceMultiQuestion({
                       }}
                       checked={otherSelected}
                     />
-                    <span
-                      id={`${otherOption.id}-label`}
-                      className="fb-ml-3 fb-mr-3 fb-grow fb-font-medium"
-                      dir="auto">
+                    <span id={`${otherOption.id}-label`} className="ml-3 mr-3 grow font-medium" dir="auto">
                       {getLocalizedValue(otherOption.label, languageCode)}
                     </span>
                   </span>
@@ -306,7 +301,7 @@ export function MultipleChoiceMultiQuestion({
                       onChange={(e) => {
                         setOtherValue(e.currentTarget.value);
                       }}
-                      className="placeholder:fb-text-placeholder fb-border-border fb-bg-survey-bg fb-text-heading focus:fb-ring-focus fb-rounded-custom fb-mt-3 fb-flex fb-h-10 fb-w-full fb-border fb-px-3 fb-py-2 fb-text-sm focus:fb-outline-none focus:fb-ring-2 focus:fb-ring-offset-2 disabled:fb-cursor-not-allowed disabled:fb-opacity-50"
+                      className="placeholder:text-placeholder border-border bg-survey-bg text-heading focus:ring-focus rounded-custom mt-3 flex h-10 w-full border px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50"
                       placeholder={
                         getLocalizedValue(question.otherOptionPlaceholder, languageCode).length > 0
                           ? getLocalizedValue(question.otherOptionPlaceholder, languageCode)
@@ -331,9 +326,7 @@ export function MultipleChoiceMultiQuestion({
                 <label
                   tabIndex={isCurrent ? 0 : -1}
                   className={cn(
-                    isNoneSelected
-                      ? "fb-border-brand fb-bg-input-bg-selected fb-z-10"
-                      : "fb-border-border fb-bg-input-bg",
+                    isNoneSelected ? "border-brand bg-input-bg-selected z-10" : "border-border bg-input-bg",
                     baseLabelClassName
                   )}
                   onKeyDown={(e) => {
@@ -342,7 +335,7 @@ export function MultipleChoiceMultiQuestion({
                       document.getElementById(noneOption.id)?.click();
                     }
                   }}>
-                  <span className="fb-flex fb-items-center fb-text-sm">
+                  <span className="flex items-center text-sm">
                     <input
                       type="checkbox"
                       dir={dir}
@@ -350,7 +343,7 @@ export function MultipleChoiceMultiQuestion({
                       id={noneOption.id}
                       name={question.id}
                       value={getLocalizedValue(noneOption.label, languageCode)}
-                      className="fb-border-brand fb-text-brand fb-h-4 fb-w-4 fb-flex-shrink-0 fb-border focus:fb-ring-0 focus:fb-ring-offset-0"
+                      className="border-brand text-brand h-4 w-4 flex-shrink-0 border focus:ring-0 focus:ring-offset-0"
                       aria-labelledby={`${noneOption.id}-label`}
                       onChange={(e) => {
                         if ((e.target as HTMLInputElement).checked) {
@@ -363,10 +356,7 @@ export function MultipleChoiceMultiQuestion({
                       }}
                       checked={isNoneSelected}
                     />
-                    <span
-                      id={`${noneOption.id}-label`}
-                      className="fb-ml-3 fb-mr-3 fb-grow fb-font-medium"
-                      dir="auto">
+                    <span id={`${noneOption.id}-label`} className="ml-3 mr-3 grow font-medium" dir="auto">
                       {getLocalizedValue(noneOption.label, languageCode)}
                     </span>
                   </span>
@@ -375,7 +365,7 @@ export function MultipleChoiceMultiQuestion({
             </div>
           </fieldset>
         </div>
-        <div className="fb-flex fb-flex-row-reverse fb-w-full fb-justify-between fb-pt-4">
+        <div className="flex w-full flex-row-reverse justify-between pt-4">
           <SubmitButton
             tabIndex={isCurrent ? 0 : -1}
             buttonLabel={getLocalizedValue(question.buttonLabel, languageCode)}

packages/surveys/src/components/questions/multiple-choice-single-question.tsx

@@ -121,7 +121,7 @@ export function MultipleChoiceSingleQuestion({
           setTtc(updatedTtcObj);
           onSubmit({ [question.id]: value }, updatedTtcObj);
         }}
-        className="fb-w-full">
+        className="w-full">
         {isMediaAvailable ? <QuestionMedia imgUrl={question.imageUrl} videoUrl={question.videoUrl} /> : null}
         <Headline
           headline={getLocalizedValue(question.headline, languageCode)}
@@ -132,14 +132,11 @@ export function MultipleChoiceSingleQuestion({
           subheader={question.subheader ? getLocalizedValue(question.subheader, languageCode) : ""}
           questionId={question.id}
         />
-        <div className="fb-mt-4">
+        <div className="mt-4">
           <fieldset>
-            <legend className="fb-sr-only">Options</legend>
+            <legend className="sr-only">Options</legend>
 
-            <div
-              className="fb-bg-survey-bg fb-relative fb-space-y-2"
-              role="radiogroup"
-              ref={choicesContainerRef}>
+            <div className="bg-survey-bg relative space-y-2" role="radiogroup" ref={choicesContainerRef}>
               {questionChoices.map((choice, idx) => {
                 if (!choice || choice.id === "other" || choice.id === "none") return;
                 return (
@@ -148,9 +145,9 @@ export function MultipleChoiceSingleQuestion({
                     tabIndex={isCurrent ? 0 : -1}
                     className={cn(
                       value === getLocalizedValue(choice.label, languageCode)
-                        ? "fb-border-brand fb-bg-input-bg-selected fb-z-10"
-                        : "fb-border-border",
-                      "fb-text-heading fb-bg-input-bg focus-within:fb-border-brand focus-within:fb-bg-input-bg-selected hover:fb-bg-input-bg-selected fb-rounded-custom fb-relative fb-flex fb-cursor-pointer fb-flex-col fb-border fb-p-4 focus:fb-outline-none"
+                        ? "border-brand bg-input-bg-selected z-10"
+                        : "border-border",
+                      "text-heading bg-input-bg focus-within:border-brand focus-within:bg-input-bg-selected hover:bg-input-bg-selected rounded-custom relative flex cursor-pointer flex-col border p-4 focus:outline-none"
                     )}
                     onKeyDown={(e) => {
                       // Accessibility: if spacebar was pressed pass this down to the input
@@ -161,7 +158,7 @@ export function MultipleChoiceSingleQuestion({
                       }
                     }}
                     autoFocus={idx === 0 && autoFocusEnabled}>
-                    <span className="fb-flex fb-items-center fb-text-sm">
+                    <span className="flex items-center text-sm">
                       <input
                         tabIndex={-1}
                         type="radio"
@@ -169,7 +166,7 @@ export function MultipleChoiceSingleQuestion({
                         name={question.id}
                         value={getLocalizedValue(choice.label, languageCode)}
                         dir={dir}
-                        className="fb-border-brand fb-text-brand fb-h-4 fb-w-4 fb-flex-shrink-0 fb-border focus:fb-ring-0 focus:fb-ring-offset-0"
+                        className="border-brand text-brand h-4 w-4 flex-shrink-0 border focus:ring-0 focus:ring-offset-0"
                         aria-labelledby={`${choice.id}-label`}
                         onClick={() => {
                           const choiceValue = getLocalizedValue(choice.label, languageCode);
@@ -183,10 +180,7 @@ export function MultipleChoiceSingleQuestion({
                         checked={value === getLocalizedValue(choice.label, languageCode)}
                         required={question.required ? idx === 0 : undefined}
                       />
-                      <span
-                        id={`${choice.id}-label`}
-                        className="fb-ml-3 fb-mr-3 fb-grow fb-font-medium"
-                        dir="auto">
+                      <span id={`${choice.id}-label`} className="ml-3 mr-3 grow font-medium" dir="auto">
                         {getLocalizedValue(choice.label, languageCode)}
                       </span>
                     </span>
@@ -198,9 +192,9 @@ export function MultipleChoiceSingleQuestion({
                   tabIndex={isCurrent ? 0 : -1}
                   className={cn(
                     value === getLocalizedValue(otherOption.label, languageCode)
-                      ? "fb-border-brand fb-bg-input-bg-selected fb-z-10"
-                      : "fb-border-border",
-                    "fb-text-heading focus-within:fb-border-brand fb-bg-input-bg focus-within:fb-bg-input-bg-selected hover:fb-bg-input-bg-selected fb-rounded-custom fb-relative fb-flex fb-cursor-pointer fb-flex-col fb-border fb-p-4 focus:fb-outline-none"
+                      ? "border-brand bg-input-bg-selected z-10"
+                      : "border-border",
+                    "text-heading focus-within:border-brand bg-input-bg focus-within:bg-input-bg-selected hover:bg-input-bg-selected rounded-custom relative flex cursor-pointer flex-col border p-4 focus:outline-none"
                   )}
                   onKeyDown={(e) => {
                     // Accessibility: if spacebar was pressed pass this down to the input
@@ -210,7 +204,7 @@ export function MultipleChoiceSingleQuestion({
                       document.getElementById(otherOption.id)?.focus();
                     }
                   }}>
-                  <span className="fb-flex fb-items-center fb-text-sm">
+                  <span className="flex items-center text-sm">
                     <input
                       tabIndex={-1}
                       dir={dir}
@@ -218,7 +212,7 @@ export function MultipleChoiceSingleQuestion({
                       id={otherOption.id}
                       name={question.id}
                       value={getLocalizedValue(otherOption.label, languageCode)}
-                      className="fb-border-brand fb-text-brand fb-h-4 fb-w-4 fb-flex-shrink-0 fb-border focus:fb-ring-0 focus:fb-ring-offset-0"
+                      className="border-brand text-brand h-4 w-4 flex-shrink-0 border focus:ring-0 focus:ring-offset-0"
                       aria-labelledby={`${otherOption.id}-label`}
                       onClick={() => {
                         if (otherSelected && !question.required) {
@@ -231,10 +225,7 @@ export function MultipleChoiceSingleQuestion({
                       }}
                       checked={otherSelected}
                     />
-                    <span
-                      id={`${otherOption.id}-label`}
-                      className="fb-ml-3 fb-mr-3 fb-grow fb-font-medium"
-                      dir="auto">
+                    <span id={`${otherOption.id}-label`} className="ml-3 mr-3 grow font-medium" dir="auto">
                       {getLocalizedValue(otherOption.label, languageCode)}
                     </span>
                   </span>
@@ -249,7 +240,7 @@ export function MultipleChoiceSingleQuestion({
                       onChange={(e) => {
                         onChange({ [question.id]: e.currentTarget.value });
                       }}
-                      className="placeholder:fb-text-placeholder fb-border-border fb-bg-survey-bg fb-text-heading focus:fb-ring-focus fb-rounded-custom fb-mt-3 fb-flex fb-h-10 fb-w-full fb-border fb-px-3 fb-py-2 fb-text-sm focus:fb-outline-none focus:fb-ring-2 focus:fb-ring-offset-2 disabled:fb-cursor-not-allowed disabled:fb-opacity-50"
+                      className="placeholder:text-placeholder border-border bg-survey-bg text-heading focus:ring-focus rounded-custom mt-3 flex h-10 w-full border px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50"
                       placeholder={
                         getLocalizedValue(question.otherOptionPlaceholder, languageCode).length > 0
                           ? getLocalizedValue(question.otherOptionPlaceholder, languageCode)
@@ -267,9 +258,9 @@ export function MultipleChoiceSingleQuestion({
                   tabIndex={isCurrent ? 0 : -1}
                   className={cn(
                     value === getLocalizedValue(noneOption.label, languageCode)
-                      ? "fb-border-brand fb-bg-input-bg-selected fb-z-10"
-                      : "fb-border-border",
-                    "fb-text-heading focus-within:fb-border-brand fb-bg-input-bg focus-within:fb-bg-input-bg-selected hover:fb-bg-input-bg-selected fb-rounded-custom fb-relative fb-flex fb-cursor-pointer fb-flex-col fb-border fb-p-4 focus:fb-outline-none"
+                      ? "border-brand bg-input-bg-selected z-10"
+                      : "border-border",
+                    "text-heading focus-within:border-brand bg-input-bg focus-within:bg-input-bg-selected hover:bg-input-bg-selected rounded-custom relative flex cursor-pointer flex-col border p-4 focus:outline-none"
                   )}
                   onKeyDown={(e) => {
                     // Accessibility: if spacebar was pressed pass this down to the input
@@ -279,7 +270,7 @@ export function MultipleChoiceSingleQuestion({
                       document.getElementById(noneOption.id)?.focus();
                     }
                   }}>
-                  <span className="fb-flex fb-items-center fb-text-sm">
+                  <span className="flex items-center text-sm">
                     <input
                       tabIndex={-1}
                       dir={dir}
@@ -287,7 +278,7 @@ export function MultipleChoiceSingleQuestion({
                       id={noneOption.id}
                       name={question.id}
                       value={getLocalizedValue(noneOption.label, languageCode)}
-                      className="fb-border-brand fb-text-brand fb-h-4 fb-w-4 fb-flex-shrink-0 fb-border focus:fb-ring-0 focus:fb-ring-offset-0"
+                      className="border-brand text-brand h-4 w-4 flex-shrink-0 border focus:ring-0 focus:ring-offset-0"
                       aria-labelledby={`${noneOption.id}-label`}
                       onClick={() => {
                         const noneValue = getLocalizedValue(noneOption.label, languageCode);
@@ -300,10 +291,7 @@ export function MultipleChoiceSingleQuestion({
                       }}
                       checked={value === getLocalizedValue(noneOption.label, languageCode)}
                     />
-                    <span
-                      id={`${noneOption.id}-label`}
-                      className="fb-ml-3 fb-mr-3 fb-grow fb-font-medium"
-                      dir="auto">
+                    <span id={`${noneOption.id}-label`} className="ml-3 mr-3 grow font-medium" dir="auto">
                       {getLocalizedValue(noneOption.label, languageCode)}
                     </span>
                   </span>
@@ -312,7 +300,7 @@ export function MultipleChoiceSingleQuestion({
             </div>
           </fieldset>
         </div>
-        <div className="fb-flex fb-flex-row-reverse fb-w-full fb-justify-between fb-pt-4">
+        <div className="flex w-full flex-row-reverse justify-between pt-4">
           <SubmitButton
             tabIndex={isCurrent ? 0 : -1}
             buttonLabel={getLocalizedValue(question.buttonLabel, languageCode)}

packages/surveys/src/components/questions/nps-question.tsx

@@ -66,9 +66,9 @@ export function NPSQuestion({
   };
 
   const getNPSOptionColor = (idx: number) => {
-    if (idx > 8) return "fb-bg-emerald-100";
-    if (idx > 6) return "fb-bg-orange-100";
-    return "fb-bg-rose-100";
+    if (idx > 8) return "bg-emerald-100";
+    if (idx > 6) return "bg-orange-100";
+    return "bg-rose-100";
   };
 
   return (
@@ -91,10 +91,10 @@ export function NPSQuestion({
           subheader={question.subheader ? getLocalizedValue(question.subheader, languageCode) : ""}
           questionId={question.id}
         />
-        <div className="fb-my-4">
+        <div className="my-4">
           <fieldset>
-            <legend className="fb-sr-only">Options</legend>
-            <div className="fb-flex">
+            <legend className="sr-only">Options</legend>
+            <div className="flex">
               {Array.from({ length: 11 }, (_, i) => i).map((number, idx) => {
                 return (
                   <label
@@ -122,19 +122,17 @@ export function NPSQuestion({
                     }}
                     className={cn(
                       value === number
-                        ? "fb-border-border-highlight fb-bg-accent-selected-bg fb-z-10 fb-border"
-                        : "fb-border-border",
-                      "fb-text-heading focus:fb-border-brand fb-relative fb-h-10 fb-flex-1 fb-cursor-pointer fb-overflow-hidden fb-border-b fb-border-l fb-border-t fb-text-center fb-text-sm focus:fb-border-2 focus:fb-outline-none",
-                      question.isColorCodingEnabled ? "fb-h-[46px] fb-leading-[3.5em]" : "fb-h fb-leading-10",
-                      hoveredNumber === number ? "fb-bg-accent-bg" : "",
+                        ? "border-border-highlight bg-accent-selected-bg z-10 border"
+                        : "border-border",
+                      "text-heading focus:border-brand relative h-10 flex-1 cursor-pointer overflow-hidden border-b border-l border-t text-center text-sm focus:border-2 focus:outline-none",
+                      question.isColorCodingEnabled ? "h-[46px] leading-[3.5em]" : "h leading-10",
+                      hoveredNumber === number ? "bg-accent-bg" : "",
                       dir === "rtl"
-                        ? "first:fb-rounded-r-custom first:fb-border-r last:fb-rounded-l-custom last:fb-border-l"
-                        : "first:fb-rounded-l-custom first:fb-border-l last:fb-rounded-r-custom last:fb-border-r"
+                        ? "first:rounded-r-custom last:rounded-l-custom first:border-r last:border-l"
+                        : "first:rounded-l-custom last:rounded-r-custom first:border-l last:border-r"
                     )}>
                     {question.isColorCodingEnabled ? (
-                      <div
-                        className={`fb-absolute fb-left-0 fb-top-0 fb-h-[6px] fb-w-full ${getNPSOptionColor(idx)}`}
-                      />
+                      <div className={`absolute left-0 top-0 h-[6px] w-full ${getNPSOptionColor(idx)}`} />
                     ) : null}
                     <input
                       type="radio"
@@ -142,7 +140,7 @@ export function NPSQuestion({
                       name="nps"
                       value={number}
                       checked={value === number}
-                      className="fb-absolute fb-left-0 fb-h-full fb-w-full fb-cursor-pointer fb-opacity-0"
+                      className="absolute left-0 h-full w-full cursor-pointer opacity-0"
                       onClick={() => {
                         handleClick(number);
                       }}
@@ -154,17 +152,17 @@ export function NPSQuestion({
                 );
               })}
             </div>
-            <div className="fb-text-subheading fb-mt-2 fb-flex fb-justify-between fb-px-1.5 fb-text-xs fb-leading-6 fb-gap-8">
-              <p dir="auto" className="fb-max-w-[50%]">
+            <div className="text-subheading mt-2 flex justify-between gap-8 px-1.5 text-xs leading-6">
+              <p dir="auto" className="max-w-[50%]">
                 {getLocalizedValue(question.lowerLabel, languageCode)}
               </p>
-              <p dir="auto" className="fb-max-w-[50%]">
+              <p dir="auto" className="max-w-[50%]">
                 {getLocalizedValue(question.upperLabel, languageCode)}
               </p>
             </div>
           </fieldset>
         </div>
-        <div className="fb-flex fb-flex-row-reverse fb-w-full fb-justify-between fb-pt-4">
+        <div className="flex w-full flex-row-reverse justify-between pt-4">
           {question.required ? (
             <div></div>
           ) : (

packages/surveys/src/components/questions/open-text-question.tsx

@@ -112,7 +112,7 @@ export function OpenTextQuestion({
 
   return (
     <ScrollableContainer fullSizeCards={fullSizeCards}>
-      <form key={question.id} onSubmit={handleOnSubmit} className="fb-w-full">
+      <form key={question.id} onSubmit={handleOnSubmit} className="w-full">
         {isMediaAvailable ? <QuestionMedia imgUrl={question.imageUrl} videoUrl={question.videoUrl} /> : null}
         <Headline
           headline={getLocalizedValue(question.headline, languageCode)}
@@ -123,7 +123,7 @@ export function OpenTextQuestion({
           subheader={question.subheader ? getLocalizedValue(question.subheader, languageCode) : ""}
           questionId={question.id}
         />
-        <div className="fb-mt-4">
+        <div className="mt-4">
           {question.longAnswer === false ? (
             <input
               ref={inputRef as RefObject<HTMLInputElement>}
@@ -142,7 +142,7 @@ export function OpenTextQuestion({
                 handleInputChange(input.value);
                 input.setCustomValidity("");
               }}
-              className="fb-border-border placeholder:fb-text-placeholder fb-text-subheading focus:fb-border-brand fb-bg-input-bg fb-rounded-custom fb-block fb-w-full fb-border fb-p-2 fb-shadow-sm focus:fb-outline-none focus:fb-ring-0 sm:fb-text-sm"
+              className="border-border placeholder:text-placeholder text-subheading focus:border-brand bg-input-bg rounded-custom block w-full border p-2 shadow-sm focus:outline-none focus:ring-0 sm:text-sm"
               pattern={question.inputType === "phone" ? "^[0-9+][0-9+\\- ]*[0-9]$" : ".*"}
               title={
                 question.inputType === "phone"
@@ -178,7 +178,7 @@ export function OpenTextQuestion({
               onInput={(e) => {
                 handleInputChange(e.currentTarget.value);
               }}
-              className="fb-border-border placeholder:fb-text-placeholder fb-bg-input-bg fb-text-subheading focus:fb-border-brand fb-rounded-custom fb-block fb-w-full fb-border fb-p-2 fb-shadow-sm focus:fb-ring-0 sm:fb-text-sm"
+              className="border-border placeholder:text-placeholder bg-input-bg text-subheading focus:border-brand rounded-custom block w-full border p-2 shadow-sm focus:ring-0 sm:text-sm"
               title={
                 question.inputType === "phone" ? t("errors.please_enter_a_valid_phone_number") : undefined
               }
@@ -188,12 +188,12 @@ export function OpenTextQuestion({
           )}
           {question.inputType === "text" && question.charLimit?.max !== undefined && (
             <span
-              className={`fb-text-xs ${currentLength >= question.charLimit?.max ? "fb-text-red-500 font-semibold" : "text-neutral-400"}`}>
+              className={`text-xs ${currentLength >= question.charLimit?.max ? "font-semibold text-red-500" : "text-neutral-400"}`}>
               {currentLength}/{question.charLimit?.max}
             </span>
           )}
         </div>
-        <div className="fb-flex fb-flex-row-reverse fb-w-full fb-justify-between fb-pt-4">
+        <div className="flex w-full flex-row-reverse justify-between pt-4">
           <SubmitButton
             tabIndex={isCurrent ? 0 : -1}
             buttonLabel={getLocalizedValue(question.buttonLabel, languageCode)}

packages/surveys/src/components/questions/picture-selection-question.tsx

@@ -112,7 +112,7 @@ export function PictureSelectionQuestion({
           setTtc(updatedTtcObj);
           onSubmit({ [question.id]: value }, updatedTtcObj);
         }}
-        className="fb-w-full">
+        className="w-full">
         {isMediaAvailable ? <QuestionMedia imgUrl={question.imageUrl} videoUrl={question.videoUrl} /> : null}
         <Headline
           headline={getLocalizedValue(question.headline, languageCode)}
@@ -123,12 +123,12 @@ export function PictureSelectionQuestion({
           subheader={question.subheader ? getLocalizedValue(question.subheader, languageCode) : ""}
           questionId={question.id}
         />
-        <div className="fb-mt-4">
+        <div className="mt-4">
           <fieldset>
-            <legend className="fb-sr-only">{t("common.options")}</legend>
-            <div className="fb-bg-survey-bg fb-relative fb-grid fb-grid-cols-1 sm:fb-grid-cols-2 fb-gap-4">
+            <legend className="sr-only">{t("common.options")}</legend>
+            <div className="bg-survey-bg relative grid grid-cols-1 gap-4 sm:grid-cols-2">
               {questionChoices.map((choice) => (
-                <div className="fb-relative" key={choice.id}>
+                <div className="relative" key={choice.id}>
                   <button
                     type="button"
                     tabIndex={isCurrent ? 0 : -1}
@@ -144,21 +144,21 @@ export function PictureSelectionQuestion({
                       handleChange(choice.id);
                     }}
                     className={cn(
-                      "fb-relative fb-w-full fb-cursor-pointer fb-overflow-hidden fb-border fb-rounded-custom focus-visible:fb-outline-none focus-visible:fb-ring-2 focus-visible:fb-ring-brand focus-visible:fb-ring-offset-2 fb-aspect-[4/3] fb-min-h-[7rem] fb-max-h-[50vh] group/image",
+                      "rounded-custom focus-visible:ring-brand group/image relative aspect-[4/3] max-h-[50vh] min-h-[7rem] w-full cursor-pointer overflow-hidden border focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2",
                       Array.isArray(value) && value.includes(choice.id)
-                        ? "fb-border-brand fb-text-brand fb-z-10 fb-border-4 fb-shadow-sm"
+                        ? "border-brand text-brand z-10 border-4 shadow-sm"
                         : ""
                     )}>
                     {loadingImages[choice.id] && (
-                      <div className="fb-absolute fb-inset-0 fb-flex fb-h-full fb-w-full fb-animate-pulse fb-items-center fb-justify-center fb-rounded-md fb-bg-slate-200" />
+                      <div className="absolute inset-0 flex h-full w-full animate-pulse items-center justify-center rounded-md bg-slate-200" />
                     )}
                     <img
                       src={choice.imageUrl}
                       id={choice.id}
                       alt={getOriginalFileNameFromUrl(choice.imageUrl)}
                       className={cn(
-                        "fb-h-full fb-w-full fb-object-cover",
-                        loadingImages[choice.id] ? "fb-opacity-0" : ""
+                        "h-full w-full object-cover",
+                        loadingImages[choice.id] ? "opacity-0" : ""
                       )}
                       onLoad={() => {
                         setLoadingImages((prev) => ({ ...prev, [choice.id]: false }));
@@ -175,9 +175,9 @@ export function PictureSelectionQuestion({
                         tabIndex={-1}
                         checked={value.includes(choice.id)}
                         className={cn(
-                          "fb-border-border fb-rounded-custom fb-pointer-events-none fb-absolute fb-top-2 fb-z-20 fb-h-5 fb-w-5 fb-border",
-                          value.includes(choice.id) ? "fb-border-brand fb-text-brand" : "",
-                          dir === "rtl" ? "fb-left-2" : "fb-right-2"
+                          "border-border rounded-custom pointer-events-none absolute top-2 z-20 h-5 w-5 border",
+                          value.includes(choice.id) ? "border-brand text-brand" : "",
+                          dir === "rtl" ? "left-2" : "right-2"
                         )}
                         required={question.required && value.length === 0}
                       />
@@ -189,9 +189,9 @@ export function PictureSelectionQuestion({
                         tabIndex={-1}
                         checked={value.includes(choice.id)}
                         className={cn(
-                          "fb-border-border fb-pointer-events-none fb-absolute fb-top-2 fb-z-20 fb-h-5 fb-w-5 fb-rounded-full fb-border",
-                          value.includes(choice.id) ? "fb-border-brand fb-text-brand" : "",
-                          dir === "rtl" ? "fb-left-2" : "fb-right-2"
+                          "border-border pointer-events-none absolute top-2 z-20 h-5 w-5 rounded-full border",
+                          value.includes(choice.id) ? "border-brand text-brand" : "",
+                          dir === "rtl" ? "left-2" : "right-2"
                         )}
                         required={question.required && value.length ? false : question.required}
                       />
@@ -207,10 +207,10 @@ export function PictureSelectionQuestion({
                       e.stopPropagation();
                     }}
                     className={cn(
-                      "fb-absolute fb-bottom-4 fb-flex fb-items-center fb-gap-2 fb-whitespace-nowrap fb-rounded-md fb-bg-slate-800 fb-bg-opacity-40 fb-p-1.5 fb-text-white fb-backdrop-blur-lg fb-transition fb-duration-300 fb-ease-in-out hover:fb-bg-opacity-65 group-hover/image:fb-opacity-100 fb-z-20",
-                      dir === "rtl" ? "fb-left-2" : "fb-right-2"
+                      "absolute bottom-4 z-20 flex items-center gap-2 whitespace-nowrap rounded-md bg-slate-800 bg-opacity-40 p-1.5 text-white backdrop-blur-lg transition duration-300 ease-in-out hover:bg-opacity-65 group-hover/image:opacity-100",
+                      dir === "rtl" ? "left-2" : "right-2"
                     )}>
-                    <span className="fb-sr-only">{t("common.open_in_new_tab")}</span>
+                    <span className="sr-only">{t("common.open_in_new_tab")}</span>
                     <ImageDownIcon />
                   </a>
                 </div>
@@ -218,7 +218,7 @@ export function PictureSelectionQuestion({
             </div>
           </fieldset>
         </div>
-        <div className="fb-flex fb-flex-row-reverse fb-w-full fb-justify-between fb-pt-4">
+        <div className="flex w-full flex-row-reverse justify-between pt-4">
           <SubmitButton
             tabIndex={isCurrent ? 0 : -1}
             buttonLabel={getLocalizedValue(question.buttonLabel, languageCode)}

packages/surveys/src/components/questions/ranking-question.tsx

@@ -159,7 +159,7 @@ export function RankingQuestion({
 
   return (
     <ScrollableContainer ref={scrollableRef} fullSizeCards={fullSizeCards}>
-      <form onSubmit={handleSubmit} className="fb-w-full">
+      <form onSubmit={handleSubmit} className="w-full">
         {isMediaAvailable ? <QuestionMedia imgUrl={question.imageUrl} videoUrl={question.videoUrl} /> : null}
         <Headline
           headline={getLocalizedValue(question.headline, languageCode)}
@@ -170,10 +170,10 @@ export function RankingQuestion({
           subheader={question.subheader ? getLocalizedValue(question.subheader, languageCode) : ""}
           questionId={question.id}
         />
-        <div className="fb-mt-4">
+        <div className="mt-4">
           <fieldset>
-            <legend className="fb-sr-only">{t("common.ranking_items")}</legend>
-            <div className="fb-relative" ref={parent}>
+            <legend className="sr-only">{t("common.ranking_items")}</legend>
+            <div className="relative" ref={parent}>
               {[...sortedItems, ...unsortedItems].map((item, idx) => {
                 if (!item) return null;
                 const isSorted = sortedItems.includes(item);
@@ -184,8 +184,8 @@ export function RankingQuestion({
                   <div
                     key={item.id}
                     className={cn(
-                      "fb-flex fb-h-12 fb-items-center fb-mb-2 fb-border fb-border-border fb-transition-all fb-text-heading hover:fb-bg-input-bg-selected focus-within:fb-border-brand focus-within:fb-shadow-outline focus-within:fb-bg-input-bg-selected fb-rounded-custom fb-relative fb-cursor-pointer w-full focus:outline-none",
-                      isSorted ? "fb-bg-input-bg-selected" : "fb-bg-input-bg"
+                      "border-border text-heading hover:bg-input-bg-selected focus-within:border-brand focus-within:shadow-outline focus-within:bg-input-bg-selected rounded-custom relative mb-2 flex h-12 w-full cursor-pointer items-center border transition-all focus:outline-none",
+                      isSorted ? "bg-input-bg-selected" : "bg-input-bg"
                     )}>
                     <button
                       autoFocus={idx === 0 && autoFocusEnabled}
@@ -204,22 +204,22 @@ export function RankingQuestion({
                       aria-label={t("common.select_for_ranking", {
                         item: getLocalizedValue(item.label, languageCode),
                       })}
-                      className="fb-flex fb-gap-x-4 fb-px-4 fb-items-center fb-grow fb-h-full group text-left focus:outline-none">
+                      className="group flex h-full grow items-center gap-x-4 px-4 text-left focus:outline-none">
                       <span
                         className={cn(
-                          "fb-w-6 fb-grow-0 fb-h-6 fb-flex fb-items-center fb-justify-center fb-rounded-full fb-text-xs fb-font-semibold fb-border-brand fb-border",
+                          "border-brand flex h-6 w-6 grow-0 items-center justify-center rounded-full border text-xs font-semibold",
                           isSorted
-                            ? "fb-bg-brand fb-text-white fb-border"
-                            : "fb-border-dashed group-hover:fb-bg-white fb-text-transparent group-hover:fb-text-heading"
+                            ? "bg-brand border text-white"
+                            : "group-hover:text-heading border-dashed text-transparent group-hover:bg-white"
                         )}>
                         {(idx + 1).toString()}
                       </span>
-                      <div className="fb-grow fb-shrink fb-font-medium fb-text-sm fb-text-start" dir="auto">
+                      <div className="shrink grow text-start text-sm font-medium" dir="auto">
                         {getLocalizedValue(item.label, languageCode)}
                       </div>
                     </button>
                     {isSorted ? (
-                      <div className="fb-flex fb-flex-col fb-h-full fb-grow-0 fb-border-l fb-border-border">
+                      <div className="border-border flex h-full grow-0 flex-col border-l">
                         <button
                           tabIndex={isFirst ? -1 : 0}
                           type="button"
@@ -231,10 +231,10 @@ export function RankingQuestion({
                             item: getLocalizedValue(item.label, languageCode),
                           })}
                           className={cn(
-                            "fb-px-2 fb-flex fb-flex-1 fb-items-center fb-justify-center",
+                            "flex flex-1 items-center justify-center px-2",
                             isFirst
-                              ? "fb-opacity-30 fb-cursor-not-allowed"
-                              : "hover:fb-bg-black/5 fb-rounded-tr-custom fb-transition-colors"
+                              ? "cursor-not-allowed opacity-30"
+                              : "rounded-tr-custom transition-colors hover:bg-black/5"
                           )}
                           disabled={isFirst}>
                           <svg
@@ -259,10 +259,10 @@ export function RankingQuestion({
                             handleMove(item.id, "down");
                           }}
                           className={cn(
-                            "fb-px-2 fb-flex-1 fb-border-t fb-border-border fb-flex fb-items-center fb-justify-center",
+                            "border-border flex flex-1 items-center justify-center border-t px-2",
                             isLast
-                              ? "fb-opacity-30 fb-cursor-not-allowed"
-                              : "hover:fb-bg-black/5 fb-rounded-br-custom fb-transition-colors"
+                              ? "cursor-not-allowed opacity-30"
+                              : "rounded-br-custom transition-colors hover:bg-black/5"
                           )}
                           aria-label={t("common.move_down", {
                             item: getLocalizedValue(item.label, languageCode),
@@ -290,8 +290,8 @@ export function RankingQuestion({
             </div>
           </fieldset>
         </div>
-        {error ? <div className="fb-text-red-500 fb-mt-2 fb-text-sm">{error}</div> : null}
-        <div className="fb-flex fb-flex-row-reverse fb-w-full fb-justify-between fb-pt-4">
+        {error ? <div className="mt-2 text-sm text-red-500">{error}</div> : null}
+        <div className="flex w-full flex-row-reverse justify-between pt-4">
           <SubmitButton
             tabIndex={isCurrent ? 0 : -1}
             buttonLabel={getLocalizedValue(question.buttonLabel, languageCode)}

packages/surveys/src/components/questions/rating-question.tsx

@@ -85,7 +85,7 @@ export function RatingQuestion({
         id={id}
         name="rating"
         value={number}
-        className="fb-invisible fb-absolute fb-left-0 fb-h-full fb-w-full fb-cursor-pointer fb-opacity-0"
+        className="invisible absolute left-0 h-full w-full cursor-pointer opacity-0"
         onClick={() => {
           handleSelect(number);
         }}
@@ -101,17 +101,17 @@ export function RatingQuestion({
 
   const getRatingNumberOptionColor = (range: number, idx: number) => {
     if (range > 5) {
-      if (range - idx < 2) return "fb-bg-emerald-100";
-      if (range - idx < 4) return "fb-bg-orange-100";
-      return "fb-bg-rose-100";
+      if (range - idx < 2) return "bg-emerald-100";
+      if (range - idx < 4) return "bg-orange-100";
+      return "bg-rose-100";
     } else if (range < 5) {
-      if (range - idx < 1) return "fb-bg-emerald-100";
-      if (range - idx < 2) return "fb-bg-orange-100";
-      return "fb-bg-rose-100";
+      if (range - idx < 1) return "bg-emerald-100";
+      if (range - idx < 2) return "bg-orange-100";
+      return "bg-rose-100";
     }
-    if (range - idx < 2) return "fb-bg-emerald-100";
-    if (range - idx < 3) return "fb-bg-orange-100";
-    return "fb-bg-rose-100";
+    if (range - idx < 2) return "bg-emerald-100";
+    if (range - idx < 3) return "bg-orange-100";
+    return "bg-rose-100";
   };
 
   return (
@@ -124,7 +124,7 @@ export function RatingQuestion({
           setTtc(updatedTtcObj);
           onSubmit({ [question.id]: value ?? "" }, updatedTtcObj);
         }}
-        className="fb-w-full">
+        className="w-full">
         {isMediaAvailable ? <QuestionMedia imgUrl={question.imageUrl} videoUrl={question.videoUrl} /> : null}
         <Headline
           headline={getLocalizedValue(question.headline, languageCode)}
@@ -135,10 +135,10 @@ export function RatingQuestion({
           subheader={question.subheader ? getLocalizedValue(question.subheader, languageCode) : ""}
           questionId={question.id}
         />
-        <div className="fb-mb-4 fb-mt-6 fb-flex fb-items-center fb-justify-center">
-          <fieldset className="fb-w-full">
-            <legend className="fb-sr-only">Choices</legend>
-            <div className="fb-flex fb-w-full">
+        <div className="mb-4 mt-6 flex items-center justify-center">
+          <fieldset className="w-full">
+            <legend className="sr-only">Choices</legend>
+            <div className="flex w-full">
               {Array.from({ length: question.range }, (_, i) => i + 1).map((number, i, a) => (
                 <span
                   key={number}
@@ -148,7 +148,7 @@ export function RatingQuestion({
                   onMouseLeave={() => {
                     setHoveredNumber(0);
                   }}
-                  className="fb-bg-survey-bg fb-flex-1 fb-text-center fb-text-sm">
+                  className="bg-survey-bg flex-1 text-center text-sm">
                   {question.scale === "number" ? (
                     <label
                       tabIndex={isCurrent ? 0 : -1}
@@ -162,25 +162,25 @@ export function RatingQuestion({
                       }}
                       className={cn(
                         value === number
-                          ? "fb-bg-accent-selected-bg fb-border-border-highlight fb-z-10 fb-border"
-                          : "fb-border-border",
+                          ? "bg-accent-selected-bg border-border-highlight z-10 border"
+                          : "border-border",
                         a.length === number
                           ? dir === "rtl"
-                            ? "fb-rounded-l-custom fb-border-l"
-                            : "fb-rounded-r-custom fb-border-r"
+                            ? "rounded-l-custom border-l"
+                            : "rounded-r-custom border-r"
                           : "",
                         number === 1
                           ? dir === "rtl"
-                            ? "fb-rounded-r-custom fb-border-r"
-                            : "fb-rounded-l-custom fb-border-l"
+                            ? "rounded-r-custom border-r"
+                            : "rounded-l-custom border-l"
                           : "",
-                        hoveredNumber === number ? "fb-bg-accent-bg" : "",
-                        question.isColorCodingEnabled ? "fb-min-h-[47px]" : "fb-min-h-[41px]",
-                        "fb-text-heading focus:fb-border-brand fb-relative fb-flex fb-w-full fb-cursor-pointer fb-items-center fb-justify-center fb-overflow-hidden fb-border-b fb-border-l fb-border-t focus:fb-border-2 focus:fb-outline-none"
+                        hoveredNumber === number ? "bg-accent-bg" : "",
+                        question.isColorCodingEnabled ? "min-h-[47px]" : "min-h-[41px]",
+                        "text-heading focus:border-brand relative flex w-full cursor-pointer items-center justify-center overflow-hidden border-b border-l border-t focus:border-2 focus:outline-none"
                       )}>
                       {question.isColorCodingEnabled ? (
                         <div
-                          className={`fb-absolute fb-left-0 fb-top-0 fb-h-[6px] fb-w-full ${getRatingNumberOptionColor(question.range, number)}`}
+                          className={`absolute left-0 top-0 h-[6px] w-full ${getRatingNumberOptionColor(question.range, number)}`}
                         />
                       ) : null}
                       <HiddenRadioInput number={number} id={number.toString()} />
@@ -198,11 +198,9 @@ export function RatingQuestion({
                         }
                       }}
                       className={cn(
-                        number <= hoveredNumber || number <= value!
-                          ? "fb-text-amber-400"
-                          : "fb-text-[#8696AC]",
-                        hoveredNumber === number ? "fb-text-amber-400" : "",
-                        "fb-relative fb-flex fb-max-h-16 fb-min-h-9 fb-cursor-pointer fb-justify-center focus:fb-outline-none"
+                        number <= hoveredNumber || number <= value! ? "text-amber-400" : "text-[#8696AC]",
+                        hoveredNumber === number ? "text-amber-400" : "",
+                        "relative flex max-h-16 min-h-9 cursor-pointer justify-center focus:outline-none"
                       )}
                       onFocus={() => {
                         setHoveredNumber(number);
@@ -211,7 +209,7 @@ export function RatingQuestion({
                         setHoveredNumber(0);
                       }}>
                       <HiddenRadioInput number={number} id={number.toString()} />
-                      <div className="fb-h-full fb-w-full fb-max-w-[74px] fb-object-contain">
+                      <div className="h-full w-full max-w-[74px] object-contain">
                         <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor">
                           <path
                             fillRule="evenodd"
@@ -224,10 +222,10 @@ export function RatingQuestion({
                     <label
                       tabIndex={isCurrent ? 0 : -1}
                       className={cn(
-                        "fb-relative fb-flex fb-max-h-16 fb-min-h-9 fb-w-full fb-cursor-pointer fb-justify-center",
+                        "relative flex max-h-16 min-h-9 w-full cursor-pointer justify-center",
                         value === number || hoveredNumber === number
-                          ? "fb-stroke-rating-selected fb-text-rating-selected"
-                          : "fb-stroke-heading fb-text-heading focus:fb-border-accent-bg focus:fb-border-2 focus:fb-outline-none"
+                          ? "stroke-rating-selected text-rating-selected"
+                          : "stroke-heading text-heading focus:border-accent-bg focus:border-2 focus:outline-none"
                       )}
                       onKeyDown={(e) => {
                         // Accessibility: if spacebar was pressed pass this down to the input
@@ -244,7 +242,7 @@ export function RatingQuestion({
                         setHoveredNumber(0);
                       }}>
                       <HiddenRadioInput number={number} id={number.toString()} />
-                      <div className={cn("fb-h-full fb-w-full fb-max-w-[74px] fb-object-contain")}>
+                      <div className={cn("h-full w-full max-w-[74px] object-contain")}>
                         <RatingSmiley
                           active={value === number || hoveredNumber === number}
                           idx={i}
@@ -257,17 +255,17 @@ export function RatingQuestion({
                 </span>
               ))}
             </div>
-            <div className="fb-text-subheading fb-mt-4 fb-flex fb-justify-between fb-px-1.5 fb-text-xs fb-leading-6 fb-gap-8">
-              <p className="fb-max-w-[50%]" dir="auto">
+            <div className="text-subheading mt-4 flex justify-between gap-8 px-1.5 text-xs leading-6">
+              <p className="max-w-[50%]" dir="auto">
                 {getLocalizedValue(question.lowerLabel, languageCode)}
               </p>
-              <p className="fb-max-w-[50%]" dir="auto">
+              <p className="max-w-[50%]" dir="auto">
                 {getLocalizedValue(question.upperLabel, languageCode)}
               </p>
             </div>
           </fieldset>
         </div>
-        <div className="fb-flex fb-flex-row-reverse fb-w-full fb-justify-between fb-pt-4">
+        <div className="flex w-full flex-row-reverse justify-between pt-4">
           {question.required ? (
             <div></div>
           ) : (
@@ -304,37 +302,37 @@ interface RatingSmileyProps {
 
 const getSmileyColor = (range: number, idx: number) => {
   if (range > 5) {
-    if (range - idx < 3) return "fb-fill-emerald-100";
-    if (range - idx < 5) return "fb-fill-orange-100";
-    return "fb-fill-rose-100";
+    if (range - idx < 3) return "fill-emerald-100";
+    if (range - idx < 5) return "fill-orange-100";
+    return "fill-rose-100";
   } else if (range < 5) {
-    if (range - idx < 2) return "fb-fill-emerald-100";
-    if (range - idx < 3) return "fb-fill-orange-100";
-    return "fb-fill-rose-100";
+    if (range - idx < 2) return "fill-emerald-100";
+    if (range - idx < 3) return "fill-orange-100";
+    return "fill-rose-100";
   }
-  if (range - idx < 3) return "fb-fill-emerald-100";
-  if (range - idx < 4) return "fb-fill-orange-100";
-  return "fb-fill-rose-100";
+  if (range - idx < 3) return "fill-emerald-100";
+  if (range - idx < 4) return "fill-orange-100";
+  return "fill-rose-100";
 };
 
 const getActiveSmileyColor = (range: number, idx: number) => {
   if (range > 5) {
-    if (range - idx < 3) return "fb-fill-emerald-300";
-    if (range - idx < 5) return "fb-fill-orange-300";
-    return "fb-fill-rose-300";
+    if (range - idx < 3) return "fill-emerald-300";
+    if (range - idx < 5) return "fill-orange-300";
+    return "fill-rose-300";
   } else if (range < 5) {
-    if (range - idx < 2) return "fb-fill-emerald-300";
-    if (range - idx < 3) return "fb-fill-orange-300";
-    return "fb-fill-rose-300";
+    if (range - idx < 2) return "fill-emerald-300";
+    if (range - idx < 3) return "fill-orange-300";
+    return "fill-rose-300";
   }
-  if (range - idx < 3) return "fb-fill-emerald-300";
-  if (range - idx < 4) return "fb-fill-orange-300";
-  return "fb-fill-rose-300";
+  if (range - idx < 3) return "fill-emerald-300";
+  if (range - idx < 4) return "fill-orange-300";
+  return "fill-rose-300";
 };
 
 const getSmiley = (iconIdx: number, idx: number, range: number, active: boolean, addColors: boolean) => {
-  const activeColor = addColors ? getActiveSmileyColor(range, idx) : "fb-fill-rating-fill";
-  const inactiveColor = addColors ? getSmileyColor(range, idx) : "fb-fill-none";
+  const activeColor = addColors ? getActiveSmileyColor(range, idx) : "fill-rating-fill";
+  const inactiveColor = addColors ? getSmileyColor(range, idx) : "fill-none";
 
   const icons = [
     <TiredFace key="tired-face" className={active ? activeColor : inactiveColor} />,

packages/surveys/src/components/wrappers/auto-close-wrapper.tsx

@@ -63,11 +63,11 @@ export function AutoCloseWrapper({
   }, [survey.autoClose]);
 
   return (
-    <div className="fb-h-full fb-w-full fb-flex fb-flex-col">
+    <div className="flex h-full w-full flex-col">
       <div // NOSONAR // We can't have a role="button" here as sonarqube registers more issues with this. This is indeed an interactive element.
         onClick={stopCountdown}
         onMouseOver={stopCountdown} // NOSONAR // We can't check for onFocus because the survey is auto focused after the first question and we don't want to stop the countdown
-        className="fb-h-full fb-w-full"
+        className="h-full w-full"
         data-testid="fb__surveys__auto-close-wrapper-test"
         onKeyDown={stopCountdown}
         aria-label={t("common.auto_close_wrapper")}
@@ -75,7 +75,7 @@ export function AutoCloseWrapper({
         {children}
       </div>
       {survey.type === "app" && survey.autoClose && (
-        <div className="fb-h-2 fb-w-full" aria-hidden={!showAutoCloseProgressBar}>
+        <div className="h-2 w-full" aria-hidden={!showAutoCloseProgressBar}>
           {showAutoCloseProgressBar && <AutoCloseProgressBar autoCloseTimeout={survey.autoClose} />}
         </div>
       )}

packages/surveys/src/components/wrappers/scrollable-container.tsx

@@ -73,28 +73,28 @@ export const ScrollableContainer = forwardRef<ScrollableContainerHandle, Scrolla
     }
 
     return (
-      <div className="fb-relative">
+      <div className="relative">
         {!isAtTop && (
-          <div className="fb-from-survey-bg fb-absolute fb-left-0 fb-right-2 fb-top-0 fb-z-10 fb-h-4 fb-bg-gradient-to-b fb-to-transparent" />
+          <div className="from-survey-bg absolute left-0 right-2 top-0 z-10 h-4 bg-gradient-to-b to-transparent" />
         )}
         <div
           ref={containerRef}
           style={{
             maxHeight,
           }}
-          className={cn("fb-overflow-auto fb-px-4 fb-bg-survey-bg")}>
+          className={cn("bg-survey-bg overflow-auto px-4")}>
           {children}
         </div>
         {!isAtBottom && (
           <>
-            <div className="fb-from-survey-bg fb-absolute fb-bottom-0 fb-left-4 fb-right-4 fb-h-4 fb-bg-gradient-to-t fb-to-transparent" />
+            <div className="from-survey-bg absolute bottom-0 left-4 right-4 h-4 bg-gradient-to-t to-transparent" />
             <button
               type="button"
               onClick={scrollToBottom}
               style={{ transform: "translateX(-50%)" }}
-              className="fb-absolute fb-bottom-2 fb-left-1/2 fb-z-20 fb-flex fb-h-8 fb-w-8 fb-items-center fb-justify-center fb-rounded-full fb-bg-survey-bg fb-border fb-border-transparent hover:fb-border-border fb-shadow-lg fb-transition-colors focus:fb-ring-2 focus:fb-outline-none focus:fb-ring-brand focus:fb-ring-offset-2"
+              className="bg-survey-bg hover:border-border focus:ring-brand absolute bottom-2 left-1/2 z-20 flex h-8 w-8 items-center justify-center rounded-full border border-transparent shadow-lg transition-colors focus:outline-none focus:ring-2 focus:ring-offset-2"
               aria-label="Scroll to bottom">
-              <ChevronDownIcon className="fb-text-heading fb-w-5 fb-h-5" />
+              <ChevronDownIcon className="text-heading h-5 w-5" />
             </button>
           </>
         )}

packages/surveys/src/components/wrappers/stacked-card.tsx

@@ -45,7 +45,7 @@ export const StackedCard = ({
   };
 
   const getDummyCardContent = () => {
-    return <div style={{ height: cardHeight }} className="fb-w-full fb-p-6"></div>;
+    return <div style={{ height: cardHeight }} className="w-full p-6"></div>;
   };
 
   const calculateCardTransform = useMemo(() => {
@@ -111,7 +111,7 @@ export const StackedCard = ({
         ...straightCardArrangementStyles,
         ...getBottomStyles(),
       }}
-      className="fb-pointer fb-rounded-custom fb-bg-survey-bg fb-absolute fb-inset-x-0 fb-transition-all fb-ease-in-out fb-overflow-hidden">
+      className="pointer rounded-custom bg-survey-bg absolute inset-x-0 overflow-hidden transition-all ease-in-out">
       <div
         style={{
           opacity: contentOpacity,

packages/surveys/src/components/wrappers/stacked-cards-container.tsx

@@ -85,7 +85,7 @@ export function StackedCardsContainer({
   const borderStyles = useMemo(() => {
     const baseStyle = {
       border: "1px solid",
-      borderRadius: "var(--fb-border-radius)",
+      borderRadius: "var(--border-radius)",
     };
     // Determine borderColor based on the survey type and availability of highlightBorderColor
     const borderColor =
@@ -142,7 +142,7 @@ export function StackedCardsContainer({
   return (
     <div
       data-testid="stacked-cards-container"
-      className="fb-relative fb-flex fb-h-full fb-items-end fb-justify-center md:fb-items-center"
+      className="relative flex h-full items-end justify-center md:items-center"
       onMouseEnter={() => {
         setHovered(true);
       }}
@@ -154,7 +154,7 @@ export function StackedCardsContainer({
         <div
           id={`questionCard-${questionIdxTemp.toString()}`}
           data-testid={`questionCard-${questionIdxTemp.toString()}`}
-          className={cn("fb-w-full fb-bg-survey-bg fb-overflow-hidden", fullSizeCards ? "fb-h-full" : "")}
+          className={cn("bg-survey-bg w-full overflow-hidden", fullSizeCards ? "h-full" : "")}
           style={borderStyles}>
           {getCardContent(questionIdxTemp, 0)}
         </div>

packages/surveys/src/components/wrappers/survey-container.tsx

@@ -51,17 +51,17 @@ export function SurveyContainer({
   const getPlacementStyle = (placement: TPlacement): string => {
     switch (placement) {
       case "bottomRight":
-        return "sm:fb-bottom-3 sm:fb-right-3";
+        return "sm:bottom-3 sm:right-3";
       case "topRight":
-        return "sm:fb-top-3 sm:fb-right-3 sm:fb-bottom-3";
+        return "sm:top-3 sm:right-3 sm:bottom-3";
       case "topLeft":
-        return "sm:fb-top-3 sm:fb-left-3 sm:fb-bottom-3";
+        return "sm:top-3 sm:left-3 sm:bottom-3";
       case "bottomLeft":
-        return "sm:fb-bottom-3 sm:fb-left-3";
+        return "sm:bottom-3 sm:left-3";
       case "center":
-        return "sm:fb-top-1/2 sm:fb-left-1/2 sm:fb-transform sm:-fb-translate-x-1/2 sm:-fb-translate-y-1/2";
+        return "sm:top-1/2 sm:left-1/2 sm:transform sm:-translate-x-1/2 sm:-translate-y-1/2";
       default:
-        return "sm:fb-bottom-3 sm:fb-right-3";
+        return "sm:bottom-3 sm:right-3";
     }
   };
 
@@ -69,33 +69,33 @@ export function SurveyContainer({
 
   if (!isModal) {
     return (
-      <div id="fbjs" className="fb-formbricks-form" style={{ height: "100%", width: "100%" }} dir={dir}>
+      <div id="fbjs" className="formbricks-form" style={{ height: "100%", width: "100%" }} dir={dir}>
         {children}
       </div>
     );
   }
 
   return (
-    <div id="fbjs" className="fb-formbricks-form" dir={dir}>
+    <div id="fbjs" className="formbricks-form" dir={dir}>
       <div
         aria-live="assertive"
         className={cn(
-          isCenter ? "fb-pointer-events-auto" : "fb-pointer-events-none",
-          isModal && "fb-z-999999 fb-fixed fb-inset-0 fb-flex fb-items-end"
+          isCenter ? "pointer-events-auto" : "pointer-events-none",
+          isModal && "z-999999 fixed inset-0 flex items-end"
         )}>
         <div
           className={cn(
-            "fb-relative fb-h-full fb-w-full",
-            !isCenter ? "fb-bg-none fb-transition-all fb-duration-500 fb-ease-in-out" : "",
-            isModal && isCenter && darkOverlay ? "fb-bg-slate-700/80" : "",
-            isModal && isCenter && !darkOverlay ? "fb-bg-white/50" : ""
+            "relative h-full w-full",
+            !isCenter ? "bg-none transition-all duration-500 ease-in-out" : "",
+            isModal && isCenter && darkOverlay ? "bg-slate-700/80" : "",
+            isModal && isCenter && !darkOverlay ? "bg-white/50" : ""
           )}>
           <div
             ref={modalRef}
             className={cn(
               getPlacementStyle(placement),
-              isOpen ? "fb-opacity-100" : "fb-opacity-0",
-              "fb-rounded-custom fb-pointer-events-auto fb-absolute fb-bottom-0 fb-h-fit fb-w-full fb-overflow-visible fb-bg-white fb-shadow-lg fb-transition-all fb-duration-500 fb-ease-in-out sm:fb-m-4 sm:fb-max-w-sm"
+              isOpen ? "opacity-100" : "opacity-0",
+              "rounded-custom pointer-events-auto absolute bottom-0 h-fit w-full overflow-visible bg-white shadow-lg transition-all duration-500 ease-in-out sm:m-4 sm:max-w-sm"
             )}>
             <div>{children}</div>
           </div>

packages/surveys/src/index.ts

@@ -4,7 +4,7 @@ import { RenderSurvey } from "@/components/general/render-survey";
 import { I18nProvider } from "@/components/i18n/provider";
 import { FILE_PICK_EVENT } from "@/lib/constants";
 import { getI18nLanguage } from "@/lib/i18n-utils";
-import { addCustomThemeToDom, addStylesToDom } from "@/lib/styles";
+import { addCustomThemeToDom, addStylesToDom, setStyleNonce } from "@/lib/styles";
 
 export const renderSurveyInline = (props: SurveyContainerProps) => {
   const inlineProps: SurveyContainerProps = {
@@ -70,15 +70,17 @@ export const renderSurveyModal = renderSurvey;
 
 export const onFilePick = (files: { name: string; type: string; base64: string }[]) => {
   const fileUploadEvent = new CustomEvent(FILE_PICK_EVENT, { detail: files });
-  window.dispatchEvent(fileUploadEvent);
+  globalThis.dispatchEvent(fileUploadEvent);
 };
 
 // Initialize the global formbricksSurveys object if it doesn't exist
-if (typeof window !== "undefined") {
-  window.formbricksSurveys = {
+if (globalThis.window !== undefined) {
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any -- Type definition is in @formbricks/types package
+  (globalThis.window as any).formbricksSurveys = {
     renderSurveyInline,
     renderSurveyModal,
     renderSurvey,
     onFilePick,
-  };
+    setNonce: setStyleNonce,
+  } as typeof globalThis.window.formbricksSurveys;
 }

packages/surveys/src/lib/html-utils.test.ts

@@ -1,7 +1,48 @@
 import { describe, expect, test } from "vitest";
-import { isValidHTML } from "./html-utils";
+import { isValidHTML, stripInlineStyles } from "./html-utils";
 
 describe("html-utils", () => {
+  describe("stripInlineStyles", () => {
+    test("should remove inline styles with double quotes", () => {
+      const input = '<div style="color: red;">Test</div>';
+      const expected = "<div>Test</div>";
+      expect(stripInlineStyles(input)).toBe(expected);
+    });
+
+    test("should remove inline styles with single quotes", () => {
+      const input = "<div style='color: red;'>Test</div>";
+      const expected = "<div>Test</div>";
+      expect(stripInlineStyles(input)).toBe(expected);
+    });
+
+    test("should remove multiple inline styles", () => {
+      const input = '<div style="color: red;"><span style="font-size: 14px;">Test</span></div>';
+      const expected = "<div><span>Test</span></div>";
+      expect(stripInlineStyles(input)).toBe(expected);
+    });
+
+    test("should handle complex inline styles", () => {
+      const input = '<p style="margin: 10px; padding: 5px; background-color: blue;">Content</p>';
+      const expected = "<p>Content</p>";
+      expect(stripInlineStyles(input)).toBe(expected);
+    });
+
+    test("should not affect other attributes", () => {
+      const input = '<div class="test" id="myDiv" style="color: red;">Test</div>';
+      const expected = '<div class="test" id="myDiv">Test</div>';
+      expect(stripInlineStyles(input)).toBe(expected);
+    });
+
+    test("should return unchanged string if no inline styles", () => {
+      const input = '<div class="test">Test</div>';
+      expect(stripInlineStyles(input)).toBe(input);
+    });
+
+    test("should handle empty string", () => {
+      expect(stripInlineStyles("")).toBe("");
+    });
+  });
+
   describe("isValidHTML", () => {
     test("should return false for empty string", () => {
       expect(isValidHTML("")).toBe(false);
@@ -22,5 +63,9 @@ describe("html-utils", () => {
     test("should return true for complex HTML", () => {
       expect(isValidHTML('<div class="test"><p>Test</p></div>')).toBe(true);
     });
+
+    test("should handle HTML with inline styles (they should be stripped)", () => {
+      expect(isValidHTML('<p style="color: red;">Test</p>')).toBe(true);
+    });
   });
 });

packages/surveys/src/lib/html-utils.ts

@@ -1,9 +1,23 @@
+/**
+ * Strip inline style attributes from HTML string to avoid CSP violations
+ * @param html - The HTML string to process
+ * @returns HTML string with all style attributes removed
+ * @note This is a security measure to prevent CSP violations during HTML parsing
+ */
+export const stripInlineStyles = (html: string): string => {
+  // Remove style="..." or style='...' attributes
+  // Use separate patterns for each quote type to avoid ReDoS vulnerability
+  // The pattern [^"]* and [^']* are safe as they don't cause backtracking
+  return html.replace(/\s+style\s*=\s*["'][^"']*["']/gi, ""); //NOSONAR
+};
+
 /**
  * Lightweight HTML detection for browser environments
  * Uses native DOMParser (built-in, 0 KB bundle size)
  * @param str - The input string to test
  * @returns true if the string contains valid HTML elements, false otherwise
  * @note Returns false in non-browser environments (SSR, Node.js) where window is undefined
+ * @note Strips inline styles before parsing to avoid CSP violations
  */
 export const isValidHTML = (str: string): boolean => {
   // This should ideally never happen because the surveys package should be used in an environment where DOM is available
@@ -12,7 +26,10 @@ export const isValidHTML = (str: string): boolean => {
   if (!str) return false;
 
   try {
-    const doc = new DOMParser().parseFromString(str, "text/html");
+    // Strip inline style attributes to avoid CSP violations during parsing
+    const strippedStr = stripInlineStyles(str);
+
+    const doc = new DOMParser().parseFromString(strippedStr, "text/html");
     const errorNode = doc.querySelector("parsererror");
     if (errorNode) return false;
     return Array.from(doc.body.childNodes).some((node) => node.nodeType === 1);

packages/surveys/src/lib/styles.test.ts

@@ -1,7 +1,7 @@
 import { afterEach, beforeEach, describe, expect, test, vi } from "vitest";
 import { type TProjectStyling } from "@formbricks/types/project";
 import { type TSurveyStyling } from "@formbricks/types/surveys/types";
-import { addCustomThemeToDom, addStylesToDom } from "./styles";
+import { addCustomThemeToDom, addStylesToDom, getStyleNonce, setStyleNonce } from "./styles";
 
 // Mock CSS module imports
 vi.mock("@/styles/global.css?inline", () => ({ default: ".global {}" }));
@@ -40,11 +40,85 @@ const getBaseProjectStyling = (overrides: Partial<TProjectStyling> = {}): TProje
   };
 };
 
+describe("setStyleNonce and getStyleNonce", () => {
+  beforeEach(() => {
+    // Reset the DOM and nonce before each test
+    document.head.innerHTML = "";
+    document.body.innerHTML = "";
+    setStyleNonce(undefined);
+  });
+
+  test("should set and get the nonce value", () => {
+    const nonce = "test-nonce-123";
+    setStyleNonce(nonce);
+    expect(getStyleNonce()).toBe(nonce);
+  });
+
+  test("should allow clearing the nonce with undefined", () => {
+    setStyleNonce("initial-nonce");
+    expect(getStyleNonce()).toBe("initial-nonce");
+    setStyleNonce(undefined);
+    expect(getStyleNonce()).toBeUndefined();
+  });
+
+  test("should update existing formbricks__css element with nonce", () => {
+    // Create an existing style element
+    const existingElement = document.createElement("style");
+    existingElement.id = "formbricks__css";
+    document.head.appendChild(existingElement);
+
+    const nonce = "test-nonce-456";
+    setStyleNonce(nonce);
+
+    expect(existingElement.getAttribute("nonce")).toBe(nonce);
+  });
+
+  test("should update existing formbricks__css__custom element with nonce", () => {
+    // Create an existing custom style element
+    const existingElement = document.createElement("style");
+    existingElement.id = "formbricks__css__custom";
+    document.head.appendChild(existingElement);
+
+    const nonce = "test-nonce-789";
+    setStyleNonce(nonce);
+
+    expect(existingElement.getAttribute("nonce")).toBe(nonce);
+  });
+
+  test("should not update nonce on existing elements when nonce is undefined", () => {
+    // Create existing style elements
+    const mainElement = document.createElement("style");
+    mainElement.id = "formbricks__css";
+    mainElement.setAttribute("nonce", "existing-nonce");
+    document.head.appendChild(mainElement);
+
+    const customElement = document.createElement("style");
+    customElement.id = "formbricks__css__custom";
+    customElement.setAttribute("nonce", "existing-nonce");
+    document.head.appendChild(customElement);
+
+    setStyleNonce(undefined);
+
+    // Elements should retain their existing nonce (or be cleared if implementation removes it)
+    // The current implementation doesn't remove nonce when undefined, so we check it's not changed
+    expect(mainElement.getAttribute("nonce")).toBe("existing-nonce");
+    expect(customElement.getAttribute("nonce")).toBe("existing-nonce");
+  });
+
+  test("should handle setting nonce when elements don't exist", () => {
+    const nonce = "test-nonce-no-elements";
+    setStyleNonce(nonce);
+    expect(getStyleNonce()).toBe(nonce);
+    // Should not throw and should store the nonce for future use
+  });
+});
+
 describe("addStylesToDom", () => {
   beforeEach(() => {
     // Reset the DOM before each test
     document.head.innerHTML = "";
     document.body.innerHTML = "";
+    setStyleNonce(undefined);
   });
 
   afterEach(() => {
@@ -52,6 +126,7 @@ describe("addStylesToDom", () => {
     if (styleElement) {
       styleElement.remove();
     }
+    setStyleNonce(undefined);
   });
 
   test("should add a style element to the head with combined CSS", () => {
@@ -78,12 +153,68 @@ describe("addStylesToDom", () => {
     expect(secondStyleElement).toBe(firstStyleElement);
     expect(secondStyleElement?.innerHTML).toBe(initialInnerHTML);
   });
+
+  test("should apply nonce to new style element when nonce is set", () => {
+    const nonce = "test-nonce-styles";
+    setStyleNonce(nonce);
+    addStylesToDom();
+
+    const styleElement = document.getElementById("formbricks__css") as HTMLStyleElement;
+    expect(styleElement).not.toBeNull();
+    expect(styleElement.getAttribute("nonce")).toBe(nonce);
+  });
+
+  test("should not apply nonce when nonce is not set", () => {
+    addStylesToDom();
+    const styleElement = document.getElementById("formbricks__css") as HTMLStyleElement;
+    expect(styleElement).not.toBeNull();
+    expect(styleElement.getAttribute("nonce")).toBeNull();
+  });
+
+  test("should update nonce on existing style element if nonce is set after creation", () => {
+    addStylesToDom(); // Create element without nonce
+    const styleElement = document.getElementById("formbricks__css") as HTMLStyleElement;
+    expect(styleElement.getAttribute("nonce")).toBeNull();
+
+    const nonce = "test-nonce-update";
+    setStyleNonce(nonce);
+    addStylesToDom(); // Call again to trigger update logic
+
+    expect(styleElement.getAttribute("nonce")).toBe(nonce);
+  });
+
+  test("should not overwrite existing nonce when updating via addStylesToDom", () => {
+    const existingElement = document.createElement("style");
+    existingElement.id = "formbricks__css";
+    existingElement.setAttribute("nonce", "existing-nonce");
+    document.head.appendChild(existingElement);
+
+    // Don't call setStyleNonce - just verify addStylesToDom doesn't overwrite
+    addStylesToDom(); // Should not overwrite since nonce already exists
+
+    // The update logic in addStylesToDom only sets nonce if it doesn't exist
+    expect(existingElement.getAttribute("nonce")).toBe("existing-nonce");
+  });
+
+  test("should overwrite existing nonce when setStyleNonce is called directly", () => {
+    const existingElement = document.createElement("style");
+    existingElement.id = "formbricks__css";
+    existingElement.setAttribute("nonce", "existing-nonce");
+    document.head.appendChild(existingElement);
+
+    const newNonce = "new-nonce";
+    setStyleNonce(newNonce); // setStyleNonce always updates existing elements
+
+    // setStyleNonce directly updates the nonce attribute
+    expect(existingElement.getAttribute("nonce")).toBe(newNonce);
+  });
 });
 
 describe("addCustomThemeToDom", () => {
   beforeEach(() => {
     document.head.innerHTML = "";
     document.body.innerHTML = "";
+    setStyleNonce(undefined);
   });
 
   afterEach(() => {
@@ -91,6 +222,7 @@ describe("addCustomThemeToDom", () => {
     if (styleElement) {
       styleElement.remove();
     }
+    setStyleNonce(undefined);
   });
 
   const getCssVariables = (styleElement: HTMLStyleElement | null): Record<string, string> => {
@@ -142,10 +274,10 @@ describe("addCustomThemeToDom", () => {
     const styleElement = document.getElementById("formbricks__css__custom") as HTMLStyleElement;
     const variables = getCssVariables(styleElement);
 
-    expect(variables["--fb-brand-color"]).toBe("#0000FF");
-    expect(variables["--fb-focus-color"]).toBe("#0000FF");
-    expect(variables["--fb-brand-text-color"]).toBe("white"); // isLight('#0000FF') is false
-    expect(variables["--fb-border-radius"]).toBe("8px"); // Default roundness
+    expect(variables["--brand-color"]).toBe("#0000FF");
+    expect(variables["--focus-color"]).toBe("#0000FF");
+    expect(variables["--brand-text-color"]).toBe("white"); // isLight('#0000FF') is false
+    expect(variables["--border-radius"]).toBe("8px"); // Default roundness
   });
 
   test("should apply brand-text-color as black for light brandColor", () => {
@@ -153,7 +285,7 @@ describe("addCustomThemeToDom", () => {
     addCustomThemeToDom({ styling });
     const styleElement = document.getElementById("formbricks__css__custom") as HTMLStyleElement;
     const variables = getCssVariables(styleElement);
-    expect(variables["--fb-brand-text-color"]).toBe("black"); // isLight('#FFFF00') is true
+    expect(variables["--brand-text-color"]).toBe("black"); // isLight('#FFFF00') is true
   });
 
   test("should default brand-text-color to white if brandColor is undefined", () => {
@@ -161,7 +293,7 @@ describe("addCustomThemeToDom", () => {
     addCustomThemeToDom({ styling });
     const styleElement = document.getElementById("formbricks__css__custom") as HTMLStyleElement;
     const variables = getCssVariables(styleElement);
-    expect(variables["--fb-brand-text-color"]).toBe("#ffffff");
+    expect(variables["--brand-text-color"]).toBe("#ffffff");
   });
 
   test("should apply all survey styling properties", () => {
@@ -183,25 +315,25 @@ describe("addCustomThemeToDom", () => {
     const styleElement = document.getElementById("formbricks__css__custom") as HTMLStyleElement;
     const variables = getCssVariables(styleElement);
 
-    expect(variables["--fb-brand-color"]).toBe("#112233");
-    expect(variables["--fb-focus-color"]).toBe("#112233");
-    expect(variables["--fb-brand-text-color"]).toBe("white");
-    expect(variables["--fb-heading-color"]).toBe("#AABBCC");
-    expect(variables["--fb-subheading-color"]).toBe("#AABBCC");
-    expect(variables["--fb-placeholder-color"]).toBeDefined(); // Relies on mixColor
-    expect(variables["--fb-border-color"]).toBe("#DDDDDD");
-    expect(variables["--fb-border-color-highlight"]).toBeDefined(); // Relies on mixColor
-    expect(variables["--fb-survey-background-color"]).toBe("#EEEEEE");
-    expect(variables["--fb-survey-border-color"]).toBe("#CCCCCC");
-    expect(variables["--fb-border-radius"]).toBe("12px");
-    expect(variables["--fb-input-background-color"]).toBe("#F0F0F0");
-    expect(variables["--fb-signature-text-color"]).toBeDefined(); // Relies on mixColor & isLight
-    expect(variables["--fb-branding-text-color"]).toBeDefined(); // Relies on mixColor & isLight
-    expect(variables["--fb-input-background-color-selected"]).toBeDefined(); // Relies on mixColor
-    expect(variables["--fb-accent-background-color"]).toBeDefined(); // Relies on mixColor
-    expect(variables["--fb-accent-background-color-selected"]).toBeDefined(); // Relies on mixColor
+    expect(variables["--brand-color"]).toBe("#112233");
+    expect(variables["--focus-color"]).toBe("#112233");
+    expect(variables["--brand-text-color"]).toBe("white");
+    expect(variables["--heading-color"]).toBe("#AABBCC");
+    expect(variables["--subheading-color"]).toBe("#AABBCC");
+    expect(variables["--placeholder-color"]).toBeDefined(); // Relies on mixColor
+    expect(variables["--border-color"]).toBe("#DDDDDD");
+    expect(variables["--border-color-highlight"]).toBeDefined(); // Relies on mixColor
+    expect(variables["--survey-background-color"]).toBe("#EEEEEE");
+    expect(variables["--survey-border-color"]).toBe("#CCCCCC");
+    expect(variables["--border-radius"]).toBe("12px");
+    expect(variables["--input-background-color"]).toBe("#F0F0F0");
+    expect(variables["--signature-text-color"]).toBeDefined(); // Relies on mixColor & isLight
+    expect(variables["--branding-text-color"]).toBeDefined(); // Relies on mixColor & isLight
+    expect(variables["--input-background-color-selected"]).toBeDefined(); // Relies on mixColor
+    expect(variables["--accent-background-color"]).toBeDefined(); // Relies on mixColor
+    expect(variables["--accent-background-color-selected"]).toBeDefined(); // Relies on mixColor
     // calendar-tile-color depends on isLight(brandColor)
-    expect(variables["--fb-calendar-tile-color"]).toBeUndefined(); // isLight('#112233') is false, so this should be undefined
+    expect(variables["--calendar-tile-color"]).toBeUndefined(); // isLight('#112233') is false, so this should be undefined
   });
 
   test("should set signature and branding text colors for dark questionColor", () => {
@@ -214,8 +346,8 @@ describe("addCustomThemeToDom", () => {
     const variables = getCssVariables(styleElement);
 
     // For dark questionColor ('#202020'), isLight is false, so mix with white.
-    expect(variables["--fb-signature-text-color"]).toBeDefined();
-    expect(variables["--fb-branding-text-color"]).toBeDefined();
+    expect(variables["--signature-text-color"]).toBeDefined();
+    expect(variables["--branding-text-color"]).toBeDefined();
   });
 
   test("should handle roundness 0 correctly", () => {
@@ -223,7 +355,7 @@ describe("addCustomThemeToDom", () => {
     addCustomThemeToDom({ styling });
     const styleElement = document.getElementById("formbricks__css__custom") as HTMLStyleElement;
     const variables = getCssVariables(styleElement);
-    expect(variables["--fb-border-radius"]).toBe("0px");
+    expect(variables["--border-radius"]).toBe("0px");
   });
 
   test("should set input-background-color-selected to slate-50 for white inputColor", () => {
@@ -233,7 +365,7 @@ describe("addCustomThemeToDom", () => {
       addCustomThemeToDom({ styling });
       const styleElement = document.getElementById("formbricks__css__custom") as HTMLStyleElement;
       const variables = getCssVariables(styleElement);
-      expect(variables["--fb-input-background-color-selected"]).toBe("var(--slate-50)");
+      expect(variables["--input-background-color-selected"]).toBe("var(--slate-50)");
     });
   });
 
@@ -247,8 +379,8 @@ describe("addCustomThemeToDom", () => {
     const variables = getCssVariables(styleElement);
     // We can't easily test the exact mixed color without duplicating mixColor logic or having access to its exact output for these inputs.
     // So, we just check that it's defined and not the slate-50 default.
-    expect(variables["--fb-input-background-color-selected"]).toBeDefined();
-    expect(variables["--fb-input-background-color-selected"]).not.toBe("var(--slate-50)");
+    expect(variables["--input-background-color-selected"]).toBeDefined();
+    expect(variables["--input-background-color-selected"]).not.toBe("var(--slate-50)");
   });
 
   test("should not set calendar-tile-color if brandColor is undefined", () => {
@@ -256,7 +388,7 @@ describe("addCustomThemeToDom", () => {
     addCustomThemeToDom({ styling });
     const styleElement = document.getElementById("formbricks__css__custom") as HTMLStyleElement;
     const variables = getCssVariables(styleElement);
-    expect(variables["--fb-calendar-tile-color"]).toBeUndefined();
+    expect(variables["--calendar-tile-color"]).toBeUndefined();
   });
 
   test("should not define variables for undefined styling properties", () => {
@@ -265,11 +397,71 @@ describe("addCustomThemeToDom", () => {
     const styleElement = document.getElementById("formbricks__css__custom") as HTMLStyleElement;
     const variables = getCssVariables(styleElement);
 
-    expect(variables["--fb-brand-color"]).toBe("#ABC");
+    expect(variables["--brand-color"]).toBe("#ABC");
     // Check a few that would not be set
-    expect(variables["--fb-heading-color"]).toBeUndefined();
-    expect(variables["--fb-survey-background-color"]).toBeUndefined();
-    expect(variables["--fb-input-background-color"]).toBeUndefined();
+    expect(variables["--heading-color"]).toBeUndefined();
+    expect(variables["--survey-background-color"]).toBeUndefined();
+    expect(variables["--input-background-color"]).toBeUndefined();
+  });
+
+  test("should apply nonce to new custom theme style element when nonce is set", () => {
+    const nonce = "test-nonce-custom";
+    setStyleNonce(nonce);
+    const styling = getBaseProjectStyling({ brandColor: { light: "#FF0000" } });
+    addCustomThemeToDom({ styling });
+
+    const styleElement = document.getElementById("formbricks__css__custom") as HTMLStyleElement;
+    expect(styleElement).not.toBeNull();
+    expect(styleElement.getAttribute("nonce")).toBe(nonce);
+  });
+
+  test("should not apply nonce when nonce is not set", () => {
+    const styling = getBaseProjectStyling({ brandColor: { light: "#FF0000" } });
+    addCustomThemeToDom({ styling });
+
+    const styleElement = document.getElementById("formbricks__css__custom") as HTMLStyleElement;
+    expect(styleElement).not.toBeNull();
+    expect(styleElement.getAttribute("nonce")).toBeNull();
+  });
+
+  test("should update nonce on existing custom style element if nonce is set after creation", () => {
+    const styling = getBaseProjectStyling({ brandColor: { light: "#FF0000" } });
+    addCustomThemeToDom({ styling }); // Create element without nonce
+    const styleElement = document.getElementById("formbricks__css__custom") as HTMLStyleElement;
+    expect(styleElement.getAttribute("nonce")).toBeNull();
+
+    const nonce = "test-nonce-custom-update";
+    setStyleNonce(nonce);
+    addCustomThemeToDom({ styling }); // Call again to trigger update logic
+
+    expect(styleElement.getAttribute("nonce")).toBe(nonce);
+  });
+
+  test("should not overwrite existing nonce when updating custom theme via addCustomThemeToDom", () => {
+    const existingElement = document.createElement("style");
+    existingElement.id = "formbricks__css__custom";
+    existingElement.setAttribute("nonce", "existing-custom-nonce");
+    document.head.appendChild(existingElement);
+
+    // Don't call setStyleNonce - just verify addCustomThemeToDom doesn't overwrite
+    const styling = getBaseProjectStyling({ brandColor: { light: "#FF0000" } });
+    addCustomThemeToDom({ styling }); // Should not overwrite since nonce already exists
+
+    // The update logic in addCustomThemeToDom only sets nonce if it doesn't exist
+    expect(existingElement.getAttribute("nonce")).toBe("existing-custom-nonce");
+  });
+
+  test("should overwrite existing nonce when setStyleNonce is called directly on custom theme", () => {
+    const existingElement = document.createElement("style");
+    existingElement.id = "formbricks__css__custom";
+    existingElement.setAttribute("nonce", "existing-custom-nonce");
+    document.head.appendChild(existingElement);
+
+    const newNonce = "new-custom-nonce";
+    setStyleNonce(newNonce); // setStyleNonce directly updates the nonce attribute
+
+    // setStyleNonce directly updates the nonce attribute
+    expect(existingElement.getAttribute("nonce")).toBe(newNonce);
   });
 });
 

packages/surveys/src/lib/styles.ts

@@ -8,24 +8,74 @@ import preflight from "@/styles/preflight.css?inline";
 import editorCss from "../../../../apps/web/modules/ui/components/editor/styles-editor-frontend.css?inline";
 import datePickerCustomCss from "../styles/date-picker.css?inline";
 
+// Store the nonce globally for style elements
+let styleNonce: string | undefined;
+
+/**
+ * Set the CSP nonce to be applied to all style elements
+ * @param nonce - The CSP nonce value (without 'nonce-' prefix)
+ */
+export const setStyleNonce = (nonce: string | undefined): void => {
+  styleNonce = nonce;
+
+  // Update existing style elements if they exist
+  const existingStyleElement = document.getElementById("formbricks__css");
+  if (existingStyleElement && nonce) {
+    existingStyleElement.setAttribute("nonce", nonce);
+  }
+
+  const existingCustomStyleElement = document.getElementById("formbricks__css__custom");
+  if (existingCustomStyleElement && nonce) {
+    existingCustomStyleElement.setAttribute("nonce", nonce);
+  }
+};
+
+export const getStyleNonce = (): string | undefined => {
+  return styleNonce;
+};
+
 export const addStylesToDom = () => {
   if (document.getElementById("formbricks__css") === null) {
     const styleElement = document.createElement("style");
     styleElement.id = "formbricks__css";
+
+    // Apply nonce if available
+    if (styleNonce) {
+      styleElement.setAttribute("nonce", styleNonce);
+    }
+
     styleElement.innerHTML =
       preflight + global + editorCss + datePickerCss + calendarCss + datePickerCustomCss;
     document.head.appendChild(styleElement);
+  } else {
+    // If style element already exists, update its nonce if needed
+    const existingStyleElement = document.getElementById("formbricks__css");
+    if (existingStyleElement && styleNonce && !existingStyleElement.getAttribute("nonce")) {
+      existingStyleElement.setAttribute("nonce", styleNonce);
+    }
   }
 };
 
 export const addCustomThemeToDom = ({ styling }: { styling: TProjectStyling | TSurveyStyling }): void => {
   // Check if the style element already exists
-  let styleElement = document.getElementById("formbricks__css__custom");
+  let styleElement = document.getElementById("formbricks__css__custom") as HTMLStyleElement | null;
 
-  // If the style element doesn't exist, create it and append to the head
-  if (!styleElement) {
+  // If the style element exists, update nonce if needed
+  if (styleElement) {
+    // Update nonce if it wasn't set before
+    if (styleNonce && !styleElement.getAttribute("nonce")) {
+      styleElement.setAttribute("nonce", styleNonce);
+    }
+  } else {
+    // Create it and append to the head
     styleElement = document.createElement("style");
     styleElement.id = "formbricks__css__custom";
+
+    // Apply nonce if available
+    if (styleNonce) {
+      styleElement.setAttribute("nonce", styleNonce);
+    }
+
     document.head.appendChild(styleElement);
   }
 
@@ -35,7 +85,7 @@ export const addCustomThemeToDom = ({ styling }: { styling: TProjectStyling | TS
   // Helper function to append the variable if it's not undefined
   const appendCssVariable = (variableName: string, value?: string) => {
     if (value !== undefined) {
-      cssVariables += `--fb-${variableName}: ${value};\n`;
+      cssVariables += `--${variableName}: ${value};\n`;
     }
   };
 

packages/surveys/src/styles/date-picker.css

@@ -6,7 +6,7 @@
   height: 160px;
   display: flex;
   background: rgb(248 250 252);
-  background: var(--fb-survey-background-color);
+  background: var(--survey-background-color);
   flex-direction: row-reverse;
   gap: 8px;
   justify-content: center;
@@ -56,7 +56,7 @@
 .calendar-root {
   position: absolute !important;
   top: 0 !important;
-  background: var(--fb-survey-background-color) !important;
+  background: var(--survey-background-color) !important;
   width: 100% !important;
 }
 
@@ -85,7 +85,7 @@
 }
 
 .react-calendar__month-view__weekdays__weekday {
-  color: var(--fb-heading-color);
+  color: var(--heading-color);
   font-weight: 400;
   text-transform: capitalize;
 }
@@ -100,7 +100,7 @@
 }
 
 .react-calendar__tile--active {
-  background: var(--fb-brand-color) !important;
+  background: var(--brand-color) !important;
   border-radius: 6px;
 }
 

packages/surveys/src/styles/global.css

@@ -19,7 +19,7 @@
 }
 
 #fbjs *::-webkit-scrollbar-thumb {
-  background-color: var(--fb-brand-color);
+  background-color: var(--brand-color);
   border: none;
   border-radius: 10px;
 }
@@ -27,18 +27,18 @@
 /* Firefox */
 #fbjs * {
   scrollbar-width: thin;
-  scrollbar-color: var(--fb-brand-color) transparent;
+  scrollbar-color: var(--brand-color) transparent;
 }
 
 /* this is for styling the HtmlBody component */
-.fb-htmlbody {
-  @apply fb-block fb-text-sm fb-font-normal fb-leading-6;
+.htmlbody {
+  @apply block text-sm font-normal leading-6;
   /* need to use !important because in packages/ui/components/editor/styles-editor-frontend.css the color is defined for some classes */
-  color: var(--fb-subheading-color) !important;
+  color: var(--subheading-color) !important;
 }
 
 /* without this, it wont override the color */
-p.fb-editor-paragraph {
+p.editor-paragraph {
   overflow-wrap: break-word;
 }
 
@@ -62,33 +62,33 @@ p.fb-editor-paragraph {
   --yellow-500: rgb(234 179 8);
 
   /* Default Light Theme, you can override everything by changing these values */
-  --fb-brand-color: var(--brand-default);
-  --fb-brand-text-color: black;
-  --fb-border-color: var(--slate-300);
-  --fb-border-color-highlight: var(--slate-500);
-  --fb-focus-color: var(--slate-500);
-  --fb-heading-color: var(--slate-900);
-  --fb-subheading-color: var(--slate-700);
-  --fb-placeholder-color: var(--slate-300);
-  --fb-info-text-color: var(--slate-500);
-  --fb-signature-text-color: var(--slate-500);
-  --fb-branding-text-color: var(--slate-500);
-  --fb-survey-background-color: white;
-  --fb-survey-border-color: var(--slate-50);
-  --fb-accent-background-color: var(--slate-200);
-  --fb-accent-background-color-selected: var(--slate-100);
-  --fb-input-background-color: var(--slate-50);
-  --fb-input-background-color-selected: var(--slate-200);
-  --fb-placeholder-color: var(--slate-400);
-  --fb-rating-fill: var(--yellow-100);
-  --fb-rating-hover: var(--yellow-500);
-  --fb-back-btn-border: transparent;
-  --fb-submit-btn-border: transparent;
-  --fb-rating-selected: black;
-  --fb-close-btn-color: var(--slate-500);
-  --fb-close-btn-color-hover: var(--slate-700);
-  --fb-calendar-tile-color: var(--slate-50);
-  --fb-border-radius: 8px;
+  --brand-color: var(--brand-default);
+  --brand-text-color: black;
+  --border-color: var(--slate-300);
+  --border-color-highlight: var(--slate-500);
+  --focus-color: var(--slate-500);
+  --heading-color: var(--slate-900);
+  --subheading-color: var(--slate-700);
+  --placeholder-color: var(--slate-300);
+  --info-text-color: var(--slate-500);
+  --signature-text-color: var(--slate-500);
+  --branding-text-color: var(--slate-500);
+  --survey-background-color: white;
+  --survey-border-color: var(--slate-50);
+  --accent-background-color: var(--slate-200);
+  --accent-background-color-selected: var(--slate-100);
+  --input-background-color: var(--slate-50);
+  --input-background-color-selected: var(--slate-200);
+  --placeholder-color: var(--slate-400);
+  --rating-fill: var(--yellow-100);
+  --rating-hover: var(--yellow-500);
+  --back-btn-border: transparent;
+  --submit-btn-border: transparent;
+  --rating-selected: black;
+  --close-btn-color: var(--slate-500);
+  --close-btn-color-hover: var(--slate-700);
+  --calendar-tile-color: var(--slate-50);
+  --border-radius: 8px;
 }
 
 @keyframes shrink-width-to-zero {
@@ -101,7 +101,7 @@ p.fb-editor-paragraph {
   }
 }
 
-.fb-no-scrollbar {
+.no-scrollbar {
   -ms-overflow-style: none !important;
   /* Internet Explorer 10+ */
   scrollbar-width: thin !important;

packages/surveys/tailwind.config.cjs

@@ -1,7 +1,6 @@
 /** @type {import('tailwindcss').Config} */
 module.exports = {
   important: "#fbjs",
-  prefix: "fb-",
   darkMode: "class",
   corePlugins: {
     preflight: false,
@@ -10,35 +9,34 @@ module.exports = {
   theme: {
     extend: {
       colors: {
-        brand: "var(--fb-brand-color)",
-        "on-brand": "var(--fb-brand-text-color)",
-        border: "var(--fb-border-color)",
-        "border-highlight": "var(--fb-border-color-highlight)",
-        focus: "var(--fb-focus-color)",
-        heading: "var(--fb-heading-color)",
-        subheading: "var(--fb-subheading-color)",
-        placeholder: "var(--fb-placeholder-color)",
-        "info-text": "var(--fb-info-text-color)",
-        signature: "var(--fb-signature-text-color)",
-        "branding-text": "var(--fb-branding-text-color)",
-        "survey-bg": "var(--fb-survey-background-color)",
-        "survey-border": "var(--fb-survey-border-color)",
-        "accent-bg": "var(--fb-accent-background-color)",
-        "accent-selected-bg": "var(--fb-accent-background-color-selected)",
-        "input-bg": "var(--fb-input-background-color)",
-        "input-bg-selected": "var(--fb-input-background-color-selected)",
-        placeholder: "var(--fb-placeholder-color)",
-        "rating-fill": "var(--fb-rating-fill)",
-        "rating-focus": "var(--fb-rating-hover)",
-        "rating-selected": "var(--fb-rating-selected)",
-        "back-button-border": "var(--fb-back-btn-border)",
-        "submit-button-border": "var(--fb-submit-btn-border)",
-        "close-button": "var(--fb-close-btn-color)",
-        "close-button-focus": "var(--fb-close-btn-hover-color)",
-        "calendar-tile": "var(--fb-calendar-tile-color)",
+        brand: "var(--brand-color)",
+        "on-brand": "var(--brand-text-color)",
+        border: "var(--border-color)",
+        "border-highlight": "var(--border-color-highlight)",
+        focus: "var(--focus-color)",
+        heading: "var(--heading-color)",
+        subheading: "var(--subheading-color)",
+        placeholder: "var(--placeholder-color)",
+        "info-text": "var(--info-text-color)",
+        signature: "var(--signature-text-color)",
+        "branding-text": "var(--branding-text-color)",
+        "survey-bg": "var(--survey-background-color)",
+        "survey-border": "var(--survey-border-color)",
+        "accent-bg": "var(--accent-background-color)",
+        "accent-selected-bg": "var(--accent-background-color-selected)",
+        "input-bg": "var(--input-background-color)",
+        "input-bg-selected": "var(--input-background-color-selected)",
+        "rating-fill": "var(--rating-fill)",
+        "rating-focus": "var(--rating-hover)",
+        "rating-selected": "var(--rating-selected)",
+        "back-button-border": "var(--back-btn-border)",
+        "submit-button-border": "var(--submit-btn-border)",
+        "close-button": "var(--close-btn-color)",
+        "close-button-focus": "var(--close-btn-color-hover)",
+        "calendar-tile": "var(--calendar-tile-color)",
       },
       borderRadius: {
-        custom: "var(--fb-border-radius)",
+        custom: "var(--border-radius)",
       },
       zIndex: {
         999999: "999999",

packages/types/surveys.d.ts

@@ -7,6 +7,8 @@ declare global {
       renderSurveyModal: (props: SurveyContainerProps) => void;
       renderSurvey: (props: SurveyContainerProps) => void;
       onFilePick: (files: { name: string; type: string; base64: string }[]) => void;
+      setNonce: (nonce: string | undefined) => void;
     };
+    __formbricksNonce?: string;
   }
 }