perf: do not import from @calcom/ui barrel file (#20184)

* Icon and IconName

* Button and ButtonGroup

* UserAvatar

* AvatarGroup

* Avatar

* WizardLayout

* Dialogs

* EmptyScreen

* showToast and TextField

* Editor

* Skeleton

* Skeleton

* TopBanner and showToast

* Button again

* more

* perf: Remove app-store reference from @calcom/ui

* more

* Fixing types

* Icon

* Fixed casing

* dropdown

* more

* Select

* more

* Badge

* List

* more

* Divider

* more

* fix

* fix type check

* refactor

* fix

* fix

* fix

* fix

* fix

* fix

* fix

* fix type check

* fix

* fix

* fix

* fix

* more

* more

* more

* more

* add index file to components/command

* fix

* fix

* fix

* fix imports

* fix

* fix

* fix

* fix

* fix

* fix

* fix

* fix build errors

* fix build errors

* fix

---------

Co-authored-by: Keith Williams <keithwillcode@gmail.com>

apps/web/app/(use-page-wrapper)/(main-nav)/ShellMainAppDirBackButton.tsx

@@ -3,7 +3,7 @@
 import { useRouter } from "next/navigation";
 
 import type { LayoutProps } from "@calcom/features/shell/Shell";
-import { Button } from "@calcom/ui";
+import { Button } from "@calcom/ui/components/button";
 
 export const ShellMainAppDirBackButton = ({ backPath }: { backPath: LayoutProps["backPath"] }) => {
   const router = useRouter();

apps/web/app/(use-page-wrapper)/403/page.tsx

@@ -1,7 +1,7 @@
 import { _generateMetadata, getTranslate } from "app/_utils";
 
 import { APP_NAME, WEBAPP_URL } from "@calcom/lib/constants";
-import { Button } from "@calcom/ui";
+import { Button } from "@calcom/ui/components/button";
 
 export const generateMetadata = () =>
   _generateMetadata(

apps/web/app/(use-page-wrapper)/500/copy-button.tsx

@@ -1,7 +1,8 @@
 "use client";
 
 import { useLocale } from "@calcom/lib/hooks/useLocale";
-import { Button, showToast } from "@calcom/ui";
+import { Button } from "@calcom/ui/components/button";
+import { showToast } from "@calcom/ui/components/toast";
 
 export default function CopyButton({ error }: { error: string }) {
   const { t } = useLocale();

apps/web/app/(use-page-wrapper)/500/page.tsx

@@ -1,7 +1,7 @@
 import { _generateMetadata, getTranslate } from "app/_utils";
 
 import { APP_NAME } from "@calcom/lib/constants";
-import { Button } from "@calcom/ui";
+import { Button } from "@calcom/ui/components/button";
 
 import CopyButton from "./copy-button";
 

apps/web/app/(use-page-wrapper)/auth/error/page.tsx

@@ -3,7 +3,8 @@ import { _generateMetadata, getTranslate } from "app/_utils";
 import Link from "next/link";
 import { z } from "zod";
 
-import { Button, Icon } from "@calcom/ui";
+import { Button } from "@calcom/ui/components/button";
+import { Icon } from "@calcom/ui/components/icon";
 
 import AuthContainer from "@components/ui/AuthContainer";
 

apps/web/app/(use-page-wrapper)/availability/troubleshoot/layout.tsx

@@ -2,7 +2,8 @@
 
 import React, { Suspense } from "react";
 
-import { ErrorBoundary, Icon } from "@calcom/ui";
+import { ErrorBoundary } from "@calcom/ui/components/errorBoundary";
+import { Icon } from "@calcom/ui/components/icon";
 
 export default function TroubleshooterLayout({ children }: { children: React.ReactNode }) {
   return (

apps/web/app/(use-page-wrapper)/insights/UpgradeTipWrapper.tsx

@@ -5,7 +5,9 @@ import { useSession } from "next-auth/react";
 import { UpgradeTip } from "@calcom/features/tips";
 import { WEBAPP_URL } from "@calcom/lib/constants";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
-import { Icon, Button, ButtonGroup } from "@calcom/ui";
+import { Button } from "@calcom/ui/components/button";
+import { ButtonGroup } from "@calcom/ui/components/buttonGroup";
+import { Icon } from "@calcom/ui/components/icon";
 
 export default function UpgradeTipWrapper({ children }: { children: React.ReactNode }) {
   const { t } = useLocale();

apps/web/app/(use-page-wrapper)/settings/(admin-layout)/AdminLayoutAppDirClient.tsx

@@ -6,7 +6,7 @@ import React, { useEffect } from "react";
 
 import type Shell from "@calcom/features/shell/Shell";
 import { UserPermissionRole } from "@calcom/prisma/enums";
-import { ErrorBoundary } from "@calcom/ui";
+import { ErrorBoundary } from "@calcom/ui/components/errorBoundary";
 
 export type AdminLayoutProps = {
   children: React.ReactNode;

apps/web/app/(use-page-wrapper)/settings/(admin-layout)/admin/users/page.tsx

@@ -2,7 +2,7 @@ import { _generateMetadata, getTranslate } from "app/_utils";
 
 import UsersListingView from "@calcom/features/ee/users/pages/users-listing-view";
 import SettingsHeader from "@calcom/features/settings/appDir/SettingsHeader";
-import { Button } from "@calcom/ui";
+import { Button } from "@calcom/ui/components/button";
 
 export const generateMetadata = async () =>
   await _generateMetadata(

apps/web/app/(use-page-wrapper)/settings/(settings-layout)/SettingsLayoutAppDirClient.tsx

@@ -18,9 +18,14 @@ import { useLocale } from "@calcom/lib/hooks/useLocale";
 import type { OrganizationRepository } from "@calcom/lib/server/repository/organization";
 import { IdentityProvider, MembershipRole, UserPermissionRole } from "@calcom/prisma/enums";
 import { trpc } from "@calcom/trpc/react";
-import type { VerticalTabItemProps } from "@calcom/ui";
-import { Badge, Button, ErrorBoundary, Icon, Skeleton, VerticalTabItem } from "@calcom/ui";
 import classNames from "@calcom/ui/classNames";
+import { Badge } from "@calcom/ui/components/badge";
+import { Button } from "@calcom/ui/components/button";
+import { ErrorBoundary } from "@calcom/ui/components/errorBoundary";
+import { Icon } from "@calcom/ui/components/icon";
+import type { VerticalTabItemProps } from "@calcom/ui/components/navigation";
+import { VerticalTabItem } from "@calcom/ui/components/navigation";
+import { Skeleton } from "@calcom/ui/components/skeleton";
 
 const getTabs = (orgBranding: OrganizationBranding | null) => {
   const tabs: VerticalTabItemProps[] = [

apps/web/app/(use-page-wrapper)/settings/(settings-layout)/developer/webhooks/new/page.tsx

@@ -4,7 +4,7 @@ import { Suspense } from "react";
 import SettingsHeader from "@calcom/features/settings/appDir/SettingsHeader";
 import { NewWebhookView } from "@calcom/features/webhooks/pages/webhook-new-view";
 import { APP_NAME } from "@calcom/lib/constants";
-import { SkeletonContainer, SkeletonText } from "@calcom/ui";
+import { SkeletonText, SkeletonContainer } from "@calcom/ui/components/skeleton";
 
 export const generateMetadata = async () =>
   await _generateMetadata(

apps/web/app/(use-page-wrapper)/settings/(settings-layout)/my-account/calendars/page.tsx

@@ -2,7 +2,7 @@ import { _generateMetadata } from "app/_utils";
 import { getTranslate } from "app/_utils";
 
 import SettingsHeader from "@calcom/features/settings/appDir/SettingsHeader";
-import { Button } from "@calcom/ui";
+import { Button } from "@calcom/ui/components/button";
 
 import { CalendarListContainer } from "@components/apps/CalendarListContainer";
 

apps/web/app/icons/IconGrid.tsx

@@ -1,7 +1,7 @@
 "use client";
 
-import { Icon } from "@calcom/ui";
-import type { IconName } from "@calcom/ui";
+import { Icon } from "@calcom/ui/components/icon";
+import type { IconName } from "@calcom/ui/components/icon";
 
 export const IconGrid = (props: {
   title: string;

apps/web/app/icons/page.tsx

@@ -2,7 +2,8 @@ import { _generateMetadata, getTranslate } from "app/_utils";
 import { Inter } from "next/font/google";
 import localFont from "next/font/local";
 
-import { type IconName, IconSprites } from "@calcom/ui";
+import { IconSprites } from "@calcom/ui/components/icon";
+import type { IconName } from "@calcom/ui/components/icon";
 
 import { lucideIconList } from "../../../../packages/ui/components/icon/icon-list.mjs";
 import { IconGrid } from "./IconGrid";

apps/web/app/layout.tsx

@@ -5,7 +5,7 @@ import { headers, cookies } from "next/headers";
 import React from "react";
 
 import { getLocale } from "@calcom/features/auth/lib/getLocale";
-import { IconSprites } from "@calcom/ui";
+import { IconSprites } from "@calcom/ui/components/icon";
 import { NotificationSoundHandler } from "@calcom/web/components/notification-sound-handler";
 
 import { buildLegacyCtx } from "@lib/buildLegacyCtx";

apps/web/app/not-found.tsx

@@ -8,7 +8,7 @@ import {
   subdomainSuffix,
 } from "@calcom/features/ee/organizations/lib/orgDomains";
 import { DOCS_URL, IS_CALCOM, WEBSITE_URL } from "@calcom/lib/constants";
-import { Icon } from "@calcom/ui";
+import { Icon } from "@calcom/ui/components/icon";
 
 import PageWrapper from "@components/PageWrapperAppDir";
 

apps/web/components/AddToHomescreen.tsx

@@ -1,7 +1,7 @@
 import { useState } from "react";
 
 import { useLocale } from "@calcom/lib/hooks/useLocale";
-import { Icon } from "@calcom/ui";
+import { Icon } from "@calcom/ui/components/icon";
 
 export default function AddToHomescreen() {
   const { t } = useLocale();

apps/web/components/EnterprisePage.tsx

@@ -3,7 +3,9 @@
 import Shell from "@calcom/features/shell/Shell";
 import { UpgradeTip } from "@calcom/features/tips";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
-import { Button, ButtonGroup, Icon } from "@calcom/ui";
+import { Button } from "@calcom/ui/components/button";
+import { ButtonGroup } from "@calcom/ui/components/buttonGroup";
+import { Icon } from "@calcom/ui/components/icon";
 
 export default function EnterprisePage() {
   const { t } = useLocale();

apps/web/components/Loader.tsx

@@ -1,4 +1,4 @@
 /**
  * @deprecated Use custom Skeletons instead
  **/
-export { Loader as default } from "@calcom/ui";
+export { Loader as default } from "@calcom/ui/components/skeleton";

apps/web/components/PageWrapper.tsx

@@ -10,7 +10,7 @@ import "@calcom/embed-core/src/embed-iframe";
 import LicenseRequired from "@calcom/features/ee/common/components/LicenseRequired";
 import { IS_CALCOM, WEBAPP_URL } from "@calcom/lib/constants";
 import { buildCanonical } from "@calcom/lib/next-seo.config";
-import { IconSprites } from "@calcom/ui";
+import { IconSprites } from "@calcom/ui/components/icon";
 
 import type { AppProps } from "@lib/app-providers";
 import AppProviders from "@lib/app-providers";

apps/web/components/apps/AdditionalCalendarSelector.tsx

@@ -4,13 +4,13 @@ import { InstallAppButton } from "@calcom/app-store/components";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { trpc } from "@calcom/trpc/react";
 import {
-  Button,
   Dropdown,
   DropdownItem,
   DropdownMenuContent,
   DropdownMenuItem,
   DropdownMenuTrigger,
-} from "@calcom/ui";
+} from "@calcom/ui/components/dropdown";
+import { Button } from "@calcom/ui/components/button";
 
 interface AdditionalCalendarSelectorProps {
   isPending?: boolean;

apps/web/components/apps/AppPage.tsx

@@ -14,8 +14,12 @@ import { useCompatSearchParams } from "@calcom/lib/hooks/useCompatSearchParams";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { trpc } from "@calcom/trpc/react";
 import type { App as AppType } from "@calcom/types/App";
-import { Badge, Button, Icon, SkeletonButton, SkeletonText, showToast } from "@calcom/ui";
+import { Icon } from "@calcom/ui/components/icon";
+import { showToast } from "@calcom/ui/components/toast";
+import { Badge } from "@calcom/ui/components/badge";
+import { Button } from "@calcom/ui/components/button";
 import classNames from "@calcom/ui/classNames";
+import { SkeletonButton, SkeletonText } from "@calcom/ui/components/skeleton";
 
 import { InstallAppButtonChild } from "./InstallAppButtonChild";
 import { MultiDisconnectIntegration } from "./MultiDisconnectIntegration";

apps/web/components/apps/InstallAppButtonChild.tsx

@@ -1,8 +1,8 @@
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import type { RouterOutputs } from "@calcom/trpc/react";
 import type { AppFrontendPayload } from "@calcom/types/App";
-import type { ButtonProps } from "@calcom/ui";
-import { Button } from "@calcom/ui";
+import type { ButtonProps } from "@calcom/ui/components/button";
+import { Button } from "@calcom/ui/components/button";
 
 export const InstallAppButtonChild = ({
   multiInstall,

apps/web/components/apps/MultiDisconnectIntegration.tsx

@@ -3,18 +3,18 @@ import { useState } from "react";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { trpc } from "@calcom/trpc/react";
 import type { AppRouter } from "@calcom/trpc/types/server/routers/_app";
+import { Button } from "@calcom/ui/components/button";
+import { ConfirmationDialogContent } from "@calcom/ui/components/dialog";
+import { Dialog } from "@calcom/ui/components/dialog";
 import {
-  Button,
   Dropdown,
-  DropdownMenuTrigger,
+  DropdownItem,
   DropdownMenuContent,
   DropdownMenuLabel,
   DropdownMenuItem,
-  DropdownItem,
-  Dialog,
-  ConfirmationDialogContent,
-  showToast,
-} from "@calcom/ui";
+  DropdownMenuTrigger,
+} from "@calcom/ui/components/dropdown";
+import { showToast } from "@calcom/ui/components/toast";
 
 import type { inferRouterOutputs } from "@trpc/server";
 

apps/web/components/apps/installation/AccountsStepCard.tsx

@@ -4,9 +4,9 @@ import React, { useState } from "react";
 import { getPlaceholderAvatar } from "@calcom/lib/defaultAvatarImage";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import type { User } from "@calcom/prisma/client";
-import { StepCard } from "@calcom/ui";
-import { Avatar } from "@calcom/ui";
 import classNames from "@calcom/ui/classNames";
+import { Avatar } from "@calcom/ui/components/avatar";
+import { StepCard } from "@calcom/ui/components/card";
 
 import type { TTeams } from "~/apps/installation/[[...step]]/step-view";
 

apps/web/components/apps/installation/ConfigureStepCard.tsx

@@ -12,7 +12,10 @@ import { useLocale } from "@calcom/lib/hooks/useLocale";
 import type { LocationObject } from "@calcom/lib/location";
 import type { AppCategories } from "@calcom/prisma/enums";
 import type { EventTypeMetaDataSchema, eventTypeBookingFields } from "@calcom/prisma/zod-utils";
-import { Button, Form, Icon, Avatar } from "@calcom/ui";
+import { Avatar } from "@calcom/ui/components/avatar";
+import { Button } from "@calcom/ui/components/button";
+import { Form } from "@calcom/ui/components/form";
+import { Icon } from "@calcom/ui/components/icon";
 
 import EventTypeAppSettingsWrapper from "@components/apps/installation/EventTypeAppSettingsWrapper";
 import EventTypeConferencingAppSettings from "@components/apps/installation/EventTypeConferencingAppSettings";

apps/web/components/apps/installation/EventTypeConferencingAppSettings.tsx

@@ -10,8 +10,8 @@ import type { SingleValueLocationOption } from "@calcom/features/form/components
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { SchedulingType } from "@calcom/prisma/client";
 import { trpc } from "@calcom/trpc/react";
-import { SkeletonContainer, SkeletonText } from "@calcom/ui";
-import { Skeleton, Label } from "@calcom/ui";
+import { Label } from "@calcom/ui/components/form";
+import { Skeleton, SkeletonText, SkeletonContainer } from "@calcom/ui/components/skeleton";
 
 import { QueryCell } from "@lib/QueryCell";
 

apps/web/components/apps/installation/EventTypesStepCard.tsx

@@ -6,7 +6,10 @@ import { useFieldArray, useFormContext } from "react-hook-form";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { markdownToSafeHTML } from "@calcom/lib/markdownToSafeHTML";
 import { EventTypeMetaDataSchema } from "@calcom/prisma/zod-utils";
-import { ScrollableArea, Badge, Button, Avatar } from "@calcom/ui";
+import { Avatar } from "@calcom/ui/components/avatar";
+import { Badge } from "@calcom/ui/components/badge";
+import { Button } from "@calcom/ui/components/button";
+import { ScrollableArea } from "@calcom/ui/components/scrollable";
 
 import type { TEventType, TEventTypesForm, TEventTypeGroup } from "~/apps/installation/[[...step]]/step-view";
 

apps/web/components/apps/layouts/AppsLayout.tsx

@@ -5,7 +5,7 @@ import React from "react";
 
 import Shell from "@calcom/features/shell/Shell";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
-import { EmptyScreen } from "@calcom/ui";
+import { EmptyScreen } from "@calcom/ui/components/empty-screen";
 
 type AppsLayoutProps = {
   children: React.ReactNode;

apps/web/components/auth/BackupCode.tsx

@@ -2,7 +2,7 @@ import React from "react";
 import { useFormContext } from "react-hook-form";
 
 import { useLocale } from "@calcom/lib/hooks/useLocale";
-import { Label, TextField } from "@calcom/ui";
+import { Label, TextField } from "@calcom/ui/components/form";
 
 export default function TwoFactor({ center = true }) {
   const { t } = useLocale();

apps/web/components/auth/TwoFactor.tsx

@@ -3,7 +3,7 @@ import useDigitInput from "react-digit-input";
 import { useFormContext } from "react-hook-form";
 
 import { useLocale } from "@calcom/lib/hooks/useLocale";
-import { Label, Input } from "@calcom/ui";
+import { Input, Label } from "@calcom/ui/components/form";
 
 export default function TwoFactor({ center = true, autoFocus = true }) {
   const [value, onChange] = useState("");

apps/web/components/booking/BookingListItem.tsx

@@ -21,14 +21,11 @@ import { bookingMetadataSchema } from "@calcom/prisma/zod-utils";
 import type { RouterInputs, RouterOutputs } from "@calcom/trpc/react";
 import { trpc } from "@calcom/trpc/react";
 import type { Ensure } from "@calcom/types/utils";
-import type { ActionType } from "@calcom/ui";
+import classNames from "@calcom/ui/classNames";
+import { Badge } from "@calcom/ui/components/badge";
+import { Button } from "@calcom/ui/components/button";
+import { Dialog, DialogContent, DialogFooter, DialogClose } from "@calcom/ui/components/dialog";
 import {
-  Badge,
-  Button,
-  Dialog,
-  DialogClose,
-  DialogContent,
-  DialogFooter,
   Dropdown,
   DropdownItem,
   DropdownMenuCheckboxItem,
@@ -38,14 +35,14 @@ import {
   DropdownMenuSeparator,
   DropdownMenuTrigger,
   DropdownMenuPortal,
-  Icon,
-  MeetingTimeInTimezones,
-  showToast,
-  TableActions,
-  TextAreaField,
-  Tooltip,
-} from "@calcom/ui";
-import classNames from "@calcom/ui/classNames";
+} from "@calcom/ui/components/dropdown";
+import { TextAreaField } from "@calcom/ui/components/form";
+import { Icon } from "@calcom/ui/components/icon";
+import { MeetingTimeInTimezones } from "@calcom/ui/components/popover";
+import type { ActionType } from "@calcom/ui/components/table";
+import { TableActions } from "@calcom/ui/components/table";
+import { showToast } from "@calcom/ui/components/toast";
+import { Tooltip } from "@calcom/ui/components/tooltip";
 
 import assignmentReasonBadgeTitleMap from "@lib/booking/assignmentReasonBadgeTitleMap";
 

apps/web/components/booking/CancelBooking.tsx

@@ -5,7 +5,9 @@ import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { useRefreshData } from "@calcom/lib/hooks/useRefreshData";
 import { collectPageParameters, telemetryEventTypes, useTelemetry } from "@calcom/lib/telemetry";
 import type { RecurringEvent } from "@calcom/types/Calendar";
-import { Button, Icon, Label, TextArea, Select } from "@calcom/ui";
+import { Button } from "@calcom/ui/components/button";
+import { Label, Select, TextArea } from "@calcom/ui/components/form";
+import { Icon } from "@calcom/ui/components/icon";
 
 interface InternalNotePresetsSelectProps {
   internalNotePresets: { id: number; name: string }[];

apps/web/components/booking/SkeletonLoader.tsx

@@ -1,6 +1,6 @@
 import React from "react";
 
-import { SkeletonText } from "@calcom/ui";
+import { SkeletonText } from "@calcom/ui/components/skeleton";
 
 function SkeletonLoader() {
   return (

apps/web/components/dialog/AddGuestsDialog.tsx

@@ -4,16 +4,11 @@ import { z } from "zod";
 
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { trpc } from "@calcom/trpc/react";
-import {
-  Button,
-  Dialog,
-  DialogContent,
-  DialogFooter,
-  DialogHeader,
-  MultiEmail,
-  Icon,
-  showToast,
-} from "@calcom/ui";
+import { MultiEmail } from "@calcom/ui/components/address";
+import { Button } from "@calcom/ui/components/button";
+import { Dialog, DialogContent, DialogFooter, DialogHeader } from "@calcom/ui/components/dialog";
+import { Icon } from "@calcom/ui/components/icon";
+import { showToast } from "@calcom/ui/components/toast";
 
 interface IAddGuestsDialog {
   isOpenDialog: boolean;

apps/web/components/dialog/ChargeCardDialog.tsx

@@ -3,16 +3,10 @@ import { useState } from "react";
 
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { trpc } from "@calcom/trpc/react";
-import {
-  Button,
-  Dialog,
-  DialogClose,
-  DialogContent,
-  DialogFooter,
-  DialogHeader,
-  Icon,
-  showToast,
-} from "@calcom/ui";
+import { Button } from "@calcom/ui/components/button";
+import { Dialog, DialogContent, DialogFooter, DialogHeader, DialogClose } from "@calcom/ui/components/dialog";
+import { Icon } from "@calcom/ui/components/icon";
+import { showToast } from "@calcom/ui/components/toast";
 
 interface IRescheduleDialog {
   isOpenDialog: boolean;

apps/web/components/dialog/EditLocationDialog.tsx

@@ -19,7 +19,10 @@ import type { LocationOption } from "@calcom/features/form/components/LocationSe
 import LocationSelect from "@calcom/features/form/components/LocationSelect";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { trpc } from "@calcom/trpc/react";
-import { Button, Icon, Input, Dialog, DialogContent, DialogFooter, Form } from "@calcom/ui";
+import { Button } from "@calcom/ui/components/button";
+import { Dialog, DialogContent, DialogFooter } from "@calcom/ui/components/dialog";
+import { Form, Input } from "@calcom/ui/components/form";
+import { Icon } from "@calcom/ui/components/icon";
 
 import { QueryCell } from "../../lib/QueryCell";
 

apps/web/components/dialog/ReassignDialog.tsx

@@ -10,22 +10,19 @@ import { useDebounce } from "@calcom/lib/hooks/useDebounce";
 import { useInViewObserver } from "@calcom/lib/hooks/useInViewObserver";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { trpc } from "@calcom/trpc/react";
+import classNames from "@calcom/ui/classNames";
+import { Button } from "@calcom/ui/components/button";
 import {
-  Button,
-  Form,
-  Label,
   Dialog,
-  DialogClose,
   DialogContent,
   DialogFooter,
+  DialogClose,
   ConfirmationDialogContent,
-  showToast,
-  Input,
-  Icon,
-  RadioGroup as RadioArea,
-  TextAreaField,
-} from "@calcom/ui";
-import classNames from "@calcom/ui/classNames";
+} from "@calcom/ui/components/dialog";
+import { TextAreaField, Form, Label, Input } from "@calcom/ui/components/form";
+import { Icon } from "@calcom/ui/components/icon";
+import { RadioAreaGroup as RadioArea } from "@calcom/ui/components/radio";
+import { showToast } from "@calcom/ui/components/toast";
 
 enum ReassignType {
   ROUND_ROBIN = "round_robin",

apps/web/components/dialog/RerouteDialog.tsx

@@ -24,9 +24,10 @@ import type { bookingMetadataSchema } from "@calcom/prisma/zod-utils";
 import type { RouterOutputs } from "@calcom/trpc/react";
 import { trpc } from "@calcom/trpc/react";
 import type { Ensure } from "@calcom/types/utils";
-import { Dialog, DialogContent, DialogFooter, DialogHeader } from "@calcom/ui";
-import { Button, Tooltip } from "@calcom/ui";
-import { showToast } from "@calcom/ui";
+import { Tooltip } from "@calcom/ui/components/tooltip";
+import { showToast } from "@calcom/ui/components/toast";
+import { Button } from "@calcom/ui/components/button";
+import { Dialog, DialogContent, DialogFooter, DialogHeader } from "@calcom/ui/components/dialog";
 
 const enum ReroutingStatusEnum {
   REROUTING_NOT_INITIATED = "not_initiated",

apps/web/components/dialog/RescheduleDialog.tsx

@@ -3,16 +3,11 @@ import { useState } from "react";
 
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { trpc } from "@calcom/trpc/react";
-import {
-  Button,
-  Dialog,
-  DialogContent,
-  DialogFooter,
-  DialogHeader,
-  Icon,
-  showToast,
-  TextArea,
-} from "@calcom/ui";
+import { Icon } from "@calcom/ui/components/icon";
+import { TextArea } from "@calcom/ui/components/form";
+import { Button } from "@calcom/ui/components/button";
+import { Dialog, DialogContent, DialogFooter, DialogHeader } from "@calcom/ui/components/dialog";
+import { showToast } from "@calcom/ui/components/toast";
 
 interface IRescheduleDialog {
   isOpenDialog: boolean;

apps/web/components/dialog/__tests__/RerouteDialog.test.tsx

@@ -1,3 +1,4 @@
+import { TooltipProvider } from "@radix-ui/react-tooltip";
 import { act, fireEvent, render, screen } from "@testing-library/react";
 import { vi } from "vitest";
 
@@ -321,7 +322,11 @@ describe("RerouteDialog", () => {
   });
 
   test("renders the dialog when open", () => {
-    render(<RerouteDialog isOpenDialog={true} setIsOpenDialog={mockSetIsOpenDialog} booking={mockBooking} />);
+    render(
+      <TooltipProvider>
+        <RerouteDialog isOpenDialog={true} setIsOpenDialog={mockSetIsOpenDialog} booking={mockBooking} />
+      </TooltipProvider>
+    );
 
     expect(screen.getByText("reroute_booking")).toBeInTheDocument();
     expect(screen.getByText("reroute_booking_description")).toBeInTheDocument();
@@ -329,14 +334,20 @@ describe("RerouteDialog", () => {
 
   test("doesn't render the dialog when closed", () => {
     render(
-      <RerouteDialog isOpenDialog={false} setIsOpenDialog={mockSetIsOpenDialog} booking={mockBooking} />
+      <TooltipProvider>
+        <RerouteDialog isOpenDialog={false} setIsOpenDialog={mockSetIsOpenDialog} booking={mockBooking} />
+      </TooltipProvider>
     );
 
     expect(screen.queryByText("reroute_booking")).not.toBeInTheDocument();
   });
 
   test("displays current routing status", async () => {
-    render(<RerouteDialog isOpenDialog={true} setIsOpenDialog={mockSetIsOpenDialog} booking={mockBooking} />);
+    render(
+      <TooltipProvider>
+        <RerouteDialog isOpenDialog={true} setIsOpenDialog={mockSetIsOpenDialog} booking={mockBooking} />
+      </TooltipProvider>
+    );
     expect(screen.getByText("current_routing_status")).toBeInTheDocument();
 
     expectEventTypeInfoInCurrentRouting({
@@ -353,17 +364,29 @@ describe("RerouteDialog", () => {
   });
 
   test("verify_new_route button is enabled even when form fields are not filled", async () => {
-    render(<RerouteDialog isOpenDialog={true} setIsOpenDialog={mockSetIsOpenDialog} booking={mockBooking} />);
+    render(
+      <TooltipProvider>
+        <RerouteDialog isOpenDialog={true} setIsOpenDialog={mockSetIsOpenDialog} booking={mockBooking} />
+      </TooltipProvider>
+    );
     await expect(screen.getByText("verify_new_route")).toBeEnabled();
   });
 
   test("disabledFields are passed to FormInputFields with value ['email'] - email field is disabled", async () => {
-    render(<RerouteDialog isOpenDialog={true} setIsOpenDialog={mockSetIsOpenDialog} booking={mockBooking} />);
+    render(
+      <TooltipProvider>
+        <RerouteDialog isOpenDialog={true} setIsOpenDialog={mockSetIsOpenDialog} booking={mockBooking} />
+      </TooltipProvider>
+    );
     expect(screen.getByTestId("mock-form-field-disabled-fields-identifiers")).toHaveTextContent(/^email$/);
   });
 
   test("Expect form fields and name to be rendered", async () => {
-    render(<RerouteDialog isOpenDialog={true} setIsOpenDialog={mockSetIsOpenDialog} booking={mockBooking} />);
+    render(
+      <TooltipProvider>
+        <RerouteDialog isOpenDialog={true} setIsOpenDialog={mockSetIsOpenDialog} booking={mockBooking} />
+      </TooltipProvider>
+    );
     expect(screen.getByText("Test Form")).toBeInTheDocument();
     expect(screen.getByTestId("mock-form-field-company-size-label")).toHaveTextContent("Company Size");
     expect(screen.getByTestId("mock-form-field-company-size-value")).toHaveTextContent("small");
@@ -372,7 +395,11 @@ describe("RerouteDialog", () => {
   });
 
   test("cancel button closes the dialog", async () => {
-    render(<RerouteDialog isOpenDialog={true} setIsOpenDialog={mockSetIsOpenDialog} booking={mockBooking} />);
+    render(
+      <TooltipProvider>
+        <RerouteDialog isOpenDialog={true} setIsOpenDialog={mockSetIsOpenDialog} booking={mockBooking} />
+      </TooltipProvider>
+    );
 
     expect(screen.getByText("cancel")).toBeInTheDocument();
 
@@ -383,7 +410,9 @@ describe("RerouteDialog", () => {
   describe("New Routing tests", () => {
     test("when verify_new_route is clicked, the form is submitted", async () => {
       render(
-        <RerouteDialog isOpenDialog={true} setIsOpenDialog={mockSetIsOpenDialog} booking={mockBooking} />
+        <TooltipProvider>
+          <RerouteDialog isOpenDialog={true} setIsOpenDialog={mockSetIsOpenDialog} booking={mockBooking} />
+        </TooltipProvider>
       );
       fireEvent.click(screen.getByText("verify_new_route"));
 
@@ -402,7 +431,9 @@ describe("RerouteDialog", () => {
     describe("New tab rescheduling", () => {
       test("new tab is closed when new booking is rerouted", async () => {
         render(
-          <RerouteDialog isOpenDialog={true} setIsOpenDialog={mockSetIsOpenDialog} booking={mockBooking} />
+          <TooltipProvider>
+            <RerouteDialog isOpenDialog={true} setIsOpenDialog={mockSetIsOpenDialog} booking={mockBooking} />
+          </TooltipProvider>
         );
         clickVerifyNewRouteButton();
         clickRescheduleToTheNewEventWithDifferentTimeslotButton();
@@ -441,7 +472,9 @@ describe("RerouteDialog", () => {
 
       test("Rescheduling with same timeslot works", async () => {
         render(
-          <RerouteDialog isOpenDialog={true} setIsOpenDialog={mockSetIsOpenDialog} booking={mockBooking} />
+          <TooltipProvider>
+            <RerouteDialog isOpenDialog={true} setIsOpenDialog={mockSetIsOpenDialog} booking={mockBooking} />
+          </TooltipProvider>
         );
         clickVerifyNewRouteButton();
         clickRescheduleWithSameTimeslotOfChosenEventButton();

apps/web/components/error/error-page.tsx

@@ -3,7 +3,7 @@
 import React from "react";
 
 import { HttpError } from "@calcom/lib/http-error";
-import { Button } from "@calcom/ui";
+import { Button } from "@calcom/ui/components/button";
 
 type Props = {
   statusCode?: number | null;

apps/web/components/getting-started/components/AppConnectionItem.tsx

@@ -7,7 +7,10 @@ import { WEBAPP_URL } from "@calcom/lib/constants";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { trpc } from "@calcom/trpc/react";
 import type { App } from "@calcom/types/App";
-import { Badge, Button, Icon, showToast } from "@calcom/ui";
+import { Icon } from "@calcom/ui/components/icon";
+import { showToast } from "@calcom/ui/components/toast";
+import { Badge } from "@calcom/ui/components/badge";
+import { Button } from "@calcom/ui/components/button";
 
 interface IAppConnectionItem {
   title: string;

apps/web/components/getting-started/components/StepConnectionLoader.tsx

@@ -1,4 +1,4 @@
-import { SkeletonAvatar, SkeletonText, SkeletonButton } from "@calcom/ui";
+import { SkeletonAvatar, SkeletonText, SkeletonButton } from "@calcom/ui/components/skeleton";
 
 export function StepConnectionLoader() {
   return (

apps/web/components/getting-started/steps-views/ConnectCalendars.tsx

@@ -1,6 +1,7 @@
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { trpc } from "@calcom/trpc/react";
-import { Icon, List } from "@calcom/ui";
+import { Icon } from "@calcom/ui/components/icon";
+import { List } from "@calcom/ui/components/list";
 import classNames from "@calcom/ui/classNames";
 
 import { AppConnectionItem } from "../components/AppConnectionItem";

apps/web/components/getting-started/steps-views/ConnectedVideoStep.tsx

@@ -2,7 +2,8 @@ import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { userMetadata } from "@calcom/prisma/zod-utils";
 import { trpc } from "@calcom/trpc/react";
 import useMeQuery from "@calcom/trpc/react/hooks/useMeQuery";
-import { Icon, List } from "@calcom/ui";
+import { Icon } from "@calcom/ui/components/icon";
+import { List } from "@calcom/ui/components/list";
 import classNames from "@calcom/ui/classNames";
 
 import { AppConnectionItem } from "../components/AppConnectionItem";

apps/web/components/getting-started/steps-views/SetupAvailability.tsx

@@ -5,7 +5,8 @@ import { DEFAULT_SCHEDULE } from "@calcom/lib/availability";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { trpc } from "@calcom/trpc/react";
 import type { AppRouter } from "@calcom/trpc/types/server/routers/_app";
-import { Button, Form } from "@calcom/ui";
+import { Form } from "@calcom/ui/components/form";
+import { Button } from "@calcom/ui/components/button";
 
 import type { TRPCClientErrorLike } from "@trpc/client";
 

apps/web/components/getting-started/steps-views/UserProfile.tsx

@@ -7,8 +7,12 @@ import { md } from "@calcom/lib/markdownIt";
 import { telemetryEventTypes, useTelemetry } from "@calcom/lib/telemetry";
 import turndown from "@calcom/lib/turndownService";
 import { trpc } from "@calcom/trpc/react";
-import { Button, Editor, ImageUploader, Label, showToast } from "@calcom/ui";
-import { UserAvatar } from "@calcom/ui";
+import { UserAvatar } from "@calcom/ui/components/avatar";
+import { Button } from "@calcom/ui/components/button";
+import { Editor } from "@calcom/ui/components/editor";
+import { Label } from "@calcom/ui/components/form";
+import { ImageUploader } from "@calcom/ui/components/image-uploader";
+import { showToast } from "@calcom/ui/components/toast";
 
 type FormData = {
   bio: string;

apps/web/components/getting-started/steps-views/UserSettings.tsx

@@ -10,7 +10,8 @@ import { FULL_NAME_LENGTH_MAX_LIMIT } from "@calcom/lib/constants";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { telemetryEventTypes, useTelemetry } from "@calcom/lib/telemetry";
 import { trpc } from "@calcom/trpc/react";
-import { Button, Input } from "@calcom/ui";
+import { Input } from "@calcom/ui/components/form";
+import { Button } from "@calcom/ui/components/button";
 
 import { UsernameAvailabilityField } from "@components/ui/UsernameAvailability";
 

apps/web/components/integrations/SubHeadingTitleWithConnections.tsx

@@ -1,6 +1,6 @@
 import type { ReactNode } from "react";
 
-import { Badge } from "@calcom/ui";
+import { Badge } from "@calcom/ui/components/badge";
 
 function pluralize(opts: { num: number; plural: string; singular: string }) {
   if (opts.num === 0) {

apps/web/components/security/DisableTwoFactorModal.tsx

@@ -3,7 +3,9 @@ import { useForm } from "react-hook-form";
 
 import { ErrorCode } from "@calcom/features/auth/lib/ErrorCode";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
-import { Button, Dialog, DialogContent, Form, PasswordField } from "@calcom/ui";
+import { Button } from "@calcom/ui/components/button";
+import { Dialog, DialogContent } from "@calcom/ui/components/dialog";
+import { Form, PasswordField } from "@calcom/ui/components/form";
 
 import TwoFactor from "@components/auth/TwoFactor";
 

apps/web/components/security/DisableUserImpersonation.tsx

@@ -1,6 +1,8 @@
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { trpc } from "@calcom/trpc/react";
-import { Badge, Button, showToast } from "@calcom/ui";
+import { showToast } from "@calcom/ui/components/toast";
+import { Badge } from "@calcom/ui/components/badge";
+import { Button } from "@calcom/ui/components/button";
 
 const DisableUserImpersonation = ({ disableImpersonation }: { disableImpersonation: boolean }) => {
   const utils = trpc.useUtils();

apps/web/components/security/EnableTwoFactorModal.tsx

@@ -5,7 +5,9 @@ import { useForm } from "react-hook-form";
 import { ErrorCode } from "@calcom/features/auth/lib/ErrorCode";
 import { useCallbackRef } from "@calcom/lib/hooks/useCallbackRef";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
-import { Button, Dialog, DialogContent, Form } from "@calcom/ui";
+import { Form } from "@calcom/ui/components/form";
+import { Button } from "@calcom/ui/components/button";
+import { Dialog, DialogContent } from "@calcom/ui/components/dialog";
 
 import TwoFactor from "@components/auth/TwoFactor";
 

apps/web/components/security/TwoFactorAuthSection.tsx

@@ -1,7 +1,8 @@
 import { useState } from "react";
 
 import { useLocale } from "@calcom/lib/hooks/useLocale";
-import { Badge, Button } from "@calcom/ui";
+import { Badge } from "@calcom/ui/components/badge";
+import { Button } from "@calcom/ui/components/button";
 
 import DisableTwoFactorModal from "./DisableTwoFactorModal";
 import EnableTwoFactorModal from "./EnableTwoFactorModal";

apps/web/components/security/TwoFactorModalHeader.tsx

@@ -1,4 +1,4 @@
-import { Icon } from "@calcom/ui";
+import { Icon } from "@calcom/ui/components/icon";
 
 const TwoFactorModalHeader = ({ title, description }: { title: string; description: string }) => {
   return (

apps/web/components/settings/CustomEmailTextField.tsx

@@ -2,16 +2,16 @@ import { useState } from "react";
 import type { UseFormReturn } from "react-hook-form";
 
 import { useLocale } from "@calcom/lib/hooks/useLocale";
+import { Badge } from "@calcom/ui/components/badge";
+import { Button } from "@calcom/ui/components/button";
 import {
-  Badge,
   Dropdown,
   DropdownItem,
   DropdownMenuContent,
   DropdownMenuItem,
   DropdownMenuTrigger,
-  Button,
-  InputError,
-} from "@calcom/ui";
+} from "@calcom/ui/components/dropdown";
+import { InputError } from "@calcom/ui/components/form";
 
 import type { FormValues } from "~/settings/my-account/profile-view";
 

apps/web/components/settings/DisableTwoFactorModal.tsx

@@ -3,7 +3,9 @@ import { useForm } from "react-hook-form";
 
 import { ErrorCode } from "@calcom/features/auth/lib/ErrorCode";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
-import { Button, Dialog, DialogContent, DialogFooter, Form, PasswordField } from "@calcom/ui";
+import { Button } from "@calcom/ui/components/button";
+import { Dialog, DialogContent, DialogFooter } from "@calcom/ui/components/dialog";
+import { Form, PasswordField } from "@calcom/ui/components/form";
 
 import BackupCode from "@components/auth/BackupCode";
 import TwoFactor from "@components/auth/TwoFactor";

apps/web/components/settings/EnableTwoFactorModal.tsx

@@ -5,7 +5,10 @@ import { useForm } from "react-hook-form";
 import { ErrorCode } from "@calcom/features/auth/lib/ErrorCode";
 import { useCallbackRef } from "@calcom/lib/hooks/useCallbackRef";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
-import { Button, Dialog, DialogContent, DialogFooter, Form, PasswordField, showToast } from "@calcom/ui";
+import { Button } from "@calcom/ui/components/button";
+import { Dialog, DialogContent, DialogFooter } from "@calcom/ui/components/dialog";
+import { Form, PasswordField } from "@calcom/ui/components/form";
+import { showToast } from "@calcom/ui/components/toast";
 
 import TwoFactor from "@components/auth/TwoFactor";
 

apps/web/components/settings/SecondaryEmailConfirmModal.tsx

@@ -1,7 +1,7 @@
 import { Trans } from "react-i18next";
 
 import { useLocale } from "@calcom/lib/hooks/useLocale";
-import { Dialog, DialogClose, DialogContent, DialogFooter } from "@calcom/ui";
+import { Dialog, DialogContent, DialogFooter, DialogClose } from "@calcom/ui/components/dialog";
 
 interface SecondaryEmailConfirmModalProps {
   email: string;

apps/web/components/settings/SecondaryEmailModal.tsx

@@ -5,16 +5,9 @@ import { z } from "zod";
 
 import { emailSchema } from "@calcom/lib/emailSchema";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
-import {
-  Dialog,
-  DialogContent,
-  DialogFooter,
-  DialogClose,
-  Button,
-  TextField,
-  Form,
-  InputError,
-} from "@calcom/ui";
+import { Button } from "@calcom/ui/components/button";
+import { Dialog, DialogContent, DialogFooter, DialogClose } from "@calcom/ui/components/dialog";
+import { Form, TextField, InputError } from "@calcom/ui/components/form";
 
 interface SecondaryEmailModalProps {
   isLoading: boolean;

apps/web/components/settings/TravelScheduleModal.tsx

@@ -5,17 +5,9 @@ import dayjs from "@calcom/dayjs";
 import { useTimePreferences } from "@calcom/features/bookings/lib/timePreferences";
 import { TimezoneSelect } from "@calcom/features/components/timezone-select";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
-import {
-  Dialog,
-  DialogContent,
-  DialogFooter,
-  DialogClose,
-  Button,
-  Label,
-  DateRangePicker,
-  SettingsToggle,
-  DatePicker,
-} from "@calcom/ui";
+import { Button } from "@calcom/ui/components/button";
+import { Dialog, DialogContent, DialogFooter, DialogClose } from "@calcom/ui/components/dialog";
+import { Label, SettingsToggle, DateRangePicker, DatePicker } from "@calcom/ui/components/form";
 
 import type { FormValues } from "~/settings/my-account/general-view";
 

apps/web/components/settings/platform/dashboard/HelpCards.tsx

@@ -1,4 +1,5 @@
-import { Card, Icon } from "@calcom/ui";
+import { Card } from "@calcom/ui/components/card";
+import { Icon } from "@calcom/ui/components/icon";
 
 import { helpCards } from "@lib/settings/platform/utils";
 

apps/web/components/settings/platform/dashboard/NoPlatformPlan.tsx

@@ -1,5 +1,6 @@
 import { useLocale } from "@calcom/lib/hooks/useLocale";
-import { EmptyScreen, Button } from "@calcom/ui";
+import { Button } from "@calcom/ui/components/button";
+import { EmptyScreen } from "@calcom/ui/components/empty-screen";
 
 export default function NoPlatformPlan() {
   const { t } = useLocale();

apps/web/components/settings/platform/dashboard/oauth-clients-list/index.tsx

@@ -1,7 +1,8 @@
 import { useRouter } from "next/navigation";
 
 import type { PlatformOAuthClientDto } from "@calcom/platform-types";
-import { EmptyScreen, Button } from "@calcom/ui";
+import { Button } from "@calcom/ui/components/button";
+import { EmptyScreen } from "@calcom/ui/components/empty-screen";
 
 import { OAuthClientCard } from "@components/settings/platform/oauth-clients/OAuthClientCard";
 

apps/web/components/settings/platform/oauth-clients/OAuthClientCard.tsx

@@ -4,7 +4,9 @@ import React from "react";
 import type { PERMISSION_MAP } from "@calcom/platform-constants";
 import { PERMISSIONS_GROUPED_MAP } from "@calcom/platform-constants";
 import type { Avatar } from "@calcom/prisma/client";
-import { Button, Icon, showToast } from "@calcom/ui";
+import { Icon } from "@calcom/ui/components/icon";
+import { showToast } from "@calcom/ui/components/toast";
+import { Button } from "@calcom/ui/components/button";
 import classNames from "@calcom/ui/classNames";
 
 type OAuthClientCardProps = {

apps/web/components/settings/platform/oauth-clients/oauth-client-form/index.tsx

@@ -3,7 +3,10 @@ import { useForm, useFieldArray } from "react-hook-form";
 
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { PERMISSIONS_GROUPED_MAP } from "@calcom/platform-constants/permissions";
-import { TextField, Tooltip, Button, Label, Icon } from "@calcom/ui";
+import { Button } from "@calcom/ui/components/button";
+import { Label, TextField } from "@calcom/ui/components/form";
+import { Icon } from "@calcom/ui/components/icon";
+import { Tooltip } from "@calcom/ui/components/tooltip";
 
 type OAuthClientFormProps = {
   defaultValues?: Partial<FormValues>;

apps/web/components/settings/platform/pricing/billing-card/index.tsx

@@ -1,4 +1,4 @@
-import { Button } from "@calcom/ui";
+import { Button } from "@calcom/ui/components/button";
 
 type PlatformBillingCardProps = {
   plan: string;

apps/web/components/settings/platform/pricing/platform-pricing/index.tsx

@@ -3,7 +3,7 @@ import { usePathname } from "next/navigation";
 import type { ReactNode } from "react";
 
 import { ErrorCode } from "@calcom/lib/errorCodes";
-import { showToast } from "@calcom/ui";
+import { showToast } from "@calcom/ui/components/toast";
 
 import { useSubscribeTeamToStripe } from "@lib/hooks/settings/platform/billing/useSubscribeTeamToStripe";
 import { useUpgradeTeamSubscriptionInStripe } from "@lib/hooks/settings/platform/billing/useUpgradeTeamSubscriptionInStripe";

apps/web/components/setup/AdminUser.tsx

@@ -9,7 +9,8 @@ import { isPasswordValid } from "@calcom/features/auth/lib/isPasswordValid";
 import { WEBSITE_URL } from "@calcom/lib/constants";
 import { emailRegex } from "@calcom/lib/emailSchema";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
-import { EmailField, EmptyScreen, Label, PasswordField, TextField } from "@calcom/ui";
+import { EmptyScreen } from "@calcom/ui/components/empty-screen";
+import { EmailField, Label, TextField, PasswordField } from "@calcom/ui/components/form";
 
 export const AdminUserContainer = (props: React.ComponentProps<typeof AdminUser> & { userCount: number }) => {
   const { t } = useLocale();

apps/web/components/setup/EnterpriseLicense.tsx

@@ -9,9 +9,10 @@ import { CONSOLE_URL } from "@calcom/lib/constants";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import type { RouterInputs, RouterOutputs } from "@calcom/trpc/react";
 import { trpc } from "@calcom/trpc/react";
-import { Button, TextField } from "@calcom/ui";
-import { Icon } from "@calcom/ui";
+import { TextField } from "@calcom/ui/components/form";
+import { Button } from "@calcom/ui/components/button";
 import classNames from "@calcom/ui/classNames";
+import { Icon } from "@calcom/ui/components/icon";
 
 type EnterpriseLicenseFormValues = {
   licenseKey: string;

apps/web/components/setup/StepDone.tsx

@@ -2,7 +2,7 @@ import { useRouter } from "next/navigation";
 import type { Dispatch, SetStateAction } from "react";
 
 import { useLocale } from "@calcom/lib/hooks/useLocale";
-import { Icon } from "@calcom/ui";
+import { Icon } from "@calcom/ui/components/icon";
 
 const StepDone = (props: {
   currentStep: number;

apps/web/components/team/screens/Team.tsx

@@ -5,7 +5,7 @@ import { useRouterQuery } from "@calcom/lib/hooks/useRouterQuery";
 import { markdownToSafeHTML } from "@calcom/lib/markdownToSafeHTML";
 import type { TeamWithMembers } from "@calcom/lib/server/queries/teams";
 import type { UserProfile } from "@calcom/types/UserProfile";
-import { UserAvatar } from "@calcom/ui";
+import { UserAvatar } from "@calcom/ui/components/avatar";
 
 type TeamType = Omit<NonNullable<TeamWithMembers>, "inviteToken">;
 type MembersType = TeamType["members"];

apps/web/components/ui/AuthContainer.tsx

@@ -1,6 +1,6 @@
 import classNames from "classnames";
 
-import { Logo } from "@calcom/ui";
+import { Logo } from "@calcom/ui/components/logo";
 
 import Loader from "@components/Loader";
 

apps/web/components/ui/LinkIconButton.tsx

@@ -1,6 +1,6 @@
 import React from "react";
 
-import { Icon } from "@calcom/ui";
+import { Icon } from "@calcom/ui/components/icon";
 
 interface LinkIconButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
   Icon: React.ComponentProps<typeof Icon>["name"];

apps/web/components/ui/ModalContainer.tsx

@@ -2,7 +2,7 @@ import classNames from "classnames";
 import type { PropsWithChildren } from "react";
 import React from "react";
 
-import { Dialog, DialogContent } from "@calcom/ui";
+import { Dialog, DialogContent } from "@calcom/ui/components/dialog";
 
 export default function ModalContainer(
   props: PropsWithChildren<{

apps/web/components/ui/UsernameAvailability/PremiumTextfield.tsx

@@ -15,8 +15,10 @@ import { useLocale } from "@calcom/lib/hooks/useLocale";
 import type { RouterOutputs } from "@calcom/trpc/react";
 import { trpc } from "@calcom/trpc/react";
 import type { AppRouter } from "@calcom/trpc/types/server/routers/_app";
-import { Button, Dialog, DialogClose, DialogContent, DialogFooter, Input, Label } from "@calcom/ui";
-import { Icon } from "@calcom/ui";
+import { Button } from "@calcom/ui/components/button";
+import { Dialog, DialogContent, DialogFooter, DialogClose } from "@calcom/ui/components/dialog";
+import { Label, Input } from "@calcom/ui/components/form";
+import { Icon } from "@calcom/ui/components/icon";
 
 import type { TRPCClientErrorLike } from "@trpc/client";
 

apps/web/components/ui/UsernameAvailability/UsernameTextfield.tsx

@@ -10,8 +10,11 @@ import { useDebounce } from "@calcom/lib/hooks/useDebounce";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { trpc } from "@calcom/trpc/react";
 import type { AppRouter } from "@calcom/trpc/types/server/routers/_app";
-import { Button, Dialog, DialogClose, DialogContent, TextField, DialogFooter, Tooltip } from "@calcom/ui";
-import { Icon } from "@calcom/ui";
+import { Tooltip } from "@calcom/ui/components/tooltip";
+import { Button } from "@calcom/ui/components/button";
+import { Dialog, DialogContent, DialogFooter, DialogClose } from "@calcom/ui/components/dialog";
+import { TextField } from "@calcom/ui/components/form";
+import { Icon } from "@calcom/ui/components/icon";
 
 import type { TRPCClientErrorLike } from "@trpc/client";
 

apps/web/components/ui/form/CheckedSelect.tsx

@@ -3,8 +3,8 @@ import type { Props } from "react-select";
 
 import Select from "@calcom/features/form/components/Select";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
-import { Avatar } from "@calcom/ui";
-import { Icon } from "@calcom/ui";
+import { Avatar } from "@calcom/ui/components/avatar";
+import { Icon } from "@calcom/ui/components/icon";
 
 type CheckedSelectOption = {
   avatar: string;

apps/web/components/ui/form/DatePicker.tsx

@@ -3,7 +3,7 @@ import "react-calendar/dist/Calendar.css";
 import "react-date-picker/dist/DatePicker.css";
 import PrimitiveDatePicker from "react-date-picker/dist/entry.nostyle";
 
-import { Icon } from "@calcom/ui";
+import { Icon } from "@calcom/ui/components/icon";
 import classNames from "@calcom/ui/classNames";
 
 type Props = {

apps/web/lib/QueryCell.tsx

@@ -8,7 +8,8 @@ import type {
 import type { ReactNode } from "react";
 
 import { useLocale } from "@calcom/lib/hooks/useLocale";
-import { Alert, Loader } from "@calcom/ui";
+import { Alert } from "@calcom/ui/components/alert";
+import { Loader } from "@calcom/ui/components/skeleton";
 
 type ErrorLike = {
   message: string;

apps/web/lib/settings/platform/utils.ts

@@ -1,4 +1,4 @@
-import type { IconName } from "@calcom/ui";
+import type { IconName } from "@calcom/ui/components/icon";
 
 type IndividualPlatformPlan = {
   plan: string;

apps/web/modules/apps/[slug]/slug-view.tsx

@@ -5,7 +5,7 @@ import Link from "next/link";
 import { IS_PRODUCTION } from "@calcom/lib/constants";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { markdownToSafeHTML } from "@calcom/lib/markdownToSafeHTML";
-import { showToast } from "@calcom/ui";
+import { showToast } from "@calcom/ui/components/toast";
 
 import type { AppDataProps } from "@lib/apps/[slug]/getStaticProps";
 import useRouterQuery from "@lib/hooks/useRouterQuery";

apps/web/modules/apps/apps-view.tsx

@@ -9,10 +9,11 @@ import { PopularAppsSlider } from "@calcom/features/apps/components/PopularAppsS
 import { RecentAppsSlider } from "@calcom/features/apps/components/RecentAppsSlider";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import type { inferSSRProps } from "@calcom/types/inferSSRProps";
-import type { HorizontalTabItemProps } from "@calcom/ui";
-import { HorizontalTabs, TextField } from "@calcom/ui";
-import { Icon } from "@calcom/ui";
 import classNames from "@calcom/ui/classNames";
+import { TextField } from "@calcom/ui/components/form";
+import { Icon } from "@calcom/ui/components/icon";
+import type { HorizontalTabItemProps } from "@calcom/ui/components/navigation";
+import { HorizontalTabs } from "@calcom/ui/components/navigation";
 
 import { type getServerSideProps } from "@lib/apps/getServerSideProps";
 

apps/web/modules/apps/categories/[category]/category-view.tsx

@@ -5,7 +5,7 @@ import Link from "next/link";
 import { AppCard } from "@calcom/features/apps/components/AppCard";
 import Shell from "@calcom/features/shell/Shell";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
-import { SkeletonText } from "@calcom/ui";
+import { SkeletonText } from "@calcom/ui/components/skeleton";
 
 import type { CategoryDataProps } from "@lib/apps/categories/[category]/getStaticProps";
 

apps/web/modules/apps/categories/categories-view.tsx

@@ -5,7 +5,8 @@ import Link from "next/link";
 import Shell from "@calcom/features/shell/Shell";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import type { inferSSRProps } from "@calcom/types/inferSSRProps";
-import { Icon, SkeletonText } from "@calcom/ui";
+import { Icon } from "@calcom/ui/components/icon";
+import { SkeletonText } from "@calcom/ui/components/skeleton";
 
 import type { getServerSideProps } from "@lib/apps/categories/getServerSideProps";
 

apps/web/modules/apps/installation/[[...step]]/step-view.tsx

@@ -21,7 +21,8 @@ import { eventTypeMetaDataSchemaWithTypedApps } from "@calcom/prisma/zod-utils";
 import type { EventTypeMetaDataSchema } from "@calcom/prisma/zod-utils";
 import { trpc } from "@calcom/trpc/react";
 import type { AppMeta } from "@calcom/types/App";
-import { Form, Steps, showToast } from "@calcom/ui";
+import { Form, Steps } from "@calcom/ui/components/form";
+import { showToast } from "@calcom/ui/components/toast";
 
 import { HttpError } from "@lib/core/http/error";
 

apps/web/modules/apps/installed/[category]/installed-category-view.tsx

@@ -12,8 +12,11 @@ import type { BulkUpdatParams } from "@calcom/features/eventtypes/components/Bul
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { AppCategories } from "@calcom/prisma/enums";
 import { trpc } from "@calcom/trpc/react";
-import type { Icon } from "@calcom/ui";
-import { Button, EmptyScreen, ShellSubHeading, showToast } from "@calcom/ui";
+import { Button } from "@calcom/ui/components/button";
+import { EmptyScreen } from "@calcom/ui/components/empty-screen";
+import type { Icon } from "@calcom/ui/components/icon";
+import { ShellSubHeading } from "@calcom/ui/components/layout";
+import { showToast } from "@calcom/ui/components/toast";
 
 import { QueryCell } from "@lib/QueryCell";
 

apps/web/modules/auth/forgot-password/[id]/forgot-password-single-view.tsx

@@ -6,7 +6,9 @@ import { useForm } from "react-hook-form";
 
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import type { inferSSRProps } from "@calcom/types/inferSSRProps";
-import { Button, PasswordField, Form } from "@calcom/ui";
+import { Button } from "@calcom/ui/components/button";
+import { Form } from "@calcom/ui/components/form";
+import { PasswordField } from "@calcom/ui/components/form";
 
 import AuthContainer from "@components/ui/AuthContainer";
 

apps/web/modules/auth/forgot-password/forgot-password-view.tsx

@@ -7,7 +7,8 @@ import type { CSSProperties, SyntheticEvent } from "react";
 import React from "react";
 
 import { useLocale } from "@calcom/lib/hooks/useLocale";
-import { Button, EmailField } from "@calcom/ui";
+import { EmailField } from "@calcom/ui/components/form";
+import { Button } from "@calcom/ui/components/button";
 
 import AuthContainer from "@components/ui/AuthContainer";
 

apps/web/modules/auth/login-view.tsx

@@ -19,7 +19,10 @@ import { useLastUsed, LastUsed } from "@calcom/lib/hooks/useLastUsed";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { collectPageParameters, telemetryEventTypes, useTelemetry } from "@calcom/lib/telemetry";
 import { trpc } from "@calcom/trpc/react";
-import { Alert, Button, EmailField, PasswordField } from "@calcom/ui";
+import { EmailField } from "@calcom/ui/components/form";
+import { Alert } from "@calcom/ui/components/alert";
+import { Button } from "@calcom/ui/components/button";
+import { PasswordField } from "@calcom/ui/components/form";
 
 import type { inferSSRProps } from "@lib/types/inferSSRProps";
 import type { WithNonceProps } from "@lib/withNonce";
@@ -180,7 +183,7 @@ PageProps & WithNonceProps<{}>) {
     : isSAMLLoginEnabled && !isPending && data?.connectionExists;
 
   return (
-    <div className="dark:bg-brand dark:text-brand-contrast text-emphasis min-h-screen [--cal-brand-emphasis:#101010] [--cal-brand-subtle:#9CA3AF] [--cal-brand-text:white] [--cal-brand:#111827] dark:[--cal-brand-emphasis:#e1e1e1] dark:[--cal-brand-text:black] dark:[--cal-brand:white]">
+    <div className="dark:bg-brand dark:text-brand-contrast text-emphasis min-h-screen [--cal-brand:#111827] [--cal-brand-subtle:#9CA3AF] [--cal-brand-emphasis:#101010] [--cal-brand-text:white] dark:[--cal-brand-emphasis:#e1e1e1] dark:[--cal-brand-text:black] dark:[--cal-brand:white]">
       <AuthContainer
         showLogo
         heading={twoFactorRequired ? t("2fa_code") : t("welcome_back")}

apps/web/modules/auth/logout-view.tsx

@@ -7,8 +7,8 @@ import { useEffect, useState } from "react";
 
 import { WEBSITE_URL } from "@calcom/lib/constants";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
-import { Button } from "@calcom/ui";
-import { Icon } from "@calcom/ui";
+import { Button } from "@calcom/ui/components/button";
+import { Icon } from "@calcom/ui/components/icon";
 
 import AuthContainer from "@components/ui/AuthContainer";
 

apps/web/modules/auth/oauth2/authorize-view.tsx

@@ -9,7 +9,10 @@ import { APP_NAME } from "@calcom/lib/constants";
 import { useCompatSearchParams } from "@calcom/lib/hooks/useCompatSearchParams";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { trpc } from "@calcom/trpc/react";
-import { Avatar, Button, Icon, Select } from "@calcom/ui";
+import { Icon } from "@calcom/ui/components/icon";
+import { Select } from "@calcom/ui/components/form";
+import { Avatar } from "@calcom/ui/components/avatar";
+import { Button } from "@calcom/ui/components/button";
 
 export default function Authorize() {
   const { t } = useLocale();

apps/web/modules/auth/platform/authorize-view.tsx

@@ -6,7 +6,9 @@ import { APP_NAME } from "@calcom/lib/constants";
 import { useCompatSearchParams } from "@calcom/lib/hooks/useCompatSearchParams";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { PERMISSIONS_GROUPED_MAP } from "@calcom/platform-constants/permissions";
-import { Avatar, Button, Icon } from "@calcom/ui";
+import { Icon } from "@calcom/ui/components/icon";
+import { Avatar } from "@calcom/ui/components/avatar";
+import { Button } from "@calcom/ui/components/button";
 
 import { hasPermission } from "../../../../../packages/platform/utils/permissions";
 

apps/web/modules/auth/setup-view.tsx

@@ -8,7 +8,7 @@ import { APP_NAME } from "@calcom/lib/constants";
 import { useCompatSearchParams } from "@calcom/lib/hooks/useCompatSearchParams";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import type { inferSSRProps } from "@calcom/types/inferSSRProps";
-import { WizardForm } from "@calcom/ui";
+import { WizardForm } from "@calcom/ui/components/form";
 
 import { AdminUserContainer as AdminUser } from "@components/setup/AdminUser";
 import ChooseLicense from "@components/setup/ChooseLicense";

apps/web/modules/auth/signin-view.tsx

@@ -3,7 +3,7 @@
 import { signIn } from "next-auth/react";
 
 import type { inferSSRProps } from "@calcom/types/inferSSRProps";
-import { Button } from "@calcom/ui";
+import { Button } from "@calcom/ui/components/button";
 
 import type { getServerSideProps } from "@server/lib/auth/signin/getServerSideProps";
 

apps/web/modules/auth/verify-email-change-view.tsx

@@ -8,7 +8,7 @@ import { Toaster } from "sonner";
 
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import type { inferSSRProps } from "@calcom/types/inferSSRProps";
-import { showToast } from "@calcom/ui";
+import { showToast } from "@calcom/ui/components/toast";
 
 import type { getServerSideProps } from "@server/lib/auth/verify-email-change/getServerSideProps";
 

apps/web/modules/auth/verify-email-view.tsx

@@ -8,7 +8,9 @@ import { APP_NAME } from "@calcom/lib/constants";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { trpc } from "@calcom/trpc";
 import useEmailVerifyCheck from "@calcom/trpc/react/hooks/useEmailVerifyCheck";
-import { Button, EmptyScreen, showToast } from "@calcom/ui";
+import { showToast } from "@calcom/ui/components/toast";
+import { Button } from "@calcom/ui/components/button";
+import { EmptyScreen } from "@calcom/ui/components/empty-screen";
 
 function VerifyEmailPage() {
   const { data } = useEmailVerifyCheck();

apps/web/modules/auth/verify-view.tsx

@@ -10,9 +10,10 @@ import { WEBAPP_URL } from "@calcom/lib/constants";
 import { useCompatSearchParams } from "@calcom/lib/hooks/useCompatSearchParams";
 import { useRouterQuery } from "@calcom/lib/hooks/useRouterQuery";
 import { trpc } from "@calcom/trpc/react";
-import { Button, showToast } from "@calcom/ui";
-import { Icon } from "@calcom/ui";
+import { showToast } from "@calcom/ui/components/toast";
+import { Button } from "@calcom/ui/components/button";
 import classNames from "@calcom/ui/classNames";
+import { Icon } from "@calcom/ui/components/icon";
 
 import Loader from "@components/Loader";
 

apps/web/modules/availability/[schedule]/schedule-view.tsx

@@ -13,7 +13,7 @@ import type { ScheduleRepository } from "@calcom/lib/server/repository/schedule"
 import type { TravelScheduleRepository } from "@calcom/lib/server/repository/travelSchedule";
 import { trpc } from "@calcom/trpc/react";
 import useMeQuery from "@calcom/trpc/react/hooks/useMeQuery";
-import { showToast } from "@calcom/ui";
+import { showToast } from "@calcom/ui/components/toast";
 
 type PageProps = {
   scheduleFetched?: Awaited<ReturnType<typeof ScheduleRepository.findDetailedScheduleById>>;

apps/web/modules/availability/availability-view.tsx

@@ -17,7 +17,9 @@ import type { OrganizationRepository } from "@calcom/lib/server/repository/organ
 import { MembershipRole } from "@calcom/prisma/enums";
 import { trpc } from "@calcom/trpc/react";
 import useMeQuery from "@calcom/trpc/react/hooks/useMeQuery";
-import { EmptyScreen, showToast, ToggleGroup } from "@calcom/ui";
+import { EmptyScreen } from "@calcom/ui/components/empty-screen";
+import { ToggleGroup } from "@calcom/ui/components/form";
+import { showToast } from "@calcom/ui/components/toast";
 
 export function AvailabilityList() {
   const { t } = useLocale();