Update dependencies and refactor icon imports across the codebase

.ncurc.json

@@ -1,6 +1,7 @@
 {
   "$schema": "https://raw.githubusercontent.com/raineorshine/npm-check-updates/main/src/types/RunOptions.json",
   "upgrade": true,
+  "target": "minor",
   "install": "always",
   "packageManager": "pnpm",
   "reject": [

apps/client/src/components/ai-actions.tsx

@@ -1,11 +1,11 @@
 import { t } from "@lingui/macro";
 import {
-  CaretDown,
-  ChatTeardropText,
-  CircleNotch,
-  Exam,
-  MagicWand,
-  PenNib,
+  CaretDownIcon,
+  ChatTeardropTextIcon,
+  CircleNotchIcon,
+  ExamIcon,
+  MagicWandIcon,
+  PenNibIcon,
 } from "@phosphor-icons/react";
 import {
   Badge,
@@ -75,27 +75,31 @@ export const AiActions = ({ value, onChange, className }: Props) => {
           variant="primary"
           className="-rotate-90 bg-background px-2 text-[10px] leading-[10px]"
         >
-          <MagicWand size={10} className="mr-1" />
+          <MagicWandIcon size={10} className="mr-1" />
           {t`AI`}
         </Badge>
       </div>
 
       <Button size="sm" variant="outline" disabled={!!loading} onClick={() => onClick("improve")}>
-        {loading === "improve" ? <CircleNotch className="animate-spin" /> : <PenNib />}
+        {loading === "improve" ? <CircleNotchIcon className="animate-spin" /> : <PenNibIcon />}
         <span className="ml-2 text-xs">{t`Improve Writing`}</span>
       </Button>
 
       <Button size="sm" variant="outline" disabled={!!loading} onClick={() => onClick("fix")}>
-        {loading === "fix" ? <CircleNotch className="animate-spin" /> : <Exam />}
+        {loading === "fix" ? <CircleNotchIcon className="animate-spin" /> : <ExamIcon />}
         <span className="ml-2 text-xs">{t`Fix Spelling & Grammar`}</span>
       </Button>
 
       <DropdownMenu>
         <DropdownMenuTrigger asChild>
           <Button size="sm" variant="outline" disabled={!!loading}>
-            {loading === "tone" ? <CircleNotch className="animate-spin" /> : <ChatTeardropText />}
+            {loading === "tone" ? (
+              <CircleNotchIcon className="animate-spin" />
+            ) : (
+              <ChatTeardropTextIcon />
+            )}
             <span className="mx-2 text-xs">{t`Change Tone`}</span>
-            <CaretDown />
+            <CaretDownIcon />
           </Button>
         </DropdownMenuTrigger>
         <DropdownMenuContent>

apps/client/src/components/locale-combobox.tsx

@@ -1,5 +1,5 @@
 import { t } from "@lingui/macro";
-import { CaretDown, Check } from "@phosphor-icons/react";
+import { CaretDownIcon, CheckIcon } from "@phosphor-icons/react";
 import {
   Button,
   Command,
@@ -61,7 +61,7 @@ export const LocaleCombobox = ({ value, onValueChange }: Props) => {
                     onValueChange(result.original.locale);
                   }}
                 >
-                  <Check
+                  <CheckIcon
                     className={cn(
                       "mr-2 size-4 opacity-0",
                       value === original.locale && "opacity-100",
@@ -104,7 +104,7 @@ export const LocaleComboboxPopover = ({ value, onValueChange }: Props) => {
           <span className="line-clamp-1 text-left font-normal">
             {selected?.name} <span className="ml-1 text-xs opacity-50">({selected?.locale})</span>
           </span>
-          <CaretDown
+          <CaretDownIcon
             className={cn(
               "ml-2 size-4 shrink-0 rotate-0 opacity-50 transition-transform",
               open && "rotate-180",

apps/client/src/components/locale-switch.tsx

@@ -1,5 +1,5 @@
 import { useLingui } from "@lingui/react";
-import { Translate } from "@phosphor-icons/react";
+import { TranslateIcon } from "@phosphor-icons/react";
 import { Button, Popover, PopoverContent, PopoverTrigger } from "@reactive-resume/ui";
 import { useState } from "react";
 
@@ -14,7 +14,7 @@ export const LocaleSwitch = () => {
     <Popover open={open} onOpenChange={setOpen}>
       <PopoverTrigger asChild>
         <Button size="icon" variant="ghost">
-          <Translate size={20} />
+          <TranslateIcon size={20} />
         </Button>
       </PopoverTrigger>
       <PopoverContent align="end" className="p-0">

apps/client/src/components/theme-switch.tsx

@@ -1,4 +1,4 @@
-import { CloudSun, Moon, Sun } from "@phosphor-icons/react";
+import { CloudSunIcon, MoonIcon, SunIcon } from "@phosphor-icons/react";
 import { useTheme } from "@reactive-resume/hooks";
 import { Button } from "@reactive-resume/ui";
 import type { Variants } from "framer-motion";
@@ -25,9 +25,9 @@ export const ThemeSwitch = ({ size = 20, className }: Props) => {
     <Button size="icon" variant="ghost" className={className} onClick={toggleTheme}>
       <div className="cursor-pointer overflow-hidden" style={{ width: size, height: size }}>
         <motion.div animate={theme} variants={variants} className="flex">
-          <Sun size={size} className="shrink-0" />
-          <CloudSun size={size} className="shrink-0" />
-          <Moon size={size} className="shrink-0" />
+          <SunIcon size={size} className="shrink-0" />
+          <CloudSunIcon size={size} className="shrink-0" />
+          <MoonIcon size={size} className="shrink-0" />
         </motion.div>
       </div>
     </Button>

apps/client/src/pages/auth/_components/social-auth.tsx

@@ -1,5 +1,5 @@
 import { t } from "@lingui/macro";
-import { Fingerprint, GithubLogo, GoogleLogo } from "@phosphor-icons/react";
+import { FingerprintIcon, GithubLogoIcon, GoogleLogoIcon } from "@phosphor-icons/react";
 import { Button } from "@reactive-resume/ui";
 
 import { useAuthProviders } from "@/client/services/auth/providers";
@@ -14,7 +14,7 @@ export const SocialAuth = () => {
       {providers.includes("github") && (
         <Button asChild size="lg" className="w-full !bg-[#222] !text-white hover:!bg-[#222]/80">
           <a href="/api/auth/github">
-            <GithubLogo className="mr-3 size-4" />
+            <GithubLogoIcon className="mr-3 size-4" />
             {t`GitHub`}
           </a>
         </Button>
@@ -27,7 +27,7 @@ export const SocialAuth = () => {
           className="w-full !bg-[#4285F4] !text-white hover:!bg-[#4285F4]/80"
         >
           <a href="/api/auth/google">
-            <GoogleLogo className="mr-3 size-4" />
+            <GoogleLogoIcon className="mr-3 size-4" />
             {t`Google`}
           </a>
         </Button>
@@ -40,7 +40,7 @@ export const SocialAuth = () => {
           className="w-full !bg-[#dc2626] !text-white hover:!bg-[#dc2626]/80"
         >
           <a href="/api/auth/openid">
-            <Fingerprint className="mr-3 size-4" />
+            <FingerprintIcon className="mr-3 size-4" />
             {import.meta.env.VITE_OPENID_NAME}
           </a>
         </Button>

apps/client/src/pages/auth/backup-otp/page.tsx

@@ -1,6 +1,6 @@
 import { zodResolver } from "@hookform/resolvers/zod";
 import { t } from "@lingui/macro";
-import { ArrowLeft } from "@phosphor-icons/react";
+import { ArrowLeftIcon } from "@phosphor-icons/react";
 import { twoFactorBackupSchema } from "@reactive-resume/dto";
 import { usePasswordToggle } from "@reactive-resume/hooks";
 import {
@@ -95,7 +95,7 @@ export const BackupOtpPage = () => {
                   void navigate(-1);
                 }}
               >
-                <ArrowLeft size={14} className="mr-2" />
+                <ArrowLeftIcon size={14} className="mr-2" />
                 <span>{t`Back`}</span>
               </Button>
 

apps/client/src/pages/auth/forgot-password/page.tsx

@@ -1,6 +1,6 @@
 import { zodResolver } from "@hookform/resolvers/zod";
 import { t } from "@lingui/macro";
-import { ArrowLeft } from "@phosphor-icons/react";
+import { ArrowLeftIcon } from "@phosphor-icons/react";
 import { forgotPasswordSchema } from "@reactive-resume/dto";
 import {
   Alert,
@@ -96,7 +96,7 @@ export const ForgotPasswordPage = () => {
                   void navigate(-1);
                 }}
               >
-                <ArrowLeft size={14} className="mr-2" />
+                <ArrowLeftIcon size={14} className="mr-2" />
                 <span>{t`Back`}</span>
               </Button>
 

apps/client/src/pages/auth/login/page.tsx

@@ -1,6 +1,6 @@
 import { zodResolver } from "@hookform/resolvers/zod";
 import { t, Trans } from "@lingui/macro";
-import { ArrowRight } from "@phosphor-icons/react";
+import { ArrowRightIcon } from "@phosphor-icons/react";
 import { loginSchema } from "@reactive-resume/dto";
 import { usePasswordToggle } from "@reactive-resume/hooks";
 import {
@@ -63,7 +63,7 @@ export const LoginPage = () => {
           <Button asChild variant="link" className="px-1.5">
             <Link to="/auth/register">
               {t({ message: "Create one now", context: "This is a link to create a new account" })}{" "}
-              <ArrowRight className="ml-1" />
+              <ArrowRightIcon className="ml-1" />
             </Link>
           </Button>
         </h6>

apps/client/src/pages/auth/register/page.tsx

@@ -1,6 +1,6 @@
 import { zodResolver } from "@hookform/resolvers/zod";
 import { t, Trans } from "@lingui/macro";
-import { ArrowRight } from "@phosphor-icons/react";
+import { ArrowRightIcon } from "@phosphor-icons/react";
 import { registerSchema } from "@reactive-resume/dto";
 import { usePasswordToggle } from "@reactive-resume/hooks";
 import {
@@ -71,7 +71,7 @@ export const RegisterPage = () => {
           <span className="opacity-75">{t`Already have an account?`}</span>
           <Button asChild variant="link" className="px-1.5">
             <Link to="/auth/login">
-              {t`Sign in now`} <ArrowRight className="ml-1" />
+              {t`Sign in now`} <ArrowRightIcon className="ml-1" />
             </Link>
           </Button>
         </h6>

apps/client/src/pages/auth/verify-email/page.tsx

@@ -1,5 +1,5 @@
 import { t, Trans } from "@lingui/macro";
-import { ArrowRight, Info, SealCheck } from "@phosphor-icons/react";
+import { ArrowRightIcon, InfoIcon, SealCheckIcon } from "@phosphor-icons/react";
 import { Alert, AlertDescription, AlertTitle, Button } from "@reactive-resume/ui";
 import { useEffect } from "react";
 import { Helmet } from "react-helmet-async";
@@ -24,7 +24,7 @@ export const VerifyEmailPage = () => {
 
       toast({
         variant: "success",
-        icon: <SealCheck size={16} weight="bold" />,
+        icon: <SealCheckIcon size={16} weight="bold" />,
         title: t`Your email address has been verified successfully.`,
       });
 
@@ -55,7 +55,7 @@ export const VerifyEmailPage = () => {
       </div>
 
       <Alert variant="info">
-        <Info size={18} />
+        <InfoIcon size={18} />
         <AlertTitle>{t`Please note that this step is completely optional.`}</AlertTitle>
         <AlertDescription>
           {t`We verify your email address only to ensure that we can send you a password reset link in case you forget your password.`}
@@ -65,7 +65,7 @@ export const VerifyEmailPage = () => {
       <Button asChild disabled={loading}>
         <Link to="/dashboard">
           {t`Go to Dashboard`}
-          <ArrowRight className="ml-2" />
+          <ArrowRightIcon className="ml-2" />
         </Link>
       </Button>
     </div>

apps/client/src/pages/auth/verify-otp/page.tsx

@@ -1,6 +1,6 @@
 import { zodResolver } from "@hookform/resolvers/zod";
 import { t } from "@lingui/macro";
-import { ArrowRight } from "@phosphor-icons/react";
+import { ArrowRightIcon } from "@phosphor-icons/react";
 import { twoFactorSchema } from "@reactive-resume/dto";
 import { usePasswordToggle } from "@reactive-resume/hooks";
 import {
@@ -61,7 +61,7 @@ export const VerifyOtpPage = () => {
           </span>
           <Button asChild variant="link" className="px-1.5">
             <Link to="/auth/backup-otp">
-              {t`Lost your device?`} <ArrowRight className="ml-1" />
+              {t`Lost your device?`} <ArrowRightIcon className="ml-1" />
             </Link>
           </Button>
         </h6>

apps/client/src/pages/builder/_components/header.tsx

@@ -1,5 +1,5 @@
 import { t } from "@lingui/macro";
-import { HouseSimple, Lock, SidebarSimple } from "@phosphor-icons/react";
+import { HouseSimpleIcon, LockIcon, SidebarSimpleIcon } from "@phosphor-icons/react";
 import { Button, Tooltip } from "@reactive-resume/ui";
 import { cn } from "@reactive-resume/utils";
 import { Link } from "react-router";
@@ -39,13 +39,13 @@ export const BuilderHeader = () => {
             onToggle("left");
           }}
         >
-          <SidebarSimple />
+          <SidebarSimpleIcon />
         </Button>
 
         <div className="flex items-center justify-center gap-x-1 lg:mx-auto">
           <Button asChild size="icon" variant="ghost">
             <Link to="/dashboard/resumes">
-              <HouseSimple />
+              <HouseSimpleIcon />
             </Link>
           </Button>
 
@@ -55,7 +55,7 @@ export const BuilderHeader = () => {
 
           {locked && (
             <Tooltip content={t`This resume is locked, please unlock to make further changes.`}>
-              <Lock size={14} className="ml-2 opacity-75" />
+              <LockIcon size={14} className="ml-2 opacity-75" />
             </Tooltip>
           )}
         </div>
@@ -68,7 +68,7 @@ export const BuilderHeader = () => {
             onToggle("right");
           }}
         >
-          <SidebarSimple className="-scale-x-100" />
+          <SidebarSimpleIcon className="-scale-x-100" />
         </Button>
       </div>
     </div>

apps/client/src/pages/builder/_components/toolbar.tsx

@@ -1,18 +1,18 @@
 import { t } from "@lingui/macro";
 import {
-  ArrowClockwise,
-  ArrowCounterClockwise,
-  ArrowsOutCardinal,
-  CircleNotch,
-  ClockClockwise,
-  CubeFocus,
-  FilePdf,
-  Hash,
-  LineSegment,
-  LinkSimple,
-  MagnifyingGlass,
-  MagnifyingGlassMinus,
-  MagnifyingGlassPlus,
+  ArrowClockwiseIcon,
+  ArrowCounterClockwiseIcon,
+  ArrowsOutCardinalIcon,
+  CircleNotchIcon,
+  ClockClockwiseIcon,
+  CubeFocusIcon,
+  FilePdfIcon,
+  HashIcon,
+  LineSegmentIcon,
+  LinkSimpleIcon,
+  MagnifyingGlassIcon,
+  MagnifyingGlassMinusIcon,
+  MagnifyingGlassPlusIcon,
 } from "@phosphor-icons/react";
 import { Button, Separator, Toggle, Tooltip } from "@reactive-resume/ui";
 import { motion } from "framer-motion";
@@ -82,7 +82,7 @@ export const BuilderToolbar = () => {
               undo();
             }}
           >
-            <ArrowCounterClockwise />
+            <ArrowCounterClockwiseIcon />
           </Button>
         </Tooltip>
 
@@ -95,7 +95,7 @@ export const BuilderToolbar = () => {
               redo();
             }}
           >
-            <ArrowClockwise />
+            <ArrowClockwiseIcon />
           </Button>
         </Tooltip>
 
@@ -103,7 +103,7 @@ export const BuilderToolbar = () => {
 
         <Tooltip content={panMode ? t`Scroll to Pan` : t`Scroll to Zoom`}>
           <Toggle className="rounded-none" pressed={panMode} onPressedChange={onTogglePanMode}>
-            {panMode ? <ArrowsOutCardinal /> : <MagnifyingGlass />}
+            {panMode ? <ArrowsOutCardinalIcon /> : <MagnifyingGlassIcon />}
           </Toggle>
         </Tooltip>
 
@@ -111,25 +111,25 @@ export const BuilderToolbar = () => {
 
         <Tooltip content={t`Zoom In`}>
           <Button size="icon" variant="ghost" className="rounded-none" onClick={onZoomIn}>
-            <MagnifyingGlassPlus />
+            <MagnifyingGlassPlusIcon />
           </Button>
         </Tooltip>
 
         <Tooltip content={t`Zoom Out`}>
           <Button size="icon" variant="ghost" className="rounded-none" onClick={onZoomOut}>
-            <MagnifyingGlassMinus />
+            <MagnifyingGlassMinusIcon />
           </Button>
         </Tooltip>
 
         <Tooltip content={t`Reset Zoom`}>
           <Button size="icon" variant="ghost" className="rounded-none" onClick={onResetView}>
-            <ClockClockwise />
+            <ClockClockwiseIcon />
           </Button>
         </Tooltip>
 
         <Tooltip content={t`Center Artboard`}>
           <Button size="icon" variant="ghost" className="rounded-none" onClick={onCenterView}>
-            <CubeFocus />
+            <CubeFocusIcon />
           </Button>
         </Tooltip>
 
@@ -143,7 +143,7 @@ export const BuilderToolbar = () => {
               setValue("metadata.page.options.breakLine", pressed);
             }}
           >
-            <LineSegment />
+            <LineSegmentIcon />
           </Toggle>
         </Tooltip>
 
@@ -155,7 +155,7 @@ export const BuilderToolbar = () => {
               setValue("metadata.page.options.pageNumbers", pressed);
             }}
           >
-            <Hash />
+            <HashIcon />
           </Toggle>
         </Tooltip>
 
@@ -169,7 +169,7 @@ export const BuilderToolbar = () => {
             disabled={!isPublic}
             onClick={onCopy}
           >
-            <LinkSimple />
+            <LinkSimpleIcon />
           </Button>
         </Tooltip>
 
@@ -181,7 +181,7 @@ export const BuilderToolbar = () => {
             className="rounded-none"
             onClick={onPrint}
           >
-            {loading ? <CircleNotch className="animate-spin" /> : <FilePdf />}
+            {loading ? <CircleNotchIcon className="animate-spin" /> : <FilePdfIcon />}
           </Button>
         </Tooltip>
       </div>

apps/client/src/pages/builder/sidebars/left/dialogs/custom-section.tsx

@@ -1,6 +1,6 @@
 import { zodResolver } from "@hookform/resolvers/zod";
 import { t } from "@lingui/macro";
-import { X } from "@phosphor-icons/react";
+import { XIcon } from "@phosphor-icons/react";
 import type { CustomSection } from "@reactive-resume/schema";
 import { customSectionSchema, defaultCustomSection } from "@reactive-resume/schema";
 import {
@@ -183,7 +183,7 @@ export const CustomSectionDialog = () => {
                         }}
                       >
                         <span className="mr-1">{item}</span>
-                        <X size={12} weight="bold" />
+                        <XIcon size={12} weight="bold" />
                       </Badge>
                     </motion.div>
                   ))}

apps/client/src/pages/builder/sidebars/left/dialogs/interests.tsx

@@ -1,6 +1,6 @@
 import { zodResolver } from "@hookform/resolvers/zod";
 import { t } from "@lingui/macro";
-import { X } from "@phosphor-icons/react";
+import { XIcon } from "@phosphor-icons/react";
 import { defaultInterest, interestSchema } from "@reactive-resume/schema";
 import {
   Badge,
@@ -87,7 +87,7 @@ export const InterestsDialog = () => {
                         }}
                       >
                         <span className="mr-1">{item}</span>
-                        <X size={12} weight="bold" />
+                        <XIcon size={12} weight="bold" />
                       </Badge>
                     </motion.div>
                   ))}

apps/client/src/pages/builder/sidebars/left/dialogs/projects.tsx

@@ -1,6 +1,6 @@
 import { zodResolver } from "@hookform/resolvers/zod";
 import { t } from "@lingui/macro";
-import { X } from "@phosphor-icons/react";
+import { XIcon } from "@phosphor-icons/react";
 import { defaultProject, projectSchema } from "@reactive-resume/schema";
 import {
   Badge,
@@ -186,7 +186,7 @@ export const ProjectsDialog = () => {
                     >
                       <Badge className="cursor-move">
                         <span className="mr-1">{item}</span>
-                        <X
+                        <XIcon
                           className="cursor-pointer"
                           size={12}
                           weight="bold"

apps/client/src/pages/builder/sidebars/left/dialogs/skills.tsx

@@ -1,6 +1,6 @@
 import { zodResolver } from "@hookform/resolvers/zod";
 import { t } from "@lingui/macro";
-import { X } from "@phosphor-icons/react";
+import { XIcon } from "@phosphor-icons/react";
 import { defaultSkill, skillSchema } from "@reactive-resume/schema";
 import {
   Badge,
@@ -133,7 +133,7 @@ export const SkillsDialog = () => {
                         }}
                       >
                         <span className="mr-1">{item}</span>
-                        <X size={12} weight="bold" />
+                        <XIcon size={12} weight="bold" />
                       </Badge>
                     </motion.div>
                   ))}

apps/client/src/pages/builder/sidebars/left/index.tsx

@@ -1,5 +1,5 @@
 import { t } from "@lingui/macro";
-import { Plus, PlusCircle } from "@phosphor-icons/react";
+import { PlusCircleIcon, PlusIcon } from "@phosphor-icons/react";
 import type {
   Award,
   Certification,
@@ -144,7 +144,7 @@ export const LeftSidebar = () => {
             id="custom"
             variant="outline"
             name={t`Add a new section`}
-            icon={<Plus size={14} />}
+            icon={<PlusIcon size={14} />}
             onClick={() => {
               addSection();
               // eslint-disable-next-line lingui/no-unlocalized-strings
@@ -259,7 +259,7 @@ export const LeftSidebar = () => {
           <Separator />
 
           <Button size="lg" variant="outline" onClick={addSection}>
-            <PlusCircle />
+            <PlusCircleIcon />
             <span className="ml-2">{t`Add a new section`}</span>
           </Button>
         </div>

apps/client/src/pages/builder/sidebars/left/sections/custom/section.tsx

@@ -1,6 +1,6 @@
 import { t, Trans } from "@lingui/macro";
 import { createId } from "@paralleldrive/cuid2";
-import { DotsSixVertical, Envelope, Plus, X } from "@phosphor-icons/react";
+import { DotsSixVerticalIcon, EnvelopeIcon, PlusIcon, XIcon } from "@phosphor-icons/react";
 import type { CustomField as ICustomField } from "@reactive-resume/schema";
 import {
   Button,
@@ -46,14 +46,14 @@ export const CustomField = ({ field, onChange, onRemove }: CustomFieldProps) =>
             controls.start(event);
           }}
         >
-          <DotsSixVertical />
+          <DotsSixVerticalIcon />
         </Button>
 
         <Popover>
           <Tooltip content={t`Icon`}>
             <PopoverTrigger asChild>
               <Button size="icon" variant="ghost" className="shrink-0">
-                {field.icon ? <i className={cn(`ph ph-${field.icon}`)} /> : <Envelope />}
+                {field.icon ? <i className={cn(`ph ph-${field.icon}`)} /> : <EnvelopeIcon />}
               </Button>
             </PopoverTrigger>
           </Tooltip>
@@ -109,7 +109,7 @@ export const CustomField = ({ field, onChange, onRemove }: CustomFieldProps) =>
             onRemove(field.id);
           }}
         >
-          <X />
+          <XIcon />
         </Button>
       </div>
     </Reorder.Item>
@@ -171,7 +171,7 @@ export const CustomFieldsSection = ({ className }: Props) => {
       </AnimatePresence>
 
       <Button variant="link" onClick={onAddCustomField}>
-        <Plus className="mr-2" />
+        <PlusIcon className="mr-2" />
         <span>{t`Add a custom field`}</span>
       </Button>
     </div>

apps/client/src/pages/builder/sidebars/left/sections/picture/section.tsx

@@ -1,5 +1,5 @@
 import { t } from "@lingui/macro";
-import { Aperture, Trash, UploadSimple } from "@phosphor-icons/react";
+import { ApertureIcon, TrashIcon, UploadSimpleIcon } from "@phosphor-icons/react";
 import {
   Avatar,
   AvatarImage,
@@ -56,11 +56,11 @@ export const PictureSection = () => {
 
         {isValidUrl ? (
           <div className="pointer-events-none absolute inset-0 flex items-center justify-center rounded-full bg-background/30 opacity-0 transition-opacity group-hover:opacity-100">
-            <Trash size={16} weight="bold" />
+            <TrashIcon size={16} weight="bold" />
           </div>
         ) : (
           <div className="pointer-events-none absolute inset-0 flex items-center justify-center rounded-full bg-background/30 opacity-0 transition-opacity group-hover:opacity-100">
-            <UploadSimple size={16} weight="bold" />
+            <UploadSimpleIcon size={16} weight="bold" />
           </div>
         )}
       </div>
@@ -88,7 +88,7 @@ export const PictureSection = () => {
                   exit={{ opacity: 0 }}
                   className={cn(buttonVariants({ size: "icon", variant: "ghost" }))}
                 >
-                  <Aperture />
+                  <ApertureIcon />
                 </motion.button>
               </PopoverTrigger>
               <PopoverContent className="w-[360px]">

apps/client/src/pages/builder/sidebars/left/sections/shared/section-base.tsx

@@ -15,7 +15,7 @@ import {
   verticalListSortingStrategy,
 } from "@dnd-kit/sortable";
 import { t } from "@lingui/macro";
-import { Plus } from "@phosphor-icons/react";
+import { PlusIcon } from "@phosphor-icons/react";
 import type { SectionItem, SectionKey, SectionWithItem } from "@reactive-resume/schema";
 import { Button } from "@reactive-resume/ui";
 import { cn } from "@reactive-resume/utils";
@@ -114,7 +114,7 @@ export const SectionBase = <T extends SectionItem>({ id, title, description }: P
             className="gap-x-2 border-dashed py-6 leading-relaxed hover:bg-secondary-accent"
             onClick={onCreate}
           >
-            <Plus size={14} />
+            <PlusIcon size={14} />
             <span className="font-medium">
               {t({
                 message: "Add a new item",
@@ -165,7 +165,7 @@ export const SectionBase = <T extends SectionItem>({ id, title, description }: P
             className="ml-auto gap-x-2 text-xs lg:text-sm"
             onClick={onCreate}
           >
-            <Plus />
+            <PlusIcon />
             <span>
               {t({
                 message: "Add a new item",

apps/client/src/pages/builder/sidebars/left/sections/shared/section-dialog.tsx

@@ -1,6 +1,6 @@
 import { t } from "@lingui/macro";
 import { createId } from "@paralleldrive/cuid2";
-import { CopySimple, PencilSimple, Plus } from "@phosphor-icons/react";
+import { CopySimpleIcon, PencilSimpleIcon, PlusIcon } from "@phosphor-icons/react";
 import { VisuallyHidden } from "@radix-ui/react-visually-hidden";
 import type { SectionItem, SectionWithItem } from "@reactive-resume/schema";
 import {
@@ -156,9 +156,9 @@ export const SectionDialog = <T extends SectionItem>({
               <DialogHeader>
                 <DialogTitle>
                   <div className="flex items-center space-x-2.5">
-                    {isCreate && <Plus />}
-                    {isUpdate && <PencilSimple />}
-                    {isDuplicate && <CopySimple />}
+                    {isCreate && <PlusIcon />}
+                    {isUpdate && <PencilSimpleIcon />}
+                    {isDuplicate && <CopySimpleIcon />}
                     <h2>
                       {isCreate && t`Create a new item`}
                       {isUpdate && t`Update an existing item`}

apps/client/src/pages/builder/sidebars/left/sections/shared/section-icon.tsx

@@ -1,19 +1,19 @@
 import type { IconProps } from "@phosphor-icons/react";
 import {
-  Article,
-  Books,
-  Briefcase,
-  Certificate,
-  CompassTool,
-  GameController,
-  GraduationCap,
-  HandHeart,
-  Medal,
-  PuzzlePiece,
-  ShareNetwork,
-  Translate,
-  User,
-  Users,
+  ArticleIcon,
+  BooksIcon,
+  BriefcaseIcon,
+  CertificateIcon,
+  CompassToolIcon,
+  GameControllerIcon,
+  GraduationCapIcon,
+  HandHeartIcon,
+  MedalIcon,
+  PuzzlePieceIcon,
+  ShareNetworkIcon,
+  TranslateIcon,
+  UserIcon,
+  UsersIcon,
 } from "@phosphor-icons/react";
 import type { SectionKey, SectionWithItem } from "@reactive-resume/schema";
 import { defaultSection } from "@reactive-resume/schema";
@@ -27,46 +27,46 @@ const getSectionIcon = (id: SectionKey, props: IconProps = {}) => {
   switch (id) {
     // Left Sidebar
     case "basics": {
-      return <User size={18} {...props} />;
+      return <UserIcon size={18} {...props} />;
     }
     case "summary": {
-      return <Article size={18} {...props} />;
+      return <ArticleIcon size={18} {...props} />;
     }
     case "awards": {
-      return <Medal size={18} {...props} />;
+      return <MedalIcon size={18} {...props} />;
     }
     case "profiles": {
-      return <ShareNetwork size={18} {...props} />;
+      return <ShareNetworkIcon size={18} {...props} />;
     }
     case "experience": {
-      return <Briefcase size={18} {...props} />;
+      return <BriefcaseIcon size={18} {...props} />;
     }
     case "education": {
-      return <GraduationCap size={18} {...props} />;
+      return <GraduationCapIcon size={18} {...props} />;
     }
     case "certifications": {
-      return <Certificate size={18} {...props} />;
+      return <CertificateIcon size={18} {...props} />;
     }
     case "interests": {
-      return <GameController size={18} {...props} />;
+      return <GameControllerIcon size={18} {...props} />;
     }
     case "languages": {
-      return <Translate size={18} {...props} />;
+      return <TranslateIcon size={18} {...props} />;
     }
     case "volunteer": {
-      return <HandHeart size={18} {...props} />;
+      return <HandHeartIcon size={18} {...props} />;
     }
     case "projects": {
-      return <PuzzlePiece size={18} {...props} />;
+      return <PuzzlePieceIcon size={18} {...props} />;
     }
     case "publications": {
-      return <Books size={18} {...props} />;
+      return <BooksIcon size={18} {...props} />;
     }
     case "skills": {
-      return <CompassTool size={18} {...props} />;
+      return <CompassToolIcon size={18} {...props} />;
     }
     case "references": {
-      return <Users size={18} {...props} />;
+      return <UsersIcon size={18} {...props} />;
     }
 
     default: {

apps/client/src/pages/builder/sidebars/left/sections/shared/section-list-item.tsx

@@ -1,7 +1,12 @@
 import { useSortable } from "@dnd-kit/sortable";
 import { CSS } from "@dnd-kit/utilities";
 import { t } from "@lingui/macro";
-import { CopySimple, DotsSixVertical, PencilSimple, TrashSimple } from "@phosphor-icons/react";
+import {
+  CopySimpleIcon,
+  DotsSixVerticalIcon,
+  PencilSimpleIcon,
+  TrashSimpleIcon,
+} from "@phosphor-icons/react";
 import {
   DropdownMenu,
   DropdownMenuCheckboxItem,
@@ -65,7 +70,7 @@ export const SectionListItem = ({
             !isDragging && "hover:bg-secondary",
           )}
         >
-          <DotsSixVertical weight="bold" size={12} />
+          <DotsSixVerticalIcon weight="bold" size={12} />
         </div>
 
         {/* List Item */}
@@ -88,15 +93,15 @@ export const SectionListItem = ({
             </DropdownMenuCheckboxItem>
             <DropdownMenuSeparator />
             <DropdownMenuItem onClick={onUpdate}>
-              <PencilSimple size={14} />
+              <PencilSimpleIcon size={14} />
               <span className="ml-2">{t`Edit`}</span>
             </DropdownMenuItem>
             <DropdownMenuItem onClick={onDuplicate}>
-              <CopySimple size={14} />
+              <CopySimpleIcon size={14} />
               <span className="ml-2">{t`Copy`}</span>
             </DropdownMenuItem>
             <DropdownMenuItem className="text-error" onClick={onDelete}>
-              <TrashSimple size={14} />
+              <TrashSimpleIcon size={14} />
               <span className="ml-2">{t`Remove`}</span>
             </DropdownMenuItem>
           </DropdownMenuContent>

apps/client/src/pages/builder/sidebars/left/sections/shared/section-options.tsx

@@ -1,14 +1,14 @@
 import { plural, t } from "@lingui/macro";
 import {
-  ArrowCounterClockwise,
-  Broom,
-  Columns,
-  Eye,
-  EyeSlash,
-  List,
-  PencilSimple,
-  Plus,
-  TrashSimple,
+  ArrowCounterClockwiseIcon,
+  BroomIcon,
+  ColumnsIcon,
+  EyeIcon,
+  EyeSlashIcon,
+  ListIcon,
+  PencilSimpleIcon,
+  PlusIcon,
+  TrashSimpleIcon,
 } from "@phosphor-icons/react";
 import type { SectionKey, SectionWithItem } from "@reactive-resume/schema";
 import { defaultSections } from "@reactive-resume/schema";
@@ -80,14 +80,14 @@ export const SectionOptions = ({ id }: Props) => {
     <DropdownMenu>
       <DropdownMenuTrigger asChild>
         <Button variant="ghost" size="icon">
-          <List weight="bold" />
+          <ListIcon weight="bold" />
         </Button>
       </DropdownMenuTrigger>
       <DropdownMenuContent className="mr-4 w-48">
         {hasItems && (
           <>
             <DropdownMenuItem onClick={onCreate}>
-              <Plus />
+              <PlusIcon />
               <span className="ml-2">{t`Add a new item`}</span>
             </DropdownMenuItem>
             <DropdownMenuCheckboxItem
@@ -102,12 +102,12 @@ export const SectionOptions = ({ id }: Props) => {
 
         <DropdownMenuGroup>
           <DropdownMenuItem onClick={toggleVisibility}>
-            {section.visible ? <Eye /> : <EyeSlash />}
+            {section.visible ? <EyeIcon /> : <EyeSlashIcon />}
             <span className="ml-2">{section.visible ? t`Hide` : t`Show`}</span>
           </DropdownMenuItem>
           <DropdownMenuSub>
             <DropdownMenuSubTrigger>
-              <PencilSimple />
+              <PencilSimpleIcon />
               <span className="ml-2">{t`Rename`}</span>
             </DropdownMenuSubTrigger>
             <DropdownMenuSubContent>
@@ -125,14 +125,14 @@ export const SectionOptions = ({ id }: Props) => {
                   className="absolute inset-y-0 right-0"
                   onClick={onResetName}
                 >
-                  <ArrowCounterClockwise />
+                  <ArrowCounterClockwiseIcon />
                 </Button>
               </div>
             </DropdownMenuSubContent>
           </DropdownMenuSub>
           <DropdownMenuSub>
             <DropdownMenuSubTrigger>
-              <Columns />
+              <ColumnsIcon />
               <span className="ml-2">{t`Columns`}</span>
             </DropdownMenuSubTrigger>
             <DropdownMenuSubContent>
@@ -148,12 +148,12 @@ export const SectionOptions = ({ id }: Props) => {
         </DropdownMenuGroup>
         <DropdownMenuSeparator />
         <DropdownMenuItem disabled={!hasItems} onClick={onResetItems}>
-          <Broom />
+          <BroomIcon />
           <span className="ml-2">{t`Reset`}</span>
         </DropdownMenuItem>
         <DropdownMenuSeparator />
         <DropdownMenuItem className="text-error" disabled={!isCustomSection} onClick={onRemove}>
-          <TrashSimple />
+          <TrashSimpleIcon />
           <span className="ml-2">{t`Remove`}</span>
         </DropdownMenuItem>
       </DropdownMenuContent>

apps/client/src/pages/builder/sidebars/left/sections/shared/url-input.tsx

@@ -1,5 +1,5 @@
 import { t } from "@lingui/macro";
-import { Tag } from "@phosphor-icons/react";
+import { TagIcon } from "@phosphor-icons/react";
 import type { URL } from "@reactive-resume/schema";
 import { urlSchema } from "@reactive-resume/schema";
 import {
@@ -42,7 +42,7 @@ export const URLInput = forwardRef<HTMLInputElement, Props>(
             <Tooltip content={t`Label`}>
               <PopoverTrigger asChild>
                 <Button size="icon" variant="ghost">
-                  <Tag />
+                  <TagIcon />
                 </Button>
               </PopoverTrigger>
             </Tooltip>

apps/client/src/pages/builder/sidebars/right/sections/export.tsx

@@ -1,5 +1,5 @@
 import { t } from "@lingui/macro";
-import { CircleNotch, FileJs, FilePdf } from "@phosphor-icons/react";
+import { CircleNotchIcon, FileJsIcon, FilePdfIcon } from "@phosphor-icons/react";
 import { buttonVariants, Card, CardContent, CardDescription, CardTitle } from "@reactive-resume/ui";
 import { cn } from "@reactive-resume/utils";
 import { saveAs } from "file-saver";
@@ -49,7 +49,7 @@ export const ExportSection = () => {
           )}
           onClick={onJsonExport}
         >
-          <FileJs size={22} />
+          <FileJsIcon size={22} />
           <CardContent className="flex-1">
             <CardTitle className="text-sm">{t`JSON`}</CardTitle>
             <CardDescription className="font-normal">
@@ -66,7 +66,11 @@ export const ExportSection = () => {
           )}
           onClick={onPdfExport}
         >
-          {loading ? <CircleNotch size={22} className="animate-spin" /> : <FilePdf size={22} />}
+          {loading ? (
+            <CircleNotchIcon size={22} className="animate-spin" />
+          ) : (
+            <FilePdfIcon size={22} />
+          )}
 
           <CardContent className="flex-1">
             <CardTitle className="text-sm">{t`PDF`}</CardTitle>

apps/client/src/pages/builder/sidebars/right/sections/information.tsx

@@ -1,5 +1,10 @@
 import { t, Trans } from "@lingui/macro";
-import { Book, EnvelopeSimpleOpen, GithubLogo, HandHeart } from "@phosphor-icons/react";
+import {
+  BookIcon,
+  EnvelopeSimpleOpenIcon,
+  GithubLogoIcon,
+  HandHeartIcon,
+} from "@phosphor-icons/react";
 import {
   buttonVariants,
   Card,
@@ -36,7 +41,7 @@ const DonateCard = () => (
         rel="noopener noreferrer nofollow"
         target="_blank"
       >
-        <HandHeart size={14} weight="bold" className="mr-2" />
+        <HandHeartIcon size={14} weight="bold" className="mr-2" />
         <span className="line-clamp-1">{t`Donate to Reactive Resume`}</span>
       </a>
     </CardFooter>
@@ -65,12 +70,12 @@ const IssuesCard = () => (
         rel="noopener noreferrer nofollow"
         target="_blank"
       >
-        <GithubLogo size={14} weight="bold" className="mr-2" />
+        <GithubLogoIcon size={14} weight="bold" className="mr-2" />
         <span className="line-clamp-1">{t`Raise an issue`}</span>
       </a>
 
       <a className={cn(buttonVariants({ size: "sm" }))} href="mailto:hello@amruthpillai.com">
-        <EnvelopeSimpleOpen size={14} weight="bold" className="mr-2" />
+        <EnvelopeSimpleOpenIcon size={14} weight="bold" className="mr-2" />
         <span className="line-clamp-1">{t`Send me a message`}</span>
       </a>
     </CardFooter>
@@ -101,7 +106,7 @@ const DocumentationCard = () => (
         target="_blank"
         rel="noopener noreferrer nofollow"
       >
-        <Book size={14} weight="bold" className="mr-2" />
+        <BookIcon size={14} weight="bold" className="mr-2" />
         <span className="line-clamp-1">{t`Documentation`}</span>
       </a>
     </CardFooter>

apps/client/src/pages/builder/sidebars/right/sections/layout.tsx

@@ -17,7 +17,12 @@ import {
 } from "@dnd-kit/sortable";
 import { CSS } from "@dnd-kit/utilities";
 import { t } from "@lingui/macro";
-import { ArrowCounterClockwise, DotsSixVertical, Plus, TrashSimple } from "@phosphor-icons/react";
+import {
+  ArrowCounterClockwiseIcon,
+  DotsSixVerticalIcon,
+  PlusIcon,
+  TrashSimpleIcon,
+} from "@phosphor-icons/react";
 import { defaultMetadata } from "@reactive-resume/schema";
 import { Button, Portal, Tooltip } from "@reactive-resume/ui";
 import type { LayoutLocator, SortablePayload } from "@reactive-resume/utils";
@@ -95,7 +100,7 @@ const Section = ({ id, isDragging = false }: SectionProps) => {
       )}
     >
       <div className="flex items-center gap-x-2">
-        <DotsSixVertical size={12} weight="bold" />
+        <DotsSixVerticalIcon size={12} weight="bold" />
         <p className="flex-1 truncate text-xs font-medium">{name}</p>
       </div>
     </div>
@@ -200,7 +205,7 @@ export const LayoutSection = () => {
 
         <Tooltip content={t`Reset Layout`}>
           <Button size="icon" variant="ghost" onClick={onResetLayout}>
-            <ArrowCounterClockwise />
+            <ArrowCounterClockwiseIcon />
           </Button>
         </Tooltip>
       </header>
@@ -237,7 +242,7 @@ export const LayoutSection = () => {
                           onRemovePage(pageIndex);
                         }}
                       >
-                        <TrashSimple size={12} className="text-error" />
+                        <TrashSimpleIcon size={12} className="text-error" />
                       </Button>
                     </Tooltip>
                   )}
@@ -257,7 +262,7 @@ export const LayoutSection = () => {
         </DndContext>
 
         <Button variant="outline" className="ml-auto" onClick={onAddPage}>
-          <Plus />
+          <PlusIcon />
           <span className="ml-2 text-xs lg:text-sm">{t`Add New Page`}</span>
         </Button>
       </main>

apps/client/src/pages/builder/sidebars/right/sections/sharing.tsx

@@ -1,5 +1,5 @@
 import { t } from "@lingui/macro";
-import { CopySimple } from "@phosphor-icons/react";
+import { CopySimpleIcon } from "@phosphor-icons/react";
 import { Button, Input, Label, Switch, Tooltip } from "@reactive-resume/ui";
 import { AnimatePresence, motion } from "framer-motion";
 
@@ -77,7 +77,7 @@ export const SharingSection = () => {
 
                 <Tooltip content={t`Copy to Clipboard`}>
                   <Button size="icon" variant="ghost" onClick={onCopy}>
-                    <CopySimple />
+                    <CopySimpleIcon />
                   </Button>
                 </Tooltip>
               </div>

apps/client/src/pages/builder/sidebars/right/sections/statistics.tsx

@@ -1,5 +1,5 @@
 import { t } from "@lingui/macro";
-import { Info } from "@phosphor-icons/react";
+import { InfoIcon } from "@phosphor-icons/react";
 import { Alert, AlertDescription, AlertTitle } from "@reactive-resume/ui";
 import { cn } from "@reactive-resume/utils";
 import { AnimatePresence, motion } from "framer-motion";
@@ -34,7 +34,7 @@ export const StatisticsSection = () => {
               exit={{ opacity: 0, y: -50, filter: "blur(10px)" }}
             >
               <Alert variant="info">
-                <Info size={18} />
+                <InfoIcon size={18} />
                 <AlertTitle>{t`Statistics are available only for public resumes.`}</AlertTitle>
                 <AlertDescription className="text-xs leading-relaxed">
                   {t`You can track the number of views your resume has received, or how many people have downloaded the resume by enabling public sharing.`}

apps/client/src/pages/builder/sidebars/right/shared/section-icon.tsx

@@ -1,17 +1,17 @@
 import type { IconProps } from "@phosphor-icons/react";
 import {
-  Code,
-  DiamondsFour,
-  DownloadSimple,
-  Info,
-  Layout,
-  Note,
-  Palette,
-  ReadCvLogo,
-  ShareFat,
-  TextT,
-  Translate,
-  TrendUp,
+  CodeIcon,
+  DiamondsFourIcon,
+  DownloadSimpleIcon,
+  InfoIcon,
+  LayoutIcon,
+  NoteIcon,
+  PaletteIcon,
+  ReadCvLogoIcon,
+  ShareFatIcon,
+  TextTIcon,
+  TranslateIcon,
+  TrendUpIcon,
 } from "@phosphor-icons/react";
 import type { ButtonProps } from "@reactive-resume/ui";
 import { Button, Tooltip } from "@reactive-resume/ui";
@@ -34,40 +34,40 @@ const getSectionIcon = (id: MetadataKey, props: IconProps = {}) => {
   switch (id) {
     // Left Sidebar
     case "notes": {
-      return <Note size={18} {...props} />;
+      return <NoteIcon size={18} {...props} />;
     }
     case "template": {
-      return <DiamondsFour size={18} {...props} />;
+      return <DiamondsFourIcon size={18} {...props} />;
     }
     case "layout": {
-      return <Layout size={18} {...props} />;
+      return <LayoutIcon size={18} {...props} />;
     }
     case "typography": {
-      return <TextT size={18} {...props} />;
+      return <TextTIcon size={18} {...props} />;
     }
     case "theme": {
-      return <Palette size={18} {...props} />;
+      return <PaletteIcon size={18} {...props} />;
     }
     case "css": {
-      return <Code size={18} {...props} />;
+      return <CodeIcon size={18} {...props} />;
     }
     case "page": {
-      return <ReadCvLogo size={18} {...props} />;
+      return <ReadCvLogoIcon size={18} {...props} />;
     }
     case "locale": {
-      return <Translate size={18} {...props} />;
+      return <TranslateIcon size={18} {...props} />;
     }
     case "sharing": {
-      return <ShareFat size={18} {...props} />;
+      return <ShareFatIcon size={18} {...props} />;
     }
     case "statistics": {
-      return <TrendUp size={18} {...props} />;
+      return <TrendUpIcon size={18} {...props} />;
     }
     case "export": {
-      return <DownloadSimple size={18} {...props} />;
+      return <DownloadSimpleIcon size={18} {...props} />;
     }
     case "information": {
-      return <Info size={18} {...props} />;
+      return <InfoIcon size={18} {...props} />;
     }
 
     default: {

apps/client/src/pages/dashboard/_components/sidebar.tsx

@@ -1,5 +1,5 @@
 import { t } from "@lingui/macro";
-import { FadersHorizontal, ReadCvLogo } from "@phosphor-icons/react";
+import { FadersHorizontalIcon, ReadCvLogoIcon } from "@phosphor-icons/react";
 import { Button, KeyboardShortcut, Separator } from "@reactive-resume/ui";
 import { cn } from "@reactive-resume/utils";
 import { motion } from "framer-motion";
@@ -85,13 +85,13 @@ export const Sidebar = ({ setOpen }: SidebarProps) => {
       path: "/dashboard/resumes",
       name: t`Resumes`,
       shortcut: "⇧R",
-      icon: <ReadCvLogo />,
+      icon: <ReadCvLogoIcon />,
     },
     {
       path: "/dashboard/settings",
       name: t`Settings`,
       shortcut: "⇧S",
-      icon: <FadersHorizontal />,
+      icon: <FadersHorizontalIcon />,
     },
   ];
 

apps/client/src/pages/dashboard/layout.tsx

@@ -1,4 +1,4 @@
-import { SidebarSimple } from "@phosphor-icons/react";
+import { SidebarSimpleIcon } from "@phosphor-icons/react";
 import { Button, Sheet, SheetClose, SheetContent, SheetTrigger } from "@reactive-resume/ui";
 import { motion } from "framer-motion";
 import { useState } from "react";
@@ -15,14 +15,14 @@ export const DashboardLayout = () => {
         <Sheet open={open} onOpenChange={setOpen}>
           <SheetTrigger asChild>
             <Button size="icon" variant="ghost" className="bg-background">
-              <SidebarSimple />
+              <SidebarSimpleIcon />
             </Button>
           </SheetTrigger>
 
           <SheetContent showClose={false} side="left" className="focus-visible:outline-none">
             <SheetClose asChild className="absolute left-4 top-4">
               <Button size="icon" variant="ghost">
-                <SidebarSimple />
+                <SidebarSimpleIcon />
               </Button>
             </SheetClose>
 

apps/client/src/pages/dashboard/resumes/_dialogs/import.tsx

@@ -1,6 +1,6 @@
 import { zodResolver } from "@hookform/resolvers/zod";
 import { t } from "@lingui/macro";
-import { Check, DownloadSimple } from "@phosphor-icons/react";
+import { CheckIcon, DownloadSimpleIcon } from "@phosphor-icons/react";
 import type { JsonResume, LinkedIn, ReactiveResumeV3 } from "@reactive-resume/parser";
 import {
   JsonResumeParser,
@@ -204,7 +204,7 @@ export const ImportDialog = () => {
             <DialogHeader>
               <DialogTitle>
                 <div className="flex items-center space-x-2.5">
-                  <DownloadSimple />
+                  <DownloadSimpleIcon />
                   <h2>{t`Import an existing resume`}</h2>
                 </div>
               </DialogTitle>
@@ -310,7 +310,7 @@ export const ImportDialog = () => {
                     </Button>
 
                     <Button disabled type="button" variant="success">
-                      <Check size={16} weight="bold" className="mr-2" />
+                      <CheckIcon size={16} weight="bold" className="mr-2" />
                       {t`Validated`}
                     </Button>
                   </>

apps/client/src/pages/dashboard/resumes/_dialogs/resume.tsx

@@ -1,6 +1,6 @@
 import { zodResolver } from "@hookform/resolvers/zod";
 import { t } from "@lingui/macro";
-import { CaretDown, Flask, MagicWand, Plus } from "@phosphor-icons/react";
+import { CaretDownIcon, FlaskIcon, MagicWandIcon, PlusIcon } from "@phosphor-icons/react";
 import type { ResumeDto } from "@reactive-resume/dto";
 import { createResumeSchema } from "@reactive-resume/dto";
 import { idSchema, sampleResume } from "@reactive-resume/schema";
@@ -173,7 +173,7 @@ export const ResumeDialog = () => {
             <DialogHeader>
               <DialogTitle>
                 <div className="flex items-center space-x-2.5">
-                  <Plus />
+                  <PlusIcon />
                   <h2>
                     {isCreate && t`Create a new resume`}
                     {isUpdate && t`Update an existing resume`}
@@ -206,7 +206,7 @@ export const ResumeDialog = () => {
                             variant="outline"
                             onClick={onGenerateRandomName}
                           >
-                            <MagicWand />
+                            <MagicWandIcon />
                           </Button>
                         </Tooltip>
                       )}
@@ -250,12 +250,12 @@ export const ResumeDialog = () => {
                   <DropdownMenu>
                     <DropdownMenuTrigger asChild>
                       <Button type="button" size="icon" className="rounded-l-none border-l">
-                        <CaretDown />
+                        <CaretDownIcon />
                       </Button>
                     </DropdownMenuTrigger>
                     <DropdownMenuContent side="right" align="center">
                       <DropdownMenuItem onClick={onCreateSample}>
-                        <Flask className="mr-2" />
+                        <FlaskIcon className="mr-2" />
                         {t`Create Sample Resume`}
                       </DropdownMenuItem>
                     </DropdownMenuContent>

apps/client/src/pages/dashboard/resumes/_layouts/grid/_components/create-card.tsx

@@ -1,5 +1,5 @@
 import { t } from "@lingui/macro";
-import { Plus } from "@phosphor-icons/react";
+import { PlusIcon } from "@phosphor-icons/react";
 import { KeyboardShortcut } from "@reactive-resume/ui";
 import { cn } from "@reactive-resume/utils";
 
@@ -16,7 +16,7 @@ export const CreateResumeCard = () => {
         open("create");
       }}
     >
-      <Plus size={64} weight="thin" />
+      <PlusIcon size={64} weight="thin" />
 
       <div
         className={cn(

apps/client/src/pages/dashboard/resumes/_layouts/grid/_components/import-card.tsx

@@ -1,5 +1,5 @@
 import { t } from "@lingui/macro";
-import { DownloadSimple } from "@phosphor-icons/react";
+import { DownloadSimpleIcon } from "@phosphor-icons/react";
 import { KeyboardShortcut } from "@reactive-resume/ui";
 import { cn } from "@reactive-resume/utils";
 
@@ -16,7 +16,7 @@ export const ImportResumeCard = () => {
         open("create");
       }}
     >
-      <DownloadSimple size={64} weight="thin" />
+      <DownloadSimpleIcon size={64} weight="thin" />
 
       <div
         className={cn(

apps/client/src/pages/dashboard/resumes/_layouts/grid/_components/resume-card.tsx

@@ -1,11 +1,11 @@
 import { t } from "@lingui/macro";
 import {
-  CopySimple,
-  FolderOpen,
-  Lock,
-  LockOpen,
-  PencilSimple,
-  TrashSimple,
+  CopySimpleIcon,
+  FolderOpenIcon,
+  LockIcon,
+  LockOpenIcon,
+  PencilSimpleIcon,
+  TrashSimpleIcon,
 } from "@phosphor-icons/react";
 import type { ResumeDto } from "@reactive-resume/dto";
 import {
@@ -68,7 +68,7 @@ export const ResumeCard = ({ resume }: Props) => {
                 exit={{ opacity: 0 }}
                 className="absolute inset-0 flex items-center justify-center bg-background/75 backdrop-blur-sm"
               >
-                <Lock size={42} />
+                <LockIcon size={42} />
               </motion.div>
             )}
           </AnimatePresence>
@@ -93,31 +93,31 @@ export const ResumeCard = ({ resume }: Props) => {
 
       <DropdownMenuContent>
         <DropdownMenuItem onClick={onOpen}>
-          <FolderOpen size={14} className="mr-2" />
+          <FolderOpenIcon size={14} className="mr-2" />
           {t`Open`}
         </DropdownMenuItem>
         <DropdownMenuItem onClick={onUpdate}>
-          <PencilSimple size={14} className="mr-2" />
+          <PencilSimpleIcon size={14} className="mr-2" />
           {t`Rename`}
         </DropdownMenuItem>
         <DropdownMenuItem onClick={onDuplicate}>
-          <CopySimple size={14} className="mr-2" />
+          <CopySimpleIcon size={14} className="mr-2" />
           {t`Duplicate`}
         </DropdownMenuItem>
         {resume.locked ? (
           <DropdownMenuItem onClick={onLockChange}>
-            <LockOpen size={14} className="mr-2" />
+            <LockOpenIcon size={14} className="mr-2" />
             {t`Unlock`}
           </DropdownMenuItem>
         ) : (
           <DropdownMenuItem onClick={onLockChange}>
-            <Lock size={14} className="mr-2" />
+            <LockIcon size={14} className="mr-2" />
             {t`Lock`}
           </DropdownMenuItem>
         )}
         <DropdownMenuSeparator />
         <DropdownMenuItem className="text-error" onClick={onDelete}>
-          <TrashSimple size={14} className="mr-2" />
+          <TrashSimpleIcon size={14} className="mr-2" />
           {t`Delete`}
         </DropdownMenuItem>
       </DropdownMenuContent>

apps/client/src/pages/dashboard/resumes/_layouts/list/_components/create-item.tsx

@@ -1,5 +1,5 @@
 import { t } from "@lingui/macro";
-import { Plus } from "@phosphor-icons/react";
+import { PlusIcon } from "@phosphor-icons/react";
 import type { ResumeDto } from "@reactive-resume/dto";
 import { KeyboardShortcut } from "@reactive-resume/ui";
 
@@ -12,7 +12,7 @@ export const CreateResumeListItem = () => {
 
   return (
     <BaseListItem
-      start={<Plus size={18} />}
+      start={<PlusIcon size={18} />}
       title={
         <>
           <span>{t`Create a new resume`}</span>

apps/client/src/pages/dashboard/resumes/_layouts/list/_components/import-item.tsx

@@ -1,5 +1,5 @@
 import { t } from "@lingui/macro";
-import { DownloadSimple } from "@phosphor-icons/react";
+import { DownloadSimpleIcon } from "@phosphor-icons/react";
 import { KeyboardShortcut } from "@reactive-resume/ui";
 
 import { useDialog } from "@/client/stores/dialog";
@@ -11,7 +11,7 @@ export const ImportResumeListItem = () => {
 
   return (
     <BaseListItem
-      start={<DownloadSimple size={18} />}
+      start={<DownloadSimpleIcon size={18} />}
       title={
         <>
           <span>{t`Import an existing resume`}</span>

apps/client/src/pages/dashboard/resumes/_layouts/list/_components/resume-item.tsx

@@ -1,12 +1,12 @@
 import { t } from "@lingui/macro";
 import {
-  CopySimple,
-  DotsThreeVertical,
-  FolderOpen,
-  Lock,
-  LockOpen,
-  PencilSimple,
-  TrashSimple,
+  CopySimpleIcon,
+  DotsThreeVerticalIcon,
+  FolderOpenIcon,
+  LockIcon,
+  LockOpenIcon,
+  PencilSimpleIcon,
+  TrashSimpleIcon,
 } from "@phosphor-icons/react";
 import type { ResumeDto } from "@reactive-resume/dto";
 import {
@@ -63,7 +63,7 @@ export const ResumeListItem = ({ resume }: Props) => {
     <DropdownMenu>
       <DropdownMenuTrigger asChild className="aspect-square">
         <Button size="icon" variant="ghost">
-          <DotsThreeVertical />
+          <DotsThreeVerticalIcon />
         </Button>
       </DropdownMenuTrigger>
       <DropdownMenuContent>
@@ -73,7 +73,7 @@ export const ResumeListItem = ({ resume }: Props) => {
             onOpen();
           }}
         >
-          <FolderOpen size={14} className="mr-2" />
+          <FolderOpenIcon size={14} className="mr-2" />
           {t`Open`}
         </DropdownMenuItem>
         <DropdownMenuItem
@@ -82,7 +82,7 @@ export const ResumeListItem = ({ resume }: Props) => {
             onUpdate();
           }}
         >
-          <PencilSimple size={14} className="mr-2" />
+          <PencilSimpleIcon size={14} className="mr-2" />
           {t`Rename`}
         </DropdownMenuItem>
         <DropdownMenuItem
@@ -91,7 +91,7 @@ export const ResumeListItem = ({ resume }: Props) => {
             onDuplicate();
           }}
         >
-          <CopySimple size={14} className="mr-2" />
+          <CopySimpleIcon size={14} className="mr-2" />
           {t`Duplicate`}
         </DropdownMenuItem>
         {resume.locked ? (
@@ -101,7 +101,7 @@ export const ResumeListItem = ({ resume }: Props) => {
               onLockChange();
             }}
           >
-            <LockOpen size={14} className="mr-2" />
+            <LockOpenIcon size={14} className="mr-2" />
             {t`Unlock`}
           </DropdownMenuItem>
         ) : (
@@ -111,7 +111,7 @@ export const ResumeListItem = ({ resume }: Props) => {
               onLockChange();
             }}
           >
-            <Lock size={14} className="mr-2" />
+            <LockIcon size={14} className="mr-2" />
             {t`Lock`}
           </DropdownMenuItem>
         )}
@@ -123,7 +123,7 @@ export const ResumeListItem = ({ resume }: Props) => {
             onDelete();
           }}
         >
-          <TrashSimple size={14} className="mr-2" />
+          <TrashSimpleIcon size={14} className="mr-2" />
           {t`Delete`}
         </DropdownMenuItem>
       </DropdownMenuContent>
@@ -144,31 +144,31 @@ export const ResumeListItem = ({ resume }: Props) => {
 
       <ContextMenuContent>
         <ContextMenuItem onClick={onOpen}>
-          <FolderOpen size={14} className="mr-2" />
+          <FolderOpenIcon size={14} className="mr-2" />
           {t`Open`}
         </ContextMenuItem>
         <ContextMenuItem onClick={onUpdate}>
-          <PencilSimple size={14} className="mr-2" />
+          <PencilSimpleIcon size={14} className="mr-2" />
           {t`Rename`}
         </ContextMenuItem>
         <ContextMenuItem onClick={onDuplicate}>
-          <CopySimple size={14} className="mr-2" />
+          <CopySimpleIcon size={14} className="mr-2" />
           {t`Duplicate`}
         </ContextMenuItem>
         {resume.locked ? (
           <ContextMenuItem onClick={onLockChange}>
-            <LockOpen size={14} className="mr-2" />
+            <LockOpenIcon size={14} className="mr-2" />
             {t`Unlock`}
           </ContextMenuItem>
         ) : (
           <ContextMenuItem onClick={onLockChange}>
-            <Lock size={14} className="mr-2" />
+            <LockIcon size={14} className="mr-2" />
             {t`Lock`}
           </ContextMenuItem>
         )}
         <ContextMenuSeparator />
         <ContextMenuItem className="text-error" onClick={onDelete}>
-          <TrashSimple size={14} className="mr-2" />
+          <TrashSimpleIcon size={14} className="mr-2" />
           {t`Delete`}
         </ContextMenuItem>
       </ContextMenuContent>

apps/client/src/pages/dashboard/resumes/page.tsx

@@ -1,5 +1,5 @@
 import { t } from "@lingui/macro";
-import { List, SquaresFour } from "@phosphor-icons/react";
+import { ListIcon, SquaresFourIcon } from "@phosphor-icons/react";
 import { ScrollArea, Tabs, TabsContent, TabsList, TabsTrigger } from "@reactive-resume/ui";
 import { motion } from "framer-motion";
 import { useState } from "react";
@@ -39,11 +39,11 @@ export const ResumesPage = () => {
 
           <TabsList>
             <TabsTrigger value="grid" className="size-8 p-0 sm:h-8 sm:w-auto sm:px-4">
-              <SquaresFour />
+              <SquaresFourIcon />
               <span className="ml-2 hidden sm:block">{t`Grid`}</span>
             </TabsTrigger>
             <TabsTrigger value="list" className="size-8 p-0 sm:h-8 sm:w-auto sm:px-4">
-              <List />
+              <ListIcon />
               <span className="ml-2 hidden sm:block">{t`List`}</span>
             </TabsTrigger>
           </TabsList>

apps/client/src/pages/dashboard/settings/_dialogs/two-factor.tsx

@@ -1,7 +1,7 @@
 import { zodResolver } from "@hookform/resolvers/zod";
 import { i18n } from "@lingui/core";
 import { msg, t } from "@lingui/macro";
-import { QrCode } from "@phosphor-icons/react";
+import { QrCodeIcon } from "@phosphor-icons/react";
 import {
   Alert,
   AlertDescription,
@@ -154,7 +154,7 @@ export const TwoFactorDialog = () => {
             <DialogHeader>
               <DialogTitle>
                 <div className="flex items-center space-x-2.5">
-                  <QrCode />
+                  <QrCodeIcon />
                   <h2>
                     {mode === "create" && t`Setup two-factor authentication on your account`}
                     {mode === "update" &&

apps/client/src/pages/dashboard/settings/_sections/account.tsx

@@ -1,6 +1,6 @@
 import { zodResolver } from "@hookform/resolvers/zod";
 import { t } from "@lingui/macro";
-import { Check, UploadSimple, Warning } from "@phosphor-icons/react";
+import { CheckIcon, UploadSimpleIcon, WarningIcon } from "@phosphor-icons/react";
 import type { UpdateUserDto } from "@reactive-resume/dto";
 import { updateUserSchema } from "@reactive-resume/dto";
 import {
@@ -137,7 +137,7 @@ export const AccountSettings = () => {
                       className={cn(buttonVariants({ size: "icon", variant: "ghost" }))}
                       onClick={() => inputRef.current?.click()}
                     >
-                      <UploadSimple />
+                      <UploadSimpleIcon />
                     </motion.button>
                   </>
                 )}
@@ -188,7 +188,7 @@ export const AccountSettings = () => {
                     user.emailVerified ? "text-success-accent" : "text-warning-accent",
                   )}
                 >
-                  {user.emailVerified ? <Check size={12} /> : <Warning size={12} />}
+                  {user.emailVerified ? <CheckIcon size={12} /> : <WarningIcon size={12} />}
                   {user.emailVerified ? t`Verified` : t`Unverified`}
                   {!user.emailVerified && (
                     <Button

apps/client/src/pages/dashboard/settings/_sections/openai.tsx

@@ -1,6 +1,6 @@
 import { zodResolver } from "@hookform/resolvers/zod";
 import { t, Trans } from "@lingui/macro";
-import { FloppyDisk, TrashSimple } from "@phosphor-icons/react";
+import { FloppyDiskIcon, TrashSimpleIcon } from "@phosphor-icons/react";
 import {
   Alert,
   Button,
@@ -172,13 +172,13 @@ export const OpenAISettings = () => {
           />
           <div className="flex items-center space-x-2 self-end sm:col-start-2">
             <Button type="submit" disabled={!form.formState.isValid}>
-              {isEnabled && <FloppyDisk className="mr-2" />}
+              {isEnabled && <FloppyDiskIcon className="mr-2" />}
               {isEnabled ? t`Saved` : t`Save Locally`}
             </Button>
 
             {isEnabled && (
               <Button type="reset" variant="ghost" onClick={onRemove}>
-                <TrashSimple className="mr-2" />
+                <TrashSimpleIcon className="mr-2" />
                 {t`Forget`}
               </Button>
             )}

apps/client/src/pages/dashboard/settings/_sections/security.tsx

@@ -91,7 +91,7 @@ export const SecuritySettings = () => {
                 <FormField
                   name="newPassword"
                   control={form.control}
-                  render={({ field, fieldState }) => (
+                  render={({ field }) => (
                     <FormItem>
                       <FormLabel>{t`New Password`}</FormLabel>
                       <FormControl>

apps/client/src/pages/home/components/donation-banner.tsx

@@ -1,6 +1,6 @@
 /* eslint-disable lingui/no-unlocalized-strings */
 
-import { HandHeart } from "@phosphor-icons/react";
+import { HandHeartIcon } from "@phosphor-icons/react";
 import { motion } from "framer-motion";
 
 export const DonationBanner = () => (
@@ -12,7 +12,7 @@ export const DonationBanner = () => (
     animate={{ opacity: 1, y: 0, transition: { duration: 0.3 } }}
     className="hidden w-screen items-center justify-center gap-x-2 bg-zinc-800 text-xs font-bold leading-relaxed text-zinc-50 lg:flex"
   >
-    <HandHeart weight="bold" size={14} className="shrink-0" />
+    <HandHeartIcon weight="bold" size={14} className="shrink-0" />
     <span>
       If this project has helped you, please consider donating to Reactive Resume as we're running
       out of server resources with the increasing number of users.

apps/client/src/pages/home/sections/features/index.tsx

@@ -1,29 +1,29 @@
 import { t } from "@lingui/macro";
 import {
-  Brain,
-  Cloud,
-  CloudSun,
-  CurrencyDollarSimple,
-  EnvelopeSimple,
-  Eye,
-  File,
-  Files,
-  Folder,
-  GitBranch,
-  GithubLogo,
-  GoogleChromeLogo,
-  GoogleLogo,
+  BrainIcon,
+  CloudIcon,
+  CloudSunIcon,
+  CurrencyDollarSimpleIcon,
+  EnvelopeSimpleIcon,
+  EyeIcon,
+  FileIcon,
+  FilesIcon,
+  FolderIcon,
+  GitBranchIcon,
+  GithubLogoIcon,
+  GoogleChromeLogoIcon,
+  GoogleLogoIcon,
   IconContext,
-  Layout,
-  Lock,
-  Note,
-  Prohibit,
-  Scales,
-  StackSimple,
-  Star,
-  Swatches,
-  TextAa,
-  Translate,
+  LayoutIcon,
+  LockIcon,
+  NoteIcon,
+  ProhibitIcon,
+  ScalesIcon,
+  StackSimpleIcon,
+  StarIcon,
+  SwatchesIcon,
+  TextAaIcon,
+  TranslateIcon,
 } from "@phosphor-icons/react";
 import { cn, languages, templatesList } from "@reactive-resume/utils";
 import { motion } from "framer-motion";
@@ -43,30 +43,30 @@ export const FeaturesSection = () => {
   const templatesCount = templatesList.length;
 
   const features: Feature[] = [
-    { icon: <CurrencyDollarSimple />, title: t`Free, forever` },
-    { icon: <GitBranch />, title: t`Open Source` },
-    { icon: <Scales />, title: t`MIT License` },
-    { icon: <Prohibit />, title: t`No user tracking or advertising` },
-    { icon: <Cloud />, title: t`Self-host with Docker` },
-    { icon: <Translate />, title: t`Available in ${languagesCount} languages` },
-    { icon: <Brain />, title: t`OpenAI Integration` },
-    { icon: <GithubLogo />, title: t`Sign in with GitHub` },
-    { icon: <GoogleLogo />, title: t`Sign in with Google` },
-    { icon: <EnvelopeSimple />, title: t`Sign in with Email` },
-    { icon: <Lock />, title: t`Secure with two-factor authentication` },
-    { icon: <StackSimple />, title: t`${templatesCount} resume templates to choose from` },
-    { icon: <Files />, title: t`Design single/multi page resumes` },
-    { icon: <Folder />, title: t`Manage multiple resumes` },
-    { icon: <Swatches />, title: t`Customisable colour palettes` },
-    { icon: <Layout />, title: t`Customisable layouts` },
-    { icon: <Star />, title: t`Custom resume sections` },
-    { icon: <Note />, title: t`Personal notes for each resume` },
-    { icon: <Lock />, title: t`Lock a resume to prevent editing` },
-    { icon: <File />, title: t`Supports A4/Letter page formats` },
-    { icon: <TextAa />, title: t`Pick any font from Google Fonts` },
-    { icon: <GoogleChromeLogo />, title: t`Host your resume publicly` },
-    { icon: <Eye />, title: t`Track views and downloads` },
-    { icon: <CloudSun />, title: t`Light or dark theme` },
+    { icon: <CurrencyDollarSimpleIcon />, title: t`Free, forever` },
+    { icon: <GitBranchIcon />, title: t`Open Source` },
+    { icon: <ScalesIcon />, title: t`MIT License` },
+    { icon: <ProhibitIcon />, title: t`No user tracking or advertising` },
+    { icon: <CloudIcon />, title: t`Self-host with Docker` },
+    { icon: <TranslateIcon />, title: t`Available in ${languagesCount} languages` },
+    { icon: <BrainIcon />, title: t`OpenAI Integration` },
+    { icon: <GithubLogoIcon />, title: t`Sign in with GitHub` },
+    { icon: <GoogleLogoIcon />, title: t`Sign in with Google` },
+    { icon: <EnvelopeSimpleIcon />, title: t`Sign in with Email` },
+    { icon: <LockIcon />, title: t`Secure with two-factor authentication` },
+    { icon: <StackSimpleIcon />, title: t`${templatesCount} resume templates to choose from` },
+    { icon: <FilesIcon />, title: t`Design single/multi page resumes` },
+    { icon: <FolderIcon />, title: t`Manage multiple resumes` },
+    { icon: <SwatchesIcon />, title: t`Customisable colour palettes` },
+    { icon: <LayoutIcon />, title: t`Customisable layouts` },
+    { icon: <StarIcon />, title: t`Custom resume sections` },
+    { icon: <NoteIcon />, title: t`Personal notes for each resume` },
+    { icon: <LockIcon />, title: t`Lock a resume to prevent editing` },
+    { icon: <FileIcon />, title: t`Supports A4/Letter page formats` },
+    { icon: <TextAaIcon />, title: t`Pick any font from Google Fonts` },
+    { icon: <GoogleChromeLogoIcon />, title: t`Host your resume publicly` },
+    { icon: <EyeIcon />, title: t`Track views and downloads` },
+    { icon: <CloudSunIcon />, title: t`Light or dark theme` },
     {
       icon: (
         <div className="flex items-center space-x-1">

apps/client/src/pages/home/sections/hero/call-to-action.tsx

@@ -1,5 +1,5 @@
 import { t } from "@lingui/macro";
-import { Book, SignOut } from "@phosphor-icons/react";
+import { BookIcon, SignOutIcon } from "@phosphor-icons/react";
 import { Button } from "@reactive-resume/ui";
 import { Link } from "react-router";
 
@@ -19,7 +19,7 @@ export const HeroCTA = () => {
         </Button>
 
         <Button size="lg" variant="link" onClick={() => logout()}>
-          <SignOut className="mr-3" />
+          <SignOutIcon className="mr-3" />
           {t`Logout`}
         </Button>
       </>
@@ -34,7 +34,7 @@ export const HeroCTA = () => {
 
       <Button asChild size="lg" variant="link">
         <a href="https://docs.rxresu.me" target="_blank" rel="noopener noreferrer nofollow">
-          <Book className="mr-3" />
+          <BookIcon className="mr-3" />
           {t`Learn more`}
         </a>
       </Button>

apps/client/src/pages/home/sections/hero/index.tsx

@@ -1,5 +1,5 @@
 import { t } from "@lingui/macro";
-import { ArrowRight } from "@phosphor-icons/react";
+import { ArrowRightIcon } from "@phosphor-icons/react";
 import { Badge, buttonVariants } from "@reactive-resume/ui";
 import { cn } from "@reactive-resume/utils";
 import { motion } from "framer-motion";
@@ -30,7 +30,7 @@ export const HeroSection = () => (
             className={cn(buttonVariants({ variant: "link" }), "space-x-2 text-left")}
           >
             <p>{t`What's new in the latest version`}</p>
-            <ArrowRight />
+            <ArrowRightIcon />
           </a>
         </div>
 

apps/client/src/pages/home/sections/testimonials/index.tsx

@@ -2,7 +2,7 @@
 /* eslint-disable lingui/no-unlocalized-strings */
 
 import { t, Trans } from "@lingui/macro";
-import { Quotes } from "@phosphor-icons/react";
+import { QuotesIcon } from "@phosphor-icons/react";
 import { cn } from "@reactive-resume/utils";
 import { motion } from "framer-motion";
 
@@ -92,7 +92,7 @@ export const TestimonialsSection = () => (
                 index > 0 && "hidden lg:block",
               )}
             >
-              <Quotes size={64} className="absolute -right-3 bottom-0 opacity-20" />
+              <QuotesIcon size={64} className="absolute -right-3 bottom-0 opacity-20" />
               <blockquote className="italic leading-relaxed">
                 &ldquo;{testimonial.quote}&rdquo;
               </blockquote>

apps/client/src/pages/public/page.tsx

@@ -1,5 +1,5 @@
 import { t } from "@lingui/macro";
-import { CircleNotch, FilePdf } from "@phosphor-icons/react";
+import { CircleNotchIcon, FilePdfIcon } from "@phosphor-icons/react";
 import type { ResumeDto } from "@reactive-resume/dto";
 import { Button } from "@reactive-resume/ui";
 import { pageSizeMap } from "@reactive-resume/utils";
@@ -100,7 +100,11 @@ export const PublicResumePage = () => {
       <div className="fixed bottom-5 right-5 z-0 hidden sm:block print:hidden">
         <div className="flex flex-col items-center gap-y-2">
           <Button size="icon" variant="ghost" onClick={onDownloadPdf}>
-            {loading ? <CircleNotch size={20} className="animate-spin" /> : <FilePdf size={20} />}
+            {loading ? (
+              <CircleNotchIcon size={20} className="animate-spin" />
+            ) : (
+              <FilePdfIcon size={20} />
+            )}
           </Button>
 
           <ThemeSwitch />

apps/client/src/services/user/user.ts

@@ -11,7 +11,7 @@ export const fetchUser = async () => {
     "/user/me",
   );
 
-  return response.data;
+  return response.data ?? null;
 };
 
 export const useUser = () => {

apps/server/src/mail/mail.module.ts

@@ -26,7 +26,7 @@ const emptyTransporter = nodemailer.createTransport({});
 
         return {
           defaults: { from },
-          transport: smtpUrl || emptyTransporter,
+          transport: smtpUrl ?? emptyTransporter,
         };
       },
     }),

apps/server/src/printer/printer.service.ts

@@ -62,7 +62,7 @@ export class PrinterService {
       },
     });
 
-    const duration = Number(performance.now() - start).toFixed(0);
+    const duration = +(performance.now() - start).toFixed(0);
     const numberPages = resume.data.metadata.layout.length;
 
     this.logger.debug(`Chrome took ${duration}ms to print ${numberPages} page(s)`);
@@ -83,7 +83,7 @@ export class PrinterService {
       },
     });
 
-    const duration = Number(performance.now() - start).toFixed(0);
+    const duration = +(performance.now() - start).toFixed(0);
 
     this.logger.debug(`Chrome took ${duration}ms to generate preview`);
 

libs/ui/src/components/accordion.tsx

@@ -1,4 +1,4 @@
-import { CaretDown } from "@phosphor-icons/react";
+import { CaretDownIcon } from "@phosphor-icons/react";
 import * as AccordionPrimitive from "@radix-ui/react-accordion";
 import { cn } from "@reactive-resume/utils";
 import { forwardRef } from "react";
@@ -28,7 +28,7 @@ export const AccordionTrigger = forwardRef<
       {...props}
     >
       {children}
-      <CaretDown className="size-4 shrink-0 transition-transform duration-200" />
+      <CaretDownIcon className="size-4 shrink-0 transition-transform duration-200" />
     </AccordionPrimitive.Trigger>
   </AccordionPrimitive.Header>
 ));

libs/ui/src/components/checkbox.tsx

@@ -1,4 +1,4 @@
-import { Check } from "@phosphor-icons/react";
+import { CheckIcon } from "@phosphor-icons/react";
 import * as CheckboxPrimitive from "@radix-ui/react-checkbox";
 import { cn } from "@reactive-resume/utils";
 import { forwardRef } from "react";
@@ -16,7 +16,7 @@ export const Checkbox = forwardRef<
     {...props}
   >
     <CheckboxPrimitive.Indicator className={cn("flex items-center justify-center text-current")}>
-      <Check size={12} weight="bold" />
+      <CheckIcon size={12} weight="bold" />
     </CheckboxPrimitive.Indicator>
   </CheckboxPrimitive.Root>
 ));

libs/ui/src/components/combobox.tsx

@@ -1,4 +1,4 @@
-import { CaretDown, Check } from "@phosphor-icons/react";
+import { CaretDownIcon, CheckIcon } from "@phosphor-icons/react";
 import { cn } from "@reactive-resume/utils";
 import { forwardRef, useState } from "react";
 
@@ -85,7 +85,7 @@ export const Combobox = forwardRef(
               {!props.value ||
                 (props.value.length === 0 && (props.selectPlaceholder ?? "Select an option"))}
             </span>
-            <CaretDown
+            <CaretDownIcon
               className={cn(
                 "ml-2 size-4 shrink-0 rotate-0 opacity-50 transition-transform",
                 open && "rotate-180",
@@ -122,7 +122,7 @@ export const Combobox = forwardRef(
                       }
                     }}
                   >
-                    <Check
+                    <CheckIcon
                       className={cn(
                         "mr-2 size-4 opacity-0",
                         !props.multiple && props.value === option.value && "opacity-100",

libs/ui/src/components/command.tsx

@@ -1,4 +1,4 @@
-import { MagnifyingGlass } from "@phosphor-icons/react";
+import { MagnifyingGlassIcon } from "@phosphor-icons/react";
 import { cn } from "@reactive-resume/utils";
 import { Command as CommandPrimitive } from "cmdk";
 import { forwardRef } from "react";
@@ -21,7 +21,7 @@ export const CommandInput = forwardRef<
   React.ComponentPropsWithoutRef<typeof CommandPrimitive.Input>
 >(({ className, ...props }, ref) => (
   <div className="flex items-center border-b px-3" cmdk-input-wrapper="">
-    <MagnifyingGlass size={16} className="mr-1 shrink-0 opacity-50" />
+    <MagnifyingGlassIcon size={16} className="mr-1 shrink-0 opacity-50" />
     <CommandPrimitive.Input
       ref={ref}
       className={cn(

libs/ui/src/components/context-menu.tsx

@@ -1,4 +1,4 @@
-import { CaretRight, Check } from "@phosphor-icons/react";
+import { CaretRightIcon, CheckIcon } from "@phosphor-icons/react";
 import * as ContextMenuPrimitive from "@radix-ui/react-context-menu";
 import { cn } from "@reactive-resume/utils";
 import { forwardRef } from "react";
@@ -31,7 +31,7 @@ export const ContextMenuSubTrigger = forwardRef<
     {...props}
   >
     {children}
-    <CaretRight className="ml-auto size-4" />
+    <CaretRightIcon className="ml-auto size-4" />
   </ContextMenuPrimitive.SubTrigger>
 ));
 
@@ -105,7 +105,7 @@ export const ContextMenuCheckboxItem = forwardRef<
   >
     <span className="absolute left-2 flex size-4 items-center justify-center">
       <ContextMenuPrimitive.ItemIndicator>
-        <Check size={14} />
+        <CheckIcon size={14} />
       </ContextMenuPrimitive.ItemIndicator>
     </span>
     {children}
@@ -128,7 +128,7 @@ export const ContextMenuRadioItem = forwardRef<
   >
     <span className="absolute left-2 flex size-4 items-center justify-center">
       <ContextMenuPrimitive.ItemIndicator>
-        <Check size={14} className="fill-current" />
+        <CheckIcon size={14} className="fill-current" />
       </ContextMenuPrimitive.ItemIndicator>
     </span>
     {children}

libs/ui/src/components/dialog.tsx

@@ -1,4 +1,4 @@
-import { X } from "@phosphor-icons/react";
+import { XIcon } from "@phosphor-icons/react";
 import * as DialogPrimitive from "@radix-ui/react-dialog";
 import { cn } from "@reactive-resume/utils";
 import { forwardRef } from "react";
@@ -45,7 +45,7 @@ export const DialogContent = forwardRef<
     >
       {children}
       <DialogPrimitive.Close className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-secondary focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-secondary data-[state=open]:text-secondary-foreground">
-        <X className="size-4" />
+        <XIcon className="size-4" />
         <span className="sr-only">Close</span>
       </DialogPrimitive.Close>
     </DialogPrimitive.Content>

libs/ui/src/components/dropdown-menu.tsx

@@ -1,4 +1,4 @@
-import { CaretRight, Check, DotOutline } from "@phosphor-icons/react";
+import { CaretRightIcon, CheckIcon, DotOutlineIcon } from "@phosphor-icons/react";
 import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu";
 import { cn } from "@reactive-resume/utils";
 import { forwardRef } from "react";
@@ -31,7 +31,7 @@ export const DropdownMenuSubTrigger = forwardRef<
     {...props}
   >
     {children}
-    <CaretRight className="ml-auto size-4" />
+    <CaretRightIcon className="ml-auto size-4" />
   </DropdownMenuPrimitive.SubTrigger>
 ));
 
@@ -111,7 +111,7 @@ export const DropdownMenuCheckboxItem = forwardRef<
   >
     <span className="absolute left-2 flex size-3.5 items-center justify-center">
       <DropdownMenuPrimitive.ItemIndicator>
-        <Check className="size-4" />
+        <CheckIcon className="size-4" />
       </DropdownMenuPrimitive.ItemIndicator>
     </span>
     {children}
@@ -134,7 +134,7 @@ export const DropdownMenuRadioItem = forwardRef<
   >
     <span className="absolute left-2 flex size-3.5 items-center justify-center">
       <DropdownMenuPrimitive.ItemIndicator>
-        <DotOutline size={18} weight="fill" className="fill-current" />
+        <DotOutlineIcon size={18} weight="fill" className="fill-current" />
       </DropdownMenuPrimitive.ItemIndicator>
     </span>
     {children}

libs/ui/src/components/resizable-panel.tsx

@@ -1,4 +1,4 @@
-import { DotsSixVertical } from "@phosphor-icons/react";
+import { DotsSixVerticalIcon } from "@phosphor-icons/react";
 import { cn } from "@reactive-resume/utils";
 import * as PanelPrimitive from "react-resizable-panels";
 
@@ -31,7 +31,7 @@ export const PanelResizeHandle = ({
     </div>
 
     <div className="pointer-events-none absolute inset-y-0 left-[-5px] z-50 flex items-center justify-center">
-      <DotsSixVertical size={14} opacity={0.75} />
+      <DotsSixVerticalIcon size={14} opacity={0.75} />
     </div>
   </PanelPrimitive.PanelResizeHandle>
 );

libs/ui/src/components/rich-input.tsx

@@ -1,30 +1,30 @@
 import { zodResolver } from "@hookform/resolvers/zod";
 import {
-  ArrowClockwise,
-  ArrowCounterClockwise,
-  Code as CodeIcon,
-  CodeBlock as CodeBlockIcon,
-  HighlighterCircle,
-  Image as ImageIcon,
-  KeyReturn,
-  LinkSimple,
-  ListBullets,
-  ListNumbers,
-  Minus,
-  Paragraph as ParagraphIcon,
-  TextAlignCenter,
-  TextAlignJustify,
-  TextAlignLeft,
-  TextAlignRight,
-  TextAUnderline,
-  TextB,
-  TextHOne,
-  TextHThree,
-  TextHTwo,
-  TextIndent,
-  TextItalic,
-  TextOutdent,
-  TextStrikethrough,
+  ArrowClockwiseIcon,
+  ArrowCounterClockwiseIcon,
+  CodeBlockIcon as CodeBlockIconImport,
+  CodeIcon as CodeIconImport,
+  HighlighterCircleIcon,
+  ImageIcon as ImageIconImport,
+  KeyReturnIcon,
+  LinkSimpleIcon,
+  ListBulletsIcon,
+  ListNumbersIcon,
+  MinusIcon,
+  ParagraphIcon as ParagraphIconImport,
+  TextAlignCenterIcon,
+  TextAlignJustifyIcon,
+  TextAlignLeftIcon,
+  TextAlignRightIcon,
+  TextAUnderlineIcon,
+  TextBIcon,
+  TextHOneIcon,
+  TextHThreeIcon,
+  TextHTwoIcon,
+  TextIndentIcon,
+  TextItalicIcon,
+  TextOutdentIcon,
+  TextStrikethroughIcon,
 } from "@phosphor-icons/react";
 import { PopoverTrigger } from "@radix-ui/react-popover";
 import { cn } from "@reactive-resume/utils";
@@ -153,7 +153,7 @@ const Toolbar = ({ editor }: { editor: Editor }) => {
           disabled={!editor.can().chain().toggleBold().run()}
           onPressedChange={() => editor.chain().focus().toggleBold().run()}
         >
-          <TextB />
+          <TextBIcon />
         </Toggle>
       </Tooltip>
 
@@ -165,7 +165,7 @@ const Toolbar = ({ editor }: { editor: Editor }) => {
           disabled={!editor.can().chain().focus().toggleItalic().run()}
           onPressedChange={() => editor.chain().focus().toggleItalic().run()}
         >
-          <TextItalic />
+          <TextItalicIcon />
         </Toggle>
       </Tooltip>
 
@@ -177,7 +177,7 @@ const Toolbar = ({ editor }: { editor: Editor }) => {
           disabled={!editor.can().chain().focus().toggleStrike().run()}
           onPressedChange={() => editor.chain().focus().toggleStrike().run()}
         >
-          <TextStrikethrough />
+          <TextStrikethroughIcon />
         </Toggle>
       </Tooltip>
 
@@ -189,7 +189,7 @@ const Toolbar = ({ editor }: { editor: Editor }) => {
           disabled={!editor.can().chain().focus().toggleUnderline().run()}
           onPressedChange={() => editor.chain().focus().toggleUnderline().run()}
         >
-          <TextAUnderline />
+          <TextAUnderlineIcon />
         </Toggle>
       </Tooltip>
 
@@ -201,13 +201,13 @@ const Toolbar = ({ editor }: { editor: Editor }) => {
           disabled={!editor.can().chain().focus().toggleHighlight().run()}
           onPressedChange={() => editor.chain().focus().toggleHighlight().run()}
         >
-          <HighlighterCircle />
+          <HighlighterCircleIcon />
         </Toggle>
       </Tooltip>
 
       <Tooltip content="Hyperlink">
         <Button type="button" size="sm" variant="ghost" className="px-2" onClick={setLink}>
-          <LinkSimple />
+          <LinkSimpleIcon />
         </Button>
       </Tooltip>
 
@@ -219,7 +219,7 @@ const Toolbar = ({ editor }: { editor: Editor }) => {
           disabled={!editor.can().chain().focus().toggleCode().run()}
           onPressedChange={() => editor.chain().focus().toggleCode().run()}
         >
-          <CodeIcon />
+          <CodeIconImport />
         </Toggle>
       </Tooltip>
 
@@ -231,7 +231,7 @@ const Toolbar = ({ editor }: { editor: Editor }) => {
           disabled={!editor.can().chain().focus().toggleCodeBlock().run()}
           onPressedChange={() => editor.chain().focus().toggleCodeBlock().run()}
         >
-          <CodeBlockIcon />
+          <CodeBlockIconImport />
         </Toggle>
       </Tooltip>
 
@@ -243,7 +243,7 @@ const Toolbar = ({ editor }: { editor: Editor }) => {
           disabled={!editor.can().chain().focus().toggleHeading({ level: 1 }).run()}
           onPressedChange={() => editor.chain().focus().toggleHeading({ level: 1 }).run()}
         >
-          <TextHOne />
+          <TextHOneIcon />
         </Toggle>
       </Tooltip>
 
@@ -255,7 +255,7 @@ const Toolbar = ({ editor }: { editor: Editor }) => {
           disabled={!editor.can().chain().focus().toggleHeading({ level: 2 }).run()}
           onPressedChange={() => editor.chain().focus().toggleHeading({ level: 2 }).run()}
         >
-          <TextHTwo />
+          <TextHTwoIcon />
         </Toggle>
       </Tooltip>
 
@@ -267,7 +267,7 @@ const Toolbar = ({ editor }: { editor: Editor }) => {
           disabled={!editor.can().chain().focus().toggleHeading({ level: 3 }).run()}
           onPressedChange={() => editor.chain().focus().toggleHeading({ level: 3 }).run()}
         >
-          <TextHThree />
+          <TextHThreeIcon />
         </Toggle>
       </Tooltip>
 
@@ -278,7 +278,7 @@ const Toolbar = ({ editor }: { editor: Editor }) => {
           pressed={editor.isActive("paragraph")}
           onPressedChange={() => editor.chain().focus().setParagraph().run()}
         >
-          <ParagraphIcon />
+          <ParagraphIconImport />
         </Toggle>
       </Tooltip>
 
@@ -290,7 +290,7 @@ const Toolbar = ({ editor }: { editor: Editor }) => {
           disabled={!editor.can().chain().focus().setTextAlign("left").run()}
           onPressedChange={() => editor.chain().focus().setTextAlign("left").run()}
         >
-          <TextAlignLeft />
+          <TextAlignLeftIcon />
         </Toggle>
       </Tooltip>
 
@@ -302,7 +302,7 @@ const Toolbar = ({ editor }: { editor: Editor }) => {
           disabled={!editor.can().chain().focus().setTextAlign("center").run()}
           onPressedChange={() => editor.chain().focus().setTextAlign("center").run()}
         >
-          <TextAlignCenter />
+          <TextAlignCenterIcon />
         </Toggle>
       </Tooltip>
 
@@ -314,7 +314,7 @@ const Toolbar = ({ editor }: { editor: Editor }) => {
           disabled={!editor.can().chain().focus().setTextAlign("right").run()}
           onPressedChange={() => editor.chain().focus().setTextAlign("right").run()}
         >
-          <TextAlignRight />
+          <TextAlignRightIcon />
         </Toggle>
       </Tooltip>
 
@@ -326,7 +326,7 @@ const Toolbar = ({ editor }: { editor: Editor }) => {
           disabled={!editor.can().chain().focus().setTextAlign("justify").run()}
           onPressedChange={() => editor.chain().focus().setTextAlign("justify").run()}
         >
-          <TextAlignJustify />
+          <TextAlignJustifyIcon />
         </Toggle>
       </Tooltip>
 
@@ -338,7 +338,7 @@ const Toolbar = ({ editor }: { editor: Editor }) => {
           disabled={!editor.can().chain().focus().toggleBulletList().run()}
           onPressedChange={() => editor.chain().focus().toggleBulletList().run()}
         >
-          <ListBullets />
+          <ListBulletsIcon />
         </Toggle>
       </Tooltip>
 
@@ -350,7 +350,7 @@ const Toolbar = ({ editor }: { editor: Editor }) => {
           disabled={!editor.can().chain().focus().toggleOrderedList().run()}
           onPressedChange={() => editor.chain().focus().toggleOrderedList().run()}
         >
-          <ListNumbers />
+          <ListNumbersIcon />
         </Toggle>
       </Tooltip>
 
@@ -363,7 +363,7 @@ const Toolbar = ({ editor }: { editor: Editor }) => {
           disabled={!editor.can().chain().focus().liftListItem("listItem").run()}
           onClick={() => editor.chain().focus().liftListItem("listItem").run()}
         >
-          <TextOutdent />
+          <TextOutdentIcon />
         </Button>
       </Tooltip>
 
@@ -376,7 +376,7 @@ const Toolbar = ({ editor }: { editor: Editor }) => {
           disabled={!editor.can().chain().focus().sinkListItem("listItem").run()}
           onClick={() => editor.chain().focus().sinkListItem("listItem").run()}
         >
-          <TextIndent />
+          <TextIndentIcon />
         </Button>
       </Tooltip>
 
@@ -384,7 +384,7 @@ const Toolbar = ({ editor }: { editor: Editor }) => {
         <Tooltip content="Insert Image">
           <PopoverTrigger asChild>
             <Button type="button" size="sm" variant="ghost" className="px-2">
-              <ImageIcon />
+              <ImageIconImport />
             </Button>
           </PopoverTrigger>
         </Tooltip>
@@ -402,7 +402,7 @@ const Toolbar = ({ editor }: { editor: Editor }) => {
           disabled={!editor.can().chain().focus().setHardBreak().run()}
           onClick={() => editor.chain().focus().setHardBreak().run()}
         >
-          <KeyReturn />
+          <KeyReturnIcon />
         </Button>
       </Tooltip>
 
@@ -415,7 +415,7 @@ const Toolbar = ({ editor }: { editor: Editor }) => {
           disabled={!editor.can().chain().focus().setHorizontalRule().run()}
           onClick={() => editor.chain().focus().setHorizontalRule().run()}
         >
-          <Minus />
+          <MinusIcon />
         </Button>
       </Tooltip>
 
@@ -428,7 +428,7 @@ const Toolbar = ({ editor }: { editor: Editor }) => {
           disabled={!editor.can().undo()}
           onClick={() => editor.chain().focus().undo().run()}
         >
-          <ArrowCounterClockwise />
+          <ArrowCounterClockwiseIcon />
         </Button>
       </Tooltip>
 
@@ -441,7 +441,7 @@ const Toolbar = ({ editor }: { editor: Editor }) => {
           disabled={!editor.can().redo()}
           onClick={() => editor.chain().focus().redo().run()}
         >
-          <ArrowClockwise />
+          <ArrowClockwiseIcon />
         </Button>
       </Tooltip>
     </div>

libs/ui/src/components/select.tsx

@@ -1,4 +1,4 @@
-import { CaretUpDown, Check } from "@phosphor-icons/react";
+import { CaretUpDownIcon, CheckIcon } from "@phosphor-icons/react";
 import * as SelectPrimitive from "@radix-ui/react-select";
 import { cn } from "@reactive-resume/utils";
 import { forwardRef } from "react";
@@ -23,7 +23,7 @@ export const SelectTrigger = forwardRef<
   >
     {children}
     <SelectPrimitive.Icon asChild>
-      <CaretUpDown className="size-4 opacity-50" />
+      <CaretUpDownIcon className="size-4 opacity-50" />
     </SelectPrimitive.Icon>
   </SelectPrimitive.Trigger>
 ));
@@ -88,7 +88,7 @@ export const SelectItem = forwardRef<
   >
     <span className="absolute right-2 flex size-3.5 items-center justify-center">
       <SelectPrimitive.ItemIndicator>
-        <Check className="size-4" />
+        <CheckIcon className="size-4" />
       </SelectPrimitive.ItemIndicator>
     </span>
     <SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>

libs/ui/src/components/sheet.tsx

@@ -1,4 +1,4 @@
-import { X } from "@phosphor-icons/react";
+import { XIcon } from "@phosphor-icons/react";
 import * as SheetPrimitive from "@radix-ui/react-dialog";
 import { cn } from "@reactive-resume/utils";
 import { type VariantProps } from "class-variance-authority";
@@ -50,7 +50,7 @@ export const SheetContent = forwardRef<
 
       {showClose && (
         <SheetPrimitive.Close className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-primary focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-secondary">
-          <X className="size-4" />
+          <XIcon className="size-4" />
           <span className="sr-only">Close</span>
         </SheetPrimitive.Close>
       )}

libs/ui/src/components/toast.tsx

@@ -1,4 +1,4 @@
-import { X } from "@phosphor-icons/react";
+import { XIcon } from "@phosphor-icons/react";
 import * as ToastPrimitives from "@radix-ui/react-toast";
 import { cn } from "@reactive-resume/utils";
 import { type VariantProps } from "class-variance-authority";
@@ -80,7 +80,7 @@ export const ToastClose = forwardRef<
     toast-close=""
     {...props}
   >
-    <X className="size-4" />
+    <XIcon className="size-4" />
   </ToastPrimitives.Close>
 ));
 

package.json

@@ -32,14 +32,14 @@
     "messages:extract": "pnpm exec lingui extract --clean --overwrite"
   },
   "devDependencies": {
-    "@babel/core": "^7.26.7",
-    "@babel/preset-react": "^7.26.3",
+    "@babel/core": "^7.28.4",
+    "@babel/preset-react": "^7.27.1",
     "@lingui/cli": "^4.14.1",
     "@lingui/conf": "^4.14.1",
     "@lingui/swc-plugin": "^4.1.0",
     "@lingui/vite-plugin": "^4.14.1",
     "@nestjs/schematics": "^10.2.3",
-    "@nestjs/testing": "^10.4.15",
+    "@nestjs/testing": "^10.4.20",
     "@nx/eslint": "^19.8.14",
     "@nx/eslint-plugin": "^19.8.14",
     "@nx/jest": "^19.8.14",
@@ -51,78 +51,78 @@
     "@nx/web": "^19.8.14",
     "@nx/webpack": "^19.8.14",
     "@nx/workspace": "^19.8.14",
-    "@swc-node/register": "^1.10.9",
+    "@swc-node/register": "^1.11.1",
     "@swc/cli": "^0.4.0",
-    "@swc/core": "^1.10.12",
+    "@swc/core": "^1.13.5",
     "@tailwindcss/container-queries": "^0.1.1",
     "@tailwindcss/forms": "^0.5.10",
-    "@tailwindcss/typography": "^0.5.16",
-    "@tanstack/eslint-plugin-query": "^5.66.0",
-    "@testing-library/react": "^16.2.0",
-    "@tiptap/core": "^2.11.5",
+    "@tailwindcss/typography": "^0.5.19",
+    "@tanstack/eslint-plugin-query": "^5.91.0",
+    "@testing-library/react": "^16.3.0",
+    "@tiptap/core": "^2.26.2",
     "@types/async-retry": "^1.4.9",
     "@types/bcryptjs": "^2.4.6",
-    "@types/cookie-parser": "^1.4.8",
-    "@types/express": "^4.17.21",
-    "@types/express-session": "^1.18.1",
+    "@types/cookie-parser": "^1.4.9",
+    "@types/express": "^4.17.23",
+    "@types/express-session": "^1.18.2",
     "@types/file-saver": "^2.0.7",
     "@types/jest": "^29.5.14",
     "@types/lodash.debounce": "^4.0.9",
     "@types/lodash.get": "^4.4.9",
     "@types/lodash.set": "^4.3.9",
-    "@types/multer": "^1.4.12",
-    "@types/node": "^22.13.0",
-    "@types/nodemailer": "^6.4.17",
-    "@types/papaparse": "^5.3.15",
+    "@types/multer": "^1.4.13",
+    "@types/node": "^22.18.8",
+    "@types/nodemailer": "^6.4.20",
+    "@types/papaparse": "^5.3.16",
     "@types/passport": "^1.0.17",
     "@types/passport-github2": "^1.2.9",
     "@types/passport-google-oauth20": "^2.0.16",
     "@types/passport-local": "^1.0.38",
     "@types/passport-openidconnect": "^0.1.3",
     "@types/prismjs": "^1.26.5",
-    "@types/react": "^18.3.18",
-    "@types/react-dom": "^18.3.5",
+    "@types/react": "^18.3.25",
+    "@types/react-dom": "^18.3.7",
     "@types/react-is": "^18.3.1",
     "@types/retry": "^0.12.5",
-    "@types/sanitize-html": "^2.13.0",
+    "@types/sanitize-html": "^2.16.0",
     "@types/webfontloader": "^1.6.38",
-    "@typescript-eslint/eslint-plugin": "^8.23.0",
-    "@typescript-eslint/parser": "^8.23.0",
-    "@vitejs/plugin-react": "^4.3.4",
-    "@vitejs/plugin-react-swc": "^3.7.2",
+    "@typescript-eslint/eslint-plugin": "^8.45.0",
+    "@typescript-eslint/parser": "^8.45.0",
+    "@vitejs/plugin-react": "^4.7.0",
+    "@vitejs/plugin-react-swc": "^3.11.0",
     "@vitest/coverage-v8": "^2.1.9",
     "@vitest/ui": "^2.1.9",
-    "autoprefixer": "^10.4.20",
+    "autoprefixer": "^10.4.21",
     "babel-plugin-macros": "^3.1.0",
     "eslint": "^8.57.1",
-    "eslint-config-prettier": "^9.1.0",
-    "eslint-plugin-import": "^2.31.0",
+    "eslint-config-prettier": "^9.1.2",
+    "eslint-plugin-import": "^2.32.0",
     "eslint-plugin-jsx-a11y": "^6.10.2",
     "eslint-plugin-lingui": "^0.9.0",
-    "eslint-plugin-prettier": "^5.2.3",
-    "eslint-plugin-react": "^7.37.4",
+    "eslint-plugin-prettier": "^5.5.4",
+    "eslint-plugin-react": "^7.37.5",
     "eslint-plugin-react-hooks": "^4.6.2",
     "eslint-plugin-simple-import-sort": "^12.1.1",
-    "eslint-plugin-tailwindcss": "^3.18.0",
+    "eslint-plugin-tailwindcss": "^3.18.2",
     "eslint-plugin-unicorn": "^55.0.0",
     "eslint-plugin-unused-imports": "^3.2.0",
     "jest": "^29.7.0",
     "jest-environment-node": "^29.7.0",
     "jsdom": "^25.0.1",
     "nx": "^19.8.14",
-    "postcss": "^8.5.1",
-    "postcss-import": "^16.1.0",
+    "postcss": "^8.5.6",
+    "postcss-import": "^16.1.1",
     "postcss-nested": "^6.2.0",
-    "prettier": "^3.4.2",
-    "prettier-plugin-tailwindcss": "^0.6.11",
+    "prettier": "^3.6.2",
+    "prettier-plugin-tailwindcss": "^0.6.14",
     "tailwindcss": "^3.4.17",
     "tailwindcss-animate": "^1.0.7",
-    "ts-jest": "^29.2.5",
+    "ts-jest": "^29.4.4",
     "ts-node": "^10.9.2",
     "turbo": "^2.5.8",
-    "typescript": "^5.7.3",
-    "vite": "^5.4.14",
-    "vite-plugin-dts": "^4.5.0",
+    "typescript": "^5.9.3",
+    "vite": "^5.4.20",
+    "vite-plugin-dts": "^4.5.4",
     "vitest": "^2.1.9"
   },
   "dependencies": {
@@ -130,7 +130,7 @@
     "@dnd-kit/modifiers": "^7.0.0",
     "@dnd-kit/sortable": "^8.0.0",
     "@dnd-kit/utilities": "^3.2.2",
-    "@fontsource/ibm-plex-sans": "^5.1.1",
+    "@fontsource/ibm-plex-sans": "^5.2.8",
     "@hookform/resolvers": "^3.10.0",
     "@lingui/core": "^4.14.1",
     "@lingui/detect-locale": "^4.14.1",
@@ -138,83 +138,83 @@
     "@lingui/react": "^4.14.1",
     "@nestjs-modules/mailer": "^2.0.2",
     "@nestjs/axios": "^3.1.3",
-    "@nestjs/common": "^10.4.15",
+    "@nestjs/common": "^10.4.20",
     "@nestjs/config": "^3.3.0",
-    "@nestjs/core": "^10.4.15",
+    "@nestjs/core": "^10.4.20",
     "@nestjs/jwt": "^10.2.0",
     "@nestjs/passport": "^10.0.3",
-    "@nestjs/platform-express": "^10.4.15",
+    "@nestjs/platform-express": "^10.4.20",
     "@nestjs/serve-static": "^4.0.2",
     "@nestjs/swagger": "^7.4.2",
     "@nestjs/terminus": "^10.3.0",
     "@paralleldrive/cuid2": "^2.2.2",
-    "@phosphor-icons/react": "^2.1.7",
+    "@phosphor-icons/react": "^2.1.10",
     "@prisma/client": "^5.22.0",
-    "@radix-ui/react-accordion": "^1.2.2",
-    "@radix-ui/react-alert-dialog": "^1.1.5",
-    "@radix-ui/react-aspect-ratio": "^1.1.1",
-    "@radix-ui/react-avatar": "^1.1.2",
-    "@radix-ui/react-checkbox": "^1.1.3",
-    "@radix-ui/react-context-menu": "^2.2.5",
-    "@radix-ui/react-dialog": "^1.1.5",
-    "@radix-ui/react-dropdown-menu": "^2.1.5",
-    "@radix-ui/react-hover-card": "^1.1.5",
-    "@radix-ui/react-label": "^2.1.1",
-    "@radix-ui/react-popover": "^1.1.5",
-    "@radix-ui/react-portal": "^1.1.3",
-    "@radix-ui/react-scroll-area": "^1.2.2",
-    "@radix-ui/react-select": "^2.1.5",
-    "@radix-ui/react-separator": "^1.1.1",
-    "@radix-ui/react-slider": "^1.2.2",
-    "@radix-ui/react-slot": "^1.1.1",
-    "@radix-ui/react-switch": "^1.1.2",
-    "@radix-ui/react-tabs": "^1.1.2",
-    "@radix-ui/react-toast": "^1.2.5",
-    "@radix-ui/react-toggle": "^1.1.1",
-    "@radix-ui/react-toggle-group": "^1.1.1",
-    "@radix-ui/react-tooltip": "^1.1.7",
-    "@radix-ui/react-visually-hidden": "^1.1.1",
+    "@radix-ui/react-accordion": "^1.2.12",
+    "@radix-ui/react-alert-dialog": "^1.1.15",
+    "@radix-ui/react-aspect-ratio": "^1.1.7",
+    "@radix-ui/react-avatar": "^1.1.10",
+    "@radix-ui/react-checkbox": "^1.3.3",
+    "@radix-ui/react-context-menu": "^2.2.16",
+    "@radix-ui/react-dialog": "^1.1.15",
+    "@radix-ui/react-dropdown-menu": "^2.1.16",
+    "@radix-ui/react-hover-card": "^1.1.15",
+    "@radix-ui/react-label": "^2.1.7",
+    "@radix-ui/react-popover": "^1.1.15",
+    "@radix-ui/react-portal": "^1.1.9",
+    "@radix-ui/react-scroll-area": "^1.2.10",
+    "@radix-ui/react-select": "^2.2.6",
+    "@radix-ui/react-separator": "^1.1.7",
+    "@radix-ui/react-slider": "^1.3.6",
+    "@radix-ui/react-slot": "^1.2.3",
+    "@radix-ui/react-switch": "^1.2.6",
+    "@radix-ui/react-tabs": "^1.1.13",
+    "@radix-ui/react-toast": "^1.2.15",
+    "@radix-ui/react-toggle": "^1.1.10",
+    "@radix-ui/react-toggle-group": "^1.1.11",
+    "@radix-ui/react-tooltip": "^1.2.8",
+    "@radix-ui/react-visually-hidden": "^1.2.3",
     "@sindresorhus/slugify": "^2.2.1",
-    "@swc/helpers": "^0.5.15",
-    "@tanstack/react-query": "^5.66.0",
-    "@tiptap/extension-highlight": "^2.11.5",
-    "@tiptap/extension-image": "^2.11.5",
-    "@tiptap/extension-link": "^2.11.5",
-    "@tiptap/extension-text-align": "^2.11.5",
-    "@tiptap/extension-underline": "^2.11.5",
-    "@tiptap/pm": "^2.11.5",
-    "@tiptap/react": "^2.11.5",
-    "@tiptap/starter-kit": "^2.11.5",
+    "@swc/helpers": "^0.5.17",
+    "@tanstack/react-query": "^5.90.2",
+    "@tiptap/extension-highlight": "^2.26.2",
+    "@tiptap/extension-image": "^2.26.2",
+    "@tiptap/extension-link": "^2.26.2",
+    "@tiptap/extension-text-align": "^2.26.2",
+    "@tiptap/extension-underline": "^2.26.2",
+    "@tiptap/pm": "^2.26.2",
+    "@tiptap/react": "^2.26.2",
+    "@tiptap/starter-kit": "^2.26.1",
     "@types/passport-jwt": "^4.0.1",
     "async-retry": "^1.3.3",
-    "axios": "^1.7.9",
+    "axios": "^1.12.2",
     "axios-auth-refresh": "^3.3.6",
     "bcryptjs": "^2.4.3",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
-    "cmdk": "^1.0.4",
+    "cmdk": "^1.1.1",
     "cookie-parser": "^1.4.7",
-    "dayjs": "^1.11.13",
+    "dayjs": "^1.11.18",
     "deepmerge": "^4.3.1",
-    "express-session": "^1.18.1",
+    "express-session": "^1.18.2",
     "file-saver": "^2.0.5",
     "framer-motion": "^11.18.2",
     "fuzzy": "^0.1.3",
     "helmet": "^7.2.0",
-    "immer": "^10.1.1",
+    "immer": "^10.1.3",
     "jszip": "^3.10.1",
     "lodash.debounce": "^4.0.8",
     "lodash.get": "^4.4.2",
     "lodash.set": "^4.3.2",
-    "minio": "^8.0.4",
+    "minio": "^8.0.6",
     "nest-raven": "^10.1.0",
     "nestjs-minio-client": "^2.2.0",
     "nestjs-prisma": "^0.24.0",
     "nestjs-zod": "^3.0.0",
-    "nodemailer": "^6.10.0",
-    "openai": "^4.82.0",
+    "nodemailer": "^6.10.1",
+    "openai": "^4.104.0",
     "otplib": "^12.0.1",
-    "papaparse": "^5.5.2",
+    "papaparse": "^5.5.3",
     "passport": "^0.7.0",
     "passport-github2": "^0.1.12",
     "passport-google-oauth20": "^2.0.0",
@@ -223,34 +223,34 @@
     "passport-openidconnect": "^0.1.2",
     "pdf-lib": "^1.17.1",
     "prisma": "^5.22.0",
-    "prismjs": "^1.29.0",
+    "prismjs": "^1.30.0",
     "puppeteer": "^23.11.1",
     "qrcode.react": "^4.2.0",
     "react": "^18.3.1",
     "react-colorful": "^5.6.1",
     "react-dom": "^18.3.1",
     "react-helmet-async": "^2.0.5",
-    "react-hook-form": "^7.54.2",
-    "react-parallax-tilt": "^1.7.277",
-    "react-resizable-panels": "^2.1.7",
-    "react-router": "^7.1.5",
+    "react-hook-form": "^7.63.0",
+    "react-parallax-tilt": "^1.7.309",
+    "react-resizable-panels": "^2.1.9",
+    "react-router": "^7.9.3",
     "react-simple-code-editor": "^0.14.1",
     "react-zoom-pan-pinch": "^3.7.0",
     "reflect-metadata": "^0.2.2",
-    "rxjs": "^7.8.1",
-    "sanitize-html": "^2.14.0",
+    "rxjs": "^7.8.2",
+    "sanitize-html": "^2.17.0",
     "sharp": "^0.33.5",
     "tailwind-merge": "^2.6.0",
     "tslib": "^2.8.1",
     "unique-names-generator": "^4.7.1",
     "use-breakpoint": "^4.0.6",
     "use-keyboard-shortcut": "^1.1.6",
-    "usehooks-ts": "^3.1.0",
+    "usehooks-ts": "^3.1.1",
     "webfontloader": "^1.6.28",
-    "zod": "^3.24.1",
-    "zod-to-json-schema": "^3.24.1",
+    "zod": "^3.25.76",
+    "zod-to-json-schema": "^3.24.6",
     "zundo": "^2.3.0",
-    "zustand": "^4.5.6"
+    "zustand": "^4.5.7"
   },
   "engines": {
     "node": ">=22.13.1"

pnpm-workspace.yaml

@@ -1,11 +1,12 @@
 onlyBuiltDependencies:
-  - "@nestjs/core"
-  - "@parcel/watcher"
-  - "@prisma/client"
-  - "@prisma/engines"
-  - "@swc/core"
+  - '@nestjs/core'
+  - '@parcel/watcher'
+  - '@prisma/client'
+  - '@prisma/engines'
+  - '@swc/core'
   - esbuild
   - nx
+  - oxc-resolver
   - prisma
   - puppeteer
   - sharp