feat: adj component

app/components/icons/close.tsx

@@ -0,0 +1,23 @@
+import type { JSX, SVGProps } from 'react'
+
+export const CloseIcon = (
+  properties: JSX.IntrinsicAttributes & SVGProps<SVGSVGElement>,
+) => {
+  return (
+    <svg
+      width={40}
+      height={40}
+      viewBox="0 0 40 40"
+      fill="currentColor"
+      xmlns="http://www.w3.org/2000/svg"
+      {...properties}
+    >
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M20 23.537l8.838 8.838a2.5 2.5 0 003.537-3.537L23.533 20l8.84-8.838a2.498 2.498 0 000-3.536 2.5 2.5 0 00-3.536 0L20 16.466l-8.838-8.838a2.5 2.5 0 10-3.537 3.533L16.467 20l-8.84 8.84a2.5 2.5 0 103.536 3.533L20 23.537z"
+        fill="#currentColor"
+      />
+    </svg>
+  )
+}

app/components/icons/eye.tsx

@@ -0,0 +1,21 @@
+import type { JSX, SVGProps } from 'react'
+
+export const EyeIcon = (
+  properties: JSX.IntrinsicAttributes & SVGProps<SVGSVGElement>,
+) => {
+  return (
+    <svg
+      width={28}
+      height={20}
+      viewBox="0 0 28 20"
+      fill="currentColor"
+      xmlns="http://www.w3.org/2000/svg"
+      {...properties}
+    >
+      <path
+        d="M14 .676C3.823.676.764 9.49.736 9.58L.595 10l.14.422c.03.09 3.088 8.903 13.265 8.903s13.236-8.814 13.264-8.903l.141-.421-.14-.42C27.236 9.49 24.177.675 14 .675zm0 14.652A5.336 5.336 0 018.667 10 5.336 5.336 0 0114 4.672 5.336 5.336 0 0119.333 10 5.336 5.336 0 0114 15.328z"
+        fill="#currentColor"
+      />
+    </svg>
+  )
+}

app/components/icons/menu.tsx

@@ -0,0 +1,21 @@
+import type { JSX, SVGProps } from 'react'
+
+export const MenuIcon = (
+  properties: JSX.IntrinsicAttributes & SVGProps<SVGSVGElement>,
+) => {
+  return (
+    <svg
+      width={38}
+      height={26}
+      viewBox="0 0 38 26"
+      fill="currentColor"
+      xmlns="http://www.w3.org/2000/svg"
+      {...properties}
+    >
+      <path
+        d="M2.333 25.5c-.59 0-1.084-.2-1.483-.6-.399-.4-.599-.894-.6-1.483-.001-.59.199-1.084.6-1.484.401-.4.896-.6 1.483-.6h33.334c.59 0 1.085.2 1.485.6.4.4.6.895.598 1.484-.001.589-.201 1.084-.6 1.485-.399.401-.893.6-1.483.598H2.333zm0-10.417c-.59 0-1.084-.2-1.483-.6-.399-.4-.599-.894-.6-1.483-.001-.589.199-1.083.6-1.483.401-.4.896-.6 1.483-.6h33.334c.59 0 1.085.2 1.485.6.4.4.6.894.598 1.483-.001.589-.201 1.084-.6 1.485-.399.402-.893.601-1.483.598H2.333zm0-10.416c-.59 0-1.084-.2-1.483-.6-.399-.4-.599-.895-.6-1.484C.249 1.994.449 1.5.85 1.1c.401-.4.896-.6 1.483-.6h33.334c.59 0 1.085.2 1.485.6.4.4.6.894.598 1.483-.001.59-.201 1.084-.6 1.486-.399.401-.893.6-1.483.598H2.333z"
+        fill="currentColor"
+      />
+    </svg>
+  )
+}

app/components/popup/header-modal.tsx

@@ -0,0 +1,44 @@
+import type { ReactNode } from 'react'
+import { Link } from 'react-router'
+
+import { LeftArrow } from '~/components/icons/left-arrow'
+import { APP } from '~/data/meta'
+
+type THeaderModal = {
+  typeForm?: string
+  titleForm?: string
+  children: ReactNode
+}
+export default function HeaderModal({ typeForm, children }: THeaderModal) {
+  return (
+    <>
+      <div className="absolute top-0 left-0 lg:hidden">
+        <Link
+          to="/#"
+          className="mt-2 h-full py-2"
+        >
+          <LeftArrow
+            width={'50px'}
+            height={'50px'}
+          />
+        </Link>
+      </div>
+      <div className="w-full max-w-md">
+        <div className="mb-6 flex justify-center">
+          <Link to="/news">
+            <img
+              src={APP.logo}
+              alt={APP.title}
+              className="h-[80px]"
+            />
+          </Link>
+        </div>
+
+        <div className="mb-4 p-4 text-center text-[#565658]">
+          {children}
+          <p>{typeForm}</p>
+        </div>
+      </div>
+    </>
+  )
+}

app/components/popup/modal.tsx

@@ -1,6 +1,7 @@
+import { Dialog, DialogPanel } from '@headlessui/react'
 import type { ReactNode } from 'react'
 
-interface ModalProperties {
+type ModalProperties = {
   isOpen: boolean
   onClose: () => void
   children: ReactNode
@@ -13,18 +14,22 @@ export default function PopupModal({
 }: ModalProperties) {
   if (!isOpen) return
   return (
-    <>
+    <Dialog
-      <div className="bg-opacity-50 fixed inset-0 z-50 grid place-items-center bg-gray-300/50">
+      open={isOpen}
-        <button
+      as="div"
-          onClick={onClose}
+      className="relative z-30 focus:outline-none"
-          className="absolute top-5 right-5 z-50 bg-red-500 p-3 text-gray-500 hover:text-gray-800"
+      onClose={onClose}
-        >
+    >
-          ✖
+      <div className="fixed inset-0 z-30 w-screen overflow-y-auto backdrop-blur-sm">
-        </button>
+        <div className="flex min-h-full items-center justify-center sm:p-4">
-        <div className="relative rounded-lg bg-white p-6 shadow-lg">
+          <DialogPanel
-          {children}
+            transition
+            className="w-full rounded-xl bg-white p-5 shadow duration-300 ease-out data-[closed]:transform-[scale(95%)] data-[closed]:opacity-0 max-md:min-h-screen max-md:min-w-screen max-sm:p-[50px] sm:max-w-md sm:p-10"
+          >
+            {children}
+          </DialogPanel>
         </div>
       </div>
-    </>
+    </Dialog>
   )
 }

app/components/popup/succes-payment.tsx

@@ -1,48 +1,29 @@
-import { Link } from 'react-router'
+import { Button } from '@headlessui/react'
 
-import { LeftArrow } from '~/components/icons/left-arrow'
+import HeaderModal from '~/components/popup/header-modal'
 import { APP } from '~/data/meta'
 
 export default function PopupSuccessPayment() {
   return (
-    <div className="flex min-h-screen items-center justify-center">
+    <>
-      <div className="w-full max-w-md p-6">
+      <div className="relative flex flex-col items-center justify-center">
-        <div className="absolute top-[80px] left-[50px]">
+        <HeaderModal>
-          <Link
+          <p>Selamat! Pembayaran anda berhasil!</p>
-            to="/#"
+        </HeaderModal>
-            className="mt-2 h-full py-2"
-          >
-            <LeftArrow
-              width={'70px'}
-              height={'70px'}
-            ></LeftArrow>
-          </Link>
-        </div>
-
-        <div className="mb-6 flex justify-center">
-          <Link to="/news">
-            <img
-              src={APP.logo}
-              alt={APP.title}
-              className="h-[80px]"
-            />
-          </Link>
-        </div>
 
         <div className="mb-4 p-4 text-center">
-          <p className="text-[#565658]">Selamat! Pembayaran anda berhasil!</p>
+          <div className="flex justify-center">
-          <div className="my-10 flex justify-center">
             <img
               src={'/public/images/back-to-home.svg'}
               alt={APP.title}
-              className="h-[350px]"
+              className="h-[300px]"
             />
           </div>
-          <button className="mt-5 w-full rounded-md bg-[#2E2F7C] py-2 text-white transition hover:bg-blue-800">
+          <Button className="mt-5 w-full rounded-md bg-[#2E2F7C] py-2 text-white transition hover:bg-blue-800">
             Back to Home
-          </button>
+          </Button>
         </div>
       </div>
-    </div>
+    </>
   )
 }

app/components/popup/succes-register.tsx

@@ -1,3 +1,4 @@
+import { Button } from '@headlessui/react'
 import { Link } from 'react-router'
 
 import { LeftArrow } from '~/components/icons/left-arrow'
@@ -38,9 +39,9 @@ export default function PopupSuccesRegister() {
               className="h-[350px]"
             />
           </div>
-          <button className="mt-5 w-full rounded-md bg-[#2E2F7C] py-2 text-white transition hover:bg-blue-800">
+          <Button className="mt-5 w-full rounded-md bg-[#2E2F7C] py-2 text-white transition hover:bg-blue-800">
             Back to Home
-          </button>
+          </Button>
         </div>
       </div>
     </div>

app/components/popup/succes-reset-pass.tsx

@@ -1,3 +1,4 @@
+import { Button } from '@headlessui/react'
 import { Link } from 'react-router'
 
 import { LeftArrow } from '~/components/icons/left-arrow'
@@ -40,9 +41,9 @@ export default function PopupSuccessResetPass() {
               className="h-[350px]"
             />
           </div>
-          <button className="mt-5 w-full rounded-md bg-[#2E2F7C] py-2 text-white transition hover:bg-blue-800">
+          <Button className="mt-5 w-full rounded-md bg-[#2E2F7C] py-2 text-white transition hover:bg-blue-800">
             Back to Home
-          </button>
+          </Button>
         </div>
       </div>
     </div>

app/components/ui/banner.tsx

@@ -11,7 +11,7 @@ export default function Banner() {
           className="mt-2 h-full py-2"
         >
           <img
-            src={'https://placehold.co/1200x70.png'}
+            src={'/public/images/banner.png'}
             alt={APP.title}
             className="h-[70px] w-[100%] sm:h-full"
           />

app/components/ui/form-forgot-password.tsx

@@ -1,40 +1,14 @@
-import { Link } from 'react-router'
+import HeaderModal from '~/components/popup/header-modal'
-
+import { Button } from '~/components/ui/button'
-import { LeftArrow } from '~/components/icons/left-arrow'
-import { APP } from '~/data/meta'
 
 export default function FormForgotPassword() {
   return (
-    <div className="flex items-center justify-center">
+    <div className="flex flex-col items-center justify-center">
-      <div className="w-full max-w-md p-6">
+      <HeaderModal>
-        <div className="absolute top-[80px] left-[50px]">
+        <p>Selamat Datang, silakan masukkan akun Anda untuk melanjutkan!</p>
-          <Link
+      </HeaderModal>
-            to="/#"
-            className="mt-2 h-full py-2"
-          >
-            <LeftArrow
-              width={'70px'}
-              height={'70px'}
-            ></LeftArrow>
-          </Link>
-        </div>
-
-        <div className="mb-6 flex justify-center">
-          <Link to="/news">
-            <img
-              src={APP.logo}
-              alt={APP.title}
-              className="h-[100px]"
-            />
-          </Link>
-        </div>
-
-        <div className="mb-4 p-4 text-center">
-          <p className="text-[#565658]">
-            Selamat Datang, silakan isi keterangan akun Anda untuk melanjutkan!
-          </p>
-        </div>
 
+      <div className="w-full max-w-md">
         <form>
           {/* Input Email / No Telepon */}
           <div className="mb-4">
@@ -53,9 +27,9 @@ export default function FormForgotPassword() {
           </div>
 
           {/* Tombol Masuk */}
-          <button className="mt-5 w-full rounded-md bg-[#2E2F7C] py-2 text-white transition hover:bg-blue-800">
+          <Button className="mt-5 w-full rounded-md bg-[#2E2F7C] py-2 text-white transition hover:bg-blue-800">
-            Daftar
+            Reset Password
-          </button>
+          </Button>
         </form>
       </div>
     </div>

app/components/ui/form-login.tsx

@@ -1,44 +1,21 @@
 // import { EyeIcon, EyeOffIcon } from 'lucide-react'
+import { Button } from '@headlessui/react'
 import { useState } from 'react'
 import { Link } from 'react-router'
 
-import { LeftArrow } from '~/components/icons/left-arrow'
+import { EyeIcon } from '~/components/icons/eye'
-import { APP } from '~/data/meta'
+import HeaderModal from '~/components/popup/header-modal'
 
 const FormLogin = () => {
   const [showPassword, setShowPassword] = useState(false)
 
   return (
-    <div className="flex min-h-screen items-center justify-center">
+    <div className="relative flex flex-col items-center justify-center">
-      <div className="w-full max-w-md p-6">
+      <HeaderModal>
-        <div className="absolute top-[80px] left-[50px]">
+        <p>Selamat Datang, silakan masukkan akun Anda untuk melanjutkan!</p>
-          <Link
+      </HeaderModal>
-            to="/#"
-            className="mt-2 h-full py-2"
-          >
-            <LeftArrow
-              width={'70px'}
-              height={'70px'}
-            ></LeftArrow>
-          </Link>
-        </div>
-
-        <div className="mb-6 flex justify-center">
-          <Link to="/news">
-            <img
-              src={APP.logo}
-              alt={APP.title}
-              className="h-[80px]"
-            />
-          </Link>
-        </div>
-
-        <div className="mb-4 p-4 text-center">
-          <p className="text-[#565658]">
-            Selamat Datang, silakan daftarkan akun Anda untuk melanjutkan!
-          </p>
-        </div>
 
+      <div className="w-full max-w-md">
         <form>
           {/* Input Email / No Telepon */}
           <div className="mb-4">
@@ -73,7 +50,17 @@ const FormLogin = () => {
               className="absolute top-9 right-3 text-gray-500"
               onClick={() => setShowPassword(!showPassword)}
             >
-              {/* {showPassword ? <EyeOffIcon size={18} /> : <EyeIcon size={18} />} */}
+              {showPassword ? (
+                <EyeIcon
+                  width={15}
+                  height={15}
+                />
+              ) : (
+                <EyeIcon
+                  width={15}
+                  height={15}
+                />
+              )}
             </button>
           </div>
 
@@ -89,9 +76,9 @@ const FormLogin = () => {
           </div>
 
           {/* Tombol Masuk */}
-          <button className="w-full rounded-md bg-[#2E2F7C] py-2 text-white transition hover:bg-blue-800">
+          <Button className="w-full rounded-md bg-[#2E2F7C] py-2 text-white transition hover:bg-blue-800">
             Masuk
-          </button>
+          </Button>
         </form>
 
         {/* Link Daftar */}

app/components/ui/form-register .tsx

@@ -1,43 +1,17 @@
-// import { EyeIcon, EyeOffIcon } from 'lucide-react'
 import { useState } from 'react'
-import { Link } from 'react-router'
 
-import { LeftArrow } from '~/components/icons/left-arrow'
+import HeaderModal from '~/components/popup/header-modal'
-import { APP } from '~/data/meta'
+import { Button } from '~/components/ui/button'
 
 export default function FormRegister() {
   const [showPassword, setShowPassword] = useState(false)
   return (
-    <div className="flex items-center justify-center">
+    <div className="flex flex-col items-center justify-center">
-      <div className="w-full max-w-md p-6">
+      <HeaderModal>
-        <div className="absolute top-[80px] left-[50px]">
+        <p>Selamat Datang, silakan masukkan data Anda untuk melanjutkan!</p>
-          <Link
+      </HeaderModal>
-            to="/#"
-            className="mt-2 h-full py-2"
-          >
-            <LeftArrow
-              width={'70px'}
-              height={'70px'}
-            ></LeftArrow>
-          </Link>
-        </div>
-
-        <div className="mb-6 flex justify-center">
-          <Link to="/news">
-            <img
-              src={APP.logo}
-              alt={APP.title}
-              className="h-[800px]"
-            />
-          </Link>
-        </div>
-
-        <div className="mb-4 p-4 text-center">
-          <p className="text-[#565658]">
-            Selamat Datang, silakan isi keterangan akun Anda untuk melanjutkan!
-          </p>
-        </div>
 
+      <div className="w-full max-w-md">
         <form>
           {/* Input Email / No Telepon */}
           <div className="mb-4">
@@ -131,9 +105,9 @@ export default function FormRegister() {
           </div>
 
           {/* Tombol Masuk */}
-          <button className="mt-5 w-full rounded-md bg-[#2E2F7C] py-2 text-white transition hover:bg-blue-800">
+          <Button className="mt-5 w-full rounded-md bg-[#2E2F7C] py-2 text-white transition hover:bg-blue-800">
             Daftar
-          </button>
+          </Button>
         </form>
       </div>
     </div>

app/components/ui/form-subscription.tsx

@@ -1,41 +1,17 @@
-import React from 'react'
+import { Button } from '@headlessui/react'
-import { Link } from 'react-router'
 
-import { LeftArrow } from '~/components/icons/left-arrow'
+import HeaderModal from '~/components/popup/header-modal'
-import { APP } from '~/data/meta'
 
 export default function FormSubscription() {
   return (
-    <div className="flex items-center justify-center">
+    <div className="flex flex-col items-center justify-center">
-      <div className="w-full max-w-md p-6">
+      <HeaderModal>
-        <div className="absolute top-[80px] left-[50px]">
+        <p>
-          <Link
+          Selamat Datang, silakan Pilih Subscription Anda untuk melanjutkan!
-            to="/#"
+        </p>
-            className="mt-2 h-full py-2"
+      </HeaderModal>
-          >
-            <LeftArrow
-              width={'70px'}
-              height={'70px'}
-            ></LeftArrow>
-          </Link>
-        </div>
-
-        <div className="mb-6 flex justify-center">
-          <Link to="/news">
-            <img
-              src={APP.logo}
-              alt={APP.title}
-              className="h-[80px]"
-            />
-          </Link>
-        </div>
-
-        <div className="mb-4 p-4 text-center">
-          <p className="text-[#565658]">
-            Selamat Datang, silakan Pilih Subscription Anda untuk melanjutkan!
-          </p>
-        </div>
 
+      <div className="w-full max-w-md">
         <form>
           {/* Subscribe*/}
           <div className="mb-4">
@@ -51,9 +27,9 @@ export default function FormSubscription() {
           </div>
 
           {/* Tombol Masuk */}
-          <button className="mt-5 w-full rounded-md bg-[#2E2F7C] py-2 text-white transition hover:bg-blue-800">
+          <Button className="mt-5 w-full rounded-md bg-[#2E2F7C] py-2 text-white transition hover:bg-blue-800">
-            Daftar
+            Lanjutkan
-          </button>
+          </Button>
         </form>
       </div>
     </div>

app/layouts/header-menu-mobile.tsx

@@ -1,6 +1,8 @@
 import { useState } from 'react'
 import { Link } from 'react-router'
 
+import { CloseIcon } from '~/components/icons/close'
+import { MenuIcon } from '~/components/icons/menu'
 import { HeaderSearch } from '~/layouts/header-search'
 
 import { MENU } from './menu'
@@ -13,31 +15,27 @@ export default function HeaderMenuMobile() {
   }
   return (
     <>
-      <div className="relative z-40 flex min-h-[65px] bg-[#2E2F7C] font-[sans-serif] tracking-wide text-white sm:hidden sm:px-10">
+      <div className="relative z-20 flex min-h-[65px] bg-[#2E2F7C] font-[sans-serif] tracking-wide text-white sm:hidden sm:px-10">
         <div className="mx-auto flex w-full max-w-screen-xl flex-wrap items-center gap-4 align-middle">
           {/* Menu */}
           <div
-            className={`z-40 transition-transform duration-300 max-lg:fixed max-lg:top-0 max-lg:left-0 max-lg:h-full max-lg:w-full max-lg:overflow-auto max-lg:bg-[#2E2F7C] max-lg:p-6 max-lg:shadow-md ${
+            className={`z-20 transition-transform duration-300 max-lg:fixed max-lg:top-0 max-lg:left-0 max-lg:h-full max-lg:w-full max-lg:overflow-auto max-lg:bg-[#2E2F7C] max-lg:p-6 max-lg:shadow-md ${
               isMenuOpen ? 'translate-x-0' : '-translate-x-full'
             }`}
           >
             {/* Tombol Close */}
             <button
               onClick={handleToggleMenu}
-              className="fixed top-2 right-4 z-[100] flex h-9 w-9 items-center justify-center lg:hidden"
+              className="fixed top-5 right-5 z-20 flex h-9 w-9 items-center justify-center lg:hidden"
             >
-              <svg
+              <CloseIcon
-                xmlns="http://www.w3.org/2000/svg"
+                width={50}
-                className="h-3.5 w-3.5 fill-white"
+                height={50}
-                viewBox="0 0 320.591 320.591"
+              />
-              >
-                <path d="M30.391 318.583a30.37 30.37 0 0 1-21.56-7.288c-11.774-11.844-11.774-30.973 0-42.817L266.643 10.665c12.246-11.459 31.462-10.822 42.921 1.424 10.362 11.074 10.966 28.095 1.414 39.875L51.647 311.295a30.366 30.366 0 0 1-21.256 7.288z" />
-                <path d="M287.9 318.583a30.37 30.37 0 0 1-21.257-8.806L8.83 51.963C-2.078 39.225-.595 20.055 12.143 9.146c11.369-9.736 28.136-9.736 39.504 0l259.331 257.813c12.243 11.462 12.876 30.679 1.414 42.922-.456.487-.927.958-1.414 1.414a30.368 30.368 0 0 1-23.078 7.288z" />
-              </svg>
             </button>
 
             {/* List Menu */}
-            <ul className="mx-10 max-lg:space-y-3 lg:ml-14 lg:flex lg:gap-x-5">
+            <ul className="mx-10 mt-10 max-lg:space-y-3 lg:ml-14 lg:flex lg:gap-x-5">
               {MENU.map((item, index) => (
                 <li
                   key={index}
@@ -67,18 +65,10 @@ export default function HeaderMenuMobile() {
               onClick={handleToggleMenu}
               className="h-[63px] border border-white px-4 lg:hidden"
             >
-              <svg
+              <MenuIcon
-                className="h-7 w-7"
+                width={25}
-                fill="#fff"
+                height={25}
-                viewBox="0 0 20 20"
+              />
-                xmlns="http://www.w3.org/2000/svg"
-              >
-                <path
-                  fillRule="evenodd"
-                  d="M3 5a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 10a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 15a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1z"
-                  clipRule="evenodd"
-                />
-              </svg>
             </button>
             <div className="w-full py-3">
               <HeaderSearch />

app/pages/news-detail/index.tsx

@@ -41,12 +41,15 @@ export const NewsDetailPage = () => {
               className="object-center"
             />
           </div>
-          <article className="pross prose-stone">{content}</article>
 
+          <article
+            className="prose prose-stone"
+            dangerouslySetInnerHTML={{ __html: content }}
+          />
           <div className="flex items-end justify-between border-b-3 border-b-gray-300 py-4">
             <div className="flex flex-col">
               <p className="mb-2">Share this post</p>
-              <IconsSocial />
+              <IconsSocial className="a" />
             </div>
             <div className="flex flex-wrap items-end">
               {tags?.map((tag) => (

app/root.tsx

@@ -43,10 +43,6 @@ export function Layout({ children }: { children: React.ReactNode }) {
   return (
     <html lang="en">
       <head>
-        <link
-          rel="stylesheet"
-          href="https://unpkg.com/@tailwindcss/typography@0.4.x/dist/typography.min.css"
-        />
         <meta charSet="utf-8" />
         <meta
           name="viewport"

package.json

@@ -14,10 +14,12 @@
     "validate": "pnpm lint && pnpm typecheck && pnpm knip"
   },
   "dependencies": {
+    "@headlessui/react": "^2.2.0",
     "@react-router/fs-routes": "^7.1.3",
     "@react-router/node": "^7.1.3",
     "@react-router/serve": "^7.1.3",
     "class-variance-authority": "^0.7.1",
+    "html-react-parser": "^5.2.2",
     "isbot": "^5.1.17",
     "react": "^19.0.0",
     "react-dom": "^19.0.0",

pnpm-lock.yaml

@@ -8,6 +8,9 @@ importers:
 
   .:
     dependencies:
+      '@headlessui/react':
+        specifier: ^2.2.0
+        version: 2.2.0(react-dom@19.0.0(react@19.0.0))(react@19.0.0)
       '@react-router/fs-routes':
         specifier: ^7.1.3
         version: 7.1.3(@react-router/dev@7.1.3(@react-router/serve@7.1.3(react-router@7.1.3(react-dom@19.0.0(react@19.0.0))(react@19.0.0))(typescript@5.7.3))(@types/node@20.17.16)(babel-plugin-macros@3.1.0)(lightningcss@1.29.1)(react-router@7.1.3(react-dom@19.0.0(react@19.0.0))(react@19.0.0))(typescript@5.7.3)(vite@5.4.14(@types/node@20.17.16)(lightningcss@1.29.1)))(typescript@5.7.3)
@@ -20,6 +23,9 @@ importers:
       class-variance-authority:
         specifier: ^0.7.1
         version: 0.7.1
+      html-react-parser:
+        specifier: ^5.2.2
+        version: 5.2.2(@types/react@19.0.8)(react@19.0.0)
       isbot:
         specifier: ^5.1.17
         version: 5.1.22
@@ -545,9 +551,22 @@ packages:
       react: '>=16.8.0'
       react-dom: '>=16.8.0'
 
+  '@floating-ui/react@0.26.28':
+    resolution: {integrity: sha512-yORQuuAtVpiRjpMhdc0wJj06b9JFjrYF4qp96j++v2NBpbi6SEGF7donUJ3TMieerQ6qVkAv1tgr7L4r5roTqw==}
+    peerDependencies:
+      react: '>=16.8.0'
+      react-dom: '>=16.8.0'
+
   '@floating-ui/utils@0.2.9':
     resolution: {integrity: sha512-MDWhGtE+eHw5JW7lq4qhc5yRLS11ERl1c7Z6Xd0a58DozHES6EnNNwUWbMiG4J9Cgj053Bhk8zvlhFYKVhULwg==}
 
+  '@headlessui/react@2.2.0':
+    resolution: {integrity: sha512-RzCEg+LXsuI7mHiSomsu/gBJSjpupm6A1qIZ5sWjd7JhARNlMiSA4kKfJpCKwU9tE+zMRterhhrP74PvfJrpXQ==}
+    engines: {node: '>=10'}
+    peerDependencies:
+      react: ^18 || ^19 || ^19.0.0-rc
+      react-dom: ^18 || ^19 || ^19.0.0-rc
+
   '@humanwhocodes/config-array@0.13.0':
     resolution: {integrity: sha512-DZLEEqFWQFiyK6h5YIeynKx7JlvCYWL0cImfSRXZ9l4Sg2efkFGTuFf6vzXjK1cq6IYkU+Eg/JizXw+TD2vRNw==}
     engines: {node: '>=10.10.0'}
@@ -1016,6 +1035,30 @@ packages:
   '@radix-ui/rect@1.0.1':
     resolution: {integrity: sha512-fyrgCaedtvMg9NK3en0pnOYJdtfwxUcNolezkNPUsoX57X8oQk+NkqcvzHXD2uKNij6GXmWU9NDru2IWjrO4BQ==}
 
+  '@react-aria/focus@3.19.1':
+    resolution: {integrity: sha512-bix9Bu1Ue7RPcYmjwcjhB14BMu2qzfJ3tMQLqDc9pweJA66nOw8DThy3IfVr8Z7j2PHktOLf9kcbiZpydKHqzg==}
+    peerDependencies:
+      react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1
+      react-dom: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1
+
+  '@react-aria/interactions@3.23.0':
+    resolution: {integrity: sha512-0qR1atBIWrb7FzQ+Tmr3s8uH5mQdyRH78n0krYaG8tng9+u1JlSi8DGRSaC9ezKyNB84m7vHT207xnHXGeJ3Fg==}
+    peerDependencies:
+      react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1
+      react-dom: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1
+
+  '@react-aria/ssr@3.9.7':
+    resolution: {integrity: sha512-GQygZaGlmYjmYM+tiNBA5C6acmiDWF52Nqd40bBp0Znk4M4hP+LTmI0lpI1BuKMw45T8RIhrAsICIfKwZvi2Gg==}
+    engines: {node: '>= 12'}
+    peerDependencies:
+      react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1
+
+  '@react-aria/utils@3.27.0':
+    resolution: {integrity: sha512-p681OtApnKOdbeN8ITfnnYqfdHS0z7GE+4l8EXlfLnr70Rp/9xicBO6d2rU+V/B3JujDw2gPWxYKEnEeh0CGCw==}
+    peerDependencies:
+      react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1
+      react-dom: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1
+
   '@react-router/dev@7.1.3':
     resolution: {integrity: sha512-BPdIk4m8shjfynnkFeR30eH6aawpFHZiWqccWXNFgmFjKBcTQe/j7QTKi6gchceXDau0j2fSLciQ07rYrIGdhw==}
     engines: {node: '>=20.0.0'}
@@ -1072,6 +1115,16 @@ packages:
     peerDependencies:
       react-router: 7.1.3
 
+  '@react-stately/utils@3.10.5':
+    resolution: {integrity: sha512-iMQSGcpaecghDIh3mZEpZfoFH3ExBwTtuBEcvZ2XnGzCgQjeYXcMdIUwAfVQLXFTdHUHGF6Gu6/dFrYsCzySBQ==}
+    peerDependencies:
+      react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1
+
+  '@react-types/shared@3.27.0':
+    resolution: {integrity: sha512-gvznmLhi6JPEf0bsq7SwRYTHAKKq/wcmKqFez9sRdbED+SPMUmK5omfZ6w3EwUFQHbYUa4zPBYedQ7Knv70RMw==}
+    peerDependencies:
+      react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1
+
   '@rollup/rollup-android-arm-eabi@4.32.1':
     resolution: {integrity: sha512-/pqA4DmqyCm8u5YIDzIdlLcEmuvxb0v8fZdFhVMszSpDTgbQKdw3/mB3eMUHIbubtJ6F9j+LtmyCnHTEqIHyzA==}
     cpu: [arm]
@@ -1175,6 +1228,9 @@ packages:
     engines: {node: '>=8.10'}
     hasBin: true
 
+  '@swc/helpers@0.5.15':
+    resolution: {integrity: sha512-JQ5TuMi45Owi4/BIMAJBoSQoOJu12oOk/gADqlcUL9JEdHB8vyjUSsxqeNXnmXHjYKMi2WcYtezGEEhqUI/E2g==}
+
   '@tailwindcss/node@4.0.1':
     resolution: {integrity: sha512-lc+ly6PKHqgCVl7eO8D2JlV96Lks5bmL6pdtM6UasyUHLU2zmrOqU6jfgln120IVnCh3VC8GG/ca24xVTtSokw==}
 
@@ -1258,6 +1314,15 @@ packages:
     peerDependencies:
       vite: ^5.2.0 || ^6
 
+  '@tanstack/react-virtual@3.13.0':
+    resolution: {integrity: sha512-CchF0NlLIowiM2GxtsoKBkXA4uqSnY2KvnXo+kyUFD4a4ll6+J0qzoRsUPMwXV/H26lRsxgJIr/YmjYum2oEjg==}
+    peerDependencies:
+      react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0
+      react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0
+
+  '@tanstack/virtual-core@3.13.0':
+    resolution: {integrity: sha512-NBKJP3OIdmZY3COJdWkSonr50FMVIi+aj5ZJ7hI/DTpEKg2RMfo/KvP8A3B/zOSpMgIe52B5E2yn7rryULzA6g==}
+
   '@types/conventional-commits-parser@5.0.1':
     resolution: {integrity: sha512-7uz5EHdzz2TqoMfV7ee61Egf5y6NkcO4FB/1iCCQnbeiI1F3xzv3vK5dBCXUCLQgGYS+mUeigK1iKQzvED+QnQ==}
 
@@ -1861,6 +1926,19 @@ packages:
   dom-helpers@3.4.0:
     resolution: {integrity: sha512-LnuPJ+dwqKDIyotW1VzmOZ5TONUN7CwkCR5hrgawTUbkBGYdeoNLZo6nNfGkCrjtE1nXXaj7iMMpDa8/d9WoIA==}
 
+  dom-serializer@2.0.0:
+    resolution: {integrity: sha512-wIkAryiqt/nV5EQKqQpo3SToSOV9J0DnbJqwK7Wv/Trc92zIAYZ4FlMu+JPFW1DfGFt81ZTCGgDEabffXeLyJg==}
+
+  domelementtype@2.3.0:
+    resolution: {integrity: sha512-OLETBj6w0OsagBwdXnPdN0cnMfF9opN69co+7ZrbfPGrdpPVNBUj02spi6B1N7wChLQiPn4CSH/zJvXw56gmHw==}
+
+  domhandler@5.0.3:
+    resolution: {integrity: sha512-cgwlv/1iFQiFnU96XXgROh8xTeetsnJiDsTc7TYCLFd9+/WNkIqPTxiM/8pSd8VIrhXGTf1Ny1q1hquVqDJB5w==}
+    engines: {node: '>= 4'}
+
+  domutils@3.2.2:
+    resolution: {integrity: sha512-6kZKyUajlDuqlHKVX1w7gyslj9MPIXzIFiz/rGu35uC1wMi+kMhQwGhl4lt9unC9Vb9INnY9Z3/ZA3+FhASLaw==}
+
   dot-prop@5.3.0:
     resolution: {integrity: sha512-QM8q3zDe58hqUqjraQOmzZ1LIH9SWQJTlEKCH4kJ2oQvLZk7RbQXvtDM2XEq3fwkV9CCvvH4LA0AV+ogFsBM2Q==}
     engines: {node: '>=8'}
@@ -1913,6 +1991,14 @@ packages:
     resolution: {integrity: sha512-0/r0MySGYG8YqlayBZ6MuCfECmHFdJ5qyPh8s8wa5Hnm6SaFLSK1VYCbj+NKp090Nm1caZhD+QTnmxO7esYGyQ==}
     engines: {node: '>=10.13.0'}
 
+  entities@4.5.0:
+    resolution: {integrity: sha512-V0hjH4dGPh9Ao5p0MoRY6BVqtwCjhz6vI5LT8AJ55H+4g9/4vbHx1I54fS0XuclLhDHArPQCiMjDxjaL8fPxhw==}
+    engines: {node: '>=0.12'}
+
+  entities@6.0.0:
+    resolution: {integrity: sha512-aKstq2TDOndCn4diEyp9Uq/Flu2i1GlLkc6XIDQSDMuaFE3OPW5OphLCyQ5SpSJZTb4reN+kTcYru5yIfXoRPw==}
+    engines: {node: '>=0.12'}
+
   env-paths@2.2.1:
     resolution: {integrity: sha512-+h1lkLKhZMTYjog1VEpJNG7NZJWcuc2DDk/qsqSTRRCOXiLjeQ1d1/udrUGhqMxUgAlwKNZ0cf2uqan5GLuS2A==}
     engines: {node: '>=6'}
@@ -2335,10 +2421,25 @@ packages:
     resolution: {integrity: sha512-HVJyzUrLIL1c0QmviVh5E8VGyUS7xCFPS6yydaVd1UegW+ibV/CohqTH9MkOLDp5o+rb82DMo77PTuc9F/8GKw==}
     engines: {node: ^14.17.0 || ^16.13.0 || >=18.0.0}
 
+  html-dom-parser@5.0.13:
+    resolution: {integrity: sha512-B7JonBuAfG32I7fDouUQEogBrz3jK9gAuN1r1AaXpED6dIhtg/JwiSRhjGL7aOJwRz3HU4efowCjQBaoXiREqg==}
+
+  html-react-parser@5.2.2:
+    resolution: {integrity: sha512-yA5012CJGSFWYZsgYzfr6HXJgDap38/AEP4ra8Cw+WHIi2ZRDXRX/QVYdumRf1P8zKyScKd6YOrWYvVEiPfGKg==}
+    peerDependencies:
+      '@types/react': 0.14 || 15 || 16 || 17 || 18 || 19
+      react: 0.14 || 15 || 16 || 17 || 18 || 19
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+
   html@1.0.0:
     resolution: {integrity: sha512-lw/7YsdKiP3kk5PnR1INY17iJuzdAtJewxr14ozKJWbbR97znovZ0mh+WEMZ8rjc3lgTK+ID/htTjuyGKB52Kw==}
     hasBin: true
 
+  htmlparser2@10.0.0:
+    resolution: {integrity: sha512-TwAZM+zE5Tq3lrEHvOlvwgj1XLWQCtaaibSN11Q+gGBAS7Y1uZSWwXXRe4iF6OXnaq1riyQAPFOBtYc77Mxq0g==}
+
   http-errors@2.0.0:
     resolution: {integrity: sha512-FtwrG/euBzaEjYeRqOgly7G0qviiXoJWnvEH2Z1plBdXgbyjv34pHTSb9zoeHMyDy33+DWy5Wt9Wo+TURtOYSQ==}
     engines: {node: '>= 0.8'}
@@ -2389,6 +2490,9 @@ packages:
     resolution: {integrity: sha512-QQnnxNyfvmHFIsj7gkPcYymR8Jdw/o7mp5ZFihxn6h8Ci6fh3Dx4E1gPjpQEpIuPo9XVNY/ZUwh4BPMjGyL01g==}
     engines: {node: ^14.17.0 || ^16.13.0 || >=18.0.0}
 
+  inline-style-parser@0.2.4:
+    resolution: {integrity: sha512-0aO8FkhNZlj/ZIbNi7Lxxr12obT7cL1moPfE4tg1LkX7LlLfC6DeX4l2ZEud1ukP9jNQyNnfzQVqwbwmAATY4Q==}
+
   internal-slot@1.1.0:
     resolution: {integrity: sha512-4gd7VpWNQNB4UKKCFFVcp1AVv+FMOgs9NKzjHKusc8jTMhd5eL1NqQqOpE0KzMds804/yHlglp3uxgluOqAPLw==}
     engines: {node: '>= 0.4'}
@@ -3281,6 +3385,9 @@ packages:
   react-lifecycles-compat@3.0.4:
     resolution: {integrity: sha512-fBASbA6LnOU9dOU2eW7aQ8xmYBSXUIWr+UmF9b1efZBazGNO+rcXT/icdKnYm2pTwcRylVUYwW7H1PHfLekVzA==}
 
+  react-property@2.0.2:
+    resolution: {integrity: sha512-+PbtI3VuDV0l6CleQMsx2gtK0JZbZKbpdu5ynr+lbsuvtmgbNcS3VM0tuY2QjFNOcWxvXeHjDpy42RO+4U2rug==}
+
   react-refresh@0.14.2:
     resolution: {integrity: sha512-jCvmsr+1IUSMUyzOkRcvnVbX3ZYC6g9TDrDbFuFmRDq7PD4yaGbLKNQL6k2jnArV8hjYxh7hVhAZB6s9HDGpZA==}
     engines: {node: '>=0.10.0'}
@@ -3639,6 +3746,12 @@ packages:
     resolution: {integrity: sha512-0fk9zBqO67Nq5M/m45qHCJxylV/DhBlIOVExqgOMiCCrzrhU6tCibRXNqE3jwJLftzE9SNuZtYbpzcO+i9FiKw==}
     engines: {node: '>=14.16'}
 
+  style-to-js@1.1.16:
+    resolution: {integrity: sha512-/Q6ld50hKYPH3d/r6nr117TZkHR0w0kGGIVfpG9N6D8NymRPM9RqCUv4pRpJ62E5DqOYx2AFpbZMyCPnjQCnOw==}
+
+  style-to-object@1.0.8:
+    resolution: {integrity: sha512-xT47I/Eo0rwJmaXC4oilDGDWLohVhR6o/xAQcPQN8q6QBuZVL8qMYL85kLmST5cPjAorwvqIA4qXTRQoYHaL6g==}
+
   stylis@4.2.0:
     resolution: {integrity: sha512-Orov6g6BB1sDfYgzWfTHDOxamtX1bE/zo104Dh9e6fqJ3PooipYyfJ0pUmrZO2wAvO8YbEyeFrkV91XTsGMSrw==}
 
@@ -3653,6 +3766,9 @@ packages:
     resolution: {integrity: sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w==}
     engines: {node: '>= 0.4'}
 
+  tabbable@6.2.0:
+    resolution: {integrity: sha512-Cat63mxsVJlzYvN51JmVXIgNoUokrIaT2zLclCXjRd8boZ0004U4KCs/sToJ75C6sdlByWxpYnb5Boif1VSFew==}
+
   tailwind-merge@3.0.1:
     resolution: {integrity: sha512-AvzE8FmSoXC7nC+oU5GlQJbip2UO7tmOhOfQyOmPhrStOGXHU08j8mZEHZ4BmCqY5dWTCo4ClWkNyRNx1wpT0g==}
 
@@ -4469,8 +4585,25 @@ snapshots:
       react: 19.0.0
       react-dom: 19.0.0(react@19.0.0)
 
+  '@floating-ui/react@0.26.28(react-dom@19.0.0(react@19.0.0))(react@19.0.0)':
+    dependencies:
+      '@floating-ui/react-dom': 2.1.2(react-dom@19.0.0(react@19.0.0))(react@19.0.0)
+      '@floating-ui/utils': 0.2.9
+      react: 19.0.0
+      react-dom: 19.0.0(react@19.0.0)
+      tabbable: 6.2.0
+
   '@floating-ui/utils@0.2.9': {}
 
+  '@headlessui/react@2.2.0(react-dom@19.0.0(react@19.0.0))(react@19.0.0)':
+    dependencies:
+      '@floating-ui/react': 0.26.28(react-dom@19.0.0(react@19.0.0))(react@19.0.0)
+      '@react-aria/focus': 3.19.1(react-dom@19.0.0(react@19.0.0))(react@19.0.0)
+      '@react-aria/interactions': 3.23.0(react-dom@19.0.0(react@19.0.0))(react@19.0.0)
+      '@tanstack/react-virtual': 3.13.0(react-dom@19.0.0(react@19.0.0))(react@19.0.0)
+      react: 19.0.0
+      react-dom: 19.0.0(react@19.0.0)
+
   '@humanwhocodes/config-array@0.13.0':
     dependencies:
       '@humanwhocodes/object-schema': 2.0.3
@@ -4925,6 +5058,40 @@ snapshots:
     dependencies:
       '@babel/runtime': 7.26.7
 
+  '@react-aria/focus@3.19.1(react-dom@19.0.0(react@19.0.0))(react@19.0.0)':
+    dependencies:
+      '@react-aria/interactions': 3.23.0(react-dom@19.0.0(react@19.0.0))(react@19.0.0)
+      '@react-aria/utils': 3.27.0(react-dom@19.0.0(react@19.0.0))(react@19.0.0)
+      '@react-types/shared': 3.27.0(react@19.0.0)
+      '@swc/helpers': 0.5.15
+      clsx: 2.1.1
+      react: 19.0.0
+      react-dom: 19.0.0(react@19.0.0)
+
+  '@react-aria/interactions@3.23.0(react-dom@19.0.0(react@19.0.0))(react@19.0.0)':
+    dependencies:
+      '@react-aria/ssr': 3.9.7(react@19.0.0)
+      '@react-aria/utils': 3.27.0(react-dom@19.0.0(react@19.0.0))(react@19.0.0)
+      '@react-types/shared': 3.27.0(react@19.0.0)
+      '@swc/helpers': 0.5.15
+      react: 19.0.0
+      react-dom: 19.0.0(react@19.0.0)
+
+  '@react-aria/ssr@3.9.7(react@19.0.0)':
+    dependencies:
+      '@swc/helpers': 0.5.15
+      react: 19.0.0
+
+  '@react-aria/utils@3.27.0(react-dom@19.0.0(react@19.0.0))(react@19.0.0)':
+    dependencies:
+      '@react-aria/ssr': 3.9.7(react@19.0.0)
+      '@react-stately/utils': 3.10.5(react@19.0.0)
+      '@react-types/shared': 3.27.0(react@19.0.0)
+      '@swc/helpers': 0.5.15
+      clsx: 2.1.1
+      react: 19.0.0
+      react-dom: 19.0.0(react@19.0.0)
+
   '@react-router/dev@7.1.3(@react-router/serve@7.1.3(react-router@7.1.3(react-dom@19.0.0(react@19.0.0))(react@19.0.0))(typescript@5.7.3))(@types/node@20.17.16)(babel-plugin-macros@3.1.0)(lightningcss@1.29.1)(react-router@7.1.3(react-dom@19.0.0(react@19.0.0))(react@19.0.0))(typescript@5.7.3)(vite@5.4.14(@types/node@20.17.16)(lightningcss@1.29.1))':
     dependencies:
       '@babel/core': 7.26.7
@@ -5013,6 +5180,15 @@ snapshots:
       - supports-color
       - typescript
 
+  '@react-stately/utils@3.10.5(react@19.0.0)':
+    dependencies:
+      '@swc/helpers': 0.5.15
+      react: 19.0.0
+
+  '@react-types/shared@3.27.0(react@19.0.0)':
+    dependencies:
+      react: 19.0.0
+
   '@rollup/rollup-android-arm-eabi@4.32.1':
     optional: true
 
@@ -5078,6 +5254,10 @@ snapshots:
       ignore: 5.3.2
       p-map: 4.0.0
 
+  '@swc/helpers@0.5.15':
+    dependencies:
+      tslib: 2.8.1
+
   '@tailwindcss/node@4.0.1':
     dependencies:
       enhanced-resolve: 5.18.0
@@ -5147,6 +5327,14 @@ snapshots:
       tailwindcss: 4.0.1
       vite: 5.4.14(@types/node@20.17.16)(lightningcss@1.29.1)
 
+  '@tanstack/react-virtual@3.13.0(react-dom@19.0.0(react@19.0.0))(react@19.0.0)':
+    dependencies:
+      '@tanstack/virtual-core': 3.13.0
+      react: 19.0.0
+      react-dom: 19.0.0(react@19.0.0)
+
+  '@tanstack/virtual-core@3.13.0': {}
+
   '@types/conventional-commits-parser@5.0.1':
     dependencies:
       '@types/node': 20.17.16
@@ -5773,6 +5961,24 @@ snapshots:
     dependencies:
       '@babel/runtime': 7.26.7
 
+  dom-serializer@2.0.0:
+    dependencies:
+      domelementtype: 2.3.0
+      domhandler: 5.0.3
+      entities: 4.5.0
+
+  domelementtype@2.3.0: {}
+
+  domhandler@5.0.3:
+    dependencies:
+      domelementtype: 2.3.0
+
+  domutils@3.2.2:
+    dependencies:
+      dom-serializer: 2.0.0
+      domelementtype: 2.3.0
+      domhandler: 5.0.3
+
   dot-prop@5.3.0:
     dependencies:
       is-obj: 2.0.0
@@ -5828,6 +6034,10 @@ snapshots:
       graceful-fs: 4.2.11
       tapable: 2.2.1
 
+  entities@4.5.0: {}
+
+  entities@6.0.0: {}
+
   env-paths@2.2.1: {}
 
   environment@1.1.0: {}
@@ -6430,10 +6640,32 @@ snapshots:
     dependencies:
       lru-cache: 7.18.3
 
+  html-dom-parser@5.0.13:
+    dependencies:
+      domhandler: 5.0.3
+      htmlparser2: 10.0.0
+
+  html-react-parser@5.2.2(@types/react@19.0.8)(react@19.0.0):
+    dependencies:
+      domhandler: 5.0.3
+      html-dom-parser: 5.0.13
+      react: 19.0.0
+      react-property: 2.0.2
+      style-to-js: 1.1.16
+    optionalDependencies:
+      '@types/react': 19.0.8
+
   html@1.0.0:
     dependencies:
       concat-stream: 1.6.2
 
+  htmlparser2@10.0.0:
+    dependencies:
+      domelementtype: 2.3.0
+      domhandler: 5.0.3
+      domutils: 3.2.2
+      entities: 6.0.0
+
   http-errors@2.0.0:
     dependencies:
       depd: 2.0.0
@@ -6474,6 +6706,8 @@ snapshots:
 
   ini@4.1.1: {}
 
+  inline-style-parser@0.2.4: {}
+
   internal-slot@1.1.0:
     dependencies:
       es-errors: 1.3.0
@@ -7257,6 +7491,8 @@ snapshots:
 
   react-lifecycles-compat@3.0.4: {}
 
+  react-property@2.0.2: {}
+
   react-refresh@0.14.2: {}
 
   react-remove-scroll-bar@2.3.8(@types/react@19.0.8)(react@19.0.0):
@@ -7690,6 +7926,14 @@ snapshots:
 
   strip-json-comments@5.0.1: {}
 
+  style-to-js@1.1.16:
+    dependencies:
+      style-to-object: 1.0.8
+
+  style-to-object@1.0.8:
+    dependencies:
+      inline-style-parser: 0.2.4
+
   stylis@4.2.0: {}
 
   summary@2.1.0: {}
@@ -7700,6 +7944,8 @@ snapshots:
 
   supports-preserve-symlinks-flag@1.0.0: {}
 
+  tabbable@6.2.0: {}
+
   tailwind-merge@3.0.1: {}
 
   tailwindcss@4.0.1: {}