Login/Logout/Forgor flows

eslint.config.js

@@ -3,7 +3,7 @@ import eslintConfigPrettier from 'eslint-config-prettier'
 
 import eslintPluginAstro from 'eslint-plugin-astro'
 
-const neoConfig = neostandard({ ignores: resolveIgnoresFromGitignore(), noStyle: true, ts: true})
+const neoConfig = neostandard({ ignores: resolveIgnoresFromGitignore(), noStyle: true, ts: true })
 
 /** @type {import("eslint").Linter.Config} */
 export default [
@@ -15,6 +15,7 @@ export default [
       'no-undef': 'error'
     }
   },
+  { env: { browser: true } },
   ...eslintPluginAstro.configs.recommended,
-  eslintConfigPrettier,
+  eslintConfigPrettier
 ]

messages/en.json

@@ -28,5 +28,9 @@
   "managesubmissions": "Manage Submissions",
   "profilePic": "Profile picture",
   "emailSuccess": "An email with further instructions has been sent to the address linked to the account. Check your spam folder.",
-  "close": "Close"
+  "close": "Close",
-}
+  "newPassword": "New password",
+  "newPasswordRetype": "Re-type new password",
+  "savePassword": "Save Password",
+  "passwordResetSuccesful": "Password reset succesfully"
+}

package.json

@@ -13,7 +13,7 @@
     "@astrojs/node": "9.0.0",
     "@astrojs/react": "4.1.3",
     "@astrojs/rss": "4.0.11",
-    "@astrojs/tailwind": "5.1.4",
+    "@astrojs/tailwind": "^6.0.0",
     "@inlang/paraglide-astro": "^0.2.2",
     "@prisma/client": "^6.2.1",
     "@types/react": "^18.3.12",
@@ -31,7 +31,7 @@
     "react-hot-toast": "^2.4.1",
     "react-svg-spinners": "^0.3.1",
     "sharp": "^0.33.5",
-    "tailwindcss": "^3.4.12",
+    "tailwindcss": "^3.4.17",
     "typescript": "^5.6.2"
   },
   "devDependencies": {

src/components/Button.tsx

@@ -1,8 +1,10 @@
-import type { PropsWithChildren } from 'react'
+import type { PropsWithChildren, JSX } from 'react'
 import clsx from 'clsx'
 import { BarsRotateFade } from 'react-svg-spinners'
 
-export default function Button(props: PropsWithChildren<{ className?: string; loading?: boolean }>) {
+export default function Button(
+  props: PropsWithChildren<{ className?: string; loading?: boolean }> & JSX.IntrinsicElements['button']
+) {
   const { children, className, loading = false, ...restProps } = props
   return (
     <button

src/components/ForgorForm.tsx

@@ -0,0 +1,59 @@
+import { useState, type FormEvent } from 'react'
+import toast from 'react-hot-toast'
+
+import * as m from 'paraglide/messages.js'
+import Button from './Button'
+import Modal from './Modal'
+import { resetPassword } from 'utils/auth-client'
+
+export default function ForgorForm(props: { token: string }) {
+  const { token } = props
+  const [loading, setLoading] = useState(false)
+
+  async function handleSubmit(ev: FormEvent<HTMLFormElement>) {
+    ev.preventDefault()
+    const formData = new FormData(ev.currentTarget)
+    const password = formData.get('password')
+
+    if (!password) return
+
+    setLoading(true)
+    const { data, error } = await resetPassword({ newPassword: password as string, token })
+    setLoading(false)
+
+    if (error) {
+      console.error(error)
+      toast.error(error.message || 'Unknown Error')
+      return
+    }
+
+    toast.success(m.passwordResetSuccesful())
+    window.location.replace('/')
+  }
+
+  return (
+    <Modal>
+      <form onSubmit={handleSubmit}>
+        <div className='w-[500px]'>
+          <div className='flex flex-col'>
+            <label htmlFor='password' className='font-medium text-black'>
+              {m.newPassword()}:
+            </label>
+            <input type='password' name='password' className='bg-zinc-200 rounded p-2 mt-2 mb-3 text-black' required />
+          </div>
+          <div className='flex flex-col'>
+            <label htmlFor='password2' className='font-medium text-black'>
+              {m.newPasswordRetype()}:
+            </label>
+            <input type='password' name='password2' className='bg-zinc-200 rounded p-2 mt-2 mb-3 text-black' required />
+          </div>
+          <div className='mx-auto'>
+            <Button type='submit' loading={loading} disabled={loading}>
+              {m.savePassword()}
+            </Button>
+          </div>
+        </div>
+      </form>
+    </Modal>
+  )
+}

src/components/Header.astro

@@ -27,7 +27,7 @@ const { value: bannerPosition } = (await prismaClient.config.findUnique({ where:
         height={150}
       />
     </div>
-    <div class='relative px-20 size-full'>
+    <div class='relative px-20 size-full flex'>
       <a href='/'>
         <Image
           src={Astro.currentLocale === 'es' ? logoEs : logo}

src/components/Modal.tsx

@@ -1,12 +1,12 @@
 import { useEffect, type KeyboardEvent, type PropsWithChildren } from 'react'
 import type { SetState } from 'types'
 
-export default function Modal(props: PropsWithChildren<{ setOpen: SetState<boolean> }>) {
+export default function Modal(props: PropsWithChildren<{ setOpen?: SetState<boolean> }>) {
   const { children, setOpen } = props
 
   useEffect(() => {
-    const handleEsc = (ev: KeyboardEvent) => {
+    const handleEsc = (ev: any) => {
-      if (ev.code === 'Escape') setOpen(false)
+      if ((ev as KeyboardEvent).code === 'Escape' && setOpen) setOpen(false)
     }
 
     window.addEventListener('keydown', handleEsc)
@@ -17,11 +17,13 @@ export default function Modal(props: PropsWithChildren<{ setOpen: SetState<boole
 
   return (
     <div
-      className='fixed size-full flex bg-black bg-opacity-50 left-0 top-0 z-50 justify-center items-center'
+      className='fixed size-full flex bg-black bg-opacity-50 left-0 top-0 z-50 p-4 justify-center items-center'
-      onClick={() => setOpen(false)}
+      onClick={() => {
+        if (setOpen) setOpen(false)
+      }}
     >
       <div
-        className='bg-white rounded-lg overflow-hidden shadow-xl transform transition-all m-8'
+        className='bg-white max-w-lg p-4 rounded-lg overflow-hidden shadow-xl transform transition-all m-8'
         role='dialog'
         aria-modal='true'
         onClick={(ev) => ev.stopPropagation()}

src/components/header/Dropdown.astro

@@ -3,7 +3,7 @@ import NavButton from './NavButton.astro'
 ---
 
 <nav-dropdown>
-  <NavButton class='dropdown-btn group relative'>
+  <NavButton class='dropdown-btn group relative px-0'>
     <div class='after:content-["▼"] after:text-xs'><slot /></div>
     <div
       class='dropdown-items md:absolute flex-col bg-gray hidden md:group-hover:flex top-full left-0 py-1 min-w-36 rounded-md md:rounded-t-none mt-1.5 md:mt-0'

src/components/header/LoginButton.tsx

@@ -1,35 +1,17 @@
-import { useState, type FormEvent, type SyntheticEvent } from 'react'
+import { useEffect, useState, type FormEvent } from 'react'
-
-import Button from 'components/Button'
-import * as m from 'paraglide/messages.js'
-import Modal from 'components/Modal'
-import apolloClient from '@/graphql/apolloClient'
 import toast from 'react-hot-toast'
 
-const loginMutation = gql(`
+import * as m from 'paraglide/messages.js'
-  mutation Login($username: String!, $password: String!) {
+import Button from 'components/Button'
-    login(username: $username, password: $password)
+import Modal from 'components/Modal'
-  }
+import { forgetPassword, signIn } from 'utils/auth-client'
-`)
+import type { SetState } from 'types'
+
+type FormOptions = 'login' | 'forgor'
 
 export default function LoginBtn() {
+  const [currentForm, setForm] = useState<FormOptions>('login')
   const [modalOpen, setModalOpen] = useState(false)
-  const [loading, setLoading] = useState(false)
-
-  const handleSubmit = (ev: FormEvent) => {
-    ev.preventDefault()
-    const formData = new FormData(ev.target)
-    const variables = Object.fromEntries(formData)
-
-    mutate({ variables })
-      .then((res) => {
-        // toast.success(m.emailSuccess())
-        setModalOpen(false)
-      })
-      .catch((err) => {
-        toast.error(err.message)
-      })
-  }
 
   return (
     <>
@@ -38,32 +20,123 @@ export default function LoginBtn() {
       </Button>
       {modalOpen ? (
         <Modal setOpen={setModalOpen}>
-          <form onSubmit={handleSubmit}>
+          {currentForm === 'login' ? <LoginForm setForm={setForm} setModalOpen={setModalOpen} /> : null}
-            <div className='bg-white px-4 pt-5 pb-4 gap-x-4 flex flex-col'>
+          {currentForm === 'forgor' ? <CreateForgorForm setForm={setForm} setModalOpen={setModalOpen} /> : null}
-              <div className='flex gap-x-4'>
-                <div className='flex flex-col'>
-                  <label htmlFor='username' className='font-medium text-black'>
-                    {m.username()}:
-                  </label>
-                  <input type='text' name='username' className='bg-zinc-200 rounded p-2 mt-2 mb-3 text-black' />
-                </div>
-              </div>
-              <div className='flex flex-col'>
-                <label htmlFor='password' className='font-medium text-black'>
-                  {m.password()}:
-                </label>
-                <input type='password' name='password' className='bg-zinc-200 rounded p-2 mt-2 mb-3 text-black' />
-              </div>
-            </div>
-            <div className='bg-zinc-200 px-4 py-3 text-right gap-x-2 flex justify-end'>
-              <Button className='bg-zinc-500 hover:bg-zinc-600'>{m.close()}</Button>
-              <Button loading={loading} disabled={loading}>
-                {m.login()}
-              </Button>
-            </div>
-          </form>
         </Modal>
       ) : null}
     </>
   )
 }
+
+function LoginForm(props: { setForm: SetState<FormOptions>; setModalOpen: SetState<boolean> }) {
+  const { setForm, setModalOpen } = props
+  const [loading, setLoading] = useState(false)
+
+  async function handleSubmit(ev: FormEvent<HTMLFormElement>) {
+    ev.preventDefault()
+    const formData = new FormData(ev.currentTarget)
+    const variables = Object.fromEntries(formData)
+
+    setLoading(true)
+    const { error } = await signIn.username({
+      username: variables.username as string,
+      password: variables.password as string
+    })
+    setLoading(false)
+
+    if (error) {
+      console.error(error)
+      toast.error(error.message || 'Unknown Error')
+      return
+    }
+
+    setModalOpen(false)
+    location.reload()
+  }
+
+  return (
+    <>
+      <form method='post' onSubmit={handleSubmit}>
+        <div className='flex gap-x-4'>
+          <div className='flex flex-col'>
+            <label htmlFor='username' className='font-medium text-black'>
+              {m.username()}:
+            </label>
+            <input type='text' name='username' className='bg-zinc-200 rounded p-2 mt-2 mb-3 text-black' required />
+          </div>
+          <div className='flex flex-col'>
+            <label htmlFor='password' className='font-medium text-black'>
+              {m.password()}:
+            </label>
+            <input type='password' name='password' className='bg-zinc-200 rounded p-2 mt-2 mb-3 text-black' required />
+          </div>
+        </div>
+        <div className='mx-auto'>
+          <Button loading={loading} disabled={loading}>
+            {m.login()}
+          </Button>
+        </div>
+      </form>
+
+      <div className='mx-auto'>
+        <Button
+          onClick={() => {
+            setForm('forgor')
+          }}
+        >
+          {m.recoverPassword()}
+        </Button>
+      </div>
+    </>
+  )
+}
+
+function CreateForgorForm(props: { setForm: SetState<FormOptions>; setModalOpen: SetState<boolean> }) {
+  const { setForm, setModalOpen } = props
+  const [loading, setLoading] = useState(false)
+
+  useEffect(() => {
+    return () => {
+      setForm('login')
+    }
+  }, [])
+
+  async function handleSubmit(ev: FormEvent<HTMLFormElement>) {
+    ev.preventDefault()
+    const formData = new FormData(ev.currentTarget)
+    const email = formData.get('email')
+
+    if (!email) return
+
+    setLoading(true)
+    const { error } = await forgetPassword({ email: email as string, redirectTo: '/forgor' })
+    setLoading(false)
+
+    if (error) {
+      console.error(error)
+      toast.error(error.message || 'Unknown Error')
+      return
+    }
+
+    toast.success(m.emailSuccess())
+    setModalOpen(false)
+  }
+
+  return (
+    <form onSubmit={handleSubmit}>
+      <div className='w-[500px]'>
+        <div className='flex flex-col'>
+          <label htmlFor='email' className='font-medium text-black'>
+            {m.email()}:
+          </label>
+          <input type='email' name='email' className='bg-zinc-200 rounded p-2 mt-2 mb-3 text-black' required />
+        </div>
+        <div className='mx-auto'>
+          <Button loading={loading} disabled={loading}>
+            {m.recoverPassword()}
+          </Button>
+        </div>
+      </div>
+    </form>
+  )
+}

src/components/header/LoginNav.astro

@@ -6,7 +6,7 @@ import LogoutBtn from './LogoutButton'
 const session = Astro.locals.session
 ---
 
-<div class='absolute top-0 right-0 space-x-2 mr-10'>
+<div class='ms-auto'>
   {
     session ? (
       <LogoutBtn client:only='react' />

src/components/header/LogoutButton.tsx

@@ -1,23 +1,10 @@
-// import toast from 'react-hot-toast'
-
-import Button from 'components/Button'
 import * as m from 'paraglide/messages.js'
+import Button from 'components/Button'
+import { signOut } from 'utils/auth-client'
 
 export default function LogoutBtn() {
-  const handleClick = (ev) => {
-    ev.preventDefault()
-
-    /* mutate()
-      .then(() => {
-        window.refresh()
-      })
-      .catch((err) => {
-        toast.error(err.message)
-      }) */
-  }
-
   return (
-    <Button className='rounded-t-none' onClick={handleClick}>
+    <Button className='rounded-t-none' onClick={() => signOut()}>
       {m.logout()}
     </Button>
   )

src/layouts/base.astro

@@ -25,10 +25,10 @@ import 'styles/global.css'
   </head>
   <body class='flex flex-col min-h-full m-0 color-'>
     <Header />
-    <main class='flex-1'>
+    <main class='flex-1 bg-soc-green'>
       <Toaster client:only='react' toastOptions={{ duration: 6000 }} />
       <slot />
     </main>
-    <footer>This is the footer</footer>
+    <footer class='bg-soc-green'>This is the footer</footer>
   </body>
 </html>

src/pages/forgor/index.astro

@@ -0,0 +1,9 @@
+---
+import ForgorForm from 'components/ForgorForm'
+import BaseLayout from 'layouts/base.astro'
+const token = Astro.url.searchParams.get('token')
+
+if (!token) return Astro.redirect('/404')
+---
+
+<BaseLayout><ForgorForm token={token} client:only='react' /></BaseLayout>

src/pages/index.astro

@@ -1,6 +1,4 @@
 ---
-import { languageTag } from '../paraglide/runtime'
-
 import BaseLayout from 'layouts/base.astro'
 ---
 

src/utils/auth-client.ts

@@ -4,4 +4,4 @@ import { usernameClient } from 'better-auth/client/plugins'
 export const authClient = createAuthClient({
   plugins: [usernameClient()]
 })
-export const { useSession, signIn, signUp, forgetPassword, resetPassword } = authClient
+export const { useSession, signIn, signUp, signOut, forgetPassword, resetPassword } = authClient

src/utils/types.ts

@@ -0,0 +1,3 @@
+import type { Dispatch, SetStateAction } from 'react'
+
+export type SetState<T> = Dispatch<SetStateAction<T>>

tailwind.config.mjs

@@ -10,7 +10,8 @@ export default {
         dark: '#212529',
         'dark-hover': '#2b3035',
         gray: '#3f3f3f',
-        'gray-hover': '#4f4f4f'
+        'gray-hover': '#4f4f4f',
+        'soc-green': '#4b7667'
       }
     }
   },

yarn.lock

@@ -95,13 +95,13 @@
     fast-xml-parser "^4.5.0"
     kleur "^4.1.5"
 
-"@astrojs/tailwind@5.1.4":
+"@astrojs/tailwind@^6.0.0":
-  version "5.1.4"
+  version "6.0.0"
-  resolved "https://registry.npmjs.org/@astrojs/tailwind/-/tailwind-5.1.4.tgz"
+  resolved "https://registry.yarnpkg.com/@astrojs/tailwind/-/tailwind-6.0.0.tgz#898f804c583d5570862cfdc96bc9688f3c9f0dce"
-  integrity sha512-EJ3uoTZZr0RYwTrVS2HgYN0+VbXvg7h87AtwpD5OzqS3GyMwRmzfOwHfORTxoWGQRrY9k/Fi+Awk60kwpvRL5Q==
+  integrity sha512-GbEK2/h0nvY8i6g1GZT5ddHAgj71lQIf34/j7+jPLhUti3xDxKcWElApDe2jWvqAaKl2oKEh045ITSm8mU9BVQ==
   dependencies:
     autoprefixer "^10.4.20"
-    postcss "^8.4.49"
+    postcss "^8.5.1"
     postcss-load-config "^4.0.2"
 
 "@astrojs/telemetry@3.2.0":
@@ -3509,7 +3509,7 @@ fast-deep-equal@^3.1.1, fast-deep-equal@^3.1.3:
   resolved "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz"
   integrity sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==
 
-fast-glob@^3.2.9, fast-glob@^3.3.0, fast-glob@^3.3.2:
+fast-glob@^3.2.9, fast-glob@^3.3.2:
   version "3.3.2"
   resolved "https://registry.npmjs.org/fast-glob/-/fast-glob-3.3.2.tgz"
   integrity sha512-oX2ruAFQwf/Orj8m737Y5adxDQO0LAB7/S5MnxCdTNDd4p6BsyIVsv9JQsATbTSq8KHRpLwIHbVlUNatxd+1Ow==
@@ -4189,6 +4189,13 @@ is-core-module@^2.13.0:
   dependencies:
     hasown "^2.0.2"
 
+is-core-module@^2.16.0:
+  version "2.16.1"
+  resolved "https://registry.yarnpkg.com/is-core-module/-/is-core-module-2.16.1.tgz#2a98801a849f43e2add644fbb6bc6229b19a4ef4"
+  integrity sha512-UfoeMA6fIJ8wTYFEUjelnaGI67v6+N7qXJEvQuIGa99l4xsCruSYOVSQ0uPANn4dAzm8lkYPaKLrrijLq7x23w==
+  dependencies:
+    hasown "^2.0.2"
+
 is-data-view@^1.0.1:
   version "1.0.1"
   resolved "https://registry.npmjs.org/is-data-view/-/is-data-view-1.0.1.tgz"
@@ -4376,10 +4383,10 @@ jackspeak@^3.1.2:
   optionalDependencies:
     "@pkgjs/parseargs" "^0.11.0"
 
-jiti@^1.21.0:
+jiti@^1.21.6:
-  version "1.21.6"
+  version "1.21.7"
-  resolved "https://registry.npmjs.org/jiti/-/jiti-1.21.6.tgz"
+  resolved "https://registry.yarnpkg.com/jiti/-/jiti-1.21.7.tgz#9dd81043424a3d28458b193d965f0d18a2300ba9"
-  integrity sha512-2yTgeWTWzMWkHu6Jp9NKgePDaYHbntiwvYuuJLbbN9vl7DC9DvXKOB2BC3ZZ92D3cvV/aflH0osDfwpHepQ53w==
+  integrity sha512-/imKNG4EbWNrVjoNC/1H5/9GFy+tqjGBHCaSsN+P2RnPqjsLmv6UD3Ej+Kj8nBWaRAwyk7kK5ZUc+OEatnTR3A==
 
 jose@^5.9.6:
   version "5.9.6"
@@ -4542,16 +4549,16 @@ levn@^0.4.1:
     prelude-ls "^1.2.1"
     type-check "~0.4.0"
 
-lilconfig@^2.1.0:
-  version "2.1.0"
-  resolved "https://registry.npmjs.org/lilconfig/-/lilconfig-2.1.0.tgz"
-  integrity sha512-utWOt/GHzuUxnLKxB6dk81RoOeoNeHgbrXiuGk4yyF5qlRz+iIVWu56E2fqGHFrXz0QNUhLB/8nKqvRH66JKGQ==
-
 lilconfig@^3.0.0:
   version "3.1.2"
   resolved "https://registry.npmjs.org/lilconfig/-/lilconfig-3.1.2.tgz"
   integrity sha512-eop+wDAvpItUys0FWkHIKeC9ybYrTGbU41U5K7+bttZZeohvnY7M9dZ5kB21GNWiFT2q1OoPTvncPCgSOVO5ow==
 
+lilconfig@^3.1.3:
+  version "3.1.3"
+  resolved "https://registry.yarnpkg.com/lilconfig/-/lilconfig-3.1.3.tgz#a1bcfd6257f9585bf5ae14ceeebb7b559025e4c4"
+  integrity sha512-/vlFKAoH5Cgt3Ie+JLhRbwOsCQePABiU3tJ1egGvyQ+33R/vcwM2Zl2QR/LzjsBeItPt3oSVXapn+m4nQDvpzw==
+
 lines-and-columns@^1.1.6:
   version "1.2.4"
   resolved "https://registry.npmjs.org/lines-and-columns/-/lines-and-columns-1.2.4.tgz"
@@ -5226,6 +5233,11 @@ nanoid@^3.3.7:
   resolved "https://registry.npmjs.org/nanoid/-/nanoid-3.3.7.tgz"
   integrity sha512-eSRppjcPIatRIMC1U6UngP8XFcz8MQWGQdt1MTBQ7NaAmvXDfvNxbvWV3x2y6CdEUciCSsDHDQZbhYaB8QEo2g==
 
+nanoid@^3.3.8:
+  version "3.3.8"
+  resolved "https://registry.yarnpkg.com/nanoid/-/nanoid-3.3.8.tgz#b1be3030bee36aaff18bacb375e5cce521684baf"
+  integrity sha512-WNLf5Sd8oZxOm+TzppcYk8gVOgP+l58xNy58D0nbUnOxOWRWvlcCV4kUF7ltmI6PsrLl/BgKEyS4mqsGChFN0w==
+
 natural-compare@^1.4.0:
   version "1.4.0"
   resolved "https://registry.npmjs.org/natural-compare/-/natural-compare-1.4.0.tgz"
@@ -5662,7 +5674,7 @@ postcss-js@^4.0.1:
   dependencies:
     camelcase-css "^2.0.1"
 
-postcss-load-config@^4.0.1, postcss-load-config@^4.0.2:
+postcss-load-config@^4.0.2:
   version "4.0.2"
   resolved "https://registry.npmjs.org/postcss-load-config/-/postcss-load-config-4.0.2.tgz"
   integrity sha512-bSVhyJGL00wMVoPUzAVAnbEoWyqRxkjv64tUl427SKnPrENtq6hJwUojroMz2VB+Q1edmi4IfrAPpami5VVgMQ==
@@ -5670,14 +5682,14 @@ postcss-load-config@^4.0.1, postcss-load-config@^4.0.2:
     lilconfig "^3.0.0"
     yaml "^2.3.4"
 
-postcss-nested@^6.0.1:
+postcss-nested@^6.2.0:
   version "6.2.0"
-  resolved "https://registry.npmjs.org/postcss-nested/-/postcss-nested-6.2.0.tgz"
+  resolved "https://registry.yarnpkg.com/postcss-nested/-/postcss-nested-6.2.0.tgz#4c2d22ab5f20b9cb61e2c5c5915950784d068131"
   integrity sha512-HQbt28KulC5AJzG+cZtj9kvKB93CFCdLvog1WFLf1D+xmMvPGlBstkpTEZfK5+AN9hfJocyBFCNiqyS48bpgzQ==
   dependencies:
     postcss-selector-parser "^6.1.1"
 
-postcss-selector-parser@^6.0.10, postcss-selector-parser@^6.0.11, postcss-selector-parser@^6.1.1:
+postcss-selector-parser@^6.0.10, postcss-selector-parser@^6.1.1, postcss-selector-parser@^6.1.2:
   version "6.1.2"
   resolved "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-6.1.2.tgz"
   integrity sha512-Q8qQfPiZ+THO/3ZrOrO0cJJKfpYCagtMUkXbnEfmgUjwXg6z/WBeOyS9APBBPCTSiDV+s4SwQGu8yFsiMRIudg==
@@ -5690,7 +5702,7 @@ postcss-value-parser@^4.0.0, postcss-value-parser@^4.2.0:
   resolved "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-4.2.0.tgz"
   integrity sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==
 
-postcss@^8.4.14, postcss@^8.4.23, postcss@^8.4.49:
+postcss@^8.4.14, postcss@^8.4.49:
   version "8.4.49"
   resolved "https://registry.npmjs.org/postcss/-/postcss-8.4.49.tgz"
   integrity sha512-OCVPnIObs4N29kxTjzLfUryOkvZEq+pf8jTF0lg8E7uETuWHA+v7j3c/xJmiqpX450191LlmZfUKkXxkTry7nA==
@@ -5699,6 +5711,15 @@ postcss@^8.4.14, postcss@^8.4.23, postcss@^8.4.49:
     picocolors "^1.1.1"
     source-map-js "^1.2.1"
 
+postcss@^8.4.47, postcss@^8.5.1:
+  version "8.5.1"
+  resolved "https://registry.yarnpkg.com/postcss/-/postcss-8.5.1.tgz#e2272a1f8a807fafa413218245630b5db10a3214"
+  integrity sha512-6oz2beyjc5VMn/KV1pPw8fliQkhBXrVn1Z3TVyqZxU8kZpzEKhBdmCFqI6ZbmGtamQvQGuU1sgPTk8ZrXDD7jQ==
+  dependencies:
+    nanoid "^3.3.8"
+    picocolors "^1.1.1"
+    source-map-js "^1.2.1"
+
 posthog-node@3.1.3:
   version "3.1.3"
   resolved "https://registry.npmjs.org/posthog-node/-/posthog-node-3.1.3.tgz"
@@ -6031,7 +6052,7 @@ resolve-pkg-maps@^1.0.0:
   resolved "https://registry.npmjs.org/resolve-pkg-maps/-/resolve-pkg-maps-1.0.0.tgz"
   integrity sha512-seS2Tj26TBVOC2NIc2rOe2y2ZO7efxITtLZcGSOnHHNOQ7CkiUBfw0Iw2ck6xkIhPwLhKNLS8BO+hEpngQlqzw==
 
-resolve@^1.1.7, resolve@^1.22.2:
+resolve@^1.1.7:
   version "1.22.8"
   resolved "https://registry.npmjs.org/resolve/-/resolve-1.22.8.tgz"
   integrity sha512-oKWePCxqpd6FlLvGV1VU0x7bkPmmCNolxzjMf4NczoDnQcIWrAF+cPtZn5i6n+RfD2d9i0tzpKnG6Yk168yIyw==
@@ -6040,6 +6061,15 @@ resolve@^1.1.7, resolve@^1.22.2:
     path-parse "^1.0.7"
     supports-preserve-symlinks-flag "^1.0.0"
 
+resolve@^1.22.8:
+  version "1.22.10"
+  resolved "https://registry.yarnpkg.com/resolve/-/resolve-1.22.10.tgz#b663e83ffb09bbf2386944736baae803029b8b39"
+  integrity sha512-NPRy+/ncIMeDlTAsuqwKIiferiawhefFJtkNSW0qZJEqMEb+qBt/77B/jGeeek+F0uOeN05CDa6HXbbIgtVX4w==
+  dependencies:
+    is-core-module "^2.16.0"
+    path-parse "^1.0.7"
+    supports-preserve-symlinks-flag "^1.0.0"
+
 resolve@^2.0.0-next.5:
   version "2.0.0-next.5"
   resolved "https://registry.npmjs.org/resolve/-/resolve-2.0.0-next.5.tgz"
@@ -6520,9 +6550,9 @@ strnum@^1.0.5:
   resolved "https://registry.npmjs.org/strnum/-/strnum-1.0.5.tgz"
   integrity sha512-J8bbNyKKXl5qYcR36TIO8W3mVGVHrmmxsd5PAItGkmyzwJvybiw2IVq5nqd0i4LSNSkB/sx9VHllbfFdr9k1JA==
 
-sucrase@^3.32.0:
+sucrase@^3.35.0:
   version "3.35.0"
-  resolved "https://registry.npmjs.org/sucrase/-/sucrase-3.35.0.tgz"
+  resolved "https://registry.yarnpkg.com/sucrase/-/sucrase-3.35.0.tgz#57f17a3d7e19b36d8995f06679d121be914ae263"
   integrity sha512-8EbVDiu9iN/nESwxeSxDKe0dunta1GOlHufmSSXxMD2z2/tMZpDMpvXQGsc+ajGo8y2uYUmixaSRUc/QPoQ0GA==
   dependencies:
     "@jridgewell/gen-mapping" "^0.3.2"
@@ -6573,33 +6603,33 @@ synckit@^0.9.0:
     "@pkgr/core" "^0.1.0"
     tslib "^2.6.2"
 
-tailwindcss@^3.4.12:
+tailwindcss@^3.4.17:
-  version "3.4.13"
+  version "3.4.17"
-  resolved "https://registry.npmjs.org/tailwindcss/-/tailwindcss-3.4.13.tgz"
+  resolved "https://registry.yarnpkg.com/tailwindcss/-/tailwindcss-3.4.17.tgz#ae8406c0f96696a631c790768ff319d46d5e5a63"
-  integrity sha512-KqjHOJKogOUt5Bs752ykCeiwvi0fKVkr5oqsFNt/8px/tA8scFPIlkygsf6jXrfCqGHz7VflA6+yytWuM+XhFw==
+  integrity sha512-w33E2aCvSDP0tW9RZuNXadXlkHXqFzSkQew/aIa2i/Sj8fThxwovwlXHSPXTbAHwEIhBFXAedUhP2tueAKP8Og==
   dependencies:
     "@alloc/quick-lru" "^5.2.0"
     arg "^5.0.2"
-    chokidar "^3.5.3"
+    chokidar "^3.6.0"
     didyoumean "^1.2.2"
     dlv "^1.1.3"
-    fast-glob "^3.3.0"
+    fast-glob "^3.3.2"
     glob-parent "^6.0.2"
     is-glob "^4.0.3"
-    jiti "^1.21.0"
+    jiti "^1.21.6"
-    lilconfig "^2.1.0"
+    lilconfig "^3.1.3"
-    micromatch "^4.0.5"
+    micromatch "^4.0.8"
     normalize-path "^3.0.0"
     object-hash "^3.0.0"
-    picocolors "^1.0.0"
+    picocolors "^1.1.1"
-    postcss "^8.4.23"
+    postcss "^8.4.47"
     postcss-import "^15.1.0"
     postcss-js "^4.0.1"
-    postcss-load-config "^4.0.1"
+    postcss-load-config "^4.0.2"
-    postcss-nested "^6.0.1"
+    postcss-nested "^6.2.0"
-    postcss-selector-parser "^6.0.11"
+    postcss-selector-parser "^6.1.2"
-    resolve "^1.22.2"
+    resolve "^1.22.8"
-    sucrase "^3.32.0"
+    sucrase "^3.35.0"
 
 tapable@^2.2.0:
   version "2.2.1"