update all packages, fix typescript errors (#277)

* simplify ui package, update all packages

* fix typescript errors that occur during build

.vscode/settings.json

@@ -1,3 +1,4 @@
 {
-  "typescript.tsdk": "node_modules/typescript/lib"
+  "typescript.tsdk": "node_modules/typescript/lib",
+  "typescript.preferences.importModuleSpecifier": "non-relative"
 }

apps/demo/package.json

@@ -3,6 +3,7 @@
   "version": "0.1.0",
   "private": true,
   "scripts": {
+    "clean": "rimraf .turbo node_modules .next",
     "dev": "next dev -p 3002",
     "build": "next build",
     "start": "next start",
@@ -25,6 +26,7 @@
     "@tailwindcss/forms": "^0.5.3",
     "autoprefixer": "^10.4.14",
     "postcss": "^8.4.23",
+    "rimraf": "^5.0.0",
     "tailwindcss": "^3.3.2"
   }
 }

apps/formbricks-com/components/docs/DocsFeedback.tsx

@@ -1,9 +1,10 @@
 import { useState } from "react";
 import { handleFeedbackSubmit, updateFeedback } from "../../lib/handleFeedbackSubmit";
-import { Popover, PopoverTrigger, PopoverContent, Button } from "@formbricks/ui";
+import { Popover, PopoverTrigger, PopoverContent } from "@formbricks/ui/Popover";
+import { Button } from "@formbricks/ui/Button";
 import { useRouter } from "next/router";
 
-export default function DocsFeedback() {
+export const DocsFeedback: React.FC = () => {
   const router = useRouter();
   const [isOpen, setIsOpen] = useState(false);
   const [sharedFeedback, setSharedFeedback] = useState(false);
@@ -68,4 +69,6 @@ export default function DocsFeedback() {
       )}
     </div>
   );
-}
+};
+
+export default DocsFeedback;

apps/formbricks-com/components/docs/FeedbackButtonPopover.tsx

@@ -1,4 +1,4 @@
-import { Button } from "@formbricks/ui";
+import { Button } from "@formbricks/ui/Button";
 
 declare global {
   interface Window {
@@ -6,6 +6,8 @@ declare global {
   }
 }
 
-export function FeedbackButton() {
+export const FeedbackButton: React.FC = () => {
   return <Button variant="secondary">Open Feedback</Button>;
-}
+};
+
+export default FeedbackButton;

apps/formbricks-com/components/docs/Layout.tsx

@@ -5,7 +5,7 @@ import { Prose } from "@/components/shared/Prose";
 import { Search } from "@/components/shared/Search";
 import { ThemeSelector } from "@/components/shared/ThemeSelector";
 import navigation from "@/lib/docsNavigation";
-import { Button } from "@formbricks/ui";
+import { Button } from "@formbricks/ui/Button";
 import clsx from "clsx";
 import Link from "next/link";
 import { useRouter } from "next/router";
@@ -84,7 +84,7 @@ interface LayoutProps {
   };
 }
 
-export function Layout({ children, meta }: LayoutProps) {
+export const Layout: React.FC<LayoutProps> = ({ children, meta }) => {
   let router = useRouter();
   let allLinks = navigation.flatMap((section) => section.links);
   let linkIndex = allLinks.findIndex((link) => link.href === router.pathname);
@@ -173,4 +173,4 @@ export function Layout({ children, meta }: LayoutProps) {
       </div>
     </>
   );
-}
+};

apps/formbricks-com/components/dummyUI/AddEventDummy.tsx

@@ -1,7 +1,7 @@
-import { Button } from "@formbricks/ui";
+import { Button } from "@formbricks/ui/Button";
 import { PlusIcon, TrashIcon } from "@heroicons/react/24/solid";
 import { useState } from "react";
-import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@formbricks/ui";
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@formbricks/ui/Select";
 
 const DummyUI: React.FC = () => {
   const eventClasses = [

apps/formbricks-com/components/dummyUI/AddNoCodeEventModalDummy.tsx

@@ -1,9 +1,9 @@
 import Modal from "../shared/Modal";
-import { Button } from "@formbricks/ui";
-import { Input } from "@formbricks/ui";
-import { Label } from "@formbricks/ui";
-import { RadioGroup, RadioGroupItem } from "@formbricks/ui";
-import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@formbricks/ui";
+import { Button } from "@formbricks/ui/Button";
+import { Input } from "@formbricks/ui/Input";
+import { Label } from "@formbricks/ui/Label";
+import { RadioGroup, RadioGroupItem } from "@formbricks/ui/RadioGroup";
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@formbricks/ui/Select";
 import { CursorArrowRaysIcon } from "@heroicons/react/24/solid";
 
 interface EventDetailModalProps {
@@ -11,7 +11,7 @@ interface EventDetailModalProps {
   setOpen: (v: boolean) => void;
 }
 
-export default function AddNoCodeEventModalDummy({ open, setOpen }: EventDetailModalProps) {
+export const AddNoCodeEventModalDummy: React.FC<EventDetailModalProps> = ({ open, setOpen }) => {
   return (
     <Modal open={open} setOpen={setOpen} noPadding>
       <div className="flex h-full flex-col rounded-lg bg-slate-50 dark:bg-slate-800">
@@ -121,4 +121,6 @@ export default function AddNoCodeEventModalDummy({ open, setOpen }: EventDetailM
       </div>
     </Modal>
   );
-}
+};
+
+export default AddNoCodeEventModalDummy;

apps/formbricks-com/components/dummyUI/Headline.tsx

@@ -1,4 +1,4 @@
-export default function Headline({ headline, questionId }: { headline: string; questionId: string }) {
+export const Headline: React.FC<{ headline: string; questionId: string }> = ({ headline, questionId }) => {
   return (
     <label
       htmlFor={questionId}
@@ -6,4 +6,6 @@ export default function Headline({ headline, questionId }: { headline: string; q
       {headline}
     </label>
   );
-}
+};
+
+export default Headline;

apps/formbricks-com/components/dummyUI/Modal.tsx

@@ -1,7 +1,7 @@
 import clsx from "clsx";
 import { ReactNode, useEffect, useState } from "react";
 
-export default function Modal({ children, isOpen }: { children: ReactNode; isOpen: boolean }) {
+export const Modal: React.FC<{ children: ReactNode; isOpen: boolean }> = ({ children, isOpen }) => {
   const [show, setShow] = useState(false);
 
   useEffect(() => {
@@ -20,4 +20,6 @@ export default function Modal({ children, isOpen }: { children: ReactNode; isOpe
       </div>
     </div>
   );
-}
+};
+
+export default Modal;

apps/formbricks-com/components/dummyUI/MultipleChoiceSingleQuestion.tsx

@@ -1,22 +1,22 @@
 import clsx from "clsx";
-import type { MultipleChoiceSingleQuestion } from "./questionTypes";
+import type { MultipleChoiceSingleQuestion as MultipleChoiceSingleQuestionType } from "./questionTypes";
 import { useState } from "react";
 import Headline from "./Headline";
 import Subheader from "./Subheader";
 
 interface MultipleChoiceSingleProps {
-  question: MultipleChoiceSingleQuestion;
+  question: MultipleChoiceSingleQuestionType;
   onSubmit: (data: { [x: string]: any }) => void;
   lastQuestion: boolean;
   brandColor: string;
 }
 
-export default function MultipleChoiceSingleQuestion({
+export const MultipleChoiceSingleQuestion: React.FC<MultipleChoiceSingleProps> = ({
   question,
   onSubmit,
   lastQuestion,
   brandColor,
-}: MultipleChoiceSingleProps) {
+}) => {
   const [selectedChoice, setSelectedChoice] = useState<string | null>(null);
   return (
     <form
@@ -81,4 +81,6 @@ export default function MultipleChoiceSingleQuestion({
       </div>
     </form>
   );
-}
+};
+
+export default MultipleChoiceSingleQuestion;

apps/formbricks-com/components/dummyUI/OpenTextQuestion.tsx

@@ -1,20 +1,20 @@
-import type { OpenTextQuestion } from "./questionTypes";
+import type { OpenTextQuestion as OpenTextQuestionType } from "./questionTypes";
 import Headline from "./Headline";
 import Subheader from "./Subheader";
 
 interface OpenTextQuestionProps {
-  question: OpenTextQuestion;
+  question: OpenTextQuestionType;
   onSubmit: (id: string) => void;
   lastQuestion: boolean;
   brandColor: string;
 }
 
-export default function OpenTextQuestion({
+export const OpenTextQuestion: React.FC<OpenTextQuestionProps> = ({
   question,
   onSubmit,
   lastQuestion,
   brandColor,
-}: OpenTextQuestionProps) {
+}) => {
   return (
     <form
       onSubmit={(e) => {
@@ -45,4 +45,6 @@ export default function OpenTextQuestion({
       </div>
     </form>
   );
-}
+};
+
+export default OpenTextQuestion;

apps/formbricks-com/components/dummyUI/PreviewModal.tsx

@@ -1,7 +1,7 @@
 import clsx from "clsx";
 import { ReactNode, useEffect, useState } from "react";
 
-export default function Modal({ children, isOpen }: { children: ReactNode; isOpen: boolean }) {
+export const Modal: React.FC<{ children: ReactNode; isOpen: boolean }> = ({ children, isOpen }) => {
   const [show, setShow] = useState(false);
 
   useEffect(() => {
@@ -22,4 +22,6 @@ export default function Modal({ children, isOpen }: { children: ReactNode; isOpe
       </div>
     </div>
   );
-}
+};
+
+export default Modal;

apps/formbricks-com/components/dummyUI/PreviewSurvey.tsx

@@ -10,7 +10,7 @@ interface PreviewSurveyProps {
   brandColor: string;
 }
 
-export default function PreviewSurvey({ activeQuestionId, questions, brandColor }: PreviewSurveyProps) {
+export const PreviewSurvey: React.FC<PreviewSurveyProps> = ({ activeQuestionId, questions, brandColor }) => {
   const [isModalOpen, setIsModalOpen] = useState(true);
   const [currentQuestion, setCurrentQuestion] = useState<Question | null>(null);
 
@@ -73,4 +73,6 @@ export default function PreviewSurvey({ activeQuestionId, questions, brandColor
       ) : null}
     </Modal>
   );
-}
+};
+
+export default PreviewSurvey;

apps/formbricks-com/components/dummyUI/Progress.tsx

@@ -1,4 +1,4 @@
-export default function Progress({ progress, brandColor }: { progress: number; brandColor: string }) {
+export const Progress: React.FC<{ progress: number; brandColor: string }> = ({ progress, brandColor }) => {
   return (
     <div className="h-1 w-full rounded-full bg-slate-200">
       <div
@@ -6,4 +6,6 @@ export default function Progress({ progress, brandColor }: { progress: number; b
         style={{ backgroundColor: brandColor, width: `${Math.floor(progress * 100)}%` }}></div>
     </div>
   );
-}
+};
+
+export default Progress;

apps/formbricks-com/components/dummyUI/Subheader.tsx

@@ -1,4 +1,7 @@
-export default function Subheader({ subheader, questionId }: { subheader?: string; questionId: string }) {
+export const Subheader: React.FC<{ subheader?: string; questionId: string }> = ({
+  subheader,
+  questionId,
+}) => {
   return (
     <label
       htmlFor={questionId}
@@ -6,4 +9,6 @@ export default function Subheader({ subheader, questionId }: { subheader?: strin
       {subheader}
     </label>
   );
-}
+};
+
+export default Subheader;

apps/formbricks-com/components/dummyUI/TemplateList.tsx

@@ -1,4 +1,4 @@
-import { OnboardingIcon } from "@formbricks/ui";
+import { OnboardingIcon } from "@formbricks/ui/icons";
 import { PlusCircleIcon } from "@heroicons/react/24/outline";
 import { createId } from "@paralleldrive/cuid2";
 import clsx from "clsx";
@@ -7,7 +7,7 @@ import PreviewSurvey from "./PreviewSurvey";
 import { templates } from "./templates";
 import type { Template } from "./templateTypes";
 
-export default function TemplateList() {
+export const TemplateList: React.FC = () => {
   const onboardingSegmentation: Template = {
     name: "Onboarding Segmentation",
     icon: OnboardingIcon,
@@ -213,4 +213,6 @@ export default function TemplateList() {
       </div>
     </div>
   );
-}
+};
+
+export default TemplateList;

apps/formbricks-com/components/dummyUI/templates.ts

@@ -12,7 +12,7 @@ import {
   BaseballIcon,
   CheckMarkIcon,
   ArrowRightCircleIcon,
-} from "@formbricks/ui";
+} from "@formbricks/ui/icons";
 
 import type { Template } from "./templateTypes";
 import { createId } from "@paralleldrive/cuid2";

apps/formbricks-com/components/home/Features.tsx

@@ -1,4 +1,4 @@
-import { EyeIcon, HandPuzzleIcon, CodeFileIcon } from "@formbricks/ui";
+import { EyeIcon, HandPuzzleIcon, CodeFileIcon } from "@formbricks/ui/icons";
 import HeadingCentered from "../shared/HeadingCentered";
 
 const features = [
@@ -21,7 +21,7 @@ const features = [
     icon: CodeFileIcon,
   },
 ];
-export default function Features() {
+export const Features: React.FC = () => {
   return (
     <div className="relative px-4 pb-10 sm:px-6 lg:px-8 lg:pb-14 lg:pt-24">
       <div className="relative mx-auto max-w-7xl">
@@ -33,28 +33,34 @@ export default function Features() {
         />
 
         <ul role="list" className="grid grid-cols-1 gap-4 pt-8 sm:grid-cols-2 md:grid-cols-3 lg:gap-10">
-          {features.map((feature) => (
-            <li
-              key={feature.id}
-              className="relative col-span-1 mt-16 flex flex-col rounded-xl bg-slate-100 text-center dark:bg-slate-700">
-              <div className="absolute -mt-12 w-full">
-                <div className="mx-auto flex h-20 w-20 items-center justify-center rounded-3xl bg-slate-200 shadow dark:bg-slate-800">
-                  <feature.icon className="text-brand-dark dark:text-brand-light mx-auto h-10 w-10 flex-shrink-0" />
+          {features.map((feature) => {
+            const IconComponent: React.ElementType = feature.icon;
+
+            return (
+              <li
+                key={feature.id}
+                className="relative col-span-1 mt-16 flex flex-col rounded-xl bg-slate-100 text-center dark:bg-slate-700">
+                <div className="absolute -mt-12 w-full">
+                  <div className="mx-auto flex h-20 w-20 items-center justify-center rounded-3xl bg-slate-200 shadow dark:bg-slate-800">
+                    <IconComponent className="text-brand-dark dark:text-brand-light mx-auto h-10 w-10 flex-shrink-0" />
+                  </div>
                 </div>
-              </div>
-              <div className="flex flex-1 flex-col p-10">
-                <h3 className="my-4 text-lg font-medium text-slate-800 dark:text-slate-200">
-                  {feature.name}
-                </h3>
-                <dl className="mt-1 flex flex-grow flex-col justify-between">
-                  <dt className="sr-only">Description</dt>
-                  <dd className="text-sm text-slate-600 dark:text-slate-400">{feature.description}</dd>
-                </dl>
-              </div>
-            </li>
-          ))}
+                <div className="flex flex-1 flex-col p-10">
+                  <h3 className="my-4 text-lg font-medium text-slate-800 dark:text-slate-200">
+                    {feature.name}
+                  </h3>
+                  <dl className="mt-1 flex flex-grow flex-col justify-between">
+                    <dt className="sr-only">Description</dt>
+                    <dd className="text-sm text-slate-600 dark:text-slate-400">{feature.description}</dd>
+                  </dl>
+                </div>
+              </li>
+            );
+          })}
         </ul>
       </div>
     </div>
   );
-}
+};
+
+export default Features;

apps/formbricks-com/components/home/GitHubSponsorship.tsx

@@ -3,7 +3,7 @@ import GitHubMarkDark from "@/images/github-mark.svg";
 import Image from "next/image";
 import Link from "next/link";
 
-export default function GitHubSponsorship() {
+export const GitHubSponsorship: React.FC = () => {
   return (
     <div className="xs:mx-auto xs:w-full relative mx-auto my-4 mb-12 mt-12 rounded-xl bg-gradient-to-br from-slate-100 to-slate-200 px-4 py-8 dark:from-slate-800 dark:via-slate-800 dark:to-slate-700  sm:px-6 sm:pb-12 sm:pt-8  md:max-w-none lg:mt-6 lg:px-8 lg:pt-8 ">
       <div className="right-10 lg:absolute">
@@ -37,4 +37,6 @@ export default function GitHubSponsorship() {
       </p>
     </div>
   );
-}
+};
+
+export default GitHubSponsorship;

apps/formbricks-com/components/home/Hero.tsx

@@ -7,16 +7,14 @@ import StackOceanLogoLight from "@/images/clients/stack-ocean-light.png";
 import NILogoLight from "@/images/clients/niLogoWhite.svg";
 import NILogoDark from "@/images/clients/niLogoDark.svg";
 import AnimationFallback from "@/public/animations/fallback-image-open-source-feedback-software.jpg";
-import { Button } from "@formbricks/ui";
+import { Button } from "@formbricks/ui/Button";
 import { usePlausible } from "next-plausible";
 import ClovyrLogo from "@/images/clients/clovyr-logo.svg";
 import Image from "next/image";
 import { useRouter } from "next/router";
 import HeroAnimation from "./HeroAnimation";
 
-interface Props {}
-
-export default function Hero({}: Props) {
+export const Hero: React.FC = ({}) => {
   const plausible = usePlausible();
   const router = useRouter();
   return (
@@ -127,4 +125,6 @@ export default function Hero({}: Props) {
       </div>
     </div>
   );
-}
+};
+
+export default Hero;

apps/formbricks-com/components/home/HeroAnimation.tsx

@@ -2,7 +2,7 @@ import { useEffect, useRef, useState } from "react";
 import type { LottiePlayer } from "lottie-web";
 import Image from "next/image";
 
-export default function HeroAnimation({ fallbackImage, ...props }: any) {
+export const HeroAnimation: React.FC<any> = ({ fallbackImage, ...props }) => {
   const [loaded, setLoaded] = useState(false);
   const ref = useRef<HTMLDivElement>(null);
   const [lottie, setLottie] = useState<LottiePlayer | null>(null);
@@ -48,4 +48,6 @@ export default function HeroAnimation({ fallbackImage, ...props }: any) {
       )}
     </div>
   );
-}
+};
+
+export default HeroAnimation;

apps/formbricks-com/components/home/Highlights.tsx

@@ -4,7 +4,7 @@ import ImageEventTriggerDark from "@/images/event-trigger-dark.svg";
 import ImageEventTriggerLight from "@/images/event-trigger-light.svg";
 import Image from "next/image";
 
-export default function Highlights({}) {
+export const Highlights: React.FC = ({}) => {
   return (
     <>
       <div className="mx-auto mb-12 mt-8 max-w-lg md:mb-0 md:mt-32 md:max-w-none">
@@ -63,4 +63,6 @@ export default function Highlights({}) {
       </div>
     </>
   );
-}
+};
+
+export default Highlights;

apps/formbricks-com/components/home/SetupTabs.tsx

@@ -9,7 +9,7 @@ interface SecondNavbarProps {
   setActiveId: (id: string) => void;
 }
 
-export function TabBar({ tabs, activeId, setActiveId }: SecondNavbarProps) {
+export const TabBar: React.FC<SecondNavbarProps> = ({ tabs, activeId, setActiveId }) => {
   return (
     <div className="flex h-14 items-center justify-center rounded-lg  bg-slate-200 dark:bg-slate-700">
       <nav className="flex h-full items-center space-x-4" aria-label="Tabs">
@@ -31,14 +31,14 @@ export function TabBar({ tabs, activeId, setActiveId }: SecondNavbarProps) {
       </nav>
     </div>
   );
-}
+};
 
 const tabs = [
   { id: "npm", label: "NPM", icon: <IoLogoNpm /> },
   { id: "html", label: "HTML", icon: <IoLogoHtml5 /> },
 ];
 
-export default function SetupInstructions({}) {
+export const SetupInstructions: React.FC = ({}) => {
   const [activeTab, setActiveTab] = useState(tabs[0].id);
 
   return (
@@ -66,4 +66,6 @@ if (typeof window !== "undefined") {
       </div>
     </div>
   );
-}
+};
+
+export default SetupInstructions;

apps/formbricks-com/components/home/Steps.tsx

@@ -1,7 +1,7 @@
 import DashboardMockupDark from "@/images/dashboard-mockup-dark.png";
 import DashboardMockup from "@/images/dashboard-mockup.png";
 import PreviewSurvey from "../dummyUI/PreviewSurvey";
-import { Button } from "@formbricks/ui";
+import { Button } from "@formbricks/ui/Button";
 import { CursorArrowRaysIcon } from "@heroicons/react/24/solid";
 import Image from "next/image";
 import { useState } from "react";
@@ -71,7 +71,7 @@ const questions: Question[] = [
   },
 ];
 
-export default function Steps() {
+export const Steps: React.FC = () => {
   const [isAddEventModalOpen, setAddEventModalOpen] = useState(false);
 
   return (
@@ -204,4 +204,6 @@ export default function Steps() {
       <AddNoCodeEventModalDummy open={isAddEventModalOpen} setOpen={setAddEventModalOpen} />
     </>
   );
-}
+};
+
+export default Steps;

apps/formbricks-com/components/home/VideoWalkThrough.tsx

@@ -1,4 +1,4 @@
-import { ResponsiveVideo } from "@formbricks/ui";
+import { ResponsiveVideo } from "@formbricks/ui/ResponsiveVideo";
 import Modal from "../shared/Modal";
 
 interface VideoWalkThroughProps {
@@ -6,7 +6,7 @@ interface VideoWalkThroughProps {
   setOpen: (v: boolean) => void;
 }
 
-export default function VideoWalkThrough({ open, setOpen }: VideoWalkThroughProps) {
+export const VideoWalkThrough: React.FC<VideoWalkThroughProps> = ({ open, setOpen }) => {
   return (
     <Modal open={open} setOpen={setOpen}>
       <div className="mt-5">
@@ -14,4 +14,4 @@ export default function VideoWalkThrough({ open, setOpen }: VideoWalkThroughProp
       </div>
     </Modal>
   );
-}
+};

apps/formbricks-com/components/shared/BestPractices.tsx

@@ -1,6 +1,6 @@
+import { Button } from "@formbricks/ui/Button";
 import {
   AngryBirdRageIcon,
-  Button,
   CancelSubscriptionIcon,
   DogChaserIcon,
   DoorIcon,
@@ -8,7 +8,7 @@ import {
   InterviewPromptIcon,
   OnboardingIcon,
   PMFIcon,
-} from "@formbricks/ui";
+} from "@formbricks/ui/icons";
 import clsx from "clsx";
 import { usePlausible } from "next-plausible";
 import { useRouter } from "next/router";
@@ -85,33 +85,36 @@ export default function InsightOppos() {
       </div>
       <div>
         <div className=" mx-auto grid max-w-5xl grid-cols-1 gap-6 px-2 sm:grid-cols-2">
-          {BestPractices.map((bestPractice) => (
-            <div
-              key={bestPractice.title}
-              className="drop-shadow-card duration-120 relative rounded-lg bg-slate-100 p-8 transition-all ease-in-out hover:scale-105 dark:bg-slate-800">
+          {BestPractices.map((bestPractice) => {
+            const IconComponent: React.ElementType = bestPractice.icon;
+            return (
               <div
-                className={clsx(
-                  // base styles independent what type of button it is
-                  "absolute right-10 rounded-full px-3 py-1",
-                  // different styles depending on type
-                  bestPractice.category === "Boost Retention" &&
-                    "bg-pink-100 text-pink-500 dark:bg-pink-800 dark:text-pink-200",
-                  bestPractice.category === "Exploration" &&
-                    "bg-blue-100 text-blue-500 dark:bg-blue-800 dark:text-blue-200",
-                  bestPractice.category === "Retain Users" &&
-                    "bg-orange-100 text-orange-500 dark:bg-orange-800 dark:text-orange-200"
-                )}>
-                {bestPractice.category}
+                key={bestPractice.title}
+                className="drop-shadow-card duration-120 relative rounded-lg bg-slate-100 p-8 transition-all ease-in-out hover:scale-105 dark:bg-slate-800">
+                <div
+                  className={clsx(
+                    // base styles independent what type of button it is
+                    "absolute right-10 rounded-full px-3 py-1",
+                    // different styles depending on type
+                    bestPractice.category === "Boost Retention" &&
+                      "bg-pink-100 text-pink-500 dark:bg-pink-800 dark:text-pink-200",
+                    bestPractice.category === "Exploration" &&
+                      "bg-blue-100 text-blue-500 dark:bg-blue-800 dark:text-blue-200",
+                    bestPractice.category === "Retain Users" &&
+                      "bg-orange-100 text-orange-500 dark:bg-orange-800 dark:text-orange-200"
+                  )}>
+                  {bestPractice.category}
+                </div>
+                <div className="h-12 w-12">
+                  <IconComponent className="h-12 w-12 " />
+                </div>
+                <h3 className="mb-1 mt-3 text-xl font-bold text-slate-700 dark:text-slate-200">
+                  {bestPractice.title}
+                </h3>
+                <p className="text-sm text-slate-600 dark:text-slate-400">{bestPractice.description}</p>
               </div>
-              <div className="h-12 w-12">
-                <bestPractice.icon className="h-12 w-12 " />
-              </div>
-              <h3 className="mb-1 mt-3 text-xl font-bold text-slate-700 dark:text-slate-200">
-                {bestPractice.title}
-              </h3>
-              <p className="text-sm text-slate-600 dark:text-slate-400">{bestPractice.description}</p>
-            </div>
-          ))}
+            );
+          })}
         </div>
       </div>
       <div className="mx-auto mt-4 w-fit px-4 py-2 text-center">

apps/formbricks-com/components/shared/BreakerCTA.tsx

@@ -1,4 +1,4 @@
-import { Button } from "@formbricks/ui";
+import { Button } from "@formbricks/ui/Button";
 import { useRouter } from "next/router";
 import clsx from "clsx";
 import { usePlausible } from "next-plausible";

apps/formbricks-com/components/shared/CTA.tsx

@@ -1,4 +1,4 @@
-import { Button } from "@formbricks/ui";
+import { Button } from "@formbricks/ui/Button";
 import { useRouter } from "next/router";
 import HeadingCentered from "./HeadingCentered";
 

apps/formbricks-com/components/shared/EarlyBirdDeal.tsx

@@ -1,5 +1,5 @@
 import EarlyBird from "@/images/early bird deal for open source jotform alternative typeform and surveymonkey_v2.svg";
-import { Button } from "@formbricks/ui";
+import { Button } from "@formbricks/ui/Button";
 import { usePlausible } from "next-plausible";
 import Image from "next/image";
 

apps/formbricks-com/components/shared/FeatureHighlight.tsx

@@ -1,4 +1,4 @@
-import { Button } from "@formbricks/ui";
+import { Button } from "@formbricks/ui/Button";
 import { useRouter } from "next/router";
 import clsx from "clsx";
 

apps/formbricks-com/components/shared/Header.tsx

@@ -1,4 +1,4 @@
-import { Button } from "@formbricks/ui";
+import { Button } from "@formbricks/ui/Button";
 import { Popover, Transition } from "@headlessui/react";
 import { Bars3Icon, XMarkIcon } from "@heroicons/react/24/outline";
 import { StarIcon } from "@heroicons/react/24/solid";

apps/formbricks-com/components/shared/HeaderLight.tsx

@@ -1,4 +1,4 @@
-import { Button } from "@formbricks/ui";
+import { Button } from "@formbricks/ui/Button";
 import { Popover } from "@headlessui/react";
 import { usePlausible } from "next-plausible";
 import Link from "next/link";

apps/formbricks-com/components/shared/MdxCTA.tsx

@@ -1,4 +1,4 @@
-import { Button } from "@formbricks/ui";
+import { Button } from "@formbricks/ui/Button";
 import { useRouter } from "next/router";
 
 export default function CTA() {

apps/formbricks-com/components/shared/MdxTryItCTA.tsx

@@ -1,4 +1,4 @@
-import { Button } from "@formbricks/ui";
+import { Button } from "@formbricks/ui/Button";
 import { DocumentDuplicateIcon } from "@heroicons/react/24/outline";
 import { useRouter } from "next/router";
 

apps/formbricks-com/components/shared/NewsletterSignup.tsx

@@ -1,5 +1,5 @@
 import Image from "next/image";
-import { Button } from "@formbricks/ui";
+import { Button } from "@formbricks/ui/Button";
 import Friends from "@/images/newsletter-signup-gif.gif";
 
 export default function WaitlistForm() {

apps/formbricks-com/components/shared/Pricing.tsx

@@ -1,4 +1,4 @@
-import { Button } from "@formbricks/ui";
+import { Button } from "@formbricks/ui/Button";
 import clsx from "clsx";
 import EarlyBirdDeal from "./EarlyBirdDeal";
 import HeadingCentered from "./HeadingCentered";

apps/formbricks-com/components/shared/TryItCTA.tsx

@@ -1,4 +1,4 @@
-import { Button } from "@formbricks/ui";
+import { Button } from "@formbricks/ui/Button";
 import { DocumentDuplicateIcon } from "@heroicons/react/24/outline";
 import { useRouter } from "next/router";
 

apps/formbricks-com/package.json

@@ -3,6 +3,7 @@
   "version": "0.1.0",
   "private": true,
   "scripts": {
+    "clean": "rimraf .turbo node_modules .next",
     "dev": "next dev -p 3001",
     "build": "next build",
     "postbuild": "next-sitemap",
@@ -44,6 +45,7 @@
     "autoprefixer": "^10.4.14",
     "eslint-config-formbricks": "workspace:*",
     "postcss": "^8.4.23",
+    "rimraf": "^5.0.0",
     "tailwindcss": "^3.3.2",
     "typescript": "^5.0.4"
   }

apps/formbricks-com/pages/404.tsx

@@ -1,5 +1,5 @@
 // 404.js
-import { Button } from "@formbricks/ui";
+import { Button } from "@formbricks/ui/Button";
 
 export default function FourOhFour() {
   return (

apps/formbricks-com/pages/community.tsx

@@ -1,6 +1,6 @@
 import Layout from "@/components/shared/Layout";
 import HeroTitle from "@/components/shared/HeroTitle";
-import { Button } from "@formbricks/ui";
+import { Button } from "@formbricks/ui/Button";
 import { ArrowTopRightOnSquareIcon } from "@heroicons/react/24/outline";
 import { useRouter } from "next/router";
 import { ChatBubbleOvalLeftEllipsisIcon, EnvelopeIcon } from "@heroicons/react/24/solid";

apps/formbricks-com/pages/docs/best-practices/docs-feedback/index.mdx

@@ -102,7 +102,8 @@ Locate that file. We are using the [Tailwind Template “Syntax”](https://tail
 ```tsx
 import { useState } from "react";
 import { handleFeedbackSubmit, updateFeedback } from "../../lib/handleFeedbackSubmit";
-import { Popover, PopoverTrigger, PopoverContent, Button } from "@formbricks/ui";
+import { Button } from "@formbricks/ui/Button";
+import { Popover, PopoverTrigger, PopoverContent } from "@formbricks/ui/Popover";
 import { useRouter } from "next/router";
 
 export default function DocsFeedback() {

apps/formbricks-com/pages/docs/wrappers/pop-over/index.mdx

@@ -40,7 +40,7 @@ To implement the pop-over, all you have to do is set up a button with the follow
 Here is a full example file for React.js with TailwindCSS:
 
 ```tsx
-import { Button } from "@formbricks/ui";
+import { Button } from "@formbricks/ui/Button";
 import { useEffect, useRef, useState } from "react";
 
 declare global {

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

@@ -1,6 +1,6 @@
 import BackToLoginButton from "@/components/auth/BackToLoginButton";
 
-export default function SignInPage() {
+const SignInPage: React.FC = () => {
   return (
     <div>
       <h1 className="leading-2 mb-4 text-center font-bold">Password reset successfully requested</h1>
@@ -13,4 +13,6 @@ export default function SignInPage() {
       </div>
     </div>
   );
-}
+};
+
+export default SignInPage;

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

@@ -1,5 +1,7 @@
 import { PasswordResetForm } from "../../../components/auth/PasswordResetForm";
 
-export default function ForgotPasswordPage() {
+const ForgotPasswordPage: React.FC = () => {
   return <PasswordResetForm />;
-}
+};
+
+export default ForgotPasswordPage;

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

@@ -1,5 +1,7 @@
 import { ResetPasswordForm } from "@/components/auth/ResetPasswordForm";
 
-export default function ResetPasswordPage() {
+const ResetPasswordPage: React.FC = () => {
   return <ResetPasswordForm />;
-}
+};
+
+export default ResetPasswordPage;

apps/web/app/billing-confirmation/ConfirmationPage.tsx

@@ -1,7 +1,8 @@
 "use client";
 
 import ContentWrapper from "@/components/shared/ContentWrapper";
-import { Button, Confetti } from "@formbricks/ui";
+import { Button } from "@formbricks/ui/Button";
+import { Confetti } from "@formbricks/ui/Confetti";
 import { useEffect, useState } from "react";
 
 export default function ConfirmationPage() {

apps/web/app/environments/[environmentId]/AddProductModal.tsx

@@ -2,7 +2,9 @@
 
 import Modal from "@/components/shared/Modal";
 import { createProduct } from "@/lib/products/products";
-import { Button, Input, Label } from "@formbricks/ui";
+import { Button } from "@formbricks/ui/Button";
+import { Input } from "@formbricks/ui/Input";
+import { Label } from "@formbricks/ui/Label";
 import { PlusCircleIcon } from "@heroicons/react/24/outline";
 import { useRouter } from "next/navigation";
 import { useForm } from "react-hook-form";

apps/web/app/environments/[environmentId]/EnvironmentsNavbar.tsx

@@ -21,18 +21,10 @@ import { useEnvironment } from "@/lib/environments/environments";
 import { useMemberships } from "@/lib/memberships";
 import { useTeam } from "@/lib/teams/teams";
 import { capitalizeFirstLetter, truncate } from "@/lib/utils";
-import {
-  CustomersIcon,
-  ErrorComponent,
-  FilterIcon,
-  FormIcon,
-  ProfileAvatar,
-  SettingsIcon,
-  Tooltip,
-  TooltipContent,
-  TooltipProvider,
-  TooltipTrigger,
-} from "@formbricks/ui";
+import { CustomersIcon, FilterIcon, FormIcon, SettingsIcon } from "@formbricks/ui/icons";
+import { ErrorComponent } from "@formbricks/ui/ErrorComponent";
+import { ProfileAvatar } from "@formbricks/ui/Avatars";
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@formbricks/ui/Tooltip";
 import {
   AdjustmentsVerticalIcon,
   ArrowRightOnRectangleIcon,
@@ -232,21 +224,25 @@ export default function EnvironmentsNavbar({ environmentId, session }: Environme
               {/* <PlusIcon className="h-6 w-6" /> */}
               <Image src={FaveIcon} width={30} height={30} alt="faveicon" />
             </Link>
-            {navigation.map((item) => (
-              <Link
-                key={item.name}
-                href={item.href}
-                className={clsx(
-                  item.current
-                    ? "bg-slate-100 text-slate-900"
-                    : "text-slate-900 hover:bg-slate-50 hover:text-slate-900",
-                  "inline-flex items-center rounded-md px-2 py-1 text-sm font-medium"
-                )}
-                aria-current={item.current ? "page" : undefined}>
-                <item.icon className="mr-3 h-5 w-5" />
-                {item.name}
-              </Link>
-            ))}
+            {navigation.map((item) => {
+              const IconComponent: React.ElementType = item.icon;
+
+              return (
+                <Link
+                  key={item.name}
+                  href={item.href}
+                  className={clsx(
+                    item.current
+                      ? "bg-slate-100 text-slate-900"
+                      : "text-slate-900 hover:bg-slate-50 hover:text-slate-900",
+                    "inline-flex items-center rounded-md px-2 py-1 text-sm font-medium"
+                  )}
+                  aria-current={item.current ? "page" : undefined}>
+                  <IconComponent className="mr-3 h-5 w-5" />
+                  {item.name}
+                </Link>
+              );
+            })}
           </div>
           <div className="hidden sm:ml-6 sm:flex sm:items-center">
             <DropdownMenu>

apps/web/app/environments/[environmentId]/attributes/AttributeActivityTab.tsx

@@ -1,4 +1,4 @@
-import { Label } from "@formbricks/ui";
+import { Label } from "@formbricks/ui/Label";
 import { convertDateTimeStringShort } from "@formbricks/lib/time";
 import { capitalizeFirstLetter } from "@/lib/utils";
 import { TagIcon } from "@heroicons/react/24/solid";

apps/web/app/environments/[environmentId]/attributes/AttributeClassesList.tsx

@@ -1,8 +1,8 @@
 "use client";
 
 import LoadingSpinner from "@/components/shared/LoadingSpinner";
-import { Button } from "@formbricks/ui";
-import { ErrorComponent } from "@formbricks/ui";
+import { Button } from "@formbricks/ui/Button";
+import { ErrorComponent } from "@formbricks/ui/ErrorComponent";
 import { useAttributeClasses } from "@/lib/attributeClasses/attributeClasses";
 import { QuestionMarkCircleIcon, TagIcon } from "@heroicons/react/24/solid";
 import { useState } from "react";

apps/web/app/environments/[environmentId]/attributes/AttributeSettingsTab.tsx

@@ -1,6 +1,6 @@
-import { Button } from "@formbricks/ui";
-import { Input } from "@formbricks/ui";
-import { Label } from "@formbricks/ui";
+import { Button } from "@formbricks/ui/Button";
+import { Input } from "@formbricks/ui/Input";
+import { Label } from "@formbricks/ui/Label";
 import { useAttributeClasses } from "@/lib/attributeClasses/attributeClasses";
 import { useAttributeClassMutation } from "@/lib/attributeClasses/mutateAttributeClasses";
 import type { AttributeClass } from "@prisma/client";

apps/web/app/environments/[environmentId]/events/AddNoCodeEventModal.tsx

@@ -2,18 +2,11 @@
 
 import Modal from "@/components/shared/Modal";
 import { createEventClass } from "@/lib/eventClasses/eventClasses";
-import {
-  Button,
-  Input,
-  Label,
-  RadioGroup,
-  RadioGroupItem,
-  Select,
-  SelectContent,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
-} from "@formbricks/ui";
+import { Button } from "@formbricks/ui/Button";
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@formbricks/ui/Select";
+import { Input } from "@formbricks/ui/Input";
+import { Label } from "@formbricks/ui/Label";
+import { RadioGroup, RadioGroupItem } from "@formbricks/ui/RadioGroup";
 import type { NoCodeConfig, Event } from "@formbricks/types/events";
 import { CursorArrowRaysIcon } from "@heroicons/react/24/solid";
 import clsx from "clsx";

apps/web/app/environments/[environmentId]/events/EventActivityTab.tsx

@@ -1,6 +1,6 @@
 import LoadingSpinner from "@/components/shared/LoadingSpinner";
-import { ErrorComponent } from "@formbricks/ui";
-import { Label } from "@formbricks/ui";
+import { ErrorComponent } from "@formbricks/ui/ErrorComponent";
+import { Label } from "@formbricks/ui/Label";
 import { useEventClass } from "@/lib/eventClasses/eventClasses";
 import { convertDateTimeStringShort } from "@formbricks/lib/time";
 import { capitalizeFirstLetter } from "@/lib/utils";

apps/web/app/environments/[environmentId]/events/EventClassesList.tsx

@@ -1,8 +1,8 @@
 "use client";
 
 import LoadingSpinner from "@/components/shared/LoadingSpinner";
-import { Button } from "@formbricks/ui";
-import { ErrorComponent } from "@formbricks/ui";
+import { Button } from "@formbricks/ui/Button";
+import { ErrorComponent } from "@formbricks/ui/ErrorComponent";
 import { useEventClasses } from "@/lib/eventClasses/eventClasses";
 import { timeSinceConditionally } from "@formbricks/lib/time";
 import { CodeBracketIcon, CursorArrowRaysIcon, SparklesIcon } from "@heroicons/react/24/solid";

apps/web/app/environments/[environmentId]/events/EventSettingsTab.tsx

@@ -1,9 +1,10 @@
 import LoadingSpinner from "@/components/shared/LoadingSpinner";
-import { Button, Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@formbricks/ui";
-import { ErrorComponent } from "@formbricks/ui";
-import { Input } from "@formbricks/ui";
-import { Label } from "@formbricks/ui";
-import { RadioGroup, RadioGroupItem } from "@formbricks/ui";
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@formbricks/ui/Select";
+import { Button } from "@formbricks/ui/Button";
+import { ErrorComponent } from "@formbricks/ui/ErrorComponent";
+import { Input } from "@formbricks/ui/Input";
+import { Label } from "@formbricks/ui/Label";
+import { RadioGroup, RadioGroupItem } from "@formbricks/ui/RadioGroup";
 import { deleteEventClass, useEventClass, useEventClasses } from "@/lib/eventClasses/eventClasses";
 import { useEventClassMutation } from "@/lib/eventClasses/mutateEventClasses";
 import { Controller, useForm } from "react-hook-form";

apps/web/app/environments/[environmentId]/integrations/alerts/page.tsx

@@ -1,7 +1,7 @@
-import { Card } from "@formbricks/ui";
-import { EmailIcon } from "@formbricks/ui";
-import { PageTitle } from "@formbricks/ui";
 import SlackLogo from "@/images/slacklogo.png";
+import { Card } from "@formbricks/ui/Card";
+import { PageTitle } from "@formbricks/ui/PageTitle";
+import { EmailIcon } from "@formbricks/ui/icons";
 import Image from "next/image";
 import Link from "next/link";
 

apps/web/app/environments/[environmentId]/integrations/alerts/slack/AddSlackAlertModal.tsx

@@ -1,10 +1,10 @@
 "use client";
 
 import Modal from "@/components/shared/Modal";
-import { Button } from "@formbricks/ui";
-import { Checkbox } from "@formbricks/ui";
-import { Input } from "@formbricks/ui";
-import { Label } from "@formbricks/ui";
+import { Button } from "@formbricks/ui/Button";
+import { Checkbox } from "@formbricks/ui/Checkbox";
+import { Input } from "@formbricks/ui/Input";
+import { Label } from "@formbricks/ui/Label";
 
 type AddEmailAlertModalProps = {
   open: boolean;

apps/web/app/environments/[environmentId]/integrations/installation/javascript/page.tsx

@@ -1,6 +1,6 @@
 import DocsSidebar from "@/components/integrations/DocsSidebar";
 import IntegrationPageTitle from "@/components/integrations/IntegrationsPageTitle";
-import { Input } from "@formbricks/ui";
+import { Input } from "@formbricks/ui/Input";
 import JSLogo from "@/images/jslogo.png";
 import Image from "next/image";
 

apps/web/app/environments/[environmentId]/integrations/installation/npm/page.tsx

@@ -1,6 +1,6 @@
 import DocsSidebar from "@/components/integrations/DocsSidebar";
 import IntegrationPageTitle from "@/components/integrations/IntegrationsPageTitle";
-import { Input } from "@formbricks/ui";
+import { Input } from "@formbricks/ui/Input";
 import NPMLogo from "@/images/npmlogo.png";
 import Image from "next/image";
 

apps/web/app/environments/[environmentId]/integrations/installation/page.tsx

@@ -1,5 +1,5 @@
-import { Card } from "@formbricks/ui";
-import { PageTitle } from "@formbricks/ui";
+import { Card } from "@formbricks/ui/Card";
+import { PageTitle } from "@formbricks/ui/PageTitle";
 import JSLogo from "@/images/jslogo.png";
 import NPMLogo from "@/images/npmlogo.png";
 import Image from "next/image";

apps/web/app/environments/[environmentId]/people/PeopleList.tsx

@@ -2,8 +2,8 @@
 
 import EmptySpaceFiller from "@/components/shared/EmptySpaceFiller";
 import LoadingSpinner from "@/components/shared/LoadingSpinner";
-import { PersonAvatar } from "@formbricks/ui";
-import { ErrorComponent } from "@formbricks/ui";
+import { PersonAvatar } from "@formbricks/ui/Avatars";
+import { ErrorComponent } from "@formbricks/ui/ErrorComponent";
 import { usePeople } from "@/lib/people/people";
 import Link from "next/link";
 import { truncateMiddle } from "@/lib/utils";

apps/web/app/environments/[environmentId]/people/[personId]/ActivityItemComponents.tsx

@@ -1,5 +1,5 @@
-import { Label } from "@formbricks/ui";
-import { Popover, PopoverContent, PopoverTrigger } from "@formbricks/ui";
+import { Label } from "@formbricks/ui/Label";
+import { Popover, PopoverContent, PopoverTrigger } from "@formbricks/ui/Popover";
 import { timeSince } from "@formbricks/lib/time";
 import { capitalizeFirstLetter } from "@/lib/utils";
 import {

apps/web/app/environments/[environmentId]/people/[personId]/PersonDetails.tsx

@@ -3,7 +3,7 @@
 import DeleteDialog from "@/components/shared/DeleteDialog";
 import GoBackButton from "@/components/shared/GoBackButton";
 import LoadingSpinner from "@/components/shared/LoadingSpinner";
-import { ErrorComponent } from "@formbricks/ui";
+import { ErrorComponent } from "@formbricks/ui/ErrorComponent";
 import { deletePerson, usePerson } from "@/lib/people/people";
 import { capitalizeFirstLetter } from "@/lib/utils";
 import { ArrowsUpDownIcon, TrashIcon } from "@heroicons/react/24/outline";

apps/web/app/environments/[environmentId]/settings/SettingsCard.tsx

@@ -1,5 +1,5 @@
 import { cn } from "@formbricks/lib/cn";
-import { Badge } from "@formbricks/ui";
+import { Badge } from "@formbricks/ui/Badge";
 
 export default function SettingsCard({
   title,

apps/web/app/environments/[environmentId]/settings/api-keys/AddApiKeyModal.tsx

@@ -1,7 +1,9 @@
 "use client";
 
 import Modal from "@/components/shared/Modal";
-import { Button, Input, Label } from "@formbricks/ui";
+import { Button } from "@formbricks/ui/Button";
+import { Input } from "@formbricks/ui/Input";
+import { Label } from "@formbricks/ui/Label";
 import { ExclamationTriangleIcon } from "@heroicons/react/24/solid";
 import { useForm } from "react-hook-form";
 

apps/web/app/environments/[environmentId]/settings/api-keys/ApiKeyList.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { ErrorComponent } from "@formbricks/ui";
+import { ErrorComponent } from "@formbricks/ui/ErrorComponent";
 import LoadingSpinner from "@/components/shared/LoadingSpinner";
 import { useProduct } from "@/lib/products/products";
 import EditApiKeys from "./EditApiKeys";

apps/web/app/environments/[environmentId]/settings/api-keys/EditApiKeys.tsx

@@ -5,7 +5,8 @@ import DeleteDialog from "@/components/shared/DeleteDialog";
 import LoadingSpinner from "@/components/shared/LoadingSpinner";
 import { createApiKey, deleteApiKey, useApiKeys } from "@/lib/apiKeys";
 import { capitalizeFirstLetter } from "@/lib/utils";
-import { Button, ErrorComponent } from "@formbricks/ui";
+import { Button } from "@formbricks/ui/Button";
+import { ErrorComponent } from "@formbricks/ui/ErrorComponent";
 import { TrashIcon } from "@heroicons/react/24/outline";
 import { useState } from "react";
 import toast from "react-hot-toast";

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

@@ -2,7 +2,9 @@
 import { useState } from "react";
 import LoadingSpinner from "@/components/shared/LoadingSpinner";
 import { useTeam } from "@/lib/teams/teams";
-import { Badge, Button, ErrorComponent } from "@formbricks/ui";
+import { Badge } from "@formbricks/ui/Badge";
+import { Button } from "@formbricks/ui/Button";
+import { ErrorComponent } from "@formbricks/ui/ErrorComponent";
 import type { Session } from "next-auth";
 import { useRouter } from "next/navigation";
 import { CheckIcon } from "@heroicons/react/24/outline";

apps/web/app/environments/[environmentId]/settings/billing/page.tsx

@@ -1,6 +1,6 @@
 import SettingsCard from "../SettingsCard";
 import SettingsTitle from "../SettingsTitle";
-import { Button } from "@formbricks/ui";
+import { Button } from "@formbricks/ui/Button";
 import PricingTable from "./PricingTable";
 import { getServerSession } from "next-auth";
 import { authOptions } from "@/app/api/auth/[...nextauth]/authOptions";

apps/web/app/environments/[environmentId]/settings/lookandfeel/editLookAndFeel.tsx

@@ -1,17 +1,17 @@
 "use client";
 
-import { ColorPicker } from "@formbricks/ui";
+import { ColorPicker } from "@formbricks/ui/ColorPicker";
 import LoadingSpinner from "@/components/shared/LoadingSpinner";
-import { Button } from "@formbricks/ui";
-import { Label } from "@formbricks/ui";
-import { RadioGroup, RadioGroupItem } from "@formbricks/ui";
-import { Switch } from "@formbricks/ui";
+import { Button } from "@formbricks/ui/Button";
+import { Label } from "@formbricks/ui/Label";
+import { RadioGroup, RadioGroupItem } from "@formbricks/ui/RadioGroup";
+import { Switch } from "@formbricks/ui/Switch";
 import { useEnvironment } from "@/lib/environments/environments";
 import { useProduct } from "@/lib/products/products";
 import { useProductMutation } from "@/lib/products/mutateProducts";
 import { useEffect, useState } from "react";
 import toast from "react-hot-toast";
-import { ErrorComponent } from "@formbricks/ui";
+import { ErrorComponent } from "@formbricks/ui/ErrorComponent";
 
 export function EditBrandColor({ environmentId }) {
   const { product, isLoadingProduct, isErrorProduct } = useProduct(environmentId);

apps/web/app/environments/[environmentId]/settings/members/AddMemberModal.tsx

@@ -1,9 +1,9 @@
 "use client";
 
 import Modal from "@/components/shared/Modal";
-import { Button } from "@formbricks/ui";
-import { Input } from "@formbricks/ui";
-import { Label } from "@formbricks/ui";
+import { Button } from "@formbricks/ui/Button";
+import { Input } from "@formbricks/ui/Input";
+import { Label } from "@formbricks/ui/Label";
 import { useForm } from "react-hook-form";
 
 interface MemberModalProps {

apps/web/app/environments/[environmentId]/settings/members/EditMemberships.tsx

@@ -3,18 +3,13 @@
 import DeleteDialog from "@/components/shared/DeleteDialog";
 import LoadingSpinner from "@/components/shared/LoadingSpinner";
 import { addMember, deleteInvite, removeMember, resendInvite, useMembers } from "@/lib/members";
-import {
-  Button,
-  ProfileAvatar,
-  Tooltip,
-  TooltipContent,
-  TooltipProvider,
-  TooltipTrigger,
-} from "@formbricks/ui";
+import { Button } from "@formbricks/ui/Button";
+import { ProfileAvatar } from "@formbricks/ui/Avatars";
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@formbricks/ui/Tooltip";
 import { PaperAirplaneIcon, TrashIcon } from "@heroicons/react/24/outline";
 import { useState } from "react";
 import AddMemberModal from "./AddMemberModal";
-import { Badge } from "@formbricks/ui";
+import { Badge } from "@formbricks/ui/Badge";
 import toast from "react-hot-toast";
 
 export function EditMemberships({ environmentId }) {
@@ -88,7 +83,9 @@ export function EditMemberships({ environmentId }) {
               <div className="ph-no-capture col-span-2 flex flex-col justify-center break-all">
                 <p>{member.name}</p>
               </div>
-              <div className="ph-no-capture col-span-2 flex flex-col justify-center break-all">{member.email}</div>
+              <div className="ph-no-capture col-span-2 flex flex-col justify-center break-all">
+                {member.email}
+              </div>
               <div className="col-span-2 flex items-center justify-end gap-x-6 pr-6">
                 {!member.accepted && <Badge type="warning" text="Pending" size="tiny" />}
                 {member.role !== "owner" && (

apps/web/app/environments/[environmentId]/settings/members/EditTeamName.tsx

@@ -4,7 +4,10 @@ import { useEffect, useState } from "react";
 import LoadingSpinner from "@/components/shared/LoadingSpinner";
 import { useTeamMutation } from "@/lib/teams/mutateTeams";
 import { useTeam } from "@/lib/teams/teams";
-import { Button, ErrorComponent, Input, Label } from "@formbricks/ui";
+import { Button } from "@formbricks/ui/Button";
+import { ErrorComponent } from "@formbricks/ui/ErrorComponent";
+import { Input } from "@formbricks/ui/Input";
+import { Label } from "@formbricks/ui/Label";
 import { useForm } from "react-hook-form";
 import toast from "react-hot-toast";
 

apps/web/app/environments/[environmentId]/settings/product/editProduct.tsx

@@ -1,10 +1,10 @@
 "use client";
 
 import LoadingSpinner from "@/components/shared/LoadingSpinner";
-import { Button } from "@formbricks/ui";
-import { ErrorComponent } from "@formbricks/ui";
-import { Input } from "@formbricks/ui";
-import { Label } from "@formbricks/ui";
+import { Button } from "@formbricks/ui/Button";
+import { ErrorComponent } from "@formbricks/ui/ErrorComponent";
+import { Input } from "@formbricks/ui/Input";
+import { Label } from "@formbricks/ui/Label";
 import { useProductMutation } from "@/lib/products/mutateProducts";
 import { useProduct } from "@/lib/products/products";
 import { useForm } from "react-hook-form";

apps/web/app/environments/[environmentId]/settings/profile/editProfile.tsx

@@ -4,8 +4,11 @@ import LoadingSpinner from "@/components/shared/LoadingSpinner";
 import AvatarPlaceholder from "@/images/avatar-placeholder.png";
 import { useProfileMutation } from "@/lib/profile/mutateProfile";
 import { useProfile } from "@/lib/profile/profile";
-import { Button } from "@formbricks/ui";
-import { ErrorComponent, Input, Label, ProfileAvatar } from "@formbricks/ui";
+import { Button } from "@formbricks/ui/Button";
+import { ErrorComponent } from "@formbricks/ui/ErrorComponent";
+import { Input } from "@formbricks/ui/Input";
+import { Label } from "@formbricks/ui/Label";
+import { ProfileAvatar } from "@formbricks/ui/Avatars";
 import Image from "next/image";
 import { useForm } from "react-hook-form";
 import toast from "react-hot-toast";

apps/web/app/environments/[environmentId]/settings/setup/EnvironmentNotice.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { ErrorComponent } from "@/../../packages/ui";
+import { ErrorComponent } from "@formbricks/ui/ErrorComponent";
 import LoadingSpinner from "@/components/shared/LoadingSpinner";
 import { useEnvironment } from "@/lib/environments/environments";
 import { ExclamationTriangleIcon } from "@heroicons/react/24/solid";

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

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

apps/web/app/environments/[environmentId]/surveys/SurveyList.tsx

@@ -13,7 +13,8 @@ import LoadingSpinner from "@/components/shared/LoadingSpinner";
 import SurveyStatusIndicator from "@/components/shared/SurveyStatusIndicator";
 import { useProfile } from "@/lib/profile";
 import { createSurvey, deleteSurvey, useSurveys, duplicateSurvey } from "@/lib/surveys/surveys";
-import { Badge, ErrorComponent } from "@formbricks/ui";
+import { ErrorComponent } from "@formbricks/ui/ErrorComponent";
+import { Badge } from "@formbricks/ui/Badge";
 import { PlusIcon } from "@heroicons/react/24/outline";
 import {
   ComputerDesktopIcon,

apps/web/app/environments/[environmentId]/surveys/[surveyId]/edit/AddQuestionButton.tsx

@@ -7,7 +7,7 @@ import * as Collapsible from "@radix-ui/react-collapsible";
 import { useState } from "react";
 import { cn } from "@formbricks/lib/cn";
 import { useProduct } from "@/lib/products/products";
-import { ErrorComponent } from "@/../../packages/ui";
+import { ErrorComponent } from "@formbricks/ui/ErrorComponent";
 import LoadingSpinner from "@/components/shared/LoadingSpinner";
 
 interface AddQuestionButtonProps {

apps/web/app/environments/[environmentId]/surveys/[surveyId]/edit/CTAQuestionForm.tsx

@@ -1,8 +1,10 @@
 "use client";
 
 import type { CTAQuestion } from "@formbricks/types/questions";
-import { Editor, Input, Label } from "@formbricks/ui";
-import { RadioGroup, RadioGroupItem } from "@formbricks/ui";
+import { Editor } from "@formbricks/ui/editor/Editor";
+import { Input } from "@formbricks/ui/Input";
+import { Label } from "@formbricks/ui/Label";
+import { RadioGroup, RadioGroupItem } from "@formbricks/ui/RadioGroup";
 import { useState } from "react";
 import { md } from "@formbricks/lib/markdownIt";
 

apps/web/app/environments/[environmentId]/surveys/[surveyId]/edit/EditThankYouCard.tsx

@@ -2,7 +2,9 @@
 
 import { cn } from "@formbricks/lib/cn";
 import type { Survey } from "@formbricks/types/surveys";
-import { Input, Label, Switch } from "@formbricks/ui";
+import { Input } from "@formbricks/ui/Input";
+import { Label } from "@formbricks/ui/Label";
+import { Switch } from "@formbricks/ui/Switch";
 import * as Collapsible from "@radix-ui/react-collapsible";
 
 interface EditThankYouCardProps {

apps/web/app/environments/[environmentId]/surveys/[surveyId]/edit/HowToSendCard.tsx

@@ -2,9 +2,9 @@
 
 import type { Survey } from "@formbricks/types/surveys";
 import { cn } from "@formbricks/lib/cn";
-import { Badge } from "@formbricks/ui";
-import { Label } from "@formbricks/ui";
-import { RadioGroup, RadioGroupItem } from "@formbricks/ui";
+import { Badge } from "@formbricks/ui/Badge";
+import { Label } from "@formbricks/ui/Label";
+import { RadioGroup, RadioGroupItem } from "@formbricks/ui/RadioGroup";
 import {
   CheckCircleIcon,
   ComputerDesktopIcon,

apps/web/app/environments/[environmentId]/surveys/[surveyId]/edit/MultipleChoiceMultiForm.tsx

@@ -1,6 +1,6 @@
-import { Button } from "@formbricks/ui";
-import { Input } from "@formbricks/ui";
-import { Label } from "@formbricks/ui";
+import { Button } from "@formbricks/ui/Button";
+import { Input } from "@formbricks/ui/Input";
+import { Label } from "@formbricks/ui/Label";
 import type { MultipleChoiceMultiQuestion } from "@formbricks/types/questions";
 import { createId } from "@paralleldrive/cuid2";
 import { TrashIcon } from "@heroicons/react/24/solid";

apps/web/app/environments/[environmentId]/surveys/[surveyId]/edit/MultipleChoiceSingleForm.tsx

@@ -1,6 +1,6 @@
-import { Button } from "@formbricks/ui";
-import { Input } from "@formbricks/ui";
-import { Label } from "@formbricks/ui";
+import { Button } from "@formbricks/ui/Button";
+import { Input } from "@formbricks/ui/Input";
+import { Label } from "@formbricks/ui/Label";
 import type { MultipleChoiceSingleQuestion } from "@formbricks/types/questions";
 import { createId } from "@paralleldrive/cuid2";
 import { TrashIcon } from "@heroicons/react/24/solid";

apps/web/app/environments/[environmentId]/surveys/[surveyId]/edit/NPSQuestionForm.tsx

@@ -1,5 +1,6 @@
 import type { NPSQuestion } from "@formbricks/types/questions";
-import { Input, Label } from "@formbricks/ui";
+import { Label } from "@formbricks/ui/Label";
+import { Input } from "@formbricks/ui/Input";
 
 interface NPSQuestionFormProps {
   question: NPSQuestion;

apps/web/app/environments/[environmentId]/surveys/[surveyId]/edit/OpenQuestionForm.tsx

@@ -1,5 +1,5 @@
-import { Input } from "@formbricks/ui";
-import { Label } from "@formbricks/ui";
+import { Input } from "@formbricks/ui/Input";
+import { Label } from "@formbricks/ui/Label";
 import type { OpenTextQuestion } from "@formbricks/types/questions";
 
 interface OpenQuestionFormProps {

apps/web/app/environments/[environmentId]/surveys/[surveyId]/edit/QuestionCard.tsx

@@ -4,28 +4,29 @@ import { getQuestionTypeName } from "@/lib/questions";
 import { cn } from "@formbricks/lib/cn";
 import type { Question } from "@formbricks/types/questions";
 import type { Survey } from "@formbricks/types/surveys";
-import { Label, Switch } from "@formbricks/ui";
+import { Label } from "@formbricks/ui/Label";
+import { Switch } from "@formbricks/ui/Switch";
 import {
-  ListBulletIcon,
   ChatBubbleBottomCenterTextIcon,
+  ChevronDownIcon,
+  ChevronRightIcon,
   CursorArrowRippleIcon,
+  ListBulletIcon,
   PresentationChartBarIcon,
   QueueListIcon,
   StarIcon,
-  ChevronDownIcon,
-  ChevronRightIcon,
 } from "@heroicons/react/24/solid";
 import * as Collapsible from "@radix-ui/react-collapsible";
 import { useState } from "react";
 import { Draggable } from "react-beautiful-dnd";
-import MultipleChoiceSingleForm from "./MultipleChoiceSingleForm";
+import CTAQuestionForm from "./CTAQuestionForm";
 import MultipleChoiceMultiForm from "./MultipleChoiceMultiForm";
+import MultipleChoiceSingleForm from "./MultipleChoiceSingleForm";
+import NPSQuestionForm from "./NPSQuestionForm";
 import OpenQuestionForm from "./OpenQuestionForm";
 import QuestionDropdown from "./QuestionDropdown";
-import NPSQuestionForm from "./NPSQuestionForm";
-import UpdateQuestionId from "./UpdateQuestionId";
-import CTAQuestionForm from "./CTAQuestionForm";
 import RatingQuestionForm from "./RatingQuestionForm";
+import UpdateQuestionId from "./UpdateQuestionId";
 
 interface QuestionCardProps {
   localSurvey: Survey;

apps/web/app/environments/[environmentId]/surveys/[surveyId]/edit/QuestionDropdown.tsx

@@ -1,6 +1,11 @@
 "use client";
 
-import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "@formbricks/ui";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from "@formbricks/ui/DropdownMenu";
 import { EllipsisHorizontalIcon } from "@heroicons/react/24/solid";
 
 interface QuestionDropdownProps {

apps/web/app/environments/[environmentId]/surveys/[surveyId]/edit/RatingQuestionForm.tsx

@@ -1,5 +1,6 @@
 import type { RatingQuestion } from "@formbricks/types/questions";
-import { Input, Label } from "@formbricks/ui";
+import { Input } from "@formbricks/ui/Input";
+import { Label } from "@formbricks/ui/Label";
 import { HashtagIcon, StarIcon, FaceSmileIcon } from "@heroicons/react/24/outline";
 
 import Dropdown from "./RatingTypeDropdown";

apps/web/app/environments/[environmentId]/surveys/[surveyId]/edit/RecontactOptionsCard.tsx

@@ -1,9 +1,9 @@
 "use client";
 
-import { Checkbox } from "@formbricks/ui";
-import { Input } from "@formbricks/ui";
-import { Label } from "@formbricks/ui";
-import { RadioGroup, RadioGroupItem } from "@formbricks/ui";
+import { Checkbox } from "@formbricks/ui/Checkbox";
+import { Input } from "@formbricks/ui/Input";
+import { Label } from "@formbricks/ui/Label";
+import { RadioGroup, RadioGroupItem } from "@formbricks/ui/RadioGroup";
 import type { Survey } from "@formbricks/types/surveys";
 import { CheckCircleIcon } from "@heroicons/react/24/solid";
 import * as Collapsible from "@radix-ui/react-collapsible";

apps/web/app/environments/[environmentId]/surveys/[surveyId]/edit/ResponseOptionsCard.tsx

@@ -1,10 +1,10 @@
 "use client";
 
-import { Label } from "@formbricks/ui";
-import { RadioGroup, RadioGroupItem } from "@formbricks/ui";
+import { Label } from "@formbricks/ui/Label";
+import { RadioGroup, RadioGroupItem } from "@formbricks/ui/RadioGroup";
 import { CheckCircleIcon } from "@heroicons/react/24/solid";
 import * as Collapsible from "@radix-ui/react-collapsible";
-import { Badge } from "@formbricks/ui";
+import { Badge } from "@formbricks/ui/Badge";
 import { cn } from "@formbricks/lib/cn";
 import { useState } from "react";
 

apps/web/app/environments/[environmentId]/surveys/[surveyId]/edit/SurveyEditor.tsx

@@ -4,7 +4,7 @@ import LoadingSpinner from "@/components/shared/LoadingSpinner";
 import { useProduct } from "@/lib/products/products";
 import { useSurvey } from "@/lib/surveys/surveys";
 import type { Survey } from "@formbricks/types/surveys";
-import { ErrorComponent } from "@formbricks/ui";
+import { ErrorComponent } from "@formbricks/ui/ErrorComponent";
 import { ExclamationTriangleIcon } from "@heroicons/react/24/solid";
 import { useEffect, useState } from "react";
 import PreviewSurvey from "../../PreviewSurvey";

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

@@ -3,7 +3,8 @@
 import SurveyStatusDropdown from "@/components/shared/SurveyStatusDropdown";
 import { useSurveyMutation } from "@/lib/surveys/mutateSurveys";
 import type { Survey } from "@formbricks/types/surveys";
-import { Button, Input } from "@formbricks/ui";
+import { Button } from "@formbricks/ui/Button";
+import { Input } from "@formbricks/ui/Input";
 import { UserGroupIcon, ArrowLeftIcon } from "@heroicons/react/24/solid";
 import { useRouter } from "next/navigation";
 import { useEffect, useState } from "react";

apps/web/app/environments/[environmentId]/surveys/[surveyId]/edit/UpdateQuestionId.tsx

@@ -1,6 +1,8 @@
 "use client";
 
-import { Button, Input, Label } from "@formbricks/ui";
+import { Button } from "@formbricks/ui/Button";
+import { Input } from "@formbricks/ui/Input";
+import { Label } from "@formbricks/ui/Label";
 import { CheckIcon } from "@heroicons/react/24/solid";
 import { useState } from "react";
 

apps/web/app/environments/[environmentId]/surveys/[surveyId]/edit/WhenToSendCard.tsx

@@ -4,15 +4,15 @@ import LoadingSpinner from "@/components/shared/LoadingSpinner";
 import { useEventClasses } from "@/lib/eventClasses/eventClasses";
 import { cn } from "@formbricks/lib/cn";
 import type { Survey } from "@formbricks/types/surveys";
+import { Button } from "@formbricks/ui/Button";
 import {
-  Button,
   Select,
   SelectContent,
   SelectItem,
   SelectTrigger,
   SelectValue,
   SelectSeparator,
-} from "@formbricks/ui";
+} from "@formbricks/ui/Select";
 import { CheckCircleIcon, PlusIcon, TrashIcon } from "@heroicons/react/24/solid";
 import * as Collapsible from "@radix-ui/react-collapsible";
 import { useEffect, useState } from "react";

apps/web/app/environments/[environmentId]/surveys/[surveyId]/edit/WhoToSendCard.tsx

@@ -1,8 +1,8 @@
 "use client";
 
-import { Badge } from "@formbricks/ui";
-import { Label } from "@formbricks/ui";
-import { RadioGroup, RadioGroupItem } from "@formbricks/ui";
+import { Badge } from "@formbricks/ui/Badge";
+import { Label } from "@formbricks/ui/Label";
+import { RadioGroup, RadioGroupItem } from "@formbricks/ui/RadioGroup";
 import { CheckCircleIcon } from "@heroicons/react/24/solid";
 import * as Collapsible from "@radix-ui/react-collapsible";
 import { cn } from "@formbricks/lib/cn";

apps/web/app/environments/[environmentId]/surveys/[surveyId]/responses/ResponseTimeline.tsx

@@ -2,7 +2,7 @@
 
 import EmptySpaceFiller from "@/components/shared/EmptySpaceFiller";
 import LoadingSpinner from "@/components/shared/LoadingSpinner";
-import { ErrorComponent } from "@formbricks/ui";
+import { ErrorComponent } from "@formbricks/ui/ErrorComponent";
 import { useResponses } from "@/lib/responses/responses";
 import { useSurvey } from "@/lib/surveys/surveys";
 import { useMemo } from "react";

apps/web/app/environments/[environmentId]/surveys/[surveyId]/responses/SingleResponse.tsx

@@ -1,5 +1,5 @@
 import { timeSince } from "@formbricks/lib/time";
-import { PersonAvatar } from "@formbricks/ui";
+import { PersonAvatar } from "@formbricks/ui/Avatars";
 import { CheckCircleIcon } from "@heroicons/react/24/solid";
 import Link from "next/link";
 

apps/web/app/environments/[environmentId]/surveys/[surveyId]/summary/CTASummary.tsx

@@ -1,4 +1,4 @@
-import { ProgressBar } from "@formbricks/ui";
+import { ProgressBar } from "@formbricks/ui/ProgressBar";
 import type { QuestionSummary } from "@formbricks/types/responses";
 import { InboxStackIcon } from "@heroicons/react/24/solid";
 import { useMemo } from "react";

apps/web/app/environments/[environmentId]/surveys/[surveyId]/summary/LinkSurveyModal.tsx

@@ -3,7 +3,7 @@ import { Survey } from "@formbricks/types/surveys";
 import { CheckIcon } from "@heroicons/react/24/outline";
 import { DocumentDuplicateIcon, EyeIcon } from "@heroicons/react/24/solid";
 import toast from "react-hot-toast";
-import { Button } from "@formbricks/ui";
+import { Button } from "@formbricks/ui/Button";
 import { useRef } from "react";
 
 interface LinkSurveyModalProps {