chore: FOR-1430 Component relocation (#1261)

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

apps/web/app/(app)/billing-confirmation/components/ConfirmationPage.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import ContentWrapper from "@/app/components/shared/ContentWrapper";
+import ContentWrapper from "@formbricks/ui/ContentWrapper";
 import { Button } from "@formbricks/ui/Button";
 import { Confetti } from "@formbricks/ui/Confetti";
 import { useEffect, useState } from "react";

apps/web/app/(app)/environments/[environmentId]/(actionsAndAttributes)/actions/components/ActionActivityTab.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import LoadingSpinner from "@/app/components/shared/LoadingSpinner";
+import LoadingSpinner from "@formbricks/ui/LoadingSpinner";
 import { ErrorComponent } from "@formbricks/ui/ErrorComponent";
 import { Label } from "@formbricks/ui/Label";
 import { convertDateTimeStringShort } from "@formbricks/lib/time";

apps/web/app/(app)/environments/[environmentId]/(actionsAndAttributes)/actions/components/ActionDetailModal.tsx

@@ -1,4 +1,4 @@
-import ModalWithTabs from "@/app/components/shared/ModalWithTabs";
+import ModalWithTabs from "@formbricks/ui/ModalWithTabs";
 import { CodeBracketIcon, CursorArrowRaysIcon, SparklesIcon } from "@heroicons/react/24/solid";
 import EventActivityTab from "./ActionActivityTab";
 import ActionSettingsTab from "./ActionSettingsTab";

apps/web/app/(app)/environments/[environmentId]/(actionsAndAttributes)/actions/layout.tsx

@@ -1,5 +1,5 @@
 import ActionsAttributesTabs from "@/app/(app)/environments/[environmentId]/(actionsAndAttributes)/attributes/components/ActionsAttributesTabs";
-import ContentWrapper from "@/app/components/shared/ContentWrapper";
+import ContentWrapper from "@formbricks/ui/ContentWrapper";
 
 export default function ActionsAndAttributesLayout({ params, children }) {
   return (

apps/web/app/(app)/environments/[environmentId]/(actionsAndAttributes)/attributes/components/ActionsAttributesTabs.tsx

@@ -1,4 +1,4 @@
-import SecondNavbar from "@/app/components/environments/SecondNavBar";
+import SecondNavbar from "@/app/(app)/environments/[environmentId]/(actionsAndAttributes)/attributes/components/SecondNavbar";
 import { CursorArrowRaysIcon, TagIcon } from "@heroicons/react/24/solid";
 
 interface ActionsAttributesTabsProps {

apps/web/app/(app)/environments/[environmentId]/(actionsAndAttributes)/attributes/components/AttributeActivityTab.tsx

@@ -1,7 +1,7 @@
 "use client";
 
 import { GetActiveInactiveSurveysAction } from "@/app/(app)/environments/[environmentId]/(actionsAndAttributes)/attributes/actions";
-import LoadingSpinner from "@/app/components/shared/LoadingSpinner";
+import LoadingSpinner from "@formbricks/ui/LoadingSpinner";
 import { capitalizeFirstLetter } from "@/app/lib/utils";
 import { convertDateTimeStringShort } from "@formbricks/lib/time";
 import { TAttributeClass } from "@formbricks/types/v1/attributeClasses";

apps/web/app/(app)/environments/[environmentId]/(actionsAndAttributes)/attributes/components/AttributeDetailModal.tsx

@@ -1,4 +1,4 @@
-import ModalWithTabs from "@/app/components/shared/ModalWithTabs";
+import ModalWithTabs from "@formbricks/ui/ModalWithTabs";
 import { TagIcon } from "@heroicons/react/24/solid";
 import AttributeActivityTab from "./AttributeActivityTab";
 import AttributeSettingsTab from "./AttributeSettingsTab";

apps/web/app/(app)/environments/[environmentId]/(actionsAndAttributes)/attributes/components/SecondNavbar.tsx

@@ -1,8 +1,9 @@
 import { cn } from "@formbricks/lib/cn";
-import SurveyNavBarName from "@/app/components/shared/SurveyNavBarName";
+
 import Link from "next/link";
 import { getProductByEnvironmentId } from "@formbricks/lib/product/service";
 import { getSurvey } from "@formbricks/lib/survey/service";
+import SurveyNavBarName from "@/app/(app)/environments/[environmentId]/(actionsAndAttributes)/attributes/components/SurveyNavBarName";
 
 interface SecondNavbarProps {
   tabs: { id: string; label: string; href: string; icon?: React.ReactNode }[];

apps/web/app/(app)/environments/[environmentId]/(actionsAndAttributes)/attributes/layout.tsx

@@ -1,5 +1,5 @@
 import ActionsAttributesTabs from "@/app/(app)/environments/[environmentId]/(actionsAndAttributes)/attributes/components/ActionsAttributesTabs";
-import ContentWrapper from "@/app/components/shared/ContentWrapper";
+import ContentWrapper from "@formbricks/ui/ContentWrapper";
 
 export default function ActionsAndAttributesLayout({ params, children }) {
   return (

apps/web/app/(app)/environments/[environmentId]/components/Navigation.tsx

@@ -15,8 +15,8 @@ import {
   DropdownMenuSubContent,
   DropdownMenuSubTrigger,
   DropdownMenuTrigger,
-} from "@/app/components/shared/DropdownMenu";
-import CreateTeamModal from "@/app/components/team/CreateTeamModal";
+} from "@formbricks/ui/DropdownMenu";
+import CreateTeamModal from "@formbricks/ui/CreateTeamModal";
 import UrlShortenerModal from "./UrlShortenerModal";
 import { formbricksLogout } from "@/app/lib/formbricks";
 import { capitalizeFirstLetter, truncate } from "@/app/lib/utils";

apps/web/app/(app)/environments/[environmentId]/integrations/google-sheets/components/Home.tsx

@@ -2,7 +2,7 @@
 
 import { deleteIntegrationAction } from "@/app/(app)/environments/[environmentId]/integrations/google-sheets/actions";
 import { DeleteDialog } from "@formbricks/ui/DeleteDialog";
-import EmptySpaceFiller from "@/app/components/shared/EmptySpaceFiller";
+import EmptySpaceFiller from "@formbricks/ui/EmptySpaceFiller";
 import { timeSince } from "@formbricks/lib/time";
 import { TEnvironment } from "@formbricks/types/v1/environment";
 import { TGoogleSheetIntegration, TGoogleSheetsConfigData } from "@formbricks/types/v1/integrations";

apps/web/app/(app)/environments/[environmentId]/integrations/google-sheets/loading.tsx

@@ -1,4 +1,4 @@
-import GoBackButton from "@/app/components/shared/GoBackButton";
+import GoBackButton from "@formbricks/ui/GoBackButton";
 import { Button } from "@formbricks/ui/Button";
 
 export default function Loading() {

apps/web/app/(app)/environments/[environmentId]/integrations/google-sheets/page.tsx

@@ -1,5 +1,5 @@
 import GoogleSheetWrapper from "@/app/(app)/environments/[environmentId]/integrations/google-sheets/components/GoogleSheetWrapper";
-import GoBackButton from "@/app/components/shared/GoBackButton";
+import GoBackButton from "@formbricks/ui/GoBackButton";
 import { getSpreadSheets } from "@formbricks/lib/googleSheet/service";
 import { getIntegrations } from "@formbricks/lib/integration/service";
 import { getSurveys } from "@formbricks/lib/survey/service";

apps/web/app/(app)/environments/[environmentId]/integrations/layout.tsx

@@ -1,4 +1,4 @@
-import ContentWrapper from "@/app/components/shared/ContentWrapper";
+import ContentWrapper from "@formbricks/ui/ContentWrapper";
 import { Metadata } from "next";
 
 export const metadata: Metadata = {

apps/web/app/(app)/environments/[environmentId]/integrations/webhooks/components/WebhookDetailModal.tsx

@@ -1,4 +1,4 @@
-import ModalWithTabs from "@/app/components/shared/ModalWithTabs";
+import ModalWithTabs from "@formbricks/ui/ModalWithTabs";
 import { TWebhook } from "@formbricks/types/v1/webhooks";
 import WebhookOverviewTab from "@/app/(app)/environments/[environmentId]/integrations/webhooks/components/WebhookOverviewTab";
 import WebhookSettingsTab from "@/app/(app)/environments/[environmentId]/integrations/webhooks/components/WebhookSettingsTab";

apps/web/app/(app)/environments/[environmentId]/integrations/webhooks/components/WebhookTable.tsx

@@ -7,7 +7,7 @@ import AddWebhookModal from "@/app/(app)/environments/[environmentId]/integratio
 import { TSurvey } from "@formbricks/types/v1/surveys";
 import WebhookModal from "@/app/(app)/environments/[environmentId]/integrations/webhooks/components/WebhookDetailModal";
 import { Webhook } from "lucide-react";
-import EmptySpaceFiller from "@/app/components/shared/EmptySpaceFiller";
+import EmptySpaceFiller from "@formbricks/ui/EmptySpaceFiller";
 import { TEnvironment } from "@formbricks/types/v1/environment";
 
 export default function WebhookTable({

apps/web/app/(app)/environments/[environmentId]/integrations/webhooks/page.tsx

@@ -3,7 +3,7 @@ export const revalidate = REVALIDATION_INTERVAL;
 import WebhookRowData from "@/app/(app)/environments/[environmentId]/integrations/webhooks/components/WebhookRowData";
 import WebhookTable from "@/app/(app)/environments/[environmentId]/integrations/webhooks/components/WebhookTable";
 import WebhookTableHeading from "@/app/(app)/environments/[environmentId]/integrations/webhooks/components/WebhookTableHeading";
-import GoBackButton from "@/app/components/shared/GoBackButton";
+import GoBackButton from "@formbricks/ui/GoBackButton";
 import { getSurveys } from "@formbricks/lib/survey/service";
 import { getWebhooks } from "@formbricks/lib/webhook/service";
 import { REVALIDATION_INTERVAL } from "@formbricks/lib/constants";

apps/web/app/(app)/environments/[environmentId]/layout.tsx

@@ -1,5 +1,5 @@
 import EnvironmentsNavbar from "@/app/(app)/environments/[environmentId]/components/EnvironmentsNavbar";
-import ToasterClient from "@/app/components/ToasterClient";
+import ToasterClient from "@formbricks/ui/ToasterClient";
 import { getServerSession } from "next-auth";
 import { redirect } from "next/navigation";
 import { authOptions } from "@formbricks/lib/authOptions";

apps/web/app/(app)/environments/[environmentId]/people/[personId]/components/ActivityFeed.tsx

@@ -1,4 +1,4 @@
-import EmptySpaceFiller from "@/app/components/shared/EmptySpaceFiller";
+import EmptySpaceFiller from "@formbricks/ui/EmptySpaceFiller";
 import { ActivityItemContent, ActivityItemIcon, ActivityItemPopover } from "./ActivityItemComponents";
 import { TActivityFeedItem } from "@formbricks/types/v1/activity";
 import { TEnvironment } from "@formbricks/types/v1/environment";

apps/web/app/(app)/environments/[environmentId]/people/[personId]/components/HeadingSection.tsx

@@ -1,4 +1,4 @@
-import GoBackButton from "@/app/components/shared/GoBackButton";
+import GoBackButton from "@formbricks/ui/GoBackButton";
 import { DeletePersonButton } from "./DeletePersonButton";
 import { getPersonIdentifier } from "@formbricks/lib/people/helpers";
 import { getPerson } from "@formbricks/lib/person/service";

apps/web/app/(app)/environments/[environmentId]/people/[personId]/components/ResponsesFeed.tsx

@@ -1,4 +1,4 @@
-import EmptySpaceFiller from "@/app/components/shared/EmptySpaceFiller";
+import EmptySpaceFiller from "@formbricks/ui/EmptySpaceFiller";
 import { TEnvironment } from "@formbricks/types/v1/environment";
 import { TProfile } from "@formbricks/types/v1/profile";
 import { TResponse } from "@formbricks/types/v1/responses";

apps/web/app/(app)/environments/[environmentId]/people/layout.tsx

@@ -1,4 +1,4 @@
-import ContentWrapper from "@/app/components/shared/ContentWrapper";
+import ContentWrapper from "@formbricks/ui/ContentWrapper";
 import { Metadata } from "next";
 
 export const metadata: Metadata = {

apps/web/app/(app)/environments/[environmentId]/people/page.tsx

@@ -1,6 +1,6 @@
 export const revalidate = REVALIDATION_INTERVAL;
 
-import EmptySpaceFiller from "@/app/components/shared/EmptySpaceFiller";
+import EmptySpaceFiller from "@formbricks/ui/EmptySpaceFiller";
 import { truncateMiddle } from "@/app/lib/utils";
 import { ITEMS_PER_PAGE, REVALIDATION_INTERVAL } from "@formbricks/lib/constants";
 import { getEnvironment } from "@formbricks/lib/environment/service";

apps/web/app/(app)/environments/[environmentId]/settings/api-keys/page.tsx

@@ -4,7 +4,7 @@ import { REVALIDATION_INTERVAL } from "@formbricks/lib/constants";
 import SettingsCard from "../components/SettingsCard";
 import SettingsTitle from "../components/SettingsTitle";
 import ApiKeyList from "./components/ApiKeyList";
-import EnvironmentNotice from "@/app/components/shared/EnvironmentNotice";
+import EnvironmentNotice from "@formbricks/ui/EnvironmentNotice";
 import { getEnvironment } from "@formbricks/lib/environment/service";
 
 export default async function ProfileSettingsPage({ params }) {

apps/web/app/(app)/environments/[environmentId]/settings/billing/components/PricingTable.tsx

@@ -6,7 +6,7 @@ import { Badge } from "@formbricks/ui/Badge";
 import { CheckIcon } from "@heroicons/react/24/outline";
 import { useRouter } from "next/navigation";
 import { useState } from "react";
-import LoadingSpinner from "@/app/components/shared/LoadingSpinner";
+import LoadingSpinner from "@formbricks/ui/LoadingSpinner";
 
 // upated on 20th of July 2023
 const stripeURl =

apps/web/app/(app)/environments/[environmentId]/settings/members/components/EditMemberships/TeamActions.tsx

@@ -5,8 +5,8 @@ import {
   inviteUserAction,
   leaveTeamAction,
 } from "@/app/(app)/environments/[environmentId]/settings/members/actions";
-import CustomDialog from "@/app/components/shared/CustomDialog";
-import CreateTeamModal from "@/app/components/team/CreateTeamModal";
+import CustomDialog from "@formbricks/ui/CustomDialog";
+import CreateTeamModal from "@formbricks/ui/CreateTeamModal";
 import { TMembershipRole } from "@formbricks/types/v1/memberships";
 import { TTeam } from "@formbricks/types/v1/teams";
 import { Button } from "@formbricks/ui/Button";

apps/web/app/(app)/environments/[environmentId]/settings/members/components/TransferOwnershipModal.tsx

@@ -1,4 +1,4 @@
-import CustomDialog from "@/app/components/shared/CustomDialog";
+import CustomDialog from "@formbricks/ui/CustomDialog";
 import { Input } from "@formbricks/ui/Input";
 import { Dispatch, SetStateAction, useState } from "react";
 

apps/web/app/(app)/environments/[environmentId]/settings/setup/components/SetupInstructions.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import CodeBlock from "@/app/components/shared/CodeBlock";
+import CodeBlock from "@formbricks/ui/CodeBlock";
 import { TabBar } from "@formbricks/ui/TabBar";
 import Link from "next/link";
 import "prismjs/themes/prism.css";

apps/web/app/(app)/environments/[environmentId]/settings/setup/page.tsx

@@ -1,9 +1,9 @@
-import EnvironmentNotice from "@/app/components/shared/EnvironmentNotice";
-import WidgetStatusIndicator from "@/app/components/shared/WidgetStatusIndicator";
+import EnvironmentNotice from "@formbricks/ui/EnvironmentNotice";
 import { IS_FORMBRICKS_CLOUD, WEBAPP_URL } from "@formbricks/lib/constants";
 import SettingsCard from "../components/SettingsCard";
 import SettingsTitle from "../components/SettingsTitle";
 import SetupInstructions from "./components/SetupInstructions";
+import WidgetStatusIndicator from "@/app/(app)/environments/[environmentId]/components/WidgetStatusIndicator";
 
 export default async function ProfileSettingsPage({ params }) {
   return (

apps/web/app/(app)/environments/[environmentId]/settings/tags/components/EditTagsWrapper.tsx

@@ -1,8 +1,8 @@
 "use client";
 
 import MergeTagsCombobox from "@/app/(app)/environments/[environmentId]/settings/tags/components/MergeTagsCombobox";
-import EmptySpaceFiller from "@/app/components/shared/EmptySpaceFiller";
-import LoadingSpinner from "@/app/components/shared/LoadingSpinner";
+import EmptySpaceFiller from "@formbricks/ui/EmptySpaceFiller";
+import LoadingSpinner from "@formbricks/ui/LoadingSpinner";
 import { cn } from "@formbricks/lib/cn";
 import { TEnvironment } from "@formbricks/types/v1/environment";
 import { TTag, TTagsCount } from "@formbricks/types/v1/tags";

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

@@ -3,7 +3,7 @@ import CustomFilter from "@/app/(app)/environments/[environmentId]/surveys/[surv
 import SummaryHeader from "@/app/(app)/environments/[environmentId]/surveys/[surveyId]/components/SummaryHeader";
 import SurveyResultsTabs from "@/app/(app)/environments/[environmentId]/surveys/[surveyId]/(analysis)/components/SurveyResultsTabs";
 import ResponseTimeline from "@/app/(app)/environments/[environmentId]/surveys/[surveyId]/(analysis)/responses/components/ResponseTimeline";
-import ContentWrapper from "@/app/components/shared/ContentWrapper";
+import ContentWrapper from "@formbricks/ui/ContentWrapper";
 import { useResponseFilter } from "@/app/(app)/environments/[environmentId]/components/ResponseFilterContext";
 import { getFilterResponses } from "@/app/lib/surveys/surveys";
 import { TResponse } from "@formbricks/types/v1/responses";

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

@@ -1,6 +1,6 @@
 "use client";
 import EmptyInAppSurveys from "@/app/(app)/environments/[environmentId]/surveys/[surveyId]/(analysis)/components/EmptyInAppSurveys";
-import EmptySpaceFiller from "@/app/components/shared/EmptySpaceFiller";
+import EmptySpaceFiller from "@formbricks/ui/EmptySpaceFiller";
 import { TEnvironment } from "@formbricks/types/v1/environment";
 import { TProfile } from "@formbricks/types/v1/profile";
 import { TResponse } from "@formbricks/types/v1/responses";

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

@@ -1,7 +1,7 @@
 import EmptyInAppSurveys from "@/app/(app)/environments/[environmentId]/surveys/[surveyId]/(analysis)/components/EmptyInAppSurveys";
 import ConsentSummary from "@/app/(app)/environments/[environmentId]/surveys/[surveyId]/(analysis)/summary/components/ConsentSummary";
 import HiddenFieldsSummary from "@/app/(app)/environments/[environmentId]/surveys/[surveyId]/(analysis)/summary/components/HiddenFieldsSummary";
-import EmptySpaceFiller from "@/app/components/shared/EmptySpaceFiller";
+import EmptySpaceFiller from "@formbricks/ui/EmptySpaceFiller";
 import { QuestionType } from "@formbricks/types/questions";
 import type { QuestionSummary } from "@formbricks/types/responses";
 import { TEnvironment } from "@formbricks/types/v1/environment";

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

@@ -5,7 +5,7 @@ import SummaryHeader from "@/app/(app)/environments/[environmentId]/surveys/[sur
 import SurveyResultsTabs from "@/app/(app)/environments/[environmentId]/surveys/[surveyId]/(analysis)/components/SurveyResultsTabs";
 import SummaryList from "@/app/(app)/environments/[environmentId]/surveys/[surveyId]/(analysis)/summary/components/SummaryList";
 import SummaryMetadata from "@/app/(app)/environments/[environmentId]/surveys/[surveyId]/(analysis)/summary/components/SummaryMetadata";
-import ContentWrapper from "@/app/components/shared/ContentWrapper";
+import ContentWrapper from "@formbricks/ui/ContentWrapper";
 import { useResponseFilter } from "@/app/(app)/environments/[environmentId]/components/ResponseFilterContext";
 import { getFilterResponses } from "@/app/lib/surveys/surveys";
 import { TResponse } from "@formbricks/types/v1/responses";

apps/web/app/(app)/environments/[environmentId]/surveys/[surveyId]/(analysis)/summary/components/shareEmbedTabs/EmailTab.tsx

@@ -7,7 +7,7 @@ import { QuestionType } from "@formbricks/types/questions";
 import { TSurvey } from "@formbricks/types/v1/surveys";
 import { AuthenticationError } from "@formbricks/types/v1/errors";
 import { sendEmailAction } from "../../actions";
-import CodeBlock from "@/app/components/shared/CodeBlock";
+import CodeBlock from "@formbricks/ui/CodeBlock";
 import { CodeBracketIcon, DocumentDuplicateIcon, EnvelopeIcon } from "@heroicons/react/24/solid";
 import {
   Column,

apps/web/app/(app)/environments/[environmentId]/surveys/[surveyId]/(analysis)/summary/components/shareEmbedTabs/LinkTab.tsx

@@ -1,7 +1,7 @@
 "use client";
 
 import toast from "react-hot-toast";
-import { SurveyInline } from "@/app/components/shared/Survey";
+import { SurveyInline } from "@formbricks/ui/Survey";
 import { cn } from "@formbricks/lib/cn";
 import { TSurvey } from "@formbricks/types/v1/surveys";
 import { Button } from "@formbricks/ui/Button";

apps/web/app/(app)/environments/[environmentId]/surveys/[surveyId]/(analysis)/summary/components/shareEmbedTabs/WebpageTab.tsx

@@ -1,7 +1,7 @@
 "use client";
 
 import toast from "react-hot-toast";
-import CodeBlock from "@/app/components/shared/CodeBlock";
+import CodeBlock from "@formbricks/ui/CodeBlock";
 import { Button } from "@formbricks/ui/Button";
 import { DocumentDuplicateIcon } from "@heroicons/react/24/solid";
 

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

@@ -20,11 +20,11 @@ import toast from "react-hot-toast";
 import { useRouter } from "next/navigation";
 import SuccessMessage from "@/app/(app)/environments/[environmentId]/surveys/[surveyId]/(analysis)/summary/components/SuccessMessage";
 import LinkSurveyShareButton from "@/app/(app)/environments/[environmentId]/surveys/[surveyId]/(analysis)/summary/components/LinkModalButton";
-import SurveyStatusDropdown from "@/app/components/shared/SurveyStatusDropdown";
 import { TEnvironment } from "@formbricks/types/v1/environment";
 import { TProduct } from "@formbricks/types/v1/product";
 import { updateSurveyAction } from "@/app/(app)/environments/[environmentId]/surveys/[surveyId]/edit/actions";
 import { TProfile } from "@formbricks/types/v1/profile";
+import SurveyStatusDropdown from "@/app/(app)/environments/[environmentId]/surveys/[surveyId]/components/SurveyStatusDropdown";
 
 interface SummaryHeaderProps {
   surveyId: string;

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

@@ -1,8 +1,7 @@
 "use client";
 
-import AlertDialog from "@/app/components/shared/AlertDialog";
+import AlertDialog from "@formbricks/ui/AlertDialog";
 import { DeleteDialog } from "@formbricks/ui/DeleteDialog";
-import SurveyStatusDropdown from "@/app/components/shared/SurveyStatusDropdown";
 import { QuestionType } from "@formbricks/types/questions";
 import type { Survey } from "@formbricks/types/surveys";
 import { TEnvironment } from "@formbricks/types/v1/environment";
@@ -17,6 +16,7 @@ import { useEffect, useState } from "react";
 import toast from "react-hot-toast";
 import { validateQuestion } from "./Validation";
 import { deleteSurveyAction, updateSurveyAction } from "../actions";
+import SurveyStatusDropdown from "@/app/(app)/environments/[environmentId]/surveys/[surveyId]/components/SurveyStatusDropdown";
 
 interface SurveyMenuBarProps {
   localSurvey: TSurveyWithAnalytics;

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

@@ -1,7 +1,9 @@
 "use client";
-import Modal from "@/app/components/preview/Modal";
-import TabOption from "@/app/components/preview/TabOption";
-import { SurveyInline } from "@/app/components/shared/Survey";
+
+import Modal from "@/app/(app)/environments/[environmentId]/surveys/components/Modal";
+import TabOption from "@/app/(app)/environments/[environmentId]/surveys/components/TabOption";
+
+import { SurveyInline } from "@formbricks/ui/Survey";
 import type { TEnvironment } from "@formbricks/types/v1/environment";
 import type { TProduct } from "@formbricks/types/v1/product";
 import { TSurvey } from "@formbricks/types/v1/surveys";

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

@@ -12,8 +12,8 @@ import {
   DropdownMenuGroup,
   DropdownMenuItem,
   DropdownMenuTrigger,
-} from "@/app/components/shared/DropdownMenu";
-import LoadingSpinner from "@/app/components/shared/LoadingSpinner";
+} from "@formbricks/ui/DropdownMenu";
+import LoadingSpinner from "@formbricks/ui/LoadingSpinner";
 import type { TEnvironment } from "@formbricks/types/v1/environment";
 import type { TSurvey } from "@formbricks/types/v1/surveys";
 import {

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

@@ -1,7 +1,7 @@
 "use client";
 import { createSurveyAction } from "../actions";
 import TemplateList from "@/app/(app)/environments/[environmentId]/surveys/templates/TemplateList";
-import LoadingSpinner from "@/app/components/shared/LoadingSpinner";
+import LoadingSpinner from "@formbricks/ui/LoadingSpinner";
 import type { TEnvironment } from "@formbricks/types/v1/environment";
 import type { TProduct } from "@formbricks/types/v1/product";
 import { TSurveyInput } from "@formbricks/types/v1/surveys";

apps/web/app/(app)/environments/[environmentId]/surveys/loading.tsx

@@ -1,4 +1,4 @@
-import LoadingSpinner from "@/app/components/shared/LoadingSpinner";
+import LoadingSpinner from "@formbricks/ui/LoadingSpinner";
 
 export default function LoadingPage() {
   return <LoadingSpinner />;

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

@@ -1,10 +1,10 @@
 export const revalidate = REVALIDATION_INTERVAL;
 
-import ContentWrapper from "@/app/components/shared/ContentWrapper";
-import WidgetStatusIndicator from "@/app/components/shared/WidgetStatusIndicator";
+import ContentWrapper from "@formbricks/ui/ContentWrapper";
 import { REVALIDATION_INTERVAL } from "@formbricks/lib/constants";
 import { Metadata } from "next";
 import SurveysList from "./components/SurveyList";
+import WidgetStatusIndicator from "@/app/(app)/environments/[environmentId]/components/WidgetStatusIndicator";
 
 export const metadata: Metadata = {
   title: "Your Surveys",

apps/web/app/(app)/environments/[environmentId]/surveys/templates/TemplateList.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import LoadingSpinner from "@/app/components/shared/LoadingSpinner";
+import LoadingSpinner from "@formbricks/ui/LoadingSpinner";
 import { useProfile } from "@/app/lib/profile";
 import { replacePresetPlaceholders } from "@/app/lib/templates";
 import { cn } from "@formbricks/lib/cn";

apps/web/app/(app)/environments/[environmentId]/surveys/templates/loading.tsx

@@ -1,4 +1,4 @@
-import LoadingSpinner from "@/app/components/shared/LoadingSpinner";
+import LoadingSpinner from "@formbricks/ui/LoadingSpinner";
 
 export default function LoadingPage() {
   return <LoadingSpinner />;

apps/web/app/(app)/layout.tsx

@@ -1,5 +1,5 @@
 import FormbricksClient from "@/app/(app)/components/FormbricksClient";
-import { PHProvider, PostHogPageview } from "@/app/components/PostHogClient";
+import { PHProvider, PostHogPageview } from "@formbricks/ui/PostHogClient";
 import { authOptions } from "@formbricks/lib/authOptions";
 import { getServerSession } from "next-auth";
 import { redirect } from "next/navigation";

apps/web/app/(app)/onboarding/components/Onboarding.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { Logo } from "@/app/components/Logo";
+import { Logo } from "@formbricks/ui/Logo";
 import { ProgressBar } from "@formbricks/ui/ProgressBar";
 import { Session } from "next-auth";
 import { useRouter } from "next/navigation";

apps/web/app/(app)/onboarding/components/Product.tsx

@@ -1,7 +1,7 @@
 "use client";
 
 import { updateProductAction } from "@/app/(app)/onboarding/actions";
-import LoadingSpinner from "@/app/components/shared/LoadingSpinner";
+import LoadingSpinner from "@formbricks/ui/LoadingSpinner";
 import { TProduct } from "@formbricks/types/v1/product";
 import { ColorPicker } from "@formbricks/ui/ColorPicker";
 import { Button } from "@formbricks/ui/Button";

apps/web/app/(auth)/auth/components/FormWrapper.tsx

@@ -1,4 +1,4 @@
-import { Logo } from "@/app/components/Logo";
+import { Logo } from "@formbricks/ui/Logo";
 
 export default function FormWrapper({ children }: { children: React.ReactNode }) {
   return (

apps/web/app/(auth)/auth/forgot-password/email-sent/page.tsx

@@ -1,5 +1,5 @@
-import BackToLoginButton from "@/app/components/auth/BackToLoginButton";
-import FormWrapper from "@/app/components/auth/FormWrapper";
+import BackToLoginButton from "@/app/(auth)/auth/components/BackToLoginButton";
+import FormWrapper from "@/app/(auth)/auth/components/FormWrapper";
 
 const SignInPage: React.FC = () => {
   return (

apps/web/app/(auth)/auth/forgot-password/page.tsx

@@ -1,5 +1,5 @@
-import { PasswordResetForm } from "@/app/components/auth/RequestPasswordResetForm";
-import FormWrapper from "@/app/components/auth/FormWrapper";
+import FormWrapper from "@/app/(auth)/auth/components/FormWrapper";
+import { PasswordResetForm } from "@/app/(auth)/auth/forgot-password/components/PasswordResetForm";
 
 const ForgotPasswordPage: React.FC = () => {
   return (

apps/web/app/(auth)/auth/forgot-password/reset/components/ResetPasswordForm/index.tsx

@@ -1,12 +1,12 @@
 "use client";
 
-import IsPasswordValid from "@/app/components/auth/IsPasswordValid";
 import { resetPassword } from "@/app/lib/users/users";
 import { PasswordInput } from "@formbricks/ui/PasswordInput";
 import { Button } from "@formbricks/ui/Button";
 import { XCircleIcon } from "@heroicons/react/24/solid";
 import { useRouter, useSearchParams } from "next/navigation";
 import { useState } from "react";
+import IsPasswordValid from "@/app/(auth)/auth/components/IsPasswordValid";
 
 export const ResetPasswordForm = () => {
   const searchParams = useSearchParams();

apps/web/app/(auth)/auth/forgot-password/reset/page.tsx

@@ -1,5 +1,5 @@
-import { ResetPasswordForm } from "@/app/components/auth/ResetPasswordForm";
-import FormWrapper from "@/app/components/auth/FormWrapper";
+import FormWrapper from "@/app/(auth)/auth/components/FormWrapper";
+import { ResetPasswordForm } from "@/app/(auth)/auth/forgot-password/reset/components/ResetPasswordForm";
 
 const ResetPasswordPage: React.FC = () => {
   return (

apps/web/app/(auth)/auth/forgot-password/reset/success/page.tsx

@@ -1,5 +1,5 @@
-import BackToLoginButton from "@/app/components/auth/BackToLoginButton";
-import FormWrapper from "@/app/components/auth/FormWrapper";
+import BackToLoginButton from "@/app/(auth)/auth/components/BackToLoginButton";
+import FormWrapper from "@/app/(auth)/auth/components/FormWrapper";
 
 export default function ResetPasswordSuccessPage() {
   return (

apps/web/app/(auth)/auth/login/components/SigninForm.tsx

@@ -1,6 +1,5 @@
 "use client";
 
-import { GoogleButton } from "@/app/components/auth/GoogleButton";
 import { PasswordInput } from "@formbricks/ui/PasswordInput";
 import { Button } from "@formbricks/ui/Button";
 import { XCircleIcon } from "@heroicons/react/24/solid";
@@ -8,11 +7,13 @@ import { signIn } from "next-auth/react";
 import Link from "next/dist/client/link";
 import { useRouter, useSearchParams } from "next/navigation";
 import { useMemo, useRef, useState } from "react";
-import { GithubButton } from "./GithubButton";
 import { Controller, SubmitHandler, useForm, FormProvider } from "react-hook-form";
-import TwoFactor from "@/app/components/auth/TwoFactor";
+
 import { cn } from "@formbricks/lib/cn";
-import TwoFactorBackup from "@/app/components/auth/TwoFactorBackup";
+import { GithubButton } from "@/app/(auth)/auth/components/GithubButton";
+import { GoogleButton } from "@/app/(auth)/auth/components/GoogleButton";
+import TwoFactor from "@/app/(auth)/auth/login/components/TwoFactor";
+import TwoFactorBackup from "@/app/(auth)/auth/login/components/TwoFactorBackup";
 
 type TSigninFormState = {
   email: string;

apps/web/app/(auth)/auth/login/page.tsx

@@ -1,6 +1,3 @@
-import { SigninForm } from "@/app/components/auth/SigninForm";
-import Testimonial from "@/app/components/auth/Testimonial";
-import FormWrapper from "@/app/components/auth/FormWrapper";
 import { Metadata } from "next";
 import {
   GITHUB_OAUTH_ENABLED,
@@ -8,6 +5,9 @@ import {
   PASSWORD_RESET_DISABLED,
   SIGNUP_ENABLED,
 } from "@formbricks/lib/constants";
+import { SigninForm } from "@/app/(auth)/auth/login/components/SigninForm";
+import Testimonial from "@/app/(auth)/auth/components/Testimonial";
+import FormWrapper from "@/app/(auth)/auth/components/FormWrapper";
 
 export const metadata: Metadata = {
   title: "Login",

apps/web/app/(auth)/auth/signup-without-verification-success/page.tsx

@@ -1,5 +1,5 @@
-import BackToLoginButton from "@/app/components/auth/BackToLoginButton";
-import FormWrapper from "@/app/components/auth/FormWrapper";
+import BackToLoginButton from "@/app/(auth)/auth/components/BackToLoginButton";
+import FormWrapper from "@/app/(auth)/auth/components/FormWrapper";
 
 export default function SignupWithoutVerificationSuccess() {
   return (

apps/web/app/(auth)/auth/signup/components/SignupForm.tsx

@@ -1,7 +1,5 @@
 "use client";
 
-import { GoogleButton } from "@/app/components/auth/GoogleButton";
-import IsPasswordValid from "@/app/components/auth/IsPasswordValid";
 import { createUser } from "@/app/lib/users/users";
 import { PasswordInput } from "@formbricks/ui/PasswordInput";
 import { Button } from "@formbricks/ui/Button";
@@ -9,7 +7,9 @@ import { XCircleIcon } from "@heroicons/react/24/solid";
 import Link from "next/link";
 import { useRouter, useSearchParams } from "next/navigation";
 import { useMemo, useRef, useState } from "react";
-import { GithubButton } from "./GithubButton";
+import { GithubButton } from "@/app/(auth)/auth/components/GithubButton";
+import { GoogleButton } from "@/app/(auth)/auth/components/GoogleButton";
+import IsPasswordValid from "@/app/(auth)/auth/components/IsPasswordValid";
 
 export const SignupForm = ({
   webAppUrl,

apps/web/app/(auth)/auth/signup/page.tsx

@@ -1,7 +1,5 @@
 import Link from "next/link";
-import { SignupForm } from "@/app/components/auth/SignupForm";
-import FormWrapper from "@/app/components/auth/FormWrapper";
-import Testimonial from "@/app/components/auth/Testimonial";
+
 import {
   EMAIL_VERIFICATION_DISABLED,
   GITHUB_OAUTH_ENABLED,
@@ -13,6 +11,9 @@ import {
   TERMS_URL,
   WEBAPP_URL,
 } from "@formbricks/lib/constants";
+import { SignupForm } from "@/app/(auth)/auth/signup/components/SignupForm";
+import Testimonial from "@/app/(auth)/auth/components/Testimonial";
+import FormWrapper from "@/app/(auth)/auth/components/FormWrapper";
 
 export default function SignUpPage({
   searchParams,

apps/web/app/(auth)/auth/verification-requested/page.tsx

@@ -1,5 +1,5 @@
-import { RequestVerificationEmail } from "@/app/components/auth/RequestVerificationEmail";
-import FormWrapper from "@/app/components/auth/FormWrapper";
+import FormWrapper from "@/app/(auth)/auth/components/FormWrapper";
+import { RequestVerificationEmail } from "@/app/(auth)/auth/verification-requested/components/RequestVerificationEmail";
 import { z } from "zod";
 
 const VerificationPageSchema = z.string().email();

apps/web/app/(auth)/auth/verify/page.tsx

@@ -1,8 +1,8 @@
 "use client";
 
-import { SignIn } from "@/app/components/auth/SignIn";
 import { useSearchParams } from "next/navigation";
-import FormWrapper from "@/app/components/auth/FormWrapper";
+import { SignIn } from "@/app/(auth)/auth/verify/components/SignIn";
+import FormWrapper from "@/app/(auth)/auth/components/FormWrapper";
 
 export default function Verify() {
   const searchParams = useSearchParams();

apps/web/app/(auth)/layout.tsx

@@ -1,4 +1,4 @@
-import { PHProvider, PostHogPageview } from "../components/PostHogClient";
+import { PHProvider, PostHogPageview } from "@formbricks/ui/PostHogClient";
 import { Suspense } from "react";
 import { NoMobileOverlay } from "@formbricks/ui/NoMobileOverlay";
 

apps/web/app/components/shared/DropdownMenu.tsx

@@ -1,190 +0,0 @@
-"use client";
-
-import * as React from "react";
-import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu";
-import { CheckIcon, ChevronRightIcon, CheckCircleIcon } from "@heroicons/react/24/outline";
-
-import { cn } from "@formbricks/lib/cn";
-
-const DropdownMenu: React.FC<DropdownMenuPrimitive.DropdownMenuProps> = DropdownMenuPrimitive.Root;
-
-const DropdownMenuTrigger: React.FC<DropdownMenuPrimitive.DropdownMenuTriggerProps> =
-  DropdownMenuPrimitive.Trigger;
-
-const DropdownMenuGroup: React.FC<DropdownMenuPrimitive.DropdownMenuGroupProps> = DropdownMenuPrimitive.Group;
-
-const DropdownMenuPortal: React.FC<DropdownMenuPrimitive.DropdownMenuPortalProps> =
-  DropdownMenuPrimitive.Portal;
-
-const DropdownMenuSub: React.FC<DropdownMenuPrimitive.DropdownMenuSubProps> = DropdownMenuPrimitive.Sub;
-
-const DropdownMenuRadioGroup: React.FC<DropdownMenuPrimitive.DropdownMenuRadioGroupProps> =
-  DropdownMenuPrimitive.RadioGroup;
-
-const DropdownMenuSubTrigger = React.forwardRef<
-  React.ElementRef<typeof DropdownMenuPrimitive.SubTrigger>,
-  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.SubTrigger> & {
-    inset?: boolean;
-  }
->(({ className, inset, children, ...props }, ref) => (
-  <DropdownMenuPrimitive.SubTrigger
-    ref={ref}
-    className={cn(
-      "flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm font-medium outline-none focus:bg-slate-100 data-[state=open]:bg-slate-100 ",
-      inset && "pl-8",
-      className
-    )}
-    {...props}>
-    {children}
-    <ChevronRightIcon className="ml-auto h-4 w-4" />
-  </DropdownMenuPrimitive.SubTrigger>
-));
-DropdownMenuSubTrigger.displayName = DropdownMenuPrimitive.SubTrigger.displayName;
-
-const DropdownMenuSubContent = React.forwardRef<
-  React.ElementRef<typeof DropdownMenuPrimitive.SubContent>,
-  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.SubContent>
->(({ className, ...props }, ref) => (
-  <DropdownMenuPrimitive.SubContent
-    ref={ref}
-    className={cn(
-      "animate-in slide-in-from-left-1 z-50 min-w-[8rem] overflow-hidden rounded-md border border-slate-100 bg-white p-1 text-slate-700 shadow-md",
-      className
-    )}
-    {...props}
-  />
-));
-DropdownMenuSubContent.displayName = DropdownMenuPrimitive.SubContent.displayName;
-
-const DropdownMenuContent = React.forwardRef<
-  React.ElementRef<typeof DropdownMenuPrimitive.Content>,
-  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Content>
->(({ className, sideOffset = 4, ...props }, ref) => (
-  <DropdownMenuPrimitive.Portal>
-    <DropdownMenuPrimitive.Content
-      ref={ref}
-      sideOffset={sideOffset}
-      className={cn(
-        "animate-in data-[side=right]:slide-in-from-left-2 data-[side=left]:slide-in-from-right-2 data-[side=bottom]:slide-in-from-top-2 data-[side=top]:slide-in-from-bottom-2 z-50 min-w-[8rem] overflow-hidden rounded-md border border-slate-100 bg-white p-1 text-slate-700 shadow-md",
-        className
-      )}
-      {...props}
-    />
-  </DropdownMenuPrimitive.Portal>
-));
-DropdownMenuContent.displayName = DropdownMenuPrimitive.Content.displayName;
-
-const DropdownMenuItem = React.forwardRef<
-  React.ElementRef<typeof DropdownMenuPrimitive.Item>,
-  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Item> & {
-    inset?: boolean;
-  }
->(({ className, inset, ...props }, ref) => (
-  <DropdownMenuPrimitive.Item
-    ref={ref}
-    className={cn(
-      "relative flex cursor-pointer select-none items-center rounded-sm px-2 py-1.5 text-sm font-medium outline-none focus:bg-slate-100 data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
-      inset && "pl-8",
-      className
-    )}
-    {...props}
-  />
-));
-DropdownMenuItem.displayName = DropdownMenuPrimitive.Item.displayName;
-
-const DropdownMenuCheckboxItem = React.forwardRef<
-  React.ElementRef<typeof DropdownMenuPrimitive.CheckboxItem>,
-  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.CheckboxItem>
->(({ className, children, checked, ...props }, ref) => (
-  <DropdownMenuPrimitive.CheckboxItem
-    ref={ref}
-    className={cn(
-      "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm font-medium outline-none focus:bg-slate-100 data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
-      className
-    )}
-    checked={checked}
-    {...props}>
-    <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
-      <DropdownMenuPrimitive.ItemIndicator>
-        <CheckIcon className="h-4 w-4" />
-      </DropdownMenuPrimitive.ItemIndicator>
-    </span>
-    {children}
-  </DropdownMenuPrimitive.CheckboxItem>
-));
-DropdownMenuCheckboxItem.displayName = DropdownMenuPrimitive.CheckboxItem.displayName;
-
-const DropdownMenuRadioItem = React.forwardRef<
-  React.ElementRef<typeof DropdownMenuPrimitive.RadioItem>,
-  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.RadioItem>
->(({ className, children, ...props }, ref) => (
-  <DropdownMenuPrimitive.RadioItem
-    ref={ref}
-    className={cn(
-      "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm font-medium outline-none focus:bg-slate-100 data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
-      className
-    )}
-    {...props}>
-    <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
-      <DropdownMenuPrimitive.ItemIndicator>
-        <CheckCircleIcon className="h-2 w-2 fill-current" />
-      </DropdownMenuPrimitive.ItemIndicator>
-    </span>
-    {children}
-  </DropdownMenuPrimitive.RadioItem>
-));
-DropdownMenuRadioItem.displayName = DropdownMenuPrimitive.RadioItem.displayName;
-
-const DropdownMenuLabel = React.forwardRef<
-  React.ElementRef<typeof DropdownMenuPrimitive.Label>,
-  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Label> & {
-    inset?: boolean;
-  }
->(({ className, inset, ...props }, ref) => (
-  <DropdownMenuPrimitive.Label
-    ref={ref}
-    className={cn("px-2 py-1.5 text-sm font-semibold text-slate-900", inset && "pl-8", className)}
-    {...props}
-  />
-));
-DropdownMenuLabel.displayName = DropdownMenuPrimitive.Label.displayName;
-
-const DropdownMenuSeparator = React.forwardRef<
-  React.ElementRef<typeof DropdownMenuPrimitive.Separator>,
-  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Separator>
->(({ className, ...props }, ref) => (
-  <DropdownMenuPrimitive.Separator
-    ref={ref}
-    className={cn("-mx-1 my-1 h-px bg-slate-100 ", className)}
-    {...props}
-  />
-));
-DropdownMenuSeparator.displayName = DropdownMenuPrimitive.Separator.displayName;
-
-const DropdownMenuShortcut = ({
-  className,
-  ...props
-}: Omit<React.HTMLAttributes<HTMLSpanElement>, "dangerouslySetInnerHTML"> & {
-  dangerouslySetInnerHTML?: { __html: string } | undefined;
-}) => {
-  return <span className={cn("ml-auto text-xs tracking-widest text-slate-500", className)} {...props} />;
-};
-DropdownMenuShortcut.displayName = "DropdownMenuShortcut";
-
-export {
-  DropdownMenu,
-  DropdownMenuTrigger,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuCheckboxItem,
-  DropdownMenuRadioItem,
-  DropdownMenuLabel,
-  DropdownMenuSeparator,
-  DropdownMenuShortcut,
-  DropdownMenuGroup,
-  DropdownMenuPortal,
-  DropdownMenuSub,
-  DropdownMenuSubContent,
-  DropdownMenuSubTrigger,
-  DropdownMenuRadioGroup,
-};

apps/web/app/page.tsx

@@ -1,4 +1,4 @@
-import ClientLogout from "@/app/components/ClientLogout";
+import ClientLogout from "@formbricks/ui/ClientLogout";
 import { authOptions } from "@formbricks/lib/authOptions";
 import { getFirstEnvironmentByUserId } from "@formbricks/lib/environment/service";
 import type { Session } from "next-auth";

apps/web/app/s/[surveyId]/components/LinkSurvey.tsx

@@ -1,7 +1,7 @@
 "use client";
 
-import ContentWrapper from "@/app/components/shared/ContentWrapper";
-import { SurveyInline } from "@/app/components/shared/Survey";
+import ContentWrapper from "@formbricks/ui/ContentWrapper";
+import { SurveyInline } from "@formbricks/ui/Survey";
 import { createDisplay } from "@formbricks/lib/client/display";
 import { ResponseQueue } from "@formbricks/lib/responseQueue";
 import { SurveyState } from "@formbricks/lib/surveyState";

packages/ui/AlertDialog/index.tsx

@@ -1,7 +1,7 @@
 "use client";
 
-import { Modal } from "@formbricks/ui/Modal";
-import { Button } from "@formbricks/ui/Button";
+import { Modal } from "../Modal";
+import { Button } from "../Button";
 
 interface AlertDialogProps {
   open: boolean;

packages/ui/CreateTeamModal/index.tsx

@@ -1,8 +1,8 @@
-import { createTeamAction } from "@/app/(app)/environments/[environmentId]/actions";
-import { Modal } from "@formbricks/ui/Modal";
-import { Button } from "@formbricks/ui/Button";
-import { Input } from "@formbricks/ui/Input";
-import { Label } from "@formbricks/ui/Label";
+import { createTeamAction } from "../../../apps/web/app/(app)/environments/[environmentId]/actions";
+import { Modal } from "../Modal";
+import { Button } from "../Button";
+import { Input } from "../Input";
+import { Label } from "../Label";
 import { PlusCircleIcon } from "@heroicons/react/24/outline";
 import { useRouter } from "next/navigation";
 import { useState } from "react";
@@ -14,12 +14,16 @@ interface CreateTeamModalProps {
   setOpen: (v: boolean) => void;
 }
 
+type FormValues = {
+  name: string;
+};
+
 export default function CreateTeamModal({ open, setOpen }: CreateTeamModalProps) {
   const router = useRouter();
   const [loading, setLoading] = useState(false);
-  const { register, handleSubmit } = useForm();
+  const { register, handleSubmit } = useForm<FormValues>();
 
-  const submitTeam = async (data) => {
+  const submitTeam = async (data: FormValues) => {
     try {
       setLoading(true);
       const newTeam = await createTeamAction(data.name);

packages/ui/CustomDialog/index.tsx

@@ -1,7 +1,7 @@
 "use client";
 
-import { Modal } from "@formbricks/ui/Modal";
-import { Button } from "@formbricks/ui/Button";
+import { Modal } from "../Modal";
+import { Button } from "../Button";
 
 interface CustomDialogProps {
   open: boolean;

packages/ui/GoBackButton/index.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { BackIcon } from "@formbricks/ui/icons";
+import { BackIcon } from "../icons";
 import { useRouter } from "next/navigation";
 
 export default function GoBackButton({ url }: { url?: string }) {

packages/ui/ModalWithTabs/index.tsx

@@ -1,4 +1,4 @@
-import { Modal } from "@formbricks/ui/Modal";
+import { Modal } from "../Modal";
 import { useEffect, useState } from "react";
 
 interface ModalWithTabsProps {

packages/ui/PostHogClient/index.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { env } from "@/env.mjs";
+import { env } from "../../../apps/web/env.mjs";
 import { usePathname, useSearchParams } from "next/navigation";
 import posthog from "posthog-js";
 import { PostHogProvider } from "posthog-js/react";

packages/ui/package.json

@@ -16,6 +16,7 @@
     "react": "18.2.0"
   },
   "dependencies": {
+    "@formbricks/surveys": "workspace:*",
     "@formbricks/lib": "workspace:*",
     "@heroicons/react": "^2.0.18",
     "@lexical/code": "^0.12.2",

pnpm-lock.yaml

@@ -772,6 +772,9 @@ importers:
       '@formbricks/lib':
         specifier: workspace:*
         version: link:../lib
+      '@formbricks/surveys':
+        specifier: workspace:*
+        version: link:../surveys
       '@heroicons/react':
         specifier: ^2.0.18
         version: 2.0.18(react@18.2.0)