fix: replace deprecated Phosphor icons with latest *Icon alternatives

ui/src/modules/auth/pages/Login.tsx

@@ -1,7 +1,7 @@
 import { useState } from "react"
 import { useNavigate } from "react-router-dom"
 import { Form, Input, Button, Card, message } from "antd"
-import { User, LockKey } from "@phosphor-icons/react"
+import { UserIcon, LockKeyIcon } from "@phosphor-icons/react"
 
 import { useAppStore } from "../../../store"
 import { LoginArgs } from "../../../types"
@@ -57,7 +57,7 @@ const Login: React.FC = () => {
 					>
 						<Input
 							prefix={
-								<User
+								<UserIcon
 									className="site-form-item-icon text-gray-500"
 									weight="bold"
 									size={18}
@@ -77,7 +77,7 @@ const Login: React.FC = () => {
 					>
 						<Input.Password
 							prefix={
-								<LockKey
+								<LockKeyIcon
 									className="site-form-item-icon text-gray-500"
 									weight="bold"
 									size={18}

ui/src/modules/common/Modals/ClearDataModal.tsx

@@ -1,5 +1,5 @@
 import { useNavigate } from "react-router-dom"
-import { Warning } from "@phosphor-icons/react"
+import { WarningIcon } from "@phosphor-icons/react"
 import { Button, message, Modal } from "antd"
 import { useAppStore } from "../../../store"
 
@@ -15,7 +15,7 @@ const ClearDataModal = () => {
 			centered
 		>
 			<div className="flex w-full flex-col items-center justify-center gap-8">
-				<Warning
+				<WarningIcon
 					className="size-16 text-danger"
 					weight="fill"
 				/>

ui/src/modules/common/Modals/ClearDestinationAndSyncModal.tsx

@@ -1,5 +1,5 @@
 import { useNavigate } from "react-router-dom"
-import { Warning } from "@phosphor-icons/react"
+import { WarningIcon } from "@phosphor-icons/react"
 import { Button, message, Modal } from "antd"
 import { useAppStore } from "../../../store"
 
@@ -18,7 +18,7 @@ const ClearDestinationAndSyncModal = () => {
 			centered
 		>
 			<div className="flex w-full flex-col items-center justify-center gap-8">
-				<Warning
+				<WarningIcon
 					className="size-16 text-primary"
 					weight="fill"
 				/>

ui/src/modules/common/Modals/DeleteJobModal.tsx

@@ -1,6 +1,6 @@
 import { useNavigate } from "react-router-dom"
 import { Button, message, Modal } from "antd"
-import { Warning } from "@phosphor-icons/react"
+import { WarningIcon } from "@phosphor-icons/react"
 
 import { useAppStore } from "../../../store"
 
@@ -25,7 +25,7 @@ const DeleteJobModal = ({
 			centered
 		>
 			<div className="flex w-full flex-col items-center justify-center gap-8">
-				<Warning
+				<WarningIcon
 					className="size-16 text-danger"
 					weight="fill"
 				/>

ui/src/modules/common/Modals/DeleteModal.tsx

@@ -1,6 +1,6 @@
 import { formatDistanceToNow } from "date-fns"
 import { Button, message, Modal, Table } from "antd"
-import { Warning } from "@phosphor-icons/react"
+import { WarningIcon } from "@phosphor-icons/react"
 
 import { useAppStore } from "../../../store"
 import { Entity } from "../../../types"
@@ -138,7 +138,7 @@ const DeleteModal = ({ fromSource }: DeleteModalProps) => {
 			width={600}
 		>
 			<div className="flex flex-col items-center justify-center gap-7 py-8">
-				<Warning
+				<WarningIcon
 					weight="fill"
 					className="h-[55px] w-[63px] text-danger"
 				/>

ui/src/modules/common/Modals/DestinationDatabaseModal.tsx

@@ -8,7 +8,7 @@ import {
 	LABELS,
 	NAMESPACE_PLACEHOLDER,
 } from "../../../utils/constants"
-import { DotOutline } from "@phosphor-icons/react"
+import { DotOutlineIcon } from "@phosphor-icons/react"
 import { DestinationDatabaseModalProps } from "../../../types"
 
 type FormatType = (typeof FORMAT_OPTIONS)[keyof typeof FORMAT_OPTIONS]
@@ -177,7 +177,7 @@ const DestinationDatabaseModal = ({
 										key={index}
 										className="flex items-center text-sm"
 									>
-										<DotOutline
+										<DotOutlineIcon
 											size={24}
 											weight="fill"
 										/>

ui/src/modules/common/Modals/EntityCancelModal.tsx

@@ -1,7 +1,11 @@
 import React from "react"
 import { useNavigate } from "react-router-dom"
 import { Button, Modal } from "antd"
-import { GitCommit, LinktreeLogo, Path } from "@phosphor-icons/react"
+import {
+	GitCommitIcon,
+	LinktreeLogoIcon,
+	PathIcon,
+} from "@phosphor-icons/react"
 
 import { useAppStore } from "../../../store"
 import { JOB_CREATION_STEPS } from "../../../utils/constants"
@@ -28,11 +32,11 @@ const EntityCancelModal: React.FC<EntityCancelModalProps> = ({
 			<div className="flex flex-col items-center justify-center gap-6 py-4">
 				<div className="rounded-xl bg-neutral-light p-2">
 					{type === JOB_CREATION_STEPS.SOURCE ? (
-						<LinktreeLogo className="z-10 size-6 text-text-link" />
+						<LinktreeLogoIcon className="z-10 size-6 text-text-link" />
 					) : type === JOB_CREATION_STEPS.DESTINATION ? (
-						<Path className="z-10 size-6 text-text-link" />
+						<PathIcon className="z-10 size-6 text-text-link" />
 					) : (
-						<GitCommit className="z-10 size-6 text-text-link" />
+						<GitCommitIcon className="z-10 size-6 text-text-link" />
 					)}
 				</div>
 				<div className="mb-4 text-center text-xl font-medium">

ui/src/modules/common/Modals/EntityEditModal.tsx

@@ -1,7 +1,7 @@
 import { useNavigate } from "react-router-dom"
 import { formatDistanceToNow } from "date-fns"
 import { Button, Modal, Table, message } from "antd"
-import { InfoIcon, Warning } from "@phosphor-icons/react"
+import { InfoIcon, WarningIcon } from "@phosphor-icons/react"
 
 import { useAppStore } from "../../../store"
 import { sourceService } from "../../../api"
@@ -165,7 +165,7 @@ const EntityEditModal = ({ entityType }: EntityEditModalProps) => {
 			<Modal
 				title={
 					<div className="flex justify-center">
-						<Warning
+						<WarningIcon
 							weight="fill"
 							className="size-12 text-primary"
 						/>

ui/src/modules/common/Modals/EntitySavedModal.tsx

@@ -1,5 +1,10 @@
 import { useNavigate } from "react-router-dom"
-import { Check, GitCommit, Path, LinktreeLogo } from "@phosphor-icons/react"
+import {
+	CheckIcon,
+	GitCommitIcon,
+	PathIcon,
+	LinktreeLogoIcon,
+} from "@phosphor-icons/react"
 import { Button, Modal } from "antd"
 import { useAppStore } from "../../../store"
 import { EntitySavedModalProps } from "../../../types"
@@ -23,11 +28,11 @@ const EntitySavedModal: React.FC<EntitySavedModalProps> = ({
 			<div className="flex flex-col items-center justify-center gap-4 py-4">
 				<div className="rounded-xl bg-neutral-light p-2">
 					{type === "source" ? (
-						<LinktreeLogo className="z-10 size-5 text-text-link" />
+						<LinktreeLogoIcon className="z-10 size-5 text-text-link" />
 					) : type === JOB_CREATION_STEPS.STREAMS ? (
-						<GitCommit className="z-10 size-5 text-text-link" />
+						<GitCommitIcon className="z-10 size-5 text-text-link" />
 					) : (
-						<Path className="z-10 size-5 text-text-link" />
+						<PathIcon className="z-10 size-5 text-text-link" />
 					)}
 				</div>
 				<div className="mb-4 text-center text-xl font-medium">
@@ -40,11 +45,11 @@ const EntitySavedModal: React.FC<EntitySavedModalProps> = ({
 				<div className="mb-4 flex w-full items-center justify-between gap-3 rounded-xl border border-[#D9D9D9] px-4 py-2">
 					<div className="flex items-center gap-1">
 						{type === "source" ? (
-							<LinktreeLogo className="size-5" />
+							<LinktreeLogoIcon className="size-5" />
 						) : type === JOB_CREATION_STEPS.STREAMS ? (
-							<GitCommit className="size-5" />
+							<GitCommitIcon className="size-5" />
 						) : (
-							<Path className="size-5" />
+							<PathIcon className="size-5" />
 						)}
 						<span>
 							{entityName ||
@@ -56,7 +61,7 @@ const EntitySavedModal: React.FC<EntitySavedModalProps> = ({
 						</span>
 					</div>
 					<div className="flex gap-1 rounded-xl bg-[#f6ffed] px-2 py-1">
-						<Check className="size-5 text-success" />
+						<CheckIcon className="size-5 text-success" />
 						<span className="ml-auto text-success">Success</span>
 					</div>
 				</div>

ui/src/modules/common/components/DocumentationPanel.tsx

@@ -2,9 +2,9 @@ import { useState, useRef, useEffect } from "react"
 import clsx from "clsx"
 import { Button, Tooltip } from "antd"
 import {
-	CornersOut,
-	CaretRight,
-	Info,
+	CornersOutIcon,
+	CaretRightIcon,
+	InfoIcon,
 	ArrowSquareOutIcon,
 } from "@phosphor-icons/react"
 
@@ -92,7 +92,7 @@ const DocumentationPanel: React.FC<DocumentationPanelProps> = ({
 					className="flex items-center bg-blue-600"
 					onClick={toggleDocPanel}
 					icon={
-						<CornersOut
+						<CornersOutIcon
 							size={16}
 							className="mr-2"
 						/>
@@ -121,7 +121,7 @@ const DocumentationPanel: React.FC<DocumentationPanelProps> = ({
 								isDocPanelCollapsed ? "rotate-180" : "rotate-0",
 							)}
 						>
-							<CaretRight size={16} />
+							<CaretRightIcon size={16} />
 						</div>
 					</button>
 				</div>
@@ -174,7 +174,7 @@ const DocumentationPanel: React.FC<DocumentationPanelProps> = ({
 						<div className="flex h-full w-full items-start justify-center">
 							<div className="absolute right-3 top-10 z-10 flex flex-col gap-2">
 								<div className="rounded-xl border border-gray-200 bg-neutral-light p-2">
-									<Info
+									<InfoIcon
 										size={25}
 										className="cursor-pointer text-primary transition-all duration-300 ease-in-out hover:text-primary/80"
 										onClick={toggleDocPanel}

ui/src/modules/common/components/Form/ArrayFieldTemplate.tsx

@@ -4,7 +4,7 @@
 
 import { ArrayFieldTemplateProps } from "@rjsf/utils"
 import { Button } from "antd"
-import { Plus, Trash } from "@phosphor-icons/react"
+import { PlusIcon, TrashIcon } from "@phosphor-icons/react"
 
 const ArrayFieldTemplate = (props: ArrayFieldTemplateProps) => {
 	const { items, canAdd, onAddClick } = props
@@ -25,7 +25,7 @@ const ArrayFieldTemplate = (props: ArrayFieldTemplateProps) => {
 									type="text"
 									danger
 									onClick={item.onDropIndexClick(item.index)}
-									icon={<Trash className="text-red-500" />}
+									icon={<TrashIcon className="text-red-500" />}
 								/>
 							)}
 						</div>
@@ -40,7 +40,7 @@ const ArrayFieldTemplate = (props: ArrayFieldTemplateProps) => {
 						size="middle"
 						className="px-3"
 						onClick={onAddClick}
-						icon={<Plus className="size-4" />}
+						icon={<PlusIcon className="size-4" />}
 					>
 						Add
 					</Button>

ui/src/modules/common/components/Form/CustomFieldTemplate.tsx

@@ -1,5 +1,5 @@
 import { FieldTemplateProps } from "@rjsf/utils"
-import { Info, Plus, Trash } from "@phosphor-icons/react"
+import { InfoIcon, PlusIcon, TrashIcon } from "@phosphor-icons/react"
 import { Tooltip, Button } from "antd"
 import { useState, useEffect } from "react"
 
@@ -42,7 +42,7 @@ function KeyValueRow({
 			<Button
 				type="text"
 				onClick={() => onDelete(keyName)}
-				icon={<Trash className="text-red-500" />}
+				icon={<TrashIcon className="text-red-500" />}
 			/>
 		</div>
 	)
@@ -81,7 +81,7 @@ function NewKeyValueRow({
 			<Button
 				type="text"
 				onClick={onAdd}
-				icon={<Plus className="text-blue-500" />}
+				icon={<PlusIcon className="text-blue-500" />}
 			/>
 		</div>
 	)
@@ -225,7 +225,7 @@ export default function CustomFieldTemplate(props: FieldTemplateProps) {
 							title={description || rawDescription}
 							placement="right"
 						>
-							<Info className="ml-1 text-gray-500 hover:text-gray-600" />
+							<InfoIcon className="ml-1 text-gray-500 hover:text-gray-600" />
 						</Tooltip>
 					)}
 				</label>

ui/src/modules/common/components/Layout.tsx

@@ -2,7 +2,12 @@ import { useState } from "react"
 import clsx from "clsx"
 import { NavLink, Link, useNavigate } from "react-router-dom"
 import { LayoutProps } from "antd"
-import { CaretLeft, Info, X, SignOut } from "@phosphor-icons/react"
+import {
+	CaretLeftIcon,
+	InfoIcon,
+	SignOutIcon,
+	XIcon,
+} from "@phosphor-icons/react"
 
 import { useAppStore } from "../../../store"
 import { NAV_ITEMS } from "../../../utils/constants"
@@ -17,13 +22,13 @@ const UpdateNotification: React.FC<{ onClose: () => void }> = ({ onClose }) => (
 				onClick={onClose}
 				className="absolute right-2 top-2 rounded-full p-1 hover:bg-gray-200"
 			>
-				<X
+				<XIcon
 					size={12}
 					color="#383838"
 				/>
 			</button>
 			<div className="flex items-center gap-2">
-				<Info
+				<InfoIcon
 					weight="fill"
 					size={17}
 					color="#203FDD"
@@ -106,7 +111,7 @@ const Sidebar: React.FC<{
 					onClick={onLogout}
 					className="flex w-full items-center rounded-xl p-3 text-gray-700 hover:bg-gray-100 hover:text-black"
 				>
-					<SignOut
+					<SignOutIcon
 						className="mr-3 flex-shrink-0"
 						size={20}
 					/>
@@ -124,7 +129,7 @@ const Sidebar: React.FC<{
 						collapsed ? "rotate-180" : "rotate-0",
 					)}
 				>
-					<CaretLeft size={16} />
+					<CaretLeftIcon size={16} />
 				</div>
 			</button>
 		</div>

ui/src/modules/destinations/components/DestinationEmptyState.tsx

@@ -1,5 +1,5 @@
 import { Button } from "antd"
-import { PlayCircle, Plus } from "@phosphor-icons/react"
+import { PlayCircleIcon, PlusIcon } from "@phosphor-icons/react"
 
 import { DestinationTutorialYTLink } from "../../../utils/constants"
 import FirstDestination from "../../../assets/FirstDestination.svg"
@@ -29,7 +29,7 @@ const DestinationEmptyState = ({
 				className="border-1 mb-12 border-[1px] border-[#D9D9D9] bg-white px-6 py-4 text-black"
 				onClick={handleCreateDestination}
 			>
-				<Plus />
+				<PlusIcon />
 				New Destination
 			</Button>
 			<div className="w-[412px] rounded-xl border-[1px] border-[#D9D9D9] bg-white p-4 shadow-sm">
@@ -48,7 +48,7 @@ const DestinationEmptyState = ({
 					</a>
 					<div className="flex-1">
 						<div className="mb-1 flex items-center gap-1 text-xs">
-							<PlayCircle color="#9f9f9f" />
+							<PlayCircleIcon color="#9f9f9f" />
 							<span className="text-text-placeholder">OLake/ Tutorial</span>
 						</div>
 						<div className="text-xs">