feat: switch to react aria and replace many components

2024-04-29 20:31:29 -04:00 · 2024-04-29 20:31:29 -04:00 · 3abd617a90
commit 3abd617a90
parent cbecf85979
11 changed files with 536 additions and 298 deletions
--- a/app/components/Dialog.tsx
+++ b/app/components/Dialog.tsx
@ -0,0 +1,136 @@
+import { type Dispatch, type ReactNode, type SetStateAction } from 'react'
+import {
+	Button as AriaButton,
+	Dialog as AriaDialog,
+	DialogTrigger,
+	Heading as AriaHeading,
+	Modal,
+	ModalOverlay
+} from 'react-aria-components'
+
+import { cn } from '~/utils/cn'
+
+type ButtonProperties = Parameters<typeof AriaButton>[0] & {
+	readonly control?: [boolean, Dispatch<SetStateAction<boolean>>];
+}
+
+function Button(properties: ButtonProperties) {
+	return (
+		<AriaButton
+			{...properties}
+			aria-label='Dialog'
+			className={cn(
+				'outline-none',
+				properties.className
+			)}
+			// If control is passed, set the state value
+			onPress={properties.control ? () => {
+				properties.control?.[1](true)
+			} : undefined}
+		/>
+	)
+}
+
+type ActionProperties = Parameters<typeof AriaButton>[0] & {
+	readonly variant: 'cancel' | 'confirm';
+}
+
+function Action(properties: ActionProperties) {
+	return (
+		<AriaButton
+			{...properties}
+			type={properties.variant === 'confirm' ? 'submit' : 'button'}
+			className={cn(
+				'px-4 py-2 rounded-lg',
+				properties.variant === 'cancel'
+					? 'text-ui-700 dark:text-ui-300'
+					: 'text-ui-950 dark:text-ui-50',
+				properties.variant === 'confirm'
+					? 'bg-blue-500 hover:bg-blue-600 pressed:bg-blue-700 text-white'
+					: 'bg-ui-200 dark:bg-ui-800 pressed:bg-ui-300 dark:pressed:bg-ui-700',
+				properties.className
+			)}
+		/>
+	)
+}
+
+function Title(properties: Parameters<typeof AriaHeading>[0]) {
+	return (
+		<AriaHeading
+			{...properties}
+			slot='title'
+			className={cn(
+				'text-lg font-semibold leading-6 mb-5',
+				properties.className
+			)}
+		/>
+	)
+}
+
+function Text(properties: React.HTMLProps<HTMLParagraphElement>) {
+	return (
+		<p
+			{...properties}
+			className={cn(
+				'text-base leading-6 my-0',
+				properties.className
+			)}
+		/>
+	)
+}
+
+type PanelProperties = {
+	readonly children: (close: () => void) => ReactNode;
+	readonly control?: [boolean, Dispatch<SetStateAction<boolean>>];
+}
+
+function Panel({ children, control }: PanelProperties) {
+	return (
+		<ModalOverlay
+			aria-hidden='true'
+			className={cn(
+				'fixed inset-0 h-screen w-screen z-50 bg-black/30',
+				'flex items-center justify-center dark:bg-black/70',
+				'entering:animate-in exiting:animate-out',
+				'entering:fade-in entering:duration-300 entering:ease-out',
+				'exiting:fade-out exiting:duration-200 exiting:ease-in'
+			)}
+			isOpen={control ? control[0] : undefined}
+			onOpenChange={control ? control[1] : undefined}
+		>
+			<Modal
+				className={cn(
+					'w-full max-w-md overflow-hidden rounded-xl p-4',
+					'bg-ui-50 dark:bg-ui-900 shadow-lg',
+					'entering:animate-in exiting:animate-out',
+					'dark:border dark:border-ui-700',
+					'entering:zoom-in-95 entering:ease-out entering:duration-300',
+					'exiting:zoom-out-95 exiting:ease-in exiting:duration-200'
+				)}
+			>
+				<AriaDialog role='alertdialog' className='outline-none relative'>
+					{({ close }) => children(close)}
+				</AriaDialog>
+			</Modal>
+		</ModalOverlay>
+	)
+}
+
+type DialogProperties = {
+	readonly children: ReactNode;
+	readonly control?: [boolean, Dispatch<SetStateAction<boolean>>];
+}
+
+function Dialog({ children, control }: DialogProperties) {
+	if (control) {
+		return children
+	}
+
+	return (
+		<DialogTrigger>
+			{children}
+		</DialogTrigger>
+	)
+}
+
+export default Object.assign(Dialog, { Button, Title, Text, Panel, Action })
--- a/app/components/Dropdown.tsx
+++ b/app/components/Dropdown.tsx
@ -1,86 +0,0 @@
-import { Menu, type MenuButtonProps, Transition } from '@headlessui/react'
-import clsx from 'clsx'
-import { Fragment, type HTMLProps, type ReactNode } from 'react'
-
-type Properties = {
-	readonly children: ReactNode;
-	readonly button: ReactNode;
-	// eslint-disable-next-line unicorn/no-keyword-prefix
-	readonly className?: string;
-	readonly width?: string;
-}
-
-function Dropdown(properties: Properties) {
-	return (
-		<div className={clsx('relative', properties.className)}>
-			<Menu>
-				<Button className='flex flex-col items-center'>
-					{properties.button}
-				</Button>
-				<Transition
-					as={Fragment}
-					enter='transition ease-out duration-100'
-					enterFrom='transform opacity-0 scale-95'
-					enterTo='transform opacity-100 scale-100'
-					leave='transition ease-in duration-75'
-					leaveFrom='transform opacity-100 scale-100'
-					leaveTo='transform opacity-0 scale-95'
-				>
-					<Menu.Items className={clsx(
-						'absolute right-0 mt-2 rounded-md',
-						'text-gray-700 dark:text-gray-300',
-						'bg-white dark:bg-zinc-800',
-						'overflow-hidden z-50',
-						'border border-gray-200 dark:border-zinc-700',
-						'divide-y divide-gray-200 dark:divide-zinc-700',
-						properties.width ?? 'w-36'
-					)}
-					>
-						{properties.children}
-					</Menu.Items>
-				</Transition>
-			</Menu>
-		</div>
-	)
-}
-
-function Button(properties: MenuButtonProps<'button'>) {
-	return (
-		<Menu.Button
-			{...properties}
-			className={clsx(
-				properties.className
-			)}
-		>
-			{properties.children}
-		</Menu.Button>
-	)
-}
-
-type ItemProperties = HTMLProps<HTMLDivElement> & {
-	variant?: 'static' | 'normal';
-}
-
-function Item(properties: ItemProperties) {
-	return (
-		<Menu.Item>
-			{({ active }) => (
-				<div
-					{...properties}
-					className={clsx(
-						'px-4 py-2 w-full',
-						'focus:outline-none focus:ring',
-						'focus:ring-gray-300 dark:focus:ring-zinc-700',
-						properties.className,
-						properties.variant !== 'static' && active
-							? 'bg-gray-100 dark:bg-zinc-500' : ''
-					)}
-				>
-					{properties.children}
-				</div>
-			)}
-		</Menu.Item>
-	)
-}
-
-export default Object.assign(Dropdown, { Item })
--- a/app/components/Menu.tsx
+++ b/app/components/Menu.tsx
@ -0,0 +1,73 @@
+import { type ReactNode } from 'react'
+import {
+	Button as AriaButton,
+	Menu as AriaMenu,
+	MenuItem,
+	MenuTrigger,
+	Popover
+} from 'react-aria-components'
+
+import { cn } from '~/utils/cn'
+
+function Button(properties: Parameters<typeof AriaButton>[0]) {
+	return (
+		<AriaButton
+			{...properties}
+			className={cn(
+				'outline-none',
+				properties.className
+			)}
+			aria-label='Menu'
+		/>
+	)
+}
+
+function Items(properties: Parameters<typeof AriaMenu>[0]) {
+	return (
+		<Popover className={cn(
+			'mt-2 rounded-md',
+			'bg-ui-50 dark:bg-ui-800',
+			'overflow-hidden z-50',
+			'border border-ui-200 dark:border-ui-600',
+			'entering:animate-in exiting:animate-out',
+			'entering:fade-in entering:zoom-in-95',
+			'exiting:fade-out exiting:zoom-out-95',
+			'fill-mode-forwards origin-left-right'
+		)}
+		>
+			<AriaMenu
+				{...properties}
+				className={cn(
+					'outline-none',
+					'divide-y divide-ui-200 dark:divide-ui-600',
+					properties.className
+				)}
+			>
+				{properties.children}
+			</AriaMenu>
+		</Popover>
+	)
+}
+
+function Item(properties: Parameters<typeof MenuItem>[0]) {
+	return (
+		<MenuItem
+			{...properties}
+			className={cn(
+				'px-4 py-2 w-full outline-none',
+				'hover:bg-ui-200 dark:hover:bg-ui-700',
+				properties.className
+			)}
+		/>
+	)
+}
+
+function Menu({ children }: { readonly children: ReactNode }) {
+	return (
+		<MenuTrigger>
+			{children}
+		</MenuTrigger>
+	)
+}
+
+export default Object.assign(Menu, { Button, Item, Items })
--- a/app/components/TextField.tsx
+++ b/app/components/TextField.tsx
@ -0,0 +1,37 @@
+import { type Dispatch, type SetStateAction } from 'react'
+import {
+	Input,
+	TextField as AriaTextField
+} from 'react-aria-components'
+
+import { cn } from '~/utils/cn'
+
+type TextFieldProperties = Parameters<typeof AriaTextField>[0] & {
+	readonly label: string;
+	readonly placeholder: string;
+	readonly state: [string, Dispatch<SetStateAction<string>>];
+}
+
+export default function TextField(properties: TextFieldProperties) {
+	return (
+		<AriaTextField
+			{...properties}
+			aria-label={properties.label}
+			className='w-full'
+		>
+			<Input
+				placeholder={properties.placeholder}
+				value={properties.state[0]}
+				name={properties.name}
+				className={cn(
+					'block px-2.5 py-1.5 w-full rounded-lg my-1',
+					'border border-ui-200 dark:border-ui-600',
+					properties.className
+				)}
+				onChange={event => {
+					properties.state[1](event.target.value)
+				}}
+			/>
+		</AriaTextField>
+	)
+}
--- a/app/routes/_data.machines._index/dialogs/delete.tsx
+++ b/app/routes/_data.machines._index/dialogs/delete.tsx
@ -0,0 +1,55 @@
+import { type FetcherWithComponents } from '@remix-run/react'
+import { type Dispatch, type SetStateAction } from 'react'
+
+import Dialog from '~/components/Dialog'
+import { type Machine } from '~/types'
+import { cn } from '~/utils/cn'
+
+type DeleteProperties = {
+	readonly machine: Machine;
+	readonly fetcher: FetcherWithComponents<unknown>;
+	readonly state: [boolean, Dispatch<SetStateAction<boolean>>];
+}
+
+export default function Delete({ machine, fetcher, state }: DeleteProperties) {
+	return (
+		<Dialog>
+			<Dialog.Panel control={state}>
+				{close => (
+					<>
+						<Dialog.Title>
+							Remove {machine.givenName}
+						</Dialog.Title>
+						<Dialog.Text>
+							This machine will be permanently removed from
+							your network. To re-add it, you will need to
+							reauthenticate to your tailnet from the device.
+						</Dialog.Text>
+						<fetcher.Form>
+							<input type='hidden' name='_method' value='delete'/>
+							<input type='hidden' name='id' value={machine.id}/>
+							<div className='mt-6 flex justify-end gap-2 mt-6'>
+								<Dialog.Action
+									variant='cancel'
+									onPress={close}
+								>
+									Cancel
+								</Dialog.Action>
+								<Dialog.Action
+									variant='confirm'
+									className={cn(
+										'bg-red-500 hover:border-red-700',
+										'pressed:bg-red-600'
+									)}
+									onPress={close}
+								>
+									Remove
+								</Dialog.Action>
+							</div>
+						</fetcher.Form>
+					</>
+				)}
+			</Dialog.Panel>
+		</Dialog>
+	)
+}
--- a/app/routes/_data.machines._index/dialogs/rename.tsx
+++ b/app/routes/_data.machines._index/dialogs/rename.tsx
@ -0,0 +1,90 @@
+import { type FetcherWithComponents } from '@remix-run/react'
+import { type Dispatch, type SetStateAction, useState } from 'react'
+
+import Code from '~/components/Code'
+import Dialog from '~/components/Dialog'
+import TextField from '~/components/TextField'
+import { type Machine } from '~/types'
+import { cn } from '~/utils/cn'
+
+type RenameProperties = {
+	readonly machine: Machine;
+	readonly fetcher: FetcherWithComponents<unknown>;
+	readonly state: [boolean, Dispatch<SetStateAction<boolean>>];
+	readonly magic?: string;
+}
+
+export default function Rename({ machine, fetcher, state, magic }: RenameProperties) {
+	const [name, setName] = useState(machine.givenName)
+
+	return (
+		<Dialog>
+			<Dialog.Panel control={state}>
+				{close => (
+					<>
+						<Dialog.Title>
+							Edit machine name for {machine.givenName}
+						</Dialog.Title>
+						<Dialog.Text>
+							This name is shown in the admin panel, in Tailscale clients,
+							and used when generating MagicDNS names.
+						</Dialog.Text>
+						<fetcher.Form>
+							<input type='hidden' name='_method' value='rename'/>
+							<input type='hidden' name='id' value={machine.id}/>
+							<TextField
+								label='Machine name'
+								placeholder='Machine name'
+								name='name'
+								state={[name, setName]}
+								className='my-2'
+							/>
+							{magic ? (
+								name.length > 0 && name !== machine.givenName ? (
+									<p className='text-sm text-gray-500 dark:text-gray-300 leading-tight'>
+										This machine will be accessible by the hostname
+										{' '}
+										<Code className='text-sm'>
+											{name.toLowerCase().replaceAll(/\s+/g, '-')}
+										</Code>
+										{'. '}
+										The hostname
+										{' '}
+										<Code className='text-sm'>
+											{machine.givenName}
+										</Code>
+										{' '}
+										will no longer point to this machine.
+									</p>
+								) : (
+									<p className='text-sm text-gray-500 dark:text-gray-300 leading-tight'>
+										This machine is accessible by the hostname
+										{' '}
+										<Code className='text-sm'>
+											{machine.givenName}
+										</Code>
+										.
+									</p>
+								)
+							) : undefined}
+							<div className='mt-6 flex justify-end gap-2 mt-6'>
+								<Dialog.Action
+									variant='cancel'
+									onPress={close}
+								>
+									Cancel
+								</Dialog.Action>
+								<Dialog.Action
+									variant='confirm'
+									onPress={close}
+								>
+									Rename
+								</Dialog.Action>
+							</div>
+						</fetcher.Form>
+					</>
+				)}
+			</Dialog.Panel>
+		</Dialog>
+	)
+}
--- a/app/routes/_data.machines._index/machine.tsx
+++ b/app/routes/_data.machines._index/machine.tsx
@ -1,22 +1,29 @@
+/* eslint-disable react/hook-use-state */
 import { ChevronDownIcon, ClipboardIcon, EllipsisHorizontalIcon } from '@heroicons/react/24/outline'
 import { type FetcherWithComponents, Link } from '@remix-run/react'
-import clsx from 'clsx'
+import { useState } from 'react'
 import toast from 'react-hot-toast/headless'

-import Dropdown from '~/components/Dropdown'
-import type { OpenFunction } from '~/components/Modal'
+import Dialog from '~/components/Dialog'
+import Menu from '~/components/Menu'
 import StatusCircle from '~/components/StatusCircle'
 import { type Machine } from '~/types'
+import { cn } from '~/utils/cn'
+
+import Delete from './dialogs/delete'
+import Rename from './dialogs/rename'

 type MachineProperties = {
 	readonly machine: Machine;
-	readonly open: OpenFunction;
 	readonly fetcher: FetcherWithComponents<unknown>;
 	readonly magic?: string;
 }

-export default function MachineRow({ machine, open, fetcher, magic }: MachineProperties) {
+export default function MachineRow({ machine, fetcher, magic }: MachineProperties) {
 	const tags = [...machine.forcedTags, ...machine.validTags]
+	const renameState = useState(false)
+	const removeState = useState(false)
+
 	return (
 		<tr
 			key={machine.id}
@ -27,7 +34,7 @@ export default function MachineRow({ machine, open, fetcher, magic }: MachinePro
 					to={`/machines/${machine.id}`}
 					className='group/link h-full'
 				>
-					<p className={clsx(
+					<p className={cn(
 						'font-semibold leading-snug',
 						'group-hover/link:text-blue-600',
 						'group-hover/link:dark:text-blue-400'
@ -35,14 +42,14 @@ export default function MachineRow({ machine, open, fetcher, magic }: MachinePro
 					>
 						{machine.givenName}
 					</p>
-					<p className='text-sm text-gray-400 font-mono'>
+					<p className='text-sm text-gray-500 dark:text-gray-300 font-mono'>
 						{machine.name}
 					</p>
 					<div className='flex gap-1 mt-1'>
 						{tags.map(tag => (
 							<span
 								key={tag}
-								className={clsx(
+								className={cn(
 									'text-xs rounded-sm px-1 py-0.5',
 									'bg-gray-100 dark:bg-zinc-700',
 									'text-gray-600 dark:text-gray-300'
@ -57,50 +64,53 @@ export default function MachineRow({ machine, open, fetcher, magic }: MachinePro
 			<td className='py-2'>
 				<div className='flex items-center gap-x-1'>
 					{machine.ipAddresses[0]}
-					<Dropdown
-						width='w-max'
-						button={(
+					<Menu>
+						<Menu.Button>
 							<ChevronDownIcon className='w-4 h-4'/>
-						)}
-					>
-						{machine.ipAddresses.map(ip => (
-							<Dropdown.Item key={ip}>
-								<button
-									type='button'
-									className={clsx(
-										'flex items-center gap-x-1.5 text-sm',
-										'justify-between w-full'
-									)}
-									onClick={async () => {
-										await navigator.clipboard.writeText(ip)
-										toast('Copied IP address to clipboard')
-									}}
+						</Menu.Button>
+						<Menu.Items>
+							{machine.ipAddresses.map(ip => (
+								<Menu.Item
+									key={ip}
+									className='hover:bg-transparent'
 								>
-									{ip}
-									<ClipboardIcon className='w-3 h-3'/>
-								</button>
-							</Dropdown.Item>
-						))}
-						{magic ? (
-							<Dropdown.Item>
-								<button
-									type='button'
-									className={clsx(
-										'flex items-center gap-x-1.5 text-sm',
-										'justify-between w-full break-keep'
-									)}
-									onClick={async () => {
-										const ip = `${machine.givenName}.${machine.user.name}.${magic}`
-										await navigator.clipboard.writeText(ip)
-										toast('Copied hostname to clipboard')
-									}}
-								>
-									{machine.givenName}.{machine.user.name}.{magic}
-									<ClipboardIcon className='w-3 h-3'/>
-								</button>
-							</Dropdown.Item>
-						) : undefined}
-					</Dropdown>
+									<button
+										type='button'
+										className={cn(
+											'flex items-center gap-x-1.5 text-sm',
+											'justify-between w-full'
+										)}
+										onClick={async () => {
+											await navigator.clipboard.writeText(ip)
+											toast('Copied IP address to clipboard')
+										}}
+									>
+										{ip}
+										<ClipboardIcon className='w-3 h-3'/>
+									</button>
+								</Menu.Item>
+							))}
+							{magic ? (
+								<Menu.Item className='hover:bg-transparent'>
+									<button
+										type='button'
+										className={cn(
+											'flex items-center gap-x-1.5 text-sm',
+											'justify-between w-full break-keep'
+										)}
+										onClick={async () => {
+											const ip = `${machine.givenName}.${machine.user.name}.${magic}`
+											await navigator.clipboard.writeText(ip)
+											toast('Copied hostname to clipboard')
+										}}
+									>
+										{machine.givenName}.{machine.user.name}.{magic}
+										<ClipboardIcon className='w-3 h-3'/>
+									</button>
+								</Menu.Item>
+							) : undefined}
+						</Menu.Items>
+					</Menu>
 				</div>
 			</td>
 			<td className='py-2'>
@ -118,86 +128,52 @@ export default function MachineRow({ machine, open, fetcher, magic }: MachinePro
 				</span>
 			</td>
 			<td className='py-2 pr-0.5'>
-				<div className={clsx(
-					'border border-transparent rounded-lg py-0.5 w-10',
-					'group-hover:border-gray-200 dark:group-hover:border-zinc-700'
-				)}
-				>
-					<Dropdown
-						className='left-1/4'
-						width='w-48'
-						button={(
-							<EllipsisHorizontalIcon className='w-5 h-5'/>
+				<Rename
+					machine={machine}
+					fetcher={fetcher}
+					state={renameState}
+					magic={magic}
+				/>
+				<Delete
+					machine={machine}
+					fetcher={fetcher}
+					state={removeState}
+				/>
+				<Menu>
+					<Menu.Button
+						className={cn(
+							'flex items-center justify-center',
+							'border border-transparent rounded-lg py-0.5 w-10',
+							'group-hover:border-gray-200 dark:group-hover:border-zinc-700'
 						)}
 					>
-						<Dropdown.Item variant='static'>
-							<button
-								disabled
-								type='button'
-								className='text-left w-full opacity-50'
-								onClick={() => {
-									open()
-								}}
+						<EllipsisHorizontalIcon className='w-5'/>
+					</Menu.Button>
+					<Menu.Items>
+						<Menu.Item>
+							<Dialog.Button
+								className='h-full w-full text-left'
+								control={renameState}
 							>
 								Edit machine name
-							</button>
-						</Dropdown.Item>
-						<Dropdown.Item variant='static'>
-							<button
-								disabled
-								type='button'
-								className='text-left w-full opacity-50'
-								onClick={() => {
-									open()
-								}}
-							>
-								Edit route settings
-							</button>
-						</Dropdown.Item>
-						<Dropdown.Item variant='static'>
-							<button
-								disabled
-								type='button'
-								className='text-left w-full opacity-50'
-								onClick={() => {
-									open()
-								}}
-							>
-								Edit ACL tags
-							</button>
-						</Dropdown.Item>
-						<Dropdown.Item>
-							<button
-								type='button'
-								className='text-left text-red-700 w-full'
-								onClick={() => {
-									open({
-										title: 'Remove Machine',
-										description: [
-											'This action is irreversible and will disconnect the machine from the Headscale server.',
-											'All data associated with this machine including ACLs and tags will be lost.'
-										].join('\n'),
-										variant: 'danger',
-										buttonText: 'Remove',
-										onConfirm: () => {
-											fetcher.submit(
-												{
-													id: machine.id
-												},
-												{
-													method: 'DELETE',
-													encType: 'application/json'
-												}
-											)
-										}
-									})
-								}}
+							</Dialog.Button>
+						</Menu.Item>
+						<Menu.Item>
+							Edit route settings
+						</Menu.Item>
+						<Menu.Item>
+							Edit ACL tags
+						</Menu.Item>
+						<Menu.Item>
+							<Dialog.Button
+								className='w-full h-full text-left text-red-500 dark:text-red-400'
+								control={removeState}
 							>
 								Remove
-							</button>
-						</Dropdown.Item>
-					</Dropdown>
-				</div>
+							</Dialog.Button>
+						</Menu.Item>
+					</Menu.Items>
+				</Menu>
 			</td>
 		</tr>
 	)
--- a/app/utils/cn.ts
+++ b/app/utils/cn.ts
@ -0,0 +1,4 @@
+import { type ClassValue, clsx } from 'clsx'
+import { twMerge } from 'tailwind-merge'
+
+export const cn = (...inputs: ClassValue[]) => twMerge(clsx(inputs))
--- a/package.json
+++ b/package.json
@ -33,6 +33,8 @@
 		"react-dom": "^18.2.0",
 		"react-hot-toast": "^2.4.1",
 		"remix-utils": "^7.6.0",
+		"tailwind-merge": "^2.3.0",
+		"tailwindcss-react-aria-components": "^1.1.1",
 		"undici": "^6.10.2",
 		"usehooks-ts": "^3.0.2",
 		"yaml": "^2.4.1"
@ -46,6 +48,7 @@
 		"eslint-config-tale": "^1.0.16",
 		"postcss": "^8.4.38",
 		"tailwindcss": "^3.4.1",
+		"tailwindcss-animate": "^1.0.7",
 		"typescript": "^5.1.6",
 		"vite": "^5.1.0",
 		"vite-tsconfig-paths": "^4.2.1"
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@ -71,6 +71,12 @@ dependencies:
  remix-utils:
    specifier: ^7.6.0
    version: 7.6.0(@remix-run/node@2.8.1)(@remix-run/react@2.8.1)(react@18.2.0)
+  tailwind-merge:
+    specifier: ^2.3.0
+    version: 2.3.0
+  tailwindcss-react-aria-components:
+    specifier: ^1.1.1
+    version: 1.1.1(tailwindcss@3.4.1)
  undici:
    specifier: ^6.10.2
    version: 6.10.2
@ -106,6 +112,9 @@ devDependencies:
  tailwindcss:
    specifier: ^3.4.1
    version: 3.4.1
+  tailwindcss-animate:
+    specifier: ^1.0.7
+    version: 1.0.7(tailwindcss@3.4.1)
  typescript:
    specifier: ^5.1.6
    version: 5.4.3
@ -126,7 +135,6 @@ packages:
  /@alloc/quick-lru@5.2.0:
    resolution: {integrity: sha512-UrcABB+4bUrFABwbluTIBErXwvbsU/V7TZWfmbgJfbkwiBuziS9gxdODUyuiecfdGQ85jglMW6juS3+z5TsKLw==}
    engines: {node: '>=10'}
-    dev: true

  /@ampproject/remapping@2.3.0:
    resolution: {integrity: sha512-30iZtAPgz+LTIYoeivqYo853f02jBYSd5uGnGpkFV0M3xOt9aN73erkgYAmZU43x4VfqcnLxW9Kpg3R5LC4YYw==}
@ -1178,7 +1186,6 @@ packages:
      strip-ansi-cjs: /strip-ansi@6.0.1
      wrap-ansi: 8.1.0
      wrap-ansi-cjs: /wrap-ansi@7.0.0
-    dev: true

  /@jridgewell/gen-mapping@0.3.5:
    resolution: {integrity: sha512-IzL8ZoEDIBRWEzlCcRhOaCupYyN5gdIK+Q6fbFdPDg6HqX6jpkItn7DFIpW9LQzXG6Df9sA7+OKnq0qlz/GaQg==}
@ -1187,28 +1194,23 @@ packages:
      '@jridgewell/set-array': 1.2.1
      '@jridgewell/sourcemap-codec': 1.4.15
      '@jridgewell/trace-mapping': 0.3.25
-    dev: true

  /@jridgewell/resolve-uri@3.1.2:
    resolution: {integrity: sha512-bRISgCIjP20/tbWSPWMEi54QVPRZExkuD9lJL+UIxUKtwVJA8wW1Trb1jMs1RFXo1CBTNZ/5hpC9QvmKWdopKw==}
    engines: {node: '>=6.0.0'}
-    dev: true

  /@jridgewell/set-array@1.2.1:
    resolution: {integrity: sha512-R8gLRTZeyp03ymzP/6Lil/28tGeGEzhx1q2k703KGWRAI1VdvPIXdG70VJc2pAMw3NA6JKL5hhFu1sJX0Mnn/A==}
    engines: {node: '>=6.0.0'}
-    dev: true

  /@jridgewell/sourcemap-codec@1.4.15:
    resolution: {integrity: sha512-eF2rxCRulEKXHTRiDrDy6erMYWqNw4LPdQ8UQA4huuxaQsVeRPFl2oM8oDGxMFhJUWZf9McpLtJasDDZb/Bpeg==}
-    dev: true

  /@jridgewell/trace-mapping@0.3.25:
    resolution: {integrity: sha512-vNk6aEwybGtawWmy/PzwnGDOjCkLWSD2wqvjGGAgOAwCGWySYXfYoxt00IJkTF+8Lb57DwOb3Aa0o9CApepiYQ==}
    dependencies:
      '@jridgewell/resolve-uri': 3.1.2
      '@jridgewell/sourcemap-codec': 1.4.15
-    dev: true

  /@jspm/core@2.0.1:
    resolution: {integrity: sha512-Lg3PnLp0QXpxwLIAuuJboLeRaIhrgJjeuh797QADg3xz8wGLugQOS5DpsE8A6i6Adgzf+bacllkKZG3J0tGfDw==}
@ -1276,12 +1278,10 @@ packages:
    dependencies:
      '@nodelib/fs.stat': 2.0.5
      run-parallel: 1.2.0
-    dev: true

  /@nodelib/fs.stat@2.0.5:
    resolution: {integrity: sha512-RkhPPp2zrqDAQA/2jNhnztcPAlv64XdhIp7a7454A5ovI7Bukxgt7MX7udwAu3zg1DcpPU0rz3VV1SeaqvY4+A==}
    engines: {node: '>= 8'}
-    dev: true

  /@nodelib/fs.walk@1.2.8:
    resolution: {integrity: sha512-oGB+UxlgWcgQkgwo8GcEGwemoTFt3FIO9ababBmaGwXIoBKZ+GTy0pP185beGg7Llih/NSHSV2XAs1lnznocSg==}
@ -1289,7 +1289,6 @@ packages:
    dependencies:
      '@nodelib/fs.scandir': 2.1.5
      fastq: 1.17.1
-    dev: true

  /@npmcli/fs@3.1.0:
    resolution: {integrity: sha512-7kZUAaLscfgbwBQRbvdMYaZOWyMEcPTH/tJjnyAWJ/dvvs9Ef+CERx/qJb9GExJpl1qipaDGn7KqHnFGGixd0w==}
@ -1340,7 +1339,6 @@ packages:
    resolution: {integrity: sha512-+1VkjdD0QBLPodGrJUeqarH8VAIvQODIbwh9XpP5Syisf7YoQgsJKPNFoqqLQlu+VQ/tVSshMR6loPMn8U+dPg==}
    engines: {node: '>=14'}
    requiresBuild: true
-    dev: true
    optional: true

  /@react-aria/breadcrumbs@3.5.11(react@18.2.0):
@ -3344,12 +3342,10 @@ packages:
  /ansi-regex@5.0.1:
    resolution: {integrity: sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==}
    engines: {node: '>=8'}
-    dev: true

  /ansi-regex@6.0.1:
    resolution: {integrity: sha512-n5M855fKb2SsfMIiFFoVrABHJC8QtHwVx+mHWP3QcEqBHYienj5dHSgjbxtC0WEZXYt4wcD6zrQElDPhFuZgfA==}
    engines: {node: '>=12'}
-    dev: true

  /ansi-styles@3.2.1:
    resolution: {integrity: sha512-VT0ZI6kZRdTh8YyJw3SMbYm/u+NqfsAxEpWO0Pf9sq8/e94WxxOpPKx9FR1FlyCtOVDNOQ+8ntlqFxiRc+r5qA==}
@ -3363,16 +3359,13 @@ packages:
    engines: {node: '>=8'}
    dependencies:
      color-convert: 2.0.1
-    dev: true

  /ansi-styles@6.2.1:
    resolution: {integrity: sha512-bN798gFfQX+viw3R7yrGWRqnrN2oRkEkUjjl4JNn4E8GxxbjtG3FbrEIIY3l8/hrwUwIeCZvi4QuOTP4MErVug==}
    engines: {node: '>=12'}
-    dev: true

  /any-promise@1.3.0:
    resolution: {integrity: sha512-7UvmKalWRt1wgjL1RrGxoSJW/0QZFIegpeGvZG9kjp8vrRu55XTHbwnqq2GpXm9uLbcuhxm3IqX9OB4MZR1b2A==}
-    dev: true

  /anymatch@3.1.3:
    resolution: {integrity: sha512-KMReFUr0B4t+D+OBkjR3KYqvocp2XaSzO55UcB6mgQMd3KbcE+mWTyvVV7D/zsdEbNnV6acZUutkiHQXvTr1Rw==}
@ -3383,7 +3376,6 @@ packages:

  /arg@5.0.2:
    resolution: {integrity: sha512-PYjyFOLKQ9y57JvQ6QLo8dAgNqswh8M1RMJYdQduT6xbWSgK36P/Z/v+p888pM69jMMfS8Xd8F6I1kQ/I9HUGg==}
-    dev: true

  /argparse@2.0.1:
    resolution: {integrity: sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q==}
@ -3515,7 +3507,6 @@ packages:

  /balanced-match@1.0.2:
    resolution: {integrity: sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==}
-    dev: true

  /base64-js@1.5.1:
    resolution: {integrity: sha512-AKpaYlHn8t4SVbOHCy+b5+KKgvR4vrsD8vbvrbiQJps7fKDTkjkDry6ji0rUJjC0kzbNePLwzxq8iypo41qeWA==}
@ -3569,7 +3560,6 @@ packages:
    resolution: {integrity: sha512-XnAIvQ8eM+kC6aULx6wuQiwVsnzsi9d3WxzV3FpWTGA19F621kwdbsAcFKXgKUHZWsy+mY6iL1sHTxWEFCytDA==}
    dependencies:
      balanced-match: 1.0.2
-    dev: true

  /braces@3.0.2:
    resolution: {integrity: sha512-b8um+L1RzM3WDSzvhm6gIz1yfTbBt6YTlcEKAvsmqCZZFw46z626lVj9j1yEPW33H5H+lBQpZMP1k8l+78Ha0A==}
@ -3664,7 +3654,6 @@ packages:
  /camelcase-css@2.0.1:
    resolution: {integrity: sha512-QOSvevhslijgYwRx6Rv7zKdMF8lbRmx+uQGx2+vDc+KI/eBnsy9kit5aj23AgGu3pa4t9AgwbnXWqS+iOY+2aA==}
    engines: {node: '>= 6'}
-    dev: true

  /caniuse-lite@1.0.30001600:
    resolution: {integrity: sha512-+2S9/2JFhYmYaDpZvo0lKkfvuKIglrx68MwOBqMGHhQsNkLjB5xtc/TGoEPs+MxjSyN/72qer2g97nzR641mOQ==}
@ -3798,7 +3787,6 @@ packages:
    engines: {node: '>=7.0.0'}
    dependencies:
      color-name: 1.1.4
-    dev: true

  /color-name@1.1.3:
    resolution: {integrity: sha512-72fSenhMw2HZMTVHeCA9KCmpEIbzWiQsjN+BHcBbS9vr1mtt+vJjPdksIBNUmKAW8TFUDPJK5SUU3QhE9NEXDw==}
@ -3806,7 +3794,6 @@ packages:

  /color-name@1.1.4:
    resolution: {integrity: sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==}
-    dev: true

  /comma-separated-tokens@2.0.3:
    resolution: {integrity: sha512-Fu4hJdvzeylCfQPp9SGWidpzrMs7tTrlu6Vb8XGaRGck8QSNZJJp538Wrb60Lax4fPwR64ViY468OIUTbRlGZg==}
@ -3815,7 +3802,6 @@ packages:
  /commander@4.1.1:
    resolution: {integrity: sha512-NOKm8xhkzAjzFx8B2v5OAHT+u5pRQc2UCa2Vq9jYL/31o2wi9mxBA7LIFs3sV5VSC49z6pEhfbMULvShKj26WA==}
    engines: {node: '>= 6'}
-    dev: true

  /compressible@2.0.18:
    resolution: {integrity: sha512-AF3r7P5dWxL8MxyITRMlORQNaOA2IkAFaTr4k7BUumjPtRpGDTZpl0Pb1XCO6JeDCBdp126Cgs9sMxqSjgYyRg==}
@ -3885,7 +3871,6 @@ packages:
      path-key: 3.1.1
      shebang-command: 2.0.0
      which: 2.0.2
-    dev: true

  /css-what@6.1.0:
    resolution: {integrity: sha512-HTUrgRJ7r4dsZKU6GjmpfRK1O76h97Z8MfS1G0FozR+oF2kG6Vfe8JE6zwrkbxigziPHinCJ+gCPjA9EaBDtRw==}
@ -3896,7 +3881,6 @@ packages:
    resolution: {integrity: sha512-/Tb/JcjK111nNScGob5MNtsntNM1aCNUDipB/TkwZFhyDrrE47SOx/18wF2bbjgc3ZzCSKW1T5nt5EbFoAz/Vg==}
    engines: {node: '>=4'}
    hasBin: true
-    dev: true

  /csstype@3.1.3:
    resolution: {integrity: sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw==}
@ -4011,7 +3995,6 @@ packages:

  /didyoumean@1.2.2:
    resolution: {integrity: sha512-gxtyfqMg7GKyhQmb056K7M3xszy/myH8w+B4RT+QXBQsvAOdc3XymqDDPHx1BgPgsdAA5SIifona89YtRATDzw==}
-    dev: true

  /diff@5.2.0:
    resolution: {integrity: sha512-uIFDxqpRZGZ6ThOk84hEfqWoHx2devRFvpTZcTHur85vImfaxUbTW9Ryh4CpCuDnToOP1CEtXKIgytHBPVff5A==}
@ -4027,7 +4010,6 @@ packages:

  /dlv@1.1.3:
    resolution: {integrity: sha512-+HlytyjlPKnIG8XuRG8WvmBP8xs8P71y+SKKS6ZXWoEgLuePxtDoUEiH7WkdePWrQ5JBpE6aoVqfZfJUQkjXwA==}
-    dev: true

  /doctrine@2.1.0:
    resolution: {integrity: sha512-35mSku4ZXK0vfCuHEDAwt55dg2jNajHZ1odvF+8SSr82EsZY4QmXfuWso8oEd8zRhVObSN18aM0CjSdoBX7zIw==}
@ -4059,7 +4041,6 @@ packages:

  /eastasianwidth@0.2.0:
    resolution: {integrity: sha512-I88TYZWc9XiYHRQ4/3c5rjjfgkjhLyW2luGIheGERbNQ6OY7yTybanSpDXZa8y7VUP9YmDcYa+eyq4ca7iLqWA==}
-    dev: true

  /ee-first@1.1.1:
    resolution: {integrity: sha512-WMwm9LhRUo+WUaRN+vRuETqG89IgZphVSNkdFgeb6sS/E4OrDIN7t48CAewSHXc6C8lefD8KKfr5vY61brQlow==}
@ -4070,11 +4051,9 @@ packages:

  /emoji-regex@8.0.0:
    resolution: {integrity: sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==}
-    dev: true

  /emoji-regex@9.2.2:
    resolution: {integrity: sha512-L18DaJsXSUk2+42pv8mLs5jJT2hqFkFE4j21wOmgbUqsZ2hL72NsUU785g9RXgo3s0ZNgVl42TiHp3ZtOv/Vyg==}
-    dev: true

  /encodeurl@1.0.2:
    resolution: {integrity: sha512-TPJXq8JqFaVYm2CWmPvnP2Iyo4ZSM7/QKcSmuMLDObfpH5fi7RUGmd/rTDf+rut/saiDiQEeVTNgAmJEdAOx0w==}
@ -4679,7 +4658,6 @@ packages:
      glob-parent: 5.1.2
      merge2: 1.4.1
      micromatch: 4.0.5
-    dev: true

  /fast-json-stable-stringify@2.1.0:
    resolution: {integrity: sha512-lhd/wF+Lk98HZoTCtlVraHtfh5XYijIjalXck7saUtuanSDyLMxnHhSXEDJqHxD7msR8D0uCmqlkwjCV8xvwHw==}
@ -4693,7 +4671,6 @@ packages:
    resolution: {integrity: sha512-sRVD3lWVIXWg6By68ZN7vho9a1pQcN/WBFaAAsDDFzlJjvoGx0P8z7V1t72grFJfJhu3YPZBuu25f7Kaw2jN1w==}
    dependencies:
      reusify: 1.0.4
-    dev: true

  /fault@2.0.1:
    resolution: {integrity: sha512-WtySTkS4OKev5JtpHXnib4Gxiurzh5NCGvWrFaZ34m6JehfTUhKZvn9njTfw48t6JumVQOmrKqpmGcdwxnhqBQ==}
@ -4768,7 +4745,6 @@ packages:
    dependencies:
      cross-spawn: 7.0.3
      signal-exit: 4.1.0
-    dev: true

  /format@0.2.2:
    resolution: {integrity: sha512-wzsgA6WOq+09wrU1tsJ09udeR/YZRaeArL9e1wPbFg3GG2yDnC2ldKpxs4xunpFF9DgqCqOIra3bc1HWrJ37Ww==}
@ -4892,7 +4868,6 @@ packages:
    engines: {node: '>=10.13.0'}
    dependencies:
      is-glob: 4.0.3
-    dev: true

  /glob@10.3.10:
    resolution: {integrity: sha512-fa46+tv1Ak0UPK1TOy/pZrIybNNt4HCv7SDzwyfiOZkvZLEbjsZkJBPtDHVshZjbecAoAGSC20MjLDG/qr679g==}
@ -4904,7 +4879,6 @@ packages:
      minimatch: 9.0.3
      minipass: 7.0.4
      path-scurry: 1.10.1
-    dev: true

  /glob@7.2.3:
    resolution: {integrity: sha512-nFR0zLpU2YCaRxwoCJvL6UvCH2JFyFVIvwTLsIf21AuHlMskA1hhTdk+LlYJtOlYt9v6dvszD2BGRqBL+iQK9Q==}
@ -5231,7 +5205,6 @@ packages:
    resolution: {integrity: sha512-hHrIjvZsftOsvKSn2TRYl63zvxsgE0K+0mYMoH6gD4omR5IWB2KynivBQczo3+wF1cCkjzvptnI9Q0sPU66ilw==}
    dependencies:
      hasown: 2.0.2
-    dev: true

  /is-data-view@1.0.1:
    resolution: {integrity: sha512-AHkaJrsUVW6wq6JS8y3JnM/GJF/9cf+k20+iDzlSaJrinEo5+7vRiteOSwBhHRiAyQATN1AmY4hwzxJKPmYf+w==}
@ -5268,7 +5241,6 @@ packages:
  /is-fullwidth-code-point@3.0.0:
    resolution: {integrity: sha512-zymm5+u+sCsSWyD9qNaejV3DFvhCKclKdizYaJUuHA83RLjb7nSuGnddCHGv0hk+KY7BMAlsWeK4Ueg6EV6XQg==}
    engines: {node: '>=8'}
-    dev: true

  /is-generator-function@1.0.10:
    resolution: {integrity: sha512-jsEjy9l3yiXEQ+PsXdmBwEPcOxaXWLspKdplFUVI9vq1iZgIekeC0L167qeu86czQaxed3q/Uzuw0swL0irL8A==}
@ -5422,7 +5394,6 @@ packages:

  /isexe@2.0.0:
    resolution: {integrity: sha512-RHxMLp9lnKHGHRng9QFhRCMbYAcVpn69smSGcq3f36xjgVVWThj4qqLbTLlq7Ssj8B+fIQ1EuCEGI2lKsyQeIw==}
-    dev: true

  /iterator.prototype@1.1.2:
    resolution: {integrity: sha512-DR33HMMr8EzwuRL8Y9D3u2BMj8+RqSE850jfGu59kS7tbmPLzGkZmVSfyCFSDxuZiEY6Rzt3T2NA/qU+NwVj1w==}
@ -5441,7 +5412,6 @@ packages:
      '@isaacs/cliui': 8.0.2
    optionalDependencies:
      '@pkgjs/parseargs': 0.11.0
-    dev: true

  /javascript-stringify@2.1.0:
    resolution: {integrity: sha512-JVAfqNPTvNq3sB/VHQJAFxN/sPgKnsKrCwyRt15zwNCdrMMJDdcEOdubuy+DuJYYdm0ox1J4uzEuYKkN+9yhVg==}
@ -5450,7 +5420,6 @@ packages:
  /jiti@1.21.0:
    resolution: {integrity: sha512-gFqAIbuKyyso/3G2qhiO2OM6shY6EPP/R0+mkDbyspxKazh8BXDC5FiFsUjlczgdNz/vfra0da2y+aHrusLG/Q==}
    hasBin: true
-    dev: true

  /js-tokens@4.0.0:
    resolution: {integrity: sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==}
@ -5550,16 +5519,13 @@ packages:
  /lilconfig@2.1.0:
    resolution: {integrity: sha512-utWOt/GHzuUxnLKxB6dk81RoOeoNeHgbrXiuGk4yyF5qlRz+iIVWu56E2fqGHFrXz0QNUhLB/8nKqvRH66JKGQ==}
    engines: {node: '>=10'}
-    dev: true

  /lilconfig@3.1.1:
    resolution: {integrity: sha512-O18pf7nyvHTckunPWCV1XUNXU1piu01y2b7ATJ0ppkUkk8ocqVWBrYjJBCwHDjD/ZWcfyrA0P4gKhzWGi5EINQ==}
    engines: {node: '>=14'}
-    dev: true

  /lines-and-columns@1.2.4:
    resolution: {integrity: sha512-7ylylesZQ/PV29jhEDl3Ufjo6ZX7gCqJr5F7PKrqc93v7fzSymt1BpwEU8nAUXs8qzzvqhbjhK5QZg6Mt/HkBg==}
-    dev: true

  /loader-utils@3.2.1:
    resolution: {integrity: sha512-ZvFw1KWS3GVyYBYb7qkmRM/WwL2TQQBxgCK62rlvm4WpVQ23Nb4tYjApUlfjrEGvOs7KHEsmyUn75OHZrJMWPw==}
@ -5624,7 +5590,6 @@ packages:
  /lru-cache@10.2.0:
    resolution: {integrity: sha512-2bIM8x+VAf6JT4bKAljS1qUWgMsqZRPGJS6FSahIMPVvctcNhyVp7AJu7quxOW9jwkryBReKZY5tY5JYv2n/7Q==}
    engines: {node: 14 || >=16.14}
-    dev: true

  /lru-cache@5.1.1:
    resolution: {integrity: sha512-KpNARQA3Iwv+jTA0utUVVbrh+Jlrr1Fv0e56GGzAFOXN7dk/FviaDW8LHmK52DlcH4WP2n6gI8vN1aesBFgo9w==}
@ -5798,7 +5763,6 @@ packages:
  /merge2@1.4.1:
    resolution: {integrity: sha512-8q7VEgMJW4J8tcfVPy8g09NcQwZdbwFEqhe/WZkoIzjn/3TGDwtOCYtXGxA3O8tPzpczCCDgv+P2P5y00ZJOOg==}
    engines: {node: '>= 8'}
-    dev: true

  /methods@1.1.2:
    resolution: {integrity: sha512-iclAHeNqNm68zFtnZ0e+1L2yUIdvzNoauKU4WBA3VvH/vPFieF7qfRlwUZU+DA9P9bPXIS90ulxoUoCH23sV2w==}
@ -6081,7 +6045,6 @@ packages:
    dependencies:
      braces: 3.0.2
      picomatch: 2.3.1
-    dev: true

  /mime-db@1.52.0:
    resolution: {integrity: sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg==}
@ -6119,7 +6082,6 @@ packages:
    engines: {node: '>=16 || 14 >=14.17'}
    dependencies:
      brace-expansion: 2.0.1
-    dev: true

  /minimist@1.2.8:
    resolution: {integrity: sha512-2yyAR8qBkN3YuheJanUpWC5U3bb5osDywNB8RzDVlDwDHbocAJveqqj1u8+SVD7jkWT4yvsHCpWqqWqAxb0zCA==}
@ -6161,7 +6123,6 @@ packages:
  /minipass@7.0.4:
    resolution: {integrity: sha512-jYofLM5Dam9279rdkWzqHozUo4ybjdZmCsDHePy5V/PbBcVMiSZR97gmAy45aqi8CK1lG2ECd356FU86avfwUQ==}
    engines: {node: '>=16 || 14 >=14.17'}
-    dev: true

  /minizlib@2.1.2:
    resolution: {integrity: sha512-bAxsR8BVfj60DWXHE3u30oHzfl4G7khkSuPW+qvpd7jFRHm7dLxOjUk1EHACJ/hxLY8phGJ0YhYHZo7jil7Qdg==}
@ -6231,13 +6192,11 @@ packages:
      any-promise: 1.3.0
      object-assign: 4.1.1
      thenify-all: 1.6.0
-    dev: true

  /nanoid@3.3.7:
    resolution: {integrity: sha512-eSRppjcPIatRIMC1U6UngP8XFcz8MQWGQdt1MTBQ7NaAmvXDfvNxbvWV3x2y6CdEUciCSsDHDQZbhYaB8QEo2g==}
    engines: {node: ^10 || ^12 || ^13.7 || ^14 || >=15.0.1}
    hasBin: true
-    dev: true

  /natural-compare-lite@1.4.0:
    resolution: {integrity: sha512-Tj+HTDSJJKaZnfiuw+iaF9skdPpTo2GtEly5JHnWV/hfv2Qj/9RKsGISQtLh2ox3l5EAGw487hnBee0sIJ6v2g==}
@ -6329,12 +6288,10 @@ packages:
  /object-assign@4.1.1:
    resolution: {integrity: sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==}
    engines: {node: '>=0.10.0'}
-    dev: true

  /object-hash@3.0.0:
    resolution: {integrity: sha512-RSn9F68PjH9HqtltsSnqYC1XXoWe9Bju5+213R98cNGttag9q9yAOTzdbsqvIa7aNm5WffBZFpWYr2aWrklWAw==}
    engines: {node: '>= 6'}
-    dev: true

  /object-inspect@1.13.1:
    resolution: {integrity: sha512-5qoj1RUiKOMsCCNLV1CBiPYE10sziTsnmNxkAI/rZhiD63CF7IqdFGC/XzjWjpSgLf0LxXX3bDFIh0E18f6UhQ==}
@ -6547,11 +6504,9 @@ packages:
  /path-key@3.1.1:
    resolution: {integrity: sha512-ojmeN0qd+y0jszEtoY48r0Peq5dwMEkIlCOu6Q5f41lfkswXuKtYrhgoTpLnyIcHm24Uhqx+5Tqm2InSwLhE6Q==}
    engines: {node: '>=8'}
-    dev: true

  /path-parse@1.0.7:
    resolution: {integrity: sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw==}
-    dev: true

  /path-scurry@1.10.1:
    resolution: {integrity: sha512-MkhCqzzBEpPvxxQ71Md0b1Kk51W01lrYvlMzSUaIzNsODdd7mqhiimSZlr+VegAz5Z6Vzt9Xg2ttE//XBhH3EQ==}
@ -6559,7 +6514,6 @@ packages:
    dependencies:
      lru-cache: 10.2.0
      minipass: 7.0.4
-    dev: true

  /path-to-regexp@0.1.7:
    resolution: {integrity: sha512-5DFkuoqlv1uYQKxy8omFBeJPQcdoE07Kv2sferDCrAq1ohOU+MSDswDIbnx3YAM60qIOnYa53wBhXW0EbMonrQ==}
@ -6591,7 +6545,6 @@ packages:

  /picocolors@1.0.0:
    resolution: {integrity: sha512-1fygroTLlHu66zi26VoTDv8yRgm0Fccecssto+MhsZ0D/DGW2sm8E8AjW7NU5VVTRt5GxbeZ5qBuJr+HyLYkjQ==}
-    dev: true

  /picomatch@2.3.1:
    resolution: {integrity: sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==}
@ -6606,12 +6559,10 @@ packages:
  /pify@2.3.0:
    resolution: {integrity: sha512-udgsAY+fTnvv7kI7aaxbqwWNb0AHiB0qBO89PZKPkoTmGOgdbrHDKD+0B2X4uTfJ/FT1R09r9gTsjUjNJotuog==}
    engines: {node: '>=0.10.0'}
-    dev: true

  /pirates@4.0.6:
    resolution: {integrity: sha512-saLsH7WeYYPiD25LDuLRRY/i+6HaPYr6G1OUlN39otzkSTxKnubR9RTxS3/Kk50s1g2JTgFwWQDQyplC5/SHZg==}
    engines: {node: '>= 6'}
-    dev: true

  /pkg-types@1.0.3:
    resolution: {integrity: sha512-nN7pYi0AQqJnoLPC9eHFQ8AcyaixBUOwvqc5TDnIKCMEE6I0y8P7OKA7fPexsXGCGxQDl/cmrLAp26LhcwxZ4A==}
@ -6649,7 +6600,6 @@ packages:
      postcss-value-parser: 4.2.0
      read-cache: 1.0.0
      resolve: 1.22.8
-    dev: true

  /postcss-js@4.0.1(postcss@8.4.38):
    resolution: {integrity: sha512-dDLF8pEO191hJMtlHFPRa8xsizHaM82MLfNkUHdUtVEV3tgTp5oj+8qbEqYM57SLfc74KSbw//4SeJma2LRVIw==}
@ -6659,7 +6609,6 @@ packages:
    dependencies:
      camelcase-css: 2.0.1
      postcss: 8.4.38
-    dev: true

  /postcss-load-config@4.0.2(postcss@8.4.38):
    resolution: {integrity: sha512-bSVhyJGL00wMVoPUzAVAnbEoWyqRxkjv64tUl427SKnPrENtq6hJwUojroMz2VB+Q1edmi4IfrAPpami5VVgMQ==}
@ -6676,7 +6625,6 @@ packages:
      lilconfig: 3.1.1
      postcss: 8.4.38
      yaml: 2.4.1
-    dev: true

  /postcss-modules-extract-imports@3.0.0(postcss@8.4.38):
    resolution: {integrity: sha512-bdHleFnP3kZ4NYDhuGlVK+CMrQ/pqUm8bx/oGL93K6gVwiclvX5x0n76fYMKuIGKzlABOy13zsvqjb0f92TEXw==}
@ -6743,7 +6691,6 @@ packages:
    dependencies:
      postcss: 8.4.38
      postcss-selector-parser: 6.0.16
-    dev: true

  /postcss-selector-parser@6.0.16:
    resolution: {integrity: sha512-A0RVJrX+IUkVZbW3ClroRWurercFhieevHB38sr2+l9eUClMqome3LmEmnhlNy+5Mr2EYN6B2Kaw9wYdd+VHiw==}
@ -6751,11 +6698,9 @@ packages:
    dependencies:
      cssesc: 3.0.0
      util-deprecate: 1.0.2
-    dev: true

  /postcss-value-parser@4.2.0:
    resolution: {integrity: sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==}
-    dev: true

  /postcss@8.4.38:
    resolution: {integrity: sha512-Wglpdk03BSfXkHoQa3b/oulrotAkwrlLDRSOb9D0bN86FdRyE9lppSp33aHNPgBa0JKCoB+drFLZkQoRRYae5A==}
@ -6764,7 +6709,6 @@ packages:
      nanoid: 3.3.7
      picocolors: 1.0.0
      source-map-js: 1.2.0
-    dev: true

  /prelude-ls@1.2.1:
    resolution: {integrity: sha512-vkcDPrRZo1QZLbn5RLGPpg/WmIQ65qoWWhcGKf/b5eplkkarX0m9z8ppCat4mlOqUsWpyNuYgO3VRyrYHSzX5g==}
@ -6864,7 +6808,6 @@ packages:

  /queue-microtask@1.2.3:
    resolution: {integrity: sha512-NuaNSa6flKT5JaSYQzJok04JzTL1CA6aGhv5rfLW3PgqA+M2ChpZQnAC8h8i4ZFkBS8X5RqkDBHA7r4hej3K9A==}
-    dev: true

  /range-parser@1.2.1:
    resolution: {integrity: sha512-Hrgsx+orqoygnmhFbKaHE6c296J+HTAQXoxEF6gNupROmmGJRoyzfG3ccAveqCBrwr/2yxQ5BVd/GTl5agOwSg==}
@ -7080,7 +7023,6 @@ packages:
    resolution: {integrity: sha512-Owdv/Ft7IjOgm/i0xvNDZ1LrRANRfew4b2prF3OWMQLxLfu3bS8FVhCsrSCMK4lR56Y9ya+AThoTpDCTxCmpRA==}
    dependencies:
      pify: 2.3.0
-    dev: true

  /read-pkg-up@7.0.1:
    resolution: {integrity: sha512-zK0TB7Xd6JpCLmlLmufqykGE+/TlOePD6qKClNW7hHDKFh/J7/7gCWGR7joEQEW1bKq3a3yUZSObOoWLFQ4ohg==}
@ -7276,7 +7218,6 @@ packages:
      is-core-module: 2.13.1
      path-parse: 1.0.7
      supports-preserve-symlinks-flag: 1.0.0
-    dev: true

  /resolve@2.0.0-next.5:
    resolution: {integrity: sha512-U7WjGVG9sH8tvjW5SmGbQuui75FiyjAX72HX15DwBBwF9dNiQZRQAg9nnPhYy+TUnE0+VcrttuvNI8oSxZcocA==}
@ -7303,7 +7244,6 @@ packages:
  /reusify@1.0.4:
    resolution: {integrity: sha512-U9nH88a3fc/ekCF1l0/UP1IosiuIjyTh7hBvXVMHYgVcfGvt897Xguj2UOLDeI5BG2m7/uwyaLVT6fbtCwTyzw==}
    engines: {iojs: '>=1.0.0', node: '>=0.10.0'}
-    dev: true

  /rimraf@3.0.2:
    resolution: {integrity: sha512-JZkJMZkAGFFPP2YqXZXPbMlMBgsxzE8ILs4lMIX/2o0L9UBw9O/Y3o6wFw/i9YLapcUJWwqbi3kdxIPdC62TIA==}
@ -7339,7 +7279,6 @@ packages:
    resolution: {integrity: sha512-5l4VyZR86LZ/lDxZTR6jqL8AFE2S0IFLMP26AbjsLVADxHdhB/c0GUsH+y39UfCi3dzz8OlQuPmnaJOMoDHQBA==}
    dependencies:
      queue-microtask: 1.2.3
-    dev: true

  /sade@1.8.1:
    resolution: {integrity: sha512-xal3CZX1Xlo/k4ApwCFrHVACi9fBqJ7V+mwhBsuf/1IOKbBy098Fex+Wa/5QMubw09pSZ/u8EY8PWgevJsXp1A==}
@ -7469,12 +7408,10 @@ packages:
    engines: {node: '>=8'}
    dependencies:
      shebang-regex: 3.0.0
-    dev: true

  /shebang-regex@3.0.0:
    resolution: {integrity: sha512-7++dFhtcx3353uBaq8DDR4NuxBetBzC7ZQOhmTQInHEd6bSrXdiEyzCvG07Z44UYdLShWUyXt5M/yhz8ekcb1A==}
    engines: {node: '>=8'}
-    dev: true

  /side-channel@1.0.6:
    resolution: {integrity: sha512-fDW/EZ6Q9RiO8eFG8Hj+7u/oW+XrPTIChwCOM2+th2A6OblDtYYIpve9m+KvI9Z4C9qSEXlaGR6bTEYHReuglA==}
@ -7492,7 +7429,6 @@ packages:
  /signal-exit@4.1.0:
    resolution: {integrity: sha512-bzyZ1e88w9O1iNJbKnOlvYTrWPDl46O1bG0D3XInv+9tkPrxrN8jUUTiFlDkkmKWgn1M6CfIA13SuGqOa9Korw==}
    engines: {node: '>=14'}
-    dev: true

  /slash@3.0.0:
    resolution: {integrity: sha512-g9Q1haeby36OSStwb4ntCGGGaKsaVSjQ68fBxoQcutl5fS1vuY18H3wSt3jFyFtrkx+Kz0V1G85A4MyAdDMi2Q==}
@ -7502,7 +7438,6 @@ packages:
  /source-map-js@1.2.0:
    resolution: {integrity: sha512-itJW8lvSA0TXEphiRoawsCksnlf8SyvmFzIhltqAHluXd88pkCd+cXJVHTDwdCr0IzwptSm035IHQktUu1QUMg==}
    engines: {node: '>=0.10.0'}
-    dev: true

  /source-map-support@0.5.21:
    resolution: {integrity: sha512-uBHU3L3czsIyYXKX88fdrGovxdSCoTGDRZ6SYXtSRxLZUzHg5P/66Ht6uoUlHu9EZod+inXhKo3qQgwXUT/y1w==}
@ -7573,7 +7508,6 @@ packages:
      emoji-regex: 8.0.0
      is-fullwidth-code-point: 3.0.0
      strip-ansi: 6.0.1
-    dev: true

  /string-width@5.1.2:
    resolution: {integrity: sha512-HnLOCR3vjcY8beoNLtcjZ5/nxn2afmME6lhrDrebokqMap+XbeW8n9TXpPDOqdGK5qcI3oT0GKTW6wC7EMiVqA==}
@ -7582,7 +7516,6 @@ packages:
      eastasianwidth: 0.2.0
      emoji-regex: 9.2.2
      strip-ansi: 7.1.0
-    dev: true

  /string.prototype.matchall@4.0.11:
    resolution: {integrity: sha512-NUdh0aDavY2og7IbBPenWqR9exH+E26Sv8e0/eTe1tltDGZL+GtBkDAnnyBtmekfK6/Dq3MkcGtzXFEd1LQrtg==}
@ -7653,14 +7586,12 @@ packages:
    engines: {node: '>=8'}
    dependencies:
      ansi-regex: 5.0.1
-    dev: true

  /strip-ansi@7.1.0:
    resolution: {integrity: sha512-iq6eVVI64nQQTRYq2KtEg2d2uU7LElhTJwsH4YzIHZshxlgZms/wIc4VoDQTlG/IvVIrBKG06CrZnp0qv7hkcQ==}
    engines: {node: '>=12'}
    dependencies:
      ansi-regex: 6.0.1
-    dev: true

  /strip-bom@3.0.0:
    resolution: {integrity: sha512-vavAMRXOgBVNF6nyEEmL3DBK19iRpDcoIwW+swQ+CbGiu7lju6t+JklA1MHweoWtadgt4ISVUsXLyDq34ddcwA==}
@ -7706,7 +7637,6 @@ packages:
      mz: 2.7.0
      pirates: 4.0.6
      ts-interface-checker: 0.1.13
-    dev: true

  /supports-color@5.5.0:
    resolution: {integrity: sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==}
@ -7725,8 +7655,29 @@ packages:
  /supports-preserve-symlinks-flag@1.0.0:
    resolution: {integrity: sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w==}
    engines: {node: '>= 0.4'}
+
+  /tailwind-merge@2.3.0:
+    resolution: {integrity: sha512-vkYrLpIP+lgR0tQCG6AP7zZXCTLc1Lnv/CCRT3BqJ9CZ3ui2++GPaGb1x/ILsINIMSYqqvrpqjUFsMNLlW99EA==}
+    dependencies:
+      '@babel/runtime': 7.24.1
+    dev: false
+
+  /tailwindcss-animate@1.0.7(tailwindcss@3.4.1):
+    resolution: {integrity: sha512-bl6mpH3T7I3UFxuvDEXLxy/VuFxBk5bbzplh7tXI68mwMokNYd1t9qPBHlnyTwfa4JGC4zP516I1hYYtQ/vspA==}
+    peerDependencies:
+      tailwindcss: '>=3.0.0 || insiders'
+    dependencies:
+      tailwindcss: 3.4.1
    dev: true

+  /tailwindcss-react-aria-components@1.1.1(tailwindcss@3.4.1):
+    resolution: {integrity: sha512-ig2pJOz4Gb10uYbGrFiIb5Fs3hUlZ5fTaNfDmLMofVhwXLpyOY+swaSBNg3XzS0ccQHgag3vXxIuHQXVetKYQg==}
+    peerDependencies:
+      tailwindcss: '>=3.0.0 || insiders'
+    dependencies:
+      tailwindcss: 3.4.1
+    dev: false
+
  /tailwindcss@3.4.1:
    resolution: {integrity: sha512-qAYmXRfk3ENzuPBakNK0SRrUDipP8NQnEY6772uDhflcQz5EhRdD7JNZxyrFHVQNCwULPBn6FNPp9brpO7ctcA==}
    engines: {node: '>=14.0.0'}
@ -7756,7 +7707,6 @@ packages:
      sucrase: 3.35.0
    transitivePeerDependencies:
      - ts-node
-    dev: true

  /tar-fs@2.1.1:
    resolution: {integrity: sha512-V0r2Y9scmbDRLCNex/+hYzvp/zyYjvFbHPNgVTKfQvVrb6guiE/fxP+XblDNR011utopbkex2nM4dHNV6GDsng==}
@ -7799,13 +7749,11 @@ packages:
    engines: {node: '>=0.8'}
    dependencies:
      thenify: 3.3.1
-    dev: true

  /thenify@3.3.1:
    resolution: {integrity: sha512-RVZSIV5IG10Hk3enotrhvz0T9em6cyHBLkH/YAZuKqd8hRkKhSfCGIcP2KUY0EPxndzANBmNllzWPwak+bheSw==}
    dependencies:
      any-promise: 1.3.0
-    dev: true

  /through2@2.0.5:
    resolution: {integrity: sha512-/mrRod8xqpA+IHSLyGCQ2s8SPHiCDEeQJSep1jqLYeEUClOFG2Qsh+4FU6G9VeqpZnGW/Su8LQGc4YKni5rYSQ==}
@ -7843,7 +7791,6 @@ packages:

  /ts-interface-checker@0.1.13:
    resolution: {integrity: sha512-Y/arvbn+rrz3JCKl9C4kVNfTfSm2/mEp5FSz5EsZSANGPSlQrpRI5M4PKF+mJnE52jOO90PnPSc3Ur3bTQw0gA==}
-    dev: true

  /tsconfck@3.0.3(typescript@5.4.3):
    resolution: {integrity: sha512-4t0noZX9t6GcPTfBAbIbbIU4pfpCwh0ueq3S4O/5qXI1VwK1outmxhe9dOiEWqMz3MW2LKgDTpqWV+37IWuVbA==}
@ -8112,7 +8059,6 @@ packages:

  /util-deprecate@1.0.2:
    resolution: {integrity: sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw==}
-    dev: true

  /util@0.12.5:
    resolution: {integrity: sha512-kZf/K6hEIrWHI6XqOFUiiMa+79wE/D8Q+NCNAWclkyg3b4d2k7s0QGepNjiABc+aR3N1PAyHL7p6UcLY6LmrnA==}
@ -8320,7 +8266,6 @@ packages:
    hasBin: true
    dependencies:
      isexe: 2.0.0
-    dev: true

  /which@3.0.1:
    resolution: {integrity: sha512-XA1b62dzQzLfaEOSQFTCOd5KFf/1VSzZo7/7TUjnya6u0vGGKzU96UQBZTAThCb2j4/xjBAyii1OhRLJEivHvg==}
@ -8337,7 +8282,6 @@ packages:
      ansi-styles: 4.3.0
      string-width: 4.2.3
      strip-ansi: 6.0.1
-    dev: true

  /wrap-ansi@8.1.0:
    resolution: {integrity: sha512-si7QWI6zUMq56bESFvagtmzMdGOtoxfR+Sez11Mobfc7tm+VkUckk9bW2UeffTGVUbOksxmSw0AA2gs8g71NCQ==}
@ -8346,7 +8290,6 @@ packages:
      ansi-styles: 6.2.1
      string-width: 5.1.2
      strip-ansi: 7.1.0
-    dev: true

  /wrappy@1.0.2:
    resolution: {integrity: sha512-l4Sp/DRseor9wL6EvV2+TuQn63dMkPjZ/sp9XkghTEbV9KlPS1xUsZ3u7/IQO4wxtcFB4bgpQPRcR3QCvezPcQ==}
--- a/tailwind.config.ts
+++ b/tailwind.config.ts
@ -1,5 +1,8 @@
 /* eslint-disable @typescript-eslint/naming-convention */
 import type { Config } from 'tailwindcss'
+import colors from 'tailwindcss/colors'
+import animate from 'tailwindcss-animate'
+import aria from 'tailwindcss-react-aria-components'

 export default {
 	content: ['./app/**/*.{js,jsx,ts,tsx}'],
@ -17,9 +20,13 @@ export default {
 		extend: {
 			height: {
 				editor: 'calc(100vh - 20rem)'
+			},
+			colors: {
+				main: colors.slate,
+				ui: colors.neutral
 			}
 		}
 	},
-	plugins: []
+	plugins: [animate, aria]
 } satisfies Config