diff --git a/apps/web/components/DestinationCalendarSelector.tsx b/apps/web/components/DestinationCalendarSelector.tsx
index e7d020ab45..f2462dd9d0 100644
--- a/apps/web/components/DestinationCalendarSelector.tsx
+++ b/apps/web/components/DestinationCalendarSelector.tsx
@@ -1,11 +1,11 @@
import React, { useEffect, useState } from "react";
import Select from "react-select";
+import Button from "@calcom/ui/Button";
+
import { useLocale } from "@lib/hooks/useLocale";
import { trpc } from "@lib/trpc";
-import Button from "@components/ui/Button";
-
interface Props {
onChange: (value: { externalId: string; integration: string }) => void;
isLoading?: boolean;
diff --git a/apps/web/components/ImageUploader.tsx b/apps/web/components/ImageUploader.tsx
index 65c3cec0e1..26aae80621 100644
--- a/apps/web/components/ImageUploader.tsx
+++ b/apps/web/components/ImageUploader.tsx
@@ -1,13 +1,14 @@
import { FormEvent, useCallback, useEffect, useState } from "react";
import Cropper from "react-easy-crop";
+import Button from "@calcom/ui/Button";
+import { DialogClose, DialogTrigger, Dialog, DialogContent } from "@calcom/ui/Dialog";
+
import { Area, getCroppedImg } from "@lib/cropImage";
import { useFileReader } from "@lib/hooks/useFileReader";
import { useLocale } from "@lib/hooks/useLocale";
-import { DialogClose, DialogTrigger, Dialog, DialogContent } from "@components/Dialog";
import Slider from "@components/Slider";
-import Button from "@components/ui/Button";
type ImageUploaderProps = {
id: string;
diff --git a/apps/web/components/Shell.tsx b/apps/web/components/Shell.tsx
index 913b58e045..47e7e023e1 100644
--- a/apps/web/components/Shell.tsx
+++ b/apps/web/components/Shell.tsx
@@ -17,6 +17,7 @@ import { useRouter } from "next/router";
import React, { ReactNode, useEffect, useState } from "react";
import { Toaster } from "react-hot-toast";
+import Button from "@calcom/ui/Button";
import Dropdown, {
DropdownMenuContent,
DropdownMenuItem,
@@ -42,7 +43,6 @@ import { HeadSeo } from "@components/seo/head-seo";
import pkg from "../package.json";
import { useViewerI18n } from "./I18nLanguageHandler";
import Logo from "./Logo";
-import Button from "./ui/Button";
export function useMeQuery() {
const meQuery = trpc.useQuery(["viewer.me"], {
diff --git a/apps/web/components/auth/SAMLLogin.tsx b/apps/web/components/auth/SAMLLogin.tsx
index 1deea12796..148065488f 100644
--- a/apps/web/components/auth/SAMLLogin.tsx
+++ b/apps/web/components/auth/SAMLLogin.tsx
@@ -2,12 +2,12 @@ import { signIn } from "next-auth/react";
import { Dispatch, SetStateAction } from "react";
import { useFormContext } from "react-hook-form";
+import Button from "@calcom/ui/Button";
+
import { useLocale } from "@lib/hooks/useLocale";
import { collectPageParameters, telemetryEventTypes, useTelemetry } from "@lib/telemetry";
import { trpc } from "@lib/trpc";
-import Button from "@components/ui/Button";
-
interface Props {
email: string;
samlTenantID: string;
diff --git a/apps/web/components/auth/TwoFactor.tsx b/apps/web/components/auth/TwoFactor.tsx
index a54a5d3dd8..dab5357928 100644
--- a/apps/web/components/auth/TwoFactor.tsx
+++ b/apps/web/components/auth/TwoFactor.tsx
@@ -2,9 +2,9 @@ import React, { useEffect, useState } from "react";
import useDigitInput from "react-digit-input";
import { useFormContext } from "react-hook-form";
-import { useLocale } from "@lib/hooks/useLocale";
+import { Input } from "@calcom/ui/form/fields";
-import { Input } from "@components/form/fields";
+import { useLocale } from "@lib/hooks/useLocale";
export default function TwoFactor() {
const [value, onChange] = useState("");
diff --git a/apps/web/components/booking/BookingListItem.tsx b/apps/web/components/booking/BookingListItem.tsx
index 699476af66..8036bb4bce 100644
--- a/apps/web/components/booking/BookingListItem.tsx
+++ b/apps/web/components/booking/BookingListItem.tsx
@@ -4,14 +4,15 @@ import dayjs from "dayjs";
import { useState } from "react";
import { useMutation } from "react-query";
+import Button from "@calcom/ui/Button";
+import { Dialog, DialogClose, DialogContent, DialogFooter, DialogHeader } from "@calcom/ui/Dialog";
+import { TextArea } from "@calcom/ui/form/fields";
+
import { HttpError } from "@lib/core/http/error";
import { useLocale } from "@lib/hooks/useLocale";
import { inferQueryOutput, trpc } from "@lib/trpc";
-import { Dialog, DialogClose, DialogContent, DialogFooter, DialogHeader } from "@components/Dialog";
import { useMeQuery } from "@components/Shell";
-import { TextArea } from "@components/form/fields";
-import Button from "@components/ui/Button";
import TableActions, { ActionType } from "@components/ui/TableActions";
type BookingItem = inferQueryOutput<"viewer.bookings">["bookings"][number];
diff --git a/apps/web/components/booking/pages/BookingPage.tsx b/apps/web/components/booking/pages/BookingPage.tsx
index 5bda74300c..e6b6ab7b86 100644
--- a/apps/web/components/booking/pages/BookingPage.tsx
+++ b/apps/web/components/booking/pages/BookingPage.tsx
@@ -14,6 +14,8 @@ import { useMutation } from "react-query";
import { v4 as uuidv4 } from "uuid";
import { createPaymentLink } from "@calcom/stripe/client";
+import { Button } from "@calcom/ui/Button";
+import { EmailInput, Form } from "@calcom/ui/form/fields";
import { asStringOrNull } from "@lib/asStringOrNull";
import { timeZone } from "@lib/clock";
@@ -28,9 +30,7 @@ import { collectPageParameters, telemetryEventTypes, useTelemetry } from "@lib/t
import { detectBrowserTimeFormat } from "@lib/timeFormat";
import CustomBranding from "@components/CustomBranding";
-import { EmailInput, Form } from "@components/form/fields";
import AvatarGroup from "@components/ui/AvatarGroup";
-import { Button } from "@components/ui/Button";
import { BookPageProps } from "../../../pages/[user]/book";
import { TeamBookingPageProps } from "../../../pages/team/[slug]/book";
diff --git a/apps/web/components/dialog/ConfirmationDialogContent.tsx b/apps/web/components/dialog/ConfirmationDialogContent.tsx
index cf41920067..9487bf885a 100644
--- a/apps/web/components/dialog/ConfirmationDialogContent.tsx
+++ b/apps/web/components/dialog/ConfirmationDialogContent.tsx
@@ -3,10 +3,10 @@ import { CheckIcon } from "@heroicons/react/solid";
import * as DialogPrimitive from "@radix-ui/react-dialog";
import React, { PropsWithChildren, ReactNode } from "react";
-import { useLocale } from "@lib/hooks/useLocale";
+import { Button } from "@calcom/ui/Button";
+import { DialogClose, DialogContent } from "@calcom/ui/Dialog";
-import { DialogClose, DialogContent } from "@components/Dialog";
-import { Button } from "@components/ui/Button";
+import { useLocale } from "@lib/hooks/useLocale";
export type ConfirmationDialogContentProps = {
confirmBtn?: ReactNode;
diff --git a/apps/web/components/eventtype/CreateEventType.tsx b/apps/web/components/eventtype/CreateEventType.tsx
index 272d02861a..8811cec13b 100644
--- a/apps/web/components/eventtype/CreateEventType.tsx
+++ b/apps/web/components/eventtype/CreateEventType.tsx
@@ -2,11 +2,16 @@ import { ChevronDownIcon, PlusIcon } from "@heroicons/react/solid";
import { zodResolver } from "@hookform/resolvers/zod";
import { SchedulingType } from "@prisma/client";
import { useRouter } from "next/router";
-import React, { useEffect } from "react";
+import { useEffect } from "react";
import { useForm } from "react-hook-form";
import type { z } from "zod";
+import { useLocale } from "@calcom/lib/hooks/useLocale";
+import showToast from "@calcom/lib/notification";
import { createEventTypeInput } from "@calcom/prisma/zod/custom/eventtype";
+import { Alert } from "@calcom/ui/Alert";
+import { Button } from "@calcom/ui/Button";
+import { Dialog, DialogClose, DialogContent } from "@calcom/ui/Dialog";
import Dropdown, {
DropdownMenuContent,
DropdownMenuItem,
@@ -14,18 +19,13 @@ import Dropdown, {
DropdownMenuSeparator,
DropdownMenuTrigger,
} from "@calcom/ui/Dropdown";
+import { Form, InputLeading, TextAreaField, TextField } from "@calcom/ui/form/fields";
import { HttpError } from "@lib/core/http/error";
-import { useLocale } from "@lib/hooks/useLocale";
-import showToast from "@lib/notification";
import { slugify } from "@lib/slugify";
import { trpc } from "@lib/trpc";
-import { Dialog, DialogClose, DialogContent } from "@components/Dialog";
-import { Form, InputLeading, TextAreaField, TextField } from "@components/form/fields";
-import { Alert } from "@components/ui/Alert";
import Avatar from "@components/ui/Avatar";
-import { Button } from "@components/ui/Button";
import * as RadioArea from "@components/ui/form/radio-area";
// this describes the uniform data needed to create a new event type on Profile or Team
diff --git a/apps/web/components/integrations/CalendarListContainer.tsx b/apps/web/components/integrations/CalendarListContainer.tsx
index 558969e072..80f8eee924 100644
--- a/apps/web/components/integrations/CalendarListContainer.tsx
+++ b/apps/web/components/integrations/CalendarListContainer.tsx
@@ -1,18 +1,18 @@
import React, { Fragment } from "react";
import { useMutation } from "react-query";
+import showToast from "@calcom/lib/notification";
+import { Alert } from "@calcom/ui/Alert";
+import Button from "@calcom/ui/Button";
import Switch from "@calcom/ui/Switch";
import { QueryCell } from "@lib/QueryCell";
import { useLocale } from "@lib/hooks/useLocale";
-import showToast from "@lib/notification";
import { trpc } from "@lib/trpc";
import DestinationCalendarSelector from "@components/DestinationCalendarSelector";
import { List } from "@components/List";
import { ShellSubHeading } from "@components/Shell";
-import { Alert } from "@components/ui/Alert";
-import Button from "@components/ui/Button";
import ConnectIntegration from "./ConnectIntegrations";
import DisconnectIntegration from "./DisconnectIntegration";
diff --git a/apps/web/components/integrations/ConnectIntegrations.tsx b/apps/web/components/integrations/ConnectIntegrations.tsx
index bbf50dd5ea..0ce01fe501 100644
--- a/apps/web/components/integrations/ConnectIntegrations.tsx
+++ b/apps/web/components/integrations/ConnectIntegrations.tsx
@@ -2,12 +2,12 @@ import type { IntegrationOAuthCallbackState } from "pages/api/integrations/types
import { useState } from "react";
import { useMutation } from "react-query";
+import { ButtonBaseProps } from "@calcom/ui/Button";
+
import { NEXT_PUBLIC_BASE_URL } from "@lib/config/constants";
import { AddAppleIntegrationModal } from "@lib/integrations/calendar/components/AddAppleIntegration";
import { AddCalDavIntegrationModal } from "@lib/integrations/calendar/components/AddCalDavIntegration";
-import { ButtonBaseProps } from "@components/ui/Button";
-
export default function ConnectIntegration(props: {
type: string;
render: (renderProps: ButtonBaseProps) => JSX.Element;
diff --git a/apps/web/components/integrations/DisconnectIntegration.tsx b/apps/web/components/integrations/DisconnectIntegration.tsx
index 9b3e3db25b..a760955092 100644
--- a/apps/web/components/integrations/DisconnectIntegration.tsx
+++ b/apps/web/components/integrations/DisconnectIntegration.tsx
@@ -1,9 +1,10 @@
import { useState } from "react";
import { useMutation } from "react-query";
-import { Dialog } from "@components/Dialog";
+import { ButtonBaseProps } from "@calcom/ui/Button";
+import { Dialog } from "@calcom/ui/Dialog";
+
import ConfirmationDialogContent from "@components/dialog/ConfirmationDialogContent";
-import { ButtonBaseProps } from "@components/ui/Button";
export default function DisconnectIntegration(props: {
/** Integration credential id */
diff --git a/apps/web/components/pages/eventtypes/CustomInputTypeForm.tsx b/apps/web/components/pages/eventtypes/CustomInputTypeForm.tsx
index 4620e816f4..ff5ff519d5 100644
--- a/apps/web/components/pages/eventtypes/CustomInputTypeForm.tsx
+++ b/apps/web/components/pages/eventtypes/CustomInputTypeForm.tsx
@@ -3,9 +3,9 @@ import React, { FC } from "react";
import { Controller, SubmitHandler, useForm, useWatch } from "react-hook-form";
import Select from "react-select";
-import { useLocale } from "@lib/hooks/useLocale";
+import Button from "@calcom/ui/Button";
-import Button from "@components/ui/Button";
+import { useLocale } from "@lib/hooks/useLocale";
interface OptionTypeBase {
label: string;
diff --git a/apps/web/components/security/ChangePasswordSection.tsx b/apps/web/components/security/ChangePasswordSection.tsx
index 9186554955..fdfa153153 100644
--- a/apps/web/components/security/ChangePasswordSection.tsx
+++ b/apps/web/components/security/ChangePasswordSection.tsx
@@ -1,10 +1,10 @@
import React, { SyntheticEvent, useState } from "react";
+import showToast from "@calcom/lib/notification";
+import Button from "@calcom/ui/Button";
+
import { ErrorCode } from "@lib/auth";
import { useLocale } from "@lib/hooks/useLocale";
-import showToast from "@lib/notification";
-
-import Button from "@components/ui/Button";
const ChangePasswordSection = () => {
const [oldPassword, setOldPassword] = useState("");
diff --git a/apps/web/components/security/DisableTwoFactorModal.tsx b/apps/web/components/security/DisableTwoFactorModal.tsx
index 2b4d2bffbf..d86f8df315 100644
--- a/apps/web/components/security/DisableTwoFactorModal.tsx
+++ b/apps/web/components/security/DisableTwoFactorModal.tsx
@@ -1,11 +1,11 @@
import { SyntheticEvent, useState } from "react";
+import Button from "@calcom/ui/Button";
+import { Dialog, DialogContent } from "@calcom/ui/Dialog";
+
import { ErrorCode } from "@lib/auth";
import { useLocale } from "@lib/hooks/useLocale";
-import { Dialog, DialogContent } from "@components/Dialog";
-import Button from "@components/ui/Button";
-
import TwoFactorAuthAPI from "./TwoFactorAuthAPI";
import TwoFactorModalHeader from "./TwoFactorModalHeader";
diff --git a/apps/web/components/security/EnableTwoFactorModal.tsx b/apps/web/components/security/EnableTwoFactorModal.tsx
index 58ee34cdff..280f36009c 100644
--- a/apps/web/components/security/EnableTwoFactorModal.tsx
+++ b/apps/web/components/security/EnableTwoFactorModal.tsx
@@ -1,11 +1,11 @@
import React, { SyntheticEvent, useState } from "react";
+import Button from "@calcom/ui/Button";
+import { Dialog, DialogContent } from "@calcom/ui/Dialog";
+
import { ErrorCode } from "@lib/auth";
import { useLocale } from "@lib/hooks/useLocale";
-import { Dialog, DialogContent } from "@components/Dialog";
-import Button from "@components/ui/Button";
-
import TwoFactorAuthAPI from "./TwoFactorAuthAPI";
import TwoFactorModalHeader from "./TwoFactorModalHeader";
diff --git a/apps/web/components/security/TwoFactorAuthSection.tsx b/apps/web/components/security/TwoFactorAuthSection.tsx
index d3970a03cd..00fd4adf0a 100644
--- a/apps/web/components/security/TwoFactorAuthSection.tsx
+++ b/apps/web/components/security/TwoFactorAuthSection.tsx
@@ -1,9 +1,10 @@
import { useState } from "react";
+import Button from "@calcom/ui/Button";
+
import { useLocale } from "@lib/hooks/useLocale";
import Badge from "@components/ui/Badge";
-import Button from "@components/ui/Button";
import DisableTwoFactorModal from "./DisableTwoFactorModal";
import EnableTwoFactorModal from "./EnableTwoFactorModal";
diff --git a/apps/web/components/team/MemberChangeRoleModal.tsx b/apps/web/components/team/MemberChangeRoleModal.tsx
index 3eeb535e55..e862155a52 100644
--- a/apps/web/components/team/MemberChangeRoleModal.tsx
+++ b/apps/web/components/team/MemberChangeRoleModal.tsx
@@ -2,10 +2,11 @@ import { MembershipRole } from "@prisma/client";
import { useState } from "react";
import React, { SyntheticEvent } from "react";
+import Button from "@calcom/ui/Button";
+
import { useLocale } from "@lib/hooks/useLocale";
import { trpc } from "@lib/trpc";
-import Button from "@components/ui/Button";
import ModalContainer from "@components/ui/ModalContainer";
export default function MemberChangeRoleModal(props: {
diff --git a/apps/web/components/team/MemberInvitationModal.tsx b/apps/web/components/team/MemberInvitationModal.tsx
index e245e587c3..63c6bf4ae9 100644
--- a/apps/web/components/team/MemberInvitationModal.tsx
+++ b/apps/web/components/team/MemberInvitationModal.tsx
@@ -4,13 +4,13 @@ import { MembershipRole } from "@prisma/client";
import { useState } from "react";
import React, { SyntheticEvent } from "react";
+import Button from "@calcom/ui/Button";
+import { TextField } from "@calcom/ui/form/fields";
+
import { useLocale } from "@lib/hooks/useLocale";
import { TeamWithMembers } from "@lib/queries/teams";
import { trpc } from "@lib/trpc";
-import { TextField } from "@components/form/fields";
-import Button from "@components/ui/Button";
-
export default function MemberInvitationModal(props: { team: TeamWithMembers | null; onExit: () => void }) {
const [errorMessage, setErrorMessage] = useState("");
const { t, i18n } = useLocale();
diff --git a/apps/web/components/team/MemberListItem.tsx b/apps/web/components/team/MemberListItem.tsx
index d9a388d4d9..19d1a79141 100644
--- a/apps/web/components/team/MemberListItem.tsx
+++ b/apps/web/components/team/MemberListItem.tsx
@@ -3,6 +3,10 @@ import { ClockIcon, ExternalLinkIcon, DotsHorizontalIcon } from "@heroicons/reac
import Link from "next/link";
import React, { useState } from "react";
+import { useLocale } from "@calcom/lib/hooks/useLocale";
+import showToast from "@calcom/lib/notification";
+import Button from "@calcom/ui/Button";
+import { Dialog, DialogTrigger } from "@calcom/ui/Dialog";
import Dropdown, {
DropdownMenuContent,
DropdownMenuItem,
@@ -12,15 +16,11 @@ import Dropdown, {
import TeamAvailabilityModal from "@ee/components/team/availability/TeamAvailabilityModal";
import { getPlaceholderAvatar } from "@lib/getPlaceholderAvatar";
-import { useLocale } from "@lib/hooks/useLocale";
-import showToast from "@lib/notification";
import { trpc, inferQueryOutput } from "@lib/trpc";
-import { Dialog, DialogTrigger } from "@components/Dialog";
import { Tooltip } from "@components/Tooltip";
import ConfirmationDialogContent from "@components/dialog/ConfirmationDialogContent";
import Avatar from "@components/ui/Avatar";
-import Button from "@components/ui/Button";
import ModalContainer from "@components/ui/ModalContainer";
import MemberChangeRoleModal from "./MemberChangeRoleModal";
diff --git a/apps/web/components/team/TeamCreateModal.tsx b/apps/web/components/team/TeamCreateModal.tsx
index 1fadb06918..23b8a5d228 100644
--- a/apps/web/components/team/TeamCreateModal.tsx
+++ b/apps/web/components/team/TeamCreateModal.tsx
@@ -1,11 +1,11 @@
import { UsersIcon } from "@heroicons/react/outline";
import { useRef, useState } from "react";
+import { Alert } from "@calcom/ui/Alert";
+
import { useLocale } from "@lib/hooks/useLocale";
import { trpc } from "@lib/trpc";
-import { Alert } from "@components/ui/Alert";
-
interface Props {
onClose: () => void;
}
diff --git a/apps/web/components/team/TeamList.tsx b/apps/web/components/team/TeamList.tsx
index df4e750b01..8c7bc027a9 100644
--- a/apps/web/components/team/TeamList.tsx
+++ b/apps/web/components/team/TeamList.tsx
@@ -1,4 +1,5 @@
-import showToast from "@lib/notification";
+import showToast from "@calcom/lib/notification";
+
import { trpc, inferQueryOutput } from "@lib/trpc";
import TeamListItem from "./TeamListItem";
diff --git a/apps/web/components/team/TeamListItem.tsx b/apps/web/components/team/TeamListItem.tsx
index 9fbe89fc9d..13d7209315 100644
--- a/apps/web/components/team/TeamListItem.tsx
+++ b/apps/web/components/team/TeamListItem.tsx
@@ -2,6 +2,10 @@ import { ExternalLinkIcon, TrashIcon, LogoutIcon, PencilIcon } from "@heroicons/
import { LinkIcon, DotsHorizontalIcon } from "@heroicons/react/solid";
import Link from "next/link";
+import { useLocale } from "@calcom/lib/hooks/useLocale";
+import showToast from "@calcom/lib/notification";
+import Button from "@calcom/ui/Button";
+import { Dialog, DialogTrigger } from "@calcom/ui/Dialog";
import Dropdown, {
DropdownMenuContent,
DropdownMenuItem,
@@ -11,15 +15,11 @@ import Dropdown, {
import classNames from "@lib/classNames";
import { getPlaceholderAvatar } from "@lib/getPlaceholderAvatar";
-import { useLocale } from "@lib/hooks/useLocale";
-import showToast from "@lib/notification";
import { trpc, inferQueryOutput } from "@lib/trpc";
-import { Dialog, DialogTrigger } from "@components/Dialog";
import { Tooltip } from "@components/Tooltip";
import ConfirmationDialogContent from "@components/dialog/ConfirmationDialogContent";
import Avatar from "@components/ui/Avatar";
-import Button from "@components/ui/Button";
import { TeamRole } from "./TeamPill";
import { MembershipRole } from ".prisma/client";
diff --git a/apps/web/components/team/TeamSettings.tsx b/apps/web/components/team/TeamSettings.tsx
index b3de5bb96e..819d750799 100644
--- a/apps/web/components/team/TeamSettings.tsx
+++ b/apps/web/components/team/TeamSettings.tsx
@@ -1,15 +1,16 @@
import { HashtagIcon, InformationCircleIcon, LinkIcon, PhotographIcon } from "@heroicons/react/solid";
import React, { useRef, useState } from "react";
+import showToast from "@calcom/lib/notification";
+import { Alert } from "@calcom/ui/Alert";
+import Button from "@calcom/ui/Button";
+import { TextField } from "@calcom/ui/form/fields";
+
import { useLocale } from "@lib/hooks/useLocale";
-import showToast from "@lib/notification";
import { TeamWithMembers } from "@lib/queries/teams";
import { trpc } from "@lib/trpc";
import ImageUploader from "@components/ImageUploader";
-import { TextField } from "@components/form/fields";
-import { Alert } from "@components/ui/Alert";
-import Button from "@components/ui/Button";
import SettingInputContainer from "@components/ui/SettingInputContainer";
interface Props {
diff --git a/apps/web/components/team/TeamSettingsRightSidebar.tsx b/apps/web/components/team/TeamSettingsRightSidebar.tsx
index 87e7c8f51b..513ac2b875 100644
--- a/apps/web/components/team/TeamSettingsRightSidebar.tsx
+++ b/apps/web/components/team/TeamSettingsRightSidebar.tsx
@@ -3,12 +3,13 @@ import Link from "next/link";
import { useRouter } from "next/router";
import React from "react";
+import showToast from "@calcom/lib/notification";
+import { Dialog, DialogTrigger } from "@calcom/ui/Dialog";
+
import { useLocale } from "@lib/hooks/useLocale";
-import showToast from "@lib/notification";
import { TeamWithMembers } from "@lib/queries/teams";
import { trpc } from "@lib/trpc";
-import { Dialog, DialogTrigger } from "@components/Dialog";
import ConfirmationDialogContent from "@components/dialog/ConfirmationDialogContent";
import CreateEventTypeButton from "@components/eventtype/CreateEventType";
import LinkIconButton from "@components/ui/LinkIconButton";
diff --git a/apps/web/components/team/UpgradeToFlexibleProModal.tsx b/apps/web/components/team/UpgradeToFlexibleProModal.tsx
index 589b8c27cd..f963274fc5 100644
--- a/apps/web/components/team/UpgradeToFlexibleProModal.tsx
+++ b/apps/web/components/team/UpgradeToFlexibleProModal.tsx
@@ -1,9 +1,8 @@
import { useState } from "react";
-import { useLocale } from "@lib/hooks/useLocale";
-import showToast from "@lib/notification";
-import { trpc } from "@lib/trpc";
-
+import showToast from "@calcom/lib/notification";
+import { Alert } from "@calcom/ui/Alert";
+import Button from "@calcom/ui/Button";
import {
Dialog,
DialogTrigger,
@@ -11,9 +10,10 @@ import {
DialogClose,
DialogFooter,
DialogHeader,
-} from "@components/Dialog";
-import { Alert } from "@components/ui/Alert";
-import Button from "@components/ui/Button";
+} from "@calcom/ui/Dialog";
+
+import { useLocale } from "@lib/hooks/useLocale";
+import { trpc } from "@lib/trpc";
interface Props {
teamId: number;
diff --git a/apps/web/components/team/screens/Team.tsx b/apps/web/components/team/screens/Team.tsx
index 8bd13cf60a..2817cdab03 100644
--- a/apps/web/components/team/screens/Team.tsx
+++ b/apps/web/components/team/screens/Team.tsx
@@ -5,11 +5,12 @@ import Link from "next/link";
import { TeamPageProps } from "pages/team/[slug]";
import React from "react";
+import Button from "@calcom/ui/Button";
+
import { getPlaceholderAvatar } from "@lib/getPlaceholderAvatar";
import { useLocale } from "@lib/hooks/useLocale";
import Avatar from "@components/ui/Avatar";
-import Button from "@components/ui/Button";
import Text from "@components/ui/Text";
type TeamType = TeamPageProps["team"];
diff --git a/apps/web/components/ui/Button.tsx b/apps/web/components/ui/Button.tsx
deleted file mode 100644
index 979b55b369..0000000000
--- a/apps/web/components/ui/Button.tsx
+++ /dev/null
@@ -1,3 +0,0 @@
-// TODO: Remove this file once every Button is imported from `@calcom/ui`
-export * from "@calcom/ui/Button";
-export { default } from "@calcom/ui/Button";
diff --git a/apps/web/components/ui/Scheduler.tsx b/apps/web/components/ui/Scheduler.tsx
index 66ed11dafc..19ef56dd99 100644
--- a/apps/web/components/ui/Scheduler.tsx
+++ b/apps/web/components/ui/Scheduler.tsx
@@ -6,9 +6,9 @@ import utc from "dayjs/plugin/utc";
import React, { useEffect, useState } from "react";
import TimezoneSelect, { ITimezoneOption } from "react-timezone-select";
-import { useLocale } from "@lib/hooks/useLocale";
+import Button from "@calcom/ui/Button";
-import Button from "@components/ui/Button";
+import { useLocale } from "@lib/hooks/useLocale";
import { WeekdaySelect } from "./WeekdaySelect";
import SetTimesModal from "./modal/SetTimesModal";
diff --git a/apps/web/components/ui/TableActions.tsx b/apps/web/components/ui/TableActions.tsx
index fa6e486705..94ebe93d21 100644
--- a/apps/web/components/ui/TableActions.tsx
+++ b/apps/web/components/ui/TableActions.tsx
@@ -1,13 +1,12 @@
import { DotsHorizontalIcon } from "@heroicons/react/solid";
import React, { FC } from "react";
+import { useLocale } from "@calcom/lib/hooks/useLocale";
+import Button from "@calcom/ui/Button";
import Dropdown, { DropdownMenuTrigger, DropdownMenuContent, DropdownMenuItem } from "@calcom/ui/Dropdown";
-import { useLocale } from "@lib/hooks/useLocale";
import { SVGComponent } from "@lib/types/SVGComponent";
-import Button from "./Button";
-
export type ActionType = {
id: string;
icon: SVGComponent;
diff --git a/apps/web/components/ui/alerts/Error.tsx b/apps/web/components/ui/alerts/Error.tsx
index 5548a510f0..8e3e54b57f 100644
--- a/apps/web/components/ui/alerts/Error.tsx
+++ b/apps/web/components/ui/alerts/Error.tsx
@@ -1,4 +1,4 @@
-import { Alert } from "../Alert";
+import { Alert } from "@calcom/ui/Alert";
/**
* @deprecated use `` instead
diff --git a/apps/web/components/ui/form/Schedule.tsx b/apps/web/components/ui/form/Schedule.tsx
index 69628d66d8..f194c7243b 100644
--- a/apps/web/components/ui/form/Schedule.tsx
+++ b/apps/web/components/ui/form/Schedule.tsx
@@ -5,13 +5,14 @@ import utc from "dayjs/plugin/utc";
import React, { useCallback, useState } from "react";
import { Controller, useFieldArray } from "react-hook-form";
+import Button from "@calcom/ui/Button";
+
import { defaultDayRange } from "@lib/availability";
import { weekdayNames } from "@lib/core/i18n/weekday";
import { useLocale } from "@lib/hooks/useLocale";
import { TimeRange } from "@lib/types/schedule";
import { useMeQuery } from "@components/Shell";
-import Button from "@components/ui/Button";
import Select from "@components/ui/form/Select";
dayjs.extend(utc);
diff --git a/apps/web/components/ui/modal/SetTimesModal.tsx b/apps/web/components/ui/modal/SetTimesModal.tsx
index b314d8542b..504b249759 100644
--- a/apps/web/components/ui/modal/SetTimesModal.tsx
+++ b/apps/web/components/ui/modal/SetTimesModal.tsx
@@ -3,10 +3,10 @@ import dayjs from "dayjs";
import customParseFormat from "dayjs/plugin/customParseFormat";
import { useRef, useState } from "react";
-import { useLocale } from "@lib/hooks/useLocale";
-import showToast from "@lib/notification";
+import showToast from "@calcom/lib/notification";
+import Button from "@calcom/ui/Button";
-import Button from "@components/ui/Button";
+import { useLocale } from "@lib/hooks/useLocale";
dayjs.extend(customParseFormat);
diff --git a/apps/web/components/webhook/WebhookDialogForm.tsx b/apps/web/components/webhook/WebhookDialogForm.tsx
index 8f7e3b8764..87f24d13f2 100644
--- a/apps/web/components/webhook/WebhookDialogForm.tsx
+++ b/apps/web/components/webhook/WebhookDialogForm.tsx
@@ -1,17 +1,17 @@
import { useState } from "react";
import { Controller, useForm } from "react-hook-form";
+import showToast from "@calcom/lib/notification";
+import Button from "@calcom/ui/Button";
+import { DialogFooter } from "@calcom/ui/Dialog";
import Switch from "@calcom/ui/Switch";
+import { FieldsetLegend, Form, InputGroupBox, TextArea, TextField } from "@calcom/ui/form/fields";
import { useLocale } from "@lib/hooks/useLocale";
-import showToast from "@lib/notification";
import { trpc } from "@lib/trpc";
import { WEBHOOK_TRIGGER_EVENTS } from "@lib/webhooks/constants";
import customTemplate, { hasTemplateIntegration } from "@lib/webhooks/integrationTemplate";
-import { DialogFooter } from "@components/Dialog";
-import { FieldsetLegend, Form, InputGroupBox, TextArea, TextField } from "@components/form/fields";
-import Button from "@components/ui/Button";
import { TWebhook } from "@components/webhook/WebhookListItem";
import WebhookTestDisclosure from "@components/webhook/WebhookTestDisclosure";
diff --git a/apps/web/components/webhook/WebhookListContainer.tsx b/apps/web/components/webhook/WebhookListContainer.tsx
index 2603366d31..31fbbaa037 100644
--- a/apps/web/components/webhook/WebhookListContainer.tsx
+++ b/apps/web/components/webhook/WebhookListContainer.tsx
@@ -2,14 +2,15 @@ import classNames from "classnames";
import Image from "next/image";
import { useState } from "react";
+import Button from "@calcom/ui/Button";
+import { Dialog, DialogContent } from "@calcom/ui/Dialog";
+
import { QueryCell } from "@lib/QueryCell";
import { useLocale } from "@lib/hooks/useLocale";
import { trpc } from "@lib/trpc";
-import { Dialog, DialogContent } from "@components/Dialog";
import { List, ListItem, ListItemText, ListItemTitle } from "@components/List";
import { ShellSubHeading } from "@components/Shell";
-import Button from "@components/ui/Button";
import WebhookDialogForm from "@components/webhook/WebhookDialogForm";
import WebhookListItem, { TWebhook } from "@components/webhook/WebhookListItem";
diff --git a/apps/web/components/webhook/WebhookListItem.tsx b/apps/web/components/webhook/WebhookListItem.tsx
index 6fb8081549..970b1917ae 100644
--- a/apps/web/components/webhook/WebhookListItem.tsx
+++ b/apps/web/components/webhook/WebhookListItem.tsx
@@ -1,15 +1,15 @@
import { PencilAltIcon, TrashIcon } from "@heroicons/react/outline";
import classNames from "@calcom/lib/classNames";
+import Button from "@calcom/ui/Button";
+import { Dialog, DialogTrigger } from "@calcom/ui/Dialog";
import { useLocale } from "@lib/hooks/useLocale";
import { inferQueryOutput, trpc } from "@lib/trpc";
-import { Dialog, DialogTrigger } from "@components/Dialog";
import { ListItem } from "@components/List";
import { Tooltip } from "@components/Tooltip";
import ConfirmationDialogContent from "@components/dialog/ConfirmationDialogContent";
-import Button from "@components/ui/Button";
export type TWebhook = inferQueryOutput<"viewer.webhook.list">[number];
diff --git a/apps/web/components/webhook/WebhookTestDisclosure.tsx b/apps/web/components/webhook/WebhookTestDisclosure.tsx
index 685f967c9d..7499f7575a 100644
--- a/apps/web/components/webhook/WebhookTestDisclosure.tsx
+++ b/apps/web/components/webhook/WebhookTestDisclosure.tsx
@@ -4,14 +4,13 @@ import { useState } from "react";
import { useWatch } from "react-hook-form";
import classNames from "@calcom/lib/classNames";
+import showToast from "@calcom/lib/notification";
+import Button from "@calcom/ui/Button";
+import { InputGroupBox } from "@calcom/ui/form/fields";
import { useLocale } from "@lib/hooks/useLocale";
-import showToast from "@lib/notification";
import { trpc } from "@lib/trpc";
-import { InputGroupBox } from "@components/form/fields";
-import Button from "@components/ui/Button";
-
export default function WebhookTestDisclosure() {
const subscriberUrl: string = useWatch({ name: "subscriberUrl" });
const payloadTemplate = useWatch({ name: "payloadTemplate" }) || null;
diff --git a/apps/web/ee/components/LicenseBanner.tsx b/apps/web/ee/components/LicenseBanner.tsx
index 481f7f9afd..16f2232c74 100644
--- a/apps/web/ee/components/LicenseBanner.tsx
+++ b/apps/web/ee/components/LicenseBanner.tsx
@@ -2,9 +2,10 @@ import { XIcon } from "@heroicons/react/outline";
import { BadgeCheckIcon } from "@heroicons/react/solid";
import { Trans } from "react-i18next";
+import { Dialog, DialogTrigger } from "@calcom/ui/Dialog";
+
import { useLocale } from "@lib/hooks/useLocale";
-import { Dialog, DialogTrigger } from "@components/Dialog";
import ConfirmationDialogContent from "@components/dialog/ConfirmationDialogContent";
export default function LicenseBanner() {
diff --git a/apps/web/ee/components/TrialBanner.tsx b/apps/web/ee/components/TrialBanner.tsx
index ed83d826a8..eed8e19e64 100644
--- a/apps/web/ee/components/TrialBanner.tsx
+++ b/apps/web/ee/components/TrialBanner.tsx
@@ -1,10 +1,11 @@
import dayjs from "dayjs";
+import Button from "@calcom/ui/Button";
+
import { TRIAL_LIMIT_DAYS } from "@lib/config/constants";
import { useLocale } from "@lib/hooks/useLocale";
import { useMeQuery } from "@components/Shell";
-import Button from "@components/ui/Button";
const TrialBanner = () => {
const { t } = useLocale();
diff --git a/apps/web/ee/components/saml/Configuration.tsx b/apps/web/ee/components/saml/Configuration.tsx
index 15c4a0ba12..4b32f7ab51 100644
--- a/apps/web/ee/components/saml/Configuration.tsx
+++ b/apps/web/ee/components/saml/Configuration.tsx
@@ -1,16 +1,17 @@
import React, { useEffect, useState, useRef } from "react";
+import showToast from "@calcom/lib/notification";
+import { Alert } from "@calcom/ui/Alert";
+import Button from "@calcom/ui/Button";
+import { Dialog, DialogTrigger } from "@calcom/ui/Dialog";
+import { TextArea } from "@calcom/ui/form/fields";
+
import { useLocale } from "@lib/hooks/useLocale";
-import showToast from "@lib/notification";
import { collectPageParameters, telemetryEventTypes, useTelemetry } from "@lib/telemetry";
import { trpc } from "@lib/trpc";
-import { Dialog, DialogTrigger } from "@components/Dialog";
import ConfirmationDialogContent from "@components/dialog/ConfirmationDialogContent";
-import { TextArea } from "@components/form/fields";
-import { Alert } from "@components/ui/Alert";
import Badge from "@components/ui/Badge";
-import Button from "@components/ui/Button";
export default function SAMLConfiguration({
teamsView,
diff --git a/apps/web/ee/components/stripe/Payment.tsx b/apps/web/ee/components/stripe/Payment.tsx
index ccbe3db8dd..e1ae9dd2bb 100644
--- a/apps/web/ee/components/stripe/Payment.tsx
+++ b/apps/web/ee/components/stripe/Payment.tsx
@@ -5,11 +5,10 @@ import { stringify } from "querystring";
import React, { SyntheticEvent, useEffect, useState } from "react";
import { PaymentData } from "@calcom/stripe/server";
+import Button from "@calcom/ui/Button";
import { useLocale } from "@lib/hooks/useLocale";
-import Button from "@components/ui/Button";
-
const CARD_OPTIONS: stripejs.StripeCardElementOptions = {
iconStyle: "solid" as const,
classes: {
diff --git a/apps/web/ee/components/web3/CryptoSection.tsx b/apps/web/ee/components/web3/CryptoSection.tsx
index 957cabecb1..f81a112e0e 100644
--- a/apps/web/ee/components/web3/CryptoSection.tsx
+++ b/apps/web/ee/components/web3/CryptoSection.tsx
@@ -4,10 +4,10 @@ import React from "react";
import Web3 from "web3";
import { AbiItem } from "web3-utils";
-import { useLocale } from "@lib/hooks/useLocale";
-import showToast from "@lib/notification";
+import showToast from "@calcom/lib/notification";
+import { Button } from "@calcom/ui/Button";
-import { Button } from "@components/ui/Button";
+import { useLocale } from "@lib/hooks/useLocale";
import { useContracts } from "../../../contexts/contractsContext";
import genericAbi from "../../../web3/abis/abiWithGetBalance.json";
diff --git a/apps/web/ee/lib/stripe/server.ts b/apps/web/ee/lib/stripe/server.ts
index 04747ed066..64f2808bd9 100644
--- a/apps/web/ee/lib/stripe/server.ts
+++ b/apps/web/ee/lib/stripe/server.ts
@@ -2,12 +2,12 @@ import { PaymentType, Prisma } from "@prisma/client";
import Stripe from "stripe";
import { v4 as uuidv4 } from "uuid";
+import { getErrorFromUnknown } from "@calcom/lib/errors";
import prisma from "@calcom/prisma";
import { createPaymentLink } from "@calcom/stripe/client";
import stripe, { PaymentData } from "@calcom/stripe/server";
import { sendAwaitingPaymentEmail, sendOrganizerPaymentRefundFailedEmail } from "@lib/emails/email-manager";
-import { getErrorFromUnknown } from "@lib/errors";
import { CalendarEvent } from "@lib/integrations/calendar/interfaces/Calendar";
export type PaymentInfo = {
diff --git a/apps/web/ee/pages/api/integrations/stripepayment/webhook.ts b/apps/web/ee/pages/api/integrations/stripepayment/webhook.ts
index 190ac67bb6..cc5c6064ee 100644
--- a/apps/web/ee/pages/api/integrations/stripepayment/webhook.ts
+++ b/apps/web/ee/pages/api/integrations/stripepayment/webhook.ts
@@ -2,11 +2,11 @@ import { buffer } from "micro";
import type { NextApiRequest, NextApiResponse } from "next";
import Stripe from "stripe";
+import { getErrorFromUnknown } from "@calcom/lib/errors";
import stripe from "@calcom/stripe/server";
import { IS_PRODUCTION } from "@lib/config/constants";
import { HttpError as HttpCode } from "@lib/core/http/error";
-import { getErrorFromUnknown } from "@lib/errors";
import EventManager from "@lib/events/EventManager";
import { CalendarEvent } from "@lib/integrations/calendar/interfaces/Calendar";
import prisma from "@lib/prisma";
diff --git a/apps/web/ee/pages/settings/teams/[id]/availability.tsx b/apps/web/ee/pages/settings/teams/[id]/availability.tsx
index c96c457da5..3e22e8d86f 100644
--- a/apps/web/ee/pages/settings/teams/[id]/availability.tsx
+++ b/apps/web/ee/pages/settings/teams/[id]/availability.tsx
@@ -1,6 +1,7 @@
import { useRouter } from "next/router";
import { useMemo, useState } from "react";
+import { Alert } from "@calcom/ui/Alert";
import TeamAvailabilityScreen from "@ee/components/team/availability/TeamAvailabilityScreen";
import { getPlaceholderAvatar } from "@lib/getPlaceholderAvatar";
@@ -8,7 +9,6 @@ import { trpc } from "@lib/trpc";
import Loader from "@components/Loader";
import Shell, { useMeQuery } from "@components/Shell";
-import { Alert } from "@components/ui/Alert";
import Avatar from "@components/ui/Avatar";
export function TeamAvailabilityPage() {
diff --git a/apps/web/lib/QueryCell.tsx b/apps/web/lib/QueryCell.tsx
index af805a05d7..f3dce5a960 100644
--- a/apps/web/lib/QueryCell.tsx
+++ b/apps/web/lib/QueryCell.tsx
@@ -7,8 +7,9 @@ import {
UseQueryResult,
} from "react-query";
+import { Alert } from "@calcom/ui/Alert";
+
import Loader from "@components/Loader";
-import { Alert } from "@components/ui/Alert";
type ErrorLike = {
message: string;
diff --git a/apps/web/lib/emails/templates/attendee-scheduled-email.ts b/apps/web/lib/emails/templates/attendee-scheduled-email.ts
index 674a32ffdf..447bc84ed2 100644
--- a/apps/web/lib/emails/templates/attendee-scheduled-email.ts
+++ b/apps/web/lib/emails/templates/attendee-scheduled-email.ts
@@ -6,8 +6,9 @@ import utc from "dayjs/plugin/utc";
import { createEvent, DateArray } from "ics";
import nodemailer from "nodemailer";
+import { getErrorFromUnknown } from "@calcom/lib/errors";
+
import { getCancelLink, getRichDescription } from "@lib/CalEventParser";
-import { getErrorFromUnknown } from "@lib/errors";
import { getIntegrationName } from "@lib/integrations";
import { CalendarEvent, Person } from "@lib/integrations/calendar/interfaces/Calendar";
import { serverConfig } from "@lib/serverConfig";
diff --git a/apps/web/lib/emails/templates/forgot-password-email.ts b/apps/web/lib/emails/templates/forgot-password-email.ts
index 7bd0e02497..f7ba982f18 100644
--- a/apps/web/lib/emails/templates/forgot-password-email.ts
+++ b/apps/web/lib/emails/templates/forgot-password-email.ts
@@ -1,7 +1,8 @@
import { TFunction } from "next-i18next";
import nodemailer from "nodemailer";
-import { getErrorFromUnknown } from "@lib/errors";
+import { getErrorFromUnknown } from "@calcom/lib/errors";
+
import { serverConfig } from "@lib/serverConfig";
import { emailHead, linkIcon, emailBodyLogo } from "./common";
diff --git a/apps/web/lib/emails/templates/organizer-scheduled-email.ts b/apps/web/lib/emails/templates/organizer-scheduled-email.ts
index 0307318c6f..a6ac4ba956 100644
--- a/apps/web/lib/emails/templates/organizer-scheduled-email.ts
+++ b/apps/web/lib/emails/templates/organizer-scheduled-email.ts
@@ -6,8 +6,9 @@ import utc from "dayjs/plugin/utc";
import { createEvent, DateArray, Person } from "ics";
import nodemailer from "nodemailer";
+import { getErrorFromUnknown } from "@calcom/lib/errors";
+
import { getCancelLink, getRichDescription } from "@lib/CalEventParser";
-import { getErrorFromUnknown } from "@lib/errors";
import { getIntegrationName } from "@lib/integrations";
import { CalendarEvent } from "@lib/integrations/calendar/interfaces/Calendar";
import { serverConfig } from "@lib/serverConfig";
diff --git a/apps/web/lib/emails/templates/team-invite-email.ts b/apps/web/lib/emails/templates/team-invite-email.ts
index 90763d8a62..bf08e27749 100644
--- a/apps/web/lib/emails/templates/team-invite-email.ts
+++ b/apps/web/lib/emails/templates/team-invite-email.ts
@@ -1,7 +1,8 @@
import { TFunction } from "next-i18next";
import nodemailer from "nodemailer";
-import { getErrorFromUnknown } from "@lib/errors";
+import { getErrorFromUnknown } from "@calcom/lib/errors";
+
import { serverConfig } from "@lib/serverConfig";
import { emailHead, linkIcon, emailBodyLogo } from "./common";
diff --git a/apps/web/lib/hooks/useLocale.ts b/apps/web/lib/hooks/useLocale.ts
index 2fae0c7b8d..9e8ca501fd 100644
--- a/apps/web/lib/hooks/useLocale.ts
+++ b/apps/web/lib/hooks/useLocale.ts
@@ -1,5 +1,6 @@
import { useTranslation } from "next-i18next";
+/** @deprecated use the one from `@calcom/lib/hooks/useLocale` */
export const useLocale = () => {
const { i18n, t } = useTranslation("common");
diff --git a/apps/web/lib/integrations/Daily/DailyVideoApiAdapter.ts b/apps/web/lib/integrations/Daily/DailyVideoApiAdapter.ts
index 03e340552b..f3f574111a 100644
--- a/apps/web/lib/integrations/Daily/DailyVideoApiAdapter.ts
+++ b/apps/web/lib/integrations/Daily/DailyVideoApiAdapter.ts
@@ -1,7 +1,8 @@
import { Credential } from "@prisma/client";
+import { handleErrorsJson } from "@calcom/lib/errors";
+
import { BASE_URL } from "@lib/config/constants";
-import { handleErrorsJson } from "@lib/errors";
import { PartialReference } from "@lib/events/EventManager";
import prisma from "@lib/prisma";
import { VideoApiAdapter, VideoCallData } from "@lib/videoClient";
diff --git a/apps/web/lib/integrations/Huddle01/Huddle01VideoApiAdapter.ts b/apps/web/lib/integrations/Huddle01/Huddle01VideoApiAdapter.ts
index 7f7893f307..f8eb84d39d 100644
--- a/apps/web/lib/integrations/Huddle01/Huddle01VideoApiAdapter.ts
+++ b/apps/web/lib/integrations/Huddle01/Huddle01VideoApiAdapter.ts
@@ -1,6 +1,7 @@
import { Credential } from "@prisma/client";
-import { handleErrorsJson } from "@lib/errors";
+import { handleErrorsJson } from "@calcom/lib/errors";
+
import { PartialReference } from "@lib/events/EventManager";
import { randomString } from "@lib/random";
import { VideoApiAdapter, VideoCallData } from "@lib/videoClient";
diff --git a/apps/web/lib/integrations/Tandem/TandemVideoApiAdapter.ts b/apps/web/lib/integrations/Tandem/TandemVideoApiAdapter.ts
index f85d5c733b..cfd38a42b4 100644
--- a/apps/web/lib/integrations/Tandem/TandemVideoApiAdapter.ts
+++ b/apps/web/lib/integrations/Tandem/TandemVideoApiAdapter.ts
@@ -1,6 +1,7 @@
import { Credential } from "@prisma/client";
-import { handleErrorsJson, handleErrorsRaw } from "@lib/errors";
+import { handleErrorsJson, handleErrorsRaw } from "@calcom/lib/errors";
+
import { PartialReference } from "@lib/events/EventManager";
import prisma from "@lib/prisma";
import { VideoApiAdapter, VideoCallData } from "@lib/videoClient";
diff --git a/apps/web/lib/integrations/Zoom/ZoomVideoApiAdapter.ts b/apps/web/lib/integrations/Zoom/ZoomVideoApiAdapter.ts
index ed5146120a..33f9961d95 100644
--- a/apps/web/lib/integrations/Zoom/ZoomVideoApiAdapter.ts
+++ b/apps/web/lib/integrations/Zoom/ZoomVideoApiAdapter.ts
@@ -1,6 +1,7 @@
import { Credential } from "@prisma/client";
-import { handleErrorsJson, handleErrorsRaw } from "@lib/errors";
+import { handleErrorsJson, handleErrorsRaw } from "@calcom/lib/errors";
+
import { PartialReference } from "@lib/events/EventManager";
import prisma from "@lib/prisma";
import { VideoApiAdapter, VideoCallData } from "@lib/videoClient";
diff --git a/apps/web/lib/integrations/calendar/CalendarManager.ts b/apps/web/lib/integrations/calendar/CalendarManager.ts
index 7f24ae8dca..1c1a0fb8a3 100644
--- a/apps/web/lib/integrations/calendar/CalendarManager.ts
+++ b/apps/web/lib/integrations/calendar/CalendarManager.ts
@@ -1,8 +1,9 @@
import { Credential, SelectedCalendar } from "@prisma/client";
import _ from "lodash";
+import { getErrorFromUnknown } from "@calcom/lib/errors";
+
import { getUid } from "@lib/CalEventParser";
-import { getErrorFromUnknown } from "@lib/errors";
import { EventResult } from "@lib/events/EventManager";
import logger from "@lib/logger";
import notEmpty from "@lib/notEmpty";
diff --git a/apps/web/lib/integrations/calendar/components/AddAppleIntegration.tsx b/apps/web/lib/integrations/calendar/components/AddAppleIntegration.tsx
index 8cdcbd78d1..264682d861 100644
--- a/apps/web/lib/integrations/calendar/components/AddAppleIntegration.tsx
+++ b/apps/web/lib/integrations/calendar/components/AddAppleIntegration.tsx
@@ -1,6 +1,8 @@
import React, { useState } from "react";
import { useForm } from "react-hook-form";
+import { Alert } from "@calcom/ui/Alert";
+import Button from "@calcom/ui/Button";
import {
Dialog,
DialogClose,
@@ -8,10 +10,8 @@ import {
DialogFooter,
DialogHeader,
DialogProps,
-} from "@components/Dialog";
-import { Form, TextField } from "@components/form/fields";
-import { Alert } from "@components/ui/Alert";
-import Button from "@components/ui/Button";
+} from "@calcom/ui/Dialog";
+import { Form, TextField } from "@calcom/ui/form/fields";
export const ADD_APPLE_INTEGRATION_FORM_TITLE = "addAppleIntegration";
diff --git a/apps/web/lib/integrations/calendar/components/AddCalDavIntegration.tsx b/apps/web/lib/integrations/calendar/components/AddCalDavIntegration.tsx
index 04618a2272..3b98be3636 100644
--- a/apps/web/lib/integrations/calendar/components/AddCalDavIntegration.tsx
+++ b/apps/web/lib/integrations/calendar/components/AddCalDavIntegration.tsx
@@ -1,6 +1,8 @@
import React, { useState } from "react";
import { useForm } from "react-hook-form";
+import { Alert } from "@calcom/ui/Alert";
+import Button from "@calcom/ui/Button";
import {
DialogHeader,
DialogProps,
@@ -8,10 +10,8 @@ import {
DialogContent,
DialogClose,
DialogFooter,
-} from "@components/Dialog";
-import { Form, TextField } from "@components/form/fields";
-import { Alert } from "@components/ui/Alert";
-import Button from "@components/ui/Button";
+} from "@calcom/ui/Dialog";
+import { Form, TextField } from "@calcom/ui/form/fields";
type Props = {
onSubmit: () => void;
diff --git a/apps/web/lib/integrations/calendar/services/Office365CalendarService.ts b/apps/web/lib/integrations/calendar/services/Office365CalendarService.ts
index a8480a6e22..c7eeb0b333 100644
--- a/apps/web/lib/integrations/calendar/services/Office365CalendarService.ts
+++ b/apps/web/lib/integrations/calendar/services/Office365CalendarService.ts
@@ -1,8 +1,9 @@
import { Calendar as OfficeCalendar } from "@microsoft/microsoft-graph-types-beta";
import { Credential } from "@prisma/client";
+import { handleErrorsJson, handleErrorsRaw } from "@calcom/lib/errors";
+
import { getLocation, getRichDescription } from "@lib/CalEventParser";
-import { handleErrorsJson, handleErrorsRaw } from "@lib/errors";
import { CALENDAR_INTEGRATIONS_TYPES } from "@lib/integrations/calendar/constants/generals";
import logger from "@lib/logger";
import prisma from "@lib/prisma";
diff --git a/apps/web/pages/500.tsx b/apps/web/pages/500.tsx
index 6926ab2501..3ebc6b875a 100644
--- a/apps/web/pages/500.tsx
+++ b/apps/web/pages/500.tsx
@@ -1,6 +1,6 @@
import Head from "next/head";
-import Button from "@components/ui/Button";
+import Button from "@calcom/ui/Button";
export default function Error500() {
return (
diff --git a/apps/web/pages/[user].tsx b/apps/web/pages/[user].tsx
index 8ae3905034..4b58f572d0 100644
--- a/apps/web/pages/[user].tsx
+++ b/apps/web/pages/[user].tsx
@@ -85,7 +85,7 @@ export default function User(props: inferSSRProps) {
onClick={async (e) => {
// If a token is required for this event type, add a click listener that checks whether the user verified their wallet or not
if (type.metadata.smartContractAddress && !evtsToVerify[type.id]) {
- const showToast = (await import("@lib/notification")).default;
+ const showToast = (await import("@calcom/lib/notification")).default;
e.preventDefault();
showToast(
"You must verify a wallet with a token belonging to the specified smart contract first",
diff --git a/apps/web/pages/_error.tsx b/apps/web/pages/_error.tsx
index 3016275dcf..b7edbec8cb 100644
--- a/apps/web/pages/_error.tsx
+++ b/apps/web/pages/_error.tsx
@@ -6,8 +6,9 @@ import { NextPage, NextPageContext } from "next";
import NextError, { ErrorProps } from "next/error";
import React from "react";
+import { getErrorFromUnknown } from "@calcom/lib/errors";
+
import { HttpError } from "@lib/core/http/error";
-import { getErrorFromUnknown } from "@lib/errors";
import logger from "@lib/logger";
import { ErrorPage } from "@components/error/error-page";
diff --git a/apps/web/pages/api/book/event.ts b/apps/web/pages/api/book/event.ts
index 68f6eb13ad..8f1363e9a0 100644
--- a/apps/web/pages/api/book/event.ts
+++ b/apps/web/pages/api/book/event.ts
@@ -9,6 +9,7 @@ import type { NextApiRequest, NextApiResponse } from "next";
import short from "short-uuid";
import { v5 as uuidv5 } from "uuid";
+import { getErrorFromUnknown } from "@calcom/lib/errors";
import { handlePayment } from "@ee/lib/stripe/server";
import {
@@ -18,7 +19,6 @@ import {
sendAttendeeRequestEmail,
} from "@lib/emails/email-manager";
import { ensureArray } from "@lib/ensureArray";
-import { getErrorFromUnknown } from "@lib/errors";
import { getEventName } from "@lib/event";
import EventManager, { EventResult, PartialReference } from "@lib/events/EventManager";
import { getBusyCalendarTimes } from "@lib/integrations/calendar/CalendarManager";
diff --git a/apps/web/pages/auth/error.tsx b/apps/web/pages/auth/error.tsx
index 4db8ac6ae3..c9febbca5a 100644
--- a/apps/web/pages/auth/error.tsx
+++ b/apps/web/pages/auth/error.tsx
@@ -3,10 +3,11 @@ import { GetServerSidePropsContext } from "next";
import Link from "next/link";
import { useRouter } from "next/router";
+import Button from "@calcom/ui/Button";
+
import { useLocale } from "@lib/hooks/useLocale";
import AuthContainer from "@components/ui/AuthContainer";
-import Button from "@components/ui/Button";
import { ssrInit } from "@server/lib/ssr";
diff --git a/apps/web/pages/auth/forgot-password/index.tsx b/apps/web/pages/auth/forgot-password/index.tsx
index ff19a74671..3b32aa30b4 100644
--- a/apps/web/pages/auth/forgot-password/index.tsx
+++ b/apps/web/pages/auth/forgot-password/index.tsx
@@ -4,12 +4,13 @@ import { getCsrfToken } from "next-auth/react";
import Link from "next/link";
import React, { SyntheticEvent } from "react";
+import Button from "@calcom/ui/Button";
+import { EmailField } from "@calcom/ui/form/fields";
+
import { getSession } from "@lib/auth";
import { useLocale } from "@lib/hooks/useLocale";
-import { EmailField } from "@components/form/fields";
import AuthContainer from "@components/ui/AuthContainer";
-import Button from "@components/ui/Button";
export default function ForgotPassword({ csrfToken }: { csrfToken: string }) {
const { t, i18n } = useLocale();
diff --git a/apps/web/pages/auth/login.tsx b/apps/web/pages/auth/login.tsx
index f9212ed469..0fba7fb9fe 100644
--- a/apps/web/pages/auth/login.tsx
+++ b/apps/web/pages/auth/login.tsx
@@ -7,6 +7,10 @@ import { useRouter } from "next/router";
import { useState } from "react";
import { useForm } from "react-hook-form";
+import { Alert } from "@calcom/ui/Alert";
+import Button from "@calcom/ui/Button";
+import { EmailField, PasswordField, Form } from "@calcom/ui/form/fields";
+
import { ErrorCode, getSession } from "@lib/auth";
import { WEBSITE_URL } from "@lib/config/constants";
import { useLocale } from "@lib/hooks/useLocale";
@@ -17,10 +21,7 @@ import { inferSSRProps } from "@lib/types/inferSSRProps";
import AddToHomescreen from "@components/AddToHomescreen";
import SAMLLogin from "@components/auth/SAMLLogin";
import TwoFactor from "@components/auth/TwoFactor";
-import { EmailField, PasswordField, Form } from "@components/form/fields";
-import { Alert } from "@components/ui/Alert";
import AuthContainer from "@components/ui/AuthContainer";
-import Button from "@components/ui/Button";
import { IS_GOOGLE_LOGIN_ENABLED } from "@server/lib/constants";
import { ssrInit } from "@server/lib/ssr";
diff --git a/apps/web/pages/auth/logout.tsx b/apps/web/pages/auth/logout.tsx
index 2f017266ec..eb7b326a7c 100644
--- a/apps/web/pages/auth/logout.tsx
+++ b/apps/web/pages/auth/logout.tsx
@@ -4,11 +4,12 @@ import Link from "next/link";
import { useRouter } from "next/router";
import { useEffect } from "react";
+import Button from "@calcom/ui/Button";
+
import { useLocale } from "@lib/hooks/useLocale";
import { inferSSRProps } from "@lib/types/inferSSRProps";
import AuthContainer from "@components/ui/AuthContainer";
-import Button from "@components/ui/Button";
import { ssrInit } from "@server/lib/ssr";
diff --git a/apps/web/pages/auth/signup.tsx b/apps/web/pages/auth/signup.tsx
index b4e5536ac8..0285b3959e 100644
--- a/apps/web/pages/auth/signup.tsx
+++ b/apps/web/pages/auth/signup.tsx
@@ -3,6 +3,10 @@ import { signIn } from "next-auth/react";
import { useRouter } from "next/router";
import { FormProvider, SubmitHandler, useForm } from "react-hook-form";
+import { Alert } from "@calcom/ui/Alert";
+import Button from "@calcom/ui/Button";
+import { EmailField, PasswordField, TextField } from "@calcom/ui/form/fields";
+
import { asStringOrNull } from "@lib/asStringOrNull";
import { NEXT_PUBLIC_BASE_URL } from "@lib/config/constants";
import { useLocale } from "@lib/hooks/useLocale";
@@ -10,10 +14,7 @@ import prisma from "@lib/prisma";
import { isSAMLLoginEnabled } from "@lib/saml";
import { inferSSRProps } from "@lib/types/inferSSRProps";
-import { EmailField, PasswordField, TextField } from "@components/form/fields";
import { HeadSeo } from "@components/seo/head-seo";
-import { Alert } from "@components/ui/Alert";
-import Button from "@components/ui/Button";
import { IS_GOOGLE_LOGIN_ENABLED } from "@server/lib/constants";
import { ssrInit } from "@server/lib/ssr";
diff --git a/apps/web/pages/availability/index.tsx b/apps/web/pages/availability/index.tsx
index ba8bcc12b7..0ee1457096 100644
--- a/apps/web/pages/availability/index.tsx
+++ b/apps/web/pages/availability/index.tsx
@@ -5,17 +5,18 @@ import utc from "dayjs/plugin/utc";
import { useForm } from "react-hook-form";
import { z } from "zod";
+import showToast from "@calcom/lib/notification";
+import { Alert } from "@calcom/ui/Alert";
+import Button from "@calcom/ui/Button";
+import { Form } from "@calcom/ui/form/fields";
+
import { QueryCell } from "@lib/QueryCell";
import { DEFAULT_SCHEDULE } from "@lib/availability";
import { useLocale } from "@lib/hooks/useLocale";
-import showToast from "@lib/notification";
import { inferQueryOutput, trpc } from "@lib/trpc";
import { Schedule as ScheduleType } from "@lib/types/schedule";
import Shell from "@components/Shell";
-import { Form } from "@components/form/fields";
-import { Alert } from "@components/ui/Alert";
-import Button from "@components/ui/Button";
import Schedule from "@components/ui/form/Schedule";
dayjs.extend(utc);
diff --git a/apps/web/pages/bookings/[status].tsx b/apps/web/pages/bookings/[status].tsx
index f89b0d66b2..717d9164ee 100644
--- a/apps/web/pages/bookings/[status].tsx
+++ b/apps/web/pages/bookings/[status].tsx
@@ -2,6 +2,9 @@ import { CalendarIcon } from "@heroicons/react/outline";
import { useRouter } from "next/router";
import { Fragment } from "react";
+import { Alert } from "@calcom/ui/Alert";
+import Button from "@calcom/ui/Button";
+
import { useInViewObserver } from "@lib/hooks/useInViewObserver";
import { useLocale } from "@lib/hooks/useLocale";
import { inferQueryInput, trpc } from "@lib/trpc";
@@ -11,8 +14,6 @@ import EmptyScreen from "@components/EmptyScreen";
import Loader from "@components/Loader";
import Shell from "@components/Shell";
import BookingListItem from "@components/booking/BookingListItem";
-import { Alert } from "@components/ui/Alert";
-import Button from "@components/ui/Button";
type BookingListingStatus = inferQueryInput<"viewer.bookings">["status"];
diff --git a/apps/web/pages/cancel/[uid].tsx b/apps/web/pages/cancel/[uid].tsx
index 90aba1ac15..3f64966e18 100644
--- a/apps/web/pages/cancel/[uid].tsx
+++ b/apps/web/pages/cancel/[uid].tsx
@@ -4,6 +4,9 @@ import { GetServerSidePropsContext } from "next";
import { useRouter } from "next/router";
import { useState } from "react";
+import { Button } from "@calcom/ui/Button";
+import { TextField } from "@calcom/ui/form/fields";
+
import { asStringOrUndefined } from "@lib/asStringOrNull";
import { getSession } from "@lib/auth";
import { useLocale } from "@lib/hooks/useLocale";
@@ -13,9 +16,7 @@ import { detectBrowserTimeFormat } from "@lib/timeFormat";
import { inferSSRProps } from "@lib/types/inferSSRProps";
import CustomBranding from "@components/CustomBranding";
-import { TextField } from "@components/form/fields";
import { HeadSeo } from "@components/seo/head-seo";
-import { Button } from "@components/ui/Button";
import { ssrInit } from "@server/lib/ssr";
diff --git a/apps/web/pages/cancel/success.tsx b/apps/web/pages/cancel/success.tsx
index 03e3dc821d..f50bf12b78 100644
--- a/apps/web/pages/cancel/success.tsx
+++ b/apps/web/pages/cancel/success.tsx
@@ -3,10 +3,11 @@ import { ArrowRightIcon } from "@heroicons/react/solid";
import { useSession } from "next-auth/react";
import { useRouter } from "next/router";
+import Button from "@calcom/ui/Button";
+
import { useLocale } from "@lib/hooks/useLocale";
import { HeadSeo } from "@components/seo/head-seo";
-import Button from "@components/ui/Button";
export default function CancelSuccess() {
const { t } = useLocale();
diff --git a/apps/web/pages/event-types/[type].tsx b/apps/web/pages/event-types/[type].tsx
index 4d3414aaad..4f2c7d2504 100644
--- a/apps/web/pages/event-types/[type].tsx
+++ b/apps/web/pages/event-types/[type].tsx
@@ -29,8 +29,12 @@ import Select from "react-select";
import { JSONObject } from "superjson/dist/types";
import { z } from "zod";
+import showToast from "@calcom/lib/notification";
import { StripeData } from "@calcom/stripe/server";
+import Button from "@calcom/ui/Button";
+import { Dialog, DialogContent, DialogTrigger } from "@calcom/ui/Dialog";
import Switch from "@calcom/ui/Switch";
+import { Form } from "@calcom/ui/form/fields";
import { asStringOrThrow, asStringOrUndefined } from "@lib/asStringOrNull";
import { getSession } from "@lib/auth";
@@ -38,7 +42,6 @@ import { HttpError } from "@lib/core/http/error";
import { useLocale } from "@lib/hooks/useLocale";
import getIntegrations, { hasIntegration } from "@lib/integrations/getIntegrations";
import { LocationType } from "@lib/location";
-import showToast from "@lib/notification";
import prisma from "@lib/prisma";
import { slugify } from "@lib/slugify";
import { trpc } from "@lib/trpc";
@@ -46,13 +49,10 @@ import { inferSSRProps } from "@lib/types/inferSSRProps";
import { ClientSuspense } from "@components/ClientSuspense";
import DestinationCalendarSelector from "@components/DestinationCalendarSelector";
-import { Dialog, DialogContent, DialogTrigger } from "@components/Dialog";
import Loader from "@components/Loader";
import Shell from "@components/Shell";
import ConfirmationDialogContent from "@components/dialog/ConfirmationDialogContent";
-import { Form } from "@components/form/fields";
import CustomInputTypeForm from "@components/pages/eventtypes/CustomInputTypeForm";
-import Button from "@components/ui/Button";
import InfoBadge from "@components/ui/InfoBadge";
import { Scheduler } from "@components/ui/Scheduler";
import CheckboxField from "@components/ui/form/CheckboxField";
diff --git a/apps/web/pages/event-types/index.tsx b/apps/web/pages/event-types/index.tsx
index 5d0c1f0b0c..1547811c8f 100644
--- a/apps/web/pages/event-types/index.tsx
+++ b/apps/web/pages/event-types/index.tsx
@@ -17,7 +17,11 @@ import Link from "next/link";
import { useRouter } from "next/router";
import React, { Fragment, useEffect, useState } from "react";
+import { useLocale } from "@calcom/lib/hooks/useLocale";
+import showToast from "@calcom/lib/notification";
import { Button } from "@calcom/ui";
+import { Alert } from "@calcom/ui/Alert";
+import { Dialog, DialogTrigger } from "@calcom/ui/Dialog";
import Dropdown, {
DropdownMenuTrigger,
DropdownMenuContent,
@@ -28,17 +32,13 @@ import Dropdown, {
import { QueryCell } from "@lib/QueryCell";
import classNames from "@lib/classNames";
import { HttpError } from "@lib/core/http/error";
-import { useLocale } from "@lib/hooks/useLocale";
-import showToast from "@lib/notification";
import { inferQueryOutput, trpc } from "@lib/trpc";
-import { Dialog, DialogTrigger } from "@components/Dialog";
import Shell from "@components/Shell";
import { Tooltip } from "@components/Tooltip";
import ConfirmationDialogContent from "@components/dialog/ConfirmationDialogContent";
import CreateEventTypeButton from "@components/eventtype/CreateEventType";
import EventTypeDescription from "@components/eventtype/EventTypeDescription";
-import { Alert } from "@components/ui/Alert";
import Avatar from "@components/ui/Avatar";
import AvatarGroup from "@components/ui/AvatarGroup";
import Badge from "@components/ui/Badge";
diff --git a/apps/web/pages/getting-started.tsx b/apps/web/pages/getting-started.tsx
index 93a60eca28..fb912f7b4c 100644
--- a/apps/web/pages/getting-started.tsx
+++ b/apps/web/pages/getting-started.tsx
@@ -17,6 +17,10 @@ import { useForm } from "react-hook-form";
import TimezoneSelect from "react-timezone-select";
import * as z from "zod";
+import { Alert } from "@calcom/ui/Alert";
+import Button from "@calcom/ui/Button";
+import { Form } from "@calcom/ui/form/fields";
+
import { asStringOrNull } from "@lib/asStringOrNull";
import { getSession } from "@lib/auth";
import { DEFAULT_SCHEDULE } from "@lib/availability";
@@ -31,10 +35,7 @@ import { Schedule as ScheduleType } from "@lib/types/schedule";
import { ClientSuspense } from "@components/ClientSuspense";
import Loader from "@components/Loader";
-import { Form } from "@components/form/fields";
import { CalendarListContainer } from "@components/integrations/CalendarListContainer";
-import { Alert } from "@components/ui/Alert";
-import Button from "@components/ui/Button";
import Text from "@components/ui/Text";
import Schedule from "@components/ui/form/Schedule";
diff --git a/apps/web/pages/integrations/index.tsx b/apps/web/pages/integrations/index.tsx
index 94fd380d65..aeddc900a7 100644
--- a/apps/web/pages/integrations/index.tsx
+++ b/apps/web/pages/integrations/index.tsx
@@ -3,11 +3,14 @@ import Image from "next/image";
import React, { useEffect, useState } from "react";
import { JSONObject } from "superjson/dist/types";
+import showToast from "@calcom/lib/notification";
+import { Alert } from "@calcom/ui/Alert";
+import Button from "@calcom/ui/Button";
+
import { QueryCell } from "@lib/QueryCell";
import classNames from "@lib/classNames";
import { HttpError } from "@lib/core/http/error";
import { useLocale } from "@lib/hooks/useLocale";
-import showToast from "@lib/notification";
import { trpc } from "@lib/trpc";
import { ClientSuspense } from "@components/ClientSuspense";
@@ -19,8 +22,6 @@ import ConnectIntegration from "@components/integrations/ConnectIntegrations";
import DisconnectIntegration from "@components/integrations/DisconnectIntegration";
import IntegrationListItem from "@components/integrations/IntegrationListItem";
import SubHeadingTitleWithConnections from "@components/integrations/SubHeadingTitleWithConnections";
-import { Alert } from "@components/ui/Alert";
-import Button from "@components/ui/Button";
import WebhookListContainer from "@components/webhook/WebhookListContainer";
function IframeEmbedContainer() {
diff --git a/apps/web/pages/sandbox/Alert.tsx b/apps/web/pages/sandbox/Alert.tsx
index ca085e1fea..a056435148 100644
--- a/apps/web/pages/sandbox/Alert.tsx
+++ b/apps/web/pages/sandbox/Alert.tsx
@@ -1,6 +1,6 @@
import React from "react";
-import { Alert, AlertProps } from "@components/ui/Alert";
+import { Alert, AlertProps } from "@calcom/ui/Alert";
import { sandboxPage } from ".";
diff --git a/apps/web/pages/sandbox/Button.tsx b/apps/web/pages/sandbox/Button.tsx
index dce3f6d889..3e548f9607 100644
--- a/apps/web/pages/sandbox/Button.tsx
+++ b/apps/web/pages/sandbox/Button.tsx
@@ -1,7 +1,7 @@
import { PlusIcon } from "@heroicons/react/solid";
import React from "react";
-import { Button, ButtonBaseProps } from "@components/ui/Button";
+import { Button, ButtonBaseProps } from "@calcom/ui/Button";
import { sandboxPage } from ".";
diff --git a/apps/web/pages/sandbox/List.tsx b/apps/web/pages/sandbox/List.tsx
index 38b7b35995..4bae6b7119 100644
--- a/apps/web/pages/sandbox/List.tsx
+++ b/apps/web/pages/sandbox/List.tsx
@@ -1,7 +1,8 @@
import React, { useState } from "react";
+import Button from "@calcom/ui/Button";
+
import { List, ListItem } from "@components/List";
-import Button from "@components/ui/Button";
import { sandboxPage } from ".";
diff --git a/apps/web/pages/sandbox/form.tsx b/apps/web/pages/sandbox/form.tsx
index 181d70f4ea..5b4fc55e32 100644
--- a/apps/web/pages/sandbox/form.tsx
+++ b/apps/web/pages/sandbox/form.tsx
@@ -1,6 +1,6 @@
import React from "react";
-import { Label, Input, TextField } from "@components/form/fields";
+import { Label, Input, TextField } from "@calcom/ui/form/fields";
import { sandboxPage } from ".";
diff --git a/apps/web/pages/settings/billing.tsx b/apps/web/pages/settings/billing.tsx
index 79802faf44..de79b1b34d 100644
--- a/apps/web/pages/settings/billing.tsx
+++ b/apps/web/pages/settings/billing.tsx
@@ -2,11 +2,12 @@ import { ExternalLinkIcon } from "@heroicons/react/solid";
import { ReactNode } from "react";
import { useIntercom } from "react-use-intercom";
+import Button from "@calcom/ui/Button";
+
import { useLocale } from "@lib/hooks/useLocale";
import SettingsShell from "@components/SettingsShell";
import Shell, { useMeQuery } from "@components/Shell";
-import Button from "@components/ui/Button";
type CardProps = { title: string; description: string; className?: string; children: ReactNode };
const Card = ({ title, description, className = "", children }: CardProps): JSX.Element => (
diff --git a/apps/web/pages/settings/profile.tsx b/apps/web/pages/settings/profile.tsx
index 2121ec6144..42dde13e1b 100644
--- a/apps/web/pages/settings/profile.tsx
+++ b/apps/web/pages/settings/profile.tsx
@@ -9,27 +9,28 @@ import { ComponentProps, FormEvent, RefObject, useEffect, useMemo, useRef, useSt
import Select from "react-select";
import TimezoneSelect, { ITimezone } from "react-timezone-select";
+import showToast from "@calcom/lib/notification";
+import { Alert } from "@calcom/ui/Alert";
+import Button from "@calcom/ui/Button";
+import { Dialog, DialogClose, DialogContent, DialogTrigger } from "@calcom/ui/Dialog";
+import { TextField } from "@calcom/ui/form/fields";
+
import { QueryCell } from "@lib/QueryCell";
import { asStringOrNull, asStringOrUndefined } from "@lib/asStringOrNull";
import { getSession } from "@lib/auth";
import { nameOfDay } from "@lib/core/i18n/weekday";
import { useLocale } from "@lib/hooks/useLocale";
import { isBrandingHidden } from "@lib/isBrandingHidden";
-import showToast from "@lib/notification";
import prisma from "@lib/prisma";
import { trpc } from "@lib/trpc";
import { inferSSRProps } from "@lib/types/inferSSRProps";
-import { Dialog, DialogClose, DialogContent, DialogTrigger } from "@components/Dialog";
import ImageUploader from "@components/ImageUploader";
import SettingsShell from "@components/SettingsShell";
import Shell from "@components/Shell";
import ConfirmationDialogContent from "@components/dialog/ConfirmationDialogContent";
-import { TextField } from "@components/form/fields";
-import { Alert } from "@components/ui/Alert";
import Avatar from "@components/ui/Avatar";
import Badge from "@components/ui/Badge";
-import Button from "@components/ui/Button";
import ColorPicker from "@components/ui/colorpicker";
type Props = inferSSRProps;
diff --git a/apps/web/pages/settings/teams/[id]/index.tsx b/apps/web/pages/settings/teams/[id]/index.tsx
index 4fd74ce647..d15be6600b 100644
--- a/apps/web/pages/settings/teams/[id]/index.tsx
+++ b/apps/web/pages/settings/teams/[id]/index.tsx
@@ -3,11 +3,13 @@ import { MembershipRole } from "@prisma/client";
import { useRouter } from "next/router";
import { useEffect, useState } from "react";
+import showToast from "@calcom/lib/notification";
+import { Alert } from "@calcom/ui/Alert";
+import { Button } from "@calcom/ui/Button";
import SAMLConfiguration from "@ee/components/saml/Configuration";
import { getPlaceholderAvatar } from "@lib/getPlaceholderAvatar";
import { useLocale } from "@lib/hooks/useLocale";
-import showToast from "@lib/notification";
import { trpc } from "@lib/trpc";
import Loader from "@components/Loader";
@@ -17,9 +19,7 @@ import MemberList from "@components/team/MemberList";
import TeamSettings from "@components/team/TeamSettings";
import TeamSettingsRightSidebar from "@components/team/TeamSettingsRightSidebar";
import { UpgradeToFlexibleProModal } from "@components/team/UpgradeToFlexibleProModal";
-import { Alert } from "@components/ui/Alert";
import Avatar from "@components/ui/Avatar";
-import { Button } from "@components/ui/Button";
export function TeamSettingsPage() {
const { t } = useLocale();
diff --git a/apps/web/pages/settings/teams/index.tsx b/apps/web/pages/settings/teams/index.tsx
index 00a1b8ed0b..a034670772 100644
--- a/apps/web/pages/settings/teams/index.tsx
+++ b/apps/web/pages/settings/teams/index.tsx
@@ -4,6 +4,9 @@ import { useSession } from "next-auth/react";
import { Trans } from "next-i18next";
import { useState } from "react";
+import { Alert } from "@calcom/ui/Alert";
+import Button from "@calcom/ui/Button";
+
import { useLocale } from "@lib/hooks/useLocale";
import { trpc } from "@lib/trpc";
@@ -13,8 +16,6 @@ import SettingsShell from "@components/SettingsShell";
import Shell, { useMeQuery } from "@components/Shell";
import TeamCreateModal from "@components/team/TeamCreateModal";
import TeamList from "@components/team/TeamList";
-import { Alert } from "@components/ui/Alert";
-import Button from "@components/ui/Button";
export default function Teams() {
const { t } = useLocale();
diff --git a/apps/web/pages/success.tsx b/apps/web/pages/success.tsx
index ac8f70fa75..5810bdeef8 100644
--- a/apps/web/pages/success.tsx
+++ b/apps/web/pages/success.tsx
@@ -10,6 +10,9 @@ import Link from "next/link";
import { useRouter } from "next/router";
import { useEffect, useState } from "react";
+import Button from "@calcom/ui/Button";
+import { EmailInput } from "@calcom/ui/form/fields";
+
import { asStringOrThrow, asStringOrNull } from "@lib/asStringOrNull";
import { getEventName } from "@lib/event";
import { useLocale } from "@lib/hooks/useLocale";
@@ -20,9 +23,7 @@ import { isBrowserLocale24h } from "@lib/timeFormat";
import { inferSSRProps } from "@lib/types/inferSSRProps";
import CustomBranding from "@components/CustomBranding";
-import { EmailInput } from "@components/form/fields";
import { HeadSeo } from "@components/seo/head-seo";
-import Button from "@components/ui/Button";
import { ssrInit } from "@server/lib/ssr";
diff --git a/apps/web/pages/team/[slug].tsx b/apps/web/pages/team/[slug].tsx
index b568c9c441..47266e75e0 100644
--- a/apps/web/pages/team/[slug].tsx
+++ b/apps/web/pages/team/[slug].tsx
@@ -4,6 +4,8 @@ import { GetServerSidePropsContext } from "next";
import Link from "next/link";
import React from "react";
+import Button from "@calcom/ui/Button";
+
import { getPlaceholderAvatar } from "@lib/getPlaceholderAvatar";
import { useLocale } from "@lib/hooks/useLocale";
import useTheme from "@lib/hooks/useTheme";
@@ -17,7 +19,6 @@ import { HeadSeo } from "@components/seo/head-seo";
import Team from "@components/team/screens/Team";
import Avatar from "@components/ui/Avatar";
import AvatarGroup from "@components/ui/AvatarGroup";
-import Button from "@components/ui/Button";
import Text from "@components/ui/Text";
export type TeamPageProps = inferSSRProps;
diff --git a/apps/web/pages/video/meeting-ended/[uid].tsx b/apps/web/pages/video/meeting-ended/[uid].tsx
index 19daaaf4ca..0484b97974 100644
--- a/apps/web/pages/video/meeting-ended/[uid].tsx
+++ b/apps/web/pages/video/meeting-ended/[uid].tsx
@@ -6,12 +6,13 @@ import { getSession } from "next-auth/react";
import { useRouter } from "next/router";
import { useEffect } from "react";
+import Button from "@calcom/ui/Button";
+
import prisma from "@lib/prisma";
import { detectBrowserTimeFormat } from "@lib/timeFormat";
import { inferSSRProps } from "@lib/types/inferSSRProps";
import { HeadSeo } from "@components/seo/head-seo";
-import Button from "@components/ui/Button";
export default function MeetingUnavailable(props: inferSSRProps) {
const router = useRouter();
diff --git a/apps/web/pages/video/meeting-not-started/[uid].tsx b/apps/web/pages/video/meeting-not-started/[uid].tsx
index 7e5268ffa7..c3ad568652 100644
--- a/apps/web/pages/video/meeting-not-started/[uid].tsx
+++ b/apps/web/pages/video/meeting-not-started/[uid].tsx
@@ -6,12 +6,13 @@ import { getSession } from "next-auth/react";
import { useRouter } from "next/router";
import { useEffect } from "react";
+import Button from "@calcom/ui/Button";
+
import prisma from "@lib/prisma";
import { detectBrowserTimeFormat } from "@lib/timeFormat";
import { inferSSRProps } from "@lib/types/inferSSRProps";
import { HeadSeo } from "@components/seo/head-seo";
-import Button from "@components/ui/Button";
export default function MeetingNotStarted(props: inferSSRProps) {
const router = useRouter();
diff --git a/apps/web/pages/video/no-meeting-found.tsx b/apps/web/pages/video/no-meeting-found.tsx
index c5a799f8d6..c7685cecef 100644
--- a/apps/web/pages/video/no-meeting-found.tsx
+++ b/apps/web/pages/video/no-meeting-found.tsx
@@ -1,10 +1,11 @@
import { XIcon } from "@heroicons/react/outline";
import { ArrowRightIcon } from "@heroicons/react/solid";
+import Button from "@calcom/ui/Button";
+
import { useLocale } from "@lib/hooks/useLocale";
import { HeadSeo } from "@components/seo/head-seo";
-import Button from "@components/ui/Button";
export default function NoMeetingFound() {
const { t } = useLocale();
diff --git a/apps/web/server/routers/viewer/webhook.tsx b/apps/web/server/routers/viewer/webhook.tsx
index e69fee1a72..8386d8540a 100644
--- a/apps/web/server/routers/viewer/webhook.tsx
+++ b/apps/web/server/routers/viewer/webhook.tsx
@@ -1,7 +1,8 @@
import { v4 } from "uuid";
import { z } from "zod";
-import { getErrorFromUnknown } from "@lib/errors";
+import { getErrorFromUnknown } from "@calcom/lib/errors";
+
import { WEBHOOK_TRIGGER_EVENTS } from "@lib/webhooks/constants";
import sendPayload from "@lib/webhooks/sendPayload";
diff --git a/apps/web/lib/errors.ts b/packages/lib/errors.ts
similarity index 100%
rename from apps/web/lib/errors.ts
rename to packages/lib/errors.ts
diff --git a/packages/lib/hooks/useLocale.ts b/packages/lib/hooks/useLocale.ts
new file mode 100644
index 0000000000..2fae0c7b8d
--- /dev/null
+++ b/packages/lib/hooks/useLocale.ts
@@ -0,0 +1,10 @@
+import { useTranslation } from "next-i18next";
+
+export const useLocale = () => {
+ const { i18n, t } = useTranslation("common");
+
+ return {
+ i18n,
+ t,
+ };
+};
diff --git a/apps/web/lib/notification.ts b/packages/lib/notification.ts
similarity index 100%
rename from apps/web/lib/notification.ts
rename to packages/lib/notification.ts
diff --git a/packages/lib/package.json b/packages/lib/package.json
index 8842647906..4df17b6af8 100644
--- a/packages/lib/package.json
+++ b/packages/lib/package.json
@@ -7,7 +7,9 @@
"dependencies": {
"bcryptjs": "^2.4.3",
"dayjs": "^1.10.4",
- "dayjs-business-time": "^1.0.4"
+ "dayjs-business-time": "^1.0.4",
+ "next-i18next": "^8.9.0",
+ "react-hot-toast": "^2.1.0"
},
"devDependencies": {
"@calcom/tsconfig": "*",
diff --git a/apps/web/components/ui/Alert.tsx b/packages/ui/Alert.tsx
similarity index 100%
rename from apps/web/components/ui/Alert.tsx
rename to packages/ui/Alert.tsx
diff --git a/apps/web/components/Dialog.tsx b/packages/ui/Dialog.tsx
similarity index 100%
rename from apps/web/components/Dialog.tsx
rename to packages/ui/Dialog.tsx
diff --git a/apps/web/components/form/fields.tsx b/packages/ui/form/fields.tsx
similarity index 96%
rename from apps/web/components/form/fields.tsx
rename to packages/ui/form/fields.tsx
index 2992ba5a33..44dcb7dd32 100644
--- a/apps/web/components/form/fields.tsx
+++ b/packages/ui/form/fields.tsx
@@ -2,12 +2,12 @@ import { useId } from "@radix-ui/react-id";
import { forwardRef, ReactElement, ReactNode, Ref } from "react";
import { FieldValues, FormProvider, SubmitHandler, useFormContext, UseFormReturn } from "react-hook-form";
-import classNames from "@lib/classNames";
-import { getErrorFromUnknown } from "@lib/errors";
-import { useLocale } from "@lib/hooks/useLocale";
-import showToast from "@lib/notification";
+import classNames from "@calcom/lib/classNames";
+import { getErrorFromUnknown } from "@calcom/lib/errors";
+import { useLocale } from "@calcom/lib/hooks/useLocale";
+import showToast from "@calcom/lib/notification";
-import { Alert } from "@components/ui/Alert";
+import { Alert } from "../Alert";
type InputProps = Omit & { name: string };
diff --git a/packages/ui/package.json b/packages/ui/package.json
index a0f2ab17c8..e0ada51b68 100644
--- a/packages/ui/package.json
+++ b/packages/ui/package.json
@@ -4,6 +4,10 @@
"main": "./index.tsx",
"types": "./index.tsx",
"license": "MIT",
+ "dependencies": {
+ "@radix-ui/react-dialog": "^0.1.0",
+ "next": "^12.1.0"
+ },
"devDependencies": {
"@calcom/config": "*",
"@calcom/lib": "*",